:root {
  --bg: #0c0b09;
  --bg-alt: #131110;
  --surface: #17140f;
  --surface-alt: #1f1a13;
  --border: #332a1c;
  --border-soft: #241f16;
  --text: #f4eee2;
  --text-dim: #a89a83;
  --text-faint: #9e9180;
  --beige: #e9dcc3;
  --gold: #b8874b;
  --gold-rgb: 184, 135, 75;
  --gold-bright: #e0bd83;
  /* Gold used as TEXT. Kept separate from --gold/--gold-bright (which also
     fill buttons, badges and gradients) so the light theme can darken gold
     lettering enough to meet WCAG 1.4.3 without turning every gold surface
     brown. Identical to the decorative golds in the dark theme. */
  --gold-text: #e0bd83;
  --gold-text-dim: #b8874b;
  --gold-deep: #7c4a24;
  --bronze: #7c4a24;
  --accent-text: #0c0b09;
  /* Stops at --gold rather than running on into --bronze. This gradient also
     fills the buttons that carry --accent-text, so every point along it has
     to stay readable under that ink; the bronze end was 3.4:1 and took every
     primary button on the site under AA. The darkest point here is 6.2:1,
     and the gradient still reads as champagne into gold. */
  --gold-gradient: linear-gradient(135deg, var(--gold-bright), var(--gold) 100%);
  --radius: 8px;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.75);
  --shadow-gold: 0 12px 32px -14px rgba(var(--gold-rgb), 0.45);
  --max: 1160px;
}

* {
  box-sizing: border-box;
}

/* Components below set their own `display` (flex/block/etc.) at the same
   specificity as the browser's default [hidden] rule, which lets the
   component's rule win the cascade and silently defeats `el.hidden = true`.
   Force it back with !important so toggling `.hidden` always actually
   hides the element, on any component. */
[hidden] {
  display: none !important;
}

/* Available to a screen reader, taken out of the visual layout. The service
   cards' hit targets carry their accessible name in one of these; the class
   was being used in the markup without ever having been defined here, so
   those names were rendering on top of the cards. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: "Sora", "Segoe UI", system-ui, sans-serif;
  line-height: 1.15;
  margin: 0 0 0.5em;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
}

.mono {
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

/* Top signature rule */
.gold-rule {
  height: 3px;
  background: var(--gold-gradient);
}

/* Intro animation — plays once on every load of the homepage, over the real
   header/hero underneath. Pure CSS on purpose: it is the first thing painted,
   so it must not wait on a script or a download, and there is nothing in it
   that can fail open.

   Deliberately quiet. The wordmark rises into place, a hairline opens beneath
   it, the strapline opens from the centre, and the frame lifts. No effects
   for their own sake: the name is the whole of it.

   Everything shares one 2.4s timeline, so the percentages in the keyframes
   below refer to the same clock:
     0.15–0.95s  wordmark rises out of its baseline
     0.60–1.30s  rule opens from the centre
     0.95–1.55s  strapline opens from the centre
     1.55–1.99s  holds
     1.99–2.40s  the frame lifts away */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  pointer-events: none;
  animation: introOverlayOut 2.4s ease forwards;
}

.intro-overlay__plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  animation: introPlateOut 2.4s ease forwards;
}

/* The wordmark rises out of its own baseline instead of fading in. The clip
   holds it, so every frame shows whole letters at full strength; the padding
   leaves room for the serif's ascenders and descenders inside the clip. */
.intro-overlay__reveal {
  display: block;
  overflow: hidden;
  padding: 0.06em 0.08em 0.12em;
}

.intro-overlay__mark {
  display: block;
  font-family: "Playfair Display", "Georgia", serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: 0.02em;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: translateY(115%);
  animation: introMarkIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.intro-overlay__line {
  width: 0;
  height: 1px;
  background: rgba(var(--gold-rgb), 0.75);
  animation: introLineIn 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.6s forwards;
}

/* The strapline is the only real-coloured text in the splash (the wordmark is
   a clipped gradient). Any opacity fade of coloured text passes through a
   stretch below 4.5:1 around half opacity, so it is never faded: it opens
   from the centre behind a clip, in step with the rule above it, and clears
   in one step just before the curtain starts to lift. */
.intro-overlay__tag {
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  clip-path: inset(0 50% 0 50%);
  animation: introTag 2.4s forwards;
}

@keyframes introMarkIn {
  to { transform: none; }
}
@keyframes introLineIn {
  to { width: 120px; }
}
@keyframes introTag {
  0%, 39% {
    clip-path: inset(0 50% 0 50%); opacity: 1;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  64%, 82% {
    clip-path: inset(0 0 0 0); opacity: 1;
    animation-timing-function: steps(1, end);
  }
  83%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes introPlateOut {
  0%, 83% { transform: none; }
  100% { transform: translateY(-12px); }
}
@keyframes introOverlayOut {
  0%, 83% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-overlay { display: none; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 3px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  padding: 12px 20px;
  font-size: 0.8rem;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--gold-gradient);
  color: var(--accent-text);
  box-shadow: var(--shadow-gold);
}

.btn--primary:hover {
  box-shadow: 0 16px 40px -14px rgba(var(--gold-rgb), 0.6);
}

.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold-text);
}

.btn--lg {
  padding: 15px 28px;
  font-size: 0.85rem;
}

.btn--nav {
  margin-left: auto;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12, 11, 9, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}

/* The header runs wider than the body copy on purpose: seven nav links,
   a theme toggle and a call to action need about 1150px before anything
   has to fold, and the 1160px body measure left roughly 3px spare. */
.header__inner {
  display: flex;
  align-items: center;
  gap: 34px;
  max-width: 1320px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}


.logo {
  display: flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  text-decoration: none;
  font-family: "Playfair Display", "Georgia", serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand__name {
  white-space: nowrap;
  font-family: "Playfair Display", "Georgia", serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav {
  display: flex;
  gap: 30px;
  flex: 1 1 auto;
  justify-content: center;
}

/* Nothing in the header bar may break mid-phrase. "How It Works",
   "Members Portal" and "Get a Quote" were each folding onto two lines,
   which is what made the bar look cramped and three rows tall. */
.nav a,
.btn--nav,
.theme-toggle {
  white-space: nowrap;
}

.nav a {
  position: relative;
  text-decoration: none;
  color: var(--text-dim);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: 4px;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.2s ease;
}

.nav a:hover {
  color: var(--gold-text);
}

.nav a:hover::after {
  width: 100%;
}

.nav a.nav-secondary {
  margin-left: auto;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.nav-secondary::after {
  display: none;
}

.nav-secondary:hover,
.nav-secondary.is-active {
  color: var(--gold-text);
  border-color: var(--gold);
}

/* "We're hiring" banner — top of the homepage, above the client bar */
.hiring-bar {
  background: color-mix(in srgb, var(--gold) 14%, var(--surface-alt));
  border-bottom: 1px solid var(--border-soft);
}

.hiring-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 24px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  text-align: center;
}

.hiring-bar__badge {
  background: var(--gold);
  color: #111;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

.hiring-bar__inner > span:not(.hiring-bar__badge) {
  color: var(--text-dim);
}

.hiring-bar__inner a {
  color: var(--gold-text);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}

.hiring-bar__inner a:hover {
  color: var(--gold-text-dim);
}

/* "Already a client?" banner — top of the homepage, above the hero */
.client-bar {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border-soft);
}

.client-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 24px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  text-align: center;
}

.client-bar__inner span {
  color: var(--text-dim);
}

.client-bar__inner a {
  color: var(--gold-text);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}

.client-bar__inner a:hover {
  color: var(--gold-text-dim);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--gold);
  display: block;
}

/* Hero */
.hero,
.activate-hero {
  position: relative;
  padding: 108px 0 84px;
  overflow: hidden;
}

.hero::before,
.activate-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(var(--gold-rgb), 0.05) 0,
      rgba(var(--gold-rgb), 0.05) 1px,
      transparent 1px,
      transparent 64px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(var(--gold-rgb), 0.05) 0,
      rgba(var(--gold-rgb), 0.05) 1px,
      transparent 1px,
      transparent 64px
    ),
    radial-gradient(circle at 82% 12%, rgba(var(--gold-rgb), 0.14), transparent 45%);
  mask-image: linear-gradient(to bottom, black, transparent 96%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 56px;
  align-items: center;
}

