/* ============================================================================
   VERTGLOWS — GLOBAL STYLESHEET v2
   "Forest Glow" — dark forest dominant, festoon-amber accents.
   Mobile-first. Vanilla. 8px grid. WCAG 2.1 AA.
   ============================================================================ */

@import url("./tokens.css?v=6");
@import url("./reset.css?v=6");

/* PRE-LAUNCH TODO: self-host Fraunces + Inter Tight as variable WOFF2.
   Currently loaded via Google Fonts in index.html. */

/* ============================================================================
   1. BASE
   ============================================================================ */

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
}

body {
  font-feature-settings: "ss01", "kern", "liga";
  font-variation-settings: "opsz" 16;
  hanging-punctuation: first last;
  position: relative;
}

main { display: block; }

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-s);
  inset-block-start: -3rem;
  background: var(--glow);
  color: var(--paper);
  padding: var(--space-2xs) var(--space-s);
  font: 500 var(--step--1)/1 var(--font-body);
  letter-spacing: 0.04em;
  z-index: 1000;
  transition: inset-block-start var(--dur-base) var(--ease-out-expo);
}
.skip-link:focus { inset-block-start: var(--space-s); }

.container { max-inline-size: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-inline-size: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-inline-size: 96rem; margin-inline: auto; padding-inline: var(--gutter); }

/* ============================================================================
   2. TYPE PRIMITIVES
   ============================================================================ */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vert-bright);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.eyebrow::before {
  content: ""; display: inline-block;
  inline-size: 1.5rem; block-size: 1px;
  background: currentColor; opacity: 0.4;
}
.eyebrow--center {
  display: inline-flex; justify-content: center;
}
.eyebrow--center::after {
  content: ""; display: inline-block;
  inline-size: 1.5rem; block-size: 1px;
  background: currentColor; opacity: 0.4;
}

.display {
  font-family: var(--font-display);
  font-weight: 200;
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-wrap: balance;
}
.display em { font-style: italic; font-weight: 300; }

.lead {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-soft);
  max-inline-size: 38ch;
  text-wrap: pretty;
}

.body { max-inline-size: var(--measure); }

.caption {
  font-size: var(--step--1);
  font-style: italic;
  color: var(--ink-faint);
}

/* ============================================================================
   3. LAYOUT PRIMITIVES
   ============================================================================ */

.stack > * + * { margin-block-start: var(--stack-space, var(--space-s)); }
.stack--m > * + * { margin-block-start: var(--space-m); }
.stack--l > * + * { margin-block-start: var(--space-l); }
.stack--xl > * + * { margin-block-start: var(--space-xl); }

.cluster {
  display: flex; flex-wrap: wrap;
  gap: var(--cluster-space, var(--space-s));
  align-items: var(--cluster-align, center);
  justify-content: var(--cluster-justify, flex-start);
}
.cluster--center { justify-content: center; }

.section {
  padding-block: clamp(5rem, 10vw, 9rem);
}
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--loose { padding-block: clamp(7rem, 14vw, 13rem); }

.section-head--center {
  text-align: center;
  max-inline-size: 56rem;
  margin-inline: auto;
  margin-block-end: var(--space-2xl);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-m);
}

/* ============================================================================
   4. NAV
   ============================================================================ */

.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-s) var(--gutter);
  transition: background var(--dur-base) var(--ease-out-quart),
              padding var(--dur-base) var(--ease-out-quart),
              border-color var(--dur-base) var(--ease-out-quart),
              transform var(--dur-base) var(--ease-out-quart);
  border-block-end: 1px solid transparent;
}

.nav[data-scrolled="true"] {
  background: color-mix(in oklab, var(--paper) 86%, transparent);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border-block-end-color: var(--rule-soft);
  padding-block: var(--space-2xs);
}

/* Nav stays visible always — desktop AND mobile.
   No auto-hide on scroll-direction. */

.nav__brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav__items { display: none; gap: var(--space-l); align-items: center; }
.nav__items a {
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--ink) 78%, transparent);
  position: relative;
  padding-block: var(--space-2xs);
  transition: color var(--dur-quick) var(--ease-out-quart);
}
.nav__items a::after {
  content: "";
  position: absolute;
  inset-block-end: 0; inset-inline-start: 0;
  block-size: 1px; inline-size: 0;
  background: var(--ink);
  transition: inline-size var(--dur-base) var(--ease-out-expo);
}
.nav__items a:hover { color: var(--ink); }
.nav__items a:hover::after { inline-size: 100%; }

.nav__hamburger {
  display: grid; place-items: center;
  inline-size: 48px; block-size: 48px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav__hamburger-mark {
  position: relative;
  display: inline-block;
  inline-size: 22px;
  block-size: 12px;
}
.nav__hamburger-mark > span {
  position: absolute;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1.4px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out-expo),
              top var(--dur-base) var(--ease-out-expo),
              inline-size var(--dur-base) var(--ease-out-expo),
              opacity var(--dur-quick);
}
.nav__hamburger-mark > span:nth-child(1) { inset-block-start: 2px; }
.nav__hamburger-mark > span:nth-child(2) { inset-block-start: 8px; inline-size: 65%; }
.nav__hamburger:hover .nav__hamburger-mark > span:nth-child(2) { inline-size: 100%; }

/* Open state — morph into X */
.nav__hamburger[aria-expanded="true"] .nav__hamburger-mark > span:nth-child(1) {
  inset-block-start: 5px;
  transform: rotate(45deg);
}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-mark > span:nth-child(2) {
  inset-block-start: 5px;
  inline-size: 100%;
  transform: rotate(-45deg);
}

@media (min-width: 64em) {
  .nav__items { display: flex; }
  .nav__hamburger { display: none; }
}

/* ============================================================================
   MOBILE NAV DIALOG — centered editorial, smooth fade+scale on open,
   stagger reveal of children. Same dialog mechanism, all-new look.
   ============================================================================ */
.mobile-nav {
  /* fixed full-screen */
  inline-size: 100%; max-inline-size: none;
  block-size: 100svh; max-block-size: none;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;

  /* Animated open-transition (modern Chromium + Safari TP) */
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 360ms var(--ease-out-expo),
              transform 360ms var(--ease-out-expo),
              overlay 360ms var(--ease-out-expo) allow-discrete,
              display 360ms var(--ease-out-expo) allow-discrete;
}
.mobile-nav[open] {
  opacity: 1;
  transform: scale(1);
}
@starting-style {
  .mobile-nav[open] {
    opacity: 0;
    transform: scale(0.97);
  }
}
.mobile-nav::backdrop { background: var(--paper); opacity: 0; }
.mobile-nav[open]::backdrop { opacity: 0.6; }

.mobile-nav__inner {
  position: relative;
  block-size: 100%;
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: clamp(1.75rem, 6vw, 3rem);
  padding: clamp(4.5rem, 14vh, 7rem) var(--gutter) var(--space-2xl);
}

