/* ============================================================
   INSIGHT ANALYTICS — styles.css
   Style:  Trust & Authority
   Brand:  navy #0f1035 · cream #F2E5DA · bronze #754c29
   Type:   Poppins (headings) · Open Sans (body)
   ------------------------------------------------------------
   CONTENTS
     1.  Tokens
     2.  Base
     3.  Buttons / eyebrow / headings
     4.  Header + nav + drawer
     5.  Home hero
     6.  Trust strip
     7.  Section base
     8.  Service cards (home)
     9.  Page hero (interior pages)
     10. Split rows
     11. Cards grid
     12. Course curriculum
     13. Cohorts
     14. Excel mockups
     15. Automation flow
     16. FAQ
     17. CTA band
     18. Contact + form
     19. Footer
     20. Reveal
     21. Responsive
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* brand */
  --navy:#0f1035;
  --navy-700:#171260;
  --navy-600:#241e6e;
  --navy-500:#332c86;
  --cream:#F2E5DA;
  --cream-50:#FBF7F2;
  --cream-100:#F6EFE7;
  --bronze:#754c29;
  --bronze-500:#8A5A32;
  --bronze-300:#B08A63;
  --bronze-100:#E4D3C2;

  /* neutrals */
  --white:#ffffff;
  --ink:#1A1830;
  --ink-600:#4B4863;
  --ink-400:#7A7791;
  --line:#EAE2D8;
  --line-soft:#F0EAE1;

  /* status */
  --green:#1a7f4e;
  --green-bg:#E6F4EC;
  --amber:#9A6B12;
  --amber-bg:#FBF1DC;

  /* semantic
     --bg and --surface are the two tones sections alternate between.
     --surface used to be pure #fff, which made half the site read as a
     flat white sheet; it is now a warmer paper tone, so white cards and
     panels have something to lift off. */
  --bg:#FBF7F2;
  --surface:#F4EDE4;
  --primary:var(--navy);
  --accent:var(--bronze);

  --radius:14px;
  --radius-lg:22px;
  --radius-xl:32px;
  --shadow-xs:0 1px 2px rgba(5,2,54,.05);
  --shadow-sm:0 4px 14px rgba(5,2,54,.06);
  --shadow-md:0 14px 40px rgba(5,2,54,.10);
  --shadow-lg:0 30px 70px rgba(5,2,54,.16);
  --ring:0 0 0 4px rgba(118,76,41,.16);

  --ff-head:'Poppins',system-ui,sans-serif;
  --ff-body:'Open Sans',system-ui,sans-serif;
  --ff-mono:'JetBrains Mono',ui-monospace,'Consolas',monospace;
  --ease:cubic-bezier(.4,0,.2,1);
  --header-h:78px;
}

/* ---------- 2. Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--bg);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--ff-head);color:var(--navy);line-height:1.15;font-weight:700;letter-spacing:-.01em}
img,svg{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
::selection{background:var(--navy);color:var(--cream)}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.wrap--narrow{max-width:900px}

/* Grid tracks default to minmax(auto,1fr), and `auto` floors at the
   item's min-content. A wide child (the Excel table mockups) therefore
   forces the whole track wider than the viewport, dragging the headline
   and copy off-screen with it. min-width:0 lets tracks actually shrink;
   the wide child then scrolls inside its own card instead. */
.hero-grid > *,
.page-hero-grid > *,
.contact-grid > *,
.split > *,
.svc-card--feature > *{min-width:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 3. Buttons / eyebrow / headings ---------- */
.btn{
  --bg:var(--navy);--fg:var(--white);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ff-head);font-weight:600;font-size:.94rem;
  padding:14px 28px;border-radius:12px;border:1.5px solid transparent;
  background:var(--bg);color:var(--fg);cursor:pointer;white-space:nowrap;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s;
}
.btn svg{transition:transform .22s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{--bg:var(--navy);--fg:#fff}
.btn--primary:hover{--bg:var(--navy-700);box-shadow:var(--shadow-md)}
.btn--accent{--bg:var(--bronze);--fg:#fff}
.btn--accent:hover{--bg:var(--bronze-500);box-shadow:0 14px 30px rgba(118,76,41,.32)}
.btn--ghost{--bg:transparent;--fg:var(--navy);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--navy);box-shadow:var(--shadow-sm)}
.btn--light{--bg:#fff;--fg:var(--navy)}
.btn--light:hover{box-shadow:var(--shadow-md)}
.btn--outline-light{--bg:transparent;--fg:var(--cream);border-color:rgba(242,229,218,.35)}
.btn--outline-light:hover{border-color:var(--cream);background:rgba(242,229,218,.08)}
.btn--sm{padding:10px 18px;font-size:.84rem;border-radius:10px}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;pointer-events:none}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--bronze);outline-offset:3px}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff-head);font-weight:600;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--bronze);background:var(--cream);
  padding:8px 16px;border-radius:999px;
}
.eyebrow--onDark{color:var(--bronze-300);background:rgba(242,229,218,.08);border:1px solid rgba(242,229,218,.12)}

.head{max-width:640px}
.head--center{margin-inline:auto;text-align:center}
.head h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:20px 0 16px}
.head p{color:var(--ink-600);font-size:1.05rem}
.head .bar{width:56px;height:4px;border-radius:2px;background:var(--bronze);margin:18px auto 0}

.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ff-head);font-weight:600;font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;white-space:nowrap;
}
.pill--open{background:var(--green-bg);color:var(--green)}
.pill--filling{background:var(--amber-bg);color:var(--amber)}
.pill--full{background:var(--line-soft);color:var(--ink-400)}
.pill--beginner{background:var(--green-bg);color:var(--green)}
.pill--intermediate{background:var(--amber-bg);color:var(--amber)}
.pill--advanced{background:#FCEBEA;color:#A5342A}
.pill--soon{background:var(--bronze-100,#F0E4D8);color:var(--bronze)}

/* ---------- 4. Header + nav + drawer ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(251,247,242,.82);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s;
}
.site-header.scrolled{border-color:var(--line);box-shadow:var(--shadow-xs)}
/* With the navy drawer open behind it, the translucent bar goes muddy —
   so make it solid while the menu is up. */
body.nav-open .site-header{background:var(--cream-50);backdrop-filter:none;border-color:transparent;box-shadow:none}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:20px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand-mark{width:32px;height:36px;object-fit:contain;transition:transform .3s var(--ease)}
.brand-mark--sm{width:28px;height:32px}
.brand:hover .brand-mark{transform:translateY(-2px) rotate(-3deg)}
.brand-text{font-family:var(--ff-head);line-height:1.02}
.brand-text b{display:block;font-weight:700;font-size:1.12rem;letter-spacing:.13em;color:var(--navy)}
.brand-text i{display:block;font-style:normal;font-weight:600;font-size:.56rem;letter-spacing:.36em;color:var(--bronze)}
.nav-menu{display:flex;align-items:center;gap:clamp(22px,2.6vw,38px);list-style:none}
.nav-menu > li{position:relative}
.nav-menu a,.nav-drop-btn{
  font-family:var(--ff-head);font-weight:500;font-size:.92rem;color:var(--ink-600);
  position:relative;padding:6px 0;transition:color .2s;white-space:nowrap;
}
.nav-menu > li > a::after,.nav-drop-btn::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--bronze);border-radius:2px;transition:width .28s var(--ease);
}
.nav-menu > li > a:hover,.nav-menu > li > a.active,.nav-drop-btn:hover,.nav-drop-btn.active{color:var(--navy)}
.nav-menu > li > a:hover::after,.nav-menu > li > a.active::after,
.nav-drop-btn:hover::after,.nav-drop-btn.active::after{width:100%}
.nav-drop-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;cursor:pointer;font-family:var(--ff-head);
}
.nav-drop-btn .caret{transition:transform .28s var(--ease);opacity:.6}
.nav-drop-btn[aria-expanded="true"]{color:var(--navy)}
.nav-drop-btn[aria-expanded="true"]::after{width:100%}
.nav-drop-btn[aria-expanded="true"] .caret{transform:rotate(180deg);opacity:1}