/* Live digital-network backdrop: slow, restrained movement that suggests
   connected systems and automation without competing with the page copy. */
.hero__ambient{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:.96}
.hero__ambient::before{content:"";position:absolute;inset:-15%;background:linear-gradient(115deg,transparent 18%,rgba(var(--gold-rgb),.025) 34%,rgba(var(--gold-rgb),.075) 49%,rgba(var(--gold-rgb),.025) 64%,transparent 82%);transform:translateX(-45%);animation:ambientSweep 24s ease-in-out infinite}
.hero__ambient::after{content:"";position:absolute;width:34vw;height:34vw;min-width:280px;min-height:280px;right:-9%;top:8%;border:1px solid rgba(var(--gold-rgb),.28);border-radius:50%;box-shadow:0 0 0 52px rgba(var(--gold-rgb),.05),0 0 0 104px rgba(var(--gold-rgb),.032);animation:ambientOrbit 26s linear infinite}
.hero__ambient span{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--gold-bright);box-shadow:0 0 0 6px rgba(var(--gold-rgb),.14),0 0 28px rgba(var(--gold-rgb),.62);animation:ambientNode 6s ease-in-out infinite}
.hero__ambient span::after{content:"";position:absolute;left:9px;top:4px;width:clamp(90px,16vw,240px);height:1px;background:linear-gradient(90deg,rgba(var(--gold-rgb),.58),transparent);transform-origin:left center}
.hero__ambient span:nth-child(1){left:7%;top:21%;animation-delay:-1s}.hero__ambient span:nth-child(1)::after{transform:rotate(18deg)}
.hero__ambient span:nth-child(2){left:24%;top:72%;animation-delay:-4s}.hero__ambient span:nth-child(2)::after{transform:rotate(-22deg)}
.hero__ambient span:nth-child(3){left:46%;top:14%;animation-delay:-2.5s}.hero__ambient span:nth-child(3)::after{transform:rotate(32deg)}
.hero__ambient span:nth-child(4){left:67%;top:68%;animation-delay:-5s}.hero__ambient span:nth-child(4)::after{transform:rotate(-34deg)}
.hero__ambient span:nth-child(5){left:83%;top:30%;animation-delay:-3s}.hero__ambient span:nth-child(5)::after{transform:rotate(145deg)}
.hero__ambient span:nth-child(6){left:92%;top:78%;animation-delay:-.5s}.hero__ambient span:nth-child(6)::after{transform:rotate(202deg)}
.hero__ambient i{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--gold);box-shadow:18px 32px var(--gold),54px 9px var(--gold),91px 48px var(--gold),126px 22px var(--gold);opacity:.32;animation:ambientDrift 18s linear infinite}
.hero__ambient i:nth-of-type(1){left:11%;top:33%}.hero__ambient i:nth-of-type(2){left:53%;top:55%;animation-delay:-7s}.hero__ambient i:nth-of-type(3){left:76%;top:12%;animation-delay:-13s}
@keyframes ambientSweep{0%,100%{transform:translateX(-48%)}50%{transform:translateX(48%)}}
@keyframes ambientOrbit{to{transform:rotate(360deg)}}
@keyframes ambientNode{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-13px);opacity:1}}
@keyframes ambientDrift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(35px,-24px,0)}100%{transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:reduce){.hero__ambient::before,.hero__ambient::after,.hero__ambient span,.hero__ambient i{animation:none}}

/* Eyebrow — matches .section__tag: a short gold rule and a tracked caps
   line. Previously a monospace line opening with a "$" shell prompt. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: "Sora", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-text);
  margin-bottom: 20px;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-gradient);
}

.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 700;
  margin-bottom: 22px;
  color: var(--beige);
}

/* The promise gets its own line and the gold lettering, so it reads at a
   glance as the point of the headline. --gold-text is the gold measured
   for text in both themes. */
.hero__highlight {
  display: block;
  color: var(--gold-text);
}

.hero__lead {
  font-size: 1.1rem;
  color: var(--text-dim);
  max-width: 620px;
}

.hero__lead strong {
  color: var(--text);
  font-weight: 750;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 30px 0 20px;
}

.hero__note {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  color: var(--text-faint);
  letter-spacing: 0.03em;
  margin-bottom: 44px;
}

.hero__note span {
  color: var(--gold-text-dim);
  margin: 0 8px;
}

.hero__stats {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border-soft);
  max-width: 620px;
}

.hero__stats li {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 24px 0 0;
  border-right: 1px solid var(--border-soft);
}

.hero__stats li:last-child {
  border-right: none;
  padding-right: 0;
}

.hero__stats strong {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gold-text);
}

.hero__stats span {
  color: var(--text-faint);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Hero rotator — the medium-sized box beside the hero copy that cycles
   through "why you need this" reasons every few seconds. Presented as a
   plainly-labelled carousel (icon, title, "01/06" counter) rather than a
   fake log file: this is marketing copy for business owners, so dressing
   it as developer output made it read as decoration instead of a claim. */
.hero__rotator {
  position: relative;
  /* Themed rather than a fixed dark gradient: this panel used to keep a
     warm near-black in both themes, which left the light theme's text
     colours sitting on a dark ground and failing. */
  background: linear-gradient(155deg, var(--surface-alt), var(--bg) 78%);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.hero__rotator::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 1px;
  background: var(--gold-gradient);
  opacity: 0.35;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hero__rotator-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-soft);
}

.panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), 0.12);
  border: 1px solid rgba(var(--gold-rgb), 0.34);
  color: var(--gold-text);
}

.panel-icon svg {
  width: 15px;
  height: 15px;
}

.hero__rotator-title {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--beige);
}

.hero__rotator-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

.hero__rotator-toggle:hover {
  border-color: var(--gold-text-dim);
  color: var(--gold-text);
}

.hero__rotator-toggle svg {
  width: 11px;
  height: 11px;
}

.hero__rotator-toggle .is-play,
.hero__rotator-toggle.is-paused .is-pause {
  display: none;
}

.hero__rotator-toggle.is-paused .is-play {
  display: block;
}

.hero__rotator-count {
  margin: 0 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-faint);
}

.hero__rotator-count b {
  color: var(--gold-text);
  font-weight: 700;
}

.hero__rotator-body {
  position: relative;
  padding: 26px 24px 24px;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__rotator-headline {
  font-family: "Sora", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold-text);
  margin: 0 0 10px;
  line-height: 1.35;
}

.hero__rotator-text {
  font-size: 0.92rem;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0;
}

.hero__rotator-headline,
.hero__rotator-text {
  transition: opacity 0.25s ease;
}

.hero__rotator-body.is-fading .hero__rotator-headline,
.hero__rotator-body.is-fading .hero__rotator-text {
  opacity: 0;
}

.hero__rotator-progress {
  position: relative;
  height: 2px;
  background: var(--border-soft);
  overflow: hidden;
}

.hero__rotator-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--gold-gradient);
}

.hero__rotator-progress span.is-animating {
  animation: hero-rotator-progress 5s linear;
}

@keyframes hero-rotator-progress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

/* Sections */
section {
  padding: 84px 0;
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

/* Section label — a short gold rule followed by a tracked caps word, the
   standard editorial way to title a section. Replaced the "// Services"
   code-comment styling, which made a small-business services site read
   like a developer's terminal. */
.section__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Sora", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  color: var(--gold-text-dim);
  font-weight: 700;
}

