/* ===========================================================
   THE BOB'S BASE ACADEMY  -  design tokens
   Palette sampled from the client logo (logo.svg / logo-dark-green.svg)
   =========================================================== */
:root{
  --green:#119D49;
  --green-lo:#0d7d3a;
  --green-hi:#16c05b;
  --ink:#171C30;
  --ink-2:#10141f;
  --black:#010101;
  --paper:#ffffff;
  --mist:#f4f6f8;
  --line:rgba(23,28,48,.11);
  --line-d:rgba(23,28,48,.11);
  --muted:#5c6a80;
  --muted-d:#5c6a80;
  --line-w:rgba(255,255,255,.22);

  --disp:'Barlow Condensed','Oswald','Haettenschweiler','Arial Narrow',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  /* type scale: 12 14 16 20 24 32 48 64 */
  --t12:.75rem; --t14:.875rem; --t16:1rem; --t20:1.25rem;
  --t24:1.5rem; --t32:2rem; --t48:3rem; --t64:4rem;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --nav-h:76px;
  --r:10px;
  --shadow:0 18px 46px -14px rgba(23,28,48,.22);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;font-family:var(--body);font-size:var(--t16);line-height:1.65;
  color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{max-width:100%;height:auto;display:block}
/* images that must fill a fixed frame opt back in */
.hero-bg img,.hero-bg video,.card-img img,.split-img img,.gal img,
.page-head-bg img,.band-bg img,.who img,.quote img{height:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:.95;
  text-transform:uppercase;letter-spacing:.005em;margin:0}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--green-hi);outline-offset:3px;border-radius:4px}
.sr{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:-9999px;top:0;z-index:200;background:var(--green);color:#fff;padding:12px 20px;font-weight:700}
.skip:focus{left:8px;top:8px}

.wrap{width:min(1240px,92vw);margin-inline:auto}
.wrap-n{width:min(920px,92vw);margin-inline:auto}

/* ---------- eyebrow / section heads ---------- */
.eyebrow{font-family:var(--disp);font-size:var(--t14);letter-spacing:.3em;text-transform:uppercase;
  color:var(--green-lo);font-weight:600;margin:0 0 var(--s2);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--green);flex:none}
.eyebrow.c{justify-content:center}
.h-sec{font-size:clamp(2.25rem,5.2vw,var(--t64));margin:0 0 var(--s3)}
.lede{color:var(--muted);font-size:var(--t18,1.0625rem);max-width:62ch}
.on-dark .lede,.on-dark p{color:#e6ecf5}
.on-dark h1,.on-dark h2,.on-dark h3{color:#fff}
.on-dark .eyebrow{color:#5fe08f}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--disp);font-weight:700;font-size:var(--t16);letter-spacing:.12em;text-transform:uppercase;
  padding:14px 28px;border-radius:6px;border:2px solid transparent;cursor:pointer;
  transition:transform .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease);
  line-height:1;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-p{background:var(--green);color:#fff;box-shadow:0 8px 24px -8px rgba(17,157,73,.7)}
.btn-p:hover{background:var(--green-hi);box-shadow:0 14px 32px -8px rgba(17,157,73,.85)}
.btn-o{border-color:rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(2px);background:rgba(255,255,255,.10)}
.btn-o:hover{border-color:#fff;background:rgba(255,255,255,.2)}
.sec-d .btn-o,.sec-dk .btn-o,.sec-l .btn-o,.sec-m .btn-o{border-color:rgba(23,28,48,.28);color:var(--ink);background:transparent;backdrop-filter:none}
.sec-d .btn-o:hover,.sec-dk .btn-o:hover,.sec-l .btn-o:hover,.sec-m .btn-o:hover{border-color:var(--ink);background:rgba(23,28,48,.06)}
.btn-d{border-color:rgba(23,28,48,.3);color:var(--ink)}
.btn-d:hover{border-color:var(--ink);background:rgba(23,28,48,.06)}
.btn-sm{padding:10px 18px;font-size:var(--t14)}
.btn-lg{padding:18px 38px;font-size:var(--t20)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(16,20,31,0);backdrop-filter:blur(0px);
  transition:background .3s var(--ease),backdrop-filter .3s var(--ease),box-shadow .3s var(--ease),height .3s var(--ease)}
.nav.solid{background:rgba(255,255,255,.96);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line),0 6px 20px -12px rgba(23,28,48,.3);height:64px}
.nav .wrap{display:flex;align-items:center;gap:var(--s3);width:min(1400px,94vw)}
.brand{display:flex;align-items:center;gap:12px;flex:none;margin-right:auto}
.brand img{height:44px;width:44px;transition:height .3s var(--ease),width .3s var(--ease);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.28))}
.nav.solid .brand img{filter:none}
.nav.solid .brand img{height:38px;width:38px}
.brand-txt{font-family:var(--disp);font-size:var(--t20);line-height:.9;text-transform:uppercase;font-weight:700;letter-spacing:.02em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.30);transition:color .3s}
.brand-txt small{display:block;font-size:var(--t12);letter-spacing:.22em;color:var(--green-hi);font-weight:600}
.nav.solid .brand-txt small{color:var(--green-lo)}
.nav-links{display:flex;align-items:center;gap:var(--s3);list-style:none;margin:0;padding:0}
.nav-links a{font-family:var(--disp);font-size:var(--t16);letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:8px 2px;position:relative;color:#fff;transition:color .2s;text-shadow:0 1px 6px rgba(0,0,0,.32)}
.nav.solid .nav-links a{color:var(--ink);text-shadow:none}
.nav.solid .brand-txt{color:var(--ink)}
.nav.solid .burger span{background:var(--ink)}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--green);transition:right .28s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}
.nav.solid .nav-links a[aria-current="page"]{color:var(--green-lo)}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;flex:none}
.burger span{display:block;width:26px;height:2px;background:#fff;margin:5px 0;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer - SOLID panel + backdrop (playbook §2) */
.scrim{position:fixed;inset:0;background:rgba(1,1,1,.72);opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility .3s;z-index:110}
.scrim.on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(360px,88vw);z-index:120;
  background:#0d111c;border-left:1px solid rgba(255,255,255,.08);
  transform:translateX(105%);transition:transform .36s var(--ease);
  display:flex;flex-direction:column;padding:var(--s3);overflow-y:auto;box-shadow:-24px 0 60px rgba(0,0,0,.6)}
