/* =====================================================================
   CLOUD DESIGN BUILD — "Sky & Structure"
   Framer-grade immersive design system
   Twilight coastal luxury · clouds + architecture
   Animation policy: transform + opacity only. GPU-friendly. 60fps.
   ===================================================================== */

/* ------------------------------ Fonts ------------------------------- */
/* Self-hosted variable fonts (Google's own latin woff2 files) - saves two
   third-party origins (DNS + TLS + RTT) on every first visit.            */
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/lora-normal-var.woff2) format('woff2');
}
@font-face {
  font-family: 'Lora'; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url(../fonts/lora-italic-var.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/inter-normal-var.woff2) format('woff2');
}

/* ------------------------------ Tokens ------------------------------ */
:root {
  /* palette */
  --ink:        #14110C;
  --ink-2:      #1C1811;
  --ink-3:      #272013;
  --gold:       #C79A3A;
  --gold-btn:   #BF971B;
  --gold-soft:  #E4C57E;
  --gold-deep:  #A87E28;
  --sand:       #F3EDE1;
  --sand-2:     #E9E0CE;
  --paper:      #FBF8F2;
  --dusk:       #33415C;
  --cloud:      #EDE7DD;

  --t-dark:    #EFE9DE;
  --t-dark-2:  #A99E8B;
  --t-light:   #1F2A37;
  --t-light-2: #5B6875;

  --line-d: rgba(228,197,126,.22);
  --line-l: rgba(31,42,55,.14);

  /* type */
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* layout */
  --wrap:  1200px;
  --wide:  1440px;
  --gut:   clamp(20px, 4.5vw, 72px);
  --r:     16px;
  --r-lg:  26px;

  --shadow-md: 0 18px 50px rgba(10,7,3,.22);
  --shadow-lg: 0 42px 110px rgba(10,7,3,.4);

  /* motion */
  --ease:      cubic-bezier(.19,1,.22,1);      /* expo out  */
  --ease-soft: cubic-bezier(.25,.46,.45,.94);
  --dur:       .9s;

  --nav-h: 78px;
}

/* ------------------------------ Reset ------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, 1.05vw, 17px);
  color: var(--t-light);
  background: var(--ink);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* height:auto keeps the width/height attributes as pure aspect-ratio hints —
   without it an attribute height overrides CSS aspect-ratio crops */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5 { font-family: var(--serif); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: -.012em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
em { font-style: italic; }
::selection { background: var(--gold); color: var(--ink); }

/* ------------------------- Typography scale ------------------------- */
.display-1 { font-size: clamp(2.7rem, 7.4vw, 5.9rem);  line-height: 1.02; }
.display-2 { font-size: clamp(2.05rem, 4.6vw, 3.8rem); line-height: 1.06; }
.display-3 { font-size: clamp(1.55rem, 2.6vw, 2.2rem); }
.lead      { font-size: clamp(1.02rem, 1.35vw, 1.22rem); line-height: 1.6; max-width: 58ch; }
.lead b    { font-weight: 600; }
h1 em, h2 em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--gold-soft); }
.on-light h2 em, .s-sand h2 em, .s-paper h2 em { color: var(--gold-deep); }

.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 1.3rem;
}
.eyebrow::before { content: ""; width: 42px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); flex: none; }
.eyebrow.center { justify-content: center; }
.eyebrow.center::after { content: ""; width: 42px; height: 1px; background: linear-gradient(-90deg, var(--gold), transparent); flex: none; }

/* --------------------------- Split-text ----------------------------- */
/* JS wraps each word in .stl > .stw ; words rise out of their masks     */
.split .stl { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block: .09em; margin-block: -.09em; }
.split .stw {
  display: inline-block; transform: translateY(118%) rotate(2deg);
  transition: transform 1.15s var(--ease);
}
.split.in .stw { transform: translateY(0) rotate(0); }

/* ----------------------------- Reveals ------------------------------ */
/* hidden-until-reveal states only apply when JS is running (html.js is set
   by an inline script in <head>) — with JS off/failed the content just shows */
.js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity var(--dur) var(--ease-soft), transform 1.1s var(--ease); }
.js [data-reveal="left"]  { transform: translateX(-44px); }
.js [data-reveal="right"] { transform: translateX(44px); }
.js [data-reveal="scale"] { transform: scale(.94); }
[data-reveal].in { opacity: 1; transform: none; }
[data-d="1"] { transition-delay: .08s; }
[data-d="2"] { transition-delay: .17s; }
[data-d="3"] { transition-delay: .26s; }
[data-d="4"] { transition-delay: .35s; }
[data-d="5"] { transition-delay: .44s; }

/* --------------------------- Wrap / section ------------------------- */
.wrap  { max-width: var(--wrap);  margin-inline: auto; padding-inline: var(--gut); }
.wide  { max-width: var(--wide); }
.section { position: relative; padding-block: clamp(84px, 10vw, 160px); }
.section.tight { padding-block: clamp(44px, 5vw, 72px); }
.compact-dual-section { padding-block: clamp(56px, 8vw, 100px); }
.compact-dual-section .section-head { margin-bottom: clamp(28px, 4vw, 48px); }
.compact-dual-section .display-2 { font-size: clamp(1.8rem, 4vw, 3.2rem); }
.compact-dual-section .grid-2 { gap: clamp(16px, 2vw, 28px); }

.compact-builder-section { padding-block: clamp(56px, 8vw, 100px); }
.compact-builder-section .feature { gap: clamp(24px, 4vw, 64px); }
.compact-builder-section .feat-portrait { max-width: 480px; }
.compact-builder-section .fp-circle { max-width: 92%; margin-inline: auto; }
.compact-builder-section .display-2 { font-size: clamp(1.8rem, 4vw, 3.2rem); }
.compact-builder-section .lead { font-size: clamp(0.95rem, 1.2vw, 1.15rem); }
.compact-builder-section .check-list { margin-top: 1.2rem; gap: 0.9rem; }
.compact-builder-section .check-list li { font-size: clamp(0.9rem, 1.05vw, 1rem); }
.compact-builder-section .stats { margin-top: clamp(40px, 6vw, 80px); }
.compact-builder-section .stat .num { font-size: clamp(2rem, 3.8vw, 3.4rem); }

.s-ink   { background: var(--ink);   color: var(--t-dark); }
.s-ink-2 { background: var(--ink-2); color: var(--t-dark); }
.s-sand  { background: var(--sand);  color: var(--t-light); }
.s-paper { background: var(--paper); color: var(--t-light); }
.s-ink p, .s-ink-2 p { color: var(--t-dark-2); }
.s-ink .lead, .s-ink-2 .lead { color: rgba(239,233,222,.82); }
.s-sand p, .s-paper p { color: var(--t-light-2); }
.s-sand .lead, .s-paper .lead { color: #33404e; }

.section-head { max-width: 780px; margin-bottom: clamp(44px, 5vw, 72px); }
.section-head.center { margin-inline: auto; text-align: center; }

/* ------------------------- Horizon divider -------------------------- */
.horizon { position: relative; height: 1px; overflow: visible; }
.horizon::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--line-d) 18%, var(--gold) 50%, var(--line-d) 82%, transparent);
  transform: scaleX(0); transition: transform 1.6s var(--ease);
}
.horizon.in::before { transform: scaleX(1); }

/* ------------------------------ Clouds ------------------------------ */
/* decorative drifting cloud layers — pure transform animation          */
.clouds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.cl {
  position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(237,231,221,.10), transparent 72%);
  animation: drift var(--cd, 90s) linear infinite;
}
.cl.b { background: radial-gradient(closest-side, rgba(51,65,92,.28), transparent 72%); }
.on-light .cl { background: radial-gradient(closest-side, rgba(255,255,255,.85), transparent 72%); }
@keyframes drift {
  from { transform: translate3d(-16vw, 0, 0); }
  50%  { transform: translate3d(12vw, -2.5vh, 0); }
  to   { transform: translate3d(-16vw, 0, 0); }
}

/* ------------------------------ Header ------------------------------ */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 96;
  transform: translateY(0);
  transition: transform .55s var(--ease), background .4s;
}
/* soft scrim keeps the nav readable over bright heroes before any scroll */
.site-header::before {
  content: ""; position: absolute; inset: 0 0 -160%; z-index: -1;
  pointer-events: none;
  /* eased stops - a plain two-stop fade reads as a hard band edge on flat skies */
  background: linear-gradient(to bottom,
    rgba(20,17,12,.78) 0%,
    rgba(20,17,12,.64) 18%,
    rgba(20,17,12,.47) 34%,
    rgba(20,17,12,.31) 50%,
    rgba(20,17,12,.18) 65%,
    rgba(20,17,12,.09) 78%,
    rgba(20,17,12,.035) 89%,
    rgba(20,17,12,0) 100%);
  transition: opacity .4s;
}
.site-header.scrolled::before { opacity: 0; }
.site-header.scrolled {
  background: rgba(20,17,12,.72);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.site-header.hide { transform: translateY(-100%); }
.nav {
  max-width: var(--wide); margin-inline: auto;
  height: var(--nav-h); padding-inline: var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; z-index: 96; position: relative; }
.brand img { height: 44px; width: auto; filter: drop-shadow(0 3px 16px rgba(20,17,12,.7)); }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }
@media (min-width: 901px) {
  .nav { display: grid; grid-template-columns: 1fr auto 1fr; }
  /* logo hugs the left edge (~50px past the gutter, clamped so it never clips) */
  .brand { justify-self: start; margin-left: max(-50px, calc(16px - var(--gut))); }
  .nav-links { justify-self: center; }
  .nav > .nav-cta { justify-self: end; }
}
.navlink {
  position: relative; font-size: .82rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--t-dark); opacity: .78; transition: opacity .3s; padding-block: 6px;
  filter: drop-shadow(0 2px 7px rgba(20,17,12,.78));
}
/* once the header has its own dark blurred background, the shadow is unnecessary */
.site-header.scrolled .navlink { filter: none; }
.navlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.navlink:hover, .navlink.active { opacity: 1; }
.navlink:hover::after, .navlink.active::after { transform: scaleX(1); transform-origin: left; }

