/* =====================================================================
   PlantNura Consulting & Solutions LLP — Core stylesheet (style.css)
   Design system: tokens, reset, layout, header/nav, footer, hero, motion
   Palette : brand violet #8C52FF · teal #03F7EB · navy #01284F · magenta #F95BF6
             (sampled from the PlantNura logo family — see tokens below)
   Dark    : #0B0B14 surface · #A97BFF violet · #03F7EB cyan
   Fonts   : Cabinet Grotesk (display) + Satoshi (body) — Fontshare
   ===================================================================== */

/* ---------- Design tokens ----------
   PALETTE derived from the PlantNura brand marks themselves.
   Source colours sampled from assets/logos/*.svg:
     violet  #8C52FF  (PlantNura wordmark)      indigo  #5C6FF4  (5 of 7 logos)
     magenta #F95BF6  (6 of 7 logos)            cyan    #03F7EB  (5 of 7 logos)
     navy    #01284F  (BioMetriK / BreedForward wordmarks)
     green   #007A3F  (the leaf / plant element in every sub-brand)
   The raw logo colours are too light to use as text on white, so each has a
   contrast-corrected variant for text/UI plus a "-bright" variant reserved
   for gradients, dark surfaces and large display type. Every pairing below
   meets WCAG AA (4.5:1 body, 3:1 large text and UI).
   The former forest-green / harvest-gold / parchment theme is gone: it was
   warm, and every PlantNura mark is cool-toned, which is why the logo used
   to clash with its own site.
   ---------------------------------------------------------------- */
:root,[data-theme="light"]{
  /* Type scale (fluid) */
  --text-xs:clamp(.75rem,.71rem + .2vw,.82rem);
  --text-sm:clamp(.875rem,.83rem + .25vw,.95rem);
  --text-base:clamp(1rem,.96rem + .25vw,1.08rem);
  --text-lg:clamp(1.125rem,1.02rem + .55vw,1.4rem);
  --text-xl:clamp(1.4rem,1.1rem + 1.3vw,2.1rem);
  --text-2xl:clamp(1.9rem,1.2rem + 2.6vw,3.2rem);
  --text-3xl:clamp(2.4rem,1.2rem + 4vw,4.4rem);
  --text-hero:clamp(2.3rem,1.5rem + 2.6vw,3.9rem);

  /* Spacing */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;
  --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --space-20:5rem;--space-24:6rem;--space-32:8rem;

  /* Surfaces — cool neutrals to match the brand marks */
  --color-bg:#fafafb;
  --color-surface:#ffffff;
  --color-surface-2:#ffffff;
  --color-surface-alt:#f3f2fa;      /* banded sections — violet-tinted, so white cards read as cards */
  --color-surface-offset:#f2f2f4;
  --color-surface-offset-2:#eaeaee;
  --color-divider:#e6e6ea;
  --color-border:#d6d6dc;

  /* Text */
  --color-text:#0f1115;
  --color-text-muted:#55575f;
  --color-text-faint:#8a8c96;
  --color-text-inverse:#fafafb;

  /* Brand — violet (primary). #8C52FF is the logo violet; it only reaches
     4.2:1 on white, so text/UI use the deepened tone and the logo violet is
     kept for gradients and large display type. */
  --color-primary:#6d3be8;
  --color-primary-hover:#5b27ce;
  --color-primary-active:#4e1fb5;
  --color-primary-soft:#f0e9ff;
  --color-primary-tint:#ddcdff;
  --color-brand-violet:#8c52ff;

  /* Brand — teal / cyan (secondary accent).
     Replaces the old harvest gold: nothing in the PlantNura brand is gold. */
  --color-gold:#0b767c;            /* alias kept so existing .btn-gold / .gold markup rethemes */
  --color-gold-hover:#095f64;
  --color-gold-soft:#dff5f5;
  --color-accent-bright:#03f7eb;
  --color-on-accent:#ffffff;

  /* Brand — indigo, magenta, plant green */
  --color-indigo:#3d53e0;
  --color-indigo-bright:#5c6ff4;
  --color-magenta:#c81fc4;
  --color-magenta-bright:#f95bf6;
  --color-green:#007a3f;
  --color-green-soft:#e2f4ea;

  /* Support (legacy names kept so existing rules keep resolving) */
  --color-navy:#01284f;
  --color-navy-soft:#dde7f2;
  --color-band-deep:#08162c;   /* always dark, both themes */
  --color-teal:#0b767c;
  --color-success:#0e8c6a;

  /* Radii + effects */
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;
  --transition:220ms cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 1px 2px rgba(18,18,40,.06),0 1px 3px rgba(18,18,40,.04);
  --shadow-md:0 4px 16px rgba(18,18,40,.08),0 2px 5px rgba(18,18,40,.05);
  --shadow-lg:0 20px 52px rgba(18,18,40,.14),0 6px 16px rgba(18,18,40,.07);
  --shadow-gold:0 8px 26px rgba(109,59,232,.26);

  --content-narrow:660px;--content-default:1080px;--content-wide:1240px;
  --header-h:4.75rem;
  --font-display:'Cabinet Grotesk','Segoe UI Variable Display','Segoe UI',Inter,system-ui,-apple-system,sans-serif;
  --font-body:'Satoshi','Segoe UI Variable Text','Segoe UI',Inter,system-ui,-apple-system,sans-serif;
}

