/* ============================================================================
   IDM — shared styles for index.html / curriculum.html / career.html
   Colours live in :root. Change them once, every page follows.
   ============================================================================ */

:root{
  /* ── IDM palette — swap here, site-wide ── */
  --bg:#1a0505;
  --surface:#240909;
  --surface-2:#2d0d0d;
  --line:#3a1616;
  --brand:#7a0000;
  --brand-alt:#700c0c;
  --brand-lift:#9c1111;
  --accent:#f5f5dc;
  --cream:#f8f7f2;
  --cream-alt:#f9fafb;
  --ink-dark:#1a1414;
}

html{scroll-behavior:smooth;scroll-padding-top:96px;}
body{background:var(--bg);color:var(--cream);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;}
h1,h2,h3,.font-display{font-family:'Sanchez',Georgia,serif;}

.btn-primary{
  background:linear-gradient(180deg,var(--brand-lift) 0%,var(--brand) 100%);
  color:var(--cream);
  box-shadow:0 8px 30px -8px rgba(156,17,17,.7);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px -8px rgba(156,17,17,.9);filter:brightness(1.12);}

.btn-ghost{border:1px solid var(--line);transition:border-color .18s ease,background .18s ease,color .18s ease;}
.btn-ghost:hover{border-color:var(--brand-lift);background:rgba(156,17,17,.12);color:var(--cream);}

.card{background:var(--surface);border:1px solid var(--line);transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;}
.card:hover{border-color:var(--brand-lift);transform:translateY(-4px);box-shadow:0 18px 50px -20px rgba(156,17,17,.55);}

.eyebrow{letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;font-weight:600;color:var(--accent);font-family:'Inter',sans-serif;}