/* ------------------------------ Buttons ----------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 999px; overflow: hidden;
  font-size: .84rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: var(--gold-btn);
  transition: color .4s var(--ease-soft);
  isolation: isolate;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--cloud); border-radius: inherit;
  transform: translateY(102%); transition: transform .5s var(--ease);
}
.btn:hover::before { transform: translateY(0); }
.btn .arw { display: inline-block; transition: transform .4s var(--ease); }
.btn:hover .arw { transform: translateX(5px); }
.btn-outline {
  background: transparent; color: var(--t-dark);
  box-shadow: inset 0 0 0 1px rgba(228,197,126,.4);
}
.btn-outline::before { background: var(--gold-btn); }
.btn-outline:hover { color: var(--ink); }
.on-light .btn-outline, .s-sand .btn-outline, .s-paper .btn-outline { color: var(--t-light); box-shadow: inset 0 0 0 1px rgba(31,42,55,.3); }
.on-light .btn-outline:hover, .s-sand .btn-outline:hover, .s-paper .btn-outline:hover { color: var(--ink); }
.nav-cta { padding: 11px 22px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .84rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold);
}
.link-arrow .arw { transition: transform .4s var(--ease); }
.link-arrow:hover .arw { transform: translateX(6px); }

/* ------------------------ Verified-builder strip --------------------- */
.verified-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid var(--line-l);
}
.s-ink .verified-strip, .s-ink-2 .verified-strip { border-top-color: var(--line-d); }
.vs-label { font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--t-light-2); }
.s-ink .vs-label, .s-ink-2 .vs-label { color: var(--t-dark-2); }
.vs-logo {
  --vs-brand: currentColor;
  /* no flex gap - the trailing <sup> is its own flex item and a gap would
     detach it from the wordmark; the arrow carries its own margin instead */
  display: inline-flex; align-items: center;
  font-family: var(--sans); font-weight: 700; font-size: 1rem; letter-spacing: -.015em; line-height: 1;
  color: var(--vs-brand);
  padding: 11px 17px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--vs-brand) 38%, transparent);
  background: color-mix(in srgb, var(--vs-brand) 7%, transparent);
  transition: background .35s var(--ease), border-color .35s var(--ease),
              color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.vs-logo::after {
  content: "↗"; margin-left: 9px; font-size: .82em; font-weight: 600; line-height: 1;
  opacity: .75; transition: transform .35s var(--ease);
}
a.vs-logo:hover {
  color: #fff; background: var(--vs-brand); border-color: var(--vs-brand);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--vs-brand) 32%, transparent);
}
a.vs-logo:hover::after { transform: translate(2px, -2px); }
a.vs-logo:focus-visible { outline: 2px solid var(--vs-brand); outline-offset: 3px; }
.vs-logo sup { font-size: .5em; font-weight: 600; align-self: flex-start; margin-top: .15em; }
.vs-zillow { --vs-brand: #006AFF; }
.vs-realtor { --vs-brand: #D92228; }
.s-ink .vs-logo, .s-ink-2 .vs-logo { background: color-mix(in srgb, var(--vs-brand) 16%, transparent); }
/* pills read as separate buttons already - divider no longer needed */
.vs-sep { display: none; }

/* --------------------------- Mobile menu ---------------------------- */
.nav-toggle { display: none; z-index: 96; position: relative; width: 44px; height: 44px; }
.nav-toggle span {
  position: absolute; left: 10px; right: 10px; height: 2px; background: var(--t-dark);
  transition: transform .45s var(--ease), opacity .3s; border-radius: 2px;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 94; background: var(--ink);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: calc(var(--nav-h) + 20px) var(--gut) 48px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease);
  visibility: hidden;
}
body.menu-open .mobile-menu { clip-path: inset(0 0 0% 0); visibility: visible; }
.mobile-menu a {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--serif); font-size: clamp(2.1rem, 9vw, 3.4rem);
  color: var(--t-dark); padding: .35rem 0; border-bottom: 1px solid rgba(228,197,126,.14);
  opacity: 0; transform: translateY(26px);
  transition: opacity .5s var(--ease-soft), transform .7s var(--ease);
}
body.menu-open .mobile-menu a { opacity: 1; transform: none; }
body.menu-open .mobile-menu a:nth-child(1) { transition-delay: .16s; }
body.menu-open .mobile-menu a:nth-child(2) { transition-delay: .24s; }
body.menu-open .mobile-menu a:nth-child(3) { transition-delay: .32s; }
body.menu-open .mobile-menu a:nth-child(4) { transition-delay: .40s; }
body.menu-open .mobile-menu a:nth-child(5) { transition-delay: .48s; }
.mobile-menu .n { font-family: var(--sans); font-size: .8rem; color: var(--gold); letter-spacing: .2em; }
.mm-contact { margin-top: auto; color: var(--t-dark-2); font-size: .88rem; opacity: 0; transition: opacity .5s .55s; }
body.menu-open .mm-contact { opacity: 1; }
body.menu-open { overflow: hidden; }

/* ------------------------------- Hero -------------------------------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 28px) 0 clamp(64px, 9vh, 120px);
  color: var(--t-dark); overflow: clip; isolation: isolate;
}
.hero.short { min-height: 76svh; }
/* shorter, and with room at the foot for the sheet that rides up over it */
.hero.hero-contact { min-height: 64svh; padding-bottom: clamp(110px, 15vh, 190px); }
/* warm base + poster background paint immediately, so the video area is never
   a black gap while the clip streams in (background-image set per-page inline) */
.hero-media { position: absolute; inset: -12% 0; z-index: -2;
  background-color: #211d16; background-position: center; background-size: cover; background-repeat: no-repeat; }
/* no-crop variant: show the full image, stretched to fill (no parallax) */
.hero-media.no-crop { inset: 0; }
.hero-media.no-crop img { object-fit: fill; transform: none; will-change: auto; }
/* art-directed heroes wrap the img in <picture> - keep the img a direct child
   for layout so its height still resolves against the hero box */
.hero-media picture { display: contents; }
/* fit variant: the whole photo stays visible - the box takes the image's own
   ratio (capped to the viewport) and the 12% zoom and parallax overscan that
   crop the other heroes are both dropped */
.hero.hero-fit { min-height: fit-content; aspect-ratio: 2 / 1; max-height: 100svh; }
.hero.hero-fit .hero-media { inset: 0; }
.hero.hero-fit .hero-media img { object-fit: contain; transform: none; will-change: auto; }
/* hero-art marks a hero that also ships a portrait crop, so phone-shaped and
   ultrawide windows can fill the screen outright - the overflow lands in the
   spare sky and grass those photos leave, never on the subject. Heroes without
   a portrait crop stay on contain at every size. */
@media (max-aspect-ratio: 3/5), (min-aspect-ratio: 2/1) {
  .hero.hero-fit.hero-art { aspect-ratio: auto; min-height: 100svh; max-height: none; }
  .hero.hero-fit.hero-art .hero-media img { object-fit: cover; }
}
.hero-media img,
.hero-media video {
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform; transform: translate3d(0,0,0) scale(1.12);
}
/* filter on stills only: WebKit reapplies CSS filters to video per frame, which drops frames in Safari */
.hero-media img { filter: brightness(1.05) saturate(1.05); }
/* seamless loop: two stacked copies crossfade across the loop seam */
.hero-media.xfade video { position: absolute; inset: 0; transition: opacity .9s linear; }
/* light directional scrim: subtle darkening on the text side + bottom,
   video already carries most of the contrast on its own */
.hero-scrim { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(20,17,12,.15) 0%, rgba(20,17,12,.09) 36%, rgba(20,17,12,.03) 66%, rgba(20,17,12,.05) 100%),
    linear-gradient(180deg, rgba(20,17,12,.07) 0%, rgba(20,17,12,.01) 42%, rgba(20,17,12,.22) 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: var(--wide); width: 100%; margin-inline: auto; padding-inline: var(--gut); }
/* drop-shadow (not text-shadow): the split-word masks clip text-shadow into
   rectangular blocks; drop-shadow follows the visible glyph shapes instead */
.hero h1 { filter: drop-shadow(0 3px 10px rgba(20,17,12,.68)) drop-shadow(0 12px 32px rgba(20,17,12,.42)); }
.hero-sub {
  max-width: 54ch; font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.65;
  color: rgba(244,239,231,.96); margin-top: 1.6rem;
  filter: drop-shadow(0 2px 8px rgba(20,17,12,.72));
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.1rem; }
.hero-cred {
  display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 2.6rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(228,197,126,.22);
  font-size: .78rem; letter-spacing: .08em; color: var(--t-dark-2);
  filter: drop-shadow(0 2px 8px rgba(20,17,12,.72));
}
.hero-cred b { color: var(--gold-soft); font-weight: 600; }

/* enter: the hero copy rises via pure CSS animation, which starts at first
   paint — no waiting on JS. (The old JS-gated fade delayed the LCP text by
   ~3s on throttled mobile.) Below-fold content still reveals via JS. */
.hero-inner > * { animation: heroRise 1.1s var(--ease) both; animation-delay: .05s; }
.hero-inner > *:nth-child(2) { animation-delay: .22s; }
.hero-inner > *:nth-child(3) { animation-delay: .38s; }
.hero-inner > *:nth-child(4) { animation-delay: .52s; }
.hero-inner > *:nth-child(5) { animation-delay: .64s; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------ Marquee ------------------------------ */
.marquee { overflow: hidden; border-block: 1px solid var(--line-d); padding-block: 18px; position: relative; }
.marquee-track { display: flex; gap: 3.2rem; width: max-content; animation: mq 34s linear infinite; }
.marquee-track > span {
  display: flex; align-items: center; gap: 3.2rem; white-space: nowrap;
  font-family: var(--serif); font-size: clamp(1rem, 1.6vw, 1.35rem); color: var(--t-dark-2); font-style: italic;
}
.marquee-track .dot-g { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; display: inline-block; }
@keyframes mq { to { transform: translate3d(-50%, 0, 0); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ------------------------------ Grids -------------------------------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); }

.feature {
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center;
  gap: clamp(32px, 5vw, 84px);
}
.feature.rev { grid-template-columns: .95fr 1.05fr; }

/* --------------------- Featured book showcase ------------------------ */
/* the cover is a transparent PNG spotlit on the dark section: gold glow
   behind, a soft plinth shadow below, and a slow idle float             */
.book-stage {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 3.5vw, 46px) 0;
}
.book-stage::before {
  content: ""; position: absolute; z-index: -1;
  width: 76%; aspect-ratio: 1; left: 50%; top: 45%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(199,154,58,.30), transparent 72%);
}
.book-stage::after {
  content: ""; position: absolute; z-index: -1;
  left: 50%; bottom: 4%; transform: translateX(-50%);
  width: 60%; height: 30px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent 74%);
  filter: blur(3px);
}
.book-stage img {
  width: min(100%, 700px); height: auto;
  filter: drop-shadow(0 28px 44px rgba(0,0,0,.5));
  animation: bookfloat 6s ease-in-out infinite;
}
@keyframes bookfloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-22px) rotate(1.5deg); }
}
.book-sub {
  font-family: var(--serif); font-style: italic; color: var(--gold-soft);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem); margin-top: .85rem;
}
.on-light .book-sub,
.s-sand .book-sub,
.s-paper .book-sub {
  color: var(--gold-deep);
}
@media (prefers-reduced-motion: reduce) { .book-stage img { animation: none; } }
.feat-media {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4/3; box-shadow: var(--shadow-lg);
}
.feat-media.tall { aspect-ratio: 3.4/4; }
/* narrowed card - hugs the right of its column, then centres once stacked */
.feat-media.inset { width: 90%; margin-left: auto; }
@media (max-width: 900px) { .feat-media.inset { margin-inline: auto; } }
.feat-media img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.feat-media:not([data-parallax]) img { height: 100%; will-change: auto; }
.feat-badge {
  position: absolute; left: 18px; bottom: 18px; z-index: 2;
  background: rgba(20,17,12,.66); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(228,197,126,.25); color: var(--t-dark);
  border-radius: 12px; padding: 12px 18px; font-size: .8rem; line-height: 1.45;
}
.feat-badge b { display: block; color: var(--gold-soft); font-weight: 600; }
/* Caption set under a feature photo rather than over it, so the house is
   never written on. The gold rule down its left is the same accent the
   section eyebrows and card links carry, which is what marks the block as
   a caption belonging to the photo instead of a stray paragraph.         */
