/* ---------------------------------------------------------------------
   Design tokens
--------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.78);
  --surface-elevated: rgba(255, 255, 255, 0.92);
  --inverse-text: #ffffff;
  --dark-panel: #171717;
  --text: #111111;
  --text-soft: #2a2a2a;
  --muted: #666666;
  --border: rgba(0, 0, 0, 0.09);
  --border-strong: rgba(0, 0, 0, 0.16);
  /* WCAG AA text/button contrast against white requires >=4.5:1; #f0731a
     only reached ~2.9:1 (flagged sitewide by pa11y-ci/axe). Darkened to the
     nearest value that clears 4.5:1 at the same hue/saturation -- the soft
     rgba() tints below intentionally keep the original 240,115,26 since
     they're decorative fills/borders, not text or button contrast. */
  --orange: #ba540c;
  --orange-soft: rgba(240, 115, 26, 0.14);
  --orange-line: rgba(240, 115, 26, 0.22);
  --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.08);
  --shadow-color-soft: rgba(0, 0, 0, 0.08);
  --shadow-color-strong: rgba(0, 0, 0, 0.15);
  --button-shadow: 0 18px 45px rgba(240, 115, 26, 0.25);
  /* Very faint orbit-line color for large decorative circles that must
     stay in the background (Services page) -- deliberately fainter than
     --orange-line (0.22/0.26), which the hero's own circle and icon
     strokes use at a more visible weight. */
  --orbit-line: rgba(240, 115, 26, 0.12);

  /* Supporting accents for the homepage Services dashboard visuals only
     (donut/line charts, status badges) -- orange stays the one brand
     accent used everywhere else on the site; these three exist purely to
     let a chart distinguish 2-4 data series/states without borrowing
     orange (which would make "this slice is highlighted" ambiguous). */
  /* Same WCAG AA contrast fix as --orange above: #45a957 was ~3.0:1 on white. */
  --success-green: #358142;
  --success-green-soft: rgba(69, 169, 87, 0.14);
  /* Opaque equivalents of --orange-soft/--orange-line/--success-green-soft
     for the "Our Process" step-icon circles specifically: those circles
     sit directly in front of the horizontal/vertical connector line
     (.process-line), so an rgba() fill lets the line bleed through via
     alpha compositing instead of being fully masked. Precomputed as the
     rgba value flattened over this theme's --bg so the circle reads
     identically to the old translucent look while staying 100% opaque. */
  --process-node-orange-bg: #fdebdf;
  --process-node-orange-bg-hover: #fce0cd;
  --process-node-green-bg: #e5f3e7;
  --process-node-green-bg-hover: #d2ead7;
  --soft-blue: #6d8ef7;
  --soft-blue-soft: rgba(109, 142, 247, 0.14);
  --soft-purple: #9277e8;
  --soft-purple-soft: rgba(146, 119, 232, 0.14);
  --danger: #a3472f;
  --info: #2b5aa8;
  --warning: #a86b1a;
  /* Legacy alias names -- every component rule in this file was written
     against these, so repointing them here (instead of rewriting every
     consumer) is what makes the whole site theme-reactive from one place. */
  --color-white: var(--bg);
  --color-soft-white: var(--bg-soft);
  --color-ink: var(--text);
  --color-muted: var(--muted);
  --color-border: var(--border-strong);
  --border-light: var(--border);
  --border-medium: var(--border-strong);
  --color-accent: var(--orange);
  --color-accent-soft: var(--orange-soft);
  --shadow-orange: var(--button-shadow);

  --font-sans:
    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
    Arial, sans-serif;
  --font-mono:
    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --header-height: 92px;
  --transition-fast: 0.3s ease;
  --transition-medium: 0.5s ease;

  /* Premium motion tokens (design-engineering pass). Strong custom curves
     for anything entering/exiting or moving on screen -- the built-in
     `ease` is fine for simple hover/color changes (kept via
     --transition-fast/--transition-medium above) but too weak for
     deliberate reveals. See emilkowalski/skills' animation standards:
     ease-out for enter/exit, ease-in-out for on-screen movement, plain
     ease for hover/color, linear for constant motion. Never ease-in. */
  --ease-out-premium: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-premium: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

  /* Shared left edge for the logo and the hero text — change this one
     value to move both together and keep them aligned on one vertical line. */
  --content-left: clamp(24px, 7vw, 140px);

  /* Shared right-side column system for About Us + FAQ. Both
     .about-inner and .faq-inner build their grid from these same three
     values, so the About Us image and the FAQ accordion always land in
     one identical column — same start, same width — no matter which
     section it's in. Change a value here once and both sections move
     together; see the matching override a few rules below for the
     narrower tablet range. */
  --left-column-width: clamp(360px, 28vw, 460px);
  --right-column-width: clamp(620px, 42vw, 760px);
  --section-column-gap: clamp(90px, 8vw, 160px);

  /* Consistent vertical rhythm for the about.html sections — one value,
     used by every .about-page-section, instead of each section picking
     its own padding. */
  --section-padding-y: clamp(90px, 10vw, 150px);

  /* ---- Type scale ------------------------------------------------------
     Before this, every section heading picked its own one-off clamp()
     value (15+ near-duplicates: 1.6rem/2.1rem, 1.75rem/2.5rem,
     1.75rem/2.75rem, 1.875rem/2.375rem, 2.25rem/3.75rem...) with no
     shared logic connecting them. Consolidated to five deliberate levels;
     section headings that were already within ~0.15rem of each other
     (advantages/FAQ/testimonials/documents-checklist/resources/guides)
     now share --text-h2 exactly instead of each carrying its own
     near-identical value. Genuinely distinct cases (Hero, page H1s,
     card-level h3s) keep their own step on the same scale. */
  --text-display: clamp(2.75rem, 5vw, 4.5rem); /* Hero headline only */
  --text-h1: clamp(
    2.25rem,
    4vw,
    3.75rem
  ); /* Services showcase heading, page-level H1s */
  --text-h2: clamp(
    1.75rem,
    3.2vw,
    2.75rem
  ); /* Major section headings (the consolidated set above) */
  --text-h3: clamp(1.4rem, 2vw, 1.75rem); /* Subsection headings */
  --text-h4: clamp(1.25rem, 1.7vw, 1.6rem); /* Card/component-level headings */

  /* ---- Section spacing scale --------------------------------------------
     Same consolidation as the type scale above: section vertical padding
     had accumulated many near-duplicate clamp() values (70px/8vw/110px
     appeared 3 times verbatim, 80px/9vw/130px twice, 48px/6vw/80px twice)
     purely because each section was authored independently. Three
     deliberate tiers now cover those exact-duplicate cases; sections with
     a genuinely different rhythm (e.g. the About hero, which combines
     with --header-height) keep their own value. */
  --space-section-lg: clamp(
    90px,
    10vw,
    140px
  ); /* Hero-adjacent / high-impact sections */
  --space-section-md: clamp(70px, 8vw, 110px); /* Standard content sections */
  --space-section-sm: clamp(48px, 6vw, 80px); /* Compact sections */
}

/* Dark appearance is selected before first paint by theme-init.js. The
   shared aliases below carry the whole site with it; components continue
   using the same semantic tokens rather than maintaining parallel styles. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d10;
  --bg-soft: #101318;
  --surface: #14181d;
  --surface-soft: rgba(20, 24, 29, 0.82);
  --surface-elevated: rgba(24, 29, 35, 0.94);
  --text: #f3f5f7;
  --text-soft: #d7dce1;
  --muted: #9ca5af;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.17);
  --orange: #f28a3a;
  --orange-soft: rgba(240, 115, 26, 0.18);
  --orange-line: rgba(240, 115, 26, 0.32);
  --orbit-line: rgba(240, 115, 26, 0.2);
  --success-green: #71c77f;
  --success-green-soft: rgba(113, 199, 127, 0.16);
  --danger: #ff8b7a;
  --info: #7aa7ff;
  --warning: #f1b561;
  --process-node-orange-bg: #352116;
  --process-node-orange-bg-hover: #432719;
  --process-node-green-bg: #183020;
  --process-node-green-bg-hover: #1d3b27;
  --shadow-soft: 0 22px 64px rgba(0, 0, 0, 0.34);
  --shadow-color-soft: rgba(0, 0, 0, 0.28);
  --shadow-color-strong: rgba(0, 0, 0, 0.48);
  --button-shadow: 0 18px 45px rgba(0, 0, 0, 0.34);
}

html.is-theme-changing body,
html.is-theme-changing .header,
html.is-theme-changing .mobile-nav,
html.is-theme-changing section,
html.is-theme-changing article,
html.is-theme-changing button,
html.is-theme-changing a {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 260ms;
  transition-timing-function: ease;
}

/* Tablet range: shrink the shared right-column system so both sections'
   two-column grid still fits without overflowing before they stack to a
   single column below 900px (see the .about-section/.faq-section
   "@media (max-width: 900px)" blocks). */
@media (max-width: 1300px) {
  :root {
    --left-column-width: clamp(260px, 30vw, 380px);
    --right-column-width: clamp(380px, 46vw, 560px);
    --section-column-gap: clamp(32px, 5vw, 80px);
  }
}

@media (max-width: 900px) {
  :root {
    --header-height: calc(76px + env(safe-area-inset-top));
    --content-left: clamp(18px, 5vw, 32px);
    --space-section-lg: clamp(68px, 16vw, 92px);
    --space-section-md: clamp(58px, 14vw, 80px);
    --space-section-sm: clamp(44px, 11vw, 64px);
  }
}

/* ---------------------------------------------------------------------
   Reset
--------------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  width: 100%;
  /* Deliberately NOT overflow-x:hidden here -- that was tried as a
     site-wide safety net against any one section's decorative element
     (e.g. the hero's circle/glow) creating a horizontal scrollbar, but
     setting overflow-x on body/html forces the browser to compute
     overflow-y as auto (per spec: when one axis is non-visible and the
     other is "visible", the visible one becomes "auto"), which turns
     <body> into a scroll container -- and that silently breaks
     position:sticky for any descendant (like .about-sticky) that
     expects the real document/viewport to be its scrolling context. The
     hero/services/contact sections already clip their own decorative
     overflow individually (see their own overflow:hidden), so this
     global rule was redundant *and* was the actual cause of the About
     Us sticky gallery never staying pinned, which is what left a large
     blank scroll-through gap before the Reviews section. */
  background: var(--color-white);
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
}

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

ul {
  list-style: none;
}

/* ---------------------------------------------------------------------
   1. Header
--------------------------------------------------------------------- */
.header {
  --header-control-gap: clamp(14px, 1.6vw, 24px);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--content-left);
  padding-right: var(--content-left);
  background: var(--color-white);
  z-index: 200;
  /* Gently drops into place on load -- transform + opacity only,
     position:fixed already handles the real layout so this never
     touches top/height. */
  opacity: 0;
  transform: translateY(-18px);
  animation: header-drop-in 850ms var(--ease-soft) 120ms forwards;
}

@keyframes header-drop-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .header {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.header-logo-link {
  display: flex;
  align-items: center;
}

.header-logo {
  width: 265px;
  height: auto;
  display: block;
}

:root[data-theme="dark"] .header-logo {
  filter: invert(1) brightness(1.08);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--header-control-gap);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--header-control-gap);
}

.nav-link {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-muted);
  transition: color var(--transition-fast);
}

.nav-link:hover {
  color: var(--color-ink);
}

/* Current-page indicator — toggled by markActiveNavLinks() in shared.js
   on every page load (no per-page hand-editing). Same dark color the
   hover state already uses, plus a small centered orange underline below
   the label, so "you are here" reads at a glance without introducing a
   new color or a heavy full-width bar. */
.nav-link.is-active {
  color: var(--color-ink);
  font-weight: 600;
}

.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: var(--color-accent);
}

.cta-outline {
  font-size: 13px;
  font-weight: 500;
  padding: 10px 20px;
  border: 1px solid var(--color-ink);
  border-radius: 999px;
  white-space: nowrap;
  transition:
    background 180ms ease,
    color 180ms ease,
    transform 120ms ease-out;
}

.cta-outline:hover {
  background: var(--color-ink);
  color: var(--color-white);
}

.cta-outline:active {
  transform: scale(0.97);
}

/* ---- Header dropdowns (Services / For Clients) ------------------------
   One generic component reused for both header dropdowns instead of a
   copy per dropdown (see the equally-generic initNavigation() loop in
   shared.js). Opens on hover (desktop pointer) via the :hover selector
   below, and on click/tap via the "is-open" class toggled in shared.js —
   the click path is what makes this usable on touch devices and via
   keyboard, where :hover never fires.

   The trigger is split into two separate elements — .nav-dropdown-link
   (a real <a>, styled exactly like every other .nav-link) and
   .nav-dropdown-caret (a small icon-only button) — so clicking the label
   itself navigates to that dropdown's own hub page, while only the caret
   toggles the menu open/closed. */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Invisible hover bridge: .nav-dropdown-menu sits 14px below the trigger
   (see "top: calc(100% + 14px)" below) for visual breathing room, but
   that gap is empty space that belongs to neither element — moving the
   mouse straight down through it briefly leaves :hover entirely, which
   instantly drops opacity/pointer-events and makes the menu disappear
   before the cursor ever reaches it. This pseudo-element fills exactly
   that gap so the hover state never breaks mid-transit. */
.nav-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 260px;
  height: 14px;
}

.nav-dropdown-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  transition: transform 120ms ease-out;
}

.nav-dropdown-caret:active {
  transform: scale(0.88);
}

.nav-caret {
  width: 14px;
  height: 14px;
  color: var(--color-muted);
  /* Rotating in place on screen, not entering/exiting -- ease-in-out is
     the correct curve here per the emil-design-eng motion standard. */
  transition: transform 200ms var(--ease-in-out-premium);
}

.nav-dropdown:hover .nav-caret,
.nav-dropdown.is-open .nav-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 260px;
  padding: 10px;
  border-radius: 16px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 200ms var(--ease-out-premium),
    transform 200ms var(--ease-out-premium);
  z-index: 210;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-ink);
}

.nav-dropdown-menu a:hover {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* ---- Language switcher (EN / UA) -------------------------------------- */
.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

/* Compact appearance switch, injected by initThemeSwitcher() next to the
   language control on desktop and into the mobile panel's bottom row. */
.theme-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--color-muted);
  cursor: pointer;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    transform 120ms ease-out;
}

.theme-toggle:hover {
  color: var(--color-ink);
  border-color: var(--border-strong);
}

.theme-toggle:active {
  transform: scale(0.94);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.theme-toggle-track {
  position: relative;
  width: 18px;
  height: 18px;
}

.theme-toggle-icon {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    opacity 180ms ease,
    transform 220ms var(--ease-out-premium);
}

.theme-toggle-icon--moon,
:root[data-theme="dark"] .theme-toggle-icon--sun {
  opacity: 0;
  transform: scale(0.65) rotate(-24deg);
}

:root[data-theme="dark"] .theme-toggle-icon--moon {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.theme-toggle-text {
  display: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
}

.lang-btn {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--color-muted);
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.lang-btn:hover {
  color: var(--color-ink);
}

.lang-btn.is-active {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.lang-divider {
  color: var(--color-border);
  font-size: 12px;
}

/* ---- Mobile hamburger toggle + panel -----------------------------------
   Hidden on desktop (see .header-nav/.language-switcher staying visible
   above 900px); only shown by the "@media (max-width: 900px)" block
   further down, which is also where .header-nav/.language-switcher (the
   desktop copies) get hidden so nothing doubles up on screen. */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 120ms ease-out;
}

.mobile-menu-toggle:active {
  transform: scale(0.9);
}

.mobile-menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-ink);
  transition:
    transform var(--transition-fast),
    opacity var(--transition-fast);
}

.mobile-menu-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  display: none;
}

/* ---------------------------------------------------------------------
   2. Hero section
   Static premium layout: left content column + a restrained navy vignette
   behind the portrait and copy. The vignette stays purely decorative and
   never participates in document layout.
--------------------------------------------------------------------- */
.hero-section {
  position: relative;
  width: 100%;
  /* min-height:100vh (not just "content-driven" height) is what stops the
     next section's soft-gray background from peeking in at the bottom of
     the first screen on load whenever the hero's own content is shorter
     than the viewport -- that peeking gray sliver was the "gray frame at
     the bottom" bug. overflow:hidden clips the circle/glow bleed at the
     section edge, same reasoning as .services-section's overflow-x. */
  overflow: hidden;
  min-height: 100vh;
  background: var(--color-white);
  padding-top: calc(var(--header-height) + clamp(48px, 6vw, 96px));
  padding-bottom: clamp(64px, 8vw, 120px);
}

/* The desktop sequence is a viewport composition, so its geometry must not
   depend on which translation happens to be longer. A modest shared floor
   gives both English and Ukrainian enough room on short laptops and at common
   browser zoom levels without changing the normal 100vh treatment on taller
   screens. Mobile stays content-driven in its own rule below. */
@media (min-width: 901px) {
  .hero-section {
    min-height: max(100svh, 820px);
  }
}

/* The frame sequence is rendered against white. On desktop dark mode only
   this section receives a local light token scope; the header and every
   following section remain dark. Phones hide the sequence and therefore
   intentionally inherit the dark site tokens instead. */
@media (min-width: 901px) {
  :root[data-theme="dark"] .hero-section {
    color-scheme: light;
    --bg: #ffffff;
    --bg-soft: #fafafa;
    --surface: #ffffff;
    --surface-soft: rgba(255, 255, 255, 0.78);
    --surface-elevated: rgba(255, 255, 255, 0.92);
    --text: #111111;
    --text-soft: #2a2a2a;
    --muted: #666666;
    --border: rgba(0, 0, 0, 0.09);
    --border-strong: rgba(0, 0, 0, 0.16);
    --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.08);
    --color-white: var(--bg);
    --color-soft-white: var(--bg-soft);
    --color-ink: var(--text);
    --color-muted: var(--muted);
    --color-border: var(--border-strong);
    --border-light: var(--border);
    --border-medium: var(--border-strong);
  }
}

/* Dedicated clipping wrapper for the decorative vignette. Its inset starts
   at var(--header-height) so it can never tint the navigation above it.
   Clipping comes from this element plus .hero-section -- deliberately not a global
   `html, body { overflow-x: hidden }` rule. That global rule was tried
   earlier in this project and forces the browser to compute overflow-y
   as auto on <body>, which silently breaks position:sticky for
   .about-sticky further down the page -- see the comment on the
   `html, body` rule near the top of this file. */
/* Painted above the image sequence while .hero-inner keeps all real
   text and controls above both decorative layers. */
.hero-bg {
  position: absolute;
  inset: var(--header-height) 0 0 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* Full-bleed image-sequence layer (see hero-scroll.js), same clipping
   convention as .hero-bg above -- z-index:0, one tier below the vignette
   and two below .hero-inner's text.
   Canvas has no intrinsic size of its own, so width/height: 100% here
   only sets its CSS box -- hero-scroll.js sets the matching
   canvas.width/height pixel buffer to avoid a blurry upscale. */
.hero-photo-sequence {
  position: absolute;
  inset: var(--header-height) 0 0 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-photo-sequence canvas,
.hero-photo-fallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero-photo-fallback {
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transition: opacity 220ms ease;
}

.hero-photo-sequence.is-enhanced .hero-photo-fallback {
  opacity: 0;
}

.hero-photo-sequence canvas {
  /* Only ever toggled by hero-scroll.js once the first frame has decoded,
     so there is never a blank/flashing canvas box visible before that. */
  opacity: 0;
  transition: opacity 200ms ease;
}

.hero-photo-sequence canvas.is-active {
  opacity: 1;
}

/* Large outlined circle, anchored off-screen bottom-left and bleeding up
   behind the copy column -- .hero-section's own overflow:hidden (see that
   rule above) is what already exists specifically to clip bleed like this
   at the section edge. Same thin-stroke-SVG-circle technique as
   .services-page-circle-outline below (fill:none + var(--orbit-line) +
   non-scaling-stroke), just static and positioned bottom-left instead of
   centered/rotating -- this is decoration, not the services page's
   orbiting illustration. Desktop only (see the max-width:900px rule
   further down): mobile's narrower hero has no spare room for a shape
   this size without it reading as clutter over the stacked content. */
.hero-circle-glow,
.hero-circle-decoration,
.hero-orbit-wrap {
  position: absolute;
  left: clamp(-200px, -12vw, -80px);
  bottom: clamp(-285px, -18.7vw, -185px);
  width: clamp(723px, 59.2vw, 1106px);
  height: clamp(723px, 59.2vw, 1106px);
  z-index: 1;
}

/* Soft warm-orange haze inside the circle -- clipped to the exact same
   circular shape as the outline (identical box, border-radius:50%), so it
   never bleeds past the stroke. Purely atmospheric -- .hero-section stays
   reading as white overall. Painted first (see DOM order in index.html) so
   the outline/dot below sit crisply on top of it. */
.hero-circle-glow {
  border-radius: 50%;
  /* Single gradient, centered just off the circle's true middle (toward
     lower-left) -- strongest there, smoothly stepped down through several
     stops toward the edge rather than a single 0%/100% pair (which reads
     as a harder, flatter fade), so the falloff feels soft and continuous
     all the way out. */
  background: radial-gradient(
    circle at 42% 58%,
    rgba(244, 170, 110, 0.16) 0%,
    rgba(244, 170, 110, 0.1) 25%,
    rgba(244, 170, 110, 0.03) 50%,
    rgba(244, 170, 110, 0.008) 75%,
    rgba(244, 170, 110, 0) 100%
  );
}

.hero-circle-decoration-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-circle-decoration circle {
  fill: none;
  stroke: var(--orbit-line);
  vector-effect: non-scaling-stroke;
  stroke-width: 1px;
}

/* Matches the .hero-section local light-token-scope's own min-width:901px
   gate (see that rule above): dark mode still forces this hero to light
   tokens on desktop, but --orbit-line isn't one of the tokens that scope
   resets, so it would otherwise carry over the dark-theme's stronger 0.2
   alpha instead of the light-mode 0.12 this circle is tuned for. Literal
   value here, not var(--orbit-line). */
@media (min-width: 901px) {
  :root[data-theme="dark"] .hero-circle-decoration circle {
    stroke: rgba(240, 115, 26, 0.12);
  }
}

@media (max-width: 900px) {
  .hero-circle-glow,
  .hero-circle-decoration,
  .hero-orbit-wrap {
    display: none;
  }
}

/* Small plain dot, orbiting the big circle -- a rotating wrapper
   sized/positioned identically to .hero-circle-decoration (see the shared
   selector above) sweeps it around that exact path. Unlike a glyph, a
   plain filled circle is rotationally symmetric, so -- unlike this file's
   other orbit symbols (see .services-page-orbit-symbol further down),
   which counter-rotate to stay upright -- the dot needs no counter-spin:
   it looks identical at any angle, so only the wrapper's rotation is
   needed. Sits in .hero-bg at the same z-index tier as the circle line,
   below .hero-inner's text (z-index:2) so it can never sit on top of the
   heading/CTA/rating card. */
.hero-orbit-wrap {
  animation: hero-orbit 16s linear infinite;
}

.hero-orbit-dot {
  position: absolute;
  top: 0.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
}

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

/* Shared by the separate services-page orbital illustration below. The
   homepage circle was removed, but that component still needs this rotation. */
@keyframes hero-orbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Deliberately NO max-width/margin:auto centering here -- that combo was
   the actual bug: on any viewport wider than a fixed max-width, the
   auto-centering shifts this whole box rightward by (viewport-max)/2
   *before* padding-left is even applied, while .header (no max-width cap)
   stays anchored to the true left edge -- so the two drifted apart on
   any screen wider than the cap. Matching .header's own model exactly
   (100% width, padding-left: var(--content-left), no centering) is what
   keeps the hero content pixel-aligned with the logo at every width.
   .hero-content's own max-width (below) is what keeps the text column
   from stretching too wide on ultra-wide monitors instead. */
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-left: var(--content-left);
  padding-right: clamp(24px, 5vw, 80px);
}

/* Founder photo, right side -- full-bleed treatment (fills the whole
   right portion of the hero, top to bottom, edge to edge) rather than a
   small floating portrait. Sits above the decorative circle/glow (same
   z-index tier as .hero-inner, later in DOM order so it layers on top)
   but is absolutely positioned outside the text column entirely, so it
   never competes with .hero-content's own layout. object-fit:cover (not
   contain) deliberately crops into the source PNG's transparent side
   margins -- the container's aspect ratio stays well short of the
   image's own ~1.78:1, so cover always scales to match the container's
   *height* and only crops left/right, never the top of the head or the
   bottom of the frame. top starts a beat below the header (not a flush
   0) so the top of the head clears the header line with a bit of
   breathing room instead of butting right up against it. */
/* Minimal decorative "keep scrolling" cue -- text color and the arrow's
   resting color both use the site's ink at low opacity (not a new gray),
   the arrow's motion adds a faint touch of the section's own orange
   accent. aria-hidden + pointer-events:none since it doesn't drive an
   actual scroll action, same treatment as .hero-bg. */
.hero-scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  /* JavaScript adds .is-sequence-ready only after every unique frame has
     loaded or completed its retry. Until then there is no cue inviting an
     interaction the page is not ready to render smoothly. */
  opacity: 0;
  transition: opacity 650ms var(--ease-soft) 120ms;
}

.hero-section.is-sequence-ready .hero-scroll-indicator {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-indicator {
    transition: none;
    opacity: 1;
  }
}

.hero-scroll-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.2);
}

.hero-scroll-arrow {
  display: flex;
  color: rgba(240, 115, 26, 0.3);
  animation: hero-scroll-arrow-move 1.8s ease-in-out infinite;
}

.hero-scroll-arrow svg {
  width: 16px;
  height: 16px;
}

@keyframes hero-scroll-arrow-move {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.3;
  }
  50% {
    transform: translateY(5px);
    opacity: 0.55;
  }
}

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

.hero-content {
  max-width: 660px;
}

/* Desktop checkpoint 1: contrast comes from hierarchy, not a container.
   The compact service label, fine editorial rule, navy headline, and smaller
   location line add definition while leaving the portrait sequence open. */
@media (min-width: 901px) {
  .hero-content .text-label {
    gap: 10px;
    color: #173754;
    font-weight: 600;
    letter-spacing: 0.11em;
  }

  .hero-content .text-label::after {
    content: "";
    width: clamp(42px, 4.5vw, 72px);
    height: 1px;
    margin-left: 4px;
    background: linear-gradient(90deg, rgba(23, 55, 84, 0.62), transparent);
  }

  .hero-content .hero-heading {
    color: #071b34;
    letter-spacing: -0.04em;
    margin-top: 22px;
  }

  .hero-heading-primary,
  .hero-heading-secondary {
    display: inline-block;
  }

  .hero-heading-secondary {
    margin-top: 0.08em;
    font-size: 0.8em;
    letter-spacing: -0.025em;
  }

  .hero-content .hero-subtitle {
    max-width: 520px;
    color: #334a60;
    font-size: 1.15rem;
    line-height: 1.55;
  }

  .hero-content .hero-value-line {
    color: #173754;
  }

  /* Ukrainian words are materially wider than the equivalent English title.
     Keep the intended two-line editorial lockup instead of allowing a third
     line to resize the section and the full-bleed frame sequence. */
  html[lang="uk"] .hero-content .hero-heading {
    font-size: clamp(2.6rem, 4vw, 2.75rem);
  }

  html[lang="uk"] .hero-heading-primary,
  html[lang="uk"] .hero-heading-secondary {
    white-space: nowrap;
  }

}

