/* ============================================================================
   cheaptrafficschool247.com — "Round the Clock"
   ----------------------------------------------------------------------------
   Role tokens. One colour owns one job and never a second one.

     --deep    structure   nav bar, headings, rules
     --ink     text        body headings, price numerals
     --act     action      buttons, links-that-do-something, tick rings
     --act-ink action/text the same coral darkened for SMALL text only
     --money   money       price numerals (ink weight + slab face, not hue)
     --cream   ground      page background
     --paper   surface     cards

   Measured contrast (WCAG 2.1, computed not eyeballed):
     ink   #0F3D52 on cream #FBF7EF ... 10.9:1   body + headings      AAA
     body  #3D5866 on cream #FBF7EF ...  7.4:1   paragraphs           AAA
     muted #5C7684 on cream #FBF7EF ...  5.1:1   secondary lines      AA
     act   #E23D22 on cream #FBF7EF ...  4.0:1   LARGE text + graphics only
     act-ink #B22D16 on cream ........... 6.0:1   small coral text     AA
     white on button mid #CC3A1B ........  5.0:1   button labels        AA
     white on deep #14526E .............. 10.2:1   nav                  AAA

   #E23D22 is BELOW 4.5:1 and must never carry small text. Use --act-ink.
   ========================================================================= */

:root{
  --deep:#14526E;
  --deep-d:#0F3D52;
  --ink:#0F3D52;
  --body:#3D5866;
  --muted:#5C7684;
  --act:#E23D22;
  --act-hi:#EE5236;
  --act-lo:#CF3419;
  --act-ink:#B22D16;
  --act-d:#8E2411;
  --money:#0F3D52;
  --cream:#FBF7EF;
  --cream-d:#F4EDE0;
  --paper:#fff;
  --line:#DCD3C4;
  --line-soft:#EAE2D4;

  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --slab:"Roboto Slab",Georgia,"Times New Roman",serif;

  --wrap:1140px;
  --pad:clamp(16px,4vw,32px);
  --r:14px;
  --r-sm:10px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--cream);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  overflow-wrap:anywhere;   /* break-word does NOT lower min-content width */
}

h1,h2,h3,h4,h5{color:var(--ink);margin:0;line-height:1.15;letter-spacing:-.015em;font-weight:800;text-wrap:balance}

p{margin:0 0 1em}
p:last-child{margin-bottom:0}

a{color:var(--act-ink);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--act-d)}

img{max-width:100%;height:auto;display:block}

/* legacy markup hygiene — stacked <br> and empty <p> open odd gaps */
p:empty{display:none}
br+br{display:none}

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

.skip{position:absolute;left:-9999px;top:0;background:var(--deep);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}

:focus-visible{outline:3px solid var(--act);outline-offset:2px;border-radius:4px}

/* ===========================================================================
   SECTION rhythm
   ======================================================================== */
