/* =============================================================================
   RENZO GRACIE LOS ANGELES — "THE ACADEMY"
   Palette: #041034 navy · #a9acb2 steel · #dee3de bone  (strict 3, tonally extended)
   Type:    Archivo (display) · Instrument Serif (accent) · Instrument Sans (body)
   ============================================================================= */

/* --- 01 TOKENS ------------------------------------------------------------ */
:root{
  /* three brand colors, tonally extended — no fourth hue */
  --navy:#041034;
  --navy-950:#020a22;
  --navy-900:#041034;
  --navy-850:#071747;
  --navy-800:#0a1c4d;
  --navy-700:#142a5e;
  --navy-600:#22376c;

  --crest:#0032a1;        /* the blue from the RGLA crest */
  --crest-dark:#00256f;
  --steel:#a9acb2;
  --steel-dark:#6c7078;
  --steel-deep:#4b4f57;

  --bone:#dee3de;
  --bone-50:#f5f7f4;
  --bone-100:#eceee9;
  --bone-200:#dee3de;
  --bone-300:#ccd2cb;
  --bone-400:#b6bdb5;

  --rule-d:rgba(222,227,222,.16);
  --rule-d-soft:rgba(222,227,222,.08);
  --rule-l:rgba(4,16,52,.14);
  --rule-l-soft:rgba(4,16,52,.07);

  --display:"Archivo","Archivo Expanded","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;

  --wrap:1280px;
  --narrow:940px;
  --gut:clamp(20px,5vw,60px);
  --sec:clamp(72px,10vw,148px);
  --ease:cubic-bezier(.19,1,.22,1);
  --ease-s:cubic-bezier(.4,0,.2,1);
  --hdr:92px;

  /* tatami weave — CSS only, no image weight */
  --weave-d:repeating-linear-gradient(45deg,transparent 0 7px,rgba(222,227,222,.030) 7px 8px),
            repeating-linear-gradient(-45deg,transparent 0 7px,rgba(222,227,222,.018) 7px 8px);
  --weave-l:repeating-linear-gradient(45deg,transparent 0 7px,rgba(4,16,52,.035) 7px 8px),
            repeating-linear-gradient(-45deg,transparent 0 7px,rgba(4,16,52,.020) 7px 8px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)}
body{
  margin:0;background:var(--navy-900);color:var(--bone);
  font-family:var(--body);font-size:16.5px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}
::selection{background:var(--bone);color:var(--navy)}

:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.on-light :focus-visible{outline-color:var(--navy)}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--bone);color:var(--navy);
  padding:.9rem 1.4rem;font-family:var(--display);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}

/* --- 02 TYPE -------------------------------------------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--display);font-weight:800;line-height:.94;margin:0;
  text-transform:uppercase;letter-spacing:-.018em;
  font-variation-settings:"wdth" 118,"wght" 800;
}
h1{font-size:clamp(2.85rem,7vw,6.1rem)}
h2{font-size:clamp(2.05rem,4.4vw,3.85rem)}
h3{font-size:clamp(1.3rem,2vw,1.8rem);font-variation-settings:"wdth" 112,"wght" 700}
h4{font-size:1.02rem;letter-spacing:.02em;font-variation-settings:"wdth" 110,"wght" 700}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
strong{font-weight:600}

/* the signature move: outlined display caps against solid ones */
.ser{font-family:var(--display);font-style:normal;font-weight:800;text-transform:uppercase;
  font-variation-settings:"wdth" 118,"wght" 800;letter-spacing:-.018em;
  -webkit-text-fill-color:transparent;-webkit-text-stroke:2px var(--bone);color:var(--bone)}
.on-light .ser,.sec--light .ser,.sec--light-50 .ser,.sec--light-100 .ser{-webkit-text-stroke-color:var(--navy)}
h1 .ser{-webkit-text-stroke-width:2.2px}
h2 .ser{-webkit-text-stroke-width:1.7px}
@supports not (-webkit-text-stroke:1px red){.ser{-webkit-text-fill-color:currentColor;opacity:.62}}
@media (max-width:640px){h1 .ser{-webkit-text-stroke-width:1.3px}h2 .ser{-webkit-text-stroke-width:1.1px}}

.eyebrow{
  display:flex;align-items:center;gap:1rem;margin:0 0 1.5rem;
  font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--steel);font-variation-settings:"wdth" 108,"wght" 700
}
.eyebrow .num{color:var(--bone);font-variation-settings:"wdth" 120,"wght" 800}
.on-light .eyebrow{color:var(--steel-deep)}
.on-light .eyebrow .num{color:var(--navy)}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule-d);max-width:150px}
.on-light .eyebrow::after{background:var(--rule-l)}
.eyebrow.is-center{justify-content:center}
.eyebrow.is-center::after{display:none}

.lede{font-size:clamp(1.06rem,1.35vw,1.2rem);line-height:1.78;color:var(--steel);max-width:60ch}
.on-light .lede{color:var(--steel-deep)}
.kicker{font-family:var(--display);font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--steel);font-weight:700;font-variation-settings:"wdth" 106,"wght" 700}
.pull{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-variation-settings:"wdth" 112,"wght" 700;
  font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.12;letter-spacing:-.015em}

/* --- 03 LAYOUT ------------------------------------------------------------ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-n{width:100%;max-width:var(--narrow);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec);position:relative;isolation:isolate}
.sec--sm{padding-block:calc(var(--sec)*.58)}
.sec--dark{background:var(--navy-900)}
.sec--deep{background:var(--navy-950)}
.sec--lift{background:var(--navy-800)}
.sec--light{background:var(--bone-200);color:var(--navy)}
.sec--light-50{background:var(--bone-50);color:var(--navy)}
.sec--light-100{background:var(--bone-100);color:var(--navy)}
.on-light h1,.on-light h2,.on-light h3,.on-light h4{color:var(--navy)}

/* weave texture + edge fade so light sections lift out of the dark */
.sec--dark::before,.sec--deep::before,.sec--lift::before{
  content:"";position:absolute;inset:0;z-index:-1;background-image:var(--weave-d);opacity:.9;pointer-events:none}
.sec--light::before,.sec--light-50::before,.sec--light-100::before{
  content:"";position:absolute;inset:0;z-index:-1;background-image:var(--weave-l);opacity:.85;pointer-events:none}
.edge-top{position:relative}
.edge-top::after{content:"";position:absolute;top:0;left:0;right:0;height:130px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,16,52,.10),transparent)}
.sec--dark.edge-top::after,.sec--deep.edge-top::after,.sec--lift.edge-top::after{
  background:linear-gradient(180deg,rgba(222,227,222,.055),transparent)}

.sec-head{max-width:58rem;margin-bottom:clamp(2.6rem,4.4vw,4rem)}
.sec-head.is-center{margin-inline:auto;text-align:center}
.sec-head.is-center .lede{margin-inline:auto}
.sec-head--split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);
  align-items:end;max-width:none}
.grid{display:grid;gap:clamp(16px,2vw,26px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.center{text-align:center}
.mt-l{margin-top:clamp(2.4rem,4vw,3.6rem)}

/* --- 04 MEDIA — head-safe cropping ---------------------------------------- */
.media{position:relative;overflow:hidden;background:var(--navy-800);isolation:isolate}
.media img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.fp-top img,img.fp-top{object-position:50% 8%}
.fp-high img,img.fp-high{object-position:50% 18%}
.fp-upper img,img.fp-upper{object-position:50% 28%}
.fp-mid img,img.fp-mid{object-position:50% 42%}
.fp-low img,img.fp-low{object-position:50% 58%}
.r-1x1{aspect-ratio:1/1}.r-4x3{aspect-ratio:4/3}.r-3x4{aspect-ratio:3/4}
.r-4x5{aspect-ratio:4/5}.r-16x9{aspect-ratio:16/9}.r-5x7{aspect-ratio:5/7}

/* --- 05 BUTTONS ----------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  font-family:var(--display);font-weight:700;font-size:.92rem;letter-spacing:.16em;text-transform:uppercase;
  font-variation-settings:"wdth" 108,"wght" 700;
  padding:1.05rem 2.1rem;border:1px solid transparent;border-radius:0;overflow:hidden;
  transition:color .4s var(--ease-s),border-color .4s var(--ease-s),transform .4s var(--ease);
  white-space:nowrap;line-height:1
}
.btn span,.btn .btn-arw{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;z-index:1;transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
.btn:hover::before{transform:scaleX(1)}
.btn:hover{transform:translateY(-2px)}
/* primary on dark */
.btn--pri{background:var(--bone);color:var(--navy);border-color:var(--bone)}
.btn--pri::before{background:var(--navy-900);transform-origin:right}
.btn--pri:hover{color:var(--bone);border-color:var(--bone)}
/* primary on light */
.on-light .btn--pri,.btn--pri-l{background:var(--navy);color:var(--bone);border-color:var(--navy)}
.on-light .btn--pri::before,.btn--pri-l::before{background:var(--bone-200)}
.on-light .btn--pri:hover,.btn--pri-l:hover{color:var(--navy);border-color:var(--navy)}
/* ghost */
.btn--ghost{background:transparent;color:var(--bone);border-color:var(--rule-d)}
.btn--ghost::before{background:var(--bone)}
.btn--ghost:hover{color:var(--navy);border-color:var(--bone)}
.on-light .btn--ghost{color:var(--navy);border-color:var(--rule-l)}
.on-light .btn--ghost::before{background:var(--navy)}
.on-light .btn--ghost:hover{color:var(--bone);border-color:var(--navy)}
.btn--sm{padding:.72rem 1.35rem;font-size:.78rem;letter-spacing:.14em}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}
/* a single button closing a card grid reads better centred under it */
.btn-row--center{justify-content:center}
.center .btn-row,.is-center .btn-row{justify-content:center}

.alink{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--display);font-weight:700;
  font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;font-variation-settings:"wdth" 106,"wght" 700;
  padding-bottom:.35rem;border-bottom:1px solid currentColor;transition:gap .35s var(--ease),opacity .3s}
.alink::after{content:"";width:16px;height:1px;background:currentColor;position:relative;
  transition:width .35s var(--ease)}
.alink:hover{gap:1rem}
.alink:hover::after{width:26px}

/* --- 06 HEADER (light bar) ----------------------------------------------
   The supplied crest is blue artwork on full transparency — every counter
   shows the ground through it — so the bar is light and the mark sits on it
   the way it was drawn. A navy utility strip caps the page above it.
   ----------------------------------------------------------------------- */
.utility{background:var(--navy-950);border-bottom:1px solid rgba(222,227,222,.10);
  font-size:.78rem;letter-spacing:.06em;color:var(--steel)}
.utility .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px}
.utility-l{display:flex;gap:1.9rem;align-items:center}
.utility a{transition:color .25s}
.utility a:hover{color:var(--bone)}
.utility-r{display:flex;gap:1.2rem;align-items:center;font-family:var(--display);font-size:.68rem;
  letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--steel-dark)}

.hdr{position:sticky;top:0;z-index:90;background:var(--bone-200);color:var(--navy);
  border-bottom:1px solid rgba(4,16,52,.15);
  transition:background .3s,box-shadow .35s,border-color .3s}
.hdr.is-stuck{background:var(--bone-50);box-shadow:0 16px 38px -26px rgba(4,16,52,.55)}
.hdr .wrap{display:flex;align-items:center;flex-wrap:nowrap;
  gap:clamp(.7rem,1.1vw,1.3rem);min-height:var(--hdr)}
.hdr nav{min-width:0;flex:0 1 auto}
.hdr :focus-visible{outline:2px solid var(--navy);outline-offset:3px}

.brand{display:flex;align-items:center;gap:.95rem;margin-right:auto;flex:none}
.brand img{height:54px;width:54px;object-fit:contain}
.brand-txt{font-family:var(--display);text-transform:uppercase;line-height:1.05;color:var(--navy)}
.brand-txt b{display:block;font-size:1.04rem;font-weight:800;letter-spacing:.01em;
  font-variation-settings:"wdth" 116,"wght" 800}
.brand-txt span{display:block;font-size:.58rem;letter-spacing:.32em;color:var(--steel-deep);
  margin-top:4px;font-weight:700}

.nav{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(0px,.3vw,.3rem)}
.nav>li{position:relative}
.nav .nav-link{display:flex;align-items:center;gap:.45rem;background:none;border:0;white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:clamp(.74rem,.6vw,.82rem);
  letter-spacing:clamp(.08em,.11vw,.15em);text-transform:uppercase;
  font-variation-settings:"wdth" 104,"wght" 700;padding:1.05rem clamp(.5rem,.66vw,.86rem);color:var(--navy);
  position:relative;cursor:pointer;
  /* the hover fill is a background gradient rather than a pseudo-element, so the
     label always paints above it without a z-index fight inside the sticky bar */
  background-image:linear-gradient(var(--navy),var(--navy));
  background-repeat:no-repeat;background-position:50% 100%;background-size:100% 0;
  transition:color .26s var(--ease),background-size .42s var(--ease),letter-spacing .42s var(--ease)}
.nav .nav-link:hover,.nav li.open>.nav-link{
  color:var(--bone);background-size:100% 100%}
.nav .nav-link:hover .chev,.nav li.open>.nav-link .chev{opacity:1}
.nav .nav-link:hover .ext::before{opacity:.75}

/* the page you are on keeps the hairline rule, so it stays readable as "current"
   and never looks like something you are hovering */
.nav .nav-link[aria-current="page"]::after{content:"";position:absolute;
  left:clamp(.5rem,.66vw,.86rem);right:clamp(.5rem,.66vw,.86rem);bottom:1.35rem;height:2px;
  background:var(--navy);transition:background .26s}
.nav .nav-link[aria-current="page"]:hover::after{background:var(--bone)}
.nav .ext::before{content:"\2197";font-size:.78em;opacity:.5;margin-right:.05rem}
.chev{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease);flex:none;opacity:.6}
.nav li.open .chev{transform:rotate(-135deg) translate(-2px,-2px);opacity:1}

/* small dropdown (About Us) */
.sub{position:absolute;top:100%;left:-.2rem;min-width:272px;background:var(--bone-50);
  border:1px solid rgba(4,16,52,.15);padding:.5rem;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s var(--ease),transform .32s var(--ease),visibility .28s;
  box-shadow:0 30px 60px -28px rgba(4,16,52,.5)}
.sub::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--navy);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease) .05s}
.nav li.open .sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav li.open .sub::before{transform:scaleX(1)}
.sub a{display:flex;align-items:baseline;gap:.8rem;padding:.75rem .9rem;font-size:.92rem;
  color:var(--steel-deep);border-left:1px solid transparent;
  transition:background .25s,color .25s,border-color .25s}
.sub a i{font-style:normal;font-family:var(--display);font-size:.64rem;letter-spacing:.14em;
  color:var(--steel-dark);flex:none;width:18px;font-weight:700}
.sub a:hover{background:rgba(4,16,52,.05);color:var(--navy);border-left-color:var(--navy)}
.sub a:hover i{color:var(--navy)}

/* full-width mega panel (Programs) */
.nav li.has-mega{position:static}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--bone-50);
  background-image:var(--weave-l);
  border-top:1px solid rgba(4,16,52,.15);border-bottom:1px solid rgba(4,16,52,.15);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .38s var(--ease),visibility .3s;
  box-shadow:0 40px 80px -42px rgba(4,16,52,.5)}
.nav li.open .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega__inner{max-width:1420px;margin-inline:auto;padding:clamp(28px,3vw,46px) var(--gut);
  display:grid;grid-template-columns:repeat(3,1fr) 1.05fr;gap:clamp(24px,3vw,52px)}
.mega__col h4{font-size:.64rem;letter-spacing:.26em;color:var(--steel-deep);margin:0 0 1.1rem;
  padding-bottom:.8rem;border-bottom:1px solid rgba(4,16,52,.12)}
.mega__col ul{display:grid;gap:.15rem}
.mega__col a{display:grid;grid-template-columns:auto 1fr;gap:.15rem .85rem;align-items:baseline;
  padding:.6rem .7rem;border-left:1px solid transparent;transition:background .25s,border-color .25s}
.mega__col a i{grid-row:span 2;font-style:normal;font-family:var(--display);font-weight:700;
  font-size:.62rem;letter-spacing:.12em;color:var(--steel-dark);padding-top:.3rem}
.mega__col a b{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--navy);font-variation-settings:"wdth" 106,"wght" 700}
.mega__col a em{font-style:normal;font-size:.78rem;color:var(--steel-deep);letter-spacing:.02em}
.mega__col a:hover{background:rgba(4,16,52,.05);border-left-color:var(--navy)}
.mega__promo{position:relative;overflow:hidden;display:block;isolation:isolate;min-height:210px;
  border:1px solid rgba(4,16,52,.15)}
