/* ==========================================================================
   TGBS — The Golden Brain Services
   Design system: dark luxe, gold on near-black.

   The palette is dictated by the logo: the "GB" inside the brain mark is a
   transparent cutout, so the letters only read against a dark ground. On the
   old white site they disappeared entirely.

   Structure
     01  Tokens
     02  Reset & base
     03  Typography
     04  Layout primitives
     05  Buttons & links
     06  Surfaces (cards, glass, hairlines)
     07  Header & navigation
     08  Hero
     09  Marquee
     10  Sections & components
     11  Forms
     12  Footer & floating actions
     13  Motion & reveal
     14  Utilities
     15  Reduced motion / print
   ========================================================================== */

/* ==========================================================================
   01  TOKENS
   ========================================================================== */

:root {
  /* --- Surfaces ------------------------------------------------------ */
  --ink: #08080b;
  --ink-2: #0b0b10;
  --ink-3: #101017;
  --ink-4: #16161f;

  /* --- Gold ----------------------------------------------------------
     --gold is the brand core sampled from the logo. The lighter steps are
     for text and hairlines, which need more luminance to clear WCAG AA on
     the near-black ground. */
  --gold-deep: #8a6b15;
  --gold: #c9a227;
  --gold-lite: #e8cd7e;
  --gold-hi: #f5e7bc;

  --gold-metal: linear-gradient(
    135deg,
    #f5e7bc 0%,
    #e8cd7e 18%,
    #c9a227 42%,
    #8a6b15 62%,
    #c9a227 80%,
    #f0dfa8 100%
  );

  /* --- Text ----------------------------------------------------------- */
  --fg: #f2efe8;
  --fg-2: rgba(242, 239, 232, 0.64);
  --fg-3: rgba(242, 239, 232, 0.42);
  --fg-4: rgba(242, 239, 232, 0.24);

  /* --- Lines & fills --------------------------------------------------
     Hairlines carry most of the "premium" signal. They are gold at very low
     alpha rather than grey, which keeps the whole page tinted warm. */
  --line: rgba(240, 223, 168, 0.11);
  --line-2: rgba(240, 223, 168, 0.2);
  --line-3: rgba(240, 223, 168, 0.34);
  --fill: rgba(255, 255, 255, 0.028);
  --fill-2: rgba(255, 255, 255, 0.05);
  --fill-3: rgba(255, 255, 255, 0.075);

  --glow-gold: rgba(201, 162, 39, 0.16);

  /* --- Radii ---------------------------------------------------------- */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* --- Elevation ------------------------------------------------------ */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 40px 90px -32px rgba(0, 0, 0, 0.9);
  --shadow-gold: 0 20px 60px -22px rgba(201, 162, 39, 0.42);

  /* --- Rhythm --------------------------------------------------------- */
  --gutter: clamp(20px, 5vw, 56px);
  --maxw: 1280px;
  --maxw-narrow: 780px;
  --section-y: clamp(76px, 11vw, 152px);
  --header-h: 74px;

  /* --- Motion ---------------------------------------------------------
     One easing curve for almost everything. Consistent motion reads as
     considered; mixed easings read as accidental. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.22s;
  --t: 0.42s;
  --t-slow: 0.85s;

  /* --- Type ----------------------------------------------------------- */
  --font-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;

  --fs-display: clamp(2.6rem, 1.2rem + 6.1vw, 6.4rem);
  --fs-h1: clamp(2.3rem, 1.3rem + 4.4vw, 4.6rem);
  --fs-h2: clamp(1.95rem, 1.25rem + 3vw, 3.5rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  --fs-h4: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-lead: clamp(1.02rem, 0.97rem + 0.36vw, 1.24rem);
  --fs-body: clamp(0.96rem, 0.94rem + 0.14vw, 1.04rem);
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;
  --fs-eyebrow: 0.7rem;

  color-scheme: dark;
}

/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the fixed header instead of hiding beneath it. */
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  min-height: 100svh;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.005em;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Page-wide warmth: two soft gold pools, fixed so they don't repaint on
   scroll, plus a grain layer that stops the flat black looking cheap. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background:
    radial-gradient(
      70ch 52ch at 78% -8%,
      rgba(201, 162, 39, 0.13),
      transparent 62%
    ),
    radial-gradient(
      62ch 46ch at 6% 6%,
      rgba(232, 205, 126, 0.075),
      transparent 58%
    );
}

body::after {
  /* 140x140 tiled fractal noise, ~1.4KB, cheaper than a bitmap request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  opacity: 0.032;
  mix-blend-mode: overlay;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Inline SVG has no intrinsic size. Without a default, an icon dropped into a
   text run — `<a class="link">${icon("phone")} +971 …</a>` — expands to fill
   its container, which is exactly what happened to the phone and mail icons
   on the pricing page.

   Wrapped in :where() so it carries zero specificity: every explicit size
   below (.feature__icon svg, .social svg, .fab svg, .stars svg …) still wins
   without needing !important. */
:where(svg) {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

/* <picture> is only a source-selection wrapper, but it still generates a box.
   Left at its intrinsic size, `height: 100%` on the <img> inside resolves
   against an auto-height parent and collapses to auto — so every ratio-boxed
   image stopped short of the bottom of its frame. These containers make the
   wrapper fill the frame so the <img> has a definite height to match. */
.media > picture,
.work__media > picture,
.person__media > picture {
  width: 100%;
  height: 100%;
}

img,
video {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
}

::selection {
  background: var(--gold);
  color: #0a0a0d;
}

:focus-visible {
  outline: 2px solid var(--gold-lite);
  outline-offset: 3px;
  border-radius: 4px;
}

/* `content-visibility: auto` on sections was tried here and removed.
   It defers layout for offscreen content, but while a section is unrendered
   the browser uses `contain-intrinsic-size` as its height instead of the real
   one — so every in-page anchor computes its target from placeholder heights
   and lands in the wrong place. Deep-linking to #quote on the pricing page
   undershot by around 3000px.

   This site uses in-page anchors heavily (pricing jump links, the home page
   section nav, "back to top"), so correctness wins. The scroll smoothness
   comes from lazy images with reserved dimensions, transform-only animation,
   and not hijacking the scroll — not from this. */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: var(--gold);
  color: #0a0a0d;
  font-weight: 600;
}
.skip-link:focus-visible {
  left: 16px;
}

/* ==========================================================================
   03  TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4,
h5 {
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  line-height: 0.94;
  letter-spacing: -0.042em;
  font-weight: 600;
}

.h1 {
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: -0.038em;
}
.h2 {
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -0.034em;
}
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.024em;
}
.h4 {
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: -0.018em;
  font-weight: 600;
}

/* The serif italic is the one decorative move in the whole system. It is
   reserved for a single accent phrase per heading — never a full line. */
.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  /* Instrument Serif runs small next to Inter Tight at the same px size. */
  font-size: 1.12em;
  line-height: 0.9;
}

.gold {
  background: var(--gold-metal);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gold-flat {
  color: var(--gold-lite);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--fg-2);
  text-wrap: pretty;
}

p {
  text-wrap: pretty;
}

.muted {
  color: var(--fg-2);
}
.muted-2 {
  color: var(--fg-3);
}

