/* =========================================================
   PropertyPlush — Premium Editorial Design System v2
   Restrained · Confident · Hotel-grade typography
   Type: Fraunces (optical-sized variable serif) · Inter
   Palette: warm cream · ink · deep moss · aged gold · terracotta
   ========================================================= */

:root{
  /* ink */
  --ink:         #0F0E0B;
  --ink-2:       #1A1815;
  --ink-soft:    #2D2A24;
  --ink-mute:    #4A453B;
  --muted:       #756B5B;
  --muted-2:     #948A78;

  /* paper */
  --paper:       #F4EEE2;
  --paper-2:     #ECE3D2;
  --paper-3:     #E1D6BF;
  --line:        #D4C8AE;
  --rule:        #B0A48A;
  --rule-soft:   rgba(176,164,138,.4);

  /* moss */
  --moss:        #1B4543;
  --moss-deep:   #11302E;
  --moss-soft:   #D9E2DC;

  /* gold */
  --gold:        #C49A4D;
  --gold-deep:   #8C6B2C;
  --gold-soft:   #F0E2BC;

  /* terracotta (accent — used sparingly) */
  --terra:       #B8533A;
  --terra-soft:  #F0D9CB;

  /* effects */
  --shadow-sm:   0 1px 2px rgba(20,15,5,.04), 0 2px 8px rgba(20,15,5,.05);
  --shadow-md:   0 16px 40px rgba(20,15,5,.10);
  --shadow-lg:   0 30px 80px rgba(20,15,5,.18);

  /* radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* layout */
  --maxw: 1280px;
  --gutter: 32px;

  /* type */
  --font-display: "Fraunces", "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans:    "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body{
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "ss01","ss02","cv11","liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s ease; }
::selection { background: var(--ink); color: var(--paper); }

.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.container-tight{ max-width: 980px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Custom cursor (desktop only) ---------- */
@media (hover: hover) and (pointer: fine){
  body{ cursor: none; }
  a, button, summary, input, textarea, select, label.radio-pill{ cursor: none; }
  .cursor-dot{
    position: fixed; top: 0; left: 0; z-index: 9999;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ink); pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width .25s cubic-bezier(.2,.7,.1,1), height .25s cubic-bezier(.2,.7,.1,1), background .25s ease, opacity .2s ease;
    mix-blend-mode: difference;
    opacity: .9;
  }
  .cursor-dot.is-hover{
    width: 48px; height: 48px;
    background: var(--gold);
  }
  .cursor-dot.on-dark{ background: var(--paper); }
}

/* ---------- Editorial type ---------- */
.eyebrow{
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-sans);
  font-size: 11.5px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 500;
}
.eyebrow::before{
  content: ""; width: 32px; height: 1px; background: currentColor;
}
.eyebrow.gold{ color: var(--gold-deep); }
.eyebrow.on-dark{ color: var(--gold); }

.display-1{
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(48px, 8.6vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 144;
}
.display-2{
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144;
}
.display-3{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.8vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 80;
}
.display-4{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 32;
}
.serif-italic{ font-style: italic; font-weight: 400; }

.lede{
  font-size: clamp(17px, 1.35vw, 21px);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0;
  font-weight: 400;
}

.divider-asterism{
  text-align: center; color: var(--rule);
  font-size: 18px; letter-spacing: .8em;
  margin: 56px 0;
  font-family: var(--font-display);
}
.divider-asterism::before{ content: "⁂"; }

.divider-line{
  width: 100%; height: 1px;
  background: var(--rule-soft);
  margin: 0;
}

/* ---------- Buttons ---------- */
.btn{
  --bg: var(--ink);
  --fg: var(--paper);
  --br: var(--ink);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 28px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--br);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500; font-size: 14px; letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.7,.1,1), background .25s ease, color .25s ease, border-color .25s ease;
  position: relative; overflow: hidden;
}
.btn::before{
  content: ""; position: absolute; inset: 0;
  background: var(--fg); border-radius: inherit;
  transform: translateY(102%);
  transition: transform .5s cubic-bezier(.2,.85,.15,1);
  z-index: 0;
}
.btn:hover::before{ transform: translateY(0); }
.btn > *{ position: relative; z-index: 1; transition: color .35s cubic-bezier(.2,.85,.15,1) .05s; }
.btn:hover{ color: var(--bg); text-decoration: none; }

.btn .arrow{ display: inline-block; transition: transform .35s cubic-bezier(.2,.7,.1,1); font-style: italic; font-family: var(--font-display); }
.btn:hover .arrow{ transform: translateX(6px); }

.btn-moss{ --bg: var(--moss); --fg: var(--paper); --br: var(--moss); }
.btn-gold{ --bg: var(--gold); --fg: var(--ink); --br: var(--gold); }
.btn-ink{  --bg: var(--ink);  --fg: var(--paper); --br: var(--ink); }
.btn-ghost{ --bg: transparent; --fg: var(--ink); --br: var(--ink); }
.btn-ghost-light{ --bg: transparent; --fg: var(--paper); --br: rgba(255,255,255,.5); }
.btn-ghost-light::before{ background: var(--paper); }
.btn-ghost-light:hover{ color: var(--ink); }

