/* =========================================================
   GNOSIS — Sub-page components (About / Work / Speaking)
   Extends homepage.css. Loaded after it.
   ========================================================= */

/* Sub-pages skip the intro overlay — nav must show */
body.no-intro{}
body.no-intro .nav{transform:translateY(0)}

/* ===== PAGE HERO — full-bleed media with text overlay (text & media INTENTIONALLY overlap) ===== */
.page-hero{position:relative;padding:clamp(12px,1.5vw,22px);min-height:82vh}
.page-hero-frame{position:relative;width:100%;min-height:82vh;border-radius:clamp(16px,2vw,26px);overflow:hidden;background:var(--night);isolation:isolate;display:block}

/* Full-bleed background media */
.ph-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;z-index:1;will-change:transform}
.ph-bg-img{opacity:.78}
.ph-bg-video{opacity:.9;transition:opacity 1s ease}

/* Legibility wash on top of media */
.page-hero-frame::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 30%,rgba(0,0,0,.45) 70%,rgba(0,0,0,.92) 100%),
             linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.05) 55%,rgba(0,0,0,0) 100%)}
.page-hero-frame::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.08;
  background-image:repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(255,255,255,.06) 2px,rgba(255,255,255,.06) 3px)}

/* Text overlay */
.page-hero-content{position:relative;z-index:5;padding:clamp(120px,12vw,170px) clamp(24px,3.5vw,48px) clamp(48px,5vw,72px);
  display:flex;flex-direction:column;justify-content:flex-end;min-height:82vh;max-width:1400px;margin:0 auto}
.page-hero-eyebrow{margin-bottom:24px}
.page-hero-content h1{font:300 clamp(52px,9vw,150px)/.88 var(--display);letter-spacing:-.038em;color:var(--paper);
  font-variation-settings:"opsz" 144,"SOFT" 30;max-width:16ch;text-shadow:0 4px 30px rgba(0,0,0,.45)}
.page-hero-content h1 .em{font-style:italic;color:var(--accent);font-variation-settings:"opsz" 144,"SOFT" 100}
.page-hero-content .plede{margin-top:26px;font:400 clamp(15px,1.2vw,18px)/1.55 var(--body);color:var(--paper-soft);max-width:38em;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.page-hero-content .plede .em{font-family:var(--display);font-style:italic;color:var(--accent);font-weight:300}
.page-hero-content .pcta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.page-hero-meta{position:absolute;top:clamp(92px,9vw,112px);right:clamp(28px,3vw,40px);z-index:6;
  display:flex;flex-direction:column;gap:6px;text-align:right;color:var(--chrome-soft);
  font:500 10.5px/1.5 var(--mono);letter-spacing:.22em;text-transform:uppercase;pointer-events:none}
.page-hero-meta b{color:var(--paper);font-weight:700}
.page-hero-meta .acc{color:var(--accent)}

/* Hide old split media column if any HTML still references it */
.ph-media{display:none!important}
.page-hero-frame > img.pbg,.page-hero-frame > video.pbg{display:none}

@media(max-width:780px){
  .page-hero-meta{display:none}
  .page-hero-content{padding:96px 22px 36px;min-height:74vh}
}

/* ===== SECTION SHELL ===== */
.section{padding:clamp(72px,9vw,140px) 0;position:relative;background:var(--black)}
.section.dark{background:var(--void)}
.section .container{max-width:1500px;padding-inline:clamp(20px,3.5vw,48px);margin:0 auto}

.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,72px)}
.section-head .lhs{max-width:36em}
.section-head h2{font:300 clamp(34px,5vw,68px)/.98 var(--display);letter-spacing:-.024em;color:var(--paper);margin-top:14px;
  font-variation-settings:"opsz" 96,"SOFT" 30;max-width:18ch}
.section-head h2 .em{font-style:italic;color:var(--accent);font-variation-settings:"opsz" 96,"SOFT" 100}
.section-head .rhs{font:400 14.5px/1.6 var(--body);color:var(--mute);max-width:30em}
.section-head .rhs .em{font-family:var(--display);font-style:italic;color:var(--accent);font-weight:300}

