/* =============================================================
   North & Stone — architectural, editorial, warm-minimal.
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Palette — deep forest, warm cream, rich terracotta accent.
     High contrast, editorial, grounded; nothing SaaS about it. */
  --ink:        #0f2a1f;   /* deep forest — primary dark (was near-black) */
  --ink-soft:   #173629;
  --ink-deep:   #0a1f16;
  --stone-900:  #1f3a2c;
  --stone-700:  #6b665e;
  --stone-500:  #8f8a80;
  --stone-300:  #c9c3b8;
  --stone-200:  #ddd6c6;
  --stone-150:  #e7e1d1;
  --stone-100:  #ede6d2;    /* off-white / paper edge */
  --paper:      #f3ecd7;    /* warm cream — a touch more saturated */
  --paper-soft: #faf4e2;
  --accent:     #c85a3b;    /* terracotta — rich, confident, Irish-earthy */
  --accent-ink: #9a3f25;    /* burnt sienna — for italics on light */
  --accent-warm: #e2864f;   /* softer terracotta for highlights */

  /* Type */
  --font-display: 'Zodiak', 'Cormorant', 'Georgia', serif;
  --font-sans:    'Switzer', 'Inter', system-ui, sans-serif;
  --font-mono:    'General Sans', 'Inter', system-ui, sans-serif; /* editorial numeric labels */

  /* Scale */
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.82rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.15vw, 1.02rem);
  --step-1:  clamp(1.06rem, 1rem + 0.3vw, 1.18rem);
  --step-2:  clamp(1.25rem, 1.15rem + 0.5vw, 1.45rem);
  --step-3:  clamp(1.6rem, 1.4rem + 1vw, 2rem);
  --step-4:  clamp(2.2rem, 1.8rem + 2vw, 3.2rem);
  --step-5:  clamp(2.9rem, 2.3rem + 3.4vw, 5rem);
  --step-6:  clamp(3.4rem, 2.6rem + 4.8vw, 6.6rem);

  /* Space */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --sp-32: 128px; --sp-40: 160px;

  /* Layout */
  --wrap: 1180px;
  --gutter: clamp(24px, 3.4vw, 56px);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --t-quick: 180ms var(--ease-out);
  --t-base:  260ms var(--ease-out);
  --t-slow:  420ms var(--ease-out);

  /* Lines */
  --hair: 1px solid var(--stone-200);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

html, body { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.55;
  font-feature-settings: "ss01", "ss02", "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* subtle grain */
  background-image:
    radial-gradient(rgba(15,42,31,0.03) 1px, transparent 1px);
  background-size: 3px 3px;
}

::selection { background: var(--ink); color: var(--paper-soft); }

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

a { color: inherit; text-decoration: none; }

h1,h2,h3,h4,h5 { margin: 0; font-weight: 500; letter-spacing: -0.01em; }

p { margin: 0; }

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

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

hr {
  border: 0;
  border-top: var(--hair);
  margin: 0;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

.skip {
  position: absolute;
  top: -100px; left: 12px;
  background: var(--ink); color: var(--paper);
  padding: 8px 12px; border-radius: 4px;
  z-index: 100;
}
.skip:focus { top: 12px; }

/* ---------- Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: var(--sp-12);
}
.grid-12 > * { min-width: 0; }

@media (max-width: 860px) {
  .grid-12 { grid-template-columns: 1fr; row-gap: var(--sp-10); }
  [class*="col-span-"] { grid-column: 1 / -1 !important; }
  [class*="col-start-"] { grid-column: 1 / -1 !important; }
}

.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }

/* When start is set, preserve span from the span class. Use two-value form. */
.col-span-4.col-start-6  { grid-column: 6 / span 4; }
.col-span-6.col-start-6  { grid-column: 6 / span 6; }
.col-span-7.col-start-6  { grid-column: 6 / span 7; }
.col-span-5.col-start-7  { grid-column: 7 / span 5; }
.col-span-6.col-start-7  { grid-column: 7 / span 6; }
.col-span-7.col-start-7  { grid-column: 7 / span 7; }
.col-span-4.col-start-8  { grid-column: 8 / span 4; }
.col-span-5.col-start-8  { grid-column: 8 / span 5; }

/* ---------- Typography ---------- */
.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-5);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.h-display em { font-style: italic; font-weight: 300; color: var(--accent-ink); }

.h-case {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.h-case em { font-style: italic; color: var(--accent-ink); font-weight: 300; }

.prose    { color: var(--stone-700); line-height: 1.65; max-width: 56ch; }
.prose-lg { color: var(--ink-soft); font-size: var(--step-1); line-height: 1.55; max-width: 44ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone-700);
}
.eyebrow .num {
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
  padding-right: 10px;
  border-right: 1px solid var(--stone-300);
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  transition:
    background var(--t-quick),
    color var(--t-quick),
    border-color var(--t-quick),
    transform var(--t-quick);
  white-space: nowrap;
}
.btn svg { flex: none; transition: transform var(--t-quick); }
.btn:hover svg { transform: translateX(2px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper-soft);
  border: 1px solid var(--ink);
}
.btn-primary:hover { background: var(--ink-soft); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--stone-300);
}
.btn-ghost:hover { border-color: var(--ink); }

.btn-link {
  padding: 8px 0;
  border-radius: 0;
  border-bottom: 1px solid var(--stone-300);
  color: var(--ink);
}
.btn-link:hover { border-bottom-color: var(--ink); }

