/* Hero refinement: human digital avatars, translucent role panels, handwritten thought.
   Navy/blue identity, original photographic background and page structure are preserved. */
@font-face {font-family: 'Hero Handwriting'; src: url('assets/hero-handwriting.woff2') format('woff2'); font-style: normal; font-weight: 400 700; font-display: swap;}
.hero-proposal {background: #0b1823;}
.hero-proposal .hero-photo {width: 100%; right: 14%; left: auto; object-position: 75% 42%; opacity: 1; mask-image: linear-gradient(90deg, #000 0%, #000 85%, transparent 100%);}
.hero-proposal::before {background: linear-gradient(90deg, #08151ff5 0%, #08151fe6 23%, #08151f80 46%, #08151f08 63%, #08151f4d 80%, #08151f8c 100%);}
.hero-proposal .people-hero-inner {display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr) clamp(320px, 27vw, 370px); gap: 24px; min-height: 688px; padding-block: 60px; align-items: center; position: relative;}
.hero-proposal .hero-copy {grid-column: 1; max-width: 580px; padding: 0;}
.hero-proposal h1 {font-size: clamp(48px, 4.7vw, 70px); line-height: 1.04; letter-spacing: -.035em; font-weight: 650; margin: 0; text-wrap: initial;}
.hero-proposal h1 span {color: #8ec4ff;}
.hero-proposal .hero-lead {color: #f0f6ff; font-size: 21px; line-height: 1.5; max-width: 440px; margin-top: 26px;}
.hero-proposal .hero-purpose {font-size: 14px; color: #c8d8ea; line-height: 1.65; margin-top: 16px;}
.hero-benefits {display: flex; flex-wrap: wrap; gap: 10px 18px; list-style: none; padding: 0; margin: 28px 0 0;}
.hero-benefits li {display: flex; align-items: center; gap: 7px; font-size: 12px; color: #d7e5f5; white-space: nowrap;}
.hero-benefits .icon {width: 17px; height: 17px; color: #a6c9ec; flex-shrink: 0;}
.hero-proposal .hero-actions {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; align-items: center; justify-content: flex-start; flex-direction: row;}
.hero-proposal .button {font-size: 14px; gap: 14px; min-height: 54px; padding: 14px 20px; border-radius: 12px;}
.hero-proposal .button > .icon {width: 20px; height: 20px; flex-shrink: 0;}
.hero-proposal .button-outline {background: #0e2133c9; border-color: #9bb4cd80; padding-inline: 18px;}
.hero-proposal .button-outline:hover {background: #1b3650; border-color: #c4ddf6;}
.hero-life-note {position: absolute; left: 39%; top: 46%; width: 220px; margin: 0; transform: rotate(-7deg); color: #fff; text-shadow: 0 2px 10px #06131e99;}
.hero-life-note blockquote {font-family: 'Hero Handwriting', cursive; font-size: 32px; font-weight: 500; line-height: 1.15; letter-spacing: 0; margin: 0;}
.hero-life-note figcaption {font-size: 11px; line-height: 1.6; color: #e0ebf8; margin-top: 13px; max-width: 190px;}
.hero-life-note figcaption small {display: block; font-size: 10px; color: #c8daed;}
.hero-colleagues {grid-column: 3; display: grid; gap: 14px; min-width: 0;}
.hero-colleague {display: flex; align-items: center; gap: 12px; padding: 9px 9px 9px 16px; min-height: 86px; color: #fff; background: #102b4373; border: 1px solid #d1e6f552; border-radius: 48px; text-decoration: none; transition: background .22s, border-color .22s, transform .22s;}
@supports (backdrop-filter: blur(10px)) {
 .hero-colleague {background: #17364c66; backdrop-filter: blur(10px);}
}
.hero-colleague:hover {background: #244b67ad; border-color: #d7eaf9b3; transform: translateX(-4px);}
.hero-role-icon {display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #bfe7ff; color: #145374;}
.hero-role-icon .icon {width: 18px; height: 18px;}
.hero-role-administration .hero-role-icon {background: #b7f1ee; color: #126766;}
.hero-role-leadership .hero-role-icon {background: #8bbcff; color: #123d70;}
.hero-colleague-copy {flex: 1; min-width: 0;}
.hero-colleague strong {display: block; font-size: 15px; line-height: 1.45; font-weight: 600;}
.hero-colleague small {display: block; font-size: 13px; line-height: 1.5; margin-top: 3px; color: #edf5ff;}
.hero-colleague sup {font-size: 9px; line-height: 0; margin-left: 2px;}
.hero-colleague-avatar {display: block; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #10243e;}
.hero-colleagues-note {font-size: 11px; line-height: 1.6; color: #d8e6f5; margin: 2px 8px 0 16px;}
.hero-proposal a:focus-visible {outline: 3px solid #b9dfff; outline-offset: 4px;}
@media (min-width: 1600px) {
 .hero-proposal .hero-photo {left: calc(50% - 930px); right: auto; width: 1280px; max-width: none; object-fit: cover; object-position: center; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 78%, transparent);}
 .hero-proposal .people-hero-inner {min-height: 720px;}
 .hero-life-note {left: 30%; top: 46%; width: 220px;}
}
@media (min-width: 1101px) and (max-width: 1279px) {
 .hero-proposal .people-hero-inner {grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr) 324px; gap: 16px;}
 .hero-proposal h1 {font-size: 54px;}
 .hero-proposal .hero-photo {right: 20%;}
 .hero-proposal .hero-actions {gap: 10px;}
 .hero-proposal .button {padding-inline: 15px; font-size: 13px;}
 .hero-life-note {left: 34%; top: 46%; width: 170px;}
 .hero-life-note blockquote {font-size: 27px;}
 .hero-life-note figcaption {font-size: 10px;}
 .hero-colleague {padding-left: 12px; gap: 9px;}
 .hero-role-icon {width: 30px; height: 30px; flex-basis: 30px;}
 .hero-colleague-avatar {width: 58px; height: 58px; flex-basis: 58px;}
 .hero-colleague strong {font-size: 14px;}
 .hero-colleague small {font-size: 12px;}
}
@media (max-width: 1100px) {
 .hero-proposal .hero-photo {right: 0; object-position: 67% 32%; mask-image: none;}
 .hero-proposal::before {background: linear-gradient(90deg, #08151ff5 0%, #08151fd9 32%, #08151f30 74%), linear-gradient(0deg, #0b1c2df5 0%, #0b1c2d80 30%, transparent 60%);}
 .hero-proposal .people-hero-inner {grid-template-columns: 1fr; gap: 30px; padding-block: 56px 32px; min-height: 0;}
 .hero-proposal .hero-copy {max-width: 570px;}
 .hero-proposal h1 {font-size: 62px;}
 .hero-proposal .hero-lead {max-width: 440px;}
 .hero-life-note {left: 55%; top: 46%; width: 220px;}
 .hero-colleagues {grid-column: 1; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 10px;}
 .hero-colleague {min-height: 86px;}
 .hero-colleagues-note {grid-column: 1 / -1; margin-top: 4px;}
 .hero-colleague:hover {transform: translateY(-3px);}
}
@media (max-width: 800px) {
 .hero-proposal .people-hero-inner {padding-block: 48px 28px; gap: 28px;}
 .hero-proposal .hero-photo {object-position: 68% top; height: 640px; opacity: .9;}
 .hero-proposal::before {background: linear-gradient(90deg, #08151ff2 0%, #08151fd1 40%, #08151f2b 100%), linear-gradient(0deg, #0b1823 12%, #0b182300 75%);}
 .hero-proposal h1 {font-size: 57px;}
 .hero-proposal .hero-lead {font-size: 20px;}
 .hero-proposal .hero-purpose {max-width: 300px;}
 .hero-life-note {position: static; grid-column: 1; justify-self: end; width: 210px; transform: rotate(-4deg); margin: 0 10px 4px 0;}
 .hero-life-note blockquote {font-size: 30px;}
 .hero-life-note figcaption {font-size: 11px; margin-top: 8px;}
 .hero-colleagues {margin-top: 0;}
 .hero-role-icon {display: none;}
 .hero-colleague {padding-left: 16px;}
 .hero-colleague-avatar {width: 58px; height: 58px; flex-basis: 58px;}
 .hero-colleague strong {font-size: 13px;}
}
@media (max-width: 560px) {
 .hero-colleagues {grid-template-columns: 1fr; gap: 11px;}
 .hero-colleague {padding: 9px 9px 9px 16px; min-height: 82px; gap: 12px;}
 .hero-role-icon {display: grid; width: 32px; height: 32px; flex-basis: 32px;}
 .hero-colleague-avatar {width: 60px; height: 60px; flex-basis: 60px;}
 .hero-colleague strong {font-size: 14px;}
 .hero-colleague small {font-size: 12px;}
 .hero-colleagues-note {margin-left: 12px;}
}
@media (max-width: 480px) {
 .hero-proposal .people-hero-inner {padding-block: 42px 26px; gap: 26px;}
 .hero-proposal .hero-photo {height: 600px; right: -13%; width: 125%; object-position: 73% top; opacity: .78;}
 .hero-proposal::before {background: linear-gradient(90deg, #08151fed 0%, #08151fbd 48%, #08151f66 100%), linear-gradient(0deg, #0b1823 36%, #0b182300 88%);}
 .hero-proposal h1 {font-size: clamp(39px, 10.9vw, 52px); line-height: 1.06;}
 .hero-proposal .hero-lead {font-size: 17px; margin-top: 22px; line-height: 1.55;}
 .hero-proposal .hero-purpose {font-size: 13px; margin-top: 14px;}
 .hero-benefits {margin-top: 24px; gap: 10px 14px;}
 .hero-benefits li {font-size: 11px; gap: 5px;}
 .hero-benefits .icon {width: 15px; height: 15px;}
 .hero-proposal .hero-actions {margin-top: 26px; max-width: 100%; flex-direction: column; align-items: stretch; gap: 10px;}
 .hero-proposal .button {font-size: 14px; min-height: 52px; width: 100%; justify-content: center;}
 .hero-life-note {justify-self: start; margin-left: 12px;}
 .hero-life-note blockquote {font-size: 30px;}
}
@media (max-width: 359px) {
 .hero-role-icon {display: none;}
 .hero-colleague strong {font-size: 13px;}
 .hero-colleague-avatar {width: 54px; height: 54px; flex-basis: 54px;}
}
@media (prefers-reduced-motion: reduce) {
 .hero-colleague {transition: none;}
 .hero-colleague:hover {transform: none;}
}
@media (prefers-reduced-transparency: reduce) {
 .hero-colleague {background: #173047; backdrop-filter: none;}
}
@media print {
 .hero-proposal .people-hero-inner {display: block;}
 .hero-proposal .hero-photo, .hero-benefits, .hero-colleagues, .hero-life-note {display: none;}
 .hero-proposal .hero-lead, .hero-proposal .hero-purpose, .hero-proposal h1 span {color: #142032;}
}