@font-face{
  font-family:"Cairo";
  src:url("fonts/cairo-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face{
  font-family:"Cairo";
  src:url("fonts/cairo-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face{
  font-family:"Cairo";
  src:url("fonts/cairo-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face{
  font-family:"Cairo";
  src:url("fonts/cairo-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face{
  font-family:"Cairo";
  src:url("fonts/cairo-800.woff2") format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("fonts/pjs-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("fonts/pjs-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("fonts/pjs-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("fonts/pjs-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("fonts/pjs-800.woff2") format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
}

/* ============================================================
   Pit-Stop English Academy
   Every colour and size lives in :root. Change it here once.
   ============================================================ */
:root{
  --teal:#0D4C5D;          /* dark sections, banners, footer */
  --teal-2:#0A4152;        /* a step darker */
  --teal-3:#146073;        /* card on dark */
  --coral:#DB6446;         /* the accent: buttons, ticks, chips */
  --coral-2:#C4573A;

  /* THE BRAND ORANGE IS --coral, #DB6446, AND IT IS THE ONLY ORANGE ON THIS
     SITE. Every single place. Deliberate, owner-approved, twice. Read this
     before "fixing" it.

     What happened. The 28 Sep audit found that white text on --coral scores
     3.55:1 against a 4.5:1 minimum, and moved every orange that carried text
     onto deeper mixes. The owner saw the change on the live site and asked
     for the brand colour back. On 30 Sep it was restored - but only on the
     light backgrounds, because on the dark teal the brand orange falls to
     2.68:1 and a LIGHTER mix had been kept there instead. The owner spotted
     that too, in the breadcrumbs and in the hero's "Actually Use", and asked
     for every orange to go back. It has.

     The scores this costs, all measured, none of them a surprise:

       on white / the page ground      3.55:1  buttons, prices, small headings
       on the dark teal                2.68:1  breadcrumbs, hero emphasis
       on the pale teal key-fact box   2.89:1  the bold that carries prices

     The alternatives, kept below so that going back is one line:

       --coral-ink   #B04A2E   5.43:1 on white   - passes
       --coral-deep  #9C4128   6.56:1 on white   - passes
       --coral-2     #C4573A   4.40:1 on white   - just under
       --coral-lift  #F5AE99   5.16:1 on teal    - the light mix, for dark

     Matching the logo matters more to the owner than the score. That is
     theirs to decide, it is written up in claude/brand-orange-decision.md,
     and this comment exists so nobody quietly reverses it a third time.

     tests/contrast.mjs knows. It accepts a pair only when one side is EXACTLY
     #DB6446 and reports the count out loud; every other pair on the site is
     still judged against the full standard.

     To go back to the readable version: give --coral the value #B04A2E and
     put --coral-lift back on .crumb a, .hero h1 em and the eyebrows inside
     .dark / .banner. Nothing else. */
  --coral-ink:#B04A2E;   /* defined, unused - the readable mix for light */
  --coral-deep:#9C4128;  /* defined, unused - the readable mix for panels */
  --coral-lift:#F5AE99;  /* defined, unused - the readable mix for dark */

  --ground:#F3F7FA;        /* page background */
  --paper:#FFFFFF;
  --strip:#E3EDEF;         /* trust strip */
  --panel:#D7ECED;         /* pale teal panels, pills, tags */
  --story:#C5E0E2;         /* testimonial cards */
  --band:#D9E8EB;          /* stats band */

  --ink:#123A46;
  --ink-2:#4A6670;
  /* 3.11:1 on white - below the minimum, and it was the colour of every
     placeholder and of the unselected state of both dropdowns, which for many
     visitors is the only label those fields have. */
  --ink-3:#56717B;
  --line:#DEE7EA;

  --wrap:1180px;
  --gut:24px;
  --r:12px;
  --r-lg:20px;
  --pill:999px;
  --shadow:0 1px 2px rgba(13,76,93,.05), 0 8px 26px rgba(13,76,93,.08);
  --shadow-lg:0 2px 6px rgba(13,76,93,.07), 0 22px 50px rgba(13,76,93,.14);

  /* ---------- motion ----------
     One scale drives every animation on the site. Raise --motion to make the
     whole thing livelier, lower it to calm it down; 0 freezes it entirely. */
  --motion:1;
  --t-tap:  calc(110ms * var(--motion));   /* press feedback */
  --t-fast: calc(180ms * var(--motion));   /* hover, small state */
  --t-base: calc(280ms * var(--motion));   /* panels, drawers */
  --t-slow: calc(460ms * var(--motion));   /* entrances */
  --t-exit: calc(190ms * var(--motion));   /* always quicker than entry */
  --step:   calc(55ms  * var(--motion));   /* one beat of a stagger */
  /* deceleration curve - confident arrival, no bounce */
  --ease:   cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.4,0,.2,1);
  --rise:14px;   /* small enough that a reveal reads as a fade, not a slide */

  --font:"Plus Jakarta Sans","Cairo",-apple-system,Segoe UI,system-ui,sans-serif;
  --font-ar:"Cairo","Plus Jakarta Sans",-apple-system,Segoe UI,system-ui,sans-serif;
  --track:-.02em;          /* heading tracking. Arabic must not have negative tracking */
  --lh:1.6;
}

/* Arabic swaps the token, so every rule that reads var(--font) follows. */
:root[dir="rtl"]{
  --font:var(--font-ar);
  --track:0;
  --lh:1.85;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:var(--lh); -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
svg{ fill-rule:evenodd; clip-rule:evenodd; }
h1,h2,h3,h4{ margin:0; line-height:1.18; font-weight:800; letter-spacing:var(--track); }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.sp{ flex:1 1 auto; }

/* ---------- header ---------- */
.hdr{ background:var(--ground); position:fixed; top:0; left:0; right:0; z-index:60;
  max-height:100vh; overflow-y:auto; overscroll-behavior:contain;
  box-shadow:0 0 0 rgba(0,0,0,0); transition:box-shadow .24s ease; }
/* holds the header's resting height in the flow, so the bar can resize over the
   page without moving a single section under the reader's finger.

   The fallbacks here are not decoration. The spacer now sits in the HTML of
   every page, so this height is what reserves the gap at the FIRST paint,
   before shell.js has built the header or measured anything. Get it wrong and
   the page still jumps - which is exactly the bug this fixed: the spacer used
   to be created by JS, so every page rendered with no header and then shoved
   everything down 154px. That scored 0.12-0.15 CLS, in "poor" territory.

   Measured, both languages, at every breakpoint: 154px above 900px wide and
   98px at 900 and below. shell.js overwrites --hdr-h with the real measurement
   a moment later, so these two numbers only have to be right for that first
   frame - but they have to be right. */
#ps-hdr-space{ height:var(--hdr-h, 154px); flex:none; }
@media (max-width:900px){ #ps-hdr-space{ height:var(--hdr-h, 98px); } }
/* a hairline once the bar is floating over content, so it reads as a layer */
.hdr.small{ box-shadow:0 1px 0 var(--line); }
/* while the header is being measured nothing may animate, or the measurement
   catches a half-finished transition */
.hdr.measuring, .hdr.measuring *{ transition:none !important; }
/* the drawer is an overlay, not part of the header's resting height - it must
   not be counted when the spacer is measured, or opening the menu once would
   reserve a screen-tall gap at the top of the page */
.hdr.measuring .mobnav{ display:none !important; }
/* logo in its own column, the two rows stacked beside it */
.hdr .wrap{ display:grid; grid-template-columns:auto minmax(0,1fr);
  align-items:center; column-gap:30px; padding-block:12px; }
.hdr-right{ min-width:0; }
.hdr-top{ display:flex; justify-content:flex-end; align-items:center; gap:22px;
  padding-top:12px; font-size:13px;
  /* collapses instead of snapping out, on the same curve as the logo */
  max-height:56px; overflow:hidden; visibility:visible;
  transition:max-height .26s cubic-bezier(.4,0,.2,1),
             opacity .16s ease,
             padding-top .26s cubic-bezier(.4,0,.2,1),
             visibility 0s linear 0s; }
.hdr-top > *{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); }
.hdr-top .wa{ font-weight:800; letter-spacing:.01em; }
.hdr-top .wa:hover{ color:var(--coral); }
.hdr-top .wa:hover i{ background:var(--coral-2); }
.hdr-top i{ width:26px; height:26px; border-radius:50%; background:var(--coral); flex:none;
  display:grid; place-items:center; flex:none; }
.hdr-top i svg{ width:13px; height:13px; fill:#fff; }
.hdr-top b{ display:block; font-size:12px; font-weight:700; line-height:1.25; }
.hdr-top em{ font-style:normal; font-size:11.5px; color:var(--ink-2); }
.hdr-in{ display:flex; align-items:center; gap:16px; min-height:72px; }
.logo img{ height:130px; width:auto; display:block;
  transition:height .26s cubic-bezier(.4,0,.2,1); }
/* once you start reading, the header gets out of the way: the logo shrinks and
   the contact row folds away. The number is there at the top of every page, and
   the Book Your Assessment button never leaves. */
.hdr.small .logo img{ height:78px; }
/* visibility flips only once the row has finished collapsing, which keeps the
   phone number and language buttons out of the tab order while they are
   invisible - a zero-height overflow-hidden box is still focusable */
.hdr.small .hdr-top{ max-height:0; opacity:0; padding-top:0; visibility:hidden;
  transition:max-height .26s cubic-bezier(.4,0,.2,1),
             opacity .16s ease,
             padding-top .26s cubic-bezier(.4,0,.2,1),
             visibility 0s linear .26s; }
/* in-page anchors must clear the floating bar */
html{ scroll-padding-top:calc(var(--hdr-sm, 102px) + 12px); }
/* the scrolled header is 96px on a phone, not 102 - same reason as above */
@media (max-width:900px){ html{ scroll-padding-top:calc(var(--hdr-sm, 96px) + 12px); } }
@media (prefers-reduced-motion: reduce){
  .hdr, .logo img, .hdr-top{ transition:none !important; }
}
.nav{ display:flex; align-items:center; gap:2px; margin-inline:auto; }
.nav a{ position:relative; display:inline-block; font-size:14.5px; font-weight:700;
  color:var(--ink); }
.nav a > span{ position:relative; z-index:2; display:block; padding:9px 16px;
  transition:color .3s ease; }
/* top and bottom rules, snapping in from over-scaled */
.nav a::before{ content:""; position:absolute; inset:0; z-index:1;
  border-top:2px solid var(--teal); border-bottom:2px solid var(--teal);
  transform:scaleY(2); opacity:0; transform-origin:center;
  transition:transform .3s ease, opacity .3s ease; }
/* the fill, dropping from the top edge */
.nav a::after{ content:""; position:absolute; top:2px; left:0; right:0; bottom:0; z-index:0;
  background:var(--teal); transform:scaleY(0); opacity:0; transform-origin:top;
  transition:transform .3s ease, opacity .3s ease; }
.nav a:hover > span,
.nav a.on > span{ color:#fff; }
.nav a:hover::before,.nav a.on::before,
.nav a:hover::after,.nav a.on::after{ transform:scaleY(1); opacity:1; }
@media (prefers-reduced-motion: reduce){
  .nav a::before,.nav a::after,.nav a > span{ transition:none; }
}
/* ---------- menu button ----------
   Three bars that draw themselves into an X. One continuous path does the top
   and bottom bars: a long dash gap hides the middle of it, and moving that gap
   on open swings the two ends out into the second diagonal. */
.burger{ display:none; background:none; border:0; padding:2px; cursor:pointer;
  -webkit-margin-start:auto;
          margin-inline-start:auto; line-height:0; color:var(--ink);
  -webkit-tap-highlight-color:transparent; }
/* pointer devices only - on a touchscreen :hover latches after a tap and the
   button would stay coral once the menu closed */
@media (hover:hover){ .burger:hover{ color:var(--coral); } }
.burger svg{ height:34px; width:34px; display:block;
  transition:transform 600ms cubic-bezier(.4,0,.2,1); }
.burger .line{ fill:none; stroke:currentColor; stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke-dasharray 600ms cubic-bezier(.4,0,.2,1),
             stroke-dashoffset 600ms cubic-bezier(.4,0,.2,1); }
.burger .line-top-bottom{ stroke-dasharray:12 63; }
/* open state rides on aria-expanded, which the toggle already sets - no hidden
   checkbox, so the button keeps its "Menu, collapsed / expanded" announcement */
.burger[aria-expanded="true"] svg{ transform:rotate(-45deg); }
.burger[aria-expanded="true"] .line-top-bottom{
  stroke-dasharray:20 300; stroke-dashoffset:-32.42; }
/* mirrored in Arabic so the curl sweeps the same way the page reads */
[dir="rtl"] .burger svg{ transform:scaleX(-1); }
[dir="rtl"] .burger[aria-expanded="true"] svg{ transform:scaleX(-1) rotate(-45deg); }
@media (prefers-reduced-motion: reduce){
  .burger svg, .burger .line{ transition:none; }
}
.mobnav{ display:none; grid-column:1/-1; padding:4px 0 14px; }
.mobnav a{ display:block; padding:11px 0; font-weight:600; border-bottom:1px solid var(--line); }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 24px; border-radius:var(--pill); border:1.5px solid transparent;
  font-weight:700; font-size:14.5px; cursor:pointer; white-space:nowrap;
  transition:background .16s ease, color .16s ease, border-color .16s ease; }
.btn.coral{ background:var(--coral); color:#fff; }
.btn.coral:hover{ background:var(--coral-2); }
.btn.ghost{ background:transparent; border-color:#fff; color:#fff; }
.btn.ghost:hover{ background:rgba(255,255,255,.12); }
.btn.line{ background:transparent; border-color:var(--coral); color:var(--coral); }
.btn.line:hover{ background:var(--coral); color:#fff; }
.btn.white{ background:#fff; color:var(--teal); }
.btn.white:hover{ background:var(--panel); }
.btn.block{ width:100%; }
.play{ width:44px; height:44px; border-radius:50%; background:var(--coral);
  display:grid; place-items:center; flex:none; box-shadow:0 6px 18px rgba(219,100,70,.4); }
.play svg{ width:15px; height:15px; fill:#fff; margin-left:3px; }

/* ---------- section furniture ---------- */
section{ padding-block:58px; }
section.tight{ padding-block:40px; }
.eyebrow{ display:block; font-size:12.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--coral); margin-bottom:10px; }
.shead{ margin-bottom:32px; }
.shead.center{ text-align:center; }
.shead h2{ font-size:clamp(23px,2.7vw,30px); }
.shead p{ color:var(--ink-2); margin-top:12px; font-size:15.5px; }
.morelink{ display:inline-block; font-size:14px; font-weight:700; color:var(--ink);
  border-bottom:1.5px solid var(--ink); padding-bottom:2px; }
.morelink:hover{ color:var(--coral); border-color:var(--coral); }
.grid{ display:grid; gap:22px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }

/* ---------- hero card ---------- */
.hero{ background:var(--teal); border-radius:var(--r-lg); overflow:hidden;
  display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:20px;
  padding:56px 48px; }
.hero h1{ color:#fff; font-size:clamp(30px,4.1vw,44px); }
.hero h1 em{ font-style:normal; color:var(--coral); }
.hero p{ color:rgba(255,255,255,.8); font-size:15px; margin-top:18px; max-width:46ch; }
.hero-btns{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:28px; }
.hero-art{ position:relative; justify-self:center; width:290px; height:290px; }
.hero-art img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
/* The coral arc. inset must be equal on all four sides: a square box is what
   makes border-radius:50% a true circle rather than an ellipse, and what keeps
   it concentric with the photo. clip-path then keeps exactly half of the ring. */
.hero-art::after{ content:""; position:absolute; inset:-19px;
  border:9px solid var(--coral); border-radius:50%;
  -webkit-clip-path:inset(0 0 0 50%);
          clip-path:inset(0 0 0 50%); }

/* ---------- trust strip ---------- */
.trust{ background:var(--strip); border-radius:0 0 var(--r-lg) var(--r-lg);
  margin-top:-18px; padding:16px 48px 14px;
  display:flex; align-items:center; gap:34px; flex-wrap:wrap; }
.trust b{ font-size:12.5px; font-weight:800; letter-spacing:.03em; flex:none; }
.trust .marks{ flex:1; display:flex; justify-content:space-around; gap:20px; flex-wrap:wrap; }
.trust .marks span{ font-weight:700; color:var(--ink-3); font-size:15px; letter-spacing:.02em; }

/* ---------- course teaser cards ---------- */
.tri{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
.tcard{ background:var(--paper); border-radius:var(--r); padding:24px 22px 22px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:9px; }
.tcard .ic{ width:52px; height:52px; border-radius:14px; background:var(--teal);
  display:grid; place-items:center; margin-bottom:10px; }
.tcard .ic svg{ width:24px; height:24px; fill:#fff; }
.tcard h3{ font-size:17px; }
.tcard p{ color:var(--ink-2); font-size:14px; }
.tcard .spec{ font-size:13px; font-weight:700; }
.tcard .morelink{ align-self:flex-start; margin-top:6px; }
.tcard.hot{ position:relative; background:var(--coral); box-shadow:var(--shadow-lg);
  margin-top:-10px; padding-bottom:28px; overflow:hidden; }
.tcard.hot h3,.tcard.hot .spec{ color:#fff; }
.tcard.hot p{ color:#fff; }  /* solid, not 94%: this sits on the brand orange */
.tcard.hot .ic{ background:rgba(255,255,255,.9); }
.tcard.hot .ic svg{ fill:var(--coral); }
.tcard.hot .morelink{ color:#fff; border-color:#fff; }
.tcard.hot::after{ content:""; position:absolute; top:0; right:0; width:34px; height:34px;
  background:linear-gradient(225deg, var(--ground) 50%, rgba(0,0,0,.12) 50%); }

/* ---------- split with photo ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.shot{ position:relative; border-radius:var(--r); overflow:visible; }
.shot img{ width:100%; border-radius:var(--r); display:block; }
.shot .play{ position:absolute; inset:0; margin:auto; width:56px; height:56px; }
.badge{ position:absolute; right:-10px; bottom:-18px; background:#fff; border-radius:10px;
  box-shadow:var(--shadow-lg); padding:10px 14px; display:flex; align-items:center; gap:10px; }
.badge i{ width:30px; height:30px; border-radius:50%; background:var(--coral);
  display:grid; place-items:center; flex:none; }
.badge i svg{ width:15px; height:15px; fill:#fff; }
.badge b{ display:block; font-size:13px; line-height:1.3; }
.ticks{ display:grid; grid-template-columns:1fr 1fr; gap:11px 22px; margin-top:20px; }
.ticks li{ display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--ink); }
.ticks svg{ width:17px; height:17px; fill:var(--coral); flex:none; margin-top:3px; }
.ticks.one{ grid-template-columns:1fr; }

/* ---------- teacher circles ---------- */
.faces{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; text-align:center; }
.faces img{ width:82px; height:82px; border-radius:50%; object-fit:cover;
  margin:0 auto 12px; border:3px solid var(--coral); padding:3px; background:var(--ground); }
.faces b{ display:block; font-size:14.5px; }
.faces span{ color:var(--ink-2); font-size:13px; }

/* ---------- single testimonial ---------- */
.quotewrap{ position:relative; padding:26px 0; }
.blob{ position:absolute; border-radius:50%; z-index:0; }
.quotecard{ position:relative; z-index:1; background:var(--strip); border-radius:var(--r);
  padding:26px 60px; text-align:center; max-width:760px; margin-inline:auto; }
.quotecard .qm{ position:absolute; top:16px; font-size:44px; line-height:1;
  color:var(--coral); font-weight:800; }
.quotecard .qm.l{ left:20px; } .quotecard .qm.r{ right:20px; }
.quotecard p{ font-size:14.5px; font-weight:600; }
.quotecard .who{ display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:16px; font-size:13.5px; }
.quotecard .who img{ width:30px; height:30px; border-radius:50%; object-fit:cover; }

/* ---------- accordion ---------- */
.acc{ background:var(--paper); border-radius:10px; box-shadow:var(--shadow); overflow:hidden; }
.acc+.acc{ margin-top:12px; }
.acc summary{ cursor:pointer; list-style:none; padding:15px 18px; font-size:14.5px;
  font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after{ content:""; width:9px; height:9px; flex:none;
  border-right:2px solid var(--ink-2); border-bottom:2px solid var(--ink-2);
  transform:rotate(45deg) translateY(-2px); transition:transform .2s ease; }
.acc[open] summary::after{ transform:rotate(225deg) translateY(-2px); }
.acc .ans{ padding:0 18px 16px; color:var(--ink-2); font-size:14px; }

/* ---------- dark CTA card ---------- */
.cta{ background:var(--teal); border-radius:var(--r); padding:26px 26px 28px; color:#fff; }
.cta h3{ font-size:21px; margin-bottom:16px; }
.cta li{ display:flex; gap:9px; align-items:center; font-size:14px;
  color:rgba(255,255,255,.9); margin-bottom:11px; }
.cta svg{ width:17px; height:17px; fill:var(--coral); flex:none; }
.cta .btn{ margin-top:12px; }
.cta.center{ text-align:center; max-width:620px; margin-inline:auto; padding:30px; }
.cta.center p{ color:rgba(255,255,255,.82); font-size:14.5px; margin-bottom:18px; }

/* ---------- page banner ---------- */
.banner{ background:var(--teal); text-align:center; padding-block:52px 46px; }
.banner.left{ text-align:start; }
.banner h1{ color:#fff; font-size:clamp(30px,4vw,42px); }
.crumb{ display:flex; align-items:center; justify-content:center; gap:9px;
  margin-top:12px; font-size:14px; color:rgba(255,255,255,.86); }
.banner.left .crumb{ justify-content:flex-start; }
.crumb a{ color:var(--coral); }
.crumb a:hover{ color:#fff; }

/* ---------- filter pills ---------- */
.pills{ display:flex; justify-content:center; gap:11px; flex-wrap:wrap; margin-bottom:30px; }
.pills a{ padding:8px 20px; border-radius:var(--pill); background:var(--panel);
  color:var(--teal); font-size:14px; font-weight:600; }
.pills a:hover{ background:#C6E4E5; }
.pills a.on{ background:var(--coral); color:#fff; }

/* ---------- course grid card ---------- */
.ccard{ background:var(--paper); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:box-shadow .18s ease, transform .18s ease; }
.ccard:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.ccard img{ width:100%; aspect-ratio:2/1; object-fit:cover; }
.ccard .body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
.ccard h3{ font-size:17px; color:var(--teal); }
.ccard .desc{ color:var(--ink-2); font-size:13.5px; }
.ccard .spec{ font-size:13px; color:var(--ink); }
.ccard .cfoot{ display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:auto; padding-top:10px; }
.ccard .price{ color:var(--coral); font-size:18px; font-weight:800; }
.ccard .view{ color:var(--coral); font-size:13.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px; }
.ccard:hover .view{ gap:10px; }

/* ---------- pricing ---------- */
.dark{ background:var(--teal); color:#fff; }
.dark .shead h2{ color:#fff; }
.toggle{ display:inline-flex; background:#fff; border-radius:var(--pill); padding:4px;
  margin:0 auto 30px; }
.toggle a{ padding:7px 22px; border-radius:var(--pill); font-size:14px; font-weight:700;
  color:var(--teal); }
.toggle a.on{ background:var(--coral); color:#fff; }
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
.plan{ border:1.5px solid rgba(255,255,255,.28); border-radius:var(--r);
  padding:26px 24px 24px; text-align:center; }
.plan h3{ font-size:20px; color:#fff; }
.plan .amt{ font-size:28px; font-weight:800; color:var(--coral); margin:10px 0 18px; }
.plan li{ font-size:13.5px; color:rgba(255,255,255,.86); margin-bottom:10px; text-align:start; }
.plan .btn{ margin-top:10px; width:100%; }
.plan.hot{ background:var(--coral); border-color:var(--coral); margin-top:-10px;
  padding-bottom:30px; box-shadow:var(--shadow-lg); }
.plan.hot .amt{ color:#fff; }
.plan.hot li{ color:#fff; }  /* solid, not 94%: this sits on the brand orange */
.fineprint{ text-align:center; color:rgba(255,255,255,.55); font-size:12px;
  margin-top:22px; line-height:1.7; }

/* ---------- teacher cards ---------- */
.tgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.tprof{ background:var(--paper); border-radius:var(--r); padding:16px;
  box-shadow:var(--shadow); display:flex; gap:14px; }
.tprof img{ width:78px; height:96px; border-radius:8px; object-fit:cover; flex:none; }
.tprof h3{ font-size:17px; }
.tprof .role{ color:var(--coral); font-size:12.5px; font-weight:700; margin-top:2px; }
.tprof .bio{ color:var(--ink-2); font-size:12.5px; line-height:1.55; margin-top:8px; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.tag{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:5px;
  background:var(--panel); color:var(--teal); }
.proc{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.proc .it{ display:flex; gap:14px; }
.proc svg{ width:38px; height:38px; fill:var(--coral); flex:none; }
.proc b{ display:block; font-size:15px; margin-bottom:5px; }
.proc span{ color:var(--ink-2); font-size:13px; line-height:1.6; }

/* ---------- student story cards ---------- */
.sgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px 30px; }
/* Testimonials carry no photo and no star rating: the students sent words,
   not portraits or scores, and inventing either would be putting something in
   their mouths. The quote stands on its own. */
.scard{ background:var(--story); border-radius:var(--r); padding:20px 22px;
  position:relative; min-height:112px; }
.scard .av{ position:absolute; left:-24px; top:50%; transform:translateY(-50%);
  width:92px; height:92px; border-radius:50%; overflow:hidden;
  border:5px solid #fff; box-shadow:var(--shadow); }
.scard .av img{ width:100%; height:100%; object-fit:cover; }
.scard .stars{ color:var(--coral); font-size:12px; letter-spacing:2px;
  text-align:end; display:block; }
.scard p{ font-size:13.5px; color:var(--ink); margin-top:4px; }
.scard b{ display:block; font-size:16px; margin-top:8px; }
.scard .course{ color:var(--coral); font-size:12.5px; }
/* ---------- stats ---------- */
.stats{ background:var(--band); }
.stats .row{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stats .it{ display:flex; align-items:center; justify-content:center; gap:13px; }
.stats svg{ width:34px; height:34px; fill:var(--coral); flex:none; }
.stats b{ display:block; font-size:26px; line-height:1.1; }
.stats span{ font-size:13px; color:var(--ink-2); }

/* ---------- course detail ---------- */
.cdhead{ background:var(--teal); padding-block:40px 34px; }
.cdhead .crumb{ justify-content:flex-start; margin-bottom:14px; }
.cdhead h1{ color:#fff; font-size:clamp(30px,4vw,42px); }
.cdmeta{ display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap; }
.chip{ background:var(--coral); color:#fff; font-size:13px; font-weight:700;
  padding:5px 15px; border-radius:var(--pill); }
.cdmeta span{ color:#fff; font-size:14px; }
.cdgrid{ display:grid; grid-template-columns:1.35fr .65fr; gap:40px; align-items:start; }
.cdgrid h2{ font-size:23px; margin-bottom:14px; }
.cdgrid > div > p{ color:var(--ink-2); font-size:14.5px; margin-bottom:12px; }
.glance{ background:var(--paper); border-radius:var(--r); padding:22px;
  box-shadow:var(--shadow); position:-webkit-sticky; position:sticky; top:96px; }
.glance h3{ font-size:20px; margin-bottom:16px; }
.glance li{ display:flex; gap:12px; align-items:flex-start; margin-bottom:15px; }
.glance svg{ width:22px; height:22px; fill:var(--teal); flex:none; margin-top:2px; }
.glance b{ display:block; font-size:13.5px; }
.glance span{ font-size:13.5px; color:var(--ink-2); }
.glance .btn{ width:100%; }
.glance .btn+.btn{ margin-top:10px; }

/* ---------- contact ---------- */
.cband{ position:relative; overflow:hidden; isolation:isolate; }
.cband > .bg{ position:absolute; inset:0; z-index:-2; }
.cband > .bg img{ width:100%; height:100%; object-fit:cover; object-position:80% 28%; }
.cband::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(13,76,93,.97) 0%, rgba(13,76,93,.9) 38%, rgba(13,76,93,.45) 76%, rgba(13,76,93,.2) 100%); }
.cband .in{ position:relative; text-align:center; padding-block:64px 104px;
  max-width:640px; margin-inline:auto; }
.cband h1{ color:#fff; font-size:clamp(32px,4.4vw,46px); }
.cband p{ color:rgba(255,255,255,.86); font-size:15.5px; margin-top:12px; }
.vcut{ position:absolute; left:0; right:0; bottom:0; height:64px; z-index:2;
  background:var(--ground); -webkit-clip-path:polygon(0 8px, 50% 44px, 100% 0, 100% 100%, 0 100%); clip-path:polygon(0 8px, 50% 44px, 100% 0, 100% 100%, 0 100%); }
.touch-wrap{ margin-top:-72px; position:relative; z-index:3; }
.touch{ display:grid; grid-template-columns:.9fr 1.1fr; background:#fff;
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.touch .left{ background:var(--panel); padding:34px 32px; }
.touch .right{ padding:34px 32px; }
.touch h2{ font-size:26px; color:var(--teal); }
.touch .intro{ color:var(--ink-2); font-size:13.5px; margin-top:12px; }
.reach{ margin-top:24px; }
.reach li{ display:flex; gap:14px; align-items:center; margin-bottom:20px; }
.reach i{ width:42px; height:42px; border-radius:50%; background:var(--coral);
  display:grid; place-items:center; flex:none; }
.reach i svg{ width:19px; height:19px; fill:#fff; }
.reach b{ display:block; font-size:14px; }
.reach span{ font-size:12.5px; color:var(--ink-2); }
.crule{ height:1.5px; background:var(--coral); opacity:.55; margin:22px 0 18px; }
.csoc{ display:flex; gap:11px; margin-top:12px; }
/* The contact page ships an empty <div id="ps-social"> that shell.js replaces
   with the row above. Empty, it is 0px tall, so the steps list and the whole
   booking form below it used to be shoved down the moment the script ran -
   the same bug as the header, in a different place, and worth up to 0.55 CLS
   because everything under it moved. Holding the row's exact size here means
   the swap changes nothing. Measured 38px tall with a 12px top margin, every
   width, both languages; if .csoc above ever changes, change this with it. */
#ps-social{ height:38px; margin-top:12px; }
.csoc a{ width:38px; height:38px; border-radius:50%; background:var(--coral);
  display:grid; place-items:center; }
.csoc a:hover{ background:var(--coral-2); }
.csoc svg{ width:17px; height:17px; fill:#fff; }
.form{ margin-top:20px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form input,.form select,.form textarea{ width:100%; padding:12px 14px; border-radius:8px;
  border:1px solid var(--line); background:#fff; font-size:14px; outline:none;
  margin-bottom:12px; transition:border-color .16s ease, box-shadow .16s ease;
  /* Must be stated. Without it these inherit the panel colour, and inside a
     dark panel that is white text on a white box - invisible while typing. */
  color:var(--ink); }
.form input::placeholder,.form textarea::placeholder{ color:var(--ink-3); opacity:1; }
.form input::-webkit-input-placeholder,.form textarea::-webkit-input-placeholder{ color:var(--ink-3); }
.form input:focus,.form select:focus,.form textarea:focus{
  border-color:var(--coral); box-shadow:0 0 0 3px rgba(219,100,70,.14); }
.form textarea{ min-height:110px; resize:vertical; }
.form .note{ font-size:11.5px; color:var(--ink-3); margin-top:10px; line-height:1.6; }
.form .note a{ color:var(--coral); text-decoration:underline; }
.qa-split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:0; align-items:stretch; }
.qa-map{ -webkit-margin-start:calc(50% - 50vw); margin-inline-start:calc(50% - 50vw); }
.qa-map img{ width:100%; height:100%; object-fit:cover; min-height:360px;
  border-radius:0 var(--r) var(--r) 0; }
.qa-side{ padding:0 0 0 44px; }
.qa-side h2{ font-size:28px; margin-bottom:20px; }
.qrow summary{ gap:10px; }
.qrow .qi,.qrow .ai{ width:20px; height:20px; border-radius:50%; background:var(--coral);
  color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; flex:none; }
.qrow summary > span{ display:flex; align-items:center; gap:10px; }
.qrow .ans{ display:flex; gap:10px; }

/* ---------- footer ---------- */
.foot{ background:var(--teal); color:rgba(255,255,255,.76); padding-top:44px; }
.foot-in{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:36px; }
.fl-plate{ display:inline-block; background:#fff; border-radius:16px;
  padding:12px 20px; box-shadow:0 2px 10px rgba(0,0,0,.18); }
.foot img.fl{ height:92px; width:auto; display:block; }
.foot p{ font-size:13px; line-height:1.75; margin-top:14px; max-width:34ch; }
.foot h2{ color:#fff; font-size:14.5px; margin-bottom:14px; }
.foot li+li{ margin-top:9px; }
.foot a{ font-size:13.5px; }
.foot a:hover{ color:#fff; }
.fsoc{ display:flex; gap:10px; margin-top:18px; }
.fsoc a{ width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.12);
  display:grid; place-items:center; }
.fsoc a:hover{ background:var(--coral); }
.fsoc svg{ width:15px; height:15px; fill:#fff; }
.fcon li{ display:flex; gap:10px; font-size:13.5px; }
.fcon svg{ width:15px; height:15px; fill:var(--coral); flex:none; margin-top:4px; }
.foot-btm{ border-top:1px solid rgba(255,255,255,.13); padding-block:16px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; }
.foot-btm a+a{ -webkit-margin-start:20px; margin-inline-start:20px; }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .g4,.tgrid,.faces{ grid-template-columns:repeat(2,1fr); }
  .foot-in{ grid-template-columns:1.4fr 1fr 1fr; row-gap:30px; }
  .stats .row{ grid-template-columns:repeat(2,1fr); }
  .sgrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .nav,.hdr-top,.hdr .btn{ display:none; }
  .burger{ display:block; }
  .logo img{ height:74px; }
  /* the compact logo must still SHRINK when scrolled - the desktop rule
     (.hdr.small .logo img) outranks .logo img, so without this the phone
     header grew from 74 to 78 on scroll instead of getting out of the way */
  .hdr.small .logo img{ height:60px; }
  .hero{ grid-template-columns:1fr; padding:36px 26px; text-align:center; }
  .hero p{ margin-inline:auto; }
  .hero-btns{ justify-content:center; }
  .hero-art{ width:230px; height:230px; margin-top:26px; }
  .trust{ padding:16px 26px; gap:20px; justify-content:center; }
  .tri,.g3,.g2,.split,.plans,.proc,.cdgrid,.qa-split,.touch{ grid-template-columns:1fr; }
  .qa-side{ padding:34px 0 0; }
  .qa-map{ -webkit-margin-start:0; margin-inline-start:0; }
  .qa-map img{ min-height:240px; border-radius:var(--r); }
  .split{ gap:34px; }
  .badge{ right:8px; bottom:-14px; }
  .sgrid{ grid-template-columns:1fr; }
  .glance{ position:static; }
  .vcut{ height:38px; -webkit-clip-path:polygon(0 5px, 50% 26px, 100% 0, 100% 100%, 0 100%); clip-path:polygon(0 5px, 50% 26px, 100% 0, 100% 100%, 0 100%); }
  .touch-wrap{ margin-top:-44px; }
  .cband .in{ padding-block:44px 74px; }
}
@media (max-width:620px){
  .g4,.tgrid,.faces,.stats .row,.foot-in{ grid-template-columns:1fr; }
  .ticks{ grid-template-columns:1fr; }
  .row2{ grid-template-columns:1fr; }
  .quotecard{ padding:24px 26px; }
  .scard{ padding:60px 20px 18px; text-align:center; }
  .scard .av{ left:50%; top:-30px; transform:translateX(-50%); width:76px; height:76px; }
  .scard .stars{ text-align:center; }
  .touch .left,.touch .right{ padding:26px 22px; }
}

/* ============================================================
   ROUND 2 — components added for the client's change requests
   ============================================================ */

/* ---------- mobile menu extras ---------- */
.mobnav .mwa{ color:var(--coral); font-weight:800; }
.mobnav .mhrs{ display:block; padding:11px 0; font-size:13px; color:var(--ink-2); }

/* ---------- trusted by: three real curricula ---------- */
.trust.three b{ color:var(--ink-2); font-weight:700; letter-spacing:.1em; font-size:11.5px; }
.trust.three .marks{ justify-content:center; gap:44px; }
.trust.three .marks span{ color:var(--teal); font-size:16px; font-weight:800; }

/* ---------- Pit Stop Academy Team ---------- */
.leads{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px; max-width:680px; margin-inline:auto; }
.lead{ background:var(--paper); border-radius:var(--r); box-shadow:var(--shadow);
  padding:24px 22px; text-align:center; }
.lead .ph{ width:104px; height:104px; border-radius:50%; margin:0 auto 14px;
  overflow:hidden; background:var(--panel); display:grid; place-items:center;
  /* A photo shot on a white background would otherwise bleed into the white
     card and read as a floating head. The hairline gives the circle an edge
     whatever the photo behind it. Outer shadow, so it paints over the image. */
  box-shadow:0 0 0 1px rgba(18,58,70,.12); }
.lead .ph img{ width:100%; height:100%; object-fit:cover; }
.lead .ph span{ font-size:28px; font-weight:800; color:var(--teal); }
.lead b{ display:block; font-size:17px; }
.lead .role{ display:block; color:var(--coral); font-size:13px; font-weight:700; margin-top:4px; }
.tnames{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px; }
.tnames span{ background:var(--panel); color:var(--teal); font-size:14px; font-weight:700;
  padding:9px 20px; border-radius:var(--pill); }
.tlabel{ text-align:center; font-size:13px; color:var(--ink-2);
  letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin-top:34px; }

/* ---------- testimonials: video + written in one flow ---------- */
.mix{ columns:3; column-gap:30px; -webkit-padding-start:26px; padding-inline-start:26px; }
.mix > *{ break-inside:avoid; width:100%; margin:0 0 30px; }
.vcard{ background:var(--story); border-radius:var(--r); overflow:hidden;
  display:block; box-shadow:var(--shadow); }
.vcard .poster{ position:relative; display:block; width:100%; padding:0; border:0;
  background:var(--teal-2); cursor:pointer; line-height:0; }
.vcard .poster img{ width:100%; object-fit:cover; display:block;
  filter:brightness(.86); transition:filter .2s ease; }
.vcard .poster:hover img{ filter:brightness(.98); }
.vcard .poster::after{ content:""; position:absolute; inset:0; margin:auto;
  width:58px; height:58px; border-radius:50%; background:var(--coral);
  box-shadow:0 6px 20px rgba(0,0,0,.28); }
.vcard .poster .tri{ position:absolute; inset:0; margin:auto; width:0; height:0;
  z-index:2; border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff; transform:translateX(3px); }
.vcard .poster:hover::after{ background:var(--coral-2); }
/* The videos are ours now, so each card is simply the shape of its own file.
   --vr carries that video's real width/height, set on the figure in the HTML.
   Poster and player share it, so pressing play changes nothing about the
   layout - no jump, no gap, no letterboxing we did not choose. 4/5 is only a
   fallback for a card that forgets to declare one. */
.vcard{ --vr:4/5; }
.vcard .poster,
.vcard .poster img,
.vcard .posterlink img,
.vcard video,
.vcard iframe{ aspect-ratio:var(--vr); }
.vcard video{ width:100%; display:block; border:0; background:#000; }
.vcard iframe{ width:100%; display:block; border:0; }
.vcard .meta{ padding:15px 18px 17px; }
.vcard .meta b{ display:block; font-size:16px; }
.vcard .meta .course{ color:var(--coral); font-size:12.5px; }
.vcard .flag{ color:var(--ink-2); display:inline-block; margin-top:9px; font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  border:1px dashed var(--ink-3); border-radius:6px; padding:3px 8px; }
.mix .scard{ margin-bottom:30px; }

/* ---------- forms ---------- */
.form select{ -moz-appearance:none; appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),
                   linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; -webkit-padding-end:38px; padding-inline-end:38px; }
.form select:invalid{ color:var(--ink-3); }
.formlead{ font-size:13.5px; color:var(--ink-2); margin-top:10px; line-height:1.65; }
.formnote{ background:var(--panel); border-radius:8px; padding:11px 14px;
  font-size:13px; color:var(--teal); font-weight:600; margin-bottom:14px; line-height:1.55; }
.optional{ font-weight:400; color:var(--ink-3); }

/* ---------- course detail: at a glance ---------- */
.glance .price b{ color:var(--teal); }
.glance .price span{ color:var(--coral); font-size:15px; font-weight:800; }
.glance .price span em{ font-style:normal; font-weight:600; font-size:12.5px; color:var(--ink-2); }
.glance .note{ font-size:12px; color:var(--ink-3); line-height:1.6; margin-top:-4px;
  padding-bottom:14px; }
.ptable{ width:100%; border-collapse:collapse; margin:6px 0 18px; font-size:14px; }
.ptable th,.ptable td{ text-align:start; padding:11px 14px; border-bottom:1px solid var(--line); }
.ptable th{ background:var(--panel); color:var(--teal); font-size:13px; font-weight:800; }
.ptable td:last-child{ color:var(--coral); font-weight:800; white-space:nowrap; }
.ptable tr:last-child td{ border-bottom:0; }
.keyfact{ background:var(--panel); border-radius:var(--r); padding:16px 20px;
  margin:0 0 22px; font-size:14px; color:var(--teal); font-weight:600; line-height:1.6; }
/* Prices sit in this bold, on the pale teal box, at 2.89:1 - the lowest on
   the site. The owner was shown that number on 30 Sep and asked for the brand
   orange here too. Their call; see claude/brand-orange-decision.md. */
.keyfact b{ color:var(--coral); }

/* ---------- corporate lead flow ---------- */
.corp{ background:var(--teal); border-radius:var(--r); padding:28px 30px; color:#fff; }
.corp h3{ color:#fff; font-size:21px; }
.corp p{ color:rgba(255,255,255,.82); font-size:14px; margin-top:10px; }
.corp .form{ margin-top:18px; }
.corp .form input,.corp .form textarea{ margin-bottom:12px; }
.corp .form textarea{ min-height:96px; }
.corp .note{ color:rgba(255,255,255,.6); }

/* ---------- coming soon ---------- */
.soon{ text-align:center; margin-top:34px; padding:22px 26px; border:1.5px dashed var(--line);
  border-radius:var(--r); color:var(--ink-2); font-size:14.5px; line-height:1.7; }
.soon b{ color:var(--teal); }
.soon a{ color:var(--coral); font-weight:700; white-space:nowrap; }

/* ---------- misc ---------- */
.cta.center.plain{ background:var(--teal); }
.lede{ color:var(--ink-2); font-size:14.5px; margin-top:14px; }
.online-pill{ display:inline-flex; align-items:center; gap:8px; background:var(--panel);
  color:var(--teal); font-size:13px; font-weight:700; padding:7px 16px;
  border-radius:var(--pill); margin-bottom:16px; }
.online-pill svg{ width:15px; height:15px; fill:var(--teal); }

/* ---------- responsive for the new pieces ---------- */
@media (max-width:1080px){
  .mix{ columns:2; }
}
@media (max-width:900px){
  .hdr-top{ display:none; }
  .leads{ grid-template-columns:1fr; max-width:420px; }
  .trust.three .marks{ gap:24px; }
}
@media (max-width:620px){
  .mix{ columns:1; -webkit-padding-start:0; padding-inline-start:0; }
  .mix .scard{ margin-bottom:26px; }
  .ptable th,.ptable td{ padding:9px 10px; font-size:13px; }
  .corp{ padding:22px 20px; }
}

[hidden]{ display:none !important; }

.steps{ margin-top:14px; counter-reset:st; }
.steps li{ display:flex; gap:12px; align-items:flex-start; font-size:13.5px;
  color:var(--ink); line-height:1.6; margin-bottom:13px; }
.steps li > span:first-child{ width:24px; height:24px; border-radius:50%;
  background:var(--coral); color:#fff; font-size:12px; font-weight:800;
  display:grid; place-items:center; flex:none; margin-top:1px; }

/* ============================================================
   RIGHT TO LEFT
   Most of the layout already uses logical properties and flips
   on its own. These are the cases that cannot: decorations
   pinned to a physical side, gradients with an angle, and the
   two places a triangle must keep pointing the same way.
   ============================================================ */

/* headings and the eyebrow: Arabic reads badly with tight tracking */
[dir="rtl"] .eyebrow{ letter-spacing:.06em; }
[dir="rtl"] .trust.three b,
[dir="rtl"] .tlabel,
[dir="rtl"] .vcard .flag{ letter-spacing:.02em; }
[dir="rtl"] .hero h1,
[dir="rtl"] .banner h1,
[dir="rtl"] .cband h1,
[dir="rtl"] .cdhead h1{ line-height:1.35; }
[dir="rtl"] .shead h2,
[dir="rtl"] h2,[dir="rtl"] h3{ line-height:1.4; }

/* the coral arc behind the hero portrait */
[dir="rtl"] .hero-art::after{ -webkit-clip-path:inset(0 50% 0 0); clip-path:inset(0 50% 0 0); }

/* corner fold on the highlighted course card */
[dir="rtl"] .tcard.hot::after{ right:auto; left:0;
  /* mirror of the LTR fold (225deg) across the vertical axis; the base rule's
     gradient background is kept, only its direction flips - the old border
     technique left the base gradient underneath and drew a second shape. */
  background:linear-gradient(135deg, var(--ground) 50%, rgba(0,0,0,.12) 50%); }

/* the floating "never more than five" badge */
[dir="rtl"] .badge{ right:auto; left:-10px; }
@media (max-width:900px){ [dir="rtl"] .badge{ left:8px; right:auto; } }

/* quote marks swap sides so they still open and close correctly */
[dir="rtl"] .quotecard .qm.l{ left:auto; right:20px; }
[dir="rtl"] .quotecard .qm.r{ right:auto; left:20px; }

/* testimonial avatar hangs off the other edge */
[dir="rtl"] .scard{ padding:18px 66px 18px 20px; }
[dir="rtl"] .scard .av{ left:auto; right:-24px; }
@media (max-width:620px){
  [dir="rtl"] .scard{ padding:60px 20px 18px; }
  [dir="rtl"] .scard .av{ right:50%; left:auto; transform:translateX(50%); }
}

/* contact banner: the photo and its gradient both mirror */
[dir="rtl"] .cband::before{
  background:linear-gradient(270deg, rgba(13,76,93,.97) 0%, rgba(13,76,93,.9) 38%, rgba(13,76,93,.45) 76%, rgba(13,76,93,.2) 100%); }
[dir="rtl"] .cband > .bg img{ object-position:20% 28%; }

/* select arrow moves to the left edge */
[dir="rtl"] .form select{
  background-position:19px 50%, 24px 50%;
  background-image:linear-gradient(135deg,transparent 50%,var(--ink-2) 50%),
                   linear-gradient(45deg,var(--ink-2) 50%,transparent 50%); }

/* a play button always points the way video runs, never mirrored */
[dir="rtl"] .play svg{ margin-left:0; margin-right:3px; }
[dir="rtl"] .vcard .poster .tri{ transform:translateX(3px); }

/* arrows written into the copy as characters need flipping */
[dir="rtl"] .ccard .view,
[dir="rtl"] .soon a{ unicode-bidi:plaintext; }

/* numbers, emails and Latin brand names inside Arabic sentences */
[dir="rtl"] .hdr-top .wa span,
[dir="rtl"] .fcon,
[dir="rtl"] .reach b,
[dir="rtl"] .ptable td:last-child{ unicode-bidi:plaintext; }

/* language switch */
.langsw{ display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--line);
  background:var(--paper); border-radius:var(--pill); padding:3px; flex:none; }
.langsw button{ border:0; background:none; cursor:pointer; padding:5px 12px;
  border-radius:var(--pill); font-size:12.5px; font-weight:800; color:var(--ink-2);
  line-height:1.2; transition:background .16s ease, color .16s ease; }
.langsw button.on{ background:var(--teal); color:#fff; }
.langsw button:not(.on):hover{ color:var(--teal); }
.mobnav .langsw{ margin-top:12px; }

/* ---------- plan boxes on the course pages ---------- */
.planbox{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; margin:14px 0; box-shadow:var(--shadow); }
.planbox h3{ font-size:16px; color:var(--teal); margin-bottom:10px; }
.planbox ul{ margin-bottom:12px; }
.planbox li{ position:relative; -webkit-padding-start:16px; padding-inline-start:16px; font-size:13.5px;
  color:var(--ink-2); margin-bottom:6px; line-height:1.6; }
.planbox li::before{ content:""; position:absolute; inset-inline-start:0; top:9px;
  width:5px; height:5px; border-radius:50%; background:var(--coral); }
.planbox .amt{ display:inline-block; background:var(--coral); color:#fff;
  font-size:15px; font-weight:800; padding:7px 16px; border-radius:var(--pill); }
.flabel{ display:block; font-size:13.5px; font-weight:700; margin-bottom:8px; }
.corp .flabel{ color:#fff; }

/* ---------- form fallback, shown only if the WhatsApp tab was blocked ---------- */
.fallback{ margin-top:14px; padding:14px 16px; border:1.5px dashed var(--line);
  border-radius:var(--r); background:var(--paper); }
.fallback p{ font-size:12.5px; color:var(--ink-2); line-height:1.6; margin-bottom:10px; }
.fallback a{ color:var(--coral); font-weight:700; text-decoration:underline; }
.fallback textarea{ width:100%; font-size:12.5px; line-height:1.6; padding:10px 12px;
  border:1px solid var(--line); border-radius:8px; background:var(--ground);
  color:var(--ink); resize:vertical; }
.corp .fallback{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); }
.corp .fallback p{ color:rgba(255,255,255,.8); }
.corp .fallback textarea{ background:rgba(255,255,255,.94); }

/* a quiet pointer to the other lead flow, under the course field */
.hintline{ font-size:12.5px; color:var(--ink-2); margin:-4px 0 14px; line-height:1.6; }
.hintline a{ color:var(--coral); font-weight:700; text-decoration:underline; white-space:nowrap; }

/* ==================================================================
   MOTION
   Everything below is gated on html.motion, a class the script adds on
   startup. If the script never runs, none of these rules match and the
   page renders exactly as it did before - fully visible. Nothing here
   may hide content that JavaScript is then responsible for revealing.

   Rules of the layer:
     - transform and opacity only; no layout properties, no colour,
       no shape. Motion is added to the design, it does not change it.
     - exits are faster than entrances.
     - every animation collapses under prefers-reduced-motion.
   ================================================================== */

/* ---------- page transitions ----------
   Native cross-document transitions. Browsers without support simply
   navigate the way they always did. */
@view-transition{ navigation:auto; }

::view-transition-old(root){
  animation:vt-out var(--t-exit) var(--ease-io) both;
}
::view-transition-new(root){
  animation:vt-in var(--t-base) var(--ease) both;
}
@keyframes vt-out{ to{ opacity:0; transform:translate3d(0,-6px,0); } }
@keyframes vt-in { from{ opacity:0; transform:translate3d(0,10px,0); } }

/* the header is continuous across pages, so it must not cross-fade with
   the body - it stays put while the content behind it changes */
.hdr{ view-transition-name:ps-header; }
#ps-footer{ view-transition-name:ps-footer; }
::view-transition-old(ps-header),::view-transition-new(ps-header),
::view-transition-old(ps-footer),::view-transition-new(ps-footer){
  animation:none; mix-blend-mode:normal;
}

/* ---------- cards ----------
   Lift only. No shadow growth, no scale, no colour - the card looks
   identical, it just acknowledges the pointer. */
@media (hover:hover){
  html.motion .tcard,
  html.motion .scard,
  html.motion .vcard,
  html.motion .planbox,
  html.motion .qa-split .acc{
    transition:transform var(--t-fast) var(--ease);
  }
  html.motion .tcard:hover,
  html.motion .scard:hover,
  html.motion .vcard:hover,
  html.motion .planbox:hover{ transform:translateY(-4px); }
}

/* ---------- buttons ----------
   The existing colour transition is untouched; transform is added to it. */
.btn{ transition:background .16s ease, color .16s ease, border-color .16s ease,
                 transform var(--t-fast) var(--ease); }
@media (hover:hover){ html.motion .btn:hover{ transform:translateY(-2px); } }
html.motion .btn:active{ transform:translateY(0) scale(.985);
  transition-duration:var(--t-tap); }
/* the same press feedback on the other tappable things */
html.motion .morelink:active,
html.motion .langsw button:active,
html.motion .burger:active{ transform:scale(.96); }
html.motion .morelink,
html.motion .langsw button{ transition:transform var(--t-tap) var(--ease); }

/* ---------- scroll reveal ----------
   Applied by the observer to sections, and to the children of card grids so
   a list arrives as a list. --d carries the stagger beat.

   This block sits AFTER the card and button rules on purpose. Those set a
   `transition` shorthand of their own, and at equal specificity the later
   rule wins outright - with the card rules last they were resetting the
   reveal's transition to transform-only, which silently dropped both the
   opacity fade and the stagger delay. The observer removes the attribute
   once an element has arrived, so the fast hover transition takes over
   again the moment the entrance is over. */
html.motion [data-reveal]{
  opacity:0;
  transform:translate3d(0,var(--rise),0);
  transition:opacity var(--t-slow) var(--ease) var(--d,0ms),
             transform var(--t-slow) var(--ease) var(--d,0ms);
}
html.motion [data-reveal].in{ opacity:1; transform:none; }

/* ---------- mobile drawer ----------
   grid-template-rows 0fr -> 1fr animates a panel open without knowing its
   height and without a max-height guess that clips. The header is fixed,
   so this costs no page reflow. */
@media (max-width:900px){
  /* Height, not the grid 0fr->1fr trick. In this container fr never
     interpolates: a 0.98fr track still resolves to the full content height,
     so the panel snapped open. The script measures the content and hands it
     over as --drawer-h. The header is fixed, so animating height here costs
     no page reflow. */
  .mobnav{
    display:block; height:0; overflow:hidden; opacity:0; padding-block:0;
    visibility:hidden;
    transition:height var(--t-exit) var(--ease-io),
               opacity calc(var(--t-exit) * .7) linear,
               visibility 0s linear var(--t-exit);
  }
  .mobnav.open{
    height:var(--drawer-h, 60vh); opacity:1; visibility:visible;
    transition:height var(--t-base) var(--ease),
               opacity var(--t-fast) linear,
               visibility 0s linear 0s;
  }
  /* links fall in behind the panel, closing together with no stagger */
  html.motion .mobnav-in > *{
    opacity:0; transform:translateY(-6px);
    transition:opacity var(--t-exit) var(--ease-io),
               transform var(--t-exit) var(--ease-io);
  }
  html.motion .mobnav.open .mobnav-in > *{
    opacity:1; transform:none;
    transition:opacity var(--t-base) var(--ease) calc(var(--i,0) * var(--step) * .5),
               transform var(--t-base) var(--ease) calc(var(--i,0) * var(--step) * .5);
  }
}

/* ---------- language switch ----------
   The whole document flips direction, so it crossfades as one piece
   rather than snapping. */
::view-transition-old(root),::view-transition-new(root){
  animation-duration:var(--t-base);
}
html.lang-swap main{ animation:lang-fade var(--t-base) var(--ease) both; }
@keyframes lang-fade{ from{ opacity:0; } }

/* ---------- reduced motion ----------
   Not "no motion": movement is removed, but the fades that tell you
   something changed are kept, and shortened. */
@media (prefers-reduced-motion: reduce){
  html.motion [data-reveal]{ transform:none; transition-duration:.01ms;
    transition-delay:0ms !important; }
  html.motion [data-reveal].in{ transform:none; }
  html.motion .tcard:hover, html.motion .scard:hover,
  html.motion .vcard:hover, html.motion .planbox:hover,
  html.motion .btn:hover{ transform:none; }
  html.motion .btn:active{ transform:none; }
  .mobnav, .mobnav.open{ transition-duration:.01ms; }
  html.motion .mobnav-in > *{ transform:none; transition-duration:.01ms;
    transition-delay:0ms !important; }
  html.motion .mobnav.open .mobnav-in > *{ transform:none;
    transition-delay:0ms !important; }
  ::view-transition-old(root){ animation:vt-fade-out var(--t-exit) linear both; }
  ::view-transition-new(root){ animation:vt-fade-in var(--t-exit) linear both; }
  @keyframes vt-fade-out{ to{ opacity:0; } }
  @keyframes vt-fade-in { from{ opacity:0; } }
}

/* ---------- first paint ----------
   The opening section animates declaratively, straight from the stylesheet.
   No script gates it, so there is no window where the content sits visible
   and then gets hidden - the reason the scroll reveals below only ever touch
   elements that start below the fold. */
@keyframes rise-in{ from{ opacity:0; transform:translate3d(0,var(--rise),0); } }

main > section:first-of-type{
  animation:rise-in var(--t-slow) var(--ease) both;
}
/* the hero is the one authored moment on the site, so its parts arrive in
   reading order instead of as a single block */
.hero > div > h1       { animation:rise-in var(--t-slow) var(--ease) both; }
.hero > div > p        { animation:rise-in var(--t-slow) var(--ease) calc(var(--step) * 1) both; }
.hero > div > .hero-btns{ animation:rise-in var(--t-slow) var(--ease) calc(var(--step) * 2) both; }
.hero-art              { animation:rise-in var(--t-slow) var(--ease) calc(var(--step) * 1.5) both; }
/* The hero's own container must not also animate, or the two compound.
   This used :has(), which Firefox only shipped in late 2023 and Samsung
   Internet in v20 - on anything older the whole rule is discarded and the
   hero animates twice. A plain class works in every browser ever made. */
main > section.s-hero{ animation:none; }

@media (prefers-reduced-motion: reduce){
  main > section:first-of-type,
  .hero > div > h1, .hero > div > p, .hero > div > .hero-btns, .hero-art{
    animation-duration:.01ms; animation-delay:0ms;
  }
}

/* ==================================================================
   NARROW SCREENS - nothing may be wider than the phone
   Two separate causes, both handled here.

   1. A grid or flex item defaults to min-width:auto, which resolves to
      min-content. One long word inside an item therefore widens the whole
      track past the viewport, and every sibling in that track is dragged
      out with it. On the contact page that pulled the form panel off the
      screen even though nothing in the form was too wide.

   2. The thing setting that min-content width was the academy's email,
      pitstop_english_academy@outlook.com - 35 characters with nowhere to
      break, 283px of unbreakable text on a screen with 272px to spare.

   The symptom is easy to misread: the header is position:fixed so it sizes
   to the viewport and looks perfect, while the page behind it is wider and
   gets clipped. It reads as "the site doesn't fit my phone".
   ================================================================== */
.touch > *, .cdgrid > *, .tri > *, .g3 > *, .g2 > *, .sgrid > *,
.plans > *, .proc > *, .touch > * > *, .split > *, .qa-split > *,
.steps > li, .ticks > li, .reach > li{ min-width:0; }

/* long words wrap instead of sticking out */
body{ overflow-wrap:break-word; }
/* anywhere, not break-word: only `anywhere` also lowers the min-content
   width, which is what stops the email widening its grid track */
.reach a, .reach b, .reach span{ overflow-wrap:anywhere; }

/* an image can never be wider than what holds it */
img{ max-width:100%; height:auto; }

/* ---------- video fallback ----------
   The link is always there once the player opens; the note only appears if
   the frame never reported loading. A silent white rectangle is the one
   outcome this card must never produce. */
.vcard .ytlink{ display:inline-block; margin-top:8px; font-size:12.5px; font-weight:800;
  color:var(--coral); text-decoration:underline; text-underline-offset:3px; }
.vcard .ytlink:hover{ color:var(--coral-2); }
.vcard .vnote{ display:none; margin-top:9px; font-size:12px; line-height:1.45;
  color:var(--ink-2); }
.vcard.vfail .vnote{ display:block; }
/* A frame the page has refused to load draws nothing but a white void, which
   reads as a broken image rather than a blocked one. Take it out entirely and
   let the card stand as its caption plus the link that does work. */
.vcard.vfail iframe{ display:none; }


/* ==================================================================
   OLDER DEVICES
   ================================================================== */

/* aspect-ratio arrived in Safari 15 / iOS 15 (2021). On anything older the
   declaration is ignored and a card sizes itself to whatever the image is,
   so the grid loses its rhythm. This reserves the same shape the old way -
   a padded box with the image stretched over it - and only on browsers that
   actually need it. */
@supports not (aspect-ratio: 2 / 1){
  .ccard img{ height:0; padding-bottom:50%; }        /* 2:1  */
  /* Browsers without aspect-ratio cannot read the per-card variable either, so
     they get one sensible upright box. Safari 14 and below, and nothing newer. */
  .vcard .poster img,
  .vcard video,
  .vcard iframe{ height:0; padding-bottom:125%; }              /* 4:5  */
  .vcard .poster{ position:relative; }
  .vcard .poster img{ position:absolute; inset:0; padding-bottom:0; height:100%; }
  .vcard .poster{ height:0; padding-bottom:125%; }
}

/* 100vh on an iPhone counts the area behind the browser toolbar, so a menu
   capped at 100vh can run under it. dvh measures what is actually visible;
   the vh line stays first as the fallback for browsers without it. */
.hdr{ max-height:100vh; max-height:100dvh; }


/* ---------- testimonial cards ----------
   Long, real messages rather than three tidy invented lines, so the text has
   to breathe and stay readable in whichever direction it was written in. */
.scard p{ font-size:14px; line-height:1.72; }
.scard[dir], .scard p[dir="rtl"]{ text-align:start; }
.scard p[dir="rtl"]{ font-family:var(--font-ar); line-height:1.9; letter-spacing:0; }
.scard figcaption{ margin-top:12px; padding-top:10px; border-top:1px solid rgba(13,76,93,.14); }
.scard figcaption b{ font-size:13.5px; color:var(--teal); font-weight:800; }
/* an English quote inside the Arabic page, and the reverse, must not inherit
   the page direction or the paragraph falls apart */
.quotecard p[dir="rtl"]{ font-family:var(--font-ar); line-height:1.9; text-align:start; }
@media (max-width:900px){
  .scard{ padding:20px 22px; text-align:start; }
}


/* the poster restored after a refused player - same shape as the button it
   replaces, so a blocked card still reads as a video rather than an error */
.vcard .posterlink{ position:relative; display:block; }
.vcard .posterlink img{ width:100%; object-fit:cover; display:block; }
.vcard .posterlink::after{ content:""; position:absolute; inset:0; margin:auto;
  width:58px; height:58px; border-radius:50%; background:var(--coral); }
.vcard .posterlink .tri{ position:absolute; inset:0; margin:auto; width:0; height:0;
  border-top:11px solid transparent; border-bottom:11px solid transparent;
  border-inline-start:17px solid #fff; z-index:2; }
[dir="rtl"] .vcard .posterlink .tri{ transform:translateX(3px); }
@media (hover:hover){ .vcard .posterlink:hover::after{ background:var(--coral-2); } }

/* Honeypot. Off-screen rather than display:none - some automated form-fillers
   skip hidden fields but happily complete this one, which is the tell. Mirrored
   for RTL so it never pushes the page sideways in Arabic. */
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px;
     opacity:0; pointer-events:none; }
:root[dir="rtl"] .hp{ left:auto; right:-9999px; }

/* ---------- fixes from the full audit, 29 Sep 2026 ------------------- */

/* Line 535 sets outline:none on every form control, and because that selector
   is more specific than the site-wide :focus-visible ring on line 127, the
   ring never appeared on any field of either form. What was left was a 1px
   border recolour and a glow at 14% alpha - which is, in practice, nothing.
   A keyboard user filling in the booking form could not see where they were.
   This puts the ring back exactly where it was cancelled. */
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible{
  outline:2px solid var(--coral);
  outline-offset:2px;
}

/* A heading that exists for the document outline and for screen readers but
   is not meant to be seen. Used where a page jumped from its h1 straight to
   the h3 of its first card. Not display:none, which would hide it from
   screen readers too, and not a negative text-indent, which breaks in RTL. */
.vh{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}

/* Turnstile sits above the send button. It usually draws nothing at all, so
   it must not leave a gap; when it does draw, it needs room. */
.ts-slot:not(:empty){ margin:4px 0 14px; }

/* The consent line under each form. It sits on .note for its size and colour;
   this only lifts it away from the sentence above so it reads as its own
   statement rather than a trailing remark. The class existed with no rule
   behind it, which looked like something half-finished. */
.form .note.consent{ margin-top:10px; }