/* ============================================================
   Domicile Curated Living · shared stylesheet
   Design tokens live in this one block. When Ann's brand
   palette and fonts arrive, swap the values here and the whole
   site reskins without a rebuild.
   ============================================================ */
:root{
  --navy:#101C2A;
  --blue:#01377F;
  /* Gold comes in three roles so accent text stays legible on any ground.
     --gold        accent TEXT on the light grounds (passes AA on ivory)
     --gold-light  accent TEXT on navy or blue, swapped in per context below
     --gold-fill   the filled button surface, which carries navy text */
  --gold:#826436;
  --gold-light:#C19F69;
  --gold-fill:#B18849;
  --gold-hover:#c99a5c;
  --ivory:#F9F5F2;
  --ivory-dim:#F0E9E3;
  --line:rgba(16,28,42,0.12);
  --line-dark:rgba(249,245,242,0.15);
  --text-muted:rgba(16,28,42,0.68);
  --text-muted-dark:rgba(249,245,242,0.82);
  --font-serif:'Cormorant Garamond', serif;
  --font-sans:'Jost', sans-serif;
  --max-width:1120px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ivory);
  color:var(--navy);
  font-family:var(--font-sans);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-serif); font-weight:500; letter-spacing:0.01em; color:var(--navy);}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}
.wrap{max-width:var(--max-width); margin:0 auto; padding:0 32px;}
.eyebrow{
  font-family:var(--font-sans); font-size:0.72rem; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--gold); font-weight:500;
}

/* Any container with a dark ground re-points --gold at the lighter value,
   so every descendant using var(--gold), inline styles included, follows. */
.hero, .page-hero, .band, .statement, .cs-meta, footer{--gold:var(--gold-light);}

/* NAV */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(249,245,242,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:84px; gap:20px;}
.logo img{height:44px; width:auto; display:block;}
.navlinks{display:flex; gap:28px; font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase;}
.navlinks a{position:relative; padding-bottom:4px; white-space:nowrap;}
.navlinks a.active{color:var(--gold);}
.navlinks a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width 0.3s ease;
}
.navlinks a:hover::after{width:100%;}
.nav-cta{
  border:1px solid var(--navy); padding:11px 20px; font-size:0.72rem;
  letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap;
}
.nav-cta:hover{background:var(--navy); color:var(--ivory);}
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:26px; height:20px; background:none; border:none; cursor:pointer;
  padding:0; margin-left:16px; flex-shrink:0;
}
.nav-toggle span{display:block; height:1px; width:100%; background:var(--navy);}

/* BUTTONS */
.btn-primary{
  background:var(--gold-fill); color:var(--navy);
  padding:15px 30px; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
  font-weight:500; transition:background 0.25s ease; display:inline-block;
  border:none; cursor:pointer; font-family:var(--font-sans);
}
.btn-primary:hover{background:var(--gold-hover);}
.btn-secondary{
  border:1px solid var(--navy); padding:15px 30px; font-size:0.78rem;
  letter-spacing:0.1em; text-transform:uppercase; display:inline-block;
}
.btn-secondary:hover{background:var(--navy); color:var(--ivory);}
.btn-secondary.on-dark{border-color:rgba(249,245,242,0.5); color:var(--ivory);}
.btn-secondary.on-dark:hover{background:var(--ivory); color:var(--navy);}
.cta-row{display:flex; gap:16px; flex-wrap:wrap; align-items:center;}

/* HERO (home) */
.hero{
  position:relative; min-height:74vh;
  display:flex; align-items:center;
  background:
    linear-gradient(100deg, rgba(16,28,42,0.88) 0%, rgba(16,28,42,0.72) 45%, rgba(16,28,42,0.35) 100%),
    url('../images/hero.png') center/cover no-repeat;
  color:var(--ivory);
}
.hero-inner{max-width:720px; padding:40px 0 60px;}
.hero h1{
  color:var(--ivory); font-size:3rem; line-height:1.15; margin:18px 0 22px; font-weight:500;
  text-shadow:0 2px 24px rgba(16,28,42,0.35);
}
.hero p{font-size:1.05rem; color:rgba(249,245,242,0.88); max-width:560px; margin-bottom:14px;}
.hero .cta-row{margin-top:34px;}

