/* ==========================================================================
   Notreal — digital agency landing page
   Light, playful, immersive. No frameworks, no build step.

   Contents
   01. Tokens
   02. Reset & base
   03. Typography helpers
   04. Buttons & icons
   05. Utilities (shell, labels, media, reveal)
   06. Cursor & scroll progress
   07. Header, nav & mobile menu
   08. Hero
   09. Marquee
   10. Intro / studio
   11. Capabilities cards
   12. Process (horizontal scroll)
   13. Stats
   14. Why
   15. Coverage / where we work
   16. FAQ accordion
   17. Contact
   18. Footer
   19. Responsive
   20. Reduced motion & print
   ========================================================================== */

/* ---------------------------------------------------------------- 01. Tokens */
:root {
  /* Surfaces */
  --paper:      #f7f4ec;
  --paper-2:    #fffdf8;
  --paper-3:    #efeade;
  --ink:        #14130f;
  --ink-2:      #3d3a33;
  --ink-3:      #726d62;
  --line:       #e0d9c9;

  /* Playful accents */
  --violet:     #7c5cff;
  --coral:      #ff6b4a;
  --mint:       #23c39a;
  --butter:     #ffc94a;
  --sky:        #38a9ff;

  /* Type */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale */
  --fs-hero:  clamp(2.9rem, 9.5vw, 8.2rem);
  --fs-h2:    clamp(2rem, 4.6vw, 3.9rem);
  --fs-h3:    clamp(1.12rem, 1.6vw, 1.4rem);
  --fs-lede:  clamp(1.05rem, 1.5vw, 1.32rem);
  --fs-body:  1rem;
  --fs-sm:    0.875rem;
  --fs-label: 0.72rem;

  /* Space & shape */
  --shell:    min(1280px, 100% - 3rem);
  --section-y: clamp(5.5rem, 11vw, 10rem);
  --r-sm:     10px;
  --r-md:     18px;
  --r-lg:     28px;
  --r-xl:     40px;

  /* Elevation — warm, low-contrast shadows suit a paper background */
  --shadow-sm: 0 1px 2px rgba(28, 24, 14, .05), 0 4px 14px rgba(28, 24, 14, .04);
  --shadow-md: 0 2px 6px rgba(28, 24, 14, .05), 0 18px 40px -12px rgba(28, 24, 14, .12);
  --shadow-lg: 0 30px 70px -22px rgba(28, 24, 14, .22);

  /* Motion */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
}

/* ------------------------------------------------------- 02. Reset & base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keeps anchor targets clear of the fixed header */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* No page-load curtain. Holding <main> at opacity 0 until JS fires delays
   Largest Contentful Paint by the whole cost of the load event — fonts and
   remote images included. The hero animates itself in via CSS instead. */

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

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p { margin: 0; }