/* Close X button — top-right, big tap target, no border boxes */
.mobile-nav__close {
  position: absolute;
  inset-block-start: clamp(0.75rem, 2.2vh, 1.25rem);
  inset-inline-end: clamp(0.75rem, 4vw, 1.5rem);
  z-index: 5;
  inline-size: 48px; block-size: 48px;
  display: grid; place-items: center;
  background: transparent;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  color: var(--ink);
  border-radius: 999px;
  transition: background var(--dur-quick), transform var(--dur-quick) var(--ease-out-expo);
}
.mobile-nav__close:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); }
.mobile-nav__close:active { transform: scale(0.94); }
.mobile-nav__close:focus-visible {
  outline: 2px solid var(--vert-bright);
  outline-offset: 2px;
}
.mobile-nav__close svg { display: block; }

.mobile-nav__brand {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.75rem, 12vw, 4.5rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--ink);
  margin: 0;
}

.mobile-nav__list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  align-items: center;
  gap: clamp(0.65rem, 2.2vw, 1.1rem);
}
.mobile-nav__list li { margin: 0; }
.mobile-nav__list a {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  padding: var(--space-2xs) var(--space-s);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur-quick) var(--ease-out-quart);
}
.mobile-nav__list a:hover,
.mobile-nav__list a:focus-visible {
  border-block-end-color: var(--glow);
}

.mobile-nav__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: var(--space-l);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.mobile-nav__contact a {
  color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 0.35em;
  padding-block: var(--space-3xs);
  border-block-end: 1px solid transparent;
  transition: color var(--dur-quick), border-color var(--dur-quick);
}
.mobile-nav__contact a:hover { color: var(--ink); border-block-end-color: var(--glow); }

/* Stagger reveal — children fade-up when dialog opens */
.mobile-nav[open] .mobile-nav__inner > *,
.mobile-nav[open] .mobile-nav__list li {
  opacity: 0;
  transform: translateY(12px);
  animation: nav-stagger 600ms var(--ease-out-expo) forwards;
  animation-delay: calc(var(--i, 0) * 60ms + 180ms);
}
.mobile-nav[open] .mobile-nav__inner > .mobile-nav__brand { animation-delay: 120ms; }
.mobile-nav[open] .mobile-nav__inner > .mobile-nav__contact { animation-delay: 540ms; }
@keyframes nav-stagger {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav[open] .mobile-nav__inner > *,
  .mobile-nav[open] .mobile-nav__list li {
    opacity: 1; transform: none; animation: none;
  }
}

/* ============================================================================
   5. HERO — full-bleed, centered, BOLD
   ============================================================================ */

.hero {
  position: relative;
  min-block-size: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-3xl) var(--gutter);
  overflow: clip;
  isolation: isolate;
  color: var(--ink);
}

.hero__media {
  position: absolute; inset: 0; z-index: -3;
  overflow: clip;
}
.hero__media img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  /* Push the photograph back: cooler, darker, less saturated — copy is foreground */
  filter: saturate(0.7) contrast(1.08) brightness(0.5);
}

/* Cinematic scrim — center-anchored darkening for centered cream copy */
.hero__scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    /* center darkening for centered copy */
    radial-gradient(ellipse 70% 60% at 50% 50%, color-mix(in oklab, #000 60%, transparent) 0%, color-mix(in oklab, #000 35%, transparent) 50%, transparent 85%),
    /* edge vignette */
    radial-gradient(ellipse 130% 120% at 50% 50%, transparent 55%, color-mix(in oklab, #000 65%, transparent) 100%),
    /* sage rim-light bottom-right (the garden glows back) */
    radial-gradient(ellipse 70% 55% at 100% 100%, color-mix(in oklab, var(--vert) 18%, transparent) 0%, transparent 55%),
    /* gentle top-bottom wash */
    linear-gradient(180deg,
      color-mix(in oklab, #000 35%, transparent) 0%,
      color-mix(in oklab, #000 18%, transparent) 35%,
      color-mix(in oklab, #000 28%, transparent) 70%,
      color-mix(in oklab, #000 50%, transparent) 100%);
}

.hero__noise {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.hero__overlay {
  position: relative; z-index: 2;
  max-inline-size: 48rem;
  display: flex; flex-direction: column;
  align-items: center;
  gap: var(--space-m);
  text-align: center;
  isolation: isolate;
}
/* Soft dark backdrop pad so paragraph type holds against busy photo */
.hero__overlay::before {
  content: "";
  position: absolute;
  inset: -3rem -2rem;
  background: radial-gradient(ellipse 70% 60% at 50% 50%,
    color-mix(in oklab, #000 50%, transparent) 0%,
    color-mix(in oklab, #000 25%, transparent) 50%,
    transparent 90%);
  filter: blur(20px);
  z-index: -1;
}

.hero__overlay > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  animation: hero-rise 900ms var(--ease-out-expo) forwards;
}
.hero__overlay > *:nth-child(1) { animation-delay: 200ms; }
.hero__overlay > *:nth-child(2) { animation-delay: 360ms; }
.hero__overlay > *:nth-child(3) { animation-delay: 540ms; }
.hero__overlay > *:nth-child(4) { animation-delay: 720ms; }
@keyframes hero-rise { to { opacity: 1; transform: translate3d(0, 0, 0); } }

.hero__eyebrow {
  font-family: var(--font-body);
  font-size: clamp(0.6rem, 0.55rem + 0.18vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ink) 80%, transparent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-block-end: 0;
}
.hero__eyebrow::before, .hero__eyebrow::after {
  content: ""; display: inline-block;
  inline-size: 1.75rem; block-size: 1px;
  background: var(--glow);
  opacity: 0.6;
}

.hero__h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.75rem, 1.6rem + 4.2vw, 5.25rem);
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--ink);
  text-shadow: 0 2px 24px color-mix(in oklab, #000 40%, transparent);
  margin-block: 0;
}

.hero__sub {
  font-family: var(--font-body);
  font-size: clamp(0.81rem, 0.78rem + 0.16vw, 0.95rem);
  font-weight: 300;
  line-height: 1.55;
  color: color-mix(in oklab, var(--ink) 88%, transparent);
  max-inline-size: 46ch;
  text-shadow: 0 1px 12px color-mix(in oklab, #000 60%, transparent);
  margin-block: 0;
  text-wrap: pretty;
}
.hero__sub > span { display: inline; }
/* First sentence: keep on one line so it breaks neatly at the period.
   Second sentence then flows naturally as continuous paragraph text. */
.hero__sub > span:first-child {
  white-space: nowrap;
}

.hero__cta {
  display: flex; flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
  justify-content: center;
  margin-block-start: var(--space-2xs);
}

/* Hero CTAs use the default --primary (white) and --ghost (cream outline) */

@keyframes rule-draw { to { transform: scaleX(1); } }

.hero__plate-num {
  position: absolute;
  inset-block-end: var(--space-l); inset-inline-start: var(--gutter);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ink) 50%, transparent);
  z-index: 1;
  display: flex; align-items: center; gap: var(--space-xs);
}
.hero__plate-num::before {
  content: ""; inline-size: 1.5rem; block-size: 1px;
  background: var(--glow); opacity: 0.6;
}

.hero__plate-cite {
  position: absolute;
  inset-block-end: var(--space-l); inset-inline-end: var(--gutter);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--step--1);
  color: color-mix(in oklab, var(--ink) 50%, transparent);
  z-index: 1;
}

.hero__scroll-cue {
  position: absolute;
  inset-block-end: var(--space-m);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ink) 60%, transparent);
  z-index: 1;
  animation: scroll-pulse 2.4s var(--ease-out-quart) infinite;
}
@keyframes scroll-pulse {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
  50% { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

@media (max-width: 48em) {
  .hero__plate-num, .hero__plate-cite, .hero__scroll-cue { display: none; }
}

/* ============================================================================
   6. BUTTONS
   ============================================================================ */

.btn {
  --mx: 0px; --my: 0px;
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: var(--space-2xs);
  padding: 1.05em 1.85em;
  min-block-size: 56px;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform 220ms var(--ease-spring),
              background 180ms var(--ease-emil-out),
              color 180ms var(--ease-emil-out),
              box-shadow 220ms var(--ease-emil-out);
  text-align: center;
  white-space: nowrap;
  /* Promote to compositor — eliminates paint on hover */
  will-change: transform;
}

.btn--primary {
  background: var(--glow);
  color: var(--paper);
  transform: translate(var(--mx), var(--my));
  box-shadow: 0 8px 32px -8px color-mix(in oklab, var(--glow) 50%, transparent);
}
.btn--primary:hover {
  background: var(--glow-soft);
  box-shadow: 0 12px 40px -8px color-mix(in oklab, var(--glow) 60%, transparent);
}

.btn--ink {
  background: var(--ink);
  color: var(--paper);
  transform: translate(var(--mx), var(--my));
}
.btn--ink:hover { background: color-mix(in oklab, var(--ink) 90%, var(--glow)); }

.btn--vert {
  background: var(--vert);
  color: var(--ink);
}
.btn--vert:hover { background: var(--vert-mid); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 50%, transparent);
}
.btn--ghost:hover {
  box-shadow: inset 0 0 0 1px var(--ink);
  background: color-mix(in oklab, var(--ink) 8%, transparent);
}

.btn--lg { padding: 1.3em 2.4em; font-size: var(--step-1); min-block-size: 64px; }

/* Inline icon (Instagram + others). Uses currentColor so it picks up button color. */
.icon-ig {
  inline-size: 1.15em;
  block-size: 1.15em;
  flex-shrink: 0;
  margin-inline-end: 0.15em;
  vertical-align: -0.18em;
  display: inline-block;
}

/* ============================================================================
   7. TICKER MARQUEE — services scrolling, on a vert band
   ============================================================================ */

.ticker {
  background: var(--paper-deep);
  color: var(--ink);
  padding-block: var(--space-l);
  overflow: hidden;
  border-block-end: 1px solid var(--rule-soft);
  border-block-start: 1px solid var(--rule-soft);
}

.ticker__track {
  display: flex;
  gap: 4rem;
  white-space: nowrap;
  animation: ticker-scroll 38s linear infinite;
  width: max-content;
}
.ticker__track > span {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-3);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ticker__track > span em {
  font-style: italic;
  color: var(--glow);
  margin-inline: 0.5rem;
}
.ticker__track > span.dot {
  color: var(--vert-bright);
  font-style: italic;
}
@keyframes ticker-scroll {
  to { transform: translate3d(-50%, 0, 0); }
}
.ticker:hover .ticker__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* ============================================================================
   8. STATS BAR
   ============================================================================ */

.stats {
  background: var(--paper);
  padding-block: clamp(4rem, 8vw, 7rem);
  padding-inline: var(--gutter);
}

.stats__grid {
  max-inline-size: var(--container-max);
  margin-inline: auto;
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
}

.stat {
  display: flex; flex-direction: column;
  gap: var(--space-2xs);
  padding-block: var(--space-m);
  border-block-start: 1px solid var(--rule);
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 8vw, 6rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.stat__num em {
  font-style: italic; color: var(--glow);
}
.stat__label {
  font-size: var(--step-0);
  color: var(--ink-soft);
  font-weight: 400;
  line-height: 1.4;
  max-inline-size: 28ch;
}
.stat__sub {
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vert-bright);
  margin-block-start: var(--space-2xs);
}

@media (min-width: 48em) {
  .stats__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); }
}

/* ============================================================================
   9. SERVICES — 4 cards, photo-led
   ============================================================================ */

.services {
  background: var(--paper-deep);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(5rem, 10vw, 9rem);
  padding-inline: var(--gutter);
}

/* Editorial alternating rows — image left/right, copy on the other side */
.services__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: clamp(2.5rem, 6vw, 6rem);
  margin-block-start: clamp(3rem, 6vw, 5rem);
}

.srow { display: block; }
.srow__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out-expo);
}

