/* ==========================================================================
   Big Easy Renovations - Homepage
   Phase 1. Section order per SONIC-HANDOFF.md section 2.
   ========================================================================== */

/* -------------------------------- HEADER -------------------------------- */
.hdr{ position:sticky; top:0; z-index:100; background:var(--paper); box-shadow:0 1px 0 var(--line-dark); }
.hdr.is-stuck{ box-shadow:var(--shadow-sm); }
.hdr__bar{ background:var(--navy); color:var(--txt-on-dark); font-size:.8125rem; }
.hdr__bar-in{ display:flex; align-items:center; gap:1rem; justify-content:center; padding:.5rem 0; flex-wrap:wrap; }
.hdr__bar-sep{ width:4px; height:4px; border-radius:50%; background:var(--accent); }
.hdr__in{ display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem); padding:.9rem 0; }

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex-shrink:0; }
.brand__mark{
  width:44px; height:44px; flex-shrink:0; display:grid; place-items:center;
  background:var(--navy); color:var(--accent);
  font-family:var(--ff-head); font-weight:700; font-size:1.25rem; letter-spacing:.02em;
  border-radius:var(--radius);
}
.brand__txt{ display:flex; flex-direction:column; line-height:1.12; }
.brand__txt strong{ font-family:var(--ff-head); font-size:1.3rem; text-transform:uppercase; color:var(--navy); letter-spacing:.01em; }
.brand__txt em{ font-style:normal; font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-muted); }

.nav{ display:flex; gap:clamp(.75rem,1.6vw,1.5rem); margin-left:auto; }
.nav a{
  font-family:var(--ff-head); font-weight:600; font-size:1rem;
  text-transform:uppercase; letter-spacing:.05em;
  color:var(--navy); text-decoration:none; padding:.4rem 0;
  border-bottom:2px solid transparent; transition:border-color .18s,color .18s;
}
.nav a:hover{ border-bottom-color:var(--accent); }
.nav a:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

.hdr__cta{ display:flex; align-items:center; gap:.9rem; }
.hdr__tel{ display:flex; flex-direction:column; text-decoration:none; line-height:1.15; }
.hdr__tel-lbl{ font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-muted); }
.hdr__tel strong{ font-family:var(--ff-head); font-size:1.3rem; color:var(--navy); }
.hdr__tel:hover strong{ color:var(--navy-mid); }
.btn--sm{ padding:.7rem 1.15rem; font-size:.9375rem; }

.burger{ display:none; width:44px; height:44px; background:none; border:0; cursor:pointer; padding:10px; margin-left:auto; }
.burger span{ display:block; height:2px; background:var(--navy); margin:5px 0; transition:.2s; }

/* --------------------------------- HERO --------------------------------- */
.hero{ position:relative; background:var(--navy); color:var(--txt-on-dark); overflow:hidden; }
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(31,111,178,.55) 0%, transparent 60%),
    linear-gradient(155deg, #0B2545 0%, #0B1620 100%);
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
}
.hero__in{
  position:relative;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,4vw,3.5rem);
  align-items:center;
  padding-block:clamp(3rem,7vw,6rem);
}
.hero__copy h1{ color:#fff; margin-bottom:.35em; }
.hero__copy h1 .hl{ color:var(--accent); }
.hero__copy .eyebrow{ color:var(--accent); }
.hero__copy .lede{ color:var(--txt-on-dark); opacity:.86; max-width:46ch; }

.hero__pts{ list-style:none; padding:0; margin:1.5rem 0 2rem; display:grid; gap:.6rem; }
.hero__pts li{ position:relative; padding-left:1.9rem; font-weight:500; }
.hero__pts li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:11px; height:11px; background:var(--accent);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.hero__btns{ display:flex; gap:.85rem; flex-wrap:wrap; }

/* --------------------------------- FORMS -------------------------------- */
/* ==========================================================================
   BLOG
   Index: trust strip, image cards, pagination.
   Post: 72/28 with a sticky sidebar, then prev/next navigation.
   ========================================================================== */

/* ---- index: trust strip -------------------------------------------------- */
.blogtrust{ padding-top:2rem; padding-bottom:0; }
.blogtrust__in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.9rem 1.2rem; text-align:center;
  padding:1rem 1.25rem;
  background:var(--cream); border-radius:var(--radius);
}
.blogtrust__in p{ margin:0; font-size:.95rem; }
/* accent gold fails contrast as text, so the darker token */
.blogtrust__stars{ color:var(--accent-text); letter-spacing:.06em; margin-right:.35rem; }
.blogtrust__sep{ width:1px; height:1.1rem; background:currentColor; opacity:.2; }
@media (max-width:640px){ .blogtrust__sep{ display:none; } }

/* ---- index: post cards --------------------------------------------------- */
.pgrid{
  display:grid; gap:1.6rem;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.pcard{
  display:flex; flex-direction:column;
  background:var(--paper); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.pcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.pcard__media{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--cream); }
.pcard__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.pcard__body{ padding:1.15rem 1.25rem 1.35rem; display:flex; flex-direction:column; flex:1; }
.pcard__date{
  margin:0 0 .45rem; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-text); font-weight:600;
}
/* No opacity here: dimming --accent-text dropped it to 3.45:1. Solid muted
   token instead, which passes on paper. */
