/* ==========================================================================
   ProBook Studio — stylesheet
   --------------------------------------------------------------------------
   One file, no build step. Read it top to bottom: tokens, base, layout,
   components, then the pages that need their own thing.

   HOW THIS FILE IS ORDERED, AND WHY IT MATTERS
   An earlier version grew by having overrides bolted onto the end, and body
   copy inside purple sections quietly rendered dark grey on dark plum for a
   week — two rules at identical specificity, source order picking the loser.
   So: colour on an inverted ground is decided ONCE, in §5, by scoping to the
   section rather than by piling rules on at the bottom. Nothing after §5 sets
   a text colour that a `.section-deep` rule would have to fight.

   THEMING has three states, and all three are handled:
     :root                                the light palette
     @media (prefers-color-scheme: dark)  the browser's own setting
     :root[data-theme="dark"|"light"]     an explicit choice, which wins
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --violet:        #7C3AED;   /* the loud one — gradients and large shapes */
  --violet-deep:   #5B21B6;
  --purple:        #6B2FA8;   /* the brand purple, safe at text size */
  --purple-light:  #A78BFA;
  --purple-wash:   #F3EEFE;
  --blue:          #2563EB;
  --blue-wash:     #E8F0FE;
  --cyan:          #0E7490;
  --magenta:       #A21CAF;
  --amber:         #B45309;
  --amber-wash:    #FEF3E2;
  --teal:          #0F766E;
  --good:          #15803D;
  --good-wash:     #E7F6EC;
  --flag:          #DC2626;
  --flag-wash:     #FDECEC;

  /* --- Grounds ---------------------------------------------------------- */
  --ground:        #FFFFFF;
  --ground-raised: #FFFFFF;
  --ground-sunk:   #F7F5FC;
  --ground-deep:   #2A0F4D;
  --ground-deeper: #1B0833;

  /* --- Ink -------------------------------------------------------------- */
  --ink:           #171223;
  --ink-2:         #474059;
  --ink-3:         #6A6280;
  --ink-on-deep:   #FFFFFF;
  --ink-on-deep-2: rgba(255, 255, 255, 0.87);
  --ink-on-deep-3: rgba(255, 255, 255, 0.70);

  /* --- Lines ------------------------------------------------------------ */
  --rule:          #E7E2F2;
  --rule-soft:     #F1EDF9;

  /* --- Gradients -------------------------------------------------------- */
  --grad-brand:  linear-gradient(125deg, #4C1D95 0%, #7C3AED 46%, #2563EB 100%);
  --grad-accent: linear-gradient(90deg, #7C3AED 0%, #2563EB 100%);

  /* --- Type ------------------------------------------------------------- */
  --f-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-body:    'Karla', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-book:    'EB Garamond', Georgia, 'Times New Roman', serif;

  /* --- Shape ------------------------------------------------------------ */
  --radius:    18px;
  --radius-sm: 12px;
  --shadow:      0 1px 2px rgba(23, 18, 35, .05), 0 8px 28px -14px rgba(23, 18, 35, .18);
  --shadow-lift: 0 2px 6px rgba(23, 18, 35, .07), 0 22px 48px -20px rgba(91, 33, 182, .35);

  --wrap: 1180px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --purple-light:  #C4B5FD;
    /* Text-sized colours have to flip in dark mode. The light-mode values are
       chosen to be dark enough on white; on a near-black ground the same
       values are 2.4:1 and unreadable. Gradients keep --violet either way,
       because a large shape is not held to text contrast. */
    --purple:        #C4B5FD;
    --blue:          #93B8FF;
    --teal:          #5EEAD4;
    --magenta:       #F0ABFC;
    --cyan:          #67E8F9;
    --purple-wash:   #251A3A;
    --blue-wash:     #142238;
    --amber-wash:    #2B2011;
    --good-wash:     #12241A;
    --flag-wash:     #2C1618;
    --good:          #4ADE80;
    --flag:          #F87171;
    --amber:         #FBBF24;

    --ground:        #120E1C;
    --ground-raised: #191322;
    --ground-sunk:   #0D0A15;
    --ground-deep:   #1E0B39;
    --ground-deeper: #140626;

    --ink:           #F2EFF8;
    --ink-2:         #C6BFD6;
    --ink-3:         #A29AB5;

    --rule:          #2E2740;
    --rule-soft:     #241D33;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --purple-light:  #C4B5FD;
  /* Text-sized colours have to flip in dark mode. The light-mode values are
     chosen to be dark enough on white; on a near-black ground the same
     values are 2.4:1 and unreadable. Gradients keep --violet either way,
     because a large shape is not held to text contrast. */
  --purple:    #C4B5FD;
  --blue:      #93B8FF;
  --teal:      #5EEAD4;
  --magenta:     #F0ABFC;
  --cyan:      #67E8F9;
  --purple-wash:   #251A3A;
  --blue-wash:     #142238;
  --amber-wash:    #2B2011;
  --good-wash:     #12241A;
  --flag-wash:     #2C1618;
  --good:          #4ADE80;
  --flag:          #F87171;
  --amber:         #FBBF24;

  --ground:        #120E1C;
  --ground-raised: #191322;
  --ground-sunk:   #0D0A15;
  --ground-deep:   #1E0B39;
  --ground-deeper: #140626;

  --ink:           #F2EFF8;
  --ink-2:         #C6BFD6;
  --ink-3:         #A29AB5;

  --rule:          #2E2740;
  --rule-soft:     #241D33;

  color-scheme: dark;
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* a decorative glow must never make the page slide */
}

img, svg, video { max-width: 100%; }
img { height: auto; }

a { color: var(--purple); text-underline-offset: 3px; }
a:hover { color: var(--violet-deep); }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.14;
  color: var(--ink);
  margin: 0 0 14px;
}
h1 { font-size: clamp(38px, 5.6vw, 64px); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(28px, 3.6vw, 42px); }
h3 { font-size: clamp(20px, 2.1vw, 24px); }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; color: var(--ink); }

