/* ===========================================================================
   Zaatini Homes — theme layer over Bootstrap 5.3
   Bootstrap supplies the grid, navbar, dropdowns and utilities.
   This file supplies the brand: gold leaf on charcoal, Marcellus + Jost,
   and the roofline motif taken from the mark.
   =========================================================================== */

:root{
  --ink:#16171B;
  --char:#212328;
  --slate:#33363C;
  --linen:#F3F0E9;
  --stone:#A8A399;
  --gold:#C79A3E;
  --gold-lt:#EBC97A;
  --gold-dp:#8C6A22;

  --gold-leaf:linear-gradient(160deg,#8C6A22 0%,#EBC97A 38%,#C79A3E 62%,#F6E3AE 100%);

  --display:"Marcellus",Georgia,serif;
  --body:"Jost","Helvetica Neue",Arial,sans-serif;

  /* Bootstrap overrides */
  --bs-body-bg:var(--ink);
  --bs-body-color:var(--linen);
  --bs-body-font-family:var(--body);
  --bs-body-font-weight:300;
  --bs-link-color:var(--gold-lt);
  --bs-link-hover-color:var(--gold);
}

body{
  background:var(--ink);
  color:var(--linen);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%}
a{text-decoration:none}
:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px}
.skip{position:absolute;top:.5rem;left:.5rem;z-index:200;background:var(--gold);color:var(--ink);padding:.6rem 1rem}