/* hero wash — deep maroon bloom */
.hero-wash{
  background:
    radial-gradient(1100px 620px at 50% -10%, rgba(156,17,17,.42), transparent 62%),
    radial-gradient(760px 460px at 88% 78%, rgba(122,0,0,.34), transparent 62%),
    var(--bg);
}
/* shorter wash for the interior page headers */
.page-wash{
  background:
    radial-gradient(900px 420px at 50% -20%, rgba(156,17,17,.38), transparent 65%),
    var(--bg);
}
.grid-overlay{
  background-image:linear-gradient(rgba(248,247,242,.030) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(248,247,242,.030) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 35%,#000 40%,transparent 100%);
          mask-image:radial-gradient(ellipse 80% 65% at 50% 35%,#000 40%,transparent 100%);
}

@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track{animation:marquee 42s linear infinite;width:max-content;display:flex;}
/* second row runs the other way, and slightly slower so the two never
   sync up into looking like one block */
.marquee-track.reverse{animation-direction:reverse;animation-duration:52s;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-set{display:flex;gap:1rem;flex:0 0 auto;padding-right:1rem;}

.skill-chip{
  flex:0 0 auto;white-space:nowrap;
  border-radius:9999px;padding:.65rem 1.35rem;font-size:.9rem;
  background:var(--surface);border:1px solid var(--line);color:rgba(248,247,242,.72);
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.skill-chip:hover{border-color:var(--brand-lift);color:var(--cream);background:rgba(156,17,17,.14);}

/* white tiles: four of the brand marks are dark or red ink, which would
   disappear against the maroon if set bare on the background */
.logo-tile{
  flex:0 0 auto;display:grid;place-items:center;
  height:5.25rem;width:11.5rem;padding:.9rem 1rem;
  border-radius:.9rem;background:#fff;
  border:1px solid rgba(248,247,242,.14);
  transition:transform .25s ease,box-shadow .25s ease;
}
/* explicit cap, not max-height:100% — a percentage resolves against an
   indefinite grid area here and gets dropped, so the square marks sized
   off max-width alone and spilled out of the tile.
   The source files are trimmed to their artwork, so the marks fill this
   box; square logos hit the height cap, wordmarks hit the width cap. */
.logo-tile img{
  max-height:2.75rem;max-width:100%;
  width:auto;height:auto;object-fit:contain;
}
.logo-tile:hover{transform:translateY(-3px);box-shadow:0 16px 34px -16px rgba(0,0,0,.7);}
/* on a light section the tile's pale border vanishes, so darken it there */
.bg-cream .logo-tile{border-color:rgba(26,20,20,.12);box-shadow:0 2px 10px -6px rgba(26,20,20,.35);}
.bg-cream .logo-tile:hover{box-shadow:0 14px 30px -14px rgba(122,0,0,.45);}
@media (max-width:640px){
  .logo-tile{height:4.5rem;width:9.5rem;padding:.75rem .9rem;}
  .logo-tile img{max-height:2.25rem;}
}

details>summary{list-style:none;cursor:pointer;}
details>summary::-webkit-details-marker{display:none;}
details[open] .chev{transform:rotate(45deg);}
.chev{transition:transform .25s ease;}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .marquee-track{animation:none;}
  html{scroll-behavior:auto;}
  /* every decorative motion added for polish is switched off here */
  .aurora span{animation:none;}
  .btn-primary:hover::after{animation:none;}
  .scroll-bar{transition:none;}
  .card::before{transition:none;}
  nav a::after{transition:none;}
  .modal[open]{animation:none;}
  .hero-figure{animation:none;}
  .seat-pill,.seat-pill::before,.seat-pill::after,.seat-dot{animation:none;}
}

/* ══════════════════════════════════════════════════════════════════
   INTERACTION & DEPTH
   Everything below is decorative. All of it is switched off under
   prefers-reduced-motion at the end of this file.
══════════════════════════════════════════════════════════════════ */

/* ── scroll progress, sitting on the bottom edge of the nav ─────── */
.scroll-bar{
  position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:linear-gradient(90deg,var(--brand),var(--brand-lift),var(--accent));
  box-shadow:0 0 12px rgba(156,17,17,.8);
  transition:width .12s linear;
}

/* ── drifting aurora behind the hero ────────────────────────────── */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.aurora span{
  position:absolute;display:block;border-radius:50%;
  filter:blur(90px);opacity:.42;will-change:transform;
}
.aurora span:nth-child(1){
  width:46vw;height:46vw;left:-8vw;top:-14vw;
  background:radial-gradient(circle,rgba(156,17,17,.85),transparent 68%);
  animation:drift-a 26s ease-in-out infinite;
}
.aurora span:nth-child(2){
  width:38vw;height:38vw;right:-6vw;top:6vw;
  background:radial-gradient(circle,rgba(122,0,0,.8),transparent 68%);
  animation:drift-b 32s ease-in-out infinite;
}
.aurora span:nth-child(3){
  width:30vw;height:30vw;left:38%;bottom:-14vw;
  background:radial-gradient(circle,rgba(245,245,220,.14),transparent 70%);
  animation:drift-c 38s ease-in-out infinite;
}
@keyframes drift-a{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,4vw,0) scale(1.12)}}
@keyframes drift-b{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-5vw,6vw,0) scale(.9)}}
@keyframes drift-c{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-7vw,-5vw,0) scale(1.18)}}

/* film grain — stops the large flat gradients looking like banding */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── cursor spotlight on cards ──────────────────────────────────── */
.card{position:relative;isolation:isolate;}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),
             rgba(156,17,17,.30),transparent 62%);
  opacity:0;transition:opacity .35s ease;
}
.card:hover::before{opacity:1;}
/* keep the content above the wash */
.card > *{position:relative;z-index:1;}

/* ── shine sweep across the primary button ──────────────────────── */
.btn-primary{position:relative;overflow:hidden;}
.btn-primary::after{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  transform:skewX(-22deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
}
.btn-primary:hover::after{animation:shine .85s cubic-bezier(.3,.7,.4,1);}
@keyframes shine{from{left:-70%}to{left:130%}}

/* ── nav links get an underline that wipes in ───────────────────── */
nav a{position:relative;}
nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:right;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
nav a:hover::after,
nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left;}
nav a.btn-primary::after{display:none;}

