/* =========================================================
   Fiumara Designs — stylesheet
   Design system: kraft-paper / storefront signage / price-tag
   Motion utilities live in assets/motion.css (loaded after this file).
   ========================================================= */

:root {
  /* --- Color tokens: LIGHT THEME ---
     Palette variant: cool editorial, one saturated accent (electric blue).
     Electric blue was chosen over a warm accent (orange/red) specifically
     because the demo screenshots and photo sections are warm (fire, bread,
     greenery) — a cool accent reads as a deliberate counterpoint instead of
     fighting them, and stays legible laid over that imagery.
     Every color used anywhere in this file is defined here or in the dark
     token blocks below — no color literal should appear in a rule body. */
  --paper: #f7f6f3;        /* near-white paper ground */
  --paper-soft: #ffffff;   /* lighter card surface */
  --paper-line: rgba(18, 20, 26, 0.12);
  --ink: #12141a;          /* near-black — primary text, dark sections */
  --ink-soft: #565b66;     /* cool slate — secondary text */
  --teal: #1d3fcc;         /* accent, darkened for text/links/icons on paper (7.4:1) */
  --teal-deep: #14309e;    /* darker still — link hover, secondary labels on paper */
  --gold: #2b5bff;         /* electric blue — the one accent; fills, buttons, badges */
  --gold-deep: #1846e0;    /* darker fill — hover/pressed states */
  --accent-light: #6690ff; /* accent lightened for text/icons on dark ink sections (6.1:1) */
  --cream: #f5f4f0;        /* near-white for text on ink */
  --on-accent: #ffffff;    /* text set on solid accent fills (5.2:1 on --gold) */
  --void: #10131c;         /* deepest reversed surface — footer, contact scrim base */
  --hover: #f7f6f3;        /* hover fill for light chrome (== paper) */
  --border-strong: #12141a; /* opaque strong border, light chrome (== ink) */

  /* RGB triplets for literal-free rgba() composition. Keep in sync with the
     hex tokens above / the dark overrides below. */
  --paper-rgb: 247, 246, 243;
  --ink-rgb: 18, 20, 26;
  --cream-rgb: 245, 244, 240;
  --gold-rgb: 43, 91, 255;

  /* Structural tokens: the dark variant is not a pure value swap on these.
     See the dark token blocks for the paired values and why they differ. */
  --grain-blend: multiply;
  --grain-opacity-hero: 0.34;
  --tap-highlight: rgba(18, 20, 26, 0.12);
  --btn-primary-shadow: 0 1px 0 rgba(18, 20, 26, 0.18);
  --header-bg: rgba(var(--paper-rgb), 0.86);
  --panel-shadow: 0 24px 44px -22px rgba(18, 20, 26, 0.5);
  --hero-glow-bg: radial-gradient(circle at center, rgba(43, 91, 255, 0.34) 0%, rgba(43, 91, 255, 0.12) 40%, rgba(43, 91, 255, 0) 68%);
  --sample-bg: var(--cream);
  --sample-border-color: rgba(18, 20, 26, 0.22);
  --sample-shadow:
    0 34px 60px -28px rgba(18, 20, 26, 0.55),
    0 10px 24px -14px rgba(18, 20, 26, 0.3);
  --sample-dot-color: rgba(18, 20, 26, 0.24);
  --price-tag-shadow: 0 2px 0 rgba(18, 20, 26, 0.1);
  --elev-glow-price: 0 26px 44px -26px rgba(18, 20, 26, 0.55);
  --elev-shadow-demo: 0 26px 40px -24px rgba(18, 20, 26, 0.5);
  --featured-surface: var(--ink);
  --featured-border: var(--ink);
  --contact-vignette:
    radial-gradient(125% 95% at 50% 46%, rgba(18, 20, 26, 0.74) 0%, rgba(10, 16, 48, 0.9) 60%, rgba(16, 24, 34, 0.95) 100%);

  /* --- Type --- */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  /* Fluid editorial scale */
  --fs-hero:  clamp(3rem, 1.35rem + 6.6vw, 7.5rem);
  --fs-h2:    clamp(2.1rem, 1.1rem + 3.6vw, 4rem);
  --fs-h3:    clamp(1.4rem, 1.15rem + 1vw, 2rem);
  --fs-lede:  clamp(1.1rem, 1.02rem + 0.34vw, 1.28rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.92rem;
  --fs-label: 0.78rem;

  /* Spacing rhythm */
  --space-section: clamp(4.5rem, 3rem + 5.5vw, 8.5rem);
  --space-tight:   clamp(2.5rem, 1.8rem + 2.6vw, 4rem);

  --container: 1180px;
  --radius: 3px;

  /* Kraft grain, reused across surfaces. Abstract texture only. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* =========================================================
   DARK THEME
   Applied via system preference (scoped so an explicit light choice always
   wins) AND via the manual toggle's [data-theme="dark"], so the same block
   drives both paths. Dark-first premium palette: layered dark surfaces
   (void → paper → paper-soft → hover), warm off-white type, single amber
   accent family. Structural differences from light (not pure value swaps)
   are called out inline: grain blend mode, shadow-vs-glow, featured-card
   surface, border role.
   ========================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15120d;
    --paper-soft: #241e17;
    --paper-line: rgba(239, 234, 227, 0.14);
    --ink: #efeae3;
    --ink-soft: #ada392;
    --teal: #c98b33;
    --teal-deep: #f0a93b;
    --gold: #f0a93b;
    --gold-deep: #f8c46b;
    --accent-light: #f0a93b;
    --cream: #f7f3ec;
    --on-accent: #080605;
    --void: #080605;
    --hover: #2e271c;
    --border-strong: rgba(239, 234, 227, 0.32);

    --paper-rgb: 21, 18, 13;
    --ink-rgb: 239, 234, 227;
    --cream-rgb: 247, 243, 236;
    --gold-rgb: 240, 169, 59;

    /* Structural: dark grounds need an overlay blend (not multiply, which
       only darkens) and a lighter grain opacity to stay a texture, not mud. */
    --grain-blend: overlay;
    --grain-opacity-hero: 0.22;
    --tap-highlight: rgba(240, 169, 59, 0.18);
    --btn-primary-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    --header-bg: rgba(var(--paper-rgb), 0.86);
    --panel-shadow: 0 24px 44px -22px rgba(0, 0, 0, 0.7);
    --hero-glow-bg: radial-gradient(circle at center, rgba(240, 169, 59, 0.4) 0%, rgba(240, 169, 59, 0.16) 40%, rgba(240, 169, 59, 0) 68%);
    --sample-bg: var(--paper-soft);
    --sample-border-color: rgba(239, 234, 227, 0.16);
    --sample-shadow:
      0 34px 60px -28px rgba(0, 0, 0, 0.75),
      0 10px 24px -14px rgba(0, 0, 0, 0.5);
    --sample-dot-color: rgba(239, 234, 227, 0.35);
    --price-tag-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
    /* Structural: hover elevation becomes a warm glow instead of a neutral
       drop-shadow, since a dark-tinted shadow is invisible on a dark ground. */
    --elev-glow-price: 0 26px 50px -22px rgba(240, 169, 59, 0.2), 0 10px 22px -12px rgba(0, 0, 0, 0.6);
    --elev-shadow-demo: 0 26px 40px -24px rgba(0, 0, 0, 0.7);
    /* Structural: the featured card reads as its own reversed surface (void)
       with a translucent gold edge, instead of light theme's flat ink fill. */
    --featured-surface: var(--void);
    --featured-border: rgba(240, 169, 59, 0.4);
    --contact-vignette:
      radial-gradient(125% 95% at 50% 46%, rgba(8, 6, 5, 0.74) 0%, rgba(20, 14, 8, 0.9) 60%, rgba(6, 5, 4, 0.95) 100%);
  }
}
:root[data-theme="dark"] {
  --paper: #15120d;
  --paper-soft: #241e17;
  --paper-line: rgba(239, 234, 227, 0.14);
  --ink: #efeae3;
  --ink-soft: #ada392;
  --teal: #c98b33;
  --teal-deep: #f0a93b;
  --gold: #f0a93b;
  --gold-deep: #f8c46b;
  --accent-light: #f0a93b;
  --cream: #f7f3ec;
  --on-accent: #080605;
  --void: #080605;
  --hover: #2e271c;
  --border-strong: rgba(239, 234, 227, 0.32);

  --paper-rgb: 21, 18, 13;
  --ink-rgb: 239, 234, 227;
  --cream-rgb: 247, 243, 236;
  --gold-rgb: 240, 169, 59;

  --grain-blend: overlay;
  --grain-opacity-hero: 0.22;
  --tap-highlight: rgba(240, 169, 59, 0.18);
  --btn-primary-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  --header-bg: rgba(var(--paper-rgb), 0.86);
  --panel-shadow: 0 24px 44px -22px rgba(0, 0, 0, 0.7);
  --hero-glow-bg: radial-gradient(circle at center, rgba(240, 169, 59, 0.4) 0%, rgba(240, 169, 59, 0.16) 40%, rgba(240, 169, 59, 0) 68%);
  --sample-bg: var(--paper-soft);
  --sample-border-color: rgba(239, 234, 227, 0.16);
  --sample-shadow:
    0 34px 60px -28px rgba(0, 0, 0, 0.75),
    0 10px 24px -14px rgba(0, 0, 0, 0.5);
  --sample-dot-color: rgba(239, 234, 227, 0.35);
  --price-tag-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  --elev-glow-price: 0 26px 50px -22px rgba(240, 169, 59, 0.2), 0 10px 22px -12px rgba(0, 0, 0, 0.6);
  --elev-shadow-demo: 0 26px 40px -24px rgba(0, 0, 0, 0.7);
  --featured-surface: var(--void);
  --featured-border: rgba(240, 169, 59, 0.4);
  --contact-vignette:
    radial-gradient(125% 95% at 50% 46%, rgba(8, 6, 5, 0.74) 0%, rgba(20, 14, 8, 0.9) 60%, rgba(6, 5, 4, 0.95) 100%);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  color-scheme: light dark;         /* default: follow system until a manual choice is made */
  -webkit-tap-highlight-color: var(--tap-highlight);
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Anchor targets must clear the sticky header. motion.js applies its own
   offset when it runs; this covers the no-JS and native-jump paths. */
:target,
section[id] { scroll-margin-top: 5.5rem; }

/* Kill the 300ms double-tap zoom delay on controls. */
a, button, summary, [role="button"] { touch-action: manipulation; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Theme-switch transition: a brief cross-fade on the two properties that
   change on every element, never on layout. Skipped entirely under reduced
   motion, and never applied on first paint (no transition in the base
   cascade), so there is nothing to jump from on load. */
@media (prefers-reduced-motion: no-preference) {
  body, .site-header, .price-tag, .demo-card-link, .sample, .theme-toggle {
    transition: background-color var(--m-dur-base, 300ms) var(--m-ease-out, ease),
                color var(--m-dur-base, 300ms) var(--m-ease-out, ease),
                border-color var(--m-dur-base, 300ms) var(--m-ease-out, ease);
  }
}

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

a { color: var(--teal); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--teal-deep); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.006em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

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

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  /* Respect notch/rounded-corner insets on full-bleed sections in landscape. */
  padding-inline: max(1.5rem, env(safe-area-inset-left)) max(1.5rem, env(safe-area-inset-right));
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 2.2em;
  height: 2px;
  background: var(--gold);
  display: inline-block;
  flex: none;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--ink);
  color: var(--cream);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  border-radius: var(--radius);
}
.skip-link:focus { left: 1rem; top: 1rem; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}
/* On navy surfaces the teal ring is too low-contrast; use gold. */
.process :focus-visible,
.contact :focus-visible,
.site-footer :focus-visible,
.price-tag.featured :focus-visible {
  outline-color: var(--gold);
}

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

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  min-height: 44px;
  padding: 0.95rem 1.7rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn-sm { font-size: 0.92rem; padding: 0.7rem 1.2rem; min-height: 42px; }
