/* House of Data - shared stylesheet for every page.
   Extracted from the original index.html so the home page and the program,
   placement, mentor and tools pages all render from one source. */

:root{
  --black:#0A0B0D;
  --black-2:#131519;
  --black-3:#1C1F24;
  --gold:#C9A227;
  --gold-hi:#E8CE7A;
  --gold-lo:#8A6D12;
  --silver:#ECEDEE;
  --steel:#9AA0A6;
  --line:rgba(236,237,238,.10);
  --line-2:rgba(236,237,238,.20);
  --paper:#F2F5F8;
  --paper-2:#FFFFFF;
  --ink:#0B0C0F;
  --ink-dim:#6B7076;
  --aqua:#8FA6B8;
  /* Semantic names. The gold-* names below are the originals, kept as
     aliases so existing markup keeps working after the cyan re-theme. */
  --brand:#C9A227;
  --brand-hi:#E8CE7A;
  --brand-lo:#8A6D12;
  --accent:#8FA6B8;
  --mint:#8FA6B8;                    /* alias of --aqua */
  --ink-2:rgba(236,237,238,.76);      /* body text on the dark sections */
  --shell:min(1200px,92vw);
  --r:16px;
  --gloss:radial-gradient(120% 90% at 30% 8%, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 34%, rgba(255,255,255,0) 62%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--black);color:var(--silver);
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:Archivo,system-ui,sans-serif;font-weight:800;line-height:1.03;letter-spacing:-.032em;margin:0}
h2{font-size:clamp(2rem,4.4vw,3.3rem)}
h3{font-size:1.3rem;letter-spacing:-.02em}
p{margin:0 0 1em}
.shell{width:var(--shell);margin-inline:auto;position:relative}
.mono{font-family:"IBM Plex Mono",monospace}

/* chrome / gold text */
/* Flat, not gradient. A headline that fades from white to grey and back is
   doing work the words should be doing, and it left the gold line with no
   contrast to win against. */