/* Staggered hero entrance: eyebrow -> headline -> subtitle -> value line
   -> CTAs -> rating card, each a beat behind the last, instead of the
   whole block fading up as one flat unit. .hero-content keeps the
   .reveal class so the existing IntersectionObserver in shared.js still
   flips .is-visible on it with zero JS changes -- .reveal's own
   opacity/transform is neutralized here and moved onto the direct
   children instead, driven off the same parent state. */
.hero-content.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.hero-content > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 850ms var(--ease-soft),
    transform 850ms var(--ease-soft);
}

.hero-content.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.hero-content.is-visible > *:nth-child(1) {
  transition-delay: 0ms;
}
.hero-content.is-visible > *:nth-child(2) {
  transition-delay: 110ms;
}
.hero-content.is-visible > *:nth-child(3) {
  transition-delay: 230ms;
}
.hero-content.is-visible > *:nth-child(4) {
  transition-delay: 340ms;
}
.hero-content.is-visible > *:nth-child(5) {
  transition-delay: 460ms;
}
.hero-content.is-visible > *:nth-child(6) {
  transition-delay: 570ms;
}

@media (prefers-reduced-motion: reduce) {
  .hero-content > * {
    transform: none;
    transition: opacity 300ms ease;
    transition-delay: 0ms !important;
  }
}

/* Checkpoint 2 of the hero's discrete scroll sequence (see hero-scroll.js) -- an
   embedded "Our Advantages" block that crossfades in as .hero-content
   crossfades out. This wrapper spans the hero's *entire* available height
   below the header (inset: var(--header-height) 0 0 0, same convention as
   .hero-bg) and centers .hero-why-content-inner inside it vertically via
   flex -- deliberately NOT inset:0 with a fixed max-width sitting flush
   against the left edge (that was the bug an earlier version of this
   block had: once it became a sibling of .hero-inner instead of a child,
   it lost .hero-inner's own padding-left and rendered flush against the
   viewport, clipping the label/icons).
   Hidden by plain CSS here (opacity/visibility), not behind any JS-added
   class -- only hero-scroll.js's GSAP timeline (autoAlpha tweens) ever
   reveals it. That is deliberate: on reduced-motion or if the GSAP CDN is
   blocked, this stays invisible/inert forever and .advantages-section
   further down the page (never touched by CSS here) is the one real,
   accessible copy of this content those visitors see. */
.hero-why-content {
  position: absolute;
  inset: var(--header-height) 0 0 0;
  z-index: 2;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* The actual left-column content box: same left edge as .hero-inner
   (var(--content-left), already a fluid clamp() that never bottoms out at
   0), capped so paragraph lines stay comfortably short.
   No CSS transform here on purpose -- hero-scroll.js's GSAP timeline owns
   this element's transform entirely (both the small upward vertical bias
   and the entrance translateX), since GSAP writes the whole `transform`
   inline style and would otherwise silently clobber a CSS-set one the
   first time it touches this element. .hero-why-content itself (the
   parent) never gets a transform at all, only opacity/visibility, so
   there is no risk of a leftover animated offset ever parking this
   off-screen. */
.hero-why-content-inner {
  width: 100%;
  max-width: 620px;
  padding-left: var(--content-left);
  padding-right: clamp(24px, 5vw, 64px);
}

.hero-why-eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: #3a4440;
}

.hero-why-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.hero-why-heading {
  font-size: var(--text-display);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--color-ink);
  white-space: nowrap;
  margin: 26px 0 48px;
}

.hero-why-list {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.hero-why-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 26px;
  align-items: start;
}

.hero-why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.hero-why-icon svg {
  width: 44px;
  height: 44px;
}

.hero-why-item-text h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 10px;
}

.hero-why-item-text p {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 46ch;
}

@media (max-width: 900px) {
  .hero-why-content-inner {
    max-width: none;
    padding-right: 24px;
  }

  .hero-why-heading {
    font-size: clamp(2.25rem, 8vw, 3rem);
    white-space: normal;
    margin: 18px 0 32px;
  }

  .hero-why-list {
    gap: 26px;
  }

  .hero-why-item {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 18px;
  }

  .hero-why-icon,
  .hero-why-icon svg {
    width: 34px;
    height: 34px;
  }

  .hero-why-item-text h3 {
    font-size: 1.2rem;
  }

  .hero-why-item-text p {
    font-size: 0.95rem;
  }
}

@media (max-height: 800px) {
  .hero-why-heading {
    margin: 16px 0 32px;
  }

  .hero-why-list {
    gap: 24px;
  }
}

.hero-heading {
  font-size: var(--text-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  margin: 20px 0 22px;
}

.hero-heading-accent {
  color: var(--color-accent);
}

.hero-subtitle {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 460px;
  margin-bottom: 20px;
}

.hero-value-line {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--color-ink);
  margin-bottom: 32px;
}

.hero-value-bar {
  width: 2px;
  height: 20px;
  background: var(--color-accent);
  flex-shrink: 0;
}

.hero-value-line strong {
  font-weight: 600;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.hero-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  height: 58px;
  /* Right padding was 8px, and the hover state below moves the arrow
     circle 5px further right (translateX) -- leaving only 3px of clear
     space at the exact moment a user is looking right at it, which read
     as cramped. 14px right padding + a slightly smaller 4px hover nudge
     keeps a real ~10px of breathing room even mid-hover. */
  padding: 0 14px 0 32px;
  border-radius: 999px;
  /* Subtle left-to-right gradient within the same brand-orange family
     (not a different hue) -- reads as premium/dimensional rather than a
     flat fill, while staying anchored to the exact #f0731a on the left. */
  background: linear-gradient(90deg, #f0731a 0%, #f68b42 100%);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 500;
  /* Deliberately small blur radius (16px, well under the 28px gap to the
     "Learn More" link beside this button and the 36px gap to the rating
     card below) -- this used to be a much bigger shadow plus a separate
     ::before glow on the whole .hero-cta-row, and both together bled
     sideways far enough to visibly tint the white space behind "Learn
     More". One small, tightly-contained shadow is the whole effect now. */
  box-shadow: 0 8px 16px rgba(240, 115, 26, 0.22);
  /* Slow, gentle easing (long-ish 480ms + a curve that starts quick and
     glides to a soft stop) is what makes the hover feel like a calm,
     premium reaction instead of a mechanical snap -- every moving part
     of this button (lift+scale, glow, badge, arrow) shares this exact
     duration/curve so they all settle together, which is what reads as
     "one smooth gesture" rather than several separate animations. */
  transition:
    transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 480ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-cta-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 22px rgba(240, 115, 26, 0.3);
  filter: brightness(1.05);
}

/* Press feedback: snappier than the slow, luxurious hover-in above
   (asymmetric timing -- the deliberate hover glides in, the system's
   response to an actual click should feel immediate). */
.hero-cta-primary:active {
  transform: translateY(-1px) scale(0.98);
  transition:
    transform 120ms ease-out,
    box-shadow 120ms ease-out,
    filter 120ms ease-out;
}

.hero-cta-arrow-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  font-size: 16px;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Circle and glyph animate independently on hover (circle nudges over,
   the arrow itself rotates further toward straight-up) -- see the nested
   .hero-cta-arrow-icon span in index.html. Same duration/curve as the
   button itself above, so the whole button feels like it's moving as
   one calm, unified gesture instead of several disjointed animations. */
.hero-cta-primary:hover .hero-cta-arrow-badge {
  transform: translateX(4px) rotate(8deg);
}

.hero-cta-arrow-icon {
  display: inline-block;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* 37deg (not 45deg) here is deliberate: this icon sits inside
   .hero-cta-arrow-badge, which itself rotates 8deg on hover (see above),
   and CSS rotations on a parent and child stack additively in the
   rendered result -- 45deg here would actually land the arrow at
   45+8=53deg, tipping it past horizontal and into a slightly
   downward-looking angle instead of a clean pointing-right. Subtracting
   the parent's 8deg keeps the *visual* end result at exactly 45deg. */
.hero-cta-primary:hover .hero-cta-arrow-icon {
  transform: rotate(37deg);
}

.hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 3px;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.hero-cta-secondary:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.hero-cta-secondary-arrow {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.hero-cta-secondary:hover .hero-cta-secondary-arrow {
  transform: translateX(3px);
}

/* Explicit stacking context + opaque background, on top of the CTA
   glow's own containment (see .hero-cta-row::before), so this card is
   guaranteed to render above that glow with no chance of the orange
   bleeding into it -- belt-and-suspenders. */
/* Only visible for checkpoint 0 -- see setRatingCardVisible in script.js,
   which toggles .is-hidden immediately (so the fade/slide-out below
   actually plays) and only sets display:none *after* that transition
   finishes, which is what lets it collapse out of layout without ever
   looking like it just vanished mid-animation. */
.hero-rating-card {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-radius: 18px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  margin-bottom: 28px;
}

.hero-rating-avatars {
  display: flex;
}

.hero-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  border: 2px solid var(--color-white);
  box-shadow: 0 4px 12px var(--shadow-color-soft);
  margin-left: -10px;
  /* .hero-rating-card already establishes its own stacking context (see
     that rule) sitting above the CTA glow; avatars just need to be a
     normal opaque in-flow element within it to stay visually on top --
     no extra z-index needed here. */
  background: var(--color-white);
}

.hero-rating-avatars .hero-avatar:first-child {
  margin-left: 0;
}

.hero-rating-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.hero-rating-score {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-ink);
}

.hero-rating-stars {
  color: var(--color-ink);
  font-size: 12px;
  letter-spacing: 1px;
}

.hero-rating-text {
  font-size: 0.8rem;
  color: var(--color-muted);
}

@media (max-width: 900px) {
  .hero-section {
    display: flex;
    flex-direction: column;
    min-height: auto;
    padding-top: calc(var(--header-height) + 28px);
    padding-bottom: 48px;
  }

  .hero-inner {
    order: 1;
    padding: 0 var(--content-left);
  }

  .hero-content {
    max-width: none;
  }

  .hero-content .text-label {
    margin-bottom: 14px;
    color: #173754;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
  }

  .hero-heading {
    max-width: 720px;
    margin: 14px 0 18px;
    color: #071b34;
    font-size: clamp(2.45rem, 10vw, 4.2rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
  }

  .hero-heading-primary,
  .hero-heading-secondary {
    display: inline;
  }

  .hero-subtitle {
    max-width: 620px;
    margin-bottom: 18px;
    color: #334a60;
    font-size: 1rem;
    line-height: 1.55;
  }

  .hero-value-line {
    margin-bottom: 26px;
    color: #173754;
  }

  .hero-photo-sequence {
    position: relative;
    inset: auto;
    order: 2;
    width: calc(100% - (2 * var(--content-left)));
    height: clamp(270px, 72vw, 430px);
    margin: 24px var(--content-left) 0;
    border: 1px solid rgba(7, 27, 52, 0.09);
    border-radius: 26px;
    box-shadow: 0 24px 56px rgba(7, 27, 52, 0.11);
  }

  .hero-photo-sequence::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background:
      linear-gradient(180deg, transparent 55%, rgba(7, 27, 52, 0.11)),
      linear-gradient(90deg, rgba(7, 27, 52, 0.08), transparent 48%);
    pointer-events: none;
  }

  .hero-photo-fallback {
    object-fit: cover;
    object-position: 67% center;
  }

  .hero-photo-sequence canvas {
    display: none;
  }

  .hero-bg {
    inset: var(--header-height) 0 auto;
    height: min(68vh, 620px);
  }

  .hero-scroll-indicator,
  .hero-why-content {
    display: none;
  }

  :root[data-theme="dark"] .hero-content .text-label,
  :root[data-theme="dark"] .hero-value-line {
    color: var(--text-soft);
  }

  :root[data-theme="dark"] .hero-heading {
    color: var(--color-ink);
  }

  :root[data-theme="dark"] .hero-subtitle {
    color: var(--color-muted);
  }

  :root[data-theme="dark"] .hero-photo-sequence {
    border-color: var(--color-border);
    box-shadow: var(--shadow-soft);
  }
}

@media (max-width: 640px) {
  .hero-section {
    padding-bottom: 36px;
  }

  .hero-heading {
    font-size: clamp(2.35rem, 11vw, 3.15rem);
  }

  .hero-cta-row {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 16px;
    margin-bottom: 24px;
  }

  .hero-cta-primary {
    width: 100%;
    height: 56px;
    justify-content: space-between;
    padding-left: 24px;
  }

  .hero-cta-secondary {
    width: fit-content;
    margin-left: 4px;
  }

  .hero-rating-card {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 14px;
    margin-bottom: 0;
    box-shadow: 0 12px 30px rgba(7, 27, 52, 0.08);
  }

  /* The portrait is a useful part of the desktop composition, but after the
     mobile hero copy it reads as a second oversized hero. Keep phones focused
     on the value proposition and CTA instead. */
  .hero-photo-sequence {
    display: none;
  }
}

/* Short-viewport safety net (landscape phones, small older devices) --
   the base .hero-section min-height:100vh is a deliberate choice (see
   its own comment: keeps the next section's background from peeking in
   at the bottom of the first screen when hero content is shorter than
   the viewport), which is fine on the common tall-portrait-phone case.
   But on a genuinely SHORT viewport, forcing a 100vh floor can make the
   hero content feel cramped or push the CTA further down than the
   content itself needs -- relax to a content-driven height only in that
   narrow case, leaving the common case untouched. */
@media (max-width: 640px) and (max-height: 700px) {
  .hero-section {
    min-height: auto;
  }
}

.text-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 16px;
}

.label-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* Small reusable inline accent — highlights one word/phrase inside an
   otherwise plain heading (e.g. "...that fits your needs." on the
   Services page) without a one-off color rule per heading. */
.text-accent {
  color: var(--color-accent);
}

.text-title {
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-bottom: 18px;
}

.text-description {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 420px;
  margin-bottom: 18px;
}

.text-small {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-ink);
}

/* Stable position marker for the About Us gallery. Only the current photo is
   accented; autoplay never paints partial or historical fills into the other
   markers, so pausing or manually changing photos cannot leave orange slivers
   behind. The visible bar remains compact while ::before supplies a larger
   keyboard/touch target without changing the control row's layout. */
.dot {
  position: relative;
  width: 22px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-border);
  transition:
    background var(--transition-fast),
    transform var(--transition-fast);
}

.dot::before {
  content: "";
  position: absolute;
  inset: -10px -4px;
}

.dot.is-active {
  background: var(--color-accent);
}

.dot:hover {
  background: rgba(240, 115, 26, 0.48);
}

.dot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 5px;
}

/* ---------------------------------------------------------------------
   2.5. Advantages section ("Why clients choose us")
   Sits between the hero and Services -- plain white background (like the
   hero above it) so two soft-gray sections never land back to back once
   Services' own --color-soft-white follows directly after this one.
--------------------------------------------------------------------- */
.advantages-section {
  width: 100%;
  background: var(--color-white);
  padding: clamp(90px, 10vw, 140px) 0 clamp(70px, 8vw, 110px);
}

/* Only ever added by hero-scroll.js once its checkpoint-2
   (.hero-why-content, an embedded copy of this exact section's content)
   is actually driving the experience -- so this section is never shown
   twice. See the .hero-why-content comment in this file for the reverse
   (reduced-motion/no-JS) case, where this class is never added at all. */
.advantages-section.is-hidden-for-hero-embed {
  display: none;
}

.advantages-inner {
  width: min(100% - 48px, 1320px);
  margin: 0 auto;
}

.advantages-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.advantages-intro .text-label {
  justify-content: center;
  margin-bottom: 20px;
}

.advantages-heading {
  font-size: var(--text-h2);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-ink);
}

/* Asymmetric "featured card + grouped list" instead of 4 equal tiles --
   one visual anchor (the strongest trust point) plus a lighter, unboxed
   list for the rest, so the section reads as a deliberate composition
   rather than four cloned cards. */
.advantages-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) 1.15fr;
  gap: 24px;
  align-items: stretch;
}

.advantage-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  margin-bottom: 22px;
  flex-shrink: 0;
}

.advantage-icon svg {
  width: 24px;
  height: 24px;
}

.advantage-featured {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition:
    transform 240ms var(--ease-out-premium),
    border-color 240ms ease,
    box-shadow 240ms ease;
}

.advantage-featured:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: 0 24px 48px rgba(23, 23, 23, 0.06);
}

.advantage-featured .advantage-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  margin-bottom: 26px;
}

.advantage-featured .advantage-icon svg {
  width: 28px;
  height: 28px;
}

.advantage-featured h3 {
  font-size: var(--text-h4);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 12px;
}

.advantage-featured p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.advantages-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 4px 32px;
}

.advantage-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 0;
  transition: transform 200ms var(--ease-out-premium);
}

.advantage-row + .advantage-row {
  border-top: 1px solid var(--color-border);
}

.advantage-row:hover {
  transform: translateX(4px);
}

.advantage-row:hover .advantage-icon {
  background: var(--color-accent);
  color: var(--color-white);
}

.advantage-row .advantage-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  margin-bottom: 0;
  transition:
    background 200ms ease,
    color 200ms ease;
}

.advantage-row .advantage-icon svg {
  width: 20px;
  height: 20px;
}

.advantage-row-text h3 {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 6px;
}

.advantage-row-text p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-muted);
}

/* ---------------------------------------------------------------------
   3. Services section
   Deliberately centered (not the pinned-left-to-the-logo pattern most
   other sections use) — a showcase section with its own large rounded
   "shell" wrapping the card grid, matching the requested premium
   reference layout.
--------------------------------------------------------------------- */
.services-section {
  width: 100%;
  /* Clips the card shell's blurred glow (see .services-card-shell::before)
     at the section edge so its blur bleed can never create page-level
     horizontal scroll on narrow viewports. */
  overflow-x: hidden;
  background: var(--color-soft-white);
  padding: clamp(56px, 6vw, 72px) 0;
  scroll-margin-top: var(
    --header-height
  ); /* clears the fixed header when jumped to via nav */
}

.services-inner {
  width: min(100% - 48px, 1320px);
  margin: 0 auto;
}

.services-intro {
  text-align: center;
  max-width: 840px;
  margin: 0 auto 24px;
}

.services-intro .text-label {
  justify-content: center;
  margin-bottom: 16px;
}

/* Sized (and the intro column above widened to 840px) so this specific
   heading wraps to two lines rather than three at typical desktop
   widths -- a lower ceiling than a heading this short would otherwise
   get, but the header's total height budget (compact, next to the
   interactive panel below it) matters more here than maximizing type size. */
.services-heading {
  font-size: var(--text-h1);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--color-ink);
}

.services-lead {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--color-muted);
  max-width: 560px;
  margin: 14px auto 0;
}

/* ---- Services shell: vertical service tablist (left) + live dashboard
   visualization of the active service (right). Built by script.js -- see
   buildServicesNav()/initServicesShowcase() there. The ambient glow is a
   plain box-shadow rather than a ::before layer:
   a ::before with a negative z-index still paints *above* this element's
   own background within the same stacking context, so it would show
   through at the nav/panel seam no matter how opaque this background is.
   A non-inset box-shadow can't have that problem — by spec it only ever
   renders outside the border-box. It is part of the shell's initial paint,
   so it is already present when this below-the-fold section enters the
   viewport instead of visibly spawning a second later. */
.services-shell {
  width: min(100%, 1240px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 33%) 1fr;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: var(--surface-soft);
  /* Layered instead of one flat blur -- three progressively larger,
     progressively fainter shadows sum into a much more gradual falloff
     than a single box-shadow can produce (a single large blur+spread
     combo has a comparatively "flat" near zone before the blur kicks in,
     which reads as a soft-but-still-perceptible band/edge over a big
     plain background). This finishes fading to nothing well within the
     section's own padding, so it never gets clipped mid-fade by the
     next section's solid background. */
  box-shadow:
    0 0 36px 0 rgba(240, 115, 26, 0.13),
    0 0 84px 8px rgba(240, 115, 26, 0.07),
    0 0 140px 16px rgba(240, 115, 26, 0.03);
  transition:
    transform 700ms var(--ease-out-premium),
    opacity 700ms var(--ease-out-premium);
  overflow: hidden; /* clips both panes to the shell's own corner radius */
}

/* Text reveals first, then the shell -- a small delay on top of the
   generic .reveal transition (see shared.js/initScrollReveal, which
   observes .services-intro and this element independently) is enough to
   read as "heading, then container" without any extra JS choreography. */
.services-shell.reveal {
  transition-delay: 150ms;
}

/* Once revealed, drop the lingering translateY(0) transform (identity,
   so nothing visually moves) instead of leaving it in place -- a
   non-"none" transform keeps this whole panel (including the bold
   service-feature-card-title text inside it) on its own composited
   layer indefinitely, which renders noticeably softer/blurrier text
   than the normal (non-composited) paint path. */
.services-shell.reveal.is-visible {
  transform: none;
}

.services-nav {
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centers the whole 5-item stack as one group within the column's full height -- see .services-shell's grid row, which stretches this to match the (taller) preview pane */
  gap: 4px;
  border-right: 1px solid var(--border);
  background: var(--bg);
}

.services-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  opacity: 0;
  transform: translateY(10px);
  transition:
    background 200ms var(--ease-out-premium),
    border-color 200ms var(--ease-out-premium),
    box-shadow 200ms var(--ease-out-premium);
}

/* Staggered entrance keyed off the parent shell's own .is-visible state
   (added once by the same generic scroll-reveal observer as everything
   else, see shared.js) rather than each row being its own separate
   .reveal target -- two independent .reveal elements nested inside one
   another would both apply a translateY at once and visibly compound. */
.services-shell.is-visible .services-nav-item {
  animation: services-nav-item-in 520ms var(--ease-out-premium) forwards;
  animation-delay: var(--nav-item-delay, 0ms);
}

@keyframes services-nav-item-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.services-nav-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  color: var(--color-muted);
  transition:
    background 200ms ease,
    color 200ms ease;
}

.services-nav-icon svg {
  width: 16px;
  height: 16px;
}

.services-nav-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.services-nav-name {
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.services-nav-benefit {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.services-nav-arrow {
  flex-shrink: 0;
  font-size: 15px;
  color: var(--color-muted);
  transition: color 200ms ease;
}

.services-nav-item:hover:not([aria-selected="true"]) {
  background: var(--bg-soft);
}

.services-nav-item:hover:not([aria-selected="true"]) .services-nav-arrow {
  color: var(--color-ink);
}

.services-nav-item[aria-selected="true"] {
  background: var(--orange-soft);
  border-color: var(--orange-line);
  box-shadow: inset 3px 0 0 var(--orange);
}

.services-nav-item[aria-selected="true"] .services-nav-icon {
  background: var(--orange);
  color: var(--color-white);
}

.services-nav-item[aria-selected="true"] .services-nav-name {
  color: var(--orange);
}

.services-nav-item[aria-selected="true"] .services-nav-arrow {
  color: var(--orange);
}

.services-nav-item:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
}

/* ---- Active service panel: dashboard-style visualization --------------
   height is set inline by syncServicesPanelsHeight() (see script.js) to
   match whichever panel is active -- the 5 panels share one grid cell
   (grid-area: 1/1 below) so they can crossfade, which would otherwise
   auto-size this to the TALLEST of the 5 regardless of which is showing.
   overflow: hidden clips the (invisible) taller ones at that height
   instead of leaving their dead space on screen; the transition makes
   switching between differently-sized panels a smooth resize rather than
   a jump cut. */
.services-panels {
  position: relative;
  padding: clamp(14px, 2vw, 20px) clamp(16px, 2vw, 22px) clamp(12px, 1.8vw, 18px);
  min-height: 220px;
  overflow: hidden;
  display: grid;
  transition: height 320ms var(--ease-out-premium);
}

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

.service-panel {
  position: relative;
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition:
    opacity 220ms var(--ease-out-premium),
    visibility 0s linear 220ms;
}

.service-panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
  transition-delay: 0s;
}

.service-panel:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
  border-radius: 12px;
}

.panel-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.panel-header {
  margin-bottom: 0;
}

.panel-heading {
  display: flex;
  flex-direction: column;
  font-size: clamp(1.65rem, 2.1vw, 2.05rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--color-ink);
}

.panel-supporting {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-muted);
  max-width: 46ch;
}

.panel-learn-more {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 200ms ease;
}

.panel-learn-more:hover {
  color: var(--orange);
}

/* ---- Service panels: image + feature-card composition --------------------
   Shared by all 5 service panels (see buildServicePanel in script.js).
   Both columns are plain normal-flow vertical stacks: the left column is
   [heading+supporting text, then the bottom-left illustration]; the right
   column is [the top-right illustration, then the card stack]. Each
   illustration's vertical position is therefore always "immediately after
   whatever text/content precedes it in its own column" -- never a fixed
   pixel offset from the top of the section. This is deliberate and load-
   bearing: translated copy (Ukrainian heading/supporting text wraps to
   more lines than English) changes the header's real rendered height, and
   only flow position naturally follows that; a fixed `top` tuned for the
   shorter English text would let the visual drift up underneath/over the
   now-taller text in any other language. Tablet/mobile reuse the exact
   same flow, just re-ordered onto a single column (see the responsive
   tiers further down). */
.panel-grid--service {
  position: relative;
  gap: 10px;
}

.service-composition {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  column-gap: 20px;
  align-items: start;
}

.service-composition-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.service-composition-col--left {
  gap: 20px;
}

.service-composition-col--right {
  gap: 14px;
}

.service-visual {
  position: relative;
  display: flex;
  min-width: 0;
}

.service-visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* Soft ambient glow behind every visual (both the top-right and
   bottom-left illustration, on all 5 panels) -- a large, heavily blurred,
   low-opacity radial fade that just separates the artwork from the dark
   panel background, not a decorative light source. Sized larger than the
   image itself and centered behind it; z-index keeps it under the image
   (which is z-index:1 above), and pointer-events:none keeps it from
   intercepting hover/click on the card/image content. */
.service-visual::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: 0;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 245, 225, 0.08) 35%,
    rgba(255, 255, 255, 0) 72%
  );
  filter: blur(18px);
  pointer-events: none;
}

/* Right-aligned within the card column, sized generously but capped well
   short of the column's own width so it reads as a contained hero visual
   rather than stretching edge-to-edge. */
.service-visual--top {
  align-self: flex-end;
  justify-content: flex-end;
  max-width: 243px;
}

/* Left-aligned within the text column by default (normal flow, no
   positioning offsets at all). */
.service-visual--bottom {
  max-width: 228px;
}

/* Accounting's top visual (Profit & Loss / Financial Reports) -- centered
   over the card column below instead of flush against its right edge. */
.service-panel[data-service="accounting-services"] .service-visual--top {
  align-self: center;
  justify-content: center;
}

/* Accounting's bottom visual (the laptop dashboard mockup) is a landscape
   image (~1.5:1) instead of the tall/portrait shape the shared zone above
   was tuned for. Kept narrower than the shared default would suggest --
   at this ratio, width is the dimension that overflows the lower-left
   zone first, so it's capped there instead of being sized for height.
   Centered and shifted down within the text column so it doesn't hug the
   header, per the accounting-specific composition brief. */
.service-panel[data-service="accounting-services"] .service-visual--bottom {
  max-width: 280px;
  align-self: center;
  margin-top: 76px;
}