.drawer.on{transform:translateX(0)}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4)}
.drawer-top img{height:42px;width:42px}
.x{background:none;border:0;color:#fff;font-size:30px;line-height:1;cursor:pointer;padding:6px 12px;font-family:var(--body)}
.drawer nav ul{list-style:none;margin:0 0 var(--s4);padding:0}
.drawer nav li{border-bottom:1px solid rgba(255,255,255,.09)}
.drawer nav a{display:block;padding:16px 4px;font-family:var(--disp);font-size:var(--t24);
  text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:#fff;min-height:44px}
.drawer nav a[aria-current="page"]{color:var(--green-hi)}
.drawer .btn{width:100%}
.drawer-foot{margin-top:auto;padding-top:var(--s3);color:var(--muted);font-size:var(--t14)}
.drawer-foot a{color:var(--green-hi)}
body.lock{overflow:hidden}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + var(--s5)) 0 var(--s5);overflow:hidden;background:#05070c}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img,.hero-bg video{width:100%;height:100%;object-fit:cover}
/* Light touch. A directional scrim anchored to the copy on the left, plus a
   soft bottom fade, instead of one flat wash over the whole frame. The right
   two thirds of the footage stay essentially untouched. */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(6,10,18,.78) 0%,rgba(6,10,18,.55) 26%,rgba(6,10,18,.18) 52%,rgba(6,10,18,0) 72%),
    linear-gradient(180deg,rgba(6,10,18,.58) 0%,rgba(6,10,18,.12) 20%,rgba(6,10,18,0) 60%,rgba(6,10,18,.42) 100%)}
