/* ============================================================
   Kid Link Occupational Therapy — Colors & Type
   Single source of truth for tokens. Import this in any page:
   <link rel="stylesheet" href="/colors_and_type.css">
   ============================================================ */

/* ---------- Fonts (local — do NOT load Google CDN) -------- */
/* Fraunces — user-supplied variable font (supports all weights/opsz). */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf") format("truetype-variations");
}
/* Poppins — heading font (latin subset, self-hosted). */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/poppins-700.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/instrument-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/instrument-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/instrument-sans-700.woff2") format("woff2");
}

:root {
  /* ---------- Base palettes ---------- */
  --kl-white:               #ffffff;
  --kl-neutral-lightest:    #f2f2f2;
  --kl-neutral-lighter:     #dadada;
  --kl-neutral-light:       #b5b6b5;
  --kl-neutral:             #858585;
  --kl-neutral-dark:        #545454;
  --kl-neutral-darker:      #232423;
  --kl-neutral-darkest:     #0b0c0b;   /* near-black, used for body text */

  --kl-plum-lightest:       #f3e9f3;   /* signature soft pink-lilac */
  --kl-plum-lighter:        #e8d3e8;
  --kl-plum-light:          #b167af;
  --kl-plum:                #90268e;   /* primary brand accent */
  --kl-plum-dark:           #731e71;
  --kl-plum-darker:         #390f38;
  --kl-plum-darkest:        #2b0b2a;

  --kl-sun-lightest:        #fef7e7;
  --kl-sun-lighter:         #feefd0;
  --kl-sun-light:           #fcc75b;
  --kl-sun:                 #fcaf15;   /* warm yellow accent */
  --kl-sun-dark:            #946708;   /* darkened from #c98c10 to meet WCAG AA as text (≥4.5:1 on all used backgrounds) */
  --kl-sun-darker:          #644608;
  --kl-sun-darkest:         #4b3406;

  --kl-gray-nurse-lightest: #fbfcfb;
  --kl-gray-nurse-lighter:  #f8faf8;
  --kl-gray-nurse-light:    #e8efe8;
  --kl-gray-nurse:          #dfe9df;   /* sage neutral */
  --kl-gray-nurse-dark:     #b2bab2;
  --kl-gray-nurse-darker:   #595d59;
  --kl-gray-nurse-darkest:  #424542;

  /* Leaf — sampled from the kidlink wordmark. The brand's third primary,
     used alongside Plum (#90268E) and Sun (#FCAF15). Bright and playful. */
  --kl-leaf-lightest:       #eef7e3;
  --kl-leaf-lighter:        #d6eeb6;
  --kl-leaf-light:          #a8d56e;
  --kl-leaf:                #76c043;   /* brand green — matches kid-link-website */
  --kl-leaf-dark:           #58b848;   /* logo highlight green */
  --kl-leaf-darker:         #2f7a22;
  --kl-leaf-darkest:        #1e4f15;

  /* ---------- Warm surface palette (matches kidlink.net.au tones) ---------- */
  --kl-surface:  #fbfaf8;   /* warm off-white — page body */
  --kl-soft:     #f4f1f5;   /* lilac soft */
  --kl-cream:    #fff8e5;   /* warm cream */
  --kl-taupe:    #f0ece9;   /* warm taupe — atmospheric */
  --kl-ink:      #33243a;   /* warm dark-plum body text */
  --kl-muted:    #7a6f82;   /* muted plum-gray — secondary copy */

  /* ---------- Alpha overlays (used in button shadows) ---------- */
  --kl-ink-5:   color-mix(in srgb, var(--kl-neutral-darkest), transparent 95%);
  --kl-ink-10:  color-mix(in srgb, var(--kl-neutral-darkest), transparent 90%);
  --kl-ink-15:  color-mix(in srgb, var(--kl-neutral-darkest), transparent 85%);
  --kl-ink-20:  color-mix(in srgb, var(--kl-neutral-darkest), transparent 80%);
  --kl-ink-50:  color-mix(in srgb, var(--kl-neutral-darkest), transparent 50%);

  --kl-paper-5:  color-mix(in srgb, var(--kl-white), transparent 95%);
  --kl-paper-10: color-mix(in srgb, var(--kl-white), transparent 90%);
  --kl-paper-20: color-mix(in srgb, var(--kl-white), transparent 80%);

  /* ---------- Semantic foreground/background tokens ---------- */
  --kl-fg-1:    var(--kl-ink);             /* primary text — warm dark plum */
  --kl-fg-2:    var(--kl-muted);           /* secondary text */
  --kl-fg-3:    #6b6570;                   /* tertiary / captions — darkened to meet WCAG AA (≈5.4:1) */
  --kl-bg-1:    var(--kl-surface);         /* page body — warm off-white */
  --kl-bg-2:    var(--kl-soft);            /* lilac soft */
  --kl-bg-3:    var(--kl-cream);           /* cream */
  --kl-border:  var(--kl-ink-15);
  --kl-accent:  var(--kl-plum);
  --kl-accent-hover: var(--kl-plum-dark);

  /* ---------- Typography families ---------- */
  --kl-font-display: "Poppins", system-ui, -apple-system, sans-serif;
  --kl-font-body:    "Instrument Sans", "Inter", system-ui, -apple-system, sans-serif;
  --kl-font-script:  "Fraunces", "Snell Roundhand", "Apple Chancery", cursive;
  /* NOTE: the actual wordmark is a custom hand-script.
     Use the SVG logo for the mark — never re-set it in a typeface. */

  --kl-weight-body: 400;
  --kl-weight-emphasis: 560; /* Fraunces variable — matches kidlink.net.au */
  --kl-weight-strong: 600;

  /* ---------- Type scale (fluid, matches kidlink.net.au clamps) ---------- */
  --kl-text-h1: clamp(2.6rem, 4.7vw, 4.4rem);   /* 41.6 → 70.4 */
  --kl-text-h2: clamp(1.95rem, 3.1vw, 2.95rem); /* 31.2 → 47.2 */
  --kl-text-h3: clamp(1.65rem, 2.4vw, 2.4rem);  /* 26.4 → 38.4 */
  --kl-text-h4: clamp(1.4rem, 1.9vw, 1.95rem);  /* 22.4 → 31.2 */
  --kl-text-h5: clamp(1.2rem, 1.5vw, 1.55rem);  /* 19.2 → 24.8 */
  --kl-text-h6: 1.25rem;       /* 20 */
  --kl-text-large:   1.375rem; /* 22 */
  --kl-text-medium:  1.125rem; /* 18 */
  --kl-text-regular: 1rem;     /* 16 */
  --kl-text-small:   0.875rem; /* 14 */
  --kl-text-tiny:    0.75rem;  /* 12 */

  --kl-lh-tight: 1.08;         /* Fraunces display lh on reference */
  --kl-lh-snug:  1.25;
  --kl-lh-base:  1.6;
  --kl-tracking-display: -0.025em;
  --kl-tracking-heading: -0.018em;

  --kl-measure: 65ch;          /* comfortable line-length for body prose */

  /* ---------- Radii ---------- */
  --kl-radius-button: 0.75rem;  /* 12px — buttons / form inputs */
  --kl-radius-badge:  0.75rem;  /* pills inherit */
  --kl-radius-form:   0.75rem;
  --kl-radius-card:   1.125rem; /* 18px — soft rounded cards (matches kid-link-website) */
  --kl-radius-card-lg: 1.75rem; /* 28px — larger surfaces */
  --kl-radius-image:  1.125rem; /* 18px — media corners */
  --kl-radius-checkbox: 0.25rem;

  /* ---------- Card surface treatment (soft gradient + hairline + lift) ---------- */
  --kl-card-bg:       linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 241, 245, 0.78));
  --kl-card-bg-cream: linear-gradient(135deg, rgba(255, 249, 232, 0.96), rgba(255, 255, 255, 0.98));
  --kl-card-bg-sage:  linear-gradient(135deg, rgba(231, 239, 229, 0.78), rgba(255, 255, 255, 0.98));
  --kl-card-border:   1px solid rgba(107, 28, 105, 0.09);
  --kl-card-shadow:   0 18px 48px rgba(107, 28, 105, 0.08);

  /* ---------- Spacing primitives ---------- */
  --kl-space-1: 0.25rem;
  --kl-space-2: 0.5rem;
  --kl-space-3: 0.75rem;
  --kl-space-4: 1rem;
  --kl-space-5: 1.25rem;
  --kl-space-6: 1.5rem;
  --kl-space-8: 2rem;
  --kl-space-12: 3rem;
  --kl-space-16: 4rem;
  --kl-space-18: 4.5rem;
  --kl-space-24: 6rem;
  --kl-space-28: 7rem;
  --kl-space-30: 7.5rem;

  --kl-section-px: 5%;        /* horizontal padding for every section */
  --kl-section-py: 7rem;      /* desktop vertical padding */
  --kl-container: 80rem;      /* max content width */

  /* ---------- Button shadows (plum-tinted drops — matches kidlink.net.au) ---------- */
  --kl-shadow-btn:       0 10px 28px rgba(144, 38, 142, 0.28);
  --kl-shadow-btn-hover: 0 16px 36px rgba(144, 38, 142, 0.34);
  --kl-shadow-btn-alt:       0 8px 22px rgba(107, 28, 105, 0.10);
  --kl-shadow-btn-alt-hover: 0 14px 30px rgba(107, 28, 105, 0.16);

  /* ---------- Motion ---------- */
  --kl-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --kl-duration: 200ms;
}

