/*
Theme Name: Aura Realty
Theme URI: https://example.com/aura-realty
Author: Aura Realty
Author URI: https://example.com
Description: Editorial-modern theme for Aura Realty, a RERA-registered property advisory in Pune. Five page templates, light and dark themes with a persisted toggle, a reviews slider and a print stylesheet.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aura-realty
Tags: one-column, custom-menu, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   Aura Realty - design system
   Editorial-modern. Cool slate + a single terracotta accent.
   One accent, one radius system, one motion language.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */

:root {
  /* Light appearance */
  --bg:            #ffffff;   /* pure white ground */
  --surface:       #f7f7f7;   /* cards sit just BELOW the page, not above it */
  --surface-2:     #ebebeb;
  --text:          #16191c;   /* 17.65:1 on bg */
  --muted:         #616161;   /* 6.19:1 on bg, 5.20:1 on surface-2 */
  --line:          #e5e5e5;   /* decorative hairline */
  --line-strong:   #7c7c7c;   /* form control boundary, >=3:1 both surfaces */
  --accent:        #a83c1e;   /* 6.31:1 on bg - safe for text */
  --accent-bright: #d1512c;   /* 4.26:1 - large text and fills only */
  --accent-hover:  #8f3018;
  --accent-soft:   #f6e9e4;
  --on-accent:     #ffffff;   /* 6.31:1 on --accent */
  --error:         #a6231c;
  --success:       #1d6b45;
  --band:          #000000;   /* the inverse ground, pure black */
  --accent-on-band:#ea6f45;   /* 6.86:1 on the dark band, same hue family */
  --band-text:     #ffffff;
  --band-muted:    #bababa;   /* 10.82:1 on the black band */
  --img-adjust:    none;
  --shadow-sm: 0 1px 2px rgba(16,20,18,.05);
  --shadow-md: 0 1px 2px rgba(16,20,18,.05), 0 14px 34px -14px rgba(16,20,18,.20);
  --shadow-lg: 0 2px 4px rgba(16,20,18,.06), 0 28px 60px -22px rgba(16,20,18,.30);

  /* Radii - one system, used everywhere */
  --r-pill:  999px;
  --r-card:  14px;
  --r-input: 10px;

  /* Space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --nav-h: 80px;
  --gutter: clamp(20px, 5vw, 44px);
  --maxw: 1200px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .7s;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #000000;
    --surface:       #141414;
    --surface-2:     #1f1f1f;
    --text:          #edeae4;
    --muted:         #9e9e9e;
    --line:          #292929;
    --line-strong:   #6b6b6b;
    --accent:        #e2643a;
    --accent-bright: #ef7449;
    --accent-hover:  #ef7449;
    --accent-soft:   #2a1a14;
    --on-accent:     #000000;   /* 6.12:1 - white would only be 3.43:1 */
    --error:         #ff8a80;
    --success:       #5fd39b;
    --band:          #141414;
    --accent-on-band:#ea6f45;
    --band-text:     #edeae4;
    --band-muted:    #9e9e9e;
    --img-adjust:    brightness(.88);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 1px 2px rgba(0,0,0,.5), 0 14px 34px -14px rgba(0,0,0,.75);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 28px 60px -22px rgba(0,0,0,.85);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:            #000000;
  --surface:       #141414;
  --surface-2:     #1f1f1f;
  --text:          #edeae4;
  --muted:         #9e9e9e;
  --line:          #292929;
  --line-strong:   #6b6b6b;
  --accent:        #e2643a;
  --accent-bright: #ef7449;
  --accent-hover:  #ef7449;
  --accent-soft:   #2a1a14;
  --on-accent:     #000000;
  --error:         #ff8a80;
  --success:       #5fd39b;
  --band:          #141414;
  --accent-on-band:#ea6f45;
  --band-text:     #edeae4;
  --band-muted:    #9e9e9e;
  --img-adjust:    brightness(.88);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 1px 2px rgba(0,0,0,.5), 0 14px 34px -14px rgba(0,0,0,.75);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 28px 60px -22px rgba(0,0,0,.85);
  color-scheme: dark;
}

/* ----------------------------------------------------------------- 2. BASE */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* keeps a focused anchor target clear of the sticky header (WCAG 2.4.11) */
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; filter: var(--img-adjust); }

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; }

p { margin: 0; }

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

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