.feat-figure { margin: 0; }
.feat-cap {
  position: relative; padding-left: 16px;
  margin-top: clamp(14px, 1.7vw, 22px);
  font-size: .84rem; line-height: 1.5; color: var(--t-light-2);
}
.feat-cap::before {
  content: ""; position: absolute; left: 0; top: .15em; bottom: .15em;
  width: 2px; border-radius: 1px;
  background: linear-gradient(180deg, var(--gold), rgba(199,154,58,.2));
}
.feat-cap b {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: 1rem; color: var(--gold-deep); margin-bottom: .15rem;
}
.s-ink .feat-cap, .s-ink-2 .feat-cap { color: var(--t-dark-2); }
.s-ink .feat-cap b, .s-ink-2 .feat-cap b { color: var(--gold-soft); }
/* collection placard set above a feat-media image — centered, with a
   gold hairline flanking the label so the home reads as identified      */
.feat-plate {
  margin-bottom: 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.feat-plate .fp-ey {
  display: flex; align-items: center; gap: 14px;
  font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-deep); opacity: .9;
}
.feat-plate .fp-ey::before,
.feat-plate .fp-ey::after {
  content: ""; width: 36px; height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.feat-plate .fp-ey::after { background: linear-gradient(-90deg, transparent, var(--gold)); }
.feat-plate .fp-name {
  font-family: var(--serif); font-size: clamp(1.5rem, 2.1vw, 2rem);
  line-height: 1.05; color: var(--t-light);
}
.feat-plate .fp-meta {
  display: flex; align-items: center; gap: 10px; margin-top: 2px;
  font-size: .84rem; letter-spacing: .04em; color: var(--t-light-2);
}
.feat-plate .dot-g {
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  flex: none; display: inline-block;
}
.s-ink .feat-plate .fp-name, .s-ink-2 .feat-plate .fp-name { color: var(--t-dark); }
.s-ink .feat-plate .fp-meta, .s-ink-2 .feat-plate .fp-meta { color: var(--t-dark-2); }
.s-ink .feat-plate .fp-ey, .s-ink-2 .feat-plate .fp-ey { color: var(--gold-soft); }
/* circular medallion portrait — cut-out on a warm studio panel */
.feat-portrait {
  position: relative; isolation: isolate;
  max-width: 600px; margin-inline: auto; width: 100%;
}
.fp-circle {
  position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 8%, rgba(228,197,126,.30), transparent 62%),
    linear-gradient(180deg, #F3EAD8 0%, #EBE0CB 55%, #E4D7BE 100%);
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
}
.fp-circle img {
  position: relative; z-index: 1;
  width: 90%; height: auto; object-fit: contain; object-position: bottom center;
  transform: translate(-11%, 8%);
}
/* vignette dissolves the shoulders into the panel before the rim */
.fp-circle::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(72% 72% at 50% 45%, transparent 58%, rgba(231,219,194,.85) 82%, #E7DBC2 100%);
}
/* gold gradient ring at the rim */
.fp-circle::after {
  content: ""; position: absolute; z-index: 3; inset: 2.5%; border-radius: 50%;
  padding: 7px; pointer-events: none;
  background: linear-gradient(145deg, #F3DE9E 0%, #C79A3A 30%, #FBEBBE 52%, #B8892E 74%, #A87E28 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.feat-portrait .feat-badge {
  z-index: 4; left: 50%; bottom: -2px; transform: translateX(-50%);
  text-align: center;
  background: rgba(251,248,242,.95);
  border: 1px solid rgba(199,154,58,.55);
  color: var(--gold-deep);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.feat-portrait .feat-badge b { color: var(--gold-deep); font-family: var(--serif); }

/* ------------------------------ Cards -------------------------------- */
.pcard {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink-3); border: 1px solid rgba(228,197,126,.14);
  transition: transform .6s var(--ease), border-color .4s;
  display: flex; flex-direction: column;
}
.pcard:hover { transform: translateY(-8px); border-color: rgba(228,197,126,.4); }
.on-light .pcard, .s-sand .pcard, .s-paper .pcard { background: #fff; border-color: var(--line-l); box-shadow: var(--shadow-md); }
.pcard .media { position: relative; aspect-ratio: 16/10.5; overflow: hidden; }
.pcard .media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform 1.1s var(--ease); }
.pcard:hover .media img { transform: scale(1.07); }
/* Nudge a cover photo's crop when the subject sits off-centre in the frame.
   Only works where the source is taller than the frame, leaving spare image
   to slide - see .crop-down-40-fill below for when there is none. */
/* Zoom a cover photo inside its frame. Uses the standalone scale property, not
   transform, so the parallax handler's inline transform cannot clobber it. */
img.zoom-21 { scale: 1.21; }
img.shift-right-30 { object-position: calc(50% + 30px) 50%; }
img.crop-up-75 { object-position: 50% calc(50% - 75px); }
img.crop-down-20 { object-position: 50% calc(50% + 20px); }
/* Percentage, not pixels, so every screen shows the same part of the photo -
   a fixed px shift is a different fraction of the crop at each card width,
   and on a short frame it runs out of image entirely. */
img.crop-y-19 { object-position: 50% 19%; }
/* Deep Creek is near the frame's own aspect, so there is no spare image to
   slide - a fixed 100px overhang, centred then nudged down 40px, gives the
   shift somewhere to go and still covers the frame at any card width. */
.pcard .media img.crop-down-40-fill { height: calc(100% + 100px); transform: translateY(-10px) scale(1.01); }
.pcard:hover .media img.crop-down-40-fill { transform: translateY(-10px) scale(1.07); }
.pc-in { padding: clamp(20px, 2.2vw, 30px); display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.pc-tag { font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.pcard h3 { font-size: clamp(1.35rem, 1.9vw, 1.75rem); }
.pcard p { font-size: .95rem; }
.pc-foot { margin-top: auto; padding-top: .8rem; }
.badge {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  background: rgba(20,17,12,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--cloud); border: 1px solid rgba(228,197,126,.3);
  padding: 7px 13px; border-radius: 999px;
}
/* "For sale" is the one badge that sells something, so it takes the gold
   fill off the Contact button. Opaque, so the blur goes and a shadow holds
   it off a bright sky; the border stays as transparent rather than 0 to
   keep the pill exactly the size of the dark ones beside it.              */
.badge.sale {
  background: var(--gold-btn); color: var(--ink); border-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 6px 16px rgba(10,7,3,.28);
}
.specs { display: flex; gap: 1.4rem; padding-block: .5rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--t-light-2); }
.s-ink .specs, .s-ink-2 .specs { color: var(--t-dark-2); }
.specs b { display: block; font-family: var(--serif); font-size: 1.35rem; color: var(--gold-deep); letter-spacing: 0; }
.s-ink .specs b, .s-ink-2 .specs b { color: var(--gold-soft); }

/* Homes & collections cards - the copy block runs a little tighter and the
   footer link is centred under it, opened by the same gold rule the eyebrows
   use so the card foot echoes the section head.                             */
/* Photo runs 40px shorter than its 16/10.5 box, trimmed off the bottom.
   aspect-ratio can't subtract a fixed length, so the ratio is expressed as
   padding (10.5/16 = 65.625%) and the 40px comes out of that.               */
#collections .pcard .media { aspect-ratio: auto; height: 0; padding-bottom: calc(65.625% - 40px); }
#collections .pcard .media img { position: absolute; inset: 0; object-position: top; }

#collections .pc-in { padding: clamp(18px, 1.9vw, 26px); gap: .5rem; }
/* wider measure than the default 58ch so the section lead holds two lines */
#collections .lead { max-width: 66ch; }
#collections .pc-foot { display: flex; justify-content: center; padding-top: .7rem; }
#collections .pc-foot .link-arrow::before {
  content: ""; flex: none; width: 42px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transition: width .4s var(--ease);
}
/* the empty .link-arrow after the label carries the mirrored trailing rule */
#collections .pc-foot .link-arrow .link-arrow::before {
  background: linear-gradient(-90deg, var(--gold), transparent);
}
#collections .pc-foot .link-arrow:hover::before,
#collections .pc-foot .link-arrow:hover .link-arrow::before { width: 30px; }

/* Every description reserves two lines (Cape Horn's address only fills one),
   so the spec rows start at the same height across the three cards. The
   leftover height in a short card collects above the footer link, where the
   auto margin still keeps the three links on one line.                      */
#collections .pcard p { min-height: 3.36em; min-height: 2lh; }
#collections .specs { padding-top: 0; padding-bottom: .35rem; }

/* path cards (home dual) — the photo is matted whole inside its frame and the
   copy sits below it, so no part of the image is cropped or covered        */
.path-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column; isolation: isolate;
  background: var(--ink-3); border: 1px solid rgba(228,197,126,.16);
  transition: transform .6s var(--ease), border-color .4s;
}
.path-card:hover { transform: translateY(-8px); border-color: rgba(228,197,126,.42); }
.on-light .path-card,
.s-paper .path-card,
.s-sand .path-card {
  background: #fff; border: 1px solid rgba(31,42,55,.14);
}
.on-light .path-card:hover,
.s-paper .path-card:hover,
.s-sand .path-card:hover {
  border-color: rgba(199,154,58,.42);
}
.on-light .path-card .pc-body,
.s-paper .path-card .pc-body,
.s-sand .path-card .pc-body {
  color: var(--t-light);
}
.on-light .path-card .pc-body p,
.s-paper .path-card .pc-body p,
.s-sand .path-card .pc-body p {
  color: var(--t-light-2);
}
.on-light .path-card .pc-media,
.s-paper .path-card .pc-media,
.s-sand .path-card .pc-media {
  border-bottom-color: rgba(31,42,55,.14);
  background: #111;
}
/* one frame ratio across both cards so the images line up; the photo fills
   it edge to edge with no matting. A taller photo is trimmed off the top
   (--pos: bottom) rather than through its subject                         */