/* Services dropdown */
.nav-drop{
  position:absolute;top:calc(100% + 16px);left:50%;z-index:120;
  width:290px;padding:8px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translate(-50%,-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.has-drop:hover .nav-drop,
.nav-drop-btn[aria-expanded="true"] + .nav-drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
/* bridges the gap so the menu survives the trip from button to panel */
.nav-drop::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.nav-drop a{
  display:flex;align-items:center;gap:13px;
  padding:11px 12px;border-radius:11px;color:var(--ink-600);
  transition:background .18s,color .18s;
}
.nav-drop a::after{display:none}
.nav-drop a:hover{background:var(--cream-50);color:var(--navy)}
.nav-drop .nd-ic{
  width:38px;height:38px;flex-shrink:0;border-radius:10px;
  background:var(--cream);color:var(--bronze);display:grid;place-items:center;
  transition:background .18s,color .18s;
}
.nav-drop a:hover .nd-ic{background:var(--navy);color:var(--cream)}
.nav-drop .nd-txt{display:flex;flex-direction:column;line-height:1.3}
.nav-drop .nd-txt b{font-family:var(--ff-head);font-weight:600;font-size:.88rem;color:var(--navy)}
.nav-drop .nd-txt small{font-size:.74rem;color:var(--ink-400)}

/* drawer grouping */
.drawer-label{
  font-family:var(--ff-head);font-weight:600;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-300);
  padding:18px 0 4px;
}
.drawer a.drawer-sub{font-size:1.15rem;padding-left:16px;color:rgba(242,229,218,.82)}
.nav-actions{display:flex;align-items:center;gap:14px}
.nav-actions .btn{padding:11px 22px;font-size:.86rem}
.burger{display:none;background:none;border:none;cursor:pointer;padding:10px;z-index:120}
.burger span{display:block;width:25px;height:2px;background:var(--navy);border-radius:2px;margin:6px 0;transition:.32s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Sits BELOW the header (z-index 99 vs 100) so the burger stays on top
   and can be tapped to close. At 110 it covered its own close button,
   which left you trapped in the menu. */
.drawer{
  position:fixed;inset:0;z-index:99;display:none;flex-direction:column;
  justify-content:center;gap:2px;
  padding:var(--header-h) 32px 0;background:var(--navy);
}
.drawer.open{display:flex}
.drawer a{font-family:var(--ff-head);font-weight:600;font-size:1.4rem;color:var(--cream);padding:15px 0;border-bottom:1px solid rgba(242,229,218,.12)}
.drawer a:last-child{border:none}
.drawer .btn{align-self:flex-start;margin-top:22px;font-size:1rem}

/* ---------- 5. Home hero ---------- */
.hero{padding:clamp(56px,8vw,96px) 0 clamp(72px,9vw,110px);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,72px);align-items:center}
.hero h1{font-size:clamp(2.4rem,5.2vw,3.85rem);font-weight:700;line-height:1.06;margin:26px 0 22px}
.hero h1 .hl{color:var(--bronze)}
.hero .lead{font-size:1.12rem;color:var(--ink-600);max-width:48ch;margin-bottom:34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:52px}
.hero-metrics{display:flex;gap:clamp(24px,4vw,48px)}
.metric b{display:block;font-family:var(--ff-head);font-weight:700;font-size:clamp(1.6rem,3vw,2.1rem);color:var(--navy)}
.metric span{font-size:.8rem;letter-spacing:.06em;color:var(--ink-400)}

.hero-visual{position:relative}
.hero-visual::before{content:"";position:absolute;inset:-10% -8%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(118,76,41,.14),transparent 70%)}
.badge-float{
  position:absolute;left:-26px;bottom:-26px;
  display:flex;align-items:center;gap:14px;max-width:290px;
  background:#fff;border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-lg);
  animation:bob 5s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.badge-float .ic{width:44px;height:44px;border-radius:11px;background:var(--navy);display:grid;place-items:center;flex-shrink:0}
.badge-float b{font-family:var(--ff-head);font-size:.92rem;color:var(--navy);display:block;margin-bottom:2px}
.badge-float span{font-size:.78rem;color:var(--ink-400);line-height:1.4}

/* ---------- 6. Trust strip ---------- */
.trust{background:var(--navy);color:var(--cream)}
.trust .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:26px;padding-block:26px}
.trust-item{display:flex;align-items:center;gap:12px;font-family:var(--ff-head);font-weight:500;font-size:.92rem;color:rgba(242,229,218,.85)}
.trust-item svg{flex-shrink:0}

/* ---------- 7. Section base ---------- */
.section{padding:clamp(72px,9vw,116px) 0}
/* Alternating sections get a faint warm wash and the same dotted grain used
   on the dark hero, so a long scroll never flattens into one blank field. */
.section--surface{
  background:var(--surface);
  position:relative;isolation:isolate;
}
.section--surface::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(117,76,41,.045) 1px, transparent 0);
  background-size:auto, 34px 34px;
}
.section--cream{background:var(--cream-50)}
.section--tight{padding:clamp(52px,6vw,76px) 0}

/* ---------- 8. Service cards (home) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:56px}
.svc-card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px 32px;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.svc-card::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:4px;
  background:var(--bronze);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.svc-card:hover::after{transform:scaleX(1)}
/* optional image header — bleeds to the card edges, brand-washed */
.svc-img{
  position:relative;margin:-34px -32px 26px;height:184px;overflow:hidden;
}
.svc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.svc-card:hover .svc-img img{transform:scale(1.07)}
.svc-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--angle), rgba(15,16,53,.42), rgba(15,16,53,.06) 55%, rgba(117,76,41,.16));
}
.svc-card .svc-ic{width:52px;height:52px;border-radius:14px;background:var(--cream);display:grid;place-items:center;margin-bottom:22px}
.svc-card h3{font-size:1.3rem;margin-bottom:10px}
.svc-card > p{font-size:.95rem;color:var(--ink-600);margin-bottom:20px}
.svc-card ul{list-style:none;margin-bottom:26px;flex:1}
.svc-card li{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:var(--ink-600);padding:6px 0}
.svc-card li svg{flex-shrink:0;margin-top:5px}
.svc-link{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-family:var(--ff-head);font-weight:600;font-size:.9rem;color:var(--bronze);
}
.svc-link svg{transition:transform .22s var(--ease)}
.svc-card:hover .svc-link svg{transform:translateX(4px)}
.svc-card--wide{grid-column:span 2}
.svc-grid--3{grid-template-columns:repeat(3,1fr)}
.svc-card--feature{background:var(--navy);border-color:var(--navy);grid-column:span 2;
  display:grid;grid-template-columns:1fr .9fr;gap:44px;align-items:center;padding:44px}
.svc-card--feature h3{color:var(--cream);font-size:1.7rem}
.svc-card--feature > div > p{color:rgba(242,229,218,.72)}
.svc-card--feature .svc-ic{background:rgba(242,229,218,.1)}
.svc-card--feature li{color:rgba(242,229,218,.78)}
.svc-card--feature .svc-link{color:var(--bronze-300)}

/* ---------- 9. Page hero (interior pages) ---------- */
.page-hero{
  background:var(--navy);color:var(--cream);position:relative;overflow:hidden;
  padding:clamp(52px,7vw,84px) 0 clamp(60px,8vw,92px);
}
.page-hero::before{content:"";position:absolute;right:-160px;top:-200px;width:540px;height:540px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(118,76,41,.42),transparent 70%);pointer-events:none}
.page-hero::after{content:"";position:absolute;left:-140px;bottom:-220px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(36,30,110,.9),transparent 70%);pointer-events:none}
.page-hero .wrap{position:relative;z-index:1}
.page-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,64px);align-items:center}
.page-hero h1{color:var(--cream);font-size:clamp(2.1rem,4.4vw,3.2rem);margin:22px 0 18px;line-height:1.08}
.page-hero .lead{color:rgba(242,229,218,.75);font-size:1.08rem;max-width:52ch;margin-bottom:32px}
.page-hero .hero-cta{margin-bottom:0}

.crumb{display:flex;align-items:center;gap:9px;font-size:.8rem;color:rgba(242,229,218,.5);margin-bottom:20px}
.crumb a{color:rgba(242,229,218,.72);transition:color .2s}
.crumb a:hover{color:var(--cream)}
.crumb svg{opacity:.5}

.hero-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.fact{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(242,229,218,.07);border:1px solid rgba(242,229,218,.14);
  border-radius:999px;padding:8px 15px;
  font-family:var(--ff-head);font-weight:500;font-size:.8rem;color:rgba(242,229,218,.85);
}
.fact svg{opacity:.8;flex-shrink:0}

