/* ============================================
   AMBRE STUDIO — interior design site
   Palette: ink #1F1B18, plaster #EFE7DD, clay #B8654F,
            sage #7C8A6E, brass #C6A15B, paper #FAF7F2
   Display: 'Fraunces'  Body: 'Work Sans'  Utility: 'JetBrains Mono'
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,400&family=Work+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:#1F1B18;
  --plaster:#EFE7DD;
  --paper:#FAF7F2;
  --clay:#B8654F;
  --sage:#7C8A6E;
  --brass:#C6A15B;
  --line: rgba(31,27,24,0.14);
  --display: 'Fraunces', serif;
  --body: 'Work Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:126px;}
body{
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height:1.6;
  font-weight:400;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}

.eyebrow{
  font-family: var(--mono);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color: var(--clay);
  display:flex; align-items:center; gap:.6rem;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px; background: var(--clay);
  display:inline-block;
}

h1,h2,h3{
  font-family: var(--display);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.6rem, 6vw, 5rem); font-weight:400;}
h2{font-size:clamp(1.9rem, 3.4vw, 3rem);}
h3{font-size:1.25rem;}
p.lead{font-size:1.1rem; color:#4b453f; max-width:52ch;}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}
@media (max-width:640px){
  .container{padding:0 22px;}
}
@media (max-width:400px){
  .container{padding:0 18px;}
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background: var(--paper);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:110px;
}
.logo{
  display:flex; align-items:center;
}
.logo-img{
  height:80px; width:auto;
}
.logo span{color:var(--clay);}
.nav{display:flex; gap:2.4rem; align-items:center;}
.nav a{
  font-size:0.92rem;
  position:relative;
  padding:4px 0;
  transition: color .2s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-2px;
  width:0; height:1px; background:var(--clay);
  transition:width .25s ease;
}
.nav a:hover::after, .nav a.active::after{width:100%;}
.nav a.active{color:var(--clay);}
.nav-toggle{
  display:none; background:none; border:none; font-size:1.5rem; cursor:pointer;
  width:44px; height:44px; align-items:center; justify-content:center;
}

@media (max-width:820px){
  .nav{
    position:fixed; top:0; left:0; bottom:0;
    width:min(300px, 78vw);
    background:var(--paper);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:100px 0 2rem;
    transform:translateX(-100%);
    transition:transform .3s ease;
    z-index:200;
    overflow-y:auto;
    box-shadow:4px 0 20px rgba(31,27,24,0.12);
  }
  .nav.open{transform:translateX(0);}
  .nav-backdrop{
    position:fixed; inset:0; z-index:199;
    background:rgba(31,27,24,0.4);
    opacity:0; pointer-events:none;
    transition:opacity .3s ease;
  }
  .nav-backdrop.show{opacity:1; pointer-events:auto;}
  .nav-toggle{display:flex; z-index:201;}
  .nav a{
    font-size:1.05rem;
    font-weight:500;
    width:100%;
    padding:1rem 2rem;
    border-bottom:1px solid var(--line);
  }
  .nav a::after{display:none;}
  .nav a.active{color:var(--clay); background:rgba(184,101,79,0.06);}
}
@media (max-width:480px){
  .site-header .container{height:82px;}
  .logo-img{height:58px;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:56px 0 90px;
  overflow:hidden;
}
@media (max-width:820px){
  .hero{padding:48px 0 60px;}
}
@media (max-width:480px){
  .hero{padding:40px 0 44px;}
}
.hero .container{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap:60px; align-items:center;
}
.hero-copy .eyebrow{margin-bottom:1.4rem;}
.hero h1{margin-bottom:1.4rem;}
.hero-frame{
  position:relative;
  border-radius:4px 4px 4px 60px;
  overflow:hidden;
  aspect-ratio: 4/5;
  background: var(--plaster);
}
.hero-frame img, .hero-frame video{width:100%; height:100%; object-fit:cover;}

.video-badge{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.05em;
  color:var(--paper); background:rgba(31,27,24,0.55);
  padding:.4rem .7rem; border-radius:20px;
  display:flex; align-items:center; gap:.4rem;
  text-transform:uppercase;
}
.video-badge .dot{
  width:6px; height:6px; border-radius:50%; background:var(--clay);
}

/* ---------- Full-bleed video hero (homepage) ---------- */
.hero.hero-video{
  position:relative;
  padding:0;
  min-height:min(88vh, 780px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero-bg-video, .hero-bg-image{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  background: var(--ink);
}
.hero.hero-video .hero-overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(31,27,24,0.35) 0%, rgba(31,27,24,0.4) 45%, rgba(31,27,24,0.85) 100%);
}
.hero.hero-video .hero-inner{
  position:relative; z-index:2;
  padding-top: 160px;
  padding-bottom: 90px;
  display:block;
}
.hero.hero-video .hero-copy{ max-width:640px; }
.hero.hero-video .hero-copy .eyebrow{ color: var(--brass); }
.hero.hero-video .hero-copy .eyebrow::before{ background: var(--brass); }
.hero.hero-video h1{ color: var(--paper); }
.hero.hero-video p.lead{ color: rgba(250,247,242,0.86); }
.hero.hero-video .btn{ border-color: var(--paper); color: var(--paper); }
.hero.hero-video .btn:hover{ background: var(--paper); color: var(--ink); }
.hero.hero-video .btn.solid{ background: var(--clay); border-color: var(--clay); color: var(--paper); }
.hero.hero-video .btn.solid:hover{ background: var(--paper); color: var(--ink); border-color: var(--paper); }
.hero.hero-video .video-badge{
  position:absolute; bottom:24px; right:32px; z-index:2;
}