/* ===== TWO-COL STATEMENT ===== */
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,5vw,72px);align-items:center}
.two-col p{font:400 16px/1.65 var(--body);color:var(--mute);margin-bottom:16px;max-width:36em}
.two-col p .em{font-family:var(--display);font-style:italic;color:var(--accent);font-weight:300}
.two-col p strong{color:var(--paper);font-weight:600}
.two-col h2{font:300 clamp(30px,4vw,52px)/1.02 var(--display);letter-spacing:-.022em;color:var(--paper);margin:18px 0 24px;font-variation-settings:"opsz" 96,"SOFT" 30;max-width:18ch}
.two-col h2 .em{font-style:italic;color:var(--accent);font-variation-settings:"opsz" 96,"SOFT" 100}
.two-col .media{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:.86/1;background:var(--surface-1)}
.two-col .media img,.two-col .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.two-col .media .badge{position:absolute;left:18px;bottom:18px;z-index:3;padding:8px 14px;border-radius:999px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(12px);border:1px solid var(--glass-edge);
  font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--chrome)}
.two-col .media .badge b{color:var(--accent);font-weight:700}
@media(max-width:880px){.two-col{grid-template-columns:1fr;gap:40px}}

/* ===== FACET / TOPIC CARDS GRID ===== */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:980px){.cards-3,.cards-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cards-3,.cards-4,.cards-2{grid-template-columns:1fr}}

.fcard{padding:30px 26px;border-radius:var(--radius-lg);background:var(--surface-1);border:1px solid var(--glass-edge);
  display:flex;flex-direction:column;gap:14px;transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .3s,background .35s;position:relative;overflow:hidden}
.fcard::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 0% 0%,var(--accent-soft),transparent 60%);opacity:0;transition:.4s;pointer-events:none}
.fcard:hover{transform:translateY(-5px);border-color:var(--accent)}
.fcard:hover::before{opacity:1}
.fcard .meta{display:flex;justify-content:space-between;align-items:center;gap:14px;position:relative;z-index:1}
.fcard .num{font:300 italic 22px/1 var(--display);color:var(--accent);font-variation-settings:"opsz" 96,"SOFT" 100}
.fcard .kind{font:600 10.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mute-2)}
.fcard h3{font:300 italic clamp(20px,1.8vw,26px)/1.15 var(--display);color:var(--paper);
  font-variation-settings:"opsz" 96,"SOFT" 100;letter-spacing:-.005em;position:relative;z-index:1}
.fcard h3.sans{font:600 clamp(18px,1.5vw,22px)/1.15 var(--body);font-style:normal;font-variation-settings:normal;letter-spacing:-.015em;color:var(--paper)}
.fcard p{font:400 14px/1.55 var(--body);color:var(--mute);position:relative;z-index:1;flex:1}
.fcard p em{font-family:var(--display);font-style:italic;color:var(--accent);font-weight:300}
.fcard .arr{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font:600 11.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--paper);padding-top:14px;border-top:1px solid var(--glass-edge);position:relative;z-index:1}
.fcard .arr svg{width:14px;height:14px;transition:transform .3s}
.fcard:hover .arr svg{transform:translateX(5px)}