/* ---------- 10. Split rows ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,68px);align-items:center}
.split + .split{margin-top:clamp(56px,7vw,92px)}
.split--flip .split-media{order:-1}
.split h3{font-size:clamp(1.4rem,2.4vw,1.85rem);margin-bottom:14px}
.split > div > p{color:var(--ink-600);margin-bottom:20px}
.ticks{list-style:none;display:flex;flex-direction:column;gap:11px}
.ticks li{display:flex;align-items:flex-start;gap:12px;font-size:.94rem;color:var(--ink-600)}
.ticks li svg{flex-shrink:0;margin-top:5px}
.ticks b{color:var(--navy);font-family:var(--ff-head);font-weight:600}

/* ---------- 11. Cards grid ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr);gap:18px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 28px;display:flex;flex-direction:column;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--bronze-100)}
.card-ic{width:46px;height:46px;border-radius:12px;background:var(--cream);display:grid;place-items:center;margin-bottom:18px}
.card h3{font-size:1.08rem;margin-bottom:8px}
.card h4{font-size:1rem;margin-bottom:8px}
.card p{font-size:.9rem;color:var(--ink-600)}
.card--onCream{background:var(--cream-50)}
.card-tag{
  align-self:flex-start;margin-bottom:14px;
  font-family:var(--ff-head);font-weight:600;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bronze);
}

/* ---------- 12a. Course progression ---------- */
.track{position:relative;margin-top:56px;padding-left:76px}
/* the spine, drawn behind the dots */
.track-line{
  position:absolute;left:25px;top:14px;bottom:14px;width:3px;
  background:var(--line);border-radius:2px;overflow:hidden;
}
.track-fill{
  display:block;width:100%;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--bronze-300),var(--bronze));
  transition:height 1.1s var(--ease);
}
.phase{position:relative;padding-bottom:26px}
.phase:last-child{padding-bottom:0}
.phase-dot{
  position:absolute;left:-76px;top:2px;
  width:52px;height:52px;border-radius:15px;
  background:#fff;border:2px solid var(--line);
  display:grid;place-items:center;z-index:1;
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.phase-dot b{
  font-family:var(--ff-head);font-weight:700;font-size:1.15rem;color:var(--ink-400);
  display:grid;place-items:center;transition:color .4s var(--ease);
}
.phase.lit .phase-dot{background:var(--navy);border-color:var(--navy);transform:scale(1.06)}
.phase.lit .phase-dot b{color:var(--cream)}
.phase--final.lit .phase-dot{background:var(--bronze);border-color:var(--bronze)}
.phase-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px 30px;transition:box-shadow .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.phase-card:hover{transform:translateX(4px);box-shadow:var(--shadow-md);border-color:var(--bronze-100)}
.phase--final .phase-card{background:var(--cream-50);border-color:var(--bronze-100)}
.phase-when{
  font-family:var(--ff-head);font-weight:600;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);
}
.phase-card h3{font-size:1.3rem;margin:8px 0 10px}
.phase-card > p{font-size:.95rem;color:var(--ink-600);margin-bottom:18px}
.phase-skills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.chip{
  font-family:var(--ff-head);font-weight:500;font-size:.76rem;
  background:var(--cream-50);border:1px solid var(--line);color:var(--ink-600);
  padding:6px 12px;border-radius:999px;white-space:nowrap;
  transition:transform .2s var(--ease),background .2s,border-color .2s,color .2s;
}
.chip:hover{transform:translateY(-2px);background:var(--navy);border-color:var(--navy);color:var(--cream)}
.chip--gold{background:var(--cream);border-color:var(--bronze-100);color:var(--bronze)}
.chip--gold:hover{background:var(--bronze);border-color:var(--bronze);color:#fff}
.phase-gain{
  font-size:.88rem;color:var(--ink-600);
  padding-top:15px;border-top:1px dashed var(--line);
}
.phase-gain b{font-family:var(--ff-head);font-weight:600;color:var(--navy)}

/* before → after */
.ba{
  display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;
  margin-top:56px;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:#fff;overflow:hidden;
}
.ba-side{padding:30px 32px}
.ba-side--before{background:var(--cream-50)}
.ba-side--after{background:var(--navy)}
.ba-tag{
  display:inline-block;margin-bottom:14px;
  font-family:var(--ff-head);font-weight:600;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;
}
.ba-side--before .ba-tag{color:var(--ink-400)}
.ba-side--after .ba-tag{color:var(--bronze-300)}
.ba-side ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.ba-side li{font-size:.92rem;position:relative;padding-left:22px}
.ba-side--before li{color:var(--ink-600)}
.ba-side--before li::before{content:"×";position:absolute;left:0;top:-1px;color:var(--color-danger,#C0392B);font-weight:700}
.ba-side--after li{color:rgba(242,229,218,.85)}
.ba-side--after li::before{content:"✓";position:absolute;left:0;top:-1px;color:#6fe0b6;font-weight:700}
.ba-side--after code{background:rgba(242,229,218,.12);border-color:transparent;color:var(--bronze-300)}
.ba-arrow{
  display:grid;place-items:center;padding:0 20px;
  background:var(--cream);color:var(--bronze);
}

/* ---------- 12. Course curriculum ---------- */
.course-meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;margin-top:52px;
}
/* When the stat strip opens a section there's no heading above it to
   space away from, so drop the top margin. */
.section--tight > .wrap > .course-meta{margin-top:0}
.course-meta div{background:#fff;padding:26px 22px;text-align:center}
.course-meta b{display:block;font-family:var(--ff-head);font-weight:700;font-size:1.7rem;color:var(--navy);line-height:1.1}
.course-meta span{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-400);margin-top:6px;display:block}

.modules{margin-top:48px;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.module{border-bottom:1px solid var(--line-soft)}
.module:last-child{border-bottom:none}
.module summary{
  display:flex;align-items:center;gap:18px;padding:20px 26px;cursor:pointer;
  list-style:none;transition:background .2s;
}
.module summary::-webkit-details-marker{display:none}
.module summary:hover{background:var(--cream-50)}
.module-n{
  width:38px;height:38px;flex-shrink:0;border-radius:10px;
  background:var(--cream);color:var(--bronze);
  display:grid;place-items:center;
  font-family:var(--ff-head);font-weight:700;font-size:.92rem;
}
.module[open] .module-n{background:var(--navy);color:var(--cream)}
.module-title{flex:1;min-width:0}
.module-title h3{font-size:1.02rem;margin-bottom:2px}
.module-title p{font-size:.82rem;color:var(--ink-400)}
.module-side{display:flex;align-items:center;gap:14px;flex-shrink:0}
.module-time{font-size:.78rem;color:var(--ink-400);font-family:var(--ff-head);white-space:nowrap}
.module-chev{transition:transform .3s var(--ease);color:var(--ink-400)}
.module[open] .module-chev{transform:rotate(180deg)}
.module-body{padding:4px 26px 26px 82px;border-top:1px solid var(--line-soft);margin-top:-1px}
.module-body p{font-size:.92rem;color:var(--ink-600);margin-bottom:14px}
.module-body ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 20px}
.module-body li{display:flex;align-items:flex-start;gap:9px;font-size:.88rem;color:var(--ink-600)}
.module-body li svg{flex-shrink:0;margin-top:5px}
.module--capstone{background:var(--cream-50)}
.module--capstone .module-n{background:var(--bronze);color:#fff}

/* ---------- 12a. The commitment (shape of a day, no times) ----------
   Deliberately shows proportion, not a timetable: visitors should read
   "this is paced sensibly", not plan their diary around it. */
.daybar{margin-top:52px}
.daybar-cap{
  display:block;font-family:var(--ff-head);font-weight:600;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400);margin-bottom:12px;
}
.daybar-track{
  display:flex;gap:4px;height:58px;
  border-radius:var(--radius);overflow:hidden;
}
.daybar-track .seg{
  display:grid;place-items:center;min-width:0;
  font-family:var(--ff-head);font-weight:600;font-size:.72rem;letter-spacing:.04em;
  border-radius:8px;transition:transform .3s var(--ease);
}
.daybar-track .seg b{
  font-weight:600;min-width:0;                 /* without this the label ignores the
                                                  segment width and spills out */
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:6px;
}
.seg--work{
  background:linear-gradient(160deg,var(--navy-600),var(--navy));
  color:var(--cream);
}
.seg--rest{background:var(--cream);color:var(--bronze);border:1px solid var(--bronze-100,#EADDCF)}
.daybar-track:hover .seg{transform:translateY(-2px)}
.daybar-ends{
  display:flex;justify-content:space-between;
  margin-top:10px;font-size:.78rem;color:var(--ink-400);
}

.rhythm{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.rhythm-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 26px 24px;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s;
}
.rhythm-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--bronze-100,#EADDCF)}
.rhythm-ic{
  display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:var(--cream);color:var(--bronze);margin-bottom:16px;
}
.rhythm-item h3{font-size:1.06rem;margin-bottom:8px}
.rhythm-item p{font-size:.92rem;color:var(--ink-600);line-height:1.6}
.rhythm-note{
  margin-top:30px;text-align:center;font-size:.86rem;
  color:var(--ink-400);font-style:italic;
}
@media (max-width:760px){
  .rhythm{grid-template-columns:1fr}
  .daybar-track{height:50px}
  /* the short segments cannot hold a word at this width — let colour carry it */
  .daybar-track .seg b{display:none}
}

/* ---------- 12a-2. Explorer (tabbed detail) ----------
   Replaces walls of cards where every paragraph shouted at once. The
   visitor picks what to read; one panel is visible at a time. */
.explorer{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(20px,3vw,34px);
  margin-top:56px;align-items:start;
}
.explorer-nav{display:flex;flex-direction:column;gap:6px}
.explorer-tab{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:15px 18px;text-align:left;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:var(--radius);
  font-family:var(--ff-head);font-size:.96rem;font-weight:500;color:var(--ink-600);
  transition:background .25s var(--ease),color .25s,border-color .25s,transform .25s var(--ease);
}
.explorer-tab:hover{background:#fff;color:var(--navy);transform:translateX(3px)}
.explorer-tab.is-active{
  background:#fff;border-color:var(--bronze-100);color:var(--navy);font-weight:600;
  box-shadow:var(--shadow-sm);
}
.explorer-num{
  font-family:var(--ff-mono);font-size:.72rem;font-weight:600;
  color:var(--bronze);opacity:.55;transition:opacity .25s;
}
.explorer-tab.is-active .explorer-num{opacity:1}
.explorer-name{flex:1;min-width:0}

.explorer-stage{
  position:relative;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:clamp(28px,4vw,44px);
  min-height:264px;
}
.explorer-panel[hidden]{display:none}
.explorer-panel{animation:explorerIn .42s var(--ease) both}
.explorer-ic{
  display:grid;place-items:center;width:52px;height:52px;border-radius:14px;
  background:var(--cream);color:var(--bronze);margin-bottom:20px;
}
.explorer-panel h3{font-size:1.42rem;margin-bottom:12px}
.explorer-panel p{color:var(--ink-600);font-size:1rem;line-height:1.72;max-width:52ch}
@keyframes explorerIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width:860px){
  .explorer{grid-template-columns:1fr;gap:18px}
  .explorer-nav{
    flex-direction:row;overflow-x:auto;gap:8px;
    padding-bottom:6px;scrollbar-width:thin;
  }
  .explorer-tab{width:auto;flex:0 0 auto;white-space:nowrap;padding:11px 15px;font-size:.88rem}
  .explorer-tab:hover{transform:none}
  .explorer-stage{min-height:0;padding:26px 22px}
}
@media (prefers-reduced-motion:reduce){
  .explorer-panel{animation:none}
}

/* ---------- 12b. Delivery formats ---------- */
.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px;align-items:stretch}
.fmt{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px 30px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.fmt:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--bronze-100)}
.fmt-ic{
  width:52px;height:52px;border-radius:14px;margin-bottom:20px;
  background:var(--cream);color:var(--bronze);display:grid;place-items:center;
}
.fmt h3{font-size:1.28rem;margin-bottom:6px}
.fmt-sub{font-size:.9rem;color:var(--ink-400);margin-bottom:22px}
.fmt-list{list-style:none;flex:1;margin-bottom:24px}
.fmt-list li{
  display:grid;grid-template-columns:74px 1fr;gap:12px;align-items:baseline;
  font-size:.88rem;color:var(--ink-600);
  padding:10px 0;border-bottom:1px solid var(--line-soft);
}
.fmt-list li:last-child{border-bottom:none}
.fmt-list b{
  font-family:var(--ff-head);font-weight:600;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400);
}
.fmt-list em{font-style:normal;font-weight:600;color:var(--bronze)}
.fmt .btn{justify-content:center;width:100%}
.fmt--featured{background:var(--navy);border-color:var(--navy);box-shadow:var(--shadow-lg)}
.fmt--featured .fmt-ic{background:rgba(242,229,218,.1);color:var(--cream)}
.fmt--featured h3{color:var(--cream)}
.fmt--featured .fmt-sub{color:rgba(242,229,218,.6)}
.fmt--featured .fmt-list li{color:rgba(242,229,218,.85);border-color:rgba(242,229,218,.14)}
.fmt--featured .fmt-list b{color:var(--bronze-300)}
.fmt--featured .fmt-list em{color:var(--bronze-300)}
.fmt-flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--bronze);color:#fff;
  font-family:var(--ff-head);font-weight:600;font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;
  padding:6px 16px;border-radius:999px;white-space:nowrap;
  box-shadow:0 8px 20px rgba(118,76,41,.36);
}
.fmt-note{
  display:flex;gap:16px;align-items:flex-start;
  max-width:860px;margin:36px auto 0;
  background:var(--cream);border:1px solid var(--bronze-100);
  border-radius:var(--radius-lg);padding:22px 26px;
}
.fmt-note-ic{width:38px;height:38px;flex-shrink:0;border-radius:10px;background:#fff;display:grid;place-items:center}
.fmt-note p{font-size:.92rem;color:var(--ink-600)}
.fmt-note b{font-family:var(--ff-head);font-weight:600;color:var(--navy)}

/* ---------- 13. Cohorts ---------- */
.cohort-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:52px}
.cohort{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s;
}
.cohort:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--bronze-100)}
.cohort--next{border-color:var(--bronze);box-shadow:var(--shadow-sm)}
.cohort--full{opacity:.62}
.cohort--full:hover{transform:none;box-shadow:none}
.cohort-flag{
  position:absolute;top:-11px;left:26px;
  background:var(--bronze);color:#fff;font-family:var(--ff-head);font-weight:600;
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:5px 13px;border-radius:999px;
  box-shadow:0 6px 16px rgba(118,76,41,.34);
}
.cohort-head{
  width:62px;height:66px;flex-shrink:0;border-radius:12px;background:var(--navy);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.cohort--next .cohort-head{background:var(--bronze)}
.cohort-month{font-family:var(--ff-head);font-weight:600;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,229,218,.7)}
.cohort-day{font-family:var(--ff-head);font-weight:700;font-size:1.6rem;color:var(--cream);line-height:1.1}
.cohort-body{min-width:0}
.cohort-body h3{font-size:1.05rem;margin-bottom:4px}
.cohort-meta{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--ink-600);margin-bottom:10px}
.cohort-format{font-family:var(--ff-head);font-weight:600;color:var(--navy)}
.cohort-dot{color:var(--ink-400)}
/* Stacked rather than inline: a longer status ("Filling fast") wraps
   where "Open" doesn't, which made otherwise-identical cards disagree. */