/* ---------------------------------------------------------------- type */
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.02em;line-height:1.12}
h2{font-size:clamp(1.9rem,3.4vw,3.1rem)}
h3{font-size:clamp(1.15rem,1.4vw,1.4rem);letter-spacing:.06em}
.eyebrow{font-size:.68rem;letter-spacing:.36em;text-transform:uppercase;font-weight:500;color:var(--gold);margin:0 0 1.1rem}
.lede{font-size:clamp(1.05rem,1.3vw,1.28rem);line-height:1.7;color:#E6E1D6}

/* ---------------------------------------------------------------- buttons */
.btn-gold{
  --bs-btn-color:var(--gold-lt);
  --bs-btn-border-color:var(--gold);
  --bs-btn-bg:transparent;
  --bs-btn-hover-color:var(--ink);
  --bs-btn-hover-bg:var(--gold);
  --bs-btn-hover-border-color:var(--gold);
  --bs-btn-focus-shadow-rgb:199,154,62;
  border-radius:0;
  font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  padding:.85em 2.1em;
}
.btn-gold-solid{
  --bs-btn-color:var(--ink);
  --bs-btn-bg:var(--gold);
  --bs-btn-border-color:var(--gold);
  --bs-btn-hover-color:var(--ink);
  --bs-btn-hover-bg:var(--gold-lt);
  --bs-btn-hover-border-color:var(--gold-lt);
  border-radius:0;
  font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  padding:.85em 2.1em;
}
.band-linen .btn-gold{--bs-btn-color:var(--gold-dp);--bs-btn-border-color:var(--gold-dp);--bs-btn-hover-bg:var(--gold-dp);--bs-btn-hover-color:var(--linen)}

/* ---------------------------------------------------------------- roofline */
.roofline{width:104px;height:22px;margin:0 auto 1.4rem;display:block;overflow:visible}
.roofline path{fill:none;stroke:var(--gold);stroke-width:1.1}
.roofline .apex{stroke:var(--gold-lt);stroke-width:1.6}
.section-head{text-align:center;max-width:44rem;margin:0 auto clamp(2.5rem,5vw,4rem)}
.section-head.left{text-align:left;margin-left:0}
.section-head.left .roofline{margin-left:0}
.band-linen .roofline path{stroke:var(--gold-dp)}
.band-linen .roofline .apex{stroke:var(--gold)}

/* ---------------------------------------------------------------- bands */
section{padding:clamp(4.5rem,9vw,8.5rem) 0}
.band-linen{background:var(--linen);color:var(--ink)}
.band-linen .lede{color:#3A3B3E}
.band-char{background:var(--char)}

/* ---------------------------------------------------------------- header / navbar */
.site-head{transition:background .4s,padding .4s,border-color .4s;border-bottom:1px solid transparent;z-index:1030}
.site-head .navbar{padding-top:.6rem;padding-bottom:.6rem}
.site-head.stuck{background:rgba(22,23,27,.94);backdrop-filter:blur(10px);border-bottom-color:rgba(199,154,62,.22)}
.brand{display:flex;align-items:center;gap:.85rem}
.brand img{width:44px;transition:width .4s}
.site-head.stuck .brand img{width:34px}
.brand-name{font-family:var(--display);font-size:.95rem;letter-spacing:.34em;text-transform:uppercase;line-height:1.1;color:var(--linen)}
.brand-name small{display:block;font-family:var(--body);font-size:.55rem;letter-spacing:.42em;color:var(--gold);font-weight:400}

.navbar-dark .navbar-nav .nav-link{
  font-size:.9rem;letter-spacing:.16em;text-transform:uppercase;font-weight:400;
  color:#E9E5DB;padding:.5rem .85rem;position:relative;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link[aria-current="page"]{color:var(--gold-lt)}
/* underline uses ::before — Bootstrap owns ::after on .dropdown-toggle for the caret */
.navbar-nav .nav-link::before{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.2rem;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.navbar-nav .nav-link:hover::before,.navbar-nav .nav-link[aria-current="page"]::before{transform:scaleX(1)}
.navbar-nav .dropdown-toggle::after{border-top-color:var(--gold);margin-left:.45em;vertical-align:.15em}

.dropdown-menu{
  background:rgba(30,32,37,.98);border:1px solid rgba(199,154,62,.28);border-top:2px solid var(--gold);
  border-radius:0;padding:.6rem 0;min-width:19.5rem;
}
.dropdown-item{
  color:#CFCABE;font-size:.88rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.62rem 1.4rem;border-left:2px solid transparent;
}
.dropdown-item:hover,.dropdown-item:focus{background:rgba(199,154,62,.08);color:var(--gold-lt);border-left-color:var(--gold)}
.navbar-toggler{border:1px solid rgba(199,154,62,.5);border-radius:0;padding:.35rem .8rem}
.navbar-toggler:focus{box-shadow:none;outline:2px solid var(--gold-lt)}
.toggler-text{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--linen)}

@media (max-width:1199.98px){
  .navbar-collapse{background:rgba(22,23,27,.99);margin:0 -1rem;padding:1rem 1.5rem 2rem;border-top:1px solid rgba(199,154,62,.2)}
  .navbar-nav .nav-link{font-size:1rem;padding:1rem 0}
  .navbar-nav .nav-link::before{display:none}
  .dropdown-menu{background:none;border:0;padding:0 0 .5rem 1rem;min-width:0}
  .dropdown-item{padding:.5rem 0}
}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:0}
.hero video,.hero .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,23,27,.66) 0%,rgba(22,23,27,.26) 45%,rgba(22,23,27,.82) 100%)}
.hero-inner{position:relative;z-index:2;text-align:center;padding:8rem 1rem 6rem;max-width:52rem}
.hero-mark{width:clamp(78px,9vw,118px);margin:0 auto 1.8rem;display:block}
.hero h1{font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1.08}
.hero h1 em{font-style:normal;background:var(--gold-leaf);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{margin:1.6rem auto 2.4rem;max-width:34rem}
.hero-foot{position:absolute;z-index:2;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;padding:0 1.5rem 1.6rem;font-size:.65rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stone)}
.scroll-hint{width:1px;height:44px;background:linear-gradient(var(--gold),transparent);animation:drop 2.4s infinite}
@keyframes drop{0%{transform:scaleY(.2);transform-origin:top}60%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(.2);transform-origin:top}}
.sound-btn{background:none;border:1px solid rgba(199,154,62,.4);color:var(--stone);font:inherit;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;padding:.5em 1.1em;cursor:pointer}
.sound-btn:hover{color:var(--gold-lt);border-color:var(--gold)}