.sec{padding-block:clamp(44px,7vw,76px)}
.sec--paper{background:var(--paper);border-block:1px solid var(--line-soft)}
.sec--deep{background:var(--deep);color:#D9E7EE}
.sec--deep h2,.sec--deep h3{color:#fff}

.sec-head{max-width:60ch;margin:0 auto clamp(28px,4vw,44px);text-align:center}
.sec-head h2{font-size:clamp(25px,3.4vw,34px)}
.sec-head p{margin:12px 0 0;color:var(--muted);font-size:16.5px}
.sec--deep .sec-head p{color:#B7CDD8}

.eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--act-ink);margin:0 0 10px
}
.sec--deep .eyebrow{color:#FFC4B6}

/* ===========================================================================
   COMPONENT — clock mark (the "24-7" made into an object)
   ======================================================================== */
/* Inline SVG, not the two pseudo-elements this used to be. The CSS version
   drew its hands as bare rectangles, which went visibly soft at 15px in the
   mobile header and could not be exported for anything else. The mark now
   scales cleanly at any size, inherits currentColor so it stays legible on the
   teal header and on paper, and there is a standalone copy at
   assets/img/logo.svg with the brand colours baked in. No extra request. */
.dial{width:1.75em;height:1.75em;flex:0 0 auto;display:block}

/* ===========================================================================
   COMPONENT — header / nav
   Student login is visible at EVERY width. It never collapses into the
   hamburger: a returning student must never have to hunt for the way back in.
   ======================================================================== */
.site-head{background:var(--deep);color:#fff;position:sticky;top:0;z-index:100}
.site-head a{color:#fff;text-decoration:none}

.head-in{
  display:flex;align-items:center;gap:14px;
  width:100%;max-width:var(--wrap);margin:0 auto;padding:12px var(--pad)
}

.brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800;letter-spacing:-.01em;flex:0 1 auto;min-width:0}
.brand .dial{font-size:17px}
.brand b{font-weight:800;white-space:nowrap}
.brand i{font-style:normal;color:#FFC4B6}

.nav{margin-left:auto}
.nav ul{display:flex;align-items:center;gap:clamp(12px,1.8vw,24px);list-style:none;margin:0;padding:0}
.nav a{font-size:13.5px;font-weight:600;letter-spacing:.02em;opacity:.94;padding-block:6px}
.nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}

.head-login{
  flex:0 0 auto;font-size:13px;font-weight:700;letter-spacing:.02em;
  border:1.5px solid rgba(255,255,255,.55);border-radius:7px;padding:8px 14px;white-space:nowrap
}
.head-login:hover{background:rgba(255,255,255,.12);border-color:#fff}

.nav-toggle{
  display:none;flex:0 0 auto;align-items:center;gap:8px;
  background:transparent;border:1.5px solid rgba(255,255,255,.45);border-radius:7px;
  color:#fff;font:700 13px/1 var(--sans);padding:9px 12px;cursor:pointer
}
.nav-toggle .bars{display:block;width:16px;height:2px;background:#fff;position:relative}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:16px;height:2px;background:#fff}
.nav-toggle .bars::before{top:-5px}
.nav-toggle .bars::after{top:5px}

@media (max-width:900px){
  .nav-toggle{display:flex}
  .nav{margin-left:auto;order:5;flex-basis:100%;display:none}
  .nav[data-open="true"]{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;padding:6px 0 10px}
  .nav a{display:block;padding:12px 2px;border-top:1px solid rgba(255,255,255,.16);font-size:15px}
}
/* Narrow header.
   The brand, the menu control and Student login all have to fit on one row —
   login never collapses into the hamburger. `white-space:nowrap` on the brand
   was stopping it from shrinking, so it ran underneath the Menu button at
   390px. Below 620px the brand is allowed to wrap onto two lines and the menu
   control drops its label (it keeps an aria-label), which buys back the space
   the brand needs. */
@media (max-width:620px){
  .head-in{gap:10px}
  .brand{font-size:13.5px;gap:8px;line-height:1.15}
  .brand .dial{font-size:15px}
  .brand b{white-space:normal}
  .nav-toggle-label{display:none}
  .nav-toggle{padding:9px 11px}
  .head-login{padding:8px 11px;font-size:12.5px}
}

/* ===========================================================================
   COMPONENT — licence pill
   ======================================================================== */
.lic{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:100px;
  padding:7px 15px;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  color:var(--deep);text-transform:uppercase
}
.lic b{color:var(--act-ink)}

/* ===========================================================================
   COMPONENT — hero
   One unit: ground, headline, ticks and the price on a single card. Never a
   floating badge plus a stranded price.
   ======================================================================== */
.hero{background:var(--cream);padding-block:clamp(34px,5.5vw,60px)}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(26px,4vw,44px);align-items:center
}
@media (max-width:880px){.hero-grid{grid-template-columns:minmax(0,1fr)}}

.hero h1{font-size:clamp(28px,4vw,38px);line-height:1.08;margin:16px 0 14px;text-wrap:pretty}
.hero h1 em{font-style:normal;color:var(--act)}
.hero-lede{font-size:clamp(15.5px,1.6vw,17px);color:var(--body);max-width:46ch;margin:0 0 22px}

.hero-media{
  position:relative;border-radius:var(--r);overflow:hidden;
  aspect-ratio:16/10;background:var(--cream-d);margin-top:26px
}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}

/* ===========================================================================
   COMPONENT — tick list (ONE badge system, one size, recoloured per surface)
   ======================================================================== */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:15px;font-weight:600;color:var(--ink);line-height:1.5}
.tick{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--act);position:relative;margin-top:1px
}
.tick::after{
  content:"";position:absolute;left:50%;top:48%;width:8px;height:4px;
  border-left:2.2px solid var(--act);border-bottom:2.2px solid var(--act);
  transform:translate(-50%,-62%) rotate(-45deg)
}
.sec--deep .tick{border-color:#FF8A6E}
.sec--deep .tick::after{border-color:#FF8A6E}
.sec--deep .ticks li{color:#EAF2F6}

/* ===========================================================================
   COMPONENT — price card + price object
   The money is the product: slab face, tabular figures, superscript currency.
   ======================================================================== */
.pcard{
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:clamp(20px,2.6vw,26px);box-shadow:0 10px 28px rgba(15,61,82,.10)
}
.pcard-band{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px dashed var(--line);padding-bottom:14px;margin-bottom:16px
}
.pcard-band span{font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.pcard-band b{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--act-ink);text-transform:uppercase}

.price{
  display:flex;align-items:flex-start;gap:3px;
  font-family:var(--slab);color:var(--money);line-height:.9;
  font-variant-numeric:tabular-nums
}
.price .cur{font-size:22px;font-weight:700;margin-top:9px}
.price .dol{font-size:clamp(48px,7vw,62px);font-weight:700;letter-spacing:-.02em}
.price .cts{font-size:26px;font-weight:700;margin-top:8px}
.price-note{font-size:13.5px;font-weight:600;color:var(--muted);margin:9px 0 18px}

.price--sm .cur{font-size:14px;margin-top:4px}
.price--sm .dol{font-size:30px}
.price--sm .cts{font-size:16px;margin-top:3px}

/* Price set inline in a sentence (used in the FAQ cost answer). Layout belongs
   in the stylesheet, never in a style attribute on the element. */
.price--inline{display:inline-flex;vertical-align:-2px;margin-inline:1px}
.price--inline .cur{font-size:12px;margin-top:3px}
.price--inline .dol{font-size:22px}
.price--inline .cts{font-size:13px;margin-top:2px}

.pcard-alt{display:block;text-align:center;margin-top:11px;font-size:13px;font-weight:600;color:var(--deep);text-decoration:none}
.pcard-alt:hover{color:var(--act-ink);text-decoration:underline;text-underline-offset:3px}

/* ===========================================================================
   COMPONENT — buttons (must look pressable)
   ======================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:800 15px/1 var(--sans);letter-spacing:.02em;text-align:center;text-decoration:none;
  color:#fff;background:linear-gradient(180deg,var(--act-hi) 0%,var(--act) 52%,var(--act-lo) 100%);
  border:0;border-bottom:3px solid var(--act-d);border-radius:var(--r-sm);
  padding:15px 22px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 4px 12px rgba(226,61,34,.26);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease
}
.btn--block{display:flex;width:100%}
.btn .arw{display:inline-block;transition:transform .18s ease}
.btn:hover{filter:brightness(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 16px rgba(226,61,34,.32)}
.btn:hover .arw{transform:translateX(3px)}
.btn:active{transform:translateY(2px);border-bottom-width:1px;box-shadow:inset 0 2px 4px rgba(0,0,0,.18)}

.btn--ghost{
  color:var(--deep);background:var(--paper);
  border:1.5px solid var(--line);border-bottom:3px solid var(--line);
  box-shadow:0 2px 6px rgba(15,61,82,.06)
}
.btn--ghost:hover{filter:none;border-color:var(--deep);box-shadow:0 4px 12px rgba(15,61,82,.10)}

.btn--onDeep{
  color:var(--deep);background:linear-gradient(180deg,#fff,#EFE7DA);
  border-bottom-color:#C6B79E;box-shadow:inset 0 1px 0 #fff,0 4px 12px rgba(0,0,0,.18)
}

@media (prefers-reduced-motion:reduce){
  .btn,.btn .arw{transition:none}
  .btn:hover .arw{transform:none}
  html{scroll-behavior:auto}
}

/* ===========================================================================
   COMPONENT — trust strip (the four questions answered before any scroll)
   ======================================================================== */
.trust{background:var(--paper);border-block:1px solid var(--line);padding-block:0}
.trust-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0;padding:0
}
@media (max-width:800px){.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.trust-grid{grid-template-columns:minmax(0,1fr)}}

.trust-item{padding:22px 24px 22px 0;border-right:1px solid var(--line-soft)}
.trust-item:last-child{border-right:0}
.trust-item dt{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.trust-item dd{margin:0;font-size:16px;font-weight:700;color:var(--ink);line-height:1.3}
@media (max-width:800px){
  .trust-item{padding:18px 20px 18px 0;border-bottom:1px solid var(--line-soft)}
  .trust-item:nth-child(2n){border-right:0}
  .trust-item:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:440px){
  .trust-item{border-right:0;border-bottom:1px solid var(--line-soft)}
  .trust-item:last-child{border-bottom:0}
}

/* ===========================================================================
   COMPONENT — steps (was trapped in a modal)
   ======================================================================== */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,26px);counter-reset:step}
@media (max-width:760px){.steps{grid-template-columns:minmax(0,1fr)}}

.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;position:relative}
.step::before{
  counter-increment:step;content:counter(step);
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--deep);color:#fff;font:800 16px/1 var(--slab);
  margin-bottom:14px
}
.step h3{font-size:17px;margin-bottom:7px}
.step p{font-size:14.5px;color:var(--muted);margin:0}