.cohort-seats{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cohort-seatline{font-size:.78rem;color:var(--ink-400)}
.cohort-action{flex-shrink:0}
.cohort--empty{grid-column:1/-1;display:block;text-align:center;padding:44px 30px;background:var(--cream-50)}
.cohort--empty h3{font-size:1.3rem;margin-bottom:10px}
.cohort--empty p{color:var(--ink-600);max-width:44ch;margin:0 auto 22px}

/* slim "next intake" ribbon on the home page */
.cohort-ribbon{background:var(--cream);border-block:1px solid var(--bronze-100)}
.cohort-ribbon .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-block:16px}
.cohort-ribbon p{flex:1;min-width:220px;display:flex;flex-direction:column;line-height:1.4}
.cohort-ribbon b{font-family:var(--ff-head);font-weight:600;font-size:.95rem;color:var(--navy)}
.cohort-ribbon span{font-size:.82rem;color:var(--ink-600)}

.field-flash{animation:flash 1.2s var(--ease)}
@keyframes flash{0%,100%{box-shadow:none}30%{box-shadow:var(--ring);border-color:var(--bronze)}}

/* ---------- 14. Excel mockups ---------- */
.xl{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-md);
  /* The mockup is white, so re-assert dark text — it may sit inside a
     navy hero or card that has set color:cream on its subtree. */
  color:var(--ink);
}
.xl--dark{box-shadow:var(--shadow-lg);border-color:rgba(255,255,255,.08)}
.xl-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#F7F5F2;border-bottom:1px solid var(--line)}
.xl-bar i{width:9px;height:9px;border-radius:50%;display:block}
.xl-bar i:nth-child(1){background:#ff5f57}.xl-bar i:nth-child(2){background:#febc2e}.xl-bar i:nth-child(3){background:#28c840}
.xl-name{flex:1;margin-left:8px;text-align:center;font-size:.68rem;color:var(--ink-400);font-family:var(--ff-head);font-weight:500}
.xl-ribbon{display:flex;gap:2px;padding:0 10px;background:#1D6F42;border-bottom:1px solid rgba(0,0,0,.1)}
.xl-ribbon span{padding:7px 12px;font-size:.64rem;color:rgba(255,255,255,.72);font-family:var(--ff-head);font-weight:500}
.xl-ribbon span.on{background:#fff;color:#1D6F42;border-radius:5px 5px 0 0;font-weight:600}
/* Narrow screens: let the sheet scroll within the mockup rather than
   blow out the layout. Real Excel scrolls sideways too, so it reads right. */
.xl-body{padding:18px;overflow-x:auto}

/* spreadsheet grid */
.xl-sheet{width:100%;border-collapse:collapse;font-family:var(--ff-mono);font-size:.66rem}
.xl-sheet th,.xl-sheet td{border:1px solid #E3E6EC;padding:5px 8px;text-align:left;white-space:nowrap}
.xl-sheet thead th{background:#F1F3F6;color:var(--ink-400);font-weight:600;text-align:center}
.xl-sheet tbody th{background:#F1F3F6;color:var(--ink-400);font-weight:600;text-align:center;width:26px}
.xl-sheet .hd td{background:var(--navy);color:#fff;font-weight:700;font-family:var(--ff-head)}
.xl-sheet td.num{text-align:right}
.xl-sheet td.pos{color:var(--green);font-weight:600}
.xl-sheet td.neg{color:#C0392B;font-weight:600}
.xl-sheet td.warn{background:#FBF1DC}
.xl-sheet td.bad{background:#FCEBEA}
.xl-sheet td.good{background:#E6F4EC}
.xl-formula{display:flex;align-items:center;gap:10px;padding:7px 12px;background:#fff;border:1px solid var(--line);border-bottom:none;font-family:var(--ff-mono);font-size:.66rem;color:var(--ink-600)}
.xl-formula b{color:var(--ink-400);font-weight:600;padding-right:10px;border-right:1px solid var(--line)}
.xl-formula em{font-style:normal;color:#C0392B}

/* in-cell stock level bar */
.stockbar{display:block;width:100%;min-width:52px;height:7px;border-radius:4px;background:#E3E6EC;overflow:hidden}
.stockbar i{display:block;height:100%;border-radius:4px;background:var(--green)}
.stockbar i.mid{background:#D9A441}
.stockbar i.lo{background:#C0392B}

/* auto-drawn Gantt.
   --lbl is the label gutter. The bars sit inside .gantt-track, so an
   inline left/width percentage means "position along the timeline". */
.gantt{--lbl:74px;padding:16px 14px;background:#fff}
.gantt-head{display:grid;grid-template-columns:var(--lbl) repeat(4,1fr);margin-bottom:10px}
.gantt-head span{font-family:var(--ff-head);font-size:.56rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400);text-align:center}
.gantt-head span:first-child{text-align:left}
.gantt-rows{position:relative}
.gantt-row{display:flex;align-items:center;height:26px}
.gantt-task{flex:0 0 var(--lbl);font-family:var(--ff-mono);font-size:.58rem;color:var(--ink-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px}
.gantt-track{
  position:relative;flex:1;height:14px;border-radius:3px;
  background:repeating-linear-gradient(90deg,#F1F3F6 0 calc(25% - 1px),#E3E6EC calc(25% - 1px) 25%);
}
.gantt-track i{position:absolute;top:50%;transform:translateY(-50%);height:12px;border-radius:3px;display:block}
/* Overlay spans exactly the track, so the marker's left:% lines up. */
.gantt-now{position:absolute;left:var(--lbl);right:0;top:0;bottom:0;pointer-events:none}
.gantt-now i{position:absolute;top:0;bottom:0;width:1.5px;background:#C0392B;display:block}
.gantt-now b{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  font-family:var(--ff-head);font-size:.5rem;font-weight:600;color:#C0392B;white-space:nowrap;
}

/* inline code */
code{
  font-family:var(--ff-mono);font-size:.86em;background:var(--cream);
  border:1px solid var(--bronze-100);border-radius:4px;padding:1px 5px;color:var(--bronze);
}

/* dashboard mock */
.dash{background:var(--navy);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.06)}
.dash-bar{display:flex;align-items:center;gap:7px;padding:15px 18px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06)}
.dash-bar i{width:10px;height:10px;border-radius:50%;display:block}
.dash-bar i:nth-child(1){background:#ff5f57}.dash-bar i:nth-child(2){background:#febc2e}.dash-bar i:nth-child(3){background:#28c840}
.dash-url{flex:1;margin-left:8px;text-align:center;font-size:.7rem;color:rgba(242,229,218,.5);background:rgba(0,0,0,.25);padding:6px 12px;border-radius:7px}
.dash-body{padding:22px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.kpi{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:14px}
.kpi small{display:block;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,229,218,.45);margin-bottom:5px}
.kpi b{font-family:var(--ff-head);font-size:1.35rem;color:var(--cream);display:block}
.kpi b em{font-style:normal;font-size:.66rem;color:#6fe0b6;margin-left:5px}
.kpi b em.dn{color:#ff8d85}
.chart{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:20px 20px 14px;height:196px;display:flex;align-items:flex-end;gap:14px}
.chart .col{flex:1;border-radius:7px 7px 3px 3px;transform-origin:bottom;animation:rise 1s var(--ease) both}
.chart .col:nth-child(1){height:42%;background:var(--navy-600);animation-delay:.1s}
.chart .col:nth-child(2){height:66%;background:var(--bronze);animation-delay:.22s}
.chart .col:nth-child(3){height:52%;background:var(--navy-600);animation-delay:.34s}
.chart .col:nth-child(4){height:90%;background:var(--cream);animation-delay:.46s}
.chart .col:nth-child(5){height:70%;background:var(--bronze-300);animation-delay:.58s}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* Held flat until scrolled to (JS adds --armed, then --go), so the bars
   grow while you are looking at them rather than before you arrive. */
.chart--armed .col{animation:none;transform:scaleY(0)}
.chart--go .col{animation:rise .9s var(--ease) both}
.legend{display:flex;justify-content:flex-end;gap:18px;margin-top:12px;font-size:.66rem;color:rgba(242,229,218,.5)}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}

/* dashboard variants used on the spreadsheets / BI pages */
.dash-split{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}
.donut{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:14px;
  padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
}
.donut-ring{
  width:104px;height:104px;border-radius:50%;position:relative;
  background:conic-gradient(var(--bronze) 0 46%,var(--cream) 46% 74%,var(--bronze-300) 74% 90%,var(--navy-500) 90% 100%);
}
.donut-ring::after{
  content:"92%";position:absolute;inset:22%;border-radius:50%;background:#0B0842;
  display:grid;place-items:center;font-family:var(--ff-head);font-weight:700;font-size:.92rem;color:var(--cream);
}
.donut small{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,229,218,.45)}
.spark{display:flex;align-items:flex-end;gap:3px;height:34px}
.spark i{flex:1;background:var(--bronze-300);border-radius:2px;display:block;opacity:.85}

/* template gallery */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:52px}
.tpl{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.tpl:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--bronze-100)}
.tpl-preview{
  padding:24px;background:var(--cream-50);border-bottom:1px solid var(--line);
  min-height:260px;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.tpl-preview > *{width:100%}
.tpl-preview--navy{background:linear-gradient(150deg,#0B0842,#0f1035)}
.tpl-info{padding:26px 28px}
.tpl-info h3{font-size:1.15rem;margin-bottom:8px}
.tpl-info p{font-size:.9rem;color:var(--ink-600);margin-bottom:14px}
.tpl-tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{
  font-family:var(--ff-head);font-size:.68rem;font-weight:500;
  background:var(--cream);color:var(--bronze);padding:5px 11px;border-radius:999px;
}

/* ---------- 15. Automation flow ---------- */
.flow{
  display:flex;align-items:stretch;gap:0;margin-top:52px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px 28px;overflow-x:auto;
}
.flow-node{
  flex:1;min-width:150px;text-align:center;padding:0 14px;position:relative;
}
.flow-node:not(:last-child)::after{
  content:"";position:absolute;right:-10px;top:26px;width:20px;height:2px;background:var(--bronze-100);
}
.flow-ic{
  width:54px;height:54px;margin:0 auto 14px;border-radius:14px;
  background:var(--cream);display:grid;place-items:center;
}
.flow-node:first-child .flow-ic{background:var(--navy)}
.flow-node:last-child .flow-ic{background:var(--bronze)}
.flow-node h4{font-size:.94rem;margin-bottom:5px}
.flow-node p{font-size:.8rem;color:var(--ink-400);line-height:1.5}

.auto-list{display:flex;flex-direction:column;gap:16px;margin-top:52px}
.auto{
  display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 28px;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s;
}
.auto:hover{transform:translateX(6px);box-shadow:var(--shadow-sm);border-color:var(--bronze-300)}
.auto-ic{width:52px;height:52px;border-radius:13px;background:var(--cream);display:grid;place-items:center;flex-shrink:0}
.auto-body h3{font-size:1.08rem;margin-bottom:5px}
.auto-body p{font-size:.9rem;color:var(--ink-600)}
.auto-badge{
  flex-shrink:0;font-family:var(--ff-head);font-weight:600;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--green);
  background:var(--green-bg);padding:6px 13px;border-radius:999px;white-space:nowrap;
}

/* "many sources → one model" stack */
.src{
  display:flex;align-items:center;gap:13px;width:100%;
  background:var(--cream-50);border:1px solid var(--line-soft);border-radius:11px;
  padding:12px 16px;font-size:.88rem;color:var(--ink-600);
}
.src + .src{margin-top:8px}
.src-ic{width:34px;height:34px;flex-shrink:0;border-radius:9px;display:grid;place-items:center}
.src-arrow{display:grid;place-items:center;padding:10px 0}
.src--out{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.src--out b{font-family:var(--ff-head);font-weight:600;color:var(--cream)}
.auto-badge--client{color:var(--bronze);background:var(--cream)}

/* ranked shortlist (automation audit output) */
.rank{display:flex;flex-direction:column;gap:8px}
.rank-row{
  display:flex;align-items:center;gap:13px;
  background:var(--cream-50);border:1px solid var(--line-soft);
  border-radius:11px;padding:11px 14px;
}
.rank-n{
  width:26px;height:26px;flex-shrink:0;border-radius:8px;background:var(--navy);color:var(--cream);
  display:grid;place-items:center;font-family:var(--ff-head);font-weight:700;font-size:.76rem;
}
.rank-body{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.rank-body b{font-family:var(--ff-head);font-weight:600;font-size:.88rem;color:var(--navy)}
.rank-body small{font-size:.72rem;color:var(--ink-400)}

/* warning / note callout */
.callout{
  display:flex;gap:18px;align-items:flex-start;max-width:820px;margin:44px auto 0;
  background:var(--cream);border:1px solid var(--bronze-100);border-left:4px solid var(--bronze);
  border-radius:var(--radius-lg);padding:26px 28px;
}
.callout-ic{width:42px;height:42px;flex-shrink:0;border-radius:11px;background:#fff;display:grid;place-items:center}
.callout h4{font-size:1.02rem;margin-bottom:6px}
.callout p{font-size:.92rem;color:var(--ink-600)}

/* ---------- 16. FAQ ---------- */
.faq{max-width:820px;margin:52px auto 0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq details:last-child{border-bottom:none}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 26px;cursor:pointer;list-style:none;
  font-family:var(--ff-head);font-weight:600;font-size:1rem;color:var(--navy);
  transition:background .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--cream-50)}
.faq summary svg{flex-shrink:0;color:var(--bronze);transition:transform .3s var(--ease)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq-body{padding:0 26px 22px;font-size:.94rem;color:var(--ink-600)}
.faq-body p + p{margin-top:10px}

/* ---------- 17. CTA band ---------- */
.cta-band{background:var(--cream);position:relative;overflow:hidden}
.cta-band .wrap{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;padding-block:clamp(48px,6vw,68px);
}
.cta-band h2{font-size:clamp(1.5rem,2.8vw,2.05rem);margin-bottom:8px}
.cta-band p{color:var(--ink-600);max-width:52ch}
.cta-band .cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- 18. Contact + form ---------- */
.contact{background:var(--navy);position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;right:-140px;top:-160px;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(118,76,41,.4),transparent 70%);pointer-events:none}
.contact::after{content:"";position:absolute;left:-120px;bottom:-180px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(36,30,110,.9),transparent 70%);pointer-events:none}
.contact-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,72px);align-items:center}
.contact h2{color:var(--cream);font-size:clamp(1.9rem,3.6vw,2.7rem);margin:20px 0 16px}
.contact .sub{color:rgba(242,229,218,.7);margin-bottom:40px;max-width:42ch}
.cline{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid rgba(242,229,218,.12)}
.cline:last-of-type{border-bottom:1px solid rgba(242,229,218,.12)}
.cline .ci{width:48px;height:48px;border-radius:12px;background:rgba(242,229,218,.07);border:1px solid rgba(242,229,218,.12);display:grid;place-items:center;flex-shrink:0;transition:.28s}
.cline:hover .ci{background:var(--bronze);border-color:var(--bronze)}
.cline small{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,229,218,.5);margin-bottom:2px}
.cline a,.cline .cval{font-family:var(--ff-head);font-weight:600;color:var(--cream);word-break:break-word}
.cline a:hover{color:var(--bronze-300)}

.form-card{background:#fff;border-radius:var(--radius-xl);padding:clamp(28px,4vw,44px);box-shadow:var(--shadow-lg)}
.form-card h3{font-size:1.4rem;margin-bottom:4px}
.form-card .fsub{font-size:.88rem;color:var(--ink-400);margin-bottom:28px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--ff-head);font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin-bottom:8px}
.field label b{color:var(--bronze)}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--ff-body);font-size:.95rem;color:var(--ink);
  background:var(--cream-50);border:1.5px solid var(--line);border-radius:11px;padding:13px 16px;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--bronze);background:#fff;box-shadow:var(--ring)}
.field textarea{resize:vertical;min-height:120px}
.form-card .btn{width:100%;font-size:1rem;padding:16px}
.fnote{text-align:center;font-size:.78rem;color:var(--ink-400);margin-top:14px}
.form-msg{
  display:none;margin-top:16px;padding:14px 16px;border-radius:11px;
  font-size:.88rem;background:var(--green-bg);color:var(--green);text-align:center;
}
.form-msg.show{display:block}
.form-msg--warn{background:var(--amber-bg);color:var(--amber)}

/* ---------- 19. Footer ---------- */
/* Deep navy footer. It bookends the navy hero, closes the page on a solid
   note, and takes a large block of white out of the scroll. */
.footer{
  position:relative;overflow:hidden;
  background:var(--navy);color:var(--cream);
  padding:80px 0 0;
}
.footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 90% at 12% 0%, rgba(36,30,110,.7), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(242,229,218,.045) 1px, transparent 0);
  background-size:auto, 34px 34px;
}
.footer > .wrap{position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(32px,5vw,56px);padding-bottom:56px}
.foot-about p{color:rgba(242,229,218,.66);font-size:.92rem;max-width:36ch;margin:20px 0 24px}
.footer .brand-text b{color:var(--cream)}
.footer .brand-text i{color:var(--bronze-300)}
.socials{display:flex;gap:11px}
.socials a{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:rgba(242,229,218,.08);border:1px solid rgba(242,229,218,.12);
  transition:transform .25s var(--ease),background .25s,border-color .25s;
}
.socials a svg{stroke:var(--cream);transition:stroke .25s}
.socials a:hover{background:var(--cream);border-color:var(--cream);transform:translateY(-3px)}
.socials a:hover svg{stroke:var(--navy)}
.footer h4{font-family:var(--ff-head);font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-300);margin-bottom:20px}
.footer ul{list-style:none}
.footer ul li{margin-bottom:13px}
.footer ul a{color:rgba(242,229,218,.72);font-size:.92rem;transition:color .2s,padding-left .22s var(--ease)}
.footer ul a:hover{color:var(--cream);padding-left:6px}
.foot-bottom{border-top:1px solid rgba(242,229,218,.12);padding:22px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:.82rem;color:rgba(242,229,218,.5)}
.foot-bottom a{margin-left:24px;color:rgba(242,229,218,.5);transition:color .2s}
.foot-bottom a:hover{color:var(--bronze-300)}

/* ---------- 20. Reveal ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  /* !important because the richer .reveal base rule is declared later in
     the file; without it, source order would keep reveals hidden here. */
  .reveal{opacity:1!important;transform:none!important;filter:none!important}
  .scroll-prog{display:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   22. MOTION & LIFE
   Ambient drift, texture, micro-interactions. All decorative —
   the reduced-motion block at the end switches every bit of it off.
   ============================================================ */

/* --- scroll progress bar --- */
.scroll-prog{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:200;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--bronze),var(--bronze-300),var(--cream));
  box-shadow:0 0 12px rgba(118,76,41,.5);
  will-change:transform;
}

/* --- animated aurora on the dark heroes ---
   The glow pseudo-elements already exist; here they slowly drift. */
@keyframes auroraA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7%,5%) scale(1.18)}}
@keyframes auroraB{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-6%,-4%) scale(1.25)}}
.page-hero::before{animation:auroraA 17s ease-in-out infinite}
.page-hero::after{animation:auroraB 21s ease-in-out infinite}
.contact::before{animation:auroraA 19s ease-in-out infinite}
.contact::after{animation:auroraB 23s ease-in-out infinite}

/* faint data-dot texture on dark sections */
.page-hero,.contact{
  background-color:var(--navy);
  background-image:radial-gradient(circle at 1px 1px, rgba(242,229,218,.05) 1px, transparent 0);
  background-size:36px 36px;
}
/* whisper-faint navy dots warm up the light hero */
.hero{
  background-image:radial-gradient(circle at 1px 1px, rgba(15,16,53,.028) 1px, transparent 0);
  background-size:34px 34px;
}
/* soft top glow lifts the flat cream sections */
.section--cream,.cta-band{position:relative;isolation:isolate}
.section--cream::before,.cta-band::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 0%, rgba(118,76,41,.06), transparent 70%);
}

/* --- shimmering headline accent --- */
.hero h1 .hl,.grad-text{
  background:linear-gradient(100deg,var(--bronze) 0%,#c99a54 28%,var(--bronze-300) 50%,#c99a54 72%,var(--bronze) 100%);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:shimmer 7s linear infinite;
}
@keyframes shimmer{to{background-position:-220% center}}

/* --- button sheen sweep on hover --- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:"";position:absolute;top:-60%;left:-80%;width:55%;height:220%;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.28) 50%,transparent 100%);
  transform:skewX(-20deg);pointer-events:none;opacity:0;
}
.btn:hover::after{animation:btnSheen .85s var(--ease)}
@keyframes btnSheen{0%{left:-80%;opacity:0}12%{opacity:1}100%{left:135%;opacity:0}}
.btn--ghost::after,.btn--outline-light::after{background:linear-gradient(115deg,transparent,rgba(118,76,41,.16),transparent)}

/* --- marquee ticker --- */
.marquee{background:var(--navy);color:var(--cream);overflow:hidden;border-block:1px solid rgba(242,229,218,.09);position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--navy),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--navy),transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.mq-group{display:flex;flex-shrink:0}
.marquee .mq{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-family:var(--ff-head);font-weight:500;font-size:.94rem;color:rgba(242,229,218,.68);
  padding:15px 0;
}
.marquee .mq::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--bronze);margin:0 30px;flex-shrink:0}
@keyframes marquee{to{transform:translateX(-50%)}}

/* --- card tilt (JS sets the transform; this just smooths it) --- */
.tiltable{transition:transform .18s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);transform-style:preserve-3d;will-change:transform}