/* ---------------------------------------------------------------- triptych */
.triptych-wrap{padding:0}
.panel{position:relative;min-height:clamp(22rem,58vh,34rem);display:flex;align-items:flex-end;overflow:hidden;background:var(--char);border-right:1px solid rgba(199,154,62,.3)}
.panel:last-child{border-right:0}
.panel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,23,27,.25),rgba(22,23,27,.85));transition:background .5s}
.panel:hover video{transform:scale(1.05)}
.panel:hover::after{background:linear-gradient(180deg,rgba(22,23,27,.15),rgba(22,23,27,.78))}
.panel-body{position:relative;z-index:2;padding:clamp(1.5rem,2.6vw,2.4rem)}
.panel-body h2{font-size:clamp(1.5rem,2.1vw,2rem);margin-bottom:1.1rem;color:var(--linen)}
.panel-link{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lt);display:inline-flex;align-items:center;gap:.6em}
.panel-link::after{content:"";width:1.6rem;height:1px;background:var(--gold);transition:width .35s}
.panel:hover .panel-link::after{width:2.6rem}

/* ---------------------------------------------------------------- page hero */
.page-hero{position:relative;min-height:clamp(20rem,46vh,30rem);display:grid;align-items:end;padding:clamp(7rem,12vw,9rem) 0 clamp(2.5rem,5vw,4rem);overflow:hidden}
.page-hero img,.page-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,23,27,.78),rgba(22,23,27,.4) 55%,rgba(22,23,27,.88))}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{font-size:clamp(2rem,4.4vw,3.6rem);max-width:20ch}
.page-hero .lede{max-width:44ch;margin-top:1.2rem}
.crumb{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--stone);margin-bottom:1rem}
.crumb a:hover{color:var(--gold-lt)}

/* ---------------------------------------------------------------- statement */
.figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.figure figcaption{margin-top:.9rem;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stone)}
.olive-note{border-left:1px solid rgba(199,154,62,.4);padding-left:1.4rem;margin:2rem 0 0;font-family:var(--display);font-size:1.05rem;line-height:1.6;color:var(--gold-lt)}
.band-linen .olive-note{color:var(--gold-dp);border-color:rgba(140,106,34,.5)}

/* ---------------------------------------------------------------- services */
.service{padding:2.2rem 1.8rem 2.6rem;border-bottom:1px solid rgba(199,154,62,.28);border-right:1px solid rgba(199,154,62,.28);height:100%;transition:background .4s}
.service:hover{background:rgba(199,154,62,.06)}
.service .num{font-size:.62rem;letter-spacing:.24em;color:var(--gold);display:block;margin-bottom:1.2rem;text-transform:uppercase}
.service h3{margin-bottom:.7rem}
.service h3 a{color:inherit;transition:color .3s}
.service h3 a:hover{color:var(--gold)}
.service p{font-size:.92rem;color:var(--stone);margin:0}
.band-linen .service p{color:#5A5B5E}

/* ---------------------------------------------------------------- tiles */
.tile{position:relative;overflow:hidden;display:block;background:var(--slate);aspect-ratio:4/3;height:100%}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.tile:hover img{transform:scale(1.05)}
.tile figcaption{position:absolute;inset:auto 0 0 0;padding:2.6rem 1.5rem 1.3rem;background:linear-gradient(transparent,rgba(18,19,23,.88))}
.tile .kind{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-lt);display:block;margin-bottom:.35rem}
.tile .name{font-family:var(--display);font-size:1.15rem;letter-spacing:.04em;color:var(--linen)}
.tile-flag{position:absolute;z-index:2;top:0;left:0;background:var(--gold);color:var(--ink);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;padding:.4em 1em}
.tile-tall{aspect-ratio:3/4}

/* ---------------------------------------------------------------- gallery */
.shot{overflow:hidden;background:var(--slate);margin:0}
.shot img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.shot:hover img{transform:scale(1.04)}

