/* ════════════════════════════════════════════════════════════════════
   Royal Kings — WARM theme, derived from the logo

   Every value below was sampled out of the logo art rather than guessed.
   Source: the logo panel of `Pricing and Style/Main_1.jpg`, upscaled and
   pixel-sampled per region (crown, car body, wordmark, sub-wordmark).

   WHAT THE LOGO ACTUALLY SAYS
   ---------------------------
   1. The ground is PURE BLACK. #000000, measured across all four regions.
      Not the warm brown-black the old site used — that was the old site's
      choice, not the mark's.
   2. There are TWO METALS, not one. "ROYAL KINGS" is a gold gradient;
      "AUTO CARE" is CHROME. The car is chrome. No theme here used chrome
      at all before this, which was the biggest thing being left on the
      table.
        gold    shadow #94793C · mid #C6A94F · highlight #E2CE8D
        chrome  shadow #7E7E7E · mid #BFBFBD · highlight #E4E4E2
        car body runs slightly olive-warm: #868478 · #A7A49B · #C8C7C2
   3. The gold is never flat — it is always a gradient, light at the top of
      a letterform and bronze at the foot.
   4. The type is a HIGH-CONTRAST SERIF in caps: hairline-fine flat serifs
      against thick stems. That is a Didone/transitional voice, NOT the
      Roman inscriptional face the classic theme uses — Cinzel has low
      contrast and chunky serifs, which is a different animal. Playfair
      Display is the closest robust match on Google Fonts.
   5. Hierarchy inside the mark is set by METAL and TRACKING, not by size
      alone: gold + normal tracking for the name, chrome + very wide
      tracking for the descriptor. That maps directly onto heading vs label.
   6. The car is not a filled shape — it is EDGE-LIT. Thin bright highlight
      strokes on black, like a panel catching a light in a dark bay.
   7. The signature mark is a four-point specular sparkle, so that replaces
      the v3 bracket notch here.

   Warmth therefore comes from the LIGHT, not the surfaces — black room,
   gold lamp. That is what the mark does, and it is why this still reads
   warm next to v3 despite a near-neutral ground.
   ════════════════════════════════════════════════════════════════════ */

:root[data-theme='sign'] {
  /* Pure black, opened up with the faintest olive-warm lift measured off
     the car body so the surfaces are not clinically cool. */
  --void:       #000000;
  --carbon:     #060605;
  --graphite:   #0C0B0A;
  --graphite-2: #121110;
  --steel:      #191816;
  --steel-2:    #22201D;
  --edge:       #2B2925;
  --edge-2:     #3A3732;
  --edge-gold:  rgba(198, 169, 79, 0.32);

  /* Gold — measured. Lighter and more champagne/brass than the #C9A227 the
     other two themes use, which was the old site's value, not the mark's. */
  --gold:      #C6A94F;
  --gold-hi:   #E2CE8D;
  --gold-lo:   #94793C;
  --gold-ink:  #000000;
  --gold-veil: rgba(198, 169, 79, 0.10);
  --gold-wash: rgba(198, 169, 79, 0.055);

  /* Chrome — the second metal, straight off "AUTO CARE" and the car. */
  --chrome:    #BFBFBD;
  --chrome-hi: #E4E4E2;
  /* The logo's chrome shadow measures #7E7E7E, which clears 4.5:1 on pure
     black but drops to 4.37:1 on the featured card's lighter surface — the
     classic "grey tuned for the page bg fails on the panel" trap. Lifted the
     minimum that clears it everywhere (5.2:1 on --steel, 5.9:1 on black). */
  --chrome-lo: #8A8A86;

  /* Text follows the chrome ramp: neutral off-white, not cream. The mark's
     descriptor measures #E4E4E2 — silver, with no warmth in it. */
  --text:   #E8E8E6;
  --text-2: #BFBFBD;
  --text-3: #93938F;
  --text-4: #6E6E6A;

  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  /* Labels are the "AUTO CARE" role: same serif, chrome, very wide caps. */
  --mono:    'Playfair Display', Georgia, serif;

  --r-xs: 3px; --r-sm: 6px; --r-md: 12px; --r-pill: 999px;

  --sh-inset: inset 0 1px 0 rgba(228, 228, 226, 0.06);
  --sh-lift:  0 22px 56px -30px rgba(0, 0, 0, 1);
  --sh-panel: 0 44px 90px -46px rgba(0, 0, 0, 1);
}

