/*
 * Nujai Creative — Design System
 * Global CSS entry point. Consumers link THIS one file.
 * Import order: fonts → tokens → base/utilities.
 * (This file is @import lines only by design.)
 */
/*
 * Nujai Creative — Webfonts
 * Local variable fonts (shipped to consumers). Hanken Grotesk = headings,
 * Open Sans = body, Rubik = logo only. Italics included for completeness.
 * These replace the Google Fonts @import in the original starter.css so the
 * system is fully self-contained / offline-capable.
 */

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/HankenGrotesk-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: block; /* headings: avoid the faux-bold fallback flash */
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/HankenGrotesk-Italic-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Italic-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: block; /* wordmark: avoid the fallback flash */
}
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-Italic-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/*
 * Nujai Creative — Colour System
 * Single-sourced, named by role. 11 roles / 13 values (two roles are 2-stop
 * gradients) + a 5-hue holographic foil. Light-first, warm beige.
 * Elevation ladder: small cards RISE to --surface (lighter, +border +shadow);
 * large floating sections DROP to --contrast (darker shelf); dark plates run
 * --dark to --dark-deep. Every value verified WCAG AA.
 */
:root {
  /* Warm neutrals: the elevation ladder */
  --bg:              #f5f0e8;   /* page canvas */
  --surface:         #faf7f1;   /* cream card, RISES (pair with --border + shadow) */
  --contrast:        #e2d9ca;   /* floating section: warm page hue at mid chroma, ~17% darker */
  --border:          #d3cabb;   /* dividers, hairlines, button strokes */

  /* Inks & darks */
  --ink:             #1a1a1a;   /* primary text */
  --muted:           #645d59;   /* secondary text, AA-safe (5.69:1 bg, 4.79:1 contrast) */
  --dark:            #2e2a26;   /* warm-dark workhorse: buttons, plate top, small UI ink */
  --dark-deep:       #161310;   /* gradient end for dark plates + hero wash */

  /* Lights on dark */
  --on-dark:         #f4efe6;   /* headings / bright elements over dark */
  --on-dark-muted:   #b8aea4;   /* secondary text + links over dark */

  /* Accents */
  --accent:          #c9b99a;   /* quiet gold: underlines, eyebrow dash, tag borders */
  --kairos:          #5b8cff;   /* conversion CTA: the foil-1 blue itself (use once per page) */
  --kairos-deep:     #3556d8;   /* kairos gradient end, deeper same hue */
  --error:           #c2401c;   /* form errors + required marks only */

  /* Holographic foil (5 hues; product-card headline only) */
  --foil-1:          #5b8cff;   /* blue */
  --foil-2:          #3ee0cf;   /* teal-green */
  --foil-3:          #b06bff;   /* violet */
  --foil-4:          #ff6fb8;   /* pink */
  --foil-5:          #ffce6a;   /* gold */

  /* Logo asset colours (reference only, not UI tokens) */
  --logo-dark:       #292929;
  --logo-light:      #f2f1eb;

  /* ── Semantic aliases ── */
  --text-primary:    var(--ink);
  --text-secondary:  var(--muted);
  --text-on-dark:    var(--on-dark);
  --text-on-dark-muted: var(--on-dark-muted);
  --surface-page:    var(--bg);
  --surface-card:    var(--surface);
  --surface-shelf:   var(--contrast);
  --surface-dark:    var(--dark-deep);
  --line:            var(--border);
  --cta:             var(--kairos);
}

/*
 * Nujai Creative — Typography
 * Hanken Grotesk (headings, 700/800), Open Sans (body, 400/500), Rubik (logo only).
 * Base values + semantic helpers. Display headlines use negative tracking.
 */
:root {
  /* Families */
  --font-heading:   'Hanken Grotesk', system-ui, sans-serif;
  --font-body:      'Open Sans', system-ui, sans-serif;
  --font-logo:      'Rubik', system-ui, sans-serif;  /* logo only */

  /* Type scale */
  --text-display:   5rem;        /* 80px — hero */
  --text-h1:        3rem;        /* 48px */
  --text-h2:        2rem;        /* 32px */
  --text-h3:        1.375rem;    /* 22px */
  --text-lead:      1.25rem;     /* 20px — intro paragraphs */
  --text-body:      1rem;        /* 16px */
  --text-small:     0.875rem;    /* 14px */
  --text-label:     0.75rem;     /* 12px */

  /* Tracking */
  --tracking-display: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-label:    0.08em;

  /* Leading */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.65;

  /* Weights */
  --weight-body:     400;
  --weight-medium:   500;
  --weight-heading:  700;
  --weight-display:  800;
}

