/* Zapata Custom Cabinets - concept mockup
   Palette is the prospect's own Wix theme palette (cream / sand / brown / caramel)
   plus the black of their ZCC logo tile, deepened to a warm ink.
   Design language: Earthy Organic (spacing, rhythm, motion only).
   Display: Crete Round. Body: Hind. Both centrally assigned. */

:root{
  --ink:            #14100c;
  --ink-2:          #1e1813;
  --ink-3:          #2a221b;
  --cream:          #fff8f1;
  --linen:          #f6ebdd;
  --sand:           #e0be9a;
  --brown:          #5b4d43;
  --caramel:        #a2672d;
  --caramel-deep:   #8a5623;
  --caramel-press:  #6f451c;
  --caramel-light:  #c98a45;

  --on-dark:        #f2e7d9;
  --on-dark-mute:   rgba(242,231,217,0.74);
  --on-light:       #241d16;
  --on-light-mute:  #5b4d43;

  --line-dark:      rgba(224,190,154,0.22);
  --line-light:     rgba(91,77,67,0.22);

  --font-display:   'Crete Round', Georgia, 'Times New Roman', serif;
  --font-body:      'Hind', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --wrap:           min(90%, 1100px);
  --wrap-wide:      min(94%, 1440px);
  --nav-h:          78px;
  --pad-y:          clamp(3.5rem, 7vw, 5.5rem);
  --ease:           cubic-bezier(0.22, 1, 0.36, 1);
  --radius:         14px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--cream);
  color:var(--on-light);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-0.02em;
  margin:0;
}
p{ margin:0; }
ol,ul{ margin:0; padding:0; list-style:none; }

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--on-dark);
  padding:.85rem 1.25rem; z-index:400; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--caramel-light); outline-offset:3px; }

/* ---------- shared layout ---------- */

.wrap{ width:var(--wrap); margin-inline:auto; }

.wrap--labelled{
  display:grid;
  grid-template-columns:minmax(0,140px) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3.25rem);
  align-items:start;
}

.section{ padding-block:var(--pad-y); }
section[id]{ scroll-margin-top:calc(var(--nav-h) + 1rem); }
.section--cream{ background:var(--cream); }
.section--linen{ background:var(--linen); }
.section--ink{ background:var(--ink); color:var(--on-dark); }
.section--ink p{ color:var(--on-dark-mute); }

.kicker{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--caramel-deep);
  margin:0;
  padding-top:.55rem;
  position:relative;
}
.kicker::before{
  content:"";
  position:absolute; top:0; left:0;
  width:34px; height:2px;
  background:var(--caramel-deep);
}
.kicker--dark{ color:var(--sand); }
.kicker--dark::before{ background:var(--sand); }

h2{ font-size:clamp(1.85rem,3.4vw,2.9rem); line-height:1.14; }
h3{ font-size:clamp(1.25rem,1.9vw,1.6rem); line-height:1.2; }

.section--ink h2, .section--ink h3{ color:var(--on-dark); }

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding:.85rem 1.15rem .85rem 1.4rem;
  border-radius:5px;
  font-family:var(--font-body);
  font-size:.9375rem;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1;
  text-decoration:none;
  min-height:48px;
  transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn--solid{
  background:var(--caramel-deep);
  color:var(--cream);
  border:1px solid var(--caramel-deep);
}
.btn--solid:hover{ background:var(--caramel-press); border-color:var(--caramel-press); }
.btn--solid:active{ transform:translateY(1px); }
.btn__chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,248,241,0.18);
}
.btn__chip svg{ width:15px; height:15px; }
.btn--ghost{
  background:transparent;
  color:var(--sand);
  border:1px solid var(--line-dark);
  padding-inline:1.4rem;
}
.btn--ghost:hover{ border-color:var(--sand); color:var(--cream); }

/* ---------- nav ---------- */

