/* =========================================================================
   LGD — style.css
   Structure, components and section layout. Motion lives in animations.css,
   breakpoints in responsive.css. All colour/spacing comes from variables.css.
   ========================================================================= */

/* ------------------------------ 1. RESET ------------------------------ */

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

html, body {
  /* Both elements — mobile Safari invents a phantom horizontal scroll
     if this only sits on one of them. */
  overflow-x: hidden;
  max-width: 100%;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 6rem;
}

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

body {
  margin: 0;
  background: var(--color-black);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

p  { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

/* blockquote and figure both carry a UA margin (blockquote is 1em 40px).
   Left in place it makes each carousel slide wider than the track's 100%
   translation step, so every slide drifts further off-centre than the last. */
blockquote, figure, ol { margin: 0; padding: 0; }

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

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

::selection { background: var(--color-gold); color: var(--color-black); }

.skip-link {
  position: absolute;
  top: -100px; left: var(--gutter);
  z-index: 200;
  padding: 0.85rem 1.4rem;
  background: var(--color-gold);
  color: var(--color-black);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 0; }

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

/* --------------------------- 2. PRIMITIVES ---------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-nr); }

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

/* Hairline rule that fades out at both ends — used between sections. */
.section--ruled::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-24) 22%, var(--gold-24) 78%, transparent);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-mono);
  text-transform: lowercase;
  color: var(--color-gold-dim);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--color-gold);
  flex: none;
}
.eyebrow--spaced { margin-top: var(--space-md); }
.eyebrow--center::after {
  content: "";
  width: 26px; height: 1px;
  background: var(--color-gold);
  flex: none;
}

.section-head { max-width: 44ch; margin-bottom: var(--space-xl); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__title { font-size: var(--fs-h2); margin-top: var(--space-sm); }
.section-head__lede {
  margin-top: var(--space-md);
  font-size: var(--fs-body-lg);
  color: var(--text-secondary);
}

.gold { color: var(--color-gold); }
.gold-glow { color: var(--color-gold); text-shadow: var(--glow-text); }

/* Glass panel — the repeating surface of the whole site. */
.glass {
  position: relative;
  background:
    linear-gradient(160deg, var(--glass-bg) 0%, transparent 42%),
    var(--color-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  overflow: hidden;
}
/* Top-edge light catch. */
.glass::before {
  content: "";
  position: absolute;
  inset-inline: 12%; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-40), transparent);
  opacity: 0.8;
}

/* ----------------------------- 3. BUTTONS ----------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--color-white);
  --btn-bd: var(--gold-24);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.05rem 2rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

/* Gold wash that sweeps in from the left on hover. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-gold);
  transform: translateX(-101%);
  transition: transform var(--dur-mid) var(--ease-out);
}
.btn:hover::before,
.btn:focus-visible::before { transform: translateX(0); }
.btn:hover, .btn:focus-visible {
  color: var(--color-black);
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
}
.btn:active { transform: scale(0.975); }

.btn--primary {
  --btn-bg: var(--color-gold);
  --btn-fg: var(--color-black);
  --btn-bd: var(--color-gold);
  font-weight: 700;
}
.btn--primary::before { background: var(--color-white); }
.btn--primary:hover, .btn--primary:focus-visible { color: var(--color-black); }

.btn--ghost { --btn-bd: rgba(255,255,255,0.2); }

.btn--sm { padding: 0.72rem 1.35rem; font-size: 0.75rem; }

.btn__arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Text link with a gold underline that wipes in. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  color: var(--color-gold);
}
.link-arrow span {
  background-image: linear-gradient(var(--color-gold), var(--color-gold));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-mid) var(--ease-out);
}
.link-arrow:hover span { background-size: 100% 1px; }

/* ------------------------------ 4. LOADER ----------------------------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-items: center;
  background: var(--color-black);
  transition: opacity 0.55s var(--ease-out), visibility 0.55s;
}
.loader[hidden],
.loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader__inner { display: grid; place-items: center; gap: var(--space-md); }
.loader__mark { width: 96px; height: 96px; }
.loader__mark path,
.loader__mark circle,
.loader__mark rect { stroke: var(--color-gold); }
.loader__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-mono);
  color: var(--color-gold-dim);
  text-transform: lowercase;
}
.loader__bar {
  width: 148px; height: 2px;
  background: var(--gold-14);
  overflow: hidden;
  border-radius: var(--r-pill);
}
.loader__bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--color-gold);
  box-shadow: 0 0 12px var(--color-gold);
}

/* ------------------------------ 5. HEADER ----------------------------- */

.header {
  position: fixed;
  inset-inline: 0; top: 0;
  z-index: var(--z-header);
  transition:
    background var(--dur-mid) var(--ease-out),
    border-color var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--hairline);
}
.header.is-hidden { transform: translateY(-102%); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 1.1rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.brand__tag {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.42em;   /* the "d i g i t a l" treatment from the logo */
  text-transform: lowercase;
  color: var(--color-gold-dim);
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }
.nav__list { display: contents; }
.nav__link {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--text-secondary);
  padding-block: 0.4rem;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--color-white); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link--external::before {
  content: "↗";
  margin-right: 0.3rem;
  color: var(--color-gold-dim);
}

.header__actions { display: flex; align-items: center; gap: 0.7rem; }

/* EN / FR toggle pill */
.lang {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--gold-24);
  border-radius: var(--r-pill);
  background: var(--gold-04);
}
.lang__btn {
  padding: 0.34rem 0.72rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lang__btn[aria-pressed="true"] {
  background: var(--color-gold);
  color: var(--color-black);
  font-weight: 700;
}

/* Mobile menu trigger */
.burger {
  display: none;
  width: 42px; height: 42px;
  padding: 0;
  border: 1px solid var(--gold-24);
  border-radius: var(--r-pill);
  /* It is displayed as flex on mobile, and `place-items` sets justify-items,
     which flex ignores. So the bars were centred horizontally and stacked at
     the top of the circle. justify-content is the one flex actually uses on
     the main axis — here the vertical one, because the direction is column. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.burger i {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--color-white);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ------------------------------- 6. HERO ------------------------------ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(6.25rem, 11vh, 8.5rem) var(--space-lg);
  overflow: hidden;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: var(--z-canvas);
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.hero__canvas.is-live { opacity: 1; }

/* Pure-CSS ring shown before (or instead of) the WebGL canvas. */
.hero__ring-fallback {
  position: absolute;
  top: 46%; left: 50%;
  width: min(78vh, 74vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: var(--z-canvas);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 56%, var(--gold-14) 57%, transparent 59%),
    radial-gradient(circle, transparent 70%, var(--gold-08) 71%, transparent 73%),
    radial-gradient(circle, var(--gold-14) 0%, transparent 62%);
  filter: blur(0.4px);
  pointer-events: none;
}
.hero.webgl-live .hero__ring-fallback { opacity: 0.35; }

/* Vignette so type always wins over the background. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 0%, rgba(0,0,0,0.55) 62%, var(--color-black) 100%),
    linear-gradient(to top, var(--color-black) 2%, transparent 40%);
  pointer-events: none;
}

.hero__inner { position: relative; z-index: var(--z-content); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(1.75rem, 3.6vw, 3.75rem);
  align-items: center;
}

.hero__title {
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: var(--lh-tight);
  margin-top: var(--space-sm);
  /* A measure in ch scales with the font size, so the headline keeps the same
     three-line shape at every viewport instead of re-wrapping unpredictably.
     balance is switched off here so this measure is what decides the breaks. */
  max-width: 17ch;
  text-wrap: normal;
}
.hero__title em {
  font-style: normal;
  color: var(--color-gold);
  text-shadow: var(--glow-text);
}
.hero__subhead {
  max-width: 52ch;
  margin-top: var(--space-sm);
  font-size: var(--fs-body-lg);
  color: var(--text-secondary);
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* ---- hero portrait ---- */
.hero__media { position: relative; }

.hero__figure {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-panel);
  background: var(--color-surface);
  will-change: transform;
}
/* Blend the photo's base into the black page so it sits in the scene rather
   than on top of it, and warm the top edge toward the brand gold. */
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 42%),
    linear-gradient(200deg, var(--gold-14), transparent 52%);
  pointer-events: none;
}
.hero__figure-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  aspect-ratio: 3 / 4;
  /* Crops rather than overflows when the window is short. */
  max-height: 62vh;
  max-height: 62svh;
  filter: saturate(0.96) contrast(1.03);
}

