/* ==========================================================================
   Lillie's Tutoring - shared styles (public site + portal chrome).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   PALETTES
   The token names are historical - read them as roles, not literal colours:
     --pink-*  = accent          (highlights, tags, tape, swashes)
     --sky-*   = primary / cool  (buttons, links, information)
     --mint-*  = positive        (free slots, paid up, done)
     --amber-* = attention       (money owed, waiting)
   Berry is the default. Switch by putting data-theme="meadow" (or any other name
   below) on <html>, or use the Brand button at the bottom of the site while deciding.
   --------------------------------------------------------------------------- */

:root {

  /* ---------- BERRY - deep raspberry on teal (default) --------------------- */
  --ink:        #2e2a2e;
  --ink-soft:   #5b5259;
  --ink-faint:  #746d74;   /* 4.7:1 on the page; the old #8c848a was 3.4 */

  --pink-50:    #fdf4f7;
  --pink-100:   #fae1ea;
  --pink-200:   #f2c2d3;
  --pink-300:   #e492ae;
  --pink-600:   #a82d55;
  --pink-700:   #86213f;

  --sky-50:     #eff8f8;
  --sky-100:    #d9eeef;
  --sky-200:    #b0dcde;
  --sky-300:    #74c0c3;
  --sky-700:    #16646a;
  --sky-800:    #0f4b50;

  --mint-50:    #f1f8f1;
  --mint-100:   #ddefdd;
  --mint-200:   #bcdfbc;
  --mint-600:   #2e7532;
  --mint-700:   #235a26;

  --amber-50:   #fdf6ec;
  --amber-200:  #f2ddb8;
  --amber-700:  #8f5b16;

  --paper:      #fdfbfb;
  --card:       #ffffff;
  --line:       #ebe4e7;
  --line-soft:  #f4eff1;

  --radius:     16px;
  --radius-lg:  26px;

  /* Hard, offset shadows - drawn, not blurred. */
  --edge:       #dbd1d5;
  --shadow:     4px 5px 0 rgba(52,51,60,.06);
  --shadow-lg:  7px 9px 0 rgba(52,51,60,.12);

  /* Wordmark lettering. The wordmark is SVG text driven by these six values,
     so changing the lettering means changing them - options in brand.html. */
  --wm-family: "Cormorant Garamond", Garamond, Georgia, serif;
  --wm-style:  normal;
  --wm-weight: 600;
  --wm-size:   76px;
  --wm-track:  0px;
  --wm-fatten: 0px;

  --round: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", sans-serif;
  --hand:  "Fraunces", Georgia, "Times New Roman", serif;   /* editorial italic accent */
  --sans:  "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- 01 BLOSSOM - dusty rose accent on denim blue ----------------- */
:root[data-theme="blossom"] {
  --ink: #34333c; --ink-soft: #5f5e6b; --ink-faint: #716f79;
  --pink-50: #fdf6f8; --pink-100: #f7e5eb; --pink-200: #eecdd8; --pink-300: #dda6ba; --pink-600: #b0537a; --pink-700: #8d3f60;
  --sky-50: #f2f7fb; --sky-100: #dfeaf4; --sky-200: #c2d9ea; --sky-300: #93bad8; --sky-700: #2b6288; --sky-800: #1d4763;
  --mint-50: #f1f9f4; --mint-100: #d9eee1; --mint-200: #b5ddc4; --mint-600: #2f7a55; --mint-700: #245e41;
  --paper: #fdfcfa; --card: #fff; --line: #ece7e3; --line-soft: #f4f1ee; --edge: #ddd7d2;
}

/* ---------- 02 MEADOW - sage green, warm clay accent ---------------------- */
:root[data-theme="meadow"] {
  --ink: #2c332e; --ink-soft: #55605a; --ink-faint: #869089;
  --pink-50: #fdf6f1; --pink-100: #f7e7db; --pink-200: #ecd0bb; --pink-300: #d9ab86; --pink-600: #a4602f; --pink-700: #834b23;
  --sky-50: #f2f8f4; --sky-100: #dcece1; --sky-200: #bcdac6; --sky-300: #8dbb9d; --sky-700: #336b4b; --sky-800: #245139;
  --mint-50: #f1f7fa; --mint-100: #d9eaf2; --mint-200: #b3d6e6; --mint-600: #22687f; --mint-700: #1a5164;
  --paper: #fcfbf7; --card: #fff; --line: #e7e6de; --line-soft: #f2f1eb; --edge: #d8d8cd;
}

/* ---------- 03 HARBOUR - deep navy, mustard accent ------------------------ */
:root[data-theme="harbour"] {
  --ink: #21272e; --ink-soft: #4c5560; --ink-faint: #7d8894;
  --pink-50: #fdf8ec; --pink-100: #f8edcf; --pink-200: #efdca4; --pink-300: #ddbf62; --pink-600: #8f6a10; --pink-700: #72540b;
  --sky-50: #f1f5f9; --sky-100: #dde6ef; --sky-200: #bccfe0; --sky-300: #8aa9c6; --sky-700: #274c6f; --sky-800: #1b3750;
  --mint-50: #eff8f5; --mint-100: #d3ece4; --mint-200: #a9d9cb; --mint-600: #1f7361; --mint-700: #17594a;
  --paper: #fbfbfa; --card: #fff; --line: #e4e6e8; --line-soft: #eff1f2; --edge: #d3d7db;
}

/* ---------- 04 TERRACOTTA - burnt orange on deep teal --------------------- */
:root[data-theme="terracotta"] {
  --ink: #33302c; --ink-soft: #5e574f; --ink-faint: #8f867c;
  --pink-50: #fdf5f0; --pink-100: #f9e5d8; --pink-200: #f0c9b0; --pink-300: #e0a37c; --pink-600: #b45327; --pink-700: #8f3f1c;
  --sky-50: #f0f8f8; --sky-100: #dcefef; --sky-200: #b8dede; --sky-300: #83c4c4; --sky-700: #1f6b6b; --sky-800: #155050;
  --mint-50: #f4f8ef; --mint-100: #e5f0d8; --mint-200: #cbe1b2; --mint-600: #4f7a24; --mint-700: #3d5f1b;
  --paper: #fdfbf8; --card: #fff; --line: #ece5dd; --line-soft: #f5f0ea; --edge: #ded3c8;
}

/* ---------- 05 FOREST - forest green with honey --------------------------- */
:root[data-theme="forest"] {
  --ink: #262c26; --ink-soft: #4f584e; --ink-faint: #838a80;
  --pink-50: #fdf8ec; --pink-100: #faeecc; --pink-200: #f2dba0; --pink-300: #e2bd63; --pink-600: #96690d; --pink-700: #78530a;
  --sky-50: #f1f6f2; --sky-100: #dfece1; --sky-200: #bfd8c3; --sky-300: #8fb996; --sky-700: #24603a; --sky-800: #1a4a2b;
  --mint-50: #eef8f7; --mint-100: #d5eeeb; --mint-200: #aaddd8; --mint-600: #14746c; --mint-700: #0f5b54;
  --paper: #fbfbf7; --card: #fff; --line: #e6e7e0; --line-soft: #f1f2ec; --edge: #d5d7cd;
}

/* ---------- 06 PLUM - aubergine with apricot ------------------------------ */
:root[data-theme="plum"] {
  --ink: #2f2833; --ink-soft: #5b5162; --ink-faint: #8b8292;
  --pink-50: #fef7f1; --pink-100: #fbe8da; --pink-200: #f6cfb2; --pink-300: #eaad7f; --pink-600: #a55f24; --pink-700: #85491a;
  --sky-50: #f7f4f9; --sky-100: #ece5f1; --sky-200: #d6c8e0; --sky-300: #b49dc6; --sky-700: #593273; --sky-800: #43225a;
  --mint-50: #f2f7f2; --mint-100: #e0ede0; --mint-200: #c1dbc2; --mint-600: #3d7a45; --mint-700: #2f5e35;
  --paper: #fdfbfd; --card: #fff; --line: #ebe5ee; --line-soft: #f4f0f6; --edge: #dcd3e0;
}

/* ---------- 07 COBALT - strong blue with coral ---------------------------- */
:root[data-theme="cobalt"] {
  --ink: #262b36; --ink-soft: #4f566a; --ink-faint: #848b9c;
  --pink-50: #fff5f3; --pink-100: #ffe3de; --pink-200: #ffc6bc; --pink-300: #f79c8c; --pink-600: #c2402a; --pink-700: #9c3120;
  --sky-50: #f1f5fe; --sky-100: #dee8fc; --sky-200: #bfd2f8; --sky-300: #8fb0f0; --sky-700: #2450b8; --sky-800: #1a3c8c;
  --mint-50: #f0f9f3; --mint-100: #d8f0e0; --mint-200: #b0e0c2; --mint-600: #1f7a4d; --mint-700: #175e3b;
  --paper: #fbfcfe; --card: #fff; --line: #e4e8ef; --line-soft: #f0f3f8; --edge: #d3d9e4;
}

/* ---------- 08 SLATE - grey-blue and sand, the quietest ------------------- */
:root[data-theme="slate"] {
  --ink: #2b3138; --ink-soft: #556069; --ink-faint: #89939c;
  --pink-50: #fbf8f2; --pink-100: #f4ece0; --pink-200: #e6d8c2; --pink-300: #cdb590; --pink-600: #8a6b3d; --pink-700: #6d532d;
  --sky-50: #f4f6f8; --sky-100: #e5eaef; --sky-200: #cbd6df; --sky-300: #9db0c0; --sky-700: #3c5568; --sky-800: #2a3e4d;
  --mint-50: #f2f7f4; --mint-100: #e0ece5; --mint-200: #c2d9cc; --mint-600: #3a6b52; --mint-700: #2c533f;
  --paper: #fbfbfa; --card: #fff; --line: #e6e7e6; --line-soft: #f1f2f1; --edge: #d4d7d8;
}

/* ---------- 09 BERRY - deep raspberry on teal ----------------------------- */
:root[data-theme="berry"] {
  --ink: #2e2a2e; --ink-soft: #5b5259; --ink-faint: #8c848a;
  --pink-50: #fdf4f7; --pink-100: #fae1ea; --pink-200: #f2c2d3; --pink-300: #e492ae; --pink-600: #a82d55; --pink-700: #86213f;
  --sky-50: #eff8f8; --sky-100: #d9eeef; --sky-200: #b0dcde; --sky-300: #74c0c3; --sky-700: #16646a; --sky-800: #0f4b50;
  --mint-50: #f1f8f1; --mint-100: #ddefdd; --mint-200: #bcdfbc; --mint-600: #2e7532; --mint-700: #235a26;
  --paper: #fdfbfb; --card: #fff; --line: #ebe4e7; --line-soft: #f4eff1; --edge: #dbd1d5;
}

/* ---------- 10 CITRUS - charcoal with a lime kick ------------------------- */
:root[data-theme="citrus"] {
  --ink: #1f242a; --ink-soft: #4b535b; --ink-faint: #828b94;
  --pink-50: #f8fbec; --pink-100: #eef6cf; --pink-200: #dcec9f; --pink-300: #bdd85c; --pink-600: #5f7a12; --pink-700: #4a5f0d;
  --sky-50: #f4f5f6; --sky-100: #e6e8ea; --sky-200: #cdd1d5; --sky-300: #a0a7ae; --sky-700: #37414a; --sky-800: #232a31;
  --mint-50: #eff9f4; --mint-100: #d6f0e3; --mint-200: #a8e0c5; --mint-600: #12764f; --mint-700: #0d5c3d;
  --paper: #fafaf9; --card: #fff; --line: #e5e6e7; --line-soft: #f1f2f2; --edge: #d4d6d8;
}

/* ======================= SECOND SET - berry family ====================== */

/* ---------- 11 DAMSON - purple berry, slate blue */
:root[data-theme="damson"] {
  --ink: #332a33; --ink-soft: #5d525d; --ink-faint: #8e838e;
  --pink-50: #fbf4f8; --pink-100: #f3e2ee; --pink-200: #e5c4dc; --pink-300: #cd97be; --pink-600: #8e2d6c; --pink-700: #712255;
  --sky-50: #f4f6fa; --sky-100: #e3e9f3; --sky-200: #c6d3e6; --sky-300: #96abcd; --sky-700: #3a5480; --sky-800: #2a3e60;
  --mint-50: #f2f7f2; --mint-100: #e0eddf; --mint-200: #c0dbbe; --mint-600: #3a7a3f; --mint-700: #2d5f31;
  --paper: #fdfbfc; --card: #fff; --line: #eae3e8; --line-soft: #f3eef2; --edge: #dbd2da;
}

/* ---------- 12 CRANBERRY - bright berry, slate */
:root[data-theme="cranberry"] {
  --ink: #2c2a2c; --ink-soft: #585356; --ink-faint: #8a8487;
  --pink-50: #fdf4f6; --pink-100: #fbe3e8; --pink-200: #f3c6cf; --pink-300: #e2909f; --pink-600: #b32540; --pink-700: #8f1c32;
  --sky-50: #f3f7fa; --sky-100: #e2eaf1; --sky-200: #c4d5e2; --sky-300: #93aec4; --sky-700: #37556e; --sky-800: #263e52;
  --mint-50: #f1f9f5; --mint-100: #d9eee5; --mint-200: #b4dcc9; --mint-600: #2b7357; --mint-700: #205943;
  --paper: #fdfbfb; --card: #fff; --line: #eae4e5; --line-soft: #f4eff0; --edge: #d9d1d3;
}

/* ---------- 13 ROSEWOOD - muted brick rose, eucalyptus */
:root[data-theme="rosewood"] {
  --ink: #312b28; --ink-soft: #5c534e; --ink-faint: #8d847e;
  --pink-50: #fdf5f2; --pink-100: #f8e4df; --pink-200: #eec8c1; --pink-300: #d69b92; --pink-600: #a2483f; --pink-700: #823830;
  --sky-50: #f1f8f6; --sky-100: #deece8; --sky-200: #c2dcd5; --sky-300: #92bdb2; --sky-700: #3d6b60; --sky-800: #2c5148;
  --mint-50: #f6faef; --mint-100: #e8f1d6; --mint-200: #d3e2b0; --mint-600: #5c7a24; --mint-700: #47601a;
  --paper: #fdfbf9; --card: #fff; --line: #eae3df; --line-soft: #f4efec; --edge: #dbd2cc;
}

/* ---------- 14 MULBERRY - purple berry, sage */
:root[data-theme="mulberry"] {
  --ink: #2f2a30; --ink-soft: #5a525b; --ink-faint: #8b838c;
  --pink-50: #fcf5f8; --pink-100: #f5e3ec; --pink-200: #e7c8d6; --pink-300: #cb9ab2; --pink-600: #8b3a62; --pink-700: #6f2c4d;
  --sky-50: #f4f8f4; --sky-100: #e4eee5; --sky-200: #cadccb; --sky-300: #9fbda2; --sky-700: #4a6b4f; --sky-800: #35513a;
  --mint-50: #f0f8f9; --mint-100: #d6ecee; --mint-200: #a9d8da; --mint-600: #1f7276; --mint-700: #17585b;
  --paper: #fdfbfc; --card: #fff; --line: #e9e3e7; --line-soft: #f3eef1; --edge: #d9d1d7;
}

/* ---------- 15 CLARET - deep wine, warm stone */
:root[data-theme="claret"] {
  --ink: #2d2a2b; --ink-soft: #575152; --ink-faint: #898384;
  --pink-50: #fcf4f6; --pink-100: #f6e0e5; --pink-200: #e9bfc7; --pink-300: #cd8b98; --pink-600: #8e2438; --pink-700: #71182a;
  --sky-50: #f6f7f5; --sky-100: #e8ebe7; --sky-200: #d2d8d1; --sky-300: #a9b3a9; --sky-700: #4f5a52; --sky-800: #3a443d;
  --mint-50: #f1f9f4; --mint-100: #d9eee1; --mint-200: #b5ddc4; --mint-600: #2f7a55; --mint-700: #245e41;
  --paper: #fdfbfa; --card: #fff; --line: #e9e4e3; --line-soft: #f3efee; --edge: #d8d2d1;
}

/* ---------- 16 FIG - dusty pink on fig brown */
:root[data-theme="fig"] {
  --ink: #2b2126; --ink-soft: #564a50; --ink-faint: #877b81;
  --pink-50: #fdf6f8; --pink-100: #f9e6ec; --pink-200: #f0ccd7; --pink-300: #dda3b4; --pink-600: #a4566d; --pink-700: #843f55;
  --sky-50: #f6f1f3; --sky-100: #e7dbdf; --sky-200: #d0bec4; --sky-300: #a3878f; --sky-700: #4a2f3c; --sky-800: #35212b;
  --mint-50: #f4f8ee; --mint-100: #e3eed6; --mint-200: #cadfb4; --mint-600: #55743a; --mint-700: #425a2c;
  --paper: #fcfaFB; --card: #fff; --line: #e9e1e4; --line-soft: #f3edef; --edge: #d9cfd3;
}

/* ---------- 17 CERISE - vivid cerise, near-black navy */
:root[data-theme="cerise"] {
  --ink: #20242f; --ink-soft: #4c5262; --ink-faint: #818799;
  --pink-50: #fff4f8; --pink-100: #fde0ec; --pink-200: #f9bed6; --pink-300: #ee87b1; --pink-600: #c01a5b; --pink-700: #9a1449;
  --sky-50: #f3f4f8; --sky-100: #e1e5ec; --sky-200: #c3c9d6; --sky-300: #8f97ab; --sky-700: #232b3d; --sky-800: #171d2b;
  --mint-50: #eff9f6; --mint-100: #d3eee5; --mint-200: #a6dccc; --mint-600: #12775c; --mint-700: #0d5c47;
  --paper: #fcfbfd; --card: #fff; --line: #e6e5ea; --line-soft: #f2f1f5; --edge: #d5d4dc;
}

/* ---------- 18 GARNET - dark garnet, copper */
:root[data-theme="garnet"] {
  --ink: #2b2226; --ink-soft: #564a4e; --ink-faint: #877b7f;
  --pink-50: #fdf7f0; --pink-100: #f9e7d5; --pink-200: #f0cfae; --pink-300: #dda579; --pink-600: #a2571f; --pink-700: #814318;
  --sky-50: #f8f2f3; --sky-100: #ecdde0; --sky-200: #dbbfc4; --sky-300: #bd8a92; --sky-700: #6e1f2c; --sky-800: #551620;
  --mint-50: #f1f9f4; --mint-100: #d8ecdf; --mint-200: #b0d8c3; --mint-600: #2e6f4f; --mint-700: #23553c;
  --paper: #fdfbf9; --card: #fff; --line: #ebe2e2; --line-soft: #f4edee; --edge: #dbd0d1;
}

/* ---------- 19 RASPBERRY CREAM - berry and peach on cream */
:root[data-theme="raspberrycream"] {
  --ink: #33282a; --ink-soft: #5f5052; --ink-faint: #918082;
  --pink-50: #fef6f8; --pink-100: #fce4ea; --pink-200: #f6c8d4; --pink-300: #e79aae; --pink-600: #b03356; --pink-700: #8d2743;
  --sky-50: #fdf7f2; --sky-100: #f7e9dd; --sky-200: #eed3bd; --sky-300: #d9ab88; --sky-700: #8a5a3c; --sky-800: #6b442c;
  --mint-50: #f1f9f4; --mint-100: #d9eee1; --mint-200: #b5ddc4; --mint-600: #2f7a55; --mint-700: #245e41;
  --paper: #fdfaf6; --card: #fff; --line: #ece2dd; --line-soft: #f5eeea; --edge: #ded0cb;
}

/* ---------- 20 BORDEAUX - deep burgundy, blue-grey */
:root[data-theme="bordeaux"] {
  --ink: #2a2528; --ink-soft: #544c50; --ink-faint: #867d81;
  --pink-50: #faf4f5; --pink-100: #f1dfe3; --pink-200: #e1bcc3; --pink-300: #c1848f; --pink-600: #7d2438; --pink-700: #62182a;
  --sky-50: #f5f8f9; --sky-100: #e5ecef; --sky-200: #ccd8de; --sky-300: #a0b4be; --sky-700: #445a68; --sky-800: #31434e;
  --mint-50: #f2f9f6; --mint-100: #dbede4; --mint-200: #b6d9c8; --mint-600: #35735a; --mint-700: #285845;
  --paper: #fcfbfb; --card: #fff; --line: #e8e4e5; --line-soft: #f2eff0; --edge: #d7d2d4;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--round); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em; }
a  { color: var(--sky-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sky-800); }
em { font-style: normal; color: var(--pink-700); }

.sr, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; top: 12px; left: 12px; z-index: 100; background: var(--pink-600);
  color: #fff; padding: .6rem 1rem; border-radius: 10px;
}

.wrap { width: min(1160px, 92vw); margin-inline: auto; }
.wrap--narrow { width: min(760px, 92vw); }
.wrap--wide { width: min(1340px, 95vw); margin-inline: auto; }

.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section--pink  { background: var(--pink-50); }
.section--sky   { background: var(--sky-50); }
.section--mint  { background: var(--mint-50); }
.section__title { max-width: 20ch; }
.section__lede  { max-width: 62ch; color: var(--ink-soft); font-size: 1.06rem; margin-bottom: 2.4rem; }

.eyebrow {
  font-family: var(--sans); font-size: .82rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sky-700); margin: 0 0 .7rem; display: flex;
  align-items: center; gap: .6rem;
}
.eyebrow::after { content: ""; height: 2px; width: 42px; background: var(--pink-300); border-radius: 2px; }