.pcard__date--none{ color:var(--txt-muted); }
.pcard__h{ margin:0 0 1rem; font-size:1.12rem; line-height:1.3; }
.pcard__h a{ color:inherit; text-decoration:none; }
.pcard__h a:hover{ text-decoration:underline; }
.pcard__go{ margin-top:auto; font-weight:700; font-size:.9rem; color:var(--accent-text); }

/* ---- index: pagination --------------------------------------------------- */
.pager{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:.5rem; margin-top:2.6rem;
}
.pager__nums{ display:flex; gap:.35rem; }
.pager__n,.pager__step{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.5rem; height:2.5rem; padding:0 .8rem;
  border-radius:8px; border:1px solid rgba(7,16,24,.16);
  font-weight:600; font-size:.95rem; text-decoration:none; color:inherit;
}
.pager__n:hover,.pager__step:hover{ border-color:var(--navy); }
.pager__n--on{ background:var(--navy); border-color:var(--navy); color:#fff; }
/* opacity:.4 put this at 2.07:1. The disabled state is carried by the muted
   colour and the faded border instead, with the label still readable. */
.pager__step--off{ color:var(--txt-muted); border-color:rgba(7,16,24,.08); cursor:default; }

/* ---- post: two column with sticky sidebar -------------------------------- */
.postwrap__in{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:2.5rem; align-items:start; }
/* Most of the client's bathroom photography is portrait (720x900). Left to its
   natural ratio a hero renders ~1120px tall and pushes the article off screen,
   so it is cropped to a landscape band like the index cards. */
.postmain__hero{
  margin:0 0 1.8rem; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:16/9; background:var(--cream);
}
.postmain__hero img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:640px){ .postmain__hero{ aspect-ratio:4/3; } }
.postside__sticky{ position:sticky; top:6.5rem; display:grid; gap:1.4rem; }

.swidget{ background:var(--cream); border-radius:var(--radius); overflow:hidden; }
.swidget__h{
  margin:0; padding:.85rem 1.1rem;
  background:var(--navy); color:#fff;
  font-size:1.05rem; line-height:1.3; text-align:center;
}
.swidget__list,.swidget__posts{ list-style:none; margin:0; padding:.4rem 0; }
.swidget__list li{ border-bottom:1px solid rgba(7,16,24,.09); }
.swidget__list li:last-child{ border-bottom:0; }
.swidget__list a{
  display:block; padding:.62rem 1.1rem; color:inherit;
  text-decoration:none; font-size:.95rem;
}
.swidget__list a:hover{ background:var(--navy); color:#fff; }
.swidget__posts li{ border-bottom:1px solid rgba(7,16,24,.09); }
.swidget__posts li:last-child{ border-bottom:0; }
.swidget__posts a{ display:block; padding:.7rem 1.1rem; color:inherit; text-decoration:none; font-size:.92rem; line-height:1.35; }
.swidget__posts a:hover{ text-decoration:underline; }
.swidget__date{
  display:block; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent-text); font-weight:600; margin-bottom:.15rem;
}
.swidget__all{ margin:0; padding:.7rem 1.1rem 1rem; font-size:.9rem; }
.swidget__cta{ padding:1.1rem; text-align:center; }
.swidget__cta p{ margin:0 0 1rem; font-size:.93rem; }
.swidget__btn{ display:block; width:100%; }
.swidget__tel{ display:block; margin-top:.7rem; font-weight:600; color:var(--ink); text-decoration:underline; font-size:.92rem; }

/* ---- post: prev/next ----------------------------------------------------- */
.postnav{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  margin-top:2.6rem; padding-top:1.8rem;
  border-top:1px solid rgba(7,16,24,.12);
}
.postnav__l{
  display:block; padding:1rem 1.15rem;
  background:var(--cream); border-radius:var(--radius);
  color:inherit; text-decoration:none;
}
.postnav__l:hover{ background:var(--navy); color:#fff; }
.postnav__l:hover .postnav__lbl{ color:#fff; }
.postnav__l--next{ text-align:right; }
.postnav__l--off{ background:none; }
.postnav__lbl{
  display:block; font-size:.75rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-text); font-weight:700; margin-bottom:.3rem;
}
.postnav__t{ display:block; font-weight:600; line-height:1.3; font-size:.98rem; }

@media (max-width:980px){
  .postwrap__in{ grid-template-columns:1fr; }
  .postside__sticky{ position:static; }
}
@media (max-width:560px){
  .postnav{ grid-template-columns:1fr; }
  .postnav__l--next{ text-align:left; }
}

/* ---- LeadConnector form embeds -------------------------------------------
   The forms are GoHighLevel iframes, so leads route into the pipeline the
   client already runs. form_embed.js resizes each iframe to its real content
   height once it loads; the heights below are GHL's own reported fallbacks,
   set explicitly so the layout holds and nothing shifts while the script
   arrives. Field styling lives inside GoHighLevel, not in this file. */
.lcform{
  display:block; width:100%; border:0;
  border-radius:var(--radius); background:var(--paper);
  box-shadow:var(--shadow-lg);
}
/* measured, not guessed: the Contact Us form renders at 1259px in this column.
   Setting it up front means form_embed.js barely has to adjust, so there is
   almost no layout shift when it loads. */
.lcform--dark{ height:1260px; }
@media (max-width:900px){ .lcform--dark{ height:1400px; } }

/* ---- Hero conversion card ------------------------------------------------
   Stands in for an embedded form above the fold. The GoHighLevel form is
   1383px tall and would bury the hero, so this carries the offer and sends
   people to the real form in #estimate. */
.herocard{
  background:var(--paper); color:var(--ink);
  border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.25rem);
  box-shadow:var(--shadow-lg);
}
.herocard__rating{ margin:0 0 .35rem; font-size:.95rem; }
/* accent gold fails contrast as text on paper, so the darker text token */
.herocard__stars{ color:var(--accent-text); letter-spacing:.06em; margin-right:.4rem; }
.herocard__h{ margin:.1rem 0 .5rem; font-size:clamp(1.5rem,2.4vw,1.9rem); line-height:1.15; }
.herocard__sub{ margin:0 0 1.1rem; }
.herocard__pts{ list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:.55rem; }
.herocard__pts li{ position:relative; padding-left:1.6rem; font-size:.97rem; }
.herocard__pts li::before{
  content:"✓"; position:absolute; left:0; top:0;
  color:var(--accent-text); font-weight:700;
}
.herocard__cta{ display:block; text-align:center; width:100%; }
.herocard__call{
  display:block; text-align:center; margin-top:.8rem;
  color:var(--ink); font-weight:600; text-decoration:underline;
}
.herocard__hours{ margin:.7rem 0 0; text-align:center; font-size:.85rem; opacity:.75; }