@media (max-width:820px){
  .hero.hero-video{ min-height:560px; }
  .hero.hero-video .hero-inner{ padding-top:110px; padding-bottom:50px; }
  .hero.hero-video .video-badge{ bottom:20px; right:20px; }
}
@media (max-width:480px){
  .hero.hero-video{ min-height:480px; }
  .hero.hero-video .hero-inner{ padding-top:88px; padding-bottom:40px; }
  .hero.hero-video .video-badge{ bottom:16px; right:16px; font-size:.6rem; }
}
@media (max-width:380px){
  .hero-copy h1{ font-size:2.3rem; }
  .hero-copy > div[style*="display:flex"]{ flex-direction:column; align-items:stretch; }
  .hero-copy .btn{ justify-content:center; }
}
@media (max-width:480px){
  .hero-copy .eyebrow{ margin-bottom:1rem; }
  .hero-copy h1{ margin-bottom:1rem; line-height:1.12; }
  .hero-copy p.lead{ font-size:1rem; }
  .hero-copy > div[style*="margin-top:2rem"]{ margin-top:1.4rem !important; }
}
@media (max-width:820px){
  .hero .container{grid-template-columns:1fr;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.05em;
  text-transform:uppercase;
  padding:1rem 1.6rem;
  border:1px solid var(--ink);
  border-radius:2px;
  transition: background .25s, color .25s;
}
.btn:hover{background:var(--ink); color:var(--paper);}
.btn.solid{background:var(--ink); color:var(--paper);}
.btn.solid:hover{background:var(--clay); border-color:var(--clay);}

/* ---------- Sections ---------- */
section{padding:90px 0;}
@media (max-width:820px){
  section{padding:64px 0;}
}
@media (max-width:480px){
  section{padding:48px 0;}
}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; margin-bottom:3rem; flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  padding-bottom:2rem;
}
@media (max-width:640px){
  .section-head{
    flex-direction:column; align-items:flex-start; gap:1rem;
  }
}

/* Blueprint divider */ — signature motif */
.blueprint{
  display:flex; align-items:center; gap:0; margin:0 0 3rem;
}
.blueprint span{
  font-family:var(--mono); font-size:.72rem; color:var(--sage);
  white-space:nowrap;
}
.blueprint .rule{flex:1; height:1px; background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 10px); margin:0 14px;}

/* ---------- Grid cards ---------- */
.grid{display:grid; gap:28px;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:1024px){
  .grid.cols-3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .grid.cols-3, .grid.cols-2{grid-template-columns:1fr; gap:20px;}
}

.card{
  background:var(--plaster);
  border-radius:3px;
  overflow:hidden;
  transition: transform .3s ease;
}
.card:hover{transform: translateY(-6px);}
.card .img-wrap{aspect-ratio:4/3; overflow:hidden;}
.card .img-wrap img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.card:hover .img-wrap img{transform:scale(1.06);}
.card-body{padding:1.4rem 1.5rem 1.7rem;}
.card-body .tag{font-family:var(--mono); font-size:.7rem; color:var(--sage); text-transform:uppercase; letter-spacing:.08em;}
.card-body h3{margin-top:.4rem;}

