/* ════════════════════════════════════════════════════════════════════
   Home page sections added October 2026:
     .why-*   the swipeable photo cards right after the hero
     .pk-*    the box that opens onto the packages as you scroll
     .rv-*    students' reviews (shown only when there are real ones)
     .inv-*   "invest in yourself" banner before the footer
     .hf-*    the home page footer
     .tv-*    the teacher's film right under the first screen
   Colours and type come from site.css (:root).
   ════════════════════════════════════════════════════════════════════ */

/* ── Shared ─────────────────────────────────────────────────────────── */
.home-head{ text-align:center; max-width:62ch; margin:0 auto clamp(26px,4vw,44px); }
/* The label is the section's title (the owner's rule: «لماذا تارغو» is
   large and carries weight), and the h2 under it is its subtitle. Same
   treatment as the other pages' section titles in site.css. */
.home-head .eyebrow{
  display:inline-flex; align-items:center; gap:clamp(12px,2.4vw,18px);
  font-family:var(--font-head); font-size:clamp(2.05rem,7.4vw,3.3rem); font-weight:800; line-height:1.2;
  letter-spacing:0; color:#F3C86A; text-shadow:0 2px 22px rgba(243,200,106,.22); margin-bottom:clamp(10px,1.6vw,16px);
}
/* No short gold lines either side of the title any more (owner, 2 October:
   they looked cheap): the large gold title carries the section alone. */