[data-theme="dark"]{
  --color-bg:#0b0b0f;
  --color-surface:#141418;
  --color-surface-2:#1d1d23;
  --color-surface-alt:#101017;      /* banded sections */
  --color-surface-offset:#18181d;
  --color-surface-offset-2:#26262d;
  --color-divider:#27272e;
  --color-border:#35353e;

  --color-text:#f2f2f4;
  --color-text-muted:#a3a5ad;
  --color-text-faint:#787a84;
  --color-text-inverse:#0b0b0f;

  /* On dark the true logo violet is still a little tight (4.45:1), so the
     UI tone is lifted; the logo violet stays available for gradients. */
  --color-primary:#a97bff;
  --color-primary-hover:#b893ff;
  --color-primary-active:#c7aaff;
  --color-primary-soft:#1e1533;
  --color-primary-tint:#2a1d4a;
  --color-brand-violet:#8c52ff;

  /* Cyan finally gets to be itself on dark surfaces (14.5:1). */
  --color-gold:#03f7eb;
  --color-gold-hover:#5cfaf2;
  --color-gold-soft:#072a2e;
  --color-accent-bright:#03f7eb;
  --color-on-accent:#04212b;

  --color-indigo:#8b9bff;
  --color-indigo-bright:#5c6ff4;
  --color-magenta:#ff8afa;
  --color-magenta-bright:#f95bf6;
  --color-green:#3fbf77;
  --color-green-soft:#0d2a1c;

  --color-navy:#7fb0d8;
  --color-navy-soft:#13223a;
  --color-band-deep:#0a1020;   /* always dark, both themes */
  --color-teal:#3df2e8;
  --color-success:#4fd6a8;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:0 20px 52px rgba(0,0,0,.65);
  --shadow-gold:0 8px 26px rgba(3,247,235,.2);
}

@media (prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;}}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
/* A component's own display rule beats the [hidden] default, so anything
   marked hidden stayed visible (the empty Price row on the enrol card).
   This is the standard normalize safeguard. */
[hidden]{display:none !important;}

html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem);}
body{min-height:100dvh;line-height:1.62;font-family:var(--font-body);font-size:var(--text-base);
  color:var(--color-text);background:var(--color-bg);transition:background var(--transition),color var(--transition);}
img,svg,video{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit;}
input,textarea,select{font:inherit;color:inherit;}
ul{list-style:none;}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;letter-spacing:-.02em;text-wrap:balance;font-weight:800;color:var(--color-text);}
p{text-wrap:pretty;}
[data-lucide]{width:1.15em;height:1.15em;stroke-width:2;vertical-align:middle;}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm);}
::selection{background:var(--color-primary-soft);color:var(--color-primary-active);}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}