.pc-media {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: var(--ink); border-bottom: 1px solid rgba(228,197,126,.14);
}
.pc-media img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: var(--pos, 50% 50%);
}
.pc-body {
  padding: clamp(16px, 2vw, 28px); color: var(--t-dark); width: 100%;
  flex: 1; display: flex; flex-direction: column;
}
.pc-body h3 { font-size: clamp(1.5rem, 2.8vw, 2.4rem); margin-block: .4rem .5rem; }
.pc-body p { color: rgba(239,233,222,.82); max-width: 42ch; font-size: clamp(0.9rem, 1.1vw, 1rem); }
.path-card .link-arrow { margin-top: auto; padding-top: 0.8rem; }

/* region tiles */
.regions { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.region {
  position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4/5.1;
  grid-column: span 2; isolation: isolate; display: flex; align-items: flex-end;
}
.region img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.02); transition: transform 1.2s var(--ease); }
.region::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 42%, rgba(20,17,12,.9)); }
.region:hover img { transform: scale(1.09); }
.r-in { padding: 18px; color: var(--t-dark); }
.r-in h4 { font-size: 1.2rem; }
.r-in span { font-size: .78rem; color: var(--t-dark-2); }

/* --------------------------- 3D carousel ----------------------------- */
/* draggable coverflow ring: JS drives every card's transform per frame */
/* from a continuous position, so cards follow the pointer in 3D.       */
.carousel3d {
  /* +21% over the original 250/32vw/470: the deck runs three cards now */
  --cw: clamp(303px, 38.5vw, 569px);
  position: relative;
  /* card height (cw / 1.5) plus a tenth for the tilt and scale headroom */
  height: calc(var(--cw) * .74);
  perspective: 1500px;
  perspective-origin: 50% 42%;
  cursor: grab;
  touch-action: pan-y;          /* horizontal drag is ours, vertical scroll stays native */
  user-select: none;
  -webkit-user-select: none;
}
.carousel3d.dragging { cursor: grabbing; }
.carousel3d .region {
  position: absolute; left: 50%; top: 50%;
  /* 3:2 matches the source photos, so cover crops nothing off the houses */
  width: var(--cw); aspect-ratio: 3/2;
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-lg);
  will-change: transform, filter;
  -webkit-user-drag: none;
  transition: transform .85s var(--ease), filter .7s var(--ease-soft);
}
/* while dragging, cards track the pointer with no easing lag */
.carousel3d.dragging .region { transition: none; }
.carousel3d .region .r-in { padding: clamp(18px, 1.8vw, 28px); }
.carousel3d .region img { pointer-events: none; }

/* Vertical variant: the stack sits on the left, and the section head plus
   the front card's details sit beside it on the right. Cards keep their 3:2
   crop and overlap heavily, so the run reads as a deck being dealt downward
   rather than a row of slides.                                              */
.region-showcase {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 76px); align-items: center;
}
/* the left padding is the gutter the dots live in. The deck is centred in
   its column and the copy is left-aligned in the next one, which bunches
   both toward the middle of the page - the translate spends some of the
   unused outer gutter to open that up. Dots ride along, since they are
   positioned against this box.                                          */
.rs-stack { position: relative; padding-left: 44px; transform: translateX(max(-40px, -2.2vw)); }
/* dots run down the left of the deck instead of sitting under it */
.c3-vert + .c3-dots {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  flex-direction: column; gap: 12px; margin-top: 0;
}
/* the head is a column-mate now, so it drops its full-width bottom margin */
.rs-copy-col .section-head { max-width: none; margin-bottom: clamp(20px, 2.6vw, 36px); }
.rs-copy-col .rs-detail {
  border-top: 1px solid var(--line-l); padding-top: clamp(18px, 2vw, 26px);
}
.s-ink .rs-copy-col .rs-detail, .s-ink-2 .rs-copy-col .rs-detail { border-top-color: var(--line-d); }
/* set well clear of the CTA so it reads as its own note, not a third line
   of the region detail                                                     */
.rs-communities { margin-top: clamp(30px, 3.4vw, 48px); font-size: .88rem; }
/* height covers the deck's full spread: 2 card heights (cw / 1.5 each) plus
   headroom for the tilt on the outermost cards                              */
.c3-vert { --cw: clamp(315px, 41.4vw, 630px); height: calc(var(--cw) * 1.35); }
/* the card captions live in the side panel now, not on the photos */
.c3-vert .region .r-in { display: none; }
.c3-vert .region::after { background: linear-gradient(180deg, transparent 55%, rgba(20,17,12,.55)); }

.rs-detail { max-width: 34ch; }
.rs-count { font-size: .74rem; letter-spacing: .2em; color: var(--t-light-2); margin-bottom: .9rem; }
.s-ink .rs-count, .s-ink-2 .rs-count { color: var(--t-dark-2); }
.rs-count b { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--gold-deep); letter-spacing: 0; }
.s-ink .rs-count b, .s-ink-2 .rs-count b { color: var(--gold-soft); }
.rs-title { font-size: clamp(1.8rem, 3vw, 2.7rem); margin-bottom: .7rem; }
.rs-copy { margin-bottom: 1.5rem; }
.rs-swap .rs-title, .rs-swap .rs-copy, .rs-swap .rs-count { animation: rs-in .55s var(--ease) both; }
.rs-swap .rs-copy { animation-delay: .06s; }
@keyframes rs-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* One column below 900. `display: contents` dissolves the copy column so its
   three blocks become grid items in their own right - that is what lets the
   deck sit between the heading and the region detail, which has to follow
   the photos to make sense of them. Order: heading, deck, detail, note.     */
@media (max-width: 900px) {
  .region-showcase { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 34px); }
  .rs-copy-col { display: contents; }
  .rs-copy-col .section-head { order: -2; margin-bottom: 0; }
  /* single column now, so the deck is centred - no gutter to lean into */
  .rs-stack { order: -1; transform: none; }
  .rs-detail { order: 0; max-width: none; }
  .rs-communities { order: 1; margin-top: 0; }
  .c3-vert { --cw: min(70vw, 440px); }
}

.c3-dots { display: flex; justify-content: center; gap: 10px; margin-top: clamp(22px, 2.6vw, 34px); }
.c3-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(31,42,55,.22); transition: transform .4s var(--ease), background .3s;
}
.s-ink .c3-dots button, .s-ink-2 .c3-dots button { background: rgba(228,197,126,.28); }
.c3-dots button.on { background: var(--gold); transform: scale(1.45); }

@media (max-width: 560px) {
  /* phones: no side gutter, so the deck gets the full width and the dots go
     back under it where a thumb can reach them                              */
  .carousel3d { --cw: min(76vw, 411px); perspective: 1000px; }
  .rs-stack { padding-left: 0; }
  /* -22px rather than 18px: the deck's box reserves room for the spread, so
     the last visible card sits well above its bottom edge. Pulling the dots
     up 40px closes that gap - and since they are in flow, the detail and the
     note below come up with them.                                           */
  .c3-vert + .c3-dots {
    position: static; transform: none; flex-direction: row;
    gap: 10px; margin-top: -22px;
  }
}

