/* ==========================================================================
   Costruzione Edile S.r.l.s. — site.css
   Vanilla CSS, no build step.
   ========================================================================== */

/* Self-hosted variable fonts (latin subset) — no third-party requests */
@font-face{font-family:"Archivo";font-style:normal;font-weight:500 800;font-display:swap;src:url("../fonts/archivo-latin.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/inter-latin.woff2") format("woff2")}

:root{
  --ink:#14171A;
  --ink-soft:#1F2429;
  --paper:#F4F1EC;
  --stone:#DCD6CC;
  --stone-soft:#E7E2DA;
  --amber:#E8A317;
  --amber-dk:#C98A0C;
  --text:#1D1F22;
  --muted:#5E6470;
  --white:#FFFFFF;

  --bar-h:72px;            /* measured at runtime by site.js */
  --maxw:1200px;
  --gutter:24px;
  --sec:clamp(3.5rem,7.5vw,6.25rem);
  --r:2px;

  --f-head:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Inter","Helvetica Neue",Arial,sans-serif;
}

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

/* body scroll lock while the mobile menu is open */
html.is-navlock,html.is-navlock body{overflow:hidden}

html{
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  scroll-behavior:smooth;
  overflow-x:clip;
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font:400 1rem/1.62 var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img,svg{display:block;max-width:100%}
img{height:auto}
svg{fill:currentColor}

h1,h2,h3{font-family:var(--f-head);margin:0;letter-spacing:-0.02em;line-height:1.06;font-weight:700}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:1px;
}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

.skip{
  position:absolute;left:12px;top:-100px;z-index:200;
  background:var(--ink);color:var(--paper);
  padding:.75rem 1rem;border-radius:var(--r);
  font:600 .875rem/1 var(--f-body);text-decoration:none;
  transition:top .18s ease;
}
.skip:focus{top:12px}

.wrap{width:min(var(--maxw), 100% - (var(--gutter) * 2));margin-inline:auto}

section[id]{scroll-margin-top:calc(var(--bar-h) + 16px)}

/* ---------- type helpers ---------- */
.eyebrow{
  font:600 .72rem/1.2 var(--f-body);
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);margin-bottom:1rem;
}
.eyebrow__n{
  font-family:var(--f-head);font-weight:700;
  color:var(--amber);letter-spacing:.06em;
}
.lede{
  font-size:clamp(1.03rem,1.35vw,1.185rem);
  line-height:1.55;color:var(--muted);max-width:46ch;
}
/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:52px;padding:0 1.5rem;
  border:1px solid transparent;border-radius:var(--r);
  font:600 .9375rem/1 var(--f-body);letter-spacing:.005em;
  text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn--sm{min-height:42px;padding:0 1.05rem;font-size:.875rem}
.btn--full{width:100%}
.btn--amber{background:var(--amber);color:var(--ink)}
.btn--amber:hover{background:var(--amber-dk)}
.btn--ghost{border-color:rgba(20,23,26,.28);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--ink);background:rgba(20,23,26,.05)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:var(--ink-soft)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:80;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .22s ease,border-color .22s ease;
}
.hdr.is-solid{
  background:rgba(244,241,236,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom-color:var(--stone);
}
.hdr__in{
  display:flex;align-items:center;gap:1.5rem;
  min-height:72px;
}

.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;min-width:0}
.brand__logo{height:38px;width:auto}
.brand__txt{display:flex;flex-direction:column;line-height:1;min-width:0}
.brand__name{
  font:800 1.045rem/1 var(--f-head);
  text-transform:uppercase;letter-spacing:.015em;color:var(--ink);
  white-space:nowrap;
}
.brand__form{
  font:500 .62rem/1 var(--f-body);
  text-transform:uppercase;letter-spacing:.18em;color:var(--muted);
  margin-top:.32rem;
}