.btn-lg { font-size: 1.08rem; padding: 1.1rem 2rem; min-height: 52px; }
/* Keep the long mailto label on one line on narrow phones. */
@media (max-width: 430px) {
  .btn-lg { font-size: 0.95rem; padding: 1.05rem 1.1rem; }
}

.btn-primary {
  background: var(--gold);
  color: var(--on-accent);
  border-color: var(--gold);
  box-shadow: var(--btn-primary-shadow);
}
.btn-primary:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--on-accent);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--cream); }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--paper-line);
}
.site-header .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.75rem;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.wordmark:hover { color: var(--ink); }
.wordmark .dot { color: var(--gold); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links { display: flex; gap: 1.9rem; }

.nav-link {
  position: relative;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--m-dur-base, 300ms) var(--m-ease-out, ease);
}
.nav-link:hover::after,
.nav-link:focus-visible::after { transform: scaleX(1); }
.nav-link:hover { color: var(--ink); }

/* --- Mobile disclosure nav (no JS: native <details>) --- */
.nav-mobile { display: none; }
.nav-mobile > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-burger { display: inline-flex; flex-direction: column; gap: 4px; width: 22px; }
.nav-burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
.nav-mobile[open] .nav-burger span:nth-child(2) { opacity: 0.35; }

/* A closed <details> keeps its children renderable (content-visibility), which
   leaves collapsed, unreachable links in the a11y/tap-target surface. Take them
   out of layout explicitly. */