.srow__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper-bright);
}
.srow__media img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
  transition: transform 1400ms var(--ease-out-expo), filter var(--dur-base) var(--ease-out-quart);
}
.srow__inner:hover .srow__media img {
  transform: scale(1.04);
  filter: saturate(1.02) contrast(1.04);
}

.srow__body {
  display: flex; flex-direction: column;
  gap: var(--space-m);
  max-inline-size: 48ch;
}

.srow__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1;
  color: var(--vert-bright);
  letter-spacing: -0.04em;
}

.srow__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--ink);
  text-wrap: balance;
}
.srow__title em { font-style: italic; color: var(--glow); }

.srow__detail {
  font-size: var(--step-0);
  color: var(--ink-soft);
  line-height: 1.6;
  max-inline-size: 56ch;
}

.srow__cta {
  margin-block-start: var(--space-2xs);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--glow);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  text-transform: uppercase;
  padding-block: var(--space-2xs);
  border-block-end: 1px solid color-mix(in oklab, var(--glow) 40%, transparent);
  align-self: flex-start;
  transition: border-color var(--dur-base) var(--ease-out-quart);
}
.srow__cta::after {
  content: "→";
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.srow__inner:hover .srow__cta { border-block-end-color: var(--glow); }
.srow__inner:hover .srow__cta::after { transform: translateX(6px); }

@media (min-width: 64em) {
  .srow__inner {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 6rem);
  }
  .srow__media { aspect-ratio: 5 / 4; }
  .srow--reverse .srow__media { order: 2; }
}

/* ============================================================================
   9.5. ABOUT — owner's voice, editorial paragraph
   ============================================================================ */

.about {
  background: var(--paper);
  padding-block: clamp(6rem, 12vw, 10rem);
  padding-inline: var(--gutter);
}

.about__inner {
  max-inline-size: 56rem;
  margin-inline: auto;
  text-align: center;
}

.about__head {
  margin-block-end: var(--space-xl);
}

.about__h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-5);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  text-wrap: balance;
  margin-block-start: var(--space-m);
}
.about__h2 em { font-style: italic; color: var(--vert-bright); }

.about__body p {
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-inline-size: 60ch;
  margin-inline: auto;
}
.about__body p + p { margin-block-start: var(--space-m); }

.about__close {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--step-2);
  color: var(--ink) !important;
  margin-block-start: var(--space-l) !important;
}

.about__cta {
  display: flex; flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: center;
  align-items: center;
  margin-block-start: var(--space-xl);
}

/* ============================================================================
   10. BEFORE/AFTER block
   ============================================================================ */

.ba {
  background: var(--paper);
  padding-block: clamp(5rem, 10vw, 9rem);
  padding-inline: var(--gutter);
}