.small {
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.xs {
  font-size: var(--fs-xs);
  line-height: 1.55;
}

/* Section label: uppercase, wide-tracked, gold, with a leading rule.
   Borrowed from editorial layouts — it gives every section a clear "chapter"
   marker without adding another heading level for screen readers. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-lite);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
  flex: none;
}

.eyebrow--center {
  justify-content: center;
}
.eyebrow--center::after {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(270deg, transparent, var(--gold));
  flex: none;
}

/* Index numerals (01, 02 …). Tabular so columns of them stay aligned. */
.numeral {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.06em;
  color: var(--gold);
}

.mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   04  LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: min(var(--maxw), 100% - var(--gutter) * 2);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.container--narrow {
  width: min(var(--maxw-narrow), 100% - var(--gutter) * 2);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: clamp(52px, 7vw, 92px);
}

.section--flush-top {
  padding-top: 0;
}

/* For a section whose neighbour already supplies the separation. Two adjacent
   sections each contributing their own full padding left a visible dead band. */
.section--flush-bottom {
  padding-bottom: 0;
}

/* A hairline that fades at both ends, used between major sections. */
.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--line-2) 18%,
    var(--line-2) 82%,
    transparent
  );
}

.section-head {
  display: grid;
  gap: 20px;
  max-width: 720px;
  margin-bottom: clamp(40px, 5vw, 68px);
}

.section-head--center {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

.section-head--split {
  max-width: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: end;
  gap: 32px;
}

@media (max-width: 760px) {
  .section-head--split {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.grid {
  display: grid;
  gap: clamp(16px, 1.8vw, 26px);
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.stack {
  display: grid;
  gap: 18px;
  align-content: start;
}
.stack-sm {
  display: grid;
  gap: 10px;
  align-content: start;
}
.stack-lg {
  display: grid;
  gap: 30px;
  align-content: start;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* ==========================================================================
   05  BUTTONS & LINKS
   ========================================================================== */

.btn {
  --btn-py: 13px;
  --btn-px: 26px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.008em;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t) var(--ease),
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.btn:active {
  transform: translateY(1px) scale(0.985);
}

.btn svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

/* Primary — brushed gold. The sweep on hover reads as light catching metal. */
.btn--primary {
  background: var(--gold-metal);
  background-size: 220% 100%;
  background-position: 0% 50%;
  color: #0a0a0d;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.34) inset,
    var(--shadow-sm);
  transition:
    transform var(--t-fast) var(--ease),
    background-position var(--t-slow) var(--ease),
    box-shadow var(--t) var(--ease);
}

@media (hover: hover) {
  .btn--primary:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.5) inset,
      var(--shadow-gold);
  }
}

/* Ghost — hairline only, fills with a gold wash from the bottom on hover. */
.btn--ghost {
  border: 1px solid var(--line-2);
  color: var(--fg);
  background: transparent;
}

.btn--ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(201, 162, 39, 0.16),
    rgba(201, 162, 39, 0.06)
  );
  transform: translateY(101%);
  transition: transform var(--t) var(--ease);
}

@media (hover: hover) {
  .btn--ghost:hover {
    border-color: var(--line-3);
    transform: translateY(-2px);
  }
  .btn--ghost:hover::before {
    transform: translateY(0);
  }
}

.btn--quiet {
  padding-inline: 0;
  color: var(--fg-2);
  border-radius: 4px;
}
.btn--quiet:hover {
  color: var(--gold-lite);
}

.btn--lg {
  --btn-py: 16px;
  --btn-px: 34px;
  font-size: 0.95rem;
}

.btn--sm {
  --btn-py: 9px;
  --btn-px: 18px;
  font-size: var(--fs-xs);
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* Text link with a rule that wipes in from the left. */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-lite);
  font-weight: 500;
  padding-bottom: 2px;
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t) var(--ease);
}

@media (hover: hover) {
  .link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
  .link:hover .link__arrow {
    transform: translate(3px, -3px);
  }
}

.link__arrow {
  transition: transform var(--t-fast) var(--ease);
  width: 0.85em;
  height: 0.85em;
}

/* ==========================================================================
   06  SURFACES
   ========================================================================== */

/* The base card. A 1px gold hairline plus a bright top edge simulates a
   bevelled metal lip catching light from above. */
.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    var(--ink-2);
  padding: clamp(22px, 2.4vw, 34px);
  overflow: hidden;
  transition:
    border-color var(--t) var(--ease),
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

.card::before {
  content: "";
  position: absolute;
  inset-inline: 14%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-3), transparent);
}

.card--hover {
  cursor: pointer;
}

@media (hover: hover) {
  .card--hover:hover {
    border-color: var(--line-2);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
  }
}

/* Cursor-tracked gold bloom. --mx/--my are set in JS on pointermove. */
.card--glow::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    22ch 22ch at var(--mx, 50%) var(--my, 0%),
    var(--glow-gold),
    transparent 68%
  );
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  pointer-events: none;
}

@media (hover: hover) {
  .card--glow:hover::after {
    opacity: 1;
  }
}

.glass {
  background: rgba(12, 12, 18, 0.62);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line);
}

/* Small corner ticks. A quiet technical detail that makes a plain rectangle
   feel drawn rather than defaulted. */
.ticks::before,
.ticks::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--line-3);
  pointer-events: none;
}
.ticks::before {
  top: 12px;
  left: 12px;
  border-right: 0;
  border-bottom: 0;
}
.ticks::after {
  bottom: 12px;
  right: 12px;
  border-left: 0;
  border-top: 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--fill);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--fg-2);
  white-space: nowrap;
}

.pill--gold {
  border-color: var(--line-2);
  color: var(--gold-lite);
  background: rgba(201, 162, 39, 0.07);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg-3);
}

/* Live status dot — the pulse is what makes it read as "right now". */
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: pulse 2.4s var(--ease) infinite;
  flex: none;
}

.dot--gold {
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.6);
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 9px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* Responsive media wrapper. The aspect ratio is set inline per instance so
   the box is reserved before the image decodes — no layout shift, ever. */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--ink-3);
  aspect-ratio: var(--ar, 16 / 10);
}

.media img,
.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
}

/* Images fade up from their inlined blur placeholder once decoded. */
.media img[data-loaded="false"] {
  opacity: 0;
}
.media img {
  opacity: 1;
  transition: opacity 0.5s var(--ease), transform var(--t-slow) var(--ease);
}

.media--zoom img {
  transition: transform 0.9s var(--ease);
}

@media (hover: hover) {
  .card--hover:hover .media--zoom img,
  a:hover .media--zoom img {
    transform: scale(1.05);
  }
}

.media__lqip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px) saturate(120%);
  transform: scale(1.1);
  z-index: -1;
}

/* ==========================================================================
   07  HEADER & NAVIGATION
   ========================================================================== */

.header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition:
    height var(--t) var(--ease),
    background-color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    backdrop-filter var(--t) var(--ease);
  border-bottom: 1px solid transparent;
}

/* Condensed state, toggled from JS past ~40px of scroll. */
.header.is-stuck {
  --header-h: 62px;
  background: rgba(8, 8, 11, 0.72);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(var(--maxw), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: none;
  margin-right: auto;
}

.brand__mark {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(201, 162, 39, 0.3));
  transition: transform var(--t) var(--ease);
}

@media (hover: hover) {
  .brand:hover .brand__mark {
    transform: rotate(-6deg) scale(1.06);
  }
}

.brand__text {
  display: grid;
  line-height: 1.05;
}

.brand__name {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand__tag {
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.025);
}

.nav__link {
  position: relative;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-2);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}

.nav__link:hover {
  color: var(--fg);
}

.nav__link[aria-current="page"] {
  color: var(--fg);
}