/* ===== TIMELINE ===== */
.timeline{display:flex;flex-direction:column;border-top:1px solid var(--glass-edge)}
.tlitem{display:grid;grid-template-columns:160px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--glass-edge);align-items:start;position:relative}
.tlitem::before{content:"";position:absolute;left:140px;top:32px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);opacity:0;transition:.5s}
.tlitem.in::before{opacity:1}
.tlitem .yr{font:500 11px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.tlitem h4{font:300 italic clamp(20px,1.8vw,24px)/1.15 var(--display);color:var(--paper);font-variation-settings:"opsz" 96,"SOFT" 100;margin-bottom:6px;letter-spacing:-.005em}
.tlitem p{font:400 14px/1.55 var(--body);color:var(--mute);max-width:42em}
@media(max-width:760px){.tlitem{grid-template-columns:1fr;gap:6px}.tlitem::before{display:none}}

/* ===== STAT GRID ===== */
.stat-cells{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-block:1px solid var(--glass-edge)}
.stat-cells .stat{padding:clamp(28px,3.5vw,48px) clamp(20px,2.5vw,32px);text-align:center}
.stat-cells .stat + .stat{border-left:1px solid var(--glass-edge)}
.stat-cells .num{font:300 clamp(52px,6.5vw,96px)/.95 var(--display);color:var(--accent);font-variation-settings:"opsz" 144,"SOFT" 80;letter-spacing:-.03em;margin-bottom:14px;display:flex;justify-content:center;align-items:baseline;gap:2px}
.stat-cells .num .suf{font-size:.5em;color:var(--paper);font-style:normal;font-variation-settings:"opsz" 144,"SOFT" 30}
.stat-cells .lbl{font:500 11px/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);max-width:14em;margin:0 auto}
@media(max-width:880px){
  .stat-cells{grid-template-columns:repeat(2,1fr)}
  .stat-cells .stat + .stat{border-left:none}
  .stat-cells .stat:nth-child(odd){border-right:1px solid var(--glass-edge)}
  .stat-cells .stat:nth-child(n+3){border-top:1px solid var(--glass-edge)}
}

/* ===== COMPARE (work-with-me) ===== */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cmp{padding:38px 32px;border-radius:var(--radius-lg);background:var(--surface-1);border:1px solid var(--glass-edge);display:flex;flex-direction:column;gap:18px;color:inherit;transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .3s;position:relative;overflow:hidden}
.cmp:hover{transform:translateY(-5px);border-color:var(--accent)}
.cmp .num{font:300 italic 56px/1 var(--display);color:var(--accent);font-variation-settings:"opsz" 144,"SOFT" 100}
.cmp .sub{font:600 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.cmp h3{font:600 clamp(22px,2.4vw,30px)/1.1 var(--body);color:var(--paper);letter-spacing:-.018em}
.cmp p{font:400 14.5px/1.6 var(--body);color:var(--mute)}
.cmp .stack{display:flex;flex-direction:column;gap:10px;padding:18px;background:var(--glass-1);border-radius:14px;border:1px solid var(--glass-edge);list-style:none;margin:6px 0 0}
.cmp .stack li{font:400 13.5px/1.45 var(--body);color:var(--paper-soft);display:flex;gap:10px;align-items:flex-start}
.cmp .stack li::before{content:"";flex:none;margin-top:8px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.cmp .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;color:var(--accent);font:600 12.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;padding-top:18px;border-top:1px solid var(--glass-edge)}
.cmp .go svg{width:14px;height:14px;transition:transform .3s}
.cmp:hover .go svg{transform:translateX(5px)}
@media(max-width:880px){.compare{grid-template-columns:1fr}}

/* ===== DECISION MATRIX ===== */
.matrix{display:grid;grid-template-columns:1.4fr 1fr 1fr;border:1px solid var(--glass-edge);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-1)}
.matrix .cell{padding:22px 24px;border-bottom:1px solid var(--glass-edge);font:400 14px/1.5 var(--body);color:var(--paper-soft)}
.matrix .cell + .cell{border-left:1px solid var(--glass-edge)}
.matrix .cell.head{background:var(--glass-2);color:var(--accent);font:600 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase}
.matrix .cell.label{color:var(--mute);font:400 italic 15px/1.45 var(--display);font-variation-settings:"opsz" 96,"SOFT" 70}
.dotmark{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:10px;box-shadow:0 0 10px var(--accent);vertical-align:middle}
.dotmark.off{background:transparent;border:1px solid var(--mute-2);box-shadow:none}
@media(max-width:760px){.matrix{grid-template-columns:1fr}.matrix .cell+.cell{border-left:none}}