.nav{display:flex;align-items:center;gap:1.9rem;margin-left:auto}
.nav a{
  font:500 .9rem/1 var(--f-body);text-decoration:none;color:var(--text);
  padding:.4rem 0;position:relative;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--amber);transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease;
}
.nav a:hover::after{transform:scaleX(1)}

.hdr__cta{display:flex;align-items:center;gap:.6rem;margin-left:.25rem}
.iconlink{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--stone);border-radius:var(--r);
  color:var(--ink);text-decoration:none;background:rgba(255,255,255,.5);
}
.navtoggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;
  background:transparent;border:1px solid var(--stone);border-radius:var(--r);
  color:var(--ink);cursor:pointer;
}
.navtoggle .ic-close{display:none}
.navtoggle[aria-expanded="true"] .ic-open{display:none}
.navtoggle[aria-expanded="true"] .ic-close{display:block}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  padding-top:calc(var(--bar-h) + clamp(2.25rem,6vw,5rem));
  padding-bottom:clamp(2.5rem,6vw,5rem);
}
.hero__in{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.hero__copy{min-width:0}
.hero h1{
  font-size:clamp(2.4rem,5.1vw,4.75rem);
  line-height:.98;
  letter-spacing:-0.028em;
  margin-bottom:1.25rem;
  text-wrap:balance;
}
.hero__btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.15rem}

/* slim inline stat row under the CTAs */
.hstats{
  display:flex;flex-wrap:wrap;gap:.5rem 1.35rem;min-width:0;
  margin-top:1.9rem;padding-top:1.2rem;
  border-top:1px solid var(--stone);
}
.hstats li{
  display:flex;align-items:center;gap:.5rem;min-width:0;
  font:500 .795rem/1.35 var(--f-body);letter-spacing:.005em;
  color:var(--muted);
}
.hstats li::before{
  content:"";flex:none;width:6px;height:6px;background:var(--amber);
}

.hero__media{position:relative;min-width:0}
.hero__panel{
  position:absolute;
  left:clamp(-28px,-2.2vw,-14px);
  bottom:clamp(-24px,-2vw,-14px);
  width:58%;height:52%;
  background:var(--amber);
  border-radius:var(--r);
  z-index:0;
}
.hero__img{
  position:relative;z-index:1;
  width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 42%;
  border-radius:var(--r);
  background:var(--stone-soft);
}

/* pure-CSS entrance — never gated on a JS class */
@media (prefers-reduced-motion: no-preference){
  .hero__copy > *{animation:rise .62s cubic-bezier(.2,.7,.3,1) both}
  .hero__copy > :nth-child(1){animation-delay:.02s}
  .hero__copy > :nth-child(2){animation-delay:.08s}
  .hero__copy > :nth-child(3){animation-delay:.14s}
  .hero__copy > :nth-child(4){animation-delay:.2s}
  .hero__copy > :nth-child(5){animation-delay:.26s}
  .hero__media{animation:fade .8s ease both;animation-delay:.1s}
}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sec{padding-block:var(--sec)}
.sec--tight{padding-top:clamp(3rem,6vw,5rem)}
.sec--stone{background:var(--stone-soft);border-top:1px solid var(--stone)}
.sec--dark{background:var(--ink);color:var(--paper)}

.sechead{max-width:60ch;margin-bottom:clamp(1.9rem,3.2vw,2.9rem)}
.sechead h2{font-size:clamp(1.85rem,3.4vw,2.9rem);margin-bottom:.85rem}
.sechead__p{color:var(--muted);font-size:1.02rem;max-width:52ch}
.sechead--dark .eyebrow{color:rgba(244,241,236,.62)}
.sechead--dark .sechead__p{color:rgba(244,241,236,.72)}

