/* ==========================================================================
   Kensington Square Therapy · kst.ltd
   Site stylesheet, second edition, October 2026.

   Palette β only: navy #1F2D4B, gold #C7A33C (gold-deep #876418 for gold
   text on light), cream #F8F8F5 / #F8F2E9, paper #FFFEFB. Quieter text is
   navy at an opacity, never a new colour. Cormorant Garamond for display
   (weight 500 for headings; it has no optical-size axis and none is set here),
   Raleway for text.

   The idea: Kensington Square is a considered space, and each child is their
   own shape within it. One painting carries the imagery. The home page shows
   it whole, with the square of the mark drawn round the gold disc that sits
   where the mark's own disc sits; every other page looks through a square
   window at a different part of the same painting. Corners stay square.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font License; see fonts/OFL-*.txt) */
@font-face {
  font-family: "KST Cormorant";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/site/fonts/cormorant-garamond-latin-wght-normal.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: "KST Cormorant";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/site/fonts/cormorant-garamond-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "KST Cormorant";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/site/fonts/cormorant-garamond-latin-wght-italic.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: "KST Cormorant";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/site/fonts/cormorant-garamond-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "KST Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/site/fonts/raleway-latin-wght-normal.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: "KST Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/site/fonts/raleway-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "KST Raleway";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/site/fonts/raleway-latin-wght-italic.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;
}

/* Fallbacks shaped to the web fonts (size-adjust and vertical metrics measured from the woff2 files with
   capsize), so the words do not reflow when Cormorant and Raleway arrive. */
@font-face {
  font-family: "KST Cormorant Fallback";
  font-style: normal;
  src: local("Times New Roman"), local("TimesNewRomanPSMT");
  ascent-override: 95.7589%; descent-override: 29.7433%; line-gap-override: 0%; size-adjust: 96.4923%;
}
@font-face {
  font-family: "KST Cormorant Fallback";
  font-style: italic;
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT");
  ascent-override: 106.0381%; descent-override: 32.9361%; line-gap-override: 0%; size-adjust: 87.1385%;
}
@font-face {
  font-family: "KST Raleway Fallback";
  font-style: normal;
  src: local("Arial"), local("ArialMT");
  ascent-override: 93.5386%; descent-override: 23.2851%; line-gap-override: 0%; size-adjust: 100.4933%;
}

/* ---------- Tokens */
:root {
  --navy: #1F2D4B;
  --gold: #C7A33C;
  --gold-deep: #876418;
  --cream: #F8F8F5;
  --cream-warm: #F8F2E9;
  --paper: #FFFEFB;

  --ink: #1F2D4B;
  --ink-2: rgba(31, 45, 75, 0.86);
  --ink-3: rgba(31, 45, 75, 0.84);
  --line: rgba(31, 45, 75, 0.12);
  --line-strong: rgba(31, 45, 75, 0.24);

  --on-navy: #FFFEFB;
  --on-navy-2: rgba(255, 254, 251, 0.84);
  --on-navy-3: rgba(255, 254, 251, 0.74);
  --line-navy: rgba(255, 254, 251, 0.14);
  --gold-hair: rgba(199, 163, 60, 0.55);

  --serif: "KST Cormorant", "KST Cormorant Fallback", "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sans: "KST Raleway", "KST Raleway Fallback", "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.6875rem;
  --fs-lede: clamp(1.28rem, 1.14rem + 0.55vw, 1.6rem);
  --fs-intro: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-d1: clamp(2.85rem, 1.75rem + 3.5vw, 5rem);
  --fs-d2: clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.45rem + 1.9vw, 3.2rem);
  --fs-h3: clamp(1.4rem, 1.25rem + 0.55vw, 1.75rem);
  --fs-h4: 1.0625rem;

  --container: 76rem;
  --gutter: clamp(1.5rem, 4vw, 2.5rem);
  --measure: 40rem;
  --section-pad: clamp(3.5rem, 1.75rem + 7vw, 7rem);
  --head-gap: clamp(2.25rem, 1.6rem + 1.8vw, 3.5rem);
  --header-h: 76px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 62.4375em) {
  :root { --header-h: 64px; }
}

/* ---------- Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1.25rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  font-variant-numeric: lining-nums proportional-nums;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, ul, ol, dl, figure, blockquote, h1, h2, h3, h4, h5, h6 { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
strong, b { font-weight: 600; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--navy); }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.kst-on-navy :focus-visible, .kst-section--navy :focus-visible, .kst-panel--navy :focus-visible, .kst-masthead :focus-visible, .kst-footer :focus-visible,
.kst-hero :focus-visible, .kst-band :focus-visible, .kst-page-hero :focus-visible { outline-color: var(--gold); }
[hidden] { display: none !important; }

.kst-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.kst-skip {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--gold); color: var(--navy); padding: 0.75rem 1.1rem;
  font-weight: 600; font-size: var(--fs-small); text-decoration: none;
}
.kst-skip:focus { top: 1rem; }

/* ---------- Type
   Headings in Cormorant 500, with italic as a change of voice rather than decoration.
   The words under a heading are set to read, not to whisper: a hero's standfirst in the
   serif, every other introduction in Raleway at a size that carries. */
h1, h2, h3, .kst-h1, .kst-h2, .kst-h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.012em;
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}
h1, .kst-h1 { font-size: var(--fs-d2); line-height: 1.04; letter-spacing: -0.016em; }
h2, .kst-h2 { font-size: var(--fs-h2); line-height: 1.08; }
h3, .kst-h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 600; letter-spacing: -0.004em; }
h4, .kst-h4 { font-family: var(--sans); font-size: var(--fs-h4); font-weight: 600; line-height: 1.4; letter-spacing: 0.005em; }
h1 em, h2 em, h3 em, .kst-display em { font-style: italic; }
h2 em, h3 em { color: var(--gold-deep); }
.kst-hero h1 em, .kst-band h2 em, .kst-on-navy h1 em, .kst-on-navy h2 em, .kst-on-navy h3 em,
.kst-section--navy h2 em, .kst-section--navy h3 em, .kst-hero h2 em { color: var(--gold); }
/* No word left alone on a last line: paragraphs, list items, definitions and captions */
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
/* Quotation marks hang outside the line where the browser allows it */
blockquote, .kst-quote blockquote p { hanging-punctuation: first last; }

.kst-lede {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-lede);
  line-height: 1.42;
  letter-spacing: -0.002em;
  color: var(--ink-2);
  max-width: 36rem;
}
.kst-hero .kst-lede, .kst-on-navy .kst-lede, .kst-section--navy .kst-lede, .kst-band .kst-lede { color: var(--on-navy-2); }
.kst-intro { font-size: var(--fs-intro); line-height: 1.66; color: var(--ink-2); max-width: 44rem; }
.kst-on-navy .kst-intro, .kst-section--navy .kst-intro, .kst-band .kst-intro { color: var(--on-navy-2); }
.kst-small { font-size: var(--fs-small); }
.kst-muted { color: var(--ink-3); }
.kst-on-navy .kst-muted, .kst-section--navy .kst-muted { color: var(--on-navy-3); }

.kst-eyebrow {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  line-height: 1.4;
  margin-bottom: 1.15rem;
}
.kst-eyebrow::before { content: ""; flex: none; width: 1.75rem; height: 1px; background: currentColor; }
.kst-eyebrow--plain::before { display: none; }
.kst-on-navy .kst-eyebrow, .kst-section--navy .kst-eyebrow, .kst-hero .kst-eyebrow, .kst-band .kst-eyebrow { color: var(--gold); }

/* Prose links */
.kst-prose a, .kst-text-link, p a, li a, dd a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--gold-deep);
  transition: text-decoration-color 0.2s var(--ease), text-decoration-thickness 0.2s var(--ease);
}
.kst-prose a:hover, .kst-text-link:hover, p a:hover, li a:hover, dd a:hover { text-decoration-thickness: 2px; }
.kst-on-navy p a, .kst-on-navy li a, .kst-on-navy dd a, .kst-section--navy p a, .kst-section--navy li a,
.kst-hero p a, .kst-band p a { text-decoration-color: var(--gold); }

/* ---------- Layout */
.kst-container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.kst-narrow { max-width: calc(48rem + 2 * var(--gutter)); }
.kst-measure { max-width: var(--measure); }
.kst-section { padding-block: var(--section-pad); position: relative; }
.kst-section--tight { padding-block: clamp(3rem, 2rem + 3.4vw, 5rem); }
.kst-section--warm { background: var(--cream-warm); }
.kst-section--paper { background: var(--paper); }
.kst-section--navy, .kst-on-navy { background: var(--navy); color: var(--on-navy); }
.kst-section--paper + .kst-section--paper { border-top: 1px solid var(--line); }
.kst-section:not([class*="--"]) + .kst-section:not([class*="--"]) { border-top: 1px solid var(--line); }

.kst-stack > * + * { margin-top: 1.1em; }
.kst-stack-lg > * + * { margin-top: 1.6rem; }

.kst-grid { display: grid; gap: clamp(2rem, 1.2rem + 2.4vw, 3.75rem); }
@media (min-width: 900px) {
  .kst-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kst-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kst-grid--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .kst-grid--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .kst-grid--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .kst-grid--8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}
