/* ==========================================================================
   BMIT — Design System v2  ·  "Warm editorial"
   --------------------------------------------------------------------------
   Palette is locked to BMIT's real brand:
     cream #FBF8F0 · orange #F79635 · rust #9E3B1B · brown #473730 · ink #2B2A33
   Orange is an ACCENT, never a field. Cream is the ground. Brown is the voice.

   Rules of the system
     1. One accent. Orange appears on primary CTAs, active states, the mark,
        and small rules. Nowhere else.
     2. Hairlines, not boxes. Structure comes from 1px warm rules and space.
     3. Photography is matted, never bled edge-to-edge except where declared.
     4. Motion is transform/opacity only, and always gated by reduced-motion.
     5. Type does the shouting. Colour never does.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* — ground ——————————————————————————————
     White leads, cream supports, brown anchors. This is the ratio measured on
     BMIT's own /ht2 reference page (white 154 blocks : cream 56 : brown 119),
     not an invention. Cream is a band colour, never the default page. */
  --paper:      #FFFFFF;   /* page ground */
  --paper-2:    #F5F2EB;   /* cream band — exact value from the live site */
  --paper-3:    #FBF8F0;   /* softer cream band */
  --paper-4:    #EFE9DC;   /* wells, insets */
  --card:       #FFFFFF;

  /* — ink ———————————————————————————————
     Every value below is checked against white AND cream at >= 4.5:1. */
  --ink:        #2F2B36;   /* primary text — value from the live site */
  --ink-2:      #55505C;   /* secondary  — 7.9:1 on white */
  --ink-3:      #6B6572;   /* tertiary   — 5.5:1 on white, 4.9:1 on cream */
  --brown:      #473730;   /* logo brown — headings, dark bands */
  --brown-2:    #6E584D;

  /* — accent —————————————————————————————
     --orange is a FIELD colour (buttons, blocks, big display). It is never
     text on a light ground: at 2.1:1 it is unreadable. Text uses --orange-ink. */
  --orange:     #F79635;
  --orange-ink: #9E5205;   /* orange for text — 5.7:1 on white, 5.0:1 on cream */
  --orange-dp:  #C96A0C;   /* headline accent — 3.8:1 on white, 3.3:1 on cream */
  --orange-hover:#E5811C;
  --orange-tint:#FBD9B7;   /* = rgba(247,150,53,.30) on white, from the reference */
  --orange-soft:#FDF0E1;
  --orange-deep:#8A4704;   /* orange text ON an orange tint — 5.2:1 */
  --orange-line:#F2D3AC;
  --rust:       #9E3B1B;
  --green:      #1FA838;
  --green-ink:  #14701F;
  --green-tint: #E6F4E8;

  /* — lines —————————————————————————————— */
  --line:       #E9E3D8;
  --line-2:     #D6CCB8;
  --line-dark:  rgba(251,248,240,.18);
  --on-brown:   #C9B5A6;   /* secondary text on brown — 5.7:1 */

  /* — depth —————————————————————————————— */
  --sh-sm: 0 2px 8px -4px rgba(43,42,51,.18);
  --sh-md: 0 18px 44px -28px rgba(43,42,51,.28), 0 4px 12px -8px rgba(43,42,51,.10);
  --sh-lg: 0 40px 90px -46px rgba(43,42,51,.34), 0 10px 28px -18px rgba(43,42,51,.14);

  /* — type ———————————————————————————————
     One sans, five weights. The reference site sets headlines in a heavy
     grotesque; Manrope at 800 with tight tracking is the closest free match
     and keeps the whole site on a single, fast-loading family. */
  --sans:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: var(--sans);   /* legacy alias — nothing should rely on a serif now */

  /* — motion ————————————————————————————— */
  --ez:    cubic-bezier(.22,.61,.36,1);
  --ez-io: cubic-bezier(.65,0,.35,1);

  /* — geometry ——————————————————————————— */
  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;
  --gut:  clamp(20px, 5vw, 64px);
  --maxw: 1280px;
  /* Vertical rhythm. Section padding was up to 136px a side, which left
     270-360px of blank between sections on a wide screen and ~195px on a
     phone. These keep the gap between two sections' content at 88-144px. */
  --sec-y:       clamp(2.75rem, 4.5vw, 4.5rem);
  --sec-y-tight: clamp(2rem, 3vw, 3rem);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(16px,.42vw + 15px,17.5px);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:2.5px solid var(--orange-dp);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:840px}