.mega__promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 18%;transition:transform 1s var(--ease)}
.mega__promo:hover img{transform:scale(1.06)}
.mega__promo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(2,10,34,.30),rgba(2,10,34,.92))}
.mega__promo div{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.3rem 1.4rem}
.mega__promo span{display:block;font-family:var(--display);font-weight:700;font-size:.6rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--steel);margin-bottom:.45rem}
.mega__promo strong{display:block;font-family:var(--display);font-weight:800;font-size:1.2rem;
  line-height:1.05;text-transform:uppercase;color:#fff;font-variation-settings:"wdth" 114,"wght" 800}
.mega__promo strong::after{content:" \2192";color:var(--bone)}

.hdr-cta{display:flex;align-items:center;gap:clamp(.65rem,1vw,1.1rem);flex:none;
  margin-left:clamp(.5rem,.9vw,1.1rem)}
.hdr-tel{font-family:var(--display);font-weight:800;font-size:clamp(.88rem,.74vw,1.02rem);
  letter-spacing:.03em;white-space:nowrap;
  font-variation-settings:"wdth" 114,"wght" 800;color:var(--navy);transition:opacity .25s}
.hdr-tel:hover{opacity:.62}
.hdr .btn--pri{background:var(--navy);color:var(--bone);border-color:var(--navy)}
.hdr .btn--pri::before{background:var(--bone-300);transform-origin:left}
.hdr .btn--pri:hover{color:var(--navy);border-color:var(--navy)}

.burger{display:none;background:none;border:0;padding:12px 6px;margin-left:auto}
.burger i{display:block;width:26px;height:2px;background:var(--navy);margin:6px 0;
  transition:transform .4s var(--ease),opacity .25s}
.burger.open i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open i:nth-child(2){opacity:0}
.burger.open i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* mobile drawer — light, to match the bar */
.drawer{position:fixed;inset:0 0 0 auto;width:min(440px,90vw);background:var(--bone-200);
  background-image:var(--weave-l);color:var(--navy);z-index:95;
  transform:translateX(102%);transition:transform .55s var(--ease);overflow-y:auto;
  padding:2rem var(--gut) 3.5rem;border-left:1px solid rgba(4,16,52,.15)}
.drawer.open{transform:translateX(0)}
.drawer-top{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:1.6rem;border-bottom:1px solid rgba(4,16,52,.15)}
.drawer-top img{height:50px;width:50px;object-fit:contain}
.drawer-close{background:none;border:1px solid rgba(4,16,52,.22);color:var(--navy);
  width:42px;height:42px;font-size:1.2rem;display:grid;place-items:center;transition:.25s}
.drawer-close:hover{background:var(--navy);color:var(--bone);border-color:var(--navy)}
.drawer>ul>li{border-bottom:1px solid rgba(4,16,52,.10)}
.drawer>ul>li>a,.drawer>ul>li>.m-tog{position:relative;
  transition:color .26s var(--ease),padding-left .34s var(--ease)}
.drawer>ul>li>a::before,.drawer>ul>li>.m-tog::before{content:"";position:absolute;left:0;
  top:50%;width:0;height:2px;background:var(--navy);transform:translateY(-50%);
  transition:width .34s var(--ease)}
.drawer>ul>li>a:hover,.drawer>ul>li>.m-tog:hover,
.drawer>ul>li>.m-tog[aria-expanded="true"]{padding-left:1.6rem}
.drawer>ul>li>a:hover::before,.drawer>ul>li>.m-tog:hover::before,
.drawer>ul>li>.m-tog[aria-expanded="true"]::before{width:1.1rem}
.drawer>ul a,.drawer .m-tog{display:flex;justify-content:space-between;align-items:center;width:100%;
  background:none;border:0;text-align:left;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;font-size:1.12rem;padding:1.05rem 0;color:var(--navy);
  font-variation-settings:"wdth" 110,"wght" 700}
.drawer .m-sub{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.drawer .m-sub.open{max-height:560px}
.drawer>ul .m-sub a{font-family:var(--body);font-size:.95rem;letter-spacing:.02em;text-transform:none;
  color:var(--steel-deep);padding:.5rem 0 .5rem 1.1rem;border-left:1px solid rgba(4,16,52,.15);
  font-weight:400}
.drawer>ul .m-sub li:last-child a{margin-bottom:.8rem}
.drawer .m-tog .chev{transform:rotate(45deg)}
.drawer .m-tog[aria-expanded="true"] .chev{transform:rotate(-135deg) translateY(-3px)}
.drawer-foot{margin-top:2.2rem;display:grid;gap:.75rem}
.drawer-foot .btn{width:100%}
.drawer-foot .btn--pri{background:var(--navy);color:var(--bone);border-color:var(--navy)}
.drawer-foot .btn--pri::before{background:var(--bone-300);transform-origin:left}
.drawer-foot .btn--pri:hover{color:var(--navy)}
.drawer-foot .btn--ghost{color:var(--navy);border-color:rgba(4,16,52,.25)}
.drawer-foot .btn--ghost::before{background:var(--navy)}
.drawer-foot .btn--ghost:hover{color:var(--bone);border-color:var(--navy)}
.drawer-meta{margin-top:2rem;font-size:.9rem;color:var(--steel-deep);line-height:1.8;
  overflow-wrap:anywhere}
.drawer-meta a:hover{color:var(--navy)}
.drawer .social a{border-color:rgba(4,16,52,.22);color:var(--navy)}
.drawer .social a:hover{background:var(--navy);color:var(--bone);border-color:var(--navy)}
.scrim{position:fixed;inset:0;background:rgba(2,10,34,.72);backdrop-filter:blur(3px);z-index:94;
  opacity:0;visibility:hidden;transition:.45s}
.scrim.open{opacity:1;visibility:visible}
body.locked{overflow:hidden}

/* --- 06b PROMO STRIP (Black Friday) --------------------------------------
   One line at the very top of the page, above the navy utility strip, and the
   whole bar is the link. It is deliberately NOT sticky: the header already
   sticks, and two stacked bars eat the small screens the offer is read on.
   Gold is the only colour outside the brand three, and it is used here the way
   a seasonal sale always is — on near-black, for a short run. Remove the
   markup when the promotion ends; these rules then cost nothing.
   ------------------------------------------------------------------------ */
.promo{display:block;position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(90deg,#01060f,#0a1330 40%,#0a1330 60%,#01060f);
  border-bottom:1px solid rgba(243,210,122,.34);
  font-family:var(--display);color:var(--bone-100);
  transition:background .4s var(--ease-s)}
.promo:hover{background:linear-gradient(90deg,#030a1b,#111d44 40%,#111d44 60%,#030a1b)}

/* the sweep — a slow band of gold light crossing the bar */
.promo::before{content:"";position:absolute;top:0;bottom:0;left:-55%;right:-55%;z-index:0;
  pointer-events:none;
  background:linear-gradient(104deg,transparent 44%,rgba(243,210,122,.20) 50%,transparent 56%);
  transform:translateX(-32%);animation:promo-sweep 7s var(--ease-s) infinite}
@keyframes promo-sweep{0%{transform:translateX(-32%)}60%,100%{transform:translateX(32%)}}

.promo__in{position:relative;z-index:1;width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--gut);min-height:50px;
  display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;
  gap:clamp(.55rem,1.5vw,1.25rem)}

.promo__tag{flex:none;display:inline-flex;align-items:center;gap:.5rem;
  padding:.34rem .68rem;border-radius:2px;
  background:linear-gradient(135deg,#f7e0a0,#d9a93a 52%,#b07f17);
  color:#0a0f22;font-size:.63rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 0 0 1px rgba(247,224,160,.35),0 10px 24px -14px rgba(217,169,58,1)}
.promo__tag::before{content:"";width:5px;height:5px;border-radius:50%;background:#0a0f22;
  animation:promo-pulse 1.9s ease-in-out infinite}
@keyframes promo-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.promo__msg{font-family:var(--body);font-size:.84rem;letter-spacing:.01em;color:var(--steel);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.promo__msg b{font-weight:600;color:#fff}

.promo__cta{flex:none;display:inline-flex;align-items:center;gap:.6rem;
  font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:#f7e0a0;padding-bottom:2px;border-bottom:1px solid rgba(247,224,160,.42);
  transition:border-color .3s}
.promo:hover .promo__cta{border-color:#f7e0a0}
.promo__cta i{position:relative;display:block;width:18px;height:1px;background:currentColor;
  transition:transform .4s var(--ease)}
.promo__cta i::after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg)}
.promo:hover .promo__cta i{transform:translateX(5px)}
.promo:focus-visible{outline:2px solid #f7e0a0;outline-offset:-4px}

@media (max-width:1024px){.promo__soft{display:none}}
@media (max-width:620px){
  .promo__in{min-height:46px;gap:.6rem;padding-inline:14px}
  .promo__msg{display:none}
  .promo__tag{font-size:.58rem;letter-spacing:.16em;padding:.3rem .55rem}
  .promo__cta{font-size:.62rem;letter-spacing:.14em}
  .promo__cta i{width:14px}
}
/* the narrowest phones still in use: "Claim offer" rather than a clipped line */
@media (max-width:400px){.promo__the{display:none}}

@media (prefers-reduced-motion:reduce){
  .promo::before{animation:none}
  .promo__tag::before{animation:none}
  .promo:hover .promo__cta i{transform:none}
}

/* --- 07 HERO (split panel, constructed background) ---------------------- */
.hero{position:relative;background:var(--navy-950);overflow:hidden;isolation:isolate;
  border-bottom:1px solid var(--rule-d-soft)}

/* --- background furniture: all CSS, no image weight --- */
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero__bg::before{content:"";position:absolute;inset:0;
  background-image:var(--weave-d);opacity:.8}
.hero__bg::after{content:"";position:absolute;left:-14%;top:-34%;width:74%;padding-bottom:74%;
  border-radius:50%;background:radial-gradient(circle,rgba(34,55,108,.55) 0%,rgba(20,42,94,.22) 42%,transparent 66%)}
.hero__lines{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr)}
.hero__lines span{border-right:1px solid rgba(222,227,222,.05)}
.hero__ring{position:absolute;left:-170px;bottom:-250px;width:660px;height:660px;border-radius:50%;
  border:1px solid rgba(222,227,222,.10)}
.hero__ring::before{content:"";position:absolute;inset:70px;border-radius:50%;
  border:1px dashed rgba(222,227,222,.10);animation:hero-spin 120s linear infinite}
.hero__ring::after{content:"";position:absolute;inset:165px;border-radius:50%;
  border:1px solid rgba(222,227,222,.07)}
@keyframes hero-spin{to{transform:rotate(360deg)}}
.hero__ghost{position:absolute;z-index:0;pointer-events:none;user-select:none;
  left:max(calc(var(--gut) - .06em),calc(50vw - 640px + var(--gut) - .06em));bottom:-.1em;
  font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 125,"wght" 800;
  font-size:clamp(6.5rem,12vw,12.5rem);line-height:.78;letter-spacing:-.045em;
  -webkit-text-fill-color:transparent;-webkit-text-stroke:1px rgba(222,227,222,.085)}

.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.16fr .84fr;
  align-items:stretch}
.hero__content{
  display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(560px,72vh,700px);
  padding-block:clamp(52px,5.5vw,76px);
  padding-left:max(var(--gut),calc(50vw - 640px + var(--gut)));
  padding-right:clamp(26px,3.2vw,54px);
}
.hero .kicker{display:flex;align-items:center;gap:.85rem;color:var(--bone);margin-bottom:1.35rem}
.hero .kicker::before{content:"";width:32px;height:1px;background:var(--bone);flex:none}
.hero h1{max-width:20ch;font-size:clamp(2.15rem,3.5vw,3.5rem);line-height:.98}
.hero .lede{margin-top:1.3rem;color:var(--bone-300);max-width:50ch;
  font-size:clamp(1rem,1.08vw,1.08rem);line-height:1.68}

/* offer flags — the conversion detail the removed NAP band used to carry */
.hero__flags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem;padding:0;list-style:none}
.hero__flags li{display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid var(--rule-d);padding:.42rem .85rem;
  font-family:var(--display);font-weight:700;font-size:.63rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--bone-300)}
.hero__flags li::before{content:"";width:5px;height:5px;background:var(--bone);
  transform:rotate(45deg);flex:none}

.hero .btn-row{margin-top:1.7rem;flex-wrap:nowrap}
.hero .btn-row .btn{padding:.95rem 1.55rem;font-size:.86rem}

/* photo panel: angled seam, bleeds to the viewport edge */
.hero__media{position:relative;overflow:hidden;background:var(--navy-800);
  clip-path:polygon(15% 0,100% 0,100% 100%,0 100%)}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.hero__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(2,10,34,.86) 0%,rgba(2,10,34,.26) 17%,
             rgba(2,10,34,0) 44%,rgba(2,10,34,.22) 100%)}

/* compact credential rail */
.hero-rail{display:flex;flex-wrap:wrap;margin-top:clamp(2rem,3vw,2.8rem);
  padding-top:1.3rem;border-top:1px solid var(--rule-d)}
.hero-rail div{padding-right:clamp(.7rem,1.2vw,1.3rem);margin-right:clamp(.7rem,1.2vw,1.3rem);
  border-right:1px solid var(--rule-d)}
.hero-rail div:last-child{border-right:0;margin-right:0;padding-right:0}
.hero-rail b{display:block;font-family:var(--display);font-weight:800;font-size:1.2rem;line-height:1;
  font-variation-settings:"wdth" 118,"wght" 800;color:#fff}
.hero-rail span{display:block;margin-top:.35rem;font-family:var(--display);font-weight:700;
  font-size:.58rem;letter-spacing:.17em;text-transform:uppercase;color:var(--steel)}

/* staggered page-load cascade */
.rise{opacity:0;transform:translateY(22px);animation:rise .85s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.14s}.d3{animation-delay:.23s}
.d4{animation-delay:.32s}.d5{animation-delay:.42s}.d6{animation-delay:.52s}

@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr}
  .hero__media{order:-1;min-height:clamp(300px,42vh,400px);
    clip-path:polygon(0 0,100% 0,100% 90%,0 100%)}
  .hero__media::after{background:linear-gradient(180deg,rgba(2,10,34,.30) 0%,
    rgba(2,10,34,.04) 45%,rgba(2,10,34,.72) 100%)}
  .hero__content{min-height:0;padding-inline:var(--gut);padding-block:clamp(38px,6vw,56px)}
  .hero h1{max-width:18ch}
  .hero .btn-row{flex-wrap:wrap}
  .hero__ghost{font-size:clamp(6rem,24vw,10rem);left:var(--gut)}
  .hero__ring{left:-220px;bottom:-320px}
  .hero__lines{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){.hero__ring::before{animation:none}}

/* --- 08 PAGE BANNER ------------------------------------------------------- */
.banner{position:relative;min-height:clamp(400px,58vh,560px);display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;background:var(--navy-950)}
.banner__media{position:absolute;inset:0;z-index:-3}
.banner__media img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.banner::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,rgba(2,10,34,.82),rgba(4,16,52,.55) 45%,rgba(4,16,52,.94))}
.banner::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--weave-d);opacity:.7}
.banner__inner{width:100%;padding-block:clamp(60px,8vw,96px)}
.banner h1{max-width:18ch}
.banner .lede{margin-top:1.4rem;max-width:52ch;color:var(--bone-300)}
.crumbs{display:flex;flex-wrap:wrap;gap:.55rem;font-family:var(--display);font-size:.7rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--steel);margin-bottom:1.5rem;font-weight:700}
.crumbs a:hover{color:var(--bone)}
.crumbs span[aria-current]{color:var(--bone)}

/* --- 10 SPLIT / EDITORIAL ROW --------------------------------------------- */
.split{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5.5vw,84px);align-items:center}
.split--7525{grid-template-columns:1.3fr .7fr}
.split--rev .split__media{order:2}
.split__media{position:relative}
.split__media .media{aspect-ratio:4/5}
.split__media.bleed{margin-left:calc(var(--gut)*-1)}
.split--rev .split__media.bleed{margin-left:0;margin-right:calc(var(--gut)*-1)}
.stamp{position:absolute;bottom:0;right:0;background:var(--navy-950);color:var(--bone);
  padding:1.15rem 1.5rem;max-width:230px;border-top:2px solid var(--bone)}
.stamp b{display:block;font-family:var(--display);font-size:1.5rem;line-height:1;font-weight:800;
  font-variation-settings:"wdth" 118,"wght" 800}
.stamp span{display:block;margin-top:.35rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--steel);font-family:var(--display);font-weight:700}
.split--rev .stamp{right:auto;left:0}

.numlist{display:grid;gap:1.6rem;margin-top:2.4rem}
.numlist li{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start}
.numlist .n{font-family:var(--display);font-size:.72rem;letter-spacing:.16em;font-weight:700;
  color:var(--steel-deep);padding-top:.45rem;border-top:1px solid var(--rule-l);min-width:34px}
.on-dark .numlist .n,.sec--dark .numlist .n,.sec--deep .numlist .n,.sec--lift .numlist .n{
  color:var(--steel);border-top-color:var(--rule-d)}
.numlist h4{margin:0 0 .35rem}
.numlist p{font-size:.97rem;color:var(--steel-deep);margin:0}
.sec--dark .numlist p,.sec--deep .numlist p,.sec--lift .numlist p{color:var(--steel)}

/* --- 11 PROGRAM CARDS ----------------------------------------------------
   Image on top, copy in a solid block beneath it. The old version floated the
   text over the photograph, which meant the age label fought pale gis for
   contrast and the description only appeared on hover — invisible on touch.
   ----------------------------------------------------------------------- */
.pcard{position:relative;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  background:var(--navy-850);border:1px solid var(--rule-d-soft);
  transition:border-color .45s,transform .55s var(--ease),box-shadow .55s var(--ease)}
.pcard:hover{border-color:rgba(222,227,222,.30);transform:translateY(-6px);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9)}

/* the card photo was taller than it needed to be — the copy block is what
   converts, so the image sits wider and shorter and lets it up the page */
.pcard .media{aspect-ratio:3/2;flex:none}
.pcard img{transition:transform 1.1s var(--ease)}
.pcard:hover img{transform:scale(1.06)}
/* just enough shading under the numeral to keep it legible on a bright frame */
.pcard .media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(2,10,34,.55) 0%,rgba(2,10,34,.10) 34%,transparent 60%)}

.pcard__i{position:absolute;top:.75rem;right:1rem;z-index:3;
  font-family:var(--display);font-weight:800;font-size:2.15rem;line-height:1;
  font-variation-settings:"wdth" 118,"wght" 800;letter-spacing:-.02em;
  -webkit-text-fill-color:transparent;-webkit-text-stroke:1px rgba(222,227,222,.6);
  transition:-webkit-text-stroke-color .4s}
.pcard:hover .pcard__i{-webkit-text-stroke-color:var(--bone)}

.pcard__b{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
  padding:clamp(20px,2vw,26px)}
.pcard__b::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;
  background:var(--bone);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease)}
.pcard:hover .pcard__b::before{transform:scaleX(1)}
.pcard__age{font-family:var(--display);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--steel);font-weight:700;margin-bottom:.6rem}
.pcard h3{color:#fff;margin-bottom:.7rem;font-size:clamp(1.12rem,1.4vw,1.32rem)}
.pcard p{font-size:.91rem;line-height:1.6;color:var(--bone-300);margin:0 0 1.3rem}

.pcard__go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:1rem;border-top:1px solid var(--rule-d-soft)}
.pcard__go em{font-style:normal;font-family:var(--display);font-weight:700;font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.pcard__go i{font-style:normal;flex:none;width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--rule-d);color:var(--bone);font-size:.9rem;
  transition:background .35s,color .35s,border-color .35s,transform .35s var(--ease)}
.pcard:hover .pcard__go i{background:var(--bone);color:var(--navy);border-color:var(--bone);
  transform:translateX(3px)}

/* the Executive card runs wide — image beside the copy rather than above it */
.pcard--wide{grid-column:span 2;flex-direction:row}
.pcard--wide .media{aspect-ratio:auto;width:46%;min-height:100%}
.pcard--wide .pcard__b{width:54%;justify-content:center;padding:clamp(22px,2.4vw,34px)}
.pcard--wide h3{font-size:clamp(1.25rem,1.7vw,1.6rem)}
.pcard--wide p{margin-bottom:1.5rem}

/* --- 12 LINEAGE RAIL ------------------------------------------------------ */
.lineage{position:relative;margin-top:clamp(2.6rem,4vw,3.8rem)}
.lineage ol{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative}
.lineage ol::before{content:"";position:absolute;top:13px;left:6%;right:6%;height:1px;background:var(--rule-l)}
.lineage li{position:relative;padding:0 1rem 0 0;text-align:left}
.lineage li::before{content:"";position:relative;display:block;width:12px;height:12px;
  border:1px solid var(--navy);background:var(--bone-200);transform:rotate(45deg);margin:8px 0 1.6rem}
.lineage li:last-child::before{background:var(--navy)}
.lineage .yr{font-family:var(--display);font-size:.68rem;letter-spacing:.2em;color:var(--steel-deep);
  font-weight:700;display:block;margin-bottom:.4rem}
.lineage h4{font-size:1.02rem;margin-bottom:.4rem}
.lineage p{font-size:.88rem;color:var(--steel-deep);margin:0;line-height:1.6}

/* --- 13 TILES ------------------------------------------------------------- */
.tile{background:var(--bone-50);border:1px solid var(--rule-l);padding:clamp(24px,3vw,40px);
  transition:transform .5s var(--ease),border-color .4s,background .4s;position:relative;overflow:hidden}
.tile:hover{transform:translateY(-4px);border-color:var(--navy);background:#fff}
.sec--dark .tile,.sec--deep .tile,.sec--lift .tile{background:var(--navy-850);border-color:var(--rule-d-soft)}
.sec--dark .tile:hover,.sec--deep .tile:hover,.sec--lift .tile:hover{background:var(--navy-800);border-color:var(--rule-d)}
.tile .n{display:block;font-family:var(--display);font-size:.68rem;letter-spacing:.26em;font-weight:800;
  color:var(--steel-deep);margin-bottom:1.5rem}
.sec--dark .tile .n,.sec--deep .tile .n,.sec--lift .tile .n{color:var(--steel)}
.tile h3{margin-bottom:.7rem;font-size:1.22rem}
.tile p{font-size:.95rem;color:var(--steel-deep);margin:0}
.sec--dark .tile p,.sec--deep .tile p,.sec--lift .tile p{color:var(--steel)}

/* --- 14 TIMETABLE -------------------------------------------------------
   Rebuilt from quiet white rows into a fight-card grid. Every class is a
   strip with a solid, discipline-coloured time slab cut on a diagonal, the
   class name in display caps, and a navy wipe that takes the whole strip on
   hover while the time slab flips to bone. Every strip links through to the
   program page that teaches it. Same language, compact, on program pages.
   ----------------------------------------------------------------------- */
/* discipline accents — navy family + the crest blue, no new hue */
[data-cat="bjj"]{--acc:var(--navy)}
[data-cat="muaythai"]{--acc:var(--crest)}
[data-cat="mma"]{--acc:var(--crest-dark)}
[data-cat="kids"]{--acc:var(--navy-600)}
[data-cat="fitness"]{--acc:var(--steel-deep)}
[data-cat="womens"]{--acc:var(--navy-700)}
[data-cat="all"]{--acc:var(--navy)}

.sched-ctrl{display:grid;gap:1.1rem;margin-bottom:1.8rem}

/* day tabs — seven chunky blocks with the class count under the day */
.tabs{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.tabs button{position:relative;background:#fff;border:1px solid var(--rule-l);
  display:flex;flex-direction:column;align-items:center;gap:.28rem;
  padding:.72rem .3rem .64rem;overflow:hidden;cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);
  transition:background .3s var(--ease-s),border-color .3s,transform .35s var(--ease)}
.tabs button{color:var(--navy);font-family:var(--display);font-weight:800;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase}
.tabs button[aria-selected="true"]{color:var(--bone)}
.tabs button b{font-family:var(--display);font-variation-settings:"wdth" 116,"wght" 800;
  font-size:.86rem;letter-spacing:.07em;text-transform:uppercase;color:var(--navy);
  line-height:1;transition:color .3s}
.tabs button i{font-style:normal;font-family:var(--display);font-weight:700;font-size:.52rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dark);transition:color .3s}
.tabs button:hover{border-color:var(--navy);transform:translateY(-2px)}
.tabs button[aria-selected="true"]{background:var(--navy);border-color:var(--navy)}
.tabs button[aria-selected="true"] b{color:var(--bone)}
.tabs button[aria-selected="true"] i{color:var(--steel)}
.tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;top:0;
  height:3px;background:var(--bone)}

/* discipline filters */
.filters{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  padding-top:1rem;border-top:1px solid var(--rule-l)}
.filters .flab{font-family:var(--display);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--steel-deep);font-weight:800;margin-right:.5rem}
.filters button{display:inline-flex;align-items:center;gap:.5rem;background:#fff;
  border:1px solid var(--rule-l);padding:.48rem .85rem;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel-deep);transition:.28s var(--ease-s)}