/* ---------------------------------------------------------------- process */
.step{border-top:1px solid rgba(199,154,62,.35);padding-top:1.3rem;height:100%}
.step .stage{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.8rem}
.step h3{font-size:1.15rem;margin-bottom:.6rem}
.step p{font-size:.9rem;color:var(--stone);margin:0}
.band-linen .step p{color:#5A5B5E}

/* ---------------------------------------------------------------- quote */
.quote{max-width:48rem;margin:0 auto;text-align:center}
.quote blockquote{margin:0;font-family:var(--display);font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.45}
.quote cite{display:block;margin-top:1.6rem;font-style:normal;font-size:.65rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}

/* ---------------------------------------------------------------- film */
.film{margin:0;border:1px solid rgba(199,154,62,.28);background:#000}
.film video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.film figcaption{padding:.9rem 1.2rem;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stone)}

/* ---------------------------------------------------------------- prose */
.prose{max-width:44rem}
.prose h2{margin:2.5rem 0 1rem}
.prose h2:first-child{margin-top:0}
.cta-band{text-align:center}
.cta-band h2{max-width:22ch;margin:0 auto 1.8rem}
.stub{border:1px dashed rgba(199,154,62,.4);padding:1.1rem 1.3rem;font-size:.78rem;color:var(--stone);margin-top:2.5rem}
.stub b{color:var(--gold);font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:.62rem;display:block;margin-bottom:.3rem}

/* ---------------------------------------------------------------- forms */
.form-control,.form-select{
  background:transparent;border:0;border-bottom:1px solid rgba(199,154,62,.35);
  color:var(--linen);border-radius:0;padding:.6rem 0;font-family:var(--body);font-weight:300;
}
.form-control:focus,.form-select:focus{background:transparent;color:var(--linen);border-color:var(--gold-lt);box-shadow:none}
.form-control::placeholder{color:#75726C}
.form-select option{background:var(--char);color:var(--linen)}
.form-label{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stone);margin-bottom:.4rem}
.invalid-feedback{font-size:.75rem;letter-spacing:.06em}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-list{list-style:none;margin:2rem 0 0;padding:0}
.contact-list li{border-top:1px solid rgba(199,154,62,.3);padding:1rem 0}
.contact-list .k{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.3rem}

/* ---------------------------------------------------------------- footer */
.site-foot{background:#101116;padding:clamp(3rem,6vw,5rem) 0 2rem;border-top:1px solid rgba(199,154,62,.2)}
.foot-mark{width:64px;margin-bottom:1.2rem}
.foot-note{color:var(--stone);font-size:.85rem;max-width:24rem}
.foot-head{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;font-family:var(--body);color:var(--gold);margin-bottom:1rem}
.foot-list{list-style:none;margin:0;padding:0}
.foot-list li{margin-bottom:.5rem;font-size:.85rem;color:var(--stone)}
.foot-list a{color:var(--stone)}
.foot-list a:hover{color:var(--gold-lt)}
.legal{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.7rem;color:#6B6862}
.legal a{color:#6B6862}
.legal a:hover{color:var(--gold-lt)}

/* ---------------------------------------------------------------- reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ---------------------------------------------------------------- admin */
.admin-body{background:var(--linen);color:#242529}
.admin-body .navbar{background:var(--ink);border-bottom:2px solid var(--gold)}
.admin-wrap{padding:6rem 0 4rem}
.admin-body .card{border:1px solid #DCD7CC;border-radius:0;background:#fff}
.admin-body .table{--bs-table-bg:#fff;font-size:.9rem}
.admin-body .table thead th{background:var(--ink);color:var(--linen);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.admin-body .form-control,.admin-body .form-select{background:#fff;color:#242529;border:1px solid #CFC9BC;padding:.5rem .7rem}
.admin-body .form-control:focus,.admin-body .form-select:focus{color:#242529;border-color:var(--gold)}
.admin-body .form-label{color:#5A5B5E;font-size:.65rem}
.admin-body h1{font-size:1.8rem}
.admin-body .btn-gold{--bs-btn-color:var(--gold-dp);--bs-btn-border-color:var(--gold-dp);--bs-btn-hover-bg:var(--gold-dp);--bs-btn-hover-color:#fff}
.status-pill{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:.25em .8em;border:1px solid currentColor}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}