/* ==========================================================================
   Tralon Digital Agency (TDA) — global stylesheet
   1. Design tokens        5. Components (buttons, glass cards, chips, bands, CTA, page hero)
   2. Reset                6. Site header and navigation
   3. Base and typography  7. Site footer
   4. Layout utilities     8. Animation (keyframes + scroll reveal)
                           9. Motion preferences
   Page-specific styles live in their own files (home.css, services.css, ...)
   and only use the tokens defined here.
   ========================================================================== */


/* 1. Design tokens
   ========================================================================== */
:root {
  color-scheme: light;

  /* Colour — Warm Luxury & Editorial theme.
     Component rules below read the short names on the left (--bg, --accent, ...).
     The --color-*/--bg-*/--text-*/--shadow-warm-*/--glass-* names further down are
     aliases only, kept so anything written against those exact references resolves
     to the same value. */
  --bg: #F7F5F2;                            /* warm cream — page canvas, hero */
  --bg-raised: #F0EBF6;                     /* soft lavender — tint tier, alt sections */
  --surface-solid: #FFFFFF;
  --surface: rgb(255 255 255 / 0.85);
  --surface-strong: rgb(255 255 255 / 0.95);
  --surface-hover: rgb(240 235 246 / 0.92);
  --border: rgb(42 11 89 / 0.08);
  --border-strong: rgb(42 11 89 / 0.18);
  --border-hover: rgb(254 123 1 / 0.4);

  --accent: #FE7B01;                        /* warm gold/amber — CTAs, focus states, counters */
  --accent-hover: #E06C00;
  --accent-2: #3D137B;                      /* imperial purple, lighter step — data band, gradient mid */
  --accent-3: #2A0B59;                      /* Brand Imperial Purple — headings, primary buttons, badges */
  --on-accent: #FFFFFF;                     /* text/marks on amber or purple fills */

  --primary: var(--accent-3);
  --primary-dark: #1D0A36;                  /* Deep Midnight Purple — footers, dark bands, primary hover */
  --primary-light: var(--accent-2);

  --text: #1F162B;                          /* dark charcoal violet */
  --text-muted: #5A4D6E;                    /* muted imperial slate */

  --success: #16A34A;
  --warning: #D97706;
  --danger: #DC2626;

  --gradient-brand: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 55%, var(--accent-3) 100%);
  --gradient-brand-loop: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));

  --glow-sm: 0 0 24px -6px rgb(254 123 1 / 0.35);
  --glow-md: 0 0 48px -10px rgb(254 123 1 / 0.45);
  --shadow-accent: 0 10px 25px rgb(254 123 1 / 0.25);
  --shadow-card: 0 10px 30px -10px rgb(29 10 54 / 0.06), 0 4px 6px -2px rgb(29 10 54 / 0.03);
  --shadow-card-hover: 0 20px 40px -15px rgb(29 10 54 / 0.12), 0 0 20px rgb(254 123 1 / 0.15);

  /* Brand reference aliases (see note above) */
  --color-primary: var(--accent-3);
  --color-primary-dark: var(--primary-dark);
  --color-primary-light: var(--accent-2);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-soft: rgb(254 123 1 / 0.08);
  --color-bg-main: var(--bg);
  --color-bg-card: var(--surface-solid);
  --color-bg-alt: var(--bg-raised);
  --color-border: var(--border);
  --color-border-hover: var(--border-hover);
  --color-text-main: var(--text);
  --color-text-muted: var(--text-muted);
  --color-text-heading: var(--accent-3);
  --glass-bg: var(--surface);
  --glass-border: 1px solid var(--border);
  --border-light: var(--border);
  --border-focus: var(--border-hover);
  --shadow-sm: 0 4px 12px rgb(29 10 54 / 0.03);
  --shadow-md: 0 12px 30px -5px rgb(29 10 54 / 0.06);
  --shadow-lg: 0 20px 45px -10px rgb(29 10 54 / 0.1);
  --shadow-warm-sm: var(--shadow-sm);
  --shadow-warm-md: var(--shadow-md);
  --shadow-warm-lg: var(--shadow-lg);

  /* Named surface tiers (bg-cream/bg-white are --bg/--surface-solid, above) */
  --bg-cream: var(--bg);
  --bg-white: var(--surface-solid);
  --bg-lavender: var(--bg-raised);
  --bg-alabaster: #EFECE6;                  /* warm alabaster — stat bands, secondary cards */
  --border-alabaster: rgb(42 11 89 / 0.06);
  --bg-midnight: var(--primary-dark);       /* Contrast Dark Surface — footer, high-impact CTA */
  --border-midnight: rgb(255 255 255 / 0.14);
  --border-midnight-strong: rgb(255 255 255 / 0.28);
  --text-on-midnight: #FAFAFC;              /* Pure Pearl */
  --text-muted-on-midnight: #D6CFE2;

  /* Typography */
  --font-ui: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --fs-2xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
  --fs-display: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* Layout */
  --container: 72rem;
  --container-wide: 80rem;
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --header-h: 4.5rem;

  /* Shape: different radii for different jobs */
  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1.375rem;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 800ms;

  /* Stacking */
  --z-header: 100;
  --z-toast: 200;
}


