/* ==========================================================================
   Cambridge Academic Consulting: shared design system for all three pages.

   Ivory ground, Harvard crimson as the single brand colour, antique gold only
   as an accent on the "Our Approach" badge and the essay database. Libre Caslon
   Text carries every headline, stat number and the wordmark; Inter carries body.

   Linked relatively from every page (styles.css / ../styles.css), because the
   tree gets deployed to a web root that is not decided yet.

   Section grounds follow the client's own rhythm:
     ivory  -> hero, campus strip
     warm   -> founder
     tint   -> proven results, process, faq
     crimson-> time is the difference, essay database, testimonials
     dark   -> apply, footer
   ========================================================================== */

:root{
  --crimson:#A41034;
  --crimson-dark:#7A0B25;
  --crimson-light:#F8E9EC;
  --gold:#A3892F;
  /* Same antique gold, lifted for legibility on the crimson bands only.
     ~5:1 on --crimson, where --gold itself only reaches 2.3:1. */
  --gold-on-dark:#E3CE8F;
  /* Ink, not a surface: every piece of text on a light ground. */
  --charcoal:#1F2428;
  --charcoal-light:#5F6672;
  /* Surface, not ink: the dark bands (apply + footer) keep their charcoal. */
  --charcoal-deep:#252B37;
  /* Ground = body and the sections that carry no band colour (ivory).
     --bg stays white on purpose: cards and inputs have to lift off the ground. */
  --ground:#FAF7F1;
  --bg:#FFFFFF;
  --warm-white:#FBFAF9;
  --muted:#F3F4F6;
  --border:#E2E4E9;

  --serif:'Libre Caslon Text',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --radius:12px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 1px 2px rgba(37,43,55,.05),0 8px 24px rgba(37,43,55,.06);
}

/* ==========================================================================
   Reset and page primitives.
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}

/* overflow-x lives on body only. On html it breaks wheel scrolling in some
   engines and hides the very overflow the gate is meant to catch. */
html{-webkit-text-size-adjust:100%;color-scheme:light}

body{
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  color:var(--charcoal);
  background:var(--ground);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:env(safe-area-inset-bottom);
}