/* The active pill sits behind the label and is animated between links with
   the View Transition-free approach: a single shared element moved in JS. */
.nav__pill {
  position: absolute;
  z-index: -1;
  border-radius: var(--r-pill);
  background: rgba(201, 162, 39, 0.14);
  border: 1px solid var(--line-2);
  transition:
    transform var(--t) var(--ease),
    width var(--t) var(--ease),
    opacity var(--t-fast) var(--ease);
  opacity: 0;
  pointer-events: none;
  inset-block: 4px;
  left: 0;
}

.nav__pill.is-on {
  opacity: 1;
}

.header__cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* --- Mobile menu ------------------------------------------------------ */

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--fill);
  flex: none;
}

.nav-toggle__bars {
  position: relative;
  width: 17px;
  height: 11px;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: var(--fg);
  transition: transform var(--t) var(--ease), opacity var(--t-fast) linear;
}
.nav-toggle__bars span:nth-child(1) {
  top: 0;
}
.nav-toggle__bars span:nth-child(2) {
  top: 50%;
  translate: 0 -50%;
}
.nav-toggle__bars span:nth-child(3) {
  bottom: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(4.75px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-4.75px) rotate(-45deg);
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 89;
  display: grid;
  align-content: start;
  padding: calc(var(--header-h) + 26px) var(--gutter) 40px;
  background: rgba(8, 8, 11, 0.94);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  visibility: hidden;
  opacity: 0;
  /* `visibility` is a discrete property: inside a normal transition it still
     computes as `hidden` on the opening frame, which makes the drawer's first
     link unfocusable exactly when focus is being moved into it. Flipping it
     with a zero-duration transition — instant on open, delayed on close —
     keeps the fade while making the drawer focusable immediately. */
  transition:
    opacity var(--t) var(--ease),
    visibility 0s linear var(--t);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer.is-open {
  visibility: visible;
  opacity: 1;
  transition:
    opacity var(--t) var(--ease),
    visibility 0s linear 0s;
}

.drawer__list {
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--line);
}

.drawer__link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  /* Staggered rise; --i is set per item in the markup. */
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}

.drawer.is-open .drawer__link {
  opacity: 1;
  transform: none;
}

.drawer__num {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.1em;
}

.drawer__foot {
  display: grid;
  gap: 14px;
  margin-top: 32px;
}

@media (max-width: 1080px) {
  .nav,
  .header__cta .btn--ghost {
    display: none;
  }
  .nav-toggle {
    display: grid;
  }
}

/* No-JS fallback. The drawer needs a script to open, so without one the
   mobile breakpoint would hide the navigation entirely. Show the links
   inline and let them wrap. */
html:not(.js) .nav-toggle,
html:not(.js) .drawer {
  display: none !important;
}

@media (max-width: 1080px) {
  html:not(.js) .header {
    position: static;
    height: auto;
    padding-block: 12px;
  }
  html:not(.js) .header__inner {
    flex-wrap: wrap;
  }
  html:not(.js) .nav {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (max-width: 520px) {
  .header__cta .btn--primary {
    display: none;
  }
  .brand__tag {
    display: none;
  }
}

/* Scroll progress rail, pinned under the header. */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 95;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-hi));
  pointer-events: none;
}

/* ==========================================================================
   08  HERO
   ========================================================================== */

.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 76px));
  padding-bottom: clamp(48px, 7vw, 88px);
  overflow: hidden;
  /* The hero is always in view on load; skipping it would delay first paint. */
  content-visibility: visible;
}

/* Animated gold neural mesh. Literal reading of "The Golden Brain" — nodes
   and synapses — drawn on a canvas rather than shipped as video, which is
   both lighter than the old 1.8MB mp4 and never blocks the main thread. */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
  pointer-events: none;
  mask-image: radial-gradient(
    120% 90% at 50% 40%,
    #000 42%,
    rgba(0, 0, 0, 0.4) 70%,
    transparent 100%
  );
}

.hero__canvas.is-on {
  opacity: 1;
}

/* Single-column layout puts the headline and lead across the full width, so
   the mesh runs behind the text rather than beside it. Dropping it back keeps
   the atmosphere without competing with the copy. */
@media (max-width: 940px) {
  .hero__canvas.is-on {
    opacity: 0.5;
  }
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.72fr);
  align-items: center;
}

@media (max-width: 940px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Deliberately smaller than --fs-display and wider in measure than a
   display heading elsewhere: the hero has to fit its lead paragraph and both
   CTAs above the fold on a 720px-tall laptop, not just on a large monitor. */
.hero__title {
  font-size: clamp(2.4rem, 1.05rem + 5vw, 4.9rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  font-weight: 600;
  max-width: 19ch;
}

.hero__lead {
  max-width: 52ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* Right rail: clock, locations, proof. Mirrors the "GMT-7 08:55" detail on
   the reference sites — a small live signal that the business is real. */
.hero__aside {
  display: grid;
  gap: 16px;
}

.clock {
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.022);
  position: relative;
}

.clock__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.clock__place {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

.clock__flag {
  font-size: 1rem;
  line-height: 1;
}

.clock__time {
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.clock__meta {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.hero__stat {
  padding: 18px 20px;
  background: var(--ink-2);
  display: grid;
  gap: 3px;
}

.stat__num {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(32px, 5vw, 56px);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.scroll-cue__line {
  position: relative;
  width: 46px;
  height: 1px;
  background: var(--line-2);
  overflow: hidden;
}

.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  animation: cue 2.4s var(--ease-in-out) infinite;
}

@keyframes cue {
  0% {
    transform: translateX(-100%);
  }
  60%,
  100% {
    transform: translateX(100%);
  }
}

/* --- Compact page hero (interior pages) ------------------------------- */

.pagehead {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(46px, 7vw, 84px));
  padding-bottom: clamp(34px, 5vw, 60px);
  content-visibility: visible;
}

.pagehead__inner {
  display: grid;
  gap: 22px;
  max-width: 900px;
}

.pagehead__title {
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: -0.038em;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--fg-3);
}

.crumbs a:hover {
  color: var(--gold-lite);
}

.crumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.crumbs li + li::before {
  content: "/";
  color: var(--fg-4);
}

/* ==========================================================================
   09  MARQUEE
   ========================================================================== */

.marquee {
  --speed: 38s;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}

/* Two identical tracks side by side, each translated a full width. When one
   leaves the viewport the other has already taken its place, so the loop is
   seamless without measuring anything in JS. */
.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--gap, 46px);
  padding-right: var(--gap, 46px);
  flex: none;
  min-width: 100%;
  animation: marquee var(--speed) linear infinite;
  will-change: transform;
}

.marquee--reverse .marquee__track {
  animation-direction: reverse;
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

@media (hover: hover) {
  .marquee:hover .marquee__track {
    animation-play-state: paused;
  }
}

/* Big statement ticker */
.ticker {
  --speed: 30s;
  padding-block: clamp(18px, 2.4vw, 30px);
  border-block: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.014);
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--gap, 46px);
  font-size: clamp(1.15rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--fg-2);
}

.ticker__star {
  color: var(--gold);
  font-size: 0.62em;
}

/* Partner logo rail */
.logorail {
  --speed: 46s;
  --gap: clamp(38px, 5vw, 76px);
}

.logorail img {
  height: clamp(26px, 3.4vw, 38px);
  width: auto;
  object-fit: contain;
  opacity: 0.55;
  filter: grayscale(1) brightness(1.7);
  transition:
    opacity var(--t) var(--ease),
    filter var(--t) var(--ease);
}

