:root{
  --bg:#080908;
  --surface:#0e110f;
  --surface-2:#141714;
  --paper:#f4f2ec;
  --muted:rgba(244,242,236,.6);
  --muted-2:rgba(244,242,236,.58);
  --line:rgba(244,242,236,.11);
  --lime:#d9ff3f;
  --lime-2:#baff1e;
  --max:1280px;
  --ease:cubic-bezier(.16,1,.3,1);
  --h1:clamp(42px,5.4vw,76px);
  --h2:clamp(30px,3.4vw,50px);
  --h3:clamp(19px,1.7vw,25px);
  --pad:clamp(18px,4vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--paper);font-family:"Inter Tight",Inter,system-ui,sans-serif;font-size:16px;overflow-x:hidden}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
img{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.05}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.container{width:min(calc(100% - (var(--pad) * 2)),var(--max));margin-inline:auto}
.mono{font-family:"DM Mono",monospace;letter-spacing:.11em;text-transform:uppercase}
.kicker,.eyebrow{font-size:10px;line-height:1.3;color:var(--lime);letter-spacing:.14em;text-transform:uppercase;font-family:"DM Mono",monospace}
.muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;border:1px solid rgba(244,242,236,.18);padding:12px 18px;font-size:13px;font-weight:600;cursor:pointer;background:transparent;color:var(--paper);transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease}
.btn:hover{border-color:rgba(244,242,236,.58);background:rgba(244,242,236,.05)}
.btn.primary{background:var(--lime);border-color:var(--lime);color:#070907;font-weight:700}
.btn.primary:hover{background:var(--lime-2);border-color:var(--lime-2);transform:translateY(-2px)}
.btn.ghost:hover{color:var(--paper)}
.btn.lime-line{border-color:rgba(217,255,63,.42);color:var(--lime)}
.btn.lime-line:hover{background:rgba(217,255,63,.1);border-color:var(--lime)}
.btn.small{padding:9px 14px;font-size:11px}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:80;height:76px;display:flex;align-items:center;background:rgba(8,9,8,.42);backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);border-bottom:1px solid rgba(244,242,236,.07);transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease}
.site-header.scrolled{background:rgba(8,9,8,.86);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;gap:22px}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none}
.brand img{width:34px;height:34px;object-fit:cover;object-position:center;border-radius:9px}
.brand-text{font-size:13px;line-height:1;letter-spacing:.02em}
.brand-text strong{font-weight:800}
.nav-links{display:flex;align-items:center;gap:22px;margin-left:auto}
.nav-links a{position:relative;font-size:13px;color:rgba(244,242,236,.6);transition:color .25s ease}
.nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--lime);transition:right .3s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--paper)}
.nav-links a:hover:after,.nav-links a.active:after{right:0}
.nav-actions{display:flex;align-items:center;gap:8px;margin-left:18px}
.nav-cta{background:rgba(244,242,236,.04)}
/* "Website Portfolio" is a longer label — tighten the row before the burger takes over. */
@media (min-width:821px) and (max-width:1010px){
  .nav-links{gap:16px}
  .nav-links a{font-size:12px}
  .nav{gap:14px}
}
.nav-cta:hover{background:var(--lime);border-color:var(--lime);color:#050605;transform:translateY(-1px)}
.menu-btn{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:999px;background:rgba(244,242,236,.04);color:var(--paper);cursor:pointer;font-size:17px;line-height:1}
.mobile-nav{position:fixed;inset:76px 12px auto 12px;z-index:79;padding:10px;border:1px solid var(--line);background:rgba(10,11,10,.97);backdrop-filter:blur(18px);border-radius:18px;display:none;flex-direction:column}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:14px 13px;border-radius:12px;color:rgba(244,242,236,.72);font-size:15px}
.mobile-nav a:hover,.mobile-nav a.active{background:rgba(244,242,236,.06);color:var(--lime)}
.mobile-nav a:last-child{border-top:1px solid var(--line);border-radius:0 0 12px 12px;margin-top:6px;padding-top:16px}

/* ---------- site chrome: live background, cursor, progress, studio status ---------- */
#atmos,#globe{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#atmos{z-index:5;mix-blend-mode:screen;opacity:.92}
#globe{z-index:0;opacity:1}
main{position:relative;z-index:1}
/* Light global veil only — the globe has to be readable before anything else.
   Legibility comes from each panel's own fill, not from dimming the whole page. */
main:before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(8,9,8,.18);pointer-events:none}
body.globe-on #atmos{display:none}
#progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--lime),rgba(217,255,63,.25));box-shadow:0 0 14px rgba(217,255,63,.45)}
@keyframes utx-page-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@supports (animation-timeline: scroll()) {
  #progress {
    animation: utx-page-progress auto linear both;
    animation-timeline: scroll(root block);
  }
}
body.has-cursor,body.has-cursor a,body.has-cursor button,body.has-cursor input,body.has-cursor textarea,body.has-cursor select,body.has-cursor .cat-opt,body.has-cursor .service-row{cursor:none}
#cur-dot,#cur-ring{position:fixed;top:0;left:0;z-index:200;pointer-events:none;border-radius:50%;display:none;will-change:transform}
body.has-cursor #cur-dot{display:block;width:5px;height:5px;background:var(--lime);box-shadow:0 0 8px rgba(217,255,63,.8)}
body.has-cursor #cur-ring{display:grid;place-items:center;width:24px;height:24px;border:1px solid rgba(217,255,63,.45);font-family:"DM Mono",monospace;font-size:6.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);opacity:.45;transition:opacity .25s ease,background .25s ease,border-color .25s ease}
#cur-ring.on{opacity:.95;background:rgba(217,255,63,.07);border-color:var(--lime)}
#cur-ring.press{background:rgba(217,255,63,.2)}
#hud{position:fixed;left:18px;bottom:18px;z-index:110;width:216px;font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:14px;background:rgba(10,13,11,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.hud-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;cursor:pointer;user-select:none}
.hud-head .lbl{display:flex;align-items:center;color:var(--lime)}
.hud-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime);display:inline-block;margin-right:7px;animation:hudPulse 1.8s infinite}
@keyframes hudPulse{0%,100%{opacity:1}50%{opacity:.25}}
.hud-toggle{border:1px solid var(--line);background:rgba(244,242,236,.04);color:rgba(244,242,236,.6);width:20px;height:20px;border-radius:6px;font-size:10px;line-height:1;display:grid;place-items:center;flex:none}
.hud-body{padding:0 12px 11px}
#hud.collapsed .hud-body{display:none}
#hud .hud-row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:rgba(244,242,236,.58)}
#hud .hud-row b{color:rgba(244,242,236,.82);font-weight:400}
#hud .hud-row b.ok{color:var(--lime)}
#hud .hud-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0 2px}
#hud .hud-stat{border:1px solid var(--line);border-radius:9px;padding:7px 8px;background:rgba(244,242,236,.02)}
#hud .hud-stat i{display:block;font-style:normal;font-size:14px;letter-spacing:0;color:var(--lime);font-family:"Inter Tight",sans-serif;font-weight:700}
#hud .hud-stat span{display:block;margin-top:2px;font-size:7px;color:rgba(244,242,236,.58)}
#atmos-readout{display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);color:rgba(244,242,236,.58)}
#to-top{position:fixed;right:18px;bottom:18px;z-index:115;width:44px;height:44px;border-radius:50%;border:1px solid rgba(217,255,63,.38);background:rgba(10,13,11,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--lime);font-size:15px;line-height:1;display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s ease,color .3s ease,box-shadow .3s ease}
#to-top.show{opacity:1;transform:none;pointer-events:auto}
#to-top:hover{background:var(--lime);color:#050605;box-shadow:0 0 26px rgba(217,255,63,.35)}
/* Phones: sit on the same baseline as the studio HUD so the bottom row reads as one bar. */
@media (max-width:760px){
  #to-top{right:12px;bottom:12px;width:40px;height:40px}
  body:has(#to-top.show) .quote-bar{bottom:62px}
}
@media (max-width:700px){#hud{width:min(190px,calc(100vw - 36px));left:12px;bottom:12px;font-size:8px}}

/* ---------- flywheel (pinned, scroll-driven) ---------- */
/* 260vh alone left only ~830px of travel on a short window, so the whole sequence finished in
   eight wheel notches. The floor guarantees enough scroll distance to turn smoothly. */
.flywheel-section{position:relative;height:max(260vh,calc(100vh + 1100px));background:rgba(7,9,10,.8);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fw-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.fw-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(244,242,236,.14) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(circle at 50% 52%,black 8%,transparent 66%);opacity:.45}
.fw-glow{position:absolute;left:50%;top:52%;width:min(60vmin,460px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(217,255,63,.12),transparent 62%);filter:blur(22px)}
.fw-inner{position:relative;z-index:2;width:min(calc(100% - (var(--pad) * 2)),980px);display:grid;gap:clamp(10px,2.4vh,24px);justify-items:center;text-align:center}
.fw-head h2{font-size:clamp(26px,3.8vw,46px);margin-top:8px}
.fw-head p{margin:10px auto 0;max-width:460px;color:var(--muted);font-size:14px;line-height:1.6}
.fw-stage{position:relative;width:min(44vw,50svh,440px);aspect-ratio:1;margin-top:clamp(6px,2vh,20px)}
.fw-wheel{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fw-guide{fill:none;stroke:rgba(244,242,236,.09);stroke-width:1}
.fw-ticks{fill:none;stroke:rgba(244,242,236,.14);stroke-width:1;stroke-dasharray:1 7;transform-origin:100px 100px;animation:fwSpin 42s linear infinite}
@keyframes fwSpin{to{transform:rotate(360deg)}}
.fw-path{fill:none;stroke-width:3;stroke-linecap:round;opacity:0}
.fw-tip{fill:var(--lime);opacity:0}
.fw-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-content:center;justify-items:center;gap:5px;text-align:center;width:clamp(56px,22%,96px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 34%,rgba(217,255,63,.16),rgba(10,13,11,.96) 62%);border:1px solid rgba(217,255,63,.34);box-shadow:0 0 44px rgba(217,255,63,.12);opacity:0;transition:opacity .6s var(--ease)}
.fw-core i{display:block;font-style:normal;font-size:15px;line-height:1;color:var(--lime);text-shadow:0 0 12px rgba(217,255,63,.6)}
.fw-core b{display:block;font-family:"DM Mono",monospace;font-size:6.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,242,236,.66);font-weight:400}
.fw-nodes{position:absolute;inset:0}
/* opacity/transform are written every frame by the scroll driver now, so a long transition here
   would just make it lag behind the wheel. Only the border still animates. */
.fw-node{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:9px;padding:7px 13px 7px 7px;border:1px solid var(--line);border-radius:14px;background:#0d100e;box-shadow:0 16px 34px rgba(0,0,0,.5);white-space:nowrap;opacity:0;transform:translate(-50%,-50%) scale(.86);transition:border-color .35s ease}
.fw-node.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.fw-node:hover{border-color:rgba(217,255,63,.5)}
.fw-node .ic{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;background:rgba(217,255,63,.12);border:1px solid rgba(217,255,63,.28);color:var(--lime);font-size:12px}
.fw-node .tx{text-align:left;line-height:1.15}
.fw-node .tx b{display:block;font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--paper)}
.fw-node .tx i{display:block;font-style:normal;font-family:"DM Mono",monospace;font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,242,236,.58);margin-top:3px}
.fw-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,242,236,.58)}
/* The wheel keeps the same ring layout on every width — the stage and the hub
   shrink instead of the pills dropping into a grid. */