/* --------------------------- Practice panels ------------------------- */
.practice {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink-3); border: 1px solid rgba(228,197,126,.16);
  display: flex; flex-direction: column;
  transition: transform .6s var(--ease), border-color .4s;
}
.practice:hover { transform: translateY(-8px); border-color: rgba(228,197,126,.42); }
.practice > img { aspect-ratio: 16/7; object-fit: cover; width: 100%; }
.p-in { padding: clamp(18px, 2vw, 30px); display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.p-tag { font-size: .68rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: .35rem; }
.practice h3 { font-size: clamp(1.28rem, 1.9vw, 1.7rem); margin-bottom: .45rem; }
.practice p { color: rgba(239,233,222,.82); font-size: clamp(.9rem, 1.05vw, .98rem); }
.practice ul { display: grid; gap: .38rem; margin-block: .3rem 1rem; }
.practice ul li {
  display: flex; align-items: center; gap: 11px;
  font-size: .9rem; color: var(--t-dark-2);
}
.practice ul li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.practice .link-arrow { margin-top: auto; }
/* light-section variant: white card + dark text, matching the home dual-path cards */
.on-light .practice, .s-paper .practice, .s-sand .practice {
  background: #fff; border-color: rgba(31,42,55,.12); box-shadow: var(--shadow-md);
}
.on-light .practice:hover, .s-paper .practice:hover, .s-sand .practice:hover { border-color: rgba(199,154,58,.42); }
.on-light .practice p, .s-paper .practice p, .s-sand .practice p { color: var(--t-light-2); }
.on-light .practice ul li, .s-paper .practice ul li, .s-sand .practice ul li { color: #33404e; }

/* Choose a service: compress the compressible parts so the section fits one viewport */
@media (min-width: 901px) {
  #practices { padding-block: clamp(38px, 4.7vh, 120px); }
  #practices .section-head { max-width: 900px; margin-bottom: clamp(20px, 2.6vh, 52px); }
  #practices .section-head .eyebrow { margin-bottom: .75rem; }
  #practices .section-head .display-2 { font-size: clamp(2rem, 3.3vw, 2.9rem); }
  #practices .section-head .lead { margin-top: .9rem; font-size: clamp(1rem, 1.2vw, 1.12rem); }
  #practices .practice > img { aspect-ratio: 50/27; max-height: 33vh; }
  #practices .p-in { padding: clamp(16px, 1.5vw, 24px); }
  #practices .practice p { margin-bottom: .55rem; }
  #practices .practice ul { margin-block: .2rem .65rem; gap: .3rem; }
}

/* --------------------------- Sticky stack ---------------------------- */
.stack { display: grid; gap: clamp(18px, 3vh, 30px); }
.stack-card {
  position: sticky; top: calc(var(--nav-h) + 22px);
  display: grid; grid-template-columns: 1fr 1.1fr; overflow: hidden;
  border-radius: var(--r-lg); background: var(--ink-3);
  border: 1px solid rgba(228,197,126,.16); box-shadow: var(--shadow-lg);
  min-height: min(430px, 62svh);
}
.stack-card:nth-child(2) { top: calc(var(--nav-h) + 44px); }
.stack-card:nth-child(3) { top: calc(var(--nav-h) + 66px); }
.stack-card .sc-body { padding: clamp(26px, 3.4vw, 54px); display: flex; flex-direction: column; justify-content: center; }
.stack-card .sc-num { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--gold); margin-bottom: 1rem; }
.stack-card h3 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); margin-bottom: .9rem; }
.stack-card p { color: var(--t-dark-2); max-width: 46ch; }
.on-light .stack-card { background: #fff; border-color: var(--line-l); }
.on-light .stack-card p { color: var(--t-light-2); }
.stack-card .sc-media { position: relative; overflow: hidden; min-height: 240px; }
.stack-card .sc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------ Stats -------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.stat { border-top: 1px solid var(--line-d); padding-top: 1.3rem; }
.stat .num { font-family: var(--serif); font-size: clamp(2.6rem, 4.6vw, 4.2rem); line-height: 1; color: var(--gold-soft); }
.stat .num sup { font-size: .45em; color: var(--gold); }
.stat .lab { font-size: .8rem; letter-spacing: .04em; color: var(--t-dark-2); margin-top: .5rem; }
.on-light .stat, .s-sand .stat, .s-paper .stat { border-top-color: var(--line-l); }
.on-light .stat .num, .s-sand .stat .num, .s-paper .stat .num { color: var(--gold-deep); }
.on-light .stat .lab, .s-sand .stat .lab, .s-paper .stat .lab { color: var(--t-light-2); }

/* ------------------------------ Steps -------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 30px); counter-reset: step; }
.step { position: relative; border-top: 1px solid var(--line-d); padding-top: 1.4rem; }
.step .sn { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--gold); margin-bottom: .7rem; }
.step h4 { font-size: 1.25rem; margin-bottom: .5rem; }
.step p { font-size: .92rem; color: var(--t-dark-2); }

/* --------------------------- Check list ------------------------------ */
.check-list { display: grid; gap: 1.05rem; margin-top: 1.6rem; }
.check-list li { display: flex; gap: 14px; align-items: flex-start; font-size: .98rem; line-height: 1.55; color: var(--t-dark-2); }
.s-sand .check-list li, .s-paper .check-list li { color: var(--t-light-2); }
.check-list b { color: var(--gold-soft); font-weight: 500; }
.s-sand .check-list b, .s-paper .check-list b { color: var(--gold-deep); }
.ck {
  flex: none; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%;
  background: rgba(199,154,58,.14); border: 1px solid rgba(199,154,58,.4);
  display: grid; place-items: center;
}
.ck svg { width: 12px; height: 12px; stroke: var(--gold); }

/* ------------------------------ Quote -------------------------------- */
.quote { text-align: center; max-width: 900px; margin-inline: auto; }
.quote blockquote {
  margin: 0; font-family: var(--serif); font-style: italic; font-weight: 420;
  font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1.25; color: var(--cloud);
}
.quote blockquote::before { content: "“"; color: var(--gold); }
.quote blockquote::after { content: "”"; color: var(--gold); }
.s-sand .quote blockquote, .s-paper .quote blockquote { color: var(--t-light); }
.quote cite { display: block; margin-top: 1.6rem; font-style: normal; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }

/* Pull quote: gold rule stretches and quote marks warm on hover */
.q-rule { max-width: 220px; margin: 0 auto clamp(28px, 3.4vw, 44px); transition: max-width .7s var(--ease); }
.q-pull:hover .q-rule { max-width: 340px; }
.q-pull blockquote::before, .q-pull blockquote::after { transition: color .5s var(--ease-soft); }
.q-pull:hover blockquote::before, .q-pull:hover blockquote::after { color: var(--gold-soft); }
.on-light .q-pull:hover blockquote::before, .on-light .q-pull:hover blockquote::after { color: var(--gold-deep); }

/* ------------------------------ Chips / pills ------------------------ */
.chips, .pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip, .pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .78rem; font-weight: 500; letter-spacing: .05em;
  border: 1px solid var(--line-d); color: var(--t-dark-2);
  padding: 9px 16px; border-radius: 999px;
  transition: border-color .3s, color .3s;
}
.chip:hover, .pill:hover { border-color: var(--gold); color: var(--t-dark); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.s-sand .chip, .s-sand .pill, .s-paper .chip, .s-paper .pill { border-color: var(--line-l); color: var(--t-light-2); }

/* ------------------------------ Timeline ----------------------------- */
/* center-spine alternating timeline: the gold line draws with scroll    */
/* (JS sets --spine scaleY), dots ignite as they cross the viewport      */
.timeline2 { position: relative; display: grid; gap: clamp(64px, 9vw, 130px); padding-block: 10px; }
.tl2-line {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  transform: translateX(-50%); background: rgba(228,197,126,.14);
}
.tl2-fill {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  transform-origin: top; transform: scaleY(0); will-change: transform;
}
.tl2-item {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 110px); align-items: center;
}
.tl2-content { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; max-width: 46ch; }
.tl2-media, .tl2-panel { grid-column: 2; grid-row: 1; justify-self: start; }
.tl2-item.rev .tl2-content { grid-column: 2; justify-self: start; text-align: left; }
.tl2-item.rev .tl2-media, .tl2-item.rev .tl2-panel { grid-column: 1; justify-self: end; }
.tl2-dot {
  position: absolute; left: 50%; top: 50%;
  width: 15px; height: 15px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--ink-2); border: 2px solid rgba(228,197,126,.45);
  transition: background .5s, border-color .5s, box-shadow .5s;
  z-index: 1;
}
.tl2-item.lit .tl2-dot {
  background: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 0 8px rgba(199,154,58,.16), 0 0 28px rgba(228,197,126,.55);
}
.tl2-content .yr {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: 1;
  color: var(--t-dark-2); margin-bottom: .7rem;
  transition: color .6s;
}
.tl2-item.lit .yr { color: var(--gold-soft); }
.tl2-content h3 { font-size: clamp(1.35rem, 2.1vw, 1.8rem); margin-bottom: .6rem; }
.tl2-content p { color: var(--t-dark-2); }
.s-sand .tl2-line, .s-paper .tl2-line { background: rgba(31,42,55,.12); }
.s-sand .tl2-dot, .s-paper .tl2-dot { background: var(--paper); border-color: rgba(31,42,55,.25); }
.s-sand .tl2-content .yr, .s-paper .tl2-content .yr { color: rgba(31,42,55,.32); }
.s-sand .tl2-item.lit .yr, .s-paper .tl2-item.lit .yr { color: var(--gold-deep); }
.s-sand .tl2-content p, .s-paper .tl2-content p { color: var(--t-light-2); }
.tl2-media {
  width: 100%; max-width: 520px; aspect-ratio: 16/10.5;
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg);
}
/* vintage scans carry a printed white border - scale up to crop it off */
.tl2-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.11); transition: transform 1.2s var(--ease); }
.tl2-media:hover img { transform: scale(1.17); }
.tl2-panel {
  width: 100%; max-width: 520px; aspect-ratio: 16/10.5;
  border-radius: var(--r-lg); display: grid; place-items: center;
  border: 1px solid rgba(228,197,126,.3);
  background: radial-gradient(closest-side, rgba(199,154,58,.12), rgba(199,154,58,.02));
}
.tl2-panel img { height: clamp(64px, 7vw, 96px); width: auto; }
/* dark variant: a matte black card (keeps the default gold logo) */
.tl2-panel.tl2-dark {
  background: #201c1c;
  border-color: rgba(228,197,126,.28);
}
/* the book is shown bare - no card border or wash, just its drop shadow */
.tl2-panel.tl2-book { aspect-ratio: 16/11.5; border: 0; background: none; }
.tl2-panel.tl2-book img {
  height: min(88%, 310px); width: auto;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.35));
}

@media (max-width: 900px) {
  .timeline2 { gap: clamp(52px, 10vw, 72px); }
  .tl2-line { left: 7px; transform: none; }
  .tl2-item, .tl2-item.rev { grid-template-columns: 1fr; gap: 1.2rem; padding-left: 38px; }
  .tl2-content, .tl2-item.rev .tl2-content { grid-column: 1; grid-row: auto; justify-self: start; text-align: left; }
  .tl2-media, .tl2-panel, .tl2-item.rev .tl2-media, .tl2-item.rev .tl2-panel { grid-column: 1; grid-row: auto; justify-self: start; }
  .tl2-dot { left: 7px; top: 18px; transform: translate(-50%, 0); }
}