/* Individuals' top visual (the W-2/1099/Investments -> 1040 flow) --
   centered over the card column below instead of flush against its right
   edge. Its bottom visual (the "Your Tax Picture" donut chart) --
   enlarged a bit for better visual weight, and centered in the text
   column instead of flush against its left edge. */
.service-panel[data-service="individuals"] .service-visual--top {
  align-self: center;
  justify-content: center;
}

.service-panel[data-service="individuals"] .service-visual--bottom {
  max-width: 267px;
  align-self: center;
  margin-top: 32px;
}

/* Payroll's top visual (the "Payroll Process" workflow) -- centered over
   the card column below instead of flush against its right edge.
   Payroll's bottom visual (the "Payroll Calendar" card) -- centered in
   the text column instead of flush against its left edge. */
.service-panel[data-service="payroll"] .service-visual--top {
  align-self: center;
  justify-content: center;
}

/* For Business's top visual ("Business Structure") -- centered over the
   card column below instead of flush against its right edge. Its bottom
   visual ("Business Growth") -- centered in the text column instead of
   flush against its left edge. */
.service-panel[data-service="business"] .service-visual--top {
  align-self: center;
  justify-content: center;
}

.service-panel[data-service="business"] .service-visual--bottom {
  align-self: center;
}

.service-panel[data-service="payroll"] .service-visual--bottom {
  align-self: center;
}

/* Tax's top visual (the 1040 form) -- centered over the card column
   below instead of flush against its right edge. Tax's bottom visual
   (FBAR/8938) -- shifted right off the text column's left edge instead of
   flush against it. */
.service-panel[data-service="tax-services"] .service-visual--top {
  align-self: center;
  justify-content: center;
}

.service-panel[data-service="tax-services"] .service-visual--bottom {
  align-self: center;
}

.service-feature-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-feature-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  transition:
    border-color 200ms var(--ease-out-premium),
    box-shadow 200ms var(--ease-out-premium),
    transform 200ms var(--ease-out-premium);
}

.service-feature-card:hover {
  border-color: var(--orange-line);
  box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}

.service-feature-card-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-soft);
  color: var(--orange);
}

.service-feature-card-icon svg {
  width: 15px;
  height: 15px;
}

.service-feature-card-text {
  flex: 1;
  min-width: 0;
}

.service-feature-card-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.service-feature-card-desc {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--color-muted);
}

/* Hover lift/transform is decoration, not information -- drop the motion
   but keep opacity/color changes, matching this file's other
   reduced-motion blocks. */
@media (prefers-reduced-motion: reduce) {
  .services-shell,
  .services-nav-item,
  .service-panel,
  .service-feature-card {
    transition: opacity 250ms ease;
  }

  .services-shell.is-visible .services-nav-item {
    animation: services-nav-item-in-reduced 250ms ease forwards;
    animation-delay: 0ms;
  }

  @keyframes services-nav-item-in-reduced {
    to {
      opacity: 1;
    }
  }

  .service-panel,
  .service-feature-card:hover {
    transform: none;
  }
}

/* ---- "View All Services" CTA, centered under the card grid ----------- */
.services-cta {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.services-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  color: var(--color-white);
  font-size: 15px;
  font-weight: 500;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.services-cta-button:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  transform: translateY(-2px);
}

/* ---- Scroll reveal (heading + cards fade/slide up once, on enter) ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms var(--ease-out-premium),
    transform 700ms var(--ease-out-premium);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion means gentler, not zero: keep the fade (it aids
   comprehension of what just appeared) but drop the translateY so
   nothing moves across the screen for anyone who asked their system to
   minimize motion. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transform: none;
    transition: opacity 300ms ease;
  }

  .reveal.is-visible {
    transform: none;
  }
}

/* ---------------------------------------------------------------------
   4. About Us section
   Height is set in script.js (based on the number of gallery images).
--------------------------------------------------------------------- */
/* IMPORTANT: this section must NOT have its own overflow:hidden/auto/
   scroll. It is the direct parent of .about-sticky (position: sticky),
   and overflow on a sticky element's own parent can break "stuck"
   behavior in some browsers — the sticky box just scrolls away normally
   instead of pinning, which silently leaves this section's large
   JS-computed height rendering as a big blank gap for the rest of its
   scroll range. .about-sticky already has its own overflow:hidden,
   which is enough on its own to clip the gallery's translateX shift —
   this outer wrapper doesn't need (and must not have) overflow set. */
.about-section {
  position: relative;
  width: 100%;
  background: var(--color-white);
  scroll-margin-top: var(
    --header-height
  ); /* clears the fixed header when jumped to via nav */
}

.about-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: var(--header-height);
  background: var(--color-white);
}

/* Centered container: both columns live inside one max-width box with
   equal left/right padding and margin:0 auto, instead of the old
   fixed-width-track layout (which left unused space sagging on one
   side because two fixed tracks rarely summed to the full container
   width). The image column is minmax(0, 1fr) so it fills whatever
   space remains next to the text column — no leftover gap, no
   full-bleed edge-hugging. */
.about-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: clamp(24px, 5vw, 64px);
  padding-right: clamp(24px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(48px, 6vw, 96px);
}

@media (max-width: 1300px) {
  .about-inner {
    grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 64px);
  }
}

.about-copy {
  grid-column: 1;
  width: 100%;
  max-width: 420px;
  justify-self: start;
}

.about-copy .text-title {
  margin-bottom: 20px;
}

.about-copy .text-description {
  max-width: 460px;
}

.about-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  padding: 13px 24px;
  margin-top: 20px;
  border: 1px solid var(--color-ink);
  border-radius: 999px;
  color: var(--color-ink);
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.about-button:hover {
  background: var(--color-ink);
  color: var(--color-white);
  transform: translateY(-2px);
}

.about-button:active {
  transform: scale(0.97);
  transition:
    background 120ms ease-out,
    color 120ms ease-out,
    transform 120ms ease-out;
}

.about-button-arrow {
  transition: transform var(--transition-fast);
}

.about-button:hover .about-button-arrow {
  transform: translateX(4px);
}

/* ---- Gallery ("collection surfer") — arrow/dot-controlled crossfade -- */
/* Fills the flexible image column of .about-inner's grid; max-width
   caps it (reusing the same responsive clamp the FAQ accordion uses)
   so it never balloons on very wide screens, while justify-self:center
   keeps it centered within that column rather than full-bleed. */
.about-gallery {
  grid-column: 2;
  width: 100%;
  max-width: var(--right-column-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  justify-self: center;
}

/* Wraps the photo frame + the floating founder badge. Deliberately has no
   overflow:hidden of its own (unlike .about-gallery-frame below) so the
   badge's edge can spill slightly past the photo's edge as a floating
   card instead of being clipped by the frame's rounded-corner mask. */
.about-gallery-media {
  position: relative;
  width: 100%;
}

/* Explicit height (not max-height) so nothing — grid, flex, a future
   component swap — can silently shrink this back into a thumbnail;
   width instead tracks the shared right-column width via 100%/max-width
   above so it stays in lockstep with the FAQ accordion's column.
   The soft shadow + slightly larger radius is what makes this read as a
   deliberate, premium "frame" rather than a plain cropped photo -- kept
   subtle (same --shadow-soft token used elsewhere) rather than a heavy
   drop shadow. Size (width/height) never changes between images, so
   swapping the active photo cannot shift the frame or the layout around
   it. */
.about-gallery-frame {
  position: relative;
  width: 100% !important;
  height: clamp(520px, 38vw, 680px) !important;
  max-width: var(--right-column-width) !important;
  max-height: none !important;
  border-radius: 32px;
  overflow: hidden;
  background: var(--color-soft-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

/* Every photo is stacked in the exact same spot (position:absolute,
   inset:0) at all times -- only opacity/transform ever change, so there
   is nothing to re-flow or re-layout when the active image switches, and
   nothing for the browser to pop in/flash: every <img> is already
   decoded up front (see preloadAboutImages in script.js) before the user
   can reach it. The crossfade uses a slightly longer, gentler easing
   curve than a plain "ease" for a more deliberate, premium feel instead
   of a hard cut. z-index keeps every photo below the founder badge,
   which shares this same .about-gallery-media stacking context. */
.about-gallery-frame img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transform: scale(1.015);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.about-gallery-frame img.is-active {
  /* Above every other photo regardless of DOM order, so the incoming
     photo always crossfades in on top of the outgoing one -- without
     this, the wrap-around transition (last photo back to the first)
     would stack in reverse, since it goes forward in the slideshow but
     backward through the DOM. */
  z-index: 2;
  opacity: 1;
  transform: scale(1);
}

/* Prev/next + dots control row, sitting below the photo (not on top of
   it) -- arrows flank the dots so the whole row reads as one control
   cluster. Neutral by default and only pick up the section's orange
   accent on hover, so they read as a quiet UI control rather than
   competing with the photo. */
.about-gallery-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.about-gallery-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: 0 2px 6px var(--shadow-color-soft);
  cursor: pointer;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.about-gallery-arrow svg {
  width: 18px;
  height: 18px;
}

.about-gallery-arrow:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  transform: scale(1.06);
}

.about-gallery-arrow:active {
  transform: scale(0.94);
  transition: transform 120ms ease-out;
}

/* Floating "Founder / Expert" card, parked beside the photo's lower-right
   corner (mostly outside the frame, only its left sliver overlapping the
   photo) -- positioned against .about-gallery-media (see above), not
   .about-gallery-frame, specifically so the negative right/bottom offsets
   below aren't clipped by the frame's own overflow:hidden. */
.about-founder-badge {
  position: absolute;
  right: -84px;
  bottom: -20px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 280px;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--color-white);
  box-shadow: 0 10px 30px var(--shadow-color-soft);
  animation: about-badge-float 4.5s ease-in-out infinite;
}

/* Slow, subtle vertical-only drift -- no horizontal movement, no easing
   sharp enough to read as a "bounce". */
@keyframes about-badge-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

.about-founder-badge-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--color-accent);
}

.about-founder-badge-text {
  min-width: 0;
}

.about-founder-badge-title {
  font-weight: 600;
  font-size: 17px;
  color: var(--color-ink);
  margin-bottom: 4px;
}

.about-founder-badge-subtitle {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--color-muted);
}

.about-dots {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.about-dots .dot {
  cursor: pointer;
}

/* ---------------------------------------------------------------------
   FAQ section (sits between About Us and Testimonials)
--------------------------------------------------------------------- */
.faq-section {
  width: 100%;
  background: var(--color-white);
  padding: 120px 0;
  scroll-margin-top: var(--header-height);
}

/* Pinned-left, not centered: same pattern as .about-inner/.services-inner
   (padding-left: var(--content-left), no margin:auto) so the FAQ label/
   heading/accordion share the exact left edge as the logo and the About
   Us text above. The previous "width:min(...); margin:0 auto" pattern
   (correct for .testimonials-inner, which is deliberately centered) put
   the FAQ's left edge at (100vw-1280px)/2 on wide screens instead --
   that's what made it drift right of About Us.

   grid-template-columns now reads the same shared
   --left-column-width/--right-column-width/--section-column-gap
   variables as .about-inner (see :root), instead of its own
   independent minmax()/1fr track sizes — that mismatch was what let the
   FAQ's right column stretch to a different width/position than the
   About Us image's column. */
.faq-inner {
  width: 100%;
  max-width: none;
  padding-left: var(--content-left);
  padding-right: clamp(48px, 6vw, 120px);
  display: grid;
  grid-template-columns: var(--left-column-width) var(--right-column-width);
  column-gap: var(--section-column-gap);
  align-items: start;
}

.faq-header {
  grid-column: 1;
  width: 100%;
  max-width: var(--left-column-width);
  justify-self: start;
  position: sticky;
  top: calc(var(--header-height) + 40px);
}

.faq-header .text-label {
  margin-bottom: 20px;
}

.faq-heading {
  font-size: var(--text-h2);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-ink);
  margin-bottom: 18px;
}

.faq-lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 420px;
  margin-bottom: 28px;
}

.faq-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 22px;
  border: 1px solid var(--color-ink);
  border-radius: 10px;
  color: var(--color-ink);
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.faq-cta:hover {
  background: var(--color-ink);
  color: var(--color-white);
}

.faq-cta-arrow {
  transition: transform var(--transition-fast);
}

.faq-cta:hover .faq-cta-arrow {
  transform: translateX(4px);
}

/* Right-column member of the shared About Us/FAQ grid — same
   grid-column, same width, same centering as .about-gallery above, so
   the questions sit in the exact same vertical column as the image. */
.faq-accordion {
  grid-column: 2;
  width: 100%;
  max-width: var(--right-column-width);
  justify-self: center;
  border-top: 1px solid var(--color-border);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
  /* Constant padding + matching negative margin (present in both open and
     closed states) instead of adding padding only on open -- the question
     row's position never shifts when a question is activated, only its
     background color does. */
  padding: 0 14px;
  margin: 0 -14px;
  border-radius: 12px;
  transition: background 280ms ease;
}

/* Very subtle warm tint on the active question -- background/radius only,
   never anything that would move the question or answer text. */
.faq-item.is-open {
  background: var(--orange-soft);
}

.faq-item-heading {
  font-weight: inherit;
}

.faq-trigger {
  width: 100%;
  padding: 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: transparent;
  border: 0;
  color: var(--color-ink);
  font-family: inherit;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.faq-trigger:hover {
  color: var(--color-accent);
}

.faq-trigger:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 6px;
}

.faq-chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--color-muted);
  transition: transform var(--transition-fast);
}

.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
  color: var(--color-accent);
}

/* Grid-rows trick instead of a fixed max-height number -- animating
   grid-template-rows from 0fr to 1fr always scales to this item's own
   *actual* content height. The old fixed max-height:1400px transitioned
   across that whole 1400px range regardless of real content height, so
   any answer much shorter than 1400px (nearly all of them) reached its
   real height almost instantly within that range and then visibly sat
   still doing nothing for the rest of the transition -- the "laggy,
   stuck" look this replaces. Requires no JS height measurement and stays
   correct if an answer's length (or the viewport's text reflow) changes. */
.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--ease-out-premium);
}

.faq-item.is-open .faq-content {
  grid-template-rows: 1fr;
}

.faq-answer {
  overflow: hidden;
  min-height: 0;
  padding: 0 0 28px;
  /* Fades and slides up into place as the row above expands -- opacity
     and transform animate independently of (and slightly out of phase
     with) the parent's grid-rows height animation, which is what gives
     the reveal its layered, unhurried feel instead of a single flat
     resize. */
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 300ms var(--ease-out-premium),
    transform 300ms var(--ease-out-premium);
  max-width: 640px;
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.7;
}

.faq-item.is-open .faq-answer {
  opacity: 1;
  transform: translateY(0);
}

.faq-answer p {
  margin: 0 0 16px;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer ol {
  margin: 0 0 16px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-answer ol li {
  padding-left: 4px;
}

.faq-answer strong {
  color: var(--color-ink);
  font-weight: 500;
}

/* ---- FAQ: independent tablet/mobile tiers -----------------------------
   Matches the About Us stacking breakpoint (900px) so both sections
   switch from the shared two-column grid to a single stacked column at
   the same viewport width. */
@media (max-width: 900px) {
  .faq-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* .faq-header/.faq-accordion's own grid-column: 1 / grid-column: 2
     (set unconditionally, above) still apply here -- without resetting
     them back to auto, the grid would keep honoring those explicit
     column placements and silently create an implicit second column to
     satisfy them, leaving the two side-by-side instead of stacked even
     though .faq-inner above is now a single "1fr" column. */
  .faq-header {
    grid-column: auto;
    position: static;
    max-width: none;
    justify-self: stretch;
  }

  .faq-accordion {
    grid-column: auto;
    max-width: none;
    justify-self: stretch;
  }
}

@media (max-width: 640px) {
  .faq-section {
    padding: 80px 0;
  }

  .faq-trigger {
    font-size: 18px;
    padding: 22px 0;
  }

  .faq-answer {
    font-size: 14px;
  }
}

/* Movement-based motion only -- height/opacity stay (an instant swap
   would make the answer's appearance harder to follow, not easier), just
   faster and without the translateY slide. */
@media (prefers-reduced-motion: reduce) {
  .faq-content {
    transition: grid-template-rows 150ms ease;
  }

  .faq-answer {
    transform: none;
    transition: opacity 150ms ease;
  }

  .faq-chevron {
    transition: none;
  }
}

/* ---------------------------------------------------------------------
   For Clients: Documents Checklist
   Sits between the FAQ accordion and Resource Library, for-clients.html
   only. (.guides-section/.guides-inner/.guides-header/.guides-heading
   below are also used by the Resource Library preview section further
   down -- see the comment on .resource-library-preview.)
--------------------------------------------------------------------- */
.documents-checklist-section {
  width: 100%;
  background: var(--color-white);
  padding: var(--space-section-lg) 0;
}

.documents-checklist-inner {
  width: min(100% - 48px, 1180px);
  margin: 0 auto;
}

.documents-checklist-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.documents-checklist-header .text-label {
  justify-content: center;
  margin-bottom: 20px;
}

.documents-checklist-heading {
  font-size: var(--text-h2);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-ink);
  margin-bottom: 14px;
}

.documents-checklist-lead {
  font-size: 0.98rem;
  color: var(--color-muted);
}

/* 2 grouped columns instead of 6 identical boxes: one soft container per
   audience group, holding 3 categories separated by hairlines. */
.documents-checklist-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: start;
}

.documents-checklist-column {
  background: var(--color-soft-white);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 8px 32px;
}

.documents-checklist-column-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding-top: 26px;
}

.documents-checklist-category {
  padding: 22px 0;
}

.documents-checklist-category + .documents-checklist-category {
  border-top: 1px solid var(--color-border);
}

.documents-checklist-category h3 {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: 14px;
}

.documents-checklist-category ul {
  display: grid;
  gap: 10px;
}

.documents-checklist-category li {
  position: relative;
  padding-left: 26px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-muted);
}

/* Check-mark badge instead of a plain bullet dot -- reinforces the
   "checklist" reading rather than a generic list. */
.documents-checklist-category li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

@media (max-width: 900px) {
  .documents-checklist-columns {
    grid-template-columns: 1fr;
  }
}

.guides-section {
  width: 100%;
  background: var(--color-white);
  padding: var(--space-section-md) 0;
}

.guides-section--soft {
  background: var(--color-soft-white);
}

.guides-inner {
  width: min(100% - 48px, 1180px);
  margin: 0 auto;
}

.guides-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 40px;
}

.guides-header .text-label {
  justify-content: center;
  margin-bottom: 20px;
}

.guides-heading {
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.blog-mention {
  text-align: center;
  margin-top: 40px;
  font-size: 0.92rem;
  color: var(--color-muted);
}

.blog-mention a {
  color: var(--color-accent);
  font-weight: 500;
  margin-left: 6px;
}

.blog-mention a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
   For Clients: Resources & Tools + Lead Magnets
   Sit between the FAQ accordion and the footer, for-clients.html only.
--------------------------------------------------------------------- */
.resources-section {
  width: 100%;
  background: var(--color-soft-white);
  padding: var(--space-section-lg) 0;
}

.resources-inner {
  width: min(100% - 48px, 1180px);
  margin: 0 auto;
}

.resources-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.resources-header .text-label {
  justify-content: center;
  margin-bottom: 20px;
}

.resources-heading {
  font-size: var(--text-h2);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-ink);
}

/* IRS Resources: five separate, independently clickable cards -- each
   its own bordered block (including the general "Official IRS
   Resources" entry point), not rows sharing one container. */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 640px;
  margin: 0 auto;
}

.resource-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 28px;
  display: block;
  text-decoration: none;
  color: inherit;
  transition:
    transform 220ms ease,
    border-color 220ms ease;
}

a.resource-card:hover,
a.resource-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-accent);
}

.resource-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  margin-bottom: 20px;
}

.resource-icon svg {
  width: 22px;
  height: 22px;
}

.resource-card h4 {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--color-ink);
}

.resource-card-arrow {
  display: inline-block;
  margin-top: 16px;
  color: var(--color-accent);
  font-size: 1.05rem;
  transition: transform 220ms ease;
}

a.resource-card:hover .resource-card-arrow,
a.resource-card:focus-visible .resource-card-arrow {
  transform: translateX(4px);
}

/* Five cards in a 2-column grid leave the last one alone in its row --
   center it across both columns instead of stranding it on the left. */
.resources-grid .resource-card:last-child {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 300px;
  justify-self: center;
}

@media (max-width: 560px) {
  .resources-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
  }

  .resources-grid .resource-card:last-child {
    max-width: none;
  }
}

.lead-magnets-section {
  width: 100%;
  background: var(--color-white);
  padding: var(--space-section-md) 0;
}

.lead-magnets-inner {
  width: min(100% - 48px, 1180px);
  margin: 0 auto;
}

.lead-magnets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Only the free PDF card remains here now that the paid checklist moved
   to its own page (see paid-checklists.html) -- center it at a readable
   width instead of stretching it across the old two-column track. */
.lead-magnets-grid--single {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

.lead-magnet-card {
  background: var(--surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 32px;
}

/* Free vs. paid read instantly apart -- free stays in the inviting
   accent-tinted family (low-friction), paid moves to a neutral white
   card with an ink-toned kicker (a considered purchase, not a freebie). */
.lead-magnet-card--free {
  background: var(--color-accent-soft);
  border-color: var(--orange-line);
}

.lead-magnet-card--paid {
  background: var(--color-white);
  border-color: var(--color-ink);
}

.lead-magnet-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}

.lead-magnet-card--free .lead-magnet-kicker {
  background: var(--color-white);
  border-radius: 999px;
  padding: 5px 12px;
}

.lead-magnet-card--paid .lead-magnet-kicker {
  color: var(--color-ink);
}

.lead-magnet-card h3 {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1.3;
  margin-bottom: 10px;
}

.lead-magnet-card > p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-muted);
  margin-bottom: 20px;
}

.lead-magnet-form {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.lead-magnet-form input {
  padding: 13px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-ink);
  font-size: 0.92rem;
  font-family: inherit;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.lead-magnet-form input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

/* Inline per-field validation messages -- hidden (and taking up no
   space in the form's grid gap) until initLeadMagnetForm() in shared.js
   fills one in and un-hides it. */
.lead-magnet-field-error {
  margin: -4px 2px 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--danger);
}

.lead-magnet-form input.is-invalid {
  border-color: var(--danger);
}

.lead-magnet-form button {
  padding: 13px 20px;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 200ms ease,
    border-color 200ms ease;
}

.lead-magnet-form button:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
}

.lead-magnet-status {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.lead-magnet-status.is-success {
  color: var(--color-accent);
}

.lead-magnet-buy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-white);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background 200ms ease;
}

.lead-magnet-buy-button:hover {
  background: var(--color-accent);
}

@media (max-width: 900px) {
  .lead-magnets-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   Paid Checklists & Guides page (paid-checklists.html): same card
   language as .resource-card / .lead-magnet-card -- white background,
   thin border, rounded corners, ink text, accent on hover -- just in a
   3/2/1-column grid sized for four short items instead of one or two.
--------------------------------------------------------------------- */
.paid-resources-section {
  width: 100%;
  background: var(--color-white);
  padding: 0 0 var(--space-section-lg);
}

.paid-resources-inner {
  width: min(100% - 48px, 1180px);
  margin: 0 auto;
}

.paid-resources-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.paid-resource-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 32px;
  transition:
    transform 220ms ease,
    border-color 220ms ease;
}

.paid-resource-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
}

/* Cover artwork: a fixed-aspect-ratio box so all three (slightly
   different source dimensions) line up identically card to card, with
   object-fit: contain so the whole cover -- text included -- stays
   visible instead of being cropped or stretched to fill it. */
.paid-resource-cover-link {
  display: block;
  align-self: stretch;
  margin-bottom: 20px;
}

.paid-resource-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-soft);
  border: 1px solid var(--color-border);
}

.paid-resource-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.paid-resource-title-link {
  align-self: stretch;
  text-decoration: none;
  color: inherit;
}

.paid-resource-card:hover .paid-resource-title-link h3 {
  color: var(--color-accent);
}

.paid-resource-card h3 {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-ink);
  margin-bottom: 10px;
  transition: color 200ms ease;
}

.paid-resource-card p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-muted);
  margin-bottom: 24px;
  flex-grow: 1;
}

.paid-resource-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-white);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 200ms ease;
}

.paid-resource-card:hover .paid-resource-button {
  background: var(--color-accent);
}

.paid-resource-button-arrow {
  transition: transform 200ms ease;
}

.paid-resource-card:hover .paid-resource-button-arrow {
  transform: translateX(4px);
}

/* Four cards in a 3-column grid leave the last one alone in its row at
   desktop width only (the 2-column tablet breakpoint below divides them
   evenly) -- center that lone card across the row instead of stranding
   it on the left. */
@media (min-width: 901px) {
  .paid-resources-grid .paid-resource-card:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 340px;
  }
}

@media (max-width: 900px) {
  .paid-resources-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .paid-resources-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   5. Testimonials section
--------------------------------------------------------------------- */
.testimonials-section {
  width: 100%;
  background: var(--color-soft-white);
  padding: 100px 0 140px;
  scroll-margin-top: var(
    --header-height
  ); /* clears the fixed header when jumped to via nav */
}

/* Unlike .services-inner/.about-inner (deliberately pinned to
   --content-left so they line up with the logo/hero text), this section
   is centered on the page as its own visual unit — that's what was
   requested here, so it uses margin: 0 auto instead. */
.testimonials-inner {
  width: min(100% - 48px, 1280px);
  margin: 0 auto;
}

.testimonials-header {
  max-width: 640px;
  margin: 0 auto 64px;
  text-align: center;
}

.testimonials-header .text-label {
  justify-content: center; /* .text-label is a flex row (dot + text); text-align alone won't center a flex child */
  margin-bottom: 20px;
}

.testimonials-heading {
  font-size: var(--text-h2);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-ink);
}

.testimonials-lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 560px;
  margin-top: 18px;
}

/* ---- Vertical auto-scrolling columns ("collection surfer"-style) ----
   Three columns, each a fixed-height overflow:hidden window onto a
   .testimonial-track that holds the column's cards TWICE in a row (an
   original set + an identical duplicate set). Animating the track from
   translateY(0) to translateY(-50%) moves it up by exactly one set's
   height — since both halves are identical, the moment the first set
   scrolls fully out of view, the duplicate is sitting in the exact
   position the first set started in, so the loop is seamless. */
.testimonials-marquee {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  height: clamp(640px, 70vh, 760px);

  /* Soft fade at the top/bottom edge of the columns, not a colored
     background gradient — just a transparency mask. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

.testimonial-column {
  height: 100%;
  overflow: hidden;
}

.testimonial-track {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  animation-name: testimonialScroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Pausing on hover only needs to target the track — the column itself
   stays put, just the content inside briefly stops drifting. */
.testimonial-column:hover .testimonial-track {
  animation-play-state: paused;
}

@keyframes testimonialScroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

.testimonial-track-set {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.testimonial-card {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color 250ms ease;
}

.testimonial-card:hover {
  border-color: var(--border-strong);
}

/* Mobile-only "show more" control -- see the 640px tier below for its
   actual layout. Hidden here (not just left unstyled) so it can never
   show up above the breakpoint even if a future edit reorders things. */
.testimonials-mobile-more {
  display: none;
}

.testimonial-rating {
  color: var(--color-ink);
  letter-spacing: 3px;
  font-size: 14px;
}

.testimonial-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-ink);
  flex-grow: 1;
  /* Reviews are stored with their original line breaks (see testimonials[]
     in script.js) -- this renders those breaks as-is instead of
     collapsing them into one run-on line, with no rewriting needed. */
  white-space: pre-line;
}

