/* ==========================================================================
   VITA Host — design system
   Sibling of sarahkaterina.com: shared ink/gold palette, Fraunces + Inter.
   Where SK sells judgement, VITA sells operations — so the accent here does
   its loudest work on the changeover timeline, and stays quiet elsewhere.
   ========================================================================== */

/* --------------------------------------------------------------- fonts -- */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/fraunces-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/fraunces-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------- tokens -- */
:root {
  /* Palette — inherited from sarahkaterina.com so the group reads as one. */
  --ink: #0a1929;
  --ink-soft: #1a2332;
  --ink-deep: #060f1a;
  --bone: #fafaf6;
  --sand: #f5f1e8;
  --line: #e7e1d2;
  --accent: #c9a961;
  --accent-dark: #a88948;
  --accent-wash: #f3ecdc;

  --ink-70: rgba(10, 25, 41, .70);
  --ink-55: rgba(10, 25, 41, .55);
  --bone-72: rgba(250, 250, 246, .72);
  --bone-55: rgba(250, 250, 246, .55);
  --glass: rgba(250, 250, 246, .06);
  --glass-border: rgba(250, 250, 246, .14);

  /* Type */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --step-eyebrow: .6875rem;
  --step-small: .875rem;
  --step-body: 1.0625rem;
  --step-lead: clamp(1.0625rem, .95rem + .5vw, 1.3125rem);
  --step-h3: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem);
  --step-h2: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --step-display: clamp(2.6rem, 1.15rem + 5.6vw, 5.25rem);

  /* Space & shape */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --maxw: 1240px;
  --r-card: 20px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

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

