/* ---------------------------------------------------------------
   Affinity Institute · design system
   Type: Cabinet Grotesk (display/headings) + Manrope (body/UI)
   Palette: cream paper, forest ink, sage, warm orange
   ---------------------------------------------------------------
   Fonts are self-hosted (woff2 in /assets/fonts) and declared here
   with font-display: block, so the correct face renders on first
   paint — no flash of fallback, no third-party request. Cabinet
   Grotesk is a variable Fontshare face (ITF, 100–900 in one file);
   Manrope is variable from Google (latin subset). Only four weights
   are used anywhere in the system — 400 / 500 / 600 / 700 — so every
   weight resolves exactly on both families. No odd tuned values.
   --------------------------------------------------------------- */

@font-face {
  font-family: "Cabinet Grotesk";
  src: url("/assets/fonts/cabinet-grotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: block;
  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;
}

:root {
  --paper: #faf4eb;
  --paper-deep: #f2e8d9;
  --paper-warm: #fdf9f3;
  --ink: #20241f;
  --forest: #22322a;
  --forest-deep: #1a2721;
  --sage: #7d8f78;
  --sage-soft: #b9c4b1;
  --olive: #6e7b3e;
  --olive-soft: #c3d390;
  --orange: #d96d2b;
  --orange-bright: #e87d38;
  --orange-soft: #f0b489;
  --cream-line: #e5d8c5;
  --cream-line-soft: #ede2d2;
  --muted: #5e6448;
  --muted-on-dark: #aeb89a;

  --irish-green: #2f7d44;
  /* Trustpilot brand green — used only on the graduates reviews marquee
     so the section reads unmistakably as Trustpilot. */
  --tp-green: #00b67a;
  /* The irish orange→green gradient is reserved for one place only:
     the homepage hero headline. It is the single signature element.
     Everything else uses solid orange — restraint over decoration. */
  --grad-irish: linear-gradient(110deg, var(--orange) 0%, var(--irish-green) 95%);

  --display: "Cabinet Grotesk", sans-serif;
  --sans: "Manrope", sans-serif;

  --wrap: 1240px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --header-h: 76px; /* at-rest .nav min-height; the sticky header is in-flow, so the homepage hero fills 100svh - this */
  --sect: clamp(88px, 11vw, 160px);

  --r: 14px;
  --r-photo: 12px;
  --shadow-soft: 0 2px 6px rgba(34, 42, 34, 0.05), 0 22px 60px -18px rgba(34, 42, 34, 0.16);
  --shadow-lift: 0 3px 10px rgba(34, 42, 34, 0.07), 0 34px 90px -22px rgba(34, 42, 34, 0.28);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.001em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* lock scrolling when the mobile menu is open. The page scrolls on the
   root (html), not body, so the lock must be on html — locking body alone
   leaves the page scrollable behind the drawer. overflow:hidden on html
   also keeps it as the scroll container, so the sticky header still pins
   to the viewport (locking body would turn body into a scroll container
   and re-anchor the sticky header off-screen). */
html.nav-open { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.wrap {
  width: min(calc(100% - (var(--gutter) * 2)), var(--wrap));
  margin-inline: auto;
}

::selection { background: rgba(217, 109, 43, 0.22); }

/* ------------------------------------------------ display type */

.d-xl, .d-lg, .d-md, .d-sm {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-wrap: balance;
}

.d-xl { font-size: clamp(44px, 5.6vw, 64px); line-height: 1.02; }
.d-lg { font-size: clamp(34px, 4.6vw, 52px); }
.d-md { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.08; }
.d-sm { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.16; }

/* Emphasis words: solid orange, mid-bold — quiet and consistent.
   The hero headline alone gets the Irish gradient (see .hero h1 em). */
.d-xl em, .d-lg em, .d-md em, .d-sm em {
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--orange);
}

.label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 26px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.label::before { display: none; }

.on-dark .label { color: var(--muted-on-dark); }

.label.no-dash::before { display: none; }

.lede {
  font-size: clamp(16.5px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 34em;
}

.on-dark .lede { color: var(--muted-on-dark); }

/* ------------------------------------------------------ header */

/* Solid paper header at the top of the page. Once the visitor scrolls
   past the header's own height, .scrolled turns the bar transparent and
   the inner .nav condenses into a floating, translucent glass block —
   the elements gather into one detached pill at the top of the viewport.
   No glass at rest; it only appears once the header has left view. */
.site-head {
  position: sticky;
  top: 0;
  /* sits above lifted content — e.g. the parents deck hovered card (z 100)
     and the sticky detached nav pill, so a card fanned out under the
     header never overlaps it */
  z-index: 200;
  background: rgba(250, 244, 235, 1);
  /* flow-root establishes a BFC so the .nav's top margin (the float gap)
     is contained instead of collapsing out the top of the sticky header. */
  display: flow-root;
  transition: background-color 0.45s ease;
}

.site-head.scrolled {
  background: rgba(250, 244, 235, 0);
}

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 76px;
  gap: 20px;
  /* default pill geometry — flush and invisible until .scrolled gathers
     it into a floating block. Colors use the SAME rgb channels as the
     scrolled state but at alpha 0, so the transition only animates alpha
     (and so genuinely fades) instead of jumping channel-by-channel from
     the `transparent` keyword's rgba(0,0,0,0). */
  margin-top: 0;
  padding: 0;
  border: 1px solid rgba(209, 196, 178, 0);
  border-radius: 18px;
  background: rgba(255, 253, 250, 0);
  transition: background 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s ease,
              border-color 0.45s ease,
              border-radius 0.45s ease,
              margin-top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              padding 0.45s ease,
              min-height 0.45s ease,
              width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* the floating header block — detached from the viewport edge,
   condensed, near-solid white card with a crisp edge + strong shadow so
   it reads unmistakably against any background beneath it (the page is
   cream, so the pill cannot be the same cream or it would vanish).
   Animates in as one and animates back out when returning to the top. */
.site-head.scrolled .nav {
  margin-top: 16px;
  padding: 0 20px;
  min-height: 64px;
  /* Solid opaque on mobile — NO backdrop-filter here. backdrop-filter
     creates a containing block that traps the position:fixed mobile drawer
     inside the pill, throwing it off-screen when scrolled. Glass is
     applied desktop-only below. */
  background: rgba(255, 253, 250, 1);
  border-color: rgba(209, 196, 178, 0.85);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
              0 14px 40px -14px rgba(34, 42, 34, 0.5),
              0 2px 8px -2px rgba(34, 42, 34, 0.18);
}

/* Desktop: the floating pill narrows (grid side columns compress, so the
   logo + Apply button slide inward toward the centered menu) and gains a
   frosted-glass finish. Both are desktop-only — mobile keeps a solid pill
   and uses a drawer for the menu. */
@media (min-width: 961px) {
  .site-head.scrolled .nav {
    width: clamp(640px, 78vw, 940px);
    background: rgba(255, 253, 250, 0.96);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.brand img { width: 34px; height: auto; }

.brand-name {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.brand-name span { color: var(--sage); font-weight: 500; }

.menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.menu-item { position: relative; }

.menu-link,
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  border-radius: 100px;
  transition: background 0.25s ease;
}

.menu-link:hover, .menu-btn:hover { background: rgba(34, 50, 42, 0.06); }

.menu-btn svg { width: 9px; height: 6px; opacity: 0.5; transition: transform 0.25s ease; }

.menu-item:hover .menu-btn svg,
.menu-item.open .menu-btn svg { transform: rotate(180deg); }

.drop {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: min(330px, 86vw);
  padding: 10px;
  background: var(--paper-warm);
  border: 1px solid var(--cream-line-soft);
  border-radius: var(--r);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.menu-item:hover .drop,
.menu-item:focus-within .drop,
.menu-item.open .drop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* the wide two-column dropdown shrinks to the viewport on mid screens */
.drop.cols {
  min-width: min(560px, 92vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.drop a {
  display: block;
  padding: 14px 16px;
  border-radius: 10px;
  transition: background 0.2s ease;
}

.drop a:hover { background: rgba(34, 50, 42, 0.055); }

.drop a strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 3px;
}

.drop a span {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

.nav-cta { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }

/* the in-drawer Apply CTA is hidden on desktop (the bar CTA sits in
   .nav-cta); the mobile breakpoint below reveals it */
.menu-cta { display: none; }

/* buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 0;
  border-radius: 100px;
  background: var(--forest);
  color: var(--paper);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, box-shadow 0.3s ease;
}

.btn:hover { transform: translateY(-2px); background: var(--forest-deep); box-shadow: 0 14px 30px -12px rgba(26, 39, 33, 0.5); }

.btn.orange { background: var(--orange); color: #fff; }
.btn.orange:hover { background: #c65f21; box-shadow: 0 14px 30px -12px rgba(198, 95, 33, 0.55); }

.btn.paper { background: var(--paper); color: var(--forest); }
.btn.paper:hover { background: #fff; }

.btn .arr { transition: transform 0.25s ease; }
.btn:hover .arr { transform: translateX(3px); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  position: relative;
  transition: gap 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease, border-color 0.3s ease;
}

/* an accent line that draws in across the underline on hover */
.arrow-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.arrow-link:hover::after { transform: scaleX(1); transform-origin: left center; }

.arrow-link:hover { gap: 15px; color: var(--orange); border-color: var(--orange); }

.on-dark .arrow-link { color: var(--paper); border-color: rgba(250, 244, 235, 0.5); }
.on-dark .arrow-link:hover { color: var(--orange-soft); border-color: var(--orange-soft); }

.arr { display: inline-block; }

.mob-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  border: 1px solid var(--cream-line);
  border-radius: 100px;
  background: none;
  cursor: pointer;
}

.mob-toggle i {
  display: block;
  height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

body.nav-open .mob-toggle i:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
body.nav-open .mob-toggle i:nth-child(2) { opacity: 0; }
body.nav-open .mob-toggle i:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* -------------------------------------------------------- hero */

.hero { padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 6vw, 80px); }

.hero h1 { margin: 0 0 20px; font-size: clamp(44px, 7vw, 80px); line-height: 1.0; }

/* the one signature element: the Irish gradient lives only here */
.hero h1 em,
.hero-center h1 em {
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: var(--grad-irish);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero .lede { margin: 0 0 26px; }

.hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

/* centered hero, CareerFoundry style */

.hero-center {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  padding: clamp(36px, 5vw, 72px) 0 clamp(32px, 4vw, 60px);
  text-align: center;
}

/* the headline block grows to fill the viewport minus the logo strip,
   so it stays optically centered while the marquee pins to the bottom */
.hero-center .wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-logos { margin-top: clamp(24px, 4vw, 40px); }
.hero-logos .label { justify-content: center; margin-bottom: 16px; }
.hero-logos .marquee-track img { height: clamp(40px, 5vw, 56px); }

.hero-center .label { justify-content: center; }
.hero-center .label::before { display: none; }

.hero-center h1 {
  max-width: 13em;
  margin-inline: auto;
}

.hero-center .lede { max-width: 36em; margin-inline: auto; }

.hero-center .hero-actions { justify-content: center; }

.hero-center .hero-proof {
  justify-content: center;
  border-top: 0;
  padding-top: 0;
  margin-top: 26px;
}

.hero-center .hero-proof p { flex: 0 1 auto; text-align: left; max-width: 24em; }

@media (max-width: 640px) {
  .hero-center .hero-proof { flex-direction: column; }
  .hero-center .hero-proof p { text-align: center; }
}

.hero-proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin-top: 46px;
  padding-top: 30px;
}

.avatar-stack { display: flex; }

.avatar-stack img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2.5px solid var(--paper);
  object-fit: cover;
}

.avatar-stack img + img { margin-left: -12px; }

.hero-proof p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 32em; flex: 1 1 220px; min-width: 200px; }
.hero-proof strong { color: var(--ink); }

.tp-link {
  color: #00b77f;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.tp-link:hover { opacity: 0.75; }

.hero-proof .stars { color: #00b77f; }

.stars { display: inline-flex; gap: 3px; color: var(--olive); }
.stars svg { width: 14px; height: 14px; fill: currentColor; }
.score-block .stars svg { width: 20px; height: 20px; }

/* -------------------------------------------------- logo strip */

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: belt 36s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes belt {
  to { transform: translateX(-50%); }
}

.marquee-track img {
  height: 56px;
  width: auto;
  object-fit: contain;
  margin-inline-end: clamp(48px, 7vw, 96px);
  opacity: 0.82;
  transition: opacity 0.3s ease;
}

.marquee-track img:hover { opacity: 1; }

/* white-on-transparent logos need inverting to read on the cream paper */
.marquee-track img.logo-inv { filter: invert(1); }

.wordmark {
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--ink) 52%, var(--paper));
  white-space: nowrap;
  transition: color 0.3s ease;
}

.wordmark:hover { color: var(--ink); }

.wordmark.lower { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: -0.01em; }
.wordmark.ital { font-family: var(--display); font-weight: 500; font-size: 24px; }

/* ---------------------------------------------------- sections */

.sect { padding: var(--sect) 0; }
.sect.tight { padding: calc(var(--sect) * 0.62) 0; }

.sect-head { max-width: 720px; margin-bottom: clamp(44px, 6vw, 76px); }
.sect-head .lede { margin-top: 22px; }

.sect-head.split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}

.sect-head.split > div:first-child { max-width: 640px; }
.sect-head.split .lede { max-width: 26em; }

/* ------------------------------------------------ trust section */

.trust { background: var(--paper-warm); }

.trust-cols {
  display: grid;
  grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

.score-block { position: sticky; top: 120px; }

.score-figure {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 26px 0 10px;
}

.score-figure b {
  font-family: var(--display);
  font-size: clamp(72px, 9vw, 120px);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.03em;
}

.score-figure .of { font-size: 15px; color: var(--muted); font-weight: 500; }

.score-block .stars { gap: 5px; }

.score-block p { color: var(--muted); font-size: 14.5px; max-width: 26em; }

.review-flow { display: grid; gap: 18px; }

.review-flow .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.review-flow .row.cols-3 { grid-template-columns: repeat(3, 1fr); }
/* the offset is desktop-only — removed at and below the tablet band */
.review-flow .row.offset { transform: translateX(clamp(0px, 3vw, 44px)); }
.quote-card .stars { margin-bottom: 14px; }

.quote-card {
  padding: 30px 30px 26px;
  background: var(--paper);
  border: 1px solid var(--cream-line-soft);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.quote-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.quote-card blockquote {
  margin: 0 0 22px;
  font-family: var(--display);
  font-size: 18.5px;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.008em;
}

.quote-card blockquote::before { content: "\201C"; color: var(--orange); margin-right: 1px; }
.quote-card blockquote::after { content: "\201D"; color: var(--orange); margin-left: 1px; }
.quote-card blockquote {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.who { display: flex; align-items: center; gap: 12px; }

.who img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }

.who b { display: block; font-size: 13.5px; font-weight: 700; }
.who span { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }

/* stats band */

.stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(48px, 6vw, 80px);
}

.stat {
  padding: 34px 30px 6px;
  border-left: 1px solid var(--cream-line);
}

.stat:first-child { border-left: 0; padding-left: 0; }

.stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--forest);
  white-space: nowrap;
}

.stat b .accent {
  display: inline;
  margin: 0;
  color: var(--orange);
  font-size: inherit;
  line-height: inherit;
  max-width: none;
}

.stat > span {
  display: block;
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 17em;
}

/* --------------------------------------------- trustpilot reviews */
/* A distinct Trustpilot-styled marquee on the graduates page: white
   review cards on cream paper, the Trustpilot green star rating, a
   Trustpilot wordmark header and "Verified" tags. Two tracks scroll
   in opposite directions and pause on hover. */

.tp { background: var(--paper-warm); }

/* shared embed wrapper (Endors testimonial widgets) */
.endors-embed { margin-top: 0; }

/* the Trustpilot sections sit the embed right under the header — pull
   the headers' bottom margins in so there's no large air gap */
.tp .sect-head { margin-bottom: 6px; }
.tp .tp-head { margin-bottom: 6px; }
.endors-embed iframe {
  width: 100%;
  border: 0;
  display: block;
  border-radius: var(--r);
  background: transparent;
}
/* the widget's cards stack on phones, so it needs more vertical room
   than the inline height gives — !important to override the iframe attr */
@media (max-width: 640px) {
  .endors-embed iframe { height: 980px !important; min-height: 980px !important; }
}

.tp-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-bottom: 46px;
}

.tp-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tp-logo .tp-mark { width: 26px; height: 26px; fill: var(--tp-green); }

.tp-score { display: inline-flex; align-items: baseline; gap: 6px; }
.tp-score b { font-family: var(--display); font-size: 28px; font-weight: 600; color: var(--ink); line-height: 1; }
.tp-score .of { font-size: 14px; color: var(--muted); }

.tp-head .stars { color: var(--tp-green); }
.tp-head .stars svg { width: 120px; height: 24px; fill: currentColor; }

.tp-excellent { margin: 0; font-size: 14px; color: var(--muted); }
.tp-head .arrow-link { margin-left: auto; }

/* homepage variant: the Trustpilot badge sits as the right column of
   the split section header, so it drops its own bottom margin */
.tp-badge { margin-bottom: 0; align-self: flex-end; }
.tp-badge .arrow-link { font-size: 14px; }

.tp-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);
}