/* Default (unclamped) state has no line limit -- .is-clamped below is
   only added by buildTestimonialCard() for reviews longer than
   TESTIMONIAL_READ_MORE_THRESHOLD, so short reviews never show a
   "Read more" they don't need. */
.testimonial-text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.testimonial-read-more {
  align-self: flex-start;
  margin-top: -10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-accent);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}

.testimonial-read-more:hover {
  text-decoration: underline;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-soft-white);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
}

.testimonial-author-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink);
}

.testimonial-author-role {
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* ---------------------------------------------------------------------
   5.5. Quick-question lead capture
   Deliberately lightweight (two inputs + a button in one row on desktop)
   next to the full Contact form below it -- a plain white section, same
   reasoning as Advantages, so it doesn't blend into Testimonials'
   --color-soft-white right above it.
--------------------------------------------------------------------- */
.quick-question-section {
  width: 100%;
  background: var(--color-white);
  padding: var(--space-section-md) 0;
}

.quick-question-inner {
  width: min(100% - 48px, 960px);
  margin: 0 auto;
  text-align: center;
}

.quick-question-copy h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-ink);
  margin-bottom: 10px;
}

.quick-question-copy p {
  font-size: 0.98rem;
  color: var(--color-muted);
  margin-bottom: 32px;
}

.quick-question-form {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.quick-question-form input {
  flex: 1 1 220px;
  max-width: 280px;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--color-ink);
  font-size: 0.95rem;
  font-family: inherit;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.quick-question-form input::placeholder {
  color: var(--color-muted);
}

.quick-question-form input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.quick-question-form button {
  flex: 0 0 auto;
  padding: 14px 28px;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    color 200ms ease;
}

.quick-question-form button:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
}

.quick-question-status {
  margin-top: 16px;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.quick-question-status.is-success {
  color: var(--color-accent);
}

.quick-question-status.is-error {
  color: var(--danger);
}

@media (max-width: 640px) {
  .quick-question-form {
    flex-direction: column;
    align-items: stretch;
  }

  .quick-question-form input,
  .quick-question-form button {
    max-width: none;
  }
}

/* ---------------------------------------------------------------------
   6. Contact section
--------------------------------------------------------------------- */
.contact-section {
  width: 100%;
  /* Clips the form card's blurred glow (see .contact-form-card below) at
     the section edge so its blur bleed can never create page-level
     horizontal scroll on narrow viewports -- same reasoning as
     .services-section's overflow-x: hidden. */
  overflow-x: hidden;
  background: var(--color-soft-white);
  padding: clamp(110px, 12vw, 170px) 0;
  scroll-margin-top: var(--header-height);
}

.contact-container {
  width: min(100% - 48px, 1320px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: clamp(70px, 8vw, 130px);
  /* Centers .contact-copy against .contact-form-card's full height
     instead of pinning both to the row's top -- the form card is
     usually taller, so "start" left the copy block looking stranded
     near the top of a much taller card. Single column on mobile (see
     the max-width:900px override below) turns this into two stacked
     full-width rows with their own auto height, so centering has no
     visible effect there -- top-to-bottom flow stays untouched. */
  align-items: center;
}

.contact-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 20px;
}

.contact-copy h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-bottom: 18px;
}

.contact-copy p {
  color: var(--color-muted);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 480px;
}

.contact-details {
  display: grid;
  gap: 4px;
  margin-top: 36px;
}

.contact-detail {
  padding: 18px 0;
  border-top: 1px solid var(--color-border);
}

.contact-detail span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.contact-detail a {
  color: var(--color-ink);
  font-size: 1.05rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contact-detail a:hover {
  color: var(--color-accent);
}

.contact-detail .contact-detail-value {
  display: block;
  color: var(--color-ink);
  font-size: 1.05rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0;
}

/* Ambient glow (see initContactGlow in script.js, same IntersectionObserver
   + delayed-fade pattern as .services-card-shell's glow): a plain
   box-shadow rather than a ::before layer, because a ::before with a
   negative z-index still paints *above* this element's own background
   within the same stacking context -- it would show straight through
   the card's semi-transparent rgba(255,255,255,0.86) background no
   matter how it's tuned. A non-inset box-shadow can't have that problem;
   by spec it only ever renders outside the border-box, so the form
   itself always stays clean and readable. Starts fully transparent;
   .glow-visible (added once, after a short delay, by JS on scroll) fades
   it in slowly to the same soft ~18% opacity as .services-card-shell's
   glow, so the two ambient effects read as one consistent site-wide
   treatment rather than two different intensities. */
.contact-form-card {
  /* Lets #consultation-form (the anchor every "Book (a) Consultation"
     link across the site targets -- see the #contact -> #consultation-form
     hrefs and script.js's scrollToHashTarget) land below the fixed header
     instead of tucked underneath it, same as .contact-section's own
     scroll-margin-top above. var(--header-height) already resolves to the
     real height at whatever breakpoint is active -- 92px on desktop,
     76px + the safe-area inset on mobile (see the max-width:900px
     override near the top of this file) -- so this stays correct on both
     without a second, hand-tuned mobile value. */
  scroll-margin-top: var(--header-height);
  background: var(--surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 28px;
  padding: clamp(30px, 4vw, 44px);
  /* 3 layers so this can cross-fade smoothly into the matching 3-layer
     .glow-visible value below -- box-shadow transitions only interpolate
     when both states have the same number of comma-separated shadows. */
  box-shadow:
    0 0 0 0 rgba(240, 115, 26, 0),
    0 0 0 0 rgba(240, 115, 26, 0),
    0 0 0 0 rgba(240, 115, 26, 0);
  transition: box-shadow 1.4s ease-out;
}

/* Layered rather than one flat blur -- see .services-shell's identical
   comment above; same reasoning and same values, so the two ambient
   glows on the page still read as one consistent treatment. */
.contact-form-card.glow-visible {
  box-shadow:
    0 0 36px 0 rgba(240, 115, 26, 0.13),
    0 0 84px 8px rgba(240, 115, 26, 0.07),
    0 0 140px 16px rgba(240, 115, 26, 0.03);
}

.contact-form {
  display: grid;
  gap: 20px;
}

.form-field {
  display: grid;
  gap: 8px;
}

.form-field label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.form-field input,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 15px 16px;
  background: var(--color-white);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 16px;
  outline: none;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-muted);
  opacity: 0.75;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.form-field textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-submit {
  margin-top: 6px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: 999px;
  padding: 15px 28px;
  background: var(--color-ink);
  color: var(--color-white);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 200ms ease,
    transform 200ms ease;
}

.contact-submit:hover {
  background: var(--color-accent);
  transform: translateY(-2px);
}

.contact-submit:active {
  transform: scale(0.97);
  transition:
    transform 120ms ease-out,
    background 120ms ease-out;
}

/* ---------------------------------------------------------------------
   Calendly + Resend contact module (see
   AI_AGENT_CALENDLY_RESEND_DROPIN/snippets/contact-styles.css for the
   original drop-in). Nests inside the existing .contact-form-card shell
   (background/border/padding/glow already defined above), so this only
   adds the tab strip, the two panels, and the pieces the old single-mode
   form didn't have yet (Calendly placeholder, the interest <select>,
   the JS-driven status line). All color tokens below already matched
   the drop-in's expected variable names 1:1, so no renaming was needed. */
.contact-booking-card {
  display: grid;
  gap: 26px;
}

.contact-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-soft-white);
}

.contact-mode-tab {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-muted);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 120ms ease-out;
}

.contact-mode-tab.is-active {
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: 0 10px 28px rgba(23, 23, 23, 0.08);
}

.contact-mode-tab:active {
  transform: scale(0.97);
}

/* Fades/rises in on its own each time it goes from [hidden] to shown
   (the browser restarts a CSS animation whenever an element re-enters
   the render tree) -- a plain instant hidden/shown swap read as an
   abrupt flicker when switching between the "Send a message" and
   "Book a call" tabs. */
.contact-panel {
  display: grid;
  gap: 24px;
  animation: contact-panel-fade-in 260ms var(--ease-out-premium);
}

.contact-panel[hidden] {
  display: none;
}

@keyframes contact-panel-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.contact-panel-copy {
  display: grid;
  gap: 10px;
}

.contact-panel-kicker {
  margin: 0;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.contact-panel-copy h3 {
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.12;
}

.contact-panel-copy p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.98rem;
  line-height: 1.65;
}

.calendly-placeholder {
  min-height: 360px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(113, 88, 69, 0.28);
  border-radius: 22px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.78),
      rgba(250, 247, 242, 0.86)
    ),
    var(--color-white);
  overflow: hidden;
}

.calendly-placeholder.is-loaded {
  display: block;
  min-height: 640px;
  border-style: solid;
}

.booking-scheduler.is-api-loaded {
  display: grid;
  min-height: 0;
  padding: 22px;
  border-style: solid;
  place-items: stretch;
}

.booking-slot-groups {
  display: grid;
  gap: 20px;
}

.booking-slot-group {
  display: grid;
  gap: 10px;
}

.booking-slot-date {
  margin: 0;
  color: var(--color-ink);
  font-size: 0.92rem;
  font-weight: 600;
}

.booking-slot-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.booking-slot {
  min-height: 42px;
  padding: 9px 8px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-white);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 120ms ease;
}

.booking-slot:hover,
.booking-slot:focus-visible {
  border-color: var(--color-accent);
  outline: none;
}

.booking-slot.is-selected {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-white);
}

.booking-details-form {
  display: grid;
  gap: 16px;
  padding-top: 4px;
}

.booking-details-form[hidden],
.booking-confirmation[hidden] {
  display: none;
}

.booking-selected-time {
  margin: 0;
  padding: 13px 15px;
  border-radius: 14px;
  background: var(--color-soft-white);
  color: var(--color-ink);
  font-size: 0.92rem;
  font-weight: 500;
}

.booking-confirmation {
  display: grid;
  gap: 10px;
  padding: 22px;
  border: 1px solid rgba(53, 120, 83, 0.24);
  border-radius: 18px;
  background: rgba(53, 120, 83, 0.07);
}

.booking-confirmation h4,
.booking-confirmation p {
  margin: 0;
}

.booking-confirmation-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.booking-confirmation-links a {
  color: var(--color-ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.calendly-placeholder-inner {
  max-width: 330px;
  padding: 30px;
  text-align: center;
}

.calendly-placeholder-title {
  margin: 0 0 8px;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 500;
}

.calendly-placeholder-text {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.contact-scheduler-link {
  text-decoration: none;
}

.form-field select {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 15px 16px;
  background-color: var(--color-white);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 16px;
  outline: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
    linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.form-field select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-submit:disabled,
.contact-scheduler-link.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.contact-form-status {
  min-height: 1.4em;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
}

.contact-form-status.is-success {
  color: var(--color-accent);
}

.contact-form-status.is-error {
  color: var(--danger);
}

/* ---- Location map: full-width block below the form+details grid ------
   Deliberately a sibling of .contact-container (not a third grid column),
   so it spans the same width as the form/details above while sitting
   underneath both -- matches the required "form first, map second"
   order without affecting the two-column layout above it. */
.contact-map-section {
  width: min(100% - 48px, 1320px);
  margin: clamp(56px, 6vw, 80px) auto 0;
}

.contact-map-heading {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 8px;
}

.contact-map-address {
  color: var(--color-muted);
  font-size: 1rem;
  margin-bottom: 22px;
}

.contact-map-frame {
  position: relative;
  width: 100%;
  height: 420px;
  border-radius: 24px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  background: var(--color-soft-white);
}

/* A failed interactive renderer must never make the location disappear.
   Keep a compact, legible fallback surface in the exact same frame; the
   address and direct Google Maps link remain directly below it. */
.contact-map-frame.is-map-unavailable {
  display: grid;
  place-items: center;
  min-height: 180px;
  height: 180px;
  padding: 24px;
  text-align: center;
  color: var(--color-muted);
  background:
    radial-gradient(circle at center, rgba(240, 115, 26, 0.1), transparent 64%),
    var(--color-white);
}

.contact-map-frame.is-map-unavailable::before {
  content: "Map preview unavailable. Open the location in Google Maps below.";
  max-width: 420px;
  font-size: 0.95rem;
  line-height: 1.55;
}

.contact-map-frame.is-map-unavailable > * {
  display: none !important;
}

/* MapLibre renders its canvas/controls into this container at runtime
   (see initContactMap in script.js) -- it just needs to fill the frame
   above; overflow:hidden on the frame is what keeps the map's own square
   corners from poking out past the rounded border. */
.contact-map-frame .maplibregl-map {
  width: 100%;
  height: 100%;
}

/* Popup content (see popupHTML in initContactMap): MapLibre supplies the
   bubble/tail chrome itself via maplibre-gl.css, this only restyles the
   inner content to match the site's premium look instead of the
   library's plain default. */
.map-popup {
  font-family: var(--font-sans);
  padding: 2px;
}

.map-popup-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 4px;
}

.map-popup-address {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--color-muted);
  margin-bottom: 8px;
}

.map-popup-link {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-accent);
}

.map-popup-link:hover {
  text-decoration: underline;
}

.maplibregl-popup-content {
  border-radius: 14px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-soft);
  padding: 12px 14px;
}

.maplibregl-popup-close-button {
  color: var(--color-muted);
  font-size: 16px;
  padding: 4px 7px;
}

.maplibregl-popup-close-button:hover {
  color: var(--color-accent);
  background: transparent;
}

.contact-map-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 2px;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.contact-map-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ---- Contact section: independent tablet/mobile tiers ----------------- */
@media (max-width: 900px) {
  .contact-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .contact-section {
    padding: 88px 0;
  }

  .contact-container {
    width: min(100% - 32px, 1320px);
  }

  .contact-form-card {
    padding: 20px;
    border-radius: 22px;
  }

  .contact-mode-tab {
    min-height: 48px;
    font-size: 0.88rem;
  }

  .form-field input,
  .form-field textarea,
  .form-field select {
    font-size: 16px;
  }

  .booking-slot-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-form-card.glow-visible {
    box-shadow:
      0 0 24px 0 rgba(240, 115, 26, 0.13),
      0 0 50px 5px rgba(240, 115, 26, 0.07),
      0 0 84px 10px rgba(240, 115, 26, 0.03);
  }

  .contact-map-section {
    width: min(100% - 32px, 1320px);
    margin-top: 48px;
  }

  .contact-map-frame {
    height: 260px;
    border-radius: 20px;
  }

  .calendly-placeholder[hidden] {
    display: none;
  }

  .contact-scheduler-link.is-mobile-primary {
    width: 100%;
    min-height: 54px;
    margin-top: 0;
    background: linear-gradient(90deg, #ba540c, #e06b18);
    box-shadow: 0 12px 28px rgba(186, 84, 12, 0.2);
  }

  .contact-map-frame.is-mobile-map-placeholder {
    display: grid;
    place-items: center;
    height: 180px;
    min-height: 180px;
    padding: 28px;
    text-align: center;
    background:
      radial-gradient(
        circle at center,
        rgba(240, 115, 26, 0.13),
        transparent 58%
      ),
      var(--color-white);
  }

  .contact-map-frame.is-mobile-map-placeholder::before {
    content: "";
    width: 26px;
    height: 26px;
    margin-top: -18px;
    border-radius: 50% 50% 50% 0;
    background: var(--color-accent);
    box-shadow: 0 8px 18px rgba(186, 84, 12, 0.24);
    transform: rotate(-45deg);
  }

  .contact-map-frame.is-mobile-map-placeholder::after {
    content: "Open directions in Google Maps below";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 28px;
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .contact-map-link {
    width: 100%;
    min-height: 50px;
    justify-content: space-between;
    margin-top: 14px;
    padding: 0 18px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-white);
  }
}

/* ---- Header: narrow-desktop/small-laptop tier -------------------------
   Between this width and the 900px hamburger cutover below, the full
   five-item desktop nav + language switcher + "Book Consultation" need
   a more compact presentation. The shared clamp above keeps every
   control gap proportional while this tier reduces logo, type, and CTA
   width enough to prevent overflow. */
@media (max-width: 1500px) {
  .header-logo {
    width: 210px;
  }

  .nav-link {
    font-size: 12.5px;
  }

  .cta-outline {
    padding: 9px 14px;
  }
}

/* The added appearance switch still leaves a comfortable no-wrap desktop
   header just above the hamburger breakpoint. */
@media (min-width: 901px) and (max-width: 1100px) {
  .header {
    --header-control-gap: 9px;
  }

  .header-logo {
    width: 175px;
  }

  .nav-link {
    font-size: 11.5px;
  }

  .language-switcher {
    padding: 3px;
  }

  .lang-btn {
    padding: 5px 7px;
  }

  .desktop-theme-toggle {
    min-width: 34px;
    height: 34px;
  }

  .cta-outline {
    padding: 8px 11px;
    font-size: 12px;
  }
}

/* ---------------------------------------------------------------------
   Responsive (mobile-first adjustments for the desktop-priority layout)
--------------------------------------------------------------------- */
@media (max-width: 900px) {
  .header {
    height: var(--header-height);
    padding-left: var(--content-left);
    padding-right: var(--content-left);
    padding-top: env(safe-area-inset-top);
    border-bottom: 1px solid rgba(7, 27, 52, 0.07);
  }

  .header-logo {
    width: clamp(150px, 43vw, 175px);
  }

  .header-nav {
    display: none;
  }

  /* The header keeps only the logo + hamburger below this width; the
     language switcher (and the theme toggle beside it) move into the
     mobile panel instead (see .mobile-language-switcher/.mobile-theme-
     toggle) so neither is shown twice on screen. */
  #languageSwitcher {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
    width: 44px;
    height: 44px;
    margin-right: -8px;
  }

  .mobile-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    height: calc(100dvh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px var(--content-left) calc(28px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--color-white) 97%, transparent);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      opacity 200ms var(--ease-out-premium),
      transform 200ms var(--ease-out-premium);
    z-index: 190;
  }

  .mobile-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 54px;
    padding: 15px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-ink);
    background: transparent;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    text-align: left;
    cursor: pointer;
  }

  .mobile-nav-link.is-active {
    color: var(--color-accent);
  }

  .mobile-nav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin-top: 16px;
    padding: 14px 20px;
    border: 0;
    border-radius: 999px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(90deg, #ba540c, #e06b18);
    box-shadow: 0 12px 28px rgba(186, 84, 12, 0.2);
  }

  .mobile-nav .mobile-nav-bottom-row {
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    margin-top: 20px;
  }

  .desktop-theme-toggle {
    display: none;
  }

  .mobile-theme-toggle {
    width: auto;
    min-width: 88px;
    padding: 0 13px;
  }

  .mobile-theme-toggle .theme-toggle-text {
    display: inline;
  }

  .mobile-nav-dropdown-trigger .nav-caret {
    transition: transform var(--transition-fast);
  }

  .mobile-nav-dropdown.is-open .mobile-nav-dropdown-trigger .nav-caret {
    transform: rotate(180deg);
  }

  /* Same grid-rows technique as .faq-content -- scales smoothly to each
     dropdown's *actual* item count (Services has 9 rows and For Clients
     has 5) instead of transitioning across one fixed max-height
     number regardless of how many rows are really there, which is what
     made the FAQ accordion look laggy/stuck before it was fixed the same
     way. Needs the .mobile-nav-submenu-inner wrapper below as the single
     grid-item child that actually gets clipped. */
  .mobile-nav-submenu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 280ms var(--ease-in-out-premium);
  }

  .mobile-nav-dropdown.is-open .mobile-nav-submenu {
    grid-template-rows: 1fr;
  }

  .mobile-nav-submenu-inner {
    overflow: hidden;
    min-height: 0;
  }

  .mobile-nav-submenu-inner a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 11px 0 11px 16px;
    font-size: 14px;
    color: var(--color-muted);
  }

  .mobile-nav-submenu-inner a:hover {
    color: var(--color-accent);
  }

  .text-title {
    font-size: 1.4rem;
  }

  .text-description {
    font-size: 0.88rem;
  }
}

/* ---- Advantages section: independent tablet/mobile tiers -------------- */
@media (max-width: 900px) {
  .advantages-grid {
    grid-template-columns: 1fr;
  }

  .advantage-featured {
    padding: 32px 28px;
  }
}

/* ---- Services section: independent tablet/mobile tiers --------------- */
@media (max-width: 900px) {
  /* Smaller/still-layered glow on narrow screens — the section's
     overflow-x: hidden already guarantees no horizontal scroll, but a
     tighter glow here keeps it from crowding the shell on a smaller
     viewport. */
  .services-shell {
    box-shadow:
      0 0 24px 0 rgba(240, 115, 26, 0.13),
      0 0 50px 5px rgba(240, 115, 26, 0.07),
      0 0 84px 10px rgba(240, 115, 26, 0.03);
  }

  /* Narrower nav column: drop the benefit line (name + icon only) so the
     row never wraps awkwardly at this width, per "navigation may be
     narrower... preserve readable labels" for the tablet tier. */
  .services-shell {
    grid-template-columns: minmax(210px, 33%) 1fr;
  }

  .services-nav {
    padding: 18px;
  }

  .services-nav-benefit {
    display: none;
  }

  .services-panels {
    padding: 22px;
  }

  /* Re-order onto a single stacked column: header, top visual, cards,
     bottom visual, Learn more. The two flow columns are "unwrapped" via
     display:contents so their children become independent grid items that
     can be put back in this reading order with `order` -- both images stay
     in normal document flow throughout (see the shared comment above
     .panel-grid--service), so this is purely a re-order, not a return to
     flow from something else. */
  .service-composition {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }

  .service-composition-col {
    display: contents;
  }

  .service-composition .panel-header {
    order: 1;
  }

  .service-composition .service-visual--top {
    order: 2;
  }

  .service-composition .service-feature-cards {
    order: 3;
  }

  .service-composition .service-visual--bottom {
    order: 4;
  }

  .service-visual--top,
  .service-visual--bottom {
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
  }

  /* The desktop-only margin-top:76px/32px on accounting's and individuals'
     bottom visual (see the per-service overrides above) exists to shift
     the laptop/donut-chart down within a much taller two-column zone so it
     doesn't hug the header. In this single-column stacked layout it comes
     right after the feature cards instead, where that same push just
     opens a large gap above it -- so it's zeroed out here and the normal
     row-gap between stacked items takes over. */
  .service-panel[data-service="accounting-services"] .service-visual--bottom,
  .service-panel[data-service="individuals"] .service-visual--bottom {
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .services-section {
    padding: 40px 0 44px;
  }

  .services-inner {
    width: min(100% - 32px, 1320px);
  }

  .services-intro {
    margin-bottom: 20px;
  }

  .services-intro .text-label {
    margin-bottom: 10px;
  }

  .services-heading {
    font-size: 1.72rem;
    line-height: 1.08;
  }

  .services-lead {
    margin-top: 10px;
    font-size: 0.92rem;
    line-height: 1.45;
  }

  /* A compact two-column service picker avoids a nested horizontal scroll
     surface. The active dashboard remains directly below it. */
  .services-shell {
    grid-template-columns: 1fr;
    border-radius: 18px;
    box-shadow:
      0 0 16px 0 rgba(240, 115, 26, 0.11),
      0 0 32px 4px rgba(240, 115, 26, 0.06),
      0 0 54px 8px rgba(240, 115, 26, 0.025);
  }

  .services-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow: visible;
  }

  .services-nav-item {
    flex-direction: row;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    gap: 7px;
    padding: 7px 8px;
    border-radius: 12px;
  }

  .services-nav-item:last-child {
    grid-column: 1 / -1;
  }

  .services-nav-icon {
    width: 30px;
    height: 30px;
  }

  .services-nav-icon svg {
    width: 15px;
    height: 15px;
  }

  .services-nav-name {
    font-size: 12.5px;
    line-height: 1.15;
  }

  .services-nav-benefit {
    display: none;
  }

  .services-nav-arrow {
    display: none;
  }

  .services-panels {
    padding: 16px 12px 18px;
    min-height: 0;
  }

  .panel-grid {
    gap: 10px;
  }

  .panel-heading {
    font-size: clamp(1.4rem, 7vw, 1.7rem);
    line-height: 1.08;
  }

  .panel-supporting {
    margin-top: 5px;
    font-size: 0.86rem;
    line-height: 1.4;
  }

  /* Tighten the image/card composition further for phone widths. */
  .service-composition {
    row-gap: 12px;
  }

  .service-visual--top,
  .service-visual--bottom {
    max-width: 190px;
  }

  /* Same phone-width cap for the two enlarged per-service overrides
     (higher specificity than the shared rule above, so it needs repeating
     here) -- their larger tablet/desktop size would otherwise overflow a
     narrow phone screen. */
  .service-panel[data-service="accounting-services"] .service-visual--bottom,
  .service-panel[data-service="individuals"] .service-visual--bottom {
    max-width: 190px;
  }

  .service-feature-card {
    padding: 12px;
    gap: 10px;
    border-radius: 14px;
  }

  .service-feature-card-title {
    font-size: 13px;
  }

  .service-feature-card-desc {
    font-size: 12px;
  }

  .panel-learn-more {
    font-size: 12.5px;
  }

  .services-cta {
    margin-top: 20px;
  }

  .services-cta-button {
    padding: 12px 22px;
    font-size: 14px;
  }
}

/* ---- About Us section: independent tablet/mobile tiers ---------------
   The two-column layout itself shrinks via the shared --left-column-width/
   --right-column-width/--section-column-gap override (see the
   "@media (max-width: 1300px)" block in the :root section above) — that's
   what keeps this column in lockstep with the FAQ accordion's column at
   every tablet size, so nothing about-specific is needed here for that.
   Below the mobile breakpoint the sticky pin is disabled entirely (text
   stacks above the gallery in normal document flow, per the "no
   complicated sticky behavior on mobile" requirement); the gallery itself
   stays the same arrow/dot-controlled single-photo carousel as desktop,
   just shorter, so the interaction model doesn't change across
   breakpoints. This breakpoint matches the FAQ section's own stacking
   breakpoint below, so both sections switch to a single column at the
   same viewport width. */