.section__tag::before {
  content: "";
  flex: none;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-gradient);
}

.section__title {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.section__lead {
  color: var(--text-dim);
  max-width: 620px;
  margin-bottom: 0;
}

.section__lead a {
  color: var(--gold-text);
  text-decoration: underline;
}

/* Services grid */
.grid {
  display: grid;
  gap: 20px;
}

.grid--services {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  counter-reset: svc;
}

/* ── services backdrop ──────────────────────────────────────────────────
   Two slow gold drifts and a fine rule grid behind the cards. Pure CSS, so
   it is sharp at any size, adds nothing to download, and themes with the
   rest of the site. It is decorative, so it stops completely when the
   visitor has asked for reduced motion. */
.services { position: relative; isolation: isolate; overflow: hidden; }

.services__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--gold-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--gold-rgb), 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 80% at 50% 40%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 40%, #000 35%, transparent 78%);
}

.services__drift {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}

.services__drift--a {
  width: 44vw;
  height: 44vw;
  max-width: 620px;
  max-height: 620px;
  top: -12%;
  left: -8%;
  background: rgba(var(--gold-rgb), 0.3);
  animation: svcDriftA 34s ease-in-out infinite alternate;
}

.services__drift--b {
  width: 38vw;
  height: 38vw;
  max-width: 540px;
  max-height: 540px;
  bottom: -14%;
  right: -6%;
  background: rgba(var(--gold-rgb), 0.22);
  animation: svcDriftB 42s ease-in-out infinite alternate;
}

@keyframes svcDriftA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(14vw, 8vh, 0) scale(1.14); }
}

@keyframes svcDriftB {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-12vw, -9vh, 0) scale(0.94); }
}

html[data-theme="light"] .services__drift { opacity: 0.3; }

@media (prefers-reduced-motion: reduce) {
  .services__drift { animation: none; }
}


/* ── openable cards ─────────────────────────────────────────────────── */
/* The whole card is the target. The button carries the accessible name and
   the keyboard focus; the heading and copy stay real text underneath it
   rather than being swallowed into the control. */
.service-card__hit {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: var(--radius);
  appearance: none;
}

.service-card__hit:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.service-card.is-openable { cursor: pointer; }

.service-card__more {
  display: block;
  margin-top: 16px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.service-card.is-openable:hover .service-card__more,
.service-card__hit:focus-visible ~ .service-card__more {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .service-card__more { opacity: 1; transform: none; }
}

/* ── detail panel ───────────────────────────────────────────────────── */
.svc-modal {
  width: min(880px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  overflow: auto;
}

.svc-modal::backdrop { background: rgba(0, 0, 0, 0.66); backdrop-filter: blur(3px); }

.svc-modal__inner { position: relative; padding: 38px 38px 32px; }

.svc-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 40px;
  height: 40px;
  font-size: 1.6rem;
  line-height: 1;
  background: none;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
}

.svc-modal__close:hover { color: var(--text); border-color: var(--gold); }

.svc-modal h3 {
  font-family: "Sora", sans-serif;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 6px;
}

.svc-modal__lead { margin-top: 14px; color: var(--text-dim); max-width: 60ch; }

.svc-modal__cols { display: grid; gap: 30px; margin-top: 28px; }

@media (min-width: 760px) { .svc-modal__cols { grid-template-columns: 1fr 1fr; } }

.svc-modal h4 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 14px;
}

.svc-modal__list { list-style: none; display: grid; gap: 11px; }

.svc-modal__list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 11px;
  align-items: baseline;
  font-size: 0.95rem;
  color: var(--text-dim);
}

.svc-modal__list li::before { content: "\2713"; color: var(--gold-text); font-size: 0.8rem; }

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

.svc-modal__shots figure { margin: 0; }

.svc-modal__shots img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}

.svc-modal__shots figcaption {
  margin-top: 7px;
  font-size: 0.78rem;
  color: var(--text-faint);
}

.svc-modal__note {
  margin-top: 22px;
  font-size: 0.86rem;
  color: var(--text-faint);
  border-left: 2px solid var(--border);
  padding-left: 14px;
}

.svc-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
}

.service-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 28px;
  counter-increment: svc;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card::before {
  content: counter(svc, decimal-leading-zero);
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  color: var(--text-faint);
  opacity: 0.7;
}

.service-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-gold);
}

.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  margin-bottom: 18px;
}

.icon-chip svg {
  width: 24px;
  height: 24px;
  stroke: var(--gold-bright);
}

.service-card:hover .icon-chip {
  border-color: var(--gold);
}

.service-card h3 {
  font-size: 1.04rem;
}

.service-card p {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin: 0;
}

/* How it works */
.how {
  background: var(--bg-alt);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.step {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 26px 24px;
}

.step__num {
  position: absolute;
  top: -18px;
  right: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 4.4rem;
  font-weight: 600;
  color: rgba(var(--gold-rgb), 0.1);
  line-height: 1;
  pointer-events: none;
}

.step__tag {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold-text-dim);
  margin-bottom: 10px;
}

.step h3 {
  font-size: 1.05rem;
  position: relative;
}

.step p {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin: 0;
  position: relative;
}

.access-explainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 56px;
}

.access-explainer__text h3 {
  font-size: 1.3rem;
}

.access-explainer__text p {
  color: var(--text-dim);
  margin-bottom: 0;
}

.access-explainer__card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Terminal / code-block component — used for the illustrative account
   record on the homepage and for the live lookup result on activate.html */
.terminal-window {
  position: relative;
  background: linear-gradient(155deg, #1c170f, #0e0c09 75%);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  max-width: 400px;
  justify-self: center;
}

.terminal-window::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 1px;
  background: var(--gold-gradient);
  opacity: 0.35;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.terminal-window__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}

.terminal-window__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.terminal-window__dot:nth-child(1) {
  opacity: 0.9;
}

.terminal-window__dot:nth-child(2) {
  opacity: 0.6;
}

.terminal-window__dot:nth-child(3) {
  opacity: 0.35;
}

.terminal-window__filename {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--text-faint);
  letter-spacing: 0.05em;
}

.terminal-body {
  padding: 20px 22px 24px;
  font-size: 0.86rem;
  line-height: 1.8;
}

/* Preview frame — an actual visual preview (e.g. a website screenshot),
   shown instead of the terminal-window JSON block when a client account
   has a previewImageUrl set. Same "chrome" language as .terminal-window,
   styled as a browser instead of a code editor. The whole thing is a
   link (.preview-frame-link) to the same image, so clicking it opens
   the full preview. */
.preview-frame-link {
  display: block;
  text-decoration: none;
  color: inherit;
  margin-bottom: 20px;
}

.preview-frame {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.preview-frame-link:hover .preview-frame {
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

.preview-frame__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(155deg, #1c170f, #0e0c09 75%);
}

.preview-frame__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4b463d;
}

.preview-frame__url {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  margin-left: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--border-soft);
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-frame__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  background: var(--bg);
}

.preview-frame__cta {
  padding: 10px 16px;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-text);
  background: var(--surface-alt);
  border-top: 1px solid var(--border-soft);
}

.code-line {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.code-line--indent {
  padding-left: 1.4em;
}

.code-key {
  color: var(--text-dim);
}

.code-string {
  color: var(--gold-text);
}

.code-punct {
  color: var(--text-faint);
}

/* Account card — the illustrative "here's what you'll be sent" record in
   the How It Works section. Shown to any visitor as marketing copy, not a
   real system response, so it's styled as a statement/receipt with a
   labelled head and an explicit EXAMPLE flag rather than as a code window. */
.account-card {
  position: relative;
  background: linear-gradient(155deg, #1c170f, #0e0c09 75%);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  max-width: 400px;
  justify-self: center;
}

.account-card__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border-soft);
}

.account-card__title {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--beige);
}

.account-card__flag {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-text-dim);
}

.account-card__body {
  padding: 20px 22px 22px;
}