.logorail a {
  display: grid;
  place-items: center;
  flex: none;
}

@media (hover: hover) {
  .logorail a:hover img {
    opacity: 1;
    filter: none;
  }
}

/* ==========================================================================
   10  SECTIONS & COMPONENTS
   ========================================================================== */

/* --- Numbered service accordion --------------------------------------
   The row expands to reveal the description and a preview image. Height is
   animated via grid-template-rows 0fr -> 1fr, which animates cleanly without
   measuring content or hard-coding a max-height. */

.acc {
  border-top: 1px solid var(--line);
}

.acc__item {
  border-bottom: 1px solid var(--line);
}

.acc__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  width: 100%;
  padding: clamp(20px, 2.6vw, 30px) 4px;
  text-align: left;
  transition: color var(--t-fast) var(--ease);
}

.acc__num {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.acc__title {
  font-size: clamp(1.15rem, 2.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.15;
  transition: color var(--t) var(--ease);
}

.acc__icon {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  flex: none;
  transition:
    background-color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    transform var(--t) var(--ease);
}

.acc__icon::before,
.acc__icon::after {
  content: "";
  position: absolute;
  inset: 50% 10px auto;
  height: 1px;
  background: var(--fg-2);
  transition: transform var(--t) var(--ease), background-color var(--t) var(--ease);
}
.acc__icon::after {
  transform: rotate(90deg);
}

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t) var(--ease);
}

.acc__panel > div {
  overflow: hidden;
}

.acc__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  padding: 4px 4px clamp(26px, 3vw, 38px);
}

@media (max-width: 760px) {
  .acc__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.acc__item[data-open="true"] .acc__title {
  color: var(--gold-lite);
}

.acc__item[data-open="true"] .acc__panel {
  grid-template-rows: 1fr;
}

.acc__item[data-open="true"] .acc__icon {
  background: rgba(201, 162, 39, 0.14);
  border-color: var(--line-3);
  transform: rotate(180deg);
}

.acc__item[data-open="true"] .acc__icon::after {
  transform: rotate(90deg) scaleX(0);
}

@media (hover: hover) {
  .acc__head:hover .acc__title {
    color: var(--gold-lite);
  }
  .acc__head:hover .acc__icon {
    border-color: var(--line-3);
  }
}

.acc__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

/* --- Work / case study cards ----------------------------------------- */

.work {
  position: relative;
  display: grid;
  gap: 18px;
  align-content: start;
}

/* One fixed ratio for every card in a work grid. The source artwork ranges
   from 1521x855 landscape to 906x1280 portrait; honouring each would give a
   ragged grid, so cards crop from the top and the case-study page shows the
   image at its true proportions. */
.work__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-3);
  aspect-ratio: var(--ar, 16 / 10);
}

.work__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, top center);
  transition: transform 0.9s var(--ease), filter var(--t) var(--ease);
}

/* Interface screenshots. A 1521x855 screenshot cropped to a 4/3 card loses a
   quarter of its width from each side and stops being readable, so these sit
   whole inside an inset frame — the presentation you would give a device
   mockup, rather than a crop. */
.work__media--ui {
  padding: clamp(12px, 1.6vw, 20px);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(201, 162, 39, 0.1), transparent 70%),
    var(--ink-3);
}

/* Centre the screenshot at its true proportions and let the frame show
   around it, so nothing is cut off. The shadow goes on the image rather than
   the wrapper, so it hugs the artwork instead of outlining empty space. */
.work__media--ui > picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.work__media--ui img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 7px;
  box-shadow: var(--shadow);
}

.work__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 40%,
    rgba(8, 8, 11, 0.82) 100%
  );
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}

.work__cue {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold-metal);
  color: #0a0a0d;
  opacity: 0;
  transform: translateY(10px) scale(0.85);
  transition:
    opacity var(--t) var(--ease),
    transform var(--t) var(--ease);
}

.work__cue svg {
  width: 15px;
  height: 15px;
}

@media (hover: hover) {
  .work:hover .work__media img {
    transform: scale(1.045);
  }
  .work:hover .work__veil {
    opacity: 1;
  }
  .work:hover .work__cue {
    opacity: 1;
    transform: none;
  }
  .work:hover .work__title {
    color: var(--gold-lite);
  }
}

.work__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  color: var(--fg-3);
}

.work__meta span + span::before {
  content: "·";
  margin-right: 10px;
  color: var(--fg-4);
}

.work__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.028em;
  transition: color var(--t-fast) var(--ease);
}

/* --- Feature / value cards ------------------------------------------- */

.feature {
  display: grid;
  gap: 14px;
  align-content: start;
}

.feature__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  border: 1px solid var(--line-2);
  background: linear-gradient(
    160deg,
    rgba(201, 162, 39, 0.2),
    rgba(201, 162, 39, 0.04)
  );
  color: var(--gold-lite);
  margin-bottom: 4px;
}

.feature__icon svg {
  width: 21px;
  height: 21px;
}

/* --- Process steps ---------------------------------------------------- */

.steps {
  display: grid;
  gap: 0;
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(16px, 3vw, 44px);
  align-items: start;
  padding-block: clamp(26px, 3.2vw, 40px);
  border-top: 1px solid var(--line);
}

.step:last-child {
  border-bottom: 1px solid var(--line);
}

.step__num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  flex: none;
  transition:
    background-color var(--t) var(--ease),
    color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

@media (hover: hover) {
  .step:hover .step__num {
    background: var(--gold-metal);
    color: #0a0a0d;
    border-color: transparent;
  }
}

@media (max-width: 820px) {
  .step {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .step__body {
    grid-column: 2;
  }
}

/* --- Team ------------------------------------------------------------- */

.person {
  position: relative;
  display: grid;
  gap: 16px;
  align-content: start;
}

.person__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-3);
  aspect-ratio: 4 / 5;
}

.person__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, top center);
  /* Desaturated at rest so six different photo styles read as one set;
     colour returns on hover. */
  filter: grayscale(0.85) contrast(1.04);
  transition:
    filter var(--t-slow) var(--ease),
    transform 0.9s var(--ease);
}

.person__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 45%,
    rgba(8, 8, 11, 0.55) 100%
  );
  mix-blend-mode: multiply;
}

@media (hover: hover) {
  .person:hover .person__media img {
    filter: none;
    transform: scale(1.04);
  }
}

.person__role {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-lite);
}

/* --- Testimonials ----------------------------------------------------- */

.quote {
  display: grid;
  gap: 22px;
  align-content: start;
}

.quote__mark {
  font-family: var(--font-serif);
  font-size: 3.4rem;
  line-height: 0.6;
  color: var(--gold);
  opacity: 0.5;
}

.quote__text {
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  letter-spacing: -0.014em;
}

.quote__by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 6px;
}

.quote__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-2);
  flex: none;
}

.stars {
  display: inline-flex;
  gap: 3px;
  color: var(--gold);
}
.stars svg {
  width: 13px;
  height: 13px;
}

/* --- Stat band -------------------------------------------------------- */

