/* ============================================================
   MAYA STUCCO INC.
   Palette sampled from the client's existing site:
   warm charcoal panels, muted antique-gold accent, white type.
   ============================================================ */

:root{
  --ink:       #2B2A28;   /* warm charcoal — dark panels, headings */
  --ink-2:     #3A3733;   /* raised surface on dark */
  --body:      #55534E;   /* body copy on light */

  --bg:        #F7F6F4;   /* page */
  --paper:     #FFFFFF;   /* cards, header, elevated surfaces */
  --bg-3:      #EDEAE5;   /* image placeholders, quiet fills */

  --gold:      #A6947E;   /* the brand accent — buttons, rules */
  --gold-deep: #6E5A3C;   /* accessible gold for text on light */
  --gold-lit:  #C6B7A2;   /* gold on dark grounds */

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --r-sm: 12px;
  --r:    20px;
  --r-lg: 30px;
  --pill: 999px;

  --shadow-sm: 0 1px 2px rgba(43,42,40,.05), 0 4px 14px rgba(43,42,40,.06);
  --shadow-md: 0 2px 6px rgba(43,42,40,.06), 0 18px 44px rgba(43,42,40,.11);

  --gutter: clamp(1.125rem, 4.5vw, 4.5rem);
  --max: 1300px;
  --hairline: 1px solid rgba(43,42,40,.11);
  --ease: cubic-bezier(.2,.8,.25,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:110px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--font-body);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* fine plaster grain */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:9998;
  opacity:.38;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0; font-weight:700; line-height:1.05;
  letter-spacing:-.028em;
  font-variation-settings:"wdth" 108;
}

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- scroll progress ---------- */
.progress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  transform:scaleX(0); transform-origin:left;
  background:var(--gold); z-index:200;
}

/* ---------- type utilities ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:.6875rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 1.5rem;
  background:rgba(166,148,126,.14);
  border:1px solid rgba(166,148,126,.35);
  padding:.5rem 1rem; border-radius:var(--pill);
}
.eyebrow--onDark{
  color:var(--gold-lit); background:rgba(198,183,162,.12); border-color:rgba(198,183,162,.32);
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }

.h-sec{ font-size:clamp(1.875rem, 1.25rem + 2.8vw, 3.375rem); max-width:20ch; }
.lede{ font-size:clamp(1.0625rem, 1rem + .35vw, 1.25rem); max-width:56ch; margin:1.5rem 0 0; }

/* ---------- signature: a struck gold rule ---------- */
.chalkline{
  height:3px; border-radius:var(--pill); background:var(--gold);
  transform:scaleX(0); transform-origin:left center;
  animation:snap .85s var(--ease) .35s forwards;
}
@keyframes snap{ to{ transform:scaleX(1); } }
@media (prefers-reduced-motion: reduce){ .chalkline{ transform:scaleX(1); animation:none; } }