/* PAGE HERO (interior, photo). Pages set the photo with an inline
   style="background-image:url('images/...')" on the section. */
.page-hero{
  position:relative; padding:110px 0 90px; color:var(--ivory);
  background-color:var(--navy);
  background-size:cover; background-position:center;
  isolation:isolate;
}
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(160deg, rgba(16,28,42,0.82) 0%, rgba(16,28,42,0.55) 60%, rgba(16,28,42,0.72) 100%);
}
.page-hero .wrap{position:relative; z-index:1;}
.page-hero h1{color:var(--ivory); font-size:2.6rem; margin:14px 0 18px; max-width:720px; line-height:1.2;}
.page-hero p{max-width:580px; color:rgba(249,245,242,0.88); font-size:1.05rem;}
.page-hero .cta-row{margin-top:30px;}

/* PAGE HEADER (interior, plain) */
.page-header{padding:100px 0 70px; border-bottom:1px solid var(--line); text-align:center;}
.page-header .wrap{max-width:760px;}
.page-header h1{font-size:2.6rem; margin:14px 0 18px; line-height:1.2;}
.page-header p{color:var(--text-muted); font-size:1.05rem;}

/* SECTIONS */
section{padding:90px 0;}
.section-head{max-width:680px; margin-bottom:52px;}
.section-head h2{font-size:2.2rem; margin-top:14px; line-height:1.2;}
.section-head p{color:var(--text-muted); margin-top:16px; font-size:1rem;}
.section-head.center{text-align:center; margin-left:auto; margin-right:auto;}
.prose{max-width:680px;}
.prose p{margin-bottom:18px; color:var(--text-muted); font-size:1.02rem;}
.prose p strong{color:var(--navy); font-weight:500;}
.prose h2{font-size:1.9rem; margin:36px 0 14px;}
.prose h3{font-size:1.4rem; margin:28px 0 10px;}

/* CARD GRIDS */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.card-grid.two{grid-template-columns:repeat(2,1fr);}
.card-grid.four{grid-template-columns:repeat(4,1fr);}
.card{background:var(--ivory); padding:38px 32px; transition:background 0.25s ease;}
.card:hover{background:var(--ivory-dim);}
.card h3{font-size:1.35rem; margin:14px 0 12px;}
.card p{font-size:0.92rem; color:var(--text-muted); margin-bottom:14px;}
.card .card-link{
  font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--blue);
  border-bottom:1px solid var(--gold); padding-bottom:3px;
}
.card ul{list-style:none; margin-top:6px;}
.card li{font-size:0.88rem; color:var(--text-muted); padding:4px 0;}
.on-dim .card{background:var(--ivory-dim);}
.on-dim .card:hover{background:var(--ivory);}

/* CHECK LIST (what you receive) */
.receive-list{list-style:none; max-width:680px; margin:24px 0;}
.receive-list li{
  position:relative; padding:12px 0 12px 26px; font-size:0.98rem;
  color:var(--text-muted); border-bottom:1px solid var(--line);
}
.receive-list li:last-child{border-bottom:none;}
.receive-list li::before{content:"–"; position:absolute; left:0; color:var(--gold);}
.receive-list li strong{color:var(--navy); font-weight:500;}

/* PRICING TABLE */
.price-table{width:100%; max-width:680px; border-collapse:collapse; margin:24px 0; font-size:0.98rem;}
.price-table th, .price-table td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line);}
.price-table th{
  font-family:var(--font-sans); font-size:0.72rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-muted); font-weight:500;
}
.price-table td:last-child{font-family:var(--font-serif); font-size:1.1rem; color:var(--blue); white-space:nowrap;}
.price-line{font-family:var(--font-serif); font-size:1.6rem; color:var(--blue); margin:20px 0 6px;}
.price-note{font-size:0.9rem; color:var(--text-muted); margin-bottom:20px;}