/* --- live pulse on the dashboard mockups --- */
.dash-bar i:nth-child(3){position:relative}
.dash-bar i:nth-child(3)::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1.5px solid #28c840;opacity:0;animation:livePulse 2.4s ease-out infinite;
}
@keyframes livePulse{0%{transform:scale(.8);opacity:.7}100%{transform:scale(2.4);opacity:0}}

/* richer reveal: a touch of blur clears as it settles */
.reveal{
  opacity:0;transform:translateY(34px);filter:blur(6px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);
}
.reveal.in{opacity:1;transform:none;filter:blur(0)}

/* ============================================================
   23. CHARACTER
   Brand personality: the logo's diagonal as a signature angle,
   spreadsheet/formula nods, and a wedge motif echoing the mark.
   ============================================================ */

/* the brand's signature angle, taken from the logo's diagonal */
:root{--angle:118deg;}

/* every eyebrow gets a small wedge tick — a nod to the logo's wedge */
.eyebrow::before{
  content:"";display:inline-block;
  width:0;height:0;border-style:solid;
  border-width:0 0 10px 8px;
  border-color:transparent transparent var(--bronze) transparent;
  transform:translateY(1px);margin-right:1px;
}
.eyebrow--onDark::before{border-bottom-color:var(--bronze-300)}