/* Drag-to-reveal slider — interactive before/after experience */
.ba-slider {
  position: relative;
  max-inline-size: 78rem;
  margin: clamp(2rem, 5vw, 4rem) auto 0;
  aspect-ratio: 4 / 3;
  max-block-size: 70svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper-deep);
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
@media (max-width: 47.99em) {
  .ba-slider {
    aspect-ratio: 3 / 4;
    max-block-size: 75svh;
  }
}
@media (min-width: 64em) {
  .ba-slider {
    aspect-ratio: 16 / 10;
    max-block-size: 75svh;
    /* Width caps when height-constrained */
    inline-size: min(100%, calc(75svh * 16/10));
  }
}

.ba-slider__before,
.ba-slider__after {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.ba-slider__after { z-index: 1; }
.ba-slider__before {
  z-index: 2;
  /* Clip from the right edge based on --pos */
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  /* Hint browser to composite this layer for GPU-accelerated reveals */
  will-change: clip-path;
}

.ba-slider__label {
  position: absolute;
  z-index: 4;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: var(--space-2xs) var(--space-s);
  pointer-events: none;
}
.ba-slider__label--before {
  inset-block-start: var(--space-m);
  inset-inline-start: var(--space-m);
}
.ba-slider__label--after {
  inset-block-start: var(--space-m);
  inset-inline-end: var(--space-m);
}

/* Vertical divider line at --pos (decorative only — pointer-events none) */
.ba-slider__line {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--pos);
  inline-size: 2px;
  background: var(--glow);
  transform: translateX(-1px);
  z-index: 3;
  pointer-events: none;
  will-change: inset-inline-start;
}

/* Visible draggable handle — real button, keyboard-accessible.
   pointer-events: none so the slider surface gets all input. */
.ba-slider__handle {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--pos);
  transform: translate(-50%, -50%);
  inline-size: 3.5rem; block-size: 3.5rem;
  border-radius: 999px;
  background: var(--glow);
  border: 0;
  display: grid; place-items: center;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  box-shadow: 0 8px 24px -8px color-mix(in oklab, #000 60%, transparent),
              0 0 0 4px color-mix(in oklab, var(--paper) 90%, transparent);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--ink);
  line-height: 1;
  z-index: 4;
  pointer-events: none; /* events handled by slider; keyboard still works via focus */
  cursor: ew-resize;
  will-change: inset-inline-start;
  transition: transform var(--dur-base) var(--ease-out-expo),
              box-shadow var(--dur-base) var(--ease-out-quart);
}
.ba-slider__handle:focus-visible {
  pointer-events: auto; /* allow keyboard interaction */
  outline: 3px solid var(--glow);
  outline-offset: 6px;
  box-shadow: 0 8px 24px -8px color-mix(in oklab, #000 60%, transparent),
              0 0 0 6px color-mix(in oklab, var(--paper) 95%, transparent);
}
.ba-slider__handle > span {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.ba-slider__handle > span:first-child { padding-inline-end: 0.15em; }
.ba-slider__handle > span:last-child { padding-inline-start: 0.15em; }
.ba-slider:hover .ba-slider__handle > span:first-child { transform: translateX(-2px); }
.ba-slider:hover .ba-slider__handle > span:last-child { transform: translateX(2px); }

/* Active drag state — handle pulses slightly */
.ba-slider.is-dragging .ba-slider__handle {
  transform: translate(-50%, -50%) scale(1.06);
}

/* Subtle hint that the slider is interactive — not just a static image */
.ba-slider {
  cursor: ew-resize;
}
.ba-slider * { cursor: inherit; }

/* ============================================================================
   11. WORK CAROUSEL — auto-scroll horizontal photo gallery
   ============================================================================ */

.work {
  background: var(--paper-deep);
  padding-block: 0;
  overflow: hidden;
}
.work__rail { padding-block: var(--space-l); }

.work__head {
  padding-inline: var(--gutter);
  margin-block-start: var(--space-2xl);
  margin-block-end: 0;
}

.work__rail {
  display: flex;
  gap: var(--space-m);
  padding-block-end: var(--space-l);
  padding-inline-start: var(--gutter);
  width: max-content;
}

/* Always auto-scroll on every viewport. Never pauses — fully continuous. */
@media (prefers-reduced-motion: no-preference) {
  .work__rail--auto {
    animation: rail-scroll 70s linear infinite;
    will-change: transform;
    /* Force a GPU compositor layer so the long-running translate stays smooth
       and individual card images don't repaint as they cross subpixel grid. */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    /* Isolate paint so card crossings don't invalidate the rest of the page */
    contain: layout paint;
  }
}
@keyframes rail-scroll {
  to { transform: translate3d(calc(-50% - var(--space-m) / 2), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .work__rail--auto { animation: none; }
}

.work__card {
  flex: 0 0 auto;
  inline-size: clamp(20rem, 40vw, 32rem);
  scroll-snap-align: center;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-bright);
}

.work__card--portrait {
  aspect-ratio: 3 / 4;
  inline-size: clamp(15rem, 28vw, 24rem);
}

.work__card img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  /* Steady state — no hover scale/filter transitions on auto-scrolling cards.
     Hover effects on a continuously moving rail cause flicker as cards pass
     under the cursor and trigger half-finished transition reversals. */
  filter: saturate(0.95) brightness(0.95);
}

.work__card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, color-mix(in oklab, #000 60%, transparent) 100%);
  pointer-events: none;
}

.work__card-label {
  position: absolute;
  inset-block-end: var(--space-m); inset-inline-start: var(--space-m);
  z-index: 1;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.work__card-meta {
  position: absolute;
  inset-block-end: var(--space-m); inset-inline-end: var(--space-m);
  z-index: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-0);
  color: var(--ink);
}

/* ============================================================================
   12. PROCESS — 3 numbered stages
   ============================================================================ */

.process {
  background: var(--paper);
  padding-block: clamp(6rem, 12vw, 10rem);
  padding-inline: var(--gutter);
}

.process__head {
  max-inline-size: 56rem;
  margin-inline: auto;
  text-align: center;
  margin-block-end: clamp(4rem, 8vw, 7rem);
  display: flex; flex-direction: column;
  align-items: center; gap: var(--space-m);
}

/* Compact 4-column grid — concise step cards side by side */
.stepper {
  max-inline-size: var(--container-max);
  margin-inline: auto;
  display: grid;
  gap: var(--space-m);
  list-style: none;
  padding: 0;
  grid-template-columns: 1fr;
  counter-reset: step;
  position: relative;
}

@media (min-width: 48em) { .stepper { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) {
  .stepper {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
}

.step {
  position: relative;
  background: var(--paper-soft);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex; flex-direction: column;
  gap: var(--space-s);
  border-block-start: 1.5px solid var(--vert-bright);
  transition: background var(--dur-base) var(--ease-out-quart),
              transform var(--dur-base) var(--ease-out-expo);
}
.step:hover {
  background: var(--paper-bright);
  transform: translateY(-4px);
}

@media (min-width: 64em) {
  .step:not(:last-child) {
    border-inline-end: 1px solid var(--rule);
  }
  .step:hover {
    transform: translateY(-2px);
    z-index: 2;
  }
}

/* Hide rail wrapper element (used in old vertical layout) */
.step__rail { display: none; }

/* Stepper progress indicator — mobile only (auto-cycling pattern) */
.stepper-progress { display: none; }
@media (max-width: 47.99em) {
  .stepper-progress { display: flex; }
}

.step__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.75rem, 5vw, 4rem);
  line-height: 0.95;
  color: var(--vert-bright);
  letter-spacing: -0.04em;
  transition: color var(--dur-base) var(--ease-out-quart);
}
.step:hover .step__num { color: var(--glow); }

.step__content {
  display: flex; flex-direction: column;
  gap: var(--space-2xs);
}

.step__time {
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vert-bright);
  margin: 0;
}

.step__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  text-wrap: balance;
  margin-block-start: var(--space-xs);
}
.step__title em { font-style: italic; color: var(--glow); }