.filters button em{width:8px;height:8px;flex:none;background:var(--acc,var(--steel-deep));
  transform:rotate(45deg);transition:.28s}
.filters button:hover{color:var(--navy);border-color:var(--navy)}
.filters button.on{background:var(--navy);color:var(--bone);border-color:var(--navy)}
.filters button.on em{background:var(--bone)}

/* day header strip */
.panel{display:none}
.panel.on{display:block;animation:fadeup .45s var(--ease)}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dayhead{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem 1.1rem;
  padding:0 0 .75rem;margin-bottom:.9rem;border-bottom:2px solid var(--navy)}
.dayhead b{font-family:var(--display);font-variation-settings:"wdth" 120,"wght" 800;
  text-transform:uppercase;font-size:clamp(1.2rem,2.2vw,1.75rem);line-height:1;
  letter-spacing:-.012em;color:var(--navy)}
.dayhead span{font-family:var(--display);font-weight:800;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone);background:var(--navy);padding:.32rem .6rem}
.dayhead em{font-style:normal;font-family:var(--display);font-weight:700;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--steel-deep);margin-left:auto}

/* the strips */
.band{display:flex;align-items:center;gap:.7rem;margin:1.5rem 0 .55rem}
.band:first-of-type{margin-top:0}
.band__l{font-family:var(--display);font-variation-settings:"wdth" 114,"wght" 800;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--navy);flex:none}
.band__h{flex:1;height:1px;background:var(--rule-l)}
.band__m{font-family:var(--display);font-weight:700;font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--steel-dark);flex:none}
.band__n{flex:none;display:grid;place-items:center;min-width:24px;height:22px;padding:0 .4rem;
  font-family:var(--display);font-weight:800;font-size:.6rem;letter-spacing:.06em;
  background:var(--navy);color:var(--bone)}

.rows{display:grid;gap:6px;list-style:none;margin:0;padding:0}
.row{position:relative;display:grid;grid-template-columns:clamp(94px,10vw,124px) minmax(0,1fr) auto;
  align-items:stretch;background:#fff;border:1px solid var(--rule-l);overflow:hidden;isolation:isolate;
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease)}
.row::before{content:"";position:absolute;inset:0;z-index:0;background:var(--navy);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.row>*{position:relative;z-index:1}
.row:hover{border-color:var(--navy);transform:translateX(5px);
  box-shadow:-5px 0 0 0 var(--acc,var(--navy))}
.row:hover::before{transform:scaleX(1)}

.row__t{display:flex;flex-direction:column;justify-content:center;gap:.22rem;
  padding:.9rem .5rem .9rem 1.05rem;background:var(--acc,var(--navy));color:var(--bone);
  clip-path:polygon(0 0,100% 0,calc(100% - 15px) 100%,0 100%);transition:background .4s,color .4s}
.row__t b{font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 800;
  font-size:clamp(1rem,1.35vw,1.22rem);line-height:1;letter-spacing:-.01em}
.row__t i{font-style:normal;font-family:var(--display);font-weight:700;font-size:.54rem;
  letter-spacing:.24em;color:rgba(222,227,222,.72);transition:color .4s}
.row:hover .row__t{background:var(--bone);color:var(--navy)}
.row:hover .row__t i{color:var(--steel-deep)}

.row__b{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:.4rem 1rem;padding:.85rem 1rem .85rem .55rem;min-width:0}
.row__c{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;min-width:0;
  font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 720;
  text-transform:uppercase;font-size:clamp(.86rem,1.02vw,.99rem);letter-spacing:.015em;
  line-height:1.2;color:var(--navy);transition:color .35s}
.row__tag{flex:none;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-weight:700;font-size:.58rem;
  letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;color:var(--steel-deep);
  border:1px solid var(--rule-l);padding:.34rem .62rem;transition:.35s}
.row__tag::before{content:"";width:7px;height:7px;flex:none;background:var(--acc,var(--navy));
  transform:rotate(45deg);transition:background .35s}
.row:hover .row__tag::before,.row.is-now .row__tag::before{background:var(--bone)}
.row__go{flex:none;align-self:center;display:grid;place-items:center;width:34px;height:34px;
  margin-right:.9rem;border:1px solid var(--rule-l);color:var(--navy);font-size:.85rem;
  transition:background .35s,color .35s,border-color .35s,transform .4s var(--ease)}
.row:hover .row__c{color:var(--bone)}
.row:hover .row__tag{color:var(--bone);border-color:rgba(222,227,222,.4)}
.row:hover .row__go{background:var(--bone);border-color:var(--bone);color:var(--navy);
  transform:translateX(3px)}

/* on the mats right now */
.row.is-now{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy)}
.row.is-now::before{transform:scaleX(1)}
.row.is-now .row__t{background:var(--bone);color:var(--navy)}
.row.is-now .row__t i{color:var(--steel-deep)}
.row.is-now .row__c{color:var(--bone)}
.row.is-now .row__tag{color:var(--bone);border-color:rgba(222,227,222,.4)}
.row.is-now .row__go{background:var(--bone);border-color:var(--bone);color:var(--navy)}
.now-pill{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--display);
  font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  padding:.3rem .58rem;background:var(--bone);color:var(--navy)}
.now-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--crest);
  animation:matpulse 1.5s ease-in-out infinite}
@keyframes matpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.65)}}

.sched-empty{padding:3rem 1rem;text-align:center;color:var(--steel-deep);font-size:.98rem;
  border:1px dashed var(--rule-l);background:#fff}
.sched-foot{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  align-items:center;font-size:.88rem;color:var(--steel-deep);
  border-top:1px solid var(--rule-l);padding-top:1.3rem}

/* mini timetable — program pages */
.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:6px;
  list-style:none;margin:0;padding:0}
.mrow{position:relative;display:grid;grid-template-columns:clamp(88px,9vw,110px) minmax(0,1fr) auto;
  align-items:stretch;background:#fff;border:1px solid var(--rule-l);overflow:hidden;isolation:isolate;
  height:100%;transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease)}
.mrow::before{content:"";position:absolute;inset:0;z-index:0;background:var(--navy);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.mrow>*{position:relative;z-index:1}
.mrow:hover{border-color:var(--navy);transform:translateX(4px);
  box-shadow:-4px 0 0 0 var(--acc,var(--navy))}
.mrow:hover::before{transform:scaleX(1)}
.mrow__t{display:flex;flex-direction:column;justify-content:center;gap:.2rem;
  padding:.72rem .45rem .72rem .85rem;background:var(--acc,var(--navy));color:var(--bone);
  clip-path:polygon(0 0,100% 0,calc(100% - 13px) 100%,0 100%);transition:background .4s,color .4s}
.mrow__t b{font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 800;
  font-size:.96rem;line-height:1}
.mrow__t i{font-style:normal;font-family:var(--display);font-weight:700;font-size:.5rem;
  letter-spacing:.22em;color:rgba(222,227,222,.72);transition:color .4s}
.mrow:hover .mrow__t{background:var(--bone);color:var(--navy)}
.mrow:hover .mrow__t i{color:var(--steel-deep)}
.mrow__b{display:flex;flex-direction:column;justify-content:center;gap:.2rem;min-width:0;
  padding:.7rem .8rem .7rem .55rem}
.mrow__c{font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 700;
  text-transform:uppercase;font-size:.82rem;line-height:1.2;letter-spacing:.015em;
  color:var(--navy);transition:color .35s}
.mrow__d{font-family:var(--display);font-weight:700;font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel-deep);transition:color .35s}
.mrow__go{flex:none;align-self:center;display:grid;place-items:center;width:28px;height:28px;
  margin-right:.7rem;border:1px solid var(--rule-l);color:var(--navy);font-size:.76rem;
  transition:background .35s,color .35s,border-color .35s,transform .4s var(--ease)}
.mrow:hover .mrow__c{color:var(--bone)}
.mrow:hover .mrow__d{color:var(--steel)}
.mrow:hover .mrow__go{background:var(--bone);border-color:var(--bone);color:var(--navy);
  transform:translateX(3px)}

/* dark ground (if a timetable is ever placed on one) */
.sec--dark .row,.sec--deep .row,.sec--dark .mrow,.sec--deep .mrow{
  background:var(--navy-850);border-color:var(--rule-d)}
.sec--dark .row__c,.sec--deep .row__c,.sec--dark .mrow__c,.sec--deep .mrow__c{color:#fff}
.sec--dark .row__tag,.sec--deep .row__tag{color:var(--steel);border-color:var(--rule-d)}
.sec--dark .row__go,.sec--deep .row__go,.sec--dark .mrow__go,.sec--deep .mrow__go{
  border-color:var(--rule-d);color:var(--bone)}

@media (max-width:900px){
  .tabs{grid-template-columns:repeat(4,1fr)}
  .row__tag{display:none}
}
@media (max-width:640px){
  .tabs{grid-template-columns:repeat(4,1fr)}
  .tabs button i{display:none}
  .row{grid-template-columns:clamp(82px,22vw,100px) minmax(0,1fr)}
  .row__go{display:none}
  .row__b{padding-right:.9rem}
  .mini{grid-template-columns:1fr}
  .mrow{grid-template-columns:clamp(80px,22vw,98px) minmax(0,1fr)}
  .mrow__go{display:none}
  .dayhead em{margin-left:0;flex:1 1 100%}
  .band__m{display:none}
}

/* --- 15 FACULTY CARDS ---------------------------------------------------
   Rebuilt from numbered list rows into a card grid. Each card is a portrait
   with a bone index stamp and a discipline chip riding the image, then a
   credential tag, the name, the role and a footed "view profile" action.
   Hover: rule wipes across the top, portrait pushes in, action fills bone.
   ----------------------------------------------------------------------- */
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));
  gap:clamp(12px,1.4vw,20px);list-style:none;margin:0;padding:0;border:0}
.rost{position:relative;display:flex;flex-direction:column;height:100%;isolation:isolate;
  background:var(--navy-850);border:1px solid var(--rule-d);overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
  transition:background .45s var(--ease-s),border-color .45s var(--ease-s),
             transform .5s var(--ease)}
.rost::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;z-index:4;
  background:var(--bone);transition:width .55s var(--ease)}
.rost::after{content:"";position:absolute;right:0;bottom:0;width:20px;height:20px;z-index:4;
  background:linear-gradient(225deg,var(--rule-d) 0 1px,transparent 1px)}
.rost:hover{background:var(--navy-800);border-color:rgba(222,227,222,.30);transform:translateY(-4px)}
.rost:hover::before{width:100%}

/* portrait */
.rost__ph{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--navy-800)}
.rost__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;
  transition:transform .9s var(--ease)}
.rost:hover .rost__ph img{transform:scale(1.06)}
.rost__ph::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,10,34,0) 45%,rgba(2,10,34,.62) 100%)}

/* placeholder portrait while a new coach's photo is on its way */
.rost__ph--soon{background:var(--weave-d),var(--navy-800)}
.rost__soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1.1rem;padding:1.4rem}
.rost__ph--soon .rost__soon img{width:46%;height:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.16}
.rost__soon span{font-family:var(--display);font-weight:800;font-size:.54rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--steel)}
.on-light .rost__ph--soon{background:var(--weave-l),var(--bone-100)}
.on-light .rost__ph--soon .rost__soon img{filter:none;opacity:.14}
.on-light .rost__soon span{color:var(--steel-deep)}

/* index stamp + discipline chip, riding the portrait */
.rost__n{position:absolute;top:0;left:0;z-index:3;display:grid;place-items:center;
  width:36px;height:36px;background:var(--bone);color:var(--navy);
  font-family:var(--display);font-weight:800;font-size:.62rem;letter-spacing:.08em}
.rost__disc{position:absolute;z-index:3;left:11px;bottom:11px;
  font-family:var(--display);font-weight:800;font-size:.52rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone);
  background:rgba(2,10,34,.72);border:1px solid rgba(222,227,222,.28);
  padding:.3rem .55rem;backdrop-filter:blur(3px);transition:.35s var(--ease)}
.rost:hover .rost__disc{background:var(--bone);color:var(--navy);border-color:var(--bone)}

/* body */
.rost__id{position:relative;flex:1;display:flex;flex-direction:column;
  padding:clamp(13px,1.3vw,17px);background-image:var(--weave-d)}
.rost__tag{align-self:flex-start;display:inline-flex;align-items:center;gap:.42rem;
  font-family:var(--display);font-weight:800;font-size:.52rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--steel);border:1px solid var(--rule-d);
  padding:.3rem .55rem;margin-bottom:.85rem;transition:.35s var(--ease)}
.rost__tag::before{content:"\25C6";font-size:.46rem;color:var(--bone);opacity:.75;line-height:1}
.rost:hover .rost__tag{border-color:rgba(222,227,222,.4);color:var(--bone)}
.rost__id b{display:block;font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 750;
  font-size:clamp(.9rem,1.05vw,1rem);line-height:1.16;text-transform:uppercase;
  letter-spacing:.012em;color:#fff}
.rost__id em{display:block;font-style:normal;font-size:.8rem;line-height:1.5;
  color:var(--steel);margin-top:.4rem}
.rost__go{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--rule-d-soft);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-family:var(--display);font-weight:700;font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel-dark);transition:color .35s}
.rost__go i{font-style:normal;flex:none;display:grid;place-items:center;width:28px;height:28px;
  border:1px solid var(--rule-d);color:var(--bone);font-size:.82rem;
  transition:background .35s,color .35s,border-color .35s,transform .4s var(--ease)}
.rost:hover .rost__go{color:var(--bone)}
.rost:hover .rost__go i{background:var(--bone);color:var(--navy);border-color:var(--bone);
  transform:translateX(3px)}

/* light ground */
.on-light .roster{border:0}
.on-light .rost{background:#fff;border-color:var(--rule-l)}
.on-light .rost::before{background:var(--navy)}
.on-light .rost::after{background:linear-gradient(225deg,var(--rule-l) 0 1px,transparent 1px)}
.on-light .rost:hover{background:var(--bone-50);border-color:rgba(4,16,52,.30)}
.on-light .rost__n{background:var(--navy);color:var(--bone)}
.on-light .rost:hover .rost__disc{background:var(--navy);color:var(--bone);border-color:var(--navy)}
.on-light .rost__id{background-image:none}
.on-light .rost__id b{color:var(--navy)}
.on-light .rost__id em{color:var(--steel-deep)}
.on-light .rost__tag{color:var(--steel-deep);border-color:var(--rule-l)}
.on-light .rost__tag::before{color:var(--navy);opacity:1}
.on-light .rost:hover .rost__tag{border-color:var(--navy);color:var(--navy)}
.on-light .rost__go{color:var(--steel-deep);border-top-color:var(--rule-l-soft)}
.on-light .rost__go i{border-color:var(--rule-l);color:var(--navy)}
.on-light .rost:hover .rost__go{color:var(--navy)}
.on-light .rost:hover .rost__go i{background:var(--navy);color:var(--bone);border-color:var(--navy)}

.coach-group{margin-top:clamp(2.4rem,3.6vw,3.4rem)}
.coach-group>h3{display:flex;align-items:center;gap:1.1rem;font-size:.78rem;letter-spacing:.24em;
  margin-bottom:1.3rem;color:var(--steel);font-variation-settings:"wdth" 106,"wght" 700}
.coach-group>h3::after{content:"";flex:1;height:1px;background:var(--rule-d)}
.on-light .coach-group>h3{color:var(--steel-deep)}
.on-light .coach-group>h3::after{background:var(--rule-l)}

@media (max-width:780px){
  .roster{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .roster{grid-template-columns:repeat(2,1fr);gap:10px}
  .rost__id{padding:12px}
  .rost__go span{display:none}
  .rost__go{justify-content:flex-end}
  .rost__disc{font-size:.48rem;left:8px}
  .rost__soon span{letter-spacing:.16em;text-align:center}
}

/* --- 16 QUOTE ------------------------------------------------------------- */
.quote{max-width:58rem;margin-inline:auto;text-align:center;position:relative}
.quote .mark{display:block;width:40px;height:2px;background:var(--bone);margin:0 auto 2rem}
.quote blockquote{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-variation-settings:"wdth" 116,"wght" 800;
  font-size:clamp(1.5rem,3.1vw,2.6rem);line-height:1.06;letter-spacing:-.02em;color:var(--bone)}
.quote cite{display:block;margin-top:1.9rem;font-style:normal;font-family:var(--display);font-weight:700;
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--steel)}

/* --- 17 CTA BAND ---------------------------------------------------------- */
.cta{position:relative;overflow:hidden;isolation:isolate;text-align:center;background:var(--navy-950)}
.cta__media{position:absolute;inset:0;z-index:-3}
.cta__media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.cta::before{content:"";position:absolute;inset:0;z-index:-2;background:rgba(2,10,34,.86)}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--weave-d);opacity:.8}
.cta h2{max-width:19ch;margin-inline:auto}
.cta .lede{margin:1.4rem auto 0}
.cta-flag{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--display);font-weight:800;
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--navy);background:var(--bone);
  padding:.55rem 1.1rem;margin-bottom:1.8rem}

/* --- 18 FORMS ------------------------------------------------------------- */
.form{display:grid;gap:1.15rem}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.field label{display:flex;align-items:center;gap:.55rem;font-family:var(--display);font-size:.66rem;
  letter-spacing:.22em;text-transform:uppercase;margin-bottom:.5rem;color:var(--steel-deep);font-weight:700}
.field label em{font-style:normal;font-size:.56rem;letter-spacing:.18em;color:var(--steel);
  border:1px solid var(--rule-l);padding:.16rem .4rem}
.sec--dark .field label,.sec--deep .field label,.sec--lift .field label{color:var(--steel)}
.field input,.field select,.field textarea{width:100%;padding:.95rem 1.05rem;border:1px solid var(--rule-l);
  background:#fff;color:var(--navy);font:inherit;font-size:.97rem;border-radius:0;transition:border-color .25s}
.sec--dark .field input,.sec--dark .field select,.sec--dark .field textarea,
.sec--deep .field input,.sec--deep .field select,.sec--deep .field textarea{
  background:var(--navy-850);border-color:var(--rule-d);color:var(--bone)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--navy)}
.sec--dark .field input:focus,.sec--deep .field input:focus,
.sec--dark .field select:focus,.sec--dark .field textarea:focus{border-color:var(--bone)}
.field textarea{min-height:128px;resize:vertical}
.field .err{display:block;margin-top:.4rem;font-size:.82rem;color:var(--navy);font-weight:600}
.sec--dark .field .err,.sec--deep .field .err{color:var(--bone)}
.field.invalid input,.field.invalid select{border-color:var(--navy);border-width:2px}
.form-note{font-size:.82rem;color:var(--steel-deep)}
.sec--dark .form-note,.sec--deep .form-note{color:var(--steel)}
.form-ok{padding:2rem;border:1px solid var(--rule-l);background:var(--bone-50);text-align:center}
.form-ok h3{margin-bottom:.6rem}

/* --- 19 INFO / LOCATION CARDS --------------------------------------------- */
.info{display:flex;gap:1.1rem;align-items:flex-start}
.info .ico{width:40px;height:40px;flex:none;display:grid;place-items:center;background:var(--navy);
  color:var(--bone);font-family:var(--display);font-size:.72rem;font-weight:800;letter-spacing:.06em}
.sec--dark .info .ico,.sec--deep .info .ico{background:var(--bone);color:var(--navy)}
.info h4{margin:0 0 .3rem}
.info p,.info a{font-size:.96rem;color:var(--steel-deep);margin:0;line-height:1.65}
.sec--dark .info p,.sec--dark .info a,.sec--deep .info p,.sec--deep .info a{color:var(--steel)}
.info a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.sec--dark .info a:hover,.sec--deep .info a:hover{color:var(--bone)}




/* --- 20 FAQ --------------------------------------------------------------- */
.faq{border-top:1px solid var(--rule-l)}
.faq details{border-bottom:1px solid var(--rule-l)}
.faq summary{list-style:none;cursor:pointer;padding:1.45rem 3rem 1.45rem 0;position:relative;
  font-family:var(--display);font-size:clamp(1.02rem,1.5vw,1.24rem);text-transform:uppercase;
  letter-spacing:.01em;font-weight:700;font-variation-settings:"wdth" 108,"wght" 700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:13px;height:1px;
  background:currentColor;transform:translateY(-50%)}
.faq summary::before{content:"";position:absolute;right:10px;top:50%;width:1px;height:13px;
  background:currentColor;transform:translateY(-50%);transition:transform .3s var(--ease)}
.faq details[open] summary::before{transform:translateY(-50%) scaleY(0)}
.faq details p{padding:0 2.5rem 1.6rem 0;max-width:76ch;font-size:.99rem;color:var(--steel-deep);margin:0}
.sec--dark .faq,.sec--dark .faq details{border-color:var(--rule-d)}
.sec--dark .faq details p{color:var(--steel)}