/* ── Type: high-contrast serif caps ──────────────────────────────────
   Playfair has real hairlines, so it must not be squeezed — font-stretch
   goes to normal and the tracking turns positive, the way the wordmark
   sets it. */
:root[data-theme='sign'] .hero-h1 {
  font-stretch: normal;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.04;
  font-size: clamp(2.5rem, 1.4rem + 5vw, 5.1rem);
}
:root[data-theme='sign'] .sec-head h2,
:root[data-theme='sign'] .cta h2 {
  font-stretch: normal;
  font-weight: 700;
  letter-spacing: 0.008em;
  line-height: 1.1;
  text-transform: none;   /* caps in a hairline serif close up and grey out */
}
:root[data-theme='sign'] .cta h2 { font-size: clamp(1.8rem, 1.24rem + 2.35vw, 2.9rem); }
:root[data-theme='sign'] h2[style*='text-transform'] {
  text-transform: none !important;
  font-stretch: normal !important;
  letter-spacing: 0.008em !important;
}
:root[data-theme='sign'] .pq p { font-stretch: normal; letter-spacing: 0.008em; }

/* The gold gradient, exactly as the wordmark renders it: highlight at the
   cap line, bronze at the baseline. Display sizes only — a hairline serif
   fading to bronze is unreadable at label sizes. */
:root[data-theme='sign'] :is(.hero-h1, .sec-head h2, .cta h2, .pq p) em,
:root[data-theme='sign'] :is(h1, h2) .gold {
  font-style: normal;
  background: linear-gradient(176deg, var(--gold-hi) 6%, var(--gold) 52%, var(--gold-lo) 97%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
:root[data-theme='sign'] .gold { color: var(--gold); }

/* Labels = the "AUTO CARE" treatment: chrome, wide-tracked serif caps.
   .pkg-name is deliberately NOT in this list: in this theme the tier label is
   the filled gold bar (see the corrections block), so chrome text on a gold
   fill would be the one place the two metals collide. */
:root[data-theme='sign'] :is(.kicker, .sec-head-meta, .spec-k, .tile-k,
  .field label, .foot h3, .crumb, .hero-crumb, .foot-bar, .pq cite, .foot-svc) {
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  color: var(--chrome-lo);
}
:root[data-theme='sign'] :is(.hero-fine, .seg-note, .mrow-basis, .addon-basis, .pkg-meta) {
  letter-spacing: 0.14em;
}
:root[data-theme='sign'] .btn { font-family: var(--display); font-weight: 700; letter-spacing: 0.2em; }
:root[data-theme='sign'] .brand-txt b { font-family: var(--display); font-weight: 700; font-stretch: normal; letter-spacing: 0.04em; }
:root[data-theme='sign'] .brand-txt span { color: var(--chrome-lo); letter-spacing: 0.3em; }

/* Numerals in the serif — Playfair's figures are the point of using it. */
:root[data-theme='sign'] :is(.pkg-price, .spec-v, .estimate-v, .step-n) {
  font-stretch: normal; font-weight: 700; letter-spacing: 0.002em;
}
:root[data-theme='sign'] .spec-v small,
:root[data-theme='sign'] .mrow-price,
:root[data-theme='sign'] .addon-price { font-family: var(--sans); letter-spacing: 0.02em; }

/* ── Surfaces: black room, gold lamp ─────────────────────────────── */
:root[data-theme='sign'] body {
  background:
    radial-gradient(1100px 800px at 50% -8%, rgba(198, 169, 79, 0.07), transparent 62%),
    linear-gradient(180deg, var(--carbon), var(--void) 46%);
  background-attachment: fixed;
  background-color: var(--void);
}
/* EXPERIMENT: a real photograph behind the hero. The site is 2.9%
   photography; the premium studios I looked at run ~60% on the homepage.
   Test whether the existing work photos can carry it before claiming they can. */
:root[data-theme='sign'] .hero-bg {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.93) 0%, rgba(0,0,0,0.90) 34%, rgba(0,0,0,0.94) 68%, rgb(0,0,0) 100%),
    var(--hero-img, none);
  background-size: cover, cover;
  background-position: center, var(--hero-pos, center 45%);
}

