/* ==========================================================================
   Northstone Creative — site.css
   Palette: Basalt / Limestone / Paper / Brass / Pine
   Type:    Archivo (variable width+weight) for display & utility
            Source Serif 4 for prose
   Motif:   the mark's two bars become every divider in the site
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Warm neutral, not black. The old near-black plus neon read as a startup
     landing page; this reads as a studio. Depth comes from tone and space. */
  --ink:        #16161A;
  --ink-2:      #232329;
  --ink-3:      #34343B;
  --graphite:   #6E6E77;
  --graphite-2: #9B9BA3;
  --concrete:   #D8D6D1;
  --limestone:  #EDEBE6;
  --limestone-2:#F4F2EE;
  --paper:      #FBFAF7;
  --white:      #FFFFFF;

  /* One accent, used at low saturation and never as a fill for large areas.
     Deep ink blue reads considered where the green read loud. */
  --volt:       #E4551F;   /* the studio's one accent, used everywhere */
  --volt-dim:   #F0A183;
  --wash-a:     #E6E3F2;
  --wash-b:     #F2E7E1;
  --wash-c:     #E1EAEF;
  --brass:      #16161A;
  --brass-lt:   #6E6E77;
  --pine:       #232329;

  --fg:      var(--ink);
  --bg:      var(--paper);
  --muted:   var(--graphite);
  --line:    color-mix(in srgb, var(--ink) 13%, transparent);
  --accent:  var(--volt);

  --ff-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ff-body:    'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  --shell:  1440px;
  --gut:    clamp(1.25rem, 4vw, 4.5rem);
  --rule-w: 1px;
  --rule-gap: 6px;

  --step--1: clamp(0.8rem, 0.77rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.18rem, 1.08rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.2rem);
  --step-3:  clamp(1.9rem, 1.5rem + 1.9vw, 3.2rem);
  --step-4:  clamp(2.4rem, 1.7rem + 3.6vw, 5.2rem);
  --step-5:  clamp(2.9rem, 1.6rem + 6.2vw, 7.6rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --hex: polygon(50% 0%, 100% 23.4%, 100% 76.9%, 50% 100%, 0% 76.9%, 0% 23.4%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--ink); color: var(--paper); }

.skip {
  position: fixed; top: 0; left: 0; z-index: 999;
  padding: .75rem 1.25rem; background: var(--ink); color: var(--paper);
  transform: translateY(-110%);
}
.skip:focus { transform: translateY(0); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- 3. Typography ------------------------------------------------ */
.display, h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 100, 'wght' 560;
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.d-xl { font-size: var(--step-5); }
.d-lg { font-size: var(--step-4); }
.d-md { font-size: var(--step-3); }
.d-sm { font-size: var(--step-2); font-variation-settings: 'wdth' 100, 'wght' 560; line-height: 1.12; }

.eyebrow {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 96, 'wght' 560;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.2;
  color: var(--muted);
}
.eyebrow--accent { color: var(--volt); }

.lede {
  font-size: var(--step-1);
  line-height: 1.45;
  max-width: 34ch;
}
.prose { max-width: 62ch; }
.prose p + p { margin-top: 1.1em; }
.prose a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.num {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 78, 'wght' 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ---------- 4. Layout ---------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(4.5rem, 9vw, 10rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 6rem); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
.g-12 { grid-template-columns: repeat(12, 1fr); }
@media (max-width: 900px) { .g-12 { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 560px) { .g-12 { grid-template-columns: repeat(2, 1fr); } }

.on-ink { background: var(--ink); color: var(--paper); --fg: var(--paper); --muted: #A4A4AC; --line: rgba(251,250,247,.16); --brass: var(--paper); --volt: #FF8A5B; }
.on-stone { background: var(--limestone); --line: color-mix(in srgb, var(--ink) 16%, transparent); }
.on-white { background: var(--white); }
/* the soft wash Mercury uses instead of a hard accent block */
.on-wash { background: linear-gradient(150deg, var(--wash-a) 0%, var(--paper) 42%, var(--wash-b) 100%); }
.on-wash-2 { background: linear-gradient(200deg, var(--wash-c) 0%, var(--paper) 55%, var(--wash-a) 100%); }
.on-pine { background: var(--pine); color: var(--paper); --fg: var(--paper); --muted: #93A8A1; --line: rgba(246,247,245,.2); }

.grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: .1; mix-blend-mode: overlay;
}

/* ---------- 5. The rule system (the mark's two bars) --------------------- */
.rule {
  border: 0; height: var(--rule-w); background: currentColor; opacity: .22;
  transform-origin: left; width: 100%;
}
.rule2 {
  display: block; width: 100%;
  height: calc(var(--rule-w) * 2 + var(--rule-gap));
  background:
    linear-gradient(currentColor, currentColor) top left / 100% var(--rule-w) no-repeat,
    linear-gradient(currentColor, currentColor) bottom left / 100% var(--rule-w) no-repeat;
  opacity: .3;
  transform-origin: left;
}
.rule2--accent { color: var(--fg); opacity: 1; }
.rule2--thin { --rule-w: 1px; --rule-gap: 5px; }

/* draw-in animation */
.reveal .rule2, .reveal .rule { transform: scaleX(0); }
.reveal.is-in .rule2, .reveal.is-in .rule { transform: scaleX(1); transition: transform 1.1s var(--ease); }

/* ---------- 6. Header ---------------------------------------------------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease), border-color .4s;
  border-bottom: 1px solid transparent;
}
.hdr__in {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem);
  height: 78px;
}
.hdr { color: var(--ink); }
body.hero-dark .hdr { color: var(--paper); }
.hdr .btn--volt { background: var(--ink); border-color: var(--ink); color: var(--paper); }
body.hero-dark .hdr .btn--volt { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.hdr.is-solid .btn--volt { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.hdr.is-solid { background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(14px) saturate(1.3); border-bottom-color: rgba(14,18,20,.14); color: var(--ink); }
body.hero-dark .hdr.is-solid { color: var(--ink); }
.hdr .burger { border-color: currentColor; opacity: .55; }
.hdr .burger:hover { opacity: 1; }
.hdr.is-hidden { transform: translateY(-100%); }

.brand { display: flex; align-items: center; gap: .7rem; flex: none; }
.brand svg { width: 26px; height: auto; color: currentColor; }
.brand__wm {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 96, 'wght' 680;
  font-size: .95rem; letter-spacing: .2em; text-transform: uppercase;
}
.brand__wm span { opacity: .48; }
/* the lockup is two words now, so the dimmed half needs its own space */
.brand__wm span::before { content: ' '; }

.nav { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2.1rem); margin-left: auto; }
.nav__link {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 88, 'wght' 560;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .13em;
  padding: .4rem 0; position: relative;
}
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current]::after { transform: scaleX(1); transform-origin: left; }

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 100, 'wght' 560;
  font-size: .9rem; letter-spacing: -.005em; text-transform: none;
  padding: .8rem 1.5rem; border: 1px solid var(--line); background: none;
  border-radius: 100px; cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
}
.btn::before {
  content: ''; position: absolute; inset: 0; background: currentColor; z-index: -1;
  transform: translateY(101%); transition: transform .5s var(--ease);
}
.btn:hover { color: var(--bg); }
.on-ink .btn:hover, .hero .btn:hover, .ftr .btn:hover { color: var(--ink); }
.btn:hover::before { transform: translateY(0); }
.btn__dot { display: none; }
.btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--lg { padding: .95rem 1.9rem; font-size: .95rem; }

.burger { display: none; flex: none; width: 44px; height: 44px; border: 1px solid var(--line); background: none; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; transition: transform .4s var(--ease), opacity .3s; }
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { bottom: 16px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: block; margin-left: auto; }
  .hdr__in { height: 66px; }
}

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 90; background: var(--ink); color: var(--paper);
  padding: 96px var(--gut) 2rem; display: flex; flex-direction: column;
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease);
  overflow-y: auto;
}
body.menu-open .drawer { clip-path: inset(0 0 0 0); }
.drawer a.drawer__link {
  font-family: var(--ff-display); font-variation-settings: 'wdth' 104, 'wght' 640;
  font-size: clamp(2rem, 9vw, 3rem); line-height: 1.08; letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: .8rem;
  padding: .35rem 0; opacity: 0; transform: translateY(18px);
}
body.menu-open .drawer__link { opacity: 1; transform: none; transition: opacity .5s var(--ease) calc(.15s + var(--i) * .06s), transform .6s var(--ease) calc(.15s + var(--i) * .06s); }
.drawer__link i { font-style: normal; font-size: .7rem; letter-spacing: .1em; color: var(--graphite-2); font-variation-settings: 'wdth' 80, 'wght' 500; }
.drawer__foot { margin-top: auto; padding-top: 2.5rem; display: grid; gap: 1rem; }
.drawer__foot a { font-family: var(--ff-display); font-variation-settings: 'wdth' 88, 'wght' 500; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite-2); }

/* ---------- 7. Hero ------------------------------------------------------ */
.hero {
  position: relative; background: var(--ink); color: var(--paper);
  --fg: var(--paper); --muted: var(--graphite-2); --line: rgba(245,244,241,.2);
  --brass: var(--paper);
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding-top: 110px; padding-bottom: 0; overflow: hidden;
}
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center; flex: 1;
  padding-block: clamp(2rem, 5vw, 4rem);
}
.hero__eyebrow { display: flex; align-items: center; gap: .9rem; margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.hero__eyebrow .tick { width: 9px; height: 9px; background: currentColor; clip-path: var(--hex); }
/* the hero headline is set in explicit line masks, so it must not re-wrap —
   size it against the column width and let each mask hold one line */
.hero h1 { font-size: clamp(2.5rem, 6.4vw, 6.6rem); font-variation-settings: 'wdth' 122, 'wght' 660; letter-spacing: -0.045em; }
.hero h1 .lm > span { white-space: nowrap; }
@media (max-width: 900px) { .hero h1 { font-size: clamp(2.3rem, 10.6vw, 4rem); } }
/* the emphasised word is set as outline — the single flourish in the design.
   Guarded, because if text-stroke isn't supported transparent text vanishes. */
.hero h1 em { font-style: normal; color: inherit; opacity: .55; }
@supports (-webkit-text-stroke: 2px currentColor) {
  .hero h1 em {
    color: transparent; opacity: 1;
    -webkit-text-stroke-width: 2px;
    /* not currentColor — that would resolve to the transparent fill above */
    -webkit-text-stroke-color: var(--fg);
  }
  @media (min-width: 900px)  { .hero h1 em { -webkit-text-stroke-width: 3px; } }
  @media (min-width: 1400px) { .hero h1 em { -webkit-text-stroke-width: 4px; } }
}
.hero__sub { margin-top: clamp(1.6rem, 3vw, 2.4rem); max-width: 44ch; color: #C9CFD1; font-size: var(--step-1); }
.hero__cta { margin-top: clamp(1.8rem, 3vw, 2.6rem); display: flex; flex-wrap: wrap; gap: 1rem; }

/* line-mask reveal */
.lm { display: block; overflow: hidden; }
.lm > span { display: block; transform: translateY(105%); }
.is-loaded .lm > span { transform: translateY(0); transition: transform 1.05s var(--ease) calc(.12s + var(--i, 0) * .11s); }

.fadeup { opacity: 0; transform: translateY(22px); }
.is-loaded .fadeup { opacity: 1; transform: none; transition: opacity .9s var(--ease) calc(.5s + var(--i, 0) * .1s), transform .9s var(--ease) calc(.5s + var(--i, 0) * .1s); }

/* the aperture — signature element */
.aperture { position: relative; aspect-ratio: 654 / 730; width: 100%; max-width: 470px; margin-inline: auto; }
/* insets kept proportional so the ring stays a true hexagon:
   7% of the width equals 6.27% of the height at this aspect ratio */
.aperture__ring {
  position: absolute; left: -7%; right: -7%; top: -6.27%; bottom: -6.27%;
  color: var(--ink); opacity: .22; animation: spin 48s linear infinite;
}
.aperture__ring svg { width: 100%; height: 100%; }
@keyframes spin { to { transform: rotate(360deg); } }

.aperture__win {
  position: absolute; inset: 0; clip-path: var(--hex); overflow: hidden;
  background: var(--limestone);
}
.aperture__layer {
  position: absolute; inset: -8%;
  opacity: 0; transition: opacity 1s var(--ease), transform 1.6s var(--ease);
  transform: scale(1.06);
  background-size: cover; background-position: center;
}
.aperture__layer.is-on { opacity: 1; transform: scale(1); }
.aperture__scan {
  position: absolute; left: 0; right: 0; height: 1px; background: var(--paper);
  opacity: .45; top: 0; animation: scan 6.5s var(--ease-io) infinite;
}
@keyframes scan { 0%,100% { top: 12%; } 50% { top: 88%; } }
.aperture__bars {
  position: absolute; left: 17%; right: 17%; top: 50%; transform: translateY(-50%);
  height: 34%; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between;
}
/* a hairline of the opposite value keeps the bars legible on light and dark plates alike */
.aperture__bars i {
  display: block; height: 2px; background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 1px rgba(22,22,26,.28);
}
.aperture__cap {
  position: absolute; bottom: -3.4rem; left: 0; right: 0; text-align: center;
}

.hero__ticker { border-top: 1px solid var(--line); }
.ticker { overflow: hidden; padding-block: 1.05rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker__track { display: flex; gap: 3.5rem; width: max-content; animation: marquee 46s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { display: flex; align-items: center; gap: 1.1rem; white-space: nowrap; }
.ticker__item b { font-family: var(--ff-display); font-variation-settings: 'wdth' 88, 'wght' 560; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-weight: inherit; }
.ticker__item i { width: 6px; height: 6px; background: currentColor; opacity: .6; clip-path: var(--hex); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (max-width: 900px) {
  .hero { min-height: auto; padding-top: 96px; }
  .hero__grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero__art { order: -1; padding-bottom: 3rem; }
  .aperture { max-width: 264px; }
  .hero__sub { font-size: var(--step-0); }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
}

/* ---------- 8. Plates — drafting surfaces, not photographs ---------------
   Tonal greys with orthographic line-work: section hatch, plan grid, elevation
   bands. Monochrome on purpose, so type stays the loudest thing on the page.
   Swap any of these for real photography when you have it. ------------------ */
.plate { background-color: var(--concrete); position: relative; }

/* plan grid */
.plate--1 { background-color: #E4E2DD; background-image:
  repeating-linear-gradient(90deg, rgba(22,22,26,.07) 0 1px, transparent 1px 44px),
  repeating-linear-gradient(0deg,  rgba(22,22,26,.07) 0 1px, transparent 1px 44px); }

/* section hatch */
.plate--2 { background-color: #E7E6E2; background-image:
  repeating-linear-gradient(45deg, rgba(10,10,11,.24) 0 1px, transparent 1px 9px); }

/* elevation bands */
.plate--3 { background-image:
  repeating-linear-gradient(0deg, rgba(22,22,26,.07) 0 1px, transparent 1px 22px),
  linear-gradient(165deg, #EFEDE8, #C8C6C1); }

/* cut line */
.plate--4 { background-image:
  linear-gradient(112deg, #0A0A0B 0 49.7%, #F5F4F1 49.7% 50.3%, #D2D2CE 50.3% 100%); }

/* survey dots */
.plate--5 { background-color: #DCDAD5; background-image:
  repeating-radial-gradient(circle at 0 0, rgba(22,22,26,.14) 0 1.4px, transparent 1.4px 30px); }

/* tonal step */
.plate--6 { background-image:
  linear-gradient(90deg, #16161A 0 25%, #55555C 25% 50%, #A3A19C 50% 75%, #E8E6E1 75% 100%); }

/* concrete wash */
.plate--7 { background-color: #B9B9B5; background-image:
  repeating-linear-gradient(0deg, rgba(10,10,11,.09) 0 1px, transparent 1px 5px),
  radial-gradient(120% 90% at 30% 15%, rgba(245,244,241,.55), transparent 70%); }

/* reverse hatch */
.plate--8 { background-color: #E8E6E1; background-image:
  repeating-linear-gradient(-45deg, rgba(22,22,26,.13) 0 1px, transparent 1px 10px); }

/* the index numeral that sits in an empty frame — the typographic placeholder */
.plate__id { display: none; }
.plate__id--legacy {
  position: absolute; left: clamp(.9rem, 2vw, 1.6rem); bottom: clamp(.4rem, 1.4vw, 1rem);
  font-family: var(--ff-display); font-variation-settings: 'wdth' 118, 'wght' 700;
  font-size: clamp(3rem, 9vw, 7rem); line-height: .78; letter-spacing: -.05em;
  color: rgba(245,244,241,.28); pointer-events: none; font-variant-numeric: tabular-nums;
}
@supports (-webkit-text-stroke: 2px currentColor) {
  .plate__id { display: none; }
.plate__id--legacy { color: transparent; -webkit-text-stroke: 1.5px rgba(245,244,241,.5); }
  .plate--2 .plate__id, .plate--7 .plate__id { display: none; }
.plate__id--legacy { -webkit-text-stroke-color: rgba(10,10,11,.55); }
  .plate--4 .plate__id, .plate--6 .plate__id { display: none; }
.plate__id--legacy { -webkit-text-stroke-color: rgba(10,10,11,.6); }
}
.plate--2 .plate__id, .plate--7 .plate__id { display: none; }
.plate__id--legacy { color: rgba(10,10,11,.3); }

/* ---------- 9. Statement ------------------------------------------------- */
.statement__lead {
  font-size: clamp(1.5rem, 3.1vw, 3.1rem); line-height: 1.18; letter-spacing: -.02em;
  max-width: 24ch;
}
.statement__lead mark { background: none; color: inherit; opacity: .5; }
@supports (-webkit-text-stroke: 2px currentColor) {
  .statement__lead mark {
    color: transparent; opacity: 1;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--ink);
  }
}

/* ---------- 10. Capability index ---------------------------------------- */
.capidx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.capidx__viz { position: sticky; top: 132px; }
.capidx__viz .aperture { max-width: 400px; }

.caprow {
  display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 1.25rem; align-items: baseline;
  padding-block: clamp(1.4rem, 2.6vw, 2.1rem);
  border-top: 1px solid var(--line); position: relative;
  transition: padding-left .5s var(--ease);
}
.caprow:last-child { border-bottom: 1px solid var(--line); }
.caprow::before {
  content: ''; position: absolute; left: 0; top: -1px; height: 2px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.caprow.is-active::before, .caprow:hover::before { transform: scaleX(1); }
.caprow.is-active, .caprow:hover { padding-left: .8rem; }
.caprow__i { color: var(--muted); font-size: .78rem; }
.caprow__name { font-family: var(--ff-display); font-variation-settings: 'wdth' 108, 'wght' 620; font-size: clamp(1.35rem, 2.6vw, 2.3rem); line-height: 1.04; letter-spacing: -.02em; }

.caprow__desc { grid-column: 2 / 4; color: var(--muted); font-size: var(--step-0); max-width: 46ch;
  max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease), opacity .5s, margin-top .5s; }
.caprow.is-active .caprow__desc { max-height: 8rem; opacity: 1; margin-top: .7rem; }
.caprow__go { font-family: var(--ff-display); font-variation-settings: 'wdth' 84, 'wght' 560; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.caprow:hover .caprow__go { color: var(--fg); }

@media (max-width: 900px) {
  .capidx { grid-template-columns: 1fr; }
  .capidx__viz { display: none; }
  .caprow { grid-template-columns: 2.2rem 1fr auto; gap: .9rem; }
  .caprow__desc { max-height: 8rem; opacity: 1; margin-top: .6rem; }
}

/* ---------- 11. Work grid ------------------------------------------------ */
.work { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.25rem, 2.5vw, 2.5rem); }
.wk { grid-column: span 6; display: block; position: relative; }
.wk--tall { grid-column: span 5; }
.wk--wide { grid-column: span 7; }
.wk--full { grid-column: span 12; }
.wk__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ink-2); }
.wk--tall .wk__frame { aspect-ratio: 4 / 5; }
.wk--full .wk__frame { aspect-ratio: 21 / 9; }
.wk__img { position: absolute; inset: 0; transition: transform 1.1s var(--ease), filter .8s var(--ease); }
.wk:hover .wk__img { transform: scale(1.045); }
.wk__hex {
  position: absolute; right: 1.4rem; bottom: 1.4rem; width: 46px; aspect-ratio: 654/730;
  color: var(--paper); opacity: 0; transform: translateY(12px) rotate(-12deg);
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.wk:hover .wk__hex { opacity: 1; transform: none; }
.wk__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 1rem; }
.wk__t { font-family: var(--ff-display); font-variation-settings: 'wdth' 104, 'wght' 620; font-size: var(--step-1); line-height: 1.06; letter-spacing: -.015em; }

.wk__tags { color: var(--muted); font-size: var(--step--1); text-align: right; flex: none; }
.wk__bar { height: 2px; background: currentColor; opacity: .18; transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); margin-top: .85rem; }
.wk:hover .wk__bar { transform: scaleX(1); opacity: 1; }

@media (max-width: 900px) {
  .wk, .wk--tall, .wk--wide, .wk--full { grid-column: span 12; }
  .wk__frame, .wk--tall .wk__frame, .wk--full .wk__frame { aspect-ratio: 4 / 3; }
}

/* ---------- 12. Method (sticky steps) ------------------------------------ */
.method { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(2rem,5vw,5rem); align-items: start; }
.method__head { position: sticky; top: 130px; }
.step { padding-block: clamp(2rem, 4vw, 3.4rem); border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; padding-top: 0; }
.step__k { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.step__k .n { font-size: .8rem; color: var(--fg); }
.step__k .line { flex: 1; height: 1px; background: var(--line); }
.step h3 { font-size: var(--step-2); margin-bottom: .7rem; }
.step p { color: var(--muted); max-width: 54ch; }
.step ul { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.step li { font-family: var(--ff-display); font-variation-settings: 'wdth' 84, 'wght' 500; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--line); padding: .38rem .7rem; color: var(--muted); }
@media (max-width: 900px) { .method { grid-template-columns: 1fr; } .method__head { position: static; } }

/* ---------- 13. Stats ---------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem,3vw,3rem); }
.stat__v { font-family: var(--ff-display); font-variation-settings: 'wdth' 92, 'wght' 620; font-size: clamp(2.6rem, 5.5vw, 5rem); line-height: .92; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat__v sup { font-size: .4em; vertical-align: super; color: var(--muted); }
.stat__l { color: var(--muted); font-size: var(--step--1); margin-top: .9rem; max-width: 22ch; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 14. Sectors -------------------------------------------------- */
.sectors { display: flex; flex-wrap: wrap; gap: .6rem; }
.sector {
  font-family: var(--ff-display); font-variation-settings: 'wdth' 92, 'wght' 560;
  font-size: clamp(.9rem, 1.9vw, 1.35rem); letter-spacing: -.01em;
  border: 1px solid var(--line); padding: .6rem 1.1rem;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s;
}
.sector:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---------- 15. Cards / insights ---------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.card { display: flex; flex-direction: column; border-top: 2px solid currentColor; padding-top: 1.2rem; }
.card__k { color: var(--fg); margin-bottom: .9rem; }
.card h3 { font-size: var(--step-1); margin-bottom: .6rem; }
.card:hover h3 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.card p { color: var(--muted); font-size: var(--step--1); }
.card__date { margin-top: auto; padding-top: 1.4rem; color: var(--muted); font-size: .78rem; }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }

/* ---------- 16. Forms ---------------------------------------------------- */
.form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: .5rem; }
.field label { font-family: var(--ff-display); font-variation-settings: 'wdth' 84, 'wght' 560; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: .75rem 0; font-family: var(--ff-body); font-size: var(--step-0); color: inherit;
  transition: border-color .35s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--fg); border-bottom-width: 2px; }
.field textarea { resize: vertical; min-height: 7rem; }
.field select option { background: var(--ink); color: var(--paper); }
.field--row { grid-template-columns: 1fr 1fr; gap: 1.5rem; display: grid; }
@media (max-width: 640px) { .field--row { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.chip span {
  display: block; border: 1px solid var(--line); padding: .55rem .95rem; cursor: pointer;
  font-family: var(--ff-display); font-variation-settings: 'wdth' 84, 'wght' 520;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  transition: background .3s, color .3s, border-color .3s;
}
.chip input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 3px; }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }
.formnote { font-size: var(--step--1); color: var(--muted); }
/* A confirmation that whispers is a confirmation people miss, and then they
   book again or email to ask whether it worked. This one announces itself. */
.formmsg { padding: 1.1rem 1.3rem; border-left: 3px solid currentColor;
  font-size: var(--step--1); display: none; border-radius: 0 8px 8px 0; }
.formmsg.is-on { display: block; }
.formmsg[data-state="error"] { border-left-color: #E4551F; background: rgba(228,85,31,.07); color: #B03A12; }

/* success: set in the site's own voice rather than as a coloured alert box.
   A display headline, a rule, and the detail underneath — it reads as part of
   the page instead of something a framework put there. */
.formmsg[data-state="ok"] {
  border-left: 0; border-top: 2px solid var(--ink);
  background: none; color: var(--fg);
  padding: 1.4rem 0 0; border-radius: 0;
  animation: msgIn .5s var(--ease) both;
}
.formmsg[data-state="ok"] b {
  display: block; font-family: var(--ff-display);
  font-variation-settings: 'wdth' 100, 'wght' 700; font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem); letter-spacing: -.03em;
  line-height: 1.02; margin-bottom: .6rem; color: var(--fg);
}
.formmsg[data-state="ok"] i {
  font-style: normal; display: block; margin-top: .7rem;
  font-family: ui-monospace, monospace; font-size: .58rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--volt);
}
.on-ink .formmsg[data-state="ok"] { border-top-color: var(--paper); }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .formmsg[data-state="ok"] { animation: none; } }

/* ---------- 17. Footer --------------------------------------------------- */
.ftr { background: var(--ink); color: var(--paper); --muted: var(--graphite-2); --line: rgba(245,244,241,.18); --brass: var(--paper); padding-top: clamp(3.5rem, 7vw, 6rem); overflow: hidden; }
.ftr__top { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; padding-bottom: clamp(3rem,6vw,5rem); }
.ftr__col { grid-column: span 3; display: grid; gap: .55rem; align-content: start; }
.ftr__col:first-child { grid-column: span 3; }
.ftr__col h4 { font-family: var(--ff-display); font-variation-settings: 'wdth' 84, 'wght' 620; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--paper); margin-bottom: .5rem; }
.ftr__col a, .ftr__col p { color: var(--graphite-2); font-size: var(--step--1); }
.ftr__col a:hover { color: var(--paper); }
/* One line, sized against the viewport so it spans the shell exactly.
   Set as HTML rather than SVG: an SVG textLength stretch either spaced the
   letters apart or flattened the glyphs, and neither read as clean. */
.ftr__wm {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: clamp(1.05rem, 7.62vw, 7.4rem);
  line-height: 1; letter-spacing: -.035em; white-space: nowrap;
  text-align: center; color: transparent;
  padding-block: clamp(1.5rem, 4vw, 3.5rem);
}
@supports (-webkit-text-stroke: 1px currentColor) {
  .ftr__wm { -webkit-text-stroke: 1px rgba(245,244,241,.3); }
}
@supports not (-webkit-text-stroke: 1px currentColor) {
  .ftr__wm { color: rgba(245,244,241,.18); }
}
.ftr__base { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; padding-block: 1.6rem; border-top: 1px solid var(--line); color: var(--graphite-2); font-size: .78rem; }
@media (max-width: 900px) { .ftr__col, .ftr__col:first-child { grid-column: span 6; } }
@media (max-width: 520px) { .ftr__col, .ftr__col:first-child { grid-column: span 12; } }

/* ---------- 18. Page header (interior pages) ----------------------------- */
.phead { padding-top: clamp(9rem, 15vw, 13rem); padding-bottom: clamp(3rem, 6vw, 5rem); position: relative; }
.phead h1 { font-size: var(--step-4); max-width: 16ch; }
.phead__lede { margin-top: 1.5rem; max-width: 46ch; }

/* ---------- 19. Scroll reveal ------------------------------------------- */
.reveal > * { opacity: 0; transform: translateY(26px); }
.reveal.is-in > * { opacity: 1; transform: none; transition: opacity .9s var(--ease) calc(var(--d, 0) * 1ms), transform .9s var(--ease) calc(var(--d, 0) * 1ms); }
.rv { opacity: 0; transform: translateY(26px); }
.rv.is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }

/* ---------- 20. Cursor --------------------------------------------------- */
.cursor { position: fixed; top: 0; left: 0; width: 34px; aspect-ratio: 654/730; margin: -17px 0 0 -17px; pointer-events: none; z-index: 200; color: var(--paper); opacity: 0; transition: opacity .3s, width .35s var(--ease); mix-blend-mode: difference; }
.cursor.is-on { opacity: .85; }
.cursor.is-lg { width: 66px; }
@media (hover: none), (max-width: 1080px) { .cursor { display: none; } }

/* ---------- 21. Utilities ----------------------------------------------- */
.stack > * + * { margin-top: var(--s, 1.25rem); }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: clamp(2rem,4vw,3.5rem); }
.mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: clamp(2rem,4vw,3.5rem); }
.accent { color: var(--brass); }
.muted { color: var(--muted); }
.rel { position: relative; }
.sechead > .btn { justify-self: start; }
.sechead { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,auto); gap: 1.5rem 3rem; align-items: end; }
@media (max-width: 760px) { .sechead { grid-template-columns: 1fr; } }
.maxw-sm { max-width: 46ch; }