@media (max-width:1080px){
  .fw-stage{width:min(56vw,46svh,380px)}
}
@media (max-width:820px){
  .fw-stage{width:min(80vw,330px)}
  .fw-node{padding:5px 9px 5px 5px;gap:6px;border-radius:11px}
  .fw-node .ic{width:22px;height:22px;font-size:10px}
  .fw-node .tx b{font-size:10.5px}
  .fw-node .tx i{display:none}
  .fw-core{width:clamp(48px,20%,72px)}
  .fw-core b{font-size:5.5px}
}
@media (max-width:640px){
  .fw-stage{width:min(92vw,320px)}
  .fw-node{padding:4px 8px 4px 4px;gap:5px;border-radius:10px}
  .fw-node .ic{width:19px;height:19px;font-size:9px;border-radius:6px}
  .fw-node .tx b{font-size:9.5px}
  .fw-core{width:clamp(42px,18%,62px)}
  .fw-core i{font-size:12px}
  .fw-core b{font-size:5px;letter-spacing:.1em}
  .fw-hint{bottom:14px}
}
@media (max-width:400px){
  .fw-stage{width:min(94vw,300px)}
  .fw-node .ic{display:none}
  .fw-node{padding:5px 9px}
}

/* ---------- reveal engine ---------- */
.reveal{opacity:0;transform:translateY(52px);transition:opacity .8s var(--ease),transform .8s var(--ease);will-change:opacity,transform}
.reveal.anim-up{transform:translateY(74px)}
.reveal.is-revealed{opacity:1;transform:none;will-change:auto}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}
.img-mask{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}
.img-mask.is-revealed{clip-path:inset(0 0 0 0)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:94svh;display:flex;align-items:flex-end;overflow:hidden;padding:120px 0 34px}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 74% 40%,rgba(217,255,63,.05),transparent 46%),linear-gradient(180deg,rgba(8,9,8,.3),transparent 34%,rgba(8,9,8,.42)),linear-gradient(96deg,rgba(8,9,8,.74) 0%,rgba(8,9,8,.46) 32%,rgba(8,9,8,.04) 60%,transparent 76%)}
.hero-stage{position:absolute;inset:0;z-index:0;perspective:1300px;perspective-origin:72% 46%;overflow:hidden}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
body.webgl-on .hero-3d{display:none}
.hero-3d{position:absolute;right:clamp(-70px,-3vw,0px);top:50%;width:min(54vw,660px);aspect-ratio:1;transform-style:preserve-3d;transform:translateY(-50%) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.16,1,.3,1)}
.d-panel{position:absolute;inset:9%;transform-style:preserve-3d;transform:translateZ(46px) rotateY(-15deg);border-radius:22px;overflow:hidden;border:1px solid rgba(217,255,63,.18);box-shadow:0 60px 150px rgba(0,0,0,.65),inset 0 0 60px rgba(0,0,0,.4)}
.d-panel img{width:100%;height:100%;object-fit:cover;animation:panelDrift 22s ease-in-out infinite alternate}
.d-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(217,255,63,.1),transparent 40%,rgba(0,0,0,.45));pointer-events:none}
.d-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(244,242,236,.1)}
.d-ring.a{transform:rotateX(76deg) translateZ(-16px)}
.d-ring.b{inset:7%;transform:rotateY(70deg)}
.d-arc{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:rgba(217,255,63,.75);border-right-color:rgba(217,255,63,.18);filter:drop-shadow(0 0 12px rgba(217,255,63,.25))}
.d-arc.a{transform:rotateX(76deg);animation:spinFlat 14s linear infinite}
.d-arc.b{inset:7%;transform:rotateY(70deg);animation:spinSide 21s linear infinite reverse;border-top-color:rgba(244,242,236,.58)}
.d-arc.c{inset:16%;transform:rotateX(58deg) rotateY(28deg);animation:spinTilt 28s linear infinite}
.d-chip{position:absolute;border-radius:14px;border:1px solid rgba(244,242,236,.16);background:linear-gradient(150deg,rgba(244,242,236,.1),rgba(8,9,8,.55));box-shadow:0 30px 70px rgba(0,0,0,.5)}
.d-chip.c1{width:27%;aspect-ratio:1;top:0;right:-7%;transform:translateZ(150px) rotate(-8deg);animation:float3d 9s ease-in-out infinite}
.d-chip.c2{width:19%;aspect-ratio:1.2;bottom:5%;left:-9%;transform:translateZ(110px) rotate(7deg);animation:float3d 12s ease-in-out -3s infinite}
.d-chip.c3{width:12%;aspect-ratio:1;bottom:22%;right:-4%;border-color:rgba(217,255,63,.4);transform:translateZ(190px);animation:float3d 8s ease-in-out -5s infinite}
.d-floor{position:absolute;left:-24%;right:-24%;bottom:-14%;height:48%;background-image:linear-gradient(rgba(217,255,63,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(217,255,63,.09) 1px,transparent 1px);background-size:46px 46px;transform:rotateX(79deg);mask-image:linear-gradient(to top,black,transparent 70%);opacity:.55}
.hero-grain{position:absolute;inset:0;z-index:1;opacity:.45;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:3px 3px;mix-blend-mode:overlay}
@keyframes panelDrift{from{transform:scale(1.02)}to{transform:scale(1.12) translate3d(-2%,-2%,0)}}
@keyframes spinFlat{to{transform:rotateX(76deg) rotate(360deg)}}
@keyframes spinSide{to{transform:rotateY(70deg) rotate(360deg)}}
@keyframes spinTilt{to{transform:rotateX(58deg) rotateY(28deg) rotate(360deg)}}
@keyframes float3d{0%,100%{translate:0 0}50%{translate:0 -16px}}
.hero-inner{position:relative;z-index:3;width:min(calc(100% - (var(--pad) * 2)),var(--max))}
.hero-copyblock{max-width:660px}
.hero-title{font-size:var(--h1);line-height:1;letter-spacing:-.045em;font-weight:800;text-transform:uppercase;margin:16px 0 20px;text-shadow:0 2px 26px rgba(0,0,0,.62)}
.hero-title .accent{color:var(--lime)}
.hero-title em{font-style:normal;display:block}
.hero-copy{max-width:460px;font-size:16px;line-height:1.55;color:var(--muted);margin-bottom:26px;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:38px;padding-top:20px;border-top:1px solid var(--line);font-size:10px;color:var(--muted-2)}
.hero-facts strong{color:var(--paper);font-weight:500}
.scroll-note{position:absolute;right:var(--pad);bottom:22px;z-index:3;color:rgba(244,242,236,.58);font-size:9px;display:flex;align-items:center;gap:9px}
.scroll-note:before{content:"";width:38px;height:1px;background:var(--line)}

/* ---------- marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:rgba(10,12,10,.92);padding:12px 0;display:grid;gap:8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-row{display:flex;width:max-content;animation:marquee 52s linear infinite}
.marquee-row.rev{animation-duration:60s;animation-direction:reverse}
.marquee:hover .marquee-row{animation-play-state:paused}
.marquee-group{display:flex;align-items:center;gap:26px;padding-right:26px;flex:none}
.marquee-group span{font-family:"DM Mono",monospace;letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;white-space:nowrap;color:rgba(244,242,236,.58)}
.marquee-group span strong{color:var(--lime);font-weight:500}
.marquee-group i{color:rgba(217,255,63,.42);font-style:normal;font-size:9px}
.marquee-row.rev .marquee-group span strong{color:var(--paper)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- section shell ---------- */
.section{padding:clamp(70px,9vw,130px) 0}
.section.tight{padding-top:clamp(30px,4vw,54px)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:44px}
.display{font-size:var(--h2);line-height:1.02;letter-spacing:-.045em;margin:0;font-weight:700}
.section-copy{max-width:380px;font-size:15px;line-height:1.6;color:var(--muted);margin:0}
.lime{color:var(--lime)}
.text-link{display:inline-flex;align-items:center;gap:9px;font-size:12px;min-height:24px}
.text-link:hover{color:var(--lime)}

/* ---------- system timeline (scroll + reveal) ---------- */
.system{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:radial-gradient(circle at 12% 22%,rgba(217,255,63,.05),transparent 30%),rgba(10,13,11,.9);padding:clamp(64px,8vw,110px) 0 clamp(70px,9vw,120px)}
.system-grid{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(244,242,236,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(244,242,236,.03) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(circle at 50% 40%,black 10%,transparent 76%);pointer-events:none}
.system-shell{position:relative;display:grid;grid-template-columns:minmax(240px,.78fr) minmax(0,1.22fr);gap:clamp(30px,5vw,72px);align-items:start}
.system-aside{position:sticky;top:110px}
.system-aside h2{font-size:var(--h2);line-height:1.02;margin:12px 0 16px}
.system-aside p{color:var(--muted);line-height:1.6;font-size:15px;max-width:300px}
.system-meter{margin-top:30px;display:flex;align-items:center;gap:14px;font-size:10px;color:var(--muted-2)}
.system-meter strong{font-family:"DM Mono",monospace;color:var(--lime);font-size:24px;letter-spacing:0}
.system-bar{flex:1;height:2px;background:rgba(244,242,236,.1);position:relative;overflow:hidden}
.system-bar span{position:absolute;inset:0;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .2s linear}
.timeline{position:relative;padding-left:46px}
.timeline-rail{position:absolute;left:8px;top:10px;bottom:10px;width:2px;background:rgba(244,242,236,.1)}
.timeline-fill{position:absolute;inset:0;background:linear-gradient(180deg,var(--lime),rgba(217,255,63,.35));transform:scaleY(0);transform-origin:top}
.t-item{position:relative;margin-bottom:14px}
.t-dot{position:absolute;left:-46px;top:26px;width:18px;height:18px;border-radius:50%;background:#0d100e;border:3px solid #2c302c;transition:background .4s ease,border-color .4s ease,box-shadow .4s ease}
.t-item.is-active .t-dot{background:var(--lime);border-color:var(--lime);box-shadow:0 0 0 6px rgba(217,255,63,.1),0 0 24px rgba(217,255,63,.4)}
.t-card{border:1px solid var(--line);border-radius:22px;padding:22px 24px 24px;background:linear-gradient(180deg,rgba(244,242,236,.028),rgba(244,242,236,.008));transition:transform .5s var(--ease),border-color .35s ease,box-shadow .5s var(--ease)}
.t-item:hover .t-card{transform:translateY(-4px);border-color:rgba(217,255,63,.34);box-shadow:0 30px 70px rgba(0,0,0,.35),0 0 30px rgba(217,255,63,.05)}
.t-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:9px;color:var(--lime)}
.t-meta .t-no{font-family:"DM Mono",monospace;letter-spacing:.1em;color:rgba(244,242,236,.58)}
.t-card h3{font-size:var(--h3);line-height:1.1;margin:10px 0 8px}
.t-card p{color:var(--muted);line-height:1.55;font-size:14px;max-width:520px}
.t-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.pill{border:1px solid rgba(244,242,236,.12);border-radius:999px;padding:6px 10px;font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,242,236,.6)}
.t-item.is-active .pill{border-color:rgba(217,255,63,.24);color:rgba(244,242,236,.75)}

/* ---------- message to result ---------- */
.flow{position:relative;padding:clamp(70px,9vw,130px) 0;overflow:hidden;background:radial-gradient(circle at 84% 30%,rgba(217,255,63,.06),transparent 26%),rgba(8,9,8,.86)}
.flow-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(32px,5vw,64px);align-items:center}
.flow-copy h2{font-size:var(--h2);line-height:1.02;margin:14px 0 16px;text-transform:uppercase;font-weight:800;letter-spacing:-.03em}
.flow-copy h2 .lime{display:inline}
.flow-copy p{color:var(--muted);font-size:15px;line-height:1.6;max-width:420px}
.flow-steps{margin-top:28px;display:grid;gap:2px;border-top:1px solid var(--line)}
.flow-step{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line)}
.flow-step .fs-no{font-family:"DM Mono",monospace;font-size:9px;color:var(--lime);letter-spacing:.1em}
.flow-step .fs-title{font-size:15px;font-weight:600}
.flow-step .fs-desc{grid-column:2;color:var(--muted-2);font-size:13px;line-height:1.5}
/* Entrance: no side sliding — the list rises line by line, the thread fills in reading order */
.flow-steps .flow-step{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.flow-copy.is-revealed .flow-step{opacity:1;transform:none}
.flow-copy.is-revealed .flow-step:nth-child(1){transition-delay:.05s}
.flow-copy.is-revealed .flow-step:nth-child(2){transition-delay:.13s}
.flow-copy.is-revealed .flow-step:nth-child(3){transition-delay:.21s}
.flow-copy.is-revealed .flow-step:nth-child(4){transition-delay:.29s}
.flow-copy.is-revealed .flow-step:nth-child(5){transition-delay:.37s}
.thread .bubble,.thread .thread-result{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.thread .bubble.us{transform:translateY(14px) translateX(10px)}
.thread.is-revealed .bubble,.thread.is-revealed .thread-result{opacity:1;transform:none}
.thread.is-revealed .bubble:nth-child(2){transition-delay:.1s}
.thread.is-revealed .bubble:nth-child(3){transition-delay:.28s}
.thread.is-revealed .bubble:nth-child(4){transition-delay:.46s}
.thread.is-revealed .bubble:nth-child(5){transition-delay:.64s}
.thread.is-revealed .thread-result{transition:opacity .6s var(--ease) .86s,transform .6s var(--ease) .86s}
.thread{position:relative;border:1px solid var(--line);border-radius:26px;padding:22px;background:linear-gradient(180deg,#0e1210,#0a0c0a);box-shadow:0 40px 100px rgba(0,0,0,.45)}
.thread-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line);font-size:9px;color:var(--muted-2)}
.thread-head b{color:var(--paper);font-size:11px;letter-spacing:.1em}
.bubble{position:relative;max-width:80%;padding:12px 15px;border-radius:16px;font-size:13.5px;line-height:1.5;margin-bottom:12px}
.bubble.them{background:rgba(244,242,236,.06);border:1px solid var(--line);border-bottom-left-radius:5px;color:rgba(244,242,236,.82)}
.bubble.us{margin-left:auto;background:rgba(217,255,63,.1);border:1px solid rgba(217,255,63,.28);border-bottom-right-radius:5px;color:#f2ffe0}
.bubble time{display:block;margin-top:6px;font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.1em;color:rgba(244,242,236,.58)}
.thread-result{margin-top:6px;border:1px solid rgba(217,255,63,.3);border-radius:18px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(90deg,rgba(217,255,63,.1),rgba(217,255,63,.02))}
.thread-result .tr-label{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.thread-result .tr-value{font-size:19px;font-weight:700;letter-spacing:-.03em;margin-top:5px}
.thread-result .tr-arrow{font-size:22px;color:var(--lime)}

/* ---------- selected work ---------- */
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.work-card{position:relative;grid-column:span 6;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#0d100e;display:block;isolation:isolate}
.work-card.feat{grid-column:span 7}
.work-card.lean{grid-column:span 5}
.work-card.wide{grid-column:span 12}
.work-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:radial-gradient(circle at 74% 22%,rgba(217,255,63,.15),transparent 54%),linear-gradient(152deg,#151a18,#0b0d0b 70%),repeating-linear-gradient(90deg,rgba(244,242,236,.05) 0 1px,transparent 1px 38px),repeating-linear-gradient(0deg,rgba(244,242,236,.05) 0 1px,transparent 1px 38px)}
.work-card.feat .work-media{aspect-ratio:16/11}
.work-card.lean .work-media{aspect-ratio:5/4}
.work-card.wide .work-media{aspect-ratio:21/8}
.wm-no{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-family:"DM Mono",monospace;font-size:clamp(48px,8vw,96px);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.4px rgba(244,242,236,.24);transition:transform .8s var(--ease),-webkit-text-stroke-color .5s ease}
.wm-mark{position:absolute;right:18px;top:18px;width:28px;height:28px;border:1px solid rgba(217,255,63,.45);border-radius:50%;display:grid;place-items:center;font-size:12px;color:var(--lime);transition:transform .5s var(--ease),background .4s ease,color .4s ease}
.work-card:hover .wm-no{transform:translate(-50%,-50%) scale(1.07);-webkit-text-stroke-color:rgba(217,255,63,.55)}
.work-card:hover .wm-mark{background:rgba(217,255,63,.16);transform:translate(3px,-3px)}
.work-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,8,.05) 38%,rgba(8,9,8,.86));opacity:.9;transition:opacity .5s ease}
.work-card:hover .work-media:after{opacity:1}
.work-info{position:absolute;z-index:3;left:20px;right:20px;bottom:18px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.work-tag{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.work-info h3{font-size:clamp(18px,2vw,27px);line-height:1.08;margin:8px 0 0;max-width:420px}
.work-sub{margin-top:8px;font-size:12.5px;line-height:1.45;color:rgba(244,242,236,.55);max-width:300px;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.work-card:hover .work-sub{opacity:1;transform:none}
.work-go{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid rgba(244,242,236,.2);display:grid;place-items:center;font-size:15px;color:var(--paper);background:rgba(8,9,8,.4);transition:.4s var(--ease)}
.work-card:hover .work-go{background:var(--lime);border-color:var(--lime);color:#070907;transform:rotate(45deg) scale(1.06)}
.work-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:10px;color:var(--muted-2)}
/* Without a flex-basis the label sizes to its content, so on a narrow row it overflowed the
   band and the last word was cut off rather than wrapping. */
.work-foot span{flex:1 1 auto;min-width:0}

/* ---------- capabilities ---------- */
#capabilities,#work{background:rgba(8,9,8,.9)}
#enquiry{scroll-margin-top:96px}
.cap-list{border-top:1px solid var(--line)}
.cap-row{position:relative;display:grid;grid-template-columns:48px minmax(0,1.05fr) minmax(0,1fr) 34px;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--line);overflow:hidden;transition:padding .4s var(--ease)}
.cap-row:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(217,255,63,.09),rgba(217,255,63,0) 58%);opacity:0;transition:opacity .4s ease}
.cap-row:hover:before{opacity:1}
.cap-row:hover{padding-left:14px;padding-right:14px}
.cap-row>*{position:relative;z-index:2}
.cap-no{font-family:"DM Mono",monospace;font-size:10px;color:rgba(244,242,236,.58);transition:color .35s ease}
.cap-row:hover .cap-no{color:var(--lime)}
.cap-row h3{font-size:clamp(18px,1.9vw,26px);letter-spacing:-.03em;line-height:1.1}
.cap-row p{color:var(--muted);font-size:13.5px;line-height:1.5}
.cap-arrow{justify-self:end;font-size:18px;color:rgba(244,242,236,.58);transition:transform .4s var(--ease),color .3s ease}
.cap-row:hover .cap-arrow{color:var(--lime);transform:translate(4px,-4px)}
.cap-cell{position:relative;display:block;min-height:46px}
.cap-desc,.cap-ships{display:block;transition:opacity .35s ease,transform .5s var(--ease)}
.cap-desc{color:var(--muted);font-size:13.5px;line-height:1.5}
.cap-ships{position:absolute;inset:0;opacity:0;transform:translateY(10px);color:rgba(244,242,236,.86);font-size:13px;line-height:1.55}
.cap-ships b{display:block;font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:6px;font-weight:400}
/* The swap is a hover affordance — only on wide screens that actually hover. */
@media (min-width:821px) and (hover:hover) and (pointer:fine){
  .cap-row:hover .cap-desc,.cap-row:focus-visible .cap-desc{opacity:0;transform:translateY(-10px)}
  .cap-row:hover .cap-ships,.cap-row:focus-visible .cap-ships{opacity:1;transform:none}
}

/* ---------- CTA ---------- */
.cta{position:relative;border:1px solid var(--line);border-radius:26px;background:radial-gradient(circle at 78% 24%,rgba(217,255,63,.1),transparent 30%),#0c0f0d;overflow:hidden}
.cta-inner{min-height:300px;padding:clamp(26px,4vw,46px);display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-inner h2{font-size:var(--h2);line-height:1.02;margin:12px 0 14px}
.cta-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ---------- enquiry form ---------- */
.enquiry-shell{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(24px,4vw,52px);border:1px solid var(--line);border-radius:26px;padding:clamp(22px,3.4vw,40px);background:linear-gradient(180deg,#0e1210,#0a0c0a)}
.enquiry-intro h2{font-size:var(--h2);line-height:1.02;margin:12px 0 14px}
.enquiry-intro p{color:var(--muted);font-size:14.5px;line-height:1.6}
.enquiry-list{margin-top:26px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.enquiry-list div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;background:#0b0e0c;font-size:13px}
.enquiry-list span{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,242,236,.58)}
.enquiry-list b{font-weight:500;color:var(--paper)}
.enquiry-list a:hover b{color:var(--lime)}
form.enquiry{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field.full{grid-column:1 / -1}
.field label{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,242,236,.58)}
.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{width:100%;background:rgba(8,9,8,.55);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--paper);font-size:14px;outline:none;transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;-webkit-appearance:none;appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,rgba(217,255,63,.85) 50%),linear-gradient(135deg,rgba(217,255,63,.85) 50%,transparent 50%);background-position:calc(100% - 19px) 20px,calc(100% - 14px) 20px;background-size:5px 5px;background-repeat:no-repeat;padding-right:38px}
.field select option,.field select optgroup{background:#101412;color:var(--paper);font-weight:400;padding:10px}
.field select:focus option:checked{background:var(--lime);color:#070907}
.field textarea{min-height:108px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(217,255,63,.55);background:rgba(244,242,236,.05);box-shadow:0 0 0 4px rgba(217,255,63,.06)}
.field input::placeholder,.field textarea::placeholder{color:rgba(244,242,236,.58)}
.field.invalid input,.field.invalid textarea{border-color:rgba(255,120,90,.6)}
.enquiry-foot{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:6px}
.enq-note{font-size:11px;line-height:1.5;color:rgba(244,242,236,.58);max-width:330px}
.enq-status{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);opacity:0;transition:opacity .3s ease}
.enq-status.show{opacity:1}
.enq-status.err{color:#ff8a6b}

/* ---------- footer ---------- */
.footer{position:relative;border-top:1px solid var(--line);background:#0a0c0a;padding:clamp(46px,6vw,72px) 0 26px;overflow:hidden;z-index:2}
.footer:before{content:"";position:absolute;left:50%;top:0;width:60%;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(217,255,63,.5),transparent)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.62fr) minmax(0,.62fr) minmax(0,1fr);gap:clamp(24px,3vw,44px)}
.footer-brand{display:inline-flex;align-items:center;gap:10px}
.footer-brand img{width:34px;height:34px;border-radius:9px;object-fit:cover}
.footer-brand span{font-size:14px;letter-spacing:.01em}
.footer-brand strong{font-weight:800}
.footer-blurb{margin-top:16px;max-width:290px;color:var(--muted);font-size:13.5px;line-height:1.6}
.footer-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.footer-social a{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,242,236,.6);transition:.3s}
.footer-social a:hover{border-color:var(--lime);color:var(--lime);background:rgba(217,255,63,.06)}
.footer-col h3{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:16px;font-weight:500}
.footer-col li+li{margin-top:9px}
.footer-col a{font-size:13.5px;color:rgba(244,242,236,.6);transition:color .25s ease,transform .25s ease;display:inline-block}
.footer-col a:hover{color:var(--paper);transform:translateX(3px)}
.footer-word{margin-top:clamp(34px,5vw,60px);font-size:clamp(46px,13.4vw,178px);line-height:.82;font-weight:800;letter-spacing:-.05em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(244,242,236,.1);white-space:nowrap;user-select:none}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,242,236,.58)}
.footer-bottom a:hover{color:var(--lime)}

/* ---------- services page ---------- */
.page-hero{padding:132px 0 clamp(40px,5vw,64px);position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(8,9,8,.9),rgba(8,9,8,.72))}
.page-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 34%,rgba(217,255,63,.09),transparent 26%)}
.page-hero-inner{position:relative;z-index:2}
.page-hero h1{font-size:var(--h1);line-height:1;letter-spacing:-.045em;max-width:900px;margin:14px 0 20px;text-transform:uppercase;font-weight:800}
.page-hero p{max-width:520px;color:var(--muted);font-size:16px;line-height:1.55}
.service-toolbar{position:relative;z-index:1;background:rgba(8,9,8,.5);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.service-toolbar-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0}
.category-nav{display:flex;gap:7px;overflow:auto;scrollbar-width:none;flex:1;min-width:0}
.category-nav::-webkit-scrollbar{display:none}
.category-nav a{white-space:nowrap;padding:8px 12px;border:1px solid var(--line);border-radius:999px;font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,242,236,.56);transition:.28s}
.category-nav a:hover{border-color:var(--lime);color:var(--lime)}
.search-box{position:relative;flex:none;width:min(340px,44%)}
.search-box .search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:rgba(244,242,236,.58);font-size:14px;pointer-events:none}
.service-search{width:100%;background:rgba(244,242,236,.04);border:1px solid var(--line);color:var(--paper);border-radius:999px;padding:11px 40px 11px 36px;font-size:13px;outline:none;transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;-webkit-appearance:none;appearance:none}
.service-search::placeholder{color:rgba(244,242,236,.58)}
.service-search:focus{border-color:rgba(217,255,63,.6);background:rgba(244,242,236,.06);box-shadow:0 0 0 4px rgba(217,255,63,.07)}
.service-search::-webkit-search-cancel-button{-webkit-appearance:none}
.search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:0;border-radius:50%;background:rgba(244,242,236,.08);color:var(--paper);font-size:14px;line-height:1;cursor:pointer;display:none}
.search-clear.show{display:block}
.search-clear:hover{background:rgba(217,255,63,.2);color:var(--lime)}
.service-count{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,242,236,.58);flex:none}
.services-body{padding:clamp(40px,5vw,64px) 0 clamp(70px,9vw,120px)}
.services-hint{display:flex;flex-wrap:wrap;gap:6px 14px;padding:14px 0 0;font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(244,242,236,.58)}
.services-hint span{display:inline-flex;align-items:center;gap:7px}
.services-hint span+span:before{content:"·";color:rgba(217,255,63,.55);font-size:12px}
.services-hint b{color:var(--lime);font-weight:400}
.service-category{padding-top:44px;scroll-margin-top:96px}
.service-category:first-of-type{padding-top:34px}
.category-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"no copy" "title copy";column-gap:clamp(20px,3vw,44px);align-items:end;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.category-no{grid-area:no;font-family:"DM Mono",monospace;font-size:9px;color:var(--lime);letter-spacing:.14em;margin-bottom:10px}
.category-head h2{grid-area:title;font-size:clamp(28px,3.6vw,52px);letter-spacing:-.05em;line-height:.98;margin:0}
.category-head p{grid-area:copy;max-width:420px;color:var(--muted);font-size:13.5px;line-height:1.55;margin:0 0 4px}
.service-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.service-row{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(244,242,236,.045),rgba(244,242,236,.012));cursor:pointer;transition:border-color .3s ease,background .3s ease,transform .4s var(--ease),box-shadow .4s var(--ease)}
.service-row:after{content:attr(data-no);position:absolute;z-index:0;right:14px;bottom:-14px;font-family:"DM Mono",monospace;font-size:64px;line-height:1;color:rgba(244,242,236,.58);pointer-events:none;transition:color .35s ease}
.service-row>*:not(.service-check){position:relative;z-index:1}
.service-row:hover{transform:translateY(-4px);border-color:rgba(217,255,63,.34);box-shadow:0 26px 60px rgba(0,0,0,.4),0 0 0 1px rgba(217,255,63,.05)}
.service-row:hover:after{color:rgba(217,255,63,.09)}
.service-row.is-selected{border-color:rgba(217,255,63,.5);background:linear-gradient(180deg,rgba(217,255,63,.09),rgba(217,255,63,.02))}
.service-row.is-selected:after{color:rgba(217,255,63,.14)}
.svc-glyph{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;border:1px solid rgba(217,255,63,.22);background:rgba(217,255,63,.07);color:var(--lime);font-size:15px;line-height:1;transition:.3s}
.service-row:hover .svc-glyph,.service-row.is-selected .svc-glyph{background:var(--lime);color:#070907;border-color:var(--lime)}
.service-name{font-size:16px;letter-spacing:-.02em;font-weight:600;line-height:1.25}
.service-sub{font-size:12px;color:var(--muted-2);margin-top:5px;line-height:1.5}
.service-keys{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px;padding-top:11px;border-top:1px solid rgba(244,242,236,.07)}
.service-keys b{font-family:"DM Mono",monospace;font-size:8px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:rgba(244,242,236,.58);border:1px solid rgba(244,242,236,.1);border-radius:999px;padding:3px 8px;transition:border-color .3s ease,color .3s ease}
.service-row:hover .service-keys b{color:rgba(244,242,236,.6);border-color:rgba(244,242,236,.58)}
.service-actions{display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex:none}
.service-add{border:1px solid rgba(244,242,236,.2);border-radius:999px;padding:6px 11px;font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,242,236,.6);white-space:nowrap;transition:.28s}
.service-row:hover .service-add{border-color:var(--lime);color:var(--lime)}
.service-row.is-selected .service-add{background:var(--lime);border-color:var(--lime);color:#070907}
.service-whatsapp{width:34px;height:34px;border-radius:50%;border:1px solid rgba(244,242,236,.14);background:rgba(244,242,236,.03);color:rgba(244,242,236,.62);display:grid;place-items:center;cursor:pointer;font-size:13px;transition:.25s}
.service-whatsapp:hover{border-color:var(--lime);background:var(--lime);color:#070907;transform:translateY(-2px)}
.service-check{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.service-row.filtered-out,.service-category.filtered-empty,.custom-slot.filtered-out{display:none}
.service-empty{display:none;padding:40px 0;color:var(--muted);font-size:14px}
.service-empty.show{display:block}
.custom-slot{margin-top:12px;border:1px solid rgba(217,255,63,.26);border-radius:18px;padding:20px;background:linear-gradient(90deg,rgba(217,255,63,.07),rgba(244,242,236,.015) 60%);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(16px,2.5vw,30px);align-items:center}
.custom-slot .cs-tag{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.custom-slot h3{font-size:20px;letter-spacing:-.03em;margin:8px 0 6px}
.custom-slot p{font-size:12.5px;color:var(--muted);line-height:1.55;max-width:340px}
.custom-form{display:flex;gap:9px;align-items:stretch;flex-wrap:wrap}
.custom-input{flex:1 1 200px;min-width:0;background:rgba(8,9,8,.6);border:1px solid var(--line);border-radius:999px;color:var(--paper);padding:12px 16px;font-size:13.5px;outline:none;transition:border-color .25s ease,box-shadow .25s ease}
.custom-input:focus{border-color:rgba(217,255,63,.55);box-shadow:0 0 0 4px rgba(217,255,63,.06)}
.custom-added{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.quote-bar{position:fixed;left:50%;bottom:18px;transform:translate(-50%,180%);z-index:90;width:min(calc(100% - 28px),680px);padding:12px 14px;border:1px solid rgba(244,242,236,.16);background:rgba(14,16,14,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:0 24px 80px rgba(0,0,0,.4);transition:transform .5s var(--ease)}
.quote-bar.show{transform:translate(-50%,0)}
.quote-count{font-size:11px;color:var(--muted)}
.quote-count strong{color:var(--paper);font-size:15px;font-family:"DM Mono",monospace}
.quote-actions{display:flex;gap:8px;flex-wrap:wrap}
.qc-short,.qa-short{display:none}

/* ---------- portfolio page ---------- */
.cat-picker{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);border:1px solid var(--line);border-radius:26px;overflow:hidden;background:rgba(11,14,12,.94)}
.cat-scroll{position:relative;height:clamp(380px,54svh,520px);overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:thin;scrollbar-color:rgba(217,255,63,.4) transparent;border-right:1px solid var(--line)}
.cat-scroll::-webkit-scrollbar{width:4px}
.cat-scroll::-webkit-scrollbar-thumb{background:rgba(217,255,63,.4);border-radius:9px}
.cat-scroll::-webkit-scrollbar-track{background:rgba(244,242,236,.05)}
.cat-pad{padding:calc(clamp(380px,54svh,520px) / 2 - 44px) 0}
.cat-opt{position:relative;scroll-snap-align:center;display:grid;grid-template-columns:38px 1fr auto;gap:14px;align-items:center;width:100%;text-align:left;border:0;border-bottom:1px solid rgba(244,242,236,.07);background:transparent;color:rgba(244,242,236,.58);padding:20px clamp(16px,2.4vw,28px);cursor:pointer;transition:color .3s ease,background .3s ease,padding .4s var(--ease)}
.cat-opt:hover{color:var(--paper);background:rgba(244,242,236,.03);padding-left:calc(clamp(16px,2.4vw,28px) + 6px)}
.cat-opt.is-active{color:var(--paper);background:linear-gradient(90deg,rgba(217,255,63,.09),transparent 72%)}
.cat-opt .cat-no{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;color:rgba(244,242,236,.58)}
.cat-opt.is-active .cat-no{color:var(--lime)}
.cat-opt .cat-name{font-size:clamp(19px,2.3vw,30px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.cat-opt .cat-type{display:block;margin-top:5px;font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,242,236,.58)}
.cat-opt .cat-flag{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);border:1px solid rgba(217,255,63,.3);border-radius:999px;padding:4px 8px;white-space:nowrap}
.cat-detail{position:relative;display:flex;flex-direction:column;justify-content:center;gap:0;padding:clamp(22px,3vw,34px);min-height:100%}
.cat-detail .detail-top{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:9px;color:var(--muted-2)}
.cat-detail h3{font-size:clamp(26px,3.4vw,44px);line-height:1.02;letter-spacing:-.045em;margin:16px 0 12px}
.cat-detail .detail-copy{color:var(--muted);font-size:14px;line-height:1.6;max-width:400px}
.detail-list{margin-top:20px;display:flex;flex-wrap:wrap;gap:6px}
.detail-foot{margin-top:auto;padding-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.detail-note{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,242,236,.58)}
.cat-hint{display:flex;align-items:center;gap:9px;margin-top:14px;font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,242,236,.58)}
.cat-hint:before{content:"";width:22px;height:1px;background:var(--lime)}
.cat-band{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(16px,2.5vw,28px);padding:24px clamp(18px,2.4vw,30px);border:1px solid rgba(217,255,63,.36);border-radius:20px;background:linear-gradient(90deg,rgba(217,255,63,.12),rgba(217,255,63,.02) 58%,transparent)}
.cat-band h3{font-size:clamp(19px,2.2vw,27px);letter-spacing:-.035em}
.cat-band p{margin-top:7px;color:var(--muted);font-size:13.5px;line-height:1.5;max-width:420px}
.cat-band .cta-actions{flex-wrap:wrap}
.all-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:9px}
.all-cat{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-height:104px;padding:15px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(244,242,236,.018);transition:border-color .3s ease,background .3s ease,transform .35s var(--ease)}
.all-cat:hover{border-color:rgba(217,255,63,.4);background:rgba(217,255,63,.05);transform:translateY(-3px)}
.all-cat b{font-size:14.5px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.all-cat span{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.11em;text-transform:uppercase;color:rgba(244,242,236,.58)}
.all-cat.live span{color:var(--lime)}
.all-cat i{position:absolute;right:13px;top:13px;font-style:normal;font-size:13px;color:rgba(244,242,236,.58);transition:.3s}
.all-cat:hover i{color:var(--lime);transform:translate(2px,-2px)}
.live-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.live-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#0c0f0d;display:flex;flex-direction:column;transition:border-color .3s ease,transform .4s var(--ease)}
.live-card:hover{border-color:rgba(217,255,63,.36);transform:translateY(-4px)}
.live-card .lc-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#121513}
.lc-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:22px;font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,242,236,.58);border-bottom:1px solid rgba(244,242,236,.08);background:repeating-linear-gradient(135deg,rgba(244,242,236,.025) 0 12px,transparent 12px 24px)}
.live-card .lc-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.9);transition:transform .8s var(--ease)}
.live-card:hover .lc-media img{transform:scale(1.05)}
.lc-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.lc-body h3{font-size:17px;letter-spacing:-.025em}
.lc-body p{font-size:12.5px;color:var(--muted);line-height:1.5}
.lc-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase}
.lc-pending{color:rgba(244,242,236,.58);border:1px dashed rgba(244,242,236,.2);border-radius:999px;padding:5px 9px}
.lc-go{display:inline-flex;align-items:center;gap:6px;color:var(--lime)}