.qf{ background:var(--paper); border-radius:var(--radius); padding:clamp(1.5rem,3vw,2.25rem); box-shadow:var(--shadow-lg); }
.qf__h{ font-size:1.75rem; margin-bottom:.2em; }
.qf__sub{ font-size:.9375rem; color:var(--txt-muted); margin-bottom:1.35rem; }
.qf__row{ margin-bottom:1rem; }
.qf__row--2{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.qf label{ display:block; font-size:.8125rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--navy); margin-bottom:.35rem; }
.qf input,.qf select,.qf textarea{
  width:100%; font-family:var(--ff-body); font-size:1rem;
  padding:.8rem .9rem; border:1.5px solid #CBD3DC; border-radius:var(--radius);
  background:#fff; color:var(--txt-body);
}
.qf input:focus,.qf select:focus,.qf textarea:focus{ outline:3px solid var(--accent); outline-offset:1px; border-color:var(--navy-mid); }
.qf textarea{ resize:vertical; }
.qf__btn{ width:100%; margin-top:.35rem; }
.qf__note{ font-size:.8125rem; color:var(--txt-muted); text-align:center; margin:.85rem 0 0; }

.qf--dark{ background:rgba(255,255,255,.05); border:1px solid var(--line); box-shadow:none; }
.qf--dark label{ color:var(--accent); }
.qf--dark .qf__note{ color:var(--txt-on-dark); opacity:.62; }

/* -------------------------------- PROBLEM ------------------------------- */
.prob{ background:var(--paper); border-radius:var(--radius); padding:1.6rem 1.4rem; border-top:4px solid var(--accent); box-shadow:var(--shadow-sm); }
.prob h3{ font-size:1.1875rem; margin-bottom:.45em; }
.prob p{ font-size:.9375rem; margin:0; }

/* -------------------------------- PROCESS ------------------------------- */
.steps{ list-style:none; padding:0; margin:0; display:grid; gap:clamp(1.25rem,2.5vw,2rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); counter-reset:s; }
.step{ position:relative; padding-top:3.4rem; }
.step__n{
  position:absolute; top:0; left:0;
  font-family:var(--ff-head); font-size:2.75rem; font-weight:700;
  color:transparent; -webkit-text-stroke:1.5px var(--accent); line-height:1;
}
.step h3{ font-size:1.25rem; }
.step p{ font-size:.9375rem; opacity:.85; margin:0; }
.steps__note{ margin:2.25rem 0 0; }

/* ------------------------------- SERVICES ------------------------------- */
.svc{
  display:block; text-decoration:none; color:inherit;
  background:var(--paper); border:1px solid var(--line-dark); border-radius:var(--radius);
  padding:1.75rem 1.5rem; transition:transform .2s var(--ease-out), box-shadow .2s, border-color .2s;
}
.svc:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--accent); }
.svc:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
/* Service card icon.
   Sits in a tinted square above the heading so the cards read as a set rather
   than a wall of text. Inherits currentColor, so the hover state recolours the
   glyph by changing text colour alone. */
.svc__icon{
  display:block; width:26px; height:26px;
  margin-bottom:1rem;
  color:var(--navy-mid);
  transition:color .2s;
}
.svc{ position:relative; }
.svc::before{
  content:""; position:absolute; top:1.75rem; left:1.5rem;
  width:52px; height:52px; border-radius:10px;
  background:var(--cream); border:1px solid var(--line-dark);
  transition:background .2s, border-color .2s;
}
.svc__icon{ position:relative; z-index:1; margin:13px 0 1.65rem 13px; }
.svc:hover .svc__icon{ color:var(--ink); }
.svc:hover::before{ background:var(--accent); border-color:var(--accent); }