::selection { background: var(--violet); color: #fff; }

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

/* Fixed colours on purpose: --ink flips to near-white in dark mode, and white
   on near-white made the skip link invisible exactly when it is needed. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #1B0833; color: #FFFFFF; padding: 12px 18px; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

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

/* Honeypot — present for robots, invisible and unreachable for people. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* MAKE `hidden` ACTUALLY HIDE THINGS.
   The attribute is only a display:none in the browser's own stylesheet, so any
   class rule that sets display beats it. `.btn { display: inline-flex }` was
   enough to put "Switch to studio admin" on a client's dashboard even though
   the attribute was set, and the same fault showed an unread badge reading 0,
   four Cancel buttons in the admin, and an empty chat panel. One rule, and
   `hidden` means hidden everywhere. */
[hidden] { display: none !important; }


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 40px, 760px); margin-inline: auto; }
.center-narrow { max-width: 64ch; margin-inline: auto; text-align: center; }

.section { padding: clamp(56px, 8vw, 104px) 0; position: relative; }
/* The header is sticky, so an anchor jump would otherwise put the heading
   underneath it. */
[id] { scroll-margin-top: 92px; }
.section-sunk { background: var(--ground-sunk); }

.section-head { max-width: 66ch; margin-bottom: clamp(30px, 4vw, 48px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-2); font-size: clamp(17px, 1.6vw, 19.5px); margin-bottom: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-body); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--purple); margin: 0 0 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad-accent); }
.section-head.center .eyebrow { justify-content: center; }

.lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.6; color: var(--ink-2); }
.sub { color: var(--ink-2); }
.microcopy { font-size: 14px; color: var(--ink-3); }
.divider { height: 1px; background: var(--rule); border: 0; margin: 0; }


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--f-body); font-size: 16px; font-weight: 700;
  padding: 15px 26px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease,
              border-color .16s ease, color .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .6; cursor: default; transform: none; }

