/* =============================================================================
   MY SEO AGENTS - Design System
   Dark cinematic tech. Near-black canvas, single azure accent from the logo.
   Dials: VARIANCE 7 / MOTION 6 / DENSITY 4.  Theme: dark, locked (one theme).
   Stack: static HTML/CSS/JS. Fonts: Satoshi (display, self-hosted) + Manrope (UI/body)
   + JetBrains Mono (stamps / phonetics).
   ============================================================================= */

/* ------------------------------ Self-hosted ------------------------------ */
/* Satoshi (Fontshare, free licence) is served from our own origin rather than
   a third font host: no extra DNS or TLS handshake in front of the headline,
   which is the page's largest contentful paint. */
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------- Tokens ---------------------------------- */
:root {
  /* Ink / surfaces (near-black, never pure #000) */
  --ink:        #08090b;
  --ink-1:      #0d0f12;
  --ink-2:      #131519;
  --ink-3:      #1b1e24;
  --line:       rgba(255,255,255,0.09);
  --line-2:     rgba(255,255,255,0.16);

  /* Text */
  --bone:       #f2f4f7;
  --smoke:      #a2a8b4;
  --smoke-2:    #6b7280;

  /* Accent - azure, drawn from the My SEO Agents logo (#1878c0) */
  --azure:      #1878c0;
  --azure-hi:   #3f9ee8;
  --azure-deep: #0f5589;
  --azure-tint: rgba(24,120,192,0.14);
  --azure-glow: rgba(24,120,192,0.38);

  /* Type families */
  --font-display: "Satoshi", "Manrope", system-ui, sans-serif;
  --font-sans:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Rhythm */
  --container: 1280px;
  --container-wide: 1480px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  /* min(vw, vh) so a wide-but-short laptop (MacBook Pro 14 is 1512x890) stops
     inheriting padding scaled for a tall desktop. On tall screens vw still wins. */
  --section-y: clamp(3rem, min(6.5vw, 7.4vh), 7rem);

  /* Shape lock: buttons = pill, cards/containers = lg, small elements = sm */
  --radius-sm: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Laptop deck tilt. Lower = we look further down at the keyboard, so the key
     legends are less foreshortened and more legible; higher = the screen faces
     us more squarely. This is the single dial that trades keyboard realism
     against screen legibility. */
  --deck-tilt: 66deg;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 0.6s;

  /* Layers */
  --z-nav: 100;
  --z-overlay: 200;
  --z-grain: 300;
}

/* ------------------------------- Reset ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  background: var(--ink);
  color: var(--bone);
  line-height: 1.6;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--azure-hi); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--azure); color: #fff; }
/* Surfaces the browser would otherwise style for us. Cheap to theme, and their
   absence is what makes a page feel assembled rather than built. */
html { scrollbar-color: var(--ink-3) var(--ink); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--ink-3); border: 3px solid var(--ink); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #2b3039; }
input, textarea { caret-color: var(--azure-hi); }
a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
/* Figures that sit in columns should not jitter between values. */
.stat, .step__n, .ul { font-variant-numeric: tabular-nums; }

/* ------------------------------ Typography -------------------------------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
h4, h5, h6 { font-family: var(--font-sans); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }

.h-xl { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02;
        font-size: clamp(2.2rem, min(5.4vw, 7.4vh), 4.4rem); }
.h-lg { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
        font-size: clamp(1.9rem, min(4vw, 5.4vh), 3.2rem); }

.lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--smoke); line-height: 1.6; max-width: 56ch; }
p { max-width: 65ch; }
.text-accent { color: var(--azure-hi); }
/* Highlight for a single word inside a heading. Carries the "found" motif: the
   theme word is picked out in the accent wherever it appears in a heading, and
   left alone in body copy so the emphasis keeps its value. */
.hl { color: var(--azure-hi); }

/* Small mono stamp - used sparingly (eyebrow discipline: max 1 per 3 sections) */
.stamp {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--azure-hi);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.stamp::before { content: ""; width: 1.6rem; height: 1px; background: var(--azure); display: inline-block; }

/* ------------------------------- Layout ---------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.bg-1 { background: var(--ink-1); }

/* ------------------------------- Buttons --------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-sans); font-weight: 700; font-size: 0.95rem;
  letter-spacing: -0.01em; white-space: nowrap; line-height: 1;
  padding: 0.75rem 0.75rem 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--azure); color: #fff;
  transition: transform 0.4s var(--ease-soft), background 0.3s var(--ease-soft), box-shadow 0.4s var(--ease-soft);
}
.btn:hover { background: var(--azure-hi); transform: translateY(-2px); box-shadow: 0 14px 34px -10px var(--azure-glow); }
.btn:active { transform: translateY(0) scale(0.98); }

/* Button-in-button trailing icon: the arrow lives in its own circle */
.btn__ico {
  width: 2rem; height: 2rem; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255,255,255,0.16);
  display: grid; place-items: center;
  transition: transform 0.4s var(--ease-soft), background 0.3s var(--ease-soft);
}
.btn__ico svg { width: 0.95rem; height: 0.95rem; }
.btn:hover .btn__ico { transform: translate(3px, -1px) scale(1.06); background: rgba(255,255,255,0.26); }