/* ============================================================
   Semantic typography rules
   ============================================================ */
html, body {
  font-family: var(--kl-font-body);
  font-weight: var(--kl-weight-body);
  color: var(--kl-fg-1);
  background: var(--kl-bg-1);
  font-size: 16px;
  line-height: var(--kl-lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.kl-display {
  font-family: var(--kl-font-display);
  font-weight: 700;
  font-optical-sizing: auto;
  font-variation-settings: normal;
  letter-spacing: var(--kl-tracking-heading);
  line-height: var(--kl-lh-tight);
  color: var(--kl-fg-1);
  margin: 0;
}

h1, .kl-h1 {
  font-size: var(--kl-text-h1);
  font-weight: 700;
  letter-spacing: var(--kl-tracking-display);
  line-height: 1.02;
}
h2, .kl-h2 {
  font-size: var(--kl-text-h2);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.06;
}
h3, .kl-h3 { font-size: var(--kl-text-h3); }
h4, .kl-h4 { font-size: var(--kl-text-h4); line-height: var(--kl-lh-snug); }
h5, .kl-h5 { font-size: var(--kl-text-h5); line-height: 1.4; }
h6, .kl-h6 { font-size: var(--kl-text-h6); line-height: 1.4; }

.kl-eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  color: var(--kl-plum);
  font-family: var(--kl-font-body);
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.kl-eyebrow--on-photo { color: var(--kl-sun-light); }

/* Pathway-strip layout — heading + pill grid, stacks on mobile */
.kl-pathway-card { grid-template-columns: auto auto; }
.kl-pathway-pills { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 767px) {
  .kl-pathway-card { grid-template-columns: 1fr; gap: 16px !important; }
  .kl-pathway-pills { grid-template-columns: repeat(2, 1fr); }
}

/* Pathway-strip pills (overlapping "Choose your pathway" card) */
.kl-pathway-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 3px 14px;
  border: 1px solid rgba(107, 28, 105, 0.08);
  border-radius: 12px;
  background: var(--kl-white);
  color: var(--kl-ink);
  font-family: var(--kl-font-body);
  font-size: 0.9rem;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.kl-pathway-pill:hover,
.kl-pathway-pill:focus-visible {
  background: var(--kl-leaf);
  color: var(--kl-white);
  border-color: transparent;
}

.kl-large    { font-size: var(--kl-text-large);   line-height: var(--kl-lh-base); }
.kl-medium   { font-size: var(--kl-text-medium);  line-height: var(--kl-lh-base); }
.kl-regular  { font-size: var(--kl-text-regular); line-height: var(--kl-lh-base); }
.kl-small    { font-size: var(--kl-text-small);   line-height: var(--kl-lh-base); }
.kl-tiny     { font-size: var(--kl-text-tiny);    line-height: var(--kl-lh-base); }

p { margin: 0; }

a { color: inherit; text-decoration: none; }
a.kl-link { text-decoration: underline; text-underline-offset: 0.2em; }

/* ============================================================
   Color schemes — sections wrap content in one of these classes.
   Schemes set background + recompute --kl-scheme-* tokens.
   ============================================================ */
.scheme-1 {
  --kl-scheme-bg:        var(--kl-soft);
  --kl-scheme-fg-on-bg:  var(--kl-ink);
  --kl-scheme-card-bg:   var(--kl-white);
  --kl-scheme-border:    var(--kl-ink-15);
  --kl-scheme-btn-text:  var(--kl-white);
  background:
    radial-gradient(120% 90% at 88% -5%, rgba(144, 38, 142, 0.07), transparent 45%),
    radial-gradient(90% 80% at -8% 102%, rgba(252, 175, 21, 0.09), transparent 50%),
    var(--kl-scheme-bg);
  color: var(--kl-scheme-fg-on-bg);
}
.scheme-2 {
  --kl-scheme-bg:        var(--kl-surface);
  --kl-scheme-fg-on-bg:  var(--kl-ink);
  --kl-scheme-card-bg:   var(--kl-white);
  --kl-scheme-border:    var(--kl-ink-15);
  --kl-scheme-btn-text:  var(--kl-white);
  background:
    radial-gradient(70% 60% at 12% 0%, rgba(252, 175, 21, 0.05), transparent 55%),
    var(--kl-scheme-bg);
  color: var(--kl-scheme-fg-on-bg);
}
.scheme-3 {
  --kl-scheme-bg:        var(--kl-soft);   /* soft lilac — matches kid-link-website (was cream) */
  --kl-scheme-fg-on-bg:  var(--kl-ink);
  --kl-scheme-card-bg:   var(--kl-white);
  --kl-scheme-border:    var(--kl-ink-15);
  --kl-scheme-btn-text:  var(--kl-white);
  background:
    radial-gradient(80% 70% at 90% 10%, rgba(144, 38, 142, 0.05), transparent 50%),
    var(--kl-scheme-bg);
  color: var(--kl-scheme-fg-on-bg);
}

/* ============================================================
   Button base — the signature "elevated capsule" look.
   Use .kl-btn + .kl-btn--primary / --secondary / --link.
   ============================================================ */
.kl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-radius: var(--kl-radius-button);
  padding: 0.75rem 1.5rem;
  font-family: var(--kl-font-body);
  font-weight: var(--kl-weight-emphasis);
  font-size: var(--kl-text-medium);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
  transition: transform var(--kl-duration) var(--kl-ease),
              background-color var(--kl-duration) var(--kl-ease),
              box-shadow var(--kl-duration) var(--kl-ease);
}
.kl-btn:disabled { opacity: 0.5; pointer-events: none; }
.kl-btn--sm { padding: 0.5rem 1.25rem; font-size: var(--kl-text-regular); }

.kl-btn--primary {
  background: var(--kl-plum);
  color: var(--kl-white);
  box-shadow: var(--kl-shadow-btn);
  font-weight: 700;
  letter-spacing: 0.005em;
}
.kl-btn--primary:hover {
  background: var(--kl-plum-dark);
  transform: translateY(-2px);
  box-shadow: var(--kl-shadow-btn-hover);
}

.kl-btn--alternate {
  background: var(--kl-white);
  color: var(--kl-ink);
  box-shadow: var(--kl-shadow-btn-alt);
  font-weight: 700;
  letter-spacing: 0.005em;
}
.kl-btn--alternate:hover {
  background: var(--kl-white);
  transform: translateY(-2px);
  box-shadow: var(--kl-shadow-btn-alt-hover);
}

.kl-btn--secondary {
  background: rgba(255, 255, 255, 0.92);
  color: var(--kl-plum-darker);
  border: 1px solid rgba(255, 255, 255, 0.36);
  box-shadow: var(--kl-shadow-btn-alt);
  backdrop-filter: blur(10px);
  font-weight: 700;
  letter-spacing: 0.005em;
}
.kl-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.96);
  transform: translateY(-2px);
  box-shadow: var(--kl-shadow-btn-alt-hover);
}