html:focus-within { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-body);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0;
  font-variation-settings: 'opsz' 96;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  background: var(--accent);
  color: var(--ink);
  padding: .7rem 1.15rem;
  border-radius: var(--r-pill);
  font-size: var(--step-small);
  font-weight: 600;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus-visible { top: 1rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

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

.eyebrow {
  font-family: var(--body);
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 1.1rem;
}

.lead {
  font-size: var(--step-lead);
  line-height: 1.62;
  color: var(--ink-70);
  font-weight: 300;
}

.accent-italic {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

/* Section rhythm lives here alone, so nothing else has to fight it. */
.section { padding-block: var(--section-y); }
/* Anchor targets clear the fixed nav pill. */
.section[id], .hero [id] { scroll-margin-top: 6.5rem; }
/* A dark section straight after the dark page head reads as one surface, so
   the two paddings shouldn't stack into a void. */
.page-head + .section--dark { padding-top: 0; }
.section--tight { padding-block: clamp(3rem, 5.5vw, 5rem); }

.section--dark {
  background: var(--ink);
  color: var(--bone);
}
.section--dark .eyebrow { color: var(--accent); }
.section--dark .lead { color: var(--bone-72); }

.section--sand { background: var(--sand); }

.section-head { max-width: 46rem; }
.section-head h2 { font-size: var(--step-h2); }
.section-head .lead { margin-top: 1.35rem; }

/* --------------------------------------------------------------- rules -- */
.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}
.section--dark .rule { background: var(--glass-border); }

/* -------------------------------------------------------------- button -- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.75rem;
  border-radius: var(--r-pill);
  font-family: var(--body);
  font-size: var(--step-small);
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold { background: var(--accent); color: var(--ink); }
.btn--gold:hover { background: var(--accent-dark); }

.btn--ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--glass-border);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: var(--glass); border-color: var(--bone-55); }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--outline:hover { background: var(--ink); color: var(--bone); }

.btn__arrow { transition: transform .25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), gap .2s var(--ease);
}
.link-arrow:hover { border-bottom-color: currentColor; gap: .75rem; }
.section--dark .link-arrow { color: var(--accent); }

/* -------------------------------------------------------------- header -- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding: clamp(.65rem, 1.4vw, 1.1rem) var(--gutter);
  transition: padding .3s var(--ease);
}

.nav-shell {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: .55rem .55rem .55rem 1.5rem;
  border-radius: var(--r-pill);
  background: rgba(10, 25, 41, .78);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  color: var(--bone);
  transition: background-color .3s var(--ease);
}
.site-header[data-scrolled='true'] .nav-shell { background: rgba(6, 15, 26, .93); }

.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand img { height: 34px; width: auto; }

.nav { display: flex; align-items: center; gap: clamp(.4rem, 1.4vw, 1.4rem); margin-inline-start: auto; }

.nav__link {
  position: relative;
  font-size: var(--step-small);
  font-weight: 400;
  color: var(--bone-72);
  text-decoration: none;
  padding: .5rem .25rem;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav__link:hover, .nav__link[aria-current='page'] { color: var(--bone); }
.nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: .25rem; right: .25rem; bottom: .15rem;
  height: 1px;
  background: var(--accent);
}

/* Services dropdown */
.nav__group { position: relative; }
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: none;
  border: 0;
  padding: .5rem .25rem;
  font: inherit;
  font-size: var(--step-small);
  color: var(--bone-72);
  cursor: pointer;
  transition: color .2s var(--ease);
}
.nav__toggle:hover, .nav__toggle[aria-expanded='true'] { color: var(--bone); }
.nav__toggle svg { transition: transform .25s var(--ease); }
.nav__toggle[aria-expanded='true'] svg { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  top: calc(100% + .75rem);
  left: 50%;
  translate: -50% 0;
  min-width: 17rem;
  padding: .5rem;
  border-radius: 16px;
  background: rgba(6, 15, 26, .96);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav__group[data-open='true'] .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__menu a {
  display: block;
  padding: .6rem .85rem;
  border-radius: 10px;
  font-size: var(--step-small);
  color: var(--bone-72);
  text-decoration: none;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nav__menu a:hover { background: var(--glass); color: var(--bone); }

.nav-tel {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--step-small);
  color: var(--bone-72);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav-tel:hover { color: var(--bone); }

.nav-cta { padding: .8rem 1.4rem; flex-shrink: 0; }

/* Mobile nav */
.nav-burger {
  display: none;
  margin-inline-start: auto;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--bone);
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 20px; height: 1.5px;
  background: currentColor;
  position: relative;
  transition: background-color .2s var(--ease);
}
.nav-burger span::before, .nav-burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px; height: 1.5px;
  background: currentColor;
  transition: transform .25s var(--ease), top .25s var(--ease);
}
.nav-burger span::before { top: -6px; }
.nav-burger span::after { top: 6px; }
.nav-burger[aria-expanded='true'] span { background: transparent; }
.nav-burger[aria-expanded='true'] span::before { top: 0; transform: rotate(45deg); }
.nav-burger[aria-expanded='true'] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .nav, .nav-tel, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .nav-shell { padding: .5rem .5rem .5rem 1.25rem; }

  .mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--ink);
    padding: 6.5rem var(--gutter) 2.5rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s;
  }
  .mobile-nav[data-open='true'] { opacity: 1; visibility: visible; }
  .mobile-nav a {
    display: block;
    padding: .95rem 0;
    border-bottom: 1px solid var(--glass-border);
    font-family: var(--display);
    font-size: 1.5rem;
    color: var(--bone);
    text-decoration: none;
  }
  .mobile-nav a.mobile-nav__sub {
    font-family: var(--body);
    font-size: 1rem;
    padding-left: 1rem;
    color: var(--bone-72);
  }
  /* The nav links are set in the display face; the button is not a nav link. */
  .mobile-nav .btn {
    margin-top: 1.75rem;
    width: 100%;
    justify-content: center;
    font-family: var(--body);
    font-size: var(--step-small);
    border-bottom: 0;
    padding-block: 1.05rem;
  }
  .mobile-nav__meta { margin-top: 1.75rem; font-size: var(--step-small); color: var(--bone-55); }
  .mobile-nav__meta a { font-family: var(--body); font-size: 1rem; border: 0; padding: .3rem 0; }
}
@media (min-width: 1081px) { .mobile-nav { display: none; } }