.divider{ display:flex; align-items:center; gap:1rem; margin-bottom:clamp(2rem,4vw,3rem); }
.divider span{
  font-family:var(--font-mono); font-size:.6875rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); white-space:nowrap;
}
.divider::after{ content:""; flex:1; height:1px; background:rgba(43,42,40,.14); }
.divider--onDark span{ color:var(--gold-lit); }
.divider--onDark::after{ background:rgba(255,255,255,.16); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:54px; padding:0 1.9rem; border-radius:var(--pill);
  font-family:var(--font-mono); font-size:.8125rem;
  letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn--primary{ background:var(--gold); color:var(--ink); box-shadow:0 6px 20px rgba(110,90,60,.22); }
.btn--primary:hover{ background:#8E7C66; color:#fff; transform:translateY(-2px); box-shadow:0 10px 28px rgba(110,90,60,.3); }
.btn--ghost{ border-color:rgba(43,42,40,.26); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--ink); background:var(--ink); color:#fff; transform:translateY(-2px); }
.btn--onDark{ border-color:rgba(255,255,255,.32); color:#fff; background:rgba(255,255,255,.06); backdrop-filter:blur(8px); }
.btn--onDark:hover{ background:#fff; color:var(--ink); border-color:#fff; transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

:focus-visible{ outline:3px solid var(--gold-deep); outline-offset:3px; border-radius:4px; }

.skip{ position:absolute; left:-9999px; top:0; z-index:300; background:var(--ink); color:#fff; padding:1rem 1.5rem; border-radius:0 0 var(--r-sm) 0; font-family:var(--font-mono); font-size:.8125rem; }
.skip:focus{ left:0; }

/* ============================================================
   FLOATING HEADER
   ============================================================ */
.site-header{ position:sticky; top:0; z-index:120; padding:.85rem 0; }
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  min-height:66px; padding:.5rem .5rem .5rem 1.5rem;
  background:rgba(255,255,255,.76);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border:1px solid rgba(43,42,40,.09);
  border-radius:var(--pill);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.stuck .header-inner{ background:rgba(255,255,255,.94); box-shadow:var(--shadow-md); }

.brand{ display:flex; align-items:baseline; gap:.7rem; text-decoration:none; }
.brand strong{
  font-family:var(--font-display); font-variation-settings:"wdth" 116;
  font-weight:800; font-size:1.0625rem; letter-spacing:0;
  text-transform:uppercase; color:var(--ink);
}
.brand em{
  font-family:var(--font-mono); font-style:normal; font-size:.5938rem;
  letter-spacing:.1em; color:var(--gold-deep); white-space:nowrap;
}
.nav-desktop{ display:flex; align-items:center; gap:.35rem; }
.nav-desktop a{
  font-family:var(--font-mono); font-size:.75rem;
  letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  padding:.6rem .9rem; border-radius:var(--pill);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.nav-desktop a:hover{ background:rgba(166,148,126,.18); color:var(--gold-deep); }
.header-cta{ display:flex; align-items:center; gap:.6rem; }
.header-phone{ font-family:var(--font-mono); font-size:.8125rem; text-decoration:none; color:var(--ink); white-space:nowrap; padding:.5rem .6rem; }
.header-phone:hover{ color:var(--gold-deep); }

.burger{
  display:none; width:48px; height:48px; border-radius:var(--pill);
  background:var(--ink); border:none; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; padding:0;
}
.burger span{ display:block; height:2px; width:20px; border-radius:2px; background:#fff; margin-inline:auto; transition:transform .3s var(--ease), opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:110;
  background:var(--bg);
  padding:7rem var(--gutter) 3rem;
  display:flex; flex-direction:column; overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.drawer.open{ opacity:1; visibility:visible; transform:none; }
.drawer a{
  font-family:var(--font-display); font-variation-settings:"wdth" 112;
  font-weight:700; font-size:1.75rem; color:var(--ink); letter-spacing:-.02em;
  text-decoration:none; padding:.85rem 0; border-bottom:var(--hairline);
}
.drawer-actions{ display:grid; gap:.7rem; margin-top:2rem; }
.drawer-meta{ margin-top:auto; padding-top:2rem; font-family:var(--font-mono); font-size:.75rem; color:var(--body); line-height:2; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:0 var(--gutter) clamp(1rem,2vw,1.5rem); }
.hero-card{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg); background:var(--ink); color:#fff;
  max-width:var(--max); margin-inline:auto;
  box-shadow:var(--shadow-md);
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.5; filter:grayscale(.15) contrast(1.04); }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(166,148,126,.26) 0%, transparent 55%),
    linear-gradient(180deg, rgba(43,42,40,.66) 0%, rgba(43,42,40,.5) 42%, rgba(43,42,40,.95) 100%);
}
.hero-inner{
  position:relative; z-index:2;
  padding:clamp(3.5rem,9vh,6rem) clamp(1.5rem,4.5vw,4.5rem) clamp(3rem,7vh,4.5rem);
  min-height:clamp(540px, 82svh, 800px);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.hero h1{
  color:#fff; font-size:clamp(2.375rem, 1.3rem + 5.1vw, 5.25rem);
  font-weight:800; font-variation-settings:"wdth" 104;
  letter-spacing:-.038em; max-width:16ch;
}
.hero .chalkline{ width:min(400px,55%); margin:1.75rem 0 1.5rem; }
.hero p{ color:rgba(255,255,255,.8); font-size:clamp(1.0625rem,1rem + .45vw,1.3125rem); max-width:54ch; margin:0; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem; }

/* ---------- credentials ticker ---------- */
.ticker{ overflow:hidden; padding-block:1.1rem; border-block:var(--hairline); background:var(--paper); }
.ticker-track{ display:flex; width:max-content; gap:0; animation:slide 38s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker ul{ display:flex; list-style:none; margin:0; padding:0; }
.ticker li{
  display:flex; align-items:center; gap:.8rem; padding-inline:1.6rem;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap;
}
.ticker li::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; width:100%; }
  .ticker ul{ flex-wrap:wrap; gap:.4rem 0; }
  .ticker ul:nth-child(2){ display:none; }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ padding-block:clamp(4rem, 8vw, 7.5rem); }
.section--surface{ background:var(--paper); }
.section--dark{ position:relative; background:var(--ink); color:rgba(255,255,255,.74); overflow:hidden; }
.section--dark::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 60% at 15% 0%, rgba(166,148,126,.2) 0%, transparent 60%);
}
.section--dark > *{ position:relative; z-index:1; }
.section--dark h2,.section--dark h3{ color:#fff; }
.section--round{ border-radius:var(--r-lg); margin-inline:var(--gutter); }

.sec-head{
  display:grid; gap:1.25rem clamp(2rem,6vw,5rem);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:end; margin-bottom:clamp(2.5rem,5vw,4rem);
}

/* ---------- cards ---------- */
.card{
  background:var(--paper);
  border:1px solid rgba(43,42,40,.09);
  border-radius:var(--r);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--gold); }
.section--surface .card{ background:var(--bg); }

/* ---------- services ---------- */
.services{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.85rem,1.4vw,1.25rem); }
.svc{ padding:clamp(1.6rem,2.6vw,2.25rem); }
.svc h3{ font-size:1.25rem; font-variation-settings:"wdth" 108; margin-bottom:.75rem; }
.svc p{ margin:0; font-size:.9688rem; }
.svc-key{
  display:inline-block; font-family:var(--font-mono); font-size:.625rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gold-deep);
  background:rgba(166,148,126,.16); padding:.35rem .75rem;
  border-radius:var(--pill); margin-bottom:1.4rem;
}