.kl-btn--link {
  padding: 0;
  gap: 0.5rem;
  background: transparent;
  box-shadow: none;
  font-weight: var(--kl-weight-emphasis);
}
.kl-btn--link:hover { transform: none; opacity: 0.7; }

/* Booking CTA — high-priority "Book now" button (sun yellow, pops on plum). */
.kl-btn--book {
  background: var(--kl-sun);
  color: var(--kl-plum-darkest);
  font-weight: 800;
  padding: 0.95rem 1.9rem;
  font-size: var(--kl-text-medium);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.kl-btn--book:hover {
  background: var(--kl-sun-light);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}
.kl-btn--book svg { transition: transform 0.2s var(--kl-ease); }
.kl-btn--book:hover svg { transform: translateX(3px); }

/* Availability dot — gentle pulse to signal "spots open now". */
.kl-avail-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 999px;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: kl-pulse 2s ease-out infinite;
}
@keyframes kl-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .kl-avail-dot { animation: none; }
}

/* ============================================================
   Responsive type scale — mobile defaults < 992px
   Best-practice: scale down headings on small screens so they
   don't dominate the viewport. Body sizes stay readable.
   ============================================================ */
@media (max-width: 991px) {
  :root {
    --kl-text-h1: 2.75rem;     /* 44 */
    --kl-text-h2: 2.5rem;      /* 40 */
    --kl-text-h3: 2rem;        /* 32 */
    --kl-text-h4: 1.5rem;      /* 24 */
    --kl-text-h5: 1.25rem;     /* 20 */
    --kl-text-h6: 1.125rem;    /* 18 */
    --kl-text-large:   1.125rem;
    --kl-text-medium:  1rem;
    --kl-section-py: 4rem;     /* tighter vertical rhythm */
  }
}