/* ---------- about / careers ---------- */
.manifesto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:start}
.manifesto p{font-size:clamp(21px,2.4vw,32px);line-height:1.18;letter-spacing:-.035em}
.manifesto-note{color:var(--muted);line-height:1.65;font-size:15px;max-width:440px}
.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.role{position:relative;border:1px solid var(--line);padding:22px;min-height:210px;background:rgba(244,242,236,.02);border-radius:18px;display:flex;flex-direction:column;transition:border-color .3s ease,transform .4s var(--ease),background .3s ease}
.role.key{border-color:rgba(217,255,63,.4);background:linear-gradient(180deg,rgba(217,255,63,.09),rgba(244,242,236,.015))}
.role-tag{position:absolute;top:20px;right:20px;font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#070907;background:var(--lime);border-radius:999px;padding:4px 9px}
.role .text-link{margin-top:auto;padding-top:16px;font-size:11px;color:var(--lime)}
.role:hover{border-color:rgba(217,255,63,.34);transform:translateY(-4px)}
.role.key:hover{background:linear-gradient(180deg,rgba(217,255,63,.14),rgba(217,255,63,.03))}
.role .num{color:var(--lime);font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.12em}
.role h3{font-size:21px;line-height:1.1;letter-spacing:-.03em;margin:44px 0 10px}
.role p{margin:0;color:var(--muted);line-height:1.55;font-size:13px}

/* ---------- review sphere ---------- */
.reviews-section{position:relative;padding:clamp(70px,9vw,130px) 0 clamp(80px,10vw,140px);overflow:hidden;border-top:1px solid var(--line);background:radial-gradient(circle at 74% 44%,rgba(217,255,63,.07),transparent 24%),radial-gradient(circle at 8% 76%,rgba(255,255,255,.022),transparent 26%),rgba(8,9,8,.9)}
.reviews-shell{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(28px,4vw,60px)}
.reviews-copy{position:relative;z-index:3}
.reviews-copy .section-copy{margin-top:20px}
.reviews-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:32px;color:rgba(244,242,236,.58);font-size:9px}
.reviews-meta span:first-child{color:var(--lime)}
.reviews-orb-wrap{position:relative;display:grid;place-items:center;min-height:clamp(340px,44vw,520px)}
.reviews-orb{position:relative;width:min(480px,86%);aspect-ratio:1;touch-action:none;cursor:grab;outline:none}
.reviews-orb:active{cursor:grabbing}
.reviews-orb-glow{position:absolute;inset:16%;border-radius:50%;background:radial-gradient(circle,rgba(217,255,63,.12),rgba(217,255,63,0) 66%);filter:blur(14px);pointer-events:none}
.reviews-orb-core{position:absolute;left:50%;top:50%;width:96px;height:96px;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;border:1px solid rgba(217,255,63,.34);background:rgba(7,8,7,.8);box-shadow:0 0 50px rgba(217,255,63,.1);z-index:5;pointer-events:none}
.reviews-orb-core img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(217,255,63,.2))}
.reviews-nodes{position:absolute;inset:0;z-index:6}
.review-node{position:absolute;left:50%;top:50%;width:var(--node,64px);height:var(--node,64px);border:0;padding:0;border-radius:50%;background:transparent;cursor:pointer;transition:filter .25s ease}
/* keeps a finger-sized hit area when the visible circle shrinks on small screens */
.review-node:after{content:"";position:absolute;inset:-6px;border-radius:50%}
.review-node img{display:block;width:var(--node,64px);height:var(--node,64px);border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.16);background:#101210;box-shadow:0 14px 32px rgba(0,0,0,.44);transition:transform .3s var(--ease),border-color .3s ease,box-shadow .3s ease}
.review-node:hover img,.review-node:focus-visible img,.review-node.is-active img{transform:scale(1.16);border-color:rgba(217,255,63,.8);box-shadow:0 0 0 1px rgba(217,255,63,.16),0 0 30px rgba(217,255,63,.2)}
.review-popover{position:fixed;z-index:95;pointer-events:none;width:min(310px,calc(100vw - 28px));padding:16px 17px 17px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(12,15,12,.94);box-shadow:0 24px 70px rgba(0,0,0,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;transform:translate3d(0,8px,0) scale(.97);transition:opacity .22s ease,transform .22s ease}
.review-popover.show{opacity:1;transform:translate3d(0,0,0) scale(1)}
.review-popover-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.review-popover-name{font-weight:600;font-size:14px}
.review-popover-stars{font-size:10px;color:var(--lime);letter-spacing:.08em;white-space:nowrap}
.review-popover-service{margin-top:6px;color:rgba(244,242,236,.58);font-size:8.5px}
.review-popover-text{margin:11px 0 0;color:rgba(244,242,236,.76);font-size:13px;line-height:1.5}
.review-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:18px}
.review-modal.open{display:flex}
.review-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(10px)}
.review-modal-card{position:relative;width:min(400px,100%);padding:26px;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:linear-gradient(180deg,rgba(18,22,18,.98),rgba(8,9,8,.98));box-shadow:0 30px 90px rgba(0,0,0,.65);z-index:1}
.review-modal-close{position:absolute;right:12px;top:10px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--paper);font-size:22px;line-height:1;cursor:pointer}
.review-modal-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid rgba(217,255,63,.6)}
.review-modal-service{margin-top:18px;font-size:8.5px;color:var(--lime)}
.review-modal-card h3{margin:8px 0 0;font-size:24px;letter-spacing:-.035em}
.review-modal-card .review-stars{margin-top:6px;color:var(--lime);letter-spacing:.08em}
.review-modal-card p{margin:16px 0 0;font-size:15px;line-height:1.6;color:rgba(244,242,236,.76)}
.reviews-orb-hint{margin-top:14px;text-align:center;font-size:8.5px;color:rgba(244,242,236,.58)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .system-shell{grid-template-columns:1fr;gap:26px}
  .system-aside{position:static}
  .system-aside p{max-width:520px}
  .work-card,.work-card.feat,.work-card.lean{grid-column:span 6}
  .cap-row{grid-template-columns:40px minmax(0,1fr) minmax(0,1fr) 28px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .live-grid{grid-template-columns:1fr 1fr}
  .hero-3d{width:min(58vw,560px);right:-6%}
}
@media (max-width:920px){
  .flow-grid{grid-template-columns:1fr;gap:34px}
  .enquiry-shell{grid-template-columns:1fr;gap:28px}
}
@media (max-width:820px){
  .site-header{height:52px}
  .nav-links,.nav-actions .nav-cta,.nav-actions .btn{display:none}
  .nav-actions{margin-left:auto}
  .menu-btn{display:grid;place-items:center}
  .mobile-nav{inset:52px 10px auto 10px}
  .hero{min-height:86svh;padding:74px 0 26px;align-items:center}
  .hero:before{background:linear-gradient(180deg,rgba(8,9,8,.6),rgba(8,9,8,.34) 44%,rgba(8,9,8,.72))}
  .hero-stage{perspective-origin:74% 34%;opacity:.4;mask-image:linear-gradient(105deg,transparent 26%,black 62%);-webkit-mask-image:linear-gradient(105deg,transparent 26%,black 62%)}
  .hero-3d{width:min(104vw,470px);right:-14%;top:30%;transform:translateY(-50%) scale(.92)}
  .d-chip,.d-floor,.d-ring,.d-arc{display:none}
  .d-panel{border:0;border-radius:0;box-shadow:none;background:none;inset:0;transform:none}
  .hero-title{font-size:clamp(34px,10vw,52px)}
  form.enquiry{grid-template-columns:1fr}
  .section-head{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:28px}
  .section-copy{max-width:520px}
  .timeline{padding-left:34px}
  .t-dot{left:-34px;top:22px;width:15px;height:15px}
  .t-card{padding:18px 18px 20px;border-radius:18px}
  .service-toolbar-inner{grid-template-columns:1fr;display:grid;gap:10px}
  .search-box{width:100%}
  .search-clear{width:34px;height:34px}
  .service-whatsapp{width:40px;height:40px}
  .menu-btn{width:38px;height:38px;font-size:15px}
  .btn.small{padding:11px 15px;min-height:40px}
  .category-nav{order:2}
  .service-count{order:3}
  .service-list{grid-template-columns:1fr;gap:10px}
  .service-row{grid-template-columns:34px minmax(0,1fr);gap:10px 12px;padding:16px}
  .service-row:after{display:none}
  .svc-glyph{width:34px;height:34px;font-size:13px}
  .svc-main{grid-column:2;grid-row:1}
  .service-name{font-size:15.5px}
  .service-actions{grid-column:1 / -1;grid-row:2;flex-direction:row;align-items:center;justify-content:flex-end;width:100%;gap:10px}
  .category-head{grid-template-columns:1fr;grid-template-areas:"no" "title" "copy";row-gap:8px}
  .category-head p{max-width:520px;margin-bottom:0}
  .custom-slot{grid-template-columns:1fr}
  .cat-picker{grid-template-columns:1fr}
  .cat-scroll{height:320px;border-right:0;border-bottom:1px solid var(--line)}
  .cat-pad{padding:116px 0}
  .cat-opt{grid-template-columns:24px minmax(0,1fr) auto;gap:10px;padding:16px}
  .cat-opt .cat-name{font-size:clamp(17px,5.2vw,22px)}
  .cat-flag{font-size:7px;padding:3px 7px;letter-spacing:.08em}
  .cat-flag{display:none}
  .cat-opt[data-demo] .cat-name:after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);margin-left:9px;vertical-align:middle;box-shadow:0 0 10px rgba(217,255,63,.65)}
  .cat-detail{min-height:auto;padding:20px}
  .cap-row{grid-template-columns:22px minmax(0,1fr) 20px;column-gap:12px;row-gap:6px;padding:18px 0}
  .cap-row .cap-no{grid-column:1;grid-row:1}
  .cap-row h3{grid-column:2;grid-row:1}
  .cap-row .cap-arrow{grid-column:3;grid-row:1}
  .cap-cell{grid-column:1 / -1;grid-row:2;margin-top:4px;min-height:0}
  .cap-row p{grid-column:1 / -1;grid-row:2;margin-top:4px}
  .cap-ships{position:static;inset:auto;opacity:1;transform:none;margin-top:9px}
  .reviews-shell{grid-template-columns:1fr;gap:18px}
  .reviews-orb{width:min(340px,88%)}
  .manifesto{grid-template-columns:1fr;gap:20px}
  .roles{grid-template-columns:1fr}
  .work-card,.work-card.feat,.work-card.lean,.work-card.wide{grid-column:span 12}
  .work-sub{opacity:1;transform:none}
  .footer{padding:34px 0 20px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:26px 16px}
  .footer-grid>div:first-child,.footer-grid>div:last-child{grid-column:1 / -1}
  .footer-blurb{max-width:none}
  .footer-word{font-size:clamp(34px,13.5vw,64px);margin-top:26px}
  .footer-bottom{margin-top:16px;padding-top:14px;gap:8px}
  .live-grid{grid-template-columns:1fr}
  .cta-inner{min-height:0}
  .quote-bar{flex-direction:row;align-items:center;gap:10px;padding:9px 11px;bottom:12px;border-radius:14px}
  .quote-count{font-size:10px;white-space:nowrap}
  .quote-count strong{font-size:13px}
  .quote-actions{flex:1;justify-content:flex-end;flex-wrap:nowrap;gap:7px}
  .quote-actions .btn{padding:8px 12px;font-size:11px;min-height:36px;white-space:nowrap}
  .qc-long,.qa-long{display:none}
  .qc-short,.qa-short{display:inline}
}
@media (max-width:520px){
  :root{--pad:16px}  .hero-actions .btn{flex:1 1 100%}
  .all-cats{grid-template-columns:1fr 1fr}
  .all-cat{min-height:88px;padding:13px}
  .thread{padding:16px;border-radius:20px}
  .bubble{max-width:92%;font-size:13px}
  .detail-foot{flex-direction:column;align-items:stretch}
  .detail-foot .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  /* Naaman chose to keep motion on for everyone: the ticker, hero and reveals
     are the site's point. Only instant jumping is disabled. */
  html{scroll-behavior:auto!important}
}

