/* ============================================================
   FINCA TIERRA SANA — editorial countryside estate
   Palette drawn from the logo's sage line-art & the estate:
   ivory · warm stone · olive/sage · terracotta · muted rose
   ============================================================ */

:root{
  --ivory:      #F7F3EA;
  --ivory-deep: #F1EADB;
  --stone:      #EBE3D4;
  --stone-line: #DED3BE;
  --sage:       #6E7A5A;   /* logo green */
  --sage-soft:  #8E9877;
  --olive:      #3F4A32;   /* deep text green */
  --ink:        #2C3123;
  --terra:      #C0704A;
  --terra-deep: #A85C38;
  --rose:       #B98A7E;
  --cream-card: #FBF8F1;

  --measure: 66ch;
  --pad-x: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1240px;
  --radius: 4px;
  --sec: clamp(4rem, 7vw, 7rem);        /* standard section rhythm */
  --sec-tight: clamp(2.75rem, 4.5vw, 4.25rem);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

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

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  /* don't hide content behind scroll-reveal when motion is reduced */
  [data-io]{ opacity:1 !important; transform:none !important; }
  .reveal-up{ opacity:1 !important; transform:none !important; }
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; image-rendering:auto; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  color:var(--olive);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0;
  font-optical-sizing:auto;
}

/* Fraunces soft, warm display */
.display{ font-variation-settings:"SOFT" 40, "WONK" 0, "opsz" 144; }

p{ margin:0 0 1.1em; max-width:var(--measure); }
p:last-child{ margin-bottom:0; }
/* centered contexts shouldn't inherit the left-aligned measure cap */
.pagehead p, .band p, .cta-band p, .intro__text p.lead, [style*="text-align:center"] p{ max-width:none; }

.eyebrow{
  font-family:var(--sans);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--sage);
  margin:0 0 1.4rem;
  display:flex;
  align-items:center;
  gap:.9rem;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:var(--sage-soft);
  display:inline-block;
}
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{
  content:""; width:26px; height:1px; background:var(--sage-soft); display:inline-block;
}

.lead{
  font-size:clamp(1.15rem,1.05rem + .55vw,1.4rem);
  line-height:1.5;
  color:var(--olive);
  font-family:var(--serif);
  font-weight:300;
  letter-spacing:-.005em;
  max-width:36ch;
  margin-bottom:1.15em;
}

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }
.section{ padding-block:var(--sec); }
.tight{ padding-block:var(--sec-tight); }

/* consistent section titles/intros */
.section-title{ font-size:clamp(1.85rem,1.35rem + 1.9vw,2.8rem); line-height:1.1; }
.section-intro{ max-width:42ch; margin:0 auto clamp(2.25rem,4vw,3.25rem); text-align:center; }
.section-intro.left{ margin-inline:0; text-align:left; }

/* ---------- Botanical divider (signature motif) ---------- */
.sprig{
  display:flex; align-items:center; justify-content:center;
  gap:1.1rem; color:var(--sage-soft);
  margin:0 auto;
}
.sprig svg{ width:74px; height:auto; opacity:.85; }
.sprig .rule{ flex:0 0 auto; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem var(--pad-x);
  transition:background .45s var(--ease), box-shadow .45s var(--ease);
}
.nav--solid{
  background:rgba(247,243,234,.92);
  backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 1px 0 var(--stone-line);
}
.nav__brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; z-index:2; }
.nav__brand img{ width:42px; height:42px; object-fit:contain; display:block; }
.nav__brand span{
  font-family:var(--serif); font-size:1.08rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--olive); line-height:1;
}
.nav--hero-light:not(.nav--solid) .nav__brand span{ color:var(--ivory); }

.nav__links{ display:flex; align-items:center; gap:2.1rem; list-style:none; margin:0; padding:0; }
.nav__links a{
  text-decoration:none; font-size:.82rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--olive);
  position:relative; padding-block:.35rem; transition:color .3s var(--ease);
}
.nav--hero-light:not(.nav--solid) .nav__links a{ color:rgba(247,243,234,.92); }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:currentColor; transition:width .35s var(--ease);
}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{ width:100%; }
.nav__links a[aria-current="page"]{ color:var(--terra); }
.nav--hero-light:not(.nav--solid) .nav__links a[aria-current="page"]{ color:var(--ivory); }

.nav__cta{
  padding:.6rem 1.35rem; border:1px solid var(--sage);
  border-radius:100px; font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600; text-decoration:none;
  color:var(--olive); transition:all .35s var(--ease); white-space:nowrap;
}
.nav__cta:hover{ background:var(--sage); color:var(--ivory); }
.nav--hero-light:not(.nav--solid) .nav__cta{ border-color:rgba(247,243,234,.6); color:var(--ivory); }
.nav--hero-light:not(.nav--solid) .nav__cta:hover{ background:var(--ivory); color:var(--olive); border-color:var(--ivory); }

.nav__toggle{ display:none; background:none; border:0; cursor:pointer; padding:.4rem; z-index:2; }
.nav__toggle span{ display:block; width:26px; height:2px; background:var(--olive); margin:5px 0; transition:.3s var(--ease); }
.nav--hero-light:not(.nav--solid) .nav__toggle span{ background:var(--ivory); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  color:var(--ivory); overflow:hidden;
}
.hero__img{ position:absolute; inset:0; z-index:0; }
.hero__img img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
/* Lighter, focused gradient: dark only where text sits, so the image stays crisp and bright */
.hero__img::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(28,32,20,.62) 0%, rgba(28,32,20,.14) 38%, rgba(28,32,20,0) 62%),
    linear-gradient(to top, rgba(28,32,20,.10), rgba(28,32,20,0) 30%);
}
.hero__inner{
  position:relative; z-index:1; width:100%;
  max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--pad-x) clamp(3.5rem,7vw,6.5rem);
}
.hero__wreath{ width:96px; margin-bottom:1.6rem; opacity:0; }
.hero h1{
  color:var(--ivory);
  font-size:clamp(2.5rem, 1.7rem + 4.4vw, 5.2rem);
  line-height:1.0; max-width:16ch; font-weight:300;
  text-shadow:0 2px 30px rgba(20,24,14,.4);
}
.hero h1 em{ font-style:italic; color:#EED9BE; }
.hero__sub{
  margin-top:1.7rem; max-width:44ch; font-size:clamp(1.05rem,1rem + .4vw,1.28rem);
  color:rgba(247,243,234,.92); font-weight:300; line-height:1.55;
}
.hero__scroll{
  position:absolute; left:50%; bottom:1.8rem; transform:translateX(-50%); z-index:2;
  color:rgba(247,243,234,.8); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.hero__scroll span{ width:1px; height:38px; background:linear-gradient(rgba(247,243,234,.7),transparent); animation:scrolldrop 2.4s var(--ease) infinite; }
@keyframes scrolldrop{ 0%{transform:scaleY(0);transform-origin:top;} 45%{transform:scaleY(1);transform-origin:top;} 55%{transform:scaleY(1);transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }

/* page-load reveal */
.reveal-up{ opacity:0; transform:translateY(26px); }
.hero.loaded .reveal-up{ animation:revealUp 1.1s var(--ease) forwards; }
.hero.loaded .hero__wreath{ animation:revealUp 1.2s var(--ease) forwards; }
.hero.loaded .d1{ animation-delay:.15s; }
.hero.loaded .d2{ animation-delay:.35s; }
.hero.loaded .d3{ animation-delay:.55s; }
@keyframes revealUp{ to{ opacity:1; transform:none; } }

/* ============================================================
   SCROLL REVEAL (generic)
   ============================================================ */
[data-io]{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
[data-io].in{ opacity:1; transform:none; }
[data-io].d1{ transition-delay:.1s; }
[data-io].d2{ transition-delay:.22s; }
[data-io].d3{ transition-delay:.34s; }

/* ============================================================
   INTRO / prose blocks
   ============================================================ */
.intro{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.intro__text{ max-width:50ch; }
.intro h2{ font-size:clamp(1.9rem,1.4rem + 2.1vw,3rem); margin-bottom:1.3rem; }
.intro__media{ position:relative; }
.intro__media img{ border-radius:var(--radius); box-shadow:0 30px 60px -30px rgba(50,46,30,.4); width:100%; aspect-ratio:4/5; object-fit:cover; }

.two-col{ columns:2; column-gap:3rem; }
@media(max-width:720px){ .two-col{ columns:1; } }

/* ============================================================
   PATHWAYS (Stay · Celebrate · Retreat)
   ============================================================ */
.paths{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.path{
  position:relative; display:block; text-decoration:none; overflow:hidden;
  border-radius:var(--radius); aspect-ratio:3/4; color:var(--ivory);
  isolation:isolate;
}
.path img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); z-index:-2; }
.path::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(30,34,22,.78), rgba(30,34,22,.12) 55%, rgba(30,34,22,.32)); transition:opacity .5s; }
.path:hover img{ transform:scale(1.06); }
.path__body{ position:absolute; inset:auto 0 0 0; padding:2rem 1.8rem; }
.path__idx{ font-family:var(--serif); font-size:.85rem; letter-spacing:.2em; opacity:.8; }
.path h3{ color:var(--ivory); font-size:1.9rem; margin:.5rem 0 .5rem; font-style:italic; }
.path p{ font-size:.92rem; color:rgba(247,243,234,.86); margin:0; max-width:30ch; }
.path__more{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.1rem;
  font-family:var(--sans); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; }
.path__more svg{ transition:transform .4s var(--ease); }
.path:hover .path__more svg{ transform:translateX(6px); }

/* ============================================================
   FEATURE STRIP (offset image + text alternating)
   ============================================================ */
.feature{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(2rem,6vw,6rem); }
.feature + .feature{ margin-top:clamp(4rem,8vw,7rem); }
.feature__media{ position:relative; }
.feature__media img{ border-radius:var(--radius); box-shadow:0 34px 66px -34px rgba(50,46,30,.45); width:100%; aspect-ratio:4/5; object-fit:cover; }
.feature--flip .feature__media{ order:2; }
.feature__body{ max-width:46ch; }
.feature__body h3{ font-size:clamp(1.75rem,1.35rem + 1.6vw,2.5rem); margin-bottom:1rem; }
.feature__tag{ font-family:var(--serif); font-style:italic; color:var(--terra); font-size:1.02rem; margin-bottom:.55rem; letter-spacing:.01em; }
/* small floating detail image */
.feature__detail{
  position:absolute; width:42%; aspect-ratio:1; bottom:-2rem; right:-1.4rem;
  border:6px solid var(--ivory); border-radius:var(--radius); box-shadow:0 20px 40px -20px rgba(50,46,30,.5);
  object-fit:cover; z-index:2;
}
.feature--flip .feature__detail{ right:auto; left:-1.6rem; }

/* meta list */
.meta{ list-style:none; margin:1.6rem 0 0; padding:1.4rem 0 0; border-top:1px solid var(--stone-line);
  display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem 1.5rem; }
.meta li{ display:flex; gap:.7rem; align-items:baseline; font-size:.9rem; color:var(--olive); }
.meta li b{ font-family:var(--serif); font-weight:500; font-size:1.15rem; color:var(--terra-deep); min-width:2.5ch; }

/* ============================================================
   EDITORIAL GALLERY (varied grid)
   ============================================================ */
.gallery{
  display:grid; grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(150px, 15vw, 220px);
  gap:1rem; grid-auto-flow:dense;
}
.gallery figure{ margin:0; overflow:hidden; border-radius:var(--radius); }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.gallery figure:hover img{ transform:scale(1.045); }
/* column spans */
.g-w2{ grid-column:span 2; }
.g-w3{ grid-column:span 3; }
.g-w4{ grid-column:span 4; }
/* row spans — square-ish tiles get 2 rows so they aren't letterboxed */
.g-w2{ grid-row:span 2; }
.g-w3.g-wide{ grid-row:span 2; }
.g-w4.g-wide{ grid-row:span 2; }
.g-tall{ grid-row:span 3; }
.g-xtall{ grid-row:span 4; }
/* gallery that follows a property feature block */
.cabin-gallery{ margin-top:clamp(1.75rem,3vw,2.5rem); }
/* three-across cabin strip — equal tiles, taller proportion */
.strip-gallery{
  margin-top:clamp(1.75rem,3vw,2.5rem);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
}
.strip-gallery figure{ margin:0; overflow:hidden; border-radius:var(--radius); aspect-ratio:4/3; }
.strip-gallery img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.strip-gallery figure:hover img{ transform:scale(1.045); }

/* ============================================================
   QUOTE / philosophy band
   ============================================================ */
.band{ background:var(--olive); color:var(--ivory); position:relative; overflow:hidden; }
.band .wrap{ position:relative; z-index:1; text-align:center; }
.band__mark{ width:100px; margin:0 auto 1.75rem; opacity:.5; }
.band blockquote{
  margin:0 auto; max-width:22ch; font-family:var(--serif); font-weight:300;
  font-size:clamp(1.7rem,1.3rem + 2.1vw,2.9rem); line-height:1.24; font-style:italic; color:var(--ivory);
}
.band cite{ display:block; margin-top:1.75rem; font-family:var(--sans); font-style:normal;
  font-size:.76rem; letter-spacing:.22em; text-transform:uppercase; color:var(--sage-soft); }
.band__leaf{ position:absolute; opacity:.12; color:var(--sage-soft); }

/* ============================================================
   PILL cards (events/experiences)
   ============================================================ */
.exp-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }
.exp{ position:relative; overflow:hidden; border-radius:var(--radius); min-height:320px; display:flex; align-items:flex-end;
  color:var(--ivory); text-decoration:none; }
.exp img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.3s var(--ease); }
.exp::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(30,34,22,.82), rgba(30,34,22,.1) 60%); }
.exp:hover img{ transform:scale(1.05); }
.exp__body{ padding:2rem; }
.exp h3{ color:var(--ivory); font-size:1.7rem; font-style:italic; margin-bottom:.4rem; }
.exp p{ font-size:.9rem; color:rgba(247,243,234,.85); margin:0; max-width:34ch; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem; text-decoration:none; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; line-height:1;
  padding:1rem 1.85rem; border-radius:100px; border:1px solid transparent; transition:all .38s var(--ease);
}
.btn--primary{ background:var(--terra); color:var(--ivory); }
.btn--primary:hover{ background:var(--terra-deep); transform:translateY(-2px); box-shadow:0 14px 26px -12px rgba(168,92,56,.55); }
.btn--ghost{ border-color:var(--sage); color:var(--olive); }
.btn--ghost:hover{ background:var(--sage); color:var(--ivory); transform:translateY(-2px); }
.btn--light{ background:var(--ivory); color:var(--olive); }
.btn--light:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 14px 26px -12px rgba(20,24,14,.35); }
.btn svg{ transition:transform .38s var(--ease); flex:0 0 auto; }
.btn:hover svg{ transform:translateX(5px); }
.btn:focus-visible, .linkarrow:focus-visible, .nav__cta:focus-visible, .nav__links a:focus-visible{
  outline:2px solid var(--terra); outline-offset:3px; border-radius:100px;
}