h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
p,li{text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a,button,summary,label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--crimson);outline-offset:3px;border-radius:4px}
::selection{background:var(--crimson);color:#fff}

/* Number and its unit must never split across a line. */
.nb{white-space:nowrap}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Parked off-screen, but still a real element: it is sized past 44x44 so the
   keyboard target is honest the moment focus reveals it. */
.skip-link{
  position:absolute;top:-120px;left:12px;z-index:200;
  display:inline-flex;align-items:center;min-height:44px;
  padding:11px 22px;border-radius:8px;
  background:var(--crimson);color:#fff;font-weight:700;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:12px}

/* ==========================================================================
   Layout scaffolding.
   ========================================================================== */
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.band{padding:84px 0;position:relative}

/* Full-bleed grounds. */
.band--tint{background:var(--crimson-light)}
/* Warm white against the ivory ground is a 1.026 contrast ratio, which is to
   say invisible. This is the one band that sits directly under the hero, so
   that invisible seam lands right at the mobile fold line and the page looks
   like it simply stops. The hairline gives the eye an edge to register, so the
   fold reads as "cut off here", not as "this is all there is". Same token and
   the same 1px the masthead uses, so it reads as structure, not decoration. */
.band--warm{background:var(--warm-white);border-top:1px solid var(--border)}
.band--crimson{background:var(--crimson);color:#fff}
.band--dark{background:var(--charcoal-deep);color:#fff}

.band--crimson h2,.band--crimson h3,.band--dark h2,.band--dark h3{color:#fff}

/* Section heading pair. */
.section-head{text-align:center;max-width:720px;margin:0 auto 44px}
.section-head h2{font-size:clamp(1.85rem,4.4vw,2.85rem)}
.section-sub{margin-top:14px;font-size:1.05rem;line-height:1.6;color:var(--charcoal-light)}
/* Held to one line at every width: nowrap plus a vw-capped size, so it shrinks
   instead of wrapping. Same pattern as the second hero subline. */
.results-sub{white-space:nowrap;font-size:min(1.0625rem,3.55vw)}
.band--crimson .section-sub,.band--dark .section-sub{color:rgba(255,255,255,.82)}

/* ==========================================================================
   Buttons. Every crimson button darkens on hover and keeps a 44px floor.
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:14px 30px;
  background:var(--crimson);color:#fff;
  font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1.25;
  border:none;border-radius:10px;cursor:pointer;text-align:center;
  touch-action:manipulation;
  transition:background .2s var(--ease),transform 120ms var(--ease),box-shadow .2s var(--ease);
}
.btn:hover{background:var(--crimson-dark);transform:translateY(-1px);box-shadow:0 10px 24px rgba(164,16,52,.24)}
/* The press registers under the thumb: a small, fast dip on touch down. */
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.6;cursor:default;transform:none;box-shadow:none}
/* Full width already sets the size, so the wide side padding only squeezes the
   label. Trimmed so the longest CTA holds one line down to 320. */
.btn--block{width:100%;padding-inline:16px}

/* ==========================================================================
   Header. One element: the name, centred. The hero owns the call to action,
   so the masthead carries nothing but the practice name and reads as a
   letterhead. Not sticky on purpose. A fixed bar would eat the mobile fold
   the hero CTA has to live inside.

   padding-block, never the padding shorthand: this element also carries .wrap,
   and a shorthand here resets .wrap's own 0 24px side padding to zero, which
   pins the wordmark flat against the screen edges.
   ========================================================================== */
.masthead{border-bottom:1px solid var(--border);background:var(--ground)}
.masthead-inner{
  display:flex;align-items:center;justify-content:center;
  padding-block:16px;
}
.wordmark{
  display:block;font-family:var(--serif);font-weight:700;
  font-size:clamp(1.24rem,4.6vw,1.72rem);line-height:1.2;letter-spacing:-.005em;
  color:var(--charcoal);text-align:center;
}
/* Only the pages that link the wordmark back to the landing get the 44px
   floor. On the landing itself the wordmark is plain text, so the hero keeps
   the vertical budget its CTA needs. */
.wordmark--link{display:flex;align-items:center;min-height:44px}

/* ==========================================================================
   Hero. Everything above the CTA is budgeted: at 375x660 the badge, the
   headline, the subline, the guarantee box and 44px of the button all have to
   fit. The trust line therefore sits BELOW the button, not above it.

   Vertical rhythm, deliberate: the fold holds four blocks, not seven elements.

     promise   eyebrow + headline + subline
     warranty  the guarantee card
     action    the button + its scarcity line
     proof     the trust row

   Inside a block the gap is 6-8px, between blocks it is 28 on desktop and 22
   on phones. The 3:1 ratio is what makes the grouping readable; equal gaps
   everywhere is what made the earlier fold feel crowded. Change one of these
   numbers and the grouping goes with it.
   ========================================================================== */
.hero{padding:26px 0 30px;text-align:center}
.hero-inner{max-width:760px;margin:0 auto}

.badge{
  display:inline-block;padding:6px 15px;border-radius:999px;
  background:var(--crimson-light);color:var(--crimson);
  font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.badge--gold{background:rgba(163,137,47,.16);color:#8A6410;letter-spacing:.08em}

/* Ad-to-page scent line: every static carries this exact sentence in gold
   serif, so the fold opens with it. Gold ink #8A6410 (the badge--gold tone)
   reads 5.0:1 on the ivory ground; --gold itself would fail small text. */
.hero-eyebrow{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(.9rem,2.6vw,1.06rem);line-height:1.4;
  color:#8A6410;
}

.hero h1{
  margin-top:16px;
  font-size:clamp(1.95rem,7.4vw,3.45rem);
  font-weight:700;line-height:1.1;
}
/* When the scent line leads, the headline sits close to it at every width;
   beats the 640px media override on specificity, so one rule covers both. */
.hero .hero-eyebrow+h1{margin-top:6px}
/* The promise line. Same face, same size, same weight as the headline it
   belongs to; crimson is the only difference. */
.h1-guarantee{color:var(--crimson)}
/* Inside the promise block. */
.hero-sub{
  margin:8px auto 0;max-width:620px;
  font-size:clamp(.96rem,2.4vw,1.14rem);line-height:1.55;color:var(--charcoal-light);
}
/* Second subline sentence, held to one line at every width: nowrap plus a
   vw-capped size, so it shrinks instead of wrapping or overflowing.

   3.6vw is the measured ceiling, not a guess. This line qualifies the reader,
   so it should not read as fine print, but nowrap means the narrowest screen
   sets the size for all of them. Ink vs column at 3.6vw: 272/284 at 320,
   319/339 at 375, 366/394 at 430. At 3.8vw it is 287/284 at 320, i.e. over. */
.sub-parents{display:block;white-space:nowrap;font-size:min(1.0625rem,3.6vw)}

/* Guarantee card, law-firm seal: warm ground, a crimson rule down the left,
   the promise set in the serif, terms below a hairline. Reused on the booking
   page, where it only sits tighter. */
/* Block boundary: promise ends, warranty begins.

   Padding is asymmetric on purpose so the INK is not. The 4px crimson spine
   counts as part of the box, so an even 16px would leave the text 20px from
   the left edge and 16px from the right, and every line would sit 4px right
   of the card's centre. 20 on the right restores it, measured, not guessed.
   Vertical padding stays at twice the largest inner gap (16 vs 8), which is
   what keeps the content from pressing against the walls. */
.guarantee{
  margin:28px auto 0;max-width:640px;text-align:left;
  padding:16px 20px 16px 16px;
  background:var(--warm-white);color:var(--charcoal);
  border-left:4px solid var(--crimson);
  border-radius:0 var(--radius) var(--radius) 0;
  box-shadow:var(--shadow);
}
.guarantee-head{display:flex;align-items:center;gap:10px}
/* Seal colours live here, not in fill/stroke attributes, so the card follows
   the crimson token like everything else. */
.guarantee-seal{flex:none;display:block}
.guarantee-seal circle{fill:var(--crimson)}
.guarantee-seal path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.guarantee-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--crimson);
}
.guarantee-main{
  margin-top:8px;
  font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.45;
  color:var(--charcoal);
}
/* Equal air on both sides: the divider separates, it does not lean. */
.guarantee-rule{margin:9px 0;border:0;border-top:1px solid var(--border)}
.guarantee-fine{font-size:13px;line-height:1.5;color:var(--charcoal-light)}
/* Booking page: reassurance under the calendar, not the hero argument. */
.guarantee--compact{margin-top:28px}

/* Block boundary: warranty ends, action begins. */
.hero-cta{margin-top:28px}
/* The primary action carries the most visual weight in the fold: taller than
   the base button, with a resting crimson shadow the guarantee card cannot
   match. Scoped to the hero; the shared .btn (header, forms) stays as is. */
.hero-cta .btn{
  min-height:56px;padding:15px 40px;font-size:1.05rem;
  box-shadow:0 8px 22px rgba(164,16,52,.18);
}

/* Scarcity sits under the button, where the decision is made, and close to it:
   it belongs to the action block, not between blocks. */
.spots{margin-top:8px;font-size:.9rem;font-weight:600;color:var(--crimson);text-align:center}

/* Block boundary: action ends, proof begins. */
.trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;
  margin-top:28px;list-style:none;
  font-size:.9rem;font-weight:500;color:var(--charcoal-light);
}
.trust li{display:flex;align-items:center;gap:8px;min-width:0}
/* Neutral markers. They separate the items; they are not the message. */
.trust li::before{content:"";width:5px;height:5px;border-radius:50%;background:#9AA1AB;flex:none}
/* The success-rate dot reads as a live signal, so it is green, larger and it
   breathes: the one colour in the row. The row follows the ad proof-line
   order (95% first, then 50+). Class hooks, not nth-child: the row was
   reordered once already, and position-coupled styling moves silently.
   Switched off under prefers-reduced-motion in the media block at the bottom. */
.trust .trust-signal::before{
  width:7px;height:7px;background:#16A34A;border-radius:50%;
  animation:cacBreathe 2s ease-in-out infinite;
}
/* The school names are the proof, not a footnote: ink-dark and semibold,
   while the two counters stay muted.

   No marker on this one. The dot is a separator between two look-alike
   counters; the schools already separate themselves by weight. It also fixes
   a real defect: the row wraps at every width up to 680px, and a leading
   separator dot at the start of line two reads as a bullet point. Solving it
   by weight instead of a breakpoint means no width can bring it back. */
.trust .trust-schools{color:var(--charcoal);font-weight:600}
.trust .trust-schools::before{display:none}
@keyframes cacBreathe{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(22,163,74,.45)}
  50%{opacity:.65;box-shadow:0 0 0 6px rgba(22,163,74,0)}
}

/* ==========================================================================
   Founder.
   ========================================================================== */
.founder{display:grid;grid-template-columns:260px 1fr;gap:44px;align-items:center;max-width:1000px;margin:0 auto}
.founder-photo{min-width:0}
/* The headshot is framed like every other card on the page: hairline border,
   card radius, and the crimson edge down the left that the guarantee card uses.
   aspect-ratio is stated so the border box keeps the exact size it had before
   the frame was added (border-box sizing makes the ratio apply to the outer
   box, so the 1px/4px borders eat inwards instead of pushing the layout). */
.founder-photo img{
  display:block;width:100%;height:auto;aspect-ratio:570/797;
  object-fit:cover;object-position:top;
  border:1px solid var(--border);
  border-left:4px solid var(--crimson);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.founder-body{min-width:0}
.founder-body h2{font-size:clamp(1.7rem,3.6vw,2.4rem)}
/* Same eyebrow as the guarantee card: the affiliation labels the name, it does
   not compete with it. */
.founder-school{
  margin-top:4px;
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--crimson);
}
.founder-list{margin-top:20px;list-style:none;display:grid;gap:11px}
.founder-list li{position:relative;padding-left:28px;font-size:1rem;line-height:1.5;color:var(--charcoal-light)}
/* Seal marker, same drawing as the guarantee card: a filled crimson disc with
   the white tick on top. Colours stay on the tokens, so the ::after only masks
   the seal path out of a white block. Centred on the first line box (24px). */
.founder-list li::before{
  content:"";position:absolute;left:0;top:3px;
  width:18px;height:18px;border-radius:50%;
  background:var(--crimson);
}
.founder-list li::after{
  content:"";position:absolute;left:0;top:3px;
  width:18px;height:18px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 14.4l4 3.9 8-8.2' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 14.4l4 3.9 8-8.2' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat;
}
.founder-quote{
  margin-top:24px;padding:4px 0 4px 20px;border-left:3px solid var(--crimson);
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.02rem,2.2vw,1.24rem);line-height:1.55;color:var(--charcoal);
}
/* The section ends on the offer, not on the quote. Text link, not a second
   button: the hero already owns the primary action. 44px tall for the thumb. */
.founder-link,.essay-link{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:8px;
  font-weight:600;text-decoration:none;
}
.founder-link{color:var(--crimson)}
.founder-link:hover,.essay-link:hover{text-decoration:underline}
.founder-link svg,.essay-link svg{
  flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

/* ==========================================================================
   Stat cards. Shared by "Proven Results" and the essay database.
   ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stat{
  min-width:0;padding:32px 24px;text-align:center;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
/* tabular-nums keeps every digit the same width, so a number counting up from
   0 to 95 does not jitter the card while it runs. */
.stat-num{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(2.2rem,5vw,3.1rem);line-height:1;color:var(--crimson);font-variant-numeric:tabular-nums}
.stat-label{margin-top:12px;font-size:.96rem;line-height:1.45;color:var(--charcoal-light)}

/* The 95% card carries the claim the page rests on. It stays white like its
   neighbours (the band is already crimson-light, so a tinted fill would sink
   the card into the background) and takes the crimson left edge the guarantee
   card and the founder photo already use. */
.stat--featured{
  border-left:4px solid var(--crimson);
  border-radius:0 var(--radius) var(--radius) 0;
}
/* The larger number is a desktop affordance only. Stacked in one column the
   cards no longer share a grid row, so a taller number would make this card
   taller than the other two. */
@media (min-width:641px){
  .stat--featured .stat-num{font-size:clamp(2.42rem,5.5vw,3.41rem)}
}
/* Pointer devices only. A touch device would latch the hover state after a tap
   and leave the card stuck in its lifted position. Scoped to #results so the
   gold cards on the dark band, which deliberately carry no shadow, stay flat. */
@media (hover:hover){
  /* The card already rests on var(--shadow), so the lift is the whole effect;
     declaring the same shadow again on :hover animated nothing. */
  #results .stat{transition:transform 150ms ease}
  #results .stat:hover{transform:translateY(-2px)}
}

.stat--gold{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);box-shadow:none}
.stat--gold .stat-num{color:var(--gold-on-dark)}
.stat--gold .stat-label{color:rgba(255,255,255,.85)}
/* "Each essay" is a phrase, not a figure, so it is set smaller than the two
   real numbers next to it. The line-height is pinned to the numeric font-size
   rather than left at 1, so the value line occupies exactly the same box and
   the card keeps the height it had. Must stay after .stat-num: same
   specificity, so order decides. */
.stat-num--text{font-size:1.6rem;line-height:clamp(2.2rem,5vw,3.1rem)}

/* ==========================================================================
   Comparison: typical consulting versus this approach.
   ========================================================================== */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.compare-col{
  min-width:0;padding:28px 26px;border-radius:var(--radius);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
}
.compare-col--ours{background:#fff;border-color:#fff;color:var(--charcoal)}
.compare-col h3{font-size:1.28rem}
.compare-col--ours h3{color:var(--charcoal)}
/* The competitor column gets a label, not a headline. Same eyebrow the
   guarantee card and the founder affiliation use, in the muted tone this
   surface already gives its list items. Must stay after the .compare-col h3
   rule above: equal specificity, so order decides. */
.compare-col--theirs h3{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.compare-list{margin-top:18px;list-style:none;display:grid;gap:12px}
.compare-list li{position:relative;padding-left:28px;font-size:1rem;line-height:1.5}
/* Both columns use the same seal drawing at the same 28-unit scale, so the
   contrast between them is what the mark says, not how loudly it is drawn.
   Deliberately no red/green: the disc takes its tone from the surface it sits
   on. Typical is on the crimson band, so its disc is muted white with the X
   knocked out; Our Approach is on a white card, so it carries the crimson seal
   the founder bullets already use. Centred on the 24px first line box. */
.compare-list li::before{
  content:"";position:absolute;left:0;top:3px;
  width:18px;height:18px;border-radius:50%;
  background:rgba(255,255,255,.28);
}
.compare-list li::after{
  content:"";position:absolute;left:0;top:3px;
  width:18px;height:18px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9.5 9.5l9 9M18.5 9.5l-9 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9.5 9.5l9 9M18.5 9.5l-9 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat;
}
.compare-col--ours .compare-list li::before{background:var(--crimson)}
.compare-col--ours .compare-list li::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 14.4l4 3.9 8-8.2' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 14.4l4 3.9 8-8.2' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.compare-col--theirs .compare-list li{color:rgba(255,255,255,.78)}
.compare-note{
  max-width:760px;margin:32px auto 0;text-align:center;
  font-size:1.06rem;line-height:1.65;color:rgba(255,255,255,.9);
}
/* The three lines build to this one. em keeps it one step above whatever the
   paragraph is set to; on phones the <br> is off and it simply lands at the
   end of the sentence, which is where the emphasis belongs anyway. */
.compare-punch{font-size:1.15em;font-weight:700;color:#fff}

/* ==========================================================================
   Process steps.
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{
  min-width:0;padding:28px 24px;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
}
.step-mark{display:flex;align-items:center;gap:12px}
.step-circle{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--crimson);color:#fff;
  font-family:var(--serif);font-weight:700;font-size:1.16rem;
}
.step-badge{
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  color:var(--crimson);
}
.step h3{margin-top:16px;font-size:1.18rem}
.step-list{margin-top:14px;list-style:none;display:grid;gap:9px}
.step-list li{position:relative;padding-left:20px;font-size:.96rem;line-height:1.5;color:var(--charcoal-light)}
.step-list li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--crimson)}

/* ==========================================================================
   Essay database.
   ========================================================================== */
.essay-lead{max-width:760px;margin:0 auto;text-align:center;font-size:1.08rem;line-height:1.65;color:rgba(255,255,255,.9)}
.essay-gold{
  /* The 40px used to sit underneath, pushing the card grid away. Now that this
     is the closing promise the spacing belongs above it, separating it from the
     footnote, so the bridge link can sit tight beneath it as one unit. */
  margin:40px auto 0;text-align:center;
  font-size:1rem;font-weight:700;color:var(--gold-on-dark);
}
.disclaimer{
  max-width:760px;margin:32px auto 0;padding:16px 20px;text-align:center;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);
  background:rgba(255,255,255,.07);
  font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.85);
}
/* White sibling of the founder link, for the crimson band. Sized to its own
   content so the 44px target is the link and not the whole row. */
.essay-link{display:flex;width:fit-content;margin:8px auto 0;color:#fff}

/* ==========================================================================
   Campus strip. 4:3 boxes, image cover-filled, caption over a dark gradient.
   ========================================================================== */
.campus{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.campus figure{position:relative;min-width:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.campus-frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--muted)}
.campus-frame img{width:100%;height:100%;object-fit:cover}
.campus-frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(37,43,55,.72) 0%,rgba(37,43,55,.16) 45%,transparent 75%);
}
.campus figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:14px 18px;color:#fff;
  font-family:var(--serif);font-weight:700;font-size:1.16rem;
}

/* ==========================================================================
   Testimonials.
   ========================================================================== */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{
  min-width:0;display:flex;flex-direction:column;position:relative;
  padding:28px 26px;background:var(--warm-white);border-radius:var(--radius);
  color:var(--charcoal);
}
/* Opening quote glyph, set in the serif so it reads as typography rather than
   punctuation. Placed absolutely inside the card's own top padding, so it
   carries the mark without adding a pixel to the card height. Unpaired by
   design: the enclosing straight quotes were taken out of the six quotes and
   this mark opens them instead, which is the pull-quote convention. */
.quote::before{
  content:"\201C";
  position:absolute;top:10px;left:26px;
  font-family:var(--serif);font-weight:700;font-size:20px;line-height:1;
  color:var(--crimson);opacity:.55;
}
.quote blockquote{font-size:1rem;line-height:1.6}
.quote figcaption{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--border);
}
/* The admission is the result the quote is evidence for, so it leads the
   attribution and carries the same seal the founder bullets use, one size
   down. The name and year identify the source, quietly, underneath. */
