/* ==========================================================================
   MUHAMMAD AHSAN — "ALTITUDE"

   The logo is a summit inside a circle. The tagline already said "adventure
   seeker." The photography is Karakoram. Nobody had pulled that thread, so
   this does: the page is an ascent, and the contour lines are traced from
   his own photographs of the range above Skardu.

   Colour comes from the brand guide (amber #F2A30C, orange #F2542B,
   charcoal #282623, bone #DBD8D1). Two deliberate moves:
   1. The dark is warmed toward the charcoal's hue. Pure black + gold reads
      cheap; warm near-black + amber reads like dusk on rock.
   2. Amber is rationed to three jobs — the active waypoint, the number that
      matters, the next action. It is never a background wash. Orange appears
      exactly once, at the summit.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:root{
  --rock:#12100D; --slate:#1A1714; --crag:#221E19;
  --granite:#2E2921; --granite-2:#413A30;
  --bone:#E9E5DC; --ash:#918A7D; --ash-2:#837C6F;
  --summit:#F2A30C; --flare:#F2542B;
  --paper:#EFECE4; --paper-2:#E3DFD5; --paper-3:#D3CEC1;
  --ink:#191612; --ink-2:#5A5247;

  --rail:78px;
  --pad:clamp(20px,5vw,80px);
  --maxw:1320px;
  --band-y:clamp(78px,10vw,150px);

  --display:"Archivo","Arial Black",system-ui,sans-serif;
  --body:"Inter Tight","Inter",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-hero:clamp(2.5rem,5.4vw,4.75rem);
  --fs-h2:clamp(1.95rem,3.9vw,3.35rem);
  --fs-h3:clamp(1.22rem,1.6vw,1.5rem);
  --fs-lead:clamp(1.15rem,1.35vw,1.4rem);
  --fs-mono:.76rem;

  --ease:cubic-bezier(.22,.61,.36,1);
}

html{scroll-behavior:smooth;scroll-padding-top:92px}
body{
  font-family:var(--body);
  font-size:clamp(1.06rem,1.08vw,1.16rem);
  line-height:1.68;
  color:var(--bone);
  background:var(--rock);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- type roles ------------------------------------------------- */
.display{font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 700;line-height:1.03;letter-spacing:-.019em}
.signage{font-family:var(--display);font-variation-settings:"wdth" 113,"wght" 700;text-transform:uppercase;letter-spacing:.004em;line-height:1.05}
.data{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.145em;text-transform:uppercase;font-weight:500}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

.lead{font-size:var(--fs-lead);line-height:1.58;color:var(--ash);max-width:58ch}
.lead strong{color:var(--bone);font-weight:600}

.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:14px 20px;background:var(--summit);color:#12100D;font-family:var(--mono);font-size:.75rem}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--summit);outline-offset:3px;border-radius:2px}

/* ==========================================================================
   SIGNATURE — THE ELEVATION RAIL
   A continuous altitude readout, not a step counter. On a page this long the
   useful question is "how far", not "which item". The ticks are the nav.
   ========================================================================== */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:60;
  display:flex;flex-direction:column;align-items:center;
  border-right:1px solid var(--granite);
  background:rgba(18,16,13,.82);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  transition:border-color .55s var(--ease),background .55s var(--ease);
}
.rail__read{position:absolute;top:20px;left:0;right:0;text-align:center;color:var(--ash-2);transition:color .55s var(--ease)}
.rail__num{display:block;font-family:var(--mono);font-size:.79rem;font-weight:700;color:var(--bone);letter-spacing:.03em;font-variant-numeric:tabular-nums;transition:color .55s var(--ease)}
.rail__unit{display:block;font-family:var(--mono);font-size:.53rem;letter-spacing:.2em;margin-top:3px}

.rail__track{position:relative;flex:1;width:1px;background:var(--granite);margin:74px 0 44px;transition:background .55s var(--ease)}
.rail__fill{position:absolute;left:0;top:0;width:1px;height:0;background:linear-gradient(180deg,var(--granite-2) 0%,var(--summit) 100%)}
.rail__tick{position:absolute;left:50%;top:0;width:var(--rail);display:flex;align-items:center;justify-content:center;padding:10px 0;transform:translate(-50%,-50%)}
.rail__dot{width:7px;height:7px;border:1px solid var(--granite-2);background:var(--rock);border-radius:50%;transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.rail__tick:hover .rail__dot{border-color:var(--summit)}
.rail__tick[aria-current="step"] .rail__dot{background:var(--summit);border-color:var(--summit);box-shadow:0 0 0 4px rgba(242,163,12,.17)}
.rail__label{
  position:absolute;left:calc(var(--rail) - 15px);white-space:nowrap;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ash);background:var(--slate);border:1px solid var(--granite);
  padding:5px 10px;opacity:0;transform:translateX(-6px);pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.rail__tick:hover .rail__label,.rail__tick:focus-visible .rail__label{opacity:1;transform:translateX(0)}
.rail__foot{position:absolute;bottom:18px;left:50%;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font-family:var(--mono);font-size:.53rem;letter-spacing:.22em;color:var(--ash-2);text-transform:uppercase;transition:color .55s var(--ease)}

/* rail inverts with the page when we break above the cloud layer */
body.is-light .rail{background:rgba(239,236,228,.85);border-right-color:var(--paper-3)}
body.is-light .rail__num{color:var(--ink)}
body.is-light .rail__read,body.is-light .rail__foot{color:var(--ink-2)}
body.is-light .rail__track{background:var(--paper-3)}
body.is-light .rail__dot{background:var(--paper);border-color:var(--paper-3)}
body.is-light .rail__label{background:var(--paper);border-color:var(--paper-3);color:var(--ink-2)}

.bar{position:fixed;top:0;left:0;right:0;height:2px;background:var(--granite);z-index:70;display:none}
.bar__fill{height:100%;width:0;background:var(--summit)}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.shell{padding-left:var(--rail)}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.band{position:relative;padding-block:var(--band-y);isolation:isolate}

[data-zone="light"]{background:var(--paper);color:var(--ink)}
[data-zone="light"] .lead{color:var(--ink-2)}
[data-zone="light"] .lead strong{color:var(--ink)}
[data-zone="light"] .data{color:var(--ink-2)}

.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,2.4vw,30px) clamp(30px,5vw,72px);align-items:end;
  margin-bottom:clamp(38px,5vw,66px)}
.head__tag{grid-column:1/-1;display:flex;align-items:center;gap:12px;color:var(--ash)}
.head__tag::after{content:"";height:1px;flex:1;min-width:36px;background:var(--granite)}
[data-zone="light"] .head__tag::after{background:var(--paper-3)}
.head__tag b{font-weight:700;color:var(--summit)}
.head h2{font-size:var(--fs-h2);max-width:15ch}
.head .lead{max-width:52ch;padding-bottom:.3em}

.rule{height:1px;background:var(--granite);border:0}
[data-zone="light"] .rule{background:var(--paper-3)}

/* contour texture — traced from his own photographs of the Karakoram.
   Used as a mask so a single file can take any colour the zone needs. */
.topo{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--granite-2);opacity:.5;
  -webkit-mask-size:cover;mask-size:cover;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.topo--h{-webkit-mask-image:url("../img/contours.svg");mask-image:url("../img/contours.svg")}
.topo--v{-webkit-mask-image:url("../img/contours-v.svg");mask-image:url("../img/contours-v.svg");
  -webkit-mask-position:right center;mask-position:right center;
  -webkit-mask-size:auto 118%;mask-size:auto 118%}
[data-zone="light"] .topo{background-color:var(--paper-3);opacity:.62}