::selection { background: var(--violet); color: #fff; }

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

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

.skip-link {
  position: fixed; top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: .7rem 1.2rem;
  background: var(--ink); color: var(--paper);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: var(--fs-sm);
  transition: transform .25s var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* -------------------------------------------------- 03. Typography helpers */
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.label {
  display: inline-block;
  margin-bottom: 1.1rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.prose p + p { margin-top: 1.1rem; }
.prose { color: var(--ink-2); font-size: var(--fs-lede); line-height: 1.6; }

.section__lede {
  max-width: 46ch;
  margin-top: 1.2rem;
  font-size: var(--fs-lede);
  color: var(--ink-2);
}

/* --------------------------------------------------- 04. Buttons & icons */
.btn {
  --btn-pad-y: .8rem;
  --btn-pad-x: 1.4rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: 100px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform .35s var(--ease-out), background-color .3s, color .3s, box-shadow .35s var(--ease-out);
}
.btn svg { width: 15px; height: 15px; transition: transform .35s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }

.btn--ink {
  background: var(--ink);
  color: var(--paper-2);
  box-shadow: var(--shadow-sm);
}
.btn--ink:hover {
  background: var(--violet);
  box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--violet) 70%, transparent);
}

.btn--ghost {
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn--ghost:hover {
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.btn--lg { --btn-pad-y: 1.05rem; --btn-pad-x: 1.9rem; font-size: 1rem; }
.btn--sm { --btn-pad-y: .6rem; --btn-pad-x: 1.1rem; }

/* Asterisk (Lucide) used as a word separator. Drawn as SVG rather than the
   character "✳" (U+2733), which mobile substitutes with a colour emoji.

   The SVG carries its own width/height/fill/stroke attributes inline in the
   HTML, so it renders correctly with no stylesheet at all — a stale or failed
   CSS load can't make it collapse or disappear. These rules are purely an
   enhancement: CSS beats presentation attributes, so they refine the size and
   colour once the stylesheet arrives. Keep both in sync. */
.asterisk {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--coral);
}
.asterisk svg {
  width: 1em; height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;          /* user units in the 24×24 viewBox — Lucide default */
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------------------------------------------------------- 05. Utilities */
.shell { width: var(--shell); margin-inline: auto; }
.section { padding-block: var(--section-y); }

.section__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

.dot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: .5rem;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint) 60%, transparent);
  animation: pulse 2.4s var(--ease-soft) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint) 55%, transparent); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: .45rem 1rem .45rem .8rem;
  border-radius: 100px;
  background: color-mix(in srgb, var(--paper-2) 70%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
}

/* Image frames. A gradient sits behind every photo so a failed
   remote image still reads as an intentional block of colour. */
.media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--violet) 22%, var(--paper-3)),
    color-mix(in srgb, var(--mint) 20%, var(--paper-3)));
  box-shadow: var(--shadow-md);
  will-change: transform;
}
.media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .8s var(--ease-out), transform 1.1s var(--ease-out);
}
.media img.is-loaded { opacity: 1; transform: none; }
.media--tall { aspect-ratio: 3 / 4; }
.media--wide { aspect-ratio: 4 / 3; }
.media--fill { aspect-ratio: 4 / 5; height: 100%; }

/* Reveal on scroll.

   Every rule here is gated on `.js`, set by an inline script in <head>. If
   scripting is unavailable, blocked or simply broken, the page renders fully
   visible instead of being stuck at opacity 0 — which would otherwise hide the
   entire body from users and from any crawler that doesn't execute scripts. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .8s var(--ease-out) calc(var(--reveal-delay, 0) * 90ms),
    transform .9s var(--ease-out) calc(var(--reveal-delay, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Word-by-word headline reveal. The hero's h1 is pre-split in the HTML; every
   other heading is split by main.js when it scrolls into view. */
.word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.js .word > span {
  display: inline-block;
  transform: translateY(105%) rotate(3deg);
  transition: transform .95s var(--ease-out) calc(var(--i) * 42ms);
}
.js [data-split].is-in .word > span { transform: none; }

/* The hero is exempt from the observer: it holds the LCP element, so waiting
   for JS to attach an IntersectionObserver would push LCP out by exactly that
   much. These animations start at first paint instead, and because the h1 is
   already split in the markup there is no re-split flash. */
.js .hero [data-reveal] {
  animation: reveal-up .8s var(--ease-out) calc(var(--reveal-delay, 0) * 90ms) both;
}
.js .hero [data-split] .word > span {
  transition: none;
  animation: reveal-word .85s var(--ease-out) calc(var(--i) * 38ms) both;
}
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes reveal-word {
  from { transform: translateY(105%) rotate(3deg); }
  to   { transform: none; }
}

/* ----------------------------------------------- 06. Cursor & progress */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 90;
  width: 320px; height: 320px;
  margin: -160px 0 0 -160px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--violet) 26%, transparent) 0%,
    transparent 68%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  transition: opacity .5s ease;
}
.cursor.is-on { opacity: .8; }
@media (hover: none) { .cursor { display: none; } }

.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 120;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--violet), var(--coral), var(--butter), var(--mint));
}