.nav-mobile:not([open]) .nav-mobile-panel { display: none; }

.nav-mobile-panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 1.5rem;
  right: 1.5rem;
  background: var(--paper-soft);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--panel-shadow);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
}
.nav-mobile-panel a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 0.9rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius);
}
.nav-mobile-panel a + a { border-top: 1px solid var(--paper-line); }
.nav-mobile-panel a:hover { background: var(--paper); color: var(--ink); }

@media (max-width: 880px) {
  .site-nav { display: none; }
  .nav-mobile { display: block; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  overflow: clip;           /* clip, not hidden: does not create a scroll container */
  padding-block: clamp(2.25rem, 1.2rem + 3.2vw, 4rem) clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
}
.hero-grain,
.hero-glow {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.hero-grain {
  inset: 0;
  background-image: var(--grain);
  opacity: var(--grain-opacity-hero);
  mix-blend-mode: var(--grain-blend);
}
.hero-glow {
  top: -34%;
  right: -14%;
  width: min(58vw, 780px);
  aspect-ratio: 1;
  background: var(--hero-glow-bg);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(2rem, 0.5rem + 4.5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.75rem; }
}

.hero-title {
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.014em;
  text-wrap: pretty;
}

.hero-rule {
  display: block;
  width: min(100%, 420px);
  margin-top: 1.25rem;
}
.hero-rule svg { width: 100%; height: 14px; overflow: visible; }
.hero-rule path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 5;
  stroke-linecap: round;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-rule path {
    stroke-dasharray: 460;
    stroke-dashoffset: 460;
    animation: hero-draw 1.15s 0.55s var(--m-ease-out, ease) forwards;
  }
}
@keyframes hero-draw { to { stroke-dashoffset: 0; } }

.hero-copy .lede {
  margin-top: 1.45rem;
  max-width: 44ch;
  font-size: var(--fs-lede);
  color: var(--ink-soft);
}

.hero-actions {
  margin-top: 1.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  align-items: center;
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 44px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.link-arrow::after {
  content: "\2193";
  font-size: 1.05em;
  transition: transform var(--m-dur-base, 300ms) var(--m-ease-out, ease);
}
@media (prefers-reduced-motion: no-preference) {
  .link-arrow:hover::after { transform: translateY(3px); }
}
.link-arrow:hover { color: var(--ink); }

.hero-trust {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* --- Sample stack: real demo screenshots, layered at three depths --- */
.hero-visual {
  position: relative;
  height: clamp(300px, 33vw, 440px);
}
@media (max-width: 940px) {
  .hero-visual { height: clamp(260px, 62vw, 380px); }
}

.sample {
  position: absolute;
  background: var(--sample-bg);
  border: 1px solid var(--sample-border-color);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: var(--sample-shadow);
}
.sample-chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  background: var(--paper-soft);
  border-bottom: 1px solid var(--paper-line);
}
.sample-chrome i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sample-dot-color);
}
.sample img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