.btn-lg { padding: 16px 24px; font-size: 15px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  gap: var(--sp-6);
}
.header-hairline {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(15, 42, 31, 0.22) 18%,
    rgba(15, 42, 31, 0.32) 50%,
    rgba(15, 42, 31, 0.22) 82%,
    transparent
  );
  opacity: 0;
  transition: opacity var(--t-base);
}
.site-header.is-scrolled .header-hairline { opacity: 1; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.brand-mark { color: var(--ink); }
.brand-wordmark {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.14em;
  display: inline-flex;
  gap: 4px;
}
.bw-light { font-weight: 400; color: var(--stone-700); }
.bw-bold  { font-weight: 700; color: var(--ink); letter-spacing: 0.14em; }

.nav {
  display: flex;
  gap: 28px;
}
.nav a {
  font-size: 14px;
  color: var(--stone-700);
  padding: 6px 0;
  position: relative;
  transition: color var(--t-quick);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }

.header-cta { padding: 10px 16px; font-size: 13px; }

@media (max-width: 780px) {
  .nav { display: none; }
  .header-cta span { display: none; }
  .header-cta { padding: 10px 12px; }
}

/* ---------- Hero ----------
   Fits the viewport cleanly. Entire hero (meta, title, foot, strip) lives
   inside 100svh minus the sticky header, with internal flex distribution. */
.hero {
  /* Use svh (smallest viewport height) so content is guaranteed to fit
     the initial mobile view even when browser chrome (address bar) is
     visible. Using dvh causes the hero to be taller than the initial
     viewport on Android Chrome, which pushes the CTAs below the fold. */
  min-height: calc(100svh - 72px);
  padding-top: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(20px, 2.5vw, 36px);
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  overflow: hidden; /* clip the forest panel's bleed */
}

/* ---- Ink panel (deep forest full-bleed on the right) ---- */
.hero-ink {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* 38% of the viewport, bleeding out to the right edge. */
  width: 38%;
  background: var(--ink);
  color: var(--paper);
  z-index: 0;
  overflow: hidden;
  /* Subtle grain + inner hairline */
  box-shadow: inset 1px 0 0 rgba(243, 236, 215, 0.08);
}
/* A fine terracotta editorial rule — vertical, near the left edge of the panel. */
.hero-ink-rule {
  position: absolute;
  top: clamp(40px, 8vw, 96px);
  bottom: clamp(40px, 8vw, 96px);
  left: clamp(28px, 3.5vw, 56px);
  width: 1px;
  background: var(--accent-ink);
  opacity: 0.72;
}
/* Rotated mono index label, hugging the right side. */
.hero-ink-index {
  position: absolute;
  top: clamp(48px, 8vw, 104px);
  right: clamp(20px, 2.2vw, 36px);
  transform: rotate(90deg);
  transform-origin: right top;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(243, 236, 215, 0.55);
}
/* Large outlined N&S monogram (arrow over baseline) sitting low in the panel. */
.hero-ink-mark {
  position: absolute;
  right: clamp(48px, 6vw, 96px);
  bottom: clamp(80px, 10vw, 140px);
  width: clamp(200px, 22vw, 340px);
  height: auto;
  color: rgba(243, 236, 215, 0.18);
}
/* Scroll tick in the bottom-left of the panel. */
.hero-ink-scroll {
  position: absolute;
  left: clamp(28px, 3.5vw, 56px);
  bottom: clamp(28px, 3vw, 40px);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(243, 236, 215, 0.72);
}
.hero-ink-scroll-line {
  width: 36px;
  height: 1px;
  background: rgba(243, 236, 215, 0.5);
  position: relative;
  overflow: hidden;
}
.hero-ink-scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 1px;
  background: var(--accent);
  animation: heroScrollSweep 2.6s ease-in-out infinite;
}
@keyframes heroScrollSweep {
  0% { transform: translateX(0); }
  100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ink-scroll-line::after { animation: none; opacity: 0.7; }
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 40px);
  flex: 1;
  position: relative;
  z-index: 1; /* above the ink panel */
}
.hero-meta { margin-bottom: 0; }

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  /* scales with viewport height AND width so it always fits */
  font-size: clamp(2.4rem, min(7.2vw, 9.5vh), 6rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 18ch;
  hyphens: none;
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* Keep title + foot from overlapping the forest panel on desktop.
   The ink panel owns the right 38% of the viewport, so the panel's left edge
   sits at 62vw from the viewport's left. The hero content lives inside
   `.wrap` (centered, max-width 1180px), whose left margin is
   `max(0px, (100vw - 1180px)/2)`. Safe content width (from wrap's left edge
   to the panel's left edge minus a gutter) is therefore:
      62vw - max(0px, (100vw - 1180px)/2) - 32px
*/
@media (min-width: 901px) {
  .hero-title,
  .hero-meta,
  .hero-foot {
    max-width: min(100%, calc(62vw - max(0px, (100vw - 1180px) / 2) - 72px));
  }
  .hero-title {
    font-size: clamp(2rem, min(5.2vw, 9vh), 4.8rem);
  }
}
.hero-title .line { display: block; }
.hero-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-ink);
  letter-spacing: -0.015em;
}

/* Short-viewport safety: on laptops with small vertical space, shrink further */
@media (max-height: 760px) {
  .hero-title { font-size: clamp(2rem, min(6vw, 9vh), 4.6rem); }
}

/* Tablet / small-desktop: ease the panel narrower so the title never clashes. */
@media (max-width: 900px) and (min-width: 641px) {
  .hero-ink { width: 36%; }
  .hero-ink-mark { width: clamp(160px, 24vw, 240px); }
  .hero-title,
  .hero-meta,
  .hero-foot {
    max-width: min(100%, calc(64vw - 24px));
  }
}

/* Phones: panel collapses to a forest band along the bottom of the hero,
   so the "Start a project" CTA lives on deep green. */
@media (max-width: 640px) {
  .hero-ink {
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    /* Band hugs the bottom ~46% of the hero, behind the lede + CTAs. */
    height: 46%;
  }
  /* Swap the orphan vertical tick for a short horizontal chapter mark
     that hugs the top-left of the forest band. */
  .hero-ink-rule {
    top: clamp(14px, 3.5vw, 22px);
    bottom: auto;
    left: clamp(20px, 5vw, 28px);
    width: 36px;
    height: 1px;
  }
  .hero-ink-index {
    top: auto;
    bottom: clamp(14px, 3vw, 22px);
    right: clamp(16px, 4vw, 24px);
    transform: none;
    font-size: 10px;
  }
  .hero-ink-mark {
    right: clamp(12px, 4vw, 24px);
    bottom: clamp(40px, 10vw, 64px);
    width: clamp(120px, 32vw, 180px);
    color: rgba(243, 236, 215, 0.12);
  }
  .hero-ink-scroll { display: none; }

  /* Lede + CTAs inherit forest background — invert their colours.
     Specificity is bumped with `.hero` so these win over the base `.hero-lede`
     rule which comes later in the source order. */
  .hero .hero-foot { border-top-color: rgba(243, 236, 215, 0.22); }
  .hero .hero-lede { color: var(--paper); }
  .hero .hero-ctas .btn-link { color: var(--paper); border-bottom-color: rgba(243, 236, 215, 0.4); }
  .hero .hero-ctas .btn-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
  .hero .hero-ctas .btn-primary {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
  }
  .hero .hero-ctas .btn-primary:hover {
    background: var(--accent-ink);
    color: var(--paper);
    border-color: var(--accent-ink);
  }
  /* Drop the N&S · Est. 2026 · Dublin label lower and reserve room below
     the CTAs so it breathes away from the link text directly above. */
  .hero .hero-ink-index {
    bottom: 10px;
  }
  .hero .hero-ctas { margin-bottom: 22px; }
}