body[data-nav-open='true'] { overflow: hidden; }

/* ---------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(8rem, 14vh, 11rem) clamp(3rem, 7vh, 5rem);
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
/* Navy scrim: deep on the left where the type sits, open on the right so the
   room still reads as a real Mediterranean interior. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(6, 15, 26, .95) 0%, rgba(6, 15, 26, .86) 38%, rgba(10, 25, 41, .58) 72%, rgba(10, 25, 41, .5) 100%),
    linear-gradient(to top, rgba(6, 15, 26, .8) 0%, rgba(6, 15, 26, 0) 45%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__eyebrow {
  font-size: var(--step-eyebrow);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bone-72);
  margin: 0 0 1.5rem;
}

.hero h1 {
  font-size: var(--step-display);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.025em;
  font-variation-settings: 'opsz' 144;
  text-wrap: balance;
}

.hero__sub {
  margin-top: 1.75rem;
  max-width: 33rem;
  font-size: var(--step-lead);
  line-height: 1.6;
  font-weight: 300;
  color: var(--bone-72);
}

.hero__actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
}

.hero__trust {
  margin-top: 2.75rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: var(--step-small);
  color: var(--bone-55);
}
.hero__trust-mark {
  width: 28px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

/* Hero form card */
/* Deep navy rather than a light glass panel: the photo behind it is a sunlit
   room, and a pale card let bright patches bleed through the input fields. */
.quote-card {
  background: rgba(6, 15, 26, .74);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  box-shadow: 0 24px 60px rgba(6, 15, 26, .35);
}
.quote-card h2 {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--bone);
}
.quote-card__note {
  margin-top: .65rem;
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--bone-55);
}
.quote-card form { margin-top: 1.35rem; }

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media img { object-position: center 45%; }
}

/* ---------------------------------------------------------- platforms -- */
/* Set as wordmarks rather than logo images on purpose: hand-approximated
   trademarks look cheap next to real ones, and this palette is restrained
   enough that type carries it better anyway. Swap in official SVGs here if
   the brands' press kits are ever cleared for use. */
.platforms {
  background: var(--ink);
  border-top: 1px solid var(--glass-border);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}
.platforms__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
}
.platforms__label {
  flex-shrink: 0;
  margin: 0;
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Label and wordmarks read as one sentence rather than two edges of the page —
   pushing the list to the right just opened a hole in the middle. */
.platforms__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}
.platforms__list li {
  position: relative;
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.4375rem);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--bone-72);
  white-space: nowrap;
}
.platforms__list li + li::before {
  content: '';
  position: absolute;
  left: calc(clamp(1rem, 2.5vw, 2.25rem) / -2);
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
  opacity: .55;
}

@media (max-width: 780px) {
  .platforms__inner { flex-direction: column; align-items: flex-start; gap: .9rem; }
}

/* ------------------------------------------------------- valuation band -- */
/* The walkthrough takes the full first screen, so the valuation form gets its
   own band directly beneath it rather than sharing the hero. */
.valuation-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) { .valuation-band__inner { grid-template-columns: 1fr; } }

/* On the dark band the card sits on ink already — a translucent panel would
   just read as a slightly different black. */
