/* ==========================================================================
   Curated Homes Collective — site.css
   Built to Design System v2.0
   ========================================================================== */

:root{
  --mocha-50:#F6F5F3;  --mocha-100:#EEEAE8; --mocha-200:#E0DBD6;
  --mocha-300:#CFC6BF; --mocha-400:#B9ACA2; --mocha-500:#9C897B;
  --mocha-600:#8C7869; --mocha-700:#7A695C; --mocha-800:#63554A;
  --mocha-900:#4C4139;
  --clay-100:#EFEAE6; --clay-300:#D2C5BC; --clay-500:#A08470;
  --clay-700:#816856; --clay-900:#564539;
  --alabaster:#F9F4EE; --linen:#F4F0E8; --ivory:#FFFDF9;
  --sand:#E3D9CE; --espresso:#2B2320; --stone:#6E6259;

  --fd:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fs:'Jost', 'Century Gothic', -apple-system, BlinkMacSystemFont, sans-serif;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  --maxw:1120px;
  --nav-h:88px;
  --radius-card:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--alabaster); color:var(--espresso);
  font-family:var(--fs); font-weight:300; font-size:16px; line-height:1.8;
  letter-spacing:.01em; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block; border-radius:0}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s5)}
.narrow{max-width:780px; margin:0 auto}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--fd); font-weight:300; margin:0; letter-spacing:.006em}
h1{font-size:clamp(40px,5.4vw,66px); line-height:1.06}
h2{font-size:clamp(30px,3.8vw,46px); line-height:1.14}
h3{font-size:clamp(23px,2.4vw,29px); line-height:1.26; font-weight:400}
h4{font-size:21px; line-height:1.35; font-weight:400}
p{margin:0 0 var(--s2)}
.lede{font-size:clamp(17px,1.6vw,20px); line-height:1.75; color:var(--stone)}
.small{font-size:13.5px; color:var(--stone); line-height:1.7}

.eyebrow{
  font-family:var(--fs); font-size:11px; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase; color:var(--clay-700);
  display:flex; align-items:center; gap:var(--s2); margin:0 0 var(--s3);
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--sand)}
.eyebrow.c{justify-content:center}
.eyebrow.c::before,.eyebrow.c::after{content:""; flex:0 0 60px; height:1px; background:var(--sand)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; font-family:var(--fs); font-weight:400;
  font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  padding:17px 38px; border:1px solid transparent; text-decoration:none;
  cursor:pointer; transition:background .3s ease,color .3s ease,border-color .3s ease;
  background:none;
}
.btn--primary{background:var(--mocha-700); color:var(--alabaster); border-color:var(--mocha-700)}
.btn--primary:hover{background:var(--mocha-800); border-color:var(--mocha-800)}
.btn--secondary{color:var(--mocha-800); border-color:var(--mocha-500)}
.btn--secondary:hover{background:var(--mocha-800); color:var(--alabaster); border-color:var(--mocha-800)}
.btn--light{color:var(--alabaster); border-color:rgba(249,244,238,.75)}
.btn--light:hover{background:var(--alabaster); color:var(--mocha-800); border-color:var(--alabaster)}
.btn-text{
  font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--clay-700); text-decoration:none;
  border-bottom:1px solid var(--clay-300); padding-bottom:4px;
  transition:border-color .2s ease;
}
.btn-text:hover{border-bottom-color:var(--clay-700)}

/* ---------- Nav ---------- */
.nav{position:sticky; top:0; z-index:60; background:rgba(249,244,238,.94);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--sand)}
.nav__inner{max-width:var(--maxw); margin:0 auto; padding:0 var(--s5);
  height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:var(--s3)}
.nav__logo img{height:52px; width:auto}
.nav__links{display:flex; align-items:center; gap:var(--s4); list-style:none; margin:0; padding:0}
.nav__links a{font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; color:var(--espresso); padding-bottom:3px;
  border-bottom:1px solid transparent; transition:.2s ease}
.nav__links a:hover,.nav__links a[aria-current="page"]{border-bottom-color:var(--clay-500); color:var(--clay-700)}
.nav__toggle{display:none; background:none; border:none; cursor:pointer; padding:10px; color:var(--espresso)}
.nav__toggle span{display:block; width:24px; height:1px; background:currentColor; margin:5px 0}

/* ---------- Sections ---------- */
section{padding:var(--s7) 0}
.sec--linen{background:var(--linen)}
.sec--mocha{background:var(--mocha-700); color:var(--alabaster)}
.sec--mocha .lede,.sec--mocha .small{color:var(--alabaster)}
.sec--mocha .eyebrow{color:var(--alabaster)}
.sec--mocha .eyebrow::after,.sec--mocha .eyebrow::before{background:rgba(249,244,238,.28)}
.sec--deep{background:var(--mocha-700); color:var(--alabaster)}
.sec--deep .lede{color:var(--alabaster)}
.sec--deep .eyebrow{color:var(--alabaster)}
.sec--deep .eyebrow::after,.sec--deep .eyebrow::before{background:rgba(249,244,238,.25)}
.sec--tight{padding:var(--s6) 0}

/* ---------- Hero ---------- */
.hero{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  align-items:stretch; min-height:min(80vh,720px); background:var(--alabaster)}
.hero__panel{display:flex; align-items:center; padding:var(--s7) var(--s5) var(--s7) var(--s5)}
.hero__inner{max-width:520px; margin-left:auto; padding-right:var(--s5)}
.hero h1{max-width:13ch}
.hero__sub{max-width:44ch; font-size:17.5px; color:var(--stone); margin-top:var(--s3)}
.hero__actions{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s5)}
.hero__media{position:relative; overflow:hidden; background:var(--mocha-200)}
.hero__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

.pagehero{background:var(--mocha-700); color:var(--alabaster); padding:var(--s8) 0 var(--s7); text-align:center}
.pagehero .eyebrow{color:var(--alabaster); justify-content:center}
.pagehero .eyebrow::before,.pagehero .eyebrow::after{content:""; flex:0 0 60px; height:1px; background:rgba(249,244,238,.35)}
.pagehero p{color:var(--alabaster); max-width:62ch; margin:var(--s3) auto 0}

/* ---------- Layout ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s7); align-items:center}
.split img{width:100%; height:auto}
.split--tight{gap:var(--s6)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4)}
.center{text-align:center}
.mt3{margin-top:var(--s3)} .mt5{margin-top:var(--s5)} .mt6{margin-top:var(--s6)}

/* ---------- Services list ---------- */
.svc{list-style:none; margin:0; padding:0; columns:2; column-gap:var(--s6)}
.svc li{break-inside:avoid; position:relative; padding:0 0 14px 26px; margin:0 0 12px;
  border-bottom:1px solid var(--sand); font-size:15.5px}
.svc li::before{content:""; position:absolute; left:0; top:9px; width:9px; height:9px;
  border:1px solid var(--clay-500); border-radius:50%}

/* ---------- Process ---------- */
.steps{counter-reset:step; display:grid; grid-template-columns:1fr 1fr; gap:var(--s5) var(--s6)}
.step{position:relative; padding-left:72px}
.step::before{counter-increment:step; content:counter(step);
  position:absolute; left:0; top:2px; width:50px; height:50px; border-radius:50%;
  border:1px solid var(--clay-500); color:var(--clay-700);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fd); font-size:20px}
.sec--mocha .step::before,.sec--deep .step::before{border-color:var(--clay-300); color:var(--alabaster)}
.step h4{margin-bottom:6px}
.step p{font-size:14.5px; color:var(--stone); margin:0}
.sec--mocha .step p,.sec--deep .step p{color:var(--alabaster)}

/* ---------- Packages (v2: rounded) ---------- */
.grid-3:has(.pkg){grid-template-rows:repeat(4,auto)}
.pkg{border:1px solid var(--mocha-300); border-radius:var(--radius-card);
  background:var(--ivory); padding:var(--s5) var(--s4);
  display:grid; grid-template-rows:subgrid; grid-row:span 4}
.pkg__head{display:flex; flex-direction:column;
  border-bottom:1px solid var(--sand); padding-bottom:var(--s3); margin-bottom:var(--s3)}
.pkg__name{font-family:var(--fd); font-size:24px; letter-spacing:.05em;
  text-transform:uppercase; margin:0 0 6px}
.pkg__price{font-family:var(--fd); font-size:26px; margin:var(--s2) 0 4px; line-height:1.2}
.pkg__note{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--clay-700); margin:0; min-height:19px}
.pkg__desc{font-size:14px; line-height:1.62; color:var(--stone); margin:12px 0 0}
.pkg ul{list-style:none; margin:0 0 var(--s3); padding:0; font-size:14.5px;
  color:var(--stone); line-height:1.7}
.pkg ul li{position:relative; padding-left:28px; margin-bottom:14px}
.pkg ul li::before{content:""; position:absolute; left:0; top:6px; width:15px; height:15px;
  border:1px solid var(--clay-500); border-radius:50%}
.pkg ul li::after{content:""; position:absolute; left:4.5px; top:10.5px; width:5px; height:2.5px;
  border-left:1.2px solid var(--clay-700); border-bottom:1.2px solid var(--clay-700);
  transform:rotate(-45deg)}
.pkg__addon{font-size:13.5px; color:var(--stone); line-height:1.7; margin:0 0 var(--s4)}
.pkg__addon:empty{margin:0}
.pkg .btn{justify-self:start; align-self:end}
/* fallback where subgrid is unavailable */
@supports not (grid-template-rows: subgrid){
  .pkg{display:flex; flex-direction:column}
  .pkg__head{min-height:238px}
  .pkg .btn{margin-top:auto; align-self:flex-start}
}

/* ---------- Membership (v2: two tiers, rounded, sprig) ---------- */
.mc{border:1px solid var(--mocha-300); border-radius:var(--radius-card);
  background:var(--alabaster); padding:var(--s6) var(--s4) var(--s5); text-align:center}
.mc__tier{font-family:var(--fd); font-size:23px; letter-spacing:.07em;
  text-transform:uppercase; margin:0 0 8px}
.mc__cad{font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--stone); margin:0}
.sprig{display:flex; align-items:center; justify-content:center; gap:14px; margin:var(--s3) 0}
.sprig::before,.sprig::after{content:""; width:56px; height:1px; background:var(--mocha-300)}
.sprig span{color:var(--clay-500); font-size:15px; line-height:1}
.mc__price{font-family:var(--fd); font-style:italic; font-size:19px; color:var(--clay-700);
  margin:0 0 var(--s3); padding-bottom:var(--s3); border-bottom:1px solid var(--sand)}
.mc ul{list-style:none; margin:0; padding:0; text-align:left; font-size:14px;
  color:var(--stone); line-height:1.7}
.mc li{position:relative; padding-left:30px; margin-bottom:16px}
.mc li::before{content:""; position:absolute; left:0; top:6px; width:15px; height:15px;
  border:1px solid var(--clay-500); border-radius:50%}
.mc li::after{content:""; position:absolute; left:4.5px; top:10.5px; width:5px; height:2.5px;
  border-left:1.2px solid var(--clay-700); border-bottom:1.2px solid var(--clay-700);
  transform:rotate(-45deg)}

/* ---------- Gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2)}
.gallery figure{margin:0; overflow:hidden; background:var(--mocha-100)}
.gallery img{width:100%; aspect-ratio:4/5; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery--2{grid-template-columns:repeat(2,1fr)}
.gallery--2 img{aspect-ratio:16/10}
.figcap{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--stone); margin-top:12px}

/* ---------- Quote ---------- */
.quote{text-align:center; max-width:26ch; margin:0 auto}
.quote p{font-family:var(--fd); font-size:clamp(26px,3.2vw,38px); line-height:1.3;
  font-style:italic; color:inherit; margin:0}

/* ---------- Areas ---------- */
.areas{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 0;
  list-style:none; margin:var(--s4) 0 0; padding:0}
.areas li{font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  padding:0 14px; position:relative}
.areas li::after{content:"\00B7"; position:absolute; right:-2px; color:var(--mocha-300)}
.areas li:last-child::after{content:none}
.areas li a{color:inherit; text-decoration:none; border-bottom:1px solid transparent;
  padding-bottom:2px; transition:border-color .25s ease, color .25s ease}
.areas li a:hover,.areas li a:focus-visible{color:var(--mocha-700); border-bottom-color:var(--mocha-500)}
.sec--mocha .areas li a:hover,.sec--deep .areas li a:hover{color:var(--alabaster); border-bottom-color:var(--alabaster)}

/* ---------- Forms ---------- */
.field{margin-bottom:var(--s4)}
.field label{display:block; font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--stone); margin-bottom:var(--s1)}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--fs); font-weight:300; font-size:15.5px;
  color:var(--espresso); background:transparent; border:none;
  border-bottom:1px solid var(--mocha-400); border-radius:0;
  padding:11px 0; outline:none; transition:border-color .2s ease}
.field textarea{resize:vertical; min-height:130px}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--clay-700)}
.field ::placeholder{color:var(--mocha-400)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)}
.checks{display:grid; gap:10px; margin-top:var(--s1)}
.checks label{display:flex; align-items:center; gap:10px; font-size:14px;
  letter-spacing:0; text-transform:none; color:var(--espresso); cursor:pointer}
.checks input{width:auto; margin:0}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--sand); padding:var(--s3) 0}
.faq summary{cursor:pointer; list-style:none; font-family:var(--fd); font-size:21px;
  display:flex; justify-content:space-between; align-items:center; gap:var(--s3)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--clay-700); font-family:var(--fs);
  font-weight:300; font-size:22px}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:var(--s2) 0 0; color:var(--stone); font-size:15px; max-width:70ch}

/* ---------- Footer ---------- */
.footer{background:var(--mocha-700); color:var(--alabaster); padding:var(--s7) 0 var(--s5)}
.footer .small,.footer p{color:var(--alabaster)}
.footer a{color:var(--alabaster); text-decoration:none; border-bottom:1px solid transparent; transition:.2s}
.footer a:hover{border-bottom-color:var(--clay-300)}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s6); align-items:start}
.footer__logo img{width:min(240px,100%); height:auto; margin-bottom:var(--s3)}
.footer h5{font-family:var(--fs); font-size:10.5px; font-weight:400; letter-spacing:.24em;
  text-transform:uppercase; color:var(--alabaster); margin:0 0 var(--s2)}
.footer ul{list-style:none; margin:0; padding:0; font-size:14px; line-height:2}
.footer__base{margin-top:var(--s6); padding-top:var(--s3);
  border-top:1px solid rgba(249,244,238,.14); display:flex; justify-content:space-between;
  align-items:flex-start; gap:var(--s3) var(--s5); flex-wrap:wrap; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--alabaster)}
.footer__base > span:first-child{flex:0 0 auto; white-space:nowrap}
.footer__cities{flex:1 1 420px; text-align:right; line-height:2; letter-spacing:.14em}
@media (max-width:820px){
  .footer__base{flex-direction:column; gap:var(--s2)}
  .footer__cities{text-align:left; flex:1 1 auto}
}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(18px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .split{grid-template-columns:1fr; gap:var(--s5)}
  .steps{grid-template-columns:1fr; gap:var(--s4)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr; gap:var(--s5)}
}
@media (max-width:820px){
  .nav__links{position:fixed; inset:var(--nav-h) 0 auto 0; background:var(--alabaster);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:var(--s3) var(--s4) var(--s5); border-bottom:1px solid var(--sand);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.25s ease}
  .nav__links.is-open{transform:none; opacity:1; pointer-events:auto}
  .nav__links li{width:100%; border-bottom:1px solid var(--sand)}
  .nav__links a{display:block; padding:16px 0; border:none}
  .nav__toggle{display:block}
  .nav__cta{display:none}
  .nav__logo img{max-width:none}
  section{padding:var(--s6) 0}
  .grid-3,.grid-2,.field-row{grid-template-columns:1fr}
  .svc{columns:1}
  .footer__grid{grid-template-columns:1fr}
  .wrap,.nav__inner{padding:0 var(--s3)}
  .nav__logo img{height:44px}
  .hero{grid-template-columns:1fr; min-height:0}
  .hero__media{order:-1; aspect-ratio:5/4}
  .hero__panel{padding:var(--s6) var(--s3)}
  .hero__inner{max-width:none; margin:0; padding-right:0}
}

/* ==========================================================================
   Scrolling gallery — horizontal scroll-snap rail
   ========================================================================== */
.rail{position:relative}
.rail__track{
  display:flex; gap:var(--s2); overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:0 0 var(--s3);
  scrollbar-width:thin; scrollbar-color:var(--mocha-300) transparent;
  -webkit-overflow-scrolling:touch;
}
.rail__track::-webkit-scrollbar{height:3px}
.rail__track::-webkit-scrollbar-track{background:var(--sand)}
.rail__track::-webkit-scrollbar-thumb{background:var(--mocha-400)}
.rail__track figure{
  margin:0; flex:0 0 clamp(220px,24vw,300px); scroll-snap-align:start;
  background:var(--mocha-100); overflow:hidden;
}
.rail__track img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.rail__track figure:hover img{transform:scale(1.04)}
.rail__nav{display:flex; gap:10px; justify-content:flex-end; margin-top:var(--s2)}
.rail__btn{
  width:44px; height:44px; border:1px solid var(--mocha-400); background:transparent;
  color:var(--mocha-800); cursor:pointer; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fs); font-size:15px; line-height:1;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.rail__btn:hover{background:var(--mocha-700); color:var(--alabaster); border-color:var(--mocha-700)}
.rail__btn:focus-visible{outline:2px solid var(--clay-700); outline-offset:3px}
.rail__hint{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--stone); margin:0}
@media (max-width:820px){
  .rail__nav{display:none}
  .rail__track figure{flex:0 0 68vw}
}
@media (prefers-reduced-motion:reduce){
  .rail__track{scroll-behavior:auto}
  .rail__track img{transition:none}
}