.account-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}

.account-card__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.account-card__key {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-faint);
}

.account-card__value {
  font-size: 0.92rem;
  color: var(--gold-text);
  text-align: right;
}

.access-card__caption {
  width: 100%;
  margin-top: 14px;
  font-size: 0.72rem;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--text-faint);
  text-align: center;
}

@media (max-width: 780px) {
  .access-explainer {
    grid-template-columns: 1fr;
  }
}

/* Showcase — invented example businesses (see examples.html) */
.showcase-intro {
  max-width: 720px;
  color: var(--text-dim);
  line-height: 1.7;
  margin: 18px 0 8px;
}

.showcase-section {
  padding: 56px 0;
  border-top: 1px solid var(--border-soft);
}

.showcase-section:first-of-type {
  border-top: none;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 8px;
}

.showcase-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.showcase-card h3 {
  margin: 22px 0 6px;
  font-size: 1.04rem;
}

.showcase-card p:not(.access-card__caption) {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin: 0;
}

.showcase-card__frame {
  width: 100%;
  background: linear-gradient(155deg, #1c170f, #0e0c09 75%);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.showcase-card:hover .showcase-card__frame {
  border-color: var(--gold);
  transform: translateY(-4px);
}

.showcase-card__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}

.showcase-card__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4b463d;
}

.showcase-card__url {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  margin-left: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--border-soft);
  font-size: 0.68rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.showcase-card__url svg,
.preview-frame__url svg {
  width: 10px;
  height: 10px;
  flex: none;
  color: var(--text-faint);
}

.showcase-card__body {
  line-height: 0;
}

.showcase-card__body img {
  display: block;
  width: 100%;
  height: auto;
}

.how__note {
  margin-top: 36px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 22px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius);
  color: var(--text-dim);
  max-width: 680px;
}

.how__note strong {
  color: var(--gold-text);
}

/* Enquiry form */
.enquire {
  position: relative;
}

.enquiry-form {
  max-width: 660px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow);
}

.form-row {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-row--split {
  flex-direction: row;
  gap: 18px;
}

.form-row--split > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-row--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.form-row--checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}

.form-row--checkbox label {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  color: var(--text-dim);
}

label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

input, select, textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 14px;
  color: var(--text);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.95rem;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.15);
}

input[type="file"] {
  padding: 8px 10px;
  color: var(--text-faint);
  font-size: 0.85rem;
}

input[type="file"]::file-selector-button {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 14px;
  margin-right: 12px;
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

input[type="file"]::file-selector-button:hover {
  border-color: var(--gold);
  color: var(--gold-text);
}

textarea {
  resize: vertical;
}

.form-note {
  margin: 16px 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  color: var(--gold-text);
  min-height: 1.2em;
}

.activate-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.activate-cta p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.92rem;
}

/* Activate page */
.activate-hero__inner {
  position: relative;
  max-width: 560px;
}

.activate-form {
  margin: 32px 0 0;
  max-width: none;
  padding: 28px;
}

.activate-result {
  margin-top: 24px;
}

.embedded-checkout {
  margin-top: 24px;
  min-height: 420px;
  border: 1px solid var(--line, var(--border));
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.activate-result .terminal-window {
  max-width: none;
  margin-bottom: 18px;
}

.activate-result__message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}

.activate-result--error .activate-result__message {
  border-left: 2px solid #a85d3f;
}

.activate-result__message p {
  margin: 0;
  color: var(--text-dim);
}

.activate-result__message a {
  color: var(--gold-text);
}

/* Order summary — service preview + price shown after a matched code */
.order-summary {
  padding: 26px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  background: var(--surface);
}

.order-summary__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-text-dim);
  margin: 0 0 10px;
}

.order-summary__service {
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.order-summary__preview {
  color: var(--text-dim);
  margin-bottom: 22px;
}

.order-summary__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 22px;
}

.order-summary__price-label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.order-summary__price {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
}

.order-summary__note {
  margin: 16px 0 0;
  font-size: 0.86rem;
  color: var(--text-faint);
}

.activate-footnote {
  margin-top: 28px;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.activate-footnote a {
  color: var(--gold-text);
  text-decoration: none;
}

.activate-footnote code {
  background: var(--surface-alt);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85em;
}

/* Admin (New Client Setup) page */
.admin-hint {
  margin: 6px 0 0;
  font-size: 0.8rem;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-faint);
}

.admin-service-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 10px;
}

.admin-service-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  cursor: pointer;
}

.admin-service-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
}

#adminServiceOther {
  margin-top: 12px;
}

.form-consent {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--text-faint);
}

.form-consent a {
  color: var(--text-dim);
  text-decoration: underline;
}

.form-consent a:hover {
  color: var(--gold-text);
}

.admin-hint code {
  background: var(--surface-alt);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9em;
  color: var(--text-dim);
}

.admin-image-thumb {
  display: block;
  margin-top: 12px;
  max-width: 220px;
  max-height: 140px;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  object-fit: cover;
}

.admin-actions {
  margin-top: 4px;
}

.admin-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 2.2rem; }
.admin-hub-card { display: block; padding: 2rem 1.8rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface, #12100b); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.admin-hub-card:hover, .admin-hub-card:focus-visible { border-color: var(--gold); transform: translateY(-3px); }
.admin-hub-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); font-size: 1.25rem; color: var(--gold-text-dim); margin-bottom: 1rem; }
.admin-hub-card h3 { margin: 0 0 .6rem; font-family: "Sora", sans-serif; color: var(--text); font-size: 1.3rem; }
.admin-hub-card p { margin: 0; color: var(--text-faint); font-size: .92rem; line-height: 1.55; }
.admin-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.admin-back-link { display: inline-block; margin-bottom: 1.2rem; color: var(--gold-text-dim); font: 600 .78rem/1 "IBM Plex Mono", monospace; text-decoration: none; letter-spacing: .04em; }
.admin-back-link:hover { text-decoration: underline; }

.admin-output {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.admin-output__block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.admin-output__message {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 14px 16px;
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  resize: vertical;
}

#saveBlock {
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius);
  background: var(--surface);
  align-items: flex-start;
}

#saveBlock .btn {
  width: 100%;
}

#saveNote {
  margin: 12px 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  color: var(--gold-text);
}

/* Pipeline Tester page — mirrors admin.html + activate.html entirely in
   localStorage, so it needs its own tab switcher and test-client list on
   top of the components those pages already define above. */
.tabs {
  display: flex;
  gap: 10px;
  margin: 28px 0 32px;
}

.tab {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.tab:hover {
  border-color: var(--gold);
  color: var(--gold-text);
}

.tab.is-active {
  border-color: var(--gold);
  color: var(--gold-text);
  background: var(--surface);
}

.client-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.clients-search {
  width: 100%;
  margin-top: 16px;
}

.client-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-alt);
  flex-wrap: wrap;
}

.client-row__info {
  flex: 1;
  min-width: 200px;
}

.client-row__account {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85rem;
  color: var(--gold-text);
}

.client-row__service {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.client-row__code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  color: var(--text-faint);
}

.client-row__email {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  color: var(--gold-text);
}

.client-row__actions {
  display: flex;
  gap: 8px;
}

.status-pill {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.status-pill--pending {
  background: rgba(var(--gold-rgb), 0.12);
  color: var(--gold-text);
  border: 1px solid rgba(var(--gold-rgb), 0.35);
}

.status-pill--active {
  background: rgba(100, 180, 130, 0.12);
  color: #7dd6a0;
  border: 1px solid rgba(100, 180, 130, 0.35);
}

.status-pill--refunded {
  background: rgba(224, 122, 107, 0.12);
  color: #e07a6b;
  border: 1px solid rgba(224, 122, 107, 0.35);
}

.empty-note {
  color: var(--text-faint);
  font-size: 0.88rem;
}

.btn--sm {
  padding: 7px 14px;
  font-size: 0.72rem;
}

.btn--danger {
  border-color: #6b3324;
  color: #d08a6f;
}

.btn--danger:hover {
  border-color: #a85d3f;
  color: #e8ab8f;
}

/* Reveal-on-scroll (progressive enhancement, see script.js) */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* Footer */
.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border-soft);
  padding-top: 60px;
}