/* Alternative alert bg */
/* alt alerts */
.alt_alert_secondary {
  background-color: #e2e3e5;
}

.alt_alert_danger {
  background-color: #f8d7da;
}

.alt_alert_success {
  background-color: #d4edda;
}

.alt_alert_warning {
  background-color: #fff3cd;
}

.alt_alert_info {
  background-color: #d1ecf1;
}

.alt_alert_light {
  background-color: #fefefe;
}

.alt_alert_dark {
  background-color: #d6d8d9;
}


/* 2. Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

html.has-nav-open {
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Ambient background light. Fixed, non-interactive, never animated. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgb(42 11 89 / 0.05), transparent 60%),
    radial-gradient(50rem 36rem at -10% 18%, rgb(254 123 1 / 0.06), transparent 55%);
}

main {
  flex: 1 0 auto;
}

main:focus {
  outline: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Always set width/height attributes on <img> so the browser reserves space (no layout shift). */
img,
video {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

table {
  border-collapse: collapse;
}

[hidden] {
  display: none !important;
}


/* 3. Base and typography
   ========================================================================== */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); line-height: 1.2; }
h4 { font-size: var(--fs-md); line-height: 1.3; letter-spacing: -0.015em; }

.display {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

p {
  max-width: 68ch;
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-muted);
}

.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.text-center p,
.text-center .lead { margin-inline: auto; }

.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.text-gradient--animated {
  background-image: var(--gradient-brand-loop);
  background-size: 200% auto;
  animation: gradient-pan 8s linear infinite;
}

::selection {
  background: rgb(254 123 1 / 0.22);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}


/* 4. Layout utilities
   ========================================================================== */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.container--wide {
  width: min(100% - 2 * var(--gutter), var(--container-wide));
}

.section {
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: calc(var(--section-y) * 0.6);
}

/* A soft violet-tinted band, for alternating a section against plain .section siblings */
.section--alt {
  background: var(--bg-raised);
  border-block: 1px solid var(--border);
}

.section-head {
  max-width: 46rem;
  margin-bottom: var(--sp-7);
}

.section-head > * + * {
  margin-top: var(--sp-3);
}

.grid {
  display: grid;
  gap: var(--grid-gap, 1.5rem);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.stack > * + * { margin-top: var(--stack-gap, 1rem); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, 0.75rem);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -4rem;
  left: var(--gutter);
  z-index: calc(var(--z-header) + 1);
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  transition: top var(--dur-1) var(--ease-out);
}

.skip-link:focus {
  top: 0.75rem;
}


/* 5. Components
   ========================================================================== */