/* ---------- card fills: solid enough that the globe never reads through text ---------- */
.service-row{background:linear-gradient(180deg,rgba(18,21,19,.94),rgba(12,15,13,.9))}
.service-row:hover{background:linear-gradient(180deg,rgba(24,28,25,.96),rgba(15,18,16,.93))}
.service-row.is-selected{background:linear-gradient(180deg,rgba(43,51,26,.95),rgba(20,24,16,.92))}
.t-card{background:linear-gradient(180deg,rgba(18,21,19,.94),rgba(12,15,13,.9))}
.work-card{background:rgba(13,16,14,.92)}
.live-card{background:rgba(12,15,13,.94)}
.live-card .lc-media{background:rgba(18,21,19,.9)}
.all-cat{background:rgba(16,19,17,.93)}
.all-cat:hover{background:rgba(30,36,22,.96)}
.role{background:rgba(16,19,17,.93)}
.role:hover{background:rgba(23,27,22,.96)}
.role.key{background:linear-gradient(180deg,rgba(44,53,24,.95),rgba(15,18,16,.92))}
.fw-node{background:rgba(13,16,14,.96)}
.fw-core{background:rgba(10,13,11,.97)}
.thread{background:linear-gradient(180deg,rgba(14,18,16,.95),rgba(10,12,10,.92))}
.custom-slot{background:linear-gradient(90deg,rgba(36,44,21,.93),rgba(15,18,16,.92) 60%)}
/* blur only on the few large surfaces — 38 blurred rows would cost too much on a phone */
.cta,.enquiry-shell,.cat-picker,.thread{backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1)}
.cta{background:radial-gradient(circle at 78% 24%,rgba(217,255,63,.1),transparent 30%),rgba(12,15,13,.93)}
.enquiry-shell{background:linear-gradient(180deg,rgba(14,18,16,.95),rgba(10,12,10,.92))}
/* About: these two blocks carried body copy with no fill at all, so the globe
   arcs ran through the text. Minimal lift, not a solid card. */