/* centred heading bar becomes a skewed wedge on the brand angle */
.head .bar{
  width:52px;height:5px;border-radius:2px;
  background:linear-gradient(90deg,var(--bronze),var(--bronze-300));
  transform:skewX(-20deg);
}

/* faint diagonal brand band across the dark heroes (over the dots) */
.page-hero,.contact{
  background-color:var(--navy);
  background-image:
    linear-gradient(var(--angle), transparent 42%, rgba(242,229,218,.04) 50%, transparent 58%),
    radial-gradient(circle at 1px 1px, rgba(242,229,218,.05) 1px, transparent 0);
  background-size:auto, 36px 36px;
  background-repeat:no-repeat, repeat;
}
/* and a whisper of it on the light home hero */
.hero{
  background-image:
    linear-gradient(var(--angle), transparent 44%, rgba(118,76,41,.028) 50%, transparent 56%),
    radial-gradient(circle at 1px 1px, rgba(15,16,53,.028) 1px, transparent 0);
  background-size:auto, 34px 34px;
  background-repeat:no-repeat, repeat;
}

/* formula-bar eyebrow — the home hero's spreadsheet wink */
.formula-bar{
  display:inline-flex;align-items:center;gap:0;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow-xs);overflow:hidden;font-family:var(--ff-mono);
}
.formula-bar .fx{
  display:grid;place-items:center;align-self:stretch;padding:0 12px;
  background:var(--cream);color:var(--bronze);
  font-style:italic;font-weight:600;font-size:.82rem;
  border-right:1px solid var(--line);
}
.formula-bar code{
  background:none;border:none;color:var(--ink);
  font-size:.86rem;padding:9px 14px;white-space:nowrap;
}
.formula-bar code b{color:var(--navy)}
.formula-bar code em{color:var(--bronze);font-style:normal}
.formula-bar .caret-blink{
  display:inline-block;width:1px;height:1em;background:var(--bronze);
  margin-left:2px;transform:translateY(2px);animation:caretBlink 1.1s step-end infinite;
}
@keyframes caretBlink{50%{opacity:0}}