/* Buttons */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.65rem 1.25rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    filter var(--dur-2) var(--ease-out);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--primary);
  --btn-fg: var(--on-accent);
  --btn-bd: var(--primary);
}

.btn--primary:hover {
  --btn-bg: var(--primary-dark);
  --btn-bd: var(--primary-dark);
  box-shadow: var(--shadow-accent);
}

.btn--ghost {
  --btn-bg: rgb(42 11 89 / 0.03);
}

.btn--ghost:hover {
  --btn-bd: var(--accent);
  --btn-fg: var(--accent);
  box-shadow: var(--glow-sm);
}

.btn--sm { min-height: 2.375rem; padding: 0.4rem 1rem; }
.btn--lg { min-height: 3.25rem; padding: 0.85rem 1.75rem; font-size: var(--fs-base); }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

/* Plain-class button utilities: the same look as .btn.btn--primary / .btn--accent above,
   as single classes with no base .btn needed — for markup written against those names
   directly instead of the site's own BEM component. */
.btn-primary {
  display: inline-block;
  background-color: var(--color-primary);
  color: #FFFFFF;
  padding: 14px 32px;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 20px rgb(42 11 89 / 0.15);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgb(42 11 89 / 0.25);
}

.btn-accent {
  display: inline-block;
  background-color: var(--color-accent);
  color: #FFFFFF;
  padding: 14px 32px;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 20px rgb(254 123 1 / 0.2);
}

.btn-accent:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-2px);
}

/* Glass surfaces */
.glass,
.card {
  background: var(--surface);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .card {
    background: rgb(255 255 255 / 0.98);
  }
}

.glass--strong { background: var(--surface-strong); }

.card {
  position: relative;
  padding: var(--card-pad, 1.75rem);
  box-shadow: var(--shadow-card);
}

.card p { max-width: none; }

/* Gradient glow border: hover/focus for interactive cards, always-on for featured ones */
.card--interactive::before,
.card--featured::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--gradient-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out);
}

.card--featured::before { opacity: 0.9; }

.card--interactive {
  transition:
    transform var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}

.card--interactive:hover,
.card--interactive:focus-within {
  transform: translateY(-4px);
  background: var(--surface-hover);
  box-shadow: var(--shadow-card), var(--glow-sm);
}

.card--interactive:hover::before,
.card--interactive:focus-within::before {
  opacity: 1;
}

/* Chips and filter pills (a <button class="chip"> works as a filter toggle) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: rgb(42 11 89 / 0.04);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.4;
  transition: color var(--dur-1), border-color var(--dur-1), background-color var(--dur-1);
}

button.chip:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.chip--accent,
.chip[aria-pressed="true"] {
  color: var(--accent-3);
  border-color: var(--border-hover);
  background: rgb(254 123 1 / 0.08);
}


/* Section background tiers.
   Five surfaces used to break up long pages instead of flat white:
     .bg-cream          warm cream    — hero / primary surface (see .hero, .page-hero below)
     .bg-surface-white  .bg-white     plain white   — default, alternating content sections
     .bg-surface-grey   .bg-alabaster warm alabaster — stat bands, secondary card backgrounds
     .bg-surface-tint   .bg-lavender  soft lavender  — process workflows, feature cards, callouts
                         .section--alt is the same tier, kept as an alias since earlier pages use it
     .bg-surface-dark   .bg-midnight  Deep Midnight   — CTA bands and the footer
   Put one of these on a <section>; nothing else needs to change. All but the dark tier only set a
   background and hairline borders, so every component on them (text, .card, .btn, .chip) reads
   exactly as it does on white. The dark tier is different: text and components need to invert, so
   it re-points the same custom properties everything already reads (--text, --border, --surface,
   ...) at light-on-dark values. That same technique is how .site-footer re-themes below. */
.bg-surface-white,
.bg-white {
  background-color: var(--bg-white);
}