/* ── headline number band ───────────────────────────────────────── */
.stat-num{
  font-family:'Sanchez',Georgia,serif;line-height:1;
  font-size:clamp(2.1rem,4vw,3.1rem);
  background:linear-gradient(180deg,var(--cream) 20%,var(--accent) 60%,rgba(245,245,220,.55));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ── "20 seats only" pill ───────────────────────────────────────────
   Three layers reading as scarcity: a light tracing the border, a sheen
   crossing the face, and the whole pill breathing. Registering the angle
   as a custom property is what lets the conic gradient interpolate — a
   plain custom property would jump rather than sweep.
   ─────────────────────────────────────────────────────────────────── */
@property --pill-angle{syntax:'<angle>';initial-value:0deg;inherits:false;}

.seat-pill{
  position:relative;border-radius:9999px;
  animation:pill-breathe 3.8s ease-in-out infinite;
}
/* the travelling border light, masked to a ring so it does not flood the pill */
.seat-pill::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;
  pointer-events:none;
  background:conic-gradient(from var(--pill-angle),
    transparent 0deg, rgba(156,17,17,.35) 45deg,
    var(--brand-lift) 88deg, var(--accent) 122deg, var(--brand-lift) 156deg,
    rgba(156,17,17,.35) 200deg, transparent 250deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:pill-spin 3.8s linear infinite;
}
/* sheen sweeping the face, timed to land just after the light passes the top */
.seat-pill::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(245,245,220,.20) 50%,transparent 62%);
  background-size:260% 100%;
  animation:pill-sheen 3.8s ease-in-out infinite;
}
@keyframes pill-spin{to{--pill-angle:360deg;}}
@keyframes pill-sheen{0%,55%{background-position:190% 0}100%{background-position:-90% 0}}
@keyframes pill-breathe{
  0%,100%{box-shadow:0 0 0 0 rgba(156,17,17,.0);}
  50%    {box-shadow:0 0 24px 1px rgba(156,17,17,.45);}
}
/* the live dot, brighter than a plain ping */
.seat-dot{animation:seat-dot 3.8s ease-in-out infinite;}
@keyframes seat-dot{
  0%,100%{box-shadow:0 0 0 0 rgba(245,245,220,.55);}
  50%    {box-shadow:0 0 10px 2px rgba(245,245,220,.85);}
}

/* ── intro video beside the join steps ──────────────────────────── */
.join-video-frame{
  position:relative;border-radius:1.1rem;overflow:hidden;
  border:1px solid var(--line);background:var(--surface);
  box-shadow:0 26px 60px -28px rgba(0,0,0,.8);
}
.join-video-frame::after{         /* brand edge light, matches the cards */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(248,247,242,.10);
}
.join-video{display:block;width:100%;height:auto;background:var(--bg);}

/* ── hero figure ────────────────────────────────────────────────── */
.hero-figure{
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
  animation:hero-float 7s ease-in-out infinite;
}
@keyframes hero-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* warm bloom behind the cut-out so it does not float on a flat field */
.hero-figure-glow{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:88%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(156,17,17,.55),rgba(122,0,0,.22) 45%,transparent 70%);
  filter:blur(46px);
}