@media (max-width: 768px) {
  :root {
    --text-display: 2.75rem;
    --text-h1:      2rem;
    --text-h2:      1.5rem;
  }
}
@media (min-width: 1280px) {
  :root {
    --text-display: 6rem;
  }
}

/*
 * Nujai Creative — Spacing & Layout
 * 8px base unit. Layout widths, sidebar, gutters, section inset/radius.
 */
:root {
  /* ── Spacing (8px base unit) ── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ── Layout ── */
  --max-width:        1280px;
  --content-width:    720px;
  --sidebar-width:    200px;
  --gutter:           1.5rem;      /* mobile horizontal padding */

  /* ── Floating-section system ── */
  --section-inset:    3rem;        /* horizontal inset on each side — 48px desktop */
  --section-radius:   24px;
}

@media (max-width: 768px) {
  :root { --section-inset: 1rem; --section-radius: 16px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 4rem; }
}

/*
 * Nujai Creative — Effects
 * Radii, shadow ladder, transitions, gradients. The shadow system sells
 * elevation: raised cards get a tight + diffuse pair; floating shelves add a
 * defined bottom edge; dark plates lean on contrast + grain (see components).
 */
:root {
  /* ── Borders & Radius ── */
  --radius-sm:    4px;     /* inputs, small elements */
  --radius-md:    8px;     /* buttons */
  --radius-lg:    16px;    /* cards */
  --radius-card:  18px;    /* service/panel cards */
  --radius-xl:    24px;    /* floating shelves, dark plates */
  --radius-full:  9999px;  /* pills */

  /* ── Shadow ladder ── */
  /* Raised cream card (rises off the page) */
  --shadow-card:  0 1px 2px rgba(0,0,0,0.03), 0 6px 24px rgba(0,0,0,0.04);
  /* Panel (forms sit on this) */
  --shadow-panel: 0 1px 2px rgba(0,0,0,0.03), 0 8px 28px rgba(0,0,0,0.05);
  /* Floating shelf (defined bottom edge + diffuse lift) */
  --shadow-shelf: 0 2px 0px rgba(0,0,0,0.04), 0 8px 40px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
  /* Dark product plate */
  --shadow-plate: 0 2px 4px rgba(0,0,0,0.10), 0 14px 44px rgba(0,0,0,0.18);
  /* Closed manifesto card (all-round) */
  --shadow-float: 0 18px 50px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);

  /* ── Gradients ── */
  --gradient-dark:    linear-gradient(140deg, var(--dark) 0%, var(--dark-deep) 100%);
  --gradient-kairos:  linear-gradient(135deg, var(--kairos) 0%, var(--kairos-deep) 100%);
  --gradient-cta-btn: linear-gradient(90deg, #d4b87a 0%, #c9845a 100%); /* @kind color */

  /* ── Transitions ── */
  --transition-fast:   150ms ease;  /* @kind other */
  --transition-base:   260ms ease;  /* @kind other */
  --transition-slow:   400ms ease;  /* @kind other */
  --ease-wipe:         cubic-bezier(0.65, 0, 0.1, 1); /* @kind other */
}

/* Add to tokens/effects.css (or base.css) — the holographic-foil text recipe
   used by TypewriterFoil (and the home hero). Text-clips a foil gradient with
   a pointer-tracked specular sheen. Dark backgrounds only (tuned against
   --dark-deep). Requires --foil-1..5 and --on-dark tokens (already defined
   in tokens/colors.css). */
@property --hx { syntax: '<percentage>'; inherits: false; initial-value: 66%; }
@property --hy { syntax: '<percentage>'; inherits: false; initial-value: 32%; }

.nx-foil {
  --hx: 66%;
  --hy: 32%;
  background-image:
    radial-gradient(clamp(280px, 30vw, 540px) circle at var(--hx) var(--hy), rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(115deg,
      color-mix(in srgb, var(--foil-1) 62%, var(--on-dark)) 0%,
      color-mix(in srgb, var(--foil-2) 55%, var(--on-dark)) 20%,
      color-mix(in srgb, var(--foil-5) 48%, var(--on-dark)) 42%,
      color-mix(in srgb, var(--foil-3) 55%, var(--on-dark)) 64%,
      color-mix(in srgb, var(--foil-4) 58%, var(--on-dark)) 84%,
      color-mix(in srgb, var(--foil-1) 62%, var(--on-dark)) 100%);
  background-size: auto, 200% 200%;
  background-position: 0 0, var(--hx) var(--hy);
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: screen, normal;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: saturate(1.05);
  transition: --hx 0.35s ease-out, --hy 0.35s ease-out;
}

/*
 * Nujai Creative — Base & Utilities
 * Reset, global element styling, typography helpers, layout, buttons, forms,
 * and the page-component classes ported verbatim (tokenized) from the built
 * source of truth (hero-demo.html / forms-demo.html). Tokens live in tokens/.
 */

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  background-color: var(--bg);
  color: var(--ink);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-normal);
  min-height: 100vh;
}