/* Phones */
@media (max-width: 480px) {
  /* Constrain to the SMALL viewport height (svh) so content always fits
     the initial visible area even with the URL bar expanded. Use a max-height
     ceiling so the hero never grows past the visible area on taller phones.
     Subtract the sticky header (~68px min-height + 24px vertical padding = ~92px). */
  .hero {
    min-height: calc(100svh - 92px);
    max-height: calc(100svh - 72px);
    padding-top: 14px;
    padding-bottom: 20px;
  }
  .hero-inner { gap: clamp(10px, 2.4vw, 18px); }
  .hero-title {
    /* Tighter ceiling on phones so the title never eats the CTAs. */
    font-size: clamp(1.7rem, 7.6vw, 2.4rem);
    line-height: 1.0;
  }
  .h-display  { font-size: clamp(2rem, 9vw, 2.8rem); }
  .h-case     { font-size: clamp(1.8rem, 8vw, 2.4rem); }

  /* Mobile breathing room — no copy removed, more air between elements */
  :root {
    /* Slightly looser line-height on body text for phones */
    --line-body-mobile: 1.7;
  }
  section { padding-block: clamp(72px, 14vw, 112px) !important; }
  .hero { padding-block: 14px 20px !important; }
  .hero-strip-section { padding-block: clamp(48px, 10vw, 72px) !important; }

  /* Hero foot: stack the lede and the CTAs vertically, tight enough to fit the viewport */
  .hero-foot {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 10px;
  }
  .hero-lede { max-width: 40ch; font-size: 0.92rem; line-height: 1.45; }
  .hero-ctas { justify-content: flex-start; gap: 8px 14px; flex-wrap: wrap; }

  /* Prose: airier leading on phones where lines wrap more often */
  .prose, .about-prose, .about-name p:not(.about-signature),
  .faq-intro .prose, .plan-for, .pl p {
    line-height: 1.7;
  }
  .about-prose { gap: 20px; }

  /* Section head: more room under the eyebrow-number, bigger gap before body */
  .section-head, header.section-head { gap: 18px; }
  .section-head-note { margin-top: 8px; }

  /* Pricing: roomier cards, list rows get more vertical space */
  .plan { padding: 28px 24px 30px; }
  .plan-list li { padding-block: 14px; }
  .plan-price { padding-block: 18px 14px; }
  .plans { gap: 24px; }

  /* FAQ: bigger tap targets, more space between items */
  details summary { padding-block: 22px; }
  details[open] > p { padding-bottom: 22px; }

  /* Process: steps get more air */
  .steps li { padding-block: 20px; }

  /* Case studies: generous space between image and copy, and between cases */
  .case { padding-block: clamp(24px, 6vw, 48px); }
  .case-grid { row-gap: 32px; }

  /* About section: more distance between photo, plate, and body */
  .about-aside { gap: 28px; }
  .about-body { gap: 28px; }
  .about-body > * { padding-block: 2px; }

  /* Header more breathing on phones */
  .site-header .header-inner { padding-block: 12px; }

  /* Work foot: don't cram the CTA against the prose */
  .work-foot { gap: 20px; }
}

.hero-foot {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: end;
  gap: clamp(20px, 4vw, 64px);
  margin-top: auto; /* pushes foot to bottom of hero */
  padding-top: clamp(20px, 2.5vw, 32px);
  border-top: var(--hair);
}
.hero-lede {
  color: var(--stone-700);
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 48ch;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-self: end;
}

@media (max-width: 720px) {
  .hero-foot { grid-template-columns: 1fr; }
  .hero-ctas { justify-self: start; }
}

.hero-strip-section {
  padding-top: clamp(16px, 2.5vw, 32px);
  padding-bottom: clamp(32px, 4vw, 56px);
}
.hero-strip { margin-top: 0; }
.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
  padding: var(--sp-6) 0;
  border-top: var(--hair);
  border-bottom: var(--hair);
}
.strip-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  padding-left: 10px;
}
.strip-col::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 1px;
  height: 10px;
  background: var(--ink);
  opacity: 0.55;
}
.strip dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-500);
}
.strip dd {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.35;
}
.strip-link {
  color: var(--ink);
  border-bottom: 1px solid var(--stone-300);
  padding-bottom: 1px;
  transition: border-color var(--t-quick), color var(--t-quick);
}
.strip-link:hover { color: var(--accent-ink); border-bottom-color: var(--accent-ink); }
@media (max-width: 720px) {
  .strip { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
}

/* ---------- Section head ---------- */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-block: clamp(48px, 6vw, 96px) clamp(32px, 4vw, 56px);
}
.section-head--split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-12);
  flex-wrap: wrap;
}
.section-head-note { max-width: 40ch; color: var(--stone-700); }

/* ---------- Positioning ---------- */
.positioning {
  padding-block: clamp(48px, 6vw, 96px);
  border-top: var(--hair);
}
.pos-left { position: sticky; top: 96px; align-self: start; }
.pos-right { display: grid; gap: var(--sp-8); }

.pillars {
  margin-top: var(--sp-10);
  display: grid;
  gap: var(--sp-8);
  border-top: var(--hair);
  padding-top: var(--sp-10);
}
.pillars li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--sp-6);
  align-items: start;
}
.pillar-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  padding-top: 2px;
  position: relative;
}
.pillar-num::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 14px;
  height: 1px;
  background: var(--ink);
  opacity: 0.45;
}
.pillars h3 {
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 8px;
}
.pillars p {
  color: var(--stone-700);
  max-width: 52ch;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .pos-left { position: static; }
}

/* ---------- Work ---------- */
.work {
  padding-block: clamp(48px, 6vw, 96px);
  border-top: var(--hair);
  background: var(--paper-soft);
}

/* ─────────────  Gallery (dramatic colour-led slabs)  ───────────── */
/* work--gallery cancels the section's own vertical padding so slabs can
   run full-bleed with their own internal padding. */
.work--gallery { padding-block: 0; background: var(--paper-soft); }
.work--gallery .section-head {
  padding-block: clamp(48px, 6vw, 96px) clamp(28px, 4vw, 56px);
}

.gallery {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Each slab is a full-bleed block. No gap between slabs — the colour
   shift between them is the divider. */
.slab {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.slab-link {
  display: block;
  color: inherit;
  text-decoration: none;
  padding-block: clamp(64px, 9vw, 128px);
  transition: background var(--t-base);
}

.slab-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.15fr;
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}

/* Colour-led backgrounds. Each slab uses a dramatic saturated surface
   against cream copy for editorial contrast. */
.slab--ink   { background: var(--ink);        color: var(--paper); }
.slab--terra { background: var(--accent-ink); color: var(--paper); }
.slab--stone { background: #2f3d35;           color: var(--paper); } /* deeper than --stone-700 for drama */

/* Subtle inner glow at the edges to add depth without competing. */
.slab::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(243, 236, 215, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/* ---------- Copy column ---------- */
.slab-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.slab-index {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.55;
  margin: 0;
}
.slab-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 0;
  transition: transform var(--t-base);
}
.slab-line {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--paper);
  opacity: 0.78;
  margin: 4px 0 0;
  max-width: 32ch;
}
.slab-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(243, 236, 215, 0.22);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--paper);
  opacity: 0.85;
  transition: opacity var(--t-quick);
}
.slab-cta svg {
  transition: transform var(--t-quick);
}