/* ---------- Layout helpers ---------- */
.container{max-width:var(--content-default);margin-inline:auto;padding-inline:var(--space-6);}
.container-wide{max-width:var(--content-wide);margin-inline:auto;padding-inline:var(--space-6);}
.container-narrow{max-width:var(--content-narrow);margin-inline:auto;padding-inline:var(--space-6);}
.section{padding-block:clamp(var(--space-16),8vw,var(--space-32));}
.section-sm{padding-block:clamp(var(--space-12),6vw,var(--space-20));}
.alt-surface{background:var(--color-surface-alt);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.skip-link{position:absolute;left:-999px;top:0;z-index:300;background:var(--color-primary);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--radius-md) 0;}
.skip-link:focus{left:0;}
.eyebrow{font-family:var(--font-body);font-weight:700;font-size:var(--text-xs);letter-spacing:.15em;text-transform:uppercase;
  color:var(--color-primary);display:inline-flex;align-items:center;gap:.55rem;}
.eyebrow::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;display:inline-block;
  background:linear-gradient(135deg,var(--color-primary),var(--color-accent-bright));
  box-shadow:0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent);}
.eyebrow.center{justify-content:center;}
.sec-head{max-width:var(--content-narrow);margin-bottom:var(--space-12);}
.sec-head.center{margin-inline:auto;text-align:center;}
.sec-head h2{font-size:var(--text-2xl);margin:var(--space-4) 0 var(--space-4);}
.sec-head p{font-size:var(--text-lg);color:var(--color-text-muted);}

/* =====================================================================
   HEADER + NAVIGATION  (rebuilt 26 September 2026, site-wide)
   One header for every page: it floats, transparent, over the page hero at
   the top, and turns into frosted glass once the page scrolls (html.
   is-scrolled, set by initScrollChrome in main.js). A gradient line at its
   bottom edge shows reading progress. The height never changes, so nothing
   below it jumps.
   Order: Education · Software · Consultancy · About · Contact.
   ===================================================================== */
/* Sticky belongs on the include wrapper, not on .site-header. The wrapper
   <div data-include="header"> is the header's containing block and is exactly
   the header's own height, so a sticky .site-header had zero travel. */
[data-include="header"]{position:sticky;top:0;z-index:100;}
.site-header{position:relative;background:transparent;border-bottom:1px solid transparent;
  transition:background .4s cubic-bezier(.16,1,.3,1),border-color .4s cubic-bezier(.16,1,.3,1),
             box-shadow .4s cubic-bezier(.16,1,.3,1),backdrop-filter .4s cubic-bezier(.16,1,.3,1);}
html.is-scrolled .site-header,
.site-header:has(.nav-item.open){
  background:color-mix(in srgb,var(--color-bg) 78%,transparent);
  backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  border-bottom-color:color-mix(in srgb,var(--color-text) 8%,transparent);
  box-shadow:0 8px 30px color-mix(in srgb,var(--color-text) 7%,transparent);}
/* reading progress, flush to the bottom edge */
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--color-primary),var(--color-indigo-bright) 55%,var(--color-accent-bright));
  transform:scaleX(var(--scroll-progress,0));transform-origin:left;opacity:0;transition:opacity .3s ease;}
html.is-scrolled .site-header::after{opacity:1;}

/* The page hero runs up under the floating header, so its colour reaches the
   top of the window instead of stopping at a seam. Only with JS (the header
   is injected by script; without it the plain no-JS nav sits in the flow). */
html.js main#main{margin-top:calc(var(--header-h) * -1);}
html.js main#main > .hero:first-child{padding-top:calc(var(--header-h) + clamp(var(--space-16),8vw,var(--space-24)));}
html.js main#main > .edu-hero:first-child,
html.js main#main > .page-hero:first-child{padding-top:calc(var(--header-h) + clamp(var(--space-16),7vw,var(--space-24)));}
html.js main#main > .course-hero:first-child{padding-top:calc(var(--header-h) + clamp(var(--space-8),4vw,var(--space-12)));}

.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  height:var(--header-h);max-width:var(--content-wide);margin-inline:auto;padding-inline:var(--space-6);}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:800;
  font-size:1.35rem;letter-spacing:-.03em;color:var(--color-text);flex:none;}
.brand img{height:36px;width:auto;}
.brand .brand-mark{width:34px;height:34px;flex:none;}
.brand .brand-fallback{display:inline-flex;align-items:center;gap:.5rem;}