img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
ul, ol { list-style: none; }

/* ─── Typography helpers ─────────────────────────────────────────────────── */
.text-display {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
h1, .h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-snug);
}
h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--leading-snug);
}
.text-lead { font-size: var(--text-lead); line-height: var(--leading-normal); color: var(--muted); }
.text-small { font-size: var(--text-small); }
.text-label {
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
.text-muted { color: var(--muted); }

/* Eyebrow — gold dash + uppercase micro-label */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
  white-space: nowrap;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px; height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 0.6rem;
}

/* ─── Layout ─────────────────────────────────────────────────────────────── */
.container { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: var(--content-width); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: var(--space-24); }

/* Floating-section system: base canvas + elevated shelves */
.section-base { width: 100%; padding-block: var(--space-24); }
.section-highlight {
  margin-inline: var(--section-inset);
  border-radius: var(--section-radius);
  background: var(--contrast);
  box-shadow: var(--shadow-shelf);
  padding: var(--space-20) var(--space-20);
  position: relative;
  z-index: 1;
}
.section-wrap { padding-block: var(--section-inset); background: var(--bg); }
.section-inner { max-width: var(--max-width); margin-inline: auto; }

.bg-dark { background: var(--dark-deep); color: var(--on-dark); }
.bg-dark .text-muted { color: var(--on-dark-muted); }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.65rem 1.75rem;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}
.btn-stroke { background: transparent; color: var(--dark); border-color: var(--border); }
.btn-stroke:hover { background: var(--dark); color: var(--bg); border-color: var(--dark); }
.btn-solid { background: var(--dark); color: var(--bg); border-color: var(--dark); }
.btn-solid:hover { opacity: 0.8; }
.btn-kairos,
.btn-fire { /* .btn-fire kept as deprecated alias */
  background: var(--gradient-kairos);
  color: #ffffff;
  border-color: transparent;
  padding: 0.7rem 2rem;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--kairos) 30%, transparent);
}
.btn-kairos:hover,
.btn-fire:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--kairos) 42%, transparent);
}

/* Foil — holographic wordmark on a dark plate. Reserved for exceptional /
   flagship features (product launches, standout offers), not everyday CTAs. */
.btn-foil {
  position: relative;
  background: var(--dark);
  border-color: transparent;
  box-shadow: var(--shadow-plate);
  isolation: isolate;
  overflow: hidden;
}
.btn-foil::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(115deg,
    color-mix(in srgb, var(--foil-1) 78%, white) 0%,
    color-mix(in srgb, var(--foil-2) 78%, white) 20%,
    color-mix(in srgb, var(--foil-3) 78%, white) 40%,
    color-mix(in srgb, var(--foil-4) 78%, white) 60%,
    color-mix(in srgb, var(--foil-5) 78%, white) 80%,
    color-mix(in srgb, var(--foil-1) 78%, white) 100%);
  background-size: 220% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  transition: background-position 0.7s ease;
}
.btn-foil,
.btn-foil .arrow {
  position: relative;
  z-index: 1;
  background-image: linear-gradient(115deg,
    color-mix(in srgb, var(--foil-1) 78%, white) 0%,
    color-mix(in srgb, var(--foil-2) 78%, white) 20%,
    color-mix(in srgb, var(--foil-3) 78%, white) 40%,
    color-mix(in srgb, var(--foil-4) 78%, white) 60%,
    color-mix(in srgb, var(--foil-5) 78%, white) 80%,
    color-mix(in srgb, var(--foil-1) 78%, white) 100%);
  background-size: 220% 100%;
  background-position: 0% 0%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transition: background-position 0.7s ease, transform var(--transition-slow);
}
.btn-foil:hover,
.btn-foil:hover::before,
.btn-foil:hover .arrow {
  background-position: 100% 0%;
}
.btn-foil:hover .arrow { transform: translateX(3px); }

/* Hero CTA — stroke pill with directional ink-wipe on hover */
.btn-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 2rem;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--on-dark) 45%, transparent);
  background: transparent;
  color: var(--on-dark);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-slow), border-color var(--transition-slow);
}
.btn-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-wipe);
}
.btn-hero:hover { color: var(--dark); border-color: var(--bg); }
.btn-hero:hover::before { transform: scaleX(1); }
.btn-hero .arrow { transition: transform var(--transition-slow); }
.btn-hero:hover .arrow { transform: translateX(3px); }