/* ------------------------------ Team --------------------------------- */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.member { text-align: center; }
.m-media {
  position: relative; border-radius: 50%; overflow: hidden; aspect-ratio: 1;
  margin-bottom: 1.2rem; max-width: 300px; margin-inline: auto;
  background:
    radial-gradient(120% 100% at 50% 8%, rgba(228,197,126,.30), transparent 62%),
    linear-gradient(180deg, #F3EAD8 0%, #EBE0CB 55%, #E4D7BE 100%);
  box-shadow: var(--shadow-md);
}
.m-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1.1s var(--ease); filter: saturate(.96); }
/* gold gradient ring at the rim, matching the home-page builder portrait */
.m-media::after {
  content: ""; position: absolute; z-index: 3; inset: 0; border-radius: 50%;
  padding: 5px; pointer-events: none;
  background: linear-gradient(145deg, #F3DE9E 0%, #C79A3A 30%, #FBEBBE 52%, #B8892E 74%, #A87E28 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.member:hover .m-media img { transform: scale(1.05); }
.member h4 { font-size: 1.3rem; }
.member .role { font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); margin: .3rem 0 .6rem; }
.member p { font-size: .9rem; }
.member .m-link { font-size: .72rem; color: var(--gold-deep); }

/* ------------------------------ Gallery ------------------------------ */
/* Selected homes: a cinematic showcase. One photo holds the stage at a
   time inside a fixed 3:2 frame with object-fit: contain, so every
   roofline survives — the shadow is a drop-shadow filter, which hugs the
   painted photo rather than the frame, keeping the rare letterbox bands
   invisible against the paper. Slides swap with a plain crossfade only:
   zooming inside a clipped frame is exactly what crops houses. Autoplay
   is slow, pauses under the cursor / focus / a hidden tab, and never
   starts for reduced-motion visitors (JS also hides the progress bar).  */
.showcase { max-width: 1000px; margin-inline: auto; }
/* One-screen framing. The stage is given whatever height is left over
   after the heading, progress bar, meta row and thumbnail rail, so the
   whole showcase can be taken in without scrolling on a laptop. Height
   converts to width at 1.2857 = 1 / (2/3 + 1/9): the stage is 3:2 and
   the rail below it runs 1/9 of the same width. min() keeps the 1000px
   ceiling and hands control back to width on phones, where the screen
   is narrow rather than short; max() stops short windows from shrinking
   the stage to a postage stamp.
   The budget covers the content from eyebrow to rail, not the section's
   outer padding: reserving that padding too costs the stage a fifth of
   its width, and nobody misses padding that runs past the screen edge.
   It does reserve --nav-h, so the eyebrow still clears the fixed header
   on the way back up, when the header slides in over the content.
   All of it sits behind @supports because an unsupported dvh would make
   var(--sw-col) invalid, and an invalid var resolves to `none` rather
   than falling back to the 1000px above — the section would go
   full-width instead of degrading to the plain layout.                 */
@supports (height: 1dvh) {
  .showcase-section {
    --sw-chrome: calc(var(--nav-h) + 4dvh + 210px);  /* on screen but not the stage */
    --sw-col: min(100%, 1000px, max(420px, calc((100dvh - var(--sw-chrome)) * 1.2857)));
    /* extra top padding clears the fixed header, so the eyebrow is never
       tucked under it when this section is scrolled flush to the top; the
       +80px on top of that sets the title down off the header rather than
       hard against it, and the +40px below gives the rail room before the
       next band                                                          */
    padding-block: calc(var(--nav-h) + clamp(12px, 2vh, 28px) + 80px) calc(clamp(40px, 5vh, 72px) + 40px);
  }
  /* heading is centred over the stage and shares its column */
  .showcase-section .section-head {
    max-width: var(--sw-col); margin-inline: auto;
    margin-bottom: clamp(24px, 3.4vh, 44px);
    container-type: inline-size;
  }
  /* "A look at our work." runs 8.5em wide, so 11.4cqw keeps it on one
     line in any column. A second line would eat the height the stage is
     sized against and push the section past one screen.               */
  .showcase-section .display-2 { font-size: min(clamp(2.05rem, 4.6vw, 3.8rem), 11.4cqw); }
  .showcase { max-width: var(--sw-col); }
}
.sw-stage {
  position: relative; aspect-ratio: 3 / 2;
  cursor: zoom-in; touch-action: pan-y; outline-offset: 6px;
}
.sw-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; border-radius: var(--r);
  opacity: 0; transition: opacity .9s var(--ease-soft);
  filter: drop-shadow(0 22px 44px rgba(10,7,3,.16));
}
.sw-stage img.is-active { opacity: 1; }
/* Five of the six photos are 3:2 and fill the stage exactly. The dusk
   rendering is 800x450 (16:9), which under `contain` would sit in a 52px
   letterbox, so it alone gets `fill` — 18.5% of vertical stretch, which
   this photo carries invisibly. Cropping it to fit is not the answer: a
   uniform upscale takes 9% off each side and cuts the left wall off the
   house. Only reach for `fill` on a photo within ~20% of the frame; a
   portrait would tear apart, so letterbox that instead.               */
.sw-stage img.sw-fill { object-fit: fill; }

.sw-bar { height: 2px; margin-top: clamp(18px, 2.6vw, 28px); border-radius: 1px; background: var(--line-l); overflow: hidden; }
.sw-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transform: scaleX(0); transform-origin: left; }

.sw-meta { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; margin-top: 14px; }
.sw-count { margin: 0; font-family: var(--serif); white-space: nowrap; }
.sw-count b { font-size: 1.45rem; font-weight: 600; color: var(--t-light); letter-spacing: .02em; }
.sw-count span { font-size: .8rem; color: var(--t-light-2); margin-left: 5px; }
.sw-cap { margin: 0; flex: 1; min-width: 0; font-family: var(--serif); font-style: italic; font-size: clamp(.95rem, 1.3vw, 1.08rem); color: var(--t-light-2); animation: sw-cap-in .7s var(--ease) both; }
@keyframes sw-cap-in { from { opacity: 0; transform: translateY(8px); } }
.sw-nav { display: flex; gap: 10px; margin-left: auto; }

.sw-btn {
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line-l); background: transparent; color: var(--t-light);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .4s, background .4s, color .4s, transform .55s var(--ease);
}
.sw-btn svg { width: 18px; height: 18px; }
.sw-btn:hover { border-color: var(--gold-btn); background: var(--gold-btn); color: #fff; transform: translateY(-2px); }

.sw-thumbs { display: flex; gap: 10px; margin-top: clamp(16px, 2.4vw, 24px); }
.sw-thumb {
  flex: 1 1 0; min-width: 0; aspect-ratio: 3 / 2; position: relative;
  padding: 0; border: 0; border-radius: 10px; overflow: hidden;
  background: var(--sand-2); cursor: pointer;
  opacity: .5; transition: opacity .45s var(--ease-soft);
}
.sw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-thumb::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-radius: 10px; transition: border-color .45s; }
.sw-thumb:hover { opacity: .85; }
.sw-thumb.is-active { opacity: 1; }
.sw-thumb.is-active::after { border-color: var(--gold); }

/* ---- Ambient backdrop ---- */
/* The section carries the light of the home on stage: the active photo,
   blurred and dimmed behind everything, crossfading with the slides. JS
   builds this layer (see main.js), so with JS off the section keeps the
   flat ink background and nothing is missing.                          */
.showcase-section { overflow: hidden; }
.showcase-section > .wrap { position: relative; z-index: 1; }
.sw-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sw-glow img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s var(--ease-soft);
  /* Light blur only: enough to read as depth of field behind the framed
     print, not enough to lose the house. A heavy blur turns the backdrop
     into colour fields, which is not a background "of the home".        */
  filter: blur(8px) saturate(1.1); transform: scale(1.04);
}
/* the backdrop reads at 70% over the ink beneath it */
.sw-glow img.is-active { opacity: .7; }
/* At 70% a pale sky swallows type - measured 2.3:1 on the brightest photo -
   so the bands where words sit hold their ink rather than ramping straight
   off. The house lives in the middle third, which stays at the full 70%:
   only the sky above and the lawn below get dimmed, which is exactly where
   the eyebrow, heading, caption and rail sit.                           */
.sw-glow::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(20,17,12,.72) 0%, rgba(20,17,12,.72) 15%, transparent 28%,
    transparent 68%, rgba(20,17,12,.62) 88%, rgba(20,17,12,.62) 100%);
}
/* the section reads dark now, so its furniture follows the ink treatment */
/* gold, not the muted grey `.s-ink p` would give it: the eyebrow is small
   caps over a photo, and grey-on-photo is the weakest type on the page   */
.showcase-section .eyebrow { color: var(--gold-soft); }
.showcase-section .sw-count b { color: var(--t-dark); }
/* the muted grey these normally take has too little left against a photo
   at 70%, so they step up to full light and let size carry the hierarchy */
.showcase-section .sw-count span,
.showcase-section .sw-cap { color: var(--t-dark); }
.showcase-section .sw-bar { background: var(--line-d); }
.showcase-section .sw-btn { border-color: var(--line-d); color: var(--t-dark); }
.showcase-section .sw-btn:hover { border-color: var(--gold-btn); background: var(--gold-btn); color: var(--ink); }
.showcase-section .sw-thumb { background: rgba(20,17,12,.45); }
/* on ink the stage wants a lift, not a shadow that vanishes into the dark */
.showcase-section .sw-stage img { filter: drop-shadow(0 26px 60px rgba(0,0,0,.5)); }