/* ---------- process ---------- */
.coats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.85rem,1.4vw,1.25rem); }
.coat{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r); padding:clamp(1.5rem,2.4vw,2rem);
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.coat:hover{ background:rgba(166,148,126,.14); border-color:var(--gold); transform:translateY(-4px); }
.coat b{
  display:block; font-family:var(--font-display); font-variation-settings:"wdth" 100;
  font-weight:800; font-size:2.25rem; letter-spacing:-.04em;
  color:rgba(198,183,162,.62); margin-bottom:1.25rem; line-height:1;
}
.coat h3{ font-size:1.125rem; font-variation-settings:"wdth" 108; margin-bottom:.65rem; }
.coat p{ margin:0; font-size:.9375rem; line-height:1.62; }

/* ---------- bento gallery ---------- */
.gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.65rem,1.1vw,1rem); }
.gallery figure{ margin:0; overflow:hidden; border-radius:var(--r); background:var(--bg-3); position:relative; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.gallery figure::after{
  content:""; position:absolute; inset:0; border-radius:var(--r);
  box-shadow:inset 0 0 0 1px rgba(43,42,40,.09); pointer-events:none;
}
.gallery figure:hover img{ transform:scale(1.05); }
.g-tall{ grid-column:span 4; aspect-ratio:3/4; }
.g-wide{ grid-column:span 8; aspect-ratio:3/2; }
.g-banner{ grid-column:span 12; aspect-ratio:3/1; }

/* ---------- about ---------- */
.about{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.about-img{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-lg); background:var(--bg-3); box-shadow:var(--shadow-md); }
.about-img img{ width:100%; height:100%; object-fit:cover; }
.pledge{ list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:.6rem; }
.pledge li{
  display:flex; gap:.9rem; align-items:center;
  background:var(--bg); border:1px solid rgba(43,42,40,.09);
  border-radius:var(--pill); padding:.85rem 1.35rem;
  font-family:var(--font-display); font-variation-settings:"wdth" 106;
  font-weight:600; font-size:1rem; color:var(--ink);
}
.pledge li::before{
  content:"✓"; flex:none; width:24px; height:24px; border-radius:50%;
  background:var(--gold); color:var(--ink); font-family:var(--font-body);
  font-size:.75rem; display:grid; place-items:center;
}

/* ---------- testimonials ---------- */
.quotes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.85rem,1.4vw,1.25rem); max-width:900px; margin-inline:auto; }
.quote{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r); padding:clamp(1.5rem,2.4vw,2rem);
}
.quote::before{
  content:"”"; display:block; font-family:var(--font-display); font-weight:800;
  font-size:3rem; line-height:.6; color:var(--gold-lit); margin-bottom:1.25rem;
}
.quote blockquote{
  margin:0 0 1.5rem;
  font-family:var(--font-display); font-variation-settings:"wdth" 102;
  font-weight:500; font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);
  line-height:1.45; color:#fff; letter-spacing:-.015em;
}
.quote cite{ font-family:var(--font-mono); font-style:normal; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.58); }