/* ---------- buttons ---------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:16px 28px;border:1px solid transparent;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.btn--go{background:var(--summit);color:#100E0B}
.btn--go:hover{background:#FFB524;transform:translateY(-2px)}
.btn--ghost{border-color:var(--granite-2);color:var(--bone)}
.btn--ghost:hover{border-color:var(--summit);color:var(--summit)}
[data-zone="light"] .btn--ghost{border-color:var(--paper-3);color:var(--ink)}
[data-zone="light"] .btn--ghost:hover{border-color:#8A5A00;color:#8A5A00}
.btn__x{transition:transform .3s var(--ease)}
.btn:hover .btn__x{transform:translateX(4px)}

/* ---------- masthead --------------------------------------------------- */
.masthead{
  position:fixed;top:0;left:var(--rail);right:0;z-index:55;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),padding .4s var(--ease);
}
.masthead.is-stuck{background:rgba(18,16,13,.9);-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);border-bottom-color:var(--granite);padding-block:11px}
body.is-light .masthead.is-stuck{background:rgba(239,236,228,.9);border-bottom-color:var(--paper-3)}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:30px}
.brand .mark--l{display:none}
body.is-light .brand .mark--d{display:none}
body.is-light .brand .mark--l{display:block}
.brand span{font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 700;text-transform:uppercase;font-size:.76rem;letter-spacing:.1em;line-height:1.15}
.mast__nav{display:flex;align-items:center;gap:clamp(14px,2.1vw,30px)}
.mast__nav a{font-family:var(--mono);font-size:.735rem;letter-spacing:.13em;text-transform:uppercase;color:#B3AB9C;transition:color .25s}
.mast__nav a:hover{color:var(--summit)}
body.is-light .mast__nav a{color:var(--ink-2)}
body.is-light .mast__nav a:hover{color:#8A5A00}
.mast__cta{padding:11px 18px}
.mast__nav a.btn--go{color:#100E0B}
.mast__nav a.btn--go:hover{color:#100E0B}
body.is-light .mast__nav a.btn--go{color:#100E0B}
body.is-light .mast__nav a.btn--go:hover{color:#100E0B}

/* ==========================================================================
   00 — BASE CAMP (hero)
   ========================================================================== */
.hero{padding-top:clamp(120px,17vh,190px);padding-bottom:clamp(40px,6vw,80px);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:0 clamp(30px,5vw,72px);align-items:start}
/* the eyebrow spans both columns so the portrait's top edge lines up with
   the top of the headline rather than with the label above it */
.hero__eyebrow{grid-column:1/-1}
.hero .cradle{margin-top:calc(min(100%,460px) * -0.065)}
.hero__eyebrow{display:flex;align-items:center;gap:12px;color:var(--ash);margin-bottom:clamp(22px,2.4vw,32px)}
.hero__eyebrow::before{content:"";width:34px;height:1px;background:var(--summit)}
.hero h1{font-size:var(--fs-hero);max-width:16ch;margin-bottom:28px}
.hero__lead{margin-bottom:36px}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.hero__note{display:flex;align-items:center;gap:12px;color:var(--ash-2)}
.hero__note::before{content:"";width:22px;height:1px;background:var(--granite-2)}

/* the cradle — his head breaks the ring, exactly as the M breaks the circle
   in the mark, and the amber arc below it is the logo's own cradle */
.cradle{position:relative;aspect-ratio:1;width:100%;max-width:460px;margin-inline:auto;color:var(--granite-2)}
.cradle__ring,.cradle__arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cradle__img{position:absolute;left:50%;bottom:-1%;width:91%;transform:translateX(-50%);z-index:2;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}

/* photograph variant: the mark is a summit inside a circle, so the circle
   holds an actual summit. The amber arc sits in front and cradles it. */
.cradle__disc{
  position:absolute;inset:6.5%;border-radius:50%;overflow:hidden;z-index:2;
  background:var(--slate);
  box-shadow:0 30px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(233,229,220,.14);
}
.cradle__disc img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.cradle__disc::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 22%,rgba(18,16,13,0) 42%,rgba(18,16,13,.55) 100%);
}
.cradle--photo .cradle__arc{z-index:3}
.cradle--photo .cradle__ring{z-index:1;color:var(--granite-2)}

/* ridge line at the foot of the hero — his own photograph, reduced to a
   horizon so the section has ground rather than a stock backdrop */
.ridge{position:absolute;left:0;right:0;bottom:0;height:clamp(150px,26vh,290px);z-index:-1;pointer-events:none;opacity:.4}
.ridge img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;filter:grayscale(1) contrast(1.25) brightness(.42);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 58%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 58%,#000 100%)}

/* ---------- proof + facts --------------------------------------------- */
.proof{border-top:1px solid var(--granite);border-bottom:1px solid var(--granite);padding-block:26px}
.proof__row{display:flex;align-items:center;gap:clamp(20px,4vw,54px);flex-wrap:wrap}
.proof__tag{color:var(--ash-2);flex-shrink:0}
.proof__logos{display:flex;align-items:center;gap:clamp(22px,4vw,50px);flex-wrap:wrap;flex:1}
.proof__logos img{height:clamp(21px,2.3vw,29px);width:auto;opacity:.62;transition:opacity .3s var(--ease)}
.proof__logos img:hover{opacity:.95}

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--granite);border-bottom:1px solid var(--granite)}
.fact{background:var(--rock);padding:clamp(22px,3vw,34px) clamp(16px,2vw,28px)}
.fact__n{font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 700;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1;color:var(--bone);margin-bottom:10px}
.fact__n span{color:var(--summit)}
.fact__t{color:var(--ash-2);font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;line-height:1.65}

/* ==========================================================================
   01 — THE CONDITION
   ========================================================================== */
.cond{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
.cond__col > .data{display:block;margin-bottom:24px;color:var(--ash-2)}
.states{display:flex;flex-direction:column}
.state{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:20px 0;border-top:1px solid var(--granite)}
.state:last-child{border-bottom:1px solid var(--granite)}
.state__i{font-family:var(--mono);font-size:.75rem;color:var(--ash-2);padding-top:4px;font-variant-numeric:tabular-nums}
.state p{color:var(--bone);font-size:1.12rem;line-height:1.55}

.shift{background:var(--slate);border:1px solid var(--granite);padding:clamp(24px,3.4vw,40px)}
.shift h3{font-size:var(--fs-h3);margin-bottom:22px;color:var(--bone)}
.shift ul{display:flex;flex-direction:column;gap:15px}
.shift li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;color:var(--ash);line-height:1.58;font-size:1.05rem}
.shift li b{color:var(--bone);font-weight:600}
.shift__k{width:7px;height:7px;margin-top:8px;background:var(--summit);flex-shrink:0}
.shift__foot{margin-top:26px;padding-top:22px;border-top:1px solid var(--granite);color:var(--ash-2);font-size:1rem;line-height:1.6}

/* ==========================================================================
   02 — THE ROUTE
   ========================================================================== */
.route{display:flex;flex-direction:column;gap:1px;background:var(--granite);border:1px solid var(--granite)}
.stage{background:var(--rock);padding:clamp(26px,3.4vw,46px);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,60px);transition:background .4s var(--ease)}
.stage:hover{background:var(--crag)}
.stage__no{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.stage__no i{font-style:normal;font-family:var(--mono);font-size:.73rem;letter-spacing:.16em;color:var(--summit);font-weight:700}
.stage__no s{text-decoration:none;font-family:var(--mono);font-size:.73rem;letter-spacing:.16em;color:var(--ash-2)}
.stage h3{font-size:clamp(1.35rem,2.3vw,1.95rem);margin-bottom:14px}
.stage__say{color:var(--ash);max-width:36ch;line-height:1.6;font-size:1.05rem}
.stage__out{margin-top:22px;padding-top:18px;border-top:1px solid var(--granite);color:var(--ash-2);font-size:.99rem;line-height:1.6}
.stage__out b{color:var(--bone);font-weight:600}

.items{display:flex;flex-direction:column}
.item{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--granite)}
.item:first-child{border-top:1px solid var(--granite)}
.item__n{color:var(--bone);font-size:1.08rem;line-height:1.45}
.item__n small{display:block;color:var(--ash-2);font-size:.9rem;margin-top:4px;line-height:1.5}
.item__p{font-family:var(--mono);font-size:.84rem;letter-spacing:.05em;color:var(--summit);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.item__p.is-soft{color:var(--ash-2)}
.item__p small{display:block;color:var(--ash-2);letter-spacing:.1em;font-size:.6rem;margin-top:3px;text-transform:uppercase}

/* ==========================================================================
   03 — NINETY DAYS
   ========================================================================== */
.arc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--granite);border-block:1px solid var(--granite)}
.leg{background:var(--rock);padding:clamp(26px,3.2vw,40px) clamp(20px,2.6vw,34px);position:relative}
.leg__d{font-family:var(--mono);font-size:.73rem;letter-spacing:.16em;color:var(--summit);text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.leg__d::after{content:"";flex:1;height:1px;background:var(--granite)}
.leg h3{font-size:var(--fs-h3);margin-bottom:14px}
.leg p{color:var(--ash);font-size:1.04rem;line-height:1.6}
.leg ul{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.leg li{color:var(--ash);font-size:.99rem;padding-left:16px;position:relative;line-height:1.55}
.leg li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:1px;background:var(--ash-2)}
.arc__end{margin-top:clamp(30px,4vw,48px);display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.arc__end .data{color:var(--summit);flex-shrink:0}
.arc__end p{font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 600;font-size:clamp(1.15rem,2.2vw,1.7rem);line-height:1.25;letter-spacing:-.015em;color:var(--bone)}

/* cloud break — the page changes altitude here */
.cloud{position:relative;height:clamp(120px,17vw,220px);overflow:hidden;background:var(--rock)}
.cloud img{width:100%;height:100%;object-fit:cover;opacity:.5;filter:grayscale(1) contrast(1.1)}
.cloud::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--rock) 2%,rgba(18,16,13,0) 46%,rgba(239,236,228,.55) 74%,var(--paper) 99%)}

/* ==========================================================================
   04 — THE OPERATOR
   ========================================================================== */
.op{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(30px,5vw,76px);align-items:start}
.op__fig{position:relative}
.op__fig img{width:100%}
.op__cap{margin-top:14px;color:var(--ink-2);font-family:var(--mono);font-size:.67rem;letter-spacing:.15em;text-transform:uppercase;line-height:1.7}

.arcs{display:flex;flex-direction:column}
.disc{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,30px);padding:22px 0;border-top:1px solid var(--paper-3)}
.disc:last-of-type{border-bottom:1px solid var(--paper-3)}
.disc__y{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;color:var(--ink-2);padding-top:6px;white-space:nowrap}
.disc h3{font-size:1.14rem;font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 700;text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px;color:var(--ink)}
.disc p{color:var(--ink-2);font-size:1.06rem;line-height:1.62;max-width:54ch}

.said{margin-top:clamp(30px,4vw,46px);padding:clamp(24px,3vw,36px);background:var(--paper-2);border-left:2px solid var(--summit)}
.said p{font-family:var(--display);font-variation-settings:"wdth" 102,"wght" 500;font-size:clamp(1.05rem,1.8vw,1.42rem);line-height:1.4;letter-spacing:-.012em;color:var(--ink)}
.said cite{display:block;margin-top:14px;font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}

/* ==========================================================================
   05 — RECEIPTS
   ========================================================================== */