/* Edge-lit, like the car: a hard chrome highlight raking a dark panel. */
:root[data-theme='sign'] .plate {
  background-image:
    linear-gradient(114deg, transparent 32%, rgba(228, 228, 226, 0.12) 45%, rgba(228, 228, 226, 0.02) 52%, transparent 68%),
    radial-gradient(116% 86% at 18% 0%, rgba(198, 169, 79, 0.10), transparent 58%),
    linear-gradient(168deg, var(--steel) 0%, var(--void) 90%);
}
:root[data-theme='sign'] .card,
:root[data-theme='sign'] .pkg { background: linear-gradient(164deg, var(--graphite-2), var(--void) 76%); }
:root[data-theme='sign'] .pkg-featured { background: linear-gradient(146deg, var(--steel), var(--graphite) 70%); }
:root[data-theme='sign'] .seg-btn[aria-pressed='true'] {
  background: linear-gradient(176deg, var(--gold-hi) 4%, var(--gold) 55%, var(--gold-lo) 100%);
  color: var(--gold-ink); box-shadow: none; font-weight: 700;
}
:root[data-theme='sign'] .seg-btn[aria-pressed='true'] .seg-s { color: var(--gold-ink); }

/* ── Signature: the four-point sparkle off the car's shoulder ─────── */
:root[data-theme='sign'] .bkt::before,
:root[data-theme='sign'] .bkt-br::after {
  width: 22px; height: 22px; border: 0;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.55 8.1 3.9 11.45 12 12-8.1.55-11.45 3.9-12 12-.55-8.1-3.9-11.45-12-12C8.1 11.45 11.45 8.1 12 0Z' fill='%23E4E4E2'/%3E%3C/svg%3E");
}
:root[data-theme='sign'] .bkt::before { top: -4px; left: -4px; }
:root[data-theme='sign'] .bkt-br::after { right: -4px; bottom: -4px; opacity: 0.5; }

/* The mark sits inside a hairline frame; the grain would grey these
   surfaces, so it softens. */
:root[data-theme='sign'] body::after { opacity: 0.03; mix-blend-mode: soft-light; }

/* ════════════════════════════════════════════════════════════════════
   CORRECTIONS AGAINST THE REAL-WORLD COLLATERAL (2026-08-28)

   The block above was derived from the logo alone. James then supplied the
   A-frame sign and the tri-fold brochure — the two pieces customers actually
   hold and stand in front of. Three things the logo could not tell me:

   1. THE METALS HAVE ROLES, AND I HAD THEM BACKWARDS. On the sign and the
      brochure, "ROYAL KINGS" is the GOLD gradient and "AUTO CARE" is CHROME.
      The logo-only reading gave gold to the descriptor. Gold is the name;
      chrome is everything subordinate to it.

   2. THE FILLED GOLD BAR IS THEIR SIGNATURE COMPONENT — and no theme I
      built had it. Solid gold-olive rectangle, dark text, flush left,
      label-sized caps. It carries BASIC / STANDARD / PREMIUM on the
      brochure and INTERIOR / EXTERIOR / ENGINE BAY / BODY BUFFING on the
      sign. It is the one detail that appears in BOTH pieces, which makes it
      the mark's real signature — not the sparkle I picked off the car.

   3. EVERY PANEL SITS INSIDE A HAIRLINE FRAME. Thin, light, inset from the
      edge. On the sign it frames the board; on the brochure it frames each
      of the three columns.

   Deliberate divergence: the brochure sets BODY copy in the serif. Held at
   the sans here — Playfair at 16px on a phone is a readability tax the print
   piece does not have to pay. Display, labels and figures are serif; running
   prose is not.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Metals in their real roles ──────────────────────────────────
   Scoped to the brand wordmark only. On every other page the <em> is an
   accent WORD ("Ceramic Coating in <em>Winnipeg</em>") where gold is
   correct and chrome would read as broken. */