/* A gold arc behind the portrait's head — the same circle motif as the icon
   mark and the halo already in the photograph. */
.hero__figure-ring {
  position: absolute;
  top: -14%; left: 50%;
  width: 96%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid var(--gold-40);
  box-shadow: 0 0 60px -10px var(--gold-40) inset;
  z-index: 2;
  pointer-events: none;
}

/* The single hero proof number. */
.hero__proof {
  display: grid;
  gap: 0.4rem;
  padding: var(--space-md);
  border-left: 2px solid var(--color-gold);
  background: linear-gradient(90deg, var(--gold-08), transparent 80%);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.hero__proof-value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-stat);
  line-height: 0.92;
  color: var(--color-gold);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.hero__proof-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--text-secondary);
}

/* Overlap the stat onto the portrait's lower-left corner — the editorial
   detail that stops the hero reading as two separate columns. */
@media (min-width: 1101px) {
  .hero__media .hero__proof {
    position: absolute;
    /* A fixed nudge, not a percentage: a percentage of the media column grows
       as the column shrinks relative to the text, and at ~1280px it pushed the
       card straight into the H1 and subhead. */
    left: -1.5rem;
    bottom: 8%;
    z-index: 3;
    max-width: min(300px, 86%);
    background:
      linear-gradient(90deg, var(--gold-14), transparent 85%),
      rgba(0, 0, 0, 0.84);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    box-shadow: var(--shadow-panel);
  }
}

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 2rem;
  transform: translateX(-50%);
  z-index: var(--z-content);
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: var(--tracking-mono);
  text-transform: lowercase;
  color: var(--text-muted);
}
.hero__scroll i {
  display: block;
  width: 1px; height: 42px;
  background: linear-gradient(var(--color-gold), transparent);
}

/* --------------------------- 7. PROOF STRIP --------------------------- */

.proof { padding-block: clamp(3rem, 6vw, 5rem); }
.proof__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.4rem);
}
.stat { padding: var(--space-md) var(--space-md) var(--space-lg); }
.stat__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 1.1rem + 3vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}
.stat__value sup {
  font-size: 0.44em;
  color: var(--color-gold);
  vertical-align: super;
  margin-left: 2px;
}
.stat__label {
  margin-top: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  line-height: 1.5;
  text-transform: lowercase;
  color: var(--text-secondary);
}

/* --------------------------- 8. TEAM SHOWCASE ------------------------- */

.showcase__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.85rem, 1.6vw, 1.5rem);
}

.shot {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-panel);
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
}
.shot:hover { border-color: var(--gold-40); box-shadow: var(--shadow-gold); }

.shot--tall { grid-column: span 4; }
.shot--wide { grid-column: span 8; }
.shot--half { grid-column: span 6; }

/* Aspect ratios matched to the real source files so nothing shifts on load. */
.shot--r34 { --shot-ratio: 3 / 4; }
.shot--r58 { --shot-ratio: 5 / 8; }
.shot--r32 { --shot-ratio: 3 / 2; }

.shot__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: var(--shot-ratio, 4 / 3);
  filter: saturate(0.92) contrast(1.04);
  transform: scale(1.02);
  transition: transform 1.1s var(--ease-out), filter var(--dur-slow) var(--ease-out);
}
.shot:hover .shot__img { transform: scale(1.06); filter: saturate(1.05) contrast(1.06); }

/* Gold light-ray sweep on scroll-into-view (driven by .is-revealed). */
.shot__ray {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, var(--gold-40) 50%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
  mix-blend-mode: screen;
}

.shot__caption {
  position: absolute;
  inset-inline: 0; bottom: 0;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: linear-gradient(to top, rgba(0,0,0,0.92), transparent);
}
.shot__role {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--color-gold);
}
.shot__title { font-size: var(--fs-h4); margin-top: 0.3rem; }

/* ---------------------------- 9. SERVICES ----------------------------- */

.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(0.85rem, 1.5vw, 1.4rem);
}

.service {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  min-height: 268px;
  transform-style: preserve-3d;
  will-change: transform;
  transition: border-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.service:hover { border-color: var(--gold-40); box-shadow: var(--shadow-gold); }

/* Radial gold bloom that follows the pointer (--mx/--my set in services.js). */
.service::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), var(--gold-14), transparent 72%);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
  pointer-events: none;
}
.service:hover::after { opacity: 1; }

.service__index {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--color-gold-dim);
}
.service__icon {
  width: 40px; height: 40px;
  color: var(--color-gold);
  margin-bottom: 0.2rem;
}
.service__icon svg { width: 100%; height: 100%; }
.service__title { font-size: var(--fs-h4); font-weight: 800; }
.service__copy { color: var(--text-secondary); font-size: var(--fs-small); flex: 1; }
.service__cta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.service__cta-arrow { transition: transform var(--dur-fast) var(--ease-out); }
.service:hover .service__cta-arrow { transform: translateX(5px); }

/* Whole card is clickable, but the real <a> stays crawlable. */
.service__link::before { content: ""; position: absolute; inset: 0; z-index: 3; }

/* ------------------------ 10. 3-IN-1 SYSTEM --------------------------- */

.system { position: relative; }
.system__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.system__diagram {
  position: relative;
  aspect-ratio: 1;
  width: min(100%, 520px);
  margin-inline: auto;
}
.system__diagram svg { width: 100%; height: 100%; overflow: visible; }

.system__list { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }
.system__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: start;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--color-surface);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.system__item:hover, .system__item.is-active {
  border-color: var(--gold-40);
  background: linear-gradient(90deg, var(--gold-08), transparent);
}
.system__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--color-gold);
  padding-top: 0.35rem;
}
.system__item h3 { font-size: 1.06rem; font-weight: 700; letter-spacing: -0.01em; }
.system__item p { font-size: var(--fs-small); color: var(--text-secondary); margin-top: 0.25rem; }

/* -------------------------- 11. TESTIMONIALS -------------------------- */

.quotes__viewport { position: relative; overflow: hidden; }
.quotes__track {
  display: flex;
  transition: transform 0.75s var(--ease-out);
  will-change: transform;
}
.quote {
  flex: 0 0 100%;
  margin: 0;               /* never let a UA margin desync the track step */
  max-width: 100%;
  min-width: 0;
  padding: clamp(1.8rem, 4vw, 3.4rem);
  display: grid;
  gap: var(--space-md);
}
.quote__stars { display: flex; gap: 0.28rem; color: var(--color-gold); }
.quote__stars svg { width: 17px; height: 17px; }
.quote__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 0.9rem + 1.2vw, 1.85rem);
  line-height: 1.42;
  letter-spacing: -0.02em;
}
.quote__text::before { content: "“"; color: var(--color-gold); margin-right: 0.1em; }
.quote__text::after  { content: "”"; color: var(--color-gold); }
.quote__author { display: flex; align-items: center; gap: var(--space-sm); }
.quote__avatar {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold-40);
  background: var(--gold-08);
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-gold);
}
.quote__name { font-weight: 600; }
.quote__meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  color: var(--text-muted);
  text-transform: lowercase;
}

.quotes__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.quotes__dots { display: flex; gap: 0.5rem; }
.quotes__dot {
  width: 26px; height: 3px;
  border-radius: var(--r-pill);
  background: var(--hairline);
  transition: background var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out);
}
.quotes__dot[aria-selected="true"] { background: var(--color-gold); width: 44px; }
.quotes__arrows { display: flex; gap: 0.5rem; }
.quotes__arrow {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold-24);
  border-radius: 50%;
  color: var(--color-white);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.quotes__arrow:hover { background: var(--color-gold); color: var(--color-black); border-color: var(--color-gold); }

/* --------------------------- 12. ACADEMY BAND ------------------------- */