/* `rotate` is an independent transform property, so the parallax animation
   (which drives `transform`) composes with it instead of overwriting it. */
.sample-a { width: 72%; left: 0;    top: 24%;    z-index: 3; rotate: -2.6deg; }
.sample-b { width: 56%; right: 0;   top: 0;      z-index: 2; rotate:  2.8deg; }
.sample-c { width: 46%; right: 4%;  bottom: 0;   z-index: 1; rotate: -1.6deg; }

.hero-caption {
  position: relative;
  z-index: 1;
  margin-top: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  max-width: 62ch;
}
.hero-caption strong { color: var(--ink); font-weight: 600; }

/* =========================================================
   Sectors band
   ========================================================= */
.sectors {
  border-block: 1px solid var(--paper-line);
  padding-block: clamp(1.4rem, 1.1rem + 1vw, 2.1rem);
  background: var(--paper-soft);
}
.sector-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sector-list li { white-space: nowrap; }

/* =========================================================
   Process — pinned scroll sequence
   ========================================================= */
.process {
  background: var(--void);
  color: var(--cream);
  position: relative;
}
.process::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
.process-track { --m-pin-length: 260vh; }
.process-pin {
  --m-pin-height: 100vh;
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 3rem + 4vw, 7rem);
}
.process .eyebrow { color: var(--accent-light); }
.process h2 { color: var(--cream); font-size: var(--fs-h2); max-width: 20ch; }