:root[data-theme='sign'] .hero-h1 .wm-a {
  background: linear-gradient(176deg, var(--gold-hi) 6%, var(--gold) 52%, var(--gold-lo) 97%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
:root[data-theme='sign'] .hero-h1 em.wm-b {
  font-style: normal;
  background: linear-gradient(176deg, var(--chrome-hi) 8%, var(--chrome) 54%, var(--chrome-lo) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.06em;   /* the descriptor is tracked wider than the name */
}

/* ── 2. The signature: the filled gold bar ──────────────────────────
   Same detail, two roles (per the signature-detail rule): the tier label on
   pricing, and the featured badge. Not applied to section eyebrows — a bar
   above every section would turn a signature into wallpaper. */
:root[data-theme='sign'] .pkg-name {
  display: inline-block;
  background: linear-gradient(176deg, var(--gold-hi) 4%, var(--gold) 56%, var(--gold-lo) 100%);
  color: var(--gold-ink);
  font-weight: 700;
  padding: 0.34em 1.1em 0.3em;
  margin-left: calc(var(--s-6) * -1);   /* flush to the panel edge, as printed */
  padding-left: var(--s-6);
  letter-spacing: 0.22em;
}
:root[data-theme='sign'] .pkg-featured .pkg-name { color: var(--gold-ink); }

:root[data-theme='sign'] .pkg-badge {
  background: linear-gradient(176deg, var(--gold-hi) 4%, var(--gold) 56%, var(--gold-lo) 100%);
  color: var(--gold-ink);
  border-radius: 0;
  font-weight: 700;
  letter-spacing: 0.2em;
}

/* ── 3. The hairline frame ──────────────────────────────────────────
   Chrome at low alpha, inset — the printed frame is a thin light rule, not
   a border in the CSS sense, so it sits INSIDE the panel rather than on it. */
:root[data-theme='sign'] :is(.card, .pkg) {
  position: relative;
  border-color: rgba(191, 191, 189, 0.14);
}
:root[data-theme='sign'] :is(.card, .pkg)::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(228, 228, 226, 0.10);
  pointer-events: none;
  border-radius: 2px;
}
/* The featured tier carries the frame in gold, the way the brochure's
   priced panels do. */
:root[data-theme='sign'] .pkg-featured::after { border-color: var(--edge-gold); }
/* .bkt already owns ::before/::after for the sparkle on some cards — the
   frame is drawn on the panel, the sparkle on its corner, so they coexist;
   but a card that is BOTH gets one ornament too many. Sparkle yields. */
:root[data-theme='sign'] :is(.card, .pkg).bkt::before { display: none; }

/* The badge straddles the card's top border in v3 (translateY(-50%)), which
   works when there is one line to straddle. This theme draws a second line 7px
   inside, so a straddling badge floats between the two and reads as detached.
   Tuck it into the frame's corner instead — flush, square, the way every gold
   bar on the printed material meets an edge. */
:root[data-theme='sign'] .pkg-badge {
  top: 7px;
  right: 7px;
  transform: none;
  border-radius: 0;
  padding: 0.3em 0.9em 0.26em;
}