.nav-links{display:flex;align-items:center;gap:.1rem;}
.nav-item{position:relative;}
.nav-trigger{position:relative;display:inline-flex;align-items:center;gap:.28rem;padding:.6rem .9rem;border-radius:var(--radius-md);
  font-weight:500;font-size:var(--text-sm);color:var(--color-text);transition:color var(--transition);}
.nav-trigger[data-lucide],.nav-trigger svg{pointer-events:none;}
.nav-trigger .chev{width:.95rem;height:.95rem;opacity:.6;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity var(--transition);}
/* a gradient underline that grows from the centre */
.nav-links .nav-trigger::after{content:"";position:absolute;left:50%;right:50%;bottom:.2rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--color-primary),var(--color-accent-bright));
  transition:left .38s cubic-bezier(.16,1,.3,1),right .38s cubic-bezier(.16,1,.3,1);}
.nav-links .nav-trigger:hover::after,.nav-item.open>.nav-trigger::after,
.nav-links .nav-trigger.active::after{left:.9rem;right:.9rem;}
.nav-trigger:hover,.nav-item.open>.nav-trigger,.nav-item:focus-within>.nav-trigger{color:var(--color-primary);}
.nav-trigger.active{color:var(--color-primary);font-weight:700;}
.nav-item.open .nav-trigger .chev{transform:rotate(180deg);opacity:1;}

/* ---- mega menus: an intro panel beside the links ---- */
.mega{position:absolute;top:calc(100% + 1.15rem);left:50%;--mega-x:-50%;
  transform:translateX(var(--mega-x)) translateY(10px) scale(.985);transform-origin:top center;
  min-width:340px;background:color-mix(in srgb,var(--color-surface-2) 94%,transparent);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid color-mix(in srgb,var(--color-text) 9%,transparent);border-radius:var(--radius-2xl);
  box-shadow:0 30px 70px color-mix(in srgb,var(--color-text) 16%,transparent),0 6px 18px color-mix(in srgb,var(--color-text) 6%,transparent);
  padding:var(--space-3);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s cubic-bezier(.16,1,.3,1),transform .38s cubic-bezier(.16,1,.3,1),visibility 0s linear .38s;}
/* an invisible bridge across the gap, so the menu stays open on the way down */
.mega::before{content:"";position:absolute;left:0;right:0;top:-1.3rem;height:1.3rem;}
.nav-item:first-child .mega{left:-.4rem;--mega-x:0%;transform-origin:top left;}
.nav-item.open .mega,.nav-item:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(var(--mega-x)) translateY(0) scale(1);transition-delay:0s;}
.mega-2{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--space-2);width:min(620px,calc(100vw - 2rem));}
.mega-intro{display:flex;flex-direction:column;gap:.55rem;padding:var(--space-5);border-radius:var(--radius-xl);
  background:
    radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--color-brand-violet) 16%,transparent),transparent 62%),
    radial-gradient(90% 80% at 100% 100%,color-mix(in srgb,var(--color-accent-bright) 14%,transparent),transparent 60%),
    var(--color-surface-alt);}
.mega-kick{font-size:var(--text-xs);font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--color-primary);}
.mega-lede{font-family:var(--font-display);font-weight:800;font-size:1.02rem;line-height:1.22;letter-spacing:-.015em;color:var(--color-text);margin:0;}
.mega-all{margin-top:auto;display:inline-flex;align-items:center;gap:.35rem;font-weight:700;font-size:var(--text-xs);color:var(--color-primary);}
.mega-all [data-lucide]{width:.95rem;height:.95rem;transition:transform var(--transition);}
.mega-all:hover [data-lucide]{transform:translateX(4px);}
.mega-links{display:grid;align-content:start;gap:.15rem;}
.mega-link{display:flex;gap:.85rem;padding:.75rem .8rem;border-radius:var(--radius-lg);align-items:flex-start;
  transition:background var(--transition),opacity .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1);}