.valuation-band .quote-card {
  background: rgba(250, 250, 246, .05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* --------------------------------------------------- scroll walkthrough -- */
/* A tall section with a sticky stage inside it. Scroll position inside the
   section drives video.currentTime, so the walkthrough advances at the
   reader's pace instead of on a timer.

   Everything degrades to the poster frame: no JS, no video support, a failed
   download or prefers-reduced-motion all leave a normal one-screen hero. */
.scrollscape {
  position: relative;
  background: var(--ink);
  /* Sets the pace of the walkthrough: scroll travel is (height - 100vh), and
     that distance is mapped across the whole clip. The 16s film wants roughly
     200px of scroll per second of footage to feel like moving through the
     rooms rather than skimming them — 440vh gives ~190px/s at a 900px
     viewport. Shorten this to speed the walk up.
     Overridden to `auto` in the reduced-motion and no-video fallbacks. */
  height: 440vh;
}

.scrollscape__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding-block: clamp(7rem, 12vh, 9rem) clamp(2.5rem, 7vh, 4.5rem);
}

.scrollscape__video,
.scrollscape__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.scrollscape__poster { z-index: 0; }
.scrollscape__video { z-index: 1; opacity: 0; transition: opacity .6s var(--ease); }
.scrollscape[data-video='ready'] .scrollscape__video { opacity: 1; }

/* The left-hand gradient is constant — it is what keeps the headline legible
   once the room fills with sunlight. Only the flat veil over the rest of the
   frame lifts as you scroll, so the walk genuinely opens into the light. */
.scrollscape__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(100deg, rgba(6, 15, 26, .93) 0%, rgba(6, 15, 26, .8) 42%, rgba(10, 25, 41, .42) 78%, rgba(10, 25, 41, .35) 100%),
    linear-gradient(to top, rgba(6, 15, 26, .82) 0%, rgba(6, 15, 26, 0) 48%);
}
.scrollscape__scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Kept light: the opening frame is a shuttered room and already dark, so a
     heavy veil on top of it just reads as mud. */
  background: rgba(6, 15, 26, .20);
  opacity: calc(1 - var(--scrollscape-p, 0) * 0.85);
}

.scrollscape__content {
  position: relative;
  z-index: 3;
  color: var(--bone);
}

/* The three captions occupy one shared slot and cross-fade, so the layout
   never shifts as the walkthrough advances. */
.scrollscape__captions {
  display: grid;
  margin: 1.75rem 0 0;
  min-height: 5.5rem;
}
.scrollscape__captions li {
  grid-area: 1 / 1;
  max-width: 34rem;
  font-size: var(--step-lead);
  line-height: 1.55;
  font-weight: 300;
  color: var(--bone-72);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.scrollscape__captions li[data-active='true'] { opacity: 1; transform: none; }
.scrollscape__captions strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 300;
  font-variation-settings: 'opsz' 96;
  letter-spacing: -.02em;
  color: var(--bone);
  margin-bottom: .35rem;
}
.scrollscape__captions em {
  font-style: italic;
  color: var(--accent);
}

/* Progress rail — tells the reader this section has a length to it. */
.scrollscape__rail {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(1.25rem, 3vh, 2rem);
  z-index: 3;
  height: 1px;
  background: var(--glass-border);
}
.scrollscape__rail span {
  display: block;
  height: 100%;
  width: var(--scrollscape-progress, 0%);
  background: var(--accent);
  transition: width .12s linear;
}

@media (max-width: 900px) {
  /* Touch swipes cover more distance per gesture than a wheel notch, so the
     same pacing needs less travel. */
  .scrollscape { height: 380vh; }
  .scrollscape__video, .scrollscape__poster { object-position: center 45%; }
}

/* Fallbacks: one static screen, all three captions readable at once. */
.scrollscape[data-mode='static'] { height: auto; }
.scrollscape[data-mode='static'] .scrollscape__stage {
  position: static;
  height: auto;
  min-height: 100svh;
}
.scrollscape[data-mode='static'] .scrollscape__captions {
  gap: 1.25rem;
  min-height: 0;
}
.scrollscape[data-mode='static'] .scrollscape__captions li {
  grid-area: auto;
  opacity: 1;
  transform: none;
}
.scrollscape[data-mode='static'] .scrollscape__rail { display: none; }