@media (min-width: 640px) and (max-width: 899px) {
  .kst-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Section heads: eyebrow, heading, then the introduction beneath it, at a reading measure. */
.kst-head { max-width: 46rem; margin-bottom: var(--head-gap); }
.kst-head > * + * { margin-top: 1.3rem; }
.kst-head > .kst-eyebrow + * , .kst-head > div > .kst-eyebrow + * { margin-top: 0; }
.kst-head--split { max-width: 46rem; }
.kst-head--center { margin-inline: auto; text-align: center; }
.kst-head--center .kst-eyebrow { justify-content: center; }
.kst-head--center .kst-intro { margin-inline: auto; }

.kst-rule { border: 0; height: 1px; background: var(--line); margin: 0; }
.kst-on-navy .kst-rule, .kst-section--navy .kst-rule { background: var(--line-navy); }

/* ---------- Buttons and links */
.kst-btn {
  --btn-bg: transparent; --btn-fg: currentColor; --btn-bd: currentColor;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.85rem;
  min-height: 3.25rem; padding: 0.95rem 1.6rem;
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd);
  border-radius: 0;
  font-family: var(--sans); font-size: 0.78125rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.kst-btn--sm { min-height: 2.75rem; padding: 0.6rem 1.1rem; font-size: 0.71875rem; letter-spacing: 0.17em; }
.kst-btn--gold { --btn-bg: var(--gold); --btn-fg: var(--navy); --btn-bd: var(--gold); }
.kst-btn--gold:hover { --btn-bg: var(--paper); --btn-bd: var(--paper); }
.kst-btn--ghost { --btn-bg: transparent; --btn-fg: var(--on-navy); --btn-bd: var(--gold-hair); }
.kst-btn--ghost:hover, .kst-btn--ghost[aria-current="page"] { --btn-bg: var(--gold); --btn-fg: var(--navy); --btn-bd: var(--gold); }
.kst-btn--navy { --btn-bg: var(--navy); --btn-fg: var(--paper); --btn-bd: var(--navy); }
.kst-btn--navy:hover { --btn-bg: var(--gold); --btn-fg: var(--navy); --btn-bd: var(--gold); }
.kst-btn--line { --btn-bg: transparent; --btn-fg: var(--navy); --btn-bd: var(--line-strong); }
.kst-btn--line:hover { --btn-bg: var(--navy); --btn-fg: var(--paper); --btn-bd: var(--navy); }
.kst-btn[disabled] { opacity: 0.6; cursor: progress; }
.kst-actions { display: flex; flex-wrap: wrap; gap: 0.9rem 1.1rem; align-items: center; }

.kst-arrow::after, .kst-btn--arrow::after {
  content: ""; flex: none; width: 1.15em; height: 0.7em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M0 6h20M15 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M0 6h20M15 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s var(--ease);
}
.kst-btn--arrow:hover::after, .kst-link:hover::after { transform: translateX(4px); }

.kst-link {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--sans); font-size: 0.78125rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  color: var(--navy); padding-block: 0.4rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.4s var(--ease);
}
.kst-link::after {
  content: ""; flex: none; width: 1.15em; height: 0.7em; background: var(--gold-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M0 6h20M15 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M0 6h20M15 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s var(--ease);
}
.kst-link:hover { background-size: 100% 1px; }
.kst-on-navy .kst-link, .kst-section--navy .kst-link, .kst-band .kst-link, .kst-hero .kst-link { color: var(--on-navy); }
.kst-on-navy .kst-link::after, .kst-section--navy .kst-link::after, .kst-band .kst-link::after, .kst-hero .kst-link::after { background: var(--gold); }

/* ---------- Reading progress: a gold line across the top of the screen that fills as the page is read
   (restored from the first edition, October 2026). Decorative, so hidden from assistive technology. */
.kst-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; pointer-events: none; }
.kst-progress__bar { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold) 60%); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }

/* ---------- Masthead */
.kst-masthead {
  position: sticky; top: 0; z-index: 60;
  background: var(--navy); color: var(--on-navy);
  transition: box-shadow 0.3s var(--ease);
}
.kst-masthead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(199, 163, 60, 0.45) 20%, rgba(199, 163, 60, 0.45) 80%, transparent);
}
.kst-masthead.is-scrolled { box-shadow: 0 10px 30px -18px rgba(31, 45, 75, 0.6); }
.kst-masthead__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

.kst-brand { display: inline-flex; align-items: center; gap: 0.9rem; text-decoration: none; color: var(--gold); min-width: 0; }
.kst-brand__mark { width: 2.15rem; height: 2.15rem; flex: none; color: var(--gold); }
.kst-brand__name {
  font-family: var(--serif); font-weight: 500; font-size: 1.36rem; line-height: 1;
  letter-spacing: 0.01em; color: var(--gold); white-space: nowrap;
}
@media (max-width: 62.4375em) {
  .kst-brand { gap: 0.7rem; }
  .kst-brand__name { white-space: normal; line-height: 1.05; }
  .kst-brand__name { font-size: 1.18rem; }
  .kst-brand__mark { width: 1.9rem; height: 1.9rem; }
}
@media (max-width: 359px) {
  .kst-masthead__inner { gap: 0.75rem; }
}
@media (max-width: 400px) {
  .kst-brand__name { font-size: 1.05rem; }
  .kst-brand__mark { width: 1.7rem; height: 1.7rem; }
  .kst-menu-btn, .kst-menu-link { gap: 0.55rem; letter-spacing: 0.14em; }
}

.kst-nav { display: none; align-items: center; gap: clamp(1.4rem, 2.4vw, 2.6rem); }
.kst-nav__list { display: flex; align-items: center; gap: clamp(1.15rem, 2.1vw, 2.2rem); list-style: none; margin: 0; padding: 0; }
.kst-nav__link {
  position: relative; display: inline-block; padding-block: 0.75rem;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--on-navy-2); text-decoration: none; transition: color 0.2s var(--ease);
}
.kst-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease);
}
.kst-nav__link:hover { color: var(--on-navy); }
.kst-nav__link:hover::after, .kst-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.kst-nav__link[aria-current="page"] { color: var(--on-navy); }
.kst-nav__link--title { font-family: var(--serif); font-style: italic; font-size: 1.15rem; letter-spacing: 0.01em; text-transform: none; font-weight: 500; }
@media (min-width: 62.5em) {
  .kst-nav { display: flex; }
  .kst-menu-btn, .kst-menu-link { display: none !important; }
}

.kst-menu-btn, .kst-menu-link {
  display: inline-flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; padding: 0.4rem 0 0.4rem 0.6rem;
  background: none; border: 0; color: var(--on-navy); cursor: pointer; text-decoration: none;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
}
.kst-menu-btn__icon { position: relative; width: 1.5rem; height: 0.7rem; }
.kst-menu-btn__icon::before, .kst-menu-btn__icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--gold);
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}
.kst-menu-btn__icon::before { top: 0; }
.kst-menu-btn__icon::after { top: calc(100% - 1.5px); }
.kst-menu-btn[aria-expanded="true"] .kst-menu-btn__icon::before { top: calc(50% - 0.75px); transform: rotate(45deg); }
.kst-menu-btn[aria-expanded="true"] .kst-menu-btn__icon::after { top: calc(50% - 0.75px); transform: rotate(-45deg); }

.kst-drawer {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 59;
  background: var(--navy); color: var(--on-navy);
  overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--line-navy);
}
.kst-drawer__inner { padding-block: 2rem 3rem; display: flex; flex-direction: column; gap: 2.2rem; min-height: 100%; }
.kst-drawer__group + .kst-drawer__group { margin-top: 2rem; }
.kst-drawer__label {
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.75rem;
}
.kst-drawer ul { list-style: none; margin: 0; padding: 0; }
.kst-drawer li a {
  display: block; padding-block: 0.5rem; text-decoration: none; color: var(--on-navy);
  font-family: var(--serif); font-size: clamp(1.5rem, 1.25rem + 1.2vw, 1.9rem); line-height: 1.2; font-weight: 500;
}
.kst-drawer li a[aria-current="page"] { color: var(--gold); font-style: italic; }
.kst-drawer__foot { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--line-navy); display: grid; gap: 1.25rem; }
.kst-drawer__note { font-size: var(--fs-small); color: var(--on-navy-2); }
.kst-drawer__note a { text-decoration-color: var(--gold); }
html.kst-drawer-open { overflow: hidden; }
@media (min-width: 62.5em) { .kst-drawer { display: none !important; } }

/* ---------- Heroes: navy on every page (canon), the words on the left, the painting on the right */
.kst-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy); color: var(--on-navy);
  padding-block: clamp(3.5rem, 2.3rem + 4.4vw, 6.75rem) clamp(3.75rem, 2.5rem + 4.2vw, 6.75rem);
}
.kst-hero__layout { position: relative; z-index: 2; display: grid; gap: clamp(2.75rem, 2rem + 2.5vw, 4rem); align-items: center; }
@media (min-width: 1000px) {
  .kst-hero__layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3.5rem, 6vw, 6.5rem); }
}
.kst-hero__copy { position: relative; z-index: 2; }
.kst-hero__copy > .kst-eyebrow { margin-bottom: 1.6rem; }
.kst-hero__copy > * + * { margin-top: 1.65rem; }
.kst-hero__copy > .kst-eyebrow + h1 { margin-top: 0; }
.kst-hero h1 { color: var(--on-navy); max-width: 15ch; }
.kst-hero h1.kst-wide { max-width: 19ch; }
.kst-hero .kst-actions { margin-top: 2.6rem; }
.kst-hero__copy > .kst-tags { margin-top: 2rem; }
.kst-crumb { font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--on-navy-3); }
.kst-crumb a { color: var(--on-navy-2); text-decoration: none; }
.kst-crumb a:hover { color: var(--gold); }

.kst-tags { display: flex; flex-wrap: wrap; gap: 0.6rem 0; list-style: none; padding: 0; margin: 0; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-navy-2); }
.kst-tags li { display: inline-flex; align-items: center; }
.kst-tags li + li::before { content: ""; width: 1.5rem; height: 1px; background: var(--gold-hair); margin-inline: 0.85rem; }
/* On a phone the tags wrap: a hairline must not begin a line, so they stand apart instead */
@media (max-width: 40em) { .kst-tags { gap: 0.6rem 1.75rem; } .kst-tags li + li::before { display: none; } }

/* The window: a square of the painting, with the square of the mark set just behind it.
   The offset frame and the small disc repeat the portrait treatment, so the device is one
   thing wherever it appears. Decorative: the figure is hidden from assistive technology. */
.kst-art { position: relative; z-index: 0; margin: 0; width: 100%; }
.kst-art__img, .kst-art picture { display: block; width: 100%; height: 100%; }
.kst-art img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--navy); }
/* The same part of the painting, mirrored, so no two pages share a window. On the img, not the picture,
   which carries the settle animation; the frame and disc are the figure's own and stay where they are. */