/* margin-right (not gap) keeps the loop seamless once JS duplicates the set */
.tp-track {
  display: flex;
  width: max-content;
  padding: 4px 0 8px;
  animation: belt 52s linear infinite;
  will-change: transform;
}
.tp-track.rev { animation-direction: reverse; animation-duration: 60s; }
.tp-marquee:hover .tp-track { animation-play-state: paused; }

.tp-card {
  flex: 0 0 clamp(290px, 30vw, 350px);
  margin-right: 20px;
  background: #ffffff;
  border: 1px solid #e7e1d8;
  border-radius: var(--r);
  padding: 24px 24px 20px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tp-card .stars { color: var(--tp-green); }
.tp-card .stars svg { width: 104px; height: 20px; fill: currentColor; }

.tp-card blockquote {
  margin: 0;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.55;
  color: #1c1f1b;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tp-who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.tp-who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.tp-who b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.tp-verified { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--tp-green); }
.tp-verified::before { content: "\2713"; }

/* --------------------------------------------- testimonial wall (homepage) */
/* Two rows of dark, Trustpilot-green cards drifting in opposite directions.
   Built from the site's own marquee mechanics (data-marquee doubles the
   set in JS) so it inherits the same seamless-loop math as the logo belt. */

.tp-wall {
  overflow: hidden;
  background: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  margin-top: 18px;
}
.tp-wall + .tp-wall { margin-top: 20px; }

.tp-row {
  display: flex;
  width: max-content;
  padding: 6px 0;
  animation: belt 68s linear infinite;
  will-change: transform;
}
.tp-row.rev { animation-direction: reverse; animation-duration: 78s; }
.tp-wall:hover .tp-row { animation-play-state: paused; }

.tp-card2 {
  flex: 0 0 clamp(300px, 32vw, 380px);
  margin-right: 20px;
  padding: 26px 26px 24px;
  border-radius: 18px;
  background: linear-gradient(160deg, #0a3d2c 0%, var(--tp-green) 46%, #06563c 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tp-card2-top { display: flex; align-items: center; gap: 12px; }
.tp-card2-top img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22);
}
.tp-card2-top b {
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #fff;
  flex: 1;
}
.tp-card2-top .tp-stars-lg { flex-shrink: 0; color: #7fe6bd; }
.tp-card2-top .tp-stars-lg svg { width: 84px; height: 16px; fill: currentColor; }

.tp-card2 blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.002em;
  color: rgba(255, 255, 255, 0.92);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px) {
  .tp-card2 { flex: 0 0 82vw; padding: 22px 22px 20px; }
  .tp-card2-top { flex-wrap: wrap; }
  /* one scrolling row only on phones: drop the second row so the
     section below rises into the freed space */
  .tp-wall + .tp-wall { display: none; }

  /* Safari on iOS blanks a mask over a composited/scrolling child, so
     replace the edge fade with plain overlay strips on the section's
     own background colour. Same look, no mask to fight the paint. */
  .tp-wall {
    -webkit-mask-image: none;
    mask-image: none;
    position: relative;
  }
  .tp-wall::before,
  .tp-wall::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7%;
    pointer-events: none;
    z-index: 1;
  }
  .tp-wall::before { left: 0; background: linear-gradient(90deg, var(--paper-warm), transparent); }
  .tp-wall::after { right: 0; background: linear-gradient(270deg, var(--paper-warm), transparent); }
}

/* ------------------------------------------------------- video */

.film { position: relative; }

.film-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: calc(var(--r-photo) + 8px);
  aspect-ratio: 16 / 9;
  min-height: 0;
  display: grid;
  place-items: center;
  isolation: isolate;
  background: var(--forest-deep);
}