/* ---------- Browser frame (adapted for dark slab backgrounds) ---------- */
.slab-frame {
  display: block;
  background: rgba(243, 236, 215, 0.06);
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(243, 236, 215, 0.14);
  box-shadow:
    0 1px 0 rgba(243, 236, 215, 0.04),
    0 30px 60px -30px rgba(0, 0, 0, 0.55);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.slab-frame-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(243, 236, 215, 0.05);
  border-bottom: 1px solid rgba(243, 236, 215, 0.12);
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(243, 236, 215, 0.7);
  letter-spacing: 0.04em;
}
.slab-frame-bar span {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(243, 236, 215, 0.25);
}
.slab-frame-bar em {
  margin-left: 10px;
  font-style: normal;
  color: rgba(243, 236, 215, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slab-frame-img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  min-width: 0;
}
.slab-frame-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform var(--t-slow) ease-out;
}

/* ---------- Hover states (whole slab is the link) ---------- */
.slab-link:hover .slab-title { transform: translateX(4px); }
.slab-link:hover .slab-cta { opacity: 1; }
.slab-link:hover .slab-cta svg { transform: translate(3px, -3px); }
.slab-link:hover .slab-frame {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(243, 236, 215, 0.05),
    0 40px 70px -30px rgba(0, 0, 0, 0.65);
}
.slab-link:hover .slab-frame-img img { transform: scale(1.02); }
.slab-link:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: -6px;
}

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .slab-link { padding-block: clamp(56px, 11vw, 88px); }
  .slab-inner {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 40px);
  }
  .slab-title { font-size: clamp(2rem, 9vw, 2.8rem); }
  .slab-line { max-width: none; }
}

/* ---------- Services ---------- */
.services {
  padding-block: clamp(48px, 6vw, 96px);
  border-top: var(--hair);
}
.services-list {
  display: grid;
  border-top: var(--hair);
}
.services-list li {
  display: grid;
  grid-template-columns: 100px 1.2fr 1fr;
  gap: var(--sp-8);
  align-items: start;
  padding: clamp(32px, 4vw, 48px) 0;
  border-bottom: var(--hair);
  transition: background var(--t-base);
}
.services-list li:hover { background: var(--paper-soft); }

.svc-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--stone-500);
  padding-top: 10px;
}
.svc-body h3 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}
.svc-body p { color: var(--stone-700); max-width: 44ch; line-height: 1.6; }

.svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
  justify-content: flex-end;
}
.svc-tags span {
  padding: 6px 12px;
  border: 1px solid var(--stone-300);
  border-radius: 999px;
  font-size: 12px;
  color: var(--stone-700);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

@media (max-width: 860px) {
  .services-list li { grid-template-columns: 1fr; gap: var(--sp-4); }
  .svc-tags { justify-content: flex-start; }
}

/* ---------- Meridian (editorial interlude) ---------- */
.meridian {
  background: var(--paper-soft);
  border-top: var(--hair);
  padding-block: clamp(56px, 7.5vw, 104px);
  position: relative;
  overflow: hidden;
}
.meridian::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 50% 58%,
      rgba(15, 42, 31, 0.05),
      transparent 62%
    );
}
.meridian-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(18px, 3vw, 36px);
  position: relative;
}
.meridian-tick {
  height: 1px;
  max-width: 360px;
  justify-self: stretch;
}
.meridian-tick--lead {
  background: linear-gradient(
    to right,
    transparent,
    rgba(15, 42, 31, 0.28) 80%,
    rgba(15, 42, 31, 0.38) 100%
  );
  justify-self: end;
  width: 100%;
}
.meridian-tick--trail {
  background: linear-gradient(
    to right,
    rgba(15, 42, 31, 0.38) 0%,
    rgba(15, 42, 31, 0.28) 20%,
    transparent
  );
  justify-self: start;
  width: 100%;
}
.meridian-mark {
  color: var(--ink);
  opacity: 0.92;
}
@media (max-width: 560px) {
  .meridian-tick { max-width: 140px; }
}

/* ---------- Ledger (chapter mark) ---------- */
.ledger {
  background: var(--paper);
  padding-block: clamp(28px, 4vw, 56px);
}
.ledger-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(12px, 1.8vw, 22px);
}
.ledger-rule {
  height: 1px;
}
.ledger-rule--lead {
  background: linear-gradient(
    to right,
    transparent,
    rgba(15, 42, 31, 0.22) 60%,
    rgba(15, 42, 31, 0.3) 100%
  );
}
.ledger-rule--trail {
  background: linear-gradient(
    to right,
    rgba(15, 42, 31, 0.3) 0%,
    rgba(15, 42, 31, 0.22) 40%,
    transparent
  );
}
.ledger-mark {
  color: var(--ink);
  opacity: 0.9;
}
@media (max-width: 560px) {
  .ledger-inner {
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
  }
  .ledger-rule { display: block; }
}

/* ---------- Process (ledger rail on ink) ---------- */
.process {
  padding-block: clamp(72px, 9vw, 128px) clamp(80px, 10vw, 144px);
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Soft cream hairline top & bottom so the band reads as a seam, not a wall. */
.process::before,
.process::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(243, 236, 215, 0.12);
  pointer-events: none;
}
.process::before { top: 0; }
.process::after  { bottom: 0; }

/* Head row */
.process-head {
  padding-bottom: clamp(48px, 6vw, 88px);
}
.process-head-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}
.process-head .h-display {
  color: var(--paper);
  margin: 0;
}
.process-lede {
  color: var(--paper);
  opacity: 0.75;
  max-width: 38ch;
  margin: 0;
}
/* Eyebrow variant sits on dark, keeps the terracotta number. */
.eyebrow--on-ink { color: rgba(243, 236, 215, 0.55); margin-bottom: var(--sp-6); }
.eyebrow--on-ink .num { color: var(--accent); }

/* The rail itself — a horizontal 4-column grid with one terracotta timeline
   threaded across the top of every column. */
.process-rail-wrap { position: relative; }
.process-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  position: relative;
}
/* The terracotta hairline threads through the dots at the top of every column. */
.process-rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 15px; /* aligns with the vertical centre of the ledger dot */
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0,
    var(--accent-ink) 8%,
    var(--accent-ink) 92%,
    transparent 100%
  );
  opacity: 0.85;
  pointer-events: none;
}