.academy { position: relative; overflow: hidden; }
.academy__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 4.5vw, 4rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--gold-24);
  background:
    radial-gradient(90% 120% at 92% 10%, var(--gold-14), transparent 58%),
    var(--color-surface-2);
  overflow: hidden;
}
.academy__panel::after {
  content: "";
  position: absolute;
  right: -12%; top: -34%;
  width: 62%; aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--gold-24);
  pointer-events: none;
}
.academy__title { font-size: var(--fs-h2); margin-top: var(--space-sm); }
.academy__copy { margin-top: var(--space-md); color: var(--text-secondary); font-size: var(--fs-body-lg); }
.academy__points { display: grid; gap: 0.75rem; }
.academy__point {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.academy__point::before { content: "◆"; color: var(--color-gold); font-size: 0.6em; }
.academy__cta { margin-top: var(--space-lg); }

/* ------------------------------ 13. CTA BAND -------------------------- */

.cta-band { text-align: center; }
.cta-band__title { font-size: var(--fs-h2); margin-top: var(--space-sm); }
.cta-band__copy {
  max-width: 46ch;
  margin: var(--space-md) auto 0;
  color: var(--text-secondary);
  font-size: var(--fs-body-lg);
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}

/* ------------------------------ 14. FOOTER ---------------------------- */

.footer {
  position: relative;
  background: var(--color-black);
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-2xl) var(--space-lg);
}
/* Animated gold sweep along the very top edge. */
.footer__sweep {
  position: absolute;
  inset-inline: 0; top: -1px;
  height: 1px;
  overflow: hidden;
}
.footer__sweep i {
  position: absolute;
  top: 0; left: 0;
  width: 34%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 3.5vw, 3.4rem);
}
.footer__blurb {
  margin-top: var(--space-md);
  max-width: 34ch;
  color: var(--text-secondary);
  font-size: var(--fs-small);
}
.footer__heading {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: var(--tracking-mono);
  text-transform: lowercase;
  color: var(--color-gold-dim);
  margin-bottom: var(--space-sm);
}
.footer__links { display: grid; gap: 0.62rem; }
.footer__links a { font-size: var(--fs-small); color: var(--text-secondary); }
.footer__links a:hover { color: var(--color-gold); }

.footer__contact { display: grid; gap: 0.62rem; font-size: var(--fs-small); }
.footer__contact a { color: var(--text-secondary); }
.footer__contact a:hover { color: var(--color-gold); }
.footer__contact address { font-style: normal; color: var(--text-secondary); }

.footer__heading--spaced { margin-top: var(--space-lg); }
.footer__hours {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}

.newsletter { margin-top: var(--space-md); }
.newsletter__row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.7rem;
}
/* Without min-width:0 the input's intrinsic width forces the row wider
   than its grid column. */
.newsletter__row > * { min-width: 0; }
.newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-small);
}
.newsletter__input::placeholder { color: var(--text-muted); }
.newsletter__input:focus { border-color: var(--color-gold); outline: none; }
.newsletter__submit { flex: 0 0 auto; }
.newsletter__note {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  min-height: 1.1em;
}
.newsletter__note.is-ok { color: var(--color-gold); }

.socials { display: flex; gap: 0.5rem; margin-top: var(--space-md); }
.socials a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease-out);
}
.socials a:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: translateY(-2px);
}
.socials svg { width: 16px; height: 16px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.footer__legal a:hover { color: var(--color-gold); }

/* ------------------------- 15. SCROLL-TO-TOP -------------------------- */

.to-top {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: var(--z-totop);
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-black);
  border: 1px solid var(--gold-40);
  color: var(--color-gold);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.9);
  transition:
    opacity var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-out),
    visibility var(--dur-mid),
    box-shadow var(--dur-mid) var(--ease-out);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.to-top:hover { box-shadow: 0 0 0 1px var(--color-gold), 0 0 28px -4px var(--gold-64); }
/* Scoped to the arrow only. Written as `.to-top svg` it also matched the
   progress ring, which is absolutely positioned by `inset` — an explicit width
   overrides that, so the ring collapsed to 20px and sat in the top-left corner
   instead of tracing the button's edge. */
.to-top > svg:not(.to-top__ring) { width: 20px; height: 20px; }
/* Gold progress ring reading scroll position. */
.to-top__ring {
  /* inset:0 plus 100%/100% keeps the SVG box exactly congruent with the
     button. The circle sits at r=26 in a 54 viewBox, so it traces just inside
     the border without any negative-inset arithmetic to get wrong. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
  overflow: visible;
}
.to-top__ring circle {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 1.5;
  stroke-dasharray: 163;
  stroke-dashoffset: calc(163 - (163 * var(--progress, 0)));
  opacity: 0.85;
}

/* --------------------------- 16. CUSTOM CURSOR ------------------------ */

.cursor, .cursor-dot {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.cursor {
  width: 34px; height: 34px;
  border: 1px solid var(--gold-64);
  margin: -17px 0 0 -17px;
  transition:
    opacity 0.3s var(--ease-out),
    width 0.28s var(--ease-out),
    height 0.28s var(--ease-out),
    margin 0.28s var(--ease-out),
    background 0.28s var(--ease-out),
    border-color 0.28s var(--ease-out);
}
.cursor-dot {
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  background: var(--color-gold);
}
.cursor.is-active, .cursor-dot.is-active { opacity: 1; }
.cursor.is-hovering {
  width: 62px; height: 62px;
  margin: -31px 0 0 -31px;
  background: var(--gold-14);
  border-color: var(--color-gold);
}

/* ---------------------- 17. AMBIENT BACKGROUND ------------------------ */

.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 42% at 12% 8%,  var(--gold-04), transparent 62%),
    radial-gradient(48% 38% at 88% 62%, var(--gold-04), transparent 62%);
}
/* Faint grain so large black fields don't band on cheap panels. */
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.045;
  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='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================================
   18. INTERIOR PAGE COMPONENTS
   Built for /services/ but deliberately generic — Work, Blog, About and
   Contact should reuse these rather than inventing new ones. Nothing here
   introduces a colour or size that is not already in variables.css.
   ========================================================================= */

/* ---- Compact hero for interior pages (the homepage keeps .hero) -------- */
.page-hero {
  position: relative;
  padding-block: clamp(8.5rem, 16vh, 11.5rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.page-hero::after {                    /* the ring motif, kept quiet here */
  content: "";
  position: absolute;
  top: -46%; right: -14%;
  width: min(760px, 68vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--gold-14);
  background: radial-gradient(circle, var(--gold-04), transparent 62%);
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: var(--z-content); }
.page-hero__title {
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: var(--lh-tight);
  margin-top: var(--space-sm);
  max-width: 18ch;
  text-wrap: normal;
}
.page-hero__title em { font-style: normal; color: var(--color-gold); text-shadow: var(--glow-text); }
.page-hero__lede {
  max-width: 60ch;
  margin-top: var(--space-md);
  font-size: var(--fs-body-lg);
  color: var(--text-secondary);
}
.page-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

/* ---- Breadcrumb ------------------------------------------------------- */
.crumbs { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--color-gold); }
.crumbs li + li::before { content: "/"; margin-right: 0.55rem; color: var(--gold-40); }
.crumbs [aria-current="page"] { color: var(--color-gold-dim); }

/* ---- Inline mini stats (no card chrome) ------------------------------- */
.mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline);
}
.mini-stat__v {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 1.2rem + 1.9vw, 2.9rem);
  line-height: 1;
  color: var(--color-gold);
  letter-spacing: -0.04em;
}
.mini-stat__l {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  max-width: 22ch;
}

/* ---- Highlight band (the "start with the 3-IN-1" callout) ------------- */
.band {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.8rem, 4vw, 3.2rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--gold-24);
  background:
    radial-gradient(80% 130% at 8% 12%, var(--gold-14), transparent 58%),
    var(--color-surface-2);
}
.band__title { font-size: var(--fs-h3); margin-top: 0.75rem; }
.band__copy { margin-top: var(--space-sm); color: var(--text-secondary); }
.band__side { display: grid; justify-items: start; gap: var(--space-sm); }

/* ---- Offer card: an image-led service card ---------------------------- */
.offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.5rem);
}
.offer {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  transition: border-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.offer:hover { border-color: var(--gold-40); box-shadow: var(--shadow-gold); }

.offer__media { position: relative; overflow: hidden; }
.offer__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.offer:hover .offer__img { transform: scale(1.05); }
.offer__media::after {                 /* fade the art into the card body */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-surface) 2%, transparent 58%);
  pointer-events: none;
}
.offer__badge {
  position: absolute;
  top: var(--space-sm); left: var(--space-sm);
  z-index: 2;
  padding: 0.34rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--color-gold);
  color: var(--color-black);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: lowercase;
}

