:root{
--navy-900:#081F31;--navy-800:#0B2940;--navy-700:#0E324D;--navy-600:#1D4A6B;--navy-300:#8FA8BC;--navy-100:#DCE5EC;
--sky-700:#236F90;--sky-600:#4AA3CB;--sky-500:#66B8DC;--sky-300:#A9D7EB;--sky-100:#E6F3F9;
--cream-50:#FBF9F4;--cream-100:#F6F3EC;--cream-200:#EEE9DD;--ink:var(--navy-700);--text:#2C3E50;--muted:#5D6B7A;--subtle:#8A96A3;
--success:#2E7D5B;--success-bg:#E5F2EC;--error:#C2413D;--error-bg:#F9E6E5;--focus:#4AA3CB;
--fs-xs:clamp(.75rem,.72rem + .1vw,.8rem);--fs-sm:clamp(.875rem,.85rem + .12vw,.94rem);--fs-base:clamp(1rem,.97rem + .15vw,1.0625rem);
--fs-lg:clamp(1.125rem,1.07rem + .3vw,1.3rem);--fs-xl:clamp(1.3rem,1.2rem + .5vw,1.6rem);--fs-2xl:clamp(1.75rem,1.45rem + 1.3vw,2.6rem);
--fs-3xl:clamp(2.25rem,1.7rem + 2.4vw,3.75rem);--fs-4xl:clamp(2.6rem,1.8rem + 3.8vw,5rem);
--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
--r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:24px;--r-full:999px;
--hair:1px solid rgba(14,50,77,.10);--line:1px solid rgba(14,50,77,.16);--line-strong:1px solid var(--navy-700);
--sh-1:0 1px 2px rgba(8,31,49,.06),0 1px 1px rgba(8,31,49,.04);--sh-2:0 4px 12px -2px rgba(8,31,49,.08),0 2px 4px rgba(8,31,49,.04);--sh-3:0 18px 40px -12px rgba(8,31,49,.18),0 4px 10px rgba(8,31,49,.05);
--ease:cubic-bezier(.22,1,.36,1);--t-fast:140ms;--t-base:240ms;--t-slow:520ms}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{background:var(--cream-100);color:var(--text);font:400 var(--fs-base)/1.6 Roboto,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}a{color:inherit}
h1,h2,h3{color:var(--ink);font-weight:700;letter-spacing:-.02em;line-height:1.1}
h2{font-size:var(--fs-2xl);line-height:1.15}h3{font-size:var(--fs-xl);line-height:1.25}
h1 em,h2 em{font-style:normal;color:var(--sky-600)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:var(--r-sm);z-index:50}.skip:focus{left:8px}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}
.kicker{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:28px;height:1px;background:var(--sky-500);flex:none}
.label{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--sky-700);font-weight:700;margin-bottom:var(--s3)}
.lead{font-size:var(--fs-lg);color:var(--muted);max-width:60ch;line-height:1.55}
/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(246,243,236,.82);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color var(--t-base) var(--ease),background var(--t-base)}
.top.scrolled{border-bottom:var(--hair);background:rgba(246,243,236,.92)}
.bar{display:flex;justify-content:space-between;align-items:center;height:76px}
.logo{font-weight:700;font-size:1.2rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em;white-space:nowrap}.logo span{color:var(--sky-700)}
nav{display:flex;align-items:center;gap:28px;font-size:var(--fs-sm)}
nav>a:not(.btn){text-decoration:none;color:var(--text);position:relative;padding-block:6px;transition:color var(--t-fast)}
nav>a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--sky-500);transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease)}
nav>a:not(.btn):hover{color:var(--ink)}nav>a:not(.btn):hover::after,nav>a[aria-current]::after{transform:scaleX(1)}
.lang{display:inline-flex;border:var(--line);border-radius:var(--r-full);padding:3px;background:#fff}
.lang a{font-size:.72rem;font-weight:700;letter-spacing:.06em;padding:5px 11px;border-radius:var(--r-full);color:var(--muted);text-decoration:none;transition:background var(--t-fast),color var(--t-fast)}
.lang a:hover{color:var(--ink)}.lang a.on{background:var(--navy-700);color:#fff}
.burger{display:none;width:44px;height:44px;border:var(--line);border-radius:var(--r-full);background:#fff;cursor:pointer;position:relative}
.burger span{position:absolute;left:13px;right:13px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform var(--t-base) var(--ease)}
.burger span:first-child{top:17px}.burger span:last-child{top:25px}
.burger[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.burger[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 var(--fs-sm)/1 Roboto,sans-serif;padding:16px 24px;border-radius:var(--r-sm);border:1px solid transparent;background:var(--navy-700);color:#fff;text-decoration:none;cursor:pointer;transition:background var(--t-base) var(--ease),transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.btn svg{transition:transform var(--t-base) var(--ease)}.btn:hover{background:var(--navy-800);box-shadow:var(--sh-2);transform:translateY(-1px)}.btn:hover svg{transform:translateX(3px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--cream-100),0 0 0 5px var(--focus)}
.btn.sm{padding:11px 18px;font-size:var(--fs-xs)}
.btn.ghost{background:transparent;color:var(--ink);border:var(--line-strong)}.btn.ghost:hover{background:var(--ink);color:#fff}
.btn[disabled]{background:var(--navy-100);color:var(--navy-300);cursor:wait;transform:none;box-shadow:none}
.actions{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s6)}
/* sections */
.hero{padding-block:clamp(72px,12vw,152px) clamp(48px,7vw,96px)}
.hero h1{font-size:var(--fs-4xl);line-height:1.04;letter-spacing:-.03em;margin:var(--s5) 0;max-width:15ch}
.sec{padding-block:clamp(64px,8vw,var(--s9))}
.sec-head{display:grid;grid-template-columns:120px 1fr;gap:var(--s5);margin-bottom:var(--s7);align-items:start}
.sec-num{font-size:var(--fs-sm);color:var(--sky-700);font-weight:700;padding-top:10px;border-top:var(--line-strong);width:48px}
.sec-head h2{margin-top:var(--s3)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.card{background:#fff;border:var(--hair);border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--sh-1);transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease),border-color var(--t-base)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:rgba(74,163,203,.4)}
.card .ic{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--sky-100);color:var(--sky-700);margin-bottom:var(--s5)}
.card h3{margin-bottom:var(--s3)}.card p{color:var(--muted);font-size:var(--fs-sm)}
.card.dark{background:var(--navy-700);border-color:var(--navy-700)}.card.dark h3{color:#fff}.card.dark p{color:var(--navy-100)}.card.dark .ic{background:rgba(102,184,220,.16);color:var(--sky-300)}
.step{border:var(--line);border-radius:var(--r-lg);padding:var(--s6);position:relative;transition:border-color var(--t-base)}
.step:hover{border-color:var(--navy-300)}.step h3{margin-bottom:var(--s2)}.step p{color:var(--muted);font-size:var(--fs-sm)}
.quote{border-left:2px solid var(--sky-500);padding:var(--s2) 0 var(--s2) var(--s6);margin-top:var(--s8);max-width:820px}
.quote p{font-size:var(--fs-2xl);color:var(--ink);line-height:1.25;letter-spacing:-.015em}
.band{background:var(--navy-700);color:var(--navy-100);border-radius:var(--r-xl);padding:clamp(32px,6vw,var(--s8));position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:radial-gradient(640px 320px at 92% -10%,rgba(102,184,220,.24),transparent 60%);pointer-events:none}
.band .grid3{position:relative;gap:var(--s6)}.band .grid3>div{padding-top:0}
.band small{display:block;color:var(--sky-300);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.7rem;margin-bottom:var(--s3)}
.band b{display:block;color:#fff;font-size:var(--fs-xl);margin-bottom:6px;letter-spacing:-.01em}.band p{font-size:var(--fs-sm)}
.about{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:clamp(40px,7vw,96px);align-items:center}
.about h2{margin:var(--s3) 0 var(--s5)}
.photo-wrap{position:relative;justify-self:center;padding:14px}.photo-wrap::after{content:"";position:absolute;inset:0;border:1px solid var(--sky-300);border-radius:50%;pointer-events:none}
.photo{width:100%;max-width:300px;aspect-ratio:1;height:auto;object-fit:cover;border-radius:50%;border:6px solid #fff;box-shadow:0 0 0 1px rgba(14,50,77,.1),var(--sh-3)}
/* contact */
.panel{background:#fff;border:var(--hair);border-radius:var(--r-lg);padding:clamp(24px,4vw,var(--s7));box-shadow:var(--sh-1)}
.contact-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(32px,5vw,72px);padding-bottom:var(--s9);align-items:start}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.field{margin-bottom:var(--s5)}.field label{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--ink);margin-bottom:var(--s2)}
.field input,.field textarea{width:100%;font:inherit;color:var(--ink);background:var(--cream-50);border:var(--line);border-radius:var(--r-sm);padding:13px 15px;resize:vertical;transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast)}
.field input:hover,.field textarea:hover{border-color:var(--navy-300)}
.field input:focus,.field textarea:focus{outline:none;background:#fff;border-color:var(--sky-600);box-shadow:0 0 0 4px rgba(74,163,203,.18)}
.field.invalid input,.field.invalid textarea{border-color:var(--error);background:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{padding:14px 16px;border-radius:var(--r-md);font-size:var(--fs-sm);margin-top:var(--s5);background:var(--sky-100);color:var(--navy-600)}
.alert.ok{background:var(--success-bg);color:var(--success)}.alert.err{background:var(--error-bg);color:var(--error)}
.side{display:grid;gap:0;border-top:var(--line-strong)}.side-item{padding-block:var(--s5);border-bottom:var(--hair)}.side-item p{color:var(--muted)}
/* legal */
.legal{padding-bottom:var(--s9);max-width:900px}
.legal-row{display:grid;grid-template-columns:240px 1fr;gap:var(--s5);padding-block:var(--s5);border-top:var(--hair)}
.legal-row h2{font-size:var(--fs-base);letter-spacing:0}.legal-row p{color:var(--muted)}.legal-row a{color:var(--ink);text-decoration-color:var(--sky-500);text-underline-offset:3px}
/* footer */
.foot{border-top:var(--hair);padding-block:var(--s8) var(--s6);font-size:var(--fs-sm);color:var(--muted);margin-top:var(--s8)}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);flex-wrap:wrap;padding-bottom:var(--s6);border-bottom:var(--hair)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap;padding-top:var(--s5)}
.foot-bot span{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center}.foot-bot a:not(.lang a){text-decoration:none}.foot-bot a:hover{color:var(--ink)}
/* motion */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.reveal,.js .reveal{opacity:1;transform:none}}
/* responsive */
@media (max-width:900px){.grid3{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr}.about{grid-template-columns:1fr}.photo-wrap{justify-self:start;max-width:230px}}
@media (max-width:820px){
 .burger{display:block}
 nav{position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:flex-start;gap:var(--s5);padding:var(--s6) clamp(20px,5vw,56px) var(--s7);background:var(--navy-700);
  transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease),visibility var(--t-base)}
 nav.open{opacity:1;transform:none;visibility:visible}
 nav>a:not(.btn){color:#fff;font-size:var(--fs-xl);font-weight:700}nav>a:not(.btn):hover{color:var(--sky-300)}
 nav .btn{background:var(--sky-500);color:var(--navy-900)}
 .sec-head{grid-template-columns:1fr;gap:0}.sec-num{display:none}.legal-row{grid-template-columns:1fr;gap:var(--s2)}.field-row{grid-template-columns:1fr;gap:0}}
/* v3: hero loop */
.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.hero-grid .hero{padding-inline:0}
.loop{position:relative;width:100%;max-width:420px;aspect-ratio:1;justify-self:end;margin:0}
.loop-svg{width:100%;height:100%;overflow:visible}
.loop-track{fill:none;stroke:rgba(14,50,77,.14);stroke-width:1}
.loop-run{fill:none;stroke:var(--sky-500);stroke-width:2;stroke-linecap:round;stroke-dasharray:120 684;transform-origin:180px 180px;animation:loop 9s linear infinite}
.loop-tip{fill:var(--navy-700)}
@keyframes loop{to{transform:rotate(360deg)}}
.node{position:absolute;transform:translate(-50%,-50%);background:#fff;border:var(--hair);box-shadow:var(--sh-2);border-radius:var(--r-full);padding:12px 22px;font-size:var(--fs-sm);color:var(--ink);white-space:nowrap}
.node b{font-weight:700;letter-spacing:-.01em}
.node::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--sky-500);margin-right:10px;vertical-align:1px}
.n1{left:50%;top:14.4%}.n2{left:82%;top:68%}.n3{left:18%;top:68%}
.n1::before{background:var(--navy-700)}.n3::before{background:var(--sky-300)}
.loop figcaption{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;text-align:center;max-width:140px;line-height:1.5}
/* phases */
.sec-lead{margin:calc(-1 * var(--s5)) 0 var(--s7) 0;padding-left:calc(120px + var(--s5))}
.phases .step{background:#fff;border:var(--hair);box-shadow:var(--sh-1);display:flex;flex-direction:column;transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease)}
.phases .step:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.step-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s5)}.step-top .label{margin:0}
.phase-dot{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--navy-700);color:#fff;font-weight:700;font-size:1.1rem}
.phases .step:nth-child(2) .phase-dot{background:var(--sky-600)}.phases .step:nth-child(3) .phase-dot{background:var(--sky-100);color:var(--sky-700)}
.step-lead{color:var(--text)!important;font-size:var(--fs-base)!important;margin-bottom:var(--s5)}
.step dl{border-top:var(--hair);padding-top:var(--s4);margin-top:auto;display:grid;gap:6px}
.step dt{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--sky-700);margin-top:var(--s3)}.step dt:first-child{margin-top:0}
.step dd{color:var(--muted);font-size:var(--fs-sm)}
/* data handbook */
.dh-wrap{padding-bottom:var(--s9)}
.dh{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s7);align-items:center;text-decoration:none;background:#fff;border:var(--hair);border-radius:var(--r-xl);padding:clamp(28px,5vw,var(--s8));box-shadow:var(--sh-1);transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease),border-color var(--t-base)}
.dh:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:rgba(74,163,203,.4)}
.dh h2{margin:var(--s3) 0 var(--s4)}.dh p{color:var(--muted);max-width:56ch;margin-bottom:var(--s6)}
.dh:hover .btn.ghost{background:var(--ink);color:#fff}
.dh-art{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:260px;justify-self:end;width:100%}
.dh-art span{aspect-ratio:1;border-radius:var(--r-md);background:var(--sky-100);border:1px solid var(--sky-300)}
.dh-art span:nth-child(1){background:var(--navy-700);border-color:var(--navy-700)}.dh-art span:nth-child(5){background:var(--sky-500);border-color:var(--sky-500)}
.dh-art span:nth-child(3),.dh-art span:nth-child(4){background:transparent;border:1px dashed var(--navy-300)}
nav .ext{display:inline-flex;align-items:center;gap:4px}nav .ext svg{opacity:.6}
@media (max-width:1000px){.hero-grid{grid-template-columns:1fr}.loop{justify-self:center;max-width:340px;margin-bottom:var(--s7)}}
@media (max-width:900px){.dh{grid-template-columns:1fr}.dh-art{justify-self:start;max-width:180px}.sec-lead{padding-left:0;margin-top:0}}
@media (max-width:820px){.sec-lead{margin-top:var(--s3)}}
@media (prefers-reduced-motion:reduce){.loop-run{animation:none}}
.loop-inner{fill:none;stroke:rgba(14,50,77,.08);stroke-dasharray:2 6}
.loop-run{stroke-dasharray:200 604}
h1,h2,h3{text-wrap:balance}.lead,p{text-wrap:pretty}
.phase-dot svg{width:22px;height:22px}
.cred{color:inherit;text-decoration:underline;text-decoration-color:var(--sky-500);text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-thickness var(--t-fast)}
.cred:hover{text-decoration-thickness:2px}
.band .cred{color:#fff;display:inline-block;margin-top:6px}
.cred-row{margin-top:var(--s4)}.cred-row .cred{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:700;color:var(--ink);text-decoration:none;border:var(--line);border-radius:var(--r-full);padding:8px 14px;background:#fff;transition:border-color var(--t-fast),box-shadow var(--t-base)}
.cred-row .cred::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--sky-500)}
.cred-row .cred::after{content:"↗";opacity:.6}.cred-row .cred:hover{border-color:var(--sky-600);box-shadow:var(--sh-2)}
.band b{text-wrap:balance}
.band b{line-height:1.2}
/* ===== v5: dark hero ===== */
body.dark-hero .top{position:fixed;left:0;right:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent}
body.dark-hero .top:not(.scrolled) .logo,body.dark-hero .top:not(.scrolled) nav>a:not(.btn){color:#fff}
body.dark-hero .top:not(.scrolled) .logo span{color:var(--sky-300)}
body.dark-hero .top:not(.scrolled) nav>a:not(.btn):hover{color:var(--sky-300)}
body.dark-hero .top:not(.scrolled) nav .btn{background:var(--sky-500);color:var(--navy-900)}
body.dark-hero .top:not(.scrolled) .lang{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35)}
body.dark-hero .top:not(.scrolled) .lang a{color:rgba(255,255,255,.8)}body.dark-hero .top:not(.scrolled) .lang a.on{background:#fff;color:var(--navy-800)}
body.dark-hero .top:not(.scrolled) .burger{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}body.dark-hero .top:not(.scrolled) .burger span{background:#fff}
body.dark-hero .top.scrolled{background:rgba(246,243,236,.9);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:var(--hair);box-shadow:var(--sh-1)}
.top,.top .logo,.top nav>a{transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),border-color var(--t-base),box-shadow var(--t-base)}
.hero-dark{position:relative;overflow:hidden;background:var(--navy-900);color:#fff;min-height:min(92vh,900px);display:flex;align-items:center}
.hero-bg{position:absolute;inset:0}.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 55%;animation:heroZoom 18s var(--ease) both}
@keyframes heroZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero-dark::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,31,49,.94) 0%,rgba(8,31,49,.7) 40%,rgba(8,31,49,.05) 78%),linear-gradient(0deg,rgba(8,31,49,.55) 0%,transparent 35%),linear-gradient(180deg,rgba(8,31,49,.5) 0%,transparent 22%)}
.hero-inner{position:relative;z-index:2;width:100%}
.hero-dark .hero{padding-block:160px 140px}
.hero-dark h1{color:#fff}.hero-dark h1 em{color:var(--sky-300)}.hero-dark .lead{color:var(--navy-100)}.hero-dark .kicker{color:var(--sky-300)}.hero-dark .kicker::before{background:var(--sky-300)}
.hero-dark .btn:not(.ghost){background:var(--sky-500);color:var(--navy-900)}.hero-dark .btn:not(.ghost):hover{background:var(--sky-300)}
.hero-dark .btn.ghost{color:#fff;border-color:rgba(255,255,255,.55)}.hero-dark .btn.ghost:hover{background:#fff;color:var(--navy-800)}
.hero-dark .btn:focus-visible{box-shadow:0 0 0 3px var(--navy-900),0 0 0 5px var(--sky-300)}
/* approach head with loop */
.approach-head{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s7);align-items:center;margin-bottom:var(--s7)}
.approach-head .sec-head{margin-bottom:var(--s5)}.approach-head .sec-lead{margin:0;padding-left:calc(120px + var(--s5))}
.approach-head .loop{max-width:340px;justify-self:end}
.band::before{z-index:-1}
.card,.dh,.panel{position:relative;isolation:isolate}
body:not(.dark-hero) main{position:relative;isolation:isolate}
@media (max-width:1000px){.approach-head{grid-template-columns:1fr}.approach-head .loop{justify-self:center;max-width:300px}}
@media (max-width:900px){.approach-head .sec-lead{padding-left:0}}
@media (max-width:820px){.hero-dark{min-height:auto}.hero-dark .hero{padding-block:130px 80px}.hero-dark::before{background:linear-gradient(180deg,rgba(8,31,49,.7) 0%,rgba(8,31,49,.82) 45%,rgba(8,31,49,.95) 100%)}
 body.dark-hero .top:not(.scrolled):has(nav.open){background:var(--navy-700)}}
@media (prefers-reduced-motion:reduce){.hero-bg img{animation:none}}
body.dark-hero .top.scrolled{background:rgba(246,243,236,.97)}
@media (max-width:820px){.hero-dark::before{background:linear-gradient(180deg,rgba(8,31,49,.55) 0%,rgba(8,31,49,.72) 50%,rgba(8,31,49,.92) 100%)}.hero-bg img{object-position:50% 40%}}
/* ===== v6 motion ===== */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:320ms;animation-timing-function:var(--ease)}
/* hero */
.hero-bg{will-change:transform}.hero-bg img{animation:heroZoom 18s var(--ease) both}
.mist{position:absolute;z-index:1;left:-20%;right:-20%;pointer-events:none;will-change:transform;opacity:.55}
.mist.m1{bottom:-6%;height:42%;background:radial-gradient(40% 60% at 30% 70%,rgba(220,229,236,.35),transparent 70%),radial-gradient(35% 50% at 75% 60%,rgba(220,229,236,.28),transparent 70%);animation:mist 38s ease-in-out infinite alternate}
.mist.m2{bottom:8%;height:30%;background:radial-gradient(30% 50% at 60% 50%,rgba(169,215,235,.18),transparent 70%),radial-gradient(25% 45% at 15% 55%,rgba(220,229,236,.2),transparent 70%);animation:mist 52s ease-in-out infinite alternate-reverse;opacity:.7}
@keyframes mist{from{transform:translate3d(-6%,0,0)}to{transform:translate3d(6%,-2%,0)}}
.hero-dark h1.reveal{opacity:1!important;transform:none!important}
.hero-dark h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hero-dark h1 .w>span{display:inline-block}
.js .hero-dark h1 .w>span{transform:translateY(105%);transition:transform 1s var(--ease);transition-delay:calc(var(--i) * 90ms + 150ms)}
.js .hero-dark h1.in .w>span{transform:none}
.js .hero-dark .kicker.reveal{transition-delay:0ms}.js .hero-dark .lead.reveal{transition-delay:520ms}.js .hero-dark .actions.reveal{transition-delay:700ms}
/* section numbers slide */
.js .sec-head .sec-num{transform:translateX(-14px);opacity:0;transition:transform .8s var(--ease) .1s,opacity .8s var(--ease) .1s}
.js .sec-head.in .sec-num{transform:none;opacity:1}
/* loop orbit */
.orbit{transform-origin:180px 180px;animation:orbit 9s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
.orbit-dot{fill:var(--sky-600)}.orbit-halo{fill:var(--sky-500);opacity:.18}
.loop-run{animation-duration:9s}
.loop:not(.playing) .orbit,.loop:not(.playing) .loop-run{animation-play-state:paused}
.node{transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),background var(--t-base),color var(--t-base)}
.node.active{background:var(--navy-700);color:#fff;box-shadow:var(--sh-3);transform:translate(-50%,-50%) scale(1.06)}
.node.active::before{background:var(--sky-300)}
.phases .step{transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease),border-color var(--t-base)}
.phases .step.active{border-color:rgba(74,163,203,.55);box-shadow:0 0 0 1px rgba(74,163,203,.35),var(--sh-2)}
.phases .step .phase-dot{transition:transform var(--t-base) var(--ease)}.phases .step.active .phase-dot{transform:scale(1.08)}
/* cards hover pattern shift (transform only) */
.card::after,.panel::after{transition:transform 1.2s var(--ease),opacity var(--t-slow)}
.card:hover::after{transform:translate3d(-14px,-10px,0) scale(1.04)}
/* band text reveals */
.band small,.band b,.band p,.band .cred{display:block}
.js .band .reveal{opacity:1;transform:none}
.js .band .reveal>*{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .band .reveal.in>*{opacity:1;transform:none}
.js .band .reveal>*:nth-child(2){transition-delay:.12s}.js .band .reveal>*:nth-child(3){transition-delay:.24s}.js .band .reveal>*:nth-child(4){transition-delay:.36s}
/* magnetic buttons */
.btn.mag{transition:transform .35s var(--ease),background var(--t-base),box-shadow var(--t-base)}
/* photo ring */
.photo-wrap::after{transition:transform 1.2s var(--ease),opacity 1.2s}
.js .photo-wrap.reveal::after{transform:scale(.9);opacity:0}.js .photo-wrap.reveal.in::after{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
 .mist,.orbit,.loop-run,.hero-bg img{animation:none!important}
 .js .hero-dark h1 .w>span,.js .band .reveal>*,.js .sec-head .sec-num{transform:none!important;opacity:1!important}
 ::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ===== v7: hairline dividers ===== */
.card,.dh,.panel{position:relative}
.divider{max-width:1200px;margin-inline:auto;padding-inline:clamp(20px,5vw,56px);margin-block:var(--s6)}
.divider::before{content:"";display:block;border-top:var(--hair)}
.cred-row{display:flex;flex-wrap:wrap;gap:10px}
.band .cred+.cred{margin-top:4px}
.cred-row .cred.li::before{width:14px;height:14px;border-radius:3px;background:#0A66C2 url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Cpath d=%27M6.5 8.8H3.6V20h2.9V8.8zM5 4a1.7 1.7 0 100 3.4A1.7 1.7 0 005 4zm15.4 9.3c0-3-1.6-4.7-4-4.7-1.5 0-2.4.8-2.8 1.5V8.8H10.7V20h2.9v-5.6c0-1.5.3-2.9 2.1-2.9s1.8 1.7 1.8 3V20h2.9v-6.7z%27/%3E%3C/svg%3E") center/11px no-repeat}
.w0>span{--i:0}.w1>span{--i:1}.w2>span{--i:2}.w3>span{--i:3}.w4>span{--i:4}.w5>span{--i:5}.w6>span{--i:6}.w7>span{--i:7}.w8>span{--i:8}.w9>span{--i:9}.w10>span{--i:10}.w11>span{--i:11}