.home-head h2{ font-family:var(--font-head); font-size:clamp(1.15rem,3.4vw,1.55rem); font-weight:700; line-height:1.55; color:#fff; }
.home-head p{ margin-top:10px; color:var(--muted); font-size:clamp(.92rem,2.2vw,1.02rem); }

/* ── 1. Why Targo: swipeable cards (the 51talk pattern) ──────────────
   A coloured card: the title at the top, a photo filling the lower part.
   Until a photo is supplied, a drawing in the card's own colours stands in.
   The photo's top edge fades into the card colour, so a photo shot on a
   plain background of about that colour meets it without a seam. */
.why-band{ padding:clamp(48px,7vw,88px) 0 clamp(28px,4vw,48px); position:relative; }
.why-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.why-top .home-head{ margin-inline:0; text-align:start; margin-bottom:clamp(20px,3vw,32px); }
.why-arrows{ display:flex; gap:10px; margin-bottom:clamp(20px,3vw,32px); flex:0 0 auto; }
.why-arrow{
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:var(--text);
  background:rgba(255,255,255,.04); border:1px solid rgba(243,200,106,.35);
  transition:background .25s var(--ease), border-color .25s var(--ease), opacity .25s;
}
.why-arrow:hover{ background:rgba(243,200,106,.12); border-color:var(--gold); }
.why-arrow:disabled{ opacity:.3; cursor:default; }
.why-arrow svg{ width:20px; height:20px; }

.why-track{
  display:flex; gap:clamp(12px,2vw,20px);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:4px max(16px, calc((100vw - var(--max)) / 2 + 16px)) 18px;
  scroll-padding-inline:max(16px, calc((100vw - var(--max)) / 2 + 16px));
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.why-track::-webkit-scrollbar{ display:none; }
.why-card{
  position:relative; flex:0 0 clamp(250px, 74vw, 320px); height:clamp(400px, 118vw, 470px);
  border-radius:28px; overflow:hidden; scroll-snap-align:start;
  display:flex; flex-direction:column;
  background:var(--wc); color:var(--wt);
  box-shadow:0 18px 40px rgba(0,0,0,.4);
  transition:transform .35s var(--ease);
}
.why-card:hover{ transform:translateY(-4px); }
.why-txt{ padding:24px 22px 6px; position:relative; z-index:2; }
.why-txt h3{ font-family:var(--font-head); font-size:clamp(1.35rem,4.6vw,1.6rem); font-weight:800; line-height:1.3; color:inherit; }
.why-txt p{ margin-top:6px; font-size:.9rem; line-height:1.65; opacity:.86; }
.why-media{ position:relative; flex:1; min-height:0; }
.why-art, .why-photo{ position:absolute; inset:0; width:100%; height:100%; }
.why-photo{ object-fit:cover; object-position:50% 100%;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 16%); mask-image:linear-gradient(180deg, transparent 0, #000 16%); }
.why-dots{ display:flex; justify-content:center; gap:7px; margin-top:4px; }
.why-dots i{ width:7px; height:7px; border-radius:99px; background:rgba(255,255,255,.18); transition:width .3s var(--ease), background .3s; }
.why-dots i.on{ width:22px; background:var(--gold); }
@media (max-width:640px){ .why-arrows{ display:none; } .why-top .home-head{ text-align:center; margin-inline:auto; } .why-top{ justify-content:center; } }

/* ── 1b. About Targo ──────────────────────────────────────────────
   One palette: navy, gold, and the pale sky every photo sits on. The four
   facts in a row, then three rows of picture and words that swap sides and
   slide in as the page scrolls (home.js adds .ab-live, and .in to a row as
   it arrives), then how to start in three steps. */
.ab-band{ padding:clamp(56px,8vw,100px) 0;
  overflow:hidden; overflow:clip; }   /* a picture waiting to slide in sits past the edge; it must not widen the page */
.ab-facts{ list-style:none; margin:0 auto clamp(44px,7vw,84px); padding:0; max-width:980px;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.ab-facts li{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:16px; font-weight:700; font-size:.98rem; color:#fff;
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); border:1px solid rgba(243,200,106,.2); }
.ab-facts svg{ width:26px; height:26px; flex:none; color:#F3C86A; }
@media (max-width:900px){ .ab-facts{ grid-template-columns:1fr 1fr; } }
/* A phone: the icon over the words, centred, so each fact reads as one line
   or two rather than a word per line beside its icon. */
@media (max-width:560px){
  .ab-facts{ gap:10px; }
  .ab-facts li{ flex-direction:column; justify-content:center; text-align:center; gap:8px; padding:16px 10px; font-size:.92rem; line-height:1.45; }
}

.ab-rows{ display:grid; gap:clamp(52px,8vw,104px); }
.ab-row{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:center; gap:clamp(28px,5vw,72px); }
.ab-row:nth-child(even) .ab-media{ order:2; }        /* right-to-left: picture right, then left, then right */
.ab-media{ position:relative; aspect-ratio:4 / 3; border-radius:28px; overflow:hidden;
  background:radial-gradient(120% 100% at 30% 15%, #F1FBFF 0%, #D4F0FD 48%, #A9E3FB 100%);
  box-shadow:0 24px 50px rgba(0,0,0,.35); }
.ab-art, .ab-photo{ position:absolute; inset:0; width:100%; height:100%; }
.ab-photo{ object-fit:cover; object-position:50% 40%; }
.ab-chip{ position:absolute; bottom:16px; inset-inline-start:16px; max-width:calc(100% - 32px);
  display:flex; flex-wrap:wrap; align-items:center; gap:7px 8px; padding:10px 14px; border-radius:14px;
  background:rgba(10,21,53,.9); color:#fff; font-size:.86rem; line-height:1.4; box-shadow:0 12px 28px rgba(10,21,53,.35);
  animation:abFloat 5s ease-in-out infinite; }
@keyframes abFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.ab-chip b{ color:#F3C86A; font-weight:800; }
.ab-flags{ display:flex; gap:4px; }
.ab-flags img{ width:22px; height:16.5px; border-radius:3px; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.25); }
.ab-chip-eq span{ padding:2px 9px; border-radius:99px; background:rgba(255,255,255,.1); font-weight:600; }
.ab-chip-eq i{ font-style:normal; color:#F3C86A; font-weight:800; }
.ab-num{ display:block; margin-bottom:10px; font-family:'IBM Plex Mono', monospace; font-size:.9rem; letter-spacing:.2em; color:#F3C86A; }
.ab-text h3{ font-family:var(--font-head); font-size:clamp(1.55rem,4.6vw,2.25rem); font-weight:800; line-height:1.3; color:#fff; margin:0 0 12px; }
.ab-text p{ margin:0; font-size:clamp(.98rem,2.4vw,1.08rem); line-height:2; color:rgba(226,238,255,.74); }
@media (max-width:820px){
  .ab-row{ grid-template-columns:1fr; gap:22px; }
  .ab-row:nth-child(even) .ab-media{ order:0; }
}
/* The slide-in, only where the script runs and motion is welcome. */
.ab-live .ab-media, .ab-live .ab-text{ transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.ab-live .ab-row:not(.in) .ab-media{ opacity:0; transform:translateX(48px); }
.ab-live .ab-row:nth-child(even):not(.in) .ab-media{ transform:translateX(-48px); }
.ab-live .ab-row:not(.in) .ab-text{ opacity:0; transform:translateY(22px); }
.ab-live .ab-row.in .ab-text{ transition-delay:.12s; }
@media (max-width:820px){
  .ab-live .ab-row:not(.in) .ab-media, .ab-live .ab-row:nth-child(even):not(.in) .ab-media{ transform:translateY(28px); }
}
@media (prefers-reduced-motion: reduce){ .ab-chip{ animation:none; } }
@media (max-width:560px){ .ab-chip{ bottom:12px; inset-inline-start:12px; max-width:calc(100% - 24px); padding:8px 10px; font-size:.78rem; gap:5px 6px; } }

.ab-steps{ margin-top:clamp(56px,8vw,100px); padding:clamp(24px,4vw,40px); border-radius:24px;
  background:linear-gradient(160deg, rgba(19,48,107,.55), rgba(10,21,53,.6)); border:1px solid rgba(128,174,255,.16); }
.ab-steps-t{ font-family:var(--font-head); font-size:clamp(1.55rem,4.6vw,2.1rem); font-weight:800; color:#F3C86A; text-align:center; margin:0 0 clamp(22px,3vw,32px); }
.ab-steps ol{ list-style:none; margin:0; padding:0; position:relative; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(18px,3vw,32px); }
.ab-steps ol::before{ content:""; position:absolute; top:22px; inset-inline:22px; height:2px;
  background:linear-gradient(270deg, rgba(243,200,106,.55), rgba(243,200,106,.08)); }
.ab-steps li{ position:relative; }
.ab-step-n{ position:relative; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; margin-bottom:14px;
  font-weight:800; font-size:1.1rem; color:#0a1535; background:linear-gradient(135deg,#ffe39a,#F3C86A); box-shadow:0 0 0 6px #0e1d47; }
.ab-steps li b{ display:block; font-size:1.1rem; color:#fff; margin-bottom:6px; }
.ab-steps li p{ margin:0; font-size:.95rem; line-height:1.9; color:rgba(226,238,255,.7); }
.ab-private{ display:flex; align-items:flex-start; gap:10px; margin:clamp(22px,3vw,30px) 0 0; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08); font-size:.9rem; line-height:1.8; color:rgba(226,238,255,.66); }
.ab-private svg{ width:20px; height:20px; flex:none; margin-top:3px; color:#F3C86A; }
.ab-private b{ color:#fff; }
@media (max-width:820px){
  .ab-steps ol{ grid-template-columns:1fr; }
  .ab-steps ol::before{ top:22px; bottom:22px; inset-inline:21px auto; width:2px; height:auto;
    background:linear-gradient(180deg, rgba(243,200,106,.55), rgba(243,200,106,.08)); }
  .ab-steps li{ display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:14px; }
  .ab-step-n{ grid-row:span 2; margin-bottom:0; }
  .ab-steps li b{ align-self:end; }
}
.ab-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:clamp(28px,4vw,40px); }
.ab-cta .btn{ max-width:100%; text-align:center; }

/* ── 1c. Language engineering ─────────────────────────────────────
   Two pictures overlapping (the engineered blueprint large, the person
   designing it smaller over its corner), four points beside them, then two
   example cards drawn like blueprints: what the form says, and what the
   curriculum becomes. */
.le-band{ padding:clamp(48px,7vw,96px) 0; overflow:hidden; overflow:clip; }
.le-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(32px,5vw,72px); }
.le-visual{ position:relative; padding-bottom:24%; }
.le-shot{ margin:0; position:relative; aspect-ratio:4 / 3; border-radius:24px; overflow:hidden; box-shadow:0 24px 50px rgba(0,0,0,.4); }
.le-shot-a{ width:88%; }
.le-shot-b{ position:absolute; bottom:0; inset-inline-end:0; width:54%; border:6px solid #0b1636; border-radius:22px; }
.le-art, .le-photo{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.le-photo{ object-fit:cover; }
.le-badge{ position:absolute; top:16px; inset-inline-start:16px; z-index:2; display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:99px; background:linear-gradient(135deg,#ffe39a,#F3C86A); color:#0a1535; font-size:.86rem;
  box-shadow:0 10px 24px rgba(0,0,0,.3); animation:abFloat 5s ease-in-out infinite; }
.le-badge svg{ width:18px; height:18px; }
.le-badge b{ font-weight:800; }
.le-points{ display:grid; gap:14px; }
.le-point{ display:flex; gap:14px; align-items:flex-start; padding:18px; border-radius:18px;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.012)); border:1px solid rgba(255,255,255,.08); }
.le-point > svg{ width:42px; height:42px; flex:none; padding:9px; border-radius:12px; color:#F3C86A; background:rgba(243,200,106,.1); }
.le-point h3{ font-family:var(--font-head); font-size:clamp(1.08rem,3vw,1.22rem); font-weight:800; color:#fff; margin:2px 0 6px; }
.le-point p{ margin:0; font-size:.95rem; line-height:1.9; color:rgba(226,238,255,.72); }
@media (max-width:900px){ .le-grid{ grid-template-columns:1fr; } .le-visual{ max-width:560px; margin-inline:auto; width:100%; } }
@media (max-width:560px){ .le-badge{ top:10px; inset-inline-start:10px; padding:7px 11px; font-size:.78rem; } .le-point{ padding:15px; gap:12px; } .le-point > svg{ width:38px; height:38px; padding:8px; } }

.le-examples{ margin-top:clamp(44px,7vw,80px); }
.le-ex-title{ text-align:center; font-family:var(--font-head); font-weight:800; font-size:clamp(1.15rem,3.4vw,1.5rem); color:#F3C86A; margin:0 0 clamp(18px,3vw,26px); }
.le-ex-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(14px,2.4vw,24px); }
.le-ex{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:start; gap:12px;
  padding:clamp(16px,2.4vw,22px); border-radius:20px; border:1px solid rgba(84,217,252,.25);
  background:#0b1a45; }
.le-ex-head{ grid-column:1 / -1; display:flex; align-items:center; gap:14px; padding-bottom:14px; margin-bottom:2px; border-bottom:1px dashed rgba(255,255,255,.12); }
.le-ex-head b{ display:block; font-size:1.02rem; font-weight:800; color:#fff; line-height:1.4; }
.le-ex-head small{ display:inline-block; margin-top:3px; padding:1px 10px; border-radius:99px; font-size:.74rem; font-weight:800; color:#0a1535; background:#54D9FC; }
/* The picture is the whole card's background (the owner, 1 October), with
   a navy veil over it, lighter at the top where the title sits, so every
   word stays readable. Until a picture is set, the card's own navy. */
.le-ex{ position:relative; overflow:hidden; isolation:isolate; }
.le-ex > :not(.le-ex-pic){ position:relative; z-index:1; }
.le-ex-pic{ position:absolute; inset:0; z-index:0; background:#0b1a45; }
.le-ex-pic::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,18,48,.38) 0%, rgba(8,18,48,.78) 34%, rgba(8,18,48,.9) 62%, rgba(8,18,48,.94) 100%); }
.le-ex-art{ display:none; }
.le-ex-pic .le-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.le-ex-head b{ text-shadow:0 2px 10px rgba(0,0,0,.55); }
.le-ex-lbl{ display:block; margin-bottom:8px; font-size:.78rem; font-weight:700; color:rgba(226,238,255,.6); }
.le-ex ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.le-ex li{ font-size:.88rem; line-height:1.55; color:#fff; padding:6px 10px; border-radius:10px; background:rgba(10,21,53,.55); border:1px dashed rgba(255,255,255,.22); }
.le-ex-out li{ color:#0a1535; font-weight:700; background:linear-gradient(135deg,#ffe9b0,#F3C86A); border:0; }
.le-ex-arrow{ align-self:center; color:#F3C86A; }
.le-ex-arrow svg{ width:24px; height:24px; display:block; }
.le-ex-dots{ display:none; }
/* Below a laptop: the four cards in a row to swipe, one in view with the
   next peeking, and dots to say how many there are. */
@media (max-width:900px){
  .le-ex-grid{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none;
    margin-inline:-22px; padding:4px 22px 10px; scroll-padding-inline:22px; }
  .le-ex-grid::-webkit-scrollbar{ display:none; }
  .le-ex{ flex:0 0 min(86%, 440px); scroll-snap-align:start; }
  .le-ex-dots{ display:flex; justify-content:center; gap:7px; margin-top:10px; }
  .le-ex-dots i{ width:7px; height:7px; border-radius:99px; background:rgba(255,255,255,.18); transition:width .3s, background .3s; }
  .le-ex-dots i.on{ width:22px; background:var(--gold); }
}
@media (max-width:480px){
  .le-ex{ grid-template-columns:1fr; }
  .le-ex-arrow svg{ transform:rotate(-90deg); margin:0 auto; }
}
.le-invest{ margin-top:clamp(32px,5vw,52px); text-align:center; }
.le-invest p{ margin:0 0 16px; font-family:var(--font-head); font-weight:800; font-size:clamp(1.3rem,4vw,1.9rem); line-height:1.5; color:#fff; }
.le-invest .btn{ max-width:100%; }
/* The section's own page, for the reader who wants the whole story. */
/* The way to the department's own page: a real button in gold, not an
   underlined line (owner, 2 October: "give it its due"). */
.le-more-link{
  display:flex; align-items:center; justify-content:center; gap:12px; width:max-content; max-width:100%;
  margin:clamp(22px,3vw,30px) auto 0; padding:13px 28px; min-height:52px; border-radius:99px;
  border:1.5px solid rgba(243,200,106,.62); color:#F3C86A; text-decoration:none;
  font-family:var(--font-head); font-weight:800; font-size:clamp(1rem,2.6vw,1.12rem); line-height:1.4;
  background:linear-gradient(135deg, rgba(243,200,106,.16), rgba(243,200,106,.04));
  box-shadow:0 12px 34px -16px rgba(243,200,106,.55), inset 0 1px 0 rgba(255,255,255,.06);
  transition:background .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease;
}
.le-more-link svg{ width:20px; height:20px; flex:none; transition:transform .25s ease; }
.le-more-link:hover{ background:linear-gradient(135deg,#F3C86A,#C99A36); color:#1B1405; transform:translateY(-2px); box-shadow:0 16px 38px -14px rgba(243,200,106,.75); }
.le-more-link:hover svg{ transform:translateX(-4px); }
@media (prefers-reduced-motion:reduce){ .le-more-link, .le-more-link svg{ transition:none; } .le-more-link:hover, .le-more-link:hover svg{ transform:none; } }

/* ── 2. The box and the packages ───────────────────────────────────
   .pk-live (set by home.js): the stage pins while the section scrolls by.
   The page stops at the shut box; the next swipe opens the lid slowly (its
   own timing); then the cards rise out one after another with the scroll,
   into a stack, each showing its name above the next. Going back up the
   cards go in and the lid closes slowly. See initPackages in home.js.
   Without .pk-live (no JavaScript, or less motion asked for): a plain list. */
.pk-band{ padding:clamp(56px,8vw,96px) 0 clamp(40px,6vw,72px); position:relative; }
.pk-band .home-head{ margin-bottom:clamp(18px,3vw,28px); }
.pk-stack{ list-style:none; margin:0 auto; padding:0 16px; max-width:520px; display:grid; gap:16px; }
.pk-item{ margin:0; }
.pkx-glow, .pkx-back, .pkx-lidwrap, .pkx-floor, .pkx-front, .pk-hint{ display:none; }

/* home.js sets --cw (card width), --bw (box width) and --by (the top of
   the box's front) once per layout, and then, as the page scrolls, only
   the transform and opacity of the parts that move: the cards, the lid,
   the light. Those the graphics chip moves on its own, so nothing is laid
   out or painted again while scrolling. svh: the height a phone keeps
   when its address bar comes and goes, so the stage does not jump. */
.pk-live .pk-scroll{ height:calc(100vh + 160vh); height:calc(100svh + 160svh); position:relative; }
.pk-live .pk-stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
/* Held at the box (home.js): fixed exactly where it is pinned, so nothing
   the scroll does meanwhile can move it. */
.pk-live .pk-stage.pk-held{ position:fixed; top:0; left:0; right:0; z-index:1; }
.pk-live .pk-stack{ position:absolute; inset:0; max-width:none; padding:0; display:block; }
.pk-live .pk-item{ position:absolute; left:calc(50% - var(--cw, 360px) / 2); top:0; width:var(--cw, 360px);
  transform-origin:50% 0; opacity:0; z-index:calc(4 + var(--i)); will-change:transform, opacity; }
.pk-live .pkx-glow, .pk-live .pkx-back, .pk-live .pkx-lidwrap, .pk-live .pkx-floor, .pk-live .pkx-front{ display:block; position:absolute; }
.pkx-back svg, .pkx-front svg, .pkx-lid-out svg, .pkx-lid-in svg{ display:block; width:100%; height:100%; }
.pk-live .pkx-front{ left:calc(50% - var(--bw, 300px) / 2); top:var(--by, 60vh); width:var(--bw, 300px); height:calc(var(--bw, 300px) * .5); z-index:20; }
.pk-live .pkx-floor{ left:calc(50% - var(--bw, 300px) * .66); width:calc(var(--bw, 300px) * 1.32); top:calc(var(--by, 60vh) + var(--bw, 300px) * .43); height:calc(var(--bw, 300px) * .14);
  background:radial-gradient(closest-side, rgba(0,0,0,.7), rgba(0,0,0,0)); z-index:19; }
/* The inside of the box, seen from a little above, behind the cards. */
.pk-live .pkx-back{ left:calc(50% - var(--bw, 300px) / 2); top:calc(var(--by, 60vh) - var(--bw, 300px) * .14); width:var(--bw, 300px); height:calc(var(--bw, 300px) * .15); z-index:1; }
/* The light from inside the box: drawn once, then only faded in. */
.pk-live .pkx-glow{ left:calc(50% - var(--bw, 300px) * .8); width:calc(var(--bw, 300px) * 1.6); top:calc(var(--by, 60vh) - var(--bw, 300px) * 1.1); height:calc(var(--bw, 300px) * 1.12);
  z-index:3; opacity:0; transform-origin:50% 100%; will-change:transform, opacity; pointer-events:none;
  background:
    radial-gradient(ellipse 34% 26% at 50% 100%, rgba(255,236,180,.75), rgba(255,236,180,0)),
    radial-gradient(ellipse 50% 72% at 50% 100%, rgba(243,200,106,.32), rgba(243,200,106,0) 70%),
    repeating-conic-gradient(from -90deg at 50% 100%, rgba(255,226,150,.11) 0deg 3deg, rgba(255,226,150,0) 3deg 11deg);
  -webkit-mask-image:radial-gradient(ellipse 50% 100% at 50% 100%, #000 30%, transparent 75%); mask-image:radial-gradient(ellipse 50% 100% at 50% 100%, #000 30%, transparent 75%); }
/* The lid swings back on its hinge, the back edge of its top, and stands
   open behind the box, showing its lining. Hinge: --bw * .22 down from the
   top of the lid's drawing (the bow rises above it). */
.pk-live .pkx-lidwrap{ left:calc(50% - var(--bw, 300px) * .52); width:calc(var(--bw, 300px) * 1.04); top:calc(var(--by, 60vh) - var(--bw, 300px) * .36); height:calc(var(--bw, 300px) * .48);
  z-index:21; perspective:1100px; perspective-origin:50% calc(var(--bw, 300px) * .22); pointer-events:none; }
.pk-live .pkx-lidwrap.pkx-under{ z-index:2; }
.pkx-lid{ position:absolute; inset:0; transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
  transform-origin:50% calc(var(--bw, 300px) * .22); will-change:transform; }
.pkx-lid-out, .pkx-lid-in{ position:absolute; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.pkx-lid-out{ inset:0; }
.pkx-lid-in{ left:0; right:0; top:calc(var(--bw, 300px) * .22); height:calc(var(--bw, 300px) * .26); transform:rotateX(180deg);
  display:flex; align-items:center; justify-content:center; border-radius:8px;
  background:radial-gradient(ellipse 70% 90% at 50% 40%, #1d3a82 0%, #0c1a45 70%, #070f2b 100%);
  box-shadow:inset 0 0 0 2px #d9a948, inset 0 0 0 6px #0a1535, inset 0 0 0 7px rgba(243,200,106,.45), inset 0 -14px 22px rgba(0,0,0,.45); }
.pkx-lid-in svg{ width:auto; height:56%; }
.pk-live .pk-hint{ display:inline-flex; position:absolute; left:0; right:0; margin:0 auto; width:max-content; top:calc(var(--by, 60vh) - var(--bw, 300px) * .36 - 40px);
  z-index:22; align-items:center; gap:8px; font-size:.88rem; color:var(--muted); white-space:nowrap; will-change:opacity; }
.pk-hint svg{ width:16px; height:16px; animation:pkNudge 1.8s ease-in-out infinite; }
@keyframes pkNudge{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
.pk-hint .ph-mouse, .pk-hint .ph-touch{ display:inline-flex; align-items:center; gap:8px; }
.pk-hint .ph-touch{ display:none; }
.pk-hint .ph-touch svg{ animation-name:pkNudgeUp; }
@keyframes pkNudgeUp{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
/* A touch screen with no mouse: the finger moves up. */
@media (hover:none) and (pointer:coarse){
  .pk-hint .ph-mouse{ display:none; }
  .pk-hint .ph-touch{ display:inline-flex; }
}

/* A membership card: metal, an embossed wave, the chip, the name large at
   the top (it stays readable when the next card covers the rest). */
.pk-card{
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  aspect-ratio:1.6 / 1; width:100%;
  border-radius:20px; padding:clamp(14px,3.2vw,22px) clamp(16px,3.4vw,24px); color:var(--pk-ink); text-decoration:none;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 46%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, rgba(0,0,0,.035) 2px 4px),
    var(--pk-bg);
  border:1px solid var(--pk-edge);
  box-shadow:0 -6px 18px rgba(0,0,0,.3), 0 16px 30px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.07) inset;
}
.pk-waves{ position:absolute; inset:0; width:100%; height:100%; color:var(--pk-ink); opacity:.16; pointer-events:none; }
.pk-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; z-index:1; }
.pk-title{ display:flex; align-items:baseline; gap:10px; min-width:0; }
.pk-name{ font-family:var(--font-head); font-size:clamp(1.5rem,6.4vw,2.3rem); font-weight:800; line-height:1.1;
  text-shadow:0 1px 0 rgba(255,255,255,.25), 0 2px 10px rgba(0,0,0,.25); }
.pk-tier{ font-family:'IBM Plex Mono', monospace; font-size:clamp(.6rem,1.8vw,.72rem); letter-spacing:.32em; opacity:.75; direction:ltr; }
.pk-chip{ width:clamp(36px,8vw,44px); height:auto; flex:0 0 auto; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.pk-tag{ position:relative; z-index:1; margin-top:6px; font-size:clamp(.8rem,2.4vw,.95rem); opacity:.92; }
.pk-foot{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.pk-dur{ font-size:clamp(.7rem,2.1vw,.82rem); font-weight:700; padding:5px 11px; border-radius:99px;
  background:var(--pk-pill); border:1px solid rgba(255,255,255,.22); }
.pk-more{ font-size:clamp(.76rem,2.2vw,.88rem); font-weight:800; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
.pk-more svg{ width:16px; height:16px; }
.pk-brand{ position:absolute; bottom:clamp(44px,9vw,56px); left:clamp(16px,3.4vw,24px); z-index:1;
  font-family:'IBM Plex Mono', monospace; font-size:clamp(.52rem,1.5vw,.62rem); letter-spacing:.3em; opacity:.6; direction:ltr; }
.pk-bronze { --pk-bg:linear-gradient(135deg,#3a1a08 0%,#8a4a1e 40%,#d9a06a 72%,#7a3e16 100%); --pk-edge:#e8b07a; --pk-ink:#fff6ec; --pk-pill:rgba(0,0,0,.28); }
.pk-silver { --pk-bg:linear-gradient(135deg,#8d97a6 0%,#e9eef5 38%,#b4bdca 66%,#f4f7fb 100%); --pk-edge:#f2f6fb; --pk-ink:#1a2333; --pk-pill:rgba(255,255,255,.45); }
.pk-gold   { --pk-bg:linear-gradient(135deg,#a8771e 0%,#f6d27e 36%,#e0ad45 64%,#fff0bd 100%); --pk-edge:#ffe6a3; --pk-ink:#2a1c02; --pk-pill:rgba(255,255,255,.4); }
.pk-diamond{ --pk-bg:linear-gradient(135deg,#02233a 0%,#0d5f86 38%,#7fe3f7 72%,#0a4b6c 100%); --pk-edge:#a8f0ff; --pk-ink:#f2fdff; --pk-pill:rgba(0,0,0,.28); }
.pk-group  { --pk-bg:linear-gradient(135deg,#032515 0%,#0d6a36 40%,#3fd18b 72%,#08502a 100%); --pk-edge:#62e7a6; --pk-ink:#f2fff8; --pk-pill:rgba(0,0,0,.28); }
.pk-narrow .pk-brand{ display:none; }
.pk-narrow .pk-dur{ font-size:.66rem; padding:4px 10px; border-radius:14px; }
.pk-cta-wrap{ text-align:center; margin-top:clamp(20px,3vw,32px); }
.pk-cta{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 26px; max-width:100%; text-align:center;
  border-radius:999px; font-weight:800; font-size:1rem;
  color:#0a1535; background:linear-gradient(135deg,#ffe39a,var(--gold)); box-shadow:0 0 28px rgba(243,200,106,.45), 0 14px 34px rgba(0,0,0,.4);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.pk-cta:hover{ transform:translateY(-3px); box-shadow:0 0 40px rgba(243,200,106,.7), 0 18px 40px rgba(0,0,0,.45); }
.pk-cta svg{ width:18px; height:18px; }

/* ── 3. Reviews ────────────────────────────────────────────────────
   White cards on navy, the student's own words, their name and flag. On a
   phone one card at a time with its neighbours peeking; on a computer
   three across. */
.rv-band{ padding:clamp(48px,7vw,88px) 0; background:linear-gradient(180deg, rgba(19,48,107,.0), rgba(19,48,107,.35) 30%, rgba(19,48,107,.35) 70%, rgba(19,48,107,0)); }
.rv-band[hidden]{ display:none; }
.rv-track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  padding:6px max(16px, calc((100vw - var(--max)) / 2 + 16px)) 18px;
  scroll-padding-inline:max(16px, calc((100vw - var(--max)) / 2 + 16px)); scrollbar-width:none; }
.rv-track::-webkit-scrollbar{ display:none; }
.rv-card{ flex:0 0 min(82vw, 360px); scroll-snap-align:start; border-radius:28px; padding:26px 24px 22px; background:#fff; color:#13213f;
  display:flex; flex-direction:column; gap:14px; box-shadow:0 20px 44px rgba(0,0,0,.4); }
@media (min-width:900px){ .rv-card{ flex-basis:calc((min(100vw, var(--max)) - 32px - 32px) / 3); } }
.rv-q{ width:38px; height:28px; color:var(--gold); }
.rv-stars{ color:#f5b800; letter-spacing:3px; font-size:1.1rem; }
.rv-text{ font-size:1rem; line-height:1.95; color:#24314f; flex:1; }
.rv-who{ display:flex; align-items:center; gap:10px; padding-top:14px; border-top:1px solid #e6ebf3; }
.rv-flag{ width:34px; height:auto; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.25); flex:0 0 auto; }
.rv-name{ font-weight:800; font-size:1.02rem; color:#0a1535; line-height:1.3; }
.rv-meta{ font-size:.82rem; color:#66718a; }
.rv-sample{ display:block; text-align:center; margin-top:10px; font-size:.8rem; color:#ffb4b4; }
.rv-dots{ display:flex; justify-content:center; gap:7px; }
/* No dots when the whole row fits (home.js, stopDots). */
.rv-dots[hidden], .why-dots[hidden], .le-ex-dots[hidden]{ display:none !important; }
.rv-dots i{ width:7px; height:7px; border-radius:99px; background:rgba(255,255,255,.22); transition:width .3s var(--ease), background .3s; }
.rv-dots i.on{ width:22px; background:#fff; }

/* ── 4. "Start now": a sky-blue card before the footer ───────────────
   A wide rectangle inside the page width: one line, one button, soft
   lighter shapes, and room for a cut-out photo beside the words. */
.inv-band{ padding:clamp(32px,5vw,56px) 0 clamp(48px,7vw,80px); }
.inv-card{ position:relative; overflow:hidden; isolation:isolate; max-width:980px; margin:0 auto;
  border-radius:24px; color:#0a1535;
  display:grid; grid-template-columns:1fr; align-items:end;
  background:linear-gradient(120deg, #8fdcff 0%, #43b6f4 48%, #2a8fe0 100%);
  box-shadow:0 24px 54px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.18) inset; }
.inv-shapes{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; }
.inv-text{ text-align:center; padding:clamp(28px,4vw,44px) clamp(20px,4vw,48px); align-self:center; }
.inv-text h2{ font-family:var(--font-head); font-size:clamp(1.35rem,4.2vw,2.15rem); font-weight:800; line-height:1.35; color:#0a1535; max-width:22ch; margin:0 auto 8px; }
.inv-text p{ font-size:clamp(.9rem,2.1vw,1.02rem); color:rgba(10,21,53,.8); margin:0 auto 18px; }
.inv-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:180px; padding:13px 30px; border-radius:999px;
  font-weight:800; font-size:1rem; color:#fff; background:#0a1535; box-shadow:0 12px 26px rgba(10,21,53,.35);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.inv-btn:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(10,21,53,.45); }
.inv-pic{ display:none; }
.inv-card.has-pic{ grid-template-columns:1.2fr .8fr; }
.inv-card.has-pic .inv-pic{ display:block; align-self:end; }
.inv-pic img{ display:block; width:100%; max-width:340px; height:auto; margin-inline:auto; }
/* A phone keeps the rectangle: words on one side, the photo beside them,
   both smaller, rather than the photo stacked underneath. */
@media (max-width:640px){
  .inv-card.has-pic{ grid-template-columns:1.25fr 1fr; }
  .inv-card.has-pic .inv-text{ padding:22px 14px 22px 4px; text-align:right; }
  .inv-card.has-pic .inv-text h2{ font-size:clamp(1.05rem,4.6vw,1.3rem); margin:0 0 6px; }
  .inv-card.has-pic .inv-text p{ font-size:.8rem; margin:0 0 12px; }
  .inv-card.has-pic .inv-btn{ min-width:0; padding:10px 20px; font-size:.9rem; }
  .inv-pic img{ max-width:100%; }
}

/* ── 5. Home footer ───────────────────────────────────────────────── */
.home-foot{ direction:ltr; text-align:left; border-top:0; background:linear-gradient(180deg, #0b1838 0%, #070f26 100%); }
.hf-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr .95fr 1.25fr; gap:clamp(24px,3.4vw,44px);
  padding-bottom:clamp(28px,4vw,40px); margin-bottom:clamp(22px,3vw,30px); border-bottom:1px solid rgba(128,174,255,.12); }
.hf-name{ font-family:var(--font-head); font-size:1.35rem; font-weight:800; color:#fff; }
.hf-brand p{ margin:8px 0 16px; font-size:.9rem; color:var(--muted); line-height:1.8; max-width:30ch; }
.hf-phone{ display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:1rem; color:var(--gold); letter-spacing:.04em; direction:ltr; }
/* Under the number: WhatsApp, Instagram, Facebook, each with its logo in
   the brand's own colour. */
.hf-social{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; }
.hf-so{ display:inline-flex; align-items:center; gap:10px; font-size:.92rem; font-weight:700; color:rgba(234,240,248,.9); }
.hf-so:hover{ color:#fff; }
.hf-so-ico{ width:32px; height:32px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; color:#fff; transition:transform .2s var(--ease); }
.hf-so:hover .hf-so-ico{ transform:scale(1.08); }
.hf-so-ico svg{ width:17px; height:17px; }
.hf-so-wa .hf-so-ico{ background:#25D366; }
.hf-so-ig .hf-so-ico{ background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.hf-so-fb .hf-so-ico{ background:#0866FF; }
.hf-col h4{ font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; position:relative; padding-bottom:10px; }
.hf-col h4::after{ content:""; position:absolute; bottom:0; left:0; width:28px; height:2px; border-radius:2px; background:var(--gold); opacity:.7; }
.hf-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.hf-langs{ grid-template-columns:1fr 1fr; column-gap:16px; }
.hf-col li, .hf-col a{ font-size:.92rem; color:rgba(234,240,248,.82); }
.hf-col a:hover{ color:var(--gold); }
.hf-more{ color:var(--gold) !important; font-style:italic; grid-column:1 / -1; }
.hf-mail dt{ font-size:.72rem; color:var(--muted); margin-top:10px; }
.hf-mail dt:first-child{ margin-top:0; }
.hf-mail dd{ margin:2px 0 0; }
.hf-mail a{ font-size:.88rem; color:var(--text); word-break:break-all; }
.hf-bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 18px; font-size:.8rem; color:rgba(255,255,255,.6); }
.hf-bottom a{ color:inherit; border-bottom:1px solid rgba(255,255,255,.18); }
.hf-bottom a:hover{ color:#fff; }
.hf-legal{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
/* LinkedIn is the group's formal page: small, on its own in the bottom line. */
/* The mark is exactly the height of the capital L beside it and stands on
   the same baseline: Tajawal's capitals are 0.6406 of the font size, and
   an inline image aligned to the baseline puts its foot on it. */
.hf-bottom a.hf-li{ display:inline-block; border-bottom:0; font-size:.76rem; line-height:1; white-space:nowrap; color:rgba(255,255,255,.55); }
.hf-bottom a.hf-li:hover{ color:#fff; }
.hf-li svg{ display:inline-block; width:.6406em; height:.6406em; vertical-align:baseline; margin-inline-end:.45em; color:#4a90d9; }
/* A tablet: the brand across the top, its words on one side and the
   number with the three links on the other; the four lists below it. */
@media (max-width:1100px){
  .hf-grid{ grid-template-columns:.9fr 1fr .9fr 1.3fr; }
  .hf-brand{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:clamp(24px,6vw,64px); align-items:start; }
  .hf-brand p{ margin-bottom:0; max-width:46ch; }
}
@media (max-width:820px){ .hf-grid{ grid-template-columns:1fr 1fr; } }
/* A phone: brand, then the languages across three columns, the academy's
   pages across two, and the addresses - each full width, so nothing is
   squeezed into half a screen. */
@media (max-width:560px){
  .hf-grid{ grid-template-columns:1fr; row-gap:26px; }
  .hf-brand{ display:block; text-align:center; } .hf-brand p{ margin:8px auto 16px; }
  .hf-social{ justify-content:center; grid-template-columns:repeat(2, max-content); gap:12px 22px; text-align:start; }
  .hf-langs{ grid-template-columns:repeat(3, 1fr); }
  .hf-pages{ grid-template-columns:1fr 1fr; column-gap:16px; }
  .hf-bottom{ justify-content:center; text-align:center; }
  .hf-legal{ justify-content:center; }
}

/* ── The first screen (owner, 2 October) ──────────────────────────────
   Little on it: the logo (the original file, untouched - only the empty
   transparent square around it is left out of the frame), the promise in
   two short lines, gold over white, and one way on: "تعرّف على المنصة",
   which takes the page down to what follows, here. Nothing else, so the
   film is seen. */
.vh-logo{ width:min(clamp(150px,22vh,210px), 52%); height:auto; aspect-ratio:1313/540; object-fit:cover; object-position:50% 47%;
  filter:none; margin-bottom:clamp(10px,2vh,18px); }
.vh-inner{ max-width:900px; padding:clamp(84px,12vh,104px) 20px clamp(110px,15vh,140px); }
.vh-inner .site-greeting{ color:rgba(255,255,255,.72); }
.vh-head{ margin:0; line-height:1.2; color:#fff; text-shadow:none; }
.vh-head .l1{ display:block; font-size:clamp(2.1rem,min(8.6vw,7.4vh),4.2rem); font-weight:800; line-height:1.15;
  background:linear-gradient(180deg,#FFE4A3 0%,#F3C86A 45%,#C99A36 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 22px rgba(243,200,106,.25)); }
.vh-head .l2{ display:block; margin-top:clamp(6px,1.2vw,10px); font-size:clamp(1.15rem,min(4.4vw,3.8vh),2rem); font-weight:800; color:#fff; text-shadow:0 2px 22px rgba(0,0,0,.6); }
/* The one way on: a gold-edged pill with a chevron that gently sinks. */
.vh-scroll{ bottom:clamp(22px,4vh,40px); padding:11px 22px 9px; gap:2px; color:#F3C86A; text-decoration:none;
  display:flex; flex-direction:column; align-items:center; border-radius:999px; border:1.5px solid rgba(243,200,106,.55);
  background:rgba(5,7,14,.35); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 8px 26px -10px rgba(243,200,106,.5);
  font-weight:800; font-size:.98rem; white-space:nowrap; transition:background .25s ease, color .25s ease, border-color .25s ease; }
.vh-scroll .vh-chev{ width:20px; height:20px; opacity:1; animation:vhSink 2.2s cubic-bezier(.45,0,.35,1) infinite; }
@keyframes vhSink{ 0%,100%{ transform:translateY(-2px); } 50%{ transform:translateY(3px); } }
.vh-scroll:hover{ background:#F3C86A; color:#1B1405; border-color:#F3C86A; }
.vh-scroll:focus-visible{ outline:2px solid #F3C86A; outline-offset:4px; }
@media (max-width:600px){ .vh-logo{ width:min(170px, 50%); } }
/* A laptop: the bar above sits in the page, so the first screen is what is
   left under it - with the way on inside it, not below the fold. */
@media (min-width:1025px){ .video-hero{ min-height:calc(100svh - 75px); } }
@media (prefers-reduced-motion:reduce){ .vh-scroll .vh-chev{ animation:none; } .vh-scroll{ transition:none; } }

/* ── 6. A teacher's word: the film right under the first screen ──────
   Owner, 8 October: the teacher's film goes directly below the hero and
   everything else moves down, "premium, professional work".

   The film is upright - 720x1280, shot for a phone - so it is framed as a
   phone: a tall card with a gold rim and a soft aura behind it, the words
   beside it on a wide screen and above and below it on a narrow one. A
   16:9 box would have given two black bars and a teacher the size of a
   stamp.

   Nothing here starts until it is asked for: no autoplay, no preload, and
   the pulse around the button stops for anyone who asked for less motion.
   .tv-play[hidden] is spelled out because the rule below sets display on
   the same element, and an author rule beats the browser's own [hidden] -
   without it the button would keep sitting over the film while it played.
   ───────────────────────────────────────────────────────────────────── */
/* Two things about this one line.

   overflow:hidden - the aura behind the frame reaches past the stage on
   purpose, and between 900 and about 1240 px the page has no side margin
   left to spend, so the glow was pushing the whole document 23-33 px wide.
   The band clips it.

   And the head of the band is deliberately deep: the first screen's button
   brings the page here with the section's top edge exactly at the top of the
   window, and something is always fixed in that corner - the hamburger below
   920px (18px down, 48px tall), the sticky bar above it (75px). 84px clears
   both, so the gold title never lands behind either. */
.tv-band{ position:relative; overflow:hidden; padding:clamp(84px,8vw,132px) 0 clamp(36px,5vw,64px); }

/* The film comes first in the markup so a phone gets it before the words
   under it; on a wide screen the areas put the words back on the reading
   side, beside it. There is no title row any more - the section has no
   heading at all (owner, 9 October: nothing written above the film). */
.tv-grid{ display:grid; gap:clamp(22px,3.4vw,40px); grid-template-columns:1fr;
  grid-template-areas:"stage" "rest"; justify-items:center; }
@media (min-width:900px){
  .tv-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"rest stage";
    align-items:center; justify-items:stretch;
    column-gap:clamp(32px,5vw,72px); }
}
.tv-stage{ grid-area:stage; }
.tv-rest{ grid-area:rest; }

/* ── The frame ─────────────────────────────────────────────────────── */
.tv-stage{ position:relative; margin:0; }
.tv-stage::before{
  content:''; position:absolute; z-index:0; inset:-6% -12% -10%;
  background:
    radial-gradient(58% 46% at 50% 38%, rgba(70,216,255,.20), transparent 70%),
    radial-gradient(46% 38% at 58% 78%, rgba(243,200,106,.16), transparent 72%);
  filter:blur(26px); pointer-events:none;
}
.tv-frame{
  position:relative; z-index:1; overflow:hidden; isolation:isolate;
  width:clamp(240px,26vw,320px); aspect-ratio:9/16; margin-inline:auto;
  border-radius:clamp(22px,2.6vw,32px); background:#060b18;
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(243,200,106,.30), 0 0 0 7px rgba(255,255,255,.035);
}
@media (max-width:899px){ .tv-frame{ width:min(320px,78vw); } }
.tv-video{ display:block; width:100%; height:100%; object-fit:cover; background:#060b18; }

/* The button over the still. It covers the whole frame so the obvious
   gesture - pressing the picture - is the one that works, but it draws
   nothing except the mark (owner, 9 October: nothing written over the
   film). What is left of the old scrim is a soft pool of shade behind the
   mark, enough for gold to read on any frame and light enough that his
   face is not dimmed. */
.tv-play{
  position:absolute; inset:0; z-index:2; width:100%; border:0; cursor:pointer;
  display:grid; place-content:center; padding:0; color:#fff;
  background:radial-gradient(44% 26% at 50% 50%, rgba(4,8,20,.44), rgba(4,8,20,.17) 58%, rgba(4,8,20,.05) 100%);
  transition:opacity .3s var(--ease);
}
.tv-play[hidden]{ display:none; }
.tv-play:focus-visible{ outline:3px solid var(--gold); outline-offset:-5px; }
.tv-ring{
  position:relative; width:clamp(62px,15vw,76px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; color:#1B1405;
  background:linear-gradient(145deg,#FFE4A3 0%,#F3C86A 52%,#D9A741 100%);
  box-shadow:0 14px 34px rgba(243,200,106,.38);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* The triangle points the way playback runs, so it is nudged along that
   axis rather than along the page's direction: translateX is the screen's
   x, which is what "optically centred" means for a shape like this. */
.tv-ring svg{ width:34%; height:34%; transform:translateX(9%); }
.tv-ring::after{
  content:''; position:absolute; inset:-3px; border-radius:50%;
  border:2px solid rgba(243,200,106,.55);
  animation:tvPulse 2.6s cubic-bezier(.2,.6,.3,1) infinite;
}
.tv-play:hover .tv-ring{ transform:scale(1.07); box-shadow:0 18px 42px rgba(243,200,106,.5); }
@keyframes tvPulse{ 0%{ transform:scale(1); opacity:.75; } 70%{ transform:scale(1.5); opacity:0; } 100%{ transform:scale(1.5); opacity:0; } }

/* While the film is being fetched, the ring turns. A wait then reads as a
   wait instead of as a button that did nothing, and nothing new is drawn
   over the film to say so: this is the mark that was already there (owner,
   9 October: nothing written over it). */
.tv-play.is-loading{ cursor:progress; }
.tv-play.is-loading .tv-ring::after{
  inset:-6px; border-width:3px;
  border-color:rgba(243,200,106,.92) transparent transparent rgba(243,200,106,.92);
  animation:tvSpin .85s linear infinite;
}
@keyframes tvSpin{ to{ transform:rotate(360deg); } }
/* The name under the frame, not over it: it stays readable while the film
   runs, and nothing covers his face. */
.tv-plate{ position:relative; z-index:1; margin:clamp(14px,2vw,18px) 0 0; text-align:center; }
.tv-plate strong{ display:block; font-family:var(--font-head); font-size:clamp(1rem,2.6vw,1.12rem); font-weight:800; color:#fff; }
.tv-plate span{ display:block; margin-top:4px; font-size:.86rem; color:var(--muted); }

/* ── His own sentence, and the one button ──────────────────────────── */
.tv-rest{ display:grid; justify-items:center; gap:clamp(18px,2.6vw,26px); max-width:46ch; }
@media (min-width:900px){ .tv-rest{ justify-items:start; } }
.tv-quote{
  margin:0; padding-inline-start:clamp(14px,2vw,18px); border-inline-start:3px solid var(--gold);
  color:#dbe6f7; font-size:clamp(1rem,2.6vw,1.1rem); line-height:1.95; text-align:start;
}
.tv-quote cite{ display:block; margin-top:10px; font-style:normal; font-size:.82rem; color:var(--muted); }
.tv-cta{ align-self:start; }

@media (prefers-reduced-motion:reduce){
  .tv-ring::after{ animation:none; }
  .tv-play, .tv-ring{ transition:none; }
  /* No spin for somebody who asked for no movement, but the wait still has
     to show: the mark dims instead. */
  .tv-play.is-loading .tv-ring::after{ animation:none; }
  .tv-play.is-loading .tv-ring{ opacity:.5; }
}

/* ── عروض الشتاء ────────────────────────────────────────────────────
   The seasonal band under the teacher's film. The artwork carries no
   words at all: everything readable here is real text on top of it, so
   the offer is in the page rather than inside a picture.

   display:none until assets/home.js turns it on, and only before the end
   date. If the script never runs the band stays hidden, which is the
   right way round: an offer that has ended is a promise the academy is
   not keeping. */
.wo-band{ display:none; }
/* padding:0 on purpose. Every section on this page gets 72px top and
   bottom from the stylesheet, which is right for a band of words and wrong
   for a band that IS a photograph: it left the picture floating in a strip
   of navy instead of touching the edges. The band sets its own breathing
   room on the inside instead. */
.wo-band.wo-on{ display:block; position:relative; isolation:isolate; overflow:hidden; padding:0; }

.wo-pic{
  display:block; width:100%; height:100%; object-fit:cover;
  /* The people are on the RIGHT of the frame and the calm space on the
     left. object-position keeps them in shot as the band gets shorter. */
  object-position:72% 42%;
}

/* The words are ON the picture at every width (owner, 10 October: «خلي
   الكلام عالصورة بسطح المكتب والهاتف وكأنه مرسوم عليها»). The picture
   fills the band and never stops half way, and what makes the words
   readable is a wash that FADES - no panel, no edge, nothing that looks
   like a box laid on a photograph. Where the wash sits is the only
   difference between a wide screen and a phone: on the left on one, along
   the bottom on the other, because that is where the artwork is calm in
   each crop. */
.wo-veil{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.wo-inner{ position:absolute; inset:0; z-index:2; display:flex; }
.wo-pic{ position:absolute; inset:0; }

/* The card's width is its OWN, not its content's (owner, 11 October: on a
   real phone «الكلام طالع بالمنتصف، لازم على اليسار»).
   It used to be a flex item with only a max-width, so its width was
   whatever the longest line needed - and the longest line is only as long
   as the font makes it. The test browser here has no Tajawal and falls
   back to a narrower face, so the card measured narrow and sat left; on a
   real phone, with Tajawal, every line is wider, the card grew to its cap
   and drifted into the middle of the picture, over the faces. A width it
   declares for itself cannot do that, whatever font arrives. */
.wo-card{ flex:0 0 auto; }

/* Every piece of text carries its own shadow. The wash alone would have
   to be heavy enough for the brightest pixel behind the words - the snow
   - and heavy is the panel we are trying not to draw. A shadow under the
   letters holds the contrast where it is actually needed, letter by
   letter, and leaves the photograph visible between them. */
.wo-card{ text-shadow:0 2px 10px rgba(3,7,18,.78), 0 1px 3px rgba(3,7,18,.9); }

/* A phone gets the SAME picture in the SAME shape, only smaller (owner,
   10 October: «ليش هيك جاي بالطول عالهاتف؟ خليها طبيعية بالعرض كيف آخر
   وحدة يلي عليها ابدأ الآن»). A tall poster was out of character for this
   page: every other band on it, «ابدأ الآن» included, is a wide strip. So
   the band stays landscape, the artwork is shown whole - at 16:10 over a
   16:9 picture `cover` scales by WIDTH, so the full width and all four of
   them are in shot - and the words sit on its calm left exactly as they do
   on a desktop. Only the sizes change. */

/* The only line here with a backing of its own, and it needs one: it is
   the smallest text on the band (so it answers to 4.5:1, not 3:1), it
   sits at the TOP of the card where the wash is lightest, and on a phone
   that is straight over the snow. A dark pill behind it holds the
   contrast wherever the picture happens to be bright, and a gold rim
   keeps it looking like a label rather than a patch. */
.wo-kicker{
  display:inline-block; font-size:.78rem; font-weight:800; letter-spacing:.14em;
  color:var(--gold); border:1px solid rgba(243,200,106,.5); border-radius:100px;
  padding:6px 16px; background:rgba(4,8,20,.62);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.wo-title{
  margin:clamp(12px,1.6vw,18px) 0 0; font-family:var(--font-head);
  font-size:clamp(2.1rem,6.4vw,3.6rem); font-weight:800; line-height:1.1; color:#fff;
  text-shadow:0 2px 24px rgba(4,8,20,.65);
}
.wo-off{ margin:clamp(8px,1.2vw,14px) 0 0; }
/* The one line that must NOT take the card's text-shadow. Its letters are
   filled with a gradient through `background-clip:text`, which makes the
   glyphs themselves transparent - and a text-shadow is painted behind the
   glyph, so it shows straight THROUGH the letters and silts the colour up.
   A drop-shadow filter is applied to what the element actually draws, so
   it follows the shape of the letters the way a shadow should. */
.wo-off strong{
  font-size:clamp(1.45rem,4.6vw,2.3rem); font-weight:800; line-height:1.2;
  background:linear-gradient(100deg,#EAF6FF 0%,var(--blue) 48%,var(--gold) 112%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:none; filter:drop-shadow(0 2px 7px rgba(3,7,18,.9)) drop-shadow(0 1px 2px rgba(3,7,18,.75));
}
.wo-sub{ margin:8px 0 0; color:#cfdcf2; font-size:clamp(.96rem,2.7vw,1.1rem); }

.wo-go{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(18px,2.4vw,26px); }
/* White lettering (owner, 10 October: «مش لائق يكون الخط بلون أسود، حاول
   خليه أبيض بشرط يبين واضح»). White on the gold this pill used to be is
   1.8:1 - unreadable - so the pill itself goes deep blue, which is where
   white belongs, and the gold stays as the rim and the glow that make it
   the brightest thing on the band. Measured against its own fill, not
   guessed: tools/sim reads the gradient's stops and holds the lightest of
   them to 4.5:1. */
.wo-cta{
  display:inline-grid; place-items:center; min-height:52px; padding:0 clamp(20px,2.6vw,30px);
  border-radius:100px; text-decoration:none; font-weight:800;
  font-size:clamp(.95rem,2.7vw,1.06rem);
  background:linear-gradient(145deg,#1E55D6,#1340A8 58%,#0C2E7C);
  color:#FFFFFF; border:1.5px solid rgba(243,200,106,.85);
  box-shadow:0 14px 34px -10px rgba(19,64,168,.75), 0 0 22px -6px rgba(243,200,106,.55);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.wo-cta:hover{ transform:translateY(-2px); border-color:#F3C86A;
  box-shadow:0 18px 42px -10px rgba(19,64,168,.9), 0 0 30px -4px rgba(243,200,106,.85); }
/* The long sentence does not fit beside the people on a small phone
   and wrapped to two lines inside a pill built for one. Both labels
   are real text; the one that is not shown is display:none, so a
   screen reader is read one sentence, not two. */
.wo-short{ display:none; }
.wo-second{
  display:inline-grid; place-items:center; min-height:52px; padding:0 clamp(18px,2.4vw,26px);
  border-radius:100px; text-decoration:none; font-weight:700; color:#EAF3FF;
  border:1.5px solid rgba(234,243,255,.42); background:rgba(8,16,36,.42);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.wo-second:hover{ border-color:rgba(234,243,255,.85); background:rgba(14,28,60,.62); }
.wo-cta:focus-visible,.wo-second:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .wo-cta,.wo-second{ transition:none; } .wo-cta:hover{ transform:none; } }

/* The three arrangements come LAST, after every base rule above, so
   that a phone size is not quietly outranked by the plain .wo-title it
   is meant to override. They are the same weight - one class each - so
   whichever is written later wins, and that caught a whole set of
   phone sizes that were being ignored. */
@media (min-width:900px){
  .wo-band.wo-on{ min-height:clamp(420px,42vw,560px); }
  .wo-inner{ align-items:center; }
  /* Lighter than it was: the mountains and the window now read THROUGH
     the words, which is what "drawn on it" means. The numbers are not a
     taste - they were lowered until the measured contrast behind the
     smallest line was about to drop under 4.5:1, and left one step above
     that. */
  .wo-veil{
    background:
      linear-gradient(90deg, rgba(4,8,20,.80) 0%, rgba(4,8,20,.68) 28%, rgba(4,8,20,.40) 48%, rgba(4,8,20,.10) 64%, transparent 78%),
      linear-gradient(180deg, rgba(4,8,20,.34), transparent 34%, transparent 70%, rgba(4,8,20,.40));
  }
  /* margin-right, a PHYSICAL property, on purpose: the card has to sit on
     the picture's left, where the artwork is calm. A logical property
     would mirror with the page's right-to-left direction and put the words
     straight over the faces. */
  .wo-card{ width:min(46ch,52%); max-width:none; margin-right:auto; }
}

@media (max-width:899px){
  .wo-band.wo-on{ aspect-ratio:16/10; min-height:0; background:#050a18; }
  .wo-pic{ object-position:50% 50%; }
  /* The wash runs the same way as the wide one, just shorter: the left is
     where the window and the snow are, and the faces stay clear of it. */
  .wo-veil{
    background:
      linear-gradient(90deg, rgba(4,8,20,.88) 0%, rgba(4,8,20,.80) 38%, rgba(4,8,20,.52) 60%, rgba(4,8,20,.16) 76%, transparent 90%),
      linear-gradient(180deg, rgba(4,8,20,.30), transparent 36%, transparent 74%, rgba(4,8,20,.34));
  }
  .wo-inner{ align-items:center; }
  /* The lines hug the card's LEFT edge here, not its right. The card sits
     on the picture's left at both sizes, but a right-to-left paragraph
     puts its text against the card's RIGHT edge - which on a wide screen
     lands at 42% of the band and reads as "on the left", and on a phone
     lands at 62% and reads as "in the middle" (owner, 11 October:
     «الكلام طالع بالمنتصف، لازم على اليسار! مثل قبل»). text-align only
     moves where the lines sit inside the box; the words themselves still
     run right to left. */
  .wo-card{ text-align:left; }
  /* flex-END, not flex-start: in a right-to-left row the start IS the
     right-hand side, so the buttons were lining up against the card's
     right edge while the words above them lined up against its left. */
  .wo-go{ justify-content:flex-end; }
  /* 58% of a 390px phone is about 200px of words beside four people. Every
     size below was brought down until each line held ONE line at 320px,
     the narrowest phone the site is built for, and the whole block cleared
     the bottom of the band. Measured, not guessed: tools/sim/promo-sim.js
     counts the line boxes at six widths. */
  .wo-card{ width:58%; max-width:none; margin-right:auto; }
  /* Under 420px the column needs the extra few per cent: «خصومات تصل إلى
     50%» fills it almost exactly, and a font that measures differently on
     a real phone than it does here must still have somewhere to go. */
  @media (max-width:419px){ .wo-card{ width:64%; } }
  .wo-kicker{ font-size:.58rem; letter-spacing:.08em; padding:3px 9px; }
  .wo-title{ font-size:clamp(1rem,4.8vw,1.5rem); margin-top:5px; }
  .wo-off{ margin-top:3px; }
  .wo-off strong{ font-size:clamp(.78rem,3.3vw,1.15rem); }
  /* The qualifying line goes on a small phone: the offer and the way to
     take it are what the band is for, and both of those have to hold one
     line beside the people. It is back from 600px up. */
  .wo-sub{ display:none; }
  .wo-go{ margin-top:clamp(7px,2.2vw,13px); gap:8px; justify-content:flex-end; }
  .wo-cta{ min-height:36px; padding:0 clamp(11px,3.2vw,18px); font-size:clamp(.66rem,2.9vw,.88rem); }
  .wo-long{ display:none; }
  .wo-short{ display:inline; }
  /* Both buttons on a phone as well (owner, 10 October: «خلي زر تواصل
     معنا موجود للهاتف عالصورة»). The column is too narrow to stand them
     side by side, so they stack - .wo-go already wraps - and the run
     checks the pair still stops inside the band at 320px. */
  .wo-second{ min-height:34px; padding:0 14px; font-size:clamp(.64rem,2.8vw,.84rem); }
}

@media (min-width:600px) and (max-width:899px){
  .wo-second{ min-height:38px; padding:0 16px; font-size:.86rem; }
  .wo-sub{ display:block; font-size:.86rem; margin-top:5px; }
  .wo-long{ display:inline; }
  .wo-short{ display:none; }
}