button { cursor: pointer; }

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

::selection { background: var(--accent); color: var(--on-accent); }

.wrap { width: min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 200;
  background: var(--accent); color: var(--on-accent);
  padding: 12px 20px; border-radius: var(--r-pill); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip:focus { top: var(--s4); }

/* ----------------------------------------------------------- 3. TYPE SCALE */

.display {
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
  font-weight: 600;
}

.h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -0.032em;
  font-weight: 600;
}

.h3 {
  font-size: clamp(1.12rem, 1.5vw, 1.3rem);
  line-height: 1.32;
  letter-spacing: -0.018em;
  font-weight: 600;
}

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.62;
  color: var(--muted);
  letter-spacing: -0.012em;
}

.body-muted { color: var(--muted); }

.mono {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}

.eyebrow {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--accent); flex: none;
}

.section { padding-block: clamp(64px, 9vw, 128px); }
.section-tight { padding-block: clamp(48px, 6vw, 88px); }

.section-head { max-width: 62ch; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .h2 { margin-top: var(--s4); }
.section-head .lede { margin-top: var(--s5); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* -------------------------------------------------------------- 4. BUTTONS */

.btn {
  --btn-py: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px;                 /* >= 44px touch target */
  padding: var(--btn-py) 26px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-weight: 600; font-size: .95rem; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  position: relative; overflow: hidden;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.btn i { font-size: 1.1em; }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }

/* sheen sweep - purely decorative, sits above the fill, below the label */
.btn-primary .sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.30) 48%, transparent 64%);
  translate: -130% 0;
}
.btn-primary:hover .sheen { animation: sheen .8s var(--ease) forwards; }
@keyframes sheen { from { translate: -130% 0; } to { translate: 130% 0; } }

.btn-ghost {
  background: transparent; color: var(--text); border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--surface); border-color: var(--text); }

.btn-sm { min-height: 44px; padding: 10px 20px; font-size: .875rem; }

.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--accent); text-decoration: none;
  padding: 4px 0; min-height: 24px;
  border-bottom: 1px solid transparent;
  transition: border-color .22s var(--ease), gap .22s var(--ease);
}
.link-arrow:hover { border-bottom-color: var(--accent); gap: 13px; }

/* ------------------------------------------------------------------ 5. NAV */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .nav { background: var(--bg); } }

.nav-in {
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s5);
  flex-wrap: nowrap;                 /* nav stays on ONE line */
}

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; font-weight: 600; font-size: 1.06rem;
  letter-spacing: -0.03em; white-space: nowrap; flex: none;
}
/* Monogram: the A as a solid peak with a triangular counter.
   Clipped from a solid accent fill rather than punched out with a --bg
   cutout, so the mark keeps real transparency and stays correct on a card,
   a photograph or a dark band, not just on the page background. */
.brand-mark {
  width: 22px; height: 22px; flex: none;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 100%, 73% 100%, 50% 44%, 27% 100%, 0 100%);
}
.brand-thin { color: var(--muted); font-weight: 500; margin-left: .32em; }

.nav-links {
  display: flex; align-items: center; gap: clamp(4px, 1.6vw, 22px);
  margin-left: auto; flex-wrap: nowrap;
}
.nav-links a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 4px;
  text-decoration: none; font-size: .93rem; font-weight: 500;
  color: var(--muted); white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 9px;
  height: 2px; background: var(--accent);
  scale: 0 1; transform-origin: left;
  transition: scale .3s var(--ease);
}
.nav-links a:hover::after { scale: 1 1; }
.nav-links a.is-current { color: var(--text); font-weight: 600; }
.nav-links a.is-current::after { scale: 1 1; }

.nav-end { display: flex; align-items: center; gap: var(--s3); flex: none; }

.icon-btn {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-pill); color: var(--text);
  font-size: 1.15rem;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--line-strong); }

.burger { display: none; }

.theme-btn .ph-sun-dim { display: none; }
:root[data-theme="dark"] .theme-btn .ph-sun-dim { display: inline; }
:root[data-theme="dark"] .theme-btn .ph-moon-stars { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .ph-sun-dim { display: inline; }
  :root:not([data-theme="light"]) .theme-btn .ph-moon-stars { display: none; }
}