/* ===========================================================================
   COMPONENT — feature grid (what's included)
   ======================================================================== */
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,30px)}
@media (max-width:860px){.feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.feats{grid-template-columns:minmax(0,1fr)}}

.feat{display:flex;gap:13px;align-items:flex-start}
.feat h3{font-size:16px;margin-bottom:5px}
.feat p{font-size:14.5px;color:var(--muted);margin:0;font-weight:400}
.feat .tick{margin-top:2px}

/* ===========================================================================
   COMPONENT — pricing
   ======================================================================== */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.6vw,26px)}
@media (max-width:760px){.plans{grid-template-columns:minmax(0,1fr)}}

.plan{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.8vw,28px);display:flex;flex-direction:column}
.plan--lead{border-color:#C9B9A4;box-shadow:0 10px 28px rgba(15,61,82,.10)}
.plan h3{font-size:18px;margin-bottom:4px}
.plan .plan-sub{font-size:14px;color:var(--muted);margin:0 0 18px}
.plan .ticks{margin:16px 0 22px}
.plan .ticks li{font-size:14.5px;font-weight:500;color:var(--body)}
.plan .btn{margin-top:auto}
.plan-incl{font-size:13px;color:var(--muted);margin:8px 0 0}

/* referral strip — other operators' products. Given real presence so students
   can find them, but deliberately built from a different kit to our own two:
   a teal eligibility header instead of a coral button, and a smaller price.
   Coral stays reserved for our own California TVS actions, so nothing in here
   can be mistaken for a course that masks a California citation. */
.refs{background:var(--cream-d);border-block:1px solid var(--line);padding-block:clamp(30px,4.4vw,46px)}
.refs-head{max-width:68ch}
.refs-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin:0 0 7px}
.refs h3{font-family:var(--slab);font-size:clamp(20px,2.3vw,25px);line-height:1.2;font-weight:700;color:var(--ink);margin:0 0 9px}
.refs-note{font-size:13.5px;line-height:1.6;color:var(--body);margin:0}
.refs-note strong{color:var(--ink);font-weight:700}
.refs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
@media (max-width:860px){.refs-grid{grid-template-columns:minmax(0,1fr)}}