.offer__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-sm);
  padding: var(--space-md);
}
.offer__index {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--color-gold-dim);
}
.offer__title { font-size: var(--fs-h4); font-weight: 800; }
.offer__title a::before { content: ""; position: absolute; inset: 0; z-index: 3; }
.offer__out { color: var(--text-secondary); font-size: var(--fs-small); }
.offer__list { display: grid; gap: 0.5rem; margin-top: auto; padding-top: var(--space-xs); }
.offer__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: start;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.offer__list li::before { content: "◆"; color: var(--color-gold); font-size: 0.55em; line-height: 2.4; }
.offer__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: lowercase;
  color: var(--color-gold);
}
.offer__cta-arrow { transition: transform var(--dur-fast) var(--ease-out); }
.offer:hover .offer__cta-arrow { transform: translateX(5px); }

/* ---- Process steps ---------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
  counter-reset: step;
}
.step { position: relative; padding-top: var(--space-md); }
.step::before {                        /* the rail every step hangs from */
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 1px;
  background: var(--hairline);
}
.step::after {                         /* gold segment marking this step */
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 38px; height: 1px;
  background: var(--color-gold);
  box-shadow: 0 0 10px var(--gold-64);
}
.step__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--color-gold-dim);
}
.step__title { font-size: var(--fs-h4); margin-top: 0.55rem; }
.step__copy { margin-top: 0.6rem; color: var(--text-secondary); font-size: var(--fs-small); }

/* ---- Difference list -------------------------------------------------- */
.diffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.4rem); }
.diff { padding: var(--space-md); }
.diff__mark {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold-40);
  color: var(--color-gold);
  font-size: 0.85rem;
  margin-bottom: var(--space-sm);
}
.diff__title { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; }
.diff__copy { margin-top: 0.45rem; font-size: var(--fs-small); color: var(--text-secondary); }

/* ---- FAQ accordion ----------------------------------------------------
   Native <details>/<summary>: open/closed state, keyboard support and the
   answer text all exist without JavaScript, so the FAQ is crawlable and
   usable even if scripts never run. ----------------------------------- */
.faq { display: grid; gap: 0; max-width: 62rem; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__item:first-child { border-top: 1px solid var(--hairline); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.2rem);
  letter-spacing: -0.015em;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--color-gold); }
.faq__icon {
  position: relative;
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--gold-40);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 1.5px;
  background: var(--color-gold);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-mid) var(--ease-out), background var(--dur-fast);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--color-gold); transform: rotate(180deg); }
.faq__item[open] .faq__icon::before,
.faq__item[open] .faq__icon::after { background: var(--color-black); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a {
  padding-bottom: var(--space-md);
  max-width: 68ch;
  color: var(--text-secondary);
}

/* =========================================================================
   19. WORK / PORTFOLIO COMPONENTS
   Each case card carries its CLIENT's brand colour on the media panel only.
   Everything else — type, buttons, metric values — stays on LGD's own gold,
   so eight different brands can sit on one page without it fragmenting.
   ========================================================================= */

/* ---- CLIENT BRAND COLOURS — THE ONLY PLACE TO EDIT THEM ---------------
   Four variables per client, because a brand is rarely one colour:
     --brand    accent used on the tag pill (sits on the DARK card body)
     --panel-1  gradient start on the media panel
     --panel-2  gradient end
     --ink      the client name set over that panel
   Clients whose brand lives on WHITE get .case--light as well, which flips
   the panel veil and the ring overlay so dark ink stays readable.
   -------------------------------------------------------------------- */
.case--mies {
  --brand: #7AC143; --panel-1: #172C3E; --panel-2: #0A141C; --ink: #FFFFFF;
}
.case--beyondafrica {
  --brand: #CC1C2B; --panel-1: #CC1C2B; --panel-2: #0D0D0D; --ink: #FFFFFF;
}
.case--suncity {           /* brand lives on white: gold + blue */
  --brand: #DD9600; --panel-1: #FFFFFF; --panel-2: #E8ECF6; --ink: #1B4FD8;
}
.case--ngalim {            /* brand lives on white: red + near-black */
  --brand: #C00804; --panel-1: #FFFFFF; --panel-2: #EFE8E8; --ink: #1F0A0C;
}
.case--hospitality {       /* unbranded product — neutral graphite, no identity */
  --brand: #9AA5A2; --panel-1: #26302E; --panel-2: #0D1211; --ink: #FFFFFF;
}
.case--royalstitches {     /* gold wordmark on near-black */
  --brand: #E0B93F; --panel-1: #F0DC6E; --panel-2: #B48228; --ink: #2A2008;
}
.case--onepercent {
  --brand: #DC1E32; --panel-1: #DC1E32; --panel-2: #2A0409; --ink: #FFFFFF;
}
.case--bag {
  --brand: #BE823C; --panel-1: #322864; --panel-2: #BE823C; --ink: #FFFFFF;
}

/* ---- Filter bar ------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-lg);
}
.filter {
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease-out);
}
.filter:hover { border-color: var(--gold-40); color: var(--color-white); }
.filter[aria-pressed="true"] {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-black);
  font-weight: 700;
}
.filters__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* ---- Case grid -------------------------------------------------------- */
.cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1rem, 1.8vw, 1.6rem);
}
.case {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  transition: border-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.case:hover { border-color: var(--gold-40); box-shadow: var(--shadow-gold); }
.case[hidden] { display: none; }

/* ---- Media panel: the client's colour, and the only place it appears -- */
.case__media {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 22% 12%, var(--panel-1) 0%, var(--panel-2) 72%);
  /* Sizes .case__mono against the CARD, not the viewport — a long name like
     "Hospitality BMS" overflowed when the size was tied to vw. */
  container-type: inline-size;
}
/* Concentric rings — the LGD circle motif, tinted by the client's panel. */
.case__media::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 150%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, var(--ring, rgba(255,255,255,0.13)) 0 1px, transparent 1px 34px);
  opacity: 0.85;
  transition: transform 1.2s var(--ease-out);
}
.case:hover .case__media::before { transform: translate(-50%, -50%) scale(1.09); }
/* Darken the base so white type stays readable over any client colour. */
.case__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--veil, linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0.12) 62%));
  pointer-events: none;
}

/* Light-panel clients: veil and rings invert so dark ink keeps its contrast. */
.case--light {
  --ring: rgba(0, 0, 0, 0.10);
  --veil: linear-gradient(to top, rgba(255,255,255,0.55), rgba(255,255,255,0.05) 62%);
}

.case__mono {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem);   /* fallback */
  font-size: clamp(1.5rem, 12cqw, 3.4rem);           /* scales with the card */
  line-height: 0.92;
  letter-spacing: -0.05em;
  text-align: center;
  text-wrap: balance;
  max-width: 100%;
  color: var(--ink, #FFFFFF);
  text-shadow: 0 6px 34px rgba(0, 0, 0, 0.35);
  padding-inline: var(--space-md);
}
.case--light .case__mono { text-shadow: 0 4px 22px rgba(0, 0, 0, 0.12); }
/* Names with a single long word ("Achievements") cannot wrap their way out of
   an overflow, so they get their own smaller step. */
.case__mono--long {
  font-size: clamp(1.5rem, 2.2vw, 2.4rem);   /* fallback */
  font-size: clamp(1.15rem, 9cqw, 2.6rem);
}
/* Client logo sits in a chip carrying its own background, so light-on-white
   and gold-on-black marks both stay legible. */
.case__logo {
  position: absolute;
  z-index: 2;
  top: var(--space-sm); left: var(--space-sm);
  width: 62px; height: 62px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.7);
}
.case__logo img { width: 100%; height: 100%; object-fit: cover; }

.case__window {
  position: absolute;
  z-index: 2;
  right: var(--space-sm); bottom: var(--space-sm);
  padding: 0.34rem 0.72rem;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--color-white);
}

/* ---- Case body -------------------------------------------------------- */
.case__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-sm);
  padding: var(--space-md);
}
.case__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.case__tag {
  padding: 0.26rem 0.6rem;
  border: 1px solid var(--gold-24);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: lowercase;
  color: var(--color-gold-dim);
}
.case__tag--brand { border-color: var(--brand); color: var(--brand); }
/* A brand colour picked for white backgrounds (e.g. #C00804) is close to
   unreadable on the dark card body, so it is mixed toward white for the pill
   only. The panel above still shows the true, unmodified colour. */