/* A word with a hand-drawn swash under it */
.swash { position: relative; white-space: nowrap; }
.swash svg {
  position: absolute; left: -2%; bottom: -.34em; width: 104%; height: .38em;
  color: var(--pink-300); overflow: visible; pointer-events: none;
}
.swash--sky svg { color: var(--sky-300); }

/* --- The lily mark -------------------------------------------------------- */
.lily { width: 1em; height: 1em; display: inline-block; vertical-align: middle; }
.lily--petal { fill: currentColor; }
/* The mark is a single stroke, so there is no detail to drop at small sizes. */

/* --- Wordmark ------------------------------------------------------------- */
.wordmark { display: block; height: 46px; width: auto; }
.wordmark--sm { height: 40px; }

/* --- Marquee -------------------------------------------------------------- */
.marquee {
  overflow: hidden; background: var(--sky-800); color: #fff; padding: .65rem 0;
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
}
/* --marquee-shift is one copy of the list, and --marquee-time is how long
   that copy takes to cross at a constant speed. Both are set by initMarquee
   once it knows how many copies this screen needs. The fallbacks are what the
   strip did before, so it still moves if the script never runs. */
.marquee__track {
  display: flex; gap: 2.5rem; width: max-content;
  animation: slide var(--marquee-time, 38s) linear infinite;
}
.marquee span {
  font-family: var(--sans); font-size: .92rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 2.5rem;
}
.marquee .lily { width: 18px; height: 18px; color: var(--pink-300); }
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-shift, 50%))); }
}
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--round); font-size: 1rem; font-weight: 700; line-height: 1;
  padding: .9rem 1.5rem; border-radius: 100px; border: 2.5px solid var(--ink);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, background .2s, box-shadow .12s, color .2s;
}
.btn--primary, .btn--sky, .btn--ghost { box-shadow: 3px 4px 0 var(--ink); }
.btn--primary:hover, .btn--sky:hover, .btn--ghost:hover { transform: translate(-1px, -2px); box-shadow: 5px 6px 0 var(--ink); }
.btn--primary:active, .btn--sky:active, .btn--ghost:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn--primary { background: var(--pink-600); color: #fff; }
.btn--primary:hover { background: var(--pink-700); color: #fff; }
.btn--sky { background: var(--sky-300); color: var(--ink); }
.btn--sky:hover { background: var(--sky-200); color: var(--ink); }
.btn--ghost { background: #fff; color: var(--ink); }
.btn--ghost:hover { background: var(--pink-50); color: var(--ink); }
.btn--sm { padding: .55rem 1.05rem; font-size: .92rem; }
.btn--wide { width: 100%; padding: 1rem 1.5rem; }
.btn--tiny { padding: .35rem .75rem; font-size: .84rem; border-radius: 8px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* --- Nav ------------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,251,252,.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.nav.is-stuck { border-color: var(--line); box-shadow: 0 4px 24px rgba(193,73,126,.06); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; }

.brand { display: flex; align-items: center; gap: .3rem; text-decoration: none; color: inherit; }
/* The mark sits against the script line, not the middle of the whole lockup,
   so it's nudged up above the TUTORING row. */
.brand .lily { width: 31px; height: 31px; color: var(--pink-600); flex: none; transform: translateY(-3px); }

.nav__menu { display: flex; align-items: center; gap: 1.15rem; }
.nav__menu a { font-size: .93rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.nav__menu a:hover { color: var(--pink-700); }

/* The nav buttons drop the sticker outline - it's too heavy in a slim bar. */
.nav__menu a.btn {
  border-width: 0; box-shadow: none; padding: .5rem 1.05rem; font-size: .92rem; margin-left: .1rem;
}
.nav__menu a.btn:hover, .nav__menu a.btn:active { transform: none; box-shadow: none; }
.nav__menu a.btn--ghost {
  color: var(--ink); background: transparent; border: 1.5px solid var(--edge); padding: .42rem 1rem;
  margin-left: .7rem;
}
.nav__menu a.btn--ghost:hover { border-color: var(--pink-600); color: var(--pink-700); background: var(--pink-50); }
.nav__menu a.btn--primary { color: #fff; background: var(--pink-600); }
.nav__menu a.btn--primary:hover { background: var(--pink-700); color: #fff; }

.nav__toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line);
  border-radius: 13px; background: var(--card); cursor: pointer;
}
.nav__bars, .nav__bars::before, .nav__bars::after {
  display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
  margin-inline: auto; transition: transform .2s, opacity .2s;
}
.nav__bars::before, .nav__bars::after { content: ""; position: relative; }
.nav__bars::before { top: -5.5px; }
.nav__bars::after  { top: 3.5px; }
.nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__bars::before { transform: translateY(5.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::after  { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav__toggle { display: block; }

  /* The menu drops straight out of the bar: full width, square corners, no gap
     and no floating card. Rows run edge to edge and line up with the page
     gutter, so the panel reads as part of the bar rather than on top of it. */
  .nav__menu {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; gap: 0;
    background: var(--card); border: 0; border-bottom: 3px solid var(--ink);
    border-radius: 0; padding: 0; box-shadow: 0 14px 24px rgba(52,51,60,.11);
    max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .nav__menu.is-open { display: flex; animation: dropIn .16s ease-out; }
  @keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  .nav__menu a {
    display: block; width: 100%; padding: .74rem 4vw;
    border: 0; border-radius: 0; font-size: 1rem; color: var(--ink);
  }
  .nav__menu a + a { border-top: 1px solid var(--line-soft); }
  .nav__menu a:hover, .nav__menu a:focus-visible { background: var(--pink-50); color: var(--pink-700); }

  /* Both actions become rows too. The buttons are pill-shaped elsewhere, so
     their shape, shadow and hover-lift all have to be undone here. */
  .nav__menu a.btn {
    display: block; margin: 0; border: 0; border-top: 1px solid var(--line-soft);
    border-radius: 0; box-shadow: none; font-size: 1rem; text-align: left;
    padding: .74rem 4vw;
  }
  .nav__menu a.btn:hover, .nav__menu a.btn:active { transform: none; box-shadow: none; }
  .nav__menu a.btn--ghost { background: transparent; color: var(--ink); }
  .nav__menu a.btn--ghost:hover { background: var(--pink-50); color: var(--pink-700); }
  .nav__menu a.btn--ghost::before { display: none; }
  .nav__menu a.btn--primary { background: var(--pink-50); color: var(--pink-700); }
  .nav__menu a.btn--primary:hover { background: var(--pink-100); color: var(--pink-700); }

  /* The floating island has a backdrop-filter, which makes it the containing
     block - so the menu aligns to the island's own edges, not the viewport. */
}

/* ===========================================================================
   NAV TREATMENT. The nine other options explored here have been removed now
   the brand is settled - they were dead weight, and the specificity of
   :root[data-nav="7"] over a plain .nav rule caused three separate bugs.
   They are in the git history if one is ever wanted back.
   1 is the default (no attribute needed). Pick one, copy its rules into the
   plain .nav block above, and delete the rest.
   =========================================================================== */

/* --- 2 Underline: no button chrome, links underline on hover -------------- */

/* --- 3 Capsule: the whole menu sits in one soft pill ---------------------- */

/* --- 4 Divider: a hairline between the links and the buttons -------------- */

/* --- 5 Compact: only the links that sell, rest in the footer -------------- */

/* --- 6 Sticker: the outlined style used everywhere else on the page ------- */

/* --- 7 Dark bar ----------------------------------------------------------- */
:root[data-nav="7"] .nav { background: var(--sky-800); border-bottom-color: transparent; }
:root[data-nav="7"] .nav.is-stuck { box-shadow: 0 4px 24px rgba(0,0,0,.18); }
:root[data-nav="7"] .nav .brand svg { --ink: #ffffff; --sky-700: #9fd0d3; --pink-600: var(--pink-300); }
:root[data-nav="7"] .nav__menu a { color: rgba(255,255,255,.82); }
:root[data-nav="7"] .nav__menu a:hover { color: #fff; }
:root[data-nav="7"] .nav__menu a.btn--ghost { border-color: rgba(255,255,255,.45); color: #fff; }
:root[data-nav="7"] .nav__menu a.btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
:root[data-nav="7"] .nav__menu a.btn--primary { background: var(--pink-300); color: var(--ink); }
:root[data-nav="7"] .nav__menu a.btn--primary:hover { background: #fff; color: var(--ink); }
:root[data-nav="7"] .nav__toggle { background: transparent; border-color: rgba(255,255,255,.4); }
:root[data-nav="7"] .nav__bars, :root[data-nav="7"] .nav__bars::before, :root[data-nav="7"] .nav__bars::after { background: #fff; }

/* --- 8 Uppercase: small letterspaced caps, more formal -------------------- */

/* --- 9 Floating island: the bar detaches from the page edge --------------- */

/* --- 10 Two-tone: both actions filled, taller bar ------------------------- */

/* --- Status pill ---------------------------------------------------------- */
.status {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.3rem;
  padding: .45rem 1rem .45rem .75rem; border-radius: 100px;
  background: var(--mint-100); border: 1px solid var(--mint-200);
  font-size: .88rem; font-weight: 700; color: var(--mint-700);
}
.status--lg { font-size: .95rem; margin: 0; }
.status__dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--mint-600); flex: none;
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(44,125,89,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(44,125,89,0); }
  100% { box-shadow: 0 0 0 0 rgba(44,125,89,0); }
}
.status.is-closed { background: var(--amber-50); border-color: var(--amber-200); color: var(--amber-700); }
.status.is-closed .status__dot { background: #c98a2e; animation: none; }
@media (prefers-reduced-motion: reduce) { .status__dot { animation: none; } }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(115% 85% at 86% -8%, var(--sky-100) 0%, transparent 60%),
    radial-gradient(85% 70% at 4% 104%, var(--mint-100) 0%, transparent 62%),
    radial-gradient(60% 55% at 55% 112%, var(--pink-100) 0%, transparent 72%),
    var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.hero__petal {
  position: absolute; color: var(--pink-100); opacity: .8; pointer-events: none;
}
.hero__petal--a { width: 190px; height: 190px; top: 6%; right: 4%; transform: rotate(18deg); }
.hero__petal--b { width: 120px; height: 120px; bottom: 8%; left: -20px; color: var(--sky-100); transform: rotate(-24deg); }
.hero__inner {
  position: relative; display: grid; grid-template-columns: 1.32fr .88fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
  padding: clamp(2.6rem, 6vw, 5rem) 0 clamp(3.2rem, 7vw, 5rem);
}
.lede { font-size: 1.14rem; color: var(--ink-soft); max-width: 56ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 1.6rem; }

.trust { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; padding: 0; margin: 0; }
.trust li { font-size: .93rem; color: var(--ink-soft); display: flex; align-items: center; gap: .45rem; }
.trust .lily { width: 17px; height: 17px; color: var(--pink-600); }

.hero__card {
  background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--radius-lg);
  padding: 1.7rem 1.6rem; box-shadow: 8px 9px 0 var(--sky-200); transform: rotate(1.2deg);
}
.hero__card-title {
  font-size: 1.15rem; font-family: var(--hand); font-style: italic; font-weight: 500; color: var(--sky-700);
  margin-bottom: 1rem; transform: rotate(-2deg); display: inline-block;
}
.glance { margin: 0; display: grid; }
.glance > div { padding: .7rem 0; border-top: 2px dotted var(--edge); }
.glance > div:first-child { border-top: 0; padding-top: 0; }
.glance dt { font-family: var(--round); font-weight: 700; font-size: .95rem; color: var(--pink-700); }
.glance dd { margin: 0; font-size: .97rem; color: var(--ink-soft); }
.glance__foot {
  margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line-soft);
  font-size: .86rem; color: var(--ink-faint);
}
@media (max-width: 940px) { .hero__inner { grid-template-columns: 1fr; } .hero__petal--a { display: none; } }

/* --- Meet Lillie ---------------------------------------------------------- */
.about { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2rem, 5vw, 3.6rem); align-items: start; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }

.about__photo { position: sticky; top: 110px; }
@media (max-width: 900px) { .about__photo { position: static; max-width: 380px; } }

.frame {
  margin: 0; background: var(--card); border: 2.5px solid var(--ink); border-radius: 6px;
  padding: .8rem .8rem .3rem; box-shadow: 8px 9px 0 var(--pink-200); transform: rotate(-1.4deg);
  position: relative;
}
.frame::before {
  content: ""; position: absolute; top: -14px; left: 50%; width: 104px; height: 26px;
  transform: translateX(-50%) rotate(2.5deg); background: var(--sky-200);
  border: 1px solid rgba(0,0,0,.09); opacity: .85;
}
.frame img {
  display: block; width: 100%; border-radius: 3px; background: var(--pink-50);
  /* Crops any photo to a portrait, weighted towards the top so a selfie
     lands on the face rather than the chin. */
  aspect-ratio: 5 / 6; object-fit: cover; object-position: center 30%;
}
.frame figcaption {
  font-family: var(--hand); font-style: italic; font-size: 1.15rem; color: var(--ink-soft);
  text-align: center; padding: .55rem 0 .35rem;
}
.frame--empty {
  aspect-ratio: 4 / 5; display: grid; place-content: center; gap: .4rem; text-align: center;
  border: 2.5px dashed var(--edge); border-radius: 6px; background: var(--pink-50);
  padding: 1.5rem; color: var(--ink-faint); font-size: .92rem;
}
.frame--empty .lily { width: 40px; height: 40px; color: var(--pink-300); margin-inline: auto; }
.frame--empty b { font-family: var(--round); color: var(--ink-soft); font-size: 1rem; }

.about__copy > p { color: var(--ink-soft); }
.about__copy .section__title { max-width: 24ch; }
.about__quote {
  margin: 1.6rem 0; padding: .2rem 0 .2rem 1.2rem; border-left: 4px solid var(--pink-300);
  font-family: var(--hand); font-style: italic; font-size: 1.22rem; line-height: 1.45; color: var(--ink);
}
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 1.6rem;
  margin: 1.8rem 0 2rem; border-top: 2px solid var(--edge);
}
.facts > div { display: grid; grid-template-columns: 108px 1fr; gap: .8rem; align-items: baseline; padding: .7rem 0; border-bottom: 2px dotted var(--edge); }
.facts dt { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.facts dd { margin: 0; font-size: .97rem; }

/* --- Cards ---------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 1.4rem 1.2rem; }
.card {
  --rot: -.7deg;
  background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--radius);
  padding: 1.5rem 1.45rem; box-shadow: 5px 6px 0 var(--pink-200);
  transform: rotate(var(--rot)); transition: transform .18s ease, box-shadow .18s ease;
}
.card:nth-child(2n) { --rot: .6deg; box-shadow: 5px 6px 0 var(--sky-200); }
.card:nth-child(3n) { --rot: -.4deg; box-shadow: 5px 6px 0 var(--mint-200); }
.card:hover { transform: rotate(0deg) translate(-2px, -3px); box-shadow: 8px 10px 0 var(--pink-200); }
.card:nth-child(2n):hover { box-shadow: 8px 10px 0 var(--sky-200); }
.card:nth-child(3n):hover { box-shadow: 8px 10px 0 var(--mint-200); }
.card h3 { margin: .6rem 0 .5rem; }
.card p { font-size: .97rem; color: var(--ink-soft); margin: 0; }
.card__tag {
  display: inline-block; font-family: var(--sans); font-size: .78rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: var(--pink-200); padding: .22rem .8rem; border-radius: 100px;
  border: 2px solid var(--ink);
}
.card:nth-child(2n) .card__tag { background: var(--sky-200); }
.card:nth-child(3n) .card__tag { background: var(--mint-200); }
.card--feature { background: var(--pink-50); }

/* --- SEND ----------------------------------------------------------------- */
.send { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.send p { color: var(--ink-soft); }
.send__note {
  background: var(--card); border-left: 4px solid var(--pink-300); border-radius: 0 12px 12px 0;
  padding: .95rem 1.15rem; font-size: .96rem; color: var(--ink) !important;
}
.send__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.send__list li {
  background: var(--card); border: 1px solid var(--line); border-radius: 13px;
  padding: .95rem 1.1rem; font-size: .96rem; color: var(--ink-soft);
}
.send__list strong { color: var(--ink); font-family: var(--round); font-weight: 600; }
@media (max-width: 880px) { .send { grid-template-columns: 1fr; } }

/* --- Qualifications ------------------------------------------------------- */
/* One card per row. Three columns put a tall card beside two short ones and
   left them half empty; stacked, each says its piece across the full width. */
.quals { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.qual {
  background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--radius);
  padding: 1.4rem; box-shadow: 4px 5px 0 var(--sky-200);
}
.qual:nth-child(2n) { box-shadow: 4px 5px 0 var(--pink-200); }
.qual h3 { display: flex; align-items: center; gap: .55rem; margin-bottom: .45rem; }
.qual h3 .lily { width: 20px; height: 20px; color: var(--pink-600); flex: none; }
.qual p { font-size: .96rem; color: var(--ink-soft); margin: 0; }

/* The DBS card is a rubber stamp, not a gradient banner. It is the one that
   matters most on this page, so it gets the tint, the heavier border and the
   stamp beside its text - the other two are the same width and quieter. */
.qual--badge {
  background: var(--sky-50); border: 3px solid var(--ink);
  box-shadow: 7px 8px 0 var(--sky-300); padding: 1.6rem;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.75rem; align-items: center;
}
.qual--badge h3 { font-size: 1.4rem; }
.qual--badge h3 .lily { width: 24px; height: 24px; }
.qual--badge p { font-size: 1rem; color: var(--ink-soft); max-width: 62ch; }

.stamp {
  flex: none; width: 122px; height: 122px; border: 4px double var(--pink-600); border-radius: 50%;
  color: var(--pink-600); display: grid; place-content: center; text-align: center;
  transform: rotate(-11deg); font-family: var(--round); font-weight: 700; line-height: 1.1;
  padding: .5rem; opacity: .92;
}
.stamp b { display: block; font-size: 1.4rem; letter-spacing: .04em; }
.stamp span { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; margin-top: .25rem; }
.stamp i { display: block; font-family: var(--hand); font-style: italic; font-size: .82rem; margin-top: .3rem; }
@media (max-width: 700px) {
  .qual--badge { grid-template-columns: 1fr; gap: 1.1rem; }
  .stamp { margin-inline: auto; }
}

.safeguard {
  margin-top: 1.4rem; background: var(--card); border: 2.5px dashed var(--edge);
  border-radius: var(--radius); padding: 1.6rem 1.5rem;
}
.safeguard ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .5rem; }
.safeguard li { font-size: .96rem; color: var(--ink-soft); }

/* --- Timetable ------------------------------------------------------------ */
.tt__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem; margin-bottom: 1rem;
}
.tt__meta { display: flex; flex-direction: column; font-size: .87rem; color: var(--ink-faint); margin-right: auto; }
.tt__meta span:first-child { color: var(--ink); font-weight: 700; font-family: var(--round); }
.weeknav { display: flex; gap: .4rem; }
.weeknav button {
  font: inherit; font-size: .88rem; font-weight: 700; font-family: var(--round);
  padding: .45rem .95rem; border-radius: 100px; border: 1.5px solid var(--line);
  background: #fff; color: var(--ink-soft); cursor: pointer;
}
.weeknav button.is-on { background: var(--sky-100); border-color: var(--sky-200); color: var(--sky-800); }

.legend { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .86rem; color: var(--ink-faint); margin-bottom: .9rem; }
.legend span { display: inline-flex; align-items: center; gap: .45rem; }
.chip-key { width: 14px; height: 14px; border-radius: 5px; display: inline-block; }
.chip-key--open { background: var(--mint-100); border: 1.5px solid var(--mint-600); }
.chip-key--booked { background: var(--pink-50); border: 1.5px solid var(--pink-200); }
.chip-key--unavailable { background: repeating-linear-gradient(45deg, #f7f2f5, #f7f2f5 3px, #ece2e8 3px, #ece2e8 6px); border: 1.5px solid var(--line); }

.tt__scroll { overflow-x: auto; padding-bottom: .4rem; scroll-snap-type: x proximity; }
.tt { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: .6rem; min-width: max-content; }
.tt__day {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .85rem .7rem; display: flex; flex-direction: column; gap: .45rem; scroll-snap-align: start;
}
.tt__dayname {
  font-family: var(--round); font-size: .88rem; font-weight: 600; color: var(--ink-faint);
  text-align: center; padding-bottom: .5rem; border-bottom: 1px solid var(--line-soft); margin-bottom: .2rem;
}
.tt__dayname b { display: block; color: var(--ink); font-size: .95rem; }
.tt__day.is-today { border-color: var(--sky-300); box-shadow: 0 0 0 3px var(--sky-50); }
.tt__day.is-today .tt__dayname b { color: var(--sky-800); }

.slot {
  display: block; width: 100%; text-align: left; font-family: var(--sans);
  border-radius: 11px; padding: .55rem .6rem; font-size: .9rem; line-height: 1.3;
  border: 1.5px solid var(--line); background: #fbf7f9; color: var(--ink-faint);
}
.slot__time { display: block; font-weight: 800; font-variant-numeric: tabular-nums; }
.slot__meta { display: block; font-size: .77rem; margin-top: .1rem; }
.slot--open {
  background: var(--mint-50); border-color: var(--mint-200); color: var(--mint-700);
  cursor: pointer; transition: background .15s, transform .12s, box-shadow .15s;
}
.slot--open:hover { background: var(--mint-100); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(44,125,89,.16); }
.slot--open.is-picked { background: var(--mint-600); border-color: var(--mint-600); color: #fff; }
.slot--open.is-picked .slot__meta { color: rgba(255,255,255,.85); }
.slot--booked { background: var(--pink-50); border-color: var(--pink-200); color: var(--pink-700); }
.slot--booked .slot__time { text-decoration: line-through; opacity: .8; }
.slot--requested { background: var(--sky-50); border-color: var(--sky-200); color: var(--sky-800); }
.slot--blocked, .slot--closed, .slot--past {
  background: repeating-linear-gradient(45deg, #fbf7f9, #fbf7f9 4px, #f3ebef 4px, #f3ebef 8px);
}
.slot--past { opacity: .55; }
.slot--none { border-style: dashed; text-align: center; font-size: .82rem; padding: .8rem .4rem; }

.tt.is-closed { opacity: .5; pointer-events: none; filter: grayscale(.5); }
.tt__notice { font-size: .9rem; color: var(--ink-faint); margin: .9rem 0 0; max-width: 70ch; }
.tt__closed {
  background: var(--amber-50); border: 1px solid var(--amber-200); color: var(--amber-700);
  border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-bottom: 1rem; font-size: .97rem;
}
.tt__closed strong { display: block; font-family: var(--round); font-size: 1.15rem; margin-bottom: .2rem; }

/* --- Booking -------------------------------------------------------------- */
.booking { display: grid; grid-template-columns: 1.5fr .9fr; gap: 1.2rem; margin-top: 2.4rem; }
.booking__form, .booking__side {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2.1rem); box-shadow: var(--shadow);
}
.booking__side { background: linear-gradient(160deg, var(--sky-700) 0%, #3d7c99 100%); color: rgba(255,255,255,.9); border: 0; }
.booking__side h3 { color: #fff; }
.booking__side h3:not(:first-child) { margin-top: 1.8rem; }
.booking__intro { font-size: .97rem; color: var(--ink-soft); }

.rates { list-style: none; margin: 0; padding: 0; }
.rates li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.2); font-size: .95rem;
}
.rates li:last-child { border-bottom: 0; }
.rates b { font-family: var(--round); font-size: 1.2rem; color: #fff; font-weight: 600; white-space: nowrap; }
.rates small { display: block; font-size: .76rem; color: rgba(255,255,255,.7); }
.rates__note { font-size: .87rem; color: rgba(255,255,255,.75); margin-top: .9rem; }
.steps { margin: 0; padding-left: 1.1rem; font-size: .94rem; display: grid; gap: .45rem; }
.steps li { color: rgba(255,255,255,.88); }
@media (max-width: 940px) { .booking { grid-template-columns: 1fr; } }

/* --- Availability CTA + intro-call details -------------------------------- */
.tt__cta {
  margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem;
  justify-content: space-between; background: var(--card); border: 2.5px dashed var(--edge);
  border-radius: var(--radius); padding: 1.1rem 1.3rem;
}
.tt__cta p { margin: 0; color: var(--ink-soft); font-size: .98rem; }

.intro__detail {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin: 1.8rem 0 0;
  font-size: .92rem; color: var(--ink-soft);
}
.intro__detail b {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.booking__side .steps li { margin-bottom: .2rem; }
.booking__side .steps b { color: #fff; }
.booking__side .btn--sky { margin-top: .3rem; border: 0; }

/* --- Forms ---------------------------------------------------------------- */
.field { margin-bottom: 1.1rem; border: 0; padding: 0; }
.field > label, .field legend {
  display: block; font-size: .9rem; font-weight: 700; margin-bottom: .4rem; color: var(--ink);
}
.req { color: var(--pink-600); }
.opt { font-weight: 400; color: var(--ink-faint); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .row { grid-template-columns: 1fr; } }

/* Every text-like input, whatever its type - listing them one by one meant
   url and time fields silently fell back to the browser's own styling. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
select, textarea {
  width: 100%; font: inherit; font-size: .97rem; color: var(--ink);
  padding: .75rem .9rem; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--pink-50); transition: border-color .15s, box-shadow .15s, background .15s;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--pink-300); box-shadow: 0 0 0 3px var(--pink-100); background: #fff;
}
input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: #c9502b; background: #fdf3f0; }
:focus-visible { outline: 2px solid var(--pink-600); outline-offset: 2px; }

.checks { display: flex; flex-wrap: wrap; gap: .5rem; }
.checks label {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .92rem; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 100px; padding: .45rem .85rem; background: var(--pink-50);
  transition: border-color .15s, background .15s, color .15s;
}
.checks label:has(input:checked) { border-color: var(--pink-300); background: var(--pink-100); color: var(--pink-700); font-weight: 700; }
/* not taught at the chosen age */
.checks label.is-off {
  text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: .45;
  cursor: not-allowed; background: transparent; border-style: dashed;
}
.checks label.is-off input { cursor: not-allowed; }
.field--tucked { margin: .9rem 0 0; padding-left: .9rem; border-left: 3px solid var(--pink-200); }

.checks__note {
  font-size: .87rem; color: var(--sky-800); background: var(--sky-50);
  border-left: 3px solid var(--sky-300); border-radius: 0 8px 8px 0;
  padding: .5rem .7rem; margin: 0 0 .7rem;
}
.checks input { accent-color: var(--pink-600); }

.consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: var(--ink-soft); margin-bottom: 1.2rem; cursor: pointer; }
.consent input { margin-top: .3rem; width: 17px; height: 17px; accent-color: var(--pink-600); flex: none; }

.switch { display: flex; align-items: center; gap: .55rem; font-size: .92rem; color: var(--ink-soft); cursor: pointer; }
.switch input { width: 18px; height: 18px; accent-color: var(--pink-600); cursor: pointer; }

.form__msg { font-size: .94rem; margin: .9rem 0 0; }
.form__msg.is-ok { color: var(--mint-700); font-weight: 700; }
.form__msg.is-err { color: #b23c17; font-weight: 700; }

/* --- Payments (public explainer) ------------------------------------------ */
.pay { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; }
.pay__card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.45rem; box-shadow: var(--shadow);
}
.pay__card h3 { display: flex; align-items: center; gap: .5rem; }
.pay__card p { font-size: .96rem; color: var(--ink-soft); margin: 0; }
.pay__num {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--sky-100); color: var(--sky-800); font-family: var(--round); font-weight: 600; font-size: 1rem;
}
.pay__cta {
  margin-top: 1.4rem; background: linear-gradient(135deg, var(--pink-100) 0%, var(--sky-100) 100%);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.4rem);
  display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: space-between;
}
.pay__cta h3 { margin: 0 0 .3rem; font-size: 1.35rem; }
.pay__cta p { margin: 0; color: var(--ink-soft); max-width: 52ch; font-size: .97rem; }

/* --- Reviews -------------------------------------------------------------- */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem 1.4rem; }
.review {
  --rot: -1.1deg;
  position: relative; background: #fffdf8; border: 2.5px solid var(--ink); border-radius: 4px;
  padding: 1.7rem 1.45rem 1.4rem; box-shadow: 5px 6px 0 var(--pink-200);
  display: flex; flex-direction: column; transform: rotate(var(--rot));
}
.review:nth-child(2n) { --rot: 1.2deg; box-shadow: 5px 6px 0 var(--sky-200); }
.review:nth-child(3n) { --rot: -.4deg; box-shadow: 5px 6px 0 var(--mint-200); }
/* a strip of tape at the top */
.review::before {
  content: ""; position: absolute; top: -13px; left: 50%; width: 88px; height: 24px;
  transform: translateX(-50%) rotate(-3deg); background: var(--sky-200);
  border: 1px solid rgba(0,0,0,.09); opacity: .85;
}
.review:nth-child(2n)::before { background: var(--pink-200); transform: translateX(-50%) rotate(4deg); }
.review:nth-child(3n)::before { background: var(--mint-200); }
.review__stars { color: var(--pink-600); letter-spacing: .14em; font-size: 1.05rem; margin-bottom: .6rem; }
.review__quote { font-size: 1.02rem; line-height: 1.6; margin: 0 0 1.1rem; flex: 1; color: var(--ink); }
.review__who { margin: 0; font-size: .9rem; }
.review__who strong { display: block; font-family: var(--hand); font-style: italic; font-weight: 600; font-size: 1.06rem; }
.review__who span { color: var(--ink-faint); }
.reviews__foot { margin-top: 1.6rem; font-size: .94rem; color: var(--ink-faint); }
#reviewSummary strong { color: var(--pink-600); font-family: var(--round); }

/* --- FAQ ------------------------------------------------------------------ */
.faq { display: grid; gap: .6rem; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq summary {
  cursor: pointer; padding: 1.05rem 1.3rem; font-weight: 700; font-size: 1.02rem; font-family: var(--round);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--pink-600); font-weight: 400; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 1.3rem 1.15rem; margin: 0; font-size: .97rem; color: var(--ink-soft); max-width: 72ch; }

/* --- Contact -------------------------------------------------------------- */

/* --- Footer --------------------------------------------------------------- */
.footer {
  background: linear-gradient(120deg, var(--sky-100) 0%, var(--mint-100) 55%, var(--pink-100) 100%);
  color: var(--ink-soft); padding: 2.8rem 0;
}
.footer__inner { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; align-items: center; justify-content: space-between; }
.footer__brand { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.footer__brand .lily { width: 24px; height: 24px; color: var(--pink-600); transform: translateY(-2px); }
.footer__brand .footer__small { width: 100%; margin-top: .2rem; }
.footer__small { font-size: .88rem; margin: 0; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer__nav a { color: var(--ink-soft); font-size: .9rem; text-decoration: none; font-weight: 600; }
.footer__nav a:hover { color: var(--pink-700); text-decoration: underline; }

/* --- "Your own login" section --------------------------------------------- */
.logins__intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; margin-bottom: 2.6rem; }
.logins__intro p { color: var(--ink-soft); font-size: 1.06rem; margin: 0; }
.logins__badge {
  font-family: var(--hand); font-style: italic; font-weight: 600; font-size: 1.05rem; background: var(--mint-100);
  border: 2.5px solid var(--ink); border-radius: 100px; padding: .5rem 1.1rem;
  display: inline-block; transform: rotate(-2deg); box-shadow: 3px 4px 0 var(--mint-200);
}

/* The login walkthrough deliberately avoids the outlined-card treatment used
   everywhere else on the page - alternating rows, big numerals, no chrome. */
.walkflow { display: grid; gap: clamp(2.4rem, 5vw, 4rem); }
.walkstep {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center;
}
.walkstep:nth-child(even) .walkstep__media { order: 2; }
@media (max-width: 820px) {
  .walkstep { grid-template-columns: 1fr; gap: 1.2rem; }
  .walkstep:nth-child(even) .walkstep__media { order: 0; }
}

/* A screen, not a card: proper browser chrome, and a soft cast shadow rather
   than the hard offset one the sticker cards use. */
.walkstep__media .mock {
  background: var(--card); border: 2.5px solid var(--ink); border-radius: 14px;
  box-shadow: 0 16px 32px rgba(46,42,46,.14);
}
.walkstep__media .mock__bar { background: var(--pink-50); border-bottom: 2.5px solid var(--ink); padding: 8px 11px; }
.walkstep__media .mock__body { padding: 13px; gap: 10px; }
.walkstep__copy { position: relative; }
.walkstep__n {
  margin: 0 0 .1rem; font-family: var(--round); font-weight: 700; font-size: 3.4rem;
  line-height: 1; color: var(--sky-200); letter-spacing: -.03em;
}
.walkstep__n span { display: inline-block; border-bottom: 3px solid var(--pink-300); padding-bottom: .1rem; }
.walkstep__copy h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: .5rem 0 .6rem; max-width: 20ch; }
.walkstep__copy p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; max-width: 46ch; }

.walkflow__note {
  margin: 0; border-top: 2px dashed var(--edge); padding-top: 1.6rem;
  font-size: 1rem; color: var(--ink-soft); max-width: 82ch;
}
.walkflow__note b { color: var(--ink); font-family: var(--round); }

.mock__note {
  border: 1.5px solid var(--edge); border-left: 3px solid var(--pink-300); border-radius: 8px;
  padding: 6px 8px; font-size: 10px; color: var(--ink-soft); line-height: 1.4;
}
.mock__note b { color: var(--ink); }

/* Mini mock-ups of the two dashboards */
.mock {
  background: var(--paper); border: 2px solid var(--edge); border-radius: 12px; overflow: hidden;
  font-size: 11px; line-height: 1.35;
}
.mock__bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: var(--pink-50); border-bottom: 2px solid var(--ink); }
.mock__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--edge); }
.mock__url { margin-left: 6px; font-size: 9.5px; color: var(--ink-faint); font-weight: 700; letter-spacing: .02em; }
.mock__body { padding: 12px; display: grid; gap: 9px; }
.mock__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mock__tile { border: 1.5px solid var(--edge); border-radius: 8px; padding: 6px 7px; }
.mock__tile small { display: block; font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.mock__tile b { font-family: var(--round); font-size: 15px; font-weight: 700; }
.mock__tile--credit { background: var(--mint-50); border-color: var(--mint-200); color: var(--mint-700); }
.mock__tile--sky { background: var(--sky-50); border-color: var(--sky-200); color: var(--sky-800); }
.mock__rows { display: grid; gap: 5px; }
.mock__row { display: flex; align-items: center; gap: 7px; border: 1.5px solid var(--edge); border-radius: 8px; padding: 5px 7px; }
.mock__when { flex: none; width: 30px; text-align: center; background: var(--sky-50); border-radius: 5px; padding: 2px 0; font-size: 8.5px; color: var(--sky-800); font-weight: 800; }
.mock__row > span:nth-child(2) { flex: 1; }
.mock__pill { flex: none; font-size: 8.5px; font-weight: 800; text-transform: uppercase; padding: 1px 6px; border-radius: 100px; background: var(--mint-100); color: var(--mint-700); }
.mock__pill--wait { background: var(--amber-50); color: var(--amber-700); }
.mock__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.mock__slot { border: 1.5px solid var(--edge); border-radius: 6px; padding: 5px 3px; text-align: center; font-size: 8.5px; font-weight: 700; color: var(--ink-faint); }
.mock__slot--free { background: var(--mint-50); border-color: var(--mint-200); color: var(--mint-700); }
.mock__slot--taken { background: var(--pink-50); border-color: var(--pink-200); color: var(--pink-700); }
.mock__slot--off { background: repeating-linear-gradient(45deg,#fbf7f9,#fbf7f9 3px,#efe5ea 3px,#efe5ea 6px); }
.mock__chat { display: grid; gap: 5px; }
.mock__bubble { max-width: 82%; padding: 5px 8px; border-radius: 11px; font-size: 10px; }
.mock__bubble--them { background: var(--pink-50); border: 1.5px solid var(--edge); border-bottom-left-radius: 3px; justify-self: start; }
.mock__bubble--me { background: var(--sky-700); color: #fff; border-bottom-right-radius: 3px; justify-self: end; }
.mock__target { display: flex; gap: 6px; align-items: center; border: 1.5px solid var(--mint-200); background: var(--mint-50); border-radius: 7px; padding: 4px 7px; font-size: 10px; }
.mock__box { width: 11px; height: 11px; border: 1.5px solid var(--mint-600); border-radius: 3px; flex: none; }
.mock__box.is-on { background: var(--mint-600); position: relative; }
.mock__box.is-on::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 8px; display: grid; place-items: center; }

.logins__cta {
  margin-top: 2.2rem; background: var(--ink); color: #fff; border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.3rem); display: flex; flex-wrap: wrap; gap: 1.2rem;
  align-items: center; justify-content: space-between;
}
.logins__cta h3 { color: #fff; margin: 0 0 .3rem; font-size: 1.4rem; }
.logins__cta p { margin: 0; color: rgba(255,255,255,.75); max-width: 54ch; font-size: .97rem; }
.logins__cta .btn { border-color: #fff; box-shadow: 3px 4px 0 rgba(255,255,255,.6); }
.logins__cta .btn:hover { box-shadow: 5px 6px 0 rgba(255,255,255,.6); }

/* --- Reveal --------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px) rotate(var(--rot, 0deg)); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: rotate(var(--rot, 0deg)); }
/* On a phone the cards fade in one at a time, and on a slow one that reads
   as an empty section until you scroll. No reveal below tablet width. */
@media (max-width: 768px) {
  .reveal { opacity: 1; transform: rotate(var(--rot, 0deg)); transition: none; }
}

/* The live diary on its way, and the hours it turns out not to need. */
.tt__loading {
  grid-column: 1 / -1; text-align: center; color: var(--ink-faint);
  padding: 2.4rem 1rem; font-size: .95rem;
}
.tt--loading { min-height: 8rem; }
.tt__range {
  grid-column: 1 / -1; margin: 0 0 .6rem; font-size: .86rem; color: var(--ink-faint);
}
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

@media print { .nav, .hero__cta, .booking__form, .nav__toggle { display: none !important; } body { background: #fff; } }

/* The dark bar colours all three strokes of the burger white, including the
   middle one that has to disappear to make the close X. Same specificity as
   the rule that hides it, and later in the file, so it won - leaving a three
   armed asterisk instead of a cross. */
:root[data-nav="7"] .nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }

/* --- Dropdown on the dark bar ----------------------------------------------
   The dark nav paints its links white for the bar itself, but on small screens
   the menu becomes a white card and those links vanished into it. These undo
   that, and must sit after the nav treatments above: the selectors are equally
   specific, so whichever comes last wins.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  :root[data-nav="7"] .nav__menu a { color: var(--ink); }
  :root[data-nav="7"] .nav__menu a:hover,
  :root[data-nav="7"] .nav__menu a:focus-visible { color: var(--pink-700); background: var(--pink-50); }
  :root[data-nav="7"] .nav__menu a.btn--ghost { border: 0; border-top: 1px solid var(--line-soft);
                                                background: transparent; color: var(--ink); }
  :root[data-nav="7"] .nav__menu a.btn--ghost:hover { background: var(--pink-50); color: var(--pink-700); }
  :root[data-nav="7"] .nav__menu a.btn--primary { background: var(--pink-50); color: var(--pink-700); }
  :root[data-nav="7"] .nav__menu a.btn--primary:hover { background: var(--pink-100); color: var(--pink-700); }
}

/* ------------------------------------------------------- cost calculator
   Sits under the three payment cards. Deliberately plain: two controls, one
   answer, one line of explanation. */
.calc {
  margin-top: 1.4rem; padding: 1.2rem 1.3rem;
  background: var(--card); border: 1.5px solid var(--sky-200); border-radius: var(--radius);
}
.calc__title { font-size: 1.05rem; margin: 0 0 .8rem; }
.calc__row { display: flex; flex-wrap: wrap; gap: .8rem; }
.calc__field { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 12rem; min-width: 0; }
.calc__field > span {
  font-size: .82rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.calc__field select, .calc__field input {
  font: inherit; padding: .55rem .65rem; width: 100%;
  border: 1.5px solid var(--edge); border-radius: 10px;
  background: var(--paper); color: var(--ink);
}
.calc__field select:focus-visible, .calc__field input:focus-visible {
  outline: 2px solid var(--sky-700); outline-offset: 1px;
}
.calc__out {
  margin: 1rem 0 .3rem; font-family: var(--round); font-weight: 700;
  font-size: 1.35rem; color: var(--sky-800);
}
.calc__note { margin: 0; color: var(--ink-soft); font-size: .92rem; }

/* Two ways in from the payments panel: sign in, or look round first. */
.pay__cta-btns { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* The notice sits above the timetable when there is nothing on it to book.
   It carries a button now, so it needs to stack rather than run on. */
.tt__closed { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.tt__closed .btn { margin-top: .3rem; }

/* A free hour on the timetable is a button now - it carries the hour down to
   the enquiry form. The slot styles above were already written for one, so
   only the keyboard needs anything extra. */
.slot--pick:focus-visible {
  outline: 2.5px solid var(--mint-600); outline-offset: 2px;
}

/* And where it lands: the hour they clicked, sat in the form, removable. */
.slotpick {
  border: 1.5px solid var(--mint-200); background: var(--mint-50);
  border-radius: 14px; padding: .85rem .95rem;
}
.slotpick__lead {
  margin: 0; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; color: var(--mint-700);
}
.slotpick__value {
  margin: .2rem 0 0; font-weight: 800; font-size: 1.02rem; color: var(--ink);
}
.slotpick__note { margin: .25rem 0 .6rem; font-size: .84rem; color: var(--ink-faint); }