.ref{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
  display:flex;flex-direction:column;overflow:hidden;text-decoration:none;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease
}
.ref:hover,.ref:focus-visible{border-color:var(--deep);transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,61,82,.11)}
@media (prefers-reduced-motion:reduce){.ref{transition:none}.ref:hover,.ref:focus-visible{transform:none}}

/* Eligibility header. Same label-above-value device as the trust strip, because
   the one thing that actually separates these three is who may take them. */
.ref-for{background:var(--deep);color:#fff;padding:11px 16px 12px}
.ref-for span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:3px}
.ref-for strong{display:block;font-size:13.5px;font-weight:700;line-height:1.3}

.ref-body{padding:15px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.ref h4{font-family:var(--slab);font-size:16.5px;line-height:1.25;font-weight:700;color:var(--ink);margin:0}
.ref p{font-size:13px;line-height:1.5;font-weight:400;color:var(--body);margin:0;flex:1}
.ref-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid var(--line-soft);padding-top:11px;margin-top:5px}
.ref .price{flex:0 0 auto;margin:0}
.ref-go{font-size:13px;font-weight:700;color:var(--deep);white-space:nowrap}
.ref:hover .ref-go{color:var(--act-ink)}
.ref-go .arw{margin-left:3px}

/* Course section with an optional photograph. The figure renders only when the
   file is on disk (img_exists in config.php), so the section is correct with or
   without photography: no photo and the steps simply stay a 3-across grid, and
   a missing file can never leave a broken image on a live page. */
