/* ==========================================================================
   Reality Machine · site styles (v86: the redesign is now the main site)
   One stylesheet for Home, Work, Studio and Contact. Same tokens, fonts, chamfers
   and button system as the main site (base.css + spaceport.css), with far fewer
   decorative parts. Images, fonts and scramble.js are shared from the site root.
   ========================================================================== */
/* ---------- fonts: self-hosted. Turtle Mode (display) + Rota Pro Grotesk (text/UI) + Serial Port Mono (labels), v88 ---------- */
@font-face{font-family:"Rota Pro Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/rota-pro-grotesk-400.woff2) format("woff2")}
@font-face{font-family:"Rota Pro Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/rota-pro-grotesk-500.woff2) format("woff2")}
@font-face{font-family:"Rota Pro Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/rota-pro-grotesk-600.woff2) format("woff2")}
@font-face{font-family:"Rota Pro Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/rota-pro-grotesk-700.woff2) format("woff2")}
@font-face{font-family:"Rota Pro Grotesk";font-style:normal;font-weight:800 900;font-display:swap;src:url(/assets/fonts/rota-pro-grotesk-800.woff2) format("woff2")}
@font-face{font-family:"Serial Port Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/serial-port-mono-400.woff2) format("woff2")}
@font-face{font-family:"Serial Port Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/serial-port-mono-500.woff2) format("woff2")}
@font-face{font-family:"Serial Port Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/serial-port-mono-600.woff2) format("woff2")}
@font-face{font-family:"Serial Port Mono";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/serial-port-mono-700.woff2) format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/caveat-700-names.woff2) format("woff2")}
@font-face{font-family:"Grenze Gotisch";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/grenze-gotisch-700-names.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/cinzel-700-names.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:700;font-display:swap;src:url(/assets/fonts/cormorant-garamond-700i-names.woff2) format("woff2")}

@font-face{font-family:"Turtle Mode";src:url(/assets/fonts/turtlemode.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Turtle Mode Half";src:url(/assets/fonts/turtlemodehalf.ttf) format("truetype");font-display:swap}

:root{
  --fs-xs:12px;--fs-sm:13px;--fs-ui:14px;--fs-md:15px;--fs-base:16px;--fs-body:17px;--fs-lead:18px;--fs-h6:20px;--fs-h5:22px;--fs-h4:24px;
  --ink:#0E0E0E;--panel:#151412;--panel2:#1b1a17;--line:#2F2C27;--amber:#FBB03B;--amber-h:#FFC766;--text:#EDEAE4;--dim:#A7A198;--mute:#8A8377;
  --paper:#E6E3DC;--teal:#22A0A6;--teal-l:#5CC8C6;
  --gut:40px;--maxw:1840px;--head:76px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html:not(.motion),html.paused{scroll-behavior:auto}
body{margin:0;background:var(--ink);color:var(--text);font-family:"Rota Pro Grotesk",system-ui,sans-serif;font-size:var(--fs-body);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:var(--amber)}
a:hover{color:var(--amber-h)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.05}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd{margin:0}
figure{margin:0}
button{font:inherit;color:inherit}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--amber);color:var(--ink);padding:10px 16px;font-family:"Serial Port Mono",monospace;font-weight:600;text-decoration:none}
.skip:focus{top:12px;color:var(--ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* type helpers */
.meta{font-family:"Serial Port Mono",monospace;font-size:var(--fs-xs);font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.tm{font-family:"Turtle Mode",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.95}
.l2{display:block;color:var(--amber);font-family:"Turtle Mode Half","Turtle Mode",sans-serif}
.kicker{color:var(--teal-l);display:flex;align-items:center;gap:10px}
.kicker.amber{color:var(--amber)}
.kicker::before{content:"";width:8px;height:8px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);flex-shrink:0}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--text-2);max-width:36em}
.dim{color:var(--dim)}

/* ---------- buttons (same system as the main site: chamfered TL + BR, ring outline) ---------- */
.btn{--c:10px;--b:1.5px;--ci:calc(var(--c) + var(--b) * .414);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 24px;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  font-family:"Serial Port Mono",monospace;font-weight:600;font-size:var(--fs-ui);letter-spacing:.08em;line-height:1;text-transform:uppercase;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  transition:background .18s,color .18s,transform .18s}
.btn-primary{background:var(--amber);color:var(--ink)}
.btn-primary:hover{background:var(--amber-h);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--amber)}
.btn-ghost:hover{background:rgba(251,176,59,.12);color:var(--amber)}
.btn-dark{background:var(--ink);color:var(--amber)}
.btn-dark:hover{background:#2a2723;color:var(--amber)}
.btn-dark-ghost{background:transparent;color:var(--ink)}
.btn-dark-ghost:hover{background:rgba(14,14,14,.08);color:var(--ink)}
.btn-ghost::before,.btn-dark-ghost::before{content:"";position:absolute;inset:0;background:currentColor;pointer-events:none;
  clip-path:polygon(evenodd,var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c),var(--c) 0,
    var(--ci) var(--b),calc(100% - var(--b)) var(--b),calc(100% - var(--b)) calc(100% - var(--ci)),calc(100% - var(--ci)) calc(100% - var(--b)),var(--b) calc(100% - var(--b)),var(--b) var(--ci),var(--ci) var(--b))}
.btn-sm{min-height:44px;padding:0 18px;font-size:var(--fs-xs)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:progress}
.btn:focus-visible{outline:2px solid currentColor;outline-offset:-6px}
.btn-primary:focus-visible,.btn-dark:focus-visible{outline-color:var(--ink)}
.btn-dark:focus-visible{outline-color:var(--amber)}
.ctas{display:flex;flex-wrap:wrap;gap:14px}
.arrow-link{display:inline-flex;align-items:center;gap:8px;font-family:"Serial Port Mono",monospace;font-weight:600;font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--amber)}
.arrow-link span{transition:transform .2s var(--ease)}
.arrow-link:hover span{transform:translateX(4px)}

/* ---------- chamfer frame (8 corners, ring drawn with evenodd so it works on any background) ---------- */
.frame{--c:24px;--b:1.5px;--bc:rgba(251,176,59,.6);--ci:calc(var(--c) + var(--b) * .414);position:relative;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.frame::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:var(--bc);
  clip-path:polygon(evenodd,
    var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c),var(--c) 0,
    var(--ci) var(--b),calc(100% - var(--ci)) var(--b),calc(100% - var(--b)) var(--ci),calc(100% - var(--b)) calc(100% - var(--ci)),calc(100% - var(--ci)) calc(100% - var(--b)),var(--ci) calc(100% - var(--b)),var(--b) calc(100% - var(--ci)),var(--b) var(--ci),var(--ci) var(--b))}
.frame-sm{--c:14px}
/* 2-corner chamfer (top-left + bottom-right), for cards */
.cut{--c:14px;clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}





/* ---------- header ---------- */
.nh{position:sticky;top:0;z-index:50;background:rgba(14,14,14,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.nh.scrolled{border-bottom-color:var(--line)}
.nh .wrap{display:flex;align-items:center;gap:24px;min-height:var(--head)}
.nh-logo{display:block;flex-shrink:0}
.nh-logo img{width:104px;height:auto}
.nh nav{margin-left:auto}
.nh ul{display:flex;gap:4px}
.nh nav a{display:flex;align-items:baseline;gap:8px;padding:12px 14px;font-family:"Serial Port Mono",monospace;font-weight:600;font-size:var(--fs-ui);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--text);position:relative}
.nh nav a i{font-style:normal;font-size:var(--fs-xs);color:var(--mute);font-weight:500}
.nh nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nh nav a:hover{color:var(--amber)}
.nh nav a:hover::after,.nh nav a[aria-current="page"]::after{transform:scaleX(1)}
.nh nav a[aria-current="page"]{color:var(--amber)}
.nh nav a[aria-current="page"] i{color:var(--amber)}
.nh-cta{flex-shrink:0}

/* ---------- reveal on scroll ---------- */
html.motion:not(.paused) [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.motion:not(.paused) [data-reveal].in{opacity:1;transform:none}

/* ---------- scramble.js letter cells (from the original spaceport.css) ---------- */
.scr-w{display:inline}
.scr{position:relative;visibility:hidden}
.scr::after{content:attr(data-r);visibility:visible;position:absolute;left:50%;top:0;transform:translateX(-50%);pointer-events:none}
.scr.on{visibility:visible}
.scr.on::after{content:none}

/* ---------- section scaffolding ---------- */
.sec{padding:110px 0}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-items:end;margin-bottom:48px}
.sec-head h2{font-size:clamp(34px,4.2vw,58px);margin-top:14px;max-width:16em}
.sec-head > p,.sec-head .aside{max-width:380px;color:var(--dim);font-size:var(--fs-body);line-height:1.55}
.rule{height:1.5px;background:var(--line);margin-bottom:22px;position:relative}
.rule::after{content:"";position:absolute;left:0;top:-1px;width:120px;height:3.5px;background:var(--amber)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-family:"Serial Port Mono",monospace;font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--line);color:var(--text-2);border-radius:0}

/* =========================================================================
   HOME
   ========================================================================= */
.hero-tag{position:relative;color:var(--teal-l);display:flex;align-items:center;gap:10px;z-index:3}
.hero-tag .lt,.live{width:7px;height:7px;border-radius:50%;background:var(--teal-l);box-shadow:0 0 0 0 rgba(92,200,198,.6);display:inline-block}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(92,200,198,.55)}70%{box-shadow:0 0 0 8px rgba(92,200,198,0)}100%{box-shadow:0 0 0 0 rgba(92,200,198,0)}}
.hud{--c:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:14px;background:#101010}
.hud > div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 28px;border-left:1px solid var(--line)}
.hud > div:first-child{border-left:0}
.hud dt{color:var(--dim)}
.hud dd{font-family:"Serial Port Mono",monospace;font-weight:700;font-size:var(--fs-sm);letter-spacing:.06em;color:var(--text);white-space:nowrap}
.hud dt .live{margin-right:8px;vertical-align:1px}

/* --- selected work: hover list --- */
.wl{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:start}
.wl-list{border-top:1.5px solid var(--line);counter-reset:wl}
.wl-row{border-bottom:1.5px solid var(--line)}
.wl-row a{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:6px 20px;padding:22px 6px;text-decoration:none;color:var(--text);position:relative;transition:padding .3s var(--ease),color .2s}
.wl-row a::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,176,59,.1),transparent 70%);opacity:0;transition:opacity .25s;pointer-events:none}
.wl-n{font-family:"Serial Port Mono",monospace;font-size:var(--fs-sm);color:var(--mute);letter-spacing:.06em}
.wl-name{font-weight:800;font-size:clamp(24px,2.6vw,38px);line-height:1.05;text-transform:uppercase;letter-spacing:-.005em}
.wl-meta{grid-column:2;color:var(--dim)}
.wl-go{grid-row:1 / span 2;grid-column:3;font-family:"Serial Port Mono",monospace;color:var(--amber);font-size:20px;transition:transform .3s var(--ease);opacity:.5}
.wl-thumb{display:none}
.wl-row a:hover,.wl-row a:focus-visible,.wl-row.on a{color:var(--amber)}
.wl-row a:hover::before,.wl-row a:focus-visible::before,.wl-row.on a::before{opacity:1}
.wl-row a:hover .wl-go,.wl-row a:focus-visible .wl-go,.wl-row.on a .wl-go{transform:translateX(6px);opacity:1}
html.motion:not(.paused) .wl-row a:hover,html.motion:not(.paused) .wl-row.on a{padding-left:18px}
.wl-row a:focus-visible{outline-offset:-2px}
.wl-preview{position:sticky;top:calc(var(--head) + 28px);aspect-ratio:4/3;background:#121110;--c:24px}
.wl-preview figure{position:absolute;inset:0;opacity:0;transform:scale(1.035);transition:opacity .45s var(--ease),transform .7s var(--ease)}
.wl-preview figure.on{opacity:1;transform:none}
.wl-preview img{width:100%;height:100%;object-fit:cover}
.wl-preview .stage img{object-fit:contain;padding:6%}
.wl-preview .stage{background:radial-gradient(80% 80% at 50% 45%,#232019,#121110)}
.wl-preview figure::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--client,var(--amber))}
.wl-preview figcaption{position:absolute;left:22px;bottom:20px;z-index:2;background:rgba(14,14,14,.82);padding:7px 10px;color:var(--text)}
.wl-more{margin-top:26px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:var(--dim)}

/* --- clients --- */
.clients{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0}
.clients .wrap{display:flex;align-items:center;gap:22px 48px;flex-wrap:wrap}
.clients h2{color:var(--dim);font-weight:500}
.clients ul{display:flex;align-items:center;flex-wrap:wrap;gap:22px 44px;flex:1;justify-content:space-between}
.clients li{display:flex;align-items:center;gap:10px;font-weight:800;text-transform:uppercase;font-size:var(--fs-md);color:#fff;opacity:.8}
.clients img{height:28px;width:auto}
.clients img.sq{height:36px}

/* --- amber CTA band (shared) --- */
.band{padding:110px 0}
.band-box{--c:28px;background:var(--amber);color:var(--ink);padding:64px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 48px;align-items:end;
  background-image:linear-gradient(rgba(0,0,0,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.07) 1px,transparent 1px);background-size:22px 22px}
.band-box h2{font-size:clamp(36px,4.6vw,70px);line-height:.95;max-width:12em}
.band-box .meta{color:#3b2a08;margin-bottom:18px;display:block}
.band-box p.sub{margin-top:18px;font-size:var(--fs-lead);max-width:30em;color:#2a2010}
.band-box .ctas{justify-content:flex-end}

/* =========================================================================
   FOOTER
   ========================================================================= */
.nf{padding:0 0 28px}



.hz{width:46px;height:14px;flex-shrink:0;background:repeating-linear-gradient(-45deg,var(--amber) 0 6px,transparent 6px 12px)}
.nf-plate{--c:20px;background:var(--amber);color:var(--ink);display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px 56px;padding:40px 44px 26px}
.nf-id{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--ink)}
.nf-id svg{width:124px;height:auto}
.nf-id span{font-family:"Serial Port Mono",monospace;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;line-height:1.5}
.nf-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.nf-cols h2{font-family:"Serial Port Mono",monospace;font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#4a370e;margin-bottom:12px}
.nf-cols li + li{margin-top:6px}
.nf-cols a{color:var(--ink);text-decoration:none;font-weight:700;font-size:var(--fs-md)}
.nf-cols a:hover{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.nf-cols .fsub{display:block;font-weight:400;font-size:var(--fs-sm);color:#4a370e}
.nf-strip{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px;border-top:1.5px solid rgba(14,14,14,.35);padding-top:18px;font-size:var(--fs-sm)}
.nf-strip a{color:var(--ink);font-weight:700}
.nf-strip .dot{margin:0 8px;opacity:.6}
.motion-toggle{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;background:transparent;border:1.5px solid var(--ink);border-radius:0;cursor:pointer;
  font-family:"Serial Port Mono",monospace;font-weight:600;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.motion-toggle .mt-dot{width:8px;height:8px;border-radius:2px;background:var(--ink)}
.motion-toggle[aria-checked="false"] .mt-dot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
.motion-toggle:focus-visible{outline-color:var(--ink)}

/* =========================================================================
   INNER PAGE INTRO (Work / Studio / Contact)
   ========================================================================= */
.intro{padding:84px 0 56px}
.intro h1{font-family:"Turtle Mode",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(46px,6.6vw,110px);line-height:.9;margin:20px 0 26px;color:#F3F0EA}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px 64px;align-items:end}
.counts{display:flex;gap:0;--c:14px;background:#121110}
.counts > div{flex:1;padding:16px 22px;border-left:1px solid var(--line)}
.counts > div:first-child{border-left:0}
.counts dd{font-family:"Turtle Mode",sans-serif;font-size:40px;line-height:1;color:var(--amber);margin-top:8px}
.counts dt{color:var(--dim)}

/* =========================================================================
   WORK
   ========================================================================= */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.filter button,.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:0;border:1.5px solid var(--line);background:transparent;cursor:pointer;
  font-family:"Serial Port Mono",monospace;font-weight:600;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text);transition:border-color .15s,background .15s,color .15s}
.filter button:hover,.chip:hover{border-color:var(--amber)}
.filter button[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.filter .n{opacity:.7}
.feat{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);background:#121110;margin-bottom:28px}
.feat .img{position:relative;min-height:340px}
.feat .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feat .body{padding:40px 40px 36px;display:flex;flex-direction:column;gap:14px}
.feat h3,.card h3{font-size:clamp(28px,2.6vw,40px);text-transform:uppercase}
.feat .line,.card .line{color:var(--text-2);max-width:36em}
.feat .btn{align-self:flex-start;margin-top:auto}
.status{display:flex;justify-content:space-between;gap:12px;color:var(--mute)}
.status .ok{color:var(--teal-l)}
.client{color:var(--amber)}
.spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:6px 0 8px}
.spec > div{padding:12px 0}
.spec > div + div{padding-left:16px;border-left:1px solid var(--line)}
.spec dt{color:var(--mute)}
.spec dd{font-weight:700;font-size:var(--fs-md);margin-top:4px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.card{background:#121110;display:flex;flex-direction:column;--c:18px}
.card .img{position:relative;aspect-ratio:16/10;background:radial-gradient(80% 80% at 50% 45%,#232019,#121110);overflow:hidden}
.card .img img,.card .img button{position:absolute;inset:0;width:100%;height:100%}
.card .img img{object-fit:cover;transition:transform .6s var(--ease)}
.card .img.stage img{object-fit:contain;padding:5%}
.card:hover .img img{transform:scale(1.03)}
.card .img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--client,var(--amber))}
.card .body{padding:26px 28px 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.card[hidden],.feat[hidden]{display:none}
.zoom{padding:0;border:0;background:none;cursor:zoom-in}
.notes{border-top:1px solid var(--line);margin-top:auto;padding-top:4px}
.notes summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:44px;color:var(--amber)}
.notes summary::-webkit-details-marker{display:none}
.notes summary::after{content:"+";font-family:"Serial Port Mono",monospace;font-size:20px;line-height:1;transition:transform .2s}
.notes[open] summary::after{transform:rotate(45deg)}
.notes-in{display:grid;gap:12px;padding:6px 0 4px;color:var(--text-2);font-size:var(--fs-md)}
.notes-in b{color:var(--text)}
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:4px}
.strip button{position:relative;aspect-ratio:3/2;padding:0;border:1px solid var(--line);background:#0e0e0e;cursor:zoom-in;overflow:hidden;border-radius:0}
.strip button:hover{border-color:var(--amber)}
.strip img{width:100%;height:100%;object-fit:cover}
.logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.logos figure{background:#121110;border:1px solid var(--line);border-radius:0;overflow:hidden}
.logos button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.logos img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .5s var(--ease)}
.logos button:hover img{transform:scale(1.03)}
.logos figcaption{display:flex;gap:12px;align-items:baseline;padding:12px 16px;font-weight:700;font-size:var(--fs-md)}
.logos figcaption .meta{color:var(--mute)}
/* lightbox */
.lb{border:0;padding:0;background:transparent;max-width:min(1200px,94vw);max-height:92vh;color:var(--text);overflow:visible}
.lb::backdrop{background:rgba(8,8,8,.9)}
.lb figure{display:flex;flex-direction:column;gap:12px}
.lb img{max-height:80vh;width:auto;max-width:100%;margin:0 auto;border-radius:0}
.lb figcaption{text-align:center;color:var(--dim)}
.lb-bar{display:flex;justify-content:center;gap:10px;margin-top:14px}
.lb-bar button{min-width:48px;min-height:44px;border:1.5px solid var(--amber);border-radius:0;background:var(--ink);color:var(--amber);cursor:pointer;font-family:"Serial Port Mono",monospace;font-weight:600;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;padding:0 14px}
.lb-bar button:hover{background:rgba(251,176,59,.12)}

/* =========================================================================
   STUDIO
   ========================================================================= */
.jump{position:sticky;top:var(--head);z-index:30;background:rgba(14,14,14,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.jump ul{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:8px 0}
.jump ul::-webkit-scrollbar{display:none}
.jump a{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:0;text-decoration:none;white-space:nowrap;color:var(--dim);
  font-family:"Serial Port Mono",monospace;font-weight:600;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase}
.jump a i{font-style:normal;color:var(--mute);font-weight:500}
.jump a:hover{color:var(--text);background:#1a1916}
.jump a.on{color:var(--ink);background:var(--amber)}
.jump a.on i{color:#3b2a08}
.anchor{scroll-margin-top:calc(var(--head) + 70px)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.fact{background:#121110;padding:28px 26px 30px;display:flex;flex-direction:column;gap:10px;--c:16px}
.fact .n{font-family:"Turtle Mode",sans-serif;font-size:44px;line-height:1;color:var(--amber)}
.fact:nth-child(even) .n{color:var(--teal-l)}
.fact h3{font-size:var(--fs-h5);text-transform:uppercase;margin-top:auto;padding-top:20px}
.fact p{color:var(--dim);font-size:var(--fs-md)}
.svc3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.svc{padding:30px 28px 26px;display:flex;flex-direction:column;gap:12px;--c:18px}
.svc header{display:flex;justify-content:space-between;align-items:flex-start}
.svc header img{width:48px;height:48px}
.svc h3{font-family:"Turtle Mode",sans-serif;font-weight:400;font-size:44px;line-height:1;margin-top:18px}
.svc > p{font-size:var(--fs-base);line-height:1.5}
.svc ul{margin-top:8px}
.svc li{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1.5px solid currentColor}
.svc li img{width:34px;height:34px;flex-shrink:0}
.svc li b{display:block;font-weight:800;font-size:var(--fs-base);text-transform:uppercase;line-height:1.15}
.svc li span{display:block;font-family:"Serial Port Mono",monospace;font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;margin-top:3px;opacity:.85}
.svc.s-amber{background:var(--amber);color:var(--ink)}
.svc.s-amber img,.svc.s-teal img{filter:brightness(0)}
.svc.s-dark{background:#151412;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line)}
.svc.s-dark h3{color:var(--amber)}
.svc.s-dark > p{color:var(--dim)}
.svc.s-dark li{border-top-color:var(--line)}
.svc.s-teal{background:var(--teal);color:var(--ink)}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:1.5px solid var(--line);counter-reset:st}
.steps li{padding:26px 22px 8px 0;position:relative}
.steps li::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;background:var(--amber);transform:rotate(45deg)}
.steps .k{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.steps .k b{font-family:"Turtle Mode",sans-serif;font-weight:400;font-size:38px;line-height:1;color:var(--amber)}
.steps .k span{color:var(--mute)}
.steps h3{font-size:var(--fs-h5);text-transform:uppercase;margin-bottom:8px}
.steps p{color:var(--dim);font-size:var(--fs-md)}
.bring{margin-top:48px;padding:32px 36px;background:#121110;--c:16px;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,2fr);gap:20px 40px}
.bring h3{font-size:var(--fs-h4);text-transform:uppercase;margin-top:10px}
.bring ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px}
.bring li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:2px 10px}
.bring li::before{content:counter(br,decimal-leading-zero);counter-increment:br;grid-row:span 2;font-family:"Serial Port Mono",monospace;font-size:var(--fs-sm);color:var(--amber);padding-top:2px}
.bring ul{counter-reset:br}
.bring li b{font-weight:800}
.bring li span{color:var(--dim);font-size:var(--fs-md)}
.bring .note{grid-column:2;color:var(--teal-l);font-size:var(--fs-md)}
.ladder{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-bottom:30px}
.ladder li.chip-p{--c:10px;background:#151412;padding:12px 18px;display:flex;flex-direction:column;gap:2px}
.ladder li.chip-p .meta{color:var(--dim)}
.ladder li.chip-p b{font-size:var(--fs-h6);font-weight:800}
.ladder .note{color:var(--dim);font-size:var(--fs-md);padding-left:6px}













.ava{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--amber);color:var(--ink);font-family:"Serial Port Mono",monospace;font-weight:700;font-size:var(--fs-sm);flex-shrink:0}
.c-kuro{--acc:#FBB03B}.c-rain{--acc:#E2726C}.c-bryce{--acc:#6E8FD6}.c-dera{--acc:#5FB58A}.c-shield{--acc:#A98BE0}.c-rm{--acc:#5CC8C6}
.faq-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.fq{border-bottom:1.5px solid var(--line)}
.fq:first-child{border-top:1.5px solid var(--line)}
.fq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:56px minmax(0,1fr) 24px;align-items:center;gap:12px;padding:20px 4px;font-weight:700;font-size:var(--fs-lead);line-height:1.35}
.fq summary::-webkit-details-marker{display:none}
.fq summary:hover{color:var(--amber)}
.fq .idx{font-family:"Serial Port Mono",monospace;font-size:var(--fs-xs);color:var(--mute);letter-spacing:.08em;font-weight:500}
.fq .pm{position:relative;width:16px;height:16px;justify-self:end}
.fq .pm::before,.fq .pm::after{content:"";position:absolute;background:var(--amber);left:0;top:7px;width:16px;height:2px;transition:transform .25s var(--ease)}
.fq .pm::after{transform:rotate(90deg)}
.fq[open] .pm::after{transform:rotate(0)}
.fq .a{padding:0 40px 24px 72px;color:var(--text-2);max-width:calc(36em + 112px)}
html.motion:not(.paused) .fq[open] > .a{animation:fq-in .35s var(--ease)}
@keyframes fq-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.desk{background:#121110;padding:26px;--c:16px;display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--head) + 90px)}
.desk p{color:var(--text-2)}

/* =========================================================================
   CONTACT
   ========================================================================= */
.ct{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start;padding:72px 0 100px}
.ct h1{font-family:"Turtle Mode",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(44px,5.4vw,88px);line-height:.92;margin:20px 0 24px;color:#F3F0EA}
.promise{margin:26px 0 30px;display:grid;gap:10px}
.promise li{display:flex;gap:12px;align-items:baseline}
.promise li::before{content:"▸";color:var(--teal-l)}
.direct{border-top:1.5px solid var(--line)}
.direct li{border-bottom:1.5px solid var(--line)}
.direct a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:center;padding:18px 4px;text-decoration:none;color:var(--text)}
.direct a .meta{color:var(--mute)}
.direct a b{font-weight:800;font-size:var(--fs-h6)}
.direct a .go{grid-row:1 / span 2;grid-column:2;color:var(--amber);font-family:"Serial Port Mono",monospace;transition:transform .25s var(--ease)}
.direct a:hover b{color:var(--amber)}
.direct a:hover .go{transform:translateX(4px)}
.term{--c:20px;--bc:var(--amber);background:#121110}
.term-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 28px;border-bottom:1.5px solid var(--line);color:var(--amber)}
.term-head span:last-child{color:var(--mute)}
.term-body{padding:28px}
.brief-note{background:rgba(92,200,198,.08);border-left:3px solid var(--teal-l);padding:14px 16px;font-size:var(--fs-md);color:var(--text-2);margin-bottom:26px;max-width:none}
fieldset{border:0;padding:0;margin:0 0 26px;min-width:0}
legend{padding:0;font-weight:800;font-size:var(--fs-h6);margin-bottom:6px;display:block;width:100%}
legend .meta{color:var(--amber);display:block;margin-bottom:6px;font-weight:500}
.qhint{color:var(--dim);font-size:var(--fs-md);margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:0;border:1.5px solid #3a3630;font-size:var(--fs-md);font-weight:600;color:var(--text);transition:border-color .15s,background .15s,color .15s;pointer-events:none}
.opt span::before{content:"";width:10px;height:10px;border:1.5px solid var(--mute);border-radius:2px;flex-shrink:0;transition:background .15s,border-color .15s}
.opt input[type="radio"] + span::before{border-radius:50%}
.opt input:hover + span{border-color:var(--amber)}
.opt input:checked + span{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.opt input:checked + span::before{background:var(--ink);border-color:var(--ink)}
.opt input:focus-visible + span{outline:2px solid var(--amber);outline-offset:3px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1 / -1}
.field label{font-family:"Serial Port Mono",monospace;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.field .req{color:var(--amber)}
.field input,.field textarea{width:100%;min-height:50px;padding:12px 14px;background:#0c0c0c;border:1.5px solid #3a3630;border-radius:0;color:var(--text);font:inherit;font-size:var(--fs-base)}
.field textarea{min-height:130px;resize:vertical;line-height:1.5}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(251,176,59,.18)}
.field input[aria-invalid="true"]{border-color:#ff7a6b}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.send{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;border-top:1.5px solid var(--line);padding-top:22px}
.send small{color:var(--mute);font-size:var(--fs-sm)}
.err{color:#ff9c8f;font-size:var(--fs-md);flex-basis:100%}
.err:empty{display:none}
.done h2{font-family:"Turtle Mode",sans-serif;font-weight:400;font-size:clamp(36px,4vw,54px);line-height:1;text-transform:uppercase;margin:12px 0 14px}
.done h2:focus{outline:none}
.done p{color:var(--text-2);margin-bottom:14px;max-width:34em}
.done .meta{color:var(--amber)}
.done .ctas{margin-top:22px}
.summary{display:grid;gap:8px;margin:20px 0;font-family:"Serial Port Mono",monospace;font-size:var(--fs-sm)}
.summary div{display:flex;gap:12px}
.summary dt{color:var(--mute);min-width:90px}
.linkbtn{background:none;border:0;padding:10px 0;cursor:pointer;color:var(--amber);font-family:"Serial Port Mono",monospace;font-weight:600;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase}
.linkbtn:hover{text-decoration:underline}
.mini-faq{padding:0 0 100px}
.mini-faq .fq summary{font-size:var(--fs-body)}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1180px){
  .hud > div{padding:14px 18px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}
  .crew{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  :root{--gut:28px}
  .hud{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hud > div:nth-child(3){border-left:0}
  .hud > div:nth-child(n/**/+3){border-top:1px solid var(--line)}
  .wl{grid-template-columns:1fr}
  .wl-preview{display:none}
  .wl-row a{grid-template-columns:88px minmax(0,1fr) auto;gap:4px 18px;padding:16px 4px}
  .wl-n{display:none}
  .wl-thumb{display:block;grid-row:1 / span 2;width:88px;aspect-ratio:4/3;border-radius:0;overflow:hidden;background:radial-gradient(80% 80% at 50% 45%,#232019,#121110);border-bottom:3px solid var(--client,var(--amber))}
  .wl-thumb img{width:100%;height:100%;object-fit:cover}
  .wl-thumb.stage img{object-fit:contain;padding:6%}
  html.motion:not(.paused) .wl-row a:hover,html.motion:not(.paused) .wl-row.on a{padding-left:4px}
  .feat{grid-template-columns:1fr}
  .feat .img{min-height:0;aspect-ratio:16/9}
  .intro-grid,.ct,.faq-wrap{grid-template-columns:1fr}
  .desk{position:static}
  .bring{grid-template-columns:1fr}
  .bring .note{grid-column:1}
  
  .band-box{grid-template-columns:1fr;padding:48px 40px}
  .band-box .ctas{justify-content:flex-start}
  .nf-plate{grid-template-columns:1fr}
  .ct{gap:44px;padding-top:56px}
}
@media (max-width:880px){
  .svc3{grid-template-columns:1fr}
  .svc3{max-width:640px}
  
}
@media (max-width:760px){
  :root{--gut:16px;--head:64px}
  body{font-size:var(--fs-base)}
  .sec,.band{padding:72px 0}
  .sec-head{grid-template-columns:1fr;margin-bottom:32px}
  .nh .wrap{gap:12px}
  .nh-logo img{width:86px}
  .nh nav a{padding:12px 9px;font-size:var(--fs-xs);letter-spacing:.08em}
  .nh nav a i{display:none}
  .nh nav a::after{left:9px;right:9px}
  .nh-cta{display:none}
  
  .hud > div{padding:12px 14px;flex-direction:column;align-items:flex-start;gap:4px}
  .wl-row a{grid-template-columns:72px minmax(0,1fr) auto}
  .wl-thumb{width:72px}
  .wl-name{font-size:22px}
  .clients .wrap{flex-direction:column;align-items:flex-start}
  .clients ul{justify-content:flex-start;gap:20px 32px;min-width:0;max-width:100%}
  .band-box{padding:36px 22px;--c:18px}
  .nf-plate{padding:30px 22px 22px;--c:14px}
  .nf-cols{grid-template-columns:1fr 1fr}
  
  
  .intro{padding:56px 0 40px}
  .counts > div{padding:12px 14px}
  .counts dd{font-size:30px}
  .feat .body,.card .body{padding:22px 20px 22px}
  .cards{grid-template-columns:1fr;gap:20px}
  .spec{grid-template-columns:1fr 1fr 1fr}
  .spec > div + div{padding-left:10px}
  .logos{grid-template-columns:1fr 1fr;gap:12px}
  .logos figcaption{padding:10px 12px;font-size:var(--fs-sm);flex-direction:column;gap:2px}
  .facts{gap:12px;grid-template-columns:1fr}
  .fact{padding:20px 18px;display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 14px;align-items:start}
  .fact .n{font-size:32px;grid-row:span 2}
  .fact h3{font-size:var(--fs-lead);margin:0;padding:4px 0 0}
  .steps{grid-template-columns:1fr;border-top:0;border-left:1.5px solid var(--line);padding-left:22px}
  .steps li{padding:4px 0 22px}
  .steps li::before{left:-27px;top:12px}
  .bring{padding:24px 20px}
  .bring ul{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .quote{padding:24px 20px}
  .crew{grid-template-columns:1fr}
  .fq summary{grid-template-columns:44px minmax(0,1fr) 20px;font-size:var(--fs-body);padding:18px 2px}
  .fq .a{padding:0 4px 22px 56px}
  .term-head{padding:14px 18px}
  .term-body{padding:22px 18px}
  .fields{grid-template-columns:1fr}
  .send .btn{width:100%}
  }
@media (max-width:420px){
  .nh nav a{padding:12px 7px;letter-spacing:.05em}
  .nh nav a::after{left:7px;right:7px}
  .nh-logo img{width:76px}
  .hud{grid-template-columns:1fr 1fr}
  .logos{grid-template-columns:1fr}
  .logos figcaption{flex-direction:row;gap:12px}
}
/* v72: next-page hand-off above the CTA band */
.next-page{padding:0;margin-top:-70px}
.next-page .wrap{display:flex;justify-content:flex-end}
/* v72: five main links. Phones: logo + CTA on top, links on their own row */
@media (max-width:960px){
  :root{--head:104px}
  .nh .wrap{flex-wrap:wrap;row-gap:0}
  .nh nav{order:3;width:100%;margin:0 -9px}
  .nh ul{justify-content:space-between}
  .nh-cta{display:inline-flex;margin-left:auto}
}
@media (max-width:420px){
  .nh nav{margin:0 -7px}
}
@media (max-width:359px){
  .nh nav{margin:0 -5px}
  .nh nav a{padding:12px 5px;letter-spacing:0}
  .nh nav a::after{left:5px;right:5px}
}

/* ---------- ported from the main site (spaceport.css / v12.css / crew-testbay.css), v73 ---------- */
.final { padding: 100px 0px 110px; }
.duo { position: relative; overflow: hidden; background: var(--ink); isolation: isolate; }
.duo::after { content: ""; position: absolute; inset: 0px; z-index: -1; background: linear-gradient(180deg,var(--teal) 0%,var(--amber) 100%); mix-blend-mode: multiply; pointer-events: none; }
.duo::after { background: radial-gradient(circle, rgba(14, 14, 14, 0.5) 0px, rgba(14, 14, 14, 0.5) 0.9px, transparent 1.3px) 0px 0px / 4px 4px; mix-blend-mode: multiply; }
.final { padding: 100px 0px 110px; }
.dep { display: grid; grid-template-columns: minmax(0px, 1.4fr) minmax(0px, 1fr); column-gap: 14px; min-height: 520px; }
.dep-panel { position: relative; background: var(--amber); color: var(--ink); padding: 56px 120px 64px 64px; display: flex; flex-direction: column; justify-content: center; clip-path: polygon(30px 0px, calc(100% - 90px) 0px, 100% 100%, 150px 100%, 126px calc(100% - 26px), 0px calc(100% - 26px), 0px 30px); }





.dep-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.dep-head img { height: 26px; width: 150px; }
.dep-head .meta { font-weight: 600; }
.dep h2 { margin: 0px; font-size: clamp(40px, 4.6vw, 76px); line-height: 0.96; max-width: 760px; }
.dep-sub { margin: 22px 0px 0px; font-weight: 600; color: rgb(59, 42, 8); }
.dep .ctas { margin-top: 30px; }
.dep-win { margin-left: -90px; min-height: 100%; clip-path: polygon(0px 0px, calc(100% - 30px) 0px, 100% 30px, 100% 100%, 90px 100%); }
.dep-emblem { position: absolute; right: 26px; top: 44px; display: flex; align-items: center; justify-content: center; padding: 14px 18px; background: var(--ink); border: 1.5px solid var(--amber); border-radius: 999px; }
.dep-meter { position: absolute; right: 26px; bottom: 52px; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--paper); color: var(--ink); min-width: 200px; clip-path: polygon(10px 0px, 100% 0px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0px 100%, 0px 10px); }
.dep-meter .meta { font-size: var(--fs-xs); font-weight: 600; }
.dep-meter b { font-family: "Turtle Mode", sans-serif; font-weight: 400; font-size: var(--fs-h4); line-height: 1; text-transform: uppercase; }
.seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.seg i { height: 12px; background: rgb(201, 196, 186); }
.seg i.on { background: var(--teal); }




@media (max-width: 1100px){.dep-panel { padding: 48px 110px 60px 56px; }}

@media (max-width: 900px){.dep { grid-template-columns: minmax(0px, 1fr); row-gap: 14px; }}
@media (max-width: 900px){.dep-panel { padding: 48px 28px 56px 52px; clip-path: polygon(24px 0px, 100% 0px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0px 100%, 0px 24px); }}


@media (max-width: 900px){.dep-win { margin-left: 0px; min-height: 0px; aspect-ratio: 4 / 3; clip-path: polygon(0px 0px, calc(100% - 24px) 0px, 100% 24px, 100% 100%, 24px 100%, 0px calc(100% - 24px)); }}
@media (max-width: 640px){.dep-panel { padding: 40px 20px 44px 44px; }}

@media (max-width: 640px){.dep-win { aspect-ratio: 3 / 4; }}
@media (max-width: 640px){.dep-meter { left: 16px; right: 16px; bottom: 44px; min-width: 0px; }}
@media (max-width: 640px){.dep-emblem { right: 16px; top: 16px; }}


@media (max-width: 640px){.dep-head img { display: none; }}
.dep-emblem { --c: 10px; border: 0px; border-radius: 0px; padding: 14px 20px; background: var(--ink); clip-path: polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c)); }
.dep-emblem::before { content: ""; position: absolute; inset: 0px; background: var(--amber); pointer-events: none; clip-path: polygon(evenodd, 10px 0px, 100% 0px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0px 100%, 0px 10px, 10px 0px, 10.6px 1.5px, calc(100% - 1.5px) 1.5px, calc(100% - 1.5px) calc(100% - 10.6px), calc(100% - 10.6px) calc(100% - 1.5px), 1.5px calc(100% - 1.5px), 1.5px 10.6px, 10.6px 1.5px); }
.dep-emblem .rmb { transform: translateX(3px); }
.duo.art > picture { position: absolute; inset: 0px; z-index: -2; }
.duo.art > picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.duo.art::after { content: none; }
.dep-win.art img { object-position: 50% 22%; }

.motion-toggle.ft { display: none; }
@media (max-width: 1100px){.motion-toggle.ft { display: inline-flex; }}
.fcols { display: grid; grid-template-columns: repeat(3, auto); gap: 20px 64px; margin-right: auto; }
.fcol ul { list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: column; gap: 6px; }
.site-foot .fh { margin: 0px 0px 10px; font-family: "Serial Port Mono", monospace; font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); }
.site-foot .fcol a, .site-foot .fcol span { text-decoration: none; line-height: 1.5; min-height: 28px; display: inline-flex; align-items: center; font-family: "Rota Pro Grotesk", sans-serif !important; font-size: var(--fs-base) !important; letter-spacing: 0.01em !important; text-transform: none !important; color: rgb(207, 201, 191) !important; }
.site-foot .fcol a:hover, .site-foot .fcol a:focus-visible { text-decoration: underline; text-underline-offset: 3px; color: var(--amber) !important; }
.site-foot .fcol .fsub { margin-left: 8px; min-height: 0px; font-family: "Serial Port Mono", monospace !important; font-size: var(--fs-xs) !important; color: var(--dim) !important; }
.fbase { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 760px){.fcols { grid-template-columns: 1fr 1fr; width: 100%; }}
@media (max-width: 760px){.fcols .fcol:first-child { grid-column: 1 / -1; }}
@media (max-width: 760px){.site-foot .fcol .fsub { display: none !important; }}
.fplate { display: grid; gap: 8px; padding: 8px; background: var(--amber); color: rgb(14, 14, 14); grid-template-columns: minmax(150px, 220px) minmax(0px, 1fr) minmax(220px, 320px); grid-template-areas: "id links code" "name strip loc"; clip-path: polygon(18px 0px, 100% 0px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0px 100%, 0px 18px); }
.fplate > * { margin: 0px; min-width: 0px; }
.fp-id, .fp-links, .fp-strip, .fp-loc { background: rgb(14, 14, 14); color: var(--amber); }
.fp-id, .fp-links, .fp-strip, .fp-loc { --c: 14px; clip-path: polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c)); }
.fp-strip, .fp-loc { --c: 9px; }
.fp-id { grid-area: id; display: grid; place-items: center; padding: 24px 20px; transition: background 0.2s; }
.fp-id svg { width: 100%; max-width: 150px; height: auto; }
.fp-id:hover { background: rgb(23, 20, 15); }
.fp-name { grid-area: name; align-self: center; padding: 4px 6px 2px; font-family: "Rota Pro Grotesk", sans-serif; font-weight: 800; font-size: var(--fs-h5); line-height: 0.98; text-transform: uppercase; letter-spacing: 0.01em; color: rgb(14, 14, 14); }
.fplate .fp-links { grid-area: links; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 20px 32px; margin: 0px; padding: 24px 28px; }
.fplate .fh { color: rgb(138, 122, 92); margin-bottom: 12px; }
.site-foot .fplate .fcol a, .site-foot .fplate .fcol span { color: var(--amber) !important; }
.site-foot .fplate .fcol a:hover, .site-foot .fplate .fcol a:focus-visible { color: rgb(243, 240, 234) !important; }
.site-foot .fplate .fcol .fsub { color: rgb(138, 122, 92) !important; }
.fp-code { grid-area: code; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 18px 12px; text-align: center; }
.fp-code b { font-family: "Turtle Mode", sans-serif; font-weight: 400; font-size: clamp(46px, 4.6vw, 76px); line-height: 0.9; letter-spacing: 0.02em; }
.site-foot .fp-code span { font-family: "Serial Port Mono", monospace; font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: rgb(14, 14, 14); white-space: nowrap; }
.fp-strip, .fp-loc { display: flex; align-items: center; padding: 12px 18px; font-family: "Serial Port Mono", monospace; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; }
.fp-strip small { font-size: inherit; color: inherit; }
.fp-strip { flex-wrap: wrap; gap: 6px 0.55em; }
.fp-legal { display: flex; align-items: center; gap: 0.55em; }
.fp-dot { opacity: 0.8; }
.site-foot .fp-legal a { display: inline-flex; align-items: center; min-height: 24px; font-size: inherit; letter-spacing: inherit; color: var(--amber); text-decoration: underline rgba(251, 176, 59, 0.45); text-underline-offset: 3px; }
.site-foot .fp-legal a:hover, .site-foot .fp-legal a:focus-visible { color: rgb(243, 240, 234); text-decoration-color: currentcolor; }
.fp-strip { grid-area: strip; }
.fp-loc { grid-area: loc; justify-content: center; }
.site-foot .fbase { border-top: 0px; padding-top: 16px; }
@media (min-width: 1101px){.site-foot .fbase { display: none; }}
@media (max-width: 1100px){.fplate { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); grid-template-areas: "id code" "name loc" "links links" "strip strip"; }}
@media (max-width: 760px){.fplate { gap: 6px; padding: 6px; clip-path: polygon(14px 0px, 100% 0px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0px 100%, 0px 14px); }}
@media (max-width: 760px){.fp-id { padding: 18px 14px; }}
@media (max-width: 760px){.fp-id svg { max-width: 110px; }}
@media (max-width: 760px){.fp-id, .fp-links { --c: 12px; }}
@media (max-width: 760px){.fp-strip, .fp-loc { --c: 8px; }}
@media (max-width: 760px){.fp-name { font-size: var(--fs-lead); }}
@media (max-width: 760px){.fp-code b { font-size: clamp(34px, 11vw, 52px); }}
@media (max-width: 760px){.site-foot .fp-code span { font-size: var(--fs-xs); letter-spacing: 0.06em; }}
@media (max-width: 760px){.fplate .fp-links { grid-template-columns: 1fr 1fr; padding: 20px 18px; }}
@media (max-width: 760px){.fplate .fp-links .fcol:first-child { grid-column: 1 / -1; }}
@media (max-width: 760px){.fp-strip, .fp-loc { padding: 11px 14px; font-size: var(--fs-xs); letter-spacing: 0.08em; }}
@media (max-width: 760px){.fp-legal > .fp-dot:first-child { display: none; }}
@media (max-width: 400px){.site-foot .fp-code span { white-space: normal; text-wrap-style: balance; letter-spacing: 0.04em; }}
.fp-loc { text-align: center; }















/* =========================================================================
   v73 · full width, square corners, portal hero, main-site final call + footer,
   themed crew ID cards, globe, passenger log, quiet motion
   ========================================================================= */
:root{--text-2:#D7D2CA;--teal-d:#17666A}
.nh .wrap{max-width:none}

/* ---------- square corners everywhere (circles stay only for status dots) ---------- */
.logos figure{border:0;background:#121110;--c:14px;--bc:var(--line);transition:transform .45s var(--ease)}
.logos figure:hover{--bc:var(--amber)}
.logos figcaption{border-top:1px solid var(--line)}

/* ---------- section rule draws in ---------- */
html.motion:not(.paused) .rule::after{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .1s}
html.motion:not(.paused) .rule.in::after{transform:none}
/* staggered reveal inside grids (JS sets --i) */
html.motion:not(.paused) [data-reveal]{transition-delay:calc(var(--i,0) * 70ms)}

/* ---------- CREW · themed ID cards (ported from the main site, flattened: solid colours, no textures) ---------- */
.crew-sec{padding-top:110px}
.crew-links a{border-radius:0}
.c-mech{background:#1E2024}
.c-knight{background:#1A3263}
.c-knight .crew-top{background:#27478A}
.c-goth .crew-top{background:#4A0D1B}
.c-nature{background:#1F3B30}
.c-nature .crew-top{background:#2F6B4F}
.c-arcane{background:#221B55}
.c-arcane .crew-top{background:#4B2F8F}
html.motion:not(.paused) .crew[data-reveal]{transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
html.motion:not(.paused) .crew[data-reveal].in:hover{transform:translateY(-6px) rotate(-.4deg);transition-delay:0s}
html.paused .crew:hover{transform:none}

/* ---------- network + small globe ---------- */





/* ---------- PASSENGER LOG (testimonials) ---------- */
.logbook{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 28px;align-items:start}
.lg{position:relative}
.lg-wide{grid-column:1 / -1}
.lg figure{position:relative;overflow:hidden;margin:0;padding:0 34px 30px;--c:18px;clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  background:var(--lg-bg);color:var(--lg-ink);transform:rotate(var(--tilt,0deg));transition:transform .5s var(--ease)}
.lg:nth-child(2) figure{--tilt:-.7deg}.lg:nth-child(3) figure{--tilt:.6deg}
.lg figure:hover{transform:rotate(0deg) translateY(-4px)}
.lg-paper{--lg-bg:var(--paper);--lg-ink:#0E0E0E;--lg-dim:#5c564c;--lg-mark:rgba(251,176,59,.75);--lg-stamp:#B2283D;--lg-line:rgba(14,14,14,.3)}
.lg-amber{--lg-bg:var(--amber);--lg-ink:#0E0E0E;--lg-dim:#4a370e;--lg-mark:rgba(255,255,255,.6);--lg-stamp:#17666A;--lg-line:rgba(14,14,14,.32)}
.lg-ink{--lg-bg:#151412;--lg-ink:var(--text);--lg-dim:var(--dim);--lg-mark:rgba(34,160,166,.55);--lg-stamp:#5CC8C6;--lg-line:rgba(237,234,228,.18)}
.lg-head{display:flex;align-items:center;gap:14px;margin:0 -34px 26px;padding:14px 34px;border-bottom:1.5px dashed var(--lg-line);color:var(--lg-dim);font-weight:600}
.lg-head .lg-route{margin-left:auto;color:var(--lg-ink)}
.lg-head img{height:18px;width:96px;opacity:.75}
.lg-ink .lg-head img{filter:invert(1);opacity:.45}
.lg-q{margin:0;position:relative}
.lg-q::before{content:"“";position:absolute;left:-8px;top:-52px;font-family:"Rota Pro Grotesk",sans-serif;font-weight:900;font-size:120px;line-height:1;color:var(--lg-ink);opacity:.12;pointer-events:none}
.lg-q p{position:relative;padding-right:min(120px,10%);font-size:clamp(18px,1.45vw,22px);line-height:1.55;font-weight:500;max-width:40em}
.lg-wide .lg-q p{font-size:clamp(19px,1.65vw,25px)}
.lg mark{color:inherit;font-weight:800;background:linear-gradient(var(--lg-mark),var(--lg-mark)) 0 88% / 100% 40% no-repeat;padding:0 2px}
html.motion:not(.paused) .lg mark{background-size:0% 40%;transition:background-size 1.1s var(--ease) .5s}
html.motion:not(.paused) .lg.in mark{background-size:100% 40%}
.lg-by{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:18px;border-top:1.5px solid var(--lg-line)}
.lg-ava{width:48px;height:48px;flex-shrink:0;display:grid;place-items:center;background:var(--lg-ink);color:var(--lg-bg);font-family:"Serial Port Mono",monospace;font-weight:700;font-size:var(--fs-sm);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.lg-who b{display:block;font-weight:800;font-size:var(--fs-body)}
.lg-who span{color:var(--lg-dim);font-size:var(--fs-md)}
.lg-proj{margin-left:auto;color:var(--lg-dim);text-align:right}
.lg-stamp{position:absolute;right:30px;top:64px;width:104px;height:104px;color:var(--lg-stamp);opacity:.85;transform:rotate(-14deg);pointer-events:none;mix-blend-mode:multiply}
.lg-ink .lg-stamp{mix-blend-mode:normal;opacity:.7}
.lg-stamp svg{width:100%;height:100%}
html.motion:not(.paused) .lg .lg-stamp{opacity:0;transform:rotate(-30deg) scale(1.7);transition:opacity .25s ease .75s,transform .45s cubic-bezier(.3,1.6,.5,1) .75s}
html.motion:not(.paused) .lg.in .lg-stamp{opacity:.85;transform:rotate(-14deg) scale(1)}
html.motion:not(.paused) .lg-ink.in .lg-stamp{opacity:.7}
.lg-more{margin-top:26px;color:var(--dim);font-size:var(--fs-md)}
@media (max-width:900px){
  .logbook{grid-template-columns:minmax(0,1fr)}
  .lg figure{padding:0 22px 24px}
  .lg-head{margin:0 -22px 22px;padding:12px 22px}
  .lg-head img{display:none}
  .lg-stamp{width:72px;height:72px;right:14px;top:auto;bottom:18px}
  .lg-proj{display:none}
}

/* ---------- FINAL CALL (ported from the main site) ---------- */
.final .dep-win picture img{transition:transform 1.4s var(--ease)}

html.motion:not(.paused) .dep .seg i.on{background:rgb(201,196,186);transition:background .3s ease}
html.motion:not(.paused) .dep.in .seg i.on{background:var(--teal)}
html.motion:not(.paused) .dep.in .seg i.on:nth-child(1){transition-delay:.5s}
html.motion:not(.paused) .dep.in .seg i.on:nth-child(2){transition-delay:.65s}
html.motion:not(.paused) .dep.in .seg i.on:nth-child(3){transition-delay:.8s}
html.motion:not(.paused) .dep.in .seg i.on:nth-child(4){transition-delay:.95s}


/* ---------- FOOTER (ported spec plate) ---------- */
.site-foot{padding:0 0 28px}
.site-foot > .wrap{max-width:none}

.site-foot .fbase{display:flex;justify-content:flex-end}
.site-foot .motion-toggle.ft{display:inline-flex;border-color:var(--line);color:var(--dim)}
.site-foot .fplate .fcol a,.site-foot .fplate .fcol span{min-height:24px}
@media (max-width:760px){.next-page{margin-top:-36px}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* =========================================================================
   HOME · HERO (v74): full-height slit portal
   The slit is one clip-path polygon (fixed point count, so shapes can morph). JS writes --shape.
   The big rim glow (drop-shadow) only runs on wide screens with a mouse; phones/tablets get a 1px rim
   plus the static colour spill, which keeps the swap cheap to paint.
   ========================================================================= */


















@keyframes ptdrift{from{transform:scale(1.06)}to{transform:scale(1)}}

















.hud-wrap{padding:0 var(--gut);max-width:calc(var(--maxw) + 2 * var(--gut) - 80px);margin:0 auto}
.hud-wrap .hud{margin-top:18px}




/* =========================================================================
   v74 · spacing pass
   - Work cards + home preview use 16:9 frames, so 16:9 logo boards are never cropped (artist signatures, edges)
     and 4:3 art keeps its own margins. Art that needs more room gets a padded 16:9 export (Silk Routes).
   - Testimonial stamps get their own lane so they never sit on the quote.
   - Footer "Design + dev studio" label gets breathing room inside its amber cell.
   ========================================================================= */
.card .img{aspect-ratio:16/9}
.wl-preview{aspect-ratio:16/9}
@media (min-width:901px){.lg-q p{padding-right:132px}}
@media (max-width:900px){.lg-by{padding-right:84px}}
.fp-name{padding:12px 14px 14px}

/* ===== crew ID cards (merged from crew.css in v75 so the Crew page never loads without them) ===== */
/* Reality Machine · themed crew ID cards, ported from the main site (crew-testbay.css, v12.css), v73.
   Flattened in new.css (solid colours instead of textures). If a card changes on the main site, update this file. */
.crew-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 26px; }
.crew { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 18px 18px 16px; background: var(--paper); color: var(--ink); clip-path: polygon(22px 0px, calc(50% - 34px) 0px, calc(50% - 28px) 8px, calc(50% + 28px) 8px, calc(50% + 34px) 0px, calc(100% - 22px) 0px, 100% 22px, 100% 100%, 22px 100%, 0px calc(100% - 22px), 0px 22px); transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.crew:hover { transform: translateY(-6px) rotate(-0.4deg); }
.crew-slot { position: absolute; left: 50%; top: 18px; width: 54px; height: 9px; margin-left: -27px; border-radius: 5px; background: var(--ink); }
.crew-top { display: flex; justify-content: space-between; gap: 10px; margin: -18px -18px 0px; padding: 34px 18px 12px; }
.crew-top .meta { font-size: var(--fs-xs); font-weight: 600; }
.crew-id { display: grid; grid-template-columns: 96px minmax(0px, 1fr); gap: 16px; align-items: center; }
.crew-ava { aspect-ratio: 1 / 1; overflow: hidden; clip-path: polygon(10px 0px, 100% 0px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0px 100%, 0px 10px); }
.crew-ava svg, .crew-ava img { display: block; width: 100%; height: 100%; object-fit: cover; }
.crew-meta { margin: 0px; display: flex; flex-direction: column; gap: 10px; }
.crew-meta dt { font-size: var(--fs-xs); color: rgb(148, 141, 130); }
.crew-meta dd { margin: 2px 0px 0px; font-weight: 800; font-size: var(--fs-h6); line-height: 1.05; text-transform: uppercase; }
.crew-tags li { border-color: rgba(14, 14, 14, 0.3); color: rgb(43, 40, 35); }
.crew-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 12px; border-top: 1.5px dashed rgba(14, 14, 14, 0.35); }
.crew-foot img { height: 24px; width: 120px; }
.crew-foot .meta { font-size: var(--fs-xs); font-weight: 600; }
@media (max-width: 1100px){.crew-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }}
@media (max-width: 760px){.crew-grid { grid-template-columns: minmax(0px, 1fr); }}
@media (prefers-reduced-motion: reduce){.crew:hover { transform: none; }}
.crew-meta .role { font-size: var(--fs-body); line-height: 1.1; }
.crew-row2 { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 26px; }
.crew-sm { clip-path: polygon(18px 0px, 100% 0px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0px 100%, 0px 18px); padding: 16px 18px; }
.crew-sm .crew-top { padding: 12px 18px; margin: -16px -18px 0px; background: rgb(207, 201, 189); }
.crew-sm-in { display: grid; grid-template-columns: 84px minmax(0px, 1fr) 128px; gap: 18px; align-items: center; }
.crew-sm .crew-meta { gap: 6px; }
.sm-tags { font-size: var(--fs-xs); color: rgb(74, 69, 60); }
.c-goth { --crim: #FF2348; --parch: #E8DCC8; background: rgb(20, 16, 19); color: var(--parch); box-shadow: rgba(255, 35, 72, 0.25) 0px 0px 0px 1px inset; }
.c-goth .crew-top { background: linear-gradient(rgb(74, 13, 27), rgb(36, 9, 15)); color: var(--parch); }
.c-goth .crew-slot { background: rgb(0, 0, 0); }
.c-goth .crew-meta dt { color: rgb(156, 143, 128); }
.goth-name { letter-spacing: 0.02em; color: var(--crim); font-family: "Grenze Gotisch", serif !important; font-weight: 400 !important; font-size: 34px !important; text-transform: none !important; }
.c-goth .crew-ava { filter: sepia(0.3) hue-rotate(-20deg); }
.c-goth .crew-tags li { border-color: rgba(232, 220, 200, 0.25); color: var(--parch); }
.c-goth .crew-foot { border-top-color: rgba(232, 220, 200, 0.2); }
.c-goth .crew-foot img { opacity: 0.6; }
.c-goth:hover { transform: translateY(-6px); }
@media (max-width: 900px){.crew-row2 { grid-template-columns: minmax(0px, 1fr); }}
@media (max-width: 760px){.crew-sm-in { grid-template-columns: 72px minmax(0px, 1fr); }}
.crew-meta dd.sm-tags { font-family: "Serial Port Mono", monospace; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.1em; line-height: 1.5; text-transform: uppercase; color: rgb(74, 69, 60); margin-top: 2px; }
.crew-sm-in { grid-template-columns: 84px minmax(0px, 1fr) 170px; }
.c-goth .crew-ava { filter: none; }
.crew-top { position: relative; }
.c-mech { --mo: #FF7A1A; background: linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.05) 50%, transparent calc(50% + 0.5px)) 0px 0px / 100% 100%, linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0px 0px / 100% 64px, linear-gradient(170deg, rgb(42, 45, 51), rgb(27, 29, 33) 60%, rgb(35, 38, 43)); color: rgb(230, 227, 220); }
.c-mech .crew-top { background: var(--amber); color: var(--ink); }
.c-mech .crew-top::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: -7px; height: 7px; background: repeating-linear-gradient(135deg,var(--amber) 0 8px,var(--ink) 8px 16px); }
.c-mech .crew-slot { background: rgb(11, 12, 14); }
.c-mech .crew-id { margin-top: 6px; }
.c-mech .crew-meta dt { color: rgb(143, 148, 156); }
.c-mech .nm { letter-spacing: 0.04em; color: var(--amber); font-family: "Turtle Mode", sans-serif !important; font-weight: 400 !important; font-size: 30px !important; }
.c-mech .crew-ava { box-shadow: inset 0 0 0 2px var(--mo); }
.c-mech .crew-tags li { border-color: rgba(255, 255, 255, 0.18); color: var(--text-2); }
.c-mech .crew-foot { border-top-color: rgba(255, 255, 255, 0.18); }
.c-mech .crew-foot img { filter: invert(1); opacity: 0.55; }
.c-mech .crew-foot .meta { color: var(--mo); }
.c-knight { --gold: #C9A24A; --royal: #1F3A6E; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0px, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 3px), radial-gradient(120% 90% at 100% 0%, rgba(201, 162, 74, 0.16), transparent 55%), linear-gradient(160deg, rgb(29, 55, 104) 0%, rgb(18, 35, 74) 42%, rgb(24, 45, 92) 58%, rgb(12, 24, 54) 100%); color: rgb(238, 241, 246); }
.c-knight .crew-top { background: linear-gradient(180deg,#27478a,var(--royal)); color: rgb(240, 216, 142); border-bottom: 2px solid var(--gold); }
.c-knight .crew-top .crest { width: 14px; height: 16px; margin-right: 8px; vertical-align: -3px; color: var(--gold); }
.c-knight .crew-slot { background: rgb(20, 38, 74); }
.c-knight .crew-meta dt { color: rgb(180, 192, 216); }
.c-knight .nm { letter-spacing: 0.06em; color: rgb(240, 216, 142); font-family: Cinzel, serif !important; font-weight: 700 !important; font-size: 28px !important; }
.c-knight .crew-meta .role { color: rgb(238, 241, 246); }
.c-knight .crew-ava { box-shadow: inset 0 0 0 2px var(--gold); }
.c-knight .crew-tags li { border-color: rgba(240, 216, 142, 0.4); color: rgb(238, 241, 246); background: rgba(255, 255, 255, 0.06); }
.c-knight .crew-foot { border-top-color: rgba(240, 216, 142, 0.3); }
.c-knight .crew-foot .meta { color: rgb(240, 216, 142); }
.sheen { position: absolute; inset: 0px; pointer-events: none; z-index: 3; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.22) 48%, rgba(255, 255, 255, 0.1) 54%, transparent 62%); transform: translateX(-120%); }
html.motion:not(.paused) .c-knight:hover .sheen { transition: transform 1.1s cubic-bezier(0.3, 0.1, 0.2, 1); transform: translateX(120%); }
.c-nature { --leaf: #A8D98C; --sky: #7CC4E0; background: radial-gradient(circle at 85% 120%, rgba(124, 196, 224, 0.18), transparent 55%), radial-gradient(circle at 0% 0%, rgba(168, 217, 140, 0.14), transparent 50%), linear-gradient(160deg, rgb(33, 64, 47), rgb(28, 58, 62)); color: rgb(230, 239, 230); }
.c-nature .crew-top { background: linear-gradient(90deg, rgb(47, 107, 79), rgb(43, 111, 138)); color: rgb(234, 245, 236); }
.c-nature .sprig { width: 26px; height: 13px; margin-right: 8px; vertical-align: -2px; color: var(--leaf); transform-origin: 0px 100%; }
html.motion:not(.paused) .c-nature:hover .sprig { animation: 1.8s ease-in-out 0s infinite normal none running sway; }
.c-nature .crew-meta dt, .c-nature .sm-tags { color: rgb(165, 196, 178) !important; }
.c-nature .nm { color: var(--leaf); font-family: Caveat, cursive !important; font-weight: 700 !important; font-size: 36px !important; text-transform: none !important; line-height: 0.9 !important; }
.c-arcane { --ar: #C9B2FF; --pg: #E9D79A; position: relative; overflow: hidden; background: radial-gradient(120% 140% at 85% 0%, rgb(61, 44, 125) 0%, rgb(29, 23, 69) 55%, rgb(19, 15, 46) 100%); color: rgb(237, 230, 214); }
.c-arcane .crew-top { background: linear-gradient(90deg, rgb(75, 47, 143), rgb(42, 63, 143)); color: rgb(241, 230, 200); }
.c-arcane .crew-top .clr { color: var(--pg); }
.c-arcane .crew-sm-in { position: relative; }
.c-arcane .crew-meta dt, .c-arcane .sm-tags { color: rgb(179, 169, 220) !important; }
.c-arcane .nm { font-style: italic; color: var(--pg); font-family: "Cormorant Garamond", serif !important; font-weight: 700 !important; font-size: 34px !important; text-transform: none !important; line-height: 0.95 !important; }
@media (max-width: 760px){.crew-sm-in { grid-template-columns: 72px minmax(0px, 1fr); }}
@media (max-width: 760px){.crew-sm .crew-top { flex-wrap: wrap; row-gap: 4px; }}
@media (max-width: 760px){.crew-sm .nm { font-size: 30px !important; }}
.goth-name { letter-spacing: 0.01em; font-family: "Grenze Gotisch", serif !important; font-weight: 400 !important; font-size: 48px !important; line-height: 1 !important; }
.c-nature { position: relative; overflow: hidden; }
.c-nature .sprig { width: 15px; height: 15px; margin-right: 8px; vertical-align: -3px; transform-origin: 15% 85%; }
.c-nature .crew-sm-in { position: relative; }
.crew-row2 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.crew-sm-in { grid-template-columns: 84px minmax(0px, 1fr) !important; }
@media (max-width: 1100px){.crew-row2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }}
@media (max-width: 1100px){.crew-row2 > .c-rm { grid-column: 1 / -1; }}
@media (max-width: 760px){.crew-row2 { grid-template-columns: minmax(0px, 1fr); }}
@media (max-width: 760px){.crew-sm-in { grid-template-columns: 72px minmax(0px, 1fr) !important; }}
.c-rm { background: rgb(20, 18, 16); color: var(--text); border: 0px; }
.c-rm .crew-top { color: rgb(27, 26, 24); background: var(--amber) !important; }
.c-rm .crew-top .meta { color: rgb(27, 26, 24); }
.c-rm .rm-live { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: rgb(27, 26, 24); vertical-align: 1px; }
html.motion:not(.paused) .c-rm .rm-live { animation: 1.6s ease-in-out 0s infinite normal none running rmlive; }
.c-rm .rm-ava { display: grid; place-items: center; background: rgb(11, 10, 9); box-shadow: rgba(251, 176, 59, 0.55) 0px 0px 0px 1.5px inset; }
.c-rm .rm-ava .rmb { width: 62px; height: auto; }
.c-rm .nm { color: var(--amber) !important; font-size: clamp(24px, 2.1vw, 30px) !important; }
.c-rm .role { color: var(--text) !important; }
.c-rm .sm-tags { color: var(--dim) !important; }
.c-rm .crew-foot { border-top-color: rgba(255, 255, 255, 0.16); }
.c-rm .crew-foot img { filter: invert(1); opacity: 0.5; }
.c-rm .crew-links a { color: var(--amber); border-color: rgba(251, 176, 59, 0.6); }
.c-rm .crew-links a:hover { background: var(--amber); color: rgb(27, 26, 24); }
.goth-name { line-height: 1; font-family: "Grenze Gotisch", "Pirata One", serif !important; font-weight: 700 !important; font-size: 38px !important; letter-spacing: 0.03em !important; }
.crew-grid .crew-id { grid-template-columns: 128px minmax(0px, 1fr); gap: 18px; }
.crew-grid .crew-id .crew-ava { width: 128px; }
.crew-grid .crew { gap: 18px; }
@media (max-width: 640px){.crew-grid .crew-id { grid-template-columns: 104px minmax(0px, 1fr); }}
@media (max-width: 640px){.crew-grid .crew-id .crew-ava { width: 104px; }}
.crew-foot { gap: 10px 14px; flex-wrap: wrap; }
.crew-foot .meta { white-space: nowrap; }
.crew-links { list-style: none; margin: 0px auto 0px 0px; padding: 0px; display: flex; flex-wrap: wrap; gap: 8px; }
.crew-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0px 12px; border: 1px solid currentcolor; border-radius: 999px; font-family: "Serial Port Mono", monospace; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: inherit; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.crew-links a:hover { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.crew-links a:focus-visible { outline: currentcolor solid 2px; outline-offset: 2px; }
.c-mech .crew-links a { color: var(--text-2); border-color: rgba(255, 255, 255, 0.3); }
.c-goth .crew-links a { color: var(--parch); border-color: rgba(232, 220, 200, 0.35); }
.c-goth .crew-links a:hover { background: var(--crim); border-color: var(--crim); color: rgb(11, 7, 9); }
.c-knight .crew-links a { color: rgb(240, 216, 142); border-color: rgba(240, 216, 142, 0.45); background: rgba(255, 255, 255, 0.06); }
.c-knight .crew-links a:hover { background: rgb(240, 216, 142); border-color: rgb(240, 216, 142); color: var(--royal); }
.c-nature .crew-links a { color: rgb(234, 245, 236); border-color: rgba(168, 217, 140, 0.45); }
.c-nature .crew-links a:hover { background: var(--leaf); border-color: var(--leaf); color: rgb(19, 38, 28); }
.crew-sm { display: flex; flex-direction: column; gap: 14px; }
.c-nature .crew-foot, .c-arcane .crew-foot { border-top-color: rgba(234, 245, 236, 0.2); }
.c-nature .crew-foot img, .c-arcane .crew-foot img { opacity: 0.55; }
.c-nature .crew-foot .meta { color: var(--leaf); }
.c-arcane .crew-foot .meta { color: var(--pg); }
@media (max-width: 1400px){.crew-grid .crew-foot img { width: 84px; }}
@media (max-width: 420px){.crew-foot img { display: none; }}
.crew-ava picture { display: block; width: 100%; height: 100%; }
.crew .crew-ava { filter: none; }
.crew-top { container-type: inline-size; }
.crew-top .meta { white-space: nowrap; }
@container (max-width: 420px){.crew-top .meta { letter-spacing: 0.06em; }}
@container (max-width: 390px){.crew-top .cid { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); border: 0px; }}
@container (max-width: 300px){.crew-top .meta { letter-spacing: 0.02em; }}

@keyframes sway { 50% { transform: rotate(-12deg); } }
@keyframes rmlive { 50% { opacity: 0.25; } }

/* =========================================================================
   v75
   ========================================================================= */

/* ---------- no blinking dots anywhere ---------- */
.hero-tag .lt,.live,.rm-live{display:none!important}

/* ---------- HERO: RM mark inside every portal world ---------- */





/* ---------- HERO on phones + tablets: framed dot-matrix badge, no portal ---------- */
.sub-short{display:none}

@media (max-width:760px){
  
  
  .sub-long{display:none}
  .sub-short{display:block}
}

/* ---------- CAUTION bar (footer): hazard ends + warning signs, thin ---------- */









/* ---------- HOME · Proof, not promises (main-site layout) ---------- */
.proof .sec-head .aside{display:flex;flex-direction:column;align-items:flex-start;gap:14px}








































/* ---------- SERVICES · pricing passes react to the pointer ---------- */












/* ---------- SERVICES · flight plan (main-site layout) ---------- */
.sec-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 40px;align-items:end;margin-bottom:56px}
.sec-top .num{font-family:"Rota Pro Grotesk",sans-serif;font-weight:900;font-size:clamp(96px,11vw,170px);line-height:.8;color:var(--amber);letter-spacing:-.04em;margin:0}
.sec-top h2{font-size:clamp(34px,4.2vw,58px);margin-top:14px;max-width:16em}
.phases{display:grid;grid-template-columns:3fr 2fr;gap:22px;margin-bottom:24px}
.phase{padding-top:14px;border-top:3px solid var(--amber);color:var(--amber);margin:0}
.phase.p2{border-top-color:var(--teal-l);color:var(--teal-l)}
.track{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;list-style:none;margin:0;padding:0}
.track::before{content:"";position:absolute;left:0;right:0;top:132px;height:2px;background:#2a261f}
.track::after{content:"";position:absolute;left:0;right:0;top:132px;height:2px;background:var(--amber);transform-origin:left;transform:scaleX(var(--tp,1));transition:transform 1.4s var(--ease)}
.stp{position:relative;z-index:1}
.blk{height:104px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;margin:0;transition:background .4s,color .4s,box-shadow .4s}
.blk b{font-family:"Rota Pro Grotesk",sans-serif;font-weight:900;font-size:clamp(34px,3vw,48px);line-height:1}
.blk span{font-weight:700;font-size:11px;letter-spacing:.1em}
.blk.f{background:var(--amber);color:var(--ink)}
.blk.h{background:repeating-linear-gradient(135deg,var(--amber) 0 3px,transparent 3px 10px);box-shadow:inset 0 0 0 2px var(--amber);color:var(--ink)}
.blk.h b,.blk.h span{background:var(--amber);padding:3px 10px}
.blk.o{box-shadow:inset 0 0 0 2px var(--teal-l);color:var(--teal-l)}
.drop{display:block;width:2px;height:46px;margin-left:30px;background:repeating-linear-gradient(180deg,var(--amber) 0 4px,transparent 4px 10px)}
.stp h3{margin:12px 0 8px;font-family:"Serial Port Mono",monospace;font-size:var(--fs-sm);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.stp > p:last-child{color:var(--dim);font-size:var(--fs-md);line-height:1.55}
html.motion:not(.paused) .track.armed{--tp:0}
html.motion:not(.paused) .track.armed .stp:not(.lit) .blk{background:transparent;color:#8a8377;box-shadow:inset 0 0 0 2px #4a443a}
html.motion:not(.paused) .track.armed .stp:not(.lit) .blk.h b,html.motion:not(.paused) .track.armed .stp:not(.lit) .blk.h span{background:transparent}
html.motion:not(.paused) .track.armed .stp:not(.lit) h3{color:#9a9387}
.preflight{margin-top:56px;padding:28px 34px 26px;background:rgba(21,20,18,.9);--c:18px;--bc:rgba(251,176,59,.5)}
.pf-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:22px}
.pf-top .kicker{margin:0}
.pf-top h3{font-weight:800;font-size:var(--fs-h5);text-transform:uppercase}
.pf-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;counter-reset:pf}
.pf-list li{counter-increment:pf;display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:1px solid var(--line)}
.pf-list li::before{content:counter(pf,decimal-leading-zero);font-family:"Serial Port Mono",monospace;font-weight:600;font-size:var(--fs-xs);letter-spacing:.1em;color:var(--amber)}
.pf-list b{font-weight:800;font-size:var(--fs-body)}
.pf-list span{font-size:var(--fs-md);line-height:1.5;color:var(--dim)}
.pf-note{margin-top:22px;font-size:var(--fs-md);color:var(--dim);display:flex;gap:10px}
.pf-note::before{content:"";flex:0 0 7px;height:8px;margin-top:7px;background:var(--teal-l);clip-path:polygon(0 0,100% 50%,0 100%)}
@media (max-width:1024px){
  .phases{display:none}
  .track{grid-template-columns:1fr;gap:0}
  .track::before,.track::after{display:none}
  .stp{display:grid;grid-template-columns:92px minmax(0,1fr);gap:4px 18px;padding:0 0 22px}
  .stp .blk{grid-row:span 2;height:72px;padding:0 12px;flex-direction:column;justify-content:center;gap:4px}
  .stp .blk b{font-size:30px}
  .stp .drop{display:none}
  .stp h3{margin:6px 0 0}
  .pf-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .sec-top{grid-template-columns:1fr;gap:0}
  .sec-top .num{font-size:96px}
  .preflight{padding:22px 20px}
  .pf-list{grid-template-columns:1fr}
}

/* ---------- CONTACT · full FAQ in two columns on wide screens ---------- */
.faq-sec .faq-wrap{grid-template-columns:minmax(0,1fr)}


/* ---------- CREW · square link chips (no rounded corners) ---------- */
.crew-links a{border-radius:0!important}

/* ---------- WORK · passenger log sits between the logo archive and the final call ---------- */
#reviews .logbook{margin-top:8px}

/* ===== v76 · ported from the main site: project cards, work page, gallery viewer (base/v2/pages/spaceport/work.css) ===== */



.pj-img{position:relative;margin:0;overflow:hidden;background:var(--panel);border-radius:0;aspect-ratio:4/3}
.pj-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pj-sample{position:absolute;left:12px;top:12px;padding:5px 10px;border-radius:0;background:rgba(14,14,14,.82);color:var(--teal-l);font-size:var(--fs-xs)}
.pj-flight{display:flex;justify-content:space-between;gap:12px;color:var(--dim);font-size:var(--fs-xs);padding-bottom:12px;border-bottom:1.5px dashed var(--line)}
.pj-status{color:var(--teal-l)}
.pj-client{margin:0;color:var(--amber);font-size:var(--fs-xs)}
.pj-body h3{margin:0;font-weight:800;text-transform:uppercase;line-height:1.02;color:var(--text)}
.pj-line{margin:0;color:var(--dim);font-size:var(--fs-base);line-height:1.55}
.pj-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pj-tags li{font-family:"Serial Port Mono",monospace;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:0;border:1px solid var(--line);color:var(--text-2)}
.pj-feat{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:10px;padding:10px;border:1.5px solid rgba(251,176,59,.55);border-radius:0;background:var(--panel)}
.pj-feat .pj-img{aspect-ratio:3/2;border-radius:0}
.pj-feat .pj-body{padding:22px 22px 22px 18px;display:flex;flex-direction:column;gap:16px}
.pj-feat h3{font-size:clamp(30px,3vw,46px)}
.pj-feat .btn{align-self:flex-start;margin-top:auto}
.pj-spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:14px 0;border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
.pj-spec dt{font-size:var(--fs-xs);color:var(--dim)}
.pj-spec dd{margin:4px 0 0;font-weight:800;font-size:var(--fs-lead);text-transform:uppercase;color:var(--text)}
.pj-grid{margin-top:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.pj-card{display:flex;flex-direction:column;gap:0;padding:8px;border:1.5px solid var(--line);border-radius:0;background:var(--panel);transition:border-color .3s,transform .45s cubic-bezier(.2,.7,.2,1)}
.pj-card .pj-body{padding:16px 10px 12px;display:flex;flex-direction:column;gap:10px;flex:1}
.pj-card h3{font-size:var(--fs-h5)}
.pj-card .pj-tags{margin-top:auto;padding-top:4px}
.pj-card:hover{border-color:var(--amber);transform:translateY(-4px)}
.pj-card:hover .pj-img img,
.pj-feat:hover .pj-img img{transform:scale(1.04)}
@media (max-width:1100px){
.pj-feat{grid-template-columns:minmax(0,1fr);border-radius:0}
.pj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
.pj-grid{grid-template-columns:minmax(0,1fr)}
.pj-spec{grid-template-columns:repeat(3,minmax(0,1fr))}
.pj-spec dd{font-size:var(--fs-md)}
.pj-feat .btn{width:100%}
}
.pj-feat{--c:24px;--b:1.5px;--bc:rgba(251,176,59,.6);--ci:calc(var(--c) + var(--b) * .414);
  border:0 !important;border-radius:0 !important;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.pj-feat::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:var(--bc);
  clip-path:polygon(evenodd,
    var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c),var(--c) 0,
    var(--ci) var(--b),calc(100% - var(--ci)) var(--b),calc(100% - var(--b)) var(--ci),calc(100% - var(--b)) calc(100% - var(--ci)),calc(100% - var(--ci)) calc(100% - var(--b)),var(--ci) calc(100% - var(--b)),var(--b) calc(100% - var(--ci)),var(--b) var(--ci),var(--ci) var(--b))}
.pj-feat{position:relative}
.pj-feat .pj-img,
.pj-card,
.pj-card .pj-img{border-radius:0}
@media (max-width:760px){
.pj-feat{--c:16px}
}
.pj-status{color:var(--teal-l)}
.rot-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease,transform .8s cubic-bezier(.2,.7,.2,1);pointer-events:none;-webkit-user-drag:none;user-select:none}
.rot-layer.on{opacity:1}
.rot-layer.instant{transition:none}
.rot-tag{position:absolute;left:12px;bottom:12px;z-index:5;padding:4px 9px;border-radius:0;background:rgba(10,10,10,.82);color:var(--text);font-size:var(--fs-xs);letter-spacing:.12em;pointer-events:none}
.pj-feat:hover .rot-layer{transform:scale(1.04)}
.cs-cover .gal-item::after{z-index:4}
@media (prefers-reduced-motion:reduce){
.rot-layer{transition:none}
.pj-feat:hover .rot-layer{transform:none}
}
html.paused .rot-layer{transition:none}
html.paused .pj-feat:hover .rot-layer{transform:none}
.pj-feat .pj-img{border-radius:0 !important;--ic:14px;
  clip-path:polygon(var(--ic) 0,calc(100% - var(--ic)) 0,100% var(--ic),100% calc(100% - var(--ic)),calc(100% - var(--ic)) 100%,var(--ic) 100%,0 calc(100% - var(--ic)),0 var(--ic))}
@media (max-width:760px){
.pj-feat .pj-img{--ic:8px}
}
.pj-line{max-width:36em}
spaceport. Reuses the homepage
   .pj-* project cards from spaceport.css.
   ========================================================== */
.work-page{display:block}
.work-main{padding:56px 0 96px}
.work-main:focus{outline:none}
.wk-intro{max-width:860px}
.wk-intro .kicker{margin:0;color:var(--amber);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.work-main h1{margin:18px 0 0;font-family:"Turtle Mode",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(48px,7vw,104px);line-height:.92;color:#F3F0EA}
.work-main h1 .l2{display:block;color:var(--amber);font-family:"Turtle Mode Half","Turtle Mode",sans-serif}
.work-main .lead{margin:24px 0 0;max-width:56ch;font-size:var(--fs-lead);line-height:1.55;color:var(--text-2)}





.wk-sec{margin-top:88px}
.wk-h{margin:0 0 28px;font-family:"Turtle Mode",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(30px,3.4vw,46px);line-height:1;color:var(--text)}
.wk-sub{margin:-14px 0 28px;max-width:60ch;color:var(--dim);font-size:var(--fs-body);line-height:1.55}
.wk-grid{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.wk-card{scroll-margin-top:24px}
.wk-card .pj-body{padding:18px 14px 14px;gap:12px}
.wk-card h3{font-size:clamp(24px,2.2vw,30px)}
.wk-card .pj-tags{margin-top:0}
.wk-card:target{border-color:var(--amber)}
.wk-notes{margin-top:4px;border-top:1.5px dashed var(--line)}
.wk-notes summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;cursor:pointer;color:var(--amber)}
.wk-notes summary::-webkit-details-marker{display:none}
.wk-notes summary::after{content:"+";font-family:"Serial Port Mono",monospace;font-size:var(--fs-h6);line-height:1;transition:transform .25s}
.wk-notes[open] summary::after{transform:rotate(45deg)}
.wk-notes summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.wk-notes-in{padding:4px 0 6px;display:flex;flex-direction:column;gap:12px}
.wk-notes-in p{margin:0;color:var(--text-2);font-size:var(--fs-base);line-height:1.6}
.wk-notes-in b{color:var(--text);font-weight:700}
.wk-facts{margin:4px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.wk-facts dt{font-size:var(--fs-xs);color:var(--dim)}
.wk-facts dd{margin:4px 0 0;font-weight:800;font-size:var(--fs-base);text-transform:uppercase;color:var(--text)}
.pj-concept{color:var(--amber);border:1px solid currentColor;padding:2px 8px;border-radius:0}
.wk-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.wk-logos figure{margin:0;display:flex;flex-direction:column;gap:12px}
.wk-logos picture{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--panel);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.wk-logos img{display:block;width:100%;height:100%;object-fit:cover}
.wk-logos figcaption{display:flex;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1.5px dashed var(--line)}
.wk-logos figcaption .meta{font-size:var(--fs-xs);color:var(--teal-l)}
.wk-logos figcaption b{font-weight:800;font-size:var(--fs-base);text-transform:uppercase;color:var(--text);line-height:1.15}
.wk-cta{margin-top:96px;padding:40px;border:1.5px solid rgba(251,176,59,.55);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 32px;align-items:center;
  background:repeating-linear-gradient(-45deg,rgba(251,176,59,.05) 0 10px,transparent 10px 20px),var(--panel)}
.wk-cta h2{margin:0;font-size:clamp(28px,3vw,42px);line-height:1;color:var(--text)}
.wk-cta p{margin:0;grid-column:1;color:var(--dim);font-size:var(--fs-body)}
.wk-cta .btn{grid-column:2;grid-row:1 / span 2}
@media (max-width:1100px){
.wk-logos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
.work-main{padding:32px 0 72px}
.wk-grid{grid-template-columns:minmax(0,1fr)}


.wk-sec{margin-top:64px}
.wk-cta{grid-template-columns:minmax(0,1fr);padding:28px 22px}
.wk-cta .btn{grid-column:1;grid-row:auto;justify-self:start}
}
@media (max-width:640px){
.wk-logos{grid-template-columns:minmax(0,1fr)}
.wk-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
.pj-card:hover,
.pj-card:hover .pj-img img,
.pj-feat:hover .pj-img img{transform:none}
.wk-notes summary::after{transition:none}
}
html.paused .pj-card:hover,
html.paused .pj-card:hover .pj-img img,
html.paused .pj-feat:hover .pj-img img{transform:none}
.wk-logos figcaption .meta{white-space:nowrap}
.wk-filter{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 26px}
.wk-filter[hidden]{display:none}
.wk-filter button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1.5px solid var(--line);border-radius:0;background:transparent;color:var(--text-2);
  font-family:"Serial Port Mono",monospace;font-size:var(--fs-xs);font-weight:500;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.wk-filter button:hover{border-color:var(--amber);color:var(--amber)}
.wk-filter button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.wk-filter button[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.wk-n{font-size:var(--fs-xs);color:var(--teal-l);font-variant-numeric:tabular-nums}
.wk-filter button[aria-pressed="true"] .wk-n{color:var(--ink);opacity:.7}
.wk-item[hidden]{display:none}
.wk-in{animation:wk-in .45s cubic-bezier(.2,.7,.2,1)}
@keyframes wk-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pj-feat[hidden] + .wk-grid{margin-top:0}
.wk-logos figure{position:relative}
.wk-logos figure::before{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:16/9;z-index:2;pointer-events:none;opacity:0;transition:opacity .25s;
  --c:12px;--b:1.5px;--ci:calc(var(--c) + var(--b) * .414);background:var(--amber);
  clip-path:polygon(evenodd,var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c),var(--c) 0,
    var(--ci) var(--b),calc(100% - var(--b)) var(--b),calc(100% - var(--b)) calc(100% - var(--ci)),calc(100% - var(--ci)) calc(100% - var(--b)),var(--b) calc(100% - var(--b)),var(--b) var(--ci),var(--ci) var(--b))}
.wk-logos img{transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .3s}
.wk-logos figcaption{transition:border-color .25s}
.wk-logos figcaption b,
.wk-logos figcaption .meta{transition:color .25s}
.wk-logos li:hover figure::before{opacity:1}
.wk-logos li:hover img{transform:scale(1.05)}
.wk-logos li:hover figcaption{border-bottom-color:var(--amber)}
.wk-logos li:hover figcaption b,
.wk-logos li:hover figcaption .meta{color:var(--amber)}
@media (prefers-reduced-motion:reduce){
.wk-in{animation:none}
.wk-logos li:hover img{transform:none}
}
html.paused .wk-in{animation:none}
html.paused .wk-logos li:hover img{transform:none}
.pj-live{color:#b2ed00}
.cs-gallery .gal-item{position:relative;display:block;overflow:hidden;border-radius:0;background:#000;text-decoration:none;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.cs-gallery .gal-item:hover img{transform:scale(1.05)}
.cs-gallery .gal-item:hover span,
.cs-gallery .gal-item:focus-visible span{background:var(--amber);color:var(--ink)}
.cs-gallery .gal-item:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
.cs-gallery .gal-item:hover img{transform:none}
}
html.paused .cs-gallery .gal-item:hover img{transform:none}
.pj-feat + .pj-feat{margin-top:22px}
.gal-item{position:relative;display:block;width:100%;padding:0;margin:0;border:0;background:#000;color:inherit;font:inherit;text-align:left;cursor:zoom-in;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.gal-item::after{content:"";position:absolute;inset:0;z-index:1}
.gal-item span{z-index:2}
.gal-item:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.gal-fig{border-radius:0;overflow:hidden}
.gal-fig img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.gal-fig:hover img{transform:scale(1.02)}
.cs-cover .gal-item{height:100%}
.wk-logos .gal-item{background:transparent;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.wk-logos .gal-item picture{clip-path:none}
.wk-logos img,
.pj-img img,
.gal-item img{-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}
.gv{width:min(1240px,94vw);max-height:94vh;padding:0;border:1.5px solid var(--line);background:#0b0b0b;color:var(--text);overflow:hidden}
.gv::backdrop{background:rgba(5,5,5,.9)}
.gv-stage{position:relative;height:min(74vh,calc(94vw * .62));background:#000 center/contain no-repeat;-webkit-touch-callout:none;user-select:none}
.gv-stage.is-loading{filter:blur(2px)}
.gv-msg{position:absolute;left:16px;top:14px;color:var(--dim);font-size:var(--fs-xs);filter:none}
.gv-cap{margin:0;padding:12px 16px 0;color:var(--amber);font-size:var(--fs-xs);min-height:1em}
.gv-bar{display:flex;align-items:center;gap:10px;padding:12px 16px 14px}
.gv-bar button{min-height:44px;min-width:44px;padding:0 14px;border:1.5px solid var(--line);border-radius:0;background:transparent;color:var(--text);font-family:"Serial Port Mono",monospace;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.gv-bar button:hover{border-color:var(--amber);color:var(--amber)}
.gv-bar button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.gv-bar button[hidden]{display:none}
.gv-close{margin-left:auto}
.gv-count{color:var(--dim);font-size:var(--fs-xs);min-width:56px;text-align:center}
@media (max-width:640px){
.gv{width:100vw;max-width:100vw;max-height:100vh;border:0}
.gv-stage{height:60vh}
}
@media (prefers-reduced-motion:reduce){
.gal-fig img{transition:none}
.gal-fig:hover img{transform:none}
.gv-stage.is-loading{filter:none}
}
html.paused .gal-fig:hover img{transform:none}
html.has-cursor .gv,
html.has-cursor .gv *{cursor:none}
.pj-img > .gal-cover{position:absolute;inset:0;height:100%;background:transparent}
.wk-strip-h{margin:6px 0 0;color:var(--dim);font-size:var(--fs-xs)}
.wk-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.wk-strip .gal-item{border-radius:0;overflow:hidden;background:#0b0b0b;box-shadow:inset 0 0 0 1px var(--line)}
.wk-strip img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.wk-strip .gal-item:hover img{transform:scale(1.08)}
@media (max-width:640px){
.wk-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
.wk-strip img{transition:none}
.wk-strip .gal-item:hover img{transform:none}
}
html.paused .wk-strip .gal-item:hover img{transform:none}
@media (min-width:761px){
.wk-grid > .wk-card:not([hidden]):last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch}
.wk-grid > .wk-card:not([hidden]):last-child:nth-child(odd) .pj-img{aspect-ratio:auto;min-height:100%}
.wk-grid > .wk-card:not([hidden]):last-child:nth-child(odd) .pj-body{padding:22px 22px 18px}
}
.wk-card .wk-strip{grid-template-columns:repeat(5,minmax(0,1fr))}
.wk-card{--c:14px;--b:1.5px;--bc:rgba(251,176,59,.32);--ci:calc(var(--c) + var(--b) * .414);
  position:relative;border:0 !important;border-radius:0 !important;padding:8px;background:var(--panel);
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.wk-card::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:var(--bc);transition:background .25s;
  clip-path:polygon(evenodd,
    var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c),var(--c) 0,
    var(--ci) var(--b),calc(100% - var(--ci)) var(--b),calc(100% - var(--b)) var(--ci),calc(100% - var(--b)) calc(100% - var(--ci)),calc(100% - var(--ci)) calc(100% - var(--b)),var(--ci) calc(100% - var(--b)),var(--b) calc(100% - var(--ci)),var(--b) var(--ci),var(--ci) var(--b))}
.wk-card:hover,
.wk-card:target,
.wk-card:focus-within{--bc:var(--amber)}
.wk-card:hover{transform:none}
.wk-card .pj-img{border-radius:0 !important;--ic:7px;
  clip-path:polygon(var(--ic) 0,calc(100% - var(--ic)) 0,100% var(--ic),100% calc(100% - var(--ic)),calc(100% - var(--ic)) 100%,var(--ic) 100%,0 calc(100% - var(--ic)),0 var(--ic))}
.wk-strip .gal-item{border-radius:0;box-shadow:none;--ic:5px;
  clip-path:polygon(var(--ic) 0,calc(100% - var(--ic)) 0,100% var(--ic),100% calc(100% - var(--ic)),calc(100% - var(--ic)) 100%,var(--ic) 100%,0 calc(100% - var(--ic)),0 var(--ic))}
@media (min-width:761px){
.wk-grid > .wk-card:not([hidden]):last-child:nth-child(odd){--c:24px}
.wk-grid > .wk-card:not([hidden]):last-child:nth-child(odd) .pj-img{--ic:14px}
}

/* home "Proof, not promises" extras (main site v12.css), scoped to the home section */
html.paused .proof .pj-card:hover,
html.paused .proof .pj-card:hover .pj-img img,
html.paused .proof .pj-feat:hover .pj-img img{transform:none !important}
@media (prefers-reduced-motion:reduce){
.proof .pj-card:hover,
.proof .pj-card:hover .pj-img img,
.proof .pj-feat:hover .pj-img img{transform:none !important}
}
.proof .pj-card{position:relative}
.proof .pj-link{color:inherit;text-decoration:none}
.proof .pj-link::after{content:"";position:absolute;inset:0;z-index:2}
.proof .pj-link:focus-visible{outline:none}
.proof .pj-card:has(.pj-link:focus-visible){border-color:var(--amber);outline:2px solid var(--amber);outline-offset:3px}
.proof .pj-concept{color:var(--amber);border:1px solid currentColor;padding:2px 8px;border-radius:0}
.proof .pj-grid{gap:20px}
.proof .pj-grid .pj-card{--c:14px;--b:1.5px;--bc:rgba(251,176,59,.32);--ci:calc(var(--c) + var(--b) * .414);
  border:0;border-radius:0;padding:8px;background:var(--panel);
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.proof .pj-grid .pj-card::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:var(--bc);transition:background .25s;
  clip-path:polygon(evenodd,
    var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c),var(--c) 0,
    var(--ci) var(--b),calc(100% - var(--ci)) var(--b),calc(100% - var(--b)) var(--ci),calc(100% - var(--b)) calc(100% - var(--ci)),calc(100% - var(--ci)) calc(100% - var(--b)),var(--ci) calc(100% - var(--b)),var(--b) calc(100% - var(--ci)),var(--b) var(--ci),var(--ci) var(--b))}
.proof .pj-grid .pj-card:hover{--bc:var(--amber)}
.proof .pj-grid .pj-card:has(.pj-link:focus-visible){--bc:var(--amber);--b:2.5px;outline:none}
.proof .pj-stage{border-radius:0 !important;background:
  radial-gradient(ellipse 70% 60% at 50% 45%,rgba(255,255,255,.05),transparent 70%),
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/22px 22px,
  #121110}
.proof .pj-stage img{object-fit:contain}
.proof .pj-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:1;background:var(--client,var(--amber))}
.proof .pj-grid .pj-line{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.proof .pj-grid .pj-client{min-height:2.6em}
.proof .pj-grid .pj-card .pj-tags{margin-top:auto}
@media (max-width:760px){
.proof .pj-grid .pj-client{min-height:0}
}
.proof .pj-grid .pj-stage{border-radius:0 !important;--ic:7px;
  clip-path:polygon(var(--ic) 0,calc(100% - var(--ic)) 0,100% var(--ic),100% calc(100% - var(--ic)),calc(100% - var(--ic)) 100%,var(--ic) 100%,0 calc(100% - var(--ic)),0 var(--ic))}
.proof .sec-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:40px;align-items:end;margin-bottom:60px}
.proof .sec-top .num{font-size:170px;color:var(--amber)}
.proof .sec-top h2{margin:12px 0 0;font-size:54px;line-height:1;max-width:820px}
.proof .sec-top p{margin:0;max-width:380px;color:var(--dim);font-size:var(--fs-body);line-height:1.55}
.proof .paper .sec-top .num{color:var(--pink)}
.proof .paper .sec-top p{color:var(--pmute)}
@media (max-width:1100px){
.proof .sec-top{grid-template-columns:minmax(0,1fr)}
.proof .sec-top .num{font-size:120px}
}
@media (max-width:640px){
.proof .sec-top h2{font-size:34px}
}
html.st-ready .proof .hs .sec-top.hs-hide{display:none}
@media (max-width:1100px){
.proof .hs .sec-top.hs-hide{display:grid !important}
}
.proof .sec-top h2{font-family:"Turtle Mode",sans-serif}
.proof .sec-top .num{margin-bottom:8px}
@media (min-width:1101px){
.proof .hs .sec-top.hs-hide{display:none}
}

.proof .directory .sec-top{margin-bottom:44px}
.proof .sec-top .kicker{margin:0;max-width:none;font-size:var(--fs-xs);line-height:normal}
.proof .sec-top .kicker.amber{color:var(--amber)}
.proof .sec-top .kicker.teal-l{color:var(--teal-l)}
.proof .sec-aside{display:flex;flex-direction:column;align-items:flex-start;gap:18px}

/* collaborator network (main site crew-testbay.css + v12.css) */
.network{--c:22px;--b:1.5px;--bc:rgba(92,200,198,.5);--ci:calc(var(--c) + var(--b) * .414);position:relative;margin-top:26px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:center;padding:34px 38px;background:rgba(34,160,166,.06);
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.network::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--bc);
  clip-path:polygon(evenodd,var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c),var(--c) 0,
  var(--ci) var(--b),calc(100% - var(--ci)) var(--b),calc(100% - var(--b)) var(--ci),calc(100% - var(--b)) calc(100% - var(--ci)),calc(100% - var(--ci)) calc(100% - var(--b)),var(--ci) calc(100% - var(--b)),var(--b) calc(100% - var(--ci)),var(--b) var(--ci),var(--ci) var(--b))}
.net-copy{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.net-copy h3{margin:0;font-size:clamp(28px,2.8vw,42px);line-height:1;color:var(--text)}
.net-copy p{margin:0;color:var(--dim);font-size:var(--fs-body);line-height:1.55;max-width:520px}
.net-map{width:100%;height:auto;display:block}
.net-ping{transform-origin:210px 130px;opacity:0}
html.motion:not(.paused) .net-ping{animation:ping 2.8s ease-out infinite}
@keyframes ping{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
@media (max-width:1100px){
.network{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
.network{padding:26px 22px}
}
.net-globe{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.net-globe canvas{display:block;cursor:grab;touch-action:pan-y;user-select:none}
.net-globe.grab canvas{cursor:grabbing}
.net-cap{font-size:var(--fs-xs);color:var(--mute)}
.net-copy hgroup{display:flex;flex-direction:column;gap:14px}
.net-copy .kicker{font-size:var(--fs-xs);color:var(--teal-l);max-width:none;line-height:normal}

/* =========================================================================
   v76
   ========================================================================= */
[hidden]{display:none!important}
:root{--wall:#242220;--r-big:64px;--alert:#FF9A7A;--icon:#1b1a18}

/* ---------- header: motion switch lives here now; phone nav = four equal tabs ---------- */
.nh-motion{min-height:40px;padding:0 14px;border:1.5px solid var(--line);color:var(--dim);flex-shrink:0;transition:color .2s,border-color .2s}
.nh-motion:hover{color:var(--text);border-color:var(--amber)}
.nh-motion .mt-dot{background:var(--teal-l)}
.nh-motion[aria-checked="false"] .mt-dot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--dim)}
.nh-motion b{color:var(--text);font-weight:700}
.nh-motion:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
html:not(.motion) .nh-motion{display:none}
@media (max-width:1024px){
  .nh-motion{min-height:44px;min-width:44px;padding:0;justify-content:center}
  .nh-motion .mt-lbl{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nh-motion .mt-dot{width:10px;height:10px}
  .nh-motion{margin-left:auto}
  .nh-motion + .nh-cta{margin-left:0}
}
@media (max-width:560px){
  .nh nav{margin:0!important;border-top:1px solid var(--line)}
  .nh ul{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .nh nav a{justify-content:center;padding:13px 2px!important;letter-spacing:.06em!important}
  .nh nav a::after{left:22%!important;right:22%!important}
}

/* ---------- hero: the info plate is now a small credit next to the buttons ---------- */




/* ---------- clients: a slow marquee (static, wrapped list when motion is off) ---------- */
.clients .wrap{flex-wrap:nowrap!important;flex-direction:row!important;align-items:center!important}
.clients h2{flex:0 0 auto;max-width:13em}
.cl-marquee{flex:1;min-width:0;display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.clients .cl-track{display:flex!important;align-items:center;flex:0 0 auto;gap:64px!important;padding-right:64px;flex-wrap:nowrap!important;justify-content:flex-start!important;max-width:none!important}
.clients .cl-track li{white-space:nowrap}
html.motion:not(.paused) .clients .cl-track{animation:clm 45s linear infinite}
.cl-marquee:hover .cl-track{animation-play-state:paused}
@keyframes clm{to{transform:translateX(-100%)}}
html:not(.motion) .cl-dup,html.paused .cl-dup{display:none!important}
html:not(.motion) .cl-marquee,html.paused .cl-marquee{-webkit-mask-image:none;mask-image:none}
html:not(.motion) .clients .cl-track,html.paused .clients .cl-track{flex-wrap:wrap!important;gap:22px 44px!important;padding-right:0;flex:1}
@media (max-width:760px){
  .clients .wrap{flex-direction:column!important;align-items:flex-start!important;gap:18px}
  .clients h2{max-width:none}
  .cl-marquee{width:100%;flex:none}
  .clients .cl-track{gap:40px!important;padding-right:40px}
}

/* ---------- flight plan: blocks use the site's chamfer (outline follows the cut) ---------- */
.blk{position:relative;--c:12px;--b:2px;--ci:calc(var(--c) + var(--b) * .414);--bcol:transparent;box-shadow:none!important;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.blk::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--bcol);transition:background .4s;
  clip-path:polygon(evenodd,var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c),var(--c) 0,
    var(--ci) var(--b),calc(100% - var(--b)) var(--b),calc(100% - var(--b)) calc(100% - var(--ci)),calc(100% - var(--ci)) calc(100% - var(--b)),var(--b) calc(100% - var(--b)),var(--b) var(--ci),var(--ci) var(--b))}
.blk.h{--bcol:var(--amber)}
.blk.o{--bcol:var(--teal-l)}
.blk b,.blk span{position:relative}
html.motion:not(.paused) .track.armed .stp:not(.lit) .blk{--bcol:#4a443a}

/* ---------- work page: filter buttons get the site's chamfered outline ---------- */
.wk-filter button{position:relative;border:0!important;border-radius:0!important;--c:10px;--b:1.5px;--ci:calc(var(--c) + var(--b) * .414);--bcol:var(--line);
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.wk-filter button::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--bcol);transition:background .2s;
  clip-path:polygon(evenodd,var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c),var(--c) 0,
    var(--ci) var(--b),calc(100% - var(--b)) var(--b),calc(100% - var(--b)) calc(100% - var(--ci)),calc(100% - var(--ci)) calc(100% - var(--b)),var(--b) calc(100% - var(--b)),var(--b) var(--ci),var(--ci) var(--b))}
.wk-filter button:hover{--bcol:var(--amber)}
.wk-filter button[aria-pressed="true"]{--bcol:var(--amber)}
.wk-filter button:focus-visible{outline:2px solid var(--amber);outline-offset:3px;clip-path:none}
.work-main #reviews{padding-bottom:40px}
.work-main .final{margin-top:20px}

/* ---------- footer: drop the Instagram handle when its column gets tight ---------- */
.site-foot .fcol{container-type:inline-size}
@container (max-width:235px){.site-foot .fcol .fsub{display:none!important}}

/* ---------- crew ID cards: header tag + flavour text always on one line ---------- */
.crew{container-type:inline-size}
.crew-top{align-items:center}
.crew-top .meta{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;min-width:0}
.crew-top .clr{flex-direction:row!important;text-align:right}
.crew-top svg{width:12px;height:14px;flex:none;margin:0!important}
@container (max-width:360px){.crew-top .cid{display:none}}
@container (max-width:330px){.crew-top .meta{letter-spacing:.06em}}

/* ---------- collaborator network: the main-site panel, a little narrower ---------- */
.network{max-width:1240px;margin-left:auto;margin-right:auto}

/* ===== v77 · boarding passes (main site base/v2/spaceport/v12.css), scoped to the pricing section ===== */
.plans-sec .tickets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.plans-sec .ticket{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--paper);color:#0E0E0E}
.plans-sec .t-top{padding:24px 24px 20px;display:flex;flex-direction:column;gap:6px}
.plans-sec .t-top .meta{display:flex;justify-content:space-between;color:#55514a}
.plans-sec .t-name{font-weight:900;font-size:62px;line-height:.86;text-transform:uppercase;margin-top:10px}
.plans-sec .t-for{margin:8px 0 0;font-size:var(--fs-md);line-height:1.45;color:#3a3732;min-height:44px}
.plans-sec .perf{position:relative;height:28px}
.plans-sec .perf::before{content:"";position:absolute;left:18px;right:18px;top:13px;border-top:2px dashed rgba(0,0,0,.35)}
.plans-sec .perf i{position:absolute;top:0;width:28px;height:28px;border-radius:50%;background:var(--ink)}
.plans-sec .perf i.l{left:-14px}
.plans-sec .perf i.r{right:-14px}
.plans-sec .t-body{flex:1;margin:0 12px 12px;border-radius:10px;background:#0E0E0E;color:var(--text);padding:22px 20px 20px;display:flex;flex-direction:column;gap:18px}
.plans-sec .ticket.feat .t-top{background:var(--amber)}
.plans-sec .ticket.feat .t-top .meta{color:#3b2a08}
.plans-sec .ticket.feat{background:var(--amber)}
.plans-sec .ticket.feat .t-for{color:#2a1f08}




.plans-sec .ticket ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.plans-sec .ticket li{display:flex;gap:10px;font-size:var(--fs-md);line-height:1.45;color:#dcd7cf}
.plans-sec .ticket li::before{content:"▸";color:var(--amber);flex-shrink:0}
.plans-sec .ticket .btn{width:100%}
.plans-sec .t-bc{display:flex;justify-content:space-between;align-items:center;gap:10px}
.plans-sec .t-bc img{height:26px;width:120px;opacity:.9}
@media (max-width:1100px){
.plans-sec .tickets{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
.plans-sec .t-name{font-size:48px}
}
.plans-sec .t-name{margin:10px 0 0}
.plans-sec .tickets{perspective:1200px}
.plans-sec .ticket{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform;position:relative}
.plans-sec .ticket .glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.22),transparent 45%);opacity:0;transition:opacity .3s;z-index:3}
.plans-sec .ticket:hover .glare{opacity:1}
.plans-sec .ticket .t-top :focus-visible{outline-color:#0E0E0E}
.plans-sec .ticket.teal{background:var(--teal)}
.plans-sec .ticket.teal .t-top .meta{color:#0b2a2b}
.plans-sec .ticket.teal .t-for{color:#0b1f20}
.plans-sec .t-top{position:relative}
.plans-sec .t-top::after{content:"";position:absolute;right:22px;top:58px;width:34px;height:34px;background:currentColor;opacity:.12;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%)}
.plans-sec .ticket li{color:var(--text-2)}
.plans-sec .ticket .btn{width:100%}
.plans-sec .pl-chip{--c:24px;--b:1.5px;--bc:rgba(251,176,59,.6);--ci:calc(var(--c) + var(--b) * .414);
  border:0 !important;border-radius:0 !important;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.plans-sec .pl-chip::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:var(--bc);
  clip-path:polygon(evenodd,
    var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c),var(--c) 0,
    var(--ci) var(--b),calc(100% - var(--ci)) var(--b),calc(100% - var(--b)) var(--ci),calc(100% - var(--b)) calc(100% - var(--ci)),calc(100% - var(--ci)) calc(100% - var(--b)),var(--ci) calc(100% - var(--b)),var(--b) calc(100% - var(--ci)),var(--b) var(--ci),var(--ci) var(--b))}
html.paused .plans-sec .ticket .glare{display:none}


.plans-sec .t-top .meta{gap:6px 14px;flex-wrap:wrap}

.plans-sec .price-ladder{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
.plans-sec .price-ladder .pl-chip{--c:10px;--bc:rgba(251,176,59,.55);position:relative;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:12px 20px 13px;background:rgba(21,20,18,.7)}
.plans-sec .price-ladder .pl-chip .meta{color:var(--dim)}
.plans-sec .price-ladder .pl-chip b{font-weight:800;font-size:var(--fs-h6);color:var(--amber);line-height:1.1}
.plans-sec .price-ladder .pl-note{display:flex;align-items:center;gap:10px;padding:12px 4px;color:var(--dim);font-size:var(--fs-md);max-width:24em}
.plans-sec .price-ladder .pl-note::before{content:"▸";color:var(--teal-l);font-family:"Serial Port Mono",monospace}
@media (max-width:640px){
.plans-sec .price-ladder .pl-chip{flex:1 1 calc(50% - 10px)}
.plans-sec .price-ladder .pl-note{flex-basis:100%;padding-top:2px}
}
.plans-sec .price{font-weight:900;font-size:56px;line-height:.9;color:var(--amber)}
.plans-sec .price small{font-family:"Serial Port Mono",monospace;font-weight:400;font-size:var(--fs-sm);color:var(--dim);letter-spacing:.06em}
.plans-sec .price{margin:0}
.plans-sec .price-ladder{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
.plans-sec .price-ladder .pl-chip{--c:10px;--bc:rgba(251,176,59,.55);position:relative;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:12px 20px 13px;background:rgba(21,20,18,.7)}
.plans-sec .price-ladder .pl-chip .meta{color:var(--dim)}
.plans-sec .price-ladder .pl-chip b{font-weight:800;font-size:var(--fs-h6);color:var(--amber);line-height:1.1}
.plans-sec .price-ladder .pl-note{display:flex;align-items:center;gap:10px;padding:12px 4px;color:var(--dim);font-size:var(--fs-md);max-width:24em}
.plans-sec .price-ladder .pl-note::before{content:"▸";color:var(--teal-l);font-family:"Serial Port Mono",monospace}
@media (max-width:640px){
.plans-sec .price-ladder .pl-chip{flex:1 1 calc(50% - 10px)}
.plans-sec .price-ladder .pl-note{flex-basis:100%;padding-top:2px}
}
.plans-sec .sec-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:40px;align-items:end;margin-bottom:60px}
.plans-sec .sec-top .num{font-size:170px;color:var(--amber)}
.plans-sec .sec-top h2{margin:12px 0 0;font-size:54px;line-height:1;max-width:820px}
.plans-sec .sec-top p{margin:0;max-width:380px;color:var(--dim);font-size:var(--fs-body);line-height:1.55}
.plans-sec .paper .sec-top .num{color:var(--pink)}
.plans-sec .paper .sec-top p{color:var(--pmute)}
@media (max-width:1100px){
.plans-sec .sec-top{grid-template-columns:minmax(0,1fr)}
.plans-sec .sec-top .num{font-size:120px}
}
@media (max-width:640px){
.plans-sec .sec-top h2{font-size:34px}
}
html.st-ready .plans-sec .hs .sec-top.hs-hide{display:none}
@media (max-width:1100px){
.plans-sec .hs .sec-top.hs-hide{display:grid !important}
}
.plans-sec .sec-top h2{font-family:"Turtle Mode",sans-serif}
.plans-sec .sec-top .num{margin-bottom:8px}
@media (min-width:1101px){
.plans-sec .hs .sec-top.hs-hide{display:none}
}

.plans-sec .directory .sec-top{margin-bottom:44px}
.plans-sec .sec-top .kicker{margin:0;max-width:none;font-size:var(--fs-xs);line-height:normal}
.plans-sec .sec-top .kicker.amber{color:var(--amber)}
.plans-sec .sec-top .kicker.teal-l{color:var(--teal-l)}

/* ===== v77 ===== */
.plans-sec .tickets{perspective:1200px}
.plans-sec .ticket{transform-style:preserve-3d;will-change:transform}
html.paused .plans-sec .ticket,html:not(.motion) .plans-sec .ticket{transform:none!important}
#reviews.wk-sec .logbook{margin-top:30px}

/* =========================================================================
   v78 · consistency pass (from the colour/style audit). One place that sets the shared rules:
   type scale for page + section headings, kicker colours, panel tones, chamfer sizes, outline strength,
   tag padding and card body text. Edit the tokens below rather than individual components.
   ========================================================================= */
:root{
  --panel-in:#121110;            /* image stages / insets inside a panel */
  --c-s:10px;--c-m:14px;--c-l:24px;          /* chamfer sizes: controls · cards · big panels */
  --ol:rgba(251,176,59,.6);--ol-soft:rgba(251,176,59,.35);   /* amber outlines: strong · soft */
  --h1:clamp(48px,6.4vw,96px);--h2:clamp(34px,4.2vw,58px);
}
/* page titles (inner pages) and section titles: one size each */
.intro h1,.work-main h1{font-size:var(--h1)!important;line-height:.92}
.sec-head h2,.sec-top h2,.wk-h,.proof .sec-top h2,.plans-sec .sec-top h2,.net-copy h3{font-size:var(--h2)!important;line-height:1!important}
.net-copy h3{font-size:clamp(28px,2.8vw,42px)!important}
.sec-top .num,.plans-sec .sec-top .num,.proof .sec-top .num{font-family:"Rota Pro Grotesk",sans-serif;font-weight:900;font-size:clamp(96px,11vw,170px)!important;line-height:.8;color:var(--amber)}
/* kickers: page intro = teal, section = amber, teal only inside teal panels */
.intro .kicker,
.wk-intro .kicker,
.ct .kicker{color:var(--teal-l)!important}
.sec-head .kicker,.sec-top .kicker,.proof .kicker,.plans-sec .kicker{color:var(--amber)!important}
.network .kicker,.net-copy .kicker{color:var(--teal-l)!important}
/* panels: one card tone, one inset tone */
.fact,.desk,.term,.card{background-color:var(--panel)}
.pj-stage,.wl-preview,.counts,.logos figure{background-color:var(--panel-in)}
/* chamfers: three sizes */
.fact,.svc,.lg figure,.blk,.cut{--c:var(--c-m)}
.preflight,.network,.term,.pj-feat,.frame:not(.frame-sm){--c:var(--c-l)}

.btn,.wk-filter button,.price-ladder .pl-chip{--c:var(--c-s)}
/* outline strength: strong for panels/chips, soft for cards */
.preflight,
.price-ladder .pl-chip,
.plans-sec .price-ladder .pl-chip{--bc:var(--ol)!important}
.wk-card,.proof .pj-grid .pj-card{--bc:var(--ol-soft)}
.wk-card:hover,.proof .pj-grid .pj-card:hover{--bc:var(--amber)}
/* tags: one size */
.tags li,.pj-tags li,.crew .tags li,.crew li.tg{padding:6px 10px!important;font-size:var(--fs-xs)!important;letter-spacing:.06em}
/* card body copy: one colour (secondary meta text stays --dim) */
.pj-line,.fact p,.stp > p:last-child,.pf-list span,.stop-d{color:var(--text-2)!important}

/* =========================================================================
   v79
   ========================================================================= */

/* ---------- HERO: crew artwork in the slit ---------- */







/* HUD docks into the bottom of the hero; the slit runs down behind it */



/* ---------- HEADER: chamfered nav rail, client login ---------- */
.nh .wrap{gap:18px}
.nh-rail{margin-left:auto;position:relative;--c:12px;--b:1px;--ci:calc(var(--c) + var(--b) * .414);background:rgba(16,16,16,.6);
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.nh-rail::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--line);
  clip-path:polygon(evenodd,var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c),var(--c) 0,
    var(--ci) var(--b),calc(100% - var(--ci)) var(--b),calc(100% - var(--b)) var(--ci),calc(100% - var(--b)) calc(100% - var(--ci)),calc(100% - var(--ci)) calc(100% - var(--b)),var(--ci) calc(100% - var(--b)),var(--b) calc(100% - var(--ci)),var(--b) var(--ci),var(--ci) var(--b))}
.nh .nh-rail ul{gap:0;padding:0 8px}
.nh .nh-rail li + li a{box-shadow:inset 1px 0 0 var(--line)}
.nh .nh-rail a{min-height:44px;align-items:center;padding:0 18px;font-size:var(--fs-xs);letter-spacing:.14em;transition:color .2s,background .2s}
.nh .nh-rail a i{color:var(--teal-l)}
.nh .nh-rail a:hover{background:rgba(251,176,59,.06)}
.nh .nh-rail a::after{left:18px;right:18px;bottom:7px}
.nh-login{flex-shrink:0;font-family:"Serial Port Mono",monospace;font-weight:600;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text);text-decoration:none;padding:12px 4px;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s}
.nh-login:hover{color:var(--amber);border-bottom-color:var(--amber)}
.nh-motion{min-height:44px}
@media (max-width:1240px){.nh .nh-rail a i{display:none}.nh .nh-rail a{padding:0 12px}.nh .nh-rail a::after{left:12px;right:12px}.nh-login{display:none}}
@media (max-width:560px){
  .nh-rail{margin:0 0 8px!important;width:100%;order:3;--c:10px}
  .nh .nh-rail ul{padding:0;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))}
  .nh .nh-rail a{justify-content:center;min-height:42px;padding:0 2px!important}
  .nh nav.nh-rail{border-top:0!important}
}

/* ---------- PAGE INTROS: subtext sits under the heading ---------- */
.intro-grid{display:block!important}
.intro-grid .lead{margin-top:6px;max-width:44em}

/* ---------- SERVICES: boarding passes the same size; chamfered corners that follow the notches ---------- */
.plans-sec .tickets{align-items:stretch}
.plans-sec .ticket,.plans-sec .ticket.feat{margin:0!important;border-radius:0!important;--c:18px;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.plans-sec .ticket .glare{border-radius:0}
.plans-sec .t-body{border-radius:0!important;--c:12px;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.plans-sec .perf i{width:30px;height:30px;top:-1px;border-radius:0;background:var(--ink);transform:rotate(45deg)}
.plans-sec .perf i.l{left:-15px}.plans-sec .perf i.r{right:-15px}
.plans-sec .t-bc{margin-top:auto}

/* ---------- SERVICES: flight-plan "04 Refine" block on phones/tablets ---------- */
@media (max-width:1024px){
  .stp .blk.h{background:repeating-linear-gradient(135deg,rgba(251,176,59,.28) 0 2px,transparent 2px 8px),#141310;color:var(--amber)}
  .stp .blk.h b,.stp .blk.h span{background:none!important;padding:0;color:var(--amber)}
}

/* ---------- CONTACT: FAQ in two fixed columns ---------- */
.faq-sec .faq-wrap.faq-cols{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;align-items:start;max-width:none!important}
@media (max-width:1100px){.faq-sec .faq-wrap.faq-cols{grid-template-columns:minmax(0,1fr)}}
.fq > .a{overflow:hidden}
html.motion:not(.paused) .fq[open] > .a{animation:none}
.fq .pm{transition:transform .3s var(--ease)}

/* ---------- CREW: collaborator network as wide as the cards ---------- */
.network{max-width:none!important}

/* ---------- consistency ---------- */
.sec-head > p,.sec-head .aside p,.sec-aside p{color:var(--dim)}
.clients{background:transparent}
/* intro → first section: one comfortable gap instead of two stacked paddings */
.intro{padding-bottom:16px}
main > .wrap:first-child + .sec,main > .wrap:first-child + section{padding-top:56px}
@media (max-width:760px){main > .wrap:first-child + .sec,main > .wrap:first-child + section{padding-top:36px}}
.ct h1{font-size:var(--h1)!important;line-height:.92}
   /* slit ends behind the middle of the docked HUD */
@media (max-width:1024px){.svc3{max-width:none!important}}

/* ===== v81 · main-site pictogram motion (Line A icons) ===== */
.stop-ic .pg{width:auto;height:100%;max-width:100%}
.stop:hover .pg-drop{transform:translateY(8px)}
.stop:hover .pg-spin{transform:rotate(90deg) scale(1.08)}
.stop:hover .pg-hand{transform:rotate(270deg);transition-duration:1s}
.stop:hover .pg-wave .w2{opacity:1}
html.paused .pg *{transform:none !important}
@media (prefers-reduced-motion:reduce){
.stop:hover .pg *{transform:none !important}
}
@keyframes ping{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}

/* =========================================================================
   v81
   ========================================================================= */

/* ---------- HERO: RM dot badge on the right ---------- */












/* ---------- SERVICES TOP: title + Line A departure board ---------- */
.directory.svc-top{position:relative;overflow:hidden;padding:84px 0 96px;
  background:var(--ink)}
.directory.svc-top::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 55%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 55%,#000 15%,transparent 72%)}
.svc-top-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:40px 64px;align-items:center}
.svc-intro{padding:0!important}
.svc-intro h1{font-size:clamp(44px,4.8vw,80px)!important}
.svc-intro .lead{max-width:32em;margin-top:6px}
.board{background:var(--panel);--c:var(--c-l)}
.board-bar{display:flex;align-items:center;gap:18px;margin:0;padding:12px 18px;border-bottom:1px solid var(--line);color:var(--dim)}
.board-bar b{color:var(--text)}.board-bar .on{margin-left:auto;color:var(--teal-l)}
.board .route-line{background:var(--amber);color:var(--ink);padding:5px 12px;font-weight:700;--c:6px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%)}
.dbr-list{list-style:none;margin:0;padding:0}
.dbr{display:grid;grid-template-columns:60px minmax(0,1fr);gap:18px;align-items:center;padding:18px 20px;border-top:1px dashed var(--line);transition:background .25s}
.dbr:first-child{border-top:0}
.dbr:hover{background:rgba(251,176,59,.04)}
.dbr-ic{width:60px;height:60px;display:grid;place-items:center;background:var(--panel-in);padding:6px;box-shadow:inset 0 0 0 1px rgba(251,176,59,.25)}
.st-teal .dbr-ic{box-shadow:inset 0 0 0 1px rgba(92,200,198,.3)}
.dbr-ic svg{width:100%;height:100%;overflow:visible}

.dbr h3{font-family:"Serial Port Mono",monospace;font-size:var(--fs-sm);font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 4px}
.dbr p{margin:0;color:var(--text-2);font-size:var(--fs-md);line-height:1.5}

.pg-drop,.pg-spin,.pg-hand{transition:transform .5s var(--ease)}
.dbr:hover .pg-drop{transform:translateY(8px)}
.dbr:hover .pg-spin{transform:rotate(90deg) scale(1.08)}
.dbr:hover .pg-hand{transform:rotate(270deg);transition-duration:1s}
html.paused .dbr .pg-drop,html.paused .dbr .pg-spin,html.paused .dbr .pg-hand{transform:none!important}






@media (max-width:1024px){.svc-top-in{grid-template-columns:1fr}.directory.svc-top{padding:56px 0 64px}}
@media (max-width:560px){
  .dbr{grid-template-columns:48px minmax(0,1fr);gap:4px 14px;padding:16px}
  .dbr-ic{grid-row:span 3;width:48px;height:48px}
  
  .board-bar .bb-route{display:none}
}

/* ---------- SERVICES: boarding passes print in one after another ---------- */
.plans-sec .ticket::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:var(--ink);transform-origin:50% 100%;transform:scaleY(0)}
html.motion:not(.paused) .tickets.armed .ticket{opacity:0;transform:translateY(-26px)}
html.motion:not(.paused) .tickets.armed .ticket::after{transform:scaleY(1)}
html.motion:not(.paused) .tickets.armed .ticket.printed{opacity:1;transform:none;transition:opacity .35s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
html.motion:not(.paused) .tickets.armed .ticket.printed::after{transform:scaleY(0);transition:transform .9s steps(14,end)}

/* ---------- FINAL CALL: barcode-scan sweep on hover ---------- */
.dep{position:relative}






/* ---------- HUD numbers keep their width while counting ---------- */
.hud dd{font-variant-numeric:tabular-nums}

/* ===== v82 ===== */
/* nav rail: items run to the rail's edges so hover fills the chamfered shape (the rail clips them) */
.nh .nh-rail ul{padding:0!important}
.nh .nh-rail li:first-child a{padding-left:28px}
.nh .nh-rail li:last-child a{padding-right:28px}
.nh .nh-rail li:first-child a::after{left:28px}
.nh .nh-rail li:last-child a::after{right:28px}
.nh .nh-rail a[aria-current="page"]{background:rgba(251,176,59,.06)}
@media (max-width:1240px){.nh .nh-rail li:first-child a{padding-left:20px}.nh .nh-rail li:last-child a{padding-right:20px}.nh .nh-rail li:first-child a::after{left:20px}.nh .nh-rail li:last-child a::after{right:20px}}
@media (max-width:560px){.nh .nh-rail li:first-child a,.nh .nh-rail li:last-child a{padding:0 2px!important}}

/* FAQ: one grid, rows shared across both columns so lines always line up */
.faq-sec .faq-wrap.faq-cols{display:block!important}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--rows,7),auto);grid-auto-flow:column;column-gap:48px;border-top:1.5px solid var(--line)}
.faq-grid .fq{border-top:0!important}
@media (max-width:1100px){.faq-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}}

/* =========================================================================
   v83 · HOME HERO "Signal": idea in → Phrug (wireframe 3D) → reality out
   ========================================================================= */





























@keyframes sgpulse{to{stroke-dashoffset:0}}











/* =========================================================================
   v84 · cleanup pass
   ========================================================================= */

/* icon sprite holder (was an inline style) */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* home project cards: each client's accent line under the image */
.pj-c-hauling{--client:#e9e4d8}
.pj-c-silk{--client:#b68331}
.pj-c-kaiko{--client:#a36fdc}
.pj-c-bowl{--client:#f8933c}

/* sections that sit right under a divider rule */
.sec.sec-tight{padding-top:20px}

/* contact: "Prefer to talk first?" label */
.ct-alt-h{color:var(--dim);margin-bottom:12px}

/* kicker arrow sits on the first line when the label wraps, instead of floating between lines */
.kicker{align-items:flex-start}
.kicker::before{margin-top:.42em}

/* boarding pass foot: barcode only */
.plans-sec .t-bc{justify-content:flex-start}

/* header: Motion keeps its word on phones; the quote button shortens instead */
@media (max-width:1024px){
  .nh-motion{padding:0 12px;min-width:0}
  .nh-motion .mt-lbl{position:static!important;width:auto;height:auto;overflow:visible;clip:auto}
  .nh-motion .mt-lbl b{display:none}
}
@media (max-width:480px){
  .nh-cta-x{display:none}
}

/* Services section header now uses the same numeral layout as Pricing and Process
   (those rules are scoped per section today; folding them into one shared rule is part of the CSS consolidation) */
#services .sec-top{grid-template-columns:auto minmax(0,1fr) auto;gap:40px;align-items:end;margin-bottom:60px}
#services .sec-top .num{margin-bottom:8px}
#services .sec-top h2{margin:12px 0 0;line-height:1;max-width:820px}
#services .sec-top .kicker{margin:0;max-width:none;font-size:var(--fs-xs);line-height:normal}
#services .sec-aside p{margin:0;max-width:380px;font-size:var(--fs-body);line-height:1.55}
@media (max-width:1100px){#services .sec-top{grid-template-columns:minmax(0,1fr);gap:16px}}

/* =========================================================================
   v86 · secondary pages: legal + Subsignal case study (ported from legal.css / work.css)
   ========================================================================= */

/* from spaceport.css */
main.legal .lg-sec p,
main.legal .lg-sec li,
main.legal .lg-short li{max-width:36em}
/* from legal.css */
main.legal .lg-head{max-width:820px;padding-bottom:40px;border-bottom:1.5px solid var(--line);margin-bottom:48px;position:relative}
main.legal .lg-head::after{content:"";position:absolute;left:0;bottom:-2px;width:120px;height:3.5px;background:var(--amber)}
main.legal .lg-head h1{margin:18px 0 0;font-family:"Turtle Mode",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(44px,6vw,92px);line-height:.92;color:#F3F0EA;text-wrap:balance}
main.legal .lg-head h1 .l2{display:block;color:var(--amber);font-family:"Turtle Mode Half","Turtle Mode",sans-serif}
main.legal .lg-head .lead{margin:22px 0 0;font-size:var(--fs-lead);line-height:1.55;color:#d7d2ca;max-width:56ch}
main.legal .lg-date{margin:18px 0 0;color:var(--dim)}
main.legal .lg-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:64px;align-items:start}
main.legal .lg-toc{position:sticky;top:100px}
main.legal .lg-toc .meta{color:var(--dim);margin-bottom:14px}
main.legal .lg-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;border-left:1.5px solid var(--line)}
main.legal .lg-toc a{display:flex;gap:12px;align-items:baseline;padding:7px 0 7px 16px;margin-left:-1.5px;border-left:1.5px solid transparent;color:#cfc9bf;text-decoration:none;font-size:var(--fs-md);line-height:1.35}
main.legal .lg-toc a span{font-family:"Serial Port Mono",monospace;font-size:var(--fs-xs);color:var(--amber);letter-spacing:.08em}
main.legal .lg-toc a:hover,
main.legal .lg-toc a.on{color:var(--amber);border-left-color:var(--amber)}
main.legal .lg-toc .lg-other{display:inline-block;margin-top:26px;color:var(--amber);text-decoration:none}
main.legal .lg-body{max-width:72ch;min-width:0}
main.legal .lg-short{border:1.5px solid var(--amber);background:rgba(251,176,59,.06);padding:24px 26px;margin-bottom:56px;position:relative}
main.legal .lg-short .meta{color:var(--amber);margin-bottom:12px}
main.legal .lg-short ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
main.legal .lg-short li{display:flex;gap:12px;font-size:var(--fs-body);line-height:1.55;color:#e6e1d8}
main.legal .lg-short li::before{content:"▸";color:var(--amber);flex-shrink:0}
main.legal .lg-sec{padding:0 0 44px;margin-bottom:44px;border-bottom:1px dashed var(--line);scroll-margin-top:100px}
main.legal .lg-sec:last-child{border-bottom:0}
main.legal .lg-sec h2{display:flex;align-items:baseline;gap:16px;margin:0 0 18px;font-family:"Rota Pro Grotesk",sans-serif;font-weight:800;font-size:clamp(24px,2.4vw,30px);line-height:1.15;text-transform:uppercase;color:#F3F0EA;text-wrap:balance}
main.legal .lg-sec h2 .idx{font-family:"Serial Port Mono",monospace;font-size:var(--fs-sm);font-weight:500;color:var(--amber);letter-spacing:.1em}
main.legal .lg-sec h3{margin:26px 0 10px;font-family:"Serial Port Mono",monospace;font-size:var(--fs-sm);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
main.legal .lg-sec p,
main.legal .lg-sec li{font-size:var(--fs-body);line-height:1.7;color:#d7d2ca}
main.legal .lg-sec p{margin:0 0 14px}
main.legal .lg-sec b{color:#F3F0EA;font-weight:600}
main.legal .lg-sec ul{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
main.legal .lg-sec ul li{display:flex;gap:12px}
main.legal .lg-sec ul li::before{content:"";width:6px;height:6px;margin-top:.7em;background:var(--amber);flex-shrink:0}
main.legal .lg-sec a{color:var(--amber)}
main.legal .lg-sec code{font-family:"Serial Port Mono",monospace;font-size:.88em;color:#F3F0EA;background:#1c1a17;padding:2px 6px}
main.legal .lg-table{overflow-x:auto;margin:10px 0 18px;border:1px solid var(--line)}
main.legal .lg-table table{width:100%;border-collapse:collapse;min-width:520px}
main.legal .lg-table th,
main.legal .lg-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:var(--fs-md);line-height:1.45;color:#d7d2ca;vertical-align:top}
main.legal .lg-table th{font-family:"Serial Port Mono",monospace;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:500;background:#141311}
main.legal .lg-table tr:last-child td{border-bottom:0}
@media (max-width:1000px){
main.legal .lg-grid{grid-template-columns:minmax(0,1fr);gap:28px}
main.legal .lg-toc{position:static;border:1px solid var(--line);padding:18px}
main.legal .lg-toc ol{columns:2;column-gap:24px;display:block;border-left:0}
main.legal .lg-toc li{break-inside:avoid}
main.legal .lg-toc a{padding-left:0;border-left:0}
}
@media (max-width:640px){
main.legal .lg-toc ol{columns:1}
main.legal .lg-sec p,
main.legal .lg-sec li,
main.legal .lg-short li{font-size:var(--fs-base)}
}
main.legal .lg-short li,
main.legal .lg-sec ul li{display:block;position:relative;padding-left:24px}
main.legal .lg-short li::before{position:absolute;left:0;top:0}
main.legal .lg-sec ul li::before{position:absolute;left:4px;top:0;margin-top:.72em}
/* from spaceport.css */
main.cs .cs-cover .gal-item::after{z-index:4}
main.cs .cs-text p,
main.cs .cs-list li{max-width:36em}
/* from work.css */
main.cs .cs-head{max-width:860px}
main.cs .cs-head .kicker{margin:0;color:var(--amber);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
main.cs .cs-meta dt,
main.cs .cs-stats dt{font-size:var(--fs-xs);color:var(--dim)}
main.cs .cs-back{margin:0 0 28px}
main.cs .cs-back a{font-family:"Serial Port Mono",monospace;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:44px}
main.cs .cs-sample{color:var(--teal-l);border:1px solid currentColor;padding:3px 8px;border-radius:999px;font-size:var(--fs-xs)}
main.cs .cs-meta{margin:36px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,auto));gap:14px 36px;padding:16px 0;border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
main.cs .cs-meta dd{margin:5px 0 0;font-weight:800;font-size:var(--fs-body);text-transform:uppercase;color:var(--text)}
main.cs .cs-cover{margin:44px 0 0;aspect-ratio:16/9;border-radius:6px}
main.cs .cs-body{max-width:860px;margin:0 auto}
main.cs .cs-sec{margin-top:72px}
main.cs .cs-sec h2{margin:0 0 22px;display:flex;align-items:baseline;gap:14px;font-family:"Turtle Mode",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(28px,3vw,40px);line-height:1;color:var(--text)}
main.cs .cs-sec h2 .meta{font-size:var(--fs-xs);color:var(--amber)}
main.cs .cs-text p{margin:0 0 18px;max-width:36em;font-size:var(--fs-lead);line-height:1.65;color:var(--text-2)}
main.cs .cs-text p:last-child{margin-bottom:0}
main.cs .cs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
main.cs .cs-list li{display:flex;gap:12px;font-size:17.5px;line-height:1.55;color:var(--text-2)}
main.cs .cs-list li::before{content:"▸";color:var(--amber)}
main.cs .cs-figs{margin:28px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
main.cs .cs-sec > .cs-ph{margin-top:28px}
main.cs .cs-ph{margin:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:18px;border:1.5px dashed #4a443a;
  background:radial-gradient(circle,#231e15 1px,transparent 1.6px) 0 0/8px 8px,var(--panel)}
main.cs .cs-ph .meta{font-size:var(--fs-xs);color:var(--teal-l)}
main.cs .cs-ph p{margin:0;color:var(--dim);font-size:var(--fs-md)}
main.cs .cs-fig{margin:0}
main.cs .cs-fig img{display:block;width:100%;height:auto;border-radius:6px}
main.cs .cs-fig figcaption{margin-top:10px;color:var(--dim);font-size:var(--fs-md)}
main.cs .cs-stats{margin:30px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
main.cs .cs-stats div{padding:16px 18px;border:1.5px solid var(--line);background:var(--panel)}
main.cs .cs-stats dd{margin:6px 0 0;font-weight:800;font-size:var(--fs-h6);line-height:1.15;text-transform:uppercase;color:var(--amber)}
main.cs .cs-quote{margin:36px 0 0;padding:6px 0 6px 24px;border-left:3px solid var(--teal-l)}
main.cs .cs-quote blockquote{margin:0}
main.cs .cs-quote p{margin:0;font-size:var(--fs-h6);line-height:1.5;color:var(--text)}
main.cs .cs-quote figcaption{margin-top:14px;color:var(--dim);font-size:var(--fs-md)}
main.cs .cs-quote b{color:var(--text)}
main.cs .cs-crew{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1.5px solid var(--line)}
main.cs .cs-crew li{display:grid;grid-template-columns:160px minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 0;border-bottom:1.5px solid var(--line)}
main.cs .cs-crew b{font-weight:800;font-size:var(--fs-h6);text-transform:uppercase;color:var(--text)}
main.cs .cs-crew span{color:var(--dim);font-size:var(--fs-base)}
main.cs .cs-crew a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:1px solid currentColor;border-radius:999px;font-family:"Serial Port Mono",monospace;font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
main.cs .cs-crew a:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
main.cs .cs-crew a span{color:inherit;font-size:inherit}
main.cs .cs-next{margin-top:96px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1.5px solid var(--line)}
main.cs .cs-next a{display:flex;flex-direction:column;gap:8px;padding:26px 28px;text-decoration:none;color:var(--text);transition:background .2s}
main.cs .cs-next a + a{border-left:1.5px solid var(--line);text-align:right;align-items:flex-end}
main.cs .cs-next a:hover{background:rgba(251,176,59,.08)}
main.cs .cs-next .meta{font-size:var(--fs-xs);color:var(--dim)}
main.cs .cs-next b{font-family:"Turtle Mode",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.6vw,34px);line-height:1;color:var(--amber)}
@media (max-width:1100px){
main.cs .cs-meta{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
main.cs .cs-figs,
main.cs .cs-stats{grid-template-columns:minmax(0,1fr)}
main.cs .cs-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
main.cs .cs-sec{margin-top:56px}
main.cs .cs-text p{font-size:var(--fs-body)}
main.cs .cs-crew li{grid-template-columns:minmax(0,1fr) auto}
main.cs .cs-crew li > span{grid-column:1;grid-row:2}
main.cs .cs-crew li > a{grid-row:1 / span 2;grid-column:2}
main.cs .cs-next{grid-template-columns:minmax(0,1fr)}
main.cs .cs-next a + a{border-left:0;border-top:1.5px solid var(--line);text-align:left;align-items:flex-start}
}
@keyframes wk-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
main.cs .cs-live{color:#b2ed00;border:1px solid currentColor;padding:3px 9px;border-radius:999px;font-size:var(--fs-xs);display:inline-flex;gap:6px;align-items:center}
main.cs .cs-cover-img{position:relative;overflow:hidden;background:#000}
main.cs .cs-cover-img img{display:block;width:100%;height:100%;object-fit:cover}
main.cs .cs-wide{margin:28px 0}
main.cs .cs-fig picture{display:block}
main.cs .cs-fig figcaption b{color:var(--text);font-weight:700}
main.cs .cs-figs .cs-fig img{aspect-ratio:1;object-fit:cover}
main.cs .cs-plates{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
main.cs .cs-plates li{display:grid;place-items:center;aspect-ratio:16/10;padding:10%;border-radius:6px;border:1.5px solid var(--line)}
main.cs .cs-plates img{display:block;width:100%;height:auto}
main.cs .cs-plates picture{display:block;width:100%}
main.cs .pl-light{background:#f3f0ea}
main.cs .pl-dark{background:#050505}
main.cs .pl-paper{background:#eef7c9}
@media (max-width:760px){
main.cs .cs-plates{grid-template-columns:minmax(0,1fr)}
}
main.cs .cs-sec-wide{max-width:none}
main.cs .cs-gallery{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
main.cs .cs-gallery .gal-item{position:relative;display:block;overflow:hidden;border-radius:4px;background:#000;text-decoration:none;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
main.cs .cs-gallery picture,
main.cs .cs-gallery img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
main.cs .cs-gallery img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
main.cs .cs-gallery span{position:absolute;left:8px;bottom:8px;padding:3px 8px;background:rgba(10,10,10,.82);color:var(--text);font-size:var(--fs-xs);border-radius:2px}
main.cs .cs-gallery .gal-item:hover img{transform:scale(1.05)}
main.cs .cs-gallery .gal-item:hover span,
main.cs .cs-gallery .gal-item:focus-visible span{background:var(--amber);color:var(--ink)}
main.cs .cs-gallery .gal-item:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
main.cs .cs-note{margin:14px 0 0;color:var(--dim);font-size:var(--fs-xs)}
@media (max-width:1100px){
main.cs .cs-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
main.cs .cs-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
main.cs .cs-gallery span{font-size:var(--fs-xs)}
}
@media (prefers-reduced-motion:reduce){
main.cs .cs-gallery img{transition:none}
main.cs .cs-gallery .gal-item:hover img{transform:none}
}
html.paused main.cs .cs-gallery .gal-item:hover img{transform:none}
main.cs .cs-gallery{width:min(1240px,calc(100vw - 48px));position:relative;left:50%;transform:translateX(-50%);grid-template-columns:repeat(5,minmax(0,1fr))}
main.cs .cs-note{text-align:center}
@media (max-width:1100px){
main.cs .cs-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
main.cs .cs-gallery{width:auto;left:auto;transform:none;grid-template-columns:repeat(2,minmax(0,1fr))}
main.cs .cs-note{text-align:left}
}
main.cs .cs-cover .gal-item{height:100%}
main.cs .cs-plates img{-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}
@media (min-width:1101px){
main.cs .cs-meta{grid-template-columns:repeat(6,minmax(0,auto));column-gap:28px}
}
main.cs .cs-site{text-transform:none;white-space:nowrap}
main.cs .cs-meta dd a,
main.cs .cs-text a{color:var(--amber);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
main.cs .cs-meta dd a:hover,
main.cs .cs-text a:hover{color:#ffc766}
main.cs .cs-visit{margin:28px 0 0}
@media (max-width:760px){
main.cs .cs-visit .btn{width:100%}
}
/* ---------- secondary pages: shared page padding ---------- */
main.legal{max-width:1360px;width:100%;margin:0 auto;padding:56px 32px 100px}
main.cs{padding:56px 0 24px}
@media (max-width:760px){main.legal{padding:32px 16px 80px}main.cs{padding-top:32px}}

/* ---------- client portal + 404: copy beside a framed panel ---------- */
.sub-main{padding:72px 0 110px}
.sub-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:48px 80px;align-items:center}
.sub-copy h1{font-family:"Turtle Mode",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(44px,6vw,92px);line-height:.9;color:#F3F0EA;margin:16px 0 0}
.sub-copy h1 .l2{display:block;color:var(--amber);font-family:"Turtle Mode Half","Turtle Mode",sans-serif}
.sub-copy .lead{margin:24px 0 0;max-width:30em;font-size:var(--fs-lead);line-height:1.6;color:var(--text-2)}
.sub-copy .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.sub-perks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.sub-perks li{display:flex;gap:12px;align-items:baseline;color:var(--text-2)}
.sub-perks li::before{content:"";flex:0 0 8px;height:8px;background:var(--amber);clip-path:polygon(0 0,100% 50%,0 100%);transform:translateY(-1px)}
.login{display:flex;flex-direction:column;gap:16px;padding:28px;background:var(--panel)}
.login-top{display:flex;justify-content:space-between;align-items:center;color:var(--dim);padding-bottom:14px;border-bottom:1px solid var(--line)}
.login h2{margin:4px 0 0;font-family:"Turtle Mode",sans-serif;font-weight:400;text-transform:uppercase;font-size:var(--fs-h4);color:#F3F0EA}
.login-hint{margin:-6px 0 0;color:var(--dim);font-size:var(--fs-md)}
.login-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:var(--fs-md)}
.login-row a{color:var(--amber)}
.check{display:inline-flex;align-items:center;gap:8px;color:var(--text-2);min-height:44px}
.check input{width:18px;height:18px;accent-color:var(--amber)}
.login .btn{width:100%}
.login-err{margin:0;min-height:1.4em;color:#ff7a6b;font-size:var(--fs-md)}
.login-err:empty{min-height:0}
.login-note{margin:0;padding:14px 16px;border-left:3px solid var(--teal-l);background:rgba(92,200,198,.08);color:var(--text-2);font-size:var(--fs-md);line-height:1.5}
.login-note a{color:var(--amber)}
.login-or{margin:6px 0 -4px;text-align:center;color:var(--mute)}
.nf-tile{position:relative;margin:0;aspect-ratio:1;--c:var(--c-l);background:
  linear-gradient(rgba(92,200,198,.06) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(92,200,198,.06) 1px,transparent 1px) 0 0/24px 24px,var(--panel-in)}
.nf-tile img{position:absolute;inset:8% 10% 14%;width:80%;height:78%;object-fit:contain;opacity:.55;filter:grayscale(.4)}
html.motion:not(.paused) .nf-tile img{animation:nfdrift 6s ease-in-out infinite alternate}
@keyframes nfdrift{from{transform:translate(-6px,4px) rotate(-3deg)}to{transform:translate(6px,-4px) rotate(3deg)}}
.nf-tile figcaption{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:var(--mute)}
.nf-code{position:absolute;top:14px;left:18px;font-family:"Rota Pro Grotesk",sans-serif;font-weight:900;font-size:clamp(56px,7vw,96px);line-height:.8;color:var(--amber)}
@media (max-width:900px){
  .sub-wrap{grid-template-columns:1fr}
  .sub-main{padding:36px 0 72px}
  .nf-tile{max-width:360px;width:100%}
}

/* legal page header: undo the boarding-pass ".lg-head" rule the site already had under the same name */
main.legal .lg-head{display:block;margin:0 0 48px;padding:0 0 40px;color:inherit;font-weight:inherit}
@media (max-width:760px){main.legal .lg-head{margin:0 0 36px;padding:0 0 28px}}
main.legal .lg-head .kicker{margin:0}
main.legal .lg-body,main.legal .lg-sec{min-width:0}

/* case study title: same display type as every other page title */
main.cs .cs-head h1{margin:18px 0 0;font-family:"Turtle Mode",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(48px,7vw,104px);line-height:.92;color:#F3F0EA}
main.cs .cs-head h1 .l2{display:block;color:var(--amber);font-family:"Turtle Mode Half","Turtle Mode",sans-serif}
main.cs .cs-head .lead{margin:22px 0 0;max-width:40em;font-size:var(--fs-lead);line-height:1.6;color:var(--text-2)}

main.cs .cs-meta dd{min-width:0;overflow-wrap:anywhere}   /* long URLs wrap on the narrowest phones */
main.cs .cs-meta > div{min-width:0}
main.cs .cs-site{white-space:normal;overflow-wrap:anywhere}

/* v88 · Rota Pro Grotesk sets close to Chivo's width and x-height, so the v87 text scale stays.
   Rota has no italic; the few <em> uses get a medium weight instead of a synthesised slant. */
em{font-style:normal;font-weight:500}

/* v88 · hero fit for the new type */
/* hero chips: the side columns grow to fit their chips, so a wider text face can't slide under the centre tile */

/* The new mono's wider letters need more room for the dot-matrix "Idea in / Reality out" words; below 1360px they
   would hit the viewport edge, so the hero uses the compact three-column row a little earlier */


/* =========================================================================
   v89 · home hero: headline left, RM badge right, amber tape underneath
   ========================================================================= */
.home-hero{position:relative;overflow:hidden;padding:clamp(28px,7vh,96px) 0 28px;background:#0E0E0E}
.hh-grid{display:grid;gap:36px;align-items:center;max-width:calc(var(--maxw) + 2 * var(--gut) - 80px);margin:0 auto;padding:0 var(--gut)}
.home-hero h1{margin:0;font-family:"Turtle Mode",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(40px,5.4vw,96px);line-height:.92;letter-spacing:.005em;color:#F3F0EA}
.home-hero h1 .l2{display:block;color:var(--amber);font-family:"Turtle Mode Half","Turtle Mode",sans-serif}
/* reads like the instruction plate on a coin-op machine: mono, with the payoff in amber */
.hh-line{margin:20px 0 0;font-family:"Serial Port Mono",monospace;font-weight:500;font-size:clamp(17px,1.6vw,24px);
  letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.hh-line span{display:inline-block}
.hh-line span:last-child{color:var(--amber)}
.hh-copy .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,4vh,40px)}
.hh-copy .micro{margin:14px 0 0;color:var(--mute)}
.hh-badge{display:block;width:min(100%,480px);height:auto;justify-self:end}
@media (min-width:961px){.hh-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
@media (max-width:960px){
  .home-hero h1{font-size:clamp(40px,8vw,72px)}
  .hh-badge{width:min(60%,320px);justify-self:start}
}

/* the tape: two identical lists slide left as one loop; with Motion off it's a single still band */
.tape{position:relative;z-index:2;margin:clamp(40px,8vh,96px) -2vw 0;transform:rotate(-1.4deg);
  background:var(--amber);color:#0E0E0E;border-block:2px solid #0E0E0E;overflow:hidden}
.tape-track{display:flex;width:max-content}
.tape-set{display:flex;margin:0;padding:0;list-style:none}
.tape-set li{display:flex;align-items:center;gap:30px;padding:16px 15px 12px;white-space:nowrap;
  font-family:"Turtle Mode",sans-serif;font-size:clamp(26px,3.2vw,50px);line-height:1;text-transform:uppercase}
.tape-set li::after{content:"";width:.42em;height:.42em;background:currentColor;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
html.motion:not(.paused) .tape-track{animation:tape 42s linear infinite}
@keyframes tape{to{transform:translateX(-50%)}}
html:not(.motion) .tape-dup,html.paused .tape-dup{display:none}
.home-hero .hud-wrap{margin-top:clamp(32px,6vh,64px)}
.home-hero .hud-wrap .hud{margin:0}