/* ============================================================
   OCEAN RHYTHM DIGITAL — "THE CHART" design system
   Direction: coastal-editorial nautical chart. One current, surface->depth.
   Mobile (<720px): approved v1 experience, unchanged behavior.
   Tablet (720-1079): v1 behavior. Desktop (>=1080): The Chart grid.
   Motion: compositor-only (transform/opacity); reduced-motion = static.
   ============================================================ */
:root{
  /* palette (locked) */
  --navy:#17252D; --sea:#254757; --sea-deep:#1D3A48; --cobalt:#006EE6; --aqua:#23C9B8;
  --mist:#EEF7FA; --white:#FFFFFF;
  --ink:#17252D; --ink-soft:#3D5563; --ink-muted:#5A707C;
  --light-ink:#DCEBF2; --light-soft:#A8C0CC;
  /* chart tokens */
  --content-max:1360px;
  --gutter:clamp(24px,5vw,120px);
  --gap:32px;
  --rule:rgba(23,37,45,.14);
  --rule-light:rgba(220,235,242,.16);
  --ghost:rgba(23,37,45,.05);
  --ghost-light:rgba(238,247,250,.05);
  --radius:14px;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --dur-1:.25s; --dur-2:.6s; --dur-3:1.4s;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--mist);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:560;letter-spacing:-0.02em}
img,svg{display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:4px}
.hero :focus-visible,.human :focus-visible,.contact :focus-visible,footer :focus-visible,
header.nav:not(.solid) :focus-visible,.notfound :focus-visible{outline-color:var(--aqua)}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--cobalt);color:#fff;font-weight:600;padding:12px 20px;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* entrance animation — hidden only when JS confirmed (html.js), fallback path */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}
/* native scroll-driven reveals where supported (html.sda set by JS) */
@supports (animation-timeline: view()) {
  .sda .reveal{opacity:0;transform:translateY(16px);animation:sda-in linear forwards;animation-timeline:view();animation-range:entry 5% cover 32%;transition:none}
  @keyframes sda-in{to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.sda .reveal{opacity:1;transform:none;animation:none}}
}