.rec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,5vw,76px);align-items:start}
.certs{display:flex;flex-direction:column}
.cert{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--paper-3)}
.cert:first-child{border-top:1px solid var(--paper-3)}
.cert__c{font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 700;font-size:1.5rem;line-height:1;color:var(--ink);min-width:2.1ch;font-variant-numeric:tabular-nums}
.cert__b{color:var(--ink);font-size:1.07rem}
.cert__b small{display:block;color:var(--ink-2);font-size:.9rem;margin-top:3px;line-height:1.5}
.cert__t{font-family:var(--mono);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);text-align:right;white-space:nowrap}
a.cert__t{color:#8A5A00;display:inline-flex;align-items:center;gap:7px;border-bottom:1px solid transparent;transition:border-color .25s var(--ease),color .25s var(--ease)}
a.cert__t:hover{color:var(--ink);border-bottom-color:#8A5A00}
.cert__x{transition:transform .25s var(--ease)}
a.cert__t:hover .cert__x{transform:translateX(3px)}
.cert__t.is-multi{color:var(--ink-2);opacity:.75}
/* the rows with several credentials link each one inline */
.cert__l a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:var(--paper-3);transition:color .2s var(--ease),text-decoration-color .2s var(--ease)}
.cert__l a:hover{color:#8A5A00;text-decoration-color:#8A5A00}
.rec__note{margin-top:26px;color:var(--ink-2);font-size:1.05rem;line-height:1.65;max-width:54ch}
.rec__note b{color:var(--ink);font-weight:600}

.teach{background:var(--paper-2);padding:clamp(24px,3.2vw,38px)}
.teach h3{font-size:var(--fs-h3);margin-bottom:20px;color:var(--ink)}
.teach dl{display:flex;flex-direction:column;gap:16px}
.teach dt{font-family:var(--mono);font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:3px}
.teach dd{color:var(--ink);font-size:1.06rem;line-height:1.58}
.teach__pic{margin-top:26px}
.teach__pic img{width:100%}

/* ==========================================================================
   06 — TESTIMONY
   ========================================================================== */
.says{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px)}
.say{display:flex;flex-direction:column;gap:20px;padding-top:24px;border-top:2px solid var(--ink)}
.say blockquote{font-size:1.14rem;line-height:1.6;color:var(--ink)}
.say figcaption{margin-top:auto;display:flex;align-items:center;gap:12px}
.say img{width:38px;height:38px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.say b{display:block;font-size:1rem;color:var(--ink);font-weight:600;line-height:1.3}
.say span{font-family:var(--mono);font-size:.65rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2)}

.vid{margin-top:clamp(34px,4.4vw,58px);border-top:1px solid var(--paper-3);padding-top:26px;display:flex;gap:clamp(16px,3vw,40px);flex-wrap:wrap;align-items:baseline}
.vid__t{font-family:var(--mono);font-size:.67rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);flex-shrink:0}
.vid__n{display:flex;flex-wrap:wrap;gap:10px 22px;flex:1}
.vid__n li{font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 700;text-transform:uppercase;font-size:.86rem;letter-spacing:.02em;color:var(--ink)}
.vid__c{font-family:var(--mono);font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;color:#8A5A00;flex-basis:100%;margin-top:6px}

/* ==========================================================================
   07 — FIELD NOTES
   ========================================================================== */
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px)}
.note{display:flex;flex-direction:column;gap:16px;transition:transform .35s var(--ease)}
.note:hover{transform:translateY(-4px)}
.note__pic{aspect-ratio:16/10;overflow:hidden;background:var(--slate);border:1px solid var(--granite)}
.note__pic img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.85);transition:filter .4s var(--ease),transform .5s var(--ease)}
.note:hover .note__pic img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.03)}
.note__k{color:var(--ash-2);font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.note h3{font-size:1.16rem;line-height:1.35;color:var(--bone);font-weight:600;font-family:var(--body)}
.note p{color:var(--ash);font-size:1rem;line-height:1.6}
.note__go{margin-top:auto;font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--summit);display:flex;align-items:center;gap:8px}

/* ==========================================================================
   08 — SUMMIT
   ========================================================================== */
.summit{position:relative;overflow:hidden;text-align:center}
.summit__in{position:relative;z-index:2;max-width:760px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:26px}
.summit__el{display:flex;align-items:center;gap:12px;color:var(--flare);font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.summit__el::before,.summit__el::after{content:"";width:26px;height:1px;background:var(--flare);opacity:.55}
.summit h2{font-size:clamp(1.9rem,4.4vw,3.5rem);max-width:16ch}
.summit p{color:var(--ash);font-size:var(--fs-lead);max-width:52ch;line-height:1.58}
.summit__acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}
.summit__meta{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;margin-top:12px}
.summit__meta li{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ash-2);display:flex;align-items:center;gap:8px}
.summit__meta li::before{content:"";width:4px;height:4px;background:var(--summit)}
.summit__bg{position:absolute;inset:0;z-index:0;opacity:.42}
.summit__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:grayscale(1) contrast(1.3) brightness(.5)}
.summit::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 42%,rgba(18,16,13,.62) 0%,rgba(18,16,13,.9) 58%,var(--rock) 88%)}

/* ---------- footer ----------------------------------------------------- */
.foot{border-top:1px solid var(--granite);padding-block:44px}
.foot__row{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap}
.foot__b{display:flex;align-items:center;gap:12px}
.foot__b img{width:34px}
.foot__b span{font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 700;text-transform:uppercase;font-size:.74rem;letter-spacing:.1em;line-height:1.2}
.foot__s{display:flex;gap:22px}
.foot__s a{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);transition:color .25s}
.foot__s a:hover{color:var(--summit)}
.foot__c{color:var(--ash-2);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}

/* ==========================================================================
   MOTION
   Ported from the Framer Motion model, not the library: variants, stagger,
   in-view triggers and spring-shaped easing, expressed in CSS.

   Rules that keep it professional rather than busy:
     - transform and opacity only, so everything stays on the compositor
     - travel is short (14-18px). Long slides read as a slideshow, not a site
     - one reveal per element, never replayed on scroll back
     - stagger flattens after six items
     - prefers-reduced-motion gets the finished state, immediately
   ========================================================================== */
:root{
  --spring-gentle:cubic-bezier(.22,1,.36,1);      /* stiffness 100, damping 20 */
  --spring-stiff:cubic-bezier(.16,1,.3,1);        /* stiffness 400, damping 30 */
  --spring-wobbly:cubic-bezier(.34,1.42,.64,1);   /* stiffness 200, damping 10 */
  --d-micro:160ms;
  --d-ui:280ms;
  --d-enter:640ms;
  --stagger:62ms;                                  /* per container, set in markup */
}

/* ---------- variants ---------------------------------------------------- */
.rise,[data-anim]{
  opacity:0;
  transition:opacity var(--d-enter) var(--spring-gentle) var(--delay,0ms),
             transform var(--d-enter) var(--spring-gentle) var(--delay,0ms),
             clip-path var(--d-enter) var(--spring-gentle) var(--delay,0ms);
}
.rise,[data-anim="rise"]{transform:translate3d(0,18px,0)}
[data-anim="fade"]{transform:none}
[data-anim="left"]{transform:translate3d(-18px,0,0)}
[data-anim="right"]{transform:translate3d(18px,0,0)}
[data-anim="scale"]{transform:scale(.968)}
[data-anim="clip"]{opacity:1;clip-path:inset(0 0 105% 0)}
.rise.is-in,[data-anim].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.rise:not(.is-in),[data-anim]:not(.is-in){will-change:transform,opacity}
.rise.is-in,[data-anim].is-in{will-change:auto}
.rise[data-d="1"]{--delay:80ms}
.rise[data-d="2"]{--delay:160ms}
.rise[data-d="3"]{--delay:240ms}

/* ---------- staggerChildren --------------------------------------------- */
[data-stagger] > *{
  opacity:0;transform:translate3d(0,14px,0);
  transition:opacity var(--d-enter) var(--spring-gentle) var(--delay,0ms),
             transform var(--d-enter) var(--spring-gentle) var(--delay,0ms);
}
[data-stagger].is-in > *{opacity:1;transform:none}
[data-stagger] > *:nth-child(1){--delay:0ms}
[data-stagger] > *:nth-child(2){--delay:calc(var(--stagger) * 1)}
[data-stagger] > *:nth-child(3){--delay:calc(var(--stagger) * 2)}
[data-stagger] > *:nth-child(4){--delay:calc(var(--stagger) * 3)}
[data-stagger] > *:nth-child(5){--delay:calc(var(--stagger) * 4)}
[data-stagger] > *:nth-child(6){--delay:calc(var(--stagger) * 5)}
[data-stagger] > *:nth-child(n+7){--delay:calc(var(--stagger) * 6)}

/* ---------- gestures ---------------------------------------------------- */
.btn{transition:background var(--d-ui) var(--spring-stiff),
                color var(--d-ui) var(--spring-stiff),
                border-color var(--d-ui) var(--spring-stiff),
                transform var(--d-micro) var(--spring-wobbly)}
.btn:active,.tier__go:active,.udemy__go:active{transform:translateY(0) scale(.985)}
.vplayer__poster:active .vplayer__play{transform:translate(-50%,-50%) scale(.94)}

.mast__nav a:not(.mast__cta){position:relative}
.mast__nav a:not(.mast__cta)::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:var(--summit);transform:scaleX(0);transform-origin:right center;
  transition:transform var(--d-ui) var(--spring-stiff);
}
.mast__nav a:not(.mast__cta):hover::after,
.mast__nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left center}

.tier,.mcard{transition:transform var(--d-ui) var(--spring-gentle),
                        background var(--d-ui) var(--spring-gentle),
                        border-color var(--d-ui) var(--spring-gentle)}