.chrome{color:#F2F4F6}
.au{color:#E8CE7A}

.tag{font-family:"IBM Plex Mono",monospace;font-size:.67rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 1rem;display:flex;align-items:center;gap:.75rem}
.tag::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.sec-lede{color:var(--steel);max-width:60ch;margin-top:1.1rem;font-size:1.03rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.88rem 1.5rem;border-radius:100px;font-family:Archivo,sans-serif;font-weight:700;font-size:.95rem;letter-spacing:-.01em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s,border-color .2s,color .2s}
.btn svg{width:16px;height:16px;flex:none}
/* Still gold, still the loudest thing on the page - but a halo that size
   made a second gold event out of the shadow. */
.btn-gold{color:#241C06;background-image:linear-gradient(180deg,#E6D6A4,#C9A227 48%,#A5811C);box-shadow:0 4px 14px -8px rgba(201,162,39,.42),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(201,162,39,.7),inset 0 1px 0 rgba(255,255,255,.7)}
.btn-glass{color:var(--silver);border-color:var(--line-2);background:rgba(236,237,238,.05);backdrop-filter:blur(6px)}
.btn-glass:hover{transform:translateY(-2px);border-color:var(--gold);color:var(--gold)}
.btn-ink{background:var(--ink);color:var(--silver)}
.btn-ink:hover{transform:translateY(-2px)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ================= HEADER ================= */
.top{position:sticky;top:0;z-index:80;background:rgba(10,11,13,.78);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line)}
/* The header is a bar, not a column of text, so it is allowed more width than
   the content beneath it. Six labelled chips plus the brand plus three
   buttons do not fit a 1200px reading measure, and squeezing the chips until
   they do is how you end up back at an unreadable menu. */
.top-in{display:flex;align-items:center;justify-content:space-between;gap:1.15rem;padding:.6rem 0}
/* Seven chips need more room than six did. The header gets its own wider
   measure above 1200px, and the icon-only band below reaches further up
   than the shell does, so the labels only appear where they actually fit. */
@media(min-width:1200px){.top-in{width:min(1400px,calc(100vw - 3rem));margin-inline:auto}}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand img{width:44px;height:44px;filter:drop-shadow(0 3px 10px rgba(201,162,39,.22))}
.brand b{display:block;font-family:Archivo,sans-serif;font-weight:800;font-size:1.02rem;letter-spacing:-.03em;line-height:1.1}
.brand b,.brand span{white-space:nowrap}
.brand span{display:block;font-family:"IBM Plex Mono",monospace;font-size:.56rem;letter-spacing:.24em;color:var(--steel);text-transform:uppercase;margin-top:2px}
.nav{display:flex;gap:1rem;align-items:center}
.nav a{font-size:.9rem;text-decoration:none;color:var(--steel);position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--gold);transition:right .25s}
.nav a:hover{color:var(--silver)}
.nav a:hover::after{right:0}
/* The whole menu used to disappear below 1285px, which is every 13-inch
   laptop. Between there and the tablet breakpoint the chips drop their labels
   and keep their marks instead: the words stay in the accessibility tree and
   in the tooltip, and the navigation stays on the page. */
@media(max-width:1180px) and (min-width:1010px){
  .nav > a > span,.navtop > span{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .nav > a,.navtop{padding:.5rem .6rem}
  .nav > a > svg,.navtop > svg{width:17px;height:17px}
}
@media(max-width:1009px){.nav{display:none}}
@media(max-width:520px){.top .btn{display:none}}

/* ================= HERO ================= */
.hero{position:relative;padding:clamp(2.2rem,4.4vw,3.4rem) 0 clamp(2.5rem,5vw,4rem);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;pointer-events:none;
  background:
    radial-gradient(44% 36% at 80% 16%,rgba(201,162,39,.085),transparent 66%),
    radial-gradient(38% 32% at 6% 66%,rgba(143,166,184,.045),transparent 72%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(236,237,238,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(236,237,238,.028) 1px,transparent 1px);
  background-size:72px 72px;
  /* Faded out sooner and further from the words. The grid is a surface, not a
     feature; at full strength it was competing with the headline. */
  mask-image:radial-gradient(95% 65% at 68% 14%,#000 8%,transparent 62%);
  -webkit-mask-image:radial-gradient(95% 65% at 68% 14%,#000 8%,transparent 62%);
}
.hero-in{display:grid;grid-template-columns:1.08fr .92fr;gap:3.4rem;align-items:center}
@media(max-width:980px){.hero-in{grid-template-columns:1fr;gap:2.4rem}}
/* 4.2rem rather than 4.7: at 4.7 the payoff line wrapped onto two, which
   both weakened it and pushed the button off a laptop screen. */
.hero h1{font-size:clamp(2.5rem,5.6vw,4.2rem);font-weight:900}
/* Each line balances within itself, so the payoff reads "Placed in / AI
   Roles." rather than leaving "Roles." alone on a line of its own. */
.hero h1 .line{display:block;text-wrap:balance}
.hero-sub{color:var(--steel);font-size:1.06rem;max-width:52ch;margin-top:1.2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* A short screen is a different problem from a narrow one, and the usual
   breakpoints do not see it. On a 1366x768 laptop the button's top edge came
   out at 764px - four pixels of it above the fold, which reads as cut off
   rather than as an invitation to scroll. This tightens the vertical rhythm
   only where the height is actually short; a desktop monitor never sees it. */
@media (min-width:981px) and (max-height:820px){
  .hero{padding-top:clamp(1.5rem,2.6vw,2.2rem)}
  .hero h1{font-size:clamp(2.3rem,4.6vw,3.5rem)}
  .hero-claim{margin-top:.85rem;font-size:1.16rem}
  .hero-build{font-size:1rem}
  .hero-sub{margin-top:.9rem;font-size:1.02rem}
  .hero-cta{margin-top:1.5rem}
}
/* The brochure and the phone number were buttons, which made four things of
   equal weight where there should be one. They are still here, one line down
   and one size quieter - findable, not competing. */
.hero-alt{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .95rem;margin:.95rem 0 0;
  font-size:.88rem;color:var(--steel)}
.hero-alt a{color:var(--silver);text-decoration:none;border-bottom:1px solid rgba(201,162,39,.4);
  padding-bottom:1px;transition:border-color .2s,color .2s}
.hero-alt a:hover{color:var(--gold-hi);border-color:var(--gold-hi)}
.hero-alt span{opacity:.4}
.trust{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:2.2rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.trust div{display:flex;align-items:center;gap:.6rem;font-size:.88rem;color:var(--steel)}
.trust b{color:var(--silver);font-family:Archivo,sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.stars{color:var(--gold);letter-spacing:.1em}

/* ================= HERO: DAYLIGHT =================
   Drawn, not photographed. The graphic is the retrieval pipeline taught in
   module seven, so it is sharp at any size, weighs nothing, and can answer a
   question when you point at it.

   The page below the hero is dark. The hero resolves into that ground over its
   last 150px rather than stopping at a hard edge - see ::after. */
.art{position:relative}

.hero-day{position:relative;padding:0;overflow:hidden;isolation:isolate;
  background:linear-gradient(168deg,#FCFBF9 0%,#F5F4F0 54%,#EFEEE9 100%);color:#11151A}
.hero-day::before{display:none}
/* the faintest blueprint grid, because the subject is an architecture */
.hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(17,21,26,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,21,26,.045) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(120% 95% at 72% 22%,#000 12%,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 95% at 72% 22%,#000 12%,transparent 72%)}
.hero-day::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(10,11,13,0) 0%,rgba(10,11,13,.82) 62%,var(--black) 100%)}

/* .shell sets the measure and the gutters; width:100% here would throw both
   away and push the headline against the glass. The bottom padding clears the
   150px fade: the copy is dark ink, and anything in the fade is ink on its
   way to black. */
.hero-day-in{position:relative;z-index:3;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(1.6rem,4vw,3rem);
  align-items:center;padding-block:clamp(2.2rem,5vw,3.2rem) clamp(9.4rem,12vw,10.4rem)}
.hero-day-copy{max-width:36rem}

/* ---- type, in ink ---- */
.hero-day .tag{color:#7E6410}
.hero-day .tag::before{background:linear-gradient(90deg,transparent,#7E6410)}
.hero-day h1{color:#0D1115;font-size:clamp(2.15rem,4.2vw,3.5rem)}
.hero-day h1 .line{display:block;text-wrap:balance}
.hero-day h1 .au{background:linear-gradient(180deg,#B8901A,#7A6210);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-day .hero-claim{margin-top:1rem;color:#2B3237}
.hero-day .hero-claim b{color:#7E6410}
.hero-day .hero-sub{color:#454D53;max-width:44ch;margin-top:.85rem}
.hero-day .hero-sub b{color:#11151A;font-weight:600}
.hero-day .btn-ink{background:rgba(17,21,26,.045);color:#11151A;
  border:1px solid rgba(17,21,26,.2)}
.hero-day .btn-ink:hover{background:rgba(17,21,26,.09);border-color:rgba(17,21,26,.4)}
.hero-day .btn-ink svg{width:18px;height:18px}
.hero-day .hero-alt{color:#5B6368}
.hero-day .hero-alt a{color:#11151A;border-bottom-color:rgba(126,100,16,.5)}
.hero-day .hero-alt a:hover{color:#7E6410;border-color:#7E6410}
.hero-day .hero-alt span{color:#A6ADB1}
.hero-facts{list-style:none;margin:1.8rem 0 0;padding:1.2rem 0 0;display:flex;flex-wrap:wrap;
  gap:.8rem 1.7rem;border-top:1px solid rgba(17,21,26,.15)}
.hero-facts li{display:flex;align-items:baseline;gap:.5rem}
.hero-facts b{font-family:Archivo,sans-serif;font-weight:900;font-size:1.2rem;letter-spacing:-.03em;
  color:#11151A;font-variant-numeric:tabular-nums}
.hero-facts span{font-size:.8rem;color:#5B6368;line-height:1.3}

/* ---- the delivery box ----
   A rigid presentation case, graphite with a gold hairline along every edge
   and a lining that lights when it is open. It was drawn for a black hero and
   now stands on a light one, which suits it: a dark object on pale ground
   reads as an object rather than as a panel. What changed for the light
   ground is everything around it - the tiles needed an edge, the shadows
   needed softening, and the captions had to stop being white-on-black.

   The physics is in herobox.js; this only describes the box, the tiles, and
   where the pointer is allowed to land. */
.hbox{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;min-height:clamp(330px,30vw,420px)}
.hbox-head{position:relative;z-index:5;align-self:flex-start;margin:0 0 auto;
  display:flex;flex-direction:column;gap:.25rem}
.hbox-k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.58rem;letter-spacing:.24em;
  text-transform:uppercase;color:#7E6410}
.hbox-head b{font-family:Archivo,sans-serif;font-weight:800;font-size:1.02rem;
  letter-spacing:-.02em;color:#11151A}

/* The play area. It does not catch the pointer itself - only the tiles do -
   so the empty space over the box stays transparent to anything beneath it. */
.hbox-stage{position:absolute;inset:0 -3%;z-index:4;pointer-events:none}

.hbox-crate{position:relative;z-index:2;margin:0 auto;
  width:clamp(168px,17vw,214px);aspect-ratio:1/.86;
  --case-hi:#272C33;--case:#171B20;--case-lo:#0C0F12;
  --foil-hi:rgba(232,206,122,.9)}

/* the lining, and the light that spills out of it */
.hbox-back{position:absolute;left:5%;right:5%;top:5%;height:26%;z-index:0;
  border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,#5A4819,#2A210C 46%,#0D0B06);
  border-top:1px solid var(--foil-hi);
  box-shadow:inset 0 10px 18px -4px rgba(0,0,0,.8),inset 0 0 22px rgba(201,162,39,.3);
  opacity:0;transition:opacity .45s ease .14s}
.hbox.is-open .hbox-back{opacity:1}
.hbox-glow{position:absolute;left:-16%;right:-16%;top:-16%;height:52%;z-index:0;
  background:radial-gradient(50% 60% at 50% 70%,rgba(201,162,39,.26),transparent 70%);
  opacity:0;transition:opacity .6s ease .18s;pointer-events:none}
.hbox.is-open .hbox-glow{opacity:1}

/* the lid, hinged at the two top corners */
.hbox-flap{position:absolute;top:5%;width:50%;height:19%;z-index:1;border-radius:3px;
  background:linear-gradient(178deg,#30363E,#1D2228 54%,#11151A);
  box-shadow:0 12px 20px -12px rgba(17,21,26,.55),inset 0 1px 0 rgba(232,206,122,.45),
    inset 0 -1px 0 rgba(232,206,122,.18),inset 0 0 0 1px rgba(201,162,39,.42);
  transition:transform .6s cubic-bezier(.34,1.08,.5,1)}
.hbox-flap-l{left:-50%;transform-origin:100% 100%;transform:translate(100%,0)}
.hbox-flap-r{right:-50%;transform-origin:0 100%;transform:translate(-100%,0)}
.hbox.is-open .hbox-flap-l{transform:translate(0,0) rotate(-23deg)}
.hbox.is-open .hbox-flap-r{transform:translate(0,0) rotate(23deg)}
.hbox-flap-l::after,.hbox-flap-r::after{content:"";position:absolute;
  top:16%;bottom:16%;width:1px;
  background:linear-gradient(180deg,transparent,var(--foil-hi),transparent)}
.hbox-flap-l::after{right:6%}
.hbox-flap-r::after{left:6%}

/* the case front */
.hbox-face{position:absolute;left:0;right:0;top:24%;bottom:0;z-index:2;overflow:hidden;
  border-radius:3px 3px 10px 10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;
  padding:9% 12% 10%;
  background:linear-gradient(164deg,var(--case-hi),var(--case) 42%,var(--case-lo));
  box-shadow:0 26px 48px -20px rgba(17,21,26,.5),
    inset 0 1px 0 rgba(232,206,122,.3),
    inset 0 0 0 1px rgba(201,162,39,.34),
    inset 0 -22px 30px -22px rgba(0,0,0,.7)}
.hbox-rule{position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--foil-hi) 22%,var(--foil-hi) 78%,transparent)}
/* one slow pass of foil sheen - the only thing on the box that moves by itself */
.hbox-sheen{position:absolute;top:0;bottom:0;width:38%;left:-45%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(232,206,122,.16) 45%,transparent);
  animation:hbox-sheen 7s ease-in-out 1.4s infinite;will-change:transform}
/* transform, not left: animating a position property relays out the box on
   every frame of a loop that never ends */
@keyframes hbox-sheen{0%{transform:translateX(0)}34%,100%{transform:translateX(421%)}}

.hbox-logo{width:34%;height:auto;border-radius:50%;
  box-shadow:0 0 0 1px rgba(201,162,39,.35),0 6px 18px -6px rgba(0,0,0,.9)}
.hbox-name{font-family:Archivo,sans-serif;font-weight:800;letter-spacing:.07em;
  font-size:clamp(7px,.7vw,10px);white-space:nowrap;
  background:linear-gradient(180deg,#F2DFA4,#C9A227 60%,#8A6D12);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hbox-ship{font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:clamp(5px,.5vw,7px);letter-spacing:.2em;color:rgba(190,196,201,.85);
  white-space:nowrap}
/* softer and warmer than the one it had on black - a hard shadow under an
   object on pale paper reads as a sticker */
.hbox-shadow{position:absolute;left:4%;right:4%;bottom:-7%;height:15%;z-index:0;
  background:radial-gradient(closest-side,rgba(17,21,26,.4),transparent 76%);filter:blur(8px)}

/* ---- the tiles ---- */
/* White tiles on a white page need a drawn edge or they dissolve; on black
   they never did. */
.hchip{position:absolute;left:0;top:0;display:grid;place-items:center;border-radius:12px;
  background:#fff;pointer-events:auto;touch-action:none;cursor:grab;will-change:transform;
  box-shadow:0 0 0 1px rgba(17,21,26,.13),0 6px 16px -8px rgba(17,21,26,.45);
  opacity:0;transition:opacity .3s ease,box-shadow .2s ease}
.hchip.is-out{opacity:1}
.hchip img{width:74%;height:74%;object-fit:contain;display:block;pointer-events:none;
  -webkit-user-drag:none;user-select:none}
.hchip:hover{box-shadow:0 0 0 2px rgba(201,162,39,.75),0 12px 22px -10px rgba(138,109,18,.5)}
.hchip.is-held{cursor:grabbing;z-index:6;
  box-shadow:0 0 0 2px rgba(201,162,39,.9),0 18px 30px -12px rgba(17,21,26,.5)}
/* the name, on hover only - twenty-eight permanent captions is a word cloud */
.hchip-name{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;color:#FBF3DA;
  background:#191D22;border:1px solid rgba(201,162,39,.5);border-radius:5px;
  padding:3px 7px;opacity:0;transition:opacity .18s ease;pointer-events:none;
  box-shadow:0 6px 14px -6px rgba(17,21,26,.6)}
.hchip:hover .hchip-name,.hchip.is-held .hchip-name{opacity:1}

/* ---- the line under it ---- */
.hbox-bar{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;
  gap:.8rem;margin:1.2rem 0 0;flex-wrap:wrap}
.hbox-hint{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.56rem;
  letter-spacing:.18em;text-transform:uppercase;color:#7E6410}
.hbox-btn{appearance:none;font:inherit;font-size:.78rem;cursor:pointer;
  background:rgba(17,21,26,.04);border:1px solid rgba(17,21,26,.2);color:#11151A;
  border-radius:999px;padding:.42rem .95rem;
  transition:border-color .2s ease,color .2s ease,background .2s ease}
.hbox-btn:hover{border-color:#7E6410;color:#6E5810;background:rgba(126,100,16,.08)}

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

/* ---- the header rides over the hero, then goes back to dark glass ---- */
.top.on-light{background:rgba(255,255,255,.82);border-bottom-color:rgba(17,21,26,.12)}
.top.on-light .brand b{color:#11151A}
.top.on-light .brand span{color:#7E6410}
.top.on-light .nav > a,.top.on-light .navtop{color:#2B3237;border-color:rgba(17,21,26,.16)}
.top.on-light .nav > a:hover,.top.on-light .navtop:hover{border-color:#7E6410;color:#7E6410}
.top.on-light .navmenu{background:rgba(255,255,255,.97);border-color:rgba(17,21,26,.12)}
.top.on-light .navmenu a{color:#2B3237}
.top.on-light .navmenu a:hover{background:rgba(126,100,16,.08);color:#11151A}
.top.on-light .plink,.top.on-light .vlink{color:#6E5810;border-color:rgba(126,100,16,.5);
  background:rgba(126,100,16,.06)}
.top.on-light .plink:hover,.top.on-light .vlink:hover{color:#4F3F08;border-color:#7E6410;
  background:rgba(126,100,16,.14)}
.top.on-light .btn.ghost{color:#6E5810;border-color:rgba(126,100,16,.55)}
/* The bar flips the moment the hero's last light pixel passes under it: the
   sentinel sits one header-height above the foot of the hero, so the ground
   below the bar is dark before the bar turns dark. */
.hero-trip{position:absolute;left:0;right:0;bottom:75px;height:1px;z-index:0;pointer-events:none}

@media(max-width:980px){
  .hero-day-in{grid-template-columns:1fr;gap:2.2rem;
    padding-block:1.8rem calc(96px + 1.4rem)}
  .hero-day::after{height:96px}
  .hero-day-copy{max-width:none}
  .hero-day h1{font-size:clamp(1.85rem,7.4vw,2.5rem)}
  .hero-day .tag{font-size:.56rem;letter-spacing:.14em}
  .hero-day .hero-claim{font-size:1.02rem;margin-top:.85rem}
  .hero-day .hero-sub{font-size:.95rem;margin-top:.7rem;max-width:none}
  .hero-day .hero-cta{margin-top:1.2rem}
  .hero-facts{gap:.7rem 1.4rem;margin-top:1.5rem;padding-top:1rem}
  .hero-facts b{font-size:1.08rem}
  .hbox{min-height:clamp(300px,64vw,380px)}
  .hbox-head{align-self:center;text-align:center}
  /* "hover a tile" means nothing on a touch screen, and it crowds the bar */
  .hbox-hint{display:none}
  .hbox-bar{justify-content:center}
}

/* Nothing moves for somebody who asked for less motion. The tiles still carry
   their names and still drag - that is the content, not the decoration. */
@media(prefers-reduced-motion:reduce){
  .hbox-sheen{display:none}
  .hbox-flap,.hbox-back,.hbox-glow,.hchip{transition:none}
}

/* Drishya, in her own band under the hero */
.askdband{border-bottom:1px solid var(--line);padding:clamp(1.6rem,3.4vw,2.4rem) 0;
  background:linear-gradient(180deg,rgba(201,162,39,.045),transparent)}
.askdband .askd{margin:0 auto;max-width:860px}

/* ================= MARQUEE ================= */
.marq{border-block:1px solid var(--line);background:linear-gradient(180deg,rgba(201,162,39,.05),transparent);overflow:hidden;padding:.85rem 0}
.marq-track{display:flex;gap:2.4rem;width:max-content;animation:slide 42s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}
.marq:hover .marq-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.marq-track{animation:none}}
.marq span{font-family:Archivo,sans-serif;font-weight:700;font-size:.9rem;letter-spacing:-.01em;color:var(--steel);white-space:nowrap;display:flex;align-items:center;gap:2.4rem}
.marq span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.7}

/* ================= SECTIONS ================= */
.sec{padding:clamp(3.6rem,7vw,6.2rem) 0;position:relative}
.sec-light{background:var(--paper);color:var(--ink)}
.sec-light .tag{color:#4A3A0C}
.sec-light .tag::before{background:linear-gradient(90deg,transparent,#4A3A0C)}
.sec-light .sec-lede{color:var(--ink-dim)}
.sec-hair{border-top:1px solid var(--line)}

/* stat band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.6rem}
@media(max-width:860px){.stats{grid-template-columns:1fr 1fr}}
.stat{border:1px solid var(--line);border-radius:var(--r);padding:1.5rem 1.3rem;background:linear-gradient(180deg,rgba(236,237,238,.045),rgba(236,237,238,.01));position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;inset:0;background:var(--gloss);pointer-events:none}
.stat svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.6;margin-bottom:1rem}
.stat b{display:block;font-family:Archivo,sans-serif;font-weight:900;font-size:2.1rem;letter-spacing:-.04em;line-height:1}
.stat span{display:block;color:var(--steel);font-size:.85rem;margin-top:.4rem}

/* ================= PROGRAMS ================= */
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2.8rem}
.elig{margin-top:1.5rem;background:var(--paper-2);border:1px solid rgba(11,12,15,.10);border-radius:20px;padding:1.5rem 1.7rem;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;box-shadow:0 18px 44px -30px rgba(11,12,15,.45)}
.elig-t{font-family:Archivo,sans-serif;font-weight:800;font-size:1.12rem;margin:0 0 .8rem;letter-spacing:-.01em;color:var(--ink)}
.elig-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.elig-list li{font-size:.92rem;color:var(--ink);border:1px solid rgba(11,12,15,.14);border-radius:999px;padding:.42rem .85rem;background:rgba(11,12,15,.02)}
@media(max-width:900px){.elig{flex-direction:column;align-items:flex-start}}
@media(max-width:900px){.tracks{grid-template-columns:1fr}}
.track{background:var(--paper-2);border:1px solid rgba(11,12,15,.10);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 44px -28px rgba(11,12,15,.5)}
.track-art{position:relative;aspect-ratio:1.745;overflow:hidden;background:linear-gradient(135deg,#131519,#141D26)}
.track-art img{width:100%;height:100%;object-fit:cover;display:block}
.track-art svg{position:absolute;inset:0;width:100%;height:100%}
.track.is-flag .track-art{background:linear-gradient(135deg,#0A0B0D,#1C1605 70%,#042832)}
.track-body{padding:1.8rem;display:flex;flex-direction:column;flex:1}
.flag{display:inline-flex;align-items:center;gap:.45rem;font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#4A3A0C}
.flag i{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.track h3{margin:.7rem 0 .45rem;font-size:1.62rem}
.who{color:var(--ink-dim);font-size:.93rem;margin-bottom:1.3rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.5rem;padding:0;list-style:none}
.chips li{font-size:.82rem;padding:.34rem .72rem;border-radius:100px;background:rgba(11,12,15,.05);border:1px solid rgba(11,12,15,.09);color:#1E2A35}
.track.is-flag .chips li{background:rgba(201,162,39,.14);border-color:rgba(10,114,134,.3);color:#3A2D08}
.price{margin-top:auto;padding-top:1.2rem;border-top:1px dashed rgba(11,12,15,.15);display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.price b{font-family:Archivo,sans-serif;font-weight:900;font-size:1.55rem;letter-spacing:-.035em}
.price span{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-lo);font-weight:500}
.price-note{margin:.7rem 0 0;font-size:.82rem;line-height:1.55;color:var(--ink-dim)}
.phases{list-style:none;margin:1.15rem 0 0;padding:0;display:grid;gap:.7rem}
.phases li{position:relative;padding:.7rem .9rem .75rem 1.05rem;border:1px solid rgba(11,12,15,.14);border-radius:12px;background:rgba(201,162,39,.07)}
.phases li:before{content:"";position:absolute;left:0;top:.85rem;bottom:.85rem;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--gold),var(--mint))}
.phases b{display:block;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-lo);margin-bottom:.2rem}
.phases span{display:block;font-size:.85rem;line-height:1.6;color:var(--ink-dim)}

/* ================= CURRICULUM ================= */
.mods{margin-top:2.8rem;display:grid;gap:.7rem}
.mod{display:grid;grid-template-columns:64px 1fr auto;gap:1.3rem;align-items:center;padding:1.15rem 1.4rem;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,rgba(236,237,238,.04),transparent);transition:border-color .25s,transform .25s}
.mod:hover{border-color:rgba(201,162,39,.4);transform:translateX(4px)}
.mod-n{font-family:Archivo,sans-serif;font-weight:900;font-size:1.5rem;letter-spacing:-.05em;color:rgba(236,237,238,.16)}
.mod h4{font-family:Archivo,sans-serif;font-weight:700;font-size:1.04rem;margin:0 0 .25rem}
.mod p{margin:0;color:var(--steel);font-size:.9rem}
.dur{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:.42rem .8rem;border-radius:100px;border:1px solid rgba(201,162,39,.35);color:var(--gold);white-space:nowrap}
.dur.alt{border-color:rgba(143,166,184,.35);color:var(--aqua)}
@media(max-width:700px){.mod{grid-template-columns:44px 1fr;gap:.9rem}.dur{grid-column:2;justify-self:start;margin-top:.5rem}}

/* ================= ELEVATION ================= */
.elev{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.4rem;margin-top:2.6rem;align-items:start}
@media(max-width:980px){.elev{grid-template-columns:1fr;gap:2.2rem}}
.house{position:sticky;top:104px}
@media(max-width:980px){.house{position:static}}
.house svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 20px 50px rgba(0,0,0,.6))}
.storey{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.house.on .storey{opacity:1;transform:none}
.house.on .storey:nth-of-type(1){transition-delay:.60s}
.house.on .storey:nth-of-type(2){transition-delay:.52s}
.house.on .storey:nth-of-type(3){transition-delay:.45s}
.house.on .storey:nth-of-type(4){transition-delay:.38s}
.house.on .storey:nth-of-type(5){transition-delay:.31s}
.house.on .storey:nth-of-type(6){transition-delay:.24s}
.house.on .storey:nth-of-type(7){transition-delay:.16s}
.house.on .storey:nth-of-type(8){transition-delay:.05s}
@media (prefers-reduced-motion:reduce){.storey{opacity:1;transform:none;transition:none}}
.steps{list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding:1.15rem 0;border-top:1px solid var(--line);counter-increment:s}
.steps li:first-child{border-top:none;padding-top:0}
.steps li::before{content:"L" counter(s,decimal-leading-zero);font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.1em;color:var(--gold);padding-top:.4rem}
.steps h4{font-family:Archivo,sans-serif;font-size:1.08rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .25rem}
.steps p{margin:0;color:var(--steel);font-size:.93rem}

/* ================= PLACEMENT ================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2.6rem}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.panel{border:1px solid rgba(11,12,15,.11);border-radius:20px;padding:1.9rem;background:var(--paper-2);box-shadow:0 18px 44px -30px rgba(11,12,15,.5)}
.panel h3{margin-bottom:.8rem}
.panel>p{color:var(--ink-dim);font-size:.95rem}
.flowmap{width:100%;height:auto;margin:.4rem 0 1.2rem}
.olist{list-style:none;counter-reset:o;margin:0;padding:0}
.olist li{counter-increment:o;position:relative;padding:.5rem 0 .5rem 2.3rem;font-size:.95rem;color:var(--ink-dim)}
.olist li::before{content:counter(o);position:absolute;left:0;top:.55rem;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--gold);font-family:"IBM Plex Mono",monospace;font-size:.68rem;display:grid;place-items:center}
.olist li b{color:var(--ink)}
.note{font-size:.78rem;color:var(--ink-dim);margin-top:1.1rem;padding-top:.9rem;border-top:1px dashed rgba(11,12,15,.14)}

/* ================= SALARY BARS ================= */
.sal{margin-top:2.6rem;display:grid;gap:.55rem}
.sal-row{display:grid;grid-template-columns:1.35fr 2.2fr .95fr;gap:1.3rem;align-items:center;padding:.85rem 1.2rem;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,rgba(236,237,238,.035),transparent)}
.sal-row b{font-weight:600;font-size:.95rem}
.sal-row b em{display:block;font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:.66rem;color:var(--steel);letter-spacing:.1em;text-transform:uppercase;margin-top:.2rem}
.bar{position:relative;height:9px;border-radius:100px;background:rgba(236,237,238,.07);overflow:hidden}
.bar i{position:absolute;top:0;bottom:0;border-radius:100px;background:linear-gradient(90deg,rgba(201,162,39,.5),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.8,.3,1)}
.sal.on .bar i{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.bar i{transform:scaleX(1);transition:none}}
.sal-row .amt{font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.03em;text-align:right;font-size:1rem;color:var(--gold-hi)}
@media(max-width:760px){.sal-row{grid-template-columns:1fr auto}.bar{grid-column:1/-1;order:3}}

/* ================= STACK ================= */
.stack{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.6rem}
@media(max-width:980px){.stack{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.stack{grid-template-columns:1fr}}
.pack{border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;background:linear-gradient(180deg,rgba(236,237,238,.045),transparent);position:relative;overflow:hidden}
.pack::after{content:"";position:absolute;inset:0;background:var(--gloss);pointer-events:none}
.pack>*{position:relative}
.pack-h{display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem}
.pack-h svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.6;flex:none}
.pack-h h4{font-family:Archivo,sans-serif;font-weight:700;font-size:1rem;letter-spacing:-.02em;margin:0}
.tools{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.tools li{font-family:"IBM Plex Mono",monospace;font-size:.74rem;padding:.34rem .68rem;border-radius:7px;border:1px solid var(--line-2);background:rgba(10,11,13,.5);color:var(--silver)}
.tools li.hot{border-color:rgba(201,162,39,.45);color:var(--gold-hi);background:rgba(201,162,39,.07)}

/* ================= ROLE DIRECTORY ================= */
.rolegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.6rem}
@media(max-width:980px){.rolegrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.rolegrid{grid-template-columns:1fr}}
.rolecard{border:1px solid rgba(11,12,15,.11);border-radius:var(--r);padding:1.4rem;background:var(--paper-2);transition:transform .25s,box-shadow .25s}
.rolecard:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(11,12,15,.55)}
.rolecard h4{font-family:Archivo,sans-serif;font-weight:800;font-size:1rem;letter-spacing:-.02em;margin:0 0 .2rem;display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.rolecard h4 i{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:.66rem;color:var(--ink-dim);letter-spacing:.1em}
.rolecard p{margin:0 0 .9rem;font-size:.8rem;color:var(--ink-dim)}
.rolecard ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.3rem}
.rolecard li{font-size:.79rem;padding:.24rem .58rem;border-radius:6px;background:rgba(11,12,15,.05);color:#212E39}
.rolecard.is-hot{background:linear-gradient(165deg,#131519,#042028);border-color:rgba(201,162,39,.4);color:var(--silver);box-shadow:0 18px 44px -28px rgba(0,0,0,.8)}
.rolecard.is-hot h4{color:var(--gold-hi)}
.rolecard.is-hot h4 i{color:var(--gold)}
.rolecard.is-hot p{color:var(--steel)}
.rolecard.is-hot li{background:rgba(201,162,39,.12);color:var(--gold-hi)}
.roles-note{margin-top:1.6rem;font-size:.85rem;color:var(--ink-dim);padding-top:1rem;border-top:1px dashed rgba(11,12,15,.15)}

/* ================= HYDERABAD ================= */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.6rem}
@media(max-width:860px){.why{grid-template-columns:1fr}}
.why div{border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;background:linear-gradient(180deg,rgba(236,237,238,.04),transparent)}
.why b{display:block;font-family:Archivo,sans-serif;font-weight:900;font-size:1.9rem;letter-spacing:-.04em;color:var(--gold)}
.why span{display:block;color:var(--steel);font-size:.9rem;margin-top:.5rem}

/* ================= MENTORS ================= */
.mentors{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2.6rem}
@media(max-width:860px){.mentors{grid-template-columns:1fr 1fr}}
.mentor{border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;background:linear-gradient(180deg,rgba(236,237,238,.045),transparent);text-align:center;position:relative;overflow:hidden}
.mentor::after{content:"";position:absolute;inset:0;background:var(--gloss);pointer-events:none}
.ini{width:74px;height:74px;border-radius:50%;margin:0 auto 1.1rem;display:grid;place-items:center;font-family:Archivo,sans-serif;font-weight:900;font-size:1.4rem;letter-spacing:-.04em;color:#241C06;background-image:linear-gradient(180deg,#EADDAE,#C9A227 45%,#8A6D12);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 8px 24px -8px rgba(201,162,39,.5)}
.mentor b{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.02em}
.mentor span{display:block;font-size:.84rem;color:var(--steel);line-height:1.45;margin-top:.15rem}
.mentor .role{display:block;font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-top:.7rem;line-height:1.5}
.team-h{font-family:Archivo,sans-serif;font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.025em;margin:0}

/* ================= REVIEWS ================= */
.gcard{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;padding:1.5rem 1.8rem;border-radius:20px;background:var(--paper-2);border:1px solid rgba(11,12,15,.1);margin-top:2.2rem;box-shadow:0 18px 44px -30px rgba(11,12,15,.5)}
.gcard .score{font-family:Archivo,sans-serif;font-weight:900;font-size:3.2rem;letter-spacing:-.05em;line-height:1}
.gcard .meta{flex:1;min-width:200px}
.reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-top:1.1rem}
@media(max-width:900px){.reviews{grid-template-columns:1fr}}
.rev{border:1px solid rgba(11,12,15,.1);border-radius:16px;padding:1.5rem;background:var(--paper-2)}
.rev p{font-size:.95rem;color:var(--ink-dim)}
.rev b{font-size:.9rem;font-family:Archivo,sans-serif}

/* ================= FAQ ================= */
.faq{margin-top:2.4rem;max-width:840px}
.faq details{border-top:1px solid var(--line);padding:1.1rem 0}
.faq details[open] summary{color:var(--gold)}
.faq summary{cursor:pointer;font-family:Archivo,sans-serif;font-weight:600;font-size:1.06rem;letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"IBM Plex Mono",monospace;color:var(--gold);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.75rem 0 0;color:var(--steel);font-size:.95rem}

/* ================= ENQUIRE ================= */
.enq{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
@media(max-width:900px){.enq{grid-template-columns:1fr;gap:2rem}}
.formcard{border:1px solid var(--line-2);border-radius:20px;padding:1.8rem;background:linear-gradient(180deg,rgba(236,237,238,.06),rgba(236,237,238,.015));position:relative;overflow:hidden}
.formcard::after{content:"";position:absolute;inset:0;background:var(--gloss);pointer-events:none}
.formcard>*{position:relative}
.field{margin-bottom:.95rem}
.field label{display:block;font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%;padding:.8rem .95rem;border-radius:12px;border:1px solid var(--line-2);background:rgba(10,11,13,.6);color:var(--silver);font:inherit;font-size:.95rem}
.field textarea{min-height:86px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#667683}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);outline:none}
.contact-list{list-style:none;padding:0;margin:1.8rem 0 0}
.contact-list li{padding:.85rem 0;border-top:1px solid var(--line);font-size:.96rem;display:grid;grid-template-columns:34px 1fr;gap:.9rem;align-items:start}
.contact-list svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.6;margin-top:.28rem}
.contact-list a{color:var(--gold-hi);text-decoration:none}
.contact-list a:hover{text-decoration:underline}
.contact-list em{display:block;font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);margin-bottom:.15rem}
.mapwrap{margin-top:1.6rem;border:1px solid var(--line-2);border-radius:16px;overflow:hidden;aspect-ratio:16/10;background:#131519}
.mapwrap iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.25) contrast(1.05)}
.map-note{margin:.75rem 0 0;font-size:.82rem;color:var(--steel)}
.map-note a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(201,162,39,.4)}
.map-note a:hover{color:var(--gold-hi)}

/* ================= FOOTER ================= */
.foot{border-top:1px solid var(--line);padding:2.6rem 0 6rem;font-size:.87rem;color:var(--steel);background:linear-gradient(180deg,transparent,rgba(201,162,39,.035))}
.foot-in{display:flex;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;align-items:center}
.foot img{width:52px;height:52px;margin-bottom:.8rem}
.foot a{color:var(--steel);text-decoration:none}
.foot a:hover{color:var(--gold)}

.callbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:.6rem;padding:.6rem;background:rgba(10,11,13,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.callbar .btn{flex:1;justify-content:center;padding:.78rem}
@media(max-width:1000px){.callbar{display:flex}}
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:2.4rem}
.vgrid-one{grid-template-columns:minmax(0,760px);justify-content:center}
@media(max-width:820px){.vgrid{grid-template-columns:1fr}}
.vcard{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(236,237,238,.03)}
.vframe{position:relative;aspect-ratio:16/9;background:#000;cursor:pointer;display:block;width:100%;border:0;padding:0}
.vframe img{width:100%;height:100%;object-fit:cover;display:block;opacity:.82;transition:opacity .35s ease,transform .5s ease}
.vframe:hover img{opacity:1;transform:scale(1.02)}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;
  background:linear-gradient(160deg,#E8CE7A,#C9A227 45%,#8A6D12);display:grid;place-items:center;
  box-shadow:0 12px 40px rgba(0,0,0,.6);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.vframe:hover .vplay{transform:translate(-50%,-50%) scale(1.09)}
.vplay svg{width:28px;height:28px;fill:#0A0B0D;margin-left:4px}
.vscrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,13,.1) 0%,rgba(10,11,13,0) 40%,rgba(10,11,13,.72) 100%)}
.vmeta{padding:1.05rem 1.15rem 1.2rem}
.vmeta b{display:block;font-family:Archivo,sans-serif;font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
.vmeta span{display:block;font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin-top:.45rem}

/* ============================================================================
   Sub-page components: the program, placement, mentor and AI-tools pages.
   ==========================================================================*/
.crumbs{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);margin:0 0 1.5rem}
.crumbs a{color:var(--steel);text-decoration:none}
.crumbs a:hover{color:var(--gold)}
.crumbs span{color:var(--gold-lo);margin:0 .5rem}

.phero{padding:8.5rem 0 3.6rem;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.phero:before{content:"";position:absolute;inset:0;background:
  radial-gradient(760px 380px at 78% -12%,rgba(201,162,39,.11),transparent 62%);pointer-events:none}
.phero-in{position:relative;max-width:860px}
.phero h1{font-family:Archivo,sans-serif;font-size:clamp(2.1rem,5.2vw,3.5rem);font-weight:900;
  letter-spacing:-.035em;line-height:1.04;margin:.6rem 0 1.1rem}
.phero p.lede{font-size:clamp(1rem,1.9vw,1.18rem);line-height:1.68;color:var(--ink-2);margin:0;max-width:64ch}
.phero .facts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.9rem}
.phero .facts b{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;border:1px solid var(--line-2);border-radius:999px;padding:.5rem .95rem;color:var(--ink-2);
  background:rgba(236,237,238,.03)}
.phero .facts b.gold{border-color:rgba(201,162,39,.42);color:var(--gold);background:rgba(201,162,39,.07)}

.prose{max-width:70ch}
.prose p{font-size:1rem;line-height:1.75;color:var(--ink-2);margin:0 0 1.15rem}
.prose p:last-child{margin-bottom:0}
.prose b,.prose strong{color:var(--silver)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1.3rem;margin-top:2.4rem}
.card{border:1px solid var(--line-2);border-radius:16px;padding:1.6rem;background:rgba(236,237,238,.03)}
.card h3{margin:0 0 .6rem;font-family:Archivo,sans-serif;font-size:1.08rem;font-weight:800;letter-spacing:-.015em;color:var(--silver)}
.card p{margin:0;font-size:.94rem;line-height:1.66;color:var(--steel)}
.card em{font-style:normal;display:block;font-family:"IBM Plex Mono",monospace;font-size:.64rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--mint);margin-bottom:.7rem}

.weeks{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1rem}
.weeks li{display:grid;grid-template-columns:132px 1fr;gap:1.4rem;border:1px solid var(--line-2);
  border-radius:14px;padding:1.25rem 1.4rem;background:rgba(236,237,238,.025)}
@media(max-width:680px){.weeks li{grid-template-columns:1fr;gap:.5rem}}
.weeks .w{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-lo);padding-top:.15rem}
.weeks b{display:block;font-family:Archivo,sans-serif;font-size:1rem;font-weight:700;margin-bottom:.4rem}
.weeks span{display:block;font-size:.92rem;line-height:1.65;color:var(--steel)}

.cmp{width:100%;border-collapse:collapse;margin-top:2.2rem;font-size:.94rem}
.cmp th,.cmp td{text-align:left;padding:.95rem 1rem;border-bottom:1px solid var(--line-2);vertical-align:top}
.cmp thead th{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);font-weight:500}
.cmp tbody th{font-weight:600;color:var(--silver);width:34%}
.cmp td{color:var(--steel);line-height:1.6}
.cmp .yes{color:var(--mint)}
.cmp-wrap{overflow-x:auto}

.ctaband{border:1px solid rgba(201,162,39,.34);border-radius:20px;padding:2.5rem;margin-top:3.4rem;
  background:linear-gradient(135deg,rgba(201,162,39,.09),rgba(143,166,184,.05));text-align:center}
.ctaband h2{margin:0 0 .7rem;font-family:Archivo,sans-serif;font-size:clamp(1.4rem,3vw,1.95rem);
  font-weight:800;letter-spacing:-.02em}
.ctaband p{margin:0 auto 1.7rem;max-width:56ch;color:var(--ink-2);font-size:.98rem;line-height:1.65}
.ctaband .row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

.plist{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.85rem}
.plist li{position:relative;padding-left:1.9rem;font-size:.96rem;line-height:1.65;color:var(--ink-2)}
.plist li:before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.14)}
.plist li b{color:var(--silver)}
.plist.mint li:before{background:var(--mint);box-shadow:0 0 0 4px rgba(143,166,184,.14)}

.nav a.on{color:var(--gold)}

/* ============================================================================
   Technology wall - three rows of logo chips scrolling in alternate directions.
   ==========================================================================*/
.stackwall{position:relative;scroll-margin-top:86px;padding:4.2rem 0 4.6rem;border-bottom:1px solid var(--line);overflow:hidden;
  background:linear-gradient(180deg,rgba(201,162,39,.045),transparent 45%,rgba(143,166,184,.035))}
.stackwall:before{content:"";position:absolute;left:50%;top:-30%;width:130%;height:150%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(201,162,39,.16),transparent 72%);pointer-events:none}
.stackwall .shell{position:relative}
.stackwall-h{text-align:center;margin-bottom:2.5rem}
.stackwall-h .tag{justify-content:center}
.stackwall-h h2{font-family:Archivo,sans-serif;font-size:clamp(1.5rem,3.4vw,2.3rem);font-weight:900;
  letter-spacing:-.03em;margin:.55rem 0 .7rem}
.stackwall-h p{margin:0 auto;max-width:58ch;color:var(--steel);font-size:.98rem;line-height:1.65}

.tw{position:relative;display:grid;gap:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.tw-row{overflow:hidden}
.tw-track{display:flex;gap:14px;width:max-content;animation:twscroll 26s linear infinite}
/* tw-rev, not rev: .rev is already the white Google-review card, and the
   collision painted the middle row solid white. */
.tw-row.tw-rev .tw-track{animation-direction:reverse}
@keyframes twscroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.tw:hover .tw-track{animation-play-state:paused}

/* No backdrop-filter here. A blurred backdrop inside a mask-image ancestor
   renders as an opaque white band in Chromium, which is exactly what the middle
   row did. The chips read fine without it. */
.twc{flex:none;display:flex;align-items:center;gap:11px;padding:11px 17px 11px 12px;border-radius:14px;
  border:1px solid var(--line-2);background:rgba(236,237,238,.045);
  transition:border-color .22s,background .22s,transform .22s,box-shadow .22s}
.twc:hover{transform:translateY(-3px);border-color:rgba(201,162,39,.6);background:rgba(201,162,39,.1);
  box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 22px rgba(201,162,39,.22)}
.twc-art{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:rgba(236,237,238,.06)}
.twc-art img{width:24px;height:24px;object-fit:contain;display:block;opacity:.9;transition:opacity .22s}
.twc:hover .twc-art img{opacity:1}
.twc b{font-size:.87rem;font-weight:600;letter-spacing:-.005em;color:var(--silver);white-space:nowrap}
.twc-mono{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:.74rem;font-weight:500;
  letter-spacing:.04em;color:var(--brand)}

/* category tints, so the rows are not one flat colour */
.twc.ai    .twc-art{background:rgba(201,162,39,.14)}   .twc.ai    .twc-mono{color:#C9A227}
.twc.cloud .twc-art{background:rgba(143,166,184,.14)}   .twc.cloud .twc-mono{color:#8FA6B8}
.twc.dev   .twc-art{background:rgba(125,233,250,.13)}  .twc.dev   .twc-mono{color:#E8CE7A}
.twc.ops   .twc-art{background:rgba(143,166,184,.11)}   .twc.ops   .twc-mono{color:#8FA6B8}
.twc.data  .twc-art{background:rgba(201,162,39,.1)}    .twc.data  .twc-mono{color:#D8BC61}

.stackwall-note{margin:2.3rem auto 0;text-align:center;font-size:.8rem;color:var(--ink-dim);max-width:64ch;line-height:1.6}

@media(max-width:640px){
  .twc{padding:9px 13px 9px 9px;gap:9px;border-radius:12px}
  .twc-art{width:32px;height:32px}.twc-art img{width:20px;height:20px}
  .twc b{font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){
  .tw-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .tw{-webkit-mask-image:none;mask-image:none}
}

/* ============================================================================
   Classroom band — a full-bleed photo with the caption laid over the scrim.
   ==========================================================================*/
.room{position:relative;border-bottom:1px solid var(--line);background:var(--black)}
.room-fig{position:relative;margin:0;line-height:0}
.room-fig img{display:block;width:100%;height:auto}
.room-fig:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,11,13,.28) 0%,rgba(10,11,13,0) 26%,
    rgba(10,11,13,.55) 62%,rgba(10,11,13,.94) 100%)}
.room-cap{position:absolute;left:0;right:0;bottom:0;padding-bottom:2.4rem;z-index:2}
.room-cap .tag{margin-bottom:.7rem}
.room-cap h2{font-family:Archivo,sans-serif;font-size:clamp(1.4rem,3.4vw,2.4rem);font-weight:900;
  letter-spacing:-.03em;line-height:1.06;margin:0 0 .6rem;max-width:20ch}
.room-cap p{margin:0;max-width:56ch;color:var(--ink-2);font-size:clamp(.9rem,1.7vw,1.02rem);line-height:1.6}

/* Below about 700px the photo is too short to hold the text legibly, so the
   caption drops underneath it instead of sitting on top. */
@media(max-width:700px){
  .room-fig:after{background:linear-gradient(180deg,rgba(10,11,13,.15),rgba(10,11,13,.55))}
  .room-cap{position:static;padding:1.6rem 0 2rem}
  .room-cap h2{max-width:none}
}

/* ============================================================================
   Premium pass — grain, depth, spotlight, scroll line, pipeline graphic.
   Everything here is decoration: it degrades to nothing without JS, and all
   motion stops under prefers-reduced-motion.
   ==========================================================================*/

/* Film grain. A flat #0A0B0D reads as cheap on a large screen; a faint noise
   tile gives it the tooth of print. Kept under the chat widget's z-index. */
.grain{position:fixed;inset:0;pointer-events:none;z-index:9990;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  background-size:140px 140px}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:9989;
  background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.42) 100%)}

/* Reading-progress hairline. */
.sprog{position:fixed;top:0;left:0;height:2px;width:0;z-index:9991;
  background:linear-gradient(90deg,var(--gold-lo),var(--gold),var(--gold-hi));
  box-shadow:0 0 12px rgba(201,162,39,.5);transition:width .08s linear}

/* Cursor spotlight on cards. The gradient is painted from two custom
   properties the script updates, so hover costs one style write, not a repaint
   of the whole card. */
.spot{position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .3s ease;z-index:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    rgba(201,162,39,.14),transparent 62%)}
.spot:hover::before{opacity:1}
.spot > *{position:relative;z-index:1}

/* Section transitions: a hairline that fades out at both ends instead of
   running edge to edge, which is what makes a rule look drawn rather than
   defaulted. */
.sec-hair{position:relative}
.sec-hair::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1200px,92vw);height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent)}

/* Counters hold their width while animating so nothing jumps. */
.count{font-variant-numeric:tabular-nums}

/* ---- signature graphic: the RAG pipeline, animated ---- */
.pipe{padding:4.4rem 0 4.8rem;position:relative;overflow:hidden}
.pipe:before{content:"";position:absolute;left:50%;top:50%;width:120%;height:220%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(201,162,39,.09),transparent 70%)}
.pipe .shell{position:relative}
.pipe-h{text-align:center;margin-bottom:2.6rem}
.pipe-h h2{font-family:Archivo,sans-serif;font-size:clamp(1.5rem,3.4vw,2.3rem);font-weight:900;
  letter-spacing:-.03em;margin:.6rem 0 .7rem}
.pipe-h p{margin:0 auto;max-width:56ch;color:var(--steel);font-size:.98rem;line-height:1.65}
.pipe-svg{width:100%;height:auto;display:block;overflow:visible}
.pipe-svg .pnode{fill:rgba(236,237,238,.045);stroke:var(--line-2);stroke-width:1}
.pipe-svg .plabel{fill:var(--silver);font-family:"IBM Plex Sans",sans-serif;font-size:11.5px;font-weight:600}
.pipe-svg .psub{fill:var(--ink-dim);font-family:"IBM Plex Mono",monospace;font-size:8px;letter-spacing:.1em}
.pipe-svg .pline{stroke:var(--line-2);stroke-width:1.4;fill:none}
.pipe-svg .pfeed{stroke:rgba(201,162,39,.4);stroke-width:1.2;fill:none;stroke-dasharray:4 4}
.pipe-svg .pico{fill:var(--gold)}
.pipe-svg .pulse-dot{fill:var(--gold);filter:drop-shadow(0 0 5px rgba(201,162,39,.9))}
.pipe-svg .pglow{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:26 470;animation:pflow 5.2s linear infinite}
@keyframes pflow{from{stroke-dashoffset:496}to{stroke-dashoffset:0}}
.pipe-svg .pnode-lit{animation:plit 5.2s linear infinite}
@keyframes plit{0%,100%{stroke:var(--line-2)}
  8%,16%{stroke:rgba(201,162,39,.85)}}
.pipe-cap{text-align:center;margin:2.2rem auto 0;max-width:62ch;font-size:.86rem;
  color:var(--ink-dim);line-height:1.6}
@media(max-width:640px){.pipe{padding:3.2rem 0 3.4rem}}

@media(prefers-reduced-motion:reduce){
  .pipe-svg .pglow,.pipe-svg .pnode-lit{animation:none}
  .pipe-svg .pglow{stroke-dasharray:none;opacity:.5}
  .sprog{transition:none}
}

/* ==========================================================================
   The creed band, the "most chosen" mark, the resume section and the
   before/after room reveal. Added with the two-page resume release.
   ========================================================================== */

/* --------------------------------------------------------------- creed --- */
.creed{border-block:1px solid var(--line);
  background:linear-gradient(180deg,rgba(201,162,39,.07),rgba(201,162,39,.02));
  padding:.95rem 0}
.creed-in{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;text-align:center}
.creed p{margin:0;font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel)}
.creed p b{color:var(--gold-hi);font-weight:600}
.creed-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;opacity:.8}
}

/* ---- the AI news ticker ----
   One line of headlines sliding past, each one a link out to whoever
   published it. It pauses when you point at it, because a moving target you
   cannot click is just an irritation, and it stops entirely for anyone who
   asked for less motion - then it scrolls by hand instead. */
.newsband{border-block:1px solid var(--line);background:rgba(236,237,238,.022)}
.newsband-in{display:flex;align-items:center;gap:1rem;padding:.6rem 0;min-width:0}
.news-k{flex:none;display:flex;align-items:center;gap:.5rem;margin:0;
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.news-live{width:7px;height:7px;border-radius:50%;background:#2ECC71;
  box-shadow:0 0 0 0 rgba(46,204,113,.55);animation:news-pulse 2.4s infinite}
@keyframes news-pulse{70%{box-shadow:0 0 0 7px rgba(46,204,113,0)}
  100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}}
.news-vp{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.news-track{display:flex;align-items:center;gap:2.2rem;width:max-content;
  animation:news-roll 90s linear infinite}
.news-vp:hover .news-track,.news-track:focus-within{animation-play-state:paused}
@keyframes news-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.news-i{display:flex;align-items:baseline;gap:.5rem;text-decoration:none;white-space:nowrap}
.news-i b{font-weight:500;font-size:.84rem;color:var(--silver);
  border-bottom:1px solid transparent;transition:border-color .18s,color .18s}
.news-i s{text-decoration:none;font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--steel);opacity:.8}
.news-i:hover b,.news-i:focus-visible b{color:var(--gold-hi);border-bottom-color:var(--gold)}
.news-src{flex:none;margin:0;font-size:.6rem;font-family:"IBM Plex Mono",monospace;
  letter-spacing:.08em;color:var(--steel);opacity:.65}
@media (max-width:900px){
  .news-src{display:none}
  .newsband-in{gap:.7rem}
}
@media (prefers-reduced-motion:reduce){
  /* No crawl. Swipe or arrow-key through it instead. */
  .news-track{animation:none}
  .news-vp{overflow-x:auto;scrollbar-width:thin}
}

.foot-creed{display:block;margin:.55rem 0 .35rem;font-family:"IBM Plex Mono",monospace;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600}

/* ------------------------------------------------------- most chosen ----- */
.hot{display:inline-flex;align-items:center;align-self:flex-start;gap:.4rem;margin-bottom:.7rem;
  padding:.34rem .68rem .34rem .5rem;border-radius:999px;
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;color:#2B2106;
  background:linear-gradient(120deg,var(--gold-hi),var(--gold) 58%,#B8901A);
  box-shadow:0 6px 18px -8px rgba(201,162,39,.9);position:relative}
.hot svg{width:12px;height:12px;fill:#2B2106;flex:none}
.hot::after{content:"";position:absolute;inset:0;border-radius:inherit;
  animation:hotpulse 2.6s ease-out infinite}
@keyframes hotpulse{0%{box-shadow:0 0 0 0 rgba(201,162,39,.5)}
  70%{box-shadow:0 0 0 12px rgba(201,162,39,0)}100%{box-shadow:0 0 0 0 rgba(201,162,39,0)}}
@media (prefers-reduced-motion:reduce){.hot::after{animation:none}}
.track.is-hot{border-color:rgba(201,162,39,.55);box-shadow:0 22px 54px -26px rgba(201,162,39,.55)}
.track.is-hot .track-art{background:linear-gradient(135deg,#141017,#231A05 70%,#101820)}
.track.is-hot .track-body{position:relative}
.track.is-hot .track-body::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-hi),transparent)}

/* ------------------------------------------------------ resume section --- */
.rez-in{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,4vw,3.6rem);align-items:center}
.rez-copy h2{margin-bottom:.9rem}
.rez-pts{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.9rem}
.rez-pts li{display:grid;gap:.2rem;padding-left:1.1rem;position:relative}
.rez-pts li::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;
  border-radius:50%;background:var(--gold)}
.rez-pts b{font-family:Archivo,sans-serif;font-size:.98rem;color:var(--silver)}
.rez-pts span{color:var(--steel);font-size:.93rem;line-height:1.6}
.rez-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.9rem}
.rez-note{margin:1.1rem 0 0;font-family:"IBM Plex Mono",monospace;font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}

.rez-art{position:relative;min-height:430px;display:flex;align-items:center;justify-content:center}
.rezpage{position:absolute;width:min(74%,300px);aspect-ratio:1/1.414;background:#FBFBFC;
  border-radius:8px;padding:9% 9% 0;display:flex;flex-direction:column;gap:5.2%;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9),0 0 0 1px rgba(11,12,15,.16)}
.rezpage.p2{transform:translate(14%,-6%) rotate(5.4deg);filter:brightness(.92)}
.rezpage.p1{transform:translate(-9%,5%) rotate(-2.6deg)}
.rezpage::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;
  border-radius:8px 8px 0 0;background:linear-gradient(90deg,var(--gold),var(--gold-lo))}
.rl{display:block;height:5px;border-radius:3px;background:#D5D9DE}
.rl.name{height:15px;width:62%;background:#1F2A38}
.rl.sub{height:7px;background:#8A6D12}
.rl.tiny{height:4px;background:#C9CFD6}
.rl.g{height:6px;background:#1F3A5F;margin-top:3.2%}
.rl.h{height:9px;background:#1F3A5F}
.w95{width:95%}.w93{width:93%}.w92{width:92%}.w90{width:90%}.w88{width:88%}.w85{width:85%}
.w80{width:80%}.w75{width:75%}.w70{width:70%}.w60{width:60%}.w55{width:55%}.w50{width:50%}
.w45{width:45%}.w40{width:40%}.w38{width:38%}
.rezno{position:absolute;right:8%;bottom:5%;font-family:"IBM Plex Mono",monospace;
  font-size:.6rem;letter-spacing:.14em;color:#9AA0A6;font-weight:400}
.rez-badge{position:absolute;left:4%;bottom:7%;z-index:3;padding:.42rem .8rem;border-radius:999px;
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--black);background:linear-gradient(120deg,var(--gold-hi),var(--gold));
  box-shadow:0 10px 26px -12px rgba(201,162,39,.9)}
@media (prefers-reduced-motion:no-preference){
  .rezpage{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
  .rez-art:hover .rezpage.p2{transform:translate(22%,-10%) rotate(7.6deg)}
  .rez-art:hover .rezpage.p1{transform:translate(-14%,7%) rotate(-4deg)}
}

/* ------------------------------------------------- before/after reveal --- */
/* The overlay image is full size and clipped, not resized: sizing the wrapper
   instead would squash the top photo as the handle moves. */
.reveal{position:relative;margin:2.6rem 0 0;border-radius:20px;overflow:hidden;line-height:0;
  box-shadow:0 34px 80px -40px rgba(11,12,15,.85);border:1px solid rgba(11,12,15,.14);
  --rev:52%;touch-action:pan-y}
.reveal img{display:block;width:100%;height:auto}
.rev-top{position:absolute;inset:0;
  -webkit-clip-path:inset(0 calc(100% - var(--rev)) 0 0);
  clip-path:inset(0 calc(100% - var(--rev)) 0 0)}
.rev-bar{position:absolute;top:0;bottom:0;left:var(--rev);width:2px;
  background:linear-gradient(180deg,transparent,var(--gold) 12%,var(--gold-hi) 50%,var(--gold) 88%,transparent);
  transform:translateX(-1px);pointer-events:none;z-index:3}
.rev-bar i{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;background:rgba(10,11,13,.72);border:1px solid var(--gold);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:block}
.rev-bar i::before,.rev-bar i::after{content:"";position:absolute;top:50%;width:0;height:0;
  border-block:5px solid transparent;margin-top:-5px}
.rev-bar i::before{left:12px;border-right:7px solid var(--gold-hi)}
.rev-bar i::after{right:12px;border-left:7px solid var(--gold-hi)}
.rev-range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;z-index:4;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.rev-range::-webkit-slider-runnable-track{height:100%}
.rev-range::-webkit-slider-thumb{-webkit-appearance:none;width:56px;height:1200px;cursor:ew-resize}
.rev-range::-moz-range-thumb{width:56px;height:1200px;border:0;cursor:ew-resize}
.reveal:focus-within .rev-bar i{box-shadow:0 0 0 4px rgba(201,162,39,.4)}
.rev-tag{position:absolute;bottom:14px;z-index:3;padding:.4rem .8rem;border-radius:999px;
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  line-height:1;color:var(--silver);background:rgba(10,11,13,.66);border:1px solid rgba(236,237,238,.18);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.rev-tag.a{left:14px}
.rev-tag.b{right:14px;color:var(--black);background:linear-gradient(120deg,var(--gold-hi),var(--gold));
  border-color:transparent}
.reveal-cap{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.8rem}
.reveal-cap div{border-top:2px solid rgba(201,162,39,.55);padding-top:.9rem}
.reveal-cap b{display:block;font-family:"IBM Plex Mono",monospace;font-size:.66rem;
  letter-spacing:.24em;color:#4A3A0C;margin-bottom:.4rem}
.reveal-cap span{color:var(--ink-dim);font-size:.93rem;line-height:1.6}

@media (max-width:900px){
  .rez-in{grid-template-columns:1fr}
  .rez-art{min-height:340px;order:-1}
  .reveal-cap{grid-template-columns:1fr}
  .creed-in{gap:.55rem}
  .creed p{font-size:.62rem;letter-spacing:.14em}
  .rev-bar i{width:38px;height:38px;margin:-19px 0 0 -19px}
}

/* --------------------------------------------------- the portal entrance --- */
/* The header nav disappears below 1000px, so the portal link lives beside the
   demo button instead: an enrolled student on a phone still has a way in, and
   it shrinks to its icon rather than vanishing. */
.top-cta{display:flex;align-items:center;gap:.6rem}
.top-cta .btn{white-space:nowrap}
.plink{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-radius:999px;
  border:1px solid rgba(201,162,39,.42);background:rgba(201,162,39,.08);color:var(--gold-hi);
  text-decoration:none;font-size:.85rem;white-space:nowrap;
  transition:background .22s,border-color .22s,color .22s}
.plink:hover{background:rgba(201,162,39,.17);border-color:var(--gold);color:#F5E4AC}
.plink svg{width:16px;height:16px;flex:none}
@media(max-width:760px){.plink span{display:none}.plink{padding:.55rem}}

.sportal-in{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,4vw,3.4rem);align-items:center}
.sportal-list{list-style:none;margin:1.7rem 0 0;padding:0;display:grid;gap:1.05rem}
.sportal-list li{display:flex;gap:.9rem;align-items:flex-start}
.sportal-list svg{width:21px;height:21px;flex:none;color:var(--gold);margin-top:2px}
.sportal-list b{display:block;font-family:Archivo,sans-serif;font-size:.98rem;color:var(--silver);margin-bottom:.15rem}
.sportal-list span{color:var(--steel);font-size:.92rem;line-height:1.6}
.sportal-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.9rem}
.sportal-note{margin:1rem 0 0;color:var(--ink-dim);font-size:.86rem;line-height:1.6;max-width:52ch}

/* the little portal window: same palette as the real thing, no screenshot to
   go stale every time the portal changes */
.sportal-art{display:flex;justify-content:center}
.sp-win{width:100%;max-width:430px;border-radius:16px;overflow:hidden;
  border:1px solid rgba(236,237,238,.13);background:#0E1013;
  box-shadow:0 34px 76px -38px rgba(0,0,0,.95)}
.sp-bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;
  background:#15181C;border-bottom:1px solid rgba(236,237,238,.09)}
.sp-bar i{width:8px;height:8px;border-radius:50%;background:#2E343B}
.sp-bar b{margin-left:.6rem;font-family:"IBM Plex Mono",monospace;font-size:.6rem;
  letter-spacing:.1em;color:#6B7076;font-weight:400}
.sp-body{padding:1.1rem 1.15rem 1.3rem}
.sp-creed{margin:0;font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold)}
.sp-hi{margin:.5rem 0 .9rem;font-family:Archivo,sans-serif;font-weight:800;font-size:1.18rem;
  color:var(--silver);letter-spacing:-.02em}
.sp-tabs{display:flex;gap:.4rem;flex-wrap:wrap;padding-bottom:.85rem;margin-bottom:.9rem;
  border-bottom:1px solid rgba(236,237,238,.09)}
.sp-tabs span{font-size:.68rem;padding:.3rem .6rem;border-radius:999px;color:#75838F;
  border:1px solid rgba(236,237,238,.1)}
.sp-tabs span.on{color:var(--black);background:linear-gradient(120deg,var(--gold-hi),var(--gold));
  border-color:transparent;font-weight:600}
.sp-row{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:9px;
  background:rgba(236,237,238,.035);margin-bottom:.4rem}
.sp-row.sub{margin-left:1.1rem;background:rgba(236,237,238,.02)}
.sp-row em{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:.52rem;letter-spacing:.14em;
  color:var(--gold);border:1px solid rgba(201,162,39,.35);border-radius:4px;padding:.14rem .3rem;flex:none}
.sp-row.sub em{color:#8FA6B8;border-color:rgba(143,166,184,.35)}
.sp-row span{font-size:.76rem;color:#A9B0B7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-meter{height:5px;border-radius:999px;background:rgba(236,237,238,.08);margin:1rem 0 .45rem;overflow:hidden}
.sp-meter i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi))}
.sp-meta{margin:0;font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:#75838F}

@media(max-width:900px){
  .sportal-in{grid-template-columns:1fr}
  .sportal-art{order:-1}
}

/* ------------------------------------------------------ find the house --- */
/* The map used to sit in one column of the enquiry grid with dead space beside
   it. Here it gets a partner: the map on the left, the building on the right,
   and an arrow drawn between them so a first-time visitor knows what to look
   for when they get to the street. */
.visit-grid{display:grid;grid-template-columns:1fr 118px 1fr;align-items:center;
  gap:.6rem;margin-top:2.6rem}
.vpanel{margin:0}
.vlabel{display:inline-block;margin-bottom:.7rem;padding:.32rem .7rem;border-radius:999px;
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:#3A2D08;background:rgba(201,162,39,.18);border:1px solid rgba(201,162,39,.4)}
.vlabel.is-gold{color:var(--black);background:linear-gradient(120deg,var(--gold-hi),var(--gold));
  border-color:transparent}
.vframe{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/10;
  border:1px solid rgba(11,12,15,.16);background:#131519;
  box-shadow:0 26px 60px -34px rgba(11,12,15,.8)}
.vframe iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.2) contrast(1.05)}
.vframe img{width:100%;height:100%;object-fit:cover;display:block}
.vpanel figcaption{margin-top:.85rem;color:var(--ink-dim);font-size:.88rem;line-height:1.6}

/* the marker over the sign on the compound wall */
.vpin{position:absolute;left:11.9%;top:69.9%;width:74px;height:74px;margin:-37px 0 0 -37px;
  border-radius:50%;border:2px solid var(--gold);pointer-events:none}
.vpin i{position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--gold-hi);opacity:.9}
@media (prefers-reduced-motion:no-preference){
  .vpin i{animation:vping 2.4s ease-out infinite}
}
@keyframes vping{0%{transform:scale(1);opacity:.9}70%{transform:scale(1.75);opacity:0}100%{opacity:0}}
.vpin-cap{position:absolute;left:4%;bottom:6%;padding:.38rem .7rem;border-radius:999px;
  font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--silver);background:rgba(10,11,13,.72);border:1px solid rgba(236,237,238,.2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

.vjoin{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.vjoin svg{width:100%;height:96px;overflow:visible}
@media (prefers-reduced-motion:no-preference){
  .vpath{animation:vflow 1.6s linear infinite}
}
@keyframes vflow{to{stroke-dashoffset:-30}}
.vjoin-t{font-family:"IBM Plex Mono",monospace;font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;color:#4A3A0C;text-align:center;line-height:1.6}

.visit-pts{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:1.3rem}
.visit-pts li{border-top:2px solid rgba(201,162,39,.5);padding-top:.9rem}
.visit-pts b{display:block;font-family:Archivo,sans-serif;font-size:1rem;color:var(--ink);margin-bottom:.3rem}
.visit-pts span{color:var(--ink-dim);font-size:.92rem;line-height:1.6}
.visit-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}

@media(max-width:960px){
  .visit-grid{grid-template-columns:1fr;gap:1.2rem}
  .vjoin{flex-direction:row;justify-content:center;gap:1rem}
  .vjoin svg{width:120px;height:64px;transform:rotate(58deg)}
  .visit-pts{grid-template-columns:1fr}
}

/* --------------------------------------------------------- the nav chips --- */
/* Chips alone were not enough: at 10% white on a near-black hero the edges
   were invisible on a bright screen, and seven grey words still read as one
   grey smear. Each entry now carries a mark of its own, the chip has a real
   edge, and the text is bright enough to be read rather than guessed at. */
.nav{gap:.26rem}
.nav > a,.navtop{position:relative;display:inline-flex;align-items:center;gap:.36rem;
  padding:.48rem .64rem;border-radius:11px;
  border:1px solid rgba(236,237,238,.17);
  /* a flat fill under the gradient, so the chip still reads as a chip if the
     gradient is ever dropped */
  background-color:rgba(236,237,238,.06);
  background-image:linear-gradient(180deg,rgba(236,237,238,.06),rgba(236,237,238,0));
  color:#D6D9DD;text-decoration:none;font-size:.835rem;font-weight:500;white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s}
.nav > a::after{display:none}          /* the old sliding underline, now redundant */
.nav > a svg,.navtop > svg{width:14px;height:14px;flex:none;color:var(--gold);opacity:.9;
  transition:color .2s,opacity .2s,transform .25s}
.nav > a:hover,.navtop:hover,.navdrop:hover .navtop,.navdrop:focus-within .navtop{
  background-color:rgba(201,162,39,.2);
  background-image:linear-gradient(180deg,rgba(201,162,39,.16),rgba(201,162,39,0));
  border-color:rgba(201,162,39,.62);color:#FFF6DC;transform:translateY(-1px);
  box-shadow:0 8px 20px -12px rgba(201,162,39,.7)}
.nav > a:hover svg,.navtop:hover > svg,.navdrop:hover .navtop > svg{
  color:var(--gold-hi);opacity:1;transform:scale(1.08)}
.nav > a:focus-visible,.navtop:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.nav > a.on,.navdrop.is-on .navtop{color:var(--gold-hi);border-color:rgba(201,162,39,.7);
  background-color:rgba(201,162,39,.24);
  background-image:linear-gradient(180deg,rgba(201,162,39,.16),rgba(201,162,39,0))}
.nav > a.on svg,.navdrop.is-on .navtop > svg{color:var(--gold-hi);opacity:1}

/* the caret on Courses, drawn rather than another inline svg to keep the
   markup for six entries readable */
.navcar{width:0;height:0;margin-left:.1rem;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:4.5px solid currentColor;opacity:.7;
  transition:transform .2s}
.navdrop:hover .navcar,.navdrop:focus-within .navcar{transform:rotate(180deg)}
/* a live marker on the tools, because that is the entry we want tried */
.navdot{width:6px;height:6px;border-radius:50%;background:var(--gold-hi);
  box-shadow:0 0 0 0 rgba(201,162,39,.65);animation:navpulse 2.6s ease-out infinite}
@keyframes navpulse{0%{box-shadow:0 0 0 0 rgba(201,162,39,.6)}
  70%{box-shadow:0 0 0 7px rgba(201,162,39,0)}100%{box-shadow:0 0 0 0 rgba(201,162,39,0)}}
@media(prefers-reduced-motion:reduce){.navdot{animation:none}
  .nav > a:hover,.navtop:hover{transform:none}}

.navdrop{position:relative}
.navmenu{position:absolute;top:calc(100% + 10px);left:0;min-width:262px;z-index:90;
  padding:.45rem;border-radius:14px;border:1px solid rgba(236,237,238,.14);
  background:rgba(14,16,19,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 26px 60px -28px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s}
.navdrop:hover .navmenu,.navdrop:focus-within .navmenu{opacity:1;visibility:visible;transform:none}
/* the gap between the chip and the menu would otherwise drop the hover */
.navmenu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.navmenu a{display:block;padding:.6rem .7rem;border-radius:10px;text-decoration:none;
  transition:background .16s}
.navmenu a:hover{background:rgba(201,162,39,.12)}
.navmenu b{display:flex;align-items:center;gap:.45rem;font-family:Archivo,sans-serif;
  font-size:.93rem;font-weight:700;color:var(--silver)}
.navmenu a.on b{color:var(--gold-hi)}
.navmenu span{display:block;margin-top:.15rem;font-family:"IBM Plex Mono",monospace;
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.navmenu i{font-style:normal;padding:.14rem .4rem;border-radius:999px;font-size:.53rem;
  letter-spacing:.14em;text-transform:uppercase;font-family:"IBM Plex Mono",monospace;
  color:var(--black);background:linear-gradient(120deg,var(--gold-hi),var(--gold))}

/* ------------------------------------------------- the flagship inclusions --- */
.perks-h{margin:1.4rem 0 .7rem;font-family:"IBM Plex Mono",monospace;font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;color:#4A3A0C}
.perks{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.perks li{display:flex;gap:.7rem;align-items:flex-start}
.perks svg{width:19px;height:19px;flex:none;color:var(--gold-lo);margin-top:2px}
.perks span{font-size:.88rem;line-height:1.55;color:var(--ink-dim)}
.perks b{display:block;font-family:Archivo,sans-serif;font-size:.93rem;color:var(--ink);margin-bottom:.1rem}

.perkgrid{list-style:none;margin:2.6rem 0 0;padding:0;counter-reset:p;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.perkgrid li{position:relative;padding:1.5rem 1.3rem 1.4rem;border-radius:18px;
  background:var(--paper-2);border:1px solid rgba(11,12,15,.10);
  box-shadow:0 18px 44px -30px rgba(11,12,15,.5)}
.perkgrid li::before{content:"";position:absolute;left:1.3rem;right:1.3rem;top:0;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent)}
.perkgrid .pn{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.2em;color:#8A6D12}
.perkgrid h3{margin:.5rem 0 .5rem;font-family:Archivo,sans-serif;font-size:1.08rem;
  line-height:1.25;color:var(--ink)}
.perkgrid p{margin:0;color:var(--ink-dim);font-size:.92rem;line-height:1.62}
.perkgrid li:nth-child(4),.perkgrid li:nth-child(5){grid-column:span 1}
.perknote{margin:1.6rem 0 0;font-family:"IBM Plex Mono",monospace;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:#4A3A0C}
@media(max-width:980px){.perkgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.perkgrid{grid-template-columns:1fr}}

/* ------------------------------------------------------- the 2026 results --- */
.results{border-block:1px solid rgba(201,162,39,.28);
  background:linear-gradient(100deg,rgba(201,162,39,.14),rgba(201,162,39,.03) 55%,transparent);
  padding:1.4rem 0}
.results-in{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.results-n{display:flex;align-items:baseline;gap:.6rem;flex:none}
.results-n b{font-family:Archivo,sans-serif;font-weight:900;letter-spacing:-.04em;
  font-size:clamp(2.1rem,5vw,3rem);line-height:1;
  background:linear-gradient(120deg,var(--gold-hi),var(--gold) 60%,var(--gold-lo));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.results-n span{font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.results-t{flex:1 1 320px;margin:0;color:var(--steel);font-size:clamp(.95rem,1.6vw,1.06rem);line-height:1.6}
.results-t b{color:var(--silver);font-weight:700}
.results .btn{flex:none}
@media(max-width:700px){.results-in{gap:.9rem}.results .btn{width:100%;justify-content:center}}

/* ---------------------------------------------------------- one story ----- */
/* Two photographs of the same person eight weeks apart do more than any claim
   we could write, so they lead and the prose follows. */
.story-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.2rem);align-items:center;margin-top:2.6rem}
.story-shots{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;gap:.5rem}
.shot{margin:0;position:relative}
.shot img{width:100%;height:auto;display:block;border-radius:16px;
  border:1px solid rgba(11,12,15,.14);box-shadow:0 24px 56px -32px rgba(11,12,15,.85)}
.shot-tag{position:absolute;top:10px;left:10px;z-index:2;padding:.34rem .66rem;border-radius:999px;
  font-family:"IBM Plex Mono",monospace;font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--silver);background:rgba(10,11,13,.74);border:1px solid rgba(236,237,238,.2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.shot-tag.is-gold{color:var(--black);background:linear-gradient(120deg,var(--gold-hi),var(--gold));
  border-color:transparent}
.shot figcaption{margin-top:.7rem;color:var(--ink-dim);font-size:.82rem;line-height:1.55}
.shot figcaption em{color:#4A3A0C;font-style:normal}
.story-arrow{display:flex;flex-direction:column;align-items:center;gap:.45rem}
.story-arrow svg{width:100%;height:26px;overflow:visible}
@media (prefers-reduced-motion:no-preference){.sa-path{animation:saflow 1.5s linear infinite}}
@keyframes saflow{to{stroke-dashoffset:-26}}
.story-arrow b{font-family:"IBM Plex Mono",monospace;font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;color:#4A3A0C;white-space:nowrap}
.story-copy p{margin:0 0 1rem;color:var(--ink-dim);font-size:1rem;line-height:1.72}
.story-copy p b{color:var(--ink)}
.story-facts{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:1rem}
.story-facts li{border-top:2px solid rgba(201,162,39,.55);padding-top:.7rem}
.story-facts b{display:block;font-family:Archivo,sans-serif;font-size:.98rem;color:var(--ink)}
.story-facts span{display:block;margin-top:.2rem;color:var(--ink-dim);font-size:.82rem;line-height:1.5}

.quote{position:relative;margin:2.8rem 0 0;padding:2.2rem clamp(1.4rem,3vw,2.4rem);
  border-radius:20px;background:var(--paper-2);border:1px solid rgba(11,12,15,.10);
  box-shadow:0 22px 54px -34px rgba(11,12,15,.6)}
.quote::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;
  border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--gold),var(--gold-lo))}
.quote-mark{position:absolute;right:clamp(1.2rem,3vw,2.2rem);top:1.5rem;width:44px;height:44px;
  fill:rgba(201,162,39,.22)}
.quote blockquote{margin:0;max-width:70ch}
.quote blockquote p{margin:0 0 1rem;color:var(--ink);font-size:clamp(1rem,1.7vw,1.12rem);line-height:1.7}
.quote figcaption{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:1.3rem;
  padding-top:1.2rem;border-top:1px solid rgba(11,12,15,.1)}
.quote figcaption img{width:52px;height:52px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(201,162,39,.5)}
.quote figcaption b{display:block;font-family:Archivo,sans-serif;font-size:1rem;color:var(--ink)}
.quote figcaption span{font-size:.85rem;color:var(--ink-dim);line-height:1.5}
.quote .stars{margin-left:auto;font-style:normal;color:var(--gold);letter-spacing:.14em;font-size:.95rem}

@media(max-width:900px){
  .story-in{grid-template-columns:1fr}
  .story-facts{grid-template-columns:1fr}
  .quote .stars{margin-left:0}
}
@media(max-width:420px){
  .story-shots{grid-template-columns:1fr;gap:1rem}
  .story-arrow{flex-direction:row;gap:.8rem;justify-content:center}
  .story-arrow svg{width:80px;transform:rotate(90deg)}
}

/* --------------------------------------------- open on a festival day ----- */
.visit-open{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.6rem,3.5vw,3rem);
  align-items:center;margin-top:2.6rem;padding-top:2.4rem;border-top:1px solid rgba(11,12,15,.12)}
.vo-shot{margin:0;position:relative}
.vo-shot img{width:100%;height:auto;display:block;border-radius:18px;
  border:1px solid rgba(11,12,15,.14);box-shadow:0 26px 60px -34px rgba(11,12,15,.8)}
.vo-note{position:absolute;left:14px;bottom:14px;padding:.4rem .78rem;border-radius:999px;
  font-family:"IBM Plex Mono",monospace;font-size:.57rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--silver);background:rgba(10,11,13,.7);border:1px solid rgba(236,237,238,.2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vo-h{margin:0 0 .9rem;font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.2;color:var(--ink)}
.vo-copy p{margin:0 0 1rem;color:var(--ink-dim);font-size:.98rem;line-height:1.7}
.vo-copy p b{color:var(--ink)}
.vo-pts{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.vo-pts li{padding:.4rem .8rem;border-radius:999px;font-size:.83rem;color:#3A2D08;
  background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.38)}
@media(max-width:900px){.visit-open{grid-template-columns:1fr}}

/* --------------------------------------------- watch a demo, and the tease --- */
.wlink{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-radius:999px;
  border:1px solid rgba(236,237,238,.18);background:rgba(236,237,238,.04);color:var(--steel);
  text-decoration:none;font-size:.85rem;white-space:nowrap;
  transition:background .22s,border-color .22s,color .22s}
.wlink:hover{background:rgba(236,237,238,.1);border-color:rgba(236,237,238,.35);color:var(--silver)}
.wlink svg{width:16px;height:16px;flex:none}
.wlink span{display:none}
.wlink{padding:.55rem}
.wlink:hover{border-color:rgba(201,162,39,.55);color:var(--gold-hi)}

/* the mentors section left the home page; this is what stands in its place */
.tease{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.tease > div{max-width:64ch}
.tease h2{margin:0 0 .7rem}
.tease p:last-of-type{margin:0;color:var(--steel);font-size:1rem;line-height:1.7}
.tease .btn{flex:none}

/* ------------------------------------------------------------- the lounge --- */
/* Full-bleed: the room is the point, so it gets the whole width and the words
   sit on top of it rather than beside it. */
.lounge{position:relative;background:var(--black);border-block:1px solid var(--line)}
.lounge-fig{position:relative;margin:0;line-height:0}
.lounge-fig img{display:block;width:100%;height:auto;max-height:78vh;object-fit:cover;object-position:50% 42%}
.lounge-fig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,9,11,.9) 0%,rgba(8,9,11,.72) 38%,rgba(8,9,11,.18) 68%,transparent 100%)}
.lounge-cap{position:absolute;inset:0;z-index:2;display:flex;align-items:center;line-height:1.6}
.lounge-cap .shell{max-width:min(var(--shell),1180px)}
.lounge-cap h2{max-width:19ch;margin:0 0 1rem;font-family:Archivo,sans-serif;font-weight:900;
  letter-spacing:-.03em;font-size:clamp(1.5rem,3.6vw,2.7rem);line-height:1.08;color:var(--silver)}
.lounge-cap p{max-width:52ch;margin:0 0 .9rem;color:#C6CBD1;
  font-size:clamp(.92rem,1.6vw,1.04rem);line-height:1.7}
.lounge-cap p:last-child{margin-bottom:0}
@media(max-width:860px){
  .lounge-fig img{max-height:none}
  .lounge-fig::after{background:linear-gradient(180deg,rgba(8,9,11,.25),rgba(8,9,11,.9) 68%)}
  .lounge-cap{position:static;padding:1.6rem 0 2rem;background:var(--black)}
  .lounge-cap h2{max-width:none}
}

/* --------------------------------------------------- meet Drishya, in the hero --- */
/* The hero's right column had a hole above the house. It now carries the one
   thing a visitor can act on immediately, and the line that turns a gimmick
   into a curriculum point: they build this. */
.askd{display:flex;gap:14px;align-items:flex-start;margin:0 0 1.6rem;padding:16px 18px 17px;
  border-radius:16px;border:1px solid rgba(201,162,39,.18);
  background:linear-gradient(150deg,rgba(201,162,39,.05),rgba(11,12,15,.6) 60%);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 20px 44px -34px rgba(0,0,0,.9)}
.askd > img{width:56px;height:56px;border-radius:50%;flex:none;object-fit:cover;
  background:#0B0C0F;border:1px solid rgba(201,162,39,.45)}
.askd-t{min-width:0}
.askd-k{margin:0 0 .35rem;font-family:"IBM Plex Mono",monospace;font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.askd-h{margin:0 0 .5rem;font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:1.06rem;line-height:1.25;color:var(--silver)}
.askd-b{margin:0 0 .55rem;font-size:.86rem;line-height:1.6;color:var(--steel)}
.askd-you{padding-top:.55rem;border-top:1px solid rgba(236,237,238,.12)}
.askd-you b{color:var(--gold-hi)}
.askd-b2{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.35rem}
.askd-go,.askd-talk{padding:.6rem .95rem;font-size:.82rem}
.askd-talk{display:inline-flex;align-items:center;gap:.45rem}
.askd-talk svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
@media(max-width:980px){.askd{max-width:560px;margin-bottom:3.2rem}}
@media(max-width:520px){.askd{flex-direction:column;gap:11px}.askd > img{width:48px;height:48px}}

/* --------------------------------------------------- the line to Drishya ---
   A fixed overlay under the launcher (9998) and under the chat panel, never
   in front of anything clickable. It is drawn only while the hero card is on
   screen; the class is toggled from site.js. */
#askd-link{position:fixed;inset:0;z-index:9990;pointer-events:none;
  opacity:0;transition:opacity .45s ease}
#askd-link.show{opacity:1}
#askd-link .askd-halo{stroke:rgba(201,162,39,.12);stroke-width:5;stroke-linecap:round;
  filter:url(#askd-glow)}
#askd-link .askd-wire{stroke:url(#askd-grad);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:9 11;animation:askd-flow 1.1s linear infinite}
#askd-link .askd-head{stroke:#E8CE7A;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* The pulsing dot was the only thing moving in a still hero, which made it
   the first thing the eye found. It stays, it stops flashing. */
#askd-link .askd-start{fill:rgba(232,206,122,.55)}
#askd-link .askd-spark{fill:#FFF3CE}
@keyframes askd-flow{to{stroke-dashoffset:-20}}
@keyframes askd-pulse{0%,100%{opacity:.55;r:4}50%{opacity:1;r:5.5}}
@media(prefers-reduced-motion:reduce){
  #askd-link .askd-wire{animation:none;stroke-dasharray:none}
  #askd-link .askd-start{animation:none}
}

/* ------------------------------------------------ the syllabus, expanded ---
   Modules now carry their own contents, grouped into phases. The old .mod row
   stays for anything that only needs a title; .mod-x is the version with a
   list under it, so the number and the duration must sit at the top rather
   than centred against a tall block. */
.phase{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin:2.2rem 0 .2rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.phase:first-child{margin-top:.4rem}
.phase b{font-family:Archivo,sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.phase span{font-size:.86rem;color:var(--steel)}
.mod-x{align-items:start}
.mod-x h4{margin-bottom:.2rem}
.mod-x > div > p{color:var(--gold-hi);font-size:.88rem;margin:0 0 .7rem}
.mod-l{list-style:none;margin:0;padding:0;display:grid;gap:.38rem}
.mod-l li{position:relative;padding-left:1.05rem;font-size:.87rem;line-height:1.6;color:var(--steel)}
.mod-l li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;
  background:rgba(201,162,39,.55)}
@media(max-width:700px){.mod-x .dur{margin-top:.8rem}}

/* ------------------------------------------------ the people who moved ---
   Six portraits that must read as one set, whatever they were photographed
   with. The frame does the work: same square crop, same hairline, same lift. */
.pl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(345px,1fr));gap:1.1rem;margin-top:2.6rem}
.pl-card{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,rgba(236,237,238,.05),transparent);
  display:grid;grid-template-columns:104px 1fr;gap:0;align-items:start}
.pl-card img{width:104px;height:104px;object-fit:cover;display:block;align-self:start;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  border-bottom-right-radius:14px}
.pl-card figcaption{padding:1rem 1.1rem 1.1rem}
.pl-name{font-family:Archivo,sans-serif;font-weight:800;font-size:1.02rem;letter-spacing:-.02em;display:block}
.pl-co{display:block;font-size:.86rem;color:var(--gold-hi);margin-top:.15rem}
.pl-co s{display:block;text-decoration:none;font-size:.78rem;color:var(--steel);margin-top:.1rem}
.pl-nums{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:.55rem 0 .5rem}
.pl-nums b{font-family:Archivo,sans-serif;font-weight:900;font-size:1.18rem;letter-spacing:-.03em;color:#fff}
.pl-nums i{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);border:1px solid rgba(201,162,39,.4);
  border-radius:100px;padding:.24rem .55rem}
.pl-card p{font-size:.87rem;line-height:1.62;color:var(--steel);margin:0}
.pl-foot{margin-top:1.6rem;font-size:.86rem;color:var(--steel)}
.pl-foot a{color:var(--gold)}
@media(max-width:480px){.pl-card{grid-template-columns:84px 1fr}.pl-card img{width:84px;height:84px}}

/* -------------------------------------------------- Swaroop, on the home ---
   The short version: two photographs, the gap between them, and what he says
   about it. The full account stays on the placement page. */
.hero-claim{margin-top:1.1rem;font-family:Archivo,sans-serif;font-size:1.28rem;font-weight:800;
  letter-spacing:-.02em;color:var(--silver)}
.hero-claim b{color:var(--gold-hi)}
/* The second half of the claim. Set as one line with the turn on the emphasis,
   so it reads as a sentence rather than as two slogans stacked. */
.hero-build{margin:.5rem 0 0;font-family:Archivo,sans-serif;font-size:1.06rem;
  font-weight:700;letter-spacing:-.012em;line-height:1.35}
.hero-build span{color:var(--steel)}
.hero-build b{color:var(--silver);position:relative}
.hero-build b::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:linear-gradient(90deg,var(--gold),rgba(201,162,39,0));border-radius:2px}
.hs-row{display:grid;grid-template-columns:auto auto auto minmax(280px,1fr);gap:1.4rem;
  align-items:center;margin-top:2.6rem}
.hs-shot{margin:0;width:230px}
.hs-shot img{width:100%;height:288px;object-fit:cover;border-radius:var(--r);display:block;
  border:1px solid var(--line)}
.hs-shot figcaption{margin-top:.7rem}
.hs-shot b{display:block;font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.hs-shot span{display:block;font-size:.82rem;color:var(--steel);margin-top:.2rem}
.hs-arrow{display:grid;justify-items:center;gap:.5rem;width:96px}
.hs-arrow svg{width:96px;height:32px}
.hs-arrow span{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel)}
.hs-quote{margin:0;border-left:3px solid var(--gold);padding-left:1.4rem}
.hs-quote p{font-size:1.02rem;line-height:1.7;color:var(--silver);font-style:italic;margin:0}
.hs-quote cite{display:block;font-style:normal;font-size:.84rem;color:var(--steel);margin:.9rem 0 1.1rem}
/* the section sits on paper, so the quote and its button need ink, not silver */
.sec-light .hs-quote p{color:var(--ink)}
.sec-light .hs-quote cite{color:var(--ink-dim)}
.sec-light .hs-shot b{color:#6E5510}
.sec-light .hs-shot span,.sec-light .hs-arrow span{color:var(--ink-dim)}
.sec-light .hs-quote .btn-glass{color:var(--ink);border-color:rgba(11,12,15,.22);
  background:rgba(11,12,15,.04);backdrop-filter:none}
.sec-light .hs-quote .btn-glass:hover{border-color:#8A6D12;color:#6E5510}
@media(max-width:1080px){.hs-row{grid-template-columns:auto auto auto;row-gap:1.8rem}
  .hs-quote{grid-column:1/-1;padding-left:1.2rem}}
@media(max-width:600px){.hs-row{grid-template-columns:1fr 1fr;gap:1rem}
  .hs-shot{width:auto}.hs-shot img{height:210px}
  .hs-arrow{grid-column:1/-1;grid-row:2;width:auto;grid-auto-flow:column;justify-content:center}
  .hs-quote{grid-row:3}}

/* ============================================================== depth ====
   The page gains a third axis: cards lean towards the cursor, the hero art
   drifts against the scroll, and the mark in the hero is a solid object.
   Every part of this is switched off under prefers-reduced-motion, and the
   tilt is switched off on touch, where there is no cursor to lean towards. */
.d3,.card3d,.track,.pl-card,.pack,.mod,.stat,.rev{
  transform-style:preserve-3d;will-change:transform;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .4s ease,border-color .3s ease}
.d3-on{transition:transform .08s linear,box-shadow .4s ease,border-color .3s ease;
  box-shadow:0 34px 60px -34px rgba(0,0,0,.85),0 0 0 1px rgba(201,162,39,.22)}
.sec-light .d3-on{box-shadow:0 30px 54px -34px rgba(11,12,15,.5),0 0 0 1px rgba(201,162,39,.3)}
/* the contents lift off the card face a little, which is what sells it */
.d3-on .pl-name,.d3-on .pl-nums,.d3-on h4,.d3-on b{transform:translateZ(18px)}
.pl-card,.track,.pack,.mod,.stat{backface-visibility:hidden}

@media(prefers-reduced-motion:reduce){
  .d3,.card3d,.track,.pl-card,.pack,.mod,.stat,.rev{transform:none!important;transition:none}
  [data-depth]{transform:none!important}
}

/* ------------------------------------------------- the visit introduction ---
   The paragraph is capped at 60ch for readability, which left half the row
   empty on a wide screen. The facts people actually ask about now sit in
   that space. */
.visit-intro{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(1.8rem,4vw,3.4rem);
  align-items:start;margin-top:1.1rem}
.visit-intro .sec-lede{margin-top:0}
.visit-intro .sec-lede + .sec-lede{margin-top:1rem}
.visit-card{border:1px solid rgba(11,12,15,.12);border-left:3px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;padding:1.4rem 1.6rem;background:rgba(201,162,39,.06)}
.vc-quote{font-family:Archivo,sans-serif;font-size:1.06rem;font-weight:800;letter-spacing:-.02em;
  line-height:1.4;color:var(--ink);margin:0 0 1.2rem}
.vc-facts{margin:0;display:grid;gap:.9rem}
.vc-facts > div{display:grid;grid-template-columns:96px 1fr;gap:.9rem;align-items:baseline;
  padding-top:.9rem;border-top:1px solid rgba(11,12,15,.1)}
.vc-facts dt{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:#6E5510}
.vc-facts dd{margin:0;font-size:.94rem;font-weight:600;color:var(--ink);line-height:1.45}
.vc-facts s{display:block;text-decoration:none;font-size:.82rem;font-weight:400;
  color:var(--ink-dim);margin-top:.2rem}
@media(max-width:900px){.visit-intro{grid-template-columns:1fr;gap:1.8rem}
  .visit-card{border-radius:var(--r)}}
@media(max-width:420px){.vc-facts > div{grid-template-columns:1fr;gap:.25rem}}

/* ---------------------------------------------------------------- 40 LPA --
   The highest package sits in the counted-things band with the rest, but it
   is the number people came to the page for, so it carries the gold. */
.topband{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:1rem;
  padding:20px 26px;border-radius:var(--r);
  border:1px solid rgba(201,162,39,.4);
  background:linear-gradient(100deg,rgba(201,162,39,.13),rgba(201,162,39,.03))}
.topband>svg{flex:0 0 auto;width:30px;height:30px;stroke:#C9A227;fill:rgba(201,162,39,.18);
  stroke-width:1.4;stroke-linejoin:round}
.topband p{margin:0;flex:0 0 auto}
.topband i{display:block;font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:#C9A227;margin-bottom:4px}
.topband b{display:block;font-family:Archivo,system-ui,sans-serif;font-size:clamp(30px,4.4vw,40px);
  font-weight:800;letter-spacing:-.025em;line-height:1;color:#E8CE7A}
.topband>span{flex:1 1 300px;font-size:14px;line-height:1.6;color:var(--muted,#9AA0A6);
  max-width:52ch}
.topband a{color:#E8CE7A}
@media(max-width:620px){.topband{gap:14px;padding:18px 20px}.topband>svg{display:none}}

.pl-top{display:inline-flex;align-items:baseline;gap:12px;margin:-6px 0 30px;
  padding:11px 18px;border-radius:12px;border:1px solid rgba(201,162,39,.4);
  background:rgba(201,162,39,.09)}
.pl-top i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:#8A6D12}
.pl-top b{font-family:Archivo,system-ui,sans-serif;font-size:27px;font-weight:800;
  letter-spacing:-.02em;color:#12151A;line-height:1}

/* --------------------------------------------------------- the certificate */
.cert{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:44px;align-items:center}
@media(max-width:860px){.cert{grid-template-columns:1fr;gap:28px}}
.cert-shot{margin:0;position:relative}
.cert-shot img{display:block;width:100%;height:auto;border-radius:10px;
  border:1px solid rgba(11,12,15,.14);
  box-shadow:0 34px 60px -30px rgba(11,12,15,.42),0 2px 0 rgba(255,255,255,.6) inset}
.cert-shot figcaption{margin-top:11px;font-size:12.2px;color:#6A7178}
.cert-pts{list-style:none;margin:18px 0 0;padding:0}
.cert-pts li{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px;
  font-size:15px;line-height:1.6;color:#3F4750}
.cert-pts b{color:#12151A;font-weight:600}
.cert-pts svg{flex:0 0 auto;width:19px;height:19px;margin-top:2px;stroke:#8A6D12;
  fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* The button used to sit at the far right of the column, which is exactly
   where the floating chat launcher lives. Stacked and left-aligned, it is
   clear of it at every width. */
.cert-verify{display:flex;flex-direction:column;align-items:flex-start;gap:13px;margin-top:22px;
  padding:14px 16px;border-radius:12px;border:1px solid rgba(11,12,15,.13);
  background:rgba(11,12,15,.03)}
.cert-verify p{margin:0;font-size:13.4px;color:#5B636B}
.cert-verify b{color:#12151A}

/* -------------------------------------------------------------- the popup */
/* visibility must flip the instant the dialog opens and only linger on the
   way out. Transitioning it in both directions left the box invisible for the
   first 320ms, so the focus call landed on an element that could not take it
   and the dialog opened with no keyboard focus at all. */
.pop{position:fixed;inset:0;z-index:120;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(11,12,15,.62);
  opacity:0;visibility:hidden;transition:opacity .32s ease,visibility 0s linear .32s}
.pop.on{opacity:1;visibility:visible;transition:opacity .32s ease,visibility 0s linear 0s}
.pop-box{position:relative;width:min(880px,100%);max-height:92vh;overflow:auto;
  background:#FBFAF7;border-radius:16px;display:grid;grid-template-columns:1.05fr .95fr;
  box-shadow:0 50px 90px -30px rgba(11,12,15,.7);
  transform:translateY(16px) scale(.985);transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.pop.on .pop-box{transform:none}
.pop-art{position:relative;background:#12151A;border-radius:16px 0 0 16px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;padding:26px;min-height:340px}
/* A portrait photograph in a landscape panel: anchor the crop near the top so
   the face survives, and let the gradient carry the words at the foot. */
.pop-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 22%;opacity:.62}
.pop-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,12,15,.25),rgba(11,12,15,.93))}
.pop-art div{position:relative;z-index:1}
.pop-art b{display:block;font-family:Archivo,system-ui,sans-serif;font-size:23px;
  font-weight:800;line-height:1.15;letter-spacing:-.018em;color:#F4F2ED;margin-bottom:8px}
.pop-art span{display:block;font-size:13.4px;line-height:1.55;color:#B9BEC4}
.pop-art i{display:inline-block;font-style:normal;font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#E8CE7A;margin-bottom:14px}
@media(max-width:720px){.pop-box{grid-template-columns:1fr}.pop-art{display:none}}
.pop-main{padding:30px 30px 26px}
.pop-main h2{font-family:Archivo,system-ui,sans-serif;font-size:24px;font-weight:800;
  letter-spacing:-.02em;color:#12151A;margin:0 0 7px;line-height:1.18}
.pop-main>p{margin:0 0 18px;font-size:14px;line-height:1.6;color:#5B636B}
.pop-f{display:flex;flex-direction:column;gap:10px}
.pop-f input,.pop-f select{width:100%;padding:12px 14px;border:1px solid rgba(11,12,15,.18);
  border-radius:10px;font:inherit;font-size:14.6px;color:#12151A;background:#fff}
.pop-f input:focus,.pop-f select:focus{outline:none;border-color:#C9A227;
  box-shadow:0 0 0 3px rgba(201,162,39,.2)}
.pop-f button{margin-top:4px;width:100%;padding:13px;border:0;border-radius:10px;cursor:pointer;
  background:#C9A227;color:#12151A;font:inherit;font-size:15px;font-weight:600;
  transition:background .18s}
.pop-f button:hover{background:#E8CE7A}
.pop-f button[disabled]{opacity:.6;cursor:default}
.pop-fine{margin:13px 0 0;font-size:11.6px;line-height:1.55;color:#8A9098}
.pop-x{position:absolute;top:10px;right:10px;z-index:3;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(11,12,15,.16);background:#fff;color:#3F4750;cursor:pointer;
  font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .18s,color .18s}
.pop-x:hover{background:#12151A;color:#F4F2ED;border-color:#12151A}
.pop-x:focus-visible{outline:2px solid #C9A227;outline-offset:2px}
.pop-ok{padding:26px 4px;text-align:center}
.pop-ok b{display:block;font-family:Archivo,system-ui,sans-serif;font-size:21px;
  font-weight:800;color:#12151A;margin-bottom:8px}
.pop-ok p{margin:0;font-size:14.2px;line-height:1.6;color:#5B636B}
.pop-err{margin:10px 0 0;font-size:13px;color:#B3261E}
@media(prefers-reduced-motion:reduce){.pop,.pop-box{transition:none}}

/* ======================================================================= lab
   The six tools. They live on a light section, so everything here is written
   for dark type on a pale ground; the accent is the same gold as the rest of
   the site, spent on the one number that matters in each panel. */
.labs{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px}
.lab{border:1px solid rgba(11,12,15,.13);border-radius:16px;background:#fff;overflow:hidden;
  transition:border-color .2s,box-shadow .2s}
.lab:hover{border-color:rgba(201,162,39,.5);box-shadow:0 18px 40px -26px rgba(11,12,15,.4)}
.lab.open{grid-column:1/-1;border-color:rgba(201,162,39,.55)}
.lab-head{display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:start;width:100%;
  padding:20px 20px 19px;border:0;background:0;cursor:pointer;text-align:left;font:inherit}
.lab-ic{flex:none;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.34)}
.lab-ic svg{width:21px;height:21px;color:#8A6D12}
.lab-t em{display:block;font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#8A6D12;margin-bottom:6px}
.lab-t b{display:block;font-family:Archivo,system-ui,sans-serif;font-size:17.5px;font-weight:800;
  letter-spacing:-.016em;color:#12151A;margin-bottom:6px;line-height:1.2}
.lab-t>span{display:block;font-size:13.6px;line-height:1.6;color:#5B636B}
.lab-go{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid rgba(11,12,15,.18);
  position:relative;margin-top:4px;transition:transform .25s,background .2s,border-color .2s}
.lab-go::before,.lab-go::after{content:"";position:absolute;top:50%;left:50%;background:#3F4750;
  transform:translate(-50%,-50%);transition:opacity .2s}
.lab-go::before{width:11px;height:1.6px}
.lab-go::after{width:1.6px;height:11px}
.lab.open .lab-go{background:#12151A;border-color:#12151A;transform:rotate(180deg)}
.lab.open .lab-go::before,.lab.open .lab-go::after{background:#E8CE7A}
.lab.open .lab-go::after{opacity:0}
.lab-panel{border-top:1px solid rgba(11,12,15,.1)}
.lf{padding:20px}

.lf-row3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:13px;margin-bottom:13px}
.lf-f{display:block;margin-bottom:13px}
.lf-f>span{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:#5B636B;margin-bottom:6px}
.lf-in{width:100%;padding:11px 13px;border:1px solid rgba(11,12,15,.2);border-radius:10px;
  font:inherit;font-size:14.6px;color:#12151A;background:#fff}
.lf-in:focus{outline:none;border-color:#C9A227;box-shadow:0 0 0 3px rgba(201,162,39,.2)}
.lf-area{min-height:120px;resize:vertical;line-height:1.6;font-size:13.6px}
.lf-cmp{display:flex;align-items:flex-end;padding-bottom:11px}
.lf-chk{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13.8px;color:#3F4750}
.lf-chk input{width:17px;height:17px;accent-color:#C9A227}
.lf-btn{width:100%;padding:13px;border:0;border-radius:11px;cursor:pointer;font:inherit;
  font-size:15px;font-weight:600;color:#12151A;
  background:linear-gradient(160deg,#E8CE7A,#C9A227 60%,#B89120);transition:filter .2s}
.lf-btn:hover{filter:brightness(1.07)}
.lf-btn:disabled{opacity:.55;cursor:default}
.lf-note{margin:0 0 15px;font-size:12.8px;line-height:1.6;color:#5B636B}
.lf-note b{color:#12151A}
.lf-out{margin-top:4px}
.lf-out:empty{margin-top:0}
.lf-wait{margin:18px 0 0;font-size:13.8px;color:#5B636B}
.lf-err{margin:14px 0 0;padding:12px 15px;border-radius:10px;font-size:13.8px;line-height:1.6;
  background:rgba(179,38,30,.07);border:1px solid rgba(179,38,30,.28);color:#8E2C22}

/* ---- numbers */
.lf-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:18px}
.lf-three{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:18px}
.lf-card{border:1px solid rgba(11,12,15,.14);border-radius:13px;padding:17px 18px;background:#FBFAF7}
.lf-city{margin:0 0 4px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:#8A6D12}
.lf-big{margin:0 0 14px;font-family:Archivo,system-ui,sans-serif;font-size:33px;font-weight:800;
  letter-spacing:-.028em;color:#12151A;line-height:1.05}
.lf-big em{display:block;font-style:normal;font-family:'IBM Plex Sans',sans-serif;font-size:12.6px;
  font-weight:400;letter-spacing:0;color:#5B636B;margin-top:5px}
.lf-stat{border:1px solid rgba(11,12,15,.14);border-radius:13px;padding:15px 16px;background:#FBFAF7}
.lf-stat b{display:block;font-family:Archivo,system-ui,sans-serif;font-size:26px;font-weight:800;
  letter-spacing:-.026em;color:#12151A;line-height:1.05}
.lf-stat em{display:block;font-style:normal;font-size:12.4px;color:#5B636B;margin-top:5px}
.lf-stat span{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8A9098;margin-top:4px}
.lf-tab{width:100%;border-collapse:collapse;font-size:13.4px}
.lf-tab td{padding:7px 0;border-bottom:1px solid rgba(11,12,15,.08);color:#4A5158}
.lf-tab td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.lf-tab tr:last-child td{border-bottom:0}
.lf-tab tr.on td{color:#12151A;font-weight:600;border-top:1px solid rgba(11,12,15,.16)}
.lf-terms td:last-child{font-weight:600;color:#12151A}
.lf-terms tr.off td{color:#9AA0A6}
.lf-terms tr.off td:last-child{font-weight:400}
.lf-verdict{margin-top:14px;padding:14px 17px;border-radius:12px;font-size:14.2px;line-height:1.6;
  background:rgba(46,107,79,.09);border:1px solid rgba(46,107,79,.3);color:#2F5745}
.lf-verdict b{color:#1E4433}
.lf-sub{margin:12px 0 0;font-size:12.8px;color:#5B636B}
.lf-sub b{color:#12151A}
.lf-fine{margin:16px 0 0;font-size:11.8px;line-height:1.65;color:#7A8188}

/* ---- bars */
.lf-bars{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.lf-bar{display:grid;grid-template-columns:178px 1fr auto;gap:12px;align-items:center;font-size:12.8px}
.lf-bar b{color:#3F4750;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-bar i{height:9px;border-radius:5px;background:linear-gradient(90deg,#C9A227,#E8CE7A);
  min-width:4px;transition:width .3s ease}
.lf-bar span{color:#5B636B;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12.2px}
.lf-bar.on b{color:#12151A;font-weight:700}
.lf-bar.on i{background:linear-gradient(90deg,#8A6D12,#C9A227)}
@media(max-width:620px){.lf-bar{grid-template-columns:1fr;gap:4px}.lf-bar i{width:100%!important}}

/* ---- documents the model produced */
.lf-doc{margin-top:20px;padding-top:20px;border-top:1px solid rgba(11,12,15,.12)}
.lf-doc h4{margin:0 0 8px;font-family:Archivo,system-ui,sans-serif;font-size:22px;font-weight:800;
  letter-spacing:-.02em;color:#12151A;line-height:1.2}
.lf-lead{margin:0 0 8px;font-size:15.6px;line-height:1.6;color:#3F4750}
.lf-meta{margin:0 0 6px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#8A6D12}
.lf-sec{margin-top:22px}
.lf-sec h5{margin:0 0 9px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:#5B636B;font-weight:400}
.lf-sec p{margin:0 0 9px;font-size:14.4px;line-height:1.65;color:#3F4750}
.lf-sec p b{color:#12151A}
.lf-list{margin:0;padding-left:19px}
.lf-list li{margin-bottom:7px;font-size:14.2px;line-height:1.6;color:#3F4750}
.lf-list li::marker{color:#C9A227}
.lf-fixes{list-style:none;padding:0;counter-reset:fx}
.lf-fixes li{counter-increment:fx;position:relative;padding-left:32px;margin-bottom:11px}
.lf-fixes li::before{content:counter(fx);position:absolute;left:0;top:0;width:22px;height:22px;
  border-radius:50%;background:rgba(201,162,39,.18);color:#8A6D12;font-family:'IBM Plex Mono',monospace;
  font-size:11px;display:flex;align-items:center;justify-content:center}
.lf-steps{list-style:none;padding:0;margin:0;counter-reset:st}
.lf-steps li{counter-increment:st;position:relative;padding-left:40px;padding-bottom:16px}
.lf-steps li::before{content:counter(st);position:absolute;left:0;top:0;width:26px;height:26px;
  border-radius:8px;background:#12151A;color:#E8CE7A;font-family:'IBM Plex Mono',monospace;
  font-size:12px;display:flex;align-items:center;justify-content:center}
.lf-steps li::after{content:"";position:absolute;left:13px;top:30px;bottom:2px;width:1px;
  background:rgba(11,12,15,.14)}
.lf-steps li:last-child::after{display:none}
.lf-steps b{display:block;font-size:14.8px;color:#12151A;margin-bottom:3px}
.lf-steps span{display:block;font-size:13.6px;line-height:1.6;color:#5B636B}
.lf-stack{font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.9;color:#12151A;
  background:rgba(11,12,15,.04);padding:13px 15px;border-radius:10px;
  border:1px solid rgba(11,12,15,.1)}
.lf-bullets{list-style:none;padding:0;margin:0}
.lf-bullets li{padding:12px 15px;margin-bottom:9px;border-radius:10px;font-size:14px;line-height:1.6;
  background:rgba(201,162,39,.09);border:1px solid rgba(201,162,39,.3);color:#12151A}
.lf-q{border:1px solid rgba(11,12,15,.13);border-radius:10px;margin-bottom:8px;overflow:hidden}
.lf-q summary{padding:12px 15px;cursor:pointer;font-size:14.2px;font-weight:600;color:#12151A;
  list-style:none}
.lf-q summary::-webkit-details-marker{display:none}
.lf-q summary::before{content:"+ ";color:#C9A227;font-weight:700}
.lf-q[open] summary::before{content:"− "}
.lf-q p{margin:0;padding:0 15px 14px;font-size:13.8px;line-height:1.65;color:#5B636B}

/* ---- scores */
.lf-scorehead{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.lf-scorehead h4{margin-bottom:5px}
.lf-scorehead p{margin:0;font-size:13.8px;line-height:1.6;color:#5B636B;max-width:44ch}
/* The ring is a div too, so a bare `> div` rule stretched it into an oval.
   Exclude it explicitly rather than relying on source order. */
.lf-scorehead>div:not(.lf-ring){flex:1 1 240px;min-width:0}
.lf-ring{flex:none;width:106px;height:106px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;position:relative;
  background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(11,12,15,.09) 0)}
.lf-ring::after{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff}
.lf-ring b,.lf-ring em{position:relative;z-index:1}
.lf-ring b{font-family:Archivo,system-ui,sans-serif;font-size:31px;font-weight:800;
  letter-spacing:-.03em;color:#12151A;line-height:1}
.lf-ring em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:8.5px;
  letter-spacing:.11em;text-transform:uppercase;color:#5B636B;margin-top:4px}
.lf-ring.good{--c:#2E6B4F}.lf-ring.mid{--c:#C9A227}.lf-ring.low{--c:#B3261E}
.lf-meters{display:flex;flex-direction:column;gap:13px}
.lf-meter{display:grid;grid-template-columns:96px 1fr 34px;gap:12px;align-items:center}
.lf-meter b{font-size:13.4px;color:#12151A;font-weight:600}
.lf-meter i{height:8px;border-radius:4px;background:rgba(11,12,15,.09);overflow:hidden}
.lf-meter s{display:block;height:100%;border-radius:4px;text-decoration:none;transition:width .4s ease}
.lf-meter u{text-decoration:none;font-family:'IBM Plex Mono',monospace;font-size:12.5px;
  text-align:right;color:#5B636B}
.lf-meter span{grid-column:2/-1;font-size:12.6px;line-height:1.55;color:#6A7178;margin-top:-4px}
.lf-meter.good s{background:#2E6B4F}.lf-meter.mid s{background:#C9A227}.lf-meter.low s{background:#B3261E}
.lf-copy{position:relative;padding:15px 17px;border-radius:11px;background:rgba(11,12,15,.04);
  border:1px solid rgba(11,12,15,.11)}
.lf-copy p{margin:0;padding-right:74px;font-size:14.2px;line-height:1.65;color:#12151A}
.lf-copybtn{position:absolute;top:11px;right:11px;padding:6px 12px;border-radius:8px;cursor:pointer;
  border:1px solid rgba(11,12,15,.18);background:#fff;font:inherit;font-size:12px;color:#3F4750}
.lf-copybtn:hover{border-color:#C9A227;color:#12151A}
.lf-kw{display:flex;flex-wrap:wrap;gap:7px;margin:0}
.lf-kw span{padding:6px 11px;border-radius:20px;font-size:12.6px;background:rgba(201,162,39,.13);
  border:1px solid rgba(201,162,39,.32);color:#6E5510}
.lf-flags{display:flex;flex-direction:column;gap:9px}
.lf-flag{display:grid;grid-template-columns:104px 1fr;gap:13px;padding:12px 15px;border-radius:10px;
  align-items:start}
.lf-flag b{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;padding-top:3px}
.lf-flag span{font-size:13.8px;line-height:1.6}
.lf-flag.high{background:rgba(179,38,30,.08);border:1px solid rgba(179,38,30,.3)}
.lf-flag.high b{color:#8E2C22}.lf-flag.high span{color:#6B2019}
.lf-flag.mid{background:rgba(201,162,39,.11);border:1px solid rgba(201,162,39,.34)}
.lf-flag.mid b{color:#8A6D12}.lf-flag.mid span{color:#5B4A15}
.lf-flag.low{background:rgba(11,12,15,.04);border:1px solid rgba(11,12,15,.11)}
.lf-flag.low b{color:#5B636B}.lf-flag.low span{color:#4A5158}
@media(max-width:560px){.lf-flag{grid-template-columns:1fr;gap:5px}
  .lf-meter{grid-template-columns:1fr auto}.lf-meter i{grid-column:1/-1;order:3}
  .lf-meter span{grid-column:1/-1;order:4}}

/* ---- the file drop */
.lf-drop{display:flex;flex-direction:column;align-items:center;gap:5px;padding:26px 20px;
  margin-bottom:15px;border:2px dashed rgba(11,12,15,.2);border-radius:13px;cursor:pointer;
  text-align:center;transition:border-color .2s,background .2s}
.lf-drop:hover{border-color:#C9A227;background:rgba(201,162,39,.05)}
.lf-drop b{font-size:14.8px;color:#12151A}
.lf-drop span{font-size:12.6px;color:#6A7178}
.lf-drop.busy{border-color:#C9A227;background:rgba(201,162,39,.07)}
.lf-drop.done{border-style:solid;border-color:rgba(46,107,79,.45);background:rgba(46,107,79,.06)}
.lf-drop.done b{color:#255A41}

/* ============================================================ booking card
   A sticky sidebar on the two course pages. It is the only thing on those
   pages with a price and a date in it, so it gets the gold and everything
   around it stays quiet. */
.phero-book{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:3rem;align-items:start}
@media(max-width:940px){.phero-book{grid-template-columns:1fr;gap:2rem}}
.bk-slot{position:sticky;top:5.5rem}
@media(max-width:940px){.bk-slot{position:static}}
.bk{border:1px solid rgba(201,162,39,.34);border-radius:var(--r);padding:1.5rem 1.55rem 1.4rem;
  background:linear-gradient(170deg,rgba(201,162,39,.07),rgba(11,12,15,.5) 62%);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bk-soon{display:inline-block;margin:0 0 .85rem;padding:.34rem .7rem;border-radius:20px;
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  background:rgba(201,162,39,.2);color:var(--gold-hi)}
.bk-k{margin:0 0 .3rem;font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--gold)}
.bk-when{margin:0 0 1.15rem;font-family:Archivo,sans-serif;font-size:1.42rem;font-weight:800;
  letter-spacing:-.025em;line-height:1.15;color:var(--silver)}
.bk-rows{list-style:none;margin:0 0 1.2rem;padding:0;display:flex;flex-direction:column;gap:.68rem}
.bk-rows li{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;line-height:1.5;
  color:var(--steel)}
.bk-rows svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--gold-lo)}
.bk-strong{color:var(--gold-hi);font-weight:600}
.bk-price{padding:1.05rem 0 .3rem;margin-bottom:1.05rem;border-top:1px solid rgba(236,237,238,.12)}
.bk-off{display:inline-block;margin:0 0 .5rem;padding:.28rem .62rem;border-radius:6px;
  font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(46,107,79,.22);color:#8FD9B4}
.bk-now{margin:0;font-family:Archivo,sans-serif;font-size:2.05rem;font-weight:800;
  letter-spacing:-.032em;line-height:1;color:var(--silver);display:flex;align-items:baseline;gap:.6rem}
.bk-now s{font-family:"IBM Plex Sans",sans-serif;font-size:1rem;font-weight:400;
  letter-spacing:0;color:var(--steel)}
.bk-emi{margin:.45rem 0 0;font-size:.82rem;color:var(--steel)}
.bk-go{display:block;margin-top:.2rem;padding:.85rem 1rem;border-radius:12px;text-align:center;
  text-decoration:none;font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:.98rem;
  color:#241C06;background-image:linear-gradient(180deg,#E6D6A4,#C9A227 48%,#A5811C);
  transition:filter .2s}
.bk-go:hover{filter:brightness(1.07)}
.bk-fine{margin:.8rem 0 0;font-size:.76rem;line-height:1.55;color:var(--steel);text-align:center}
.bk-full .bk-when{color:var(--steel)}
.bk-full .bk-go{background-image:none;background:rgba(236,237,238,.09);color:var(--silver);
  border:1px solid rgba(236,237,238,.2)}

/* ---- the social proof row under a course headline */
.proof{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin:1.5rem 0 0;
  padding-top:1.2rem;border-top:1px solid var(--line)}
.proof-n{display:flex;align-items:center;gap:.65rem}
.proof-faces{display:flex}
.proof-faces img{width:30px;height:30px;border-radius:50%;object-fit:cover;margin-left:-9px;
  border:2px solid var(--black);background:#1A1D22}
.proof-faces img:first-child{margin-left:0}
.proof-n b{font-family:Archivo,sans-serif;font-weight:800;font-size:1rem;color:var(--silver);
  letter-spacing:-.02em}
.proof-n span{font-size:.84rem;color:var(--steel)}
.proof-r{display:flex;align-items:center;gap:.45rem;font-size:.86rem;color:var(--steel)}
.proof-r b{font-family:Archivo,sans-serif;font-weight:800;font-size:1rem;color:var(--silver);
  letter-spacing:-.02em}
.proof-r svg{width:15px;height:15px;flex:none}
.proof-r .stars{color:var(--gold);letter-spacing:.08em;font-size:.8rem}

/* ---- what is included */
/* Nine items. At 268px the grid settles on four columns and leaves the ninth
   sitting alone; at 330 it settles on three and the rows come out even. */
.incl{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:1.7rem 2.2rem;
  margin-top:2.6rem}
.incl div{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.incl .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:rgba(201,162,39,.13);border:1px solid rgba(201,162,39,.3)}
.incl .ic svg{width:17px;height:17px;stroke:var(--gold);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.incl p{margin:0;font-size:.94rem;line-height:1.6;color:var(--steel)}
.incl b{color:var(--silver);font-weight:600}
.sec-light .incl .ic{background:rgba(201,162,39,.14);border-color:rgba(201,162,39,.34)}
.sec-light .incl .ic svg{stroke:#8A6D12}
.sec-light .incl p{color:#4A5158}
.sec-light .incl b{color:#12151A}

/* ---- who is this for */
.forwho{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.4rem}
@media(max-width:800px){.forwho{grid-template-columns:1fr}}
.forwho div{border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.4rem;
  background:linear-gradient(180deg,rgba(236,237,238,.035),transparent)}
.forwho.light div{border-color:rgba(11,12,15,.12);background:#fff}
.forwho h4{margin:0 0 .7rem;font-family:Archivo,sans-serif;font-size:1.02rem;font-weight:800;
  letter-spacing:-.018em;color:var(--silver);display:flex;align-items:center;gap:.55rem}
.forwho.light h4{color:#12151A}
.forwho h4 svg{width:18px;height:18px;flex:none;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.forwho .yes h4 svg{stroke:#3FA97B}
.forwho .no h4 svg{stroke:#C2695F}
.forwho ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.forwho li{font-size:.9rem;line-height:1.55;color:var(--steel);padding-left:1.1rem;position:relative}
.forwho.light li{color:#4A5158}
.forwho li::before{content:"";position:absolute;left:0;top:.55rem;width:5px;height:5px;
  border-radius:50%;background:var(--gold-lo)}

/* =========================================================================
   CREATOR PROGRAMME  ·  /creators
   The page has one job: make the money legible. Every number that decides
   whether somebody applies is set in Archivo at a size you can read across
   a room, and everything else gets out of its way.
   ========================================================================= */
.cp-hero{padding-block:clamp(3rem,7vw,5.5rem) clamp(2.5rem,5vw,4rem)}
.cp-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4rem);align-items:center}
.cp-h1{font-size:clamp(2.4rem,5.4vw,4rem);line-height:1.03;letter-spacing:-.03em;
  margin:.7rem 0 1.1rem;font-weight:900}
.cp-h1 .gold{color:var(--gold-hi)}
.cp-hero .lede{max-width:52ch}
.cp-chips{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.5rem 0 1.6rem}
.cp-chip{display:inline-flex;align-items:baseline;gap:.4rem;padding:.5rem .9rem;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(236,237,238,.04);font-size:.82rem;color:var(--steel)}
.cp-chip b{color:var(--silver);font-weight:700;font-size:.92rem}
.cp-cta{display:flex;gap:.75rem;flex-wrap:wrap}
.cp-alt{margin:1.1rem 0 0;font-size:.82rem;color:var(--steel)}
.cp-alt b{color:var(--silver);font-weight:600}

/* Two phones showing the only screen that matters: what a video paid. */
.cp-art{position:relative;min-height:340px;display:flex;justify-content:center;align-items:center}
.cp-phone{position:relative;z-index:2;width:min(230px,44vw);border-radius:26px;padding:14px;
  background:linear-gradient(160deg,#16181D,#0C0D10);
  border:1px solid var(--line-2);box-shadow:0 26px 60px rgba(0,0,0,.55)}
/* The second phone sits beside and behind the first rather than under the
   section, so the "in review" state is legible instead of a shadow. */
.cp-phone-b{position:absolute;right:-4%;top:14%;z-index:1;
  transform:rotate(8deg) scale(.8);opacity:.7}
.cp-screen{border-radius:16px;padding:16px 15px 18px;background:rgba(236,237,238,.03);
  border:1px solid var(--line);text-align:left}
.cp-pill{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:#8FD9AC;background:rgba(46,160,90,.16);border-radius:999px;padding:4px 9px}
.cp-phone-b .cp-pill{color:var(--gold-hi);background:rgba(201,162,39,.16)}
.cp-amt{display:block;font-family:Archivo,sans-serif;font-size:2.1rem;font-weight:900;letter-spacing:-.02em;
  color:var(--silver);margin:.6rem 0 .1rem}
.cp-amt.dim{color:var(--steel)}
.cp-screen s{display:block;text-decoration:none;font-size:.72rem;color:var(--steel)}
.cp-bars{display:flex;align-items:flex-end;gap:5px;height:58px;margin:1rem 0 .5rem}
.cp-bars i{flex:1;height:var(--h);border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--gold-hi),rgba(201,162,39,.25))}
.cp-scap{margin:0;font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel)}

/* The rate card. Base on the left because it is the promise; the ladder on
   the right because it is the upside. */
.cp-rates{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:1.2rem;margin-top:1.8rem}
.cp-rate-base{display:flex;flex-direction:column;justify-content:center;padding:1.8rem 1.6rem;
  border-radius:var(--r);background:linear-gradient(160deg,rgba(201,162,39,.16),rgba(201,162,39,.05));
  border:1px solid rgba(201,162,39,.4)}
.cp-rate-base i{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:#8A6D12}
.cp-rate-base b{font-family:Archivo,sans-serif;font-size:clamp(2.6rem,6vw,3.6rem);font-weight:900;
  letter-spacing:-.03em;color:var(--ink);line-height:1;margin:.4rem 0 .5rem}
.cp-rate-base span{font-size:.9rem;color:var(--ink-dim);line-height:1.5}
.cp-ladder{display:grid;gap:.5rem;align-content:center}
.cp-step{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.85rem 1.1rem;border-radius:11px;background:var(--paper-2);border:1px solid rgba(11,12,15,.1)}
.cp-step i{font-style:normal;font-size:.88rem;color:var(--ink-dim)}
.cp-step b{font-family:Archivo,sans-serif;font-size:1.1rem;font-weight:800;color:var(--ink)}
.cp-step.is-top{background:linear-gradient(120deg,rgba(201,162,39,.16),rgba(201,162,39,.06));
  border-color:rgba(201,162,39,.45)}
.cp-step.is-top b{color:#8A6D12}

.cp-sub{margin:2.4rem 0 1rem;font-family:Archivo,sans-serif;font-size:1.15rem;font-weight:800}
.cp-worked{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.cp-work{padding:1.3rem 1.35rem;border-radius:var(--r);background:var(--paper-2);
  border:1px solid rgba(11,12,15,.1)}
.cp-work i{display:block;font-style:normal;font-size:.8rem;color:var(--ink-dim);margin-bottom:.5rem}
.cp-work b{display:block;font-family:Archivo,sans-serif;font-size:1.9rem;font-weight:900;
  letter-spacing:-.02em;color:var(--ink)}
.cp-work s{display:block;text-decoration:none;font-size:.78rem;color:var(--ink-dim);margin-top:.4rem;line-height:1.5}
.cp-work.is-hi{background:linear-gradient(150deg,rgba(201,162,39,.14),rgba(201,162,39,.04));
  border-color:rgba(201,162,39,.42)}
.cp-work.is-hi b{color:#8A6D12}
.cp-fine{margin:1.3rem 0 0;font-size:.82rem;line-height:1.65;color:var(--ink-dim);max-width:72ch}
.sec:not(.sec-light) .cp-fine{color:var(--steel)}
.sec:not(.sec-light) .cp-fine b{color:var(--silver)}

/* Steps */
.cp-steps{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem;counter-reset:cp}
.cp-steps li{display:flex;gap:.9rem;align-items:flex-start;padding:1.3rem 1.35rem;border-radius:var(--r);
  background:rgba(236,237,238,.035);border:1px solid var(--line)}
.cp-steps i{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-family:Archivo,sans-serif;font-size:.85rem;font-weight:800;
  background:rgba(201,162,39,.18);color:var(--gold-hi);border:1px solid rgba(201,162,39,.4)}
.cp-steps b{display:block;font-family:Archivo,sans-serif;font-size:1rem;font-weight:800;
  color:var(--silver);margin-bottom:.35rem}
.cp-steps span{font-size:.87rem;line-height:1.6;color:var(--steel)}

/* Rules */
.cp-rules{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.cp-rules li{padding:1.2rem 1.3rem;border-radius:var(--r);background:var(--paper-2);
  border:1px solid rgba(11,12,15,.1)}
.cp-rules b{display:block;font-family:Archivo,sans-serif;font-size:.98rem;font-weight:800;
  color:var(--ink);margin-bottom:.4rem}
.cp-rules span{font-size:.86rem;line-height:1.6;color:var(--ink-dim)}
.cp-note{margin-top:1.4rem;padding:1rem 1.2rem;border-radius:12px;font-size:.87rem;line-height:1.6;
  background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.36);color:#6E5510}
.cp-note b{color:#5A4409}

/* Payouts */
.cp-pay{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem;margin-top:1.8rem}
.cp-paycard{padding:1.4rem 1.4rem;border-radius:var(--r);background:rgba(236,237,238,.035);
  border:1px solid var(--line)}
.cp-paycard i{display:block;font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.cp-paycard b{display:block;font-family:Archivo,sans-serif;font-size:1.6rem;font-weight:900;
  color:var(--silver);letter-spacing:-.02em;margin-bottom:.5rem}
.cp-paycard span{font-size:.87rem;line-height:1.6;color:var(--steel)}

/* Referral worked example */
.cp-ref{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,3rem);
  align-items:center}
.cp-refbox{padding:1.6rem 1.6rem 1.4rem;border-radius:var(--r);background:var(--paper-2);
  border:1px solid rgba(11,12,15,.12)}
.cp-refbox i{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:#8A6D12}
.cp-refbox ul{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.55rem}
.cp-refbox li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-bottom:.55rem;border-bottom:1px solid rgba(11,12,15,.09)}
.cp-refbox li span{font-size:.88rem;color:var(--ink-dim)}
.cp-refbox li b{font-family:Archivo,sans-serif;font-size:1rem;font-weight:800;color:var(--ink)}
.cp-reftot{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1rem}
.cp-reftot span{font-size:.88rem;color:var(--ink-dim)}
.cp-reftot b{font-family:Archivo,sans-serif;font-size:1.9rem;font-weight:900;letter-spacing:-.02em;color:#8A6D12}

/* Apply */
.cp-apply{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,3rem);
  align-items:start}
.cp-ticks{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.6rem}
.cp-ticks li{position:relative;padding-left:1.6rem;font-size:.92rem;color:var(--ink-dim);line-height:1.5}
.cp-ticks li::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:5px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.cp-form{display:grid;gap:.9rem;padding:1.6rem;border-radius:var(--r);background:var(--paper-2);
  border:1px solid rgba(11,12,15,.12)}
.cp-form label{display:block;font-size:.78rem;font-weight:600;color:var(--ink-dim);margin-bottom:.3rem}
.cp-form input,.cp-form select{width:100%;padding:.68rem .8rem;border-radius:10px;font:inherit;
  font-size:.92rem;color:var(--ink);background:#fff;border:1px solid rgba(11,12,15,.18)}
.cp-form input:focus,.cp-form select:focus{outline:2px solid rgba(201,162,39,.5);outline-offset:1px}
.cp-form .prow2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.cp-form .btn{justify-self:start}
.cp-formmsg{margin:0;font-size:.86rem;min-height:1.2em}
.cp-formmsg.ok{color:#1E6B34;font-weight:600}
.cp-formmsg.bad{color:#B3261E}
.cp-form .cp-fine{margin-top:0}

@media (max-width:900px){
  .cp-hero-in,.cp-rates,.cp-ref,.cp-apply{grid-template-columns:1fr}
  /* The phones are decoration; on a phone the reader already has one. */
  .cp-art{display:none}
  .cp-form .prow2{grid-template-columns:1fr}
}

/* =========================================================================
   CAREERS  ·  /careers
   Reuses the creator page's steps, ticks and form. What is new is the role
   card, which has to read well whether there is one role or six — and the
   empty state, which has to be honest rather than apologetic.
   ========================================================================= */
.cr-hero{padding-block:clamp(3rem,7vw,5rem) clamp(2rem,4vw,3rem)}
.cr-h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;letter-spacing:-.03em;
  margin:.7rem 0 1.1rem;font-weight:900;max-width:18ch}
.cr-h1 .gold{color:var(--gold-hi)}
.cr-lede{max-width:60ch}
.cr-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-top:2rem}
.cr-facts>div{padding:1.1rem 1.2rem;border-radius:var(--r);background:rgba(236,237,238,.035);
  border:1px solid var(--line)}
.cr-facts b{display:block;font-family:Archivo,sans-serif;font-size:1.05rem;font-weight:800;
  color:var(--gold-hi);margin-bottom:.35rem}
.cr-facts span{font-size:.86rem;line-height:1.55;color:var(--steel)}

.cr-roles{display:grid;gap:1.1rem;margin-top:1.8rem}
.cr-loading{margin:1.8rem 0 0;font-size:.9rem;color:var(--ink-dim)}
.cr-role{padding:1.5rem 1.6rem;border-radius:var(--r);background:var(--paper-2);
  border:1px solid rgba(11,12,15,.11)}
.cr-role-h{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.cr-role h3{margin:0;font-family:Archivo,sans-serif;font-size:1.28rem;font-weight:800;
  letter-spacing:-.01em;color:var(--ink);flex:1}
.cr-pay{display:inline-block;font-family:Archivo,sans-serif;font-size:.76rem;font-weight:800;
  letter-spacing:.02em;text-transform:none;color:#8A6D12;
  background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.36);
  border-radius:999px;padding:.22rem .65rem;white-space:nowrap;margin-left:.35rem}
.cr-meta{margin:.5rem 0 0;font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-dim);display:flex;align-items:center;
  gap:.35rem;flex-wrap:wrap}
.cr-meta em{font-style:normal;opacity:.45}
.cr-sum{margin:.85rem 0 0;font-size:1rem;line-height:1.6;color:var(--ink);font-weight:500;max-width:66ch}
.cr-points{margin:.9rem 0 0;padding-left:1.15rem;display:grid;gap:.35rem;max-width:70ch}
.cr-points li{font-size:.9rem;line-height:1.6;color:var(--ink-dim)}
.cr-apply{margin-top:1.2rem}
/* The glass button is drawn for the dark sections; on paper it needs ink. */
.sec-light .cr-apply{color:var(--ink);border-color:rgba(11,12,15,.22);background:transparent}
.sec-light .cr-apply:hover{background:rgba(11,12,15,.05)}

.cr-none{padding:1.6rem 1.7rem;border-radius:var(--r);background:var(--paper-2);
  border:1px dashed rgba(11,12,15,.2)}
.cr-none b{display:block;font-family:Archivo,sans-serif;font-size:1.1rem;font-weight:800;
  color:var(--ink);margin-bottom:.45rem}
.cr-none span{font-size:.92rem;line-height:1.6;color:var(--ink-dim)}
.cr-empty{margin-top:1.5rem;font-size:.9rem;color:var(--ink-dim)}

/* ------------------------------------------------ the next-batch bar ------
   A pill along the bottom carrying the batch that starts next. It sits above
   the mobile call bar rather than under it, because a batch that starts in
   six days outranks a phone number that is always there. */
.bbar{position:fixed;left:50%;bottom:1rem;z-index:88;transform:translate(-50%,140%);
  width:min(760px,calc(100vw - 2rem));opacity:0;pointer-events:none;
  transition:transform .34s cubic-bezier(.2,.8,.3,1),opacity .28s ease}
.bbar.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.bbar-in{display:flex;align-items:center;gap:.75rem;padding:.6rem .7rem .6rem 1rem;
  border-radius:999px;background:rgba(14,15,19,.94);backdrop-filter:blur(16px);
  border:1px solid rgba(201,162,39,.4);box-shadow:0 18px 44px rgba(0,0,0,.55)}
.bbar-k{flex:none;font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--black);
  background:linear-gradient(135deg,var(--gold-hi),var(--gold));border-radius:999px;padding:.32rem .7rem}
.bbar-t{margin:0;flex:1;min-width:0;font-size:.86rem;line-height:1.4;color:var(--steel);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The price is the fact that decides it, so it is the one thing in gold. */
.bbar-t b{color:var(--gold-hi);font-weight:700}
.bbar-t .bbar-p{color:var(--silver);font-weight:600}
.bbar-t s{text-decoration:line-through;opacity:.5;margin-right:.2rem}
.bbar-t em{font-style:normal;opacity:.35}
.bbar-go{flex:none;font-size:.82rem;font-weight:700;text-decoration:none;color:var(--black);
  background:linear-gradient(135deg,var(--gold-hi),var(--gold));border-radius:999px;
  padding:.55rem 1.05rem;transition:filter .18s ease}
.bbar-go:hover{filter:brightness(1.08)}
.bbar-x{flex:none;width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(236,237,238,.08);color:var(--steel);font-size:1.15rem;line-height:1;
  display:grid;place-items:center;transition:background .18s ease,color .18s ease}
.bbar-x:hover{background:rgba(236,237,238,.16);color:var(--silver)}

@media (max-width:1000px){
  /* Above the call bar, which owns the very bottom on a phone. */
  .bbar{bottom:4.4rem}
  /* Two lines rather than one truncated one: cutting "...starts tomorrow" off
     at the price is the half of it that makes somebody act. */
  .bbar-t{font-size:.78rem;white-space:normal;overflow:visible;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* The programme and the seat count are the first things to go; the code,
     the price and the button are what the bar is for. */
  .bbar-go{padding:.5rem .85rem;font-size:.78rem}
}
@media (max-width:520px){
  .bbar-in{padding-left:.7rem;gap:.5rem}
  .bbar-k{font-size:.6rem;padding:.28rem .55rem}
}
@media (prefers-reduced-motion:reduce){
  .bbar{transition:opacity .2s ease}
  .bbar.on{transform:translate(-50%,0)}
}

/* =====================================================================
   The jobs board (/jobs)
   =====================================================================
   The page is rendered server-side so the openings are indexable, and
   jobs.js only filters what is already in the DOM - no spinner, no empty
   first paint, and it still works with the script blocked. */

.jobs-head{padding-bottom:clamp(1.4rem,3vw,2rem)}
.jobs-body{padding-top:clamp(1.6rem,3.4vw,2.4rem)}
.jobs-head h1{font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.04;margin:.5rem 0 .8rem}
.jobs-head .lead{max-width:62ch;color:var(--steel);font-size:clamp(1rem,1.35vw,1.12rem);
  line-height:1.62;margin:0 0 1.1rem}
.jnote{max-width:66ch;font-size:.86rem;line-height:1.6;color:var(--steel);
  border-left:2px solid rgba(201,162,39,.45);padding:.5rem 0 .5rem .9rem;margin:0}
.jnote b{color:var(--gold);font-weight:700}

/* ---- filters ---- */
.jfilters{margin:0 0 1.6rem}
.jsearch{display:block;margin:0 0 1rem}
.jsearch input{width:100%;max-width:440px;font:inherit;font-size:.95rem;color:var(--silver);
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;
  padding:.7rem .9rem;transition:border-color .2s,background .2s}
.jsearch input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.07)}
.jrow{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:0 0 .6rem}
.jrow > b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-right:.4rem;
  min-width:52px}
.jchip{appearance:none;font:inherit;font-size:.82rem;cursor:pointer;color:var(--steel);
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:.34rem .72rem;transition:color .18s,border-color .18s,background .18s}
.jchip i{font-style:normal;opacity:.5;font-size:.74rem;margin-left:.15rem}
.jchip:hover{color:var(--silver);border-color:rgba(201,162,39,.55)}
.jchip.is-on{color:#11151A;background:var(--gold);border-color:var(--gold);font-weight:600}
.jchip.is-on i{opacity:.65}
.jcount{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin:0 0 1rem}

/* ---- the cards ---- */
.jgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.jcard[hidden]{display:none}
.jcard{position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.15rem 1rem;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  transition:border-color .2s,transform .2s,box-shadow .2s}
.jcard:hover{border-color:rgba(201,162,39,.45);transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.34)}
.jcard.is-feat{border-color:rgba(201,162,39,.5);
  background:linear-gradient(180deg,rgba(201,162,39,.09),rgba(255,255,255,.015))}
.jflag{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.56rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 .5rem}
.jtitle{font-family:Archivo,sans-serif;font-weight:700;font-size:1.02rem;line-height:1.3;
  margin:0 0 .45rem;color:var(--silver)}
.jmeta{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .7rem;margin:0 0 .5rem;
  font-size:.82rem;color:var(--steel)}
.jmeta b{color:var(--silver);font-weight:600}
.jpay{color:var(--gold)}
.jrole{display:inline-block;align-self:flex-start;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(201,162,39,.32);border-radius:999px;padding:.2rem .55rem;
  margin:0 0 .6rem}
.jdesc{font-size:.85rem;line-height:1.56;color:var(--steel);margin:0 0 .7rem}
.jskills{display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 .85rem}
.jskills i{font-style:normal;font-size:.7rem;color:var(--steel);background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:6px;padding:.16rem .42rem}
.jfoot{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:auto 0 0;
  padding-top:.7rem;border-top:1px solid var(--line)}
.jsave{appearance:none;font:inherit;font-size:.76rem;cursor:pointer;color:var(--steel);
  background:transparent;border:1px solid var(--line);border-radius:999px;padding:.3rem .66rem;
  transition:color .18s,border-color .18s}
.jsave:hover{color:var(--gold);border-color:rgba(201,162,39,.5)}
.jsave.is-on{color:var(--gold);border-color:var(--gold)}
.jwhen{font-size:.72rem;color:var(--steel);opacity:.75}
/* Adzuna's terms want the credit on every advert, so it is part of the card
   and not something a filter can hide. */
.jcred{margin-left:auto;font-size:.68rem;color:var(--steel);opacity:.7;text-decoration:none}
a.jcred:hover{opacity:1;color:var(--gold);text-decoration:underline}
.jcred.is-hod{color:var(--gold);opacity:.9}
.jnone,.jempty{color:var(--steel);font-size:.95rem;padding:1.4rem 0}
.jempty a{color:var(--gold)}

/* ---- the closing panel ---- */
.jcta-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.6rem;align-items:center}
.jcta-in h2{font-size:clamp(1.3rem,2.4vw,1.9rem);margin:0 0 .5rem}
.jcta-in p{color:var(--steel);font-size:.95rem;line-height:1.62;margin:0;max-width:60ch}
.jcta-btns{display:flex;flex-wrap:wrap;gap:.7rem}

/* ---- the apply sheet ---- */
.jsheet{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  padding:1.2rem;background:rgba(6,7,9,.72);backdrop-filter:blur(3px)}
.jsheet.is-on{display:flex}
.jsheet-in{width:min(520px,100%);max-height:88vh;overflow:auto;border:1px solid var(--line);
  border-radius:16px;padding:1.5rem;background:#0F1216;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.jsheet h3{font-size:1.15rem;margin:0 0 .3rem}
.jsheet .jsub{font-size:.84rem;color:var(--steel);margin:0 0 1.1rem}
.jsheet label{display:block;font-size:.78rem;color:var(--steel);margin:0 0 .3rem}
.jsheet input,.jsheet textarea{width:100%;font:inherit;font-size:.9rem;color:var(--silver);
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:9px;
  padding:.6rem .75rem;margin:0 0 .9rem}
.jsheet textarea{min-height:96px;resize:vertical}
.jsheet input:focus,.jsheet textarea:focus{outline:none;border-color:var(--gold)}
.jsheet-btns{display:flex;gap:.6rem;align-items:center}
.jmsg{font-size:.82rem;margin:.8rem 0 0;min-height:1.1em}
.jmsg.ok{color:#6FCF8A}
.jmsg.bad{color:#E88C7D}

@media(max-width:860px){
  .jcta-in{grid-template-columns:1fr}
  .jgrid{grid-template-columns:1fr}
  .jrow > b{min-width:100%;margin:0 0 .2rem}
}