.ledger-col {
  position: relative;
  padding: 0 clamp(18px, 2vw, 32px) 0 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.2vw, 32px);
}
/* Faint vertical divider between columns in paper tint. */
.ledger-col + .ledger-col::before {
  content: "";
  position: absolute;
  top: 52px;
  bottom: 0;
  left: 0;
  width: 1px;
  background: rgba(243, 236, 215, 0.08);
  pointer-events: none;
}
.ledger-col + .ledger-col {
  padding-left: clamp(18px, 2vw, 32px);
}

/* Header row: a single terracotta dot anchors each column to the timeline. */
.ledger-head {
  position: relative;
  height: 28px; /* reserves space for the dot + a little breath */
}
.ledger-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-ink);
  box-shadow: 0 0 0 4px var(--ink); /* punches through the timeline cleanly */
  margin-top: 11px;
  position: relative;
  z-index: 1;
  display: block;
}
/* Pulsing dot for the launch week — one subtle moment of delight. */
.ledger-dot--live {
  background: var(--paper);
  box-shadow: 0 0 0 4px var(--ink), 0 0 0 7px rgba(243, 236, 215, 0.18);
  animation: ledger-pulse 2.6s ease-in-out infinite;
}
@keyframes ledger-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--ink), 0 0 0 7px rgba(243, 236, 215, 0.18); }
  50%      { box-shadow: 0 0 0 4px var(--ink), 0 0 0 11px rgba(243, 236, 215, 0.04); }
}
@media (prefers-reduced-motion: reduce) {
  .ledger-dot--live { animation: none; }
}

/* Body */
.ledger-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 36ch;
}
.ledger-week {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.ledger-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.6vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 0;
}
.ledger-copy {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--paper);
  opacity: 0.72;
  margin: 4px 0 0;
}

/* ---------- Tablet: drop to 2x2 ---------- */
@media (max-width: 960px) {
  .process-head-grid {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 32px);
    align-items: start;
  }
  .process-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-rail::before { display: none; }
  .ledger-col + .ledger-col::before { display: none; }
  .ledger-col:nth-child(n+3) { padding-top: clamp(32px, 5vw, 48px); }
}

/* ---------- Mobile: vertical rail with terracotta spine down the left ---------- */
@media (max-width: 640px) {
  .process { padding-block: clamp(56px, 12vw, 96px) clamp(64px, 14vw, 112px); }
  .process-rail {
    grid-template-columns: 1fr;
    padding-left: 28px;
    position: relative;
  }
  /* Vertical spine down the left side of the rail. */
  .process-rail::before {
    content: "";
    display: block;
    top: 11px;
    bottom: 11px;
    left: 4px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(
      to bottom,
      transparent 0,
      var(--accent-ink) 4%,
      var(--accent-ink) 96%,
      transparent 100%
    );
    opacity: 0.85;
  }
  .ledger-col {
    padding: 0 0 clamp(32px, 8vw, 48px) 0;
    gap: 18px;
  }
  .ledger-col:last-child { padding-bottom: 0; }
  .ledger-col + .ledger-col::before { display: none; }
  .ledger-col + .ledger-col { padding-left: 0; padding-top: clamp(32px, 8vw, 48px); }

  /* Dot anchors to the spine on the left. */
  .ledger-head {
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
  }
  .ledger-head { height: 0; }
  .ledger-dot {
    position: absolute;
    left: -28px;
    top: 2px;
    margin-top: 0;
  }
  .ledger-body { max-width: none; }
}

/* ---------- Pricing ---------- */
.pricing {
  padding-block: clamp(48px, 6vw, 96px);
  border-top: var(--hair);
  background: var(--paper);
}
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: var(--hair);
  border-bottom: var(--hair);
}
.plan {
  padding: clamp(28px, 3.5vw, 44px) clamp(20px, 2.6vw, 32px);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto auto;
  gap: var(--sp-6);
  border-right: var(--hair);
  background: var(--paper);
  transition: background var(--t-base);
}
.plan:last-child { border-right: 0; }
.plan:hover { background: var(--paper-soft); }

.plan--feature {
  background: var(--ink);
  color: var(--paper-soft);
}
.plan--feature:hover { background: var(--ink-soft); }
.plan--feature .plan-list li { border-color: rgba(244,239,227,0.12); color: var(--stone-300); }
.plan--feature .plan-list li::before { background: var(--paper-soft); }
.plan--feature .plan-tag { color: var(--paper-soft); border-color: rgba(244,239,227,0.3); }
.plan--feature .plan-price-amt { color: var(--paper-soft); }
.plan--feature .plan-price-unit { color: var(--stone-300); }
.plan--feature .plan-for { color: var(--stone-300); }
.plan--feature h3 { color: var(--paper-soft); }
.plan--feature .plan-flag {
  background: var(--accent);
  color: var(--paper-soft);
}
.plan--feature .plan-cta.btn-primary {
  background: var(--paper-soft);
  color: var(--ink);
  border-color: var(--paper-soft);
}
.plan--feature .plan-cta.btn-primary:hover {
  background: transparent;
  color: var(--paper-soft);
}

.plan-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plan-tag {
  align-self: flex-start;
  padding: 5px 12px;
  border: 1px solid var(--stone-300);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-700);
}
.plan-flag {
  position: absolute;
  top: 18px; right: 18px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.plan { position: relative; }
.plan h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.plan.plan--feature h3 { color: var(--paper-soft); }

.plan-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--stone-200);
}
.plan--feature .plan-price { border-top-color: rgba(244,239,227,0.12); }
.plan-price-amt {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.plan-price-amt .plus {
  font-size: 0.7em;
  color: var(--stone-500);
}
.plan-price-unit {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--stone-500);
}

.plan-list {
  display: grid;
  gap: 10px;
}
.plan-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--stone-700);
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--stone-200);
}
.plan-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.plan-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 10px; height: 1px;
  background: var(--ink);
  opacity: 0.7;
}

.plan-for {
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--stone-700);
  line-height: 1.45;
  font-size: 14px;
}

.plan-cta {
  justify-content: center;
  width: 100%;
}

@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr; }
  .plan { border-right: 0; border-bottom: var(--hair); }
  .plan:last-child { border-bottom: 0; }
}

.price-lines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(32px, 4vw, 56px);
}
.pl {
  padding: var(--sp-8) var(--sp-6);
  border-right: var(--hair);
}
.pl:last-child { border-right: 0; }
.pl-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-500);
  margin-bottom: 10px;
}
.pl-value {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 8px;
}
.pl-note { font-size: 13px; color: var(--stone-700); line-height: 1.5; max-width: 32ch; }