/* ============================================================
   Prose / measure helpers
   Constrain long-form copy to a readable line length.
   ============================================================ */
.kl-prose {
  max-width: var(--kl-measure);  /* ≈ 65 characters */
}
.kl-prose p + p { margin-top: 1em; }
.kl-prose h2, .kl-prose h3, .kl-prose h4 { margin-top: 1.5em; margin-bottom: 0.5em; }

/* Use `text-wrap: pretty` (browsers that support it) to avoid orphans on display type. */
@supports (text-wrap: pretty) {
  h1, h2, h3, h4, .kl-display { text-wrap: pretty; }
}
@supports (text-wrap: balance) {
  h1, h2 { text-wrap: balance; }
}

/* ============================================================
   Responsive grid utilities
   Inline grid styles can't be overridden by media queries, so
   sections use these classes for any multi-column layout.
   ============================================================ */
.kl-cols-2, .kl-cols-3, .kl-cols-4 { display: grid; }
.kl-cols-2 { grid-template-columns: repeat(2, 1fr); }
.kl-cols-3 { grid-template-columns: repeat(3, 1fr); }
.kl-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Two-up split (text + media). Stacks on tablet down. */
.kl-split { display: grid; grid-template-columns: 1fr 1fr; }

/* ============================================================
   Audience selector — photo-led cards (handoff Direction A).
   Photo on top, white body below. Mapped onto brand tokens.
   ============================================================ */