.step__detail {
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.55;
  margin-block-start: var(--space-2xs);
}

/* Hide the proof line in the compact grid for cleaner cards */
.step__proof { display: none; }

/* ============================================================================
   13. TESTIMONIAL — pull-quote
   ============================================================================ */

/* ============================================================================
   13. REVIEWS — featured pull-quote + 2x2 grid of 5-star reviews
   ============================================================================ */

.reviews {
  background: var(--paper-deep);
  color: var(--ink);
  padding-block: clamp(6rem, 12vw, 11rem);
  padding-inline: var(--gutter);
  position: relative;
  overflow: clip;
}

.reviews__head {
  max-inline-size: 56rem;
  margin-inline: auto;
  text-align: center;
  margin-block-end: clamp(3rem, 6vw, 5rem);
  display: flex; flex-direction: column;
  align-items: center; gap: var(--space-m);
}

.reviews__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  margin-block-start: var(--space-s);
}
.reviews__rating-text {
  font-size: var(--step--1);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.reviews__rating-text strong { color: var(--ink); font-weight: 600; }

/* Star glyphs */
.stars {
  display: inline-block;
  font-size: var(--step-1);
  letter-spacing: 0.12em;
  color: var(--glow);
  line-height: 1;
  font-family: ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
}
.stars--lg {
  font-size: var(--step-3);
  letter-spacing: 0.16em;
}

/* Continuous auto-scrolling reviews carousel */
.reviews__rail-wrap {
  margin-block-start: clamp(2rem, 5vw, 4rem);
  margin-inline: calc(var(--gutter) * -1);
  overflow: hidden;
  /* Soft fade on the edges so cards seem to emerge/disappear */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.reviews__rail {
  display: flex;
  gap: var(--space-m);
  list-style: none;
  padding-inline: var(--gutter);
  margin: 0;
  width: max-content;
}

@media (prefers-reduced-motion: no-preference) {
  .reviews__rail {
    animation: reviews-scroll 80s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    contain: layout paint;
  }
}
/* Never pauses — fully continuous on desktop and mobile. */
@keyframes reviews-scroll {
  to { transform: translate3d(calc(-50% - var(--space-m) / 2), 0, 0); }
}

.review {
  flex: 0 0 auto;
  inline-size: clamp(18rem, 28vw, 26rem);
  background: var(--paper-bright);
  padding: var(--space-l);
  display: flex; flex-direction: column;
  gap: var(--space-m);
  transition: background var(--dur-base) var(--ease-out-quart),
              transform var(--dur-base) var(--ease-out-expo);
  position: relative;
  border-block-start: 2px solid var(--vert);
}
.review:hover {
  background: color-mix(in oklab, var(--paper-bright) 80%, var(--vert));
  transform: translateY(-4px);
}

.review__quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: -0.005em;
  hanging-punctuation: first last;
  margin: 0;
  flex: 1;
}
.review__quote em { font-style: italic; color: var(--glow); }

.review__cite {
  display: flex; flex-direction: column;
  gap: var(--space-3xs);
  font-style: normal;
  padding-block-start: var(--space-s);
  border-block-start: 1px solid var(--rule);
}
.review__cite strong {
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--ink);
}
.review__cite span {
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vert-bright);
}

/* ============================================================================
   14. AREAS COVERED
   ============================================================================ */

.areas {
  background: var(--paper);
  padding-block: clamp(5rem, 10vw, 9rem);
  padding-inline: var(--gutter);
}

.areas__head {
  max-inline-size: 56rem;
  margin-inline: auto;
  text-align: center;
  margin-block-end: var(--space-2xl);
}

.areas__list {
  max-inline-size: var(--container-narrow);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xs) var(--space-l);
  text-align: center;
}
.areas__list li {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  color: var(--ink-soft);
  padding-block: var(--space-2xs);
  list-style: none;
  transition: color var(--dur-quick) var(--ease-out-quart);
}
.areas__list li:hover { color: var(--glow); }

/* SEO/a11y-only — list stays in DOM but visually hidden.
   Search crawlers + screen readers still see all 24 areas. */
.areas__list--sr {
  position: absolute !important;
  inline-size: 1px !important; block-size: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Typewriter rotator — single area name, types in, holds, deletes, next.
   Locked to one line so the section height never changes mid-type/delete. */
.areas__rotator {
  max-inline-size: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 0.9rem + 3.4vw, 3.5rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  padding-block: var(--space-l);
  /* Reserve exact one-line height so the cursor blink + word change never reflows */
  block-size: calc(1.1em + var(--space-l) * 2);
  overflow: clip;
  white-space: nowrap;
}
.areas__rotator-prefix {
  color: color-mix(in oklab, var(--ink) 60%, transparent);
  margin-inline-end: 0.15em;
  flex: 0 0 auto;
}
.areas__rotator-word {
  font-style: italic;
  color: var(--glow);
  white-space: pre; /* reserve space for typed text without collapse */
  min-inline-size: 1ch; /* prevent layout flicker on empty state */
  flex: 0 1 auto;
}
.areas__rotator-cursor {
  display: inline-block;
  inline-size: 0.06em;
  block-size: 0.95em;
  background: var(--glow);
  margin-inline-start: 0.06em;
  vertical-align: -0.08em;
  animation: rotator-blink 1.06s steps(2, end) infinite;
}
.areas__rotator-suffix {
  color: color-mix(in oklab, var(--ink) 70%, transparent);
  margin-inline-start: 0.05em;
}
@keyframes rotator-blink {
  0%, 49.99% { opacity: 1; }
  50%, 100%  { opacity: 0; }
}

/* Reduced motion: hide rotator, show the list */
@media (prefers-reduced-motion: reduce) {
  .areas__rotator { display: none; }
  .areas__list--sr {
    position: static !important;
    inline-size: auto !important; block-size: auto !important;
    margin: 0 auto !important; padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
  }
}

@media (min-width: 48em) {
  .areas__list { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64em) {
  .areas__list { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================================
   15. FAQ — native details
   ============================================================================ */

.faq {
  background: var(--paper-deep);
  padding-block: clamp(5rem, 10vw, 9rem);
  padding-inline: var(--gutter);
}

.faq__inner {
  max-inline-size: var(--container-max);
  margin-inline: auto;
}

.faq__head {
  text-align: center;
  margin-block-end: var(--space-2xl);
  display: flex; flex-direction: column;
  align-items: center; gap: var(--space-m);
}

/* Side-by-side 2-column grid */
.faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(2rem, 5vw, 4rem);
  border-block-start: 1px solid var(--rule);
}
@media (min-width: 64em) {
  .faq__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.faq__item {
  border-block-end: 1px solid var(--rule);
  padding-block: var(--space-m);
}

.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-l);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-2);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  padding-block: var(--space-2xs);
  min-block-size: 48px;
  align-content: center;
  transition: color var(--dur-quick) var(--ease-out-quart);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--step-3);
  color: var(--vert-bright);
  transition: transform var(--dur-base) var(--ease-out-expo), color var(--dur-base) var(--ease-out-quart);
  flex-shrink: 0; line-height: 1;
}
.faq__item[open] summary::after { transform: rotate(45deg); color: var(--glow); }
.faq__item summary:hover { color: var(--glow); }

