/* ============================================================================
   cheaponlinematuredriver.com — COAST ROUTE
   Colour roles and measured contrast are documented in _tokens.css.
   Built for readers 55 and older: 19px body floor, generous line height,
   large targets, no font-size widget needed.

   2026-08-27 — "make it feel more expensive" pass. The palette is UNCHANGED,
   so every measured contrast pair still holds. What changed is type, space and
   geometry, which is where the perceived value actually lives:

     - Editorial split: Source Serif 4 now sets the BODY prose as well as the
       headings; the sans is demoted to UI chrome (nav, buttons, labels).
     - Optical sizing is actually used — 'opsz' 60 on display sizes, 20 on
       text. Source Serif 4 is a variable font and was being loaded with the
       axis and then ignored, so headlines were being set with text-weight
       hairlines at 54px.
     - Boxes became rules. Filled cards with tinted left-borders read as
       template; hairline-separated type reads as considered. One framed panel
       survives, because one is deliberate and five are busy.
     - Buttons lost their 4px raised bottom edge and pill radius. Restraint in
       geometry is most of what separates premium from consumer.
     - Section rhythm opened up: 64px -> 92px.
   ========================================================================= */

:root{
  --structure:#2C4A44;      --structure-dk:#1E332F;
  --action:#B85731;         --action-dk:#A94F2E;
  --money:#24594A;
  --accent:#6F8C80;         --accent-lt:#CFDBD4;
  --paper:#F8F4ED;          --card:#FFFDF9;
  --line:#E0D6C6;           --muted:#55605A;

  --serif:"Source Serif 4",Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1160px;
  --r:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--structure);
     font:400 19px/1.75 var(--serif);
     font-variation-settings:"opsz" 20;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
p{margin:0;text-wrap:pretty}
a{color:var(--action-dk)}

h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;text-wrap:balance;
         font-variation-settings:"opsz" 60}
h1{letter-spacing:-.028em;line-height:1.02}
h2{letter-spacing:-.022em;line-height:1.08}
h3{letter-spacing:-.012em;line-height:1.18}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 26px}

.skip{position:absolute;left:-9999px;top:0;background:var(--structure);color:#fff;
      padding:12px 18px;z-index:50;font-family:var(--sans);font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--action-dk);outline-offset:3px}

/* small caps label — one device, used for every eyebrow on the site */
.eyebrow,.label{font-family:var(--sans);font-size:12px;font-weight:700;
                letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---------- ONE header bar. There is no utility strip; a stacked strip
   above the nav reads as two headers and is a house defect. Everything the
   visitor needs is in this single row. ---------- */
.nav{background:var(--card);border-bottom:1px solid var(--line)}
.nav-in{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:center;justify-content:space-between;
        width:100%;max-width:var(--wrap);margin:0 auto;padding:22px 26px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--structure)}
.brand-mark{width:46px;height:46px;flex:0 0 auto}
.brand-name{font-family:var(--serif);font-weight:600;font-size:23px;line-height:1.05;
            letter-spacing:-.018em;font-variation-settings:"opsz" 40}
.brand-sub{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;
           text-transform:uppercase;color:var(--muted);margin-top:5px}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 30px;margin:0;padding:0;list-style:none;
           font-family:var(--sans)}
.nav-links a{color:var(--structure);text-decoration:none;font-weight:600;font-size:16px;
             padding:4px 0;border-bottom:1px solid transparent;letter-spacing:.005em}
.nav-links a:hover,.nav-links a[aria-current="page"]{border-bottom-color:var(--structure)}

/* ---------- buttons: flat, tight radius, no raised edge ---------- */
.btn{display:inline-block;background:var(--action);color:#fff;text-decoration:none;
     font:600 18px/1.25 var(--sans);letter-spacing:.008em;padding:19px 36px;border-radius:var(--r);
     transition:background-color .15s ease}