@media (max-width: 860px) {
  .price-lines { grid-template-columns: 1fr; }
  .pl { border-right: 0; border-bottom: var(--hair); }
  .pl:last-child { border-bottom: 0; }
}

/* ---------- Add-on packages ---------- */
.addons {
  margin-top: clamp(40px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 24px);
}
.addons-eyebrow {
  margin: 0 0 4px;
}
.addon {
  margin-top: 0;
  padding: clamp(28px, 3.6vw, 44px) clamp(24px, 3vw, 40px);
  border: var(--hair);
  border-radius: 2px;
  background:
    linear-gradient(
      180deg,
      rgba(200, 90, 59, 0.018) 0%,
      rgba(200, 90, 59, 0.05) 100%
    ),
    var(--paper);
  position: relative;
}
.addon--compact {
  padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.6vw, 32px);
}
.addon--compact .addon-title {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.25;
  margin-bottom: 6px;
  max-width: 44ch;
}
.addon--compact .addon-note {
  font-size: 13.5px;
  max-width: 64ch;
}
.addon--compact .addon-price-amt {
  font-size: clamp(24px, 2.4vw, 30px);
}
.addon::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: var(--accent-ink);
  opacity: 0.7;
}
.addon-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 3vw, 48px);
  align-items: end;
}
.addon-eyebrow {
  margin-bottom: 14px;
}
.addon-eyebrow .num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13px;
}
.addon-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 22ch;
  margin: 0 0 10px;
}
.addon-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--stone-700);
  max-width: 56ch;
  margin: 0;
}
.addon-price {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  white-space: nowrap;
}
.addon-price-amt {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.addon-price-unit {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone-700);
}
@media (max-width: 720px) {
  .addon-row {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 20px;
  }
  .addon-price {
    text-align: left;
    align-items: flex-start;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }
}

/* Logo preview row inside the add-on card */
.addon-logos {
  margin-top: clamp(28px, 3.4vw, 40px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid rgba(15, 42, 31, 0.08);
}
.addon-logos-caption {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-600, var(--stone-700));
  margin: 0 0 clamp(14px, 1.8vw, 22px);
}
.logo-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}
.logo-cell {
  display: grid;
  gap: 12px;
  padding: clamp(18px, 2vw, 26px) clamp(16px, 2vw, 22px);
  grid-template-rows: 1fr auto;
  border: 1px solid rgba(15, 42, 31, 0.09);
  border-radius: 2px;
  background: rgba(243, 236, 215, 0.55);
  min-height: 92px;
  align-content: center;
  transition: border-color 320ms ease, background 320ms ease, transform 320ms ease;
}
.logo-cell:hover {
  border-color: rgba(200, 90, 59, 0.35);
  background: rgba(243, 236, 215, 0.9);
}
.logo-cell:hover .logo-plate img { transform: scale(1.015); }

/* The plate holds the actual logo artwork at a consistent, restrained display size.
   Logos read as modest, editorial "recent marks" rather than dominant hero art. */
.logo-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 104px;
  padding: 14px 12px;
  overflow: hidden;
}
.logo-plate img {
  display: block;
  max-width: 100%;
  max-height: 76px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 420ms ease;
}
@media (min-width: 861px) {
  .logo-plate { min-height: 128px; }
  .logo-plate img { max-height: 92px; }
}
/* N&S tile: the stacked lockup sits within a larger canvas with more whitespace
   than the rounded-square icon PNGs, so scale it up so it reads at visual parity. */
.logo-cell:first-child .logo-plate img { transform: scale(1.45); transform-origin: center; }
.logo-cell:first-child:hover .logo-plate img { transform: scale(1.465); }
.logo-mark-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.logo-mark {
  flex: none;
  color: var(--accent-ink);
}
/* legacy — no longer used in logo-row but kept for safety */
.logo-wordmark {
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.logo-wordmark .bw-light { font-weight: 400; color: var(--stone-700); letter-spacing: 0.08em; }
.logo-wordmark .bw-bold  { font-weight: 700; color: var(--ink); letter-spacing: 0.16em; }
.logo-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-600, var(--stone-700));
}
@media (max-width: 720px) {
  .logo-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .logo-cell { min-height: 0; }
  .logo-plate { min-height: 88px; padding: 10px 8px; }
  .logo-plate img { max-height: 64px; }
  .logo-cell:first-child .logo-plate img { transform: scale(1.4); }
  .logo-cell:first-child:hover .logo-plate img { transform: scale(1.415); }
}

/* ---------- About ---------- */
.about {
  padding-block: clamp(64px, 8vw, 128px);
  border-top: var(--hair);
  background:
    radial-gradient(1100px 600px at 88% 8%, rgba(200,90,59,0.05), transparent 60%),
    radial-gradient(900px 500px at 5% 95%, rgba(15,42,31,0.04), transparent 60%),
    var(--paper);
  position: relative;
  overflow: hidden;
}
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--stone-200) 1px, transparent 1px);
  background-size: 100% 6px;
  opacity: 0.08;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.about-grid { align-items: start; row-gap: clamp(32px, 4vw, 56px); position: relative; }

.about-aside {
  position: sticky;
  top: 96px;
  align-self: start;
  display: grid;
  gap: var(--sp-8);
}
.about-aside .h-display { margin-top: 18px; }

.about-photo {
  margin: 0;
  display: grid;
  gap: 10px;
}
.about-photo-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--stone-300);
  background: var(--ink);
  aspect-ratio: 4 / 3;
  box-shadow: 0 1px 0 rgba(15,42,31,0.04), 0 40px 80px -40px rgba(15,42,31,0.5);
}
.about-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.02) contrast(1.02);
  transition: transform 1200ms var(--ease, cubic-bezier(0.2, 0.7, 0.1, 1));
}
.about-photo-frame:hover img { transform: scale(1.025); }
.about-photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(244,239,227,0.08);
  pointer-events: none;
}
.about-photo figcaption {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-700);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.about-photo-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}
.about-photo-wordmark .bw-light { color: var(--stone-700); font-weight: 400; }
.about-photo-wordmark .bw-bold  { color: var(--ink); font-weight: 700; letter-spacing: 0.16em; }
.about-photo-caption-mark {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--accent-ink);
  letter-spacing: normal;
  text-transform: none;
  line-height: 1;
}