/* ------------------------------------------------------- 07. Header & nav */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem max(1.5rem, calc((100% - var(--shell)) / 2));
  transition: padding .4s var(--ease-out), background-color .4s, box-shadow .4s, backdrop-filter .4s;
}
.header.is-stuck {
  padding-block: .7rem;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -.035em;
}
.brand__mark {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: conic-gradient(from 140deg, var(--violet), var(--coral), var(--butter), var(--mint), var(--violet));
  box-shadow: var(--shadow-sm);
  animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
.brand:hover .brand__mark { animation-duration: 3s; }

.nav { display: flex; gap: .35rem; }
.nav a {
  position: relative;
  padding: .5rem .85rem;
  border-radius: 100px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  transition: color .25s, background-color .25s;
}
.nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }

.header__end { display: flex; align-items: center; gap: .6rem; }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: .6rem;
}
.burger span {
  display: block;
  width: 20px; height: 1.8px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .35s var(--ease-out), opacity .25s;
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.4px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.4px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 105;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 6rem 1.5rem 3rem;
  background: var(--paper);
}
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; gap: .4rem; }
.menu nav a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 10vw, 3rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.1;
}
.menu nav a:hover { color: var(--violet); }
.menu__mail { color: var(--ink-3); font-size: var(--fs-sm); }

/* ------------------------------------------------------------- 08. Hero */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: 8rem 0 6rem;
  overflow: hidden;
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  /* Fallback while WebGL initialises, or if it is unavailable */
  background:
    radial-gradient(60% 60% at 20% 25%, color-mix(in srgb, var(--violet) 26%, transparent), transparent 70%),
    radial-gradient(55% 55% at 80% 30%, color-mix(in srgb, var(--coral) 22%, transparent), transparent 70%),
    radial-gradient(60% 60% at 60% 85%, color-mix(in srgb, var(--mint) 22%, transparent), transparent 70%),
    var(--paper);
}
.hero__grain {
  position: absolute;
  inset: 0;
  opacity: .5;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 16%, transparent) .5px, transparent .5px);
  background-size: 4px 4px;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
/* Blends the canvas into the page below */
.hero::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 22vh;
  background: linear-gradient(to bottom, transparent, var(--paper));
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: var(--shell);
  margin-inline: auto;
}

.hero__title {
  margin: 1.4rem 0 0;
  max-width: 17ch;
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: .93;
  letter-spacing: -.045em;
}
/* Last word gets the accent treatment */
.hero__title .word:last-child > span {
  background: linear-gradient(100deg, var(--violet), var(--coral) 55%, var(--butter));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}

.hero__lede {
  max-width: 48ch;
  margin-top: 1.8rem;
  font-size: var(--fs-lede);
  color: var(--ink-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.4rem;
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  z-index: 2;
  width: 26px; height: 42px;
  margin-left: -13px;
  border-radius: 100px;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 18%, transparent);
}
.hero__scroll span {
  position: absolute;
  top: 8px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--ink);
  animation: drop 1.9s var(--ease-soft) infinite;
}
@keyframes drop {
  0%   { transform: translateY(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(20px); opacity: 0; }
}

/* ---------------------------------------------------------- 09. Marquee */
.marquee {
  padding-block: 1.1rem;
  border-block: 1px solid var(--line);
  background: var(--paper-2);
  overflow: hidden;
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  animation: slide 42s linear infinite;
}
.marquee__track span {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -.03em;
}
/* Sized independently of the words so it stays a separator rather than a word.
   The lower bound is the important number: the previous .72rem floor rendered
   at ~11px on a phone, which is where it was disappearing. */
.marquee__track .asterisk {
  color: var(--coral);
  font-size: clamp(1rem, 1.8vw, 1.45rem);
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------ 10. Intro */
.intro__grid {
  display: grid;
  grid-template-columns: 1fr .85fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.intro__copy .h2 { max-width: 22ch; margin-bottom: 1.8rem; }

.ticks { margin-top: 2rem; display: grid; gap: .75rem; }
.ticks li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--ink-2);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: .45rem;
  width: 1.05rem; height: 1.05rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mint) 22%, var(--paper-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mint) 45%, transparent);
}
.ticks li::after {
  content: "";
  position: absolute;
  left: .3rem; top: .72rem;
  width: .42rem; height: .22rem;
  border-left: 1.6px solid var(--mint);
  border-bottom: 1.6px solid var(--mint);
  transform: rotate(-45deg);
}