@supports (color: color-mix(in srgb, red, white)) {
  .case__tag--brand {
    color: color-mix(in srgb, var(--brand) 58%, #FFFFFF);
    border-color: color-mix(in srgb, var(--brand) 72%, transparent);
  }
}
.case__title { font-size: var(--fs-h4); font-weight: 800; }
.case__sector {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  color: var(--text-muted);
}
.case__copy { font-size: var(--fs-small); color: var(--text-secondary); }
.case__foot { margin-top: auto; padding-top: var(--space-sm); border-top: 1px solid var(--hairline); }
.case__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--color-gold);
}
.case__link::after { content: "↗"; transition: transform var(--dur-fast) var(--ease-out); }
.case:hover .case__link::after { transform: translate(3px, -3px); }
.case__link--internal::after { content: "→"; }
.case:hover .case__link--internal::after { transform: translateX(4px); }
/* Whole card clickable — but ONLY when there is a single link. A card with
   two actions (demo + contact) must not have one of them swallow the card. */
.case__foot > .case__link:only-child::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}
.case__foot--dual { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }

/* ---- Campaign metrics inside a card ----------------------------------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  padding-top: var(--space-xs);
}
.metric {
  padding: var(--space-sm);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--gold-04);
}
.metric__v {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
}
.metric__l {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  line-height: 1.45;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

/* ---- Benchmark band --------------------------------------------------- */
.bench { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-md); margin-top: var(--space-lg); }
.bench__v {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-white);
}
.bench__l {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  max-width: 24ch;
}
.note {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border-left: 2px solid var(--color-gold-dim);
  background: var(--gold-04);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

/* Slim band holding the work filter controls. Kept out of the filterable
   sections so the controls can never hide themselves. */
.filterbar { position: relative; padding-block: clamp(2.2rem, 4.5vw, 3.4rem) 0; }
.filterbar .filters { margin-bottom: 0; }

/* =========================================================================
   20. ABOUT / NARRATIVE COMPONENTS
   Long-form story blocks, a pull quote and the team grid. Generic enough to
   reuse on case-study pages later.
   ========================================================================= */

/* ---- Chapters: a mono key in the margin, prose in the measure ---------- */
.chapters {
  display: grid;
  gap: clamp(2rem, 4vw, 3.4rem);
  max-width: 62rem;
}
.chapter {
  display: grid;
  grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline);
}
.chapter__key {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--color-gold);
  padding-top: 0.35rem;
}
.chapter__title {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.chapter__copy {
  margin-top: var(--space-sm);
  color: var(--text-secondary);
  font-size: var(--fs-body);
  max-width: 60ch;
}

/* ---- Pull quote ------------------------------------------------------- */
.pullquote {
  position: relative;
  max-width: 42rem;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.6rem, 3.5vw, 3rem);
  border-left: 2px solid var(--color-gold);
  background: linear-gradient(90deg, var(--gold-08), transparent 80%);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.pullquote__text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.2rem, 1rem + 1.1vw, 1.85rem);
  line-height: 1.4;
  letter-spacing: -0.025em;
}
.pullquote__text::before { content: "“"; color: var(--color-gold); }
.pullquote__text::after  { content: "”"; color: var(--color-gold); }
.pullquote__by {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--color-gold-dim);
}

/* ---- Team ------------------------------------------------------------- */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.person {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  transition: border-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.person:hover { border-color: var(--gold-40); box-shadow: var(--shadow-gold); }
.person__media { position: relative; overflow: hidden; }
.person__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: filter var(--dur-slow) var(--ease-out), transform 1s var(--ease-out);
}
/* Desaturation applies to PHOTOGRAPHS only, via .person--photo. It unifies
   portraits shot in different light — but applied to the gold monogram
   placeholders it would drain the brand colour straight out of them. */
.person--photo .person__img { filter: grayscale(1) contrast(1.06); }
.person--photo:hover .person__img { filter: grayscale(0) contrast(1.02); }
.person:hover .person__img { transform: scale(1.04); }
.person__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 55%);
  pointer-events: none;
}
.person__body { padding: var(--space-md); display: grid; gap: 0.4rem; }
.person__name { font-size: 1.06rem; font-weight: 800; letter-spacing: -0.015em; }
.person__role {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.11em;
  text-transform: lowercase;
  color: var(--color-gold);
}
.person__copy { font-size: var(--fs-small); color: var(--text-secondary); margin-top: 0.35rem; }

/* ---- Career track record ---------------------------------------------
   A dated role list. Years stay in the markup rather than the dictionary —
   dates and organisation names are the same in both languages. */
.track { display: grid; max-width: 62rem; }
.track__item {
  display: grid;
  grid-template-columns: minmax(0, 0.26fr) minmax(0, 1fr);
  gap: clamp(0.8rem, 2.5vw, 2.2rem);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--hairline);
  transition: background var(--dur-fast) var(--ease-out);
}
.track__item:last-child { border-bottom: 1px solid var(--hairline); }
.track__when {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  padding-top: 0.2rem;
  white-space: nowrap;
}
.track__now {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.42rem;
  border-radius: var(--r-pill);
  background: var(--gold-14);
  border: 1px solid var(--gold-40);
  font-size: 0.58rem;
  color: var(--color-gold);
}
.track__role { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em; }
.track__org {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}
.track__copy { margin-top: 0.5rem; font-size: var(--fs-small); color: var(--text-secondary); max-width: 58ch; }

/* ---- Credentials strip ------------------------------------------------ */
.creds { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.4rem); margin-top: var(--space-lg); }
.cred { padding: var(--space-md); }
.cred__by {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--color-gold);
}
.cred__t { margin-top: 0.5rem; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.cred__c { margin-top: 0.45rem; font-size: var(--fs-small); color: var(--text-secondary); }
.cred__when {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* =========================================================================
   21. CONTACT + MEDIA COMPONENTS
   ========================================================================= */

/* ---- Contact channel cards -------------------------------------------- */
.channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.4rem); }
.channel { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); }
.channel__icon { width: 34px; height: 34px; color: var(--color-gold); }
.channel__icon svg { width: 100%; height: 100%; }
.channel__title { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.015em; }
.channel__value {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-white);
  word-break: break-word;
}
.channel__copy { font-size: var(--fs-small); color: var(--text-secondary); flex: 1; }
.channel__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--color-gold);
}
.channel__cta::after { content: "→"; transition: transform var(--dur-fast) var(--ease-out); }
.channel:hover .channel__cta::after { transform: translateX(4px); }
.channel > a.channel__cta::before { content: ""; position: absolute; inset: 0; z-index: 3; }

/* ---- Form ------------------------------------------------------------- */
.form { max-width: 46rem; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.form__grid > * { min-width: 0; }        /* stop intrinsic widths widening the row */
.field--wide { grid-column: 1 / -1; }
.field { display: grid; gap: 0.45rem; }
.field__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: lowercase;
  color: var(--text-secondary);
}
.field__opt { color: var(--text-muted); text-transform: none; letter-spacing: 0.06em; }
.field__input, .field__area, .field__select {
  width: 100%;
  min-width: 0;
  padding: 0.9rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.field__area { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.field__select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-gold) 50%),
                    linear-gradient(135deg, var(--color-gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}
.field__select option { background: var(--color-surface); color: var(--color-white); }
.field__input::placeholder, .field__area::placeholder { color: var(--text-muted); }
.field__input:focus, .field__area:focus, .field__select:focus {
  outline: none;
  border-color: var(--color-gold);
  background: var(--gold-04);
}
.field.is-invalid .field__input,
.field.is-invalid .field__area { border-color: #E5484D; }
.field__err { font-size: 0.74rem; color: #FF8A8D; min-height: 1em; }

.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.form__note {
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.form__status { margin-top: var(--space-sm); font-size: var(--fs-small); min-height: 1.3em; color: var(--color-gold); }

/* ---- Media pair (About) ----------------------------------------------- */
.media-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.media-pair figure { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--glass-border); background: var(--color-surface); }
.media-pair img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.media-pair figcaption { padding: var(--space-sm) var(--space-md) var(--space-md); font-size: var(--fs-small); color: var(--text-secondary); }

/* ---- Video facade -----------------------------------------------------
   Nothing is requested from YouTube until the visitor presses play: no
   player script, no cookies, no third-party cost on a page they may never
   watch. The <iframe> is created by js/video.js on click. */
.video { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--glass-border); background: var(--color-surface); }
.video__frame { position: relative; aspect-ratio: 16 / 9; width: 100%; }
.video__thumb { width: 100%; height: 100%; object-fit: cover; opacity: 0.62; }
.video__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, transparent, rgba(0,0,0,0.55));
  pointer-events: none;
}
.video__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: var(--space-sm);
  width: 100%;
  color: var(--color-white);
}
.video__disc {
  width: 78px; height: 78px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-black);
  box-shadow: 0 0 0 12px rgba(254, 213, 4, 0.14);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.video__play:hover .video__disc { transform: scale(1.07); box-shadow: 0 0 0 20px rgba(254, 213, 4, 0.18); }