.bg-surface-grey,
.bg-alabaster {
  background-color: var(--bg-alabaster);
  border-block: 1px solid var(--border-alabaster);
}

.bg-surface-tint,
.section--alt,
.bg-lavender {
  background-color: var(--bg-lavender);
  border-block: 1px solid var(--border);
}

.bg-cream {
  background-color: var(--bg-cream);
}

.bg-purple {
  background-color: var(--accent-3) !important;
}

.bg-surface-dark,
.section--dark,
.bg-midnight {
  --text: var(--text-on-midnight);
  --text-muted: var(--text-muted-on-midnight);
  --border: var(--border-midnight);
  --border-strong: var(--border-midnight-strong);
  --border-hover: rgb(254 123 1 / 0.55);
  --surface: rgb(255 255 255 / 0.07);
  --surface-solid: rgb(255 255 255 / 0.09);
  --surface-strong: rgb(255 255 255 / 0.12);
  --surface-hover: rgb(255 255 255 / 0.12);
  --bg-raised: rgb(255 255 255 / 0.05);
  background-color: var(--bg-midnight);
  color: var(--text);
}

.bg-surface-dark h1, .bg-surface-dark h2, .bg-surface-dark h3,
.section--dark h1, .section--dark h2, .section--dark h3,
.bg-midnight h1, .bg-midnight h2, .bg-midnight h3 {
  color: #FFFFFF;
}

.bg-surface-dark p, .section--dark p, .bg-midnight p,
.site-footer p {
  color: var(--text-muted-on-midnight);
}

/* Chip/filter backgrounds are solid colour rather than a token, so the dark tier and the
   (also dark) footer need their own pass: resting chips as translucent white, the
   active/selected state as amber. */
.bg-surface-dark .chip,
.section--dark .chip,
.bg-midnight .chip,
.site-footer .chip {
  background: rgb(255 255 255 / 0.08);
  border-color: var(--border);
  color: var(--text-muted);
}

.bg-surface-dark .chip--accent,
.bg-surface-dark .chip[aria-pressed="true"],
.section--dark .chip--accent,
.section--dark .chip[aria-pressed="true"],
.bg-midnight .chip--accent,
.bg-midnight .chip[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--border-hover);
  background: rgb(254 123 1 / 0.16);
}

/* Service colour bands: each consulting area keeps one colour everywhere it appears */
.band--strategy  { --band: var(--accent-3); }
.band--data      { --band: var(--accent-2); }
.band--solutions { --band: var(--accent); }

/* Call-to-action block (use with .card .card--featured .glass) */
.cta {
  --card-pad: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}

/* Soft glow in the lower-right corner; stays inside the card so the gradient border is never clipped */
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 100% 100%, rgb(254 123 1 / 0.1), transparent 55%);
  pointer-events: none;
}

.cta__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

@media (min-width: 60rem) {
  .cta__grid {
    grid-template-columns: minmax(0, 1.5fr) auto;
    gap: var(--sp-7);
  }
}

.cta__grid p {
  margin-top: var(--sp-3);
}


/* Page hero: title, lead and optional actions at the top of inner pages.
   Markup: .page-hero > .container > h1.page-hero__title + p.page-hero__lead + .page-hero__actions */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.page-hero__title {
  max-width: 20ch;
  font-size: clamp(2.4rem, 1.3rem + 4.4vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 24px rgb(29 10 54 / 0.08);
  animation: fade-up 0.9s var(--ease-out) both;
}

.page-hero__lead {
  max-width: 56ch;
  margin-top: var(--sp-5);
  animation: fade-up 0.9s var(--ease-out) 0.15s both;
}

.page-hero__actions {
  margin-top: var(--sp-6);
  animation: fade-up 0.9s var(--ease-out) 0.3s both;
}

/* Hero background: the warm, editorial tier-1 surface used by every hero on the site
   (home's .hero and the shared .page-hero on inner pages). A cream-to-alabaster gradient
   with two soft ambient tints (imperial purple, warm amber) and one static blurred
   lavender glow for depth — quiet and static, no pulsing, in keeping with the editorial
   tone. Text and components need no re-theming here: the hero is light, so everything
   already reads correctly against it using the site's normal (non-dark) tokens. */
.hero,
.page-hero {
  background:
    radial-gradient(circle at 80% 20%, rgb(42 11 89 / 0.05) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgb(254 123 1 / 0.04) 0%, transparent 40%),
    linear-gradient(180deg, var(--bg-cream) 0%, var(--bg-alabaster) 100%);
}

.hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -5%;
  z-index: -1;
  width: min(28rem, 65vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(240 235 246 / 0.8) 0%, rgb(240 235 246 / 0) 70%);
  filter: blur(50px);
  pointer-events: none;
}