.intro__media {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.intro__media .media--tall { grid-column: 1 / 2; }
.intro__media .media--wide { grid-column: 2 / 3; align-self: end; }

.badge {
  display: grid;
  place-content: center;
  text-align: center;
  padding: 1rem;
  border-radius: 50%;
  background: var(--paper-2);
  box-shadow: var(--shadow-md);
}
.badge--float {
  position: absolute;
  left: 52%; top: 8%;
  width: 96px; height: 96px;
  z-index: 3;
  animation: bob 6s var(--ease-soft) infinite;
}
.badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: -.03em;
  line-height: 1;
}
.badge span { font-size: .64rem; color: var(--ink-3); letter-spacing: .04em; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-12px) rotate(4deg); }
}

/* ----------------------------------------------------- 11. Capabilities */
.capabilities { background: linear-gradient(to bottom, var(--paper), var(--paper-3) 60%, var(--paper)); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.1rem;
}

.card {
  --card-c: var(--violet);
  position: relative;
  padding: 1.9rem 1.7rem 1.7rem;
  border-radius: var(--r-md);
  background: var(--paper-2);
  box-shadow: var(--shadow-sm);
  transform-style: preserve-3d;
  transition: box-shadow .5s var(--ease-out), transform .5s var(--ease-out);
  overflow: hidden;
}
/* Accent wash that grows on hover */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 80% at 80% 0%,
    color-mix(in srgb, var(--card-c) 16%, transparent), transparent 65%);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.card > * { position: relative; }
.card:hover { box-shadow: var(--shadow-lg); }
.card:hover::before { opacity: 1; }

.card__num {
  display: inline-block;
  margin-bottom: 3.2rem;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: color-mix(in srgb, var(--card-c) 70%, var(--ink));
}
.card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.15;
}
.card p {
  margin-top: .7rem;
  font-size: .93rem;
  color: var(--ink-2);
  line-height: 1.6;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: 1.3rem;
}
.tags li {
  padding: .26rem .6rem;
  border-radius: 100px;
  background: color-mix(in srgb, var(--card-c) 10%, var(--paper-3));
  color: color-mix(in srgb, var(--card-c) 62%, var(--ink));
  font-size: .7rem;
  font-weight: 600;
}

/* --------------------------------------------------------- 12. Process */
.process { position: relative; }
/* Tall scroll runway drives the horizontal translate (set by JS on desktop) */
.process__sticky {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  min-height: 100svh;
  padding-block: 5rem;
  overflow: hidden;
}
.process__head .h2 { max-width: 20ch; }

.process__track {
  display: flex;
  gap: 1.1rem;
  padding-inline: max(1.5rem, calc((100% - var(--shell)) / 2));
  will-change: transform;
}

.step {
  --step-c: var(--violet);
  flex: 0 0 clamp(260px, 30vw, 400px);
  display: flex;
  flex-direction: column;
  padding: 2rem 1.8rem;
  border-radius: var(--r-lg);
  background: var(--paper-2);
  box-shadow: var(--shadow-md);
}
.step__num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.05em;
  color: color-mix(in srgb, var(--step-c) 30%, var(--paper-3));
}
.step h3 {
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -.03em;
}
.step p { margin-top: .8rem; color: var(--ink-2); font-size: .95rem; }
.step__meta {
  margin-top: auto;
  padding-top: 1.8rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--step-c) 70%, var(--ink));
}
.step--cta {
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  background: var(--ink);
  color: var(--paper);
}
.step--cta h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  max-width: 14ch;
}
.step--cta p { color: color-mix(in srgb, var(--paper) 70%, transparent); margin: 0; }
.step--cta .btn--ink { background: var(--paper); color: var(--ink); }
.step--cta .btn--ink:hover { background: var(--butter); }

