/* ==========================================================================
   IWS homepage — hero carousel and accreditation strip
   Source of truth: IWS_DESIGN.md v1.0. Serif and #FF9600 are RETIRED.
   Dark system applies here: white headline, periwinkle emphasis word.
   ========================================================================== */

:root{
  --iws-royal:#0A1776;
  --iws-sky:#0067E0;
  --iws-navy:#070D2E;
  --iws-navy-glow:#13266B;
  --iws-peri:#CFE0FF;
  --iws-sky-light:#7BA7FF;
  --iws-body-light:#C7CEEA;
  --iws-ease:cubic-bezier(.22,.61,.36,1);
}

/* The legacy inline rule  body.iws-transparent-hero [class*="-hero"]  applies
   padding:150px to ANY class containing "-hero". Our block is named "iwshero"
   with no hyphen so it cannot match. This reset is belt and braces. */
.iwshero__inner,.iwshero__copy,.iwshero__eyebrow,.iwshero h1,
.iwshero__sub,.iwshero__proof,.iwshero__cta{padding:0;}

/* ---- Shell ------------------------------------------------------------- */
.iwshero{
  position:relative;
  width:100%;flex:1 0 100%;align-self:stretch;
  /* Fills the screen so the accreditation band is only reached by scrolling.
     svh, not vh: on mobile browsers vh includes the collapsing URL bar, which
     makes the hero taller than the visible area and pushes the band into view.
     The announcement bar is subtracted, otherwise the hero overshoots the fold
     by exactly the bar's height and the band peeks in at the bottom. */
  min-height:calc(100vh - var(--iws-bar-h));
  min-height:calc(100svh - var(--iws-bar-h));
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--iws-navy);
  isolation:isolate;
}

/* ---- Slides ------------------------------------------------------------
   Crossfade, not slide: a horizontal slide fights the text that stays put.
   The slow scale is the only motion, and it stops for reduced-motion. */
.iwshero__slides{position:absolute;inset:0;z-index:0;}
.iwshero__slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.1s var(--iws-ease);

}
.iwshero__slide[data-active="true"]{opacity:1;}
.iwshero__slide img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  display:block;
  transform:scale(1.06);
  transition:transform 9s linear;
}
.iwshero__slide[data-active="true"] img{transform:scale(1.005);}
/* Per-slide framing, so no face ever sits behind the headline.
   The copy occupies roughly the left 40% of the frame.
   1 and 4 are group shots whose subjects already sit centre-right, so they
   keep the default. 2 has a student hard left, and the visible window is only
   about 70% of the source width, so pushing the crop fully right moves him
   out of the copy column. 3 and 5 could not be solved this way at all: their
   subjects sat at 18-42% and 28-52% of the frame with nothing to their left,
   so those two were re-cropped from the 6720x4480 originals instead
   (web-156-2 and _MG_1622). See Website/STATE.md.

   Note the counter-intuitive direction. object-fit:cover shows only the middle
   70% of a 21:9 source in this container, so object-position:0% reveals the
   LEFT of the frame, which pushes a right-of-centre subject further right on
   screen. Slide 5's subject sits at 42-58% of her source, so 0% is what moves
   her out of the copy; 100% would drag her back across it. */
.iwshero__slide:nth-child(2) img{object-position:100% 42%;}
.iwshero__slide:nth-child(5) img{object-position:0% 38%;}

/* Legibility comes from a directional wash, densest under the text column
   and clear over the students on the right. Never a flat dimming pass. */
.iwshero__slides::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(7,13,46,.90) 0%,
      rgba(7,13,46,.74) 34%,
      rgba(7,13,46,.34) 64%,
      rgba(7,13,46,.06) 100%),
    linear-gradient(180deg,
      rgba(7,13,46,.30) 0%,
      rgba(7,13,46,0) 26%,
      rgba(5,9,34,.55) 100%);
}

/* ---- Copy --------------------------------------------------------------- */
.iwshero__inner{
  position:relative;z-index:2;
  width:100%;max-width:1180px;
  margin:0 auto;
  padding:clamp(56px,7vw,96px) 24px clamp(104px,10vw,132px);
}
.iwshero__copy{max-width:min(820px,100%);margin:0;text-align:left;}

.iwshero__eyebrow{
  text-shadow:0 1px 8px rgba(7,13,46,.65);
  font-family:var(--iws-font-display)!important;
  font-weight:700;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--iws-peri);
  margin:0 0 18px;
}

.iwshero h1{
  /* !important is deliberate: a legacy inline snippet sets Cormorant Garamond
     !important on every h1 site-wide. Serif is retired per IWS_DESIGN.md §4. */
  font-family:var(--iws-font-display)!important;
  font-weight:700;
  font-size:clamp(32px,4.2vw,52px);
  line-height:1.16;
  letter-spacing:-.015em;
  color:#fff;
  margin:0 0 20px;
  text-shadow:0 1px 2px rgba(7,13,46,.5),0 3px 18px rgba(7,13,46,.45);
}
/* §4.3b marker highlight. On dark the block inverts: periwinkle ground,
   Royal text. It hugs the phrase, sits on its own line, and stays readable
   before the sweep arrives. */
.iwshero h1 .hl{
  display:inline-block;
  text-shadow:none;
  color:var(--iws-peri);
  background-image:linear-gradient(90deg,var(--iws-peri) 0%,#EAF1FF 100%);
  background-repeat:no-repeat;background-position:0 0;background-size:0% 100%;
  padding:.015em .11em .05em;border-radius:.14em;margin-left:-.11em;
  
  transition:background-size .85s var(--iws-ease),color .45s ease .18s;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  white-space:nowrap;
}
.iwshero h1 .hl.is-in{background-size:100% 100%;color:var(--iws-royal);}


/* Ticks read as reassurance AFTER the ask, not as a preamble to it. */
.iwshero__proof{
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:flex-start;
  margin:30px 0 0;padding:0;list-style:none;
}
.iwshero__proof li{
  text-shadow:0 1px 8px rgba(7,13,46,.6);
  display:flex;align-items:center;gap:9px;
  font-family:var(--iws-font-display);
  font-weight:600;font-size:15px;color:#fff;
}
.iwshero__proof svg{width:19px;height:19px;flex:0 0 19px;color:var(--iws-peri);}


/* ---- Rotating promise line -----------------------------------------------
   One fixed sentence, one changing end. Each word swaps character by character
   with a staggered spring, the RotatingText behaviour without shipping React.
   The full first phrase is in the DOM for search engines and screen readers;
   the animated stage is aria-hidden. */
.iwshero__rotate,.iwshero__lede{
  margin:22px 0 0;
  font-family:var(--iws-font-body);
  font-weight:400;
  font-size:clamp(17px,1.7vw,22px);
  line-height:1.45;
  color:#E8EDFB;
  text-shadow:0 1px 10px rgba(7,13,46,.7);
}
.iwsrot{display:inline-flex;position:relative;vertical-align:bottom;}
.iwsrot__sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}
/* The changing words are distinguished by COLOUR ONLY: same family, same size
   and near-enough the same weight as the static half of the sentence, with no
   rule underneath it.

   The gradient is the CTA ramp, but lifted (#7BA7FF -> #CFE0FF). The literal
   button gradient starts at Royal #0A1776, which over a dark photograph
   measures about 1.4:1 and simply disappears.

   It is NOT background-clip:text. Each character is its own span carrying an
   opacity animation, and a child with opacity < 1 composites separately from
   the parent's clipped background, which renders the glyphs blank on some
   engines. Instead iws-home.js samples the ramp per character and sets a solid
   colour on each: same left-to-right sweep, survives the animation, no
   @supports fallback needed. The colour below is what shows if that JS never
   runs. */
.iwsrot__stage{
  display:inline-flex;flex-wrap:nowrap;white-space:pre;
  font-family:inherit;
  font-size:inherit;
  font-weight:600;
  color:var(--iws-peri);
  text-shadow:0 1px 10px rgba(7,13,46,.85);
}
.iwsrot__ch{display:inline-block;}

/* ⚠️ ONE PHRASE, ONE MOVE. Changed 31 Jul 2026 after the homepage audit.
   This WAS a per-character stagger: every span carried its own `--d` delay, so
   for about 450ms of every 2,600ms cycle the line rendered as a rising diagonal
   smear with its first word still missing. Measured at normal speed, not only
   under CPU throttle, on the most-viewed element on the site. R6 forbids
   per-card stagger and this was the same device taken down to the character.

   The characters are STILL individual spans, and that is deliberate: it is also
   how the left-to-right gradient is painted, because iws-home.js samples the
   ramp per character (background-clip:text cannot be used while a child has its
   own opacity). Only the ANIMATION moved up to the stage, so the colours are
   untouched and the whole phrase now settles as one object.

   A CSS animation, not a JS transition: a transition needs a second frame to
   flip into, and a throttled tab never delivers it, which left the text stuck
   at opacity 0. animation-fill-mode:both guarantees the end state.

   14px rather than the old translateY(100%): a full line-height is a swoop on a
   whole phrase where it read as a spring on one character. R6, settle do not
   swoop. transform and opacity only. */
.iwsrot__stage--in{
  animation:iwsrot-in .42s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes iwsrot-in{
  from{transform:translateY(14px);opacity:0;}
  to{transform:translateY(0);opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .iwsrot__stage,.iwsrot__ch{
    transform:none!important;opacity:1!important;
    animation:none!important;transition:none!important;
  }
}

/* ---- Buttons ------------------------------------------------------------
   Royal to Sky. The retired #FF9600 must not reappear here. */
.iwshero__cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px;justify-content:flex-start;}
.iwshero__btn{
  font-family:var(--iws-font-display);
  font-weight:700;font-size:15.5px;
  text-decoration:none;
  padding:15px 30px;border-radius:999px;
  display:inline-flex;align-items:center;gap:9px;
  transition:transform .22s var(--iws-ease),box-shadow .22s var(--iws-ease),background .22s var(--iws-ease);
}
.iwshero__btn--primary{
  background:linear-gradient(90deg,var(--iws-royal) 0%,var(--iws-sky) 100%);
  color:#fff;border:0;
  box-shadow:0 10px 30px rgba(0,103,224,.34);
}
.iwshero__btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,103,224,.46);
  color:#fff;
}
.iwshero__btn--primary .arw{transition:transform .22s var(--iws-ease);}
.iwshero__btn--primary:hover .arw{transform:translateX(4px);}
.iwshero__btn--ghost{
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.5);
  color:#fff;
}
.iwshero__btn--ghost:hover{background:rgba(255,255,255,.17);transform:translateY(-2px);color:#fff;}

/* ---- Arrows and dots ----------------------------------------------------
   Real buttons, keyboard reachable, with visible focus. */
.iwshero__nav{
  position:absolute;z-index:4;top:calc(50% - 46px);
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.34);
  color:#fff;
  transition:background .2s var(--iws-ease),transform .2s var(--iws-ease);
}
.iwshero__nav:hover{background:rgba(255,255,255,.24);transform:scale(1.06);}
.iwshero__nav:focus-visible{outline:3px solid var(--iws-peri);outline-offset:3px;}
.iwshero__nav--prev{left:clamp(10px,2.2vw,28px);}
.iwshero__nav--next{right:clamp(10px,2.2vw,28px);}
.iwshero__nav svg{width:21px;height:21px;}

.iwshero__dots{
  position:absolute;z-index:4;
  left:50%;transform:translateX(-50%);
  width:100%;max-width:1180px;
  padding:0 24px;
  bottom:clamp(18px,2.6vw,30px);
  display:flex;gap:9px;
}
.iwshero__dot{
  width:30px;height:4px;border-radius:2px;padding:0;cursor:pointer;
  background:rgba(255,255,255,.32);border:0;
  transition:background .25s var(--iws-ease),width .25s var(--iws-ease);
}
.iwshero__dot[aria-selected="true"]{background:var(--iws-peri);width:46px;}
.iwshero__dot:focus-visible{outline:2px solid var(--iws-peri);outline-offset:4px;}


/* ---- Accreditation band -------------------------------------------------
   Its own section directly under the hero, so the hero stays a single clear
   idea. Marks are large, as on the courses site, and the track runs edge to
   edge with a wide fade so logos read as travelling off the page rather than
   stopping at a boundary. Never lazy-loaded: that attribute is what made the
   old strip vanish on 20 July. */
.iwsacc{
  position:relative;z-index:1;
  width:100%;flex:1 0 100%;align-self:stretch;
  background:var(--iws-navy);
  /* Reduced by the 16px the viewport now carries top and bottom, so the band
     keeps the height it had before the hover-clip fix. */
  padding:clamp(14px,2.4vw,30px) 0 clamp(16px,2.6vw,34px);
  overflow:hidden;
}
.iwsacc__label{
  margin:0 0 clamp(16px,2vw,22px);
  text-align:center;
  font-family:var(--iws-font-display);
  font-weight:700;font-size:clamp(10.5px,1.05vw,12px);
  letter-spacing:.20em;text-transform:uppercase;
  color:var(--iws-peri);opacity:.9;
}
/* overflow stays visible: the mask does the fading, and hidden would clip the
   top and bottom of a mark the moment it scales on hover. The section's own
   overflow:hidden still contains the track horizontally. */