.btn-link{
  background: none; border: 0; padding: 0;
  font-weight: 500; color: var(--ink);
  display: inline-flex; gap: 10px; align-items: center;
  font-family: var(--font-sans); font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
  position: relative;
}
.btn-link::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: currentColor;
  transform-origin: right;
  transition: transform .5s cubic-bezier(.2,.85,.15,1);
}
.btn-link:hover::after{ transform: scaleX(0); transform-origin: left; }
.btn-link:hover{ color: var(--moss); }

.btn-block{ width: 100%; justify-content: center; }
.btn-lg{ padding: 20px 30px; font-size: 14.5px; }

/* ---------- Header ---------- */
.site-header{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 60;
  background: rgba(244, 238, 226, 0.0);
  transition: background .4s ease, border-color .4s ease, padding .4s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  background: rgba(244, 238, 226, 0.92);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(176,164,138,.18);
}
.site-header.on-light{
  background: rgba(244, 238, 226, 0.92);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(176,164,138,.18);
}
.nav{
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0; gap: 32px;
}
.brand{ display: flex; align-items: center; gap: 14px; color: var(--ink); }
.brand img{ height: 40px; width: auto; }
.brand-name{
  font-family: var(--font-display); font-weight: 400;
  font-size: 24px; letter-spacing: -0.015em; line-height: 1;
  font-variation-settings: "opsz" 80;
}
.brand-tag{
  display: block;
  font-size: 10px; color: var(--ink-mute);
  letter-spacing: .22em; text-transform: uppercase;
  margin-top: 4px; font-weight: 500;
}
.site-header:not(.is-scrolled):not(.on-light) .brand-name,
.site-header:not(.is-scrolled):not(.on-light) .brand-tag,
.site-header:not(.is-scrolled):not(.on-light) .nav-links a{
  color: var(--paper);
}
.site-header:not(.is-scrolled):not(.on-light) .brand-tag{ color: rgba(244,238,226,.65); }
.nav-links{ display: flex; gap: 36px; align-items: center; }
.nav-links a{
  font-size: 13.5px; font-weight: 500;
  position: relative; padding: 4px 0;
  color: var(--ink-soft);
  transition: color .25s ease;
}
.nav-links a::after{
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 0; height: 1px; background: currentColor;
  transition: width .35s cubic-bezier(.2,.7,.1,1);
}
.nav-links a:hover::after{ width: 100%; }
.nav-cta{ display: flex; gap: 10px; align-items: center; }
.menu-toggle{ display: none; background: none; border: 0; cursor: pointer; padding: 8px; color: inherit; }
.site-header:not(.is-scrolled):not(.on-light) .btn-ghost{ --fg: var(--paper); --br: rgba(255,255,255,.5); }
.site-header:not(.is-scrolled):not(.on-light) .btn-ghost::before{ background: var(--paper); }
.site-header:not(.is-scrolled):not(.on-light) .btn-ghost:hover{ color: var(--ink); }

/* ---------- Hero (cinematic) ---------- */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--ink);
  overflow: hidden;
  padding: 140px 0 64px;
  color: var(--paper);
}
.hero-bg{
  position: absolute; inset: 0; z-index: 0;
  background-image: url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=2400&q=85&auto=format&fit=crop");
  background-size: cover; background-position: center 30%;
  transform: scale(1.08);
  animation: heroZoom 22s ease-out forwards;
  will-change: transform;
}
@keyframes heroZoom{
  from { transform: scale(1.18); }
  to   { transform: scale(1.05); }
}
.hero-bg::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,14,11,.35) 0%, rgba(15,14,11,.45) 40%, rgba(15,14,11,.92) 100%),
    linear-gradient(135deg, rgba(15,14,11,.35) 0%, transparent 60%);
}
.hero > .container{ z-index: 2; }
.hero-supertitle{
  display: flex; gap: 24px; align-items: center;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(244,238,226,.8); font-weight: 500;
  margin-bottom: 36px;
}
.hero-supertitle span{ color: rgba(244,238,226,.45); }
.hero h1.display-1{
  color: var(--paper);
  margin: 0 0 32px;
  max-width: 14ch;
  font-weight: 320;
}
.hero h1 em{
  color: var(--gold);
  font-style: italic;
  font-weight: 380;
}
.hero h1 .word{
  display: inline-block; overflow: hidden;
  margin-right: 0.18em;
  vertical-align: bottom;
}
.hero h1 .word > span{
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  animation: wordRise 1s cubic-bezier(.2,.7,.1,1) forwards;
}
@keyframes wordRise{
  to { transform: translateY(0); opacity: 1; }
}
.hero .lede{ color: rgba(244,238,226,0.86); max-width: 52ch; }
.hero-ctas{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 44px; }

