/* ==========================================================================
   Mirana Labs — Phase 1 static prototype
   main.css — tokens, base, components and page sections.

   Responsive rules sit beside the component they change (mobile-first,
   min-width queries at 600 / 768 / 1024 / 1180 / 1440).

   01 Fonts            09 Cards & tags         17 Home: sequence
   02 Tokens           10 Accordion & tabs     18 Home: work, capabilities
   03 Base             11 Forms                19 Home: technology, why
   04 Typography       12 Marquee              20 Home: showcase, engage
   05 Layout           13 Footer               21 Home: quotes, FAQ, CTA
   06 Header & nav     14 Motion               22+ Inner pages
   07 Buttons & links  15 Page hero
   08 Section labels   16 Home: hero & core
   ========================================================================== */

/* 01. Fonts ----------------------------------------------------------------
   Self-hosted, subset to Latin. Hubot Sans is instanced at wdth 92. */
@font-face {
  font-family: "Hubot Sans";
  src: url("../fonts/hubot-sans.woff2") format("woff2");
  font-weight: 600 850;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mona Sans";
  src: url("../fonts/mona-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/dm-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 02. Tokens ------------------------------------------------------------- */
:root {
  /* colour */
  --color-bg: #06080D;
  --color-bg-soft: #0A0D14;
  --color-surface: #0E121B;
  --color-surface-2: #111725;
  --color-surface-3: #161D2B;
  --color-text: #F4F7FA;
  --color-muted: #8992A5;
  --color-muted-light: #B8C0CF;
  --color-accent: #00E2D0;
  --color-accent-bright: #00F5DD;
  --color-blue: #2786FF;
  --color-purple: #985CFF;
  --color-on-accent: #04110F;
  --color-danger: #FF7A85;
  --color-temp: #F2C572;
  --color-line: rgba(255, 255, 255, .08);
  --color-line-strong: rgba(255, 255, 255, .14);
  --color-line-accent: rgba(0, 226, 208, .42);
  --gradient-signal: linear-gradient(100deg, var(--color-accent) 0%, var(--color-blue) 55%, var(--color-purple) 100%);

  /* type */
  --font-display: "Hubot Sans", "Mona Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Mona Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fs-hero: clamp(2.625rem, .9rem + 7.4vw, 8.75rem);
  --fs-display: clamp(2.5rem, 1.2rem + 5.2vw, 7rem);
  --fs-h2: clamp(2.125rem, 1.3rem + 3.3vw, 4.75rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1.25vw, 2.375rem);
  --fs-h4: clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, .98rem + .45vw, 1.375rem);
  --fs-body: clamp(1rem, .97rem + .12vw, 1.0625rem);
  --fs-small: .875rem;
  --fs-label: .75rem;
  --fs-micro: .6875rem;

  --lh-display: .92;
  --lh-heading: 1.04;
  --lh-body: 1.62;

  --tracking-display: -.032em;
  --tracking-heading: -.018em;
  --tracking-label: .16em;

  /* layout */
  --container: 1480px;
  --gutter: clamp(1.25rem, .6rem + 3.2vw, 4rem);
  --col-gap: clamp(1rem, .5rem + 1.6vw, 2rem);
  --section-space: clamp(5rem, 3rem + 6vw, 9.5rem);
  --section-space-sm: clamp(4rem, 3rem + 4vw, 7rem);
  --header-h: 4.5rem;

  /* shape */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .2s;
  --dur: .45s;
  --dur-slow: .9s;

  /* layers */
  --z-canvas: 0;
  --z-content: 1;
  --z-header: 50;
  --z-menu: 60;
  --z-skip: 100;
}
@media (min-width: 1024px) {
  :root { --header-h: 5.5rem; }
}

/* 03. Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  background: var(--color-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  /* Reserve the scrollbar gutter at all times. Any scroll lock below then hides
     overflow without removing a scrollbar, so locking and unlocking can never
     reflow the page. This is what keeps CLS at zero when the loader curtain
     lifts, and it fixes the same latent shift for the menu and the lightbox. */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* One rule, two independent lifecycles. The mobile menu (main.js) and the
   lightbox (portfolio.js) hold .is-locked, the loader bootstrap holds
   .is-booting, and sharing the declaration rather than the class means neither
   can clear a lock the other is still holding. Without this the visitor could
   scroll behind the curtain and be somewhere past the hero when it lifts,
   which would skip the entry to the scroll driven galaxy sequence. */
html.is-locked,
html.is-booting { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Film grain — sits behind all content, above the page colour. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

img, svg, video, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--color-line); margin: 0; }
::selection { background: rgba(0, 226, 208, .3); color: #fff; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

main {
  position: relative;
  z-index: var(--z-content);
  display: block;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: var(--z-skip);
  padding: .8rem 1.1rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transform: translateY(-180%);
  transition: transform var(--dur-fast) ease;
}
.skip-link:focus { transform: none; }

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
}

.sprite-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 04. Typography ---------------------------------------------------------- */
.display-hero,
.display,
.h2 {
  font-family: var(--font-display);
  font-weight: 780;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.display-hero { font-size: min(var(--fs-hero), 14svh); }
.display { font-size: var(--fs-display); }
.h2 { font-size: var(--fs-h2); }

.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
}
.h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: -.01em;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--color-muted-light);
  max-width: 38em;
  text-wrap: pretty;
}
.text-muted { color: var(--color-muted-light); }
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* Masked lines: headings are authored as .line > span so each line can rise
   out of its own mask. */
.line {
  display: block;
  overflow: hidden;
  padding-block: .07em;
  margin-block: -.07em;
}
.line > span { display: block; }

.text-link {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-line-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: text-decoration-color var(--dur-fast), color var(--dur-fast);
}
.text-link:hover { color: var(--color-accent); text-decoration-color: currentColor; }

/* 05. Layout -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  position: relative;
  padding-block: var(--section-space);
}
.section--tight { padding-block: var(--section-space-sm); }
.section--flush-top { padding-top: 0; }
.section--line { border-top: 1px solid var(--color-line); }

.grid-12 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--col-gap);
}
@media (min-width: 1024px) {
  .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* Decorative background layers */
.bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
}
.glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow-color, rgba(0, 226, 208, .16)), transparent);
}
.reg-mark {
  position: absolute;
  width: 11px;
  height: 11px;
  pointer-events: none;
}
.reg-mark::before,
.reg-mark::after {
  content: "";
  position: absolute;
  background: var(--color-muted);
  opacity: .6;
}
.reg-mark::before { left: 5px; top: 0; width: 1px; height: 11px; }
.reg-mark::after { top: 5px; left: 0; height: 1px; width: 11px; }

/* Placeholder marker — flags temporary content for review. */
.temp-tag {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .3rem .55rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-temp);
  border: 1px dashed rgba(242, 197, 114, .45);
  border-radius: 2px;
  line-height: 1.2;
  white-space: nowrap;
}

/* 06. Header & navigation ------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur) ease,
    border-color var(--dur) ease,
    backdrop-filter var(--dur) ease;
}
.site-header.is-scrolled {
  background: rgba(6, 8, 13, .76);
  border-bottom-color: var(--color-line);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: 100%;
}
@media (min-width: 1024px) {
  .site-header__inner { grid-template-columns: 1fr auto 1fr; }
}
.site-header__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .75rem;
}
/* Scoped to beat the later .btn display rule. */
.site-header__actions .site-header__cta { display: none; }
@media (min-width: 768px) {
  .site-header__actions .site-header__cta { display: inline-flex; }
}
.site-header__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--gradient-signal);
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll-progress, 0));
  opacity: .8;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--color-text);
  justify-self: start;
}
/* The real monogram is a wide rectangle (450 x 276), so the box follows its
   ratio instead of being square, otherwise it letterboxes and reads small. */
.brand__mark {
  display: block;
  width: 2.9rem;
  aspect-ratio: 450 / 276;
  height: auto;
  flex: none;
}
.brand__mark svg { width: 100%; height: 100%; }
.brand__node {
  transform-box: view-box;
  transform-origin: 20px 20px;
  transition: transform 1.1s var(--ease-out);
}
.brand:hover .brand__node { transform: rotate(-296deg); }
.brand__word {
  font-family: var(--font-display);
  font-weight: 720;
  font-size: .9375rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

.site-nav { display: none; }
@media (min-width: 1024px) {
  .site-nav { display: block; grid-column: 2; }
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, .5rem + 2vw, 3rem);
}
.site-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.site-nav__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.55rem;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.site-nav__item:has(> .site-nav__link[aria-current])::after { transform: scaleX(1); }
.site-nav__link {
  position: relative;
  display: block;
  overflow: hidden;
  height: 1.5rem;
  line-height: 1.5rem;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted-light);
  transition: color var(--dur-fast);
}
.site-nav__link > span,
.site-nav__link::after {
  display: block;
  transition: transform .55s var(--ease-out);
}
.site-nav__link::after {
  content: attr(data-label) / "";
  position: absolute;
  left: 0;
  top: 100%;
  color: var(--color-text);
}
.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__link[aria-current] { color: var(--color-text); }
.site-nav__link:hover > span,
.site-nav__link:hover::after { transform: translateY(-100%); }

.site-nav__toggle {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-muted-light);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast);
}
.site-nav__toggle .icon { width: .75rem; height: .75rem; transition: transform var(--dur) var(--ease-out); }
.site-nav__toggle:hover { color: var(--color-text); }
.site-nav__toggle[aria-expanded="true"] { color: var(--color-accent); }
.site-nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 1.4rem);
  left: 50%;
  width: min(46rem, calc(100vw - 2 * var(--gutter)));
  translate: -42% 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-.5rem);
  transition:
    opacity .3s ease,
    transform var(--dur) var(--ease-out),
    visibility 0s linear var(--dur);
}
.site-nav__item.is-open .dropdown {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
/* Invisible bridge so the pointer can travel from the link to the panel. */
.dropdown::before {
  content: "";
  position: absolute;
  inset: -1.5rem 0 100%;
}
.dropdown__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: rgba(10, 13, 20, .97);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.dropdown__col {
  padding: 1.5rem 1.5rem 1.25rem;
  border-right: 1px solid var(--color-line);
}
.dropdown__col:nth-child(3) { border-right: 0; }
.dropdown__heading {
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.dropdown__heading b { color: var(--color-accent); font-weight: 400; }
.dropdown__link {
  display: block;
  margin-inline: -.75rem;
  padding: .65rem .75rem;
  border-radius: var(--radius-md);
  transition: background-color var(--dur-fast);
}
.dropdown__link:hover { background: rgba(255, 255, 255, .045); }
.dropdown__link strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 680;
  font-size: 1rem;
  letter-spacing: -.005em;
  color: var(--color-text);
}
.dropdown__link span {
  display: block;
  margin-top: .2rem;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--color-muted);
}
.dropdown__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-line);
  background: rgba(255, 255, 255, .018);
  font-size: .8125rem;
  color: var(--color-muted);
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  height: 2.75rem;
  padding-inline: .95rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text);
  transition: border-color var(--dur-fast);
}
.menu-toggle:hover { border-color: var(--color-line-accent); }
.menu-toggle__icon {
  position: relative;
  width: 1.125rem;
  height: .625rem;
}
.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: "";
  position: absolute;
  right: 0;
  height: 1.5px;
  background: currentColor;
}
.menu-toggle__icon::before { top: 0; width: 100%; }
.menu-toggle__icon::after { bottom: 0; width: 62%; }
@media (min-width: 1024px) {
  .menu-toggle { display: none; }
}

/* Mobile menu — a full-screen dialog, outside the header so the header's
   backdrop-filter never becomes its containing block. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease-in-out), visibility 0s linear .7s;
}
.mobile-menu.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path .7s var(--ease-in-out), visibility 0s;
}
.mobile-menu .bg-grid { -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%); }
.mobile-menu__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  border-bottom: 1px solid var(--color-line);
}
.mobile-menu__close .menu-toggle__icon::before { top: 50%; transform: rotate(45deg); }
.mobile-menu__close .menu-toggle__icon::after { bottom: auto; top: 50%; width: 100%; transform: rotate(-45deg); }
.mobile-menu__nav {
  position: relative;
  flex: 1;
  padding-block: 1.5rem 2rem;
}
.mobile-menu__list > li {
  border-bottom: 1px solid var(--color-line);
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity .5s ease, transform .7s var(--ease-out);
}
.mobile-menu.is-open .mobile-menu__list > li {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 60ms + 220ms);
}
.mobile-menu__link {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding-block: 1.05rem;
  font-family: var(--font-display);
  font-weight: 760;
  font-size: clamp(2.25rem, 1.6rem + 4.5vw, 3.5rem);
  line-height: .95;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.mobile-menu__link[aria-current] { color: var(--color-accent); }
.mobile-menu__index {
  padding-top: .35em;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  color: var(--color-accent);
}
.mobile-menu__sub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .15rem 1rem;
  padding: 0 0 1.25rem 1.75rem;
}
.mobile-menu__sub a {
  display: block;
  padding-block: .4rem;
  font-size: .9375rem;
  color: var(--color-muted-light);
}
.mobile-menu__foot {
  position: relative;
  display: grid;
  gap: 1.25rem;
  padding-block: 1.5rem calc(2rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-line);
}
.mobile-menu__foot .btn { justify-self: stretch; }
.mobile-menu__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
@media (min-width: 1024px) {
  .mobile-menu { display: none; }
}

/* 07. Buttons & links ----------------------------------------------------- */
.btn {
  --btn-h: 3.5rem;
  position: relative;
  display: inline-flex;
  align-items: stretch;
  min-height: var(--btn-h);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 680;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: left;
  isolation: isolate;
  overflow: hidden;
  transition:
    color var(--dur) var(--ease-out),
    border-color var(--dur) ease,
    box-shadow var(--dur) ease,
    transform .5s var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .6s var(--ease-out);
}
.btn:hover::before,
.btn:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left center;
}
.btn__label {
  display: flex;
  align-items: center;
  padding-inline: 1.5rem 1.35rem;
}
.btn__icon {
  display: grid;
  place-items: center;
  width: var(--btn-h);
  flex: none;
  overflow: hidden;
  border-left: 1px solid rgba(4, 17, 15, .2);
}
.btn__icon .icon { width: 1rem; height: 1rem; stroke-width: 1.8; }
.btn:hover .btn__icon .icon,
.btn:focus-visible .btn__icon .icon { animation: arrow-hop .7s var(--ease-out); }
@keyframes arrow-hop {
  0% { transform: translate(0, 0); }
  42% { transform: translate(160%, -160%); }
  43% { transform: translate(-160%, 160%); }
  100% { transform: translate(0, 0); }
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.btn--primary::before { background: var(--color-text); }
.btn--primary:hover,
.btn--primary:focus-visible {
  box-shadow: 0 0 0 1px rgba(0, 226, 208, .35), 0 14px 40px -14px rgba(0, 226, 208, .55);
}
.btn--secondary {
  color: var(--color-text);
  border: 1px solid var(--color-line-strong);
  background: rgba(255, 255, 255, .015);
}
.btn--secondary::before { background: rgba(255, 255, 255, .06); }
.btn--secondary .btn__icon { border-left-color: var(--color-line-strong); }
.btn--secondary:hover,
.btn--secondary:focus-visible { border-color: var(--color-line-accent); }
.btn--sm { --btn-h: 2.75rem; font-size: .75rem; }
.btn--sm .btn__label { padding-inline: 1.1rem 1rem; }
.btn--block { width: 100%; justify-content: space-between; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding-block: .4rem;
  font-family: var(--font-display);
  font-weight: 680;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text);
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) 0 100% / 0 1px no-repeat,
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) 0 100% / 100% 1px no-repeat;
  transition: background-size .6s var(--ease-out), color var(--dur-fast);
}
.link-arrow .icon { width: .9rem; height: .9rem; transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover,
.link-arrow:focus-visible {
  color: var(--color-accent);
  background-size: 100% 1px, 100% 1px;
}
.link-arrow:hover .icon,
.link-arrow:focus-visible .icon { transform: translate(2px, -2px); }

/* 08. Section labels & heads ------------------------------------------------ */
.label {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--color-muted-light);
}
.label__index,
.label__slash { flex: none; }
.label__index { color: var(--color-accent); }
.label__slash { color: var(--color-muted); }