/* ===== FAQ ===== */
.faq{max-width:880px;margin:0 auto}
.faq-item{border-top:1px solid var(--glass-edge);overflow:hidden}
.faq-item:last-child{border-bottom:1px solid var(--glass-edge)}
.faq-q{position:relative;width:100%;padding:24px 60px 24px 4px;display:block;text-align:left;font:500 clamp(17px,2vw,22px)/1.35 var(--body);color:var(--paper);letter-spacing:-.012em;background:transparent;border:0;cursor:pointer}
.faq-q em{font-family:var(--display);font-style:italic;color:var(--accent);font-weight:300}
.faq-q .ic{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:1px solid var(--glass-edge);border-radius:50%;display:grid;place-items:center;transition:.35s;color:var(--paper);font:300 22px/1 var(--display)}
.faq-item.open .faq-q .ic{transform:translateY(-50%) rotate(45deg);background:var(--accent);border-color:var(--accent);color:#000}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.7,.2,1)}
.faq-a-inner{padding:0 4px 24px;color:var(--mute);max-width:62em;font:400 15px/1.6 var(--body)}
.faq-a-inner em{font-family:var(--display);font-style:italic;color:var(--accent);font-weight:300}
.faq-a-inner a{color:var(--accent);border-bottom:1px solid var(--accent);font-weight:500}

/* ===== TOPICS / FORMATS (Speaking) ===== */
.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.formats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:980px){.topics{grid-template-columns:repeat(2,1fr)}.formats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.topics,.formats{grid-template-columns:1fr}}

.format{padding:30px 24px;border-radius:var(--radius-lg);background:var(--surface-2);border:1px solid var(--glass-edge);display:flex;flex-direction:column;gap:12px;transition:.35s}
.format:hover{transform:translateY(-4px);border-color:var(--accent);background:var(--surface-3)}
.format .fdur{font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.format h3{font:300 italic clamp(20px,1.8vw,24px)/1.15 var(--display);color:var(--paper);font-variation-settings:"opsz" 96,"SOFT" 100;letter-spacing:-.005em}
.format p{font:400 13.5px/1.5 var(--body);color:var(--mute);flex:1}

/* ===== OUTCOMES ===== */
.outcomes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.outcome{display:flex;gap:16px;align-items:flex-start;padding:22px;background:var(--glass-1);border:1px solid var(--glass-edge);border-radius:var(--radius-md);transition:.3s}
.outcome:hover{border-color:var(--accent)}
.outcome .ck{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);display:grid;place-items:center;font-size:13px;font-weight:700}
.outcome p{font:400 15px/1.5 var(--body);color:var(--paper)}
@media(max-width:560px){.outcomes{grid-template-columns:1fr}}

/* ===== PRAISE QUOTE ===== */
.praise{text-align:center;max-width:920px;margin:0 auto}
.praise blockquote{font:300 italic clamp(22px,3vw,40px)/1.3 var(--display);color:var(--paper);letter-spacing:-.012em;margin-top:30px;font-variation-settings:"opsz" 144,"SOFT" 90}
.praise blockquote em{color:var(--accent);font-style:italic}
.praise .who{margin-top:24px;color:var(--accent);font:600 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase}

/* ===== EXPERIENCE LIST ===== */
.explist{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.explist div{padding:18px 20px;background:var(--glass-1);border:1px solid var(--glass-edge);border-radius:var(--radius-md);color:var(--paper-soft);font:400 15px/1.55 var(--body)}
.explist div em{font-family:var(--display);font-style:italic;color:var(--accent);font-weight:300}

/* ===== Page subtitle marker ===== */
.page-hero-eyebrow{margin-bottom:10px}

/* ===== NAV DROPDOWN ===== */
.nav-drop{position:relative;padding-bottom:14px;margin-bottom:-14px}
.nav-drop > a{display:inline-flex;align-items:center;gap:5px}
.nav-drop > a::after{content:"";display:inline-block;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7;margin-left:2px}
.nav-drop .nav-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:240px;padding:10px;border-radius:14px;background:rgba(8,12,28,.92);backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--glass-edge);box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .3s cubic-bezier(.2,.7,.2,1);z-index:200;
  display:flex;flex-direction:column;gap:2px}
.nav-drop .nav-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-drop:hover .nav-menu,
.nav-drop:focus-within .nav-menu{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.nav-menu a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:10px;
  font:500 13px/1.2 var(--body);color:var(--paper-soft);transition:.2s}
.nav-menu a:hover{background:var(--accent-soft);color:var(--paper)}
.nav-menu a .arr{opacity:0;transition:.2s;color:var(--accent);font-size:11px}
.nav-menu a:hover .arr{opacity:1;transform:translateX(2px)}
.nav-menu a .ml{display:block;font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute-2);margin-top:4px}
.nav-menu .sep{height:1px;background:var(--glass-edge);margin:6px 0}