@media (prefers-reduced-motion: reduce) {
  .scrollscape { height: auto; }
  .scrollscape__stage { position: static; height: auto; min-height: 100svh; }
  .scrollscape__video { display: none; }
  .scrollscape__captions { gap: 1.25rem; min-height: 0; }
  .scrollscape__captions li { grid-area: auto; opacity: 1; transform: none; }
  .scrollscape__rail { display: none; }
}

/* --------------------------------------------------------------- forms -- */
.field-grid { display: grid; gap: .7rem; }
.field-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 460px) { .field-grid--2 { grid-template-columns: 1fr; } }

.field { display: block; }
.field > span { display: block; }

.field--labelled .field__label {
  font-size: var(--step-small);
  font-weight: 500;
  margin-bottom: .4rem;
  color: var(--ink-70);
}
.form--dark .field--labelled .field__label { color: var(--bone-72); }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  padding: .9rem 1.05rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bone);
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-55); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, .22);
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%230a1929' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.05rem center;
  padding-right: 2.6rem;
}

/* Dark-surface variant (hero card + dark contact block).
   background-color, never the `background` shorthand — the shorthand would
   reset the select chevron's no-repeat/position and tile it across the field. */
.form--dark .field input,
.form--dark .field select,
.form--dark .field textarea {
  background-color: rgba(250, 250, 246, .07);
  border-color: var(--glass-border);
  color: var(--bone);
}
.form--dark .field input::placeholder,
.form--dark .field textarea::placeholder { color: var(--bone-55); }
.form--dark .field select { color: var(--bone); }
.form--dark .field select option { background: var(--ink); color: var(--bone); }
.form--dark .field input:focus,
.form--dark .field select:focus,
.form--dark .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, .25);
}
.form--dark .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23fafaf6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.form__submit { margin-top: 1rem; width: 100%; justify-content: center; }

.form__legal {
  margin-top: .9rem;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--ink-55);
}
.form--dark .form__legal { color: var(--bone-55); }

.hidden-fields-container { display: none; }

/* -------------------------------------------------------------- proof --- */
.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.proof__item { display: flex; flex-direction: column; gap: .4rem; }
.proof__figure {
  font-family: var(--display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 300;
  line-height: 1;
  font-variation-settings: 'opsz' 144;
  color: var(--ink);
}
.proof__figure em { font-style: italic; color: var(--accent-dark); }
.proof__label {
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--ink-70);
  max-width: 15rem;
}

/* ------------------------------------------------- signature: turnaround -- */
/* The six services are categories; the changeover is a real sequence. Only
   the sequence gets numbers and a connecting thread — that's the one place
   the ordering carries information the reader actually needs. */
.turnaround { position: relative; }

.turnaround__head { display: grid; gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: end; }
@media (max-width: 860px) { .turnaround__head { grid-template-columns: 1fr; align-items: start; } }

.turnaround__title { font-size: var(--step-h2); font-weight: 300; }

.turnaround__note {
  font-size: var(--step-small);
  line-height: 1.6;
  color: var(--bone-55);
  border-left: 1px solid var(--glass-border);
  padding-left: 1.25rem;
}

.timeline {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
}

/* The gold thread. It runs the full width and loops back at the end. */
.timeline::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, var(--accent-dark), var(--accent) 55%, rgba(201, 169, 97, .25));
}

.stage { position: relative; padding: 0 1.15rem 0 0; }

.stage__dot {
  position: relative;
  width: 19px; height: 19px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--ink);
  display: grid;
  place-items: center;
  margin-bottom: 1.5rem;
}
.stage__dot::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.stage__time {
  font-family: var(--body);
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--accent);
  display: block;
  margin-bottom: .6rem;
}
.stage h3 {
  font-size: 1.0625rem;
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--bone);
  margin-bottom: .5rem;
}
.stage p {
  font-size: var(--step-small);
  line-height: 1.6;
  color: var(--bone-55);
  margin: 0;
}