/* ---------- servizi cards ---------- */
.cards{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.9rem,1.6vw,1.35rem);
}
.card{
  position:relative;min-width:0;
  background:var(--white);
  border:1px solid var(--stone);
  border-radius:var(--r);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--amber);transform:scaleX(0);transform-origin:left;
  transition:transform .24s ease;z-index:2;
}
.card:hover::before{transform:scaleX(1)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--stone-soft)}
.card__b{padding:1.1rem 1.15rem 1.35rem;min-width:0}
.card__b h3{font-size:1.0625rem;margin-bottom:.45rem;letter-spacing:-0.012em}
.card__b p{font-size:.865rem;line-height:1.55;color:var(--muted)}

/* ---------- lavori (masonry via columns) ---------- */
.works{columns:3;column-gap:clamp(.7rem,1.2vw,1rem)}
.work{
  position:relative;display:block;width:100%;
  break-inside:avoid;
  margin:0 0 clamp(.7rem,1.2vw,1rem);
  padding:0;border:1px solid var(--stone);background:var(--white);cursor:pointer;
  border-radius:var(--r);overflow:hidden;
  -webkit-column-break-inside:avoid;
  text-align:left;
}
.work img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  background:var(--stone-soft);
  transition:transform .4s ease;
}
.work:nth-child(3n+2) img{aspect-ratio:1/1}
.work:nth-child(4n+1) img{aspect-ratio:4/5}
.work:hover img{transform:scale(1.03)}
.work__cap{
  display:block;text-align:left;min-width:0;
  padding:.62rem .7rem .66rem;
  font:600 .7rem/1.35 var(--f-body);
  text-transform:uppercase;letter-spacing:.075em;
  color:var(--ink);background:var(--paper);
  border-top:1px solid var(--stone);
}
.work:hover .work__cap{color:var(--amber-dk)}

/* ---------- metodo (dark, compact strip) ---------- */
.sec--strip{padding-block:clamp(2.75rem,5vw,4rem)}
.sec--strip .sechead{margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.steps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.4rem,2.6vw,2.25rem);
}
.step{
  min-width:0;padding-top:1.15rem;
  border-top:2px solid rgba(232,163,23,.42);
}
.step__n{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;margin-bottom:.85rem;
  background:var(--amber);color:var(--ink);
  font:700 .95rem/1 var(--f-head);letter-spacing:0;
}
.step h3{font-size:1.0625rem;margin-bottom:.5rem;color:var(--paper)}
.step p{font-size:.865rem;line-height:1.55;color:rgba(244,241,236,.68)}

/* ---------- perché noi ---------- */
.why{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.why__media{position:relative;min-width:0}
.why__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r);background:var(--stone-soft);
}
.why__copy{min-width:0}
.why__copy h2{font-size:clamp(1.85rem,3.2vw,2.6rem);margin-bottom:1.75rem}
.why__list{display:grid;gap:1.35rem;margin-bottom:2rem}
.why__list li{padding-left:1.1rem;border-left:2px solid var(--amber)}
.why__list h3{font-size:1.02rem;margin-bottom:.3rem}
.why__list p{font-size:.9rem;line-height:1.55;color:var(--muted)}

/* ==========================================================================
   DOMANDE (FAQ)
   ========================================================================== */
.sec--rule{border-top:1px solid var(--stone)}
.faqwrap{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(1.75rem,4vw,4rem);align-items:start;
}
.faqwrap .sechead{margin-bottom:0}
.faq{display:grid;gap:.6rem;min-width:0}
.faq details{
  background:var(--white);border:1px solid var(--stone);border-radius:var(--r);
  min-width:0;
}
.faq details[open]{border-color:#C8C1B5}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-width:0;min-height:56px;
  padding:1rem 1.1rem;cursor:pointer;list-style:none;
  font:600 1rem/1.35 var(--f-head);letter-spacing:-0.012em;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:11px;height:11px;
  border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);
  transform:translateY(-3px) rotate(45deg);
  transition:transform .22s ease;
}
.faq details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.faq summary:focus-visible{outline:2px solid var(--amber);outline-offset:-3px;border-radius:1px}
.faq__b{padding:0 1.1rem 1.1rem;min-width:0}
.faq__b p{font-size:.905rem;line-height:1.62;color:var(--muted)}
@media (prefers-reduced-motion: reduce){ .faq summary::after{transition:none} }

