/* ============================================================
   REKART SKILL DEVELOPMENT INSTITUTE (RSDI)
   Shared stylesheet — yellow / black / white
   Design language inspired by chunky-card editorial layouts
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --yellow:#FFD11A;
  --yellow-soft:#FFE68A;
  --yellow-pale:#FBF2D0;
  --ink:#111111;
  --ink-soft:#2a2a2a;
  --paper:#FDFBF3;
  --white:#ffffff;
  --grey:#6b6b6b;
  --line:#111111;
  --radius:20px;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --maxw:1180px;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-mono:'Space Mono','Courier New',monospace;
  --font-body:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
input,select,textarea,button{font:inherit;max-width:100%}
body{overflow-x:hidden}

/* ---------- layout helpers ---------- */
.wrap{max-width:1760px;margin:0 auto;padding:0 clamp(20px,6vw,96px)}
.section{padding:88px 0}
.section.tight{padding:64px 0}
.bg-ink{background:var(--ink);color:var(--white)}
.bg-yellow{
  background:var(--ink);color:var(--white);
  border-top:5px solid var(--yellow);border-bottom:5px solid var(--yellow);
}
.bg-yellow .eyebrow::before{border-color:var(--white)}
.bg-yellow .lead{color:#e8e8e8}
.bg-yellow .hl{color:var(--ink)}
.bg-yellow .hl::before{background:var(--yellow)}
.bg-yellow .feature:not(.card) p{color:#d8d8d8}
.bg-yellow .feature:not(.card) h3{color:#fff}
.bg-yellow .step{border-color:#3a3a3a}
.bg-yellow .step .n{color:var(--yellow);-webkit-text-stroke:0}
.bg-yellow .step h3{color:#fff}
.bg-yellow .step p{color:#d8d8d8}
.bg-yellow .step .when{color:#b0b0b0}
.bg-yellow .divider-note{color:#b0b0b0}
.bg-yellow.cta-band p,.bg-yellow.quote-band p{color:#ececec}
.bg-white{background:var(--white)}
.center{text-align:center}
.mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem}

/* ---------- eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);text-transform:uppercase;
  letter-spacing:.16em;font-size:.72rem;font-weight:700;
  margin-bottom:18px;align-items:flex-start;line-height:1.5;
}
.eyebrow::before{content:"";width:12px;height:12px;background:var(--yellow);border:2px solid var(--ink);display:inline-block;flex:none;margin-top:3px}
.bg-ink .eyebrow::before{border-color:var(--white)}

/* ---------- headings ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;letter-spacing:-.02em}
.h-hero{font-size:clamp(2.6rem,6vw,4.6rem)}
.h-sec{font-size:clamp(2rem,4.4vw,3.2rem)}
.h-sub{font-size:clamp(1.2rem,2.4vw,1.6rem)}
.mark{background:var(--yellow);box-shadow:0 0 0 4px var(--yellow);border-radius:2px}
.underline-scribble{position:relative;white-space:nowrap}
.underline-scribble::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:10px;
  background:var(--yellow);z-index:-1;transform:rotate(-1deg);
}
.lead{font-size:1.05rem;max-width:640px;margin:0 auto;color:var(--grey)}
.bg-ink .lead{color:#e8e8e8}
.section-head{margin-bottom:56px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;font-size:.8rem;
  padding:16px 26px;border:2.5px solid var(--ink);border-radius:999px;
  background:var(--yellow);color:var(--ink);
  box-shadow:var(--shadow-sm);cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn.ghost{background:var(--white)}
.btn.on-ink{border-color:var(--white);box-shadow:4px 4px 0 var(--yellow)}
.btn.on-ink.ghost{background:transparent;color:var(--white)}
.btn-row{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--ink);border-bottom:2px solid var(--ink);
}
.site-header .nav-links a{color:#fff}
.site-header .nav-links a.active,.site-header .nav-links a:hover{box-shadow:0 3px 0 var(--yellow)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 34px;max-width:none;margin:0}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;font-size:1.15rem}
.brand .logo{width:44px;height:44px}
.nav-links{display:flex;gap:20px;align-items:center}
.nav-links a{
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.07em;
  font-size:.7rem;font-weight:700;padding-bottom:3px;white-space:nowrap;
}
.nav-links a.active,.nav-links a:hover{box-shadow:0 3px 0 var(--yellow)}
.brand-logo{height:52px;width:auto;display:block}
.brand-name{font-family:var(--font-mono);font-weight:700;font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;color:#c9c9c9;line-height:1.55;border-left:2px solid #444;padding-left:12px;margin-left:2px}
@media(max-width:1180px){.brand-name{display:none}}
.foot-name{font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:#fff;margin-top:14px;line-height:1.25}
.site-footer .brand-logo,.brand-logo.foot{height:52px}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-txt small{font-family:var(--font-mono);font-weight:400;font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-top:3px}
.site-footer .brand-txt small{color:#9a9a9a}
.nav-actions{display:flex;align-items:center;gap:12px}
.nav-cta{display:inline-flex;white-space:nowrap}
.nav .btn.nav-cta{padding:12px 16px;font-size:.68rem}
.brand .brand-txt small{max-width:230px}
.menu-toggle{display:none;background:var(--yellow);border:2.5px solid var(--ink);border-radius:10px;width:44px;height:44px;font-size:1.2rem;cursor:pointer}

/* ---------- search ---------- */
.nav-search{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:transparent;color:#fff;border:2px solid #444;border-radius:999px;
  padding:9px 16px;font-family:var(--font-mono);text-transform:uppercase;
  letter-spacing:.08em;font-size:.68rem;font-weight:700;
  transition:border-color .15s ease,background .15s ease;
}
.nav-search:hover{border-color:var(--yellow);background:#1e1e1e}
.nav-search svg{flex:none}
@media(max-width:1060px){.nav-search span{display:none}.nav-search{padding:10px}}
.search-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(10,10,10,.78);
  display:flex;align-items:flex-start;justify-content:center;padding:14vh 20px 20px;
  animation:fadeIn .15s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.search-panel{
  width:100%;max-width:640px;background:var(--paper);color:var(--ink);
  border:2.5px solid var(--ink);border-radius:18px;box-shadow:10px 12px 0 var(--yellow);
  overflow:hidden;
}
.search-bar{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:2px solid var(--ink)}
.search-bar input{
  flex:1;border:0;background:transparent;font-size:1.05rem;color:var(--ink);
  font-family:var(--font-body);
}
.search-bar input:focus{outline:none}
.search-close{
  background:var(--ink);color:#fff;border:0;border-radius:7px;padding:5px 9px;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;cursor:pointer;flex:none;
}
.search-results{max-height:58vh;overflow-y:auto;padding:8px}
.search-hit{
  display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;
  border:2px solid transparent;
}
.search-hit strong{font-family:var(--font-display);font-size:1rem}
.search-hit span{font-size:.86rem;color:var(--grey)}
.search-hit:hover,.search-hit:focus{background:var(--yellow);border-color:var(--ink)}
.search-hit:hover span{color:var(--ink-soft)}
.search-empty{padding:22px 16px;color:var(--grey);font-size:.9rem}
@media(prefers-reduced-motion:reduce){.search-overlay{animation:none}}

/* ---------- cards ---------- */
.card{
  background:var(--white);border:2.5px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:28px;
}
.card,.note-box{color:var(--ink)}
.card.flat{box-shadow:none}
.card.yellow{background:var(--yellow-soft)}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ---------- pills / tags ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;
  font-size:.68rem;font-weight:700;
  padding:7px 14px;border:2px solid var(--ink);border-radius:999px;background:var(--white);
}
.pill.y{background:var(--yellow)}
.pill.k{background:var(--ink);color:var(--white)}
.pill-row{display:flex;flex-wrap:wrap;gap:10px}
/* interactive pills (homepage departments) — lift + pop on hover */
a.pill{transition:transform .14s ease,box-shadow .14s ease,background-color .16s ease}
a.pill:hover{transform:translateY(-3px) rotate(-1.5deg);box-shadow:3px 4px 0 var(--ink);background:var(--yellow)}
.pill-row-link{gap:12px}

/* ---------- stat band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat .num{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,5vw,3.4rem);color:var(--yellow)}
.stat .lbl{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;color:#d8d8d8}

/* ---------- hero ----------
   Desktop keeps the original look: copy + buttons + pills on the left,
   image on the right. On tablet/phone the buttons/pills/image move into a
   right rail (see the media queries). */
.hero{padding:72px 0 88px}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  grid-template-areas:"copy media" "acts media";
  column-gap:56px;row-gap:28px;align-items:start;
}
.hero-side{display:contents}
.hero-copy{grid-area:copy}
.hero-actions{grid-area:acts;display:flex;flex-direction:column;gap:26px;align-self:start}
.hero-media{grid-area:media;align-self:center}
.hero-copy .intro,.hero p.intro{font-size:1.1rem;color:var(--ink-soft);margin:22px 0 0;max-width:520px}
.hero-actions .pill-row{margin:0}
.hero-media{position:relative;width:100%}
.badge-float{
  position:absolute;font-family:var(--font-mono);font-weight:700;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.1em;
  background:var(--yellow);border:2.5px solid var(--ink);border-radius:999px;
  padding:9px 16px;box-shadow:var(--shadow-sm);
}
.badge-float.tl{top:-16px;left:-14px;transform:rotate(-6deg)}
.badge-float.br{bottom:-16px;right:-10px;transform:rotate(5deg);background:var(--white)}

/* ---------- image placeholder ---------- */
.ph{
  position:relative;
  border:2.5px solid var(--ink);border-radius:var(--radius);
  background:var(--white);
  background-image:repeating-linear-gradient(45deg,rgba(255,209,26,.28) 0 12px,transparent 12px 40px);
  box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:280px;padding:24px;
}
.ph::before{
  content:"IMAGE";position:absolute;top:12px;left:12px;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;
  background:var(--yellow);border:2px solid var(--ink);border-radius:6px;padding:3px 8px;
}
.ph:has(img){padding:0;display:block;overflow:hidden}
.ph:has(img)::before{display:none}
.ph > img{width:100%;height:100%;min-height:inherit;object-fit:cover;display:block}
.ph span{
  background:var(--ink);color:var(--white);font-family:var(--font-mono);
  font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;line-height:1.5;
  padding:10px 14px;border-radius:10px;max-width:82%;
}
.ph.tall{min-height:440px}
.ph.wide{min-height:340px}

/* ---------- feature list ---------- */
.feature{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.feature .ico{
  width:66px;height:66px;border:2.5px solid var(--ink);border-radius:16px;
  background:var(--yellow);display:grid;place-items:center;
  font-size:1.7rem;box-shadow:var(--shadow-sm);flex:none;line-height:0;overflow:hidden;
}
.feature .ico img{width:40px;height:40px;object-fit:contain;display:block;margin:0}
.bg-ink .feature .ico{background:var(--yellow)}
.feature h3{font-size:1.15rem}
.feature p{color:var(--grey);font-size:.95rem;max-width:280px}
.bg-ink .feature:not(.card) p{color:#d8d8d8}
.bg-ink .feature:not(.card) h3{color:#fff}

/* ---------- table ---------- */
.table-card{overflow-x:auto;border:2.5px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--white);color:var(--ink)}
table{width:100%;border-collapse:collapse;min-width:520px}
th,td{padding:16px 20px;text-align:left;border-bottom:2px solid var(--ink)}
td{color:var(--ink)}
th{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;background:var(--ink);color:var(--white)}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even){background:var(--paper)}
td .fee{font-family:var(--font-display);font-weight:700}
.table-card.compact table{min-width:0}

/* ---------- course cards ---------- */
.course-card{display:flex;flex-direction:column;gap:14px;background:var(--white);transition:transform .16s ease,box-shadow .16s ease,background-color .18s ease}
.course-card .meta{display:flex;gap:8px;flex-wrap:wrap}
.course-card .price{font-family:var(--font-display);font-weight:700;font-size:1.9rem;margin-top:auto}
.course-card .btn{align-self:flex-start}
.course-card{transform-origin:center}
.course-card:hover .pill.y{background:var(--white)}
.course-card:hover .pill{background:var(--white)}
.course-card:hover .pill.k{background:var(--ink);color:var(--white)}
.course-card:hover .btn{background:var(--white)}
.course-card:hover .price small{color:var(--ink-soft)}
@media(prefers-reduced-motion:reduce){.course-card{transition:none}}
.course-card .price small{font-family:var(--font-mono);font-size:.7rem;color:var(--grey);font-weight:400}
.course-card p{color:var(--grey);font-size:.93rem}

/* ---------- steps ---------- */
.step{display:grid;grid-template-columns:110px 1fr auto;gap:24px;align-items:start;padding:28px 0;border-top:2px dashed var(--ink)}
.step:last-child{border-bottom:2px dashed var(--ink)}
.step .n{font-family:var(--font-display);font-weight:700;font-size:2.6rem;color:#fff;-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill}
.step h3{font-size:1.3rem;margin-bottom:6px}
.step p{color:var(--grey);max-width:640px}
.step .when{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;color:var(--grey)}

/* ---------- accordion ---------- */
.acc{display:flex;flex-direction:column;gap:16px;max-width:820px;margin:0 auto}
.acc details{border:2.5px solid var(--ink);border-radius:16px;background:var(--white);color:var(--ink);box-shadow:var(--shadow-sm);overflow:hidden}
.acc details[open]{background:var(--yellow-soft)}
.acc summary{
  list-style:none;cursor:pointer;padding:20px 22px;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:1.4rem;font-weight:700}
.acc details[open] summary::after{content:"–"}
.acc .body{padding:0 22px 22px;color:var(--ink-soft)}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.plan{display:flex;flex-direction:column;gap:18px}
.plan.hi{background:var(--yellow-soft)}
.plan .amt{font-family:var(--font-display);font-weight:700;font-size:2.6rem}
.plan .amt small{font-family:var(--font-mono);font-size:.72rem;color:var(--grey);font-weight:400}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.plan li{display:flex;gap:10px;font-size:.93rem;border-bottom:1.5px dashed var(--ink);padding-bottom:10px}
.plan li:last-child{border-bottom:none}
.plan li::before{content:"✓";font-weight:700}

/* ---------- founder ---------- */
.founder{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:center}
.founder .ph{min-height:360px}

/* ---------- CTA band ---------- */
.cta-band{text-align:center;padding:104px 0}
.cta-band h2{font-size:clamp(2rem,5vw,3.4rem);max-width:760px;margin:0 auto 18px}
.cta-band p{max-width:620px;margin:0 auto 30px;color:var(--grey)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--white);padding:64px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.site-footer h4{font-size:.8rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;margin-bottom:16px;color:var(--yellow)}
.site-footer a{display:block;padding:5px 0;font-size:.9rem;color:#d0d0d0}
.site-footer a:hover{color:var(--yellow)}
.foot-brand p{color:#b8b8b8;font-size:.9rem;margin-top:14px;max-width:280px}
.foot-bottom{border-top:1px solid #333;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem;color:#9a9a9a;font-family:var(--font-mono)}

/* ---------- misc ---------- */
.quote-band{text-align:center;padding:80px 0}
.quote-band p{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.2;max-width:900px;margin:0 auto}
.divider-note{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey);text-align:center;margin-top:14px}
.list-check{list-style:none;display:grid;gap:12px}
.list-check li{display:flex;gap:12px;align-items:flex-start}
.list-check li::before{content:"›";font-family:var(--font-display);font-weight:700;color:var(--ink);background:var(--yellow);border:2px solid var(--ink);width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex:none}
.bg-ink .list-check li::before{color:var(--ink)}

.note-box{border:2.5px solid var(--ink);border-left-width:10px;border-radius:14px;background:var(--white);padding:22px 24px;box-shadow:var(--shadow-sm)}
.note-box h4{font-size:1.05rem;margin-bottom:8px}
.note-box p{color:var(--ink-soft);font-size:.95rem}

/* ================= HERO SLIDER ================= */
.hero-slider{position:relative;overflow:hidden;background:var(--ink);border-bottom:3px solid var(--ink)}
.hs-track{display:flex;height:470px;transition:transform .6s cubic-bezier(.5,0,.15,1)}
.hs-slide{position:relative;flex:0 0 100%;margin:0}
.hs-slide img{width:100%;height:100%;object-fit:cover;display:block}
.hs-slide figcaption{
  position:absolute;right:20px;bottom:18px;z-index:3;
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;font-size:.64rem;font-weight:700;
  background:var(--yellow);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:6px 14px;
}
.hs-overlay{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;
  background:linear-gradient(90deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.6) 42%,rgba(10,10,10,.15) 72%,transparent 100%);
  pointer-events:none;
}
.hs-overlay .wrap{pointer-events:auto;width:100%}
.hs-copy{max-width:620px}
.hs-overlay .h-hero{
  color:#fff;margin:0;text-transform:uppercase;letter-spacing:-.01em;line-height:1.04;
  font-size:clamp(1.9rem,4vw,3.2rem);
}
.hs-lead{color:#e8e8e8;font-size:1rem;line-height:1.55;max-width:520px;margin:16px 0 24px}
.hs-btns{display:flex;gap:14px;flex-wrap:wrap}
.hs-btns .btn.ghost{background:transparent;color:#fff;border-color:#fff}
.hs-dots{position:absolute;left:0;right:0;bottom:18px;z-index:4;display:flex;gap:9px;justify-content:center}
.hs-dots button{
  width:11px;height:11px;border-radius:999px;border:2px solid #fff;background:transparent;cursor:pointer;padding:0;
  transition:background .2s ease,transform .2s ease;
}
.hs-dots button[aria-selected="true"]{background:var(--yellow);border-color:var(--yellow);transform:scale(1.15)}

/* ================= MARQUEE ================= */
.marquee{background:var(--yellow);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);overflow:hidden;padding:12px 0}
.marquee-run{display:flex;align-items:center;gap:26px;width:max-content;animation:mq 26s linear infinite}
.marquee-run span{font-family:var(--font-display);font-weight:700;font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;color:var(--ink)}
.marquee-run .mq-dot{font-size:.9rem;opacity:.7}
@keyframes mq{to{transform:translateX(-50%)}}
.marquee:hover .marquee-run{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.marquee-run{animation:none}}

/* ================= COURSE GRID (home) ================= */
.course-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cc{
  display:flex;flex-direction:column;
  background:var(--white);border:2.5px solid var(--ink);border-radius:16px;
  box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .16s ease,box-shadow .16s ease;
}
.cc:hover{transform:translate(-3px,-4px);box-shadow:8px 10px 0 var(--ink)}
.cc-img{aspect-ratio:4/3;border-bottom:2.5px solid var(--ink);overflow:hidden}
.cc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.cc:hover .cc-img img{transform:scale(1.05)}
.cc-body{display:flex;flex-direction:column;gap:9px;padding:16px 16px 18px;flex:1}
.cc-body h3{font-size:1.02rem;line-height:1.2;min-height:2.4em}
.cc-body p{color:var(--grey);font-size:.85rem;line-height:1.45;flex:1}
.cc-fee{font-family:var(--font-display);font-weight:700;font-size:1.3rem}
.cc-fee small{font-family:var(--font-mono);font-size:.62rem;color:var(--grey);font-weight:400}
.cc-btn{width:100%;justify-content:center;margin-top:4px;padding:13px 12px;font-size:.72rem}

/* ================= ABOUT BLOCK + CAROUSEL ================= */
.about-block{
  max-width:820px;margin:0 auto;
  background:var(--yellow);border:2.5px solid var(--ink);border-radius:18px;
  box-shadow:var(--shadow);padding:28px 30px;
}
.about-block p{color:var(--ink);font-size:1rem;line-height:1.65}
.about-block p+p{margin-top:14px}
.carousel{
  margin-top:44px;overflow:hidden;border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);padding:20px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.carousel-run{display:flex;gap:16px;width:max-content;animation:caro 40s linear infinite}
.carousel-run img{width:280px;height:180px;object-fit:cover;border:2.5px solid var(--ink);border-radius:12px;box-shadow:var(--shadow-sm);flex:none}
@keyframes caro{to{transform:translateX(-50%)}}
.carousel:hover .carousel-run{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.carousel-run{animation:none}}

/* ================= TESTIMONIALS ================= */
.tst{
  overflow:hidden;padding:8px 0 4px;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.tst-run{display:flex;gap:22px;width:max-content;animation:tst 44s linear infinite;padding:0 22px}
.tst:hover .tst-run{animation-play-state:paused}
@keyframes tst{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tst-run{animation:none}}
.tst-card{
  flex:0 0 360px;margin:0;
  background:var(--white);color:var(--ink);border:2.5px solid var(--ink);border-radius:16px;
  box-shadow:var(--shadow-sm);padding:22px 22px 18px;
  display:flex;flex-direction:column;gap:16px;
}
.tst-card p{font-size:.95rem;line-height:1.55}
.tst-card figcaption{display:flex;align-items:center;gap:12px}
.tst-card figcaption img{width:46px;height:46px;border-radius:999px;border:2px solid var(--ink);object-fit:cover}
.tst-card figcaption span{display:flex;flex-direction:column;font-size:.78rem;color:var(--grey);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em}
.tst-card figcaption strong{font-family:var(--font-display);font-size:.98rem;color:var(--ink);text-transform:none;letter-spacing:0}

/* ---------- reveal ----------
   Default state is fully visible. Animation only plays when JS adds .in
   (and only on elements JS first marked .armed while off-screen), so
   content can never get stuck hidden. */
[data-reveal].armed{opacity:0;transform:translateY(22px)}
[data-reveal].in{animation:revealUp .6s ease forwards}
@keyframes revealUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  [data-reveal].armed{opacity:1;transform:none}
  [data-reveal].in{animation:none}
}
/* every box reveals with the exact same animation — no per-item variation */
.grid{align-items:stretch}
.grid > [data-reveal]{height:100%}
.grid > .card,.grid > [data-reveal] > .card{height:100%}

/* ---------- Beam-style box interaction — SAME for every box on the site ---------- */
.grid,.price-grid,.hero-media,.founder,.acc,.table-card{perspective:1100px}
.card,.note-box,.table-card,.ph,.acc details{
  transition:transform .16s ease,box-shadow .16s ease;
  transform-origin:center;
}
/* uniform hover lift (course cards are excluded — they use a pop instead) */
.card:not(.course-card):hover,.note-box:hover,.table-card:hover,.ph:hover,.acc details:hover{
  transform:translate(-4px,-5px);
  box-shadow:10px 12px 0 var(--ink);
}
/* uniform JS mouse-tilt (adds a gentle 3D rotate on top of the lift) */
.card:not(.course-card).tilting,.note-box.tilting,.table-card.tilting,.ph.tilting{
  transform:translate(-4px,-6px) rotateX(calc(var(--ry,0)*-3deg)) rotateY(calc(var(--rx,0)*3deg));
  box-shadow:11px 14px 0 var(--ink);
  transition:box-shadow .16s ease;
}
/* course cards: shadow stays fixed, whole box pops — same for all 9 */
.course-card:hover,.course-card.tilting{
  background:var(--yellow);
  transform:scale(1.035);
  box-shadow:var(--shadow);
}
.acc details[open]:hover{transform:translate(-2px,-2px)}
.card.yellow .btn{background:var(--white)}

/* uniform icon-box animation — every .ico in every card behaves the same */
.feature .ico{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease}
.card:hover .ico,.card.tilting .ico{
  transform:translateY(-4px) rotate(-8deg) scale(1.08);
  box-shadow:5px 5px 0 var(--ink);
}

@media(prefers-reduced-motion:reduce){
  .card,.note-box,.table-card,.ph,.acc details,.feature .ico{transition:none}
  .card:hover,.note-box:hover,.table-card:hover,.ph:hover,.acc details:hover,
  .card.tilting,.note-box.tilting,.table-card.tilting,.ph.tilting{transform:none;box-shadow:var(--shadow)}
  .card:hover .ico,.card.tilting .ico{transform:none}
}

/* ---------- animated marker highlight ---------- */
.underline-scribble::after{transform:rotate(-1deg) scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.5,0,.15,1) .15s}
.underline-scribble.lit::after,[data-reveal].in .underline-scribble::after{transform:rotate(-1deg) scaleX(1)}
.hl{position:relative;z-index:0;white-space:nowrap;padding:0 .06em}
.hl::before{
  content:"";position:absolute;left:-.05em;right:-.05em;top:8%;bottom:6%;
  background:var(--yellow);z-index:-1;border-radius:3px;
  transform:rotate(-1.2deg) scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.5,0,.15,1);
}
.hl.lit::before{transform:rotate(-1.2deg) scaleX(1)}
.bg-ink .hl{color:var(--ink)}
@media(prefers-reduced-motion:reduce){
  .underline-scribble::after,.hl::before{transition:none;transform:rotate(-1deg) scaleX(1)}
  .hl.lit::before{transform:rotate(-1.2deg) scaleX(1)}
}

/* ---------- responsive ---------- */
@media(max-width:1060px){
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--ink);border-bottom:2px solid var(--ink);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:16px 24px;border-top:2px solid #333;width:100%}
  .nav-cta{display:none}
  .menu-toggle{display:block}
}
@media(max-width:960px){
  .wrap{padding:0 40px}
  .section{padding:64px 0}
  .founder{grid-template-columns:1fr}
  .grid-3,.grid-4,.price-grid,.stats{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .step{grid-template-columns:70px 1fr;gap:6px 18px}
  .step .when{grid-column:2;margin-top:2px}
  .course-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .carousel-run img{width:220px;height:145px}
  .hs-track{height:400px}
}

/* ---------- mobile ---------- */
@media(max-width:600px){
  .wrap{padding:0 18px}
  .section{padding:38px 0}
  .section.tight{padding:28px 0}
  .section-head{margin-bottom:24px}

  /* type scale */
  .h-hero{font-size:2.15rem;line-height:1.1}
  .h-sec{font-size:1.32rem}
  .h-sub{font-size:1.02rem}
  .lead{font-size:.85rem!important;line-height:1.55}
  .hero p.intro,.hero .intro{font-size:.78rem!important;line-height:1.55;color:var(--grey)}
  .eyebrow{font-size:.44rem;letter-spacing:.08em;line-height:1.45;margin-bottom:10px;gap:5px}
  .eyebrow::before{width:7px;height:7px;margin-top:1px}

  /* buttons — small, two side-by-side, not touching screen edge */
  .btn{padding:10px 10px;font-size:.54rem;letter-spacing:.05em;box-shadow:3px 3px 0 var(--ink)}
  .btn-row{flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:8px}
  .btn-row .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center}
  .btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}

  .ph{min-height:0}
  .ph.tall,.ph.wide{min-height:0}
  .founder .ph{aspect-ratio:4/3;min-height:0}

  /* hero slider — shorter, 3:4 on mobile, text left aligned */
  .hs-track{height:auto;aspect-ratio:4/5}
  .hs-slide{aspect-ratio:4/5}
  .hs-slide figcaption{right:14px;bottom:auto;top:14px;font-size:.54rem;padding:5px 11px}
  .hs-overlay{
    align-items:flex-end;
    background:linear-gradient(0deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.6) 44%,transparent 82%);
  }
  .hs-overlay .wrap{padding-bottom:52px}
  .hs-copy{max-width:none}
  .hs-overlay .h-hero{font-size:1.7rem;margin-top:4px}
  .hs-lead{font-size:.82rem;max-width:none;margin:10px 0 16px}
  .hs-btns{flex-direction:column;gap:10px}
  .hs-btns .btn{width:100%;justify-content:center;padding:14px;font-size:.64rem}
  .hs-dots{bottom:13px}

  /* marquee */
  .marquee{padding:9px 0}
  .marquee-run{gap:16px;animation-duration:18s}
  .marquee-run span{font-size:1.05rem}

  /* course grid — one per row */
  .course-grid{grid-template-columns:1fr;gap:14px}
  .cc-img{aspect-ratio:16/10}
  .cc-body{padding:14px 14px 16px}
  .cc-body h3{font-size:1rem;min-height:0}
  .cc-body p{font-size:.82rem}
  .cc-fee{font-size:1.2rem}
  .cc-btn{padding:12px;font-size:.66rem}

  /* about + carousel + testimonials */
  .about-block{padding:20px}
  .about-block p{font-size:.88rem;line-height:1.6}
  .carousel{margin-top:30px;padding:14px 0}
  .carousel-run{gap:12px}
  .carousel-run img{width:180px;height:120px}
  .tst-run{gap:14px;padding:0 14px;animation-duration:30s}
  .tst-card{flex-basis:280px;padding:18px}
  .tst-card p{font-size:.86rem}

  /* grids: icon boxes 2-up, detailed boxes 1-up */
  .grid,.grid-2{gap:10px}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr;gap:9px}
  .grid-2,.price-grid{grid-template-columns:1fr;gap:14px}

  /* course cards → swipeable horizontal slider (left/right) */
  .grid-3:has(.course-card),.price-grid{
    display:flex;grid-template-columns:none;
    overflow-x:auto;overflow-y:visible;
    gap:12px;scroll-snap-type:x proximity;
    margin:0;padding:4px 2px 16px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .grid-3:has(.course-card)::-webkit-scrollbar,.price-grid::-webkit-scrollbar{display:none}
  .grid-3:has(.course-card) > *,.price-grid > *{
    flex:0 0 80%;max-width:290px;scroll-snap-align:start;height:auto;
  }
  .grid-3:has(.course-card)::after,.price-grid::after{content:"";flex:0 0 4px}

  /* cards — compact, less shadow */
  .card{padding:12px;border-radius:12px;box-shadow:3px 3px 0 var(--ink)}
  .grid-3 .feature.card,.grid-4 .feature.card{padding:14px 9px}
  .card:hover,.note-box:hover,.table-card:hover,.ph:hover,.acc details:hover{box-shadow:4px 5px 0 var(--ink);transform:translate(-2px,-2px)}
  .course-card:hover,.course-card.tilting{transform:scale(1.015);box-shadow:3px 3px 0 var(--ink)}
  .feature{gap:7px}
  .feature p{max-width:none}
  .feature .ico{width:42px;height:42px;border-radius:11px;border-width:2px;box-shadow:2px 2px 0 var(--ink)}
  .feature .ico img{width:24px;height:24px}
  .feature h3{font-size:.82rem;line-height:1.18}
  .feature p{font-size:.72rem;line-height:1.45}
  .course-card{gap:10px}
  .course-card h3{font-size:1rem}
  .course-card p{font-size:.82rem}
  .course-card .price{font-size:1.35rem}
  .course-card .meta .pill{font-size:.55rem;padding:4px 9px}
  .note-box{padding:14px 14px 14px 16px;border-left-width:7px}
  .note-box p{font-size:.85rem}

  /* stats */
  .stats{grid-template-columns:1fr 1fr;gap:20px 10px}
  .stat .num{font-size:1.8rem}
  .stat .lbl{font-size:.55rem;letter-spacing:.08em}

  /* pills */
  .pill{font-size:.5rem;padding:5px 8px;border-width:1.5px}
  .pill-row{gap:6px}
  .hero .pill-row{flex-wrap:wrap;justify-content:flex-start}
  .hero .pill-row .pill{flex:0 0 auto}

  /* steps */
  .step{grid-template-columns:44px 1fr;gap:2px 12px;padding:16px 0}
  .step .n{font-size:1.6rem;-webkit-text-stroke:1.5px var(--ink)}
  .step h3{font-size:.98rem}
  .step p{font-size:.82rem}
  .step .when{font-size:.55rem}

  /* accordion + tables + plans */
  .acc{gap:10px}
  .acc summary{padding:13px 14px;font-size:.9rem}
  .acc summary::after{font-size:1.2rem}
  .acc .body{padding:0 14px 14px;font-size:.85rem}
  .table-card{border-width:2px}
  th,td{padding:10px 11px;font-size:.8rem}
  th{font-size:.58rem}
  .plan{gap:12px}
  .plan .amt{font-size:1.8rem}
  .plan li{font-size:.85rem}

  /* CTA + quote + footer */
  .cta-band{padding:42px 0}
  .cta-band h2{font-size:1.5rem}
  .cta-band p{font-size:.85rem;margin-bottom:20px}
  .quote-band{padding:40px 0}
  .quote-band p{font-size:1.25rem}
  .site-footer{padding:38px 0 26px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:8px 18px;margin-bottom:26px}
  .foot-brand{grid-column:1 / -1;margin-bottom:6px}
  .site-footer h4{font-size:.66rem;margin-bottom:10px}
  .site-footer a{font-size:.82rem;padding:3px 0}
  .foot-bottom{flex-direction:column;gap:5px;text-align:center;font-size:.68rem}

  /* nav — search sits right next to the yellow menu button */
  .nav{padding:9px 12px;gap:8px}
  .brand{margin-right:auto}
  .brand-logo{height:36px}
  .nav-actions{gap:8px}
  .nav-search{padding:8px;border-width:2px;border-radius:10px}
  .nav-search span{display:none}
  .menu-toggle{width:40px;height:40px;font-size:1.05rem}

  /* highlight: solid yellow block fully covering the text, always black text,
     never blends with the background */
  .hl{
    white-space:normal;
    color:var(--ink)!important;
    background:var(--yellow)!important;
    box-shadow:0 0 0 3px var(--yellow);
    border-radius:2px;
    padding:0 .02em;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
  }
  .hl::before{display:none!important}
  .underline-scribble{white-space:normal}
  .underline-scribble::after{height:7px;bottom:-3px}
}

/* very small phones: hero drops to a single column stack */
@media(max-width:374px){
  .hero{padding:22px 0 30px}
  .hero-grid{grid-template-columns:1fr;grid-template-areas:"copy" "acts" "media";row-gap:16px}
  .hero-actions{gap:12px}
  .hero-actions .btn-row{flex-direction:row;flex-wrap:wrap;gap:8px}
  .hero-actions .btn-row .btn{flex:1 1 0;min-width:0;width:auto}
  .hero-actions .pill-row{justify-content:flex-start}
  .hero-media .ph{aspect-ratio:4/3}
  .hero-copy .h-hero{font-size:1.75rem}
}

@media(max-width:360px){
  .grid-3,.grid-4{grid-template-columns:1fr}
  .h-hero{font-size:1.9rem}
  .stat .num{font-size:1.7rem}
}