.kst-art--flip img { transform: scaleX(-1); }
@media (min-width: 1000px) {
  .kst-art { justify-self: end; width: min(100%, 28.5rem); aspect-ratio: 1; margin: 0 1.4rem 1.4rem 0; }
  .kst-art::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    transform: translate(1.4rem, 1.4rem); border: 1px solid var(--gold-hair);
  }
  .kst-art::after {
    content: ""; position: absolute; z-index: 1; width: 0.9rem; height: 0.9rem; border-radius: 50%;
    background: var(--gold); right: calc(-1.4rem - 0.45rem); top: 22%;
  }
}
@media (max-width: 999px) {
  .kst-art { aspect-ratio: 16 / 10; }
  .kst-art::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -0.75rem; height: 1px; background: var(--gold-hair);
  }
}

/* ---------- The home page: the painting whole, and the mark found in it */
.kst-hero--home { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.kst-hero--home h1 { font-size: var(--fs-d1); line-height: 1.02; max-width: 16ch; letter-spacing: -0.018em; }
@media (min-width: 1000px) { .kst-hero--home .kst-hero__copy { max-width: min(42rem, 48vw); } }
.kst-hero--home .kst-lede { max-width: 34rem; font-size: clamp(1.22rem, 1.1rem + 0.45vw, 1.45rem); }
.kst-paint { position: relative; margin: 0; }
.kst-paint__img { display: block; }
.kst-paint__img img { display: block; width: 100%; height: 100%; }
.kst-paint__square { position: absolute; display: block; pointer-events: none; }
.kst-paint__square svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kst-paint__square rect { fill: none; stroke: var(--gold); stroke-width: 0.34; }
.kst-paint__cap {
  display: flex; gap: 0.85rem; align-items: baseline; white-space: nowrap;
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.2rem; line-height: 1.3; color: var(--on-navy-2);
}
.kst-paint__cap::before { content: ""; flex: none; width: 2rem; height: 1px; background: var(--gold); transform: translateY(-0.32em); }

@media (min-width: 1000px) {
  .kst-hero--home { display: flex; align-items: center; min-height: min(calc(100svh - var(--header-h)), 52rem); }
  .kst-hero--home > .kst-container { width: 100%; }
  /* The painting is placed against the hero itself, full bleed, not against the text column. */
  .kst-hero--home .kst-hero__layout { position: static; }
  .kst-paint { position: absolute; z-index: 0; right: 0; top: 50%; height: min(100%, 50vw); aspect-ratio: 2912 / 1632; transform: translateY(-50%); }
  .kst-paint__img { position: absolute; inset: 0; }
  .kst-paint__img img { object-fit: fill; }
  /* Fade the painting out to navy under the words: transparent until the middle of the viewport,
     whole from about three fifths across, and soft at the top and bottom edges. */
  .kst-paint__img {
    -webkit-mask-image: linear-gradient(90deg, transparent calc(100% - 52vw), rgba(0, 0, 0, 0.6) calc(100% - 41vw), #000 calc(100% - 33vw)), linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent calc(100% - 52vw), rgba(0, 0, 0, 0.6) calc(100% - 41vw), #000 calc(100% - 33vw)), linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-composite: intersect;
  }
  /* The square of the mark, drawn round the gold disc that sits where the mark's own disc sits:
     x 1688, y 261, side 913 in the 2912 by 1632 painting. */
  .kst-paint__square { left: 57.967%; top: 15.993%; width: 31.353%; aspect-ratio: 1; }
  .kst-paint__cap { display: none; }
}
@media (max-width: 999px) {
  .kst-paint { width: 100%; max-width: 30rem; aspect-ratio: 1; margin-top: 0.5rem; }
  .kst-paint__img { position: absolute; inset: 0; }
  .kst-paint__img img { object-fit: cover; }
  .kst-paint__square { inset: 0; }
  .kst-paint__cap { position: absolute; top: calc(100% + 1rem); left: 0; white-space: normal; }
  .kst-hero--home .kst-hero__layout { padding-bottom: 2.75rem; }
}

.kst-trustline { display: flex; flex-wrap: wrap; gap: 0.6rem 1.7rem; margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line-navy); list-style: none; padding-left: 0; font-size: var(--fs-xs); letter-spacing: 0.05em; color: var(--on-navy-2); max-width: 38rem; }
.kst-trustline li { display: inline-flex; align-items: center; gap: 0.6rem; }
.kst-trustline li::before { content: ""; flex: none; width: 5px; height: 5px; background: var(--gold); }

/* At a glance: the facts a pastoral lead looks for first, in a strip under the hero */
.kst-glance { background: var(--paper); border-bottom: 1px solid var(--line); }
.kst-glance__list { display: grid; margin: 0; }
.kst-glance__list > div { padding-block: 1.35rem; border-bottom: 1px solid var(--line); display: grid; gap: 0.35rem; align-content: start; }
.kst-glance__list > div:last-child { border-bottom: 0; }
.kst-glance dt { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); }
.kst-glance dd { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.2rem; line-height: 1.32; color: var(--ink); }
@media (min-width: 700px) {
  .kst-glance__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
  .kst-glance__list > div:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (min-width: 1100px) {
  .kst-glance__list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .kst-glance__list > div { padding: 1.9rem 2rem 2rem; border-bottom: 0; border-left: 1px solid var(--line); }
  .kst-glance__list > div:first-child { padding-left: 0; border-left: 0; }
}

/* Hero aside: a small ledger of facts */
.kst-ledger { border-top: 1px solid var(--gold-hair); }
.kst-ledger div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--line-navy); }
.kst-ledger dt { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); padding-top: 0.25rem; }
.kst-ledger dd { margin: 0; font-size: var(--fs-small); color: var(--on-navy-2); line-height: 1.55; }
.kst-section .kst-ledger, .kst-ledger--light { border-top-color: var(--gold-deep); }
.kst-section:not(.kst-section--navy) .kst-ledger div { border-bottom-color: var(--line); }
.kst-section:not(.kst-section--navy) .kst-ledger dt { color: var(--gold-deep); }
.kst-section:not(.kst-section--navy) .kst-ledger dd { color: var(--ink-2); }

/* ---------- Doors: the two ways in. The school door is navy, so the order of the practice reads at a glance. */
.kst-doors { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .kst-doors { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.kst-door {
  position: relative; display: flex; flex-direction: column; gap: 1.3rem;
  padding: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  background: var(--paper); border: 1px solid var(--line);
}
.kst-door.kst-on-navy { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.kst-door::before { content: ""; position: absolute; top: -1px; left: -1px; width: 3.5rem; height: 2px; background: var(--gold); }
.kst-door__num { font-family: var(--sans); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-deep); }
.kst-on-navy .kst-door__num { color: var(--gold); }
.kst-door h3 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem); line-height: 1.1; font-weight: 500; letter-spacing: -0.012em; }
.kst-door p { color: var(--ink-2); max-width: 34rem; }
.kst-on-navy.kst-door p { color: var(--on-navy-2); }
.kst-door .kst-link { margin-top: auto; align-self: flex-start; }

/* ---------- Lines list: items separated by hairlines */
.kst-lines { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.kst-lines > li { padding-block: 0.9rem; border-bottom: 1px solid var(--line); display: flex; gap: 1rem; align-items: baseline; }
.kst-lines > li::before { content: ""; flex: none; width: 0.45rem; height: 0.45rem; background: var(--gold); transform: translateY(-0.14em); }
.kst-on-navy .kst-lines, .kst-on-navy .kst-lines > li, .kst-section--navy .kst-lines, .kst-section--navy .kst-lines > li { border-color: var(--line-navy); }
.kst-lines--plain > li::before { display: none; }

/* A short list under a paragraph: the house’s small square at each item, as in the lines list */
.kst-dash { list-style: none; padding: 0; margin: 0; }
.kst-dash > li { position: relative; padding-left: 1.35rem; }
.kst-dash > li + li { margin-top: 0.6rem; }
.kst-dash > li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 0.4rem; height: 0.4rem; background: var(--gold); }

/* ---------- Steps: a line, and the KST mark at each stop (the square and its disc, where the logo has
   them), the number in the serif's italic. The first stop, and a stop under the pointer, shows the mark
   inverted: the square filled with gold, the disc cut out of it. */
.kst-steps { --ground: var(--cream); list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.kst-section--warm .kst-steps { --ground: var(--cream-warm); }
.kst-section--paper .kst-steps { --ground: var(--paper); }
.kst-step { --sq: 1.25rem; --sq-x: calc(var(--sq) / -2); --sq-y: 0.22rem; position: relative; padding: 0 0 2.4rem 2.85rem; border-left: 1px solid var(--line-strong); }
.kst-step:last-child { padding-bottom: 0; border-left-color: transparent; }
.kst-step:first-child:not(:last-child) { border-image: linear-gradient(transparent calc(var(--sq-y) + var(--sq) / 2), var(--line-strong) 0) 1; }
.kst-step::before, .kst-step::after { content: ""; position: absolute; transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease); }
.kst-step::before { left: var(--sq-x); top: var(--sq-y); width: var(--sq); height: var(--sq); background: var(--ground); border: 1px solid var(--gold-deep); }
/* The disc: centred 73% across and 29% down the square, a quarter of its width, as in the mark */
.kst-step::after { left: calc(var(--sq-x) + var(--sq) * 0.596); top: calc(var(--sq-y) + var(--sq) * 0.162); width: calc(var(--sq) * 0.26); height: calc(var(--sq) * 0.26); border-radius: 50%; background: var(--gold-deep); }
.kst-step:first-child::before { background: var(--gold); border-color: var(--gold); }
.kst-step:first-child::after { background: var(--ground); }
@media (hover: hover) {
  .kst-step:hover::before { background: var(--gold); border-color: var(--gold); }
  .kst-step:hover::after { background: var(--ground); }
  /* One mark lit at a time: while another stop is under the pointer, the first returns to its outline */
  .kst-steps:hover .kst-step:first-child:not(:hover)::before { background: var(--ground); border-color: var(--gold-deep); }
  .kst-steps:hover .kst-step:first-child:not(:hover)::after { background: var(--gold-deep); }
}
.kst-step__num { display: block; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.3rem; line-height: 1.1; color: var(--gold-deep); margin-bottom: 0.5rem; }
.kst-step h3, .kst-step h4 { font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.005em; line-height: 1.4; margin-bottom: 0.45rem; }
.kst-step p { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.68; max-width: 46rem; }
@media (min-width: 1000px) {
  .kst-steps--row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2.25rem; border-top: 1px solid var(--line-strong); }
  .kst-steps--row .kst-step { --sq-x: 0px; --sq-y: calc(var(--sq) / -2); border-left: 0; padding: 2.4rem 0 0 0; }
}

