/* ==========================================================================
   Safe Home Appliance Repair — Gainesville, VA
   Direction: "appliance data plate" — their real navy/blue shield palette
   deepened, warm brass accent, expanded Archivo nameplate type, mono specs.
   ========================================================================== */

/* === defensive base — injected by harden_css.py; do not hand-edit === */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { scroll-padding-top: calc(var(--nav-h, 72px) + 1rem); }
img, svg, video, iframe, canvas, table { display: block; max-width: 100%; }
p, li, h1, h2, h3, h4, blockquote, td, dd, dt { overflow-wrap: anywhere; }
form[style*="min-height"] { align-content: center; }
/* === end defensive base === */

:root{
  /* brand — sampled pixel-exact from their logo master */
  --navy:      #0D1345;
  --navy-2:    #072F5D;
  --blue:      #1464A7;
  --blue-lift: #4E97DA;
  --steel:     #C9CACA;
  --steel-2:   #B8B9BA;

  /* extended for depth */
  --ink:       #070A26;
  --ink-2:     #0B1132;
  --porcelain: #F4F2ED;
  --paper:     #FBFAF8;
  --tint:      #ECEAE3;

  --amber:      #E8A33D;
  --amber-hi:   #F2B65C;
  --amber-deep: #8A5410;

  --tx:      #23273F;
  --tx-soft: #5A6078;
  --line:    rgba(13,19,69,.13);

  --nav-h: 74px;

  --ff-display: "Archivo", "Helvetica Neue", sans-serif;
  --ff-body:    "Karla", "Helvetica Neue", sans-serif;
  --ff-mono:    "Azeret Mono", ui-monospace, monospace;

  --r:    14px;
  --r-lg: 20px;
  --wrap: 1200px;
  --sh:   0 1px 2px rgba(13,19,69,.06), 0 10px 30px -14px rgba(13,19,69,.22);
  --sh-lg:0 2px 4px rgba(13,19,69,.07), 0 28px 60px -26px rgba(13,19,69,.34);
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--porcelain);
  color:var(--tx);
  font-family:var(--ff-body);
  font-size:1.0625rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--ff-display);
  font-variation-settings:"wdth" 112;
  color:var(--navy);
  font-weight:700;
  letter-spacing:-.018em;
  line-height:1.04;
  margin:0;
  text-wrap:balance;
}

p{ margin:0; }
img{ display:block; }

a{ color:var(--navy-2); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--blue); }

.mono{
  font-family:var(--ff-mono);
  font-size:.68rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  font-weight:500;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }

.skip{
  position:absolute; left:0; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:12px 18px; border-radius:0 0 10px 0;
  transform:translateY(-150%); transition:transform .18s;
}
.skip:focus{ transform:translateY(0); }

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

/* ── eyebrow / rule ─────────────────────────────────────── */
.eyebrow{
  font-family:var(--ff-mono);
  font-size:.68rem; letter-spacing:.19em; text-transform:uppercase; font-weight:500;
  color:var(--blue); display:flex; align-items:center; gap:12px; margin:0 0 18px;
}
.rule{ display:block; width:30px; height:2px; background:var(--amber); flex:none; }
.dark .eyebrow, .hero .eyebrow, .cta-band .eyebrow{ color:var(--amber); }

/* ── buttons ────────────────────────────────────────────── */
.btn{
  --btn-bg:var(--navy); --btn-fg:#fff; --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1.5px solid var(--btn-bd);
  font-family:var(--ff-display); font-variation-settings:"wdth" 108;
  font-weight:600; font-size:.95rem; letter-spacing:.005em;
  padding:.82em 1.5em; border-radius:999px; text-decoration:none;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background .18s, color .18s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh); }
.btn-lg{ font-size:1.02rem; padding:1em 1.75em; }
.btn-full{ display:flex; width:100%; }