.svc h3{ margin-bottom:.4em; }
.svc p{ font-size:.9375rem; margin-bottom:1rem; }
.svc__go{ font-family:var(--ff-head); font-weight:600; font-size:.9375rem; letter-spacing:.06em; text-transform:uppercase; color:var(--navy-mid); }
.svc__go::after{ content:" \2192"; }
.svc__more{ margin:2.25rem 0 0; }

/* ------------------------------ LOCAL KNOW ------------------------------ */
.local__in{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4rem); align-items:start; }
.local__list{ list-style:none; padding:0; margin:0; display:grid; gap:.1rem; }
.local__list li{ display:grid; gap:.15rem; padding:1.05rem 0; border-bottom:1px solid var(--line-dark); }
.local__list li:first-child{ border-top:1px solid var(--line-dark); }
.local__list strong{ font-family:var(--ff-head); font-size:1.1875rem; color:var(--navy); }
.local__list span{ font-size:.9375rem; color:var(--txt-muted); }

/* -------------------------------- CTA BAND ------------------------------ */
.band{ background:var(--accent); color:var(--ink); }
.band__in{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding-block:clamp(2.25rem,4vw,3.25rem); }
.band h2{ color:var(--ink); margin-bottom:.15em; }
.band p{ margin:0; color:#3A2E00; }
.band__btns{ display:flex; gap:.85rem; flex-wrap:wrap; }
.band .btn--accent{ background:var(--ink); color:var(--accent); }
.band .btn--accent:hover{ background:#000; }

/* --------------------------------- POSTS -------------------------------- */
.post{
  display:flex; flex-direction:column; gap:.5rem;
  background:var(--paper); border:1px solid var(--line-dark); border-radius:var(--radius);
  padding:1.6rem 1.5rem; text-decoration:none; color:inherit;
  transition:transform .2s var(--ease-out), box-shadow .2s;
}
.post:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.post:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.post__date{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-muted); }
.post h3{ font-size:1.1875rem; margin:0; }
.post__go{ font-family:var(--ff-head); font-weight:600; font-size:.875rem; letter-spacing:.06em; text-transform:uppercase; color:var(--navy-mid); margin-top:auto; }
.post__go::after{ content:" \2192"; }

/* -------------------------------- ACTION -------------------------------- */
.act{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,4vw,4rem); align-items:start; }
.act__pts{ list-style:none; padding:0; margin:1.75rem 0 0; display:grid; gap:1.1rem; }
.act__pts li{ display:grid; gap:.2rem; }
.act__pts strong{ font-family:var(--ff-head); font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.act__pts a{ color:#fff; font-family:var(--ff-head); font-size:1.5rem; text-decoration:none; }
.act__pts a:hover{ color:var(--accent); }
.act__pts span{ opacity:.85; }

/* ------------------------------ RESPONSIVE ------------------------------ */
@media (max-width:1080px){
  .nav{ gap:.85rem; }
  .nav a{ font-size:.9375rem; }
  .hdr__tel{ display:none; }
}
@media (max-width:900px){
  .hero__in,.local__in,.act{ grid-template-columns:1fr; }
  .ftr__in{ grid-template-columns:1fr 1fr; }
  .rev__in{ grid-template-columns:1fr; }
  .rev__score{ display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; }
  .rev__num{ margin:0; }
  .burger{ display:block; }
  .hdr__cta{ order:3; }
  .hdr__cta .btn{ display:none; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--paper); box-shadow:var(--shadow-lg);
    max-height:0; overflow:hidden; transition:max-height .28s var(--ease-out);
  }
  .nav.is-open{ max-height:26rem; }
  .nav a{ padding:1rem var(--gut); border-bottom:1px solid var(--line-dark); }
  .hdr__in{ position:relative; }
}
@media (max-width:560px){
  .hdr__bar-in{ font-size:.75rem; }
  .qf__row--2{ grid-template-columns:1fr; }
  .ftr__in{ grid-template-columns:1fr; }
  .band__in{ flex-direction:column; align-items:flex-start; }
  .hero__btns .btn,.band__btns .btn{ flex:1 1 100%; }
}

/* ------------------------- CONTRAST CORRECTIONS -------------------------
   Found by the full-page rendered contrast sweep, Phase 1 build gate.
   ------------------------------------------------------------------------ */

/* `.ftr a` was overriding `.btn--accent`, putting near-white text on the
   accent yellow. That is the exact failure the live site makes 17 times and
   the one rule SONIC-HANDOFF section 2 calls non-negotiable. */
.ftr .btn--accent{ color:var(--ink); }
.ftr .btn--accent:hover{ color:var(--ink); }

/* Tagline in the footer lockup was inheriting the light-surface muted token
   onto the near-black footer. */
.brand--ftr .brand__txt em{ color:rgba(233,238,244,.75); }

/* `.lede` had a dark-section rule but no ink-section rule, so the final CTA
   intro was muted grey on near-black. */
.sect--ink .lede{ color:var(--txt-on-dark); opacity:.85; }


/* -------------------------------- LOGOS --------------------------------- */
.brand img{ height:46px; width:auto; }
.ftr__logo{ display:inline-block; }
.ftr__logo img{ height:64px; width:auto; }

/* ----------------------------- SERVICE AREAS ---------------------------- */
.areas{ background:var(--paper); }
.areas__grid{
  list-style:none; padding:0; margin:0 auto;
  display:grid; gap:.75rem; max-width:64rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
}
.areas__grid a{
  display:block; text-align:center; text-decoration:none;
  font-family:var(--ff-head); font-size:1.125rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--navy);
  background:var(--cream); border:1px solid var(--line-dark); border-radius:var(--radius);
  padding:1rem .75rem;
  transition:background-color .18s, border-color .18s, transform .18s var(--ease-out);
}
.areas__grid a:hover{ background:var(--navy); color:#fff; border-color:var(--navy); transform:translateY(-2px); }
.areas__grid a:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.areas__note{ text-align:center; margin:2rem 0 0; color:var(--txt-muted); }
.areas__note a{ font-weight:600; }

/* -------------------------------- REVIEWS ------------------------------- */
/* Compact. Score block on the left, three short quotes on the right. */
.rev__in{
  display:grid; grid-template-columns:minmax(0,17rem) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3.5rem); align-items:center;
}
.rev__score{ text-align:center; }
.rev__stars{ font-size:1.6rem; color:var(--accent); letter-spacing:.12em; line-height:1; }
.rev__num{ font-size:1.0625rem; margin:.6rem 0 1rem; }
.rev__num strong{ color:var(--accent); font-family:var(--ff-head); font-size:1.5rem; }
.rev__quotes{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); }
.rev__q{
  margin:0; padding:1.15rem 1.15rem 1rem;
  background:rgba(255,255,255,.06); border-left:3px solid var(--accent);
  border-radius:var(--radius);
}
.rev__q p{ margin:0 0 .6rem; font-size:.9375rem; line-height:1.55; }
.rev__q cite{
  font-style:normal; font-family:var(--ff-head); font-size:.875rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
}