.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 36px;
}

.brand--footer {
  margin-bottom: 14px;
}

.footer__tagline {
  color: var(--text-dim);
  font-size: 0.92rem;
  max-width: 320px;
}

.footer__social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  color: var(--gold-text);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.footer__social a:hover {
  background: var(--gold-gradient);
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
}

.footer__social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer__contact h4,
.footer__links h4 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-text-dim);
  margin-bottom: 16px;
}

.footer__contact p {
  font-size: 0.9rem;
  color: var(--text-dim);
}

.footer__contact a {
  color: var(--gold-text);
  text-decoration: none;
}

.footer__contact code {
  background: var(--surface-alt);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85em;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer__links a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
}

.footer__links a:hover {
  color: var(--gold-text);
}

.footer__bottom {
  border-top: 1px solid var(--border-soft);
  padding: 20px 24px;
  color: var(--text-faint);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.footer__bottom p {
  margin: 0;
}

.footer__legal-links a {
  color: var(--text-faint);
}

.footer__legal-links a:hover {
  color: var(--gold-text);
}

.footer__legal-links span {
  margin: 0 8px;
}

/* A shorter footer for standalone pages (e.g. card.html) that skip the
   3-column .footer__inner grid — without this, .site-footer's 60px
   top padding leaves a bare gap above the bottom bar. */
.site-footer--minimal {
  padding-top: 24px;
}

/* Digital business card (card.html) — a shareable contact page, styled
   as an actual card rather than another marketing section. Reuses the
   site's foil-edge "chrome" language (see .terminal-window) at business
   card proportions. */
.card-page {
  padding: 72px 0 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.biz-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: linear-gradient(155deg, #1c170f, #0e0c09 75%);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 34px 32px;
}

html[data-theme="light"] .biz-card {
  background: linear-gradient(155deg, #fcfaf5, #eee5d3 75%);
}

.biz-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: var(--gold-gradient);
  opacity: 0.5;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.biz-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.biz-card__brand {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--gold-text);
  margin: 0 0 4px;
}

.biz-card__tagline {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}

.biz-card__qr {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  background: #fdfbf6;
  border-radius: 8px;
  padding: 6px;
  box-shadow: var(--shadow-gold);
}

.biz-card__qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.biz-card__name {
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--text);
  margin: 0 0 4px;
}

.biz-card__role {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  color: var(--gold-text);
  margin: 0 0 22px;
}

.biz-card__divider {
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent 85%);
  margin-bottom: 20px;
}

.biz-card__contacts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.biz-card__contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.15s ease;
}

.biz-card__contact-row:hover {
  color: var(--gold-text);
}

.biz-card__contact-row svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  stroke: var(--gold-bright);
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.card-note {
  color: var(--text-faint);
  font-size: 0.82rem;
  text-align: center;
  max-width: 40ch;
}

/* Legal pages (terms.html, privacy.html) — plain prose, not the
   terminal/card language the rest of the site uses; legal text reads
   better as a simple column. */
.legal-page {
  padding: 64px 0 80px;
  max-width: 760px;
}

.legal-page h1 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin-bottom: 8px;
}

.legal-page__updated {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  color: var(--text-faint);
  margin-bottom: 32px;
}

.legal-page__notice {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 0.88rem;
  color: var(--text-dim);
  margin-bottom: 40px;
}

.legal-page h2 {
  font-size: 1.25rem;
  margin-top: 40px;
  margin-bottom: 12px;
}

/* Statutory consumer notice shown beside the pay button — quieter than the
   main consent line but still legible, since it carries a legal right. */
.form-consent--statutory {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}

/* Model cancellation form — a fill-in block quoted inside the Terms, set
   apart from the surrounding prose so it reads as something to copy. */
.legal-form {
  margin: 14px 0 8px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.legal-form p {
  margin: 0 0 10px;
}

.legal-form p:last-child {
  margin-bottom: 0;
}

/* Sub-heading inside a numbered section — used in the privacy policy to
   split "what we collect" by the situation it's collected in. */
.legal-page h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold-text);
  margin-top: 24px;
  margin-bottom: 8px;
}

.legal-page p,
.legal-page li {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.75;
}

.legal-page ul,
.legal-page ol {
  margin: 0 0 1em;
  padding-left: 1.4em;
}

.legal-page a {
  color: var(--gold-text);
}

.legal-page strong {
  color: var(--text);
}

/* Responsive */
@media (max-width: 860px) {
  .footer__inner {
    grid-template-columns: 1fr;
  }

  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__rotator {
    max-width: 480px;
  }

  .hero__stats {
    flex-wrap: wrap;
  }

  .hero__stats li {
    flex: 1 1 45%;
    border-right: none;
    padding-right: 0;
  }
}

/* Below this the seven links cannot sit on one line, so the menu becomes
   the toggle instead of wrapping onto two and three rows. This used to
   happen at 720px, which left everything from 721px to about 1130px
   folding mid-phrase — "How It Works", "Members Portal", "Get a Quote". */
@media (max-width: 1199px) {
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border-soft);
    flex-direction: column;
    justify-content: flex-start;
    flex: none;
    padding: 18px 24px;
    display: none;
    gap: 16px;
  }

  .nav.is-open {
    display: flex;
  }

  .nav-toggle {
    display: flex;
  }
}

@media (max-width: 720px) {
  .btn--nav {
    display: none;
  }

  .form-row--split {
    flex-direction: column;
  }

  .section__head {
    flex-direction: column;
  }
}


/* AI help centre */
.ai-help-launcher{position:fixed;right:24px;bottom:24px;z-index:100;width:62px;height:62px;border-radius:50%;border:1px solid rgba(var(--gold-rgb),.42);background:linear-gradient(145deg,var(--gold-bright),var(--gold-deep));color:var(--bg);display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 45px rgba(0,0,0,.5),0 0 28px rgba(var(--gold-rgb),.18);transition:transform .25s ease}.ai-help-launcher:hover{transform:translateY(-3px) scale(1.03)}.ai-help-launcher svg{width:28px;height:28px}.ai-help-panel{position:fixed;right:24px;bottom:98px;z-index:99;width:min(390px,calc(100vw - 30px));height:min(610px,calc(100vh - 125px));display:flex;flex-direction:column;background:rgba(12,11,9,.98);border:1px solid var(--border);border-radius:10px;box-shadow:0 26px 90px rgba(0,0,0,.68);backdrop-filter:blur(18px);overflow:hidden;opacity:0;transform:translateY(18px) scale(.97);pointer-events:none;transition:opacity .25s ease,transform .25s ease}.ai-help-panel.is-open{opacity:1;transform:none;pointer-events:auto}.ai-help-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border);background:linear-gradient(110deg,rgba(var(--gold-rgb),.14),transparent)}.ai-help-mark{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:var(--gold);color:var(--bg);font:700 13px "IBM Plex Mono",monospace}.ai-help-title{flex:1}.ai-help-title strong{display:block;font-family:"Sora",sans-serif;font-size:14px}.ai-help-title span{display:block;color:var(--text-faint);font:10px "IBM Plex Mono",monospace}.ai-help-close{border:0;background:none;color:var(--text-dim);font-size:24px;cursor:pointer}.ai-help-messages{flex:1;padding:18px;overflow:auto;display:flex;flex-direction:column;gap:13px}.ai-help-message{max-width:86%;padding:11px 13px;border-radius:10px;font-size:13px;line-height:1.5;white-space:pre-wrap}.ai-help-message.ai,.ai-help-message--assistant{align-self:flex-start;background:var(--surface);border:1px solid var(--border-soft);color:var(--text-dim);border-bottom-left-radius:3px}.ai-help-message.user,.ai-help-message--user{align-self:flex-end;background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));color:var(--bg);font-weight:600;border-bottom-right-radius:3px}.ai-help-typing{display:flex;gap:4px;align-items:center}.ai-help-typing span{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:aiTyping 1s infinite alternate}.ai-help-typing span:nth-child(2){animation-delay:.2s}.ai-help-typing span:nth-child(3){animation-delay:.4s}@keyframes aiTyping{to{opacity:.25;transform:translateY(-3px)}}.ai-help-quick{display:flex;gap:7px;overflow-x:auto;padding:0 15px 12px}.ai-help-quick button{flex:none;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-dim);padding:8px 10px;font-size:11px;cursor:pointer}.ai-help-quick button:hover{border-color:var(--gold-text-dim);color:var(--gold-text)}.ai-help-composer{display:flex;gap:8px;padding:13px;border-top:1px solid var(--border);background:var(--bg)}.ai-help-composer input{min-width:0;flex:1;border-radius:7px;padding:12px}.ai-help-composer button{width:43px;border:0;border-radius:7px;background:var(--gold);color:var(--bg);font-size:18px;cursor:pointer}.ai-help-composer button:disabled{opacity:.45;cursor:wait}.ai-help-disclaimer{text-align:center;color:var(--text-faint);font:9px "IBM Plex Mono",monospace;padding:0 12px 10px}@media(max-width:560px){.ai-help-launcher{right:16px;bottom:16px}.ai-help-panel{right:15px;bottom:88px;height:calc(100vh - 110px)}}@media(prefers-reduced-motion:reduce){.ai-help-typing span{animation:none}}

