/* Waterproofmedia — "Deep water" design system.
   One loud element (the living wave in the hero); everything else quiet and exact.
   All text lives in the HTML; motion never hides content. */
:root{
  --abyss:#040a12; --deep:#07111d; --tide:#0b1a2a; --tide-2:#10243a;
  --foam:#eef3f1; --spray:#a9bcc6; --mist:#7f95a2;
  --glow:#5cf2d6; --signal:#4d8dff;
  --line:rgba(169,188,198,.14); --line-2:rgba(169,188,198,.28);
  --salt:#eef2f0; --ink:#0a1622; --ink-2:#34434f; --ink-3:#5b6a75; --deep-teal:#05715f;
  --f-display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --f-body:'Geist',ui-sans-serif,system-ui,sans-serif;
  --pad:clamp(20px,5vw,72px); --maxw:1320px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--abyss);color:var(--foam);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
p{max-width:62ch}
::selection{background:var(--glow);color:var(--abyss)}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:10px;background:var(--foam);color:var(--abyss);padding:10px 14px;border-radius:8px;z-index:200}
.skip:focus{left:10px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* Type scale (1.25 minor third, display opsz tuned) */
h1,h2,h3,.display{font-family:var(--f-display);font-weight:700;font-variation-settings:"opsz" 96;letter-spacing:-.035em;line-height:.98;color:var(--foam)}
h2{font-size:clamp(38px,5.4vw,76px)}
h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.1}
.lede{font-size:clamp(18px,1.55vw,21px);line-height:1.55;color:var(--spray);max-width:52ch}
.kicker{font:500 15px/1.4 var(--f-body);color:var(--spray);display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.muted{color:var(--mist)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 16px/1 var(--f-body);letter-spacing:-.005em;padding:17px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;min-height:52px;transition:background .25s var(--ease),color .25s,border-color .25s,transform .25s var(--ease)}
.btn-primary{background:var(--foam);color:var(--abyss)}
.btn-primary:hover{background:var(--glow)}
.btn-ghost{border-color:var(--line-2);color:var(--foam);background:transparent}
.btn-ghost:hover{border-color:var(--foam)}
.btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.textlink{display:inline-flex;gap:8px;align-items:center;font-weight:600;border-bottom:1px solid currentColor;padding-bottom:2px}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .35s,border-color .35s,backdrop-filter .35s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(4,10,18,.72);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border-bottom-color:var(--line)}
.nav-in{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:30px;height:30px;object-fit:contain}
.brand .name{display:block;font:700 19px/1 var(--f-display);letter-spacing:-.02em}
.brand .tag{display:block;font:400 12px/1 var(--f-body);color:var(--mist);margin-top:4px}
.nav-links{display:flex;gap:30px}
.nav-links a{font-size:15px;color:var(--spray);transition:color .2s}
.nav-links a:hover{color:var(--foam)}
.nav-right{display:flex;align-items:center;gap:14px}
.lang{display:flex;font:500 13px var(--f-body);color:var(--mist)}
.lang a{padding:8px 6px}
.lang a[aria-current]{color:var(--foam);text-decoration:underline;text-underline-offset:5px}
.nav .btn{min-height:42px;padding:12px 20px;font-size:15px}
.menu-btn{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:none;color:var(--foam);cursor:pointer}
.menu-btn span{display:block;width:16px;height:1.5px;background:currentColor;margin:4px auto;transition:transform .3s var(--ease)}
.menu-btn[aria-expanded=true] span:first-child{transform:translateY(2.75px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:last-child{transform:translateY(-2.75px) rotate(-45deg)}
.mobile-menu{display:none}
@media(max-width:940px){
  .nav-links,.nav-right>.btn{display:none}
  .menu-btn{display:block}
  .mobile-menu{display:flex;flex-direction:column;background:var(--abyss);border-top:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
  .mobile-menu.open{max-height:560px}
  .mobile-menu a{padding:16px var(--pad);border-bottom:1px solid var(--line);font:600 22px var(--f-display);letter-spacing:-.02em}
  .mobile-menu .btn{margin:18px var(--pad);font:600 16px var(--f-body)}
}

/* Sections */
section{position:relative;padding-block:clamp(88px,11vw,168px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:24px clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(48px,6vw,88px)}
.sec-head .lede{justify-self:start}
.salt{background:var(--salt);color:var(--ink)}
.salt h2,.salt h3,.salt .display{color:var(--ink)}
.salt .lede,.salt p{color:var(--ink-2)}
.salt .kicker{color:var(--ink-3)}
.salt .btn-primary{background:var(--ink);color:var(--salt)}
.salt .btn-primary:hover{background:var(--deep-teal)}
.salt .btn-ghost{color:var(--ink);border-color:rgba(10,22,34,.25)}
.salt .btn-ghost:hover{border-color:var(--ink)}

/* ---------- Hero: the living wave ---------- */
.hero{min-height:min(100svh,1000px);padding-top:clamp(130px,16vh,180px);padding-bottom:0;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(1100px 620px at 78% 8%,rgba(77,141,255,.16),transparent 62%),radial-gradient(900px 600px at 0% 0%,rgba(92,242,214,.07),transparent 60%)}
.hero-copy{position:relative;z-index:2}
.hero h1{font-size:clamp(54px,9vw,144px);font-weight:750;letter-spacing:-.04em;line-height:.9;max-width:12ch}
.hero h1 .soft{display:block;font-weight:400;color:var(--spray);letter-spacing:-.035em}
.hero-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:40px;align-items:end;margin-top:clamp(28px,4vw,48px)}
.hero .lede{max-width:46ch}
.hero .cta-row{margin-top:30px}
.hero .note{margin-top:16px;font-size:14px;color:var(--mist)}
.proof-chip{display:block;width:min(360px,100%);border:1px solid var(--line-2);border-radius:20px;padding:22px 22px 18px;background:rgba(7,17,29,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:border-color .3s}
.proof-chip:hover{border-color:var(--glow)}
.proof-chip .pc-top{font-size:13.5px;color:var(--spray)}
.proof-chip .pc-big{font:700 clamp(46px,4.6vw,64px)/1 var(--f-display);letter-spacing:-.04em;color:var(--foam);margin-top:12px}
.proof-chip .pc-big small{font:400 15px/1.3 var(--f-body);letter-spacing:0;color:var(--spray);display:block;margin-top:8px}
.proof-chip dl{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.proof-chip dt{font-size:12.5px;color:var(--mist)}
.proof-chip dd{font:600 18px var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.proof-chip .pc-link{display:inline-block;margin-top:16px;font-size:14px;font-weight:600;color:var(--glow)}
.sea{position:relative;flex:1;min-height:clamp(220px,30vw,440px);margin-top:clamp(20px,3vw,40px);z-index:0}
.sea img{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 45%);mask-image:linear-gradient(180deg,transparent 0%,#000 45%)}
.sea canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen}
.flow-strip{position:absolute;right:var(--pad);bottom:26px;z-index:2;font-size:13px;letter-spacing:.01em;color:var(--spray);display:flex;gap:18px}
.flow-strip span+span::before{content:"";display:inline-block;width:18px;height:1px;background:var(--mist);vertical-align:middle;margin-right:18px}

/* Logos */
.logos-band{padding-block:44px;border-bottom:1px solid var(--line);background:var(--abyss)}
.logos-band .wrap{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.logos-band p{font-size:14px;color:var(--mist);flex:0 0 auto}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:22px 48px;flex:1;justify-content:space-between}
.logos img{height:30px;width:auto;max-width:140px;object-fit:contain;filter:brightness(0) invert(1);opacity:.58;transition:opacity .25s}
.logos img:hover{opacity:1}
.logos .word{font:700 19px var(--f-display);letter-spacing:-.02em;opacity:.58}

/* Services index */
.index{list-style:none;border-top:1px solid var(--line)}
.index li{border-bottom:1px solid var(--line)}
.index a,.index .row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,.9fr) 40px;gap:24px;align-items:baseline;padding:34px 0;position:relative;transition:padding .45s var(--ease)}
.index a::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--glow);transition:width .6s var(--ease)}
.index a:hover::before,.index a:focus-visible::before{width:100%}
.index a:hover{padding-left:14px}
.ix-name{font:700 clamp(28px,3.4vw,48px)/1 var(--f-display);letter-spacing:-.035em}
.ix-desc{color:var(--spray);font-size:16.5px}
.ix-proof{font-size:14px;color:var(--mist)}
.ix-proof b{display:block;font-weight:600;color:var(--foam)}
.ix-go{justify-self:end;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:background .3s,border-color .3s,color .3s}
.ix-go svg{width:15px;height:15px}
.index a:hover .ix-go{background:var(--glow);border-color:var(--glow);color:var(--abyss)}

/* Method: a real sequence */
.method{border-top:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);counter-reset:s}
.step{position:relative;padding-top:28px;border-top:1px solid var(--line-2)}
.step .num{font:300 clamp(72px,8vw,120px)/.8 var(--f-display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px var(--mist)}
.step h3{margin-top:22px}
.step p{color:var(--spray);margin-top:12px;font-size:16.5px}
.practice{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;max-width:860px}
.practice .display{font-size:clamp(56px,7vw,96px);color:var(--glow);letter-spacing:-.05em}
.practice p{color:var(--spray);font-size:17px}

/* Offer: a staircase from small to large */
.stairs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end}
.tier{display:flex;flex-direction:column;border-radius:22px;padding:clamp(26px,2.6vw,38px);min-height:400px}
.tier:nth-child(1){border:1px solid rgba(10,22,34,.18)}
.tier:nth-child(2){background:#fff;min-height:470px;box-shadow:0 30px 60px -40px rgba(10,22,34,.35)}
.tier:nth-child(3){background:var(--ink);color:var(--salt);min-height:540px}
.tier:nth-child(3) h3,.tier:nth-child(3) .t-size{color:var(--salt)}
.tier:nth-child(3) p,.tier:nth-child(3) li{color:#b9c7cf}
.t-size{font:400 15px var(--f-body);color:var(--ink-3)}
.tier h3{font-size:clamp(28px,2.6vw,36px);margin-top:8px}
.tier>p{margin-top:12px;font-size:16px}
.tier ul{list-style:none;margin-top:22px;display:grid;gap:10px}
.tier li{font-size:15px;color:var(--ink-2);padding-left:22px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:currentColor}
.tier .btn{margin-top:auto;align-self:flex-start}
.tier ul+.btn{margin-top:auto}
.tier:nth-child(3) .btn-primary{background:var(--glow);color:var(--ink)}
.tier:nth-child(3) .btn-primary:hover{background:var(--salt)}
.tier .spacer{flex:1;min-height:24px}
.terms{margin-top:36px;font-size:16px;color:var(--ink-2)}

/* Cases */
.case-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start;padding-top:40px;border-top:1px solid rgba(10,22,34,.15)}
.case-feature .meta{font-size:15px;color:var(--ink-3)}
.case-feature h3{font-size:clamp(30px,3.4vw,48px);margin-top:14px;letter-spacing:-.035em}
.case-feature p{margin-top:18px}
.case-feature .textlink{margin-top:26px;color:var(--deep-teal)}
.figures{display:grid;grid-template-columns:1fr 1fr}
.figure{padding:22px 0 26px;border-bottom:1px solid rgba(10,22,34,.15)}
.figure:nth-child(odd){padding-right:24px;border-right:1px solid rgba(10,22,34,.15)}
.figure:nth-child(even){padding-left:24px}
.figure b{display:block;font:700 clamp(40px,4.6vw,68px)/1 var(--f-display);letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums}
.figure span{display:block;margin-top:8px;font-size:14.5px;color:var(--ink-3)}
.figure.hl b{color:var(--deep-teal)}
.case-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);margin-top:clamp(64px,8vw,112px)}
.case-sm{padding-top:28px;border-top:1px solid rgba(10,22,34,.15)}
.case-sm .big{font:700 clamp(64px,7vw,104px)/.9 var(--f-display);letter-spacing:-.055em;color:var(--ink)}
.case-sm h3{font-size:22px;margin-top:20px}
.case-sm .what{font-size:15px;color:var(--ink-3);margin-top:4px}
.case-sm p{margin-top:12px;font-size:16px}
.quote{margin-top:clamp(72px,9vw,128px);max-width:980px}
.quote blockquote{font:500 clamp(26px,3vw,42px)/1.22 var(--f-display);letter-spacing:-.025em;color:var(--ink);text-indent:-.4em}
.quote figcaption{margin-top:22px;font-size:15px;color:var(--ink-3)}

