/* =========================================================
   JD STUDIOS AFRICA — site stylesheet
   Palette taken from the logo: night stage, crimson wings, trophy gold.
   ========================================================= */

@font-face{font-family:"Bricolage";src:url("../fonts/bricolage.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;}
@font-face{font-family:"Source Serif";src:url("../fonts/sourceserif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Source Serif";src:url("../fonts/sourceserif-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Source Serif";src:url("../fonts/sourceserif-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}

:root{
  --night:#160810;
  --night-2:#241019;
  --night-line:rgba(255,255,255,.14);
  --crimson:#B5124A;
  --crimson-hi:#D61C5E;
  --wine:#7A0C33;
  --gold:#C9922E;
  --gold-soft:#E8C27A;
  --paper:#FFFFFF;
  --blush:#F8F1F3;
  --ink:#1D1418;
  --muted:#5E5157;
  --on-dark:#EADDE2;
  --on-dark-muted:#B9A8AF;
  --line:rgba(29,20,24,.13);

  --sans:"Bricolage", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif:"Source Serif", Georgia, "Times New Roman", serif;

  --step--1:.84rem;
  --step-0:1.0625rem;
  --step-1:1.25rem;
  --step-2:clamp(1.35rem,1.1rem + 1vw,1.6rem);
  --step-3:clamp(1.6rem,1.2rem + 1.6vw,2.05rem);
  --step-4:clamp(1.95rem,1.35rem + 2.6vw,2.75rem);
  --step-5:clamp(2.3rem,1.4rem + 4vw,3.9rem);

  --wrap:1200px;
  --gutter:clamp(16px,4vw,40px);
  --header-h:76px;
  --radius:6px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px);}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}
body{margin:0;font-family:var(--sans);font-size:var(--step-0);line-height:1.6;color:var(--ink);background:var(--paper);
  font-variation-settings:"opsz" 14;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
img,svg,picture{display:block;max-width:100%;height:auto;}
a{color:var(--crimson);text-underline-offset:.18em;text-decoration-thickness:1px;}
a:hover{color:var(--wine);}
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;line-height:1.12;letter-spacing:-.022em;margin:0 0 .5em;color:var(--ink);font-variation-settings:"opsz" 60;}
h1{font-size:var(--step-5);font-weight:750;letter-spacing:-.03em;line-height:1.02;}
h2{font-size:var(--step-4);}
h3{font-size:var(--step-2);letter-spacing:-.015em;line-height:1.2;}
h4{font-size:var(--step-1);letter-spacing:-.01em;}
p{margin:0 0 1em;}
ul,ol{margin:0 0 1em;padding-left:1.2em;}
li{margin-bottom:.35em;}
strong{font-weight:650;}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px;}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--gold);color:var(--night);padding:10px 16px;font-weight:700;border-radius:var(--radius);text-decoration:none;}
.skip:focus{top:12px;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}
.narrow{max-width:760px;}
.section{padding:clamp(56px,8vw,104px) 0;}
.section.tight{padding:clamp(40px,6vw,72px) 0;}
.section.blush{background:var(--blush);}
.section.dark{background:var(--night);color:var(--on-dark);}
.section.dark h2,.section.dark h3,.section.dark h4{color:#fff;}
.section.dark a{color:var(--gold-soft);}
.lead{font-family:var(--serif);font-size:clamp(1.12rem,1rem + .5vw,1.3rem);line-height:1.6;color:var(--muted);max-width:62ch;}
.section.dark .lead{color:var(--on-dark-muted);}
.kicker{font-size:var(--step--1);font-weight:650;color:var(--crimson);margin:0 0 .6em;letter-spacing:.01em;}
.section.dark .kicker{color:var(--gold-soft);}
.head{max-width:720px;margin-bottom:clamp(28px,4vw,48px);}
.head p:last-child{margin-bottom:0;}
.muted{color:var(--muted);}
.small{font-size:var(--step--1);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.75em 1.35em;border-radius:var(--radius);
  font-family:var(--sans);font-weight:650;font-size:1rem;line-height:1.1;text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
.btn-primary{background:var(--crimson);color:#fff;}
.btn-primary:hover{background:var(--wine);color:#fff;}
.btn-gold{background:var(--gold);color:var(--night);}
.btn-gold:hover{background:var(--gold-soft);color:var(--night);}
.btn-ghost{border-color:currentColor;color:var(--ink);background:transparent;}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.on-dark .btn-ghost,.section.dark .btn-ghost{color:#fff;}
.on-dark .btn-ghost:hover,.section.dark .btn-ghost:hover{background:#fff;color:var(--night);border-color:#fff;}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.text-link{font-weight:650;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);}
@supports (backdrop-filter:blur(8px)){.site-header{background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(10px);}}
.nav-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--header-h);}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0;}
.brand img{width:60px;height:auto;}
.brand-name{display:flex;flex-direction:column;line-height:1;}
.brand-name b{font-weight:800;font-size:1.06rem;letter-spacing:-.01em;color:var(--wine);}
.brand-name span{font-size:.72rem;font-weight:600;color:var(--muted);margin-top:4px;letter-spacing:.02em;}
.primary-nav{display:flex;align-items:center;gap:4px;}
.primary-nav > ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;}
.primary-nav li{margin:0;position:relative;}
.nav-link{display:flex;align-items:center;gap:6px;padding:10px 12px;border-radius:var(--radius);font-weight:600;font-size:.95rem;color:var(--ink);
  text-decoration:none;background:none;border:0;cursor:pointer;font-family:var(--sans);}
.nav-link:hover,.nav-link[aria-expanded="true"]{background:var(--blush);color:var(--wine);}
.nav-link[aria-current="page"],.nav-link.is-section{color:var(--crimson);}
.nav-link .chev{width:10px;height:10px;transition:transform .2s ease;}
.nav-link[aria-expanded="true"] .chev{transform:rotate(180deg);}
.dropdown{position:absolute;top:calc(100% + 8px);left:-8px;min-width:290px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 18px 40px -18px rgba(22,8,16,.35);padding:10px;list-style:none;margin:0;display:none;}
.dropdown.open{display:block;}
.dropdown a{display:block;padding:10px 12px;border-radius:4px;text-decoration:none;color:var(--ink);}
.dropdown a:hover{background:var(--blush);}
.dropdown a b{display:block;font-weight:650;font-size:.95rem;}
.dropdown a span{display:block;font-size:.82rem;color:var(--muted);line-height:1.35;margin-top:2px;}
.dropdown .dd-all{border-top:1px solid var(--line);margin-top:6px;padding-top:6px;}
.nav-cta{margin-left:10px;}
.menu-btn{display:none;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1.5px solid var(--ink);border-radius:var(--radius);background:none;
  font:600 .95rem var(--sans);color:var(--ink);cursor:pointer;}
.menu-btn svg{width:18px;height:18px;}

@media (max-width:1080px){
  .site-header{backdrop-filter:none!important;background:#fff!important;}
  .menu-btn{display:inline-flex;}
  .primary-nav{position:fixed;inset:var(--header-h) 0 0 0;background:#fff;display:none;flex-direction:column;align-items:stretch;
    padding:12px var(--gutter) 40px;overflow-y:auto;border-top:1px solid var(--line);}
  .primary-nav.open{display:flex;}
  .primary-nav > ul{flex-direction:column;align-items:stretch;gap:0;}
  .primary-nav > ul > li{border-bottom:1px solid var(--line);}
  .nav-link{width:100%;justify-content:space-between;padding:16px 4px;font-size:1.08rem;border-radius:0;}
  .nav-link:hover,.nav-link[aria-expanded="true"]{background:none;}
  .dropdown{position:static;box-shadow:none;border:0;padding:0 0 12px 8px;min-width:0;}
  .nav-cta{margin:20px 0 0;}
  .nav-cta .btn{width:100%;}
  body.menu-open{overflow:hidden;}
}
@media (max-width:420px){
  .brand img{width:50px;}
  .brand-name b{font-size:.98rem;}
  .brand-name span{display:none;}
}

/* ---------- wing motif (from the logo's wings) ---------- */
.wings{position:absolute;pointer-events:none;}
.wings i{position:absolute;display:block;height:var(--h,26px);border-radius:999px 4px 4px 999px;background:var(--crimson);transform:skewY(-14deg);transform-origin:right center;}
.wings i:nth-child(1){width:100%;top:0;}
.wings i:nth-child(2){width:86%;top:calc(var(--h,26px) * 1.5);right:0;background:#9B0F3F;}
.wings i:nth-child(3){width:70%;top:calc(var(--h,26px) * 3);right:0;background:var(--wine);}
.wings i:nth-child(4){width:54%;top:calc(var(--h,26px) * 4.5);right:0;background:#5A0925;}

/* ---------- HOME HERO STAGE ---------- */
.stage{position:relative;background:var(--night);color:var(--on-dark);overflow:hidden;isolation:isolate;}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 80% at 78% 40%,rgba(181,18,74,.28),transparent 70%),radial-gradient(40% 50% at 10% 100%,rgba(201,146,46,.10),transparent 70%);}
.slides{position:relative;}
.slide{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,72px);align-items:center;
  padding:clamp(44px,7vw,92px) 0 clamp(36px,5vw,64px);min-height:clamp(520px,64vh,640px);}
.slide > *{min-width:0;}
/* all slides share one grid cell, so the stage keeps the height of the tallest slide (no layout shift) */
.js .slides{display:grid;}
.js .slide{grid-area:1/1;visibility:hidden;opacity:0;transform:translateX(14px);transition:opacity .55s ease,transform .55s ease,visibility 0s linear .55s;}
.js .slide.is-active{visibility:visible;opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease,visibility 0s;}
@media (prefers-reduced-motion:reduce){.js .slide,.js .slide.is-active{transition:none;transform:none;}}
.slide-copy h1,.slide-copy .h1{font-size:var(--step-5);color:#fff;font-weight:750;letter-spacing:-.03em;line-height:1.02;margin:0 0 .45em;max-width:14ch;font-variation-settings:"opsz" 96;}
.slide-copy p{font-family:var(--serif);font-size:clamp(1.08rem,1rem + .4vw,1.25rem);color:var(--on-dark-muted);max-width:46ch;margin-bottom:1.6em;}
.slide-copy .btn-row{gap:14px;}
.slide-copy .text-link{color:#fff;}
.slide-visual{position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;}
.stage-wings{right:0;top:9%;width:min(34vw,520px);--h:34px;opacity:.55;z-index:-1;}
.stage-wings i{border-radius:999px 0 0 999px;}
.stage .btn-ghost{color:#fff;}
.stage .btn-ghost:hover{background:#fff;color:var(--night);border-color:#fff;}
.photo-frame{position:relative;width:min(100%,500px);clip-path:polygon(0 0,100% 0,100% 82%,84% 100%,0 100%);border-radius:4px 4px 0 4px;overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.6);}
.photo-frame img{width:100%;aspect-ratio:515/335;object-fit:cover;}
.photo-note{position:absolute;left:-10px;bottom:-18px;background:var(--gold);color:var(--night);padding:12px 16px;border-radius:4px;font-weight:650;font-size:.92rem;max-width:250px;line-height:1.3;}

.code-card{position:relative;width:min(100%,430px);margin-right:70px;background:#0E0509;border:1px solid var(--night-line);border-radius:8px;box-shadow:0 30px 60px -24px rgba(0,0,0,.7);overflow:hidden;}
.code-top{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid var(--night-line);font-size:.8rem;color:var(--on-dark-muted);}
.code-top i{width:10px;height:10px;border-radius:50%;background:#3A2530;display:block;}
.code-top i:first-child{background:var(--crimson);} .code-top i:nth-child(2){background:var(--gold);}
.code-top span{margin-left:8px;}
.code-card pre{margin:0;padding:18px 18px 22px;font:500 .86rem/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#EADDE2;overflow-x:auto;white-space:pre;}
.tok-k{color:#F07AA5;} .tok-s{color:var(--gold-soft);} .tok-c{color:#8E7A83;} .tok-f{color:#fff;font-weight:700;}
.phone{position:absolute;right:0;bottom:-6%;width:132px;aspect-ratio:9/18;background:#fff;border:7px solid #0E0509;border-radius:22px;overflow:hidden;box-shadow:0 20px 40px -14px rgba(0,0,0,.7);}
.phone .ph-bar{height:34%;background:var(--crimson);padding:14px 10px;color:#fff;font-weight:700;font-size:.72rem;line-height:1.2;}
.phone .ph-body{padding:10px;display:grid;gap:7px;}
.phone .ph-body i{display:block;height:8px;border-radius:4px;background:#EBDDE2;}
.phone .ph-body i:nth-child(2){width:70%;} .phone .ph-body i:nth-child(4){width:50%;background:var(--gold);height:16px;}

.studio{position:relative;width:min(100%,460px);}
.studio img{width:100%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5));}
.wave{display:flex;align-items:flex-end;justify-content:center;gap:5px;height:54px;margin-top:-6px;}
.wave i{display:block;width:6px;border-radius:3px;background:linear-gradient(var(--gold-soft),var(--crimson));}

.stage-tabs{position:relative;border-top:1px solid var(--night-line);}
.stage-tabs .wrap{display:grid;grid-template-columns:repeat(3,1fr) auto;align-items:stretch;}
.stage-tabs .tablist{display:contents;}
.stage-tab{position:relative;text-align:left;background:none;border:0;color:var(--on-dark-muted);font:600 .98rem/1.3 var(--sans);padding:20px 18px 22px 0;cursor:pointer;}
.stage-tab small{display:block;font-weight:500;font-size:.82rem;color:#8E7A83;margin-top:3px;}
.stage-tab[aria-selected="true"]{color:#fff;}
.stage-tab .bar{position:absolute;left:0;right:18px;top:-1px;height:3px;background:transparent;overflow:hidden;}
.stage-tab[aria-selected="true"] .bar{background:rgba(255,255,255,.18);}
.stage-tab .bar b{display:block;height:100%;width:0;background:var(--gold);}
.stage-tab[aria-selected="true"] .bar b{width:100%;}
.stage.is-playing .stage-tab[aria-selected="true"] .bar b{width:0;animation:fill var(--dur,8s) linear forwards;}
@keyframes fill{to{width:100%}}
.stage-pause{align-self:center;display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--night-line);color:var(--on-dark);border-radius:999px;
  padding:8px 14px;font:600 .82rem var(--sans);cursor:pointer;}
.stage-pause svg{width:12px;height:12px;}
.no-js .stage-tabs{display:none;}

@media (max-width:900px){
  .slide{grid-template-columns:1fr;min-height:0;padding-top:40px;}
  .slide-visual{min-height:0;margin-top:8px;padding-bottom:26px;flex-direction:column;align-items:stretch;}
  .photo-frame,.code-card,.studio{width:100%;max-width:520px;margin:0 auto;}
  .stage-wings{opacity:.25;width:60vw;top:auto;bottom:22%;}
  .slide-copy h1,.slide-copy .h1{max-width:18ch;}
  .phone{width:104px;right:0;bottom:-4%;}
  .code-card{margin-right:0;max-width:calc(100% - 40px);}
  .stage-tabs .wrap{grid-template-columns:repeat(3,1fr);}
  .stage-tab small{display:none;}
  .stage-tab{font-size:.9rem;padding:16px 10px 18px 0;}
  .stage-pause{grid-column:1/-1;justify-self:start;margin:0 0 16px;}
}
@media (max-width:560px){
  .slide-copy .btn-row .btn{flex:1 1 100%;}
  .photo-note{position:static;margin-top:12px;max-width:none;}
  .code-card pre{font-size:.76rem;padding:14px;}
  .phone{display:none;}
}

/* ---------- inner page hero ---------- */
.page-hero{position:relative;background:var(--night);color:var(--on-dark);overflow:hidden;padding:clamp(40px,6vw,80px) 0 clamp(44px,6vw,84px);isolation:isolate;}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 90% at 92% 30%,rgba(181,18,74,.30),transparent 70%);}
.page-hero .wings{right:-60px;top:28%;width:min(42vw,520px);--h:24px;opacity:.9;z-index:-1;}
.page-hero h1{color:#fff;max-width:20ch;margin-bottom:.4em;}
.page-hero .lead{color:var(--on-dark-muted);}
.page-hero .btn-row{margin-top:26px;}
.crumbs{font-size:.86rem;margin-bottom:22px;}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;}
.crumbs li{margin:0;color:var(--on-dark-muted);}
.crumbs li+li::before{content:"/";margin-right:6px;color:#6B5560;}
.crumbs a{color:var(--on-dark);text-decoration:none;}
.crumbs a:hover{text-decoration:underline;}
@media (max-width:760px){.page-hero .wings{opacity:.35;width:70vw;right:-30vw;}}

/* ---------- facts (key/value) ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;margin-top:30px;border-top:1px solid var(--night-line);}
.facts div{padding:16px 18px 4px 0;}
.facts dt{font-size:.82rem;color:var(--on-dark-muted);margin-bottom:3px;}
.facts dd{margin:0;font-weight:650;color:#fff;font-size:1rem;line-height:1.35;}
.facts.light{border-top-color:var(--line);}
.facts.light dt{color:var(--muted);} .facts.light dd{color:var(--ink);}

/* ---------- layout helpers ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;}
.split.wide-left{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);}
.split.center{align-items:center;}
@media (max-width:860px){.split,.split.wide-left{grid-template-columns:1fr;}}
.prose{max-width:68ch;}
.prose p,.prose li{color:var(--ink);}
.prose h2{margin-top:1.4em;}
.prose h3{margin-top:1.3em;}

/* ---------- index list (pillars/services) ---------- */
.index-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line);}
.index-list > li{margin:0;border-bottom:1px solid var(--line);}
.index-list a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 28px;gap:24px;align-items:baseline;padding:26px 0;text-decoration:none;color:var(--ink);}
.index-list a:hover h3{color:var(--crimson);}
.index-list h3{margin:0;font-size:var(--step-2);transition:color .2s ease;}
.index-list p{margin:0;color:var(--muted);}
.index-list .go{align-self:center;width:28px;height:28px;color:var(--crimson);transition:transform .2s ease;}
.index-list a:hover .go{transform:translateX(4px);}
.section.dark .index-list{border-color:var(--night-line);} .section.dark .index-list>li{border-color:var(--night-line);}
.section.dark .index-list a{color:#fff;} .section.dark .index-list p{color:var(--on-dark-muted);} .section.dark .index-list .go{color:var(--gold);}
@media (max-width:700px){.index-list a{grid-template-columns:1fr 24px;gap:6px 14px;padding:20px 0;}.index-list p{grid-column:1/2;}.index-list .go{grid-row:1/3;grid-column:2;}}

/* ---------- course tiles ---------- */
.course-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
.course{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px 24px;text-decoration:none;color:var(--ink);
  transition:border-color .2s ease;}
.course:hover{border-color:var(--crimson);color:var(--ink);}
.course .ico{width:44px;height:44px;border-radius:var(--radius);background:var(--night);display:grid;place-items:center;margin-bottom:18px;}
.course .ico svg{width:22px;height:22px;color:var(--gold-soft);}
.course h3{font-size:1.22rem;margin-bottom:.4em;}
.course p{color:var(--muted);font-size:.96rem;flex:1;}
.course .meta{font-size:.84rem;font-weight:600;color:var(--wine);margin:0;}
@media (max-width:1000px){.course-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.course-grid{grid-template-columns:1fr;}}

/* ---------- steps (real sequences only) ---------- */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:step;}
.steps li{counter-increment:step;margin:0;padding-top:20px;border-top:3px solid var(--crimson);}
.steps li::before{content:"Step " counter(step);display:block;font-size:.84rem;font-weight:650;color:var(--crimson);margin-bottom:8px;}
.steps h3{font-size:1.15rem;margin-bottom:.35em;}
.steps p{color:var(--muted);font-size:.96rem;margin:0;}
.section.dark .steps li{border-color:var(--gold);} .section.dark .steps li::before{color:var(--gold-soft);} .section.dark .steps p{color:var(--on-dark-muted);}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.steps{grid-template-columns:1fr;}}

/* ---------- modules (curriculum) ---------- */
.modules{list-style:none;padding:0;margin:0;counter-reset:mod;border-top:1px solid var(--line);}
.modules li{counter-increment:mod;display:grid;grid-template-columns:92px minmax(0,1fr);gap:18px;padding:22px 0;border-bottom:1px solid var(--line);margin:0;}
.modules li::before{content:"Module " counter(mod);font-size:.84rem;font-weight:650;color:var(--crimson);padding-top:3px;}
.modules h3{font-size:1.15rem;margin-bottom:.3em;}
.modules p{margin:0;color:var(--muted);}
@media (max-width:520px){.modules li{grid-template-columns:1fr;gap:4px;}}

/* ---------- ticks list ---------- */
.ticks{list-style:none;padding:0;margin:0 0 1em;}
.ticks li{position:relative;padding-left:30px;margin-bottom:.7em;}
.ticks li::before{content:"";position:absolute;left:0;top:.38em;width:16px;height:10px;border-left:2.5px solid var(--crimson);border-bottom:2.5px solid var(--crimson);transform:rotate(-45deg);}
.section.dark .ticks li::before{border-color:var(--gold);}
.ticks.cols{columns:2;column-gap:40px;}
.ticks.cols li{break-inside:avoid;}
@media (max-width:640px){.ticks.cols{columns:1;}}

/* ---------- panels ---------- */
.panel{background:var(--blush);border-radius:var(--radius);padding:clamp(22px,3vw,34px);}
.panel.dark{background:var(--night);color:var(--on-dark);} .panel.dark h3{color:#fff;}
.panel.outline{background:#fff;border:1px solid var(--line);}
.panel h3{margin-bottom:.5em;}
.panel > :last-child{margin-bottom:0;}
.sticky-side{position:sticky;top:calc(var(--header-h) + 24px);}

.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);}
@media (max-width:900px){.three{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.three,.two{grid-template-columns:1fr;}}
.feature h3{font-size:1.2rem;}
.feature p{color:var(--muted);margin:0;}
.section.dark .feature p{color:var(--on-dark-muted);}
.feature .ico{width:40px;height:40px;color:var(--crimson);margin-bottom:14px;}
.section.dark .feature .ico{color:var(--gold);}

/* ---------- numbers strip ---------- */
.numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--night-line);}
.numbers div{padding:26px 20px 0 0;}
.numbers b{display:block;font-size:clamp(2.2rem,1.5rem + 3vw,3.4rem);font-weight:780;line-height:1;color:#fff;letter-spacing:-.03em;font-variation-settings:"opsz" 96;}
.numbers span{display:block;margin-top:8px;color:var(--on-dark-muted);font-size:.95rem;}
@media (max-width:760px){.numbers{grid-template-columns:1fr 1fr;row-gap:10px;}}

/* ---------- audience paths ---------- */
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.path{padding:clamp(24px,3vw,36px);border-right:1px solid var(--line);display:flex;flex-direction:column;}
.path:last-child{border-right:0;}
.path h3{font-size:1.35rem;}
.path p{color:var(--muted);flex:1;}
.path:nth-child(1){background:#fff;} .path:nth-child(2){background:var(--blush);} .path:nth-child(3){background:#fff;}
@media (max-width:860px){.paths{grid-template-columns:1fr;}.path{border-right:0;border-bottom:1px solid var(--line);}.path:last-child{border-bottom:0;}}

/* ---------- projects ---------- */
.project{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff;}
.project + .project{margin-top:24px;}
.project-art{position:relative;min-height:240px;background:var(--night);overflow:hidden;display:grid;place-items:center;}
.project-art svg.mark{width:84px;height:84px;color:var(--gold-soft);position:relative;z-index:1;}
.project-art .wings{left:-20%;top:20%;width:110%;--h:22px;opacity:.65;}
.project-art.green{background:#0F1A12;} .project-art.green .wings i{background:#1F6B3A;} .project-art.green .wings i:nth-child(2){background:#185530;} .project-art.green .wings i:nth-child(3){background:#124226;} .project-art.green .wings i:nth-child(4){background:#0D321C;}
.project-body{padding:clamp(24px,3vw,40px);}
.project-body .status{display:inline-block;font-size:.8rem;font-weight:650;color:var(--wine);background:var(--blush);padding:4px 10px;border-radius:999px;margin-bottom:12px;}
@media (max-width:760px){.project{grid-template-columns:1fr;}.project-art{min-height:170px;}}

/* ---------- blog cards ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,32px);}
@media (max-width:960px){.post-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.post-grid{grid-template-columns:1fr;}}
.post-card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);}
.post-card:hover{color:var(--ink);}
.post-card:hover h3{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;}
.post-cover{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--night);margin-bottom:16px;display:grid;place-items:end start;padding:16px;}
.post-cover .wings{right:-12%;top:18%;width:80%;--h:16px;opacity:.9;}
.post-cover .cat{position:relative;z-index:1;background:#fff;color:var(--wine);font-size:.78rem;font-weight:700;padding:5px 10px;border-radius:999px;}
.post-cover.c-careers{background:#1A0B13;} .post-cover.c-skills{background:#170A1D;} .post-cover.c-marketing{background:#1C0E09;}
.post-cover.c-marketing .wings i:nth-child(odd){background:var(--gold);}
.post-card h3{font-size:1.25rem;margin-bottom:.4em;}
.post-card p{color:var(--muted);font-size:.97rem;margin-bottom:.8em;}
.post-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.84rem;color:var(--muted);margin-top:auto;}
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px;}
.filter button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font:600 .9rem var(--sans);color:var(--ink);cursor:pointer;min-height:40px;}
.filter button[aria-pressed="true"]{background:var(--night);color:#fff;border-color:var(--night);}
.empty-note{display:none;padding:24px;border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted);}

/* ---------- article ---------- */
.article-hero h1{max-width:24ch;font-size:clamp(2rem,1.3rem + 3vw,3.2rem);}
.article-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.92rem;color:var(--on-dark-muted);margin-top:18px;}
.article{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,5vw,72px);align-items:start;}
@media (max-width:960px){.article{grid-template-columns:1fr;}}
.article-body{font-family:var(--serif);font-size:1.16rem;line-height:1.75;max-width:68ch;}
.article-body h2{font-family:var(--sans);font-size:var(--step-3);margin:1.7em 0 .55em;}
.article-body h3{font-family:var(--sans);font-size:var(--step-1);margin:1.5em 0 .5em;}
.article-body p,.article-body li{color:#2A2025;}
.article-body ul,.article-body ol{padding-left:1.3em;}
.article-body li{margin-bottom:.5em;}
.article-body blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:4px solid var(--crimson);font-style:italic;color:var(--muted);}
.article-body table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.95rem;margin:1.4em 0;display:block;overflow-x:auto;}
.article-body th,.article-body td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
.article-body th{background:var(--blush);font-weight:650;}
.article-body .callout{font-family:var(--sans);font-size:1rem;background:var(--blush);border-radius:var(--radius);padding:20px 22px;margin:1.6em 0;}
.toc{font-size:.95rem;}
.toc h2{font-size:1rem;margin-bottom:.8em;}
.toc ol{padding-left:1.1em;margin:0;}
.toc a{color:var(--ink);text-decoration:none;}
.toc a:hover{color:var(--crimson);text-decoration:underline;}
.author-box{display:flex;gap:14px;align-items:center;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--sans);}
.author-box img{width:56px;height:auto;}
.author-box p{margin:0;font-size:.95rem;color:var(--muted);}
.share{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.share a{font-size:.88rem;font-weight:600;border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;text-decoration:none;color:var(--ink);}
.share a:hover{border-color:var(--crimson);color:var(--crimson);}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font-weight:650;font-size:1.1rem;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .pm{position:relative;width:16px;height:16px;flex-shrink:0;}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:var(--crimson);transition:transform .2s ease;}
.faq summary .pm::after{transform:rotate(90deg);}
.faq details[open] summary .pm::after{transform:rotate(0deg);}
.faq .ans{padding:0 0 22px;color:var(--muted);max-width:70ch;}
.faq .ans p:last-child{margin-bottom:0;}
.faq-group + .faq-group{margin-top:48px;}
.faq-group h2{font-size:var(--step-3);}

/* ---------- CTA band ---------- */
.cta-band{position:relative;background:var(--crimson);color:#fff;overflow:hidden;isolation:isolate;padding:clamp(48px,7vw,84px) 0;}
.cta-band::after{content:"";position:absolute;right:-6%;top:-40%;width:46%;height:180%;background:var(--wine);transform:skewX(-18deg);z-index:-1;}
.cta-band h2{color:#fff;max-width:22ch;}
.cta-band p{color:#FBE3EC;max-width:56ch;font-family:var(--serif);font-size:1.15rem;}
.cta-band .btn-ghost{color:#fff;} .cta-band .btn-ghost:hover{background:#fff;color:var(--crimson);border-color:#fff;}
.cta-band .split{align-items:center;}
@media (max-width:860px){.cta-band::after{width:70%;right:-40%;}}

/* ---------- forms ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form .full{grid-column:1/-1;}
.field label{display:block;font-weight:650;font-size:.92rem;margin-bottom:6px;}
.field .hint{font-weight:400;color:var(--muted);}
.field input,.field select,.field textarea{width:100%;min-height:48px;border:1.5px solid #CFC2C7;border-radius:var(--radius);padding:12px 14px;font:400 1rem var(--sans);color:var(--ink);background:#fff;}
.field textarea{min-height:140px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--ink);}
.form-status{min-height:1.4em;font-weight:600;margin:6px 0 0;}
.form-status.ok{color:#17703A;} .form-status.err{color:#A3122F;}
.form-note{font-size:.88rem;color:var(--muted);margin:0;}
.hp{position:absolute!important;left:-9999px!important;}
@media (max-width:600px){.form{grid-template-columns:1fr;}}

.contact-list{list-style:none;padding:0;margin:0;}
.contact-list li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);margin:0;}
.contact-list svg{width:22px;height:22px;color:var(--crimson);margin-top:2px;}
.contact-list b{display:block;font-weight:650;}
.contact-list span,.contact-list a{color:var(--muted);}

/* ---------- footer ---------- */
.site-footer{background:var(--night);color:var(--on-dark-muted);padding:clamp(56px,7vw,88px) 0 28px;}
.site-footer a{color:var(--on-dark);text-decoration:none;}
.site-footer a:hover{color:var(--gold-soft);text-decoration:underline;}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,.8fr)) minmax(0,1.35fr);gap:clamp(24px,3vw,44px);}
.foot-brand img{width:150px;border-radius:8px;margin-bottom:18px;}
.foot-brand p{font-size:.95rem;max-width:34ch;}
.site-footer h2{font-size:.98rem;color:#fff;margin-bottom:14px;letter-spacing:0;}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer li{margin-bottom:9px;font-size:.95rem;}
.news-form{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.news-form input{flex:1 1 180px;min-width:0;min-height:46px;border-radius:var(--radius);border:1.5px solid var(--night-line);background:var(--night-2);color:#fff;padding:10px 12px;font:400 .95rem var(--sans);}
.news-form input::placeholder{color:#8E7A83;}
.news-form .btn{min-height:46px;padding:.6em 1em;}
.socials{display:flex;gap:10px;margin-top:18px;}
.socials a{width:40px;height:40px;border:1px solid var(--night-line);border-radius:50%;display:grid;place-items:center;}
.socials svg{width:18px;height:18px;}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:48px;padding-top:22px;border-top:1px solid var(--night-line);font-size:.88rem;}
@media (max-width:1000px){.foot-grid{grid-template-columns:1fr 1fr 1fr;}.foot-brand,.foot-news{grid-column:1/-1;}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr 1fr;}}

/* ---------- misc ---------- */
.tag-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0;}
.tag-list li{margin:0;font-size:.86rem;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--blush);color:var(--wine);}
.section.dark .tag-list li{background:var(--night-2);color:var(--gold-soft);}
.notice{border-left:4px solid var(--gold);background:#FFF8EC;padding:16px 18px;border-radius:0 var(--radius) var(--radius) 0;}
.not-found{min-height:60vh;display:flex;align-items:center;}
hr.rule{border:0;border-top:1px solid var(--line);margin:40px 0;}
.modules.plain li{grid-template-columns:1fr;gap:0;}
.modules.plain li::before{content:none;}
.ticks li.todo::before{content:none;}
.article-body li.todo{list-style:none;margin-left:-1.3em;}
@media (max-width:900px){.three[style*="repeat(4"]{grid-template-columns:1fr 1fr!important;}}
@media (max-width:560px){.three[style*="repeat(4"]{grid-template-columns:1fr!important;}.course-grid[style]{grid-template-columns:1fr!important;}}
@media (min-width:561px) and (max-width:1000px){.course-grid[style]{grid-template-columns:1fr 1fr!important;}}
.article > *,.split > *,.two > *,.three > *,.foot-grid > *,.course-grid > *,.post-grid > *{min-width:0;}
@media (max-width:360px){
  .nav-bar{gap:10px;}
  .brand{gap:8px;}
  .brand img{width:44px;}
  .brand-name b{font-size:.86rem;}
  .menu-btn{padding:8px 10px;gap:6px;font-size:.9rem;}
}