/*
  White Hat PC Repair: main stylesheet.

  Organized in cascade layers so later layers always win, whatever the selector
  specificity. Put new rules in the matching layer:
    reset       browser normalization
    tokens      design tokens (colors, type, spacing); restyle the site here
    base        element defaults
    layout      page structure: containers, sections, grids
    components  UI pieces; one block per macro in templates/macros/ui.html
    utilities   single-purpose helpers

  Modern CSS used: OKLCH + light-dark() colors, container queries, :has(),
  native popover, <details name>, and progressive enhancements (scroll-driven
  animations, cross-document view transitions) that simply switch off in
  browsers that lack support.
*/
@layer reset, tokens, base, layout, components, utilities;

/* JetBrains Mono (SIL OFL, see fonts/OFL-JetBrainsMono.txt): self-hosted variable font, Latin subset. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-wght.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- reset -- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  body { min-height: 100dvh; }
  img, picture, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3, h4 { overflow-wrap: break-word; }
}

/* --------------------------------------------------------------- tokens -- */
@layer tokens {
  :root {
    color-scheme: light dark;

    /*
      Color: "Cloud Dancer by day, Midnight by night". light-dark() picks the
      value for the visitor's system theme. Light mode is Pantone 2026 Cloud
      Dancer white with deep indigo; dark mode is midnight indigo with electric
      blue. The logo blue (#205bdf) ties both to the brand mark.
    */
    --bg:          light-dark(oklch(95.5% 0.007 95),  oklch(15.5% 0.035 272));
    --surface:     light-dark(oklch(99% 0.003 95),    oklch(20% 0.04 272));
    --surface-2:   light-dark(oklch(92.5% 0.008 95),  oklch(24% 0.045 272));
    --text:        light-dark(oklch(19% 0.035 272),   oklch(95.5% 0.007 95));
    --muted:       light-dark(oklch(44% 0.03 272),    oklch(75% 0.03 272));
    --border:      light-dark(oklch(88% 0.01 272),    oklch(29% 0.045 272));
    /* Actions: buttons, links, labels, focus rings. */
    --accent:      light-dark(oklch(32% 0.1 272),     oklch(72% 0.15 263));
    --accent-text: light-dark(oklch(96% 0.007 95),    oklch(15.5% 0.035 272));
    --accent-soft: color-mix(in oklch, var(--accent) 12%, transparent);
    /* Brand blue: icons, the cursor, the brand name, and other small pops. */
    --highlight:   light-dark(oklch(52% 0.21 263),    oklch(72% 0.15 263));
    --highlight-soft: color-mix(in oklch, var(--highlight) 12%, transparent);
    --glow:        oklch(52% 0.21 263); /* logo blue, for soft background glows */
    --cta-bg:      light-dark(oklch(24% 0.07 272),    oklch(45% 0.2 263));
    --cta-blob:    light-dark(oklch(52% 0.21 263),    oklch(72% 0.15 263));

    /* Type: monospace for headings and UI (the terminal look), system sans for paragraphs (easy reading). */
    --font-body: ui-sans-serif, system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

    /* Fluid type scale: sizes grow smoothly with viewport width, no breakpoints. */
    --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
    --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --step-1:  clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
    --step-2:  clamp(1.5rem, 1.25rem + 1.1vw, 2.2rem);
    --step-3:  clamp(1.7rem, 1.3rem + 1.8vw, 2.8rem);
    --step-4:  clamp(2.2rem, 1.3rem + 3.8vw, 4.4rem); /* monospace runs wide, so the top sizes are smaller */

    /* Space */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-s: 0.75rem;
    --space-m: 1.25rem;
    --space-l: 2rem;
    --space-xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    --space-section: clamp(3.5rem, 2rem + 6vw, 7rem);

    /* Shape & depth */
    --radius-s: 0.6rem;
    --radius-m: 1.1rem;
    --radius-l: 1.75rem;
    --radius-xl: 2.5rem;
    --radius-pill: 999px;
    --shadow: 0 1px 2px oklch(0% 0 0 / 0.06), 0 8px 24px -8px oklch(0% 0 0 / 0.12);
    --shadow-lift: 0 2px 4px oklch(0% 0 0 / 0.06), 0 22px 40px -16px oklch(0% 0 0 / 0.24);

    --container: 76rem;
    --container-narrow: 48rem;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* ----------------------------------------------------------------- base -- */
@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-mono);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  h2 { font-size: var(--step-3); font-weight: 750; }
  h3 { font-size: var(--step-1); font-weight: 650; letter-spacing: -0.01em; }

  /* Interface text shares the heading font. */
  button, summary, .btn, .site-nav, .eyebrow, .footer-heading, .path__link { font-family: var(--font-mono); }
  p { text-wrap: pretty; }

  a { color: var(--accent); text-underline-offset: 0.2em; }
  a:hover { text-decoration-thickness: 2px; }

  :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
  ::selection { background: var(--accent); color: var(--accent-text); }
}