/* THE HOVER CLIP FIX (measured 25 Jul).
   overflow:visible is not enough. A mask clips to its own painting area, so
   anything that grows outside the viewport's box is masked away regardless of
   overflow. The box was exactly as tall as the logos (64px = 64px), so a
   hovered mark scaling to 1.09 had its top and bottom sliced off; forcing a
   1.6 scale in the browser showed "OCN" with its London wordmark cut clean off
   at the box edge. The box now carries vertical padding, which the horizontal
   gradient leaves fully opaque, so a scaled mark has somewhere to grow into.
   The section's padding is reduced by the same amount so the band keeps its
   height. Do not remove this padding without re-testing hover. */
.iwsacc__viewport{
  overflow:visible;width:100%;
  padding:16px 0;
  /* A wide fade on both edges. The marks dissolve rather than clip. */
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 clamp(24px,8%,120px),#000 calc(100% - clamp(24px,8%,120px)),transparent 100%);
  mask:linear-gradient(90deg,transparent 0,#000 clamp(24px,8%,120px),#000 calc(100% - clamp(24px,8%,120px)),transparent 100%);
}
.iwsacc__track{
  display:flex;width:max-content;
  /* transform is driven by requestAnimationFrame so hover eases out rather
     than snapping, matching the LogoLoop behaviour. */
  transform:translate3d(0,0,0);
}
/* Each set carries the SAME gap after its last mark as between marks, so the
   two halves are identical to the pixel and the -50% loop has no visible seam. */
.iwsacc__set{
  display:flex;align-items:center;flex:0 0 auto;
  gap:clamp(48px,6vw,96px);
  padding-right:clamp(48px,6vw,96px);
}
.iwsacc__set img{position:relative;z-index:1;}
.iwsacc__set img:hover{z-index:2;}

@supports not (mask:linear-gradient(#000,#000)){.iwsacc__viewport{overflow:hidden;}}
.iwsacc__set img{
  height:clamp(40px,4.6vw,64px);
  width:auto;display:block;flex:0 0 auto;
  opacity:.9;object-fit:contain;
  -webkit-user-drag:none;user-select:none;
  transition:opacity .25s var(--iws-ease),transform .3s cubic-bezier(.4,0,.2,1);
}
.iwsacc__set img:hover{opacity:1;transform:scale(1.09);}
/* NOTE: an orphaned "to{transform:translateX(-50%);}}" sat here, the tail of a
   @keyframes block whose opening line had been deleted at some point. It was
   invalid CSS and carried a stray closing brace. The loop is driven by
   requestAnimationFrame in iws-home.js, not by a CSS animation, so the
   keyframes were vestigial. Removed 25 Jul 2026. */

@media (max-width:700px){
  .iwsacc__track{gap:40px;}
  .iwsacc__set img{height:38px;}
  .iwsacc__viewport{
    -webkit-mask:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
    mask:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  }
}

/* L6 (27 Jul): the duplicate homepage-only nav-underline system was deleted.
   It painted an invisible white-on-white hover bar under 24 mega-menu links and
   competed with the real, deliberate underline in iws-global.css (a header
   device belongs in the site-wide file). */


/* ---- Entrance ----------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .iwshero__copy > *{
    opacity:0;transform:translateY(14px);
    animation:iws-rise .7s var(--iws-ease) forwards;
  }
}
.iwshero__copy > *:nth-child(1){animation-delay:.05s;}
.iwshero__copy > *:nth-child(2){animation-delay:.13s;}
.iwshero__copy > *:nth-child(3){animation-delay:.21s;}
.iwshero__copy > *:nth-child(4){animation-delay:.29s;}
.iwshero__copy > *:nth-child(5){animation-delay:.37s;}
@keyframes iws-rise{to{opacity:1;transform:none;}}

/* ---- Responsive ---------------------------------------------------------
   Phone first. Most visitors arrive on a phone, so this is the real design
   and the desktop is the enhancement. Everything shares one left edge: the
   20px gutter, matching the header container at this width. */
@media (max-width:900px){
  .iwshero{min-height:100svh;display:flex;align-items:flex-end;}
  /* Vertical wash on a narrow screen: a left-to-right one would leave the
     headline sitting on the bright half of the photograph. */
  .iwshero__slides::after{
    background:linear-gradient(180deg,
      rgba(7,13,46,.46) 0%,
      rgba(7,13,46,.58) 38%,
      rgba(5,9,34,.90) 76%,
      rgba(5,9,34,.97) 100%);
  }
  .iwshero__slide img{object-position:center 30%;}
  /* Copy sits low: the photograph gets the top half, the message the bottom,
     and the CTA lands under the thumb. */
  .iwshero__inner{padding:96px 20px 30px;max-width:100%;}
  .iwshero__copy{max-width:100%;}
  .iwshero h1{font-size:clamp(30px,8.6vw,42px);line-height:1.14;margin-bottom:16px;}
  .iwshero__rotate,.iwshero__lede{margin-top:16px;font-size:clamp(15.5px,4.2vw,18px);line-height:1.4;}
  .iwshero__cta{margin-top:24px;gap:10px;}
  .iwshero__btn{flex:1 1 100%;justify-content:center;padding:16px 20px;font-size:16px;min-height:52px;}
  .iwshero__proof{margin-top:22px;gap:10px 18px;}
  .iwshero__proof li{font-size:14.5px;}
  /* Arrows would sit over the copy; dots and swipe carry it instead. */
  .iwshero__nav{display:none;}
  /* The dots MUST stay absolute. .iwshero is display:flex, flex-direction:row,
     so making them static turned them into a flex sibling of .iwshero__inner
     sitting BESIDE the copy, not under it: the dots took 242px of a 375px row
     and squeezed the copy column to 195px. That is what forced the headline
     onto three lines and pushed the rotating promise line onto a second,
     indented row. Measured 25 Jul. */
  .iwshero__dots{
    position:absolute;transform:none;left:0;right:0;
    width:100%;max-width:none;
    margin:0;padding:0 20px;
    bottom:18px;
    justify-content:flex-start;
  }
  .iwsacc{padding:26px 0 30px;}
  .iwsacc__label{font-size:10.5px;letter-spacing:.16em;margin-bottom:14px;}
  .iwsacc__set{gap:44px;padding-right:44px;}
  .iwsacc__set img{height:40px;}
}
@media (max-width:520px){
  .iwshero__inner{padding:88px 20px 26px;}
  /* Belt and braces after the dots fix: the copy fills the phone width. */
  .iwshero__inner{flex:1 1 100%;width:100%;max-width:100%;}
  .iwshero__copy{max-width:100%;}
  .iwshero h1{font-size:clamp(28px,9vw,36px);}
  .iwshero__proof{flex-direction:column;gap:9px;}
  .iwshero__rotate,.iwshero__lede{font-size:16px;}
  .iwsacc__set img{height:36px;}
  .iwsacc__set{gap:38px;padding-right:38px;}
}
/* Comfortable targets on touch, WCAG 2.1 AA. */
@media (pointer:coarse){
  .iwshero__dot{height:8px;width:34px;}
  .iwshero__dot[aria-selected="true"]{width:50px;}
  .iwshero__btn{min-height:52px;}
  /* No hover scale on touch: it sticks after a tap. */
  .iwsacc__set img:hover{transform:none;}
}
/* Phones do not need the 2400px master. Saves roughly 300KB on the LCP image. */
@media (max-width:760px){
  .iwshero__slide img{content-visibility:auto;}
}

/* ---- Reduced motion -----------------------------------------------------
   The carousel still works, it just stops moving on its own. */
@media (prefers-reduced-motion:reduce){
  .iwshero__slide,
  .iwshero__slide img,
  .iwshero__copy > *{transition:none;animation:none;transform:none;opacity:1;}
  .iwshero__slide{opacity:0;}
  .iwshero__slide[data-active="true"]{opacity:1;}
}


/* ---- Programme cards on a phone -----------------------------------------
   Legacy inline CSS from the Elementor widget carries
     @media (max-width:760px){ .iws-prog .bd p{display:none} }
   so every card lost its description on a phone and showed only an age range
   and a title. A parent scanning on a phone is exactly who needs that line.
   Restored at higher specificity, since the inline block is printed after the
   enqueued sheets and wins any tie. */
html body .iws-prog .bd p{display:block!important;}
@media (max-width:760px){
  html body .iws-prog .bd p{
    display:block!important;
    font-size:13.5px;line-height:1.45;margin-top:6px;
  }
}


/* ==========================================================================
   TRUSTPILOT MARQUEE
   Quotes only, no score (Burak, 25 Jul). Same two-identical-sets construction
   as the accreditation band, driven by the same rAF loop in iws-home.js, so
   hover eases to a stop instead of snapping and there is no seam.
   ========================================================================== */
.iwstp{
  width:100%;flex:1 0 100%;align-self:stretch;
  background:#F8FAFC;
  padding:clamp(56px,6vw,88px) 0 clamp(52px,5.6vw,80px);
  overflow:hidden;
}
.iwstp__in{max-width:1180px;margin:0 auto;padding:0 24px;text-align:center;}
.iwstp__ey{
  font-family:var(--iws-font-display);
  font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--iws-sky);margin:0 0 12px;
}
.iwstp h2{
  font-family:var(--iws-font-display)!important;
  font-weight:700;font-size:clamp(26px,3.2vw,40px);line-height:1.18;
  letter-spacing:-.015em;color:var(--iws-royal);margin:0 0 12px;
}
.iwstp__sub{
  font-family:var(--iws-font-body);
  font-size:clamp(15px,1.4vw,17px);line-height:1.6;color:#4A5578;
  max-width:620px;margin:0 auto clamp(30px,3.4vw,44px);
}
.iwstp__viewport{
  overflow:visible;width:100%;padding:10px 0;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 clamp(24px,7%,110px),#000 calc(100% - clamp(24px,7%,110px)),transparent 100%);
  mask:linear-gradient(90deg,transparent 0,#000 clamp(24px,7%,110px),#000 calc(100% - clamp(24px,7%,110px)),transparent 100%);
}
.iwstp__track{display:flex;width:max-content;transform:translate3d(0,0,0);}
.iwstp__set{display:flex;align-items:stretch;flex:0 0 auto;gap:20px;padding-right:20px;}
.iwstp__card{
  flex:0 0 auto;width:clamp(268px,25vw,330px);
  display:flex;flex-direction:column;
  background:#fff;border:1px solid rgba(10,23,118,.09);
  border-radius:16px;padding:24px 24px 20px;margin:0;
  box-shadow:0 2px 10px rgba(10,23,118,.05);
  transition:transform .3s var(--iws-ease),box-shadow .3s var(--iws-ease);
}
.iwstp__card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(10,23,118,.12);}
/* Amber is the IWS_DESIGN.md whisper accent and the only place a warm tone is
   allowed. Stars read as stars in it; in Sky they read as decoration. */
.iwstp__stars{display:flex;gap:2px;margin-bottom:13px;}
.iwstp__star{color:var(--iws-amber);font-size:16px;line-height:1;}
.iwstp__star--off{color:#D8DEEF;}
.iwstp__quote{
  font-family:var(--iws-font-body);
  font-size:14.5px;line-height:1.62;color:#26304D;margin:0 0 18px;
  flex:1 1 auto;
}
.iwstp__by{display:flex;flex-direction:column;gap:2px;}
.iwstp__by strong{
  font-family:var(--iws-font-display);
  font-size:14px;font-weight:700;color:var(--iws-royal);
}
.iwstp__by span{font-family:var(--iws-font-body);font-size:12.5px;color:#6B7599;}
/* Two buttons. The on-site one leads because /reviews/ keeps the reader here;
   Trustpilot is the proof that the quotes are real, so it stays clearly
   clickable rather than being demoted to small print. */
.iwstp__foot{
  margin-top:clamp(26px,3vw,38px);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;
}
.iwstp__btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--iws-font-display);
  font-weight:700;font-size:15.5px;text-decoration:none;
  padding:15px 30px;border-radius:999px;
  min-height:48px;
  transition:transform .22s var(--iws-ease),box-shadow .22s var(--iws-ease),background-color .22s var(--iws-ease);
}
.iwstp__btn--primary{
  color:#fff;border:0;
  background:var(--iws-grad,linear-gradient(90deg,#0A1776 0%,#0067E0 100%));
  box-shadow:0 10px 30px rgba(0,103,224,.32);
}
.iwstp__btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,103,224,.44);color:#fff;}
.iwstp__btn--ghost{
  color:var(--iws-royal);
  background:transparent;
  border:1.5px solid rgba(10,23,118,.22);
}
.iwstp__btn--ghost:hover{
  background:rgba(10,23,118,.05);
  border-color:rgba(10,23,118,.42);
  color:var(--iws-royal);transform:translateY(-2px);
}
.iwstp__btn span{transition:transform .22s var(--iws-ease);}
.iwstp__btn--primary:hover span{transform:translateX(4px);}
.iwstp__ext{font-size:15px;line-height:1;}
.iwstp__btn--ghost:hover .iwstp__ext{transform:translate(2px,-2px);}
/* Visible to screen readers only: the new-tab warning belongs in the accessible
   name, not on screen. */
.iwstp__sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;
}
@media (max-width:520px){
  .iwstp__foot{flex-direction:column;}
  .iwstp__btn{width:100%;max-width:340px;justify-content:center;}
}
@media (max-width:700px){
  .iwstp__card{width:76vw;padding:20px;}
  .iwstp__set{gap:14px;padding-right:14px;}
}

/* ==========================================================================
   ATHLETES, FOUNDERS & LEADERS
   Lifted from /reviews/, where it was buried in the same widget as the reviews
   masonry and scoped to .iws-rv. Renamed so it stands alone.
   ========================================================================== */
.iwsach{
  width:100%;flex:1 0 100%;align-self:stretch;
  background:#fff;padding:clamp(56px,6vw,88px) 0;
}
.iwsach__in{max-width:1180px;margin:0 auto;padding:0 24px;}
.iwsach__head{text-align:center;margin:0 0 clamp(30px,3.4vw,44px);}
.iwsach__ey{
  font-family:var(--iws-font-display);
  font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--iws-sky);margin:0 0 12px;
}
.iwsach__head h2{
  font-family:var(--iws-font-display)!important;
  font-weight:700;font-size:clamp(26px,3.2vw,40px);line-height:1.18;
  letter-spacing:-.015em;color:var(--iws-royal);margin:0 0 12px;
}
.iwsach__sub{
  font-family:var(--iws-font-body);
  font-size:clamp(15px,1.4vw,17px);line-height:1.6;color:#4A5578;
  max-width:640px;margin:0 auto;
}
.iwsach__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.iwsach__card{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,#0A1776 0%,#13266B 100%);
  border-radius:18px;padding:28px 22px 26px;text-align:center;
  transition:transform .3s var(--iws-ease),box-shadow .3s var(--iws-ease);
}
.iwsach__card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--iws-sky),var(--iws-peri));
}
.iwsach__card:hover{transform:translateY(-8px);box-shadow:0 34px 60px -16px rgba(10,23,118,.6);}
.iwsach__av{
  position:relative;z-index:1;display:block;
  width:88px;height:88px;border-radius:50%;margin:0 auto 16px;
  overflow:hidden;padding:0!important;
  border:3px solid var(--iws-sky);box-shadow:0 0 0 7px rgba(76,148,233,.16);
}
.iwsach__av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.iwsach__card h4{
  position:relative;z-index:1;
  font-family:var(--iws-font-display)!important;
  color:#fff;font-size:18px;font-weight:800;margin:0 0 9px;
}
.iwsach__tag{
  position:relative;z-index:1;display:inline-block;
  background:rgba(76,148,233,.18);color:var(--iws-peri);
  font-family:var(--iws-font-display);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;margin:0 0 13px;
}
.iwsach__card p{
  position:relative;z-index:1;
  font-family:var(--iws-font-body);
  color:#C5CFF2;font-size:13.5px;line-height:1.62;margin:0;
}
.iwsach__cta{text-align:center;margin-top:clamp(30px,3.4vw,44px);}
.iwsach__btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--iws-font-display);
  font-weight:700;font-size:15.5px;color:#fff;text-decoration:none;
  background:var(--iws-grad,linear-gradient(90deg,#0A1776 0%,#0067E0 100%));
  padding:15px 30px;border-radius:999px;
  box-shadow:0 10px 30px rgba(0,103,224,.32);
  transition:transform .22s var(--iws-ease),box-shadow .22s var(--iws-ease);
}
.iwsach__btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,103,224,.44);color:#fff;}
.iwsach__btn span{transition:transform .22s var(--iws-ease);}
.iwsach__btn:hover span{transform:translateX(4px);}
@media (max-width:980px){.iwsach__grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.iwsach__grid{grid-template-columns:1fr;}}