.film-frame wistia-player {
  width: 100%;
  display: block;
}

.film-play {
  display: grid;
  place-items: center;
  width: clamp(80px, 9vw, 108px);
  aspect-ratio: 1;
  border: 1px solid rgba(250, 244, 235, 0.5);
  border-radius: 50%;
  background: rgba(250, 244, 235, 0.12);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1), background 0.35s ease;
}

.film-play:hover { transform: scale(1.08); background: rgba(217, 109, 43, 0.85); border-color: transparent; }

.film-play svg { width: 26px; height: 26px; fill: var(--paper); margin-left: 4px; }

.film-copy {
  position: absolute;
  left: clamp(26px, 4.5vw, 60px);
  bottom: clamp(24px, 4vw, 48px);
  color: var(--paper);
  max-width: 480px;
}

.film-copy .d-md { color: var(--paper); }

.film-copy p { margin: 12px 0 0; color: var(--muted-on-dark); font-size: 14.5px; max-width: 30em; }

.film-tag {
  position: absolute;
  right: clamp(26px, 4.5vw, 60px);
  bottom: clamp(24px, 4vw, 48px);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250, 244, 235, 0.66);
}

.film-caption {
  margin: 18px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* --------------------------------------------- editorial rows */

.rows { display: grid; gap: clamp(72px, 11vw, 140px); }

.row-ed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
}