.process-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem 3rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}
.process-intro > p {
  max-width: 38ch;
  color: rgba(var(--cream-rgb), 0.74);
  font-size: 1.03rem;
}

.process-rail {
  position: relative;
  height: 2px;
  background: rgba(var(--cream-rgb), 0.16);
  margin-bottom: clamp(2.5rem, 2rem + 2.4vw, 4rem);
}
.process-rail .m-rail-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--gold), var(--teal));
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 0.8rem + 2.6vw, 3.25rem);
}

.step { position: relative; padding-left: 0; }
.step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 1.35rem;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: rgba(var(--gold-rgb), 0.08);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1rem;
  color: var(--accent-light);
}
.step h3 { color: var(--cream); font-size: var(--fs-h3); margin-bottom: 0.7rem; }
.step p {
  color: rgba(var(--cream-rgb), 0.74);
  font-size: 0.99rem;
  max-width: 34ch;
}

/* The pinned choreography.
   Deliberately NOT built on dimming the steps: text held at low opacity while
   on screen is unreadable and fails AA at any paused scroll position. Instead
   every step stays fully legible and the *active* one is marked by its index
   badge filling with gold. Motion is carried by transform only.
   Base state (no support / reduced motion / no JS) is the unfilled badge,
   which is a perfectly good static design. */
