@font-face{font-family:"Inter";src:url("/assets/fonts/inter-latin-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("/assets/fonts/bricolage-grotesque-latin-var.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
/* Light, illustrated and animated. Pictures tell the story; words are headlines.
   Navy ink, raidPoint cyan for the answer, coral for the threat, sunny yellow for the people on your side. */
:root{
  --paper:#f7f5f0;
  --mist:#e9f4f9;
  --white:#ffffff;
  --navy:#10233a;
  --body:#41536a;
  --mute:#5b6979;
  --line:#dfe5ea;
  --cyan:#1aa3d9;
  --cyan-ink:#0a6f9f; /* cyan for text and behind white text: 5.1:1 on paper, 5.5:1 under white (WCAG 1.4.3) */
  --cyan-soft:#d3eefa;
  --red:#ef4d55;
  --red-ink:#c9303a; /* red for text and behind white text: 4.9:1 on paper, 5.3:1 under white */
  --red-soft:#ffe0e1;
  --amber:#f59f2a;
  --amber-soft:#ffecc9;
  --sun:#ffc845;
  --skin:#f3c9a8;
  --display:"Bricolage Grotesque","Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --pop:cubic-bezier(.34,1.56,.64,1);
  --nav:70px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--body);font:400 1.0625rem/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyan-ink);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);color:var(--navy);margin:0;text-wrap:balance;letter-spacing:-.03em}
p{margin:0;text-wrap:pretty}