.linkarrow{ display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  font-weight:600; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--terra-deep); }
.linkarrow svg{ transition:transform .35s var(--ease); }
.linkarrow:hover svg{ transform:translateX(6px); }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{ position:relative; overflow:hidden; color:var(--ivory); text-align:center; }
.cta-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 45%; z-index:-2; }
.cta-band::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(28,32,20,.5), rgba(28,32,20,.38) 50%, rgba(28,32,20,.52)); }
.cta-band h2{ color:var(--ivory); font-size:clamp(2rem,1.5rem + 2.4vw,3.4rem); max-width:20ch; margin:0 auto 1.2rem; font-style:italic; font-weight:300; }
.cta-band p{ max-width:44ch; margin:0 auto 2.2rem; color:rgba(247,243,234,.9); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ivory-deep); border-top:1px solid var(--stone-line); }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem; padding-block:clamp(3.5rem,6vw,5.5rem); }
.footer__brand img{ width:64px; margin-bottom:1.2rem; }
.footer__brand p{ max-width:34ch; color:var(--olive); font-size:.95rem; }
.footer h4{ font-family:var(--sans); font-weight:700; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sage); margin-bottom:1.3rem; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.footer a{ text-decoration:none; color:var(--olive); font-size:.95rem; transition:color .3s; }
.footer a:hover{ color:var(--terra); }
.footer__bottom{ border-top:1px solid var(--stone-line); padding-block:1.6rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.78rem; color:var(--sage); letter-spacing:.04em; }
.footer__social{ display:flex; gap:1.1rem; }
.footer__social a{ display:inline-flex; }
.footer__social svg{ width:19px; height:19px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2.5rem,6vw,6rem); align-items:start; }
.info-row{ display:flex; gap:1.1rem; padding:1.4rem 0; border-bottom:1px solid var(--stone-line); align-items:flex-start; }
.info-row:first-child{ padding-top:0; }
.info-row svg{ width:22px; height:22px; color:var(--sage); flex:0 0 auto; margin-top:.2rem; }
.info-row h4{ font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sage); margin-bottom:.35rem; }
.info-row a,.info-row p{ color:var(--olive); text-decoration:none; font-size:1.02rem; margin:0; }
.info-row a:hover{ color:var(--terra); }