/* ---------- service areas ---------- */
.areas{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.area-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.area-list li{
  background:var(--paper); border:1px solid rgba(43,42,40,.11);
  border-radius:var(--pill); padding:.7rem 1.25rem;
  font-family:var(--font-mono); font-size:.8125rem; color:var(--ink);
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.area-list li:hover{ border-color:var(--gold); color:var(--gold-deep); transform:translateY(-2px); }

/* ---------- FAQ ---------- */
.faq{ max-width:860px; display:grid; gap:.7rem; }
.faq details{
  background:var(--bg); border:1px solid rgba(43,42,40,.09);
  border-radius:var(--r); overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq details[open]{ border-color:var(--gold); box-shadow:var(--shadow-sm); }
.faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1.35rem 3.6rem 1.35rem 1.6rem;
  font-family:var(--font-display); font-variation-settings:"wdth" 106;
  font-weight:600; font-size:clamp(1rem,.96rem + .3vw,1.125rem);
  color:var(--ink); line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after,
.faq summary::before{
  content:""; position:absolute; right:1.6rem; top:50%;
  width:13px; height:2px; border-radius:2px; background:var(--gold-deep);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.faq summary::before{ transform:rotate(90deg); }
.faq details[open] summary::before{ opacity:0; transform:rotate(0deg); }
.faq details p{ margin:0; padding:0 1.6rem 1.6rem; max-width:64ch; font-size:.9688rem; }
.faq summary:hover{ color:var(--gold-deep); }

/* ---------- contact ---------- */
.contact{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,4.5rem); }
.contact-details dl{ margin:2.25rem 0 0; display:grid; gap:.6rem; }
.contact-details .row{
  background:var(--paper); border:1px solid rgba(43,42,40,.09);
  border-radius:var(--r); padding:1.1rem 1.4rem;
}
.contact-details dt{
  font-family:var(--font-mono); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-deep); margin-bottom:.35rem;
}
.contact-details dd{
  margin:0; font-family:var(--font-display); font-variation-settings:"wdth" 106;
  font-weight:600; font-size:1.0625rem; color:var(--ink); font-style:normal;
}
.contact-details dd a{ text-decoration:none; }
.contact-details dd a:hover{ color:var(--gold-deep); }
.contact-details dd span{ display:block; font-family:var(--font-body); font-weight:400; font-size:.9063rem; color:var(--body); margin-top:.15rem; }
.contact-details address{ font-style:normal; }

.form-card{ background:var(--paper); border:1px solid rgba(43,42,40,.09); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.5rem); box-shadow:var(--shadow-sm); }
form{ display:grid; gap:1rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
label{ font-family:var(--font-mono); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); display:block; margin-bottom:.45rem; }
input,select,textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--bg); border:1px solid rgba(43,42,40,.18);
  padding:.85rem 1.05rem; min-height:52px; border-radius:var(--r-sm);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  -webkit-appearance:none; appearance:none;
}
select{ background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 21px) 24px,calc(100% - 15px) 24px; background-size:6px 6px; background-repeat:no-repeat; }
textarea{ min-height:132px; resize:vertical; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--gold-deep); background:#fff; box-shadow:0 0 0 4px rgba(166,148,126,.24); }
.form-note{ font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.04em; color:var(--body); margin:0; }
form .btn{ justify-self:start; margin-top:.25rem; }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.6); padding-block:clamp(3rem,5vw,4.5rem) 2.25rem; margin-top:clamp(2rem,4vw,3rem); }
.footer-top{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr); gap:2.5rem clamp(2rem,5vw,4rem); padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.13); }
.footer-top p{ margin:1.1rem 0 0; max-width:46ch; font-size:.9375rem; }
.footer-brand strong{ font-family:var(--font-display); font-variation-settings:"wdth" 116; font-weight:800; font-size:1.25rem; text-transform:uppercase; color:#fff; }
.footer-col h3{ font-family:var(--font-mono); font-size:.625rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-lit); margin-bottom:1.1rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.footer-col a{ font-size:.9375rem; text-decoration:none; color:rgba(255,255,255,.74); transition:color .2s ease; }
.footer-col a:hover{ color:var(--gold-lit); }
.footer-nap{ font-style:normal; font-size:.9375rem; line-height:1.9; }
.footer-nap a{ text-decoration:none; color:rgba(255,255,255,.74); }
.footer-bottom{ padding-top:1.75rem; display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between; font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase; }

/* ---------- floating mobile action bar ---------- */
.actionbar{
  display:none; position:fixed; left:.75rem; right:.75rem;
  bottom:calc(.75rem + env(safe-area-inset-bottom)); z-index:105;
  gap:.5rem; padding:.45rem;
  background:rgba(43,42,40,.88);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--pill);
  box-shadow:0 10px 32px rgba(43,42,40,.32);
}
.actionbar a{ flex:1; min-height:48px; font-size:.75rem; padding:0 1rem; }
.actionbar .btn--ghost{ border-color:rgba(255,255,255,.3); color:#fff; }
.actionbar .btn--ghost:hover{ background:#fff; color:var(--ink); }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .gallery img,.card,.coat,.btn{ transition:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .services{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .coats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .areas{ grid-template-columns:1fr; }
  .g-tall{ grid-column:span 4; }
  .g-wide{ grid-column:span 8; }
  .g-banner{ aspect-ratio:5/2; }
}

@media (max-width:900px){
  .nav-desktop,.header-phone,.nav-desktop-cta{ display:none; }
  .burger{ display:flex; }
  .sec-head{ grid-template-columns:1fr; align-items:start; }
  .about{ grid-template-columns:1fr; }
  .about-img{ order:-1; }
  .quotes{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .actionbar{ display:flex; }
  body{ padding-bottom:84px; }
  .hero-inner{ min-height:auto; padding-block:clamp(3rem,9vh,4.5rem) clamp(2.5rem,6vh,3.5rem); }
  .g-tall{ grid-column:span 6; aspect-ratio:3/4; }
  .g-wide{ grid-column:span 12; aspect-ratio:3/2; }
  .g-banner{ grid-column:span 12; aspect-ratio:16/9; }
  .section--round{ margin-inline:0; border-radius:0; }
}

@media (max-width:620px){
  :root{ --r-lg:22px; --r:16px; }
  .services{ grid-template-columns:1fr; }
  .coats{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .hero-actions .btn{ flex:1 1 100%; }
  .hero .chalkline{ width:65%; }
  .hero{ padding-inline:.75rem; }
  .g-tall{ grid-column:span 12; aspect-ratio:4/5; }
  .g-wide{ grid-column:span 12; aspect-ratio:4/3; }
  .g-banner{ grid-column:span 12; aspect-ratio:3/2; }
  .footer-top{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; }
}

/* ============================================================
   PROJECTS PAGE
   ============================================================ */
.page-head{ padding-block:clamp(2.5rem,5vw,4rem) clamp(2rem,4vw,3rem); }
.crumb{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--body); margin:0 0 1.5rem;
}
.crumb a{ color:var(--gold-deep); text-decoration:none; }
.crumb a:hover{ text-decoration:underline; }

/* jump nav */
.jump{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; }
.jump a{
  background:var(--paper); border:1px solid rgba(43,42,40,.11);
  border-radius:var(--pill); padding:.65rem 1.2rem;
  font-family:var(--font-mono); font-size:.75rem; color:var(--ink);
  text-decoration:none;
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.jump a:hover{ border-color:var(--gold); color:var(--gold-deep); transform:translateY(-2px); }

/* one project block */
.project{ padding-block:clamp(3rem,6vw,5rem); border-top:var(--hairline); }
.project:first-of-type{ border-top:none; }
.project-head{ margin-bottom:clamp(1.75rem,3vw,2.5rem); }
.project-head h2{ font-size:clamp(1.5rem,1.2rem + 1.6vw,2.25rem); max-width:22ch; }
.project-head p{ margin:1rem 0 0; max-width:62ch; }
.project-meta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; }
.project-meta span{
  font-family:var(--font-mono); font-size:.625rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-deep);
  background:rgba(166,148,126,.16); padding:.35rem .75rem; border-radius:var(--pill);
}

/* before / after pair */
.ba{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.65rem,1.2vw,1rem); }
.ba figure{ margin:0; position:relative; }
.ba .shot{
  position:relative; overflow:hidden; border-radius:var(--r);
  background:var(--bg-3); aspect-ratio:4/3;
}
.ba .shot img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.ba figure:hover .shot img{ transform:scale(1.04); }
.ba .shot::after{
  content:""; position:absolute; inset:0; border-radius:var(--r);
  box-shadow:inset 0 0 0 1px rgba(43,42,40,.1); pointer-events:none;
}
.ba .tag{
  position:absolute; top:.75rem; left:.75rem; z-index:2;
  font-family:var(--font-mono); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; padding:.4rem .8rem; border-radius:var(--pill);
  background:rgba(43,42,40,.82); color:#fff; backdrop-filter:blur(6px);
}
.ba .tag--after{ background:var(--gold); color:var(--ink); }
.ba figcaption{
  margin-top:.7rem; font-family:var(--font-mono); font-size:.6875rem;
  letter-spacing:.04em; color:var(--body); line-height:1.5;
}