@keyframes step-activate {
  0%   { transform: translate3d(0, 18px, 0); }
  34%  { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes step-mark {
  0% {
    background: rgba(var(--gold-rgb), 0.08);
    border-color: rgba(var(--gold-rgb), 0.5);
    color: var(--accent-light);
  }
  34%, 100% {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--on-accent);
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .process-steps .step,
    .process-steps .step .step-index {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --m-pin;
    }
    .process-steps .step { animation-name: step-activate; }
    .process-steps .step .step-index { animation-name: step-mark; }

    .process-steps .step:nth-child(1),
    .process-steps .step:nth-child(1) .step-index { animation-range: contain 2%  contain 34%; }
    .process-steps .step:nth-child(2),
    .process-steps .step:nth-child(2) .step-index { animation-range: contain 30% contain 62%; }
    .process-steps .step:nth-child(3),
    .process-steps .step:nth-child(3) .step-index { animation-range: contain 58% contain 90%; }
  }
}

/* Below 900px the pin is dropped entirely: a plain stacked list reads better
   on a phone than a long pinned scroll. */
@media (max-width: 900px) {
  .process-track { min-height: 0 !important; }
  .process-pin {
    position: static !important;
    min-height: 0 !important;
    display: block !important;
  }
  .process-steps {
    grid-template-columns: 1fr;
    gap: 0;
    border-left: 2px dashed rgba(var(--gold-rgb), 0.45);
    margin-left: 1.4rem;
  }
  .process-steps .step,
  .process-steps .step .step-index {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .process-steps .step { padding: 0 0 2.5rem 2rem; }
  .process-steps .step:last-child { padding-bottom: 0; }
  .step-index {
    position: absolute;
    left: -28px;
    top: 0;
    width: 54px;
    height: 54px;
    margin-bottom: 0;
    background: var(--void);
  }
  .step h3 { margin-top: 0.35rem; }
  .step h3, .step p { padding-left: 2rem; }
  .process-rail { display: none; }
}

/* =========================================================
   Pricing
   ========================================================= */
.pricing { padding-block: var(--space-section); }
.pricing-intro { max-width: 54ch; margin-bottom: var(--space-tight); }
.pricing-intro h2 { font-size: var(--fs-h2); margin-bottom: 1rem; }
.pricing-intro > p { color: var(--ink-soft); font-size: var(--fs-lede); }

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}
@media (max-width: 760px) {
  .price-grid { grid-template-columns: 1fr; }
}

.price-tag {
  position: relative;
  background: var(--paper-soft);
  border: 1.5px solid var(--border-strong);
  padding: 2.4rem 2.1rem 2.2rem;
  clip-path: polygon(32px 0, 100% 0, 100% 100%, 0 100%, 0 32px);
  box-shadow: var(--price-tag-shadow);
}
.price-tag::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--paper);
}
.price-tag.featured { background: var(--featured-surface); border-color: var(--featured-border); }
.price-tag.featured::before { border-color: var(--gold); background: var(--featured-surface); }
.price-tag.m-lift:hover {
  box-shadow: var(--elev-glow-price);
}

.price-tag .tag-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 1.3rem;
  padding-left: 0.65rem;
}
.price-tag.featured .tag-label { color: var(--accent-light); }

.price-tag .price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 1.9rem + 2.2vw, 3.6rem);
  line-height: 0.92;
  letter-spacing: -0.012em;
  padding-left: 0.65rem;
  margin-bottom: 0.45rem;
}
.price-tag.featured .price { color: var(--cream); }
.price-tag .price .unit {
  font-family: var(--font-mono);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-soft);
}
.price-tag.featured .price .unit { color: rgba(var(--cream-rgb), 0.7); }

.price-tag .price-sub {
  padding-left: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin-bottom: 1.45rem;
}
.price-tag.featured .price-sub { color: rgba(var(--cream-rgb), 0.7); }

.price-tag .price-desc {
  padding-left: 0.65rem;
  font-size: 0.99rem;
  color: var(--ink);
  max-width: 42ch;
}
.price-tag.featured .price-desc { color: rgba(var(--cream-rgb), 0.88); }

.addons { margin-top: 2.75rem; }
.addons-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.chip {
  font-family: var(--font-mono);
  font-size: 0.83rem;
  border: 1.5px dashed var(--ink-soft);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  color: var(--ink);
}

.pricing-note {
  margin-top: 2.4rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: 62ch;
  border-left: 3px solid var(--gold);
  padding-left: 1.1rem;
}