/* Fullscreen viewer: ink backdrop, photo never cropped (max-w/max-h only),
   arrows at the sides, close top-right, contact path kept as a quiet link. */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  padding: clamp(18px, 4vw, 56px); background: rgba(20,17,12,.96);
  /* visibility (not display) drives open/close so the fade can transition;
     the delay keeps it interactive/visible until the fade-out finishes */
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease-soft), visibility 0s .45s;
}
.lightbox[hidden] { display: none; }   /* pre-JS / no-JS state */
.lightbox.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .45s var(--ease-soft); }
body.lb-open { overflow: hidden; }
.lb-fig { margin: 0; display: grid; gap: 16px; justify-items: center; max-width: 100%; }
.lb-img {
  max-width: min(100%, 1280px); max-height: calc(100dvh - 200px);
  border-radius: var(--r); filter: drop-shadow(0 30px 80px rgba(0,0,0,.5));
  transform: scale(.965); transition: transform .7s var(--ease);
}
.lightbox.is-open .lb-img { transform: scale(1); }
.lb-meta { display: flex; align-items: center; justify-content: center; gap: 10px 18px; flex-wrap: wrap; font-size: .88rem; color: var(--t-dark-2); }
.lb-count { font-family: var(--serif); color: var(--t-dark); letter-spacing: .04em; }
.lb-cap { font-family: var(--serif); font-style: italic; }
.lb-cta { color: var(--gold-soft); border-bottom: 1px solid var(--line-d); padding-bottom: 2px; transition: color .4s, border-color .4s; }
.lb-cta:hover { color: var(--gold); border-color: var(--gold); }
.lightbox .sw-btn { position: absolute; border-color: var(--line-d); color: var(--t-dark); background: rgba(20,17,12,.5); }
.lightbox .sw-btn:hover { border-color: var(--gold-btn); background: var(--gold-btn); color: var(--ink); }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%); }
.lb-prev { left: clamp(10px, 3vw, 42px); }
.lb-next { right: clamp(10px, 3vw, 42px); }
.lb-close { top: 18px; right: 18px; }

/* -------------------------------- FAQ -------------------------------- */
.faq { display: grid; border-top: 1px solid var(--line-l); }
.s-ink .faq, .s-ink-2 .faq { border-color: var(--line-d); }
.faq-item { border-bottom: 1px solid var(--line-l); }
.s-ink .faq-item, .s-ink-2 .faq-item { border-color: var(--line-d); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  text-align: left; font-family: var(--serif); font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  padding: 1.4rem 0; color: inherit;
}
.faq-q .ico { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-l); transition: transform .5s var(--ease), background .3s; }
.s-ink .faq-q .ico, .s-ink-2 .faq-q .ico { border-color: var(--line-d); }
.faq-q .ico::before, .faq-q .ico::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: var(--gold); border-radius: 2px;
}
.faq-q .ico::before { width: 12px; height: 1.6px; }
.faq-q .ico::after { width: 1.6px; height: 12px; transition: transform .45s var(--ease); }
.faq-item.open .faq-q .ico { transform: rotate(180deg); }
.faq-item.open .faq-q .ico::after { transform: scaleY(0); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-in { overflow: hidden; }
.faq-a-in > div { padding: 0 0 1.5rem; max-width: 62ch; color: var(--t-light-2); }
.s-ink .faq-a-in > div, .s-ink-2 .faq-a-in > div { color: var(--t-dark-2); }

/* ------------------------------ CTA band ----------------------------- */
.cta-band { position: relative; overflow: clip; text-align: center; }
.cta-band .glow {
  position: absolute; left: 50%; top: -40%; width: 900px; height: 700px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(199,154,58,.14), transparent 70%);
}
.cta-band h2 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
.cta-in { position: relative; z-index: 1; }
.contact-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; margin-top: 2.4rem; font-size: .95rem; color: var(--t-dark-2); }
.contact-row a { display: inline-flex; gap: 9px; align-items: center; transition: color .3s; }
.contact-row a:hover { color: var(--gold-soft); }
.contact-row .ic { color: var(--gold); }

/* ------------------------------ Footer ------------------------------- */
.site-footer { background: var(--ink); color: var(--t-dark-2); border-top: 1px solid rgba(228,197,126,.12); overflow: clip; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(56px, 7vw, 96px) clamp(36px, 4vw, 56px);
}
/* brand blurb: left-aligned column, kept within its width so it never
   crowds the Explore column */
.footer-brand p {
  font-family: var(--serif); font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  line-height: 1.6; color: var(--t-dark-2); max-width: 30ch;
}
.site-footer h5 { font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; }
.site-footer ul { display: grid; gap: .55rem; font-size: .92rem; }
.site-footer ul a { transition: color .3s; }
.site-footer ul a:hover { color: var(--gold-soft); }
.footer-word {
  user-select: none; pointer-events: none;
  display: flex; justify-content: center;
  padding-block: clamp(36px, 5vw, 72px) clamp(8px, 1.2vw, 18px);
}
.footer-word img { width: min(78vw, 960px); height: auto; opacity: .65; }
/* earth standing in for the O of the giant wordmarks, as in the logo:
   hairline rim like the lettering, landmass as a soft gold fill        */
.wm-globe { width: .72em; height: .72em; margin-inline: .015em; transform: translateY(.012em); overflow: visible; }
.wm-globe circle {
  fill: none; stroke-width: 1.25px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round;
}
.wm-globe path { stroke: none; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between;
  border-top: 1px solid rgba(228,197,126,.1);
  padding-block: 1.4rem 1.6rem; font-size: .78rem; letter-spacing: .04em;
}

/* --------------------------- Contact form ---------------------------- */
/* A builder's first document is a drawing sheet, so the inquiry is framed
   as one: hairline double rule, sheet number in the corner, a title block
   along the bottom carrying the licence, and a stamp when it is sent. The
   corners go nearly square here and nowhere else — sheets have corners.  */
.contact-section { padding-top: clamp(36px, 4.5vw, 64px); }
.contact-layout {
  display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .82fr);
  gap: clamp(28px, 4vw, 70px); align-items: start;
}
/* the sheet rises over the hero photo, so the form is announced before the
   first scroll instead of sitting a full screen below it */
.form-card {
  position: relative; z-index: 2;
  margin-top: calc(-1 * clamp(64px, 9vw, 150px));
  background: #fff; border: 1px solid rgba(31,42,55,.22); border-radius: 6px;
  padding: clamp(24px, 3vw, 46px); box-shadow: var(--shadow-lg);
}
/* the second rule of the sheet frame, inset from the trimmed edge */
.form-card::before {
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  border: 1px solid var(--line-l); border-radius: 2px;
}
.sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(16px, 2vw, 28px); margin-bottom: clamp(22px, 2.5vw, 34px);
}
.sheet-head h2 { font-size: clamp(1.55rem, 2.4vw, 2.05rem); }
.sheet-head p { margin-top: .75rem; font-size: .95rem; max-width: 44ch; }
.sheet-no {
  flex: none; text-align: right; line-height: 1.4;
  border-left: 1px solid var(--line-l); padding-left: clamp(12px, 1.4vw, 18px);
  font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--t-light-2);
}
.sheet-no b {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: 1.2rem; letter-spacing: .04em; color: var(--gold-deep);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.7vw, 22px); }
.field { display: grid; gap: .5rem; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field > label {
  display: flex; align-items: center;
  font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--t-light-2); transition: color .3s;
}
/* the focused field grows the same gold rule the section eyebrows carry */
.field > label::before {
  content: ""; width: 0; height: 1px; background: var(--gold);
  transition: width .4s var(--ease), margin-right .4s var(--ease);
}
.field:focus-within > label { color: var(--gold-deep); }
.field:focus-within > label::before { width: 16px; margin-right: 9px; }
.field > label .req { color: var(--gold-deep); margin-left: 2px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: .98rem; line-height: 1.55;
  color: var(--t-light); background: var(--paper);
  border: 1px solid var(--line-l); border-radius: 12px; padding: 14px 16px;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.field textarea { min-height: 148px; resize: vertical; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6875' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 17px;
}
.field input::placeholder, .field textarea::placeholder { color: #98A1AB; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: #fff; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(199,154,58,.18);
}
.field .err { font-size: .78rem; color: #B03A2E; display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea {
  border-color: #B03A2E; box-shadow: 0 0 0 3px rgba(176,58,46,.12);
}
/* errors settle in rather than snapping the layout open */
.field.invalid .err { display: block; animation: errIn .35s var(--ease-soft) both; }
@keyframes errIn { from { opacity: 0; transform: translateY(-5px); } }

/* reCAPTCHA row: the widget is a fixed 304px iframe, so it is left-aligned
   in its own band rather than stretched, and scaled down on narrow phones
   so it can never push the card sideways.                                 */
.field-captcha {
  grid-column: 1 / -1; justify-items: center;
  border-top: 1px solid var(--line-l);
  padding-top: clamp(18px, 2vw, 26px); margin-top: .3rem;
}
.field-captcha .g-recaptcha { min-height: 78px; }
@media (max-width: 400px) {
  .field-captcha .g-recaptcha { transform: scale(.86); transform-origin: left top; }
}
/* honeypot — off-screen, never announced, never tabbed into */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 24px; margin-top: clamp(20px, 2.2vw, 30px);
}
.form-note { font-size: .9rem; color: var(--t-light-2); }
.form-error {
  margin-top: 1rem; padding: 12px 15px; border-radius: 8px;
  background: rgba(176,58,46,.07); border: 1px solid rgba(176,58,46,.3);
  font-size: .88rem; color: #B03A2E;
  animation: errIn .35s var(--ease-soft) both;
}
.form-error a { color: inherit; text-decoration: underline; }
.btn[disabled] { opacity: .62; pointer-events: none; }
.form-fine {
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line-l);
  font-size: .78rem; color: var(--t-light-2);
}
/* title block: the ruled strip every drawing sheet carries, and the one
   place the licence belongs. It sits outside the form, so the sheet keeps
   its block after the fields are replaced by the stamp.                  */
.title-block {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line-l); border-radius: 3px;
  margin-top: clamp(20px, 2.2vw, 30px);
}
.title-block div { padding: 9px 12px; border-right: 1px solid var(--line-l); min-width: 0; }
.title-block div:last-child { border-right: 0; }
.title-block span {
  display: block; margin-bottom: 2px;
  font-size: .56rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--t-light-2);
}
.title-block b { font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--t-light); }

.form-success { display: none; text-align: center; padding: clamp(16px, 2.6vw, 34px) 0; }
.form-success.on { display: block; animation: heroRise .8s var(--ease) both; }
/* focus lands here so the message is announced, but it is a status panel,
   not a control - a ring around it just reads as a stray box */