/* ==========================================================================
   MOTION SYSTEM — the storyboard tie
   Burak's brief: every section should feel connected to the next rather than
   scattered, and it must not cost page speed.

   Three devices, all transform/opacity only, all driven by one
   IntersectionObserver plus one rAF-throttled scroll read:

     1. reveal   — each section rises and fades as it enters, children stagger
     2. rule     — every section heading draws the SAME gradient rule the nav
                   and the hero marker use, so the eye recognises one device
                   repeating down the page. That repetition is the tie.
     3. progress — a reading bar under the announcement bar

   Nothing animates width, height, top or left, so there is no layout work per
   frame. Everything is off for prefers-reduced-motion.
   ========================================================================== */

.iws-reveal{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity .62s var(--iws-ease),transform .62s var(--iws-ease);
  transition-delay:var(--iws-d,0ms);
  will-change:opacity,transform;
}
.iws-reveal.is-in{opacity:1;transform:none;}
/* Drop the hint once the move is done. Leaving will-change on dozens of
   sections keeps them on their own GPU layers for the life of the page, which
   is exactly the mistake that blanked the hero photo on 24 Jul. */
.iws-reveal.is-done{will-change:auto;}

/* The repeating device used to be a gradient rule drawn under every section
   heading. REMOVED 25 Jul 2026 (Burak): "the blue gradient underline you have
   brought under the titles, that is just for the main nav bar buttons".
   He is right, and IWS_DESIGN.md section 3.4 backs him: decorative gradients are
   not permitted, and the nav underline survives only as an explicit exception he
   asked for. One device cannot mean "this is a link you are hovering" in the
   header and "this is a section heading" in the body.

   The repeating device is now the marker highlight (.hl, iws-global.css), which
   is the courses site's system and is specified in IWS_DESIGN.md section 4.3b. */

/* Reading progress. Sits directly under the announcement bar and is the only
   thing pinned to scroll, so there is exactly one scroll listener on the page. */