.btn-amber{ --btn-bg:var(--amber); --btn-fg:#221604; }
.btn-amber:hover{ --btn-bg:var(--amber-hi); color:#221604; }

.btn-navy{ --btn-bg:var(--navy); --btn-fg:#fff; }
.btn-navy:hover{ --btn-bg:var(--navy-2); color:#fff; }

.btn-ghost{
  --btn-bg:transparent; --btn-fg:var(--porcelain); --btn-bd:rgba(244,242,237,.32);
}
.btn-ghost:hover{ --btn-bg:rgba(244,242,237,.09); --btn-bd:rgba(244,242,237,.6); color:var(--porcelain); }

/* ══ NAV ════════════════════════════════════════════════ */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(251,250,248,.9);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:1320px; margin-inline:auto;
  padding-inline:clamp(16px,4vw,36px);
  height:var(--nav-h);
  display:flex; align-items:center; gap:20px;
}

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
.brand img{ width:48px; height:48px; }
.brand-tx{ display:flex; flex-direction:column; line-height:1.04; }
.brand-a{
  font-family:var(--ff-display); font-variation-settings:"wdth" 118;
  font-weight:700; font-size:1.02rem; color:var(--navy); letter-spacing:-.01em;
}
.brand-b{
  font-family:var(--ff-mono); font-size:.56rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--blue); margin-top:3px;
}

.nav-links{ display:flex; align-items:center; gap:26px; margin-left:auto; margin-right:14px; }
.nav-links a{
  font-size:.93rem; font-weight:500; color:var(--tx);
  text-decoration:none; position:relative; padding:4px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--amber); transition:right .25s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:hover{ color:var(--navy); }
.nav-links a:hover::after{ right:0; }
.nav-tel, .nav-cta-m{ display:none; }

.nav-right{ display:flex; align-items:center; gap:16px; flex:none; }
.nav-tel-d{ display:flex; flex-direction:column; text-decoration:none; line-height:1.1; }
.nav-tel-d .mono{ color:var(--blue); font-size:.6rem; }
.nav-tel-d strong{
  font-family:var(--ff-display); font-variation-settings:"wdth" 108;
  font-size:1.02rem; color:var(--navy); font-weight:700; margin-top:2px;
}
.nav-tel-d:hover strong{ color:var(--blue); }

.burger{
  display:none; width:44px; height:44px; border:1px solid var(--line);
  border-radius:11px; background:transparent; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px; padding:0;
}
.burger span{ display:block; width:19px; height:2px; background:var(--navy); border-radius:2px; transition:transform .25s, opacity .2s; }
.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); }

/* ══ HERO ═══════════════════════════════════════════════ */
.hero{
  position:relative; isolation:isolate;
  container-type:inline-size;
  min-height:calc(100svh - var(--nav-h));
  display:grid; align-items:center;
  background:
    linear-gradient(168deg, var(--ink) 0%, #0A0F31 45%, #0C1440 100%);
  color:var(--porcelain);
  overflow:hidden;
  padding-block:clamp(30px,5cqi,68px);
}
.hero-grain{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(115% 88% at 84% 6%, rgba(20,100,167,.40), transparent 58%),
    radial-gradient(80% 72% at 4% 100%, rgba(232,163,61,.11), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.026) 0 1px, transparent 1px 4px);
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2;
  background:linear-gradient(90deg, var(--blue), var(--amber) 55%, transparent);
}
.hero-in{
  position:relative; z-index:1;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
  display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
  gap:clamp(24px,5cqi,64px); align-items:center;
}

.hero h1{
  color:var(--porcelain);
  font-size:clamp(1.85rem,8.7cqi,4rem);
  font-variation-settings:"wdth" 108;
  font-weight:800; letter-spacing:-.028em; line-height:1.015;
  margin:0 0 clamp(14px,2cqi,22px);
}
.hero h1 em{
  font-style:normal; color:var(--amber); display:block;
}
.lede{
  font-size:clamp(1rem,2.2cqi,1.16rem);
  color:rgba(244,242,237,.8); max-width:56ch;
  margin:0 0 clamp(20px,2.8cqi,30px);
}

.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:clamp(18px,2.4cqi,26px); }

