@charset "UTF-8";
/* =====================================================================
   LPS Booking System — THEME C (bone / ink / terracotta) skin layer
   ---------------------------------------------------------------------
   The 2026 LPS rebrand, matched to the website (website/shared/theme-c.css).
   Loaded AFTER theme-e.css + theme-a.css; every rule is scoped under
   html[data-site-theme="c"], so it only takes effect when that attribute
   is set (by brand.js from the admin toggle, or hardcoded on <html>).

   Theme C is a LIGHT theme like Theme E, so most components inherit
   correctly once the tokens are redefined (Part 1). The only real work is
   splitting the primary ACTION colour (terracotta) out from the ink
   SURFACE colour — exactly how theme-a.css splits actions to green — plus
   the ink header + live-text wordmark (Parts 2–4).

   A theme = colour + font + the brand's defining button shape (radius)
   ONLY; layout/type-scale stay in the base (DESIGN_PRINCIPLES #14, with
   the 4px-button radius carried per-brand as a conscious extension).

   Source tokens (website/shared/theme-c.css):
     bone #E9E3D6 · soft #F0EBDF · card #F1ECE0 · boucle #DAD1C2
     ink #2C2E26 · terracotta #B4552B · rust #7E3A22 · olive #6E7255
     Geist (headings) · Bricolage Grotesque (body) · Epilogue (wordmark)
   ===================================================================== */

/* ---- Part 1: redefine the Theme E tokens to Theme C values ---------- */
html[data-site-theme="c"]{
  /* Bone ground + warm surfaces */
  --bg:#E9E3D6;
  --bg-soft:#F0EBDF;
  --bg-card:#F1ECE0;
  --bg-deep-cream:#E1D9C9;

  /* Ink — the dark surface colour (header, footer, featured cards, dark
     bands). Same name as Theme E's walnut so all existing references work. */
  --bg-deep:#2C2E26;
  --bg-deep-soft:#3A3C31;

  --text:#2C2E26;
  --text-muted:rgba(44,46,38,.76);
  --text-dim:rgba(44,46,38,.55);
  --on-dark:#E9E3D6;
  --on-dark-muted:rgba(233,227,214,.62);

  --border:rgba(44,46,38,.18);
  --border-soft:rgba(44,46,38,.11);
  --border-dark:rgba(233,227,214,.14);

  /* Terracotta replaces the warm amber accent — this single swap
     auto-recolours the monthly toggle, the duration slider, price-save
     pills, ticks, stars, focus rings, footer headings, the express pill
     and every headline accent word. */
  --accent-amber:#B4552B;
  --accent-amber-deep:#7E3A22;

  /* Theme C brand extras (used by this file's action overrides) */
  --c-accent:#B4552B;
  --c-accent-hover:#7E3A22;   /* rust, the brand's own hover — was #9C4623, off-palette */
  --c-on-accent:#FAF7F1;   /* text on a terracotta fill: 4.59:1, clears the 4.5 minimum
                              (bone would be 3.84). The FILL itself is untouched. */
  --c-olive:#6E7255;
  --c-olive-hover:#5C6047;
  --c-ink:#2C2E26;
  --c-bone:#E9E3D6;
  --c-danger:#8C3B2E;      /* the brand's ONE red: destructive + "not included" */
  --c-oak:#A9835C;         /* warm 'attention / pending', never success */
  --c-walnut:#55432F;

  /* Theme A's green token, re-pointed to OLIVE. ~200 places across the pages
     use var(--a-green, fallback) for the "green means go / selected / done"
     moments (the Express pill's wave, delivery selected states, the
     success-page timeline). Defining it here recolours them all in one line;
     without it they'd fall back to Spotify green or amber. */
  --a-green:#6E7255;

  /* The serif-italic accent face (Newsreader) has no place in the 2026
     rebrand — accent words render in the sans instead. Pure token swap. */
  --font-serif:'Geist',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  /* 4px buttons — Theme C's defining button shape. Cards stay 8px. */
  --radius-btn:4px;
  --radius-pill:4px;
  --radius-input:8px;

  /* Bricolage body; Geist headings keep their explicit --font-sans, so we
     DON'T touch --font-sans (that keeps every explicit-Geist heading right
     with zero enumeration). Epilogue drives the wordmark. */
  --font-body:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-logo:'Epilogue',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  background:var(--bg);
  color-scheme:light;
}