/* photo band — the AI/photography slots. Filenames stay fixed, so
   generate-images.py (or hand-supplied photos) drop straight in. */
.photo-band{
  position:relative;border-radius:var(--radius-xl);overflow:hidden;
  box-shadow:var(--shadow-lg);margin-top:56px;isolation:isolate;
}
.photo-band img{
  width:100%;height:clamp(260px,36vw,430px);object-fit:cover;display:block;
  transform:scale(1.02);transition:transform 6s var(--ease);
}
.photo-band:hover img{transform:scale(1.08)}
/* brand duotone wash on the signature angle keeps any photo on-palette */
.photo-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--angle), rgba(15,16,53,.24), transparent 45%, rgba(117,76,41,.14));
}
.photo-band figcaption{
  position:absolute;left:20px;bottom:20px;z-index:1;
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(15,16,53,.78);backdrop-filter:blur(10px);
  border:1px solid rgba(242,229,218,.14);
  color:var(--cream);font-family:var(--ff-head);font-weight:500;font-size:.84rem;
  padding:11px 18px;border-radius:11px;
}
.photo-band figcaption .dot{width:7px;height:7px;border-radius:50%;background:var(--bronze-300);flex-shrink:0}

/* footer signature quip */
.foot-sig{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:22px 0;border-top:1px solid rgba(242,229,218,.12);
  font-size:.9rem;color:rgba(242,229,218,.5);text-align:center;
}
.foot-sig code{
  font-family:var(--ff-mono);font-size:.82rem;
  background:rgba(242,229,218,.08);border:1px solid rgba(242,229,218,.16);
  color:var(--bronze-300);border-radius:6px;padding:3px 9px;
}

/* ============================================================
   24. DECORATIVE CHARACTER  (inspired by the Modulars reference)
   Sparkle accents, dotted-curve flourishes, softer pill-framed
   imagery, and a bold numbered process.
   ============================================================ */

/* --- sparkle + curve flourishes on centred headings --- */
.head--center{position:relative}
.head--center::before,
.head--center::after{content:"";position:absolute;pointer-events:none;background-repeat:no-repeat}
/* bronze 4-point sparkle, upper-left of the heading block */
.head--center::before{
  width:34px;height:34px;top:-14px;left:calc(50% - 250px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6 5.4 10.8 12 12-6.6 1.2-11.4 6-12 12-.6-6-5.4-10.8-12-12C6.6 10.8 11.4 6 12 0Z' fill='%23754c29'/%3E%3C/svg%3E");
  opacity:.5;animation:twinkle 4s ease-in-out infinite;
}
/* dashed curve, upper-right */
.head--center::after{
  width:120px;height:60px;top:-30px;right:calc(50% - 300px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M4 44C20 12 60 6 88 24s28 30 28 30' fill='none' stroke='%23B08A63' stroke-width='2.5' stroke-linecap='round' stroke-dasharray='2 9'/%3E%3C/svg%3E");
  opacity:.6;
}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:.5}50%{transform:scale(1.25) rotate(20deg);opacity:.85}}

/* a reusable free-standing sparkle (place in markup where wanted) */
.sparkle{display:inline-block;width:1em;height:1em;color:var(--bronze);vertical-align:middle}
.sparkle svg{width:100%;height:100%;display:block}

/* --- softer, pill-framed imagery (the reference's signature) --- */
.photo-band{border-radius:34px}          /* rounder than the default card */
.photo-band::after{border-radius:inherit}
/* a decorative sparkle tucked into a corner of the band */
.photo-deco{
  position:absolute;z-index:2;top:16px;right:18px;width:40px;height:40px;
  pointer-events:none;color:var(--cream);opacity:.9;
  animation:twinkle 5s ease-in-out infinite;
}
.photo-deco svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}

/* --- bold numbered process (home "How We Work") --- */
.process{max-width:820px;margin:56px auto 0;display:flex;flex-direction:column;gap:14px}
.proc-step{
  display:grid;grid-template-columns:96px 1fr;gap:26px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 30px;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.proc-step::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--bronze);transform:scaleY(0);transform-origin:top;
  transition:transform .4s var(--ease);
}
.proc-step:hover{transform:translateX(6px);box-shadow:var(--shadow-md);border-color:var(--bronze-100)}
.proc-step:hover::before{transform:scaleY(1)}
.proc-n{
  font-family:var(--ff-head);font-weight:800;font-size:3.4rem;line-height:.9;
  color:var(--bronze);letter-spacing:-.02em;
}
.proc-n small{font-size:1.4rem;color:var(--bronze-300)}
.proc-body h3{font-size:1.35rem;margin-bottom:6px}
.proc-body p{font-size:.95rem;color:var(--ink-600)}
.proc-body .proc-more{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-family:var(--ff-head);font-weight:600;font-size:.86rem;color:var(--bronze);
}
.proc-body .proc-more svg{transition:transform .22s var(--ease)}
.proc-step:hover .proc-more svg{transform:translateX(4px)}
/* the first step sits highlighted, like the reference's green pill */
.proc-step--active{background:var(--cream-50);border-color:var(--bronze-100)}
.proc-step--active::before{transform:scaleY(1)}
.proc-step--active .proc-n{color:var(--bronze)}

/* ============================================================
   25. LANDING REDESIGN
   Dark image-backed hero, overlapping stat bar, Excel Essentials
   flagship panel, and an honest social-proof band.
   ============================================================ */

/* --- dark, image-backed hero --- */
.hero--dark{
  position:relative;overflow:hidden;color:var(--cream);background:var(--navy);
  padding:clamp(58px,8vw,92px) 0 clamp(130px,14vw,180px);
}
.hero--dark .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero--dark .hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:.6;filter:saturate(.8) contrast(1.03);
}
/* The copy sits centred, so the scrim is a centred vignette rather than a
   left-weighted one: dense behind the words, opening up at the edges so the
   room, the glass and the daylight still read. */
.hero--dark .hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 72% 78% at 50% 52%,
      rgba(15,16,53,.94) 0%, rgba(15,16,53,.88) 42%,
      rgba(15,16,53,.62) 74%, rgba(15,16,53,.42) 100%),
    linear-gradient(to bottom,
      rgba(15,16,53,.62) 0%, rgba(15,16,53,0) 26%,
      rgba(15,16,53,0) 58%, rgba(15,16,53,.8) 100%),
    radial-gradient(circle at 1px 1px, rgba(242,229,218,.05) 1px, transparent 0);
  background-size:auto, auto, 36px 36px;
}
/* Aurora glows: pulled well back now that a real photograph sits behind them —
   at their old strength they read as haze over the glass and washed the wood out. */