.nav{
  position:fixed; inset:0 0 auto 0;
  z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:transparent;
  transition:background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.nav::before{
  content:"";
  position:absolute; inset:0 0 -46px 0;
  background:linear-gradient(to bottom, rgba(20,16,12,0.9) 0%, rgba(20,16,12,0.62) 58%, rgba(20,16,12,0) 100%);
  pointer-events:none;
  transition:opacity .4s var(--ease);
}
.nav.is-solid{
  background:var(--ink);
  box-shadow:0 12px 34px -22px rgba(0,0,0,.85);
}
.nav.is-solid::before{ opacity:0; }
.nav__inner{
  position:relative; z-index:1;
  width:var(--wrap-wide);
  margin-inline:auto;
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
}
.nav__brand{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:.7rem;
  text-decoration:none; color:var(--cream);
  padding-block:.4rem;
}
.nav__mark{
  font-family:var(--font-display);
  font-size:1.28rem; line-height:1; letter-spacing:.02em;
}
.nav__rule{ width:1px; height:20px; background:var(--sand); opacity:.5; }
.nav__sub{
  font-size:.64rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sand); line-height:1.3; max-width:6.4em;
}
.nav__links{
  margin-left:auto;
  display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem);
}
.nav__links a{
  font-size:.9375rem; font-weight:500; letter-spacing:.01em;
  color:var(--on-dark); text-decoration:none;
  padding-block:.5rem;
  transition:color .3s var(--ease);
}
.nav__links a:hover{ color:var(--sand); }
.nav__cta{ flex:0 0 auto; }

.burger{
  display:none;
  width:46px; height:46px;
  margin-left:auto;
  background:transparent; border:1px solid var(--line-dark); border-radius:6px;
  padding:0; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{
  display:block; width:19px; height:1.5px; background:var(--on-dark);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}

/* ---------- mobile drawer ---------- */

.drawer{
  position:fixed; inset:0;
  z-index:200;
  visibility:hidden;
  pointer-events:none;
  background:rgba(10,8,6,0.62);
  opacity:0;
  transition:opacity .35s var(--ease), visibility 0s linear .35s;
}
.drawer.is-open{
  visibility:visible; opacity:1; pointer-events:auto;
  transition:opacity .35s var(--ease), visibility 0s;
}
.drawer__panel{
  position:absolute; inset:0 0 0 auto;
  width:min(92vw, 420px);
  background:var(--ink-2);
  padding:calc(var(--nav-h) + 1rem) clamp(1.5rem,6vw,2.5rem) 2.5rem;
  display:flex; flex-direction:column; gap:2rem;
  transform:translateX(100%);
  transition:transform .4s var(--ease);
  overflow-y:auto;
}
.drawer.is-open .drawer__panel{ transform:translateX(0); }
.drawer__close{
  position:absolute; top:16px; right:clamp(1.5rem,6vw,2.5rem);
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-dark); border-radius:6px;
  color:var(--on-dark); cursor:pointer;
}
.drawer__close svg{ width:20px; height:20px; }
.drawer__links{ display:flex; flex-direction:column; }
.drawer__links a{
  font-family:var(--font-display);
  font-size:1.65rem;
  color:var(--on-dark);
  text-decoration:none;
  padding-block:.7rem;
  border-bottom:1px solid var(--line-dark);
}
.drawer__foot{ display:flex; flex-direction:column; gap:.35rem; font-size:.95rem; color:var(--on-dark-mute); }
.drawer__foot a{ color:var(--sand); text-decoration:none; padding-block:.4rem; }

/* ---------- hero ---------- */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr);
  background:var(--ink);
  color:var(--on-dark);
}
.hero__text{
  display:flex; flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(1.1rem,2vw,1.6rem);
  padding:calc(var(--nav-h) + clamp(2rem,5vw,3.5rem)) clamp(1.75rem,5vw,5rem) clamp(3rem,6vw,4.5rem);
}
.hero h1{
  font-size:clamp(2.3rem,5vw,4.05rem);
  line-height:1.05;
  max-width:15ch;
  color:var(--cream);
}
.hero__sub{
  font-size:clamp(1.03rem,1.35vw,1.18rem);
  line-height:1.66;
  color:var(--on-dark-mute);
  max-width:46ch;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.4rem; }
.hero__media{ position:relative; overflow:hidden; }
.hero__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:58% 42%;
}
.hero__media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(20,16,12,0.72) 0%, rgba(20,16,12,0.22) 26%, rgba(20,16,12,0) 50%);
  pointer-events:none;
}
.hero__tag{
  position:absolute; left:0; bottom:0;
  z-index:2;
  background:var(--ink);
  color:var(--sand);
  font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  padding:.7rem 1.1rem;
  max-width:100%;
}