.statband {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.statband > div {
  background: var(--ink-2);
  padding: clamp(22px, 2.6vw, 34px);
  display: grid;
  gap: 6px;
}

.statband .stat__num {
  font-size: clamp(2rem, 4vw, 3.2rem);
}

@media (max-width: 720px) {
  .statband {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Pricing ---------------------------------------------------------- */

.plan {
  position: relative;
  display: grid;
  gap: 20px;
  align-content: start;
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    var(--ink-2);
  transition:
    border-color var(--t) var(--ease),
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

@media (hover: hover) {
  .plan:hover {
    border-color: var(--line-2);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
  }
}

.plan--featured {
  border-color: var(--line-3);
  background:
    linear-gradient(180deg, rgba(201, 162, 39, 0.1), rgba(201, 162, 39, 0.015)),
    var(--ink-2);
  box-shadow: var(--shadow-gold);
}

.plan__badge {
  position: absolute;
  top: 0;
  right: clamp(24px, 2.6vw, 34px);
  transform: translateY(-50%);
  padding: 5px 13px;
  border-radius: var(--r-pill);
  background: var(--gold-metal);
  color: #0a0a0d;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* On a single-column layout the badge sits under the floating WhatsApp
   button, so it moves to the other corner. */
@media (max-width: 700px) {
  .plan__badge {
    right: auto;
    left: clamp(24px, 2.6vw, 34px);
  }
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.plan__amount {
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1;
}

.plan__per {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

.checklist {
  display: grid;
  gap: 11px;
}

.checklist li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  line-height: 1.5;
}

.checklist svg {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--gold);
  flex: none;
}

/* Segmented control (currency switch, category filters) */
.seg {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--fill);
  isolation: isolate;
}

.seg__thumb {
  position: absolute;
  z-index: -1;
  inset-block: 4px;
  left: 4px;
  border-radius: var(--r-pill);
  background: var(--gold-metal);
  transition:
    transform var(--t) var(--ease),
    width var(--t) var(--ease);
}

.seg__btn {
  padding: 8px 20px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg-2);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}

.seg__btn[aria-selected="true"],
.seg__btn[aria-pressed="true"] {
  color: #0a0a0d;
}

/* Chip row for the creative-service selector */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.chip {
  padding: 9px 17px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--fill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-2);
  transition:
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}

.chip:hover {
  color: var(--fg);
  border-color: var(--line-2);
}

.chip[aria-selected="true"] {
  background: var(--gold-metal);
  border-color: transparent;
  color: #0a0a0d;
  font-weight: 600;
}

/* --- FAQ -------------------------------------------------------------- */

.faq {
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__q {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 22px 4px;
  text-align: left;
  font-size: clamp(0.98rem, 1.5vw, 1.1rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  transition: color var(--t-fast) var(--ease);
}

.faq__q:hover {
  color: var(--gold-lite);
}

.faq__num {
  font-size: 0.7rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t) var(--ease);
}

.faq__a > div {
  overflow: hidden;
}

.faq__a p {
  padding: 0 4px 24px calc(0.7rem + 18px + 2ch);
  max-width: 74ch;
  color: var(--fg-2);
}

.faq__item[data-open="true"] .faq__a {
  grid-template-rows: 1fr;
}

.faq__item[data-open="true"] .faq__q {
  color: var(--gold-lite);
}

.faq__chev {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
}

.faq__chev svg {
  width: 13px;
  height: 13px;
}

.faq__item[data-open="true"] .faq__chev {
  transform: rotate(180deg);
  border-color: var(--line-3);
}

@media (max-width: 560px) {
  .faq__a p {
    padding-left: 4px;
  }
}

/* --- CTA band --------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  padding: clamp(34px, 5vw, 72px);
  text-align: center;
  display: grid;
  gap: 22px;
  justify-items: center;
  background:
    radial-gradient(
      60ch 34ch at 50% 120%,
      rgba(201, 162, 39, 0.2),
      transparent 70%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008)),
    var(--ink-2);
}

.cta__title {
  font-size: var(--fs-h2);
  max-width: 18ch;
}

/* ==========================================================================
   11  FORMS
   ========================================================================== */

.form {
  display: grid;
  gap: 18px;
}

.field {
  display: grid;
  gap: 8px;
}

.field__label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.field__req {
  color: var(--gold);
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.026);
  color: var(--fg);
  font-size: var(--fs-sm);
  transition:
    border-color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--fg-4);
}

.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--line-2);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16);
}

.textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}

.select {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a227' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 15px;
  cursor: pointer;
}

.select option {
  background: var(--ink-3);
  color: var(--fg);
}

/* Native validation styling, only after the user has actually interacted. */
.input:user-invalid,
.textarea:user-invalid,
.select:user-invalid {
  border-color: #ef6461;
}

.field__error {
  font-size: var(--fs-xs);
  color: #ef8b89;
  display: none;
}

.field.has-error .field__error {
  display: block;
}

/* Honeypot: hidden from people, irresistible to naive bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  display: none;
  gap: 10px;
  align-items: flex-start;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.form__status.is-on {
  display: flex;
}

.form__status[data-state="ok"] {
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.08);
  color: #b7f0c9;
}

.form__status[data-state="error"] {
  border-color: rgba(239, 100, 97, 0.42);
  background: rgba(239, 100, 97, 0.08);
  color: #f4b4b2;
}

.form__status svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 2px;
}

/* Submit spinner */
.btn.is-busy {
  pointer-events: none;
  color: transparent;
}

.btn.is-busy::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(10, 10, 13, 0.3);
  border-top-color: #0a0a0d;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.btn--ghost.is-busy::after {
  border-color: var(--fg-4);
  border-top-color: var(--gold);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   12  FOOTER & FLOATING ACTIONS
   ========================================================================== */

.footer {
  position: relative;
  border-top: 1px solid var(--line);
  padding-top: clamp(52px, 6vw, 80px);
  margin-top: clamp(40px, 6vw, 80px);
  background: linear-gradient(180deg, transparent, rgba(201, 162, 39, 0.035));
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 52px);
  padding-bottom: clamp(40px, 5vw, 64px);
}

@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer__brandcol {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.footer__title {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 16px;
}

.footer__list {
  display: grid;
  gap: 10px;
}

.footer__list a {
  font-size: var(--fs-sm);
  color: var(--fg-2);
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  display: inline-block;
}

.footer__list a:hover {
  color: var(--gold-lite);
  transform: translateX(3px);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 24px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--fg-3);
}

.socials {
  display: flex;
  gap: 9px;
}

.social {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--fg-2);
  transition:
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.social svg {
  width: 16px;
  height: 16px;
}

.social:hover {
  color: var(--gold-lite);
  border-color: var(--line-3);
  background: rgba(201, 162, 39, 0.09);
  transform: translateY(-2px);
}

/* Oversized wordmark at the very bottom, clipped by the viewport edge. */
.footer__word {
  font-size: clamp(3.4rem, 15vw, 13rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.78;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-2);
  user-select: none;
  padding-bottom: 0.06em;
  overflow: hidden;
}

/* Floating action stack */
.fabs {
  position: fixed;
  right: clamp(14px, 2.4vw, 26px);
  bottom: clamp(14px, 2.4vw, 26px);
  z-index: 80;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.fab {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(12, 12, 18, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--fg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--t) var(--ease),
    background-color var(--t) var(--ease),
    color var(--t) var(--ease),
    opacity var(--t) var(--ease),
    visibility var(--t) var(--ease);
}

.fab svg {
  width: 19px;
  height: 19px;
}

.fab:hover {
  transform: translateY(-3px) scale(1.05);
}

/* Brand gold rather than WhatsApp green. The glyph carries the recognition;
   the green swatch was the only thing on the page outside the palette. */
.fab--wa {
  background: var(--gold-metal);
  background-size: 220% 100%;
  background-position: 0% 50%;
  border-color: transparent;
  color: #0a0a0d;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    var(--shadow-gold);
  transition:
    transform var(--t) var(--ease),
    background-position var(--t-slow) var(--ease),
    box-shadow var(--t) var(--ease);
}

.fab--wa:hover {
  background-position: 100% 50%;
}

.fab--top {
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--t) var(--ease),
    opacity var(--t) var(--ease),
    visibility 0s linear var(--t);
}