.timeline__loop {
  grid-column: 1 / -1;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--glass-border);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.timeline__loop p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 300;
  color: var(--bone);
}
.timeline__loop em { font-style: italic; color: var(--accent); }
.timeline__loop span {
  font-size: var(--step-small);
  color: var(--bone-55);
}

@media (max-width: 1000px) {
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.75rem; }
  .timeline::before { display: none; }
  .stage { padding-right: 1rem; }
  .stage::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 19px; right: 0;
    height: 1px;
    background: var(--glass-border);
  }
}
@media (max-width: 620px) {
  .timeline { grid-template-columns: 1fr; row-gap: 0; }
  .stage { padding: 0 0 2rem 2.5rem; }
  .stage__dot { position: absolute; left: 0; top: 0; margin: 0; }
  .stage::before {
    left: 9px; top: 19px; bottom: 0; right: auto;
    width: 1px; height: auto;
    background: var(--glass-border);
  }
  .stage:last-of-type::before { display: none; }
}

/* ------------------------------------------------------------ services -- */
/* Six services, so the column count is pinned rather than auto-fit — auto-fit
   resolves to four at desktop widths and leaves two dead cells in the grid. */
.services {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
/* Blocks with an item count that doesn't divide by three get their own track
   count, so the grid never ends on an empty cell. */
.services--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.services--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .services, .services--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .services, .services--2, .services--4 { grid-template-columns: 1fr; }
}
.service {
  background: var(--bone);
  padding: clamp(1.6rem, 2.6vw, 2.25rem);
  transition: background-color .3s var(--ease);
}
.service:hover { background: var(--accent-wash); }
.service__mark {
  width: 34px; height: 34px;
  color: var(--accent-dark);
  margin-bottom: 1.35rem;
}
.service h3 {
  font-size: var(--step-h3);
  margin-bottom: .6rem;
}
.service p {
  font-size: var(--step-small);
  line-height: 1.65;
  color: var(--ink-70);
  margin: 0;
}

/* ------------------------------------------------------------ split ----- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.split__media {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--sand);
}
.split__media img,
.split__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* An ambient loop layered over the still. The still is what actually holds
   the layout and what remains if the video is missing, blocked, errors, or
   the reader prefers reduced motion — so these blocks never go blank. */
.split__media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.split__media[data-video='ready'] video { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .split__media video { display: none; }
}

/* Small badge over the media, as on the previous design. */
.split__badge {
  position: absolute;
  left: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .85rem 1.15rem;
  border-radius: 14px;
  background: rgba(6, 15, 26, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  color: var(--bone);
}
.split__badge strong {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  font-variation-settings: 'opsz' 96;
  color: var(--accent);
}
.split__badge span {
  font-size: var(--step-small);
  line-height: 1.35;
  max-width: 11rem;
  color: var(--bone-72);
}

.split__body h2 { font-size: var(--step-h2); }
.split__body .lead { margin-top: 1.35rem; }
.split__text { margin-top: 1.35rem; color: var(--ink-70); }
.split__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .85rem; }

/* ----------------------------------------------------------- reviews ---- */
.reviews {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
}
.review {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.6rem, 2.6vw, 2.15rem);
  display: flex;
  flex-direction: column;
}
.review__stars { display: flex; gap: .2rem; color: var(--accent); margin-bottom: 1.25rem; }
.review__stars svg { width: 15px; height: 15px; }
.review blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -.01em;
  font-variation-settings: 'opsz' 72;
  color: var(--ink);
}
.review__body {
  margin-top: 1.1rem;
  font-size: var(--step-small);
  line-height: 1.7;
  color: var(--ink-70);
}
.review__who {
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: var(--step-small);
}
.review__who strong { display: block; font-weight: 600; }
.review__who span { color: var(--ink-55); }