/* --------------------------------------------------------------- layout -- */
@layer layout {
  .container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }

  main { overflow-x: clip; } /* decorative glows may bleed past the edge; never cause sideways scroll */
  .section { padding-block: var(--space-section) 0; }
  .section--narrow { max-width: var(--container-narrow); }
  main > :last-child { padding-bottom: var(--space-section); }

  .grid { display: grid; gap: var(--space-m); }
  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); margin-top: var(--space-m); }
  .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

  .stack { display: grid; gap: var(--space-m); container-type: inline-size; }
}

/* ----------------------------------------------------------- components -- */
@layer components {

  /* Skip link */
  .skip-link {
    position: absolute; left: 1rem; top: -4rem; z-index: 100;
    padding: var(--space-xs) var(--space-m);
    background: var(--accent); color: var(--accent-text);
    border-radius: var(--radius-s);
  }
  .skip-link:focus { top: 1rem; }

  /* Icons (sprite in static/icons.svg) */
  .icon {
    width: 1.25em; height: 1.25em; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.75;
    stroke-linecap: round; stroke-linejoin: round;
  }

  /* Header */
  .site-header {
    position: sticky; top: 0; z-index: 50;
    view-transition-name: site-header; /* stays put while the page content cross-fades */
    background: color-mix(in oklch, var(--bg) 80%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
  }
  .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); min-height: 4.25rem; }

  .brand {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    color: var(--text); text-decoration: none;
    font-family: var(--font-mono); font-weight: 800; font-size: var(--step-1); letter-spacing: -0.04em;
  }
  .brand__name span { color: var(--highlight); }
  .brand__mark { width: 2.25rem; height: 2.25rem; transition: rotate 0.3s var(--ease-out); }
  .brand:hover .brand__mark { rotate: -10deg; } /* tip of the hat */

  .icon-btn {
    display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
    background: none; border: 1px solid var(--border); border-radius: var(--radius-pill); cursor: pointer;
  }

  /* Mobile: the nav is a popover panel sliding in from the right. */
  .site-nav {
    position: fixed; inset: 0 0 0 auto; margin: 0;
    width: min(20rem, 86vw); height: 100dvh; padding: var(--space-l);
    flex-direction: column; align-items: stretch; gap: var(--space-l);
    background: var(--surface); color: var(--text); border: 0; border-left: 1px solid var(--border);
    transition: translate 0.35s var(--ease-out), overlay 0.35s allow-discrete, display 0.35s allow-discrete;
    translate: 100% 0;
  }
  .site-nav:popover-open { display: flex; translate: 0 0; }
  @starting-style { .site-nav:popover-open { translate: 100% 0; } }
  .site-nav::backdrop { background: oklch(0% 0 0 / 0.35); backdrop-filter: blur(3px); }
  .nav-close { align-self: flex-end; }

  .site-nav ul { display: flex; flex-direction: column; gap: var(--space-2xs); padding: 0; list-style: none; }
  .site-nav a:not(.btn) {
    display: block; padding: var(--space-xs) var(--space-s); border-radius: var(--radius-s);
    color: var(--text); font-weight: 550; text-decoration: none;
  }
  .site-nav a:not(.btn):hover { background: var(--surface-2); }
  .site-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }

  /* Wide screens: the same nav sits inline in the header. */
  @media (min-width: 48rem) {
    .nav-toggle, .nav-close { display: none; }
    .site-nav {
      display: flex; position: static; flex-direction: row; align-items: center;
      width: auto; height: auto; padding: 0; overflow: visible;
      background: none; border: 0; translate: none;
    }
    .site-nav ul { flex-direction: row; }
  }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
    padding: 0.8em 1.4em; border: 1.5px solid transparent; border-radius: var(--radius-pill);
    font-weight: 650; line-height: 1.2; text-decoration: none; white-space: nowrap;
    transition: translate 0.2s var(--ease-out), box-shadow 0.2s, background-color 0.2s;
  }
  .btn:hover { translate: 0 -2px; box-shadow: var(--shadow); }
  .btn .icon { transition: translate 0.2s var(--ease-out); }
  .btn:hover .icon { translate: 3px 0; }
  .btn--primary { background: var(--accent); color: var(--accent-text); }
  .btn--ghost { color: var(--text); border-color: var(--border); background: var(--surface); }
  .btn--light { background: oklch(99% 0.003 95); color: oklch(19% 0.035 272); }

  .actions { display: flex; flex-wrap: wrap; gap: var(--space-s); }

  /* Headings */
  .eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    color: var(--accent); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .eyebrow::before { content: "//"; opacity: 0.6; } /* code-comment marker */
  .lede { color: var(--muted); font-size: var(--step-1); line-height: 1.5; }

  .section-heading { display: grid; gap: var(--space-s); max-width: 44rem; margin-bottom: var(--space-xl); }

  /* Images: an average-color placeholder shows until the file loads. */
  .media { overflow: hidden; background: var(--placeholder, var(--surface-2)); }
  .media img { width: 100%; height: 100%; object-fit: cover; }

  /* Hero */
  .hero {
    position: relative; display: grid; gap: var(--space-xl); align-items: center;
    padding-block: var(--space-xl) 0;
  }
  .hero::before { /* soft organic glow behind the hero */
    content: ""; position: absolute; z-index: -1; inset: -10% -20% auto auto;
    width: 60%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklch, var(--glow) 24%, transparent), transparent 65%);
    filter: blur(30px); pointer-events: none;
  }
  .hero__copy { display: grid; gap: var(--space-m); justify-items: start; }
  .hero__title { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
  .hero__title::after { /* terminal block cursor */
    content: ""; display: inline-block; width: 0.55em; height: 0.8em; margin-left: 0.1em;
    background: var(--highlight); vertical-align: -0.05em;
  }
  .hero__lede { color: var(--muted); font-size: var(--step-1); max-width: 36rem; }
  .hero__media { border-radius: var(--radius-l) var(--radius-xl) var(--radius-l) var(--radius-xl); box-shadow: var(--shadow-lift); }
  .hero__media img { aspect-ratio: 4 / 3; }
  @media (min-width: 64rem) {
    .hero { grid-template-columns: 1.1fr 1fr; padding-block-start: var(--space-section); }
    .hero:not(:has(.hero__media)) { grid-template-columns: 1fr; max-width: var(--container-narrow); margin-inline: auto; text-align: center; }
    .hero:not(:has(.hero__media)) .hero__copy { justify-items: center; }
  }

  /* Cards */
  .card {
    display: grid; align-content: start; gap: var(--space-s);
    padding: var(--space-l); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-l);
    transition: translate 0.3s var(--ease-out), box-shadow 0.3s;
  }
  .card:hover { translate: 0 -3px; box-shadow: var(--shadow-lift); }
  .card p { color: var(--muted); }
  .card--plain:hover { translate: none; box-shadow: none; }
  .card__icon {
    display: inline-grid; place-items: center; width: 3rem; height: 3rem;
    background: var(--highlight-soft); color: var(--highlight); border-radius: var(--radius-m);
  }
  .card__icon .icon { width: 1.5rem; height: 1.5rem; }

  /* Bento: feature cards (with images) span two columns; dense packing fills the gaps. */
  .bento { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  @media (min-width: 64rem) {
    .bento { grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; }
    .card--feature { grid-column: span 2; }
  }
  .card--feature { display: block; padding: 0; overflow: hidden; container-type: inline-size; }
  .card__inner { display: grid; height: 100%; }
  .card--feature .card__body { display: grid; align-content: start; gap: var(--space-s); padding: var(--space-l); }
  .card__media img { aspect-ratio: 16 / 9; }
  /* Container query: the card goes horizontal whenever it is wide enough, wherever it's placed. */
  @container (min-width: 36rem) {
    .card__inner { grid-template-columns: 1fr 1fr; }
    .card__media img { aspect-ratio: auto; }
  }
  .card--feature .card__media img { transition: scale 0.6s var(--ease-out); }
  .card--feature:hover .card__media img { scale: 1.04; }

  /* Checklist */
  .checklist { display: grid; gap: var(--space-xs); padding: 0; list-style: none; }
  .checklist li { display: flex; gap: var(--space-xs); align-items: baseline; }
  .checklist .icon { color: var(--highlight); translate: 0 0.2em; stroke-width: 2.5; }

  /* Split rows (business services): image beside text, alternating sides. */
  .split {
    display: grid; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  }
  .split__body { display: grid; align-content: center; gap: var(--space-s); padding: var(--space-xl); }
  .split__media img { aspect-ratio: 16 / 10; }
  @container (min-width: 50rem) {
    .split { grid-template-columns: 1fr 1fr; }
    .split__media img { aspect-ratio: auto; }
    .split:nth-child(even) .split__media { order: 2; }
  }

  /* Paths: the two big "home vs business" links on the homepage. */
  .paths { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
  .path {
    display: grid; overflow: hidden; color: inherit; text-decoration: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
    transition: translate 0.3s var(--ease-out), box-shadow 0.3s;
  }
  .path:hover { translate: 0 -4px; box-shadow: var(--shadow-lift); }
  .path__media img { aspect-ratio: 16 / 9; transition: scale 0.6s var(--ease-out); }
  .path:hover .path__media img { scale: 1.04; }
  .path__body { display: grid; gap: var(--space-s); padding: var(--space-l); }
  .path__body p:not(.eyebrow) { color: var(--muted); }
  .path__body h3 { font-size: var(--step-2); }
  .path__link { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--accent); font-weight: 650; }

  /* Steps */
  .steps {
    display: grid; gap: var(--space-m); padding: 0; list-style: none;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }
  .step { position: relative; display: grid; align-content: start; gap: var(--space-xs); padding-top: var(--space-m); border-top: 2px solid var(--border); }
  .step::before { /* accent progress bar over the top border; filled in by a scroll animation */
    content: ""; position: absolute; inset: -2px 0 auto; height: 2px;
    background: var(--accent); transform-origin: left; scale: 0 1;
  }
  .step p { color: var(--muted); }
  .step__number {
    font-family: var(--font-mono); font-size: var(--step-3); font-weight: 800; line-height: 1;
    color: transparent; -webkit-text-stroke: 1.5px var(--accent);
  }
  .step:hover { border-top-color: var(--accent); }

  /* Spotlight: a soft glow under the pointer (position set by js/main.js). */
  :is(.card, .path, .split):hover {
    background-image: radial-gradient(26rem circle at var(--spot-x, 50%) var(--spot-y, 50%),
                                      color-mix(in oklch, var(--highlight) 9%, transparent), transparent 65%);
  }
  .card--plain:hover { background-image: none; }

  /* Ticker: service names scrolling like terminal output. Static and wrapped unless motion is allowed. */
  .ticker {
    display: flex; overflow: hidden; margin-top: var(--space-section);
    padding-block: var(--space-m); border-block: 1px solid var(--border);
    font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted);
  }
  .ticker__track {
    display: flex; flex-wrap: wrap; justify-content: center; flex: none; gap: var(--space-s) var(--space-xl);
    width: 100%; margin: 0; padding: 0 var(--space-m); list-style: none;
  }
  .ticker__track[aria-hidden] { display: none; }
  .ticker li { display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; }
  .ticker .icon { color: var(--highlight); }

  /* FAQ: <details name="faq"> makes a native one-open-at-a-time accordion. */
  .faq { display: grid; gap: var(--space-s); }
  .faq details {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m);
    padding: var(--space-m) var(--space-l);
  }
  .faq details[open] { border-color: var(--accent); }
  .faq summary {
    display: flex; justify-content: space-between; gap: var(--space-m);
    font-weight: 650; cursor: pointer; list-style: none;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; color: var(--accent); font-size: 1.4em; line-height: 1; transition: rotate 0.25s var(--ease-out); }
  .faq details[open] summary::after { rotate: 45deg; }
  .faq details p { margin-top: var(--space-s); color: var(--muted); }

  /* Closing call to action */
  .cta {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; gap: var(--space-l); align-items: center;
    padding: var(--space-xl); border-radius: var(--radius-xl);
    background: var(--cta-bg); color: oklch(97% 0.007 95);
  }
  .cta::before { /* organic blue blob */
    content: ""; position: absolute; z-index: -1; right: -8rem; bottom: -10rem;
    width: 26rem; aspect-ratio: 1; border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%;
    background: var(--cta-blob); opacity: 0.85; filter: blur(2px);
  }
  .cta h2 { font-size: var(--step-3); }
  .cta .lede { color: oklch(88% 0.03 272); max-width: 38rem; }
  @media (min-width: 56rem) { .cta { grid-template-columns: 1fr auto; } }

  /* Freelance platform links */
  .platforms { display: grid; gap: var(--space-s); margin-top: var(--space-l); }

  /* Contact list */
  .contact-list { display: grid; gap: var(--space-s); padding: 0; margin-top: var(--space-m); list-style: none; }
  .contact-list li { display: flex; gap: var(--space-s); align-items: center; }
  .contact-list .icon { color: var(--highlight); }

  /* Footer */
  .site-footer { background: var(--surface); border-top: 1px solid var(--border); }
  .site-footer__inner {
    display: grid; gap: var(--space-xl); padding-block: var(--space-xl);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }
  .site-footer__brand { display: grid; gap: var(--space-s); align-content: start; }
  .site-footer ul { padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
  .site-footer nav a { color: var(--text); text-decoration: none; }
  .site-footer nav a:hover { color: var(--accent); }
  .footer-heading { font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .site-footer__legal { padding-block: var(--space-m); border-top: 1px solid var(--border); font-size: var(--step--1); }
}

/* ------------------------------------------------------------ utilities -- */
@layer utilities {
  .muted { color: var(--muted); }
}

/* ------------------------------------------------------------ motion -- */
/*
  Every animation lives here, so visitors who ask for reduced motion get a
  still (but complete) site. Rules for performance:
    - animate only transform-type properties and opacity (no layout shift)
    - never fade the headline or hero image from invisible (it would delay LCP)
    - scroll-linked effects use CSS scroll timelines, off the main thread
*/
@media (prefers-reduced-motion: no-preference) {
  /* Smooth cross-page fades between same-site pages; the header stays put. */
  @view-transition { navigation: auto; }

  /* Hero entrance: the label types itself out, then the rest settles in. */
  .eyebrow--typed { animation: type calc(var(--chars) * 40ms) steps(var(--chars)) 0.15s both; }
  .hero__title { animation: settle 0.9s var(--ease-out) both; }
  .hero__lede, .hero__copy .actions { animation: rise 0.8s var(--ease-out) both; }
  .hero__lede { animation-delay: 0.15s; }
  .hero__copy .actions { animation-delay: 0.3s; }
  .hero__media { animation: zoom-in 1.1s var(--ease-out) both; }

  /* Blinking terminal cursor after the page headline. */
  .hero__title::after { animation: blink 1.1s steps(1) infinite; }

  /* Ticker: both copies of the list slide left forever; hover pauses it. */
  .ticker { mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .ticker__track, .ticker__track[aria-hidden] {
    display: flex; flex-wrap: nowrap; width: auto; justify-content: flex-start;
    padding: 0 var(--space-xl) 0 0; animation: ticker 45s linear infinite;
  }
  .ticker:hover .ticker__track { animation-play-state: paused; }

  /* The organic blob in the call to action slowly changes shape. */
  .cta::before { animation: morph 14s ease-in-out infinite alternate; }

  @supports (animation-timeline: view()) {
    /* Elements fade up as they scroll into view. Without support, they're simply visible. */
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }

    /* How it works: progress bars fill and numbers light up one step at a time while scrolling. */
    .step::before, .step__number {
      animation: fill-bar linear both;
      animation-timeline: view();
      animation-range: entry calc(40% + var(--i) * 12%) entry calc(70% + var(--i) * 12%);
    }
    .step__number { animation-name: fill-number; }
  }

  @supports (animation-timeline: scroll()) {
    /* Header gains depth once the page scrolls. */
    .site-header {
      animation: header-lift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 6rem;
    }

    /* Gentle parallax on the hero photo. */
    .hero__media img {
      animation: parallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
  }
}
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes settle { from { translate: 0 0.35em; } }
@keyframes rise { from { opacity: 0; translate: 0 1rem; } }
@keyframes zoom-in { from { scale: 0.95; translate: 0 1rem; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes ticker { to { translate: -100% 0; } }
@keyframes morph { to { border-radius: 58% 42% 38% 62% / 60% 35% 65% 40%; rotate: 25deg; } }
@keyframes reveal { from { opacity: 0; translate: 0 1.5rem; } }
@keyframes fill-bar { to { scale: 1 1; } }
@keyframes fill-number { to { color: var(--accent); } }
@keyframes header-lift { to { box-shadow: var(--shadow); } }
@keyframes parallax { from { scale: 1.08; translate: 0 -2%; } to { scale: 1.08; translate: 0 3%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------------------
   Contact form (pages/contact.html). Same tokens as the rest of the site.
--------------------------------------------------------------------------- */
@layer tokens {
  :root { --danger: light-dark(oklch(50% 0.19 27), oklch(74% 0.15 27)); }
}

@layer components {
  .contact-form { display: grid; gap: var(--space-m); margin-top: var(--space-m); }
  .field-row { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  .field { display: grid; gap: var(--space-2xs); align-content: start; }
  .field label { font-weight: 600; }
  .field input, .field select, .field textarea {
    width: 100%; padding: 0.7em 0.9em;
    background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-s);
    transition: border-color 0.2s;
  }
  .field textarea { resize: vertical; min-height: 9rem; }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
    outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
  }
  .field--error input, .field--error select, .field--error textarea { border-color: var(--danger); }
  .field__error { color: var(--danger); font-size: var(--step--1); margin: 0; }
  .form-alert {
    padding: var(--space-s) var(--space-m); border-radius: var(--radius-s);
    border: 1.5px solid var(--danger); color: var(--danger);
    background: color-mix(in oklch, var(--danger) 8%, transparent);
  }
  .contact-form .btn { justify-self: start; }
  /* Honeypot: out of sight and out of the layout, but still submitted. */
  .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
}