.ai-help-launcher{background:var(--gold-gradient)!important;color:#fff!important;border:2px solid rgba(255,255,255,.9)!important;box-shadow:0 12px 34px rgba(104,70,12,.28),0 0 0 5px rgba(var(--gold-rgb),.12)!important}
.ai-help-launcher svg{width:31px!important;height:31px!important}
.theme-toggle{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-dim);padding:8px 11px;cursor:pointer;font:600 10px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.05em}
.theme-toggle svg{width:15px;height:15px}.theme-toggle__moon{display:none}.theme-toggle:hover{border-color:var(--gold-text-dim);color:var(--gold-text)}
html[data-theme="light"]{--bg:#f7f3ea;--bg-alt:#eee8dc;--surface:#fcfaf5;--surface-alt:#f1eadc;--border:#dfcfaa;--border-soft:#eee3ca;--text:#30291f;--text-dim:#696154;--text-faint:#696155;--beige:#3a3023;--gold:#b88732;--gold-rgb:184,135,50;--gold-bright:#d7ad58;--gold-text:#83621f;--gold-text-dim:#6b4d18;--gold-deep:#8d5e16;--bronze:#8d5e16;--accent-text:#fff;--shadow:0 24px 60px -24px rgba(70,52,24,.2);--shadow-gold:0 12px 32px -14px rgba(var(--gold-rgb),.28);--gold-gradient:linear-gradient(135deg,#9a6a18,#8d5e16 100%)}
html[data-theme="light"] .site-header{background:rgba(247,243,234,.95)}
html[data-theme="light"] .hiring-bar{background:color-mix(in srgb,var(--gold) 5%,var(--surface))}
html[data-theme="light"] .hero{background:radial-gradient(circle at 78% 42%,rgba(184,135,50,.14),transparent 34%),#f7f3ea}
html[data-theme="light"] .hero::before,html[data-theme="light"] .hero::after{opacity:.38}
html[data-theme="light"] .hero__rotator,html[data-theme="light"] .terminal-window,html[data-theme="light"] .account-card,html[data-theme="light"] .showcase-card__frame{background:linear-gradient(155deg,#fcfaf5,#eee5d3 75%)}
html[data-theme="light"] .preview-frame__bar{background:linear-gradient(155deg,#fcfaf5,#eee5d3 75%)}
/* This panel keeps a champagne fill in the light theme, so its muted text
   colours sit on a mid-tone rather than on white and come in under 4.5:1.
   They take the body ink here instead. */
html[data-theme="light"] .hero__rotator-title,
html[data-theme="light"] .hero__rotator-text,
html[data-theme="light"] .hero__rotator-count,
html[data-theme="light"] .hero__rotator-count b,
html[data-theme="light"] .hero__rotator-headline { color: var(--text); }
html[data-theme="light"] .hero__rotator-head,html[data-theme="light"] .terminal-window__bar,html[data-theme="light"] .account-card__head,html[data-theme="light"] .showcase-card__bar{background:rgba(218,190,133,.14)}
html[data-theme="light"] .hero__rotator::before,html[data-theme="light"] .terminal-window::before,html[data-theme="light"] .account-card::before{-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0)}
html[data-theme="light"] .service-card,html[data-theme="light"] .process-card,html[data-theme="light"] .why-card,html[data-theme="light"] .admin-output__block{box-shadow:0 10px 32px rgba(30,25,15,.06)}
html[data-theme="light"] .ai-help-panel{background:rgba(252,250,245,.985)}
html[data-theme="light"] .ai-help-composer{background:#fcfaf5}
html[data-theme="light"] .ai-help-message.ai,html[data-theme="light"] .ai-help-message--assistant{background:#f8f2e6}
html[data-theme="light"] .theme-toggle__sun{display:none}html[data-theme="light"] .theme-toggle__moon{display:block}
@media(max-width:900px){.theme-toggle__label{display:none}.theme-toggle{padding:8px}}
.ai-help-handoff{padding:14px;border-top:1px solid var(--border);display:grid;gap:9px;background:var(--surface)}
.ai-help-handoff[hidden]{display:none}.ai-help-handoff strong{font:600 13px "Sora",sans-serif;color:var(--text)}
.ai-help-handoff input,.ai-help-handoff textarea{width:100%;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--text);padding:10px;font:12px "Sora",sans-serif;resize:none}
.ai-help-handoff__actions{display:flex;justify-content:flex-end;gap:8px}.ai-help-handoff__actions button{border:1px solid var(--border);border-radius:7px;background:transparent;color:var(--text-dim);padding:8px 10px;cursor:pointer}
.ai-help-handoff__actions button[type="submit"]{background:var(--gold);border-color:var(--gold-text-dim);color:var(--bg);font-weight:700}
.ai-help-handoff p{min-height:16px;margin:0;color:var(--text-dim);font-size:11px}
.agent-request-list{display:grid;gap:12px}.agent-request{padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.agent-request__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.agent-request__contact{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}.agent-request__message{margin:12px 0;color:var(--text-dim);white-space:pre-wrap}
.agent-transcript__message--agent{justify-self:start;border-left:3px solid var(--gold);color:var(--text)}
.ai-help-message--agent{align-self:flex-start;background:var(--surface);border:1px solid var(--gold);border-left-width:3px;color:var(--text);border-bottom-left-radius:3px}
.agent-reply-form{display:flex;gap:8px;margin:12px 0}.agent-reply-form input{min-width:0;flex:1;border:1px solid var(--border);border-radius:5px;background:var(--bg);color:var(--text);padding:10px 12px}.agent-reply-form button{flex:none}.agent-chat-status{min-height:18px;margin:5px 0;color:var(--text-dim);font-size:11px}
.agent-transcript{margin:14px 0;border-top:1px solid var(--border-soft);padding-top:12px}.agent-transcript summary{cursor:pointer;color:var(--gold-text);font:600 11px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.05em}.agent-transcript__messages{display:grid;gap:8px;margin-top:12px}.agent-transcript__message{max-width:88%;padding:9px 11px;border-radius:7px;background:var(--surface-alt);color:var(--text-dim);font-size:12px;white-space:pre-wrap}.agent-transcript__message--user{justify-self:end;background:rgba(var(--gold-rgb),.16);color:var(--text)}
/* Members portal — deliberately uses the main site's existing colour,
   type, button and surface tokens so both themes remain visually identical. */
.members-page { min-height: calc(100vh - 88px); }
.members-hero { position: relative; overflow: hidden; padding: clamp(5rem, 10vw, 9rem) 0; border-bottom: 1px solid var(--border); }
.members-hero .hero__ambient { opacity: .55; }
.members-shell { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.members-intro h1 { margin: 1rem 0 1.5rem; max-width: 760px; font-family: "Sora", sans-serif; font-size: clamp(3.2rem, 6.5vw, 6.8rem); line-height: .96; letter-spacing: -.06em; color: var(--text); }
.members-intro > p:not(.eyebrow) { max-width: 650px; margin-bottom: 2.2rem; font-size: 1.08rem; line-height: 1.75; color: var(--text-dim); }
.members-trust { display: grid; grid-template-columns: 46px 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--border); }
.members-trust > span { font-family: "IBM Plex Mono", monospace; font-weight: 700; color: var(--gold-text-dim); }
.members-trust p { margin: 0; color: var(--text-dim); line-height: 1.55; }
.members-trust strong { color: var(--text); }
.members-panel { position: relative; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.members-panel::after { content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1; border: 1px solid var(--border); }
.members-panel__head { min-height: 58px; display: flex; align-items: center; gap: .7rem; padding: .8rem 1.6rem; border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.members-panel__head p { margin: 0; font: 700 .85rem/1.3 "Sora", sans-serif; color: var(--text); }
.members-panel__head .members-panel__secure { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font: 600 .68rem/1 "IBM Plex Sans", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.members-panel__head .members-panel__secure svg { width: 12px; height: 12px; }
.members-panel__body { padding: clamp(1.7rem, 4vw, 3.5rem); }
.members-page.is-dashboard .members-hero { padding: 3rem 0 5rem; }
.members-page.is-dashboard .members-shell { display: block; }
.members-page.is-dashboard .members-intro { display: none; }
.members-page.is-dashboard .members-panel { width: 100%; }
.members-page.is-dashboard .members-panel::after { display: none; }
.members-page.is-dashboard .members-panel__body { padding: clamp(2rem, 5vw, 4.5rem); }
.members-page.is-dashboard .member-results__head h1 { margin: .6rem 0 .8rem; max-width: 850px; font-family: "Sora", sans-serif; font-size: clamp(2.7rem, 6vw, 5.5rem); line-height: .98; letter-spacing: -.055em; color: var(--text); }
.portal-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 2.2rem; padding: 4px; border: 1px solid var(--border); background: var(--bg); }
.portal-mode__button { min-height: 44px; border: 0; background: transparent; color: var(--text-dim); cursor: pointer; font: 700 .72rem/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; transition: background .2s ease, color .2s ease; }
.portal-mode__button:hover { color: var(--gold-text); }
/* Hard-coded white, which fails on the gold fill. Every other gold-filled
   control uses --accent-text, which is the ink picked to hold on it. */
.portal-mode__button.is-active { background: var(--gold-gradient); color: var(--accent-text); box-shadow: var(--shadow-gold); }
.members-panel__body h2 { margin: .55rem 0 .8rem; font-family: "Sora", sans-serif; font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -.04em; color: var(--text); }
.members-panel__lead { margin: 0 0 2rem; color: var(--text-dim); line-height: 1.65; }
.member-login { display: grid; gap: .75rem; }
.member-login label { margin-top: .55rem; font: 600 .78rem/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.member-login input { width: 100%; min-height: 58px; padding: 0 1rem; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: 500 1rem/1 "IBM Plex Sans", sans-serif; outline: none; }
.member-login input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .16); }
.member-login textarea { width: 100%; min-height: 110px; padding: 1rem; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: 500 1rem/1.5 "IBM Plex Sans", sans-serif; resize: vertical; }
.member-login textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .16); }
.member-onboarding { max-width: 760px; margin: 0 auto; }
.onboarding-progress { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.6rem; }
.onboarding-progress__bar { flex: 1; height: 4px; background: var(--border); overflow: hidden; }
.onboarding-progress__fill { height: 100%; background: var(--gold-gradient); transition: width .25s ease; }
#onboardingStepLabel { flex-shrink: 0; font: 700 .72rem/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.onboarding-step label { display: block; margin-bottom: .55rem; font: 700 1.05rem/1.4 "Sora", sans-serif; letter-spacing: -.01em; text-transform: none; color: var(--text); }
.onboarding-step input,
.onboarding-step textarea { font-size: 1.05rem; }
.onboarding-actions { display: flex; gap: .75rem; margin-top: 1.1rem; }
.onboarding-actions .btn { margin-top: 0; width: auto; flex: 1; }
.onboarding-actions #onboardingBackBtn { flex: 0 0 auto; }
.member-login #memberCode { font-family: "IBM Plex Mono", monospace; font-size: 1.2rem; letter-spacing: .14em; }
.member-login .btn { margin-top: .9rem; width: 100%; }
.portal-remember { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center; margin-top: .7rem; }
.portal-remember input { width: 18px; min-height: 18px; accent-color: var(--gold); }
.portal-remember label { margin: 0; text-transform: none; letter-spacing: 0; line-height: 1.45; }
.portal-security { margin: 1.2rem 0 0; color: var(--text-faint); font: 500 .68rem/1.55 "IBM Plex Mono", monospace; }
.member-results__head { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; margin-bottom: 1.5rem; }
.member-results__head h2 { margin-bottom: 0; }
.member-purchase { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 1.2rem; padding: 1.5rem 0; border-top: 1px solid var(--border); }
.member-purchase__number { font: 700 1.3rem/1 "IBM Plex Mono", monospace; color: var(--gold-text-dim); opacity: .75; }
.member-purchase h3 { margin: .65rem 0 .35rem; font-family: "Sora", sans-serif; font-size: 1.5rem; color: var(--text); }
.member-purchase p { margin: 0; color: var(--text-dim); }
.member-purchase dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 1.35rem 0; }
.member-purchase dl div { padding: .85rem; border: 1px solid var(--border); background: var(--surface-alt); }
.member-purchase dt { margin-bottom: .35rem; font: 600 .65rem/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.member-purchase dd { margin: 0; overflow-wrap: anywhere; font-size: .88rem; color: var(--text); }
.member-purchase__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.portal-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.portal-service { position: relative; min-height: 310px; overflow: hidden; padding: 1.4rem; border: 1px solid var(--border); background: var(--surface-alt); }
.portal-service h3 { margin: 1rem 0 .55rem; font-family: "Sora", sans-serif; font-size: 1.4rem; color: var(--text); }
.portal-service p { margin: 0; min-height: 3.2em; color: var(--text-dim); line-height: 1.55; }
.portal-service__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.portal-service__key { font-size: 1.4rem; }
.portal-service dl { display: grid; gap: .45rem; margin: 1.2rem 0; }
.portal-service dl div { display: grid; grid-template-columns: 88px 1fr; gap: .65rem; padding-top: .45rem; border-top: 1px solid var(--border-soft); }
.portal-service dt { font: 600 .64rem/1.4 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); }
.portal-service dd { margin: 0; overflow-wrap: anywhere; font-size: .82rem; color: var(--text); }
.portal-service--unlocked { border-color: var(--gold); box-shadow: inset 0 3px 0 var(--gold); }
.portal-service__active-note { align-self: center; color: var(--gold-text); font: 700 .7rem/1.4 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.portal-service--locked { display: grid; place-items: center; width: 100%; text-align: inherit; color: inherit; cursor: pointer; font: inherit; }
.portal-service--locked:hover { border-color: var(--gold); }
.portal-service__blur { position: absolute; inset: 0; padding: 1.4rem; filter: blur(6px); opacity: .34; user-select: none; pointer-events: none; transform: scale(1.025); }
.portal-service__placeholder { width: 72%; height: 48px; margin-top: 1.4rem; border: 1px solid var(--border); background: var(--surface); }
.portal-service__lock { position: relative; z-index: 1; display: grid; justify-items: center; gap: .35rem; max-width: 210px; text-align: center; color: var(--text); }
.portal-service__lock > span { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid var(--gold); border-radius: 50%; background: var(--surface); font-size: 1.5rem; box-shadow: var(--shadow-gold); }
.portal-service__lock strong { margin-top: .35rem; font: 700 .8rem/1 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); }
.portal-service__lock small { color: var(--text-dim); line-height: 1.45; }
.portal-service__lock h3 { margin: .45rem 0 .15rem; text-align: center; }
.portal-quote-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1.5rem; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); }
.portal-quote-modal[hidden] { display: none; }
.portal-quote-modal__dialog { width: min(480px, 100%); padding: 2rem; border: 1px solid var(--gold); background: var(--surface); box-shadow: var(--shadow-gold); text-align: center; }
.portal-quote-modal__icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 1rem; border: 1px solid var(--gold); border-radius: 50%; font-size: 1.45rem; }
.portal-quote-modal__dialog h2 { margin: .65rem 0; }
.portal-quote-modal__dialog > p:not(.section__tag) { color: var(--text-dim); }
.portal-quote-modal__actions { display: flex; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.portal-more-service { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1.25rem 1.4rem; border: 1px solid var(--gold); background: var(--surface-alt); }
.portal-more-service p { margin: 0; font-family: "Sora", sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--text); }
.service-dashboard-page { min-height: calc(100vh - 88px); padding: clamp(3rem, 7vw, 6rem) 0; background: var(--bg); }
.service-dashboard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
.service-dashboard__head h1,.service-dashboard-error h1 { margin: .65rem 0 1rem; font-family: "Sora", sans-serif; font-size: clamp(3rem, 7vw, 6rem); line-height: .95; letter-spacing: -.06em; color: var(--text); }
.service-dashboard__head > div > p:last-child,.service-dashboard-error p { max-width: 720px; color: var(--text-dim); font-size: 1.05rem; line-height: 1.7; }
.service-dashboard__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin-top: 2rem; }
.service-dashboard__card { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--border); background: var(--surface); }
.service-dashboard__card--wide { grid-column: 1 / -1; }
.service-dashboard__card h2 { margin: .65rem 0 1rem; font-family: "Sora", sans-serif; font-size: clamp(1.7rem, 3vw, 2.5rem); color: var(--text); }
.service-dashboard__card > p:not(.section__tag) { color: var(--text-dim); line-height: 1.65; }
.service-dashboard__card dl { display: grid; gap: .8rem; margin: 1.5rem 0 0; }
.service-dashboard__card dl div { display: flex; justify-content: space-between; gap: 1rem; padding-top: .8rem; border-top: 1px solid var(--border-soft); }
.service-dashboard__card dt { font: 600 .7rem/1.4 "IBM Plex Mono", monospace; text-transform: uppercase; color: var(--text-faint); }
.service-dashboard__card dd { margin: 0; color: var(--text); }
@media (max-width: 700px) { .service-dashboard__grid { grid-template-columns: 1fr; }.service-dashboard__card--wide { grid-column: auto; }.service-dashboard__head { display: block; }.service-dashboard__head > .status-pill { display: inline-block; margin-top: 1rem; } }
@media (max-width: 900px) { .members-shell { grid-template-columns: 1fr; }.members-panel { margin-right: 14px; }.members-intro h1 { font-size: clamp(3rem, 12vw, 5rem); } }
@media (max-width: 700px) { .portal-service-grid { grid-template-columns: 1fr; }.portal-more-service { align-items: stretch; flex-direction: column; } }
@media (max-width: 560px) { .members-hero { padding-top: 3.5rem; }.members-panel__secure { display: none; }.members-panel__body { padding: 1.35rem; }.member-purchase { grid-template-columns: 1fr; }.member-purchase dl { grid-template-columns: 1fr; }.member-results__head { display: block; }.member-results__head .btn { margin-top: 1rem; } }
/* Administrator member access controls */
.admin-access-panel{margin:1.4rem 0;padding:1.2rem;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 92%,transparent);display:grid;gap:1rem}
.admin-access-panel>div:first-child{display:grid;gap:.45rem}
.admin-access-code{font-family:var(--mono);font-size:1.05rem;letter-spacing:.12em;color:var(--gold-light);overflow-wrap:anywhere}
.admin-access-panel details{border-top:1px solid var(--border);padding-top:1rem}
.admin-access-panel summary{cursor:pointer;font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text)}
.admin-access-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin:1rem 0}
.admin-access-option{display:flex;align-items:center;gap:.65rem;padding:.75rem;border:1px solid var(--border);background:var(--bg);font-weight:600}
.admin-access-option input{width:1.1rem;height:1.1rem;accent-color:var(--gold-text-dim)}
@media(max-width:700px){.admin-access-grid{grid-template-columns:1fr}}