.mega .mega-link{opacity:0;transform:translateY(6px);}
.nav-item.open .mega-link,.nav-item:focus-within .mega-link{opacity:1;transform:none;}
.nav-item.open .mega-link:nth-child(2){transition-delay:0s,.05s,.05s;}
.nav-item.open .mega-link:nth-child(3){transition-delay:0s,.1s,.1s;}
.mega-link:hover{background:var(--color-surface-offset);}
.mega-ico{width:40px;height:40px;flex:none;border-radius:var(--radius-md);display:grid;place-items:center;
  background:var(--color-primary-soft);color:var(--color-primary);transition:background var(--transition),color var(--transition),box-shadow var(--transition);}
.mega-link:hover .mega-ico{background:linear-gradient(140deg,var(--color-primary),var(--color-indigo-bright));color:#fff;
  box-shadow:0 6px 16px color-mix(in srgb,var(--color-primary) 30%,transparent);}
.mega-ico [data-lucide]{width:1.25rem;height:1.25rem;}
.mega-link h4{font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);margin-bottom:.12rem;color:var(--color-text);}
.mega-link p{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.4;}

.nav-actions{display:flex;align-items:center;gap:.4rem;}
.icon-btn{width:42px;height:42px;border-radius:var(--radius-full);display:grid;place-items:center;
  color:var(--color-text-muted);transition:all var(--transition);}
.icon-btn:hover{background:var(--color-surface-offset);color:var(--color-primary);}
.nav-actions .header-cta{min-height:40px;padding:.55rem 1.15rem;font-size:var(--text-sm);margin-left:.25rem;}
.menu-toggle{display:none;}

/* ---- mobile drawer ---- */
.drawer{position:fixed;inset:0;z-index:200;overflow-y:auto;padding:var(--space-6);visibility:hidden;
  background:
    radial-gradient(70% 40% at 90% 0%,color-mix(in srgb,var(--color-brand-violet) 16%,transparent),transparent 70%),
    radial-gradient(60% 40% at 0% 100%,color-mix(in srgb,var(--color-accent-bright) 12%,transparent),transparent 70%),
    var(--color-bg);
  transform:translateX(100%);transition:transform .5s cubic-bezier(.16,1,.3,1),visibility 0s linear .5s;}
.drawer.open{transform:translateX(0);visibility:visible;transition-delay:0s;}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-8);}
.drawer details{border-bottom:1px solid var(--color-divider);}
.drawer summary{padding:1.1rem 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;}
.drawer summary b{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--text-xl);letter-spacing:-.02em;line-height:1.1;}
.drawer summary small{display:block;font-size:var(--text-xs);color:var(--color-text-muted);margin-top:.3rem;}
.drawer summary::-webkit-details-marker{display:none;}
.drawer summary .chev{flex:none;transition:transform var(--transition);}
.drawer details[open] summary .chev{transform:rotate(180deg);}
.drawer .sub{padding-bottom:1rem;display:grid;gap:.25rem;}
.drawer .sub a{padding:.6rem 0 .6rem 1rem;color:var(--color-text-muted);font-weight:600;border-left:2px solid var(--color-divider);}
.drawer .sub a:hover{color:var(--color-primary);border-color:var(--color-primary);}
.drawer-link{display:block;padding:1.1rem 0;border-bottom:1px solid var(--color-divider);
  font-family:var(--font-display);font-weight:800;font-size:var(--text-xl);letter-spacing:-.02em;}
.drawer .drawer-cta{width:100%;margin-top:var(--space-8);}
.drawer-tag{margin-top:var(--space-6);text-align:center;font-family:var(--font-display);font-weight:800;font-size:var(--text-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-faint);}
/* the drawer's rows arrive one after another */
.drawer.open>*{animation:drawerIn .6s cubic-bezier(.16,1,.3,1) both;}
.drawer.open>*:nth-child(2){animation-delay:.06s}.drawer.open>*:nth-child(3){animation-delay:.1s}
.drawer.open>*:nth-child(4){animation-delay:.14s}.drawer.open>*:nth-child(5){animation-delay:.18s}
.drawer.open>*:nth-child(6){animation-delay:.22s}.drawer.open>*:nth-child(7){animation-delay:.26s}
.drawer.open>*:nth-child(8){animation-delay:.3s}
@keyframes drawerIn{from{opacity:0;transform:translateX(24px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .site-header,.mega,.mega-link,.nav-links .nav-trigger::after{transition:none;}
  .drawer.open>*{animation:none;}
}
/* anti-flicker for fetch-injected partials */
[data-include]{min-height:1px;}
.no-js-nav{display:none;}
html.no-js .no-js-nav{display:block;}

/* =====================================================================
   HERO (shared base)
   ===================================================================== */
.hero{position:relative;overflow:hidden;padding-block:clamp(var(--space-16),8vw,var(--space-24));}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 70% at 82% -8%,var(--color-primary-soft) 0%,transparent 60%),
             radial-gradient(50% 60% at -5% 100%,var(--color-gold-soft) 0%,transparent 55%);}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-12);align-items:center;}