.hero-foot{
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: end; gap: 24px;
  padding: 64px var(--gutter) 0;
  max-width: var(--maxw); margin: 0 auto;
  color: rgba(244,238,226,.8);
}
.hero-meta-l, .hero-meta-r{
  font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; font-weight: 500;
}
.hero-meta-l strong, .hero-meta-r strong{
  display: block;
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: 22px; letter-spacing: -0.01em;
  color: var(--gold);
  text-transform: none; margin-top: 8px;
  font-variation-settings: "opsz" 32;
}
.hero-meta-r{ text-align: right; }
.scroll-cue{
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase; font-weight: 500;
  color: rgba(244,238,226,.7);
}
.scroll-cue .line{
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, rgba(244,238,226,.6), transparent);
  animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine{
  0%, 100% { opacity: .25; transform: scaleY(.5); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1); }
}

.side-rail{
  position: absolute; left: var(--gutter); bottom: 80px;
  z-index: 2;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10.5px; letter-spacing: .35em; text-transform: uppercase;
  color: rgba(244,238,226,.55); font-weight: 500;
}
.side-rail span{ color: var(--gold); }

/* ---------- Marquee ---------- */
.marquee{
  background: var(--ink); color: var(--paper);
  border-top: 1px solid #1f1d18;
  border-bottom: 1px solid #1f1d18;
  overflow: hidden;
  position: relative; z-index: 2;
}
.marquee-track{
  display: flex; gap: 64px;
  white-space: nowrap;
  padding: 26px 0;
  animation: marqueeRun 50s linear infinite;
  width: max-content;
}
.marquee-item{
  display: inline-flex; align-items: center; gap: 22px;
  font-family: var(--font-display);
  font-style: italic; font-weight: 350;
  font-size: 28px; color: var(--paper);
  font-variation-settings: "opsz" 80;
  letter-spacing: -0.01em;
}
.marquee-item .sep{
  color: var(--gold); font-style: normal;
  font-family: var(--font-sans); font-size: 16px;
}
@keyframes marqueeRun{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Section base ---------- */
section{ padding: 140px 0; position: relative; }
section.tight{ padding: 96px 0; }
section.dark{ background: var(--ink); color: var(--paper); }
section.cream{ background: var(--paper-2); }
section.moss{ background: var(--moss); color: var(--paper); }

.section-marker{
  position: absolute;
  top: 140px; left: 32px;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 14px; color: var(--rule);
  letter-spacing: .05em;
  font-variation-settings: "opsz" 32;
}
.section-marker::before{
  content: ""; display: inline-block;
  width: 24px; height: 1px; background: var(--rule);
  vertical-align: middle; margin-right: 12px;
}
section.dark .section-marker, section.moss .section-marker{ color: rgba(244,238,226,.4); }
section.dark .section-marker::before, section.moss .section-marker::before{ background: rgba(244,238,226,.4); }

.section-head{
  max-width: 800px; margin: 0 0 72px;
}
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2{ margin: 22px 0 22px; }
.section-head p{ color: var(--ink-soft); max-width: 56ch; }
section.dark .section-head p, section.moss .section-head p{ color: rgba(244,238,226,.78); }
section.dark .eyebrow, section.moss .eyebrow{ color: var(--gold); }

/* ---------- Manifesto ---------- */
.manifesto{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px;
  margin-top: 80px;
  padding-top: 64px;
  border-top: 1px solid var(--rule-soft);
}
.manifesto-col{ position: relative; }
.manifesto-col h3{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 2.4vw, 32px); line-height: 1.18; letter-spacing: -0.012em;
  margin: 22px 0 16px; max-width: 17ch;
  font-variation-settings: "opsz" 32;
}
.manifesto-col h3 em{ color: var(--moss); font-style: italic; }
.manifesto-col p{
  color: var(--ink-soft); font-size: 16px; margin: 0; max-width: 32ch; line-height: 1.65;
}
.manifesto-num{
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 18px; color: var(--gold-deep);
  font-variation-settings: "opsz" 32;
  display: block;
}

/* ---------- Sticky story ---------- */
.sticky-story{
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: start;
}
.sticky-story.media-right .story-text{ order: 1; }
.sticky-story.media-right .story-media{ order: 2; }