.about-plate {
  margin: 0;
  padding: 22px 26px 16px;
  border: 1px solid var(--stone-300);
  background: var(--paper-soft);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 10px;
  max-width: 300px;
  box-shadow:
    0 1px 0 rgba(15,42,31,0.04),
    0 30px 60px -40px rgba(15,42,31,0.3);
  position: relative;
}
.about-plate::before,
.about-plate::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--stone-300);
  border-radius: 50%;
  background: var(--paper);
}
.about-plate::before { top: 10px; left: 10px; }
.about-plate::after { top: 10px; right: 10px; }
.about-plate-lockup {
  grid-column: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 6px 18px;
  border-bottom: 1px solid rgba(15,42,31,0.18);
}
.about-plate-mark {
  flex: none;
  color: var(--ink);
  opacity: 0.92;
}
.about-plate-wordmark {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.1vw + 12px, 20px);
  text-transform: uppercase;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
  line-height: 1;
}
.about-plate-wordmark .bw-light {
  font-weight: 400;
  color: var(--stone-700);
  letter-spacing: 0.02em;
}
.about-plate-wordmark .bw-bold {
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.14em;
}
.about-plate figcaption {
  grid-column: 1;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}
.about-plate .num-tab {
  color: var(--ink);
  border-bottom: 1px solid rgba(15,42,31,0.25);
  padding-bottom: 1px;
}

.about-body {
  display: grid;
  gap: var(--sp-6);
  padding-left: clamp(0px, 2vw, 24px);
  border-left: 1px solid var(--stone-200);
  padding-block: 8px clamp(8px, 2vw, 24px);
}
.about-body > * { padding-left: clamp(16px, 2vw, 28px); }

/* Closing signet: stacked N&S (terracotta-S) beneath the About section */
.about-signet {
  display: flex;
  justify-content: center;
  padding-top: clamp(56px, 8vw, 120px);
  padding-bottom: clamp(16px, 3vw, 40px);
}
.about-signet-figure {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2vw, 28px);
  /* A hairline above draws the eye in without crowding the essay */
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid rgba(15, 42, 31, 0.1);
  width: 100%;
  max-width: 680px;
}
.about-signet-img {
  display: block;
  width: clamp(260px, 30vw, 420px);
  height: auto;
  /* The PNG background is paper-cream; match the page so it sits flush. */
  background: transparent;
  opacity: 0.96;
  transition: opacity 420ms ease, transform 620ms ease;
}
.about-signet:hover .about-signet-img { opacity: 1; transform: translateY(-1px); }
.about-signet-caption {
  font-family: var(--font-sans);
  font-size: 11.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--stone-700);
}
.about-signet-caption .bw-light { font-weight: 400; color: var(--stone-700); letter-spacing: 0.08em; }
.about-signet-caption .bw-bold  { font-weight: 700; color: var(--ink); letter-spacing: 0.18em; margin-left: -6px; }
.about-signet-dot { color: var(--stone-500); }
.about-signet-est { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; color: var(--stone-600, var(--stone-700)); }

.about-signature {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-700);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.about-signature--sub { margin-top: var(--sp-4); }
.about-sig-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--accent-ink);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
}

.about-lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.35rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 28ch;
}
.about-lede em {
  font-style: italic;
  color: var(--accent-ink);
}

.about-prose {
  display: grid;
  gap: clamp(22px, 1.1vw + 16px, 30px);
  max-width: 62ch;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink);
}
.about-prose p:first-of-type::first-letter {
  font-family: var(--font-display);
  float: left;
  font-size: 3.4em;
  line-height: 0.88;
  padding: 6px 12px 0 0;
  color: var(--accent-ink);
  font-weight: 400;
}

.about-pull {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 0.9rem + 1vw, 1.65rem);
  line-height: 1.35;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: 22px !important;
  margin-left: -22px;
  max-width: 36ch;
}

.about-name {
  display: grid;
  gap: var(--sp-3);
  max-width: 52ch;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--stone-200);
  margin-top: var(--sp-4);
}
.about-name p:not(.about-signature) {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
}
.about-name em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent-ink);
}

.about-sign {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: var(--sp-6);
  margin-top: var(--sp-2);
  border-top: 1px solid var(--stone-200);
  color: var(--ink);
}
.about-monogram { color: var(--accent-ink); flex-shrink: 0; }
.about-sign > div { display: flex; flex-direction: column; gap: 2px; }
.about-signoff {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.1;
  color: var(--ink);
}
.about-signoff-role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone-700);
}

@media (max-width: 900px) {
  .about-grid { display: block; }
  .about-aside {
    position: static;
    margin-bottom: var(--sp-8);
  }
  .about-plate { max-width: 100%; }
  .about-body {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--stone-200);
    padding-top: var(--sp-6);
  }
  .about-body > * { padding-left: 0; }
  .about-pull { margin-left: 0; padding-left: 18px !important; }
}

/* ---------- FAQ ---------- */
.faq {
  padding-block: clamp(48px, 6vw, 96px);
  border-top: var(--hair);
}
.faq-intro { position: sticky; top: 96px; align-self: start; }

.faq-list {
  display: grid;
  border-top: var(--hair);
}
.faq-list details {
  border-bottom: var(--hair);
  padding: var(--sp-6) 0;
}
.faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 4px 0;
  transition: color var(--t-quick);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--accent-ink); }
.faq-chev { transition: transform var(--t-base); color: var(--stone-700); }
.faq-list details[open] .faq-chev { transform: rotate(180deg); }

.faq-list p {
  margin-top: var(--sp-4);
  color: var(--stone-700);
  max-width: 62ch;
  line-height: 1.65;
}

@media (max-width: 860px) {
  .faq-intro { position: static; }
}

/* ---------- Contact ---------- */
.contact {
  padding-block: clamp(48px, 6vw, 96px);
  border-top: var(--hair);
  background: var(--ink);
  color: var(--paper-soft);
}
.contact .h-display { color: var(--paper-soft); }
.contact .h-display em { color: var(--stone-300); }
.contact .eyebrow { color: var(--stone-300); }
.contact .eyebrow .num { color: var(--paper-soft); border-color: rgba(244,239,227,0.25); }
.contact .prose { color: var(--stone-300); max-width: 44ch; }

.contact-left { display: grid; gap: var(--sp-6); }

.contact-meta {
  display: grid;
  gap: 0;
  margin-top: var(--sp-6);
  border-top: 1px solid rgba(244,239,227,0.12);
}
.contact-meta li {
  display: grid;
  grid-template-columns: 110px 1fr;
  padding: 14px 0;
  border-bottom: 1px solid rgba(244,239,227,0.12);
  gap: var(--sp-4);
  align-items: baseline;
}
.contact-meta li span:first-child {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-500);
}
.contact-meta a { color: var(--paper-soft); border-bottom: 1px solid rgba(244,239,227,0.3); padding-bottom: 1px; transition: border-color var(--t-quick); }
.contact-meta a:hover { border-bottom-color: var(--paper-soft); }