/* ---------- story ---------- */

.story{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:center;
}
.story__text{ display:flex; flex-direction:column; gap:1.1rem; }
.story__text h2{ margin-bottom:.35rem; max-width:18ch; }
.story__text p{ color:var(--on-light-mute); max-width:62ch; }
.story__media{ margin:0; }
.story__media img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  border-radius:var(--radius);
}

/* ---------- full-bleed band ---------- */

.band{
  position:relative;
  height:clamp(280px,52vh,560px);
  overflow:hidden;
  background:var(--ink);
}
.band img{
  width:100%; height:118%;
  object-fit:cover; object-position:center 40%;
  will-change:transform;
}
.band__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:clamp(1rem,3vw,2rem) clamp(1.5rem,5vw,3rem);
  background:linear-gradient(to top, rgba(20,16,12,0.86), rgba(20,16,12,0));
  color:var(--on-dark);
  font-size:.95rem;
  letter-spacing:.01em;
}

/* ---------- work ---------- */

#work .wrap--labelled{ width:min(93%, 1320px); }
.work{ display:flex; flex-direction:column; gap:clamp(2.75rem,6vw,4.5rem); }
.work__lead h2{ max-width:16ch; }
.work__item{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,3.5vw,3rem);
  align-items:center;
}
.work__item--flip .work__media{ order:2; }
.work__media{ margin:0; }
.work__media img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius);
}
.work__item--flip .work__media img{ aspect-ratio:3/4; }
.work__body{ display:flex; flex-direction:column; gap:1rem; }
.work__body p{ max-width:52ch; }
.work__aside{
  padding-top:1rem;
  border-top:1px solid var(--line-dark);
  font-size:.98rem;
}

/* ---------- details / the drawer row ---------- */

.details{ display:flex; flex-direction:column; gap:clamp(2rem,4.5vw,3.25rem); }
.details__text{ display:flex; flex-direction:column; gap:1.1rem; }
.details__text h2{ max-width:17ch; }
.details__text p{ color:var(--on-light-mute); max-width:66ch; }

.drawers{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(.85rem,1.8vw,1.4rem);
  align-items:start;
}
.drawer-panel{
  margin:0;
  position:relative;
  padding-top:22px;
  will-change:transform;
}
.drawer-panel__pull{
  position:absolute; top:6px; left:50%;
  transform:translateX(-50%);
  width:46px; height:4px;
  border-radius:2px;
  background:var(--caramel);
  opacity:.75;
}
.drawer-panel img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  border-radius:var(--radius);
}
.drawer-panel figcaption{
  margin-top:.85rem;
  font-size:.92rem;
  line-height:1.55;
  color:var(--on-light-mute);
}

/* ---------- materials ---------- */

.materials{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,0.8fr);
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:center;
}
.materials__text{ display:flex; flex-direction:column; gap:1.1rem; }
.materials__text h2{ max-width:16ch; }
.materials__text p{ max-width:58ch; }
.materials__swatch{ margin:0; }
.materials__swatch img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--radius);
}

/* ---------- process ---------- */

.process h2{ margin-bottom:clamp(1.5rem,3vw,2.25rem); max-width:14ch; }
.step{
  display:grid;
  grid-template-columns:minmax(0,3rem) minmax(0,1fr);
  gap:clamp(1rem,2vw,1.75rem);
  padding-block:clamp(1.15rem,2.4vw,1.6rem);
  border-top:1px solid var(--line-light);
}
.step:last-child{ border-bottom:1px solid var(--line-light); }
.step__num{
  font-family:var(--font-display);
  font-size:1.5rem;
  line-height:1.25;
  color:var(--caramel-deep);
}
.step h3{ margin-bottom:.3rem; }
.step p{ color:var(--on-light-mute); max-width:58ch; }

/* ---------- contact ---------- */