.proof{
  display:flex; align-items:center; flex-wrap:wrap; gap:5px 8px;
  font-size:clamp(.86rem,1.7cqi,.95rem); color:rgba(244,242,237,.72);
}
.pf{ display:inline-flex; align-items:center; gap:6px; }
.pf + .pf::before{ content:"·"; opacity:.42; }
.proof strong{ color:var(--porcelain); font-weight:700; }
.proof a{ color:rgba(244,242,237,.9); text-decoration-color:rgba(244,242,237,.4); }
.proof a:hover{ color:var(--amber); }
.stars{ color:var(--amber); letter-spacing:.09em; font-size:.95em; }
.dot{ opacity:.4; }

/* hero data plate */
.plate{ margin:0; position:relative; }
.plate-img{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:3/4;
  border:1px solid rgba(244,242,237,.16);
  box-shadow:0 40px 80px -34px rgba(0,0,0,.8);
  background:var(--ink-2);
}
.plate-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(190deg, transparent 42%, rgba(7,10,38,.86) 100%);
}
.plate-img picture{ display:block; width:100%; height:100%; }
.plate-img img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }

.plate-tag{
  position:absolute; left:14px; right:14px; bottom:14px; z-index:2;
  background:rgba(7,10,38,.62);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border:1px solid rgba(244,242,237,.16);
  border-left:3px solid var(--amber);
  border-radius:10px; padding:11px 14px;
}
.plate-tag .mono{ color:var(--amber); font-size:.6rem; display:block; }
.plate-tag strong{
  display:block; font-family:var(--ff-display); font-variation-settings:"wdth" 114;
  font-size:1.3rem; color:var(--porcelain); font-weight:700; line-height:1.15; margin-top:3px;
}
.plate-sub{ display:block; font-size:.8rem; color:rgba(244,242,237,.66); margin-top:4px; line-height:1.4; }

/* ══ SPEC STRIP ═════════════════════════════════════════ */
.strip{ background:var(--navy); color:var(--porcelain); }
.strip-in{
  display:flex; flex-wrap:wrap; gap:10px clamp(20px,4vw,54px);
  padding-block:22px; align-items:center; justify-content:space-between;
}
.spec{ display:flex; flex-direction:column; gap:2px; }
.spec .mono{ color:rgba(200,215,240,.66); font-size:.6rem; }
.spec strong{
  font-family:var(--ff-display); font-variation-settings:"wdth" 110;
  font-size:1.06rem; font-weight:700; color:var(--porcelain);
}