/* =========================================================
   Demo Work
   ========================================================= */
.demos {
  padding-block: var(--space-section);
  background: var(--paper-soft);
  border-block: 1px solid var(--paper-line);
}
.demos-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem 3rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-tight);
}
.demos-intro h2 { font-size: var(--fs-h2); max-width: 16ch; }
.demos-intro > p { max-width: 42ch; color: var(--ink-soft); font-size: var(--fs-lede); }

.demo-carousel {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

.demo-track-wrap {
  position: relative;
  min-width: 0;
  overflow: clip;
}
.demo-track-wrap::before,
.demo-track-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 1.75rem; /* stop above the track's own bottom padding/scrollbar */
  width: 40px;
  pointer-events: none;
  z-index: 2;
}
/* Solid for the first 20px (fully hides any small residual peek from a card
   that lands just barely inside the clip boundary), then fades over the
   remaining 20px so a genuinely-partial next card still reads as an
   intentional "more to scroll" cue rather than a hard chop. */
.demo-track-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--paper-soft) 0, var(--paper-soft) 20px, transparent 40px);
}
.demo-track-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--paper-soft) 0, var(--paper-soft) 20px, transparent 40px);
}
@media (max-width: 700px) {
  .demo-track-wrap::before,
  .demo-track-wrap::after { display: none; }
}
@media (max-width: 700px) {
  .demo-carousel { grid-template-columns: 1fr; }
}

.demo-arrow {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.demo-arrow svg { width: 20px; height: 20px; }
.demo-arrow:hover:not(:disabled) { background: var(--ink); color: var(--cream); }
/* Dark theme leans into the accent on this hover instead of flipping to ink
   (verified in the dark-palette variant): scoped minimally, see below. */
.demo-arrow:disabled { opacity: 0.32; cursor: default; }
@media (max-width: 700px) {
  .demo-arrow { display: none; }
}

.demo-track {
  display: flex;
  min-width: 0;
  gap: 1.5rem;
  padding: 0.5rem 0.25rem 1.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;   /* don't trigger browser back-swipe */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-soft) transparent;
}
@media (prefers-reduced-motion: reduce) {
  .demo-track { scroll-behavior: auto; }
}
.demo-track:focus-visible { outline: 3px solid var(--teal); outline-offset: 5px; }

.demo-card {
  flex: 0 0 310px;
  width: 310px;
  scroll-snap-align: start;
}
@media (max-width: 700px) {
  .demo-card { flex-basis: 78vw; width: 78vw; }
  .demo-card:last-child { scroll-snap-align: end; }
}

.demo-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--border-strong);
  border-radius: 9px;
  overflow: hidden;
}
.demo-card-link:hover { box-shadow: var(--elev-shadow-demo); }
/* Dark theme also picks up an amber hairline on hover (verified in the
   dark-palette variant): scoped minimally, see below. */

.demo-card-window { display: block; overflow: hidden; }
.demo-card-chrome {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.75rem;
  background: var(--paper-soft);
  border-bottom: 1px solid var(--paper-line);
}
.demo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--paper-line); }
.demo-url {
  margin-left: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-thumb {
  width: 100%;
  height: 195px;
  object-fit: cover;
  object-position: top;
  background: var(--paper-line);
}

.demo-card-body {
  padding: 1.2rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: auto;
}
.demo-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.42rem;
  line-height: 1.02;
  letter-spacing: -0.006em;
}
.demo-card-cat {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-deep);
}

/* =========================================================
   About
   ========================================================= */
.about { padding-block: var(--space-section); }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
@media (max-width: 880px) {
  .about-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}
