/* =========================================================
   SPXTR Development — site theme
   Black and bone, stencil type, the SPXTR logo artwork, corner brackets, stamps,
   and falling binary code: the matrix layer is what sets Development apart from SPXTR.
   Built on the same design system as SPXTR, laid out as a portfolio.
   ========================================================= */
:root {
  --bg: #0A0A0A;
  --bg-2: #111111;
  --surface: #161616;
  --surface-2: #1F1F1F;
  --line: #262626;
  --line-2: #363636;
  --bone: #F2F2EE;
  --text: #D8D8D2;
  --muted: #8E8E88;
  /* Brand accent. Admin -> Customise can change it; accent.js derives the other three from it. */
  --hot: #8A8A8A;          /* fills: buttons, badges, strips */
  --hot-text: #8A8A8A;     /* a lighter tint that stays readable as small text on black */
  --on-hot: #0A0A0A;       /* text colour on top of a fill */
  --hot-2: #717171;        /* hover shade */
  --ink: #0A0A0A;
  --red: #FF3B2F;
  --ok: #7FD957;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1440px;
  --stencil: 'Big Shoulders Stencil Display', 'Impact', sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --sans: 'Barlow', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  /* binary rain (matrix.js): the colour of the falling code and how strong it is per section */
  --code: #F2F2EE;
  /* SPXTR's diagonal hero stripes */
  /* a smooth sine drawn as a mask: the surface of the SPXTR pour */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 128' preserveAspectRatio='none'%3E%3Cpath d='M0 64 C 90 30 150 98 240 64 C 330 30 390 98 480 64 L480 128 L0 128 Z' fill='%23fff'/%3E%3C/svg%3E");
  --stripes: repeating-linear-gradient(115deg, transparent 0 34px, color-mix(in srgb, var(--bone) 5%, transparent) 34px 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body::before { content: ''; position: fixed; inset: 0; z-index: 100; pointer-events: none; background-image: var(--noise); opacity: .045; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--hot-text); outline-offset: 2px; }
::selection { background: var(--hot); color: var(--on-hot); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow, .code { font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hot-text); }
.eyebrow:not(:empty)::before { content: '>'; margin-right: .7em; opacity: .45; }
.display { font-family: var(--stencil); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: .88; color: var(--bone); }
.display em { font-style: normal; color: var(--hot-text); }
.muted { color: var(--muted); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 200; background: var(--hot); color: var(--on-hot); padding: 8px 12px; }

/* reticle corner brackets: drop a <span class="corners"> inside any positioned image block */
.corners { position: absolute; inset: 12px; pointer-events: none; z-index: 2;
  --c: var(--hot-text); --l: 22px; --w: 2px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l) no-repeat; }

/* rubber stamp */
.stamp { display: inline-block; font: 800 15px/1 var(--stencil); letter-spacing: .12em; text-transform: uppercase; color: var(--hot-text); border: 2.5px solid currentColor; padding: 7px 12px 6px; transform: rotate(-6deg); opacity: .92; }

/* ---------- buttons ---------- */
.btn { --cut: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 30px; background: var(--hot); color: var(--on-hot); font: 700 16px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); transition: background .2s, color .2s; border: 0; cursor: pointer; }
.btn:hover { background: var(--bone); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 1.5px var(--line-2); clip-path: none; }
.btn--ghost:hover { background: var(--bone); color: var(--ink); box-shadow: none; }
.btn--light { background: var(--bone); color: var(--ink); }
.btn--light:hover { background: var(--hot); color: var(--on-hot); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; pointer-events: none; }
.link-arrow { display: inline-flex; gap: 10px; align-items: center; font: 600 15px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--hot-text); padding-bottom: 5px; border-bottom: 1.5px solid currentColor; }
.link-arrow svg { transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- header ---------- */
#chrome-top, #chrome-bottom { display: contents; }
.header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header__row { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; height: 76px; }
/* The logo is the real artwork, split in two: the ghost logo and the SPXTR DEVELOPMENT text logo */
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--bone); }
.logo__ghost { height: 58px; width: auto; flex-shrink: 0; }
.logo__word { height: 42px; width: auto; flex-shrink: 0; }
.nav { display: flex; justify-content: center; gap: 30px; font: 600 15px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.nav a { position: relative; padding: 8px 0; color: var(--text); transition: color .2s; }
.nav a:hover, .nav a.active { color: var(--hot-text); }
.nav a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hot-text); }
.header__icons { display: flex; justify-content: flex-end; gap: 4px; align-items: center; }
.icon-btn { width: 42px; height: 42px; display: grid; place-items: center; position: relative; color: var(--bone); transition: color .2s; }
.icon-btn:hover { color: var(--hot-text); }
.icon-btn svg { width: 21px; height: 21px; }
.menu-btn { display: none; }
.status-chip { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hot-text); border: 1px solid var(--line-2); padding: 8px 10px; }
.status-chip i { width: 7px; height: 7px; background: var(--hot-text); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hot) 30%, transparent); }