.cap-row{background:rgba(11,14,12,.7);border-radius:14px;padding-inline:18px}
.cap-row:hover{padding-left:26px;padding-right:26px}
.manifesto{background:rgba(11,14,12,.66);border:1px solid var(--line);border-radius:22px;padding:clamp(20px,3vw,34px)}
.cat-picker{background:rgba(11,14,12,.95)}


/* ---------- trust strip (immediately after the hero) ---------- */
.trust{position:relative;border-bottom:1px solid var(--line);background:rgba(9,11,10,.86);padding:clamp(24px,3.4vw,44px) 0}
.trust-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,3vw,44px);align-items:center}
.trust-lead p{margin:0;font-size:clamp(16px,1.7vw,20px);line-height:1.45;letter-spacing:-.015em;color:rgba(244,242,236,.9)}
.trust-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.trust-facts span{border:1px solid var(--line);border-radius:999px;padding:6px 11px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,242,236,.55)}
.trust-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.trust-stats li{background:rgba(13,16,14,.94);padding:18px 20px}
.trust-stats b{display:block;font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--lime)}
.trust-stats span{display:block;margin-top:7px;font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
@media (max-width:920px){.trust-inner{grid-template-columns:1fr;gap:22px}}
/* what the client walks away with, per step */
.fs-get{grid-column:2;margin-top:7px;font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(217,255,63,.72)}

/* ---------- SEO content pages / insights ---------- */
.service-page-hero{border-bottom:1px solid var(--line);min-height:62svh;display:grid;place-items:center;background:radial-gradient(circle at 72% 45%,rgba(184,255,44,.08),transparent 30%),linear-gradient(180deg,#0a0c0a 0%,#080908 100%);padding:clamp(90px,13svh,128px) 0 clamp(38px,5vw,60px)}
.service-page-hero h1{font-size:clamp(42px,6.4vw,84px);line-height:.94;letter-spacing:-.045em;margin:10px 0 18px;max-width:980px}
.service-page-hero p{max-width:720px;color:var(--muted);font-size:17px;line-height:1.7}
.service-page-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(34px,7vw,96px);align-items:start}
.service-lead{color:var(--muted);max-width:520px;line-height:1.7;font-size:15px}
.deliverables-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.deliverable{min-height:72px;padding:18px 8px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center}
.deliverable span{font-family:"DM Mono",monospace;color:var(--lime);font-size:9px}.deliverable b{font-size:15px;font-weight:600}
.service-link-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.service-link-card{min-height:88px;padding:18px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:var(--paper);transition:.25s ease;background:rgba(244,242,236,.01)}
.service-link-card:hover{background:rgba(184,255,44,.05);color:var(--lime)} .service-link-card b{color:var(--muted);font-weight:400}
.faq{border-top:1px solid var(--line)}.faq details{border-bottom:1px solid var(--line);padding:0}.faq summary{list-style:none;cursor:pointer;padding:22px 4px;font-size:18px;font-weight:600;display:flex;justify-content:space-between;gap:20px}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'+';color:var(--lime);font-family:"DM Mono",monospace;font-size:14px}.faq details[open] summary:after{content:'−'}.faq details p{max-width:820px;padding:0 4px 22px;color:var(--muted);line-height:1.7;font-size:14px}
.article-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.article-grid.compact{grid-template-columns:repeat(3,1fr)}.article-card{display:block;border:1px solid var(--line);padding:26px;background:rgba(244,242,236,.015);transition:.3s ease}.article-card:hover{border-color:rgba(184,255,44,.4);transform:translateY(-3px);background:rgba(184,255,44,.025)}.article-card>span{color:var(--lime);font-size:8px;letter-spacing:.12em}.article-card h2{font-size:24px;line-height:1.02;letter-spacing:-.025em;margin:20px 0 12px}.article-card p{color:var(--muted);line-height:1.6;font-size:13.5px;margin-bottom:20px}.article-card b{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);font-weight:400}
@media (max-width:900px){.service-page-grid{grid-template-columns:1fr}.service-link-grid{grid-template-columns:1fr 1fr}.article-grid,.article-grid.compact{grid-template-columns:1fr}}
@media (max-width:520px){.service-page-hero h1{font-size:clamp(38px,12vw,58px)}.deliverables-grid{grid-template-columns:1fr}.service-link-grid{grid-template-columns:1fr}}
.seo-service-links{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.seo-service-links a{display:flex;justify-content:space-between;gap:12px;padding:17px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--paper);font-size:14px}.seo-service-links a:hover{background:rgba(184,255,44,.04);color:var(--lime)}.seo-service-links b{color:var(--muted);font-weight:400}@media(max-width:820px){.seo-service-links{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.seo-service-links{grid-template-columns:1fr}}

/* ---------- new service + insight pages: solid panels so the globe never runs through body copy ---------- */
.section.alt{background:rgba(9,11,10,.9)}
.deliverable{background:rgba(13,16,14,.93)}
.service-link-card{background:rgba(13,16,14,.93)}
.service-link-card:hover{background:rgba(30,36,22,.96)}
.article-card{background:rgba(13,16,14,.94)}
.article-card:hover{background:rgba(16,21,14,.96)}
.faq details{background:rgba(13,16,14,.93);border:1px solid var(--line);border-radius:16px;padding:0 20px;margin-bottom:9px}
.faq details[open]{background:rgba(17,21,18,.95)}
.faq summary{padding:18px 0}
.faq details p{padding:0 0 18px}

/* ---------- lead form: honeypot + post-send options ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hp input{opacity:0;pointer-events:none}
.enq-alt{display:inline-flex}
.enq-alt:empty{display:none}
.enq-alt .text-link{font-size:10px}

/* ---------- services quote bar as a real form ---------- */
.quote-bar{flex-wrap:wrap;row-gap:10px}
.quote-fields{display:flex;align-items:flex-end;gap:10px;flex:1 1 auto;justify-content:center;min-width:0}
.qf{display:grid;gap:4px;min-width:0}
.qf .mono{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.qf input{width:min(30vw,170px);padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(244,242,236,.04);color:var(--paper);font-family:inherit;font-size:13px}
.qf input:focus{outline:none;border-color:rgba(217,255,63,.5);background:rgba(244,242,236,.06)}
.quote-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.quote-bar .enq-status,.quote-bar .enq-alt{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--lime);max-width:220px}
.quote-bar .enq-status.err{color:#ff8a7a}
@media (max-width:980px){.qf-email{display:none}.quote-fields{order:3;width:100%;justify-content:flex-start}.qf input{width:min(38vw,150px)}}

/* ---------- careers application form ---------- */
.apply-form{margin-top:8px}
.apply-check label{display:flex;align-items:center;gap:10px;font-family:"Inter Tight",sans-serif;font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted);cursor:pointer}
.apply-check input{width:17px;height:17px;flex:none;accent-color:var(--lime);padding:0;border:1px solid var(--line);background:rgba(8,9,8,.55);border-radius:4px}

/* ---------- shorter header on phones (wordmark stays) ---------- */
@media (max-width:820px){
  .brand{gap:8px}
  .brand img{width:30px;height:30px}
  .brand-text{font-size:12px}
  .nav{gap:10px}
  .nav-actions{margin-left:auto}
  #enquiry,.service-category{scroll-margin-top:68px}
  .page-hero{padding:86px 0 clamp(34px,5vw,56px)}
}

/* ---------- insights hub: tools, pages, pager ---------- */
.post-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 18px;padding:20px clamp(16px,2.4vw,26px);margin-bottom:18px;border:1px solid var(--line);border-radius:20px;background:rgba(13,16,14,.94)}
.pt-field{display:grid;gap:6px}
.pt-field .mono{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.pt-field input,.pt-field select{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(244,242,236,.04);color:var(--paper);font-family:inherit;font-size:14px;min-width:min(46vw,220px)}
.pt-field input:focus,.pt-field select:focus{outline:none;border-color:rgba(217,255,63,.5)}
.pt-cats{display:flex;flex-wrap:wrap;gap:7px;margin-left:auto}
.pt-chip{border:1px solid var(--line);border-radius:999px;padding:7px 13px;background:transparent;color:var(--muted);font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.25s ease}
.pt-chip:hover{border-color:rgba(217,255,63,.45);color:var(--paper)}
.pt-chip.is-on{background:var(--lime);border-color:var(--lime);color:#070907}
.post-count{margin:0 0 14px;font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.post-empty{padding:26px 0;color:var(--muted);font-size:14px}
.post-pager{display:flex;gap:7px;justify-content:center;margin-top:26px}
.post-pager[hidden]{display:none}
.post-pager button{min-width:38px;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:rgba(13,16,14,.9);color:var(--paper);font-family:"DM Mono",monospace;font-size:11px;cursor:pointer;transition:.25s ease}
.post-pager button:hover:not(:disabled){border-color:rgba(217,255,63,.5);color:var(--lime)}
.post-pager button.is-on{background:var(--lime);border-color:var(--lime);color:#070907}
.post-pager button:disabled{opacity:.32;cursor:not-allowed}

/* ---------- about page: expanded sections ---------- */
.about-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,44px);margin-bottom:clamp(28px,4vw,48px)}
.about-cols p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.75}
.about-cols p:first-child{color:rgba(244,242,236,.9);font-size:17px;line-height:1.6}
.principles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.principle{background:rgba(13,16,14,.93);border:1px solid var(--line);border-radius:18px;padding:22px 24px}
.principle>span{color:var(--lime);font-size:9px;letter-spacing:.16em}
.principle h3{font-size:19px;letter-spacing:-.025em;margin:12px 0 8px}
.principle p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.steps{display:grid;gap:10px}
.step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 26px;align-items:center;background:rgba(13,16,14,.93);border:1px solid var(--line);border-radius:18px;padding:20px 24px}
.step>span{grid-row:1 / -1;color:var(--lime);font-size:9px;letter-spacing:.14em;align-self:center}
.step p{margin:0;color:rgba(244,242,236,.82);font-size:14.5px;line-height:1.6}
.step b{color:var(--muted-2);font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:400;margin-top:6px}
.brand-sheet{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bs-block{background:rgba(13,16,14,.93);border:1px solid var(--line);border-radius:20px;padding:24px}
.bs-block>.mono{color:var(--lime);font-size:9px;letter-spacing:.16em;display:block;margin-bottom:18px}
.swatches{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.swatch{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--sw);min-height:86px;display:flex;flex-direction:column;justify-content:flex-end;padding:10px 12px}
.swatch b{font-family:"DM Mono",monospace;font-size:10px;color:#080908;background:rgba(244,242,236,.86);padding:2px 6px;border-radius:6px;align-self:flex-start}
.swatch span{margin-top:6px;font-size:11px;line-height:1.3;font-weight:600;color:var(--sw-ink,#080908)}
.bs-display{font-size:clamp(22px,2.6vw,32px);font-weight:800;letter-spacing:-.035em;line-height:1.06;margin:0 0 14px}
.bs-body{color:var(--muted);font-size:14.5px;line-height:1.65;margin:0 0 14px}
.bs-block .mono:not(:first-child){font-size:9px;letter-spacing:.14em;color:var(--muted-2)}
.bs-note{margin:0;color:rgba(244,242,236,.82);font-size:14.5px;line-height:1.7}
.bs-note b{color:var(--lime);font-family:"DM Mono",monospace;font-size:12px;font-weight:400}
.bs-voice{margin:0;padding-left:18px;color:rgba(244,242,236,.82);font-size:14.5px;line-height:1.85}
.expect{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ex{background:rgba(13,16,14,.93);border:1px solid var(--line);border-radius:18px;padding:20px 22px;display:grid;gap:8px}
.ex b{font-size:16px;letter-spacing:-.02em}
.ex span{color:var(--muted);font-size:13.5px;line-height:1.55}
.proof-links{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.proof-links a{position:relative;display:grid;gap:7px;background:rgba(13,16,14,.93);border:1px solid var(--line);border-radius:18px;padding:22px 24px;transition:border-color .3s ease,transform .35s var(--ease)}
.proof-links a:hover{border-color:rgba(217,255,63,.45);transform:translateY(-3px)}
.proof-links b{font-size:17px;letter-spacing:-.02em}
.proof-links span{color:var(--muted);font-size:13.5px;line-height:1.55;max-width:44ch}
.proof-links i{position:absolute;right:20px;top:20px;font-style:normal;color:var(--lime);font-size:15px}
@media (max-width:900px){.about-cols,.principles,.brand-sheet,.proof-links{grid-template-columns:1fr}.expect{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.step{grid-template-columns:1fr}.step>span{grid-row:auto}.expect{grid-template-columns:1fr}}

/* ---------- articles: a page you read, not a page you scroll past ----------
   No globe, no HUD, no panels. Flat ground, one column, real reading rhythm. */
body[data-page="insights"]{background:#0b0d0c}
body[data-page="insights"] main:before{display:none}
.post{padding:104px 0 20px}
.post-wrap{max-width:740px;width:min(100% - (var(--pad) * 2),740px)}
.post-crumb{color:rgba(244,242,236,.58);font-size:9px;letter-spacing:.14em;margin:0 0 26px}
.post-crumb a{color:inherit}
.post-crumb a:hover{color:var(--lime)}
.post-title{font-size:clamp(29px,4.4vw,44px);line-height:1.1;letter-spacing:-.035em;font-weight:700;margin:0 0 16px;text-transform:none}
.post-dek{font-size:clamp(16px,2vw,19px);line-height:1.55;color:var(--muted);margin:0 0 22px;max-width:62ch}
.post-byline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,242,236,.58)}
.post-byline span:first-child{color:var(--lime)}
.post-byline i{font-style:normal;opacity:.35}
.post-body{padding:8px 0 0}
.post-body p{font-size:17px;line-height:1.82;color:rgba(244,242,236,.84);margin:0 0 22px;max-width:68ch}
.post-body>ul{margin:0 0 24px;padding-left:0;list-style:none;max-width:68ch}
.post-body>ul li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.7;color:rgba(244,242,236,.8);margin:0 0 10px}
.post-body>ul li:before{content:"";position:absolute;left:2px;top:11px;width:7px;height:1px;background:var(--lime)}
.post-body h2{font-size:clamp(20px,2.5vw,26px);letter-spacing:-.02em;line-height:1.2;font-weight:700;margin:44px 0 14px;color:var(--paper)}
.post-body h2:first-child{margin-top:8px}
.post-body blockquote{margin:30px 0;padding:2px 0 2px 22px;border-left:2px solid var(--lime);font-size:18.5px;line-height:1.6;color:var(--paper);max-width:62ch}
.post-body a{color:var(--lime);border-bottom:1px solid rgba(217,255,63,.35)}
.post-body strong{color:var(--paper);font-weight:600}
.post-end{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:48px;padding-top:26px;border-top:1px solid var(--line)}
.post-end h2{font-size:22px;letter-spacing:-.025em;margin:0 0 8px}
.post-end p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6;max-width:44ch}
.post-end-actions{display:flex;gap:9px;flex-wrap:wrap}
.post-more{margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
.post-more .mono{font-size:9px;letter-spacing:.16em;color:var(--muted-2);margin:0 0 12px}
.post-more ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-top:1px solid var(--line)}
.post-more li{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line)}
.post-more a{font-size:15.5px;line-height:1.35}
.post-more a:hover{color:var(--lime)}
.post-more .mono{font-size:8px;letter-spacing:.12em;color:rgba(244,242,236,.58);margin:0;flex:none}
@media (max-width:820px){.post{padding-top:80px}.post-body p{font-size:16px;line-height:1.78}.post-body blockquote{font-size:16.5px}.post-end{align-items:flex-start}.post-end-actions{width:100%}.post-end .btn{flex:1 1 auto;justify-content:center}}

/* ---------- native controls: dark popups, one consistent select ----------
   Without color-scheme the browser paints select popups light while our option
   text is near-white, which is the washed-out list box on the insights sort. */
:root{color-scheme:dark}
select{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1.2 1.2 5.5 5.5l4.3-4.3' fill='none' stroke='%23d9ff3f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:11px 7px;
  padding-right:36px
}
select option,select optgroup{background:#101412;color:var(--paper);font-weight:400}
select option:checked{background:#1d241a;color:var(--lime)}
select:disabled{cursor:not-allowed;opacity:.5}
select:focus-visible{outline:2px solid rgba(217,255,63,.55);outline-offset:2px}
.pt-field select{background-color:rgba(244,242,236,.04)}
.pt-field select:hover{border-color:rgba(217,255,63,.4)}
input[type="search"]::-webkit-search-cancel-button{filter:invert(1);opacity:.45}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0b0d0c}
::-webkit-scrollbar-thumb{background:#232a20;border-radius:999px;border:2px solid #0b0d0c}
::-webkit-scrollbar-thumb:hover{background:rgba(217,255,63,.4)}

/* One chevron for every select on the site — these two rules carry a background
   shorthand, so the plain select rule above loses to them on specificity. */
.field select,.pt-field select,.qf select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1.2 1.2 5.5 5.5l4.3-4.3' fill='none' stroke='%23d9ff3f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:11px 7px;
  padding-right:36px
}

/* ---------- a11y + crawl fallbacks ---------- */
.skip-link{position:absolute;left:12px;top:-48px;z-index:200;background:var(--lime);color:#070907;
  font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:10px 14px;border-radius:10px;transition:top .2s ease}
.skip-link:focus{top:10px}
.post-static{list-style:none;margin:0 0 18px;padding:0;border-top:1px solid var(--line)}
.post-static li{border-bottom:1px solid var(--line)}
.post-static a{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:14px 0}
.post-static strong{font-size:15.5px;font-weight:600}
.post-static span{font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);flex:none}
.related-note{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin:0}

/* Sent confirmation: replaces the fields after a lead lands. Full-bleed in the
   two-column enquiry grid and inside the compact services bar alike. */
.sent-panel{grid-column:1 / -1;display:grid;gap:10px;padding:clamp(18px,3vw,28px);border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(44,53,24,.28),rgba(11,14,12,.6))}
.sent-title{font-size:clamp(19px,2.4vw,26px);line-height:1.12;letter-spacing:-.03em;margin:0;padding-right:34px}
.sent-panel p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.sent-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:2px}
.sent-actions .btn{font-size:12px;padding:10px 14px}
.quote-bar .sent-panel{flex:1 0 100%;padding:12px;border-radius:14px;gap:7px}
.quote-bar .sent-title{font-size:16px}
.quote-bar .sent-panel p{font-size:12px}
@media (max-width:520px){.sent-actions{flex-direction:column;align-items:stretch}.sent-actions .btn{justify-content:center;width:100%}}

/* Per-field validation message: named out loud by the input's aria-describedby,
   so "still needed" is never a floating line nobody can attribute. */
.field-err{display:block;margin-top:5px;font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#ff8a6b}
/* .field input sets outline:none for the mouse glow; keyboard focus needs a ring. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
/* The dialog card takes programmatic focus so a screen reader announces it;
   the close button inside keeps the visible ring. */
.review-modal-card:focus,.review-modal-card:focus-visible{outline:none}
/* Consent line in the compact quote bar — small, but not hidden. */




/* Author display rules above beat the UA [hidden] rule, so the sent state has to
   win explicitly — otherwise the confirmation renders under a live-looking form. */
.enquiry [hidden],.quote-bar [hidden]{display:none !important}

/* Clauses that describe practice but are not legally settled. Deliberately loud —
   a flagged term hidden in grey body copy is not a flag. */
.flag-box{border:1px solid rgba(217,255,63,.28);border-left:3px solid var(--lime);border-radius:14px;background:rgba(44,53,24,.22);padding:16px 20px;margin:30px 0}
.flag-box p{margin:0 0 8px;font-size:14.5px;line-height:1.65;color:rgba(244,242,236,.86)}
.flag-box p:last-child{margin-bottom:0}
.flag-box .mono{color:var(--lime);letter-spacing:.14em;font-size:9px;text-transform:uppercase;margin-bottom:8px}

/* The confirmation has to be escapable — it replaces the form, so without this the
   panel is a dead end parked over the page. */
.sent-panel{position:relative}
.sent-close{position:absolute;right:8px;top:8px;z-index:1;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--paper);font-size:19px;line-height:1;cursor:pointer;padding:0}
.sent-close:hover{border-color:rgba(217,255,63,.5);color:var(--lime)}
.quote-bar .sent-close{right:6px;top:6px;width:26px;height:26px;font-size:17px}

/* Consent lives inside the count line so the bar keeps its original four-part flex row. */
.qc-privacy{display:block;font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;margin-top:2px}
.qc-privacy .text-link{color:var(--lime)}

/* The studio HUD is z-index 110 and sits bottom-left; the quote bar is bottom-centre.
   At narrow widths the HUD overlapped the WhatsApp field, so the form now wins the
   stacking contest — a required input you cannot click is worse than a covered badge. */
.quote-bar{z-index:120}

/* Toast for the quote bar: the bar itself slides away, so nothing stacks on it.
   Auto-hides, but the close button means it is never the only way out. */
.toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,180%);z-index:130;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;max-width:min(calc(100% - 28px),560px);padding:13px 42px 13px 16px;border:1px solid rgba(217,255,63,.3);border-radius:16px;background:rgba(12,15,13,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 24px 70px rgba(0,0,0,.5);opacity:0;transition:transform .5s var(--ease),opacity .35s ease;pointer-events:none}
.toast.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.toast-msg{font-size:12.5px;line-height:1.5;color:var(--paper)}
.toast-link{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);text-decoration:none;white-space:nowrap}
.toast-link:hover{text-decoration:underline}
.toast-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:1;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(12,15,13,.92);color:var(--paper);font-size:16px;line-height:1;cursor:pointer;padding:0;display:grid;place-items:center}
.toast-x:hover{border-color:rgba(217,255,63,.5);color:var(--lime)}
@media (max-width:520px){.toast{bottom:12px;padding:38px 14px 12px}.toast-msg{font-size:12px;text-align:center}.toast-x{top:6px;transform:none}}