/* ===== WEBINARS (Speaking) ===== */
.webinars{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:64px}
@media(min-width:1100px){.webinars{grid-template-columns:1fr 1fr 1fr;gap:16px}}

.webinar{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border:1px solid var(--glass-edge);transition:.4s cubic-bezier(.2,.7,.2,1)}
.webinar:hover{transform:translateY(-4px);border-color:var(--glass-edge)}
.webinar::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px transparent;transition:.4s}
.w-eliza{--w-acc:#F5C7BE;--w-acc-soft:rgba(245,199,190,.18)}
.w-sword{--w-acc:#C5A8FF;--w-acc-soft:rgba(197,168,255,.18)}
.w-trust{--w-acc:#E2C685;--w-acc-soft:rgba(226,198,133,.18)}
.webinar:hover::after{box-shadow:inset 0 0 0 1px var(--w-acc)}

.w-poster{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:#080a18}
.w-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.webinar:hover .w-poster img{transform:scale(1.04)}
.w-poster::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,10,24,.65));pointer-events:none}
.w-num{position:absolute;top:14px;left:16px;font:300 italic 26px/1 var(--display);
  font-variation-settings:"opsz" 96,"SOFT" 100;color:var(--w-acc);
  text-shadow:0 2px 14px rgba(0,0,0,.6);letter-spacing:-.02em}

.w-body{padding:26px 24px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.w-meta{display:flex;justify-content:space-between;gap:14px;font:500 10.5px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute-2);flex-wrap:wrap}
.w-when b{color:var(--w-acc);font-weight:700}
.webinar h3{font:300 italic clamp(22px,1.8vw,30px)/1.1 var(--display);color:var(--paper);
  font-variation-settings:"opsz" 96,"SOFT" 60;letter-spacing:-.01em}
.webinar h3 em{color:var(--w-acc)}
.w-sub{font:500 14.5px/1.45 var(--body);color:var(--paper-soft);letter-spacing:-.005em}
.w-blurb{font:400 13.5px/1.6 var(--body);color:var(--mute)}
.w-list{list-style:none;padding:0;margin:2px 0 4px;display:flex;flex-direction:column;gap:8px}
.w-list li{position:relative;padding-left:18px;font:400 13px/1.5 var(--body);color:var(--paper-soft)}
.w-list li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:1px;background:var(--w-acc)}

.w-cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-radius:var(--radius-md);
  background:var(--w-acc-soft);border:1px solid var(--w-acc);color:var(--w-acc);
  font:600 12.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;transition:.3s}
.w-cta svg{width:15px;height:15px;transition:transform .3s}
.w-cta:hover{background:var(--w-acc);color:#0b0e1f}
.w-cta:hover svg{transform:translateX(4px)}

/* ----- Past sessions ----- */
.w-past{border-top:1px solid var(--glass-edge);padding-top:48px}
.w-past-head{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.w-past-head h3{font:300 italic clamp(24px,2.2vw,36px)/1.05 var(--display);
  font-variation-settings:"opsz" 96,"SOFT" 60;letter-spacing:-.015em;color:var(--paper)}
.w-past-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){.w-past-grid{grid-template-columns:1fr 1fr}}

.w-tape{position:relative;display:flex;align-items:flex-end;min-height:240px;padding:24px;
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--glass-edge);
  background:var(--surface-1);transition:.35s}