.mobile-nav { position: fixed; inset: 0; z-index: 60; background: var(--bg); transform: translateX(-100%); transition: transform .4s var(--ease); padding: 20px var(--gutter); display: flex; flex-direction: column; overflow-y: auto; }
.mobile-nav.open { transform: none; }
.mobile-nav__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.mobile-nav a.big { font: 800 44px/1.15 var(--stencil); text-transform: uppercase; color: var(--bone); border-bottom: 1px solid var(--line); padding: 8px 0; }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; --img-h: clamp(440px, 48vw, 700px); --overlap: clamp(70px, 11vw, 170px); }
.hero__img { position: relative; height: var(--img-h); }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.hero__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 0%, rgba(10,10,10,.6) 22%, rgba(10,10,10,0) 55%), linear-gradient(90deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 22%, rgba(10,10,10,0) 78%, rgba(10,10,10,.55) 100%); }
.hero .corners { inset: 22px; --l: 36px; bottom: auto; height: calc(var(--img-h) - 44px - var(--overlap)); --c: var(--bone); }
.hero .stamp { position: absolute; right: var(--gutter); top: 54px; font-size: 20px; color: var(--bone); background: rgba(10,10,10,.6); border-width: 3px; transform: rotate(8deg); z-index: 3; }
.hero::before { content: ''; position: absolute; right: -6%; top: 0; width: 42%; height: var(--img-h); z-index: 1; pointer-events: none; background: var(--stripes); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); }
#hero-eyebrow::after { content: '_'; margin-left: .3em; animation: spx-blink 1.1s steps(1) infinite; }
@keyframes spx-blink { 50% { opacity: 0; } }
.hero__inner { position: relative; margin-top: calc(var(--overlap) * -1); padding-bottom: clamp(40px, 6vw, 72px); z-index: 2; }
.hero__grid { display: flex; justify-content: space-between; gap: 24px; font: 500 12px var(--mono); letter-spacing: .08em; color: var(--hot-text); text-transform: uppercase; margin-bottom: 20px; }
.hero h1 { font-size: clamp(60px, 9vw, 150px); margin: 0 0 26px; max-width: 1100px; }
.hero p { max-width: 560px; font-size: 19px; color: var(--text); margin: 0 0 34px; }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__bar { display: grid; grid-template-columns: repeat(var(--count, 4), 1fr); border-top: 1px solid var(--line-2); margin-top: clamp(40px, 6vw, 72px); }
.hero__bar div { padding: 20px 20px 4px 0; font: 600 16px/1.25 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); }
.hero__bar div + div { padding-left: 20px; border-left: 1px solid var(--line-2); }
.hero__bar small { display: block; font: 500 11px var(--mono); color: var(--hot-text); letter-spacing: .1em; margin-bottom: 6px; }

/* ---------- section heads ---------- */
.section { padding: clamp(72px, 10vw, 136px) 0; position: relative; }
.section--flush { padding-top: 0; }
.section-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; margin-bottom: 40px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.section-head h2 { font-size: clamp(48px, 6.4vw, 96px); margin: 12px 0 0; }
.section-head p { margin: 14px 0 0; color: var(--muted); max-width: 520px; }

/* ---------- services ---------- */
.services { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: stretch; }
.service { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--hot); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; }
.service--main { background: linear-gradient(180deg, color-mix(in srgb, var(--hot) 16%, var(--surface)), var(--surface) 60%); }
.service h3 { font-size: clamp(44px, 5vw, 76px); margin: 0; }
.service p { margin: 0; color: var(--text); font-size: 17px; max-width: 56ch; }
.service .feature-list { margin: 4px 0 8px; }
.service .btn { align-self: flex-start; margin-top: auto; }

/* ---------- pricing guide ---------- */
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.tier { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--hot); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.tier h3 { font-size: clamp(32px, 3vw, 44px); margin: 0; }
.tier__price { font: 900 34px/1 var(--stencil); color: var(--hot-text); letter-spacing: .02em; }
.tier p { margin: 0; color: var(--text); }
.tier .feature-list { margin: 4px 0 8px; }
.tier .btn { align-self: flex-start; margin-top: auto; }

/* ---------- project types (slanted tiles) ---------- */
.disc { display: grid; grid-template-columns: repeat(var(--tiles, 3), 1fr); gap: 8px; height: clamp(380px, 52vh, 580px); }
.disc a { position: relative; overflow: hidden; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); margin: 0 -4%; background: var(--surface); }
.disc a:first-child { clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); margin-left: 0; }
.disc a:last-child { clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); margin-right: 0; }
.disc a:only-child { clip-path: none; margin: 0; }
.disc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) brightness(.6); transition: filter .5s, transform 1s var(--ease); }
.disc a:hover img { filter: grayscale(0) brightness(.85); transform: scale(1.06); }
.disc a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,.85), transparent 50%); }
.disc__label { position: absolute; left: 22%; right: 10%; bottom: 22px; z-index: 2; }
.disc__label .code { display: block; margin-bottom: 6px; }
.disc__label h3 { font: 800 clamp(28px, 2.6vw, 44px)/.9 var(--stencil); text-transform: uppercase; margin: 0; color: var(--bone); transition: color .3s; }
.disc a:hover h3 { color: var(--hot-text); }
.disc a:first-child .disc__label, .disc a:only-child .disc__label { left: 10%; }

/* ---------- cards (projects + devlog entries) ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 14px; }
.card { position: relative; display: block; transition: transform .45s var(--ease); }
.card:hover { transform: translateY(-6px); }
.card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--surface); }
.card__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transition: transform 1s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__media .corners { opacity: 0; transition: opacity .25s; }
.card:hover .card__media .corners { opacity: 1; }
.card__badge { position: absolute; top: 14px; left: 14px; z-index: 3; background: var(--bg); color: var(--hot-text); padding: 6px 9px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line-2); }
.card__stamp { position: absolute; top: 14px; right: 14px; z-index: 3; font-size: 13px; padding: 5px 9px 4px; background: rgba(10,10,10,.72); color: var(--bone); border-width: 2px; }
.card__info { padding-top: 14px; }
.card__sku { font: 500 11px var(--mono); letter-spacing: .08em; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; text-transform: uppercase; }
.card__name { margin: 8px 0 0; font: 700 22px/1.1 var(--cond); letter-spacing: .04em; text-transform: uppercase; color: var(--bone); }
.card__blurb { margin: 8px 0 0; color: var(--muted); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__more { margin-top: 12px; display: inline-flex; gap: 8px; font: 600 14px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--hot-text); }
.card:hover .card__more svg { transform: translateX(4px); }
.card__more svg { transition: transform .25s var(--ease); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { display: inline-block; border: 1px solid var(--line-2); padding: 4px 8px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.chip--hot { background: var(--hot); border-color: var(--hot); color: var(--on-hot); }

.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 28px) / 3); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-top: 6px; }
.rail--wide { grid-auto-columns: calc((100% - 28px) / 2.3); }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-ctrls { display: flex; gap: 8px; }
.rail-ctrls button { width: 48px; height: 48px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--bone); transition: all .2s; }
.rail-ctrls button:hover { background: var(--hot); color: var(--on-hot); border-color: var(--hot); }

.tabs { display: flex; flex-wrap: wrap; border: 1px solid var(--line-2); }
.tab { height: 44px; padding: 0 20px; font: 600 14px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); transition: all .2s; }
.tab + .tab { border-left: 1px solid var(--line-2); }
.tab:hover { color: var(--bone); }
.tab.active { background: var(--hot); color: var(--on-hot); }

/* ---------- the studio (people) ---------- */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rider { position: relative; background: var(--surface); overflow: hidden; }
.rider__img { position: relative; aspect-ratio: 3/4; overflow: hidden; }
.rider__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); transition: filter .5s, transform 1s var(--ease); }
.rider__img--mark img, .rider:hover .rider__img--mark img { object-fit: contain; padding: 20%; filter: none; transform: none; }
.rider:hover .rider__img img { filter: grayscale(0); transform: scale(1.04); }
.rider__num { position: absolute; right: 12px; top: 6px; z-index: 2; font: 900 88px/1 var(--stencil); color: transparent; -webkit-text-stroke: 2px var(--hot-text); }
.rider__ig { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; font: 500 12px var(--mono); letter-spacing: .06em; color: var(--muted); }
.rider__ig:hover { color: var(--hot-text); }
.rider__body { padding: 18px 20px 22px; border-top: 3px solid var(--hot); }
.rider__body h3 { font: 800 30px/.95 var(--stencil); text-transform: uppercase; margin: 6px 0 12px; color: var(--bone); }
.rider__stats { display: flex; flex-wrap: wrap; gap: 14px 18px; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rider__stats b { display: block; font: 700 18px var(--cond); color: var(--bone); letter-spacing: .04em; }
.rider .link-arrow { margin-top: 16px; font-size: 13px; }

/* ---------- next release ---------- */
.event { position: relative; overflow: hidden; isolation: isolate; }
.event__bg { position: absolute; inset: 0; z-index: -1; }
.event__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5) brightness(.35); }
.event__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.event h2 { font-size: clamp(56px, 7.5vw, 124px); margin: 14px 0 22px; }
.event p { font-size: 18px; max-width: 520px; color: var(--text); margin: 0 0 30px; }
.event__meta { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 30px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.event__meta b { display: block; font: 700 20px var(--cond); color: var(--bone); letter-spacing: .04em; }
.clock { background: rgba(10,10,10,.85); border: 1px solid var(--line-2); padding: 28px; backdrop-filter: blur(6px); }
.clock__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.clock__row div { background: var(--surface-2); padding: 16px 8px 12px; text-align: center; }
.clock__row b { display: block; font: 900 clamp(44px, 5vw, 76px)/.9 var(--stencil); color: var(--hot-text); font-variant-numeric: tabular-nums; }
.clock__row small { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.clock__label { font: 600 16px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--bone); margin-bottom: 16px; }
.clock form { display: flex; margin-top: 18px; border: 1.5px solid var(--hot-text); }
.clock input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--bone); padding: 0 16px; font: 500 13px var(--mono); }
.clock input::placeholder { color: var(--muted); text-transform: uppercase; }
.clock button { height: 50px; padding: 0 20px; background: var(--hot); color: var(--on-hot); font: 700 15px var(--cond); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- how we build (photos + spec table) ---------- */
.field { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.field--solo { grid-template-columns: 1fr; }
.field__imgs { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 620px; }
.field__imgs div { position: relative; overflow: hidden; }
.field__imgs div:first-child { grid-row: span 2; }
.field__imgs:has(div:only-child) { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.field__imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }
.spec { background: var(--surface); padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; }
.spec h2 { font-size: clamp(46px, 5vw, 80px); margin: 12px 0 18px; }
.spec > p { color: var(--muted); margin: 0 0 26px; }
.spec table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
.spec td { padding: 13px 0; border-bottom: 1px dashed var(--line-2); font: 600 17px var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); }
.spec td:first-child { font: 500 11px var(--mono); color: var(--hot-text); letter-spacing: .1em; width: 42%; }
.spec .btn { margin-top: auto; align-self: flex-start; }

/* ---------- client words ---------- */
.reports { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.report { background: var(--surface); border-left: 3px solid var(--hot); padding: 28px; display: flex; flex-direction: column; gap: 18px; margin: 0; }
.report__top { display: flex; justify-content: space-between; align-items: center; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stars { color: var(--hot-text); letter-spacing: 3px; font-size: 14px; }
.report q { font: 600 23px/1.25 var(--cond); letter-spacing: .01em; color: var(--bone); quotes: '“' '”'; }
.report footer { margin-top: auto; display: flex; align-items: center; gap: 12px; font: 600 16px var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); }
.report footer i { width: 40px; height: 40px; background: var(--hot); color: var(--on-hot); display: grid; place-items: center; font: 800 16px var(--stencil); font-style: normal; }
.report footer small { display: block; font: 500 11px var(--mono); color: var(--hot-text); letter-spacing: .08em; }
.verified { color: var(--ok); }
.ig { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 14px; }
.ig a { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface); }
.ig img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4); transition: transform .8s var(--ease), filter .4s; }
.ig a:hover img { transform: scale(1.06); filter: none; }