/* Form */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6) var(--sp-6);
  padding: var(--sp-10);
  background: rgba(244,239,227,0.04);
  border: 1px solid rgba(244,239,227,0.12);
  border-radius: 16px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-300);
}
.field input,
.field textarea,
.field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(244,239,227,0.25);
  color: var(--paper-soft);
  padding: 10px 0;
  font-size: 15px;
  font-family: var(--font-sans);
  transition: border-color var(--t-quick);
  border-radius: 0;
}
.field textarea { resize: vertical; min-height: 120px; padding-top: 12px; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(244,239,227,0.35); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 0;
  border-bottom-color: var(--paper-soft);
}

.select-wrap { position: relative; }
.select-wrap svg {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  color: var(--stone-300);
  pointer-events: none;
}
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding-right: 22px;
}
.select-wrap select option { background: var(--ink); color: var(--paper-soft); }

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}
.form-note {
  font-size: 13px;
  color: var(--stone-300);
}
.form-note a {
  color: var(--paper-soft);
  border-bottom: 1px solid rgba(244,239,227,0.3);
}
.contact-form .btn-primary {
  background: var(--paper-soft);
  color: var(--ink);
  border-color: var(--paper-soft);
}
.contact-form .btn-primary:hover { background: transparent; color: var(--paper-soft); }

@media (max-width: 720px) {
  .contact-form { grid-template-columns: 1fr; padding: var(--sp-6); }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--stone-300);
  padding-block: clamp(48px, 6vw, 80px) var(--sp-6);
}
.site-footer .brand-mark { color: var(--paper-soft); }
.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 2fr;
  gap: var(--sp-16);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid rgba(244,239,227,0.12);
}
.footer-brand { display: grid; gap: var(--sp-4); align-content: start; }
.footer-wordmark {
  font-family: var(--font-sans);
  font-size: 18px;
  letter-spacing: 0.14em;
  display: inline-flex;
  gap: 6px;
  color: var(--paper-soft);
}
.footer-brand .bw-light { color: var(--stone-500); }
.footer-brand .bw-bold  { color: var(--paper-soft); }
.footer-blurb {
  color: var(--stone-500);
  line-height: 1.55;
  max-width: 38ch;
  margin-top: var(--sp-2);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}
.footer-cols h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-soft);
  margin-bottom: var(--sp-4);
  font-weight: 500;
}
.footer-cols ul { display: grid; gap: 10px; }
.footer-cols li, .footer-cols a {
  font-size: 14px;
  color: var(--stone-500);
  transition: color var(--t-quick);
}
.footer-cols a:hover { color: var(--paper-soft); }

.footer-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding-top: var(--sp-6);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone-500);
}

@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1fr; gap: var(--sp-10); }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Motion — reveal on enter ---------- */
.reveal { opacity: 1; }

@supports (animation-timeline: view()) {
  .reveal {
    opacity: 0;
    animation: reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }
}

@keyframes reveal-in {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; }
}

/* =============================================================
   SPACE + MOVEMENT PASS
   Restrained. Elegant. Bleeds between sections, widens breath,
   whispers the accent a touch further.
   ============================================================= */

/* --- More breathing room around section heads --- */
@media (min-width: 861px) {
  .section-head {
    padding-block: clamp(72px, 8vw, 128px) clamp(40px, 5vw, 72px);
  }
  .section-head .h-display { max-width: 18ch; }
  /* Heavier vertical rhythm between cases and services rows */
  .case { padding-block: clamp(72px, 9vw, 144px); }
  .services-list li { padding-block: clamp(28px, 3vw, 44px); }
  .steps li { padding-block: clamp(28px, 3vw, 44px); }
  /* Quiet divider between cases gets proportionally more breathing room */
  .work .rule { margin-block: clamp(32px, 5vw, 80px); }
}

/* --- Tonal bleed: a very slow vertical wash across the whole page.
   Sections sit on top, unchanged; this runs beneath as a living surface.
   Gradients are wide and overlap fully so there are no visible seams. */
body::before {
  content: "";
  position: fixed;
  inset: -20vh -20vw;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(160vmax 120vmax at 20% 10%, rgba(250, 244, 226, 0.35), transparent 60%),
    radial-gradient(150vmax 120vmax at 80% 70%, rgba(200, 90, 59, 0.028), transparent 60%),
    radial-gradient(140vmax 120vmax at 40% 110%, rgba(15, 42, 31, 0.022), transparent 62%);
}

/* Make sure sections render above the wash.
   We use .site-header, main and footer explicitly to avoid bumping z on everything. */
.site-header,
main,
.site-footer { position: relative; z-index: 1; }

/* --- Soft horizontal seams between sections.
   Where one section meets the next, a wide, low-opacity warm band bleeds
   across so the transition is felt rather than seen as an edge. */
main > section + section {
  position: relative;
}
main > section + section::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 160px;
  transform: translateY(-80px);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(200, 90, 59, 0.025) 45%,
    rgba(200, 90, 59, 0.035) 50%,
    rgba(200, 90, 59, 0.025) 55%,
    transparent 100%
  );
  z-index: 0;
}
/* Keep section content above the seam */
main > section > * { position: relative; z-index: 1; }

/* --- Rule dividers: draw left-to-right on enter, whisper of accent. --- */
.rule {
  position: relative;
  border: 0;
  height: 1px;
  background: transparent;
  overflow: visible;
}
.rule::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(15, 42, 31, 0.18) 12%,
    rgba(200, 90, 59, 0.28) 50%,
    rgba(15, 42, 31, 0.18) 88%,
    transparent 100%
  );
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1100ms var(--ease-out);
}
.rule.is-drawn::before { transform: scaleX(1); }

/* --- Reveal: 10px rise + fade, staggered, restrained. --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* Stagger children of any [data-reveal-stagger] up to 8 items */
[data-reveal-stagger] > [data-reveal]:nth-child(1)  { transition-delay: 0ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(2)  { transition-delay: 70ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(3)  { transition-delay: 140ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(4)  { transition-delay: 210ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(5)  { transition-delay: 280ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(6)  { transition-delay: 340ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(7)  { transition-delay: 400ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(8)  { transition-delay: 460ms; }

/* --- Accent whispers on interactive bits --- */
.case:hover .case-meta span:first-child { color: var(--accent-ink); transition: color var(--t-base); }
.btn-link { border-bottom-color: rgba(15, 42, 31, 0.28); transition: border-bottom-color var(--t-base), color var(--t-base); }
.btn-link:hover { border-bottom-color: var(--accent-ink); color: var(--accent-ink); }
.eyebrow-dot { box-shadow: 0 0 0 0 rgba(200, 90, 59, 0.0); }

/* --- Reduced-motion safety --- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .rule::before { transform: scaleX(1); transition: none; }
  body::before { background: none; }
}