/* Mobile drawer */
.nav-drawer {
  display: none;
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 99;
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding: var(--s5) var(--gutter) var(--s7);
  box-shadow: var(--shadow-lg);
}
.nav-drawer.is-open { display: block; }
.nav-drawer a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 4px 0;
  text-decoration: none; font-size: 1.3rem; font-weight: 600;
  letter-spacing: -0.028em;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.nav-drawer a.is-current { color: var(--accent); }
.nav-drawer .btn { margin-top: var(--s5); }

/* --------------------------------------------------------------- 6. MOTION */

/* Scroll reveal.
   NOTE: never clip a reveal target to zero area (e.g. clip-path: inset(0 0 100% 0)).
   A zero-area element reports isIntersecting:false forever and the observer
   never fires. Opacity + translate keep the box measurable. */
.rv {
  opacity: 0;
  translate: 0 22px;
  transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease);
  transition-delay: var(--d, 0s);
}
.rv.in { opacity: 1; translate: none; }

/* Heading wipe: the observed element keeps full size, the inner span slides. */
.wipe { display: block; overflow: hidden; padding-bottom: .09em; }
.wipe > span { display: block; translate: 0 108%; transition: translate .85s var(--ease); transition-delay: var(--d, 0s); }
.wipe.in > span { translate: none; }

/* ------------------------------------------------------------------ 7. HERO */

.hero { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(48px, 6vw, 88px); }

.hero-grid {
  display: grid;
  /* the copy column has to be wide enough to hold the display headline on
     two lines at 1440; anything narrower and it runs to four or five */
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
}

.hero-copy { max-width: none; }
.hero-copy .lede { max-width: 42ch; }
.hero-copy .display { margin-top: var(--s5); }
.hero-copy .lede { margin-top: var(--s5); max-width: 46ch; }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7); }

.hero-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: .9rem; max-width: 44ch;
}
.hero-note i { color: var(--accent); font-size: 1.15rem; flex: none; margin-top: 1px; }

.hero-img {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  aspect-ratio: 11 / 13; background: var(--surface-2);
  box-shadow: var(--shadow-lg);
}
.hero-img img {
  width: 100%; height: 100%; object-fit: cover;
  scale: 1.12;                       /* headroom for the scroll drift */
}

/* Scroll-linked drift, progressive enhancement only. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-img img {
      animation: hero-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes hero-drift {
      from { translate: 0 -4%; }
      to   { translate: 0 4%; }
    }
  }
}

.hero-badge {
  position: absolute; left: 16px; bottom: 16px; right: 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
}
.hero-badge i { color: var(--accent); font-size: 1.4rem; flex: none; }
.hero-badge b { display: block; font-size: .95rem; letter-spacing: -0.02em; }
.hero-badge span { display: block; font-size: .8rem; color: var(--muted); }

/* --------------------------------------------------------------- 8. MARQUEE */

.marquee-wrap {
  border-block: 1px solid var(--line);
  padding-block: 20px; position: relative;
  display: flex; align-items: center; gap: var(--s4);
}
.marquee {
  flex: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee-wrap:hover .marquee-track,
.marquee-wrap:focus-within .marquee-track,
.marquee-wrap.is-paused .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { translate: 0 0; } to { translate: -50% 0; } }

.marquee-list { display: flex; align-items: center; }
.marquee-list li {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 34px);
  padding-inline: clamp(9px, 1.6vw, 17px);
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  font-weight: 500; letter-spacing: -0.028em; white-space: nowrap;
}
.marquee-list li::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.marquee-toggle {
  flex: none; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); color: var(--text); font-size: 1rem;
}
.marquee-toggle:hover { border-color: var(--line-strong); }
.marquee-toggle .ph-play { display: none; }
.marquee-wrap.is-paused .marquee-toggle .ph-play { display: inline; }
.marquee-wrap.is-paused .marquee-toggle .ph-pause { display: none; }

/* ---------------------------------------------------------------- 9. BENTO */

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s4);
}
.bento-a { grid-column: span 4; }
.bento-photo { grid-column: span 2; grid-row: span 2; min-height: 340px; }
.bento-b { grid-column: span 2; }
.bento-c { grid-column: span 2; }
.bento-d { grid-column: span 6; }

.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(22px, 2.6vw, 32px);
  display: flex; flex-direction: column; gap: var(--s4);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
/* Full-bleed photo at the head of a tile. The tile's own padding is cancelled
   with a matching negative margin so the image meets the card edge. The same
   clamp has to appear in both places or the bleed drifts at some widths, and
   the radius is a pixel tighter than the card's because it sits inside the
   1px border. */