.video__disc svg { width: 26px; height: 26px; margin-left: 4px; }
.video__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__note {
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.media-pair--spaced { margin-top: var(--space-xl); }
.section-head--video { margin-top: var(--space-2xl); margin-bottom: var(--space-md); max-width: 52ch; }

/* =========================================================================
   22. PRICED PACKAGE CARDS + CHECKLIST
   ========================================================================= */

.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.4rem); }
.pack { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg) var(--space-md) var(--space-md); }
.pack:hover { border-color: var(--gold-40); box-shadow: var(--shadow-gold); }
.pack__index { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em; color: var(--color-gold-dim); }
.pack__title { font-size: var(--fs-h4); font-weight: 800; }
.pack__price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-gold);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--hairline);
}
.pack__copy { font-size: var(--fs-small); color: var(--text-secondary); }
.pack__list { display: grid; gap: 0.5rem; margin-top: auto; padding-top: var(--space-sm); }
.pack__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: start;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.pack__list li::before { content: "◆"; color: var(--color-gold); font-size: 0.55em; line-height: 2.4; }
.pack__cta { margin-top: var(--space-md); }

/* ---- Two-column tick list -------------------------------------------- */
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); }
.checks li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: start;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.checks li::before {
  content: "";
  width: 18px; height: 18px;
  margin-top: 0.22em;
  border-radius: 50%;
  border: 1px solid var(--gold-40);
  background:
    linear-gradient(45deg, transparent 44%, var(--color-gold) 44%, var(--color-gold) 56%, transparent 56%) no-repeat 50% 62% / 9px 2px,
    linear-gradient(-45deg, transparent 44%, var(--color-gold) 44%, var(--color-gold) 56%, transparent 56%) no-repeat 46% 55% / 6px 2px;
}

/* =========================================================================
   23. CHARTS + TICKER
   Rendered by js/charts.js. Every colour is a design token; the charts are
   never allowed to introduce a hue the rest of the site does not use.
   ========================================================================= */

.chart {
  margin: 0;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  background:
    linear-gradient(160deg, var(--gold-04) 0%, transparent 42%),
    var(--color-surface);
  overflow: hidden;
}
.chart__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.chart__title { font-size: 1rem; font-weight: 800; letter-spacing: -0.015em; }
.chart__sub {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
/* The pulsing "live" pip, borrowed from a trading terminal. */
.chart__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--color-gold);
}
.chart__live::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-gold);
  animation: pip 1.8s var(--ease-soft) infinite;
}
@keyframes pip {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 var(--gold-40); }
  70%      { opacity: 0.6; box-shadow: 0 0 0 7px transparent; }
}

.chart__canvas { width: 100%; }
.chart__svg { width: 100%; height: auto; aspect-ratio: 820 / 340; overflow: visible; }

.chart__grid line { stroke: var(--hairline); stroke-width: 1; }
.chart__tick {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.chart__tick--right { fill: var(--color-gold-dim); }

.chart__marker { stroke: var(--gold-40); stroke-width: 1; stroke-dasharray: 4 4; }
.chart__marker-label {
  fill: var(--color-gold);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}

/* Series 0 = the headline metric in full gold, series 1 = the supporting
   metric in the dim gold. No third colour is ever needed. */
.chart__line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart__line--0 { stroke: var(--color-gold); filter: drop-shadow(0 0 6px rgba(254,213,4,0.45)); }
.chart__line--1 { stroke: var(--color-gold-dim); stroke-width: 2; }
.chart__area--0 { fill: var(--gold-14); }
.chart__area--1 { fill: var(--gold-04); }
.chart__dot--0 { fill: var(--color-gold); }
.chart__dot--1 { fill: var(--color-gold-dim); }
.chart__col--0 { fill: var(--color-gold); }
.chart__col--1 { fill: rgba(255, 255, 255, 0.13); }

/* ---- draw-on animation ------------------------------------------------ */
.chart.is-armed .chart__line { stroke-dasharray: 2200; stroke-dashoffset: 2200; }
.chart.is-armed .chart__area,
.chart.is-armed .chart__dot { opacity: 0; }
.chart.is-armed .chart__col { transform: scaleY(0); }

.chart__line.is-drawn { animation: draw-line 1.9s var(--ease-out) forwards; }
.chart__area.is-drawn { animation: fade-in 1.1s var(--ease-out) 0.5s forwards; }
.chart__dot.is-drawn  { animation: fade-in 0.5s var(--ease-out) 1.7s forwards, pip 2.2s var(--ease-soft) 2.2s infinite; }
.chart__col.is-drawn  { animation: grow-col 0.9s var(--ease-out) forwards; }
.chart__col--0.is-drawn { animation-delay: 0.25s; }

@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes fade-in   { to { opacity: 1; } }
@keyframes grow-col  { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-sm); }
.chart__key {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  color: var(--text-secondary);
}
.chart__key::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--color-gold); }
.chart__key--dim::before { background: var(--color-gold-dim); }
.chart__key--ghost::before { background: rgba(255,255,255,0.2); }
.chart__note {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--hairline);
  font-size: 0.74rem;
  color: var(--text-muted);
}

.charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }

/* ---- Ticker ----------------------------------------------------------- */
.ticker {
  display: flex;
  overflow: hidden;
  border-block: 1px solid var(--hairline);
  background: var(--color-surface);
  padding-block: 0.85rem;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__row {
  display: flex;
  flex: none;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  padding-inline: clamp(0.8rem, 2vw, 1.6rem);
  animation: ticker-run 38s linear infinite;
}
.ticker:hover .ticker__row { animation-play-state: paused; }
@keyframes ticker-run { to { transform: translateX(-100%); } }

.ticker__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.ticker__item b { color: var(--color-white); font-weight: 700; }
.ticker__up { color: var(--color-gold); }
.ticker__up::before { content: "▲ "; font-size: 0.8em; }

@media (prefers-reduced-motion: reduce) {
  .ticker__row { animation: none; }
  .chart__live::before, .chart__dot { animation: none !important; }
}

/* =========================================================================
   24. FUNNEL
   A narrowing bar per stage. Widths come from modifier classes rather than
   inline styles, so the shape stays editable in one place.
   ========================================================================= */

.funnel { display: grid; gap: var(--space-sm); max-width: 68rem; }
.funnel__stage {
  display: grid;
  grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr);
  gap: clamp(0.9rem, 2.5vw, 2.2rem);
  align-items: start;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--hairline);
}
.funnel__stage:last-child { border-bottom: 1px solid var(--hairline); }
.funnel__side { display: grid; gap: 0.6rem; }
.funnel__num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--color-gold-dim);
}
.funnel__bar {
  height: 10px;
  width: var(--w, 100%);
  min-width: 42px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-dim));
  box-shadow: 0 0 18px -4px var(--gold-64);
  transform-origin: left;
  transition: transform 0.9s var(--ease-out);
}
[data-reveal] .funnel__bar,
.funnel__stage[data-reveal] .funnel__bar { transform: scaleX(0); }
.funnel__stage.is-revealed .funnel__bar { transform: scaleX(1); }
.funnel__stage--w1 { --w: 100%; }
.funnel__stage--w2 { --w: 82%; }
.funnel__stage--w3 { --w: 62%; }
.funnel__stage--w4 { --w: 43%; }
.funnel__stage--w5 { --w: 26%; }

.funnel__title { font-size: var(--fs-h4); font-weight: 800; }
.funnel__copy { margin-top: 0.5rem; color: var(--text-secondary); font-size: var(--fs-small); max-width: 58ch; }
.funnel__metric {
  display: inline-block;
  margin-top: 0.7rem;
  padding: 0.28rem 0.68rem;
  border: 1px solid var(--gold-24);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: lowercase;
  color: var(--color-gold-dim);
}