.story-media{
  position: sticky; top: 100px;
  aspect-ratio: 4/5;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-md);
}
.story-media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s cubic-bezier(.2,.7,.1,1);
}
.story-media:hover img{ transform: scale(1.04); }
.story-media .media-tag{
  position: absolute; left: 24px; bottom: 24px; z-index: 2;
  background: rgba(244,238,226,.95); color: var(--ink);
  padding: 10px 18px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.story-media .media-meta{
  position: absolute; right: 24px; top: 24px; z-index: 2;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 14px; color: rgba(244,238,226,.9);
  font-variation-settings: "opsz" 24;
}

.story-text{ padding-top: 12px; }
.story-text h2{ margin: 22px 0 24px; }
.story-text h2 em{ color: var(--moss); font-style: italic; }
.story-text p{
  font-size: 17px; color: var(--ink-soft);
  margin: 0 0 22px; max-width: 50ch; line-height: 1.65;
}
.story-text p:first-of-type::first-letter{
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: 4em; line-height: 0.85;
  float: left; padding: 6px 12px 0 0;
  color: var(--moss);
  font-variation-settings: "opsz" 144;
}
.story-list{
  list-style: none; padding: 0; margin: 32px 0;
}
.story-list li{
  display: grid; grid-template-columns: 36px 1fr;
  gap: 18px; padding: 18px 0;
  border-top: 1px solid var(--rule-soft);
  font-size: 16px; color: var(--ink-soft);
  align-items: baseline;
}
.story-list li:last-child{ border-bottom: 1px solid var(--rule-soft); }
.story-list .num{
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  color: var(--gold-deep); font-size: 16px;
  font-variation-settings: "opsz" 32;
}

/* ---------- Property type cards (image-led) ---------- */
.types-section{ margin-top: 100px; }
.types-section .types-head{
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 24px; margin-bottom: 32px;
}
.types-section .types-head h3{ margin: 0; }
.types-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.types-grid.cols-5{ grid-template-columns: repeat(5, 1fr); }
.type-card{
  position: relative; display: block;
  aspect-ratio: 3/4;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--paper-3);
  isolation: isolate;
}
.type-card img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.7,.1,1), filter .4s ease;
  z-index: 0;
  filter: saturate(.95);
}
.type-card::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,14,11,.92) 0%, rgba(15,14,11,.25) 50%, transparent 100%);
  z-index: 1;
}
.type-card:hover img{ transform: scale(1.08); filter: saturate(1.05); }
.type-card-num{
  position: absolute; left: 18px; top: 18px;
  z-index: 2; color: rgba(244,238,226,.7);
  font-family: var(--font-display); font-style: italic;
  font-size: 13px; letter-spacing: .04em;
  font-variation-settings: "opsz" 32;
}
.type-card-label{
  position: absolute; left: 20px; right: 20px; bottom: 20px;
  z-index: 2; color: var(--paper);
}
.type-card-label h4{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 1.7vw, 24px); line-height: 1.1; margin: 0 0 6px;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 32;
}
.type-card-label p{
  margin: 0; font-size: 12.5px; color: rgba(244,238,226,.78); line-height: 1.45;
  letter-spacing: .02em;
}
.type-card-arrow{
  position: absolute; right: 18px; top: 18px;
  z-index: 2; width: 38px; height: 38px;
  background: rgba(244,238,226,.10);
  border: 1px solid rgba(244,238,226,.28);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
  transition: background .35s ease, transform .45s cubic-bezier(.2,.7,.1,1), border-color .35s ease;
}
.type-card:hover .type-card-arrow{
  background: var(--gold); border-color: var(--gold); color: var(--ink);
  transform: rotate(-45deg);
}

/* ---------- Pull quote ---------- */
.pullquote{
  text-align: center;
  max-width: 1080px; margin: 0 auto;
  padding: 40px 0;
}
.pullquote .mark{
  display: block;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 84px; line-height: 0.4; color: var(--gold);
  margin-bottom: 12px;
  font-variation-settings: "opsz" 144;
}
.pullquote blockquote{
  font-family: var(--font-display); font-weight: 380;
  font-size: clamp(28px, 4vw, 56px); line-height: 1.18;
  letter-spacing: -0.018em;
  margin: 0 0 32px;
  color: var(--ink);
  font-variation-settings: "opsz" 144;
}
.pullquote blockquote em{ color: var(--moss); font-style: italic; }
.pullquote .attribution{
  font-size: 11.5px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 500;
}
.pullquote .attribution span{ color: var(--rule); }

/* ---------- Process steps ---------- */
.process{ display: grid; gap: 0; }
.process-item{
  display: grid; grid-template-columns: 100px 1fr 1.4fr;
  gap: 64px; padding: 56px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  align-items: start;
  transition: padding .4s ease;
}
.process-item:last-child{ border-bottom: 1px solid rgba(255,255,255,.10); }
.process-item:hover{ padding-left: 12px; }
.process-num{
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 32px; color: var(--gold);
  font-variation-settings: "opsz" 80;
  letter-spacing: -0.01em;
}
.process-title{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.018em;
  line-height: 1.05; color: var(--paper);
  font-variation-settings: "opsz" 80;
}
.process-title em{ color: var(--gold); font-style: italic; }
.process-body{
  font-size: 16px; color: rgba(244,238,226,.78); max-width: 50ch;
  margin: 0; line-height: 1.65;
}

/* ---------- Stat band ---------- */
.stats{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; padding: 24px 0;
}
.stat-cell{
  padding: 32px 36px;
  border-right: 1px solid rgba(244,238,226,.14);
  position: relative;
}
.stat-cell:last-child{ border-right: 0; }
.stat-cell:first-child{ padding-left: 0; }
.stat-num{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(48px, 5vw, 72px);
  letter-spacing: -0.025em; line-height: 1;
  color: var(--paper);
  font-variation-settings: "opsz" 144;
}
.stat-num em{ color: var(--gold); font-style: italic; }
.stat-num sup{
  font-size: 0.5em; font-style: italic;
  color: var(--gold); vertical-align: super; font-weight: 380;
}
.stat-label{
  margin-top: 16px; font-size: 11.5px;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(244,238,226,.7); font-weight: 500;
}