.wrap--mid{max-width:1060px}
section{padding-block:var(--sec-y)}
.sec--tight{padding-block:var(--sec-y-tight)}
.sec--paper2{background:var(--paper-2)}
.sec--dark{background:var(--brown);color:#F6F1E8}
.sec--rule{border-top:1px solid var(--line)}
.stack > * + *{margin-top:var(--s,1rem)}

/* generic responsive columns.
   Every track is minmax(0,1fr): a bare 1fr floors at min-content, which lets
   long words and placeholder captions push tracks past the container. */
.cols{display:grid;gap:clamp(1.5rem,4vw,3.5rem)}
.cols--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cols--split{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}
.cols--editorial{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
.cols--aside{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(2rem,6vw,5rem)}
@media (max-width:900px){
  .cols--2,.cols--3,.cols--4,.cols--split,.cols--editorial,.cols--aside{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){ .cols--3.keep-2,.cols--4.keep-2{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* --------------------------------------------------------------------------
   4. TYPE
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,.display{
  font-family:var(--sans);
  font-weight:800;
  color:var(--ink);
  letter-spacing:-.03em;
  line-height:1.08;
  text-wrap:balance;
}
h1,.h1{font-size:clamp(2.4rem,5.6vw,4.4rem);letter-spacing:-.038em;line-height:1.03}
h2,.h2{font-size:clamp(1.75rem,3.2vw,2.6rem);letter-spacing:-.033em;line-height:1.08}
h3,.h3{font-size:clamp(1.24rem,1.9vw,1.55rem);letter-spacing:-.022em;line-height:1.22;font-weight:700}
h4,.h4{font-size:1.06rem;letter-spacing:-.016em;line-height:1.3;font-weight:700}

/* The emphasis device: the turn in a headline goes orange, exactly as the
   reference page does it. Large + heavy, so 3:1 is the bar and it clears it. */
em.turn,.turn{font-style:normal;color:var(--orange-ink)}
h1 .turn,h2 .turn,.pull .turn{color:var(--orange-dp)}

p{text-wrap:pretty}
.lede{
  font-size:clamp(1.05rem,1.3vw,1.2rem);
  line-height:1.55;color:var(--ink-2);max-width:60ch;font-weight:400;
}
.lede--serif{font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.45;color:var(--ink-2);font-weight:500}
.body-lg{font-size:1.06rem;line-height:1.7;color:var(--ink-2)}
.muted{color:var(--ink-3)}
.small{font-size:.9rem;line-height:1.55}
.tiny{font-size:.8rem;line-height:1.5}

/* eyebrow: the section label. letterspaced sans, orange, with a lead rule. */
.eyebrow{
  display:inline-flex;align-items:center;gap:.65rem;
  font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.19em;color:var(--orange-ink);
  margin-bottom:.9rem;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange);flex:none;border-radius:2px}
.eyebrow--plain::before{display:none}
.sec--dark .eyebrow{color:var(--orange)}

/* numeral used as a structural marker */
.numeral{font-weight:800;font-size:clamp(1.4rem,2.2vw,1.85rem);color:var(--orange-ink);line-height:1;letter-spacing:-.03em}

/* editorial pull quote */
.pull{
  font-weight:800;font-size:clamp(1.4rem,2.8vw,2.15rem);
  line-height:1.18;letter-spacing:-.032em;color:var(--ink);text-wrap:balance;
}
.pull em{font-style:normal;color:var(--orange-dp)}

/* On brown. These must stay separate from the .cta rule below — merging them
   once already flipped dark-band headings to near-black at 1.2:1. */
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4,.sec--dark .pull{color:#FBF6EC}
.sec--dark p,.sec--dark .lede,.sec--dark .step p{color:#DDD0C2}
/* On cream. */
.cta h1,.cta h2,.cta .pull{color:var(--ink)}
.sec--dark .turn{color:var(--orange)}
.cta .turn{color:var(--orange-dp)}
.sec--dark .eyebrow{color:var(--orange)}
.cta .eyebrow{color:var(--orange-ink)}
/* .cta sets a cream `color` on the section, so plain text inherits correctly.
   Only classes that hard-code a dark colour need an on-dark override — and
   .panel resets itself back to ink, so nothing here may out-specify it. */
.cta .lede{color:var(--ink-2)}
.cta .panel h1,.cta .panel h2,.cta .panel h3,.cta .panel h4{color:var(--brown)}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--sans);font-weight:700;font-size:.95rem;letter-spacing:-.005em;
  padding:.95rem 1.5rem;border-radius:999px;white-space:nowrap;
  transition:background-color .35s var(--ez),color .35s var(--ez),
             box-shadow .35s var(--ez),transform .35s var(--ez),border-color .35s var(--ez);
  border:1.5px solid transparent;cursor:pointer;text-align:center;
}
.btn svg{width:16px;height:16px;flex:none;transition:transform .35s var(--ez)}
.btn:active{transform:translateY(1px)}

/* On the narrowest phones a long label cannot stay on one line without
   running out of its section, so let it wrap. */
@media (max-width:400px){ .btn{white-space:normal;max-width:100%} }
.btn--primary{background:var(--orange);color:#3A2409;box-shadow:0 12px 26px -14px rgba(247,150,53,.85)}
.btn--primary:hover{background:var(--orange-hover);box-shadow:0 16px 32px -14px rgba(247,150,53,.95)}
.btn--primary:hover svg{transform:translateX(3px)}

.btn--ink{background:var(--brown);color:#FBF8F0}
.btn--ink:hover{background:#5A463D}
.btn--ink:hover svg{transform:translateX(3px)}

.btn--ghost{border-color:var(--line-2);color:var(--brown);background:transparent}
.btn--ghost:hover{border-color:var(--brown);background:rgba(71,55,48,.04)}
.btn--ghost:hover svg{transform:translateX(3px)}

.btn--wa{background:#25D366;color:#08331A}
.btn--wa:hover{background:#1FBA59}

.sec--dark .btn--ghost{border-color:var(--line-dark);color:#FBF6EC}
.sec--dark .btn--ghost:hover{border-color:#FBF6EC;background:rgba(251,248,240,.07)}

.btn--lg{padding:1.12rem 1.9rem;font-size:1rem}
.btn--sm{padding:.62rem 1.05rem;font-size:.86rem}
.btn--block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* text link with an animated rule */
.tlink{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem;
  color:var(--orange-ink);padding-bottom:3px;position:relative;
}
.tlink::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--orange);
  transform:scaleX(1);transform-origin:left;transition:transform .45s var(--ez);
}
.tlink:hover::after{transform:scaleX(0);transform-origin:right}
/* On touch these are ~25px tall against a 44px minimum. An invisible
   centred pseudo-element raises the hit area without changing the layout or
   pushing the underline away from the text. */
@media (pointer:coarse){
  .tlink::before{
    content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px;
  }
}
.tlink svg{width:14px;height:14px;transition:transform .35s var(--ez)}
.tlink:hover svg{transform:translateX(4px)}
.sec--dark .tlink,.foot .tlink{color:var(--orange)}
.cta .tlink{color:var(--orange-ink)}

/* --------------------------------------------------------------------------
   6. BRAND MARK + MOTIFS
   -------------------------------------------------------------------------- */
.mark{width:auto;height:34px;flex:none}
.brand{display:inline-flex;align-items:center;gap:.7rem}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{font-weight:800;font-size:1.28rem;letter-spacing:-.03em;color:var(--brown)}
.brand__sub{font-family:var(--sans);font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.17em;color:var(--ink-3);margin-top:3px}
.sec--dark .brand__name,footer .brand__name{color:inherit}

/* the fan watermark — BMIT's own geometry, used as a ground motif */
.fan{position:absolute;pointer-events:none;color:var(--orange);opacity:.07;z-index:0}
.fan svg{width:100%;height:auto;display:block}

/* thin arc divider */
.arc-rule{display:block;width:100%;height:auto;color:var(--line-2);opacity:.9}

/* scrolling skills marquee — slow, thin, letterspaced */
.marquee{
  overflow:hidden;background:var(--brown);
  padding-block:1.15rem;position:relative;
}
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(40px,10vw,140px);z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--brown),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--brown),transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__grp{display:flex;align-items:center;flex:none}
.marquee__grp span{
  display:inline-flex;align-items:center;gap:1.6rem;padding-inline:1.6rem;
  font-size:.82rem;font-weight:700;letter-spacing:.02em;color:#F3E9DD;
  white-space:nowrap;
}
.marquee__grp span::after{content:"";width:5px;height:5px;border-radius:99px;background:var(--orange);flex:none}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .marquee::before,.marquee::after{display:none}
}

/* --------------------------------------------------------------------------
   7. PHOTO SLOTS
   --------------------------------------------------------------------------
   Drop-in system. To use a real photo, put an <img> inside .ph — the
   placeholder body hides itself automatically. Nothing else to change.
       <figure class="ph ph--portrait"><img src="…" alt="…"></figure>
   -------------------------------------------------------------------------- */
/* width:100% is load-bearing. These carry an aspect-ratio, and where a parent
   also stretches them (height:100% in a gallery row) an auto width would be
   derived FROM that height — blowing the cell out sideways. */
.ph{
  /* display:block is load-bearing — several .ph are <span>s (inside <button>,
     where a <div> would be invalid), and inline boxes ignore width and
     aspect-ratio, collapsing the placeholder to 0×0. */
  display:block;
  position:relative;overflow:hidden;background:var(--paper-4);
  border-radius:var(--r);border:1px solid var(--line);
  width:100%;min-width:0;isolation:isolate;
}
.ph > img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* Absolutely positioned, not a grid cell: the caption text is longer than the
   narrow cells it sits in, and in-flow it would inflate the track. */
.ph__body{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:.45rem;text-align:center;padding:1.5rem 1.25rem;
}
.ph__body > *{max-width:100%}
.ph:has(img) .ph__body{display:none}
.ph__mark{width:34px;height:auto;color:var(--orange);opacity:.5;margin-bottom:.35rem}
.ph__id{
  font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.19em;
  color:var(--orange-ink);
}
.ph__desc{font-size:.86rem;line-height:1.4;color:var(--ink-2);max-width:26ch;font-weight:500}
.ph__spec{font-size:.7rem;color:var(--ink-3);letter-spacing:.04em;font-variant-numeric:tabular-nums}

.ph--portrait{aspect-ratio:4/5}
.ph--tall{aspect-ratio:3/4.4}
.ph--square{aspect-ratio:1/1}
.ph--land{aspect-ratio:4/3}
.ph--wide{aspect-ratio:16/9}
.ph--pano{aspect-ratio:21/9}

/* matted frame — the editorial treatment for hero + feature photography */
.matte{
  background:var(--card);padding:10px;border-radius:calc(var(--r) + 8px);
  box-shadow:var(--sh-lg);border:1px solid var(--line);position:relative;
}
.matte .ph{border-radius:var(--r-sm)}
.matte figcaption,.figcap{
  font-size:.76rem;color:var(--ink-3);letter-spacing:.03em;
  padding:.85rem .35rem .25rem;display:flex;gap:.6rem;align-items:baseline;
}
.figcap b{color:var(--brown-2);font-weight:700;flex:none;white-space:nowrap}

/* --------------------------------------------------------------------------
   8. HEADER / NAV
   -------------------------------------------------------------------------- */
/* White header, as on the reference site — it separates the brand from the
   cream bands below instead of dissolving into them. */
.hdr{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .4s var(--ez);
}
.hdr.is-stuck{box-shadow:0 10px 30px -24px rgba(47,43,54,.45)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;height:82px}

/* full logo lockup — mark + wordmark, straight from BMIT's own SVG */
.brand__logo{height:44px;width:auto;display:block}
.foot .brand__logo{height:48px}
@media (max-width:520px){ .brand__logo{height:36px} }
.nav__links{display:flex;align-items:center;gap:2.1rem}
.nav__links > a,.nav__ddbtn{
  font-size:.92rem;font-weight:600;color:var(--ink-2);position:relative;padding-block:.4rem;
  transition:color .3s var(--ez);
}
.nav__links > a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ez);
}
.nav__links > a:hover,.nav__ddbtn:hover,.nav__dd.is-open .nav__ddbtn{color:var(--brown)}
.nav__links > a:hover::after,.nav__links > a[aria-current="page"]::after{transform:scaleX(1)}
.nav__links > a[aria-current="page"]{color:var(--brown);font-weight:700}

/* Courses dropdown: two links into the homepage course sections. Opens on
   hover, on keyboard focus, and on click/tap (the button toggles .is-open). */
.nav__dd{position:relative}
.nav__ddbtn{display:inline-flex;align-items:center;gap:.3rem;background:none;border:0;cursor:pointer;font-family:inherit}
.nav__ddbtn .chev{width:14px;height:14px;transition:transform .3s var(--ez)}
.nav__dd:hover .chev,.nav__dd.is-open .chev{transform:rotate(180deg)}
.nav__ddmenu{
  position:absolute;top:100%;left:-1.1rem;min-width:220px;padding-top:.7rem;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .25s var(--ez),transform .25s var(--ez),visibility .25s;z-index:5;
}
.nav__dd:hover .nav__ddmenu,.nav__dd:focus-within .nav__ddmenu,.nav__dd.is-open .nav__ddmenu{opacity:1;visibility:visible;transform:none}
.nav__ddmenu a{
  display:block;padding:.75rem 1.1rem;background:var(--card);font-size:.95rem;font-weight:700;color:var(--ink);white-space:nowrap;
  border-inline:1px solid var(--line);transition:background-color .2s var(--ez);
}
.nav__ddmenu a:first-child{border-top:1px solid var(--line);border-radius:var(--r) var(--r) 0 0}
.nav__ddmenu a:last-child{border-bottom:1px solid var(--line);border-radius:0 0 var(--r) var(--r);box-shadow:var(--sh-md)}
.nav__ddmenu a:hover,.nav__ddmenu a:focus-visible{background:var(--paper-2)}

.nav__cta{display:flex;align-items:center;gap:.7rem}

.burger{display:none;width:46px;height:46px;position:relative;z-index:80;flex:none;border-radius:99px}
.burger i{
  position:absolute;left:13px;right:13px;height:2px;background:var(--brown);border-radius:2px;
  transition:transform .45s var(--ez),opacity .3s var(--ez),top .45s var(--ez);
}
.burger i:nth-child(1){top:18px}
.burger i:nth-child(2){top:26px}
.burger.is-open i:nth-child(1){top:22px;transform:rotate(45deg)}
.burger.is-open i:nth-child(2){top:22px;transform:rotate(-45deg)}

.sheet{
  position:fixed;inset:0;z-index:70;background:var(--paper);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:calc(82px + clamp(1rem,4vh,2.5rem)) var(--gut) 2.5rem;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ez),visibility .4s;
  overflow-y:auto;
}
.sheet.is-open{opacity:1;visibility:visible}

/* The sheet paints over the header. .hdr sets z-index:60, which opens a
   stacking context the burger inside it cannot climb out of — so the burger's
   own z-index:80 still lands below this sheet at 70 and is untappable. The
   sheet therefore carries its own close button. Matching .nav's 82px height
   puts the logo exactly where the header's logo sat, so nothing jumps. */
.sheet__head{
  /* fixed, not absolute: on a short screen the sheet scrolls, and the close
     button must stay reachable at the top */
  position:fixed;top:0;left:0;right:0;height:82px;z-index:1;background:var(--paper);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--gut);
}
.sheet__close{
  width:46px;height:46px;flex:none;border-radius:99px;
  display:grid;place-items:center;color:var(--brown);background:var(--paper-2);
  transition:background .3s var(--ez);
}
.sheet__close:hover{background:var(--paper-4)}
.sheet__close svg{width:22px;height:22px}
.sheet__links,.sheet__foot{width:100%;max-width:560px}
.sheet__links{display:flex;flex-direction:column;gap:0}
.sheet .sheet__link{
  width:100%;font-family:inherit;font-weight:800;font-size:clamp(1.6rem,5.5vw,2.1rem);line-height:1.15;
  letter-spacing:-.036em;color:var(--ink);padding-block:.7rem;background:none;border:0;cursor:pointer;text-align:left;
  border-bottom:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
.sheet .sheet__link em{font-style:normal;display:inline-flex;align-items:center;gap:.5rem}
.sheet .sheet__link .chev{width:.7em;height:.7em;transition:transform .3s var(--ez)}
.sheet .sheet__link[aria-expanded="true"] .chev{transform:rotate(180deg)}
.sheet .sheet__link span{font-size:.7rem;font-weight:700;letter-spacing:.16em;color:var(--orange);text-transform:uppercase}
.sheet__sub{display:flex;flex-direction:column;padding:.3rem 0 .6rem;border-bottom:1px solid var(--line)}
.sheet__sub[hidden]{display:none}
.sheet__sub a{padding:.6rem 0 .6rem 1rem;border-left:2px solid var(--orange-tint);font-size:1.1rem;font-weight:700;color:var(--ink)}
.sheet__links > *{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ez),transform .5s var(--ez)}
.sheet.is-open .sheet__links > *{opacity:1;transform:none}
.sheet.is-open .sheet__links > :nth-child(1){transition-delay:.05s}
.sheet.is-open .sheet__links > :nth-child(2){transition-delay:.10s}
.sheet.is-open .sheet__links > :nth-child(3){transition-delay:.15s}
.sheet.is-open .sheet__links > :nth-child(4){transition-delay:.20s}
.sheet.is-open .sheet__links > :nth-child(5){transition-delay:.25s}
.sheet__foot{margin-top:1.75rem;display:flex;flex-direction:column;gap:.8rem;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ez) .34s,transform .5s var(--ez) .34s}
.sheet.is-open .sheet__foot{opacity:1;transform:none}

/* The full menu needs ~1180px to sit on one line with room around it; below
   that the labels wrapped ("Campus to / Career"), so switch to the menu button. */
.nav__links > a,.nav__ddbtn{white-space:nowrap}
@media (max-width:1180px){
  .nav__links{display:none}
  .nav__cta .btn--desk{display:none}
  .nav__cta .btn--mob{display:inline-flex}
  .burger{display:block}
}
.hdr .brand{flex:none}
.btn--mob{white-space:nowrap}
/* Logo, button and menu share ~320px on a small phone: shrink the logo a
   step at a time rather than let the button wrap or the logo squash. */
@media (max-width:420px){ .btn--mob{padding:.55rem .85rem;font-size:.8rem} .nav{gap:.75rem} .nav__cta{gap:.45rem} .hdr .brand__logo{height:32px} }
@media (max-width:370px){ .hdr .brand__logo{height:30px} }
/* Below this there is no room; the menu carries the same button. */
@media (max-width:355px){ .nav__cta .btn--mob{display:none} }

/* The booking button stays in the sticky header on small screens instead of a
   fixed bottom bar, which cost ~80px of every phone screen. */
.btn--mob{display:none}

/* --------------------------------------------------------------------------
   9. REVEAL
   -------------------------------------------------------------------------- */
/* Gated behind `js`, set by the inline bootstrap in <head>. Unconditionally
   hiding these meant a reader with JS off — or a script that failed to load —
   got a blank page, because almost every section on the site carries .rv. */
.js .rv{opacity:0;transform:translateY(20px)}
.rv.is-in{opacity:1;transform:none;transition:opacity .85s var(--ez),transform .85s var(--ez)}

/* Same reasoning for the module explorer: all 13 panels ship with `hidden`
   and JS reveals the first, so without JS the whole section was empty. */
html:not(.js) .mx__panel[hidden]{display:block}
.rv.d1.is-in{transition-delay:.09s}
.rv.d2.is-in{transition-delay:.18s}
.rv.d3.is-in{transition-delay:.27s}
.rv.d4.is-in{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none} }