.btn--ghost { background: transparent; color: var(--bone); border: 1px solid var(--line-2); padding: 0.75rem 1.5rem; }
.btn--ghost:hover { background: rgba(255,255,255,0.06); border-color: var(--bone); box-shadow: none; }

/* --------------------------- Header / Nav -------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  height: 72px; display: flex; align-items: center;
  /* Only non-layout properties animate here: a height transition on a fixed
     header forces layout of the whole nav subtree. */
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(8,9,11,0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav { display: flex; align-items: center; gap: 2rem; width: 100%; }
.nav__logo { display: flex; align-items: center; flex: 0 0 auto; }
/* Flat single-colour logo rendered in bone for maximum legibility on near-black.
   Remove this filter to show the original azure wordmark. */
.nav__logo img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: 0.95; }
.nav__links { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; }
.nav__link {
  font-size: 0.92rem; font-weight: 600; color: var(--smoke);
  transition: color 0.25s var(--ease); position: relative; padding-block: 0.4rem;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--bone); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--azure);
}
.nav__cta { display: flex; align-items: center; gap: 1.25rem; flex: 0 0 auto; }
.nav__phone {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.85rem; color: var(--bone);
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.nav__phone svg { width: 1em; height: 1em; color: var(--azure-hi); }
.nav__phone:hover { color: var(--azure-hi); }

/* Hamburger */
.nav__burger { display: none; width: 44px; height: 44px; margin-left: auto; position: relative; }
.nav__burger span {
  position: absolute; left: 11px; right: 11px; height: 2px; background: var(--bone); border-radius: 2px;
  transition: transform 0.45s var(--ease-soft), opacity 0.25s var(--ease);
}
.nav__burger span:nth-child(1) { top: 17px; }
.nav__burger span:nth-child(2) { top: 25px; }
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1);
  background: rgba(8,9,11,0.96);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  padding: 104px var(--gutter) 2rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
  overflow-y: auto; display: flex; flex-direction: column; gap: 0.25rem;
}
body.menu-open .mobile-nav { opacity: 1; visibility: visible; }
.mobile-nav a {
  font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; letter-spacing: -0.03em;
  color: var(--bone); padding: 0.7rem 0; border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
body.menu-open .mobile-nav a { opacity: 1; transform: none; }
body.menu-open .mobile-nav a:nth-child(1) { transition-delay: 0.10s; }
body.menu-open .mobile-nav a:nth-child(2) { transition-delay: 0.16s; }
body.menu-open .mobile-nav a:nth-child(3) { transition-delay: 0.22s; }
body.menu-open .mobile-nav a:nth-child(4) { transition-delay: 0.28s; }
.mobile-nav .btn { margin-top: 2rem; justify-content: space-between; }
.mobile-nav__phone {
  margin-top: 1.25rem; font-family: var(--font-mono); color: var(--azure-hi);
  font-size: 1rem; text-align: center;
}

/* =============================== HERO ====================================
   Scroll-driven laptop sequence. The stage pins; only the screen changes.
   Mechanic: a tall scroll container + a sticky stage + three tiled "cue"
   zones read by an IntersectionObserver scan-line at the viewport middle.
   No scroll listeners, no layout-animating properties.
   ========================================================================= */
.hero { position: relative; }
.hero__scroll { position: relative; height: 340vh; }

.hero__stage {
  position: sticky; top: 0;
  height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* Vertical chrome scales with viewport height, not width. Fixed padding on a
     short laptop screen starved the laptop and shrank the headline to ~26px. */
  gap: clamp(0.85rem, 1.9vh, 2.25rem);
  padding: clamp(76px, 8.5vh, 88px) var(--gutter) clamp(24px, 4vh, 40px);
  overflow: hidden;
}

/* Azure glow behind the laptop - the whole background treatment */
.hero__stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 46% at 50% 44%, var(--azure-tint), transparent 68%),
    radial-gradient(80% 60% at 50% 100%, rgba(24,120,192,0.07), transparent 70%);
}
/* Faint horizon line grounding the laptop */
.hero__stage::after {
  content: ""; position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%);
  width: min(1100px, 88vw); height: 1px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

/* Cue zones - invisible, tile the scroll container, drive the screen state */
.hero__cue { position: absolute; left: 0; width: 1px; pointer-events: none; opacity: 0; }
.hero__cue[data-cue="0"] { top: 0;   height: 30%; }
.hero__cue[data-cue="1"] { top: 30%; height: 30%; }
.hero__cue[data-cue="2"] { top: 60%; height: 40%; }

/* ------------------------------- Laptop ---------------------------------- */
/* One-screen rule: the laptop is sized against viewport HEIGHT as well as
   width, so the stage (laptop + bars + CTA) always fits 100dvh. The third
   term derives a width from the height left over after the fixed chrome;
   1.6 is the inverse of the 16:10 screen ratio. */
.laptop-wrap {
  position: relative; z-index: 1;
  width: max(280px, min(880px, 92vw, calc((100dvh - 230px) * 1.11)));
  /* A longer focal length keeps the deck from flaring unnaturally wide at its
     near edge while still reading as a real laptop. */
  perspective: 2400px;
}
.laptop { position: relative; transform: rotateX(4deg); transform-style: preserve-3d; }

