/* ==========================================================================
   APC Excellence Mentoring - home page.

   Layers on site.css and uses its tokens. The page was previously a
   design-tool export that carried all 355 of its declarations in style=""
   attributes and drove its responsive behaviour through custom properties
   swapped at breakpoints, because the tool could not emit classes. This is
   the same design expressed as classes and ordinary media queries.

   Breakpoints, inherited from the export's own property switches:
     1000px  the page goes single column - hero stacks, panels unstack
      560px  route cards get a taller flip face
      530px  the numbers panel and the "why" grid drop to one column
   ========================================================================== */

.home{background:var(--navy-950)}

/* ---------- shared home-page pieces --------------------------------------- */
.hm-eyebrow{font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.hm-eyebrow--gold{color:var(--gold)}
.hm-eyebrow--dk{color:var(--gold-dk)}
.hm-eyebrow--mute{color:var(--slate)}

/* Anton's caps nearly fill their box, so at line-height .95 the box was
   shorter than the glyphs and the eyebrow sat almost on top of the title. 1.0
   and a wider margin give it back the fraction of air it was missing, on every
   display title rather than just the one that prompted it. */
.hm-h2{font-family:var(--display);font-weight:400;text-transform:uppercase;
       letter-spacing:.02em;line-height:1;font-size:clamp(2.1rem,5vw,4.2rem);
       margin-top:34px;max-width:20ch}
.hm-h2--navy{color:var(--navy-900)}
.hm-h2--sm{font-size:clamp(2.1rem,4.4vw,3.8rem);max-width:none}
.hm-h2--tight{max-width:13ch;font-size:clamp(2.1rem,4.6vw,3.9rem)}
/* was a wider-tracking exception; the base now tracks the same, kept as a
   hook so the one title that used it can still be tuned on its own */
.hm-h2--wide{letter-spacing:.03em}

/* the gold-underlined "See the …" links that close most sections */
.hm-link-rule{color:var(--cream);font-weight:600;font-size:15px;padding:12px 2px;
              border-bottom:1px solid rgba(200,154,42,.45);
              transition:color .24s,border-color .24s}
.hm-link-rule:hover{color:var(--gold-lt);border-color:var(--gold)}
.hm-link-rule--block{display:inline-flex;align-items:center;gap:10px;min-height:44px;
                     margin-top:clamp(32px,4vw,50px)}
.hm-link-rule--navy{color:var(--navy-900)}
.hm-link-rule--navy:hover{color:var(--gold-dk)}

.hm-btn-gold{background:var(--gold);color:var(--navy-950);border:0;font-weight:800;
             font-size:14px;letter-spacing:.08em;text-transform:uppercase;
             padding:17px 30px;min-height:48px;display:inline-flex;align-items:center;
             cursor:pointer;transition:background .24s,transform .24s}
.hm-btn-gold:hover{background:var(--gold-lt);color:var(--navy-950);transform:translateY(-2px)}
.hm-btn-gold:active{transform:none;box-shadow:inset 0 0 0 1px var(--navy-950)}
.hm-btn-ghost{color:var(--navy-900);border:1px solid var(--gold);font-weight:700;
              font-size:14px;letter-spacing:.08em;text-transform:uppercase;
              padding:16px 30px;min-height:48px;display:inline-flex;align-items:center;
              cursor:pointer;transition:background .24s,color .24s}
.hm-btn-ghost:hover{background:var(--gold);color:var(--navy-950)}

/* ---------- hero ----------------------------------------------------------
   Three photographs stacked and cross-faded, a navy veil over them, the copy
   on the left and a particle canvas on the right. Below 1000px the canvas has
   no height and the whole thing stacks, photo above copy.
   -------------------------------------------------------------------------- */
.hm-hero{position:relative;min-height:100svh;background:var(--navy-950);
         display:flex;flex-direction:row;align-items:stretch;overflow:hidden}
/* the diagonal where the lighter navy meets the darker ground */
.hm-hero-seam{position:absolute;inset:0;background:var(--navy-900);opacity:.55;
              clip-path:polygon(62% 0,100% 0,100% 100%,48% 100%)}

.hm-hero-media{position:absolute;inset:0;overflow:hidden;z-index:0;
               transform:translateY(var(--heroMY,0px)) scale(var(--heroMS,1));
               will-change:transform}
.hm-hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
               opacity:0;transition:opacity 1.2s ease}