/* Do / don't pair — used for the AI section */
.stance { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(0.9rem, 1.8vw, 1.5rem); }
.stance__panel { padding: var(--space-lg) var(--space-md) var(--space-md); }
.stance__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--color-gold);
}
.stance__panel--no .stance__tag { color: var(--text-muted); }
.stance__title { font-size: var(--fs-h4); font-weight: 800; margin-top: 0.6rem; }
.stance__list { display: grid; gap: 0.7rem; margin-top: var(--space-md); }
.stance__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-secondary);
}
.stance__list li::before { content: "✓"; color: var(--color-gold); font-size: 0.85em; line-height: 1.6; }
.stance__panel--no .stance__list li::before { content: "✕"; color: var(--text-muted); }

/* =========================================================================
   25. RISK LIST
   A failure and its consequence, paired. Used to make invisible backend work
   visible — the whole sales argument of the web management page.
   ========================================================================= */

.risks { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(0.8rem, 1.5vw, 1.2rem); }
.risk {
  padding: var(--space-md);
  border-left: 2px solid var(--color-gold-dim);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: linear-gradient(90deg, var(--gold-04), transparent 85%);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.risk:hover { border-left-color: var(--color-gold); background: linear-gradient(90deg, var(--gold-08), transparent 85%); }
.risk__t { font-size: 0.98rem; font-weight: 700; letter-spacing: -0.01em; }
.risk__c {
  display: block;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.risk__c b { color: var(--color-gold-dim); font-weight: 400; }

/* The softly-offered alternative: present, clearly marked, not shouted. */
.alt {
  position: relative;
  padding: clamp(1.8rem, 4vw, 3rem);
  border: 1px dashed var(--gold-40);
  border-radius: var(--r-xl);
  background: var(--color-surface);
}
.alt__tag {
  position: absolute;
  top: -0.7rem; left: clamp(1.5rem, 4vw, 2.6rem);
  padding: 0.25rem 0.8rem;
  border-radius: var(--r-pill);
  background: var(--color-black);
  border: 1px solid var(--gold-40);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--color-gold);
}
.alt__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.alt__title { font-size: var(--fs-h3); margin-top: 0.4rem; }
.alt__copy { margin-top: var(--space-sm); color: var(--text-secondary); }
.alt__list { display: grid; gap: 0.65rem; margin-top: var(--space-md); }
.alt__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.alt__list li::before { content: "◆"; color: var(--color-gold); font-size: 0.55em; line-height: 2.6; }
.alt__caveat {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* =========================================================================
   26. BLOG POST CARDS
   ========================================================================= */

.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(1rem, 1.8vw, 1.5rem); }
.post {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  transition: border-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.post:hover { border-color: var(--gold-40); box-shadow: var(--shadow-gold); }
.post[hidden] { display: none; }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.post__cat {
  padding: 0.24rem 0.62rem;
  border: 1px solid var(--gold-24);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--color-gold-dim);
}
.post__date {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}
.post__title { font-size: var(--fs-h4); font-weight: 800; }
.post__excerpt { font-size: var(--fs-small); color: var(--text-secondary); flex: 1; }
.post__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--color-gold);
}
.post__link::after { content: "→"; transition: transform var(--dur-fast) var(--ease-out); }
.post:hover .post__link::after { transform: translateX(4px); }
.post__link::before { content: ""; position: absolute; inset: 0; z-index: 3; }

/* Featured post: same card, given the full width and a bigger headline. */
.post--featured { grid-column: 1 / -1; }
.post--featured .post__title { font-size: var(--fs-h3); max-width: 22ch; }
.post--featured .post__excerpt { max-width: 62ch; font-size: var(--fs-body); }

/* =========================================================================
   27. PROSE
   Long-form body copy — WordPress post content, legal pages, anything where
   an editor produces raw HTML we do not control.

   This block exists because the global reset earlier in this file strips list
   markers and link underlines. That is correct for UI chrome and wrong for an
   article: a bulleted list inside a blog post must look like a bulleted list.
   Everything here is scoped to .prose so it can never leak back out.
   ========================================================================= */

.prose {
  max-width: 68ch;
  color: var(--text-secondary);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}
.prose > * + * { margin-top: var(--space-md); }

.prose h2, .prose h3, .prose h4 { color: var(--text-primary); }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--space-xl); }
.prose h3 { font-size: var(--fs-h4); margin-top: var(--space-lg); }
.prose h4 { font-size: 1.05rem; font-weight: 700; margin-top: var(--space-lg); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: var(--space-sm); }

.prose a {
  color: var(--color-gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.prose a:hover { text-decoration-thickness: 2px; }

.prose strong { color: var(--text-primary); font-weight: 600; }
.prose em { font-style: italic; }

.prose ul, .prose ol { padding-left: 1.35rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: 0.5rem; }
.prose li::marker { color: var(--color-gold); }
.prose ul ul, .prose ol ol { margin-top: 0.5rem; }

.prose blockquote {
  padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
  border-left: 2px solid var(--color-gold);
  background: linear-gradient(90deg, var(--gold-04), transparent 70%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.prose img, .prose figure img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
}
.prose figure { margin-block: var(--space-lg); }
.prose figcaption {
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.prose code {
  padding: 0.15em 0.4em;
  border-radius: 4px;
  background: var(--gold-08);
  border: 1px solid var(--gold-14);
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--color-gold);
}
.prose pre {
  padding: var(--space-md);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--color-surface);
  overflow-x: auto;
  font-size: 0.84rem;
  line-height: 1.6;
}
.prose pre code { padding: 0; background: none; border: 0; color: var(--text-primary); }

.prose hr { border: 0; border-top: 1px solid var(--hairline); margin-block: var(--space-xl); }

.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.prose th, .prose td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--hairline); text-align: left; }
.prose th { color: var(--text-primary); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: lowercase; }
.prose .wp-caption, .prose .wp-block-image { max-width: 100%; }

/* Article header, shared by single posts and legal pages. */
.article__head { max-width: 68ch; }
.article__title { font-size: var(--fs-h2); margin-top: var(--space-sm); }
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.article__body { margin-top: var(--space-xl); }

/* Numbered pagination for archives. */
.pager { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: var(--space-xl); }
.pager .page-numbers {
  display: grid;
  place-items: center;
  min-width: 44px; height: 44px;
  padding-inline: 0.8rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease-out);
}
.pager .page-numbers:hover { border-color: var(--gold-40); color: var(--color-white); }
.pager .page-numbers.current {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-black);
  font-weight: 700;
}

/* =========================================================================
   28. LEGAL PAGES
   Long documents with a sticky table of contents. The body uses .prose, so
   lists keep their markers and links keep their underlines.
   ========================================================================= */

.legal {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.legal__toc {
  position: sticky;
  top: 6.5rem;
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
  padding: var(--space-md);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  scrollbar-width: thin;
}
.legal__toc-title {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: var(--tracking-mono);
  text-transform: lowercase;
  color: var(--color-gold-dim);
  margin-bottom: var(--space-sm);
}
.legal__toc ol { display: grid; gap: 0.15rem; counter-reset: toc; }
.legal__toc a {
  display: block;
  padding: 0.4rem 0.55rem;
  border-radius: var(--r-sm);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.legal__toc a:hover { background: var(--gold-08); color: var(--color-white); }
.legal__toc a.is-current {
  background: var(--gold-14);
  color: var(--color-gold);
  box-shadow: inset 2px 0 0 var(--color-gold);
}

.legal__body h2 {
  scroll-margin-top: 6.5rem;      /* the fixed header must not cover the heading */
  padding-top: var(--space-lg);
  border-top: 1px solid var(--hairline);
}
.legal__body h2:first-child { padding-top: 0; border-top: 0; }

.legal__updated {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--gold-24);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--color-gold-dim);
}
.legal__notice {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border-left: 2px solid var(--color-gold-dim);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--gold-04);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

/* =========================================================================
   29. SHELL PAGES — WooCommerce, LatePoint, and anything using header.php
   These are pages whose HTML we do not control. We cannot restructure them,
   so we skin them: our tokens applied to their markup.

   Everything here is scoped to .lgd-shell, the body class header.php adds, so
   it can never affect the 18 fixed templates.
   ========================================================================= */

.lgd-shell__main { padding-top: var(--header-h, 5rem); }
.lgd-shell #content { background: var(--color-black); }
.lgd-shell .site-content > .ast-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* Astra's own page title block, when it appears */
.lgd-shell .entry-title, .lgd-shell .page-title { color: var(--text-primary); font-family: var(--font-display); }
.lgd-shell .entry-content { color: var(--text-secondary); }