.tile-media {
  margin: calc(clamp(22px, 2.6vw, 32px) * -1);
  margin-bottom: var(--s2);
  border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 16 / 9;
}
.tile-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: scale .8s var(--ease);
}

.tile-icon {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); font-size: 1.4rem;
  margin-bottom: var(--s2);
}
.tile p { color: var(--muted); font-size: .95rem; }
.tile-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: auto; padding-top: var(--s5); }
.tag {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--muted);
}
.bento-d { flex-direction: row; align-items: flex-start; gap: var(--s6); flex-wrap: wrap; }
.bento-d .tile-icon { margin-bottom: 0; }
.bento-d .bento-d-body { flex: 1 1 360px; display: flex; flex-direction: column; gap: var(--s4); }

/* Fee cards: a subtitle that wraps to two lines in one card must not push
   that card's title and price out of line with its neighbours. Same subgrid
   trick as the paired form fields. */
.fee-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto auto auto;
  column-gap: clamp(20px, 2.6vw, 32px);
  row-gap: 12px;
}
@supports (grid-template-rows: subgrid) {
  .fee-grid > .tile {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    align-content: start;
    /* one consistent step between all six shared rows; because every card
       spans the same rows they stay aligned across the three columns */
    row-gap: var(--s3);
  }
}
/* Scoped to .tile so it out-ranks `.tile p` further down, which is one
   specificity point heavier than a lone class and was silently rendering the
   price at body size in muted grey. */
.tile .fee-price {
  font-size: clamp(1.75rem, 2.6vw, 2.1rem);
  font-weight: 600; letter-spacing: -0.04em; line-height: 1.15;
  color: var(--text);
}
.fee-points { display: flex; flex-direction: column; gap: var(--s3); }
.fee-points li { display: flex; gap: var(--s3); align-items: flex-start; font-size: .9rem; }
.fee-points i { color: var(--accent); flex: none; margin-top: 3px; }

.tile-photo {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2);
}
.tile-photo img { width: 100%; height: 100%; object-fit: cover; }
.tile-photo figcaption {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  background: color-mix(in srgb, var(--surface) 93%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 10px; padding: 11px 14px;
  font-size: .82rem; color: var(--text); line-height: 1.45;
}

/* ------------------------------------------------------------- 10. PROJECTS */

.stagger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 52px); }
.stagger > *:nth-child(even) { margin-top: clamp(0px, 7vw, 84px); }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 32px); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 48px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); }

.p-card { display: block; text-decoration: none; color: inherit; }
.p-img {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--surface-2); border: 1px solid var(--line);
}
.p-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: scale .8s var(--ease), filter .45s var(--ease);
}
.p-fee {
  position: absolute; top: 12px; left: 12px;
  /* solid, not translucent: this chip carries the most important number on the
     card and a photo showing through drags it under 4.5:1 in dark mode */
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 6px 13px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
}
.p-body { padding-top: var(--s5); }
.p-loc {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
}
.p-title { margin-top: var(--s3); transition: color .25s var(--ease); }
.p-meta {
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  font-size: .875rem; color: var(--muted);
}
.p-meta b { color: var(--text); font-weight: 600; }

/* Lead development block */
.lead-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.lead-img { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 11; background: var(--surface-2); }
.lead-img img { width: 100%; height: 100%; object-fit: cover; }

.spec-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--r-card);
  overflow: hidden; background: var(--line); gap: 1px;
  margin-top: var(--s6);
}
.spec {
  background: var(--surface); padding: clamp(18px, 2.2vw, 26px);
  display: flex; flex-direction: column; gap: var(--s2);
}
.spec dt {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
}
.spec dd { margin: 0; font-size: clamp(1.02rem, 1.4vw, 1.18rem); font-weight: 600; letter-spacing: -0.022em; }

/* ---------------------------------------------------------------- 11. STATS */

.band { background: var(--band); color: var(--band-text); }
.band .lede, .band .body-muted, .band .stat-label { color: var(--band-muted); }
.band .eyebrow, .photo-band-overlay .eyebrow { color: var(--accent-on-band); }
.band .eyebrow::before, .photo-band-overlay .eyebrow::before { background: var(--accent-on-band); }
.band .rule { background: color-mix(in srgb, var(--band-text) 16%, transparent); }