/* ─── Tag / cartridge ────────────────────────────────────────────────────── */
.card-tag {
  align-self: flex-start;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.3rem 0.8rem;
}

/* ─── Forms ──────────────────────────────────────────────────────────────── */
.form-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.form-field:last-child { margin-bottom: 0; }
.form-label {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.form-label .req { color: var(--error); margin-left: 0.15rem; }
.form-label .opt { color: var(--muted); font-weight: 400; margin-left: 0.35rem; }

.form-input, .form-textarea, .form-select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-lead);
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 55%, white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.8rem 1.05rem;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--muted); }
.form-input:hover, .form-textarea:hover, .form-select:hover { border-color: color-mix(in srgb, var(--ink) 22%, var(--border)); }
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  background: var(--surface);
}
.form-textarea { min-height: 5.5rem; resize: vertical; line-height: var(--leading-normal); }
.form-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.4rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23645d59' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 1rem center,
    color-mix(in srgb, var(--surface) 55%, white);
}
.form-help { font-size: var(--text-small); color: var(--muted); line-height: 1.5; }

.form-field.is-error .form-input,
.form-field.is-error .form-textarea,
.form-field.is-error .form-select { border-color: var(--error); }
.form-field.is-error .form-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 18%, transparent); }
.form-field.is-error .form-help { color: var(--error); font-weight: 500; }
.form-field.is-success .form-input { border-color: var(--ink); }
.form-field.is-success .form-help { color: var(--ink); font-weight: 500; }
.form-input:disabled, .form-textarea:disabled, .form-select:disabled {
  opacity: 0.5; cursor: not-allowed; border-style: dashed;
}

/* checkbox + radio */
.form-check { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: 0.85rem; cursor: pointer; }
.form-check input {
  appearance: none; -webkit-appearance: none;
  width: 1.15rem; height: 1.15rem; margin-top: 0.12rem; flex: none;
  border: 1px solid var(--border); background: var(--bg);
  cursor: pointer; position: relative;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.form-check input[type="checkbox"] { border-radius: 5px; }
.form-check input[type="radio"] { border-radius: 50%; }
.form-check input:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent); }
.form-check input:checked { background: var(--dark); border-color: var(--dark); }
.form-check input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 5px; height: 9px; border: solid var(--on-dark); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.form-check input[type="radio"]:checked::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--on-dark);
}
.form-check span { font-size: 0.95rem; color: var(--ink); line-height: 1.5; }
.form-check span small { display: block; color: var(--muted); font-size: var(--text-small); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.form-actions { margin-top: var(--space-6); display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
@media (max-width: 680px) { .form-row { grid-template-columns: 1fr; } }

/* Subscribe field on a DARK surface (newsletter plate) — rounded pill */
.subscribe { display: flex; gap: 0.6rem; max-width: 30rem; flex-wrap: wrap; }
.subscribe input {
  flex: 1 1 16rem;
  font-family: var(--font-body); font-size: var(--text-body); color: var(--on-dark);
  background: color-mix(in srgb, var(--on-dark) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-dark) 28%, transparent);
  border-radius: var(--radius-full); padding: 0.8rem 1.3rem;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.subscribe input::placeholder { color: var(--on-dark-muted); }
.subscribe input:focus {
  outline: none; border-color: var(--on-dark);
  background: color-mix(in srgb, var(--on-dark) 12%, transparent);
}
.subscribe .btn { flex: none; }

/* ─── Dividers ───────────────────────────────────────────────────────────── */
.divider { width: 100%; height: 1px; background: var(--border); border: none; }

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2.25rem 2.25rem 2.5rem;
  box-shadow: var(--shadow-card);
}
.card h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.85rem;
}
.card > .card-tag { margin-bottom: 1.75rem; }
.card p { color: var(--muted); line-height: 1.7; font-size: 0.95rem; }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--transition-slow);
}

/* ── Product card — colour-inverted dark plate with holographic foil heading ──
 * JS sets --mx / --my (pointer position) for the specular + foil sweep. */