/* Outer shell (double-bezel: machined lid holding the glass) */
.laptop__lid {
  position: relative;
  padding: clamp(8px, 1.3vw, 13px);
  border-radius: clamp(14px, 1.9vw, 20px);
  background: linear-gradient(157deg, #31353d 0%, #1b1e23 38%, #0f1115 100%);
  border: 1px solid rgba(255,255,255,0.11);
  box-shadow:
    0 50px 100px -34px rgba(0,0,0,0.92),
    0 18px 44px -22px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,255,255,0.15);
}
/* Camera dot */
.laptop__lid::before {
  content: ""; position: absolute; top: clamp(3px, 0.5vw, 5px); left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.16);
}

/* Inner core - the glass */
.laptop__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: clamp(6px, 0.9vw, 10px);
  background:
    radial-gradient(120% 130% at 50% 0%, #15181d 0%, #0a0b0e 62%, #07080a 100%);
  overflow: hidden;
  container-type: inline-size;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.055),
    inset 0 2px 24px rgba(0,0,0,0.85);
}
/* Screen glare */
.laptop__screen::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(122deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 34%);
}

/* Keyboard deck.
   Hinged at its top edge and rotated forward in 3D, so perspective foreshortens
   it into the trapezoid you see when looking down at an open laptop. The deck's
   laid-out height is its full depth, but its PROJECTED height is much smaller,
   so a negative bottom margin reclaims the unused layout space. Percentage
   margins resolve against the container width, which is what keeps the whole
   assembly proportional at every size. */
.laptop__deck {
  position: relative;
  container-type: inline-size;   /* key legends size against the deck width */
  width: 104%; margin-left: -2%;
  aspect-ratio: 100 / 52;
  /* Reclaims the layout height the rotation does not actually occupy on screen.
     Tied to --deck-tilt: a shallower tilt projects taller, so this must shrink
     or the deck will collide with the controls below it. */
  margin-bottom: -27%;
  transform-origin: top center;
  transform: rotateX(var(--deck-tilt));
  border-radius: 0 0 clamp(10px, 1.4vw, 16px) clamp(10px, 1.4vw, 16px);
  background:
    linear-gradient(180deg, #2b2f36 0%, #212429 26%, #1a1d22 62%, #14161a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 40px 60px -30px rgba(0,0,0,0.95);
}

/* Key field: a real staggered key layout (function row, wide modifiers, a
   spacebar and an inverted-T arrow cluster) rather than a uniform grid. Each
   key flexes by its own unit width, so the whole board scales with the deck. */
.laptop__keys {
  position: absolute; inset: 6.5% 5.5% 39% 5.5%;
  display: flex; flex-direction: column;
  /* The deck is foreshortened vertically but not horizontally, so an even gap
     would collapse the row seams to sub-pixel while the column seams stay
     crisp. The row gap is oversized to survive the projection. */
  gap: 5%;
  background: #0e1014;
  border-radius: 3px;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.7);
}
.kbd-row { flex: 1; display: flex; gap: 0.72%; min-height: 0; }
.kbd-row--fn { flex: 0.62; }        /* function keys are short */