/* ---------- 22. Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .lm > span, .fadeup, .reveal > *, .rv { opacity: 1 !important; transform: none !important; }
  .reveal .rule2, .reveal .rule { transform: scaleX(1) !important; }
  .aperture__ring, .aperture__scan, .ticker__track { animation: none !important; }
  .caprow__desc { max-height: 8rem; opacity: 1; }
}

/* ---------- 23. Print ---------------------------------------------------- */
@media print {
  .hdr, .drawer, .cursor, .ticker, .aperture__ring { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   24. MOTION LAYER
   Everything below is progressive enhancement. With JS off or reduced-motion
   on, the page still reads exactly the same — it just stops moving.
   ========================================================================== */

/* ---- 24.1 Preloader ---------------------------------------------------- */
.pre {
  position: fixed; inset: 0; z-index: 500; background: transparent; color: var(--paper);
  display: grid; place-items: center; gap: 1.5rem;
}
/* the curtain panels are the black; everything else sits on top of them */
.pre__curtain { z-index: 0; }
.pre__inner, .pre__meter, .pre__bar { position: relative; z-index: 1; }
.pre__meter { position: absolute; }
.pre__bar { position: absolute; }
.pre__mark { width: 84px; aspect-ratio: 654/730; }
.pre__mark path { stroke-dasharray: var(--len, 3000); stroke-dashoffset: var(--len, 3000); }
.pre.is-drawing .pre__mark path { animation: draw 1.5s var(--ease-io) forwards; }
.pre.is-drawing .pre__mark path:nth-child(2) { animation-delay: .35s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.pre__meter {
  position: absolute; left: var(--gut); right: var(--gut); bottom: 2.2rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.pre__pct { font-family: var(--ff-display); font-variation-settings: 'wdth' 92, 'wght' 620;
  font-size: clamp(2.5rem, 9vw, 6rem); line-height: .9; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.pre__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: rgba(246,247,245,.16); }
.pre__bar i { display: block; height: 100%; width: 0%; background: var(--paper); transition: width .25s linear; }

/* the curtain wipe: panels lift in sequence */
.pre__curtain { position: absolute; inset: 0; display: flex; pointer-events: none; }
.pre__curtain span { flex: 1; background: var(--ink); transform: translateY(0); }
.pre.is-out { pointer-events: none; background: transparent; }
.pre.is-out .pre__inner { opacity: 0; transition: opacity .3s; }
.pre.is-out .pre__curtain span {
  transform: translateY(-101%);
  transition: transform 1s var(--ease) calc(var(--i) * .07s);
}
body.is-preloading { overflow: hidden; }

/* ---- 24.2 Page transition curtain -------------------------------------- */
.wipe { position: fixed; inset: 0; z-index: 400; display: flex; pointer-events: none; visibility: hidden; }
.wipe span { flex: 1; background: var(--ink); transform: translateY(101%); }
.wipe.is-in { visibility: visible; }
.wipe.is-in span { transform: translateY(0); transition: transform .55s var(--ease) calc(var(--i) * .05s); }

/* ---- 24.3 Split-text reveal -------------------------------------------- */
.sp-line { display: block; overflow: hidden; }
.sp-w { display: inline-block; transform: translateY(110%) rotate(4deg); opacity: 0; }
.is-in .sp-w {
  transform: none; opacity: 1;
  transition: transform .9s var(--ease) calc(var(--i) * 42ms), opacity .7s var(--ease) calc(var(--i) * 42ms);
}

/* ---- 24.4 Magnetic + cursor labels ------------------------------------- */
[data-magnetic] { will-change: transform; }
.cursor__label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--ff-display); font-variation-settings: 'wdth' 80, 'wght' 640;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); opacity: 0; transition: opacity .25s;
}
.cursor.is-label { width: 82px; mix-blend-mode: normal; }
.cursor.is-label svg path { fill: var(--paper); stroke: none; }
.cursor.is-label .cursor__label { opacity: 1; }

/* ---- 24.5 Cursor-following project preview ----------------------------- */
.peek {
  position: fixed; top: 0; left: 0; z-index: 150; width: 300px; aspect-ratio: 4/3;
  pointer-events: none; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.9);
  transition: opacity .4s var(--ease), transform .6s var(--ease);
  overflow: hidden; clip-path: var(--hex);
}
.peek.is-on { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
.peek__img { position: absolute; inset: 0; }
@media (hover: none), (max-width: 1080px) { .peek { display: none; } }

/* ---- 24.6 Pinned horizontal gallery ------------------------------------ */
.pin { position: relative; }
.pin__sticky { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.pin__track { display: flex; gap: clamp(1.5rem, 3vw, 3rem); padding-inline: var(--gut); will-change: transform; }
.pin__card { flex: none; width: clamp(300px, 30vw, 460px); }
.pin__card .wk__frame { aspect-ratio: 4/5; }
.pin__intro { padding-top: clamp(4.5rem, 9vw, 9rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.pin__intro .sechead { align-items: end; }
.pin__rail { position: absolute; left: var(--gut); right: var(--gut); bottom: 2.4rem; height: 2px; background: var(--line); }
.pin__rail i { display: block; height: 100%; width: 100%; background: var(--paper); transform-origin: left; transform: scaleX(.02); }

/* mobile: a plain swipe strip, no pinning */
@media (max-width: 1080px) {
  .pin { height: auto !important; }
  .pin__sticky { position: static; height: auto; display: block; overflow: visible; }
  .pin__track {
    transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 1rem; -webkit-overflow-scrolling: touch;
  }
  .pin__card { scroll-snap-align: center; width: 78vw; }
  .pin__intro { padding-top: clamp(3rem,7vw,5rem); padding-bottom: 2rem; }
  .pin__rail { display: none; }
}

/* ---- 24.7 Velocity-reactive marquee ------------------------------------ */
.ticker__track { will-change: transform; }
.ticker--vel .ticker__track { animation: none; }

/* ---- 24.8 Parallax ----------------------------------------------------- */
[data-speed] { will-change: transform; }

/* ---- 24.9 Recognition accordion ---------------------------------------- */
.rec { border-top: 1px solid var(--line); }
.rec__row { border-bottom: 1px solid var(--line); }
.rec__btn {
  width: 100%; display: grid; grid-template-columns: 1fr auto auto; gap: 1.5rem; align-items: center;
  background: none; border: 0; padding: clamp(1.2rem, 2.4vw, 1.9rem) 0; cursor: pointer; text-align: left;
  color: inherit; transition: padding-left .5s var(--ease);
}
.rec__btn:hover, .rec__btn[aria-expanded="true"] { padding-left: .8rem; }
.rec__name { font-family: var(--ff-display); font-variation-settings: 'wdth' 106, 'wght' 620;
  font-size: clamp(1.2rem, 2.4vw, 2rem); line-height: 1.05; letter-spacing: -.02em; }
.rec__btn[aria-expanded="true"] .rec__name { color: var(--brass); }
.rec__count { color: var(--muted); font-size: var(--step--1); }
.rec__sign { width: 14px; height: 14px; position: relative; flex: none; }
.rec__sign::before, .rec__sign::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: 2px; background: currentColor;
  transition: transform .45s var(--ease);
}
.rec__sign::after { transform: rotate(90deg); }
.rec__btn[aria-expanded="true"] .rec__sign::after { transform: rotate(0deg); }
.rec__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.rec__panel[data-open="true"] { grid-template-rows: 1fr; }
.rec__panel > div { overflow: hidden; }
.rec__item {
  display: grid; grid-template-columns: 1fr 8rem; gap: 1rem; padding: .7rem 0;
  border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--muted);
}
.rec__item:first-child { border-top: 0; }
.rec__panel > div > div { padding-bottom: 1.6rem; }
@media (max-width: 620px) { .rec__item { grid-template-columns: 1fr; gap: .2rem; } }

/* ---- 24.10 Scroll progress mark ---------------------------------------- */
.prog {
  position: fixed; right: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem); z-index: 80;
  width: 46px; aspect-ratio: 654/730; color: var(--paper); mix-blend-mode: difference; opacity: 0; transition: opacity .4s;
}
.prog.is-on { opacity: 1; }
.prog__bg { stroke: currentColor; opacity: .25; }
.prog__fg { stroke: currentColor; stroke-dasharray: var(--len, 2400); stroke-dashoffset: var(--len, 2400); }
@media (max-width: 1080px) { .prog { display: none; } }

/* ---- 24.11 Brass glow that tracks the pointer on dark sections --------- */
.glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.glow i {
  position: absolute; width: 46vmax; aspect-ratio: 1; border-radius: 50%; left: 0; top: 0;
  background: radial-gradient(circle, rgba(255,255,255,.05), transparent 62%);
  transform: translate3d(-50%, -50%, 0); opacity: 0; transition: opacity .6s var(--ease);
}
.glow.is-on i { opacity: 1; }

/* ---- 24.12 Reduced motion overrides ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pre { display: none !important; }
  .sp-w { transform: none !important; opacity: 1 !important; }
  .wipe, .peek, .prog, .glow { display: none !important; }
  .pin { height: auto !important; }
  .pin__sticky { position: static; height: auto; overflow: visible; }
  .pin__track { transform: none !important; overflow-x: auto; }
}

/* ---- 24.13 Responsive grid utilities ----------------------------------- */
.g-auto2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.g-auto4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 1000px) { .g-auto4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .g-auto2 { grid-template-columns: 1fr; } }
@media (max-width: 520px)  { .g-auto4 { grid-template-columns: 1fr; } }

/* ==========================================================================
   25. SIGNAL GREEN — used sparingly, and always to mean "this is live"
   ========================================================================== */
.volt { color: var(--volt); }
.bg-volt { background: var(--volt); color: var(--ink); }

.btn--volt { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--volt::before { background: var(--ink-3); }
.btn--volt:hover { color: var(--paper) !important; }
.on-ink .btn--volt { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.on-ink .btn--volt::before { background: #E4E2DD; }
.on-ink .btn--volt:hover { color: var(--ink) !important; }

/* a small pulsing dot: "booking is open" */
.live { display: inline-flex; align-items: center; gap: .55rem; }
.live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  opacity: .55; box-shadow: 0 0 0 0 currentColor; animation: pulse 2.8s ease-out infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 7px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
@media (prefers-reduced-motion: reduce) { .live::before { animation: none; } }

/* ==========================================================================
   26. FULLSCREEN MENU — one interaction, identical on desktop and phone
   ========================================================================== */
.menu-btn {
  display: inline-flex; align-items: center; gap: .7rem; margin-left: auto;
  background: none; border: 0; cursor: pointer; color: inherit; padding: .5rem 0;
  font-family: var(--ff-display); font-variation-settings: 'wdth' 84, 'wght' 640;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .16em;
}
.menu-btn__bars { position: relative; width: 26px; height: 12px; flex: none; }
.menu-btn__bars i {
  position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
  transition: transform .45s var(--ease), width .45s var(--ease);
}
.menu-btn__bars i:nth-child(1) { top: 0; }
.menu-btn__bars i:nth-child(2) { bottom: 0; width: 68%; }
.menu-btn:hover .menu-btn__bars i:nth-child(2) { width: 100%; }
body.nav-open .menu-btn__bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.nav-open .menu-btn__bars i:nth-child(2) { transform: translateY(-5px) rotate(-45deg); width: 100%; }

/* The menu is a dark panel but is not an .on-ink section, so it never picked
   up the light variant of the accent — the side headers were rendering in
   #2E4A6B on near-black, a contrast ratio under 2:1. Set the accent locally. */
.mega {
  --volt: #FF8A5B;
  position: fixed; inset: 0; z-index: 95; background: var(--ink); color: var(--paper);
  display: grid; grid-template-rows: auto 1fr auto;
  clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease);
  overflow-y: auto; overscroll-behavior: contain;
}
body.nav-open .mega { clip-path: inset(0 0 0 0); }
body.nav-open { overflow: hidden; }
.mega__spacer { height: 78px; }
.mega__body { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: clamp(2rem,5vw,5rem); align-content: center; padding-block: clamp(1.5rem,4vw,3rem); }

.mega__list { display: grid; gap: clamp(.1rem, .5vw, .4rem); }
.mega__item {
  display: grid; grid-template-columns: 3.2rem 1fr auto; gap: 1rem; align-items: baseline;
  padding: clamp(.5rem,1.2vw,.9rem) 0; border-bottom: 1px solid rgba(245,244,241,.14);
  opacity: 0; transform: translateY(20px);
}
body.nav-open .mega__item {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease) calc(.2s + var(--i) * .055s),
              transform .7s var(--ease) calc(.2s + var(--i) * .055s),
              padding-left .45s var(--ease), color .3s;
}
.mega__item:hover { padding-left: .9rem; }
.mega__n { font-family: var(--ff-display); font-variation-settings: 'wdth' 78, 'wght' 500; font-size: .72rem; color: var(--graphite-2); letter-spacing: .06em; }
.mega__t { font-family: var(--ff-display); font-variation-settings: 'wdth' 116, 'wght' 660; font-size: clamp(1.7rem, 5.2vw, 3.6rem); line-height: .96; letter-spacing: -.03em; }
.mega__item:hover .mega__t { color: var(--volt); }
.mega__d { font-size: var(--step--1); color: var(--graphite-2); text-align: right; max-width: 26ch; }

.mega__side { align-self: center; display: grid; gap: 1.8rem; }
.mega__side h4 { font-family: var(--ff-display); font-variation-settings: 'wdth' 84, 'wght' 620; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--volt); margin-bottom: .6rem; }
.mega__side p, .mega__side a { color: var(--graphite-2); font-size: var(--step--1); display: block; }
.mega__side a:hover { color: var(--paper); }
.mega__foot { border-top: 1px solid rgba(245,244,241,.14); padding-block: 1.2rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }

@media (max-width: 900px) {
  .mega__body { grid-template-columns: 1fr; align-content: start; }
  .mega__item { grid-template-columns: 2.2rem 1fr; }
  .mega__d { display: none; }
  .mega__side { display: none; }
}
@media (max-height: 640px) { .mega__body { align-content: start; } }

/* ==========================================================================
   27. BOOKING — calendar, slot picker, detail form
   ========================================================================== */
.bk { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: clamp(1.5rem,3.5vw,3.5rem); align-items: start; }
@media (max-width: 980px) { .bk { grid-template-columns: 1fr; } }