/* ── brochure modal ─────────────────────────────────────────────── */
.modal{
  width:min(30rem,calc(100vw - 2rem));
  padding:2rem 1.75rem;border:1px solid var(--line);border-radius:1.25rem;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  color:var(--cream);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85);
}
.modal::backdrop{
  background:rgba(12,2,2,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
/* forwards, so a throttled or interrupted animation can never strand
   the panel on its opening keyframe (opacity 0) while it is open */
.modal[open]{animation:modal-in .3s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes modal-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

.modal-x{
  position:absolute;top:.85rem;right:1rem;
  width:2rem;height:2rem;border-radius:9999px;line-height:1;
  font-size:1.4rem;color:rgba(248,247,242,.55);
  background:none;border:0;cursor:pointer;
  transition:color .2s ease,background .2s ease;
}
.modal-x:hover{color:var(--cream);background:rgba(248,247,242,.08);}

.modal-label{display:block;font-size:.85rem;font-weight:500;margin:0 0 .5rem;}
.modal-input{
  width:100%;margin-bottom:1rem;
  border-radius:.55rem;background:var(--bg);border:1px solid var(--line);
  padding:.75rem 1rem;font-size:.95rem;color:var(--cream);
  outline:none;transition:border-color .2s ease;
}
.modal-input:focus{border-color:var(--brand-lift);}
.modal-input:user-invalid{border-color:#b4413f;}
.modal-error{
  margin:.25rem 0 0;font-size:.85rem;color:#ff9a97;
}

/* ── legal pages: readable long-form text ───────────────────────── */
.legal{font-size:.98rem;line-height:1.75;color:rgba(248,247,242,.72);}
.legal h2{
  font-family:'Sanchez',Georgia,serif;font-size:1.25rem;color:var(--cream);
  margin:2.4rem 0 .8rem;padding-top:1.6rem;border-top:1px solid var(--line);
}
.legal h2:first-of-type{margin-top:1.6rem;}
.legal p{margin-bottom:1.1rem;}
.legal p:last-child{margin-bottom:0;}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}

/* ── typical course vs IDM ──────────────────────────────────────────
   A framed table: header band, ruled columns and rows, the IDM column
   tinted top to bottom. The first version only had horizontal rules,
   which read as a list rather than a comparison.
   ─────────────────────────────────────────────────────────────────── */
.compare-frame{
  border:1px solid var(--line);border-radius:1rem;overflow:hidden;
  background:var(--surface);
  box-shadow:0 22px 60px -34px rgba(0,0,0,.75);
}
.compare{width:100%;border-collapse:collapse;text-align:left;}

/* white header band, so the column titles read off the dark body */
.compare thead th{
  background:#fff;
  font-family:'Inter',sans-serif;font-size:.86rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(26,20,20,.78);
  padding:1.15rem 1.25rem;
  border-bottom:1px solid rgba(26,20,20,.14);
  white-space:nowrap;
}
.compare thead th + th{border-left:1px solid rgba(26,20,20,.10);}
/* the IDM header stays white but takes the brand colour, so the column
   it heads is still identifiable from the top down */
.compare thead th.is-idm{color:var(--brand);}

/* Inter, not Sanchez: only regular and italic Sanchez are loaded, so
   asking it for bold would give a synthesised, mushy weight */
.compare tbody th{
  font-family:'Inter',sans-serif;font-weight:700;
  font-size:1.06rem;color:var(--accent);letter-spacing:.01em;
  padding:1.05rem 1.25rem;width:20%;vertical-align:middle;
}
.compare tbody td{
  font-size:1rem;font-weight:500;color:rgba(248,247,242,.78);
  padding:1.05rem 1.25rem;vertical-align:middle;width:40%;
}
/* rule every column and row, which is what makes it read as a table */
.compare tbody th,
.compare tbody td{border-right:1px solid var(--line);}
.compare tbody td:last-child{border-right:0;}
.compare tbody tr + tr th,
.compare tbody tr + tr td{border-top:1px solid var(--line);}
.compare tbody tr:nth-child(even) th,
.compare tbody tr:nth-child(even) td{background:rgba(248,247,242,.02);}
.compare tbody tr:hover th,
.compare tbody tr:hover td{background:rgba(156,17,17,.10);}

/* the IDM column carries the argument, so it stays lit the whole way down */
.compare tbody td.is-idm{
  color:#fff;font-weight:700;
  background:rgba(156,17,17,.15);
}
.compare tbody tr:nth-child(even) td.is-idm{background:rgba(156,17,17,.19);}
.compare tbody tr:hover td.is-idm{background:rgba(156,17,17,.26);}
.compare td.is-idm::before{
  content:"✓";
  color:var(--accent);font-weight:700;margin-right:.55rem;
}

@media (max-width:767px){
  .compare-frame{border:0;border-radius:0;background:none;box-shadow:none;}
  .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .compare, .compare tbody, .compare tr, .compare th, .compare td{display:block;width:auto;}
  .compare tbody tr{
    border:1px solid var(--line);border-radius:.9rem;
    background:var(--surface);margin-bottom:.75rem;overflow:hidden;
  }
  .compare tbody tr + tr th{border-top:0;}
  .compare tbody th{
    width:auto;padding:.85rem 1rem .35rem;font-size:1.12rem;color:var(--accent);
    border-right:0;background:none;
  }
  .compare tbody td{
    width:auto;padding:.6rem 1rem;font-size:1rem;border-right:0;border-top:0;background:none;
  }
  .compare tbody tr:nth-child(even) th,
  .compare tbody tr:nth-child(even) td{background:none;}
  .compare tbody td::before{
    content:attr(data-label);display:block;
    font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
    color:rgba(248,247,242,.38);margin-bottom:.15rem;font-weight:600;
  }
  .compare tbody td.is-idm{
    background:rgba(156,17,17,.16);
    margin:.3rem .7rem .75rem;padding:.6rem .8rem;border-radius:.6rem;
  }
  .compare tbody td.is-idm::before{content:attr(data-label);color:var(--accent);}
}

/* ── footer ─────────────────────────────────────────────────────── */
.foot-title{
  font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.1rem;
}
.foot-links{list-style:none;display:flex;flex-direction:column;gap:.65rem;}
.foot-links a{
  font-size:.9rem;color:rgba(248,247,242,.62);
  transition:color .2s ease,padding-left .2s ease;
}
.foot-links a:hover{color:var(--cream);padding-left:.25rem;}

.foot-contact{display:inline-flex;align-items:center;gap:.6rem;font-size:.9rem;color:rgba(248,247,242,.62);}
.foot-contact svg{width:1rem;height:1rem;flex:0 0 auto;color:var(--accent);}
a.foot-contact:hover{color:var(--cream);}

.foot-socials{display:flex;gap:.6rem;flex-wrap:wrap;}
.foot-social{
  width:2.25rem;height:2.25rem;border-radius:9999px;
  display:grid;place-items:center;
  border:1px solid var(--line);color:rgba(248,247,242,.7);
  transition:border-color .2s ease,color .2s ease,background .2s ease,transform .2s ease;
}
.foot-social svg{width:1.05rem;height:1.05rem;}
a.foot-social:hover{
  border-color:var(--brand-lift);color:var(--cream);
  background:rgba(156,17,17,.18);transform:translateY(-2px);
}
/* rendered when no profile URL is set: visible, but plainly not a link */
.foot-social.is-off{opacity:.3;cursor:default;}

@media (prefers-reduced-motion:reduce){
  .foot-links a,.foot-social{transition:none;}
  a.foot-social:hover{transform:none;}
}

/* ── floating contact buttons ───────────────────────────────────── */
.fab-stack{
  position:fixed;right:1rem;bottom:1rem;z-index:60;
  display:flex;flex-direction:column;gap:.7rem;
}
.fab{
  width:3.25rem;height:3.25rem;border-radius:9999px;
  display:grid;place-items:center;color:#fff;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.6);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.fab:hover{transform:translateY(-3px) scale(1.05);filter:brightness(1.08);
  box-shadow:0 16px 34px -10px rgba(0,0,0,.7);}
.fab svg{width:1.6rem;height:1.6rem;}
.fab-wa{background:#25d366;}
.fab-call{background:linear-gradient(180deg,var(--brand-lift),var(--brand));}
/* a soft pulse so the pair is noticed once, without nagging */
.fab-call::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(156,17,17,.55);
  animation:fab-pulse 2.6s ease-out infinite;
}
.fab{position:relative;}
@keyframes fab-pulse{
  0%{box-shadow:0 0 0 0 rgba(156,17,17,.5);}
  70%{box-shadow:0 0 0 14px rgba(156,17,17,0);}
  100%{box-shadow:0 0 0 0 rgba(156,17,17,0);}
}
@media (min-width:640px){
  .fab-stack{right:1.5rem;bottom:1.5rem;}
  .fab{width:3.5rem;height:3.5rem;}
}
@media (prefers-reduced-motion:reduce){
  .fab{transition:none;}
  .fab-call::after{animation:none;}
}

/* ── success stories carousel ───────────────────────────────────────
   Mirrors the reference layout: tinted photo panel on top, white detail
   panel below, cards peeking at both edges, arrows and a progress bar.
   Palette is IDM's rather than the reference's yellow.
   ─────────────────────────────────────────────────────────────────── */
.stories-wrap{position:relative;}

/* faces stacked above the heading */
.story-faces{display:flex;justify-content:center;}
.story-face{
  width:2.6rem;height:2.6rem;border-radius:9999px;margin-left:-.7rem;
  display:grid;place-items:center;overflow:hidden;
  border:2px solid #fff;box-shadow:0 2px 8px rgba(26,20,20,.18);
  font-family:'Sanchez',Georgia,serif;font-size:.8rem;color:var(--cream);
}
.story-face:first-child{margin-left:0;}
.story-face img{width:100%;height:100%;object-fit:cover;}

/* the rail */
.story-track{
  display:flex;gap:1.25rem;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding:0 1rem;
  padding:.5rem .25rem 1.25rem;
  scrollbar-width:none;-ms-overflow-style:none;
}
.story-track::-webkit-scrollbar{display:none;}

.story{
  flex:0 0 clamp(15rem,80vw,17.5rem);scroll-snap-align:center;
  background:#fff;border:1px solid rgba(26,20,20,.10);border-radius:1rem;
  overflow:hidden;box-shadow:0 10px 30px -18px rgba(26,20,20,.35);
  transition:transform .25s ease,box-shadow .25s ease;
}
.story:hover{transform:translateY(-4px);box-shadow:0 20px 44px -20px rgba(122,0,0,.42);}

.story-photo{
  position:relative;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;
}
.story-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.story-initials{
  font-family:'Sanchez',Georgia,serif;font-size:2.6rem;
  color:rgba(248,247,242,.55);letter-spacing:.05em;
}

.story-body{padding:1.1rem 1.15rem 1.25rem;text-align:center;}
.story-name{font-family:'Sanchez',Georgia,serif;font-size:1.02rem;color:var(--ink-dark);}
.story-company{
  margin-top:.4rem;font-size:.82rem;font-weight:600;color:var(--brand);
  text-transform:uppercase;letter-spacing:.08em;
}
.story-move{
  display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;
  margin-top:.85rem;font-size:.78rem;color:rgba(26,20,20,.65);
}
.story-from{border:1px solid rgba(26,20,20,.16);border-radius:9999px;padding:.15rem .6rem;}
.story-arrow{color:var(--brand);font-weight:700;}
.story-to{font-weight:600;color:var(--ink-dark);}
.story-pkg{
  margin-top:.95rem;padding-top:.8rem;border-top:1px solid rgba(26,20,20,.10);
  font-size:.8rem;color:rgba(26,20,20,.55);
}
.story-pkg strong{color:var(--brand);font-size:.95rem;margin-left:.35rem;}

/* the closing call-to-action card */
.story-cta{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:2rem 1.5rem;background:#fff;
}
.story-cta .btn-ghost{border-color:rgba(26,20,20,.2);color:var(--ink-dark);}
.story-cta .btn-ghost:hover{border-color:var(--brand);background:rgba(122,0,0,.06);color:var(--brand);}

/* arrows + progress */
.story-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:.5rem;}
.story-btn{
  width:2.4rem;height:2.4rem;flex:0 0 auto;border-radius:9999px;
  display:grid;place-items:center;cursor:pointer;
  background:#fff;border:1px solid rgba(26,20,20,.18);color:var(--ink-dark);
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.story-btn:hover{border-color:var(--brand);color:var(--brand);background:rgba(122,0,0,.05);}
.story-rail{
  position:relative;height:3px;width:min(16rem,45vw);border-radius:9999px;
  background:rgba(26,20,20,.14);overflow:hidden;
}
.story-rail span{
  position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--brand),var(--brand-lift));
  transition:width .18s linear;
}

@media (prefers-reduced-motion:reduce){
  .story{transition:none;}
  .story-rail span{transition:none;}
}

/* ── frosted nav ──────────────────────────────────────────────────
   ONE state, never changes on scroll. The base is a near-opaque maroon
   rather than a white tint: a translucent light layer takes on whatever
   passes behind it, so the bar went pale the moment the cream section
   scrolled under it. At .94 the bar reads identical over the hero, the
   cream sections and the image panels alike, while the blur still runs
   underneath and softens what shows through.
   ─────────────────────────────────────────────────────────────────── */
.nav-glass{
  background:linear-gradient(180deg,rgba(32,9,9,.94) 0%,rgba(24,6,6,.94) 100%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
          backdrop-filter:blur(20px) saturate(170%);
  border-bottom:1px solid rgba(248,247,242,.12);
  box-shadow:inset 0 1px 0 rgba(248,247,242,.14),
             0 10px 34px -16px rgba(0,0,0,.6);
}
/* the sheen that sells the "glossy" part — fixed height, so it stays on
   the bar instead of stretching when the mobile drawer opens */
.nav-glass::after{
  content:"";position:absolute;inset:0 0 auto 0;height:38px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent);
  pointer-events:none;
}
/* no backdrop-filter support — fall back to a fully solid bar */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-glass{background:#1d0707;}
}

/* mobile drawer matches the bar */
.nav-drawer{
  background:linear-gradient(180deg,rgba(36,9,9,.86),rgba(26,5,5,.92));
  -webkit-backdrop-filter:blur(22px) saturate(180%);
          backdrop-filter:blur(22px) saturate(180%);
  border-top:1px solid rgba(248,247,242,.12);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-drawer{background:rgba(26,5,5,.97);}
}

/* ── "what happens when you join" — stepped progression ───────────
   Mobile: a 2-up grid, so six steps take three rows instead of a very
   long single column. From 768px up it becomes the timeline.
   ─────────────────────────────────────────────────────────────────── */
.journey{
  list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;position:relative;
}
.journey-step{
  position:relative;display:flex;flex-direction:column;gap:.7rem;
  padding:1.15rem 1rem;border-radius:.9rem;
  background:var(--surface);border:1px solid var(--line);
}
.journey-dot{
  flex:0 0 auto;width:2.4rem;height:2.4rem;
  display:grid;place-items:center;border-radius:9999px;
  background:rgba(156,17,17,.18);border:1px solid var(--line);
  font-family:'Sanchez',Georgia,serif;font-size:.82rem;color:var(--cream);
  transition:background .3s ease,border-color .3s ease,color .3s ease,transform .3s ease;
}
.journey-step.is-payoff{
  border-color:rgba(245,245,220,.35);
  background:linear-gradient(120deg,rgba(156,17,17,.30),rgba(36,9,9,.6));
}
.journey-step.is-payoff .journey-dot{
  border-color:var(--accent);color:var(--accent);background:rgba(245,245,220,.10);
}

@media (min-width:768px){
  .journey{display:block;}
  /* the spine the markers sit on */
  .journey::before{
    content:"";position:absolute;left:1.75rem;top:1.25rem;bottom:1.25rem;width:2px;
    background:linear-gradient(180deg,var(--line),var(--brand-lift) 82%,var(--accent));
  }
  .journey-step{
    flex-direction:row;align-items:flex-start;gap:1.75rem;
    padding:1.35rem 1.5rem 1.35rem 0;
    background:none;border:0;border-radius:1rem;
  }
  .journey-dot{
    position:relative;z-index:1;flex:0 0 3.5rem;width:auto;height:3.5rem;
    font-size:1rem;background:var(--surface);border:1px solid var(--line);
  }
  .journey-step:hover .journey-dot{
    border-color:var(--brand-lift);
    background:linear-gradient(180deg,var(--brand-lift),var(--brand));
    transform:scale(1.08);
  }
  .journey-step.is-payoff{
    margin-top:.5rem;padding-left:0;
    background:linear-gradient(90deg,rgba(156,17,17,.22),transparent 70%);
    border:0;
  }
  .journey-step.is-payoff .journey-dot{background:rgba(245,245,220,.08);}
}
@media (prefers-reduced-motion:reduce){
  .journey-dot{transition:none;}
  .journey-step:hover .journey-dot{transform:none;}
}

/* ── "five layers" — image panels, expanding accordion ─────────────
   Driven by .is-open, NOT :hover — hover does not exist on touch, so a
   phone got no interaction at all. site.js sets .is-open on mouseenter
   where a fine pointer exists, and on tap everywhere.

   Below 1024px: a vertical stack. Every card shows its heading; the open
   one reveals its chips and comes to full colour.
   From 1024px up: the horizontal accordion from the reference — the open
   panel widens and colours in, the rest stay narrow and washed out.
   ─────────────────────────────────────────────────────────────────── */
.layers{display:flex;flex-direction:column;gap:1rem;}

.layer{
  position:relative;overflow:hidden;border-radius:1rem;isolation:isolate;
  border:1px solid rgba(26,20,20,.10);padding:1.5rem;cursor:pointer;
  transition:border-color .3s ease,box-shadow .3s ease;
}
.layer:focus-visible{outline:2px solid var(--brand-lift);outline-offset:3px;}
.layer.is-open{
  border-color:rgba(122,0,0,.45);
  box-shadow:0 22px 48px -24px rgba(122,0,0,.55);
}

.layer-bg{
  position:absolute;inset:0;z-index:-2;
  background-color:var(--bg);background-size:cover;background-position:center;
  filter:grayscale(.8) brightness(1.35) opacity(.55);
  transition:filter .55s ease,transform .8s cubic-bezier(.2,.7,.3,1);
}
.layer.is-open .layer-bg{filter:none;transform:scale(1.04);}

.layer-scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(26,5,5,.30) 0%,rgba(26,5,5,.80) 62%,rgba(26,5,5,.93) 100%);
  opacity:.55;transition:opacity .45s ease;
}
.layer.is-open .layer-scrim{opacity:1;}

