/* ============================================================
   V4 hero builds — journey (V2b), dark statement, light statement,
   boxed statement. Brand palette only; Poppins throughout.
   ============================================================ */
.hero--v4{padding:0!important;position:relative;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;container-type:inline-size}
.hero--v4 .h-display em,.hero--v4 .h-display strong{font-style:normal;background:none;padding:0}

/* --- Journey (V2b): navy slab, journey artwork, four stops named --- */
/* Height is capped against width: the art is aspect-locked to the hero's
   height, so a tall hero widens it and pushes the curve over the copy. */
.hero--journey{background:#02123B;color:#fff;min-height:min(92svh,58vw)}
.hj-art{position:absolute;top:0;right:0;bottom:0;aspect-ratio:1659/936;pointer-events:none}
.hj-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hj-pt{position:absolute;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;white-space:nowrap}
.hj-pt.pt1{left:59.5%;top:85%}
.hj-pt.pt2{left:73.2%;top:62.8%}
.hj-pt.pt3{right:15.4%;top:44.3%}
.hj-pt.pt4{right:16%;top:23.9%;color:var(--ia-light-blue)}
.hj-body{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:120px;padding-bottom:80px}
html[data-bp="on"] .hero--journey .h-display{color:#fff;max-width:15ch;font-size:clamp(40px,4.9vw,68px);font-weight:700;line-height:1.05;letter-spacing:-.028em}
html[data-bp="on"] .hero--journey .h-display em{color:var(--ia-light-blue)}
.hero--journey .lede{color:rgba(255,255,255,.78);font-size:clamp(16px,1.35vw,20px);line-height:1.62;margin-top:24px;max-width:46ch}
.hero--journey .delivered-across{margin:26px 0 0;font-size:14px;color:rgba(255,255,255,.6)}
.hero--journey .delivered-across strong{color:#fff;font-weight:600}
@media (max-width:1100px){.hj-pt{display:none}}
@media (max-width:820px){.hj-art{opacity:.35}}

/* --- Statement (dark + light): one centred line, ticker along the bottom --- */
.hero--statement{background:#02123B;color:#fff}
.hero--statement-lt{background:radial-gradient(120% 90% at 50% -10%,var(--ia-blue-50) 0%,var(--ia-blue-50) 36%,#fff 100%);color:var(--ink)}
.st-glow{position:absolute;inset:auto 0 -240px;height:620px;background:radial-gradient(50% 60% at 50% 40%,rgba(75,228,248,.22),rgba(1,25,183,.16) 45%,transparent 72%);pointer-events:none}
.hero--statement-lt .st-glow{background:radial-gradient(46% 56% at 50% 38%,rgba(218,250,254,.5),rgba(75,228,248,.12) 34%,rgba(1,25,183,.04) 58%,transparent 78%)}
.st-body{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:150px 48px 110px}
html[data-bp="on"] .hero--statement .h-display{color:#fff;margin:0 auto;max-width:14ch;font-size:clamp(42px,6.25cqw,84px);font-weight:300;letter-spacing:-.03em;line-height:1.06}
html[data-bp="on"] .hero--statement .h-display strong{font-weight:600;color:inherit}
html[data-bp="on"] .hero--statement-lt .h-display{color:var(--ink)}
.hero--statement .lede{margin:34px auto 0;max-width:52ch;color:rgba(255,255,255,.72);font-size:clamp(16px,1.4vw,20px)}
.hero--statement-lt .lede{color:var(--ia-dark-blue);opacity:.72}
.hero--statement .st-body{position:relative}
/* The arrow stays in normal flow at every size. It used to be pulled out to
   position:absolute above 861x820, with nothing reserving its space, so a
   short-but-tall hero let the centred lede run underneath it. Keeping it in
   flow makes overlap impossible and stops it jumping between breakpoints;
   the margin still opens up on taller viewports. */
.hero--statement .st-arrow{position:static;margin:clamp(28px,4svh,56px) auto 0}
.st-arrow{margin:36px 0 0;font-size:26px;line-height:1;color:var(--ia-light-blue);background:none;border:0;padding:6px 14px;font-family:inherit;cursor:pointer;border-radius:999px;transition:color var(--dur-fast),background var(--dur-fast);animation:st-bob 2.1s ease-in-out 1.2s 5 both}
.st-arrow:hover{background:rgba(255,255,255,.1);color:#fff}
.hero--statement-lt .st-arrow:hover{background:rgba(1,25,183,.07);color:var(--ia-dark-blue)}
@keyframes st-bob{0%,100%{transform:none}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.st-arrow{animation:none}}
.hero--statement-lt .st-arrow{color:var(--ia-blue)}
.v4-ticker{position:relative;z-index:3;overflow:hidden;padding:13px 0;margin-bottom:clamp(56px,9vh,110px);border-top:1px solid rgba(255,255,255,.14)}
.hero--statement-lt .v4-ticker{border-top:1px solid var(--hairline)}
.v4-ticker-track{display:flex;width:max-content;animation:v4-tick 42s linear infinite}
.v4-tick{display:inline-flex;align-items:center;padding-right:52px;white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hero--statement-lt .v4-tick{color:var(--ia-dark-blue);opacity:.6}
.v4-tick--lead{font-weight:700;color:#fff}
.hero--statement-lt .v4-tick--lead,.hero--warm .v4-tick--lead{color:var(--ink)}

/* Statement headline: the emphasised word lands light, then crossfades into bold.
   Poppins ships as fixed weights, so animating font-weight snaps — two stacked
   copies give a real thickening. */
.st-em{position:relative;display:inline-block;white-space:nowrap}
.st-em i{display:inline-block;font-style:normal}
.st-em .st-l{font-weight:300;animation:st-em-out .5s ease 1s both}
.st-em .st-b{position:absolute;left:50%;top:0;transform:translateX(-50%);font-weight:600;opacity:0;animation:st-em-in .5s ease 1s both}
@keyframes st-em-out{to{opacity:0}}
@keyframes st-em-in{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.st-em .st-l{animation:none;opacity:0}.st-em .st-b{animation:none;opacity:1}}

@keyframes v4-tick{to{transform:translateX(-50%)}}
.v4-ticker--static{overflow:visible}
.v4-ticker-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 34px;padding:0 32px}
.v4-ticker-row .v4-tick{padding-right:0}
.v4-tick--more{opacity:.62;font-style:italic;letter-spacing:.08em;text-transform:none}

/* --- Boxed statement: warm paper, brand shapes, navy type boxes --- */
.hero--boxed{background:#F3F1EC;color:var(--ink)}
.bx-sh{position:absolute;display:block;height:auto;pointer-events:none}
.bx-sh1{left:5.5%;top:19%;width:14cqw;max-width:200px;transform:rotate(-10deg)}
.bx-sh2{left:11.7%;bottom:10%;width:11.7cqw;max-width:166px;transform:rotate(8deg)}
.bx-sh3{right:7.5%;top:16.5%;width:15.6cqw;max-width:222px;transform:rotate(9deg)}
.bx-sh4{right:11.7%;bottom:8.5%;width:12.5cqw;max-width:178px;transform:rotate(-12deg)}
.bx-sh5{left:40.6%;bottom:4%;width:9.4cqw;max-width:134px;transform:rotate(6deg)}
.bx-body{position:relative;z-index:4;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:150px 80px 110px}
html[data-bp="on"] .hero--boxed .h-display{margin:0;max-width:22ch;font-size:clamp(32px,4.7cqw,64px);font-weight:600;line-height:1.52;letter-spacing:-.02em;color:#fff}
.hero--boxed .h-display span{background:var(--ia-dark-blue);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:10px 18px}
.hero--boxed .lede{margin:28px auto 0;max-width:50ch;color:#4A4F5C;font-size:clamp(15px,1.5cqw,19px)}
.hero--boxed .bx-arrow{position:relative;z-index:4;margin:34px 0 0;font-size:26px;line-height:1;color:var(--ia-blue)}
@media (max-width:900px){.bx-sh1,.bx-sh2,.bx-sh5{display:none}.bx-sh3,.bx-sh4{opacity:.55}}
@media (max-width:760px){.hero--v4{min-height:74vh}.st-body,.bx-body{padding-top:120px;padding-bottom:72px}}
@media (prefers-reduced-motion:reduce){.v4-ticker-track{animation:none}}

/* --- Warm statement: C's composition on E's paper --- */
.hero--warm{background:#F3F1EC;color:var(--ink)}
.wm-ic{position:absolute;display:block;height:auto;opacity:.5;pointer-events:none}
.wm-ic1{left:4%;top:19%;width:13.4cqw;max-width:190px;transform:rotate(-10deg)}
.wm-ic2{left:10.3%;bottom:19%;width:10.3cqw;max-width:146px;transform:rotate(8deg)}
.wm-ic3{right:5.5%;top:16.2%;width:14.8cqw;max-width:210px;transform:rotate(9deg)}
.wm-ic4{right:11.7%;bottom:17.5%;width:10.9cqw;max-width:155px;transform:rotate(-12deg)}
html[data-bp="on"] .hero--warm .h-display{color:var(--ink);margin:0 auto;max-width:15ch;font-size:clamp(38px,5.9cqw,80px);font-weight:300;letter-spacing:-.03em;line-height:1.28}
html[data-bp="on"] .hero--warm .h-display strong{font-weight:600;color:#fff;background:var(--ia-dark-blue);padding:2px 14px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero--warm .lede{margin:26px auto 0;max-width:52ch;color:#4A4F5C;font-size:clamp(16px,1.4vw,20px)}
.hero--warm .v4-ticker{border-top:1px solid #E2DFD7}
.hero--warm .v4-tick{color:#7A8091}
@media (max-width:900px){.wm-ic2,.wm-ic4{display:none}.wm-ic1,.wm-ic3{opacity:.35}}

/* Dark hero builds keep the floating nav, inverted */
html[data-photohome="on"][data-homehero="journey"] .nav-logo,html[data-photohome="on"][data-homehero="dark"] .nav-logo,html[data-photohome="on"][data-homehero="journey"] .nav-mark,html[data-photohome="on"][data-homehero="dark"] .nav-mark{filter:brightness(0) invert(1)}
html[data-photohome="on"][data-homehero="journey"] .nav-links .nav-link,html[data-photohome="on"][data-homehero="dark"] .nav-links .nav-link{color:rgba(255,255,255,.86)}
html[data-photohome="on"][data-homehero="journey"] .nav-links .nav-link:hover,html[data-photohome="on"][data-homehero="dark"] .nav-links .nav-link:hover,html[data-photohome="on"][data-homehero="journey"] .nav-links .nav-link.active,html[data-photohome="on"][data-homehero="dark"] .nav-links .nav-link.active{background:rgba(255,255,255,.12);color:#fff}
html[data-photohome="on"][data-homehero="journey"] .btn--ghost,html[data-photohome="on"][data-homehero="dark"] .btn--ghost{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
html[data-photohome="on"][data-homehero="journey"] .nav-toggle,html[data-photohome="on"][data-homehero="dark"] .nav-toggle{color:#fff;border-color:rgba(255,255,255,.4)}

/* Dark statement melts into the section below rather than cutting to paper */
html[data-homehero="dark"] .hero--statement{background:linear-gradient(180deg,#02123B 0%,#02123B 52%,#08204E 78%,#152F5D 93%,#1D3A6B 100%)}
html[data-homehero="dark"] .hero--statement .v4-ticker{background:transparent;border-top:1px solid rgba(255,255,255,.32);border-bottom:1px solid rgba(255,255,255,.32)}
html[data-homehero="dark"] .hero--statement + .section{position:relative;padding-top:200px!important;padding-bottom:64px!important}
html[data-homehero="dark"] .hero--statement + .section::before{content:"";position:absolute;left:0;right:0;top:0;height:300px;background:linear-gradient(180deg,#1D3A6B 0%,rgba(33,64,115,.93) 12%,rgba(56,87,138,.74) 28%,rgba(96,120,166,.5) 45%,rgba(140,159,194,.3) 60%,rgba(180,193,217,.16) 73%,rgba(212,221,235,.07) 85%,rgba(255,255,255,0) 100%);pointer-events:none}
html[data-homehero="dark"] .hero--statement + .section > *{position:relative;z-index:1}

/* Section-by-section scrolling */
/* the paged scroll is driven by src/snap-scroll.js — no CSS scroll-snap,
   which would fight the tween and cause jumps */

/* Light statement melts into the section below, same as the dark build */
html[data-homehero="light"] .hero--statement-lt{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 46%,rgba(255,255,255,.7) 78%,#fff 100%),radial-gradient(130% 105% at 50% -18%,var(--ia-blue-100) 0%,var(--ia-blue-50) 46%,#F4F6FD 74%,#fff 100%)}
html[data-homehero="light"] .hero--statement-lt .st-glow{inset:auto 0 0;height:520px;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 26%,transparent 72%);mask-image:linear-gradient(180deg,#000 0%,#000 26%,transparent 72%)}
html[data-homehero="light"] .hero--statement-lt .v4-ticker{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
html[data-homehero="light"] .hero--statement-lt + .section{position:relative}
html[data-homehero="light"] .hero--statement-lt + .section > *{position:relative;z-index:1}

/* Light statement type on brand ink */
html[data-homehero="light"] .hero--statement-lt .h-display{color:var(--ia-dark-blue)}
html[data-homehero="light"] .hero--statement-lt .h-display strong,
html[data-homehero="light"] .hero--statement-lt .h-display em{color:var(--ia-blue)}
html[data-homehero="light"] .hero--statement-lt .lede{color:var(--ia-dark-blue);opacity:.74}

/* Header height: beats html[data-hero="photo"] .nav-inner in blueprint-align-v2.css. */
html .nav .nav-inner{height:68px;padding-block:0}

/* --- Short statement: hero stops above the fold so the two doors show --- */
/* Height follows the viewport, but is also capped against width so a narrow-
   but-tall window doesn't leave a void under the arrow. */
.hero--v4.is-short{min-height:max(560px,min(86svh,62vw))}
.hero--statement.is-short .st-body{padding:clamp(96px,12svh,150px) 48px clamp(36px,5svh,68px)}
html[data-bp="on"] .hero--statement.is-short .h-display{font-size:clamp(38px,4.9cqw,64px)}
.hero--statement.is-short .lede{margin-top:clamp(18px,2.6svh,32px)}
.hero--statement.is-short .v4-ticker{margin-bottom:0}
html[data-homehero="dark"] .hero--statement.is-short + .section{padding-top:clamp(72px,13svh,132px)!important}
.st-doors{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:32px 0 0}
.st-door{display:flex;flex-direction:column;gap:4px;text-align:left;max-width:300px;padding:15px 22px;border-radius:13px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.06);color:#fff;font-family:inherit;cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast)}
.st-door:hover{background:rgba(255,255,255,.13);border-color:var(--ia-light-blue);transform:translateY(-2px)}
.st-door-t{font-size:16px;font-weight:600;letter-spacing:-.01em}
.st-door-s{font-size:12px;line-height:1.4;opacity:.68}
.hero--statement-lt .st-door{border-color:var(--hairline);background:rgba(255,255,255,.72);color:var(--ia-dark-blue)}
.hero--statement-lt .st-door:hover{background:#fff;border-color:var(--ia-blue)}
.hero--statement-lt .st-door-s{opacity:.62}
/* Sits the headline further below the nav on phones; at 120px the gap under
   the header was only ~38px and the hero read top-heavy. */
@media (max-width:760px){.hero--statement.is-short .st-body{padding:168px 24px 44px}.st-door{max-width:none;width:100%}}