/* ==========================================================================
   CONTATTI
   ========================================================================== */
.contact{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(1.75rem,4vw,3.5rem);align-items:start;
}
.form{
  background:var(--white);border:1px solid var(--stone);border-radius:var(--r);
  padding:clamp(1.25rem,2.6vw,2rem);
  display:grid;gap:1.05rem;min-width:0;
}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.05rem}
.field{display:grid;gap:.4rem;min-width:0}
.field label{font:600 .8rem/1.3 var(--f-body);color:var(--text)}
.field input[type=text],.field input[type=tel],.field input[type=email],
.field select,.field textarea{
  width:100%;min-width:0;
  font:400 1rem/1.4 var(--f-body);color:var(--text);  /* 16px = no iOS zoom */
  background:var(--paper);
  border:1px solid var(--stone);border-radius:var(--r);
  padding:.72rem .8rem;
  transition:border-color .16s ease;
}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235E6470' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;
  padding-right:2.2rem;
}
.field textarea{resize:vertical;min-height:118px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#C8C1B5}
.field[data-invalid] input,.field[data-invalid] select{border-color:#B4232A}
.field__err{display:none;font:500 .76rem/1.3 var(--f-body);color:#B4232A}
.field[data-invalid] .field__err{display:block}

.field--check{gap:.35rem}
.check{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer}
.check input{
  flex:none;width:20px;height:20px;margin:.12rem 0 0;
  accent-color:var(--amber);cursor:pointer;
}
.check span{font:400 .82rem/1.5 var(--f-body);color:var(--muted);min-width:0}
.check a{color:var(--text);text-underline-offset:2px}

.hp{position:absolute!important;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* success / error — display driven by class, never [hidden] */
.form__msg{
  display:none;
  align-items:flex-start;gap:.5rem;
  font:500 .875rem/1.45 var(--f-body);
  padding:.8rem .9rem;border-radius:var(--r);
  margin:0;
}
.form__msg.is-on{display:flex}
.form__msg.ok{background:rgba(232,163,23,.14);border:1px solid rgba(232,163,23,.55);color:var(--text)}
.form__msg.err{background:rgba(180,35,42,.08);border:1px solid rgba(180,35,42,.4);color:#8E1B21}

/* ---------- info column ---------- */
.info{min-width:0}
.info__list{display:grid;gap:0;border:1px solid var(--stone);border-radius:var(--r);background:var(--white)}
.info__list li{
  display:flex;align-items:flex-start;gap:.8rem;min-width:0;
  padding:.95rem 1.05rem;border-top:1px solid var(--stone);
}
.info__list li:first-child{border-top:0}
.info__list svg{flex:none;color:var(--amber);margin-top:.15rem}
.info__list div{min-width:0}
.info__k{
  display:block;
  font:600 .68rem/1 var(--f-body);text-transform:uppercase;letter-spacing:.13em;
  color:var(--muted);margin-bottom:.32rem;
}
.info__list a,.info__list span:not(.info__k){
  font-size:.9rem;color:var(--text);text-decoration:none;
  overflow-wrap:anywhere;white-space:normal;
}
.info__list a:hover{color:var(--amber-dk)}

.zona{
  margin-top:1.05rem;padding:1.15rem 1.15rem 1.25rem;
  background:var(--ink);color:var(--paper);border-radius:var(--r);
}
.zona h3{font-size:1rem;margin-bottom:.4rem}
.zona p{font-size:.855rem;line-height:1.55;color:rgba(244,241,236,.7)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{background:var(--ink);color:var(--paper);padding-block:clamp(2.5rem,5vw,3.75rem)}
.ftr__in{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);align-items:start;
}
/* il badge blu navy sparirebbe sul fondo scuro: disco bianco dietro */
.ftr .brand__logo{
  height:64px;width:64px;max-width:none;
  background:#fff;border-radius:50%;padding:4px;
}
.ftr .brand{gap:.9rem}
.ftr .brand__name{color:var(--paper)}
.ftr .brand__form{color:rgba(244,241,236,.55)}
.ftr__meta{font-size:.815rem;line-height:1.65;color:rgba(244,241,236,.6);margin-top:.75rem;overflow-wrap:anywhere}
.ftr__meta a{color:rgba(244,241,236,.82);text-decoration:none}
.ftr__meta a:hover{color:var(--amber)}
.ftr__links{display:grid;gap:.6rem;align-content:start;min-width:0}
.ftr__nav{display:flex;flex-wrap:wrap;gap:.35rem .95rem;min-width:0}
.ftr__nav a{
  font:500 .85rem/1 var(--f-body);text-decoration:none;color:rgba(244,241,236,.82);
  padding:.25rem 0;
}
.ftr__nav a:hover{color:var(--amber)}
.ftr__links a{font-size:.875rem;text-decoration:none;color:var(--paper);width:fit-content}
.ftr__links a:hover{color:var(--amber)}
.ftr__note{font-size:.79rem;line-height:1.5;color:rgba(244,241,236,.55)}
.ftr__end{display:grid;gap:.5rem;align-content:start}
.ftr__end p{font-size:.79rem;color:rgba(244,241,236,.55)}
.ftr__end a{color:var(--amber);text-decoration:none}
.ftr__end a:hover{text-decoration:underline}

/* ==========================================================================
   MOBILE ACTION BAR (index only)
   ========================================================================== */
.mbar{display:none}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lb{
  border:0;padding:0;background:transparent;
  max-width:min(94vw,860px);max-height:92vh;
  width:auto;color:var(--paper);overflow:visible;
}
.lb::backdrop{background:rgba(12,14,16,.9)}
.lb img{
  width:auto;max-width:min(94vw,860px);max-height:80vh;
  border-radius:var(--r);background:var(--ink-soft);
}
.lb__cap{
  margin-top:.8rem;
  font:600 .82rem/1.4 var(--f-body);letter-spacing:.02em;
  color:rgba(244,241,236,.85);
}
.lb__close{
  position:absolute;top:-56px;right:0;
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(244,241,236,.35);border-radius:var(--r);
  color:var(--paper);cursor:pointer;
}
.lb__close:hover{background:rgba(244,241,236,.12)}

/* ==========================================================================
   REVEAL (below the fold only)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
  .reveal.is-in{opacity:1;transform:none}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{gap:1.75rem 1.35rem}
  .nav{gap:1.35rem}
  .brand__name{font-size:.95rem}
  .ftr__in{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  /* hero photo sits directly under the bar on mobile -> keep the bar readable */
  .hdr{
    background:rgba(244,241,236,.96);
    backdrop-filter:saturate(140%) blur(8px);
    border-bottom-color:var(--stone);
  }
  .nav{
    position:fixed;top:var(--bar-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--stone);
    padding:.5rem var(--gutter) 1rem;
    margin:0;
    display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:.95rem 0;border-bottom:1px solid var(--stone);font-size:1rem;min-height:48px;display:flex;align-items:center}
  .nav a:last-child{border-bottom:0}
  .nav a::after{display:none}
  .hdr__cta{margin-left:auto}
  .iconlink{display:inline-flex}
  .navtoggle{display:inline-flex}
  .hdr.is-open{background:var(--paper);border-bottom-color:transparent}

  .hero__in{grid-template-columns:minmax(0,1fr);gap:2.25rem}
  .hero__media{order:-1}
  .hero__panel{width:52%;height:44%}
  .lede{max-width:none}

  .why{grid-template-columns:minmax(0,1fr);gap:2rem}
  .faqwrap{grid-template-columns:minmax(0,1fr);gap:2rem}
  .contact{grid-template-columns:minmax(0,1fr)}
  .works{columns:2}
}

@media (max-width:640px){
  :root{--gutter:18px;--sec:clamp(3.25rem,8vw,7.5rem)}
  .cards{grid-template-columns:minmax(0,1fr)}
  .card img{aspect-ratio:3/2}
  .card__b{padding:.9rem 1.05rem 1.1rem}
  .sechead{margin-bottom:1.9rem}
  .steps{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .row{grid-template-columns:minmax(0,1fr)}
  /* the wordmark needs the room: on phones the sticky bar carries the CTA */
  .hdr__cta .btn--sm{display:none}
  .ftr__in{grid-template-columns:minmax(0,1fr);gap:2rem}
  .btn{width:100%}
  .hero__btns{gap:.65rem}
  .brand__name{font-size:.95rem}
  .brand__logo{height:30px;max-width:96px;object-fit:contain;object-position:left center}
  .lb__close{top:auto;bottom:-56px;right:0;transform:none;background:rgba(20,23,26,.6)}
}

/* ==========================================================================
   MOBILE (<=700px): full-bleed hero + sticky action bar
   ========================================================================== */
@media (max-width:700px){
  :root{--mbar-h:calc(52px + 1rem + env(safe-area-inset-bottom,0px))}
  html{scroll-padding-bottom:var(--mbar-h)}

  /* --- hero: portrait photo full-bleed, copy overlaid at the bottom --- */
  .hero{
    position:relative;overflow:hidden;
    display:flex;align-items:flex-end;
    min-height:92vh;
    min-height:92svh;
    padding-top:calc(var(--bar-h) + 1.25rem);
    padding-bottom:clamp(1.75rem,6vw,2.5rem);
  }
  .hero__in{
    grid-template-columns:minmax(0,1fr);gap:0;
    align-items:end;
  }
  .hero__media{
    position:absolute;inset:0;z-index:0;order:0;
    margin:0;animation:none;
  }
  .hero__panel{display:none}
  .hero__img{
    position:absolute;inset:0;z-index:0;
    width:100%;height:100%;aspect-ratio:auto;
    object-fit:cover;object-position:50% 38%;
    border-radius:0;background:var(--ink);
  }
  .hero__media::after{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to top,
      rgba(11,13,15,.95) 0%,
      rgba(11,13,15,.90) 34%,
      rgba(11,13,15,.72) 52%,
      rgba(11,13,15,.34) 76%,
      rgba(11,13,15,.46) 100%);
  }
  .hero__copy{position:relative;z-index:2;min-width:0}
  .hero__copy .eyebrow{color:rgba(244,241,236,.86);margin-bottom:.8rem}
  .hero h1{color:var(--paper);font-size:clamp(2.4rem,10vw,3.2rem);margin-bottom:.9rem}
  .hero .lede{color:rgba(244,241,236,.93);max-width:34ch}
  .hero__btns{margin-top:1.5rem}
  .hero .btn--ghost{
    border-color:rgba(244,241,236,.55);color:var(--paper);
    background:rgba(20,23,26,.28);
  }
  .hero .btn--ghost:hover{border-color:var(--paper);background:rgba(244,241,236,.14)}
  .hstats{
    flex-direction:column;
    margin-top:1.35rem;padding-top:1rem;gap:.4rem;
    border-top-color:rgba(244,241,236,.28);
  }
  .hstats li{color:rgba(244,241,236,.88);font-size:.75rem}

  /* --- sticky action bar --- */
  .mbar{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:var(--ink);border-top:1px solid rgba(244,241,236,.16);
    padding:.5rem var(--gutter) calc(.5rem + env(safe-area-inset-bottom,0px));
    transition:transform .26s ease;
  }
  .mbar.is-off{transform:translateY(140%);pointer-events:none}
  .mbar__b{
    display:flex;align-items:center;justify-content:center;gap:.5rem;min-width:0;
    min-height:52px;padding:0 .7rem;border-radius:var(--r);
    font:600 .9rem/1 var(--f-body);text-decoration:none;
  }
  .mbar__b svg{flex:none}
  .mbar__b--amber{background:var(--amber);color:var(--ink)}
  .mbar__b--wa{background:var(--paper);color:var(--ink)}
  .mbar__b--wa:hover{background:var(--white)}

  /* the bar must never cover the end of the footer */
  body.home .ftr{padding-bottom:calc(clamp(2.5rem,5vw,3.75rem) + var(--mbar-h))}
}
@media (prefers-reduced-motion: reduce){ .mbar{transition:none} }

@media (max-width:480px){
  .hdr__in{gap:.75rem}
  .brand{gap:.45rem}
  .brand__logo{height:28px;max-width:64px}
  .brand__name{font-size:.85rem}
}
/* smallest phones: shrink brand so badge + wordmark still fit */
@media (max-width:400px){
  .brand{gap:.4rem}
  .hdr .brand__logo{height:24px;max-width:24px}
  .brand__name{font-size:.8rem}
}

/* tap targets on touch / small screens */
@media (pointer:coarse),(max-width:900px){
  .nav a,.hdr__cta a,.hdr__cta button,
  .ftr__links a,.info__list a,
  .brand,.skip,
  .btn,.lb__close{min-height:44px}
  .info__list li{padding-block:1.05rem}
  .ftr__links a,.info__list a{display:inline-flex;align-items:center}
  .info__list a{overflow-wrap:anywhere}
  .skip{display:flex;align-items:center}
}

@media print{
  .hdr,.navtoggle,.lb{display:none}
  body{background:#fff}
}

/* ==========================================================================
   SUBPAGES (privacy, 404)
   ========================================================================== */
body.sub .hdr{
  background:rgba(244,241,236,.96);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom-color:var(--stone);
}
.subhead{
  padding-top:calc(var(--bar-h) + clamp(2.5rem,6vw,4.5rem));
  padding-bottom:clamp(1.5rem,3vw,2.25rem);
  border-bottom:1px solid var(--stone);
}
.subhead h1{font-size:clamp(2rem,4vw,3.1rem);margin-bottom:.6rem}
.subhead p{color:var(--muted);font-size:.95rem}

.prose{
  padding-block:clamp(2.5rem,6vw,4.5rem);
  max-width:74ch;
}
.prose h2{
  font-size:clamp(1.15rem,2vw,1.4rem);
  margin:2.4rem 0 .7rem;
  padding-top:1.4rem;
  border-top:1px solid var(--stone);
}
.prose h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.prose p,.prose li{font-size:.945rem;line-height:1.72;color:var(--text)}
.prose p{margin-bottom:.9rem}
.prose ul{list-style:disc;padding-left:1.25rem;margin-bottom:.9rem;display:grid;gap:.3rem}
.prose li{padding-left:.15rem}
.prose a{color:var(--text);text-underline-offset:3px}
.prose a:hover{color:var(--amber-dk)}
.prose .updated{font-size:.8rem;color:var(--muted);margin-top:2.5rem}

/* 404 */
.nf{
  min-height:72vh;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  padding-top:calc(var(--bar-h) + 3rem);padding-bottom:4rem;
}
.nf__code{
  font:800 clamp(4.5rem,15vw,10rem)/1 var(--f-head);
  letter-spacing:-0.04em;color:var(--ink);
  position:relative;margin-bottom:1rem;
}
.nf__code::after{
  content:"";display:block;width:96px;height:6px;background:var(--amber);margin-top:1.1rem;
}
.nf h1{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:.8rem}
.nf p{color:var(--muted);max-width:48ch;margin-bottom:2rem}