.tier:hover,.mcard:hover{transform:translateY(-3px)}
.stack__i{transition:opacity var(--d-ui) var(--spring-gentle),
                     color var(--d-ui) var(--spring-gentle),
                     transform var(--d-ui) var(--spring-gentle)}
.stack__i:hover{transform:translateY(-2px)}

.qa__i[open] .qa__a,.cert__d[open] .credlist{animation:panel var(--d-ui) var(--spring-gentle) both}
@keyframes panel{from{opacity:0;transform:translate3d(0,-6px,0)}to{opacity:1;transform:none}}
.fact__n[data-count]{font-variant-numeric:tabular-nums}

/* ---------- entrances --------------------------------------------------- */
@keyframes enter{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
.hero__eyebrow,.hero h1,.hero__lead,.hero__acts,.hero__note,.cradle,
.ph .crumbs,.ph .kicker,.ph h1,.ph .lead,.ph__acts,.ph__note,.ph .spec{
  animation:enter var(--d-enter) var(--spring-gentle) both;
}
.hero h1,.ph h1{animation-delay:70ms}
.cradle,.ph .spec{animation-delay:150ms}
.hero__lead,.ph .lead{animation-delay:150ms}
.hero__acts,.ph__acts{animation-delay:230ms}
.hero__note,.ph__note{animation-delay:300ms}

@media (prefers-reduced-motion:reduce){
  [data-stagger] > *{opacity:1 !important;transform:none !important;transition:none !important}
  .rise,[data-anim]{opacity:1 !important;transform:none !important;
    clip-path:none !important;transition:none !important;will-change:auto !important}
  .hero__eyebrow,.hero h1,.hero__lead,.hero__acts,.hero__note,.cradle,
  .ph .crumbs,.ph .kicker,.ph h1,.ph .lead,.ph__acts,.ph__note,.ph .spec,
  .qa__i[open] .qa__a,.cert__d[open] .credlist{animation:none !important}
  .tier:hover,.mcard:hover,.stack__i:hover,.btn:active{transform:none !important}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .stage{grid-template-columns:1fr;gap:26px}
  .op,.rec,.cond{grid-template-columns:1fr;gap:38px}
  .facts{grid-template-columns:repeat(2,1fr)}
  .says,.notes{grid-template-columns:1fr 1fr}
  .arc{grid-template-columns:1fr}
}
@media (max-width:860px){
  :root{--rail:0px}
  .rail{display:none}
  .bar{display:block}
  .masthead{left:0}
  .head{grid-template-columns:1fr;align-items:start}
  .hero__grid{grid-template-columns:1fr;gap:0}
  .hero .cradle{margin-top:64px}
  .hero h1{max-width:none}
  .cradle{max-width:300px}
  .proof__row{flex-direction:column;align-items:flex-start;gap:18px}
  .proof__logos{gap:24px 28px;width:100%}
  .says,.notes{grid-template-columns:1fr}
  .say{border-top-width:1px}
}
@media (max-width:520px){
  .facts{grid-template-columns:1fr}
  .proof__row{gap:16px}
  .btn{padding:14px 20px;font-size:.7rem}
  .item{grid-template-columns:1fr;gap:6px}
  .item__p{text-align:left}
  .disc,.state{grid-template-columns:1fr;gap:8px}
  .cert{grid-template-columns:auto 1fr;gap:12px}
  .cert__t{grid-column:2;text-align:left;margin-top:4px}
}

/* ==========================================================================
   SEAM · COMPARISON · FIT · ANSWERS · STICKY CTA
   New sections carrying the repositioning. No new hues — the amber ration
   holds: active waypoint, the number that matters, the next action.
   ========================================================================== */

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- the seam diagram ------------------------------------------- */
.seam{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center;margin-top:clamp(40px,5vw,64px)}
.seam__grid{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--granite);background:var(--slate);
}
.seam__cell{padding:clamp(18px,2.6vw,30px);border:1px solid var(--granite);margin:-1px 0 0 -1px;min-height:104px}
.seam__cell .data{display:block;color:var(--bone);margin-bottom:8px}
.seam__cell p{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-2)}
.seam__x{position:absolute;background:var(--flare);opacity:.9}
.seam__x--a{left:50%;top:8%;width:1px;height:84%;transform:translateX(-.5px)}
.seam__x--b{top:50%;left:8%;height:1px;width:84%;transform:translateY(-.5px)}
.seam__x--c{display:none}
.seam__mid{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--rock);border:1px solid var(--flare);color:var(--flare);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  padding:9px 14px;white-space:nowrap;
}
.seam__list{display:grid;gap:18px}
.seam__list li{padding-left:20px;border-left:1px solid var(--granite);color:var(--ash);font-size:1.06rem;line-height:1.65}
.seam__list b{color:var(--bone);font-weight:600}
.seam__list i{font-style:italic;color:var(--bone)}
.seam__kick{
  margin-top:clamp(36px,4.5vw,56px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--granite);
  font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 600;
  font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.3;color:var(--bone);max-width:34ch;
}

/* ---------- comparison -------------------------------------------------- */
.cmp{margin-top:clamp(40px,5vw,64px);overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp__t{width:100%;min-width:720px;border-collapse:collapse;text-align:left}
.cmp__t th,.cmp__t td{padding:18px 20px;border-bottom:1px solid var(--granite);vertical-align:top;font-size:1.02rem;line-height:1.55}
.cmp__t thead th{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ash-2);font-weight:500;border-bottom-color:var(--granite-2);
}
.cmp__t tbody th{color:var(--bone);font-weight:600;white-space:nowrap}
.cmp__t td{color:var(--ash)}
.cmp__t tbody tr:hover td,.cmp__t tbody tr:hover th{background:var(--slate)}
.cmp__me th,.cmp__me td{background:rgba(242,163,12,.05);border-bottom-color:var(--granite-2)}
.cmp__t tbody tr.cmp__me th{color:var(--summit)}
.cmp__me b{color:var(--bone)}
.cmp__note{margin-top:16px;font-size:.95rem;line-height:1.6;color:var(--ash-2);max-width:66ch}
.cmp__honest{
  margin-top:clamp(32px,4vw,48px);padding:clamp(22px,3vw,32px);
  border:1px solid var(--granite);background:var(--slate);max-width:78ch;
}
.cmp__honest h3{font-size:var(--fs-h3);margin-bottom:12px;color:var(--bone)}
.cmp__honest p{color:var(--ash);font-size:1.06rem;line-height:1.62}

/* ---------- fit / not fit ---------------------------------------------- */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--granite);border:1px solid var(--granite);margin-top:clamp(40px,5vw,64px)}
.fit__col{background:var(--rock);padding:clamp(26px,3.4vw,44px)}
.fit__col h3{font-size:var(--fs-h3);margin-bottom:22px}
.fit__col ul{display:grid;gap:14px}
.fit__col li{position:relative;padding-left:26px;color:var(--ash);font-size:1.06rem;line-height:1.6}
.fit__col li::before{position:absolute;left:0;top:0;font-family:var(--mono);font-size:.8rem}
.fit__col--yes h3{color:var(--summit)}
.fit__col--yes li::before{content:"→";color:var(--summit)}
.fit__col--no{background:var(--slate)}
.fit__col--no h3{color:var(--ash)}
.fit__col--no li::before{content:"×";color:var(--ash-2)}

/* ---------- answers ----------------------------------------------------- */
.qa{margin-top:clamp(36px,4.5vw,56px);border-top:1px solid var(--paper-3);max-width:88ch}
.qa__i{border-bottom:1px solid var(--paper-3)}
.qa__i summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 0;cursor:pointer;list-style:none;min-height:44px;
}
.qa__i summary::-webkit-details-marker{display:none}
.qa__i summary h3{
  font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 600;
  font-size:clamp(1.14rem,1.6vw,1.36rem);line-height:1.3;color:var(--ink);
}
.qa__i summary:hover h3{color:var(--ink-2)}
.qa__m{position:relative;flex:0 0 14px;height:14px}
.qa__m::before,.qa__m::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1px;background:var(--ink);transition:transform .3s var(--ease)}
.qa__m::after{transform:rotate(90deg)}
.qa__i[open] .qa__m::after{transform:rotate(0)}
.qa__a{padding:0 0 26px;max-width:70ch}
.qa__a p{color:var(--ink-2);font-size:1.07rem;line-height:1.7}
.qa__a p+p{margin-top:12px}
.qa__a b{color:var(--ink);font-weight:600}
.qa__a a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--paper-3)}
.qa__a a:hover{text-decoration-color:var(--ink)}

/* ---------- sticky mobile CTA ------------------------------------------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  align-items:center;justify-content:space-between;gap:14px;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:rgba(18,16,13,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--granite);
  transform:translateY(101%);transition:transform .38s var(--ease);
}
.dock.is-up{transform:translateY(0)}
.dock__t{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ash);line-height:1.4}
.dock .btn{flex:0 0 auto;padding:13px 18px;font-size:.68rem}

@media (max-width:1080px){
  .seam{grid-template-columns:1fr;gap:36px}
}
@media (max-width:860px){
  .dock{display:flex}
  body{padding-bottom:0}
  .fit{grid-template-columns:1fr}
  .cmp__t{min-width:640px}
}
@media (max-width:520px){
  .seam__cell{padding:16px;min-height:88px}
  .seam__mid{font-size:.52rem;padding:7px 10px}
  .qa__i summary{padding:18px 0;gap:16px}
  .dock__t{font-size:.58rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .rise,.hero__eyebrow,.hero h1,.hero__lead,.hero__acts,.hero__note,.cradle{opacity:1 !important;transform:none !important;animation:none !important}
}

/* ==========================================================================
   SUBPAGES — chrome
   Interior pages trade the elevation rail for the thin progress bar; pages
   committed to the paper zone declare it on <body> and the chrome holds.
   ========================================================================== */