/* ---------- Facts: figures set large enough to be read across a room */
.kst-facts { display: grid; gap: 2.25rem 2.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
@media (min-width: 1000px) { .kst-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kst-fact { padding-top: 1.4rem; border-top: 1px solid var(--gold-hair); }
.kst-fact__figure { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(2.9rem, 2rem + 3.2vw, 4.75rem); line-height: 0.95; color: var(--gold); letter-spacing: -0.02em; }
.kst-fact__label { display: block; margin-top: 0.95rem; font-size: var(--fs-small); color: var(--on-navy-2); line-height: 1.5; max-width: 17rem; }
.kst-section:not(.kst-section--navy) .kst-fact { border-top-color: var(--line-strong); }
.kst-section:not(.kst-section--navy) .kst-fact__figure { color: var(--navy); }
.kst-section:not(.kst-section--navy) .kst-fact__label { color: var(--ink-2); }
.kst-facts--stack { grid-template-columns: 1fr !important; gap: 1.75rem; }

/* ---------- Quotes: a large opening mark in gold, the words in the serif's italic */
.kst-quote { position: relative; margin: 0; }
.kst-stack > .kst-quote, .kst-stack-lg > .kst-quote { margin-top: 2.4rem; }
.kst-quote blockquote { margin: 0; }
.kst-quote blockquote::before {
  content: "\201C"; display: block; height: 0.5em; margin-bottom: 0.1em;
  font-family: var(--serif); font-style: normal; font-weight: 500; font-size: clamp(4.25rem, 3.4rem + 2.6vw, 6rem); line-height: 0.9;
  color: var(--gold-deep);
}
.kst-on-navy .kst-quote blockquote::before, .kst-section--navy .kst-quote blockquote::before, .kst-band .kst-quote blockquote::before { color: var(--gold); }
.kst-quote blockquote p {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem); line-height: 1.32; letter-spacing: -0.006em; color: var(--ink);
}
.kst-on-navy .kst-quote blockquote p, .kst-section--navy .kst-quote blockquote p { color: var(--on-navy); }
.kst-quote figcaption { margin-top: 1.6rem; display: flex; gap: 0.9rem; align-items: center; font-family: var(--sans); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); line-height: 1.5; }
.kst-quote figcaption::before { content: ""; flex: none; width: 2rem; height: 1px; background: currentColor; }
.kst-on-navy .kst-quote figcaption, .kst-section--navy .kst-quote figcaption { color: var(--gold); }

.kst-quote--feature blockquote::before { font-size: clamp(5.5rem, 4rem + 4vw, 8.5rem); }
.kst-quote--feature blockquote p { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.85rem); line-height: 1.22; letter-spacing: -0.012em; max-width: 46rem; }
.kst-quote--sm blockquote::before { font-size: 3.6rem; }
.kst-quote--sm blockquote p { font-size: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem); line-height: 1.36; }

.kst-quotes { display: grid; gap: clamp(2.75rem, 2rem + 2.5vw, 4.25rem); }
@media (min-width: 900px) {
  .kst-quotes--2 { grid-template-columns: 1fr 1fr; }
  .kst-quotes--lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}

/* A set of short quotes, each on its own card */
.kst-cards > .kst-quote { background: var(--paper); border: 1px solid var(--line); padding: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); display: flex; flex-direction: column; }
.kst-cards > .kst-quote figcaption { margin-top: auto; padding-top: 1.4rem; }
.kst-section--paper .kst-cards > .kst-quote { background: var(--cream); }
.kst-section--navy .kst-cards > .kst-quote, .kst-on-navy .kst-cards > .kst-quote { background: rgba(255, 254, 251, 0.04); border-color: var(--line-navy); }

/* ---------- Portrait: the photograph, the square set behind it, the disc */
.kst-portrait { position: relative; margin: 0; max-width: 25rem; align-self: start; }
.kst-portrait::before {
  content: ""; position: absolute; inset: 0 0 auto 0; aspect-ratio: 4 / 5; transform: translate(1.25rem, 1.25rem);
  border: 1px solid var(--gold-deep); z-index: 0;
}
.kst-portrait::after {
  content: ""; position: absolute; z-index: 2; width: 0.9rem; height: 0.9rem; border-radius: 50%;
  background: var(--gold); right: calc(-1.25rem - 0.45rem); top: 4rem;
}
.kst-portrait picture, .kst-portrait img { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--cream-warm); }
.kst-portrait figcaption { position: relative; z-index: 1; margin-top: 2.1rem; font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--ink-2); }
@media (max-width: 479px) { .kst-portrait { max-width: calc(100% - 1.75rem); } }
.kst-on-navy .kst-portrait::before, .kst-section--navy .kst-portrait::before { border-color: var(--gold-hair); }
.kst-on-navy .kst-portrait figcaption, .kst-section--navy .kst-portrait figcaption { color: var(--on-navy-2); }

.kst-signature { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.6rem; line-height: 1.2; }
/* The registration line is information a parent relies on: ink on light grounds (8:1 or better), gold on navy. */
.kst-credentials { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); line-height: 1.8; overflow-wrap: break-word; }
.kst-on-navy .kst-credentials, .kst-section--navy .kst-credentials { color: var(--gold); }

/* ---------- The team */
.kst-team { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 3.5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem); }
/* Two therapists side by side only where each text column stays readable (from about 15rem); below that, one per row */
@media (min-width: 62.5em) { .kst-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kst-person { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); gap: 1.75rem; align-items: start; }
@media (max-width: 37.4375em) { .kst-person { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); gap: 1.2rem; } }
/* The narrowest phones: the photograph above the words, so a long registration line keeps the full width */
@media (max-width: 22.4375em) { .kst-person { grid-template-columns: minmax(0, 1fr); } .kst-person__photo { max-width: 7rem; } }
.kst-person__photo { position: relative; margin: 0 0.7rem 0.7rem 0; }
.kst-person__photo::before { content: ""; position: absolute; inset: 0; transform: translate(0.7rem, 0.7rem); border: 1px solid var(--gold-deep); }
.kst-person__photo img, .kst-person__photo picture { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.kst-person__body { max-width: 34rem; }
.kst-person__body > * + * { margin-top: 0.85rem; }
.kst-person h3 { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.85rem); font-weight: 500; letter-spacing: -0.01em; }
.kst-person .kst-credentials { margin-top: 0.4rem; }
.kst-person p { font-size: var(--fs-small); line-height: 1.7; color: var(--ink-2); }
/* A therapist whose photograph is still to come: her initials, set in the square, in the house's own hand */
.kst-monogram { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--navy); color: var(--gold); font-family: var(--serif); font-weight: 500; font-size: 2.9rem; letter-spacing: 0.04em; }
.kst-monogram::after { content: ""; position: absolute; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--gold); right: 22%; top: 18%; }

.kst-join { display: grid; gap: 1.25rem 3rem; align-items: center; }
@media (min-width: 900px) { .kst-join { grid-template-columns: minmax(0, 1fr) auto; } .kst-join > * + * { margin-top: 0; } }
.kst-join p { color: var(--ink-2); max-width: 46rem; }
.kst-join > div > * + * { margin-top: 0.75rem; }

/* The mark itself, drawn at size where the page explains it (About) */
.kst-figure-mark { position: relative; width: 100%; max-width: 24rem; margin: 0; }
.kst-figure-mark svg { width: 100%; height: auto; overflow: visible; }
.kst-figure-mark rect { fill: none; stroke: var(--gold-deep); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.kst-figure-mark circle { fill: var(--gold); }
.kst-figure-mark figcaption { margin-top: 1.6rem; display: flex; gap: 0.9rem; align-items: baseline; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.2rem; line-height: 1.4; color: var(--ink-2); }
.kst-figure-mark figcaption::before { content: ""; flex: none; width: 2rem; height: 1px; background: var(--gold-deep); transform: translateY(-0.3em); }
@media (max-width: 899px) { .kst-figure-mark { max-width: 18rem; } }

/* ---------- Cards: an object on the page, a short gold rule at the head */
.kst-cards { display: grid; gap: clamp(1.25rem, 0.9rem + 1.2vw, 2rem); }
@media (min-width: 700px) { .kst-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px) and (max-width: 1099px) { .kst-cards--3, .kst-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .kst-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kst-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kst-card {
  position: relative; display: flex; flex-direction: column; gap: 0.9rem;
  background: var(--paper); border: 1px solid var(--line);
  padding: clamp(1.65rem, 1.3rem + 1.1vw, 2.35rem);
}
.kst-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 2.75rem; height: 2px; background: var(--gold); }
.kst-section--paper .kst-card { background: var(--cream); }
.kst-card__kicker { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); line-height: 1.5; }
.kst-card .kst-card__kicker { color: var(--gold-deep); font-size: var(--fs-eyebrow); }
.kst-card h3 { font-size: clamp(1.4rem, 1.25rem + 0.45vw, 1.65rem); line-height: 1.18; font-weight: 600; }
.kst-card p { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.7; }
.kst-card .kst-link { margin-top: auto; align-self: flex-start; padding-top: 0.7rem; }
.kst-card .kst-dash > li { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2); }
.kst-on-navy .kst-card .kst-dash > li, .kst-section--navy .kst-card .kst-dash > li { color: var(--on-navy-2); }
.kst-card--link { text-decoration: none; transition: border-color 0.3s var(--ease), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
.kst-card--link::before { transition: width 0.45s var(--ease-out); }
.kst-card--link:hover { border-color: var(--line-strong); box-shadow: 0 22px 40px -32px rgba(31, 45, 75, 0.55); }
.kst-card--link:hover::before { width: 100%; }
.kst-card--link:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--gold-deep); }
@media (prefers-reduced-motion: no-preference) { .kst-card--link:hover { transform: translateY(-3px); } }
.kst-on-navy .kst-card, .kst-section--navy .kst-card { background: rgba(255, 254, 251, 0.04); border-color: var(--line-navy); }
.kst-on-navy .kst-card p, .kst-section--navy .kst-card p { color: var(--on-navy-2); }
.kst-on-navy .kst-card__kicker, .kst-section--navy .kst-card__kicker,
.kst-on-navy .kst-card .kst-card__kicker, .kst-section--navy .kst-card .kst-card__kicker { color: var(--gold); }