/* ---------------------------------- FAQ --------------------------------- */
.faqsec{ background:var(--cream); }
.faqsec .hl{ color:var(--accent-text); }
.faqsec__eyebrow{ color:var(--accent-text); }
.faqs{
  display:grid; gap:1rem clamp(1.25rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  align-items:start;
}
.faqs__col{ display:grid; gap:1rem; align-content:start; }
.faq{
  background:var(--paper); border:1px solid var(--line-dark); border-radius:var(--radius);
  transition:border-color .18s, box-shadow .18s;
}
.faq[open]{ border-color:var(--accent); box-shadow:var(--shadow-sm); }
.faq summary{
  cursor:pointer; list-style:none; position:relative;
  padding:1.15rem 3.25rem 1.15rem 1.35rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary h3{ margin:0; font-size:1.0625rem; font-family:var(--ff-body); font-weight:600; color:var(--navy); text-transform:none; letter-spacing:0; line-height:1.4; }
.faq[open] summary h3{ color:var(--accent-text); }
.faq summary::after{
  content:"+"; position:absolute; right:1.25rem; top:50%; transform:translateY(-50%);
  font-family:var(--ff-head); font-size:1.5rem; font-weight:600;
  color:var(--accent-text); line-height:1;
}
.faq[open] summary::after{ content:"\2212"; }
.faq summary:focus-visible{ outline:3px solid var(--accent); outline-offset:-3px; border-radius:var(--radius); }
.faq__a{ padding:0 3.25rem 1.25rem 1.35rem; }
.faq__a p{ margin:0; font-size:.9375rem; color:var(--txt-muted); }

/* -------------------------------- FOOTER -------------------------------- */
.ftr{ background:var(--ink); color:var(--txt-on-dark); }
.ftr__in{
  display:grid; grid-template-columns:1.55fr 1fr 1.15fr 1.3fr;
  gap:clamp(1.75rem,3vw,3rem);
  padding-block:clamp(2.75rem,5vw,4rem);
}
.ftr h3{
  font-family:var(--ff-head); font-size:1.0625rem; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; margin:0 0 1.15rem; padding-bottom:.6rem;
  position:relative;
}
.ftr h3::after{
  content:""; position:absolute; left:0; bottom:0;
  width:2.25rem; height:3px; background:var(--accent);
}
.ftr h3.ftr__h-sm{ margin-top:2.5rem; }
.ftr p{ font-size:.9375rem; color:rgba(233,238,244,.82); }
.ftr a{ color:rgba(233,238,244,.82); text-decoration:none; transition:color .16s; }
.ftr a:hover{ color:var(--accent); }

.ftr__list{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; font-size:.9375rem; }
.ftr__list li{ position:relative; padding-left:1rem; }
.ftr__list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:5px; height:5px; border-radius:50%; background:var(--accent);
}

.soc{ list-style:none; padding:0; margin:1.35rem 0 0; display:flex; gap:.6rem; }
.soc a{
  display:grid; place-items:center; width:36px; height:36px;
  background:rgba(255,255,255,.08); border-radius:var(--radius); color:var(--txt-on-dark);
  transition:background-color .18s, color .18s;
}
.soc a:hover{ background:var(--accent); color:var(--ink); }
.soc a:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

.ftr__contact{ list-style:none; padding:0; margin:0; display:grid; gap:.9rem; font-size:.9375rem; }
.ftr__contact li{ display:flex; gap:.7rem; align-items:flex-start; line-height:1.5; }
.ftr__ico{
  flex-shrink:0; display:grid; place-items:center; width:28px; height:28px;
  background:var(--accent); color:var(--ink); border-radius:var(--radius);
}
.ftr__contact a{ font-family:var(--ff-head); font-size:1.3rem; color:var(--accent); }
.ftr__hours{ margin:0; font-size:.9375rem; }

.ftr__map{ margin-top:1.5rem; }
.ftr__map iframe{ display:block; border-radius:var(--radius); filter:grayscale(.25); }
.ftr__map-link{ display:inline-block; margin-top:.5rem; font-size:.8125rem; letter-spacing:.04em; }

.ftr__lic{ margin:1.35rem 0 0; font-size:.8125rem; }

.ftr__base{ border-top:1px solid var(--line); }
.ftr__base-in{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-block:1.25rem; }
.ftr__base p{ margin:0; font-size:.8125rem; }
.ftr__legal{ display:flex; gap:1.5rem; }

.svc__all{ margin:2.5rem 0 0; text-align:center; }

/* ==========================================================================
   RESPONSIVE, PART 2
   The footer/FAQ/areas blocks above were authored after the original media
   queries, so they outranked them on source order. These re-assert at the end.
   ========================================================================== */
@media (max-width:1080px){
  .ftr__in{ grid-template-columns:1.4fr 1fr 1fr; }
  .ftr__col--brand{ grid-column:1 / -1; }
}
@media (max-width:900px){
  .ftr__in{ grid-template-columns:1fr 1fr; }
  .ftr__col--brand{ grid-column:1 / -1; }
  .rev__in{ grid-template-columns:1fr; }
  .rev__score{ display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; }
  .rev__num{ margin:0; }
}
@media (max-width:560px){
  .ftr__in{ grid-template-columns:1fr; }
  .ftr__col--brand{ grid-column:auto; }
  .ftr__base-in{ flex-direction:column; gap:.6rem; }
  .ftr__legal{ gap:1rem; }
  .faqs{ grid-template-columns:1fr; }
  .areas__grid{ grid-template-columns:1fr 1fr; }
  .brand img{ height:38px; }
  .ftr__logo img{ height:54px; }
}

/* -------------------------------- GALLERY -------------------------------
   Projects Completed. Real client photography, no before/after pairing.
   ------------------------------------------------------------------------ */
.gal{
  display:grid; gap:clamp(.6rem,1.2vw,1rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));
}
.gal__i{ margin:0; position:relative; overflow:hidden; border-radius:var(--radius); background:#DDD8CC; }
.gal__i img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  transition:transform .4s var(--ease-out);
}
.gal__i:hover img{ transform:scale(1.04); }
.gal__i figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.9rem .9rem .7rem;
  background:linear-gradient(to top, rgba(11,22,32,.88) 0%, rgba(11,22,32,.55) 55%, transparent 100%);
  color:#fff; font-family:var(--ff-head); font-size:1rem;
  letter-spacing:.05em; text-transform:uppercase;
}
.gal__tag{
  display:block; margin-top:.25rem;
  font-family:var(--ff-body); font-size:.6875rem; font-weight:600;
  letter-spacing:.04em; text-transform:none;
  color:var(--accent);
}
/* The "Stock" corner badge was removed at the client's request 2026-08-28.
   It was a CSS ::before, which is why deleting the caption markup did not make
   it disappear. Do not reinstate without asking. */