/* brand rail down the leading edge */
.layer-rail{
  position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,var(--brand-lift),var(--brand));
  transform:scaleY(0);transform-origin:top;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.layer.is-open .layer-rail{transform:scaleY(1);}

/* type sits on the image, so it is cream throughout */
.layer-h{position:relative;width:100%;}
.layer-head{display:flex;align-items:baseline;gap:1rem;}
.layer-num{font-family:'Sanchez',Georgia,serif;font-size:2.1rem;line-height:1;color:var(--accent);opacity:.8;}
.layer-name{font-family:'Sanchez',Georgia,serif;font-size:1.3rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--cream);}

/* chips fold away until the card is opened */
.layer-chips{
  display:flex;flex-wrap:wrap;gap:.5rem;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s cubic-bezier(.2,.7,.3,1),opacity .3s ease,margin-top .5s ease;
}
.layer.is-open .layer-chips{max-height:24rem;opacity:1;margin-top:1.15rem;}
.layer-chip{
  border-radius:9999px;padding:.375rem 1rem;font-size:.86rem;
  background:rgba(248,247,242,.10);border:1px solid rgba(248,247,242,.24);
  color:rgba(248,247,242,.88);
}
.layer-v{display:none;}

@media (min-width:1024px){
  .layers{flex-direction:row;gap:.7rem;height:25rem;}

  .layer{
    flex:1 1 0;min-width:0;padding:1.6rem 1.35rem;
    display:flex;align-items:center;justify-content:center;
    transition:flex-grow .55s cubic-bezier(.2,.7,.3,1),
               border-color .35s ease,box-shadow .35s ease;
  }
  /* collapsed: washed to near-white, like the reference */
  .layer .layer-bg{filter:grayscale(1) brightness(2.6) opacity(.30);}
  .layer .layer-scrim{opacity:0;}
  .layer.is-open{flex-grow:4.6;}
  .layer.is-open .layer-scrim{opacity:1;}

  /* collapsed spine label — dark, the panel behind it is pale */
  .layer-v{
    display:flex;align-items:center;gap:1.1rem;
    writing-mode:vertical-rl;transform:rotate(180deg);
    white-space:nowrap;transition:opacity .3s ease;
  }
  .layer-v-num{font-family:'Sanchez',Georgia,serif;font-size:1.5rem;line-height:1;color:rgba(122,0,0,.45);}
  .layer-v-name{font-family:'Sanchez',Georgia,serif;font-size:1.05rem;text-transform:uppercase;
    letter-spacing:.16em;color:var(--brand-alt);}
  .layer.is-open .layer-v{opacity:0;}

  /* expanded content, pinned bottom-left like the reference */
  .layer-h{
    position:absolute;left:1.6rem;right:1.6rem;bottom:1.6rem;width:auto;
    opacity:0;transform:translateY(8px);pointer-events:none;
    transition:opacity .35s ease .08s,transform .35s ease .08s;
  }
  .layer.is-open .layer-h{opacity:1;transform:none;pointer-events:auto;}
  .layer-num{font-size:2.3rem;}
  .layer-name{font-size:1.45rem;white-space:nowrap;}
  /* on desktop the chips are always shown inside the open panel */
  .layer.is-open .layer-chips{margin-top:1.25rem;}
  .layer-chip{white-space:nowrap;}
}

@media (prefers-reduced-motion:reduce){
  .layer,.layer-rail,.layer-h,.layer-bg,.layer-scrim,.layer-chips{transition:none;}
}

/* current page in the top nav */
nav a[aria-current="page"]{color:var(--cream);}

::selection{background:var(--brand-lift);color:var(--cream);}