/* Situation tiles */
.kst-tiles { display: grid; gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); }
@media (min-width: 700px) { .kst-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .kst-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kst-tile { position: relative; background: var(--paper); padding: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); display: flex; flex-direction: column; gap: 0.95rem; text-decoration: none; min-height: 15rem; transition: background-color 0.3s var(--ease); }
.kst-tile::before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 2px; background: var(--gold); transition: width 0.45s var(--ease-out); }
.kst-tile:hover { background: var(--cream); }
.kst-tile:hover::before { width: 100%; }
.kst-tile__q { font-family: var(--serif); font-size: clamp(1.4rem, 1.25rem + 0.55vw, 1.7rem); line-height: 1.18; font-weight: 500; }
.kst-tile p { color: var(--ink-2); font-size: var(--fs-small); }
.kst-tile .kst-link { margin-top: auto; }
/* A tile that is not itself a link: the same object, without the hover that says "press me" */
.kst-tile--static { min-height: 0; }
.kst-tile--static:hover { background: var(--paper); }
.kst-tile--static:hover::before { width: 0; }
.kst-tile--static .kst-link { align-self: flex-start; }
/* Titles from the library, set as a short list in the serif's italic */
.kst-titles { list-style: none; margin: 0.2rem 0 0.4rem; padding: 0; display: grid; gap: 0.45rem; }
.kst-titles li { position: relative; padding-left: 1rem; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.12rem; line-height: 1.3; color: var(--ink); }
.kst-titles li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 0.45rem; height: 1px; background: var(--gold-deep); }

/* ---------- Panels */
.kst-panel { position: relative; background: var(--paper); border: 1px solid var(--line); padding: clamp(1.8rem, 1.3rem + 2vw, 3rem); }
.kst-grid > .kst-panel { align-self: start; }
.kst-section--paper .kst-panel { background: var(--cream); }
.kst-panel--navy, .kst-section--paper .kst-panel--navy, .kst-section--warm .kst-panel--navy { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.kst-panel--navy .kst-eyebrow, .kst-panel--navy .kst-card__kicker { color: var(--gold); }
.kst-panel--navy .kst-note { color: var(--on-navy-2); }
.kst-panel--navy p a, .kst-panel--navy li a { text-decoration-color: var(--gold); }
.kst-panel--navy .kst-link { color: var(--on-navy); }
.kst-panel--navy .kst-link::after { background: var(--gold); }
.kst-panel > * + * { margin-top: 1rem; }
.kst-panel__title { font-family: var(--serif); font-size: clamp(1.55rem, 1.3rem + 0.75vw, 1.95rem); line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; }

.kst-model { display: flex; flex-direction: column; gap: 1.1rem; }
/* Cards set side by side whose parts line up across the row: badge with badge, heading with heading,
   paragraph with paragraph, list with list. --rows is the number of parts in each card. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    .kst-cards--align > * { display: grid; grid-template-rows: subgrid; grid-row: span var(--rows, 4); row-gap: 1.1rem; align-content: start; }
  }
}
/* The card's own gap spaces its parts (flex on phones, the subgrid's rows from 700px), so no margins on top */
.kst-cards--align > * > * { margin-top: 0; }
.kst-model__badge { align-self: flex-start; justify-self: start; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--navy); background: var(--cream-warm); border: 1px solid var(--line); padding: 0.45rem 0.75rem; }
.kst-panel--navy .kst-model__badge { background: transparent; color: var(--gold); border-color: var(--gold-hair); }

/* ---------- Services: each kind of support with its essentials set beside its name, and its opening
   sentence set as a standfirst in the serif, so a long passage has a way in. */
.kst-services { border-top: 1px solid var(--line-strong); }
.kst-service { display: grid; gap: 1.2rem 2.75rem; padding-block: clamp(1.9rem, 1.5rem + 1.3vw, 2.75rem); border-bottom: 1px solid var(--line); }
@media (min-width: 800px) {
  .kst-service { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  /* The name and its essentials stay in view while the longer passage is read */
  .kst-service__head { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }
}
.kst-service__head h3 { font-family: var(--serif); font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.85rem); line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; }
.kst-service__facts { list-style: none; margin: 1.15rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.kst-service__facts li { display: flex; align-items: baseline; gap: 0.75rem; font-size: var(--fs-small); font-weight: 600; line-height: 1.45; color: var(--ink); }
.kst-service__facts li::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; background: var(--gold); transform: translateY(-0.12em); }
.kst-service__body { max-width: 40rem; color: var(--ink-2); }
.kst-service__body > * + * { margin-top: 0.95rem; }
.kst-service__lead { font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 1.16rem + 0.5vw, 1.55rem); line-height: 1.36; letter-spacing: -0.004em; color: var(--ink); }
.kst-service__body > .kst-service__lead + * { margin-top: 1.15rem; }
.kst-service__body > .kst-dash { margin-top: 1.35rem; }

/* Governance list */
.kst-standards-list { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.kst-standards-list > div { display: grid; gap: 0.6rem 2.75rem; padding-block: 1.7rem; border-bottom: 1px solid var(--line); }
@media (min-width: 800px) { .kst-standards-list > div { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.kst-standards-list dt { font-family: var(--serif); font-size: clamp(1.4rem, 1.25rem + 0.5vw, 1.7rem); line-height: 1.2; font-weight: 500; letter-spacing: -0.008em; }
.kst-standards-list dd { margin: 0; color: var(--ink-2); max-width: 40rem; }
@media (min-width: 800px) {
  /* The label stays in view while the longer entries are read */
  .kst-standards-list dt { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }
}
.kst-standards-list dd > * + * { margin-top: 0.6rem; }

/* ---------- Screens: the KST Portal as people see it, with made-up records. A desk view, and a phone
   laid over its corner. The navy edge of the phone is the brand's, not a drawing of a handset. */
.kst-screens { margin: 0; }
.kst-screens__stage { position: relative; padding-bottom: clamp(3rem, 1rem + 8vw, 7.5rem); }
.kst-screen { margin: 0; overflow: hidden; border-radius: 10px; background: var(--paper); box-shadow: 0 0 0 1px var(--line-strong), 0 30px 70px -36px rgba(31, 45, 75, 0.5); }
.kst-screen picture, .kst-screen img { display: block; width: 100%; height: auto; }
.kst-screen--desk { width: 88%; }
.kst-screens > .kst-screen--desk { width: 100%; }
.kst-screen--phone { border-radius: 26px; border: 7px solid var(--navy); box-shadow: 0 0 0 1px var(--gold-hair), 0 34px 70px -30px rgba(31, 45, 75, 0.6); }
.kst-screens__stage .kst-screen--phone { position: absolute; right: 0; bottom: 0; width: clamp(9.5rem, 27%, 18rem); }
.kst-screens figcaption { margin-top: 1.4rem; max-width: 42rem; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2); }
@media (max-width: 699px) {
  .kst-screens__stage { padding-bottom: 0; }
  .kst-screen--desk { width: 100%; }
  .kst-screens__stage .kst-screen--phone { position: relative; right: auto; bottom: auto; width: 56%; margin: -16% 0 0 auto; border-width: 5px; border-radius: 20px; }
}

/* ---------- FAQ */
.kst-faq { border-top: 1px solid var(--line-strong); }
.kst-faq details { border-bottom: 1px solid var(--line); }
.kst-faq summary {
  list-style: none; cursor: pointer; display: flex; gap: 1.5rem; align-items: baseline; justify-content: space-between;
  padding-block: 1.4rem; font-family: var(--serif); font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem); font-weight: 500; line-height: 1.3;
  transition: color 0.2s var(--ease);
}
.kst-faq summary::-webkit-details-marker { display: none; }
.kst-faq summary::after {
  content: ""; flex: none; width: 0.85rem; height: 0.85rem; transform: translateY(0.05em);
  background: linear-gradient(var(--gold-deep), var(--gold-deep)) center / 100% 1px no-repeat, linear-gradient(var(--gold-deep), var(--gold-deep)) center / 1px 100% no-repeat;
  transition: transform 0.3s var(--ease);
}
.kst-faq details[open] summary::after { transform: rotate(45deg); }
.kst-faq summary:hover { color: var(--gold-deep); }
.kst-faq__body { padding: 0 0 1.7rem; max-width: 46rem; color: var(--ink-2); }
.kst-faq__body > * + * { margin-top: 0.9rem; }

/* ---------- Crisis block (standing furniture), folded like The Parent Book's.
   Closed, it still says the one thing that cannot wait: in immediate danger, call 999.
   Open, the canonical helplines from signposts.json, in their order. */
.kst-crisis { background: var(--paper); border: 1px solid var(--line-strong); border-top: 2px solid var(--navy); }
.kst-crisis__summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1.5rem; align-items: center;
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem) clamp(1.4rem, 1rem + 1.5vw, 2.4rem);
}
.kst-crisis__summary::-webkit-details-marker { display: none; }
.kst-crisis__label { grid-column: 1; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); line-height: 1.4; }
.kst-crisis__title { grid-column: 1; font-family: var(--serif); font-size: clamp(1.3rem, 1.15rem + 0.55vw, 1.6rem); font-weight: 500; line-height: 1.28; letter-spacing: -0.006em; }
.kst-crisis__title strong { font-weight: 700; }
.kst-crisis__cue { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 0.75rem; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); white-space: nowrap; }
.kst-crisis__cue::after {
  content: ""; flex: none; width: 2.1rem; height: 2.1rem; border: 1px solid var(--line-strong);
  background: linear-gradient(var(--navy), var(--navy)) center / 0.75rem 1px no-repeat, linear-gradient(var(--navy), var(--navy)) center / 1px 0.75rem no-repeat;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.kst-crisis[open] .kst-crisis__cue::after { transform: rotate(45deg); }
.kst-crisis__summary:hover .kst-crisis__cue::after { background-color: var(--cream-warm); }
.kst-crisis__cue-close { display: none; }
.kst-crisis[open] .kst-crisis__cue-open { display: none; }
.kst-crisis[open] .kst-crisis__cue-close { display: inline; }
.kst-crisis__summary:focus-visible { outline-offset: -4px; }
@media (max-width: 599px) {
  .kst-crisis__summary { grid-template-columns: minmax(0, 1fr); }
  .kst-crisis__cue { grid-column: 1; grid-row: auto; margin-top: 0.4rem; }
}
.kst-crisis__panel { padding: 1.4rem clamp(1.4rem, 1rem + 1.5vw, 2.4rem) clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); border-top: 1px solid var(--line); }
.kst-crisis__heading { font-family: var(--serif); font-weight: 500; font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem); line-height: 1.25; letter-spacing: -0.004em; margin: 0 0 1rem; }
/* One tier to a row, in the library's order: what the reader is facing on the left, who to call on the right. */
.kst-crisis__tiers { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.kst-crisis__tier { display: grid; gap: 0.4rem 2.25rem; padding-block: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.kst-crisis__tier p { margin: 0; }
.kst-crisis__tier-label { font-size: var(--fs-small); font-weight: 600; line-height: 1.45; color: var(--ink); }
.kst-crisis__detail { display: grid; gap: 0.3rem; max-width: 40rem; }
.kst-crisis__line { font-size: var(--fs-small); line-height: 1.55; color: var(--ink); }
.kst-crisis__line strong { font-weight: 700; }
.kst-crisis__meta { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2); }
.kst-crisis__tier a { color: var(--ink); font-weight: 600; text-decoration-color: var(--gold-deep); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.kst-crisis__tier a:hover { text-decoration-thickness: 2px; }
.kst-crisis__line a[href^="tel:"] { display: inline-block; padding-block: 0.3rem; }
@media (min-width: 760px) {
  .kst-crisis__tier { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); align-items: baseline; }
}

/* ---------- Bands: the closing invitation, with the painting showing faintly at the right */
.kst-band { background: var(--navy); color: var(--on-navy); position: relative; overflow: hidden; isolation: isolate; }
.kst-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/assets/site/art/band-900.webp") 100% 50% / cover no-repeat;
  background-image: image-set(url("/assets/site/art/band-900.avif") type("image/avif"), url("/assets/site/art/band-900.webp") type("image/webp"));
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(90deg, transparent 45%, #000 95%);
          mask-image: linear-gradient(90deg, transparent 45%, #000 95%);
}
.kst-band__inner { position: relative; z-index: 1; display: grid; gap: 2.75rem; align-items: end; }
@media (min-width: 1000px) { .kst-band__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; } }
.kst-band h2 { color: var(--on-navy); max-width: 16ch; font-size: clamp(2.2rem, 1.55rem + 2.2vw, 3.6rem); }
.kst-band .kst-intro { color: var(--on-navy-2); max-width: 36rem; }
.kst-routes { display: grid; gap: 0; border-top: 1px solid var(--gold-hair); }
.kst-routes a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.25rem; border-bottom: 1px solid var(--line-navy); text-decoration: none; color: var(--on-navy); font-family: var(--serif); font-weight: 500; font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.65rem); line-height: 1.2; transition: color 0.25s var(--ease), padding 0.35s var(--ease-out); }
.kst-routes a span:first-child { display: flex; flex-direction: column; gap: 0.3rem; }
.kst-routes small { font-family: var(--sans); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.06em; color: var(--on-navy-2); }
.kst-routes a::after { content: ""; flex: none; width: 1.4rem; height: 0.8rem; background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M0 6h20M15 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M0 6h20M15 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s var(--ease); }
.kst-routes a:hover { color: var(--gold); }
.kst-routes a:hover::after { transform: translateX(5px); }
@media (prefers-reduced-motion: no-preference) { .kst-routes a:hover { padding-left: 0.5rem; } }