/* The section rule — label, hairline, registration mark. */
.section-rule {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.section-rule__line {
  flex: 1 1 2rem;
  min-width: 2rem;
  height: 1px;
  background: var(--color-line-strong);
  transform-origin: left center;
}
.section-rule__mark {
  position: relative;
  width: 11px;
  height: 11px;
  flex: none;
}
.section-rule__mark::before,
.section-rule__mark::after {
  content: "";
  position: absolute;
  background: var(--color-muted);
}
.section-rule__mark::before { left: 5px; top: 0; width: 1px; height: 11px; }
.section-rule__mark::after { top: 5px; left: 0; height: 1px; width: 11px; }

.section-head {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  margin-bottom: clamp(2.75rem, 2rem + 3vw, 5rem);
}
.section-head__aside {
  display: grid;
  gap: 1.5rem;
  align-content: end;
  justify-items: start;
  color: var(--color-muted-light);
  max-width: 34rem;
}
@media (min-width: 1024px) {
  .section-head--split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
  }
  .section-head--split > :first-child { grid-column: 1 / span 7; }
  .section-head--split > .section-head__aside { grid-column: 9 / span 4; }
}

/* 09. Cards & tags --------------------------------------------------------- */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.tag-list li,
.tag {
  display: inline-flex;
  align-items: center;
  padding: .32rem .6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--color-muted-light);
  border: 1px solid var(--color-line-strong);
  border-radius: 2px;
  white-space: nowrap;
}

/* Viewfinder brackets — carried over from the coming-soon page. */
.brackets {
  position: absolute;
  inset: .9rem;
  pointer-events: none;
  z-index: 2;
}
.brackets::before,
.brackets::after,
.brackets > span::before,
.brackets > span::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--color-accent);
  opacity: 0;
  transition: opacity .35s ease, transform .6s var(--ease-out);
}
.brackets::before { top: 0; left: 0; border-width: 1px 0 0 1px; transform: translate(-8px, -8px); }
.brackets::after { top: 0; right: 0; border-width: 1px 1px 0 0; transform: translate(8px, -8px); }
.brackets > span::before { bottom: 0; left: 0; border-width: 0 0 1px 1px; transform: translate(-8px, 8px); }
.brackets > span::after { bottom: 0; right: 0; border-width: 0 1px 1px 0; transform: translate(8px, 8px); }

/* Project card — featured / wide / narrow / tall variants. */
.project-card { position: relative; min-width: 0; }
.project-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}
.project-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  isolation: isolate;
}
.project-card__media picture,
.project-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.project-card__media img {
  object-fit: cover;
  transition: transform 1.3s var(--ease-out), filter .6s ease;
}
/* Signal-gradient hairline that lights up on hover. */
.project-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: var(--gradient-signal);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.project-card__chip {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 2;
  display: none;
  align-items: center;
  gap: .55rem;
  padding: .6rem .85rem;
  background: rgba(6, 8, 13, .82);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 680;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity .4s ease, transform .6s var(--ease-out);
}
.project-card__chip .icon { width: .85rem; height: .85rem; color: var(--color-accent); }
.project-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .55rem 1.5rem;
  padding-top: 1.25rem;
  transition: transform .6s var(--ease-out);
}
.project-card__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.project-card__meta span:first-child { color: var(--color-muted-light); }
.project-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.1rem + .9vw, 2rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.project-card__summary {
  grid-column: 1 / -1;
  max-width: 44ch;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--color-muted-light);
}
/* Touch: a visible "View project" row. Fine pointers: a square arrow button. */
.project-card__arrow {
  order: 10;
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: .35rem;
  font-family: var(--font-display);
  font-weight: 680;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent);
  transition: background-color .4s ease, border-color .4s ease, color .4s ease;
}
.project-card__arrow .icon { width: .95rem; height: .95rem; transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .project-card__arrow {
    order: 0;
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: start;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-top: 0;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    color: var(--color-text);
  }
  .project-card__arrow-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
.project-card .tag-list { grid-column: 1 / -1; margin-top: .35rem; }
.project-card[hidden] { display: none; }

@media (hover: hover) and (pointer: fine) {
  .project-card__chip { display: inline-flex; }
  .project-card__link:hover .project-card__media img { transform: scale(1.045); }
  .project-card__link:hover .project-card__media::after { opacity: .9; }
  .project-card__link:hover .brackets::before,
  .project-card__link:hover .brackets::after,
  .project-card__link:hover .brackets > span::before,
  .project-card__link:hover .brackets > span::after { opacity: 1; transform: none; }
  .project-card__link:hover .project-card__chip { opacity: 1; transform: none; }
  .project-card__link:hover .project-card__arrow {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-on-accent);
  }
  .project-card__link:hover .project-card__arrow .icon { transform: rotate(45deg); }
}
.project-card__link:focus-visible { outline: none; }
.project-card__link:focus-visible .project-card__media { outline: 2px solid var(--color-accent); outline-offset: 4px; }

.project-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.75rem, 2rem + 2vw, 4.5rem) var(--col-gap);
}
@media (min-width: 768px) {
  .project-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .project-card { grid-column: span 6; }
  .project-card--featured,
  .project-card.is-orphan { grid-column: 1 / -1; }
  .project-card--featured .project-card__media,
  .project-card.is-orphan .project-card__media { aspect-ratio: 16 / 9; }
  .project-card--narrow .project-card__media,
  .project-card--wide .project-card__media { aspect-ratio: 4 / 3.4; }
  /* Live site screenshots are landscape mockups: a 4:5 crop cuts the browser
     frame away, so trio cards stay landscape. */
  .project-card--tall .project-card__media { aspect-ratio: 4 / 3; }
}
@media (min-width: 1024px) {
  .project-card--wide { grid-column: span 7; }
  .project-card--narrow { grid-column: span 5; }
  .project-card--tall { grid-column: span 4; }
  .project-card.is-orphan { grid-column: 1 / -1; }
  .project-card--wide .project-card__media { aspect-ratio: 16 / 10.5; }
  /* Narrow cards stretch to their row partner's height. */
  .project-card--narrow .project-card__media { aspect-ratio: auto; flex: 1 1 auto; min-height: 18rem; }
  /* 16:9 rather than 21:9: real site screenshots are framed mockups, and a
     letterbox crop cuts the browser frame off and zooms into the page content. */
  .project-card--featured .project-card__media { aspect-ratio: 16 / 9; }
  .project-card.is-orphan .project-card__media { aspect-ratio: 16 / 9; }
}

/* 10. Accordion & tabs ----------------------------------------------------- */
.accordion { border-top: 1px solid var(--color-line); }
.accordion__item { border-bottom: 1px solid var(--color-line); }
.accordion__heading { margin: 0; }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding-block: 1.45rem;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 680;
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--color-text);
}
.accordion__icon {
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  transition: border-color .3s ease, background-color .3s ease;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .75rem;
  height: 1.5px;
  background: currentColor;
  translate: -50% -50%;
  transition: transform var(--dur) var(--ease-out), background-color .3s;
}
.accordion__icon::after { transform: rotate(90deg); }
.accordion__trigger:hover .accordion__icon { border-color: var(--color-line-accent); }
.accordion__trigger[aria-expanded="true"] .accordion__icon {
  border-color: var(--color-accent);
  background: rgba(0, 226, 208, .08);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(0deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::before,
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { background: var(--color-accent); }
.accordion__panel { overflow: hidden; }
.accordion__content {
  padding: 0 3.5rem 1.75rem 0;
  max-width: 62ch;
  color: var(--color-muted-light);
}
.accordion__content p + p { margin-top: .85rem; }

.tabs__panel[hidden] { display: none; }

/* 11. Forms --------------------------------------------------------------- */
.field { display: grid; gap: .55rem; min-width: 0; }
.field__label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted-light);
}
.field__optional { color: var(--color-muted); letter-spacing: .08em; }
.field__input {
  width: 100%;
  min-height: 3.5rem;
  padding: .95rem 1.1rem;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-text);
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.field__input::placeholder { color: var(--color-muted); opacity: 1; }
.field__input:hover { border-color: rgba(255, 255, 255, .24); }
.field__input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: rgba(0, 226, 208, .04);
  box-shadow: 0 0 0 3px rgba(0, 226, 208, .14);
}
textarea.field__input { min-height: 10rem; resize: vertical; }
.field__hint { font-size: .8125rem; color: var(--color-muted); }
.field__error {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .8125rem;
  color: var(--color-danger);
}
.field__error[hidden] { display: none; }
.field__error::before {
  content: "";
  width: .45rem;
  height: .45rem;
  flex: none;
  background: currentColor;
  transform: rotate(45deg);
}
.field.is-invalid .field__input,
.fieldset.is-invalid .choice-grid { border-color: var(--color-danger); }
.field.is-invalid .field__input { box-shadow: 0 0 0 3px rgba(255, 122, 133, .12); }

.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .85rem; }
.fieldset legend { padding: 0; margin-bottom: .85rem; }

.choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}
.choice { position: relative; }
.choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice__label {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  padding: .6rem 1rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  color: var(--color-muted-light);
  background: rgba(255, 255, 255, .02);
  transition: border-color .25s ease, background-color .25s ease, color .25s ease;
  pointer-events: none;
}
.choice__label::before {
  content: "";
  width: .7rem;
  height: .7rem;
  flex: none;
  border: 1px solid var(--color-muted);
  border-radius: 1px;
  transition: background-color .2s ease, border-color .2s ease, transform .3s var(--ease-out);
}
.choice--radio .choice__label::before { border-radius: 50%; }
.choice input:hover + .choice__label { border-color: rgba(255, 255, 255, .26); color: var(--color-text); }
.choice input:checked + .choice__label {
  border-color: var(--color-accent);
  background: rgba(0, 226, 208, .07);
  color: var(--color-text);
}
.choice input:checked + .choice__label::before {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: rotate(45deg) scale(.9);
}
.choice--radio input:checked + .choice__label::before { transform: none; box-shadow: inset 0 0 0 2px var(--color-bg); }
.choice input:focus-visible + .choice__label { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* 12. Marquee --------------------------------------------------------------- */
.marquee {
  position: relative;
  display: flex;
  align-items: center;
  border-block: 1px solid var(--color-line);
  overflow: clip;
  background: linear-gradient(90deg, var(--color-bg), transparent 12%, transparent 88%, var(--color-bg));
}
.marquee__viewport {
  flex: 1;
  min-width: 0;
  overflow: clip;
  padding-block: clamp(1.1rem, .8rem + 1.2vw, 1.9rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee.is-paused .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-right: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  font-family: var(--font-display);
  font-weight: 760;
  font-size: clamp(1.625rem, 1rem + 2.8vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--color-muted-light);
  white-space: nowrap;
}
.marquee__node {
  position: relative;
  width: .7rem;
  height: .7rem;
  flex: none;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
}
.marquee__node::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--color-accent);
}
.marquee__toggle {
  flex: none;
  align-self: stretch;
  display: grid;
  place-items: center;
  width: 3.25rem;
  border-left: 1px solid var(--color-line);
  color: var(--color-muted);
  transition: color var(--dur-fast);
}
.marquee__toggle:hover { color: var(--color-text); }
.marquee__toggle .icon { width: .9rem; height: .9rem; }
.marquee__toggle .icon--play { display: none; }
.marquee.is-paused .marquee__toggle .icon--pause { display: none; }
.marquee.is-paused .marquee__toggle .icon--play { display: block; }
@keyframes marquee {
  to { transform: translate3d(-50%, 0, 0); }
}

/* 13. Footer ---------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: var(--z-content);
  padding-top: clamp(4.5rem, 3rem + 5vw, 8rem);
  border-top: 1px solid var(--color-line);
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);
  overflow: clip;
}
.site-footer__top {
  display: grid;
  gap: 2.25rem;
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}
@media (min-width: 1024px) {
  .site-footer__top {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
  }
  .site-footer__title { grid-column: 1 / span 7; }
  .site-footer__contact { grid-column: 9 / span 4; }
}
.site-footer__title {
  font-family: var(--font-display);
  font-weight: 780;
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 5rem);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.site-footer__contact {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}
.footer-email {
  font-family: var(--font-display);
  font-weight: 680;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  letter-spacing: -.01em;
  color: var(--color-text);
  background: linear-gradient(var(--color-accent), var(--color-accent)) 0 100% / 0 1px no-repeat;
  padding-bottom: .2rem;
  transition: background-size .6s var(--ease-out), color var(--dur-fast);
}
.footer-email:hover { color: var(--color-accent); background-size: 100% 1px; }
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem var(--col-gap);
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
  border-top: 1px solid var(--color-line);
}
@media (min-width: 768px) {
  .site-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.footer-heading {
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.footer-links { display: grid; gap: .7rem; }
.footer-links a,
.footer-links span {
  font-size: .9375rem;
  color: var(--color-muted-light);
  transition: color var(--dur-fast);
}
.footer-links a:hover { color: var(--color-text); }
.footer-status {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
/* Fill only: stroking a variable font exposes its overlapping contours. */
.site-footer__wordmark {
  color: rgba(244, 247, 250, .085);
  margin-bottom: -1.2%;
  user-select: none;
  -webkit-mask-image: linear-gradient(180deg, #000 15%, rgba(0, 0, 0, .15) 100%);
  mask-image: linear-gradient(180deg, #000 15%, rgba(0, 0, 0, .15) 100%);
}
.site-footer__wordmark svg { width: 100%; height: auto; overflow: visible; }
.site-footer__wordmark text {
  font-family: var(--font-display);
  font-weight: 800;
  fill: currentColor;
}
.site-footer__bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9rem 2rem;
  padding-block: 1.5rem calc(1.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}
.site-footer__legal a { transition: color var(--dur-fast); }
.site-footer__legal a:hover { color: var(--color-text); }

.status-dot {
  position: relative;
  width: .5rem;
  height: .5rem;
  flex: none;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 10px rgba(0, 226, 208, .7);
}
.status-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  opacity: 0;
  animation: status-ping 2.8s var(--ease-out) infinite;
}
@keyframes status-ping {
  0% { transform: scale(.6); opacity: .8; }
  70%, 100% { transform: scale(1.8); opacity: 0; }
}

/* 14. Motion ------------------------------------------------------------------
   Content is visible by default; hidden states only apply once JS runs. */
.js [data-reveal="fade"] {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.js [data-reveal="fade"].is-in { opacity: 1; transform: none; }

.js [data-reveal="lines"] .line > span {
  transform: translate3d(0, 112%, 0);
  transition: transform 1.15s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 85ms + var(--delay, 0ms));
}
.js [data-reveal="lines"].is-in .line > span { transform: none; }

.js [data-reveal="rule"] .section-rule__line {
  transform: scaleX(0);
  transition: transform 1.4s var(--ease-out) .1s;
}
.js [data-reveal="rule"] .label { opacity: 0; transition: opacity .8s ease; }
.js [data-reveal="rule"].is-in .section-rule__line { transform: none; }
.js [data-reveal="rule"].is-in .label { opacity: 1; }

.js [data-reveal="media"] {
  clip-path: inset(0 0 100% 0 round var(--radius-md));
  transition: clip-path 1.3s var(--ease-in-out);
  transition-delay: var(--delay, 0ms);
}
.js [data-reveal="media"].is-in { clip-path: inset(0 0 0 0 round var(--radius-md)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal],
  .js [data-reveal] .line > span,
  .js [data-reveal] .section-rule__line,
  .js [data-reveal] .label {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .marquee__track { animation: none; }
}

/* 15. Page hero (inner pages) ----------------------------------------------- */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 5vw, 7.5rem));
  padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 7rem);
  overflow: clip;
}
.page-hero .bg-grid {
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 20% 0%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 90% at 20% 0%, #000 10%, transparent 70%);
}
.page-hero .glow {
  width: 60rem;
  height: 40rem;
  top: -18rem;
  right: -14rem;
  --glow-color: rgba(39, 134, 255, .13);
}
.page-hero__inner { position: relative; }
.page-hero__title {
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  font-size: min(clamp(2.75rem, 1.2rem + 6.2vw, 8rem), 15svh);
  max-width: 14ch;
}
.page-hero__lead { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.page-hero__row {
  display: grid;
  gap: 2rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
@media (min-width: 1024px) {
  .page-hero__row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
  }
  .page-hero__row > :first-child { grid-column: 1 / span 6; }
  .page-hero__row > :last-child { grid-column: 8 / span 5; justify-self: end; }
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.breadcrumb li { display: inline-flex; align-items: center; gap: .5rem; }
.breadcrumb li + li::before { content: "/"; color: var(--color-muted); opacity: .7; }
.breadcrumb a { color: var(--color-muted-light); transition: color var(--dur-fast); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb [aria-current="page"] { color: var(--color-text); }

/* 16. Home: hero & Mirana Core -------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-top: var(--header-h);
  overflow: clip;
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__bg .bg-grid {
  -webkit-mask-image: radial-gradient(ellipse 65% 70% at 72% 38%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 65% 70% at 72% 38%, #000 10%, transparent 72%);
}
.hero__glow--cyan {
  width: min(70rem, 120vw);
  aspect-ratio: 1;
  right: -22%;
  top: -30%;
  --glow-color: rgba(0, 226, 208, .10);
}
.hero__glow--purple {
  width: min(56rem, 110vw);
  aspect-ratio: 1;
  left: -24%;
  bottom: -46%;
  --glow-color: rgba(152, 92, 255, .10);
}
.hero__inner {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem);
}
.hero__content { position: relative; z-index: 2; }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  padding: .5rem .85rem .5rem .75rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: rgba(6, 8, 13, .5);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text);
}
.hero__badge-mark {
  width: .55rem;
  height: .55rem;
  background: var(--color-accent);
  transform: rotate(45deg);
}
.hero__title { max-width: 15.5ch; }
.hero__title .line > span { white-space: nowrap; }
.hero__title .line--wrap > span { white-space: normal; }

.rotator {
  display: inline-grid;
  vertical-align: baseline;
  overflow: hidden;
  padding-block: .07em;
  margin-block: -.07em;
  color: var(--color-accent);
}
.rotator__word {
  grid-area: 1 / 1;
  white-space: nowrap;
}
.rotator__word:not(:first-child) { visibility: hidden; }
/* Travel past the padded clip box (.rotator and .line both pad by .07em so
   glyph overshoot isn't cut), otherwise the outgoing word peeks above. */
.js .rotator__word {
  visibility: visible;
  opacity: 0;
  transform: translate3d(0, 130%, 0);
  transition: transform .9s var(--ease-out), opacity .5s ease;
}
.js .rotator__word.is-active { opacity: 1; transform: none; }
.js .rotator__word.is-leaving { opacity: 0; transform: translate3d(0, -130%, 0); }

.hero__foot {
  display: grid;
  gap: 1.75rem;
  margin-top: clamp(1.75rem, 1rem + 2.5vw, 3.25rem);
}
.hero__lead { max-width: 33rem; }
.hero__actions { display: grid; gap: 1.25rem; justify-items: start; }
.hero__availability {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted-light);
}
@media (max-width: 599px) {
  .hero__actions .btn-row { display: grid; width: 100%; }
  .hero__actions .btn { justify-content: space-between; }
}
@media (min-width: 1024px) {
  .hero__foot {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
  }
  .hero__lead { grid-column: 1 / span 5; }
  .hero__actions { grid-column: 7 / span 6; justify-items: end; }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  /* Small laptops: keep both CTAs on one row beside the lead. */
  .hero__lead { grid-column: 1 / span 6; }
  .hero__actions { grid-column: 7 / span 6; }
  /* Keep the labels on one line; let the row wrap instead of squeezing buttons. */
  .hero__actions .btn { --btn-h: 3.125rem; }
  .hero__actions .btn__label { padding-inline: 1.1rem 1rem; white-space: nowrap; }
}

.hero__stage {
  position: absolute;
  z-index: 1;
  top: calc(var(--header-h) + 1rem);
  right: calc(var(--gutter) * -1 - 12vw);
  width: min(88vw, 30rem);
  aspect-ratio: 1;
  opacity: .5;
  pointer-events: none;
}
@media (min-width: 768px) {
  .hero__stage {
    top: calc(var(--header-h) + 2vh);
    right: calc(var(--gutter) * -.5);
    width: min(50vw, 34rem);
    opacity: .85;
  }
}
@media (min-width: 1180px) {
  .hero__stage {
    top: 50%;
    right: max(calc((100vw - var(--container)) / 2 - 4rem), -2rem);
    width: min(47vw, 47rem, 76svh);
    transform: translateY(-58%);
    opacity: 1;
  }
}

.hero__rail {
  position: relative;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.25rem 1.5rem;
  border-top: 1px solid var(--color-line);
}
@media (min-width: 768px) {
  .hero__rail { display: flex; }
}
.lifecycle {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem clamp(1.25rem, .5rem + 2.2vw, 3rem);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted-light);
}
.lifecycle li { display: inline-flex; gap: .55rem; }
.lifecycle span { color: var(--color-accent); }
@media (max-width: 1179px) {
  .lifecycle { flex: 1; justify-content: space-between; }
}
.hero__scroll {
  display: none;
}
@media (min-width: 1180px) {
  .hero__scroll { display: inline-flex; }
}
.hero__scroll {
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color var(--dur-fast);
}
.hero__scroll:hover { color: var(--color-text); }
.hero__scroll .icon { width: .85rem; height: .85rem; animation: nudge 2.4s var(--ease-in-out) infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* The WebGL core renders into one fixed canvas that travels between anchors.
   The SVG fallbacks stay visible until the canvas paints its first frame. */
.core-canvas {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-canvas);
  pointer-events: none;
  transform-origin: 0 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  will-change: transform;
}
.has-core .core-canvas { opacity: 1; }
.core-canvas.is-idle { visibility: hidden; }

.core-fallback {
  position: absolute;
  inset: 0;
  transition: opacity .8s ease;
}
.core-fallback svg { width: 100%; height: 100%; overflow: visible; }
.has-core .core-fallback { opacity: 0; }
.core-fallback__spin { transform-box: view-box; transform-origin: 300px 300px; animation: core-spin 60s linear infinite; }
.core-fallback__spin--rev { animation-duration: 90s; animation-direction: reverse; }
.core-fallback__pulse { transform-box: view-box; transform-origin: 300px 300px; animation: core-pulse 5s var(--ease-in-out) infinite; }
@keyframes core-spin { to { transform: rotate(360deg); } }
@keyframes core-pulse {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.06); opacity: 1; }
}