.form{ background:var(--cream-card); border:1px solid var(--stone-line); border-radius:4px; padding:clamp(1.6rem,4vw,2.8rem); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--sage); margin-bottom:.5rem; }
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem; border:1px solid var(--stone-line); border-radius:var(--radius);
  background:var(--ivory); font-family:var(--sans); font-size:.98rem; color:var(--ink); transition:border-color .3s, box-shadow .3s;
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--sage); box-shadow:0 0 0 3px rgba(110,122,90,.15); }
.form__note{ font-size:.82rem; color:var(--sage); margin-top:1rem; }
.form__ok{ display:none; padding:1.1rem 1.2rem; background:rgba(110,122,90,.12); border:1px solid var(--sage-soft); border-radius:var(--radius); color:var(--olive); font-size:.95rem; margin-bottom:1.2rem; }
.form__ok.show{ display:block; }

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
.pagehead{ position:relative; padding-top:clamp(7.5rem,12vh,10rem); padding-bottom:clamp(2.5rem,4.5vw,4rem); text-align:center; }
.pagehead h1{ font-size:clamp(2.4rem,1.8rem + 3.2vw,4.2rem); font-weight:300; line-height:1.04; }
.pagehead h1 em{ font-style:italic; color:var(--terra); }
.pagehead p{ max-width:52ch; margin:1.3rem auto 0; color:var(--olive); font-size:1.05rem; line-height:1.6; }

/* stat row */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; text-align:center; }
.stat b{ display:block; font-family:var(--serif); font-size:clamp(2rem,1.4rem + 2vw,3.2rem); color:var(--terra); font-weight:400; line-height:1; }
.stat span{ display:block; margin-top:.6rem; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sage); }
.stat + .stat{ border-left:1px solid var(--stone-line); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:960px){
  .intro,.feature,.feature--flip,.contact-grid{ grid-template-columns:1fr; }
  .feature--flip .feature__media{ order:0; }
  .feature__detail{ display:none; }
  .paths{ grid-template-columns:1fr; }
  .path{ aspect-ratio:16/10; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; }
  .stat:nth-child(3){ border-left:0; }
  .gallery{ grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(140px,18vw,200px); }
  .g-xtall{ grid-row:span 3; }        /* keep tall but not excessive */
}
@media(max-width:640px){
  .nav__links,.nav__cta{ display:none; }
  .nav__toggle{ display:block; }
  .nav__links--open{
    display:flex; position:fixed; inset:0; flex-direction:column; justify-content:center; gap:2rem;
    background:var(--ivory); padding:2rem;
  }
  .nav__links--open a{ font-size:1.1rem; color:var(--olive) !important; }
  .exp-grid{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; }
  .meta{ grid-template-columns:1fr 1fr; }
  /* clean 2-up gallery: every tile equal square, no awkward spans */
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
  .gallery figure{ grid-column:span 1 !important; grid-row:auto !important; aspect-ratio:1; }
  .gallery .g-w4.g-wide, .gallery .g-w3.g-wide{ grid-column:span 2 !important; aspect-ratio:16/10; }
  .strip-gallery{ grid-template-columns:repeat(2,1fr); }
  .strip-gallery figure:last-child{ grid-column:span 2; aspect-ratio:16/9; }
  .two-col{ columns:1; }
}

/* mobile menu button that appears when open (injected) */
.menu-close{ position:fixed; top:1.2rem; right:1.5rem; font-size:2rem; background:none; border:0; color:var(--olive); z-index:60; display:none; cursor:pointer; }