.cal { border: 1px solid var(--line); }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.cal__month { font-family: var(--ff-display); font-variation-settings: 'wdth' 100, 'wght' 640; font-size: var(--step-1); letter-spacing: -.01em; }
.cal__nav { display: flex; gap: .4rem; }
.cal__nav button {
  width: 38px; height: 38px; border: 1px solid var(--line); background: none; cursor: pointer;
  display: grid; place-items: center; color: inherit; transition: background .3s, color .3s, border-color .3s;
}
.cal__nav button:hover:not(:disabled) { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.cal__nav button:disabled { opacity: .3; cursor: not-allowed; }

.cal__dow { display: grid; grid-template-columns: repeat(7,1fr); border-bottom: 1px solid var(--line); }
.cal__dow span { padding: .6rem .2rem; text-align: center; font-family: var(--ff-display); font-variation-settings: 'wdth' 80, 'wght' 600; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cal__grid { display: grid; grid-template-columns: repeat(7,1fr); }
.cal__day {
  aspect-ratio: 1; border: 0; background: none; cursor: pointer; color: inherit;
  font-family: var(--ff-display); font-variation-settings: 'wdth' 92, 'wght' 560;
  font-size: var(--step-0); font-variant-numeric: tabular-nums;
  display: grid; place-items: center; position: relative;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background .25s, color .25s;
}
.cal__day:nth-child(7n) { border-right: 0; }
.cal__day[disabled] { color: color-mix(in srgb, currentColor 26%, transparent); cursor: not-allowed; }
.cal__day[data-open="1"]::after {
  content: ''; position: absolute; bottom: 18%; width: 5px; height: 5px; border-radius: 50%; background: var(--volt);
}
.cal__day:hover:not([disabled]) { background: color-mix(in srgb, currentColor 10%, transparent); }
.cal__day[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.cal__day[aria-pressed="true"]::after { background: var(--volt); }
.cal__day--pad { visibility: hidden; }

.slots { display: grid; gap: 1.1rem; }
.slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; }
.slot {
  border: 1px solid var(--line); background: none; cursor: pointer; color: inherit;
  padding: .8rem .4rem; font-family: var(--ff-display); font-variation-settings: 'wdth' 90, 'wght' 580;
  font-size: .84rem; font-variant-numeric: tabular-nums; letter-spacing: .02em;
  transition: background .25s, color .25s, border-color .25s;
}
.slot:hover:not([disabled]) { border-color: var(--fg); }
.slot[aria-pressed="true"] { background: var(--volt); border-color: var(--volt); color: var(--ink); }
.slot[disabled] { opacity: .3; cursor: not-allowed; text-decoration: line-through; }

.bk__panel { border: 1px solid var(--line); padding: clamp(1.1rem,2.4vw,1.8rem); }
.bk__summary { display: grid; gap: .35rem; padding-bottom: 1.1rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.bk__summary b { font-family: var(--ff-display); font-variation-settings: 'wdth' 104, 'wght' 640; font-size: var(--step-1); font-weight: 400; letter-spacing: -.01em; }
.bk__empty { color: var(--muted); font-size: var(--step--1); }
.bk__mode { display: flex; gap: .5rem; flex-wrap: wrap; }
.bk__step { display: flex; align-items: center; gap: .6rem; font-family: var(--ff-display); font-variation-settings: 'wdth' 80, 'wght' 620; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bk__step i { width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .58rem; }
.bk__step.is-done { color: var(--volt); }
.bk__step.is-done i { background: var(--volt); border-color: var(--volt); color: var(--ink); }
.bk__steps { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.4rem; }

/* ==========================================================================
   28. FOOTER CTA + misc layout added with the new architecture
   ========================================================================== */
.ftr__cta {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.5rem 3rem;
  align-items: end; padding-bottom: clamp(2.5rem,5vw,4rem);
}
@media (max-width: 820px) { .ftr__cta { grid-template-columns: 1fr; } .ftr__cta .btn { justify-self: start; } }
.ftr__top { grid-template-columns: repeat(15, 1fr); }
.ftr__col { grid-column: span 3; }
.ftr__col:first-child { grid-column: span 3; }
@media (max-width: 1100px) { .ftr__top { grid-template-columns: repeat(6,1fr); } .ftr__col, .ftr__col:first-child { grid-column: span 3; } }
@media (max-width: 620px)  { .ftr__top { grid-template-columns: repeat(2,1fr); } .ftr__col, .ftr__col:first-child { grid-column: span 2; } }

/* header needs room for the CTA + menu button */
.hdr__in { gap: 0; }
@media (max-width: 760px) {
  /* on a phone the wordmark and a full CTA won't both fit — keep the mark,
     drop the word, and shorten the button */
  .hdr .brand__wm { display: none; }
  .hdr .btn { padding: .68rem .9rem; font-size: .66rem; white-space: nowrap; }
  .hdr .btn .btn__dot { display: none; }
  .menu-btn__label { display: none; }
  .menu-btn { margin-left: .9rem !important; }
  /* the open menu still shows the full wordmark, there's room there */
  body.nav-open .hdr .brand__wm { display: inline; }
  body.nav-open .hdr .btn { display: none; }
}

/* numbered service / industry blocks */
.blk { border-top: 2px solid currentColor; padding-top: 1.3rem; }
.blk__n { font-family: var(--ff-display); font-variation-settings: 'wdth' 78, 'wght' 520; font-size: .74rem; letter-spacing: .1em; color: var(--muted); }
.blk h3 { font-size: var(--step-2); margin-top: .5rem; }
.blk p { color: var(--muted); margin-top: .7rem; max-width: 46ch; }
.blk ul { margin-top: 1.1rem; display: grid; gap: .35rem; }
.blk li { font-size: var(--step--1); color: var(--muted); padding-left: 1.1rem; position: relative; }
.blk li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--volt); }

/* stat strip */
.strip { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); }
.strip > div { padding: clamp(1.2rem,2.4vw,2rem); border-right: 1px solid var(--line); }
.strip > div:last-child { border-right: 0; }
@media (max-width: 760px) { .strip { grid-template-columns: 1fr; } .strip > div { border-right: 0; border-bottom: 1px solid var(--line); } .strip > div:last-child { border-bottom: 0; } }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: clamp(1rem,2.2vw,1.6rem) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  font-family: var(--ff-display); font-variation-settings: 'wdth' 104, 'wght' 620;
  font-size: clamp(1.05rem,2.1vw,1.5rem); letter-spacing: -.015em; line-height: 1.2;
  transition: padding-left .4s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { padding-left: .7rem; }
.faq summary::after { content: '+'; font-size: 1.4em; line-height: 1; color: var(--volt); flex: none; }
.faq details[open] summary::after { content: '\2212'; }
.faq details > div { padding-bottom: 1.6rem; color: var(--muted); max-width: 62ch; }

/* menu refinements found in review */
.mega .live { padding-left: 0; }
.mega__side .live::before { flex: none; }
.mega__item:last-child .mega__t { color: var(--volt); }
.mega__item:last-child:hover .mega__t { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
/* the close label needs room so the cursor hex doesn't sit on top of it */
body.nav-open .menu-btn { position: relative; z-index: 96; }

/* ==========================================================================
   29. TECHNICAL LAYER — spec readouts, annotation, decode, comparison
   The visual language is a shop drawing crossed with an instrument panel.
   ========================================================================== */

/* ---- 29.1 Mono spec type -------------------------------------------- */
.mono {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ---- 29.2 HUD readout ------------------------------------------------ */
.hud {
  border: 1px solid var(--line); padding: .8rem .9rem; display: grid; gap: .45rem;
  background: color-mix(in srgb, var(--paper) 4%, transparent);
  backdrop-filter: blur(6px);
}
.hud__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.hud__k { color: var(--muted); }
.hud__v { color: var(--volt); }
.hud__bar { height: 2px; background: rgba(245,244,241,.16); position: relative; overflow: hidden; }
.hud__bar i { position: absolute; inset: 0 auto 0 0; background: var(--volt); width: 0%; transition: width 1.4s var(--ease); }

/* ---- 29.3 Corner ticks: anything can be "measured" ------------------- */
.ticked { position: relative; }
.ticked::before, .ticked::after {
  content: ''; position: absolute; width: 9px; height: 9px; pointer-events: none;
  border-color: var(--volt); border-style: solid; border-width: 0;
}
.ticked::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.ticked::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* ---- 29.4 Dimension line -------------------------------------------- */
.dim {
  display: flex; align-items: center; gap: .6rem; color: var(--muted);
}
.dim::before, .dim::after { content: ''; height: 1px; background: currentColor; flex: 1; opacity: .45; }
.dim span { flex: none; }

/* ---- 29.5 Decode / scramble ----------------------------------------- */
[data-decode] { font-variant-ligatures: none; }
[data-decode].is-scrambling { color: var(--volt); }

/* ---- 29.6 Before / after ---------------------------------------------
   Lives inside a monitor frame, with the two switches floating over the
   artwork on the left and right edges. Putting them below the frame meant
   you couldn't see the change you'd just made without scrolling. --------- */
.cmp { position: relative; }
.cmp__stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
@media (max-width: 760px) { .cmp__stage { aspect-ratio: 3 / 4; } }

.cmp__side {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease), transform .8s var(--ease), filter .6s var(--ease);
  transform: scale(1.04); filter: saturate(.6);
}
.cmp__side.is-on { opacity: 1; transform: none; filter: none; pointer-events: auto; }

/* floating edge switches */
.cmp__tab {
  position: absolute; top: 50%; z-index: 6; transform: translateY(-50%);
  background: rgba(10,10,11,.82); color: #fff; border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(8px); cursor: pointer;
  padding: 1.1rem .7rem; font-family: ui-monospace, monospace; font-size: .64rem;
  letter-spacing: .22em; text-transform: uppercase; writing-mode: vertical-rl;
  transition: background .3s, color .3s, border-color .3s, padding .3s;
}
.cmp__tab--l { left: 0; }
.cmp__tab--r { right: 0; transform: translateY(-50%) rotate(180deg); }
.cmp__tab:hover { padding-inline: 1rem; }
.cmp__tab[aria-pressed="true"] { background: var(--volt); color: #0A0A0B; border-color: var(--volt); }

/* a hint that reads as a caption, not a control */
.cmp__note {
  position: absolute; left: 50%; bottom: .9rem; transform: translateX(-50%); z-index: 6;
  background: rgba(10,10,11,.8); color: #fff; border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px); padding: .4rem .9rem;
  font-family: ui-monospace, monospace; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .cmp__tab { writing-mode: horizontal-tb; top: auto; bottom: .8rem; transform: none; padding: .55rem .8rem; }
  .cmp__tab--r { right: .8rem; transform: none; }
  .cmp__tab--l { left: .8rem; }
  .cmp__note { display: none; }
}

/* ---------- the BEFORE: a real 2004 contractor site ---------- */
.old { position: absolute; inset: 0; background: #CFCFC4; overflow: hidden;
  font-family: 'Times New Roman', Times, serif; color: #000; }
.old__chrome { background: linear-gradient(#EDEDED,#D6D6D6); border-bottom: 1px solid #A9A9A9; padding: 4px 8px; display: flex; gap: 6px; align-items: center; }
.old__dot { width: 8px; height: 8px; border-radius: 50%; background: #B6B6B6; }
.old__url { flex: 1; background: #fff; border: 1px inset #9A9A9A; font-family: Arial, sans-serif; font-size: 8px; color: #444; padding: 1px 5px; }
.old__page { position: absolute; inset: 22px 0 0; background: #CFCFC4; padding: 2% 3.5%; text-align: center; overflow: hidden; display: flex; flex-direction: column; }
.old__main { display: flex; gap: 3%; text-align: left; flex: 1; }
.old__side { width: 22%; flex: none; border: 1px ridge #A8A8A0; background: #DCDCD2; padding: 3%; }
.old__side h5 { font-size: clamp(6px,1vw,11px); border-bottom: 1px solid #A8A8A0; padding-bottom: 3%; margin-bottom: 4%; }
.old__side p { font-family: Arial, sans-serif; font-size: clamp(4.5px,.7vw,8px); color: #00309C; text-decoration: underline; margin-bottom: 3.5%; }
.old__content { flex: 1; text-align: center; }
.old__band { background: #1F3A6E; color: #fff; padding: 1.6% 2%; margin-bottom: 1.6%; }
.old__band h4 { font-size: clamp(11px, 2vw, 21px); font-weight: 700; letter-spacing: 0; }
.old__band p { font-family: Arial, sans-serif; font-size: clamp(5px,.85vw,9px); color: #C8D4EA; margin-top: 2px; }
.old__nav { font-family: Arial, sans-serif; font-size: clamp(5px,.8vw,9px); color: #00309C; margin-bottom: 2%; }
.old__nav span { text-decoration: underline; margin: 0 .35em; }
.old__welcome { font-size: clamp(8px,1.5vw,15px); font-weight: 700; margin-bottom: 1.4%; }
.old__copy { font-family: Arial, sans-serif; font-size: clamp(5px,.85vw,9.5px); line-height: 1.5; margin: 0 auto 3%; color: #22252B; }
.old__row { display: flex; gap: 2%; justify-content: center; margin-bottom: 2%; }
.old__thumb { width: 30%; aspect-ratio: 4/3; border: 2px ridge #9A9A9A; background: #9EA3A8; display: grid; place-items: center; font-family: Arial, sans-serif; font-size: clamp(4px,.6vw,7px); color: #3A3D42; }
.old__btn { display: inline-block; font-family: Arial, sans-serif; font-size: clamp(5px,.8vw,9px);
  background: linear-gradient(#FDFDFD,#C6C6C6); border: 2px outset #EEE; padding: .3em 1em; color: #000; }
.old__hr { border: 0; border-top: 1px solid #9A9A9A; margin: 2% 0; }
.old__foot { font-family: Arial, sans-serif; font-size: clamp(4px,.62vw,7px); color: #4A4D52; margin-top: auto; }
.old__blink { color: #B00; font-weight: 700; }

/* ---------- the AFTER ---------- */
.new { position: absolute; inset: 0; background: #0A0A0B; color: #fff; overflow: hidden; }
.new__bg { position: absolute; inset: 0; }
.new__shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,10,11,.95) 0 38%, rgba(10,10,11,.55) 66%, rgba(10,10,11,.2)); }
.new__nav { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: .9em; padding: 3% 4%; z-index: 3;
  font-family: var(--ff-display); font-size: clamp(5px,.72vw,8.5px); letter-spacing: .12em; text-transform: uppercase; }
.new__nav b { font-variation-settings: 'wdth' 108,'wght' 700; font-weight: 400; letter-spacing: .16em; }
.new__nav .sp { margin-left: auto; }
.new__nav .cta { background: var(--volt); color: #0A0A0B; padding: .4em .9em; font-variation-settings: 'wdth' 86,'wght' 640; }
.new__body { position: absolute; left: 4%; bottom: 9%; z-index: 3; max-width: 64%; }
.new__k { font-family: ui-monospace, monospace; font-size: clamp(4.5px,.62vw,7.5px); letter-spacing: .22em; text-transform: uppercase; color: var(--volt); margin-bottom: .8em; }
.new__h { font-family: var(--ff-display); font-variation-settings: 'wdth' 122,'wght' 690; font-size: clamp(19px,4.2vw,56px); line-height: .86; letter-spacing: -.04em; text-transform: uppercase; }
.new__p { font-family: var(--ff-body); font-size: clamp(6px,.88vw,10.5px); line-height: 1.5; color: #B9BABD; max-width: 74%; margin-top: .9em; }
.new__btn { display: inline-block; margin-top: 1.1em; background: var(--volt); color: #0A0A0B; padding: .6em 1.3em;
  font-family: var(--ff-display); font-variation-settings: 'wdth' 86,'wght' 650; font-size: clamp(5px,.72vw,8.5px); letter-spacing: .16em; text-transform: uppercase; }
.new__spec { position: absolute; right: 4%; top: 22%; z-index: 3; display: grid; gap: .5em; width: 26%; }
.new__spec div { border: 1px solid rgba(255,255,255,.22); padding: .5em .6em; background: rgba(10,10,11,.5); backdrop-filter: blur(4px);
  font-family: ui-monospace, monospace; font-size: clamp(4px,.58vw,7px); letter-spacing: .1em; text-transform: uppercase;
  display: flex; justify-content: space-between; gap: .6em; }
.new__spec b { color: var(--volt); font-weight: 400; }

/* ---- 29.7 Scanning grid backdrop ------------------------------------ */
.scan-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.scan-bg::before {
  content: ''; position: absolute; inset: -20%;
  background-image:
    repeating-linear-gradient(90deg, rgba(22,22,26,.045) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg,  rgba(22,22,26,.045) 0 1px, transparent 1px 72px);
}
.scan-bg::after {
  content: ''; position: absolute; left: 0; right: 0; height: 140px;
  background: none;
  animation: sweep 7s linear infinite;
}
@keyframes sweep { 0% { top: -140px; } 100% { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .scan-bg::after { animation: none; opacity: 0; } }

/* ---- 29.8 Capability matrix ----------------------------------------- */
.matrix { border: 1px solid var(--line); overflow-x: auto; }
.matrix table { width: 100%; border-collapse: collapse; min-width: 620px; }
.matrix th, .matrix td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.matrix th { color: var(--muted); font-weight: 400; white-space: nowrap; }
.matrix td:first-child { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 620; font-size: var(--step-0); }
.matrix tr:last-child td { border-bottom: 0; }
.matrix .yes { color: var(--volt); }
.matrix tr:hover td { background: color-mix(in srgb, currentColor 5%, transparent); }

/* ==========================================================================
   30. DEVICE SHOWCASE
   The screens are built in CSS and rendered live, not photographed. That means
   they stay sharp at any resolution, weigh nothing, and can be updated by
   editing markup instead of re-shooting a mockup.
   ========================================================================== */

.stage {
  position: relative; perspective: 2200px; padding-block: clamp(1.5rem, 4vw, 3.5rem);
}
.stage__floor {
  position: absolute; left: 50%; bottom: 8%; width: min(760px, 82%); height: 40px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,.5), transparent 70%);
  filter: blur(14px); pointer-events: none;
}

/* ---- monitor ---- */
.mon { position: relative; width: 100%; max-width: 940px; margin-inline: auto; transform-style: preserve-3d; }
.mon--tilt { transform: rotateX(6deg) rotateY(-9deg); transition: transform 1.1s var(--ease); }
.stage:hover .mon--tilt { transform: rotateX(3deg) rotateY(-4deg); }
@media (prefers-reduced-motion: reduce) { .mon--tilt, .stage:hover .mon--tilt { transform: none; } }

.mon__bezel {
  background: linear-gradient(160deg, #3A3C40, #17181A 40%, #232427);
  border-radius: 12px; padding: 12px 12px 14px;
  box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.09) inset;
}
.mon__screen {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px;
  background: var(--ink);
}
.mon__glare {
  position: absolute; inset: 0; pointer-events: none; border-radius: 4px;
  background: linear-gradient(112deg, rgba(255,255,255,.09) 0 18%, transparent 42%);
  mix-blend-mode: screen;
}
.mon__chin { text-align: center; padding-top: 7px; }
.mon__chin i { display: inline-block; width: 34px; height: 3px; background: #46484D; border-radius: 2px; }
.mon__stand {
  width: 128px; height: 62px; margin: 0 auto;
  background: linear-gradient(180deg, #303236, #1D1E21);
  clip-path: polygon(34% 0, 66% 0, 76% 100%, 24% 100%);
}
.mon__base {
  width: 260px; height: 12px; margin: 0 auto; border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #34363A, #202124);
  box-shadow: 0 18px 30px rgba(0,0,0,.5);
}

/* ---- phone ---- */
.phone { width: 190px; flex: none; }
.phone__body {
  background: linear-gradient(160deg, #3A3C40, #151618);
  border-radius: 26px; padding: 7px; box-shadow: 0 20px 44px rgba(0,0,0,.55);
}
.phone__screen { position: relative; aspect-ratio: 9/19.5; overflow: hidden; border-radius: 20px; background: var(--ink); }
.phone__notch { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 54px; height: 15px; background: #0A0A0B; border-radius: 9px; z-index: 3; }

/* ---- the miniature site rendered inside a screen ---- */
.mini { position: absolute; inset: 0; overflow: hidden; font-family: var(--ff-display); color: #fff; }
.mini * { box-sizing: border-box; }
.mini__nav { display: flex; align-items: center; gap: .5rem; padding: 3.2% 4%; font-size: clamp(5px, .72vw, 8px); letter-spacing: .06em; text-transform: uppercase; position: relative; z-index: 2; }
.mini__nav b { font-variation-settings: 'wdth' 100,'wght' 700; font-weight: 400; letter-spacing: .1em; }
.mini__nav span { opacity: .72; }
.mini__nav .spacer { margin-left: auto; }
.mini__nav .cta { border: 1px solid currentColor; padding: .25em .6em; }

.mini__hero { position: absolute; inset: 0; }
.mini__hero img, .mini__hero .fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mini__shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,10,11,.9) 0 34%, rgba(10,10,11,.5) 62%, rgba(10,10,11,.3)); }
.mini__body { position: absolute; left: 4%; right: 4%; bottom: 6%; z-index: 2; }
.mini__h { font-variation-settings: 'wdth' 112,'wght' 680; font-size: clamp(13px, 2.7vw, 34px); line-height: .96; letter-spacing: -.03em; margin-bottom: .35em; }
.mini__p { font-family: var(--ff-body); font-size: clamp(6px, .85vw, 10px); line-height: 1.45; opacity: .8; max-width: 46%; }
.mini__btn { display: inline-block; margin-top: .7em; padding: .5em 1em; font-size: clamp(5px,.7vw,8px); letter-spacing: .12em; text-transform: uppercase; font-variation-settings: 'wdth' 86,'wght' 640; }
.mini__strip { position: absolute; left: 4%; right: 4%; bottom: 6%; display: grid; grid-template-columns: repeat(4,1fr); gap: 2%; z-index: 2; }
.mini__tile { aspect-ratio: 4/3; position: relative; overflow: hidden; }
.mini__tile span { position: absolute; left: 6%; bottom: 6%; font-size: clamp(4px,.6vw,7px); letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.mini__tile { box-shadow: 0 0 0 1px rgba(255,255,255,.13) inset; }

/* swatch fills that read as metal without needing photography */
.f-corten { background: linear-gradient(150deg,#8A4A28,#5E3018 60%,#2E1809); }
.f-galv   { background: linear-gradient(150deg,#C9CDD2,#8E959C 45%,#5C6167); }
.f-zinc   { background: linear-gradient(160deg,#7C838A,#454B51); }
.f-black  { background: linear-gradient(150deg,#2A2C30,#0C0D0F); }
.f-perf   { background:
  radial-gradient(circle at 3px 3px, rgba(10,10,11,.85) 1.6px, transparent 1.7px) 0 0/9px 9px,
  linear-gradient(150deg,#B9BEC4,#71777D); }
.f-rib    { background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 7px),
  linear-gradient(150deg,#9AA0A6,#4E5359); }
.f-seam   { background:
  repeating-linear-gradient(78deg, rgba(10,10,11,.5) 0 2px, transparent 2px 16px),
  linear-gradient(160deg,#AEB4BA,#6A7076); }
.f-mesh   { background:
  repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 1px, transparent 1px 6px),
  repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 1px, transparent 1px 6px),
  linear-gradient(150deg,#565C62,#26292D); }

/* ---- caption row under a device ---- */
.shot { display: grid; gap: 1rem; }
.shot__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: baseline; }
.shot__meta h3 { font-size: var(--step-1); }
.shot__meta .mono { color: var(--muted); }

/* ---- pairing a monitor with a phone ---- */
.rig { display: flex; align-items: flex-end; gap: clamp(1rem,2.5vw,2.5rem); justify-content: center; }
.rig .mon { max-width: 720px; }
@media (max-width: 860px) {
  .rig { flex-direction: column; align-items: center; }
  .rig .phone { width: 150px; }
  .mon--tilt { transform: none; }
}

/* ==========================================================================
   31. SCREENS — a website shown as a website, not as a photo of a monitor.
   Thin browser chrome, full-bleed content, nothing skeuomorphic.
   ========================================================================== */
.scr { position: relative; border: 1px solid var(--line); background: #0A0A0B; overflow: hidden; }
.scr__bar {
  display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem;
  background: #141518; border-bottom: 1px solid rgba(255,255,255,.1); position: relative; z-index: 5;
}
.scr__dots { display: flex; gap: 5px; flex: none; }
.scr__dots i { width: 8px; height: 8px; border-radius: 50%; background: #34363B; }
.scr__url {
  flex: 1; background: #0C0D0F; border: 1px solid rgba(255,255,255,.09); border-radius: 4px;
  padding: .22rem .6rem; font-family: ui-monospace, monospace; font-size: .6rem;
  color: #7E8288; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scr__url b { color: #C6C8CC; font-weight: 400; }
.scr__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
@media (max-width: 700px) { .scr__view { aspect-ratio: 4 / 3; } }
.scr--tall .scr__view { aspect-ratio: 16 / 13; }

/* switch tabs floating over the view */
.scr__tabs { position: absolute; z-index: 8; top: 50%; transform: translateY(-50%); }
.scr__tab {
  display: block; background: rgba(10,10,11,.84); color: #fff; border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px); cursor: pointer; padding: 1rem .62rem;
  font-family: ui-monospace, monospace; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  writing-mode: vertical-rl; transition: background .28s, color .28s, border-color .28s, padding .28s;
}
.scr__tabs--l { left: 0; } .scr__tabs--l .scr__tab { border-left: 0; }
.scr__tabs--r { right: 0; } .scr__tabs--r .scr__tab { border-right: 0; transform: rotate(180deg); }
.scr__tab:hover { padding-inline: .95rem; }
.scr__tab[aria-pressed="true"] { background: var(--volt); color: #0A0A0B; border-color: var(--volt); }
@media (max-width: 560px) {
  .scr__tabs { top: auto; bottom: .7rem; transform: none; }
  .scr__tab { writing-mode: horizontal-tb; padding: .5rem .8rem; }
  .scr__tabs--l { left: .7rem; } .scr__tabs--r { right: .7rem; }
  .scr__tabs--r .scr__tab { transform: none; }
}

.scr__pane { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease), transform .7s var(--ease); transform: scale(1.03); }
.scr__pane.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* ---- generic site skin used by the fictional homepages ---- */
.site { position: absolute; inset: 0; overflow: hidden; font-family: var(--ff-display); color: #fff; }
.site__bg { position: absolute; inset: 0; }
.site__veil { position: absolute; inset: 0; }
.site__nav { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: .85em;
  padding: 3.2% 4%; font-size: clamp(5px,.7vw,8.5px); letter-spacing: .13em; text-transform: uppercase; }
.site__nav b { font-variation-settings: 'wdth' 108,'wght' 700; font-weight: 400; letter-spacing: .17em; }
.site__nav .sp { margin-left: auto; }
.site__nav .cta { padding: .42em .95em; font-variation-settings: 'wdth' 86,'wght' 640; }
.site__mid { position: absolute; left: 4%; bottom: 9%; z-index: 3; max-width: 66%; }
.site__k { font-family: ui-monospace, monospace; font-size: clamp(4.5px,.6vw,7.5px); letter-spacing: .22em; text-transform: uppercase; margin-bottom: .9em; }
.site__h { font-variation-settings: 'wdth' 120,'wght' 690; font-size: clamp(16px,3.6vw,46px); line-height: .88; letter-spacing: -.038em; }
.site__h--caps { text-transform: uppercase; }
.site__p { font-family: var(--ff-body); font-size: clamp(6px,.85vw,10px); line-height: 1.5; opacity: .78; max-width: 78%; margin-top: .9em; }
.site__btn { display: inline-block; margin-top: 1em; padding: .58em 1.25em; font-size: clamp(5px,.7vw,8.5px);
  letter-spacing: .16em; text-transform: uppercase; font-variation-settings: 'wdth' 86,'wght' 650; }
.site__panel { position: absolute; right: 4%; top: 20%; z-index: 3; width: 27%; display: grid; gap: .45em; }
.site__panel div { border: 1px solid rgba(255,255,255,.2); background: rgba(10,10,11,.5); backdrop-filter: blur(4px);
  padding: .5em .62em; display: flex; justify-content: space-between; gap: .5em;
  font-family: ui-monospace, monospace; font-size: clamp(4px,.56vw,6.8px); letter-spacing: .1em; text-transform: uppercase; }

/* ---- the "before" skin ---- */
.dated { position: absolute; inset: 0; background: #D3D3C8; color: #111; font-family: 'Times New Roman', Times, serif; overflow: hidden; display: flex; flex-direction: column; }
.dated__band { color: #fff; padding: 2% 3%; text-align: center; }
.dated__band h4 { font-size: clamp(10px,1.9vw,20px); font-weight: 700; }
.dated__band p { font-family: Arial, sans-serif; font-size: clamp(4.5px,.75vw,8px); opacity: .8; margin-top: 2px; }
.dated__nav { font-family: Arial, sans-serif; font-size: clamp(4.5px,.72vw,8px); color: #00309C; text-align: center; padding: 1.4% 0; }
.dated__nav span { text-decoration: underline; margin: 0 .3em; }
.dated__wrap { display: flex; gap: 2.5%; padding: 0 3% 3%; flex: 1; min-height: 0; }
.dated__side { width: 23%; flex: none; border: 1px ridge #ADADA2; background: #DEDED4; padding: 2.5%; align-self: stretch; }
.dated__side h5 { font-size: clamp(5.5px,.9vw,9.5px); border-bottom: 1px solid #ADADA2; padding-bottom: 4%; margin-bottom: 5%; }
.dated__side p { font-family: Arial, sans-serif; font-size: clamp(4px,.62vw,7px); color: #00309C; text-decoration: underline; margin-bottom: 4%; }
.dated__main { flex: 1; text-align: center; display: flex; flex-direction: column; }
.dated__main .dated__thumbs { margin-top: auto; }
.dated__main h6 { font-size: clamp(7px,1.3vw,13px); font-weight: 700; margin-bottom: 2%; }
.dated__main p { font-family: Arial, sans-serif; font-size: clamp(4.5px,.74vw,8.4px); line-height: 1.5; color: #22252B; margin-bottom: 3%; }
.dated__thumbs { display: flex; gap: 3%; justify-content: center; margin-bottom: 3%; }
.dated__thumbs div { width: 31%; aspect-ratio: 4/3; border: 2px ridge #9A9A9A; background: #A2A7AC; display: grid; place-items: center;
  font-family: Arial, sans-serif; font-size: clamp(3.6px,.55vw,6.4px); color: #3A3D42; }
.dated__btn { display: inline-block; margin-top: 3%; align-self: center; font-family: Arial, sans-serif; font-size: clamp(4.5px,.72vw,8px);
  background: linear-gradient(#FDFDFD,#C6C6C6); border: 2px outset #EEE; padding: .32em 1em; color: #000; }
.dated__foot { font-family: Arial, sans-serif; font-size: clamp(3.6px,.56vw,6.4px); color: #4A4D52; text-align: center;
  border-top: 1px solid #A9A9A0; padding: 1.4% 3%; margin-top: auto; }
.dated__hot { color: #B00; font-weight: 700; }

/* ---- project card wrapper ---- */
.proj { display: grid; gap: 1.1rem; }
.proj__head { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: baseline; }
.proj__head h3 { font-size: var(--step-1); }
.proj__head .mono { color: var(--muted); }
.proj__head .tag { color: var(--volt); margin-left: auto; }
.proj__note { color: var(--muted); font-size: var(--step--1); max-width: 66ch; }
.projs { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }

/* ==========================================================================
   32. SYSTEM PANELS — working-looking UI for the tools we build
   ========================================================================== */
/* minmax(0,1fr) not 1fr: a plain fr track is minmax(auto,1fr), so the widest
   panel (the twelve-bar chart) was setting the column width and pushing the
   page sideways on a phone */
.sys { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1.5rem,3vw,2.5rem); }
@media (max-width: 900px) { .sys { grid-template-columns: minmax(0,1fr); } }
.sysblk { min-width: 0; }

.ui { border: 1px solid var(--line); background: #0C0D0F; color: #E9EAEC; overflow: hidden; font-family: var(--ff-display); }
.ui__top { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-bottom: 1px solid rgba(255,255,255,.1); background: #141518; }
.ui__top .mono { font-size: .58rem; color: #8B8F95; letter-spacing: .14em; }
.ui__top .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--volt); flex: none; }
.ui__body { padding: .9rem; display: grid; gap: .55rem; font-size: .72rem; }
.ui__row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .45rem .6rem; border: 1px solid rgba(255,255,255,.1); }
.ui__row b { font-weight: 400; font-variation-settings: 'wdth' 96,'wght' 620; }
.ui__row .v { font-family: ui-monospace, monospace; font-size: .68rem; color: var(--volt); }
.ui__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ui__cell { aspect-ratio: 1; display: grid; place-items: center; font-family: ui-monospace, monospace; font-size: .58rem;
  border: 1px solid rgba(255,255,255,.09); color: #9A9EA4; }
.ui__cell.on { border-color: var(--volt); color: var(--volt); }
.ui__cell.sel { background: var(--volt); color: #0A0A0B; border-color: var(--volt); }
.ui__cell.off { opacity: .25; }
.ui__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ui__chip { border: 1px solid rgba(255,255,255,.16); padding: .28rem .55rem; font-family: ui-monospace, monospace; font-size: .58rem; letter-spacing: .08em; color: #A6AAB0; }
.ui__chip.on { background: var(--volt); color: #0A0A0B; border-color: var(--volt); }
.ui__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid rgba(255,255,255,.16); padding-top: .6rem; margin-top: .2rem; }
.ui__total b { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 660; font-size: 1.5rem; font-weight: 400; color: var(--volt); font-variant-numeric: tabular-nums; }
.ui__bars { display: grid; gap: .3rem; }
.ui__bar { height: 5px; background: rgba(255,255,255,.1); position: relative; }
.ui__bar i { position: absolute; inset: 0 auto 0 0; background: var(--volt); }
.ui__flow { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-family: ui-monospace, monospace; font-size: .58rem; letter-spacing: .08em; }
.ui__node { border: 1px solid rgba(255,255,255,.2); padding: .4rem .6rem; color: #C6C8CC; }
.ui__node.acc { border-color: var(--volt); color: var(--volt); }
.ui__arrow { color: var(--volt); }
.ui__track { display: grid; gap: .5rem; }
.ui__step { display: grid; grid-template-columns: 14px 1fr auto; gap: .6rem; align-items: center; font-size: .68rem; }
.ui__step i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); }
.ui__step.done i { background: var(--volt); border-color: var(--volt); }
.ui__step.now i { border-color: var(--volt); box-shadow: 0 0 0 3px rgba(198,248,0,.18); }
.ui__step span.t { font-family: ui-monospace, monospace; font-size: .58rem; color: #8B8F95; }
.ui__cube { aspect-ratio: 16/10; display: grid; place-items: center; position: relative; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 30%, #1E2024, #0A0A0B); }
.ui__cube svg { width: 62%; animation: turn 14s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ui__cube svg { animation: none; } }

.sysblk h3 { font-size: var(--step-2); margin-top: .6rem; }
.sysblk p { color: var(--muted); margin-top: .6rem; max-width: 46ch; }
.sysblk ul { margin-top: .9rem; display: grid; gap: .3rem; }
.sysblk li { font-size: var(--step--1); color: var(--muted); padding-left: 1.05rem; position: relative; }
.sysblk li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--volt); }

/* ==========================================================================
   33. PANEL VIEWER
   ========================================================================== */
/* Dark stage. Metal reads by what it reflects, and a pale ground gave the
   highlights nothing to sit against — the panel washed out into the page. */
.p3d { position: relative; border: 1px solid var(--line);
  background: radial-gradient(120% 100% at 50% 34%, #26282C, #0C0D0F 70%);
  overflow: hidden; max-width: 100%; min-width: 0; }
.p3d__stage { position: relative; aspect-ratio: 16 / 11; }
.p3d__stage canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 700px) { .p3d__stage { aspect-ratio: 4 / 3; } }

.p3d__ph {
  position: absolute; inset: 0; display: grid; place-items: center; gap: .6rem;
  background: radial-gradient(120% 100% at 50% 34%, #26282C, #0C0D0F 70%);
  font-family: ui-monospace, monospace; font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: #8B8F95; text-align: center; padding: 1rem;
}
.p3d[data-live] .p3d__ph { display: none; }
.p3d__ph svg { width: 96px; opacity: .4; color: #C9CBCE; }
.p3d[data-loading] .p3d__ph::after { content: 'Loading viewer'; color: var(--volt); }

.p3d__hud {
  position: absolute; right: .8rem; top: .8rem; width: 190px; z-index: 4; border-radius: 12px;
  background: rgba(251,250,247,.9); border: 1px solid rgba(22,22,26,.14);
  backdrop-filter: blur(8px); padding: .8rem; display: grid; gap: .7rem;
}
@media (max-width: 620px) {
  .p3d__hud { position: static; width: auto; border: 0; border-top: 1px solid var(--line); backdrop-filter: none; background: #0C0D0F; }
}
.p3d__hud h4 { font-family: ui-monospace, monospace; font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.p3d__name { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 560; font-size: .88rem; color: var(--ink); margin-top: .2rem; }
.p3d__sws { display: grid; grid-template-columns: repeat(6,1fr); gap: 5px; }
.p3d__sw { aspect-ratio: 1; border: 2px solid transparent; outline: 1px solid rgba(22,22,26,.18); border-radius: 4px; cursor: pointer; padding: 0; }
.p3d__sw.is-on { border-color: var(--ink); }
.p3d__perf { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.p3d__btn {
  background: #fff; color: var(--ink); border: 1px solid rgba(22,22,26,.16); border-radius: 100px; cursor: pointer;
  padding: .38rem .3rem; font-family: ui-monospace, monospace; font-size: .58rem; letter-spacing: .06em;
  transition: background .25s, color .25s, border-color .25s;
}
.p3d__btn:hover { border-color: var(--ink); }
.p3d__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.p3d__spec { border-top: 1px solid rgba(22,22,26,.14); padding-top: .55rem; display: grid; gap: .22rem;
  font-family: ui-monospace, monospace; font-size: .56rem; letter-spacing: .06em; color: var(--muted); }
.p3d__spec div { display: flex; justify-content: space-between; gap: .5rem; }
.p3d__spec b { color: var(--ink); font-weight: 400; }
.p3d__hint {
  position: absolute; left: .8rem; bottom: .8rem; z-index: 4;
  font-family: ui-monospace, monospace; font-size: .56rem; letter-spacing: .1em; color: #9B9EA3;
  background: rgba(12,13,15,.6); border: 1px solid rgba(255,255,255,.14); border-radius: 100px; padding: .35rem .7rem; backdrop-filter: blur(4px);
}
@media (max-width: 620px) { .p3d__hint { display: none; } }

/* ==========================================================================
   34. REFINEMENT PASS — Apple/Mercury register
   Light surfaces, generous space, one accent held in reserve.
   ========================================================================== */

/* soft edges throughout */
.scr, .ui, .p3d, .cmp, .matrix, .hud { border-radius: 14px; }
.scr__view, .p3d__stage { border-radius: 0 0 13px 13px; }
.field input, .field textarea, .field select { border-radius: 0; }
.chip span, .sector { border-radius: 100px; }

/* centred editorial section heads, the way Apple opens a section */
.center { text-align: center; }
.center .lede, .center .maxw-sm, .center p { margin-inline: auto; }
.center .rule2 { margin-inline: auto; max-width: 60px; }
.sechead--c { display: block; text-align: center; max-width: 42ch; margin-inline: auto; }

/* ---- 34.1 Selective / invitation band ---------------------------------- */
.select-band { border: 1px solid var(--line); border-radius: 18px; padding: clamp(1.6rem,3.4vw,3rem); }
.select-band .num { font-size: clamp(2.4rem,5vw,4rem); font-variation-settings: 'wdth' 96,'wght' 500; line-height: 1; letter-spacing: -.03em; }
.slots-row { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2.5vw,2.5rem); }
@media (max-width: 760px) { .slots-row { grid-template-columns: 1fr; } }
.slots-row > div { padding-top: 1.1rem; border-top: 1px solid var(--line); }

/* ---- 34.2 Curtain reveal — one comparison, done properly --------------- */
.curtain { position: relative; border-radius: 16px; overflow: hidden; background: var(--ink); box-shadow: 0 40px 90px rgba(22,22,26,.18); }
.curtain__stage { position: relative; aspect-ratio: 16 / 10; }
@media (max-width: 760px) { .curtain__stage { aspect-ratio: 3 / 4; } }
/* isolate:isolate is doing real work here — the finished site's nav and spec
   panel carry z-index:3 of their own, which would otherwise punch straight
   through the curtain sitting at z-index:2 above them. */
.curtain__layer { position: absolute; inset: 0; z-index: 1; isolation: isolate; }
/* the redone site sits underneath; the old one is drawn back like a drape */
.curtain__old {
  z-index: 2; background: #D3D3C8;
  clip-path: inset(0 0 0 var(--open, 0%));
  transition: clip-path 1.5s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 2;
}
.curtain.is-open .curtain__old { clip-path: inset(0 0 0 100%); }
.curtain__seam {
  position: absolute; top: 0; bottom: 0; left: var(--open, 0%); width: 1px; z-index: 3;
  background: rgba(255,255,255,.9); box-shadow: 0 0 24px 3px rgba(255,255,255,.35);
  opacity: 0; transition: left 1.5s cubic-bezier(0.76, 0, 0.24, 1), opacity .5s;
}
.curtain.is-drawing .curtain__seam { opacity: 1; }
.curtain.is-open .curtain__seam { left: 100%; opacity: 0; }
.curtain__pull {
  position: absolute; z-index: 5; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .7rem;
  background: rgba(255,255,255,.94); color: var(--ink); border: 0; border-radius: 100px;
  padding: .8rem 1.6rem; cursor: pointer; backdrop-filter: blur(10px);
  font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 560; font-size: .9rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.28); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.curtain__pull i { display: block; width: 18px; height: 1px; background: currentColor; position: relative; }
.curtain__pull i::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.curtain.is-open .curtain__pull { opacity: 0; transform: translateX(-50%) translateY(14px); pointer-events: none; }
.curtain__reset {
  position: absolute; z-index: 5; right: 1.1rem; bottom: 1.1rem; opacity: 0; pointer-events: none;
  background: rgba(22,22,26,.6); color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 100px;
  padding: .5rem 1rem; cursor: pointer; backdrop-filter: blur(8px);
  font-family: var(--ff-display); font-size: .78rem; transition: opacity .5s var(--ease) .6s;
}
.curtain.is-open .curtain__reset { opacity: 1; pointer-events: auto; }

/* ---- 34.3 Components — Apple-style feature cards ----------------------- */
.comps { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.9rem, 1.6vw, 1.4rem); }
.comp {
  grid-column: span 2; border-radius: 18px; background: var(--white);
  border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.comp:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(22,22,26,.1); }
.comp--wide { grid-column: span 3; }
.comp--full { grid-column: span 6; }
.comp--tint { background: linear-gradient(160deg, var(--wash-a), var(--white) 62%); }
.comp--tint2 { background: linear-gradient(160deg, var(--wash-c), var(--white) 62%); }
.comp--dark { background: var(--ink); color: var(--paper); border-color: transparent; }
.comp--dark .comp__p { color: #A4A4AC; }
.comp__art { position: relative; padding: clamp(1.1rem,2vw,1.7rem) clamp(1.1rem,2vw,1.7rem) 0; }
.comp__art > * { border-radius: 10px; }
.comp__txt { padding: clamp(1.1rem,2vw,1.7rem); }
.comp__k { font-family: var(--ff-display); font-variation-settings: 'wdth' 96,'wght' 560; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.comp h3 { font-size: var(--step-1); margin-top: .5rem; font-variation-settings: 'wdth' 100,'wght' 560; }
.comp__p { color: var(--muted); font-size: var(--step--1); margin-top: .5rem; max-width: 40ch; }
.comp__more { margin-top: auto; padding: 0 clamp(1.1rem,2vw,1.7rem) clamp(1.1rem,2vw,1.7rem); }
.comp__more span { font-size: var(--step--1); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.comp:hover .comp__more span { border-bottom-color: currentColor; }
@media (max-width: 1000px) { .comps { grid-template-columns: repeat(4,1fr); } .comp, .comp--wide { grid-column: span 2; } .comp--full { grid-column: span 4; } }
@media (max-width: 620px)  { .comps { grid-template-columns: 1fr; } .comp, .comp--wide, .comp--full { grid-column: span 1; } }

/* ---- 34.4 Inspiration board -------------------------------------------- */
.insp { columns: 3; column-gap: clamp(.9rem,1.6vw,1.3rem); }
@media (max-width: 900px) { .insp { columns: 2; } }
@media (max-width: 560px) { .insp { columns: 1; } }
.insp__item {
  break-inside: avoid; margin-bottom: clamp(.9rem,1.6vw,1.3rem); border-radius: 14px; overflow: hidden;
  position: relative; background: var(--limestone); border: 1px solid var(--line);
}
.insp__item img { width: 100%; height: auto; display: block; }
.insp__ph { display: grid; place-items: center; text-align: center; padding: 1.2rem; color: var(--muted); }
.insp__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .9rem .8rem; color: #fff;
  background: linear-gradient(transparent, rgba(22,22,26,.72)); opacity: 0; transition: opacity .4s var(--ease);
  font-family: var(--ff-display); font-size: .78rem;
}
.insp__item:hover .insp__cap { opacity: 1; }

/* ---- 34.5 Registration modal ------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1.2rem;
  opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal__scrim { position: absolute; inset: 0; background: rgba(22,22,26,.5); backdrop-filter: blur(8px); }
.modal__card {
  position: relative; width: min(880px, 100%); background: var(--white); border-radius: 20px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1fr);
  box-shadow: 0 50px 110px rgba(22,22,26,.32); transform: translateY(18px) scale(.985);
  transition: transform .55s var(--ease); max-height: 92svh;
}
.modal.is-open .modal__card { transform: none; }
.modal__art { background: linear-gradient(165deg, var(--wash-a), var(--wash-c) 55%, var(--wash-b)); padding: clamp(1.4rem,3vw,2.2rem); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.modal__art svg { width: 34px; color: var(--ink); }
.modal__body { padding: clamp(1.4rem,3vw,2.4rem); overflow-y: auto; }
.modal__x { position: absolute; top: .8rem; right: .9rem; z-index: 3; background: none; border: 0; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); font-size: 1.1rem; }
.modal__x:hover { background: var(--limestone); color: var(--ink); }
@media (max-width: 760px) { .modal__card { grid-template-columns: 1fr; } .modal__art { display: none; } }

/* ---- 34.6 dark sections get softer ------------------------------------- */
.on-ink { border-radius: 0; }
.grain::after { opacity: .05; }

/* ==========================================================================
   35. ICONS — one stroked set, 24px grid, inherits colour and weight
   ========================================================================== */
.ico { width: 1.5rem; height: 1.5rem; stroke: currentColor; fill: none;
  stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--lg { width: 2.1rem; height: 2.1rem; stroke-width: 1.1; }
.ico-badge { width: 3rem; height: 3rem; border-radius: 12px; display: grid; place-items: center;
  background: var(--limestone-2); border: 1px solid var(--line); }
.on-ink .ico-badge { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }

/* ==========================================================================
   36. WHY US — five pillars
   ========================================================================== */
.why { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.why > div { background: var(--paper); padding: clamp(1.2rem,2.4vw,1.9rem); display: grid; gap: .8rem; align-content: start; }
.why h3 { font-size: var(--step-0); font-variation-settings: 'wdth' 100,'wght' 580; }
.why p { color: var(--muted); font-size: var(--step--1); }
@media (max-width: 1080px) { .why { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px)  { .why { grid-template-columns: 1fr; } }

/* ==========================================================================
   37. COMPONENT CATALOGUE — grouped, filterable, scannable
   ========================================================================== */
.cat__tabs { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
.cat__tab { border: 1px solid var(--line); background: none; cursor: pointer; color: var(--muted);
  border-radius: 100px; padding: .5rem 1.1rem; font-family: var(--ff-display);
  font-variation-settings: 'wdth' 100,'wght' 520; font-size: .86rem;
  transition: background .3s, color .3s, border-color .3s; }
.cat__tab:hover { color: var(--fg); border-color: var(--fg); }
.cat__tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.cat { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem,1.5vw,1.2rem); }
@media (max-width: 980px) { .cat { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .cat { grid-template-columns: 1fr; } }
.cat__item {
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(1.1rem,2vw,1.5rem); display: grid; gap: .7rem; align-content: start;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
  position: relative; overflow: hidden;
}
.cat__item::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.cat__item:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(22,22,26,.09); }
.cat__item:hover::after { transform: scaleX(1); }
.cat__item h3 { font-size: var(--step-0); font-variation-settings: 'wdth' 100,'wght' 580; }
.cat__item p { color: var(--muted); font-size: var(--step--1); }
.cat__item[hidden] { display: none; }
.cat__tagrow { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.cat__tagrow span { font-family: ui-monospace, monospace; font-size: .58rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 100px; padding: .2rem .55rem; }

/* ==========================================================================
   38. COOKIE BAR
   ========================================================================== */
.cookies {
  position: fixed; left: 50%; bottom: 1rem; z-index: 250; width: min(880px, calc(100% - 2rem));
  transform: translate(-50%, 130%); transition: transform .6s var(--ease);
  background: rgba(251,250,247,.96); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.2rem;
  box-shadow: 0 24px 60px rgba(22,22,26,.16);
  display: flex; gap: 1rem 1.4rem; align-items: center; flex-wrap: wrap;
}
.cookies.is-up { transform: translate(-50%, 0); }
.cookies p { font-size: var(--step--1); color: var(--muted); flex: 1; min-width: 260px; }
.cookies a { text-decoration: underline; text-underline-offset: 3px; }
.cookies__acts { display: flex; gap: .5rem; flex-wrap: wrap; }
.cookies .btn { padding: .6rem 1.15rem; font-size: .84rem; }
@media (max-width: 560px) { .cookies { bottom: .6rem; padding: .9rem 1rem; } .cookies__acts { width: 100%; } .cookies__acts .btn { flex: 1; justify-content: center; } }

/* ==========================================================================
   39. SERVICE BLOCKS — the premium list, set as a document
   ========================================================================== */
.svc-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.svc-rail a { background: var(--paper); padding: .95rem 1.1rem; display: flex; gap: .7rem; align-items: baseline;
  font-size: var(--step--1); transition: background .3s, color .3s; }
.svc-rail a:hover { background: var(--ink); color: var(--paper); }
.svc-rail .mono { font-size: .6rem; opacity: .55; }
@media (max-width: 900px) { .svc-rail { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .svc-rail { grid-template-columns: 1fr; } }

.svcs { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.svc { background: var(--white); border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(1.3rem, 2.6vw, 2.4rem); scroll-margin-top: 110px;
  transition: box-shadow .5s var(--ease); }
.svc:hover { box-shadow: 0 20px 46px rgba(22,22,26,.08); }
.svc__head { display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; gap: 1rem 1.3rem; align-items: start; }
.svc__n { font-size: .72rem; color: var(--muted); padding-top: .95rem; }
.svc__icon { width: 3.2rem; height: 3.2rem; }
.svc h2 { font-size: var(--step-2); font-variation-settings: 'wdth' 100,'wght' 560; line-height: 1.1; }
.svc__dek { color: var(--muted); margin-top: .5rem; max-width: 56ch; font-size: var(--step--1); }
.svc__cta { align-self: center; white-space: nowrap; }
.svc__list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.3rem;
  padding-top: 1.3rem; border-top: 1px solid var(--line); }
.svc__list li { border: 1px solid var(--line); border-radius: 100px; padding: .42rem .95rem;
  font-size: var(--step--1); color: var(--muted); transition: background .25s, color .25s, border-color .25s; }
.svc__list li:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 860px) {
  .svc__head { grid-template-columns: auto minmax(0,1fr); }
  .svc__n { grid-column: 1; padding-top: .3rem; }
  .svc__icon { display: none; }
  .svc__cta { grid-column: 1 / -1; justify-self: start; }
}

/* ==========================================================================
   40. LIVE EMBED — the actual Profile Panels viewer, not a recreation
   ========================================================================== */
.pp3d { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--ink); }
.pp3d__bar { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem;
  background: #141518; border-bottom: 1px solid rgba(255,255,255,.1); }
.pp3d__out { margin-left: auto; font-family: ui-monospace, monospace; font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase; color: #9B9BA3; white-space: nowrap; }
.pp3d__out:hover { color: #fff; }
.pp3d__frame { position: relative; aspect-ratio: 16 / 11; background: #0E1014; }
@media (max-width: 700px) { .pp3d__frame { aspect-ratio: 3 / 4; } }
.pp3d__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.pp3d__fallback { position: absolute; inset: 0; display: none; place-content: center; text-align: center;
  padding: 2rem; color: #E9EAEC; background: #0E1014; }
.pp3d[data-failed] .pp3d__fallback { display: grid; }
.pp3d[data-failed] iframe { display: none; }
.pp3d__fallback .mono { color: #8B8F95; letter-spacing: .16em; }

/* ==========================================================================
   41. TYPOGRAPHIC PASS — Swiss specimen discipline
   Rules, numbered blocks, tight display type, technical labels.
   ========================================================================== */

/* display type gets tighter and heavier, closer to a Helvetica specimen */
.d-xl, .d-lg, .d-md { font-variation-settings: 'wdth' 100, 'wght' 620; letter-spacing: -0.038em; line-height: .96; }
.d-md { line-height: 1.0; }

/* a hairline grid rule used to separate specimen blocks */
.hair { height: 1px; background: var(--line); width: 100%; display: block; }
.hair--heavy { height: 2px; background: currentColor; opacity: .85; }

/* technical caption row: label left, value right, rule between */
.spec-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem;
  padding: .62rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.spec-row dt { font-size: var(--step--1); color: var(--muted); }
.spec-row dd { font-family: ui-monospace, monospace; font-size: .74rem; letter-spacing: .04em; }

/* the big statement: type as the whole design */
.stmt { padding-block: clamp(3.5rem, 9vw, 9rem); }
.stmt__label { display: flex; align-items: baseline; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid currentColor; }
.stmt__label .n { font-family: ui-monospace, monospace; font-size: .66rem; letter-spacing: .18em; }
.stmt__label .t { font-family: var(--ff-display); font-variation-settings: 'wdth' 96,'wght' 560;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.stmt__label .r { margin-left: auto; font-family: ui-monospace, monospace; font-size: .62rem; color: var(--muted); }
/* 0.86 was tighter than the descenders allow: the tails of p, y and g in
   "impressions", "yours" and "impossible" dropped into the caps of the line
   below, which read as the letters running together. */
.stmt h2 {
  font-size: clamp(2.5rem, 9.6vw, 10.2rem);
  font-variation-settings: 'wdth' 100, 'wght' 680;
  line-height: .98; letter-spacing: -.046em; margin-top: clamp(1.4rem, 3vw, 2.6rem);
  text-wrap: balance;
}
.stmt h2 em { font-style: normal; color: var(--muted); }
.stmt__grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 1.5rem; margin-top: clamp(1.8rem,4vw,3rem); }
.stmt__grid > *:first-child { grid-column: span 5; }
.stmt__grid > *:last-child  { grid-column: 7 / span 6; }
@media (max-width: 860px) { .stmt__grid > * { grid-column: 1 / -1 !important; } }

/* four-second counter block */
.tick-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 2px solid currentColor; }
.tick-grid > div { padding: 1.2rem 1rem 1.2rem 0; border-right: 1px solid var(--line); }
.tick-grid > div:last-child { border-right: 0; }
.tick-grid b { display: block; font-family: var(--ff-display);
  font-variation-settings: 'wdth' 92,'wght' 620; font-weight: 400;
  font-size: clamp(2rem,4.6vw,3.6rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tick-grid span { display: block; margin-top: .6rem; font-size: var(--step--1); color: var(--muted); max-width: 22ch; }
@media (max-width: 760px) { .tick-grid { grid-template-columns: repeat(2,1fr); } }

/* section eyebrows become numbered specimen labels site-wide */
.eyebrow { font-variation-settings: 'wdth' 96, 'wght' 600; letter-spacing: .17em; }

/* ==========================================================================
   42. DESCENDER FIX
   Masked line reveals use overflow:hidden, which clips the tails of g, y, p,
   j and q. The mask needs to sit lower than the baseline without moving the
   text, so each line gets padding below and pulls it straight back.
   ========================================================================== */
.sp-line, .lm {
  padding-bottom: .18em;
  margin-bottom: -.18em;
}
/* tight display leading also crops descenders against the next line */
.stmt h2, .d-xl, .d-lg { padding-bottom: .06em; }
.hero h1 .lm { padding-bottom: .16em; margin-bottom: -.16em; }
.ftr__wm { overflow: visible; }

/* ==========================================================================
   43. REDACTION — drawn as one SVG so the bars can never drift off the lines
   Laying this out in HTML meant the copy reflowed at every breakpoint while
   the bars stayed put. Fixed geometry in a viewBox scales perfectly instead.
   ========================================================================== */
.redact { background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(1rem, 2.4vw, 2rem); overflow: hidden; }
.redact__svg { width: 100%; height: auto; display: block; }
.redact__text text {
  font-family: var(--ff-display); font-size: 30px;
  font-variation-settings: 'wdth' 100, 'wght' 500; letter-spacing: -.4px; fill: var(--ink);
}
.redact__bars rect { fill: #E2342A; }
.redact__punch {
  font-family: var(--ff-display); font-size: 42px;
  font-variation-settings: 'wdth' 100, 'wght' 620; letter-spacing: -1.4px; fill: var(--ink);
  paint-order: stroke fill; stroke: var(--paper); stroke-width: 14px; stroke-linejoin: round;
}

/* ==========================================================================
   44. THE STUDIO — a board of different treatments, not one grid
   ========================================================================== */
.studio { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.8rem,1.5vw,1.3rem); }
.st { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 190px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.st:hover { transform: translateY(-3px); box-shadow: 0 20px 46px rgba(22,22,26,.1); }
.st__cap { position: relative; z-index: 3; padding: .85rem 1rem; font-family: ui-monospace, monospace;
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  border-top: 1px solid var(--line); background: var(--paper); display: flex; justify-content: space-between; gap: 1rem; }
.st__art { position: absolute; inset: 0 0 2.6rem; overflow: hidden; }
.st--3  { grid-column: span 3; }
.st--4  { grid-column: span 4; }
.st--5  { grid-column: span 5; }
.st--6  { grid-column: span 6; }
.st--7  { grid-column: span 7; }
.st--8  { grid-column: span 8; }
.st--12 { grid-column: span 12; }
.st--tall { min-height: 380px; }
@media (max-width: 900px) { .st { grid-column: span 6 !important; } .st--12 { grid-column: span 12 !important; } }
@media (max-width: 560px) { .st { grid-column: span 12 !important; min-height: 220px; } }

/* individual treatments */
.st-type { display: grid; place-content: center; height: 100%; background: var(--ink); color: var(--paper); padding: 1rem; }
.st-type b { font-family: var(--ff-display); font-variation-settings: 'wdth' 125,'wght' 700;
  font-weight: 400; font-size: clamp(3rem,9vw,7rem); line-height: .82; letter-spacing: -.05em; }
.st-swatch { display: grid; grid-template-columns: repeat(6,1fr); height: 100%; }
.st-poster { height: 100%; background: #E2342A; color: #fff; display: grid; align-content: center; padding: clamp(1rem,3vw,2rem); }
.st-poster b { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 660;
  font-weight: 400; font-size: clamp(1.4rem,3.4vw,2.6rem); line-height: .95; letter-spacing: -.035em; }
.st-sheet { height: 100%; background: #fff; padding: clamp(.9rem,2vw,1.4rem); display: grid; gap: .4rem; align-content: start; }
.st-sheet .r { display: grid; grid-template-columns: 1fr auto; gap: 1rem; font-family: ui-monospace, monospace;
  font-size: .56rem; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: .3rem; }
.st-sheet .r b { color: var(--ink); font-weight: 400; }
.st-grid-art { height: 100%; background: var(--limestone);
  background-image: repeating-linear-gradient(90deg, rgba(22,22,26,.12) 0 1px, transparent 1px 26px),
                    repeating-linear-gradient(0deg, rgba(22,22,26,.12) 0 1px, transparent 1px 26px); }
.st-mono { height: 100%; background: var(--ink); color: var(--volt-dim); display: grid; align-content: center;
  padding: clamp(1rem,2.4vw,1.8rem); font-family: ui-monospace, monospace; font-size: .62rem; line-height: 1.9; letter-spacing: .06em; }
.st-mono span { color: var(--paper); }
.st-photo { height: 100%; display: grid; place-items: center; color: var(--muted); text-align: center; padding: 1rem;
  background: linear-gradient(160deg, var(--wash-a), var(--wash-b)); }

/* ==========================================================================
   45. PROFILE PANELS — the real homepage, rebuilt to scale inside a screen
   ========================================================================== */
.ppsite { position: absolute; inset: 0; overflow: hidden; background: #0B0C0E; color: #fff; font-family: var(--ff-display); }
.ppsite__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ppsite__scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,9,11,.72) 0 22%, rgba(8,9,11,.12) 52%, rgba(8,9,11,.78)); }
.ppsite__nav { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center;
  gap: .95em; padding: 2.6% 3.2%; font-size: clamp(5px,.72vw,8.5px); letter-spacing: .1em; text-transform: uppercase; }
.ppsite__brand { display: inline-flex; align-items: center; gap: .5em;
  font-variation-settings: 'wdth' 100,'wght' 640; letter-spacing: .06em; }
.ppsite__brand svg { width: 1.4em; height: auto; }
.ppsite__nav .sp { margin-left: auto; }
.ppsite__cta { border: 1px solid rgba(255,255,255,.6); border-radius: 100px; padding: .45em 1em; }
.ppsite__cap { position: absolute; left: 3.2%; bottom: 8%; z-index: 3; }
.ppsite__place { font-variation-settings: 'wdth' 100,'wght' 620; font-size: clamp(13px,2.5vw,30px);
  letter-spacing: -.03em; line-height: 1.05; }
.ppsite__sub { font-family: var(--ff-body); font-size: clamp(6px,.92vw,11px); color: rgba(255,255,255,.8); margin-top: .5em; }
.ppsite__dots { position: absolute; right: 3.2%; bottom: 8%; z-index: 3; display: flex; gap: 6px; }
.ppsite__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); }
.ppsite__dots i.on { background: #fff; }
.ppsite__arw { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  font-size: clamp(10px,1.5vw,17px); color: rgba(255,255,255,.75); }
.ppsite__arw.l { left: 2.4%; } .ppsite__arw.r { right: 2.4%; }

.ppsys { max-width: 1080px; margin: clamp(1rem,2vw,1.6rem) auto 0;
  border: 1px solid var(--line); border-radius: 14px; background: var(--paper); overflow: hidden; }
.ppsys__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.ppsys__head h3 { font-size: var(--step-1); font-variation-settings: 'wdth' 100,'wght' 560; }
.ppsys__head .mono { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ppsys__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); }
.ppsys__grid span { background: var(--paper); padding: .85rem 1rem; display: grid; gap: .3rem;
  font-size: var(--step--1); color: var(--muted); }
.ppsys__grid b { font-weight: 400; font-variation-settings: 'wdth' 100,'wght' 560; color: var(--fg); font-size: .88rem; }
@media (max-width: 900px) { .ppsys__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .ppsys__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   46. THE OPENING — oversized typography, playing on its own
   One viewport. Statements mask up from the floor, hold, and mask out through
   the top. Driven by a timer rather than scroll, so it opens immediately.
   ========================================================================== */
.epic { position: relative; background: var(--paper); height: 100svh; overflow: hidden; }
/* two rows now the top bar is gone: the stage takes the space, the ticks sit
   under it. The statements are absolutely positioned, so the stage has no
   intrinsic height and must be given the 1fr. */
.epic__pin { height: 100%; display: grid; grid-template-rows: 1fr auto; }
.epic__bar { display: none; }

.epic__stage { position: relative; min-height: 0; }
.epic__line {
  position: absolute; inset: 0; display: grid; align-content: center;
  padding-inline: var(--gut);
  clip-path: inset(100% 0 0 0);
  transform: translate3d(0, 7vh, 0);
  transition: clip-path .95s var(--ease), transform 1.15s var(--ease);
  will-change: clip-path, transform;
}
.epic__line.is-on  { clip-path: inset(0 0 0 0);   transform: translate3d(0, 0, 0); }
.epic__line.is-out { clip-path: inset(0 0 100% 0); transform: translate3d(0, -7vh, 0); }
/* Set the way the reference sets it: very heavy, very tight, lines stacked
   almost touching. No grey — black, and a lighter black underneath it. */
.epic__line span {
  display: block;
  font-family: var(--ff-display);
  /* both are needed: some engines pick the static instance from font-weight
     before font-variation-settings is applied, which rendered this lighter
     than the 660 it replaced */
  font-weight: 800;
  font-variation-settings: 'wdth' 100, 'wght' 800;
  font-size: clamp(3.2rem, 15.2vw, 14.5rem);
  line-height: .78;
  letter-spacing: -.062em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #0A0A0B;
}
.epic__line span:last-child { color: #3E3E46; }
.epic__line--alt span:first-child { color: #3E3E46; }
.epic__line--alt span:last-child { color: #0A0A0B; }

/* it carries .shell for its max-width, so the gutter comes from there —
   only the bottom padding belongs here */
.epic__foot { display: flex; align-items: center; gap: 1rem;
  padding-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.epic__ticks { display: flex; gap: 5px; margin-left: auto; }
.epic__ticks i { width: 26px; height: 2px; background: var(--line); cursor: pointer;
  transition: background .5s var(--ease); }
.epic__ticks i.on { background: var(--ink); }
.epic__hint { font-family: ui-monospace, monospace; font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); }

/* the resolve: one sentence, held on its own */
.resolve { background: var(--paper); }
.resolve__in { min-height: 78svh; display: grid; align-content: center; padding-block: clamp(3rem,7vw,6rem); }
.resolve h2 {
  font-family: var(--ff-display); font-variation-settings: 'wdth' 100, 'wght' 560;
  font-size: clamp(1.9rem, 5.1vw, 4.6rem); line-height: 1.04; letter-spacing: -.036em;
  max-width: 19ch;
}
.resolve h2 em { font-style: normal; color: #3E3E46; }
.resolve__meta { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; margin-top: clamp(2rem,4vw,3.2rem);
  padding-top: 1.2rem; border-top: 1px solid var(--line);
  font-family: ui-monospace, monospace; font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }
.resolve__meta .go { margin-left: auto; color: var(--ink); }

/* no-JS and reduced motion: show the statements stacked, still oversized */
.epic.is-static { height: auto; }
.epic.is-static .epic__pin { height: auto; }
.epic.is-static .epic__stage { display: grid; gap: clamp(1.5rem,4vw,3rem); padding-block: clamp(2rem,5vw,4rem); }
.epic.is-static .epic__line { position: static; clip-path: none; transform: none; transition: none; }
.epic.is-static .epic__foot, .epic.is-static .epic__ticks { display: none; }

@media (max-width: 700px) {
  /* the longest word is 10 characters; at ~0.62em average advance that needs
     roughly 13vw to sit inside the gutters without losing its last letter */
  .epic__line span { font-size: clamp(1.9rem, 13.1vw, 4rem); letter-spacing: -.04em; }
  .epic__line span:last-child { padding-left: .06em; }
  .epic__bar { padding-top: clamp(4.4rem, 16vw, 6rem); gap: .8rem; font-size: .56rem; letter-spacing: .14em; }
  .epic__bar .r { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .epic__line { transition: none; }
}

/* ==========================================================================
   47. MARGINALIA — a hand annotation, drawn on
   The one place the site allows a human mark. Red, handwritten, and drawn in
   when it scrolls into view rather than sitting there as a graphic.
   ========================================================================== */
.note-anchor { position: relative; }
.marg {
  position: absolute; z-index: 3; pointer-events: none;
  color: #E2342A; display: grid; justify-items: start; gap: .1rem;
}
.marg__word {
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1;
  transform: rotate(-6deg); opacity: 0; transition: opacity .5s var(--ease) .55s;
}
.marg.is-in .marg__word { opacity: 1; }
.marg__arrow { width: clamp(96px, 11vw, 156px); height: auto; overflow: visible; margin-top: .2rem; }
.marg__arrow path {
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 300); stroke-dashoffset: var(--len, 300);
  transition: stroke-dashoffset 1.05s var(--ease-io);
}
.marg.is-in .marg__arrow path { stroke-dashoffset: 0; }
.marg__arrow path.head { transition-delay: .68s; }

/* desktop: sits to the right of the paragraph, arrow curving back into it */
.marg--right { right: 0; top: 0; justify-items: end; }
.marg--right .marg__word { transform: rotate(-5deg) translateX(-4%); }
@media (max-width: 1180px) { .marg--right { right: 1%; } }
@media (max-width: 900px) {
  .marg--right { position: static; transform: none; margin-top: 1.2rem;
    grid-auto-flow: column; align-items: center; gap: .6rem; justify-items: center; }
  .marg--right .marg__arrow { width: 76px; transform: rotate(-90deg); }
  .marg--right .marg__word { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .marg__arrow path { stroke-dashoffset: 0; }
  .marg__word { opacity: 1; }
}

/* ==========================================================================
   48. CAMPAIGN — the ads shown at the size ads deserve
   ========================================================================== */
.ads { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1rem,2vw,1.8rem); }
@media (max-width: 820px) { .ads { grid-template-columns: 1fr; } }

.ad { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  background: var(--paper); margin: 0; display: flex; flex-direction: column; }
.ad .redact { border: 0; border-radius: 0; flex: 1; display: grid; align-content: center; }
.ad__img { display: block; width: 100%; height: auto; }
.ad--poster { border-color: transparent; }
.ad__cap { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem;
  border-top: 1px solid var(--line); font-family: ui-monospace, monospace; font-size: .58rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); background: var(--paper); }
.ad__cap--over { position: absolute; inset: auto 0 0; border-top: 0;
  background: linear-gradient(transparent, rgba(20,22,26,.55)); color: rgba(255,255,255,.86); }
/* ==========================================================================
   48. CAMPAIGN — the ads shown as ads
   Two plates side by side: one typographic, one product. Both are work, so
   they get the space work gets rather than being shrunk into a card.
   ========================================================================== */
.ads { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: clamp(1rem,2vw,1.8rem); align-items: stretch; }
@media (max-width: 900px) { .ads { grid-template-columns: 1fr; } }

.ad { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  background: var(--paper); display: flex; }
.ad--poster { padding: 0; }
.ad__img { display: block; width: 100%; height: 100%; object-fit: cover; }


/* ==========================================================================
   49. THE WALL — a masonry of advertising that grows one line at a time
   ========================================================================== */
/* A grid rather than CSS columns: a landscape piece has to be able to run
   two columns wide, and columns can't do that. Rows align, which suits a
   contact sheet better than a ragged masonry anyway. */
.wall { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(.9rem, 1.7vw, 1.5rem); align-items: start; }
.wall__item--wide { grid-column: span 2; }
.wall__item--full { grid-column: 1 / -1; }
@media (max-width: 1000px) { .wall { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px)  { .wall { grid-template-columns: 1fr; }
  .wall__item--wide { grid-column: span 1; } }

.wall__item {
  margin: 0;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--paper); cursor: zoom-in; position: relative;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.wall__item:hover, .wall__item:focus-visible { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(22,22,26,.1); }
.wall__item:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.wall__art img { display: block; width: 100%; height: auto; }
.wall__draw { padding: clamp(.8rem, 2vw, 1.5rem); }
.wall__draw .redact__svg { width: 100%; height: auto; }
.wall__ph {
  aspect-ratio: 4 / 5; display: grid; place-content: center; gap: .5rem; text-align: center;
  background: linear-gradient(165deg, var(--limestone-2), var(--limestone));
  color: var(--muted); padding: 1.2rem;
}
.wall__item--tall .wall__ph { aspect-ratio: 3 / 4; }
.wall__item--wide .wall__ph { aspect-ratio: 4 / 3; }
.wall__ph .mono { font-size: .58rem; letter-spacing: .2em; }
.wall__ph span:last-child { font-family: var(--ff-display); font-size: var(--step-0);
  font-variation-settings: 'wdth' 100,'wght' 560; color: var(--fg); }
.wall__cap { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1rem;
  border-top: 1px solid var(--line); font-size: var(--step--1); }
.wall__cap .mono { font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: clamp(1rem,4vw,3rem);
  background: rgba(18,18,22,.94); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.lb.is-open { opacity: 1; pointer-events: auto; }
.lb__fig { margin: 0; display: grid; gap: .9rem; justify-items: center; max-height: 100%; }
.lb__img { max-width: min(1100px, 92vw); max-height: 82svh; width: auto; height: auto;
  border-radius: 10px; transform: scale(.97); transition: transform .45s var(--ease); }
.lb.is-open .lb__img { transform: none; }
.lb__cap { color: rgba(255,255,255,.66); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; }
.lb__x { position: absolute; top: 1rem; right: 1.2rem; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3); background: none; color: #fff; font-size: 1.2rem; cursor: pointer; }
.lb__x:hover { background: rgba(255,255,255,.12); }

/* ==========================================================================
   50. LIVE TILE — a working component sitting on the wall as a piece
   Same frame and caption as the printed work, so the wall reads as one set.
   ========================================================================== */
.wall__item--live { cursor: default; }
.wall__item--live .p3d { border: 0; border-radius: 0; }
.wall__item--live .p3d__stage { aspect-ratio: 21 / 9; }


/* the controls stay out of the way until the piece is engaged with */

/* a quiet badge so it reads as interactive without a hover */
.wall__live-badge {
  position: absolute; left: .8rem; top: .8rem; z-index: 5;
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(251,250,247,.9); border: 1px solid rgba(22,22,26,.14);
  border-radius: 100px; padding: .3rem .7rem; backdrop-filter: blur(6px);
  font-family: ui-monospace, monospace; font-size: .54rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.wall__live-badge i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
/* ==========================================================================
   51. CONFIGURATOR v2 — controls along the bottom, the way the real one runs
   ========================================================================== */
.p3d--full { display: grid; grid-template-rows: 1fr auto; min-width: 0; overflow: hidden; }
.p3d--full .p3d__stage { aspect-ratio: 21 / 9; }
@media (max-width: 900px) { .p3d--full .p3d__stage { aspect-ratio: 4 / 3; } }
@media (max-width: 560px) { .p3d--full .p3d__stage { aspect-ratio: 1 / 1; } }

.p3d__deck { border-top: 1px solid var(--line); background: var(--paper); min-width: 0; overflow: hidden; }
.p3d__deckrow { display: grid; grid-template-columns: 9.5rem minmax(0,1fr); gap: 1rem; min-width: 0;
  padding: .8rem clamp(.8rem,1.6vw,1.2rem); align-items: center; }
.p3d__deckrow + .p3d__deckrow { border-top: 1px solid var(--line); }
.p3d__deckrow h4 { font-family: ui-monospace, monospace; font-size: .56rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); }
.p3d__deckrow h4 b { display: block; margin-top: .25rem; font-weight: 400; letter-spacing: 0;
  text-transform: none; font-family: var(--ff-display);
  font-variation-settings: 'wdth' 100,'wght' 560; font-size: .82rem; color: var(--ink); }
@media (max-width: 700px) { .p3d__deckrow { grid-template-columns: 1fr; gap: .5rem; } }

/* finish rail — every colour, scrollable, no scrollbar noise.
   min-width:0 matters: without it a flex/grid child sizes to its content, so
   thirty-one swatches pushed the rail straight out of the tile at anything
   below full width. */
.p3d__rail { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px;
  min-width: 0; max-width: 100%;
  scrollbar-width: none; -ms-overflow-style: none; }
.p3d__rail::-webkit-scrollbar { display: none; }
.p3d__sw { width: 26px; height: 26px; flex: none; border-radius: 4px; padding: 0; cursor: pointer;
  border: 2px solid transparent; outline: 1px solid rgba(22,22,26,.2); outline-offset: -1px;
  transition: transform .2s var(--ease); }
.p3d__sw:hover { transform: translateY(-2px); }
.p3d__sw.is-on { border-color: var(--ink); }

/* perforation rail */
.p3d__rail--perf .p3d__btn { flex: none; display: grid; gap: 1px; padding: .34rem .7rem;
  text-align: center; line-height: 1.15; }
.p3d__rail--perf .p3d__btn b { font-weight: 400; font-size: .68rem;
  font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 560; }
.p3d__rail--perf .p3d__btn span { font-family: ui-monospace, monospace; font-size: .5rem;
  letter-spacing: .04em; opacity: .7; }

.p3d__view { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.p3d__view .p3d__btn { min-width: 2.2rem; }

/* ==========================================================================
   52. STUDIO TYPE — the wall reads as a gallery, so the setting drops the
   serif and runs on the grotesque throughout. Clean, minimal, Swiss.
   ========================================================================== */
body.studio-type { --ff-body: var(--ff-display); }
body.studio-type .lede,
body.studio-type .phead__lede,
body.studio-type p,
body.studio-type .wall__cap span:first-child {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 100, 'wght' 400;
  letter-spacing: -.012em;
}
body.studio-type .lede, body.studio-type .phead__lede { line-height: 1.34; }
body.studio-type .wall__cap span:first-child {
  font-variation-settings: 'wdth' 100, 'wght' 500; letter-spacing: -.008em;
}
body.studio-type .prose p { font-family: var(--ff-display); }

/* ==========================================================================
   51. BUILD — a word with a scribble drawn over it, on a loop
   The scribble is one continuous path; animating its dash offset draws it as
   though somebody were doing it by hand, then lets it rest before repeating.
   ========================================================================== */
.build { display: block; width: 100%; height: auto; }
.build__word {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-size: 168px; letter-spacing: -8px; fill: #101014;
}
.build__scribble {
  fill: none; stroke: #F04424; stroke-width: 5.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 9000);
  stroke-dashoffset: var(--len, 9000);
  animation: scribble 7.5s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes scribble {
  0%   { stroke-dashoffset: var(--len, 9000); }
  46%  { stroke-dashoffset: 0; }
  76%  { stroke-dashoffset: 0; }                       /* rest, drawn */
  100% { stroke-dashoffset: calc(var(--len, 9000) * -1); }  /* pull away */
}
@media (prefers-reduced-motion: reduce) {
  .build__scribble { animation: none; stroke-dashoffset: 0; }
}
.wall__item--motion { cursor: default; }
.wall__item--motion .wall__art { background: #F2F1EE; }

/* ==========================================================================
   52. PRODUCT SHEET — a spec document, set as a document
   White page, hairline rules, technical tables. Deliberately quieter than the
   rest of the site: this is a thing a specifier prints and files.
   ========================================================================== */
.ps { background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: clamp(1.4rem, 4vw, 4rem); margin-top: 1.4rem;
  box-shadow: 0 30px 80px rgba(22,22,26,.07); }

.ps__top { display: flex; flex-wrap: wrap; gap: .8rem 2rem; align-items: baseline;
  padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.ps__brand { display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 620;
  font-size: 1.05rem; letter-spacing: -.01em; }
.ps__brand svg { width: 1.1em; height: auto; }
.ps__top .mono { font-size: .62rem; letter-spacing: .1em; color: var(--muted); }
.ps__art { margin-left: auto; }

.ps__hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: clamp(1.4rem,3.5vw,3.4rem); align-items: center; padding-block: clamp(1.6rem,4vw,3rem); }
@media (max-width: 820px) { .ps__hero { grid-template-columns: 1fr; } }
.ps__shot { margin: 0; display: grid; place-items: center; }
.ps__shot img { width: 100%; height: auto; }
.ps__facts h1 { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 560;
  font-size: clamp(1.6rem,3.2vw,2.4rem); letter-spacing: -.025em; line-height: 1.1; }
.ps__dek { color: var(--muted); font-size: var(--step--1); margin-top: .7rem; max-width: 46ch; }
.ps__spec { margin-top: 1.4rem; }
.ps__row { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 1rem;
  padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: var(--step--1); }
.ps__row dt { color: var(--muted); }
.ps__row dd { color: var(--fg); }

.ps__block { padding-block: clamp(1.4rem,3vw,2.4rem); border-top: 1px solid var(--line); }
.ps__block h2 { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 560;
  font-size: var(--step-1); letter-spacing: -.015em; margin-bottom: 1.2rem; }
.ps__note { color: var(--muted); font-size: .74rem; margin-top: .9rem; max-width: 62ch; }

.ps__sws { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: .8rem; }
@media (max-width: 820px) { .ps__sws { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.ps__sw { margin: 0; }
.ps__sw span { display: block; aspect-ratio: 3/2; border: 1px solid rgba(22,22,26,.12); }
.ps__sw figcaption { font-size: .64rem; color: var(--muted); margin-top: .45rem; line-height: 1.4; }
.ps__sw i { font-style: normal; font-family: ui-monospace, monospace; font-size: .56rem; opacity: .7; }

.ps__cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.2rem,3vw,2.6rem); }
@media (max-width: 980px) { .ps__cols { grid-template-columns: 1fr; } }
.ps__cols h3 { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .7rem; }
.ps__tbl { width: 100%; border-collapse: collapse; font-family: ui-monospace, monospace; font-size: .64rem; }
.ps__tbl th { text-align: left; font-weight: 400; color: var(--muted); padding: .35rem .3rem;
  border-bottom: 1px solid var(--line); white-space: nowrap; }
.ps__tbl td { padding: .38rem .3rem; border-bottom: 1px solid rgba(22,22,26,.07); }
.ps__list { display: grid; gap: .35rem; }
.ps__list li { font-size: .72rem; color: var(--muted); padding-left: .9rem; position: relative; }
.ps__list li::before { content: ''; position: absolute; left: 0; top: .6em; width: 5px; height: 1px; background: var(--ink); }

.ps__foot { display: flex; flex-wrap: wrap; gap: .6rem 2rem; align-items: baseline;
  padding-top: 1.2rem; border-top: 1px solid var(--line); }
.ps__foot .mono { font-size: .6rem; letter-spacing: .12em; color: var(--muted); }
.ps__foot .mono:last-child { margin-left: auto; }
.wall__item--sheet { display: flex; flex-direction: column; }
.wall__item--sheet .wall__art { background: #fff; }
.wall__item--sheet .wall__art img { display: block; width: 100%; height: auto; }
.wall__item--sheet .wall__cap { display: flex; justify-content: space-between; gap: 1rem;
  padding: .8rem 1rem; border-top: 1px solid var(--line); font-size: var(--step--1); }

/* ==========================================================================
   53. WALL — even frames, nothing cropped
   Letting each tile size to its own artwork left large holes in the grid.
   Every frame now shares a proportion and the work is fitted inside it, so
   the wall reads as a contact sheet and no poster gets cut.
   ========================================================================== */
.wall__item:not(.wall__item--live) .wall__art {
  aspect-ratio: 4 / 5;
  display: grid; place-items: center;
  background: var(--limestone-2);
  overflow: hidden;
}
.wall__item--wide:not(.wall__item--live) .wall__art { aspect-ratio: 16 / 10; }
.wall__item--tall:not(.wall__item--live) .wall__art { aspect-ratio: 3 / 4; }
/* width:auto with max-width and max-height inside a centred grid can resolve
   to zero — a square image in a 4:5 frame collapsed entirely. Explicit 100%
   with object-fit:contain sizes reliably and still never crops. */
.wall__item:not(.wall__item--live) .wall__art > * { max-width: 100%; max-height: 100%; }
.wall__item:not(.wall__item--live) .wall__art img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
}
.wall__item--sheet .wall__art { align-items: start; }
.wall__item--sheet .wall__art img { object-position: top; }
.wall__item--motion .wall__art .build { width: 100%; height: auto; }

/* ==========================================================================
   54. LIVE COMPONENT TILE — dark stage, and a label that says what it is
   Metal reads as metal against black: a light backdrop flattens the value
   range the reflections depend on.
   ========================================================================== */
.p3d { background: #0B0B0D; }
.p3d__ph { background: radial-gradient(120% 100% at 50% 35%, #191A1E, #0B0B0D) !important; color: #7C7F85 !important; }
.p3d__ph svg { color: #6E7176 !important; opacity: .6 !important; }
.p3d__hint { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: #9A9DA3; }

/* the deck sits under the stage on a dark ground */
.p3d__deck { background: #131417; border-top: 1px solid rgba(255,255,255,.1); }
.p3d__deckrow { border-color: rgba(255,255,255,.08) !important; }
.p3d__deckrow h4 { color: #8B8F95 !important; }
.p3d__deckrow h4 b { color: #EDEFF3 !important; }
.p3d__btn { background: #1C1E22; color: #C9CBCF; border-color: rgba(255,255,255,.16); }
.p3d__btn:hover { border-color: rgba(255,255,255,.45); }
.p3d__btn[aria-pressed="true"] { background: #F2F2F0; color: #101114; border-color: #F2F2F0; }
.p3d__sw { outline-color: rgba(255,255,255,.22); }
.p3d__sw.is-on { border-color: #F2F2F0; }
.p3d__hud { background: rgba(11,11,13,.86); border-color: rgba(255,255,255,.16); }
.p3d__hud h4 { color: #8B8F95; }
.p3d__name { color: #EDEFF3; }
.p3d__spec { border-top-color: rgba(255,255,255,.14); color: #8B8F95; }
.p3d__spec b { color: #EDEFF3; }

/* the badge now names the component instead of whispering "live" */
.wall__live-badge {
  background: #0B0B0D; border-color: rgba(255,255,255,.28); color: #F2F2F0;
  letter-spacing: .18em; padding: .42rem .85rem; font-size: .56rem;
}
.wall__live-badge i { background: #C6F800; box-shadow: 0 0 0 0 rgba(198,248,0,.7); animation: pulse 2.6s ease-out infinite; }
.wall__item--live .wall__cap, .wall__item--motion .wall__cap, .wall__item--sheet .wall__cap {
  background: var(--paper);
}
.wall__cap .mono { font-variation-settings: 'wght' 600; }
/* a component tile announces itself along the top of the frame */
/* A component tile has to declare what it is before anyone touches it, and the
   stage behind it is near-black — so this reads as a printed label on the work
   rather than a highlighter stripe. */
.wall__ribbon {
  position: absolute; z-index: 5; left: 0; top: 0;
  background: var(--paper); color: var(--ink);
  font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 660;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .6rem 1.1rem;
  display: inline-flex; align-items: center; gap: .5rem;
}
.wall__ribbon::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #16161A;
  box-shadow: 0 0 0 0 rgba(22,22,26,.5); animation: pulse 2.6s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) { .wall__ribbon::before { animation: none; } }


/* ==========================================================================
   54. LIVE COMPONENT LABEL — this is the thing we are selling, so it says so
   ========================================================================== */
.wall__item--live .wall__cap,
.wall__item--sheet .wall__cap { background: var(--ink); color: var(--paper); border-top: 0; }
.wall__item--live .wall__cap .mono,
.wall__item--sheet .wall__cap .mono { color: var(--paper); opacity: .9; }
.wall__live-badge {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.wall__live-badge i { background: #7CE07C; }

/* ==========================================================================
   55. STUDIO VIEWS — the same work, seen two ways
   A grid to scan and a reel to move through. Switching between them is itself
   a small demonstration of what a component can do.
   ========================================================================== */
.views { display: flex; gap: .4rem; align-items: center; }
.views__btn {
  border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer;
  border-radius: 100px; padding: .5rem 1.05rem;
  font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 540;
  font-size: .84rem; transition: background .3s, color .3s, border-color .3s;
}
.views__btn:hover { color: var(--fg); border-color: var(--fg); }
.views__btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---- reel ---- */
.wall--reel {
  display: flex; grid-template-columns: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  gap: clamp(.9rem, 1.7vw, 1.5rem);
  padding-bottom: 1.2rem;
  scrollbar-width: thin;
}
.wall--reel .wall__item {
  flex: 0 0 auto;
  width: clamp(260px, 30vw, 460px);
  scroll-snap-align: center;
  grid-column: auto !important;
}
.wall--reel .wall__item--wide { width: clamp(320px, 48vw, 760px); }
.wall--reel .wall__item--live { width: clamp(320px, 62vw, 900px); }
.wall--reel .wall__item:hover { transform: none; }

.reel-rail { display: flex; align-items: center; gap: 1rem; margin-top: .4rem; }
.reel-rail__track { flex: 1; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.reel-rail__track i { position: absolute; inset: 0 auto 0 0; width: 20%; background: var(--ink);
  transform-origin: left; transition: transform .18s linear; }
.reel-rail__nav { display: flex; gap: .4rem; }
.reel-rail__nav button {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: none; color: inherit; cursor: pointer; display: grid; place-items: center;
  transition: background .25s, color .25s, border-color .25s;
}
.reel-rail__nav button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.wall[data-view="grid"] ~ .reel-rail { display: none; }

/* ---- product sheet: client masthead + legal line ---------------------- */
.ps__brand img { width: 1.5em; height: auto; display: block; }
.ps__brand b { font-weight: 400; font-variation-settings: 'wdth' 100,'wght' 620; letter-spacing: -.01em; }
.ps__brand b i { font-style: normal; font-variation-settings: 'wdth' 100,'wght' 500;
  opacity: .45; margin-left: .4em; letter-spacing: .06em; font-size: .74em; }
.ps__brand--sm { font-size: .9rem; }
.ps__brand--sm img { width: 1.3em; }
.ps__foot-r { margin-left: auto; }
.ps__legal { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .62rem; line-height: 1.6; color: var(--muted); max-width: 86ch; }

/* ==========================================================================
   56. CONTACT — a pale room with something embossed into the wall
   The artwork sits almost invisible, pressed into the surface. A soft mask
   follows the pointer so it surfaces where you look and sinks again after.
   ========================================================================== */
.ct { position: relative; min-height: 100svh; display: grid; align-content: center;
  background: #F1F1EF; color: #1B1C1E; overflow: hidden;
  padding-block: clamp(7rem, 14vw, 11rem); }

.ct__emboss { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ct__emboss svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1080px, 104%); height: auto; }
.ct__emboss path, .ct__emboss circle { fill: none; stroke: #1B1C1E; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }

/* the pressed-in base: two offsets, one light one dark, barely there */
.ct__layer { position: absolute; inset: 0; }
.ct__layer--lo { filter: drop-shadow(0 1px 0 rgba(255,255,255,.9)); opacity: .075; }
.ct__layer--hi {
  opacity: 0; transition: opacity .5s var(--ease);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 -1px 0 rgba(0,0,0,.16));
  -webkit-mask-image: radial-gradient(circle 320px at var(--mx, -400px) var(--my, -400px), #000 0%, rgba(0,0,0,.55) 45%, transparent 72%);
  mask-image: radial-gradient(circle 320px at var(--mx, -400px) var(--my, -400px), #000 0%, rgba(0,0,0,.55) 45%, transparent 72%);
}
.ct.is-near .ct__layer--hi { opacity: .42; }
@media (hover: none) { .ct__layer--hi { display: none; } .ct__layer--lo { opacity: .085; } }
@media (prefers-reduced-motion: reduce) { .ct__layer--hi { display: none; } }

.ct__in { position: relative; z-index: 1; }

.ct__label { display: flex; align-items: baseline; gap: 1.1rem; padding-bottom: 1rem;
  border-bottom: 1px solid rgba(27,28,30,.2);
  font-family: ui-monospace, monospace; font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(27,28,30,.5); }
.ct__label .r { margin-left: auto; }

.ct h1 {
  font-family: var(--ff-display); font-weight: 800;
  font-variation-settings: 'wdth' 100, 'wght' 800;
  font-size: clamp(2.6rem, 11.5vw, 11rem); line-height: .82; letter-spacing: -.058em;
  text-transform: uppercase; margin-top: clamp(1.4rem, 3vw, 2.6rem);
}
.ct h1 em { font-style: normal; color: rgba(27,28,30,.34); }

.ct__grid { display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.4rem, 3vw, 3rem); margin-top: clamp(2.2rem, 5vw, 4rem); }
.ct__col { grid-column: span 3; display: grid; gap: .45rem; align-content: start; }
.ct__col:last-child { grid-column: 10 / span 3; }
@media (max-width: 900px) { .ct__col, .ct__col:last-child { grid-column: span 6; } }
@media (max-width: 560px) { .ct__col, .ct__col:last-child { grid-column: span 12; } }
.ct__col h2 { font-family: ui-monospace, monospace; font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(27,28,30,.45); margin-bottom: .5rem; }
.ct__col a, .ct__col p { color: #1B1C1E; font-size: var(--step-0); }
.ct__col a { display: inline-block; border-bottom: 1px solid rgba(27,28,30,.25); padding-bottom: 2px; }
.ct__col a:hover { border-bottom-color: #1B1C1E; }
.ct__big { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 620;
  font-size: clamp(1.3rem, 2.6vw, 2rem); letter-spacing: -.02em; border-bottom: 0 !important; }

.ct__form { margin-top: clamp(2.4rem, 5vw, 4rem); padding-top: clamp(1.6rem,3vw,2.4rem);
  border-top: 1px solid rgba(27,28,30,.2); }
.ct__form .field label { color: rgba(27,28,30,.5); }
.ct__form .field input, .ct__form .field textarea {
  color: #1B1C1E; border-bottom-color: rgba(27,28,30,.25); }
.ct__form .field input:focus, .ct__form .field textarea:focus { border-bottom-color: #1B1C1E; }
.ct__form .chip span { border-color: rgba(27,28,30,.25); color: rgba(27,28,30,.7); }
.ct__form .chip input:checked + span { background: #1B1C1E; color: #F1F1EF; border-color: #1B1C1E; }
.ct__form .btn { border-color: rgba(27,28,30,.3); color: #1B1C1E; }
.ct__form .btn--volt { background: #1B1C1E; color: #F1F1EF; border-color: #1B1C1E; }
.ct__form .btn--volt::before { background: #35373A; }
.ct__form .btn--volt:hover { color: #F1F1EF !important; }
.ct__form .muted { color: rgba(27,28,30,.5); }

/* ==========================================================================
   57. CATALOGUE SHEET — a stock list set as a document
   ========================================================================== */
.tcat { background: #F4F4F1; border: 1px solid var(--line); border-radius: 3px;
  padding: clamp(1.4rem, 4vw, 4rem); margin-top: 1.4rem;
  box-shadow: 0 30px 80px rgba(22,22,26,.07); }
.tcat .mono { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }

.tcat__top { display: grid; grid-template-columns: auto minmax(0,1fr) minmax(0,1.1fr);
  gap: clamp(1.2rem,3vw,3rem); align-items: start; padding-bottom: clamp(1.6rem,3.5vw,3rem); }
@media (max-width: 780px) { .tcat__top { grid-template-columns: 1fr; } }
.tcat__mark img { width: 64px; height: auto; }
.tcat__intro { line-height: 1.9; color: var(--ink); letter-spacing: .16em; }
.tcat__meta { display: grid; gap: 0; align-content: start; }
.tcat__meta > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem;
  padding: .45rem 0; border-bottom: 1px solid rgba(22,22,26,.18); }
.tcat__meta dt { font-family: ui-monospace, monospace; font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.tcat__meta dd { font-size: .78rem; text-align: right; }

.tcat__brandline { display: flex; flex-wrap: wrap; gap: .6rem 2rem; align-items: baseline;
  padding: 1rem 0; border-top: 1px solid rgba(22,22,26,.18); border-bottom: 1px solid rgba(22,22,26,.18); }
.tcat__brandline .mono { color: var(--muted); margin-left: auto; }

.tcat__head { display: grid; grid-template-columns: 86px minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1.4fr);
  gap: 1rem; padding: 1rem 0 .5rem; color: var(--muted); }
@media (max-width: 780px) { .tcat__head { display: none; } }

.tcat__group { padding-top: 1.2rem; }
.tcat__group h2 { color: var(--muted); padding-bottom: .5rem; border-bottom: 1px solid rgba(22,22,26,.18);
  font-family: ui-monospace, monospace; font-weight: 400; }

.tcat__row { display: grid; grid-template-columns: 86px minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1.4fr);
  gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid rgba(22,22,26,.09); }
@media (max-width: 780px) {
  .tcat__row { grid-template-columns: 64px minmax(0,1fr); gap: .8rem 1rem; }
  .tcat__size, .tcat__gauges { grid-column: 2; }
}
.tcat__sec { width: 62px; height: 62px; }
.tcat__sec circle, .tcat__sec rect { fill: none; stroke: #1B1C1E; stroke-width: 1.4; }
.tcat__name { font-size: var(--step-0); }
.tcat__code { font-family: ui-monospace, monospace; font-size: .6rem; letter-spacing: .1em; color: var(--muted); margin-top: .15rem; }
.tcat__use { font-size: .74rem; color: var(--muted); margin-top: .25rem; }
.tcat__size { font-family: ui-monospace, monospace; font-size: .8rem; }
.tcat__gauges { display: grid; gap: .3rem; }
.tcat__gauges span { display: grid; grid-template-columns: 3.6rem 3rem 1fr; gap: .6rem;
  font-family: ui-monospace, monospace; font-size: .64rem; color: var(--muted); }
.tcat__gauges b { font-weight: 400; color: var(--ink); }
.tcat__gauges i { font-style: normal; text-align: right; }

.tcat__notes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.2rem,3vw,2.6rem);
  padding: clamp(1.6rem,3.5vw,2.6rem) 0; border-top: 1px solid rgba(22,22,26,.18); margin-top: 1.6rem; }
@media (max-width: 780px) { .tcat__notes { grid-template-columns: 1fr; } }
.tcat__notes h3 { color: var(--muted); margin-bottom: .5rem; font-family: ui-monospace, monospace; font-weight: 400; }
.tcat__notes p { font-size: .76rem; color: var(--muted); line-height: 1.6; }

.tcat__foot { display: flex; gap: 1rem 2rem; flex-wrap: wrap; align-items: baseline;
  padding-top: 1rem; border-top: 1px solid rgba(22,22,26,.18); }
.tcat__foot .mono { color: var(--muted); }
.tcat__foot-r { margin-left: auto; }

/* ==========================================================================
   58. SPEC WRITER — a stepped wizard that writes the document
   ========================================================================== */
.sw { display: grid; grid-template-rows: auto auto 1fr auto; height: 100%;
  background: #FBFBF9; color: #1B1C1E; min-height: 0; }

.sw__rail { display: flex; gap: 2px; padding: .55rem .7rem 0; overflow-x: auto;
  scrollbar-width: none; }
.sw__rail::-webkit-scrollbar { display: none; }
.sw__tab { flex: none; border: 0; background: none; cursor: pointer; color: #9B9BA3;
  padding: .3rem .5rem .5rem; font-family: ui-monospace, monospace; font-size: .5rem;
  letter-spacing: .12em; text-transform: uppercase; border-bottom: 2px solid transparent; }
.sw__tab.done { color: #5A5B60; border-bottom-color: rgba(27,28,30,.22); }
.sw__tab[aria-pressed="true"] { color: #1B1C1E; border-bottom-color: #1B1C1E; }

.sw__ask { padding: .7rem .9rem .2rem; display: grid; gap: .15rem; }
.sw__title { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 600;
  font-size: .98rem; letter-spacing: -.015em; }
.sw__desc { font-size: .6rem; color: #82838A; line-height: 1.4; }

.sw__fields { padding: .5rem .9rem .2rem; display: grid; gap: .5rem; align-content: start;
  overflow-y: auto; min-height: 0; }
.sw__f { display: grid; gap: .22rem; }
.sw__f label { font-family: ui-monospace, monospace; font-size: .5rem; letter-spacing: .1em;
  text-transform: uppercase; color: #82838A; }
.sw__f input { border: 1px solid rgba(27,28,30,.18); border-radius: 6px; background: #fff;
  padding: .38rem .5rem; font-family: inherit; font-size: .68rem; color: #1B1C1E; width: 100%; }
.sw__f input:focus { outline: 0; border-color: #1B1C1E; box-shadow: 0 0 0 3px rgba(27,28,30,.07); }
.sw__sel { border: 1px solid rgba(27,28,30,.18); border-radius: 6px; background: #fff;
  padding: .38rem .5rem; font-size: .68rem; display: flex; justify-content: space-between;
  gap: .5rem; cursor: pointer; }
.sw__sel i { font-style: normal; color: #9B9BA3; }
.sw__opts { display: flex; flex-wrap: wrap; gap: 3px; }
.sw__opt { border: 1px solid rgba(27,28,30,.18); background: #fff; color: #4A4B50; cursor: pointer;
  border-radius: 100px; padding: .28rem .6rem; font-family: inherit; font-size: .62rem; }
.sw__opt:hover { border-color: #1B1C1E; }
.sw__opt[aria-pressed="true"], .sw__opt--go { background: #1B1C1E; color: #fff; border-color: #1B1C1E; }

.sw__out { margin: .3rem .9rem 0; padding: .6rem .7rem; background: #101114; color: #E4E5E7;
  border-radius: 6px; font-family: ui-monospace, monospace; font-size: .53rem; line-height: 1.75;
  white-space: pre-wrap; overflow: auto; height: 150px; }

.sw__foot { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem .8rem; }
.sw__btn { border: 1px solid rgba(27,28,30,.2); background: none; color: #1B1C1E; cursor: pointer;
  border-radius: 100px; padding: .32rem .8rem; font-family: ui-monospace, monospace;
  font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; }
.sw__btn:disabled { opacity: .3; cursor: not-allowed; }
.sw__btn--go { background: #1B1C1E; color: #fff; border-color: #1B1C1E; margin-left: auto; }
/* the component ribbon sits over the top-left corner, so the step rail has to
   start below it or the first three steps are hidden behind the label */
.wall__item--sb .wall__art { aspect-ratio: 3 / 4; background: #FBFBF9; }
.wall__item--sb .sw__rail { padding-top: 2.7rem; }

/* ==========================================================================
   59. LAPTOP — a real machine, drawn rather than photographed
   ========================================================================== */
.lap { width: 100%; max-width: 1060px; margin-inline: auto; }
.lap__lid {
  background: linear-gradient(168deg, #3C3F44, #16181B 46%, #26292D);
  border-radius: 16px 16px 6px 6px; padding: 12px 12px 20px;
  box-shadow: 0 36px 70px rgba(22,22,26,.34), inset 0 1px 0 rgba(255,255,255,.14);
  position: relative;
}
.lap__cam { position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: #0A0B0C;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.lap__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: #0B0C0E; }
.lap__glare { position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: linear-gradient(116deg, rgba(255,255,255,.07) 0 16%, transparent 40%); mix-blend-mode: screen; }
.lap__brand { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
  font-family: ui-monospace, monospace; font-size: .5rem; letter-spacing: .3em; color: rgba(255,255,255,.22); }
.lap__base {
  height: 15px; border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #33363A, #1B1D20 62%, #101214);
  box-shadow: 0 22px 34px rgba(22,22,26,.4);
  position: relative;
}
.lap__notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 96px; height: 5px; border-radius: 0 0 6px 6px; background: rgba(0,0,0,.4); }
.lap__foot { width: 78%; height: 7px; margin: 0 auto; border-radius: 0 0 20px 20px;
  background: linear-gradient(180deg, rgba(22,22,26,.3), transparent); filter: blur(2px); }

/* ---- the real Profile Panels chrome, at scale ---- */
.ppnav { position: absolute; top: 0; left: 0; right: 0; z-index: 4; color: #fff; }
.ppnav__util { display: flex; align-items: center; gap: 1.4em; justify-content: flex-end;
  padding: .85% 3.2%; font-family: var(--ff-display);
  font-size: clamp(4px,.58vw,7px); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.6); border-bottom: 1px solid rgba(255,255,255,.12); }
.ppnav__main { display: flex; align-items: center; gap: 1.5em; padding: 1.6% 3.2%;
  font-family: var(--ff-display); font-size: clamp(5px,.72vw,8.5px);
  letter-spacing: .1em; text-transform: uppercase; }
.ppnav__brand { display: inline-flex; align-items: center; gap: .5em; margin-right: auto;
  font-variation-settings: 'wdth' 100,'wght' 640; letter-spacing: .06em; }
.ppnav__brand svg { width: 1.5em; height: auto; }
.ppnav__main span.dd::after { content: ' \25BE'; opacity: .6; }
.ppnav__cta { border: 1px solid rgba(255,255,255,.65); border-radius: 100px; padding: .45em 1.1em; }

/* ==========================================================================
   60. RIG — laptop and phone, with the site scrolling inside both
   The page inside is a tall column; scroll position drives it, so the two
   move together and at different rates, the way real screens would.
   ========================================================================== */
/* the phone stands in front of the machine, not beside it in mid-air */
.rig2 { display: grid; grid-template-columns: minmax(0,1fr) 172px;
  gap: clamp(.5rem, 1.6vw, 1.6rem); align-items: end; max-width: 1160px; margin-inline: auto; }
.rig2 .ph { margin-bottom: 1.5rem; margin-left: -3.5rem; position: relative; z-index: 2; }
@media (max-width: 860px) { .rig2 { grid-template-columns: 1fr; justify-items: center; } .rig2 .ph { display: none; } }

.lap__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: #0B0C0E; }
.scrollpage { position: absolute; inset: 0; overflow: hidden; }
.scrollpage__inner { position: absolute; left: 0; right: 0; top: 0;
  transform: translate3d(0, var(--y, 0), 0); will-change: transform; }

/* ---- phone ---- */
.ph { width: 190px; }
.ph__body { background: linear-gradient(160deg, #4A4E54, #131518); border-radius: 26px; padding: 6px;
  box-shadow: 0 30px 54px rgba(22,22,26,.42), 0 2px 0 rgba(255,255,255,.12) inset; }
.ph__screen { position: relative; aspect-ratio: 9/19.5; overflow: hidden; border-radius: 21px; background: #0B0C0E; }
.ph__notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 52px; height: 14px;
  background: #0A0A0B; border-radius: 9px; z-index: 6; }

/* ---- the fictional page that scrolls inside ---- */
.ppg { color: #fff; font-family: var(--ff-display); }
.ppg__hero { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.ppg__hero img { width: 100%; height: 100%; object-fit: cover; }
.ppg__hero .ppsite__scrim { position: absolute; inset: 0; }
.ppg__cap { position: absolute; left: 4%; bottom: 8%; z-index: 3; }
.ppg__sec { background: #0E1013; padding: 5% 4%; border-top: 1px solid rgba(255,255,255,.1); }
.ppg__sec h3 { font-size: clamp(8px,1.5vw,18px); font-variation-settings: 'wdth' 100,'wght' 600;
  letter-spacing: -.02em; margin-bottom: 3%; }
.ppg__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2%; }
.ppg__grid span { display: grid; gap: .3em; border: 1px solid rgba(255,255,255,.12); padding: 4% 4%;
  font-size: clamp(4px,.62vw,7.5px); color: rgba(255,255,255,.55); letter-spacing: .04em; }
.ppg__grid b { font-weight: 400; color: #fff; font-size: clamp(5px,.75vw,9px);
  font-variation-settings: 'wdth' 100,'wght' 560; }
.ppg__tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 2%; }
.ppg__tile { aspect-ratio: 4/3; position: relative; overflow: hidden; }
.ppg__tile span { position: absolute; left: 6%; bottom: 6%; font-size: clamp(4px,.6vw,7px);
  letter-spacing: .1em; text-transform: uppercase; }
.ppg__term { background: #121317; border: 1px solid #2A2C34; border-radius: 3%/6%; padding: 4%;
  font-family: ui-monospace, monospace; font-size: clamp(4px,.66vw,8px); line-height: 1.9; color: #ECECED; }
.ppg__term i { color: #E4551F; font-style: normal; margin-right: .6em; }
.ppg__foot { background: #08090B; padding: 5% 4%; display: flex; justify-content: space-between;
  font-size: clamp(4px,.58vw,7px); color: rgba(255,255,255,.4); letter-spacing: .1em; text-transform: uppercase; }

/* the phone runs the same page, one column */
.ph .ppg__grid, .ph .ppg__tiles { grid-template-columns: 1fr 1fr; }
.ph .ppnav__util { display: none; }
.ph .ppnav__main { gap: .6em; }
.ph .ppnav__main span.dd, .ph .ppnav__cta { display: none; }
.ph .ppg__cap { bottom: 12%; }

/* ==========================================================================
   61. METALWHIZ CASE STUDY
   ========================================================================== */
.mw { border: 1px solid rgba(255,255,255,.16); border-radius: 16px; overflow: hidden; margin-bottom: clamp(1.4rem,3vw,2.4rem); }
.mw__head { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: baseline;
  padding: 1rem clamp(1rem,2.4vw,1.8rem); border-bottom: 1px solid rgba(255,255,255,.14); }
.mw__head .mono { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: #9B9CA0; }
.mw__head h3 { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 620;
  font-size: var(--step-1); letter-spacing: -.015em; }
.mw__r { margin-left: auto; }
.mw__body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: clamp(1.2rem,3vw,2.4rem); padding: clamp(1.2rem,2.6vw,2rem); align-items: start; }
@media (max-width: 860px) { .mw__body { grid-template-columns: 1fr; } }
.mw__term { background: #121317; border: 1px solid #2A2C34; border-radius: 12px;
  padding: 1rem 1.1rem; font-family: ui-monospace, monospace;
  font-size: .68rem; line-height: 2; color: #ECECED; }
.mw__termbar { display: flex; align-items: center; gap: .6rem; padding-bottom: .7rem; margin-bottom: .5rem;
  border-bottom: 1px solid #25272F; }
.mw__termbar i { width: 7px; height: 7px; border-radius: 50%; background: #E4551F; }
.mw__termbar .mono { font-size: .55rem; letter-spacing: .1em; color: #8A8D96; text-transform: none; }
.mw__term i { color: #E4551F; font-style: normal; margin-right: .55em; }
.mw__cur span { display: inline-block; width: 7px; height: 1em; background: #E4551F;
  vertical-align: -2px; animation: mwblink 1.05s steps(1) infinite; }
@keyframes mwblink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mw__cur span { animation: none; } }
.mw__text p { color: #A4A4AC; font-size: var(--step--1); line-height: 1.65; }
.mw__text p + p { margin-top: .9rem; }
.mw__text b { color: var(--paper); font-weight: 400; font-variation-settings: 'wdth' 100,'wght' 600; }
.mw__stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border-top: 1px solid rgba(255,255,255,.14); }
@media (max-width: 760px) { .mw__stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.mw__stats > div { padding: .9rem clamp(1rem,2.4vw,1.8rem); border-right: 1px solid rgba(255,255,255,.12); }
.mw__stats > div:last-child { border-right: 0; }
.mw__stats dt { font-family: ui-monospace, monospace; font-size: .55rem; letter-spacing: .16em;
  text-transform: uppercase; color: #82838A; }
.mw__stats dd { font-size: var(--step--1); margin-top: .3rem; }

/* ==========================================================================
   62. LAPTOP, PROPERLY — lid and deck as two planes on a hinge
   The flat rectangle read as a picture frame. This is a real machine: the
   deck lies back in perspective with a keyboard on it, the lid stands almost
   upright, and the screen catches the room. Angle stays shallow so the site
   inside is still legible — realism that costs readability is a bad trade.
   ========================================================================== */
.mbp { perspective: 2600px; perspective-origin: 50% 32%; padding-bottom: 2.5rem; }
.mbp__unit { transform-style: preserve-3d; transform: rotateX(7deg) rotateY(-2deg); }

.mbp__lid {
  transform-origin: 50% 100%; transform: rotateX(-3.2deg); transform-style: preserve-3d;
  background: linear-gradient(158deg, #4A4E54 0%, #26292E 22%, #16181B 60%, #2C2F34 100%);
  border-radius: 14px 14px 3px 3px; padding: 11px 11px 15px;
  box-shadow: 0 2px 0 rgba(255,255,255,.14) inset, 0 -1px 0 rgba(0,0,0,.5) inset;
}
.mbp__screen {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 5px;
  background: #08090B; box-shadow: 0 0 0 1px #0A0B0D, 0 8px 26px rgba(0,0,0,.5) inset;
}
.mbp__notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 8;
  width: 17%; height: 11px; background: #101215; border-radius: 0 0 7px 7px;
  display: grid; place-items: center;
}
.mbp__notch i { width: 4px; height: 4px; border-radius: 50%; background: #05060A;
  box-shadow: inset 0 0 0 1px rgba(120,140,160,.35); }
.mbp__glare {
  position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: 5px;
  background:
    linear-gradient(112deg, rgba(255,255,255,.10) 0 14%, rgba(255,255,255,.02) 26%, transparent 44%),
    radial-gradient(120% 80% at 78% 6%, rgba(255,255,255,.07), transparent 60%);
  mix-blend-mode: screen;
}
.mbp__chin { text-align: center; padding-top: 6px; }
.mbp__chin span { font-family: ui-monospace, monospace; font-size: .48rem;
  letter-spacing: .34em; color: rgba(255,255,255,.24); }

/* ---- the deck, laid back ---- */
.mbp__deck {
  transform-origin: 50% 0; transform: rotateX(74deg);
  height: 300px; margin-top: -2px;
  background: linear-gradient(180deg, #C9CDD2 0%, #A8ADB3 34%, #8E939A 100%);
  border-radius: 3px 3px 16px 16px;
  box-shadow: 0 -1px 0 rgba(255,255,255,.5) inset, 0 -22px 34px rgba(0,0,0,.18) inset;
  padding: 12px 3.2% 0; position: relative;
}
.mbp__hinge {
  position: absolute; top: 0; left: 22%; right: 22%; height: 5px;
  background: linear-gradient(180deg, #4B5057, #7C8188); border-radius: 0 0 4px 4px;
}
.mbp__keys { display: grid; gap: 2.4px; }
.mbp__krow { display: grid; gap: 2.4px; }
.mbp__krow i {
  height: 15px; border-radius: 3px; display: block;
  background: linear-gradient(180deg, #3A3E44, #101215);
  box-shadow: 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.4);
}
.mbp__krow--fn i { height: 9px; }
.mbp__pad {
  width: 34%; height: 78px; margin: 9px auto 0; border-radius: 7px;
  background: linear-gradient(180deg, #B4B9BF, #A2A7AD);
  box-shadow: 0 0 0 1px rgba(0,0,0,.14) inset, 0 1px 0 rgba(255,255,255,.45);
}

/* ---- the machine sits on something ---- */
.mbp__shadow {
  height: 26px; margin: -18px auto 0; width: 88%;
  background: radial-gradient(ellipse at center, rgba(20,22,26,.36), transparent 72%);
  filter: blur(9px);
}
@media (max-width: 860px) {
  .mbp { perspective: 1600px; }
  .mbp__unit { transform: rotateX(5deg); }
  .mbp__deck { height: 150px; }
  .mbp__krow i { height: 8px; }
  .mbp__krow--fn i { height: 5px; }
  .mbp__pad { height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .mbp__unit { transform: none; } .mbp__deck { display: none; } }

/* ==========================================================================
   63. CATALOGUE BOOK — cover and spread, drawn
   The tubes are CSS: a body gradient for the specular run down the round,
   an ellipse cap, and a contact shadow. Clean white ground, nothing else.
   ========================================================================== */
.book { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); }

/* ---- cover ---- */
.book__cover {
  position: relative; aspect-ratio: 3 / 4; max-width: 460px;
  background: #F2F2EF; border-radius: 2px 6px 6px 2px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(22,22,26,.2), inset 14px 0 22px -18px rgba(0,0,0,.5);
  padding: clamp(1.4rem, 3.4vw, 2.6rem); display: grid; align-content: space-between;
}
.book__spine { position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
  background: linear-gradient(90deg, rgba(0,0,0,.16), rgba(0,0,0,0)); }
.book__cover h3 { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 620;
  font-size: clamp(1.2rem, 2.6vw, 1.9rem); letter-spacing: -.025em; line-height: 1.05; color: #1B1C1E; }
.book__cover .mono { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: #6E6E77; }

/* ---- spread ---- */
.book__spread {
  position: relative; min-height: 520px; background: #FBFBF9;
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 34px 70px rgba(22,22,26,.18);
  display: grid; grid-template-rows: 1fr auto;
}
.book__gutter { position: absolute; left: 50%; top: 0; bottom: 0; width: 46px;
  transform: translateX(-50%); pointer-events: none; z-index: 3;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.10) 44%, rgba(0,0,0,.14) 50%, rgba(0,0,0,.06) 58%, rgba(0,0,0,0)); }

/* ---- the row of tubes ---- */
.tubes { display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(1.4rem, 5vw, 4.4rem); padding: clamp(1.6rem,5vw,3.4rem) clamp(1rem,4vw,3rem) 0; }
.tube { display: grid; justify-items: center; gap: .9rem; position: relative; margin: 0; }
.tube__body {
  display: block;              /* a span ignores width/height without this */
  position: relative; border-radius: 2px;
  background: linear-gradient(90deg,
    #7E858C 0%, #9BA2A9 12%, #C6CCD2 30%, #EDEFF1 44%, #D2D8DD 58%, #A0A7AE 78%, #6F767D 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset;
}
.tube__body::before {   /* the open end, seen slightly from above */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 42%, #4A5057 0 42%, #7C838A 55%, #C9CFD5 78%, #EAECEE 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.tube__shadow { display: block; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  height: 9px; border-radius: 50%; background: rgba(22,22,26,.24); filter: blur(4px); z-index: -1; }
.tube__lab { text-align: center; }
.tube__lab b { display: block; font-family: var(--ff-display);
  font-variation-settings: 'wdth' 100,'wght' 560; font-size: clamp(.78rem,1.5vw,1rem); color: #1B1C1E; }
.tube__lab span { display: block; font-family: ui-monospace, monospace; font-size: .55rem;
  letter-spacing: .12em; text-transform: uppercase; color: #6E6E77; margin-top: .25rem; }

/* ---- caption band, the way a real catalogue closes a spread ---- */
/* three fixed proportions rather than fr against auto: a long paragraph in
   the middle column was starving the notes column down to a few characters */
.book__cap { display: grid; grid-template-columns: 3.5rem minmax(0,1fr) 15rem;
  gap: clamp(1rem,3vw,2.4rem); align-items: start;
  padding: clamp(.9rem,2.4vw,1.6rem) clamp(1rem,4vw,3rem); border-top: 1px solid rgba(22,22,26,.14); }
@media (max-width: 860px) { .book__cap { grid-template-columns: 1fr; } }
.book__cap .pg { font-family: ui-monospace, monospace; font-size: .58rem; color: #8A8A92; letter-spacing: .1em; }
/* an h4 inside a p is invalid: the browser closes the paragraph before it and
   the remaining text becomes a stray grid item, which is what collapsed the
   column to one word per line. Inline element instead. */
.book__cap .pname { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 620;
  font-weight: 400; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  color: #1B1C1E; margin-right: .6em; }
.book__cap > p { min-width: 0; font-size: .72rem; line-height: 1.55; color: #4A4B50; }

.book__cap .right { min-width: 0; font-size: .66rem; color: #6E6E77; line-height: 1.6; }
.book__cap .right p { color: #6E6E77; }
.book__finish { display: flex; gap: 5px; margin-top: .5rem; }
.book__finish i { width: 15px; height: 15px; border-radius: 50%; display: block;
  outline: 1px solid rgba(22,22,26,.16); outline-offset: -1px; }

/* ==========================================================================
   64. THE STACK — six components, six different-looking things
   A single house style made them read as one screenshot repeated. Each now
   borrows the register of the software it actually resembles.
   ========================================================================== */

/* ---- 64.1 Scheduling: white, generous, one thing at a time ------------- */
.uiA { background: #FFF; color: #1B1C1E; padding: clamp(1rem,2.2vw,1.5rem); display: grid; gap: 1rem; }
.uiA__top { display: flex; align-items: baseline; justify-content: space-between; }
.uiA__month { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 560; font-size: 1.05rem; }
.uiA__dow, .uiA__grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.uiA__dow span { text-align: center; font-family: ui-monospace, monospace; font-size: .5rem;
  letter-spacing: .1em; color: #9B9BA3; }
.uiA__grid b { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  font-weight: 400; font-size: .72rem; font-variant-numeric: tabular-nums; color: #4A4B50; }
.uiA__grid b.dim { color: #C8C8CE; }
.uiA__grid b.on { background: #F0F0EE; color: #1B1C1E; }
.uiA__grid b.sel { background: #1B1C1E; color: #fff; }
.uiA__slots { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.uiA__slots span { border: 1px solid rgba(22,22,26,.14); border-radius: 100px; padding: .4rem 0;
  text-align: center; font-size: .66rem; font-variant-numeric: tabular-nums; color: #4A4B50; }
.uiA__slots span.sel { background: #1B1C1E; color: #fff; border-color: #1B1C1E; }
.uiA__conf { display: flex; align-items: center; gap: .5rem; border-top: 1px solid rgba(22,22,26,.1);
  padding-top: .8rem; font-size: .7rem; color: #4A4B50; }
.uiA__conf i { width: 15px; height: 15px; border-radius: 50%; background: #1B1C1E; color: #fff;
  display: grid; place-items: center; font-size: .5rem; font-style: normal; }

/* ---- 64.2 Quoting: a Mercury-style form ------------------------------- */
.uiB { background: #FCFCFB; color: #1B1C1E; padding: clamp(1rem,2.2vw,1.5rem); display: grid; gap: .7rem; }
.uiB__f { display: grid; gap: .28rem; }
.uiB__f label { font-size: .58rem; letter-spacing: .04em; color: #82838A; }
.uiB__f div { border: 1px solid rgba(22,22,26,.16); border-radius: 8px; background: #fff;
  padding: .5rem .65rem; font-size: .74rem; display: flex; justify-content: space-between; gap: .5rem;
  box-shadow: 0 1px 2px rgba(22,22,26,.04); }
.uiB__f div span.ph { color: #A8A8AF; }
.uiB__f--focus div { border-color: #1B1C1E; box-shadow: 0 0 0 3px rgba(27,28,30,.08); }
.uiB__row { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.uiB__sum { border: 1px solid rgba(22,22,26,.12); border-radius: 10px; background: #F6F6F4; padding: .7rem .8rem;
  display: grid; gap: .3rem; }
.uiB__sum p { display: flex; justify-content: space-between; font-size: .66rem; color: #6E6E77; }
.uiB__sum p.tot { border-top: 1px solid rgba(22,22,26,.14); padding-top: .45rem; margin-top: .2rem;
  color: #1B1C1E; }
.uiB__sum p.tot b { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 600;
  font-weight: 400; font-size: 1.05rem; }
.uiB__btn { background: #1B1C1E; color: #fff; border-radius: 8px; text-align: center;
  padding: .55rem; font-size: .72rem; }

/* ---- 64.3 Tracking: a shipping timeline ------------------------------- */
.uiC { background: #0F1113; color: #E9EAEC; padding: clamp(1rem,2.2vw,1.5rem); display: grid; gap: .8rem; }
.uiC__map { height: 54px; border-radius: 8px; position: relative; overflow: hidden;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 22px), #16181B; }
.uiC__map i { position: absolute; left: 8%; right: 8%; top: 50%; height: 1px; background: rgba(255,255,255,.2); }
.uiC__map b { position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%;
  transform: translate(-50%,-50%); background: #E9EAEC; }
.uiC__map b.done { background: #6E7076; width: 6px; height: 6px; }
.uiC__steps { display: grid; gap: .45rem; }
.uiC__steps p { display: grid; grid-template-columns: 12px 1fr auto; gap: .6rem; align-items: center;
  font-size: .68rem; color: #A4A4AC; }
.uiC__steps p.now { color: #fff; }
.uiC__steps i { width: 7px; height: 7px; border-radius: 50%; background: #3A3C41; }
.uiC__steps p.done i { background: #6E7076; }
.uiC__steps p.now i { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.16); }
.uiC__steps span { font-family: ui-monospace, monospace; font-size: .56rem; color: #6E7076; }
.uiC__cost { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.12);
  padding-top: .6rem; font-family: ui-monospace, monospace; font-size: .6rem; color: #8B8F95; }
.uiC__cost b { color: #fff; font-weight: 400; }

/* ---- 64.4 Back office: a dashboard with an actual chart --------------- */
.uiD { background: #16181B; color: #E9EAEC; padding: clamp(1rem,2.2vw,1.5rem); display: grid; gap: .8rem; }
.uiD__kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; }
.uiD__kpis div { border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: .5rem .6rem; }
.uiD__kpis span { font-family: ui-monospace, monospace; font-size: .5rem; letter-spacing: .1em;
  text-transform: uppercase; color: #82838A; display: block; }
.uiD__kpis b { font-family: var(--ff-display); font-variation-settings: 'wdth' 96,'wght' 600;
  font-weight: 400; font-size: 1rem; display: block; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.uiD__chart { display: flex; align-items: flex-end; gap: 4px; height: 76px;
  border-bottom: 1px solid rgba(255,255,255,.14); }
.uiD__chart i { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg,#E9EAEC,#8A8D93); }
.uiD__chart i.low { background: linear-gradient(180deg,#4A4C52,#33353A); }
.uiD__legend { display: flex; justify-content: space-between; font-family: ui-monospace, monospace;
  font-size: .5rem; color: #6E7076; }

/* ---- 64.5 Integrations: a wiring diagram ------------------------------ */
.uiE { background: #FCFCFB; color: #1B1C1E; padding: clamp(1.1rem,2.4vw,1.7rem); display: grid; gap: .9rem;
  align-content: center; }
.uiE__flow { display: grid; gap: .5rem; }
.uiE__lane { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; align-items: center; }
.uiE__node { border: 1px solid rgba(22,22,26,.16); border-radius: 8px; background: #fff; padding: .45rem .6rem;
  font-size: .66rem; text-align: center; box-shadow: 0 1px 2px rgba(22,22,26,.05); }
.uiE__node.dark { background: #1B1C1E; color: #fff; border-color: #1B1C1E; }
.uiE__arr { font-family: ui-monospace, monospace; font-size: .7rem; color: #A8A8AF; }
.uiE__sync { display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(22,22,26,.12); padding-top: .6rem;
  font-family: ui-monospace, monospace; font-size: .58rem; color: #82838A; }
.uiE__sync b { color: #1B1C1E; font-weight: 400; }
.uiE__dot { width: 6px; height: 6px; border-radius: 50%; background: #1B1C1E; display: inline-block;
  margin-right: .4rem; }

/* ---- 64.6 Literature: a stack of documents ---------------------------- */
.uiF { background: #EDEDEA; padding: clamp(1.2rem,3vw,2rem); display: grid; place-items: center; }
.uiF__stack { position: relative; width: 64%; aspect-ratio: 3/4; }
.uiF__stack i { position: absolute; inset: 0; background: #fff; border-radius: 2px;
  box-shadow: 0 8px 22px rgba(22,22,26,.14); }
.uiF__stack i:nth-child(1) { transform: rotate(-7deg) translate(-7%, 2%); }
.uiF__stack i:nth-child(2) { transform: rotate(4deg) translate(5%, -1%); }
.uiF__stack i:nth-child(3) { display: grid; align-content: start; gap: 5px; padding: 12%; }
.uiF__stack i:nth-child(3)::before { content: ''; height: 26%; background: #DCDCD8; border-radius: 1px; }
.uiF__stack i:nth-child(3)::after { content: ''; height: 3px; background: #1B1C1E; width: 46%; }
.uiF__lines { position: absolute; left: 12%; right: 12%; bottom: 14%; display: grid; gap: 4px; }
.uiF__lines b { height: 2px; background: #D2D2CE; display: block; border-radius: 1px; }
.uiF__lines b:nth-child(2) { width: 78%; }
.uiF__lines b:nth-child(3) { width: 88%; }
.uiF__lines b:nth-child(4) { width: 54%; }
.ui__pane { display: grid; }
.ui__pane > * { min-height: 210px; }

/* ==========================================================================
   65. THE DESK — a machine on perforated steel
   Two surfaces: a dark wall behind and a light perforated sheet in front,
   with the perforation laid into perspective so it recedes properly.
   ========================================================================== */
.desk {
  position: relative; border-radius: 18px; overflow: hidden;
  padding: clamp(2.5rem, 7vw, 6rem) clamp(1rem, 4vw, 4rem) clamp(4rem, 10vw, 8rem);
  background: linear-gradient(180deg, #3A3E44 0%, #2E3237 44%, #2A2D32 46%, #2A2D32 100%);
}
/* the sheet in front, in perspective */
/* the sheet starts at the wall line and runs toward the viewer, so the
   machine has something to stand on rather than floating in a dark box */
.desk__floor {
  position: absolute; left: -40%; right: -40%; top: 46%; bottom: -40%;
  background:
    radial-gradient(circle at 4px 4px, rgba(24,26,29,.85) 2.6px, transparent 2.8px) 0 0/19px 19px,
    radial-gradient(circle at 4px 5.4px, rgba(255,255,255,.5) 2.4px, transparent 2.6px) 0 0/19px 19px,
    linear-gradient(180deg, #C6C9CC 0%, #AEB2B6 40%, #94989D 100%);
  transform: perspective(1100px) rotateX(58deg);
  transform-origin: 50% 0;
  z-index: 0;
}
/* light falls across the sheet */
.desk__floor::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(104deg, rgba(255,255,255,.32) 0 18%, rgba(255,255,255,0) 42%, rgba(0,0,0,.30) 100%);
}
/* the wall */
.desk__wall {
  position: absolute; inset: 0 0 46% 0; z-index: 0;
  background: linear-gradient(180deg, #43474D 0%, #33373C 70%, #2C3035 100%);
}
.desk__wall::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(90% 120% at 18% 0%, rgba(255,255,255,.10), transparent 62%);
}

.desk__stage { position: relative; z-index: 2; perspective: 1500px; perspective-origin: 68% 46%; }
.desk__unit {
  transform-style: preserve-3d;
  transform: rotateX(11deg) rotateY(-34deg) rotateZ(2deg);
  transition: transform 1.4s var(--ease);
  max-width: 980px; margin-inline: auto;
}
.desk:hover .desk__unit { transform: rotateX(9deg) rotateY(-26deg) rotateZ(1.2deg); }
@media (prefers-reduced-motion: reduce) { .desk__unit, .desk:hover .desk__unit { transform: rotateX(6deg) rotateY(-10deg); } }

/* the machine throws a shadow across the sheet */
.desk__cast {
  position: absolute; z-index: 1; left: 26%; right: -14%; bottom: 2%; height: 54%;
  background: radial-gradient(ellipse at 28% 40%, rgba(8,10,12,.72), rgba(8,10,12,.28) 46%, transparent 70%);
  filter: blur(28px); transform: skewX(-26deg) rotate(-3deg);
}

.desk .ph { position: absolute; z-index: 3; right: 7%; bottom: 4%; width: 112px;
  transform: rotateX(16deg) rotateY(-15deg) rotateZ(4deg); }
@media (max-width: 980px) { .desk .ph { display: none; } }

.desk .mbp__screen::after {
  content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(104deg, rgba(255,255,255,.14) 0 12%, rgba(255,255,255,.03) 24%, transparent 46%);
  mix-blend-mode: screen;
}
.desk .mbp__lid { box-shadow: 0 2px 0 rgba(255,255,255,.18) inset, 0 44px 74px rgba(0,0,0,.55); }
/* flatter and deeper than the head-on version: at a three-quarter turn the
   keyboard is most of what sells the machine, so it needs the room */
.desk .mbp__deck {
  transform: rotateX(66deg); height: 360px;
  background: linear-gradient(180deg, #DDE1E5 0%, #BEC3C8 30%, #9BA1A6 68%, #868C92 100%);
}
.desk .mbp__keys { gap: 3.4px; }
.desk .mbp__krow { gap: 3.4px; }
.desk .mbp__krow i {
  height: 21px; border-radius: 4px;
  background: linear-gradient(180deg, #3E4248, #15171A 78%);
  box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 3px rgba(0,0,0,.45);
}
.desk .mbp__krow--fn i { height: 14px; }
.desk .mbp__pad { width: 38%; height: 108px; border-radius: 9px;
  background: linear-gradient(180deg, #C2C7CC, #A9AEB4);
  box-shadow: 0 0 0 1px rgba(0,0,0,.16) inset, 0 1px 0 rgba(255,255,255,.5); }
.desk .mbp__lid { border-radius: 16px 16px 4px 4px; padding: 13px 13px 17px; }

/* ==========================================================================
   66. TERMINOLOGY FIELD — the vocabulary, surfacing and sinking
   The claim is that we already speak the business. Rather than assert it,
   the words themselves drift up out of the page: gauge, tolerance, slitting,
   camber. Light, typographic, never louder than the paragraph beside it.
   ========================================================================== */
.terms {
  position: relative; min-height: 300px; overflow: hidden;
  border-left: 1px solid var(--line); padding-left: clamp(1rem, 2.4vw, 2rem);
}
@media (max-width: 900px) { .terms { border-left: 0; border-top: 1px solid var(--line);
  padding-left: 0; padding-top: 1.4rem; min-height: 230px; padding-bottom: 1.6rem; } }

.terms__w {
  position: absolute; white-space: nowrap;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .72rem; letter-spacing: .06em;
  color: var(--ink);
  opacity: 0; transform: translateY(6px);
  animation: termLife var(--life, 5s) var(--ease) forwards;
  will-change: opacity, transform;
}
.terms__w b { font-weight: 400; }
/* one in a handful lands lit, so the field has a pulse rather than a hum */
.terms__w.lit {
  color: #E4551F;
  text-shadow: 0 0 14px rgba(228,85,31,.34), 0 0 3px rgba(228,85,31,.22);
}
.terms__w.big { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 560;
  font-size: 1.05rem; letter-spacing: -.01em; }

@keyframes termLife {
  0%   { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  16%  { opacity: .92; transform: translateY(0); filter: blur(0); }
  74%  { opacity: .92; transform: translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-8px); filter: blur(1.5px); }
}
/* a faint ruled ground, like a terminal that has been left running */
.terms::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(22,22,26,.045) 0 1px, transparent 1px 26px);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.terms__cap { position: absolute; left: clamp(1rem,2.4vw,2rem); bottom: 0; z-index: 2;
  font-family: ui-monospace, monospace; font-size: .55rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) { .terms__cap { left: 0; } }
@media (prefers-reduced-motion: reduce) {
  .terms__w { animation: none; opacity: .8; transform: none; }
}

/* ==========================================================================
   67. THE PERIOD — arrives as a ball, lands as punctuation
   Drops in orange, bounces twice, settles and takes the type's own color.
   ========================================================================== */
.epic__line .stop {
  display: inline-block;
  color: #E4551F;
  transform: translateY(-260%) scale(.62);
  will-change: transform, color;
}
.epic__line.is-on .stop {
  animation: dropBall 1.15s cubic-bezier(.24,.9,.32,1) .28s forwards,
             stopSettle .5s var(--ease) 1.26s forwards;
}
@keyframes dropBall {
  0%   { transform: translateY(-260%) scale(.62); }
  38%  { transform: translateY(0) scale(1.18, .78); }   /* squash on landing */
  52%  { transform: translateY(-58%) scale(.9, 1.12); } /* first bounce */
  70%  { transform: translateY(0) scale(1.1, .88); }
  82%  { transform: translateY(-18%) scale(.96, 1.05); }
  92%  { transform: translateY(0) scale(1.04, .96); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes stopSettle { to { color: inherit; } }
/* the alternate lines set the second word in the lighter tone, so the period
   has to settle to that tone rather than to full ink */
.epic__line--alt span:last-child .stop { }
@media (prefers-reduced-motion: reduce) {
  .epic__line .stop { transform: none; color: inherit; animation: none; }
}

/* ==========================================================================
   68. THE PHOTOGRAPH — the real thing, on real hardware
   The CSS laptop was a drawing of a machine. This is a photograph with the
   live screens composited in, which is the only version that reads as proof.
   ========================================================================== */
.shot-photo { margin: 0; max-width: 720px; margin-inline: auto; display: grid; gap: .9rem; }
.shot-photo img { width: 100%; height: auto; display: block; }
.shot-photo figcaption { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); text-align: center; }

/* ==========================================================================
   69. CASE STUDY — set as an article
   ========================================================================== */
.cs { max-width: 1120px; margin-inline: auto; }
.cs__head { padding-bottom: clamp(1.6rem,3.5vw,2.6rem); border-bottom: 1px solid var(--line); }
.cs__head .mono { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.cs__head .lede { max-width: 58ch; }
.cs__meta { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem;
  margin-top: clamp(1.4rem,3vw,2.2rem); }
@media (max-width: 760px) { .cs__meta { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.cs__meta dt { font-family: ui-monospace, monospace; font-size: .55rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }
.cs__meta dd { font-size: var(--step--1); margin-top: .3rem; }

.cs__body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,26rem);
  gap: clamp(1.6rem,4vw,4rem); padding-top: clamp(1.6rem,3.5vw,2.6rem); align-items: start; }
@media (max-width: 900px) { .cs__body { grid-template-columns: 1fr; } }
.cs__col h2 { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 560;
  font-size: var(--step-1); letter-spacing: -.015em; margin-top: clamp(1.6rem,3vw,2.4rem); }
.cs__col h2:first-child { margin-top: 0; }
.cs__col p { font-family: var(--ff-body); font-size: var(--step-0); line-height: 1.62;
  color: var(--muted); margin-top: .8rem; max-width: 62ch; }

.cs__side { position: sticky; top: 110px; display: grid; gap: 1.2rem; }
@media (max-width: 900px) { .cs__side { position: static; } }
.cs__term { background: #121317; border: 1px solid #2A2C34; border-radius: 12px; padding: 1rem 1.1rem;
  font-family: ui-monospace, monospace; font-size: .68rem; line-height: 2; color: #ECECED; }
.cs__termbar { display: flex; align-items: center; gap: .6rem; padding-bottom: .7rem; margin-bottom: .5rem;
  border-bottom: 1px solid #25272F; }
.cs__termbar i { width: 7px; height: 7px; border-radius: 50%; background: #E4551F; }
.cs__termbar .mono { font-size: .55rem; letter-spacing: .1em; color: #8A8D96; text-transform: none; }
.cs__term i { color: #E4551F; font-style: normal; margin-right: .55em; }
.cs__cur span { display: inline-block; width: 7px; height: 1em; background: #E4551F;
  vertical-align: -2px; animation: mwblink 1.05s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .cs__cur span { animation: none; } }
.cs__facts { border-top: 1px solid var(--line); }
.cs__facts > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line); }
.cs__facts dt { font-family: ui-monospace, monospace; font-size: .55rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.cs__facts dd { font-size: var(--step--1); text-align: right; }
.cs__note { font-size: var(--step--1); color: var(--muted); }

/* the compact link that replaces the inline block on the homepage */
.cslink { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 1.2rem; align-items: center;
  border: 1px solid rgba(255,255,255,.16); border-radius: 14px;
  padding: clamp(1rem,2.2vw,1.5rem) clamp(1.1rem,2.4vw,1.8rem);
  margin-top: clamp(1.4rem,3vw,2.2rem); transition: border-color .35s, background .35s; }
.cslink:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.04); }
.cslink__tag { font-family: ui-monospace, monospace; font-size: .55rem; letter-spacing: .18em;
  text-transform: uppercase; color: #8A8D96; white-space: nowrap; }
.cslink h3 { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 600;
  font-size: var(--step-1); letter-spacing: -.015em; }
.cslink p { color: #A4A4AC; font-size: var(--step--1); margin-top: .25rem; max-width: 62ch; }
.cslink__go { font-size: var(--step--1); white-space: nowrap; }
@media (max-width: 760px) { .cslink { grid-template-columns: 1fr; gap: .6rem; } }

/* ==========================================================================
   71. THE DRAWN UNDERLINE — a stroke, not a text-decoration
   A browser underline sits at a fixed depth and cuts every descender. This is
   drawn beneath the line and swells slightly in the middle, the way a rule
   pulled by hand does.
   ========================================================================== */
.ul { position: relative; display: inline-block; }
.ul::after {
  content: ''; position: absolute; left: -.02em; right: -.02em; bottom: -.10em;
  height: .085em; border-radius: .06em;
  background: currentColor;
  clip-path: polygon(0 42%, 6% 12%, 34% 0, 68% 6%, 100% 30%, 100% 74%, 62% 100%, 26% 94%, 4% 78%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.05s var(--ease-io) .25s;
}
.ul.is-in::after, .rv.is-in .ul::after, .is-in.ul::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .ul::after { transform: scaleX(1); transition: none; } }

/* ==========================================================================
   72. BROADSHEET — four columns, black on white, type crossing the grid
   ========================================================================== */
.bs { background: #F7F7F4; color: #0C0C0D; border: 1px solid rgba(12,12,13,.16);
  padding: clamp(1rem, 2.6vw, 2.4rem); margin-top: 1.4rem;
  box-shadow: 0 30px 70px rgba(22,22,26,.14); overflow: hidden; }
.bs__top { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; align-items: baseline;
  padding-bottom: .7rem; border-bottom: 2px solid #0C0C0D; }
.bs__logo { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 800;
  font-size: clamp(.95rem,1.9vw,1.35rem); letter-spacing: -.03em; }
.bs__logo i { font-style: normal; font-variation-settings: 'wdth' 100,'wght' 400;
  letter-spacing: .12em; font-size: .62em; margin-left: .45em; }
.bs__top .mono { font-size: .54rem; letter-spacing: .14em; text-transform: uppercase; color: #55565A; }
.bs__r { margin-left: auto; }

.bs__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .bs__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .bs__grid { grid-template-columns: minmax(0,1fr); } }
.bs__col { position: relative; padding: .9rem .8rem 1.6rem;
  border-right: 1px solid rgba(12,12,13,.22); min-width: 0;
  display: flex; flex-direction: column; }
.bs__col .bs__foot-word { margin-top: auto; }
.bs__col:last-child { border-right: 0; }
@media (max-width: 900px) { .bs__col:nth-child(2n) { border-right: 0; }
  .bs__col { border-bottom: 1px solid rgba(12,12,13,.22); } }

/* the oversized ghost letter that bleeds behind the columns */
.bs__ghost { position: absolute; z-index: 0; left: -18%; top: 4%;
  font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 300;
  font-size: 19rem; line-height: .7; color: rgba(12,12,13,.055); pointer-events: none; }
.bs__ghost--r { left: auto; right: -22%; top: 18%; }

.bs__col > *:not(.bs__ghost) { position: relative; z-index: 1; }

.bs__display { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 800;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: .82; letter-spacing: -.055em; margin-bottom: .5rem; }
.bs__display--lg { font-size: clamp(1.9rem, 4.2vw, 3.4rem); letter-spacing: -.045em;
  font-variation-settings: 'wdth' 100,'wght' 620; }
.bs__display--xl { font-size: clamp(2.8rem, 6.4vw, 5.4rem); margin-top: .6rem; }
.bs__mid { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 620;
  font-size: clamp(1.2rem, 2.4vw, 1.85rem); line-height: 1.02; letter-spacing: -.03em; margin: .9rem 0 .6rem; }
.bs__mid2 { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 620;
  font-size: clamp(1rem, 2vw, 1.45rem); letter-spacing: -.02em; margin: .8rem 0 .5rem;
  border-bottom: 1px solid rgba(12,12,13,.3); padding-bottom: .3rem; }
.bs__num { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 500;
  font-size: .82rem; color: #55565A; }

.bs__micro { font-size: .58rem; line-height: 1.5; color: #2C2D30; margin-bottom: .7rem; max-width: 34ch; }
.bs__micro b { font-variation-settings: 'wdth' 100,'wght' 700; }
.bs__label { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 700;
  font-size: .62rem; letter-spacing: .02em; margin: .5rem 0 .3rem;
  border-top: 1px solid rgba(12,12,13,.3); padding-top: .35rem; }
.bs__cap { font-family: ui-monospace, monospace; font-size: .48rem; letter-spacing: .1em;
  text-transform: uppercase; color: #6A6B70; margin: .2rem 0 .8rem; }

.bs__bullets { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .6rem; margin-bottom: .6rem; }
.bs__bullets li { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 620;
  font-size: .72rem; letter-spacing: -.01em; padding-left: .7rem; position: relative; }
.bs__bullets li::before { content: '●'; position: absolute; left: 0; font-size: .5em; top: .35em; }

.bs__dwg { width: 100%; height: auto; max-width: 150px; margin: .4rem 0 .1rem;
  fill: none; stroke: #0C0C0D; stroke-width: 1; }
.bs__dim { font-family: ui-monospace, monospace; font-size: 8px; fill: #0C0C0D; stroke: none; }

.bs__foot-word { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 800;
  font-size: clamp(1rem, 2.2vw, 1.7rem); letter-spacing: -.035em; margin-top: 1rem;
  border-top: 2px solid #0C0C0D; padding-top: .35rem; }
.bs__foot-word--r { text-align: right; }

/* ==========================================================================
   73. FLASHING CALCULATOR
   ========================================================================== */
.fc { background: #FBFBF9; color: #1B1C1E; display: grid; gap: .6rem;
  padding: clamp(.9rem,2vw,1.3rem); height: 100%; align-content: start; }
.fc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.fc__head h4 { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 600;
  font-size: .95rem; letter-spacing: -.015em; }
.fc__pill { font-family: ui-monospace, monospace; font-size: .55rem; letter-spacing: .08em;
  background: #1B1C1E; color: #fff; border-radius: 100px; padding: .2rem .6rem; white-space: nowrap; }
.fc__chips { display: flex; flex-wrap: wrap; gap: 3px; }
.fc__chip { border: 1px solid rgba(27,28,30,.18); background: #fff; color: #4A4B50; cursor: pointer;
  border-radius: 100px; padding: .26rem .58rem; font-family: inherit; font-size: .6rem; }
.fc__chip:hover { border-color: #1B1C1E; }
.fc__chip[aria-pressed="true"] { background: #1B1C1E; color: #fff; border-color: #1B1C1E; }
.fc__grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .4rem; }
@media (max-width: 520px) { .fc__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.fc__f { display: grid; gap: .18rem; min-width: 0; }
.fc__f label { font-family: ui-monospace, monospace; font-size: .46rem; letter-spacing: .1em;
  text-transform: uppercase; color: #82838A; }
.fc__f input, .fc__f select { border: 1px solid rgba(27,28,30,.18); border-radius: 5px; background: #fff;
  padding: .3rem .35rem; font-family: ui-monospace, monospace; font-size: .64rem; color: #1B1C1E;
  width: 100%; min-width: 0; }
.fc__f input:focus, .fc__f select:focus { outline: 0; border-color: #1B1C1E;
  box-shadow: 0 0 0 3px rgba(27,28,30,.07); }
.fc__out { border: 1px solid rgba(27,28,30,.14); border-radius: 8px; background: #fff; overflow: hidden; }
.fc__r { display: flex; justify-content: space-between; gap: 1rem; padding: .32rem .6rem;
  font-family: ui-monospace, monospace; font-size: .6rem; color: #6E6E77;
  border-bottom: 1px solid rgba(27,28,30,.07); }
.fc__r:last-child { border-bottom: 0; }
.fc__r b { font-weight: 400; color: #1B1C1E; }
.fc__r.hi { background: #F3F3F0; color: #1B1C1E; }
.fc__r.hi b { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 600; font-size: .78rem; }
.fc__note { font-size: .55rem; color: #82838A; line-height: 1.45; }
.wall__item--fc .wall__art { aspect-ratio: 3 / 4; background: #FBFBF9; }
.wall__item--fc .fc { padding-top: 2.7rem; }
.shot-photo--wide { max-width: 1080px; }
/* the devices carry their own shadows now, so no card behind them */
.shot-photo--wide img { border-radius: 0; box-shadow: none; }

/* ==========================================================================
   74. THE AI FIELD — computation running quietly behind the words
   Barely legible on purpose. It should register as activity, not decoration,
   and it must never compete with the text sitting on top of it.
   ========================================================================== */
.aifield { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aifield canvas { width: 100%; height: 100%; display: block; opacity: .46; }
.aifield::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 40%, rgba(22,22,26,.42), rgba(22,22,26,.88) 78%);
}
.ai-rel { position: relative; }
.ai-rel > .shell { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .aifield { display: none; } }

/* the four capabilities, set as a considered list rather than four boxes */
.cap4 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem) clamp(1.6rem, 4vw, 4rem); margin-top: clamp(2rem,4vw,3.2rem); }
@media (max-width: 800px) { .cap4 { grid-template-columns: 1fr; } }
.cap4 article { display: grid; gap: .5rem; align-content: start;
  padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.18); }
.cap4 .n { font-family: ui-monospace, monospace; font-size: .55rem; letter-spacing: .2em; color: #7E818A; }
.cap4 h3 { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 600;
  font-size: var(--step-1); letter-spacing: -.018em; }
.cap4 p { color: #A4A4AC; font-size: var(--step--1); line-height: 1.6; max-width: 46ch; }
.cap4 .eg { font-family: ui-monospace, monospace; font-size: .62rem; color: #E4551F;
  margin-top: .2rem; line-height: 1.7; }
.cap4 .eg span { display: block; }
/* rotating industry examples */
.cap4 .eg { transition: opacity .4s var(--ease), transform .4s var(--ease); min-height: 3.4em; }
.cap4 .eg.is-out { opacity: 0; transform: translateY(-4px); }
.cap4 .eg__tag { display: block; color: #7E818A; font-size: .55rem; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: .3rem; }

/* ==========================================================================
   75. MOBILE — hit areas and legibility
   Measured rather than guessed: an audit at 390px found tap targets down to
   26x28 and mono labels at 9px. Apple's floor is 44x44, and small caps with
   wide tracking need more than 9px to stay readable on glass.
   ========================================================================== */
@media (max-width: 860px) {

  /* --- real padding, so the box itself is 44px and not just an overlay --- */
  .hdr .brand { padding: 8px; margin: -8px; }
  .menu-btn { padding: 9px; margin: -9px; min-width: 44px; min-height: 44px; }
  .modal__x, .mega__close, .lb__x { min-width: 44px; min-height: 44px; }
  .views__btn, .reel-rail__nav button { min-height: 44px; }
  .eyebrow a, a.eyebrow { display: inline-block; padding-block: .8rem; }
  /* the menu footer link and the cookie-notice link were the last two under
     the floor — both live inside running text, so they get padding rather
     than a min-height that would break the line */
  .mega__foot a { padding: .8rem 0; display: inline-block; }
  .cookies a, .cookies__text a { padding: .6rem .2rem; display: inline-block; }
  /* perforation sub-labels: the smallest type on the site */
  .p3d__btn small, .p3d__btn span, .p3d__perf small { font-size: max(11px, .62rem) !important; }

  /* --- footer and nav links: space to land on --- */
  .ftr__col a, .ftr__nav a, .mega__item, .ct__col a, .phead a {
    display: inline-block; padding-block: .45rem; min-height: 40px;
  }
  .ftr__col a { padding-block: .5rem; }

  /* --- nothing below 11px, and looser tracking so caps stay separable --- */
  /* one floor, applied broadly — the audit kept finding label classes I had
     not listed individually */
  .mono, .eyebrow, [class*="__cap"], [class*="__label"], [class*="__lab"],
  .ct__col h2, .cap4 .n, .cs__head .mono, .bs__cap, .tube__lab span,
  .epic__hint, .p3d__hint, .wall__ribbon, .terms__cap, .book__cap .pg {
    font-size: max(11px, .68rem) !important;
    letter-spacing: .1em;
  }
  .p3d__btn, .sw__opt, .fc__chip, .sb__opt {
    font-size: max(11px, .7rem); min-height: 44px; padding-inline: .8rem;
  }
  .p3d__sw { min-width: 34px; min-height: 34px; }
  .p3d__btn { min-width: 44px; }
  .fc__pill, .fc__note, .tube__lab b, .bs__micro, .book__cap p {
    font-size: max(11px, .66rem) !important;
  }
  .sw__btn, .sb__back { min-height: 44px; min-width: 60px;
    font-size: max(11px, .64rem) !important; padding-inline: 1rem; }
  /* the spec writer's step rail */
  .sw__tab { min-height: 44px; font-size: max(11px, .62rem) !important; padding-inline: .7rem; }
  .sw__desc, .sw__f label, .fc__f label, .sb__desc,
  .cs__facts dt, .mw__stats dt, .ps__row dt, .spec-row dt {
    font-size: max(11px, .66rem) !important;
  }
  /* section labels stack, so the right-hand note gets its own line at 11px */
  .stmt__label .r { font-size: max(11px, .68rem) !important; }
  /* any remaining inline link in body copy */
  main p a, .lede a, .muted a { padding-block: .35rem; display: inline-block; }
  /* the configurator's own headings and readouts */
  .p3d__deck h4, .p3d__name, .p3d__ph span { font-size: max(11px, .7rem) !important; }
  /* the cookie bar link, the last one under the floor */
  .cookies p a, .cookies span a { padding: .7rem .2rem; display: inline-block; }
  .p3d__spec div, .fc__r, .sw__out { font-size: max(11px, .68rem); }

  /* --- the section label stacks instead of squeezing three items across --- */
  .stmt__label { flex-wrap: wrap; gap: .3rem .9rem; }
  .stmt__label .r { margin-left: 0; flex-basis: 100%; }

  /* --- forms are the thing that has to work: 16px stops iOS zooming in --- */
  .field input, .field textarea, .field select,
  .sw__f input, .fc__f input, .fc__f select { font-size: 16px; min-height: 46px; }
  .field textarea { min-height: 110px; }
  .chip span { padding: .6rem 1rem; min-height: 42px; display: inline-flex; align-items: center; }
  .btn { min-height: 46px; }
  /* the invite modal's own controls — the last two the audit found */
  .modal__skip { min-height: 44px; padding: .6rem 1rem; font-size: max(11px, .66rem); }
  .modal .field label, .modal label,
  .field label, form label { font-size: max(11px, .68rem) !important; }

  /* --- the booking calendar needs fingers, not cursors --- */
  .cal__day { min-height: 44px; font-size: max(13px, .82rem); }
  .slot { min-height: 46px; font-size: max(13px, .82rem); }

  /* --- component decks scroll rather than shrink --- */
  .p3d__deckrow { grid-template-columns: 1fr; gap: .4rem; }
  .p3d__deckrow > div:first-child { display: flex; align-items: baseline; gap: .6rem; }
}

@media (max-width: 560px) {
  /* one column everywhere it still tried for two */
  .stmt__grid > *, .ct__col, .mw__body > * { grid-column: 1 / -1 !important; }
  .cap4 { grid-template-columns: 1fr; }
  .ads { grid-template-columns: 1fr; }
}

/* ==========================================================================
   75. MOBILE CORRECTIONS
   ========================================================================== */
@media (max-width: 700px) {
  /* the opening was sitting low and off-balance on a phone */
  .epic__pin { grid-template-rows: 1fr auto; }
  .epic__stage { align-items: center; }
  .epic__line { align-content: center; padding-top: 3.5rem; }
  .epic__foot { padding-bottom: clamp(1.2rem,4vw,2rem); }
  .epic__hint { font-size: .5rem; letter-spacing: .14em; max-width: 55%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .epic__ticks i { width: 18px; }

  /* the annotation pointed at empty space once the paragraph reflowed */
  .marg--right { display: grid; grid-auto-flow: row; justify-items: start;
    gap: .1rem; margin-top: 1rem; }
  .marg--right .marg__word { transform: rotate(-3deg); margin-left: .4rem; }
  .marg--right .marg__arrow { width: 92px; transform: rotate(-118deg) scaleY(-1); margin-left: 1.6rem; }

  /* the wall was one long column; three across reads as a contact sheet */
  .wall { grid-template-columns: repeat(3, minmax(0,1fr)); gap: .5rem; }
  .wall__item--wide { grid-column: span 3; }
  .wall__item--live, .wall__item--sb, .wall__item--fc { grid-column: span 3; }
  .wall__cap { padding: .45rem .5rem; font-size: .56rem; gap: .35rem; }
  .wall__cap .mono { display: none; }
  .wall__ph .mono { display: none; }
  .wall__ph span:last-child { font-size: .62rem; }
}
@media (max-width: 420px) {
  .wall { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .wall__item--wide, .wall__item--live, .wall__item--sb, .wall__item--fc { grid-column: span 2; }
}

/* ==========================================================================
   76. NEWSLETTER MODAL — one column, centered, nothing else in it
   The two-panel version put a decorative half beside a form and read as an
   advert. A single narrow card is quicker to dismiss and quicker to fill in.
   ========================================================================== */
.modal__card {
  display: block; max-width: 400px; width: min(400px, calc(100vw - 2rem));
  background: var(--paper); border-radius: 18px; padding: clamp(1.8rem, 4vw, 2.6rem);
  box-shadow: 0 40px 90px rgba(22,22,26,.3); text-align: center; position: relative;
}
.modal__mark { width: 34px; height: auto; color: var(--ink); opacity: .9;
  margin: 0 auto .9rem; display: block; }
.modal__body { display: block; padding: 0; }
.modal__body .eyebrow { color: var(--muted); }
.modal__body h2 { letter-spacing: -.028em; }
.modal__body .form { display: grid; gap: .7rem; text-align: left; }
.modal__body .field label { font-size: .58rem; letter-spacing: .12em; }
.modal__skip { background: none; border: 0; cursor: pointer; color: var(--muted);
  font-family: inherit; font-size: .74rem; margin-top: .9rem; text-decoration: underline;
  text-underline-offset: 3px; }
.modal__skip:hover { color: var(--fg); }
.modal__x { position: absolute; top: .7rem; right: .9rem; }

/* ---- demo marking: these compute correctly but the rates are samples ---- */
.demo-tag {
  position: absolute; right: .8rem; top: .8rem; z-index: 6;
  background: #E4551F; color: #fff; border-radius: 100px;
  padding: .3rem .75rem; font-family: ui-monospace, monospace;
  font-size: .55rem; letter-spacing: .18em; text-transform: uppercase;
}
.fc__grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.fc__toggle { width: 100%; border: 1px solid rgba(27,28,30,.18); border-radius: 5px;
  background: #1B1C1E; color: #fff; cursor: pointer; padding: .3rem .35rem;
  font-family: ui-monospace, monospace; font-size: .6rem; }
.fc__toggle[aria-pressed="false"] { background: #fff; color: #6E6E77; }
.fc__note b { color: #1B1C1E; font-weight: 400;
  font-variation-settings: 'wdth' 100,'wght' 700; }

/* ==========================================================================
   77. MOTION TILES — video rather than GIF
   The same three animations as GIFs came to 45MB. As H.264 they are 2.4MB,
   with better colour and no dithering. Autoplay needs muted + playsinline or
   iOS refuses; paused off-screen so the wall costs nothing to scroll past.
   ========================================================================== */
.wall__item--video .wall__art { background: #0C0D0F; position: relative; }
.wall__item--video video {
  width: 100%; height: 100%; object-fit: contain; display: block; background: #0C0D0F;
}
.motion-tag {
  position: absolute; left: .8rem; top: .8rem; z-index: 5;
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(12,13,15,.72); color: #fff; border-radius: 100px;
  padding: .3rem .7rem; backdrop-filter: blur(6px);
  font-family: ui-monospace, monospace; font-size: .54rem;
  letter-spacing: .16em; text-transform: uppercase;
}
.motion-tag i { width: 5px; height: 5px; border-radius: 50%; background: #E4551F; }
/* the second hand note. It sits to the LEFT of the button: placing it to the
   right pushed past the shell and gave the page a horizontal scrollbar. */
.marg--studio { right: 100%; top: 50%; transform: translateY(-46%); margin-right: .7rem;
  justify-items: end; white-space: nowrap; }
.marg--studio .marg__word { transform: rotate(-5deg); }
.marg--studio .marg__arrow { width: clamp(80px, 7vw, 122px); margin-top: .1rem; }
@media (max-width: 900px) {
  .marg--studio { position: static; transform: none; margin: .8rem 0 0;
    display: grid; justify-items: start; }
  .marg--studio .marg__arrow { transform: rotate(18deg); width: 76px; }
}
/* the reel invites a drag */
.wall--reel { cursor: grab; scroll-behavior: smooth; }
/* snap has to be off while dragging or it drags the strip back under you */
.wall--reel.is-grabbing { cursor: grabbing; scroll-behavior: auto; user-select: none;
  scroll-snap-type: none; }
.wall--reel.is-grabbing img, .wall--reel.is-grabbing a { pointer-events: none; }

/* ---- a caption that carries a real explanation, not just a label -------- */
.wall__cap--long { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem;
  padding: .9rem 1rem 1.1rem; align-items: baseline; }
.wall__cap--long .mono { justify-self: end; }
.wall__cap--long p { grid-column: 1 / -1; margin-top: .45rem;
  font-family: var(--ff-body); font-size: .78rem; line-height: 1.5; color: var(--muted); }
.wall__item--sb .wall__cap--long p, .wall__item--fc .wall__cap--long p { color: #6E6E77; }

/* ---- components on a phone: give each control room to breathe ---------- */
@media (max-width: 700px) {
  .wall__item--sb .wall__art, .wall__item--fc .wall__art { aspect-ratio: auto; height: auto; }
  .sw, .fc { height: auto; }
  .sw { grid-template-rows: auto auto auto auto; }
  .sw__fields { gap: .8rem; padding: .7rem 1rem .4rem; }
  .sw__opts { gap: .4rem; }
  .sw__out { height: 190px; margin-inline: 1rem; font-size: 11px; line-height: 1.8; }
  .sw__ask { padding: .8rem 1rem .2rem; }
  .sw__title { font-size: 1.05rem; }
  .sw__foot { padding: .8rem 1rem 1rem; }
  .fc { gap: .8rem; padding: 1rem; }
  .fc__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; }
  .fc__grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fc__toggle, .fc__empty, .fc__lname, .fc__lamt, .fc__add { font-size: max(11px, .7rem) !important; }
  .fc__toggle { min-height: 44px; }
  .fc__chips { gap: .35rem; }
  .fc__r { padding: .5rem .7rem; }
  .p3d__deck { padding-bottom: .4rem; }
}
/* ---- the accumulating quote ---- */
.fc__add { width: 100%; border: 1px dashed rgba(27,28,30,.28); background: none; color: #1B1C1E;
  cursor: pointer; border-radius: 7px; padding: .55rem; font-family: inherit; font-size: .72rem; }
.fc__add:hover { border-style: solid; background: #1B1C1E; color: #fff; }
.fc__lines { display: grid; gap: 1px; }
.fc__empty { font-size: .66rem; color: #A0A1A6; padding: .5rem 0; }
.fc__line { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: baseline;
  padding: .45rem .1rem; border-bottom: 1px solid rgba(27,28,30,.08); }
.fc__lname { font-size: .72rem; color: #1B1C1E; }
.fc__lname i { display: block; font-style: normal; font-family: ui-monospace, monospace;
  font-size: .58rem; color: #82838A; margin-top: .12rem; }
.fc__lamt { font-family: ui-monospace, monospace; font-size: .72rem; }
.fc__x { border: 0; background: none; color: #A0A1A6; cursor: pointer; font-size: .9rem;
  line-height: 1; padding: 0 .2rem; }
.fc__x:hover { color: #E4551F; }
.fc__grand { display: flex; justify-content: space-between; align-items: baseline;
  border-top: 2px solid #1B1C1E; padding-top: .55rem; margin-top: .3rem; }
.fc__grand span { font-family: ui-monospace, monospace; font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: #82838A; }
.fc__grand b { font-family: var(--ff-display); font-variation-settings: 'wdth' 100,'wght' 700;
  font-weight: 400; font-size: 1.15rem; }

/* ---- typographic capability marks -------------------------------------- */
.tico {
  display: inline-grid; place-items: center;
  width: 2.6rem; height: 2.6rem; margin-bottom: .9rem;
  border: 1px solid var(--line); border-radius: 8px;
  font-family: var(--ff-display); font-variation-settings: 'wdth' 100, 'wght' 620;
  font-size: .92rem; letter-spacing: -.03em; color: var(--fg);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.cat__item:hover .tico, div:hover > .tico { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.on-ink .tico { border-color: rgba(255,255,255,.22); }
.on-ink .cat__item:hover .tico { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ==========================================================================
   77. DELTA BUILDERS — plan to model
   ========================================================================== */
/* width as well as height: a centred grid child with only a height
   resolves to zero and never renders */
.plan3d { position: relative; background: #FFFFFF; overflow: hidden;
  width: 100%; height: 100%; }
.plan3d__stage { position: absolute; inset: 0; }
.plan3d__stage canvas { display: block; width: 100%; height: 100%; }
.plan3d__name {
  position: absolute; left: 0; right: 0; bottom: 8%; z-index: 2; text-align: center;
  opacity: 0; transition: opacity .5s var(--ease); pointer-events: none;
}
/* debossed: the name is pressed into the white rather than sitting on it —
   a light edge above, a shadow below, and the paper colour showing through */
.plan3d__name b {
  display: block; font-family: var(--ff-display);
  font-variation-settings: 'wdth' 100, 'wght' 800;
  font-weight: 400; font-size: clamp(1.5rem, 5.6cqw, 2.9rem);
  letter-spacing: -.02em; line-height: .95; text-transform: uppercase;
  /* strong enough to read: the letter sits clearly darker than the paper,
     with a hard white edge below and a shadow above so it reads as pressed in */
  color: #C4C6C9;
  text-shadow:
    0 2px 0 #FFFFFF,
    0 -1px 0 rgba(20,22,26,.55),
    0 -3px 5px rgba(20,22,26,.30);
}
.plan3d__name span {
  display: block; margin-top: .45rem;
  font-family: ui-monospace, monospace; font-size: .58rem;
  letter-spacing: .34em; text-transform: uppercase; color: #8A8C92;
}
.plan3d__tag {
  position: absolute; left: 5%; top: 5%; z-index: 2;
  font-family: ui-monospace, monospace; font-size: .55rem;
  letter-spacing: .2em; text-transform: uppercase; color: #A0A2A8;
}
.wall__item--plan .wall__art { aspect-ratio: 4 / 5; background: #fff; padding: 0; container-type: inline-size; }

/* ==========================================================================
   78. THE WHY SECTION ON A PHONE
   Two things were wrong. The hand note sat below the paragraph and pointed
   down into the capability cards — the opposite of what it is annotating.
   And the vocabulary field was squeezed into a side column where the words
   clipped and collided. Both need the full column width and a clear order.
   ========================================================================== */
@media (max-width: 900px) {

  /* stack: note, then the paragraph it points at, then the vocabulary */
  .why-grid { display: block !important; }
  .why-grid > * { width: 100% !important; }

  .note-anchor { position: relative; padding-top: 4.6rem; }

  /* the note sits ABOVE the paragraph and the arrow curves down into it */
  .marg {
    position: absolute; top: 0; left: 0; right: auto; bottom: auto;
    transform: none; margin: 0; display: grid; justify-items: start; gap: .1rem;
  }
  .marg__word { transform: rotate(-3deg); margin-left: .2rem; }
  .marg__arrow {
    width: 92px; transform: rotate(96deg) scaleX(-1);
    margin: .5rem 0 0 5.2rem;            /* clear of the word, not through it */
  }
  .marg--right { left: 0; }

  /* the vocabulary gets the full width and room to breathe */
  .terms {
    border-left: 0; border-top: 1px solid var(--line);
    padding: 1.4rem 0 2.2rem; margin-top: 1.8rem;
    min-height: 260px;
  }
  .terms__cap { left: 0; bottom: .4rem; }
  .terms__w { font-size: 12px; }
  .terms__w.big { font-size: 1rem; }
}

.plan3d__tag i { font-style: normal; color: #14161A; }