/* ---------- nav ---------- */
header.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
header.nav .bar{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;max-width:var(--content-max);margin:0 auto}
header.nav.solid{background:rgba(238,247,250,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(23,37,45,.08)}
.logo{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-weight:640;font-size:17px;color:var(--white);transition:color .3s}
header.nav.solid .logo{color:var(--navy)}
.logo svg .l1{stroke:var(--aqua)} .logo svg .l2{stroke:var(--cobalt)}
nav.links{display:flex;gap:28px;align-items:center;font-size:14px;font-weight:600;color:var(--light-soft)}
header.nav.solid nav.links{color:var(--ink-soft)}
nav.links a{transition:color .2s;position:relative}
nav.links a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--aqua);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-1) var(--ease)}
nav.links a:hover{color:var(--aqua)}
nav.links a:not(.nav-cta):hover::after{transform:scaleX(1)}
header.nav.solid nav.links a:hover{color:var(--cobalt)}
header.nav.solid nav.links a:not(.nav-cta)::after{background:var(--cobalt)}
.nav-cta{background:var(--cobalt);color:#fff !important;padding:10px 18px;border-radius:9px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.nav-cta:hover{transform:scale(1.03);box-shadow:0 6px 18px rgba(0,110,230,.35)}
@media (max-width:720px){nav.links a:not(.nav-cta){display:none}}

/* ---------- hero ---------- */
.hero{position:relative;background:linear-gradient(180deg,var(--sea) 0%,var(--sea-deep) 85%,var(--sea-deep) 100%);color:var(--white);padding:172px 0 140px;overflow:hidden}
.hero .glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.hero .glow.g1{width:520px;height:520px;background:rgba(0,110,230,.20);top:-140px;right:-120px}
.hero .glow.g2{width:420px;height:420px;background:rgba(35,201,184,.13);bottom:-160px;left:-100px}
.hero-lines{position:absolute;inset:auto 0 0 0;height:62%;width:100%;pointer-events:none;z-index:2}
.hero-lines path{stroke-dasharray:2600;stroke-dashoffset:2600;animation:draw 3.2s var(--ease) forwards}
.hero-lines .d2 path{animation-delay:.45s}
.hero-lines .d3 path{animation-delay:.9s}
@keyframes draw{to{stroke-dashoffset:0}}
/* living water — seamless compositor-only drift, pattern period = 300 units */
.hero-lines .drift{animation:drift 26s linear infinite}
.hero-lines .d2{animation-duration:40s;animation-direction:reverse}
.hero-lines .d3{animation-duration:58s}
@keyframes drift{to{transform:translateX(-300px)}}
@media (prefers-reduced-motion:reduce){.hero-lines path{animation:none;stroke-dashoffset:0}.hero-lines .drift{animation:none}}
.hero h1{font-size:clamp(42px,7vw,76px);line-height:1.03;max-width:820px;position:relative;z-index:2}
.hero h1 em{font-style:normal;color:var(--aqua)}
/* masked line-by-line rise — padding keeps descenders (y, g) inside the mask */
.hl{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.hl-i{display:inline-block;transform:translateY(112%)}
.js .hl-i,.sda .hl-i{animation:hl-rise .72s var(--ease) forwards}
.hl:nth-child(1) .hl-i{animation-delay:.05s}
.hl:nth-child(2) .hl-i{animation-delay:.17s}
.hl:nth-child(3) .hl-i{animation-delay:.29s}
@keyframes hl-rise{to{transform:translateY(0)}}
html:not(.js) .hl-i{transform:none}
@media (prefers-reduced-motion:reduce){.hl-i,.js .hl-i,.sda .hl-i{transform:none;animation:none}}
.hero .sub{margin-top:26px;font-size:clamp(16px,2vw,19px);color:var(--light-soft);max-width:560px;position:relative;z-index:2}
.hero .ctas{margin-top:38px;display:flex;gap:18px;flex-wrap:wrap;align-items:center;position:relative;z-index:2}
.btn{display:inline-block;font-weight:600;font-size:16px;padding:15px 28px;border-radius:11px;border:0;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn-primary{background:var(--cobalt);color:#fff;box-shadow:0 0 0 1.5px rgba(35,201,184,.30)}
.btn-primary:hover{transform:scale(1.03);box-shadow:0 10px 28px rgba(0,110,230,.4),0 0 0 3px rgba(35,201,184,.25)}
.btn-ghost{color:var(--aqua);font-weight:600;position:relative;background:none}
.btn-ghost::after{content:"";position:absolute;left:28px;right:28px;bottom:10px;height:1.5px;background:var(--aqua);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.btn-ghost:hover::after{transform:scaleX(1)}
.hero .location{margin-top:44px;font-size:13.5px;color:#A8C0CC;font-weight:500;letter-spacing:.02em;position:relative;z-index:2}
/* THE WATERLINE — dipping below the surface into the light sections (desktop) */
.waterline{display:none}
@media (min-width:1080px){
  .waterline{display:block;position:absolute;left:0;right:0;bottom:-1px;height:72px;z-index:3;pointer-events:none}
  .waterline svg{width:100%;height:100%}
  .waterline .drift{animation:drift 30s linear infinite}
  .waterline .w2{animation-duration:46s;animation-direction:reverse}
  @media (prefers-reduced-motion:reduce){.waterline .drift{animation:none}}
}
/* THE LIVING SEA — real-time moonlit ocean canvas (desktop only).
   Renders behind everything in the hero; CSS gradient beneath is the universal
   fallback (mobile, reduced-motion static frame, WebGL failure, no-JS). */
#ocean{display:none}
@media (min-width:1080px){
  #ocean{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.8s ease}
  #ocean.on{opacity:1}
}
/* route panel (desktop only) */
.route-panel{display:none;position:relative;z-index:2}
.route-panel svg{width:100%;height:auto}
.route-panel .rp-line{stroke-dasharray:848;stroke-dashoffset:848}
.js .route-panel.in .rp-line,.sda .route-panel .rp-line{animation:rp-draw 2.2s var(--ease) .6s forwards}
@keyframes rp-draw{to{stroke-dashoffset:0}}
.route-panel .rp-node{opacity:0;transform:translateY(6px)}
.js .route-panel.in .rp-node,.sda .route-panel .rp-node{animation:rp-pop .7s var(--ease) forwards}
.js .route-panel.in .rp-node:nth-of-type(2),.sda .route-panel .rp-node:nth-of-type(2){animation-delay:1.0s}
.js .route-panel.in .rp-node:nth-of-type(3),.sda .route-panel .rp-node:nth-of-type(3){animation-delay:1.6s}
.js .route-panel.in .rp-node:nth-of-type(4),.sda .route-panel .rp-node:nth-of-type(4){animation-delay:2.2s}
.js .route-panel.in .rp-node:nth-of-type(5),.sda .route-panel .rp-node:nth-of-type(5){animation-delay:2.8s}
@keyframes rp-pop{to{opacity:1;transform:none}}
html:not(.js) .route-panel .rp-line{stroke-dashoffset:0}
html:not(.js) .route-panel .rp-node{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.route-panel .rp-line{stroke-dashoffset:0!important;animation:none!important}.route-panel .rp-node{opacity:1!important;transform:none!important;animation:none!important}}
/* THE VOYAGE — a sailboat sails the charted route, pausing at each port of value.
   16s loop, launches 3.2s after panel activation (line draw runs 0.6-2.8s).
   Ports at 0/27.5/52.1/77.7/100% of the 848-unit path (measured). Long docked
   hold at the final port, tight crossfade relaunch. Compositor-only.
   Gate includes offset-anchor: excludes engines that parse offset-path but
   don't apply motion paths to SVG children (older Safari) — they get the
   static chart. Delay selectors mirror the activation selectors so they
   outrank the shorthand's implicit delay reset in BOTH modes. */
.rp-boat{opacity:0}
.rp-ring{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.5)}
@supports (offset-path: path("M0 0 L1 1")) and (offset-anchor: auto){
  .rp-boat{offset-path:path("M44 52 C144 70 232 92 252 140 S134 212 84 240 S236 288 256 336 S180 420 130 462");offset-rotate:0deg}
  .js .route-panel.in .rp-boat,.sda .route-panel .rp-boat{animation:voyage 16s linear 3.2s infinite}
  .rp-boat .rock{transform-box:fill-box;transform-origin:center}
  .js .route-panel.in .rp-boat .rock,.sda .route-panel .rp-boat .rock{animation:rock 2.6s ease-in-out infinite alternate}
  .js .route-panel.in .rp-ring,.sda .route-panel .rp-ring{animation:ring 16s var(--ease) infinite}
  .js .route-panel.in .rp-node:nth-of-type(1) .rp-ring,.sda .route-panel .rp-node:nth-of-type(1) .rp-ring{animation-delay:3.68s}
  .js .route-panel.in .rp-node:nth-of-type(2) .rp-ring,.sda .route-panel .rp-node:nth-of-type(2) .rp-ring{animation-delay:6.4s}
  .js .route-panel.in .rp-node:nth-of-type(3) .rp-ring,.sda .route-panel .rp-node:nth-of-type(3) .rp-ring{animation-delay:9.28s}
  .js .route-panel.in .rp-node:nth-of-type(4) .rp-ring,.sda .route-panel .rp-node:nth-of-type(4) .rp-ring{animation-delay:12.16s}
  .js .route-panel.in .rp-node:nth-of-type(5) .rp-ring,.sda .route-panel .rp-node:nth-of-type(5) .rp-ring{animation-delay:15.04s}
}
@keyframes voyage{
  0%{offset-distance:0%;opacity:0}
  3%{offset-distance:0%;opacity:1;animation-timing-function:linear}
  8%{offset-distance:0%;animation-timing-function:ease-in-out}
  20%{offset-distance:27.5%;animation-timing-function:linear}
  26%{offset-distance:27.5%;animation-timing-function:ease-in-out}
  38%{offset-distance:52.1%;animation-timing-function:linear}
  44%{offset-distance:52.1%;animation-timing-function:ease-in-out}
  56%{offset-distance:77.7%;animation-timing-function:linear}
  62%{offset-distance:77.7%;animation-timing-function:ease-in-out}
  74%{offset-distance:100%}
  94%{offset-distance:100%;opacity:1}
  98%{offset-distance:100%;opacity:0}
  100%{offset-distance:100%;opacity:0}
}
@keyframes rock{from{transform:rotate(-3.5deg)}to{transform:rotate(3.5deg)}}
@keyframes ring{0%{opacity:.75;transform:scale(.55)}5%{opacity:0;transform:scale(2.4)}6%,100%{opacity:0;transform:scale(.55)}}
@media (prefers-reduced-motion:reduce){.rp-boat,.rp-ring{animation:none!important;opacity:0!important}.rp-boat .rock{animation:none!important}}

/* ---------- sections & chart rail ---------- */
section{padding:clamp(76px,10vw,120px) 0}
.kicker{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt);margin-bottom:14px}
.dark .kicker,.contact .kicker{color:var(--aqua)}
/* kicker tide-breathing: one-shot tracking-in */
.js .kicker{letter-spacing:.34em;opacity:0;transition:letter-spacing 1.1s var(--ease),opacity .7s var(--ease)}
.js .kicker.in,.sda .kicker{letter-spacing:.14em;opacity:1}
@supports (animation-timeline: view()) {
  .sda .kicker{animation:kick-in linear forwards;animation-timeline:view();animation-range:entry 5% cover 28%;transition:none}
  @keyframes kick-in{from{letter-spacing:.34em;opacity:0}to{letter-spacing:.14em;opacity:1}}
  @media (prefers-reduced-motion:reduce){.sda .kicker{animation:none;letter-spacing:.14em;opacity:1}}
}
@media (prefers-reduced-motion:reduce){.js .kicker{letter-spacing:.14em;opacity:1;transition:none}}
h2{font-size:clamp(30px,4.2vw,44px);line-height:1.12;max-width:640px}
.lede{margin-top:18px;font-size:17px;color:var(--ink-soft);max-width:56ch}
/* section current-line: draws once on entry (desktop-only; mobile stays v1) */
.sect-current{margin:2px 0 14px;display:none}
.sect-current path{stroke:var(--aqua);stroke-width:2;opacity:.55;stroke-dasharray:200;stroke-dashoffset:200}
.problems .sect-current path,.process .sect-current path,.founder .sect-current path{stroke:var(--cobalt);opacity:.4}
.js .sect-current.in path{animation:cur-draw var(--dur-3) var(--ease) forwards}
@keyframes cur-draw{to{stroke-dashoffset:0}}
html:not(.js) .sect-current path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.sect-current path{stroke-dashoffset:0!important;animation:none!important}}
/* ghost depth numerals (rail) — desktop-only; mobile stays v1 */
.sec-head{position:relative}
@media (min-width:1080px){
  .sec-head::before{content:attr(data-num);position:absolute;top:-.55em;left:-.08em;font-family:'Fraunces',serif;font-weight:560;font-size:clamp(72px,9vw,128px);line-height:1;color:var(--ghost);pointer-events:none;z-index:0}
  .human .sec-head::before,.contact .sec-head::before{color:var(--ghost-light)}
  .sec-head>*{position:relative;z-index:1}
}

/* ---------- problems ---------- */
.problems{background:var(--mist)}
.prob-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:56px}
@media (min-width:640px){.prob-grid{grid-template-columns:repeat(2,1fr)}}
.prob{background:var(--white);border-radius:var(--radius);padding:28px;box-shadow:0 3px 14px rgba(23,37,45,.05);border:1px solid rgba(23,37,45,.08);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.prob:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(23,37,45,.09)}
.prob .mark{font-family:'Fraunces',serif;font-size:22px;color:var(--aqua);margin-bottom:12px}
.prob h3{font-size:18px;margin-bottom:8px}
.prob p{font-size:14.5px;color:var(--ink-muted)}

/* ---------- services ---------- */
.services{background:var(--white)}
.svc-grid{display:grid;grid-template-columns:1fr;gap:22px;margin-top:56px}
@media (min-width:640px) and (max-width:1079px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc{background:var(--mist);border:1px solid rgba(23,37,45,.06);border-radius:var(--radius);padding:34px 30px;position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.svc:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(23,37,45,.10)}
.svc svg{margin-bottom:18px}
.svc h3{font-size:21px;margin-bottom:12px}
.svc ul{list-style:none;margin-top:4px}
.svc li{font-size:14.5px;color:var(--ink-soft);padding:5px 0 5px 22px;position:relative}
.svc li::before{content:"";position:absolute;left:0;top:13px;width:10px;height:2px;background:var(--aqua);border-radius:2px}

/* ---------- human-first band ---------- */
.human{background:var(--sea);color:var(--light-ink);position:relative}
.human h2{color:var(--white)}
.human .lede{color:var(--light-soft)}
.human-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:52px}
@media (min-width:640px){.human-grid{grid-template-columns:repeat(2,1fr)}}
.hcard{border:1px solid var(--rule-light);border-radius:var(--radius);padding:26px;background:rgba(238,247,250,.03)}
.hcard h3{font-size:17px;color:var(--white);margin-bottom:8px}
.hcard p{font-size:14px;color:var(--light-soft)}
.hcard .tick{color:var(--aqua);font-size:18px;margin-bottom:10px;font-weight:700}

/* ---------- process ---------- */
.process{background:var(--mist)}
.steps{margin-top:56px;display:grid;gap:0;position:relative}
.step{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:26px 0;border-bottom:1px solid var(--rule);align-items:start}
.step:last-child{border-bottom:none}
.step .num{font-family:'Fraunces',serif;font-size:30px;color:var(--cobalt);font-weight:560;line-height:1.2}
.step h3{font-size:19px;margin-bottom:6px}
.step p{font-size:15px;color:var(--ink-muted);max-width:56ch}
/* plotted route line (desktop) */
.route-line{display:none}

/* ---------- founder ---------- */
.founder{background:var(--white)}
.founder-wrap{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media (min-width:861px){.founder-wrap{grid-template-columns:1.1fr .9fr;gap:64px}}
.founder blockquote{font-family:'Fraunces',serif;font-size:clamp(20px,2.6vw,26px);line-height:1.42;font-weight:420;color:var(--ink);border-left:3px solid var(--aqua);padding-left:26px}
.founder .who{margin-top:22px;padding-left:29px;font-size:14.5px;color:var(--ink-muted)}
.founder .who strong{color:var(--ink);font-weight:600}
.founder-story p{font-size:15.5px;color:var(--ink-soft);margin-bottom:16px}
.honest{margin-top:26px;background:var(--mist);border-radius:var(--radius);padding:24px 26px;border:1px solid rgba(0,110,230,.14)}
.honest h3{font-size:16px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.honest p{font-size:14px;color:var(--ink-soft);margin:0}

/* ---------- contact ---------- */
.contact{background:var(--sea-deep);color:var(--light-ink);position:relative;overflow:hidden}
.contact .glow{position:absolute;width:560px;height:560px;border-radius:50%;background:rgba(0,110,230,.14);filter:blur(100px);top:-180px;right:-140px;pointer-events:none}
.contact h2{color:var(--white)}
.contact .lede{color:var(--light-soft)}
.contact-wrap{display:grid;grid-template-columns:1fr;gap:44px;position:relative;z-index:2}
@media (min-width:861px){.contact-wrap{grid-template-columns:1fr 1fr;gap:64px}}
form{display:grid;gap:16px;margin-top:8px}
label{font-size:13.5px;font-weight:600;color:var(--light-ink);display:block;margin-bottom:6px}
input,select,textarea{width:100%;background:rgba(238,247,250,.06);border:1px solid rgba(220,235,242,.18);border-radius:10px;color:var(--white);font-family:'Inter',sans-serif;font-size:16px;padding:13px 15px;transition:border-color .2s}
input::placeholder,textarea::placeholder{color:#A8C0CC}
input:focus,select:focus,textarea:focus{outline:2px solid var(--aqua);outline-offset:1px;border-color:var(--aqua)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A8C0CC' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
select option{color:var(--navy)}
textarea{min-height:110px;resize:vertical}
.field-err{font-size:12.5px;color:#FFB3A7;margin-top:6px;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#FF8A75}
.field.invalid .field-err{display:block}
.form-note{font-size:12.5px;color:#8FA9B5;line-height:1.5}
.form-status{display:none;border-radius:10px;padding:16px 18px;font-size:14.5px;line-height:1.5}
.form-status.ok{display:block;background:rgba(35,201,184,.12);border:1px solid rgba(35,201,184,.4);color:#9FE8DF}
.contact .direct{margin-top:34px;font-size:15px;color:var(--light-soft)}
.contact .direct a{color:var(--aqua);font-weight:600;border-bottom:1.5px solid rgba(35,201,184,.4);transition:border-color .2s}
.contact .direct a:hover{border-color:var(--aqua)}

/* ---------- footer ---------- */
footer{background:var(--sea-deep);color:#8FA9B5;border-top:1px solid rgba(220,235,242,.10);padding:36px 0;font-size:13.5px}
footer .row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer .flogo{display:flex;align-items:center;gap:9px;font-family:'Fraunces',serif;font-weight:640;color:var(--light-soft);font-size:15px}
footer a{color:#A8C0CC;border-bottom:1px solid rgba(168,192,204,.55);transition:border-color .2s,color .2s}
footer a:hover{color:var(--aqua);border-color:var(--aqua)}

/* ---------- film grain (dark sections) ---------- */
.hero::after,.human::after,.contact::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E")}
.hero .container,.human .container,.contact .container{position:relative;z-index:2}

/* ---------- glow parallax + wave depth parallax ---------- */
@supports (animation-timeline: scroll()) {
  .hero .glow.g1{animation:g-drift1 linear;animation-timeline:scroll()}
  .hero .glow.g2{animation:g-drift2 linear;animation-timeline:scroll()}
  .contact .glow{animation:g-drift1 linear;animation-timeline:scroll()}
  @keyframes g-drift1{to{transform:translateY(-120px)}}
  @keyframes g-drift2{to{transform:translateY(90px)}}
  /* near wave exits fastest, far wave slowest — depth on scroll-out (desktop only) */
  @media (min-width:1080px){
    .hero-lines .d1 .para{animation:wpar1 linear;animation-timeline:scroll()}
    .hero-lines .d2 .para{animation:wpar2 linear;animation-timeline:scroll()}
    .hero-lines .d3 .para{animation:wpar3 linear;animation-timeline:scroll()}
  }
  @keyframes wpar1{to{transform:translateY(-160px)}}
  @keyframes wpar2{to{transform:translateY(-80px)}}
  @keyframes wpar3{to{transform:translateY(-36px)}}
  @media (prefers-reduced-motion:reduce){.hero .glow,.contact .glow,.hero-lines .para{animation:none!important}}
}

/* THE VOYAGE RAIL — plotted course line charting scroll progress (desktop) */
.voyage-rail{display:none}
@media (min-width:1080px){
  @supports (animation-timeline: scroll()){
    .voyage-rail{display:block;position:fixed;top:88px;bottom:0;left:clamp(16px,2.2vw,44px);width:2px;z-index:40;pointer-events:none;background:linear-gradient(180deg,var(--aqua),var(--cobalt));border-radius:2px;opacity:.26;transform-origin:top;animation:rail-grow linear;animation-timeline:scroll()}
    @keyframes rail-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
    @media (prefers-reduced-motion:reduce){.voyage-rail{display:none}}
  }
}

/* ============================================================
   THE CHART — desktop recomposition layer (>=1080px)
   ============================================================ */
@media (min-width:1080px){
  .container{max-width:var(--content-max);padding:0 var(--gutter)}
  section{padding:clamp(96px,12vh,200px) 0}
  h2{font-size:clamp(38px,3.4vw,56px);max-width:none}

  /* asymmetric section grid: head rail left, content right */
  .sect-current{display:block}
  .chart-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
  .sec-head{grid-column:1 / span 4;position:sticky;top:120px}
  .sec-body{grid-column:5 / span 8}

  /* hero: 7/5 with route panel */
  .hero{padding:196px 0 170px}
  .hero .hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:center}
  .hero .hero-copy{grid-column:1 / span 7}
  .hero h1{font-size:clamp(56px,4.6vw,96px);max-width:none}
  .hero .sub{font-size:clamp(17px,1.2vw,20px);max-width:52ch}
  .route-panel{display:block;grid-column:9 / span 4}

  /* problems: editorial ledger, no cards */
  .prob-grid{grid-template-columns:repeat(2,1fr);gap:0 56px;margin-top:0;counter-reset:prob}
  .prob{background:transparent;border-radius:0;box-shadow:none;border:0;border-top:1px solid var(--rule);padding:30px 8px 34px 0;counter-increment:prob;position:relative;transition:background .3s var(--ease)}
  .prob:hover{transform:none;box-shadow:none;background:rgba(0,110,230,.035)}
  .prob .mark{display:none}
  .prob h3{font-size:20px;padding-left:58px;position:relative}
  .prob h3::before{content:"0" counter(prob);position:absolute;left:0;top:.05em;font-family:'Fraunces',serif;font-size:17px;color:var(--cobalt);opacity:.75}
  .prob p{padding-left:58px;font-size:15px;margin-top:8px;max-width:44ch}
  .prob::after{content:"";position:absolute;top:-1px;left:0;width:34px;height:1px;background:var(--aqua);transform-origin:left;transform:scaleX(0);transition:transform .45s var(--ease)}
  .prob:hover::after{transform:scaleX(1)}

  /* services: intro rail + rows */
  .svc-grid{grid-template-columns:1fr;gap:0;margin-top:0}
  .svc{display:grid;grid-template-columns:56px 1fr 1.15fr;gap:28px;background:transparent;border:0;border-top:1px solid var(--rule);border-radius:0;padding:38px 8px 42px 0;transition:background .3s var(--ease);position:relative}
  .svc:hover{transform:none;box-shadow:none;background:rgba(35,201,184,.045)}
  .svc::after{content:"";position:absolute;top:-1px;left:0;width:34px;height:1px;background:var(--cobalt);transform-origin:left;transform:scaleX(0);transition:transform .45s var(--ease)}
  .svc:hover::after{transform:scaleX(1)}
  .svc svg{margin:4px 0 0}
  .svc h3{font-size:23px}
  .svc ul{margin-top:0;columns:1}

  /* human band: statement + checklist rows */
  .human .chart-grid{align-items:start}
  .human .sec-head{grid-column:1 / span 5}
  .human .sec-body{grid-column:7 / span 6}
  .human h2{font-size:clamp(40px,3.2vw,54px)}
  .human-grid{grid-template-columns:1fr;gap:0;margin-top:0}
  .hcard{background:transparent;border:0;border-top:1px solid var(--rule-light);border-radius:0;padding:26px 0;display:grid;grid-template-columns:36px 1fr;gap:14px}
  .hcard .tick{margin:0;font-size:17px}
  .hcard h3{font-size:18px}
  .hcard p{max-width:48ch}

  /* process: plotted route */
  .steps{margin-top:0;padding-left:56px}
  .route-line{display:block;position:absolute;left:18px;top:8px;bottom:8px;width:2px;pointer-events:none}
  .route-line::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--aqua),var(--cobalt));transform-origin:top;transform:scaleY(0);transition:transform 1.6s var(--ease)}
  .js .steps.in .route-line::before,html:not(.js) .route-line::before{transform:scaleY(1)}
  @media (prefers-reduced-motion:reduce){.route-line::before{transform:scaleY(1)!important;transition:none}}
  .step{grid-template-columns:96px 1fr;padding:34px 0}
  .step .num{font-size:44px;color:var(--cobalt);opacity:.85}
  .step h3{font-size:21px}

  /* founder: 5/7 editorial */
  .founder-wrap{grid-template-columns:5fr 7fr;gap:88px}
  .founder blockquote{font-size:clamp(26px,2.2vw,34px);line-height:1.36}

  /* contact: 2-col fields */
  form{grid-template-columns:1fr 1fr;gap:16px 20px}
  form .field:nth-child(3),form .field:nth-child(4){grid-column:1 / -1}
  form button,form .form-status,form .form-note{grid-column:1 / -1}

  /* footer chart rule */
  footer{border-top:2px solid rgba(35,201,184,.25)}
}
/* ultrawide caps */
@media (min-width:1728px){
  :root{--gap:40px}
}
@media (min-width:2200px){
  .hero h1{font-size:96px}
  h2{font-size:56px}
}

/* desktop hover choreography only for real pointers */
@media (hover:none), (pointer:coarse){
  .prob::after,.svc::after{display:none}
}

/* ---------- 404 ---------- */
.notfound{min-height:100vh;min-height:100dvh;display:flex;align-items:center;background:var(--sea-deep);color:var(--white)}
.notfound h1{font-size:clamp(40px,6vw,64px)}
.notfound p{margin-top:14px;color:var(--light-soft);font-size:17px}
.notfound .btn{margin-top:28px}