/* ----------------------------------------------------------- 13. Stats */
.stats-section { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.stats li {
  padding: 2rem 1.4rem;
  background: var(--paper);
}
.stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.stats span {
  display: block;
  margin-top: .6rem;
  font-size: .88rem;
  color: var(--ink-3);
  max-width: 22ch;
}
.stats li:nth-child(1) strong { color: var(--violet); }
.stats li:nth-child(2) strong { color: var(--coral); }
.stats li:nth-child(3) strong { color: var(--mint); }
.stats li:nth-child(4) strong { color: var(--sky); }

/* ------------------------------------------------------------- 14. Why */
.why__grid {
  display: grid;
  grid-template-columns: .8fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.why__copy .h2 { max-width: 20ch; margin-bottom: 2.6rem; }

.pillars { display: grid; gap: 1.6rem; }
.pillars li {
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.pillars h3 {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -.025em;
}
.pillars h3 .asterisk { color: var(--coral); font-size: .9em; }
.pillars p { margin-top: .5rem; color: var(--ink-2); max-width: 52ch; }

/* -------------------------------------------------------- 15. Coverage */
.coverage {
  background: var(--paper-2);
  border-block: 1px solid var(--line);
}
.coverage__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.coverage .h2 { max-width: 22ch; margin-bottom: 1.6rem; }

/* Definition list: label left, value right, hairline between rows */
.facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .95rem 0;
  border-top: 1px solid var(--line);
}
.facts > div:last-child { border-bottom: 1px solid var(--line); }
.facts dt {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.facts dd {
  margin: 0;
  text-align: right;
  font-weight: 500;
  text-wrap: balance;
}
.facts a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.facts a:hover { color: var(--violet); text-decoration-color: currentColor; }

/* ------------------------------------------------------------- 16. FAQ */
.faq__grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.faq__head { position: sticky; top: 7rem; }
.faq__head .h2 { max-width: 18ch; }

.accordion { border-top: 1px solid var(--line); }
.ac { border-bottom: 1px solid var(--line); }
.ac__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.4rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.5vw, 1.28rem);
  font-weight: 500;
  letter-spacing: -.02em;
  transition: color .25s;
}
.ac__q:hover { color: var(--violet); }

/* Plus / minus toggle */
.ac__q i {
  position: relative;
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--paper-3);
  transition: background-color .3s, transform .4s var(--ease-out);
}
.ac__q i::before, .ac__q i::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 1.6px;
  margin: -.8px 0 0 -5px;
  background: var(--ink);
  transition: transform .4s var(--ease-out);
}
.ac__q i::after { transform: rotate(90deg); }
.ac__q[aria-expanded="true"] i { background: var(--violet); transform: rotate(180deg); }
.ac__q[aria-expanded="true"] i::before,
.ac__q[aria-expanded="true"] i::after { background: #fff; }
.ac__q[aria-expanded="true"] i::after { transform: rotate(0deg); }

.ac__a {
  overflow: hidden;
  height: 0;
  transition: height .45s var(--ease-out);
}
.ac__a > div { padding-bottom: 1.5rem; }
.ac__a p { max-width: 62ch; color: var(--ink-2); }

/* --------------------------------------------------------- 17. Contact */
.contact {
  position: relative;
  padding-block: clamp(6rem, 12vw, 11rem);
  overflow: hidden;
  text-align: center;
  background: var(--ink);
  color: var(--paper);
}
.contact__glow {
  position: absolute;
  inset: -20% -10% auto;
  height: 120%;
  background:
    radial-gradient(45% 45% at 25% 30%, color-mix(in srgb, var(--violet) 55%, transparent), transparent 70%),
    radial-gradient(40% 40% at 75% 25%, color-mix(in srgb, var(--coral) 42%, transparent), transparent 70%),
    radial-gradient(45% 45% at 55% 85%, color-mix(in srgb, var(--sky) 38%, transparent), transparent 70%);
  filter: blur(10px);
  opacity: .55;
  animation: float 18s var(--ease-soft) infinite alternate;
}
@keyframes float {
  from { transform: translate3d(-3%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, -4%, 0) scale(1.12); }
}
.contact__inner { position: relative; z-index: 2; }
.contact .label { color: color-mix(in srgb, var(--paper) 60%, transparent); }

.contact__title {
  margin-inline: auto;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7.5vw, 6rem);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.04em;
}
.contact__title .word:last-child > span {
  background: linear-gradient(100deg, var(--butter), var(--coral));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
.contact__lede {
  max-width: 52ch;
  margin: 1.6rem auto 0;
  font-size: var(--fs-lede);
  color: color-mix(in srgb, var(--paper) 72%, transparent);
}

.mailto {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.8rem;
  padding: .8rem .8rem .8rem 1.8rem;
  border-radius: 100px;
  background: color-mix(in srgb, var(--paper) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 22%, transparent);
  font-size: clamp(.95rem, 2.4vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -.02em;
  transition: background-color .35s, box-shadow .35s, transform .35s var(--ease-out);
}
.mailto:hover {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .5);
}
.mailto__label { word-break: break-all; }
.mailto__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  transition: background-color .35s, transform .35s var(--ease-out);
}
.mailto__icon svg { width: 16px; height: 16px; }
.mailto:hover .mailto__icon { background: var(--butter); transform: rotate(-45deg); }

