/* TDRA Consulting — editorial consulting, daylight.
   Forest ink, mint and cream grounds, one lime accent, DM Serif Display over DM Sans.
   Rounded glass, crystal buttons, dark forest used only for bands. */

@font-face{font-family:"DM Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/dm-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/dm-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/dm-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/dm-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"DM Serif Display";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/dm-serif-display-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Serif Display";font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/dm-serif-display-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2")}

:root{
  --forest:#0A382B; --forest2:#0E4938; --mint:#D2E3D6; --lime:#D8FF38; --cream:#E2E0D9; --paper:#E9E8E3; --surface:#F2F1ED; --surface-2:#E4E3DD; --ink:#10231D;
  --bg:var(--paper); --fg:var(--ink); --mute:#476158; --dim:#667B71;
  --accent:var(--lime); --accent-ink:#0E6B4A; --ember:#D9821F; --on-accent:#0A382B;
  --rule:rgba(10,56,43,.14); --line:rgba(10,56,43,.24);
  --glass:linear-gradient(180deg,rgba(244,243,239,.88),rgba(236,235,230,.62));
  --hi:inset 0 1px 0 rgba(255,255,255,.6);
  --shadow:0 24px 54px -30px rgba(10,56,43,.4);
  --r:28px; --r-sm:16px;
  --display:"DM Serif Display",Georgia,"Times New Roman",serif;
  --body:"DM Sans","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gut:clamp(20px,3.4vw,48px);
  --pad:max(var(--gut),calc((100vw - 1600px) / 2));
  --bar:76px;
}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.65;padding-top:var(--bar);overflow-x:hidden;position:relative;color-scheme:light;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--lime);color:var(--forest)}
:focus-visible{outline:2px solid var(--forest);outline-offset:3px;border-radius:8px}
.dark :focus-visible{outline-color:var(--lime)}
.skip{position:absolute;left:-999px;top:8px;background:var(--lime);color:var(--forest);padding:8px 14px;border-radius:999px;z-index:100}
.skip:focus{left:8px}
.lantern-light,.grain,.sec-no{display:none}