/* --------------------------------------------------------------------------
   10. HERO
   -------------------------------------------------------------------------- */
/* No bottom padding: the photo is cut off at the waist, so it stands on the
   brown skills band below instead of floating with a hard edge in white space.
   The text column carries its own bottom spacing. */
.hero{position:relative;overflow:hidden;padding-block:clamp(1.5rem,2.6vw,2.5rem) 0}
.hero__grid > :first-child{padding-bottom:var(--sec-y)}
.hero .wrap{position:relative;z-index:1}
/* Top-aligned, not centred: the photo is taller than the text on large
   screens, and centring pushed the headline down to match it. */
.hero__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
.hero__fan{top:-16%;right:-12%;width:min(58vw,760px)}
/* The photo stays inside the page margins and ends where the header's button
   ends, so the left and right edges of the hero match. It used to bleed to the
   screen edge, which only looked right while the photo had a white border. */
.hero__media{align-self:end}
.hero__media img{display:block;width:100%;height:auto;max-height:min(620px,76vh);object-fit:contain;object-position:right bottom}
/* A touch smaller than other h1s so it holds three lines in a half-width column. */
.hero h1{margin-bottom:1.1rem;font-size:clamp(2.4rem,4.4vw,3.5rem)}
.hero .lede{margin-bottom:1rem}
/* The client's third hero line. It previously sat below the fold in its own
   peach band, which broke the hero in two for a line that belongs inside it. */
.hero__tag{
  font-weight:700;color:var(--brown);letter-spacing:-.012em;
  font-size:clamp(1rem,1.5vw,1.12rem);margin-bottom:2.2rem;text-wrap:balance;
}
.hero__cta{margin-bottom:0}
@media (max-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:2rem}
  .hero__grid > :first-child{padding-bottom:0}
  .hero__media{max-width:520px;margin-inline:auto;margin-right:auto;width:100%}
}

/* trust strip beneath hero: qualitative, no invented figures */
.trust{border-block:1px solid var(--line);background:var(--paper-2)}
.trust__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.trust__item{padding:1.7rem 1.5rem;border-left:1px solid var(--line)}
.trust__item:first-child{border-left:0;padding-left:0}
.trust__k{font-size:1.2rem;font-weight:800;color:var(--ink);letter-spacing:-.028em;line-height:1.2}
.trust__v{font-size:.87rem;color:var(--ink-2);margin-top:.4rem;line-height:1.45}
@media (max-width:860px){
  .trust__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust__item{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-block:1.3rem}
  .trust__item:nth-child(-n+2){border-top:0}
  .trust__item:nth-child(even){padding-left:1.4rem;border-left:1px solid var(--line)}
}
@media (max-width:480px){
  .trust__grid{grid-template-columns:minmax(0,1fr)}
  .trust__item:nth-child(even){padding-left:0;border-left:0}
  .trust__item:nth-child(2){border-top:1px solid var(--line)}
}