.fab--top.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    transform var(--t) var(--ease),
    opacity var(--t) var(--ease),
    visibility 0s linear 0s;
}

/* ==========================================================================
   13  MOTION & REVEAL
   ========================================================================== */

/* Base reveal.
   Scoped to `.js`, which the inline script in <head> adds to <html>. The
   hidden state is what JS undoes, so it must never apply when JS has not run:
   otherwise a blocked script, a CDN failure or a parse error on an old browser
   leaves every section below the hero permanently invisible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y, 22px));
  transition:
    opacity 0.75s var(--ease),
    transform 0.75s var(--ease);
  transition-delay: var(--reveal-d, 0ms);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Line-by-line heading reveal. Each line sits in an overflow-hidden mask and
   slides up from below it, which reads far more deliberate than a fade. */
.lines {
  display: block;
}

.line {
  display: block;
  overflow: hidden;
  /* Descenders (g, y, p) would be clipped by a tight mask. */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 0.95s var(--ease);
  transition-delay: calc(var(--i, 0) * 75ms);
}

.is-in .line > span,
.lines.is-in .line > span {
  transform: none;
}

/* Custom cursor — pointer devices only, and only when JS enables it. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  pointer-events: none;
  mix-blend-mode: difference;
  will-change: transform;
}

.cursor__dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-hi);
  transform: translate(-50%, -50%);
}

.cursor__ring {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(240, 223, 168, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition:
    width var(--t) var(--ease),
    height var(--t) var(--ease),
    background-color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.cursor.is-hot .cursor__ring {
  width: 54px;
  height: 54px;
  background: rgba(240, 223, 168, 0.14);
  border-color: rgba(240, 223, 168, 0.85);
}

.cursor.is-hidden {
  opacity: 0;
}

@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none !important;
  }
}

/* ==========================================================================
   14  UTILITIES
   ========================================================================== */

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

.center {
  text-align: center;
}
.mx-auto {
  margin-inline: auto;
}
.relative {
  position: relative;
}
.full {
  width: 100%;
}

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 26px; }
.mt-4 { margin-top: 38px; }
.mt-5 { margin-top: 56px; }

.maxw-sm { max-width: 44ch; }
.maxw-md { max-width: 58ch; }
.maxw-lg { max-width: 72ch; }

[hidden] {
  display: none !important;
}

/* ==========================================================================
   15  REDUCED MOTION / PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Anything that hides content pending an animation must reveal itself,
     or a reduced-motion visitor gets a blank page. */
  .js [data-reveal],
  .js [data-reveal].is-in {
    opacity: 1 !important;
    transform: none !important;
  }

  .line > span {
    transform: none !important;
  }

  .marquee__track {
    animation: none !important;
  }

  .hero__canvas {
    display: none;
  }

  .cursor {
    display: none !important;
  }
}

@media print {
  .header,
  .fabs,
  .drawer,
  .cursor,
  .progress,
  .hero__canvas,
  .marquee {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  body::before,
  body::after {
    display: none;
  }

  .card,
  .plan {
    border: 1px solid #ccc;
    background: none;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }
}

/* --- Team monogram -------------------------------------------------------
   Stands in for a missing headshot. Reads as a designed placeholder, which is
   what it is, rather than as a failed image. */

.person__mono {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(201, 162, 39, 0.16), transparent 68%),
    var(--ink-3);
}

.person__mono::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--line);
  border-radius: calc(var(--r-lg) - 8px);
  pointer-events: none;
}

.person__initials {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 9vw, 4.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
  background: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}

/* ==========================================================================
   16  LIGHT SECTION SCOPE
   --------------------------------------------------------------------------
   `data-theme="light"` on a section re-points the palette tokens, so every
   component inside it inverts without needing a light-mode variant of its
   own. Cards, hairlines, buttons, chips and forms all read from the same
   tokens either way.

   Two things have to change beyond swapping ink for cream:

   1. Gold gets darker. #C9A227 on #F4F1EA is about 2.4:1 — it fails WCAG AA
      for text. The deep gold is 4.9:1 and passes, so the light scope uses it
      for anything that carries meaning and keeps the bright gold only for
      large decorative type where contrast rules do not apply.

   2. The brand mark cannot appear here. The "GB" is a transparent cutout, so
      on a light ground the letters vanish. Light sections use type, not the
      logo.
   ========================================================================== */

[data-theme="light"] {
  --ink: #f4f1ea;
  --ink-2: #fbf9f5;
  --ink-3: #ece7dc;
  --ink-4: #e2dcce;

  --fg: #14130f;
  --fg-2: rgba(20, 19, 15, 0.7);
  --fg-3: rgba(20, 19, 15, 0.5);
  --fg-4: rgba(20, 19, 15, 0.28);

  --line: rgba(20, 19, 15, 0.12);
  --line-2: rgba(20, 19, 15, 0.2);
  --line-3: rgba(138, 107, 21, 0.5);

  --fill: rgba(20, 19, 15, 0.03);
  --fill-2: rgba(20, 19, 15, 0.055);
  --fill-3: rgba(20, 19, 15, 0.08);

  /* The accessible gold on cream. */
  --gold: #8a6b15;
  --gold-lite: #7a5f13;
  --gold-hi: #5f4a0e;

  --glow-gold: rgba(138, 107, 21, 0.12);

  --shadow-sm: 0 2px 8px rgba(20, 19, 15, 0.07);
  --shadow: 0 18px 44px -20px rgba(20, 19, 15, 0.24);
  --shadow-lg: 0 40px 80px -34px rgba(20, 19, 15, 0.3);
  --shadow-gold: 0 18px 50px -22px rgba(138, 107, 21, 0.3);

  background: var(--ink);
  color: var(--fg);
  position: relative;
  isolation: isolate;
}

/* Cards need an opaque light surface; the dark recipe layers translucent
   white over near-black, which on cream would be invisible. */
[data-theme="light"] .card,
[data-theme="light"] .plan {
  background: var(--ink-2);
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .card::before {
  display: none;
}

[data-theme="light"] .plan--featured {
  background: linear-gradient(180deg, rgba(138, 107, 21, 0.07), transparent), var(--ink-2);
}

/* Metallic gradients read as muddy on cream. Solid deep gold instead. */
[data-theme="light"] .btn--primary,
[data-theme="light"] .chip[aria-selected="true"],
[data-theme="light"] .seg__thumb,
[data-theme="light"] .plan__badge,
[data-theme="light"] .work__cue {
  background: #14130f;
  color: #f4f1ea;
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .btn--primary:hover {
  background: #2a2721;
}

[data-theme="light"] .gold {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--gold);
}

[data-theme="light"] .statband,
[data-theme="light"] .statband > div {
  background: var(--ink-2);
}
[data-theme="light"] .statband {
  background: var(--line);
}

[data-theme="light"] .person__media img {
  filter: grayscale(0.9) contrast(1.03);
}

[data-theme="light"] .person__media::after {
  background: linear-gradient(180deg, transparent 55%, rgba(20, 19, 15, 0.32) 100%);
}

[data-theme="light"] .ticker {
  background: rgba(20, 19, 15, 0.02);
}

[data-theme="light"] .logorail img {
  filter: grayscale(1) brightness(0.35);
  opacity: 0.6;
}
[data-theme="light"] .logorail a:hover img {
  filter: none;
  opacity: 1;
}

[data-theme="light"] .work__veil {
  background: linear-gradient(180deg, transparent 40%, rgba(20, 19, 15, 0.7) 100%);
}

[data-theme="light"] .work__media--ui {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(138, 107, 21, 0.08), transparent 70%),
    var(--ink-3);
}