/* extra stills under a pair */
.stills{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.65rem,1.2vw,1rem); margin-top:clamp(.65rem,1.2vw,1rem); }
.stills figure{ margin:0; overflow:hidden; border-radius:var(--r); background:var(--bg-3); aspect-ratio:4/3; position:relative; }
.stills img{ width:100%; height:100%; object-fit:cover; }

/* closing CTA */
.cta-band{
  background:var(--ink); color:rgba(255,255,255,.74);
  border-radius:var(--r-lg); margin-inline:var(--gutter);
  padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,4vw,4rem);
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 70% at 20% 0%, rgba(166,148,126,.2) 0%, transparent 60%);
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ color:#fff; font-size:clamp(1.5rem,1.2rem + 1.6vw,2.25rem); max-width:20ch; }
.cta-band p{ margin:1rem 0 0; max-width:52ch; }
.cta-band .hero-actions{ margin-top:2rem; }

@media (max-width:900px){
  .stills{ grid-template-columns:repeat(2,1fr); }
  .cta-band{ margin-inline:0; border-radius:0; }
}
@media (max-width:620px){
  .ba figcaption{ font-size:.625rem; }
  .ba .tag{ font-size:.5625rem; padding:.3rem .6rem; }
  .stills{ grid-template-columns:1fr; }
}