/* --------------------------------------------------------------------------
   11. THE GAP (problem)
   -------------------------------------------------------------------------- */
.gap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line-2)}
.gap-col{padding:2.2rem 2rem 2.2rem 0;border-right:1px solid var(--line)}
.gap-col:last-child{border-right:0;padding-right:0}
.gap-col:not(:first-child){padding-left:2rem}
.gap-col__h{
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.19em;
  color:var(--ink-3);margin-bottom:1.3rem;display:flex;align-items:center;gap:.6rem;
}
.gap-col--bmit .gap-col__h{color:var(--orange-ink)}
.gap-list{display:grid;gap:.72rem}
.gap-list li{display:grid;grid-template-columns:16px 1fr;gap:.7rem;align-items:baseline;font-size:.97rem;color:var(--ink-2)}
.gap-list li::before{content:"";width:6px;height:1.5px;background:var(--line-2);margin-top:.62em}
.gap-col--bmit .gap-list li{color:var(--brown);font-weight:600}
.gap-col--bmit .gap-list li::before{background:var(--orange);width:9px}
@media (max-width:860px){
  .gap-grid{grid-template-columns:minmax(0,1fr)}
  .gap-col{border-right:0;padding:1.8rem 0;border-bottom:1px solid var(--line)}
  .gap-col:not(:first-child){padding-left:0}
  .gap-col:last-child{border-bottom:0}
}

/* --------------------------------------------------------------------------
   12. THE SYSTEM (7 stages)
   -------------------------------------------------------------------------- */
.sys{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line-dark)}
.sys__step{
  padding:1.8rem 1.1rem 2rem;border-left:1px solid var(--line-dark);position:relative;
  transition:background-color .4s var(--ez);
}
.sys__step:first-child{border-left:0}
.sys__step:hover{background:rgba(251,248,240,.05)}
.sys__n{font-weight:800;font-size:.95rem;color:var(--orange);display:block;margin-bottom:.9rem;letter-spacing:.02em}
.sys__t{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:#FBF6EC;margin-bottom:.6rem;line-height:1.35}
.sys__d{font-size:.86rem;line-height:1.5;color:var(--on-brown)}
.sys__bar{position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--orange);transition:width .8s var(--ez)}
.sys__step.is-in .sys__bar{width:100%}
@media (max-width:1100px){ .sys{grid-template-columns:repeat(4,minmax(0,1fr))} .sys__step:nth-child(5){border-left:0} }
@media (max-width:760px){ .sys{grid-template-columns:repeat(2,minmax(0,1fr))} .sys__step:nth-child(odd){border-left:0} }
@media (max-width:420px){ .sys{grid-template-columns:minmax(0,1fr)} .sys__step{border-left:0;border-top:1px solid var(--line-dark)} }

/* --------------------------------------------------------------------------
   13. CURRICULUM CARDS
   -------------------------------------------------------------------------- */
.curr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.curr__card{background:var(--card);padding:2rem 1.8rem 2.1rem;transition:background-color .4s var(--ez)}
.curr__card:hover{background:var(--orange-soft)}
.curr__n{font-weight:800;color:var(--orange-ink);font-size:.95rem;margin-bottom:1rem;display:block;letter-spacing:.04em}
.curr__card h3{margin-bottom:.7rem}
.curr__card p{font-size:.94rem;color:var(--ink-2);line-height:1.6;margin-bottom:1.1rem}
.curr__tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{
  font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--brown-2);
  background:var(--paper-4);border:1px solid var(--line);border-radius:99px;padding:.28rem .68rem;
}
@media (max-width:980px){ .curr{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .curr{grid-template-columns:minmax(0,1fr)} }

/* --------------------------------------------------------------------------
   14. MODULE EXPLORER (program page)
   -------------------------------------------------------------------------- */
.mx{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
.mx__list{border-top:1px solid var(--line);max-height:none}
.mx__btn{
  width:100%;text-align:left;display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;
  padding:.95rem .8rem;border-bottom:1px solid var(--line);transition:background-color .3s var(--ez),padding-left .35s var(--ez);
}
.mx__btn:hover{background:var(--paper-3);padding-left:1.1rem}
.mx__btn[aria-selected="true"]{background:var(--card);padding-left:1.1rem;box-shadow:inset 3px 0 0 var(--orange)}
.mx__btn .n{font-weight:800;font-size:.85rem;color:var(--orange-ink);width:1.9rem}
.mx__btn .t{font-size:.94rem;font-weight:600;color:var(--ink-2);line-height:1.35}
.mx__btn[aria-selected="true"] .t{color:var(--brown);font-weight:700}
.mx__btn .c{width:7px;height:7px;border-radius:99px;background:transparent;transition:background-color .3s}
.mx__btn[aria-selected="true"] .c{background:var(--orange)}
.mx__panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.6rem,3.5vw,2.6rem);box-shadow:var(--sh-md);position:sticky;top:104px;
}
.mx__panel[hidden]{display:none}
.mx__eye{font-size:.7rem;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:var(--orange-ink);margin-bottom:.8rem;display:block}
.mx__panel h3{margin-bottom:1.4rem}
.mx__panel ul{display:grid;gap:.62rem;margin-bottom:1.7rem}
.mx__panel li{display:grid;grid-template-columns:18px 1fr;gap:.75rem;align-items:start;font-size:.96rem;color:var(--ink-2);line-height:1.55}
.mx__out{background:var(--green-tint);border:1px solid #C6E4CC;border-radius:var(--r-sm);padding:1.05rem 1.2rem;display:grid;grid-template-columns:20px 1fr;gap:.8rem;align-items:start}
.mx__out b{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--green-ink);margin-bottom:.28rem;font-weight:800}
.mx__out p{font-size:.93rem;color:#254028;line-height:1.5}
.mx__out svg{width:18px;height:18px;color:var(--green-ink);margin-top:2px}
@media (max-width:900px){
  .mx{grid-template-columns:minmax(0,1fr)}
  .mx__panel{position:static}
  .mx__list{max-height:340px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r)}
}

/* tick list */
.ticks{display:grid;gap:.85rem}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:.8rem;align-items:start;font-size:1rem;color:var(--ink-2);line-height:1.55}
.ticks svg{width:19px;height:19px;color:var(--green-ink);margin-top:3px;flex:none}
.ticks b{color:var(--brown);font-weight:700}
/* .cta is a dark band too — it must inherit every on-dark treatment */
.sec--dark .ticks li{color:#DDD0C2}
.cta .ticks li{color:var(--ink-2)}
.sec--dark .ticks b{color:#FBF6EC}
.cta .ticks b{color:var(--ink)}
.sec--dark .ticks svg{color:var(--orange)}
.cta .ticks svg{color:var(--green-ink)}

/* --------------------------------------------------------------------------
   15. BEFORE / AFTER CV
   -------------------------------------------------------------------------- */
.cv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.4rem,3.5vw,2.4rem);align-items:stretch}
.cv__doc{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2.2rem);box-shadow:var(--sh-md);position:relative;display:flex;flex-direction:column;
}
.cv__doc--before{background:var(--paper-3);transform:rotate(-.8deg)}
.cv__doc--after{transform:rotate(.5deg)}
@media (max-width:860px){ .cv{grid-template-columns:minmax(0,1fr)} .cv__doc{transform:none!important} }
.cv__stamp{
  position:absolute;top:1.1rem;right:1.1rem;transform:rotate(5deg);
  font-size:.64rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  padding:.4rem .7rem;border-radius:var(--r-sm);border:1.5px solid;
}
.cv__stamp--gray{color:var(--ink-3);border-color:var(--line-2)}
.cv__stamp--ok{color:var(--green-ink);border-color:var(--green-ink);background:var(--green-tint)}
.cv__meta{font-size:.68rem;text-transform:uppercase;letter-spacing:.17em;color:var(--ink-3);font-weight:700;margin-bottom:1.3rem;display:flex;justify-content:space-between;gap:1rem;padding-right:10.5rem}
/* On a phone there is no room beside the header for the stamp, so it drops
   into the flow above it instead of sitting on top of "Before". */
@media (max-width:560px){ .cv__stamp{position:static;align-self:flex-start;transform:none;margin-bottom:1rem} .cv__meta{padding-right:0} }
.cv__name{font-size:1.25rem;font-weight:800;color:var(--ink);letter-spacing:-.03em}
.cv__sub{font-size:.87rem;color:var(--ink-3);margin-top:.2rem;margin-bottom:1.2rem}
.cv__rule{height:1px;background:var(--line);margin-bottom:1.2rem}
.cv__list{display:grid;gap:.72rem;font-size:.93rem;color:var(--ink-2);line-height:1.5}
.cv__list li{display:grid;grid-template-columns:18px 1fr;gap:.7rem;align-items:start}
.cv__list .dash{color:var(--ink-3);font-weight:800;text-align:center;line-height:1.5}
.cv__list svg{width:15px;height:15px;color:var(--green-ink);margin-top:3px}
.cv__doc--before .cv__list{color:var(--ink-3)}
.cv__list b{color:var(--brown);font-weight:700}

/* --------------------------------------------------------------------------
   16. CAMPUS TO CAREER
   -------------------------------------------------------------------------- */