.iws-progress{
  position:fixed;top:var(--iws-bar-h,42px);left:0;right:0;height:3px;
  z-index:9998;pointer-events:none;background:transparent;
}
.iws-progress__fill{
  height:100%;width:100%;
  transform:scaleX(0);transform-origin:left center;
  /* AMBER, not the old pale blue. Burak, 1 Aug: the bar was invisible while
     scrolling, and #7BA7FF -> #CFE0FF is a pale blue on a navy header, so it
     had almost nothing to read against. Amber is the one colour in the
     palette that separates from navy at a glance. Both stops are named
     tokens, and a 3px bar is an OBJECT, which is the 3:1 use §3.5 allows
     for #D97706 (it is text that #D97706 may never carry). */
  background:linear-gradient(90deg,#D97706 0%,#B45309 100%);
}

@media (prefers-reduced-motion:reduce){
  .iws-reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .iws-progress{display:none;}
}


/* ==========================================================================
   ELEMENTOR LAZY-LOAD BACKGROUND WORKAROUND — do not simplify these selectors
   --------------------------------------------------------------------------
   Elementor injects, at (0,5,0) and !important:

     .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload),
     .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) *
       { background-image: none !important }

   The trailing " *" is the problem: it strips the background off EVERY
   descendant of any container from the fourth onward until that container is
   marked .e-lazyloaded when it is scrolled to. Measured 25 Jul: before scroll
   background-image:none, after scroll the gradient returns. A gradient button
   with white text and no background is an invisible button, and it stays
   invisible for good if that JS never runs.

   Two fixes were tried and rejected before this one:
     - plain !important on our rule: (0,1,0) loses to (0,5,0)
     - Elementor's own e-no-lazyload opt-out via the container's _css_classes
       setting: the class never reached the DOM

   So the selectors below deliberately carry six classes plus html and body to
   reach (0,6,2), which beats (0,5,0) honestly. The optimisation exists for
   heavy hero photographs; it saves nothing on a CSS gradient and only costs us
   correctness, so overriding it here is right rather than rude.
   ========================================================================== */
html body .iwstp .iwstp__btn--primary.iwstp__btn--primary.iwstp__btn--primary.iwstp__btn--primary,
html body .iwsach .iwsach__btn.iwsach__btn.iwsach__btn.iwsach__btn{
  background-image:var(--iws-grad,linear-gradient(90deg,#0A1776 0%,#0067E0 100%))!important;
}
html body .iwsach .iwsach__grid .iwsach__card.iwsach__card.iwsach__card.iwsach__card{
  background-image:linear-gradient(165deg,#0A1776 0%,#13266B 100%)!important;
}
html body .iwsach .iwsach__grid .iwsach__card.iwsach__card.iwsach__card.iwsach__card::after{
  background-image:linear-gradient(90deg,var(--iws-sky),var(--iws-peri))!important;
}


/* ==========================================================================
   STORYBOARD BRIDGE  (.iwsbr)
   --------------------------------------------------------------------------
   Burak's brief, 25 Jul 2026: "make the homepage after the hero section in such
   way that every section is connected with each other in some way pointing to
   the next section".

   The device is a hand-off at the foot of each section: a connector line that
   draws itself downward as you scroll, the next chapter's number, and one
   sentence that says what is coming and why it follows from what you just read.
   It is a link, so it is also a way to move.

   Why a line and a sentence rather than a decorative flourish: the page has to
   read as a serious school (IWS_DESIGN.md section 1, test 3). A sentence that
   earns the next scroll is editorial. A swooping graphic is a template.
   ========================================================================== */
.iwsbr{
  display:block;text-decoration:none;
  max-width:1180px;margin:0 auto;padding:0 24px 6px;
  box-sizing:border-box;
}
.iwsbr__in{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:34px 0 40px;text-align:center;
}
.iwsbr__line{
  width:1px;height:56px;
  background:linear-gradient(180deg,rgba(10,23,118,0) 0%,rgba(10,23,118,.34) 100%);
  transform:scaleY(0);transform-origin:top center;
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.is-in .iwsbr__line{transform:scaleY(1);}
.iwsbr__num{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(10,23,118,.22);
  background:#fff;
  font-family:var(--iws-font-display);
  font-size:11.5px;font-weight:700;letter-spacing:.04em;
  color:var(--iws-royal,#0A1776);
  font-variant-numeric:tabular-nums;
  transition:border-color .3s ease,background .3s ease,color .3s ease;
}
.iwsbr__txt{
  font-family:var(--iws-font-body);
  font-size:15.5px;line-height:1.55;color:#475569;
  max-width:46ch;margin:0;
}
.iwsbr__txt b{color:var(--iws-royal,#0A1776);font-weight:600;}
.iwsbr__arw{
  display:inline-block;margin-left:6px;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.iwsbr:hover .iwsbr__num{background:var(--iws-royal,#0A1776);border-color:var(--iws-royal,#0A1776);color:#fff;}
.iwsbr:hover .iwsbr__arw{transform:translateY(3px);}
.iwsbr:focus-visible{outline:2px solid var(--iws-sky,#0067E0);outline-offset:4px;border-radius:8px;}

/* On a dark section the same device inverts. */
.iws-dark .iwsbr__line{background:linear-gradient(180deg,rgba(207,224,255,0) 0%,rgba(207,224,255,.45) 100%);}
.iws-dark .iwsbr__num{background:transparent;border-color:rgba(207,224,255,.4);color:var(--iws-peri,#CFE0FF);}
.iws-dark .iwsbr__txt{color:var(--iws-body-light,#C7CEEA);}
.iws-dark .iwsbr__txt b{color:#fff;}
.iws-dark .iwsbr:hover .iwsbr__num{background:var(--iws-peri,#CFE0FF);border-color:var(--iws-peri,#CFE0FF);color:var(--iws-royal,#0A1776);}

@media (max-width:620px){
  .iwsbr__in{padding:26px 0 30px;}
  .iwsbr__line{height:40px;}
  .iwsbr__txt{font-size:14.5px;}
}
@media (prefers-reduced-motion:reduce){
  .iwsbr__line{transform:scaleY(1);transition:none;}
  .iwsbr__arw{transition:none;}
}


/* ==========================================================================
   THREE PATHWAYS  (.iwspw)
   --------------------------------------------------------------------------
   Rebuilt 25 Jul 2026. What was wrong with the old one:

   1. It ran Foundation, Bridge, Academy. IWS_DESIGN.md section 8.4 and
      CLAUDE.md section 2 both require Academy, Bridge, Foundation, never
      leading with Foundation. The live /pathways/ page has the same fault.
   2. Gold: .tg used #FFD27A and a cream #FFF1DF ground. Section 3.4 is explicit
      that gold is not an IWS colour.
   3. The primary button was a blue gradient with #3a2400 text on it, dark brown
      left behind when the orange palette was swept to blue. Unreadable.
   4. Half its CSS addressed classes (.c, .tg, .tl, .bf) that the markup never
      used; the cards were actually being styled by the legacy snippet.

   NO GRADIENTS ANYWHERE IN HERE, and that is deliberate twice over. Section 3.4
   forbids decorative gradients, and Elementor's lazy-load rule sets
   background-image:none on every descendant of the fourth container onward
   until it is scrolled to. A section built from solid background-color cannot
   be hit by that trap at all, so it needs none of the specificity gymnastics at
   the foot of this file.

   The live-lesson meter is the one new component. It is a data display, not
   decoration: fifteen segments, filled 15, 5 and 0, which is the single fact
   that actually separates the three tiers. Flagged to Mustafa as PROPOSED under
   section 12 because section 13 rule 7 says not to introduce visual devices
   unasked.
   ========================================================================== */
.iwspw{background:#F8FAFC;padding:88px 0 0;}
.iwspw__in{max-width:1180px;margin:0 auto;padding:0 24px;box-sizing:border-box;}
.iwspw__ey{
  display:block;text-align:center;
  font-family:var(--iws-font-display);
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--iws-sky,#0067E0);margin:0 0 14px;
}
.iwspw h2{
  text-align:center;
  font-family:var(--iws-font-display)!important;
  font-size:clamp(27px,3.3vw,40px);font-weight:700;line-height:1.3;
  color:var(--iws-royal,#0A1776);margin:0 0 16px;letter-spacing:-.015em;
}
.iwspw__sub{
  text-align:center;font-family:var(--iws-font-body);
  font-size:17px;line-height:1.65;color:#475569;
  max-width:62ch;margin:0 auto 48px;
}

.iwspw__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}

.iwspw__card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid #E2E8F0;border-radius:18px;
  padding:30px 28px 28px;
  transition:transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .32s ease,border-color .32s ease;
}
.iwspw__card:hover{transform:translateY(-6px);border-color:#C9D6EE;box-shadow:0 24px 44px -18px rgba(10,23,118,.28);}
/* Academy leads, and it is the only card that carries the dark treatment, so
   the eye lands on the full school first. Never Foundation (section 8.4). */
.iwspw__card--lead{background:var(--iws-royal,#0A1776);border-color:var(--iws-royal,#0A1776);}
.iwspw__card--lead:hover{border-color:var(--iws-royal,#0A1776);box-shadow:0 28px 54px -18px rgba(10,23,118,.55);}

.iwspw__tag{
  align-self:flex-start;
  font-family:var(--iws-font-display);
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--iws-sky,#0067E0);background:#EAF2FE;
  border-radius:999px;padding:6px 12px;margin:0 0 18px;
}
.iwspw__card--lead .iwspw__tag{color:var(--iws-royal,#0A1776);background:var(--iws-peri,#CFE0FF);}

.iwspw__card h3{
  font-family:var(--iws-font-display)!important;
  font-size:23px;font-weight:700;line-height:1.25;
  color:var(--iws-royal,#0A1776);margin:0 0 6px;
}
.iwspw__card--lead h3{color:#fff;}
.iwspw__line{
  font-family:var(--iws-font-body);
  font-size:14.5px;font-weight:500;color:var(--iws-sky,#0067E0);margin:0 0 18px;
}
.iwspw__card--lead .iwspw__line{color:var(--iws-peri,#CFE0FF);}

/* ---- The live-lesson meter ---- */
.iwspw__meter{margin:0 0 18px;padding:14px 0 0;border-top:1px solid #EEF2F9;}
.iwspw__card--lead .iwspw__meter{border-top-color:rgba(207,224,255,.22);}
.iwspw__mlab{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 9px;
  font-family:var(--iws-font-display);
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#64748B;
}
.iwspw__card--lead .iwspw__mlab{color:var(--iws-body-light,#C7CEEA);}
.iwspw__mnum{
  font-size:17px;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--iws-royal,#0A1776);font-variant-numeric:tabular-nums;
}
.iwspw__card--lead .iwspw__mnum{color:#fff;}
.iwspw__bars{display:flex;gap:3px;}
.iwspw__bars i{
  flex:1 1 0;height:20px;border-radius:2px;
  background:#E6ECF6;
  transform:scaleY(.34);transform-origin:bottom center;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),background-color .5s ease;
  transition-delay:calc(var(--i) * 34ms);
}
.iwspw__card--lead .iwspw__bars i{background:rgba(207,224,255,.2);}
.is-in .iwspw__bars i[data-on]{transform:scaleY(1);background:var(--iws-sky,#0067E0);}
.is-in .iwspw__card--lead .iwspw__bars i[data-on]{background:var(--iws-peri,#CFE0FF);}
/* Foundation has none, and saying so plainly is the point of the row. */
.iwspw__mnone{
  font-family:var(--iws-font-body);
  font-size:13px;color:#64748B;margin:9px 0 0;
}

.iwspw__for{
  font-family:var(--iws-font-display);
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:#64748B;margin:0 0 10px;
}
.iwspw__card--lead .iwspw__for{color:var(--iws-body-light,#C7CEEA);}
.iwspw__list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:9px;}
.iwspw__list li{
  display:flex;gap:9px;align-items:flex-start;
  font-family:var(--iws-font-body);
  font-size:14.5px;line-height:1.5;color:#334155;
}
.iwspw__card--lead .iwspw__list li{color:var(--iws-body-light,#C7CEEA);}
.iwspw__list svg{flex:0 0 auto;margin-top:2px;width:16px;height:16px;stroke:var(--iws-sky,#0067E0);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.iwspw__card--lead .iwspw__list svg{stroke:var(--iws-peri,#CFE0FF);}

.iwspw__go{
  margin-top:auto;align-self:stretch;text-align:center;
  font-family:var(--iws-font-display);
  font-size:14.5px;font-weight:600;text-decoration:none;
  padding:13px 20px;border-radius:11px;
  background:var(--iws-royal,#0A1776);color:#fff;
  transition:background .25s ease,transform .25s ease;
}
.iwspw__go:hover{background:var(--iws-sky,#0067E0);color:#fff;transform:translateY(-2px);}
.iwspw__card--lead .iwspw__go{background:#fff;color:var(--iws-royal,#0A1776);}
.iwspw__card--lead .iwspw__go:hover{background:var(--iws-peri,#CFE0FF);color:var(--iws-royal,#0A1776);}
.iwspw__go:focus-visible{outline:2px solid var(--iws-sky,#0067E0);outline-offset:3px;}

/* ---- Compare drawer ---- */
.iwspw__cmp{margin:38px auto 0;max-width:1180px;}
.iwspw__cmpbtn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;cursor:pointer;
  font-family:var(--iws-font-display);
  font-size:15px;font-weight:600;color:var(--iws-royal,#0A1776);
  background:#fff;border:1px solid #DCE4F2;border-radius:13px;
  padding:16px 22px;
  transition:border-color .25s ease,background .25s ease;
}
.iwspw__cmpbtn:hover{border-color:var(--iws-royal,#0A1776);background:#F4F8FF;}
.iwspw__cmpbtn:focus-visible{outline:2px solid var(--iws-sky,#0067E0);outline-offset:3px;}
.iwspw__chev{
  width:17px;height:17px;stroke:currentColor;stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .34s cubic-bezier(.22,.61,.36,1);
}
.iwspw__cmpbtn[aria-expanded="true"] .iwspw__chev{transform:rotate(180deg);}
.iwspw__cmpbtn .lbl-less{display:none;}
.iwspw__cmpbtn[aria-expanded="true"] .lbl-more{display:none;}
.iwspw__cmpbtn[aria-expanded="true"] .lbl-less{display:inline;}

/* grid-template-rows 0fr to 1fr animates to the content's real height with no
   JavaScript measuring it, and the panel stays in the DOM so the table is
   still crawlable while it is shut. */
.iwspw__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.22,.61,.36,1);}
.iwspw__panel.is-open{grid-template-rows:1fr;}
.iwspw__panelin{overflow:hidden;}
.iwspw__tblwrap{overflow-x:auto;margin-top:14px;border:1px solid #E2E8F0;border-radius:14px;background:#fff;}
.iwspw__tbl{width:100%;border-collapse:collapse;min-width:660px;font-family:var(--iws-font-body);}
.iwspw__tbl th,.iwspw__tbl td{padding:15px 18px;text-align:left;vertical-align:top;font-size:14.5px;line-height:1.5;border-bottom:1px solid #EEF2F9;}
.iwspw__tbl thead th{
  font-family:var(--iws-font-display);
  font-size:14px;font-weight:700;color:var(--iws-royal,#0A1776);
  background:#F8FAFC;border-bottom:1px solid #E2E8F0;white-space:nowrap;
}
.iwspw__tbl thead th:first-child{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#64748B;font-weight:600;}
.iwspw__tbl tbody th{
  font-family:var(--iws-font-display);
  font-size:13.5px;font-weight:600;color:var(--iws-royal,#0A1776);white-space:nowrap;
}
.iwspw__tbl td{color:#334155;}
.iwspw__tbl tbody tr:last-child th,.iwspw__tbl tbody tr:last-child td{border-bottom:0;}
.iwspw__tbl tbody tr:hover th,.iwspw__tbl tbody tr:hover td{background:#F8FAFC;}
.iwspw__tbl .lead{background:#F4F8FF;}
.iwspw__tbl thead .lead{background:#EAF2FE;}
.iwspw__note{
  font-family:var(--iws-font-body);
  font-size:13.5px;color:#64748B;margin:12px 0 0;text-align:center;
}
.iwspw__note a{color:var(--iws-sky,#0067E0);font-weight:500;}

@media (max-width:980px){
  .iwspw__grid{grid-template-columns:1fr;max-width:460px;margin:0 auto;}
  .iwspw{padding-top:64px;}
}
@media (prefers-reduced-motion:reduce){
  .iwspw__card,.iwspw__go,.iwspw__bars i,.iwspw__panel,.iwspw__chev{transition:none;}
  .iwspw__bars i{transform:scaleY(.34);}
  .is-in .iwspw__bars i[data-on]{transform:scaleY(1);}
}

/* Visually hidden, still announced. The table caption names what the table is
   for a screen-reader user who lands on it out of context. */
.iwspw__sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;
}


/* ==========================================================================
   AMBER, AND WHY THE PAGE NEEDED IT
   Burak, 25 Jul: "make them subtle orange colour from our colour palette,
   currently the website is too blue and white colours in general". He is right,
   and the fix is legal where it is placed here: IWS_DESIGN.md 3.1 defines amber
   as a "tiny accent only: one small dot, rule end or micro-highlight", which is
   exactly what a chapter numeral and the tip of a connector line are.

   Amber is NOT used as a fill, a background or a heading anywhere. 3.4 is
   explicit that it must stay a whisper, and three whispers down a long page is
   what stops it becoming a statement.
   ========================================================================== */
.iwsbr__num{
  width:44px;height:44px;                /* was 34, Burak asked for bigger */
  font-size:14px;
  color:var(--iws-amber-ink,#B45309);
  border-color:rgba(217,119,6,.55);
  box-shadow:0 0 0 5px rgba(217,119,6,.06);
}
.iwsbr__line{
  /* The thread warms as it approaches the number rather than arriving cold. */
  background:linear-gradient(180deg,
    rgba(10,23,118,0) 0%,
    rgba(10,23,118,.30) 55%,
    rgba(217,119,6,.55) 100%);
  height:62px;
}
.iwsbr__txt{font-size:16.5px;}
.iwsbr__arw{color:var(--iws-amber-ink,#B45309);}
/* Burak, 26 Jul: "make all numbers like this one turn into white instead when
   hovered over with mouse while the background remains orange".

   The fill has to deepen one step to give him that. Measured: white on
   --iws-amber #D97706 is 3.19:1, which fails the 4.5:1 AA bar for 14px text
   and is banned by name in CLAUDE.md §2. White on --iws-amber-ink #B45309 is
   5.02:1 and passes. #B45309 is already in the palette, so this is the same
   orange a shade deeper, not a new colour. */
.iwsbr:hover .iwsbr__num{
  /* Same gradient as the scrollytelling badges, so the two orange circles on
     the page are one device rather than two near-misses. Same contrast floor
     applies: #B45309 is the lightest stop white can sit on. */
  background:linear-gradient(135deg,var(--iws-amber-ink,#B45309),#7C2D12);
  border-color:var(--iws-amber-ink,#B45309);
  color:#fff;
  box-shadow:0 0 0 7px rgba(180,83,9,.16);
}
/* 27 Jul: these were #F5B860, a lighter amber invented to survive the navy.
   Burak flagged it as gold, and he is right: it is not in the palette. It is
   also exactly the move IWS_DESIGN.md 4.3b rules out, in its own words --
   "swap the ink family, do not chase the gradient lighter to compensate". On a
   dark ground the amber family hands over to Periwinkle, which is the
   documented dark-system pairing and measures 11.28:1 on Royal. */
.iws-dark .iwsbr__num{color:var(--iws-peri,#CFE0FF);border-color:rgba(207,224,255,.45);}
.iws-dark .iwsbr__line{
  background:linear-gradient(180deg,rgba(207,224,255,0) 0%,rgba(207,224,255,.32) 55%,rgba(207,224,255,.6) 100%);
}
.iws-dark .iwsbr__arw{color:var(--iws-peri,#CFE0FF);}
.iws-dark .iwsbr:hover .iwsbr__num{background:var(--iws-peri,#CFE0FF);border-color:var(--iws-peri,#CFE0FF);color:var(--iws-royal,#0A1776);}


/* ==========================================================================
   PATHWAYS: ROW-BY-ROW ALIGNMENT
   Burak drew three horizontal lines across the three cards on 25 Jul to show
   that nothing lines up: Academy's subtitle is one line where the other two
   wrap to two, so every row below it, the meter label, the bars and the list,
   sits a different distance down each card.

   Fixed with subgrid rather than by guessing min-heights. Each card spans the
   same nine parent rows and inherits their track sizes, so every row is as tall
   as the tallest card's content and all three land on the same baseline no
   matter how the copy changes later. The @supports fallback keeps the old
   behaviour honest on anything without subgrid.
   ========================================================================== */
.iwspw__grid{grid-auto-rows:min-content;}

@supports (grid-template-rows: subgrid){
  .iwspw__grid{grid-template-rows:repeat(9,auto);}
  .iwspw__card{
    display:grid;
    grid-row:span 9;
    grid-template-rows:subgrid;
    align-content:start;
  }
  /* The list must not stretch: it sits at the top of its row so the ticks in
     all three cards align, and the row itself absorbs the difference. */
  .iwspw__list{align-self:start;}
  .iwspw__go{align-self:end;}
}
@supports not (grid-template-rows: subgrid){
  .iwspw__line{min-height:3em;}
  .iwspw__note{min-height:2.6em;}
  .iwspw__list{min-height:5.4em;}
}

/* The meter is no longer a wrapper: its label, bars and note are direct
   children of the card so each one gets its own aligned row. */
.iwspw__mlab{
  margin:14px 0 9px;padding:14px 0 0;
  border-top:1px solid #EEF2F9;
}
.iwspw__card--lead .iwspw__mlab{border-top-color:rgba(207,224,255,.22);}
.iwspw__note{
  font-family:var(--iws-font-body);
  font-size:13px;line-height:1.45;color:#64748B;margin:10px 0 20px;
  /* The section centres its heading and standfirst; the cards are left-ranged.
     Without this the note inherits the centre and sits alone in the middle of
     an otherwise left-aligned column. */
  text-align:left;
}
.iwspw__card--lead .iwspw__note{color:var(--iws-body-light,#C7CEEA);}

/* ---- Academy: make the lead unmistakable ----
   Emphatically NOT by raising the card. A permanent lift offsets every row in
   it by the same amount, which puts the three cards back out of the horizontal
   alignment Burak drew lines across. Academy stands out by weight instead: the
   only dark card, an amber rule along its top edge, a badge above it, and a
   deeper shadow and a gradient badge. Hover lift is fine: it is transient and applies to
   whichever card the cursor is over. */
.iwspw__card--lead{
  box-shadow:0 30px 60px -22px rgba(10,23,118,.55);
}
/* An amber rule across the top edge, the "rule end" use 3.1 permits. */
.iwspw__card--lead::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  border-radius:18px 18px 0 0;
  /* 27 Jul: the light end was #F5B860, not a palette value. Both stops are
     tokens now. This card is on a light ground, so amber is still correct
     here (3.1 permits amber as a rule end); only the invented tint goes. */
  background:linear-gradient(90deg,var(--iws-amber,#D97706) 0%,var(--iws-amber-ink,#B45309) 100%);
  z-index:3;
}
.iwspw__crown{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  z-index:4;white-space:nowrap;
  font-family:var(--iws-font-display);
  font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--iws-royal,#0A1776);background:var(--iws-amber,#D97706);
  padding:6px 14px;border-radius:999px;
  box-shadow:0 6px 16px -4px rgba(217,119,6,.5);
}
@media (max-width:980px){
  @supports (grid-template-rows: subgrid){
    .iwspw__grid{grid-template-rows:none;}
    .iwspw__card{grid-row:auto;grid-template-rows:none;}
  }
}

/* Bento needs a positioned, clipping box for the ripple and the glow ring. */
.iwspw__card,.iwstp__card{position:relative;overflow:hidden;}
/* The crown badge sits ABOVE the card's top edge, so that one card cannot clip. */
.iwspw__card--lead{overflow:visible;}
.iwspw__card--lead .iwsb__ripple{display:none;}
.iwstp__viewport{position:relative;}


/* ==========================================================================
   A REAL SCHOOL  (.iwsreal)  — sticky scrollytelling
   The media column pins while the reasons scroll past it, and the pinned
   figure crossfades as each reason takes over. One tall section, four states,
   no clicking.

   position:sticky needs an ancestor that is NOT overflow:hidden and NOT a
   transform/filter container, or it silently degrades to static. The section
   therefore sets overflow:visible on itself and does not carry a transform;
   the .iws-reveal opacity fade is fine, opacity alone does not create a
   containing block, but do not add transform to .iwsreal.
   ========================================================================== */
.iwsreal{
  background:linear-gradient(178deg,#FFFFFF 0%,#F8FAFC 38%,#FFFFFF 100%);
  padding:88px 0 0;
  overflow:visible;
  width:100%;flex:1 0 100%;align-self:stretch;
}
.iwsreal__in{max-width:1180px;margin:0 auto;padding:0 24px;box-sizing:border-box;text-align:center;}
.iwsreal__ey{
  display:block;font-family:var(--iws-font-display);
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--iws-sky,#0067E0);margin:0 0 14px;
}
.iwsreal h2{
  font-family:var(--iws-font-display)!important;
  font-size:clamp(27px,3.3vw,40px);font-weight:700;line-height:1.25;
  color:var(--iws-royal,#0A1776);margin:0 0 16px;letter-spacing:-.015em;
}
.iwsreal__sub{
  font-family:var(--iws-font-body);
  font-size:17px;line-height:1.65;color:#475569;max-width:56ch;margin:0 auto;
}

.iwsreal__scroll{
  max-width:1180px;margin:0 auto;padding:56px 24px 0;box-sizing:border-box;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,72px);align-items:start;
}

/* ---- the pinned media ---- */
.iwsreal__media{
  position:sticky;
  /* Header plus announcement bar, so a pinned figure never slides under them. */
  top:calc(var(--iws-bar-h,42px) + 92px);
  aspect-ratio:4/5;
  border-radius:20px;overflow:hidden;
  background:#0B1444;
  box-shadow:0 30px 70px -28px rgba(10,23,118,.55);
}
.iwsreal__fig{
  position:absolute;inset:0;margin:0;
  opacity:0;transform:scale(1.04);
  transition:opacity .6s var(--iws-ease),transform 1.1s var(--iws-ease);
}
.iwsreal__fig.is-on{opacity:1;transform:scale(1);}
.iwsreal__fig img,.iwsreal__fig video{width:100%;height:100%;object-fit:cover;display:block;}

/* A thin progress rail down the pinned panel: how far through the four you are. */
.iwsreal__prog{
  position:absolute;right:14px;top:18px;bottom:18px;width:3px;z-index:2;
  border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden;
}
.iwsreal__prog i{
  display:block;width:100%;height:100%;border-radius:3px;
  background:linear-gradient(180deg,var(--iws-peri,#CFE0FF),var(--iws-amber,#D97706));
  transform:scaleY(var(--p,0));transform-origin:top center;
  transition:transform .45s var(--iws-ease);
}

/* ---- the steps ---- */
.iwsreal__steps{list-style:none;margin:0;padding:0;}
.iwsreal__step{
  position:relative;
  padding:0 0 0 62px;
  margin:0 0 clamp(64px,13vh,132px);
  opacity:.34;
  transition:opacity .45s var(--iws-ease);
}
.iwsreal__step:last-child{margin-bottom:clamp(80px,16vh,150px);}
.iwsreal__step.is-on{opacity:1;}
.iwsreal__num{
  position:absolute;left:0;top:2px;
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(217,119,6,.34);
  font-family:var(--iws-font-display);
  font-size:13px;font-weight:700;color:var(--iws-amber-ink,#B45309);
  font-variant-numeric:tabular-nums;
  background:#fff;
  transition:background .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease;
}
/* Burak, 26 Jul: "the blue numbers inside orange circles should be white and
   the orange should be gradient orange not solid colour orange".

   The gradient runs #B45309 to #7C2D12 rather than starting at the brighter
   #D97706, and that is forced by the palette's own contrast rule, not a
   preference. White on #D97706 measures 3.19:1 and fails the 4.5:1 bar for
   13px text; #B45309 measures 5.02:1 and passes. Every stop in a gradient
   carries the text, so the LIGHTEST stop sets the limit: #B45309 is the
   lightest orange in the palette that can hold white type. */
.iwsreal__step.is-on .iwsreal__num{
  background:linear-gradient(135deg,var(--iws-amber-ink,#B45309),#7C2D12);
  border-color:var(--iws-amber-ink,#B45309);
  color:#fff;
  box-shadow:0 0 0 6px rgba(180,83,9,.14);
}
.iwsreal__kicker{
  display:block;font-family:var(--iws-font-display);
  font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:#64748B;margin:0 0 8px;
}
.iwsreal__step h3{
  font-family:var(--iws-font-display)!important;
  font-size:clamp(21px,2.3vw,27px);font-weight:700;line-height:1.28;
  color:var(--iws-royal,#0A1776);margin:0 0 10px;
}
.iwsreal__step p{
  font-family:var(--iws-font-body);
  font-size:16.5px;line-height:1.68;color:#475569;margin:0;max-width:46ch;
}

.iwsreal__foot{
  max-width:1180px;margin:0 auto;padding:0 24px 20px;box-sizing:border-box;
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
}
.iwsreal__go{
  font-family:var(--iws-font-display);
  font-size:15px;font-weight:600;text-decoration:none;
  padding:14px 28px;border-radius:12px;
  background-image:linear-gradient(160deg,var(--iws-royal,#0A1776) 0%,#0067E0 100%);
  color:#fff;
  transition:background-image .25s ease,transform .25s ease;
}
.iwsreal__go:hover{background-image:linear-gradient(160deg,var(--iws-sky,#0067E0) 0%,#0A1776 100%);color:#fff;transform:translateY(-2px);}
.iwsreal__go--ghost{
  background-image:linear-gradient(160deg,#FFFFFF 0%,#EAF1FF 100%);
  color:var(--iws-royal,#0A1776);border:1px solid #DCE4F2;
}
.iwsreal__go--ghost:hover{background-image:linear-gradient(160deg,#EAF1FF 0%,#CFE0FF 100%);color:var(--iws-royal,#0A1776);}
.iwsreal__go:focus-visible{outline:2px solid var(--iws-sky,#0067E0);outline-offset:3px;}

@media (max-width:900px){
  /* One column, media pinned at the top and the steps running underneath it.
     Un-sticking it entirely would leave four paragraphs with no picture. */
  .iwsreal__scroll{grid-template-columns:1fr;gap:26px;}
  .iwsreal__media{aspect-ratio:16/10;top:calc(var(--iws-bar-h,42px) + 76px);}
  .iwsreal__step{padding-left:52px;margin-bottom:clamp(48px,10vh,90px);}
  .iwsreal__num{width:36px;height:36px;font-size:12px;}
}
@media (prefers-reduced-motion:reduce){
  /* Sticky stays: it is layout, not motion. Only the crossfades stop, and every
     step reads at full opacity so nothing depends on the scroll driver. */
  .iwsreal__fig,.iwsreal__step,.iwsreal__num,.iwsreal__prog i{transition:none;}
  .iwsreal__step{opacity:1;}
  .iwsreal__fig{transform:none;}
}


/* ==========================================================================
   ROUND-FOUR REVISIONS (Burak, 25 Jul)
   ========================================================================== */

/* ---- Real School: a bigger 16:9 stage --------------------------------------
   "make the video component so its bigger and its 16x9 so the video that plays
   in the background fits inside that tile perfectly and so its more visible".
   The panel was 4:5 portrait, so a 16:9 film was being cover-cropped to a
   fraction of itself. 16:9 makes the frame the film's own shape, and the media
   column now takes the wider half of the split. */
.iwsreal__scroll{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);}
.iwsreal__media{aspect-ratio:16/9;border-radius:18px;}
/* contain, not cover, so nothing is cropped out of the frame at all. The panel
   is the film's own ratio, so the two coincide and there are no bars. */
.iwsreal__fig video{object-fit:contain;background:#0B1444;}

@media (max-width:900px){
  .iwsreal__scroll{grid-template-columns:1fr;}
  .iwsreal__media{aspect-ratio:16/9;}
}

/* ---- Academy: the lead marker, rebuilt -------------------------------------
   "i dont like the orange 'most support' text and line behind it, delete the
   orange line, make a professional level feature for the academy programme tile
   in gradient orange that shows that thats the best programme we have but dont
   write most support because then parents will think that the other programmes
   dont have enough support".

   The orange rule is gone. The badge is a gradient-amber ribbon reading "Most
   complete", which is a statement about scope rather than a comparison of care:
   Academy is the only tier with a full timetable, so it is complete, and Bridge
   and Foundation are not thereby described as unsupported. */
.iwspw__card--lead::before{content:none;}   /* the amber top rule, removed */

/* ---- "Most complete": a pop-up, not a row ---------------------------------
   Burak, 26 Jul: "revert the academy tier tile to its normal state without the
   most complete text and button, make sure the most complete button is like a
   pop up on the tile and make it creative, and make the text left aligned but
   horizontally centre aligned with its button".

   So: the card itself is structurally identical to Bridge and Foundation
   again, and the badge floats over its top edge, out of flow, taking no grid
   row. It is horizontally centred on the card, which is also the centre of the
   card's own CTA button; the label inside it is left-ranged after the mark,
   the way a chip reads rather than a caption.

   "Creative" is carried by three things that cost nothing: it pops in with a
   small overshoot when the section arrives, a light sheen travels across the
   amber every few seconds, and it lifts with the card on hover. */
.iwspw__crown{
  position:absolute;
  top:-15px;left:50%;
  z-index:6;
  display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;
  white-space:nowrap;
  padding:8px 17px 8px 13px;
  border-radius:999px;border:0;
  font-family:var(--iws-font-display);
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  text-align:left;
  /* 27 Jul: was #3B1D02 on a four-stop ramp that opened on #FBCE85 and
     #F5B860, two invented light ambers Burak flagged as gold. Rebuilt as the
     filled-badge treatment 14 already specifies, #B45309 to #7C2D12 with white
     text: white measures 5.02:1 on #B45309 and improves toward the dark end,
     so the whole sweep clears AA rather than only its middle. Same pair the
     bridge numeral hover already uses, so the page gains consistency too. */
  color:#fff;
  background-image:linear-gradient(100deg,var(--iws-amber-ink,#B45309) 0%,#7C2D12 100%);
  background-size:220% 100%;
  background-position:0% 0;
  box-shadow:0 10px 24px -8px rgba(217,119,6,.65),
             0 2px 6px -2px rgba(59,29,2,.35),
             inset 0 1px 0 rgba(255,255,255,.55);
  /* Centring and the pop are the SAME transform, so they cannot fight. */
  transform:translate(-50%,0) scale(1);
  transform-origin:50% 100%;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),
             box-shadow .3s ease;
  animation:iwscrownsheen 5.5s ease-in-out infinite;
}
.iwspw__crown svg{
  width:13px;height:13px;flex:0 0 13px;
  fill:#fff;opacity:.9;  /* L7: was #3B1D02 (2.56:1 on the badge); white matches the label the rest of this rule already fixed */
}
/* The pop, fired when the reveal system adds .is-in to the SECTION. It is an
   animation only, never a hidden default state: .is-in lands on the Elementor
   container, not on the grid, and a badge that depends on a class arriving to
   become visible is one scroll-handler bug away from never appearing at all.
   The whole section is already at opacity 0 until it is revealed, so there is
   nothing to hide here anyway. */
.is-in .iwspw__crown{
  animation:iwscrownpop .52s cubic-bezier(.34,1.56,.64,1) .18s both,
            iwscrownsheen 5.5s ease-in-out 1.1s infinite;
}
.iwspw__card--lead:hover .iwspw__crown{
  transform:translate(-50%,-3px) scale(1.045);
  box-shadow:0 16px 32px -8px rgba(217,119,6,.75),
             0 2px 6px -2px rgba(59,29,2,.4),
             inset 0 1px 0 rgba(255,255,255,.6);
}
@keyframes iwscrownpop{
  0%  {opacity:0;transform:translate(-50%,8px) scale(.78);}
  62% {opacity:1;transform:translate(-50%,-3px) scale(1.04);}
  100%{opacity:1;transform:translate(-50%,0) scale(1);}
}
@keyframes iwscrownsheen{
  0%,72%,100%{background-position:0% 0;}
  86%        {background-position:100% 0;}
}
@media (prefers-reduced-motion:reduce){
  .iwspw__crown,
  .is-in .iwspw__crown{
    animation:none;opacity:1;transform:translate(-50%,0) scale(1);
  }
}

/* ---- Academy: the SpotlightCard hover --------------------------------------
   reactbits.dev/components/spotlight-card. Same mechanism: a radial gradient
   parked at the cursor, revealed on hover and focus-within.

   It reuses --glow-x / --glow-y, which iws-bento.js is already writing on every
   card in this grid on pointermove, so the effect costs no new listener and no
   new per-frame work. Upstream keeps its own onMouseMove per card; here that
   would be a second handler doing identical arithmetic. */
.iwspw__card--lead::after{
  content:"";position:absolute;inset:0;z-index:0;
  border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--glow-x,50%) var(--glow-y,50%),
    rgba(217,119,6,.30) 0%,
    rgba(217,119,6,.14) 34%,
    transparent 68%);
  opacity:0;transition:opacity .45s ease;
}
.iwspw__card--lead:hover::after,
.iwspw__card--lead:focus-within::after{opacity:1;}
/* "make it change colour into gradient": the flat Royal fill warms toward the
   amber corner on hover, so the card itself answers the cursor. */
.iwspw__card--lead{
  background-image:linear-gradient(150deg,#0A1776 0%,#13266B 100%);
  transition:background-image .5s ease,box-shadow .32s ease,transform .28s cubic-bezier(.22,.61,.36,1);
}
.iwspw__card--lead:hover{
  background-image:linear-gradient(150deg,#13266B 0%,#0A1776 100%);
}
/* Everything inside has to sit above the spotlight layer.
   NOT the badge. `position:relative` here has the same specificity as
   `.iwspw__crown` and comes later in the file, so it silently won the cascade
   and turned the badge from a floating pill into an ordinary grid item: it
   stretched to the full card width AND took a row of the nine-row subgrid, so
   every line of Academy's content sat one row lower than Bridge's and
   Foundation's. That is the wide orange block, and the misalignment underneath
   it, in Burak's screenshot of 26 Jul. One selector, two bugs. */
.iwspw__card--lead > *:not(.iwspw__crown){position:relative;z-index:1;}

/* ==========================================================================
   ROUND FOUR (Burak, 26 Jul)
   ========================================================================== */

/* ---- Pathways: close the gap above the live-lesson rule --------------------
   "there is a lot of blank space between the text and the line underneath,
   shorten that distance a bit."

   Two things made it. The subtitle row is as tall as the tallest card's
   subtitle, which wraps to two lines, so Academy's one-liner leaves a whole
   line of slack under it; that slack is the price of the row alignment and
   stays. The rest was 28px of margin and padding stacked on the meter label,
   and that goes. */
.iwspw__mlab{margin:2px 0 9px;padding:11px 0 0;}
.iwspw__line{margin-bottom:2px;}

/* ---- A real school: the pin ------------------------------------------------
   The sticky box is the height of the VISIBLE band (viewport minus the
   announcement bar and header), and the panel is centred inside it. Sticking
   the panel itself by its top edge can only ever hang it off the header, which
   is what Burak saw. No transform is used: a transform on a sticky element
   shifts it visually at both ends of its travel, and it would also make this a
   containing block for anything inside. */
/* Burak, 26 Jul: "make sure the video tile on the left stays centre aligned
   horizontally on the left on the page always... the video tile should not move
   at all when the texts are being scrolled".

   MEASURED before this change: the tile was fixed for only 3 of 11 scroll
   samples and drifted 1081px in total, and when it did pin it sat at 437px
   against a viewport centre of 370px. That 67px is exactly half of the old
   (bar + 92px) top offset, because a box offset from the top by X and sized
   100svh - X has its centre X/2 below the viewport centre.

   top:0 with height:100svh puts the tile's centre on the viewport's centre
   exactly, and pins it as soon as the grid's top reaches the viewport top
   rather than 134px later. The step trigger line in iws-global.js moves to
   0.5 to match; the two numbers have to agree or the text never lines up with
   the tile it is describing. */
.iwsreal__pin{
  position:sticky;
  top:0;
  height:100svh;
  display:flex;align-items:center;
  align-self:start;
}
.iwsreal__media{
  position:relative;      /* no longer the sticky element */
  top:auto;
  width:100%;
}
/* The buttons had the last reason and the pinned panel pressing straight onto
   them. Burak: "the cta buttons dont have room to breathe after scroll
   animation". */
.iwsreal__foot{margin-top:clamp(46px,7vh,84px);padding-bottom:clamp(56px,8vh,96px);}

@media (max-width:900px){
  /* One column on a phone: pinning a panel above the text it belongs to just
     eats the screen. */
  .iwsreal__pin{position:static;height:auto;display:block;}
}

/* ---- Stats bar: a gradient, not a flat fill --------------------------------
   "the solid colour should be gradient blue, 2 different colours/shades of
   blue". Royal to a lighter royal and back, on the diagonal, which keeps it
   inside the dark system rather than introducing a new colour. The bridge
   sentence underneath sits ON this panel, so it is white: it was inheriting
   the light-section slate and reading as a smudge. */
.iws-stats,.iws-numbers,.iwsnum,
.elementor-element-19e7f7f,
.elementor-element-19e7f7f > .e-con-inner{
  background-image:linear-gradient(148deg,#0A1776 0%,#16309B 52%,#0A1776 100%)!important;
  background-color:transparent!important;
}
.elementor-element-19e7f7f .iwsbr__txt,
.elementor-element-19e7f7f .iwsbr,
.elementor-element-19e7f7f .iwsbr:hover .iwsbr__txt{color:#FFFFFF;}
.elementor-element-19e7f7f .iwsbr__line{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.55));}
.elementor-element-19e7f7f .iwsbr__num{
  color:#FFFFFF;border-color:rgba(255,255,255,.55);background:transparent;
}
.elementor-element-19e7f7f .iwsbr__arw{color:#FFFFFF;}

/* ==========================================================================
   TESTIMONIAL RAIL  (.iwsvt)  — "Hear it straight from our families"
   Replaces the legacy .vts widget, which carried its own 4KB of inline CSS and
   a script that hijacked every click on the page. A card here is an ordinary
   link to the short, and iws-global.js opens it in the site-wide lightbox.
   ========================================================================== */
.iwsvt{
  background-image:linear-gradient(176deg,#F8FAFC 0%,#FFFFFF 46%,#F8FAFC 100%);
  padding:70px 0 0;
  width:100%;flex:1 0 100%;align-self:stretch;
}
.iwsvt *{box-sizing:border-box;}
.iwsvt__in{max-width:1180px;margin:0 auto;padding:0 24px;text-align:center;}
/* The house eyebrow, the same one Pathways and the dome use. It was rendering
   in a gold that is not an IWS colour, inherited from the legacy stylesheet;
   this is the branded treatment (Sky Blue, Sora, wide caps). */
.iwsvt__ey{
  display:block;
  font-family:var(--iws-font-display);
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--iws-sky,#0067E0);margin:0 0 14px;
}
.iwsvt h2{
  font-family:var(--iws-font-display)!important;
  font-size:clamp(27px,3.4vw,40px);font-weight:700;line-height:1.25;
  color:var(--iws-royal,#0A1776);margin:0 0 16px;letter-spacing:-.015em;
}
.iwsvt__sub{
  font-family:var(--iws-font-body);
  font-size:17px;line-height:1.65;color:#475569;max-width:52ch;margin:0 auto;
}

/* ---- the filter chips ----
   Gradient fills, per Burak's standing instruction that no background or CTA
   background is a flat colour. The resting chip is a white-to-mist ramp so it
   still reads as a control; the selected one is Royal to Sky. */
.iwsvt__chips{
  display:flex;justify-content:center;flex-wrap:wrap;gap:10px;
  margin:26px 0 0;
}
.iwsvt__chip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--iws-font-display);
  font-size:14px;font-weight:600;letter-spacing:.01em;
  color:var(--iws-royal,#0A1776);
  padding:11px 20px;border-radius:999px;cursor:pointer;
  border:1px solid #DCE4F2;
  background-image:linear-gradient(160deg,#FFFFFF 0%,#EAF1FF 100%);
  box-shadow:0 6px 16px -10px rgba(10,23,118,.4);
  transition:transform .22s var(--iws-ease),box-shadow .22s ease,
             border-color .22s ease,color .22s ease;
}
.iwsvt__chip:hover{transform:translateY(-2px);border-color:var(--iws-sky,#0067E0);}
.iwsvt__chip:focus-visible{outline:2px solid var(--iws-sky,#0067E0);outline-offset:3px;}
.iwsvt__chip.is-on{
  color:#FFFFFF;border-color:transparent;
  background-image:linear-gradient(120deg,var(--iws-royal,#0A1776) 0%,var(--iws-sky,#0067E0) 100%);
  box-shadow:0 12px 26px -12px rgba(10,23,118,.65);
}
.iwsvt__count{
  font-size:11.5px;font-weight:700;line-height:1;
  padding:3px 7px;border-radius:999px;
  background:rgba(10,23,118,.08);color:var(--iws-royal,#0A1776);
}
.iwsvt__chip.is-on .iwsvt__count{background:rgba(255,255,255,.22);color:#FFFFFF;}

/* ---- the rail ---- */
.iwsvt__wrap{position:relative;max-width:1180px;margin:34px auto 0;padding:0 52px;}
.iwsvt__row{
  display:flex;gap:20px;overflow-x:auto;padding:8px 4px 20px;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:#b9c4ee transparent;
}
.iwsvt__row::-webkit-scrollbar{height:8px;}
.iwsvt__row::-webkit-scrollbar-thumb{background:#b9c4ee;border-radius:8px;}
.iwsvt__card{
  flex:0 0 auto;width:230px;aspect-ratio:9/16;position:relative;
  border-radius:18px;overflow:hidden;scroll-snap-align:start;
  background:var(--iws-royal,#0A1776);text-decoration:none;display:block;
  box-shadow:0 12px 28px -14px rgba(10,23,118,.5);
  transition:transform .28s var(--iws-ease),box-shadow .28s ease,opacity .3s ease;
}
.iwsvt__card:hover{transform:translateY(-5px);box-shadow:0 22px 44px -18px rgba(10,23,118,.6);}
.iwsvt__card:focus-visible{outline:2px solid var(--iws-sky,#0067E0);outline-offset:3px;}
.iwsvt__card[hidden]{display:none;}
/* Taller than the tile, and pulled up. Several of these shorts have their
   subtitles burned into the picture, and YouTube's vertical thumbnail keeps
   them: "...require far" and "...courses." were landing exactly on the name
   line and reading as our own copy. Losing the bottom tenth of the frame takes
   the subtitle band with it, and a talking head sits high enough that nothing
   of the person is lost. */
.iwsvt__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
/* The scrim runs to fully opaque, not to 88%.
   Several of these shorts have their subtitles burned into the picture and
   YouTube's thumbnail keeps them, so "...require far" and "...courses." were
   sitting on the name line and reading as our own copy. Cropping the frame was
   tried first and only moved the problem: subtitles are not at a fixed height,
   so a tighter crop put them straight back on the name. Burying the bottom
   quarter is the fix that holds whatever the frame happens to contain, and it
   makes the name and role more legible anyway. */
.iwsvt__card::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(8,13,54,0) 38%,
    rgba(8,13,54,.55) 58%,
    rgba(8,13,54,.94) 74%,
    rgba(8,13,54,1) 82%,
    rgba(8,13,54,1) 100%);
}
.iwsvt__play{
  position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background-image:linear-gradient(160deg,#FFFFFF 0%,#EAF1FF 100%);
  box-shadow:0 8px 20px -6px rgba(4,8,28,.5);
  transition:transform .22s var(--iws-ease);
}
.iwsvt__play svg{width:22px;height:22px;fill:var(--iws-royal,#0A1776);margin-left:3px;}
.iwsvt__card:hover .iwsvt__play{transform:translate(-50%,-50%) scale(1.09);}
.iwsvt__meta{position:absolute;left:0;right:0;bottom:0;padding:0 15px 16px;z-index:2;}
.iwsvt__name{
  display:block;color:#fff;font-family:var(--iws-font-display);
  font-weight:700;font-size:15.5px;line-height:1.2;
}
.iwsvt__role{
  display:block;color:#C7CEEA;font-family:var(--iws-font-body);
  font-size:12px;margin-top:4px;line-height:1.35;
}
.iwsvt__nav{
  position:absolute;top:calc(50% - 10px);transform:translateY(-50%);z-index:6;
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #DCE4F2;color:var(--iws-royal,#0A1776);
  background-image:linear-gradient(160deg,#FFFFFF 0%,#EAF1FF 100%);
  box-shadow:0 8px 20px -10px rgba(10,23,118,.45);
  transition:transform .2s ease,border-color .2s ease,opacity .2s ease;
}
.iwsvt__nav:hover{border-color:var(--iws-royal,#0A1776);transform:translateY(-50%) scale(1.07);}
.iwsvt__nav:focus-visible{outline:2px solid var(--iws-sky,#0067E0);outline-offset:3px;}
.iwsvt__nav svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.iwsvt__nav--prev{left:4px;}
.iwsvt__nav--next{right:4px;}

@media (max-width:768px){
  .iwsvt{padding-top:52px;}
  .iwsvt__wrap{padding:0 16px;}
  .iwsvt__card{width:196px;}
  .iwsvt__nav{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .iwsvt__card,.iwsvt__chip,.iwsvt__play,.iwsvt__nav{transition:none;}
  .iwsvt__row{scroll-behavior:auto;}
}

/* ---- Arc: it is a carousel you grab, not a set of links ------------------- */
.iwsarc__card{cursor:grab;}
.iwsarc.is-dragging .iwsarc__card{cursor:grabbing;}
.iwsarc__card *{-webkit-user-drag:none;user-select:none;}

/* The hero's secondary CTA now starts the scroll instead of leaving the page. */
.iwshero__btn--down .arw--down{display:inline-flex;align-items:center;margin-left:2px;}
.iwshero__btn--down .arw--down svg{width:17px;height:17px;animation:iwsdownnudge 2.2s ease-in-out infinite;}
@keyframes iwsdownnudge{0%,100%{transform:translateY(0);}50%{transform:translateY(3px);}}
@media (prefers-reduced-motion:reduce){.iwshero__btn--down .arw--down svg{animation:none;}}

/* ---- pathway switch ---- */

/* ---- the stage ---- */

/* The week-spanning band: Bridge's five movable lessons, and Foundation's
   recorded course. Dashed, because neither sits on a fixed day. */

/* The three facts under the week, straight from the /pathways/ table. A
   definition list, because that is what it is; without these rules the browser
   renders it as an unstyled stack of eight lines. */

/* ---- the same on every pathway ---- */

@media (max-width:880px){
  /* Five columns of 12px text is unreadable on a phone. The week becomes a
     horizontal scroller with the days at a legible width. */
}


/* ---- the year-group axis + the platform screens (26 Jul) ------------------
   Two questions, in the order a parent thinks in: who is the child, then how
   much structure. The year group sets what they study; the pathway sets the
   shape of the week. Then the section ends on the actual product rather than
   on a promise. */

/* ---- the platform ---- */
/* A browser chrome around the screenshot, so it reads as a product and not as
   a stock illustration dropped into the page. */


/* ==========================================================================
   THE "WHY IT IS A SCHOOL" EXPLORER  (.iwsxp)
   Replaces the sticky-media scrollytelling (.iwsreal) on 26 Jul 2026.

   WHY IT WAS REPLACED, not repaired. In a sticky-media scrollytelling the
   media pins at the viewport centre while step 1 sits at the TOP of its
   column, so at section entry the two are on screen at once and cannot line
   up; step 4 is the mirror, reaching centre only after the media has run out
   of grid area. MEASURED on staging: the tile held still for 3 of 11 scroll
   samples, drifted 1081px, and the active step sat up to 261px away from the
   film it described. The first and last of four steps are structurally
   unalignable in that pattern. The only in-pattern fix is half a viewport of
   padding at each end, which lengthens the page.

   Here the media and its copy are SIBLINGS IN ONE ROW, so there is no scroll
   position at which they can disagree. Alignment is true by construction
   rather than by tuning. The section also drops from roughly four screens to
   one, which matters while landing-page experience is the binding Ad Rank
   constraint.

   It is also the interaction language the page already speaks: the testimonial
   rail and the week section are both chip switchers. This section was the odd
   one out.
   ========================================================================== */
.iwsxp{padding:clamp(64px,9vw,110px) 0 clamp(56px,8vw,96px);background:#fff;}
.iwsxp__in{max-width:820px;margin:0 auto clamp(30px,4vw,44px);padding:0 24px;text-align:center;box-sizing:border-box;}
.iwsxp__ey{
  display:block;font-family:var(--iws-font-display);
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--iws-sky,#0067E0);margin-bottom:14px;
}
.iwsxp__in h2{
  font-family:var(--iws-font-display)!important;
  font-size:clamp(27px,4vw,44px);font-weight:800;line-height:1.16;
  color:var(--iws-royal,#0A1776);margin:0 0 14px;text-wrap:balance;
}
.iwsxp__sub{
  font-family:var(--iws-font-body);
  font-size:clamp(15.5px,1.6vw,17px);line-height:1.62;color:#475569;margin:0;
}

/* ---- the tabs ---------------------------------------------------------- */
.iwsxp__tabs{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  max-width:1180px;margin:0 auto clamp(28px,4vw,40px);padding:0 24px;box-sizing:border-box;
}
.iwsxp__tab{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 18px 11px 12px;border-radius:12px;   /* mid radius, not a pill: §10 */
  border:1px solid rgba(10,23,118,.14);
  background:linear-gradient(180deg,#fff,#F8FAFC);
  font-family:var(--iws-font-display);
  font-size:14px;font-weight:600;color:#3E4A6B;
  cursor:pointer;
  transition:border-color .2s var(--iws-ease,cubic-bezier(.22,.61,.36,1)),
             color .2s var(--iws-ease,cubic-bezier(.22,.61,.36,1)),
             box-shadow .2s var(--iws-ease,cubic-bezier(.22,.61,.36,1));
}
.iwsxp__tab:hover{border-color:rgba(0,103,224,.42);color:var(--iws-royal,#0A1776);}
.iwsxp__tab:focus-visible{outline:3px solid var(--iws-sky,#0067E0);outline-offset:3px;}
.iwsxp__tab.is-on{
  border-color:transparent;color:#fff;
  background:linear-gradient(120deg,var(--iws-royal,#0A1776),var(--iws-sky,#0067E0));
  box-shadow:0 8px 22px rgba(10,23,118,.20);
}
/* The number badge. Amber per §3.5: white type only ever on #B45309 or darker,
   because #D97706 measures 3.19:1 and fails the 4.5:1 bar. */
.iwsxp__n{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;flex:0 0 28px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  color:var(--iws-amber-ink,#B45309);
  border:1px solid rgba(217,119,6,.38);
  background:transparent;
  transition:background .2s var(--iws-ease,cubic-bezier(.22,.61,.36,1)),color .2s,border-color .2s;
}
.iwsxp__tab.is-on .iwsxp__n{
  background:linear-gradient(135deg,var(--iws-amber-ink,#B45309),#7C2D12);
  border-color:transparent;color:#fff;
}

/* ---- the stage: media and copy are SIBLINGS, which is the whole point --- */
.iwsxp__stage{
  max-width:1180px;margin:0 auto;padding:0 24px;box-sizing:border-box;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,64px);align-items:center;
}
.iwsxp__media{
  position:relative;aspect-ratio:16/9;   /* reserved, so swapping cannot shift layout */
  border-radius:18px;overflow:hidden;background:#0B1444;
  box-shadow:0 26px 60px rgba(10,23,118,.20);
}
.iwsxp__fig{
  position:absolute;inset:0;margin:0;
  opacity:0;transform:scale(1.03);pointer-events:none;
  transition:opacity .26s var(--iws-ease,cubic-bezier(.22,.61,.36,1)),
             transform .42s var(--iws-ease,cubic-bezier(.22,.61,.36,1));
}
.iwsxp__fig.is-on{opacity:1;transform:scale(1);pointer-events:auto;}
.iwsxp__fig img,.iwsxp__fig video{width:100%;height:100%;object-fit:cover;display:block;}
.iwsxp__fig video{object-fit:contain;background:#0B1444;}

.iwsxp__copy{position:relative;}
.iwsxp__panel{
  opacity:0;transform:translateY(8px);
  position:absolute;inset:0;pointer-events:none;
  transition:opacity .24s var(--iws-ease,cubic-bezier(.22,.61,.36,1)),
             transform .32s var(--iws-ease,cubic-bezier(.22,.61,.36,1));
}
.iwsxp__panel.is-on{opacity:1;transform:none;position:relative;pointer-events:auto;}
.iwsxp__kicker{
  display:block;font-family:var(--iws-font-display);
  font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:#5A6488;margin-bottom:10px;
}
.iwsxp__panel h3{
  font-family:var(--iws-font-display)!important;
  font-size:clamp(22px,2.5vw,30px);font-weight:700;line-height:1.24;
  color:var(--iws-royal,#0A1776);margin:0 0 12px;
}
.iwsxp__panel p{
  font-family:var(--iws-font-body);
  font-size:16.5px;line-height:1.68;color:#475569;margin:0;max-width:46ch;
}

.iwsxp__foot{
  max-width:1180px;margin:clamp(36px,5vw,56px) auto 0;padding:0 24px;
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;box-sizing:border-box;
}
.iwsxp__go{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--iws-font-display);
  font-size:15px;font-weight:700;text-decoration:none;
  padding:15px 28px;border-radius:12px;
  color:#fff;background:linear-gradient(120deg,var(--iws-royal,#0A1776),var(--iws-sky,#0067E0));
  box-shadow:0 12px 28px rgba(10,23,118,.22);
  transition:transform .2s var(--iws-ease,cubic-bezier(.22,.61,.36,1)),box-shadow .2s;
}
.iwsxp__go:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(10,23,118,.28);}
.iwsxp__go--ghost{
  color:var(--iws-royal,#0A1776);background:#fff;
  border:1px solid rgba(10,23,118,.20);box-shadow:none;
}
.iwsxp__go--ghost:hover{border-color:var(--iws-sky,#0067E0);box-shadow:0 8px 20px rgba(10,23,118,.12);}

@media (max-width:900px){
  .iwsxp__stage{grid-template-columns:1fr;gap:26px;}
  .iwsxp__tabs{gap:8px;}
  .iwsxp__tab{padding:9px 14px 9px 10px;font-size:13px;}
  .iwsxp__n{width:25px;height:25px;flex-basis:25px;font-size:11px;}
  /* Absolute panels cannot size a grid row on their own, so on phones the
     copy column gets a floor and the panels stay in flow. */
  .iwsxp__copy{min-height:0;}
}
@media (prefers-reduced-motion:reduce){
  .iwsxp__fig,.iwsxp__panel,.iwsxp__tab,.iwsxp__n,.iwsxp__go{transition:none;}
  .iwsxp__fig{transform:none;}
  .iwsxp__panel{transform:none;}
}


/* ---- "click to watch" affordance on the explorer film ------------------- */
.iwsxp__cue{
  display:flex;align-items:flex-end;gap:8px;justify-content:flex-start;
  margin:0 0 6px;padding-left:6px;
  font-family:var(--iws-font-display);
  font-size:13px;font-weight:600;color:var(--iws-amber-ink,#B45309);
}
.iwsxp__cue svg{flex:0 0 auto;margin-bottom:-2px;}
.iwsxp__media{cursor:pointer;}
.iwsxp__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;z-index:2;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition:transform .24s var(--iws-ease,cubic-bezier(.22,.61,.36,1)),
             box-shadow .24s var(--iws-ease,cubic-bezier(.22,.61,.36,1)),
             opacity .2s var(--iws-ease,cubic-bezier(.22,.61,.36,1)),
             visibility .2s;
}
.iwsxp__play svg{margin-left:4px;}
.iwsxp__media:hover .iwsxp__play{transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 14px 38px rgba(0,0,0,.34);}

/* The play badge and the cue belong to the FILM only. Only tab 01 carries a
   <video>; tabs 02 to 04 are still images, and a play badge over a still is a
   promise the click cannot keep (the handler correctly no-ops, so the visitor
   just gets nothing).
   .is-quiet is added by iws-home.js whenever the active figure has no video.
   Note the default is VISIBLE, not hidden: the server renders tab 01 active,
   so the pre-JS state is already correct and nothing flashes in.
   The previous attempt here was `.iwsxp__fig:not(:first-child) ~ .iwsxp__play`,
   which never matched anything: `~` only looks FORWARD, and .iwsxp__play is
   the first child of .iwsxp__media, before all four figures. It also could not
   have worked in principle, because it tested document order rather than which
   tab is active. */
.iwsxp.is-quiet .iwsxp__play,
.iwsxp.is-quiet .iwsxp__cue{
  opacity:0;visibility:hidden;pointer-events:none;
}
.iwsxp.is-quiet .iwsxp__media{cursor:default;}
/* .iwsxp__play carries its opacity transition inside its own rule above, so
   this one must not restate it: an equal-specificity rule later in the file
   would drop the transform and box-shadow hover transitions. */
.iwsxp__cue{
  transition:opacity .2s var(--iws-ease,cubic-bezier(.22,.61,.36,1)),
             visibility .2s;
}
@media (prefers-reduced-motion:reduce){
  .iwsxp__play,.iwsxp__cue{transition:none;}
}

/* ============================================================================
   Hero rotator: reserve the line box. Added 30 Jul 2026.

   MEASURED DEFECT: on mobile the homepage scored CLS 0.1696, repeatedly, once
   per rotation (observed at t=11.5s, 19.3s, 21.9s, 29.7s, 32.3s, 40.1s, 42.7s,
   50.5s, 53.1s in one 53-second capture). The shifting element is
   .iwshero__inner, going [0,293,390,551] -> [0,271,390,573]: 22px taller, top
   edge 22px higher.

   ROOT CAUSE: .iwshero__rotate had min-height:0 and simply took the height of
   whatever phrase was showing. At 390px the phrases differ in wrap: a short one
   fits one line (22px), a longer one wraps to two (45px). Because .iwshero is
   `display:flex; align-items:flex-end`, the extra line pushes everything above
   it upward, so the whole hero jumps every time the words change.

   FIX: reserve two lines so the box cannot change size when the phrase does.
   2.8em is two lines at the 1.4 line-height, and scales with font-size rather
   than hardcoding 45px, so it survives a type-scale change.

   This is a layout reservation, not a visual change: nothing moves, and at
   widths where the phrase already wrapped to two lines it looks identical.
   ========================================================================== */
.iwshero__rotate {
  min-height: 2.8em;
}


/* ==========================================================================
   ROTATING PHRASE: ALWAYS ITS OWN LINE ON MOBILE.
   30 Jul 2026, Burak: "sometimes the rotating text is next to the text 'built
   for students who want' and sometimes under it... make it always under."

   .iwsrot is display:inline-flex, so the phrase flows inline and whether it
   lands beside the lead-in or below it depends purely on how long that
   phrase happens to be. At 390px "a live classroom" fits on the first line
   while "teachers who know them" wraps -- so the layout changed every time the
   word changed, which reads as a bug even though the box height was already
   pinned.

   display:flex makes the span block-level, so it always starts a new line.
   The 2.8em reservation above already accounts for two lines, so this does not
   reintroduce the layout shift that reservation was added to cure.

   Verified in-page across all four phrases before shipping: each sits at a
   22px offset (exactly one line-height) below the lead-in, each renders on a
   single line (22px tall), and the wrapper stays 45px for every phrase. */
@media (max-width: 900px) {
  .iwshero__rotate .iwsrot { display: flex; }
}

/* ── Hero eyebrow separator ─────────────────────────────────────────────────
   Added 2 Aug 2026 with the hero copy port. `.iwshero__eyebrow` already existed
   in this file (Sora 12px/700/.18em, uppercase, periwinkle) and had never been
   used in the markup, so only the divider between "Cambridge accredited" and
   "Ages 7 to 19" is new. A 1px rule rather than a pipe character, so a screen
   reader has nothing to read out.
   ⚠️ `iwshero__eybar` and `iwshero__lede` both need the RUCSS safelist entry
   `iwshero`, which is already covered by the `iws-hero` safelist line. */
.iwshero__eybar{
  display:inline-block;
  width:1px;
  height:11px;
  margin:0 9px;
  vertical-align:-1px;
  background:rgba(207,224,255,.45);
}

/* ── §4.3b at small widths: the marked phrase must not overflow its column ───
   Added 2 Aug 2026 with the hero copy port, and it is a MEASURED number, not a
   guess. "unlimited 1:1 support" renders 10.87x the font-size wide, and the hero
   copy column is the viewport minus 40px of gutter. The existing
   clamp(28px,9vw,36px) below 560px therefore put the mark 367px wide inside a
   335px column at 375px: 32px of overhang, invisible only because
   body{overflow-x:clip} was masking it, which is hiding the defect rather than
   fixing it. It did NOT wrap (the mark is inline-block) so a wrap test alone
   would have passed it.

   min(7.6vw,30px) clears the column at every width in the range:
     480px -> 30.0px, mark 326 in 440, headroom 114
     414px -> 30.0px, mark 326 in 374, headroom  48
     390px -> 29.6px, mark 322 in 350, headroom  28
     375px -> 28.5px, mark 310 in 335, headroom  25
     360px -> 27.4px, mark 298 in 320, headroom  22
   Headroom matters because the Sora Fallback face is up to ~8% wider during the
   font swap; a 3px clearance would flash an overhang on every cold load.
   Same specificity as the 560px rule above (0,1,1), so this wins on SOURCE
   ORDER only. Do not move it above that rule. */
@media (max-width:480px){
  .iwshero h1{font-size:min(7.6vw,30px);}
}

/* ── The eyebrow must not wrap and orphan "19" ───────────────────────────────
   2 Aug 2026. MEASURED, and the margin was only 4px, which is why it renders
   fine at 390 and wraps at 375: "CAMBRIDGE ACCREDITED | AGES 7 TO 19" needs
   339px at 12px/.18em, and the hero copy column is 335px at a 375px viewport
   (350px at 390px, where it just fits). The wrap put "19" alone on a second line.

   Measured alternatives at the same string:
     12px  /.18em -> 339px   (current, wraps at 375)
     11.5px/.16em -> 318px
     11px  /.14em -> 298px   <- chosen, 37px of headroom at 335px
   The extra headroom is deliberate: Sora Fallback runs up to ~8% wider than Sora
   during the font swap, so a 4px clearance would wrap on every cold load.

   ⚠️ Measuring a wrap on a BLOCK element: getClientRects().length is always 1 on
   a <p>, so it cannot detect a text wrap. Compare a nowrap clone's width against
   the column width instead, which is what produced the numbers above. */
@media (max-width:480px){
  .iwshero__eyebrow{font-size:11px;letter-spacing:.14em;}
  .iwshero__eybar{margin:0 7px;}
}

/* ── The hero copy must not cross the viewport centre line ───────────────────
   Burak, 2 Aug 2026, with a red line drawn down the middle of the screenshot.
   The copy column was max-width:min(820px,100%) starting at x=147 on a 1425px
   viewport, so every line ran to x=967: 254px PAST the centre at 712.5, across
   the students in the photograph.

   THE 566px IS DERIVED, NOT PICKED. The copy's left edge is the 1180 container's
   left edge plus its own 24px padding, so above the container breakpoint:
       allowed = 50vw - ((100vw - 1180)/2 + 24) = 590 - 24 = 566px, a constant.
   Between 901px and the container breakpoint the container IS the viewport, the
   left edge is just the 24px, and the allowance is 50vw - 24. min() covers both
   regimes in one declaration.

   ⚠️ SCOPED TO min-width:901px, AND THAT SCOPE IS LOAD-BEARING, NOT TIDINESS.
   The mobile resets live in `@media (max-width:900px)` and `@media (max-width:520px)`
   EARLIER in this file at the same specificity (0,1,1), and media queries add no
   specificity — so an unscoped rule appended here WINS AGAINST THEM ON SOURCE
   ORDER. Shipped that way for one minute and measured it: at a 360px viewport the
   copy column computed 156px (min(566, 50vw-24)) and the h1 took the desktop
   clamp's 32px floor, leaving the marked phrase 348px wide in a 156px column,
   192px of overhang. Below 901px the hero stacks over the photograph and the copy
   is meant to be full width; there is no centre to keep clear of.

   The h1 cap comes down 52 -> 48px and 4.2 -> 4.0vw at the same time, because
   "unlimited 1:1 support" renders 10.87x the font-size wide: 565px at 52px would
   leave 1px of clearance in a 566px column. At 48px it is 522px, leaving 44px.
   Measured headroom: 1425px -> 44, 1200px -> 44, 1143px -> 50, 1000px -> 41,
   901px -> 35. */
@media (min-width:901px){
  .iwshero__copy{max-width:min(566px, calc(50vw - 24px));}
  .iwshero h1{font-size:clamp(32px,4.0vw,48px);}
}