/* ============================================================================
   AdmiTree v9 design layer
   ----------------------------------------------------------------------------
   Loads AFTER css/styles.css on every public page. It re-points the old tokens
   and restyles the shared chrome (header, buttons, forms, cards, interior page
   heroes, footer) so every page picks up the new language without its markup
   changing. To revert, remove the <link> to this file in includes/header.php.

   Light theme: cool paper ground, white and pale-sky surfaces, navy only as
   ink (text, primary buttons). Leaf green (the logo's own green) marks growth
   and the next action. No full navy backgrounds anywhere.
   ========================================================================== */

/* Metric-matched stand-in for Geist while the web font loads. Arial scaled to
   Geist's average glyph width and line metrics (computed from the Geist v5
   file), so text does not re-wrap and shift when Geist arrives. */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 103.11%;
  ascent-override: 97.47%;
  descent-override: 28.61%;
  line-gap-override: 0%;
}

:root {
  /* brand, pulled from the logo: navy trunk + leaf green */
  --night:      #081226;
  --night-2:    #0d1b36;
  --night-3:    #142648;
  --ink:        #0b1530;
  --leaf:       #7bd23c;
  --leaf-deep:  #3f8f14;
  --leaf-ink:   #0b1a06;
  --paper:      #f4f6fa;   /* cool off-white, chroma toward navy, not warmth */
  --sky:        #e6eefc;   /* the tinted panel colour that replaced navy panels */
  --sky-2:      #d6e3fb;
  --mint:       #def5ea;
  --leaf-soft:  #e6f6d8;
  --muted:      #4f5b72;
  --line:       #dde3ec;
  --soft:       #eaeef4;

  /* re-point the legacy tokens so every older rule follows the new brand */
  --navy:       var(--ink);
  --blue:       #2451c7;
  --blue-dark:  #1a3e9e;
  --green:      var(--leaf-deep);
  --green-dark: #2f6e0e;
  --leaf-text:  #2f6e0e;   /* leaf at small-text strength: 5.8:1 on paper (leaf-deep is 3.8:1, large text and icons only) */
  --safety: #2f9e44;
  --match:  #d9a400;
  --reach:  #e0533f;

  --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* one shape system: pill for anything you press, 22px for surfaces, 12px fields */
  --radius-sm: 10px;
  --radius: 12px;
  --radius-lg: 22px;
  --r-surface: 22px;

  --shadow-sm: 0 1px 2px hsl(222 60% 12% / .06), 0 2px 6px -1px hsl(222 60% 12% / .06);
  --shadow-md: 0 2px 4px hsl(222 60% 12% / .05), 0 10px 24px -6px hsl(222 60% 12% / .12);
  --shadow-lg: 0 4px 8px hsl(222 60% 12% / .05), 0 22px 48px -12px hsl(222 60% 12% / .22);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io:  cubic-bezier(0.77, 0, 0.175, 1);
  --ring: 0 0 0 3px color-mix(in oklab, var(--leaf) 55%, transparent);

  --header-h: 64px;
}

/* ------------------------------------------------------------- base ---- */
body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  letter-spacing: -0.006em;
  font-synthesis-weight: none;
}
p { color: var(--muted); }
::selection { background: var(--leaf); color: var(--leaf-ink); }
:root { accent-color: var(--leaf-deep); caret-color: var(--leaf-deep); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--leaf-deep);
  outline-offset: 3px;
}

/* headline emphasis stays in Geist: same weight, carried by colour, never italic serif */
h1 em, h2 em, .h-h2 em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--leaf-deep);
}
h1, h2, h3 { font-weight: 600; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5.2rem); line-height: .98; }
h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1.02; }
h3 { font-size: clamp(1.12rem, 1rem + .4vw, 1.35rem); letter-spacing: -0.02em; line-height: 1.2; }
.lead { text-wrap: pretty; color: var(--muted); }

/* the eyebrow survives on interior pages, but quiet: no rule, no shouting */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--leaf-text);
}
.eyebrow::before { display: none !important; }

.section.alt { background: var(--soft); }
.container { width: min(1240px, calc(100% - 40px)); }

/* (main.page used to fade in on its own as well. Stacked on the cross-page view
   transition below it gave every navigation a double fade, a visible blink.) */

/* the old gradient progress bar is replaced by a single leaf hairline */
#scrollProgress { height: 2px; background: var(--leaf); box-shadow: none; z-index: 70; }

/* ------------------------------------------------------------ header ---- */
/* A floating pill that sits off the edges. It is fixed, so pages reserve its
   height through body padding rather than letting it cover the first line. */
body { padding-top: calc(var(--header-h) + 20px); }
body.v9-home { padding-top: 0; }

.site-header {
  position: fixed;
  top: 12px;
  left: 50%;
  translate: -50% 0;
  width: min(1240px, calc(100% - 24px));
  height: var(--header-h);
  z-index: 60;
  padding: 0 8px 0 10px;
  border: 1px solid color-mix(in oklab, var(--ink) 9%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, #fff 78%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 30px -18px hsl(222 60% 12% / .35);
  transition: transform .5s var(--ease-out), background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-header::after { display: none; }
/* Once the page has moved, the pill is near-opaque and drops its backdrop blur. Blurring
   whatever slides underneath (animated tiles, photos) on every frame, and again each
   time the pill slides back in on a scroll up, was the costliest paint on the page in
   Safari; at 96% white the blur was not visible anyway. */
.site-header.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in oklab, #fff 96%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 16px 40px -20px hsl(222 60% 12% / .45); }
/* hides on the way down, returns on the way up (class set in js/v9.js) */
.site-header.is-tucked { transform: translateY(calc(-100% - 20px)); }

.brand {
  display: inline-flex; align-items: center;
  height: 46px; padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--ink) 8%, transparent);
}
.brand img, .site-header.is-scrolled .brand img {
  width: 118px; height: 40px; object-fit: contain; filter: none;
}