.acard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.acard {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--kl-white);
  border: 1px solid #e7e3da;
  border-radius: var(--kl-radius-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--kl-fg-1);
  transition: transform 0.3s var(--kl-ease), box-shadow 0.3s var(--kl-ease), border-color 0.3s var(--kl-ease);
}
.acard:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -18px rgba(27, 26, 24, 0.32); border-color: #d9d4c9; }
.acard:focus-visible { outline: 3px solid var(--kl-fg-1); outline-offset: 2px; }

.acard__photo {
  position: relative;
  height: 150px;
  overflow: hidden;
}
.acard__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.acard__body {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 18px 20px;
  flex: 1;
}
.acard__name {
  font-family: var(--kl-font-display);
  font-size: 18px; font-weight: 600; line-height: 1.22; letter-spacing: -0.01em;
  margin: 0; color: var(--kl-fg-1);
}
.acard__copy {
  font-size: 14px; font-weight: 400; line-height: 1.46;
  color: var(--kl-fg-2); margin: 0; flex: 1; text-wrap: pretty;
}
.acard__cta {
  margin-top: 2px; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--kl-plum);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; align-self: flex-start;
}
.acard__cta > span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; transition: text-decoration-color 0.25s var(--kl-ease); }
.acard:hover .acard__cta > span { text-decoration-color: var(--kl-plum); }
.acard__cta svg { transition: transform 0.25s var(--kl-ease); }
.acard:hover .acard__cta svg { transform: translateX(4px); }

@media (max-width: 960px) {
  .acard-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .acard-grid { grid-template-columns: 1fr; }
}
/* On mobile, show the team grid two-up: keeps photos square and centred while
   halving the section height (long single-column grids scroll forever). */