.btn-primary {
  background: var(--grad-accent); color: #FFFFFF;
  box-shadow: 0 10px 24px -12px rgba(124, 58, 237, .85);
}
.btn-primary:hover { color: #FFFFFF; box-shadow: 0 16px 34px -14px rgba(124, 58, 237, .95); }

.btn-outline {
  background: var(--ground-raised); color: var(--ink);
  border-color: var(--rule); box-shadow: var(--shadow);
}
.btn-outline:hover { color: var(--ink); border-color: var(--violet); }

.btn-light { background: #FFFFFF; color: #2A0F4D; }
.btn-light:hover { color: #2A0F4D; }

.btn-ghost-light {
  background: rgba(255,255,255,.10); color: #FFFFFF; border-color: rgba(255,255,255,.45);
}
.btn-ghost-light:hover { color: #FFFFFF; background: rgba(255,255,255,.2); }

.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-block { display: flex; width: 100%; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* Under a centred heading the buttons have to be centred too, and a flex row
   does not inherit text-align — it stays hard left while every word above it
   sits in the middle. Stated explicitly, and only where it applies: the hero
   rows on the home page are deliberately left-aligned with their headline. */
.hero-actions.center { justify-content: center; }


/* ==========================================================================
   5. INVERTED SECTIONS  — see the note at the top of this file
   ========================================================================== */

.section-deep {
  background: var(--ground-deep); color: var(--ink-on-deep);
  position: relative; overflow: hidden;
}
/* A light source in the corner, so a big dark block is not a flat slab. */
.section-deep::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 90% at 12% 0%,  rgba(124, 58, 237, .55), transparent 62%),
    radial-gradient(50% 80% at 92% 18%, rgba(37, 99, 235, .40), transparent 60%);
  pointer-events: none;
}
.section-deep > * { position: relative; z-index: 1; }

.section-deep h1, .section-deep h2, .section-deep h3, .section-deep h4,
.section-deep dt, .section-deep strong { color: var(--ink-on-deep); }

.section-deep p, .section-deep li, .section-deep dd,
.section-deep .lede, .section-deep .sub, .section-deep .microcopy,
.section-deep .section-head p, .section-deep .hero-note,
.section-deep .flow-step p, .section-deep .ticks li,
.section-deep .numlist li, .section-deep .svc p { color: var(--ink-on-deep-2); }

.section-deep .eyebrow { color: #FFFFFF; }
.section-deep .eyebrow::before { background: #FFFFFF; }

.section-deep a:not(.btn) { color: #D6C4FF; }
.section-deep a:not(.btn):hover { color: #FFFFFF; }

.section-deep .divider { background: rgba(255,255,255,.18); }
.section-deep .ticks li::before { color: #C4B5FD; }
.section-deep .numlist li::before { background: rgba(255,255,255,.18); color: #FFFFFF; }
.section-deep .callout { background: rgba(255,255,255,.08); border-left-color: #C4B5FD; }
.section-deep .callout p, .section-deep .callout strong { color: var(--ink-on-deep); }
.section-deep .card, .section-deep .svc {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16);
}
.section-deep .flow-step .n { background: rgba(255,255,255,.18); color: #FFFFFF; }


/* ==========================================================================
   6. HEADER AND NAV
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap { display: flex; align-items: center; gap: 16px; min-height: 74px; }

.brand {
  font-family: var(--f-display); font-weight: 800; font-size: 21px;
  letter-spacing: -0.03em; color: var(--ink); text-decoration: none; margin-right: auto;
}
.brand span {
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-size: 15.5px; font-weight: 600; color: var(--ink-2);
  text-decoration: none; padding: 9px 13px; border-radius: 999px;
  transition: color .15s ease, background-color .15s ease;
}
.nav a:hover { color: var(--ink); background: var(--purple-wash); }
.nav a[aria-current="page"] { color: var(--purple); background: var(--purple-wash); }
/* The call to action is a button first and a nav link second. */
.nav a.btn { padding: 12px 22px; }
.nav a.btn-primary, .nav a.btn-primary[aria-current="page"] {
  color: #FFFFFF; background: var(--grad-accent);
}
.nav a.btn-outline { color: var(--ink); background: var(--ground-raised); }

.nav-toggle {
  display: none; background: var(--ground-raised); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 9px 16px; font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer;
}


/* ==========================================================================
   7. HERO AND PAGE BANNERS
   ========================================================================== */

.hero {
  position: relative; overflow: hidden;
  background: var(--ground-deeper); color: #FFFFFF;
  padding: clamp(52px, 7vw, 92px) 0 clamp(56px, 8vw, 100px);
}
.hero::before {
  content: ""; position: absolute; inset: -10% -10% auto -10%; height: 130%;
  background: var(--grad-brand); opacity: .97;
}
/* A faint grid, so the gradient has some structure behind the words. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(75% 75% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(75% 75% at 50% 40%, #000 30%, transparent 100%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; }

.hero-grid {
  display: grid; grid-template-columns: 1.06fr .94fr;
  gap: clamp(30px, 5vw, 60px); align-items: center;
}
.hero-inner { max-width: 44ch; }
.hero h1 { color: #FFFFFF; margin-bottom: 20px; }
.hero p { color: rgba(255,255,255,.88); }
.hero .lede { font-size: clamp(18px, 2vw, 21px); margin-bottom: 30px; }
.hero-note { font-size: 14.5px; color: rgba(255,255,255,.74); margin-top: 22px; }
.hero-figure { width: 100%; }

.hero .eyebrow, .pagehead .eyebrow {
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.32);
  padding: 7px 15px; border-radius: 999px; color: #FFFFFF; letter-spacing: .12em;
}
.hero .eyebrow::before, .pagehead .eyebrow::before { display: none; }

/* --- The banner every inner page opens with ----------------------------- */

.pagehead {
  position: relative; overflow: hidden;
  background: var(--ground-deeper); color: #FFFFFF;
  padding: clamp(42px, 5.5vw, 74px) 0 clamp(44px, 6vw, 80px);
}
.pagehead::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 150%;
  background: var(--grad-brand); opacity: .96;
}
.pagehead::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(70% 80% at 40% 40%, #000 25%, transparent 100%);
  mask-image: radial-gradient(70% 80% at 40% 40%, #000 25%, transparent 100%);
  pointer-events: none;
}
.pagehead .wrap { position: relative; z-index: 2; }

.pagehead-grid {
  display: grid; grid-template-columns: 1.12fr .88fr;
  gap: clamp(22px, 4vw, 50px); align-items: center;
}
.pagehead h1 { color: #FFFFFF; font-size: clamp(32px, 4.4vw, 50px); margin-bottom: 14px; }
.pagehead p { color: rgba(255,255,255,.87); font-size: clamp(16.5px, 1.7vw, 19px); max-width: 52ch; }
.pagehead-art { width: 100%; }

/* --- Trust band: the strip directly under the hero ---------------------- */

.trustband { background: var(--ground-raised); border-bottom: 1px solid var(--rule); padding: 20px 0; }
.trustband ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 26px;
}
.trustband li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.trustband svg { flex: none; width: 20px; height: 20px; color: var(--violet); }


/* ==========================================================================
   8. CARDS AND CONTENT BLOCKS
   ========================================================================== */

.cards, .svc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.card, .svc-grid .svc {
  position: relative;
  background: var(--ground-raised);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 30px 28px 26px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  --card-accent: var(--violet);
}
.card::before, .svc-grid .svc::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--card-accent);
  opacity: 0; transition: opacity .18s ease;
}
.card:hover, .svc-grid .svc:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent;
}
.card:hover::before, .svc-grid .svc:hover::before { opacity: 1; }

.card h3, .svc-grid .svc h3 { margin-bottom: 10px; }
.card p, .svc-grid .svc p { color: var(--ink-2); font-size: 15.8px; margin-bottom: 0; }

.card-icon {
  width: 52px; height: 52px; border-radius: 15px;
  display: grid; place-items: center; margin-bottom: 18px;
  background: color-mix(in srgb, var(--card-accent) 12%, transparent);
  color: var(--card-accent);
}
.card-icon svg { width: 26px; height: 26px; }
.ic-stroke { stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic-fill { fill: currentColor; }

.card-foot { margin-top: 18px; font-size: 15px; font-weight: 700; }
.card-foot a { color: var(--card-ink, var(--card-accent)); text-decoration: none; }
.card-foot a:hover { text-decoration: underline; }

/* Each card in a row gets its own accent, so a grid is not six identical
   purple boxes. Text-sized colours are set separately below, because large
   shapes read fine at a contrast that small text does not. */
.cards .card:nth-child(6n+1), .svc-grid .svc:nth-child(6n+1) { --card-accent: var(--violet); }
.cards .card:nth-child(6n+2), .svc-grid .svc:nth-child(6n+2) { --card-accent: var(--blue); }
.cards .card:nth-child(6n+3), .svc-grid .svc:nth-child(6n+3) { --card-accent: var(--amber); }
.cards .card:nth-child(6n+4), .svc-grid .svc:nth-child(6n+4) { --card-accent: var(--teal); }
.cards .card:nth-child(6n+5), .svc-grid .svc:nth-child(6n+5) { --card-accent: var(--magenta); }
.cards .card:nth-child(6n+6), .svc-grid .svc:nth-child(6n+6) { --card-accent: var(--cyan); }

/* The accent doubles as spine, icon and link colour. A large shape reads fine
   at a lower contrast than small link text does, so decoration keeps the vivid
   accent and text gets a token that is safe in BOTH themes. --violet is a
   gradient colour and stays put in dark mode, so card one borrows --purple. */
.card { --card-ink: var(--card-accent); }
.cards .card:nth-child(6n+1) { --card-ink: var(--purple); }

/* A stacked heading block — eyebrow, title, standfirst. It was briefly a
   horizontal flex row, which put a whole paragraph on one unwrapping line and
   pushed the services page sideways on a phone. */
.svc-head { margin-bottom: clamp(20px, 3vw, 30px); max-width: 68ch; }
.svc-head h2 { margin-bottom: 12px; }
.svc-head h3 { margin-bottom: 10px; }

/* --- Callout, panels, prose -------------------------------------------- */

.callout {
  border-left: 3px solid var(--blue);
  background: var(--blue-wash);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 20px 24px; margin: 26px 0;
}
.callout p { margin: 0 0 10px; font-size: 16px; }
.callout p:last-child { margin-bottom: 0; }

.panel {
  background: var(--ground-raised); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: clamp(24px, 3vw, 36px);
}
.panel-accent {
  background: var(--purple-wash); border: 0;
  border-radius: var(--radius); padding: clamp(24px, 3vw, 36px);
}
.panel-note { font-size: 14.5px; color: var(--ink-3); margin-top: 14px; }

.prose { max-width: 72ch; }
.prose h2 { margin-top: 44px; }
.prose h3 { margin-top: 30px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 8px; }

.blurb { color: var(--ink-2); font-size: 16px; }
/* A red-on-pink marker for the details you still have to fill in. The plain
   --flag red only reaches 4.23:1 on the wash, so this one darkens it to 5.02:1
   rather than lightening the background and losing the alarm. */
.fillin {
  background: var(--flag-wash); color: #C81E1E;
  padding: 1px 7px; border-radius: 5px; font-weight: 700; font-size: .92em;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fillin { color: #FCA5A5; }
}
:root[data-theme="dark"] .fillin { color: #FCA5A5; }

/* --- Lists -------------------------------------------------------------- */

.ticks, .ticks-no, .ticklist { list-style: none; padding: 0; margin: 0 0 20px; }
.ticks li, .ticks-no li, .ticklist li {
  position: relative; padding-left: 30px; margin-bottom: 11px; color: var(--ink-2);
}
.ticks li::before, .ticklist li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--violet); font-weight: 700;
}
.ticks-no li::before { content: "✕"; position: absolute; left: 0; top: -1px; color: var(--flag); font-weight: 700; }

.numlist { list-style: none; padding: 0; margin: 0 0 22px; counter-reset: n; }
.numlist li {
  position: relative; padding-left: 40px; margin-bottom: 14px; counter-increment: n;
  color: var(--ink-2);
}
/* Absolute positioning, not a grid. A grid here put every bare word after the
   <strong> into its own 26px column and exploded the sentence. */
.numlist li::before {
  content: counter(n);
  position: absolute; left: 0; top: 2px;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--purple-wash); color: var(--purple);
  font-family: var(--f-body); font-size: 13px; font-weight: 700;
  display: grid; place-items: center;
}

.pillrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.pillrow li {
  background: var(--purple-wash); color: var(--purple);
  padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
}

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

.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.flow-step { position: relative; }
.flow-step h3 { font-size: 20px; margin-bottom: 8px; }
.flow-step p { color: var(--ink-2); font-size: 15.5px; margin: 0; }

/* A pill that sizes to its text. These hold labels — "STEP 01", "COVER
   DESIGN" — not numbers, and a fixed-size badge cropped every one of them. */
.flow-step .n {
  display: inline-block; width: auto; height: auto;
  padding: 6px 13px; border-radius: 999px;
  font-family: var(--f-body); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; line-height: 1.5; white-space: nowrap;
  margin: 0 0 14px;
  background: var(--purple-wash); color: var(--purple);
}
.section-sunk .flow-step .n { background: var(--ground-raised); color: var(--purple); }

/* --- Stats -------------------------------------------------------------- */

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 32px; }
.stat {
  background: var(--ground-raised); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 22px 24px;
}
.stat .k { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.stat .v { font-family: var(--f-display); font-size: 32px; font-weight: 800; letter-spacing: -0.03em; margin: 0; color: var(--ink); }

/* --- Experts ------------------------------------------------------------ */

.experts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; }

/* A person card is a column, centred on its own middle.
   It was not before, and the photo gave it away: the circle is capped at 190px
   while the column is as wide as the screen allows, so with nothing centring it
   the photo pinned itself to the left edge and the name and bio ran full width
   underneath. On a desktop the column happens to be about the size of the photo
   and it looked almost right by luck; on a phone the column is 350px and the
   photo sat 110px off the middle. Centring is stated here rather than left to
   the column width, which is the thing that changes. */
.expert {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.expert .avatar {
  margin-left: auto; margin-right: auto;
  aspect-ratio: 1 / 1; width: 100%; max-width: 190px;
  border-radius: 50%; object-fit: cover; margin-bottom: 16px;
  background: var(--purple-wash);
  border: 3px solid transparent;
  background-image:
    linear-gradient(var(--ground-raised), var(--ground-raised)),
    var(--grad-brand);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 12.5px; text-align: center; padding: 16px; line-height: 1.4;
  overflow-wrap: anywhere;
}
.expert img.avatar { padding: 0; }
.expert .avatar.is-initials {
  font-family: var(--f-display); font-size: 30px; font-weight: 800;
  letter-spacing: .02em; color: var(--purple); padding: 0;
}
.expert h3 { font-size: 21px; margin: 0 0 3px; }
.expert .role {
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--purple); margin: 0 0 10px;
}
/* Centred text needs a narrower measure than left-aligned text or the ragged
   edges on both sides make it hard to find the start of the next line. */
.expert p { font-size: 15px; color: var(--ink-2); margin: 0; max-width: 32ch; }

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

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
.quote {
  background: var(--ground-raised); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 28px 28px 24px; box-shadow: var(--shadow);
}
.quote blockquote {
  margin: 0 0 18px; font-family: var(--f-book); font-size: 20px; line-height: 1.5; color: var(--ink);
}
.quote blockquote::before { content: "\201C"; color: var(--violet); }
.quote blockquote::after  { content: "\201D"; color: var(--violet); }
.quote .who { font-size: 14.5px; font-weight: 700; margin: 0; }
.quote .what { font-size: 13.5px; color: var(--ink-3); margin: 2px 0 0; }

/* --- Portfolio teaser --------------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; margin-bottom: 32px; align-items: start; }
.tile {
  aspect-ratio: 2 / 3; background: var(--ground-sunk);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 18px;
  font-size: 13px; color: var(--ink-3); line-height: 1.45;
}
/* The placeholders are book-shaped because a cover is. A real upload might be
   a wide screenshot or a square logo, so JS sets --shape from the picture
   itself and `contain` guarantees none of it is cropped away. */
.tile-real {
  position: relative; padding: 0; overflow: hidden; display: block;
  aspect-ratio: var(--shape, 3 / 4); background: var(--ground-sunk);
}
.tile-real img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tile-tag {
  position: absolute; left: 10px; bottom: 10px; padding: 3px 10px; border-radius: 999px;
  background: rgba(20, 16, 28, .82); color: #FFFFFF;
  font-family: var(--f-body); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}

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

.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--ground-raised); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: 4px 22px;
  transition: border-color .15s ease;
}
.faq details[open] { border-color: var(--violet); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 30px 18px 0; position: relative;
  font-family: var(--f-display); font-weight: 700; font-size: 17.5px; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 24px; font-weight: 400; color: var(--violet); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details > p { padding: 0 0 18px; margin: 0; color: var(--ink-2); font-size: 16px; }
.faq details > p + p { padding-top: 0; margin-top: -8px; }

/* --- Jump nav ----------------------------------------------------------- */

.jumpnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.jumpnav a {
  display: inline-block; padding: 8px 15px; border-radius: 999px;
  background: var(--ground-raised); border: 1px solid var(--rule);
  font-size: 14.5px; font-weight: 600; color: var(--ink-2); text-decoration: none;
}
.jumpnav a:hover { border-color: var(--violet); color: var(--ink); }


/* ==========================================================================
   9. FORMS
   ========================================================================== */

.field, .auth-field { margin-bottom: 18px; }
.field label, .auth-field label {
  display: block; font-size: 12.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 7px;
}

.field input, .field textarea, .field select,
.auth-field input, .auth-field textarea, .auth-field select {
  width: 100%; font-family: var(--f-body); font-size: 16px; line-height: 1.55;
  color: var(--ink); background: var(--ground-raised);
  border: 1.5px solid var(--rule); border-radius: var(--radius-sm);
  padding: 14px 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea, .auth-field textarea { resize: vertical; min-height: 120px; }

.field input:focus, .field textarea:focus, .field select:focus,
.auth-field input:focus, .auth-field textarea:focus, .auth-field select:focus {
  outline: none; border-color: var(--violet);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 16%, transparent);
}
.field .hint, .auth-field .hint { font-size: 13px; color: var(--ink-3); margin: 6px 0 0; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: end; }

.fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.fieldset > legend {
  padding: 0; font-size: 12.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px;
}

.checkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 9px; }
.radiostack { display: grid; gap: 9px; }

.check {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--ground-raised); border: 1.5px solid var(--rule);
  border-radius: var(--radius-sm); padding: 13px 15px;
  font-size: 15px; color: var(--ink-2); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.check:hover { border-color: var(--purple-light); }
.check input { margin: 3px 0 0; accent-color: var(--violet); width: 17px; height: 17px; flex: none; }
.check:has(input:checked) { border-color: var(--violet); background: var(--purple-wash); }
.check strong { color: var(--ink); font-weight: 700; }

.form-status { margin-top: 18px; font-size: 15.5px; padding: 14px 17px; border-radius: var(--radius-sm); }
.form-status[data-state="ok"]    { background: var(--good-wash); border-left: 3px solid var(--good); }
.form-status[data-state="error"] { background: var(--flag-wash); border-left: 3px solid var(--flag); }
.form-status[hidden] { display: none; }


/* ==========================================================================
   10. START PAGE
   ========================================================================== */

.start-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(26px, 4vw, 48px); align-items: start; }
.start-aside { display: grid; gap: 18px; position: sticky; top: 96px; }


/* ==========================================================================
   11. ACCOUNT PAGE
   ========================================================================== */

.auth-shell { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 74px); }
/* Column, not row. The topbar and the form are siblings here, and a flex row
   put the brand beside the sign-in panel instead of above it. */
.auth-form-side {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(30px, 5vw, 60px) 24px;
}
.auth-body { width: min(100%, 420px); margin-inline: auto; }
/* The global h1 scale is built for a full-width hero; in a 420px column it
   swallows the panel. */
.auth-body h1 { font-size: clamp(29px, 3.2vw, 38px); }
.auth-topbar { width: min(100%, 420px); margin-inline: auto; }
/* Brand on the left, the way out on the right. Without the flex they ran
   together into one line reading "ProBook Studio Back to site". */
.auth-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 30px;
}
.auth-back { font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.auth-sub { color: var(--ink-2); margin-bottom: 26px; }

.auth-switch {
  display: inline-flex; gap: 3px; padding: 4px; margin-bottom: 26px;
  background: var(--ground-sunk); border-radius: 999px; border: 1px solid var(--rule);
}
.auth-switch button {
  border: 0; background: none; font: inherit; font-weight: 700; font-size: 14.5px;
  color: var(--ink-3); padding: 9px 20px; border-radius: 999px; cursor: pointer;
}
.auth-switch button.is-on { background: var(--ground-raised); color: var(--purple); box-shadow: var(--shadow); }

.auth-actions { margin-top: 26px; }
.auth-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; font-size: 14px; }
.auth-legal { font-size: 13.5px; color: var(--ink-3); margin-top: 22px; }

.auth-art-side {
  position: relative; overflow: hidden;
  background: var(--ground-deeper); color: #FFFFFF;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(34px, 5vw, 64px);
}
.auth-art-side::before { content: ""; position: absolute; inset: -10%; background: var(--grad-brand); opacity: .97; }
.auth-art-side > * { position: relative; z-index: 1; }
.auth-art-figure { width: min(100%, 430px); margin: 0 auto 32px; }
.auth-art-copy h2 { color: #FFFFFF; font-size: clamp(24px, 2.6vw, 32px); }
.auth-art-copy p { color: rgba(255,255,255,.87); }
/* Three separate claims, not one run-on sentence. */
.auth-art-foot {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 30px; font-size: 13.5px;
}
.auth-art-foot span {
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26);
  color: rgba(255,255,255,.92); font-weight: 600;
}


/* ==========================================================================
   12. DASHBOARD AND ADMIN
   ========================================================================== */

.dash-hero {
  position: relative; overflow: hidden;
  background: var(--ground-deeper); color: #FFFFFF;
  padding: 40px 0 36px;
}
.dash-hero::before { content: ""; position: absolute; inset: -30% -10%; background: var(--grad-brand); opacity: .96; }
.dash-hero .wrap { position: relative; z-index: 1; }

.dash-hello { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dash-avatar {
  width: 58px; height: 58px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34);
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 800; font-size: 19px; color: #FFFFFF;
}
.dash-hello h1 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 2px; color: #FFFFFF; }
.dash-hello p { margin: 0; color: rgba(255,255,255,.8); font-size: 15.5px; }
.dash-hero .btn-primary { background: #FFFFFF; color: #2A0F4D; box-shadow: none; }
.dash-hero .btn-primary:hover { color: #2A0F4D; }

.dash-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); margin-bottom: 34px; overflow-x: auto; }
.dash-tab {
  border: 0; background: none; font: inherit; font-weight: 700; font-size: 15.5px;
  color: var(--ink-3); padding: 14px 16px; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.dash-tab:hover { color: var(--ink); }
.dash-tab.is-on { color: var(--purple); border-bottom-color: var(--violet); }
.dash-panel[hidden] { display: none; }

.order-card {
  background: var(--ground-raised); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 26px 26px 22px; margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.order-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.order-top h3 { font-size: 21px; margin: 0 0 4px; }
.order-ref { font-size: 13px; color: var(--ink-3); margin: 0; letter-spacing: .03em; }
.order-amount { font-weight: 800; font-size: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; font-family: var(--f-display); }

.pill-status {
  display: inline-block; padding: 5px 13px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--purple-wash); color: var(--purple);
}
.pill-status[data-tone="done"] { background: var(--good-wash); color: var(--good); }
.pill-status[data-tone="wait"] { background: var(--blue-wash); color: var(--blue); }
.pill-status[data-tone="hold"] { background: var(--flag-wash); color: var(--flag); }

.track { display: grid; gap: 0; margin-top: 4px; }
.track-line { display: flex; align-items: center; }
.track-dot { width: 13px; height: 13px; border-radius: 50%; flex: none; background: var(--ground-sunk); border: 2px solid var(--rule); }
.track-dot.done { background: var(--violet); border-color: var(--violet); }
.track-dot.now { background: var(--ground-raised); border-color: var(--violet); box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 20%, transparent); }
.track-bar { flex: 1; height: 2px; background: var(--rule); }
.track-bar.done { background: var(--violet); }
.track-labels { display: flex; margin-top: 9px; }
.track-labels span { flex: 1; font-size: 11.5px; color: var(--ink-3); text-align: center; }
.track-labels span:first-child { text-align: left; }
.track-labels span:last-child { text-align: right; }
.track-labels span.on { color: var(--purple); font-weight: 700; }

.empty-state {
  border: 1px dashed var(--rule); border-radius: var(--radius);
  padding: 46px 26px; text-align: center;
}
.empty-state h3 { font-size: 24px; margin: 0 0 10px; }
.empty-state p { color: var(--ink-2); max-width: 46ch; margin: 0 auto 20px; }

.settings-grid { display: grid; gap: 20px; max-width: 580px; }
.setting-card {
  background: var(--ground-raised); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 26px 26px 24px;
}
.setting-card h3 { font-size: 19px; margin: 0 0 6px; }
.setting-card > p { color: var(--ink-2); font-size: 15px; margin: 0 0 18px; }
.danger-zone { border-color: color-mix(in srgb, var(--flag) 35%, var(--rule)); }

/* --- Admin -------------------------------------------------------------- */

.btn-sm { padding: 9px 16px; font-size: 14px; }

.admin-note {
  padding: 18px 20px; border-radius: var(--radius-sm);
  background: var(--ground-sunk); border: 1px solid var(--rule);
  color: var(--ink-2); font-size: 15.5px;
}
.admin-note[data-tone="error"] { background: var(--flag-wash); border-color: transparent; border-left: 3px solid var(--flag); }

.admin-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.admin-said { font-size: 14px; color: var(--ink-3); }

.admin-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 22px 0 18px; }
.admin-toolbar input[type="search"] {
  flex: 1 1 260px; max-width: 380px;
  font-family: var(--f-body); font-size: 15px; color: var(--ink);
  background: var(--ground-raised); border: 1.5px solid var(--rule);
  border-radius: var(--radius-sm); padding: 11px 15px;
}
.admin-toolbar input[type="search"]:focus {
  outline: none; border-color: var(--violet);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 16%, transparent);
}

/* Quote line items: description takes the room, figures stay narrow and
   aligned so a column of prices can be read down. */
.q-item { display: grid; grid-template-columns: 1fr 78px 130px 40px; gap: 10px; align-items: center; margin-bottom: 10px; }
.q-item input {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--ground-raised); color: var(--ink); font: inherit; font-size: 15px;
}
.q-item input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 16%, transparent); }
.q-price { position: relative; }
.q-price span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 15px; pointer-events: none; }
.q-price input { padding-left: 26px; font-variant-numeric: tabular-nums; }
.q-drop {
  border: 1.5px solid var(--rule); border-radius: var(--radius-sm); background: none;
  color: var(--ink-3); height: 44px; font-size: 20px; line-height: 1; cursor: pointer;
}
.q-drop:hover { border-color: var(--flag); color: var(--flag); }

.q-lines { list-style: none; margin: 4px 0 0; padding: 0; }
.q-lines li {
  display: flex; justify-content: space-between; gap: 16px; padding: 9px 0;
  border-top: 1px solid var(--rule); font-size: 15px; color: var(--ink-2);
}
.q-lines li span { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

/* --- Quote groups (Awaiting payment / Paid / Closed) ---------------------
   A heading that carries a running total, so the answer to "what am I owed"
   is readable without adding the cards up by eye. The row wraps rather than
   squashing: the total is a number people read, not a decoration. */

.q-group + .q-group { margin-top: 40px; }

.q-group-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px 18px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 4px;
  border-bottom: 2px solid var(--rule);
}
.q-group-head h3 {
  font-size: 19px; margin: 0; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 10px;
}
.q-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 24px; padding: 0 8px; border-radius: 999px;
  background: var(--violet); color: #fff;
  font-family: var(--f-body); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.q-group-sum {
  margin: 0; font-weight: 700; font-size: 20px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.q-group-note { margin: 10px 0 16px; font-size: 14.5px; color: var(--ink-3); max-width: 62ch; }

@media (max-width: 560px) {
  .q-group-head h3 { font-size: 17px; }
  .q-group-sum { font-size: 18px; }
}

.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
.admin-grid label, .admin-full {
  display: block; font-size: 12.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
}
.admin-full { margin-top: 14px; }
.admin-grid select, .admin-grid input, .admin-full input {
  display: block; width: 100%; margin-top: 6px; padding: 11px 13px;
  border: 1.5px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--ground-raised); color: var(--ink);
  font: inherit; font-size: 15px; text-transform: none; letter-spacing: 0;
}
.admin-grid select:focus, .admin-grid input:focus, .admin-full input:focus {
  outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 16%, transparent);
}

.admin-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px; align-items: start;
  padding: 16px 18px; margin-bottom: 12px;
  background: var(--ground-raised); border: 1px solid var(--rule); border-radius: var(--radius);
}
/* The picture belongs beside the name. Centring it against a three-line block
   floats it next to the middle line, which reads as misalignment. */
.admin-row-body h3 { font-size: 17px; margin: 0 0 4px; line-height: 1.3; }
.admin-row-body p { margin: 0; font-size: 14px; color: var(--ink-3); overflow-wrap: anywhere; }
.admin-row-body p + p { margin-top: 2px; }
.admin-row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: start; }

.admin-thumb {
  width: 56px; height: 74px; object-fit: cover; flex: none;
  border-radius: 8px; background: var(--purple-wash);
  display: grid; place-items: center;
  font-family: var(--f-body); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; color: var(--purple);
}
.admin-thumb.is-round { width: 52px; height: 52px; border-radius: 50%; }
.admin-thumb.is-initials { font-size: 15px; }

.tag-spec, .tag-live, .tag-draft {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-family: var(--f-body); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; vertical-align: middle;
}
.tag-spec  { background: var(--blue-wash); color: var(--blue); }
.tag-live  { background: var(--good-wash); color: var(--good); }
.tag-draft { background: var(--flag-wash); color: var(--flag); }