.kbd-row i,
.kbd-arrows i {
  flex: var(--u, 1) 1 0;
  min-width: 0;
  border-radius: 2.5px;
  background: linear-gradient(180deg, #4a505c 0%, #363b45 45%, #272b33 100%);
  box-shadow:
    inset 0 0.7px 0 rgba(255,255,255,0.16),
    0 1px 1.5px rgba(0,0,0,0.7);

  /* Key legends. The deck is foreshortened, so these compress to faint marks
     exactly as printed keycaps do at this viewing angle. They read as detail,
     not as text to be read. */
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-size: 1.55cqw;
  font-weight: 500;
  line-height: 1;
  color: rgba(232, 238, 246, 0.62);
  overflow: hidden;
  font-style: normal;   /* these are <i> for brevity, not emphasis */
  user-select: none;
}

/* Inverted-T arrow cluster: full-height left and right, stacked half-height
   up and down between them. */
.kbd-arrows { flex: var(--u) 1 0; display: flex; gap: 0.72%; min-width: 0; }
.kbd-updown { flex: 1 1 0; display: flex; flex-direction: column; gap: 6%; min-width: 0; }
.kbd-updown i { flex: 1 1 0; }

/* Trackpad */
.laptop__trackpad {
  position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
  width: 27%; height: 25%;
  border-radius: 4px;
  background: linear-gradient(180deg, #212530 0%, #191c22 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    inset 0 1px 5px rgba(0,0,0,0.55),
    0 -1px 0 rgba(0,0,0,0.5);
}

/* ---------------------------- Screen states ------------------------------ */
.screen {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 8cqw;
  opacity: 0; visibility: hidden;
  transform: translateY(1.4cqw);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease), visibility 0.65s var(--ease);
}
.screen.is-active { opacity: 1; visibility: visible; transform: none; }

/* Screen 1 - the H1 */
.screen__h1 {
  font-family: var(--font-display); font-weight: 700;
  /* No ch-based max-width here. `ch` scales with font-size, so a ch cap and the
     font size chase each other: shrinking the type shrinks the box by the same
     ratio and a too-long line never fits. The screen's own padding sets the
     measure instead, and the <br> controls where the two clauses break. */
  font-size: 6.6cqw; line-height: 1.08; letter-spacing: -0.035em;
  color: var(--bone); max-width: none;
}

/* Screen 2 - the definition */
.screen__word {
  font-family: var(--font-display); font-weight: 700;
  font-size: 9.4cqw; line-height: 1; letter-spacing: -0.045em; color: var(--bone);
  max-width: none;
}
.screen__phon {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 2.5cqw; letter-spacing: 0.06em; color: var(--azure-hi);
  margin-top: 1.8cqw; max-width: none;
}
.screen__def {
  font-size: 3.3cqw; line-height: 1.45; color: var(--smoke);
  margin-top: 2.6cqw; max-width: 26ch;
}
.screen__def::before,
.screen__def::after { content: '"'; color: var(--smoke-2); }

/* Screen 3 - the punch */
.screen__punch {
  font-family: var(--font-display); font-weight: 700;
  font-size: 7.4cqw; line-height: 1.1; letter-spacing: -0.04em; color: var(--bone);
  max-width: none;
}
/* The guide's answer: smaller, calmer line that resolves the punch above. */
.screen__sub {
  font-family: var(--font-display); font-weight: 600;
  font-size: 4cqw; line-height: 1.2; letter-spacing: -0.02em; color: var(--smoke);
  margin-top: 2.6cqw; max-width: none;
}

/* --------------------------- Sequence controls --------------------------- */
/* Three bars: real state (which of three screens), and keyboard-operable. */
.hero__progress {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 0.6rem;
}
.hero__dot {
  width: 34px; height: 3px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.16); padding: 0;
  position: relative; overflow: hidden;
  transition: background 0.4s var(--ease);
}
.hero__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--azure-hi); transform: scaleX(0); transform-origin: left;
  transition: transform 0.55s var(--ease);
}
.hero__dot[aria-selected="true"]::after { transform: scaleX(1); }
.hero__dot:hover { background: rgba(255,255,255,0.28); }
/* Expand the hit area to a comfortable target without shifting layout */
.hero__dot::before { content: ""; position: absolute; inset: -14px -6px; }

/* CTA - revealed only once the final screen lands. Dropped below the stage's
   faint horizon line (::after, bottom:16%) so the line stays above the buttons
   rather than cutting through them. Offset is its own transform, so the laptop,
   the progress bars and the one-screen fit are untouched. */
.hero__cta {
  position: relative; z-index: 1;
  --cta-drop: clamp(2rem, 4.5vh, 3rem);
  display: flex; gap: 0.85rem; flex-wrap: wrap; justify-content: center;
  opacity: 0; transform: translateY(calc(var(--cta-drop) + 12px)); pointer-events: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.hero__cta.is-visible { opacity: 1; transform: translateY(var(--cta-drop)); pointer-events: auto; }

/* ------------------------------- Cursor ---------------------------------- */
/* Magnifying glass drawn from the logo mark: lens upper-left, handle running
   down to the right at 45deg, empty lens, azure accent. Pure CSS `cursor:
   url()`, so there is no JS pointer-follower and no per-frame cost. The dark
   underlay keeps the azure readable against every surface on the page.

   Deliberately NOT applied to interactive elements. Links, buttons and fields
   keep their native pointer/text cursors, so the affordance that tells someone
   a thing is clickable is never traded away for decoration. Scoped to fine
   pointers with hover, and every rule keeps a native keyword fallback in case
   the image fails to load.

   Known trade-off: a custom cursor image ignores the OS "large cursor"
   accessibility setting. Interactive targets keeping the system cursor is what
   limits that cost. */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><g fill='none' stroke-linecap='round'><g stroke='%23000000' stroke-opacity='.5' stroke-width='4.6'><circle cx='13' cy='13' r='8'/><path d='M18.9 18.9 26.6 26.6'/></g><g stroke='%233f9ee8' stroke-width='2.3'><circle cx='13' cy='13' r='8'/><path d='M18.9 18.9 26.6 26.6'/></g></g></svg>") 13 13, default;
  }
  /* Native affordances win over the decorative cursor. */
  a, button, [role="button"], summary, label, .hero__dot { cursor: pointer; }
  input, textarea { cursor: text; }
  select { cursor: pointer; }
  :disabled { cursor: not-allowed; }
  ::selection { cursor: text; }
}

/* ------------------------------- Grain layer ----------------------------- */
.grain {
  position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none;
  opacity: 0.03; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------ Scroll reveal ---------------------------- */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }

/* --------------------------------- Utilities ----------------------------- */
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; }
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--azure); color: #fff;
  padding: 0.75rem 1rem; z-index: 999; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ================================ Responsive ============================= */
@media (max-width: 1024px) {
  .nav__links { gap: 1.25rem; }
}

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .hero__scroll { height: 320vh; }
  .laptop-wrap { width: 94vw; }
  .laptop { transform: rotateX(5deg); }
}

/* On a narrow viewport the laptop screen is only ~340px wide, so type sized
   purely in container units falls below readable minimums. Boost the in-screen
   scale so the smallest text (the phonetic) stays legible on a phone. */