/* ---------- Film: The Parent Book's own film and player (assets/site/film/film.js, as on theparentbook.com),
   drawn here in the KST navy and gold. Nothing plays until it is pressed. */
.kst-film { margin: 0; }
.kst-film-layout { align-items: start; }
@media (min-width: 900px) and (min-height: 800px) { .kst-film-layout > :last-child { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.tpb-film { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); border: 1px solid var(--line); box-shadow: 0 34px 60px -42px rgba(31, 45, 75, 0.7); }
.tpb-film-v { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--navy); }
.tpb-film-v::cue { background: rgba(31, 45, 75, 0.92); }
.tpb-film-play { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 1rem; margin: 0; padding: 2.4rem 1.6rem 1.35rem; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--paper);
  background: linear-gradient(to top, rgba(31, 45, 75, 0.92), rgba(31, 45, 75, 0.86) 55%, rgba(31, 45, 75, 0.5) 85%, rgba(31, 45, 75, 0)); }
.tpb-film-play[hidden] { display: none; }
.tpb-film-dot { flex: none; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--gold); box-shadow: 0 8px 20px -8px rgba(31, 45, 75, 0.55); transition: transform 0.25s var(--ease), background-color 0.25s var(--ease); }
.tpb-film-dot svg { width: 1.4rem; height: 1.4rem; fill: var(--navy); margin-left: 3px; }
.tpb-film-lbl { font-family: var(--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(31, 45, 75, 0.55); }
.tpb-film-dur { margin-left: 0.65rem; font-family: var(--serif); font-size: 1.12rem; font-style: italic; font-weight: 500; letter-spacing: 0; text-transform: none; }
.tpb-film-play:hover .tpb-film-dot, .tpb-film-play:focus-visible .tpb-film-dot { transform: scale(1.06); background: var(--paper); }
.tpb-film-play:focus-visible { outline: 2px solid var(--gold); outline-offset: -5px; }
.tpb-film-v:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@supports selector(:has(a)) {
  .tpb-film-v:focus-visible { outline: none; }
  .tpb-film:has(.tpb-film-v:focus-visible) { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
  .tpb-film-play:focus-visible { outline: none; }
  .tpb-film:has(.tpb-film-play:focus-visible) { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
}
.tpb-film-cap { margin: 1.1rem 0 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.1rem; line-height: 1.45; color: var(--ink-2); text-wrap: balance; }
.tpb-film-alt { display: block; margin-top: 0.5rem; }
.tpb-film-cap .tpb-film-ad, .tpb-film-words > summary {
  display: inline-block; padding: 0.55rem 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.1rem; line-height: 1.4;
  color: var(--ink); text-decoration: none; cursor: pointer;
  background: linear-gradient(var(--gold-deep), var(--gold-deep)) left calc(100% - 0.45rem) / 100% 1px no-repeat;
}
.tpb-film-cap .tpb-film-ad:hover, .tpb-film-words > summary:hover { background-size: 100% 2px; }
.tpb-film-words { margin-top: 0.9rem; max-width: 44rem; }
.tpb-film-words > summary { list-style: none; }
.tpb-film-words > summary::-webkit-details-marker { display: none; }
.tpb-film-words > summary::after { content: " \2193"; content: " \2193" / ""; font-style: normal; }
.tpb-film-words[open] > summary::after { content: " \2191"; content: " \2191" / ""; }
.tpb-film-words-body { margin: 1.1rem 0 0.25rem; padding-left: 1.25rem; border-left: 1px solid var(--line-strong); }
.tpb-fw-shows { margin: 0 0 0.4rem; font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); }
.tpb-fw-says { margin: 0 0 1.1rem; font-family: var(--serif); font-weight: 500; font-size: 1.15rem; line-height: 1.55; color: var(--ink); }
.tpb-film-words-body > :last-child { margin-bottom: 0; }
.tpb-fw-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 560px) {
  .tpb-film-play { padding: 1.7rem 1rem 0.85rem; gap: 0.7rem; }
  .tpb-film-dot { width: 2.75rem; height: 2.75rem; }
  .tpb-film-dot svg { width: 1.1rem; height: 1.1rem; }
}

/* ---------- Standards strip and footer */
.kst-standards { background: var(--paper); border-top: 1px solid var(--line); }
.kst-standards__inner { display: grid; gap: 1.75rem; align-items: center; padding-block: 2.4rem; }
@media (min-width: 1100px) { .kst-standards__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 4rem; } }
.kst-standards__text { font-size: var(--fs-small); color: var(--ink-2); max-width: 46rem; line-height: 1.65; }
/* Each therapist's registration on its own line: the name, then the body and number */
.kst-standards__register { list-style: none; margin: 1.15rem 0 0; padding: 1.05rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.55rem; max-width: 46rem; }
.kst-standards__register li { display: grid; gap: 0.1rem 1.5rem; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); }
@media (min-width: 600px) { .kst-standards__register li { grid-template-columns: 13.5rem minmax(0, 1fr); } }
.kst-standards__name { font-weight: 600; color: var(--ink); }
.kst-standards__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; }
.kst-standards__badges a { display: block; }
.kst-standards__badges img { height: 3.4rem; width: auto; }
.kst-standards__badges a:first-child img { height: 3.1rem; }
@media (forced-colors: active) { .kst-standards__badges img { forced-color-adjust: none; background: var(--paper); padding: 0.25rem; } }