.hm-hero-slide.is-on{opacity:1}
.hm-hero-veil{position:absolute;inset:0;pointer-events:none;
              background:linear-gradient(100deg,rgba(6,28,63,.9) 0%,rgba(6,28,63,.82) 34%,
                         rgba(6,28,63,.5) 62%,rgba(6,28,63,.28) 100%)}

.hm-dots{position:absolute;right:clamp(20px,4vw,64px);bottom:18px;display:flex;gap:4px;z-index:3}
.hm-dot{width:44px;height:44px;border:0;padding:0;background:transparent;cursor:pointer;
        display:grid;place-items:center}
.hm-dot span{display:block;width:26px;height:3px;background:rgba(250,250,248,.35);
             transition:background .3s}
.hm-dot.is-on span{background:var(--gold)}

.hm-hero-copy{position:relative;z-index:2;flex:1 1 55%;display:flex;flex-direction:column;
              justify-content:center;
              padding:clamp(110px,14vh,170px) var(--pad) clamp(56px,8vh,90px);
              transform:translateY(var(--heroY,0px));opacity:var(--heroFade,1);
              will-change:transform,opacity}
.hm-hero-copy .hm-eyebrow{margin-bottom:26px}
.hm-hero-title{font-family:var(--display);font-weight:400;text-transform:uppercase;
               letter-spacing:.02em;line-height:.93;font-size:clamp(2.6rem,6.4vw,6rem);
               color:var(--cream);max-width:15ch}
/* each line rises out of its own mask on load - see initHeroWipe in home.js */
.hm-wipe-mask{display:block;overflow:hidden}
.hm-wipe{display:block}
.hm-hero-title .hm-wipe-mask:last-child .hm-wipe{color:var(--gold)}

.hm-hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:38px}
.hm-rule{height:1px;max-width:560px;margin:44px 0 22px;
         background:linear-gradient(90deg,var(--gold),rgba(200,154,42,0))}
.hm-hero-facts{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);
               font:600 12px/1.4 var(--body);letter-spacing:.12em;text-transform:uppercase;
               color:var(--slate-lt)}
.hm-hero-facts .is-gold{color:var(--gold)}

.hm-hero-canvas{position:relative;z-index:1;flex:1 1 45%;min-height:44vh}
.hm-hero-canvas canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.hm-seal{--seal:clamp(196px,17vw,258px);
         position:absolute;top:clamp(84px,12vh,132px);right:clamp(16px,3.4vw,58px);
         width:var(--seal);height:var(--seal);border:3px solid var(--gold);border-radius:50%;
         display:grid;place-items:center;background:rgba(6,28,63,.9);z-index:4;
         box-shadow:0 0 0 10px rgba(200,154,42,.16),0 22px 56px rgba(0,0,0,.42)}
.hm-seal-ring{position:absolute;inset:0;width:100%;height:100%;animation:hm-spin 26s linear infinite}
.hm-seal-ring text{fill:var(--gold-lt);font:800 13px var(--body);letter-spacing:.19em}
.hm-seal-txt{position:relative;text-align:center;font-family:var(--display);
             font-size:calc(var(--seal) * .155);letter-spacing:.06em;color:var(--cream);
             line-height:1.06}

.hm-cue{position:absolute;bottom:26px;left:var(--pad);z-index:3;display:flex;
        align-items:center;gap:12px;opacity:var(--heroCue,1);transition:opacity .3s}
.hm-cue-label{font:600 10px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;
              color:var(--slate-lt)}
.hm-cue-line{display:block;width:56px;height:1px;background:var(--gold);
             animation:hm-scrolldot 2.4s ease-in-out infinite}

@keyframes hm-spin{to{transform:rotate(360deg)}}
@keyframes hm-scrolldot{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- routes --------------------------------------------------------
   Three cards that flip to a detail face. The toggle is a transparent
   checkbox laid over the card, so the flip needs no script and Space works
   from the keyboard; both faces stay in the DOM so a screen reader gets both.
   -------------------------------------------------------------------------- */
.hm-routes{background:var(--cream);padding:clamp(72px,11vw,150px) 0 0}
.hm-routes-body{position:relative;margin-top:clamp(48px,6vw,86px)}
.hm-routes-line{position:absolute;top:-30px;left:0;width:100%;height:60px;overflow:visible}
/* The three nodes on that rule. They sit at the same percentages the circles
   used to (20, 580 and 1180 of a 1200 viewBox) but as real elements, so a
   fixed 10px box and border-radius:50% keeps them round however wide the
   container gets - the svg's own x-scale reaches 1.4 at the 1680px max. */
.hm-routes-dot{position:absolute;top:-24px;width:10px;height:10px;border-radius:50%;
               background:var(--gold);transform:translate(-50%,-50%)}
.hm-routes-dot:nth-of-type(1){left:1.667%}
.hm-routes-dot:nth-of-type(2){left:48.333%}
.hm-routes-dot:nth-of-type(3){left:98.333%}

.hm-route-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
               gap:clamp(16px,2vw,28px);align-items:start}