.card-product {
  --mx: 50%; --my: 50%;
  --tilt: 0; /* @kind other */
  background: var(--gradient-dark);
  border: 1px solid var(--dark);
  box-shadow: var(--shadow-plate);
  isolation: isolate;
  overflow: hidden;
  transition: border-color var(--transition-slow);
}
.card-product::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='ng'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ng)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  mix-blend-mode: screen;
  opacity: 0.08;
  filter: contrast(150%) brightness(130%);
  pointer-events: none;
}
.card-product:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.card-product > * { position: relative; z-index: 1; }
.card-product .card-tag { color: var(--on-dark); border-color: var(--accent); }
.card-product h3 {
  background-image:
    radial-gradient(210px circle at var(--mx) var(--my), rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(rgba(255,255,255,0.28), rgba(255,255,255,0.28)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='sp'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 1 1 0 -1.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sp)'/%3E%3C/svg%3E"),
    linear-gradient(115deg, var(--foil-1) 0%, var(--foil-2) 20%, var(--foil-3) 40%, var(--foil-4) 60%, var(--foil-5) 80%, var(--foil-1) 100%);
  background-size: auto, auto, 130px 130px, 160% 160%;
  background-position: 0 0, 0 0, var(--mx) var(--my), var(--mx) var(--my);
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-blend-mode: screen, normal, screen, normal;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: contrast(106%) saturate(0.82) brightness(1.08);
  transition: filter 0.2s ease;
}
.card-product:hover h3,
.card-product.foil-active h3 { filter: contrast(108%) saturate(0.92) brightness(1.1); }
.card-product p { color: var(--on-dark-muted); }
.card-product .card-link { color: var(--on-dark-muted); }
.card-product .card-link:hover { color: var(--on-dark); }

/* Panel — soft cream surface forms sit on */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2.5rem;
  box-shadow: var(--shadow-panel);
}

/* ─── NAV (adaptive: transparent over dark hero → glass on scroll) ───────── */
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.25rem 3rem;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  transition: background var(--transition-slow), backdrop-filter var(--transition-slow);
}
.nav.scrolled {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.nav-logo {
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-dark);
  justify-self: start;
  transition: color 0.3s ease;
  transform: translateY(2px);
}
.nav-logo b { font-weight: 700; }
.nav-logo img { height: 13px; width: auto; display: block; }
.nav-logo .logo-on-light { display: none; }
.nav.scrolled .nav-logo .logo-on-dark { display: none; }
.nav.scrolled .nav-logo .logo-on-light { display: block; }
.nav.scrolled .nav-logo { color: var(--ink); }
.nav-links { display: flex; gap: 2.5rem; }
.nav-links a {
  position: relative;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--on-dark) 72%, transparent);
  padding-bottom: 2px;
  transition: color 0.25s ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.25s ease;
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links a.active { color: #fff; }
.nav.scrolled .nav-links a { color: var(--muted); }
.nav.scrolled .nav-links a:hover,
.nav.scrolled .nav-links a.active { color: var(--ink); }
.nav-cta { justify-self: end; }
.nav-cta a {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--on-dark);
  border: 1px solid color-mix(in srgb, var(--on-dark) 40%, transparent);
  padding: 0.5rem 1.25rem;
  border-radius: 100px;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  white-space: nowrap;
}
.nav-cta a:hover { background: var(--bg); border-color: var(--bg); color: var(--dark); }
.nav.scrolled .nav-cta a { color: var(--dark); border-color: var(--border); }
.nav.scrolled .nav-cta a:hover { background: var(--dark); border-color: var(--dark); color: var(--bg); }

/* ─── FOOTER (light, multi-column, newsletter) ───────────────────────────── */
.footer {
  /* Quiet kairos wash: cream fades into a breath of the CTA blue at the very
     bottom of the page (starts low; the footer is short). */
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 52%, color-mix(in srgb, var(--kairos) 13%, var(--bg)) 100%);
  padding: 5rem var(--section-inset) 2.5rem;
  border-top: 1px solid var(--border);
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 2.5rem;
  align-items: start;
}
.footer-logo {
  font-family: var(--font-logo);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  font-size: 1.05rem;
  display: inline-block;
  margin-bottom: 1rem;
}
.footer-logo b { font-weight: 700; }
.footer-logo img { height: 14px; width: auto; display: block; }
.footer-brand p { color: var(--muted); font-size: 0.875rem; line-height: 1.6; max-width: 24rem; }
.footer-col h4 {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col a { color: var(--ink); font-size: 0.9rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--muted); }
.news-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  max-width: 20rem;
  transition: border-color 0.25s ease;
}
.news-form:focus-within { border-color: var(--ink); }
.news-form input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
  outline: none;
}
.news-form input::placeholder { color: var(--muted); }
.news-form button {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  padding: 0 0.15rem;
  transition: transform 0.2s ease;
}
.news-form button:hover { transform: translateX(3px); }
.footer-legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--muted);
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ─── Accessibility ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }