/* The theme, in one place. Linked LAST in every head so it wins over each page's own styles.
   Only tokens change between light and dark; every component already reads them.
   Light is the brand and the default. Dark is a choice the visitor makes and we remember. */

:root{
  --card:#fff;
  --nav-bg:rgba(251,250,247,.85);
  --shadow:rgba(22,19,12,.07);
}

html[data-theme="dark"]{
  --paper:#12100B; --paper-2:#1A1710; --card:#1A1710;
  --ink:#F2EFE6; --ink-2:#CFC9BA; --muted:#98917F; --line:#332E24;
  --gold:#F0BC22; --gold-lt:#F8CE4E; --gold-dp:#D8A50E;
  --nav-bg:rgba(18,16,11,.9); --shadow:rgba(0,0,0,.45);
}

html[data-theme="dark"] body{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] nav{background:var(--nav-bg)}

/* Our own logo is 25TW artwork, so it may invert onto a dark bar.
   A CLIENT'S logo is their property and their brand: never invert it, never recolour it,
   never filter it. Instead the band it sits on stays light in both themes, white in light
   and a light grey in dark, so every client mark is shown exactly as they gave it to us. */
html[data-theme="dark"] .brand img{filter:invert(1) brightness(1.9) contrast(.9)}
html[data-theme="dark"] .clients{background:#E8E4DA;border-top-color:#2A251C;border-bottom-color:#2A251C}
html[data-theme="dark"] .clients .kicker{background:#F4F1EA;border-color:#C9C2B2;color:#4A443A}
html[data-theme="dark"] .clients-lb{color:#5A5347}
html[data-theme="dark"] .hero .kicker .kfor{color:var(--gold)}
html[data-theme="dark"] .clients .lg{background:transparent}
html[data-theme="dark"] .track img,
html[data-theme="dark"] .logo-row img,
html[data-theme="dark"] .clients img{filter:none;opacity:1}

/* The mascot is line art: black outlines with white fills. On a dark page the outlines
   vanish and it reads as disconnected white shapes. It gets its own white panel, the same
   answer as the client logo band: artwork stays on the ground it was drawn for. */
html[data-theme="dark"] .mascot{background:#fff;border:1px solid #E3DED2;border-radius:20px;
  padding:16px;box-shadow:0 12px 34px rgba(0,0,0,.4)}

/* The architecture diagram is an illustration drawn on light: cream bands, white boxes,
   dark labels. Theming its boxes turned dark text onto dark boxes and the labels vanished.
   It keeps its own colours and sits on a light panel, as it was drawn. */
html[data-theme="dark"] .diagram{background:#FBFAF7;border-color:#2A251C}

/* Surfaces that were painted white before there was a theme. */
html[data-theme="dark"] .cal-card,
html[data-theme="dark"] .calc,
html[data-theme="dark"] .kicker,
html[data-theme="dark"] .sheet,
html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .form,
html[data-theme="dark"] .tag,
html[data-theme="dark"] .x{background:var(--card)}

html[data-theme="dark"] .btn-ghost{border-color:#7E7666;background:var(--paper-2);color:var(--ink)}
html[data-theme="dark"] .btn-ghost:hover{border-color:var(--ink);background:#241F17}
html[data-theme="dark"] .tlink{color:var(--ink-2);border-bottom-color:#7E7666}
html[data-theme="dark"] .tlink:hover{color:var(--ink);border-bottom-color:var(--ink)}
html[data-theme="dark"] .body p{color:var(--ink-2)}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{background:var(--paper-2);color:var(--ink);border-color:var(--line)}

/* The toggle itself: large, beside the logo, sun in light and moon in dark. */
.brand{margin-right:0 !important}
.theme-btn{flex:0 0 auto;margin-left:14px;margin-right:auto;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;height:44px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);cursor:pointer;padding:0 17px;transition:.15s ease;
  font:600 14px/1 var(--sans,Inter,system-ui,sans-serif);white-space:nowrap}
.theme-btn .lab{display:inline-block}
.theme-btn .lab-dark{display:inline}
.theme-btn .lab-light{display:none}
html[data-theme="dark"] .theme-btn .lab-dark{display:none}
html[data-theme="dark"] .theme-btn .lab-light{display:inline}
.theme-btn:hover{border-color:var(--ink);background:var(--paper-2)}
.theme-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.theme-btn svg{width:22px;height:22px;display:block;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.theme-btn .moon{display:none}
html[data-theme="dark"] .theme-btn .moon{display:block}
html[data-theme="dark"] .theme-btn .sun{display:none}
@media (max-width:900px){.theme-btn .lab{display:none}.theme-btn{padding:0;width:44px}}
@media (max-width:560px){.theme-btn{width:40px;height:40px;margin-left:10px}}

/* The "ask it here" link had no class, so it fell back to browser blue. */
[data-ask-open]{color:var(--gold-dp);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
[data-ask-open]:hover{color:var(--ink)}
html[data-theme="dark"] [data-ask-open]{color:var(--gold)}
html[data-theme="dark"] [data-ask-open]:hover{color:var(--ink)}

/* The logo at full size needs a taller bar. On a phone it steps down so the mark,
   the toggle and the call button still fit on one line. */
@media (max-width:700px){
  .brand img{height:46px}
  .nav-in{height:74px}
}

/* Second, quieter step under every "Book a call" (Kalin's audit, 29 Sep 2026). A text link, not a
   second button: Rishi's rule is one call to action per block. Ink text on a gold underline, because
   gold text on white fails contrast (1.99:1). */
.endcta .alt{display:block;margin-top:14px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px}
.endcta .alt:hover{text-decoration-color:var(--ink)}

/* Dark mode: the selected blog filter ("Everything" / "The journey" / "Questions answered") flips to a near-white
   pill, and gold on white is unreadable. Rishi, 30 Sep 2026: keep it gold, give it a black or dark grey outline. */
html[data-theme="dark"] .chip.on{color:var(--gold);font-weight:700;
  text-shadow:-1px -1px 0 #2B2721,1px -1px 0 #2B2721,-1px 1px 0 #2B2721,1px 1px 0 #2B2721,0 -1px 0 #2B2721,0 1px 0 #2B2721,-1px 0 0 #2B2721,1px 0 0 #2B2721}