/* 6. Site header and navigation
   The blur lives on ::before, not on the header itself: a backdrop-filter on
   an ancestor would trap the position:fixed mobile menu inside the header.
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(247 245 242 / 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.site-header.is-scrolled::before {
  background: rgb(247 245 242 / 0.92);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text);
}

.brand__mark {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand__sub {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* Desktop navigation */
.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: color var(--dur-1) var(--ease-out);
}

.site-nav__link::after {
  content: "";
  position: absolute;
  right: 0.9rem;
  bottom: 0.4rem;
  left: 0.9rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--text);
}

.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Menu button (only shown on small screens, and only when JS is running) */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgb(42 11 89 / 0.04);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-1);
}

.nav-toggle__bars { position: relative; }

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Mobile navigation */
@media (max-width: 60rem) {
  :root { --header-h: 4rem; }

  .js .nav-toggle { display: inline-flex; }

  .js .site-nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    left: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.75rem;
    padding: 1.25rem var(--gutter) 2rem;
    overflow-y: auto;
    border-top: 1px solid var(--border);
    background: rgb(247 245 242 / 0.98);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition:
      opacity var(--dur-2) var(--ease-out),
      transform var(--dur-2) var(--ease-out),
      visibility 0s linear var(--dur-2);
  }

  .js .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .js .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .js .site-nav__link {
    min-height: 3.5rem;
    padding: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 500;
  }

  .js .site-nav__link::after { display: none; }
  .js .site-nav__link[aria-current="page"] { color: var(--accent); }
  .js .site-nav__cta { width: 100%; min-height: 3.25rem; }

  /* Without JS the menu simply stacks under the logo */
  html:not(.js) .site-header { position: relative; height: auto; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; padding-block: 0.75rem; }
  html:not(.js) .site-nav { flex-basis: 100%; flex-wrap: wrap; gap: 0.5rem 1rem; }
  html:not(.js) .site-nav__list { flex-wrap: wrap; }
}


/* 7. Site footer
   ========================================================================== */