/* type */
.d{font-family:var(--display);font-weight:400;line-height:.98;letter-spacing:-.03em;margin:0;text-wrap:balance}
.d em,.it{font-style:italic}
.lab{font-size:13.5px;font-weight:500;color:var(--dim);line-height:1.5}
.num{font-variant-numeric:tabular-nums}
main>section{padding:clamp(72px,9vw,140px) var(--pad);position:relative}
.cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.sec-h{font-size:clamp(40px,6vw,96px);grid-column:1/-1;max-width:14ch}
.body-l{max-width:54ch;font-size:clamp(18px,1.5vw,21px);margin:28px 0 0;color:var(--mute)}
.dark{--fg:#F4FAF2;--mute:rgba(244,250,242,.72);--dim:rgba(244,250,242,.55);--rule:rgba(255,255,255,.16);--line:rgba(255,255,255,.28);--accent-ink:var(--lime);color:var(--fg)}
.cream{background:var(--cream)}

/* surfaces */

/* ---------- header ---------- */
header.site{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(233,232,227,.97);box-shadow:0 1px 0 var(--rule)}
header.site.scrolled{box-shadow:0 8px 30px rgba(10,56,43,.1)}
.nav{height:var(--bar);padding-inline:max(18px,calc((100vw - 1600px) / 2 + 18px));display:flex;align-items:center;gap:clamp(8px,1.6vw,22px);position:relative;z-index:2;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:8px;background:none;border:0;border-radius:12px;cursor:pointer}
.burger span{display:block;height:2px;width:100%;background:var(--forest);border-radius:2px;transition:transform .3s,opacity .3s}
header.site.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.site.open .burger span:nth-child(2){opacity:0}
header.site.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.brand{display:block;line-height:0;margin-right:auto;padding-left:6px}
.brand img{height:42px;width:auto}
.brand .logo-on-dark{display:none}
@media(max-width:1200px){.brand img{height:34px}}
@media(max-width:520px){.brand img{height:30px}}
.links{display:flex;gap:clamp(18px,2.6vw,40px);position:absolute;left:50%;transform:translateX(-50%)}
.nav a.l{text-decoration:none;padding:8px 2px;color:var(--ink);border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
.nav a.l:hover{color:var(--accent-ink)}
.nav a.l[aria-current="page"]{border-color:var(--forest)}
.talk{position:relative;isolation:isolate;overflow:hidden;text-decoration:none;color:var(--forest);padding:12px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.7);background:linear-gradient(180deg,#F0FFA6,#D8FF38 50%,#B7E41C);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -6px 10px rgba(110,150,0,.3),0 8px 20px -8px rgba(150,190,0,.6);font-size:12px;letter-spacing:.12em;transition:transform .25s}
.talk:hover{transform:translateY(-1px)}
.menu-panel{position:fixed;inset:0;z-index:1;background:var(--forest);color:#fff;padding:calc(var(--bar) + 40px) var(--pad) 48px;overflow-y:auto;transform:translateY(-104%);transition:transform .5s cubic-bezier(.77,0,.18,1);visibility:hidden}
header.site.open .menu-panel{transform:none;visibility:visible}
.menu-panel nav{display:grid;gap:6px}
.menu-panel nav a{font-family:var(--display);font-size:clamp(44px,8vw,104px);line-height:1.05;letter-spacing:-.03em;text-decoration:none;color:#fff;transition:color .2s;text-transform:none;font-weight:400}
.menu-panel nav a:hover{color:var(--lime)}
.menu-meta{margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.2);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;font-size:17px;letter-spacing:0;text-transform:none;font-weight:400}
.menu-meta small{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--mint);opacity:.7;margin-bottom:6px}
.menu-meta a{color:#fff;text-decoration:none}
.menu-meta a:hover{color:var(--lime)}
@media(max-width:960px){.links{display:none}}
@media(max-width:520px){.talk{display:none}}

/* notice */
.notice{margin:14px var(--pad) 0;background:var(--surface);border:1px solid var(--rule);border-radius:18px;font-size:13.5px;box-shadow:var(--hi)}
.notice-inner{display:flex;gap:14px;align-items:flex-start;padding:11px 16px 11px 14px}
.notice[hidden]{display:none}
.notice-tag{flex:none;border-radius:999px;background:rgba(217,130,31,.12);border:1px solid rgba(217,130,31,.4);color:#8A4F08;font-size:12px;font-weight:700;padding:2px 11px;margin-top:1px}
.notice p{margin:0;flex:1;line-height:1.5;color:var(--mute)}
.notice a{text-underline-offset:3px;color:var(--ink)}
.notice-close{flex:none;background:none;border:0;color:var(--mute);font-size:22px;line-height:1;cursor:pointer;padding:0 4px}

/* ---------- buttons: crystal lime ---------- */
.hero-actions{display:flex;gap:14px 28px;flex-wrap:wrap;align-items:center;margin-top:36px}
.btn,.cta{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 13px var(--body);letter-spacing:.12em;text-transform:uppercase;padding:19px 34px;border-radius:999px;text-decoration:none;color:var(--forest);cursor:pointer;border:1px solid rgba(255,255,255,.75);
  background:linear-gradient(180deg,#F2FFAE 0%,#D8FF38 48%,#B5E31A 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -9px 16px rgba(110,150,0,.32),0 14px 32px -8px rgba(150,195,0,.65),0 0 0 5px rgba(216,255,56,.22);
  transition:transform .25s,box-shadow .25s,filter .25s}
.btn::before,.cta::before{content:"";position:absolute;z-index:-1;left:7%;right:7%;top:2px;height:48%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.08))}
.btn::after,.cta::after{content:"";position:absolute;z-index:-1;top:-10%;bottom:-10%;left:-55%;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);transition:left .75s cubic-bezier(.2,.7,.2,1)}
.btn:hover,.cta:hover{transform:translateY(-2px);filter:brightness(1.04)}
.btn:hover::after,.cta:hover::after{left:125%}
.btn:active{transform:none}
.textlink{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:6px 2px;border-radius:8px}
.textlink::after{content:"";width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .25s}
.textlink:hover::after{transform:translateX(4px) rotate(45deg)}
.dark .textlink{color:#fff}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding:clamp(64px,8vw,128px) var(--pad) clamp(56px,7vw,104px);overflow:hidden;position:relative;isolation:isolate;background:var(--paper)}
.page-hero>*{position:relative;z-index:1}
.page-hero .meta{display:flex;gap:10px 22px;flex-wrap:wrap;margin-bottom:clamp(18px,3vw,34px)}
.page-hero .meta span{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--forest)}
.page-hero h1{font-size:clamp(46px,7.4vw,124px);max-width:15ch;letter-spacing:-.04em;line-height:.92}
.page-hero p.lead{font-size:clamp(18px,1.7vw,23px);line-height:1.55;max-width:46ch;margin:clamp(24px,3vw,40px) 0 0;color:var(--forest);opacity:.8}

/* ---------- home hero ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;padding:clamp(48px,6vw,96px) var(--pad) clamp(36px,5vw,64px);background:var(--paper)}
.hero-stage{position:relative;z-index:1;display:flex;align-items:center;min-height:min(calc(100vh - 260px),680px)}
.huge{font-size:clamp(54px,8vw,136px);line-height:.88;letter-spacing:-.045em;word-spacing:.04em}
.huge span{display:block}
.huge>span:last-child{font-style:italic}
/* intro (intro-flag.js + motion.js): each line rises out of its own mask. clip-path, not overflow, so the layout is identical with and without it; the negative insets keep ascenders, descenders and the italic overhang visible */
.intro .hero .huge>span{clip-path:inset(-.25em -.3em -.14em -.2em)}
.intro .hero .huge>span>span{transform:translateY(125%)}
/* section heading reveal (motion.js): SplitText's line masks clip with overflow, which would cut descenders and italics; use the same clip-path mask as the hero */
[data-reveal] .rl-mask{overflow:visible!important;clip-path:inset(-.25em -.3em -.14em -.2em)}
/* Lenis smooth scrolling (motion.js); the rules from the package's lenis.css */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
.lede{font-size:clamp(19px,1.9vw,26px);line-height:1.4;max-width:24ch;margin:clamp(24px,2.6vw,36px) 0 0;color:var(--forest)}
.chain{position:relative;z-index:1;list-style:none;margin:clamp(24px,3vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.chain li{display:flex;align-items:baseline;gap:12px;font-size:clamp(15px,1.4vw,19px);font-weight:600;padding:16px 22px;border-radius:999px;color:var(--dim);transition:color .35s,border-color .35s,background .35s}
.chain li b{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--dim)}
.chain li.on{color:var(--forest);border-color:rgba(10,56,43,.4);background:linear-gradient(180deg,#F4FFC0,#E4FF70)}
.chain li.on b{color:var(--forest)}
@media(max-width:960px){.hero-stage{min-height:min(calc(100vh - 300px),560px)}.chain{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.chain li{padding:14px 16px}.huge{font-size:clamp(52px,16vw,76px)}}


/* think + decision loop */
.loop{margin-top:clamp(40px,5vw,72px);align-items:stretch;row-gap:28px}
.steps{grid-column:1/6;display:flex;flex-direction:column;gap:10px;justify-content:center}
.step{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:3em 1fr;align-items:baseline;padding:18px 24px 20px;border-radius:24px;border:1px solid transparent;color:var(--dim);transition:color .25s,background .25s,border-color .25s}
.step:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.step b{font-family:var(--mono);font-size:12px;font-weight:500}
.step .w{font-family:var(--display);letter-spacing:-.02em;font-size:clamp(30px,3.4vw,50px);line-height:1.05}
.step .qq{grid-column:2;font-size:clamp(15px,1.4vw,18px);line-height:1.45;max-height:0;overflow:hidden;opacity:0;transition:max-height .35s,opacity .35s,margin .35s;color:var(--mute)}
.step[aria-selected="true"]{color:var(--forest);background:var(--mint);border-color:rgba(10,56,43,.14)}
.step[aria-selected="true"] .qq{max-height:6em;opacity:1;margin-top:8px}
.step:hover{color:var(--forest)}
.stage{grid-column:6/13;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:14px;min-height:480px;border-radius:32px;background:var(--surface)}
.stage svg{width:100%;height:auto;display:block}
.stage .say{font-family:var(--display);letter-spacing:-.02em;font-size:clamp(26px,2.6vw,38px);line-height:1.1;margin:0;text-wrap:balance}
.stage .ev{font-size:15.5px;margin:0;max-width:52ch;color:var(--mute)}
.stage .ev b{color:var(--fg);font-weight:600}
@media(max-width:900px){.steps,.stage{grid-column:1/-1}.stage{min-height:0}}

/* questions: forest band */
#diagnose{background:linear-gradient(135deg,#082D23,#0A382B 55%,#0D4735);color:var(--fg);overflow:hidden}
#diagnose::before{content:"";position:absolute;right:-8vw;top:-10vw;width:40vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(86,156,114,.35),transparent 65%);pointer-events:none}
.qs{margin-top:clamp(36px,5vw,72px);list-style:none;padding:0;position:relative}
.qs li{border-top:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:clamp(20px,2.4vw,34px) 0;transition:padding .25s,color .25s}
.qs li .d{font-size:clamp(28px,4.2vw,64px);letter-spacing:-.03em}
.qs li .lab{align-self:center;text-align:right;max-width:26ch;opacity:0;transition:opacity .2s;color:var(--lime);font-weight:600}
.qs li:hover{padding-left:clamp(10px,2vw,24px)}
.qs li:hover .lab{opacity:1}
.qs li.last{display:block;margin-top:clamp(28px,4vw,56px);padding:clamp(32px,4.6vw,72px);border-radius:36px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));backdrop-filter:blur(16px);box-shadow:var(--hi)}
.qs li.last:hover{padding:clamp(32px,4.6vw,72px)}
.qs li.last .d{font-size:clamp(34px,5.8vw,92px);line-height:.98}
.qs li.last .or{font-size:clamp(16px,1.6vw,20px);color:var(--dim);display:block;margin:18px 0;font-weight:500}
.qs li.last .d u{text-decoration:none;font-style:italic;color:var(--lime)}
@media(hover:none){.qs li .lab{opacity:1}}
@media(max-width:700px){.qs li{grid-template-columns:1fr}.qs li .lab{text-align:left;opacity:1}}

/* evidence: overlapping cards */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(20px,2.4vw,32px);margin-top:clamp(36px,5vw,72px);padding-bottom:70px}
.pcard{position:relative;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pcard:nth-child(even){margin-top:clamp(0px,4vw,64px)}
.pcard:hover{transform:translateY(-8px)}
.pimg{height:clamp(320px,34vw,470px);border-radius:32px}
.g1{background:linear-gradient(135deg,rgba(9,58,44,.15),rgba(8,39,30,.72)),radial-gradient(circle at 30% 20%,#d7ff95,transparent 22%),linear-gradient(135deg,#789e85,#183f31 70%)}
.g2{background:linear-gradient(135deg,rgba(8,45,34,.1),rgba(5,27,21,.7)),radial-gradient(circle at 75% 25%,#b6efcb,transparent 20%),linear-gradient(135deg,#86ad91,#163d30 72%)}
.g3{background:linear-gradient(135deg,rgba(8,45,34,.12),rgba(5,27,21,.78)),radial-gradient(circle at 25% 70%,#d7ff38,transparent 18%),linear-gradient(135deg,#729f87,#12382c 72%)}
.g4{background:linear-gradient(135deg,rgba(8,45,34,.1),rgba(5,27,21,.72)),radial-gradient(circle at 70% 70%,#b9efc9,transparent 20%),linear-gradient(135deg,#7fae95,#10362a 72%)}
.pbody{position:relative;margin:-84px 20px 0;background:var(--surface);border-radius:24px;padding:22px 22px 26px;box-shadow:0 26px 50px -22px rgba(10,56,43,.4)}
.ptile{background:var(--mint);border-radius:18px;padding:14px 18px;margin-bottom:18px}
.proof .n{font-family:var(--display);font-size:clamp(36px,3.6vw,54px);line-height:1;display:block;letter-spacing:-.03em}
.proof p{margin:0;font-size:15px;color:var(--mute);line-height:1.55}
.fineprint{margin:22px 0 0;max-width:70ch;font-size:14px;color:var(--dim)}

/* capabilities: cream grid */
#capabilities{background:var(--cream)}
.caplist{margin-top:clamp(36px,5vw,72px);list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:1px;background:var(--line);border-radius:32px;overflow:hidden;border:1px solid var(--line)}
.caplist li a{display:flex;flex-direction:column;height:100%;min-height:320px;padding:clamp(28px,3vw,44px);background:var(--cream);text-decoration:none;transition:background .3s,color .3s}
.caplist .d{font-size:clamp(28px,2.6vw,40px);line-height:1.05}
.caplist p{margin:16px 0 28px;font-size:15.5px;color:var(--mute);line-height:1.6;max-width:34ch;transition:color .3s}
.caplist li a .go{margin-top:auto;display:inline-flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.caplist li a .go::after{content:"\2197";font-size:22px;letter-spacing:0;transition:transform .25s}
.caplist li a:hover{background:var(--forest);color:#fff}
.caplist li a:hover p{color:rgba(255,255,255,.72)}
.caplist li a:hover .go{color:var(--lime)}
.caplist li a:hover .go::after{transform:translate(3px,-3px)}

/* selected work */
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.wgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px;margin-top:clamp(36px,5vw,64px)}
.wcard{position:relative;isolation:isolate;min-height:520px;border-radius:36px;overflow:hidden;background:var(--forest);color:#fff;padding:clamp(28px,3.4vw,52px);display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none}
.wcard::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.75;background:radial-gradient(circle at 70% 20%,#d8ff38,transparent 14%),radial-gradient(circle at 30% 70%,#4b9e72,transparent 30%),linear-gradient(135deg,#0d4937,#051f18)}
.wcard:nth-child(2)::before{background:radial-gradient(circle at 20% 30%,#b9efc9,transparent 15%),radial-gradient(circle at 80% 75%,#86bd99,transparent 26%),linear-gradient(135deg,#0c4232,#061f18)}
.wcard .tagp{align-self:flex-start;font-size:12.5px;font-weight:700;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px);margin-bottom:auto}
.wcard .d{font-size:clamp(38px,4.6vw,72px);line-height:.95;max-width:12ch;margin-top:40px}
.wcard p{margin:18px 0 0;color:rgba(255,255,255,.75);max-width:38ch;font-size:16px}
.wcard .textlink{color:#fff;margin-top:26px;align-self:flex-start}
.wcard:hover .textlink::after{transform:translateX(4px) rotate(45deg)}

/* who */
#who{background:var(--mint)}

/* ---------- services page ---------- */
.svc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);border-top:1px solid var(--rule);padding-block:clamp(36px,4.6vw,68px)}
.svc-head{grid-column:1/6}
.svc-head .d{font-size:clamp(34px,3.8vw,58px);margin-top:10px}
.svc-head .lab{margin-top:14px;display:block}
.svc-head .lab.num{color:var(--accent-ink);margin-top:0;font-weight:700}
.svc-body{grid-column:6/13}
.wsn{display:grid;gap:0}
.wsn-item{display:grid;grid-template-columns:7.5em 1fr;gap:16px;border-top:1px solid var(--rule);padding:16px 0}
.wsn-item:first-child{border-top:0;padding-top:0}
.wsn-k{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.wsn-v{font-size:17px;line-height:1.55;max-width:48ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tags span{font-size:13.5px;font-weight:500;border:1px solid var(--line);padding:6px 14px;border-radius:999px;color:var(--mute);background:var(--surface)}
@media(max-width:900px){.svc-head,.svc-body{grid-column:1/-1}.svc-head{margin-bottom:18px}}
.flow4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px;margin-top:clamp(36px,5vw,64px)}
.flow4>div{padding:28px 26px 32px;border-radius:var(--r);background:var(--surface)}
.flow4 .d{font-size:clamp(28px,2.6vw,38px)}
.flow4 .no{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--accent-ink);display:block;margin-bottom:22px}
.flow4 p{margin:12px 0 0;font-size:15.5px;color:var(--mute);max-width:30ch}

/* ---------- work page ---------- */
.legend{display:flex;gap:12px 16px;flex-wrap:wrap;align-items:center;margin-top:34px}
.legend span[style]{font-size:14.5px!important;color:var(--forest)!important;opacity:.8}
.badge{display:inline-block;font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;border:1px solid var(--line);color:var(--mute);background:rgba(255,255,255,.7)}
.badge.client{background:var(--lime);border-color:rgba(10,56,43,.25);color:var(--forest)}
.case{padding:clamp(26px,3.6vw,56px);margin-top:20px;border-radius:36px;background:var(--surface)}
.case-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:18px;align-items:start}
.case-no{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.case-title{grid-column:1/9;font-size:clamp(38px,5vw,78px)}
.case-note{grid-column:1/-1;margin:0;font-size:15.5px;line-height:1.5;color:var(--mute);max-width:64ch}
.case-figs{grid-column:9/13;display:grid;gap:16px;justify-items:start;align-self:start}
.fig{background:var(--mint);border-radius:18px;padding:14px 18px;width:100%}
.fig .n{font-family:var(--display);font-size:clamp(32px,3.4vw,50px);line-height:1;display:block;letter-spacing:-.03em}
.fig .lab{display:block;margin-top:8px;color:var(--forest);opacity:.75}
@media(max-width:900px){.case-title,.case-figs{grid-column:1/-1}.case-figs{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));width:100%}}
.case-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);margin-top:clamp(22px,3vw,40px)}
.case-body>div{grid-column:span 6;border-top:1px solid var(--rule);padding:18px 0 22px}
.case-body>div.wide{grid-column:1/-1}
.case-k{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px}
.case-v{font-size:16.5px;line-height:1.62;max-width:60ch}
.case-v.caveat{color:var(--mute)}
@media(max-width:760px){.case-body>div{grid-column:1/-1}}

/* ---------- about ---------- */
.tl{margin-top:clamp(36px,5vw,64px);list-style:none;padding:0}
.tl li{display:grid;grid-template-columns:minmax(80px,1fr) 7fr;gap:var(--gut);border-top:1px solid var(--rule);padding:32px 0}
.tl li .d{font-size:clamp(34px,5vw,74px)}
.tl li:last-child .d{font-style:italic}
.tl li p{margin:14px 0 0;max-width:50ch;font-size:17px;color:var(--mute)}
.tl .yr{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
@media(max-width:700px){.tl li{grid-template-columns:1fr}}
.about-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:32px;align-items:start}
.portrait{grid-column:1/5}
.portrait .arch{padding:10px;border-radius:36px;background:var(--surface)}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 28%;border-radius:28px;filter:grayscale(1) contrast(1.04)}
.portrait .nm{margin:22px 0 0;font-family:var(--display);font-size:32px;letter-spacing:-.02em;line-height:1.05}
.portrait .rl{margin:6px 0 0;font-size:15px;color:var(--dim)}
.prose{grid-column:6/13}
.prose p{font-size:17.5px;max-width:52ch;margin:0 0 18px;color:var(--mute)}
.prose p.pull{font-family:var(--display);font-size:clamp(28px,3vw,44px);line-height:1.1;max-width:22ch;margin:36px 0;color:var(--forest);letter-spacing:-.02em;padding-left:24px;border-left:3px solid var(--lime)}
@media(max-width:900px){.portrait,.prose{grid-column:1/-1}.portrait{max-width:340px}}
.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px;margin-top:34px}
.creds>div{padding:18px 20px 20px;border-radius:22px;background:var(--surface)}
.creds .k{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.creds .v{font-size:15.5px;margin-top:6px}
.ledger{margin-top:clamp(36px,5vw,64px);list-style:none;padding:0}
.ledger li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gut);align-items:baseline;border-top:1px solid var(--rule);padding:24px 0}
.ledger li:last-child{border-bottom:1px solid var(--rule)}
.ledger .d{font-size:clamp(34px,4.2vw,64px);color:var(--forest)}
.ledger p{margin:0;font-size:16.5px;max-width:46ch;color:var(--mute)}
@media(max-width:700px){.ledger li{grid-template-columns:1fr;gap:6px}}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:40px;align-items:start}
.contact-direct{grid-column:1/6}
.contact-direct p.in{font-family:var(--display);font-size:clamp(28px,2.8vw,40px);line-height:1.12;max-width:26ch;margin:0 0 34px;color:var(--forest)}
.email-big{display:inline-block;font-weight:600;font-size:clamp(19px,2.1vw,28px);letter-spacing:-.02em;text-decoration:none;color:var(--forest);word-break:break-word;border-bottom:2px solid var(--lime);padding-bottom:6px}
.email-big:hover{background:var(--lime)}
.meta-row{display:grid;grid-template-columns:9em 1fr;gap:12px;border-top:1px solid var(--rule);padding:16px 0;font-size:15.5px;color:var(--mute)}
.meta-row:first-of-type{margin-top:34px}
.meta-row b{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg)}
form.inquiry{grid-column:7/13;padding:clamp(28px,3.6vw,52px);border-radius:36px;background:var(--surface)}
.field{margin-bottom:22px}
.field label{display:block;font-size:14.5px;font-weight:600;margin-bottom:8px}
.field .opt{color:var(--dim);font-weight:400}
.field input,.field textarea{width:100%;font:inherit;font-size:16px;color:var(--fg);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:140px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--forest);box-shadow:0 0 0 4px rgba(216,255,56,.55)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:16px 0 0;padding:12px 16px;font-size:15px;border-radius:var(--r-sm);border:1px solid rgba(10,56,43,.3);background:var(--mint)}
.form-status.err{border-color:rgba(200,60,50,.5);background:rgba(255,107,94,.1)}
.form-status[hidden]{display:none}
.form-note{margin:16px 0 0;font-size:14px;color:var(--dim)}
@media(max-width:900px){.contact-direct,form.inquiry{grid-column:1/-1}}

/* ---------- closing band + footer ---------- */
.cta-band{background:linear-gradient(135deg,#082D23,#0A382B 55%,#0D4735);color:#F4FAF2;padding:clamp(72px,9vw,140px) var(--pad);position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;right:-8vw;top:-14vw;width:46vw;aspect-ratio:1;border-radius:50%;border:1px solid rgba(216,255,56,.18);box-shadow:0 0 0 60px rgba(255,255,255,.03)}
.cta-band>*{position:relative}
.cta-band .state{font-size:clamp(46px,8.4vw,140px);letter-spacing:-.05em;line-height:.88;max-width:none}
.cta-band .state span{display:block}
.cta-band .state>span:last-child,.cta-band .state .hl{font-style:italic}
.cta-band .ask{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:center;margin-top:clamp(36px,4vw,64px)}
.cta-band .ask p{font-size:clamp(18px,1.6vw,22px);margin:0;max-width:44ch;line-height:1.35;color:rgba(244,250,242,.8)}
.cta-band .state>span:last-child,.cta-band .state .hl{color:var(--lime)}
footer.site{position:static;background:var(--cream);color:var(--forest);padding:clamp(56px,7vw,96px) var(--pad) 32px;box-shadow:none}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:28px var(--gut);font-size:15px;color:var(--mute)}
.foot-cols h4{margin:0 0 12px;color:var(--forest);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.foot-cols a{display:block;text-decoration:none;padding:3px 0}
.foot-cols a:hover{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.fine{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:56px;border-top:1px solid var(--rule);padding-top:18px}
svg text{font-family:var(--mono)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.page-hero ~ section:nth-of-type(even){background:var(--cream)}
.nav{background:transparent}
@media(max-width:560px){.notice-inner{flex-wrap:wrap;gap:8px 12px}.notice p{flex-basis:100%;order:3}.notice-close{margin-left:auto}.notice-tag{order:1}.notice-close{order:2}}

/* ---------- dynamic layer: finder, filters, form states ---------- */
[hidden]{display:none!important}
.svc,.case{scroll-margin-top:calc(var(--bar) + 20px)}
.svc:target .svc-head .d,.case:target .case-title{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:.12em;text-underline-offset:.12em}

/* service finder */
.finder{margin-top:clamp(32px,4vw,56px);padding:clamp(24px,3.4vw,48px);border-radius:36px;background:var(--surface);border:1px solid var(--rule);box-shadow:var(--hi),var(--shadow);max-width:1100px}
.finder-sym{border:0;margin:0 0 26px;padding:0}
.finder-sym legend{font-size:14.5px;font-weight:600;margin-bottom:14px;padding:0}
.finder .opt{color:var(--dim);font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;display:inline-flex;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;font-size:15px;line-height:1.35;padding:11px 18px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--mute);transition:background .2s,border-color .2s,color .2s}
.chip:hover span{border-color:var(--forest);color:var(--forest)}
.chip input:checked+span{background:var(--mint);border-color:var(--forest);color:var(--forest);font-weight:600}
.chip input:checked+span::before{content:"\2713\00a0"}
.chip input:focus-visible+span{outline:2px solid var(--forest);outline-offset:3px}
.finder-count{margin:6px 0 0;font-size:13px;color:var(--dim);text-align:right}
.finder-actions{display:flex;gap:14px 26px;flex-wrap:wrap;align-items:center}
.finder-reset{background:none;border:0;cursor:pointer;font-family:inherit}
.finder button[disabled]{opacity:.6;cursor:progress}
.finder-out{margin-top:clamp(28px,3.6vw,48px);max-width:1100px;outline:none;display:grid;gap:18px}
.finder-out-h{font-size:clamp(32px,3.6vw,52px)}
.fcard{padding:clamp(22px,3vw,40px);border-radius:32px;background:var(--surface);border:1px solid var(--rule);box-shadow:var(--hi),var(--shadow)}
.fcard-top{border-color:rgba(10,56,43,.35)}
.fcard-top-row{display:flex;gap:10px 16px;align-items:center;flex-wrap:wrap}
.fcard h4.d{font-size:clamp(30px,3vw,46px);margin-top:16px}
.fcard-why{margin:12px 0 0;color:var(--mute);font-size:15.5px}
.fcard-dl{margin:20px 0 0;display:grid;grid-template-columns:minmax(9em,auto) 1fr;gap:12px 22px;border-top:1px solid var(--rule);padding-top:18px}
.fcard-dl dt{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.fcard-dl dd{margin:0;font-size:16.5px;max-width:58ch}
.fcard-q{font-family:var(--display);font-size:clamp(21px,1.9vw,26px)!important;line-height:1.25;color:var(--forest)}
.fcard-actions{display:flex;gap:14px 26px;flex-wrap:wrap;align-items:center;margin-top:24px}
.fcard-actions button.textlink{background:none;border:0;cursor:pointer;font-family:inherit}
.frel .lab{margin:6px 0 10px}
.frel-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.frel-list li{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:10px}
.frel-list a{font-family:var(--display);font-size:24px;color:var(--forest);text-underline-offset:4px}
@media(max-width:600px){.fcard-dl{grid-template-columns:1fr;gap:4px}.fcard-dl dd{margin-bottom:10px}}

/* work filters */
.filters{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin:0 var(--pad);padding:18px 0 0}
.seg{display:inline-flex;flex-wrap:wrap;gap:6px;padding:5px;border-radius:999px;background:var(--surface);border:1px solid var(--rule)}
.seg-b{font:600 14px var(--body);color:var(--mute);background:none;border:0;border-radius:999px;padding:10px 18px;cursor:pointer;min-height:44px}
.seg-b:hover{color:var(--forest)}
.seg-b[aria-pressed="true"]{background:var(--forest);color:#fff}
.filter-svc{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;flex:0 1 380px;min-width:0}
.filter-svc select{flex:1;min-width:0;max-width:100%;font:500 15px var(--body);color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:11px 16px;min-height:44px}
.filter-count{margin:0;font-size:14px;color:var(--dim)}
.filter-empty{padding:28px 0;font-size:17px;color:var(--mute)}
.filter-empty .textlink{background:none;border:0;cursor:pointer;font-family:inherit;margin-left:10px}
.case-ask{font:600 13px var(--body);color:var(--forest);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;min-height:40px}
.case-ask:hover{background:var(--lime);border-color:rgba(10,56,43,.3)}
.case-no .badge{margin-left:auto}

/* contact form states */
.handoff-note{margin:0 0 20px;padding:12px 16px;border-radius:var(--r-sm);background:var(--mint);color:var(--forest);font-size:14.5px}
.field-err{margin:8px 0 0;font-size:14px;font-weight:600;color:#A3271B}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.15)}
form.inquiry[aria-busy="true"] button[type="submit"]{opacity:.7;cursor:progress}

/* ---------- living gradient (hero + page headers) ----------
   Slow-drifting colour fields and soft light bands in TDRA greens.
   Transform-only animation (GPU-composited); stops under reduced motion. */
.aurora{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:linear-gradient(115deg,#DCE3D3 0%,#D3E2D2 40%,#CFE0D6 70%,#DADFCF 100%)}
.aurora i{position:absolute;display:block;width:78vmax;height:78vmax;border-radius:50%;will-change:transform}
.aurora i:nth-child(1){left:-26vmax;top:-34vmax;background:radial-gradient(circle,rgba(208,240,72,.62),rgba(208,240,72,0) 62%);animation:au1 28s ease-in-out infinite alternate}
.aurora i:nth-child(2){right:-28vmax;top:-22vmax;background:radial-gradient(circle,rgba(64,196,120,.5),rgba(64,196,120,0) 62%);animation:au2 34s ease-in-out infinite alternate}
.aurora i:nth-child(3){left:18%;bottom:-48vmax;background:radial-gradient(circle,rgba(28,168,146,.38),rgba(28,168,146,0) 62%);animation:au3 40s ease-in-out infinite alternate}
.aurora i:nth-child(4){left:34%;top:-18vmax;width:58vmax;height:58vmax;background:radial-gradient(circle,rgba(230,234,160,.55),rgba(230,234,160,0) 62%);animation:au4 31s ease-in-out infinite alternate}
.aurora b{position:absolute;inset:-30% -40%;display:block;will-change:transform;
  background:linear-gradient(118deg,transparent 38%,rgba(246,248,240,.62) 45%,transparent 52%,transparent 57%,rgba(246,248,240,.42) 61%,transparent 67%);
  animation:beam 24s ease-in-out infinite alternate}
.aurora::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(233,232,227,0) 70%,rgba(233,232,227,.55))}
@keyframes au1{to{transform:translate3d(22vmax,14vmax,0) scale(1.15)}}
@keyframes au2{to{transform:translate3d(-18vmax,20vmax,0) scale(.9)}}
@keyframes au3{to{transform:translate3d(16vmax,-22vmax,0) scale(1.2)}}
@keyframes au4{to{transform:translate3d(-24vmax,10vmax,0) scale(1.1)}}
@keyframes beam{from{transform:translate3d(-12%,0,0)}to{transform:translate3d(12%,0,0)}}
.page-hero .aurora::after{background:linear-gradient(180deg,rgba(233,232,227,0) 55%,rgba(233,232,227,.85))}
.hero .chain li{background:rgba(242,241,237,.55);border-color:rgba(255,255,255,.5)}
/* open menu sits on forest: make the close control and logo visible */
header.site.open .burger span{background:#F4FAF2}
header.site.open .brand .logo-on-light{display:none}
header.site.open .brand .logo-on-dark{display:block}

/* ---------- hero video (desktop/tablet only; see site.js) ---------- */
.hero-video{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:70% 50%;opacity:0;transition:opacity 1.2s ease}
.hero-video.on{opacity:1}
.hero-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(233,232,227,.82) 0%,rgba(233,232,227,.6) 30%,rgba(233,232,227,.12) 55%,rgba(233,232,227,0) 70%),
             linear-gradient(180deg,rgba(233,232,227,0) 75%,rgba(233,232,227,.6))}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}

/* ---------- problem-first refinement ---------- */
.eyebrow{margin:0 0 clamp(14px,2vw,24px);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--forest)}
.hero-sub{max-width:46ch;margin:18px 0 0;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--mute)}
.hero .chain li{font-size:clamp(14px,1.15vw,17px)}

/* diagnostic: problem picker on the forest band */
.dx{position:relative;margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:24px;align-items:start}
.dx-tabs{grid-column:1/6;display:flex;flex-direction:column;gap:6px}
.dx-tabs button{all:unset;box-sizing:border-box;cursor:pointer;font-family:var(--display);font-size:clamp(24px,2.5vw,38px);line-height:1.1;letter-spacing:-.02em;color:var(--dim);padding:16px 22px;border-radius:22px;border:1px solid transparent;transition:color .2s,background .2s,border-color .2s}
.dx-tabs button:hover{color:var(--fg)}
.dx-tabs button[aria-selected="true"]{color:var(--forest);background:var(--lime);border-color:rgba(255,255,255,.4)}
.dx-tabs button:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.dx-panels{grid-column:1/-1;display:grid;gap:20px}
.dx.is-tabs .dx-panels{grid-column:6/13}
.dx-panel{padding:clamp(24px,3vw,44px);border-radius:32px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(28,78,62,.96),rgba(16,62,48,.96))}
.dx.is-tabs .dx-title{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dx-title{font-size:clamp(28px,3vw,44px);margin:0 0 18px}
.dx-says{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.dx-says li{font-family:var(--display);font-size:clamp(22px,2vw,30px);line-height:1.2;color:var(--fg)}
.dx-dl{margin:26px 0 0;display:grid;gap:8px;border-top:1px solid var(--rule);padding-top:20px}
.dx-dl dt{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-top:10px}
.dx-dl dt:first-child{margin-top:0}
.dx-dl dd{margin:0;font-size:16.5px;line-height:1.6;color:var(--mute);max-width:56ch}
.dx-caps{display:flex;flex-wrap:wrap;gap:8px}
.dx-caps a{font-size:14px;font-weight:600;color:var(--fg);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.dx-caps a:hover{border-color:var(--lime);color:var(--lime)}
.dx-actions{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-top:26px}
.dx-actions .textlink{background:none;border:0;cursor:pointer;font-family:inherit}
@media(max-width:900px){.dx-tabs,.dx.is-tabs .dx-panels{grid-column:1/-1}.dx-tabs{flex-direction:row;flex-wrap:wrap}.dx-tabs button{font-size:20px;padding:12px 16px;border-color:var(--line)}}
#diagnose .qs{margin-top:clamp(40px,5vw,72px)}

/* "you don't need to know which service" callout */
.no-service{margin-top:clamp(36px,4vw,56px);padding:clamp(24px,3vw,40px);border-radius:32px;background:var(--mint);max-width:900px}
.no-service .d{font-size:clamp(28px,3vw,44px);margin:0 0 10px;color:var(--forest)}
.no-service p{margin:0 0 14px;max-width:56ch;color:var(--mute)}

/* capabilities: problem first */
.caplist .when{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--accent-ink);margin-bottom:14px;line-height:1.4;transition:color .3s}
.caplist li a:hover .when{color:var(--lime)}

/* evidence: operating experience vs portfolio, kept visibly apart */
.ev-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:clamp(24px,3vw,48px);margin-top:clamp(28px,4vw,48px)}
.ev-label{margin:0;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--forest)}
.ev-note{margin:6px 0 0;font-size:15px;color:var(--mute);max-width:44ch}
.ev-group .proof{margin-top:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.ev-portfolio{padding-left:clamp(0px,2.4vw,40px);border-left:1px solid var(--rule)}
.ev-portfolio .ptile{background:var(--surface-2)}
.ptile{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ptag{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
@media(max-width:980px){.ev-portfolio{padding-left:0;border-left:0;padding-top:24px;border-top:1px solid var(--rule)}}

/* service page: "useful when" */
.svc-when{display:block;margin-top:14px;font-size:15.5px;line-height:1.5;color:var(--forest);max-width:34ch}
.svc-when b{font-weight:700;color:var(--accent-ink)}

/* contact: what to bring */
.bring{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:8px}
.bring li{display:flex;gap:12px;align-items:baseline;font-size:16px;color:var(--mute)}
.bring li b{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--accent-ink)}

/* evidence cards: compact, and portfolio visibly secondary to operating experience */
.ev-group .proof{padding-bottom:0}
.ev-group .pcard:nth-child(even){margin-top:0}
.ev-group .pimg{height:clamp(150px,13vw,200px);border-radius:26px}
.ev-group .pbody{margin:-60px 14px 0}
.ev-portfolio .pimg{filter:saturate(.25) brightness(1.25);height:clamp(120px,10vw,160px)}
.ev-portfolio .proof .n{font-size:clamp(30px,2.8vw,42px)}
.bring{margin-bottom:30px}

/* ---------- TDRA chevron watermarks on the forest sections ----------
   2D Λ marks from the logo, placed as a composition rather than a pattern:
   a large outline bleeding off the edge, a faint solid echo, a small lime
   accent. Pure CSS backgrounds: no extra requests, no motion. */
#diagnose{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolyline points='14,86 50,16 86,86' fill='none' stroke='%23D8FF38' stroke-opacity='0.9' stroke-width='18' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") left var(--pad) top clamp(36px,5vw,72px) / clamp(28px,2.4vw,40px) no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cpolyline points='14,86 50,16 86,86' fill='none' stroke='black' stroke-width='16.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/mask%3E%3C/defs%3E%3Cpolyline points='14,86 50,16 86,86' fill='none' stroke='%23D8FF38' stroke-opacity='0.22' stroke-width='18' stroke-linejoin='round' stroke-linecap='round' mask='url%28%23m%29'/%3E%3C/svg%3E") right -16vw top clamp(40px,6vw,110px) / clamp(420px,62vw,1100px) no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolyline points='14,86 50,16 86,86' fill='none' stroke='%23F4FAF2' stroke-opacity='0.035' stroke-width='18' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") right 22vw top clamp(260px,24vw,460px) / clamp(220px,30vw,560px) no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolyline points='14,86 50,16 86,86' fill='none' stroke='%23F4FAF2' stroke-opacity='0.04' stroke-width='18' stroke-linejoin='round' stroke-linecap='round' transform='rotate%2890 50 50%29'/%3E%3C/svg%3E") left -7vw bottom -6vw / clamp(200px,26vw,460px) no-repeat,
  linear-gradient(135deg,#082D23,#0A382B 55%,#0D4735)}
.cta-band{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cpolyline points='14,86 50,16 86,86' fill='none' stroke='black' stroke-width='16.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/mask%3E%3C/defs%3E%3Cpolyline points='14,86 50,16 86,86' fill='none' stroke='%23D8FF38' stroke-opacity='0.2' stroke-width='18' stroke-linejoin='round' stroke-linecap='round' mask='url%28%23m%29'/%3E%3C/svg%3E") right -5vw bottom -22vw / clamp(360px,46vw,820px) no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolyline points='14,86 50,16 86,86' fill='none' stroke='%23F4FAF2' stroke-opacity='0.045' stroke-width='18' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") right 14vw bottom -12vw / clamp(220px,28vw,520px) no-repeat,
  linear-gradient(135deg,#082D23,#0A382B 55%,#0D4735)}
.cta-band::before{display:none}
.menu-panel{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cpolyline points='14,86 50,16 86,86' fill='none' stroke='black' stroke-width='16.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/mask%3E%3C/defs%3E%3Cpolyline points='14,86 50,16 86,86' fill='none' stroke='%23D8FF38' stroke-opacity='0.16' stroke-width='18' stroke-linejoin='round' stroke-linecap='round' mask='url%28%23m%29'/%3E%3C/svg%3E") right -12vw bottom -18vw / clamp(320px,56vw,900px) no-repeat,
  var(--forest)}
@media(max-width:700px){
  #diagnose{background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolyline points='14,86 50,16 86,86' fill='none' stroke='%23D8FF38' stroke-opacity='0.9' stroke-width='18' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") left var(--pad) top 30px / 26px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cpolyline points='14,86 50,16 86,86' fill='none' stroke='black' stroke-width='16.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/mask%3E%3C/defs%3E%3Cpolyline points='14,86 50,16 86,86' fill='none' stroke='%23D8FF38' stroke-opacity='0.2' stroke-width='18' stroke-linejoin='round' stroke-linecap='round' mask='url%28%23m%29'/%3E%3C/svg%3E") right -38vw top 20px / 110vw no-repeat,
    linear-gradient(135deg,#082D23,#0A382B 55%,#0D4735)}
  .cta-band{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cpolyline points='14,86 50,16 86,86' fill='none' stroke='black' stroke-width='16.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/mask%3E%3C/defs%3E%3Cpolyline points='14,86 50,16 86,86' fill='none' stroke='%23D8FF38' stroke-opacity='0.18' stroke-width='18' stroke-linejoin='round' stroke-linecap='round' mask='url%28%23m%29'/%3E%3C/svg%3E") right -30vw bottom -30vw / 100vw no-repeat,linear-gradient(135deg,#082D23,#0A382B 55%,#0D4735)}
}
header.site.open .links{visibility:hidden}

/* ---------- evidence cards: rising TDRA chevron + expandable context ---------- */
.ev-group .ev-tile{position:relative;overflow:hidden;filter:none;background:linear-gradient(160deg,#0E4938 0%,#0A382B 55%,#06271D 100%)}
.ev-portfolio .ev-tile{filter:none;background:linear-gradient(160deg,#66756F 0%,#46534E 60%,#323C38 100%)}
.ev-chev{position:absolute;left:50%;bottom:30%;width:30%;height:auto;overflow:visible;transform:translate(-50%,0);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ev-chev polyline{fill:none;stroke:#B48B48;stroke-width:18;stroke-linejoin:round;stroke-linecap:round}
.ev-portfolio .ev-chev polyline{stroke:#DCE6E1;stroke-opacity:.55;stroke-width:7}
.ev-card .pbody{transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s}
.ev-more p{margin:12px 0 0;font-size:14.5px;line-height:1.55;color:var(--mute)}
.ev-more a{color:var(--forest);font-weight:600;text-underline-offset:3px;white-space:nowrap}
.ev-toggle{margin-top:12px;display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:6px 0;cursor:pointer;font:700 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--forest);min-height:32px}
.ev-toggle::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:translateY(-2px) rotate(135deg);transition:transform .3s}
.ev-toggle[aria-expanded="true"]::before{transform:translateY(2px) rotate(-45deg)}
.ev-toggle:focus-visible{outline:2px solid var(--forest);outline-offset:3px;border-radius:6px}
/* with JS: Λs rise into their tiles on scroll; context collapses until asked for */
.js-ev .ev-card:not(.in) .ev-chev{transform:translate(-50%,160%)}
.js-ev .ev-more{max-height:0;opacity:0;overflow:hidden;visibility:hidden;transition:max-height .55s cubic-bezier(.2,.8,.2,1),opacity .35s,visibility 0s linear .55s}
.js-ev .ev-card.open .ev-more,.js-ev .ev-card:focus-within .ev-more{max-height:14em;opacity:1;visibility:visible;transition-delay:0s}
.js-ev .ev-card.open .pbody,.js-ev .ev-card:focus-within .pbody{transform:translateY(-34px);box-shadow:0 34px 60px -24px rgba(10,56,43,.45)}
.js-ev .ev-card.in.open .ev-chev,.js-ev .ev-card.in:focus-within .ev-chev{transform:translate(-50%,-30%) scale(1.12)}
@media(hover:hover) and (pointer:fine){
  .js-ev .ev-card:hover .ev-more{max-height:14em;opacity:1;visibility:visible;transition-delay:0s}
  .js-ev .ev-card:hover .pbody{transform:translateY(-34px);box-shadow:0 34px 60px -24px rgba(10,56,43,.45)}
  .js-ev .ev-card.in:hover .ev-chev{transform:translate(-50%,-30%) scale(1.12)}
}
.ev-group .pcard:hover{transform:none}

.ev-group .ev-tile{height:clamp(170px,15vw,220px)}
.ev-portfolio .ev-tile{height:clamp(150px,13vw,190px)}

/* ---------- founder section: chevron parquet background ----------
   Herringbone-style chevron planks in forest tints, strongest on the
   right and masked out toward the text on the left. Decorative only. */
#who{overflow:hidden;position:relative;isolation:isolate}
#who>*{position:relative;z-index:1}
#who::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(/images/chevron-floor.svg) right top/clamp(360px,30vw,520px) auto repeat;
  -webkit-mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.8) 22%,rgba(0,0,0,.25) 48%,transparent 66%);
          mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.8) 22%,rgba(0,0,0,.25) 48%,transparent 66%)}
@media(max-width:900px){#who::before{opacity:.55;-webkit-mask-image:linear-gradient(to left,#000,transparent 75%);mask-image:linear-gradient(to left,#000,transparent 75%)}}

/* logo Λ standing in for the "a" in "changed". The real letter stays in
   the text (transparent) so spacing, copy-paste, search and screen
   readers still read "changed"; the Λ is a pseudo-element background
   sitting on the baseline (DM Serif Display descent .34em), a touch
   taller than the x-height so it reads as the logo mark, not a caret. */
.chev-a{position:relative;color:transparent}
.chev-a::after{content:"";position:absolute;left:50%;bottom:.338em;width:.6em;height:.6em;transform:translateX(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolyline points='19,85 50,15 81,85' fill='none' stroke='%23B48B48' stroke-width='30' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center bottom / contain no-repeat;pointer-events:none}

/* ---------- hero questions: revealed by a sliding ">" ---------- */
.chain.reveal li{position:relative;padding-right:44px}
.chain.reveal .cq{display:flex;align-items:baseline;gap:12px;flex:1 1 auto;min-width:0;clip-path:inset(0 100% 0 0);transition:clip-path var(--sweep,900ms) linear}
.chain.reveal li.shown .cq{clip-path:inset(0 0 0 0)}
.chain.reveal li:not(.shown) .cq{transition-duration:.45s;transition-timing-function:ease}
.chain-chev{position:absolute;left:0;top:0;width:22px;height:30px;opacity:0;pointer-events:none;z-index:2;transition-property:transform,opacity;transition-timing-function:linear;transition-duration:0ms}
.chain-chev.vis{opacity:1}
.chain-chev svg{width:100%;height:100%;overflow:visible;display:block}
.chain-chev polyline{fill:none;stroke:#B48B48;stroke-width:22;stroke-linejoin:round;stroke-linecap:round}

/* ---------- approach steps: ">>" opens to ">  ...  >" ---------- */
.steps.chev .step{grid-template-columns:3em calc(clamp(30px,3.4vw,50px)*.95) 1fr;column-gap:0;position:relative;background:none;border-color:transparent;padding-left:0}
.steps.chev .step[aria-selected="true"]{background:none;border-color:transparent}
.steps.chev .step .qq{grid-column:3}
.steps.chev .sc{grid-row:1;grid-column:2;align-self:center;display:block;width:.42em;height:.6em;font-size:clamp(30px,3.4vw,50px);pointer-events:none;opacity:.55;transition:opacity .3s}
.steps.chev .sc svg{width:100%;height:100%;overflow:visible;display:block}
.steps.chev .sc polyline{fill:none;stroke:#B48B48;stroke-width:20;stroke-linejoin:round;stroke-linecap:round}
.steps.chev .sc-r{transform:translateX(.3em);transition:transform .75s cubic-bezier(.65,0,.35,1),opacity .3s}
.steps.chev .step:hover .sc,.steps.chev .step[aria-selected="true"] .sc{opacity:1}
.steps.chev .step[aria-selected="true"] .sc-r{transform:translateX(var(--run,0px))}
.steps.chev .step .qq{max-height:none;opacity:1;margin-top:0;height:0;clip-path:inset(0 100% 0 0);transition:clip-path .55s cubic-bezier(.65,0,.35,1),height 0s .55s,margin 0s .55s}
.steps.chev .step[aria-selected="true"] .qq{height:auto;margin-top:8px;clip-path:inset(0 0 0 0);transition:clip-path .75s cubic-bezier(.65,0,.35,1)}
@media (prefers-reduced-motion:reduce){.steps.chev .sc-r,.steps.chev .step .qq{transition:none}}

/* ---------- evidence wall: each proof shows its own chart ----------
   Numbers in the charts are the ones stated on the card; shapes such as
   the ROC curve are drawn from that single figure. */
.ev-group .ev-tile,.ev-portfolio .ev-tile{height:clamp(250px,21vw,290px)}
.ev-code,.ev-cap{position:absolute;top:16px;font:500 10.5px/1 var(--mono);letter-spacing:.08em;color:rgba(255,255,255,.62);text-transform:uppercase}
.ev-code{right:20px;color:rgba(216,255,56,.85)}
.ev-cap{left:20px}
.ev-viz{position:absolute;left:18px;right:18px;top:42px;bottom:96px;width:calc(100% - 36px);height:calc(100% - 138px);overflow:visible}
.ev-viz text{font:500 9.5px var(--mono);letter-spacing:.02em}
.ev-viz .vl{fill:rgba(255,255,255,.66)}
.ev-viz .vv{fill:#fff;font-weight:600;font-size:10.5px}
.ev-viz .ln{fill:none;stroke:#B48B48;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1) .15s}
.ev-viz .dot{fill:#0A382B;stroke:#B48B48;stroke-width:2.5;transition:opacity .4s calc(.35s + var(--d,0) * .3s)}
.ev-viz .dot.hi{fill:#D8FF38;stroke:#D8FF38}
.ev-viz .bar{fill:rgba(255,255,255,.28);transform-box:fill-box;transform-origin:0 50%;transition:transform .9s cubic-bezier(.2,.8,.2,1) calc(.15s + var(--d,0) * .12s)}
.ev-viz .bar.col{transform-origin:50% 100%}
.ev-viz .bar.hi{fill:#D8FF38}
.ev-viz .ax{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1}
.ev-viz .ref{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1;stroke-dasharray:3 3}
.ev-viz .area{fill:rgba(216,255,56,.12);transition:opacity .8s .9s}
.ev-portfolio .ev-viz .ln{stroke:#D8FF38}
.ev-group:not(.ev-portfolio) .ev-viz .bar:not(.hi){fill:rgba(180,139,72,.75)}
.js-ev .ev-card:not(.in) .ev-viz .ln{stroke-dashoffset:1}
.js-ev .ev-card:not(.in) .ev-viz .dot,.js-ev .ev-card:not(.in) .ev-viz .area{opacity:0}
.js-ev .ev-card:not(.in) .ev-viz .bar{transform:scaleX(0)}
.js-ev .ev-card:not(.in) .ev-viz .bar.col{transform:scaleY(0)}
.proof .n{font-size:clamp(44px,4.4vw,66px)}
.ev-portfolio .proof .n{font-size:clamp(40px,3.8vw,58px)}
@media(prefers-reduced-motion:reduce){.ev-viz *{transition:none!important}}
/* ---------- home: capabilities as a compact toolkit ----------
   Each row leads with the problem; the tool is the answer, not the headline. */
.caplist.toolkit{display:block;background:none;border:0;border-radius:0;overflow:visible;margin-top:clamp(28px,4vw,52px);border-top:1px solid var(--rule)}
.caplist.toolkit li{border-bottom:1px solid var(--rule)}
.caplist.toolkit li a{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 40px;column-gap:clamp(20px,3vw,48px);align-items:baseline;min-height:0;height:auto;padding:clamp(18px,2vw,26px) 0;background:none;color:var(--ink);position:relative}
.caplist.toolkit .when{grid-column:1;grid-row:1/3;margin:0;font:400 clamp(21px,2vw,30px)/1.2 var(--display);letter-spacing:-.01em;color:var(--ink);transition:color .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.caplist.toolkit .d{grid-column:2;grid-row:1;font:700 12.5px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--forest)}
.caplist.toolkit p{grid-column:2;grid-row:2;margin:6px 0 0;font-size:14.5px;max-width:42ch}
.caplist.toolkit .go{grid-column:3;grid-row:1/3;align-self:center;justify-self:end;font-size:0;margin:0}
.caplist.toolkit .go::after{content:"";font-size:0;width:12px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'%3E%3Cpolyline points='10,10 50,50 10,90' fill='none' stroke='%23B48B48' stroke-width='14' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.caplist.toolkit li a:hover{background:none;color:var(--ink)}
.caplist.toolkit li a:hover .when{color:var(--forest);transform:translateX(8px)}
.caplist.toolkit li a:hover p{color:var(--mute)}
.caplist.toolkit li a:hover .go::after{transform:translateX(6px)}
.caplist.toolkit li a:focus-visible{outline:2px solid var(--forest);outline-offset:4px;border-radius:8px}
@media(max-width:760px){
  .caplist.toolkit li a{grid-template-columns:minmax(0,1fr) 24px;row-gap:8px}
  .caplist.toolkit .when{grid-row:1;grid-column:1}
  .caplist.toolkit .d{grid-row:2;grid-column:1}
  .caplist.toolkit p{grid-row:3;grid-column:1;margin:0}
  .caplist.toolkit .go{grid-column:2;grid-row:1/4}
}
@media(prefers-reduced-motion:reduce){.caplist.toolkit .when,.caplist.toolkit .go::after{transition:none}}
/* approach steps: thin bronze timer under the active step while autoplaying */
.steps.chev .step::after{content:"";position:absolute;left:3em;right:24px;bottom:6px;height:2px;border-radius:2px;background:#B48B48;transform:scaleX(0);transform-origin:0 50%;opacity:0}
.steps.chev.auto .step[aria-selected="true"]::after{opacity:.7;animation:steptimer var(--auto,4200ms) linear forwards}
@keyframes steptimer{to{transform:scaleX(1)}}

/* founder section: random plank glow over the parquet (see site.js) */
.who-glow{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.85) 30%,transparent 62%);
          mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.85) 30%,transparent 62%)}
#who>.who-glow{position:absolute;z-index:0}
.who-glow g{opacity:0;animation:pq-glow 3s ease-in-out forwards}
.who-glow .core{fill:#F3FFD6;fill-opacity:.55;stroke:#fff;stroke-opacity:.7;stroke-width:1.2}
.who-glow .halo{fill:#D8FF38;fill-opacity:.45}
@keyframes pq-glow{0%{opacity:0}35%{opacity:1}60%{opacity:.9}100%{opacity:0}}
@media(max-width:900px){.who-glow{opacity:.6}}

/* toolkit rows lead with a short question; the situation sits under it */
.caplist.toolkit .ask{grid-column:1;grid-row:1;font:400 clamp(26px,2.6vw,40px)/1.1 var(--display);letter-spacing:-.015em;color:var(--ink);transition:color .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.caplist.toolkit .when{grid-row:2;font:500 14.5px/1.5 var(--body);letter-spacing:0;color:var(--mute);margin-top:8px;max-width:40ch}
.caplist.toolkit li a:hover .ask{color:var(--forest);transform:translateX(8px)}
.caplist.toolkit li a:hover .when{color:var(--mute);transform:translateX(8px)}
@media(max-width:760px){
  .caplist.toolkit .ask{grid-row:1}
  .caplist.toolkit .when{grid-row:2;margin-top:0}
  .caplist.toolkit .d{grid-row:3}
  .caplist.toolkit p{grid-row:4}
  .caplist.toolkit .go{grid-row:1/5}
}
@media(prefers-reduced-motion:reduce){.caplist.toolkit .ask{transition:none}}

/* ---------- step mark: four chevrons for Business, Data, Decisions, Action;
   the lit ones show which steps something serves ---------- */
.stepmark{display:inline-block;height:15px;width:auto;aspect-ratio:228/100;vertical-align:-1px;margin-right:10px;overflow:visible;flex:none}
.stepmark polyline{fill:none;stroke-linejoin:round;stroke-linecap:round;transition:stroke .45s,stroke-opacity .45s,stroke-width .45s;transition-delay:calc(var(--k) * .14s)}
.stepmark .off{stroke:#0A382B;stroke-opacity:.22;stroke-width:9}
.stepmark .on{stroke:#B48B48;stroke-opacity:1;stroke-width:16}
.stepmark.dk .off{stroke:#fff;stroke-opacity:.3}
.stepmark.dk .on{stroke:#D8FF38}
.js-sm .stepmark:not(.lit) .on{stroke:#0A382B;stroke-opacity:.22;stroke-width:9}
.js-sm .stepmark.dk:not(.lit) .on{stroke:#fff;stroke-opacity:.3}
.ev-code{display:inline-flex;align-items:center;gap:8px}
.ev-code .stepmark{height:12px;margin:0}
.stepmark-key{display:flex;align-items:center;gap:0;margin:18px 0 0;font-size:13.5px;color:var(--mute)}
.stepmark-key .stepmark{height:14px}
@media(prefers-reduced-motion:reduce){.stepmark polyline{transition:none}}

/* step mark: larger, on its own line, so it reads as part of the visual system */
.caplist.toolkit .d{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.caplist.toolkit .d .stepmark{height:24px;margin:0}
.caplist.toolkit .d .stepmark .off{stroke-opacity:.18}
.stepmark-key{gap:14px;margin-top:22px;font-size:14px}
.stepmark-key .stepmark{height:20px;margin:0}
.ev-code{gap:10px}
.ev-code .stepmark{height:16px}
@media(max-width:760px){.caplist.toolkit .d .stepmark{height:20px}}

/* ---------- home: "Do you need AI?" section inside #diagnose ----------
   The video is black-backed; screen blending drops the black so only the
   green ΛI glow sits on the section's forest gradient. */
.ai-block{position:relative;margin-top:clamp(56px,7vw,110px);padding-top:clamp(40px,5vw,72px);border-top:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center}
.ai-media{position:relative;aspect-ratio:16/9}
.ai-video{width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:screen;background:transparent;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
.ai-eyebrow{margin:0 0 14px;font:700 12.5px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.ai-h{margin:0;font-size:clamp(34px,3.8vw,58px);line-height:1;letter-spacing:-.025em}
.ai-h span{display:block}
.ai-h .or{font:500 clamp(14px,1.3vw,17px) var(--body);letter-spacing:0;color:var(--dim);margin:12px 0}
.ai-h u{text-decoration:none;font-style:italic;color:var(--lime)}
.ai-lead{margin:22px 0 0;font-size:clamp(16px,1.35vw,18.5px);line-height:1.6;color:var(--mute);max-width:48ch}
.ai-points{margin:26px 0 0;display:grid;gap:0;border-top:1px solid var(--rule)}
.ai-points>div{display:grid;grid-template-columns:11em minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.ai-points dt{font:700 12px/1.6 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.ai-points dd{margin:0;font-size:15px;line-height:1.6;color:var(--mute)}
.ai-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
@media(max-width:900px){.ai-block{grid-template-columns:1fr}.ai-media{max-width:640px}}
@media(max-width:520px){.ai-points>div{grid-template-columns:1fr;gap:4px}}

/* AI section: its own black section so the black-backed ΛI video sits
   seamlessly, with no blending; a short fade from the forest above. */
#ai.ai-sec{background:var(--paper);color:var(--ink)}
#ai .ai-block{margin-top:0;padding-top:0;border-top:0}
#ai .ai-video{mix-blend-mode:normal}


/* home copy additions */
#approach .body-l+.body-l{margin-top:16px}
#who .body-l+.body-l{margin-top:16px}
.work-intro{margin-top:14px}
.ai-tags{margin-top:20px}
.ai-tlab{margin:0 0 10px;font:700 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.ai-tags ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ai-tags li{font-size:13.5px;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:5px 12px}

/* services: questions each capability can answer */
.svc-more{margin-top:26px;padding-top:22px;border-top:1px solid var(--rule)}
.svc-qlab{margin:0 0 12px;font:700 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--forest)}
.svc-qs{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.svc-qs li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.5;color:var(--ink)}
.svc-qs li::before{content:"";position:absolute;left:0;top:.42em;width:8px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'%3E%3Cpolyline points='10,10 50,50 10,90' fill='none' stroke='%23B48B48' stroke-width='16' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.svc-note{margin:16px 0 0;font-size:15px;line-height:1.6;color:var(--mute);max-width:62ch}

/* ---------- insights page ---------- */
.ins-status{margin:0 0 8px;font-size:15px;color:var(--mute);max-width:60ch}
.ins-list{list-style:none;margin:clamp(20px,3vw,36px) 0 clamp(28px,4vw,48px);padding:0;border-top:1px solid var(--rule)}
.ins-item{display:grid;grid-template-columns:4em minmax(0,1fr) auto;gap:clamp(16px,3vw,40px);align-items:baseline;padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--rule)}
.ins-no{font:500 13px var(--mono);color:#B48B48}
.ins-topic{display:block;font:700 11.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px}
.ins-title{margin:0;font-size:clamp(26px,2.6vw,40px);line-height:1.08;letter-spacing:-.02em}
.ins-item p{margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--mute);max-width:60ch}
.ins-soon{font:700 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:5px 11px;white-space:nowrap}
@media(max-width:700px){.ins-item{grid-template-columns:2.6em minmax(0,1fr)}.ins-soon{grid-column:2;justify-self:start}}

/* ---------- page hero clips (Insights, Work, ...): video behind the headline ----------
   The paper colour fades in from the left so the copy stays readable;
   the video shows through on the right. */
.clip-hero{min-height:clamp(560px,74vh,860px);display:flex;flex-direction:column;justify-content:center;background:#E9E8E3}
.clip-media{position:absolute;top:0;bottom:0;right:0;left:36%;z-index:-1;background:#E4E3DD var(--poster) 50% 50%/cover no-repeat}
.clip-video{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.clip-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,#E9E8E3 0%,rgba(233,232,227,.75) 14%,rgba(233,232,227,0) 40%),
  linear-gradient(0deg,#E9E8E3 0,rgba(233,232,227,0) 16%)}
@media(max-width:720px){
  .clip-hero{min-height:0}
  .clip-media{left:0}
  .clip-media::after{background:linear-gradient(180deg,rgba(233,232,227,.7),rgba(233,232,227,.9) 55%,#E9E8E3)}
}

/* ==========================================================================
   Liquid glass tiles, matched to the frosted-mint Λ: translucent mint fill,
   bright top highlight, a white-to-bronze rim (the Λ's lit edge) and a soft
   sheen that sweeps across on hover. Light tiles use mint glass; tiles on
   the forest sections use smoked glass. Layers: sheen, fill (padding-box),
   rim (border-box), so no pseudo-elements are needed.
   ========================================================================== */
:root{
  --glass-sheen:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  --glass-fill:linear-gradient(150deg,rgba(255,255,255,.72) 0%,rgba(226,238,230,.62) 45%,rgba(196,222,205,.5) 100%);
  --glass-base:linear-gradient(rgba(240,240,235,.9),rgba(240,240,235,.9));
  --glass-rim:linear-gradient(140deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.35) 35%,rgba(180,139,72,.55) 70%,rgba(255,255,255,.6) 100%);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -10px 24px -14px rgba(10,56,43,.18),0 1px 2px rgba(10,56,43,.06),0 28px 60px -30px rgba(10,56,43,.42);
  --glass-dark-fill:linear-gradient(150deg,rgba(210,227,214,.16) 0%,rgba(143,184,160,.08) 50%,rgba(10,56,43,.35) 100%);
  --glass-dark-rim:linear-gradient(140deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.1) 40%,rgba(180,139,72,.55) 75%,rgba(255,255,255,.18) 100%);
  --glass-dark-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -14px 30px -18px rgba(0,0,0,.35),0 30px 70px -34px rgba(0,0,0,.55);
}
.notice,.stage,.pbody,.case,.creds>div,form.inquiry,.finder,.fcard,.no-service,.hero .chain li{
  border:1px solid transparent;
  background:var(--glass-sheen) 160% 0/260% 100% no-repeat padding-box,var(--glass-fill) padding-box,var(--glass-base) padding-box,var(--glass-rim) border-box;
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:var(--glass-shadow);
  transition:background-position 1.1s cubic-bezier(.2,.8,.2,1),box-shadow .4s,transform .4s;
}
.stage:hover,.pbody:hover,.case:hover,.creds>div:hover,.fcard:hover,.no-service:hover,.dx-panel:hover{background-position:-60% 0,0 0,0 0,0 0}
.hero .chain li.on{background:var(--glass-sheen) -60% 0/260% 100% no-repeat padding-box,linear-gradient(150deg,rgba(242,255,174,.95),rgba(216,255,56,.85)) padding-box,var(--glass-base) padding-box,var(--glass-rim) border-box}
/* inner mint chips become denser glass */
.ptile,.fig{background:linear-gradient(150deg,rgba(236,246,239,.95),rgba(196,222,205,.75));border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 #fff,inset 0 -6px 14px -10px rgba(10,56,43,.25)}
.ev-portfolio .ptile{background:linear-gradient(150deg,rgba(244,244,240,.95),rgba(218,222,216,.8))}
/* tiles on the forest sections: smoked glass */
.dx-panel,.qs li.last{
  border:1px solid transparent;
  background:var(--glass-sheen) 160% 0/260% 100% no-repeat padding-box,var(--glass-dark-fill) padding-box,linear-gradient(rgba(12,58,45,.82),rgba(12,58,45,.82)) padding-box,var(--glass-dark-rim) border-box;
  -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:var(--glass-dark-shadow);
}
.dx-panel{--glass-sheen:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%)}
/* selected-work cards keep their artwork, under a glass skin */
.wcard{box-shadow:var(--glass-dark-shadow)}
.wcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.18) 50%,transparent 62%) 160% 0/260% 100% no-repeat,
             linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 30%);
  border:1px solid transparent;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.14);
  transition:background-position 1.1s cubic-bezier(.2,.8,.2,1)}
.wcard:hover::after{background-position:-60% 0,0 0}
@media(prefers-reduced-motion:reduce){.notice,.stage,.pbody,.case,.creds>div,form.inquiry,.finder,.fcard,.no-service,.wcard::after{transition:none}}
/* form fields: recessed glass inside the glass card */
form.inquiry .field input,form.inquiry .field textarea,.finder textarea{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.72));border:1px solid rgba(10,56,43,.14);box-shadow:inset 0 2px 6px rgba(10,56,43,.08),inset 0 -1px 0 rgba(255,255,255,.9)}

/* ---------- case-study cover images ---------- */
.case-top.has-cover .case-title{grid-row:2}
.case-top.has-cover .case-figs{grid-row:2/4}
.case-cover{grid-column:1/9;grid-row:3;display:block;border-radius:24px;overflow:hidden;aspect-ratio:16/9;border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 #fff,0 22px 44px -28px rgba(10,56,43,.45)}
.case-cover img{width:100%;height:100%;object-fit:cover;object-position:var(--cover-pos,72% 50%);display:block}
@media(max-width:900px){.case-top.has-cover .case-figs{grid-row:auto}.case-cover{grid-column:1/-1;grid-row:auto}}
/* home selected-work card with a cover: image on top, forest fade under the text */
.wcard-media{position:absolute;inset:0;z-index:-1;display:block}
.wcard-media img{width:100%;height:100%;object-fit:cover;object-position:75% 30%;display:block;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.wcard-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,56,43,0) 10%,rgba(10,56,43,.68) 40%,rgba(8,45,35,.95) 72%)}
.wcard:hover .wcard-media img{transform:scale(1.04)}
.wcard .wcard-media ~ .tagp{background:rgba(10,56,43,.35)}

/* insights: thumbnail beside each note */
.ins-item{grid-template-columns:3em clamp(180px,20vw,260px) minmax(0,1fr) auto;align-items:center}
.ins-thumb{display:block;aspect-ratio:3/2;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 #fff,0 18px 36px -24px rgba(10,56,43,.45)}
.ins-thumb img{width:100%;height:100%;object-fit:cover;object-position:var(--thumb-pos,60% 50%);transform-origin:var(--thumb-pos,60% 50%);transform:scale(var(--thumb-zoom,1));display:block;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ins-item:hover .ins-thumb img{transform:scale(calc(var(--thumb-zoom,1) * 1.05))}
.ins-no{align-self:start;padding-top:6px}
@media(max-width:700px){
  .ins-item{grid-template-columns:2.6em minmax(0,1fr);align-items:start}
  .ins-thumb{grid-column:2;margin-bottom:6px}
  .ins-item>div{grid-column:2}
}

/* AI section on the light page: glass ΛI video, readable accents */
#ai .ai-eyebrow{color:var(--accent-ink)}
#ai .ai-h u{color:var(--forest)}
#ai .ai-h .or{color:var(--mute)}
#ai .ai-points dt,#ai .ai-tlab{color:var(--forest)}
#ai .ai-media{background:#B9BAB5 url(/media/ai-glass-poster.jpg) 50% 50%/cover no-repeat;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 #fff,0 30px 60px -32px rgba(10,56,43,.5)}
#ai .ai-video{-webkit-mask-image:none;mask-image:none}

/* ==========================================================================
   Dark theme: follows the visitor's system setting. Brand greens become the
   ground, mint/beige become the ink, lime stays the action colour. Anything
   that sits on lime or on a forest band keeps the original forest #0A382B.
   ========================================================================== */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0B1814; --cream:#0E1D18; --surface:#12241E; --surface-2:#192F27; --mint:#1B372D;
    --ink:#E4EEE7; --forest:#E4EEE7; --fg:var(--ink); --mute:#A7B9AF; --dim:#8FA398;
    --accent-ink:#C8F25A; --rule:rgba(228,238,231,.12); --line:rgba(228,238,231,.24);
    --hi:inset 0 1px 0 rgba(255,255,255,.06); --shadow:0 24px 54px -30px rgba(0,0,0,.7);
    --glass-sheen:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.1) 50%,transparent 60%);
    --glass-fill:var(--glass-dark-fill); --glass-base:linear-gradient(rgba(18,36,30,.9),rgba(18,36,30,.9));
    --glass-rim:var(--glass-dark-rim); --glass-shadow:var(--glass-dark-shadow);
  }
  body{color-scheme:dark}
  /* on lime: keep forest text */
  .btn,.cta,.talk,.skip,.badge.client,.dx-tabs button[aria-selected="true"],.email-big:hover,.case-ask:hover,.hero .chain li.on,.hero .chain li.on b{color:#0A382B}
  ::selection{color:#0A382B}
  /* forest surfaces stay forest */
  .menu-panel,header.site.open{background:#0A382B}
  .wcard{background:#0A382B}
  .caplist li a:hover{background:var(--surface-2);color:var(--ink)}
  .seg-b[aria-pressed="true"]{background:var(--ink);color:#0B1814}
  .menu-meta small{color:#D2E3D6}
  /* chrome */
  header.site{background:rgba(11,24,20,.94)}
  .brand .logo-on-light{display:none}
  .brand .logo-on-dark{display:block}
  .notice-tag{color:#F0B36A;background:rgba(217,130,31,.14);border-color:rgba(217,130,31,.45)}
  /* hero grounds and the fades that blend the videos into the page */
  .aurora{background:linear-gradient(115deg,#0E2019 0%,#0F241C 50%,#0C1C17 100%)}
  .aurora i,.aurora b{opacity:.35}
  .aurora::after,.page-hero .aurora::after{background:linear-gradient(180deg,rgba(11,24,20,0) 55%,rgba(11,24,20,.85))}
  .hero-scrim{background:linear-gradient(90deg,rgba(11,24,20,.9) 0%,rgba(11,24,20,.7) 30%,rgba(11,24,20,.15) 55%,rgba(11,24,20,0) 70%),linear-gradient(180deg,rgba(11,24,20,0) 75%,rgba(11,24,20,.7))}
  .clip-hero{background:#0B1814}
  .clip-media{background-color:#12241E}
  .clip-media::after{background:linear-gradient(90deg,#0B1814 0%,rgba(11,24,20,.75) 14%,rgba(11,24,20,0) 40%),linear-gradient(0deg,#0B1814 0,rgba(11,24,20,0) 16%)}
  .hero .chain li{background:rgba(18,36,30,.7);border-color:rgba(255,255,255,.08)}
  /* tiles, figures, fields */
  .ptile,.fig{background:linear-gradient(150deg,#1D3B30,#16302A);border-color:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
  .ev-portfolio .ptile{background:linear-gradient(150deg,#1E2A26,#18221F)}
  form.inquiry .field input,form.inquiry .field textarea,.finder textarea,.field input,.field textarea{background:#0F1F1A;border-color:var(--line);box-shadow:inset 0 2px 6px rgba(0,0,0,.25)}
  .field input:focus,.field textarea:focus{border-color:var(--accent-ink)}
  .form-status{border-color:var(--line)}
  .form-status.err{background:rgba(255,107,94,.12);border-color:rgba(255,107,94,.45)}
  .case-cover,.ins-thumb,#ai .ai-media{border-color:rgba(255,255,255,.12);box-shadow:0 22px 44px -28px rgba(0,0,0,.7)}
  .stepmark .off,.js-sm .stepmark:not(.lit) .on{stroke:#E4EEE7}
  .step[aria-selected="true"]{border-color:rgba(255,255,255,.1)}
  .badge:not(.client){background:var(--surface-2);border-color:var(--line);color:var(--ink)}
}

/* Privacy page: single readable column */
.policy{padding:0 var(--pad) clamp(64px,8vw,120px)}
.policy-body{max-width:68ch}
.policy-body h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.4vw,34px);line-height:1.15;color:var(--forest);margin:clamp(40px,5vw,64px) 0 14px;letter-spacing:-.01em}
.policy-body h2:first-child{margin-top:0}
.policy-body h3{font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--fg);margin:26px 0 8px}
.policy-body p,.policy-body li{font-size:17px;line-height:1.6;color:var(--mute)}
.policy-body p{margin:0 0 14px}
.policy-body ul{margin:0 0 14px;padding-left:1.2em}
.policy-body li{margin:0 0 8px}
.policy-body a{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.policy-body strong{color:var(--fg);font-weight:600}
.policy-callout{border-left:3px solid var(--accent-ink);padding:4px 0 4px 18px;margin:18px 0 18px !important}

/* Motion toggle (WCAG 2.2.2): pause/play the hero videos, the question
   reveal and the drifting background. Added by site.js only where motion
   runs; never shown with reduced motion. */
.motion-toggle{position:absolute;right:var(--pad);top:clamp(14px,1.8vw,26px);z-index:5;display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px 7px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(242,241,237,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--forest);
  font:600 12.5px/1 var(--body);letter-spacing:.02em;cursor:pointer;transition:background .2s,border-color .2s}
.motion-toggle svg{width:11px;height:11px;fill:currentColor;flex:none}
.motion-toggle:hover{background:rgba(242,241,237,.92);border-color:rgba(10,56,43,.4)}
.motion-toggle:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
@media(max-width:720px){.motion-toggle{padding:6px 11px 6px 9px;font-size:12px}}
@media(prefers-color-scheme:dark){.motion-toggle{background:rgba(11,24,20,.66)}.motion-toggle:hover{background:rgba(11,24,20,.86)}}
html.motion-paused body *{animation-play-state:paused!important}
html.motion-paused .sandra-panel *{animation-play-state:running!important}