.row-ed .num {
  font-family: var(--display);
  font-size: 15px;
  color: var(--orange);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 18px;
}

.row-ed h2 { margin: 0 0 24px; }

.row-ed p { margin: 0 0 34px; color: var(--muted); max-width: 30em; }

.row-media { position: relative; }

.row-media > img:not(.row-float) {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  border-radius: var(--r-photo);
  box-shadow: var(--shadow-lift);
}

.row-ed.flip .row-media { order: -1; }

.row-caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 9px 16px;
  border-radius: 100px;
  background: rgba(250, 244, 235, 0.94);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* ----------------------------------------------- community dark */

.community {
  position: relative;
  background: var(--forest-deep);
  color: var(--paper);
  overflow: hidden;
}

.community .wrap { position: relative; }

/* ---- dark alternating band (mirrors .community's forest-deep) ----
   Used on inner pages so they don't read as a flat run of cream.
   Person-cards / .panel keep their own light bg and float on the
   dark band; everything else inherits the paper colour. */
.band-dark { background: var(--forest-deep); color: var(--paper); }
/* Panels keep their own light bg and float on the dark band, so their text
   must reset to ink — otherwise the band's paper colour cascades in and
   the light text vanishes on the light card. */
.band-dark .panel { color: var(--ink); }
.band-dark .panel p { color: var(--muted); }
.band-dark .row-ed p,
.band-dark .disc p { color: var(--muted-on-dark); }
.band-dark .row-ed .num,
.band-dark .disc-num { color: var(--orange-soft); }
.band-dark .disc { border-color: rgba(250, 244, 235, 0.14); }
.band-dark .disc:hover { background: rgba(250, 244, 235, 0.06); }

.comm-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(44px, 6vw, 90px);
  align-items: center;
}

.comm-copy .lede { margin: 24px 0 36px; }

.comm-points { display: grid; gap: 0; margin: 0 0 40px; padding: 0; list-style: none; counter-reset: pts; }

.comm-points li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 17px 0;
  border-top: 1px solid rgba(250, 244, 235, 0.14);
  font-size: 15.5px;
  color: rgba(250, 244, 235, 0.88);
  counter-increment: pts;
}

.comm-points li::before {
  content: none;
}

.comm-collage {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-auto-rows: minmax(150px, auto);
  gap: 16px;
}

.comm-collage img, .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-photo);
}

.comm-collage .span-2 { grid-row: span 2; }

.ph {
  display: grid;
  place-content: center;
  gap: 8px;
  min-height: 150px;
  padding: 24px;
  text-align: center;
  border: 1px dashed rgba(250, 244, 235, 0.3);
  background: rgba(250, 244, 235, 0.04);
  color: rgba(250, 244, 235, 0.6);
  font-size: 12.5px;
  line-height: 1.5;
}

.ph.on-paper {
  border-color: var(--cream-line);
  background: var(--paper-warm);
  color: var(--muted);
}

.ph .ph-icon { font-family: var(--display); font-size: 19px; color: var(--orange-soft); }
.ph.on-paper .ph-icon { color: var(--orange); }

/* community ticker */

.ticker {
  margin-top: clamp(56px, 7vw, 90px);
  padding-top: 34px;
  border-top: 1px solid rgba(250, 244, 235, 0.14);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ticker-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: belt 44s linear infinite;
}

.ticker-track span {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--display);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 500;
  color: rgba(250, 244, 235, 0.75);
  white-space: nowrap;
}

.ticker-track span::after { content: "·"; color: var(--orange-soft); }

/* --------------------------------------------------- page hero */

.page-hero { padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 6vw, 64px); }

.page-hero .lede { margin-top: 26px; }

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}

.page-hero-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-photo);
  box-shadow: var(--shadow-lift);
}

/* ---------------------------------------------------- CTA band */

.cta-band { background: var(--paper-deep); }

.cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.62fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.cta-inner .lede { margin: 22px 0 36px; }

.cta-inner img {
  width: 100%;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
  border-radius: 200px 200px var(--r-photo) var(--r-photo);
  box-shadow: var(--shadow-lift);
}

.cta-note { margin-top: 18px; font-size: 13px; color: var(--muted); }

/* --------------------------------------------- apply / typeform embed */
/* A clean bottom section: short copy on the left, the embedded
   Typeform application form on the right in a white card that matches
   the rest of the system (cream paper, forest ink, soft shadow). */

.apply {
  background: var(--paper-warm);
}

.apply-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.apply-copy .lede { margin: 22px 0 32px; }

.apply-meta { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.apply-meta li {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 14.5px;
  color: var(--muted);
}
.apply-meta li b { color: var(--ink); font-weight: 600; }
.apply-meta li a { color: var(--orange); border-bottom: 1px solid var(--orange-soft); }

.tf-card {
  background: #ffffff;
  border: 1px solid var(--cream-line-soft);
  border-radius: var(--r);
  box-shadow: var(--shadow-lift);
  padding: clamp(10px, 1.4vw, 18px);
}

/* the Typeform SDK renders an iframe inside [data-tf-widget]; make it
   fill the card and round its corners to sit inside the chrome */
.tf-card [data-tf-widget],
.tf-card iframe {
  width: 100% !important;
  border: 0;
  display: block;
  border-radius: calc(var(--r) - 6px);
  min-height: 680px;
}

/* ------------------------------------------------------ footer */

.site-foot {
  background: var(--forest-deep);
  color: var(--muted-on-dark);
  padding: clamp(44px, 5.5vw, 70px) 0 0;
}

.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 70px);
  padding-bottom: clamp(34px, 4vw, 54px);
}