/* Fixed column counts, not auto-fill: the wall is populated in multiples of
   four, so auto-fill leaves a dead cell at most widths. */
.logo-wall{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
/* 4 or 2 columns only. The wall holds 8 cells, so a 3-column step would
   always leave one dead tile showing the grid's divider colour. */
@media (max-width:900px){ .logo-wall{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* min-height, not aspect-ratio: a fixed ratio stops the grid stretching a
   cell to match a neighbour whose name wraps to two lines, and the gap shows
   through as a grey block under the shorter cell. */
.logo-cell{
  background:var(--card);min-height:clamp(150px,14vw,180px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.6rem;padding:1rem .8rem;text-align:center;
  transition:background-color .4s var(--ez);
}
.logo-cell:hover{background:var(--card)}
.logo-cell img{max-height:52px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .4s,opacity .4s}
.logo-cell:hover img{filter:none;opacity:1}
.logo-cell__ph{
  width:46px;height:46px;border-radius:99px;border:1.5px dashed var(--line-2);
  display:grid;place-items:center;color:var(--orange);opacity:.55;
}
.logo-cell__ph svg{width:22px;height:auto}
.logo-cell__name{font-size:.78rem;font-weight:600;color:var(--ink-2);line-height:1.3}
.logo-cell:has(img) .logo-cell__ph{display:none}

/* campus photo gallery */
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.6rem,1.4vw,1rem);grid-auto-flow:dense}
.gal__item{position:relative;border-radius:var(--r);overflow:hidden;background:var(--paper-4);min-width:0}
.gal__item .ph{border-radius:var(--r);border:0;height:100%}
.gal__item img{transition:transform .7s var(--ez)}
.gal__item:hover img{transform:scale(1.045)}
.gal__item--wide{grid-column:span 2}
.gal__item--tall{grid-row:span 2}
.gal__cap{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1rem .85rem;
  font-size:.78rem;font-weight:600;color:#fff;
  background:linear-gradient(transparent,rgba(43,42,51,.72));
  opacity:0;transform:translateY(6px);transition:opacity .4s var(--ez),transform .4s var(--ez);
}
.gal__item:has(img):hover .gal__cap{opacity:1;transform:none}
/* Touch screens cannot hover, so the captions would never appear. Show them. */
@media (hover:none){ .gal__cap{opacity:1;transform:none} }
@media (max-width:900px){ .gal{grid-template-columns:repeat(2,minmax(0,1fr))} .gal__item--wide{grid-column:span 2} }
@media (max-width:520px){ .gal{grid-template-columns:minmax(0,1fr)} .gal__item--wide{grid-column:span 1} .gal__item--tall{grid-row:span 1} }

/* upcoming workshops */
.wk{border-top:1px solid var(--line-2)}
.wk__row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:clamp(1rem,3vw,2.5rem);
  align-items:center;padding:1.5rem 0;border-bottom:1px solid var(--line);
}
.wk__date{text-align:center;min-width:64px;line-height:1;color:var(--ink)}
.wk__date .d{display:block;font-size:1.75rem;font-weight:800;letter-spacing:-.04em}
.wk__date .m{display:block;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.17em;color:var(--orange-ink);margin-top:.35rem}
.wk__who h4{margin-bottom:.25rem}
.wk__who p{font-size:.87rem;color:var(--ink-3)}
.wk__tag{
  font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  padding:.35rem .75rem;border-radius:99px;white-space:nowrap;
}
.wk__tag--open{background:var(--green-tint);color:var(--green-ink)}
.wk__tag--soon{background:var(--orange-tint);color:var(--orange-deep)}
.wk__tag--full{background:var(--paper-4);color:var(--ink-3)}
@media (max-width:760px){
  .wk__row{grid-template-columns:auto 1fr;gap:1rem 1.2rem;align-items:start}
  .wk__tag{grid-column:2;justify-self:start}
  .wk__row .btn{grid-column:2;justify-self:start}
}

/* --------------------------------------------------------------------------
   17. VIDEO TESTIMONIALS
   -------------------------------------------------------------------------- */
.vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.1rem,2.5vw,1.8rem)}
@media (max-width:560px){ .vids{grid-template-columns:minmax(0,1fr)} }
.vid{text-align:left;width:100%;display:block;min-width:0;cursor:pointer}
/* display:block is load-bearing — these are <span>s so they'd size as inline */
.vid__media{display:block;position:relative;border-radius:var(--r);overflow:hidden;background:var(--paper-4);margin-bottom:1rem}
/* The real clips are shot vertically on a phone. A 4:5 card keeps the speaker
   large without the card becoming a full 9:16 column; the object-position bias
   holds the face in frame rather than the banner above it. */