.about-head h2 { font-size: var(--fs-h2); max-width: 12ch; }
.about-copy { max-width: 60ch; }
.about-copy p { color: var(--ink-soft); font-size: 1.04rem; }
.about-copy .about-lead {
  font-size: var(--fs-lede);
  color: var(--ink);
}
.about-copy p + p { margin-top: 1.2rem; }
.about .honest-note {
  margin-top: 1.9rem;
  font-size: var(--fs-small);
  color: var(--ink);
  background: var(--paper-soft);
  border: 1px dashed var(--ink-soft);
  border-left: 3px solid var(--teal);
  padding: 1.15rem 1.35rem;
  border-radius: var(--radius);
}

/* =========================================================
   Contact — full-bleed photographic close
   ========================================================= */
.contact {
  position: relative;
  overflow: clip;
  padding-block: clamp(5rem, 3.5rem + 6vw, 9rem);
  text-align: center;
  color: var(--cream);
  isolation: isolate;
}
.contact-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
  background: var(--void);
}
.contact-media img {
  width: 100%;
  height: 118%;
  margin-top: -9%;
  object-fit: cover;
  object-position: center 42%;
}
.contact-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Single vignette: lighter at the centre so the storefronts read through,
     deeper at the edges. Cream copy over the lightest point still measures
     about 10:1, comfortably past AA. */
  background:
    var(--contact-vignette),
    var(--grain);
  background-blend-mode: normal, overlay;
}
.contact .container { max-width: 720px; }
.contact .eyebrow { color: var(--accent-light); justify-content: center; }
.contact h2 { color: var(--cream); font-size: var(--fs-h2); margin-bottom: 1.2rem; }
.contact .lede {
  color: rgba(var(--cream-rgb), 0.88);
  font-size: var(--fs-lede);
  max-width: 52ch;
  margin-inline: auto;
}
.contact-cta { margin-top: 2.5rem; }
.contact-note {
  margin-top: 1.3rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(var(--cream-rgb), 0.72);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--void);
  color: rgba(var(--cream-rgb), 0.72);
  padding-block: 2.4rem;
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.86rem;
}
.site-footer strong {
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.site-footer a {
  color: rgba(var(--cream-rgb), 0.72);
  text-decoration: none;
  /* 40px tap target, with the drawn underline pulled back up to the text. */
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  background-position: 0 calc(50% + 0.62em);
}
.site-footer a:hover { color: var(--accent-light); }
.site-footer div { display: inline-flex; align-items: center; min-height: 40px; }

/* =========================================================
   Theme toggle
   ========================================================= */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  flex: none;
}
.theme-toggle:hover { background: var(--hover); }
.theme-toggle svg {
  position: absolute;
  width: 18px;
  height: 18px;
  transition: opacity var(--m-dur-base, 300ms) var(--m-ease-out, ease),
              transform var(--m-dur-base, 300ms) var(--m-ease-out, ease);
}
.theme-toggle .icon-sun { opacity: 0; transform: rotate(-40deg) scale(0.6); }
.theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
/* aria-pressed=true means "dark is active" (see index.html script). */
.theme-toggle[aria-pressed="true"] .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle[aria-pressed="true"] .icon-moon { opacity: 0; transform: rotate(40deg) scale(0.6); }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle svg { transition: none; }
}

/* =========================================================
   Dark-theme-only structural overrides
   These are cases where the verified dark palette made a genuine
   interaction-design choice, not merely a color-literal swap, so a shared
   rule with tokens would blur two different intents. Scoped minimally,
   duplicated only for the properties that actually change.
   ========================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .demo-arrow:hover:not(:disabled) {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--void);
  }
  :root:not([data-theme="light"]) .demo-card-link:hover {
    border-color: rgba(var(--gold-rgb), 0.5);
  }
  /* Every ground is dark, so the focus ring goes gold everywhere instead of
     needing the light theme's per-section override below. */
  :root:not([data-theme="light"]) :focus-visible {
    outline-color: var(--gold);
  }
}
:root[data-theme="dark"] .demo-arrow:hover:not(:disabled) {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--void);
}
:root[data-theme="dark"] .demo-card-link:hover {
  border-color: rgba(var(--gold-rgb), 0.5);
}
:root[data-theme="dark"] :focus-visible {
  outline-color: var(--gold);
}