/* 17. Home: studio sequence ------------------------------------------------- */
.studio__head { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
@media (min-width: 1024px) {
  .studio__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
  }
  .studio__head .h2 { grid-column: 1 / span 7; }
  .studio__head .lead { grid-column: 8 / span 5; }
}
.studio__head .h2 { font-size: var(--fs-display); }

.sequence {
  position: relative;
  margin-top: clamp(3rem, 2rem + 5vw, 7rem);
}
.sequence__stage { display: none; }
.sequence__steps { display: grid; gap: clamp(1rem, .5rem + 2vw, 2rem); }

.step {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}
.step__index {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.step__index b { font-weight: 400; color: var(--color-accent); }
/* Lighter than --color-muted so 12px text still clears 4.5:1 at the dimmed step opacity. */
.step__index span { color: var(--color-muted-light); }
.step__title {
  font-family: var(--font-display);
  font-weight: 780;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4.25rem);
  line-height: .92;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.step__text { color: var(--color-muted-light); max-width: 34rem; }
.step .tag-list { margin-top: .5rem; }
.step__visual {
  order: -1;
  aspect-ratio: 4 / 3;
  margin: -.25rem -.25rem .5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--color-bg);
  overflow: hidden;
}
.step__visual svg { width: 100%; height: 100%; }
@media (min-width: 600px) and (max-width: 1023px) {
  .step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem; align-items: center; }
  .step__visual { grid-column: 2; grid-row: 1 / span 4; order: 0; margin: 0; }
  .step > :not(.step__visual) { grid-column: 1; }
}

@media (min-width: 1024px) {
  .sequence {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .sequence__stage {
    display: block;
    grid-column: 1 / span 7;
    grid-row: 1;
    position: sticky;
    top: calc(var(--header-h) + 4svh);
    height: calc(100svh - var(--header-h) - 8svh);
    min-height: 30rem;
    max-height: 52rem;
    align-self: start;
  }
  .sequence__steps {
    --rail-pad: clamp(2rem, .5rem + 2.6vw, 3.5rem);
    grid-column: 8 / span 5;
    grid-row: 1;
    gap: 0;
    padding-block: 6svh 18svh;
    padding-left: var(--rail-pad);
    border-left: 1px solid var(--color-line);
  }
  .step::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--rail-pad) * -1 - 5px);
    width: 9px;
    height: 9px;
    border: 1px solid var(--color-muted);
    background: var(--color-bg);
    transform: translateY(-50%) rotate(45deg);
    transition: background-color .4s ease, border-color .4s ease;
  }
  .step.is-active::before { border-color: var(--color-accent); background: var(--color-accent); }
  .step {
    min-height: 72svh;
    align-content: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .step__visual { display: none; }
  /* Inactive steps recede, but stay above the contrast threshold: their text is
     real content, not decoration. Active state is carried by the cyan index and
     the filled rail marker as well as opacity. */
  .js .step { opacity: .7; transition: opacity .6s ease; }
  .js .step.is-active { opacity: 1; }
  .js .step:not(.is-active) .step__title { color: var(--color-muted-light); }
}

.stage-frame {
  position: relative;
  height: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(39, 134, 255, .08), transparent 70%),
    var(--color-bg-soft);
  overflow: hidden;
}
/* The WebGL core renders behind <main>; let it show through the stage frame. */
.has-core .stage-frame { background: transparent; }
.stage-frame .bg-grid {
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 85%);
}
.stage-frame__anchor { position: absolute; inset: 7% 10%; }
.stage-hud {
  position: absolute;
  z-index: 2;
  display: flex;
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.stage-hud b { font-weight: 400; color: var(--color-text); }
.stage-hud--tl { top: 1.25rem; left: 1.5rem; }
.stage-hud--tr { top: 1.25rem; right: 1.5rem; }
.stage-hud--bl { bottom: 1.25rem; left: 1.5rem; color: var(--color-accent); }
.stage-hud--br { bottom: 1.25rem; right: 1.5rem; align-items: center; }
.stage-ticks { display: flex; gap: .35rem; }
.stage-ticks i {
  width: 1.5rem;
  height: 2px;
  background: var(--color-line-strong);
  transition: background-color .4s ease;
}
.stage-ticks i.is-on { background: var(--color-accent); }
.stage-fallback { position: absolute; inset: 10%; transition: opacity .8s ease; }
.stage-fallback svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .7s ease;
}
.stage-fallback svg.is-active { opacity: 1; }
.has-core .stage-fallback { opacity: 0; }
.stage-frame .brackets { inset: 1rem; }
.stage-frame .brackets::before,
.stage-frame .brackets::after,
.stage-frame .brackets > span::before,
.stage-frame .brackets > span::after { opacity: .7; transform: none; border-color: var(--color-muted); }

/* 18. Home: work preview, capabilities --------------------------------------- */
.pillars { display: grid; gap: var(--col-gap); }
@media (min-width: 1180px) {
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pillar {
  --mx: 50%;
  --my: -30%;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 45%),
    var(--color-bg-soft);
  overflow: hidden;
  isolation: isolate;
}
[data-spotlight]::before,
[data-spotlight]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}
[data-spotlight]::before {
  z-index: -1;
  background: radial-gradient(30rem circle at var(--mx, 50%) var(--my, 0%), rgba(0, 226, 208, .075), transparent 45%);
}
[data-spotlight]::after {
  padding: 1px;
  background: radial-gradient(20rem circle at var(--mx, 50%) var(--my, 0%), rgba(0, 226, 208, .6), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
@media (hover: hover) and (pointer: fine) {
  [data-spotlight]:hover::before,
  [data-spotlight]:hover::after { opacity: 1; }
}
.pillar__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 6rem);
}
.pillar__index {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-accent);
}
.pillar__glyph {
  width: clamp(4rem, 3rem + 2vw, 5.5rem);
  height: clamp(4rem, 3rem + 2vw, 5.5rem);
  color: var(--color-muted-light);
}
.pillar__glyph svg { width: 100%; height: 100%; overflow: visible; }
.pillar__title {
  font-family: var(--font-display);
  font-weight: 780;
  font-size: clamp(2.5rem, 1.9rem + 2.2vw, 4rem);
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.pillar__desc {
  margin-top: 1rem;
  max-width: 32ch;
  color: var(--color-muted-light);
}
.pillar__list {
  margin-top: 2rem;
  border-top: 1px solid var(--color-line);
}
.pillar__list li {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-block: .78rem;
  border-bottom: 1px solid var(--color-line);
  font-size: .9375rem;
  line-height: 1.35;
}
.pillar__list li::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border: 1px solid var(--color-muted);
  transform: rotate(45deg);
  transition: background-color .3s, border-color .3s;
}
.pillar:hover .pillar__list li::before { border-color: var(--color-accent); }
.pillar__link { margin-top: auto; padding-top: 2rem; align-self: flex-start; }
@media (min-width: 768px) and (max-width: 1179px) {
  .pillar {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 2.5rem;
  }
  .pillar__top { grid-column: 1 / -1; margin-bottom: 1.5rem; }
  .pillar__title, .pillar__desc, .pillar__link { grid-column: 1; }
  .pillar__list {
    grid-column: 2;
    grid-row: 2 / span 3;
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-content: start;
  }
  .pillar__link { align-self: end; }
}

/* 19. Home: technology, why ------------------------------------------------ */
.tech-tabs {
  display: grid;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .tech-tabs {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .tech-tabs__list { grid-column: 1 / span 4; }
  .tech-tabs__panels { grid-column: 6 / span 7; }
}
.tech-tabs__list {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-bottom: .25rem;
  scroll-snap-type: x proximity;
}
.tech-tabs__list::-webkit-scrollbar { display: none; }
@media (max-width: 1023px) {
  /* Fade the trailing edge so the scrollable tab row reads as scrollable. */
  .tech-tabs__list {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3.5rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 3.5rem), transparent);
  }
}
.tech-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  padding: .55rem 1rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 680;
  font-size: .9375rem;
  color: var(--color-muted-light);
  scroll-snap-align: start;
  transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}
.tech-tab:hover { color: var(--color-text); }
.tech-tab[aria-selected="true"] {
  color: var(--color-text);
  border-color: var(--color-line-accent);
  background: rgba(0, 226, 208, .06);
}
.tech-tab__count {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  color: var(--color-muted);
}
.tech-tab[aria-selected="true"] .tech-tab__count { color: var(--color-accent); }
@media (min-width: 1024px) {
  .tech-tabs__list {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-line);
    align-self: start;
  }
  .tech-tab {
    position: relative;
    width: 100%;
    min-height: 0;
    padding: 1.2rem 0;
    border: 0;
    border-bottom: 1px solid var(--color-line);
    border-radius: 0;
    font-weight: 740;
    font-size: clamp(1.25rem, .9rem + .8vw, 1.75rem);
    letter-spacing: -.015em;
    text-transform: uppercase;
  }
  .tech-tab[aria-selected="true"] { background: none; }
  .tech-tab::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .7s var(--ease-out);
  }
  .tech-tab[aria-selected="true"]::before { transform: scaleX(1); }
}
.tech-panel { display: grid; gap: 1.75rem; }
.tech-panel:focus-visible { outline-offset: 8px; }
.tech-panel__intro {
  max-width: 50ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-muted-light);
}
.js .tech-panel:not([hidden]) .tech-tile { animation: tile-in .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes tile-in {
  from { opacity: 0; transform: translateY(.75rem); }
}
.tech-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--color-line);
  border-left: 1px solid var(--color-line);
}
@media (min-width: 600px) {
  .tech-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tech-tile {
  display: grid;
  align-content: space-between;
  gap: 1.75rem;
  min-height: 9.5rem;
  padding: 1.25rem;
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  transition: background-color .35s ease;
}
.tech-tile:hover { background: rgba(255, 255, 255, .025); }
.tech-tile__logo {
  width: 1.75rem;
  height: 1.75rem;
  fill: var(--color-muted-light);
  transition: fill .35s ease;
}
.tech-tile:hover .tech-tile__logo { fill: var(--color-text); }
.tech-tile__mono {
  display: grid;
  place-items: center;
  justify-self: start;
  min-width: 1.75rem;
  height: 1.75rem;
  padding-inline: .3rem;
  border: 1px solid var(--color-line-strong);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .04em;
  color: var(--color-muted-light);
}
.tech-tile__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
}
.tech-tile__role {
  display: block;
  margin-top: .3rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.tech__note {
  margin-top: 1.5rem;
  font-size: .8125rem;
  color: var(--color-muted);
}

.why__grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); }
@media (min-width: 1024px) {
  .why__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .why__head {
    grid-column: 1 / span 5;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 3rem);
  }
  .why__list { grid-column: 7 / span 6; }
}
.why__head { display: grid; gap: 1.75rem; align-content: start; }
.why__head .section-rule { margin-bottom: .5rem; }
.why-item {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: .5rem 1.5rem;
  padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  border-top: 1px solid var(--color-line);
}
.why-item:last-child { border-bottom: 1px solid var(--color-line); }
.why-item__glyph {
  grid-row: span 2;
  width: 3.5rem;
  height: 3.5rem;
  color: var(--color-accent);
}
.why-item__glyph svg { width: 100%; height: 100%; overflow: visible; }
.why-item__title {
  font-family: var(--font-display);
  font-weight: 760;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.why-item__text { color: var(--color-muted-light); max-width: 46ch; }

/* 20. Home: showcase, engagement --------------------------------------------- */
.showcase { overflow: clip; }
.showcase__head { text-align: left; }
.showcase__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-top: clamp(1rem, .5rem + 2vw, 2rem);
}
@media (min-width: 600px) { .showcase__stage { aspect-ratio: 16 / 12; } }
@media (min-width: 1024px) { .showcase__stage { aspect-ratio: 16 / 9.2; } }
.showcase__stage .bg-grid {
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 25%, transparent 75%);
}
.showcase__glow {
  width: 80%;
  aspect-ratio: 1.6;
  left: 10%;
  top: 5%;
  --glow-color: rgba(39, 134, 255, .16);
}
.device {
  position: absolute;
  margin: 0;
  transform: translate3d(0, var(--shift, 0px), 0);
  will-change: transform;
}
.device img { width: 100%; height: 100%; object-fit: cover; }
.device--desktop {
  left: 0;
  top: 6%;
  width: 100%;
  border-radius: 10px;
  background: #0F141F;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .4);
  overflow: hidden;
}
.device__bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  height: 1.9rem;
  padding-inline: .8rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: #111725;
}
.device__bar i { width: .45rem; height: .45rem; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.device__bar span {
  margin-inline: auto;
  width: 38%;
  height: .95rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, .06);
}
.device--desktop .device__screen { aspect-ratio: 16 / 10; }
.device--tablet {
  display: none;
  right: 3%;
  top: 22%;
  width: 24%;
  padding: 2.2%;
  border-radius: 1.6rem;
  background: #0B0E15;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9);
}
.device--tablet .device__screen { aspect-ratio: 3 / 4; border-radius: .7rem; overflow: hidden; }
.device--phone {
  right: 4%;
  bottom: 0;
  width: 34%;
  padding: 2%;
  border-radius: 2rem;
  background: #0B0E15;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .95);
}
.device--phone .device__screen { aspect-ratio: 390 / 844; border-radius: 1.5rem; overflow: hidden; position: relative; }
.device--phone .device__screen::after {
  content: "";
  position: absolute;
  top: 2.2%;
  left: 50%;
  width: 30%;
  height: 3.2%;
  translate: -50% 0;
  border-radius: 1rem;
  background: #05070B;
}
.code-window {
  position: absolute;
  display: none;
  left: 2%;
  bottom: 4%;
  width: 34%;
  border-radius: 10px;
  background: rgba(10, 13, 20, .92);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transform: translate3d(0, var(--shift, 0px), 0);
}
.code-window__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .9rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.code-window pre {
  margin: 0;
  padding: 1rem 1.1rem 1.2rem;
  font-family: var(--font-mono);
  font-size: clamp(.625rem, .45rem + .35vw, .8125rem);
  line-height: 1.75;
  color: #C9D1E0;
  white-space: pre;
  overflow: hidden;
}
.code-window .tk-k { color: #985CFF; }
.code-window .tk-f { color: #2786FF; }
.code-window .tk-s { color: #00E2D0; }
.code-window .tk-c { color: #5D667A; }
.showcase-chip {
  position: absolute;
  z-index: 3;
  display: none;
  align-items: center;
  gap: .55rem;
  padding: .55rem .8rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: rgba(6, 8, 13, .88);
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-muted-light);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform: translate3d(0, var(--shift, 0px), 0);
}
.showcase-chip b { font-weight: 400; color: var(--color-accent); }
.showcase-chip--a { left: 44%; top: 2%; }
.showcase-chip--b { right: 30%; bottom: 6%; }
@media (min-width: 600px) and (max-width: 1023px) {
  .device--desktop { width: 92%; top: 4%; }
  .device--phone { right: 0; bottom: 0; width: 25%; padding: 1.4%; border-radius: 1.75rem; }
}
@media (min-width: 1024px) {
  .device--desktop { left: 8%; top: 4%; width: 64%; }
  .device--tablet { display: block; }
  .device--phone { right: auto; left: 60%; bottom: 2%; width: 14%; padding: .6%; border-radius: 1.6rem; }
  .device--phone .device__screen { border-radius: 1.2rem; }
  .code-window { display: block; }
  .showcase-chip { display: inline-flex; }
}
.showcase__notes {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  border-top: 1px solid var(--color-line);
  padding-top: 2rem;
}
@media (min-width: 768px) {
  .showcase__notes { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
}
.showcase__note h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -.01em;
}
.showcase__note p { margin-top: .5rem; font-size: .9375rem; color: var(--color-muted-light); max-width: 36ch; }

.engage__grid { display: grid; gap: var(--col-gap); }
@media (min-width: 1024px) {
  .engage__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.engage-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
  isolation: isolate;
}
.engage-card__glyph {
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  color: var(--color-accent);
}
.engage-card__glyph svg { width: 100%; height: 100%; overflow: visible; }
.engage-card__title {
  font-family: var(--font-display);
  font-weight: 760;
  font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem);
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.engage-card__desc { margin-top: 1rem; color: var(--color-muted-light); }
.engage-card__meta {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--color-line-strong);
}
.engage-card__meta dt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.engage-card__meta dd { margin-top: .45rem; font-size: .9375rem; }
.engage-card__list { display: grid; gap: .65rem; margin-top: 1.5rem; }
.engage-card__list li {
  display: flex;
  gap: .8rem;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--color-muted-light);
}
.engage-card__list li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  margin-top: .5em;
  border: 1px solid var(--color-accent);
  transform: rotate(45deg);
}
.engage-card__cta { margin-top: auto; padding-top: 2rem; align-self: flex-start; }
@media (min-width: 768px) and (max-width: 1023px) {
  .engage-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 2.5rem;
  }
  .engage-card__glyph { grid-column: 1 / -1; margin-bottom: 1.5rem; }
  .engage-card__title, .engage-card__desc, .engage-card__cta { grid-column: 1; }
  .engage-card__meta, .engage-card__list { grid-column: 2; }
  .engage-card__meta { grid-row: 2; margin-top: 0; border-top: 0; padding-top: 0; }
  .engage-card__list { grid-row: 3 / span 2; }
}

/* 21. Home: testimonials, FAQ, final CTA ------------------------------------ */
.quotes { display: grid; gap: var(--col-gap); }
@media (min-width: 1024px) {
  .quotes { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .quote--lead { grid-column: 1 / span 7; grid-row: span 2; }
  .quote--small { grid-column: 8 / span 5; }
}
.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 0;
  padding: clamp(1.5rem, 1rem + 1.8vw, 2.75rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}
.quote .temp-tag { position: absolute; top: 1.25rem; right: 1.25rem; }
.quote__mark {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-accent);
}
.quote blockquote { margin: 0; }
.quote blockquote p {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.1875rem, .95rem + .9vw, 1.75rem);
  line-height: 1.38;
  letter-spacing: -.012em;
  text-wrap: pretty;
}
.quote--lead blockquote { flex: 1; display: flex; align-items: center; }
.quote--lead blockquote p { font-size: clamp(1.375rem, 1rem + 1.4vw, 2.25rem); line-height: 1.3; }
.quote figcaption {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
}
.quote__avatar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--color-line-strong);
  background: var(--color-surface-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--color-muted-light);
}
.quote__name { display: block; font-weight: 600; }
.quote__role { display: block; font-size: .875rem; color: var(--color-muted); }

.faq__grid { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
@media (min-width: 1024px) {
  .faq__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .faq__head { grid-column: 1 / span 4; }
  .faq__list { grid-column: 6 / span 7; }
}
.faq__head { display: grid; gap: 1.5rem; align-content: start; justify-items: start; }
.faq__head .section-rule { width: 100%; margin-bottom: .5rem; }
.faq__head p { color: var(--color-muted-light); max-width: 30rem; }

.cta-final {
  position: relative;
  padding-block: clamp(7rem, 4rem + 11vw, 15rem);
  text-align: center;
  overflow: clip;
  isolation: isolate;
}
.cta-final .bg-grid {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 5%, transparent 60%);
  mask-image: radial-gradient(circle at 50% 50%, #000 5%, transparent 60%);
}
.cta-final__orbits {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: max(58rem, 110vw);
  max-width: 88rem;
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
}
.cta-final__orbits svg { width: 100%; height: 100%; overflow: visible; }
.cta-final__inner { position: relative; display: grid; justify-items: center; gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.cta-final__title { max-width: 13ch; }
.cta-final__sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--color-muted-light);
}
.cta-final .btn-row { justify-content: center; margin-top: .5rem; }
@media (max-width: 599px) {
  .cta-final .btn-row { display: grid; width: 100%; }
  .cta-final .btn { justify-content: space-between; }
}

.orbits-spin {
  transform-box: view-box;
  transform-origin: 500px 500px;
  animation: core-spin 140s linear infinite;
}
.orbits-spin--rev { animation-duration: 200s; animation-direction: reverse; }

/* 22+ Inner pages are merged below. -------------------------------------- */

/* 22. Services & service detail --------------------------------------------- */
/* ==========================================================================
   Services pages — services.html + websites.html (prefix .svc-)
   Temporary part file; merged into main.css at integration.
   ========================================================================== */

/* Hero --------------------------------------------------------------------- */
.svc-hero .page-hero__title { max-width: none; }
.svc-hero__lead { max-width: 40rem; }
.svc-hero__actions { margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); }
@media (max-width: 599px) {
  .svc-hero__actions { display: grid; }
  .svc-hero__actions .btn { justify-content: space-between; }
}

/* Lifecycle strip: three anchor links under the services hero. */
.svc-lifecycle {
  display: grid;
  margin-top: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  border-top: 1px solid var(--color-line-strong);
}
@media (min-width: 768px) {
  .svc-lifecycle { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.svc-lifecycle__link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .55rem 1rem;
  padding: 1.35rem 0 1.5rem;
  border-bottom: 1px solid var(--color-line);
}
@media (min-width: 768px) {
  .svc-lifecycle__link {
    height: 100%;
    padding: 1.5rem 1.5rem 1.75rem;
    border-bottom: 0;
    border-right: 1px solid var(--color-line);
  }
  .svc-lifecycle li:first-child .svc-lifecycle__link { padding-left: 0; }
  .svc-lifecycle li:last-child .svc-lifecycle__link { border-right: 0; padding-right: 0; }
}
.svc-lifecycle__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s var(--ease-out);
}
.svc-lifecycle__link:hover::before,
.svc-lifecycle__link:focus-visible::before { transform: scaleX(1); }
.svc-lifecycle__index {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.svc-lifecycle__index b { font-weight: 400; color: var(--color-accent); }
.svc-lifecycle__name {
  grid-column: 1;
  font-family: var(--font-display);
  font-weight: 760;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.svc-lifecycle__text {
  grid-column: 1 / -1;
  font-size: .9375rem;
  color: var(--color-muted-light);
}
.svc-lifecycle__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  transition: border-color .35s ease, color .35s ease;
}
.svc-lifecycle__arrow .icon { width: .9rem; height: .9rem; transition: transform .5s var(--ease-out); }
.svc-lifecycle__link:hover .svc-lifecycle__arrow,
.svc-lifecycle__link:focus-visible .svc-lifecycle__arrow { border-color: var(--color-accent); color: var(--color-accent); }
.svc-lifecycle__link:hover .svc-lifecycle__arrow .icon { transform: translateY(3px); }

/* Overview: one team, one loop ------------------------------------------ */
.svc-overview__grid {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4rem);
}
@media (min-width: 1024px) {
  .svc-overview__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: center;
  }
  .svc-overview__text { grid-column: 1 / span 5; }
  .svc-overview__diagram { grid-column: 7 / span 6; }
}
.svc-overview__text { display: grid; gap: 1.75rem; align-content: start; }
.svc-overview__text .h2 { font-size: var(--fs-h2); }
.svc-overview__text p { color: var(--color-muted-light); max-width: 34rem; }
.svc-overview__diagram {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 55% 60% at 50% 50%, rgba(0, 226, 208, .07), transparent 70%),
    var(--color-bg-soft);
  overflow: hidden;
}
.svc-overview__diagram .bg-grid {
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 25%, transparent 80%);
}
.svc-loop {
  position: absolute;
  inset: 3% 4%;
  width: 92%;
  height: 94%;
  overflow: visible;
}
.svc-loop text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  fill: var(--color-muted-light);
}
.svc-loop .svc-loop__num { fill: var(--color-accent); }
.svc-loop .svc-loop__core-label { fill: var(--color-muted); font-size: 10px; }
.svc-loop__spin {
  transform-box: view-box;
  transform-origin: 320px 200px;
  animation: core-spin 14s linear infinite;
}

.svc-points {
  display: grid;
  margin-top: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  border-top: 1px solid var(--color-line);
}
@media (min-width: 768px) {
  .svc-points { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
}
.svc-point {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--color-line);
}
@media (min-width: 768px) {
  .svc-point { border-bottom: 0; padding-block: 1.75rem 0; }
}
.svc-point__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -.01em;
}
.svc-point__text {
  margin-top: .5rem;
  max-width: 36ch;
  font-size: .9375rem;
  color: var(--color-muted-light);
}

/* Pillar sections: Design / Build / Operate ------------------------------- */
.svc-pillar__head {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
}
@media (min-width: 1024px) {
  .svc-pillar__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: center;
  }
  .svc-pillar__intro { grid-column: 1 / span 6; }
  .svc-pillar__visual { grid-column: 8 / span 5; }
  .svc-pillar--flip .svc-pillar__intro { grid-column: 7 / span 6; grid-row: 1; }
  .svc-pillar--flip .svc-pillar__visual { grid-column: 1 / span 5; grid-row: 1; }
}
.svc-pillar__index {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.svc-pillar__index b { font-weight: 400; color: var(--color-accent); }
.svc-pillar__title {
  font-family: var(--font-display);
  font-weight: 780;
  font-size: clamp(3.5rem, 2rem + 6.4vw, 8.5rem);
  line-height: .86;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.svc-pillar__lead { margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); }
.svc-pillar__deliverables {
  display: grid;
  gap: .85rem;
  margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
}
.svc-pillar__deliverables-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

.svc-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%, rgba(39, 134, 255, .09), transparent 70%),
    var(--color-bg-soft);
  overflow: hidden;
}
.svc-visual .bg-grid {
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 30%, transparent 85%);
}
.svc-visual svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.svc-visual text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  fill: var(--color-muted);
}
.svc-visual .svc-visual__type {
  font-family: var(--font-display);
  font-weight: 760;
  font-size: 84px;
  letter-spacing: -.03em;
  fill: var(--color-text);
}
.svc-visual__blink { animation: svc-blink 2.4s var(--ease-in-out) infinite; }
.svc-visual__blink--2 { animation-delay: .8s; }
.svc-visual__blink--3 { animation-delay: 1.6s; }
@keyframes svc-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}
.svc-visual .brackets { inset: .9rem; }
.svc-visual .brackets::before,
.svc-visual .brackets::after,
.svc-visual .brackets > span::before,
.svc-visual .brackets > span::after { opacity: .6; transform: none; border-color: var(--color-muted); }

.svc-groups { margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
.svc-group {
  display: grid;
  gap: 1.5rem;
  padding-block: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  border-top: 1px solid var(--color-line-strong);
}
@media (min-width: 1024px) {
  .svc-group {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .svc-group__head { grid-column: 1 / span 4; }
  .svc-caps { grid-column: 5 / span 8; }
}
.svc-group__head { display: grid; gap: .75rem; align-content: start; }
.svc-group__name {
  font-family: var(--font-display);
  font-weight: 760;
  font-size: clamp(1.375rem, 1.15rem + .9vw, 1.875rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.svc-group__text { max-width: 32ch; color: var(--color-muted-light); font-size: .9375rem; }
.svc-caps {
  display: grid;
  column-gap: var(--col-gap);
}
@media (min-width: 600px) {
  .svc-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.svc-cap {
  padding-block: 1.1rem 1.35rem;
  border-top: 1px solid var(--color-line);
}
.svc-cap:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 600px) {
  .svc-cap:nth-child(2) { border-top: 0; padding-top: 0; }
}
.svc-cap__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.svc-cap__title a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: color var(--dur-fast);
}
.svc-cap__title a .icon { width: .85rem; height: .85rem; color: var(--color-accent); transition: transform var(--dur) var(--ease-out); }
.svc-cap__title a:hover { color: var(--color-accent); }
.svc-cap__title a:hover .icon { transform: translate(2px, -2px); }
.svc-cap__text {
  margin-top: .45rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--color-muted-light);
}

/* Technology philosophy ---------------------------------------------------- */
.svc-tech__grid { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
@media (min-width: 1024px) {
  .svc-tech__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .svc-tech__head {
    grid-column: 1 / span 5;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 3rem);
  }
  .svc-principles { grid-column: 7 / span 6; }
}
.svc-tech__head { display: grid; gap: 1.5rem; align-content: start; }
.svc-tech__head p { color: var(--color-muted-light); max-width: 32rem; }
.svc-principles { border-top: 1px solid var(--color-line); }
.svc-principle {
  display: grid;
  gap: .55rem;
  padding-block: clamp(1.35rem, 1.1rem + .8vw, 1.9rem);
  border-bottom: 1px solid var(--color-line);
}
.svc-principle__name {
  font-family: var(--font-display);
  font-weight: 760;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.svc-principle__text { max-width: 46ch; color: var(--color-muted-light); }

.svc-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(3rem, 2rem + 4vw, 5.5rem);
  border-top: 1px solid var(--color-line);
  border-left: 1px solid var(--color-line);
}
@media (min-width: 600px) {
  .svc-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .svc-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.svc-stack__cell {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.svc-stack__cat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -.01em;
}
.svc-stack__note {
  margin-top: 1.25rem;
  font-size: .8125rem;
  color: var(--color-muted);
}

/* Process timeline ----------------------------------------------------------- */
.svc-process {
  position: relative;
  display: grid;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .svc-process { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
}
.svc-phase {
  position: relative;
  padding: 0 0 2.75rem 2.25rem;
}
.svc-phase::before {
  content: "";
  position: absolute;
  left: 5px;
  top: .5rem;
  bottom: 0;
  width: 1px;
  background: var(--color-line-strong);
}
.svc-phase::after {
  content: "";
  position: absolute;
  left: 0;
  top: .2rem;
  width: 11px;
  height: 11px;
  border: 1px solid var(--color-accent);
  background: var(--color-bg);
  transform: rotate(45deg);
}
@media (min-width: 1024px) {
  .svc-process {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--col-gap);
    padding-top: 2.75rem;
  }
  .svc-process::before,
  .svc-process::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    height: 1px;
  }
  .svc-process::before { background: var(--color-line-strong); }
  .svc-process::after {
    background: var(--gradient-signal);
    transform-origin: left center;
  }
  .js .svc-process::after {
    transform: scaleX(0);
    transition: transform 1.8s var(--ease-in-out) .3s;
  }
  .js .svc-process.is-in::after { transform: scaleX(1); }
  .svc-phase { padding: 0; z-index: 1; }
  .svc-phase::before { display: none; }
  .svc-phase::after { top: -2.75rem; }
}
.svc-phase__index {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
}
.svc-phase__name {
  margin-top: .75rem;
  font-family: var(--font-display);
  font-weight: 780;
  font-size: clamp(1.875rem, 1.35rem + 1.8vw, 2.875rem);
  line-height: .92;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.svc-phase__text {
  margin-top: 1rem;
  max-width: 34ch;
  font-size: .9375rem;
  color: var(--color-muted-light);
}
.svc-phase__block { margin-top: 1.5rem; }
.svc-phase__block-title {
  margin-bottom: .75rem;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.svc-phase__deliverables li {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  padding-block: .5rem;
  border-top: 1px solid var(--color-line);
  font-size: .875rem;
  line-height: 1.4;
}
.svc-phase__deliverables li::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border: 1px solid var(--color-muted);
  transform: translateY(-1px) rotate(45deg);
}

/* Closing CTA band ------------------------------------------------------------ */
.svc-cta {
  position: relative;
  display: grid;
  gap: 2rem;
  padding: clamp(2rem, 1.2rem + 4vw, 5rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 55% 85% at 100% 0%, rgba(39, 134, 255, .14), transparent 70%),
    radial-gradient(ellipse 45% 70% at 0% 100%, rgba(0, 226, 208, .08), transparent 70%),
    var(--color-bg-soft);
  overflow: hidden;
  isolation: isolate;
}
.svc-cta .bg-grid {
  z-index: -1;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 85% 20%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 90% at 85% 20%, #000 10%, transparent 70%);
}
.svc-cta .brackets::before,
.svc-cta .brackets::after,
.svc-cta .brackets > span::before,
.svc-cta .brackets > span::after { opacity: .55; transform: none; border-color: var(--color-muted); }
.svc-cta__title { font-size: var(--fs-h2); }
.svc-cta__body {
  display: grid;
  gap: 1.5rem;
  align-content: end;
  justify-items: start;
  color: var(--color-muted-light);
}
@media (min-width: 1024px) {
  .svc-cta {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .svc-cta__title { grid-column: 1 / span 7; }
  .svc-cta__body { grid-column: 9 / span 4; }
}
@media (max-width: 599px) {
  .svc-cta .btn { width: 100%; justify-content: space-between; }
}

/* websites.html ---------------------------------------------------------------- */
.svc-glance {
  width: 100%;
  max-width: 26rem;
  padding: 1.35rem 1.5rem .5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: rgba(10, 13, 20, .7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.svc-glance__title {
  margin-bottom: .6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.svc-glance__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: .85rem;
  border-top: 1px solid var(--color-line);
}
.svc-glance dt {
  padding-top: .2em;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.svc-glance dd { font-size: .9375rem; line-height: 1.45; }
@media (max-width: 479px) {
  .svc-glance__row { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
}

.svc-types { border-top: 1px solid var(--color-line-strong); }
.svc-type {
  display: grid;
  gap: .75rem 2rem;
  padding-block: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  border-bottom: 1px solid var(--color-line);
}
@media (min-width: 768px) {
  .svc-type { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .svc-type .tag-list { grid-column: 2; }
}
@media (min-width: 1180px) {
  .svc-type {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
    align-items: start;
  }
  .svc-type .tag-list { grid-column: 3; justify-content: flex-end; }
}
.svc-type__name {
  font-family: var(--font-display);
  font-weight: 760;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  line-height: .95;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.svc-type__text { max-width: 44ch; color: var(--color-muted-light); }

.svc-approach__grid { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
@media (min-width: 1024px) {
  .svc-approach__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .svc-approach__head {
    grid-column: 1 / span 5;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 3rem);
  }
  .svc-steps { grid-column: 7 / span 6; }
}
.svc-approach__head { display: grid; gap: 1.5rem; align-content: start; }
.svc-approach__head p { color: var(--color-muted-light); max-width: 32rem; }
.svc-steps { border-top: 1px solid var(--color-line); }
.svc-stepline {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: .45rem 1.25rem;
  padding-block: clamp(1.35rem, 1.1rem + .8vw, 1.85rem);
  border-bottom: 1px solid var(--color-line);
}
.svc-stepline__num {
  grid-row: span 2;
  padding-top: .3rem;
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .1em;
  color: var(--color-accent);
}
.svc-stepline__title {
  font-family: var(--font-display);
  font-weight: 760;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.svc-stepline__text { max-width: 48ch; font-size: .9375rem; color: var(--color-muted-light); }

.svc-spec {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
  overflow: hidden;
}
.svc-spec__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: 1rem clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-bottom: 1px solid var(--color-line);
  background: rgba(255, 255, 255, .015);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.svc-spec__list { display: grid; }
@media (min-width: 768px) {
  .svc-spec__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.svc-spec__item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: .35rem 1rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-bottom: 1px solid var(--color-line);
}
.svc-spec__item:last-child { border-bottom: 0; }
@media (min-width: 768px) {
  .svc-spec__item:nth-child(odd) { border-right: 1px solid var(--color-line); }
  .svc-spec__item:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
.svc-spec__key {
  grid-row: span 2;
  padding-top: .2rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  color: var(--color-accent);
}
.svc-spec__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -.01em;
}
.svc-spec__text { font-size: .9375rem; color: var(--color-muted-light); }

.svc-platforms { display: grid; gap: var(--col-gap); }
@media (min-width: 768px) {
  .svc-platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .svc-platforms { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.svc-platform {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
  isolation: isolate;
}
.svc-platform__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.svc-platform__logo { width: 2rem; height: 2rem; fill: var(--color-text); }
.svc-platform__type {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.svc-platform__name {
  font-family: var(--font-display);
  font-weight: 760;
  font-size: clamp(1.5rem, 1.25rem + .8vw, 2rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.svc-platform__fit-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.svc-platform__list { display: grid; gap: .55rem; margin-top: .75rem; }
.svc-platform__list li {
  display: flex;
  gap: .7rem;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--color-muted-light);
}
.svc-platform__list li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  margin-top: .5em;
  border: 1px solid var(--color-accent);
  transform: rotate(45deg);
}
.svc-platform__note {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--color-line-strong);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--color-muted);
}

/* Related trio: a gentler crop than 4:5 so landscape compositions keep their content. */
@media (min-width: 768px) {
  .svc-related .project-card--tall .project-card__media { aspect-ratio: 5 / 4; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .svc-related .project-card--tall:nth-child(3) { grid-column: 1 / -1; }
  .svc-related .project-card--tall:nth-child(3) .project-card__media { aspect-ratio: 16 / 9; }
}
.svc-related__foot {
  display: flex;
  justify-content: flex-start;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

/* The lifecycle strip closes the services hero; no extra bottom padding. */
.svc-hero:has(.svc-lifecycle) { padding-bottom: 0; }

/* websites.html hero: lead and at-a-glance panel share a top edge. */
.svc-hero .page-hero__row { align-items: start; }

/* Keep the loop diagram's labels legible when the SVG scales down. */
@media (max-width: 767px) {
  .svc-loop text { font-size: 20px; letter-spacing: .12em; }
  .svc-loop .svc-loop__core-label { font-size: 17px; }
}


/* 23. Work & case study ----------------------------------------------------- */
/* ==========================================================================
   parts/work.css — Work (portfolio index) + Case study template
   Prefixes: .work- (portfolio), .cs- (case study). Merged into main.css
   at the end of Phase 1.
   ========================================================================== */

/* ---------------------------------------------------------------- Work hero */
.work-hero .page-hero__title { max-width: none; }
.work-hero__note {
  display: grid;
  gap: .85rem;
  justify-items: start;
  max-width: 24rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--color-muted);
}

/* ---------------------------------------------------------------- Filter bar */
.work-index { padding-top: 0; }
.work-filter {
  position: relative;
  z-index: 5;
  margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  border-block: 1px solid var(--color-line);
  background: rgba(6, 8, 13, .9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
@media (min-width: 768px) {
  .work-filter { position: sticky; top: var(--header-h); }
}
.work-filter__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.25rem;
}
.work-filter__label { display: none; flex: none; }
.work-filter__scroller {
  position: relative;
  flex: 1;
  min-width: 0;
  margin-inline: calc(var(--gutter) * -1);
  padding: .7rem var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
}
.work-filter__scroller::-webkit-scrollbar { display: none; }
.work-filter__list {
  display: flex;
  gap: .45rem;
  width: max-content;
}
.work-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  padding: .5rem .95rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 680;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-muted-light);
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.work-filter__btn:hover { color: var(--color-text); border-color: rgba(255, 255, 255, .26); }
.work-filter__btn[aria-pressed="true"] {
  color: var(--color-text);
  border-color: var(--color-line-accent);
  background: rgba(0, 226, 208, .07);
}
.work-filter__count {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  color: var(--color-muted);
  transition: color .25s ease;
}
.work-filter__btn[aria-pressed="true"] .work-filter__count { color: var(--color-accent); }
.work-filter__status {
  display: none;
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.work-filter__status b { font-weight: 400; color: var(--color-text); }
@media (min-width: 768px) {
  .work-filter__status { display: block; }
  .work-filter__scroller { margin-inline: 0; padding-inline: 0; -webkit-mask-image: none; mask-image: none; }
}
@media (min-width: 1180px) {
  .work-filter__label { display: inline-flex; }
}

/* ---------------------------------------------------------------- Grid sizing
   Pairs share one media height so image edges align across the row. */
@media (min-width: 768px) and (max-width: 1023px) {
  .work-grid .work-card--full-md { grid-column: 1 / -1; }
  .work-grid .work-card--full-md .project-card__media { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  .work-grid .project-card--wide .project-card__media,
  .work-grid .project-card--narrow .project-card__media {
    aspect-ratio: auto;
    flex: none;
    height: clamp(20rem, 31vw, 33rem);
    min-height: 0;
  }
}

/* ---------------------------------------------------------------- CTA band (work + case study) */
.work-cta {
  position: relative;
  display: grid;
  gap: 2rem;
  padding: clamp(2rem, 1.25rem + 3.5vw, 5rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
  overflow: clip;
  isolation: isolate;
}
.work-cta .bg-grid {
  z-index: -1;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 85% 0%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 90% at 85% 0%, #000 10%, transparent 70%);
}
.work-cta .glow {
  z-index: -1;
  width: 44rem;
  height: 32rem;
  right: -14rem;
  top: -16rem;
  --glow-color: rgba(152, 92, 255, .14);
}
.work-cta__title {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.75rem);
}
.work-cta__text p {
  margin-top: 1.25rem;
  max-width: 36rem;
  color: var(--color-muted-light);
}
.work-cta__actions {
  display: grid;
  gap: 1.1rem;
  justify-items: start;
}
@media (max-width: 599px) {
  .work-cta__actions { justify-items: stretch; }
  .work-cta__actions .btn { justify-content: space-between; }
  .work-cta__actions .link-arrow { justify-self: start; }
}
@media (min-width: 1024px) {
  .work-cta {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
  }
  .work-cta__text { grid-column: 1 / span 7; }
  .work-cta__actions { grid-column: 9 / span 4; justify-self: end; justify-items: end; }
}

/* ==========================================================================
   Case study
   ========================================================================== */
.cs-hero { padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.cs-hero .page-hero__title { max-width: 11ch; }
.cs-hero__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
.cs-hero__kicker .label { white-space: normal; }

/* Pictures fill fixed-shape frames so object-fit crops instead of leaving bands. */
.cs-visual__frame picture,
.cs-fig__media picture,
.cs-next__media picture {
  position: absolute;
  inset: 0;
}
.cs-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem var(--col-gap);
  margin-top: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-line);
}
@media (min-width: 768px) {
  .cs-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .cs-meta { grid-template-columns: 1.1fr 1.5fr 1.3fr .7fr 1fr; }
}
.cs-meta dt {
  margin-bottom: .7rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.cs-meta dd { margin: 0; font-size: .9375rem; line-height: 1.5; }
.cs-meta .link-arrow { white-space: nowrap; }
@media (max-width: 767px) {
  .cs-meta > div:last-child { grid-column: 1 / -1; }
}
.cs-meta dd li + li { margin-top: .15rem; }
.cs-meta__muted { display: block; margin-top: .2rem; font-size: .8125rem; color: var(--color-muted); }

.cs-visual { position: relative; }
.cs-visual__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
@media (min-width: 768px) { .cs-visual__frame { aspect-ratio: 16 / 9; } }
.cs-visual__frame img { width: 100%; height: 100%; object-fit: cover; }
.cs-visual .reg-mark--tl { top: -1rem; left: -1rem; }
.cs-visual .reg-mark--tr { top: -1rem; right: -1rem; }
.cs-visual .reg-mark--bl { bottom: -1rem; left: -1rem; }
.cs-visual .reg-mark--br { bottom: -1rem; right: -1rem; }
@media (max-width: 599px) {
  .cs-visual .reg-mark { display: none; }
}

/* Chapter bar — sticky inside the article only. */
.cs-article { position: relative; margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
.cs-chapters {
  position: sticky;
  top: var(--header-h);
  z-index: 5;
  border-block: 1px solid var(--color-line);
  background: rgba(6, 8, 13, .9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.cs-chapters__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 3.5rem;
}
.cs-chapters__title {
  display: none;
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.cs-chapters__title b { font-weight: 400; color: var(--color-text); }
@media (min-width: 1180px) { .cs-chapters__title { display: block; } }
.cs-chapters__scroller {
  position: relative;
  flex: 1;
  min-width: 0;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
}
.cs-chapters__scroller::-webkit-scrollbar { display: none; }
@media (min-width: 1180px) {
  .cs-chapters__scroller { margin-inline: 0; padding-inline: 0; -webkit-mask-image: none; mask-image: none; }
  .cs-chapters__list { margin-left: auto; }
}
.cs-chapters__list {
  display: flex;
  gap: clamp(1.25rem, .75rem + 1.5vw, 2.25rem);
  width: max-content;
}
.cs-chapters__list a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-block: 1.05rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-muted);
  transition: color .25s ease;
}
.cs-chapters__list a span { color: var(--color-muted); transition: color .25s ease; }
.cs-chapters__list a:hover { color: var(--color-text); }
.cs-chapters__list a[aria-current] { color: var(--color-text); }
.cs-chapters__list a[aria-current] span { color: var(--color-accent); }
.cs-chapters__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  transform-origin: left center;
  transform: scaleX(var(--progress, 0));
}

.cs-section { padding-block: clamp(4rem, 2.75rem + 4vw, 7rem); }
.cs-split { display: grid; gap: 2rem; }
@media (min-width: 1024px) {
  .cs-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .cs-split__head { grid-column: 1 / span 5; }
  .cs-split__body { grid-column: 7 / span 6; }
}
.cs-split__head .h2 { font-size: clamp(2rem, 1.3rem + 3vw, 4.25rem); }
.cs-split__head .temp-tag { margin-top: 1.5rem; }
.cs-prose { display: grid; gap: 1.1rem; max-width: 62ch; color: var(--color-muted-light); }
.cs-prose > p:first-child {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-text);
}
.cs-prose__note { font-size: .875rem; color: var(--color-muted); }

.cs-list { margin-top: 1.25rem; border-top: 1px solid var(--color-line); }
.cs-list li {
  display: flex;
  gap: .9rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text);
}
.cs-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  margin-top: .6em;
  border: 1px solid var(--color-accent);
  transform: rotate(45deg);
}

.cs-steps {
  display: grid;
  gap: 2.25rem var(--col-gap);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}
@media (min-width: 768px) { .cs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .cs-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cs-step {
  position: relative;
  display: grid;
  gap: .8rem;
  align-content: start;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line-strong);
}
.cs-step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 1px;
  background: var(--color-accent);
}
.cs-step__index {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-accent);
}
.cs-step__title {
  font-family: var(--font-display);
  font-weight: 760;
  font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.cs-step p { font-size: .9375rem; color: var(--color-muted-light); }

/* Figures */
.cs-fig { display: grid; gap: .9rem; margin: 0; min-width: 0; }
.cs-fig__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.cs-fig__media img { width: 100%; height: 100%; object-fit: cover; }
.cs-fig figcaption {
  display: flex;
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.cs-fig figcaption b { font-weight: 400; color: var(--color-accent); }

.cs-design {
  display: grid;
  gap: 2.5rem var(--col-gap);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}
@media (min-width: 1024px) {
  .cs-design { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cs-design__main { grid-column: 1 / span 8; }
  .cs-design__notes { grid-column: 9 / span 4; align-self: end; }
  .cs-design__wide { grid-column: 1 / -1; }
  .cs-design__wide .cs-fig__media { aspect-ratio: 21 / 10; }
}
.cs-notes { display: grid; gap: 1rem; align-content: start; }
.cs-notes h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -.01em;
}
.cs-notes .cs-list { margin-top: 0; }
.cs-notes .cs-list li { font-size: .9375rem; color: var(--color-muted-light); }

/* Architecture diagram */
.cs-arch {
  position: relative;
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0;
  padding: clamp(1.25rem, .75rem + 2vw, 2.75rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
  overflow: hidden;
  isolation: isolate;
}
.cs-arch .bg-grid {
  z-index: -1;
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 90%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 90%);
}
.cs-arch__svg { width: 100%; height: auto; overflow: visible; }
.cs-arch__svg--h { display: none; }
.cs-arch__svg--v { display: block; max-width: 26rem; margin-inline: auto; }
@media (min-width: 900px) {
  .cs-arch__svg--h { display: block; }
  .cs-arch__svg--v { display: none; }
}
.cs-arch figcaption {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.arch-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; fill: var(--color-muted); }
.arch-label b, .arch-label tspan.arch-accent { fill: var(--color-accent); }
.arch-box { fill: var(--color-surface); stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
.arch-box--api { fill: #0C1019; stroke: rgba(0, 226, 208, .45); }
.arch-pill { fill: rgba(255, 255, 255, .03); stroke: rgba(255, 255, 255, .1); }
.arch-zone { fill: none; stroke: rgba(39, 134, 255, .45); stroke-width: 1; stroke-dasharray: 5 6; }
.arch-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; fill: var(--color-text); }
.arch-pill-text { font-family: var(--font-body); font-size: 13px; fill: var(--color-muted-light); }
.arch-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; fill: var(--color-muted); }
.arch-zone-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; fill: var(--color-blue); }
.arch-link { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 1.2; }
.arch-flow {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-dasharray: 3 11;
  animation: arch-flow 1.4s linear infinite;
}
.arch-node { fill: var(--color-accent); }
@keyframes arch-flow { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) {
  .arch-flow { animation: none; stroke-dasharray: none; opacity: .5; }
}

.cs-stack {
  display: grid;
  margin-top: 2rem;
  border-top: 1px solid var(--color-line);
}
@media (min-width: 768px) {
  .cs-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
}
@media (min-width: 1180px) {
  .cs-stack { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cs-stack > div { padding-block: 1.25rem; border-bottom: 1px solid var(--color-line); }
.cs-stack dt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
}
.cs-stack dd { margin: .5rem 0 0; font-size: .9375rem; color: var(--color-muted-light); }

/* Gallery — mirrored 8/4 rows with a shared height per row. */
.cs-gallery {
  display: grid;
  gap: 2.25rem var(--col-gap);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}
@media (min-width: 768px) {
  .cs-gallery { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cs-gallery .cs-fig--major { grid-column: span 7; }
  .cs-gallery .cs-fig--minor { grid-column: span 5; }
  .cs-gallery .cs-fig__media { aspect-ratio: auto; height: clamp(17rem, 36vw, 36rem); }
}
@media (min-width: 1180px) {
  .cs-gallery .cs-fig--major { grid-column: span 8; }
  .cs-gallery .cs-fig--minor { grid-column: span 4; }
}

/* Outcome placeholders */
.cs-outcomes {
  display: grid;
  gap: var(--col-gap);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}
@media (min-width: 768px) { .cs-outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-outcome {
  display: grid;
  gap: .8rem;
  align-content: start;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border: 1px dashed rgba(242, 197, 114, .32);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}
.cs-outcome__value {
  font-family: var(--font-display);
  font-weight: 780;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--color-muted);
}
.cs-outcome__label { font-weight: 600; }
.cs-outcome p { font-size: .9375rem; color: var(--color-muted-light); }

/* Next project */
.cs-next { padding-block: clamp(4rem, 3rem + 4vw, 7rem); border-top: 1px solid var(--color-line); }
.cs-next__link {
  display: grid;
  gap: 2rem;
  align-items: center;
  color: inherit;
}
@media (min-width: 1024px) {
  .cs-next__link {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .cs-next__text { grid-column: 1 / span 5; }
  .cs-next__media { grid-column: 7 / span 6; }
}
.cs-next__text { display: grid; gap: 1.25rem; justify-items: start; }
.cs-next__title {
  font-family: var(--font-display);
  font-weight: 780;
  font-size: clamp(2.25rem, 1.4rem + 3.8vw, 5.5rem);
  line-height: .92;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  transition: color .4s ease;
}
.cs-next__cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--color-line-strong);
  font-family: var(--font-display);
  font-weight: 680;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: border-color .4s ease, color .4s ease;
}
.cs-next__cta .icon { color: var(--color-accent); transition: transform .5s var(--ease-out); }
.cs-next__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.cs-next__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s var(--ease-out);
}
.cs-next__link:focus-visible { outline: none; }
.cs-next__link:focus-visible .cs-next__media { outline: 2px solid var(--color-accent); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .cs-next__link:hover .cs-next__media img { transform: scale(1.045); }
  .cs-next__link:hover .cs-next__cta { color: var(--color-accent); border-color: var(--color-accent); }
  .cs-next__link:hover .cs-next__cta .icon { transform: translate(2px, -2px); }
  .cs-next__link:hover .brackets::before,
  .cs-next__link:hover .brackets::after,
  .cs-next__link:hover .brackets > span::before,
  .cs-next__link:hover .brackets > span::after { opacity: 1; transform: none; }
}


/* 24. About & contact ------------------------------------------------------- */
/* ==========================================================================
   Mirana Labs — about.html + contact.html
   Page-specific styles (to be merged into main.css). Prefix: .about- / .contact-
   ========================================================================== */

/* About: hero ----------------------------------------------------------------- */
.about-hero__title {
  max-width: none;
  font-size: min(clamp(2.25rem, .8rem + 5.3vw, 6.25rem), 15svh);
}
.about-facts {
  width: 100%;
  max-width: 27rem;
  margin: 0;
  border-top: 1px solid var(--color-line);
}
.about-facts__row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: .9rem;
  border-bottom: 1px solid var(--color-line);
}
.about-facts dt {
  padding-top: .2rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.about-facts dd {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--color-text);
}
.about-facts .footer-status { font-size: .9375rem; }

/* About: why both ------------------------------------------------------------- */
.about-both__grid {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4rem);
  align-items: center;
}
@media (min-width: 1024px) {
  .about-both__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .about-both__copy { grid-column: 1 / span 5; }
  .about-both__figure { grid-column: 7 / span 6; }
}
.about-both__copy { display: grid; gap: 1.5rem; }
.about-both__copy p:not(.lead) { color: var(--color-muted-light); max-width: 36rem; }
.about-both__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(39, 134, 255, .08), transparent 70%),
    var(--color-bg-soft);
  overflow: hidden;
}
.about-both__figure svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.about-both__figure .brackets { inset: 1rem; }
.about-both__figure .brackets::before,
.about-both__figure .brackets::after,
.about-both__figure .brackets > span::before,
.about-both__figure .brackets > span::after {
  opacity: .6;
  transform: none;
  border-color: var(--color-muted);
}
.about-diagram text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  fill: var(--color-muted-light);
}
.about-diagram .about-diagram__product { fill: var(--color-accent); }
.about-diagram__labels { display: none; }
@media (min-width: 768px) {
  .about-diagram__labels { display: inline; }
}
.about-diagram__core {
  transform-box: view-box;
  transform-origin: 280px 215px;
  animation: about-pulse 5s var(--ease-in-out) infinite;
}
@keyframes about-pulse {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.08); opacity: 1; }
}

.about-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted-light);
}
.about-legend li { display: inline-flex; align-items: center; gap: .55rem; }
.about-legend__swatch {
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
}
.about-legend__swatch--product { border-color: var(--color-accent); background: var(--color-accent); }
@media (min-width: 768px) {
  .about-legend { display: none; }
}

.about-contrast {
  display: grid;
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  border-top: 1px solid var(--color-line);
}
.about-contrast__item {
  display: grid;
  gap: .75rem;
  align-content: start;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--color-line);
}
@media (min-width: 768px) {
  .about-contrast { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-contrast__item { padding: 2rem 2rem 0 0; border-bottom: 0; }
  .about-contrast__item + .about-contrast__item { padding-left: 2rem; border-left: 1px solid var(--color-line); }
}
.about-contrast__title {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-display);
  font-weight: 720;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.about-contrast__title::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border: 1px solid var(--color-muted);
  transform: rotate(45deg);
}
.about-contrast__item--both .about-contrast__title::before {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.about-contrast__item p { font-size: .9375rem; color: var(--color-muted-light); max-width: 40ch; }

/* About: principles ----------------------------------------------------------- */
.about-principles__grid {
  display: grid;
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 768px) {
  .about-principles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-principles__intro { grid-column: 1 / -1; }
  .about-principle:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1180px) {
  .about-principles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-principles__intro,
  .about-principle:last-child { grid-column: auto; }
}
.about-principles__intro,
.about-principle {
  position: relative;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background: var(--color-bg);
}
.about-principles__intro {
  display: grid;
  gap: 1.25rem;
  align-content: space-between;
}
.about-principles__intro .h2 { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.25rem); }
.about-principles__intro p { color: var(--color-muted-light); max-width: 30ch; }
.about-principle {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: clamp(14rem, 11rem + 8vw, 21rem);
  isolation: isolate;
  overflow: hidden;
}
.about-principle__glyph {
  width: 3rem;
  height: 3rem;
  margin-bottom: auto;
  color: var(--color-muted-light);
  transition: color .4s ease;
}
.about-principle__glyph svg { width: 100%; height: 100%; overflow: visible; }
.about-principle:hover .about-principle__glyph { color: var(--color-text); }
.about-principle__title {
  margin-top: 2.25rem;
  font-family: var(--font-display);
  font-weight: 760;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.about-principle p { font-size: .9375rem; color: var(--color-muted-light); max-width: 38ch; }

/* About: how we work ---------------------------------------------------------- */
.about-practice__list { margin: 0; border-top: 1px solid var(--color-line); }
.about-practice__row {
  display: grid;
  gap: .75rem;
  padding-block: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  border-bottom: 1px solid var(--color-line);
}
@media (min-width: 768px) {
  .about-practice__row {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--col-gap);
    align-items: baseline;
  }
}
@media (min-width: 1024px) {
  .about-practice__row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .about-practice__row dt { grid-column: 1 / span 5; }
  .about-practice__row dd { grid-column: 6 / span 7; }
}
.about-practice__row dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-display);
  font-weight: 760;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2.125rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.about-practice__row dd {
  margin: 0;
  max-width: 44rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--color-muted-light);
}

/* About: what we do ---------------------------------------------------------- */
.about-dbo__list { display: grid; border-top: 1px solid var(--color-line); }
.about-dbo__item {
  display: grid;
  gap: 1rem;
  align-content: start;
  justify-items: start;
  padding-block: 2rem;
  border-bottom: 1px solid var(--color-line);
}
@media (min-width: 600px) and (max-width: 1023px) {
  .about-dbo__item {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--col-gap);
    align-items: start;
  }
  .about-dbo__index { grid-column: 1 / -1; }
  .about-dbo__title { grid-column: 1; grid-row: 2 / span 2; }
  .about-dbo__item p,
  .about-dbo__item .link-arrow { grid-column: 2; }
}
@media (min-width: 1024px) {
  .about-dbo__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-dbo__item { padding: 2.25rem 2rem 0 0; border-bottom: 0; }
  .about-dbo__item + .about-dbo__item { padding-left: 2rem; border-left: 1px solid var(--color-line); }
}
.about-dbo__index {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-accent);
}
.about-dbo__title {
  font-family: var(--font-display);
  font-weight: 780;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem);
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.about-dbo__item p { max-width: 34ch; color: var(--color-muted-light); }
.about-dbo__item .link-arrow { margin-top: .5rem; }

/* About: people ----------------------------------------------------------------- */
.about-roles {
  display: grid;
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 600px) {
  .about-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .about-roles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.about-role {
  display: grid;
  gap: .85rem;
  align-content: start;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  background: var(--color-bg);
}
.about-role__glyph {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1.5rem;
  color: var(--color-accent);
}
.about-role__glyph svg { width: 100%; height: 100%; overflow: visible; }
.about-role__title {
  font-family: var(--font-display);
  font-weight: 760;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.about-role p { font-size: .9375rem; color: var(--color-muted-light); }

.about-team { margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.about-team__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-line);
}
.about-team__title {
  font-family: var(--font-display);
  font-weight: 760;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.about-team__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem var(--col-gap);
}
@media (min-width: 1024px) {
  .about-team__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.about-member { min-width: 0; }
.about-member__avatar {
  position: relative;
  aspect-ratio: 1;
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  overflow: hidden;
}
.about-member__avatar svg { width: 100%; height: 100%; }
.about-member__initials {
  position: absolute;
  left: .85rem;
  bottom: .75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  color: var(--color-muted);
}
.about-member__name { margin-top: 1rem; font-weight: 600; }
.about-member__role {
  margin-top: .25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* About: closing CTA ---------------------------------------------------------- */
.about-cta .cta-final__title { max-width: none; }
.about-cta__email { font-size: .9375rem; color: var(--color-muted-light); }
.about-orbit-spin {
  transform-box: view-box;
  transform-origin: 500px 500px;
  animation: about-spin 120s linear infinite;
}
.about-orbit-spin--rev { animation-duration: 170s; animation-direction: reverse; }
@keyframes about-spin { to { transform: rotate(360deg); } }

/* Contact: hero ----------------------------------------------------------------- */
.contact-hero__title { font-size: min(clamp(2.5rem, 1rem + 6.4vw, 8rem), 16svh); }
.contact-hero__signal {
  position: absolute;
  top: calc(var(--header-h) + 1rem);
  right: -9rem;
  display: none;
  width: min(42rem, 52vw);
  aspect-ratio: 1;
  pointer-events: none;
}
.contact-hero__signal svg { width: 100%; height: 100%; overflow: visible; }
@media (min-width: 1024px) {
  .contact-hero__signal { display: block; }
}
.contact-signal__arcs {
  transform-box: view-box;
  transform-origin: 300px 300px;
  animation: about-spin 140s linear infinite;
}
.contact-signal__core {
  transform-box: view-box;
  transform-origin: 300px 300px;
  animation: about-pulse 4s var(--ease-in-out) infinite;
}
.contact-hero__meta { display: grid; gap: .9rem; justify-items: start; }
.contact-hero__email { font-size: .9375rem; color: var(--color-muted-light); }
@media (min-width: 1024px) {
  .contact-hero__meta { justify-items: end; text-align: right; }
}

/* Contact: layout ----------------------------------------------------------------- */
.contact-layout {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4rem);
  align-items: start;
}
@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .contact-layout__form { grid-column: 1 / span 8; }
  .contact-aside {
    grid-column: 9 / span 4;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}
@media (min-width: 1280px) {
  .contact-layout__form { grid-column: 1 / span 7; }
  .contact-aside { grid-column: 9 / span 4; }
}

.contact-panel {
  position: relative;
  padding: clamp(1.25rem, .6rem + 2.6vw, 3rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 30%),
    var(--color-bg-soft);
}
.contact-panel .brackets { inset: .75rem; }
.contact-panel .brackets::before,
.contact-panel .brackets::after,
.contact-panel .brackets > span::before,
.contact-panel .brackets > span::after {
  opacity: .5;
  transform: none;
  border-color: var(--color-muted);
}
.contact-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-line);
}
.contact-panel__title {
  font-family: var(--font-display);
  font-weight: 780;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.contact-panel.is-sent .contact-progress { visibility: hidden; }
.contact-progress {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.contact-progress b { font-weight: 400; color: var(--color-accent); }
.contact-progress__bar {
  width: 6rem;
  height: 2px;
  background: var(--color-line-strong);
  overflow: hidden;
}
.contact-progress__bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform .6s var(--ease-out);
}
.contact-panel__note { font-size: .875rem; color: var(--color-muted); }

/* Contact: form ------------------------------------------------------------------- */
.contact-form { display: grid; gap: clamp(2.25rem, 1.75rem + 1.5vw, 3rem); }
.contact-form[hidden] { display: none; }
.contact-group { display: grid; gap: 1rem; }
.contact-group__legend { padding: 0; margin: 0 0 1.25rem; }
.contact-group__hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-top: -.5rem;
  font-size: .8125rem;
  color: var(--color-muted);
}
.contact-fields { display: grid; gap: 1.25rem var(--col-gap); }
@media (min-width: 600px) {
  .contact-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-fields .field--full { grid-column: 1 / -1; }
}
.contact-form .choice-grid { gap: .5rem; }
.contact-form .fieldset.is-invalid .choice-grid { border-color: transparent; }
.contact-form .fieldset.is-invalid .choice__label { border-color: rgba(255, 122, 133, .5); }
.contact-form .field__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .35rem 1.5rem;
}
.contact-form .field__meta .field__hint { flex: 1 1 18rem; }
.contact-counter {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color .3s ease;
}
.contact-counter.is-met { color: var(--color-accent); }

.contact-errors {
  display: grid;
  gap: .75rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(255, 122, 133, .5);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: rgba(255, 122, 133, .06);
}
.contact-errors[hidden] { display: none; }
.contact-errors:focus { outline: none; }
.contact-errors:focus-visible { outline: 2px solid var(--color-danger); outline-offset: 3px; }
.contact-errors__title {
  font-family: var(--font-display);
  font-weight: 720;
  font-size: 1.0625rem;
  color: var(--color-text);
}
.contact-errors ul { display: grid; gap: .4rem; }
.contact-errors a {
  font-size: .9375rem;
  color: var(--color-danger);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.contact-errors a:hover { color: var(--color-text); }

.contact-submit {
  display: grid;
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-line);
}
@media (min-width: 768px) {
  .contact-submit {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.75rem;
    align-items: center;
  }
}
.contact-submit__note { max-width: 30rem; font-size: .8125rem; color: var(--color-muted); }
@media (max-width: 599px) {
  .contact-submit .btn { width: 100%; justify-content: space-between; }
}

/* Contact: success -------------------------------------------------------------------- */
.contact-success { display: grid; gap: 1.5rem; justify-items: start; }
.contact-success[hidden] { display: none; }
.contact-success:focus { outline: none; }
.contact-success__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
.contact-success__icon { width: 3.5rem; height: 3.5rem; color: var(--color-accent); }
.contact-success__icon svg { width: 100%; height: 100%; }
.contact-success__title {
  font-family: var(--font-display);
  font-weight: 780;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  line-height: .94;
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-wrap: balance;
}
.contact-success__text { max-width: 38rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--color-muted-light); }
.contact-success__text strong { font-weight: 600; color: var(--color-text); overflow-wrap: anywhere; }
.contact-success__summary { width: 100%; margin: 0; border-top: 1px solid var(--color-line); }
.contact-success__summary > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: .85rem;
  border-bottom: 1px solid var(--color-line);
}
.contact-success__summary dt {
  padding-top: .15rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.contact-success__summary dd { margin: 0; }
.contact-success__reset { margin-top: .5rem; }

/* Contact: aside ---------------------------------------------------------------------- */
.contact-aside {
  display: grid;
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 600px) and (max-width: 1023px) {
  .contact-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.contact-card {
  display: grid;
  gap: .9rem;
  align-content: start;
  justify-items: start;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--color-bg);
}
.contact-card__label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.contact-card__email { font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem); }
.contact-card__text { font-size: .875rem; color: var(--color-muted-light); }

.contact-steps { display: grid; gap: 1.15rem; }
.contact-steps li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: .6rem;
}
.contact-steps__index {
  padding-top: .2rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  color: var(--color-accent);
}
.contact-steps li > div { display: grid; gap: .3rem; justify-items: start; }
.contact-steps__title { font-weight: 600; color: var(--color-text); line-height: 1.35; }
.contact-steps li > div p:not(.contact-steps__title) { font-size: .875rem; line-height: 1.5; color: var(--color-muted-light); }
.contact-steps li > div .temp-tag { margin-top: .35rem; }
.contact-steps--inline {
  width: 100%;
  gap: .75rem;
}
.contact-steps--inline li { align-items: baseline; }
.contact-steps--inline p { font-size: .9375rem; color: var(--color-muted-light); }
@media (min-width: 768px) {
  .contact-steps--inline { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.25rem; }
}


/* 25. Legal pages & 404 ----------------------------------------------------- */
/* ==========================================================================
   Legal pages (privacy.html, terms.html) and 404.html
   Temporary part file — merged into main.css by the main session.
   ========================================================================== */

/* Legal hero ----------------------------------------------------------------- */
.legal-hero .page-hero__title {
  font-size: min(clamp(2.75rem, 1.3rem + 5.4vw, 6.75rem), 15svh);
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 2rem;
  margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.legal-meta b { font-weight: 400; color: var(--color-muted-light); }
.legal-notice {
  display: grid;
  justify-items: start;
  gap: .85rem;
  max-width: 46rem;
  margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  padding: 1.25rem 1.5rem 1.35rem;
  border: 1px dashed rgba(242, 197, 114, .38);
  border-radius: var(--radius-md);
  background: rgba(242, 197, 114, .035);
}
.legal-notice p {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--color-muted-light);
}

/* Placeholder token inside running text: [Company legal name] */
.legal-ph {
  font-family: var(--font-mono);
  font-size: .86em;
  letter-spacing: .01em;
  color: var(--color-temp);
  background: rgba(242, 197, 114, .07);
  border-bottom: 1px dashed rgba(242, 197, 114, .5);
  border-radius: 2px;
  padding: 0 .25em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Layout: contents rail + prose ------------------------------------------------ */
.legal-layout {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-bottom: var(--section-space);
}
@media (min-width: 1024px) {
  .legal-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .legal-toc--rail { grid-column: 1 / span 3; }
  .legal-prose { grid-column: 5 / span 7; }
}

.legal-toc__list {
  display: grid;
  border-top: 1px solid var(--color-line);
}
.legal-toc__list a {
  display: flex;
  gap: .9rem;
  padding: .72rem 0;
  border-bottom: 1px solid var(--color-line);
  font-size: .875rem;
  line-height: 1.35;
  color: var(--color-muted-light);
  transition: color var(--dur-fast) ease;
}
.legal-toc__list a span {
  flex: none;
  min-width: 1.5rem;
  padding-top: .12em;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  color: var(--color-muted);
  transition: color var(--dur-fast) ease;
}
.legal-toc__list a:hover { color: var(--color-text); }
.legal-toc__list a:hover span { color: var(--color-accent); }

/* Collapsible contents (below 1024px) */
.legal-toc--fold {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
}
.legal-toc--fold summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: .9rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text);
}
.legal-toc--fold summary::-webkit-details-marker { display: none; }
.legal-toc--fold summary .icon {
  width: .85rem;
  height: .85rem;
  color: var(--color-accent);
  transition: transform var(--dur) var(--ease-out);
}
.legal-toc--fold[open] summary .icon { transform: rotate(180deg); }
.legal-toc--fold nav { padding: 0 1.25rem 1rem; }
@media (min-width: 1024px) {
  .legal-toc--fold { display: none; }
}

/* Sticky rail (1024px and up) */
.legal-toc--rail { display: none; }
@media (min-width: 1024px) {
  .legal-toc--rail {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 2.5rem);
    align-self: start;
    max-height: calc(100vh - var(--header-h) - 4rem);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .legal-toc--rail .label { margin-bottom: 1.25rem; }
}

/* Prose -------------------------------------------------------------------------- */
.legal-prose {
  min-width: 0;
  max-width: 46rem;
}
.legal-section {
  padding-block: clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
  border-top: 1px solid var(--color-line);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.legal-section:first-child { padding-top: 0; border-top: 0; }
.legal-section__num {
  display: block;
  margin-bottom: .9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-accent);
}
.legal-prose h2 {
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  font-weight: 720;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.legal-prose h3 {
  margin: 2rem 0 .75rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.35;
  letter-spacing: -.005em;
}
.legal-prose p,
.legal-prose li { color: var(--color-muted-light); }
.legal-prose p { text-wrap: pretty; }
.legal-prose p + p { margin-top: 1rem; }
.legal-prose ul,
.legal-prose ol:not(.legal-toc__list) {
  display: grid;
  gap: .6rem;
  margin: 1rem 0;
}
.legal-prose ul li {
  position: relative;
  padding-left: 1.5rem;
}
.legal-prose ul li::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: .66em;
  width: 6px;
  height: 6px;
  border: 1px solid var(--color-accent);
  transform: rotate(45deg);
}
.legal-prose strong { font-weight: 600; color: var(--color-text); }
.legal-prose a:not(.btn):not(.link-arrow) {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-line-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color var(--dur-fast), text-decoration-color var(--dur-fast);
}
.legal-prose a:not(.btn):not(.link-arrow):hover { color: var(--color-accent); text-decoration-color: currentColor; }

.legal-dl {
  display: grid;
  margin: 1.25rem 0 1.5rem;
  border-top: 1px solid var(--color-line);
}
.legal-dl > div {
  display: grid;
  gap: .3rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--color-line);
}
@media (min-width: 600px) {
  .legal-dl > div { grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; }
}
.legal-dl dt {
  padding-top: .2em;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.legal-dl dd { color: var(--color-text); }

/* Tables scroll inside their own region on narrow screens. */
.legal-table-wrap {
  margin: 1.25rem 0 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}
.legal-table-wrap:focus-visible { outline-offset: 2px; }
.legal-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: .9375rem;
}
.legal-table th,
.legal-table td {
  padding: .9rem 1.1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-line);
}
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table th {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: rgba(255, 255, 255, .02);
}
.legal-table td { color: var(--color-muted-light); }
.legal-table td:first-child { color: var(--color-text); }

.legal-contact {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}

/* 404 ------------------------------------------------------------------------------ */
.nf {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
  overflow: clip;
}
.nf .bg-grid {
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 70% 50%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 70% at 70% 50%, #000 15%, transparent 72%);
}
.nf__glow {
  width: min(64rem, 130vw);
  aspect-ratio: 1;
  right: -20%;
  top: 50%;
  translate: 0 -50%;
  --glow-color: rgba(0, 226, 208, .09);
}
.nf__inner {
  position: relative;
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  align-items: center;
}
.nf__content {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  justify-items: start;
}
.nf__content .section-rule { width: 100%; margin-bottom: .25rem; }
.nf__title { max-width: 12ch; }
.nf__content .btn-row { margin-top: .5rem; }
.nf__links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  margin-top: .5rem;
}
.nf__visual {
  order: -1;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 24rem;
  aspect-ratio: 1;
  justify-self: center;
}
.nf__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.nf__rings-spin {
  transform-box: view-box;
  transform-origin: 300px 300px;
  animation: core-spin 80s linear infinite;
}
.nf__rings-spin--rev { animation-duration: 120s; animation-direction: reverse; }
.nf__code {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(6.5rem, 3rem + 16vw, 15rem);
  line-height: .8;
  letter-spacing: -.04em;
  color: var(--color-text);
  user-select: none;
}
.nf__zero {
  display: block;
  width: .8em;
  height: .8em;
  margin-inline: .015em .055em;
}
.nf__zero svg { width: 100%; height: 100%; overflow: visible; }
.nf__node {
  transform-box: view-box;
  transform-origin: 20px 20px;
  animation: core-spin 9s linear infinite;
}
@media (min-width: 1024px) {
  .nf__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .nf__content { grid-column: 1 / span 6; }
  .nf__visual {
    order: 0;
    grid-column: 7 / span 6;
    max-width: 40rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nf__rings-spin,
  .nf__node { animation: none; }
}

/* 26. Portfolio gallery & lightbox ------------------------------------------ */
.pf-total {
  align-self: end;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.pf-total b { font-weight: 400; color: var(--color-accent); }

.pf-note {
  max-width: 44ch;
  margin-top: clamp(.85rem, .6rem + .6vw, 1.25rem);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--color-muted);
}

.pf-section { padding-top: clamp(2rem, 1rem + 3vw, 3.5rem); }

.pf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 2vw, 2.75rem) var(--col-gap);
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}
@media (min-width: 600px) {
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pf-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pf-card[hidden] { display: none; }

.pf-card__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  isolation: isolate;
}
.pf-card__media picture,
.pf-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf-card__media img {
  object-fit: cover;
  object-position: top center;
  transition: transform 1.1s var(--ease-out);
}

/* The lightbox trigger only exists when scripting is available; without it the
   card still shows the image and the visit link below. */
.pf-card__open { display: none; }
.js .pf-card__open {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  cursor: zoom-in;
  background: transparent;
  border: 0;
}
.pf-card__chip {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .7rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: rgba(6, 8, 13, .82);
  font-family: var(--font-display);
  font-weight: 680;
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0;
  transform: translateY(.35rem);
  transition: opacity .35s ease, transform .5s var(--ease-out);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.pf-card__chip .icon { width: .8rem; height: .8rem; color: var(--color-accent); }
.pf-card__open:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.pf-card__open:focus-visible .pf-card__chip,
.pf-card:hover .pf-card__chip { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .pf-card:hover .pf-card__media img { transform: scale(1.04); }
  .pf-card:hover .brackets::before,
  .pf-card:hover .brackets::after,
  .pf-card:hover .brackets > span::before,
  .pf-card:hover .brackets > span::after { opacity: 1; transform: none; }
}

.pf-card__body {
  display: grid;
  gap: .5rem;
  justify-items: start;
  padding-top: 1rem;
}
.pf-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.pf-card__meta span:first-child { color: var(--color-muted-light); }
.pf-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}
.pf-card .tag-list { margin-top: .15rem; }
.pf-card__visit {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .35rem;
  font-family: var(--font-display);
  font-weight: 680;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: .15rem;
  transition: background-size .5s var(--ease-out);
}
.pf-card__visit .icon { width: .85rem; height: .85rem; }
.pf-card__visit:hover,
.pf-card__visit:focus-visible { background-size: 100% 1px; }

.pf-empty {
  margin-top: 3rem;
  color: var(--color-muted-light);
}

/* Lightbox ------------------------------------------------------------------ */
.lb {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(.75rem, .5rem + 1vw, 1.5rem);
  padding: clamp(.75rem, .5rem + 1vw, 1.5rem) 0 clamp(1rem, .75rem + 1vw, 2rem);
  background: rgba(6, 8, 13, .94);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.lb.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s;
}
/* Stop the overlay swallowing clicks while it fades out. */
.lb:not(.is-open) { pointer-events: none; }
.lb__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.lb__counter {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.lb__counter b { font-weight: 400; color: var(--color-accent); }
.lb__close {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  padding-inline: .9rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text);
  transition: border-color .25s ease;
}
.lb__close:hover { border-color: var(--color-line-accent); }
.lb__close .icon { width: .9rem; height: .9rem; }

.lb__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}
.lb__frame {
  position: relative;
  width: min(92vw, 1400px, calc(58svh * 16 / 11));
  aspect-ratio: 16 / 11;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: 0 40px 90px -35px rgba(0, 0, 0, .9);
}
.lb__frame picture,
.lb__frame img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lb__frame img { object-fit: cover; object-position: top center; }