@media (max-width: 640px) {
  .kl-team-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  /* Reserve two lines for names and roles so bios line up across each row,
     however long the text wraps. */
  .kl-team-name { min-height: 2.2em; }
  .kl-team-role { min-height: 3.2em; }
}
/* Mobile type scale — dial headings and body down to best-practice sizes
   (body stays 16px; oversized display headings and 18px body come down). */
@media (max-width: 600px) {
  :root {
    --kl-text-h1: 2.1rem;    /* ~34px (was up to 44px) */
    --kl-text-h2: 1.6rem;    /* ~26px */
    --kl-text-h3: 1.375rem;  /* ~22px */
    --kl-text-h4: 1.2rem;    /* ~19px */
    --kl-text-h5: 1.1rem;
    --kl-text-large: 1.15rem;
    --kl-text-medium: 1rem;  /* 16px (was 18px) */
  }
}
@media (prefers-reduced-motion: reduce) {
  .acard, .acard__cta svg { transition: none; }
}

@media (max-width: 991px) {
  .kl-cols-3, .kl-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .kl-split { grid-template-columns: 1fr; }
  /* On a stacked split, drop the big inter-column gap to a vertical rhythm. */
  .kl-split { gap: 2.5rem !important; }
}
@media (max-width: 640px) {
  .kl-cols-2, .kl-cols-3, .kl-cols-4 { grid-template-columns: 1fr; }
  /* Let long button labels wrap instead of overflowing the viewport. */
  .kl-btn { white-space: normal; max-width: 100%; }
}

/* Skip-to-content link — hidden until keyboard-focused (WCAG 2.4.1). */
.kl-skip {
  position: fixed; left: 12px; top: -80px; z-index: 1001;
  background: var(--kl-plum); color: var(--kl-white);
  padding: 10px 18px; border-radius: 10px; font-weight: 700;
  transition: top 0.15s var(--kl-ease);
}
.kl-skip:focus { top: 12px; }

/* Footer social chips — lift + brighten on hover. */
.kl-social { transition: transform 0.2s var(--kl-ease), filter 0.2s var(--kl-ease); }
.kl-social:hover { transform: translateY(-2px); filter: brightness(1.1); }

/* ============================================================
   Accessibility preferences — toggled by the a11y widget via
   classes on <html>. Real user-controlled prefs, not an overlay.
   ============================================================ */
/* Text size — scales all rem-based type from the root. */
html.a11y-text-1 { font-size: 112.5%; }  /* +12.5% */
html.a11y-text-2 { font-size: 125%; }     /* +25%   */

/* High contrast — remap the warm tokens to near-black on white. */
html.a11y-contrast {
  --kl-ink: #141018;
  --kl-muted: #141018;
  --kl-neutral: #2b2b2b;
  --kl-surface: #ffffff;
  --kl-soft: #ffffff;
  --kl-cream: #ffffff;
  --kl-taupe: #ffffff;
  --kl-border: #141018;
}
html.a11y-contrast a:not(.kl-btn) { text-decoration: underline; text-underline-offset: 0.15em; }

/* Always-underline links for easier scanning. */
html.a11y-links a:not(.kl-btn) { text-decoration: underline !important; text-underline-offset: 0.15em; }

/* Readable font — swap to a highly legible stack (Atkinson Hyperlegible if present). */
html.a11y-readable, html.a11y-readable * {
  font-family: "Atkinson Hyperlegible", Verdana, "Segoe UI", system-ui, sans-serif !important;
  letter-spacing: normal !important;
}

/* Reduce motion — for users who didn't set the OS preference. */
html.a11y-motion { scroll-behavior: auto !important; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* ============================================================
   Navbar — floating frosted pill + desktop links + mobile drawer.
   ============================================================ */
.kl-navbar {
  position: fixed;
  inset: 18px 16px auto;            /* top · left/right · bottom-auto */
  z-index: 999;
  max-width: 1180px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid rgba(107, 28, 105, 0.08);
  border-radius: var(--kl-radius-card);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 44px rgba(107, 28, 105, 0.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  /* Opacity is driven directly by scroll position (inline), so it is not transitioned. */
  transition: background 300ms ease, box-shadow 300ms ease;
}

.kl-nav-links { display: flex; align-items: center; gap: 4px; }
.kl-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-radius-button);
  background: var(--kl-white);
  color: var(--kl-ink);
  cursor: pointer;
}
.kl-nav-drawer { display: none; }