@media (max-width: 700px) {
  /* A near-orthographic focal length on phones: the deck's near edge would
     otherwise flare past the viewport and clip the keyboard corners. */
  .laptop-wrap {
    width: max(280px, min(92vw, calc((100dvh - 215px) * 1.11)));
    perspective: 4000px;
  }
  .laptop__deck { width: 100%; margin-left: 0; }
  .screen { padding: 6cqw; }
  /* Same rule as desktop: sized so the second clause holds one line rather
     than orphaning "AI." onto a third. */
  .screen__h1    { font-size: 7.4cqw; }
  .screen__word  { font-size: 13cqw; }
  .screen__phon  { font-size: 3.7cqw; margin-top: 2.4cqw; }
  .screen__def   { font-size: 4.5cqw; margin-top: 3cqw; max-width: 22ch; }
  .screen__punch { font-size: 10.2cqw; }
  .screen__sub   { font-size: 5.6cqw; margin-top: 3.4cqw; }
}

@media (max-width: 560px) {
  .hero__stage { padding-top: 80px; gap: 1.5rem; }
  .laptop { transform: none; }
  .hero__cta { width: 100%; }
  .hero__cta .btn { width: 100%; justify-content: space-between; }
}

/* --------------------- Reduced motion: no pin, click through -------------- */
/* The sequence stops being scroll-driven and becomes user-driven: the three
   bars act as buttons, the stage sits still, nothing animates on its own. */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll { height: auto; }
  .hero__stage { position: static; height: auto; min-height: auto; padding-block: 7rem 4rem; }
  .hero__cue { display: none; }
  .screen { transition: none; }
  .hero__cta { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; }
}

/* =========================== PAGE SECTIONS ================================
   Everything below the hero. Each chapter uses a distinct layout family so
   the page never falls into the repeated-card rhythm that reads as templated:
   asymmetric grid -> numbered rows -> stepper -> split -> accordion -> centered.
   ========================================================================== */

/* Chapter heading block. The {curly} label is the signature device borrowed
   from the reference brand: it names the chapter rather than decorating it. */
/* Width is set here, not with a ch value: `ch` resolves against this block's
   own 1rem font, which squeezed the 70px display headline to ~500px and made
   every section title wrap four times. The lead keeps its own narrower measure. */
.chapter { max-width: 1120px; margin-bottom: clamp(1.5rem, min(4.5vw, 3.6vh), 4rem); }
.chapter h2 { text-wrap: balance; }
.chapter__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--azure-hi);
  font-weight: 500;
}

/* ------------------------- Advantage (asymmetric grid) ------------------- */
.adv { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 1.6vw, 1.25rem); }
.adv__cell {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.1rem, min(3vw, 2.7vh), 2.5rem);
  display: flex; flex-direction: column; gap: 0.9rem;
}
/* The lead cell spans the row and carries the positioning line. */
.adv__cell--wide {
  grid-column: 1 / -1;
  background:
    radial-gradient(120% 160% at 100% 0%, var(--azure-tint), transparent 62%),
    var(--ink-2);
}
/* The lead cell runs two columns so the statement and its backing copy sit
   side by side instead of leaving half the card empty. */
.adv__cell--wide { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.adv__cell--wide .adv__t { font-size: clamp(1.5rem, 3vw, 2.3rem); max-width: 20ch; }
.adv__cell--wide .adv__d { max-width: 54ch; font-size: 1.05rem; }
.adv__t {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.1; letter-spacing: -0.025em;
}
.adv__d { color: var(--smoke); font-size: 0.98rem; line-height: 1.65; max-width: 46ch; }
/* Pushed to the bottom of the flex column so it sits on a common baseline
   with whatever the neighbouring card ends on. */
.adv__cta { margin-top: auto; padding-top: 0.35rem; }
/* Text links are ~29px tall, under the 44px touch minimum. An overlay extends
   the hit area without shifting layout or moving the animated underline. */
.adv__cta a { position: relative; }
.adv__cta a::after { content: ""; position: absolute; inset: -9px -6px; }
/* Hand-drawn underline. The stroke is deliberately uneven rather than a ruled
   1px border: a drawn line reads as made by a person, which a straight rule
   never does. preserveAspectRatio="none" lets one path stretch to any width,
   so it fits the text at every breakpoint without a second asset. */
.ul { display: inline-block; }
.ul::after {
  content: ""; display: block;
  height: 0.42em; margin-top: 0.16em;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'><path d='M3 9.2C52 3.4 104 11.8 158 6.4c46-4.6 92 1.8 139 2.2' fill='none' stroke='%233f9ee8' stroke-width='3.4' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.85s var(--ease-soft) 0.15s;
}
/* Draws itself as the card arrives, reusing the existing reveal state. */
.reveal.in .ul::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .ul::after { transform: none; transition: none; }
}

/* --------------------------- Agents (numbered rows) ---------------------- */
.agents { display: grid; border-top: 1px solid var(--line); }
.agent {
  display: grid; gap: clamp(1.25rem, 4vw, 3.5rem);
  padding: clamp(0.9rem, min(3vw, 2vh), 2.25rem) 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.4s var(--ease-soft);
}
.agent:hover { background: rgba(255,255,255,0.02); }
.agent__body { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(0.5rem, 3vw, 3rem); align-items: baseline; }
.agent__t {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, min(2.4vw, 3.5vh), 2rem); line-height: 1.08; letter-spacing: -0.03em;
}
.agent__d { color: var(--smoke); font-size: 1rem; line-height: 1.65; max-width: 72ch; }

/* ------------------------------ Steps (stepper) -------------------------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
.step { position: relative; padding-top: 2.25rem; }
/* Track line with a node per step. */
.step::before {
  content: ""; position: absolute; top: 0.45rem; left: 0; right: 0; height: 1px;
  background: var(--line);
}
.step::after {
  content: ""; position: absolute; top: 0; left: 0; width: 0.9rem; height: 0.9rem;
  border-radius: 50%; background: var(--ink); border: 1px solid var(--azure);
}
.step:first-child::after { background: var(--azure); }
.step__n { font-family: var(--font-mono); font-size: 0.78rem; color: var(--azure-hi); display: block; margin-bottom: 0.5rem; }
.step__t {
  font-family: var(--font-sans); font-weight: 700; font-size: 1.02rem;
  line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 0.5rem;
}
.step__d { color: var(--smoke); font-size: 0.92rem; line-height: 1.6; }

/* ------------------------------- Proof (split) --------------------------- */
.proof { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.proof__list { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.proof__item {
  border-left: 2px solid var(--azure);
  padding: 0.25rem 0 0.25rem clamp(1.25rem, 2.5vw, 2rem);
}
.proof__t {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.15; letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
}
.proof__d { color: var(--smoke); font-size: 1rem; line-height: 1.65; max-width: 52ch; }

/* Inline text link with animated underline */
.link {
  color: var(--bone); font-weight: 700; display: inline-flex; align-items: center; gap: 0.45rem;
  background-image: linear-gradient(var(--azure), var(--azure));
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease-soft), color 0.3s var(--ease-soft);
  padding-bottom: 3px;
}
.link:hover { background-size: 100% 2px; color: #fff; }
.link svg { width: 1em; height: 1em; transition: transform 0.3s var(--ease-soft); }
.link:hover svg { transform: translateX(3px); }

/* ------------------------------- FAQ accordion --------------------------- */
.faq-wrap { max-width: 860px; }
.acc { margin-top: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__item h3 { font: inherit; letter-spacing: normal; line-height: inherit; }
.acc__q {
  width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 1.35rem 0;
  font-family: var(--font-sans); font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.15rem);
  letter-spacing: -0.015em; color: var(--bone);
  transition: color 0.3s var(--ease-soft);
}
.acc__q:hover { color: var(--azure-hi); }
/* Plus that becomes a minus. Both strokes are transforms only. */
.acc__i { position: relative; width: 1rem; height: 1rem; flex: 0 0 auto; }
.acc__i::before, .acc__i::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: var(--azure-hi);
  transition: transform 0.35s var(--ease-soft);
}
.acc__i::after { transform: rotate(90deg); }
.acc__item.open .acc__i::after { transform: rotate(0deg); }
/* Collapse via grid-template-rows rather than max-height: it eases to the
   content's own natural height, so no JS measurement and no resize handler,
   and there is no arbitrary max to overshoot. */
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.42s var(--ease-soft); }
.acc__item.open .acc__a { grid-template-rows: 1fr; }
.acc__a > p { overflow: hidden; min-height: 0; color: var(--smoke); font-size: 1rem; line-height: 1.7; max-width: 68ch; }
/* Padding is applied only while open. A zero-height grid row still renders its
   child's padding, which otherwise left a 24px gap under every closed row. */
.acc__item.open .acc__a > p { padding-bottom: 1.5rem; }

/* -------------------------------- Closer --------------------------------- */
.closer { position: relative; overflow: hidden; text-align: center; }
.closer::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(58% 100% at 50% 100%, var(--azure-tint), transparent 68%);
}
.closer__inner { position: relative; z-index: 1; }
.closer__h {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.75rem, min(11vw, 15vh), 9rem); line-height: 0.92; letter-spacing: -0.045em;
}
.closer__sub { margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; }
.closer__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.25rem; }
.btn--lg { padding: 0.95rem 0.95rem 0.95rem 1.75rem; font-size: 1rem; }
.btn--ghost.btn--lg { padding: 0.95rem 1.75rem; }