/* --- 21 STRIP GALLERY ----------------------------------------------------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.gal .media{aspect-ratio:1/1}
.gal img{transition:transform .9s var(--ease)}
.gal .media:hover img{transform:scale(1.05)}

/* --- 22 FOOTER (light) ----------------------------------------------------
   White footer on a layered gradient: a vertical white -> bone ramp, a warm
   crest-blue bloom top-right and a navy bloom bottom-left, with the tatami
   weave over the top. The page opens dark and closes light, so the dark CTA
   above drops into it through a soft 130px shadow rather than a hard cut.
   ------------------------------------------------------------------------- */
.ftr{position:relative;overflow:hidden;isolation:isolate;color:var(--navy);
  padding-top:clamp(52px,5.4vw,76px);
  background:
    radial-gradient(118% 88% at 88% -6%, rgba(0,50,161,.10), transparent 58%),
    radial-gradient(96% 76% at -8% 106%, rgba(4,16,52,.10), transparent 62%),
    linear-gradient(180deg,#ffffff 0%,var(--bone-50) 30%,var(--bone-100) 66%,var(--bone-200) 100%)}
.ftr::before{content:"";position:absolute;top:0;left:0;right:0;height:130px;z-index:-1;
  pointer-events:none;background:linear-gradient(180deg,rgba(4,16,52,.13),transparent)}
.ftr::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--weave-l);opacity:.8}

/* A — closing plate */
.ftr-plate{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3.6vw,60px);
  align-items:end;padding-bottom:clamp(26px,2.8vw,38px)}
.ftr-plate__id{display:flex;align-items:center;gap:clamp(16px,2vw,28px);--mark:clamp(66px,7vw,96px)}
/* The crest and the We Defy Foundation shield, as a pair. The crest's circle
   fills 89% of its square file while the shield fills its own, so the shield
   is set to 89% of the crest box and the two read at the same height. The
   partner mark is shown exactly as supplied (black shield); never recolour it. */
.ftr-marks{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);flex:none}
.ftr-crest{width:var(--mark);height:auto;flex:none}
.ftr-defy{flex:none;line-height:0;transition:transform .3s var(--ease)}
.ftr-defy img{display:block;width:auto;height:calc(var(--mark) * .89)}
.ftr-defy:hover{transform:translateY(-2px)}
.ftr-kick{display:block;font-family:var(--display);font-weight:800;font-size:.6rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--steel-deep);margin-bottom:.75rem}
.ftr-word{margin:0;font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 800;
  text-transform:uppercase;line-height:.9;letter-spacing:-.012em;color:var(--navy);
  font-size:clamp(1.65rem,3.8vw,2.95rem)}
.ftr-plate__act{border-left:1px solid var(--rule-l);padding-left:clamp(18px,2.4vw,36px)}
.ftr-plate__act p{margin:0 0 1.25rem;color:var(--steel-deep);font-size:.95rem;max-width:36ch}
.ftr-plate__act .btn{padding:.86rem 1.3rem;font-size:.76rem}
.ftr-plate__meta{display:flex;flex-wrap:wrap;gap:.45rem 1.5rem;margin-top:1.2rem}
.ftr-plate__meta a{font-family:var(--display);font-weight:700;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--navy);
  overflow-wrap:anywhere;transition:color .25s}
.ftr-plate__meta a:hover{color:var(--crest)}

/* B — the three academies */
.ftr-band{border-top:1px solid var(--rule-l)}
.ftr-band__lbl{margin:0;padding:.85rem 0 .1rem;font-family:var(--display);font-weight:800;
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--steel-deep);
  display:flex;align-items:center;gap:.6rem}
.ftr-band__lbl .num{color:var(--crest);font-size:.52rem}
.ftr-locs{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;list-style:none;
  border-top:1px solid var(--rule-l-soft);border-bottom:1px solid var(--rule-l)}
.floc{position:relative;display:flex;gap:clamp(10px,1.2vw,16px);
  padding:clamp(18px,1.9vw,26px) clamp(16px,2vw,30px) clamp(18px,1.9vw,26px) 0;
  transition:background .4s var(--ease-s)}
.floc+.floc{border-left:1px solid var(--rule-l-soft);padding-left:clamp(16px,2vw,30px)}
.floc::after{content:"";position:absolute;left:0;top:-1px;width:0;height:2px;
  background:var(--navy);transition:width .5s var(--ease)}
.floc:hover{background:rgba(255,255,255,.55)}
.floc:hover::after{width:100%}
.floc__n{font-family:var(--display);font-weight:800;font-size:.62rem;letter-spacing:.14em;
  color:var(--steel);padding-top:.35rem;flex:none}
.floc__name{display:block;font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 750;
  text-transform:uppercase;font-size:.84rem;letter-spacing:.02em;line-height:1.25;
  color:var(--navy);transition:color .25s}
.floc__name:hover{color:var(--crest);text-decoration:underline;text-underline-offset:4px}
.floc__b em{display:block;font-style:normal;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel-dark);margin-top:.35rem}
.floc address{font-style:normal;font-size:.88rem;line-height:1.6;color:var(--steel-deep);
  margin:.7rem 0 .55rem}
.floc__tel{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  color:var(--navy);transition:color .25s}
.floc__tel:hover{color:var(--crest)}

/* C — horizontal link rails */
.ftr-nav{padding:clamp(10px,1.2vw,16px) 0 clamp(14px,1.6vw,20px)}
.ftr-nav__row{display:flex;align-items:baseline;gap:clamp(14px,2.4vw,34px);
  padding:clamp(10px,1.2vw,15px) 0}
.ftr-nav__row+.ftr-nav__row{border-top:1px solid var(--rule-l-soft)}
.ftr-nav__lbl{flex:none;width:clamp(78px,9vw,118px);font-family:var(--display);font-weight:800;
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--steel-deep)}
.ftr-tags{display:flex;flex-wrap:wrap;gap:.45rem .5rem;margin:0;padding:0;list-style:none}
.ftr-tags a{display:inline-block;padding:.42rem .82rem;border:1px solid var(--rule-l);
  background:rgba(255,255,255,.55);font-size:.82rem;color:var(--navy);line-height:1.3;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.ftr-tags a i{font-style:normal;font-size:.68rem;opacity:.55;margin-left:.2rem}
.ftr-tags a:hover{background:var(--navy);border-color:var(--navy);color:var(--bone)}

/* D — base bar */
.ftr-bot{border-top:1px solid var(--rule-l);padding-block:1.3rem;display:flex;flex-wrap:wrap;
  align-items:center;gap:.9rem clamp(1.2rem,3vw,2.6rem)}
.ftr-legal{margin:0;flex:1 1 auto;font-size:.78rem;color:var(--steel-dark)}
.ftr-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.ftr-legal a:hover{color:var(--navy)}
.ftr-top{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--display);
  font-weight:700;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--steel-deep);transition:color .25s}
.ftr-top i{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--rule-l);
  font-size:.7rem;transition:.3s var(--ease)}
.ftr-top:hover{color:var(--navy)}
.ftr-top:hover i{background:var(--navy);border-color:var(--navy);color:var(--bone);
  transform:translateY(-2px)}

/* social marks — inline SVG. Base tile is for the light drawer; the footer
   sits on the same light ground, so both share the navy-on-white treatment. */
.social{display:flex;gap:.5rem;flex:none}
.social a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--rule-l);
  background:rgba(255,255,255,.55);color:var(--navy);transition:.3s var(--ease)}
.social a svg{width:19px;height:19px;display:block}
.social a:hover{background:var(--navy);border-color:var(--navy);color:var(--bone);
  transform:translateY(-2px)}
.drawer .social{margin-top:1.4rem}

@media (max-width:1000px){
  .ftr-plate{grid-template-columns:1fr;align-items:start;gap:26px}
  .ftr-plate__act{border-left:0;border-top:1px solid var(--rule-l);padding-left:0;padding-top:24px}
  .ftr-locs{grid-template-columns:1fr}
  .floc{padding-right:0}
  .floc+.floc{border-left:0;border-top:1px solid var(--rule-l-soft);padding-left:0}
}
@media (max-width:640px){
  .ftr-plate__id{gap:14px;flex-wrap:wrap}
  .ftr-nav__row{flex-direction:column;align-items:flex-start;gap:.8rem}
  .ftr-nav__lbl{width:auto}
  .ftr-bot{gap:1rem}
  .ftr-legal{flex:1 1 100%;order:3}
}

/* --- 23 REVEAL ------------------------------------------------------------ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .85s var(--ease),transform .85s 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}.rv-d5{transition-delay:.4s}.rv-d6{transition-delay:.48s}

/* --- 24 RESPONSIVE -------------------------------------------------------- */
@media (max-width:1140px){
  .nav,.utility,.hdr-cta .btn{display:none}
  .burger{display:block}
  .hdr .wrap{gap:1rem}
  .strip .wrap{grid-template-columns:repeat(2,1fr)}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .lineage ol{grid-template-columns:repeat(3,1fr);gap:2rem 0}
  .lineage ol::before{display:none}
}
@media (max-width:900px){
  .g3{grid-template-columns:repeat(2,1fr)}
  .split,.split--7525{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .split__media.bleed{margin-inline:calc(var(--gut)*-1)}
  .split__media .media{aspect-ratio:4/3}
  .sec-head--split{grid-template-columns:1fr;align-items:start}
  .gal{grid-template-columns:repeat(2,1fr)}
  .pcard--wide{grid-column:span 1;flex-direction:column}
  /* min-height:100% from the desktop two-column layout would stretch the
     photo once the card stacks, so it is released here */
  .pcard--wide .media{aspect-ratio:3/2;width:100%;min-height:0}
  .pcard--wide .pcard__b{width:100%}
  /* shorter crops on small screens — bias focal point higher so heads stay in frame */
  .hero__media img{object-position:50% 2%}
  .banner__media img{object-position:50% 15%}
  .cta__media img{object-position:50% 24%}
  .ftr__media img{object-position:50% 20%}
}
@media (max-width:640px){
  :root{--hdr:70px}
  body{font-size:16px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr}
  .strip .wrap{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr}
  .lineage ol{grid-template-columns:1fr;gap:1.6rem}
  .brand img{height:38px}
  .brand-txt b{font-size:.92rem}
  .brand-txt span{font-size:.54rem;letter-spacing:.28em}
  .scorecard div{border-right:0;padding-right:0;margin-right:0;flex:1 1 44%}
  .row{grid-template-columns:96px 1fr;row-gap:.45rem}
  .row .tag{grid-column:2;justify-self:start}
  .mini li{grid-template-columns:80px 1fr;row-gap:.3rem}
  .mini .c{grid-column:2}
  .scroll-cue{display:none}
  .sched-ctrl{flex-direction:column;align-items:stretch}
}

/* --- 25 MOTION / PRINT ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv,.rise{opacity:1!important;transform:none!important}
}
@media print{
  .utility,.hdr,.drawer,.scrim,.cta,.ftr,.btn,.scroll-cue,.filters{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .sec{padding-block:12pt}
  .panel{display:block!important;page-break-inside:avoid}
  .row{border:1px solid #999;background:#fff;color:#000}
  .tabs{display:none}
  .panel::before{content:attr(data-day);display:block;font-weight:800;font-size:13pt;
    text-transform:uppercase;margin:12pt 0 6pt}
}

/* --- 26 FOCAL-POINT OVERRIDES (must beat the component defaults) ---------- */
.hero__media.fp-top img,.banner__media.fp-top img,.cta__media.fp-top img,.ftr__media.fp-top img{object-position:50% 8%}
.hero__media.fp-high img,.banner__media.fp-high img,.cta__media.fp-high img,.ftr__media.fp-high img{object-position:50% 18%}
.hero__media.fp-upper img,.banner__media.fp-upper img,.cta__media.fp-upper img,.ftr__media.fp-upper img{object-position:50% 28%}
.hero__media.fp-mid img,.banner__media.fp-mid img,.cta__media.fp-mid img,.ftr__media.fp-mid img{object-position:50% 42%}
@media (max-width:900px){
  .hero__media.fp-top img,.banner__media.fp-top img{object-position:50% 2%}
  .hero__media.fp-high img{object-position:50% 2%}
  .banner__media.fp-high img{object-position:50% 12%}
  .hero__media.fp-upper img{object-position:50% 6%}
  .banner__media.fp-upper img{object-position:50% 20%}
  .hero__media.fp-mid img,.banner__media.fp-mid img{object-position:50% 32%}
}
.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}

/* --- 27 "ON THE MATS NOW" BOX -------------------------------------------- */
.now-box{position:relative;background:var(--navy);color:var(--bone);
  border:1px solid var(--navy);padding:1.15rem 1.35rem;min-width:min(340px,100%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.now-box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bone)}
.now-box .kicker,.on-light .now-box .kicker{display:inline-flex;align-items:center;gap:.5rem;
  color:var(--steel);margin-bottom:.5rem}
.now-box .kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--crest);
  animation:matpulse 1.5s ease-in-out infinite}
.now-box p{margin:0;font-size:.98rem;line-height:1.5;color:var(--bone)}
.now-box strong{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-variation-settings:"wdth" 112,"wght" 800;color:#fff}
.on-light .now-box p{color:var(--bone)}
@media (max-width:900px){.now-box{align-self:start;margin-top:1.4rem}}

/* --- 28 REFINEMENTS (post visual audit) ---------------------------------- */
/* headline scale: leave room for Archivo's wider metrics */
h1{font-size:clamp(2.4rem,6.4vw,5.4rem)}
h2{font-size:clamp(1.9rem,4.1vw,3.5rem)}

/* card overlays: keep labels legible over pale gis and bright mats */
.pcard::after{background:linear-gradient(180deg,rgba(4,16,52,.18) 0%,rgba(4,16,52,.34) 34%,
  rgba(2,10,34,.90) 62%,rgba(2,10,34,.98) 100%)}
.coach::after{background:linear-gradient(180deg,rgba(4,16,52,.06) 32%,rgba(2,10,34,.72) 62%,
  rgba(2,10,34,.96) 92%)}

/* portraits sit in the palette rather than fighting it */
.duo img{filter:none}

/* NAP strip: finish the outer edges */
.strip .wrap{border-inline:1px solid var(--rule-l)}

/* hero kicker must never clip on narrow screens */
.hero .kicker{flex-wrap:wrap;row-gap:.5rem}

@media (max-width:1140px){
  /* the phone number must not crowd the burger off the bar */
  .hdr .wrap{gap:.75rem}
}
@media (max-width:760px){
  .hdr-tel{display:none}
  .hero .kicker::before{display:none}
  .hero .kicker{font-size:.66rem;letter-spacing:.22em}
}
@media (max-width:420px){
  .brand-txt{display:none}
  .brand img{height:42px}
}

/* --- 29 HEADER FIT + SMALL-SCREEN BUTTONS -------------------------------- */
/* the bar carries brand + 7 nav items + phone + CTA — give it room and stop wraps */
.hdr .wrap{max-width:1500px}
.sub a span{white-space:nowrap}
@media (max-width:1340px){
  .hdr-tel{display:none}
}
@media (max-width:480px){
  .btn-row{gap:.7rem}
  .btn-row .btn{width:100%}
  .hero .btn-row .btn{width:100%}
}

/* --- 30 BANNER LEGIBILITY ------------------------------------------------ */
/* The gym photography is shot dark. Lift it, and move the scrim to a side+bottom
   wash so the picture reads while the headline keeps its contrast. */
.banner__media img{filter:brightness(1.14) contrast(1.02)}
.banner::before{
  background:linear-gradient(180deg,rgba(2,10,34,.52) 0%,rgba(4,16,52,.26) 34%,
             rgba(4,16,52,.78) 76%,rgba(4,16,52,.96) 100%),
             linear-gradient(90deg,rgba(2,10,34,.82) 0%,rgba(2,10,34,.30) 46%,rgba(2,10,34,0) 78%)
}
.hero__media img{filter:brightness(1.10) contrast(1.02)}
.cta__media img{filter:brightness(1.12)}
@media (max-width:900px){
  /* narrow screens put text over the middle of the frame — go back to a full wash */
  .banner::before{background:linear-gradient(180deg,rgba(2,10,34,.72),rgba(4,16,52,.52) 40%,rgba(4,16,52,.96))}
}

/* --- 31 NAV LOGO (circular crest) ---------------------------------------- */
/* The square crest is artwork on white, so it is clipped to a disc — the white
   ground becomes the badge itself instead of a box floating on the navy bar. */
.brand img{height:48px;width:48px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px rgba(222,227,222,.28);transition:box-shadow .3s}
.brand:hover img{box-shadow:0 0 0 1px var(--bone)}
.drawer-top img{height:46px;width:46px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px rgba(222,227,222,.28)}
@media (max-width:620px){.brand img{height:42px;width:42px}}
@media (max-width:420px){.brand img{height:40px;width:40px}}

/* --- 32 REVIEWS ---------------------------------------------------------- */
.rev-grid{columns:3;column-gap:clamp(16px,2vw,26px)}
.rev{position:relative;break-inside:avoid;margin:0 0 clamp(16px,2vw,26px);overflow:hidden;
  background:#fff;border:1px solid var(--rule-l);border-top:3px solid var(--navy);
  padding:clamp(24px,2.5vw,32px);isolation:isolate;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
.rev:hover{transform:translateY(-5px);box-shadow:0 24px 46px -30px rgba(4,16,52,.55)}

/* oversized quote mark, watermarked behind the text */
.rev>*{position:relative;z-index:1}
.rev::before{content:"\201C";position:absolute;top:-.12em;right:.04em;z-index:0;
  font-family:var(--display);font-weight:800;font-size:8.5rem;line-height:1;
  font-variation-settings:"wdth" 120,"wght" 800;color:rgba(4,16,52,.07);
  transition:color .45s;pointer-events:none}
.rev:hover::before{color:rgba(0,50,161,.13)}
/* corner wedge in the crest blue */
.rev::after{content:"";position:absolute;top:0;right:0;z-index:0;width:72px;height:72px;
  background:linear-gradient(225deg,var(--crest) 0 50%,transparent 50%);opacity:.18;
  transition:opacity .45s}
.rev:hover::after{opacity:.34}

/* every third card runs on the crest blue */
.rev:nth-child(3n-1){background:var(--crest);border-color:var(--crest);border-top-color:var(--bone)}
.rev:nth-child(3n-1) blockquote{color:var(--bone)}
.rev:nth-child(3n-1) cite{color:#fff}
.rev:nth-child(3n-1) .src{color:rgba(222,227,222,.72)}
.rev:nth-child(3n-1) .att{border-top-color:rgba(222,227,222,.28)}
.rev:nth-child(3n-1) .qm{background:var(--bone)}
.rev:nth-child(3n-1)::before{color:rgba(255,255,255,.14)}
.rev:nth-child(3n-1):hover::before{color:rgba(255,255,255,.22)}
.rev:nth-child(3n-1)::after{background:linear-gradient(225deg,#fff 0 50%,transparent 50%);opacity:.12}

.rev .qm{display:block;width:26px;height:2px;background:var(--navy);margin-bottom:1.1rem}
.rev blockquote{margin:0;font-size:1.01rem;line-height:1.66;color:var(--navy)}
.rev .att{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--rule-l-soft);
  display:flex;align-items:baseline;justify-content:space-between;gap:.9rem}
.rev cite{font-style:normal;font-family:var(--display);font-weight:700;font-size:.8rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--navy);
  font-variation-settings:"wdth" 106,"wght" 700}
.rev .src{font-family:var(--display);font-weight:700;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel-deep);white-space:nowrap}
@media (max-width:980px){.rev-grid{columns:2}}
@media (max-width:640px){.rev-grid{columns:1}}

/* --- 33 MARQUEE (under the hero) ----------------------------------------- */
.marquee{position:relative;isolation:isolate;overflow:hidden;background:var(--navy-950);
  border-bottom:1px solid var(--rule-d-soft)}
.marquee::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--weave-d);opacity:.7;pointer-events:none}
.marquee::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--navy-950) 0%,rgba(2,10,34,0) 15%,rgba(2,10,34,0) 85%,var(--navy-950) 100%)}
.marquee__row{position:relative;z-index:1;display:flex;overflow:hidden;padding-block:.95rem}
.marquee__track{display:flex;flex:none;animation:mq 46s linear infinite;will-change:transform}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee__track span{display:inline-flex;align-items:center;gap:clamp(1rem,2vw,1.9rem);
  padding-right:clamp(1rem,2vw,1.9rem);white-space:nowrap;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-variation-settings:"wdth" 118,"wght" 800;letter-spacing:-.012em;
  font-size:clamp(1.35rem,2.4vw,2.2rem);line-height:1.25;color:var(--bone)}
.marquee__track span::after{content:"";width:8px;height:8px;background:var(--bone);
  transform:rotate(45deg);flex:none;opacity:.5}