/* ---------- call-to-action strip ---------- */
.served { background: var(--bone); color: var(--ink); }
.served .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 30px; flex-wrap: wrap; }
.served h3 { font: 900 clamp(34px, 4vw, 56px)/.9 var(--stencil); text-transform: uppercase; margin: 0; }
.served p { margin: 8px 0 0; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.served .btn { background: var(--ink); color: var(--bone); }
.served .btn:hover { background: var(--hot); color: var(--on-hot); }

/* ---------- newsletter ---------- */
.newsletter { position: relative; overflow: hidden; isolation: isolate; text-align: center; }
.newsletter__bg { position: absolute; inset: 0; z-index: -1; }
.newsletter__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.28) saturate(.7); }
.newsletter h2 { font-size: clamp(56px, 8vw, 128px); margin: 14px 0 16px; }
.newsletter p { margin: 0 auto 34px; max-width: 480px; color: var(--text); }
.newsletter form { display: flex; max-width: 560px; margin: 0 auto; border: 1.5px solid var(--hot-text); background: rgba(10,10,10,.7); }
.newsletter input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--bone); padding: 0 20px; font: 500 14px var(--mono); letter-spacing: .04em; }
.newsletter input::placeholder { color: var(--muted); text-transform: uppercase; }
.newsletter button { height: 56px; padding: 0 26px; background: var(--hot); color: var(--on-hot); font: 700 16px var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.newsletter button:hover { background: var(--bone); color: var(--ink); }
.newsletter .fine { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 16px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }

/* ---------- footer ---------- */
.footer { background: #0A0B08; color: var(--muted); padding: 80px 0 40px; font-size: 15px; border-top: 1px solid var(--line); overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); gap: 40px; padding-bottom: 60px; }
.footer .logo__ghost { height: 86px; }
.footer .logo__word { height: 62px; }
/* Giant footer logo: the transparent SPXTR Development lockup (ghost, code and all) used as a stencil, so it takes this colour */
.footer { position: relative; isolation: isolate; }
.footer__giant { width: min(100% - 2 * var(--gutter), 820px); aspect-ratio: 1123 / 951; margin: 24px auto 0; background: linear-gradient(180deg, var(--line-2), var(--surface-2) 75%);
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.footer h5 { color: var(--hot-text); margin: 0 0 18px; font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font: 600 16px var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.footer a:hover { color: var(--bone); }
.footer__binary { display: block; margin-top: 10px; font: 500 10px var(--mono); letter-spacing: .14em; color: var(--line-2); overflow-wrap: anywhere; }
.footer__motto { font: 800 22px var(--stencil); text-transform: uppercase; letter-spacing: .06em; color: var(--bone); margin: 22px 0 8px; }
.footer__bottom { border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.socials { display: flex; gap: 8px; }
.socials a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--muted); transition: all .2s; }
.socials a:hover { background: var(--hot); border-color: var(--hot); color: var(--on-hot); }
.socials svg { width: 16px; height: 16px; fill: currentColor; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; transform: translate(-50%, calc(100% + 40px)); visibility: hidden; background: var(--hot); color: var(--on-hot); padding: 14px 20px; font: 600 16px var(--cond); letter-spacing: .06em; text-transform: uppercase; display: flex; gap: 12px; align-items: center; transition: transform .4s var(--ease), visibility .4s; width: max-content; max-width: calc(100% - 32px); }
.toast.show { transform: translate(-50%, 0); visibility: visible; }
.toast svg { width: 18px; height: 18px; stroke: currentColor; flex-shrink: 0; }

/* ---------- inner pages ---------- */
.page-head { position: relative; overflow: hidden; isolation: isolate; padding: 90px 0 60px; border-bottom: 1px solid var(--line); }
.page-head__bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; }
.page-head__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.96) 30%, rgba(10,10,10,.55)), linear-gradient(0deg, var(--bg), transparent 40%); }
.page-head .corners { inset: 18px; --l: 26px; --c: var(--bone); }
.page-head h1 { font-size: clamp(60px, 8.4vw, 132px); margin: 14px 0 12px; max-width: 1100px; }
.page-head .lead { margin: 0; max-width: 640px; font-size: 18px; color: var(--text); }
.crumbs { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.crumbs a:hover { color: var(--hot-text); }
.page-head__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* work (browse) */
.shop { display: grid; grid-template-columns: 240px 1fr; gap: 48px; padding-top: 40px; padding-bottom: 120px; }
.filters { position: sticky; top: 100px; align-self: start; }
.filter-group { border-top: 1px solid var(--line); padding: 18px 0; }
.filter-group h6 { margin: 0 0 12px; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hot-text); }
.check { display: flex; align-items: center; gap: 10px; padding: 5px 0; font: 600 16px var(--cond); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; color: var(--text); }
.check input { accent-color: var(--hot); width: 15px; height: 15px; }
.check small { margin-left: auto; color: var(--muted); font: 500 11px var(--mono); }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.toolbar select, .field-input { border: 1px solid var(--line-2); background: var(--surface); color: var(--bone); height: 40px; padding: 0 12px; margin-left: 8px; font: 600 14px var(--cond); letter-spacing: .06em; text-transform: uppercase; border-radius: 0; }
.search-input { width: min(320px, 100%); margin: 0; }
.filter-toggle { display: none; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.no-results { grid-column: 1/-1; padding: 80px 0; text-align: center; color: var(--muted); }
.list-tools { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.list-tools .search-input { flex: 0 1 320px; }

/* project page */
.pdp { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 80px); padding: 24px 0 96px; }
.pdp__hero { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--surface); margin-bottom: 40px; }
.pdp__hero img { width: 100%; height: 100%; object-fit: cover; }
.pdp__info { position: sticky; top: 100px; align-self: start; }
.pdp__info h1 { font-size: clamp(52px, 5vw, 80px); margin: 12px 0 14px; }
.pdp__tag { color: var(--text); font-size: 18px; margin: 0 0 20px; }
.pdp__icon { width: 92px; height: 92px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-2); background: var(--surface); margin-bottom: 20px; }
.pdp__icon img { width: 100%; height: 100%; object-fit: cover; }
.perks { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); margin-top: 22px; border: 1px solid var(--line); }
.perks div { background: var(--bg); padding: 14px; font: 500 11px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.perks b { display: block; font: 700 16px var(--cond); color: var(--bone); letter-spacing: .06em; }
.client { margin-top: 22px; background: var(--surface); border-left: 3px solid var(--hot); padding: 18px 20px; display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; }
.client--solo { grid-template-columns: 1fr; }
.client__logo { width: 64px; height: 64px; border-radius: 15px; overflow: hidden; border: 1px solid var(--line-2); background: var(--bg-2); }
.client__logo img { width: 100%; height: 100%; object-fit: cover; }
.client__eyebrow { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hot-text); }
.client__name { font: 700 22px/1.1 var(--cond); letter-spacing: .04em; text-transform: uppercase; color: var(--bone); margin: 2px 0 8px; }
.pdp__ctas { display: grid; gap: 10px; margin-top: 26px; }