.hero h1{font-size:var(--text-hero);margin:var(--space-4) 0 var(--space-5);}
.hero h1 .accent{color:var(--color-primary);}
/* Homepage h1 is intentionally a single near-black — see index.html. */
.hero h1 .gold{color:var(--color-gold);}
.hero-lead{font-size:var(--text-lg);color:var(--color-text-muted);max-width:40ch;margin-bottom:var(--space-8);}
.hero-cta{display:flex;gap:var(--space-3);flex-wrap:wrap;}
.hero-badges{display:flex;gap:var(--space-5);flex-wrap:wrap;margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--color-divider);}
.hero-badge{display:flex;align-items:center;gap:.45rem;font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);}
.hero-badge [data-lucide]{width:1.15rem;height:1.15rem;color:var(--color-primary);}

/* page hero (interior) */
.page-hero{position:relative;overflow:hidden;padding-block:clamp(var(--space-16),7vw,var(--space-24)) var(--space-12);}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(55% 60% at 88% -10%,var(--color-primary-soft) 0%,transparent 62%);}
.breadcrumb{display:flex;gap:.4rem;align-items:center;font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-4);flex-wrap:wrap;}
.breadcrumb a:hover{color:var(--color-primary);}
.breadcrumb [data-lucide]{width:.95rem;height:.95rem;}
.page-hero h1{font-size:var(--text-2xl);margin:var(--space-4) 0 var(--space-5);max-width:20ch;}
.page-hero .lead{font-size:var(--text-lg);color:var(--color-text-muted);max-width:56ch;}

/* =====================================================================
   FOOTER
   ===================================================================== */
/* Footer that matches the main page: same parchment family, one shade deeper,
   so it reads as an intentional, premium footer — not a jarring color block.
   Brand-green accents tie it to the rest of the site. */
.site-footer{margin-top:0;padding-block:var(--space-16) var(--space-8);position:relative;
  background:var(--color-surface-offset);
  border-top:1px solid var(--color-border);}
/* Collapse the trailing section padding so the footer meets the content cleanly */
main>.section:last-of-type{padding-bottom:var(--space-10);}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--color-primary),var(--color-gold));}
.footer-grid{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:var(--space-8);
  margin-bottom:var(--space-10);padding-bottom:var(--space-10);border-bottom:1px solid var(--color-border);}
.footer-brand .brand{font-size:1.25rem;margin-bottom:var(--space-4);}
.footer-tagline{font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);letter-spacing:-.01em;
  margin:var(--space-2) 0 var(--space-3);
  background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-gold) 60%,var(--color-navy) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.footer-mission{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-2);max-width:38ch;}
.footer-col h5{font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);margin-bottom:var(--space-4);color:var(--color-text);
  letter-spacing:.04em;text-transform:uppercase;}
.footer-col a{display:block;font-size:var(--text-sm);color:var(--color-text-muted);padding:.4rem 0;transition:color var(--transition),transform var(--transition);}
.footer-col a:hover{color:var(--color-primary);transform:translateX(3px);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4);
  font-size:var(--text-xs);color:var(--color-text-muted);}






/* =====================================================================
   MOTION — scroll reveal
   ===================================================================== */
/* Reveals only start hidden when JS is active (html.js). Without JS,
   or if scripts fail to run, content stays fully visible by default. */
.reveal{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
html.js .reveal{opacity:0;transform:translateY(26px);}
html.js .reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:1000px){
  .nav-links{display:none;}
  .menu-toggle{display:grid;}
}
@media(max-width:560px){
  .nav-actions .header-cta{display:none;}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;}
}