.vid__media .ph{aspect-ratio:4/5}
.vid__media .ph > img{object-position:50% 38%}
.vids--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){ .vids--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .vids--4{grid-template-columns:minmax(0,1fr)} }
.vid__media .ph{border:0;border-radius:var(--r)}
.vid__media img{transition:transform .7s var(--ez)}
.vid:hover .vid__media img{transform:scale(1.04)}
.vid__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:99px;background:rgba(251,248,240,.94);
  display:grid;place-items:center;box-shadow:var(--sh-md);z-index:2;
  transition:transform .4s var(--ez),background-color .3s;
}
.vid:hover .vid__play{transform:translate(-50%,-50%) scale(1.09);background:var(--orange)}
.vid__play svg{width:19px;height:19px;color:var(--brown);margin-left:3px}
.vid:hover .vid__play svg{color:#3A2409}
.vid__len{
  position:absolute;right:.7rem;bottom:.7rem;z-index:2;font-size:.7rem;font-weight:700;
  color:#fff;background:rgba(43,42,51,.72);padding:.2rem .5rem;border-radius:var(--r-sm);
  backdrop-filter:blur(4px);
}
.vid__q{font-size:1rem;font-weight:700;line-height:1.35;color:var(--ink);letter-spacing:-.022em;margin-bottom:.7rem}
.vid__who{font-size:.85rem;color:var(--ink-3)}
/* when a card has no quote line, the name carries the weight instead */
.vid__media + .vid__who b{font-size:1rem;font-weight:800;letter-spacing:-.022em;color:var(--ink);margin-bottom:.15rem}
.vid__who b{display:block;color:var(--ink);font-weight:700;font-size:.9rem}

/* video modal */
.modal{
  position:fixed;inset:0;z-index:90;background:rgba(31,26,22,.9);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:var(--gut);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ez),visibility .35s;
}
.modal.is-open{opacity:1;visibility:visible}
.modal__box{width:min(980px,100%);position:relative;transform:scale(.97);transition:transform .4s var(--ez)}
.modal.is-open .modal__box{transform:none}
.modal__frame{aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-lg)}
.modal__frame iframe,.modal__frame video{width:100%;height:100%;border:0;display:block}
/* vertical clips: let the box follow the video instead of letterboxing it */
.modal__box--portrait{width:min(440px,100%)}
.modal__box--portrait .modal__frame{aspect-ratio:9/16;max-height:78vh}
.modal__box--portrait .modal__frame video{object-fit:contain}
.modal__empty{width:100%;height:100%;display:grid;place-items:center;text-align:center;padding:2rem;background:var(--brown);color:#EFE4D6}
.modal__empty b{display:block;font-weight:800;font-size:1.2rem;margin-bottom:.5rem;color:#FBF6EC}
.modal__empty span{font-size:.9rem;color:var(--on-brown);max-width:46ch;display:block;margin-inline:auto}
.modal__close{
  position:absolute;top:-52px;right:0;width:42px;height:42px;border-radius:99px;
  background:rgba(251,248,240,.14);display:grid;place-items:center;color:#FBF6EC;
  transition:background-color .3s;
}
.modal__close:hover{background:rgba(251,248,240,.26)}
.modal__close svg{width:17px;height:17px}
.modal__cap{margin-top:1rem;color:#DCCFC0;font-size:.9rem;text-align:center}

/* --------------------------------------------------------------------------
   18. QUOTES / STORY CARDS
   -------------------------------------------------------------------------- */
.quote{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.6rem,3.2vw,2.4rem);box-shadow:var(--sh-sm);
  display:flex;flex-direction:column;gap:1.5rem;justify-content:space-between;height:100%;
}
.quote--tint{background:var(--orange-tint);border-color:var(--orange-line)}
.quote--tint .who__txt{color:#6B4A2A}
.quote blockquote{font-size:clamp(1.05rem,1.7vw,1.3rem);font-weight:700;line-height:1.3;color:var(--ink);letter-spacing:-.026em}
.who{display:flex;align-items:center;gap:.9rem}
.who__face{
  width:48px;height:48px;border-radius:99px;flex:none;overflow:hidden;background:var(--paper-4);
  border:1px solid var(--line);display:grid;place-items:center;
}
.who__face img{width:100%;height:100%;object-fit:cover}
.who__face span{font-size:.62rem;font-weight:800;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
.who__face:has(img) span{display:none}
.who__txt{font-size:.87rem;line-height:1.35;color:var(--ink-3)}
.who__txt b{display:block;color:var(--ink);font-weight:700;font-size:.95rem}

/* story case: before → at bmit → after */
.case{
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  overflow:hidden;box-shadow:var(--sh-md);
}
.case__top{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:0}
.case__media .ph{border-radius:0;border:0;height:100%;min-height:100%}
.case__intro{padding:clamp(1.6rem,3.2vw,2.4rem)}
.case__intro h3{margin-bottom:.5rem}
.case__role{font-size:.85rem;color:var(--orange-ink);font-weight:700;letter-spacing:.03em;margin-bottom:1.2rem}
.case__q{font-size:clamp(1.05rem,1.6vw,1.25rem);font-weight:700;line-height:1.32;color:var(--ink);letter-spacing:-.026em}
.case__flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.case__stage{padding:1.6rem clamp(1.2rem,2.4vw,1.8rem);border-left:1px solid var(--line)}
.case__stage:first-child{border-left:0}
.case__stage h4{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.17em;color:var(--ink-3);margin-bottom:.9rem}
.case__stage--after h4{color:var(--green-ink)}
.case__stage ul{display:grid;gap:.5rem}
.case__stage li{font-size:.92rem;color:var(--ink-2);line-height:1.45;display:grid;grid-template-columns:14px 1fr;gap:.55rem;align-items:baseline}
.case__stage li::before{content:"";width:5px;height:1.5px;background:var(--line-2);margin-top:.6em}
.case__stage--after li::before{background:var(--green)}
@media (max-width:860px){
  .case__top{grid-template-columns:minmax(0,1fr)}
  .case__media .ph{aspect-ratio:4/3}
  .case__flow{grid-template-columns:minmax(0,1fr)}
  .case__stage{border-left:0;border-top:1px solid var(--line)}
  .case__stage:first-child{border-top:0}
}

/* --------------------------------------------------------------------------
   19. PLACEMENT STEPS
   -------------------------------------------------------------------------- */
.steps{counter-reset:st;display:grid;gap:0;border-top:1px solid var(--line-2)}
.step{
  counter-increment:st;display:grid;grid-template-columns:auto minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.5rem);padding:1.9rem 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.step::before{
  content:counter(st,decimal-leading-zero);
  font-weight:800;font-size:.95rem;color:var(--orange-ink);letter-spacing:.04em;
  min-width:2.4rem;padding-top:.28rem;
}
.sec--dark .step::before{color:var(--orange)}
.step p{font-size:.98rem;color:var(--ink-2);line-height:1.6}
@media (max-width:800px){ .step{grid-template-columns:auto 1fr;gap:.6rem 1.2rem} .step p{grid-column:2} }

/* --------------------------------------------------------------------------
   20. WHATSAPP CHANNEL
   -------------------------------------------------------------------------- */
.wa-band{background:linear-gradient(160deg,#F3FAF4,#E8F6EC);border-block:1px solid #CFE7D6}
.wa-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:900px){ .wa-grid{grid-template-columns:minmax(0,1fr)} }
.wa-band h2{color:#0F3D1E}
.wa-band .lede{color:#2E4A36}
.wa-feed{
  background:var(--card);border:1px solid #CFE7D6;border-radius:var(--r-lg);
  box-shadow:var(--sh-md);overflow:hidden;
}
.wa-feed__top{
  display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;
  background:#075E54;color:#fff;
}
.wa-feed__top .ic{width:36px;height:36px;border-radius:99px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.wa-feed__top svg{width:19px;height:19px}
.wa-feed__top b{font-size:.95rem;font-weight:700;display:block;line-height:1.2}
.wa-feed__top span{font-size:.74rem;opacity:.78}
.wa-feed__body{padding:1.1rem;display:grid;gap:.7rem;background:#F3EFE7}
.wa-msg{
  background:#fff;border-radius:12px;border-top-left-radius:3px;padding:.8rem .95rem;
  box-shadow:0 1px 2px rgba(0,0,0,.08);font-size:.9rem;line-height:1.5;color:var(--ink);
}
.wa-msg b{display:block;color:var(--green-ink);font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.3rem}
.wa-msg .t{display:block;font-size:.68rem;color:var(--ink-3);margin-top:.45rem;text-align:right}
.wa-feed__foot{padding:.9rem 1.2rem;background:#fff;border-top:1px solid #E4EDE6;text-align:center;font-size:.8rem;color:var(--ink-3)}

/* --------------------------------------------------------------------------
   21. PARENTS BAND
   -------------------------------------------------------------------------- */
.parents{background:var(--paper-2);border-block:1px solid var(--line)}
.parents__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,4.5rem);align-items:start}
@media (max-width:900px){ .parents__grid{grid-template-columns:minmax(0,1fr)} }
.qa{display:grid;gap:1.5rem}
.qa__item{border-left:2px solid var(--orange-line);padding-left:1.3rem}
.qa__q{font-size:1.06rem;font-weight:800;color:var(--ink);margin-bottom:.45rem;letter-spacing:-.024em;line-height:1.3}
.qa__a{font-size:.96rem;color:var(--ink-2);line-height:1.6}

/* --------------------------------------------------------------------------
   22. FAQ
   -------------------------------------------------------------------------- */
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line-2)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.45rem 0;font-size:1.06rem;font-weight:700;color:var(--ink);
  letter-spacing:-.022em;line-height:1.32;
  transition:color .3s var(--ez);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--orange-ink)}
.faq__pm{width:26px;height:26px;flex:none;position:relative;border-radius:99px;border:1.5px solid var(--line-2);transition:transform .45s var(--ez),border-color .3s,background-color .3s}
.faq__pm::before,.faq__pm::after{content:"";position:absolute;background:var(--brown);left:6.5px;right:6.5px;top:11px;height:1.6px;border-radius:2px;transition:background-color .3s}
.faq__pm::after{transform:rotate(90deg)}
.faq details[open] .faq__pm{transform:rotate(135deg);border-color:var(--orange);background:var(--orange-tint)}
.faq details[open] .faq__pm::before,.faq details[open] .faq__pm::after{background:var(--orange-ink)}
.faq details > div{padding:0 3.2rem 1.5rem 0;color:var(--ink-2);font-size:.99rem;line-height:1.65;max-width:66ch}
.faq details > div p + p{margin-top:.8rem}

/* --------------------------------------------------------------------------
   23. FORMS
   -------------------------------------------------------------------------- */
.panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:clamp(1.6rem,3.4vw,2.4rem);
  color:var(--ink); /* reset: panels sit inside dark bands and must not inherit cream text */
}
.panel h3{margin-bottom:.4rem}
.panel__hint{font-size:.92rem;color:var(--ink-3);margin-bottom:1.7rem}
.field{margin-bottom:1.15rem}
.field > label{display:block;font-size:.82rem;font-weight:700;color:var(--brown);margin-bottom:.45rem;letter-spacing:.01em}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem 1rem;border-radius:var(--r-sm);
  border:1.5px solid var(--line-2);background:var(--paper-3);color:var(--ink);
  font-size:.98rem;font-family:var(--sans);
  transition:border-color .3s var(--ez),box-shadow .3s var(--ez),background-color .3s;
}
.field textarea{resize:vertical;min-height:100px}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 21px) 52%,calc(100% - 15px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--orange);background:var(--card);box-shadow:0 0 0 3px rgba(247,150,53,.2)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field__help{font-size:.79rem;color:var(--ink-3);margin-top:.4rem}
.field__err{font-size:.79rem;color:var(--rust);margin-top:.4rem;font-weight:600;display:none}
.field.is-bad input,.field.is-bad select{border-color:var(--rust);background:#FDF4F1}
.field.is-bad .field__err{display:block}
.field.is-bad .choice label{border-color:var(--rust)}

/* lead forms: sending, failed, sent (see bmit.js §6) */
form.is-sending button[type="submit"]{opacity:.8;cursor:progress}
.form-note{border:1px solid #E8C3B6;background:#FDF4F1;color:var(--rust);border-radius:var(--r-sm);
  padding:.85rem 1rem;margin:0 0 1.15rem;font-size:.9rem;line-height:1.5}
.form-note p + p{margin-top:.35rem}
.form-note a{color:inherit;font-weight:700;text-decoration:underline}
.sent{text-align:center;padding:.4rem 0 .2rem}
.sent:focus{outline:none}
.sent__tick{width:52px;height:52px;border-radius:99px;background:var(--green-tint);color:var(--green-ink);
  display:inline-grid;place-items:center;margin-bottom:.9rem}
.sent__tick svg{width:24px;height:24px}
.sent__title{font-size:1.3rem;font-weight:800;color:var(--brown);margin-bottom:.35rem}
.sent__body{color:var(--ink-2)}
/* the optional next step, set apart so it reads as a choice, not a redirect */
.sent__next{margin-top:1.5rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.sent__ask{font-weight:800;color:var(--brown);margin-bottom:.25rem}
.sent__hint{font-size:.88rem;color:var(--ink-3);margin-bottom:1rem}
/* the bot trap: off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* segmented choice — step 1 of the qualifier */
.choice{display:grid;gap:.55rem}
.choice label{
  display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;
  border:1.5px solid var(--line-2);border-radius:var(--r-sm);cursor:pointer;
  font-size:.94rem;color:var(--ink-2);transition:border-color .25s,background-color .25s,color .25s;
}
.choice label:hover{border-color:var(--brown-2);background:var(--paper-3)}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice .dot{width:17px;height:17px;border-radius:99px;border:1.5px solid var(--line-2);flex:none;position:relative;transition:border-color .25s}
.choice .dot::after{content:"";position:absolute;inset:3px;border-radius:99px;background:var(--orange);transform:scale(0);transition:transform .25s var(--ez)}
.choice input:checked ~ .dot{border-color:var(--orange)}
.choice input:checked ~ .dot::after{transform:scale(1)}
.choice label:has(input:checked){border-color:var(--orange);background:var(--orange-tint);color:var(--brown);font-weight:600}
.choice input:focus-visible ~ .dot{outline:2.5px solid var(--orange-dp);outline-offset:2px}

.or{display:flex;align-items:center;gap:1rem;margin:1.4rem 0;color:var(--ink-3);font-size:.72rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase}
.or::before,.or::after{content:"";height:1px;background:var(--line);flex:1}

/* --------------------------------------------------------------------------
   24. CONTACT / INFO CARDS
   -------------------------------------------------------------------------- */
.info{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;grid-template-columns:repeat(3,minmax(0,1fr))}
.info__cell{background:var(--card);padding:1.7rem 1.6rem}
.info__cell h4{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-3);margin-bottom:.85rem}
.info__cell a,.info__cell p{font-size:1rem;color:var(--brown);font-weight:600;line-height:1.5}
.info__cell a:hover{color:var(--orange-ink)}
.info__cell p.small{font-weight:400;color:var(--ink-2)}
@media (max-width:860px){ .info{grid-template-columns:minmax(0,1fr)} }

/* --------------------------------------------------------------------------
   25. FOOTER
   -------------------------------------------------------------------------- */
.foot{background:var(--brown);color:#EFE4D8;padding-block:0 2.4rem;position:relative;overflow:hidden}
.foot__fan{bottom:-52%;left:-8%;width:min(52vw,620px);opacity:.06}
.foot .wrap{position:relative;z-index:1}

/* The footer opens with a real invitation, not a sitemap. */
.foot__top{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
  padding-block:var(--sec-y-tight);
  border-bottom:1px solid var(--line-dark);
}
.foot__top h2{color:#FFF8EE;max-width:16ch;margin-bottom:1rem}
.foot__top p{color:var(--on-brown);max-width:44ch;font-size:1.02rem;line-height:1.6}
.foot__actions{display:flex;flex-direction:column;gap:.8rem;align-items:stretch}
.foot__call{
  display:flex;align-items:center;gap:1rem;padding:1.1rem 1.3rem;
  border:1px solid var(--line-dark);border-radius:var(--r);
  transition:background-color .35s var(--ez),border-color .35s var(--ez);
}
.foot__call:hover{background:rgba(251,248,240,.07);border-color:rgba(251,248,240,.35)}
.foot__call .ic{
  width:42px;height:42px;border-radius:999px;flex:none;display:grid;place-items:center;
  background:rgba(247,150,53,.18);color:var(--orange);
}
.foot__call .ic svg{width:18px;height:18px}
.foot__call b{display:block;font-size:1.02rem;font-weight:800;color:#FFF8EE;letter-spacing:-.02em}
.foot__call span{font-size:.82rem;color:var(--on-brown)}
@media (max-width:860px){ .foot__top{grid-template-columns:minmax(0,1fr)} }

.foot__grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.85fr));
  gap:clamp(2rem,4vw,3rem);padding-top:clamp(2.8rem,5vw,3.8rem);
}
@media (max-width:900px){ .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .foot__grid{grid-template-columns:minmax(0,1fr)} }
.foot .brand__name{color:#FBF6EC}
.foot .brand__sub{color:var(--on-brown)}
.foot__addr{font-size:.9rem;line-height:1.65;color:var(--on-brown);margin-top:1.1rem;max-width:32ch}
.foot h4{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.19em;color:var(--on-brown);margin-bottom:1.1rem}
.foot ul{display:grid;gap:.6rem}
.foot a:not(.btn):not(.foot__call){font-size:.93rem;color:#E3D6C8;transition:color .3s var(--ez)}
.foot a:not(.btn):not(.foot__call):hover{color:var(--orange)}
.foot__legal{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.6rem;border-top:1px solid rgba(251,248,240,.14);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.83rem;color:var(--on-brown);
}
.foot__legal a:hover{color:var(--orange)}
.socials{display:flex;gap:.6rem;margin-top:1.4rem}
.socials a{
  width:38px;height:38px;border-radius:99px;border:1px solid rgba(251,248,240,.2);
  display:grid;place-items:center;transition:background-color .3s,border-color .3s,transform .3s var(--ez);
}
.socials a:hover{background:rgba(251,248,240,.1);border-color:rgba(251,248,240,.4);transform:translateY(-2px)}
.socials svg{width:16px;height:16px;color:#D6C6B6}

/* --------------------------------------------------------------------------
   26. PAGE HEADERS (inner pages)
   -------------------------------------------------------------------------- */
.phead{position:relative;overflow:hidden;padding-block:clamp(2rem,3.5vw,3.5rem) clamp(1.8rem,3vw,2.75rem);border-bottom:1px solid var(--line)}
.phead__fan{top:-30%;right:-8%;width:min(46vw,560px);opacity:.06}
.phead .wrap{position:relative;z-index:1}
.phead h1{max-width:19ch;margin-bottom:1.3rem}
.crumb{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--ink-3);margin-bottom:1.4rem;font-weight:600}
.crumb a:hover{color:var(--orange-ink)}
.crumb svg{width:11px;height:11px;opacity:.55}

/* --------------------------------------------------------------------------
   27. CTA BAND
   -------------------------------------------------------------------------- */
/* Cream, not brown: the footer directly below is brown, and two dark blocks
   in a row read as one heavy mass. white -> cream -> brown is the rhythm. */
.cta{position:relative;overflow:hidden;background:var(--paper-2);border-top:1px solid var(--line)}
.cta__fan{top:8%;left:-14%;width:min(60vw,720px);opacity:.10}
.cta .wrap{position:relative;z-index:1}
.cta__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(2.5rem,6vw,4.5rem);align-items:start}
@media (max-width:900px){ .cta__grid{grid-template-columns:minmax(0,1fr)} }
/* colours for .cta live in the type section — nothing to re-declare here */

/* --------------------------------------------------------------------------
   28. UTILITIES
   -------------------------------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{
  position:absolute;left:var(--gut);top:-100px;z-index:100;background:var(--brown);color:#FBF8F0;
  padding:.8rem 1.2rem;border-radius:0 0 var(--r-sm) var(--r-sm);font-weight:700;font-size:.9rem;
  transition:top .3s var(--ez);
}
.skip:focus{top:0}
.center{text-align:center}
.center .lede{margin-inline:auto}
.center .eyebrow{justify-content:center}
.mt0{margin-top:0}.mt1{margin-top:.6rem}.mt2{margin-top:1.2rem}.mt3{margin-top:2rem}.mt4{margin-top:3rem}
.mb2{margin-bottom:1.2rem}.mb3{margin-bottom:2rem}.mb4{margin-bottom:3rem}
.sec-head{margin-bottom:clamp(1.5rem,3vw,2.25rem);max-width:66ch}
.sec-head .mt2{margin-top:.8rem}
.sec-head--split{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;max-width:none}
.sec-head--split > div{max-width:60ch}
.rel{position:relative}

/* ==========================================================================
   29. HOMEPAGE V2 — components added for the client's PPT feedback
   Slides 1-2 (hero + two doors), 3-5 (course catalogue), 8 (what's covered),
   6-7 (why BMIT). Every colour below is checked on white and on cream.
   ========================================================================== */

/* — tagline band the client asked to carry under the hero — */
.strip{background:var(--orange-tint);border-block:1px solid var(--orange-line);padding-block:clamp(.9rem,2vw,1.25rem)}
.strip p{
  text-align:center;font-weight:800;color:#6B3D06;letter-spacing:-.012em;
  font-size:clamp(.95rem,1.7vw,1.18rem);text-wrap:balance;
}

/* — two doors: finance / banking — */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.6rem)}
@media (max-width:760px){ .doors{grid-template-columns:minmax(0,1fr)} }
.door{
  display:block;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.8vw,1.9rem);position:relative;
  transition:border-color .35s var(--ez),box-shadow .35s var(--ez),transform .35s var(--ez);
}
.door:hover{border-color:var(--orange);box-shadow:var(--sh-md);transform:translateY(-2px)}
.door__k{
  display:inline-block;font-size:.68rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.18em;color:var(--orange-ink);margin-bottom:.7rem;
}
.door h3{margin-bottom:.45rem}
.door p{font-size:.96rem;color:var(--ink-2);line-height:1.55;margin-bottom:1rem}
.door__go{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:.9rem;color:var(--orange-ink)}
.door__go svg{width:14px;height:14px;transition:transform .35s var(--ez)}
.door:hover .door__go svg{transform:translateX(4px)}

/* — course cards (slide 5's shape, minus the invented star ratings) — */
.courses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.4rem)}
@media (max-width:980px){ .courses{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .courses{grid-template-columns:minmax(0,1fr)} }
/* Banking has two programmes where finance has three. They share the same
   three-column track so every card is the same width — a two-column variant
   rendered the banking cards at 565px against the finance cards' 369px, which
   read as a different component instead of the same one. */
.courses--2{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){ .courses--2{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .courses--2{grid-template-columns:minmax(0,1fr)} }
/* Tablet: three finance cards in two columns left the third alone on its row.
   It is the full programme, so it takes the whole row and splits its list. */
@media (min-width:641px) and (max-width:980px){
  .courses > .course:last-child:nth-child(odd){grid-column:1/-1}
  .courses > .course:last-child:nth-child(odd) ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.4rem}
}
.course{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.25rem,2.4vw,1.7rem);display:flex;flex-direction:column;
  transition:border-color .35s var(--ez),box-shadow .35s var(--ez);
}
.course:hover{border-color:var(--line-2);box-shadow:var(--sh-md)}
.course__top{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.9rem}
.course__hrs{
  font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:var(--orange-tint);color:var(--orange-deep);padding:.3rem .7rem;border-radius:999px;
}
.course__seats{font-size:.75rem;font-weight:700;color:var(--ink-3)}
/* Photo across the top of each course card (client reference, 29 Sep 2026),
   bleeding to the card edges, with the hours label laid over it. */