/* ---------- Pricing ---------- */
.pricing-wrap{
  max-width: 920px; margin: 0 auto;
  background: var(--paper); color: var(--ink);
  border-radius: var(--r-xl);
  padding: 64px 56px;
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
}
.pricing-wrap::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(to right, var(--moss) 0%, var(--gold) 100%);
}
.pricing-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 32px;
}
.price-block{
  padding: 36px 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-2);
  display: flex; flex-direction: column;
  position: relative;
}
.price-block.featured{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.price-block .badge{
  font-size: 10.5px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--moss); font-weight: 600; margin-bottom: 18px;
}
.price-block.featured .badge{ color: var(--gold); }
.price-figure{
  font-family: var(--font-display); font-weight: 380;
  font-size: clamp(56px, 6vw, 84px); line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 0 8px;
  font-variation-settings: "opsz" 144;
}
.price-figure em{ font-style: italic; color: var(--gold); }
.price-block .of{
  font-size: 14.5px; color: var(--muted); margin: 0 0 24px;
  letter-spacing: .04em;
}
.price-block.featured .of{ color: rgba(244,238,226,.7); }
.price-block ul{
  list-style: none; padding: 0; margin: 0 0 28px; flex: 1;
}
.price-block li{
  padding: 12px 0; border-top: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.5;
}
.price-block li:first-child{ border-top: 0; }
.price-block.featured li{ color: rgba(244,238,226,.85); border-color: rgba(255,255,255,.10); }

/* ---------- FAQ ---------- */
.faq-wrap{ max-width: 880px; margin: 0 auto; }
details.faq{
  border-top: 1px solid var(--rule-soft);
  padding: 32px 0;
}
.faq-wrap details.faq:last-of-type{ border-bottom: 1px solid var(--rule-soft); }
details.faq summary{
  list-style: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 2vw, 30px); line-height: 1.22;
  letter-spacing: -0.012em;
  display: grid; grid-template-columns: 1fr auto;
  gap: 32px; align-items: baseline;
  color: var(--ink); transition: color .25s;
  font-variation-settings: "opsz" 32;
}
details.faq summary::-webkit-details-marker{ display: none; }
details.faq summary::after{
  content: "+"; font-family: var(--font-sans); font-weight: 300;
  font-size: 32px; color: var(--moss); line-height: 1;
  transition: transform .35s cubic-bezier(.2,.7,.1,1);
  display: inline-block; align-self: center;
}
details.faq[open] summary::after{ content: "–"; }
details.faq summary:hover{ color: var(--moss); }
details.faq p{
  margin: 22px 0 0; max-width: 56ch;
  color: var(--ink-soft); font-size: 16.5px; line-height: 1.7;
}

/* ---------- Big CTA banner ---------- */
.cta-banner{
  position: relative;
  border-radius: var(--r-xl); overflow: hidden;
  padding: 120px 64px;
  color: var(--paper);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: end;
  min-height: 480px;
}
.cta-banner::before{
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(135deg, rgba(15,14,11,.78), rgba(15,14,11,.45)),
    url("https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=2000&q=85&auto=format&fit=crop");
  background-size: cover; background-position: center;
  z-index: 0;
}
.cta-banner > *{ position: relative; z-index: 1; }
.cta-banner h2{ margin: 18px 0 18px; max-width: 18ch; color: var(--paper); }
.cta-banner h2 em{ color: var(--gold); font-style: italic; }
.cta-banner p{ color: rgba(244,238,226,.85); margin: 0; max-width: 50ch; }
.cta-banner-actions{ display: flex; flex-direction: column; gap: 12px; }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--ink); color: rgba(244,238,226,.7);
  padding: 120px 0 40px;
  border-top: 1px solid #1a1815;
  position: relative; overflow: hidden;
}
.site-footer .wordmark{
  font-family: var(--font-display); font-weight: 320;
  font-size: clamp(80px, 16vw, 220px);
  line-height: 0.85; letter-spacing: -0.04em;
  color: rgba(244,238,226,.06);
  position: absolute; bottom: -20px; left: 0; right: 0;
  text-align: center; pointer-events: none;
  font-variation-settings: "opsz" 144;
  z-index: 0;
}
.footer-top{
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 64px; padding-bottom: 64px;
  border-bottom: 1px solid #1f1d18;
  position: relative; z-index: 1;
}
.site-footer .brand-name{ color: var(--paper); }
.site-footer .brand-tag{ color: rgba(244,238,226,.5); }
.foot-blurb{
  margin: 24px 0 28px;
  color: rgba(244,238,226,.7); font-size: 15.5px;
  max-width: 38ch; line-height: 1.65;
}
.foot-cta{
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  color: var(--gold); font-size: 19px;
  border-bottom: 1px solid var(--gold); padding-bottom: 4px;
  display: inline-block;
  font-variation-settings: "opsz" 32;
}
.foot-cta:hover{ color: var(--paper); border-color: var(--paper); }
.site-footer h5{
  color: var(--paper);
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .25em; text-transform: uppercase;
  margin: 0 0 22px;
}
.site-footer ul{ list-style: none; padding: 0; margin: 0; }
.site-footer li{ padding: 7px 0; }
.site-footer a{ color: rgba(244,238,226,.7); font-size: 14.5px; }
.site-footer a:hover{ color: var(--paper); }
.copy{
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 40px; flex-wrap: wrap; gap: 18px;
  font-size: 12.5px; color: rgba(244,238,226,.4);
  letter-spacing: .04em;
  position: relative; z-index: 1;
}