.foot-mark { width: 44px; height: auto; margin: 0 0 14px; }

.foot-brand p { font-size: 14.5px; max-width: 24em; line-height: 1.65; }

.foot-brand .brand-name { color: var(--paper); font-size: 25px; }

.foot-col h4 {
  margin: 0 0 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250, 244, 235, 0.5);
}

.foot-col a {
  display: block;
  padding: 6px 0;
  font-size: 14.5px;
  color: rgba(250, 244, 235, 0.82);
  transition: color 0.2s ease, transform 0.2s ease;
}

.foot-col a:hover { color: var(--orange-soft); transform: translateX(3px); }

/* the giant ghost wordmark — a desktop-only editorial flourish. On
   mobile it would clip mid-character, so it is hidden there rather
   than left to overflow. */
.foot-word {
  overflow: hidden;
}

.foot-word span {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(56px, 11vw, 160px);
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-align: center;
  color: rgba(250, 244, 235, 0.1);
  transform: translateY(12%);
  white-space: nowrap;
}

.foot-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 22px 0 26px;
  font-size: 12px;
  color: rgba(250, 244, 235, 0.42);
}

/* designer credit logo, bottom-right */
.foot-credit { display: inline-flex; line-height: 0; }
.foot-credit img { height: 30px; width: auto; display: block; border-radius: 4px; }

/* ------------------------------------------------- grid helpers */

.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* courses page: four programme cards in a 2x2 grid */
.courses-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
}