.hero--dark::before{
  content:"";position:absolute;right:-170px;top:-210px;width:580px;height:580px;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,rgba(118,76,41,.16),transparent 70%);pointer-events:none;
  mix-blend-mode:screen;
  animation:auroraA 18s ease-in-out infinite;
}
.hero--dark::after{
  content:"";position:absolute;left:-150px;bottom:-180px;width:500px;height:500px;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,rgba(36,30,110,.5),transparent 70%);pointer-events:none;
  animation:auroraB 22s ease-in-out infinite;
}
.hero--dark .hero-grid{position:relative;z-index:1}
.hero--dark h1{color:var(--cream)}
.hero--dark .lead{color:rgba(242,229,218,.76)}

/* --- centred hero: one column, everything on the axis --- */
.hero--center{text-align:center}
.hero--center .hero-stack{
  position:relative;z-index:1;
  max-width:880px;margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;
}
.hero--center h1{
  margin:28px 0 22px;max-width:22ch;
  font-size:clamp(2.5rem,5.2vw,3.9rem);
  text-wrap:balance;          /* stops "on." stranding on its own line */
}
.hero--center .lead{max-width:60ch;margin:0 0 38px;text-wrap:pretty}
.hero--center .hero-cta{justify-content:center;margin-bottom:0}
.hero--center .hero-note{
  margin-top:34px;font-size:.86rem;letter-spacing:.02em;
  color:rgba(242,229,218,.52);max-width:46ch;
}
/* a hairline above the note, to close the block off without a hard rule */
.hero--center .hero-note::before{
  content:"";display:block;width:56px;height:1px;margin:0 auto 18px;
  background:linear-gradient(90deg,transparent,rgba(242,229,218,.34),transparent);
}
.hero--dark .hero-visual::before{display:none}      /* the bronze halo clashes on dark */

/* On a narrow screen the copy fills the frame edge to edge, so the centred
   vignette leaves too little margin — go uniform and pull the photo back. */
@media (max-width:980px){
  .hero--dark .hero-bg img{opacity:.4}
  .hero--center h1{max-width:none;font-size:clamp(2.1rem,7.4vw,2.9rem)}
  .hero--dark .hero-bg::after{
    background:
      linear-gradient(to bottom,
        rgba(15,16,53,.9) 0%, rgba(15,16,53,.82) 45%, rgba(15,16,53,.92) 100%),
      radial-gradient(circle at 1px 1px, rgba(242,229,218,.05) 1px, transparent 0);
    background-size:auto, 36px 36px;
  }
}

/* --- stat bar overlapping the hero --- */
.stat-bar{position:relative;z-index:5;margin-top:clamp(-96px,-9vw,-76px)}
.stat-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.stat{
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  padding:30px 22px;border-right:1px solid var(--line-soft);
}
.stat:last-child{border-right:none}
.stat .stat-ic{width:40px;height:40px;border-radius:11px;background:var(--cream);display:grid;place-items:center;color:var(--bronze)}
.stat b{font-family:var(--ff-head);font-weight:800;font-size:clamp(1.9rem,3vw,2.5rem);color:var(--navy);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{font-size:.78rem;letter-spacing:.06em;color:var(--ink-400)}

/* --- Excel Essentials flagship panel --- */
.flagship{padding:clamp(64px,8vw,104px) 0}
.flag-panel{
  position:relative;overflow:hidden;color:var(--cream);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,58px);align-items:center;
  background:linear-gradient(150deg,#141446,var(--navy) 60%,#0c0a30);
  border-radius:var(--radius-xl);padding:clamp(34px,5vw,58px);box-shadow:var(--shadow-lg);
}
.flag-panel::before{
  content:"";position:absolute;right:-120px;top:-160px;width:440px;height:440px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(118,76,41,.34),transparent 70%);animation:auroraA 20s ease-in-out infinite;
}
.flag-copy{position:relative;z-index:1}
.flag-flag{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  background:var(--bronze);color:#fff;font-family:var(--ff-head);font-weight:600;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:7px 15px;border-radius:999px;
}
.flag-copy h2{color:var(--cream);font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:6px;line-height:1.1}
.flag-copy .flag-sub{color:var(--bronze-300);font-family:var(--ff-head);font-weight:600;font-size:1.02rem;margin-bottom:16px}
.flag-copy > p{color:rgba(242,229,218,.76);margin-bottom:22px;max-width:52ch}
.flag-points{list-style:none;display:grid;gap:11px;margin-bottom:28px}
.flag-points li{display:flex;align-items:flex-start;gap:11px;font-size:.96rem;color:rgba(242,229,218,.9)}
.flag-points li svg{flex-shrink:0;margin-top:4px}
.flag-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.flag-cta .flag-next{font-size:.86rem;color:rgba(242,229,218,.6)}
.flag-cta .flag-next b{color:var(--cream);font-family:var(--ff-head);font-weight:600;display:block}
.flag-media{position:relative;z-index:1}

/* --- social proof band --- */
.proof{background:var(--cream-50)}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.proof-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 28px;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s;
}
.proof-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--bronze-100)}
.proof-card .proof-ic{width:46px;height:46px;border-radius:12px;background:var(--cream);display:grid;place-items:center;margin-bottom:18px;color:var(--bronze)}
.proof-card h3{font-size:1.12rem;margin-bottom:8px}
.proof-card p{font-size:.93rem;color:var(--ink-600)}
.proof-quote{
  max-width:820px;margin:44px auto 0;text-align:center;
  font-family:var(--ff-head);font-weight:500;font-size:clamp(1.15rem,2.2vw,1.5rem);
  color:var(--navy);line-height:1.5;
}
.proof-quote .q{color:var(--bronze);font-size:1.6em;line-height:0;vertical-align:-.35em;margin-right:.1em}
.proof-note{text-align:center;margin-top:16px;font-size:.82rem;color:var(--ink-400);font-style:italic}

/* ---------- 21. Responsive ---------- */
@media (max-width:1040px){
  .nav-menu{gap:16px}
  .nav-menu a{font-size:.84rem}
}
@media (max-width:980px){
  .hero-grid,.page-hero-grid,.contact-grid,.split{grid-template-columns:1fr}
  .hero-grid{gap:56px}
  .split{gap:36px}
  .split--flip .split-media{order:0}
  .hero .lead{max-width:56ch}
  .badge-float{left:10px}
  .cards,.cards--4,.svc-grid,.gallery,.cohort-grid,.formats,.proof-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line-soft)}
  .flag-panel{grid-template-columns:1fr}
  .flag-media{order:-1}
  .svc-card--wide,.svc-card--feature{grid-column:span 1}
  .svc-card--feature{grid-template-columns:1fr;padding:34px 32px;gap:28px}
  .fmt--featured{order:-1}
  /* before → after stacks, and the arrow turns to point down */
  .ba{grid-template-columns:1fr}
  .ba-arrow{padding:12px 0;transform:rotate(90deg)}
  .course-meta{grid-template-columns:repeat(2,1fr)}
  .module-body ul{grid-template-columns:1fr}
  .flow{flex-direction:column;gap:26px}
  .flow-node:not(:last-child)::after{display:none}
}
@media (max-width:760px){
  .nav-menu,.nav-actions .btn{display:none}
  .burger{display:block}
  /* decorative flourishes get in the way on small screens */
  .head--center::before,.head--center::after{display:none}
  /* process: number stacks above the text */
  .proc-step{grid-template-columns:1fr;gap:8px;padding:22px 22px}
  .proc-n{font-size:2.8rem}
  /* progression: narrower gutter, dots tucked in */
  .track{padding-left:56px}
  .track-line{left:17px}
  .phase-dot{left:-56px;width:38px;height:38px;border-radius:11px}
  .phase-dot b{font-size:.92rem}
  .phase-card{padding:22px 20px}
  .fmt-list li{grid-template-columns:1fr;gap:2px}
  .trust .wrap{justify-content:flex-start;gap:18px 26px}
  .frow{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:36px}
  .badge-float{position:static;margin-top:18px;max-width:100%;animation:none}
  .hero-metrics{flex-wrap:wrap;gap:22px 34px}
  .stat-grid{grid-template-columns:1fr}
  .stat{border-right:none;border-bottom:1px solid var(--line-soft)}
  .stat:last-child{border-bottom:none}
  .stat-bar{margin-top:-70px}
  .cohort{grid-template-columns:auto 1fr;gap:16px}
  .cohort-action{grid-column:1/-1;margin-top:6px}
  .cohort-action .btn{width:100%}
  .module summary{padding:16px 18px;gap:14px}
  .module-body{padding:4px 18px 22px 18px}
  .module-side .module-time{display:none}
  .auto{grid-template-columns:auto 1fr;gap:16px}
  .auto-badge{grid-column:2}
  .dash-split{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .agenda-row{flex-wrap:wrap;gap:4px 12px}
  .agenda-row .t{flex-basis:100%}
}
@media (max-width:520px){
  .course-meta{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
}