.lb__nav {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border: 1px solid var(--color-line-strong);
  border-radius: 50%;
  background: rgba(6, 8, 13, .8);
  color: var(--color-text);
  transition: border-color .25s ease, background-color .25s ease;
}
.lb__nav:hover { border-color: var(--color-line-accent); background: rgba(0, 226, 208, .08); }
.lb__nav .icon { width: 1rem; height: 1rem; }
/* One set of controls: in the footer on phones, floated to the sides of the frame
   on wider screens (.lb is fixed, so it is the containing block). */
@media (min-width: 768px) {
  .lb__nav {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 2;
  }
  .lb__nav--prev { left: max(1rem, calc(50vw - min(46vw, 700px, calc(29svh * 16 / 11)) - 4.25rem)); }
  .lb__nav--next { right: max(1rem, calc(50vw - min(46vw, 700px, calc(29svh * 16 / 11)) - 4.25rem)); }
}

.lb__foot {
  display: grid;
  gap: .85rem;
}
.lb__info { display: grid; gap: .5rem; justify-items: start; }
.lb__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.lb__title {
  font-family: var(--font-display);
  font-weight: 760;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.lb__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
}
@media (min-width: 768px) {
  .lb__foot {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lb { transition: none; }
  .pf-card__media img,
  .pf-card__chip { transition: none; }
}

/* 27. Project imagery: never crop -------------------------------------------
   Every project tile is a 1600x1100 composition, so all cards use that native
   ratio. object-fit: cover then fills the box without cutting anything off.
   Paired cards share a width so their rows still line up. */
.project-card .project-card__media {
  aspect-ratio: 16 / 11;
  flex: none;
  min-height: 0;
}
@media (min-width: 1024px) {
  .project-card--wide,
  .project-card--narrow { grid-column: span 6; }
}

/* 27b. Higher specificity overrides: page level rules that still cropped. */
.svc-related .project-card--tall .project-card__media,
.svc-related .project-card--tall:nth-child(3) .project-card__media,
.work-grid .work-card--full-md .project-card__media,
.cs-next .project-card .project-card__media {
  aspect-ratio: 16 / 11;
}

/* 27c. is-orphan carries two classes on one element, so it needs a matching
   specificity override to stop the last card cropping. */
.project-card.is-orphan .project-card__media,
.work-grid .project-card.is-orphan .project-card__media {
  aspect-ratio: 16 / 11;
}


/* 28. Contact: stepped brief -------------------------------------------- */
/* ==========================================================================
   Mirana Labs, contact.html multi step project brief
   Loaded after main.css. Every rule is scoped to .is-stepped, the class
   contact.js adds when it upgrades the form, so the no JS version stays a
   single long form and is unaffected by this file.
   ========================================================================== */

.contact-panel { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* Step counter, sits beside the existing brief count in the panel head. */
.cstep-indicator {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted-light);
}
.cstep-indicator b { font-weight: 400; color: var(--color-accent); }
.contact-panel.is-sent .cstep-indicator { visibility: hidden; }

/* Steps ------------------------------------------------------------------- */
.contact-form.is-stepped { gap: 1.5rem; }

/* main.css sets display on .contact-group / .fieldset, and an author rule
   beats the user agent's [hidden] { display: none } whatever the specificity,
   so inactive steps need an explicit author rule of their own. */
.contact-form.is-stepped .cstep[hidden] { display: none; }

/* The step container is focused programmatically on each advance and is never
   in the tab order, so it takes no focus ring: the live region announces the
   move and the first field keeps its own indicator. */
.contact-form.is-stepped .cstep:focus,
.contact-form.is-stepped .cstep:focus-visible { outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .contact-form.is-stepped .cstep.is-entering { animation: cstep-in .45s var(--ease-out) both; }
}
@keyframes cstep-in {
  from { opacity: 0; transform: translateY(.75rem); }
}

/* Step navigation --------------------------------------------------------- */
.cstep__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line);
}
.cstep__hint {
  flex: 1 1 13rem;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--color-muted);
}
@media (max-width: 479px) {
  .cstep__nav .btn {
    width: 100%;
    justify-content: space-between;
  }
}

/* Review and send --------------------------------------------------------- */
/* The "fields are required" note belongs to the input steps, not the review. */
.contact-form.is-stepped[data-step-key="review"] .contact-panel__note { display: none; }
.cstep--review { display: grid; gap: 1.25rem; }
.cstep__title {
  font-family: var(--font-display);
  font-weight: 760;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.cstep-review {
  margin: 0;
  border-top: 1px solid var(--color-line);
}
.cstep-review__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .3rem 1rem;
  padding-block: .9rem;
  border-bottom: 1px solid var(--color-line);
}
.cstep-review dt {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.cstep-review dd {
  grid-column: 1;
  margin: 0;
  line-height: 1.5;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.cstep-review__edit {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding: .45rem .7rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 680;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted-light);
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.cstep-review__edit:hover,
.cstep-review__edit:focus-visible {
  color: var(--color-text);
  border-color: var(--color-line-accent);
  background: rgba(0, 226, 208, .06);
}
.cstep--review .contact-submit {
  margin-top: .25rem;
  padding-top: 0;
  border-top: 0;
}


/* 29. Hero lead form ---------------------------------------------------- */
/* ==========================================================================
   Mirana Labs, hero lead form (index.html)
   Loaded after main.css. Two groups of rules:
     1. the lead bar itself, plus hero scoped copies of the shared step rules
        (contact-steps.css scopes its copies to .contact-form)
     2. a short viewport compaction of the hero, so the headline, rotating
        line, CTAs and availability note all stay above the fold on laptop
        screens once the bar is added. Tall screens are untouched.
   ========================================================================== */

/* 1. Lead bar ------------------------------------------------------------- */
.hero-lead {
  display: grid;
  gap: .55rem;
  width: 100%;
  max-width: 34rem;
}
.hero-lead__form { display: grid; min-width: 0; }
.hero-lead__form[hidden] { display: none; }
.hero-lead__step { display: grid; gap: .45rem; min-width: 0; }

/* An author display rule beats the user agent's [hidden] { display: none },
   so inactive steps need an explicit rule of their own. */
.hero-lead .cstep[hidden] { display: none; }
.hero-lead .cstep:focus,
.hero-lead .cstep:focus-visible { outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero-lead .cstep.is-entering { animation: hero-lead-in .4s var(--ease-out) both; }
}
@keyframes hero-lead-in {
  from { opacity: 0; transform: translateY(.4rem); }
}

.hero-lead__legend { margin: 0; }
.hero-lead__row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.hero-lead__input {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: .6rem .9rem;
}
.hero-lead__row .btn { flex: none; }
.hero-lead .field__error { margin-top: .1rem; }

/* One row always, scrolling sideways when it runs out of space, so the bar
   keeps a constant height in the hero instead of wrapping to two rows. */
.hero-lead__chips {
  display: flex;
  flex-wrap: nowrap;
  gap: .4rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding-bottom: 2px;
  margin-inline: -.15rem;
  padding-inline: .15rem;
}
.hero-lead__chips::-webkit-scrollbar { display: none; }
/* On narrow screens the row always overflows, so fade the trailing edge to
   show it scrolls. Wider screens fit every chip and need no fade. */
@media (max-width: 599px) {
  .hero-lead__chips {
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
    mask-image: linear-gradient(90deg, #000 86%, transparent);
  }
}
.hero-lead__chips .choice { flex: none; scroll-snap-align: start; }
.hero-lead__chips .choice__label {
  min-height: 2.25rem;
  padding: .4rem .7rem;
  font-size: .875rem;
  white-space: nowrap;
}

/* Compact step controls: the hero has no room for full size nav buttons. */
.hero-lead .cstep__nav {
  margin-top: .45rem;
  padding-top: 0;
  border-top: 0;
  gap: .5rem;
}
.hero-lead .cstep__nav .btn {
  --btn-h: 2.25rem;
  font-size: .6875rem;
}
.hero-lead .cstep__nav .btn .btn__label { padding-inline: .9rem .8rem; }
.hero-lead__skip {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-line-strong);
  text-underline-offset: .3em;
  transition: color var(--dur-fast);
}
.hero-lead__skip:hover { color: var(--color-text); }

/* Step count, skip and the route to the full brief share one quiet line. */
.hero-lead__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .85rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.hero-lead__count b { font-weight: 400; color: var(--color-accent); }

/* Success state ----------------------------------------------------------- */
.hero-lead__done { display: grid; gap: .6rem; justify-items: start; }
.hero-lead__done[hidden] { display: none; }
.hero-lead__done:focus { outline: none; }
.hero-lead__done-title {
  font-family: var(--font-display);
  font-weight: 720;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  color: var(--color-text);
}
.hero-lead__done p {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--color-muted-light);
  max-width: 34ch;
}

/* Placement inside the hero ---------------------------------------------- */
.hero__foot > .hero-lead { margin-top: .25rem; }
@media (min-width: 1024px) {
  .hero__foot > .hero-lead { grid-column: 1 / -1; justify-self: start; max-width: 40rem; }
}
@media (min-width: 1180px) {
  /* Wide enough for all five choices, so the row never looks sliced on a
     desktop where there is room for it. */
  .hero__foot > .hero-lead { grid-column: 7 / span 6; justify-self: end; max-width: 38rem; }
}

/* 2. Short viewport compaction -------------------------------------------
   The hero already overflowed on laptop heights before this form existed
   (at 1366x768 the availability note sat about 90px below the fold). These
   rules only apply to short viewports; taller screens keep the original
   spacing exactly. Candidate for folding into main.css. */
@media (min-width: 1024px) and (max-height: 900px) {
  .hero__inner { padding-block: 2rem 1.25rem; }
  .hero__badge { margin-bottom: 1rem; }
  .hero__title { font-size: min(var(--fs-hero), 11.8svh); }
  .hero__foot { margin-top: 1.5rem; gap: 1.1rem; }
  .hero__rail { padding-block: .9rem 1rem; }
}
@media (min-width: 1024px) and (max-height: 800px) {
  .hero__inner { padding-block: 1.5rem .75rem; }
  .hero__title { font-size: min(var(--fs-hero), 10.6svh); }
  .hero__lead { font-size: 1rem; }
  .hero__foot { margin-top: 1rem; gap: .9rem; }
  .hero__actions { gap: 1rem; }
}
@media (max-width: 1023px) and (max-height: 900px) {
  .hero__inner { padding-block: 2rem 1.25rem; }
  .hero__foot { gap: 1.1rem; }
  .hero__badge { margin-bottom: .9rem; }
}

/* 30. [hidden] must win ------------------------------------------------------
   Author display rules on .fieldset, .contact-group and steps kept overriding the
   user agent's [hidden] rule, leaving hidden steps on screen. */
[hidden] { display: none !important; }


/* 31. Loading screen ---------------------------------------------------------
   Injected by a small inline bootstrap at the top of <body>, so it cannot exist
   without JavaScript and never delays content: the page renders underneath and
   the curtain simply covers it. The reveal is defined here in CSS, so it plays
   out even if loader.js never arrives. Only transform, opacity and clip-path
   are animated, so nothing reflows and CLS stays at zero. */
.ml-loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--color-bg);
  transition: transform .55s cubic-bezier(.65, 0, .35, 1);
  will-change: transform;
}
.ml-loader.is-out { transform: translate3d(0, -101%, 0); }
.ml-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(42rem circle at 50% 46%, rgba(0, 226, 208, .09), transparent 60%);
  opacity: 0;
  animation: ml-glow .7s ease-out .06s forwards;
}
/* Timing budget: every part of the reveal finishes by 800ms and loader.js lifts
   the curtain at 900ms, so the composition is seen complete and still for a
   beat before it leaves. Nothing here may outlast that. A reveal chopped off
   mid animation is what makes a loading screen look cheap. */
.ml-loader__art {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  padding-inline: var(--gutter);
}
/* A hairline that draws under the lock-up, so the reveal resolves on something
   and the lift feels earned rather than arbitrary. Pseudo element on purpose:
   no extra markup for the inline bootstrap to carry on all 11 pages. */
.ml-loader__art::after {
  content: "";
  width: clamp(3.5rem, 9vw, 6.5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, #00E2D0, transparent);
  transform: scaleX(0);
  animation: ml-rule .4s cubic-bezier(.16, 1, .3, 1) .4s forwards;
}
.ml-loader__mark {
  width: clamp(6.5rem, 17vw, 14rem);
  height: auto;
  overflow: visible;
}
.ml-loader__m {
  clip-path: inset(0 100% 0 0);
  animation: ml-wipe .46s cubic-bezier(.16, 1, .3, 1) .04s forwards;
}
.ml-loader__l {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: translate3d(0, 18%, 0);
  animation: ml-foot .34s cubic-bezier(.16, 1, .3, 1) .34s forwards;
}
.ml-loader__word {
  font-family: var(--font-display);
  font-weight: 720;
  font-size: .8125rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-muted-light);
  opacity: 0;
  transform: translate3d(0, .4rem, 0);
  animation: ml-word .36s cubic-bezier(.16, 1, .3, 1) .38s forwards;
}
@keyframes ml-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes ml-foot { to { opacity: 1; transform: none; } }
@keyframes ml-word { to { opacity: 1; transform: none; } }
@keyframes ml-glow { to { opacity: 1; } }
@keyframes ml-rule { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  /* The bootstrap does not inject the loader at all under reduced motion.
     These rules only cover a loader already on screen when the setting flips. */
  .ml-loader__m, .ml-loader__l, .ml-loader__word, .ml-loader::before, .ml-loader__art::after {
    animation: none;
    opacity: 1;
    clip-path: none;
    transform: none;
  }
}


/* 32. Hero lead form: chip row fix ------------------------------------------
   All five chips fit on one row at 1024 and up, wrapping below, so no chip is
   ever cut. Overrides the .hero-lead block above, hence its position here. */
/* ==========================================================================
   Mirana Labs, hero lead chip row fix (index.html)
   Loaded after main.css, which now carries the merged hero-lead rules.

   The chip row was a horizontal scroller, so the trailing chip was cut mid
   word at 1440, 1366 and 390. A scroller can never satisfy "no chip is
   clipped" on a narrow screen, so the row no longer scrolls at all:
     - 1024 and up: a tighter gap and chip padding let all five sit on one
       row, so the bar height in the hero is unchanged.
     - below 1024: the row wraps onto two short rows, and the hero spacing is
       trimmed to keep the bar above the fold at 390x844.
   No mask is used: with nothing to scroll, a permanent fade would dim the
   last chip even when it fits.
   ========================================================================== */

.hero-lead__chips {
  flex-wrap: wrap;
  overflow-x: visible;
  -webkit-mask-image: none;
  mask-image: none;
  margin-inline: 0;
  padding-inline: 0;
  padding-bottom: 0;
  row-gap: .35rem;
}
.hero-lead__chips .choice { scroll-snap-align: none; }

/* Desktop: one row, no scroller, height unchanged. */
@media (min-width: 1024px) {
  .hero-lead__chips { gap: .3rem; }
  .hero-lead__chips .choice__label {
    padding: .4rem .6rem;
    font-size: .8125rem;
  }
}

/* Wide desktop: let the bar use the whole column so the row has room. */
@media (min-width: 1180px) {
  .hero__foot > .hero-lead { max-width: 40rem; }
}

/* Below 1024 the row wraps: slightly smaller chips keep both rows compact. */
@media (max-width: 1023px) {
  .hero-lead__chips { gap: .35rem; }
  .hero-lead__chips .choice__label {
    min-height: 2.1rem;
    padding: .35rem .6rem;
    font-size: .8125rem;
  }
  .hero-lead { gap: .45rem; }
  .hero-lead__step { gap: .35rem; }
}

/* Recover the height the second chip row costs, so the bar still sits above
   the fold on a phone. */
@media (max-width: 1023px) and (max-height: 900px) {
  .hero__inner { padding-block: 1.75rem 1rem; }
  .hero__badge { margin-bottom: .75rem; }
  .hero__foot { gap: .9rem; }
  .hero__actions { gap: 1rem; }
  .hero__lead { font-size: 1rem; }
}

/* 33. Sequence runway --------------------------------------------------------
   The Mirana Core resolves into the logo after step 4 and uses whatever stuck
   run the layout gives it. The default left only 72px at 1440, so the mark
   finished as the stage released. */
@media (min-width: 1024px) {
  .sequence__steps { padding-block: 6svh 55svh; }
}

/* 34. Work: show more ---------------------------------------------------------
   The Show more button is created by work.js, so it exists only when scripts
   run. Without JavaScript every project is rendered and visible, and no button
   appears, which is why there is no hidden state to undo here. */
.work-more {
  display: flex;
  margin-inline: auto;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.work-more[hidden] { display: none; }