.statement {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.18; letter-spacing: -0.034em; font-weight: 600;
  max-width: 20ch;
}

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.stat { display: flex; flex-direction: column; gap: var(--s2); }
.stat-num {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 600; letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: .875rem; color: var(--muted); max-width: 18ch; }

/* --------------------------------------------------------- 12. TESTIMONIAL */

.quote { max-width: 22ch; }
.quote blockquote {
  margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  line-height: 1.3; letter-spacing: -0.03em; font-weight: 500;
  max-width: 26ch;
}
.quote-mark { color: var(--accent); font-size: 2.4rem; line-height: 1; display: block; margin-bottom: var(--s4); }
.quote figcaption { margin-top: var(--s5); font-size: .9rem; color: var(--muted); }
.quote figcaption b { color: var(--text); display: block; font-weight: 600; }

/* ------------------------------------------------------ 12b. REVIEWS SLIDER
   A scroll-snap track rather than a transform carousel. The browser does the
   paging, so a trackpad, a touch swipe and the keyboard all work before any
   JavaScript runs; the buttons and dots below are enhancement only, and the
   noscript block hides them. */
/* The column holding the slider is a grid item, and a grid item's automatic
   minimum size is min-content rather than zero. Without min-width:0 the
   five-slide track pushes the whole column wider than the page at narrow
   widths, which is where the horizontal scrollbar came from. */
.reviews-col { min-width: 0; }

.reviews-viewport {
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;                 /* the dots are the affordance */
  -ms-overflow-style: none;
  border-radius: 4px;
}
.reviews-viewport::-webkit-scrollbar { display: none; }
.reviews-viewport:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }

.reviews-track { display: flex; }

/* every slide is the full width of the viewport, so the track is exactly as
   tall as the longest quote and nothing jumps between slides */
.review { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.review figure { margin: 0; }
.review blockquote {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.72rem);
  line-height: 1.38; letter-spacing: -0.03em; font-weight: 500;
}
.review figcaption { margin-top: var(--s5); font-size: .9rem; color: var(--muted); }
.review figcaption b { color: var(--text); display: block; font-weight: 600; }

.reviews-nav { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s6); }
.reviews-dots { display: flex; gap: 2px; margin-left: var(--s2); }

/* 24px hit area around an 8px dot - WCAG 2.5.8 minimum target size */
.reviews-dot {
  width: 24px; height: 24px; padding: 0; border: 0; background: none;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.reviews-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-strong);
  transition: background-color .2s var(--ease), scale .2s var(--ease);
}
.reviews-dot[aria-current="true"]::before { background: var(--accent); scale: 1.4; }
.icon-btn[disabled] { opacity: .38; pointer-events: none; }

/* --------------------------------------------------------------- 13. STEPS */

.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 34px); }
.step { position: relative; padding-top: var(--s5); border-top: 2px solid var(--accent); }
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .12em; color: var(--accent); font-weight: 500;
  display: block; margin-bottom: var(--s3);
}
.step p { color: var(--muted); font-size: .93rem; margin-top: var(--s3); }

/* ---------------------------------------------------------------- 14. TEAM */

.person-img {
  border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 5;
  background: var(--surface-2); border: 1px solid var(--line);
}
.person-img img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease); }
.person h3 { margin-top: var(--s4); }
.person p { color: var(--muted); font-size: .88rem; margin-top: 6px; }

/* --------------------------------------------------------------- 15. BANDS */

.photo-band { position: relative; height: clamp(280px, 38vw, 460px); overflow: hidden; }
.photo-band img { width: 100%; height: 100%; object-fit: cover; }
.photo-band-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,12,11,.88) 0%, rgba(10,12,11,.62) 46%, rgba(10,12,11,.22) 100%);
  display: flex; align-items: center;
}
.photo-band-overlay .wrap { color: #fff; }
.photo-band-overlay .h2 { max-width: 18ch; }
.photo-band-overlay p { color: #dfe2dc; max-width: 46ch; margin-top: var(--s4); }

/* -------------------------------------------------------------- 16. DETAILS */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 24px 0; min-height: 44px;
  font-size: clamp(1.02rem, 1.4vw, 1.14rem); font-weight: 600; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { color: var(--accent); font-size: 1.3rem; flex: none; transition: rotate .3s var(--ease); }
.faq details[open] summary i { rotate: 45deg; }
.faq .faq-a { padding-bottom: 26px; color: var(--muted); max-width: 68ch; }

/* --------------------------------------------------------------- 17. FOOTER */

.foot { border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 80px) var(--s7); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 56px); }
.foot h4 { font-family: "Geist Mono", ui-monospace, monospace; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: var(--s4); }
.foot li { margin-bottom: var(--s3); }
.foot a { color: var(--muted); text-decoration: none; font-size: .93rem; display: inline-flex; min-height: 28px; align-items: center; }
.foot a:hover { color: var(--accent); }
.foot-note { margin-top: clamp(40px, 5vw, 64px); padding-top: var(--s5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); justify-content: space-between; color: var(--muted); font-size: .82rem; }