@media (max-width:560px){
  .gal{ grid-template-columns:1fr 1fr; }
  .gal__i figcaption{ font-size:.8125rem; padding:1.5rem .6rem .55rem; }
}

/* ==========================================================================
   PHASE 2 - interior pages
   ========================================================================== */

/* --------------------------------- SUBHERO ------------------------------- */
.subhero{ position:relative; background:var(--navy); color:var(--txt-on-dark); overflow:hidden; }
.subhero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(110% 90% at 85% 10%, rgba(31,111,178,.5) 0%, transparent 62%),
    linear-gradient(155deg, #0B2545 0%, #0B1620 100%);
}
.subhero__bg::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
}
.subhero__in{ position:relative; padding-block:clamp(2rem,5vw,4rem) clamp(3rem,6vw,4.5rem); max-width:62rem; }
.subhero h1{ color:#fff; margin-bottom:.3em; }
.subhero h1 .hl{ color:var(--accent); }
.subhero .eyebrow{ color:var(--accent); }
.subhero .lede{ color:var(--txt-on-dark); opacity:.86; max-width:52ch; margin-bottom:2rem; }

/* ------------------------------- BREADCRUMBS ----------------------------- */
.crumbs{ margin-bottom:1.5rem; }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; padding:0; margin:0; font-size:.8125rem; }
.crumbs li+li::before{ content:"/"; margin-right:.4rem; opacity:.45; }
.crumbs a{ color:var(--txt-on-dark); opacity:.75; text-decoration:none; }
.crumbs a:hover{ color:var(--accent); opacity:1; }
.crumbs [aria-current]{ color:var(--accent); }

/* --------------------------------- INTRO --------------------------------- */
.intro{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,4vw,4rem); align-items:start; }
.checks{ list-style:none; padding:0; margin:0; display:grid; gap:.1rem; }
.checks li{
  position:relative; padding:.85rem 0 .85rem 2rem;
  border-bottom:1px solid var(--line-dark); font-weight:500;
}
.checks li:first-child{ border-top:1px solid var(--line-dark); }
.checks li::before{
  content:""; position:absolute; left:0; top:1.15em;
  width:11px; height:11px; background:var(--accent);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}