/* ---------- Stats strip ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stats div{
  padding:2.2rem 1.5rem;
  border-right:1px solid var(--line);
}
.stats div:last-child{border-right:none;}
.stats .num{font-family:var(--display); font-size:2.4rem;}
.stats .label{font-family:var(--mono); font-size:.72rem; color:#6b6459; text-transform:uppercase; letter-spacing:.06em; margin-top:.3rem;}
@media (max-width:820px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .stats div{ padding:1.8rem 1rem; }
  .stats .num{ font-size:2rem; }
}
@media (max-width:520px){
  .stats{grid-template-columns:1fr;}
  .stats div{
    border-right:none; border-bottom:1px solid var(--line);
    padding:1.4rem 0.5rem;
    display:flex; align-items:baseline; justify-content:space-between;
    text-align:left;
  }
  .stats div:last-child{ border-bottom:none; }
  .stats .num{ font-size:1.7rem; }
  .stats .label{ margin-top:0; text-align:right; }
}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--ink); color:var(--paper);
  padding:80px 0;
  text-align:center;
}
.cta-band h2{color:var(--paper); margin-bottom:1.6rem;}
.cta-band .btn{border-color:var(--paper);}
.cta-band .btn:hover{background:var(--paper); color:var(--ink);}
@media (max-width:640px){
  .cta-band{padding:52px 0;}
  .cta-band h2{font-size:1.5rem;}
}

/* ---------- Footer ---------- */
.site-footer{
  padding:60px 0 30px;
  border-top:1px solid var(--line);
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:2rem; margin-bottom:3rem;
}
.footer-grid h4{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:1rem; color:#6b6459;}
.footer-grid li{margin-bottom:.6rem; font-size:.92rem;}
.footer-grid li a:hover{color:var(--clay);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:.75rem; color:#6b6459;
  flex-wrap:wrap; gap:1rem;
}
@media (max-width:820px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .footer-grid{grid-template-columns:1fr; gap:2.2rem;}
  .footer-bottom{flex-direction:column; align-items:flex-start; gap:.4rem;}
}

/* ---------- Forms ---------- */
.contact-grid{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:60px; }
@media (max-width:820px){
  .contact-grid{ grid-template-columns:1fr; gap:36px; }
}

/* ---------- Reusable responsive two-column split ---------- */
.split-2{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
@media (max-width:820px){
  .split-2{ grid-template-columns:1fr; gap:32px; }
}
.form-field{margin-bottom:1.4rem;}
.form-field label{display:block; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.5rem; color:#6b6459;}
.form-field input, .form-field textarea{
  width:100%; padding:.9rem 1rem; border:1px solid var(--line);
  background:var(--paper); font-family:var(--body); font-size:1rem; border-radius:2px;
}
.form-field input:focus, .form-field textarea:focus{outline:2px solid var(--clay); outline-offset:1px;}

/* ---------- Filter pills (Work page) ---------- */
.filters{display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.5rem;}
.filters button{
  font-family:var(--mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em;
  padding:.6rem 1.1rem; border:1px solid var(--line); background:none; border-radius:20px; cursor:pointer;
  transition:.2s;
}
.filters button.active, .filters button:hover{background:var(--ink); color:var(--paper); border-color:var(--ink);}

/* ---------- Blog ---------- */
.post-meta{font-family:var(--mono); font-size:.72rem; color:#6b6459; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.5rem;}

/* Testimonial horizontal scroll */
.testimonial-track{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:12px;
  scrollbar-width:thin;
  scrollbar-color: var(--line) transparent;
}
.testimonial-track::-webkit-scrollbar{height:6px;}
.testimonial-track::-webkit-scrollbar-track{background:transparent;}
.testimonial-track::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;}
.testimonial-card{
  flex:0 0 min(420px, 85vw);
  scroll-snap-align:start;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
}

/* ---------- Scroll reveal ---------- */
[data-reveal]{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-visible{
  opacity:1;
  transform: translateY(0);
}
[data-reveal="fade"]{ transform:none; }
[data-reveal-group] [data-reveal]{ transition-delay: var(--reveal-delay, 0s); }

/* Animated count-up number */
.stats .num{ font-variant-numeric: tabular-nums; }

/* ---------- Lightbox ---------- */
.lightbox-img{cursor: zoom-in;}
.img-wrap{position:relative;}
.img-wrap::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(31,27,24,0.15);
  opacity:0; transition:opacity .25s ease;
  pointer-events:none;
}
.img-wrap:hover::after{opacity:1;}

.lightbox-overlay{
  position:fixed; inset:0; z-index:300;
  background: rgba(20,17,15,0.97);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transition: opacity .3s ease;
}
.lightbox-overlay.open{opacity:1; visibility:visible;}

/* Top bar: close button */
.lightbox-topbar{
  display:flex; justify-content:flex-end; align-items:center;
  padding:12px 16px; flex-shrink:0; height:52px;
}

/* Middle: image area (fills remaining space) */
.lightbox-stage{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
  touch-action:none;
  padding:0 48px;
}
.lightbox-stage img{
  display:block;
  max-width:100%; max-height:100%;
  object-fit:contain;
  opacity:0;
  transition: opacity .3s ease;
  cursor: zoom-in;
  user-select:none;
  -webkit-user-drag:none;
  touch-action:none;
}
.lightbox-overlay.open .lightbox-stage img{opacity:1;}
.lightbox-stage img.zoomed{cursor:grab; transition:opacity .3s ease;}
.lightbox-stage img.dragging{cursor:grabbing; transition:none;}

/* Bottom bar: caption, counter, zoom */
.lightbox-bottombar{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px; flex-shrink:0; height:52px;
}
.lightbox-info{
  display:flex; flex-direction:column; align-items:center;
  flex:1;
}
.lightbox-caption{
  font-family:var(--body); font-size:.85rem;
  color:var(--paper); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:50vw;
}
.lightbox-counter{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  color:rgba(250,247,242,0.6); margin-top:2px;
}

/* Prev/Next arrows — inside the stage */
.lightbox-prev, .lightbox-next{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(250,247,242,0.1);
  border:1px solid rgba(250,247,242,0.3);
  color:var(--paper);
  border-radius:50%;
  width:46px; height:46px;
  font-size:1.4rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
  font-family:var(--body); line-height:1;
  z-index:2;
}
.lightbox-prev:hover, .lightbox-next:hover{background:rgba(250,247,242,0.2); transform:translateY(-50%);}
.lightbox-prev{left:4px;}
.lightbox-next{right:4px;}

/* Close button */
.lightbox-close{
  background:rgba(250,247,242,0.1);
  border:1px solid rgba(250,247,242,0.3);
  color:var(--paper);
  border-radius:50%;
  width:40px; height:40px;
  font-size:1.2rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
  font-family:var(--body); line-height:1;
}
.lightbox-close:hover{background:rgba(250,247,242,0.2);}

/* Zoom controls */
.lightbox-zoom-controls{
  display:flex; gap:.4rem; align-items:center;
}
.lightbox-zoom-controls button{
  background:rgba(250,247,242,0.08);
  border:1px solid rgba(250,247,242,0.3);
  color:var(--paper);
  border-radius:50%;
  width:36px; height:36px;
  font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
  font-family:var(--body);
}
.lightbox-zoom-controls button:hover{background:rgba(250,247,242,0.18);}
.lightbox-zoom-level{
  font-family:var(--mono); font-size:.68rem; color:rgba(250,247,242,0.6);
  padding:0 .3rem; min-width:36px; text-align:center;
}

/* Mobile adjustments */
@media (max-width:640px){
  .lightbox-stage{padding:0 36px;}
  .lightbox-prev, .lightbox-next{width:32px; height:32px; font-size:1rem;}
  .lightbox-prev{left:2px;}
  .lightbox-next{right:2px;}
  .lightbox-caption{font-size:.75rem; max-width:40vw;}
  .lightbox-zoom-controls button{width:30px; height:30px; font-size:.85rem;}
  .lightbox-zoom-level{font-size:.6rem; min-width:28px;}
}

/* ---------- Scroll-to-top ---------- */
.scroll-top{
  position:fixed; bottom:24px; right:24px; z-index:90;
  width:44px; height:44px; border-radius:50%;
  background:var(--ink); color:var(--paper); border:none;
  font-size:1.2rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition: opacity .3s ease, transform .3s ease;
  box-shadow:0 2px 12px rgba(31,27,24,0.2);
}
.scroll-top.show{opacity:1; transform:translateY(0); pointer-events:auto;}
.scroll-top:hover{background:var(--clay);}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
  [data-reveal]{opacity:1 !important; transform:none !important;}
  .lightbox-stage img{transition:none;}
}