.course{overflow:hidden}
.course__thumb{
  position:relative;aspect-ratio:16/9;background:var(--paper-4);
  margin:calc(-1 * clamp(1.25rem,2.4vw,1.7rem)) calc(-1 * clamp(1.25rem,2.4vw,1.7rem)) 1.1rem;
}
.course__thumb img{width:100%;height:100%;object-fit:cover}
.course__tags{position:absolute;left:.85rem;top:.85rem;right:.85rem;display:flex;flex-wrap:wrap;gap:.4rem}
.course__tags > span{box-shadow:0 2px 8px rgba(47,43,54,.18)}
.course__tags .course__seats{background:rgba(255,255,255,.94);color:var(--ink-2);padding:.3rem .7rem;border-radius:999px;font-size:.72rem}
.course h3{margin-bottom:.4rem}
/* Group headings above the two sets of course cards. Deliberately larger than
   a card title so the finance and banking groups read as sections. */
.courses__head{margin-bottom:clamp(1.2rem,2.4vw,1.8rem);scroll-margin-top:2rem}
.courses__h{font-size:clamp(2rem,3.6vw,2.75rem);letter-spacing:-.03em;line-height:1.1;color:var(--brown)}
.courses__sub{margin-top:.45rem;color:var(--ink-2);max-width:60ch}
.course__who{font-size:.88rem;color:var(--ink-2);line-height:1.5;margin-bottom:1.1rem}
.course__inc{
  font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-3);margin-bottom:.6rem;
}
.course ul{display:grid;gap:.45rem;margin-bottom:1.2rem}
.course li{display:grid;grid-template-columns:16px 1fr;gap:.55rem;align-items:start;font-size:.9rem;color:var(--ink-2);line-height:1.45}
.course li svg{width:14px;height:14px;color:var(--green-ink);margin-top:4px}
.course__more{font-size:.82rem;color:var(--ink-3);font-weight:600}
.course__foot{margin-top:auto;padding-top:.2rem}