/* ══ SECTIONS ═══════════════════════════════════════════ */
.sec{ padding-block:clamp(60px,8vw,110px); position:relative; }
.sec.tint{ background:var(--tint); }
.sec.dark{
  background:linear-gradient(172deg, var(--ink) 0%, #0B1236 100%);
  color:rgba(244,242,237,.78); overflow:hidden; isolation:isolate;
}
.sec.dark .wrap{ position:relative; z-index:1; }
.sec.dark h2, .sec.dark h3{ color:var(--porcelain); }

.sec-head{ max-width:62ch; margin-bottom:clamp(34px,4.5vw,54px); }
.sec-head h2{ font-size:clamp(1.7rem,4.1vw,2.9rem); margin-bottom:14px; }
.sec-sub{ color:var(--tx-soft); font-size:1.04rem; }
.sec.dark .sec-sub{ color:rgba(244,242,237,.68); }
.sec.dark .sec-sub strong, .sec-sub strong{ color:inherit; font-weight:700; }

/* ── services ───────────────────────────────────────────── */
.svc{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px;
}
.svc-card{
  position:relative; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r);
  padding:26px 24px 22px;
  display:flex; flex-direction:column; gap:9px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
.svc-card::before{
  content:""; position:absolute; left:0; top:22px; bottom:22px; width:3px;
  background:var(--blue); border-radius:0 3px 3px 0;
  transform:scaleY(.25); transform-origin:top; transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.svc-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:rgba(20,100,167,.3); }
.svc-card:hover::before{ transform:scaleY(1); background:var(--amber); }
.svc-no{ color:var(--blue); font-size:.66rem; }
.svc-card h3{ font-size:1.24rem; font-variation-settings:"wdth" 106; }
.svc-card p{ color:var(--tx-soft); font-size:.97rem; flex:1; }
.svc-link{
  font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy-2); text-decoration:none; margin-top:4px;
}
.svc-link span{ display:inline-block; transition:transform .22s; }
.svc-link:hover span{ transform:translateX(4px); }
.svc-more{ background:linear-gradient(160deg,#E9EEF6,#DFE7F1); border-color:rgba(20,100,167,.22); }

.price-note{
  margin-top:22px; padding:24px clamp(20px,3vw,30px);
  background:var(--navy); color:rgba(244,242,237,.82); border-radius:var(--r);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:14px 24px; font-size:1rem;
}
.price-note .mono{ color:var(--amber); }
.price-note .btn-navy{ --btn-bg:var(--amber); --btn-fg:#221604; }
.price-note .btn-navy:hover{ --btn-bg:var(--amber-hi); color:#221604; }

/* ── pillars ────────────────────────────────────────────── */
.pillars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:16px; }
.pillar{
  background:rgba(244,242,237,.045);
  border:1px solid rgba(244,242,237,.12);
  border-radius:var(--r); padding:28px 26px;
  display:flex; flex-direction:column; gap:11px;
}
.pillar-no{ color:var(--amber); font-size:.68rem; }
.pillar h3{ font-size:1.2rem; font-variation-settings:"wdth" 106; }
.pillar p{ color:rgba(244,242,237,.7); font-size:.98rem; }

/* ── gallery ────────────────────────────────────────────── */
/* square contact-sheet grid with one 2x2 feature tile — the cell counts
   (4 + 8 = 12) divide evenly by both 3 and 2 columns, so no holes. */
.grid-gal{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.shot{
  margin:0; aspect-ratio:1/1; overflow:hidden; border-radius:var(--r);
  border:1px solid var(--line); background:var(--tint);
}
.shot.feature{ grid-column:span 2; grid-row:span 2; }
/* the feature shot is a landscape frame with Miguel on the right — a centred
   square crop cuts him off, so bias the crop toward him. */
.shot.feature img{ object-position:88% 38%; }
.shot picture{ display:block; width:100%; height:100%; }
.shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.shot:hover img{ transform:scale(1.045); }

/* ── reviews ────────────────────────────────────────────── */
.revs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
.rev{
  margin:0; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:24px 24px 20px;
  display:flex; flex-direction:column; gap:12px;
}
.rev .stars{ font-size:.9rem; }
.rev p{ font-size:.98rem; color:var(--tx); }
.rev cite{
  font-style:normal; font-family:var(--ff-display); font-variation-settings:"wdth" 108;
  font-weight:700; color:var(--navy); font-size:.95rem;
  display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:auto;
}
.rev cite .mono{
  color:var(--blue); font-size:.56rem; background:rgba(20,100,167,.1);
  padding:3px 8px; border-radius:999px; font-weight:500;
}
#reviews .sec-sub .stars{ margin-right:4px; }
#reviews .sec-sub strong{ color:var(--navy); }

/* ── service area + hours ───────────────────────────────── */
.area-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(28px,5vw,60px); align-items:start; }
.area-grid h2{ font-size:clamp(1.7rem,4.1vw,2.9rem); margin-bottom:14px; }
.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:26px 0 16px; }
.chips li{
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  background:var(--paper); border:1px solid var(--line); color:var(--navy);
  padding:8px 13px; border-radius:999px;
}
.area-note{ color:var(--tx-soft); font-size:.97rem; }

.steps{ list-style:none; margin:34px 0 0; padding:0; display:grid; gap:0; border-top:1px solid var(--line); }
.steps li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 22px;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.step-no{ color:var(--blue); grid-row:span 2; padding-top:5px; }
.steps h3{ font-size:1.08rem; font-variation-settings:"wdth" 106; }
.steps p{ color:var(--tx-soft); font-size:.95rem; }

.hours-card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px 24px; box-shadow:var(--sh);
}
.card-kicker{ color:var(--blue); margin-bottom:14px; }
.hours{ margin:0 0 14px; display:grid; gap:0; }
.hours div{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:9px 0; border-bottom:1px dashed var(--line);
}
.hours dt{ font-weight:600; color:var(--navy); font-size:.94rem; }
.hours dd{ margin:0; font-family:var(--ff-mono); font-size:.76rem; color:var(--tx-soft); letter-spacing:.02em; }
.hours .closed dd{ color:#A03B2A; }
.hours-foot{ font-size:.86rem; color:var(--tx-soft); margin-bottom:16px; }
.ghost-link{
  display:inline-block; margin-top:14px;
  font-family:var(--ff-mono); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy-2); text-decoration:none;
}
.ghost-link:hover{ color:var(--blue); }

/* ══ CTA BAND ═══════════════════════════════════════════ */
.cta-band{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(150deg,#0B1236 0%, var(--navy-2) 60%, #0A3A6E 100%);
  color:rgba(244,242,237,.8);
  padding-block:clamp(60px,8vw,104px);
}
.cta-in{ position:relative; z-index:1; max-width:70ch; }
.cta-in h2{ color:var(--porcelain); font-size:clamp(1.75rem,4.4vw,3rem); margin-bottom:14px; }
.cta-in p{ margin-bottom:26px; font-size:1.06rem; }

/* ══ FOOTER ═════════════════════════════════════════════ */
.foot{ background:var(--ink); color:rgba(244,242,237,.62); padding-top:clamp(48px,6vw,72px); }
.foot-in{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px 28px;
  padding-bottom:44px;
}
.foot-chip{
  display:inline-grid; place-items:center; width:74px; height:74px;
  background:var(--porcelain); border-radius:50%; margin-bottom:16px;
}
.foot-chip img{ width:66px; height:66px; }
.foot-name{
  font-family:var(--ff-display); font-variation-settings:"wdth" 114;
  font-weight:700; font-size:1.1rem; color:var(--porcelain); margin-bottom:8px;
}
.foot-tag{ font-size:.86rem; color:rgba(244,242,237,.5); }
.foot-col{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.foot-col .card-kicker{ color:var(--amber); margin-bottom:5px; }
.foot-col a{ color:rgba(244,242,237,.68); text-decoration:none; font-size:.94rem; }
.foot-col a:hover{ color:var(--amber); }
.foot-col .btn{ margin-top:8px; color:var(--btn-fg); font-size:.95rem; }
.foot-col .btn:hover{ color:#221604; }
.foot-tel{
  font-family:var(--ff-display) !important; font-variation-settings:"wdth" 110;
  font-size:1.35rem !important; font-weight:700; color:var(--porcelain) !important;
}
.foot-tel:hover{ color:var(--amber) !important; }
.foot-small{ font-size:.86rem; color:rgba(244,242,237,.5); line-height:1.55; }
.foot-base{
  border-top:1px solid rgba(244,242,237,.1); padding-block:22px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px;
  font-size:.8rem; color:rgba(244,242,237,.42);
}

/* ══ CONTACT PAGE ═══════════════════════════════════════ */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.page-hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(168deg, var(--ink) 0%, #0A0F31 50%, #0C1440 100%);
  color:var(--porcelain);
  padding-block:clamp(44px,7vw,84px);
  container-type:inline-size;
}
.page-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2;
  background:linear-gradient(90deg, var(--blue), var(--amber) 55%, transparent);
}
.page-hero-in{ position:relative; z-index:1; max-width:74ch; }
.page-hero h1{
  color:var(--porcelain); font-variation-settings:"wdth" 108; font-weight:800;
  font-size:clamp(1.75rem,6.6cqi,3.3rem); letter-spacing:-.028em;
  margin-bottom:16px;
}
.page-hero .lede{ margin-bottom:20px; }

.contact-grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(22px,3vw,34px); align-items:start;
}

.form-card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(24px,3.4vw,40px);
  box-shadow:var(--sh-lg);
}
.form-card h2{ font-size:clamp(1.5rem,3.2vw,2.1rem); margin-bottom:12px; }
.form-intro{ color:var(--tx-soft); font-size:.98rem; margin-bottom:24px; }

#estimate-form{ display:flex; flex-direction:column; gap:16px; }
.f-two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.f-row{ display:flex; flex-direction:column; gap:7px; }
.f-row label{
  font-family:var(--ff-display); font-variation-settings:"wdth" 106;
  font-weight:600; font-size:.9rem; color:var(--navy);
}
.f-hint{ font-family:var(--ff-body); font-weight:400; color:var(--tx-soft); font-size:.82rem; }
.f-row input, .f-row textarea{
  font-family:var(--ff-body); font-size:1rem; color:var(--tx);
  background:#fff; border:1.5px solid rgba(13,19,69,.16); border-radius:11px;
  padding:.78em .95em; width:100%;
  transition:border-color .18s, box-shadow .18s;
}
.f-row textarea{ resize:vertical; min-height:120px; line-height:1.55; }
.f-row input::placeholder, .f-row textarea::placeholder{ color:#9AA0B4; }
.f-row input:focus, .f-row textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(20,100,167,.14);
}

.turnstile-box{ margin:2px 0; min-height:65px; }

#estimate-form .btn{ margin-top:4px; }
#estimate-form .btn[disabled]{
  --btn-bg:#2E7D4F; --btn-fg:#fff; opacity:1; transform:none; box-shadow:none;
  pointer-events:none;
}
.form-status{
  margin:0; padding:15px 17px; border-radius:11px;
  font-size:.97rem; line-height:1.5;
  border-left:3px solid var(--blue); background:rgba(20,100,167,.08); color:var(--navy);
}
.form-status.ok{ border-left-color:#2E7D4F; background:rgba(46,125,79,.1); }
.form-status.err{ border-left-color:#A03B2A; background:rgba(160,59,42,.09); color:#7A2A1D; }
.form-status strong{ display:block; font-family:var(--ff-display); font-variation-settings:"wdth" 108; font-size:1.06rem; margin-bottom:3px; }
.form-fine{ font-size:.8rem; color:var(--tx-soft); }

.contact-side{ display:flex; flex-direction:column; gap:14px; }
.side-card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:22px 22px 20px;
}
.side-card .chips{ margin:0 0 10px; }
.side-card .hours{ margin-bottom:12px; }
.side-card .hours-foot{ margin-bottom:0; }
.side-tel{
  display:block; font-family:var(--ff-display); font-variation-settings:"wdth" 112;
  font-weight:700; font-size:clamp(1.5rem,3.4vw,1.9rem); color:var(--navy);
  text-decoration:none; letter-spacing:-.02em; margin-bottom:8px;
}
.side-tel:hover{ color:var(--blue); }
.side-note{ color:var(--tx-soft); font-size:.92rem; margin-bottom:16px; }
.side-btns{ display:flex; flex-wrap:wrap; gap:9px; }
.side-btns .btn{ flex:1 1 130px; }
.btn-outline{ --btn-bg:transparent; --btn-fg:var(--navy); --btn-bd:rgba(13,19,69,.22); }
.btn-outline:hover{ --btn-bg:rgba(13,19,69,.05); --btn-bd:var(--navy); color:var(--navy); }
.side-links{ display:flex; flex-direction:column; gap:8px; }
.side-links a{ font-size:.94rem; color:var(--navy-2); text-decoration:none; }
.side-links a:hover{ color:var(--blue); }

/* ── FAQ ────────────────────────────────────────────────── */
.faqs{ display:flex; flex-direction:column; gap:10px; max-width:900px; }
.faqs details{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:4px 22px;
}
.faqs summary{
  cursor:pointer; list-style:none; padding:17px 0;
  font-family:var(--ff-display); font-variation-settings:"wdth" 106;
  font-weight:600; font-size:1.04rem; color:var(--navy);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faqs summary::-webkit-details-marker{ display:none; }
.faqs summary::after{
  content:"+"; font-family:var(--ff-mono); font-size:1.2rem; color:var(--blue);
  flex:none; transition:transform .25s;
}
.faqs details[open] summary::after{ transform:rotate(45deg); }
.faqs details p{ padding:0 0 18px; color:var(--tx-soft); font-size:.98rem; max-width:70ch; }

@media (max-width:860px){
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .f-two{ grid-template-columns:1fr; }
}

/* ══ SCROLL REVEAL (below the fold only) ════════════════ */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* ══ RESPONSIVE ═════════════════════════════════════════ */
@media (max-width:1080px){
  .nav-links a:not(.btn):not(.nav-tel){ font-size:.88rem; }
  .nav-links{ gap:20px; }
  .foot-in{ grid-template-columns:1fr 1fr; }
}

@media (max-width:999px){
  .grid-gal{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:900px){
  :root{ --nav-h:66px; }
  .nav-links{
    display:none;
    position:absolute; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:8px clamp(16px,4vw,36px) 20px;
    box-shadow:var(--sh-lg);
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:13px 0; border-bottom:1px solid var(--line); font-size:1rem; }
  .nav-links a::after{ display:none; }
  .nav-tel{ display:block; font-family:var(--ff-mono); letter-spacing:.08em; }
  .nav-cta-m{ display:inline-flex; margin-top:14px; border-bottom:0 !important; }
  .nav-cta, .nav-tel-d{ display:none; }
  .burger{ display:flex; margin-left:auto; }
  .nav-right{ margin-left:auto; }

  .hero-in{ grid-template-columns:1fr; gap:clamp(18px,3.4cqi,26px); }

  /* the plate reflows to a compact signature card so the fold stays clean */
  .plate{ display:flex; align-items:center; gap:14px; order:2; }
  .plate-img{
    width:104px; flex:none; aspect-ratio:1/1; border-radius:14px;
    box-shadow:0 18px 34px -20px rgba(0,0,0,.8);
  }
  .plate-img::after{ display:none; }
  .plate-img img{ object-position:50% 16%; }
  .plate-tag{
    position:static; flex:1; min-width:0; background:rgba(244,242,237,.05);
    border-left-width:3px; padding:10px 13px;
  }
  .plate-tag strong{ font-size:1.1rem; }
  .plate-sub{ font-size:.76rem; }

  .area-grid{ grid-template-columns:1fr; }
  .price-note{ grid-template-columns:minmax(0,1fr); }
  .price-note .btn{ justify-self:start; }
}

@media (max-width:640px){
  body{ font-size:1rem; }
  .strip-in{ justify-content:flex-start; gap:14px 26px; }
  .spec strong{ font-size:.98rem; }
  .hero-cta .btn{ flex:1 1 100%; }
  /* the proof list wraps to its own line here — a leading separator would
     read as an orphan, so the gap alone does the separating. */
  .pf + .pf::before{ display:none; }
  .proof{ gap:2px 14px; }
  .grid-gal{ gap:10px; }
  .foot-in{ grid-template-columns:1fr; gap:30px; }
  .foot-base{ font-size:.76rem; }
  .plate-sub{ font-size:.74rem; }
  .steps li{ grid-template-columns:minmax(0,1fr); gap:5px; }
  .step-no{ grid-row:auto; padding-top:0; }
}

@media (max-width:420px){
  .hero{ padding-block:22px; }
  .brand img{ width:42px; height:42px; }
  .brand-a{ font-size:.94rem; }
  .brand-b{ font-size:.5rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* === site credit (injected by credit_footer.py); do not hand-edit === */
.site-credit {
  margin: 2.25rem 0 0;
  padding-inline: 1.25rem;
  font-size: .73rem;
  line-height: 1.5;
  letter-spacing: .06em;
  text-align: center;
  opacity: .65;
}
.site-credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(128, 128, 128, .5);
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  transition: border-bottom-color .25s ease;
}
.site-credit a:hover,
.site-credit a:focus-visible { border-bottom-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .site-credit a { transition: none; }
}
/* === end site credit === */