.kst-footer { background: var(--navy); color: var(--on-navy-2); position: relative; }
.kst-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(199, 163, 60, 0.45) 20%, rgba(199, 163, 60, 0.45) 80%, transparent); }
.kst-footer__top { display: grid; gap: 1.75rem; padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.25rem) 2.75rem; border-bottom: 1px solid var(--line-navy); }
@media (min-width: 900px) { .kst-footer__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; } }
.kst-footer__top .kst-brand__mark { width: 2.6rem; height: 2.6rem; }
.kst-footer__top .kst-brand__name { font-size: 1.55rem; }
.kst-footer__strap { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.8rem); line-height: 1.3; color: var(--on-navy); max-width: 30rem; }
.kst-footer__nav { display: grid; gap: 2.25rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 2.9rem; border-bottom: 1px solid var(--line-navy); }
@media (min-width: 900px) { .kst-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kst-footer__heading { font-family: var(--sans); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.05rem; line-height: 1.4; }
.kst-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.kst-footer__nav a, .kst-footer__nav button { font-size: var(--fs-small); color: var(--on-navy-2); text-decoration: none; line-height: 1.45; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.kst-footer__nav a:hover, .kst-footer__nav button:hover { color: var(--on-navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.22em; }
.kst-footer__urgent { padding-block: 1.6rem; border-bottom: 1px solid var(--line-navy); font-size: var(--fs-small); color: var(--on-navy-2); }
.kst-footer__urgent strong { color: var(--on-navy); }
.kst-footer__urgent a { color: var(--on-navy); text-decoration-color: var(--gold); }
.kst-footer__legal { padding-block: 1.75rem 2.6rem; display: grid; gap: 0.5rem; font-size: var(--fs-xs); letter-spacing: 0.02em; color: var(--on-navy-3); line-height: 1.7; }
.kst-footer__legal a { color: var(--on-navy-2); text-decoration-color: var(--gold-hair); }
.kst-footer__legal em { font-family: var(--serif); font-size: 1.05em; }
/* ---------- Forms */
.kst-form { display: grid; gap: 1.35rem; }
.kst-form__field { display: grid; gap: 0.5rem; }
.kst-form__label, .kst-fieldset legend { font-size: var(--fs-small); font-weight: 600; color: var(--ink); letter-spacing: 0.005em; }
.kst-form__hint { font-size: var(--fs-xs); color: var(--ink-3); margin-top: -0.2rem; }
.kst-form__input {
  width: 100%; background: var(--paper); border: 1px solid rgba(31, 45, 75, 0.6); border-radius: 0;
  padding: 0.9rem 1rem; font-size: 1rem; line-height: 1.5; color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.kst-form__input:hover { border-color: var(--navy); }
/* Focus keeps the site-wide gold ring (it survives forced colours); the border darkens with it. */
.kst-form__input:focus { border-color: var(--navy); }
.kst-form__optional { font-weight: 400; color: var(--ink-2); }
.cf-turnstile { min-height: 65px; }
.kst-form__textarea { min-height: 9rem; resize: vertical; }
.kst-form__row { display: grid; gap: 1.35rem; }
@media (min-width: 700px) { .kst-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kst-form__select {
  -webkit-appearance: none; appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231F2D4B' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 0.75rem auto;
}
.kst-req { color: var(--gold-deep); font-weight: 600; }
.kst-form__input.kst-form__input--invalid { border-color: #a23b2a; }
.kst-form__field-error { font-size: var(--fs-xs); color: #8f2f20; font-weight: 600; margin-top: 0.15rem; }
.kst-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.kst-choices { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.kst-choice { position: relative; }
.kst-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kst-choice span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.55rem 1rem; border: 1px solid rgba(31, 45, 75, 0.58); background: var(--paper); font-size: var(--fs-small); font-weight: 500; line-height: 1.3; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease); }
.kst-choice input:hover + span { border-color: var(--navy); }
.kst-choice input:checked + span { background: var(--navy); color: var(--paper); border-color: var(--navy); }
@media (forced-colors: active) { .kst-choice input:checked + span { outline: 3px solid Highlight; outline-offset: -3px; } }
.kst-choice input:focus-visible + span { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.kst-form__consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; align-items: start; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.55; }
.kst-form__consent input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--navy); }
.kst-form__consent .kst-form__field-error { grid-column: 1 / -1; }
.kst-form__honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.kst-form__submit { justify-self: start; }
.kst-form__status { font-size: var(--fs-small); line-height: 1.6; min-height: 1.6em; }
.kst-form__status[data-state="success"] { color: var(--ink); font-weight: 600; padding: 1rem 1.15rem; background: var(--cream-warm); border-left: 2px solid var(--gold); }
.kst-form__status[data-state="error"] { color: #8f2f20; font-weight: 600; }
.kst-form__status[data-state="sending"] { color: var(--ink-3); }
.kst-form__note { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6; }

/* ---------- Consent notice */
/* Written into every page and shown before first paint when no choice has been made (html.kst-ask, set
   by the inline script in the head), so it never moves the page after it has drawn. */
.kst-consent { display: none; }
html.kst-ask .kst-consent { display: block; }
html.kst-drawer-open .kst-consent { z-index: 50; }
.kst-consent {
  position: fixed; z-index: 80; left: 1rem; right: 1rem; bottom: 1rem; max-width: 27rem;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong);
  box-shadow: 0 18px 40px -20px rgba(31, 45, 75, 0.45); padding: 1.35rem 1.4rem 1.25rem;
}
@media (min-width: 640px) { .kst-consent { left: 1.5rem; bottom: 1.5rem; right: auto; } }
/* On a short screen (a phone on its side, or a laptop zoomed in) the card would cover the page: it sits
   in the flow at the top instead. On a narrow phone it stays in the corner but never takes over. */
@media (max-width: 480px) { .kst-consent { max-height: 45vh; overflow-y: auto; } }
@media (max-height: 600px) { .kst-consent { position: static; max-width: none; max-height: none; box-shadow: none; border-width: 0 0 1px; } }
.kst-consent p { font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-2); }
.kst-consent p strong { display: block; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; color: var(--ink); margin-bottom: 0.35rem; line-height: 1.25; }
.kst-consent__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.kst-consent__actions .kst-btn { flex: 1 1 auto; }
.kst-consent-prefs { position: fixed; inset: 0; z-index: 90; background: rgba(31, 45, 75, 0.55); display: grid; place-items: center; padding: 1rem; }
.kst-consent-prefs__panel { background: var(--paper); max-width: 34rem; width: 100%; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-top: 2px solid var(--navy); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow: auto; }
.kst-consent-prefs__panel h2 { font-size: 1.9rem; margin-bottom: 0.75rem; }
.kst-consent-prefs__panel > p { font-size: var(--fs-small); color: var(--ink-2); }
.kst-consent-prefs__row { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.kst-consent-prefs__text { display: block; }
.kst-consent-prefs__row:first-of-type { border-top: 1px solid var(--line); margin-top: 1.2rem; }
.kst-consent-prefs__row strong { display: block; font-size: var(--fs-small); }
.kst-consent-prefs__text > span { display: block; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.55; margin-top: 0.2rem; }
.kst-consent-prefs__row input { width: 1.35rem; height: 1.35rem; accent-color: var(--navy); flex: none; margin-top: 0.15rem; }
.kst-consent-prefs__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }

/* ---------- Topic and reading pages */
.kst-prose { max-width: var(--measure); }
.kst-prose > * + * { margin-top: 1.15em; }
.kst-prose h2 { font-size: clamp(1.8rem, 1.45rem + 1.4vw, 2.5rem); margin-top: 2.2em; }
.kst-prose h3 { margin-top: 1.9em; }
.kst-prose ul, .kst-prose ol { padding-left: 1.25rem; }
.kst-prose li + li { margin-top: 0.45em; }
.kst-prose blockquote { border-left: 1px solid var(--gold-deep); padding-left: 1.4rem; font-family: var(--serif); font-size: 1.35rem; font-style: italic; color: var(--ink-2); line-height: 1.45; }

.kst-signs { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.kst-signs > div { padding-block: 1.6rem; border-bottom: 1px solid var(--line); display: grid; gap: 0.5rem 3rem; }
@media (min-width: 800px) { .kst-signs > div { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.kst-signs h3 { font-size: 1.5rem; }
.kst-signs p { color: var(--ink-2); }

.kst-topics-nav { padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); border-top: 1px solid var(--line); }
.kst-topics { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.kst-topics a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 1rem; border: 1px solid var(--line-strong); font-size: var(--fs-small); font-weight: 500; color: var(--ink); text-decoration: none; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease); }
.kst-topics a:hover { border-color: var(--gold-deep); background: var(--paper); }

/* Further reading from The Parent Book (markup injected by /assets/tpb-feed.js) */
.kst-feed { padding-block: var(--section-pad); background: var(--paper); border-top: 1px solid var(--line); }
.kst-feed:empty { display: none; }
.kst-feed .tpb-feed__inner { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.kst-feed .tpb-feed__eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 1.1rem; }
.kst-feed .tpb-feed__eyebrow em { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); margin-left: 0.2rem; }
.kst-feed .tpb-feed__heading { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.15; color: var(--ink); margin: 0 0 2.4rem; max-width: 26ch; }
.kst-feed .tpb-feed__grid { display: grid; gap: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); }
@media (min-width: 760px) { .kst-feed .tpb-feed__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kst-feed .tpb-feed__card { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; transition: border-color 0.3s var(--ease); }
.kst-feed .tpb-feed__card:hover { border-top-color: var(--gold-deep); }
.kst-feed .tpb-feed__card:hover .tpb-feed__card-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--gold-deep); }
.kst-feed .tpb-feed__card-tier { display: none; } /* the section eyebrow already names the source */
.kst-feed .tpb-feed__card-title { font-family: var(--serif); font-weight: 500; font-size: 1.55rem; line-height: 1.16; margin: 0; }
.kst-feed .tpb-feed__card-dek { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.65; margin: 0; }
.kst-feed .tpb-feed__card-meta { margin: auto 0 0; padding-top: 0.4rem; font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--ink-3); }
.kst-feed .tpb-feed__foot, .kst-feed .tpb-feed__fallback { margin: 2.4rem 0 0; font-size: var(--fs-small); }
.kst-feed .tpb-feed__foot a, .kst-feed .tpb-feed__fallback a { color: var(--ink); font-weight: 600; text-decoration-color: var(--gold-deep); text-underline-offset: 0.25em; }