.note-count {
  display: inline-block; min-width: 21px; padding: 1px 7px; border-radius: 999px;
  background: var(--violet); color: #FFFFFF;
  font-family: var(--f-body); font-size: 12px; font-weight: 700;
  text-align: center; vertical-align: middle; margin-left: 6px;
}


/* ==========================================================================
   13. CONVERSATION
   ========================================================================== */

.chat {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px; margin-bottom: 18px;
  background: var(--ground-sunk); border: 1px solid var(--rule); border-radius: var(--radius);
  max-height: 62vh; overflow-y: auto;
}
.bubble { max-width: min(82%, 560px); }
.bubble .who {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 5px;
}
.bubble .said {
  margin: 0; padding: 13px 17px; border-radius: 16px;
  font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--ground-raised); border: 1px solid var(--rule); color: var(--ink);
}
.bubble .stamp { font-size: 12px; color: var(--ink-3); margin: 6px 0 0; }

/* "Mine" is whoever is looking. Colour never carries the meaning alone — the
   sender is named above every bubble, and the side differs too. */
.bubble.is-mine { align-self: flex-end; }
.bubble.is-mine .who, .bubble.is-mine .stamp { text-align: right; }
.bubble.is-mine .said { background: var(--grad-accent); border-color: transparent; color: #FFFFFF; }
.bubble.is-mine .said a { color: #FFFFFF; text-decoration: underline; }
.bubble.is-event .said { background: var(--purple-wash); border-color: transparent; border-left: 3px solid var(--violet); }
.bubble.is-event .said strong { display: block; margin-bottom: 4px; }

.chat-compose { display: grid; gap: 10px; }
.chat-compose textarea {
  width: 100%; font-family: var(--f-body); font-size: 16px; line-height: 1.55;
  color: var(--ink); background: var(--ground-raised);
  border: 1.5px solid var(--rule); border-radius: var(--radius-sm);
  padding: 14px 16px; resize: vertical; min-height: 92px;
}
.chat-compose textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 16%, transparent); }
.chat-compose .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.chat-invite {
  text-align: center; padding: 36px 24px 28px;
  border: 1px dashed var(--rule); border-radius: var(--radius); margin-bottom: 18px;
}
.chat-invite h3 { font-size: 22px; margin: 0 0 8px; }
.chat-invite p { color: var(--ink-2); max-width: 46ch; margin: 0 auto; font-size: 15.5px; }