/* Team */
.team-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:center}
.team-photo{border-radius:24px;overflow:hidden;aspect-ratio:4/5}
.team-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px;padding-top:24px;border-top:1px solid rgba(10,22,34,.15)}
.values b{display:block;font:600 17px var(--f-display);letter-spacing:-.015em;color:var(--ink)}
.values span{font-size:14.5px;color:var(--ink-3)}
.core{margin-top:26px;font-size:15px;color:var(--ink-3)}
.network-head{margin-top:clamp(64px,8vw,104px);font-size:15px;color:var(--ink-3)}
.network{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;margin-top:22px}
.member img{width:72px;height:72px;border-radius:50%;object-fit:cover;filter:grayscale(.15)}
.member b{display:block;font:600 16px var(--f-display);letter-spacing:-.015em;color:var(--ink);margin-top:12px}
.member span{display:block;font-size:14px;color:var(--ink-2)}
.member small{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}

/* Lab */
.lab{border-top:1px solid var(--line)}
.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.product{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:26px;overflow:hidden;background:linear-gradient(180deg,var(--tide),var(--deep));transition:border-color .35s}
.product:hover{border-color:var(--line-2)}
.product .visual{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--deep)}
.product .visual img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.product:hover .visual img{transform:scale(1.03)}
.product .visual svg{position:absolute;inset:0;margin:auto;width:46%;height:auto;color:#c9d6dc}
.product .visual.compass{background:radial-gradient(circle at 50% 45%,#13304a,var(--deep) 70%)}
.product .body{padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;flex:1}
.status{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--spray)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mist)}
.status.on::before{background:var(--glow);box-shadow:0 0 0 4px rgba(92,242,214,.16)}
.product h3{font-size:clamp(28px,2.8vw,40px);margin-top:14px}
.product p{color:var(--spray);margin-top:12px;font-size:16.5px}
.product .proves{margin-top:18px;font-size:14.5px;color:var(--mist)}
.product .btn{margin-top:28px;align-self:flex-start}
.product .body .spacer{flex:1}

/* Final */
.final{text-align:center;overflow:hidden;isolation:isolate;padding-bottom:clamp(140px,16vw,220px)}
.final .sea-bg{position:absolute;inset:auto 0 0 0;height:70%;z-index:-1}
.final .sea-bg img{width:100%;height:100%;object-fit:cover;object-position:center bottom;-webkit-mask-image:linear-gradient(180deg,transparent,#000 60%);mask-image:linear-gradient(180deg,transparent,#000 60%)}
.final h2{font-size:clamp(48px,8vw,128px);letter-spacing:-.05em;max-width:12ch;margin:0 auto}
.final p{margin:26px auto 0;color:var(--spray);font-size:clamp(17px,1.6vw,20px)}
.final .cta-row{justify-content:center;margin-top:36px}

/* Footer */
.foot{border-top:1px solid var(--line);padding-block:64px 36px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.foot-grid>*{min-width:0}
.foot h4{font:500 14px var(--f-body);color:var(--mist);margin-bottom:16px}
.foot a{display:block;color:var(--spray);margin-bottom:10px;font-size:15px;overflow-wrap:anywhere}
.foot a:hover{color:var(--foam)}
.foot-brand p{margin-top:14px;color:var(--mist);font-size:15px;max-width:30ch}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:13.5px;color:var(--mist)}
.foot-bottom a{display:inline;margin:0;font-size:13.5px}

/* Inner page hero (contact, campagnes) */
.page-hero{padding-top:clamp(140px,18vh,200px);padding-bottom:clamp(56px,7vw,96px)}
.page-hero h1{font-size:clamp(48px,7.4vw,112px);font-weight:750;letter-spacing:-.04em;line-height:.92;max-width:14ch}
.page-hero h1 .soft{font-weight:400;color:var(--spray)}
.page-hero .lede{margin-top:28px}
.page-hero .cta-row{margin-top:32px}
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,220px));gap:24px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.principles b{display:block;font:600 18px var(--f-display);letter-spacing:-.015em}
.principles span{font-size:15px;color:var(--spray)}
.page-hero.with-sea{padding-bottom:0}
.page-hero.with-sea .sea{min-height:clamp(160px,20vw,300px)}

/* Campagnes: werkwijze + afspraken */
.cmp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.terms-block{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;padding-top:36px;border-top:1px solid rgba(10,22,34,.15)}
.terms-block .display{font-size:clamp(24px,2.4vw,32px);line-height:1.25;letter-spacing:-.02em;font-weight:600}
.terms-list{display:grid;gap:18px}
.terms-list b{display:block;font:600 17px var(--f-display);color:var(--ink)}
.terms-list span{font-size:15px;color:var(--ink-3)}
.salt .steps .step{border-top-color:rgba(10,22,34,.22)}
.salt .step .num{-webkit-text-stroke-color:var(--ink-3)}
.salt .step p{color:var(--ink-2)}
.chan{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.chan span{border:1px solid var(--line-2);border-radius:999px;padding:8px 16px;font-size:14px;color:var(--spray)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,6vw,96px);align-items:start}
.form fieldset{border:0;margin-bottom:34px}
.form legend,.form label{display:block;font:600 16px var(--f-display);letter-spacing:-.01em;color:var(--foam);margin-bottom:14px}
.form .hint{font:400 14px var(--f-body);color:var(--mist)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{margin:0;font:500 15px var(--f-body);color:var(--spray);border:1px solid var(--line-2);border-radius:999px;padding:11px 18px;cursor:pointer;transition:all .2s;min-height:46px;display:inline-flex;align-items:center}
.chips label:hover{border-color:var(--foam);color:var(--foam)}
.chips input:checked+label{background:var(--foam);color:var(--abyss);border-color:var(--foam)}
.chips input:focus-visible+label{outline:2px solid var(--glow);outline-offset:2px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.field{margin-bottom:26px}
.field.full{grid-column:1/-1}
.form input[type=text],.form input[type=email],.form input[type=tel],.form input[type=url],.form textarea{width:100%;font:400 17px var(--f-body);color:var(--foam);background:transparent;border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:10px 0 12px;transition:border-color .25s}
.form textarea{min-height:110px;resize:vertical;line-height:1.5}
.form input:focus,.form textarea:focus{outline:none;border-bottom-color:var(--glow)}
.form input::placeholder,.form textarea::placeholder{color:var(--mist)}
.form .check{display:flex;gap:12px;align-items:flex-start;font:400 15px/1.5 var(--f-body);color:var(--spray);margin:6px 0 28px}
.form .check input{margin-top:3px;width:18px;height:18px;accent-color:#5cf2d6;flex:none}
.form .hp{position:absolute;left:-9999px}
.form-msg{margin-top:16px;font-size:15px}
.form-msg.err{color:#ffaaa5}
.done{display:none;padding:8px 0}
.done.show{display:block}
.done h2{font-size:clamp(36px,4.4vw,60px)}
.done p{color:var(--spray);margin-top:16px;font-size:18px}
.done .btn{margin-top:28px}
.side{display:grid;gap:0;border-top:1px solid var(--line)}
.side>div{padding:26px 0;border-bottom:1px solid var(--line)}
.side h3{font-size:20px}
.side p{color:var(--spray);margin-top:8px;font-size:15.5px}
.side a.textlink{margin-top:12px;color:var(--glow);font-size:15px}
.expect{list-style:none;margin-top:14px;display:grid;gap:12px;counter-reset:e}
.expect li{counter-increment:e;display:grid;grid-template-columns:26px 1fr;font-size:15.5px;color:var(--spray)}
.expect li::before{content:counter(e);font:600 15px var(--f-display);color:var(--foam)}

/* Assistant */
.agent-fab{position:fixed;right:20px;bottom:20px;z-index:90;display:inline-flex;align-items:center;gap:10px;background:var(--foam);color:var(--abyss);font:600 15px var(--f-body);border:0;border-radius:999px;padding:14px 20px 14px 16px;cursor:pointer;box-shadow:0 20px 50px -18px rgba(0,0,0,.7);transition:background .25s}
.agent-fab:hover{background:var(--glow)}
.agent-fab .dot{width:9px;height:9px;border-radius:50%;background:var(--deep-teal);box-shadow:0 0 0 4px rgba(5,113,95,.18)}
.agent{position:fixed;right:20px;bottom:20px;z-index:95;width:min(410px,calc(100vw - 24px));height:min(640px,calc(100svh - 40px));display:none;flex-direction:column;background:rgba(7,17,29,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line-2);border-radius:24px;overflow:hidden;box-shadow:0 40px 100px -30px rgba(0,0,0,.9)}
.agent.open{display:flex}
.agent-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.agent-head b{font:700 17px var(--f-display);letter-spacing:-.015em}
.agent-head small{display:block;font-size:13px;color:var(--mist);margin-top:2px}
.agent-head button{background:none;border:1px solid var(--line-2);border-radius:50%;width:38px;height:38px;color:var(--foam);cursor:pointer;font-size:18px}
.agent-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:88%;padding:12px 15px;border-radius:18px;font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.bot{background:var(--tide-2);align-self:flex-start;border-bottom-left-radius:6px}
.msg.me{background:var(--foam);color:var(--abyss);align-self:flex-end;border-bottom-right-radius:6px}
.msg a{color:var(--glow);text-decoration:underline}
.msg.typing{color:var(--mist)}
.agent-quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 12px}
.agent-quick button{font:500 13.5px var(--f-body);color:var(--spray);background:none;border:1px solid var(--line-2);border-radius:999px;padding:8px 13px;cursor:pointer;min-height:38px}
.agent-quick button:hover{color:var(--foam);border-color:var(--foam)}
.agent-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.agent-form input{flex:1;font:16px var(--f-body);color:var(--foam);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:12px 16px}
.agent-form input:focus{outline:none;border-color:var(--glow)}
.agent-form button{background:var(--foam);border:0;border-radius:50%;width:48px;color:var(--abyss);cursor:pointer;font-size:18px;font-weight:700}
.agent-foot{font-size:12px;color:var(--mist);padding:0 16px 12px;text-align:center}

/* The single orchestrated moment: hero load. Content is visible without JS. */
.js .hero .load{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .hero.ready .load{opacity:1;transform:none}
.js .hero.ready .load:nth-child(2){transition-delay:.12s}
.js .hero.ready .load:nth-child(3){transition-delay:.24s}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.js .hero .load{opacity:1;transform:none}}

/* Responsive */
@media(max-width:1080px){
  .index a,.index .row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 40px}
  .ix-proof{grid-column:2}
  .ix-go{grid-row:1;grid-column:3}
  .network{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .sec-head,.hero-row,.case-feature,.team-grid,.contact-grid,.terms-block{grid-template-columns:1fr}
  .steps,.cmp-steps,.stairs,.lab-grid,.case-pair{grid-template-columns:1fr}
  .tier,.tier:nth-child(2),.tier:nth-child(3){min-height:0}
  .tier .btn{margin-top:28px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .flow-strip{left:var(--pad);right:auto;gap:10px;font-size:12px}
  .flow-strip span+span::before{width:10px;margin-right:10px}
  .proof-chip{width:100%}
}
@media(max-width:640px){
  body{font-size:16.5px}
  .index a,.index .row{grid-template-columns:1fr 40px;gap:10px 16px;padding:26px 0}
  .ix-desc,.ix-proof{grid-column:1}
  .ix-go{grid-column:2;grid-row:1}
  .fields,.values,.figures{grid-template-columns:1fr}
  .figure:nth-child(odd),.figure:nth-child(even){padding:18px 0;border-right:0}
  .network{grid-template-columns:repeat(2,1fr)}
  .principles{grid-template-columns:1fr}
  .practice{grid-template-columns:1fr;gap:8px}
  .hero .cta-row .btn,.page-hero .cta-row .btn{width:100%}
  .agent-fab .lbl{display:none}.agent-fab{padding:16px}
  .agent{right:12px;bottom:12px}
  .logos{justify-content:flex-start;gap:20px 32px}.logos img{height:24px}
}
.final h2{letter-spacing:-.04em}
.final .sea-bg{height:52%}
.final .btn-ghost{background:rgba(4,10,18,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* Copy v1 additions */
.hero h1{max-width:13ch}
.hero-text .lede-2{color:var(--spray);margin-top:14px;font-size:17px;max-width:50ch}
.proof-chip{width:min(380px,100%)}
.proof-chip .pc-title{display:block;font:600 21px/1.2 var(--f-display);letter-spacing:-.02em;color:var(--foam);margin-top:10px}
.proof-chip .pc-text{display:block;font-size:14.5px;color:var(--spray);margin-top:8px}
.proof-chip .pc-big{margin-top:16px}
.sec-text p+p{margin-top:14px}
.sec-text p:not(.lede){color:var(--spray)}
.salt .sec-text p:not(.lede){color:var(--ink-2)}
.ix-sub{display:block;font:600 18px/1.3 var(--f-display);letter-spacing:-.015em;color:var(--foam);margin-bottom:8px}
.index a{align-items:start}
.ix-name{hyphens:manual}
.pull{margin-top:clamp(56px,7vw,96px);font:500 clamp(26px,3vw,42px)/1.2 var(--f-display);letter-spacing:-.025em;max-width:24ch}
.practice{margin-top:40px}
.t-sub{font:600 17px/1.35 var(--f-display);color:var(--ink);margin-top:10px}
.tier p+p{margin-top:12px}
.tier:nth-child(3) .t-sub{color:var(--salt)}
.flex-note{margin-top:40px;display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:24px;padding-top:28px;border-top:1px solid rgba(10,22,34,.15)}
.flex-note h3{font-size:24px}
.product .p-sub{font:600 18px/1.3 var(--f-display);color:var(--foam);letter-spacing:-.015em}
.product p+p{margin-top:10px}
.case-feature p+p{margin-top:12px}
.final p{max-width:56ch}
@media(max-width:900px){.flex-note{grid-template-columns:1fr}.network[style]{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:640px){.network[style]{grid-template-columns:repeat(2,1fr)!important}}

/* Logo band on tablet/mobile: label on top, logos in equal centred slots */
@media(max-width:900px){
  .logos-band{padding-block:36px}
  .logos-band .wrap{flex-direction:column;align-items:stretch;gap:24px}
  .logos-band p{text-align:center;max-width:none}
  .logos{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 0}
  .logos>*{flex:0 0 25%;display:flex;justify-content:center;align-items:center}
  .logos img{height:26px;max-width:80%}
  .logos .word{font-size:17px}
}
@media(max-width:520px){
  .logos>*{flex-basis:33.333%}
  .logos img{height:22px;max-width:84%}
  .logos .word{font-size:15px}
}

/* ---------- Cases ---------- */
.crumb{font-size:14.5px;color:var(--mist);display:flex;gap:10px;align-items:center}
.crumb a{color:var(--spray);border-bottom:1px solid var(--line-2)}
.crumb a:hover{color:var(--foam)}
.client-mark{display:inline-flex;gap:8px;margin-top:28px}
.bk-word{background:#ffd21e;color:#101010;border-radius:12px;padding:11px 16px;font:800 21px/1 var(--f-display);letter-spacing:-.02em;display:flex;align-items:center}
.bk-lotus{background:#1b4de4;border-radius:12px;padding:8px 11px;display:flex;align-items:center}
.client-mark.sm{position:absolute;left:18px;top:18px;margin:0}
.client-mark.sm .bk-word{font-size:16px;padding:8px 12px;border-radius:9px}
.client-mark.sm .bk-lotus{padding:5px 8px;border-radius:9px}
.client-mark.sm svg{width:30px;height:22px}
.case-page .page-hero h1{margin-top:22px;max-width:16ch}
.case-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.case-meta dt{font-size:13.5px;color:var(--mist)}
.case-meta dd{font:600 18px/1.3 var(--f-display);letter-spacing:-.015em;margin-top:4px}
.source{margin-top:18px;font-size:14px;color:var(--mist)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.two-col h2{font-size:clamp(32px,3.6vw,52px)}
.two-col p{margin-top:16px}
.two-col .brief{font:600 clamp(24px,2.4vw,32px)/1.2 var(--f-display);letter-spacing:-.02em;color:var(--ink);margin-top:20px}
.index .row.built{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);align-items:start}
.index .row.built h3{font-size:clamp(22px,2.2vw,30px)}
.index .row.built p{color:var(--spray);font-size:16.5px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.kpi{padding:26px 22px 28px 0;border-bottom:1px solid var(--line)}
.kpi:not(:nth-child(4n+1)){padding-left:22px;border-left:1px solid var(--line)}
.kpi b{display:block;font:700 clamp(34px,3.6vw,54px)/1 var(--f-display);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.kpi span{display:block;margin-top:10px;font-size:14.5px;color:var(--spray)}
.kpi small{display:block;margin-top:2px;font-size:13.5px;color:var(--mist)}
.kpi.hl b{color:var(--glow)}
.capt{margin-top:18px;font-size:14px;color:var(--mist);max-width:70ch}
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,72px) clamp(32px,5vw,80px)}
.chart-grid h3{font-size:22px;margin-bottom:22px}
.bars{display:grid;gap:10px}
.bar-row{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr) 4.8rem;gap:14px;align-items:center;font-size:14.5px}
.bn{color:var(--spray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt{height:8px;border-radius:8px;background:rgba(169,188,198,.1);overflow:hidden}
.bt i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--signal),var(--glow))}
.bt i.warm{background:linear-gradient(90deg,#e0a43a,#ffd21e)}
.bv{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.case-page table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:480px}
.case-page th,.case-page td{padding:12px 8px;text-align:right;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.case-page th:first-child,.case-page td:first-child{text-align:left;padding-left:0}
.case-page th{font-weight:500;color:var(--mist);font-size:13.5px}
.case-page tr.total td{font-weight:700;color:var(--foam);border-bottom:0}
.organic{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:24px;padding-top:28px;border-top:1px solid var(--line)}
.organic h3{font-size:24px}
.organic p{color:var(--spray)}
.learned{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.learned h2{position:sticky;top:110px}
.essay p{font-size:clamp(17px,1.35vw,19px);line-height:1.7;color:var(--ink-2);max-width:66ch}
.essay p+p{margin-top:22px}
.essay p:first-child::first-line{color:var(--ink);font-weight:600}
.credits{margin-top:56px;padding-top:22px;border-top:1px solid rgba(10,22,34,.15);font-size:14px}
.credits p{color:var(--ink-3)}
/* Cases overview */
.case-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center;color:var(--ink)}
.cl-visual{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:var(--abyss)}
.cl-visual img{width:100%;height:100%;object-fit:cover;object-position:30% 50%;transition:transform 1.2s var(--ease)}
.case-lead:hover .cl-visual img{transform:scale(1.04)}
.cl-body .meta{font-size:15px;color:var(--ink-3)}
.cl-body h2{font-size:clamp(32px,3.8vw,54px);margin-top:14px;letter-spacing:-.04em}
.cl-body p{margin-top:14px}
.cl-body .figures{margin-top:28px}
.cl-body .textlink{margin-top:26px;color:var(--deep-teal)}
.case-lead:hover .textlink{color:var(--ink)}
.note-sm{font-size:14px;color:var(--ink-3)!important;margin-top:10px!important}
.also{margin-top:clamp(64px,8vw,104px);display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:24px;padding-top:28px;border-top:1px solid rgba(10,22,34,.15)}
.also h3{font-size:22px}
.also ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:18px 32px}
.also b{display:block;font:600 18px var(--f-display);color:var(--ink);letter-spacing:-.015em}
.also span{font-size:15px;color:var(--ink-3)}
@media(max-width:900px){
  .two-col,.chart-grid,.organic,.learned,.case-lead,.also{grid-template-columns:1fr}
  .learned h2{position:static}
  .case-meta{grid-template-columns:1fr 1fr}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .kpi,.kpi:not(:nth-child(4n+1)){padding:22px 16px 22px 0;border-left:0}
  .kpi:nth-child(even){padding-left:16px;border-left:1px solid var(--line)}
  .index .row.built{grid-template-columns:1fr;gap:10px}
  .cl-visual{aspect-ratio:16/10}
}
@media(max-width:520px){
  .bar-row{grid-template-columns:1fr auto;gap:6px 12px}
  .bar-row .bt{grid-column:1/-1;grid-row:2}
  .also ul{grid-template-columns:1fr}
}
.chart-grid>*,.two-col>*,.learned>*,.case-lead>*{min-width:0}
@media(max-width:640px){
  .figures{grid-template-columns:1fr 1fr}
  .figure:nth-child(odd){padding:18px 14px 18px 0;border-right:1px solid rgba(10,22,34,.15)}
  .figure:nth-child(even){padding:18px 0 18px 14px}
  .figure b{font-size:clamp(30px,9vw,40px)}
}
.form-msg.fallback{display:grid;gap:16px;color:var(--spray);max-width:60ch}
.form-msg .fb-row{display:flex;flex-wrap:wrap;gap:10px}
.form-msg .fb-row .btn{min-height:46px;padding:13px 20px;font-size:15px}

/* BooyaKa illustration */
.cl-visual.bk-ill{background:#ffdd00}
.cl-visual.bk-ill img{object-fit:cover;object-position:center}
.case-page .page-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);column-gap:clamp(32px,5vw,72px);align-items:start}
.case-page .page-hero .wrap>*{grid-column:1}
.case-page .page-hero h1{font-size:clamp(44px,5.6vw,92px)}
.case-ill{grid-column:2!important;grid-row:1/span 7;margin-top:8px;border-radius:24px;overflow:hidden;box-shadow:0 50px 100px -50px rgba(0,0,0,.9);aspect-ratio:1}
.case-ill img{width:100%;height:100%;object-fit:cover}
.case-page .case-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){
  .case-page .page-hero .wrap{grid-template-columns:1fr}
  .case-ill{grid-column:1!important;grid-row:auto;margin-top:36px;max-width:520px}
}

/* Mobile hero: the headline stands on the water.
   The wave moves up from below the proof card to directly under the h1,
   so the one loud element is in the first screen. Source order unchanged. */
@media(max-width:640px){
  .hero{min-height:0;padding-top:116px}
  .hero-copy{display:contents}
  .hero-copy>.kicker{order:1}
  .hero-copy>h1{order:2}
  .hero .sea{order:3}
  .hero .flow-strip{order:4}
  .hero-copy>.hero-row{order:5}
  .hero-copy>.kicker,.hero-copy>h1,.hero-copy>.hero-row,.hero .flow-strip{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
  .hero h1{position:relative;z-index:2;font-size:clamp(54px,15.5vw,72px);max-width:none;text-shadow:0 2px 30px rgba(4,10,18,.55)}
  .hero h1 .soft{color:#c4d6de}
  .hero .sea{flex:none;min-height:0;height:clamp(230px,66vw,300px);margin-top:-64px;z-index:1}
  .hero .sea img{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 42%,#000 74%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 42%,#000 74%,transparent 100%)}
  .hero .sea::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 45% at 58% 46%,rgba(92,242,214,.10),transparent 70%)}
  .hero .flow-strip{position:relative;inset:auto;z-index:2;margin-top:-30px;flex-wrap:wrap;gap:6px 10px;font-size:11.5px;color:var(--spray)}
  .hero-copy>.hero-row{margin-top:30px;padding-bottom:clamp(56px,14vw,80px)}
  .hero .lede{font-size:18px;color:var(--foam)}
  .hero-text .lede-2{font-size:16.5px}
}

/* Real photos */
.step-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;margin-bottom:24px;box-shadow:0 18px 40px -26px rgba(0,0,0,.55)}
.side-photo{margin:0}
.side-photo img{display:block;width:100%;height:auto;aspect-ratio:8/7;max-height:320px;object-fit:cover;border-radius:14px}
.side-photo figcaption{font-size:13.5px;margin-top:10px;opacity:.75}
.final .sea-bg.ij img{object-position:center 62%}
.foot h2.foot-h{font:500 14px var(--f-body);color:var(--mist);margin-bottom:16px;letter-spacing:normal}
/* Final CTA over the IJ photo: keep body text readable (WCAG AA) */
.final .sea-bg.ij::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,18,0) 0%,rgba(4,10,18,.45) 55%,rgba(4,10,18,.25) 100%);pointer-events:none}
.final .wrap p{color:#dfe9ee;text-shadow:0 1px 18px rgba(4,10,18,.85),0 0 2px rgba(4,10,18,.6)}
.itym-word{background:#4A70F0;color:#fff;letter-spacing:.02em}
.case-ill svg text{font-family:var(--f-body)}
.case-sm .textlink{display:inline-block;margin-top:16px}
.page-hero .lede-2{margin-top:18px;font-size:clamp(16px,1.25vw,18px);line-height:1.65;color:var(--mist);max-width:60ch}
.kpi-group{font:600 15px/1.2 var(--f-body);letter-spacing:.02em;color:var(--mist);margin:40px 0 0;padding-bottom:12px}
.kpi-group:first-of-type{margin-top:8px}
.learned.dark .essay p{color:var(--spray)}
.learned.dark .essay p:first-child::first-line{color:var(--foam)}
.essay a{text-decoration:underline;text-underline-offset:3px}
.final h2.final-q{font-size:clamp(34px,4.6vw,64px);max-width:20ch;line-height:1.05}
.case-page .learned h2{font-size:clamp(34px,3.6vw,54px);line-height:1.02;hyphens:manual}

.case-photos{display:flex;gap:clamp(16px,2.5vw,32px);align-items:flex-start;margin-top:clamp(48px,6vw,88px)}
.case-photos figure{margin:0;flex:var(--ar,1) 1 0;min-width:0}
.case-photos img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 30px 60px -40px rgba(0,0,0,.8)}
.case-photos .capt{margin-top:12px}
@media (max-width:720px){.case-photos{flex-direction:column}.case-photos figure{flex:none;width:100%}}