/* ---- WooCommerce ------------------------------------------------------- */
.lgd-shell .woocommerce-message,
.lgd-shell .woocommerce-info,
.lgd-shell .woocommerce-error {
  border-top-color: var(--color-gold);
  background: var(--color-surface);
  color: var(--text-secondary);
}
.lgd-shell .woocommerce-message::before,
.lgd-shell .woocommerce-info::before { color: var(--color-gold); }

.lgd-shell .woocommerce ul.products li.product,
.lgd-shell .woocommerce div.product .summary,
.lgd-shell .woocommerce-cart-form,
.lgd-shell .cart_totals,
.lgd-shell .woocommerce-checkout-review-order,
.lgd-shell .woocommerce-MyAccount-navigation,
.lgd-shell .woocommerce-order {
  color: var(--text-secondary);
}
.lgd-shell .woocommerce ul.products li.product .woocommerce-loop-product__title,
.lgd-shell .woocommerce div.product .product_title,
.lgd-shell .woocommerce-MyAccount-content h2,
.lgd-shell .woocommerce h2, .lgd-shell .woocommerce h3 {
  color: var(--text-primary);
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.lgd-shell .woocommerce .price,
.lgd-shell .woocommerce div.product p.price,
.lgd-shell .woocommerce ul.products li.product .price {
  color: var(--color-gold);
  font-family: var(--font-display);
  font-weight: 800;
}
.lgd-shell .woocommerce .price del { color: var(--text-muted); }

/* Buttons — Woo has many, all get the LGD pill */
.lgd-shell .woocommerce #respond input#submit,
.lgd-shell .woocommerce a.button,
.lgd-shell .woocommerce button.button,
.lgd-shell .woocommerce input.button,
.lgd-shell .woocommerce a.button.alt,
.lgd-shell .woocommerce button.button.alt,
.lgd-shell .woocommerce input.button.alt {
  background: var(--color-gold);
  color: var(--color-black);
  border: 1px solid var(--color-gold);
  border-radius: var(--r-pill);
  padding: 0.85rem 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.lgd-shell .woocommerce a.button:hover,
.lgd-shell .woocommerce button.button:hover,
.lgd-shell .woocommerce input.button:hover,
.lgd-shell .woocommerce a.button.alt:hover,
.lgd-shell .woocommerce button.button.alt:hover {
  background: var(--color-gold);
  color: var(--color-black);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

/* Form fields — checkout is the one that must never look broken */
.lgd-shell .woocommerce form .form-row input.input-text,
.lgd-shell .woocommerce form .form-row textarea,
.lgd-shell .woocommerce form .form-row select,
.lgd-shell .select2-container .select2-selection--single {
  background: var(--color-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  color: var(--color-white);
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
}
.lgd-shell .woocommerce form .form-row label { color: var(--text-secondary); font-size: var(--fs-small); }
.lgd-shell .woocommerce form .form-row input.input-text:focus,
.lgd-shell .woocommerce form .form-row textarea:focus {
  outline: none;
  border-color: var(--color-gold);
}

.lgd-shell .woocommerce table.shop_table,
.lgd-shell .woocommerce table.shop_attributes {
  border-color: var(--hairline);
  border-radius: var(--r-md);
}
.lgd-shell .woocommerce table.shop_table th,
.lgd-shell .woocommerce table.shop_table td { border-color: var(--hairline); color: var(--text-secondary); }
.lgd-shell .woocommerce table.shop_table th { color: var(--text-primary); }

.lgd-shell .woocommerce-tabs ul.tabs li { background: var(--color-surface); border-color: var(--hairline); }
.lgd-shell .woocommerce-tabs ul.tabs li.active { background: var(--gold-14); }
.lgd-shell .woocommerce-tabs ul.tabs li a { color: var(--text-secondary); }
.lgd-shell .woocommerce-tabs ul.tabs li.active a { color: var(--color-gold); }

.lgd-shell .woocommerce .star-rating span { color: var(--color-gold); }
.lgd-shell .woocommerce span.onsale {
  background: var(--color-gold);
  color: var(--color-black);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
}
.lgd-shell .woocommerce-breadcrumb { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.7rem; }
.lgd-shell .woocommerce-breadcrumb a { color: var(--color-gold-dim); }

/* Product images need a light card behind them — most product photography is
   shot on white and disappears against a black page. */
.lgd-shell .woocommerce ul.products li.product a img,
.lgd-shell .woocommerce div.product div.images img {
  border-radius: var(--r-md);
  background: var(--color-off-white);
}

/* =========================================================================
   30. HEADER DROPDOWN
   Any nav item with children. The parent stays a real link — the caret beside
   it opens the submenu — so /services/ is still reachable in one click and no
   second "All services" item is needed in the top bar.
   ========================================================================= */

.nav__item { position: relative; display: flex; align-items: center; gap: 0.15rem; }

.nav__caret {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.nav__caret svg { width: 14px; height: 14px; }
.nav__item:hover .nav__caret,
.nav__item--has-sub.is-open .nav__caret { color: var(--color-gold); }
.nav__item--has-sub.is-open .nav__caret { transform: rotate(180deg); }

.nav__sub {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  translate: -50% 0;
  min-width: 16rem;
  padding: 0.5rem;
  display: grid;
  gap: 0.1rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  background: rgba(14, 14, 14, 0.92);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast);
  z-index: 60;
}
/* A gap between the trigger and the panel would close the menu as the pointer
   crosses it, so an invisible bridge spans it. */
.nav__sub::before { content: ""; position: absolute; inset: -0.9rem 0 100% 0; }

.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub,
.nav__item--has-sub.is-open .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__sublink {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: var(--r-md);
  font-size: 0.86rem;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav__sublink:hover, .nav__sublink:focus-visible { background: var(--gold-08); color: var(--color-white); }
.nav__sublink[aria-current="page"] { color: var(--color-gold); }
.nav__sublink--all {
  color: var(--color-gold);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  border-bottom: 1px solid var(--hairline);
  border-radius: var(--r-md) var(--r-md) 0 0;
  margin-bottom: 0.25rem;
}

/* Honeypot: removed from view and from the accessibility tree, but still a
   real focusable-by-nothing input that automated submitters will fill in. */
.field--trap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* =========================================================================
   31. DEFENSIVE RESETS
   WordPress runs other people's CSS alongside ours — Spectra, WooCommerce,
   form builders, whatever is installed next year. functions.php now loads our
   stylesheet last so we win ties, but these are the specific places where a
   plugin's reset had already broken something visible, so they are pinned with
   enough specificity that load order stops mattering.
   ========================================================================= */

.crumbs ol,
.crumbs li,
.nav__list,
.nav__list li,
.nav__sub,
.nav__sub li,
.footer__grid ul,
.footer__grid li,
.pack__list,
.pack__list li,
.checks,
.checks li,
.stance__list,
.stance__list li,
.alt__list,
.alt__list li,
.legal__toc ol,
.legal__toc li,
.metrics,
.faq,
.posts,
.cases {
  list-style: none !important;
  margin: 0;
  padding-left: 0;
}

/* The one place markers are wanted back — article body copy. */
.prose ul { list-style: disc !important; padding-left: 1.35rem; }
.prose ol { list-style: decimal !important; padding-left: 1.35rem; }
.prose li { list-style: inherit !important; }

/* Plugins commonly force a light body background or a serif stack. */
body { background: var(--color-black); color: var(--text-secondary); }

/* =========================================================================
   32. OFFICES + MAPS
   ========================================================================= */

.offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }

.office { display: flex; flex-direction: column; padding: var(--space-lg) var(--space-md) var(--space-md); }
.office__city {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.office__addr { margin-top: 0.5rem; font-size: var(--fs-small); color: var(--text-secondary); }
.office__note {
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}
.office__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--space-md); }

.map { margin-top: var(--space-md); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--hairline); }
.map__frame { position: relative; aspect-ratio: 16 / 10; background: var(--color-surface); }
.map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: invert(0.92) hue-rotate(180deg) saturate(0.7); }
.map__load {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 0.6rem;
  width: 100%;
  background:
    radial-gradient(60% 60% at 50% 50%, var(--gold-08), transparent 70%),
    repeating-linear-gradient(45deg, var(--color-surface) 0 12px, rgba(255,255,255,0.02) 12px 24px);
  color: var(--color-gold);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.map__load:hover { background: var(--gold-08); }
.map__pin { width: 26px; height: 26px; }
.map.is-loaded .map__load { display: none; }