.main-nav { gap: 2px; }
.main-nav a {
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: color-mix(in oklab, var(--ink) 78%, transparent);
  background: transparent;
  transition: color .2s ease, background-color .2s ease;
}
.main-nav a::after { display: none !important; }
.main-nav a:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); }
.main-nav a.active { color: var(--ink); background: color-mix(in oklab, var(--ink) 8%, transparent); }
.main-nav .nav-cta, .main-nav .nav-cta:hover {
  margin-left: 6px;
  padding: 11px 18px;
  color: var(--leaf-ink);
  background: var(--leaf);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
  filter: none;
}
.main-nav .nav-cta:hover { background: #8fe052; transform: none; }
.main-nav .nav-cta::after { display: none; }

.nav-toggle {
  width: 46px; height: 46px; border-radius: 999px;
  border: 0; background: var(--ink);
}
.nav-toggle span { width: 18px; height: 1.5px; margin: 4px auto; background: #fff; transition: transform .35s var(--ease-out), opacity .2s; }
.nav-toggle.active span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 980px) {
  .main-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    padding: 10px;
    border-radius: var(--r-surface);
    border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
    background: #fff;
    box-shadow: var(--shadow-lg);
    transform-origin: top center;
  }
  .main-nav.open { display: flex; animation: v9-menu .45s var(--ease-out) both; }
  .main-nav a { padding: 14px 16px; font-size: 17px; }
  .main-nav .nav-cta { margin: 6px 0 0; text-align: center; justify-content: center; }
}
@keyframes v9-menu { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------- buttons ---- */
.btn {
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  box-shadow: none;
  transition: transform .18s var(--ease-out), background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn.primary, .btn.btn-primary {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px -10px hsl(222 60% 12% / .6);
}
.btn.primary:hover, .btn.btn-primary:hover { background: var(--night-3); filter: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 26px -12px hsl(222 60% 12% / .7); }
.btn.primary::after, .nav-cta::after { display: none; }
.btn.secondary {
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
}
.btn.secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn.leaf { color: var(--leaf-ink); background: var(--leaf); border-color: var(--leaf); }
.btn.leaf:hover { background: #8fe052; }
.btn.small { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn.ghost { border-radius: 999px; }

/* a submitting button (js/main.js) keeps its size and shows a spinner */
.btn.is-submitting { position: relative; color: transparent !important; opacity: .85; }
.btn.is-submitting > * { visibility: hidden; }
.btn.is-submitting::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-color: #fff #fff transparent transparent;
  animation: v9-spin .7s linear infinite;
}
.btn.secondary.is-submitting::before, .btn.v9-ghost.is-submitting::before { border-color: var(--ink) var(--ink) transparent transparent; }
.btn.leaf.is-submitting::before { border-color: var(--leaf-ink) var(--leaf-ink) transparent transparent; }
@keyframes v9-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .btn.is-submitting::before { animation-duration: 1.6s; } }

/* arrow that slides on hover, for any button carrying .v9-arrow */
.v9-arrow { display: inline-block; transition: transform .35s var(--ease-out); }
.btn:hover .v9-arrow, a:hover > .v9-arrow { transform: translateX(4px); }

/* ------------------------------------------------------------ fields ---- */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="search"], input[type="date"], select, textarea {
  border-radius: var(--radius) !important;
  border-color: var(--line);
  font-family: var(--font-sans);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
/* one focus indicator on fields: an ink border and a faint halo, no green ring and no outline on top
   (the stacked border + ring + offset outline reached into the label above) */
input:focus, select:focus, textarea:focus { border-color: var(--ink) !important; box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink) 12%, transparent) !important; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
::placeholder { color: #5f6a80; }

/* ------------------------------------------------------------- cards ---- */
.card, .service-card, .country-card, .college-card, .match-card, .stat-card, .auth-card,
.college-section, .showcase-card, .value-prop, .contact-card, .filters {
  border-radius: var(--r-surface) !important;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.badge { border-radius: 999px; font-weight: 600; }

/* ------------------------------------------------- page transitions ---- */
/* Cross-document view transitions: moving between pages slides and fades
   instead of flashing white. Browsers without support just navigate. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  /* short and exit-faster-than-enter: the old page gets out of the way quickly */
  ::view-transition-old(root) { animation: v9-vt-out .16s ease-in both; }
  ::view-transition-new(root) { animation: v9-vt-in .28s var(--ease-out) both; }
}
@keyframes v9-vt-out { to { opacity: 0; } }
@keyframes v9-vt-in  { from { opacity: 0; transform: translateY(8px); } }
.site-header { view-transition-name: site-header; }

/* Lenis smooth scrolling (js/v9.js) */
html.lenis, html.lenis body { height: auto; }
/* Lenis writes the scroll position itself on every frame. The "lenis-smooth" class is
   only present while a glide is running, so a rule keyed on it left the stylesheet's
   own `scroll-behavior: smooth` switched on the rest of the time, easing on top of easing. */
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ------------------------------------------------------------ reveal ---- */
/* Anything marked [data-v9-in] rises into place once, when it enters view.
   Visible by default: the hidden state only applies once JS has confirmed it
   can reveal it (html.v9-js), so nothing ships blank. */
html.v9-js [data-v9-in]:not(.is-in) { opacity: 0; transform: translate3d(0, 26px, 0); }
[data-v9-in] { transition: opacity .9s var(--ease-out) var(--d, 0s), transform 1s var(--ease-out) var(--d, 0s); }
html.v9-js [data-v9-stagger] > *:not(.is-in) { opacity: 0; transform: translate3d(0, 22px, 0) scale(.985); }
[data-v9-stagger] > * { transition: opacity .8s var(--ease-out) var(--d, 0s), transform .9s var(--ease-out) var(--d, 0s); }
@media (prefers-reduced-motion: reduce) {
  html.v9-js [data-v9-in]:not(.is-in), html.v9-js [data-v9-stagger] > *:not(.is-in) { opacity: 1; transform: none; }
}
/* includes/header.php sets v9-failsafe if the motion scripts never booted:
   nothing may stay hidden waiting for them. */
html.v9-failsafe [data-v9-in], html.v9-failsafe [data-v9-stagger] > *,
html.v9-failsafe .footer-wordmark { opacity: 1 !important; transform: none !important; }

/* ========================================================== graphics ==== */
/* The one illustration system (includes/v9-gfx.php). A tinted tile, a dot
   field, two rings that turn slowly in opposite directions, a soft blob, and
   one icon on a white disc. It replaced every stock photo on the site. */
.gfx {
  --g1: #eef3ff; --g2: #d9e5fc; --g-ink: #2451c7; --g-dot: rgba(36,81,199,.22);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  min-height: 180px;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 20% 0%, var(--g1), var(--g2));
}
.gfx--leaf   { --g1: #f0fae6; --g2: #d6efbf; --g-ink: #3f8f14; --g-dot: rgba(63,143,20,.22); }
.gfx--mint   { --g1: #ecfaf4; --g2: #cdeee0; --g-ink: #13875f; --g-dot: rgba(19,135,95,.2); }
.gfx--sun    { --g1: #fff6e2; --g2: #fde4b2; --g-ink: #b86e00; --g-dot: rgba(184,110,0,.2); }
.gfx--cobalt { --g1: #3e6ae0; --g2: #2451c7; --g-ink: #2451c7; --g-dot: rgba(255,255,255,.25); }
.gfx__dots {
  position: absolute; inset: -10%; z-index: -1; overflow: hidden;
  mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent 75%);
}
/* the dot field pans as a transform on an oversized layer (18px period, so
   180/90px loops cleanly) instead of animating background-position, which
   repainted every tile every frame in Safari */
.gfx__dots::before {
  content: ""; position: absolute; inset: -200px 0 0 -200px;
  background-image: radial-gradient(var(--g-dot) 1.2px, transparent 1.6px);
  background-size: 18px 18px;
  animation: gfx-pan 30s linear infinite;
}
.gfx__ring {
  position: absolute; z-index: -1;
  aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid color-mix(in oklab, var(--g-ink) 30%, transparent);
}
.gfx--cobalt .gfx__ring { border-color: rgba(255,255,255,.3); }
.gfx__ring--a { width: 78%; border-style: dashed; animation: gfx-spin 40s linear infinite; }
.gfx__ring--b { width: 52%; border-width: 1px; animation: gfx-spin 26s linear infinite reverse; }
.gfx__ring--a::after, .gfx__ring--b::after {
  content: ""; position: absolute; top: -5px; left: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--g-ink);
}
.gfx--cobalt .gfx__ring--a::after, .gfx--cobalt .gfx__ring--b::after { background: #7bd23c; }
.gfx__blob {
  position: absolute; z-index: -1; width: 60%; aspect-ratio: 1; right: -12%; bottom: -18%;
  border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%;
  background: color-mix(in oklab, var(--g-ink) 16%, transparent);
  animation: gfx-morph 14s ease-in-out infinite alternate;
}
.gfx__disc {
  display: grid; place-items: center;
  width: clamp(64px, 26%, 110px); aspect-ratio: 1;
  border-radius: 30%;
  background: #fff;
  color: var(--g-ink);
  font-size: clamp(24px, 3vw, 40px);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 40px -16px color-mix(in oklab, var(--g-ink) 60%, transparent);
  animation: gfx-float 7s ease-in-out infinite;
}
.gfx__cap {
  position: absolute; left: clamp(16px, 7%, 28px); bottom: clamp(14px, 6%, 24px); right: 16px;
  display: grid; gap: 2px;
  color: var(--ink);
}
.gfx--cobalt .gfx__cap { color: #fff; }
.gfx__cap b { font-size: clamp(1.15rem, .9rem + .9vw, 1.7rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.gfx__cap small { font-size: 13px; opacity: .75; }
@keyframes gfx-spin  { to { rotate: 360deg; } }
@keyframes gfx-pan   { to { transform: translate3d(180px, 90px, 0); } }
@keyframes gfx-float { 50% { transform: translateY(-8px) rotate(-3deg); } }
@keyframes gfx-morph { to { transform: translate(-10%, -8%) rotate(20deg) scale(1.06); } } /* transform only: border-radius morphing repainted the blob every frame */
@media (prefers-reduced-motion: reduce) {
  .gfx__dots::before, .gfx__ring, .gfx__blob, .gfx__disc { animation: none; }
}
/* A tile only animates while it is on screen (class set in js/v9.js). Off-screen tiles
   kept their five animated layers alive, which Safari still composites. */
html.v9-js .gfx:not(.is-live) .gfx__dots::before, html.v9-js .gfx:not(.is-live) .gfx__ring,
html.v9-js .gfx:not(.is-live) .gfx__blob, html.v9-js .gfx:not(.is-live) .gfx__disc { animation-play-state: paused; }

/* --------------------------------------------------- interior heroes ---- */
/* Interior page heroes: a pale-sky rounded panel inset from the edges, with
   two slow drifting light pools. Ink text, no navy ground. */
.page-hero,
.page-hero:not(.search-hero),
.page-hero.search-hero,
.services-hero, .about-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(1240px, calc(100% - 24px));
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) 0 clamp(48px, 6vw, 80px);
  border: 1px solid color-mix(in oklab, var(--ink) 6%, transparent);
  border-radius: 28px;
  color: var(--ink);
  background: linear-gradient(160deg, #f7faff 0%, var(--sky) 55%, #e9f5df 100%);
}
.page-hero::before, .page-hero.search-hero::before {
  content: "";
  position: absolute; inset: -20%;
  z-index: -1;
  background:
    radial-gradient(26rem 18rem at 18% 26%, color-mix(in oklab, var(--leaf) 30%, transparent), transparent 70%),
    radial-gradient(30rem 22rem at 82% 70%, color-mix(in oklab, #6f9bff 34%, transparent), transparent 70%);
  mask-image: none; -webkit-mask-image: none;
  filter: blur(16px);
  animation: v9-drift 16s ease-in-out infinite alternate;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(11,21,48,.08) 1px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: linear-gradient(115deg, transparent 40%, #000 90%);
  -webkit-mask-image: linear-gradient(115deg, transparent 40%, #000 90%);
}
@keyframes v9-drift {
  0%   { transform: translate3d(-4%, -2%, 0) rotate(0deg); }
  100% { transform: translate3d(5%, 4%, 0) rotate(8deg); }
}
.page-hero h1, .page-hero h2, .page-hero h3 { color: var(--ink); }
.page-hero h1 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.6rem); max-width: 18ch; }
.page-hero .lead, .page-hero p { color: var(--muted); }
.page-hero .lead { max-width: 62ch; text-wrap: pretty; }
.two-col p { max-width: 65ch; }
.page-hero .eyebrow { color: var(--leaf-text); }
.search-hero-tags a, .search-hero-tags span {
  color: var(--ink) !important; background: rgba(255,255,255,.7) !important;
  border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent) !important;
}
.search-hero-tags a:hover { background: #fff !important; border-color: var(--ink) !important; }

/* Interior hero entrance: eyebrow, headline, lead and tags rise in a short
   stagger from the first frame. Pure CSS, so nothing waits on footer JS. */
@keyframes v9-hero-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .page-hero .eyebrow, .page-hero h1, .page-hero .lead,
  .page-hero .search-hero-tags, .page-hero .btn-row { animation: v9-hero-in .6s var(--ease-out) both; }
  .page-hero h1 { animation-delay: .06s; }
  .page-hero .lead { animation-delay: .14s; }
  .page-hero .search-hero-tags, .page-hero .btn-row { animation-delay: .2s; }
  /* held on the invisible first frame until the web font is in (header.php) */
  html:not(.v9-fonts) .page-hero .eyebrow, html:not(.v9-fonts) .page-hero h1, html:not(.v9-fonts) .page-hero .lead,
  html:not(.v9-fonts) .page-hero .search-hero-tags, html:not(.v9-fonts) .page-hero .btn-row { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero::before { animation: none; }
}
}

/* the about-page and services hero visuals are graphics now */
.about-collage { border-radius: 26px; overflow: hidden; min-height: 380px; position: relative; background: none !important; box-shadow: var(--shadow-md); }
.about-collage .gfx { min-height: 380px; }
.about-collage > div:not(.gfx) { display: none; }
.service-hero-panel { background: rgba(255,255,255,.75) !important; backdrop-filter: blur(12px); border-radius: 22px !important; border: 1px solid rgba(255,255,255,.9); }
.service-hero-panel div { background: #fff !important; border-radius: 14px !important; }
.image-panel { border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-md); min-height: 360px; }
.image-panel .gfx { min-height: 360px; }

/* retire the legacy photo backgrounds in css/styles.css */
.student-pulse, .services-hero, .about-hero, .search-hero, .impact-band, .cta-band { background-image: none; }

/* ---------------------------------------------------------- auth pages ---- */
/* The photo panel beside the login and signup forms is a graphic panel now. */
.auth-shell { border-radius: 28px; overflow: hidden; margin-inline: 12px; }
/* stacked (login, signup): the form comes first, the picture panel follows, so the real title is on the first screen */
@media (max-width: 992px) { .auth-shell .auth-form-wrap { order: -1; } }
.auth-art {
  border-radius: 24px; overflow: hidden;
  background: #2a2419 url(../assets/photos/study-desk.webp) center 35% / cover no-repeat !important;
  isolation: isolate;
}
.auth-art::after { display: none !important; }
.auth-art::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgb(10 12 18 / 0) 30%, rgb(10 12 18 / .78) 100%);
}
.auth-copy h1 { color: #fff !important; margin-top: 0; line-height: 1.02; }
/* the eyebrow sat flush on the headline, whose tall caps then rode up over it */
.auth-copy .eyebrow { display: block; margin-bottom: 14px; }
.auth-copy h1 em { color: var(--leaf); }
.auth-copy p { color: rgb(255 255 255 / .88) !important; }
.auth-art .eyebrow { color: var(--leaf); }
.auth-art .gfx { display: none; }
.track-ic { color: var(--leaf-deep); font-size: 22px !important; }
.track-card.selected .track-ic { color: var(--ink); }
@media (max-width: 980px) { .auth-art { min-height: 260px !important; } .auth-copy { padding: 28px 22px !important; } }
/* "Continue with Google" (includes/google_auth.php): Google's white button with the unmodified four-colour G. */
.btn-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 46px; padding: 10px 16px; box-sizing: border-box;
    background: #fff; color: #1f1f1f; border: 1px solid #c9d1de; border-radius: 10px; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none;
    transition: background .15s, box-shadow .15s, border-color .15s; }
.btn-google:hover { background: #f7f9fc; border-color: #aab6c8; box-shadow: 0 2px 8px rgb(16 43 97 / .08); color: #1f1f1f; text-decoration: none; }
.btn-google:focus-visible { outline: 3px solid rgb(36 81 199 / .35); outline-offset: 2px; }
.btn-google .google-g { flex: none; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #5d6b84; font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #e2e8f1; }
.google-account { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 6px 0 20px; padding: 12px 14px; background: #f5f8fc; border: 1px solid #e2e8f1; border-radius: 10px; font-size: 14px; color: #0b1530; }
.google-account > span { flex: 1 1 220px; min-width: 0; }
.google-account strong { overflow-wrap: anywhere; }
.google-account a { margin-left: auto; font-size: 13px; font-weight: 600; }

/* ------------------------------------------------------------- footer ---- */
.site-footer {
  position: relative;
  overflow: hidden;
  margin: clamp(40px, 6vw, 80px) 12px 12px;
  padding: clamp(48px, 6vw, 80px) 0 0;
  border-radius: 28px;
  background: linear-gradient(180deg, #fff, var(--sky));
  border: 1px solid color-mix(in oklab, var(--ink) 7%, transparent);
  color: var(--muted);
}
.site-footer::before { display: none; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer .footer-container { width: min(1240px, calc(100% - 48px)); }
.site-footer .footer-grid { position: relative; z-index: 1; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.site-footer h3 {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500; letter-spacing: .06em;
  color: var(--leaf-text);
}
.site-footer a { display: block; margin: 8px 0; color: var(--ink); transition: color .2s ease, transform .3s var(--ease-out); }
.site-footer li a:hover { color: var(--leaf-deep); transform: translateX(3px); }
.footer-brand { display: inline-flex; padding: 10px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.footer-brand img { width: 150px; height: auto; }
.footer-desc { color: var(--muted); max-width: 34ch; }
.footer-social a { display: inline-grid; border-radius: 999px; background: #fff; color: var(--ink); border: 1px solid var(--line); }
.footer-social a:hover { background: var(--leaf); color: var(--leaf-ink); border-color: var(--leaf); }
.footer-contact li { display: flex; align-items: center; gap: 10px; margin: 8px 0; color: var(--ink); }
.footer-bottom { flex-wrap: wrap; align-items: center; border-top-color: color-mix(in oklab, var(--ink) 10%, transparent); color: var(--muted); position: relative; z-index: 1; }
.footer-bottom-right { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.footer-bottom-right a { display: inline; margin: 0; }
.footer-wordmark {
  display: block;
  margin: clamp(24px, 4vw, 48px) 0 -0.18em;
  font-weight: 700;
  font-size: clamp(4rem, 16vw, 14rem);
  line-height: .8;
  letter-spacing: -0.06em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--ink) 16%, transparent);
  user-select: none; pointer-events: none; white-space: nowrap;
  transform: translate3d(0, 30%, 0);
  transition: transform 1.4s var(--ease-out);
}
.footer-wordmark b { font-weight: 700; -webkit-text-stroke-color: color-mix(in oklab, var(--leaf-deep) 50%, transparent); }
.footer-wordmark.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) { .footer-wordmark { transform: none; transition: none; } }
@media (max-width: 1100px) {
  .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .site-footer .footer-grid { grid-template-columns: 1fr; } }
/* footer links get a finger-sized tap area on touch screens (were ~20px tall) */
@media (pointer: coarse) { .site-footer li a { margin: 0; padding: 10px 0; } }

/* ---------------------------------------------------------- chatbot ---- */
.atbot-fab { background: var(--ink) !important; box-shadow: 0 14px 30px -10px hsl(222 60% 12% / .5) !important; }
.atbot-head { background: var(--ink) !important; }
.atbot { font-family: var(--font-sans) !important; }

/* ------------------------------------------------------ interior type ---- */
body:not(.v9-home) h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); }
.filters h2, .filters h3, .card h2, .auth-card h2, .college-section h2, aside h2 {
  font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem);
  letter-spacing: -0.03em;
}

/* ================================================= interior sections ==== */
/* about + services: the old dark bands are pale-sky inset panels */
.about-story, .services-strip {
  width: min(1240px, calc(100% - 24px));
  margin: 0 auto;
  border-radius: 28px;
  background: linear-gradient(160deg, #fff, var(--sky)) !important;
  border: 1px solid color-mix(in oklab, var(--ink) 6%, transparent);
  position: relative; overflow: hidden; isolation: isolate;
}
.about-story h2, .about-story .eyebrow, .services-strip h2 { color: var(--ink) !important; }
.about-story .eyebrow { color: var(--leaf-text) !important; }
.about-story p { color: var(--muted) !important; }
/* the points inside the pale-sky panels are ruled text, not cards inside a card */
.story-points div, .strip-grid div {
  border-radius: 0;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent) !important;
  box-shadow: none;
  padding: 16px 0 0 !important;
}
.story-points strong, .strip-grid strong { color: var(--ink) !important; font-weight: 600; letter-spacing: -0.03em; }
.story-points span, .strip-grid span { color: var(--muted) !important; }
.story-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; }
.story-stats div { padding: 14px 0 0; border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); }
.story-stats strong { display: block; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 600; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.story-stats span { font-size: 13px; color: var(--muted); }

.belief-grid { display: grid; grid-template-columns: 1fr !important; gap: 0; }
.belief-grid article {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: baseline;
  padding: clamp(24px, 3vw, 40px) 0;
  background: none !important;
  border: 0; border-top: 1px solid var(--line);
  border-radius: 0 !important; box-shadow: none !important; min-height: 0;
}
.belief-grid article:last-child { border-bottom: 1px solid var(--line); }
.belief-grid span { font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: .04em; text-transform: none; color: var(--leaf-text); }
.belief-grid h3 { color: var(--ink); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1.08; letter-spacing: -0.035em; margin: 0; transition: transform .6s var(--ease-out); }
.belief-grid p { color: var(--muted); margin: 0; }
.belief-grid article:hover h3 { transform: translateX(6px); }
@media (max-width: 780px) { .belief-grid article { grid-template-columns: 1fr; gap: 8px; } }

.country-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-top: 24px; }
.country-stats div { padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease-out); }
.country-stats div:hover { transform: translateY(-3px); }
.country-stats__flag { display: block; font-size: 22px; line-height: 1; }
.country-stats strong { display: block; margin-top: 10px; font-size: 1.3rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.country-stats div > span:last-child { font-size: 13px; color: var(--muted); }
.feature-list li::before { background: var(--leaf-deep) !important; }

/* shared closing panel for interior pages */
.v9-cta {
  width: min(1240px, calc(100% - 24px));
  margin: clamp(48px, 7vw, 96px) auto 0;
  padding: clamp(56px, 8vw, 110px) 24px;
  border-radius: 28px;
  text-align: center;
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(170deg, #fff, var(--sky));
  border: 1px solid color-mix(in oklab, var(--ink) 6%, transparent);
}
.v9-cta::before {
  content: ""; position: absolute; left: 50%; bottom: -60%; z-index: -1;
  width: 110%; aspect-ratio: 2 / 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--leaf) 34%, transparent), transparent);
  animation: v9-glow 9s ease-in-out infinite alternate;
}
@keyframes v9-glow { to { transform: scale(1.18); opacity: .75; } }
.v9-cta__inner { max-width: 720px; margin: 0 auto; }
.v9-cta h2 { color: var(--ink); font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem) !important; line-height: 1; letter-spacing: -0.045em; }
.v9-cta p { color: var(--muted); font-size: 1.1rem; max-width: 48ch; margin: 18px auto 0; }
.v9-cta .btn-row { justify-content: center; margin-top: 30px; }
.btn.v9-ghost { color: var(--ink); background: rgba(255,255,255,.7); border: 1px solid color-mix(in oklab, var(--ink) 16%, transparent); }
.btn.v9-ghost:hover { background: #fff; border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .v9-cta::before { animation: none; } }
/* photo variant: the homepage's closing campus photo under a navy veil, white text, leaf accents */
.v9-cta--photo { background: #1d2433; border-color: transparent; color: #fff; }
.v9-cta__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.v9-cta--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 90% at 50% 55%, rgb(8 14 28 / .72), rgb(8 14 28 / .35) 80%); }
.v9-cta--photo h2 { color: #fff !important; }
.v9-cta--photo h2 em { color: var(--leaf); }
.v9-cta--photo p { color: rgb(255 255 255 / .86) !important; }
.v9-cta--photo .btn.v9-ghost { background: rgb(255 255 255 / .16); color: #fff; border-color: rgb(255 255 255 / .4); }
.v9-cta--photo .btn.v9-ghost:hover { background: rgb(255 255 255 / .26); border-color: #fff; color: #fff; }

/* services bento: 4 columns, the anchor takes 2x2, eight tiles fill 3 rows */
.service-suite {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(200px, auto);
  gap: 14px;
}
.service-card { display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; background: #fff; transition: transform .5s var(--ease-out), box-shadow .3s ease; }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service-card .svc-ic {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--sky); color: #2451c7; font-size: 18px;
  padding: 0; margin: 0 0 auto; box-shadow: none;
  transition: transform .5s var(--ease-out), background-color .3s ease, color .3s ease;
}
.service-card:hover .svc-ic { background: var(--leaf); color: var(--leaf-ink); }
.service-card:not(.primary-service) { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; align-content: start; justify-content: stretch; }
.service-card:not(.primary-service) .svc-ic { width: 38px; height: 38px; border-radius: 12px; font-size: 15px; margin: 0; align-self: center; }
.service-card:not(.primary-service) h3 { grid-column: 2; margin: 0; align-self: center; }
.service-card:not(.primary-service) p { grid-column: 1 / -1; margin-top: 12px; }
.service-card h3 { font-size: 1.2rem; margin: 18px 0 8px; }
.service-card p { font-size: 1rem; margin: 0; }
.service-card.primary-service {
  grid-column: span 2; grid-row: span 2;
  background: radial-gradient(80% 70% at 100% 0%, color-mix(in oklab, var(--leaf) 30%, transparent), transparent 70%), linear-gradient(160deg, #f7faff, var(--sky)) !important;
  border-color: color-mix(in oklab, var(--ink) 6%, transparent);
  padding: clamp(28px, 3vw, 44px);
}
.service-card.primary-service h3 { color: var(--ink) !important; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem); letter-spacing: -0.04em; line-height: 1.02; }
.service-card.primary-service p { color: var(--muted) !important; font-size: 1.05rem; max-width: 40ch; }
.service-card.primary-service .svc-ic { width: 56px; height: 56px; background: #fff; color: #2451c7; font-size: 22px; }
.service-card.primary-service ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 22px 0 0; }
.service-card.primary-service li { padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14px; color: var(--ink) !important; }
.service-card.primary-service li::before { display: none; }
.service-card#essays { background: var(--leaf-soft); border-color: transparent; }
.service-card#essays .svc-ic { background: #fff; color: var(--leaf-deep); }
.service-card#costs { background: var(--mint); border-color: transparent; }
.service-card#costs .svc-ic { background: #fff; color: #13875f; }
@media (max-width: 1080px) {
  .service-suite { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .service-card.primary-service { grid-row: auto; }
}
@media (max-width: 620px) {
  .service-suite { grid-template-columns: 1fr !important; }
  .service-card.primary-service { grid-column: auto; }
}

/* ------------------------------------------------------------- mobile ---- */
@media (max-width: 620px) {
  :root { --header-h: 58px; }
  .site-header { top: 8px; width: calc(100% - 16px); }
  .brand { height: 42px; padding: 0 10px; }
  .brand img, .site-header.is-scrolled .brand img { width: 100px; height: 36px; }
  .page-hero, .page-hero:not(.search-hero), .page-hero.search-hero { width: calc(100% - 16px); border-radius: 22px; }
  .site-footer { margin: 32px 8px 8px; border-radius: 22px; }
}

/* college result cards: the monogram placards are light now, so the banner
   fades to white at the foot instead of to navy, and the text turns ink */
.college-image-wrap::after { background: linear-gradient(180deg, transparent 30%, rgba(255,255,255,.92)) !important; }
.college-image-overlay { color: var(--ink) !important; }
.college-image-overlay span { color: var(--leaf-text) !important; font-family: var(--font-mono); font-weight: 500 !important; letter-spacing: .04em !important; }
.college-image-overlay strong { color: var(--ink) !important; letter-spacing: -0.02em; }
.college-card .badge, .match-card .badge { background: var(--sky); color: #1d3f9e; }

/* the legacy .about-collage div / span rules outrank .gfx; restore it */
.about-collage .gfx { position: relative; left: auto; right: auto; bottom: auto; padding: 0; border-radius: inherit; background: radial-gradient(120% 90% at 20% 0%, var(--g1), var(--g2)); }
.about-collage .gfx .gfx__disc { display: grid; color: var(--g-ink); margin: 0; }
.about-collage .gfx .gfx__dots, .about-collage .gfx .gfx__ring, .about-collage .gfx .gfx__blob { display: block; position: absolute; margin: 0; }
.about-collage .gfx .gfx__cap { display: grid; color: var(--ink); margin: 0; }
.about-collage .gfx .gfx__cap b { color: var(--ink); font-size: clamp(1.15rem, .9rem + .9vw, 1.7rem); }
.about-collage .gfx .gfx__cap small { color: var(--muted); }


/* ============================================================ photos ==== */
/* Generated editorial photography (assets/photos). One grade across the set:
   35mm film, golden hour, warm highlights, deep greens. A figure carries its
   own caption on a soft scrim. */
.v9-photo {
  position: relative; margin: 0;
  border-radius: 26px; overflow: hidden; isolation: isolate;
  aspect-ratio: 4 / 3.4; width: 100%; min-width: 0;
  background: #cdbb9a;
  box-shadow: 0 40px 80px -50px rgb(40 30 10 / .55);
}
.v9-photo--tall { aspect-ratio: 4 / 4.6; }
.v9-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.v9-photo:hover img { transform: scale(1.03); }
.v9-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(10 12 18 / .62)); pointer-events: none; }
.v9-photo figcaption { position: absolute; z-index: 1; left: clamp(18px, 3vw, 28px); right: 18px; bottom: clamp(16px, 3vw, 26px); display: grid; gap: 4px; color: #fff; }
.v9-photo figcaption b { font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.v9-photo figcaption span { font-size: 14px; opacity: .85; }
/* Line illustrations (the About hero's road) carry detail right down to the bottom
   edge, so the caption sat on top of the road's first node. Their scrim closes to a
   solid band behind the caption instead of a see-through tint. */
.v9-photo--art::after { background: linear-gradient(180deg, transparent 56%, #1b3a94 80%); }

/* services: the anchor card leads with a campus photo instead of empty space */
.service-card.primary-service { position: relative; overflow: hidden; isolation: isolate; justify-content: flex-end; }
.service-card.primary-service .svc-photo {
  position: absolute; inset: 0 0 auto 0; height: 54%; width: 100%; object-fit: cover; z-index: -1;
  mask-image: linear-gradient(180deg, #000 45%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent);
}
.service-card.primary-service .svc-ic { position: absolute; top: clamp(28px, 3vw, 44px); left: clamp(28px, 3vw, 44px); }
/* Below 1080px the card is no longer two rows tall, so it has no spare height: the
   photo covered the heading and the icon sat on top of it. Give the photo a fixed
   band and start the text underneath it. */
@media (max-width: 1080px) {
  .service-card.primary-service { padding-top: 216px; }
  .service-card.primary-service .svc-photo { height: 200px; }
  .service-card.primary-service h3 { margin-top: 0; }
}

/* footer copy: styles.css paints .site-footer p for a navy footer; this one is light */
.site-footer p, .site-footer .footer-desc { color: var(--muted); }
.site-footer .footer-bottom span, .site-footer .footer-bottom a { color: var(--muted); }
.site-footer .footer-bottom a:hover { color: var(--ink); }

/* ============================================================ contact ==== */
.contact-page { padding-bottom: 20px; }
.ct-wrap { width: min(1240px, calc(100% - 40px)); margin-inline: auto; }
.ct-hero { padding: clamp(28px, 5vw, 64px) 0 0; }
.ct-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.ct-intro h1 { font-size: clamp(2.6rem, 1.4rem + 4vw, 5rem); max-width: 10ch; margin: 0; }
.ct-lead { font-size: 1.15rem; line-height: 1.55; max-width: 38ch; margin: 22px 0 0; }
.ct-ways { list-style: none; margin: 36px 0 0; padding: 0; display: grid; }
.ct-ways li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.ct-ways li:last-child { border-bottom: 1px solid var(--line); }
.ct-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--leaf-soft); color: var(--leaf-deep); }
.ct-ways b { display: block; font-size: 13px; font-weight: 500; font-family: var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.ct-ways a, .ct-ways span { font-size: 1.05rem; color: var(--ink); font-weight: 500; }
.ct-ways a:hover { color: var(--leaf-deep); }
.ct-card { padding: clamp(24px, 3.4vw, 44px); border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 80px -56px hsl(222 60% 12% / .45); }
.ct-form { display: grid; gap: 18px; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-field { display: grid; gap: 8px; min-width: 0; }
.ct-field label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.ct-field label span { color: #c2410c; }
.ct-field input, .ct-field textarea { width: 100%; min-height: 50px; padding: 12px 16px; font-size: 16px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.ct-field textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.ct-field input:focus, .ct-field textarea:focus { background: #fff; }
.ct-submit { justify-self: start; margin-top: 4px; }
.ct-fine { margin: 0; font-size: 13px; }
.ct-fine a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ct-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ct-alert { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; padding: 12px 16px; border-radius: 14px; background: #fdeceb; color: #a1251b; border: 1px solid #f5c6c0; font-size: 15px; }
.ct-done { text-align: center; padding: clamp(24px, 4vw, 48px) 8px; }
.ct-done__tick { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--leaf); color: var(--leaf-ink); font-size: 26px; animation: ct-pop .6s var(--ease-out) both; }
.ct-done h2 { margin: 18px 0 8px; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem) !important; }
.ct-done p { max-width: 40ch; margin: 0 auto 24px; }
@keyframes ct-pop { from { transform: scale(.5); opacity: 0; } }
@media (max-width: 900px) { .ct-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ct-row { grid-template-columns: 1fr; } .ct-wrap { width: calc(100% - 32px); } }

/* ============================================================ search ==== */
/* Result card header: a small monogram tile and the location. The college
   name is printed once, in the card's own heading. */
.college-top { display: flex; align-items: center; gap: 12px; padding: 16px 16px 0; }
.college-id { min-width: 0; display: grid; gap: 3px; }
.college-results .college-name { margin: 0; font-size: 1.02rem; line-height: 1.25; letter-spacing: -0.02em; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.college-name a { color: var(--ink); }
.college-name a:hover { color: var(--leaf-deep); }
.college-results .college-body header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.college-results .college-body header > div:first-child { min-width: 0; }
.college-mono { width: 52px; height: 52px; flex: none; border-radius: 14px; object-fit: cover; background: #fff; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
.college-loc { font: 500 12px/1.35 var(--font-mono); letter-spacing: .02em; color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Off-screen result cards are not painted until they scroll near the
   viewport: 24 cards painted on the first frame was the other half of the
   load-time stutter. The intrinsic size keeps the scrollbar honest. */
.college-results .college-card { content-visibility: auto; contain-intrinsic-size: auto 380px; }
.college-card { transition: transform .45s var(--ease-out), box-shadow .3s ease, border-color .3s ease; }
.college-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in oklab, var(--ink) 14%, transparent); }
/* Result cards read as surfaces, not white boxes: a cool wash that deepens
   toward the foot, a soft leaf bloom in the top-right corner, and a two-tone
   hairline along the top edge. All static paint, no per-frame work. */
.college-results .college-card {
  position: relative;
  background:
    radial-gradient(70% 55% at 100% 0%, color-mix(in oklab, var(--leaf) 20%, transparent), transparent 70%),
    radial-gradient(60% 45% at 0% 100%, color-mix(in oklab, #4f8dff 12%, transparent), transparent 70%),
    linear-gradient(180deg, #fff 0%, #fff 48%, var(--sky) 100%);
  border-color: color-mix(in oklab, #4f8dff 22%, var(--line));
}
.college-results .college-card:hover { border-color: color-mix(in oklab, var(--leaf) 55%, var(--line)); }
.college-results .college-card .college-stat-row .stat {
  background: rgb(255 255 255 / .72);
  border-color: rgb(255 255 255 / .9);
  box-shadow: 0 1px 2px rgb(16 43 97 / .05);
}
.college-results .college-card .badge { background: rgb(255 255 255 / .75); box-shadow: inset 0 0 0 1px color-mix(in oklab, #4f8dff 30%, transparent); }

/* Results swap in place (js/search.js): the old cards sink and fade, the new
   ones rise in turn. */
.college-results.is-swapping .college-card {
  opacity: 0; transform: translateY(10px) scale(.985);
  transition: opacity .24s ease, transform .3s var(--ease-out);
  pointer-events: none;
}
.college-results.is-fresh [data-v9-in] { transition-duration: .55s, .7s; }
#resultCount { transition: opacity .25s ease; }
#resultCount.is-dim { opacity: .35; }
#resultCount.is-bump { animation: v9-count-bump .5s var(--ease-out); }
@keyframes v9-count-bump { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#collegePaging { transition: opacity .25s ease; }
.college-results.is-swapping + #collegePaging { opacity: .35; }

/* Search boxes: no green ring on focus. The box itself darkens its border. */
.college-search { position: relative; transition: border-color .2s ease, box-shadow .2s ease; }
.college-search:focus-within { border-color: color-mix(in oklab, var(--ink) 35%, transparent); }
.college-search input[type="search"]:focus,
.college-search input[type="search"]:focus-visible,
.h-search input:focus, .h-search input:focus-visible { border-color: transparent !important; box-shadow: none !important; outline: none !important; }

/* Live suggestions under a search box */
form.has-suggest { position: relative; }
form.has-suggest.is-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.at-suggest {
  position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 40;
  padding: 6px; border-radius: 18px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 30px 60px -20px hsl(222 60% 20% / .35), 0 2px 8px rgb(16 43 97 / .06);
  animation: at-suggest-in .22s var(--ease-out) both;
}
@keyframes at-suggest-in { from { opacity: 0; transform: translateY(-6px); } }
.at-suggest__item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 14px; border-radius: 12px; color: var(--ink); text-decoration: none;
  transition: background-color .15s ease;
}
.at-suggest__item:hover, .at-suggest__item.is-active { background: var(--sky); }
.at-suggest__name { font-size: 15px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-suggest__name b { font-weight: 700; color: var(--blue); }
.at-suggest__meta { flex: none; font: 500 11.5px/1 var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.at-suggest__all {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 4px;
  padding: 11px 14px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px;
  background: transparent; color: var(--ink); font: 600 13.5px/1 var(--font-sans); cursor: pointer;
  transition: background-color .15s ease;
}
.at-suggest__all:hover { background: var(--paper); }
.h-search .at-suggest { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .college-results.is-swapping .college-card { transition: none; }
  .at-suggest { animation: none; }
  #resultCount.is-bump { animation: none; }
}
.college-card .college-body { padding-top: 12px !important; }
.college-card h3 { font-size: 1.12rem; line-height: 1.25; letter-spacing: -0.02em; }
.college-card .college-stat-row .stat strong { font-variant-numeric: tabular-nums; }
.college-results .college-body .eyebrow { white-space: nowrap; }

/* ---- Search result cards: size to content (2026-10-01) -------------------
   styles.css sets `.college-results { grid-auto-rows: 1fr }` so every row
   matches the tallest card on the PAGE. Combined with the 380px
   `contain-intrinsic-size` placeholder that off-screen (unpainted) cards
   report, that made every card 382px tall with ~125px of empty space above
   the buttons. Rows now size to their own content (cards in a row still
   stretch to match each other, and the action row stays pinned to the foot),
   and the placeholder matches a real card so the scrollbar stays honest. */
.college-results { grid-auto-rows: auto; }
/* Measured 2026-10-08: painted cards are 317-347px on a desktop and 268-342px on a
   phone, so the old 270px placeholder made every row grow by 50-75px as it was first
   painted. Coming back to this page mid-list (Back from a college) and scrolling up,
   each row above the screen grew as it arrived and pushed the page down under the
   reader. 330px keeps that to a few pixels. */
.college-results .college-card { contain-intrinsic-size: auto 330px; }
/* The "Private · Urban" eyebrow was being clipped ("PRIVATE · UR") because the
   header badge row took the width first. The eyebrow keeps its full width;
   the badges take the rest and wrap under it when a long one
   ("Considered if submitted") needs the room, instead of being cut off. */
.college-results .college-body header > div:first-child { flex: 0 0 auto; max-width: 100%; }
.college-results .college-body header .badge-row {
  flex: 1 1 auto; min-width: 0; max-height: none; overflow: visible;
  justify-content: flex-end; row-gap: 6px;
}
.college-results .college-body .eyebrow { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* "Free" badge, used across the public pages so the price is never in doubt */
.free-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 8px; border-radius: 999px;
  font: 600 14.5px/1.2 var(--font-sans, inherit); letter-spacing: -0.005em;
  color: var(--leaf-ink); background: var(--leaf-soft);
  border: 1px solid color-mix(in oklab, var(--leaf-deep) 28%, transparent);
}
.free-pill i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 10px; color: #fff; background: var(--leaf-deep); }
.free-pill small { font-weight: 500; font-size: 13.5px; color: color-mix(in oklab, var(--leaf-ink) 70%, transparent); }
.free-pill--block { margin-bottom: 18px; }
.free-tag { display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 999px; vertical-align: middle; font: 600 11px/1.2 var(--font-mono); letter-spacing: .02em; color: var(--leaf-text); background: var(--leaf-soft); }
.free-tag--paid { color: var(--muted); background: color-mix(in oklab, var(--ink) 7%, transparent); }
.footer-free { margin: 14px 0 0; max-width: 34ch; font-size: 14px; line-height: 1.5; color: var(--muted); }
.footer-free b { color: var(--leaf-text); }
/* the services cards style every <span> as an icon tile; the tag is not one */
.service-card .free-tag { display: inline-block; width: auto; height: auto; margin: 0 0 0 8px; border-radius: 999px; color: var(--leaf-text); background: var(--leaf-soft); box-shadow: none; }
.service-card .free-tag--paid { color: var(--muted); background: color-mix(in oklab, var(--ink) 7%, transparent); }

/* WHY ADMITREE (includes/differentiators.php): home, services and about */
.diff { padding: clamp(64px, 9vw, 120px) 0; }
/* an editorial ruled list, not a grid of icon cards: title and CTA on the left, the eight
   points in two ruled columns on the right; each icon sits inline beside its heading */
.diff__wrap { width: min(1240px, calc(100% - 40px)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto auto 1fr; column-gap: clamp(32px, 5vw, 80px); align-content: start; }
.diff__eyebrow, .diff__title, .diff__cta { grid-column: 1; }
.diff__grid { grid-column: 2; grid-row: 1 / span 3; }
.diff__eyebrow { margin: 0 0 12px; font: 500 12px/1 var(--font-mono); letter-spacing: .02em; color: var(--leaf-text); }
.diff__title { margin: 0; max-width: 14ch; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); letter-spacing: -0.035em; line-height: 1.05; color: var(--ink); align-self: start; }
.diff__title em { color: var(--leaf-deep); }
.diff__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 48px); align-self: start; }
.diff__item { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-content: start; column-gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.diff__ic { grid-row: 1; padding-top: 3px; font-size: 15px; line-height: 1; color: var(--leaf-deep); }
.diff__item h3 { grid-column: 2; margin: 0 0 6px; font-size: 1.1rem; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); }
.diff__item p { grid-column: 2; margin: 0; font-size: 1rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.diff__item h3 br { display: none; }
@media (max-width: 1080px) {
  .diff__wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .diff__title { max-width: 22ch; margin-bottom: clamp(28px, 4vw, 40px); }
  .diff__grid { grid-column: 1; grid-row: auto; }
}
@media (max-width: 620px) { .diff__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.auth-benefits { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.auth-benefits li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.auth-benefits i { margin-top: 3px; color: var(--leaf); }

/* Sign-up / dashboard prompts on the public pages (authCtaBanner, authCtaButtons in includes/functions.php) */
.cta-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px;
  margin: 22px 0; padding: 20px 22px; border-radius: 20px;
  border: 1px solid color-mix(in oklab, var(--leaf-deep) 26%, transparent);
  background: linear-gradient(120deg, var(--leaf-soft), #fff 70%);
}
.cta-banner__ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; font-size: 18px; color: #fff; background: var(--leaf-deep); }
.cta-banner__copy { flex: 1 1 280px; min-width: 0; }
.cta-banner__title { margin: 0 0 4px; font-size: 1.08rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.cta-banner__text { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--muted); }
.cta-banner__btns, .diff__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.diff__cta { margin-top: clamp(24px, 3vw, 36px); align-self: start; }
@media (max-width: 1080px) { .diff__cta { grid-row: auto; } }
.h-hero__login { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.h-hero__login a { font-weight: 600; color: var(--leaf-text); }
@media (max-width: 560px) { .cta-banner__btns { width: 100%; } .cta-banner__btns .btn { flex: 1 1 auto; justify-content: center; } }

/* ---- Search result cards: one fixed skeleton (2026-10-10) -------------------
   Every card is the same stack, and every slot keeps its height whether or not
   it has content, so names, ranks, figures and buttons sit on the same lines
   across a row: name block (two lines reserved) · facts line · rank chips ·
   three figures · majors · test chips · two buttons · quiet links.
   The chips row and the buttons are pinned to the foot of the card. */
.college-results .college-top { align-items: flex-start; }
.college-results .college-id { min-height: 62px; align-content: start; }
.college-results .college-card .college-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.college-results .college-card .college-body { padding: 10px 16px 16px !important; gap: 12px; }
.college-results .college-body .cc-meta { display: block; min-height: 14px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.college-results .college-body > .badge-row { flex-wrap: wrap; justify-content: flex-start; gap: 6px; height: 26px; max-height: 26px; overflow: hidden; }
.college-results .college-card .badge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; line-height: 1; white-space: nowrap; }
.college-results .college-card .badge-course { background: var(--ink); color: #fff; box-shadow: none; }
.college-results .college-card .badge-course b { font-weight: 600; }
.college-results .college-card .badge-course i { font-style: normal; font-size: .86em; opacity: .66; }
.college-results .college-card .badge-est { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 22%, transparent); }
.college-results .college-card .college-stat-row { gap: 8px; margin: 0; }
.college-results .college-card .college-stat-row .stat { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 9px 10px; }
.college-results .college-card .college-stat-row .stat span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.college-results .college-card .college-majors:empty { display: none; }
/* Chips follow the figures directly (no hole when a card has no course-rank row); the buttons take the spare height, so they line up along the foot of every row. */
.college-results .college-body > .cc-facts { margin-top: 0; }
.college-results .college-card .college-actions { margin-top: auto; }
.college-results .college-body > .cc-facts:empty { display: none; }
.college-results .college-card .college-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.college-results .college-card .college-actions .btn { width: 100%; min-width: 0; justify-content: center; margin: 0; }
.college-results .college-card .college-actions > .btn:first-child:nth-last-child(2) { grid-column: 1 / -1; }
.college-results .college-links { grid-column: 1 / -1; display: flex; gap: 16px; min-height: 18px; overflow: hidden; white-space: nowrap; font-size: 12.5px; line-height: 18px; }
.college-results .college-links a { color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.college-results .college-links a:hover { color: var(--leaf-deep); }
.college-results .college-card .college-stat-row { grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr) minmax(0, .9fr); }
.college-results .college-card .college-stat-row .stat { padding: 9px 8px; }
/* Measured 2026-11-03: painted cards are 304.25-304.5px at every width (390 to 1440). The 343px
   placeholder made the page shrink by ~40px each time a row of cards was first painted,
   so the results jumped under the reader while scrolling (8 jumps on a desktop, 24 on a
   phone). The placeholder is the inside size, so 302.5px with the border removes them. Re-measure if the card's content changes. */
.college-results .college-card { contain-intrinsic-size: auto 309.75px; }   /* re-measured 2026-11-04 after the readable-type pass: 311.75px less the 1px top and bottom border */

/* Search results, readable (2026-11-04). The card paint above stays; this block only changes what the
   audit measured: 9-10px labels, a full-width navy "View details" on every card that outweighed the data,
   and resting shadows on the inner stat tiles. If card heights change, re-measure contain-intrinsic-size (the rule above this block). */
.college-results .college-body .eyebrow { font-size: 12px; line-height: 18px; min-height: 18px; }   /* empty eyebrows (UK cards) keep the same height */
.college-results .badge, .college-results .college-card .badge { font-size: 12px; }
.college-results .college-card .college-stat-row .stat span { font-size: 12px; letter-spacing: 0; color: var(--muted); }
.college-results .college-card .college-stat-row .stat strong { font-size: 14.5px; letter-spacing: -0.01em; }
/* the room for 12px labels comes from slimmer padding, not smaller type */
.college-results .college-card .college-body { padding: 10px 12px 14px !important; }
.college-results .college-card .college-stat-row { gap: 6px; }
.college-results .college-card .college-stat-row .stat { padding: 8px 5px; box-shadow: none; }
.college-results .college-majors { font-size: 13px; }
.college-results .college-links { font-size: 13px; }
.college-results .college-card .college-actions .btn { min-height: 40px; font-size: 13.5px; }
.college-results .college-card .college-actions .btn.primary {
  color: var(--ink); background: #fff; border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); box-shadow: none;
}
.college-results .college-card .college-actions .btn.primary:hover { color: #fff; background: var(--ink); border-color: var(--ink); }
/* one primary per view: the signup banner below carries it, so the header button steps back */
.results-top-actions .btn.primary { color: var(--ink); background: #fff; border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); box-shadow: none; }
.results-top-actions .btn.primary:hover { color: #fff; background: var(--ink); border-color: var(--ink); }
@media (max-width: 640px) {
  /* phones: a compact signup banner so the first college comes sooner */
  .cta-banner { gap: 12px; padding: 14px 16px; margin: 14px 0; }
  .cta-banner__ic { display: none; }
  .cta-banner__copy { flex-basis: 100%; }
  .cta-banner__title { font-size: 1rem; }
  .cta-banner__text { font-size: .94rem; }
  .cta-banner__btns .btn { min-height: 44px; }
}

/* Search hero background: a soft line-art world map with pins on the four countries
   (Higgsfield, GPT Image 2.5, 3 Nov 2026). It replaces the plain gradient; the drifting
   light pools stay on top, the dot grid is dropped so it does not cross the map lines. */
.page-hero.search-hero, .page-hero.services-hero, .page-hero.about-hero {
  background:
    linear-gradient(90deg, rgb(243 248 255 / .7) 0%, rgb(243 248 255 / .48) 40%, rgb(243 248 255 / 0) 66%),
    #e3effb url("../assets/illustrations/search-hero-map.webp") right center / cover no-repeat;
}
.page-hero.search-hero::before, .page-hero.services-hero::before, .page-hero.about-hero::before { opacity: .55; }
.page-hero.search-hero::after, .page-hero.services-hero::after, .page-hero.about-hero::after { display: none; }
@media (max-width: 700px) {
  .page-hero.search-hero, .page-hero.services-hero, .page-hero.about-hero {
    background:
      linear-gradient(180deg, rgb(243 248 255 / .55), rgb(243 248 255 / .7)),
      #e3effb url("../assets/illustrations/search-hero-map-sm.webp") 78% center / cover no-repeat;
  }
}
/* the live layer: pins pulse, light runs along the routes; faded on the text side like the map */
.search-hero .container, .services-hero .container, .about-hero .container { position: relative; z-index: 1; }
.search-hero__routes { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .25) 30%, #000 64%); mask-image: linear-gradient(90deg, rgb(0 0 0 / .25) 30%, #000 64%); }
.sh-trails path { fill: none; stroke: #4f86ff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 9 91; stroke-dashoffset: 100; opacity: .9;
  filter: drop-shadow(0 0 6px rgb(79 134 255 / .9)); }
.sh-dot { fill: #2f62e0; stroke: #fff; stroke-width: 5; }
.sh-ring { fill: rgb(79 134 255 / .35); transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .sh-trails path { animation: sh-run 4.6s linear infinite; animation-delay: var(--d, 0s); }
  .sh-ring { animation: sh-pulse 2.4s ease-out infinite; animation-delay: var(--d, 0s); }
  .sh-pins g { --d: inherit; }
}
@media (prefers-reduced-motion: reduce) { .sh-trails path { opacity: 0; } }
@keyframes sh-run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes sh-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }
@media (max-width: 700px) { .search-hero__routes { display: none; } }

/* Services and About heroes: the same one-column panel as the search page, so all three match
   in size. Their side piece (the platform facts, the road illustration) sits in the free space
   right of the copy on wide screens, out of the flow so it never changes the panel's height. */
/* one height for all three panels on desktop: the search panel's own size (526px at 1440,
   512px at 1280), with the copy centred inside, whatever its length */
@media (min-width: 901px) {
  .page-hero.search-hero, .page-hero.services-hero, .page-hero.about-hero {
    display: flex; flex-direction: column; justify-content: center;
    min-height: clamp(440px, calc(400px + 8.75vw), 526px);
    padding-top: clamp(40px, 4vw, 56px); padding-bottom: clamp(40px, 4vw, 56px);
  }
}
.services-hero h1, .about-hero h1 { max-width: 22ch; }
.services-hero__stats { position: relative; z-index: 1; width: min(560px, calc(100% - 48px)); margin: 28px auto 0 clamp(24px, 2vw, 32px); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.services-hero__stats div { padding: 12px 14px !important; }
.about-hero__art { display: none; }
@media (min-width: 1270px) {
  .services-hero__stats { position: absolute; right: 32px; top: 50%; translate: 0 -50%; margin: 0; width: 220px; grid-template-columns: 1fr; }
  .services-hero__stats div { display: grid !important; gap: 4px; }
  .services-hero__stats strong { text-align: left !important; }
  .about-hero__art { display: block; position: absolute; z-index: 1; right: 32px; top: 50%; translate: 0 -50%; width: 220px; aspect-ratio: 4 / 5; border-radius: 20px; }
  .about-hero__art figcaption { left: 14px; bottom: 12px; }
  .about-hero__art figcaption b { font-size: 15px; }
  .about-hero__art figcaption span { font-size: 12px; }
  /* keep the copy clear of the side piece */
  .services-hero .container, .about-hero .container { padding-right: 290px; }
}
@media (max-width: 700px) { .services-hero__stats { display: none; } }

/* ---- Smoothness pass (3 Nov 2026) ------------------------------------------------------------------
   Safari re-blurs a backdrop-filter every frame anything behind it moves, and re-rasterises a
   filtered element each time it animates. The hero panels now animate (drifting light, map pins,
   routes), so the glass on top of them was recomputed constantly.
   - the header pill drops its blur at the top of the page as well (it already did once scrolled);
     at 92% white the difference is barely visible
   - the services side panel is near-opaque instead of blurred
   - the drifting light pools are promoted to their own layer, so they move without repainting
   - the moving routes lose their glow filter (the costliest paint); the pins stay */
.site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in oklab, #fff 92%, transparent); }
.service-hero-panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255,255,255,.9) !important; }
.page-hero::before, .page-hero.search-hero::before { will-change: transform; }
.sh-trails path { filter: none; stroke-width: 6; stroke: #3f78f5; }
.search-hero__routes { will-change: transform; }

/* ---- Page backdrop (3 Nov 2026) ----------------------------------------------------------------------
   The flat off-white behind every page is now a soft, still backdrop: pale sky light from the top
   left, a hint of leaf on the right, a cooler pool low down, and a very faint dot texture that fades
   out toward the middle. It is one fixed layer with no animation and no blur, so it is drawn once and
   costs nothing while scrolling (see the smoothness pass above). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 50% at 0% 0%, rgb(167 196 250 / .75), transparent 70%),
    radial-gradient(40% 42% at 100% 18%, rgb(178 232 140 / .55), transparent 72%),
    radial-gradient(50% 48% at 88% 100%, rgb(150 182 248 / .6), transparent 70%),
    radial-gradient(38% 40% at 6% 95%, rgb(178 232 140 / .45), transparent 72%),
    radial-gradient(30% 26% at 52% 48%, rgb(255 255 255 / .7), transparent 75%),
    linear-gradient(160deg, #eef3fc 0%, #f3f6fb 45%, #eef6ea 100%);
  will-change: transform;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgb(11 21 48 / .12) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, transparent 25%, #000 95%);
          mask-image: radial-gradient(70% 60% at 50% 45%, transparent 25%, #000 95%);
  will-change: transform;
}
body { background: var(--paper); }
/* alternate bands are a light veil over the backdrop rather than a flat grey strip */
.section.alt { background: rgb(255 255 255 / .38); }