.thread-row { cursor: pointer; text-align: left; width: 100%; font: inherit; }
.thread-row:hover { border-color: var(--violet); }
.thread-row .admin-row-body p.last {
  color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}


/* ==========================================================================
   14. PORTFOLIO
   ========================================================================== */

.pf-controls { margin-bottom: 26px; display: grid; gap: 12px; }
.pf-chips, .pf-chips-sub { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-count { font-size: 14px; color: var(--ink-3); }

.chip {
  border: 1.5px solid var(--rule); background: var(--ground-raised);
  color: var(--ink-2); font: inherit; font-size: 14.5px; font-weight: 600;
  padding: 9px 17px; border-radius: 999px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.chip:hover { border-color: var(--violet); color: var(--ink); }
.chip.is-on { background: var(--grad-accent); border-color: transparent; color: #FFFFFF; }
.chip-sm { font-size: 13.5px; padding: 7px 14px; }

.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 30px 24px; align-items: start; }
.pf-item { margin: 0; }
.pf-open {
  display: block; width: 100%; padding: 0; cursor: pointer;
  background: var(--ground-sunk); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); overflow: hidden; position: relative;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pf-open:hover { border-color: var(--violet); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
/* The box follows the picture, rather than the picture being cropped to fit
   the box — a wide screenshot lost its middle third the other way round. */
.pf-open img {
  width: 100%; aspect-ratio: var(--shape, 2 / 3);
  object-fit: contain; display: block; background: var(--ground-sunk);
}

.pf-doc-face {
  display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 2 / 3; padding: 22px 20px; text-align: left;
  background: linear-gradient(160deg, var(--purple-wash), var(--ground-raised));
}
.pf-doc-kind { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--purple); }
.pf-doc-title { font-family: var(--f-book); font-size: 19px; line-height: 1.3; color: var(--ink); }
.pf-doc-cue { font-size: 12.5px; font-weight: 700; color: var(--violet); }

.pf-badges { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.pf-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: rgba(20,16,28,.82); color: #FFFFFF;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
/* Fixed, not tokenised: --flag goes light in dark mode, and white-on-light-red
   is 2.8:1. This badge is a warning, so it stays legible in both themes. */
.pf-badge-demo { background: #B91C1C; color: #FFFFFF; }

.pf-item figcaption { display: grid; gap: 2px; padding: 12px 2px 0; text-align: left; }
.pf-title { font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.pf-meta { font-size: 13.5px; color: var(--ink-3); }

.pf-empty { border: 1px dashed var(--rule); border-radius: var(--radius); padding: 48px 26px; text-align: center; }
.pf-empty h3 { margin-bottom: 8px; }
.pf-empty p { color: var(--ink-2); margin: 0 auto; max-width: 48ch; }

.pf-viewer { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; }
.pf-viewer[hidden] { display: none; }
.pf-viewer-scrim { position: absolute; inset: 0; background: rgba(16, 10, 26, .78); backdrop-filter: blur(3px); }
.pf-viewer-panel {
  position: relative; z-index: 1; width: min(100%, 940px); max-height: 92vh; overflow: auto;
  background: var(--ground-raised); border-radius: var(--radius); padding: 22px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
}
.pf-viewer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.pf-viewer-title { font-family: var(--f-display); font-weight: 700; font-size: 20px; margin: 0; }
.pf-viewer-cap { font-size: 14.5px; color: var(--ink-3); margin: 4px 0 14px; }
.pf-close {
  border: 1px solid var(--rule); background: var(--ground-raised); color: var(--ink);
  border-radius: 999px; width: 38px; height: 38px; font-size: 19px; cursor: pointer; flex: none;
}
.pf-close:hover { border-color: var(--flag); color: var(--flag); }
.pf-viewer-body { display: grid; justify-items: center; }
.pf-full { max-width: 100%; max-height: 74vh; object-fit: contain; border-radius: 4px; }
.pf-pdf { width: 100%; height: 74vh; border: 1px solid var(--rule); background: #fff; }
.pf-pdf-pages { width: 100%; max-height: 74vh; overflow: auto; display: grid; gap: 14px; justify-items: center; }
.pf-pdf-page { max-width: 100%; box-shadow: 0 2px 12px rgba(0,0,0,.14); background: #fff; border-radius: 2px; }
.pf-pdf-status { color: var(--ink-3); font-size: 14.5px; padding: 40px 0; margin: 0; }
.pf-pdf-fallback { padding: 40px 24px; text-align: center; }


/* ==========================================================================
   15. LEGAL PAGES
   ========================================================================== */

.legal-updated { font-size: 14.5px; color: var(--ink-3); margin-bottom: 8px; }
.legal-toc {
  background: var(--ground-sunk); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 22px 26px; margin-bottom: 40px;
}
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.legal-toc li { margin-bottom: 6px; break-inside: avoid; }

.tablewrap { overflow-x: auto; margin: 0 0 24px; }
.tablewrap table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 15.5px; }
.tablewrap th, .tablewrap td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tablewrap th { font-family: var(--f-display); font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }


/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.site-footer {
  position: relative; overflow: hidden;
  background: var(--ground-deeper); color: rgba(255,255,255,.78);
  padding: clamp(44px, 6vw, 72px) 0 30px; margin-top: 0;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 120% at 82% 110%, rgba(124,58,237,.5), transparent 62%);
  pointer-events: none;
}
.site-footer .wrap { position: relative; z-index: 1; }

.footer-grid {
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 30px 26px; margin-bottom: 38px;
}
.site-footer h3 {
  font-family: var(--f-body); font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); margin: 0 0 14px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; font-size: 15px; }
.site-footer a:hover { color: #FFFFFF; text-decoration: underline; }
.site-footer p { font-size: 15px; color: rgba(255,255,255,.72); }
.site-footer .brand { color: #FFFFFF; }
.site-footer .brand span {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: #C4B5FD;   /* the gradient wordmark is unreadable on plum */
}
.footer-legal {
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.16); padding-top: 22px;
  font-size: 14px; color: rgba(255,255,255,.62);
}


/* ==========================================================================
   16b. LOADING PLACEHOLDERS
   --------------------------------------------------------------------------
   Several blocks — the portfolio grid, the experts row, the home page tiles —
   ship with example content in the HTML and then ask the database for the real
   thing. That example content is the right floor if the database is asleep or
   JavaScript never runs, but it must not be READ on the way past: a visitor who
   sees "Name here" or an "EXAMPLE — REPLACE" badge for half a second has been
   shown the scaffolding of the business.

   So while the question is out, the block wears these instead. They say
   "something is coming" without saying anything false, and they are the same
   shape as what replaces them, so nothing jumps when the answer lands.
   ========================================================================== */

.skel {
  background: var(--purple-wash);
  border-radius: var(--radius-sm);
  position: relative; overflow: hidden;
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: skel-sweep 1.25s ease-in-out infinite;
}

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

.skel-round {
  border-radius: 50%; aspect-ratio: 1 / 1;
  width: 100%; max-width: 190px; margin: 0 auto 16px;
}
.skel-line { height: 13px; margin: 0 auto 10px; }
.skel-line.w-60 { width: 60%; }
.skel-line.w-40 { width: 40%; height: 10px; }
.skel-line.w-85 { width: 85%; }
.skel-tile { aspect-ratio: 2 / 3; border-radius: var(--radius); }
.skel-card { aspect-ratio: 3 / 4; border-radius: var(--radius); }

/* A block waiting on an answer should not be read out as if it were finished. */
[aria-busy="true"] { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .skel::after { animation: none; opacity: .35; }
}


/* ==========================================================================
   17. MOTION
   --------------------------------------------------------------------------
   Sections rise slightly as they come into view. It is switched on by JS
   only — so if JS never runs, nothing is ever left invisible.
   ========================================================================== */

.js-reveal [data-reveal] { opacity: 0; transform: translateY(18px); }
.js-reveal [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover, .card:hover, .svc:hover, .pf-open:hover { transform: none; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */

@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .start-grid { grid-template-columns: 1fr; }
  .start-aside { position: static; }
}

@media (max-width: 900px) {
  .hero-grid, .pagehead-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-figure, .pagehead-art { max-width: 460px; margin-inline: auto; }
  .hero-inner { max-width: none; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-art-side { order: -1; padding: 34px 24px; }
  .auth-art-figure { max-width: 300px; margin-bottom: 22px; }
  .legal-toc ol { columns: 1; }

  .nav-toggle { display: inline-block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--ground-raised); border-bottom: 1px solid var(--rule);
    padding: 14px 20px 20px;
    box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 14px; }
  .nav a.btn { margin-top: 6px; justify-content: center; }
  .site-header .wrap { position: relative; flex-wrap: wrap; }
}

@media (max-width: 700px) {
  body { font-size: 16.5px; }

  /* A button keeps its text on one line by default, which is right on a wide
     screen and wrong on a 390px phone — "See a free homepage mockup" was
     322px in a 292px column and pushed the whole page sideways. */
  .btn { white-space: normal; max-width: 100%; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .q-item { grid-template-columns: 1fr 1fr; }
  .q-item .q-desc { grid-column: 1 / -1; }
  .admin-grid { grid-template-columns: 1fr; }

  /* One row used to squeeze its text into a narrow column beside a 52px
     circle and wrap after three words. Smaller circle, tighter type, and the
     buttons drop to their own line with room to breathe. */
  .admin-row { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 15px; }
  .admin-row .admin-thumb.is-round { width: 40px; height: 40px; font-size: 13px; }
  .admin-row-body h3 { font-size: 16px; }
  .admin-row-body p { font-size: 13.5px; }
  .admin-row-actions { grid-column: 1 / -1; margin-top: 4px; }
  .admin-row-actions .btn { flex: 1 1 auto; text-align: center; }

  .chat { padding: 14px; max-height: none; }
  .bubble { max-width: 92%; }

  .hero-actions .btn { flex: 1 1 auto; }
  .expert .avatar { max-width: 130px; }
}