/* OFFER SPLIT (two ways to work with us) */
.offer-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin:40px 0;}
.offer{background:var(--ivory); padding:40px 34px;}
.offer h3{font-size:1.5rem; margin-bottom:4px;}
.offer .price-line{margin-top:6px;}
.offer p{font-size:0.95rem; color:var(--text-muted); margin-bottom:16px;}
.offer .btn-primary{margin-top:8px;}
.offer .fine{font-size:0.85rem; color:var(--text-muted); margin-top:16px; margin-bottom:0;}

/* STATEMENT BAND */
.statement{background:var(--blue); color:var(--ivory); padding:100px 0; text-align:center;}
.statement .wrap{max-width:760px;}
.statement h2{color:var(--ivory); font-size:2rem; margin:18px 0 22px; line-height:1.3;}
.statement p{color:var(--text-muted-dark); font-size:1.05rem;}

/* DARK BAND */
.band{background:var(--navy); color:var(--ivory);}
.band h2, .band h3{color:var(--ivory);}
.band p{color:var(--text-muted-dark);}
.band .section-head p{color:var(--text-muted-dark);}
.band .card{background:var(--navy);}
.band .card:hover{background:#16243a;}
.band .card h3{color:var(--gold);}
.band .card p{color:rgba(249,245,242,0.72);}
.band .card-grid{background:var(--line-dark); border-color:var(--line-dark);}
.band .receive-list li{color:var(--text-muted-dark); border-color:var(--line-dark);}

/* SPLIT (image + copy) */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.split-img{aspect-ratio:4/3; overflow:hidden;}
.split-img img{width:100%; height:100%; object-fit:cover; display:block;}
.split-img.portrait{aspect-ratio:3/4;}
.split-copy h2{font-size:2rem; margin-bottom:18px; line-height:1.25;}
.split-copy p{color:var(--text-muted); margin-bottom:14px; font-size:1rem;}
.split-copy .eyebrow{display:block; margin-bottom:12px;}
.split-copy .btn-primary, .split-copy .btn-secondary{margin-top:14px;}

/* DARK BAND OVERRIDES.
   These must stay AFTER every rule that sets a dark text color, otherwise
   equal-specificity selectors like `.split-copy p` win over `.band p` and
   paint navy text on the navy background. Keep new dark-on-light rules
   above this block, and add their band counterpart here. */
.band .split-copy p,
.band .prose p{color:var(--text-muted-dark);}
.band .split-copy h2, .band .split-copy h3,
.band .prose h2, .band .prose h3{color:var(--ivory);}
.band .prose p strong, .band .split-copy p strong{color:var(--ivory);}
.band .btn-secondary{border-color:rgba(249,245,242,0.5); color:var(--ivory);}
.band .btn-secondary:hover{background:var(--ivory); color:var(--navy);}
.band .card-link{color:var(--gold); border-bottom-color:rgba(177,136,73,0.55);}
.band .card:hover .card-link{border-bottom-color:var(--gold);}

/* CASE STUDIES */
.cs-meta{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-dark); border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
}
.cs-meta > div{background:var(--navy); padding:28px 30px;}
.cs-meta .label{
  font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:8px;
}
.cs-meta .value{color:var(--ivory); font-size:0.95rem; line-height:1.5;}

.method-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.method-step{background:var(--ivory); padding:32px 28px;}
.method-step .num{font-family:var(--font-serif); font-size:1.1rem; color:var(--gold); letter-spacing:0.08em;}
.method-step h3{font-size:1.25rem; margin:10px 0 8px;}
.method-step p{font-size:0.9rem; color:var(--text-muted);}

.gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:44px; align-items:start;}
.gallery figure{margin:0;}
.gallery img{width:100%; height:auto; object-fit:cover; display:block; aspect-ratio:3/2;}
.gallery figcaption{
  font-size:0.82rem; color:var(--text-muted); padding-top:10px;
  letter-spacing:0.04em;
}
.gallery .wide{grid-column:1 / -1;}
.gallery .wide img{aspect-ratio:2/1;}

.pull{
  border-left:2px solid var(--gold); padding:6px 0 6px 26px; margin:36px 0;
  font-family:var(--font-serif); font-size:1.45rem; line-height:1.45; color:var(--navy);
  max-width:720px;
}
.band .pull{color:var(--ivory);}

