/* ============================================================
   Brownstone Design — Warm Editorial redesign
   Shared stylesheet
   ============================================================ */

:root{
  --cream:#FBF7EF;
  --cream-2:#F4ECDD;
  --cream-3:#EFE5D4;
  --ink:#2A2521;
  --ink-soft:#5E564B;
  --clay:#B07C53;
  --clay-dark:#8E6240;
  --olive:#6E6A4F;
  --line:#E4D9C6;
  --line-soft:#EFE7D8;
  --white:#ffffff;
  --shadow:0 18px 50px -24px rgba(42,37,33,.45);
  --maxw:1240px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.7;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

h1,h2,h3,h4{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;
  line-height:1.08;
  margin:0;
  letter-spacing:.005em;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

.eyebrow{
  font-family:"Jost",sans-serif;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:12px;
  font-weight:400;
  color:var(--clay-dark);
  margin:0 0 18px;
}
.eyebrow.light{color:#E4C7AC;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:"Jost",sans-serif;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:12.5px;
  font-weight:400;
  padding:15px 30px;
  border:1px solid var(--ink);
  color:var(--ink);
  background:transparent;
  transition:all .35s var(--ease);
  cursor:pointer;
}
.btn:hover{background:var(--ink);color:var(--cream);}
.btn.solid{background:var(--clay-dark);border-color:var(--clay-dark);color:#fff;}
.btn.solid:hover{background:var(--ink);border-color:var(--ink);}
.btn.light{border-color:rgba(255,255,255,.7);color:#fff;}
.btn.light:hover{background:#fff;color:var(--ink);}

/* ---------- Header ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(251,247,239,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:var(--maxw);margin:0 auto;padding:18px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;flex-direction:column;line-height:1;}
.brand .name{
  font-family:"Cormorant Garamond",serif;
  font-size:25px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);
}
.brand .tag{
  font-family:"Jost",sans-serif;
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:7px;font-weight:300;
}
.nav{display:flex;align-items:center;gap:34px;}
.nav a{
  font-family:"Jost",sans-serif;
  text-transform:uppercase;letter-spacing:.16em;font-size:12.5px;font-weight:400;
  color:var(--ink-soft);position:relative;padding:4px 0;transition:color .3s;
}
.nav a:hover,.nav a.active{color:var(--ink);}
.nav a.active::after,.nav a:hover::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--clay);
}
.nav .navcta{
  border:1px solid var(--ink);padding:11px 22px;color:var(--ink);
}
.nav .navcta:hover{background:var(--ink);color:var(--cream);}
.nav .navcta::after{display:none;}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;}
.menu-toggle span{display:block;width:26px;height:2px;background:var(--ink);margin:5px 0;transition:.3s;}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:88vh;display:flex;align-items:center;
  color:#fff;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(28,24,20,.72) 0%,rgba(28,24,20,.32) 55%,rgba(28,24,20,.15) 100%);
}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 32px;width:100%;}
.hero h1{font-size:clamp(44px,6.4vw,92px);font-weight:500;max-width:14ch;}
.hero .lede{
  font-family:"Jost",sans-serif;font-weight:300;font-size:clamp(16px,1.5vw,20px);
  max-width:46ch;margin:26px 0 36px;color:rgba(255,255,255,.92);line-height:1.7;
}
.hero .hero-actions{display:flex;gap:16px;flex-wrap:wrap;}

/* ---------- Page header (interior pages) ---------- */
.pagehead{
  position:relative;color:#fff;padding:130px 0 110px;overflow:hidden;
}
.pagehead-bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.pagehead::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,24,20,.55),rgba(28,24,20,.6));}
.pagehead .wrap{position:relative;z-index:2;}
.pagehead h1{font-size:clamp(40px,5.5vw,74px);}
.pagehead p{max-width:52ch;color:rgba(255,255,255,.9);font-size:18px;margin-top:18px;}

/* ---------- Sections ---------- */
.section{padding:104px 0;}
.section.tight{padding:72px 0;}
.section.cream2{background:var(--cream-2);}
.section.ink{background:var(--ink);color:var(--cream);}
.section.ink .eyebrow{color:#E4C7AC;}
.section-head{max-width:640px;margin:0 auto 60px;text-align:center;}
.section-head h2{font-size:clamp(32px,4vw,52px);}
.section-head p{color:var(--ink-soft);margin-top:18px;}
.section.ink .section-head p{color:rgba(255,255,255,.8);}

/* ---------- Intro split ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:72px;align-items:center;}
.split.reverse .split-media{order:2;}
.split-media{position:relative;}
.split-media img{width:100%;height:100%;object-fit:cover;box-shadow:var(--shadow);}
.split-media .frame{position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--clay);z-index:-1;}
.split-body h2{font-size:clamp(30px,3.6vw,48px);margin-bottom:22px;}
.split-body p{color:var(--ink-soft);margin:0 0 18px;}
.signature{
  font-family:"Cormorant Garamond",serif;font-style:italic;font-size:26px;color:var(--clay-dark);margin-top:10px;
}

/* ---------- Services strip ---------- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);}
.service{padding:46px 36px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);}
.service:nth-child(3n){border-right:0;}
.service .num{font-family:"Cormorant Garamond",serif;font-size:30px;color:var(--clay);}
.service h3{font-size:25px;margin:14px 0 12px;}
.service p{color:var(--ink-soft);font-size:15.5px;margin:0;line-height:1.65;}

/* ---------- Gallery grid ---------- */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;}
.gcard{
  position:relative;overflow:hidden;background:var(--cream-3);
}
.gcard img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);}
.gcard:hover img{transform:scale(1.06);}
.gcard::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(20,16,12,.62) 100%);
  opacity:0;transition:opacity .4s;
}
.gcard:hover::after{opacity:1;}
.gcard .cap{
  position:absolute;left:24px;bottom:20px;z-index:2;color:#fff;
  transform:translateY(8px);opacity:0;transition:all .4s var(--ease);
}
.gcard:hover .cap{transform:translateY(0);opacity:1;}
.gcard .cap .k{font-family:"Jost",sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:#E4C7AC;}
.gcard .cap .t{font-family:"Cormorant Garamond",serif;font-size:24px;line-height:1.1;margin-top:4px;}
/* spans */
.col-6{grid-column:span 6;}
.col-5{grid-column:span 5;}
.col-7{grid-column:span 7;}
.col-4{grid-column:span 4;}
.col-8{grid-column:span 8;}
.col-12{grid-column:span 12;}
.tall{aspect-ratio:4/5;}
.wide{aspect-ratio:16/10;}
.box{aspect-ratio:1/1;}
.land{aspect-ratio:3/2;}

/* ---------- Quote ---------- */
.quote{text-align:center;max-width:880px;margin:0 auto;}
.quote p{
  font-family:"Cormorant Garamond",serif;font-size:clamp(26px,3.4vw,42px);
  line-height:1.32;color:var(--ink);font-weight:500;
}
.section.ink .quote p{color:var(--cream);}
.quote .by{font-family:"Jost",sans-serif;text-transform:uppercase;letter-spacing:.24em;font-size:12px;margin-top:26px;color:var(--clay);}

/* ---------- CTA band ---------- */
.cta{position:relative;color:#fff;text-align:center;padding:120px 0;overflow:hidden;}
.cta-bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.cta::after{content:"";position:absolute;inset:0;background:rgba(26,22,18,.66);}
.cta .wrap{position:relative;z-index:2;}
.cta h2{font-size:clamp(34px,4.6vw,60px);max-width:18ch;margin:0 auto 18px;}
.cta p{max-width:48ch;margin:0 auto 34px;color:rgba(255,255,255,.88);}

/* ---------- Showroom feature list ---------- */
.feature-list{list-style:none;padding:0;margin:28px 0 0;}
.feature-list li{
  padding:16px 0;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:16px;color:var(--ink);font-size:18px;
}
.feature-list li .dot{color:var(--clay);font-size:13px;}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;}
.contact-info .row{margin-bottom:26px;}
.contact-info .label{font-family:"Jost",sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--clay-dark);margin-bottom:6px;}
.contact-info .val{font-size:18px;color:var(--ink);}
.contact-info a:hover{color:var(--clay-dark);}
form .field{margin-bottom:22px;}
form label{display:block;font-family:"Jost",sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--ink-soft);margin-bottom:8px;}
form input,form textarea{
  width:100%;background:var(--white);border:1px solid var(--line);
  padding:14px 16px;font-family:"Jost",sans-serif;font-size:16px;color:var(--ink);
  font-weight:300;transition:border-color .3s;
}
form input:focus,form textarea:focus{outline:none;border-color:var(--clay);}
form textarea{min-height:140px;resize:vertical;}