.btn:hover{background:var(--action-dk)}
.btn:active{background:var(--action-dk)}
.btn-lg{font-size:19px;padding:21px 42px}
.btn-ghost{display:inline-block;text-decoration:none;color:var(--structure);
           font:600 18px/1.25 var(--sans);padding:19px 32px;border-radius:var(--r);
           border:1px solid var(--structure);background:transparent;
           transition:background-color .15s ease,color .15s ease}
.btn-ghost:hover{background:var(--structure);color:var(--card)}

/* ---------- horizon rule: the recurring motif, drawn finer ---------- */
.horizon{border:0;height:0;width:96px;margin:30px auto;padding-bottom:4px;
         border-top:1px solid var(--accent);border-bottom:3px double var(--accent)}
.horizon-l{margin-left:0;margin-right:auto}

/* ---------- hero ---------- */
.hero{background:var(--paper);border-bottom:1px solid var(--line)}
.hero-in{width:100%;max-width:var(--wrap);margin:0 auto;padding:84px 26px 88px;
         display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
         gap:68px;align-items:center}
/* Photo left, copy right — placed by grid column rather than `order` so the
   H1 stays first in the DOM for screen readers and crawlers. */
.hero-in > .hero-copy{grid-column:2;grid-row:1}
.hero-in > .media-hero{grid-column:1;grid-row:1}
.hero .eyebrow{display:block;margin:0 0 20px}
.hero h1{font-size:clamp(38px,5.4vw,62px)}
.lede{font-size:clamp(19px,1.7vw,22px);line-height:1.62;max-width:34em;color:var(--structure)}
.hero .horizon{margin-left:0;margin-right:auto}
/* a hero with no photo: one centred column. Without this the grid above splits
   the eyebrow, rule, headline and lede across two tracks. */
.hero-solo{grid-template-columns:minmax(0,1fr);max-width:860px;text-align:center}
.hero-solo .lede{margin-left:auto;margin-right:auto}
.hero-solo .horizon{margin-left:auto;margin-right:auto}

.hero-acts{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;margin-top:38px;
           padding-top:34px;border-top:1px solid var(--line)}
.undernote{margin-top:24px;font-size:16px;color:var(--muted);line-height:1.6}

/* price: set as type, not as a badge */
.ticket{display:flex;align-items:baseline;gap:14px;margin:0;color:var(--money);
        font-variant-numeric:tabular-nums lining-nums}
.ticket-cur{font-family:var(--serif);font-size:26px;font-weight:600;align-self:flex-start;
            margin-top:.5em}
.ticket-fig{font-family:var(--serif);font-size:clamp(48px,5vw,62px);font-weight:600;
            letter-spacing:-.035em;line-height:.9;font-variation-settings:"opsz" 60}
.ticket-tag{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;
            text-transform:uppercase;color:var(--muted);line-height:1.7;text-align:left}

/* media boxes own their height; the image is positioned inside them, so a tall
   original can never stretch the row (CSS-PITFALLS) */
.media{position:relative;overflow:hidden;border-radius:var(--r);width:100%;background:var(--card)}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media-hero{min-height:580px}
.media-hero img{object-position:center 22%}
.media-course{min-height:440px}
.media-course img{object-position:62% center}
.media-support{min-height:420px}
.media-support img{object-position:58% center}

/* ---------- generic section ---------- */
.sec{padding:92px 0}
.sec-alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec h2{font-size:clamp(30px,3.6vw,44px)}
.sec-lede{margin-top:20px;font-size:20px;color:var(--muted);max-width:56ch;line-height:1.65}

/* ---------- steps: hairline columns, serif numerals, no cards ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:56px;
       border-top:1px solid var(--line)}
.step{padding:38px 40px 8px 0}
.step + .step{border-left:1px solid var(--line);padding-left:40px}
.step h3{font-size:23px;margin-bottom:14px}
.step p{font-size:18px;color:var(--muted);line-height:1.65}
/* MUST stay after `.step p` and MUST carry the p — the badge is a <p>, so
   `.step p` (0,1,1) beats a bare `.step-n` (0,1,0) and silently repaints the
   numeral as body copy. This regressed once already during a stylesheet
   rewrite; see CSS-PITFALLS.md. */