@media (max-width: 900px) {
  .about-sticky {
    position: static;
    height: auto;
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .about-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .about-copy {
    grid-column: auto;
    max-width: none;
  }

  /* Undo the desktop/tablet rightward shift entirely — on a single
     stacked column the gallery should just span full width, not hug a
     "right edge" that no longer means anything here. grid-column reset
     to auto is required here: without it, .about-copy/.about-gallery's
     unconditional grid-column:1/2 forces an implicit second column even
     though grid-template-columns above is down to a single 1fr track. */
  .about-gallery {
    grid-column: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: auto;
    justify-self: stretch;
    margin-left: 0;
    margin-right: 0;
    transform: none;
  }

  /* Only the frame's own height shrinks here -- position/overflow/
     border/radius/shadow and the img rule above (position:absolute,
     crossfade, object-fit:cover) are untouched, so mobile gets the exact
     same rounded, cropped single-photo card as desktop. */
  .about-gallery-frame {
    width: 100% !important;
    height: 380px !important;
    max-width: none !important;
    max-height: none !important;
  }

  .about-gallery-arrow {
    width: 38px;
    height: 38px;
  }

  /* The floating overlay reads as cramped and covers too much of the
     photo at this width, so it drops out of the photo entirely and
     becomes a plain full-width card sitting below it instead. */
  .about-founder-badge {
    position: static;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    margin-top: 16px;
  }
}

@media (max-width: 640px) {
  .about-sticky {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .about-inner {
    gap: 28px;
  }

  .about-gallery-frame {
    height: clamp(280px, 86vw, 340px) !important;
    touch-action: pan-y;
  }

  .about-gallery-arrow {
    width: 44px;
    height: 44px;
  }

  .about-gallery-controls {
    margin-top: 18px;
  }
}

/* ---- Testimonials section: independent tablet/mobile tiers ----------- */
@media (max-width: 1100px) {
  .testimonials-marquee {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .testimonials-section {
    padding: 56px 0 60px;
  }

  .testimonials-inner {
    width: min(100% - 32px, 1280px);
  }

  .testimonials-heading {
    font-size: 1.5rem;
    line-height: 1.12;
  }

  .testimonials-lead {
    margin-top: 12px;
    font-size: 0.92rem;
    line-height: 1.48;
  }

  .testimonials-header {
    margin-bottom: 24px;
  }

  .testimonials-header .text-label {
    margin-bottom: 10px;
  }

  /* Mobile: no auto-scrolling marquee — every column just stacks full
     width in normal document flow, showing its 3 cards once (the
     duplicate half of each track, needed for the desktop loop, is
     hidden here so reviews don't appear to repeat). */
  .testimonials-marquee {
    display: block;
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .testimonial-column {
    height: auto;
    overflow: visible;
    margin-bottom: 10px;
  }

  .testimonial-column:last-child {
    margin-bottom: 0;
  }

  .testimonial-track {
    animation: none;
    transform: none;
  }

  .testimonial-track-set--duplicate {
    display: none;
  }

  .testimonial-card {
    gap: 12px;
    padding: 18px;
    border-radius: 18px;
  }

  .testimonial-text {
    font-size: 0.92rem;
    line-height: 1.5;
  }

  .testimonial-text.is-clamped {
    -webkit-line-clamp: 4;
  }

  .testimonial-author {
    gap: 10px;
  }

  .testimonial-avatar {
    width: 34px;
    height: 34px;
    font-size: 11px;
  }

  .testimonial-author-name {
    font-size: 0.88rem;
  }

  /* Beyond the current reveal count, set by initTestimonialsMobileReveal
     in script.js -- caps the stacked list instead of showing all reviews
     at once. */
  .testimonial-card.is-hidden-mobile {
    display: none;
  }

  .testimonials-mobile-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
  }

  .testimonials-mobile-status {
    font-size: 13px;
    color: var(--color-muted);
  }

  .testimonials-show-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 26px;
    border-radius: 999px;
    background: var(--color-white);
    border: 1px solid var(--border-strong);
    color: var(--color-ink);
    font-size: 14.5px;
    font-weight: 500;
    transition:
      border-color var(--transition-fast),
      color var(--transition-fast);
  }

  .testimonials-show-more-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .testimonials-show-more-btn:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
  }
}

/* Respect the OS-level "reduce motion" setting — freeze on the first
   (visible) set instead of forcing continuous movement on anyone who
   has asked their system to minimize animation. */
@media (prefers-reduced-motion: reduce) {
  .testimonial-track {
    animation: none;
  }
}

/* ---------------------------------------------------------------------
   7. Footer
   Deliberately dark (unlike every section above it) — a premium closing
   section reads better with a strong contrast shift, and it keeps its
   own self-contained color set below rather than reusing --color-ink
   etc., since those were tuned for text on light backgrounds. This is
   also why its background/text below are fixed literals rather than
   var(--color-ink)/var(--color-white): those two tokens flip meaning in
   dark mode (ink becomes light text, white becomes dark bg), which would
   invert the footer to a light panel instead of keeping it a permanent
   dark anchor in both themes.
--------------------------------------------------------------------- */
.site-footer {
  background: #171717;
  color: #ffffff;
  padding: 120px 0 40px;
}

.footer-inner {
  width: min(100% - 48px, 1280px);
  margin: 0 auto;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) 1.4fr;
  gap: clamp(80px, 10vw, 160px);
  align-items: start;
}

.footer-logo {
  width: clamp(240px, 19vw, 300px);
  height: auto;
  display: block;
}

.footer-description {
  max-width: 520px;
  margin-top: 32px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 16px;
  line-height: 1.6;
}

.footer-socials {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}

/* Minimal circular icon buttons — the icons themselves use
   stroke/fill: currentColor, so they inherit this same translucent-white
   (hover: green) color as plain text links would. */
.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.64);
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.footer-socials a svg {
  width: 16px;
  height: 16px;
}

.footer-socials a:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(32px, 4vw, 64px);
}

.footer-column h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.footer-column h3::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.footer-column a {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: 15px;
  margin-bottom: 14px;
  transition:
    color 200ms ease,
    transform 200ms ease;
}

.footer-column a:hover {
  color: #ffffff;
  transform: translateX(3px);
}

.footer-bottom {
  margin-top: 88px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-legal-divider {
  color: rgba(255, 255, 255, 0.3);
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--transition-fast);
}

.footer-legal a:hover {
  color: var(--color-accent);
}

.footer-credit {
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.38);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

.footer-credit a {
  color: rgba(255, 255, 255, 0.58);
  transition: color var(--transition-fast);
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
  color: var(--color-accent);
}

@media (max-width: 900px) {
  .footer-main {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .site-footer {
    padding: 88px 0 32px;
  }

  .footer-inner {
    width: min(100% - 32px, 1280px);
  }

  .footer-links {
    grid-template-columns: 1fr;
  }

  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .footer-legal-divider {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   About page (about.html)

   One shared container for every section — .about-page-container. It
   reuses --content-left (the same variable the fixed header's logo uses
   for its own padding-left) rather than a centered "margin: 0 auto" box.
   That's a deliberate choice, not an oversight: a centered box only lines
   up with the logo at one exact viewport width and drifts apart at every
   other width (the FAQ section had exactly this bug earlier and was
   fixed the same way — see .faq-inner above). Anchoring to the same
   --content-left padding, on a box that starts at the true left edge
   like the header does, is what actually guarantees the two stay on one
   vertical line at any screen size.
--------------------------------------------------------------------- */
.about-page-container {
  max-width: 1300px;
  padding-left: var(--content-left);
  padding-right: clamp(48px, 6vw, 120px);
}

/* ---- Section number ("01 —", "02 —", ...) ------------------------------
   One small component reused by every numbered section. */
.section-number {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--color-accent);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 34px;
}

.section-number i {
  display: block;
  width: 72px;
  height: 1px;
  background: var(--color-accent);
  font-style: normal;
}

/* ---- Page hero -------------------------------------------------------- */
.about-page-hero {
  width: 100%;
  background: var(--color-white);
  padding: calc(var(--header-height) + 64px) 0 96px;
}

.about-page-hero .text-label {
  margin-bottom: 20px;
}

.about-page-hero-heading {
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  max-width: 780px;
  margin-bottom: 22px;
}

.about-page-hero-intro {
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 620px;
  margin-bottom: 32px;
}

/* Solid CTA button — a third button style alongside .cta-outline (header)
   and .about-button (bordered "Read More"), used where the design calls
   for a filled, primary-looking action instead of an outline. */
.cta-solid {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-white);
  transition:
    opacity 200ms ease,
    transform 120ms ease-out;
}

.cta-solid:hover {
  opacity: 0.85;
}

.cta-solid:active {
  transform: scale(0.97);
}

/* Services page hero only: centers the eyebrow/heading/subtitle/CTA on
   the page instead of the pinned-left layout every other page reusing
   .about-page-hero (about.html, the service detail pages, etc.) keeps.
   Scoped to this one modifier class plus .services-page-container (the
   truly margin:auto-centered box already introduced for this page's
   card grid section below) so those other pages are entirely
   unaffected. */
.services-page-hero-centered {
  text-align: center;
}

.services-page-hero-centered .text-label {
  justify-content: center;
}

.services-page-hero-centered .about-page-hero-heading,
.services-page-hero-centered .about-page-hero-intro {
  margin-left: auto;
  margin-right: auto;
}

/* ---- Shared section scaffolding ----------------------------------------
   Every section (Mission, Our History, Expert, Principles, Why Choose Us,
   CTA) uses this same padding + top border, so the vertical rhythm and
   the divider between sections is identical throughout — no per-section
   one-off spacing values. */
.about-page-section {
  width: 100%;
  padding: var(--section-padding-y) 0;
  border-top: 1px solid var(--color-border);
}

.about-page-section--soft {
  background: var(--color-soft-white);
}

.about-page-section-heading {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

/* Two-column "heading left / copy right" layout, used by Mission and Our
   History. */
.about-page-split {
  display: grid;
  grid-template-columns: minmax(200px, 320px) 1fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: start;
}

.about-page-split-text {
  max-width: 620px;
}

.about-page-split-text p {
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.65;
  color: var(--color-muted);
  margin-bottom: 18px;
}

.about-page-split-text p:last-child {
  margin-bottom: 0;
}

/* ---- Founder / Expert --------------------------------------------------
   Text left, photo right (per the site's preferred layout) — mirrors the
   same "copy column + image column" idea as .about-inner on the homepage,
   just with the columns in the opposite left/right position.

   Uses the standard .about-page-container (padding-left: var(--content-
   left)) — the exact same box Mission/Our History use — so the text
   column's left edge lands on the same X coordinate as the "Our History"
   heading at every viewport width, guaranteed. An earlier version wrapped
   this section in its own centered container (margin: 0 auto) to push
   the photo further right; that's what made the text drift away from
   Our History's left edge, since a centered box only coincidentally
   lines up with the pinned-left one at a single viewport width.

   The second (photo) column uses a fluid "1fr" track instead of a fixed
   cap, so it still stretches out to the container's own right edge —
   the same shared right boundary every other section already uses —
   without needing a second, different container to get there. */
.about-page-founder-grid {
  display: grid;
  grid-template-columns: minmax(360px, 440px) minmax(480px, 1fr);
  column-gap: clamp(80px, 8vw, 140px);
  align-items: center;
}

.about-page-founder-copy {
  max-width: 440px;
}

.about-page-founder-copy .text-label {
  margin-bottom: 20px;
}

.about-page-founder-name {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-bottom: 8px;
}

.about-page-founder-role {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-accent);
  margin-bottom: 22px;
}

.about-page-founder-copy p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-muted);
  max-width: 560px;
  margin-bottom: 16px;
}

.about-page-founder-quote {
  margin-top: 22px;
  padding-left: 20px;
  border-left: 2px solid var(--color-accent);
}

.about-page-founder-quote p {
  font-size: 1.05rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--color-ink);
  max-width: 520px;
  margin-bottom: 14px;
}

.about-page-founder-quote p:last-child {
  margin-bottom: 0;
}

/* width: 100% (not fit-content) + max-width, no transform/margin-left
   nudge — the photo fills its own grid column exactly, so its right edge
   always lands on .about-page-container's right boundary, never past it. */
.about-page-founder-photo {
  width: 100%;
  max-width: 640px;
  justify-self: end;
}

.about-page-founder-photo img {
  display: block;
  width: 100%;
  height: clamp(540px, 42vw, 720px);
  object-fit: cover;
  object-position: center top;
  border-radius: 28px;
  border: 1px solid var(--color-border);
}

/* ---- Principles of Work ------------------------------------------------ */
.about-page-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.about-page-principle-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 32px;
}

.about-page-principle-card h3 {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 10px;
}

.about-page-principle-card p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-muted);
}

/* ---- Who We Help: editorial numbered rows (who-we-help.html) -----------
   Deliberately not a 3-col grid of boxes like .about-page-principle-card
   above -- a large watermark-style index numeral anchors each row, and
   the recommended-service tags do real routing work instead of the
   section just restating the header dropdown. */
.whowehelp-audience-section {
  /* Restore the deliberate breathing room above row 01 without adding
     another wrapper gutter after the final row. */
  padding-top: clamp(48px, 5vw, 72px);
  padding-bottom: 0;
}

.whowehelp-audience-section .about-page-container {
  width: 100%;
  max-width: none;
  padding-left: var(--content-left);
  padding-right: var(--content-left);
}

.whowehelp-list {
  display: flex;
  flex-direction: column;
  margin-top: 0;
}

.whowehelp-audience-section .whowehelp-row:first-child {
  padding-top: 0;
}

.whowehelp-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 32px);
  padding: 36px 0;
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.whowehelp-row + .whowehelp-row {
  border-top: 1px solid var(--color-border);
}

/* The clickable "card" part of the row -- index + icon + title/description.
   A real, single, non-nested <a> (service pills below are separate sibling
   links) so there is never an anchor-inside-an-anchor. */
.whowehelp-row-link {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 32px);
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
}

.whowehelp-row-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 6px;
  border-radius: 12px;
}

.whowehelp-row-index {
  flex-shrink: 0;
  width: 64px;
  font-family: var(--font-mono);
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1;
  color: var(--orange-line);
}

/* Round outline icon -- deliberately transparent/white with a thin gray
   border (not a filled orange tile like .advantage-icon elsewhere on the
   site), per this page's calmer, more editorial icon language. */
.whowehelp-row-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  background: var(--color-white);
}

.whowehelp-row-icon svg {
  width: 20px;
  height: 20px;
}

.whowehelp-row-body {
  display: block;
  min-width: 0;
}

.whowehelp-row-body h3 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 10px;
}

.whowehelp-row-body > p {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 560px;
}

/* Sibling of .whowehelp-row-link (not nested inside it) -- keeps every
   service pill an independently clickable link with no ancestor <a>. Fixed
   width on desktop so it reads as its own column, per the reference. */
.whowehelp-row-tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: 10px;
  flex: 0 0 clamp(300px, 26vw, 420px);
}

.whowehelp-tags-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  width: 100%;
}

.whowehelp-row-tags a {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-ink);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.whowehelp-row-tags a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.whowehelp-row-tags a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.whowehelp-row-arrow {
  flex-shrink: 0;
  align-self: center;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 18px;
  color: var(--color-muted);
}

@media (max-width: 900px) {
  .whowehelp-row {
    flex-wrap: wrap;
    row-gap: 14px;
  }

  .whowehelp-row-link {
    flex: 1 1 100%;
  }

  .whowehelp-row-tags {
    flex: 1 1 100%;
    padding-left: calc(64px + clamp(20px, 3vw, 32px));
  }

  .whowehelp-row-arrow {
    position: absolute;
    top: 36px;
    right: 0;
  }
}

@media (max-width: 640px) {
  .whowehelp-audience-section {
    padding: 44px 0;
  }

  .whowehelp-row {
    gap: 14px;
    padding: 20px 0;
  }

  .whowehelp-row-link {
    gap: 14px;
  }

  .whowehelp-row-index {
    width: 34px;
    font-size: 1.6rem;
  }

  .whowehelp-row-icon {
    width: 36px;
    height: 36px;
  }

  .whowehelp-row-icon svg {
    width: 17px;
    height: 17px;
  }

  .whowehelp-row-tags {
    padding-left: calc(34px + 14px);
    gap: 6px;
  }

  .whowehelp-row-arrow {
    top: 20px;
  }

  .whowehelp-row-body h3 {
    font-size: 1rem;
  }

  .whowehelp-row-body p {
    margin-top: 5px;
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .whowehelp-tags-label {
    width: 100%;
    margin-bottom: 2px;
    font-size: 9px;
  }

  .whowehelp-row-tags a {
    padding: 6px 10px;
    font-size: 0.72rem;
  }
}

/* ---------------------------------------------------------------------
   Who We Help: hero redesign -- two-column copy + decorative orbital
   visual with floating audience labels. Scoped entirely behind the
   .whowehelp-hero modifier (added alongside .about-page-hero in the HTML)
   so every other page reusing the plain .about-page-hero is untouched.
--------------------------------------------------------------------- */
.whowehelp-hero {
  --whowehelp-hero-space: clamp(56px, 6vw, 88px);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: auto;
  padding-top: calc(var(--header-height) + var(--whowehelp-hero-space));
  padding-bottom: var(--whowehelp-hero-space);
}

.whowehelp-hero .about-page-container {
  width: 100%;
  max-width: 1600px;
}

/* Purely decorative orbit lines -- aria-hidden, pointer-events: none, same
   convention as .hero-bg on index.html -- so they can never intercept
   clicks or block the floating labels sitting above them. */
.whowehelp-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.whowehelp-orbit {
  position: absolute;
  top: 50%;
  opacity: 0;
  animation: whowehelp-orbit-in 900ms var(--ease-soft) forwards;
}

.whowehelp-orbit--a {
  width: clamp(640px, 46vw, 900px);
  height: clamp(640px, 46vw, 900px);
  right: clamp(-320px, -14vw, -160px);
  transform: translateY(-50%) scale(0.94);
  animation-delay: 250ms;
}

.whowehelp-orbit--b {
  width: clamp(480px, 36vw, 700px);
  height: clamp(480px, 36vw, 700px);
  right: clamp(-260px, -11vw, -120px);
  transform: translateY(-50%) scale(0.94);
  animation-delay: 380ms;
}

.whowehelp-orbit--c {
  width: clamp(340px, 26vw, 520px);
  height: clamp(340px, 26vw, 520px);
  right: clamp(-180px, -8vw, -70px);
  transform: translateY(-50%) scale(0.94);
  animation-delay: 500ms;
}

@keyframes whowehelp-orbit-in {
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

.whowehelp-orbit-line {
  display: block;
  width: 100%;
  height: 100%;
}

.whowehelp-orbit-line circle {
  fill: none;
  stroke: rgba(240, 115, 26, 0.16);
  vector-effect: non-scaling-stroke;
  stroke-width: 1px;
}

.whowehelp-orbit--c .whowehelp-orbit-line circle {
  stroke: rgba(240, 115, 26, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .whowehelp-orbit {
    animation: none;
    opacity: 1;
  }
}

/* ---- Orbit symbol badges: $, %, & traveling along the orbit circles ----
   Two-layer split, same reasoning as the floating-pill slot/link split
   further down: the "track" owns the CSS motion-path travel
   (offset-distance, one infinite loop, never touches opacity/scale), the
   badge inside it owns the one-time entrance fade/scale -- so the two
   never fight over the transform property.

   offset-path's circle() percentages resolve against the track's OWN box,
   not its parent's -- giving the track inset: 0 with no explicit width/
   height makes that box match .whowehelp-orbit--X exactly (same square),
   so circle(48% at 50% 50%) traces the identical r=48-of-100 circle the
   visible SVG line already draws. The badge then just sits centered
   (top/left 50% + translate(-50%,-50%)) and gets carried along for free
   as its positioned ancestor's own box moves. */
.whowehelp-orbit-symbol-track {
  position: absolute;
  inset: 0;
  offset-rotate: 0deg;
  pointer-events: none;
}

.whowehelp-orbit-symbol-track--dollar {
  offset-path: circle(48% at 50% 50%);
  animation: whowehelp-symbol-travel 38s linear infinite;
  animation-delay: -6s;
}

.whowehelp-orbit-symbol-track--percent {
  offset-path: circle(48% at 50% 50%);
  animation: whowehelp-symbol-travel 31s linear infinite reverse;
  animation-delay: -14s;
}

.whowehelp-orbit-symbol-track--amp {
  offset-path: circle(48% at 50% 50%);
  animation: whowehelp-symbol-travel 26s linear infinite;
  animation-delay: -19s;
}

@keyframes whowehelp-symbol-travel {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

.whowehelp-orbit-symbol {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-elevated);
  border: 1px solid rgba(240, 115, 26, 0.38);
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(23, 23, 23, 0.07);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.88);
  animation: whowehelp-symbol-in 480ms var(--ease-soft) forwards;
}

.whowehelp-orbit-symbol--dollar {
  animation-delay: 550ms;
}
.whowehelp-orbit-symbol--percent {
  animation-delay: 650ms;
}
.whowehelp-orbit-symbol--amp {
  animation-delay: 750ms;
  font-size: 13px;
}

@keyframes whowehelp-symbol-in {
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .whowehelp-orbit-symbol-track {
    animation: none;
  }

  /* Freeze on the same three starting points the travel animations begin
     from (via their negative animation-delay above), so reduced-motion
     users still see the badges resting on the orbit lines, not bunched
     at 0%. */
  .whowehelp-orbit-symbol-track--dollar {
    offset-distance: 12%;
  }
  .whowehelp-orbit-symbol-track--percent {
    offset-distance: 48%;
  }
  .whowehelp-orbit-symbol-track--amp {
    offset-distance: 74%;
  }

  .whowehelp-orbit-symbol {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.whowehelp-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.whowehelp-hero-copy {
  max-width: 640px;
}

.whowehelp-hero .about-page-hero-heading {
  font-size: clamp(3.25rem, 5vw, 5.125rem);
  line-height: 0.98;
  max-width: 760px;
  text-wrap: balance;
  margin-bottom: 24px;
}

.whowehelp-hero .about-page-hero-intro {
  max-width: 650px;
  font-size: clamp(1.125rem, 1.2vw, 1.3125rem);
  color: var(--color-muted);
  margin-bottom: 32px;
}

.whowehelp-hero .cta-solid {
  transition:
    transform 220ms var(--ease-out-premium),
    box-shadow 220ms var(--ease-out-premium),
    opacity 220ms ease;
}

.whowehelp-hero .cta-solid:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(23, 23, 23, 0.16);
}

.whowehelp-hero .cta-solid:active {
  transform: translateY(0) scale(0.97);
}

/* [aria-hidden="true"] targets only the arrow glyph span -- the text span
   added alongside it (for EN/UA translation) must stay put on hover. */
.whowehelp-hero .cta-solid span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 220ms var(--ease-out-premium);
}

.whowehelp-hero .cta-solid:hover span[aria-hidden="true"] {
  transform: translateX(3px);
}

/* Staggered entrance for the left column, reusing the exact parent-
   neutralizes / children-stagger pattern .hero-content(.reveal) already
   established on index.html -- same generic IntersectionObserver in
   shared.js drives it, no JS changes needed. */
.whowehelp-hero-copy.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.whowehelp-hero-copy > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 750ms var(--ease-soft),
    transform 750ms var(--ease-soft);
}

.whowehelp-hero-copy.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.whowehelp-hero-copy.is-visible > *:nth-child(1) {
  transition-delay: 150ms;
}
.whowehelp-hero-copy.is-visible > *:nth-child(2) {
  transition-delay: 250ms;
}
.whowehelp-hero-copy.is-visible > *:nth-child(3) {
  transition-delay: 450ms;
}
.whowehelp-hero-copy.is-visible > *:nth-child(4) {
  transition-delay: 600ms;
}
.whowehelp-hero-copy.is-visible > *:nth-child(5) {
  transition-delay: 720ms;
}

@media (prefers-reduced-motion: reduce) {
  .whowehelp-hero-copy > * {
    transform: none;
    transition: opacity 300ms ease;
    transition-delay: 0ms !important;
  }
}

/* ---- Hero trust strip: avatars + shield, split by a thin divider ------- */
.whowehelp-trust-strip {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  /* Breathing room below the CTA button -- see the tablet/mobile
     overrides further down (20px / 18px) alongside this hero's other
     responsive tiers. */
  margin-top: 24px;
}

.whowehelp-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--color-muted);
}

.whowehelp-trust-avatars {
  display: flex;
}

.whowehelp-trust-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  border: 2px solid var(--color-white);
  margin-left: -10px;
  background: var(--color-white);
}

.whowehelp-trust-avatars .whowehelp-trust-avatar:first-child {
  margin-left: 0;
}

.whowehelp-trust-divider {
  width: 1px;
  height: 24px;
  background: var(--color-border);
  flex-shrink: 0;
}

.whowehelp-trust-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---- Hero right side: floating audience labels -------------------------
   Two-layer split on purpose: the absolutely-positioned "slot" owns the
   one-time entrance animation (opacity/transform, fill-mode: forwards),
   the real <a> inside it owns the hover transform via a plain transition.
   A single element can't cleanly do both -- once a forwards-filled
   animation finishes it keeps "owning" the properties it animated, so a
   :hover transform declared on that same element would never actually
   take over. Splitting the two jobs across parent/child avoids that. */
.whowehelp-hero-visual {
  position: relative;
  min-height: 460px;
}

.whowehelp-float-slot {
  position: absolute;
  opacity: 0;
  animation: whowehelp-float-in 600ms var(--ease-soft) forwards;
}

.whowehelp-float-slot--business {
  top: 6%;
  right: 4%;
  animation-delay: 700ms;
}
.whowehelp-float-slot--residents {
  top: 44%;
  left: -2%;
  animation-delay: 800ms;
}
.whowehelp-float-slot--contractors {
  top: 76%;
  right: 16%;
  animation-delay: 900ms;
}

@keyframes whowehelp-float-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .whowehelp-float-slot {
    animation: none;
    opacity: 1;
  }
}

/* Ambient levitation -- a third layer between the entrance slot and the
   real <a>. Keeps the same "each transform-animation gets its own
   element" rule the slot/link split above already relies on: the loop
   lives here, never on .whowehelp-float itself, so :hover's own transform
   on the link is never fought by a still-running infinite animation.
   Different duration/keyframe per pill (see individual rules below) so
   the three never move in sync; :hover on .whowehelp-float-slot pauses
   this mid-cycle since :hover bubbles up from the <a> to every ancestor,
   .whowehelp-float-levitate included. */
.whowehelp-float-levitate {
  will-change: transform;
}

/* Modifier class directly on the element being animated (not a
   .whowehelp-float-slot--X .whowehelp-float-levitate descendant selector)
   so this stays the same specificity (one class) as the
   prefers-reduced-motion override below -- a descendant selector here
   would out-specificity that override and the "disable looping motion"
   rule would silently lose. */
.whowehelp-float-levitate--business {
  animation: whowehelp-levitate-business 4.6s ease-in-out 0.6s infinite;
}

.whowehelp-float-levitate--residents {
  animation: whowehelp-levitate-residents 5.2s ease-in-out 0.9s infinite;
}

.whowehelp-float-levitate--contractors {
  animation: whowehelp-levitate-contractors 4.9s ease-in-out 1.2s infinite;
}

.whowehelp-float-slot:hover .whowehelp-float-levitate,
.whowehelp-float-slot:focus-within .whowehelp-float-levitate {
  animation-play-state: paused;
}

/* Amplitude raised from an earlier 4-5px pass -- at that size the motion
   was real (confirmed by tracking the rendered position over time) but too
   close to imperceptible for a casual glance. This is still a smooth
   ease-in-out drift, not a bounce -- just large enough to actually read as
   "floating" rather than measurement noise. */
@keyframes whowehelp-levitate-business {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(3px, -14px);
  }
}

@keyframes whowehelp-levitate-residents {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-3px, 12px);
  }
}

@keyframes whowehelp-levitate-contractors {
  0%,
  100% {
    transform: translate(0, 0);
  }
  40% {
    transform: translate(3px, -12px);
  }
  70% {
    transform: translate(1px, 3px);
  }
}

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

.whowehelp-float {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 26px rgba(23, 23, 23, 0.07);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
  white-space: nowrap;
  transition:
    transform 220ms var(--ease-out-premium),
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.whowehelp-float svg {
  width: 16px;
  height: 16px;
  color: var(--color-muted);
  flex-shrink: 0;
  transition:
    transform 220ms var(--ease-out-premium),
    color 220ms ease;
}

.whowehelp-float:hover,
.whowehelp-float:focus-visible {
  transform: translateY(-2px);
  border-color: var(--orange-line);
  box-shadow: 0 14px 30px rgba(23, 23, 23, 0.1);
}

.whowehelp-float:hover svg,
.whowehelp-float:focus-visible svg {
  transform: rotate(-4deg);
  color: var(--color-accent);
}

.whowehelp-float:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  .whowehelp-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.6fr);
    gap: clamp(32px, 4vw, 56px);
  }

  .whowehelp-hero-visual {
    min-height: 380px;
  }
}