.form-success:focus, .form-success:focus-visible { outline: none; }
/* the sheet comes back stamped */
.stamp {
  display: inline-grid; justify-items: center; gap: 3px;
  margin-bottom: 1.5rem; padding: 11px 26px 13px;
  border: 2px solid var(--gold-deep); border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(199,154,58,.4);
  color: var(--gold-deep); opacity: .92; transform: rotate(-6deg);
  animation: stampIn .5s var(--ease) both;
}
.stamp b {
  font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 700;
  letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
}
.stamp span { font-size: .6rem; font-weight: 600; letter-spacing: .22em; }
@keyframes stampIn {
  from { opacity: 0; transform: rotate(-15deg) scale(1.7); }
  to   { opacity: .92; transform: rotate(-6deg) scale(1); }
}
.form-success h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: .8rem; }
.form-success p { max-width: 46ch; margin-inline: auto; }

/* ---- side column: reach us / what happens next / where we work ---- */
/* Plain blocks divided by hairlines rather than three stacked cards — the
   form is the card on this band, and a second one beside it would compete
   with it instead of supporting it.                                       */
.contact-aside { display: grid; gap: clamp(24px, 2.8vw, 36px); }
.aside-block + .aside-block {
  border-top: 1px solid var(--line-l); padding-top: clamp(24px, 2.8vw, 36px);
}
.aside-h {
  font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 1.15rem;
}
.reach-list { display: grid; gap: .85rem; }
.reach-list a {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--serif); font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  color: var(--t-light); transition: color .3s;
}
.reach-list a:hover { color: var(--gold-deep); }
.reach-list .ic {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: .95rem;
  color: var(--gold-deep); background: rgba(199,154,58,.10);
  border: 1px solid rgba(199,154,58,.36);
}
.reach-note { margin-top: 1.05rem; font-size: .86rem; }

.next-list { display: grid; gap: 1.15rem; }
.next-list li { display: grid; grid-template-columns: 28px 1fr; gap: 4px 14px; }
.next-list .n {
  grid-row: span 2; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--serif); font-size: .84rem;
  color: var(--gold-deep); background: rgba(199,154,58,.08);
  border: 1px solid rgba(199,154,58,.42);
}
.next-list b { font-size: .96rem; font-weight: 600; color: var(--t-light); }
.next-list p { font-size: .88rem; margin: 0; }

.where-list { display: grid; gap: .5rem; font-size: .94rem; }
.where-list b { color: var(--t-light); font-weight: 600; }
.where-regions { margin-top: .85rem; font-size: .9rem; }
.where-note {
  margin-top: 1.05rem; padding-top: 1.05rem; border-top: 1px solid var(--line-l);
  font-size: .8rem;
}

@media (max-width: 980px) {
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .form-grid { grid-template-columns: 1fr; }
  /* narrow sheet: the number moves above the title as a ruled header line,
     rather than taking a third of the width off the copy beside it */
  .sheet-head { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .sheet-head p { max-width: none; }
  .sheet-no {
    display: flex; align-items: baseline; gap: 9px; text-align: left;
    border-left: 0; padding-left: 0;
    border-bottom: 1px solid var(--line-l); padding-bottom: 10px;
  }
  .sheet-no b { display: inline; font-size: 1rem; }
  /* the title block folds to two cells wide rather than four slivers */
  .title-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .title-block div:nth-child(2n) { border-right: 0; }
  .title-block div:nth-child(-n+2) { border-bottom: 1px solid var(--line-l); }
}

/* ------------------------------ Bio modal ---------------------------- */
/* The dialog element is the backdrop area only; the card inside it holds
   the padding, so a click that lands on the dialog itself means "outside". */
.bio {
  padding: 0; border: 0; background: transparent; overflow: visible;
  width: min(720px, 92vw); max-width: none; max-height: none;
}
.bio::backdrop {
  background: rgba(20,17,12,.86);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bio-card {
  position: relative; background: var(--paper); color: var(--t-light);
  border: 1px solid rgba(199,154,58,.28); border-radius: var(--r-lg);
  padding: clamp(26px, 3.4vw, 48px);
  box-shadow: var(--shadow-lg);
  max-height: 86dvh; overflow-y: auto;
}
.bio[open] .bio-card { animation: bioIn .5s var(--ease) both; }
@keyframes bioIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.bio-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; line-height: 1;
  font-size: 1.5rem; color: var(--t-light-2);
  border: 1px solid var(--line-l); background: #fff;
  transition: color .35s, border-color .35s, background .35s;
}
.bio-close:hover { color: var(--ink); background: var(--gold-btn); border-color: var(--gold-btn); }
.bio-head {
  display: flex; align-items: center; gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(20px, 2.4vw, 30px);
  padding-right: 44px;                      /* clear of the close button */
}
.bio-media {
  position: relative; flex: none; width: clamp(84px, 9vw, 104px); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  background: linear-gradient(180deg, #F3EAD8 0%, #E9DFC9 60%, #E4D7BE 100%);
  box-shadow: 0 0 0 1px rgba(199,154,58,.5);
}
.bio-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.bio-role {
  font-size: .68rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: .4rem;
}
.bio-card h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.bio-in p { font-size: .98rem; line-height: 1.7; color: var(--t-light-2); }
.bio-in p + p { margin-top: 1.1rem; }
@media (max-width: 560px) {
  .bio-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ------------------------------ Verified row ------------------------- */
.verified { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 2.6rem; font-size: .88rem; color: var(--t-dark-2); }
.verified .v { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--t-dark); }

/* ------------------------------ Responsive --------------------------- */
@media (max-width: 1080px) {
  .regions .region { grid-column: span 4; }
  .regions .region:nth-child(4), .regions .region:nth-child(5) { grid-column: span 5; }
  .stats, .steps { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .team { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .nav-links, .nav > .nav-cta { display: none; }
  .nav-toggle { display: block; position: absolute; right: calc(var(--gut) - 10px); top: 50%; transform: translateY(-50%); }
  .nav { position: relative; justify-content: center; }
  .feature, .feature.rev { grid-template-columns: 1fr; gap: 34px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .stack-card { grid-template-columns: 1fr; min-height: 0; }
  .stack-card .sc-media { order: -1; aspect-ratio: 16/9; min-height: 0; }
  .hero { padding-bottom: 72px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* Desktop sets the showcase content low so the title clears the fixed
     header when the band is scrolled flush to the top. On a phone that
     same offset reads as dead space above the title, so pad evenly and
     let the content sit centred in its own band - never less than the
     header, which still overlays the top of the section.               */
  .showcase-section { padding-block: max(var(--nav-h) + 12px, 9vh); }
}
@media (max-width: 560px) {
  :root { --nav-h: 66px; }
  .brand img { height: 36px; }
  .regions .region, .regions .region:nth-child(4), .regions .region:nth-child(5) { grid-column: span 10; aspect-ratio: 16/10; }
  .team { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { text-align: center; }
  .footer-brand p { margin-inline: auto; }
  .hero-cred { gap: 8px 18px; }
  .btn { padding: 14px 24px; }
  /* Showcase on phones: caption drops to its own row, thumbnails become a
     swipeable rail with real tap targets instead of six shrunken slivers. */
  .sw-cap { order: 3; flex-basis: 100%; }
  .sw-btn { width: 42px; height: 42px; }
  .sw-thumbs { overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .sw-thumbs::-webkit-scrollbar { display: none; }
  .sw-thumb { flex: 0 0 86px; }
  .lb-img { max-height: calc(100dvh - 230px); }
  .lb-prev, .lb-next { top: auto; bottom: 16px; transform: none; }
  .lb-prev:hover, .lb-next:hover { transform: none; }
  .lb-prev { left: 16px; } .lb-next { right: 16px; }
}

/* -------------------------- Punta Gorda page ------------------------- */
/* Five community cards on a six-column grid: three across, then two wide,
   so the last row fills instead of leaving a hole. Same 5-tile split the
   .regions grid uses.                                                    */
.comm-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.comm-grid .pcard { grid-column: span 2; }
.comm-grid .pcard:nth-child(4), .comm-grid .pcard:nth-child(5) { grid-column: span 3; }
.comm-grid .pcard p { font-size: .9rem; }

/* The plat is a flat document, not a photo, so it is matted on a white
   sheet and capped in width rather than cropped to fill a frame.        */
.map-plate { margin: 0; text-align: center; }
.map-plate img {
  width: 100%; max-width: 560px; margin-inline: auto;
  padding: clamp(10px, 1.2vw, 18px);
  background: #fff; border: 1px solid var(--line-l);
  border-radius: var(--r); box-shadow: var(--shadow-md);
}
.map-plate figcaption {
  max-width: 52ch; margin: clamp(14px, 1.6vw, 20px) auto 0;
  font-size: .84rem; color: var(--t-light-2);
}

/* Lead-magnet panel - one bordered sheet, so the offer reads as its own
   object without turning into a second CTA band.                        */
.guide-card {
  max-width: 860px; margin-inline: auto;
  padding: clamp(26px, 3.4vw, 52px);
  background: #fff; border: 1px solid var(--line-l);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}
.guide-card .lead { max-width: 62ch; }

/* Placeholder CTAs: the target pages do not exist yet, so these carry no
   href - styled and clickable, but they go nowhere.                     */
a.btn[aria-disabled="true"], a.link-arrow[aria-disabled="true"] { cursor: pointer; }

/* Inline link inside body copy, where the global `color: inherit` would
   otherwise leave it indistinguishable from the sentence around it.     */
.a-inline { color: var(--gold-deep); border-bottom: 1px solid rgba(199,154,58,.45); transition: color .3s, border-color .3s; }
.a-inline:hover { color: var(--gold); border-color: var(--gold); }
.s-ink .a-inline, .s-ink-2 .a-inline { color: var(--gold-soft); border-bottom-color: var(--line-d); }

@media (max-width: 1080px) {
  .comm-grid { grid-template-columns: repeat(2, 1fr); }
  .comm-grid .pcard, .comm-grid .pcard:nth-child(4) { grid-column: span 1; }
  .comm-grid .pcard:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 700px) {
  .comm-grid { grid-template-columns: 1fr; }
  .comm-grid .pcard:nth-child(5) { grid-column: span 1; }
}

/* --------------------------- Accessibility --------------------------- */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  [data-reveal], .split[data-split] .stw, main, .hero-inner { opacity: 1 !important; transform: none !important; }
}