/* ---------- WhatsApp FAB ---------- */
.fab-wa{
  position: fixed; right: 26px; bottom: 26px; z-index: 80;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 40px rgba(37,211,102,.4), 0 4px 12px rgba(0,0,0,.15);
  transition: transform .35s cubic-bezier(.2,.7,.1,1);
}
.fab-wa:hover{ transform: scale(1.08); }

/* ---------- Tag ---------- */
.tag{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--moss); font-weight: 600;
  padding: 8px 14px;
  background: var(--moss-soft); border-radius: 999px;
}
.tag-gold{ color: var(--gold-deep); background: var(--gold-soft); }

/* ---------- Form ---------- */
.form-wrap{
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 48px;
}
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.form-grid .full{ grid-column: 1 / -1; }
label{
  display: block;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 10px; font-weight: 600;
}
input, select, textarea{
  width: 100%; padding: 16px 18px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px;
  font-family: var(--font-sans); font-size: 15px; color: var(--ink);
  transition: border-color .25s, background .25s, box-shadow .25s;
}
input:focus, select:focus, textarea:focus{
  outline: none; border-color: var(--moss); background: #fff;
  box-shadow: 0 0 0 4px rgba(27,69,67,.10);
}
textarea{ min-height: 130px; resize: vertical; }
.radio-row{ display: flex; flex-wrap: wrap; gap: 8px; }
.radio-pill{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-soft); cursor: pointer;
  transition: all .25s ease;
}
.radio-pill input{ width: auto; padding: 0; margin: 0; }
.radio-pill:has(input:checked){
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

.contact-grid{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: start; }
.contact-info ul{ list-style: none; padding: 0; margin: 0; }
.contact-info li{
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px 0; border-top: 1px solid var(--line);
}
.contact-info li:first-child{ border-top: 0; }
.contact-info .ci-icon{
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--moss-soft); color: var(--moss);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-info strong{
  display: block; color: var(--ink);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 6px; font-weight: 600;
}
.contact-info span, .contact-info a{ color: var(--ink-soft); font-size: 15px; }
.contact-info a:hover{ color: var(--moss); }

/* ---------- Brand intro loader ---------- */
.intro{
  position: fixed; inset: 0; z-index: 9000;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: clip-path 1.1s cubic-bezier(.7,0,.15,1);
  clip-path: inset(0 0 0 0);
}
.intro.is-out{ clip-path: inset(0 0 100% 0); }
.intro-mark{
  font-family: var(--font-display); font-weight: 350; font-style: italic;
  font-size: clamp(56px, 12vw, 160px); line-height: 1;
  letter-spacing: -0.035em; color: var(--paper);
  font-variation-settings: "opsz" 144;
  position: relative;
}
.intro-mark .word{
  display: inline-block; overflow: hidden; vertical-align: bottom;
}
.intro-mark .word > span{
  display: inline-block;
  transform: translateY(110%);
  animation: introRise 1s cubic-bezier(.2,.7,.1,1) forwards;
}
.intro-mark .word:nth-child(2) > span{ animation-delay: .12s; }
.intro-mark .accent{ color: var(--gold); }
.intro-line{
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: .35em; text-transform: uppercase;
  color: rgba(244,238,226,.5); font-weight: 500;
  display: flex; align-items: center; gap: 16px;
}
.intro-line .dot{
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
  animation: introPulse 1.4s ease-in-out infinite;
}
@keyframes introRise{ to { transform: translateY(0); } }
@keyframes introPulse{
  0%, 100%{ opacity: .3; transform: scale(.9); }
  50%{ opacity: 1; transform: scale(1.2); }
}
body.intro-active{ overflow: hidden; }

/* ---------- Calculator ---------- */
.calculator{
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 56px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px;
  align-items: center;
  max-width: 1100px; margin: 0 auto;
  box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
}
.calculator::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(to right, var(--moss), var(--gold));
}
.calc-controls .calc-row{ margin-bottom: 24px; }
.calc-controls label{
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 600; margin-bottom: 14px;
}
.calc-controls label .val{
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; color: var(--ink); letter-spacing: -0.01em;
  text-transform: none; font-weight: 400;
  font-variation-settings: "opsz" 32;
}
.calc-slider{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 999px;
  background: var(--paper-3); outline: none;
  cursor: pointer; padding: 0; border: 0;
  box-shadow: none;
}
.calc-slider::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); cursor: pointer;
  border: 3px solid var(--paper);
  box-shadow: 0 2px 8px rgba(20,15,5,.2);
}
.calc-slider::-moz-range-thumb{
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); cursor: pointer;
  border: 3px solid var(--paper);
}
.calc-radio-row{
  display: flex; gap: 8px; flex-wrap: wrap; padding: 0;
  margin-top: 6px; border: 0; box-shadow: none; background: transparent;
}
.calc-pill{
  padding: 10px 18px; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--line);
  font-size: 13px; color: var(--ink-soft); cursor: pointer;
  font-weight: 500;
  transition: all .25s;
}
.calc-pill input{ display: none; }
.calc-pill.is-on{
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

.calc-output{
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-lg); padding: 32px;
  position: relative;
}
.calc-output::after{
  content: ""; position: absolute; top: 32px; right: 32px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px rgba(196,154,77,.2);
}
.calc-output .calc-label{
  font-size: 10.5px; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(244,238,226,.55); font-weight: 600;
  margin-bottom: 8px;
}
.calc-output .calc-headline{
  font-family: var(--font-display); font-weight: 380;
  font-size: clamp(38px, 4.5vw, 60px); line-height: 1;
  letter-spacing: -0.025em; color: var(--paper);
  font-variation-settings: "opsz" 144;
  margin: 0 0 4px;
}
.calc-output .calc-headline em{ color: var(--gold); font-style: italic; }
.calc-output .calc-sub{
  font-size: 13px; color: rgba(244,238,226,.5); font-style: italic;
  font-family: var(--font-display); margin: 0 0 28px;
  font-variation-settings: "opsz" 24;
}
.calc-line{
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px; padding: 12px 0;
  border-top: 1px solid rgba(244,238,226,.10);
  font-size: 14px;
}
.calc-line:first-of-type{ border-top: 0; }
.calc-line span:first-child{ color: rgba(244,238,226,.7); }
.calc-line span:last-child{
  color: var(--paper); font-weight: 500;
  font-feature-settings: "tnum","ss01";
}
.calc-line.minus span:last-child::before{ content: "− "; color: rgba(244,238,226,.5); }
.calc-line.total{
  border-top: 1px solid rgba(196,154,77,.4);
  margin-top: 12px; padding-top: 18px;
}
.calc-line.total span:first-child{
  color: var(--gold); font-size: 11px; letter-spacing: .25em;
  text-transform: uppercase; font-weight: 600;
}
.calc-line.total span:last-child{
  color: var(--gold);
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 22px; letter-spacing: -0.01em;
  font-variation-settings: "opsz" 32;
}
.calc-disclaimer{
  margin-top: 20px; font-size: 12px; color: rgba(244,238,226,.5);
  font-style: italic; line-height: 1.5;
}

