/* ==========================================================================
   LanternKey: shared styles for every page.
   Sections: 1 Tokens · 2 Base · 3 Layout · 4 Header · 5 Buttons & pills
             6 Cards & panels · 7 Chat (the doorway) · 8 Hand-made details
             9 Widgets · 10 FAQ · 11 Page parts · 12 Footer · 13 Responsive
             14 Reduced motion
   ========================================================================== */

/* 0. FONTS ----------------------------------------------------------------
   Hosted from the /fonts folder. Nothing is loaded from Google.
   Only what the site uses: Fraunces upright 600, Fraunces italic 400-600,
   Figtree upright 400-800. "latin" covers English, £, curly quotes and dashes. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fraunces-normal-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/fraunces-italic-400-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/figtree-normal-400-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 1. TOKENS ---------------------------------------------------------------
   Daylight is the default (no setting = Daylight). Night turns on with
   <html data-theme="dark">. js/theme-init.js sets that attribute: the visitor's
   saved choice first, then the device setting (a dark phone gets Night).
   Rule: amber is for fills and shapes. Text that needs the accent colour uses
   --accent, which is amber at night and ember in daylight (amber text on cream
   is only 1.8:1 contrast; ember is 5.3:1). */
:root {
  color-scheme: light;
  --surface-100: #fbf4e6;
  --surface-200: #f3e7cf;
  --surface-300: #ece0c3;
  --tint: #efd9a8;
  --ink: #1c1712;
  --ink-muted: #5b5045;
  --line: #e3d5b8;
  --amber: #f2a93b;
  --amber-hover: #f6bd6a;
  --on-amber: #1c1712;
  --ember: #a84a08;
  --teal: #1b6b5f;
  --danger: #b3261e;
  --accent: var(--ember);
  --focus: #a84a08;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-md: 12px;
  --r-lg: 24px;
  --r-pill: 999px;
  --border-w: 1.5px;
  --maxw: 1080px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-100: #14110e;
  --surface-200: #211b15;
  --surface-300: #2c241b;
  --tint: #54422b;
  --ink: #f6eedd;
  --ink-muted: #bdb19c;
  --line: #3a3127;
  --ember: #f3a15a;
  --teal: #4fc3ae;
  --danger: #ff8a80;
  --accent: var(--amber);
  --focus: #f2a93b;
}

/* 2. BASE ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface-100);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
}

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

h1, h2, h3, p, ul, ol, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a {
  color: var(--ember);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--ink); }

button { font: inherit; color: inherit; }

/* Keyboard focus: always visible, never removed. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  left: 16px; top: -64px;
  z-index: 100;
  background: var(--ink);
  color: var(--surface-100);
  padding: 10px 16px;
  border-radius: var(--r-md);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: 12px; color: var(--surface-100); }

/* Type */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.display {
  font-size: clamp(44px, 9vw, 92px);
  line-height: 0.95;
  text-wrap: balance;
}
h2 {
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1.05;
  text-wrap: balance;
}
h3 { font-size: 23px; line-height: 1.15; }

.kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 16px;
}
.label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tagline {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.3;
  color: var(--accent);
}
.lead {
  font-size: clamp(18px, 2.4vw, 21px);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 30em;
  text-wrap: pretty;
}
.body-muted { color: var(--ink-muted); }
.small-note { font-size: 14px; color: var(--ink-muted); }
/* The email address as plain text under each button (for people whose email app does not open). One click selects all of it. */
.mail-note { margin-top: 12px; font-size: 15px; }
.email-text { font-weight: 600; color: var(--ink); user-select: all; overflow-wrap: anywhere; }

/* Small spacing helpers */
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }

/* 3. LAYOUT -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}
.section { border-bottom: 1px solid var(--line); position: relative; }
.section > .container { padding-block: 64px; }
.section--hero > .container { padding-block: 72px 80px; }
.section--service-hero > .container { padding-block: 64px; }
.section--cta > .container {
  padding-block: 80px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.section--cta h2 { font-size: clamp(40px, 6vw, 72px); line-height: 0.95; max-width: 12em; }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 48px;
  align-items: center;
}
.split--top { align-items: start; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}
.cards--sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.row-wrap { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.head-row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

/* 4. HEADER -------------------------------------------------------------- */
/* The header stays at the top while you scroll, and gets smaller once you have scrolled down
   (js/main.js adds the class "is-compact"). It grows back when you return to the top.

   WHY THE PAGE NEVER JUMPS: the outer <header> is a see-through "slot" with a fixed height
   (--hdr-h, the FULL header height). It always reserves that room. Only the visible bar inside
   the slot shrinks and grows, so nothing below it ever moves. The see-through part of the slot
   lets clicks and taps through to the page. */
:root { --hdr-h: 66px; --hdr-c: 52px; }          /* full height, shrunk height (includes the 1px border) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--hdr-h);
  pointer-events: none;
}
.site-header-bar {
  position: relative;
  pointer-events: auto;
  background: color-mix(in oklab, var(--surface-100) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: calc(var(--hdr-h) - 1px);
}
.site-header.is-compact .nav { min-height: calc(var(--hdr-c) - 1px); }
.site-header.is-compact .site-header-bar { box-shadow: 0 8px 16px -14px rgb(0 0 0 / 0.45); }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.02em;
}
.brand { min-height: 44px; }   /* the logo link is a button too: keep it easy to hit */
.brand img { width: 30px; height: 30px; }
.brand:hover { color: var(--ink); }
.site-header.is-compact .brand { font-size: 18px; min-height: 40px; }
.site-header.is-compact .brand img { width: 24px; height: 24px; }
/* The Email us button. There are two copies: this one (in the bar) is for phones and tablets,
   and the one inside the menu is for laptops. Only one shows at a time. */
.site-header .header-book--bar { display: none; }
.site-header.is-compact .header-book { min-height: 36px; }
/* Smooth, only for people who haven't asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .nav, .brand, .brand img, .header-book, .theme-toggle, .nav-links a, .nav-toggle { transition: min-height .22s ease, font-size .22s ease, width .22s ease, height .22s ease, padding .22s ease; }
  .site-header-bar { transition: box-shadow .22s ease; }
}
/* No JavaScript: nothing shrinks and nothing sticks, so the header can't cover anything. */
:root:not(.js) .site-header { position: relative; height: auto; pointer-events: auto; }
.nav-menu {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}
.nav-links { display: flex; gap: 22px; font-size: 15px; }
.nav-links a {
  display: inline-block;
  min-width: 44px;
  text-align: center;
  color: var(--ink-muted);
  text-decoration: none;
  padding-block: 10px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--amber); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 14px;
  background: transparent;
  border: var(--border-w) solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle svg { width: 18px; height: 18px; flex: none; }
.icon-sun { display: none; }
/* Two lanterns: ink with an amber keyhole for daylight (default), amber for night. */
.logo-night { display: none; }
:root[data-theme="dark"] .logo-night { display: block; }
:root[data-theme="dark"] .logo-day { display: none; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }

.nav-toggle {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 14px;
  background: transparent;
  border: var(--border-w) solid var(--ink);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.nav-toggle .bars { width: 18px; height: 12px; position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after, .nav-toggle .bars i {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px;
}
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars i { top: 5px; }
.nav-toggle .bars::after { bottom: 0; }
/* When the menu is open, the three bars turn into an X. */
.nav-toggle[aria-expanded="true"] .bars::before { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { bottom: 5px; transform: rotate(-45deg); }
.nav-toggle[aria-expanded="true"] .bars i { opacity: 0; }

/* 5. BUTTONS & PILLS ----------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 22px;
  border: var(--border-w) solid var(--amber);
  border-radius: var(--r-pill);
  background: var(--amber);
  color: var(--on-amber);
  font-family: var(--text);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--amber-hover); border-color: var(--amber-hover); color: var(--on-amber); }
.btn--outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); border-color: var(--ink); color: var(--surface-100); }
.btn--sm { min-height: 40px; padding: 6px 16px; font-size: 14px; white-space: nowrap; }

.pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 5px 12px;
  border: var(--border-w) solid;
  border-radius: var(--r-pill);
}
.pill--first { background: var(--amber); color: var(--on-amber); border-color: var(--amber); }
.pill--later { background: transparent; color: var(--ink-muted); border-color: var(--line); }
.pill--included { background: transparent; color: var(--teal); border-color: var(--teal); }
.pill--neutral { background: transparent; color: var(--ink); border-color: var(--ink); }

/* Placeholders you still need to fill in. Impossible to miss on purpose. */
mark.placeholder {
  background: var(--amber);
  color: var(--on-amber);
  padding: 0 0.3em;
  margin-inline: 0.12em;
  border-radius: 4px;
  outline: 1.5px dashed var(--ink);
  outline-offset: 1px;
  font-weight: 700;
}

/* 6. CARDS & PANELS ------------------------------------------------------ */
.card {
  background: var(--surface-200);
  border: var(--border-w) solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
}
.card h3 { margin-bottom: 8px; }
.card p { font-size: 15px; color: var(--ink-muted); }

.service-card { display: flex; flex-direction: column; height: 100%; }
.service-card .arc { display: block; width: 64px; height: 32px; margin-bottom: 16px; }
.service-card h3 { font-size: 26px; }
.service-card p { margin-bottom: 16px; flex: 1; }
.service-card .pill { align-self: flex-start; }
/* "Coming later" cards: dashed outline, no fill, muted. Clearly not for sale. */
.service-card--later { background: transparent; border-style: dashed; border-color: var(--ink-muted); }
.service-card--later h3, .service-card--later p { color: var(--ink-muted); }
.service-card--later .arc-cut { stroke: var(--surface-100); }
a.service-link:hover .service-card--later { border-color: var(--ink); }

/* The one available helper, shown big. */
.feature {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 32px;
  align-items: center;
  background: var(--surface-200);
  border: var(--border-w) solid var(--amber);
  border-radius: var(--r-lg);
  padding: 32px;
}
.feature h3 { font-size: clamp(34px, 5vw, 48px); line-height: 1; margin: 8px 0 12px; }
.feature .arc { display: block; width: 64px; height: 32px; margin-bottom: 8px; }
.feature p { color: var(--ink-muted); font-size: 17px; }
.feature .row-wrap { margin-top: 24px; }

/* Banner at the top of pages for helpers that aren't ready yet. */
.later-banner { background: var(--surface-200); border-bottom: 1.5px dashed var(--ink-muted); }
.later-banner .container { padding-block: 16px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.later-banner p { margin: 0; }

.arc-first { fill: var(--amber); }
.arc-included { fill: var(--teal); }
.arc-later { fill: var(--tint); }
.arc-cut { fill: none; stroke: var(--surface-200); stroke-width: 3; }
a.service-link { display: block; color: inherit; text-decoration: none; height: 100%; }
a.service-link:hover .card { border-color: var(--amber); }
a.service-link:hover { color: inherit; }

.panel {
  background: var(--surface-200);
  border: var(--border-w) solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.panel-foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-muted);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.clock {
  font-family: var(--display);
  font-weight: 600;
  font-size: 23px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.swing { transform-origin: 50% 0; animation: lk-swing 3s ease-in-out infinite; }
@keyframes lk-swing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

.link-btn {
  background: none;
  border: 0;
  min-height: 44px;
  padding: 8px 8px;
  color: var(--ember);
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn:hover { color: var(--ink); }

/* 7. CHAT, IN A LIT DOORWAY ----------------------------------------------
   The home-page chat sits in an arched doorway with a lantern hung over it:
   "a light left on by the door". Crisp rings, no blur. */
.panel--door {
  border-radius: 50% 50% var(--r-lg) var(--r-lg) / 130px 130px var(--r-lg) var(--r-lg);
  padding-top: 20px;
  box-shadow: 0 0 0 10px var(--surface-100), 0 0 0 11.5px var(--tint);
  margin: 12px;
}
.door-top { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 20px; }
.door-top img { width: 52px; height: 52px; }
.door-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }

.chat { display: flex; flex-direction: column; gap: 14px; }
.msg {
  position: relative;
  max-width: 86%;
  padding: 10px 16px 11px;
  border-radius: var(--r-md);
  font-size: 15px;
  line-height: 1.45;
}
.msg p { margin: 0; color: inherit; font-size: inherit; }
.msg-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.msg-meta span { white-space: nowrap; }
.msg-time { font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; text-transform: none; letter-spacing: 0.02em; }
.msg-bot {
  align-self: flex-start;
  background: var(--amber);
  color: var(--on-amber);
  border-bottom-left-radius: 6px;
}
.msg-user {
  align-self: flex-end;
  background: var(--surface-100);
  color: var(--ink);
  border: var(--border-w) solid var(--line);
  border-bottom-right-radius: 6px;
}
.msg-user .msg-meta { color: var(--ink-muted); }
.msg-person {
  align-self: flex-start;
  background: var(--surface-100);
  color: var(--ink);
  border: var(--border-w) solid var(--teal);
  border-bottom-left-radius: 6px;
}
.msg-person .msg-meta { color: var(--teal); }

.marker {
  position: absolute;
  top: -11px; right: -9px;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface-100);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.msg-person .marker { right: auto; left: -9px; }

.handover {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-block: 4px;
  font-size: 14px;
  color: var(--ink-muted);
  position: relative;
}
.handover::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--teal);
  flex: none;
  align-self: center;
}
.handover time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); white-space: nowrap; }
.handover .marker { position: static; width: 22px; height: 22px; font-size: 12px; margin-left: auto; flex: none; align-self: center; }

.legend { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; }
.legend li { display: flex; gap: 12px; align-items: baseline; }
.legend .marker { position: static; flex: none; align-self: flex-start; margin-top: 2px; }

.js [data-chat]:not(.is-ready) > * { visibility: hidden; }
.is-pending { visibility: hidden; opacity: 0; transform: translateY(8px); }
.is-shown { animation: lk-in 0.4s ease-out both; }
@keyframes lk-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 8. HAND-MADE DETAILS --------------------------------------------------- */
.scribble { position: relative; display: inline-block; white-space: nowrap; }
.scribble-line {
  position: absolute;
  left: -1%; bottom: -0.14em;
  width: 102%; height: 0.24em;
  overflow: visible;
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: lk-draw 1s 0.6s ease-out forwards;
}
@keyframes lk-draw { to { stroke-dashoffset: 0; } }

.note {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: 0;
}
.signature {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  color: var(--ink);
  position: relative;
  display: inline-block;
}
.signature svg { position: absolute; left: 0; bottom: -10px; width: 100%; height: 12px; overflow: visible; fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.byline { font-size: 14px; color: var(--ink-muted); }

/* 9. WIDGETS ------------------------------------------------------------- */
.row-list { display: flex; flex-direction: column; gap: 8px; }
.row-btn {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  width: 100%;
  text-align: left;
  background: var(--surface-100);
  border: var(--border-w) solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 16px;
  min-height: 64px;
  cursor: pointer;
}
.row-btn:hover { border-color: var(--amber); }
.row-title { font-weight: 600; font-size: 15px; }
.row-status { font-size: 13px; font-weight: 700; color: var(--accent); text-align: right; }
.row-btn[data-tone="danger"] .row-status { color: var(--danger); }
.row-btn[aria-pressed="true"] .row-status { color: var(--teal); }
.row-sub, .row-time { font-size: 14px; color: var(--ink-muted); }
.row-time { text-align: right; font-size: 13px; }

.slider { width: 100%; accent-color: var(--accent); height: 44px; cursor: pointer; }
.slider-scale { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-muted); margin-top: 4px; }
.slider-scale strong { color: var(--ink); }
.slider-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; margin-bottom: 4px; }
.slider-label label { flex: 1 1 auto; min-width: 0; }
/* the value ("12 times", "3 minutes") must always stay on ONE line */
.slider-label output { flex: none; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }

.sums-result { text-align: left; }
.hours {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(56px, 9vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.card .hours { font-size: clamp(56px, 9vw, 92px); color: var(--accent); }

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin-top: 32px; }
.tier { position: relative; display: flex; flex-direction: column; gap: 12px; }
.tier h3 { margin: 0; font-size: 28px; }
.tier .tier-range { margin: -6px 0 0; font-weight: 600; font-size: 15px; color: var(--ink-muted); }
.card .price { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1.15; color: var(--ink); }
.card .price span { display: block; font-family: var(--text); font-weight: 500; font-size: 15px; color: var(--ink-muted); letter-spacing: 0; margin-top: 2px; }
.tier[aria-current="true"] { border-color: var(--amber); outline: 1.5px solid var(--amber); }
.tier-flag { position: absolute; top: 20px; right: 20px; }
.tier-flag[hidden] { display: none; }

/* 10. FAQ (native <details>, so it works without JavaScript) --------------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  min-height: 56px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 28px; line-height: 1; color: var(--accent); flex: none; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p { color: var(--ink-muted); padding-bottom: 20px; }

/* 11. PAGE PARTS --------------------------------------------------------- */
.breadcrumb { font-size: 14px; color: var(--ink-muted); margin-bottom: 32px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; }
.breadcrumb [aria-current] { color: var(--ink); }

.service-top { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; }
.service-top svg { width: 64px; height: 32px; }

/* The one-sentence idea, set big. */
.pov { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 6vw, 64px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.pov span { display: block; }
.pov .pov-people { font-style: italic; font-weight: 400; color: var(--accent); margin-top: 8px; }

.rules { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.rules li { display: grid; grid-template-columns: 56px 1fr; gap: 8px 16px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.rules .n { font-family: var(--display); font-weight: 600; font-size: 40px; line-height: 1; color: var(--accent); }
.rules h3 { margin-bottom: 4px; }
.rules p { color: var(--ink-muted); }

.vs { display: flex; flex-direction: column; gap: 12px; }
.vs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs-cell { border: var(--border-w) solid var(--line); border-radius: var(--r-md); padding: 16px 20px; }
.vs-cell .label { display: block; margin-bottom: 4px; }
.vs-not { color: var(--ink-muted); }
.vs-this { background: var(--surface-200); border-color: var(--amber); }

.worklog { display: flex; flex-direction: column; }
.worklog li { display: grid; grid-template-columns: 84px 1fr; gap: 4px 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; }
.worklog li:first-child { border-top: 0; padding-top: 0; }
.worklog time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.worklog .why { display: block; margin-top: 2px; color: var(--ink-muted); font-family: var(--display); font-style: italic; }

.wont { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.wont li { border: var(--border-w) solid var(--line); border-radius: var(--r-lg); padding: 24px; background: var(--surface-200); }
.wont svg { width: 28px; height: 28px; margin-bottom: 12px; fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.wont h3 { margin-bottom: 6px; }
.wont p { font-size: 15px; color: var(--ink-muted); }

.stop-list { display: flex; flex-direction: column; gap: 12px; }
.stop-list li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; }
.stop-list li::before { content: ""; width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%; flex: none; }

.dot-list { display: flex; flex-direction: column; gap: 10px; }
.dot-list li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; }
.dot-list li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); flex: none; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; }
.fact-label { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px; }

.photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--border-w) solid var(--line); border-radius: var(--r-lg); background: var(--surface-200); }
.founder p { font-size: 19px; line-height: 1.55; }
.founder p + p { margin-top: 14px; }
.founder .byline { font-size: 15px; }
.founder-row { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.founder-body { flex: 1 1 320px; min-width: 0; }
/* Rooz's photo (img.founder-photo, 128px). The dashed box is only the old placeholder look. */
.founder-photo { flex: none; width: 128px; height: 128px; display: grid; place-items: center; text-align: center; padding: 8px; border: 1.5px dashed var(--ink-muted); border-radius: var(--r-md); }
img.founder-photo { padding: 0; border-style: solid; border-color: var(--line); object-fit: cover; }

/* Pricing switch: <main data-pricing="numbers"> (default) or <main data-pricing="tailored"> on index.html.
   Anything marked data-pricing-only="..." shows only in its own mode. */
[data-pricing="numbers"] [data-pricing-only="tailored"],
[data-pricing="tailored"] [data-pricing-only="numbers"] { display: none; }

/* "Message us on WhatsApp": hidden until the real number is in (see js/main.js). */
[hidden] { display: none !important; }
.whatsapp-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.whatsapp-cta .small-note { margin: 0; max-width: 28em; }
.site-footer .whatsapp-cta { align-items: flex-start; margin-top: 14px; }

/* Plain-English legal pages (privacy) */
.draft-box {
  background: var(--amber);
  color: var(--on-amber);
  border: 1.5px dashed var(--ink);
  border-radius: var(--r-md);
  padding: 14px 20px;
  font-weight: 700;
}
.legal { max-width: 720px; }
.legal h2 { font-size: 26px; margin: 40px 0 12px; }
.legal p, .legal li { color: var(--ink-muted); }
.legal .draft-box { color: var(--on-amber); }
.legal p + p { margin-top: 12px; }
.legal .dot-list li { font-size: 17px; }
.legal a { color: var(--ember); }
.legal a.btn, .legal a.btn:hover { color: var(--on-amber); }
.legal a.btn--outline { color: var(--ink); }
.legal a.btn--outline:hover { color: var(--surface-100); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* 12. FOOTER ------------------------------------------------------------- */
.site-footer .container {
  padding-block: 32px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--ink-muted);
}
.site-footer .foot-brand { display: flex; gap: 12px; align-items: flex-start; }
.site-footer .foot-brand img { width: 28px; height: 28px; margin-top: 2px; }
.site-footer .byline + .byline { margin-top: 6px; }
.site-footer .later-links { color: var(--ink-muted); }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 24px; }
.site-footer a { color: var(--ink-muted); }
/* Easy to tap: each footer link is 41px high (the checklist asks for at least 40px). The negative margin keeps the footer looking
   the same, and the 24px row gap above stops neighbouring tap areas from overlapping. */