.site-footer {
  --text: var(--text-on-midnight);
  --text-muted: var(--text-muted-on-midnight);
  --border: var(--border-midnight);
  --border-strong: var(--border-midnight-strong);
  --border-hover: rgb(254 123 1 / 0.55);
  --surface: rgb(255 255 255 / 0.07);
  --surface-solid: rgb(255 255 255 / 0.09);
  /* margin-top: var(--section-y); */
  padding-block: var(--sp-8) var(--sp-5);
  /* border-top: 1px solid var(--border); */
  background: linear-gradient(180deg, var(--primary-dark), #140620);
  color: var(--text);
}

.site-footer h1, .site-footer h2, .site-footer h3 {
  color: #FFFFFF;
}

.site-footer__grid {
  display: grid;
  gap: var(--sp-7) var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

@media (min-width: 60rem) {
  .site-footer__grid {
    grid-template-columns: 1.7fr 1.3fr 1fr 1.2fr;
  }
}

.site-footer__blurb {
  max-width: 30ch;
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.site-footer__title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
}

.site-footer__list {
  display: grid;
  gap: 0.6rem;
}

.site-footer__list a {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: color var(--dur-1) var(--ease-out);
}

.site-footer__list a:hover {
  color: var(--accent);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}


/* 8. Animation
   ========================================================================== */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 1.5rem, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translate3d(-2rem, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translate3d(2rem, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes float-y {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.06); }
}

@keyframes gradient-pan {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes reveal-failsafe {
  to { opacity: 1; transform: none; }
}

/* Opt-in looping effects (never applied by default) */
.anim-float { animation: float-y 6s ease-in-out infinite; }
.anim-glow  { animation: glow-pulse 4s ease-in-out infinite; }

.skeleton {
  background: linear-gradient(90deg, rgb(42 11 89 / 0.04) 25%, rgb(42 11 89 / 0.09) 50%, rgb(42 11 89 / 0.04) 75%);
  background-size: 200% 100%;
  border-radius: var(--r-md);
  animation: shimmer 1.6s linear infinite;
}

.spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgb(255 255 255 / 0.35);
  border-top-color: var(--on-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Scroll reveal
   Mark an element with data-reveal, or a parent with data-reveal-stagger to
   reveal its direct children in sequence. Variants: fade | up (default) |
   scale | left | right. Only opacity and transform animate, so nothing shifts.
   Content stays visible when JS is off; if JS is on but main.js never loads,
   the failsafe below reveals it after 3 seconds. */
[data-reveal="fade"],  [data-reveal-stagger="fade"]  { --reveal-anim: fade-in; }
[data-reveal="scale"], [data-reveal-stagger="scale"] { --reveal-anim: scale-in; }
[data-reveal="left"],  [data-reveal-stagger="left"]  { --reveal-anim: slide-in-left; }
[data-reveal="right"], [data-reveal-stagger="right"] { --reveal-anim: slide-in-right; }

.js [data-reveal],
.js [data-reveal-stagger] > * {
  opacity: 0;
}

.js:not(.js-ready) [data-reveal],
.js:not(.js-ready) [data-reveal-stagger] > * {
  animation: reveal-failsafe 1ms linear 3s forwards;
}

.js [data-reveal].is-visible,
.js [data-reveal-stagger] > .is-visible {
  opacity: 1;
  animation: var(--reveal-anim, fade-up) var(--dur-3) var(--ease-out) var(--reveal-delay, 0ms) both;
}

/* Scroll reveal (class-based)
   An explicit-class alternative to [data-reveal] above, for one-off elements:
   .reveal-on-scroll (up), .reveal-left, .reveal-right, .reveal-scale, with
   .delay-100 .. .delay-500 to stagger a hand-built group. main.js adds
   .is-revealed on the same IntersectionObserver as [data-reveal], and both
   the no-JS and JS-failed states above cover these classes too. */
.js .reveal-on-scroll,
.js .reveal-left,
.js .reveal-right,
.js .reveal-scale {
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.js .reveal-on-scroll { opacity: 0; transform: translateY(35px); }
.js .reveal-left      { opacity: 0; transform: translateX(-40px); }
.js .reveal-right     { opacity: 0; transform: translateX(40px); }
.js .reveal-scale     { opacity: 0; transform: scale(0.92); }

.js:not(.js-ready) .reveal-on-scroll,
.js:not(.js-ready) .reveal-left,
.js:not(.js-ready) .reveal-right,
.js:not(.js-ready) .reveal-scale {
  animation: reveal-failsafe 1ms linear 3s forwards;
}

.js .reveal-on-scroll.is-revealed,
.js .reveal-left.is-revealed,
.js .reveal-right.is-revealed,
.js .reveal-scale.is-revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }


/* 9. Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal],
  .js [data-reveal-stagger] > *,
  .js .reveal-on-scroll,
  .js .reveal-left,
  .js .reveal-right,
  .js .reveal-scale {
    opacity: 1;
    transform: none;
  }
}