/* Body + every inherit-font element → Bricolage. Headings that explicitly
   set font-family:var(--font-sans) stay Geist automatically. */
html[data-site-theme="c"] body{font-family:var(--font-body)}
/* The few heading-type elements that use font-family:inherit and should be
   Geist (package names) rather than the Bricolage body. */
html[data-site-theme="c"] .tier-name{font-family:var(--font-sans)}

/* ---- Part 2: primary ACTIONS → terracotta -------------------------- */
/* In the base, buttons/CTAs paint with --bg-deep, which under Theme C is the
   ink SURFACE colour. Split the ACTION out to terracotta (mirrors A→green). */
html[data-site-theme="c"] .btn,
html[data-site-theme="c"] .auth-primary-btn,
html[data-site-theme="c"] .info-cta-primary,
html[data-site-theme="c"] .portal-btn-primary,
html[data-site-theme="c"] .cf-submit,
html[data-site-theme="c"] .cd-book-btn{
  background:var(--c-accent);color:var(--c-on-accent);border:0;
}
html[data-site-theme="c"] .btn:hover,
html[data-site-theme="c"] .auth-primary-btn:hover,
html[data-site-theme="c"] .info-cta-primary:hover,
html[data-site-theme="c"] .portal-btn-primary:hover,
html[data-site-theme="c"] .cf-submit:hover,
html[data-site-theme="c"] .cd-book-btn:hover{ background:var(--c-accent-hover);color:var(--c-on-accent); }

/* Variants the broad .btn action rule above must NOT paint terracotta:
   ghost buttons stay a quiet outline; the "Let's chat" enquiry buttons take
   OLIVE — the rebrand's filled secondary (matches the website's "Get in
   touch" / "Talk about a plan" buttons). */
html[data-site-theme="c"] .btn.btn-ghost{ background:transparent;color:var(--text);border:1px solid var(--border); }
html[data-site-theme="c"] .btn.btn-ghost:hover{ background:transparent;border-color:var(--text); }
html[data-site-theme="c"] .btn.btn-inquire{ background:var(--c-olive);color:var(--c-on-accent); }
html[data-site-theme="c"] .btn.btn-inquire:hover{ background:var(--c-olive-hover); }

/* Progress bar fill → terracotta */
html[data-site-theme="c"] .progress-fill{ background:var(--c-accent); }

/* Headline accent words → terracotta, upright (the website's Theme C
   headline-accent rule; same selector surface Theme A gives its gradient,
   plus the contact page's own heading) */
html[data-site-theme="c"] .step-title .accent,
html[data-site-theme="c"] .hero-e h1 em,
html[data-site-theme="c"] .contact-head h1 .accent,
html[data-site-theme="c"] .portal-h1 .accent{ color:var(--c-accent); font-style:normal; }

/* Field focus → terracotta ring (base focuses to --bg-deep = ink) */
html[data-site-theme="c"] input:focus,
html[data-site-theme="c"] select:focus,
html[data-site-theme="c"] textarea:focus,
html[data-site-theme="c"] .portal-field-input:focus{ border-color:var(--c-accent); }