/* ------------------- Responsive: page sections --------------------------
   Declared after the section rules above so these actually win the cascade.
   Every multi-column family collapses explicitly, per section.
   ----------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: clamp(1.5rem, 3vw, 2.25rem); }
  .agent__body { grid-template-columns: 1fr; gap: 0.6rem; }
  .proof { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .adv { grid-template-columns: 1fr; }
  .adv__cell--wide { grid-column: auto; grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  /* The horizontal track makes no sense once the steps stack. */
  .step { padding-top: 0; padding-left: 2rem; }
  .step::before { top: 0; bottom: 0; left: 0.42rem; right: auto; width: 1px; height: auto; }
  .step::after { top: 0.15rem; }
  .agent { grid-template-columns: auto 1fr; gap: 1rem; }
  .closer__h { font-size: clamp(2.75rem, 15vw, 5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .acc__a { transition: none; }
}

/* =============================== CONTACT ==================================
   Interior page. Reuses the section/chapter system; adds a form component.
   The header is fixed (72px), so any page whose first section is not the
   pinned hero needs to clear it: .section--head does that once.
   ========================================================================= */
.section--head { padding-top: calc(72px + clamp(1.5rem, 5vw, 3.5rem)); }

.contact { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

/* Left rail: the promise, what you get, and real contact details. */
.contact__aside { align-self: start; }
.contact__points { display: grid; gap: 1.1rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--line); padding-top: clamp(1.5rem, 3vw, 2rem); }
.contact__point { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; }
.contact__point svg { width: 1.15rem; height: 1.15rem; color: var(--azure-hi); margin-top: 0.15rem; flex: 0 0 auto; }
.contact__point p { color: var(--smoke); font-size: 0.96rem; line-height: 1.6; }
.contact__point strong { color: var(--bone); font-weight: 600; }

.contact__details { margin-top: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--line); padding-top: clamp(1.5rem, 3vw, 2rem); display: grid; gap: 0.85rem; }
.contact__row { display: flex; align-items: center; gap: 0.7rem; font-size: 0.98rem; color: var(--smoke); }
.contact__row svg { width: 1.05rem; height: 1.05rem; color: var(--azure-hi); flex: 0 0 auto; }
.contact__row a { color: var(--bone); }
.contact__row a:hover { color: var(--azure-hi); }

/* Form card. */
.form-card {
  background: var(--ink-1); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
}
.form-card::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); pointer-events: none;
  background: radial-gradient(120% 60% at 100% 0%, var(--azure-tint), transparent 60%);
}
.form { position: relative; display: grid; gap: 1.15rem; }
.form__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.field { display: grid; gap: 0.5rem; }
.field > label {
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--smoke);
}
.field .req { color: var(--azure-hi); }
.field input, .field select, .field textarea {
  width: 100%; background: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); color: var(--bone); font: inherit; font-size: 0.98rem;
  padding: 0.8rem 0.95rem;
  transition: border-color 0.25s var(--ease-soft), box-shadow 0.25s var(--ease-soft), background 0.25s var(--ease-soft);
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--smoke-2); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--azure); background: var(--ink-3);
  box-shadow: 0 0 0 3px var(--azure-tint);
}
/* Native select, restyled: strip the OS chevron and paint our own. */
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 1.05rem;
}
.field select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f9ee8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.field select option { background: var(--ink-2); color: var(--bone); }
.form__submit { justify-content: space-between; width: 100%; margin-top: 0.35rem; }
.form__note { color: var(--smoke-2); font-size: 0.82rem; line-height: 1.6; }
.form__note a { color: var(--smoke); }
.form__note a:hover { color: var(--azure-hi); }

/* =============================== AUDIT MODAL =============================
   Transitional-CTA dialog. Reuses the .form/.field system; adds only the
   overlay, dialog shell, close control, consent row and success state.
   A class must re-assert display:none for [hidden], or .modal's own display
   would override the attribute and the dialog would never hide.
   ======================================================================== */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 2rem);
}
.modal__overlay {
  position: absolute; inset: 0; background: rgba(4, 5, 7, 0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.35s var(--ease-soft);
}
.modal.is-open .modal__overlay { opacity: 1; }
.modal__dialog {
  position: relative; width: 100%; max-width: 560px;
  max-height: calc(100vh - 2rem); overflow-y: auto;
  background: var(--ink-1); border: 1px solid var(--line-2);
  border-radius: var(--radius-lg); padding: clamp(1.6rem, 3.5vw, 2.6rem);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: translateY(16px) scale(0.98);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.modal.is-open .modal__dialog { opacity: 1; transform: none; }
.modal__dialog::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); pointer-events: none;
  background: radial-gradient(120% 55% at 100% 0%, var(--azure-tint), transparent 60%);
}
.modal__close {
  position: absolute; top: 0.85rem; right: 0.85rem; z-index: 1;
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: var(--ink-2); color: var(--smoke); cursor: pointer;
  transition: color 0.2s var(--ease-soft), border-color 0.2s var(--ease-soft), background 0.2s var(--ease-soft);
}
.modal__close:hover { color: var(--bone); border-color: var(--line-2); background: var(--ink-3); }
.modal__close svg { width: 1.1rem; height: 1.1rem; }
.modal__eyebrow {
  font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--azure-hi); margin: 0 0 0.6rem;
}
.modal__title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.08; font-size: clamp(1.5rem, 3.2vw, 2rem); color: var(--bone);
  text-wrap: balance; margin: 0;
}
.modal__sub { color: var(--smoke); line-height: 1.6; margin: 0.7rem 0 1.4rem; font-size: 0.98rem; }
.modal .form { margin: 0; }

/* Consent row: checkbox + fine print. Overrides the uppercase mono field
   label, since this reads as a sentence, not a field name. */
.consent { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; }
.consent input { margin-top: 0.15rem; width: 1.05rem; height: 1.05rem; accent-color: var(--azure); flex: 0 0 auto; }
.consent label {
  font-family: var(--font-sans); font-size: 0.8rem; line-height: 1.55;
  letter-spacing: 0; text-transform: none; color: var(--smoke);
}