/* ------------------------------------------------------------- callout -- */
.callout {
  background: var(--ink);
  color: var(--bone);
  border-radius: var(--r-card);
  padding: clamp(2rem, 4vw, 3.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
@media (max-width: 800px) { .callout { grid-template-columns: 1fr; } }
.callout h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 300;
  max-width: 34rem;
}
.callout em { font-style: italic; color: var(--accent); }
.callout p {
  margin-top: 1rem;
  font-size: var(--step-small);
  color: var(--bone-72);
  max-width: 38rem;
}

/* ------------------------------------------------------------- contact -- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.contact__title { font-size: var(--step-h2); font-weight: 300; }
.contact__lead { margin-top: 1.35rem; }

.contact__list { margin-top: 2.5rem; display: grid; gap: 1.6rem; }
.contact__item { display: grid; gap: .3rem; }
.contact__item dt {
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.contact__item dd { margin: 0; font-size: 1.0625rem; }
.contact__item dd a { text-decoration: none; border-bottom: 1px solid var(--glass-border); transition: border-color .2s var(--ease); }
.contact__item dd a:hover { border-bottom-color: var(--accent); }

.contact__areas {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--glass-border);
  font-size: var(--step-small);
  line-height: 1.7;
  color: var(--bone-55);
}
.contact__areas strong { color: var(--bone-72); font-weight: 500; display: block; margin-bottom: .35rem; }

.contact__form {
  background: rgba(250, 250, 246, .05);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-card);
  padding: clamp(1.6rem, 2.8vw, 2.25rem);
}
.contact__form h3 { font-size: 1.5rem; color: var(--bone); margin-bottom: 1.35rem; }

/* -------------------------------------------------------------- footer -- */
.site-footer {
  background: var(--ink-deep);
  color: var(--bone-72);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
  font-size: var(--step-small);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand img { height: 40px; width: auto; margin-bottom: 1.35rem; }
.footer-brand p { line-height: 1.7; max-width: 24rem; color: var(--bone-55); }

.footer-col h4 {
  font-family: var(--body);
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.footer-col li { margin-bottom: .6rem; }
.footer-col a {
  color: var(--bone-72);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(250, 250, 246, .1);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  color: var(--bone-55);
  font-size: .8125rem;
}

/* ------------------------------------------------------------ whatsapp -- */
.wa-float {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 90;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(6, 15, 26, .28);
  transition: transform .25s var(--ease);
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 28px; height: 28px; }

/* ------------------------------------------------------- inner page head -- */
/* Interior pages open on a band, not a full-bleed hero — the homepage keeps
   the only 100vh moment on the site. */
.page-head {
  position: relative;
  background: var(--ink);
  color: var(--bone);
  padding-block: clamp(8.5rem, 15vh, 11rem) clamp(3.5rem, 6vw, 5.5rem);
  overflow: hidden;
}
.page-head--media .page-head__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-head--media .page-head__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .3;
}
.page-head--media .page-head__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(10, 25, 41, .82) 55%, rgba(10, 25, 41, .7) 100%);
}
.page-head .wrap { position: relative; z-index: 1; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-55);
  margin: 0 0 1.35rem;
}
.crumbs a { color: var(--accent); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { opacity: .5; }

.page-head h1 {
  font-size: clamp(2.1rem, 1.15rem + 3.4vw, 3.75rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.02em;
  font-variation-settings: 'opsz' 144;
  max-width: 22ch;
  text-wrap: balance;
}
.page-head__sub {
  margin-top: 1.5rem;
  max-width: 42rem;
  font-size: var(--step-lead);
  line-height: 1.6;
  font-weight: 300;
  color: var(--bone-72);
}
.page-head__meta {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  font-size: var(--step-small);
  color: var(--bone-55);
}

/* ---------------------------------------------------------------- prose -- */
.prose {
  max-width: 44rem;
  font-size: 1.09375rem;
  line-height: 1.78;
  color: var(--ink-70);
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

.prose p { margin: 0 0 1.3em; }

.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { color: var(--ink); }
.prose h2 {
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.125rem);
  margin: 2.6em 0 .7em;
  line-height: 1.15;
}
.prose h3 {
  font-size: clamp(1.3rem, 1.15rem + .6vw, 1.625rem);
  margin: 2.2em 0 .65em;
  line-height: 1.2;
}
.prose h4, .prose h5, .prose h6 {
  font-family: var(--body);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
  margin: 2em 0 .6em;
}

.prose strong { color: var(--ink); font-weight: 600; }

.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color .2s var(--ease);
}
.prose a:hover { color: var(--accent-dark); }

.prose ul, .prose ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .5em; padding-left: .3em; }
.prose li::marker { color: var(--accent-dark); }