.contact{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:center;
}
.contact__text{ display:flex; flex-direction:column; gap:1.15rem; align-items:flex-start; }
.contact__text h2{ max-width:12ch; }
.contact__text > p{ max-width:48ch; }
.contact__rows{ width:100%; display:flex; flex-direction:column; margin-block:.35rem; }
.contact__row{
  display:grid;
  grid-template-columns:minmax(0,5.5rem) minmax(0,1fr);
  gap:1rem;
  align-items:baseline;
  padding-block:.9rem;
  border-top:1px solid var(--line-dark);
  text-decoration:none;
  transition:color .3s var(--ease);
}
.contact__rows .contact__row:last-child{ border-bottom:1px solid var(--line-dark); }
.contact__label{
  font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sand);
}
.contact__value{ font-size:1.02rem; color:var(--on-dark); line-height:1.5; }
a.contact__row:hover .contact__value{ color:var(--caramel-light); }
.contact__media{ margin:0; }
.contact__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--radius);
}

/* ---------- footer ---------- */

.footer{
  background:var(--ink-2);
  color:var(--on-dark);
  padding-top:clamp(2.75rem,5vw,4rem);
  padding-bottom:1.75rem;
}
.footer__grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.7fr) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3rem);
  padding-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--line-dark);
}
.footer__brand img{ width:auto; height:104px; max-width:160px; object-fit:contain; border-radius:10px; }
.footer__brand p{ margin-top:1rem; color:var(--on-dark-mute); font-size:.95rem; max-width:34ch; }
.footer__nav{ display:flex; flex-direction:column; }
.footer__nav a{ text-decoration:none; font-size:.95rem; padding-block:.5rem; color:var(--on-dark-mute); }
.footer__nav a:hover{ color:var(--sand); }
.footer__contact{ display:flex; flex-direction:column; font-size:.95rem; color:var(--on-dark-mute); gap:.15rem; }
.footer__contact a{ color:var(--sand); text-decoration:none; padding-block:.35rem; }
.footer__contact p{ padding-block:.35rem; color:var(--on-dark-mute); }
.footer__base{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-top:1.5rem;
  font-size:.85rem;
  color:var(--on-dark-mute);
}

/* ---------- motion ---------- */

html.js [data-anim]{ opacity:0; transform:translateY(18px); }
html.no-js [data-anim]{ opacity:1; transform:none; }

/* ---------- responsive ---------- */

@media (max-width:1080px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .burger{ display:flex; }
  .wrap--labelled{ grid-template-columns:1fr; gap:1.25rem; }
}

@media (max-width:900px){
  .hero{
    grid-template-columns:1fr;
    min-height:0;
    height:auto;
  }
  .hero__text{
    padding-top:calc(var(--nav-h) + clamp(2.25rem,9vw,3.5rem));
    padding-bottom:clamp(2.25rem,7vw,3rem);
    order:1;
  }
  .hero h1{ max-width:none; }
  .hero__media{ order:2; height:clamp(320px,58svh,520px); }
  .hero__media::after{
    background:linear-gradient(to top, rgba(20,16,12,0.55) 0%, rgba(20,16,12,0) 45%);
  }
  .story,
  .work__item,
  .work__item--flip,
  .materials,
  .contact{ grid-template-columns:1fr; }
  .work__item--flip .work__media{ order:0; }
  .work__media img,
  .work__item--flip .work__media img,
  .story__media img,
  .contact__media img{ aspect-ratio:4/3; }
  .materials__swatch img{ aspect-ratio:16/9; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}

@media (max-width:620px){
  body{ font-size:1.0625rem; }
  .nav__mark{ font-size:1.12rem; }
  .nav__sub{ font-size:.58rem; letter-spacing:.16em; }
  .drawers{ grid-template-columns:1fr; gap:1.75rem; }
  .drawer-panel{ transform:none !important; }
  .drawer-panel img{ aspect-ratio:4/3; }
  .contact__row{ grid-template-columns:1fr; gap:.2rem; }
  .footer__grid{ grid-template-columns:1fr; }
  .footer__nav a,
  .footer__contact a{ padding-block:0.65rem; }
  .hero__cta .btn{ width:100%; justify-content:space-between; }
}

@media (prefers-reduced-motion:reduce){
  html.js [data-anim]{ opacity:1 !important; transform:none !important; }
  .drawer-panel{ transform:none !important; }
  .band img{ transform:none !important; height:100%; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}