/* long-form body (devlog entries, project briefs) */
.prose { font-size: 18px; line-height: 1.7; color: var(--text); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font: 800 clamp(34px, 4vw, 48px)/.95 var(--stencil); text-transform: uppercase; color: var(--bone); margin-top: 1.6em; }
.prose h3 { font: 700 26px/1.1 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); margin-top: 1.4em; }
.prose p.lead { font-size: 23px; line-height: 1.5; color: var(--hot-text); font-weight: 500; }
.prose p.small { font-size: 15px; color: var(--muted); }
.prose ul { padding-left: 1.2em; }
.prose li { margin: .35em 0; }
.prose li::marker { color: var(--hot-text); }
.prose a { color: var(--hot-text); text-decoration: underline; }
.prose figure { margin: 2em 0; }
.prose figure img { width: 100%; }
.prose figcaption { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }

/* devlog entry */
.article { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }
.article-head { padding: 64px 0 36px; }
.article-head h1 { font-size: clamp(44px, 6vw, 88px); margin: 14px 0 16px; line-height: .92; }
.article-meta { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.article-hero { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--surface); margin-bottom: 48px; }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.article-wide { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); }
.share-row { margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }

/* comments */
.comments { padding: 20px 0 100px; }
.comments h2 { font: 800 clamp(36px, 4vw, 56px)/.95 var(--stencil); text-transform: uppercase; color: var(--bone); margin: 12px 0 8px; }
.comments-count { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 24px; }
.comment-list { display: grid; gap: 12px; margin-bottom: 28px; }
.comment-item { background: var(--surface); border-left: 3px solid var(--hot); padding: 18px 20px; }
.comment-header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; align-items: baseline; }
.comment-author { font: 700 17px var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); }
.comment-date { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.comment-body { margin: 0 0 12px; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.comment-like-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line-2); font: 600 14px var(--cond); letter-spacing: .06em; color: var(--muted); transition: all .2s; }
.comment-like-btn svg { width: 16px; height: 16px; fill: currentColor; }
.comment-like-btn:hover:not(:disabled) { border-color: var(--hot-text); color: var(--hot-text); }
.comment-like-btn.is-liked { color: var(--hot-text); border-color: var(--hot); cursor: default; }
.comment-empty { color: var(--muted); }