@media (max-width: 900px) {
  .whowehelp-hero {
    --whowehelp-hero-space: 40px;
    min-height: auto;
    padding-top: calc(var(--header-height) + var(--whowehelp-hero-space));
    padding-bottom: var(--whowehelp-hero-space);
  }

  .whowehelp-hero-grid {
    grid-template-columns: 1fr;
  }

  .whowehelp-hero-copy {
    max-width: none;
  }

  /* Was a 220px-tall absolute-position canvas holding 3 nested orbit
     circles sized in vw (the largest, 74vw, is ~290px on a 390px phone --
     far bigger than the 220px container) plus 3 "floating" chips placed
     at percentage coordinates tuned for that canvas, not for how tall the
     oversized circles actually made it render. Both were the same root
     problem: decoration with real desktop-only coordinates dictating
     mobile layout. Replaced with a compact single arc that can't exceed
     its own corner of the section, and the 3 audience chips now sit in
     normal document flow below the copy -- no absolute coordinates, no
     dependency on the decoration's size. */
  .whowehelp-hero-visual {
    position: relative;
    min-height: 0;
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .whowehelp-orbit--b,
  .whowehelp-orbit--c {
    display: none;
  }

  .whowehelp-orbit--a {
    width: 220px;
    height: 220px;
    top: auto;
    bottom: -110px;
    right: -110px;
    opacity: 0.6;
    animation: none;
    transform: none !important;
  }

  .whowehelp-orbit-symbol {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  /* Chips: back in normal flow (position:static ignores the desktop
     top/left/right values below entirely) with the levitate/entrance
     motion turned off -- a static chip doesn't need to "float in" or
     drift, and disabling both keeps this corner of the page calm rather
     than adding more movement while three decorative badges are already
     travelling around the one remaining arc. */
  .whowehelp-float-slot {
    position: static;
    opacity: 1;
    animation: none;
  }

  .whowehelp-float-levitate {
    animation: none !important;
    transform: none !important;
  }

  .whowehelp-trust-strip {
    margin-top: 20px;
  }
}

@media (max-width: 560px) {
  .whowehelp-hero {
    --whowehelp-hero-space: 28px;
  }

  .whowehelp-hero .about-page-hero-heading {
    font-size: 2.1rem;
  }

  .whowehelp-trust-strip {
    margin-top: 18px;
  }

  .whowehelp-orbit--a {
    width: 180px;
    height: 180px;
    bottom: -90px;
    right: -90px;
  }
}

/* ---------------------------------------------------------------------
   Who We Help: final CTA -- eyebrow + two-line heading + practical
   consultation details, on a calm field with faint orbit-line fragments.
   Scoped behind .whowehelp-final-cta (added alongside .about-cta-section
   in the HTML) so every other page reusing the plain .about-cta-section
   is untouched.
--------------------------------------------------------------------- */
.whowehelp-final-cta {
  position: relative;
  overflow: hidden;
}

.whowehelp-final-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.whowehelp-final-cta-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(560px, 60vw, 900px);
  height: clamp(400px, 40vw, 620px);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(240, 115, 26, 0.06) 0%,
    rgba(240, 115, 26, 0.03) 45%,
    rgba(240, 115, 26, 0) 72%
  );
}

.whowehelp-final-cta-arc {
  position: absolute;
  display: block;
}

.whowehelp-final-cta-arc circle {
  fill: none;
  stroke: rgba(240, 115, 26, 0.11);
  vector-effect: non-scaling-stroke;
  stroke-width: 1px;
}

.whowehelp-final-cta-arc--a {
  width: clamp(420px, 38vw, 620px);
  height: clamp(420px, 38vw, 620px);
  left: clamp(-220px, -14vw, -100px);
  bottom: clamp(-220px, -14vw, -100px);
}

.whowehelp-final-cta-arc--b {
  width: clamp(480px, 42vw, 700px);
  height: clamp(480px, 42vw, 700px);
  right: clamp(-260px, -16vw, -120px);
  top: clamp(-240px, -15vw, -110px);
}

.whowehelp-final-cta-arc--b circle {
  stroke: rgba(240, 115, 26, 0.08);
}

.whowehelp-final-cta-content {
  position: relative;
  z-index: 1;
}

.whowehelp-final-cta-label {
  justify-content: center;
}

.whowehelp-final-cta-content h2 {
  margin-bottom: 28px;
}

/* Neutralize the base .reveal on this element and move it onto the direct
   children instead -- same parent/child stagger pattern used by
   .hero-content(.reveal) and .whowehelp-hero-copy(.reveal) above. */
.whowehelp-final-cta-content.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.whowehelp-final-cta-content > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms var(--ease-out-premium),
    transform 700ms var(--ease-out-premium);
}

.whowehelp-final-cta-content.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.whowehelp-final-cta-content.is-visible > *:nth-child(1) {
  transition-delay: 0ms;
}
.whowehelp-final-cta-content.is-visible > *:nth-child(2) {
  transition-delay: 90ms;
}
.whowehelp-final-cta-content.is-visible > *:nth-child(3) {
  transition-delay: 220ms;
}
.whowehelp-final-cta-content.is-visible > *:nth-child(4) {
  transition-delay: 340ms;
}

.whowehelp-final-cta .about-cta-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.whowehelp-final-cta-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.whowehelp-final-cta-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-muted);
}

.whowehelp-final-cta-trust-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.whowehelp-final-cta-divider {
  width: 1px;
  height: 20px;
  background: var(--color-border);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .whowehelp-final-cta {
    padding: 56px 0;
  }

  .whowehelp-final-cta-content h2 {
    margin-bottom: 20px;
  }

  .whowehelp-final-cta-trust {
    margin-top: 18px;
    gap: 12px 20px;
  }

  .whowehelp-final-cta-divider {
    display: none;
  }
}

/* ---- Why Choose Us ------------------------------------------------------ */
.about-page-why-heading-group {
  max-width: 680px;
}

.about-page-why-heading-group .text-label {
  margin-bottom: 20px;
}

.about-page-why-subheading {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-muted);
  margin-top: 14px;
}

.about-page-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.about-page-why-card {
  padding: 28px 0 0;
  border-top: 1px solid var(--color-border);
}

.about-page-why-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-bottom: 20px;
}

.about-page-why-card h3 {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 10px;
}

.about-page-why-card p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-muted);
}

/* ---- Final CTA -----------------------------------------------------------
   Deliberately its own standalone section — NOT nested inside
   .about-page-container. That container's left/right padding is
   asymmetric (padding-left: var(--content-left) vs a different
   padding-right — the pinned-left pattern that keeps every other section
   aligned with the header logo), so a "margin: 0 auto" block centered
   inside it ends up centered relative to that already-off-center leftover
   space, not the true page width — which is exactly what made this CTA
   look slightly off before. Giving it a plain full-width section with
   its own symmetric side padding is what makes it actually centered. */
.about-cta-section {
  width: 100%;
  padding: var(--section-padding-y) 0;
  background: var(--color-soft-white);
  border-top: 1px solid var(--color-border);
}

.about-cta-content {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  /* Same value on both sides on purpose (unlike .about-page-container) —
     this only keeps the text off the browser edge on narrow viewports;
     equal padding on both sides never shifts the centering above. */
  padding-left: var(--content-left);
  padding-right: var(--content-left);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-cta-content h2 {
  font-size: var(--text-h2);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-bottom: 14px;
}

.about-cta-content p {
  font-size: 1.05rem;
  color: var(--color-muted);
  margin-bottom: 28px;
}

.about-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-white);
  font-size: 15px;
  font-weight: 500;
  transition:
    transform 200ms ease,
    background 200ms ease;
}

.about-cta-button:hover {
  transform: translateY(-2px);
  background: var(--color-accent);
}

.about-cta-button:active {
  transform: scale(0.97);
  transition:
    transform 120ms ease-out,
    background 120ms ease-out;
}

/* ---- About page: independent tablet/mobile tiers ----------------------- */
@media (max-width: 1100px) {
  .about-page-founder-grid {
    gap: clamp(48px, 6vw, 90px);
  }

  .about-page-founder-photo img {
    height: clamp(480px, 46vw, 560px);
  }
}

@media (max-width: 900px) {
  .about-page-hero {
    padding: calc(var(--header-height) + 40px) 0 72px;
  }

  .section-number {
    font-size: 18px;
    margin-bottom: 24px;
  }

  .section-number i {
    width: 56px;
  }

  .about-page-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .about-page-founder-grid {
    grid-template-columns: 1fr;
  }

  .about-page-founder-photo {
    max-width: none;
    justify-self: stretch;
    order: -1; /* photo above text once stacked, per "stack safely" requirement */
  }

  .about-page-founder-photo img {
    height: clamp(360px, 90vw, 480px);
  }

  .about-page-principles-grid,
  .about-page-why-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 560px) {
  .about-page-hero-heading {
    font-size: 1.9rem;
  }

  .about-page-principle-card {
    padding: 24px;
  }
}

/* ---------------------------------------------------------------------
   About page pilot: founder-led, proof-led editorial direction
--------------------------------------------------------------------- */
.about-pilot-hero {
  padding-bottom: 0;
  overflow: hidden;
}

.about-pilot-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.78fr);
  gap: clamp(56px, 7vw, 120px);
  align-items: end;
}

.about-pilot-hero-copy {
  padding-bottom: clamp(80px, 8vw, 124px);
}

.about-pilot-hero .about-page-hero-heading {
  max-width: 820px;
  font-size: clamp(3rem, 5.35vw, 4.8rem);
}

.about-pilot-hero .about-page-hero-intro {
  max-width: 680px;
}

.about-pilot-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.about-pilot-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 4px;
  border-bottom: 1px solid var(--color-ink);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
  transition:
    color 180ms ease,
    border-color 180ms ease;
}

.about-pilot-text-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.about-pilot-portrait {
  position: relative;
  min-height: 650px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-bottom: 0;
  border-radius: 32px 32px 0 0;
  background:
    radial-gradient(
      circle at 50% 22%,
      rgba(247, 139, 31, 0.22),
      transparent 45%
    ),
    var(--color-soft-white);
}

.about-pilot-portrait::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(247, 139, 31, 0.24);
  border-radius: 50%;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
}

.about-pilot-portrait img {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  filter: drop-shadow(0 24px 34px rgba(17, 17, 17, 0.12));
}

.about-pilot-portrait figcaption {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--surface-elevated);
  box-shadow: 0 12px 32px rgba(17, 17, 17, 0.08);
  backdrop-filter: blur(14px);
}

.about-pilot-portrait figcaption strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink);
}

.about-pilot-portrait figcaption span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.about-pilot-proof {
  background: var(--dark-panel);
  border-top-color: var(--dark-panel);
}

.about-pilot-proof .text-label,
.about-pilot-proof .about-page-section-heading {
  color: var(--inverse-text);
}

.about-pilot-proof-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 48px;
  align-items: end;
}

.about-pilot-proof-heading .text-label {
  margin-bottom: 18px;
}

.about-pilot-proof-note {
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.58);
}

.about-pilot-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: 64px;
}

.about-pilot-metric {
  min-height: 245px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.about-pilot-metric strong {
  display: block;
  min-height: 72px;
  margin-bottom: 20px;
  font-size: clamp(2.4rem, 3.8vw, 4rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--inverse-text);
}

.about-pilot-metric strong span,
.about-pilot-metric--accent strong {
  color: var(--color-accent);
}

.about-pilot-metric h3 {
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--inverse-text);
}

.about-pilot-metric p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.58);
}

.about-pilot-growth {
  display: grid;
  grid-template-columns: minmax(150px, 230px) minmax(0, 560px);
  gap: 32px;
  align-items: center;
  margin-top: 52px;
  padding: 32px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.about-pilot-growth > strong {
  font-size: clamp(3rem, 5vw, 5.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--color-accent);
}

.about-pilot-growth h3 {
  margin-bottom: 8px;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--inverse-text);
}

.about-pilot-growth p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.58);
}

.about-pilot-story-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(420px, 1.18fr);
  gap: clamp(64px, 8vw, 140px);
  align-items: start;
}

.about-pilot-story .text-label,
.about-pilot-approach .text-label {
  margin-bottom: 18px;
}

.about-pilot-story-copy > p {
  margin-bottom: 20px;
  font-size: clamp(1rem, 1.12vw, 1.15rem);
  line-height: 1.7;
  color: var(--color-muted);
}

.about-pilot-founder-note {
  margin-top: 38px;
  padding: 28px 30px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 18px 18px 0;
  background: var(--color-white);
}

.about-pilot-founder-note > span,
.about-pilot-founder-belief > span {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.about-pilot-founder-note strong {
  display: block;
  margin-bottom: 10px;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-ink);
}

.about-pilot-founder-note p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.about-pilot-founder-belief {
  margin-top: 28px;
  padding: 26px;
  border-radius: 20px;
  background: var(--dark-panel);
}

.about-pilot-founder-belief h3 {
  margin-bottom: 12px;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--inverse-text);
}

.about-pilot-founder-belief p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.66);
}

.about-pilot-approach-title {
  max-width: 860px;
}

.about-pilot-approach .about-page-principles-grid {
  margin-top: 56px;
}

.about-pilot-approach .about-page-principle-card {
  min-height: 245px;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.about-pilot-approach .about-page-principle-card:hover {
  transform: translateY(-4px);
  border-color: rgba(247, 139, 31, 0.35);
  box-shadow: 0 18px 42px rgba(17, 17, 17, 0.07);
}

.about-pilot-approach .about-page-principle-card p {
  margin-top: auto;
}

.about-pilot-context .about-page-why-heading-group {
  max-width: 760px;
}

.about-pilot-context .about-page-why-card {
  min-height: 190px;
}

.about-pilot-cta .text-label {
  justify-content: center;
  margin-bottom: 20px;
}

.about-pilot-actions--centered {
  justify-content: center;
}

.about-pilot-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 28px;
  border: 1px solid var(--color-ink);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink);
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.about-pilot-secondary-button:hover {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-white);
}

/* Editorial continuation below the metrics section. These sections use
   rules, scale, and whitespace instead of boxed card grids. */
.about-editorial-pull {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  column-gap: 32px;
  row-gap: 12px;
  margin-top: 52px;
  padding: 34px 0;
  border-top: 1px solid var(--color-ink);
  border-bottom: 1px solid var(--color-border);
}

.about-editorial-pull > span {
  grid-row: 1 / span 2;
  padding-top: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.about-editorial-pull strong {
  display: block;
  max-width: 560px;
  font-size: clamp(1.65rem, 2.4vw, 2.35rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--color-ink);
}

.about-editorial-pull p {
  max-width: 520px;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--color-muted);
}

.about-founder-principle {
  position: relative;
  margin-top: 34px;
  padding: 30px 0 0 32px;
  border-top: 1px solid var(--color-border);
}

.about-founder-principle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 30px;
  bottom: 4px;
  width: 2px;
  background: var(--color-accent);
}

.about-founder-principle > span {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.about-founder-principle h3 {
  max-width: 430px;
  margin-bottom: 14px;
  font-size: clamp(1.55rem, 2.2vw, 2.1rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--color-ink);
}

.about-founder-principle p {
  max-width: 430px;
  margin-bottom: 0;
}

/* Credentials strip: a full-width row below the founder grid (not boxed
   into the 440px copy column, which is too narrow for three legible
   columns). Same rule/type language as the rest of the page -- a thin
   top border and plain text, no card backgrounds or icons. */
.about-founder-credentials {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
}

.about-founder-credentials-intro {
  max-width: 620px;
  margin-bottom: 36px;
}

.about-founder-credentials-intro .text-label {
  margin-bottom: 14px;
}

.about-founder-credentials-intro h3 {
  margin-bottom: 12px;
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.about-founder-credentials-intro p {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--color-muted);
}

.about-founder-credentials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px);
}

.about-founder-credential {
  padding-top: 20px;
  border-top: 1px solid var(--color-ink);
}

.about-founder-credential h4 {
  margin-bottom: 6px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.about-founder-credential p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-muted);
}

@media (max-width: 700px) {
  .about-founder-credentials-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.about-method-list {
  margin-top: 64px;
  border-top: 1px solid var(--color-ink);
}

.about-method-row {
  display: grid;
  grid-template-columns: 92px minmax(250px, 0.8fr) minmax(320px, 1fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: start;
  padding: 42px 0 46px;
  border-bottom: 1px solid var(--color-border);
}

.about-method-number {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 500;
  line-height: 1;
  color: rgba(247, 139, 31, 0.48);
  transition: color 180ms ease;
}

.about-method-row h3 {
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  transition: transform 180ms ease;
}

.about-method-row p {
  max-width: 530px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-muted);
}

.about-method-row:hover .about-method-number {
  color: var(--color-accent);
}

.about-method-row:hover h3 {
  transform: translateX(6px);
}

.about-real-life-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(480px, 1.22fr);
  gap: clamp(70px, 9vw, 150px);
  align-items: start;
}

.about-real-life-heading .text-label {
  margin-bottom: 18px;
}

.about-real-life-intro {
  max-width: 470px;
  margin-top: 24px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}

.about-situation-list {
  border-top: 1px solid var(--color-ink);
}

.about-situation-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 28px;
  padding: 38px 0 42px;
  border-bottom: 1px solid var(--color-border);
}

.about-situation-row > span {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.about-situation-row h3 {
  margin-bottom: 12px;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.about-situation-row p {
  max-width: 600px;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--color-muted);
}

.about-pilot-cta {
  border-top: 0;
  /* This panel uses dark --color-ink text/buttons directly on top of this
     background (opposite of --color-accent's usual role as text/button
     color on white) -- it needs the brighter, pre-WCAG-fix orange shade to
     keep that ink text readable (ink-on-#f0731a is 6.45:1; ink-on-the-
     darkened --color-accent token is only 3.92:1). Intentionally a literal,
     not var(--color-accent). */
  background: #f0731a;
}

.about-pilot-cta .about-cta-content {
  max-width: 930px;
}

.about-pilot-cta .text-label {
  color: var(--color-ink);
}

.about-pilot-cta .label-dot {
  background: var(--color-white);
}

.about-pilot-cta .about-cta-content h2 {
  font-size: clamp(2.5rem, 5vw, 4.8rem);
  line-height: 1.02;
}

.about-pilot-cta .about-cta-content > p {
  color: rgba(17, 17, 17, 0.72);
}

.about-pilot-cta .about-pilot-secondary-button {
  border-color: rgba(17, 17, 17, 0.55);
}

.about-pilot-cta .about-pilot-secondary-button:hover {
  border-color: var(--color-ink);
  background: transparent;
  color: var(--color-ink);
}

@media (max-width: 1100px) {
  .about-pilot-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
    gap: 48px;
  }

  .about-pilot-portrait {
    min-height: 560px;
  }

  .about-pilot-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .about-pilot-hero-grid,
  .about-pilot-proof-heading,
  .about-pilot-story-grid {
    grid-template-columns: 1fr;
  }

  .about-pilot-hero-copy {
    padding-bottom: 12px;
  }

  .about-pilot-hero .about-page-hero-heading {
    font-size: clamp(2.6rem, 8.5vw, 4rem);
  }

  .about-pilot-portrait {
    min-height: 540px;
    border-bottom: 1px solid var(--color-border);
    border-radius: 28px;
  }

  .about-pilot-proof-heading,
  .about-pilot-story-grid {
    gap: 34px;
  }

  .about-method-row {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 18px 26px;
  }

  .about-method-row p {
    grid-column: 2;
  }

  .about-real-life-grid {
    grid-template-columns: 1fr;
    gap: 52px;
  }
}

@media (max-width: 560px) {
  .about-pilot-hero .about-page-hero-heading {
    font-size: 2.35rem;
  }

  .about-pilot-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .about-pilot-actions .cta-solid,
  .about-pilot-actions .about-cta-button,
  .about-pilot-actions .about-pilot-secondary-button {
    width: 100%;
    justify-content: center;
  }

  .about-pilot-text-link {
    align-self: flex-start;
  }

  .about-pilot-portrait {
    min-height: 430px;
  }

  .about-pilot-portrait::before {
    width: 360px;
    height: 360px;
    top: 48px;
  }

  .about-pilot-portrait figcaption {
    left: 14px;
    right: 14px;
    bottom: 14px;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .about-pilot-metrics {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-top: 44px;
  }

  .about-pilot-metric {
    min-height: 0;
  }

  .about-pilot-growth {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .about-editorial-pull {
    grid-template-columns: 1fr;
    padding: 28px 0;
  }

  .about-editorial-pull > span {
    grid-row: auto;
  }

  .about-founder-principle {
    padding-left: 22px;
  }

  .about-method-list {
    margin-top: 44px;
  }

  .about-method-row {
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 32px 0 36px;
  }

  .about-method-row p {
    grid-column: 1 / -1;
  }

  .about-situation-row {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 18px;
    padding: 30px 0 34px;
  }

  .about-pilot-cta .about-cta-content h2 {
    font-size: 2.45rem;
  }
}

/* ---------------------------------------------------------------------
   About page visual QA pass

   The About page uses a genuinely centered, equal-sided content frame.
   These rules are body-scoped so the shared page components on Services
   and Who We Help retain their existing layout.
--------------------------------------------------------------------- */
.about-page .about-page-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(32px, 6vw, 96px);
}

.about-page .about-page-section {
  padding-block: clamp(88px, 8vw, 128px);
}

.about-page .about-pilot-hero-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(400px, 0.85fr);
  gap: clamp(56px, 7vw, 104px);
  align-items: stretch;
}

.about-page .about-pilot-hero-copy {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: clamp(72px, 7vw, 108px);
}

.about-page .about-pilot-portrait {
  min-height: 640px;
  border-radius: 28px 28px 0 0;
  background: var(--color-soft-white);
}

.about-page .about-pilot-portrait::before {
  display: none;
}

.about-page .about-pilot-portrait img {
  object-position: center 58%;
  filter: none;
}

.about-page .about-pilot-story-grid {
  grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(64px, 8vw, 124px);
}

.about-photo-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.25vw, 20px);
  margin-top: clamp(56px, 6vw, 88px);
}

.about-photo-strip figure {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-white);
}

.about-photo-strip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  transition: transform 500ms ease;
}

.about-photo-strip figure:nth-child(2) img {
  object-position: center 61%;
}

.about-photo-strip figure:nth-child(3) img {
  object-position: center 45%;
}

@media (hover: hover) {
  .about-photo-strip figure:hover img {
    transform: scale(1.025);
  }
}

.about-page .about-page-founder-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(64px, 8vw, 120px);
  align-items: stretch;
}

.about-page .about-page-founder-copy {
  align-self: center;
  max-width: 520px;
}

.about-page .about-page-founder-photo {
  max-width: none;
  align-self: stretch;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 24px;
}

.about-page .about-page-founder-photo img {
  height: 100%;
  min-height: 650px;
  border: 0;
  border-radius: 0;
  object-position: center 34%;
}

.about-page .about-method-row {
  grid-template-columns: 84px minmax(260px, 0.9fr) minmax(320px, 1.1fr);
  gap: clamp(28px, 4.5vw, 72px);
}

.about-page .about-method-row p {
  justify-self: start;
}

.about-page .about-real-life-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(64px, 8vw, 120px);
}

.about-page .about-real-life-heading {
  max-width: 520px;
}

.about-page .about-situation-row {
  grid-template-columns: 54px minmax(0, 1fr);
}

.about-page .about-cta-content {
  box-sizing: border-box;
  width: 100%;
  max-width: 1050px;
  padding-inline: clamp(28px, 6vw, 96px);
}

@media (max-width: 1100px) {
  .about-page .about-pilot-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(350px, 0.82fr);
    gap: 48px;
  }

  .about-page .about-pilot-portrait {
    min-height: 560px;
  }

  .about-page .about-page-founder-grid {
    column-gap: 56px;
  }
}

@media (max-width: 900px) {
  .about-page .about-page-container {
    padding-inline: clamp(28px, 6vw, 48px);
  }

  .about-page .about-page-section {
    padding-block: clamp(72px, 10vw, 96px);
  }

  .about-page .about-pilot-hero-grid,
  .about-page .about-pilot-story-grid,
  .about-page .about-page-founder-grid,
  .about-page .about-real-life-grid {
    grid-template-columns: 1fr;
  }

  .about-page .about-pilot-hero-grid {
    gap: 44px;
  }

  .about-page .about-pilot-hero-copy {
    padding-bottom: 0;
  }

  .about-page .about-pilot-portrait {
    width: min(100%, 620px);
    height: clamp(500px, 78vw, 620px);
    min-height: 0;
    justify-self: center;
    border-bottom: 1px solid var(--color-border);
    border-radius: 24px;
  }

  .about-photo-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-page .about-page-founder-grid {
    gap: 48px;
  }

  .about-page .about-page-founder-photo {
    order: 0;
    width: min(100%, 620px);
    justify-self: center;
  }

  .about-page .about-page-founder-photo img {
    height: min(112vw, 620px);
    min-height: 500px;
  }

  .about-page .about-method-row {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 18px 24px;
  }

  .about-page .about-method-row p {
    grid-column: 2;
  }

  .about-page .about-real-life-grid {
    gap: 52px;
  }
}

@media (max-width: 560px) {
  .about-page .about-page-container {
    padding-inline: 20px;
  }

  .about-page .about-page-section {
    padding-block: 56px;
  }

  .about-page .about-pilot-hero-grid {
    gap: 26px;
  }

  .about-page .about-pilot-portrait {
    height: min(96vw, 390px);
    border-radius: 18px;
  }

  .about-page .about-pilot-portrait img {
    object-position: center 60%;
  }

  .about-photo-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 32px;
  }

  .about-photo-strip figure:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }

  .about-photo-strip figure:not(:first-child) {
    aspect-ratio: 1;
  }

  .about-page .about-page-founder-grid {
    gap: 28px;
  }

  .about-page .about-page-founder-photo {
    border-radius: 18px;
  }

  .about-page .about-page-founder-photo img {
    height: min(104vw, 420px);
    min-height: 360px;
  }

  .about-page .about-pilot-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 16px;
    margin-top: 32px;
  }

  .about-page .about-pilot-metric {
    padding-top: 20px;
  }

  .about-page .about-pilot-metric strong {
    min-height: 54px;
    font-size: clamp(2.2rem, 11vw, 3.1rem);
  }

  .about-page .about-method-row {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    padding: 24px 0 26px;
  }

  .about-page .about-method-row p {
    grid-column: 1 / -1;
  }

  .about-page .about-situation-row {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 16px;
    padding: 24px 0 26px;
  }

  .about-page .about-cta-content {
    padding-inline: 24px;
  }
}

/* ---------------------------------------------------------------------
   Services system (services.html + the 5 individual service pages)

   Reuses the same generic building blocks the About page introduced —
   .about-page-container, .about-page-hero*, .about-page-section(--soft),
   .about-page-split(-text), .about-page-section-heading, .section-number,
   .cta-solid, .about-cta-section/-content/-button — instead of
   duplicating a second copy of the same container/heading/CTA rules
   under a new name. Only what's actually new to this page family (the
   service cards themselves, and the small subtitle/list/note styles the
   detail pages need) gets its own class below.
--------------------------------------------------------------------- */