/* The UA gives <select> a different intrinsic line-height than <input>, so the search
   and sort pair in the insights toolbar sat 2px apart. Pin them to one height. */
.pt-field input,.pt-field select{height:41px;line-height:1.2}

/* ---------- inline SVG marks ----------
   UI icons moved from Unicode glyphs to inline SVG (see tools/icons_svg.py). The containers
   already centre their child, so each mark only needs a size. */
.i{display:block;flex:none;width:16px;height:16px}
.menu-btn .i{width:18px;height:18px}
.fw-node .i{width:13px;height:13px}
.svc-glyph .i{width:17px;height:17px}
.service-whatsapp .i{width:16px;height:16px}
.marquee-group .i{width:8px;height:8px}
.search-icon .i{width:15px;height:15px}
.all-cat .i{width:11px;height:11px}
@media (max-width:900px){.fw-node .i{width:12px;height:12px}}
@media (max-width:640px){.svc-glyph .i{width:15px;height:15px}}

/* ---------- touch behaviour ----------
   A touch device holds the last :hover until the next tap, so dragging a finger down a list
   paints every row it passes and the row you stopped on stays lit. That is what reads as
   "things get selected while scrolling", and it is why two adjacent menu rows looked like one
   block. On touch, hover is neutralised and the same feedback is re-expressed as :active.
   The grey flash itself is the platform tap highlight — removed here, replaced by real states.
   Only declarations whose base value is width-independent are reverted; where a base differs
   between desktop and mobile the hover background is left alone rather than guessed at. */