.w-tape:hover{border-color:var(--accent);transform:translateY(-3px)}
.w-tape-bg{position:absolute;inset:0;
  background:
    radial-gradient(60% 80% at 30% 40%,rgba(111,102,180,.45),transparent 60%),
    radial-gradient(70% 90% at 80% 70%,rgba(43,127,184,.35),transparent 60%),
    linear-gradient(135deg,#0e1130,#161a3c 60%,#0b0e1f);
  filter:saturate(1.05);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.w-tape-bg-2{background:
    radial-gradient(60% 80% at 70% 30%,rgba(226,198,133,.32),transparent 60%),
    radial-gradient(70% 90% at 20% 80%,rgba(91,181,232,.32),transparent 60%),
    linear-gradient(135deg,#0c0f29,#1a1a3a 55%,#0b0e1f)}
.w-tape:hover .w-tape-bg{transform:scale(1.05)}
.w-tape::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,transparent,rgba(7,9,24,.55));pointer-events:none}

.w-play{position:absolute;top:24px;right:24px;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.08);
  border:1px solid var(--glass-edge);backdrop-filter:blur(8px);color:var(--paper);
  transition:.35s;z-index:1}
.w-tape:hover .w-play{background:var(--accent);color:#0b0e1f;border-color:var(--accent)}
.w-play svg{width:20px;height:20px;margin-left:3px}

.w-tape-meta{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;color:var(--paper)}
.w-tape-kind{font:500 10.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mute-2)}
.w-tape-title{font:300 italic clamp(20px,1.7vw,26px)/1.15 var(--display);
  font-variation-settings:"opsz" 96,"SOFT" 80;letter-spacing:-.01em;color:var(--paper);max-width:30ch}
.w-tape-arr{display:inline-flex;align-items:center;gap:8px;margin-top:6px;color:var(--accent);
  font:600 11.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.w-tape-arr svg{width:14px;height:14px;transition:transform .3s}
.w-tape:hover .w-tape-arr svg{transform:translateX(5px)}

@media(max-width:780px){
  .w-meta{flex-direction:column;gap:4px}
  .w-tape{min-height:200px;padding:20px}
  .w-play{width:46px;height:46px;top:18px;right:18px}
}


/* =========================================================
   MOBILE — site-wide responsive improvements
   ========================================================= */

/* Hamburger button — hidden on desktop, shown on mobile */
.nav-burger{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--glass-edge);background:rgba(7,9,24,.7);backdrop-filter:blur(10px);color:var(--paper);align-items:center;justify-content:center;padding:0;margin-left:auto;flex:none;cursor:pointer;transition:.25s}
.nav-burger:hover{border-color:var(--accent);color:var(--accent)}
.nav-burger svg{width:18px;height:18px}
.nav-burger .bar{display:block;width:18px;height:1.6px;background:currentColor;border-radius:2px;margin:3px 0;transition:.25s}
.nav-burger[aria-expanded="true"] .bar:nth-child(1){transform:translateY(4.6px) rotate(45deg)}
.nav-burger[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-4.6px) rotate(-45deg)}

/* Mobile drawer — full-height slide-in panel */
.mob-drawer{position:fixed;inset:0;z-index:300;background:linear-gradient(180deg,rgba(4,5,19,.97),rgba(7,9,24,.99));backdrop-filter:blur(28px) saturate(160%);display:flex;flex-direction:column;padding:clamp(20px,5vw,32px);transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.7,.2,1);overflow-y:auto;overscroll-behavior:contain}
.mob-drawer.open{transform:translateX(0)}
.mob-drawer .mob-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;border-bottom:1px solid var(--glass-edge)}
.mob-drawer .mob-brand{display:flex;align-items:center;gap:10px;color:var(--paper);font:600 13.5px/1 var(--body)}
.mob-drawer .mob-brand img{height:28px;border-radius:6px}
.mob-drawer .mob-close{width:40px;height:40px;border-radius:50%;border:1px solid var(--glass-edge);background:transparent;color:var(--paper);font-size:22px;cursor:pointer;display:grid;place-items:center;transition:.25s}
.mob-drawer .mob-close:hover{border-color:var(--accent);color:var(--accent)}
.mob-drawer nav{display:flex;flex-direction:column;gap:2px;margin-top:36px}
.mob-drawer nav a{display:flex;justify-content:space-between;align-items:center;padding:18px 4px;border-bottom:1px solid rgba(232,229,214,.08);font:300 28px/1.15 var(--display);font-variation-settings:"opsz" 96,"SOFT" 80;letter-spacing:-.01em;color:var(--paper);transition:.25s}
.mob-drawer nav a:hover,.mob-drawer nav a:focus-visible{color:var(--accent);padding-left:10px}
.mob-drawer nav a.on{color:var(--accent)}
.mob-drawer nav a.sub{padding:12px 4px 12px 22px;font:400 15px/1.3 var(--body);color:var(--mute);border-bottom:1px solid rgba(232,229,214,.05);position:relative}
.mob-drawer nav a.sub::before{content:"";position:absolute;left:6px;top:50%;width:8px;height:1px;background:var(--mute-2);transform:translateY(-50%)}
.mob-drawer nav a.sub:hover{color:var(--paper);padding-left:30px}
.mob-drawer nav a .arr{color:var(--accent);font-size:14px;opacity:.5;transition:.25s}
.mob-drawer nav a:hover .arr{opacity:1;transform:translateX(4px)}
.mob-drawer .mob-cta{margin-top:auto;padding-top:32px;display:flex;flex-direction:column;gap:10px}
.mob-drawer .mob-cta a{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 22px;border-radius:999px;font:600 14px/1 var(--body);letter-spacing:-.005em;transition:.3s}
.mob-drawer .mob-cta .primary{background:var(--accent);color:#000;border:1px solid var(--accent)}
.mob-drawer .mob-cta .ghost{border:1px solid var(--glass-edge);color:var(--paper)}
.mob-drawer .mob-foot{margin-top:24px;padding-top:18px;border-top:1px solid var(--glass-edge);font:500 11px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute-2);text-align:center}
.mob-drawer .mob-foot b{color:var(--paper);font-weight:700}
body.mob-open{overflow:hidden;touch-action:none}