.hm-route{position:relative;perspective:1500px}
.hm-flip-toggle{position:absolute;inset:0;z-index:3;margin:0;width:100%;height:100%;
                appearance:none;-webkit-appearance:none;background:none;border:0;
                opacity:0;cursor:pointer}
.hm-flip-inner{position:relative;min-height:var(--flipH,clamp(340px,26vw,390px));
               transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.72,.24,1)}
.hm-flip-toggle:checked + .hm-flip-inner{transform:rotateY(180deg)}
.hm-flip-toggle:focus-visible + .hm-flip-inner{outline:2px solid var(--gold-lt);outline-offset:3px}
.hm-face{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
         backface-visibility:hidden;-webkit-backface-visibility:hidden;
         clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
.hm-face--front{background:var(--navy-900);color:var(--cream);padding:clamp(28px,3vw,44px)}
.hm-face--back{background:var(--navy-700);color:var(--cream);transform:rotateY(180deg);
               padding:clamp(26px,2.8vw,40px) clamp(28px,3vw,44px)}

.hm-route-ghost{position:absolute;right:8px;bottom:-14px;font-family:var(--display);
                font-size:clamp(7rem,11vw,11rem);line-height:.8;color:var(--cream);
                opacity:.06;pointer-events:none}
.hm-face--back .hm-route-ghost{opacity:.05}
.hm-route-ic{position:relative}
.hm-route-name{font-size:clamp(19px,1.5vw,23px);font-weight:600;line-height:1.25;
               margin-top:26px;position:relative}
.hm-route-desc{color:var(--pale-2);font-size:16px;margin-top:16px;position:relative}
.hm-route-more{margin-top:auto;padding-top:22px;position:relative;display:flex;
               align-items:center;gap:9px;font:600 11.5px/1 var(--body);
               letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.hm-face--back .hm-route-more{padding-top:20px}
.hm-route-tag{font:600 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
              color:var(--gold);position:relative}
.hm-route-short{font-size:clamp(17px,1.3vw,20px);font-weight:600;line-height:1.25;
                margin-top:12px;position:relative}
.hm-route-dl{margin:20px 0 0;position:relative}
.hm-route-dl>div{border-top:1px solid rgba(200,154,42,.34);padding:13px 0}
.hm-route-dl>div:last-child{padding-bottom:0}
.hm-route-dl dt{font:600 10.5px/1 var(--body);letter-spacing:.13em;text-transform:uppercase;
                color:var(--slate-lt)}
.hm-route-dl dd{margin:7px 0 0;color:var(--pale);font-size:15px;line-height:1.5}

/* the route-finder strip and the pull quote that close the routes section */
.hm-finder{margin-top:clamp(56px,7vw,96px);background:var(--navy-900);color:var(--cream)}
.hm-finder-in{padding-block:26px;display:flex;flex-wrap:wrap;align-items:center;gap:18px;
              justify-content:space-between}
.hm-finder-in p{font-size:16px;color:var(--pale)}
.hm-pill{border:1px solid var(--gold);border-radius:999px;padding:11px 22px;min-height:44px;
         display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14px;
         color:var(--cream);transition:background .24s,color .24s}
.hm-pill:hover{background:var(--gold);color:var(--navy-950)}
.hm-quote{background:var(--cream);padding:clamp(56px,7vw,104px) 0}
/* The quote runs the full width of the band rather than sitting in a 26ch
   column with the rest of the cream empty beside it, so it scales up to suit
   the measure it now has. */
.hm-quote p{font-style:italic;font-size:clamp(21px,3.2vw,44px);line-height:1.26;
            color:var(--navy-900);margin-left:clamp(-8px,-1vw,0px)}

/* ---------- services ------------------------------------------------------ */
.hm-programme{background:var(--navy-900);color:var(--cream);padding:clamp(72px,10vw,140px) 0}
.hm-svc-layout{display:grid;grid-template-columns:38% 1fr;gap:clamp(32px,5vw,80px);
               align-items:start}
.hm-svc-intro{position:sticky;top:120px}
.hm-svc-lead{color:var(--pale-2);margin-top:22px;max-width:38ch}
.hm-svc{border-top:1px solid rgba(250,250,248,.16);
        padding:clamp(22px,2.4vw,34px) clamp(14px,1.6vw,26px);
        transition:background .24s,border-color .24s}
.hm-svc:hover{background:var(--navy-700);border-color:var(--gold)}
.hm-svc-name{font-size:clamp(18px,1.4vw,21px);font-weight:600;line-height:1.3;color:#E8BA4C}
.hm-svc-desc{color:var(--pale-2);margin-top:12px;max-width:62ch;font-size:16px}

/* ---------- the room ------------------------------------------------------ */
.hm-room{background:var(--cream);padding:clamp(64px,8vw,120px) 0 clamp(56px,7vw,104px)}
.hm-room-head{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(22px,4vw,72px);
              align-items:end}
.hm-room-lead{font-size:clamp(17px,1.35vw,20px);color:var(--navy-900);max-width:44ch}
.hm-room-sub{color:var(--slate);font-size:15.5px;margin-top:14px;max-width:46ch}

.hm-room-grid{margin-top:clamp(34px,4.4vw,64px);display:grid;
              grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.6vw,24px)}
/* the corner cut both panels share */
.hm-room-media,.hm-numbers{
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--roomCut,22px)),
                    calc(100% - var(--roomCut,22px)) 100%,0 100%)}