.site-footer nav a, .site-footer .byline a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.site-footer a:hover { color: var(--ink); }

/* 13. RESPONSIVE --------------------------------------------------------- */
@media (max-width: 960px) {
  .nav-links { gap: 16px; }
}
@media (max-width: 860px) {
  :root { --hdr-h: 68px; --hdr-c: 56px; }
  .nav { gap: 10px; }
  /* Phones and tablets: the bar holds  [logo + name]  [Email us]  [Menu]. */
  .js .nav-toggle { display: inline-flex; margin-left: 0; }
  .site-header .header-book--bar { display: inline-flex; }
  .site-header .header-book--menu { display: none; }
  .btn--sm { min-height: 46px; font-size: 15px; }
  .header-book { min-height: 44px; font-size: 14px; padding-inline: 14px; }
  .site-header.is-compact .header-book,
  .site-header.is-compact .nav-toggle { min-height: 40px; }
  .brand { flex: 1; min-width: 0; }
  /* The menu drops DOWN OVER the page (it does not push the page down), and scrolls if it is taller than the screen. */
  .nav-menu { flex-direction: column; align-items: stretch; gap: 8px; margin-left: 0; width: 100%; padding-block: 8px 16px; }
  .js .nav-menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    width: auto;
    padding: 8px 24px 16px;
    background: var(--surface-100);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 24px -16px rgb(0 0 0 / 0.5);
    max-height: calc(100vh - var(--hdr-c));
    max-height: calc(100dvh - var(--hdr-c));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .js .nav-menu.is-open { display: flex; }
  :root:not(.js) .nav { flex-wrap: wrap; padding-block: 8px; }
  .nav-links { flex-direction: column; gap: 0; }
  .nav-links a { display: block; text-align: left; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
  .nav-links a[aria-current="page"] { border-bottom-color: var(--line); color: var(--accent); }
  .theme-toggle { justify-content: center; min-height: 46px; }
}
/* Small phones: keep the logo, the Email us button and the menu button on ONE line. */
@media (max-width: 440px) {
  .nav { gap: 8px; }
  .brand { font-size: 18px; gap: 8px; }
  .brand img { width: 26px; height: 26px; }
  .site-header.is-compact .brand { font-size: 17px; }
  .site-header.is-compact .brand img { width: 22px; height: 22px; }
  .header-book { padding-inline: 12px; }
  /* the three-bars icon is enough; the word "Menu" stays for screen readers */
  .nav-toggle { padding: 0; width: 44px; justify-content: center; gap: 0; }
  .site-header.is-compact .nav-toggle { width: 40px; }
  .nav-toggle [data-nav-label] { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .js .nav-menu { padding-inline: 16px; }
}
@media (min-width: 861px) {
  /* laptops only: the shrunk header also tightens the links and the Night/Daylight button */
  .site-header.is-compact .theme-toggle { min-height: 36px; }
  .site-header.is-compact .nav-links a { padding-block: 7px; }
}
@media (max-width: 640px) {
  .container { padding-inline: 16px; }
  .section > .container { padding-block: 48px; }
  .section--hero > .container { padding-block: 48px 48px; }
  .section--service-hero > .container { padding-block: 40px; }
  .section--cta > .container { padding-block: 56px; }
  .split { gap: 32px; }
  .panel, .card { padding: 20px; }
  .feature { padding: 20px; }
  .tagline { font-size: 22px; }
  .msg { max-width: 94%; }
  .msg-meta { flex-wrap: wrap; gap: 0 12px; letter-spacing: 0.06em; }
  .row-btn { padding: 12px; }
  .panel--door { margin: 10px 6px; }
  .rules li { grid-template-columns: 40px 1fr; }
  .rules .n { font-size: 32px; }
  .vs-row { grid-template-columns: 1fr; gap: 8px; }
  .worklog li { grid-template-columns: 1fr; gap: 2px; }
  .signature { font-size: 34px; }
  .founder p { font-size: 18px; }
}

/* 13b. LAPTOP SCREENS THAT AREN'T VERY TALL ------------------------------
   On a normal laptop the headline AND the main buttons should be on screen
   without scrolling. These rules shrink type and spacing when the window is
   short, so nothing gets pushed below the fold. */
.section--hero .split { align-items: start; }   /* headline sits at the top, beside the tall chat */
@media (min-width: 861px) and (max-height: 860px) {
  .display { font-size: clamp(40px, min(9vw, 12.5vh), 92px); }
  .section--hero > .container { padding-block: 28px 40px; }
  .section--service-hero > .container { padding-block: 20px 32px; }
  .breadcrumb { margin-bottom: 12px; }
  .service-top { margin-bottom: 10px; }
  .section--hero .kicker { margin-bottom: 10px; }
  .section--hero .mb-24, .section--service-hero .mb-24 { margin-bottom: 12px; }
  .section--hero .mb-32, .section--service-hero .mb-32 { margin-bottom: 20px; }
  .section--hero .mb-16, .section--service-hero .mb-16 { margin-bottom: 8px; }
  .section--hero .lead, .section--service-hero .lead { font-size: clamp(16px, 2.5vh, 20px); line-height: 1.45; }
  .section--service-hero .tagline { font-size: clamp(18px, 3.1vh, 24px); }
  .section--hero .note { font-size: 17px !important; margin-top: 12px; }
  .btn { min-height: 44px; }
}

/* 14. REDUCED MOTION ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .is-pending { visibility: visible; opacity: 1; transform: none; }
  .scribble-line { stroke-dashoffset: 0; }
}