/* ---------- Footer ---------- */
.footer{background:#211D19;color:#CFC6B7;padding:78px 0 36px;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer .name{font-family:"Cormorant Garamond",serif;font-size:24px;letter-spacing:.16em;text-transform:uppercase;color:#fff;}
.footer .tag{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#9A8F7E;margin-top:8px;}
.footer p{color:#B7AD9C;font-size:15px;line-height:1.7;margin:18px 0 0;max-width:34ch;}
.footer h4{font-family:"Jost",sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:#fff;font-weight:400;margin-bottom:18px;}
.footer .fcol a,.footer .fcol div{display:block;color:#B7AD9C;font-size:15px;margin-bottom:10px;transition:color .3s;}
.footer .fcol a:hover{color:#fff;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:12.5px;color:#8A8070;letter-spacing:.04em;flex-wrap:wrap;gap:10px;}

/* ---------- Reveal (motion) ---------- */
.reveal{will-change:opacity,transform;}
.js-motion .reveal{opacity:0;}
/* JS-disabled fallback: never leave content hidden */
.reveal.in{opacity:1!important;transform:none!important;}

/* Slow cinematic zoom on hero / page-head backgrounds */
.hero-bg,.pagehead-bg,.cta-bg{transform:scale(1.06);animation:kenburns 18s ease-out forwards;}
@keyframes kenburns{from{transform:scale(1.12);}to{transform:scale(1.0);}}

/* ---------- View Transitions (cross-page) ---------- */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:vt-out .42s var(--ease) both;}
::view-transition-new(root){animation:vt-in .52s var(--ease) both;}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px);}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.brand{view-transition-name:brand;}
.topbar{view-transition-name:topbar;}

@media(prefers-reduced-motion:reduce){
  .hero-bg,.pagehead-bg,.cta-bg{animation:none;transform:none;}
  .js-motion .reveal{opacity:1;}
  ::view-transition-old(root),::view-transition-new(root){animation:none;}
}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(80vw,320px);
    background:var(--cream);flex-direction:column;align-items:flex-start;
    padding:100px 36px;gap:26px;transform:translateX(100%);transition:transform .4s var(--ease);
    box-shadow:var(--shadow);
  }
  .nav.open{transform:none;}
  .menu-toggle{display:block;z-index:60;}
  .split{grid-template-columns:1fr;gap:40px;}
  .split.reverse .split-media{order:0;}
  .split-media .frame{display:none;}
  .services{grid-template-columns:1fr;}
  .service{border-right:0;}
  .contact-grid{grid-template-columns:1fr;gap:40px;}
  .footer-top{grid-template-columns:1fr;gap:32px;}
  .col-4,.col-5,.col-6,.col-7,.col-8{grid-column:span 12;}
  .section{padding:72px 0;}
}