.page--sub{--rail:0px}
.page--sub .rail{display:none}
.page--sub .bar{display:block}
body.page--sub.is-light{background:var(--paper);color:var(--ink)}
.page--sub.is-light .bar{background:var(--paper-3)}
.page--sub.is-light .masthead.is-stuck{background:rgba(239,236,228,.92);border-bottom-color:var(--paper-3)}

/* breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;gap:8px 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-2);margin-bottom:clamp(20px,3vw,30px)}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"/";margin:0 10px;color:var(--granite-2)}
.crumbs a{color:var(--ash)}
.crumbs a:hover{color:var(--summit)}
[data-zone="light"] .crumbs{color:var(--ink-2)}
[data-zone="light"] .crumbs li+li::before{color:var(--paper-3)}
[data-zone="light"] .crumbs a{color:var(--ink-2)}
[data-zone="light"] .crumbs a:hover{color:#8A5A00}

/* ---------- page hero --------------------------------------------------- */
.ph{position:relative;overflow:hidden;padding-top:clamp(118px,15vh,176px);padding-bottom:clamp(46px,6vw,84px)}
.ph--rule{border-bottom:1px solid var(--granite)}
[data-zone="light"].ph--rule,.ph--rule[data-zone="light"]{border-bottom-color:var(--paper-3)}
.kicker{display:flex;align-items:center;gap:12px;color:var(--ash);margin-bottom:24px}
.kicker::before{content:"";width:34px;height:1px;background:var(--summit)}
[data-zone="light"] .kicker{color:var(--ink-2)}
.ph h1{font-size:clamp(2.05rem,4.7vw,4rem);max-width:18ch}
.ph .lead{margin-top:26px}
.ph__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.ph__note{display:flex;align-items:center;gap:12px;color:var(--ash-2);margin-top:26px}
.ph__note::before{content:"";width:22px;height:1px;background:var(--granite-2)}
.ph__grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(34px,5vw,80px);align-items:start}

/* load sequence for interior heroes */
.ph .crumbs,.ph .kicker,.ph h1,.ph .lead,.ph__acts,.ph__note,.ph .spec{animation:rise-in .9s var(--ease) both}
.ph h1{animation-delay:.08s}
.ph .lead{animation-delay:.16s}
.ph__acts{animation-delay:.26s}
.ph__note{animation-delay:.34s}
.ph .spec{animation-delay:.2s}

/* spec card — the engagement, read like an instrument panel */
.spec{border:1px solid var(--granite);background:var(--slate);padding:clamp(22px,2.8vw,32px)}
.spec__t{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--summit);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.spec__t::after{content:"";flex:1;height:1px;background:var(--granite)}
.spec dl{display:flex;flex-direction:column}
.spec .row{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--granite)}
.spec .row:last-child{border-bottom:0}
.spec dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-2);white-space:nowrap}
.spec dd{color:var(--bone);font-size:1.02rem;text-align:right;line-height:1.5}
.spec dd .num{color:var(--summit)}
.spec__foot{margin-top:18px;font-size:.95rem;color:var(--ash-2);line-height:1.6}

/* ---------- verdict box (comparison pages) ------------------------------ */
.verdict{border-left:2px solid var(--summit);background:var(--slate);padding:clamp(24px,3.2vw,40px);max-width:78ch}
.verdict .data{color:var(--summit);display:block;margin-bottom:14px}
.verdict p{font-family:var(--display);font-variation-settings:"wdth" 103,"wght" 600;font-size:clamp(1.24rem,2.3vw,1.78rem);line-height:1.35;letter-spacing:-.012em;color:var(--bone)}
.verdict p+p{margin-top:14px}

/* ---------- prose (guides, definitional pages) -------------------------- */
.prose{max-width:70ch}
.prose>*+*{margin-top:1.1em}
.prose p{color:var(--ink-2);line-height:1.72;font-size:1.08rem}
.prose strong{color:var(--ink);font-weight:600}
.prose h2{font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 700;text-transform:uppercase;letter-spacing:.004em;font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.1;color:var(--ink);margin-top:2.4em;scroll-margin-top:96px}
.prose h3{font-family:var(--display);font-variation-settings:"wdth" 102,"wght" 650;font-size:1.24rem;line-height:1.3;color:var(--ink);margin-top:2em}
.prose ul,.prose ol{padding-left:1.3em;color:var(--ink-2);display:flex;flex-direction:column;gap:.6em;font-size:1.08rem;line-height:1.7}
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:22px}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:#8A5A00}
.prose ol{list-style:decimal}
.prose ol li::marker{font-family:var(--mono);font-size:.85em;color:var(--ink-2)}
.prose li b,.prose li strong{color:var(--ink)}
.prose blockquote{border-left:2px solid var(--summit);background:var(--paper-2);padding:20px 26px;color:var(--ink)}
.prose blockquote p{color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--paper-3);margin:2.4em 0}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--paper-3)}
.prose a:hover{text-decoration-color:#8A5A00}

/* the direct answer, stated before the argument — built for extraction */
.ans{border:1px solid var(--paper-3);border-left:2px solid var(--summit);background:var(--paper-2);padding:clamp(20px,2.6vw,30px);margin:1.6em 0}
.ans p{color:var(--ink);font-size:1.15rem;line-height:1.65}
.ans p+p{margin-top:.7em}
.ans .data{display:block;color:#8A5A00;margin-bottom:10px}

/* waypoints — on-page contents for long reads */
.toc{border:1px solid var(--paper-3);background:var(--paper-2);padding:clamp(20px,2.6vw,28px);margin:2em 0;max-width:52ch}
.toc .data{display:block;color:var(--ink-2);margin-bottom:14px}
.toc ol{display:flex;flex-direction:column;gap:9px;list-style:none;padding:0}
.toc li{display:flex;gap:12px;align-items:baseline}
.toc li i{font-style:normal;font-family:var(--mono);font-size:.7rem;color:#8A5A00;font-variant-numeric:tabular-nums}
.toc a{color:var(--ink);font-size:1.02rem;text-decoration:none;border-bottom:1px solid var(--paper-3)}
.toc a:hover{border-bottom-color:#8A5A00}

/* ---------- tables on paper --------------------------------------------- */
[data-zone="light"] .cmp__t th,[data-zone="light"] .cmp__t td{border-bottom-color:var(--paper-3)}
[data-zone="light"] .cmp__t thead th{color:var(--ink-2);border-bottom-color:var(--paper-3)}
[data-zone="light"] .cmp__t tbody th{color:var(--ink)}
[data-zone="light"] .cmp__t td{color:var(--ink-2)}
[data-zone="light"] .cmp__t tbody tr:hover td,[data-zone="light"] .cmp__t tbody tr:hover th{background:var(--paper-2)}
[data-zone="light"] .cmp__t tbody tr.cmp__me th{color:#8A5A00}
[data-zone="light"] .cmp__me th,[data-zone="light"] .cmp__me td{background:rgba(154,102,6,.06)}
[data-zone="light"] .cmp__me b{color:var(--ink)}
[data-zone="light"] .cmp__note{color:var(--ink-2)}

/* ---------- answers on rock ---------------------------------------------- */
.qa--dark{border-top-color:var(--granite)}
.qa--dark .qa__i{border-bottom-color:var(--granite)}
.qa--dark .qa__i summary h3{color:var(--bone)}
.qa--dark .qa__i summary:hover h3{color:var(--ash)}
.qa--dark .qa__m::before,.qa--dark .qa__m::after{background:var(--bone)}
.qa--dark .qa__a p{color:var(--ash)}
.qa--dark .qa__a b{color:var(--bone)}
.qa--dark .qa__a a{color:var(--bone);text-decoration-color:var(--granite-2)}
.qa--dark .qa__a a:hover{text-decoration-color:var(--summit)}

/* grouped FAQ headers */
.qa__group{margin-top:clamp(40px,5vw,60px)}
.qa__group:first-of-type{margin-top:0}
.qa__group>.data{display:block;margin-bottom:6px;color:#8A5A00}
.qa--dark .qa__group>.data{color:var(--summit)}

/* ---------- principles / numbered creed --------------------------------- */
.creed{display:flex;flex-direction:column;max-width:78ch}
.creed li{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,28px);padding:22px 0;border-top:1px solid var(--paper-3)}
.creed li:last-child{border-bottom:1px solid var(--paper-3)}
.creed i{font-style:normal;font-family:var(--mono);font-size:.75rem;color:#8A5A00;padding-top:5px;font-variant-numeric:tabular-nums}
.creed h3{font-size:1.16rem;font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 700;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);margin-bottom:6px}
.creed p{color:var(--ink-2);font-size:1.06rem;line-height:1.65;max-width:60ch}

/* ---------- forms -------------------------------------------------------- */
.form{display:grid;gap:20px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:9px}
.field label{font-family:var(--mono);font-size:.69rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ash)}
.field label small{color:var(--ash-2);text-transform:none;letter-spacing:.06em;margin-left:6px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:.98rem;color:var(--bone);
  background:var(--slate);border:1px solid var(--granite-2);padding:14px 16px;border-radius:0;
  transition:border-color .25s var(--ease);
}
.field textarea{min-height:132px;resize:vertical;line-height:1.55}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ash) 50%),linear-gradient(135deg,var(--ash) 50%,transparent 50%);background-position:calc(100% - 21px) 50%,calc(100% - 16px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:44px}
.field input::placeholder,.field textarea::placeholder{color:var(--ash-2)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--summit)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--summit);outline-offset:2px}
.form__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.form__hint{font-size:.95rem;color:var(--ash-2);line-height:1.6}
.form__hint a{color:var(--ash);text-decoration:underline;text-underline-offset:3px}
.form__hint a:hover{color:var(--summit)}