.marquee__track span:nth-child(even){-webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.3px rgba(222,227,222,.85)}
.marquee:hover .marquee__track{animation-play-state:paused}
@media (max-width:640px){.marquee__track span{font-size:1.15rem}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* --- 34 BRAND MARK SIZES -------------------------------------------------- */
@media (max-width:1240px){.brand img{height:48px;width:48px}}
@media (max-width:620px){.brand img{height:44px;width:44px}}
@media (max-width:420px){.brand img{height:42px;width:42px}}
/* the crest is transparent, so on the dark footer it sits on a bone disc */
.ftr-brand img{height:76px;width:76px;object-fit:contain;background:var(--bone);
  border-radius:50%;padding:7px;margin-bottom:1.4rem}
@media (max-width:1180px){
  .mega__inner{grid-template-columns:repeat(2,1fr)}
  .mega__promo{grid-column:span 2;min-height:150px}
}

/* --- 35 NAV FIT (stepped down to the burger breakpoint) ------------------- */
@media (max-width:1400px){ .hdr-tel{display:none} }
@media (max-width:1340px){
  .nav .nav-link{padding:1.05rem .68rem;font-size:.78rem;letter-spacing:.12em}
  .nav .nav-link::after{left:.68rem;right:.68rem}
}
@media (max-width:1240px){
  .nav .nav-link{padding:1.05rem .5rem;font-size:.74rem;letter-spacing:.09em}
  .nav .nav-link::after{left:.5rem;right:.5rem}
  .brand img{height:46px}
  .brand-txt b{font-size:.95rem}
  .brand-txt span{font-size:.55rem;letter-spacing:.28em}
  .hdr-cta .btn{padding:.68rem 1.05rem;font-size:.74rem;letter-spacing:.12em}
  .hdr-cta{margin-left:.5rem;gap:.7rem}
}

/* --- 36 INSTRUCTOR PROFILE HEAD ------------------------------------------ */
.profile-head .split{grid-template-columns:.86fr 1.14fr;align-items:center}
.profile-head h1{font-size:clamp(2rem,3.3vw,3.05rem)}
.profile-head .btn-row{margin-top:2rem}
.profile-head .btn{padding:.95rem 1.5rem;font-size:.85rem}
@media (max-width:900px){.profile-head .split{grid-template-columns:1fr}}
/* kicker labels need the darker grey to hold contrast on bone */
.on-light .kicker,.sec--light .kicker,.sec--light-50 .kicker,.sec--light-100 .kicker{color:var(--steel-deep)}

/* --- 37 "WHY HERE" BOARD -------------------------------------------------
   Replaces the four flat tiles. A staggered board of four cards, each on a
   different ground drawn from the identity — white, crest blue, navy, and an
   outlined ghost — with an oversized outlined numeral bleeding off the corner
   and a small CSS-drawn mark. Colour comes from the logo, not from nowhere.
   ----------------------------------------------------------------------- */
.why{position:relative;overflow:hidden;isolation:isolate;background:var(--bone-100)}
.why::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--weave-l);opacity:.9}
.why::after{content:"";position:absolute;z-index:-1;right:-9%;bottom:-24%;width:46%;padding-bottom:46%;
  border-radius:50%;border:1px solid rgba(0,50,161,.16);pointer-events:none}
.why__ring{position:absolute;z-index:-1;left:-12%;top:-18%;width:34%;padding-bottom:34%;
  border-radius:50%;background:radial-gradient(circle,rgba(0,50,161,.10),transparent 68%);
  pointer-events:none}

.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,30px);
  padding-bottom:clamp(24px,3.4vw,56px)}
.why-card{position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(28px,3vw,46px);min-height:clamp(230px,24vw,290px);
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.why-card:nth-child(even){transform:translateY(clamp(18px,3vw,46px))}
.why-card:hover{transform:translateY(-6px);box-shadow:0 28px 56px -32px rgba(4,16,52,.55)}
.why-card:nth-child(even):hover{transform:translateY(calc(clamp(18px,3vw,46px) - 6px));
  box-shadow:0 28px 56px -32px rgba(4,16,52,.55)}

/* grounds */
.why-card--paper{background:#fff;color:var(--navy);border:1px solid var(--rule-l)}
.why-card--crest{background:var(--crest);color:var(--bone)}
.why-card--navy{background:var(--navy);color:var(--bone)}
.why-card--ghost{background:transparent;color:var(--navy);border:1px solid rgba(4,16,52,.28)}

.why-card h3{font-size:clamp(1.2rem,1.7vw,1.55rem);margin-bottom:.75rem;color:inherit}
.why-card p{font-size:.95rem;line-height:1.62;margin:0;color:inherit;opacity:.82;max-width:44ch}
.why-card .n{position:absolute;top:-.09em;right:.05em;z-index:-1;
  font-family:var(--display);font-weight:800;font-size:clamp(7rem,11vw,11rem);line-height:.78;
  font-variation-settings:"wdth" 122,"wght" 800;letter-spacing:-.05em;
  -webkit-text-fill-color:transparent;-webkit-text-stroke:1px currentColor;opacity:.2;
  transition:opacity .5s}
.why-card:hover .n{opacity:.34}

/* small CSS-drawn marks, one per card */
.why-card .mk{position:absolute;top:clamp(26px,2.8vw,40px);left:clamp(28px,3vw,46px);
  width:26px;height:26px;opacity:.85}
.mk--clock{border:2px solid currentColor;border-radius:50%}
.mk--clock::after{content:"";position:absolute;left:50%;top:22%;width:2px;height:32%;
  background:currentColor;transform-origin:bottom}
.mk--swap{background:
  linear-gradient(currentColor,currentColor) 0 4px/26px 2px no-repeat,
  linear-gradient(currentColor,currentColor) 0 12px/17px 2px no-repeat,
  linear-gradient(currentColor,currentColor) 9px 20px/17px 2px no-repeat}
.mk--podium{background:
  linear-gradient(currentColor,currentColor) 0 100%/6px 55% no-repeat,
  linear-gradient(currentColor,currentColor) 10px 100%/6px 100% no-repeat,
  linear-gradient(currentColor,currentColor) 20px 100%/6px 75% no-repeat}
.mk--levels{background:
  linear-gradient(currentColor,currentColor) 0 100%/6px 40% no-repeat,
  linear-gradient(currentColor,currentColor) 10px 100%/6px 70% no-repeat,
  linear-gradient(currentColor,currentColor) 20px 100%/6px 100% no-repeat}
.mk--lion{border:2px solid currentColor;transform:rotate(45deg);width:20px;height:20px}
.mk--lion::after{content:"";position:absolute;inset:5px;border:2px solid currentColor}

@media (max-width:760px){
  .why-grid{grid-template-columns:1fr}
  .why-card:nth-child(even),.why-card:nth-child(even):hover{transform:none}
  .why-card:hover{transform:translateY(-4px)}
  .why-card{min-height:0}
}

/* --- 38 STEP TRACK -------------------------------------------------------
   Replaces the four free-floating tiles. One connected panel divided by
   hairlines, with a diamond node sitting on the top rule above each column —
   so a sequence reads as a sequence instead of four unrelated boxes.
   ----------------------------------------------------------------------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--rule-d);background:var(--navy-850)}
.steps--3{grid-template-columns:repeat(3,1fr)}

.step{position:relative;isolation:isolate;
  padding:clamp(30px,3.1vw,46px) clamp(20px,2.1vw,30px) clamp(32px,3.2vw,48px);
  border-right:1px solid var(--rule-d);transition:background .45s var(--ease-s)}
.step:last-child{border-right:0}
.step:hover{background:rgba(222,227,222,.05)}

/* node on the rail */
.step::before{content:"";position:absolute;top:-5px;left:clamp(20px,2.1vw,30px);z-index:2;
  width:9px;height:9px;transform:rotate(45deg);
  background:var(--navy-850);border:1px solid var(--bone);
  transition:background .4s,box-shadow .4s}
.step:hover::before{background:var(--bone);box-shadow:0 0 0 4px rgba(222,227,222,.12)}

/* the numeral sits behind the copy, bleeding off the right edge */
.step__n{position:absolute;top:.4em;right:.04em;z-index:-1;
  font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 122,"wght" 800;
  font-size:clamp(4.2rem,5.6vw,6rem);line-height:.8;letter-spacing:-.05em;
  -webkit-text-fill-color:transparent;-webkit-text-stroke:1px rgba(222,227,222,.16);
  transition:-webkit-text-stroke-color .45s;pointer-events:none;user-select:none}
.step:hover .step__n{-webkit-text-stroke-color:rgba(222,227,222,.4)}

.step__k{display:block;font-family:var(--display);font-weight:700;font-size:.6rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--steel);margin-bottom:1.5rem}
.step h3{font-size:clamp(1.06rem,1.3vw,1.24rem);margin-bottom:.8rem;color:#fff;max-width:18ch}
.step p{font-size:.93rem;line-height:1.62;color:var(--bone-300);margin:0}

/* light placement */
.on-light .steps,.sec--light .steps,.sec--light-50 .steps,.sec--light-100 .steps{
  background:#fff;border-color:var(--rule-l)}
.on-light .step{border-right-color:var(--rule-l)}
.on-light .step:hover{background:var(--bone-50)}
.on-light .step::before{background:#fff;border-color:var(--navy)}
.on-light .step:hover::before{background:var(--navy);box-shadow:0 0 0 4px rgba(4,16,52,.10)}
.on-light .step__n{-webkit-text-stroke-color:rgba(4,16,52,.16)}
.on-light .step:hover .step__n{-webkit-text-stroke-color:rgba(4,16,52,.38)}
.on-light .step__k{color:var(--steel-deep)}
.on-light .step h3{color:var(--navy)}
.on-light .step p{color:var(--steel-deep)}

@media (max-width:1000px){
  .steps,.steps--3{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(2n){border-right:0}
  .step:nth-child(-n+2){border-bottom:1px solid var(--rule-d)}
  .on-light .step:nth-child(-n+2){border-bottom-color:var(--rule-l)}
}
@media (max-width:620px){
  .steps,.steps--3{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--rule-d)}
  .on-light .step{border-bottom-color:var(--rule-l)}
  .step:last-child{border-bottom:0}
  .step__n{font-size:4rem;top:.5em}
}

/* --- 39 COMMUNITY MOSAIC ------------------------------------------------- */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(120px,12.5vw,185px);gap:8px;grid-auto-flow:dense}
.mosaic .media{overflow:hidden;background:var(--navy-800)}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.mosaic .media:hover img{transform:scale(1.06)}
.mosaic .media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(2,10,34,.35));
  opacity:0;transition:opacity .45s}
.mosaic .media:hover::after{opacity:1}
.m-w2{grid-column:span 2}
.m-h2{grid-row:span 2}
@media (max-width:900px){
  .mosaic{grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(110px,16vw,150px)}
}
@media (max-width:560px){
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:42vw}
  .m-w2{grid-column:span 2}
  .m-h2{grid-row:span 1}
}

/* --- 40 CTA POSTER ------------------------------------------------------
   Was centred text floating on a dark photograph. Now a full-bleed image with
   a solid offset card sitting on it, corner cut, carrying the offer and the
   desk details — a poster rather than a banner.
   ----------------------------------------------------------------------- */
.cta2{position:relative;overflow:hidden;isolation:isolate;background:var(--navy-950);
  display:flex;align-items:center;min-height:clamp(340px,40vh,448px);
  padding-block:clamp(32px,3.2vw,46px)}
.cta2__media{position:absolute;inset:0;z-index:-3}
.cta2__media img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;
  filter:brightness(1.06)}
.cta2::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(90deg,rgba(2,10,34,.94) 0%,rgba(2,10,34,.72) 38%,
             rgba(2,10,34,.18) 72%,rgba(2,10,34,.38) 100%)}
.cta2::after{content:"";position:absolute;inset:0;z-index:-1;
  background-image:var(--weave-d);opacity:.55}

.cta2__card{position:relative;max-width:min(760px,94%);
  background:var(--navy-950);border:1px solid var(--rule-d);border-top:3px solid var(--bone);
  padding:clamp(26px,2.6vw,38px) clamp(26px,3vw,44px);
  box-shadow:0 40px 80px -44px rgba(0,0,0,.95);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%)}
.cta2__card::before{content:"";position:absolute;right:0;bottom:0;width:34px;height:34px;
  background:linear-gradient(225deg,var(--rule-d) 0 1px,transparent 1px)}
.cta2__flag{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;
  font-family:var(--display);font-weight:800;font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--navy);background:var(--bone);padding:.5rem 1rem}
.cta2__card h2{font-size:clamp(1.65rem,2.6vw,2.35rem);line-height:1}
.cta2__card .lede{margin-top:.8rem;max-width:56ch;font-size:clamp(.94rem,1vw,1rem)}
.cta2__card .btn-row{margin-top:1.35rem;flex-wrap:wrap}
.cta2__card .btn{padding:.84rem 1.3rem;font-size:.78rem;letter-spacing:.13em}
.cta2__foot{display:flex;flex-wrap:wrap;gap:.5rem clamp(1.1rem,2.6vw,2rem);
  margin-top:1.15rem;padding-top:.85rem;border-top:1px solid var(--rule-d)}
.cta2__foot span,.cta2__foot a{font-family:var(--display);font-weight:700;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.cta2__foot a:hover{color:var(--bone)}
@media (max-width:820px){
  .cta2{min-height:0}
  .cta2::before{background:linear-gradient(180deg,rgba(2,10,34,.80),rgba(2,10,34,.92))}
  .cta2__card{max-width:100%}
  .cta2__card .btn-row{flex-wrap:wrap}
  .cta2__card .btn-row .btn{width:100%}
}

/* --- 41 BOOKING BLOCK ----------------------------------------------------
   The trial form was floating loose on the light ground next to an unanchored
   list of details, with a large dead corner. It is now a paired block: a white
   form card with a navy cap and a corner cut, against a solid navy panel that
   carries the NAP, the opening hours and a three-step "what happens next".
   Experience field removed — five inputs, two rows, one column of nothing.
   ----------------------------------------------------------------------- */
.book{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(16px,1.8vw,26px);
  align-items:stretch;margin-top:clamp(26px,3vw,42px)}

/* form card */
.book__form{position:relative;background:#fff;border:1px solid var(--rule-l);
  border-top:3px solid var(--navy);padding:clamp(22px,2.6vw,38px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
.book__form::after{content:"";position:absolute;right:0;bottom:0;width:26px;height:26px;
  background:linear-gradient(225deg,var(--rule-l) 0 1px,transparent 1px)}
.book__hd{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:.7rem 1rem;padding-bottom:1.15rem;margin-bottom:1.6rem;border-bottom:1px solid var(--rule-l)}
.book__flag{display:inline-flex;align-items:center;gap:.5rem;background:var(--navy);color:var(--bone);
  font-family:var(--display);font-weight:800;font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;padding:.46rem .8rem}
.book__flag::before{content:"\25C6";font-size:.5rem}
.book__hd p{margin:0;font-family:var(--display);font-weight:700;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--steel-dark)}
.book__form .field input,.book__form .field select,.book__form .field textarea{
  background:var(--bone-50);border-color:var(--rule-l)}
.book__form .field input:focus,.book__form .field select:focus,.book__form .field textarea:focus{
  background:#fff;border-color:var(--navy);box-shadow:0 0 0 3px rgba(4,16,52,.09)}
.book__submit{justify-self:start;margin-top:.5rem;padding:1.02rem 1.7rem;font-size:.8rem}
.book__form .form-note{margin:.2rem 0 0}
/* the card now explains the two steps and opens the booking modal; the
   content sits centred in the height the taller navy panel gives it */
.book__form{display:flex;flex-direction:column;align-items:flex-start}
.book__hd{align-self:stretch}
.book__steps{margin:auto 0 1.9rem}
.book__form .form-note{margin-bottom:auto}
.book__form .form-note{margin-top:1rem}

/* navy detail panel */
.book__aside{position:relative;display:flex;flex-direction:column;background:var(--navy);
  color:var(--bone);isolation:isolate;overflow:hidden;padding:clamp(22px,2.4vw,32px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
.book__aside::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:var(--weave-d);opacity:.75}
.book__aside .bk{display:flex;align-items:center;gap:.7rem;margin:0 0 1.4rem;
  font-family:var(--display);font-weight:800;font-size:.6rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--steel)}
.book__aside .bk::after{content:"";flex:1;height:1px;background:var(--rule-d)}

.ilist{display:grid;gap:1.05rem;margin:0;padding:0;list-style:none}
.ilist li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:.9rem;align-items:start}
.ilist .ico{display:grid;place-items:center;width:38px;height:38px;flex:none;
  border:1px solid var(--rule-d);background:transparent;color:var(--bone);
  font-family:var(--display);font-weight:800;font-size:.55rem;letter-spacing:.08em;
  transition:background .3s var(--ease),color .3s var(--ease)}
.ilist li:hover .ico{background:var(--bone);color:var(--navy);border-color:var(--bone)}
.ilist h4{margin:0 0 .3rem;font-family:var(--display);font-weight:800;font-size:.61rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.ilist p{margin:0;font-size:.92rem;line-height:1.62;color:var(--bone-300)}
.ilist a{color:var(--bone-300);transition:color .25s;overflow-wrap:anywhere}
.ilist a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

.next{margin:auto 0 0;padding:1.5rem 0 0;list-style:none;display:grid;gap:1rem}
.next::before{content:"";display:block;height:1px;background:var(--rule-d);margin-bottom:1.5rem}
.next li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:start}
.next b{font-family:var(--display);font-weight:800;font-size:.6rem;letter-spacing:.12em;
  color:var(--steel-deep);padding-top:.16rem}
.next h4{margin:0 0 .22rem;font-family:var(--display);font-weight:800;font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;color:#fff}
.next p{margin:0;font-size:.85rem;line-height:1.55;color:var(--steel)}

@media (max-width:980px){
  .book{grid-template-columns:1fr}
  .next{margin-top:1.4rem}
}
@media (max-width:560px){
  .f2{grid-template-columns:1fr}
  .book__submit{justify-self:stretch;text-align:center}
  .book__form .book__submit{display:flex;width:100%;justify-content:center}
}

/* --- 42 FINDING US -------------------------------------------------------
   Was a stacked heading over a bare full-width Google embed. Now a horizontal
   four-cell arrival band inside the container, then the map running edge to
   edge of the section with a navy address dock floating on its top-left.
   ----------------------------------------------------------------------- */
.arrive{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:0;
  margin:clamp(24px,3vw,40px) 0 0;
  border-top:1px solid var(--rule-l);border-bottom:1px solid var(--rule-l)}
.arrive li{position:relative;
  padding:clamp(20px,2.2vw,28px) clamp(16px,1.8vw,26px) clamp(20px,2.2vw,28px) 0;
  transition:background .4s var(--ease-s)}
.arrive li+li{border-left:1px solid var(--rule-l-soft);padding-left:clamp(16px,1.8vw,26px)}
.arrive li::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;
  background:var(--navy);transition:width .5s var(--ease)}
.arrive li:hover{background:rgba(255,255,255,.55)}
.arrive li:hover::after{width:100%}
.arrive b{display:flex;align-items:center;gap:.6rem;margin-bottom:.75rem;
  font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 800;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--navy)}
.arrive b i{font-style:normal;margin-left:auto;font-size:.58rem;letter-spacing:.1em;
  color:var(--steel-dark)}
.arrive p{margin:0;font-size:.9rem;line-height:1.65;color:var(--steel-deep)}

.mapband{position:relative;isolation:isolate;margin-top:clamp(26px,3vw,46px);
  border-top:1px solid var(--rule-l);border-bottom:1px solid var(--rule-l);background:var(--bone-100)}
.mapband iframe{display:block;width:100%;height:clamp(360px,50vh,520px);border:0}
.mapband__dock{position:absolute;z-index:2;left:var(--gut);top:clamp(16px,2vw,28px);
  display:flex;align-items:center;gap:clamp(12px,1.3vw,18px);
  max-width:min(540px,calc(100% - var(--gut)*2));
  background:var(--navy);color:var(--bone);border:1px solid var(--navy);
  padding:clamp(12px,1.2vw,15px) clamp(14px,1.4vw,19px);
  box-shadow:0 24px 46px -26px rgba(2,10,34,.85);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%)}
.mapband__pin{flex:none;display:grid;place-items:center;width:34px;height:34px;
  background:var(--bone);color:var(--navy);font-size:.62rem}
.mapband__id{min-width:0}
.mapband__id b{display:block;font-family:var(--display);
  font-variation-settings:"wdth" 110,"wght" 750;text-transform:uppercase;
  font-size:.78rem;letter-spacing:.03em;line-height:1.2;color:#fff}
.mapband__id em{display:block;font-style:normal;font-size:.82rem;color:var(--steel);margin-top:.22rem}
.mapband__go{flex:none;display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--rule-d);padding:.52rem .82rem;
  font-family:var(--display);font-weight:700;font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone);transition:.3s var(--ease)}
.mapband__go i{font-style:normal;font-size:.68rem}
.mapband__go:hover{background:var(--bone);color:var(--navy);border-color:var(--bone)}