@media (max-width: 991px) {
  .kl-nav-links { display: none; }
  .kl-nav-toggle { display: inline-flex; }
  .kl-nav-signin { display: none; }   /* keep only the primary CTA in the bar */
  .kl-nav-cta { display: none; }      /* CTA too dominant in the small header; heroes carry it */
  .kl-nav-drawer {
    display: block;
    position: absolute;
    top: calc(100% + 8px); left: 0; right: 0;
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    backdrop-filter: blur(22px) saturate(1.4);
    border: 1px solid rgba(107, 28, 105, 0.08);
    border-radius: var(--kl-radius-card);
    box-shadow: 0 18px 40px rgba(107, 28, 105, 0.12);
    padding: 8px 16px 16px;
  }
  .kl-nav-drawer a {
    display: block;
    padding: 14px 4px;
    font-size: var(--kl-text-medium);
    color: var(--kl-fg-1);
    border-bottom: 1px solid var(--kl-border);
  }
  .kl-nav-drawer a:last-child { border-bottom: 0; }
}

/* ============================================================
   Motion — scroll reveal, hero entrance, card hover-lift.
   All effects are disabled under prefers-reduced-motion.
   ============================================================ */

/* Scroll-reveal: content starts lifted + transparent, settles when seen.
   No will-change here: it would keep very tall sections promoted as a single
   GPU layer forever, and iOS Safari paints layers beyond its max texture size
   as blank white (this blanked the Meet the Team grid on iPhones). */
.kl-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--kl-ease), transform 0.7s var(--kl-ease);
}
.kl-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Hero entrance — staggered rise on load. */
@keyframes kl-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.kl-rise { opacity: 0; animation: kl-rise 0.7s var(--kl-ease) forwards; }
.kl-rise-1 { animation-delay: 0.08s; }
.kl-rise-2 { animation-delay: 0.18s; }
.kl-rise-3 { animation-delay: 0.30s; }
.kl-rise-4 { animation-delay: 0.42s; }

/* Card hover-lift — subtle elevation on pointer devices. */
.kl-card {
  transition: transform 0.25s var(--kl-ease), box-shadow 0.25s var(--kl-ease);
}
@media (hover: hover) {
  .kl-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 64px rgba(107, 28, 105, 0.14) !important;
  }
}

/* Offset scroll targets so the floating header never covers the section top. */
.kl-section { scroll-margin-top: 100px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Hero scroll-down cue — subtle bouncing chevron. */
.kl-hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 200ms ease, border-color 200ms ease;
  animation: kl-bounce 2.2s var(--kl-ease) infinite;
}
.kl-hero-scroll:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.7);
}
@keyframes kl-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(7px); }
}

@media (prefers-reduced-motion: reduce) {
  .kl-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .kl-rise   { opacity: 1 !important; animation: none !important; }
  .kl-card   { transition: none !important; }
  .kl-card:hover { transform: none !important; }
  .kl-hero-scroll { animation: none !important; transform: translateX(-50%); }
}

/* ============================================================
   Focus state — visible plum ring with offset, never removed.
   ============================================================ */
:where(button, a, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--kl-plum);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Selection */
::selection {
  background: var(--kl-plum-lighter);
  color: var(--kl-plum-darkest);
}

/* ============================================================
   Marquee — continuous horizontal scroller (testimonials etc.)
   Track holds the items duplicated twice; -50% = one full set.
   ============================================================ */
@keyframes kl-marquee-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.kl-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.kl-marquee__track {
  display: flex;
  width: max-content;
  animation: kl-marquee-x 60s linear infinite;
}
.kl-marquee:hover .kl-marquee__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .kl-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .kl-marquee__track { animation: none; }
}

/* ============================================================
   Modal — backdrop fade + card lift-in (used by the team bios)
   ============================================================ */
@keyframes kl-modal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kl-modal-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.kl-modal { animation: kl-modal-in 0.18s var(--kl-ease); }
.kl-modal__card { animation: kl-modal-card-in 0.22s var(--kl-ease); }

@media (prefers-reduced-motion: reduce) {
  .kl-modal, .kl-modal__card { animation: none; }
}