.quote-result{
  position:relative;display:block;padding-left:22px;
  font-size:15px;font-weight:600;line-height:1.4;color:var(--crimson);
}
.quote-result::before{
  content:"";position:absolute;left:0;top:3.5px;
  width:14px;height:14px;border-radius:50%;background:var(--crimson);
}
.quote-result::after{
  content:"";position:absolute;left:0;top:3.5px;
  width:14px;height:14px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 14.4l4 3.9 8-8.2' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 14.4l4 3.9 8-8.2' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat;
}
.quote-who{
  display:block;margin-top:5px;
  font-size:.82rem;font-weight:500;line-height:1.45;color:var(--charcoal-light);
}

/* ==========================================================================
   FAQ accordion. Native details/summary, so it works without JavaScript.
   ========================================================================== */
.faq{display:grid;gap:12px;max-width:820px;margin:0 auto}
.faq details{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.faq details[open]{border-color:var(--crimson)}
/* Every question stays on one line: nowrap plus a vw-capped size, so short
   phones shrink the text instead of wrapping it. Nothing is ever clipped. */
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:56px;padding:14px 20px;cursor:pointer;list-style:none;
  font-family:var(--serif);font-weight:700;line-height:1.35;
  font-size:min(1.0625rem,3.6vw);white-space:nowrap;
  color:var(--charcoal);
}
.faq summary::-webkit-details-marker{display:none}
/* The card clips its overflow to keep the rounded corners, and that clip
   swallowed the global focus ring, which sits 3px outside the summary. Drawn
   inward it is the same 3px crimson indicator, just inside the clip box, where
   the keyboard user can actually see it. */