.hero .wrap{position:relative;z-index:2;max-width:min(1240px,92vw)}
.hero-copy{max-width:660px}
.hero-logo{width:clamp(150px,17vw,210px);height:auto;aspect-ratio:1;margin:0 0 var(--s3);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.34))}
.hero h1{font-size:clamp(2.75rem,8vw,6rem);margin:0 0 var(--s2);color:#fff;text-shadow:0 4px 28px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4)}
.hero h1 .g{color:var(--green-hi)}
.hero-sub{font-size:clamp(1rem,1.35vw,1.1875rem);color:#eef3fa;max-width:52ch;margin-bottom:var(--s4);line-height:1.6;text-shadow:0 1px 3px rgba(0,0,0,.8),0 2px 20px rgba(0,0,0,.6)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.hero-stats{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line-w)}
.stat b{display:block;font-family:var(--disp);font-size:clamp(2rem,4.4vw,3.25rem);line-height:.9;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.55)}
.stat span{font-size:var(--t12);letter-spacing:.2em;text-transform:uppercase;color:#dbe4f0;font-family:var(--disp);font-weight:600;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.vbtn{display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);
  color:#fff;border-radius:999px;padding:10px 22px 10px 10px;cursor:pointer;font-family:var(--disp);
  font-size:var(--t14);letter-spacing:.16em;text-transform:uppercase;font-weight:600;transition:background .2s,border-color .2s}
.vbtn:hover{background:rgba(255,255,255,.2);border-color:#fff}
.vbtn i{width:34px;height:34px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex:none}
.vbtn i::before{content:"";border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}

/* diagonal slant motif - taken from the logo's diagonal */
.slant{position:absolute;z-index:1;pointer-events:none;
  background:var(--green);opacity:.9;
  clip-path:polygon(62% 0,100% 0,38% 100%,0 100%)}


/* ---------- generic sections ---------- */
.sec{padding:var(--s7) 0;position:relative}
.sec-d{background:var(--paper)}
.sec-dk{background:var(--mist)}
.sec-l{background:var(--paper);color:var(--ink)}
.sec-m{background:var(--mist);color:var(--ink)}
.sec-d,.sec-dk,.sec-l,.sec-m{color:var(--ink)}
.sec-d h2,.sec-dk h2,.sec-l h2,.sec-m h2,
.sec-d h3,.sec-dk h3,.sec-l h3,.sec-m h3{color:var(--ink)}
/* one dark section type kept for contrast */
.sec-ink{background:var(--ink);color:#e8edf5}
.sec-ink h2,.sec-ink h3{color:#fff}
.sec-ink .lede,.sec-ink p{color:#c3cede}
.sec-ink .eyebrow{color:#5fe08f}
.sec-ink .card{background:#1d2437;border-color:rgba(255,255,255,.12)}
.sec-ink .card-p,.sec-ink .card-meta{color:#a9b6ca}
.sec-ink .card-f{border-top-color:rgba(255,255,255,.12)}
.sec-ink .price{color:#5fe08f}
.sec-ink .date-row{background:#1d2437;border-color:rgba(255,255,255,.12)}
.sec-ink .dchip{background:#141a29;border-color:rgba(255,255,255,.12)}
.sec-ink .date-row .loc,.sec-ink .dchip span{color:#a9b6ca}
.sec-ink .dchip b{color:#5fe08f}
.sec-ink .quote{background:#1d2437;border-color:rgba(255,255,255,.12)}
.sec-ink .quote p{color:#d5deeb}
.sec-ink .who{border-top-color:rgba(255,255,255,.12)}
.sec-ink .who span{color:#a9b6ca}
.sec-ink .spec div{background:#1d2437}
.sec-ink .spec dd{color:#fff}
.sec-ink .ul-check li::before{border-color:#5fe08f}
.sec-head{margin-bottom:var(--s5)}
.sec-head.c{text-align:center;max-width:820px;margin-inline:auto}
.sec-head.c .lede{margin-inline:auto}
.sec-head.row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}

/* ---------- course cards ---------- */
.grid{display:grid;gap:var(--s3)}
.g3{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}
.card{position:relative;border-radius:var(--r);overflow:hidden;background:#fff;
  border:1px solid var(--line);display:flex;flex-direction:column;box-shadow:0 2px 10px -6px rgba(23,28,48,.18);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{transform:translateY(-6px);border-color:rgba(17,157,73,.6);box-shadow:var(--shadow)}
.card-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:#e6ebf1}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .card-img img{transform:scale(1.06)}
.card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(10,13,21,.30) 100%)}
.tag{position:absolute;top:14px;left:14px;z-index:2;background:var(--green);color:#fff;
  font-family:var(--disp);font-size:var(--t12);letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  padding:6px 12px;border-radius:4px}
.card-b{padding:var(--s3);display:flex;flex-direction:column;flex:1;gap:12px}
.card-b h3{font-size:var(--t32);line-height:.94}
.card-meta{display:flex;flex-wrap:wrap;gap:14px;font-family:var(--disp);font-size:var(--t14);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.card-meta span{display:inline-flex;align-items:center;gap:6px}
.card-p{color:var(--muted);font-size:var(--t14);line-height:1.6;margin:0}
.price{font-family:var(--disp);font-size:var(--t32);color:var(--green-lo);line-height:1;font-weight:700}
.card-f{margin-top:auto;padding-top:var(--s2);display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  border-top:1px solid var(--line)}


/* ---------- date / calendar rows ---------- */
.date-row{display:grid;grid-template-columns:150px 1fr auto;gap:var(--s3);align-items:center;
  padding:var(--s3);border:1px solid var(--line);border-radius:var(--r);background:#fff;
  box-shadow:0 2px 10px -8px rgba(23,28,48,.25);
  transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s}
.date-row:hover{border-color:rgba(17,157,73,.6);transform:translateX(4px)}
.date-row + .date-row{margin-top:12px}
.dchip{font-family:var(--disp);text-align:center;background:var(--mist);border:1px solid var(--line);
  border-radius:8px;padding:12px 8px;line-height:1}
.dchip b{display:block;font-size:var(--t32);color:var(--green-lo)}
.dchip span{font-size:var(--t12);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
.date-row h4{font-size:var(--t24);margin-bottom:4px}
.date-row .loc{font-size:var(--t14);color:var(--muted);font-family:var(--disp);letter-spacing:.1em;text-transform:uppercase;font-weight:600}


/* ---------- testimonials ---------- */
.quotes{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);box-shadow:0 2px 12px -8px rgba(23,28,48,.22);
  position:relative;display:flex;flex-direction:column;gap:var(--s2)}

.quote p{margin:0;font-size:var(--t14);line-height:1.75;color:#33405a;position:relative}
.who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--line)}
.who img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--green)}
.who b{font-family:var(--disp);font-size:var(--t20);letter-spacing:.04em;text-transform:uppercase;display:block;line-height:1.1}
.who span{font-size:var(--t12);color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-family:var(--disp);font-weight:600}


/* ---------- split / feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center}
.split.rev .split-img{order:2}
.split-img{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.split-img img{width:100%;height:100%;object-fit:cover}
.split-img .slant{right:0;top:0;width:74px;height:128px;opacity:.92}
.ul-check{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ul-check li{position:relative;padding-left:30px;font-size:var(--t14);line-height:1.6}
.ul-check li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:9px;
  border-left:2.5px solid var(--green-hi);border-bottom:2.5px solid var(--green-hi);transform:rotate(-45deg)}
.sec-l .ul-check li::before,.sec-m .ul-check li::before{border-color:var(--green-lo)}
.ul-2{grid-template-columns:1fr 1fr}

/* ---------- CTA band ---------- */
.band{position:relative;padding:var(--s7) 0;overflow:hidden;background:#05070c;text-align:center}
.band-bg{position:absolute;inset:0;z-index:0}
.band-bg img{width:100%;height:100%;object-fit:cover;opacity:1}
.band-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,20,.46),rgba(8,12,20,.66))}
.band .wrap{position:relative;z-index:2}
.band h2{font-size:clamp(2.5rem,6vw,4.5rem);margin-bottom:var(--s2);color:#fff;text-shadow:0 4px 26px rgba(0,0,0,.5)}
.band p{color:#f0f4fa;max-width:56ch;margin-inline:auto;margin-bottom:var(--s4);text-shadow:0 2px 14px rgba(0,0,0,.7)}

/* ---------- footer ---------- */
.foot{background:var(--mist);border-top:1px solid var(--line);padding:var(--s6) 0 var(--s3)}
.foot-g{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--s5)}
.foot img.fl{width:110px;height:110px;margin-bottom:var(--s2)}
.foot h5{font-family:var(--disp);font-size:var(--t16);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);margin:0 0 var(--s2);font-weight:700}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.foot a{color:var(--muted);font-size:var(--t14);transition:color .2s}
.foot a:not(.btn):hover{color:var(--green-lo)}

.foot p{color:var(--muted);font-size:var(--t14)}
.socials{display:flex;gap:12px;margin-top:var(--s2)}
.socials a{width:42px;height:42px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;
  transition:background .2s,border-color .2s}
.socials a:hover{background:var(--green);border-color:var(--green)}
.foot .fl{filter:none}
.socials svg{width:19px;height:19px;fill:var(--ink);transition:fill .2s}
.socials a:hover svg{fill:#fff}
.foot-b{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;color:var(--muted);font-size:var(--t12)}

/* ---------- forms ---------- */
.form{display:grid;gap:var(--s3)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.field{display:grid;gap:8px}
.field label{font-family:var(--disp);font-size:var(--t14);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.field .req{color:var(--green-hi)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:var(--t16);padding:14px 16px;border-radius:8px;
  background:#fff;border:1px solid rgba(23,28,48,.20);color:var(--ink);width:100%;
  transition:border-color .2s,background .2s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);background:#fff;outline:none;box-shadow:0 0 0 3px rgba(17,157,73,.15)}
.field select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%235c6a80' d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px;padding-right:44px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-note{font-size:var(--t12);color:var(--muted)}

.alert{padding:16px 20px;border-radius:8px;border-left:4px solid var(--green);background:rgba(17,157,73,.10);font-size:var(--t14);color:var(--ink)}

/* ---------- misc ---------- */
.crumb{font-family:var(--disp);font-size:var(--t14);letter-spacing:.14em;text-transform:uppercase;
  color:#dbe4f0;font-weight:600;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:var(--s2)}
.crumb a:hover{color:var(--green-hi)}
.crumb i{opacity:.5;font-style:normal}
.page-head{position:relative;padding:calc(var(--nav-h) + var(--s6)) 0 var(--s6);overflow:hidden;background:#05070c}
.page-head-bg{position:absolute;inset:0;z-index:0}
.page-head-bg img{width:100%;height:100%;object-fit:cover;opacity:1}
.page-head-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(6,10,18,.74) 0%,rgba(6,10,18,.5) 28%,rgba(6,10,18,.14) 56%,rgba(6,10,18,0) 76%),
    linear-gradient(180deg,rgba(6,10,18,.62) 0%,rgba(6,10,18,.18) 18%,rgba(6,10,18,0) 40%,rgba(6,10,18,.30) 100%)}
.page-head .wrap{position:relative;z-index:2}
.page-head .lede,.page-head h1{max-width:660px}
.page-head h1{font-size:clamp(2.75rem,7vw,5rem);margin-bottom:var(--s2);color:#fff;text-shadow:0 4px 26px rgba(0,0,0,.5)}
.page-head .lede{color:#f0f4fa;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.page-head .eyebrow{color:#7ff0a8}
.page-head .crumb{color:#dbe4f0;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(17,157,73,.14);border:1px solid rgba(17,157,73,.5);
  color:var(--green-lo);font-family:var(--disp);font-size:var(--t12);letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;padding:6px 14px;border-radius:999px}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:var(--s4) 0}
.spec div{background:#fff;padding:var(--s3)}
.spec dt{font-family:var(--disp);font-size:var(--t12);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px}
.spec dd{margin:0;font-family:var(--disp);font-size:var(--t24);color:var(--ink);line-height:1}
.spec dd.g{color:var(--green-lo)}
.gal{columns:260px 4;column-gap:14px}
.gal a,.gal figure{position:relative;border-radius:8px;overflow:hidden;margin:0 0 14px;display:block;background:#e6ebf1;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}
.gal img{width:100%;height:auto;display:block;transition:transform .5s var(--ease)}
.gal a:hover img,.gal figure:hover img{transform:scale(1.07)}



/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .foot-g{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .split{grid-template-columns:1fr;gap:var(--s4)}
  .split.rev .split-img{order:0}
  
}
@media (max-width:860px){
  .nav-links{display:none}
  .nav .btn{display:none}
  .burger{display:block}
  .brand img{height:40px}
  .nav.solid .brand img{height:34px}
  .sec{padding:var(--s6) 0}
  .hero-stats{gap:var(--s3);justify-content:space-between;width:100%}
  .stat{min-width:29%}
  .date-row{grid-template-columns:96px 1fr;gap:var(--s2)}
  .date-row .btn{grid-column:1 / -1;width:100%}
  .dchip b{font-size:var(--t24)}
  .f-row{grid-template-columns:1fr}
  .ul-2{grid-template-columns:1fr}
  .spec{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .foot-g{grid-template-columns:1fr}
  .hero-logo{width:clamp(112px,30vw,158px)}
  .slant-hero{display:none}
  
}

/* page-head pill sits on photography */
.page-head .pill{color:#eafff2;background:rgba(17,157,73,.55);border-color:rgba(255,255,255,.5);backdrop-filter:blur(3px)}
.page-head .btn-o{border-color:rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.12)}
.hero .btn-o{border-color:rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.12)}

/* ================= MONTH-GRID CALENDAR ================= */
.legend{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin-bottom:var(--s5)}
.lg{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-size:var(--t14);
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.lg i{width:14px;height:14px;border-radius:4px;flex:none}
.months{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s3)}
.month{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);
  box-shadow:0 2px 12px -8px rgba(23,28,48,.22)}
.month h3{font-size:var(--t24);margin-bottom:var(--s2);color:var(--ink);letter-spacing:.04em}
.month table{width:100%;border-collapse:collapse;table-layout:fixed}
.month th{font-family:var(--disp);font-size:var(--t12);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding-bottom:8px}
.month th abbr{text-decoration:none;border:0}
.month td{text-align:center;padding:0;height:38px;position:relative}
.month td .d{display:grid;place-items:center;width:100%;height:34px;font-family:var(--disp);
  font-size:var(--t16);font-weight:500;color:#59677e;border-radius:6px}
.month td.pad{visibility:hidden}
.month td.on{background:color-mix(in srgb,var(--c) 16%,transparent)}
.month td.on.s{border-radius:8px 0 0 8px}
.month td.on.e{border-radius:0 8px 8px 0}
.month td.on.s.e{border-radius:8px}
.month td.on a{display:block;height:100%}
.month td.on .d{background:var(--c);color:#fff;font-weight:700;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.month td.on a:hover .d{transform:scale(1.12);box-shadow:0 4px 14px -4px var(--c)}
@supports not (background:color-mix(in srgb,red 10%,transparent)){
  .month td.on{background:rgba(17,157,73,.14)}
}

/* ================= FILM PLAYER ================= */
.film{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#05070c;
  box-shadow:0 20px 50px -18px rgba(23,28,48,.45);margin-inline:auto}
.film video{width:100%;height:100%;object-fit:cover;display:block}
/* portrait (phone-shot) film: source is 9:16, so match the box or cover crops the middle out */
.film-p{aspect-ratio:9/16;max-width:400px}

/* hero video */
.hero-vid{width:100%;height:100%;object-fit:cover}
.hero-vid.poster-only{background-size:cover;background-position:center}
[data-play][hidden]{display:none}

/* gallery centred + tidy */
.gal{max-width:1240px;margin-inline:auto}
.gal figure{margin:0 0 14px}

/* light-theme drawer stays solid + readable */
.drawer{background:#ffffff;border-left:1px solid var(--line)}
.drawer nav li{border-bottom:1px solid var(--line)}
.drawer nav a{color:var(--ink)}
.drawer nav a[aria-current="page"]{color:var(--green-lo)}
.drawer .x{color:var(--ink)}
.drawer-foot{color:var(--muted)}
.drawer-foot a{color:var(--green-lo)}

/* ============ HERO / BANNER CROPPING + READABILITY FIXES ============ */

/* taller page heads so subjects are not squeezed out of a thin band */
.page-head{padding:calc(var(--nav-h) + var(--s7)) 0 var(--s7);min-height:min(84vh,740px);
  display:flex;align-items:center}
.page-head-bg img{object-position:center 35%}

/* taller CTA band, and give the photo room to breathe */
.band-tall{padding:var(--s8) 0;min-height:min(70vh,620px);display:flex;align-items:center}
/* ONE-OFF: the calendar CTA band only. Taller so the jumper and the cliff he is
   standing on are both visible, while keeping the cloud sea above. Every other
   band keeps the uniform .band-tall height. */
.band-xl{min-height:min(94vh,980px)}
.band-tall .band-bg img{object-position:center 30%}

/* the outline button was grey-on-photo; force white on dark ground */
.hero .btn-o,.page-head .btn-o,.band .btn-o{color:#fff;border-color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.14);backdrop-filter:blur(3px)}
.hero .btn-o:hover,.page-head .btn-o:hover,.band .btn-o:hover{background:rgba(255,255,255,.26);border-color:#fff}
.vbtn{color:#fff;text-decoration:none}

/* ---- FOOTER: green pill headings so the columns separate clearly ---- */


/* every primary button keeps white text, never inherits a grey */
.btn-p,.btn-p:visited,.btn-p:hover{color:#fff}
a.btn-p{color:#fff}


/* ==================== FOOTER - gradient pill ====================
   A single large rounded panel sitting on the white page, with a
   left-to-right green ramp inside it. */
.foot{background:var(--paper);border-top:0;padding:var(--s5) 0 var(--s4)}
.foot-pill{
  position:relative;overflow:hidden;
  border-radius:44px;
  padding:var(--s6) var(--s5) var(--s4);
  background:linear-gradient(90deg,#0b5f2f 0%,#119D49 46%,#16c05b 78%,#3ad97a 100%);
  color:#fff;
  box-shadow:0 26px 60px -28px rgba(11,95,47,.65)}
.foot-pill::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 88% 8%,rgba(255,255,255,.22),transparent 46%)}
.foot-pill > *{position:relative;z-index:2}
.foot img.fl{width:100px;height:100px;margin-bottom:var(--s2);
  filter:brightness(0) invert(1) drop-shadow(0 6px 18px rgba(0,0,0,.28))}
.foot h5{font-family:var(--disp);font-size:var(--t14);letter-spacing:.2em;text-transform:uppercase;
  color:#eafff2;margin:0 0 var(--s2);font-weight:700;font-size:var(--t20);
  padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.28)}
.foot p{color:rgba(255,255,255,.92);font-size:var(--t16);line-height:1.7}
.foot a{color:rgba(255,255,255,.92);font-size:var(--t16);transition:color .2s,padding-left .2s}
.foot a:not(.btn):hover{color:#fff;padding-left:5px}
.foot .btn-p{background:#fff;color:#0b5f2f;box-shadow:0 10px 24px -12px rgba(0,0,0,.55)}
.foot .btn-p:hover{background:#eafff2;color:#0b5f2f}
.foot .socials a{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);padding:0}
.foot .socials a:hover{background:#fff;transform:translateY(-3px);border-color:#fff}
.foot .socials svg{fill:#fff;transition:fill .2s}
.foot .socials a:hover svg{fill:#0b5f2f}
.foot-b{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.28);
  color:rgba(255,255,255,.9);font-size:var(--t14)}
@media (max-width:860px){
  .foot{padding:var(--s4) 0 var(--s3)}
  .foot-pill{border-radius:30px;padding:var(--s5) var(--s3) var(--s3);
    background:linear-gradient(160deg,#0b5f2f 0%,#119D49 52%,#3ad97a 100%)}
}

/* ============ MOBILE TAP TARGETS (>=44px) ============ */
@media (max-width:860px){
  .btn{min-height:48px;padding:14px 26px}
  .btn-sm{min-height:44px;padding:12px 20px;font-size:var(--t14)}
  .btn-lg{min-height:54px}
  .vbtn{min-height:48px}
  /* footer + nav link rows get a real touch area */
  .foot ul li a,.foot .fcontact a{display:block;min-height:44px;line-height:1.4;
    padding-top:11px;padding-bottom:11px}
  .foot-b{line-height:2}
  .brand{min-height:44px}
  .crumb a{display:inline-block;padding:6px 0;min-height:34px}
  .month td .d{height:40px}
  .month td{height:44px}
  /* calendar grid: one month per row so days stay tappable */
  .months{grid-template-columns:1fr}
}
@media (max-width:400px){
  .month td .d{font-size:var(--t14)}
}

/* ---- logo variant swap: white over photography, colour on white nav ---- */
.brand{position:relative}
.brand .lg-c{display:none}
.nav.solid .brand .lg-w{display:none}
.nav.solid .brand .lg-c{display:block}

/* on-request chip: 'TBA' needs a smaller face than a 2-digit day */
.dchip b:not(:only-child){font-size:var(--t32)}
.date-row .dchip b{font-size:clamp(1.25rem,2.4vw,var(--t32))}

/* ============ MOBILE SCRIMS =====================================
   The desktop scrims are DIRECTIONAL (100deg) so the copy sits on a
   dark left third while the right two thirds of the photo stay clean.
   On a narrow tall phone that same angle stretches the dark end across
   the whole frame and the photo reads as almost black. On mobile use a
   vertical, bottom-weighted scrim instead: the middle of the picture
   stays bright and the type still has ground to sit on.
   ================================================================ */
@media (max-width:860px){
  .hero-bg::after{
    background:linear-gradient(180deg,
      rgba(6,10,18,.52) 0%,
      rgba(6,10,18,.16) 20%,
      rgba(6,10,18,.10) 44%,
      rgba(6,10,18,.62) 82%,
      rgba(6,10,18,.80) 100%)}
  .page-head-bg::after{
    background:linear-gradient(180deg,
      rgba(6,10,18,.56) 0%,
      rgba(6,10,18,.18) 22%,
      rgba(6,10,18,.14) 46%,
      rgba(6,10,18,.60) 84%,
      rgba(6,10,18,.74) 100%)}
  .band-tall .band-bg::after,.band-bg::after{
    background:linear-gradient(180deg,
      rgba(6,10,18,.50) 0%,
      rgba(6,10,18,.34) 40%,
      rgba(6,10,18,.62) 100%)}
  /* copy sits low so it lands on the darker bottom third */
  .page-head{align-items:flex-end;min-height:min(76vh,620px);
    padding-bottom:var(--s5)}
  .hero{align-items:flex-end;padding-bottom:var(--s5)}
}

/* ==================== NEWSLETTER BAND ====================
   Rebuild of the green "Subscribe To Newsletter" strip the original
   site ran directly above the footer. */
.news{position:relative;overflow:hidden;color:#fff;padding:var(--s6) 0;
  background:linear-gradient(90deg,#0f1524 0%,#171C30 48%,#1d2740 100%)}
.news::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 88% 10%,rgba(17,157,73,.28),transparent 52%)}
.news .wrap{position:relative;z-index:2}
.news-in{display:grid;grid-template-columns:1fr auto;gap:var(--s3) var(--s5);align-items:center}
.news h2{font-size:clamp(1.75rem,3.4vw,var(--t48));color:#fff;grid-column:1;margin:0}
.news h2 span{color:#5fe08f}
.news p{grid-column:1;grid-row:2;margin:0;color:rgba(255,255,255,.9);font-size:var(--t16);max-width:52ch}
.news-form{grid-column:2;grid-row:1 / span 2;display:flex;gap:12px;align-items:center}
/* subscribe confirmation takes the form's place (it was inheriting .news p -> row 2 over the blurb) */
.news .news-ok{grid-column:2;grid-row:1 / span 2;align-self:center;margin:0;max-width:none;padding:14px 20px;border-radius:10px;background:rgba(95,224,143,.14);border:1px solid rgba(95,224,143,.55);color:#fff;font-weight:600;font-size:var(--t16)}
.news-form input[type=email]{font-family:var(--body);font-size:var(--t16);padding:15px 18px;
  border-radius:8px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.14);
  color:#fff;min-width:290px;transition:background .2s,border-color .2s}
.news-form input[type=email]::placeholder{color:rgba(255,255,255,.75)}
.news-form input[type=email]:focus{outline:none;background:#fff;color:var(--ink);border-color:#fff}
.news-form input[type=email]:focus::placeholder{color:var(--muted)}
.news-form .btn-p{background:var(--green);color:#fff;box-shadow:0 10px 24px -12px rgba(17,157,73,.8)}
.news-form .btn-p:hover{background:var(--green-hi);color:#fff}
.news-ok{grid-column:1 / -1;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);
  border-radius:8px;padding:14px 18px;font-weight:600}
@media (max-width:860px){
  .news{padding:var(--s5) 0}
  .news-in{grid-template-columns:1fr}
  .news h2,.news p,.news-form{grid-column:1;grid-row:auto}
  .news .news-ok{grid-column:1;grid-row:auto;justify-self:start}
  .news-form{flex-direction:column;align-items:stretch;width:100%;margin-top:var(--s2)}
  .news-form input[type=email]{min-width:0;width:100%;min-height:50px}
  .news-form .btn{width:100%}
}

/* ---- "official instructor" seal, as the original site used on the
        Julia and Scotty portraits, with the thick green rule beneath ---- */
.split-img.badged{border-bottom:8px solid var(--green)}
/* Always top-LEFT and small. Never place this over a face. */
.split-img .badge{position:absolute;top:18px;left:18px;right:auto;z-index:3;
  width:clamp(54px,5.6vw,78px);height:auto;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.45))}
.split.rev .split-img .badge{left:18px;right:auto}
@media (max-width:860px){
  .split-img .badge{top:12px;left:12px;right:auto;width:52px}
  .split.rev .split-img .badge{left:12px;right:auto}
}

/* ---- continuous calendar shell ---- */
.cal{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);
  box-shadow:0 2px 12px -8px rgba(23,28,48,.22);max-width:620px;margin-inline:auto}
.cal-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  margin-bottom:var(--s2)}
.cal-bar h3{font-size:var(--t24);color:var(--ink);letter-spacing:.04em;margin:0;text-align:center;flex:1}
.cal-nav{width:44px;height:44px;flex:none;border-radius:10px;cursor:pointer;
  background:var(--mist);border:1px solid var(--line);color:var(--ink);
  font-size:26px;line-height:1;font-family:var(--body);
  transition:background .2s,border-color .2s,color .2s}
.cal-nav:hover{background:var(--green);border-color:var(--green);color:#fff}
.cal table{width:100%;border-collapse:collapse;table-layout:fixed}
.cal th{font-family:var(--disp);font-size:var(--t12);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding-bottom:8px}
.cal th abbr{text-decoration:none;border:0}
.cal td{text-align:center;padding:0;height:46px;position:relative}
.cal td .d{display:grid;place-items:center;width:100%;height:42px;font-family:var(--disp);
  font-size:var(--t20);font-weight:500;color:#59677e;border-radius:8px}
.cal td.pad{visibility:hidden}
.cal td.on{background:color-mix(in srgb,var(--c) 16%,transparent)}
.cal td.on.s{border-radius:10px 0 0 10px}
.cal td.on.e{border-radius:0 10px 10px 0}
.cal td.on.s.e{border-radius:10px}
.cal td.on a{display:block;height:100%}
.cal td.on .d{background:var(--c);color:#fff;font-weight:700;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.cal td.on a:hover .d{transform:scale(1.1);box-shadow:0 4px 14px -4px var(--c)}
.cal-hint{margin:var(--s2) 0 0;font-size:var(--t14);color:var(--muted);text-align:center}
.cal-hint a{color:var(--green-lo);font-weight:600}
@supports not (background:color-mix(in srgb,red 10%,transparent)){
  .cal td.on{background:rgba(17,157,73,.14)}
}

/* ==================== TEAM MEMBER BIOS ====================
   Julia's entry carries a role line, credential chips, a stat strip, a
   two-column body with a film feature, and a closing pull quote. Every
   piece is optional so a sparser member still reads correctly. */
.m-role{font-family:var(--disp);font-size:var(--t16);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--muted);margin:0 0 var(--s2)}
.sec-dk .m-role{color:var(--muted)}

.m-creds{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:var(--s3) 0 0}
.m-creds li{font-family:var(--disp);font-size:var(--t12);letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;padding:7px 13px;border-radius:999px;
  background:rgba(17,157,73,.12);border:1px solid rgba(17,157,73,.42);color:var(--green-lo)}

.m-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  margin:var(--s5) 0 0}
.m-stats div{background:#fff;padding:var(--s3) var(--s2);text-align:center}
.sec-dk .m-stats div{background:var(--mist)}
.m-stats b{display:block;font-family:var(--disp);font-size:clamp(1.75rem,3.4vw,var(--t48));
  line-height:.9;color:var(--green-lo)}
.m-stats span{font-family:var(--disp);font-size:var(--t12);letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:600}

.m-body{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--s5);align-items:start;margin-top:var(--s5)}
.m-prose .lede{max-width:none}
.m-sponsor{font-size:var(--t14);color:var(--muted);border-left:3px solid var(--green);
  padding-left:var(--s2);margin-top:var(--s3)}

/* National Geographic film callout */
.m-feature{background:var(--ink);color:#fff;border-radius:var(--r);padding:var(--s4) var(--s3);
  position:relative;overflow:hidden;box-shadow:0 18px 44px -22px rgba(23,28,48,.55)}
.m-feature::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 88% 6%,rgba(17,157,73,.32),transparent 56%)}
.m-feature > *{position:relative;z-index:2}
.m-feature-k{font-family:var(--disp);font-size:var(--t12);letter-spacing:.28em;text-transform:uppercase;
  color:#5fe08f;font-weight:700;margin:0 0 6px}
.m-feature-t{font-family:var(--disp);font-size:var(--t64);line-height:.85;letter-spacing:.06em;
  color:#fff;margin:0;font-weight:700}
.m-feature-s{font-family:var(--disp);font-size:var(--t14);letter-spacing:.16em;text-transform:uppercase;
  color:#fff;opacity:.85;margin:6px 0 var(--s2);font-weight:600}
.m-feature-x{font-size:var(--t14);line-height:1.7;color:#c3cede;margin:0}

.m-pull{margin:var(--s5) 0 0;padding:var(--s4) 0 0;border-top:2px solid var(--green);
  font-family:var(--disp);font-size:clamp(1.35rem,2.6vw,var(--t32));line-height:1.15;
  text-transform:uppercase;letter-spacing:.02em;color:var(--ink);max-width:34ch}
.sec-dk .m-pull{color:var(--ink)}

@media (max-width:860px){
  .m-body{grid-template-columns:1fr;gap:var(--s4)}
  .m-stats{grid-template-columns:1fr 1fr}
  .m-feature-t{font-size:var(--t48)}
  .m-creds li{font-size:11px;padding:6px 11px}
}


/* pull quote reads better centred under the full-width block */
.m-pull{max-width:52ch}

/* ---- TEAM PORTRAITS ----
   Both sources are LANDSCAPE (Julia 1.84:1, Scotty 1.61:1). A portrait frame
   cut Julia in half; the full frame was too wide and lost her. A 4:3 window
   with a per-person focal point keeps the whole subject in shot AND keeps the
   mountain background. Focal points live in POS{} in build.py:
   Julia 72% (she stands right of centre), Scotty 50% (centred). */
.split-img.badged{aspect-ratio:4/3;height:auto;align-self:start}
.split-img.badged img:not(.badge){height:100%;width:100%;object-fit:cover}

/* A member with no feature card (Scotty, until his bio lands) should not leave
   an empty right column - the prose takes the full measure instead. */
.m-body:not(:has(.m-feature)):not(:has(.m-photo2)){grid-template-columns:1fr}
.m-body:not(:has(.m-feature)):not(:has(.m-photo2)) .m-prose{max-width:72ch}
@supports not selector(:has(*)){
  .m-body{grid-template-columns:1fr}
  .m-body .m-feature,.m-body .m-photo2{max-width:420px}
}
@media (min-width:861px){
  @supports selector(:has(*)){
    .m-body:has(.m-feature),.m-body:has(.m-photo2){grid-template-columns:1.6fr 1fr}
  }
}

/* secondary action photo in a member's right column (used where another
   member has a film feature card) */
.m-photo2{margin:0;border-radius:var(--r);overflow:hidden;background:#0a0d15;
  box-shadow:0 18px 44px -22px rgba(23,28,48,.5)}
.m-photo2 img{width:100%;height:auto;display:block}
.m-photo2 figcaption{font-family:var(--disp);font-size:var(--t12);letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;color:#fff;background:var(--ink);
  padding:12px 16px}

/* portrait phone photos in the gallery keep their shape instead of being
   cropped into a landscape tile */
.gal figure.tall{aspect-ratio:auto}

/* The green slant was decorative only, and on the American Southwest photo it
   landed directly over a jumper's face. Never let ornament cover a subject. */
.split-img .slant{display:none}

/* GLOBAL: there was no author [hidden] rule, only the browser default, which any
   component display rule (.news-form flex, .date-row, .pill) silently beats. That left JS-hidden
   things visible: past course dates, the newsletter form after subscribing, the empty apply pill. */
[hidden]{display:none!important}