.faq__item-body {
  padding-block-start: var(--space-m);
  font-size: var(--step-0);
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ============================================================================
   16. BEGIN — final CTA band
   ============================================================================ */

.begin {
  background: var(--paper-deep);
  color: var(--ink);
  padding-block: clamp(3rem, 5vw, 4.5rem);
  padding-inline: var(--gutter);
  position: relative;
  overflow: clip;
  text-align: center;
  isolation: isolate;
}

.begin__bg {
  position: absolute; inset: 0; z-index: -1;
  background-image: url("/images/shot-21-1600.webp");
  background-size: cover;
  background-position: center 60%;
  filter: saturate(0.55) brightness(0.22) blur(4px);
  opacity: 0.42;
}
.begin__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--paper-deep) 60%, transparent) 0%,
      color-mix(in oklab, var(--paper-deep) 92%, transparent) 100%);
}

.begin__inner {
  max-inline-size: 56rem; margin-inline: auto;
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: var(--space-m);
}

.begin__h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  text-wrap: balance;
}
.begin__h2 em { font-style: italic; color: var(--glow); }

.begin__sub {
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.5;
  color: color-mix(in oklab, var(--ink) 88%, transparent);
  max-inline-size: 50ch;
}

/* Structured contact card — compact */
.begin__contact {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-s) var(--space-l);
  margin-block-start: var(--space-l);
  margin-block-end: var(--space-2xs);
  max-inline-size: 44rem;
  inline-size: 100%;
  text-align: start;
  padding-block-start: var(--space-m);
  border-block-start: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
}
@media (min-width: 48em) {
  .begin__contact { grid-template-columns: repeat(4, 1fr); }
}

.begin__contact-item {
  display: flex; flex-direction: column;
  gap: var(--space-3xs);
}
.begin__contact-label {
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vert-bright);
}
.begin__contact-value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-0);
  color: var(--ink);
  letter-spacing: -0.005em;
  border-block-end: 1px solid transparent;
  align-self: flex-start;
  transition: border-color var(--dur-base) var(--ease-out-quart);
}
a.begin__contact-value { color: var(--ink); }
a.begin__contact-value:hover { border-block-end-color: var(--glow); color: var(--glow); }

.begin__cta {
  display: flex; flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: center;
  align-items: center;
  margin-block-start: var(--space-m);
}

/* ============================================================================
   17. FOOTER
   ============================================================================ */

/* ============================================================================
   17. FOOTER — editorial finale, oversized wordmark, photo backdrop
   ============================================================================ */
.footer {
  background: #060B07;
  color: var(--ink);
  padding-block: clamp(2.5rem, 4vw, 4rem) 0;
  padding-inline: var(--gutter);
  position: relative;
  overflow: clip;
  isolation: isolate;
}

/* Soft photo backdrop, blurred + dimmed */
.footer__bg {
  position: absolute; inset: 0; z-index: -2;
  background-image: url("/images/shot-01-1600.webp");
  background-size: cover;
  background-position: center 65%;
  filter: saturate(0.55) brightness(0.18) blur(3px);
  opacity: 0.45;
}
.footer__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 100% 80% at 50% 100%, color-mix(in oklab, #000 80%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, #060B07 60%, transparent) 0%, color-mix(in oklab, #060B07 40%, transparent) 50%, color-mix(in oklab, #060B07 95%, transparent) 100%);
}
.footer__noise {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.footer__inner {
  max-inline-size: var(--container-max);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.footer__manifesto {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 1.4rem + 2.8vw, 4rem);
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--ink);
  text-wrap: balance;
  max-inline-size: 22ch;
  margin-inline: auto;
  margin-block-end: clamp(2.5rem, 5vw, 5rem);
  text-align: center;
}
.footer__manifesto em { font-style: italic; color: var(--glow); }

.footer__cols {
  display: grid;
  gap: var(--space-m);
  padding-block: clamp(1rem, 2vw, 1.75rem);
  border-block-start: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
}
@media (min-width: 48em) {
  .footer__cols { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-l); }
}

.footer__col-label {
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vert-bright);
  margin-block-end: var(--space-s);
}

.footer__nap {
  font-style: normal;
  font-size: var(--step--1);
  color: color-mix(in oklab, var(--ink) 82%, transparent);
  line-height: 1.6;
}
.footer__nap a {
  color: var(--ink);
  border-block-end: 1px solid color-mix(in oklab, var(--ink) 24%, transparent);
  transition: border-color var(--dur-quick) var(--ease-out-quart),
              color var(--dur-quick) var(--ease-out-quart);
}
.footer__nap a:hover { border-block-end-color: var(--glow); color: var(--glow); }

/* Studio block — clean brand + contact list separation */
.footer__studio { font-style: normal; }
.footer__brand {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 var(--space-m);
  padding-block-end: var(--space-s);
  border-block-end: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
}
.footer__contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.footer__contact li { margin: 0; }
.footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--step--1);
  color: color-mix(in oklab, var(--ink) 82%, transparent);
  border-block-end: 1px solid transparent;
  transition: color var(--dur-quick), border-color var(--dur-quick);
  padding-block: var(--space-3xs);
}
.footer__contact a:hover {
  color: var(--ink);
  border-block-end-color: var(--glow);
}

.footer__nav { display: flex; flex-direction: column; gap: var(--space-2xs); }
.footer__nav a {
  color: color-mix(in oklab, var(--ink) 82%, transparent);
  padding-block: var(--space-3xs);
  font-size: var(--step--1);
  transition: color var(--dur-quick), transform var(--dur-base) var(--ease-out-expo);
  display: inline-block;
  align-self: flex-start;
}
.footer__nav a:hover { color: var(--glow); transform: translateX(4px); }

/* Oversized wordmark — editorial finale, restrained */
.footer__wordmark {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 7vw, 6.5rem);
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: var(--ink);
  text-decoration: none;
  margin-block-start: clamp(1rem, 2vw, 1.75rem);
  margin-block-end: clamp(1rem, 2vw, 1.5rem);
  white-space: nowrap;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--ink) 90%, transparent) 0%,
    color-mix(in oklab, var(--ink) 35%, transparent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  user-select: none;
  pointer-events: none;
  text-align: center;
}

.footer__base {
  padding-block: var(--space-m);
  border-block-start: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
  display: flex; flex-wrap: wrap; gap: var(--space-m);
  justify-content: space-between; align-items: baseline;
  font-size: var(--step--2);
  color: color-mix(in oklab, var(--ink) 55%, transparent);
}
.footer__base a {
  color: inherit;
  border-block-end: 1px solid color-mix(in oklab, var(--ink) 24%, transparent);
  transition: color var(--dur-quick), border-color var(--dur-quick);
}
.footer__base a:hover { color: var(--glow); border-block-end-color: var(--glow); }