/* Show hamburger / hide CTA at mobile */
@media(max-width:880px){
  .nav-burger{display:inline-flex}
  .nav .nav-cta{display:none}
  .nav{padding:14px clamp(16px,4vw,22px)}
  .nav-brand span{font-size:12px}
  .nav-brand img{height:24px}
}
@media(min-width:881px){.mob-drawer{display:none}}

/* ===== HERO + GENERAL MOBILE TIGHTENING ===== */
@media(max-width:780px){
  .page-hero{min-height:auto;padding:8px}
  .page-hero-frame{min-height:74vh;border-radius:14px}
  .page-hero-content{padding:96px 22px 36px;min-height:74vh}
  .page-hero-content h1{font-size:clamp(38px,11vw,68px);line-height:.94;max-width:none}
  .page-hero-content .plede{font-size:14.5px;margin-top:18px}
  .page-hero-content .pcta{margin-top:24px;gap:10px}
  .page-hero-content .pcta a{padding:12px 18px;font-size:13px}
  .page-hero-meta{display:none}
  .section{padding:clamp(48px,9vw,72px) 0}
  .section .container{padding-inline:18px}
  .section-head{margin-bottom:32px;gap:18px}
  .section-head .lhs{max-width:none}
  .section-head h2{font-size:clamp(28px,7vw,40px);max-width:none;margin-top:10px}
  .section-head .rhs{font-size:14px;max-width:none}
  .two-col{gap:28px}
  .two-col h2{font-size:clamp(26px,7vw,38px);max-width:none}
  .closer .closer-inner{padding:80px 22px}
  .closer h2{font-size:clamp(32px,8vw,52px)}
  .closer p{font-size:14.5px}
  /* Stack CTA rows */
  .closer .row,.cta-row{flex-direction:column;align-items:stretch}
  .closer .row a,.cta-row a{justify-content:center}
  /* Faq tweak */
  .faq-q{font-size:16px;padding:18px 50px 18px 4px}
  .faq-a-inner{font-size:14px}
  /* Footer */
  .foot-bottom{flex-direction:column;gap:10px;text-align:center}
  /* Card grids - already responsive but make sure gap tightens */
  .cards-3,.cards-4{gap:10px}
}

@media(max-width:560px){
  .page-hero-content h1{font-size:clamp(34px,12vw,56px)}
  .nav-brand span{display:none}
  /* Lab module rail stacks */
  .lab-track{padding:24px 20px}
  .lab-track-head h3{font-size:clamp(24px,8vw,34px)}
}

/* Force mobile-only show/hide helpers */
.mob-only{display:none}
@media(max-width:880px){.mob-only{display:initial}.desk-only{display:none}}