.hm-room-media{position:relative;aspect-ratio:16/11;grid-column:span 8;
               background:var(--navy-900);overflow:hidden}
.hm-room-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hm-numbers{grid-column:span 4;background:var(--navy-900);color:var(--cream);
            padding:clamp(24px,2.6vw,40px) clamp(22px,2.4vw,38px) clamp(26px,2.6vw,36px);
            display:flex;flex-direction:column}
.hm-stats{margin:clamp(16px,2vw,28px) 0 0;display:grid;grid-template-columns:1fr;
          gap:0 clamp(20px,4vw,48px);flex:1 1 auto;align-content:space-between}
.hm-stat{display:grid;grid-template-columns:minmax(0,auto) 1fr;align-items:baseline;
         gap:clamp(12px,1.4vw,20px);border-top:1px solid rgba(200,154,42,.3);
         padding:clamp(13px,1.5vw,20px) 0}
.hm-stat dt{grid-column:2;font:600 11.5px/1.45 var(--body);letter-spacing:.13em;
            text-transform:uppercase;color:var(--pale-2)}
.hm-stat dd{grid-column:1;grid-row:1;margin:0;font-family:var(--display);color:var(--gold);
            line-height:.85;font-size:clamp(2.1rem,3.2vw,3rem);min-width:2.2em}

/* ---------- competencies -------------------------------------------------- */
.hm-comps{background:var(--navy-950);color:var(--cream);padding:clamp(72px,10vw,140px) 0}
.hm-comps-head{display:flex;flex-wrap:wrap;justify-content:space-between;
               align-items:flex-end;gap:26px}
.hm-comps-hours{font-size:14px;color:var(--slate-lt);text-align:right}
.hm-comps-hours span{font-family:var(--display);font-size:34px;color:var(--gold);
                     letter-spacing:.02em}

.hm-filters{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(30px,4vw,52px) 0 26px}
.hm-filter{min-height:44px;padding:11px 22px;border-radius:999px;
           border:1px solid rgba(200,154,42,.5);background:transparent;color:var(--cream);
           font-size:14px;font-weight:600;cursor:pointer;transition:background .24s,color .24s}
.hm-filter.is-on{background:var(--gold);color:var(--navy-950)}

.hm-comp-list{margin-top:6px}
.hm-comp{border-top:1px solid rgba(250,250,248,.14)}
.hm-comp summary{display:grid;grid-template-columns:1fr auto auto;gap:clamp(14px,2vw,32px);
                 align-items:center;padding:clamp(18px,2vw,24px) clamp(6px,1vw,14px);
                 min-height:56px;list-style:none;cursor:pointer;transition:background .24s}
.hm-comp summary::-webkit-details-marker{display:none}
.hm-comp summary:hover{background:var(--navy-900)}
.hm-comp-name{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
              font-size:clamp(16px,1.25vw,19px);font-weight:600}