/* ============================================================================
   18. STICKY MOBILE CTA BAR
   ============================================================================ */

.sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  z-index: 50;
  background: var(--paper);
  border-block-start: 1px solid var(--rule);
  transform: translateY(0);
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.sticky-cta__btn {
  display: grid; place-items: center;
  min-block-size: 64px;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  border-inline-end: 1px solid var(--rule);
}
.sticky-cta__btn:last-child { border-inline-end: none; }
.sticky-cta__btn--primary {
  background: var(--glow);
  color: var(--paper);
  font-weight: 500;
}

@media (min-width: 64em) { .sticky-cta { display: none; } }
/* Sticky CTA removed — no bottom padding needed */

/* ============================================================================
   19. GRAIN OVERLAY — site-wide film grain
   ============================================================================ */

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ============================================================================
   20. MOTION — scroll-driven reveal
   ============================================================================ */

[data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); will-change: opacity, transform; }

@supports (animation-timeline: view()) {
  [data-reveal] {
    animation: reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
}

@supports not (animation-timeline: view()) {
  [data-reveal] {
    transition: opacity 700ms var(--ease-emil-out),
                transform 700ms var(--ease-emil-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  [data-reveal].is-in-view { opacity: 1; transform: translate3d(0, 0, 0); will-change: auto; }
}

@keyframes reveal-up { to { opacity: 1; transform: translate3d(0, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; animation: none; }
  .hero__h1 em::after { animation: none; transform: scaleX(1); }
  .hero__overlay > * { opacity: 1; transform: none; animation: none; }
  .ticker__track { animation: none; }
}

/* ============================================================================
   21. SECTION HEAD (centered variant)
   ============================================================================ */

.section-head--center .eyebrow { color: var(--vert-bright); }

.section-head__display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-5);
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--ink);
  text-wrap: balance;
}
.section-head__display em { font-style: italic; color: var(--glow); }

.section-head__lede {
  font-size: var(--step-1);
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.5;
  max-inline-size: 50ch;
  text-wrap: pretty;
}

/* ============================================================================
   22. MOBILE POLISH — comprehensive overrides for <48em
   Goal: tighter rhythm, smaller heads, every tap target ≥48px.
   ============================================================================ */
@media (max-width: 47.99em) {

  /* ---------- HERO ---------- */
  .hero__h1 { line-height: 0.95; }
  .hero__sub { max-inline-size: 32ch; }
  .hero__cta { gap: var(--space-2xs); flex-direction: column; align-items: stretch; inline-size: 100%; max-inline-size: 18rem; }
  .hero__cta .btn { inline-size: 100%; min-block-size: 52px; padding: 0.85em 1.5em; font-size: var(--step-0); }

  /* ---------- WORK CAROUSEL — uniform card sizes on mobile ---------- */
  .work__rail { gap: var(--space-s); padding-block: var(--space-m); }
  .work__card,
  .work__card--portrait {
    inline-size: 78vw;
    max-inline-size: 20rem;
    aspect-ratio: 4 / 3;
  }

  /* ---------- SERVICES — editorial horizontal compact rows on mobile ----
     Square thumbnail on the LEFT, content on the right.
     Reads like a print magazine table of contents.                       */
  .services { padding-block: clamp(2.5rem, 5vw, 4rem); }
  .services__list {
    gap: 0;
    margin-block-start: var(--space-l);
    border-block-start: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
  }
  .srow {
    border-block-end: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
    padding-block: var(--space-m);
  }
  .srow__inner {
    grid-template-columns: clamp(6.5rem, 28vw, 8rem) 1fr;
    grid-template-rows: auto;
    gap: var(--space-m);
    align-items: start;
  }
  /* Always image LEFT on mobile — override desktop reverse */
  .srow--reverse .srow__media { order: 0; }
  .srow__media {
    aspect-ratio: 1 / 1;
    align-self: start;
  }
  .srow__body {
    gap: var(--space-2xs);
    padding-block-start: var(--space-3xs);
  }
  /* Numeral inline above title — tight + editorial */
  .srow__num {
    font-size: 1rem;
    line-height: 1;
    color: var(--vert-bright);
    margin-block-end: var(--space-3xs);
    letter-spacing: 0;
  }
  .srow__title {
    font-size: 1.15rem;
    line-height: 1.1;
    letter-spacing: -0.015em;
  }
  .srow__detail {
    font-size: 0.825rem;
    line-height: 1.5;
    color: color-mix(in oklab, var(--ink) 75%, transparent);
    /* Clamp to ~3 lines for visual rhythm — body keeps reading without bloating */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .srow__cta {
    font-size: 0.65rem;
    padding-block: 0;
    margin-block-start: var(--space-2xs);
    border-block-end: none;
    color: var(--glow);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .srow__cta::after { font-size: 0.85rem; margin-inline-start: 0.2em; }

  .section-head--center { margin-block-end: var(--space-l); }
  .section-head__display { font-size: clamp(1.75rem, 7vw, 2.5rem); line-height: 1; }
  .section-head__lede { font-size: var(--step-0); line-height: 1.5; }

  /* ---------- ABOUT ---------- */
  .about { padding-block: clamp(3rem, 6vw, 5rem); }
  .about__head { margin-block-end: var(--space-m); }
  .about__h2 {
    font-size: clamp(1.5rem, 6vw, 2rem);
    margin-block-start: var(--space-s);
    line-height: 1.05;
  }
  .about__body p { font-size: var(--step-0); line-height: 1.55; }
  .about__body p + p { margin-block-start: var(--space-s); }
  .about__close { font-size: var(--step-1) !important; margin-block-start: var(--space-m) !important; }
  .about__cta { margin-block-start: var(--space-l); flex-direction: column; align-items: stretch; }
  .about__cta .btn { inline-size: 100%; }

  /* ---------- BEFORE / AFTER SLIDER ---------- */
  .ba { padding-block: clamp(3rem, 6vw, 5rem); }
  .ba-slider {
    aspect-ratio: 4 / 5; /* slightly less tall than 3/4 — fits more on screen */
    max-block-size: 70svh;
    margin-block-start: var(--space-l);
  }
  .ba-slider__handle {
    inline-size: 3.75rem; block-size: 3.75rem;
    font-size: 1.5rem;
    box-shadow: 0 8px 20px -6px color-mix(in oklab, #000 50%, transparent),
                0 0 0 4px color-mix(in oklab, var(--paper) 88%, transparent);
  }
  .ba-slider__label {
    font-size: 0.65rem;
    padding: var(--space-3xs) var(--space-2xs);
  }

  /* ---------- PROCESS / HOW IT WORKS — auto-cycling stepper on mobile ----
     One card visible at a time, smooth horizontal slide between steps,
     line-tick progress indicator below.                                  */
  .process {
    padding-block: clamp(3rem, 6vw, 5rem);
    overflow: hidden;
  }
  .process__head { margin-block-end: var(--space-l); }
  .process__viewport {
    position: relative;
    overflow: hidden;
    inline-size: 100%;
  }
  .stepper {
    /* Stop being a grid — become a horizontal track */
    grid-template-columns: none !important;
    display: flex;
    flex-wrap: nowrap;
    gap: 0 !important;
    inline-size: 400%;
    will-change: transform;
    animation: stepper-cycle 24s linear infinite;
  }

  .step {
    /* Each step takes exactly 1/4 of the 400% wide track = 100% viewport */
    flex: 0 0 25%;
    box-sizing: border-box;
    padding: var(--space-l) var(--space-m);
    gap: var(--space-2xs);
    border-block-start: 1.5px solid var(--vert-bright);
    /* Soft fade-in/out as it scrolls into view */
    transition: opacity 600ms var(--ease-out-quart);
  }
  .step__num { font-size: 3rem; line-height: 0.95; }
  .step__time { font-size: 0.7rem; }
  .step__title { font-size: 1.3rem; line-height: 1.1; margin-block-start: var(--space-xs); }
  .step__detail {
    font-size: var(--step-0);
    line-height: 1.55;
    margin-block-start: var(--space-xs);
    color: color-mix(in oklab, var(--ink) 80%, transparent);
  }

  /* Progress indicator — 4 short lines, each "ticks" full during its window */
  .stepper-progress {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    margin-block-start: var(--space-l);
  }
  .stepper-progress span {
    inline-size: 28px;
    block-size: 2px;
    background: color-mix(in oklab, var(--ink) 16%, transparent);
    border-radius: 999px;
    position: relative;
    overflow: hidden;
  }
  .stepper-progress span::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 0;
    background: var(--glow);
    animation: stepper-tick 24s linear infinite;
  }
  /* Stagger the ticks 6s apart so each one fills during its card's window */
  .stepper-progress span:nth-child(1)::after { animation-delay: 0s; }
  .stepper-progress span:nth-child(2)::after { animation-delay: -18s; }
  .stepper-progress span:nth-child(3)::after { animation-delay: -12s; }
  .stepper-progress span:nth-child(4)::after { animation-delay: -6s; }

  /* Pause on tap/focus — give users control */
  .process__viewport:hover .stepper,
  .process__viewport:hover .stepper-progress span::after,
  .process__viewport:focus-within .stepper,
  .process__viewport:focus-within .stepper-progress span::after {
    animation-play-state: paused;
  }

  /* ---------- REVIEWS CAROUSEL ---------- */
  .reviews { padding-block: clamp(3rem, 6vw, 5rem); }
  .reviews__head { margin-block-end: var(--space-l); }
  .review { inline-size: 17rem; padding: var(--space-m); }
  .review__quote { font-size: var(--step--1); line-height: 1.5; }
  .review__cite strong { font-size: var(--step--1); }

  /* ---------- AREAS ---------- */
  .areas { padding-block: clamp(3rem, 6vw, 5rem); }
  .areas__head { margin-block-end: var(--space-l); }
  .areas__list { gap: var(--space-3xs) var(--space-m); }
  .areas__list li {
    font-size: var(--step-0);
    padding-block: var(--space-3xs);
  }

  /* ---------- FAQ ---------- */
  .faq { padding-block: clamp(3rem, 6vw, 5rem); }
  .faq__head { margin-block-end: var(--space-l); }
  .faq__item { padding-block: var(--space-s); }
  .faq__item summary {
    font-size: var(--step-0);
    line-height: 1.25;
    min-block-size: 48px;
  }
  .faq__item summary::after { font-size: var(--step-1); }
  .faq__item-body { padding-block-start: var(--space-s); }
  .faq__item-body p { font-size: var(--step--1); line-height: 1.55; }

  /* ---------- BEGIN / QUOTE ---------- */
  .begin { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
  .begin__inner { gap: var(--space-s); }
  .begin__h2 { font-size: clamp(1.5rem, 6.5vw, 2rem); line-height: 1.05; }
  .begin__h2 br { display: none; }
  .begin__sub { font-size: var(--step--1); }
  .begin__contact {
    gap: var(--space-xs) var(--space-m);
    padding-block-start: var(--space-s);
    margin-block-start: var(--space-m);
    margin-block-end: 0;
  }
  .begin__contact-label { font-size: 0.65rem; }
  .begin__contact-value { font-size: var(--step--1); }
  .begin__cta { flex-direction: column; align-items: stretch; gap: var(--space-2xs); inline-size: 100%; max-inline-size: 18rem; margin-block-start: var(--space-m); }
  .begin__cta .btn { inline-size: 100%; min-block-size: 52px; padding: 0.85em 1.5em; font-size: var(--step-0); }

  /* ---------- FOOTER ---------- */
  .footer { padding-block: clamp(2rem, 4vw, 3rem) 0; }
  .footer__manifesto {
    font-size: clamp(1.4rem, 6vw, 1.85rem);
    margin-block-end: var(--space-l);
    max-inline-size: 18ch;
  }
  .footer__manifesto br { display: none; }

  /* Studio full-width, then Hours / Services / Browse in a 3-col row */
  .footer__cols {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--space-s);
    row-gap: var(--space-l);
    padding-block: var(--space-m);
  }
  .footer__col:first-child {
    grid-column: 1 / -1;
    padding-block-end: var(--space-s);
    border-block-end: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  }
  .footer__col-label {
    margin-block-end: var(--space-xs);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
  }
  .footer__nap { font-size: var(--step--1); line-height: 1.5; }
  .footer__nav a {
    padding-block: var(--space-3xs);
    font-size: 0.78rem;
    line-height: 1.4;
  }
  .footer__wordmark {
    font-size: clamp(2.5rem, 14vw, 4rem);
    margin-block: var(--space-m) var(--space-s);
  }
  .footer__base {
    flex-direction: column;
    gap: var(--space-2xs);
    padding-block: var(--space-s);
    font-size: 0.7rem;
  }

  /* ---------- TESTIMONIAL (legacy, hidden but just in case) ---------- */
  .testimonial { padding-block: clamp(4rem, 8vw, 6rem); }

  /* ---------- HEADINGS GLOBAL ---------- */
  .eyebrow, .eyebrow--center { font-size: 0.65rem; letter-spacing: 0.16em; }
}

/* ============================================================================
   23. TOUCH & PERF HINTS
   ============================================================================ */
@media (hover: none) {
  /* On touch devices, kill hover-only enhancements that can leave sticky states */
  .srow__inner:hover .srow__media img,
  .service:hover .service__media img { transform: none; }
}

/* Improve scrolling smoothness on iOS for any inner-scroll containers */
.work__rail-wrap, .reviews__rail-wrap {
  -webkit-overflow-scrolling: touch;
}

/* ============================================================================
   24. KEYFRAMES — declared at top level so they're reachable from any scope
   ============================================================================ */
@keyframes stepper-cycle {
  0%,    20% { transform: translate3d(0%, 0, 0); }
  25%,   45% { transform: translate3d(-25%, 0, 0); }
  50%,   70% { transform: translate3d(-50%, 0, 0); }
  75%,   95% { transform: translate3d(-75%, 0, 0); }
  100%       { transform: translate3d(0%, 0, 0); }
}
@keyframes stepper-tick {
  0%        { inline-size: 0%; }
  20%       { inline-size: 100%; }
  25%, 100% { inline-size: 0%; }
}