/* the call, step by step */
.brief{display:flex;flex-direction:column}
.brief li{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:20px 0;border-top:1px solid var(--granite)}
.brief li:last-child{border-bottom:1px solid var(--granite)}
.brief i{font-style:normal;font-family:var(--mono);font-size:.72rem;color:var(--summit);padding-top:4px}
.brief h3{font-size:1.12rem;color:var(--bone);font-family:var(--body);font-weight:600;margin-bottom:6px}
.brief p{color:var(--ash);font-size:1.04rem;line-height:1.65}

/* ---------- closing CTA band --------------------------------------------- */
.close{position:relative;overflow:hidden;background:var(--rock);color:var(--bone);border-top:1px solid var(--granite);padding-block:clamp(76px,10vw,140px)}
.close .kicker{color:var(--ash)}
.close h2{font-size:clamp(1.8rem,4vw,3.1rem);max-width:17ch}
.close .lead{margin-top:20px;color:var(--ash)}
.close__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.close__meta{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:24px}
.close__meta li{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ash-2);display:flex;align-items:center;gap:8px}
.close__meta li::before{content:"";width:4px;height:4px;background:var(--summit)}

/* ---------- sitemap footer ----------------------------------------------- */
.foot{background:var(--rock);color:var(--bone)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px);padding-bottom:clamp(34px,4vw,52px)}
.foot__brand{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.foot__brand .foot__b{margin:0}
.foot__id{color:var(--ash-2);font-size:.96rem;line-height:1.7;max-width:36ch}
.foot__mail{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--bone);border-bottom:1px solid var(--granite-2);padding-bottom:2px;transition:color .25s,border-color .25s}
.foot__mail:hover{color:var(--summit);border-color:var(--summit)}
.foot__col .foot__h{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash-2);font-weight:500;margin-bottom:16px}
.foot__col ul{display:flex;flex-direction:column;gap:10px}
.foot__col a{color:var(--ash);font-size:.99rem;transition:color .25s}
.foot__col a:hover{color:var(--summit)}
.foot__base{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;border-top:1px solid var(--granite);padding-top:26px}

/* ---------- responsive additions ----------------------------------------- */
@media (max-width:1080px){
  .ph__grid{grid-template-columns:1fr;gap:40px}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .form__row{grid-template-columns:1fr}
}
@media (max-width:520px){
  .foot__grid{grid-template-columns:1fr;gap:30px}
  .spec .row{grid-template-columns:1fr;gap:4px}
  .spec dd{text-align:left}
}

/* ---------- late additions: nav state, notes on paper ------------------- */
.mast__nav a[aria-current="page"]{color:var(--bone)}
body.is-light .mast__nav a[aria-current="page"]{color:var(--ink)}
[data-zone="light"] .note h3{color:var(--ink)}
[data-zone="light"] .note p{color:var(--ink-2)}
[data-zone="light"] .note__k{color:var(--ink-2)}
[data-zone="light"] .note__go{color:#8A5A00}
[data-zone="light"] .note__pic{background:var(--paper-2);border-color:var(--paper-3)}
[data-zone="light"] .states .state{border-color:var(--paper-3)}
[data-zone="light"] .state p{color:var(--ink)}
[data-zone="light"] .state__i{color:var(--ink-2)}
[data-zone="light"] .brief li{border-color:var(--paper-3)}
[data-zone="light"] .brief h3{color:var(--ink)}
[data-zone="light"] .brief p{color:var(--ink-2)}
[data-zone="light"] .brief i{color:#8A5A00}
[data-zone="light"] .vid{border-top-color:var(--paper-3)}
.close .close__meta li{color:var(--ash-2)}

/* ---- component layer II -----------------------------------------------
   Engagement tiers, the video testimonial wall, full-bleed photography,
   the scheduling embed and the mentee message wall.
   ---------------------------------------------------------------------- */

/* ---------- engagement tiers -------------------------------------------- */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--granite);
  border:1px solid var(--granite);margin-top:clamp(40px,5vw,64px)}
.tier{background:var(--rock);padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;
  transition:background .4s var(--ease)}
.tier:hover{background:var(--crag)}
.tier__k{color:var(--ash-2);margin-bottom:16px}
.tier h3{font-size:clamp(1.15rem,1.6vw,1.42rem);margin-bottom:16px;color:var(--bone)}
.tier__p{font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 700;
  font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1;color:var(--summit);margin-bottom:18px}
.tier__p small{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ash-2);margin-top:8px;font-variation-settings:normal;font-weight:400}
.tier__d{color:var(--ash);font-size:1.02rem;line-height:1.6;margin-bottom:20px}
.tier__l{display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.tier__l li{position:relative;padding-left:18px;color:var(--ash-2);font-size:.95rem;line-height:1.5}
.tier__l li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--summit)}
.tier__go{margin-top:auto;font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--summit);display:inline-flex;align-items:center;gap:8px}
.tier__go:hover .btn__x{transform:translateX(4px)}
.tier--flag{background:var(--slate);box-shadow:inset 0 2px 0 var(--summit)}
.tier--flag:hover{background:var(--crag)}

/* ---------- video testimonials ------------------------------------------
   Posters until clicked, then the YouTube player mounts with its own chrome
   switched off and this control bar drives it. Landscape and vertical clips
   each keep their native shape rather than being letterboxed to match.
   ---------------------------------------------------------------------- */
.vwall{display:grid;gap:clamp(18px,2.4vw,30px);margin-top:clamp(30px,3.8vw,48px);
  list-style:none;padding:0;align-items:start}
.vwall--wide{grid-template-columns:repeat(3,1fr)}
.vwall--tall{grid-template-columns:repeat(5,1fr);margin-top:clamp(16px,2vw,24px)}
.vwall__note{color:var(--ink-2);margin-top:clamp(30px,3.8vw,46px);display:flex;align-items:center;gap:12px}
.vwall__note::after{content:"";flex:1;height:1px;background:var(--paper-3)}
.vcard{display:flex;flex-direction:column;gap:11px;min-width:0}

.vplayer{position:relative;overflow:hidden;background:var(--crag);
  border:1px solid var(--granite);aspect-ratio:16/9}
.vcard--tall .vplayer{aspect-ratio:9/16}
[data-zone="light"] .vplayer{background:var(--paper-3);border-color:var(--paper-3)}

.vplayer__poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  background:none;cursor:pointer;display:block}
.vplayer__poster[hidden],.vplayer__bar[hidden]{display:none}
.vplayer__poster img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease),filter .4s var(--ease)}
.vplayer__poster::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,16,13,.1) 0%,rgba(18,16,13,.42) 100%);
  transition:opacity .35s var(--ease)}
.vplayer__poster:hover img{transform:scale(1.035)}
.vplayer__poster:hover::after{opacity:.7}
.vplayer__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:54px;height:54px;border-radius:50%;border:1px solid var(--summit);
  background:rgba(18,16,13,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:background .3s var(--ease),transform .3s var(--ease)}
.vplayer__play::after{content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--summit)}
.vplayer__poster:hover .vplayer__play{background:rgba(242,163,12,.22);transform:translate(-50%,-50%) scale(1.08)}
.vplayer__poster:focus-visible{outline:2px solid var(--summit);outline-offset:-3px}

.vplayer__stage{position:absolute;inset:0}
.vplayer__stage iframe{width:100%;height:100%;border:0;display:block;pointer-events:none}
.vplayer.is-live .vplayer__stage{cursor:pointer}

.vplayer__bar{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:linear-gradient(180deg,rgba(18,16,13,0) 0%,rgba(18,16,13,.88) 60%);
  opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.vplayer.is-live:hover .vplayer__bar,
.vplayer.is-live:focus-within .vplayer__bar,
.vplayer.is-live:not(.is-playing) .vplayer__bar{opacity:1;transform:translateY(0)}
.vplayer__pp,.vplayer__mute{flex:0 0 auto;width:22px;height:22px;padding:0;border:0;
  background:none;cursor:pointer;position:relative;color:var(--bone)}
.vplayer__pp::before,.vplayer__pp::after{content:"";position:absolute;top:4px;height:14px;
  background:currentColor;transition:all .2s var(--ease)}
.vplayer__pp::before{left:5px;width:4px}
.vplayer__pp::after{left:12px;width:4px}
.vplayer:not(.is-playing) .vplayer__pp::before{left:6px;width:0;height:0;top:3px;background:none;
  border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent currentColor}
.vplayer:not(.is-playing) .vplayer__pp::after{display:none}
.vplayer__track{flex:1;height:3px;background:rgba(233,229,220,.26);cursor:pointer;position:relative}
.vplayer__track::after{content:"";position:absolute;inset:-8px 0}
.vplayer__fill{display:block;height:100%;width:0;background:var(--summit)}
.vplayer__t{flex:0 0 auto;font-family:var(--mono);font-size:.64rem;color:var(--bone);letter-spacing:.04em}
.vplayer__mute::before{content:"";position:absolute;left:4px;top:6px;width:6px;height:10px;
  background:currentColor;clip-path:polygon(0 25%,45% 25%,100% 0,100% 100%,45% 75%,0 75%)}
.vplayer__mute::after{content:"";position:absolute;right:2px;top:4px;width:9px;height:14px;
  border-right:2px solid currentColor;border-radius:0 50% 50% 0;opacity:.85}
.vplayer.is-muted .vplayer__mute::after{opacity:0}
.vplayer__pp:focus-visible,.vplayer__mute:focus-visible{outline:2px solid var(--summit);outline-offset:2px}

.vcard__n{font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 700;
  text-transform:uppercase;font-size:.95rem;letter-spacing:.02em;color:var(--bone);line-height:1.2}
[data-zone="light"] .vcard__n{color:var(--ink)}
.vcard__r{font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ash-2);line-height:1.5}
[data-zone="light"] .vcard__r{color:var(--ink-2)}