/* ---- Part 3: header — solid ink bar + live-text wordmark ----------- */
html[data-site-theme="c"] .site-header{
  background:#2C2E26;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid rgba(233,227,214,.12);
}
/* Nav links use --text (ink) in the base → invisible on the ink bar. Bone. */
html[data-site-theme="c"] .nav-menu a,
html[data-site-theme="c"] .nav-links > li > a,
html[data-site-theme="c"] .nav-links > li > .nav-dropdown-trigger,
html[data-site-theme="c"] .nav-right a:not(.nav-cta),
html[data-site-theme="c"] .nav-actions a:not(.nav-cta):not(.nav-ghost),
html[data-site-theme="c"] .nav-login{ color:rgba(233,227,214,.78); }
html[data-site-theme="c"] .nav-menu a:hover,
html[data-site-theme="c"] .nav-links > li > a:hover,
html[data-site-theme="c"] .nav-login:hover{ color:#E9E3D6;opacity:1; }

/* Header CTA ("My account" / "Log in") = a bone button on the ink bar
   (Theme C's header-CTA treatment), distinct from the terracotta in-flow
   primary buttons above. */
html[data-site-theme="c"] .nav-cta{ background:#E9E3D6;color:#2C2E26;border:1px solid #DAD1C2; }
html[data-site-theme="c"] .nav-cta:hover{ background:#DAD1C2; }

/* Sign-out ghost button → bone outline on ink */
html[data-site-theme="c"] .nav-actions a.nav-ghost{ color:rgba(233,227,214,.85);border-color:rgba(233,227,214,.28); }
html[data-site-theme="c"] .nav-actions a.nav-ghost:hover{ border-color:#E9E3D6; }

/* Logo → hide the image, show the Epilogue live-text wordmark
   (injected by site-chrome.js; hidden by default outside Theme C). */
html[data-site-theme="c"] .nav-logo img{ display:none; }
html[data-site-theme="c"] .nav-wordmark{
  display:inline-flex;align-items:center;gap:.3em;
  font-family:var(--font-logo);font-size:18px;font-weight:500;
  letter-spacing:-.03em;color:#E9E3D6;white-space:nowrap;
}
/* The 2026 rebrand's buttons are flat — no chevron. The new website's .nav-cta has
   none, so Theme C drops the base stylesheet's "›" for header parity. */
html[data-site-theme="c"] .nav-cta::after{ content:none; }
html[data-site-theme="c"] .nav-wordmark .wm-pre{ font-weight:500; }
html[data-site-theme="c"] .nav-wordmark .wm-post{ font-weight:400; }
html[data-site-theme="c"] .nav-wordmark .wm-reel{ color:#C4B79E;font-weight:500; }
html[data-site-theme="c"] .nav-wordmark .wm-stamp{ display:none;font-weight:500; }
@media (max-width:820px){ html[data-site-theme="c"] .nav-wordmark{ font-size:16px; } }
/* Small screens: the three-word wordmark (~194px) crowds the header row and
   pushes "Sign out" off a 375px viewport (the Theme E image logo squeezes to
   ~95px there). Swap to the rebrand's compact lowercase "lps" stamp — the
   guidelines' own small-space lockup. */
@media (max-width:480px){
  html[data-site-theme="c"] .nav-wordmark .wm-pre,
  html[data-site-theme="c"] .nav-wordmark .wm-reel,
  html[data-site-theme="c"] .nav-wordmark .wm-post{ display:none; }
  html[data-site-theme="c"] .nav-wordmark .wm-stamp{ display:inline;font-size:21px; }
}

/* ---- Part 4: site-chrome footer — the website's ink footer ---------- */
/* The footer band already flips to ink via --bg-deep; the one divergence is
   the column headings, which the chrome paints in the accent colour. The
   website's Theme C footer uses muted bone headings — match it. */
html[data-site-theme="c"] .site-footer .sf-col h4{ color:rgba(233,227,214,.5); }

/* ---- Part 5: setup display → light bone + olive -------------------- */
/* The setup cards + gallery modal were copied verbatim from the OLD dark
   website section, so they scope their own dark tokens (incl. --green =
   Spotify green) and ignore the theme. Re-point those tokens to the Theme C
   light palette, and swap the green for OLIVE (a Theme C palette colour). */
html[data-site-theme="c"] .setup-grid,
html[data-site-theme="c"] .setups-panel{
  --surface:#F1ECE0;
  --surface-2:#E9E3D6;
  --border:rgba(44,46,38,.15);
  --text:#2C2E26;
  --text-muted:rgba(44,46,38,.72);
  --text-dim:rgba(44,46,38,.52);
  --green:#6E7255;              /* olive — the Theme C "chosen" green */
}
/* the few hardcoded Spotify-green rgba hovers → olive rgba (110,114,85) */
html[data-site-theme="c"] .lps-example:hover{ background:rgba(110,114,85,.10); }

html[data-site-theme="c"] .lps-example{ background:rgba(44,46,38,.05); }

/* The setups EMBED (setups-embed.html) reuses the same card family under its
   own .setups-* wrappers (the token re-point above covers .setups-panel) —
   light-skin its remaining hardcoded-dark furniture too. Inert on pages
   without these classes. */
html[data-site-theme="c"] .setups-tabs{ background:var(--bg-soft);border-color:var(--border); }
html[data-site-theme="c"] .setups-tab{ color:var(--text-muted); }
html[data-site-theme="c"] .setups-tab:hover{ color:var(--text); }
html[data-site-theme="c"] .setups-tab.active{ background:var(--c-ink);color:var(--c-bone); }
html[data-site-theme="c"] .setups-placeholder{ border-color:var(--border);color:var(--text-dim);background:var(--bg-soft); }
html[data-site-theme="c"] .setups-placeholder strong{ color:var(--text); }

/* ---- Part 6: SELECTED / chosen items → olive ---------------------- */
/* Olive = "you've picked this" (distinct from terracotta = "do this next"),
   which also replaces the leftover Theme A green as the selection colour. */
html[data-site-theme="c"] .tier.selected{ border-color:var(--c-olive);box-shadow:0 0 0 1px var(--c-olive) inset; }
/* The SELECTED card's CTA is the in-tier "Continue ›" — a "do this next"
   action, so it takes TERRACOTTA (the card's olive selected outline stays). */
html[data-site-theme="c"] .tier.selected .tier-cta,
html[data-site-theme="c"] .tier.featured.selected .tier-cta{ background:var(--c-accent);color:var(--c-on-accent);border-color:var(--c-accent); }
html[data-site-theme="c"] .tier.selected .tier-cta:hover,
html[data-site-theme="c"] .tier.featured.selected .tier-cta:hover{ background:var(--c-accent-hover);color:var(--c-on-accent); }
html[data-site-theme="c"] .choice.selected{ border-color:var(--c-olive);box-shadow:0 0 0 1px var(--c-olive) inset; }
html[data-site-theme="c"] .choice.selected .choice-check{ background:var(--c-olive);border-color:var(--c-olive);color:var(--c-on-accent); }
html[data-site-theme="c"] .cal-day.selected{ background:var(--c-olive) !important;color:var(--c-on-accent) !important;border-color:var(--c-olive) !important; }
html[data-site-theme="c"] .slot.selected{ background:var(--c-olive);color:var(--c-on-accent);border-color:var(--c-olive); }
html[data-site-theme="c"] .addon.selected .addon-add-btn{ background:var(--c-olive);color:var(--c-on-accent);border-color:var(--c-olive); }
/* Quantity add-on stepper matches the olive "Added" state when selected (Jacob, 22 Jul). */
html[data-site-theme="c"] .addon-qty.added{ background:var(--c-olive);border-color:var(--c-olive);color:var(--c-on-accent); }
html[data-site-theme="c"] .addon-qty.added button{ color:var(--c-on-accent); }
html[data-site-theme="c"] .portal-nav-item.active{ background:var(--c-olive);color:var(--c-on-accent); }


/* ---- Part 7: the "Popular" package → light + terracotta (not gray) --- */
/* The base paints the featured tier a solid dark (--bg-deep) card, which under
   Theme C reads as a flat gray slab. Instead: a LIGHT card that stands out by
   a terracotta border + badge + lift + a terracotta CTA. */
html[data-site-theme="c"] .tier.featured{
  background:var(--bg-card);
  color:var(--text);
  border:2px solid var(--c-accent);
  box-shadow:0 18px 44px rgba(44,32,18,.16);
}
html[data-site-theme="c"] .tier.featured:hover{ border-color:var(--c-accent); }
/* flip every "on-dark" colour back to ink now the featured card is light */
html[data-site-theme="c"] .tier.featured .tier-name{ color:var(--text); }
html[data-site-theme="c"] .tier.featured .tier-tagline{ color:var(--text-muted); }
html[data-site-theme="c"] .tier.featured .tier-from,
html[data-site-theme="c"] .tier.featured .tier-price-sub{ color:var(--text-dim); }
html[data-site-theme="c"] .tier.featured .tier-price-big,
html[data-site-theme="c"] .tier.featured .tier-price-now,
html[data-site-theme="c"] .tier.featured .tier-price-quote{ color:var(--text); }
html[data-site-theme="c"] .tier.featured .tier-price-big.struck{ color:var(--text-muted); }
html[data-site-theme="c"] .tier.featured .tier-divider{ background:var(--border-soft); }
html[data-site-theme="c"] .tier.featured .tier-features li.included{ color:var(--text); }
html[data-site-theme="c"] .tier.featured .tier-features li.excluded{ color:var(--text-dim); }
/* Featured (Popular) card's CTA matches the OTHER cards whenever it is not
   selected — a permanent terracotta fill read as "already selected" next to
   the real selection (Jacob, 22 Jul; replaces the old always-filled rule).
   The terracotta fill now comes ONLY from the .selected rules above, so
   exactly one filled button ever shows. Also overrides the base theme's
   own always-filled featured CTA. */
html[data-site-theme="c"] .tier.featured:not(.selected) .tier-cta{ background:transparent;color:var(--text);border-color:var(--text); }
html[data-site-theme="c"] .tier.featured:not(.selected) .tier-cta:hover{ background:var(--text);color:var(--bg); }
/* EXCEPTION — the website pricing embed keeps the filled featured CTA: its
   cards have no selected state (clicking hands over to service.html), so the
   "reads as already selected" confusion can't arise there, and the filled
   button stays the deliberate eye-draw on the homepage band. */
html.embed-cards[data-site-theme="c"] .tier.featured:not(.selected) .tier-cta{ background:var(--c-accent);color:var(--c-on-accent);border-color:var(--c-accent); }
html.embed-cards[data-site-theme="c"] .tier.featured:not(.selected) .tier-cta:hover{ background:var(--c-accent-hover);color:var(--c-on-accent); }
/* POPULAR badges → terracotta to match the border (were pale-pink remnants).
   Covers the pricing cards AND the add-on cards' photo-overlay badge. */
html[data-site-theme="c"] .tier-popular,
html[data-site-theme="c"] .addon-popular{ background:var(--c-accent);color:var(--c-on-accent);box-shadow:0 4px 14px rgba(44,32,18,.18); }

/* ---- inclusion ticks → PROMINENT green tick / red X (Jacob, round 18):
   filled coloured circles + white glyph so included vs not-included reads at a
   glance, across every package card (light + featured, in-flow + the embed) --- */
html[data-site-theme="c"] .tier li.included .feature-icon,
html[data-site-theme="c"] .tier.featured li.included .feature-icon{ color:#fff;background:#2F9E44; }
html[data-site-theme="c"] .tier li.excluded .feature-icon,
html[data-site-theme="c"] .tier.featured li.excluded .feature-icon{ color:#fff;background:var(--c-danger); }

/* ---- Part 8: the PRICING EMBED sits on the website's INK band ------- */
/* by-service.html?embed=1 adds html.embed-cards and strips card grounds to
   transparent. On the website's Theme C the band behind the iframe is INK,
   so the embed flips to on-dark tokens: bone text, translucent bone borders.
   (Mirrors how the Theme A embed reads on its black band.) */
html.embed-cards[data-site-theme="c"]{
  --text:#E9E3D6;
  --text-muted:rgba(233,227,214,.75);
  --text-dim:rgba(233,227,214,.55);
  --border:rgba(233,227,214,.24);
  --border-soft:rgba(233,227,214,.14);
  --bg-soft:rgba(233,227,214,.08);
  background:transparent;
}
/* The outlined package buttons: the base hover paints background:var(--text)
   with text var(--bg), an invert that assumes a light page. On the ink band
   BOTH resolve to bone (--bg is never re-pointed here), so the button vanished
   into its own fill on hover. Don't invert: keep the bone text and wash the
   inside with a translucent bone instead, so the outline reads throughout. */
html.embed-cards[data-site-theme="c"] .tier:not(.featured):not(.selected) .tier-cta:hover{
  background:rgba(233,227,214,.14);
  color:var(--text);
  border-color:var(--text);
}
/* the format toggle: frosted on the dark band (mirrors the Theme A rule).
   The base active pill paints background:var(--text) + text var(--bg) — with
   the on-dark tokens both resolve to bone (invisible label), so pin it:
   bone pill, ink label. */
html.embed-cards[data-site-theme="c"] .fmt-toggle{ background:rgba(233,227,214,.07);border-color:rgba(233,227,214,.16); }
html.embed-cards[data-site-theme="c"] .fmt-opt.active{ background:var(--c-bone);color:var(--c-ink);-webkit-text-fill-color:var(--c-ink); }
/* Pop-up cards (the "Which option is right for me?" help questions, the
   add-on "What is this?" modals) are LIGHT bone cards even on the ink band —
   restore the ink text tokens INSIDE them, or the embed's on-dark bone text
   washes out to bone-on-bone (Jacob's screenshot, 16 Jul). */
html.embed-cards[data-site-theme="c"] .info-card{
  --text:#2C2E26;
  --text-muted:rgba(44,46,38,.72);
  --text-dim:rgba(44,46,38,.55);
  --border:rgba(44,46,38,.24);
  --border-soft:rgba(44,46,38,.14);
  --bg-soft:rgba(44,46,38,.05);
  color:var(--text); /* restart INHERITED colour too — headings/divs with no
                        colour rule of their own inherit the page's bone
                        otherwise (computed values inherit, not variables) */
}

/* ---- Part 9: standalone pages (success.html / cancelled.html) ------- */
/* success tick circle: olive = "done", matching the email's tick badge */
html[data-site-theme="c"] .mark.mark-ok{ background:var(--c-olive);color:var(--c-on-accent); }
/* the cancelled page reuses .mark for a WARNING — olive means "done", so it
   must never land here. Oak = the warm "attention" colour (audit item 10). */
html[data-site-theme="c"] .mark.mark-warn{ background:color-mix(in srgb,var(--c-oak) 24%,transparent);color:var(--c-walnut); }
/* timeline "done" dot: its base sets a dark-green tick colour — keep the
   tick legible on the olive fill */
html[data-site-theme="c"] .tl-dot.done{ color:var(--c-on-accent); }
/* accent words: the rebrand has no italics — upright (the face itself is
   already swapped by the --font-serif token above) */
html[data-site-theme="c"] h1 .accent,
html[data-site-theme="c"] .ref b{ font-style:normal; }

/* duration slider bubble: its base sets near-black text, which suits Themes
   E and A (their accents are lighter). On the rebrand's terracotta that read
   as the one element on the platform not using the standard text-on-accent
   colour, and it measured 4.03:1 against the 4.5 minimum. The FILL is
   unchanged. (Jacob, 16 Aug 2026, chosen from a rendered comparison.) */
html[data-site-theme="c"] .hd-bubble{ color:var(--c-on-accent); }

/* Keyboard focus ring (12 Sep 2026, build-audit item 8). :focus-visible fires for
   keyboard focus only, so mouse users see no change. Terracotta, the brand accent. */
:focus-visible{outline:3px solid var(--accent,#C2603E);outline-offset:2px}
main:focus{outline:none}