.btn{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 26px;border-radius:14px;font:700 1.02rem/1 var(--font);text-decoration:none;cursor:pointer;border:2px solid var(--navy);background:var(--navy);color:#fff;box-shadow:0 5px 0 var(--cyan);transition:transform .15s var(--ease),box-shadow .15s var(--ease);-webkit-tap-highlight-color:transparent;user-select:none;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--cyan)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--cyan)}
.btn svg{width:17px;height:17px}
.btn.small{height:44px;padding:0 18px;font-size:.92rem;box-shadow:0 4px 0 var(--cyan)}

/* wordmark */
.wm{display:inline-flex;align-items:center;gap:.32em;font-size:23px;letter-spacing:-.02em;line-height:1;white-space:nowrap;color:var(--navy);text-decoration:none;font-family:var(--font)}
.wm .mk{width:1.2em;height:1.2em;overflow:visible}
.wm .t{font-weight:400}.wm .t b{font-weight:700}
.wm .di{position:relative;display:inline-block}
.wm .di::after{content:"";position:absolute;left:50%;top:.04em;width:.18em;height:.18em;margin-left:-.09em;border-radius:50%;background:var(--cyan)}
.mk .o{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.mk .d{fill:var(--cyan)}

.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;height:var(--nav);background:rgba(247,245,240,.97);border-bottom:2px solid transparent;transition:border-color .3s}
.nav.scrolled{border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:100%}
.nav ul{display:flex;gap:30px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{font-size:.95rem;font-weight:600;color:var(--navy);text-decoration:none}
.nav ul a:hover{color:var(--cyan-ink)}
@media (max-width:860px){.nav ul{display:none}.nav .btn{margin-left:auto}}

/* shared illustration styling */
.scene,.mini,.gauge{overflow:visible}
.ol{stroke:var(--navy);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.ink{fill:var(--navy)}
.skin{fill:var(--skin)}
.hair{fill:var(--navy)}
.hairf{fill:var(--navy)}
.shirt{fill:var(--sun)}
.it{fill:#fff}
.rg{fill:none;stroke:var(--navy);stroke-width:3}
.rd{fill:var(--cyan)}
[class~="ol"][fill="none"]{fill:none}

/* ===================== HERO ===================== */
.hero{padding-block:clamp(28px,5vw,64px) clamp(56px,7vw,96px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.copy{display:grid;gap:22px;justify-items:start}
.kicker{display:inline-flex;gap:8px;align-items:center;font-weight:700;color:var(--red-ink);font-size:clamp(1rem,1.3vw,1.15rem)}
.hero h1{font-size:clamp(2.9rem,5.2vw,4.7rem);line-height:.98;font-weight:800}
.hero h1 em{font-style:normal;color:var(--cyan-ink);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.12em;border-radius:99px;background:var(--sun);z-index:-1;transform-origin:0 50%;transform:scaleX(0);transition:transform .8s var(--ease) .5s}
.ready .hero h1 em::after{transform:none}
.lead{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.5;color:var(--body);max-width:30ch}
.note{font-size:.92rem;color:var(--mute);font-weight:500}
.cta-row{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}

#heroScene .blob{fill:var(--mist)}
#heroScene .spark{fill:none;stroke:var(--red);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
#heroScene.calm .spark{stroke:var(--cyan)}
#heroScene .chair{fill:#c8d5df;stroke:var(--navy);stroke-width:3}
#heroScene .lap{fill:#e4ebf1}
#heroScene .desk{fill:var(--navy)}
#heroScene .leaf{fill:#3fb68b;stroke:var(--navy);stroke-width:3}
#heroScene .pot{fill:var(--red)}
#heroScene .mug{fill:var(--cyan)}
#heroScene .eye{fill:var(--navy)}
#heroScene .mouth{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round;transition:opacity .3s}
#heroScene .drop{fill:#6cc7ef;stroke:var(--navy);stroke-width:2;transition:opacity .3s}
#heroScene .arm{fill:none;stroke:var(--sun);stroke-width:15;stroke-linecap:round}
#heroScene .armo{fill:none;stroke:var(--navy);stroke-width:21;stroke-linecap:round}
#heroScene .arms{transition:opacity .25s}
#heroScene .steam{fill:none;stroke:var(--mute);stroke-width:2.5;stroke-linecap:round;opacity:0;transition:opacity .6s}
#heroScene .mark{opacity:0;transform-box:fill-box;transform-origin:center}
#heroScene .lapmark .rg{stroke:var(--mute);transition:stroke .4s}
#heroScene .lapmark .rd{fill:var(--mute);transition:fill .4s}
#heroScene .sweep{fill:none;stroke:var(--cyan);stroke-width:4;opacity:0;transform-box:fill-box;transform-origin:center}
.bub{transition:transform .5s var(--ease),opacity .45s}
.bub.d0{--d:0s}.bub.d1{--d:.25s}.bub.d2{--d:.5s}.bub.d3{--d:.75s}.bub.d4{--d:1s}.bub.d5{--d:1.2s}.bub.d6{--d:1.45s}.bub.d7{--d:1.7s}.bub.d8{--d:1.9s}
.bub .bi{transform-box:fill-box;transform-origin:50% 100%;transform:scale(0);transition:transform .45s var(--pop) var(--d)}
.bub rect{stroke:var(--navy);stroke-width:2.5}
.bub .tail{stroke:var(--navy);stroke-width:2.5;stroke-linejoin:round}
.bub text{font:800 13px/1 var(--font);fill:#fff}
.bub.c rect,.bub.c .tail{fill:var(--red-ink)}
.bub.h rect,.bub.h .tail{fill:var(--amber)}.bub.h text{fill:var(--navy)}
.bub.n rect,.bub.n .tail{fill:#fff}.bub.n text{fill:var(--navy)}
.plancard{opacity:0;transform-box:fill-box;transform-origin:0 50%;transition:opacity .4s,transform .6s var(--pop)}
.plancard .card{fill:#fff}
.plancard .ch{font:800 15px/1 var(--display);fill:var(--navy)}
.plancard .cs{font:600 11px/1 var(--font);fill:var(--mute)}
.plancard .row text{font:600 12.5px/1 var(--font);fill:var(--navy)}
.box{fill:#fff;stroke:var(--navy);stroke-width:2.5;transition:fill .3s}
.tk{fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .35s var(--ease) .1s}
.row.done .box{fill:var(--cyan-ink)}.row.done .tk{stroke-dashoffset:0}
/* phases */
#heroScene.noise .bub .bi{transform:scale(1);animation:wob 1.6s ease-in-out calc(var(--d) + .5s) infinite alternate}
@keyframes wob{to{transform:scale(1) rotate(-4deg)}}
#heroScene.noise .arms.down,#heroScene.calm .arms.up{opacity:0}
#heroScene.noise .mouth.smile,#heroScene.calm .mouth.worry,#heroScene.calm .drop{opacity:0}
#heroScene.noise .person{animation:shake .5s ease-in-out 1.2s infinite alternate}
@keyframes shake{to{transform:translateX(2px)}}
#heroScene.sweeping .sweep{animation:sweep 1s var(--ease) forwards}
@keyframes sweep{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(5)}}
#heroScene.sweeping .mark,#heroScene.calm .mark{opacity:1;animation:popin .5s var(--pop)}
@keyframes popin{from{transform:scale(.2)}to{transform:scale(1)}}
#heroScene.sweeping .bub,#heroScene.calm .bub{opacity:0;transform:translateY(80px)}
#heroScene.calm .bub .bi{transform:scale(1)}
#heroScene.calm .plancard{opacity:1}
#heroScene.calm .steam{opacity:1;animation:steam 2s ease-in-out infinite}
@keyframes steam{50%{transform:translateY(-4px)}}
#heroScene.calm .lapmark .rg{stroke:var(--navy)}#heroScene.calm .lapmark .rd{fill:var(--cyan)}
.person{transform-box:fill-box}

/* ===================== ATTACK SCENE ===================== */
.attack{background:var(--navy);color:#dfe8f0;border-radius:36px;margin-inline:max(12px,env(safe-area-inset-left,0px));position:relative}
.atkstory{position:relative;height:320vh}
.pin{position:sticky;top:calc(var(--nav) + env(safe-area-inset-top,0px));height:calc(100svh - var(--nav) - env(safe-area-inset-top,0px));display:grid;align-content:center;gap:clamp(20px,4vh,40px);overflow:hidden}
.pin>.wrap{width:100%}
.attack h2{color:#fff;font-size:clamp(2rem,4.6vw,3.8rem);line-height:1;font-weight:800;display:grid}
.attack h2 span{grid-area:1/1;transition:opacity .4s var(--ease),transform .4s var(--ease);opacity:0;transform:translateY(14px)}
.attack h2 span.on{opacity:1;transform:none}
.attack h2 .t2{color:var(--sun)}.attack h2 .t3{color:#7fd3f5}
.tag{display:inline-flex;gap:8px;align-items:center;font:700 .8rem/1 var(--font);letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border-radius:99px;justify-self:start;transition:background-color .3s,color .3s}
.tag.bad{background:var(--red-ink);color:#fff}
.tag.good{background:var(--cyan-ink);color:#fff}
.camera{position:relative;overflow:hidden}
#atkScene{width:100%;height:auto}
#atkScene .bld{fill:#1b3350}
#atkScene .roof{fill:#26476b}
#atkScene .sign{font:800 15px/1 var(--display);fill:#cfe0ee;letter-spacing:.04em}
#atkScene .rbg{fill:#f4f1ea;transition:fill .35s}
#atkScene .wall,#atkScene .floor{fill:#0b1a2b}
#atkScene .trail{stroke:var(--red);stroke-width:4;stroke-linecap:round;stroke-dasharray:2 12}
#atkScene .rl{font:800 15px/1 var(--display);fill:var(--navy)}
#atkScene .it{fill:#fff}
#atkScene .hole{fill:#f4f1ea}
#atkScene .keyb{fill:var(--sun)}
#atkScene .wire{stroke:var(--navy);stroke-width:3;fill:none}
#atkScene .hook{fill:none;stroke:var(--red);stroke-width:4;stroke-linecap:round}
#atkScene .crack{fill:none;stroke:var(--red);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .3s}
#atkScene .badge{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .25s,transform .35s var(--pop)}
#atkScene .badge circle{stroke:var(--navy);stroke-width:3}
#atkScene .badge.bad circle{fill:var(--red-ink)}#atkScene .badge.good circle{fill:var(--cyan-ink)}
#atkScene .badge text{font:900 17px/1 var(--font);fill:#fff}
#atkScene .badge path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#atkScene .room.hit .rbg{fill:var(--red-soft)}
#atkScene .room.hit .bad{opacity:1}
#atkScene .room.safe .rbg{fill:var(--cyan-soft)}
#atkScene .room.safe .good{opacity:1}
#atkScene .room.wreck .crack{opacity:1}
#atkScene .door{opacity:0;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.1);transition:opacity .2s,transform .45s var(--pop)}
#atkScene .door>rect{fill:var(--cyan);stroke:var(--navy);stroke-width:3}
#atkScene .lock{fill:var(--sun);stroke:var(--navy);stroke-width:2.5}
#atkScene .shack{fill:none;stroke:var(--navy);stroke-width:3}
#atkScene.locked .door{opacity:1;transform:none}
#atkScene .ally{opacity:0;transition:opacity .4s}
#atkScene.locked .ally{opacity:1}
#atkScene .hood{fill:#2a2f3a;stroke:#05080d;stroke-width:3;stroke-linejoin:round}
#atkScene .face{fill:#0b0f15}
#atkScene .eyes{fill:var(--red)}
#atkScene .leg{fill:#05080d}
#atkScene .atk{transition:opacity .3s}
#atkScene .atk.gone{opacity:0}
#atkScene .atk.walk .l1{animation:stepA .36s ease-in-out infinite alternate}
#atkScene .atk.walk .l2{animation:stepA .36s ease-in-out infinite alternate-reverse}
#atkScene .atk.walk .atkb{animation:bob .36s ease-in-out infinite alternate}
#atkScene .leg{transform-box:fill-box;transform-origin:50% 0}
@keyframes stepA{from{transform:rotate(18deg)}to{transform:rotate(-18deg)}}
@keyframes bob{to{transform:translateY(-3px)}}
#atkScene .q{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .2s,transform .4s var(--pop);transform:scale(.3)}
#atkScene .q circle{fill:#fff;stroke:var(--navy);stroke-width:3}
#atkScene .q text{font:900 19px/1 var(--font);fill:var(--navy)}
#atkScene .atk.stuck .q{opacity:1;transform:none}
#atkScene .atk.stuck .atkb{animation:bump .5s var(--ease)}
@keyframes bump{30%{transform:translateX(-14px)}}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.stagecap{font:600 clamp(1rem,1.3vw,1.15rem)/1.4 var(--font);color:#dfe8f0}
.stagecap b{color:#fff}
.ex{font:600 .74rem/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:#8ea3b8}
@media (max-width:900px){
  .attack{border-radius:24px;margin-inline:8px}
  #atkScene{width:760px;max-width:none}
  .camera{margin-inline:calc(-1 * max(24px,env(safe-area-inset-left,0px)))}
}

/* ===================== HOW IT WORKS ===================== */
.band{padding-block:clamp(80px,10vw,140px)}
.sec-h{font-size:clamp(2.2rem,5vw,4rem);line-height:1;font-weight:800;max-width:16ch;margin-bottom:clamp(36px,5vw,64px)}
.sec-h span{color:var(--cyan-ink)}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.tile{background:#fff;border:2px solid var(--navy);border-radius:24px;padding:18px 18px 22px;display:grid;align-content:start;gap:6px;box-shadow:6px 6px 0 var(--navy);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.tile:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--navy)}
.tile .art{background:var(--mist);border-radius:16px;padding:10px;margin-bottom:10px}
.tile:nth-child(2) .art{background:var(--amber-soft)}
.tile:nth-child(3) .art{background:#e6f6ee}
.tile:nth-child(4) .art{background:var(--red-soft)}
.tile .num{font:800 .8rem/1 var(--font);color:var(--cyan-ink)}
.tile h3{font-size:1.6rem;font-weight:800}
.tile p{font-size:.98rem;color:var(--body);line-height:1.45}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tiles{grid-template-columns:1fr}}
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--pop)}
.js .rv.in{opacity:1;transform:none}
.tiles .rv:nth-child(2){transition-delay:.08s}.tiles .rv:nth-child(3){transition-delay:.16s}.tiles .rv:nth-child(4){transition-delay:.24s}
/* mini scenes loop only while visible */
.mini .scr{fill:#fff}
.mini .clip{fill:var(--sun)}
.mini .flow{fill:none;stroke:var(--cyan);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:3 9}
.play .mini .flow{animation:flow 1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-24}}
.mini .eye2{transform-box:fill-box;transform-origin:center}
.play .mini .eye2{animation:blink 4s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.mini .rad{fill:none;stroke:#9ccfe6;stroke-width:2}
.mini .sweepw{fill:rgba(26,163,217,.35)}
.mini .sweepw{transform-box:fill-box;transform-origin:0% 100%}
.play .mini .sweepw{animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.mini .blip{fill:var(--red);opacity:0;transform-box:fill-box;transform-origin:center}
.play .mini .blip{animation:blip 2.4s ease-out infinite}
.play .mini .b2{animation-delay:.8s}.play .mini .b3{animation-delay:1.6s}
@keyframes blip{0%{opacity:0;transform:scale(.3)}10%{opacity:1;transform:scale(1.4)}40%{opacity:1;transform:scale(1)}70%,100%{opacity:0}}
.mini .pdot{fill:var(--cyan)}.mini .pdot.red{fill:var(--red)}
.mini .bar{fill:#cdd7e0}.mini .bar.red{fill:#f7a3a7}
.mini .prow{transform:translateY(56px)}
.mini .pb{transform:translateY(92px)}
.mini .pc{transform:translateY(128px)}
.play .mini .pa{animation:pa 4s var(--ease) infinite}
.play .mini .pb{animation:pb 4s var(--ease) infinite}
.play .mini .pc{animation:pc 4s var(--ease) infinite}
@keyframes pa{0%,30%{transform:translateY(56px)}45%,85%{transform:translateY(92px)}100%{transform:translateY(56px)}}
@keyframes pb{0%,30%{transform:translateY(92px)}45%,85%{transform:translateY(128px)}100%{transform:translateY(92px)}}
@keyframes pc{0%,30%{transform:translateY(128px)}45%,85%{transform:translateY(56px)}100%{transform:translateY(128px)}}
.mini .tk.on{stroke-dashoffset:0}
.mini .lastfix .box{transition:fill .2s}
.mini .beam{fill:var(--cyan);opacity:.85}
.play .mini .beam{animation:beam 3s ease-in-out infinite}
@keyframes beam{0%{transform:translateY(0)}50%{transform:translateY(88px)}100%{transform:translateY(0)}}
.play .mini .lastfix .box{animation:boxon 3s steps(1) infinite}
.play .mini .tk.late{animation:tkon 3s steps(1) infinite}
@keyframes boxon{0%,45%{fill:#fff}50%,95%{fill:var(--cyan)}100%{fill:#fff}}
@keyframes tkon{0%,45%{stroke-dashoffset:16}50%,95%{stroke-dashoffset:0}100%{stroke-dashoffset:16}}
.mini .box{stroke-width:2.5}

/* ===================== BOARD ===================== */
.board{background:var(--mist);border-radius:36px;margin-inline:max(12px,env(safe-area-inset-left,0px))}
.board-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.board .sec-h{margin-bottom:18px}
.gauge .g{fill:none;stroke-width:26;stroke-linecap:round}
.gauge .g1{stroke:var(--red)}.gauge .g2{stroke:var(--sun)}.gauge .g3{stroke:var(--cyan)}
.gauge .gl{font:800 15px/1 var(--display)}.gauge .gl.red{fill:var(--red-ink)}.gauge .gl.cy{fill:var(--cyan-ink)}
.gauge .needle path{fill:var(--navy)}
.gauge .needle .hub{fill:var(--sun);stroke:var(--navy);stroke-width:4}
.gauge .needle{transform-box:view-box;transition:transform 2s var(--pop)}
.gauge .needle{transform:translate(160px,170px) rotate(-62deg)}
.gauge.in .needle{transform:translate(160px,170px) rotate(62deg)}
.gwrap{background:#fff;border:2px solid var(--navy);border-radius:28px;box-shadow:8px 8px 0 var(--navy);padding:clamp(20px,3vw,36px)}
.gwrap .gt{font:800 1.05rem/1.2 var(--display);color:var(--navy);margin-bottom:8px}
.ticks{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ticks li{font:700 .9rem/1 var(--font);color:var(--navy);background:#fff;border:2px solid var(--navy);border-radius:99px;padding:10px 14px}
@media (max-width:860px){.board-grid{grid-template-columns:1fr}.board{border-radius:24px;margin-inline:8px}}

/* ===================== CTA ===================== */
.talk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:860px){.talk-grid{grid-template-columns:1fr}}
.talk-copy{display:grid;gap:18px;justify-items:start}
.talk-copy .sec-h{margin-bottom:0}
.consult{width:min(100%,380px);margin-top:8px}
.mail{font-weight:600;color:var(--body)}
.mail b{color:var(--navy)}
.mailcard{background:#fff;border:2px solid var(--navy);border-radius:24px;box-shadow:8px 8px 0 var(--navy);padding:clamp(22px,3vw,36px);display:grid;gap:14px;justify-items:start}
.mc-k{font:800 1.1rem/1.2 var(--display);color:var(--navy)}
.mc-mail{font:800 clamp(1.3rem,2.6vw,1.9rem)/1.15 var(--display);color:var(--cyan-ink);text-decoration:none;word-break:break-word}
.mc-mail:hover{text-decoration:underline}
.mc-n{color:var(--body)}
form{background:#fff;border:2px solid var(--navy);border-radius:24px;box-shadow:8px 8px 0 var(--navy);padding:clamp(20px,3vw,32px);display:grid;gap:16px}
.field{display:grid;gap:7px;min-width:0}
.field label,.field legend{font-size:.88rem;font-weight:700;color:var(--navy);padding:0}
.field input[type=text],.field input[type=email]{height:50px;border-radius:12px;border:2px solid var(--line);background:var(--paper);color:var(--navy);font:500 1rem/1 var(--font);padding:0 14px;width:100%;min-width:0;transition:border-color .2s}
.field input:focus{outline:none;border-color:var(--cyan)}
.field input:user-invalid{border-color:var(--red)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media (max-width:520px){.two{grid-template-columns:1fr}}
fieldset.field{border:0;padding:0;margin:0}
.seg{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--line);border-radius:12px;overflow:hidden;position:relative}
.seg input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.seg label{font:600 .92rem/1 var(--font);color:var(--body);padding:14px 8px;text-align:center;cursor:pointer;transition:background-color .2s,color .2s;user-select:none}
.seg input:checked+label{background:var(--navy);color:#fff}
.seg input:focus-visible+label{outline:3px solid var(--cyan);outline-offset:-3px}
form .btn{justify-content:center}
.privacy{font-size:.82rem;color:var(--mute)}
.consult .cshirt{fill:var(--cyan)}
.consult .carmo{stroke:var(--navy);stroke-width:21;fill:none;stroke-linecap:round}
.consult .carm{stroke:var(--cyan);stroke-width:15;fill:none;stroke-linecap:round}
.consult .chead{fill:var(--red-ink)}
.consult .ct1{font:800 13px var(--display);fill:#fff}
.consult .ct2{font:800 34px var(--display);fill:var(--navy)}
.consult .ct3{font:700 12px var(--font);fill:var(--mute)}
.consult .wave{transform-box:fill-box;transform-origin:0% 100%}
.consult.in .wave{animation:wave 1.6s ease-in-out .4s 3}
@keyframes wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(10deg)}}
.form-msg{font-size:.9rem;font-weight:600;color:var(--cyan);min-height:1.4em}

footer{padding-block:40px 52px;border-top:2px solid var(--line)}
.foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 48px;align-items:end}
.foot-l{display:grid;gap:16px}
.foot-l p{font-size:.82rem;color:var(--mute);max-width:60ch;line-height:1.65}
.certs{display:flex;align-items:center;gap:18px}
.iso{display:grid;justify-items:center;line-height:1.1;padding:8px 12px;border:2px solid var(--navy);border-radius:10px;background:#fff}
.iso b{font-size:.95rem;font-weight:800;color:var(--navy)}
.iso span{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--body);margin-top:3px;font-weight:600}
.crest{width:48px;height:48px}
.flink{font-size:.82rem;font-weight:600;color:var(--body);justify-self:start}
@media (max-width:700px){.foot{grid-template-columns:1fr;align-items:start}}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero .art-col{margin-inline:-12px;max-width:520px;justify-self:center;width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* Motion off: set by site.js when reduced motion is on (followed live) or the pause control is pressed (WCAG 2.2.2) */
html.still{scroll-behavior:auto}
.still *,.still *::before,.still *::after{animation:none!important;transition:none!important}
/* The pause control */
.art-col{position:relative}
.motion{position:absolute;right:8px;bottom:0;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:99px;border:2px solid var(--navy);background:#fff;color:var(--navy);font:700 .88rem/1 var(--font);cursor:pointer}
.motion svg{width:14px;height:14px}
.motion .ic-play{display:none}
.motion[aria-pressed="true"] .ic-pause{display:none}
.motion[aria-pressed="true"] .ic-play{display:block}