.contact__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.4rem;
  margin-top: 4rem;
  font-size: var(--fs-sm);
}
.contact__meta li { display: grid; gap: .3rem; text-align: left; }
.contact__meta strong {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 50%, transparent);
}
.contact__meta a:hover { color: var(--butter); }

/* ---------------------------------------------------------- 18. Footer */
.footer { padding-top: clamp(3.5rem, 7vw, 6rem); background: var(--paper); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding-bottom: 3.5rem;
}
.footer__brand p {
  max-width: 34ch;
  margin-top: 1rem;
  font-size: .9rem;
  color: var(--ink-3);
}
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.footer__col h2 {
  margin-bottom: .5rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.footer__col a { font-size: .92rem; color: var(--ink-2); transition: color .2s; }
.footer__col a:hover { color: var(--violet); }
.footer__mail { font-weight: 500; word-break: break-all; }
.footer__col .btn { margin-top: .6rem; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--ink-3);
}
.footer__wink { font-style: italic; }

/* ------------------------------------------------------ 19. Responsive */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --shell: min(1280px, 100% - 2.5rem); }

  .nav { display: none; }
  .burger { display: flex; }
  .header__end .btn { display: none; }

  .intro__grid,
  .why__grid,
  .coverage__grid,
  .faq__grid { grid-template-columns: 1fr; }

  .why__media { order: 2; }
  .faq__head { position: static; }

  /* Horizontal scroll degrades to a swipeable row */
  .process__sticky { position: static; min-height: 0; }
  .process__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1.5rem;
    -webkit-overflow-scrolling: touch;
  }
  .process__track > * { scroll-snap-align: start; }
  .step { flex-basis: min(80vw, 340px); }

  .contact__meta { gap: 1.6rem 2rem; }
}

@media (max-width: 560px) {
  .hero { padding-top: 7rem; }
  .hero__title { max-width: none; }
  .intro__media { grid-template-columns: 1fr; }
  .intro__media .media--tall,
  .intro__media .media--wide { grid-column: 1 / -1; }
  .badge--float { left: auto; right: 4%; top: 3%; width: 78px; height: 78px; }
  .footer__grid { grid-template-columns: 1fr; }
  .mailto { padding-left: 1.2rem; gap: .7rem; }
}

/* ------------------------------------------ 20. Reduced motion & print */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  [data-reveal],
  .word > span { opacity: 1; transform: none; }
  .media img { opacity: 1; transform: none; }
  .cursor { display: none; }
  .marquee__track { animation: none; }
}

@media print {
  .header, .menu, .cursor, .progress, .hero__canvas, .hero__scroll, .marquee { display: none; }
  body { background: #fff; }
  .contact { background: #fff; color: #000; }
}