/* ---- Services page: centered intro + decorative background circle ----
   Scoped to .services-page-showcase (combined with the shared
   .about-page-section/--soft classes on this one section only), so
   Mission/Our History on about.html — which reuse those same shared
   classes — keep their normal pinned-left layout untouched.

   The circle/glow/orbiting-dot markup and animation mirror the hero
   section's own .hero-bg/.hero-circle-* (see that block above) exactly —
   same rigid-rotation trick for the dot — just centered behind this
   section's cards instead of parked off-screen behind the hero's copy,
   and at a fainter --orbit-line weight so it reads as background texture
   rather than a repeat of the hero's more prominent circle. */
.services-page-showcase {
  position: relative;
  overflow: hidden;
}

.services-page-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.services-page-glow {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  width: clamp(748px, 73vw, 1210px);
  height: clamp(748px, 73vw, 1210px);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(240, 115, 26, 0.07) 0%,
    rgba(240, 115, 26, 0.04) 38%,
    rgba(240, 115, 26, 0.015) 62%,
    rgba(240, 115, 26, 0) 78%
  );
}

.services-page-circle-wrap {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  width: clamp(792px, 77vw, 1300px);
  height: clamp(792px, 77vw, 1300px);
}

.services-page-circle-outline {
  display: block;
  width: 100%;
  height: 100%;
}

.services-page-circle-outline circle {
  fill: none;
  stroke: var(--orbit-line);
  vector-effect: non-scaling-stroke;
  stroke-width: 1px;
}

/* Rotating this wrapper around its own center -- which coincides exactly
   with the circle's center, since both share the same box -- sweeps the
   dollar symbol inside it around the circumference at a constant radius;
   it can never drift off the line because it's a rigid rotation, not an
   independently animated position.

   Unlike a full endless orbit, this swings back and forth over a ~130deg
   arc instead of a full 360deg loop: rotate(0deg) is the top-of-circle
   spot (top: 2%, left: 50% on the symbol itself), which sits directly
   under the centered "needs." line in the heading above (see
   services.html) -- so ending each swing at 0deg is what makes the
   dollar "arrive" at that word instead of just passing by it on an
   endless lap. ease-in-out + alternate means it only ever reverses
   smoothly at each end of the swing, never jumps or snaps back. */
.services-page-circle-spinner {
  position: absolute;
  inset: 0;
  animation: services-dollar-arc 10s ease-in-out infinite alternate;
}

@keyframes services-dollar-arc {
  from {
    transform: rotate(-130deg);
  }
  to {
    transform: rotate(0deg);
  }
}

/* Second orbiting piece — same rigid-rotation wrapper as
   .services-page-circle-spinner, just spun the opposite way
   (animation-direction: reverse, in the shorthand below) so the two
   pieces visibly diverge and cross paths instead of moving together. */
.services-page-circle-spinner--reverse {
  animation: hero-orbit 22s linear infinite reverse;
}

/* Each orbiting symbol sits at the same top-of-circle spot the plain dot
   used to (top: 2%, left: 50%), swept around the circumference by its
   parent .services-page-circle-spinner's rotation exactly like before.
   The difference: a glyph must stay upright as it travels, so unlike the
   old plain dot, position is centered via transform (not margin
   offsets) -- because transform is what the counter-rotation keyframes
   below animate, and a static transform declaration would be entirely
   overridden (not merged) by the animation shorthand once it starts. */
.services-page-orbit-symbol {
  position: absolute;
  top: 2%;
  left: 50%;
  /* Static fallback centering -- the animated rules below (and the JS
     randomized takeover in initServicesOrbitVariance) always include this
     same translate(-50%, -50%) inside their own transform value, but the
     animation shorthand can be turned off (reduced motion, JS disabled)
     without this base declaration ever running, so it has to be set here
     too or the symbol renders off-center whenever nothing is animating. */
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

/* Counter-rotates at the exact same duration/easing/direction as this
   symbol's own parent spinner (services-dollar-arc, 10s ease-in-out
   alternate), so the two rotations cancel out net-zero and the glyph
   reads upright throughout the swing -- only its position (driven by
   the parent) sweeps along the arc, never its own orientation. */
.services-page-orbit-symbol--dollar {
  background: var(--color-accent);
  color: var(--color-white);
  box-shadow: 0 0 16px rgba(240, 115, 26, 0.25);
  animation: services-dollar-arc-counter 10s ease-in-out infinite alternate;
}

/* Bigger and hollow (transparent fill, ring only) by design — a second
   filled badge the same size as the dollar one would just read as a
   duplicate; a larger, emptier ring gives the orbit some visual variety
   while staying just as unobtrusive. Percent sits in the reverse/22s
   spinner, so it counters with a 22s clockwise spin to cancel that. */
.services-page-orbit-symbol--percent {
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1.5px solid rgba(240, 115, 26, 0.45);
  color: rgba(240, 115, 26, 0.85);
  animation: services-orbit-symbol-counter-reverse 22s linear infinite;
}

@keyframes services-dollar-arc-counter {
  from {
    transform: translate(-50%, -50%) rotate(130deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

@keyframes services-orbit-symbol-counter-reverse {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Respect the OS-level "reduce motion" setting, same as
   .testimonial-track further up -- freeze both orbiting symbols on their
   resting frame (upright, at the top of the circle) instead of forcing
   continuous movement. Listed after every rule above that sets its own
   `animation` (including the --reverse modifier) so this wins on source
   order despite matching specificity. Also what initServicesOrbitVariance
   in shared.js checks before handing control to the JS-randomized
   version, so both the CSS and JS paths agree on honoring this setting. */
@media (prefers-reduced-motion: reduce) {
  .services-page-circle-spinner,
  .services-page-circle-spinner--reverse,
  .services-page-orbit-symbol--dollar,
  .services-page-orbit-symbol--percent {
    animation: none;
  }
}

/* Dedicated centered container for this section only — deliberately NOT
   the shared .about-page-container (pinned to --content-left so the rest
   of this page's sections stay aligned with the header logo). The brief
   for this section specifically calls for equal empty space on the left
   and right at any viewport width, which only a true margin:auto box
   guarantees; .about-page-container's max-width-without-auto-margins
   model only happens to look centered below its 1300px cap. */
.services-page-container {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
}

/* ---- Main Services page: card grid -------------------------------------
   Same 6-track "3 then 2, centered" scheme as the homepage's own
   .services-grid (see that rule for the full reasoning): each card spans
   2 of 6 tracks so 3 fill the first row exactly, and cards 4/5 are
   explicitly offset so the second row's 2 cards sit centered under the
   first row instead of flush left. The 3 specialized services (new
   resident / international / Ukrainian) live in their own
   .specialized-list below instead of a 6th/7th/8th clone of this same
   card, so this grid stays at 5 -- the core, broadly-applicable
   services -- and reads as a deliberate set, not a template repeated
   until the content ran out. */
.services-page-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.services-page-grid > .services-page-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.services-page-grid > .services-page-card:nth-child(5) {
  grid-column: 4 / span 2;
}

.services-page-card {
  grid-column: span 2;
  /* The whole card is now an <a> (see services.html) so the entire
     surface is clickable, not just the "Read More" text -- needs its
     own display/text-decoration/color reset since an anchor isn't a
     flex container or block by default and would otherwise render as
     underlined link-blue text. flex + column is also what lets
     .services-page-read-more below anchor itself to the bottom via
     margin-top: auto, so it lines up on the same horizontal line across
     every card in a row regardless of how long each card's own
     description text runs. */
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  background: var(--surface-soft);
  border: 1px solid var(--border-light);
  border-radius: 24px;
  padding: 34px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Lets the homepage "Our Services" overview cards deep-link here
     (e.g. services.html#tax-services) without the fixed header covering
     the card's top edge. */
  scroll-margin-top: calc(var(--header-height) + 24px);
  transition:
    border-color 300ms ease,
    transform 300ms ease,
    box-shadow 300ms ease;
}

.services-page-card:hover {
  border-color: var(--orange-line);
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(240, 115, 26, 0.1);
}

.services-page-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.services-page-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.services-page-card-icon svg {
  width: 20px;
  height: 20px;
}

.services-page-card-number {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

.services-page-card h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-bottom: 8px;
}

.services-page-card .service-small {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-muted);
  margin-bottom: 16px;
}

.services-page-card-divider {
  display: block;
  height: 1px;
  background: var(--color-border);
  margin: 0 0 16px;
}

.services-page-card .service-subtitle {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: 14px;
}

.services-page-card .service-description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-muted);
  margin-bottom: 24px;
}

.services-page-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Pushes itself to the bottom of the card's flex column -- combined
     with CSS Grid's default row-stretch (every card in the same row is
     already the same height), this is what lines every "Read More" up
     on one shared horizontal line per row, regardless of how much
     description text sits above it in each card. */
  margin-top: auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-accent);
}

/* Underlines on hovering anywhere on the card (it's the whole clickable
   surface now, not just this text) rather than only when the pointer is
   directly over these few words. */
.services-page-card:hover .services-page-read-more {
  text-decoration: underline;
}

/* ---- Specialized support: horizontal row-cards, not an 8th clone of
   .services-page-card -------------------------------------------------- */
.specialized-section {
  width: 100%;
  padding: clamp(56px, 7vw, 96px) 0;
}

.specialized-intro {
  max-width: 560px;
  margin: 0 auto 40px;
  text-align: center;
}

.specialized-heading {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-top: 10px;
}

.specialized-intro .text-label {
  justify-content: center;
}

.specialized-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-white);
  overflow: hidden;
}

.specialized-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 32px;
  text-decoration: none;
  color: inherit;
  transition:
    background 200ms ease,
    padding-left 200ms var(--ease-out-premium);
}

.specialized-row + .specialized-row {
  border-top: 1px solid var(--color-border);
}

.specialized-row:hover {
  background: var(--surface-soft);
  padding-left: 40px;
}

.specialized-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  transition:
    border-color 200ms ease,
    background 200ms ease;
}

.specialized-row-icon svg {
  width: 20px;
  height: 20px;
}

.specialized-row:hover .specialized-row-icon {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.specialized-row-text {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 14px;
}

.specialized-row-text h3 {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-ink);
  white-space: nowrap;
}

.specialized-row-text p {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin: 0;
}

.specialized-row-arrow {
  flex-shrink: 0;
  color: var(--color-accent);
  font-size: 18px;
  transition: transform 200ms var(--ease-out-premium);
}

.specialized-row:hover .specialized-row-arrow {
  transform: translateX(4px);
}

@media (max-width: 640px) {
  .specialized-row {
    padding: 20px 24px;
  }

  .specialized-row:hover {
    padding-left: 28px;
  }

  .specialized-row-text {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------------------------------------------------------------------
   Services page: shared "Our Process" section
   The one place the 4-step process now lives -- previously duplicated on
   every individual service detail page (see .service-detail-panel /
   initServiceDetailPage in shared.js, which no longer builds a process
   panel at all). Built statically in services.html; initProcessSection()
   in shared.js only sets each step's stagger delay.
--------------------------------------------------------------------- */
#services-top {
  scroll-margin-top: var(--header-height);
}

.process-section {
  width: 100%;
  background: var(--color-soft-white);
  padding: clamp(48px, 5vw, 56px) 0 clamp(36px, 4vw, 48px);
  scroll-margin-top: var(--header-height);
}

.process-inner {
  width: min(100% - 48px, 1240px);
  margin: 0 auto;
  /* Asymmetric vertical padding: the footer row already reads as the
     panel's natural end (border-top divider + CTA), so it needs far
     less bottom padding than the header needs at the top. */
  padding: clamp(32px, 3vw, 34px) clamp(28px, 3.6vw, 40px)
    clamp(14px, 2vw, 16px);
  background: var(--color-white);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
}

.process-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 32px;
}

.process-header .text-label {
  justify-content: center;
  margin-bottom: 14px;
}

.process-heading {
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-ink);
  margin-bottom: 10px;
}

.process-lead {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-muted);
}

/* Horizontal 5-step timeline. .process-timeline is the single positioning
   root: one real .process-line element (a static track + an animated
   orange progress overlay, not a per-card line) sits behind the step
   list. The step number is taken out of flow (absolute, pinned above
   the icon) so the icon is always the first in-flow thing in each step.
   That makes the icon's vertical position -- and so the line's top
   offset -- a pure function of --icon-size and --number-clearance
   instead of the step-number text's rendered line height, which is what
   let the line drift a couple of pixels off the icon centers before.
   --number-clearance is deliberately equal to the icon radius (half of
   --icon-size): the line ends up at exactly --number-clearance +
   --icon-size/2, dead center on the icon row. */
.process-timeline {
  --icon-size: 46px;
  --number-clearance: 23px;
  position: relative;
}

/* 10%/90% insets = half of one column's width across 5 equal (20% each)
   grid columns, so the line spans exactly from the first icon's center
   to the last icon's center regardless of container width. */
.process-line {
  position: absolute;
  top: calc(var(--number-clearance) + var(--icon-size) / 2);
  left: 10%;
  right: 10%;
  height: 2px;
  z-index: 0;
}

.process-line-track,
.process-line-progress {
  position: absolute;
  inset: 0;
  height: 2px;
  border-radius: 999px;
}

.process-line-track {
  background: var(--border);
}

.process-line-progress {
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 800ms var(--ease-out-premium);
  transition-delay: 150ms;
}

.process-inner.is-visible .process-line-progress {
  transform: scaleX(1);
}

.process-steps {
  position: relative;
  z-index: 1;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--number-clearance) 14px 0;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 500ms var(--ease-out-premium),
    transform 500ms var(--ease-out-premium);
  transition-delay: var(--process-step-delay, 0ms);
}

.process-inner.is-visible .process-step {
  opacity: 1;
  transform: translateY(0);
}

.process-step-number {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.process-step-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  margin-bottom: 15px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Opaque, not var(--orange-soft) -- this circle sits directly in front
     of .process-line-track/.process-line-progress, so a translucent
     rgba() fill would let the connector line bleed through instead of
     being fully covered. */
  background: var(--process-node-orange-bg);
  color: var(--orange);
  transform: scale(0.96);
  transition:
    background 200ms ease,
    transform 200ms var(--ease-out-premium);
}

.process-inner.is-visible .process-step-icon {
  transform: scale(1);
}

.process-step-icon svg {
  width: 18px;
  height: 18px;
}

.process-step:hover {
  transform: translateY(-2px);
}

.process-step:hover .process-step-icon {
  background: var(--process-node-orange-bg-hover);
}

.process-step-title {
  margin-bottom: 6px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-ink);
}

.process-step-text {
  max-width: 200px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-muted);
}

/* Final step: pale green success state instead of orange -- reads as
   "the process completes successfully," not just "step 4 of 4." */
.process-step--final .process-step-icon {
  background: var(--process-node-green-bg);
  color: var(--success-green);
}

.process-step--final:hover .process-step-icon {
  background: var(--process-node-green-bg-hover);
}

/* Compact single-strip trust row -- icon + one word each, spaced by
   gap alone instead of a separated/bordered block. Margin-top (not a
   border) is what separates it from the steps; the one remaining
   border-top lives on .process-cta below. */
.process-trust-row {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: fit-content;
  height: 32px;
  margin: 18px auto 0;
  padding-inline: 22px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
}

.process-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-ink);
  white-space: nowrap;
}

.process-trust-divider {
  width: 1px;
  height: 15px;
  flex-shrink: 0;
  background: var(--border-strong);
}

.process-trust-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--orange);
}

.process-trust-icon svg {
  width: 12px;
  height: 12px;
}

.process-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.process-cta-heading {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-ink);
}

.process-cta-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.process-cta-primary {
  display: inline-flex;
  align-items: center;
  padding: 11px 26px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition:
    background var(--transition-fast),
    transform var(--transition-fast);
}

.process-cta-primary:hover {
  background: var(--color-ink);
  transform: translateY(-2px);
}

.process-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-ink);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 200ms ease;
}

.process-cta-secondary span:last-child {
  transition: transform 200ms var(--ease-out-premium);
}

.process-cta-secondary:hover {
  color: var(--color-accent);
}

.process-cta-secondary:hover span:last-child {
  transform: translateX(4px);
}

.process-cta-primary:focus-visible,
.process-cta-secondary:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .process-step {
    transition: opacity 220ms ease;
    transform: none;
  }

  .process-step-icon {
    transition: background 200ms ease;
    transform: none;
  }

  .process-line-progress {
    transition: none;
  }

  .process-step:hover {
    transform: none;
  }
}

/* ---- Our Process: independent tablet/mobile tiers ---------------------
   Switches to a vertical timeline from tablet down already (rather than
   attempting a 2x2 + final-step grid) -- five items in a 2x2-plus-one
   grid needs connecting lines that jump between rows without crossing
   text, which gets fragile fast; a vertical timeline is an explicitly
   valid alternative and stays clear at every width down to mobile. */
@media (max-width: 900px) {
  .process-inner {
    padding: clamp(28px, 4vw, 32px) 24px;
  }

  .process-header {
    margin-bottom: 28px;
  }

  .process-steps {
    grid-template-columns: 1fr;
    row-gap: 22px;
  }

  .process-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding: 0;
    gap: 16px;
  }

  .process-step-number {
    top: -20px;
    left: 64px; /* icon width (48px) + row gap (16px) -- sits above the title, not the icon */
    transform: none; /* cancel the desktop translateX(-50%) centering */
  }

  .process-step-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    margin-bottom: 0;
  }

  .process-step-icon svg {
    width: 21px;
    height: 21px;
  }

  .process-step-title {
    padding-top: 2px;
  }

  .process-step-text {
    max-width: none;
  }

  /* Line now runs vertically through the icon column's horizontal center
     (24px = half of the 48px icon) instead of horizontally through it.
     .process-timeline's height tracks .process-steps exactly (no padding
     of its own), so top:0/bottom:0 spans from the first step's icon row
     to the last one's with no separate top-offset math needed. */
  .process-line {
    top: 0;
    bottom: 0;
    left: 24px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .process-line-track,
  .process-line-progress {
    width: 2px;
    height: auto;
  }

  .process-line-progress {
    transform: scaleY(0) scaleX(1);
    transform-origin: top;
  }

  .process-inner.is-visible .process-line-progress {
    transform: scaleY(1) scaleX(1);
  }
}

@media (max-width: 640px) {
  .process-section {
    padding: clamp(24px, 6vw, 28px) 0;
  }

  .process-inner {
    padding: 24px 20px;
    border-radius: 22px;
  }

  .process-header {
    margin-bottom: 24px;
  }

  .process-step-number {
    left: 60px; /* icon width (44px) + row gap (16px) at this size */
  }

  .process-step-icon {
    width: 44px;
    height: 44px;
  }

  .process-step-icon svg {
    width: 19px;
    height: 19px;
  }

  .process-line {
    left: 22px; /* half of the 44px icon */
  }

  /* Compact 3-column grid instead of a flex row -- guarantees exactly
     one row with no overflow even when "Expert-led" is the widest label,
     regardless of exact viewport width down to 320px. The divider `<li>`s
     are dropped from the grid entirely (they only make sense as inline
     separators in the single-row desktop/tablet capsule). */
  .process-trust-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    height: auto;
    margin-top: 24px;
    padding-inline: 12px;
    gap: 8px 6px;
  }

  .process-trust-divider {
    display: none;
  }

  .process-trust-item {
    justify-content: center;
    font-size: 0.8rem;
  }

  .process-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
  }

  .process-cta-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .process-cta-primary,
  .process-cta-secondary {
    justify-content: center;
    min-height: 48px;
  }
}

/* ---- Individual service detail pages ----------------------------------- */
.service-detail-subtitle {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-accent);
  margin-bottom: 20px;
}

.service-detail-subheading {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-ink);
  margin: 0 0 14px;
}

.service-detail-subheading:not(:first-child) {
  margin-top: 30px;
}

.service-detail-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.service-detail-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--color-ink);
}

.service-detail-list li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.service-detail-note {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-muted);
  margin-top: 8px;
}

/* ---- Individual service detail template -------------------------------
   shared.js composes this layout from each page's existing hero, included
   lists, audience list, and translated CTA. Keeping every rule behind
   .service-detail-page prevents the redesign from leaking into about.html,
   services.html, or any other page that shares the older scaffolding. */
.service-detail-page .service-detail-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(560px, 62vh, 660px);
  display: flex;
  align-items: stretch;
  padding: var(--header-height) 0 0;
  border-bottom: 1px solid var(--border-light);
}

/* This hero is always rendered against a light photo (see
   .service-detail-hero-media below), regardless of site theme -- so unlike
   the rest of the page, its text must NOT follow the global dark-theme
   token flip. Same fix as :root[data-theme="dark"] .hero-section on the
   homepage (search that selector): redeclare the semantic tokens this
   hero's descendants already read (.about-page-hero-heading uses
   --color-ink, .about-page-hero-intro uses --color-muted, .text-label and
   .cta-solid use --color-muted/--color-ink/--color-white, the CTA border
   uses --border-light, etc.) back to their light-mode values, scoped to
   this section only. Every element below keeps using the same var(...)
   it always did -- nothing is hardcoded -- so this is one fix at the
   component root rather than N per-element overrides, and it cannot leak
   into the dark "What's Included" section right below this hero or into
   the dark nav dropdown, since neither is a descendant of
   .service-detail-hero. --orange/--orange-soft/--orange-line are included
   too: the dark-theme orange is tuned for contrast against a dark surface,
   not this hero's white one. */
:root[data-theme="dark"] .service-detail-page .service-detail-hero {
  color-scheme: light;
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.78);
  --surface-elevated: rgba(255, 255, 255, 0.92);
  --text: #111111;
  --text-soft: #2a2a2a;
  --muted: #666666;
  --border: rgba(0, 0, 0, 0.09);
  --border-strong: rgba(0, 0, 0, 0.16);
  --orange: #ba540c;
  --orange-soft: rgba(240, 115, 26, 0.14);
  --orange-line: rgba(240, 115, 26, 0.22);
  --color-white: var(--bg);
  --color-soft-white: var(--bg-soft);
  --color-ink: var(--text);
  --color-muted: var(--muted);
  --color-border: var(--border-strong);
  --border-light: var(--border);
  --border-medium: var(--border-strong);
  --color-accent: var(--orange);
  --color-accent-soft: var(--orange-soft);
}

.service-detail-page .service-detail-hero-inner {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: clamp(468px, calc(62vh - var(--header-height)), 568px);
  display: flex;
  align-items: center;
  padding-left: var(--content-left);
  padding-right: 0;
}

.service-detail-hero-copy {
  position: relative;
  z-index: 2;
  width: min(48%, 620px);
  max-width: 620px;
  padding: clamp(42px, 5vw, 72px) 0 clamp(38px, 4vw, 60px);
}

.service-detail-page .service-detail-hero .text-label {
  margin-bottom: 24px;
}

.service-detail-page .service-detail-hero .about-page-hero-heading {
  max-width: 620px;
  margin-bottom: 16px;
  font-size: clamp(2.8rem, 4.35vw, 4.5rem);
  line-height: 0.99;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.service-detail-page .service-detail-hero .service-detail-subtitle {
  max-width: 620px;
  margin-bottom: 16px;
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  line-height: 1.35;
  color: var(--color-accent);
}

.service-detail-page .service-detail-hero .about-page-hero-intro {
  max-width: 560px;
  margin-bottom: 28px;
  font-size: clamp(0.98rem, 1.05vw, 1.08rem);
  line-height: 1.58;
}

.service-detail-hero-button,
.service-detail-cta-button {
  border-radius: 10px;
}

.service-detail-button-arrow {
  display: inline-block;
  font-size: 1.1em;
  transition: transform 200ms var(--ease-out-premium);
}

.service-detail-hero-button:hover .service-detail-button-arrow,
.service-detail-cta-button:hover .service-detail-button-arrow {
  transform: translateX(4px);
}

.service-detail-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--color-white);
  isolation: isolate;
}

.service-detail-hero-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center right;
  filter: saturate(0.86) contrast(0.98);
  transform: none;
}

.service-detail-hero-media--fallback img {
  object-position: center right;
}

.service-detail-hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      #ffffff 0%,
      rgba(255, 255, 255, 0.99) 28%,
      rgba(255, 255, 255, 0.84) 42%,
      rgba(255, 255, 255, 0.28) 60%,
      transparent 76%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08) 60%,
      rgba(255, 255, 255, 0.34) 100%
    );
}

.service-detail-hero-media-accent {
  display: none;
}

.service-detail-hero-media-accent::before,
.service-detail-hero-media-accent::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(240, 115, 26, 0.18);
  border-radius: 50%;
}

.service-detail-hero-media-accent::before {
  inset: 24px;
}

.service-detail-hero-media-accent::after {
  inset: 52px;
}

.service-detail-hero-media.is-image-missing::after {
  content: "$";
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(240, 115, 26, 0.22);
  font-family: var(--font-sans);
  font-size: clamp(7rem, 16vw, 13rem);
  font-weight: 500;
  transform: translate(-50%, -50%);
}

.service-detail-container {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding-left: var(--content-left);
  padding-right: var(--content-left);
}

.service-detail-help {
  padding: clamp(58px, 5.2vw, 78px) 0;
  background: var(--color-white);
  border-bottom: 1px solid var(--border-light);
}

.service-detail-section-header {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(380px, 1.25fr);
  gap: clamp(36px, 5vw, 82px);
  align-items: end;
  margin-bottom: clamp(28px, 3.2vw, 42px);
}

.service-detail-section-eyebrow {
  margin-bottom: 14px;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.service-detail-section-heading,
.service-detail-panel-heading {
  color: var(--color-ink);
  font-size: clamp(1.85rem, 2.8vw, 3rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.service-detail-section-intro {
  max-width: 700px;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.08vw, 1.16rem);
  line-height: 1.65;
}

.service-detail-help-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
}

.service-detail-help-card {
  position: relative;
  min-height: 172px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(20px, 1.8vw, 26px);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--surface) 0%, var(--bg-soft) 100%);
  transition:
    transform 220ms var(--ease-out-premium),
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.service-detail-help-card:hover {
  transform: translateY(-3px);
  border-color: var(--orange-line);
  box-shadow: 0 18px 38px rgba(17, 17, 17, 0.055);
}