.panel {
  padding: clamp(28px, 4vw, 44px);
  background: var(--paper-warm);
  border: 1px solid var(--cream-line-soft);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.panel:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.panel h3 {
  margin: 18px 0 14px;
  font-family: var(--display);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.panel > p { margin: 0 0 8px; font-size: 15px; color: var(--muted); }

.pill {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 100px;
  background: rgba(125, 143, 120, 0.14);
  color: var(--forest);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pill.warm { background: rgba(217, 109, 43, 0.13); color: #a04d15; }

.tick-list { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 0; }

.tick-list li {
  display: flex;
  gap: 13px;
  padding: 13px 0;
  border-top: 1px solid var(--cream-line-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

.tick-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--orange);
}

/* mentor / person cards */

.person-card { overflow: hidden; padding: 0; }

.person-card img { width: 100%; aspect-ratio: 4 / 3.6; object-fit: cover; object-position: center 28%; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }

.person-card:hover img { transform: scale(1.04); }

.person-card .p-body { padding: 24px 28px 30px; }

/* number steps */

.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.step {
  counter-increment: step;
  padding: 34px 32px 36px;
  background: var(--paper-warm);
  border: 1px solid var(--cream-line-soft);
  border-radius: var(--r);
  position: relative;
}

.step::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--display);
  font-size: 44px;
  font-weight: 400;
  color: var(--orange);
  line-height: 1;
  margin-bottom: 22px;
}

.step h3 { margin: 0 0 12px; font-family: var(--display); font-size: 25px; font-weight: 600; letter-spacing: -0.02em; }

.step p { margin: 0; font-size: 14.5px; color: var(--muted); }

/* discipline list rows */

.disc-rows { border-top: 1px solid var(--cream-line); }

.disc {
  display: grid;
  grid-template-columns: 84px minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: baseline;
  padding: 30px 0;
  border-bottom: 1px solid var(--cream-line);
  transition: background 0.25s ease;
}

.disc:hover { background: rgba(253, 249, 243, 0.9); }

.disc .disc-num { font-family: var(--display); font-size: 17px; color: var(--orange); }

.disc h3 { margin: 0; font-family: var(--display); font-size: clamp(22px, 2.3vw, 28px); font-weight: 500; letter-spacing: -0.02em; }

.disc p { margin: 0; font-size: 15px; color: var(--muted); max-width: 34em; }

/* ------------------------------------------------- motion */

/* One orchestrated moment: the homepage hero loads with a gentle,
   staggered entrance. Nothing else animates on scroll — opacity stays
   at 1 everywhere else, which is itself a premium signal. The .rv
   class is kept on the markup for free use later but is a no-op
   outside the hero. */

.hero .rv {
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-anim .hero .rv { opacity: 0; transform: translateY(22px); }
.js-anim .hero .rv.in { opacity: 1; transform: none; filter: none; }
.js-anim .hero .rv-blur { transform: none; filter: blur(8px); }

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .ticker-track { animation: none; }
  .hero .rv { transition: none; }
  .js-anim .hero .rv,
  .js-anim .hero .rv-blur { opacity: 1; transform: none; filter: none; }
  .site-head, .nav { transition: none; }
}

/* -------------------------------------------------- responsive */

/* Mid-size: dropdowns already shrink via min(). Collapse the
   multi-column layouts at 960 — desktop is the source of truth and
   mobile matches it below that line. */

@media (max-width: 1080px) {
  .row-float { right: 6px; }
}

@media (max-width: 960px) {
  .nav { grid-template-columns: auto 1fr; min-height: 68px; }

  /* full-screen drawer — covers the viewport below the header,
     scrolls its own content, and ends in the Apply CTA so the menu
     reads as complete, not cut off. */
  .menu {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 32px;
    background: var(--paper);
    overflow-y: auto;
  }

  body.nav-open .menu { display: flex; }

  .menu-item { border-bottom: 1px solid var(--cream-line-soft); }

  .menu-link, .menu-btn {
    width: 100%;
    justify-content: space-between;
    padding: 18px 4px;
    font-size: 18px;
    border-radius: 0;
  }

  .menu-link:hover, .menu-btn:hover { background: none; }

  .drop, .drop.cols {
    position: static;
    transform: none;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    display: none;
    border: 0;
    box-shadow: none;
    background: none;
    padding: 0 0 14px;
    grid-template-columns: 1fr;
  }

  /* override the desktop centered-transform at higher specificity so the
     submenu doesn't get shifted 50% off the left edge when open. Only the
     .open toggle controls display here — :hover would stick on touch and
     keep submenus open after closing, so it is left out of display. */
  .menu-item.open .drop,
  .menu-item.open .drop.cols {
    display: grid;
    transform: none;
  }

  .drop a {
    padding: 14px 4px 14px 18px;
    border-radius: 0;
    border-left: 1px solid var(--cream-line);
  }
  .drop a:hover { background: none; }

  /* the Apply CTA inside the drawer — desktop hides it (the bar CTA
     is in .nav-cta); only the mobile drawer shows it */
  .menu-cta { display: none; }
  .menu .menu-cta { display: block; margin-top: 28px; }
  .menu .menu-cta .btn { width: 100%; justify-content: center; }

  /* hide the desktop Apply in the bar; it lives in the drawer now */
  .nav-cta .btn { display: none; }
  .mob-toggle { display: flex; }

  /* while the drawer is open, force a solid full-width header bar so the
     page never shows through the top — even if a stray scroll re-applies
     .scrolled (iOS touch-scrolls behind the overlay despite html
     overflow:hidden). Reverts the floating pill to a flush bar. */
  body.nav-open .site-head,
  body.nav-open .site-head.scrolled { background: rgba(250, 244, 235, 1); }
  body.nav-open .site-head.scrolled .nav {
    margin-top: 0;
    padding: 0;
    min-height: 68px;
    width: auto;
    background: rgba(255, 253, 250, 0);
    border-color: rgba(209, 196, 178, 0);
    box-shadow: none;
  }

  .hero-grid, .trust-cols, .comm-grid, .page-hero-grid, .cta-inner,
  .apply-inner { grid-template-columns: 1fr; }

  .hero-visual { max-width: 460px; }
  .score-block { position: static; }

  .row-ed, .row-ed.flip { grid-template-columns: 1fr; gap: 34px; }
  .row-ed.flip .row-media { order: 0; }

  .steps, .cards-3 { grid-template-columns: 1fr 1fr; }

  .stats-band { grid-template-columns: 1fr 1fr; border-top: 0; }
  .stat { border-left: 0; border-top: 1px solid var(--cream-line); padding-left: 0; }

  .foot-top { grid-template-columns: 1fr 1fr; }

  .disc { grid-template-columns: 52px 1fr; }
  .disc p { grid-column: 2; }

  /* kill the offset quote row in the tablet band — it pushed cards
     off the right edge between 641–960px. */
  .review-flow .row.offset { transform: none; }

  /* the ghost wordmark is desktop ornament only */
  .foot-word { display: none; }

  .cta-inner img { max-width: 360px; }
  .apply-meta li { grid-template-columns: 116px 1fr; }
  .tf-card [data-tf-widget], .tf-card iframe { min-height: 760px; }
}

@media (max-width: 640px) {
  body { font-size: 15.5px; }

  .d-xl { font-size: clamp(38px, 11vw, 48px); }
  .d-lg { font-size: clamp(30px, 9vw, 38px); }

  .review-flow .row, .cards-2, .cards-3, .steps { grid-template-columns: 1fr; }
  .courses-grid { grid-template-columns: 1fr; }

  .stats-band { grid-template-columns: 1fr; }
  .stat { border-top: 1px solid var(--cream-line); padding: 26px 0 6px; }
  .stat:first-child { padding-top: 6px; }

  .comm-collage { grid-template-columns: 1fr; }
  .comm-collage .span-2 { grid-row: auto; }

  .cta-inner img { max-width: 280px; }

  .foot-top { grid-template-columns: 1fr; }

  .sect-head.split { flex-direction: column; align-items: flex-start; }

  /* disciplines stack to a single column on phones — the 52px+1fr
     two-column read is too cramped below 640. */
  .disc { grid-template-columns: 1fr; gap: 6px; }
  .disc .disc-num { margin-bottom: 4px; }
  .disc p { grid-column: 1; }

  .hero-actions { gap: 18px; }

  /* Trustpilot header collapses to a stacked block on phones */
  .tp-head { gap: 12px 18px; margin-bottom: 36px; }
  .tp-head .arrow-link { margin-left: 0; }
  .tp-card { flex: 0 0 300px; }
}

/* keep long words/URLs from blowing out the column on small screens */
blockquote, .lede, .stat > span, .comm-points li { overflow-wrap: break-word; word-break: break-word; }

/* ----------------------------------------------------------- new components
   Added for the programmes + how-it-works rebuild:
   - small / ghost buttons (course-card CTAs)
   - wide (feature) course card + 4-up coming-next grid
   - 12-stage horizontal zigzag roadmap with a Sales/AI switcher
   - learning-support grid, credit / placement flow
   -------------------------------------------------------------- */

/* small + ghost button variants for in-card secondary CTAs */
.btn.sm { padding: 10px 20px; font-size: 13.5px; }

.btn.ghost {
  background: transparent;
  color: var(--forest);
  border: 1px solid var(--forest);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s ease, color 0.3s ease,
              box-shadow 0.3s ease, border-color 0.3s ease;
}
.btn.ghost:hover {
  background: var(--forest);
  color: var(--paper);
  border-color: var(--forest);
  box-shadow: 0 14px 30px -14px rgba(26, 39, 33, 0.45);
}

/* a card that holds a CTA needs breathing room above the button */
.panel .btn { margin-top: 26px; }

/* cards without a pill: the heading sits flush at the top */
.panel > h3:first-child { margin-top: 0; }

/* 4-up grid for the "coming next" pathways */
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* wide feature course card (AI programme) — spans both columns of .cards-2 */
.panel.wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.panel.wide .wide-main h3 { margin-top: 0; }
.panel.wide .wide-main .btn { margin-top: 22px; }
.panel.wide .wide-body p { margin: 0 0 8px; }

/* ------------------------------------------------ 12-stage roadmap */

.roadmap-head-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* programme switcher — a sliding-pill toggle */
.prog-switch {
  position: relative;
  display: inline-flex;
  padding: 5px;
  background: var(--paper);
  border: 1px solid var(--cream-line);
  border-radius: 100px;
}
.prog-tab {
  position: relative;
  z-index: 1;
  padding: 10px 22px;
  border: 0;
  background: none;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.35s ease;
}
.prog-tab.active { color: #fff; }
.prog-switch-thumb {
  position: absolute;
  z-index: 0;
  top: 5px;
  left: 0;
  height: calc(100% - 10px);
  border-radius: 100px;
  background: var(--forest);
  /* default sits under the first tab; JS measures + refines on load/resize */
  width: 144px;
  transform: translateX(5px);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* panels — only the active one is shown; entrance animates on activate */
.roadmap { display: none; }
.roadmap.active { display: block; animation: rm-in 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.roadmap.rm-leave { animation: rm-out 0.26s ease forwards; }

@keyframes rm-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rm-out { to { opacity: 0; transform: translateY(-10px); } }

/* 12 stages as an alternating vertical timeline — a centre spine down
   each column with nodes; cards alternate left/right of the spine and
   step down a row, so stage 2 sits a little lower than stage 1 (its own
   row, on the opposite side) — a proper staggered timeline. Tighter
   within-pair spacing groups them as (1,2) / (3,4) / (5,6). Stage 12
   spans full width as the graduation finale. Small screens collapse to
   a single left-spine column. */
.vt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.vt-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
/* the spine — centred down the single column */
.vt-rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 2px;
  transform: translateX(-1px);
  background: var(--cream-line);
}

.vt-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  margin-top: 22px;
}
.vt-stage:first-child { margin-top: 0; }

/* odd stages land left of the spine, even stages right of it */
.vt-stage:nth-child(odd) .vt-card { grid-column: 1; margin-right: 44px; text-align: right; }
.vt-stage:nth-child(even) .vt-card { grid-column: 2; margin-left: 44px; }

/* node centred on the spine */
.vt-node {
  position: absolute;
  left: 50%;
  top: 18px;
  width: 46px;
  height: 46px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--paper-warm);
  border: 2px solid var(--cream-line);
  box-shadow: 0 0 0 6px var(--paper-warm);
  color: var(--forest);
  display: grid;
  place-items: center;
  z-index: 2;
  transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.vt-node svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* :hover and .is-active (scroll-spy) share the same orange highlight. */
.vt-stage:hover .vt-node,
.vt-stage.is-active .vt-node { border-color: var(--orange); color: var(--orange); }

/* the graduation node is filled orange as the destination */
.vt-node--end { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 0 0 6px var(--paper-warm), 0 8px 20px -8px rgba(217, 109, 43, 0.6); }

/* the generic hover turns the icon orange, which vanishes against the orange
   fill of the graduation node. Keep its white icon and make it visibly pop
   instead — a bigger lift and a brighter orange glow ring. Applies to :hover
   and the scroll-spy .is-active state alike. */
.vt-stage:hover .vt-node--end,
.vt-stage.is-active .vt-node--end {
  color: #fff;
  transform: translateX(-50%) translateY(-10px);
  box-shadow: 0 0 0 6px var(--paper-warm), 0 0 0 2px var(--orange), 0 14px 28px -8px rgba(217, 109, 43, 0.75);
}

.vt-card {
  background: var(--paper);
  border: 1px solid var(--cream-line-soft);
  border-radius: var(--r);
  padding: 20px 24px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vt-stage:hover .vt-card,
.vt-stage.is-active .vt-card { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.stage-num {
  display: block;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}
.vt-card h3 {
  margin: 6px 0 8px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.vt-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* ------------------------------------------------ learning support */

.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.support {
  padding: 30px 28px;
  background: var(--paper);
  border: 1px solid var(--cream-line-soft);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.support:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.support-ic {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(217, 109, 43, 0.1);
  color: var(--orange);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.support-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.support h3 { margin: 0 0 8px; font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.support p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ----------------------------------------- credit system
   Simple, clean: four green statement cards on the dark band, each
   pairing a numbered marker with a short statement of how credits
   work. A small image sits beside the section header. Distinct from
   the journey (vertical timeline) and placement (photo cards). */
.credit-sect .sect-head { gap: clamp(32px, 4vw, 56px); }
.credit-sect .sect-head .cred-head-img {
  flex: 0 0 auto;
  width: clamp(280px, 32vw, 420px);
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  border-radius: var(--r);
  box-shadow: var(--shadow-lift);
}

.cred-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.cred-item {
  background: var(--forest);
  border: 1px solid rgba(125, 143, 120, 0.3);
  color: var(--paper);
  border-radius: var(--r);
  padding: 26px 24px 24px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.cred-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(195, 211, 144, 0.6); }
.cred-item b {
  display: block;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  color: var(--orange-soft);
  line-height: 1;
  margin-bottom: 14px;
}
.cred-item h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.cred-item p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted-on-dark); }

/* ------------------------------------------- placement image cards
   Four photo cards in a row, each with a step badge over the image
   and copy below — a tangible "pathway" read, distinct from the
   credit pipeline's abstract progress bar. */

.place-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.place-card {
  background: var(--paper-warm);
  border: 1px solid rgba(250, 244, 235, 0.16);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.place-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }

.place-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.place-media img,
.place-media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.place-card:hover .place-media img,
.place-card:hover .place-media svg { transform: scale(1.05); }

.place-body { padding: 22px 22px 26px; }
.place-body h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.place-body p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }

/* -------------------------------------------------- parents testimonials
   "Letters from home." Each response is an editorial note on warm paper:
   a decorative quote glyph, the parent's avatar and name with their star
   rating, the single observation that mattered most set as an italic pull
   quote, then the rest as a clean labelled footer. Phones get a single
   column; tablets/touch get a 2-up grid; fine-pointer wide screens get
   the fanned card deck (see the deck block below). */
.parents-sect { background: var(--paper-warm); }

/* shared star row — same orange star used across the site */
.parent-stars { display: inline-flex; gap: 3px; color: var(--orange); }
.parent-stars svg { width: 13px; height: 13px; fill: currentColor; }

/* base: a calm vertical column, centred */
.pr-stack {
  display: grid;
  gap: 20px;
  max-width: 620px;
  margin: 0 auto;
}

.pr-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--cream-line-soft);
  border-radius: 18px;
  padding: 30px 30px 28px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s ease;
}
.pr-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }

/* decorative opening quote, parked top-right and faded out. z-index:0
   pins it behind the head/pull content (lifted to z-index:1 below) */
.pr-mark {
  position: absolute;
  top: -22px;
  right: 22px;
  z-index: 0;
  font-family: var(--display);
  font-size: 128px;
  line-height: 1;
  font-weight: 700;
  color: var(--orange);
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
}

/* head: avatar + (name above stars) */
.pr-head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
.pr-avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--cream-line);
}
/* initials avatar for parents without a photo — keeps the deck balanced */
.pr-avatar--initials {
  display: grid;
  place-items: center;
  background: var(--forest);
  color: var(--paper);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.pr-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pr-head h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}

/* the observation that mattered most — set as the pull quote */
.pr-pull {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--display);
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.004em;
  color: var(--ink);
}