.course-split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,34px)}
.course-split--img{grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);align-items:center}
.course-split--img .steps{grid-template-columns:minmax(0,1fr)}
@media (max-width:900px){
  .course-split--img{grid-template-columns:minmax(0,1fr)}
  .course-split--img .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){.course-split--img .steps{grid-template-columns:minmax(0,1fr)}}

.course-fig{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--paper)}
.course-fig img{display:block;width:100%;height:auto}

/* Photograph inside the online-course card. It sits INSIDE the card padding,
   not bled to the card edge, so the picture reads as part of the product and
   the card keeps its own margin against the page. 4:3 is fixed with
   aspect-ratio so a replacement photo of any size cannot shift the price or
   the button below it. */
.plan-fig{
  margin:0 0 18px;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--line-soft);background:var(--cream-d)
}
/* Photograph in the hero register card.

   It lives here rather than in the two pricing cards for a measured reason: a
   photo in one of a side-by-side pair made the online card ~710px against the
   booklet's ~395px, and the comparison between the two products broke. The
   hero card has no symmetry partner, so the picture costs nothing structurally
   and does the most work where the eye lands first.

   It sits INSIDE the card padding, not bled to the edge, so the card keeps its
   own margin. 16:9, not the source 4:3 - a 4:3 crop at this width is ~250px
   tall and pushes "Register now" toward the fold on a laptop. The crop is
   anchored above centre because the subject's face sits in the upper half of
   both photographs. aspect-ratio is fixed so replacing the file with any other
   size can never move the price or the button. */
.pcard-fig{margin:0 0 16px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line-soft);background:var(--cream-d)}
.pcard-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 30%}


/* ===========================================================================
   COMPONENT — FAQ accordion
   All questions ship in the HTML. Nothing is behind a "Load More".
   ======================================================================== */
.faq{max-width:820px;margin:0 auto;display:grid;gap:10px}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.faq details[open]{border-color:#C9B9A4}
.faq summary{
  cursor:pointer;list-style:none;padding:17px 52px 17px 20px;position:relative;
  font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.4
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;
  border-right:2.4px solid var(--act);border-bottom:2.4px solid var(--act);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq summary:hover{color:var(--act-ink)}
.faq .ans{padding:0 20px 20px;font-size:15px;color:var(--body)}
.faq .ans p{margin:0 0 .85em}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* ===========================================================================
   COMPONENT — testimonials
   ======================================================================== */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,24px)}
@media (max-width:860px){.quotes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.quotes{grid-template-columns:minmax(0,1fr)}}

.quote{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.quote blockquote{margin:0 0 14px;font-size:15px;color:var(--ink);font-weight:600;line-height:1.55}
.quote figcaption{font-size:13px;color:var(--muted);font-weight:600}
.stars{display:flex;gap:2px;margin-bottom:12px;color:var(--act)}
.stars svg{width:15px;height:15px;fill:currentColor}

/* ===========================================================================
   COMPONENT — support
   ======================================================================== */
.support-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);align-items:start}
@media (max-width:760px){.support-grid{grid-template-columns:minmax(0,1fr)}}

.contact-list{display:grid;gap:14px;margin:0;padding:0}
.contact-list div{display:flex;gap:12px;align-items:flex-start}
.contact-list dt{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9FBDCB;flex:0 0 92px;padding-top:3px}
.contact-list dd{margin:0;font-size:15.5px;font-weight:600;color:#fff}
.contact-list dd a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.contact-list dd small{display:block;font-size:13px;font-weight:400;color:#B7CDD8;margin-top:2px}

/* ===========================================================================
   COMPONENT — footer
   ======================================================================== */
.site-foot{background:var(--deep-d);color:#A9C4D0;padding-block:26px;font-size:13.5px}
.foot-in{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between}
.site-foot a{color:#DCEAF1}
.foot-links{display:flex;flex-wrap:wrap;gap:18px;list-style:none;margin:0;padding:0}

/* ===========================================================================
   UTILITIES
   ======================================================================== */
.center{text-align:center}
.mt-lg{margin-top:clamp(24px,3.4vw,36px)}
.m0{margin:0}
.note-line{font-size:15px;color:var(--muted)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lang-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:14px;font-weight:700;color:var(--act-ink);text-decoration:none;
  border-bottom:2px solid rgba(226,61,34,.3);padding-bottom:2px
}
.lang-link:hover{border-bottom-color:var(--act)}