/* forms */
.panel { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--hot); padding: clamp(22px, 3vw, 36px); }
.panel h3 { margin: 0 0 16px; font: 800 30px/1 var(--stencil); text-transform: uppercase; color: var(--bone); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.field-full { grid-column: 1 / -1; }
.form label { display: grid; gap: 8px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.form input:not([type=checkbox]), .form select, .form textarea { width: 100%; background: var(--bg); border: 1px solid var(--line-2); color: var(--bone); padding: 12px 14px; font: 400 16px/1.4 var(--sans); text-transform: none; letter-spacing: 0; border-radius: 0; }
.form textarea { resize: vertical; min-height: 140px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--hot-text); }
.form-note { margin: 14px 0 0; font: 500 11px var(--mono); letter-spacing: .04em; color: var(--muted); }
.form-status { margin-top: 14px; padding: 12px 14px; font-size: 14px; display: none; border-left: 3px solid; }
.form-status.show { display: block; }
.form-status.success { color: #D6F5C8; background: rgba(127,217,87,.08); border-color: var(--ok); }
.form-status.error { color: #FFD2CE; background: rgba(255,77,64,.1); border-color: var(--red); }

/* about / services / contact / privacy */
.split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; align-items: start; }
.stack { display: grid; gap: 14px; }
.panel p { margin: 0 0 1em; }
.panel p:last-child { margin-bottom: 0; }
.panel .eyebrow { display: block; margin-bottom: 14px; }
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.feature-list li { position: relative; padding-left: 26px; }
.feature-list li::before { content: '✕'; position: absolute; left: 0; top: 2px; font-size: 13px; color: var(--hot-text); }
.feature-list a { color: var(--hot-text); text-decoration: underline; }
.strip3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.strip3 > div { background: var(--bg); padding: 28px; }
.strip3 .code { display: block; margin-bottom: 8px; }
.strip3 strong { display: block; font: 700 24px/1.1 var(--cond); letter-spacing: .05em; text-transform: uppercase; color: var(--bone); margin-bottom: 8px; }
.strip3 p { margin: 0; color: var(--muted); }
.status-panel { background: var(--surface); border: 1px dashed var(--line-2); padding: 40px; text-align: center; }
.status-panel .big { font: 900 clamp(48px, 7vw, 96px)/.9 var(--stencil); text-transform: uppercase; color: var(--bone); margin: 12px 0; }
.legal { max-width: 860px; }
.legal h2 { font: 800 34px/1 var(--stencil); text-transform: uppercase; color: var(--bone); margin: 2em 0 .6em; }
.legal p, .legal li { color: var(--text); }
.legal a { color: var(--hot-text); text-decoration: underline; }
.legal ul { padding-left: 1.2em; }

/* ---------- request form + tracker ---------- */
.request { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: start; }
.request > .panel[hidden], .request > aside[hidden] { display: none; }
#requestDone { grid-column: 1 / -1; }
.kind-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.kind { display: block; cursor: pointer; }
.kind input { position: absolute; opacity: 0; pointer-events: none; }
.kind__body { display: grid; gap: 4px; padding: 18px; background: var(--bg); border: 1.5px solid var(--line-2); transition: border-color .2s, background .2s; }
.kind__body b { font: 800 26px/1 var(--stencil); text-transform: uppercase; color: var(--bone); letter-spacing: .02em; }
.kind__body small { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kind:hover .kind__body { border-color: var(--muted); }
.kind input:checked + .kind__body { border-color: var(--hot-text); background: color-mix(in srgb, var(--hot) 16%, var(--bg)); }
.kind input:focus-visible + .kind__body { outline: 2px solid var(--hot-text); outline-offset: 2px; }
.form .hint { font: 400 11px var(--sans); color: var(--muted); text-transform: none; letter-spacing: 0; }
.toggle-row { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 12px; margin: 0 0 20px; font: 400 14px/1.5 var(--sans) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text) !important; }
.toggle-row input { width: 18px !important; height: 18px; margin-top: 3px; padding: 0 !important; flex: none; accent-color: var(--hot); }
.toggle-row a { color: var(--hot-text); text-decoration: underline; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; gap: 2px; padding-left: 48px; position: relative; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 34px; height: 34px; display: grid; place-items: center; background: var(--hot); color: var(--on-hot); font: 800 18px var(--stencil); }
.steps b { font: 700 18px var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); }
.steps span { color: var(--muted); font-size: 15px; }

.track { max-width: 900px; }
.stepper { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.stepper li { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 0 4px; }
.stepper li::before { content: ''; position: absolute; top: 17px; left: -50%; width: 100%; height: 3px; background: var(--line-2); z-index: 0; }
.stepper li:first-child::before { display: none; }
.stepper li.done::before, .stepper li.now::before { background: var(--hot); }
.stepper__dot { position: relative; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line-2); font: 800 16px var(--stencil); color: var(--muted); }
.stepper__dot svg { width: 18px; height: 18px; stroke: currentColor; }
.stepper li.done .stepper__dot { background: var(--hot); border-color: var(--hot); color: var(--on-hot); }
.stepper li.now .stepper__dot { border-color: var(--hot-text); color: var(--hot-text); box-shadow: 0 0 0 5px color-mix(in srgb, var(--hot) 30%, transparent); }
.stepper b { font: 600 13px var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stepper li.now b, .stepper li.done b { color: var(--bone); }
.timeline { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 0; }
.timeline li { padding: 16px 0 16px 22px; border-left: 2px solid var(--line-2); position: relative; }
.timeline li::before { content: ''; position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; background: var(--hot); }
.timeline time { display: block; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.timeline b { font: 700 20px var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); }
.timeline p { margin: 6px 0 0; color: var(--text); }
.nav-cta { height: 40px; padding: 0 18px; font-size: 14px; --cut: 9px; }

/* ---------- welcome page (QR code landing) ---------- */
.wl-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--gutter); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.wl-bar .wl-bar__cta { display: inline-flex; }
.wl-hero { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100svh - 66px); display: flex; align-items: flex-end; }
.wl-hero__img { position: absolute; inset: 0; z-index: -2; }
.wl-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.wl-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--bg) 0%, rgba(10,10,10,.94) 40%, rgba(10,10,10,.7) 68%, rgba(10,10,10,.6) 100%); }
.wl-hero .corners { inset: 18px; --l: 30px; --c: var(--bone); }
.wl-stamp { position: absolute; right: 20px; top: 34px; z-index: 3; font-size: 15px; color: var(--bone); background: rgba(10,10,10,.6); border-width: 2.5px; transform: rotate(8deg); }
.wl-hero__inner { width: 100%; padding-top: 120px; padding-bottom: clamp(36px, 7vh, 72px); }
.wl-hero h1 { font-size: clamp(60px, 15vw, 150px); margin: 14px 0 18px; }
.wl-hero p { max-width: 520px; font-size: 18px; margin: 0 0 28px; }
.wl-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 520px; }
.wl-actions .btn { width: 100%; padding: 0 12px; height: 56px; }
.wl-actions .btn:first-child, .wl-actions .btn:last-child:nth-child(4) { grid-column: 1 / -1; }
.wl-actions--center { margin: 26px auto 0; }
.wl-connect { position: relative; text-align: center; padding: clamp(72px, 12vw, 140px) 0; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--hot) 24%, var(--bg)), var(--bg) 70%); border-top: 1px solid var(--line); }
.wl-connect h2 { font-size: clamp(52px, 10vw, 110px); margin: 14px 0 16px; }
.wl-connect p { max-width: 460px; margin: 0 auto; color: var(--text); font-size: 18px; }
.wl-socials { justify-content: center; margin-top: 30px; }
.wl-mail { display: inline-block; margin-top: 22px; font: 600 15px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--hot-text); border-bottom: 1.5px solid currentColor; padding-bottom: 4px; }
.wl-foot { border-top: 1px solid var(--line); padding: 22px 0 30px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wl-foot .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (min-width: 900px) { .wl-actions { grid-template-columns: repeat(4, auto); max-width: none; } .wl-actions .btn { width: auto; padding: 0 26px; } .wl-actions .btn:first-child, .wl-actions .btn:last-child:nth-child(4) { grid-column: auto; } }

/* ---------- coming soon curtain + preview bars ---------- */
.preview-bar { position: sticky; top: 0; z-index: 90; background: var(--hot); color: var(--on-hot); text-align: center; padding: 7px 12px; font: 600 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.preview-bar button { margin-left: 12px; font: inherit; text-decoration: underline; color: inherit; }
.preview-problem { position: sticky; top: 0; z-index: 95; background: var(--red); color: #fff; padding: 10px 14px; font: 500 13px/1.45 var(--sans); text-align: center; }
body.soon { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding: clamp(24px, 5vh, 48px) var(--gutter); background: var(--bg); }
.soon__wrap { position: relative; width: min(620px, 100%); text-align: center; display: grid; justify-items: center; gap: clamp(12px, 2.2vh, 18px); }
.soon__mark { width: clamp(70px, 12vh, 120px); height: auto; }
.soon__ghost { width: clamp(110px, 20vh, 200px); height: auto; }
.soon__word { width: clamp(220px, 34vh, 380px); height: auto; margin-top: calc(clamp(110px, 20vh, 200px) * -.18); }
.soon__wrap .display { font-size: clamp(44px, min(11vw, 9vh), 104px); margin: 0; }
.soon__wrap p { margin: 0; color: var(--muted); max-width: 46ch; font-size: 17px; line-height: 1.6; }
.soon__form { display: flex; gap: 10px; width: min(440px, 100%); flex-wrap: wrap; }
.soon__form input { flex: 1 1 220px; min-width: 0; height: 54px; padding: 0 16px; background: var(--surface); border: 1px solid var(--line-2); color: var(--bone); font: 400 16px var(--sans); }
.soon__form input:focus { outline: none; border-color: var(--hot-text); }
.soon__bad { margin: 0; padding: 12px 16px; border: 1px solid var(--red); color: #FFD2CE; font: 500 13px/1.5 var(--sans); max-width: 46ch; }
.soon__thanks { font: 500 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hot-text); }
@media (max-width: 540px) { .soon__form .btn { width: 100%; } }

/* ---------- matrix layer (assets/js/matrix.js) ----------
   A canvas of falling binary dropped into the sections below. It sits over each section's
   background image and under its words, and fades out where the text is. */
.matrix { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: var(--matrix, .4); }
.hero > .matrix { z-index: 1; height: var(--img-h); --matrix: .6; -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 55%); mask-image: linear-gradient(90deg, transparent 8%, #000 55%); }
.page-head > .matrix { --matrix: .45; -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 75%); mask-image: linear-gradient(90deg, transparent 25%, #000 75%); }
.newsletter > .matrix, .event > .matrix { --matrix: .3; }
.wl-hero > .matrix { --matrix: .5; -webkit-mask-image: linear-gradient(0deg, transparent 35%, #000 80%); mask-image: linear-gradient(0deg, transparent 35%, #000 80%); }
.wl-connect > .matrix { --matrix: .25; }
.footer > .matrix { --matrix: .16; }
body.soon > .matrix { position: fixed; --matrix: .3; -webkit-mask-image: radial-gradient(ellipse at 50% 45%, transparent 25%, #000 75%); mask-image: radial-gradient(ellipse at 50% 45%, transparent 25%, #000 75%); }
.wl-connect { overflow: hidden; isolation: isolate; }

/* ---------- the SPXTR pour (hover) ----------
   Straight from spxtr.com. Buttons fill from the bottom with a wave running along the surface,
   and the giant footer logo fills up through its letters the same way, draining when the
   pointer leaves. Everything moves by transform only, so it stays smooth on big screens. */
@media (prefers-reduced-motion: no-preference) {
  .btn { position: relative; overflow: hidden; isolation: isolate; --pour: var(--bone); transition: background .2s, color .2s, transform .18s var(--ease), box-shadow .25s; }
  .btn::before {
    content: ''; position: absolute; z-index: -1; left: -20%; right: -20%; bottom: 0; height: calc(100% + 12px);
    background: var(--pour);
    -webkit-mask-image: var(--wave), linear-gradient(#000, #000); mask-image: var(--wave), linear-gradient(#000, #000);
    -webkit-mask-size: 118px 12px, 100% calc(100% - 11px); mask-size: 118px 12px, 100% calc(100% - 11px);
    -webkit-mask-position: 0 top, 0 bottom; mask-position: 0 top, 0 bottom;
    -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
    transform: translate3d(0, 100%, 0); transition: transform .5s cubic-bezier(.33, .9, .3, 1);
    animation: spx-crest 3.4s linear infinite;
  }
  .btn:is(:hover, :focus-visible)::before { transform: translate3d(0, 6px, 0); }
  .btn:not(:hover):not(:focus-visible)::before { transition: transform .32s cubic-bezier(.5, 0, .75, .4); }
  /* each kind pours what its hover used to turn, so it still reads against what it sits on */
  .btn--ghost, .btn--light, .served .btn { --pour: var(--hot); }
  .btn:hover { background: var(--hot); }
  .btn--ghost:hover { background: transparent; box-shadow: inset 0 0 0 1.5px var(--bone); }
  .btn--light:hover { background: var(--bone); color: var(--ink); }
  .served .btn:hover { background: var(--ink); color: var(--on-hot); }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(.985); }

  .footer__giant { position: relative; overflow: hidden; isolation: isolate; }
  .giant__liquid { position: absolute; left: -25%; right: -25%; bottom: -2%; height: 125%; background: var(--pour-giant, var(--bone));
    transform: translate3d(0, 100%, 0); transition: transform 1.5s cubic-bezier(.5, 0, .75, .4); will-change: transform; }
  .footer__giant:hover .giant__liquid { transform: translate3d(0, 0, 0); transition: transform 2.4s cubic-bezier(.33, .9, .3, 1); }
  .giant__wave { position: absolute; left: 0; bottom: 100%; width: 100%; height: clamp(34px, 4.4vw, 84px); animation: spx-slosh 5.2s ease-in-out infinite alternate; will-change: transform; }
  .giant__wave::before, .giant__wave::after {
    content: ''; position: absolute; bottom: -18px; left: 0; height: calc(100% + 18px); width: 300%; background: var(--pour-giant, var(--bone));
    -webkit-mask-image: var(--wave); mask-image: var(--wave); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-position: 0 bottom; mask-position: 0 bottom; will-change: transform; }
  .giant__wave::before { -webkit-mask-size: 520px 100%; mask-size: 520px 100%; animation: spx-wave-a 7.5s linear infinite; }
  .giant__wave::after { -webkit-mask-size: 340px 74%; mask-size: 340px 74%; opacity: .5; animation: spx-wave-b 12s linear infinite; }

  /* SPXTR's smaller hovers: nav underline grows from the left, cards lift and their name lights */
  .nav a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--hot-text); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
  .nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
  .card__media { transition: box-shadow .4s ease; }
  .card:hover .card__media { box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9); }
  .card__name { transition: color .2s; }
  .card:hover .card__name { color: var(--hot-text); }
  .icon-btn svg { transition: transform .3s var(--ease); }
  .icon-btn:hover svg { transform: scale(1.12); }
}
@keyframes spx-crest { to { -webkit-mask-position: -118px top, 0 bottom; mask-position: -118px top, 0 bottom; } }
@keyframes spx-wave-a { to { transform: translate3d(-520px, 0, 0); } }
@keyframes spx-wave-b { to { transform: translate3d(340px, 0, 0); } }
@keyframes spx-slosh { from { transform: translate3d(0, 4px, 0); } to { transform: translate3d(0, -10px, 0); } }

/* ---------- scroll reveal ---------- */
.reveal, .reveal-left, .reveal-right { opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal { transform: translateY(26px); }
.reveal-left { transform: translateX(-34px); }
.reveal-right { transform: translateX(34px); }
.reveal.is-visible, .reveal-left.is-visible, .reveal-right.is-visible { opacity: 1; transform: none; }
.reveal-group > * { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-group.is-visible > * { opacity: 1; transform: none; }
.reveal-group.is-visible > *:nth-child(2) { transition-delay: .07s; }
.reveal-group.is-visible > *:nth-child(3) { transition-delay: .14s; }
.reveal-group.is-visible > *:nth-child(4) { transition-delay: .21s; }
.reveal-group.is-visible > *:nth-child(5) { transition-delay: .28s; }
.reveal-group.is-visible > *:nth-child(6) { transition-delay: .35s; }

/* ---------- big screens ---------- */
@media (min-width: 1700px) {
  :root { --max: 1640px; --gutter: clamp(48px, 5vw, 96px); }
  }
@media (min-width: 2200px) {
  :root { --max: 1900px; }
  body { font-size: 17px; }
  .cards { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav { gap: 20px; font-size: 14px; }
  .status-chip { display: none; }
  .ig { grid-template-columns: repeat(3, 1fr); }
  .rail { grid-auto-columns: calc((100% - 14px) / 2); }
  .rail--wide { grid-auto-columns: calc((100% - 14px) / 1.6); }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
  .header__row { grid-template-columns: auto 1fr auto; gap: 8px; height: 66px; }
  .header__row .logo { justify-self: center; }
  .logo__ghost { height: 48px; }
  .logo__word { height: 34px; }
  .disc { grid-template-columns: 1fr; height: auto; }
  .disc a, .disc a:first-child, .disc a:last-child { clip-path: none; margin: 0; min-height: 200px; }
  .disc__label, .disc a:first-child .disc__label { left: 16px; right: 16px; }
  .team { grid-template-columns: repeat(2, 1fr); }
  .event__grid { grid-template-columns: 1fr; }
  .hero { --img-h: clamp(380px, 70vw, 560px); }
  .hero .stamp { display: none; }
  .hero__grid span:last-child { display: none; }
  .hero__bar[data-count="4"] { grid-template-columns: 1fr 1fr; }
  .hero__bar[data-count="4"] div:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero__bar[data-count="4"] div:nth-child(n+3) { border-top: 1px solid var(--line-2); margin-top: 16px; padding-top: 16px; }
  .section-head { grid-template-columns: 1fr; }
  .cards, .cards--3 { grid-template-columns: repeat(2, 1fr); gap: 30px 10px; }
  .rail { grid-auto-columns: 72%; }
  .rail--wide { grid-auto-columns: 86%; }
  .rail-ctrls { display: none; }
  .field, .pdp { grid-template-columns: 1fr; }
  .field__imgs { min-height: 460px; }
  .reports { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
  .shop { grid-template-columns: 1fr; gap: 0; }
  .filters { display: none; position: static; }
  .filters.open { display: block; margin-bottom: 24px; }
  .filter-toggle { display: inline-flex; }
  .pdp__info { position: static; }
  .split, .strip3, .services, .request { grid-template-columns: 1fr; }
  .nav-cta { display: none; }
  .page-head { padding: 64px 0 44px; }
}
@media (max-width: 540px) {
  .hero h1 { font-size: clamp(50px, 15vw, 72px); margin-bottom: 16px; }
  .hero p { font-size: 16px; line-height: 1.5; margin-bottom: 22px; }
  .hero__ctas { gap: 10px; flex-wrap: nowrap; }
  .hero__ctas .btn { flex: 1; height: 50px; padding: 0 10px; font-size: 14px; letter-spacing: .1em; white-space: nowrap; }
  .hero__bar div { font-size: 14px; }
  .team { grid-template-columns: 1fr; }
  .clock__row b { font-size: 40px; }
  .ig { grid-template-columns: repeat(2, 1fr); }
  .cards, .cards--3 { grid-template-columns: 1fr; }
  .newsletter form { flex-direction: column; }
  .newsletter input { height: 54px; }
  .form-grid { grid-template-columns: 1fr; }
  .kind-pick { grid-template-columns: 1fr; }
  .stepper { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; }
  .stepper li { grid-auto-flow: column; justify-content: start; justify-items: start; text-align: left; gap: 14px; padding: 8px 0; align-items: center; }
  .stepper li::before { left: 17px; top: -50%; width: 3px; height: 100%; }
  .article-head { padding-top: 40px; }
  .prose { font-size: 17px; }
  .toolbar select { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-group > * { opacity: 1; transform: none; }
}