/* Success state replaces the form once a submission lands. */
.modal__success { text-align: center; padding: 1rem 0 0.4rem; }
.modal__success-ico {
  width: 3.4rem; height: 3.4rem; margin: 0 auto 1.1rem; display: grid; place-items: center;
  border-radius: var(--radius-pill); background: var(--azure-tint); color: var(--azure-hi);
  border: 1px solid var(--azure-glow);
}
.modal__success-ico svg { width: 1.7rem; height: 1.7rem; }
.modal__success h2 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 3vw, 1.9rem); color: var(--bone); margin: 0 0 0.5rem;
}
.modal__success h2:focus { outline: none; }
.modal__success p { color: var(--smoke); line-height: 1.6; margin: 0 auto 1.4rem; max-width: 40ch; }

body.modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .modal__overlay, .modal__dialog { transition: none; }
  .modal__dialog { transform: none; }
}

@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
}
@media (max-width: 560px) {
  .form__grid2 { grid-template-columns: 1fr; }
}

/* =============================== SERVICES =================================
   Interior page. Text-first stacked service rows separated by thin lines,
   depth from borders and a hover tint rather than shadows (ref: Linear
   changelog), with the azure accent kept rare and functional (ref: Turso).
   Reuses the locked type, tokens, and reveal motion.
   ========================================================================= */
.svcs { display: grid; border-top: 1px solid var(--line); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.svc {
  border-bottom: 1px solid var(--line);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(1rem, 4vw, 3.5rem);
  align-items: start; transition: background 0.3s var(--ease);
}
.svc:hover { background: rgba(255,255,255,0.02); }
.svc__head { display: flex; flex-direction: column; gap: 0.55rem; }
.svc__n { font-family: var(--font-mono); font-size: 0.78rem; color: var(--azure-hi); }
.svc__t {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08;
  font-size: clamp(1.35rem, 2.4vw, 1.95rem); text-wrap: balance;
}
.svc__role {
  font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--smoke-2);
}
.svc__d { color: var(--smoke); font-size: 1.02rem; line-height: 1.65; max-width: 60ch; }
.svc__inc {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.7rem 1.5rem; margin-top: 1.35rem;
}
.svc__inc li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start;
  color: var(--smoke); font-size: 0.92rem; line-height: 1.5;
}
.svc__inc svg { width: 1rem; height: 1rem; color: var(--azure-hi); margin-top: 0.12rem; flex: 0 0 auto; }

@media (max-width: 860px) {
  .svc { grid-template-columns: 1fr; gap: 1.1rem; }
}
@media (max-width: 560px) {
  .svc__inc { grid-template-columns: 1fr; }
}

/* ================================ ABOUT ==================================
   Founder feature (real portrait + bio) then trust principles. Portrait is a
   real-asset slot: the image covers a monogram placeholder, so the layout is
   correct with or without the photo file present (ref: jace.ai about).
   ========================================================================= */
.founder {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.75rem, 5vw, 4rem);
  align-items: start; margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.portrait {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
  overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--ink-2), var(--ink-1));
  display: grid; place-items: center;
}
.portrait__mono {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 8vw, 5rem);
  color: var(--azure-deep); letter-spacing: -0.02em; line-height: 1;
}
.portrait__note {
  position: absolute; left: 0; right: 0; bottom: 0.9rem; text-align: center;
  font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--smoke-2);
}
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.founder__name {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.05;
}
.founder__role {
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--azure-hi); margin-top: 0.5rem;
}
.founder__bio { margin-top: 1.35rem; display: grid; gap: 1rem; }
.founder__bio p { color: var(--smoke); font-size: 1.03rem; line-height: 1.7; max-width: 62ch; }
.founder__meta { margin-top: 1.6rem; display: grid; gap: 0.6rem; border-top: 1px solid var(--line); padding-top: 1.35rem; }
.founder__meta > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.8rem; align-items: baseline; }
.founder__meta dt {
  font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--smoke-2);
}
.founder__meta dd { color: var(--bone); font-size: 0.96rem; line-height: 1.5; }
.founder__meta a { color: var(--azure-hi); }

/* Credentials card: holds the facts list and the LinkedIn link. Sits opposite
   the bio now that the portrait is out (add the portrait column back when a
   real headshot is supplied). */
.founder__card {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.5vw, 2rem); background: var(--ink-1);
}
.founder__card .founder__meta { margin-top: 0; padding-top: 0; border-top: none; }
.founder__linkedin {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  width: 100%; margin-top: 1.5rem;
}
.founder__linkedin svg { width: 1.05rem; height: 1.05rem; }

.principles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.6vw, 1.25rem);
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
}
.principle {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.2vw, 1.85rem); background: var(--ink-1);
}
.principle__t { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; }
.principle__d { color: var(--smoke); font-size: 0.94rem; line-height: 1.62; margin-top: 0.55rem; }

@media (max-width: 860px) {
  .founder { grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 2.5rem); }
  .portrait { max-width: 340px; }
  .principles { grid-template-columns: 1fr; }
}