/* — what the training covers (slide 8) — */
.covers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2rem)}
@media (max-width:900px){ .covers{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:520px){ .covers{grid-template-columns:repeat(2,minmax(0,1fr))} }
.cover{text-align:center}
.cover__ic{
  width:clamp(58px,6vw,70px);aspect-ratio:1;border-radius:999px;background:var(--orange);
  display:grid;place-items:center;margin:0 auto .75rem;color:var(--brown);
}
.cover__ic svg{width:46%;height:46%}
.cover p{font-size:.86rem;font-weight:700;color:var(--ink);line-height:1.3;text-wrap:balance}

/* — why BMIT (slides 6 + 7) — */
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,2vw,1.3rem)}
@media (max-width:620px){ .why{grid-template-columns:minmax(0,1fr)} }
.why__card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.2rem,2.4vw,1.6rem)}
.why__n{
  width:30px;height:30px;border-radius:999px;background:var(--brown);color:#FFF8EE;
  font-size:.78rem;font-weight:800;display:grid;place-items:center;margin-bottom:.85rem;
}
.why__card h3{font-size:1.06rem;margin-bottom:.45rem}
.why__card p{font-size:.92rem;color:var(--ink-2);line-height:1.55}
/* Placement support, merged in from its own section: spans both columns. */
.why__card--wide{grid-column:1/-1;scroll-margin-top:2rem}
.why__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.6rem;margin-top:.9rem}
@media (max-width:620px){ .why__list{grid-template-columns:minmax(0,1fr)} }
.why__list li{font-size:.92rem;color:var(--ink-2);line-height:1.55}
.why__list b{display:block;color:var(--ink);font-size:.95rem;margin-bottom:.2rem}

/* Google Maps embed in a .ph frame. Matches the <img> rule above so the map
   fills the same aspect-ratio box the placeholder occupied. */
.ph__map{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit}

/* Generated illustrations carry a visible label. The page names real people
   in the caption directly beneath some of these, and a reader must never have
   to work out whether they are looking at a photograph of that person.
   Delete `ph--illus` from the markup when the real photograph replaces it. */
.ph--illus::after{
  content:"Illustration";
  position:absolute;right:.6rem;bottom:.6rem;z-index:2;pointer-events:none;
  font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);background:rgba(255,255,255,.88);
  padding:.28rem .52rem;border-radius:99px;border:1px solid var(--line);
}

/* Video modal: a loading state while the YouTube player paints. Without it
   the modal is a black rectangle for a second or two on mobile data. */
.modal__frame.is-loading::after{
  content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border:2.5px solid rgba(255,255,255,.28);border-top-color:#FFF;border-radius:50%;
  animation:vspin .8s linear infinite;
}
@keyframes vspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .modal__frame.is-loading::after{animation-duration:2.4s}
}

/* --------------------------------------------------------------------------
   "What the training covers" ribbon
   The client asked for this as a marquee rather than the static grid of ten
   tiles it used to be. It deliberately reads differently from the skills
   marquee higher up the page: light ground instead of brown, icons instead of
   text pills, and it travels the opposite way, so the two don't scan as the
   same band repeated.
   -------------------------------------------------------------------------- */
.cmarquee{
  overflow:hidden;position:relative;
  padding-block:clamp(1.4rem,3vw,2.1rem);
  margin-top:clamp(1.6rem,3.5vw,2.6rem);
}
.cmarquee::before,.cmarquee::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(36px,9vw,150px);z-index:2;pointer-events:none;
}
.cmarquee::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.cmarquee::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}
.cmarquee__track{display:flex;width:max-content;animation:cmarquee 54s linear infinite}
.cmarquee:hover .cmarquee__track{animation-play-state:paused}
.cmarquee__grp{display:flex;align-items:flex-start;flex:none}
/* Inherits .cover__ic and the label styling, so the icons stay identical. */
.cmarquee__item{
  flex:none;width:clamp(126px,13vw,158px);text-align:center;
  padding-inline:clamp(.45rem,1.1vw,.85rem);
}
.cmarquee__item p{font-size:.86rem;font-weight:700;color:var(--ink);line-height:1.35;text-wrap:balance}
@keyframes cmarquee{from{transform:translateX(-50%)}to{transform:translateX(0)}}

@media (prefers-reduced-motion:reduce){
  .cmarquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .cmarquee__grp:nth-child(2){display:none}   /* the duplicate is only for the loop */
  .cmarquee::before,.cmarquee::after{display:none}
}

/* Monogram where a photograph isn't available yet. The slot was sized for the
   word "Photo"; a single initial needs to read as an avatar, not as fine print.
   Drop in an <img> and it takes over — the rule above already handles it. */
.who__face span{font-size:1.05rem;letter-spacing:0;color:var(--brown)}

/* --------------------------------------------------------------------------
   Legal text (privacy policy): long-form reading, smaller headings
   -------------------------------------------------------------------------- */
.legal h2{font-size:clamp(1.35rem,2.2vw,1.7rem);margin-top:2.75rem}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:1.1rem;margin-top:1.6rem}
.legal h2 + p,.legal h3 + p{margin-top:.75rem}
.legal h2 + h3{margin-top:1rem}
.legal p,.legal li{font-size:1.02rem;line-height:1.7;color:var(--ink-2)}
.legal p + p,.legal p + ul,.legal ul + p{margin-top:.9rem}
.legal h2 + ul{margin-top:.75rem}
.legal ul{padding-left:1.25rem;list-style:disc}
.legal li + li{margin-top:.4rem}
.legal li::marker{color:var(--orange-dp)}
.legal b{color:var(--ink);font-weight:700}