/* ---------------------------------------------------------------- 18. FORMS */

.form-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: clamp(24px, 3vw, 40px);
}

.form-grid { display: flex; flex-direction: column; gap: var(--s5); }

/* A .field is a 3-row grid: label / control / note.
   align-content:start stops a stretched row from redistributing spare
   height into the label and control rows (which knocks paired fields
   out of alignment). */
.field {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  row-gap: var(--s2);
  min-width: 0;
}

/* Paired fields share the parent's label/control/note rows via subgrid, so a
   label that wraps to two lines cannot push its own input out of line with
   its neighbour's. */
.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  column-gap: var(--s5);
  row-gap: var(--s2);
}
@supports (grid-template-rows: subgrid) {
  .form-row > .field {
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

.field > label {
  font-size: .875rem; font-weight: 600; letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 6px;
}
.field .opt { font-weight: 400; color: var(--muted); font-size: .8rem; }

.input, .select, .textarea {
  width: 100%;
  min-height: 50px;                    /* >= 44px target */
  padding: 12px 15px;
  background: var(--bg);
  border: 1px solid var(--line-strong); /* >= 3:1 against both surfaces */
  border-radius: var(--r-input);
  line-height: 1.6;                     /* pinned so select matches input */
  letter-spacing: -0.006em;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.textarea { min-height: 132px; resize: vertical; padding-top: 13px; }

.select {
  line-height: 1.6;                     /* must match .input exactly */
  padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23616161' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 16px 16px;
}
:root[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239e9e9e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239e9e9e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  }
}

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

.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.note { font-size: .8rem; color: var(--muted); min-height: 1.2em; }
.note.err { color: var(--error); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea { border-color: var(--error); }

/* Checkbox set - choosing beats typing */
.checks { display: flex; flex-wrap: wrap; gap: var(--s2); }
.check {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 16px 0 13px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--bg); cursor: pointer; font-size: .9rem;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.check input { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; cursor: pointer; }
.check:hover { border-color: var(--text); }
.check:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.check:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Error summary - focusable, links to each bad field */
.err-summary {
  display: none;
  border: 1px solid var(--error); border-radius: var(--r-input);
  background: color-mix(in srgb, var(--error) 9%, var(--surface));
  padding: 18px 20px; margin-bottom: var(--s5);
}
.err-summary.is-shown { display: block; }
.err-summary h3 { color: var(--error); font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.err-summary ul { margin-top: var(--s3); list-style: disc; padding-left: 20px; }
.err-summary li { margin-bottom: 5px; }
.err-summary a { color: var(--error); font-weight: 500; }

/* Loading + success */
.btn[aria-busy="true"] { pointer-events: none; opacity: .82; }
.spinner {
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  border: 2px solid color-mix(in srgb, var(--on-accent) 35%, transparent);
  border-top-color: var(--on-accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }

.form-success {
  display: none;
  border: 1px solid var(--success); border-radius: var(--r-card);
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  padding: clamp(24px, 3vw, 40px);
}
.form-success.is-shown { display: block; }
.form-success i { color: var(--success); font-size: 2.2rem; }
.form-success h3 { margin-top: var(--s3); }
.form-success p { color: var(--muted); margin-top: var(--s3); max-width: 52ch; }

/* Contact side panel */
.info-list { display: flex; flex-direction: column; gap: var(--s5); }
.info-item { display: flex; gap: var(--s4); align-items: flex-start; }
.info-item i { color: var(--accent); font-size: 1.3rem; flex: none; margin-top: 3px; }
.info-item h4 { font-size: .8rem; font-family: "Geist Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.info-item p, .info-item a { margin-top: var(--s2); font-size: .95rem; text-decoration: none; display: block; }
.info-item a:hover { color: var(--accent); }


/* Contact page split */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 980px) { .contact-grid { grid-template-columns: 1fr; } }

/* All-pages index on the home page */
.page-link { text-decoration: none; color: inherit; }
.page-go {
  margin-top: auto; padding-top: var(--s4);
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-weight: 600; font-size: .875rem;
  transition: gap .25s var(--ease);
}

/* --------------------------------------------------- 19. HOVER (LATE PASS)
   These sit after the reveal rules on purpose. The reveal uses the `translate`
   property and hover uses `transform`, so the two compose instead of fighting,
   and the extra class in the selector wins on specificity regardless. */

.p-card.rv:hover,
.p-card:hover { transform: translateY(-7px); }
.p-card { transition: transform .35s var(--ease); }
.p-card:hover .p-img img { scale: 1.06; filter: var(--img-adjust, none) brightness(.74); }
.p-card:hover .p-title { color: var(--accent); }

/* Hover lights the card up in the brand orange instead of a grey outline.
   --accent-bright is used rather than --accent so the edge reads as orange in
   the light theme too, where --accent is a deep brick. It is a border and a
   shadow, never text, so the 3:1 non-text threshold is the bar it has to
   clear and it does. */
.tile.rv:hover,
.tile:hover {
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-bright) 20%, transparent),
              0 14px 40px -12px color-mix(in srgb, var(--accent-bright) 62%, transparent);
}
.tile.rv:hover .tile-media img,
.tile:hover .tile-media img { scale: 1.04; }

.page-link { transition: transform .35s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.page-link.rv:hover, .page-link:hover { transform: translateY(-5px); }
.page-link:hover .h3 { color: var(--accent); }
.page-link:hover .page-go { gap: 14px; }

.person.rv:hover .person-img img,
.person:hover .person-img img { scale: 1.05; }

/* ---------------------------------------------------------- 20. RESPONSIVE */

@media (max-width: 1080px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .burger { display: inline-flex; }
  .nav-cta { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-copy { max-width: none; }
  .hero-img { aspect-ratio: 16 / 10; }
  .hero { padding-top: 28px; padding-bottom: 30px; }
  .hero-copy .display { margin-top: 16px; }
  .hero-actions { margin-top: 28px; }
  .hero-note { margin-top: 24px; padding-top: 20px; }
  .lead-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .fee-grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: clamp(20px, 2.6vw, 32px); }
  .fee-grid > .tile { display: flex; grid-row: auto; grid-template-rows: none; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stagger { grid-template-columns: 1fr; }
  .stagger > *:nth-child(even) { margin-top: 0; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-a, .bento-b, .bento-c, .bento-d, .bento-photo { grid-column: span 6; grid-row: auto; }
  .bento-photo { min-height: 260px; }
  .quote, .statement { max-width: none; }
}

@media (max-width: 640px) {
  .grid-4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; row-gap: var(--s5); grid-template-rows: none; }
  .form-row > .field { grid-row: auto; grid-template-rows: auto auto auto; row-gap: var(--s2); }
  .foot-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { flex: 1 1 auto; }
  .bento-d { flex-direction: column; gap: var(--s3); }
  /* in a column flex container flex-basis sets HEIGHT, so the 360px basis used
     for the desktop side-by-side layout would leave a dead gap here */
  .bento-d .bento-d-body { flex: 0 1 auto; }
  .bento-d .tile-tags { margin-top: var(--s2); }
}

@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ 21. REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1 !important; translate: none !important; }
  .wipe > span { translate: none !important; }
  .marquee-track { animation: none !important; }
  .p-card:hover { transform: none; }
  .p-card:hover .p-img img { scale: 1; }
  .tile:hover .tile-media img { scale: 1; }
  .hero-img img { scale: 1; }
}

/* --------------------------------------------------------------- 22. PRINT
   Paper renders at roughly 816px, which is BELOW the 900px breakpoint, so a
   PDF would silently export the mobile layout. Every desktop grid is restated
   here and the nav link row is forced back on. */

@media print {
  @page { size: A4 landscape; margin: 12mm; }

  :root {
    --bg: #ffffff; --surface: #ffffff; --surface-2: #f1f1f1;
    --text: #14171a; --muted: #4f4f4f;
    --line: #d4d4d4; --line-strong: #7c7c7c;
    --accent: #9a3619; --accent-soft: #f6e9e4;
    --band: #16191c; --band-text: #ffffff; --band-muted: #c6c6c6;
    --on-accent: #ffffff; --img-adjust: none;
    --nav-h: 62px;
    --gutter: 0px; --maxw: 100%;
    --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
  }

  html, body { background: #fff !important; color: var(--text) !important; }
  body { font-size: 10.5pt; overflow: visible; }

  .skip, .burger, .theme-btn, .nav-drawer, .marquee-toggle,
  .err-summary, .form-success, .scroll-cue { display: none !important; }

  /* Force the desktop nav row back on regardless of paper width */
  .nav {
    position: static !important;
    border-bottom: 1px solid var(--line) !important;
    backdrop-filter: none !important;
    break-inside: avoid; break-after: avoid;
  }
  .nav-in { height: auto !important; padding-block: 14px; display: flex !important; flex-wrap: nowrap !important; }
  .nav-links {
    display: flex !important; flex-wrap: nowrap !important;
    gap: 20px !important; margin-left: auto !important;
  }
  .nav-links a { display: inline-flex !important; min-height: 0 !important; font-size: 9.5pt; color: var(--text) !important; }
  .nav-links a::after { display: none; }
  .nav-links a.is-current { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
  .nav-cta { display: inline-flex !important; }

  /* Everything is revealed on paper */
  .rv { opacity: 1 !important; translate: none !important; transition: none !important; }
  .wipe { overflow: visible !important; }
  .wipe > span { translate: none !important; transition: none !important; }
  .marquee-track { animation: none !important; }
  .marquee { -webkit-mask-image: none; mask-image: none; }

  /* unroll the reviews slider so every quote reaches paper */
  .reviews-viewport { overflow: visible !important; }
  .reviews-track { display: block !important; }
  .review { break-inside: avoid; padding-bottom: 14px; }
  .reviews-nav { display: none !important; }

  /* Restate every desktop grid - print is narrower than the 900px breakpoint */
  .hero-grid { display: grid !important; grid-template-columns: 1.16fr .84fr !important; gap: 26px !important; }
  .hero-img { aspect-ratio: 11 / 13 !important; }
  .hero-img img { scale: 1 !important; animation: none !important; }
  .lead-grid { display: grid !important; grid-template-columns: 1.15fr .85fr !important; gap: 26px !important; }
  .grid-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 26px !important; }
  .grid-3 { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 18px !important; }
  .fee-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; column-gap: 18px !important; }
  .grid-4 { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 16px !important; }
  .stats { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 18px !important; }
  .steps { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 18px !important; }
  .spec-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .stagger { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 26px !important; }
  .stagger > *:nth-child(even) { margin-top: 0 !important; }
  .bento { display: grid !important; grid-template-columns: repeat(6, minmax(0,1fr)) !important; gap: 12px !important; }
  .bento-a { grid-column: span 4 !important; }
  .bento-photo { grid-column: span 2 !important; grid-row: span 2 !important; min-height: 0 !important; }
  .bento-b, .bento-c { grid-column: span 2 !important; }
  .bento-d { grid-column: span 6 !important; flex-direction: row !important; }
  .form-row { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; column-gap: 20px !important; }
  .foot-grid { display: grid !important; grid-template-columns: 1.4fr 1fr 1fr 1.2fr !important; gap: 24px !important; }
  .contact-grid { display: grid !important; grid-template-columns: 1.35fr .65fr !important; gap: 28px !important; }

  .section { padding-block: 26px !important; }
  .section-tight { padding-block: 20px !important; }
  .display { font-size: 30pt !important; }
  .h2 { font-size: 19pt !important; }
  .statement { font-size: 19pt !important; }
  .stat-num { font-size: 22pt !important; }
  .photo-band { height: 190px !important; }

  a { text-decoration: none; }
  /* Keep individual cards whole, but let long sections flow across sheets:
     avoid-page on whole sections leaves half-empty pages everywhere. */
  .tile, .p-card, .person, .spec, .quote, .step, details,
  .info-item, .field, .hero-img, .lead-img, .photo-band { break-inside: avoid; }
  .section-head, .display, .h2 { break-after: avoid; }
  .page-break { break-before: page; }
}