.step p.step-n{font-family:var(--serif);font-size:52px;font-weight:400;line-height:1;
        color:var(--accent);margin:0 0 22px;font-variation-settings:"opsz" 60;
        letter-spacing:-.03em}

/* ---------- value band ---------- */
.band{background:var(--structure);color:var(--card);padding:76px 0}
.band-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px;
         width:100%;max-width:var(--wrap);margin:0 auto;padding:0 26px}
.vp h3{font-size:21px;margin-bottom:12px;font-variation-settings:"opsz" 40}
.vp p{font-size:17px;line-height:1.65;opacity:.8}
.vp a{color:#fff;font-weight:600;text-decoration-thickness:1px;text-underline-offset:3px}

/* ---------- covered list: hairline rows, a rule as the marker ---------- */
.covered{margin:44px 0 0;padding:0;list-style:none;display:grid;gap:0}
.covered li{position:relative;padding:22px 0 22px 42px;border-top:1px solid var(--line);
            font-size:19px;line-height:1.5}
.covered li:last-child{border-bottom:1px solid var(--line)}
.covered li::before{content:"";position:absolute;left:0;top:1.02em;width:22px;height:1px;
                    background:var(--accent)}

/* ---------- the one framed panel on the page ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
      padding:40px 38px;width:100%}
.card h3{font-size:25px;margin-bottom:24px}
.card ul{margin:0;padding:0;list-style:none;display:grid;gap:18px}
.card li{padding-left:26px;position:relative;font-size:18px;line-height:1.55;color:var(--muted)}
.card li::before{content:"";position:absolute;left:0;top:.78em;width:12px;height:1px;
                 background:var(--accent)}
.split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px;align-items:start}
/* inside a split column the list is narrow; two tracks give ragged card
   heights, so it stays one column there at every width */
.split .covered{grid-template-columns:minmax(0,1fr)}
/* photo column is the supporting element here, so it gets the smaller track */
.split-media{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
/* contact: photo and the phone card carry equal weight, so equal tracks */
.split-even{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}

.prose p{margin-bottom:26px;max-width:60ch;font-size:19px;line-height:1.75}
.prose p:last-child{margin-bottom:0}

/* ---------- facts ---------- */
.facts{margin:48px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.facts div{display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,2.2fr);gap:10px 44px;
           padding:24px 0;border-top:1px solid var(--line)}
.facts div:last-child{border-bottom:1px solid var(--line)}
.facts dt{font-family:var(--sans);font-weight:600;color:var(--muted);font-size:15px;margin:0;
          letter-spacing:.01em;padding-top:.28em}
.facts dd{margin:0;font-size:19px;line-height:1.6}
.facts .mny{color:var(--money);font-weight:600;font-variant-numeric:tabular-nums lining-nums}

/* ---------- closing CTA ---------- */
.close{background:var(--card);text-align:center;padding:100px 0;border-top:1px solid var(--line)}
.close h2{font-size:clamp(32px,4vw,48px)}
.close .lede{margin:20px auto 0}
.close-acts{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:40px}

/* ---------- contact page pieces ---------- */
.callcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
          padding:48px 40px;text-align:center;width:100%}
.callcard .eyebrow{display:block;margin-bottom:20px}
.callcard .tel{display:inline-block;font-family:var(--serif);
               font-size:clamp(34px,4.4vw,48px);font-weight:600;line-height:1.05;
               color:var(--structure);text-decoration:none;letter-spacing:-.03em;
               margin:0 0 20px;font-variant-numeric:tabular-nums lining-nums;
               font-variation-settings:"opsz" 60;overflow-wrap:anywhere}
.callcard .tel:hover{color:var(--action-dk)}
.callcard .hrs{font-size:18px;color:var(--muted);line-height:1.7}

/* ---------- footer ---------- */
.foot{background:var(--structure-dk);color:var(--card);padding:76px 0 44px}
.foot-in{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 26px;text-align:center}
.foot-name{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.02em;
           font-variation-settings:"opsz" 40}
.foot .horizon{border-top-color:rgba(255,253,249,.4);border-bottom-color:rgba(255,253,249,.4)}
.foot-nav{display:flex;flex-wrap:wrap;gap:12px 34px;justify-content:center;list-style:none;
          margin:26px 0 0;padding:0;font-family:var(--sans)}
.foot-nav a{color:var(--card);text-decoration:none;font-weight:600;font-size:16px}
.foot-nav a:hover{text-decoration:underline;text-underline-offset:3px}
.foot-contact{margin-top:28px;font-size:18px;opacity:.9;line-height:1.8}
.foot-contact a{color:var(--card);font-weight:600;text-decoration:none}
.colophon{margin-top:38px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);
          font-size:14px;opacity:.62;line-height:1.8;font-family:var(--sans)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-in{grid-template-columns:minmax(0,1fr);gap:44px;padding:56px 26px 60px}
  /* one column: fall back to DOM order so the headline leads on a phone */
  .hero-in > .hero-copy,.hero-in > .media-hero{grid-column:auto;grid-row:auto}
  .media-hero{min-height:380px}
  .media-hero img{object-position:center 20%}
  .media-course{min-height:320px}
  .media-support{min-height:300px}
  .steps{grid-template-columns:minmax(0,1fr);margin-top:40px}
  .step{padding:32px 0 8px}
  .step + .step{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .band-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
  .split,.split-media,.split-even{grid-template-columns:minmax(0,1fr);gap:44px}
  .covered{grid-template-columns:minmax(0,1fr)}
  .sec{padding:64px 0}
  .close{padding:72px 0}
}
@media (max-width:720px){
  body{font-size:18px}
  .facts div{grid-template-columns:minmax(0,1fr);gap:6px;padding:20px 0}
  .facts dt{padding-top:0}
  .nav-in{padding:18px 26px;gap:14px 22px}
  .card{padding:32px 28px}
  .callcard{padding:38px 28px}
}
@media (max-width:520px){
  .band-in{grid-template-columns:minmax(0,1fr)}
  .btn,.btn-ghost,.btn-lg{width:100%;text-align:center}
  .hero-acts,.close-acts{flex-direction:column;align-items:stretch;gap:22px}
  .ticket{justify-content:flex-start}
  .brand-name{font-size:21px}
  .sec{padding:56px 0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* footer login: outlined like the header control, same reasoning */
.foot-nav a.foot-login{background:var(--card);color:var(--structure-dk);font-weight:700;
     font-size:14px;letter-spacing:.04em;padding:9px 18px;border-radius:var(--r);
     text-decoration:none;transition:background-color .15s ease,color .15s ease}
.foot-nav a.foot-login:hover{background:#fff;color:var(--action-dk);text-decoration:none}

/* ---------------------------------------------------------------------------
   Contact page rhythm. The home page earns its 92px sections because it has
   eight of them to pace; contact has three, so the same spacing reads as
   drift rather than composure. Tightened here rather than globally.
   --------------------------------------------------------------------------- */
.page-contact .hero-in{padding:58px 26px 54px}
.page-contact .hero .horizon{margin:22px auto}
.page-contact .hero h1{font-size:clamp(34px,4.6vw,52px)}
.page-contact .sec{padding:58px 0}
.page-contact .sec + .sec{padding-top:58px}
.page-contact .close{padding:66px 0}
.page-contact .callcard{padding:38px 32px}
.page-contact .callcard .tel{margin-bottom:14px}
.page-contact .split{gap:48px}
.page-contact .covered{margin-top:30px}
.page-contact .card h3{margin-bottom:18px}
.page-contact .card ul{gap:14px}
@media (max-width:960px){
  .page-contact .hero-in{padding:44px 26px 42px}
  .page-contact .sec{padding:48px 0}
  .page-contact .close{padding:56px 0}
}

/* ---------------------------------------------------------------------------
   Header utilities — the right-hand group of the ONE header bar.
   Two entry points, ranked: Register is the action colour and owns it; Log in
   is an outline so returning students can find it without competing.
   --------------------------------------------------------------------------- */
.nav-main{margin-left:auto}
.nav-utils{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;font-family:var(--sans)}
.nav-tel{display:block;text-decoration:none;color:var(--structure);font-weight:700;font-size:17px;
         line-height:1.2;letter-spacing:.005em;font-variant-numeric:tabular-nums lining-nums;
         white-space:nowrap}
.nav-tel:hover{color:var(--action-dk)}
.nav-hours{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--muted);
           margin-top:3px;white-space:nowrap}
.nav-login{text-decoration:none;color:var(--structure);font-weight:600;font-size:15px;
           padding:11px 20px;border:1px solid var(--structure);border-radius:var(--r);
           white-space:nowrap;transition:background-color .15s ease,color .15s ease}
.nav-login:hover{background:var(--structure);color:var(--card)}
.nav-cta{text-decoration:none;background:var(--action);color:#fff;font-weight:600;font-size:15px;
         padding:12px 22px;border-radius:var(--r);white-space:nowrap;
         transition:background-color .15s ease}
.nav-cta:hover{background:var(--action-dk)}

@media (max-width:1100px){
  .nav-in{gap:14px 22px}
  .nav-main{margin-left:0;order:3;width:100%}
  .nav-links{gap:8px 24px}
  .nav-utils{order:2}
}
@media (max-width:560px){
  .nav-utils{width:100%;gap:10px 14px}
  .nav-login,.nav-cta{flex:1 1 auto;text-align:center}
}

/* ---------------------------------------------------------------------------
   Collapsible menu — MOBILE ONLY, and it collapses the PAGE LINKS ONLY.
   The phone, Log in and Register never enter the toggle: burying a returning
   student's way back in behind a hamburger is a house defect (CLAUDE.md).
   The markup ships open with aria-expanded="true", so with JS off nothing is
   unreachable; the script collapses it after it runs.
   --------------------------------------------------------------------------- */
.nav-toggle{display:none;align-items:center;gap:10px;background:transparent;cursor:pointer;
            border:1px solid var(--line);border-radius:var(--r);color:var(--structure);
            font:600 15px/1 var(--sans);padding:12px 16px}
.nav-toggle svg{fill:currentColor;display:block}
.nav-toggle:hover{border-color:var(--structure)}

@media (max-width:1080px){
  .nav-in{gap:14px 20px}
  .nav-toggle{display:inline-flex;order:2}
  .nav-utils{order:3;margin-left:auto}
  .nav-main{order:4;margin-left:0;width:100%;border-top:1px solid var(--line);padding-top:6px}
  .nav-links{gap:2px 0;flex-direction:column;align-items:stretch}
  .nav-links a{display:block;padding:14px 0;border-bottom:0;font-size:17px}
  .nav-links a[aria-current="page"]{color:var(--action-dk)}
  .nav-links li + li{border-top:1px solid var(--line)}
  .nav[data-nav="collapsed"] .nav-main{display:none}
}
@media (max-width:600px){
  .nav-in{padding:16px 20px}
  .brand-name{font-size:19px}
  .brand-mark{width:40px;height:40px}
  .nav-utils{width:100%;order:4;gap:10px 12px;margin-left:0}
  .nav-toggle{margin-left:auto}
  .nav-tel{width:100%;font-size:19px}
  .nav-login,.nav-cta{flex:1 1 0;text-align:center;padding:14px 12px;font-size:16px}
  .nav-main{order:5}
}

/* One row at desktop, measured rather than hoped: brand + three links + phone +
   two controls must fit 1160px. The hours line was what broke it — it lives in
   the footer and on the contact page, where someone actually looks for it. */
.nav-in{gap:14px 26px}
.nav-links{gap:8px 26px}
.brand-name{font-size:21px}
.nav-links a{font-size:15px}
.nav-tel{font-size:18px}
.nav-hours{display:none}