/* ---------- Policy documents (policy text untouched; styling only) */
.kst-page-hero { position: relative; overflow: hidden; background: var(--navy); color: var(--on-navy); padding-block: clamp(4rem, 3rem + 4vw, 6.5rem) clamp(3.5rem, 2.5rem + 3vw, 5rem); }
.kst-page-hero__bg { display: none; }
.kst-page-hero__inner { position: relative; z-index: 1; max-width: 46rem; }
.kst-page-hero__eyebrow { display: inline-flex; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.4rem; }
.kst-page-hero__heading { font-family: var(--serif); font-weight: 500; font-size: var(--fs-d2); line-height: 1.04; color: var(--on-navy); letter-spacing: -0.01em; }
.kst-page-hero__heading em { font-style: italic; color: var(--gold); }
.kst-page-hero__sub { margin-top: 1.5rem; font-family: var(--serif); font-weight: 500; font-size: var(--fs-lede); line-height: 1.42; color: var(--on-navy-2); max-width: 36rem; }
.kst-policy-wrap { padding-block: var(--section-pad); background: var(--paper); }
.kst-inner--narrow { max-width: 46rem; margin-inline: 0; }
.kst-reveal { opacity: 1; transform: none; }
.kst-policy__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); margin-bottom: 2rem; }
.kst-policy__meta-cell { padding: 1rem 1.25rem 1rem 0; }
.kst-policy__meta-label { display: block; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 0.3rem; }
.kst-policy__meta-value { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.kst-policy__controlled { font-size: var(--fs-xs); font-style: italic; color: var(--ink-3); margin-bottom: 2.5rem; }
.kst-policy__preface, .kst-policy__emergency { background: var(--cream-warm); border-left: 2px solid var(--gold-deep); padding: 1.4rem 1.6rem; margin-bottom: 2.5rem; }
.kst-policy__preface > * + *, .kst-policy__emergency > * + * { margin-top: 0.7rem; }
.kst-policy__preface-title, .kst-policy__emergency-title { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; color: var(--ink); }
.kst-policy__preface p, .kst-policy__emergency p { color: var(--ink-2); }
.kst-policy-toc { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line-strong); margin-bottom: 3.5rem; }
@media (min-width: 700px) { .kst-policy-toc { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.kst-policy-toc__item { display: flex; gap: 0.9rem; align-items: baseline; padding-block: 0.7rem; border-bottom: 1px solid var(--line); text-decoration: none; }
.kst-policy-toc__item:hover .kst-policy-toc__label { text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: 0.2em; }
.kst-policy-toc__num { font-size: var(--fs-xs); font-weight: 600; color: var(--gold-deep); min-width: 1.75rem; letter-spacing: 0.06em; }
.kst-policy-toc__label { font-size: var(--fs-small); color: var(--ink); line-height: 1.45; }
.kst-policy__body { color: var(--ink-2); }
.kst-policy__body h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 1.35rem + 1vw, 2.15rem); color: var(--ink); margin: 3.25rem 0 1rem; line-height: 1.15; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.kst-policy__body h2:first-child { margin-top: 0; }
.kst-policy__body h3 { font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; color: var(--ink); margin: 2rem 0 0.6rem; line-height: 1.4; letter-spacing: 0.005em; }
.kst-policy__body p, .kst-policy__body li { font-size: var(--fs-body); line-height: 1.72; }
.kst-policy__body p + p, .kst-policy__body p + ul, .kst-policy__body ul + p, .kst-policy__body p + ol, .kst-policy__body ol + p { margin-top: 0.9rem; }
.kst-policy__body ul, .kst-policy__body ol { padding-left: 1.3rem; margin-top: 0.6rem; }
.kst-policy__body li + li { margin-top: 0.35rem; }
.kst-policy__body strong { color: var(--ink); }
.kst-policy__body code { font-size: 0.9em; background: var(--cream-warm); padding: 0.05em 0.35em; }
.kst-policy__numbered { counter-reset: none; }
.kst-policy__table-wrap { overflow-x: auto; margin: 1.25rem 0 1.5rem; border: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
.kst-policy__table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); line-height: 1.55; min-width: 34rem; }
.kst-policy__table th { text-align: left; background: var(--cream-warm); color: var(--ink); font-weight: 600; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line-strong); vertical-align: bottom; }
.kst-policy__table td { padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.kst-risk--low, .kst-risk--medium, .kst-risk--high { font-weight: 600; white-space: nowrap; }
.kst-risk--low { color: #2f6b4c; }
.kst-risk--medium { color: var(--gold-deep); }
.kst-risk--high { color: #8f2f20; }
.kst-policy__info-block, .kst-policy__maturity { border: 1px solid var(--line); margin: 1.5rem 0; background: var(--cream); }
.kst-policy__info-header, .kst-policy__maturity-header { padding: 0.85rem 1.1rem; font-weight: 600; color: var(--ink); background: var(--cream-warm); border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.kst-policy__info-row, .kst-policy__maturity-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1rem; padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.kst-policy__info-row:last-child, .kst-policy__maturity-row:last-child { border-bottom: 0; }
.kst-policy__info-label, .kst-policy__maturity-label { font-weight: 600; color: var(--ink); }
.kst-policy__info-value { color: var(--ink-2); }
.kst-policy__end { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line-strong); display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.kst-policy__copyright { font-size: var(--fs-xs); color: var(--ink-3); }
.kst-policy__download, .kst-policy__top-link { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); text-decoration: none; border: 1px solid var(--line-strong); padding: 0.65rem 1rem; background: transparent; }
.kst-policy__download:hover, .kst-policy__top-link:hover { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.kst-policy__download svg, .kst-policy__top-link svg { width: 1rem; height: 1rem; }


/* ---------- Utilities */
.kst-center { text-align: center; }
.kst-mt-0 { margin-top: 0 !important; }
.kst-mt-1 { margin-top: 1rem; }
.kst-mt-2 { margin-top: 2rem; }
.kst-mt-3 { margin-top: 3rem; }
.kst-mt-4 { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.kst-nowrap { white-space: nowrap; }
.kst-divider-gold { width: 3rem; height: 1px; background: var(--gold-deep); border: 0; margin: 0; }
.kst-note { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.6; }
.kst-on-navy .kst-note, .kst-section--navy .kst-note, .kst-band .kst-note { color: var(--on-navy-2); }
/* A note that must not be missed (a safeguarding boundary): the body size, at a reading measure */
.kst-note.kst-note--lead { font-size: var(--fs-small); line-height: 1.65; max-width: 46rem; }

/* ---------- Motion. Quiet, and only for those who have not asked their device for less. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms); }
  html.js [data-reveal]:not(.is-in) { animation: kst-safety 0.01s linear 4s forwards; }
  html.js [data-reveal].is-in { opacity: 1; transform: none; }
  @keyframes kst-safety { to { opacity: 1; transform: none; } }

  /* Hero: the words arrive in order, then the painting settles and the square is drawn. */
  html.js .kst-hero__copy > * { animation: kst-rise 1.1s var(--ease-out) both; }
  html.js .kst-hero__copy > :nth-child(2) { animation-delay: 0.08s; }
  html.js .kst-hero__copy > :nth-child(3) { animation-delay: 0.16s; }
  html.js .kst-hero__copy > :nth-child(4) { animation-delay: 0.24s; }
  html.js .kst-hero__copy > :nth-child(n+5) { animation-delay: 0.32s; }
  /* Starts a hair above zero so the browser counts the words as painted from the first frame (LCP). */
  @keyframes kst-rise { from { opacity: 0.01; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  html.js .kst-art picture, html.js .kst-paint__img { animation: kst-settle 2.2s var(--ease-out) 0.1s both; }
  html.js .kst-art::before { animation: kst-fade 1.2s var(--ease) 0.9s both; }
  html.js .kst-art::after { animation: kst-disc 0.9s var(--ease-out) 1.5s both; }
  @keyframes kst-settle { from { opacity: 0; transform: scale(1.045); } to { opacity: 1; transform: none; } }
  @keyframes kst-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes kst-disc { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }

  html.js .kst-paint__square rect { stroke-dasharray: 1; stroke-dashoffset: 1; animation: kst-draw 2s var(--ease) 0.9s forwards; }
  html.js .kst-paint__cap { animation: kst-fade 1.2s var(--ease) 2.4s both; }
  @keyframes kst-draw { to { stroke-dashoffset: 0; } }

  /* Steps: as the path comes into view, the disc settles into each square in turn */
  html.js [data-reveal].is-in .kst-step::after { animation: kst-disc 0.7s var(--ease-out) both; animation-delay: calc(0.45s + var(--n, 0) * 0.13s); }
  .kst-step:nth-child(2) { --n: 1; } .kst-step:nth-child(3) { --n: 2; } .kst-step:nth-child(4) { --n: 3; }
  .kst-step:nth-child(5) { --n: 4; } .kst-step:nth-child(6) { --n: 5; } .kst-step:nth-child(7) { --n: 6; }

  /* Between pages, a short cross-fade (browsers that support it) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; animation-timing-function: var(--ease); }
}
/* For anyone who has asked their device for less motion: no transitions on hover or focus either. */
@media (prefers-reduced-motion: reduce) {
  .kst-progress { display: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ---------- Print: the page, without the site furniture (policies also load assets/kst/kst-print.css) */
@media print {
  /* Text that is pale on navy on screen prints in navy; gold prints as gold-deep. */
  :root { --on-navy: var(--ink); --on-navy-2: var(--ink); --on-navy-3: var(--ink); --gold: var(--gold-deep); --line-navy: var(--line-strong); }
  body { background: var(--paper) !important; color: var(--ink); }
  /* The footer keeps its urgent line, the registration statement and the legal line on paper. */
  .kst-footer, .kst-standards { background: var(--paper) !important; color: var(--ink) !important; }
  /* Navy and gold fills: printed or not, the words stay readable. */
  .kst-panel--navy, .kst-monogram { background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; }
  .kst-btn { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
  .kst-choice input:checked + span { background: none; color: var(--ink); border-color: var(--ink); font-weight: 700; }
  .kst-progress, .kst-masthead, .kst-drawer, .kst-skip, .kst-footer__top, .kst-footer__nav, .kst-consent, .kst-consent-prefs,
  .kst-art, .kst-paint, .kst-band, .kst-feed, .kst-topics-nav, .tpb-film-play, .kst-crisis__cue { display: none !important; }
  .kst-hero, .kst-page-hero, .kst-section--navy, .kst-on-navy { background: var(--paper) !important; color: var(--ink) !important; }
  .kst-hero h1, .kst-hero .kst-lede, .kst-page-hero__heading, .kst-page-hero__sub { color: var(--ink) !important; }
  .kst-container { max-width: none !important; padding-inline: 0 !important; }
  .kst-policy-wrap, .kst-section { padding-block: 0 1.5rem !important; background: none !important; }
  [data-reveal], .kst-hero__copy > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .kst-crisis::details-content { content-visibility: visible; display: block; }
  a { color: inherit !important; }
}