.prose img {
  border-radius: var(--r-card);
  margin: 2em 0;
}
.prose figure { margin: 2em 0; }
.prose figcaption {
  margin-top: .75rem;
  font-size: var(--step-small);
  color: var(--ink-55);
}

.prose blockquote {
  margin: 2em 0;
  padding: .35em 0 .35em 1.6rem;
  border-left: 2px solid var(--accent);
  font-family: var(--display);
  font-size: 1.3125rem;
  font-weight: 300;
  line-height: 1.45;
  font-variation-settings: 'opsz' 72;
  color: var(--ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose hr {
  height: 1px;
  border: 0;
  background: var(--line);
  margin: 2.6em 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: var(--step-small);
}
.prose th, .prose td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.prose th { color: var(--ink); font-weight: 600; }

.prose-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 960px) { .prose-wrap { grid-template-columns: 1fr; } }

/* Sticky sidebar card on article and service pages */
.aside-card {
  position: sticky;
  top: 6.5rem;
  background: var(--ink);
  color: var(--bone);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 2.6vw, 2rem);
}
.aside-card h2 {
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--bone);
}
.aside-card p {
  margin-top: .75rem;
  font-size: var(--step-small);
  line-height: 1.6;
  color: var(--bone-72);
}
.aside-card .btn { margin-top: 1.35rem; width: 100%; justify-content: center; }
.aside-card__meta {
  margin-top: 1.35rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--glass-border);
  font-size: var(--step-small);
  color: var(--bone-55);
}
.aside-card__meta a { color: var(--bone-72); text-decoration: none; }
.aside-card__meta a:hover { color: var(--accent); }
@media (max-width: 960px) { .aside-card { position: static; } }

/* ------------------------------------------------------------ faq list -- */
.faq-group { margin-top: clamp(2.5rem, 4.5vw, 3.5rem); }
.faq-group__title {
  font-size: var(--step-h3);
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: var(--step-eyebrow);
  color: var(--accent-dark);
  margin-bottom: 1.25rem;
}
.faq {
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: var(--step-h3);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-dark); }
.faq summary::after {
  content: '';
  flex-shrink: 0;
  width: 13px; height: 13px;
  margin-top: .55em;
  border-right: 1.5px solid var(--accent-dark);
  border-bottom: 1.5px solid var(--accent-dark);
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq__body {
  padding: 0 0 1.6rem;
  max-width: 48rem;
  font-size: var(--step-body);
  line-height: 1.72;
  color: var(--ink-70);
}
.faq__body p { margin: 0 0 1em; }
.faq__body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- post index --- */
.post-grid {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.6vw, 2.25rem);
}
@media (max-width: 940px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .post-grid { grid-template-columns: 1fr; } }

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(10, 25, 41, .1);
}
.post-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); }
.post-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { padding: clamp(1.25rem, 2.2vw, 1.6rem); display: flex; flex-direction: column; flex: 1; }
.post-card h2 {
  font-size: 1.1875rem;
  font-weight: 400;
  line-height: 1.28;
  font-variation-settings: 'opsz' 48;
}
.post-card p {
  margin-top: .7rem;
  font-size: var(--step-small);
  line-height: 1.62;
  color: var(--ink-70);
}
.post-card__more {
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--accent-dark);
}

/* --------------------------------------------------------------- motion -- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}