@media (max-width:900px){
  .arrive{grid-template-columns:repeat(2,1fr)}
  .arrive li:nth-child(3){border-left:0;padding-left:0}
  .arrive li:nth-child(-n+2){border-bottom:1px solid var(--rule-l-soft)}
}
@media (max-width:760px){
  .mapband__dock{position:static;max-width:none;width:100%;clip-path:none;flex-wrap:wrap;
    box-shadow:none;border-left:0;border-right:0;border-top:0}
  .mapband__go{margin-left:auto}
}
@media (max-width:560px){
  .arrive{grid-template-columns:1fr}
  .arrive li+li{border-left:0;padding-left:0;border-top:1px solid var(--rule-l-soft)}
  .arrive li:nth-child(-n+2){border-bottom:0}
}

/* --- 43 THE THREE ACADEMIES ---------------------------------------------
   Was three washed-out white boxes on navy with the flagship rendering as an
   unfilled hole. Now three panels with a deliberate hierarchy: the Hollywood
   flagship is the one bone card among two navy ones.
   ----------------------------------------------------------------------- */
.acads{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px)}
.acad{position:relative;display:flex;flex-direction:column;isolation:isolate;
  background:var(--navy-850);border:1px solid var(--rule-d);
  padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,30px) clamp(18px,2vw,26px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
  transition:background .45s var(--ease-s),border-color .35s,transform .5s var(--ease)}
.acad::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;z-index:2;
  background:var(--bone);transition:width .55s var(--ease)}
.acad:hover{background:var(--navy-800);border-color:rgba(222,227,222,.32);transform:translateY(-4px)}
.acad:hover::before{width:100%}
.acad__n{position:absolute;top:0;right:0;padding:.85rem 1rem;font-family:var(--display);
  font-weight:800;font-size:.6rem;letter-spacing:.14em;color:var(--steel-deep)}
.acad__k{font-family:var(--display);font-weight:800;font-size:.58rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--steel-dark)}
.acad__flag{align-self:flex-start;margin-top:.8rem;background:var(--bone);color:var(--navy);
  font-family:var(--display);font-weight:800;font-size:.55rem;letter-spacing:.22em;
  text-transform:uppercase;padding:.3rem .6rem}
.acad h3{margin:.85rem 0 0;font-family:var(--display);
  font-variation-settings:"wdth" 112,"wght" 780;text-transform:uppercase;
  font-size:clamp(1rem,1.3vw,1.22rem);line-height:1.15;letter-spacing:.012em;color:#fff}
.acad address{font-style:normal;margin:.9rem 0 .85rem;font-size:.93rem;line-height:1.65;
  color:var(--steel)}
.acad__tel{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.14em;
  color:var(--bone-300);transition:color .25s}
.acad__tel:hover{color:#fff}
.acad__go{margin-top:auto;padding-top:1.15rem;border-top:1px solid var(--rule-d-soft);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-family:var(--display);font-weight:700;font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel-dark);transition:color .3s}
.acad__go i{font-style:normal;flex:none;display:grid;place-items:center;width:30px;height:30px;
  border:1px solid var(--rule-d);color:var(--bone);font-size:.8rem;
  transition:background .35s,color .35s,border-color .35s,transform .4s var(--ease)}
.acad:hover .acad__go{color:var(--bone)}
.acad:hover .acad__go i{background:var(--bone);color:var(--navy);border-color:var(--bone);
  transform:translateX(3px)}

/* the flagship — the one light card */
.acad.is-flag{background:var(--bone);border-color:var(--bone)}
.acad.is-flag:hover{background:#fff;border-color:#fff}
.acad.is-flag::before{background:var(--navy)}
.acad.is-flag .acad__n{color:var(--steel-dark)}
.acad.is-flag .acad__k{color:var(--steel-deep)}
.acad.is-flag .acad__flag{background:var(--navy);color:var(--bone)}
.acad.is-flag h3{color:var(--navy)}
.acad.is-flag address{color:var(--steel-deep)}
.acad.is-flag .acad__tel{color:var(--navy)}
.acad.is-flag .acad__tel:hover{color:var(--crest)}
.acad.is-flag .acad__go{color:var(--steel-deep);border-top-color:var(--rule-l)}
.acad.is-flag .acad__go i{border-color:var(--rule-l);color:var(--navy)}
.acad.is-flag:hover .acad__go{color:var(--navy)}
.acad.is-flag:hover .acad__go i{background:var(--navy);color:var(--bone);border-color:var(--navy)}

@media (max-width:900px){.acads{grid-template-columns:1fr}}

/* --- 44 BLOG ------------------------------------------------------------
   Index: one featured post as a wide split panel, then a filterable card
   grid. Post pages: photographic head, article column with a sticky rail,
   prev/next, related cards. Card language matches the faculty cards.
   ----------------------------------------------------------------------- */

/* featured */
.feat{position:relative;display:grid;grid-template-columns:1.15fr .85fr;align-items:stretch;
  background:#fff;border:1px solid var(--rule-l);overflow:hidden;isolation:isolate;
  margin-top:clamp(26px,3vw,42px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
  transition:border-color .35s,transform .5s var(--ease),background .4s}
.feat:hover{border-color:var(--navy);transform:translateY(-4px)}
.feat__media{position:relative;display:block;overflow:hidden;background:var(--navy-800);
  min-height:clamp(240px,30vw,400px)}
.feat__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  transition:transform .9s var(--ease)}
.feat:hover .feat__media img{transform:scale(1.04)}
.feat__b{display:flex;flex-direction:column;padding:clamp(24px,2.8vw,40px)}
.feat__flag{align-self:flex-start;background:var(--navy);color:var(--bone);
  font-family:var(--display);font-weight:800;font-size:.56rem;letter-spacing:.24em;
  text-transform:uppercase;padding:.36rem .7rem;margin-bottom:1.2rem}
.feat__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin-bottom:.9rem}
.feat__meta b,.post__meta b{font-family:var(--display);font-weight:800;font-size:.56rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--navy);
  border:1px solid var(--rule-l);padding:.26rem .55rem}
.feat__meta em,.post__meta em{font-style:normal;font-family:var(--display);font-weight:700;
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dark)}
.feat__h{display:block;font-family:var(--display);
  font-variation-settings:"wdth" 112,"wght" 780;text-transform:uppercase;
  font-size:clamp(1.25rem,2.1vw,1.9rem);line-height:1.08;letter-spacing:-.005em;
  color:var(--navy)}
.feat__x{display:block;margin-top:1rem;font-size:1rem;line-height:1.7;color:var(--steel-deep)}
.feat__go{margin-top:auto;padding-top:1.4rem;display:flex;align-items:center;
  justify-content:space-between;gap:.8rem;font-family:var(--display);font-weight:700;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel-deep);
  border-top:1px solid var(--rule-l);transition:color .3s}
.feat__go i{font-style:normal;flex:none;display:grid;place-items:center;width:34px;height:34px;
  border:1px solid var(--rule-l);color:var(--navy);font-size:.85rem;
  transition:background .35s,color .35s,border-color .35s,transform .4s var(--ease)}
.feat:hover .feat__go{color:var(--navy)}
.feat:hover .feat__go i{background:var(--navy);color:var(--bone);border-color:var(--navy);
  transform:translateX(3px)}

/* filter bar */
.bfilter{display:flex;align-items:baseline;gap:clamp(12px,2vw,28px);flex-wrap:wrap;
  margin-top:clamp(22px,2.6vw,34px);padding-bottom:1.2rem;border-bottom:1px solid var(--rule-d)}
.bfilter__l{flex:none;font-family:var(--display);font-weight:800;font-size:.6rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--steel-dark)}
.bfilter__b{display:flex;flex-wrap:wrap;gap:.4rem}
.bfilter button{display:inline-flex;align-items:center;gap:.5rem;background:transparent;
  border:1px solid var(--rule-d);padding:.46rem .82rem;cursor:pointer;color:var(--bone-300);
  font-family:var(--display);font-weight:700;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;transition:.28s var(--ease-s)}
.bfilter button em{font-style:normal;font-size:.56rem;color:var(--steel-dark)}
.bfilter button:hover{border-color:var(--bone);color:#fff}
.bfilter button.on{background:var(--bone);color:var(--navy);border-color:var(--bone)}
.bfilter button.on em{color:var(--navy);opacity:.6}

/* post cards */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));
  gap:clamp(12px,1.4vw,20px);list-style:none;margin:clamp(22px,2.6vw,34px) 0 0;padding:0}
.post{display:block}
.post.is-out{display:none}
.post>a{position:relative;display:flex;flex-direction:column;height:100%;isolation:isolate;
  background:var(--navy-850);border:1px solid var(--rule-d);overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
  transition:background .45s var(--ease-s),border-color .35s,transform .5s var(--ease)}
.post>a::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;z-index:4;
  background:var(--bone);transition:width .55s var(--ease)}
.post>a:hover{background:var(--navy-800);border-color:rgba(222,227,222,.3);transform:translateY(-4px)}
.post>a:hover::before{width:100%}
.post__media{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--navy-800)}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.post>a:hover .post__media img{transform:scale(1.05)}
.post__media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,10,34,0) 55%,rgba(2,10,34,.55) 100%)}
.post__n{position:absolute;top:0;left:0;z-index:3;display:grid;place-items:center;
  width:34px;height:34px;background:var(--bone);color:var(--navy);
  font-family:var(--display);font-weight:800;font-size:.6rem;letter-spacing:.08em}
.post__b{display:flex;flex-direction:column;flex:1;padding:clamp(15px,1.5vw,19px);
  background-image:var(--weave-d)}
.post__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;margin-bottom:.85rem}
.post__meta b{color:var(--bone);border-color:var(--rule-d)}
.post__meta em{color:var(--steel-dark)}
.post__h{display:block;font-family:var(--display);
  font-variation-settings:"wdth" 108,"wght" 740;text-transform:uppercase;
  font-size:clamp(.92rem,1.05vw,1.02rem);line-height:1.18;letter-spacing:.01em;color:#fff}
.post__x{display:block;margin-top:.6rem;font-size:.88rem;line-height:1.6;color:var(--steel)}
.post__go{margin-top:auto;padding-top:1rem;border-top:1px solid var(--rule-d-soft);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-family:var(--display);font-weight:700;font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel-dark);transition:color .35s}
.post__go i{font-style:normal;flex:none;display:grid;place-items:center;width:28px;height:28px;
  border:1px solid var(--rule-d);color:var(--bone);font-size:.8rem;
  transition:background .35s,color .35s,border-color .35s,transform .4s var(--ease)}
.post>a:hover .post__go{color:var(--bone)}
.post>a:hover .post__go i{background:var(--bone);color:var(--navy);border-color:var(--bone);
  transform:translateX(3px)}
.bempty{margin-top:2.4rem;padding:2.6rem 1rem;text-align:center;color:var(--steel);
  border:1px dashed var(--rule-d)}

/* light ground cards */
.on-light .post>a{background:#fff;border-color:var(--rule-l)}
.on-light .post>a::before{background:var(--navy)}
.on-light .post>a:hover{background:var(--bone-50);border-color:rgba(4,16,52,.3)}
.on-light .post__b{background-image:none}
.on-light .post__h{color:var(--navy)}
.on-light .post__x{color:var(--steel-deep)}
.on-light .post__meta b{color:var(--navy);border-color:var(--rule-l)}
.on-light .post__go{color:var(--steel-deep);border-top-color:var(--rule-l)}
.on-light .post__go i{border-color:var(--rule-l);color:var(--navy)}
.on-light .post>a:hover .post__go i{background:var(--navy);color:var(--bone);border-color:var(--navy)}

/* post page head */
.phead{position:relative;overflow:hidden;isolation:isolate;background:var(--navy-950);
  display:flex;align-items:flex-end;min-height:clamp(360px,52vh,520px);
  padding-block:clamp(36px,5vw,68px)}
.phead__media{position:absolute;inset:0;z-index:-3}
.phead__media img{width:100%;height:100%;object-fit:cover}
.phead::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,rgba(2,10,34,.55) 0%,rgba(2,10,34,.72) 45%,rgba(2,10,34,.95) 100%)}
.phead::after{content:"";position:absolute;inset:0;z-index:-1;
  background-image:var(--weave-d);opacity:.6}
.phead__in{width:100%}
.phead__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin:1.1rem 0 .9rem}
.phead__meta b{font-family:var(--display);font-weight:800;font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--navy);background:var(--bone);padding:.32rem .62rem}
.phead__meta em{font-style:normal;font-family:var(--display);font-weight:700;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--steel)}
.phead h1{max-width:20ch;font-size:clamp(1.7rem,4vw,3.1rem)}

/* article */
.article{display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,24vw,310px);
  gap:clamp(24px,4vw,64px);align-items:start}
.article__body{max-width:70ch}
.article__body h2{font-size:clamp(1.15rem,1.7vw,1.45rem);margin:2.2rem 0 .9rem;
  font-variation-settings:"wdth" 110,"wght" 780;line-height:1.2}
.article__body h2:first-child{margin-top:0}
.article__body p{margin:0 0 1.15rem;font-size:1.02rem;line-height:1.82;color:var(--steel-deep)}
.article__body p:last-child{margin-bottom:0}
.art-ul{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.6rem}
.art-ul li{position:relative;padding-left:1.5rem;font-size:1rem;line-height:1.7;
  color:var(--steel-deep)}
.art-ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  background:var(--navy);transform:rotate(45deg)}

/* article — long-form elements (blog rewrite, Sept 2026) */
.article__body h3{font-size:1.05rem;margin:1.6rem 0 .6rem;line-height:1.25;
  font-variation-settings:"wdth" 108,"wght" 740}
.article__body a:not(.btn){color:var(--navy);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.18em;transition:.25s var(--ease)}
.article__body a:not(.btn):hover{text-decoration-thickness:2px}
.article__body b{color:var(--navy)}
.art-ol{margin:0 0 1.4rem;padding:0 0 0 1.8rem;display:grid;gap:.6rem;counter-reset:artol;list-style:none}
.art-ol li{position:relative;padding-left:.2rem;font-size:1rem;line-height:1.7;color:var(--steel-deep);
  counter-increment:artol}
.art-ol li::before{content:counter(artol,decimal-leading-zero);position:absolute;left:-1.8rem;top:.32em;
  font-family:var(--display);font-weight:800;font-size:.66rem;letter-spacing:.08em;color:var(--navy)}
.tldr{margin:0 0 1.8rem;padding:1.1rem 1.3rem;background:#fff;border:1px solid var(--rule-l);
  border-left:3px solid var(--navy)}
.tldr p{margin:0;font-size:.98rem;line-height:1.7}
.tldr b{display:block;margin-bottom:.35rem;font-family:var(--display);font-weight:800;font-size:.6rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--navy)}
.pull{margin:1.8rem 0;padding:0 0 0 1.3rem;border-left:3px solid var(--navy)}
.pull p{margin:0;font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 720;
  font-size:1.22rem;line-height:1.3;color:var(--navy)}
.art-table{width:100%;border-collapse:collapse;margin:0 0 1.6rem;font-size:.96rem}
.art-table th,.art-table td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--rule-l);
  vertical-align:top;color:var(--steel-deep)}
.art-table th{font-family:var(--display);font-weight:800;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--navy);border-bottom:2px solid var(--navy)}
.article__body .faq{margin-top:.2rem}
.article__body .faq summary{font-size:.98rem}
.article__body .faq details p{font-size:.96rem;padding-right:1.5rem}
.article__body .faq details p a{color:var(--navy)}

.article__rail{position:sticky;top:calc(var(--hdr) + 22px)}
.arail{background:#fff;border:1px solid var(--rule-l);border-top:3px solid var(--navy);
  padding:clamp(18px,1.8vw,24px)}
.arail__k{margin:0 0 .6rem;font-family:var(--display);font-weight:800;font-size:.58rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--steel-dark)}
.arail__cat{display:inline-block;font-family:var(--display);font-weight:800;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--navy);
  border:1px solid var(--rule-l);padding:.36rem .7rem;transition:.3s var(--ease)}
.arail__cat:hover{background:var(--navy);color:var(--bone);border-color:var(--navy)}
.arail__d{margin:0;font-size:.94rem;color:var(--steel-deep)}
/* legal pages: numbered contents list in the rail, anchors clear the sticky header */
.banner--legal{min-height:clamp(300px,42vh,420px)}
.legal .article__body h2{scroll-margin-top:calc(var(--hdr) + 24px)}
.legal .legal-dates{font-size:.9rem;color:var(--steel-deep)}
.arail__toc{list-style:none;counter-reset:toc;margin:0;padding:0;display:grid;gap:.1rem}
.arail__toc li{counter-increment:toc}
.arail__toc a{display:flex;gap:.6rem;padding:.32rem 0;font-size:.88rem;line-height:1.35;
  color:var(--steel-deep);text-decoration:none;transition:color .2s}
.arail__toc a::before{content:counter(toc,decimal-leading-zero);flex:none;min-width:1.5rem;
  font-family:var(--display);font-weight:800;font-size:.62rem;letter-spacing:.08em;
  color:var(--steel-dark);padding-top:.2rem}
.arail__toc a:hover{color:var(--navy)}
.arail__cta{margin-top:1.7rem;padding-top:1.4rem;border-top:1px solid var(--rule-l);display:grid;gap:.9rem}
.arail__cta p{margin:0;font-size:.92rem;line-height:1.6;color:var(--steel-deep)}
.arail__cta .btn{justify-self:start}

/* prev / next */
.pnav{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,16px);
  margin-top:clamp(32px,4vw,56px);padding-top:clamp(22px,2.6vw,34px);
  border-top:1px solid var(--rule-l)}
.pn{display:flex;flex-direction:column;gap:.55rem;background:#fff;border:1px solid var(--rule-l);
  padding:clamp(16px,1.7vw,22px);transition:.35s var(--ease)}
.pn--next{text-align:right}
.pn:hover{border-color:var(--navy);transform:translateY(-3px)}
.pn__k{display:flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:800;
  font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--steel-dark)}
.pn--next .pn__k{justify-content:flex-end}
.pn__k i{font-style:normal}
.pn__t{font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 740;
  text-transform:uppercase;font-size:.92rem;line-height:1.2;color:var(--navy)}
.pn--next:only-child{grid-column:2}

@media (max-width:1000px){
  .feat{grid-template-columns:1fr}
  .feat__media{min-height:clamp(220px,46vw,320px)}
  .article{grid-template-columns:1fr}
  .article__rail{position:static}
}
@media (max-width:640px){
  .posts{grid-template-columns:1fr}
  .bfilter{flex-direction:column;align-items:flex-start;gap:.8rem}
  .pnav{grid-template-columns:1fr}
  .pn--next{text-align:left}
  .pn--next .pn__k{justify-content:flex-start}
  .pn--next:only-child{grid-column:1}
}

/* --- 45 FREE TRIAL MODAL -------------------------------------------------
   One dialog in the shared chrome, so it exists on every page. Opened by any
   "free class" CTA (and anything carrying data-trial-open), on every page
   including contact.html. Focus-trapped, Esc to
   close, scroll locked, focus restored to whatever opened it.
   ----------------------------------------------------------------------- */
.tmodal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:clamp(14px,3vw,36px);overflow-y:auto}
.tmodal[hidden]{display:none}
.tmodal__scrim{position:absolute;inset:0;background:rgba(2,10,34,.82);
  backdrop-filter:blur(3px);animation:tmfade .35s var(--ease-s)}
.tmodal__card{--tm-px:clamp(20px,3vw,40px);--tm-pb:clamp(22px,2.6vw,34px);
  position:relative;width:min(640px,100%);margin:auto;isolation:isolate;
  display:flex;flex-direction:column;
  background:var(--navy-900);color:var(--bone);border:1px solid var(--rule-d);
  border-top:3px solid var(--bone);
  padding:clamp(24px,3vw,40px) var(--tm-px) var(--tm-pb);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.95);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%);
  animation:tmrise .45s var(--ease) both}
.tmodal__card:focus{outline:none}
.tmodal__card::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:var(--weave-d);opacity:.75;pointer-events:none}
.tmodal__card::after{content:"";position:absolute;right:0;bottom:0;width:28px;height:28px;
  background:linear-gradient(225deg,var(--rule-l) 0 1px,transparent 1px)}
@keyframes tmfade{from{opacity:0}to{opacity:1}}
@keyframes tmrise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.tmodal__x{position:absolute;top:0;right:0;width:46px;height:46px;background:transparent;
  border:0;border-left:1px solid var(--rule-d);border-bottom:1px solid var(--rule-d);
  color:var(--steel);font-size:1.5rem;line-height:1;cursor:pointer;
  transition:background .3s var(--ease),color .3s}
.tmodal__x:hover{background:var(--bone);color:var(--navy)}