/* ------------------------- REVIEW QUOTES ON LIGHT ------------------------ */
.rev__q--light{
  background:var(--cream); border-left:3px solid var(--accent);
}
.rev__q--light p{ color:var(--txt-body); }
.rev__q--light cite{ color:var(--accent-text); }

/* -------------------------------- CONTACT -------------------------------- */
.contact{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
.contact__cards{ display:grid; gap:1rem; }
.ccard{
  background:var(--cream); border:1px solid var(--line-dark);
  border-radius:var(--radius); padding:1.5rem 1.4rem;
}
.ccard h2{ font-size:1.25rem; margin-bottom:.5em; }
.ccard p{ font-size:.9375rem; margin:0 0 .5em; }
.ccard p:last-child{ margin-bottom:0; }
.ccard__big{
  display:inline-block; font-family:var(--ff-head); font-size:2rem;
  color:var(--navy); text-decoration:none; margin-bottom:.35rem;
}
.ccard__big:hover{ color:var(--navy-mid); }
.ccard__addr{ font-size:1.0625rem !important; }
.contact__map iframe{ display:block; border-radius:var(--radius); }

/* ------------------------------ RESPONSIVE ------------------------------- */
@media (max-width:900px){
  .intro,.contact{ grid-template-columns:1fr; }
}

/* .local__list was authored for the homepage's LIGHT section (navy headings on
   white). Phase 2 reuses it inside .sect--dark, where navy-on-navy is invisible
   and the hairline borders vanish. These are the dark-context overrides. */
.sect--dark .local__list strong,
.sect--ink  .local__list strong{ color:#fff; }
.sect--dark .local__list span,
.sect--ink  .local__list span{ color:var(--txt-on-dark); opacity:.8; }
.sect--dark .local__list li,
.sect--ink  .local__list li{ border-bottom-color:var(--line); }
.sect--dark .local__list li:first-child,
.sect--ink  .local__list li:first-child{ border-top-color:var(--line); }


/* Inline prose links inside dark sections inherited a{color:var(--navy-mid)},
   which is 2.91:1 on navy. Buttons are excluded so they keep their own colours. */
.sect--dark p a:not(.btn),
.sect--ink  p a:not(.btn),
.subhero    p a:not(.btn),
.hero       p a:not(.btn){ color:var(--accent); text-underline-offset:2px; }
.sect--dark p a:not(.btn):hover,
.sect--ink  p a:not(.btn):hover{ color:#fff; }

/* ==========================================================================
   PHASE 4 - long-form prose, blog headers
   ========================================================================== */
.post-hd{ background:var(--navy); color:var(--txt-on-dark); padding-block:clamp(2rem,5vw,3.5rem) clamp(2.5rem,5vw,4rem); }
.post-hd__in{ max-width:56rem; }
.post-hd h1{ color:#fff; font-size:clamp(2rem,1.4rem + 2.8vw,3.5rem); text-transform:none; letter-spacing:-.015em; }
.post-hd .eyebrow{ color:var(--accent); }

.prose{ max-width:46rem; }
.prose h2{ font-size:clamp(1.6rem,1.3rem + 1.2vw,2.25rem); margin-top:2.25em; }
.prose h3{ font-size:clamp(1.2rem,1.1rem + .5vw,1.45rem); margin-top:1.9em; }
.prose h4{ font-size:1.0625rem; margin-top:1.7em; letter-spacing:.02em; text-transform:uppercase; color:var(--navy-mid); }
.prose h2:first-child,.prose h3:first-child{ margin-top:0; }
.prose p{ margin:0 0 1.15em; }
.prose a{ color:var(--navy-mid); text-underline-offset:2px; }
.prose__list{ margin:0 0 1.4em; padding-left:1.35rem; display:grid; gap:.5rem; }
.prose__list li{ padding-left:.25rem; }
.prose__list li::marker{ color:var(--accent-deep); }
.prose .ph{ display:block; margin-bottom:2rem; }

/* -------------------------------- WARRANTY ------------------------------- */
.warr__i{
  background:var(--paper); border:1px solid var(--line-dark); border-radius:var(--radius);
  padding:1.9rem 1.5rem 1.6rem; text-align:center;
}
.warr__n{
  display:block; font-family:var(--ff-head); font-weight:700;
  font-size:clamp(3rem,2.2rem + 2.6vw,4.5rem); line-height:.9;
  color:var(--accent-text); margin-bottom:.35rem;
}
.warr__i h3{ font-size:1.0625rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.6em; }
.warr__i p{ font-size:.9375rem; margin:0; }
.sect--cream .warr__i{ background:#fff; }

/* ---------------------------------- TEAM --------------------------------- */
.team{
  list-style:none; padding:0; margin:0;
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
}
.team li{
  background:#fff; border:1px solid var(--line-dark); border-radius:var(--radius);
  border-top:4px solid var(--accent);
  padding:1.6rem 1.25rem; text-align:center;
  font-family:var(--ff-head); font-size:1.375rem; color:var(--navy);
  letter-spacing:.01em;
}

/* --------------------------------- SITEMAP ------------------------------- */
.smap{ grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); display:grid; gap:.6rem 1.5rem; }
.smap li::before{ background:var(--accent-deep); }
.smap a{ color:var(--navy-mid); }
.smap a:hover{ color:var(--navy); }

/* wider measure for the long-form local sections on area pages */
.prose--wide{ max-width:52rem; }
.prose--wide h2{ margin-top:0; }

/* ============================ SERVICES MEGA MENU ==========================
   Opens on hover AND on focus-within so it is keyboard reachable, plus an
   explicit toggle button for touch. The parent "Services" stays a real link to
   the hub, so the menu is an addition rather than a replacement for it. */
.nav__item{ position:relative; display:flex; align-items:center; gap:.15rem; }
.nav__top{ /* inherits .nav a */ }
.nav__toggle{
  background:none; border:0; cursor:pointer; padding:.35rem .2rem; line-height:0;
  display:inline-grid; place-items:center;
}
.nav__toggle span{
  display:block; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid var(--navy); transition:transform .18s;
}
.nav__toggle:hover span{ border-top-color:var(--navy-mid); }
.nav__toggle:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:3px; }
.nav__item.is-open .nav__toggle span{ transform:rotate(180deg); }

.mega{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-6px);
  width:min(44rem, calc(100vw - 3rem));
  padding-top:.55rem;            /* transparent bridge, keeps hover continuous */
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s, transform .18s var(--ease-out), visibility .18s;
  z-index:120;
}
.mega__in{
  background:var(--paper); border:1px solid var(--line-dark); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:1.75rem;
}
.nav__item:hover .mega,
.nav__item:focus-within .mega,
.nav__item.is-open .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }

.mega__in{ display:grid; grid-template-columns:1fr 1fr; gap:1.75rem 2.5rem; }
.mega__h{
  font-family:var(--ff-head); font-size:.875rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--navy-mid);
  margin:0 0 .85rem; padding-bottom:.5rem; border-bottom:2px solid var(--accent);
}
.mega ul{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem; }
.mega li a{
  display:block; padding:.4rem .5rem; margin-left:-.5rem;
  font-family:var(--ff-body); font-size:.9375rem; font-weight:500;
  text-transform:none; letter-spacing:0;
  color:var(--txt-body); text-decoration:none; border-radius:3px;
  border-bottom:0;
}
.mega li a:hover{ background:var(--cream); color:var(--navy); }
.mega li a:focus-visible{ outline:3px solid var(--accent); outline-offset:1px; }