[data-theme="light"] .cta {
  background:
    radial-gradient(60ch 34ch at 50% 120%, rgba(138, 107, 21, 0.14), transparent 70%),
    var(--ink-2);
}

[data-theme="light"] ::selection {
  background: #14130f;
  color: #f4f1ea;
}

/* The page grain is tuned for a dark ground; over cream it reads as dirt. */
[data-theme="light"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
}

/* Soft transition band, so the switch reads as a deliberate change of
   chapter rather than a hard seam. */
[data-theme="light"]::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 120px;
  z-index: -1;
  background: linear-gradient(180deg, #0b0b10, transparent);
  opacity: 0.16;
  pointer-events: none;
}

/* ==========================================================================
   17  MOTION REEL — circular rise, landing in a grid
   --------------------------------------------------------------------------
   The grid is the resting state and the layout authority. JavaScript displaces
   each card backwards onto a circular approach path by an amount that decays
   to zero as the pin is scrolled, so the finished state carries no transform.

   Consequences worth keeping: with no JavaScript, or under reduced motion, or
   below the desktop breakpoint, this is a plain grid of work — nothing is
   hidden waiting for an animation that may never run.
   ========================================================================== */

.reel {
  position: relative;
}

.reel__pin {
  display: grid;
  place-items: center;
}

.reel__stage {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
}

/* Oversized outlined wordmark behind the grid.
   Two lines: one nowrap line at display size is roughly twice the viewport
   width, so overflow clipping reduces it to an unreadable middle fragment. */
.reel__word {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  translate: 0 -50%;
  z-index: 0;
  display: grid;
  justify-items: center;
  font-size: clamp(2.6rem, 10.5vw, 9rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.82;
  text-align: center;
  color: rgba(242, 239, 232, 0.05);
  -webkit-text-stroke: 1.5px rgba(240, 223, 168, 0.28);
  paint-order: stroke fill;
  user-select: none;
  pointer-events: none;
}

.reel__guides {
  position: absolute;
  inset: -10% -12%;
  width: 124%;
  height: 120%;
  z-index: 0;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}

.reel__guides path {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* The arcs only earn their place while the cards are actually travelling
   along them. --guide is driven from JS alongside the card positions. */
.reel.is-live .reel__guides {
  opacity: var(--guide, 0);
}

.reel__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
  width: min(1240px, 92vw);
}

.reel__card {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--ink-3);
  box-shadow: var(--shadow);
  transition:
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
  /* JS writes transform and opacity here every frame while the pin is active.
     Six elements is a trivial per-frame cost, and unlike the shared-property
     trick each card needs its own angle on the ring. */
  will-change: transform, opacity;
}

.reel__card > picture {
  width: 100%;
  height: 100%;
}

.reel__card img,
.reel__card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Interface screenshots are shown whole inside a padded frame. A 1521x855
   screenshot cropped to a 16/10 tile loses its edges and stops being
   readable. */
.reel__card--ui {
  padding: clamp(8px, 1vw, 14px);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(201, 162, 39, 0.1), transparent 70%),
    var(--ink-3);
}

.reel__card--ui > picture {
  display: flex;
  align-items: center;
  justify-content: center;
}

.reel__card--ui img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 7px;
  box-shadow: var(--shadow);
}

.reel__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(240, 223, 168, 0.1),
    transparent 45%,
    rgba(8, 8, 11, 0.5)
  );
  pointer-events: none;
}

.reel__label {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  gap: 1px;
  padding: 12px 14px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-hi);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.reel__client {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--fg-2);
}

@media (hover: hover) {
  .reel__card:hover {
    border-color: var(--line-3);
    box-shadow: var(--shadow-lg);
  }
}

/* --- Pinned mode --------------------------------------------------------
   Desktop only, and only when motion is welcome. `--len` viewports of track
   with a full-height sticky panel inside it: the reference pins for about
   5.5 viewports, which is enough for the arc to read without the section
   feeling like a trap. */
@media (min-width: 861px) {
  @media (prefers-reduced-motion: no-preference) {
    .reel {
      height: calc(var(--len, 5) * 100vh);
    }

    .reel__pin {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
    }
  }
}

/* Stacked: a plain two-column grid. The circular approach needs width to
   read, and a pinned section on a phone costs more than it gives. */
@media (max-width: 860px) {
  .reel__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(1240px, 100% - var(--gutter) * 2);
  }

  .reel__word {
    font-size: clamp(2.4rem, 15vw, 5rem);
  }

  .reel__guides {
    display: none;
  }
}

@media (max-width: 520px) {
  .reel__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Ambient video ------------------------------------------------------
   Plays only once scrolled into view, and never on reduced motion or a
   metered connection. `preload="none"` means the file is not fetched at all
   until then, so it costs nothing on first load. */

.vloop {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--ink-3);
  aspect-ratio: var(--ar, 16 / 9);
}

.vloop video,
.vloop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vloop__poster {
  position: absolute;
  inset: 0;
  transition: opacity 0.6s var(--ease);
}

.vloop.is-playing .vloop__poster {
  opacity: 0;
}

.vloop__badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
}

/* ==========================================================================
   18  SERVICE ORBIT — numbered arc selector
   --------------------------------------------------------------------------
   The Orionix device: an arc with numbered nodes along it, the active one
   marked by a dot, and the selected item's detail alongside. Node positions
   are computed at build time from the arc geometry, so the markup carries
   plain left/top percentages and no layout maths runs in the browser.
   ========================================================================== */