/* homepage arrangement: one landscape testimonial on its own line, then the
   three vertical ones beneath. Both rows are held to the same width, which
   lands them within 3px of the same height and reads as one deliberate block
   rather than two unrelated grids. */
.vwall--solo,.vwall--trio{max-width:780px;gap:22px}
.vwall--solo{grid-template-columns:1fr}
.vwall--trio{grid-template-columns:repeat(3,1fr);margin-top:22px}

@media (max-width:820px){
  .vwall--solo,.vwall--trio{max-width:none}
}
@media (max-width:640px){
  .vwall--trio{grid-template-columns:1fr 1fr}
}

@media (max-width:1080px){
  .vwall--tall{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .vwall--wide{grid-template-columns:1fr 1fr}
  .vwall--tall{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .vwall--wide,.vwall--tall{grid-template-columns:1fr}
  .vplayer__play{width:46px;height:46px}
}

/* ---------- mentee message wall ------------------------------------------
   One long private thread on the left, four public posts stacked on the right.
   CSS columns stranded the shortest card in a half-empty third column, so the
   two groups are placed explicitly instead. They happen to balance to within
   three percent, and the split matches what the messages actually are.
   ---------------------------------------------------------------------- */
.mwall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);align-items:start;
  margin-top:clamp(36px,4.5vw,56px);list-style:none;padding:0}
.mwall__col{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);
  list-style:none;padding:0;margin:0;min-width:0}
.mwall__col--thread{align-self:start}
.mcard{border:1px solid var(--paper-3);background:var(--paper-2);padding:10px;
  transition:border-color .3s var(--ease);min-width:0}
.mcard:hover{border-color:#B0740A}
.mcard img{width:100%;height:auto;display:block}
[data-zone="light"] .mcard{background:#fff}

/* ---------- full-bleed photography --------------------------------------
   The band is shorter than the photograph on purpose. The image is taller
   than its frame and pans as the section crosses the viewport, so a standing
   figure is revealed head to feet instead of being cropped at the neck.
   ---------------------------------------------------------------------- */
.pband{position:relative;margin:0;overflow:hidden;height:clamp(300px,42vw,560px)}
.pband--tall{height:clamp(360px,52vw,660px)}
.pband img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% var(--focus,45%);
}
/* upgraded by script: the image becomes taller than its frame and pans */
.pband.is-parallax img{
  inset:auto;left:0;top:0;height:auto;min-height:100%;object-fit:fill;
  transform:translate3d(0,0,0);will-change:transform;
}
.pband::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,16,13,.34) 0%,rgba(18,16,13,0) 34%,rgba(18,16,13,.55) 100%)}
.pband__c{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(18px,3vw,32px) var(--pad);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone);max-width:var(--maxw);margin-inline:auto}

/* paired figures */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.duo__f{margin:0}
.duo__f img{width:100%;height:auto;border:1px solid var(--paper-3)}

/* ---------- scheduling embed -------------------------------------------- */
.bookgrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(30px,4vw,64px);align-items:start}
.cal{border:1px solid var(--granite);background:var(--slate);padding:clamp(14px,2vw,22px)}
.cal__t{color:var(--summit);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.cal__t::after{content:"";flex:1;height:1px;background:var(--granite)}
.cal__frame{background:var(--bone);min-height:700px}
.cal__frame iframe{width:100%;min-height:700px;border:0;overflow:hidden;display:block}
.cal__f{margin-top:14px;font-size:.92rem;color:var(--ash-2);line-height:1.6}
.cal__f a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.cal__f a:hover{color:var(--summit)}

/* ---------- footer social row ------------------------------------------- */
.foot__base .foot__s{display:flex;gap:clamp(16px,2.4vw,28px);flex-wrap:wrap}
.foot__base .foot__s a{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash);transition:color .25s}
.foot__base .foot__s a:hover{color:var(--summit)}

/* ---------- responsive -------------------------------------------------- */
@media (max-width:1080px){
  .tiers{grid-template-columns:1fr 1fr}
  .bookgrid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:860px){
  .vwall--wide,.vwall--tall{grid-template-columns:1fr 1fr}
  .duo{grid-template-columns:1fr}
}
@media (max-width:560px){
  .tiers{grid-template-columns:1fr}
  .vwall--wide,.vwall--tall{grid-template-columns:1fr}
  .pband{height:clamp(200px,56vw,300px)}
  .cal__frame,.cal__frame iframe{min-height:640px}
}

/* photography: the personal work stays in colour on purpose. Only the
   atmospheric backdrops (ridge, summit, cloud break) carry a treatment. */
.op__fig img,.duo__f img,.teach__pic img,.pband img{filter:none}
.op__fig img,.duo__f img{border:1px solid var(--paper-3)}
[data-zone="light"] .op__fig img{border-color:var(--paper-3)}
.band:not([data-zone="light"]) .op__fig img{border-color:var(--granite)}

/* parallax bands hold still when motion is not wanted, parked on the subject */
@media (prefers-reduced-motion:reduce){
  .pband.is-parallax img{inset:0;height:100%;object-fit:cover;transform:none !important}
}