.hm-comp-alt{color:var(--gold);text-decoration:none;font-size:18px;cursor:help}
.hm-bars{display:flex;align-items:flex-end;gap:4px;height:20px}
.hm-bar{width:7px;border:1px solid var(--gold);background:transparent}
.hm-bar--1{height:12px}.hm-bar--2{height:16px}.hm-bar--3{height:20px}
.hm-bar.is-on{background:var(--gold)}
.hm-comp-hrs{text-align:right;white-space:nowrap;font-size:12px;color:var(--slate-lt)}
.hm-comp-hrs span{font-family:var(--display);font-size:21px;color:var(--gold)}
.hm-comp-lbl{padding:0 clamp(6px,1vw,14px) 10px;font:600 11.5px/1.4 var(--body);
             letter-spacing:.12em;text-transform:uppercase;color:var(--slate-lt)}
.hm-topics{display:grid;grid-template-columns:1fr 1fr;gap:8px 40px;
           padding:0 clamp(6px,1vw,14px) 30px}
.hm-topics li{display:flex;gap:12px;color:var(--pale);font-size:15.5px;line-height:1.55}
.hm-topics li span:first-child{color:var(--gold);flex:0 0 auto}
.hm-comp-note{border-top:1px solid rgba(250,250,248,.14);padding-top:18px;
              font-size:13.5px;color:var(--slate-lt);font-style:italic}

/* ---------- mentors -------------------------------------------------------
   Two bands, light then dark, with the portrait leading on the first and
   following on the second so the pair mirror rather than repeat.
   -------------------------------------------------------------------------- */
.hm-mentors{background:var(--navy-950)}
.hm-mentors-intro{background:var(--cream);color:var(--ink);
                  padding:clamp(72px,10vw,130px) 0 0}
.hm-mentors-lead{color:var(--slate);margin-top:20px;max-width:56ch}
/* The gap between the intro copy and the first mentor is the light band's own
   top padding rather than a margin on .hm-mentor. As a margin it collapsed
   straight out of the band - the band had no top padding or border and .wrap
   adds only inline padding - and reappeared between the two cream blocks,
   where the section's navy-950 showed through it as a stray stripe. */
.hm-mentor-band--light{background:var(--cream);color:var(--ink);
                       padding:clamp(48px,6vw,86px) 0 clamp(72px,10vw,130px)}
.hm-mentor-band--dark{background:var(--navy-900);color:var(--cream);
                      padding:clamp(72px,10vw,130px) 0}
.hm-mentor{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);
           align-items:start}

.hm-mentor-photo{position:relative;aspect-ratio:4/5;background:var(--navy-900);overflow:hidden}
.hm-mentor-photo--second{order:2}
.hm-mentor-shield{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
                  width:120%;height:auto;max-width:none;opacity:.07}
.hm-mentor-initials{position:absolute;inset:0;display:grid;place-items:center;
                    font-family:var(--display);font-size:clamp(6rem,16vw,15rem);
                    color:var(--gold);opacity:.12;line-height:1;pointer-events:none}
.hm-mentor-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hm-mentor-frame{position:absolute;inset:12px;border:1px solid rgba(200,154,42,.55);
                 pointer-events:none;z-index:3}
.hm-mentor-body--first{order:1}

.hm-mentor-name{font-family:var(--display);font-weight:400;text-transform:uppercase;
                letter-spacing:.02em;font-size:clamp(2rem,4vw,3.4rem);line-height:1;
                margin-top:16px}
.hm-mentor-band--light .hm-mentor-name{color:var(--navy-900)}
.hm-mentor-band--dark .hm-mentor-name{color:var(--cream)}
.hm-mentor-letters{font:600 13px/1.5 var(--body);letter-spacing:.05em;margin-top:14px}
.hm-mentor-band--light .hm-mentor-letters{color:var(--gold-dk)}
.hm-mentor-band--dark .hm-mentor-letters{color:var(--gold)}
.hm-mentor-titles{font-size:15px;margin-top:8px}
.hm-mentor-band--light .hm-mentor-titles{color:var(--slate)}
.hm-mentor-band--dark .hm-mentor-titles{color:var(--slate-lt)}
.hm-mentor-bio{margin-top:24px;max-width:64ch}
.hm-mentor-band--light .hm-mentor-bio{color:var(--ink)}
.hm-mentor-band--dark .hm-mentor-bio{color:var(--pale)}
.hm-mentor-roles{margin-top:30px;border:1px solid var(--gold);padding:22px 24px;
                 clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}
.hm-mentor-role{margin-top:10px;font-size:16.5px;font-weight:600}
.hm-mentor-role + .hm-mentor-role{margin-top:4px}
.hm-mentor-band--light .hm-mentor-role{color:var(--navy-900)}
.hm-mentor-band--dark .hm-mentor-role{color:var(--cream)}