*{-webkit-tap-highlight-color:transparent}
.mobile-nav,.nav-links,.menu-btn,.marquee,#hud,.btn,.cat-opt,.all-cat,.category-nav a,
.pt-chip,.fw-node,.service-row,.service-add,.service-keys,.text-link,.role,.live-card,
.article-card,.footer-head,.enquiry-list{
  -webkit-touch-callout:none;user-select:none;-webkit-user-select:none}

@media (hover: none),(pointer: coarse){
  .mobile-nav a:hover{background:transparent;color:rgba(244,242,236,.72)}
  .mobile-nav a.active{background:rgba(244,242,236,.06);color:var(--lime)}
  .mobile-nav a:active{background:rgba(217,255,63,.14);color:var(--lime)}
  .nav-links a:hover{color:rgba(244,242,236,.6)}
  .nav-links a:hover:after{right:100%}
  .nav-links a.active{color:var(--paper)}
  .nav-links a.active:after{right:0}

  .btn:hover,.btn.primary:hover,.btn.ghost:hover,.btn.lime-line:hover,.nav-cta:hover{transform:none}
  .btn.primary:hover{background:var(--lime);border-color:var(--lime)}
  .btn.ghost:hover{color:rgba(244,242,236,.72)}
  .btn.lime-line:hover{border-color:rgba(217,255,63,.42)}
  .nav-cta:hover{background:rgba(217,255,63,.12);color:var(--lime)}
  .btn:active,.cat-opt:active,.all-cat:active,.text-link:active,.mobile-nav a:active{transform:scale(.98)}

  .service-row:hover{transform:none;box-shadow:none;border-color:var(--line)}
  .service-row:hover .svc-glyph{background:rgba(217,255,63,.07);color:var(--lime);border-color:rgba(217,255,63,.22)}
  .service-row.is-selected .svc-glyph{background:var(--lime);color:#070907;border-color:var(--lime)}
  .service-row:hover .service-keys b{color:rgba(244,242,236,.58)}
  .service-row:hover .service-add{border-color:rgba(244,242,236,.2);color:rgba(244,242,236,.6)}
  .service-row:active{border-color:rgba(217,255,63,.4)}
  .service-whatsapp:hover{transform:none}
  .service-link-card:hover{color:var(--paper)}

  .live-card:hover,.role:hover,.proof-links a:hover,.footer-col a:hover,
  .all-cat:hover,.pt-chip:hover,.fw-node:hover{transform:none}
  .live-card:hover,.role:hover,.all-cat:hover,.fw-node:hover,.pt-chip:hover,.proof-links a:hover{border-color:var(--line)}
  .all-cat:hover i{color:rgba(244,242,236,.58)}
  .cat-opt:hover{color:rgba(244,242,236,.58);background:transparent}

  .footer-col a:hover{color:rgba(244,242,236,.6)}
  .category-nav a:hover{color:rgba(244,242,236,.56);border-color:var(--line)}
  .footer-bottom a:hover,.enquiry-list a:hover b,.post-crumb a:hover,.post-more a:hover,
  .text-link:hover{color:inherit}
  .footer-social a:hover{color:rgba(244,242,236,.6);border-color:var(--line);background:transparent}
  .t-item:hover .t-card{transform:none;box-shadow:none}

  /* double-tap zoom during a scroll is the other half of "it selected something" */
  a,button,.service-row,.cat-opt,.btn,.pt-chip{touch-action:manipulation}
}

/* The studio clock is decorative and fixed bottom-left, which on a phone puts it on top of the
   footer link column and, mid-page, over service card headings. It stays on tablet and desktop. */
/* @media (max-width:700px){#hud{display:none}} */