.faq summary:focus-visible{outline-offset:-3px}
.faq summary::after{
  content:"";flex:none;width:11px;height:11px;
  border-right:2.5px solid var(--crimson);border-bottom:2.5px solid var(--crimson);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
/* The card runs to 820px, which puts the answer text near 79 characters a line
   on desktop. Capped to a 65ch text column; the +40px is this rule's own
   horizontal padding, since border-box would otherwise take it out of the
   column. Left-aligned inside the card, so the questions stay the anchor. */
.faq-answer{
  padding:0 20px 18px;max-width:calc(65ch + 40px);
  font-size:.98rem;line-height:1.62;color:var(--charcoal-light);
}

/* ==========================================================================
   Application form.
   ========================================================================== */
.apply-form{
  max-width:680px;margin:0 auto;padding:28px 24px;
  background:var(--warm-white);border-radius:16px;color:var(--charcoal);
  display:grid;gap:16px;
}
.field{display:grid;gap:6px;min-width:0}
.field > label{font-size:.88rem;font-weight:600}
/* 16px is the floor: anything smaller makes iOS Safari zoom on focus. The box
   gets tighter around it instead. */
.field input{
  width:100%;min-height:46px;padding:11px 14px;
  font-family:var(--sans);font-size:16px;line-height:1.4;color:var(--charcoal);
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
}
/* Placeholder text is text: it has to clear 4.5:1 on both grounds this input
   ever shows, white and the #FFF7F8 it turns when flagged invalid. The old
   #9AA1AE reached 2.60:1. Still far lighter than the --charcoal value text, so
   a hint never reads as something already typed. */
.field input::placeholder{color:#6B7280}
.field input:focus-visible{border-color:var(--crimson);outline-offset:1px}
.field input[aria-invalid="true"]{border-color:var(--crimson);background:#FFF7F8}

.field-error{display:none;font-size:.85rem;font-weight:600;color:var(--crimson)}
.field-error.show{display:block}

.qgroup{display:grid;gap:8px;min-width:0;padding-top:4px;border-top:1px solid var(--border)}
/* The rule divides one question from the next, so the first one carries none.
   An explicit modifier, because :first-of-type never matches here: three
   div.field siblings stand in front of the first div.qgroup. */
.qgroup--first{border-top:none;padding-top:0}
/* Every question is written to hold one line at 375. If a future edit needs
   two, the nowrap is the wrong lever: shorten the question. */
.qgroup-label{font-size:.92rem;font-weight:600;line-height:1.4}
.radio-row{display:flex;flex-wrap:wrap;gap:10px}

/* The native radio is stretched over the whole label at opacity 0: it stays
   focusable and keyboard-operable, the visible dot is drawn by the span, and
   the tap area is the full 48px label rather than a 16px circle. */
.radio-opt{
  /* 100px basis, not 120: two options then hold one row down to 320 instead
     of stacking, which is where the old flex:1 1 100% override came from. */
  position:relative;flex:1 1 100px;min-width:0;min-height:46px;
  display:flex;align-items:center;gap:10px;padding:9px 14px;
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
  font-size:.95rem;font-weight:500;cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.radio-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.radio-dot{
  flex:none;width:19px;height:19px;border-radius:50%;
  border:2px solid var(--border);background:var(--bg);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.radio-opt input:checked ~ .radio-dot{border-color:var(--crimson);box-shadow:inset 0 0 0 4px var(--crimson)}
.radio-opt:has(input:checked){border-color:var(--crimson);background:var(--crimson-light)}
.radio-opt:has(input:focus-visible){outline:3px solid var(--crimson);outline-offset:3px}

.form-note{font-size:.84rem;line-height:1.5;color:var(--charcoal-light);text-align:center}
/* Quiet line, not an alarm box. It sits on the dark apply band, so the muted
   tone is the same rgba the footer note uses on that ground; --charcoal-light
   is the light-ground equivalent and would be unreadable here. */
.noscript-note{
  max-width:680px;margin:0 auto;
  font-size:.95rem;line-height:1.55;text-align:center;
  color:rgba(255,255,255,.72);
}

/* ==========================================================================
   Footer.
   ========================================================================== */
.ftr{background:var(--charcoal-deep);color:#fff;padding:52px 0;text-align:center}
.ftr-brand{font-family:var(--serif);font-weight:700;font-size:1.28rem;letter-spacing:-.01em}
.ftr-note{margin:12px auto 0;max-width:560px;font-size:.94rem;line-height:1.6;color:rgba(255,255,255,.72)}
.ftr-copy{margin-top:22px;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* ==========================================================================
   Primitives consumed by book/index.html and thanks/index.html.
   They are declared here because all three pages share one stylesheet.
   ========================================================================== */

/* Booking placeholder panel: stands in until the calendar embed is wired. */
.slot{
  max-width:680px;margin:0 auto;padding:34px 28px;text-align:center;
  border:1px solid var(--crimson);border-radius:16px;background:var(--crimson-light);
}
.slot h2{font-size:clamp(1.2rem,3vw,1.6rem)}
.slot p{margin-top:12px;font-size:1rem;line-height:1.6;color:var(--charcoal)}
/* The manual way out of the booking waypoint. It is the only thing a visitor
   without JavaScript can act on, so it has to read as a link, not as prose. */
.slot-link{color:var(--crimson);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Calendly inline embed on the booking page. The height covers the month grid
   plus the time list on phones; anything longer scrolls inside the widget's
   own iframe rather than trapping the page. */
.calendly-inline-widget{max-width:900px;margin:0 auto;min-width:320px;height:760px}

/* Numbered "what happens next" list on the thank-you page. */
.next{max-width:680px;margin:0 auto;list-style:none;display:grid;gap:14px}
.next li{
  min-width:0;display:flex;align-items:flex-start;gap:16px;
  padding:20px 22px;background:var(--warm-white);
  border:1px solid var(--border);border-radius:var(--radius);
  font-size:1rem;line-height:1.55;
}
.next-num{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--crimson);color:#fff;
  font-family:var(--serif);font-weight:700;font-size:1rem;
}

/* ==========================================================================
   MEDIA QUERIES. All of them live here, after every base rule.
   An earlier media block at equal specificity would be dead code.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  /* The blanket rule above only shortens the animation; the name would survive
     and the dot would still hold a mid-keyframe look. This drops it outright. */
  .trust .trust-signal::before{animation:none}
  /* No press-dip either: the shortened transition would still move the button. */
  .btn:active{transform:none}
  /* Same reasoning for the stat cards: the lift would just happen instantly
     instead of not at all. Equal specificity to the rule above, so this block
     has to stay last in the file to win. */
  #results .stat:hover{transform:none}
}

@media (max-width:960px){
  .band{padding:64px 0}
  .stats,.steps,.quotes{grid-template-columns:repeat(2,1fr)}
  .founder{grid-template-columns:1fr;gap:28px;max-width:560px;text-align:center}
  .founder-list{text-align:left;max-width:420px;margin-left:auto;margin-right:auto}
  .founder-quote{text-align:left}
  .founder-photo{max-width:260px;margin:0 auto}
  .compare{grid-template-columns:1fr}
  /* Stacked, the offer leads and the competitor follows as the contrast.
     Visual order only: the DOM keeps theirs-then-ours, so the two-column
     desktop reading stays intact. */
  .compare-col--ours{order:-1}
  .campus{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .band{padding:52px 0}
  .section-head{margin-bottom:32px}
  /* Phone budget: the same four-block rhythm, one step tighter. Between-block
     gaps drop 28 -> 22, and the hero tail shrinks because the band underneath
     brings its own top padding, so the space is better spent inside the fold.
     The three gap rules are scoped to .hero on purpose: a bare .guarantee here
     would sit later in the file than .guarantee--compact and silently outrank
     it on the booking page, whose card lives outside the hero. */
  /* The button is sized by its label, so it stays 169px wide while the content
     column grows with the screen: 59% of the column at 320, 43% at 430. On a
     phone the primary action should not be the narrowest thing in the fold, so
     it scales with the column instead. Not full width: the card owns that edge,
     and a full-bleed button reads cheaper than this brand wants. */
  .hero-cta .btn{min-width:72%}
  .hero{padding:16px 0 8px}
  .hero h1{margin-top:14px}
  .hero .guarantee{margin-top:22px}
  .hero .hero-cta{margin-top:22px}
  .hero .trust{margin-top:22px}
  .stats,.steps,.quotes{grid-template-columns:1fr}
  .apply-form{padding:24px 20px}
  /* Designed line breaks are a desktop affordance. On phones the text flows,
     so the space before each <br> is what keeps the words apart. */
  .compare-note br,.essay-lead br{display:none}
  /* Drops the clamp's lower bound so the vw term keeps scaling: the wordmark
     holds one line down to 320 instead of wrapping to two. With the header CTA
     gone it owns the full width, so the term is far larger than it was. */
  .wordmark{font-size:min(1.5rem,5.2vw)}
  .masthead-inner{padding-block:13px}
  .campus figcaption{padding:11px 14px;font-size:1.02rem}
  .ftr{padding:42px 0}
}