/* ---------- Dashboard mockup ---------- */
.dash-section{
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 80px; align-items: center;
}
.dash-text h2{ margin: 22px 0 22px; }
.dash-text p{
  color: var(--ink-soft); font-size: 17px; margin: 0 0 16px;
  max-width: 50ch; line-height: 1.65;
}
.dash-mockup{
  background: var(--ink); border-radius: var(--r-lg); padding: 32px;
  color: var(--paper);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.dash-mockup::before{
  content: "Sample owner statement — illustrative figures";
  position: absolute; top: -32px; left: 0;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 500;
}
.dash-window-bar{
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 28px;
}
.dash-window-bar .dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(244,238,226,.18);
}
.dash-window-bar .url{
  margin-left: 12px;
  font-size: 11px; color: rgba(244,238,226,.5);
  letter-spacing: .04em; font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.dash-head{
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-bottom: 24px; margin-bottom: 24px;
  border-bottom: 1px solid rgba(244,238,226,.10);
}
.dash-head .dh-title{
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; line-height: 1;
  font-variation-settings: "opsz" 32;
}
.dash-head .dh-subtitle{
  font-size: 11px; color: rgba(244,238,226,.5);
  letter-spacing: .12em; margin-top: 6px;
}
.dash-head .dh-status{
  font-size: 11px; color: var(--gold); font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  display: flex; gap: 8px; align-items: center;
}
.dash-head .dh-status::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(196,154,77,.25);
}
.dash-grid{
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px;
  margin-bottom: 24px;
}
.dash-stat{
  background: rgba(244,238,226,.04);
  border: 1px solid rgba(244,238,226,.08);
  border-radius: 10px; padding: 18px;
}
.dash-stat .ds-label{
  font-size: 10.5px; color: rgba(244,238,226,.55);
  letter-spacing: .15em; text-transform: uppercase; font-weight: 600;
  margin-bottom: 10px;
}
.dash-stat .ds-num{
  font-family: var(--font-display); font-weight: 400;
  font-size: 26px; letter-spacing: -0.015em;
  color: var(--paper); line-height: 1;
  font-variation-settings: "opsz" 48;
  font-feature-settings: "tnum","ss01";
}
.dash-stat .ds-num em{ color: var(--gold); font-style: italic; }
.dash-stat .ds-foot{
  margin-top: 8px; font-size: 11.5px; color: rgba(244,238,226,.5);
}
.dash-row{
  display: grid; grid-template-columns: 1fr auto;
  padding: 12px 0; border-top: 1px solid rgba(244,238,226,.08);
  font-size: 13px; gap: 16px; align-items: center;
}
.dash-row:first-child{ border-top: 0; padding-top: 0; }
.dash-row span:first-child{ color: rgba(244,238,226,.75); }
.dash-row .num{
  font-feature-settings: "tnum","ss01";
  color: var(--paper); font-weight: 500;
}
.dash-row.subtotal span:first-child{
  font-size: 11px; color: rgba(244,238,226,.55);
  letter-spacing: .15em; text-transform: uppercase; font-weight: 600;
}
.dash-row.subtotal .num{ color: var(--paper); font-weight: 600; }
.dash-row.payout{
  border-top: 1px solid rgba(196,154,77,.35);
  margin-top: 8px; padding-top: 14px;
}
.dash-row.payout span:first-child{
  font-size: 11px; color: var(--gold);
  letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
}
.dash-row.payout .num{
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 20px; color: var(--gold); letter-spacing: -0.01em;
  font-variation-settings: "opsz" 32;
}
.dash-spark{
  display: flex; gap: 4px; align-items: flex-end;
  height: 36px;
}
.dash-spark .bar{
  flex: 1; background: rgba(196,154,77,.5);
  border-radius: 2px 2px 0 0;
  transition: height .8s cubic-bezier(.2,.7,.1,1);
}