/* ---------- why ----------------------------------------------------------- */
.hm-why{background:var(--navy-950);color:var(--cream);padding:clamp(72px,10vw,130px) 0;
        border-top:1px solid rgba(200,154,42,.35)}
.hm-why-lead{color:var(--pale);margin-top:20px;max-width:60ch}
.hm-why-grid{margin-top:clamp(44px,5.5vw,72px);display:grid;
             grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,3vw,44px)}
.hm-why-card{border-top:1px solid rgba(200,154,42,.32);padding-top:22px}
.hm-why-num{font-family:var(--display);font-weight:400;font-size:26px;line-height:1;
            color:var(--gold)}
.hm-why-title{font-size:clamp(17px,1.5vw,19.5px);font-weight:600;line-height:1.3;
              margin-top:14px;color:var(--cream)}
.hm-why-body{color:var(--pale-2);font-size:15px;line-height:1.62;margin-top:10px}

/* ---------- fees ---------------------------------------------------------- */
.hm-fees{background:var(--cream);color:var(--ink);padding:clamp(72px,10vw,130px) 0}
.hm-fees-lead{color:var(--slate);margin-top:20px;max-width:56ch}
.hm-plans{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(36px,5vw,64px)}
.hm-plan{display:flex;flex-direction:column}
.hm-plan--first{padding:clamp(28px,3.4vw,52px) clamp(24px,4vw,64px) clamp(28px,3.4vw,52px) 0}
.hm-plan--second{border-left:1px solid var(--gold);
                 padding:clamp(28px,3.4vw,52px) 0 clamp(28px,3.4vw,52px) clamp(24px,4vw,64px)}
.hm-plan-name{font-family:var(--display);font-weight:400;text-transform:uppercase;
              letter-spacing:-.01em;font-size:clamp(1.5rem,2.6vw,2.3rem);
              color:var(--navy-900);margin-top:14px}
.hm-plan-cur{margin-top:26px}
.hm-plan-cur span{font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
                  color:var(--slate)}
.hm-plan-price{font-family:var(--display);font-size:clamp(3.4rem,7vw,6rem);line-height:.85;
               color:var(--navy-900);margin-top:10px}
.hm-plan-terms{color:var(--slate);font-size:15px;margin-top:10px}
.hm-plan-blurb{color:var(--slate);font-size:16px;margin-top:26px;max-width:44ch}
.hm-plan-features{margin-top:28px;display:grid;gap:0;flex:1}
.hm-plan-features li{display:flex;gap:14px;border-top:1px solid rgba(9,41,92,.12);
                     padding:13px 0;font-size:16px;color:var(--ink)}
.hm-plan-features svg{flex:0 0 auto;margin-top:4px}
.hm-plan-cta{align-self:flex-start;margin-top:30px}

.hm-band{margin-top:clamp(48px,6vw,84px);background:var(--navy-900);color:var(--cream)}
.hm-band-in{padding-block:26px;display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);
            align-items:center;justify-content:space-between}
.hm-band-in span{font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
                 color:var(--cream)}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1000px){
  /* hero stacks with the photograph above the copy, and the canvas column -
     which only ever held the particle field and the seal - collapses away */
  .hm-hero{flex-direction:column-reverse}
  .hm-hero-seam{clip-path:none}
  .hm-hero-canvas{flex:0 0 0px;min-height:0}
  .hm-seal{display:none}

  .hm-svc-layout{grid-template-columns:1fr}
  .hm-svc-intro{position:static}

  .hm-room-head{grid-template-columns:1fr}
  .hm-room-grid{grid-template-columns:1fr}
  .hm-room-media,.hm-numbers{grid-column:auto}

  .hm-topics{grid-template-columns:1fr}

  .hm-mentor{grid-template-columns:1fr}
  /* stacked, the portrait always leads - a text block between two images
     reads as a caption for the wrong one */
  .hm-mentor-photo--second{order:0}
  .hm-mentor-body--first{order:1}

  .hm-why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .hm-plans{grid-template-columns:1fr}
  .hm-plan--first{padding-right:0}
  .hm-plan--second{border-left:0;border-top:1px solid var(--gold);padding-left:0}
}

@media (max-width:560px){
  .hm-route{--flipH:370px}
}

@media (max-width:530px){
  .hm-room-grid{--roomCut:14px}
  .hm-why-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .hm-seal-ring,.hm-cue-line{animation:none}
}