.tmodal__hd{padding-bottom:clamp(1.4rem,2.4vw,1.9rem)}
.tmodal__flag{display:inline-flex;align-items:center;gap:.5rem;background:var(--bone);
  color:var(--navy);font-family:var(--display);font-weight:800;font-size:.58rem;
  letter-spacing:.22em;text-transform:uppercase;padding:.42rem .78rem;margin-bottom:1.1rem}
.tmodal__flag::before{content:"\25C6";font-size:.5rem}
.tmodal__hd h2{margin:0;font-size:clamp(1.5rem,3vw,2.15rem);line-height:1}
.tmodal__hd p{margin:.9rem 0 0;font-size:.95rem;line-height:1.65;color:var(--steel);max-width:46ch}

/* Form body: a light panel under the navy header. Dark-on-dark inputs were
   hard to read; white fields with navy text are the most legible, most
   familiar pattern, and the full-width navy button is the loudest thing on it. */
.tmodal .form{flex:1;align-content:start;gap:1.2rem;background:#fff;color:var(--navy);
  margin:0 calc(var(--tm-px) * -1) calc(var(--tm-pb) * -1);
  padding:clamp(1.4rem,2.6vw,1.9rem) var(--tm-px) var(--tm-pb)}
.tmodal .f2{gap:1.2rem 1rem}
.tmodal .field label{color:var(--navy);font-size:.72rem;letter-spacing:.12em;margin-bottom:.45rem}
.tmodal .field input,.tmodal .field select{background:#fff;color:var(--navy);
  font-size:1rem;padding:.9rem 1rem;border:1.5px solid rgba(4,16,52,.24);
  transition:border-color .2s,box-shadow .2s}
.tmodal .field input::placeholder{color:var(--steel-dark);opacity:1}
.tmodal .field select:invalid{color:var(--steel-dark)}
.tmodal .field select option{color:var(--navy)}
.tmodal .field input:hover,.tmodal .field select:hover{border-color:rgba(4,16,52,.45)}
.tmodal .field input:focus,.tmodal .field select:focus{border-color:var(--crest);
  box-shadow:0 0 0 3px rgba(0,50,161,.16)}
.tmodal .field .err{color:#b42318;font-size:.8rem}
.tmodal .field.invalid input,.tmodal .field.invalid select{border-color:#b42318;
  background:#fff7f6;border-width:1.5px}
.tmodal .field.invalid input:focus,.tmodal .field.invalid select:focus{box-shadow:0 0 0 3px rgba(180,35,24,.14)}
.tmodal .tmodal__go{justify-self:stretch;width:100%;margin-top:.4rem;padding:1.15rem 1.4rem;
  font-size:.86rem;background:var(--navy);color:#fff;border-color:var(--navy)}
.tmodal .tmodal__go::before{background:var(--crest)}
.tmodal .tmodal__go:hover{color:#fff;border-color:var(--crest)}
.tmodal .tmodal__go:focus-visible{outline:3px solid rgba(0,50,161,.35);outline-offset:3px}
.tmodal .form-note{margin:0;color:var(--steel-deep);text-align:center;line-height:1.55}
.tmodal .form-note b{color:var(--navy)}
.tmodal .form-note a{color:var(--navy);font-weight:700;text-decoration:underline;
  text-underline-offset:2px;white-space:nowrap}
.tmodal .form-note a:hover{color:var(--crest)}
.tmodal .tmodal__go:disabled{cursor:progress;opacity:.78}
/* Text-message consent: two optional ticks, small print, never pre-checked */
.tmodal .consent{margin:0;padding:0;border:0;min-width:0;display:grid;gap:.7rem}
.tmodal .consent__lg{padding:0;margin:0 0 .1rem;font-family:var(--display);font-weight:700;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.tmodal .consent__lg em{font-style:normal;font-size:.56rem;letter-spacing:.18em;color:var(--steel-dark);margin-left:.4rem}
.tmodal .consent__opt{display:grid;grid-template-columns:auto 1fr;gap:.65rem;align-items:start;
  cursor:pointer;font-size:.74rem;line-height:1.5;color:var(--steel-deep)}
.tmodal .consent__opt input{width:18px;height:18px;margin:.1rem 0 0;accent-color:var(--navy);cursor:pointer}
.tmodal .consent__opt input:focus-visible{outline:3px solid rgba(0,50,161,.35);outline-offset:2px}
.tmodal .consent__links{margin:0;font-size:.74rem;line-height:1.5;color:var(--steel-deep)}
.tmodal .consent__links a{color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.tmodal .consent__links a:hover{color:var(--crest)}
.form-fail{margin:0;padding:.85rem 1rem;border:1.5px solid #b42318;background:#fff7f6;
  color:#8f1d13;font-size:.88rem;font-weight:600;line-height:1.5;text-align:center}
.form-fail a{color:inherit;font-weight:800;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.tmodal .form-ok{background:transparent;border:1px solid var(--rule-d);color:var(--bone);
  display:grid;gap:.9rem;justify-items:center}
.tmodal .form-ok h3{color:#fff;margin:0}
.tmodal .form-ok p{margin:0;color:var(--steel)}
.tmodal .form-ok a{color:var(--bone-300)}
body.tm-open{overflow:hidden}
/* the HighLevel chat bubble floats above everything; keep it off the form and the menu */
body.tm-open chat-widget,body.locked chat-widget{display:none}

@media (max-width:560px){
  .tmodal{padding:0;place-items:stretch}
  .tmodal__card{width:100%;min-height:100%;clip-path:none;border:0;border-top:3px solid var(--bone)}
  .tmodal__card::after{display:none}
  .tmodal__go{justify-self:stretch;text-align:center}
  /* phones: keep the submit button within reach — names share a row and the
     step rail stays on one line */
  .tmodal .form .f2:first-child{grid-template-columns:1fr 1fr;gap:.8rem}
  .tmodal .tmodal__steps{flex-direction:row}
  .tmodal .tmodal__steps li{padding:.45rem .55rem}
  .tmodal .tmodal__steps span{font-size:.58rem;letter-spacing:.06em}
  .tmodal__hd{padding-bottom:1.3rem}
  /* the step rail says the same thing — keep the submit button on screen */
  .tmodal__hd p{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tmodal__scrim,.tmodal__card{animation:none}
}

@media (prefers-reduced-motion:reduce){
  .nav-link{transition:color .01s,background-size .01s}
  .drawer>ul>li>a,.drawer>ul>li>.m-tog,
  .drawer>ul>li>a::before,.drawer>ul>li>.m-tog::before{transition:none}
}

/* ======================================================================
   46 · BOOKING PAGE — step two of the trial funnel
   The one job of this page is "you are not finished, pick a time", so the
   hero states it in words, in colour and in a step rail. Glow and gradient
   accents are built from the existing tokens (--crest, --navy, --bone) —
   no fourth hue is introduced.
   ================================================================== */

/* ---- 46.1 the "not done yet" hero ------------------------------------ */
.bhero{position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 140% at 12% -10%,rgba(0,50,161,.55) 0%,rgba(0,50,161,0) 55%),
    linear-gradient(168deg,var(--navy-800) 0%,var(--navy-900) 46%,var(--navy-950) 100%);
  color:var(--bone);padding-block:clamp(46px,6.4vw,92px) clamp(40px,5vw,72px);
  border-bottom:1px solid rgba(222,227,222,.16)}
.bhero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:var(--weave-d);background-size:9px 9px}
/* a slow, wide bloom behind the headline — premium without being a light show */
.bhero__glow{position:absolute;z-index:-1;left:50%;top:-28%;width:min(980px,120%);aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(0,50,161,.5) 0%,rgba(0,50,161,.16) 42%,transparent 68%);
  filter:blur(8px);animation:bglow 9s var(--ease) infinite alternate}
@keyframes bglow{from{opacity:.62;transform:translateX(-50%) scale(1)}
  to{opacity:1;transform:translateX(-50%) scale(1.09)}}

.bhero__alarm{display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(.7rem,.72vw,.8rem);letter-spacing:.2em;
  font-variation-settings:"wdth" 108,"wght" 800;
  padding:.62rem 1.05rem;color:var(--bone);
  background:linear-gradient(120deg,rgba(0,50,161,.92),rgba(4,16,52,.55));
  border:1px solid rgba(222,227,222,.42);
  box-shadow:0 0 0 1px rgba(0,50,161,.35),0 12px 34px -14px rgba(0,50,161,.9);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%)}
.bhero__dot{width:8px;height:8px;background:var(--bone);border-radius:50%;
  box-shadow:0 0 0 0 rgba(222,227,222,.8);animation:bpulse 1.9s var(--ease) infinite}
@keyframes bpulse{70%{box-shadow:0 0 0 11px rgba(222,227,222,0)}
  100%{box-shadow:0 0 0 0 rgba(222,227,222,0)}}

.bhero h1{margin:1.15rem 0 0;font-size:clamp(2rem,5.1vw,4rem);line-height:.98}
.bhero h1 [data-hello]{color:var(--bone)}
.bhero__x{max-width:60ch;margin-top:1.15rem;color:var(--steel);
  font-size:clamp(1rem,1.12vw,1.14rem);line-height:1.62}
.bhero__x b{color:var(--bone);font-weight:600;
  box-shadow:inset 0 -.42em 0 rgba(0,50,161,.55)}

/* ---- 46.2 step rail --------------------------------------------------- */
.bsteps{list-style:none;display:grid;gap:0;margin:clamp(1.8rem,3vw,2.6rem) 0 0;padding:0;
  grid-template-columns:repeat(3,1fr);border:1px solid rgba(222,227,222,.18);
  background:rgba(2,10,34,.5);backdrop-filter:blur(2px)}
.bsteps li{display:flex;align-items:center;gap:.9rem;padding:1.05rem clamp(.9rem,1.4vw,1.4rem);
  border-right:1px solid rgba(222,227,222,.14);position:relative}
.bsteps li:last-child{border-right:0}
.bsteps__n{flex:0 0 auto;display:grid;place-items:center;width:2.05rem;height:2.05rem;
  font-family:var(--display);font-weight:800;font-size:.9rem;
  border:1px solid rgba(222,227,222,.4);color:var(--steel)}
.bsteps__b{display:flex;flex-direction:column;gap:.18rem;min-width:0}
.bsteps__b b{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:.82rem;color:var(--bone);
  font-variation-settings:"wdth" 106,"wght" 700}
.bsteps__b em{font-style:normal;font-size:.78rem;color:var(--steel);letter-spacing:.02em}
.bsteps .done .bsteps__n{background:rgba(222,227,222,.16);color:var(--bone);
  border-color:rgba(222,227,222,.55)}
.bsteps .now{background:linear-gradient(140deg,rgba(0,50,161,.42),rgba(0,50,161,.08))}
.bsteps .now::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--bone),transparent)}
.bsteps .now .bsteps__n{background:var(--bone);color:var(--navy);border-color:var(--bone);
  box-shadow:0 0 22px -4px rgba(222,227,222,.7)}
.bsteps .now .bsteps__b em{color:var(--bone)}

.bhero__scroll{margin-top:1.6rem}
.bhero__scroll a{display:inline-flex;align-items:center;gap:.5rem;color:var(--bone);
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:.76rem;padding-bottom:.35rem;border-bottom:1px solid rgba(222,227,222,.4)}
.bhero__scroll i{transition:transform .3s var(--ease)}
.bhero__scroll a:hover i{transform:translateY(3px)}

/* ---- 46.3 program switcher ------------------------------------------- */
.calbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:clamp(1.6rem,2.6vw,2.2rem)}
.calbar__k{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:.72rem;color:var(--navy);opacity:.6}
.calbar__b{display:flex;gap:.5rem;flex-wrap:wrap}
.calbar__b button{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:.74rem;padding:.6rem 1rem;color:var(--navy);
  background:transparent;border:1px solid rgba(4,16,52,.2);cursor:pointer;
  transition:color .24s var(--ease),background .24s var(--ease),
             border-color .24s var(--ease),box-shadow .3s var(--ease)}
.calbar__b button:hover{border-color:rgba(4,16,52,.55)}
.calbar__b button.on{color:var(--bone);border-color:transparent;
  background:linear-gradient(130deg,var(--crest),var(--navy));
  box-shadow:0 14px 30px -14px rgba(0,50,161,.85)}

/* ---- 46.4 calendar + rail -------------------------------------------- */
/* stacked: the calendar gets the full width on top, the detail cards sit
   underneath as a three-up row — nothing competes with the booking widget */
.calwrap{display:grid;grid-template-columns:1fr;
  gap:clamp(18px,2.4vw,30px);align-items:start;margin-top:clamp(1.4rem,2.4vw,2rem)}
.cal{position:relative;background:#fff;border:1px solid rgba(4,16,52,.12);
  padding:clamp(20px,2.4vw,30px);
  box-shadow:0 30px 70px -44px rgba(4,16,52,.55)}
/* gradient hairline along the top edge — the premium accent, one pixel tall */
.cal::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--crest),rgba(0,50,161,.18) 55%,transparent)}
.cal__k{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:.7rem;color:var(--crest)}
.cal__hd h3{margin:.5rem 0 0;font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.04;color:var(--navy)}
.cal__d{margin-top:.6rem;color:rgba(4,16,52,.68);font-size:.95rem;line-height:1.55;max-width:56ch}


/* ---- 47b · booking chooser (panels with no calendar of their own) ----- */
.cal__pick{margin-top:clamp(1.1rem,1.8vw,1.5rem);padding:clamp(24px,3vw,36px);
  background:linear-gradient(150deg,rgba(0,50,161,.07),rgba(4,16,52,.03));
  border:1px solid rgba(4,16,52,.12)}
.cal__pick-k{font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.22em;font-size:.68rem;color:var(--crest)}
.cal__pick-x{margin-top:.7rem;max-width:56ch;color:rgba(4,16,52,.68);
  font-size:.95rem;line-height:1.6}
.cal__pick-b{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.2rem}
.cal__pick-b button{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:.74rem;padding:.7rem 1.05rem;color:var(--navy);
  background:#fff;border:1px solid rgba(4,16,52,.18);cursor:pointer;
  transition:color .24s var(--ease),background .24s var(--ease),
             border-color .24s var(--ease),box-shadow .3s var(--ease)}
.cal__pick-b button:hover{color:var(--bone);border-color:transparent;
  background:linear-gradient(130deg,var(--crest),var(--navy));
  box-shadow:0 14px 30px -14px rgba(0,50,161,.85)}
.cal__pick-tel{display:inline-block;margin-top:1.3rem;font-family:var(--display);
  font-weight:800;font-size:clamp(1.1rem,1.6vw,1.34rem);color:var(--navy);letter-spacing:.02em}

/* the embed placeholder — deliberately obvious, so it can never ship unnoticed */
.cal__ph{position:relative;overflow:hidden;margin-top:clamp(1.1rem,1.8vw,1.5rem);
  min-height:clamp(340px,42vw,520px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:.55rem;
  padding:clamp(24px,3vw,40px);
  background:linear-gradient(150deg,rgba(0,50,161,.05),rgba(4,16,52,.03));
  border:2px dashed rgba(0,50,161,.38)}
.cal__ph-glow{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(420px,90%);aspect-ratio:1;
  background:radial-gradient(circle,rgba(0,50,161,.2),transparent 68%);
  filter:blur(6px);pointer-events:none}
.cal__ph-k{font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.24em;font-size:.68rem;color:var(--crest)}
.cal__ph-t{font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,1.6vw,1.3rem);
  color:var(--navy);text-transform:uppercase;letter-spacing:.04em;
  font-variation-settings:"wdth" 108,"wght" 700}
.cal__ph-x{max-width:44ch;color:rgba(4,16,52,.62);font-size:.9rem;line-height:1.55}
.cal__ph-c{display:inline-block;margin-top:.4rem;padding:.42rem .8rem;font-size:.8rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--navy);
  background:rgba(4,16,52,.07);border:1px solid rgba(4,16,52,.14)}
/* once a real embed replaces the placeholder it needs no styling of its own */
/* The widget script writes an inline height onto the iframe. !important keeps
   this floor above it, so no measurement of a hidden frame can collapse the
   calendar; the script is still free to make it taller than the floor. */
.cal iframe{display:block;width:100%;min-height:clamp(620px,70vw,860px) !important;
  border:0;overflow:hidden;margin-top:clamp(1.1rem,1.8vw,1.5rem);background:#fff}
.cal__ns{margin-top:1.2rem;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
.cal__ns a{color:var(--crest);border-bottom:1px solid currentColor}

.calside{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);align-items:stretch}
.calside .cside{display:flex;flex-direction:column}
.cside{position:relative;background:#fff;border:1px solid rgba(4,16,52,.12);
  padding:clamp(18px,2vw,24px);transition:box-shadow .34s var(--ease),transform .34s var(--ease)}
.cside:hover{transform:translateY(-2px);box-shadow:0 24px 50px -34px rgba(4,16,52,.5)}
.cside--glow{background:
    radial-gradient(120% 130% at 100% 0%,rgba(0,50,161,.16),transparent 62%),
    linear-gradient(160deg,var(--navy-800),var(--navy-900));
  border-color:transparent;color:var(--bone);
  box-shadow:0 26px 60px -34px rgba(0,50,161,.9)}
.cside__k{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:.7rem;color:var(--crest)}
.cside--glow .cside__k{color:var(--bone);opacity:.8}
.cside__p{margin-top:.7rem;color:rgba(4,16,52,.7);font-size:.92rem;line-height:1.6}
.cside__ol{list-style:none;counter-reset:cs;margin:1rem 0 0;padding:0;display:grid;gap:.9rem}
.cside__ol li{counter-increment:cs;display:grid;gap:.2rem;padding-left:2.1rem;position:relative}
.cside__ol li::before{content:counter(cs,decimal-leading-zero);position:absolute;left:0;top:.05rem;
  font-family:var(--display);font-weight:800;font-size:.8rem;color:var(--bone);opacity:.55}
.cside__ol b{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:.82rem;color:var(--bone)}
.cside__ol span{color:var(--steel);font-size:.88rem;line-height:1.5}
.cside__tel{display:block;margin-top:.7rem;font-family:var(--display);font-weight:800;
  font-size:clamp(1.15rem,1.7vw,1.4rem);color:var(--navy);letter-spacing:.02em}
.calnote{margin-top:clamp(1.4rem,2.2vw,2rem);text-align:center;color:rgba(4,16,52,.62);
  font-size:.92rem}

/* the submit button while the redirect is in flight */
.btn.is-going{opacity:.72;pointer-events:none}
.btn-arw{margin-left:.55rem;transition:transform .3s var(--ease)}
.btn:hover .btn-arw{transform:translateX(4px)}

/* ---- 46.5 modal step rail -------------------------------------------- */
.tmodal__steps{list-style:none;display:flex;gap:.5rem;margin:1.05rem 0 0;padding:0}
.tmodal__steps li{display:flex;align-items:center;gap:.5rem;flex:1;
  padding:.5rem .7rem;border:1px solid rgba(222,227,222,.2)}
.tmodal__steps b{display:grid;place-items:center;width:1.4rem;height:1.4rem;flex:0 0 auto;
  font-family:var(--display);font-size:.72rem;font-weight:800;
  border:1px solid rgba(222,227,222,.35);color:var(--steel)}
.tmodal__steps span{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;font-size:.66rem;color:var(--steel);line-height:1.2}
.tmodal__steps .on{background:linear-gradient(130deg,rgba(0,50,161,.4),transparent);
  border-color:rgba(222,227,222,.42)}
.tmodal__steps .on b{background:var(--bone);color:var(--navy);border-color:var(--bone)}
.tmodal__steps .on span{color:var(--bone)}

/* ---- 46.6 responsive -------------------------------------------------- */
@media (max-width:980px){
  .calside{grid-template-columns:1fr}
}
@media (max-width:760px){
  .bsteps{grid-template-columns:1fr}
  .bsteps li{border-right:0;border-bottom:1px solid rgba(222,227,222,.14)}
  .bsteps li:last-child{border-bottom:0}
  .bsteps .now::before{display:none}
  .tmodal__steps{flex-direction:column}
  .cal__ph{min-height:300px}
}

@media (prefers-reduced-motion:reduce){
  .bhero__glow,.bhero__dot{animation:none}
  .cside,.bhero__scroll i,.btn-arw{transition:none}
}

/* ======================================================================
   47 · MEMBERSHIPS — plan cards
   Prices are the loudest thing on the page, so the card is built around
   the number: quiet header, big figure on a hairline, inclusions, action.
   ================================================================== */
.factlist{list-style:none;margin:0;padding:0;display:grid;gap:0;
  border-top:1px solid var(--rule-light)}
.factlist li{display:flex;align-items:baseline;gap:1rem;padding:1.05rem 0;
  border-bottom:1px solid var(--rule-light)}
.factlist b{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.2vw,2rem);
  color:var(--navy);min-width:3.2rem;font-variation-settings:"wdth" 112,"wght" 800}
.factlist span{color:rgba(4,16,52,.66);font-size:.92rem;letter-spacing:.01em}