.cs-nav{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:8px;}
.cs-status{
  display:inline-block; font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--blue); border:1px solid var(--blue); padding:6px 14px; margin-top:14px;
}
.band .cs-status{color:var(--gold); border-color:rgba(177,136,73,0.55);}
.card .cs-status{margin-top:0; margin-bottom:14px;}
.card-img{aspect-ratio:3/2; overflow:hidden; margin:-38px -32px 22px;}
.card-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease;}
.card:hover .card-img img{transform:scale(1.03);}

/* FINAL CTA */
.final-cta{text-align:center; padding:100px 0; background:var(--ivory-dim); border-top:1px solid var(--line);}
.final-cta h2{font-size:2.2rem; max-width:640px; margin:16px auto 14px; line-height:1.25;}
.final-cta p{color:var(--text-muted); max-width:560px; margin:0 auto 28px;}
.final-cta .cta-row{justify-content:center;}

/* FORMS */
.form-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start;}
form{display:flex; flex-direction:column; gap:20px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.field label{
  display:block; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(16,28,42,0.55); margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%; border:none; border-bottom:1px solid var(--line); background:transparent;
  padding:10px 2px; font-family:var(--font-sans); font-size:0.95rem; color:var(--navy);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-bottom-color:var(--gold);}
.field textarea{resize:vertical; min-height:90px;}
form .btn-primary{align-self:flex-start; margin-top:10px;}
/* Honeypot. Hidden from people without display:none, which some bots detect. */
.hp{position:absolute !important; left:-9999px !important; opacity:0 !important; height:0; width:0;}
.form-status{font-size:0.95rem; color:var(--blue); display:none; margin:0;}
button[disabled]{opacity:0.6; cursor:progress;}
.form-status.visible{display:block;}
.direct-contact{margin-top:36px; border-top:1px solid var(--line); padding-top:24px;}
.direct-contact div{margin-bottom:12px; font-size:0.95rem;}
.direct-contact .label{
  color:rgba(16,28,42,0.5); font-size:0.72rem; letter-spacing:0.08em;
  text-transform:uppercase; margin-bottom:2px;
}

/* FOOTER */
footer{background:var(--navy); color:rgba(249,245,242,0.55); padding:56px 0 44px; font-size:0.85rem;}
.footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px;}
.footer-grid .logo img{height:34px; filter:brightness(0) invert(1); margin-bottom:14px;}
.footer-grid p{max-width:280px;}
.footer-col h4{
  font-family:var(--font-sans); font-size:0.72rem; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:14px;
}
.footer-col ul{list-style:none;}
.footer-col li{padding:4px 0;}
.footer-col a:hover{color:var(--ivory);}
.footer-bottom{
  border-top:1px solid var(--line-dark); padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.8rem;
}

/* RESPONSIVE */
@media (max-width:960px){
  .navlinks{gap:18px; font-size:0.72rem;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  nav.wrap{flex-wrap:wrap; height:auto; padding-top:16px; padding-bottom:16px; row-gap:12px;}
  .logo img{height:34px;}
  .nav-cta{padding:9px 16px; font-size:0.68rem; letter-spacing:0.06em;}
  .nav-toggle{display:flex;}
  .navlinks{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--ivory); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:20px;
    padding:24px 32px; z-index:60; font-size:0.82rem;
  }
  .navlinks.open{display:flex;}
  .hero h1{font-size:2.2rem;}
  .page-hero h1, .page-header h1{font-size:2rem;}
  .card-grid, .card-grid.two, .card-grid.four, .offer-grid{grid-template-columns:1fr;}
  .split, .form-grid{grid-template-columns:1fr; gap:36px;}
  .footer-grid{grid-template-columns:1fr;}
}

@media (max-width:860px){
  .cs-meta{grid-template-columns:1fr 1fr;}
  .method-grid{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr; gap:16px;}
  .gallery .wide img{aspect-ratio:3/2;}
  .pull{font-size:1.2rem; padding-left:18px;}
}