@media (max-width:900px){
  /* inside the mobile drawer the menu becomes a plain expanding block */
  .nav__item{ flex-wrap:wrap; padding:0; }
  .nav__top{ flex:1; }
  .nav__toggle{ padding:1rem var(--gut); }
  .mega{
    position:static; transform:none; width:100%; opacity:1; visibility:visible;
    pointer-events:auto; box-shadow:none; border:0; border-top:1px solid var(--line-dark);
    border-radius:0; padding:0; max-height:0; overflow:hidden; transition:max-height .28s var(--ease-out);
  }
  .mega{ padding-top:0; }
  .mega__in{ box-shadow:none; border:0; border-radius:0; padding:1rem var(--gut) 1.25rem; }
  .nav__item.is-open .mega{ max-height:60rem; }
  .mega__in{ grid-template-columns:1fr; gap:1.25rem; }
}

/* ===================== PHASE 8 SECTIONS ===================== */
.steps__cta{ margin:2.5rem 0 0; }

/* find us: map + NAP */
.findus{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,4vw,3.5rem); align-items:center; }
.findus__list{ list-style:none; padding:0; margin:1.5rem 0; display:grid; gap:.9rem; }
.findus__list li{ display:grid; gap:.15rem; }
.findus__list strong{ font-family:var(--ff-head); font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--navy-mid); }
.findus__list a{ font-family:var(--ff-head); font-size:1.5rem; color:var(--navy); text-decoration:none; }
.findus__list a:hover{ color:var(--navy-mid); }
.findus__map iframe{ display:block; border-radius:var(--radius); box-shadow:var(--shadow-sm); }

/* explore services chips */
.explore{ list-style:none; padding:0; margin:0; display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)); }
.explore a{
  display:block; padding:1rem 1.1rem; text-decoration:none;
  background:var(--paper); border:1px solid var(--line-dark); border-radius:var(--radius);
  font-family:var(--ff-head); font-size:1.0625rem; letter-spacing:.03em; text-transform:uppercase; color:var(--navy);
  transition:border-color .18s, transform .18s var(--ease-out);
}
.explore a:hover{ border-color:var(--accent); transform:translateY(-2px); }
.explore a:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

/* closing CTA */
.cta2__in{ max-width:52rem; text-align:center; margin-inline:auto; }
.cta2 h2{ color:#fff; }
.cta2 .eyebrow{ color:var(--accent); }
.cta2 .lede{ color:var(--txt-on-dark); opacity:.86; margin-inline:auto; }
.cta2 .hero__btns{ justify-content:center; }

/* reviews on a light background */
.rev:not(.sect--dark) .rev__stars{ color:var(--accent-text); }
.sect.rev:not(.sect--dark) .rev__num{ color:var(--txt-body); }
.sect.rev:not(.sect--dark) .rev__num strong{ color:var(--accent-text); }

@media (max-width:900px){ .findus{ grid-template-columns:1fr; } }