/* ---------- Reveal animation ---------- */
.reveal{
  opacity: 0; transform: translateY(36px);
  transition: opacity 1.1s cubic-bezier(.2,.7,.1,1), transform 1.1s cubic-bezier(.2,.7,.1,1);
}
.reveal.in{ opacity: 1; transform: translateY(0); }
.reveal-d1{ transition-delay: .08s; }
.reveal-d2{ transition-delay: .16s; }
.reveal-d3{ transition-delay: .24s; }
.reveal-d4{ transition-delay: .32s; }

/* ---------- Image-mask reveal (clip-path) ---------- */
.mask-reveal{
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(.7,0,.15,1);
}
.mask-reveal.in{ clip-path: inset(0 0 0 0); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .mask-reveal{ opacity: 1; transform: none; clip-path: none; }
  .hero-bg{ animation: none; transform: scale(1); }
  .hero h1 .word > span{ transform: none; opacity: 1; }
  .marquee-track{ animation: none; }
  .intro{ display: none; }
  body.intro-active{ overflow: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .types-grid.cols-5{ grid-template-columns: repeat(4, 1fr); }
  .section-marker{ display: none; }
}
@media (max-width: 960px){
  section{ padding: 96px 0; }
  .sticky-story{ grid-template-columns: 1fr; gap: 48px; }
  .sticky-story.media-right .story-text{ order: 2; }
  .sticky-story.media-right .story-media{ order: 1; }
  .story-media{ position: relative; top: auto; aspect-ratio: 4/3; }
  .manifesto{ grid-template-columns: 1fr; gap: 48px; }
  .types-grid, .types-grid.cols-5{ grid-template-columns: repeat(3, 1fr); }
  .process-item{ grid-template-columns: 60px 1fr; gap: 24px; padding: 36px 0; }
  .process-body{ grid-column: 2 / -1; margin-top: 12px; }
  .stats{ grid-template-columns: 1fr 1fr; }
  .stat-cell:nth-child(2){ border-right: 0; }
  .stat-cell:nth-child(3), .stat-cell:nth-child(4){ border-top: 1px solid rgba(244,238,226,.14); }
  .pricing-grid{ grid-template-columns: 1fr; }
  .pricing-wrap{ padding: 40px 28px; }
  .footer-top{ grid-template-columns: 1fr 1fr; gap: 36px; }
  .cta-banner{ grid-template-columns: 1fr; padding: 72px 36px; min-height: auto; }
  .contact-grid{ grid-template-columns: 1fr; }
  .form-wrap{ padding: 32px 24px; }
  .side-rail{ display: none; }
  .hero-foot{ grid-template-columns: 1fr; gap: 36px; padding: 48px var(--gutter) 0; }
  .hero-meta-r{ text-align: left; }
  .scroll-cue{ display: none; }
  body{ cursor: auto; }
  .cursor-dot{ display: none; }
}
@media (max-width: 640px){
  body{ font-size: 16px; }
  .hero{ min-height: 90vh; padding: 120px 0 48px; }
  .nav-links{
    display: none; position: absolute;
    top: 76px; left: 0; right: 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    flex-direction: column; gap: 0;
    padding: 16px 28px;
  }
  .nav-links.open{ display: flex; }
  .nav-links a{ padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft) !important; }
  .nav-links a:last-child{ border-bottom: 0; }
  .menu-toggle{ display: block; }
  .nav-cta .btn{ display: none; }
  .types-grid, .types-grid.cols-5{ grid-template-columns: 1fr 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .copy{ flex-direction: column; align-items: flex-start; }
  .footer-top{ grid-template-columns: 1fr; }
  .pullquote .mark{ font-size: 60px; }
  .marquee-item{ font-size: 22px; }
}