/* footer: the remaining answers as a quiet labelled list */
.pr-meta {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--cream-line-soft);
  display: grid;
  gap: 15px;
}
.pr-meta > div { display: grid; gap: 5px; }
.pr-meta dt {
  margin: 0;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}
.pr-meta dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---- touch / tablet fallback: 2-up grid --------------------------------
   The fanned deck needs a fine pointer — touch has no reliable hover, so
   a pile those devices could never spread would just hide cards. Tablets
   and touch laptops (and narrow desktop windows) get a plain 2-up grid
   instead. */
@media (min-width: 640px) {
  .pr-stack {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    max-width: 880px;
  }
}

/* ---- desktop: fanned card deck -----------------------------------------
   Fine-pointer wide screens only (overrides the 2-up grid above). The
   four cards overlap into a tidy pile via negative margins. On hover the
   pack splits: cards before the hovered one slide left, cards after it
   slide right, the hovered card lifts to the front. De-hover eases them
   all back together on one cubic-bezier.
   z-index is deliberately NOT transitioned — it snaps instantly. A
   de-hovering card drops back to DOM-order stacking (under the card to
   its right) the moment the cursor leaves, so it tucks into the pile
   with the right card already on top: no delayed flip where it floats
   above the right card for a beat then pops under. */
@media (hover: hover) and (pointer: fine) and (min-width: 960px) {
  .pr-stack {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    max-width: none;
    margin: 0;
    height: clamp(420px, 46vw, 480px);
    --spread: 150px;
    --overlap: 150px;
  }

  .pr-card {
    position: relative;
    flex: 0 0 auto;
    width: clamp(300px, 26vw, 380px);
    height: 100%;
    margin-left: calc(-1 * var(--overlap));
    /* Each card is its own stacking context. Without this, the .pr-head /
       .pr-pull (position:relative; z-index:1, there to sit above the quote
       glyph) would paint above auto-positioned siblings — so a card's text
       would leak on top of the card to its right. isolate keeps a card's
       whole context behind the next card's context, so the next card's
       background cleanly covers it. z-index:100 on :hover still lifts the
       hovered card to the front. */
    isolation: isolate;
    transition:
      transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* first card starts the row, no pull-back */
  .pr-card:first-child { margin-left: 0; }

  /* hovered card: lift and come straight to the front (z snaps, no delay) */
  .pr-card:hover {
    transform: translateY(-18px);
    z-index: 100;
    box-shadow: var(--shadow-lift);
  }

  /* cards before the hovered one slide left → opens a gap on its left */
  .pr-card:has(~ .pr-card:hover) {
    transform: translateX(calc(-1 * var(--spread)));
  }
  /* cards after the hovered one slide right → opens a gap on its right */
  .pr-card:hover ~ .pr-card {
    transform: translateX(var(--spread));
  }
}

/* ----------------------------------------------- new components responsive */

@media (max-width: 960px) {
  .cards-4 { grid-template-columns: 1fr 1fr; }
  .support-grid { grid-template-columns: 1fr 1fr; }
  .panel.wide { grid-template-columns: 1fr; gap: 24px; }

  /* journey cards tighten on smaller screens */
  .vt-card { padding: 16px 18px; }
  .vt-card h3 { font-size: 17px; }
  .vt-card p { font-size: 13.5px; }
  .stage-num { font-size: 12.5px; }
  .vt-node { width: 40px; height: 40px; top: 14px; }
  .vt-node svg { width: 19px; height: 19px; }
  .vt-stage { margin-top: 18px; }
  .vt-stage:nth-child(odd) .vt-card { margin-right: 32px; }
  .vt-stage:nth-child(even) .vt-card { margin-left: 32px; }

  /* placement + credit cards drop to 2×2 */
  .place-grid { grid-template-columns: 1fr 1fr; }
  .cred-grid { grid-template-columns: 1fr 1fr; }

  /* credit section header stacks so the larger image doesn't squeeze the copy */
  .credit-sect .sect-head { flex-direction: column; align-items: flex-start; }
  .credit-sect .sect-head .cred-head-img { width: clamp(240px, 40vw, 360px); }
}

@media (max-width: 640px) {
  .cards-4 { grid-template-columns: 1fr; }
  .support-grid { grid-template-columns: 1fr; }

  /* journey: collapse the centered alternating spine to a single left-spine column */
  .vt-rail::before { left: 20px; transform: none; }
  .vt-stage {
    grid-template-columns: 1fr;
    padding-left: 52px;
    margin-top: 16px;
  }
  .vt-stage:nth-child(odd) .vt-card,
  .vt-stage:nth-child(even) .vt-card { grid-column: 1; margin: 0; text-align: left; }
  .vt-node { left: 20px; top: 16px; width: 38px; height: 38px; }
  .vt-node svg { width: 18px; height: 18px; }
  .vt-card { padding: 14px 16px; }
  .vt-card h3 { font-size: 16px; }
  .vt-card p { font-size: 13px; line-height: 1.5; }

  .prog-tab { padding: 9px 16px; font-size: 13px; }
  .roadmap-head-tools { gap: 12px; }

  .place-grid { grid-template-columns: 1fr; }
  .cred-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Parents section · Google Forms "Responses · Individual" showcase
   Browser-framed Google Forms responses page, but organised the way a
   visitor actually wants it: one card per parent, with their child's
   name + photo and that parent's three answers. Distinctively Google
   Forms (green response count, the Summary/Question/Individual pills
   with Individual active, Google palette + system fonts, the Google
   "G" brand strip) but per-person instead of per-question, so a site
   visitor reads who said what. Scoped under .gf-*.
   --------------------------------------------------------------- */

.gf {
  --gf-bg: #f0f4f9;
  --gf-line: #dadce0;
  --gf-line-soft: #e8eaed;
  --gf-text: #202124;
  --gf-muted: #5f6368;
  --gf-accent: #673ab7;
  --gf-green: #188038;
  --gf-app: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  max-width: 1080px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  font-family: var(--gf-app);
  font-size: 14px;
  color: var(--gf-text);
  background: var(--gf-bg);
  border: 1px solid var(--gf-line);
  box-shadow: 0 1px 1px rgba(60,64,67,.08), 0 18px 50px -16px rgba(34,42,34,.30);
}

/* ---- forms app ----------------------------------------------- */
.gf-app { background: var(--gf-bg); }

.gf-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 20px;
  background: #fff;
  border-bottom: 1px solid var(--gf-line);
}
.gf-brand-logo { display: inline-flex; }
.gf-google { width: 22px; height: 22px; }
.gf-brand-name {
  font-size: 17px; font-weight: 500; color: var(--gf-text);
  letter-spacing: -0.005em;
}

/* ---- individual response cards -------------------------------- */
.gf-body {
  padding: 14px 20px 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gf-resp {
  background: #fff;
  border: 1px solid var(--gf-line);
  border-radius: 12px;
  padding: 16px 18px;
  min-width: 0;
}

.gf-resp-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--gf-line-soft);
}
.gf-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; background: #f1f3f4;
  border: 1px solid var(--gf-line-soft);
}
.gf-who { min-width: 0; }
.gf-who h3 {
  margin: 0;
  font-size: 15px; font-weight: 500; line-height: 1.2;
  color: var(--gf-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gf-sub { font-size: 12px; color: var(--gf-muted); }

.gf-resp-body { margin: 0; display: grid; gap: 12px; }
.gf-resp-body > div { min-width: 0; }
.gf-resp-body dt {
  font-size: 13px; font-weight: 500; line-height: 1.45;
  color: var(--gf-text);
  margin-bottom: 4px;
}
.gf-resp-body dd {
  margin: 0;
  font-size: 13px; line-height: 1.5; color: var(--gf-muted);
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; overflow: hidden;
}
.gf-inline { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gf-inline dt { margin-bottom: 0; flex: 1 1 100%; }
.gf-pos-ans {
  -webkit-line-clamp: unset; display: inline;
  font-size: 13.5px; font-weight: 600; color: var(--gf-green);
}

/* ---- responsive ----------------------------------------------- */
@media (max-width: 760px) {
  .gf-body { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .gf-body { padding: 12px 14px 18px; }
  .gf-resp { padding: 14px 14px; }
  .gf-brand { padding: 12px 14px; }
}

@media (prefers-reduced-motion: no-preference) {
  .gf.rv { transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
}