/* WCAG 1.4.1 (Use of Colour) — a link sitting inside a block of text must be
   identifiable without relying on colour. These inline links were gold-on-grey
   at 1.54:1 against the surrounding copy, well under the 3:1 that would let
   colour alone carry the meaning, so they carry an underline instead. */
.activate-footnote a,
.legal-page p a,
.form-consent a,
.footer__legal-links a,
.hero__note a {
  text-decoration: underline;
  text-underline-offset: 2px;
}









/* ── live example sites ────────────────────────────────────────────────
   The two website examples are the real sites running in the page rather
   than screenshots of them. Each renders at its true desktop width and is
   scaled down to the card, so the layout, the type and the interactions
   are the genuine article. The frame is inert to the pointer in the card,
   because a visitor scrolling the page should not have the wheel captured
   by a site inside it, so the link underneath is how you get into one. */
.showcase-card__body--live {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--bg-alt);
}

.showcase-card__body--live iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  transform-origin: top left;
  pointer-events: none;
}

.showcase-card__open {
  margin-top: 10px;
}

.showcase-card__open a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 0.78rem/1 "Sora", sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.45);
  padding-bottom: 3px;
}

.showcase-card__open a:hover {
  color: var(--gold-text-dim);
  border-bottom-color: var(--gold-text-dim);
}