.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);margin-top:clamp(1.6rem,2.6vw,2.4rem)}
.plan{position:relative;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  padding:clamp(26px,2.8vw,36px);
  background:rgba(222,227,222,.05);border:1px solid rgba(222,227,222,.18);
  /* the cut corner is the same one the program cards and buttons use */
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
/* tatami weave inside the card, so the panel is never a flat rectangle */
.plan::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:var(--weave-d);opacity:.85}
/* gradient hairline across the top edge — crest at the left, fading right */
.plan::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,var(--crest),rgba(0,50,161,.25) 46%,transparent);
  opacity:.75;transition:opacity .3s var(--ease)}
.plan:hover{border-color:rgba(222,227,222,.4);transform:translateY(-3px);
  box-shadow:0 30px 64px -40px rgba(0,50,161,.8)}
.plan:hover::after{opacity:1}

/* oversized outlined numeral, the site's running motif */
.plan__i{position:absolute;top:.6rem;right:1.1rem;z-index:1;pointer-events:none;
  font-family:var(--display);font-weight:800;font-size:3.6rem;line-height:1;
  font-variation-settings:"wdth" 118,"wght" 800;letter-spacing:-.02em;
  -webkit-text-fill-color:transparent;-webkit-text-stroke:1px rgba(222,227,222,.22);
  transition:-webkit-text-stroke-color .34s var(--ease)}
.plan:hover .plan__i{-webkit-text-stroke-color:rgba(222,227,222,.45)}

.plan__tag{display:inline-flex;align-self:flex-start;margin-bottom:1rem;
  padding:.4rem .78rem;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;font-size:.6rem;color:var(--bone);
  background:linear-gradient(120deg,rgba(0,50,161,.9),rgba(4,16,52,.4));
  border:1px solid rgba(222,227,222,.28);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%)}
/* the fullest plan gets the crest wash — a signal, not a "most popular" claim */
.plan--hi{background:
    radial-gradient(130% 120% at 100% 0%,rgba(0,50,161,.36),transparent 62%),
    linear-gradient(170deg,rgba(222,227,222,.1),rgba(222,227,222,.03));
  border-color:rgba(222,227,222,.38);
  box-shadow:0 26px 60px -40px rgba(0,50,161,.9)}
.plan--hi::after{opacity:1;height:3px}
.plan--hi .plan__i{-webkit-text-stroke-color:rgba(222,227,222,.4)}
.plan__hd h3{font-size:clamp(1.15rem,1.7vw,1.44rem);line-height:1.05;margin:0}
.plan__x{margin-top:.5rem;color:var(--steel);font-size:.92rem;line-height:1.5}
.plan__p{position:relative;display:flex;align-items:baseline;gap:.3rem;
  margin:clamp(1.2rem,1.8vw,1.6rem) 0 0;
  padding-bottom:clamp(1.1rem,1.6vw,1.4rem);border-bottom:1px solid rgba(222,227,222,.18)}
/* a soft crest bloom behind the figure so the number reads as the headline */
.plan__p::before{content:"";position:absolute;z-index:-1;left:-14%;top:-58%;
  width:300px;aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(0,50,161,.42),transparent 66%);filter:blur(4px)}
.plan__cur{font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--steel);
  align-self:flex-start;margin-top:.45rem}
.plan__p b{font-family:var(--display);font-weight:800;line-height:.9;
  font-size:clamp(2.6rem,4.6vw,3.6rem);letter-spacing:-.01em;
  font-variation-settings:"wdth" 110,"wght" 800}
.plan__p em{font-style:normal;margin-left:.45rem;color:var(--steel);
  font-size:.86rem;letter-spacing:.02em}
.plan__k{margin:clamp(1.1rem,1.6vw,1.4rem) 0 .8rem;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;font-size:.66rem;color:var(--steel)}
.plan__l{list-style:none;margin:0 0 auto;padding:0;display:grid;gap:.6rem}
.plan__l li{position:relative;padding-left:2rem;font-size:.95rem;line-height:1.45}
.plan__l li::after{content:"";position:absolute;left:0;top:.06rem;width:1.28rem;height:1.28rem;
  background:rgba(0,50,161,.26);border:1px solid rgba(222,227,222,.2);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%)}
/* unequal arms make a tick rather than a symmetrical chevron */
.plan__l li::before{content:"";position:absolute;z-index:1;left:.45rem;top:.28rem;
  width:5px;height:10px;
  border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
  transform:rotate(45deg);opacity:.9}
.plan__go{margin-top:clamp(1.4rem,2vw,1.9rem);width:100%;justify-content:center}
.plan__n{margin-top:.9rem;font-size:.82rem;color:var(--steel);text-align:center}
.plan__n a{border-bottom:1px solid currentColor}

/* on a light section the card inverts to a white panel */
.on-light .plan{background:#fff;border-color:rgba(4,16,52,.12);
  box-shadow:0 26px 60px -46px rgba(4,16,52,.5)}
.on-light .plan:hover{border-color:rgba(4,16,52,.3)}
.on-light .plan--hi{background:
    radial-gradient(130% 120% at 100% 0%,rgba(0,50,161,.1),transparent 62%),#fff}
.on-light .plan::before{background-image:var(--weave-l);opacity:.7}
.on-light .plan__i{-webkit-text-stroke-color:rgba(4,16,52,.16)}
.on-light .plan:hover .plan__i{-webkit-text-stroke-color:rgba(4,16,52,.3)}
.on-light .plan__p::before{background:radial-gradient(circle,rgba(0,50,161,.14),transparent 66%)}
.on-light .plan__l li::after{background:rgba(0,50,161,.09);border-color:rgba(4,16,52,.12)}
.on-light .plan:hover{box-shadow:0 30px 64px -40px rgba(4,16,52,.6)}
.on-light .plan__x,.on-light .plan__k,.on-light .plan__p em,
.on-light .plan__cur,.on-light .plan__n{color:rgba(4,16,52,.62)}
.on-light .plan__p{border-bottom-color:rgba(4,16,52,.14)}

/* executive row */
.xrow{position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,40px);
  flex-wrap:wrap;padding:clamp(26px,3vw,40px);border:1px solid rgba(222,227,222,.18);
  background:
    radial-gradient(90% 160% at 0% 0%,rgba(0,50,161,.4),transparent 58%),
    linear-gradient(130deg,rgba(0,50,161,.16),transparent 60%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.xrow::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--weave-d);opacity:.8}
.xrow::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--crest),transparent)}
.xrow__b{flex:1 1 440px;min-width:0}
.xrow__a{flex:0 0 auto}

@media (max-width:820px){
  .plans{grid-template-columns:1fr}
  .xrow{flex-direction:column;align-items:flex-start}
}

/* ======================================================================
   48 · FACULTY (homepage) — the wall
   Third pass. A ledger of 56px thumbnails made the coaches look like a staff
   directory; these are the faces people are choosing between, so they get real
   estate. One feature portrait spanning a 2x2 cell, six portrait tiles around
   it, and a panel that closes the grid with the faculty by discipline.
   ================================================================== */
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.1vw,16px);margin-top:clamp(1.8rem,3vw,2.8rem)}

/* --- shared tile shell ------------------------------------------------ */
.wall__lead,.wtile{position:relative;display:block;overflow:hidden;isolation:isolate;
  background:var(--navy-900);border:1px solid rgba(222,227,222,.14);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
  transition:border-color .34s var(--ease),transform .34s var(--ease),
             box-shadow .34s var(--ease)}
.wall__lead:hover,.wtile:hover{border-color:rgba(222,227,222,.42);transform:translateY(-3px);
  box-shadow:0 30px 64px -40px rgba(0,50,161,.9)}
.wall__ph,.wtile__ph{display:block;width:100%;height:100%}
.wall__ph img,.wtile__ph img{width:100%;height:100%;object-fit:cover;
  object-position:50% 10%;transition:transform 1.2s var(--ease)}
.wall__lead:hover .wall__ph img,.wtile:hover .wtile__ph img{transform:scale(1.05)}
/* the scrim is what makes a name legible over any photograph */
.wall__lead::after,.wtile::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,10,34,.55) 0%,rgba(2,10,34,0) 30%,
    rgba(2,10,34,.72) 62%,rgba(2,10,34,.95) 100%)}

/* --- the feature ------------------------------------------------------ */
.wall__lead{grid-column:span 2;grid-row:span 2;aspect-ratio:3/4}
.wall__stamp{position:absolute;z-index:2;right:0;top:0;display:grid;gap:.1rem;
  padding:.85rem 1.1rem;text-align:right;color:var(--bone);
  background:linear-gradient(130deg,var(--crest),var(--navy-900));
  border-left:1px solid rgba(222,227,222,.28);border-bottom:1px solid rgba(222,227,222,.28);
  clip-path:polygon(0 0,100% 0,100% 100%,14px 100%)}
.wall__stamp b{font-family:var(--display);font-weight:800;font-size:1.45rem;line-height:1;
  font-variation-settings:"wdth" 112,"wght" 800}
.wall__stamp span{font-family:var(--display);font-weight:700;font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--steel)}
.wall__lb{position:absolute;z-index:2;left:0;right:0;bottom:0;
  display:grid;gap:.5rem;padding:clamp(20px,2.2vw,30px)}
.wall__k{font-style:normal;font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;font-size:.62rem;color:var(--bone);opacity:.85}
.wall__name{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,2.5vw,2.15rem);line-height:.98;color:var(--bone);
  font-variation-settings:"wdth" 112,"wght" 800}
.wall__x{color:var(--steel);font-size:.92rem;line-height:1.55;max-width:42ch}
.wall__go{display:inline-flex;align-items:center;gap:.55rem;margin-top:.35rem;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:.72rem;color:var(--bone)}
.wall__go i{font-style:normal;transition:transform .3s var(--ease)}
.wall__lead:hover .wall__go i{transform:translateX(5px)}

/* --- the six tiles ---------------------------------------------------- */
.wtile{aspect-ratio:3/4}
.wtile__n{position:absolute;z-index:2;top:.5rem;right:.85rem;
  font-family:var(--display);font-weight:800;font-size:2rem;line-height:1;
  font-variation-settings:"wdth" 118,"wght" 800;
  -webkit-text-fill-color:transparent;-webkit-text-stroke:1px rgba(222,227,222,.45);
  transition:-webkit-text-stroke-color .3s var(--ease)}
.wtile:hover .wtile__n{-webkit-text-stroke-color:var(--bone)}
.wtile__d{position:absolute;z-index:2;top:.8rem;left:.8rem;padding:.3rem .55rem;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:.54rem;color:var(--bone);background:rgba(0,50,161,.75);
  border:1px solid rgba(222,227,222,.25)}
.wtile__b{position:absolute;z-index:2;left:0;right:0;bottom:0;display:grid;gap:.15rem;
  padding:clamp(13px,1.2vw,18px)}
.wtile__b b{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:clamp(.76rem,.88vw,.92rem);line-height:1.15;color:var(--bone);
  font-variation-settings:"wdth" 104,"wght" 700}
.wtile__b em{font-style:normal;font-size:.74rem;color:var(--steel);line-height:1.3}
.wtile__go{position:absolute;right:clamp(13px,1.2vw,18px);bottom:clamp(13px,1.2vw,18px);
  font-style:normal;color:var(--bone);opacity:0;transform:translateX(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.wtile:hover .wtile__go{opacity:1;transform:translateX(0)}

/* --- closing panel ---------------------------------------------------- */
.wall__all{grid-column:span 2;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(22px,2.4vw,34px);
  background:
    radial-gradient(120% 130% at 100% 0%,rgba(0,50,161,.34),transparent 62%),
    linear-gradient(160deg,var(--navy-800),var(--navy-950));
  border:1px solid rgba(222,227,222,.2);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.wall__all-k{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;font-size:.64rem;color:var(--crest)}
.wall__counts{list-style:none;margin:1.1rem 0 1.5rem;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1rem}
.wall__counts li{display:flex;align-items:baseline;gap:.6rem;
  padding-bottom:.6rem;border-bottom:1px solid rgba(222,227,222,.16)}
.wall__counts b{font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--bone);
  min-width:1.6rem;font-variation-settings:"wdth" 112,"wght" 800}
.wall__counts span{font-size:.82rem;color:var(--steel);line-height:1.25}
.wall__all .btn{align-self:flex-start}

@media (max-width:1040px){
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall__lead{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}
  .wall__all{grid-column:span 2}
}
@media (max-width:560px){
  .wall{grid-template-columns:1fr}
  /* span 2 in a one-column grid creates an implicit second track and squeezes
     every tile into a sliver — the spans have to be released with the columns */
  .wall__lead,.wall__all{grid-column:span 1}
  .wall__lead{aspect-ratio:3/4}
  .wall__counts{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .wall__lead,.wtile,.wall__ph img,.wtile__ph img,.wtile__go,.wall__go i{transition:none}
}

/* ======================================================================
   49 · PRELOADER
   Shown once per session over a wash that runs white across the top 40% into
   crest blue across the lower 60%, with the tatami weave laid over it. The mark
   sits on the blue, so the crest is given a white medallion rather than being
   left blue-on-blue: a crest inside a
   turning arc, the wordmark, a filling rail, the disciplines cycling under it
   and a hairline frame that draws itself in at the corners.

   Position, display and the flat navy ground come from the inline <style> in
   the document head (a flat near-white, so the first painted frame already
   matches this wash), so the curtain paints before this file lands. Nothing here may set `display` on .pl — that would override the
   inline rule which keeps it hidden whenever the script has not run. It lifts
   after a fixed 2.5s — that is both the floor and the hard cap, so it never
   flashes and never outstays it — and none of it depends on the deferred
   main.js.
   ====================================================================== */
html.pl-on,html.pl-on body{overflow:hidden}

/* the same compound selector as the inline rule — a bare .pl would lose to it
   on specificity and the flat placeholder colour would stay */
html.pl-on .pl,.pl.pl--out{
  background:
    radial-gradient(64% 26% at 50% 0%,rgba(255,255,255,.7),transparent 72%),
    linear-gradient(180deg,#ffffff 0%,#f1f6ff 10%,#dce8fd 26%,#a8c3f1 38%,#5586dd 50%,
      #1a45b2 66%,var(--crest) 84%,#002a86 100%);
  align-content:center;
}
.pl{opacity:1;transition:opacity .48s var(--ease-s)}
.pl--out{opacity:0;pointer-events:none}

.pl__weave{
  position:absolute;inset:-40px;background-image:var(--weave-l);opacity:.42;
  animation:pl-drift 9s linear infinite;
}
@keyframes pl-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(24px,24px,0)}}

/* a slow breath of crest blue behind the mark */
.pl__glow{
  position:absolute;left:50%;top:50%;width:min(760px,120vw);height:min(760px,120vw);
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,.12) 46%,transparent 68%);
  animation:pl-breathe 3.2s var(--ease-s) infinite;
}
@keyframes pl-breathe{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.94)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}

/* --- corner frame ------------------------------------------------------ */
.pl__frame i{
  position:absolute;width:clamp(28px,5vw,64px);height:clamp(28px,5vw,64px);
  border:0 solid rgba(4,16,52,.20);
}
/* the foot of the wash is crest blue, so the lower corners flip to light */
.pl__frame i:nth-child(3),.pl__frame i:nth-child(4){border-color:rgba(255,255,255,.45)}
.pl__frame i:nth-child(1){top:clamp(18px,3vw,38px);left:clamp(18px,3vw,38px);border-top-width:1px;border-left-width:1px}
.pl__frame i:nth-child(2){top:clamp(18px,3vw,38px);right:clamp(18px,3vw,38px);border-top-width:1px;border-right-width:1px}
.pl__frame i:nth-child(3){bottom:clamp(18px,3vw,38px);left:clamp(18px,3vw,38px);border-bottom-width:1px;border-left-width:1px}
.pl__frame i:nth-child(4){bottom:clamp(18px,3vw,38px);right:clamp(18px,3vw,38px);border-bottom-width:1px;border-right-width:1px}
.pl__frame i{animation:pl-fade .8s var(--ease) .15s both}

/* --- the mark ---------------------------------------------------------- */
.pl__in{position:relative;display:grid;justify-items:center;gap:1rem;padding:0 24px}

.pl__orb{
  position:relative;display:grid;place-items:center;
  width:clamp(128px,17vw,168px);height:clamp(128px,17vw,168px);
  border:1px dashed rgba(255,255,255,.45);border-radius:50%;
  background:radial-gradient(circle,#fff 0 58%,rgba(255,255,255,.92) 62%,rgba(255,255,255,0) 63%);
  box-shadow:0 18px 44px rgba(0,20,70,.28);
  animation:pl-spin 22s linear infinite reverse,pl-fade .9s var(--ease) both;
}
.pl__arc{
  position:absolute;inset:11px;border-radius:50%;
  border:2px solid transparent;
  border-top-color:#ffffff;
  border-right-color:rgba(255,255,255,.3);
  animation:pl-spin 1.25s linear infinite;
}
.pl__crest{
  width:56%;height:auto;display:block;
  filter:drop-shadow(0 6px 14px rgba(4,16,52,.18));
  animation:pl-pop .9s var(--ease) both;
}
@keyframes pl-spin{to{transform:rotate(360deg)}}
@keyframes pl-fade{from{opacity:0}to{opacity:1}}
@keyframes pl-pop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}

.pl__w{
  margin:.25rem 0 0;display:grid;justify-items:center;gap:.3rem;text-align:center;
  animation:pl-rise .9s var(--ease) .12s both;
}
.pl__w b{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.05rem,2.2vw,1.42rem);letter-spacing:.15em;
  color:#ffffff;font-variation-settings:"wdth" 118;line-height:1;
}
.pl__w span{
  font-size:.66rem;letter-spacing:.44em;text-transform:uppercase;
  color:rgba(255,255,255,.72);line-height:1;padding-left:.44em;
}
@keyframes pl-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* --- the rail: fills, then completes as the curtain lifts --------------- */
.pl__rail{
  position:relative;display:block;width:clamp(150px,22vw,230px);height:2px;
  background:rgba(255,255,255,.26);overflow:hidden;margin-top:.35rem;
  animation:pl-fade .8s var(--ease) .2s both;
}
.pl__rail i{
  position:absolute;inset:0 auto 0 0;display:block;width:0;
  background:linear-gradient(90deg,rgba(255,255,255,.55),#ffffff);
  animation:pl-fill 2.4s var(--ease) forwards;
}
@keyframes pl-fill{from{width:0}60%{width:62%}to{width:90%}}
.pl--out .pl__rail i{animation:none;width:100%;transition:width .3s var(--ease-s)}

/* --- the disciplines, cycling ------------------------------------------ */
.pl__cyc{
  position:relative;height:1.3em;width:min(90vw,340px);margin:.15rem 0 0;
}
.pl__cyc span{
  position:absolute;left:0;right:0;top:0;text-align:center;opacity:0;
  font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.82);line-height:1.3;white-space:nowrap;
  animation:pl-cyc 2.5s var(--ease-s) infinite;
}
.pl__cyc span:nth-child(2){animation-delay:.5s}
.pl__cyc span:nth-child(3){animation-delay:1s}
.pl__cyc span:nth-child(4){animation-delay:1.5s}
.pl__cyc span:nth-child(5){animation-delay:2s}
@keyframes pl-cyc{
  0%{opacity:0;transform:translateY(7px)}
  5%{opacity:1;transform:none}
  16%{opacity:1;transform:none}
  21%{opacity:0;transform:translateY(-7px)}
  100%{opacity:0;transform:translateY(7px)}
}

/* --- the footing rule --------------------------------------------------- */
.pl__foot{
  position:absolute;left:0;right:0;bottom:clamp(30px,6vh,64px);margin:0;
  display:flex;justify-content:center;flex-wrap:wrap;gap:.55rem clamp(14px,3vw,30px);
  padding:0 26px;text-align:center;
  font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.8);
  animation:pl-fade 1s var(--ease) .35s both;
}
.pl__foot span{position:relative}
.pl__foot span+span::before{
  content:"";position:absolute;left:calc(clamp(14px,3vw,30px) / -2);top:50%;
  width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.55);transform:translate(-50%,-50%);
}

/* stacked at phone width, where a flex-gap separator dot would sit at the
   start of the wrapped line instead of between two items */
@media (max-width:560px){
  .pl__foot{flex-direction:column;gap:.45rem;letter-spacing:.26em}
  .pl__foot span:last-child{display:none}
  .pl__foot span+span::before{display:none}
}

@media (prefers-reduced-motion:reduce){
  .pl{transition:opacity .2s linear}
  .pl__weave,.pl__glow,.pl__orb,.pl__arc,.pl__crest,.pl__w,.pl__rail,.pl__foot,
  .pl__frame i{animation:none;opacity:1}
  .pl__arc{border-top-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}
  .pl__rail i{animation:none;width:100%;background:rgba(255,255,255,.85)}
  .pl__cyc span{animation:none;opacity:0}
  .pl__cyc span:first-child{opacity:1}
}