/* Landing page v2 — dark, minimal, one accent reserved for action. */

.s2{
  --bg:#0B0B0C; --bg2:#131315; --bg3:#1B1B1E;
  --text:#F4F3EE; --text2:#B9B8B2; --muted:#8E8D88;
  --line:#FFFFFF1F; --line2:#FFFFFF3D;
  --accent:#C8F53C; --ink:#0B0B0C; --bad:#FF8A7A;
  --disp:'Bricolage Grotesque','Geist',ui-sans-serif,system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --font:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-family:var(--font); color:var(--text); background:var(--bg);
  font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
.s2 *{box-sizing:border-box}
.s2 :focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.lime :focus-visible{outline-color:var(--ink)}
.lime .fcard :focus-visible{outline-color:var(--accent)}

/* Layout + type */
.w{max-width:1240px; margin:0 auto; padding:0 28px}
.sc{padding:128px 0; scroll-margin-top:60px}
.hd{display:flex; flex-direction:column; gap:20px; max-width:820px; margin-bottom:64px}
.k{font-size:12px; line-height:1; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500; margin:0}
.t1{font-family:var(--disp); font-size:clamp(44px,6.3vw,92px); line-height:.98; letter-spacing:-.045em; font-weight:600; margin:0; text-wrap:balance}
.t2{font-family:var(--disp); font-size:clamp(34px,4.4vw,62px); line-height:1.02; letter-spacing:-.04em; font-weight:600; margin:0; text-wrap:balance}
.t3{font-family:var(--disp); font-size:22px; line-height:1.2; letter-spacing:-.02em; font-weight:600; margin:0}
.s2 em{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.02em}
.ld{font-size:clamp(17px,1.5vw,20px); line-height:1.5; color:var(--text2); margin:0; text-wrap:pretty}
.tx{margin:0; color:var(--text2); font-size:16px; line-height:1.55; text-wrap:pretty}
.sm{margin:0; font-size:14px; color:var(--muted)}

/* Buttons — the accent is used for actions and nothing else */
.b{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 26px; border-radius:999px; font:500 16px/1 var(--font); border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease}
.b svg{transition:transform .2s ease; flex:none}
.b:hover svg{transform:translateX(4px)}
.b:active{transform:scale(.98)}
.b-a{background:var(--accent); color:var(--ink)}
.b-a:hover{color:var(--ink); transform:translateY(-2px); box-shadow:0 14px 40px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
.b-o{border-color:var(--line2); color:var(--text); background:transparent}
.b-o:hover{border-color:var(--text); color:var(--text)}
.b-q{color:var(--text2); background:transparent; padding:0 14px}
.b-q:hover{color:var(--text)}
.b-sm{min-height:44px; padding:0 20px; font-size:15px}
.b[disabled]{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}
.spn{width:16px; height:16px; border-radius:50%; border:2px solid #0B0B0C40; border-top-color:var(--ink); animation:spn .7s linear infinite; flex:none}
@keyframes spn{to{transform:rotate(360deg)}}

/* Header */
.h2x{position:sticky; top:0; z-index:20; background:#0B0B0CB8; backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid transparent; transition:border-color .2s ease}
.h2x.on{border-bottom-color:var(--line)}
.h2i{height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; transition:height .2s ease}
.h2x.on .h2i{height:62px}
.lg{display:inline-flex; align-items:center; gap:10px; min-height:44px; font-family:var(--disp); font-weight:600; font-size:19px; letter-spacing:-.03em; color:var(--text); text-decoration:none}
.lg:hover{color:var(--text)}
.lg i{width:18px; height:18px; border:2px solid var(--text); border-radius:5px; transform:rotate(45deg) scale(.82); flex:none}
.nv{display:flex; gap:4px}
.nv a{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:999px; font-size:15px; color:var(--text2); text-decoration:none; transition:color .15s ease,background .15s ease}
.nv a:hover{color:var(--text); background:#FFFFFF12}
.bg{display:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line2); background:transparent; color:var(--text); align-items:center; justify-content:center; cursor:pointer; padding:0}
.mm{display:flex; flex-direction:column; padding:4px 28px 28px; border-top:1px solid var(--line); animation:dr .2s ease both}
.mm a.m{display:flex; align-items:center; min-height:60px; border-bottom:1px solid var(--line); font-family:var(--disp); font-size:24px; font-weight:600; letter-spacing:-.02em; color:var(--text); text-decoration:none}
.mm .b{margin-top:24px}
@keyframes dr{from{opacity:0; transform:translateY(-6px)}}
.bar{display:none; position:sticky; bottom:0; z-index:15; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:#0B0B0CD9; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line)}
.bar .b{width:100%}

/* Hero */
.hero{position:relative; padding:56px 0 96px}
.hero::before{content:""; position:absolute; inset:0; background-image:radial-gradient(#FFFFFF24 1px,transparent 1px); background-size:28px 28px; -webkit-mask-image:radial-gradient(70% 70% at 72% 45%,#000 0%,transparent 75%); mask-image:radial-gradient(70% 70% at 72% 45%,#000 0%,transparent 75%); pointer-events:none}
.pk{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--line2); color:var(--text); font-size:15px; font-weight:500; text-decoration:none; transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
.pk:hover{background:var(--accent); border-color:var(--accent); color:var(--ink); transform:translateY(-2px)}

/* 3D layer stack */
.scene{position:relative; height:600px; perspective:1500px; --gap:74px; --rx:57deg; --rz:-43deg}
.scene:hover{--gap:104px}
.bob{position:absolute; inset:0; transform-style:preserve-3d}
.stk{position:absolute; left:50%; top:66%; width:340px; height:340px; margin:-170px 0 0 -170px; transform-style:preserve-3d; transform:rotateX(var(--rx)) rotateZ(var(--rz)); transition:transform .35s ease-out}
.ly{position:absolute; inset:0; border-radius:30px; border:1px solid #FFFFFF38; background:linear-gradient(135deg,#26262AE6,#131315E6); box-shadow:0 0 0 1px #00000040,inset 0 1px 0 #FFFFFF1F; padding:26px; display:flex; flex-direction:column; gap:12px; color:var(--text); transition:transform .6s cubic-bezier(.2,.8,.2,1),border-color .2s ease}
.ly:hover{border-color:#FFFFFF99}
.ly b{position:absolute; left:26px; bottom:22px; font:500 12px/1 var(--font); letter-spacing:.16em; text-transform:uppercase}
.ly span.n{position:absolute; right:26px; bottom:22px; font:400 12px/1 var(--font); letter-spacing:.1em; color:var(--muted)}
.l0{transform:translateZ(-70px) scale(1.5); border:0; box-shadow:none; background:radial-gradient(closest-side,#FFFFFF1A,transparent); border-radius:50%}
.l1{transform:translateZ(0)}
.l2{transform:translateZ(var(--gap))}
.l3{transform:translateZ(calc(var(--gap) * 2))}
.l4{transform:translateZ(calc(var(--gap) * 3)); background:#F4F3EE; border-color:#FFFFFF; color:var(--ink); box-shadow:0 40px 80px -20px #00000099}
.l4 span.n{color:#5E5D58}
.ln{height:8px; border-radius:4px; background:#FFFFFF2E; flex:none}
.ln.h{background:#FFFFFF8C}

/* Problem rows */
.pr{display:grid; grid-template-columns:72px minmax(0,1fr) minmax(0,1.1fr); gap:24px; align-items:baseline; padding:30px 0; border-top:1px solid var(--line); transition:background .2s ease}
.pr:last-child{border-bottom:1px solid var(--line)}
.pr .a{font-family:var(--disp); font-size:clamp(20px,2vw,26px); letter-spacing:-.02em; font-weight:600; color:var(--muted); transition:color .2s ease}
.pr .z{font-size:17px; color:var(--text2); transition:color .2s ease}
.pr:hover .a{color:var(--text); text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:var(--muted)}
.pr:hover .z{color:var(--text)}

/* Services accordion */
.sv{border-top:1px solid var(--line)}
.sv:last-child{border-bottom:1px solid var(--line)}
.svb{width:100%; display:grid; grid-template-columns:72px minmax(0,1fr) minmax(0,1.2fr) 24px; gap:24px; align-items:center; min-height:104px; padding:16px 0; background:transparent; border:0; color:var(--muted); cursor:pointer; text-align:left; font:inherit; transition:color .2s ease,padding .25s ease}
.svb .nm{font-family:var(--disp); font-size:clamp(28px,3.6vw,52px); line-height:1; letter-spacing:-.04em; font-weight:600}
.svb .li{font-size:16px; color:var(--muted)}
.svb .pl{width:16px; height:16px; background:linear-gradient(currentColor,currentColor) center/16px 1.6px no-repeat,linear-gradient(currentColor,currentColor) center/1.6px 16px no-repeat; transition:transform .25s ease}
.svb:hover{color:var(--text); padding-left:10px}
.sv.on .svb{color:var(--text)}
.sv.on .svb .pl{transform:rotate(45deg)}
.svd{display:grid; grid-template-columns:72px minmax(0,1fr) minmax(0,1.2fr) 24px; gap:24px; padding:8px 0 44px; animation:up .3s ease both}
@keyframes up{from{opacity:0; transform:translateY(10px)}}
.tk{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.tk li{display:flex; align-items:center; gap:12px; font-size:16px; color:var(--text)}
.tk li::before{content:""; width:14px; height:1px; background:var(--muted); flex:none}

/* Concept cards */
.cc{background:var(--bg2); border:1px solid var(--line); border-radius:24px; padding:12px 12px 26px; display:flex; flex-direction:column; gap:20px; transition:border-color .25s ease,transform .25s ease}
.cc:hover{border-color:var(--line2); transform:translateY(-4px)}
.th{height:220px; border-radius:16px; background:#19191C radial-gradient(#FFFFFF1A 1px,transparent 1px) 0 0/18px 18px; overflow:hidden; display:flex; align-items:center; justify-content:center; perspective:900px}
.u{width:210px; height:150px; background:#F4F3EE; border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:9px; transform:rotateX(52deg) rotateZ(-34deg); box-shadow:-26px 30px 0 -6px #FFFFFF14,-52px 60px 0 -14px #FFFFFF0A,0 30px 60px #00000080; transition:transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .7s ease}
.u.p{width:118px; height:186px; border-radius:22px}
.cc:hover .u{transform:none; box-shadow:0 0 0 0 transparent,0 0 0 0 transparent,0 24px 50px #00000080}
.u i{display:block; height:8px; border-radius:4px; background:#0B0B0C24; flex:none}
.u i.d{background:#0B0B0C}
.tg{display:inline-flex; align-items:center; height:26px; padding:0 11px; border-radius:999px; border:1px solid var(--line2); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text2); align-self:flex-start; white-space:nowrap}
.cv{background:transparent; border:0; padding:0; min-height:44px; color:var(--text); font:500 15px/1 var(--font); cursor:pointer; display:inline-flex; align-items:center; gap:8px; align-self:flex-start; text-decoration:underline; text-decoration-color:var(--line2); text-underline-offset:6px}
.cv:hover{text-decoration-color:var(--text)}
.cv svg{transition:transform .2s ease}
.cv:hover svg{transform:translateX(4px)}
.cd{margin-top:24px; background:var(--bg2); border:1px solid var(--line2); border-radius:28px; padding:clamp(24px,4vw,52px); display:flex; flex-direction:column; gap:36px; scroll-margin-top:84px; animation:up .35s ease both}

/* Industries */
.ind{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 0; font-family:var(--disp); font-size:clamp(24px,3.2vw,44px); line-height:1.15; letter-spacing:-.035em; font-weight:600; color:#FFFFFF5C}
.ind li{transition:color .2s ease}
.ind li:hover{color:var(--text)}
.ind li:not(:last-child)::after{content:"/"; margin:0 .4em; color:#FFFFFF2E; font-weight:400}

/* Principles + process */
.pp{border-top:1px solid var(--line2); padding-top:24px; display:flex; flex-direction:column; gap:12px}
.st{position:relative; padding-top:36px; display:flex; flex-direction:column; gap:10px}
.st::before{content:""; position:absolute; top:5px; left:0; right:-24px; height:1px; background:var(--line2)}
.st::after{content:""; position:absolute; top:0; left:0; width:11px; height:11px; border-radius:50%; background:var(--bg); border:1px solid var(--text2); transition:background .2s ease,transform .2s ease}
.st:hover::after{background:var(--text); transform:scale(1.25)}
.st.go::after{background:var(--accent); border-color:var(--accent)}

/* FAQ */
.fq{border-bottom:1px solid var(--line)}
.fq summary{list-style:none; display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:76px; padding:14px 0; font-family:var(--disp); font-size:21px; font-weight:600; letter-spacing:-.02em; cursor:pointer; color:var(--text)}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:""; width:14px; height:14px; flex:none; background:linear-gradient(currentColor,currentColor) center/14px 1.6px no-repeat,linear-gradient(currentColor,currentColor) center/1.6px 14px no-repeat; transition:transform .2s ease}
.fq[open] summary::after{transform:rotate(45deg)}
.fq p{margin:0 0 28px; max-width:60ch; color:var(--text2); font-size:16px}

/* Contact — the one colour block on the page */
.lime{background:var(--accent); color:var(--ink)}
.lime .k{color:#0B0B0CB3}
.fcard{background:var(--ink); color:var(--text); border-radius:32px; padding:clamp(22px,4vw,44px); box-shadow:0 40px 80px -40px #0B0B0C99}
.nx{display:flex; gap:16px; align-items:baseline; padding:16px 0; border-top:1px solid #0B0B0C33; font-size:16px}
.nx b{font:500 12px/1 var(--font); letter-spacing:.14em; flex:none; width:28px}
.fld{display:flex; flex-direction:column; gap:8px}
.lb{font-size:14px; font-weight:500; color:var(--text)}
.lb span{color:var(--muted); font-weight:400}
.in{min-height:52px; padding:14px 16px; border-radius:14px; border:1px solid var(--line2); background:var(--bg3); font:400 16px/1.4 var(--font); color:var(--text); width:100%; transition:border-color .15s ease,box-shadow .15s ease}
.in::placeholder{color:#8E8D88}
.in:hover{border-color:#FFFFFF70}
.in:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.in.bad{border-color:var(--bad)}
textarea.in{min-height:170px; resize:vertical}
.er{margin:0; font-size:14px; color:var(--bad); font-weight:500}
.cs{display:flex; flex-wrap:wrap; gap:10px}
.c{min-height:48px; padding:0 18px; border-radius:999px; border:1px solid var(--line2); background:transparent; font:500 15px/1 var(--font); color:var(--text); cursor:pointer; transition:border-color .15s ease,background .15s ease,color .15s ease}
.c:hover{border-color:var(--text)}
.c.on{background:var(--accent); border-color:var(--accent); color:var(--ink)}
.pg{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px}
.pg i{height:3px; border-radius:2px; background:#FFFFFF24; transition:background .3s ease}
.pg i.f{background:var(--accent)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.al{padding:14px 16px; border-radius:14px; font-size:15px; line-height:1.45}
.al-b{background:#FF8A7A1F; border:1px solid #FF8A7A66; color:#FFC2B8}
.al-n{background:#FFFFFF12; border:1px solid var(--line2); color:var(--text)}
.cap{display:flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; border:1px dashed var(--line2); border-radius:14px; font-size:13px; color:var(--muted)}
.fl2{display:inline-flex; align-items:center; min-height:44px; font-size:15px; color:var(--text2); text-decoration:none}
.fl2:hover{color:var(--text)}

/* Motion */
@keyframes rise2{from{opacity:0; transform:translateY(26px)}}
@keyframes bob{to{transform:translateY(-12px)}}
@media (prefers-reduced-motion:no-preference){
  .bob{animation:bob 6s ease-in-out infinite alternate}
  @supports (animation-timeline:view()){
    .rv{animation:rise2 linear both; animation-timeline:view(); animation-range:entry 0% entry 45%}
  }
}
@media (prefers-reduced-motion:reduce){
  .s2 *,.s2 *::before,.s2 *::after{animation:none !important; transition:none !important}
}

/* Responsive */
@media (max-width:1100px){.scene{height:520px} .stk{width:290px; height:290px; margin:-145px 0 0 -145px}}
@media (max-width:920px){
  .nv{display:none} .bg{display:inline-flex}
  .sc{padding:88px 0} .hd{margin-bottom:44px}
  .hero::before{-webkit-mask-image:radial-gradient(80% 50% at 50% 80%,#000 0%,transparent 75%); mask-image:radial-gradient(80% 50% at 50% 80%,#000 0%,transparent 75%)}
  .svb,.svd{grid-template-columns:40px minmax(0,1fr) 24px}
  .svb .li{display:none}
  .svd>span:first-child{display:none}
  .svd{grid-template-columns:1fr; padding-left:64px}
  .pr{grid-template-columns:40px minmax(0,1fr); gap:8px 16px}
  .pr .z{grid-column:2}
}
@media (max-width:720px){
  .bar{display:block}
  .sc{padding:72px 0}
  .hero{padding:32px 0 56px}
  .scene{height:400px; --gap:56px}
  .scene:hover{--gap:70px}
  .stk{width:220px; height:220px; margin:-110px 0 0 -110px}
  .ly{padding:18px; border-radius:22px}
  .ly b{left:18px; bottom:16px; font-size:10px} .ly span.n{display:none}
  .svb{min-height:76px} .svd{padding-left:0}
  .st::before{right:0}
}
@media (max-width:520px){
  .hcta{display:none}
  .w{padding:0 20px}
  .brow .b{width:100%}
}

/* ───────── Motion layer ───────── */
@property --gap{syntax:'<length>'; inherits:true; initial-value:74px}

.t1{font-size:clamp(42px,5.6vw,80px)}
.hl{display:block}
.cy{display:grid}
.cy em{grid-area:1/1; white-space:nowrap; opacity:0; padding-bottom:.08em}
.cy em:first-child{opacity:1}

/* Scroll progress */
.prg{position:absolute; left:0; bottom:-1px; width:100%; height:2px; background:var(--accent); transform-origin:left; transform:scaleX(0); pointer-events:none}

/* Buttons: light sweep on hover */
.b-a{position:relative; overflow:hidden}
.b-a::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 35%,#FFFFFF99 50%,transparent 65%); transform:translateX(-120%); pointer-events:none}
.b-a:hover::after{transform:translateX(120%); transition:transform .7s ease}

/* Hero glow */
.aur{position:absolute; left:50%; top:58%; width:460px; height:460px; margin:-230px 0 0 -230px; border-radius:50%; background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 34%,transparent),transparent); filter:blur(36px); opacity:.75; pointer-events:none}

/* Marquee band */
.mq{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0}
.mqt{display:flex; width:max-content}
.mqt span{font-family:var(--disp); font-weight:600; font-size:clamp(34px,5vw,72px); line-height:1; letter-spacing:-.04em; white-space:nowrap; color:transparent; -webkit-text-stroke:1px #FFFFFF66; padding-right:.5em; display:flex; align-items:center; gap:.5em; transition:color .3s ease}
.mqt span::after{content:""; width:.18em; height:.18em; border-radius:50%; background:var(--accent); flex:none}
.mq:hover .mqt{animation-play-state:paused}
.mqt span:hover{color:var(--text)}

/* Problem rows: inner span carries the strike line */
.pr .a span{background:linear-gradient(currentColor,currentColor) 0 58%/0% 1.5px no-repeat; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.pr:hover .a{text-decoration:none}
.pr:hover .a span{background-size:100% 1.5px; transition:background-size .4s ease}

/* Card pointer glow */
.cc{position:relative; overflow:hidden}
.cc::before{content:""; position:absolute; inset:0; background:radial-gradient(420px circle at var(--mx,50%) var(--my,-30%),#FFFFFF24,transparent 62%); opacity:0; transition:opacity .35s ease; pointer-events:none}
.cc:hover::before{opacity:1}

/* Service rows */
.svb .nm{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.svb:hover .nm{transform:translateX(8px)}
.sv.on .svb .nm{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.02em}

.drift{display:flex; flex-direction:column; gap:10px}
.fq[open] p{animation:up .3s ease both}

@keyframes in{from{opacity:0; transform:translateY(34px); filter:blur(10px)}}
@keyframes cyc{0%{opacity:0; transform:translateY(.45em); filter:blur(8px)} 3.5%{opacity:1; transform:none; filter:none} 13.5%{opacity:1; transform:none; filter:none} 16.6%{opacity:0; transform:translateY(-.45em); filter:blur(8px)} 100%{opacity:0}}
@keyframes mqx{to{transform:translateX(-50%)}}
@keyframes lay{from{opacity:0; translate:0 0 280px}}
@keyframes orbit{from{transform:translate(-50px,20px) scale(.9)} to{transform:translate(60px,-30px) scale(1.15)}}
@keyframes march{to{stroke-dashoffset:-90}}
@keyframes drawl{to{stroke-dashoffset:0}}
@keyframes popin{from{transform:scale(0)}}
@keyframes ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)} 70%,100%{box-shadow:0 0 0 18px transparent}}
@keyframes typ{0%{transform:scaleX(0); opacity:1} 12%,88%{transform:scaleX(1); opacity:1} 100%{transform:scaleX(1); opacity:0}}
@keyframes tile{0%,100%{background:transparent} 50%{background:#FFFFFF2E}}
@keyframes explode{to{--gap:132px}}
@keyframes prg{to{transform:scaleX(1)}}
@keyframes strike{to{background-size:100% 1.5px}}
@keyframes dimout{to{color:#6F6E69}}
@keyframes lightin{from{opacity:.35; transform:translateX(-18px)}}
@keyframes litup{from{background-position:0 100%} to{background-position:0 0}}
@keyframes d1{from{transform:translateX(4%)} to{transform:translateX(-14%)}}
@keyframes d2{from{transform:translateX(-14%)} to{transform:translateX(4%)}}
@keyframes grow{from{clip-path:inset(0 7% round 64px)} to{clip-path:inset(0 0 round 0)}}
@keyframes lnx{from{transform:scaleX(0)}}

@media (prefers-reduced-motion:no-preference){
  /* Load choreography */
  .a0,.a1,.a2,.a3,.a4,.a5,.a6{animation:in .9s cubic-bezier(.2,.8,.2,1) both}
  .a1{animation-delay:.08s} .a2{animation-delay:.18s} .a3{animation-delay:.28s} .a4{animation-delay:.42s} .a5{animation-delay:.54s} .a6{animation-delay:.66s}
  .cy em{animation:cyc 15s infinite both}
  .cy em:nth-child(2){animation-delay:2.5s} .cy em:nth-child(3){animation-delay:5s} .cy em:nth-child(4){animation-delay:7.5s} .cy em:nth-child(5){animation-delay:10s} .cy em:nth-child(6){animation-delay:12.5s}
  .pulse{animation:ring 2.6s ease-out 1.6s infinite}
  .mqt{animation:mqx 46s linear infinite}

  /* The stack assembles, then stays alive */
  .ly{animation:lay 1.1s cubic-bezier(.2,.8,.2,1) both}
  .l1{animation-delay:.25s} .l2{animation-delay:.4s} .l3{animation-delay:.55s} .l4{animation-delay:.7s}
  .aur{animation:orbit 12s ease-in-out infinite alternate}
  .march{animation:march 5s linear infinite}
  .draw{stroke-dasharray:440; stroke-dashoffset:440; animation:drawl 1.8s cubic-bezier(.6,0,.2,1) 1.5s forwards}
  .pop{transform-box:fill-box; transform-origin:center; animation:popin .5s cubic-bezier(.3,1.6,.5,1) 3.1s both}
  .l3 .ln{transform-origin:left; animation:typ 6s ease-out infinite both}
  .l3 .ln:nth-child(2){animation-delay:.2s} .l3 .ln:nth-child(3){animation-delay:.4s} .l3 .ln:nth-child(4){animation-delay:.6s} .l3 .ln:nth-child(5){animation-delay:.8s} .l3 .ln:nth-child(6){animation-delay:1s} .l3 .ln:nth-child(7){animation-delay:1.2s} .l3 .ln:nth-child(8){animation-delay:1.4s} .l3 .ln:nth-child(9){animation-delay:1.6s}
  .tiles>div{animation:tile 3.6s ease-in-out infinite}
  .tiles>div:nth-child(2){animation-delay:.5s} .tiles>div:nth-child(3){animation-delay:1s}
  .tick{stroke-dasharray:24; stroke-dashoffset:24; animation:drawl .5s ease .25s forwards}

  /* Scroll-driven: only where the browser supports it; everything is visible without it */
  @supports (animation-timeline:view()){
    .prg{animation:prg linear both; animation-timeline:scroll(root)}
    .rv{animation:in linear both; animation-timeline:view(); animation-range:entry 0% entry 55%}
    .sg>*{animation:in linear both; animation-timeline:view(); animation-range:entry 0% entry 50%}
    .sg>*:nth-child(3n+2){animation-range:entry 12% entry 62%}
    .sg>*:nth-child(3n){animation-range:entry 24% entry 74%}
    .pr .a{animation:dimout linear both; animation-timeline:view(); animation-range:cover 38% cover 52%}
    .pr .a span{animation:strike linear both; animation-timeline:view(); animation-range:cover 34% cover 50%}
    .pr .z{animation:lightin linear both; animation-timeline:view(); animation-range:cover 30% cover 48%}
    .pr:hover .a{color:var(--muted)}
    .lit{background:linear-gradient(180deg,var(--text) 50%,#FFFFFF33 50%) 0 100%/100% 200%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:litup linear both; animation-timeline:view(); animation-range:entry 30% cover 55%}
    .drift{overflow:visible}
    .drift .ind{flex-wrap:nowrap; white-space:nowrap; width:max-content}
    .d1{animation:d1 linear both; animation-timeline:view()}
    .d2{animation:d2 linear both; animation-timeline:view()}
    .st::before{transform-origin:left; animation:lnx linear both; animation-timeline:view(); animation-range:entry 20% entry 90%}
    .grow{animation:grow linear both; animation-timeline:view(); animation-range:entry 0% entry 60%}
  }
  @supports (animation-timeline:scroll()){
    @media (min-width:721px){
      .scene{animation:explode linear both; animation-timeline:scroll(root); animation-range:0px 640px}
    }
  }
}

/* ───────── Audit pass ───────── */
/* CTA band: one at each decision point, always the same label */
.ct{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px 40px; margin-top:80px; padding:28px 32px; border:1px solid var(--line2); border-radius:28px; background:var(--bg2)}
.ct>div{display:flex; flex-direction:column; gap:6px; flex:1 1 320px}
a.cv{color:var(--text)}
.an{display:grid; grid-template-columns:72px minmax(0,1fr) minmax(0,1.1fr); gap:24px; align-items:baseline; padding:28px 0; border-top:1px solid var(--line)}
.an:last-child{border-bottom:1px solid var(--line)}
.th:hover .u{transform:none; box-shadow:0 0 0 0 transparent,0 0 0 0 transparent,0 24px 50px #00000080}
.meta{display:flex; flex-wrap:wrap; gap:16px 56px; padding-top:24px; border-top:1px solid var(--line)}
.meta div{display:flex; flex-direction:column; gap:8px}

/* Hero dots follow the pointer */
.hero{--hx:72%; --hy:45%}
.hero::before{-webkit-mask-image:radial-gradient(560px circle at var(--hx) var(--hy),#000 0%,transparent 75%); mask-image:radial-gradient(560px circle at var(--hx) var(--hy),#000 0%,transparent 75%)}
@media (max-width:920px){.hero{--hx:50%; --hy:78%} .an{grid-template-columns:40px minmax(0,1fr); gap:8px 16px} .an>:last-child{grid-column:2}}
@media (max-width:720px){.ct{padding:24px; margin-top:56px} .ct .b{width:100%}}

/* Calmer motion: nothing loops except the slow float, the glow, the word cycle and the band */
@keyframes typ1{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:no-preference){
  .pulse{animation:ring 2.6s ease-out 1.6s 3}
  .l3 .ln{animation:typ1 .7s ease-out both}
  .tiles>div,.march{animation:none}
  .mqt{animation-duration:60s}
  @supports (animation-timeline:view()){
    .rv{animation-name:rise2}
    .sg>*{animation-name:rise2}
  }
}

/* ───────── Test pass ───────── */
.lime .fcard .k{color:var(--muted)}
.bar.off{display:none}
.t1{font-size:clamp(40px,5vw,72px)}
.sc{padding:88px 0}
.hd{margin-bottom:44px}
.ct{margin-top:56px}
.pr{padding:24px 0}
.svb{min-height:92px}
.th{height:200px}
.sm a{color:inherit; text-decoration:underline; text-underline-offset:3px}
.sm a:hover{color:var(--text)}
@media (max-width:720px){.sc{padding:64px 0}}
.fq summary{min-height:64px}
.hero{padding-bottom:72px}
.ct{margin-top:48px}
.sc{padding:84px 0}
@media (max-width:720px){.sc{padding:64px 0} .hero{padding-bottom:48px}}
.sc{padding:80px 0}
/* Phone: the form comes straight after the heading, so a tap on any button lands on it */
@media (max-width:720px){
  .sc{padding:64px 0}
  .lime>.w{flex-direction:column; flex-wrap:nowrap; gap:24px; align-items:stretch}
  .lcol{display:contents !important}
  .lime .fcard{order:1; flex:none !important; width:100%}
  .lcol .aft{order:2; margin-top:0 !important}
}

/* ───────── Production base (outside the design canvas) ───────── */
html{scroll-behavior:smooth; background:#0B0B0C; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:#0B0B0C}
a{color:#F4F3EE}
a:hover{color:#C8F53C}
[hidden]{display:none !important}
.skip{position:absolute; left:16px; top:-80px; z-index:60; display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; background:#C8F53C; color:#0B0B0C; font:500 15px/1 'Geist',system-ui,sans-serif; text-decoration:none; transition:top .15s ease}
.skip:focus{top:12px; color:#0B0B0C}
.cookie{position:fixed; left:16px; right:16px; bottom:16px; z-index:50; max-width:400px; padding:20px; border-radius:20px; background:#131315; border:1px solid #FFFFFF3D; box-shadow:0 30px 60px -20px #000000CC; color:#F4F3EE; font:400 14px/1.5 'Geist',system-ui,sans-serif; display:flex; flex-direction:column; gap:14px}
.cookie p{margin:0; color:#B9B8B2}
.cookie div{display:flex; gap:10px}
.cookie .b{flex:1}
.lime .al-b{background:#3A1410; border-color:#FF8A7A66}
.al a{color:inherit; font-weight:500}