.orbit {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.orbit__rail {
  position: relative;
  aspect-ratio: 1 / 1.15;
  min-height: 340px;
}

/* The guide arc, drawn as SVG so the curve is exact. preserveAspectRatio is
   "none" because the node percentages are computed against the same
   non-uniform box, so both must stretch identically. */
.orbit__arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.orbit__arc path {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* One set of controls for every breakpoint. An earlier version had
   decorative spans on the arc plus a duplicate chip row for small screens;
   that left the arc unreachable by keyboard, and a source-order collision
   meant the chip row never displayed at all. */
.orbit__node {
  position: absolute;
  left: var(--nx);
  top: var(--ny);
  translate: -50% -50%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 14px 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  white-space: nowrap;
  color: var(--fg-3);
  transition:
    color var(--t) var(--ease),
    background-color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    transform var(--t) var(--ease);
}

@media (hover: hover) {
  .orbit__node:hover {
    color: var(--fg);
    border-color: var(--line);
  }
}

.orbit__num {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1;
  transition: color var(--t) var(--ease);
}

.orbit__name {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.012em;
}

.orbit__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
  opacity: 0;
  scale: 0.4;
  transition: opacity var(--t) var(--ease), scale var(--t) var(--ease);
}

.orbit__node[aria-selected="true"] {
  color: var(--fg);
  background: rgba(201, 162, 39, 0.1);
  border-color: var(--line-2);
  transform: scale(1.04);
}

.orbit__node[aria-selected="true"] .orbit__num {
  color: var(--gold-lite);
}

.orbit__node[aria-selected="true"] .orbit__dot {
  opacity: 1;
  scale: 1;
}

.orbit__panel {
  display: grid;
  gap: 18px;
  align-content: center;
}

.orbit__panel[hidden] {
  display: none;
}

.orbit__title {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.032em;
}

/* Stacked: the arc needs width to read as a curve, so the same buttons
   become a plain wrapped row and the guide line is dropped. */
@media (max-width: 940px) {
  .orbit {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .orbit__rail {
    position: static;
    aspect-ratio: auto;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 26px;
  }

  .orbit__arc {
    display: none;
  }

  .orbit__node {
    position: static;
    translate: none;
    transform: none;
    border-color: var(--line);
    background: var(--fill);
    padding: 8px 15px;
    gap: 9px;
  }

  .orbit__node[aria-selected="true"] {
    transform: none;
  }

  .orbit__num {
    font-size: 1rem;
  }
}

/* ==========================================================================
   19  INQUIRY SELECTOR — numbered type picker
   --------------------------------------------------------------------------
   The y-vision contact device: a stacked list of numbered, bordered options
   where the selected one inverts, driving a titled form alongside it.
   ========================================================================== */

.inquiry {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

@media (max-width: 940px) {
  .inquiry {
    grid-template-columns: minmax(0, 1fr);
  }
}

.inquiry__list {
  display: grid;
  gap: 10px;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

@media (max-width: 940px) {
  .inquiry__list {
    position: static;
  }
}

.inquiry__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  text-align: left;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--fill);
  color: var(--fg-3);
  transition:
    background-color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    color var(--t) var(--ease),
    transform var(--t-fast) var(--ease);
}

@media (hover: hover) {
  .inquiry__item:hover {
    color: var(--fg);
    border-color: var(--line-3);
  }
}

.inquiry__item[aria-selected="true"] {
  background: var(--fg);
  border-color: transparent;
  color: var(--ink);
  box-shadow: var(--shadow);
}

.inquiry__num {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}

.inquiry__label {
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.15;
}

.inquiry__cue {
  opacity: 0;
  translate: -6px 0;
  transition: opacity var(--t) var(--ease), translate var(--t) var(--ease);
}

.inquiry__item[aria-selected="true"] .inquiry__cue {
  opacity: 1;
  translate: 0 0;
}

.inquiry__head {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.inquiry__title {
  font-size: clamp(1.7rem, 4.4vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.038em;
  text-transform: uppercase;
  font-weight: 700;
}

.inquiry__meta {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.inquiry__form[hidden] {
  display: none;
}

/* ==========================================================================
   20  PORTFOLIO & LIGHTBOX
   ========================================================================== */

.pf-cat {
  border-top: 1px solid var(--line);
  padding-top: clamp(26px, 3vw, 44px);
  margin-top: clamp(34px, 4vw, 62px);
}

.pf-cat__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: baseline;
  gap: 20px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

@media (max-width: 700px) {
  .pf-cat__head {
    grid-template-columns: 1fr;
  }
}

/* Each tile is a button, not a link: it opens the full view in place rather
   than navigating away, so browsing a body of work stays one continuous
   gesture. */
.pf-tile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-3);
  aspect-ratio: 4 / 5;
  transition:
    border-color var(--t) var(--ease),
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

.pf-tile > picture {
  width: 100%;
  height: 100%;
}

.pf-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.9s var(--ease);
}

.pf-tile--ui {
  aspect-ratio: 4 / 3;
  padding: clamp(10px, 1.4vw, 16px);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(201, 162, 39, 0.1), transparent 70%),
    var(--ink-3);
}

.pf-tile--ui > picture {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pf-tile--ui img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: var(--shadow);
}

.pf-tile__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(8, 8, 11, 0.9));
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  pointer-events: none;
}

.pf-tile__meta {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 18px;
  display: grid;
  gap: 4px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  pointer-events: none;
}

.pf-tile__title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pf-tile__hint {
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-lite);
}

@media (hover: hover) {
  .pf-tile:hover {
    border-color: var(--line-3);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
  }
  .pf-tile:hover img {
    transform: scale(1.04);
  }
  .pf-tile:hover .pf-tile__veil,
  .pf-tile:hover .pf-tile__meta {
    opacity: 1;
  }
  .pf-tile:hover .pf-tile__meta {
    transform: none;
  }
}

/* Focus must reveal the caption too, or a keyboard user never sees it. */
.pf-tile:focus-visible .pf-tile__veil,
.pf-tile:focus-visible .pf-tile__meta {
  opacity: 1;
  transform: none;
}

/* --- Lightbox -----------------------------------------------------------
   The point of the whole page: artwork shown whole, at the largest tier the
   source supports, with nothing cropped. */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(10px, 2vh, 22px);
  padding: clamp(12px, 2.5vw, 28px);
  background: rgba(5, 5, 7, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--t) var(--ease),
    visibility 0s linear var(--t);
}

.lightbox.is-open {
  visibility: visible;
  opacity: 1;
  transition:
    opacity var(--t) var(--ease),
    visibility 0s linear 0s;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lightbox__counter {
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

.lightbox__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
  min-height: 0;
}

@media (max-width: 900px) {
  .lightbox__stage {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.lightbox__frame {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  height: 100%;
}

.lightbox__frame picture {
  display: block;
  max-height: 100%;
}

.lightbox__frame img {
  max-width: 100%;
  max-height: min(76vh, 900px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--ink-3);
  box-shadow: var(--shadow-lg);
}

.lightbox__info {
  display: grid;
  gap: 14px;
  align-content: center;
}

.lightbox__cat {
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-lite);
}

.lightbox__title {
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.lightbox__nav {
  display: flex;
  gap: 10px;
}

.lb-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--fill);
  color: var(--fg);
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.lb-btn:hover {
  background: rgba(201, 162, 39, 0.16);
  border-color: var(--line-3);
  transform: translateY(-2px);
}

.lb-btn svg {
  width: 17px;
  height: 17px;
}

/* Swipe hint on touch, where there are no visible arrow affordances. */
.lightbox__swipe {
  display: none;
  font-size: var(--fs-xs);
  color: var(--fg-4);
}

@media (hover: none) {
  .lightbox__swipe {
    display: block;
  }
}

/* ==========================================================================
   21  ORBIT SCROLL TRACK
   --------------------------------------------------------------------------
   Pins the orbit while the page scrolls past it, so the selection advances
   one service per segment — the Orionix behaviour, where progress through the
   list is the scroll itself rather than a click.

   The track is taller than the viewport; the panel inside is sticky. Height
   is `steps * 52vh`, which gives each service roughly half a screen of
   scrolling: long enough to register, short enough not to feel trapped.

   Only engaged at the width where the arc is actually laid out, and never
   under reduced motion — a pinned section that hijacks scroll length is
   exactly what someone with that preference set is asking to avoid.
   ========================================================================== */

.orbit-scroll {
  position: relative;
}

.orbit-scroll__pin {
  display: grid;
  align-content: center;
}

@media (min-width: 941px) {
  @media (prefers-reduced-motion: no-preference) {
    .orbit-scroll {
      height: calc(var(--steps, 6) * 44vh);
    }

    .orbit-scroll__pin {
      position: sticky;
      top: calc(var(--header-h) + 18px);
      min-height: min(74vh, 660px);
    }
  }
}