.service-detail-help-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 10px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.service-detail-help-icon svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-detail-help-kicker {
  margin-bottom: 8px;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.service-detail-help-title {
  max-width: 95%;
  margin-bottom: 0;
  color: var(--color-ink);
  font-size: clamp(0.98rem, 1.08vw, 1.1rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.service-detail-help-index {
  position: absolute;
  top: 22px;
  right: 22px;
  color: rgba(17, 17, 17, 0.26);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}

.service-detail-help-note {
  max-width: 920px;
  margin-top: 24px;
  padding: 18px 20px;
  border-left: 2px solid var(--color-accent);
  border-radius: 0 10px 10px 0;
  background: var(--color-soft-white);
  color: var(--color-muted);
  font-size: 0.92rem;
  font-style: normal;
  line-height: 1.55;
}

.service-detail-insights {
  padding: clamp(56px, 5.5vw, 78px) 0;
  background: var(--color-soft-white);
  border-bottom: 1px solid var(--border-light);
}

/* Single panel now (the FAQ) since the "Our Process" panel that used to
   sit beside it was removed -- centered at a comfortable reading width
   instead of stretching edge-to-edge of the wide .service-detail-container. */
.service-detail-insights-grid {
  display: grid;
  grid-template-columns: minmax(0, 820px);
  justify-content: center;
}

.service-detail-panel {
  height: 100%;
  padding: clamp(26px, 2.8vw, 38px);
  border: 1px solid var(--border-light);
  border-radius: 18px;
  background: var(--color-white);
}

.service-detail-panel-heading {
  margin-bottom: 24px;
  font-size: clamp(1.55rem, 2vw, 2.2rem);
}

.service-detail-faq-list {
  border-top: 1px solid var(--border-light);
}

.service-detail-faq-item {
  border-bottom: 1px solid var(--border-light);
}

.service-detail-faq-item summary {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 2px;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.service-detail-faq-item summary::-webkit-details-marker {
  display: none;
}

.service-detail-faq-item summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.service-detail-faq-plus {
  flex-shrink: 0;
  color: var(--color-accent);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 200ms var(--ease-out-premium);
}

.service-detail-faq-item[open] .service-detail-faq-plus {
  transform: rotate(45deg);
}

.service-detail-faq-answer {
  padding: 0 38px 18px 2px;
  color: var(--color-muted);
  font-size: 0.93rem;
  line-height: 1.6;
}

.service-detail-faq-answer p {
  max-width: 680px;
}

.service-detail-faq-answer-list {
  display: grid;
  gap: 8px;
  list-style: none;
}

.service-detail-faq-answer-list li {
  position: relative;
  padding-left: 16px;
}

.service-detail-faq-answer-list li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  transform: translateY(-50%);
}

.service-detail-faq-included {
  display: grid;
  gap: 22px;
}

.service-detail-faq-group-title {
  margin-bottom: 10px;
  color: var(--color-ink);
  font-size: 0.95rem;
  font-weight: 500;
}

.service-detail-cta {
  width: 100%;
  padding: clamp(32px, 3.8vw, 48px) var(--content-left);
  background: var(--color-white);
}

.service-detail-cta-inner {
  width: 100%;
  max-width: 1540px;
  min-height: 142px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 42px;
  align-items: center;
  margin: 0 auto;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background:
    radial-gradient(
      circle at 7% 30%,
      rgba(240, 115, 26, 0.17),
      transparent 24%
    ),
    #171717;
  color: var(--inverse-text);
}

.service-detail-cta-copy {
  max-width: 850px;
}

.service-detail-cta-copy h2 {
  margin-bottom: 10px;
  color: var(--inverse-text);
  font-size: clamp(1.45rem, 2.25vw, 2.35rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.service-detail-cta-copy p {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.98rem;
  line-height: 1.55;
}

.service-detail-process-link {
  display: inline-block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 200ms ease;
}

.service-detail-process-link:hover {
  color: var(--inverse-text);
}

.service-detail-process-link:focus-visible {
  outline: 2px solid var(--inverse-text);
  outline-offset: 3px;
  border-radius: 4px;
}

.service-detail-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 14px 24px;
  background: var(--inverse-text);
  color: var(--dark-panel);
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  transition:
    transform 200ms var(--ease-out-premium),
    background 200ms ease,
    color 200ms ease;
}

.service-detail-cta-button:hover {
  transform: translateY(-2px);
  background: var(--color-accent);
  color: #111111;
}

@media (max-width: 1200px) {
  .service-detail-hero-copy {
    width: min(54%, 620px);
  }

  .service-detail-help-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .service-detail-page .service-detail-hero {
    min-height: 580px;
    padding-top: var(--header-height);
  }

  .service-detail-page .service-detail-hero-inner {
    min-height: calc(580px - var(--header-height));
    padding-right: var(--content-left);
  }

  .service-detail-hero-copy {
    width: min(72%, 620px);
    max-width: 620px;
    padding: 44px 0 40px;
  }

  .service-detail-page .service-detail-hero .about-page-hero-heading {
    max-width: 620px;
    font-size: clamp(2.65rem, 7vw, 4rem);
  }

  .service-detail-hero-media::before {
    background:
      linear-gradient(
        90deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0.99) 36%,
        rgba(255, 255, 255, 0.86) 56%,
        rgba(255, 255, 255, 0.38) 76%,
        transparent 100%
      ),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.1) 60%,
        rgba(255, 255, 255, 0.42) 100%
      );
  }

  .service-detail-section-header {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .service-detail-help-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-detail-insights-grid {
    grid-template-columns: 1fr;
  }

  .service-detail-cta-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .service-detail-cta-button {
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .service-detail-page .service-detail-hero {
    min-height: 480px;
    padding-top: var(--header-height);
  }

  .service-detail-page .service-detail-hero-inner,
  .service-detail-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .service-detail-page .service-detail-hero-inner {
    min-height: calc(480px - var(--header-height));
  }

  .service-detail-hero-copy {
    width: 100%;
    max-width: 100%;
    padding: 24px 0 26px;
  }

  .service-detail-page .service-detail-hero .about-page-hero-heading {
    max-width: 100%;
    font-size: clamp(2.05rem, 10.5vw, 2.75rem);
  }

  .service-detail-page .service-detail-hero .about-page-hero-intro {
    margin-bottom: 20px;
  }

  .service-detail-hero-media img {
    object-position: 72% center;
    opacity: 0.56;
  }

  .service-detail-hero-media::before {
    background:
      linear-gradient(
        90deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0.98) 48%,
        rgba(255, 255, 255, 0.78) 72%,
        rgba(255, 255, 255, 0.32) 100%
      ),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.05) 44%,
        rgba(255, 255, 255, 0.7) 100%
      );
  }

  .service-detail-help,
  .service-detail-insights {
    padding: 38px 0;
  }

  .service-detail-help-grid {
    grid-template-columns: 1fr;
  }

  .service-detail-help-card {
    min-height: 116px;
    padding: 16px;
  }

  .service-detail-help-icon {
    margin-bottom: 10px;
  }

  .service-detail-help-index {
    top: 20px;
    right: 20px;
  }

  .service-detail-panel {
    padding: 20px 16px;
    border-radius: 18px;
  }

  .service-detail-panel-heading {
    margin-bottom: 16px;
  }

  .service-detail-faq-item summary {
    min-height: 56px;
    gap: 14px;
    font-size: 0.95rem;
  }

  .service-detail-faq-answer {
    padding-right: 12px;
  }

  .service-detail-cta {
    padding: 24px 20px 32px;
  }

  .service-detail-cta-inner {
    min-height: 0;
    padding: 22px 18px;
    border-radius: 20px;
  }

  .service-detail-cta-button {
    width: 100%;
  }
}

/* ---- Services system: independent tablet/mobile tiers ------------------
   Below this width the 6-track "3 then 2 centered" desktop layout gives
   way to a single column, so the span/offset rules that positioned
   cards 4 and 5 need resetting back to a normal single track. */
@media (max-width: 900px) {
  .services-page-grid {
    grid-template-columns: 1fr;
  }

  .services-page-card,
  .services-page-grid > .services-page-card:nth-child(4),
  .services-page-grid > .services-page-card:nth-child(5) {
    grid-column: auto;
  }

  .specialized-row {
    flex-wrap: wrap;
  }

  /* The desktop .services-page-bg circle is sized and centered to sit
     behind a wide 6-track grid; once that grid collapses to a single
     stacked column the section grows far taller than the circle, so the
     same fixed composition instead reads as stray rings and an orange
     dot badge showing through the gaps between cards (cards use a
     translucent/blurred surface, not an opaque one). There's no
     "corner" this decoration can shrink into the way the hero/Who We
     Help circles could -- its whole job was to sit centered behind a
     wide grid -- so it's dropped at this breakpoint rather than
     resized. */
  .services-page-bg {
    display: none;
  }
}

/* Phone layout for the Services directory. Two columns keep the core offer
   scannable without turning the page into five full-screen cards; the final
   card spans both columns so the odd item still looks intentional. */
@media (max-width: 640px) {
  .services-page-hero-centered {
    padding: calc(var(--header-height) + 28px) 0 44px;
  }

  .services-page-showcase {
    padding: 44px 0;
  }

  .services-page-container {
    padding-inline: 16px;
  }

  .services-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 26px;
  }

  .services-page-card,
  .services-page-grid > .services-page-card:nth-child(4) {
    grid-column: auto;
  }

  .services-page-grid > .services-page-card:nth-child(5) {
    grid-column: 1 / -1;
  }

  .services-page-card {
    min-width: 0;
    padding: 16px;
    border-radius: 18px;
  }

  .services-page-card-top {
    margin-bottom: 12px;
  }

  .services-page-card-icon {
    width: 36px;
    height: 36px;
  }

  .services-page-card-icon svg {
    width: 17px;
    height: 17px;
  }

  .services-page-card-number {
    font-size: 10px;
  }

  .services-page-card h3 {
    min-height: 2.3em;
    margin-bottom: 6px;
    font-size: 1rem;
    line-height: 1.15;
  }

  .services-page-card .service-small {
    min-height: 2.8em;
    margin-bottom: 10px;
    font-size: 0.76rem;
    line-height: 1.4;
  }

  .services-page-card-divider {
    margin-bottom: 10px;
  }

  .services-page-card .service-subtitle {
    margin-bottom: 12px;
    font-size: 0.82rem;
    line-height: 1.3;
  }

  .services-page-card .service-description {
    display: none;
  }

  .services-page-read-more {
    font-size: 0.78rem;
  }

  .specialized-section {
    padding: 44px 0;
  }

  .specialized-intro {
    margin-bottom: 24px;
  }

  .specialized-row {
    gap: 12px;
    padding: 16px;
  }

  .specialized-row:hover {
    padding-left: 16px;
  }

  .specialized-row-icon {
    width: 38px;
    height: 38px;
  }

  .specialized-row-text h3 {
    font-size: 0.95rem;
  }

  .specialized-row-text p {
    font-size: 0.8rem;
  }

  .process-section {
    padding: 20px 0;
  }

  .process-inner {
    padding: 20px 16px;
  }

  .process-steps {
    row-gap: 18px;
  }
}

/* ---------------------------------------------------------------------
   Cookie consent banner
   Markup is injected by initCookieConsent() in shared.js (so every page
   gets it without duplicating this HTML 11 times) and only appears at
   all if localStorage has no prior "accepted" choice recorded — see that
   function for the persistence logic. z-index:999 sits above the header
   (200) and its dropdown (210), the highest existing values on the site.
--------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 360px;
  max-width: calc(100% - 32px);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--color-white);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  padding: 20px;
  z-index: 999;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--transition-medium),
    transform var(--transition-medium);
}

.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cookie-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.cookie-icon svg {
  width: 18px;
  height: 18px;
}

.cookie-content {
  flex: 1;
  min-width: 0;
}

.cookie-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 6px;
}

.cookie-text {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-muted);
  margin-bottom: 14px;
}

.cookie-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cookie-accept-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  padding: 9px 22px;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.cookie-accept-button:hover,
.cookie-accept-button:focus-visible {
  background: var(--color-ink);
  border-color: var(--color-ink);
  transform: translateY(-1px);
}

.cookie-accept-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.cookie-privacy-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.cookie-privacy-link:hover {
  color: var(--color-accent);
}

@media (max-width: 768px) {
  /* Noticeably more compact than desktop, not just narrower -- this
     banner sits directly over the hero's own "Book a Consultation" CTA
     on short mobile viewports (see .hero-cta-secondary et al.), so every
     bit of height trimmed here directly reduces how much of that button
     stays covered while the banner is still up. */
  .cookie-banner {
    left: 16px;
    right: 16px;
    bottom: 8px;
    width: auto;
    max-width: none;
    gap: 8px;
    padding: 11px 15px;
  }

  .cookie-icon {
    width: 26px;
    height: 26px;
  }

  .cookie-icon svg {
    width: 14px;
    height: 14px;
  }

  .cookie-title {
    font-size: 0.85rem;
    margin-bottom: 3px;
  }

  .cookie-text {
    font-size: 0.76rem;
    line-height: 1.4;
    margin-bottom: 8px;
  }

  .cookie-actions {
    width: 100%;
    gap: 10px;
  }

  .cookie-accept-button {
    flex: 1;
    text-align: center;
    padding: 8px 18px;
  }
}

/* Extra-compact tier for short viewports (e.g. iPhone SE) -- the hero's
   CTA sits proportionally lower on a short screen, so the mobile sizing
   above still isn't quite tight enough to fully clear it there. */
@media (max-width: 768px) and (max-height: 700px) {
  .cookie-banner {
    bottom: 6px;
    gap: 6px;
    padding: 8px 14px;
  }

  .cookie-title {
    margin-bottom: 2px;
  }

  .cookie-text {
    margin-bottom: 6px;
  }

  .cookie-actions {
    gap: 8px;
  }
}

/* ---------------------------------------------------------------------
   Thank You page (thank-you.html) -- reuses .cta-solid/.about-button
   for its two actions instead of introducing a fourth button style.
--------------------------------------------------------------------- */
.thank-you-section {
  width: 100%;
  min-height: 64vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-height) + 72px) 24px 96px;
  text-align: center;
}

.thank-you-container {
  max-width: 560px;
}

.thank-you-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  margin: 0 auto 28px;
}

.thank-you-icon svg {
  width: 32px;
  height: 32px;
}

.thank-you-section h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-ink);
  margin-bottom: 16px;
}

.thank-you-section p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-muted);
  margin-bottom: 32px;
}

.thank-you-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Both actions reuse .cta-solid/.about-button verbatim (see the comment
   above this section), but those two components carry their own
   independent padding and, on .about-button, a margin-top:20px meant for
   its usual context (stacked under a paragraph in the About section) --
   side by side here, that stray margin plus this container's default
   align-items:stretch was inflating .cta-solid's rendered height to match
   .about-button's full margin box and offsetting their top edges (visible
   at every width, not just mobile). Pinned to one explicit height/padding/
   line-height/border-radius here, scoped to this row only, so neither
   button's own reused base rule can drift the two apart again -- the
   global .cta-solid/.about-button rules elsewhere are untouched. */
.thank-you-actions .cta-solid,
.thank-you-actions .about-button {
  margin-top: 0;
  width: 190px;
  height: 52px;
  padding: 0 20px;
  font-size: 14px;
  line-height: 1;
  border-radius: 999px;
  box-sizing: border-box;
  white-space: nowrap;
  justify-content: center;
}

/* Below the width where two 190px pills stop fitting side by side, stack
   them full-width instead of letting the row's own flex-wrap drop the
   second button onto its own line at a mismatched width. */
@media (max-width: 380px) {
  .thank-you-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .thank-you-actions .cta-solid,
  .thank-you-actions .about-button {
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------
   Blog listing (/blog, i.e. latest-news.html) + article page
   (blog-article.html) -- populated dynamically by blog-public.js from
   the read-only /api/blog/* endpoints (see server/routes/blogPublic.js).
   Reuses the site's existing tokens (--color-ink/--color-muted/
   --color-accent/--shadow-soft/--color-border) instead of introducing a
   parallel palette.
--------------------------------------------------------------------- */
.blog-listing-section {
  width: 100%;
  padding: var(--section-padding-y) 0;
  border-top: 1px solid var(--color-border);
}

.blog-featured-card {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-bottom: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(48px, 6vw, 72px);
  border-bottom: 1px solid var(--color-border);
}

.blog-featured-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.blog-card-category {
  color: var(--color-accent);
  font-weight: 600;
  text-transform: uppercase;
}

.blog-featured-card h2,
.blog-row-card h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-ink);
  margin: 0 0 12px;
}

.blog-row-card h3 {
  font-size: clamp(19px, 2vw, 23px);
}

.blog-card-excerpt {
  color: var(--color-muted);
  line-height: 1.6;
  margin: 0 0 18px;
}

.blog-read-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 14px;
  color: var(--color-ink);
  transition: gap var(--transition-fast, 180ms ease);
}
.blog-read-link:hover {
  gap: 10px;
  color: var(--color-accent);
}

.blog-listing-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 48px);
}

.blog-row-card {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
.blog-row-card:nth-child(even) {
  grid-template-columns: 1fr minmax(180px, 280px);
}
.blog-row-card:nth-child(even) .blog-row-image {
  order: 2;
}

.blog-row-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(48px, 6vw, 72px);
}
.blog-pagination button {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    color 180ms ease;
}
.blog-pagination button:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.blog-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.blog-pagination span {
  font-size: 13px;
  color: var(--color-muted);
}

@media (max-width: 720px) {
  .blog-featured-card,
  .blog-row-card,
  .blog-row-card:nth-child(even) {
    grid-template-columns: 1fr;
  }
  .blog-row-card:nth-child(even) .blog-row-image {
    order: 0;
  }
}

/* ---- Article page (blog-article.html) --------------------------------- */
.article-hero {
  padding: calc(var(--header-height) + 56px) 0 40px;
}

.article-hero-image {
  width: 100%;
  max-width: 1300px;
  margin: 32px auto 0;
  padding: 0 var(--content-left);
}
.article-hero-image img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

.article-body-section {
  padding: var(--space-section-sm) 0;
}

.article-body-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--content-left);
}

.article-body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-ink);
}
.article-body p {
  margin: 0 0 20px;
}
.article-body h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 40px 0 16px;
}
.article-body h3 {
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 600;
  margin: 32px 0 12px;
}
.article-body ul,
.article-body ol {
  margin: 0 0 20px;
  padding-left: 24px;
}
.article-body li {
  margin-bottom: 8px;
}
.article-body blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 4px 0 4px 20px;
  margin: 0 0 20px;
  color: var(--color-muted);
  font-style: italic;
}
.article-body hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 40px 0;
}
.article-body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* display:block turns the <table> itself into the scroll container -- its
   rows/cells still lay out as a table internally, but the element as a
   whole can now scroll horizontally on its own when a wide table (long
   cell content, many columns) would otherwise overflow a narrow mobile
   viewport, without needing an extra wrapper div around CMS-authored
   article content. */
.article-body table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 20px;
}
.article-body th,
.article-body td {
  border: 1px solid var(--color-border);
  padding: 10px 14px;
  font-size: 15px;
  text-align: left;
}
.article-body th {
  background: var(--surface-elevated);
}
.article-body .callout {
  border-radius: 16px;
  padding: 18px 22px;
  margin: 0 0 20px;
  background: var(--surface-elevated);
  border-left: 3px solid var(--color-muted);
}
.article-body .callout-info {
  background: rgba(43, 90, 168, 0.07);
  border-color: var(--info);
}
.article-body .callout-warning {
  background: rgba(168, 107, 26, 0.08);
  border-color: var(--warning);
}
.article-body .callout-tip {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}
.article-body figure[data-article-image] {
  margin: 0 0 24px;
}
.article-body figure[data-article-image] img {
  width: 100%;
  border-radius: 16px;
  display: block;
}
.article-body figure.article-image-full {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 1300px;
  margin-left: max(-50vw, calc(-1 * (100vw - 100%) / 2 - (100vw - 760px) / 2));
}
.article-body figcaption {
  font-size: 13px;
  color: var(--color-muted);
  text-align: center;
  margin-top: 8px;
}

.article-meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--color-muted);
  margin: 18px 0 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.article-related-section {
  padding: var(--space-section-sm) 0;
  border-top: 1px solid var(--color-border);
}
.article-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) {
  .article-related-grid {
    grid-template-columns: 1fr;
  }
  .article-hero-image {
    padding: 0 20px;
  }
}
.article-related-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  margin-bottom: 14px;
}
.article-related-card h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--color-ink);
}
.article-related-card p {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
}

.article-not-found {
  padding: calc(var(--header-height) + 100px) 20px 120px;
  text-align: center;
}
.article-not-found h1 {
  font-size: 28px;
  margin-bottom: 12px;
}
.article-not-found p {
  color: var(--color-muted);
  margin-bottom: 24px;
}

/* ---- Homepage "Latest News" (index.html) -------------------------------
   Editorial layout: one large featured article + two compact articles.
   The section is always in normal flow (no vh/fixed heights, no absolute
   CTA) -- height comes purely from content, so it collapses naturally to
   whichever state (loading/1/2/3 posts/empty/error) is currently shown. */
.latest-insights {
  position: relative;
  width: 100%;
  padding: 96px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden; /* clips the decorative orbits only -- never the cards themselves, which are always in-flow */
  /* Fades to the Contact section's --bg-soft tone (#fafafa) by the time
     this section ends, so the boundary between them is a smooth blend
     instead of a visible seam between two flat, slightly different
     off-white tones. */
  background: linear-gradient(
    180deg,
    var(--color-white) 0%,
    var(--color-white) 72%,
    var(--bg-soft) 100%
  );
}

.latest-insights__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    circle at 50% 56%,
    rgba(240, 115, 26, 0.085) 0%,
    rgba(240, 115, 26, 0.035) 35%,
    transparent 68%
  );
}
.latest-insights__orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(240, 115, 26, 0.07);
}
.latest-insights__orbit--a {
  width: 780px;
  height: 780px;
  top: -320px;
  right: -260px;
}
.latest-insights__orbit--b {
  width: 520px;
  height: 520px;
  bottom: -260px;
  left: -180px;
}

/* .about-page-container is deliberately *not* centered site-wide -- it's
   pinned to --content-left so left-aligned sections stay lined up with
   the logo (see the comment above .about-page-container itself). This
   section wants genuinely centered content instead, so it needs its own
   symmetric margin/padding here rather than the shared left-pinned box
   -- without this override, on any viewport wider than 1300px the whole
   block sits flush against the true left edge instead of the middle. */
.latest-insights .about-page-container {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding-left: clamp(24px, 6vw, 120px);
  padding-right: clamp(24px, 6vw, 120px);
}

.latest-insights__header {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}
.latest-insights__header .text-label {
  justify-content: center;
  margin-bottom: 20px;
}
.latest-insights__heading {
  font-size: var(--text-h2);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-ink);
}
.latest-insights__lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 560px;
  margin: 18px auto 0;
}

.latest-insights__content {
  min-height: 0;
} /* no fixed/min-height -- see header comment */

/* ---- Editorial grid: featured (~60%) + two stacked compacts (~40%) --- */
.latest-insights__grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.latest-insights__grid--pair {
  grid-template-columns: 1fr 1fr;
}
.latest-insights__secondary {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* One centered card when only one post qualifies -- constrained width,
   never stretched across the full section (section 11). */
.latest-insights__single {
  display: flex;
  justify-content: center;
}
.latest-insights__single .article-card--featured {
  max-width: 640px;
  width: 100%;
}

.article-card {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 16px 44px rgba(23, 23, 23, 0.055);
  overflow: hidden;
  transition:
    transform 300ms var(--ease-out-premium),
    box-shadow 300ms var(--ease-out-premium),
    border-color 300ms var(--ease-out-premium);
}
.article-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 24px 56px rgba(23, 23, 23, 0.09);
}
.article-card:hover .article-card__img img,
.article-card:hover .article-card__fallback svg {
  transform: scale(1.025);
}
.article-card:hover .blog-read-link {
  gap: 10px;
}

.article-card--featured {
  flex-direction: column;
  height: 100%;
}
.article-card__img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-soft);
  flex-shrink: 0;
}
.article-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--ease-out-premium);
}
.article-card--featured .article-card__img::after {
  /* thin orange accent line, not a large overlay (section 7) */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--color-accent);
}
.article-card__body {
  padding: 28px 30px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.article-card--featured h3 {
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: var(--color-ink);
  margin: 0 0 12px;
}
.article-card--featured .blog-card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card--featured .blog-read-link {
  margin-top: auto;
}

/* ---- Compact (secondary) cards: horizontal thumbnail + info --------- */
.article-card--compact {
  flex-direction: row;
  align-items: stretch;
  flex: 1;
}
.article-card--compact .article-card__img {
  width: 128px;
  aspect-ratio: 1;
  flex-shrink: 0;
}
.article-card--compact .article-card__img::after {
  display: none;
}
.article-card--compact .article-card__body {
  padding: 16px 20px;
  justify-content: center;
}
.article-card--compact h4 {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--color-ink);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card--compact .blog-card-meta {
  margin-bottom: 8px;
  font-size: 11px;
}
.article-card--compact .blog-read-link {
  font-size: 13px;
}

/* ---- Branded image fallback (section 10): never a black/broken box -- */
.article-card__fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  color: rgba(240, 115, 26, 0.55);
}
.article-card__fallback svg {
  width: 34px;
  height: 34px;
  transition: transform 400ms var(--ease-out-premium);
}
.article-card--compact .article-card__fallback svg {
  width: 22px;
  height: 22px;
}

/* ---- Loading skeletons -- match final layout, never a blank area ----- */
.latest-insights__skeleton {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 28px;
}
.insights-skeleton-card {
  border-radius: 24px;
  background: linear-gradient(
    90deg,
    var(--bg-soft) 25%,
    var(--surface) 37%,
    var(--bg-soft) 63%
  );
  background-size: 400% 100%;
  animation: insightsShimmer 1.5s ease infinite;
}
.insights-skeleton-card--featured {
  aspect-ratio: 4 / 3;
}
.latest-insights__skeleton .latest-insights__secondary {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.insights-skeleton-card--compact {
  flex: 1;
  min-height: 128px;
}
@keyframes insightsShimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* ---- Empty / error states: compact, never a tall blank section ------- */
.latest-insights__status {
  text-align: center;
  max-width: 440px;
  margin: 0 auto;
  padding: 40px 24px;
  border: 1px dashed var(--color-border);
  border-radius: 20px;
}
.latest-insights__status p:first-of-type {
  font-weight: 500;
  color: var(--color-ink);
  margin: 0 0 8px;
}
.latest-insights__status p:last-of-type {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 22px;
}
.latest-insights__status .cta-outline {
  display: inline-flex;
}

.latest-insights__footer {
  text-align: center;
  margin-top: 40px;
}

@media (max-width: 900px) {
  .latest-insights {
    padding: 64px 0;
  }
  .latest-insights__grid,
  .latest-insights__skeleton {
    grid-template-columns: 1fr;
  }
  .latest-insights__secondary,
  .latest-insights__skeleton .latest-insights__secondary {
    flex-direction: column;
  }
  .article-card--compact {
    flex-direction: column;
  }
  .article-card--compact .article-card__img {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .insights-skeleton-card--compact {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .latest-insights__grid,
  .latest-insights__secondary {
    gap: 20px;
  }
}

/* ---- For Clients "Resource Library" preview (for-clients.html) ---------
   Reuses the .article-card / .latest-insights__grid component system
   above (same editorial layout, same states) inside the page's existing
   .guides-section shell -- only the header spacing and background differ
   slightly per this section's own brief. */
.resource-library-preview {
  position: relative;
  overflow: hidden;
  padding: clamp(90px, 9vw, 120px) 0;
  background: linear-gradient(
    180deg,
    var(--color-white) 0%,
    var(--color-white) 80%,
    var(--bg-soft) 100%
  );
}
.resource-library-preview .guides-inner {
  position: relative;
  z-index: 1;
}
.resource-library-preview .guides-header {
  margin-bottom: 0;
  max-width: 640px;
}
.resource-library-preview .guides-header .latest-insights__lead {
  margin: 18px auto 0;
}
.resource-library-preview .latest-insights__content {
  margin-top: 56px;
}
.resource-library-preview .latest-insights__footer {
  margin-top: 40px;
}

@media (max-width: 900px) {
  .resource-library-preview {
    padding: 72px 0;
  }
  .resource-library-preview .latest-insights__content {
    margin-top: 44px;
  }
}
@media (max-width: 560px) {
  .resource-library-preview {
    padding: 64px 0;
  }
}