/* ── concept gallery ───────────────────────────────────────────────────
   Eight example sites, each shown on a screen rather than flat, so the
   card reads as a site that is running rather than a picture of a layout.
   The image carries the whole card: no chrome around it, no caption bar,
   nothing competing with the work. */
.ex-grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.ex-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.ex-card:hover,
.ex-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: var(--shadow);
}

a.ex-card--link {
  color: inherit;
  text-decoration: none;
}

.ex-more {
  margin: 34px 0 0;
  text-align: center;
}

.ex-card__screen {
  position: relative;
  background: #000;
  overflow: hidden;
}

.ex-card__screen img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

.ex-card:hover .ex-card__screen img {
  transform: scale(1.03);
}

/* A faint sheen across the screen, so a still photograph of a laptop reads
   as lit rather than printed. */
.ex-card__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.045) 48%,
    rgba(255, 255, 255, 0) 58%);
}

.ex-card__body {
  padding: 20px 22px 24px;
}

.ex-card__sector {
  font: 700 0.66rem/1 "Sora", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text-dim);
  margin: 0 0 9px;
}

.ex-card__body h3 {
  font-size: 1.22rem;
  margin: 0 0 8px;
}

.ex-card__body p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0;
}

.ex-note {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  font-size: 0.86rem;
  color: var(--text-faint);
  max-width: 68ch;
}

@media (prefers-reduced-motion: reduce) {
  .ex-card,
  .ex-card__screen img { transition: none; }
  .ex-card:hover { transform: none; }
  .ex-card:hover .ex-card__screen img { transform: none; }
}