/* credential links in the About page certifications list */
.teach__creds dd a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:var(--paper-3);transition:color .2s var(--ease),text-decoration-color .2s var(--ease)}
.teach__creds dd a:hover{color:#8A5A00;text-decoration-color:#8A5A00}

/* ==========================================================================
   CREDENTIALS
   Every certification links out to its issuer. The homepage keeps a compact
   row per institution that expands to the full list; the About page shows
   the whole record open, because that page is the deep dive.
   ========================================================================== */

/* ---------- homepage: expandable rows ----------------------------------- */
.cert{display:block;padding:0;border-bottom:1px solid var(--paper-3)}
.cert__d summary{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:baseline;
  padding:15px 0;cursor:pointer;list-style:none;
}
.cert__d summary::-webkit-details-marker{display:none}
.cert__d summary:hover .cert__b{color:#8A5A00}
.cert__d summary:hover .cert__t{color:var(--ink)}
.cert__b{transition:color .2s var(--ease)}
.cert__t{transition:color .2s var(--ease)}
.cert__x{display:inline-block;width:9px;height:9px;position:relative;margin-left:2px}
.cert__x::before,.cert__x::after{content:"";position:absolute;left:0;top:4px;width:9px;height:1px;background:currentColor;transition:transform .3s var(--ease)}
.cert__x::after{transform:rotate(90deg)}
.cert__d[open] .cert__x::after{transform:rotate(0)}
.cert__d[open] summary .cert__b{color:var(--ink)}

.credlist{display:flex;flex-direction:column;gap:1px;padding:0 0 18px;margin:0 0 0 calc(2.1ch + 16px);list-style:none}
.credlist li{margin:0}
.credlist a{
  display:block;padding:7px 0 7px 18px;position:relative;
  color:var(--ink-2);font-size:.97rem;line-height:1.45;
  text-decoration:none;transition:color .2s var(--ease),padding-left .2s var(--ease);
}
.credlist a::before{
  content:"";position:absolute;left:0;top:.95em;width:9px;height:1px;
  background:var(--paper-3);transition:background .2s var(--ease),width .2s var(--ease);
}
.credlist a::after{
  content:"";position:absolute;right:0;top:.72em;width:11px;height:11px;
  background-color:#8A5A00;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 16 8'/%3E%3Cpath d='M9.5 8H16v6.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 16 8'/%3E%3Cpath d='M9.5 8H16v6.5'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  opacity:0;transform:translateX(-4px);
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.credlist a:hover{color:var(--ink);padding-left:24px}
.credlist a:hover::before{background:#8A5A00;width:14px}
.credlist a:hover::after{opacity:1;transform:translateX(0)}
.credlist a:focus-visible{outline:2px solid var(--summit);outline-offset:2px}

/* ---------- About page: the full record --------------------------------- */
.credwall{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,3.6vw,52px) clamp(30px,4vw,64px);
  margin-top:clamp(38px,4.6vw,60px);align-items:start;
}
.credgroup{break-inside:avoid}
.credgroup__h{
  font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 700;
  text-transform:uppercase;letter-spacing:.02em;font-size:1.06rem;color:var(--ink);
  display:flex;align-items:baseline;gap:10px;
  padding-bottom:10px;border-bottom:1px solid var(--ink);
}
.credgroup__n{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:#8A5A00;
  font-variation-settings:normal;font-weight:500;margin-left:auto;
}
.credgroup__s{color:var(--ink-2);margin:10px 0 4px;font-size:.66rem}
.credwall .credlist{margin-left:0;padding-bottom:0}

/* ---------- the no-badge block ------------------------------------------ */
.udemy{
  margin-top:clamp(34px,4.2vw,56px);padding:clamp(24px,3vw,36px);
  background:var(--paper-2);border-left:2px solid var(--summit);
}
.udemy__k{color:#8A5A00;margin-bottom:12px}
.udemy__t{
  font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 700;
  font-size:clamp(1.25rem,2.2vw,1.72rem);line-height:1.15;color:var(--ink);margin-bottom:14px;
}
.udemy__p{color:var(--ink-2);font-size:1.04rem;line-height:1.66;max-width:62ch}
.udemy__p b{color:var(--ink);font-weight:600}
.udemy__go{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:#8A5A00;border-bottom:1px solid transparent;transition:border-color .25s var(--ease)
}
.udemy__go:hover{border-bottom-color:#8A5A00}
.udemy__go:hover .btn__x{transform:translateX(4px)}

@media (max-width:860px){
  .credwall{grid-template-columns:1fr}
  .credlist{margin-left:0}
}
@media (max-width:520px){
  .cert__d summary{grid-template-columns:auto 1fr;gap:12px}
  .cert__d summary .cert__t{grid-column:2;text-align:left;margin-top:4px}
}

/* ==========================================================================
   PLATFORM STRIP + RICH QUALIFICATION COLUMNS
   ========================================================================== */

/* ---------- platforms and systems --------------------------------------- */
.stack{display:flex;align-items:center;gap:clamp(20px,3.2vw,44px);flex-wrap:wrap;flex:1;list-style:none;padding:0;margin:0}
.stack__i{display:inline-flex;align-items:center;gap:9px;color:var(--ash-2);
  opacity:.72;transition:opacity .3s var(--ease),color .3s var(--ease)}
.stack__i:hover{opacity:1;color:var(--bone)}
.stack__g{width:19px;height:19px;flex:0 0 19px;fill:currentColor;display:block}
.stack__n{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap;line-height:1}
.stack__g--ghl{
  background-color:currentColor;
  -webkit-mask-image:url("../img/mk-gohighlevel.png");mask-image:url("../img/mk-gohighlevel.png");
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
[data-zone="light"] .stack__i{color:var(--ink-2)}
[data-zone="light"] .stack__i:hover{color:var(--ink)}

/* the client logos now live on the results page, where the proof is */
.clients{display:flex;align-items:center;gap:clamp(24px,4vw,56px);flex-wrap:wrap;
  margin-top:clamp(28px,3.4vw,44px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--paper-3)}
.clients img{height:clamp(24px,2.6vw,34px);width:auto;opacity:.55;
  filter:grayscale(1) invert(1) contrast(.9);transition:opacity .3s var(--ease)}
.clients img:hover{opacity:.9}

/* ---------- qualification columns with a lead line per point ------------- */
.fit--rich .fit__col ul{gap:22px}
.fit--rich .fit__col li{padding-left:28px}
.fit--rich .fit__col li::before{top:.05em;font-size:1rem}
.fit--rich .fit__col li b{display:block;color:var(--bone);font-weight:600;
  font-size:1.04rem;line-height:1.4;margin-bottom:5px}
.fit--rich .fit__col li span{display:block;color:var(--ash-2);font-size:.98rem;line-height:1.6}
.fit--rich .fit__col--no li b{color:var(--ash)}
[data-zone="light"] .fit--rich .fit__col li b{color:var(--ink)}
[data-zone="light"] .fit--rich .fit__col li span{color:var(--ink-2)}

/* the platform strip gets its label on its own line so the eight marks sit
   in a single row rather than wrapping around a long eyebrow */
.proof__row--stack{flex-direction:column;align-items:stretch;gap:18px}
.proof__row--stack .proof__tag{flex:0 0 auto}
.proof__row--stack .stack{justify-content:space-between;width:100%;gap:16px 20px}
@media (max-width:900px){
  .proof__row--stack .stack{justify-content:flex-start;gap:16px clamp(18px,3.4vw,32px)}
}

/* the closing line of every page: an aphorism, so it gets quotation
   treatment rather than the mono-caps used for labels */
.foot__q{max-width:46ch;text-align:right;color:var(--ash);font-size:.95rem;line-height:1.5;text-wrap:balance}
.foot__q cite{display:block;margin-top:7px;font-style:normal;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-2)}
@media (max-width:720px){
  .foot__q{text-align:left;max-width:none}
}

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

/* ==========================================================================
   MOBILE MENU
   The small-screen header used to show a Book a call button while hiding the
   navigation, which duplicated the sticky dock's CTA and left no way to reach
   the rest of the site. Now the header carries a menu control, and each
   destination explains itself rather than relying on a one-word label.
   ========================================================================== */
.burger{
  display:none;position:relative;width:44px;height:44px;flex:0 0 44px;
  align-items:center;justify-content:center;background:none;border:0;cursor:pointer;
  color:var(--bone);margin-right:-10px;
}
body.is-light .burger{color:var(--ink)}
.burger__b,.burger__b::before,.burger__b::after{
  position:absolute;left:50%;width:22px;height:1.5px;background:currentColor;
  transform:translateX(-50%);transition:transform var(--d-ui) var(--spring-stiff),
                                        opacity var(--d-micro) linear;
}
.burger__b{top:50%;margin-top:-.75px}
.burger__b::before{content:"";top:-7px;left:0;transform:none}
.burger__b::after{content:"";top:7px;left:0;transform:none}
.burger[aria-expanded="true"] .burger__b{background:transparent}
.burger[aria-expanded="true"] .burger__b::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__b::after{transform:translateY(-7px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:50;overflow-y:auto;overscroll-behavior:contain;
  background:var(--rock);
  padding:calc(env(safe-area-inset-top) + 74px) var(--pad) calc(env(safe-area-inset-bottom) + 34px);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity var(--d-ui) var(--spring-gentle),transform var(--d-ui) var(--spring-gentle);
}
.menu[hidden]{display:none}
.menu.is-open{opacity:1;transform:none;pointer-events:auto}
.menu__in{max-width:var(--maxw);margin-inline:auto}

.menu__l{display:flex;flex-direction:column;list-style:none;padding:0;margin:0}
.menu__l li{border-top:1px solid var(--granite)}
.menu__l li:last-child{border-bottom:1px solid var(--granite)}
.menu__l a{display:block;padding:18px 0}
.menu__l b{
  display:block;font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 700;
  text-transform:uppercase;letter-spacing:.02em;font-size:1.18rem;line-height:1.15;
  color:var(--bone);margin-bottom:5px;transition:color var(--d-micro) var(--spring-stiff);
}
.menu__l span{display:block;color:var(--ash-2);font-size:.98rem;line-height:1.5;max-width:44ch}
.menu__l a:hover b,.menu__l a:focus-visible b{color:var(--summit)}
.menu__l a[aria-current="page"] b{color:var(--summit)}

.menu__go{margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.menu__go .btn{width:100%;justify-content:center}
.menu__note{color:var(--ash-2)}

.menu__sec{
  margin-top:30px;padding-top:22px;border-top:1px solid var(--granite);
  display:flex;flex-wrap:wrap;gap:12px 22px;
}
.menu__sec a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ash);transition:color var(--d-micro) var(--spring-stiff);
}
.menu__sec a:hover{color:var(--summit)}

body.is-menu{overflow:hidden}
body.is-menu .dock{transform:translateY(101%)}

@media (max-width:860px){
  .burger{display:inline-flex}
  .mast__nav{display:none}
  /* the masthead stays legible over the open panel */
  body.is-menu .masthead{background:var(--rock);border-bottom-color:var(--granite)}
  body.is-menu.is-light .masthead{background:var(--rock)}
  body.is-menu.is-light .brand .mark--d{display:block}
  body.is-menu.is-light .brand .mark--l{display:none}
  body.is-menu.is-light .brand,body.is-menu.is-light .burger{color:var(--bone)}
}
@media (min-width:861px){
  .menu{display:none !important}
}
@media (prefers-reduced-motion:reduce){
  .menu{transition:none}
  .burger__b,.burger__b::before,.burger__b::after{transition:none}
}

/* ---------- desktop nav hints -------------------------------------------
   The same descriptions the mobile menu carries, revealed on hover and on
   keyboard focus. Pointer devices only: on a touch screen there is no hover
   state to enter, and the mobile menu already shows the text outright.
   ---------------------------------------------------------------------- */
.nav__d{display:none}

@media (hover:hover) and (min-width:861px){
  .mast__nav a:not(.mast__cta){position:relative}
  .nav__d{
    display:block;position:absolute;top:calc(100% + 16px);left:0;
    width:max-content;max-width:264px;z-index:2;
    padding:12px 14px;
    background:var(--slate);border:1px solid var(--granite);
    font-family:var(--body);font-size:.9rem;line-height:1.45;letter-spacing:0;
    text-transform:none;color:var(--ash);text-align:left;
    opacity:0;transform:translateY(-5px);pointer-events:none;
    transition:opacity var(--d-ui) var(--spring-gentle),
               transform var(--d-ui) var(--spring-gentle);
  }
  /* a small notch tying the card to the link it belongs to */
  .nav__d::before{
    content:"";position:absolute;top:-4px;left:15px;width:7px;height:7px;
    background:var(--slate);border-left:1px solid var(--granite);
    border-top:1px solid var(--granite);transform:rotate(45deg);
  }
  /* the rightmost items open leftward so they cannot leave the viewport */
  .mast__nav a:not(.mast__cta):nth-last-child(2) .nav__d,
  .mast__nav a:not(.mast__cta):nth-last-child(3) .nav__d{left:auto;right:0}
  .mast__nav a:not(.mast__cta):nth-last-child(2) .nav__d::before,
  .mast__nav a:not(.mast__cta):nth-last-child(3) .nav__d::before{left:auto;right:15px}

  .mast__nav a:hover .nav__d,
  .mast__nav a:focus-visible .nav__d{opacity:1;transform:none}

  /* the masthead inverts over the light bands, so the card follows */
  body.is-light .nav__d{background:var(--paper);border-color:var(--paper-3);color:var(--ink-2)}
  body.is-light .nav__d::before{background:var(--paper);border-color:var(--paper-3)}
}

@media (prefers-reduced-motion:reduce){
  .nav__d{transition:none}
}