/* styles.css - everything below the fold. Loaded async; tokens and the reset
   live in the inlined critical.css.

   Colour note: --accent is for SURFACES and for text on dark. Orange text on a
   light surface uses --accent-ink (4.62:1, vs 2.56:1 for --accent). Measured
   with tools/check-contrast.py. */

/* ------------------------------------------------------------- trust bar */
.trust{border-block:1px solid var(--border);background:color-mix(in oklab,var(--secondary) 40%,var(--bg))}
.trust__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding-block:1.5rem;text-align:center}
@media (min-width:768px){ .trust__grid{grid-template-columns:repeat(4,1fr)} }
.trust__item{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:.875rem;font-weight:500;color:color-mix(in oklab,var(--fg) 80%,transparent);
}
.trust__item .icon{color:var(--accent-ink)}

/* --------------------------------------------------------- services grid */
/* Five services, not the original four. 2 cols at sm, 3 at md (so the fifth
   card sits in a deliberate 3+2 arrangement rather than orphaned in a 4-col
   row), 5 across at xl. See docs/PARITY.md. */
.services__grid{display:grid;gap:1.25rem;margin-top:2.5rem;grid-template-columns:1fr}
@media (min-width:640px){ .services__grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:768px){ .services__grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1280px){ .services__grid{grid-template-columns:repeat(5,1fr)} }

.card{
  display:flex;flex-direction:column;height:100%;overflow:hidden;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-2xl);
  box-shadow:var(--shadow-card);transition:box-shadow .3s ease,transform .3s ease;
}
.card:hover{box-shadow:var(--shadow-elegant)}
.card__media{position:relative;height:11rem;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card__media img{transform:scale(1.05)}
.card__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,color-mix(in oklab,var(--brand) 90%,transparent),color-mix(in oklab,var(--brand) 30%,transparent) 45%,transparent);
}
.card__badge{
  position:absolute;top:.75rem;left:.75rem;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border-radius:var(--r-md);
  background-image:var(--gradient-accent);color:var(--fg);
}
.card__body{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem;flex:1}
.card__title{font-size:1.125rem;font-weight:700;color:var(--brand);line-height:1.3}
.card__text{font-size:.875rem;color:var(--muted-fg)}
.card__more{
  margin-top:auto;padding-top:.75rem;display:inline-flex;align-items:center;gap:.375rem;
  font-size:.875rem;font-weight:600;color:var(--brand);transition:color .15s ease;
}
.card:hover .card__more{color:var(--accent-ink)}

/* -------------------------------------------- residential / commercial */
.rescom{background:var(--brand);color:var(--brand-fg)}
.rescom__grid{display:grid;gap:2rem;align-items:center;padding-block:4rem}
@media (min-width:768px){ .rescom__grid{grid-template-columns:1fr 1fr;padding-block:5rem} }
.rescom__title{margin-top:.5rem;font-size:clamp(1.75rem,1.2rem + 2.2vw,2.25rem);font-weight:800}
.rescom__body{margin-top:1rem;max-width:32rem;color:color-mix(in oklab,var(--brand-fg) 80%,transparent)}
.rescom__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.rescom__media{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.rescom__media img{border-radius:var(--r-xl);object-fit:cover;width:100%;height:12rem}

/* --------------------------------------------------------------- process */
.process{display:grid;gap:1.25rem;margin-top:2.5rem;grid-template-columns:1fr}
@media (min-width:640px){ .process{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .process{grid-template-columns:repeat(5,1fr)} }
.process__step{padding:1.25rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r-2xl)}
/* Decorative step number, aria-hidden - not held to the 4.5:1 text rule. */
.process__num{
  display:block;font-family:var(--font-display);font-size:1.875rem;font-weight:800;
  color:color-mix(in oklab,var(--accent-ink) 45%,transparent);line-height:1;
}
.process__title{margin-top:.5rem;font-size:1rem;font-weight:700;color:var(--brand)}
.process__desc{margin-top:.25rem;font-size:.875rem;color:var(--muted-fg)}

/* -------------------------------------------------------------- coverage */
.coverage{background:color-mix(in oklab,var(--secondary) 40%,var(--bg));border-block:1px solid var(--border);padding-block:3rem}
@media (min-width:768px){ .coverage{padding-block:4rem} }
.coverage__head{display:flex;flex-direction:column;gap:1rem;justify-content:space-between}
@media (min-width:768px){ .coverage__head{flex-direction:row;align-items:flex-end} }
.coverage__icon{display:none;color:var(--accent-ink)}
@media (min-width:768px){ .coverage__icon{display:block} }
.coverage__towns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.coverage__towns li{
  padding:.375rem .75rem;background:var(--card);border:1px solid var(--border);
  border-radius:999px;font-size:.875rem;color:color-mix(in oklab,var(--fg) 80%,transparent);
}

/* ------------------------------------------------------------------- FAQ */
/* Native <details> - zero JS, keyboard and screen-reader correct by default.
   The one interactive choice the Lovable source got right (docs/AUDIT.md 11). */
.faq{display:grid;gap:.75rem;margin-top:2rem}
.faq__item{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.25rem}
.faq__item[open]{box-shadow:var(--shadow-card)}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-weight:600;color:var(--brand);cursor:pointer;list-style:none;
}
.faq__q::-webkit-details-marker{display:none}
.faq__sign{position:relative;flex:none;width:1rem;height:1rem;transition:transform .2s ease}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;background:var(--accent-ink);border-radius:2px;
}
.faq__sign::before{inset:calc(50% - 1px) 0;height:2px}
.faq__sign::after{inset:0 calc(50% - 1px);width:2px}
.faq__item[open] .faq__sign{transform:rotate(45deg)}
.faq__a{margin-top:.75rem;font-size:.875rem;color:var(--muted-fg)}

/* ------------------------------------------------------------- final CTA */
.final-cta{
  position:relative;overflow:hidden;margin-block:4rem;
  padding:2.5rem 1.5rem;text-align:center;border-radius:var(--r-3xl);
  background-image:var(--gradient-hero);color:var(--brand-fg);box-shadow:var(--shadow-elegant);
}
@media (min-width:768px){ .final-cta{padding:3.5rem} }
.final-cta__glow{
  position:absolute;top:-5rem;right:-5rem;width:20rem;height:20rem;border-radius:50%;
  background:color-mix(in oklab,var(--accent) 30%,transparent);filter:blur(64px);
}
.final-cta__title{position:relative;font-size:clamp(1.5rem,1.1rem + 2vw,2.25rem);font-weight:800;max-width:42rem;margin-inline:auto}
.final-cta__body{position:relative;margin-top:.75rem;max-width:36rem;margin-inline:auto;color:color-mix(in oklab,var(--brand-fg) 80%,transparent)}
.final-cta__actions{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.75rem}

/* ---------------------------------------------------------------- footer */
.site-footer{margin-top:4rem;background:var(--brand);color:var(--brand-fg)}
.footer__grid{display:grid;gap:2.5rem;padding-block:3.5rem}
@media (min-width:768px){ .footer__grid{grid-template-columns:2fr 1fr 1fr} }
.footer__brand{display:flex;align-items:center;gap:.75rem}
.footer__logo{width:48px;height:48px;object-fit:contain;background:#fff;border-radius:var(--r-md);padding:.25rem}
.footer__name{font-family:var(--font-display);font-weight:800;font-size:1.125rem}
.footer__place{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in oklab,var(--brand-fg) 70%,transparent)}
.footer__tagline{margin-top:1rem;max-width:28rem;font-size:.875rem;color:color-mix(in oklab,var(--brand-fg) 80%,transparent)}
.footer__contact{display:flex;flex-direction:column;gap:.625rem;margin-top:1.25rem;font-size:.875rem}
.footer__contact a,.footer__hours{display:flex;align-items:flex-start;gap:.5rem;color:color-mix(in oklab,var(--brand-fg) 90%,transparent);transition:color .15s ease}
/* Accent on the dark brand background measures 5.74:1 - correct as-is. */
/* The phone, WhatsApp and email rows are the primary contact actions on mobile
   and rendered at 22px tall, half what a thumb needs. Height only — the text
   size and the footer's rhythm are unchanged. */
.footer__contact a{min-height:44px;align-items:center}
.footer__contact a:hover{color:var(--accent)}
.footer__urgent{display:block;font-size:.8125rem;color:var(--accent)}
.footer__heading{
  font-family:var(--font-display);font-size:.75rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in oklab,var(--brand-fg) 60%,transparent);margin-bottom:.75rem;
}
.footer__col ul{display:flex;flex-direction:column;gap:.5rem;font-size:.875rem}
/* 17px rows sit under the 24px WCAG 2.2 minimum. Padding rather than a 44px
   min-height: six links at 44px each would stretch the footer far past what
   this content wants, and these are secondary navigation, not primary actions. */
.footer__col a{transition:color .15s ease;display:inline-block;padding-block:.375rem}
.footer__col a:hover{color:var(--accent)}
.footer__area{border-top:1px solid rgb(255 255 255/.1);padding-block:1.75rem}
.footer__towns{font-size:.8125rem;line-height:1.9;color:color-mix(in oklab,var(--brand-fg) 70%,transparent)}
.footer__legal{border-top:1px solid rgb(255 255 255/.1)}
.footer__legal-inner{
  display:flex;flex-direction:column;gap:.5rem;justify-content:space-between;
  padding-block:1.25rem;font-size:.75rem;color:color-mix(in oklab,var(--brand-fg) 65%,transparent);
}
@media (min-width:640px){ .footer__legal-inner{flex-direction:row} }

/* -------------------------------------------------- sticky mobile CTA bar */
/* CLAUDE.md 7a: call / WhatsApp / quote as equal peers. Replaces the single
   floating WhatsApp bubble, which under-served the phone channel. */
.cta-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:45;
  display:grid;grid-template-columns:repeat(3,1fr);
  height:var(--bar-h);
  background:color-mix(in oklab,var(--card) 96%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
@media (min-width:768px){ .cta-bar{display:none} }
.cta-bar__item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;
  font-size:.6875rem;font-weight:600;color:var(--brand);
}
.cta-bar__item + .cta-bar__item{border-left:1px solid var(--border)}
.cta-bar__item--wa{color:var(--whatsapp)}
.cta-bar__item--quote{color:var(--accent-ink)}

/* ----------------------------------------------------------- mobile menu */
.header__mobile{border-top:1px solid var(--border);background:var(--bg)}
@media (min-width:1024px){ .header__mobile{display:none} }
.header__mobile-list{display:flex;flex-direction:column;padding:.5rem var(--pad) 1rem}
.header__mobile-list a{
  display:block;padding:.75rem 0;font-size:.9375rem;font-weight:500;
  border-bottom:1px solid color-mix(in oklab,var(--border) 60%,transparent);
}
.header__mobile-list li:last-child a{border-bottom:0}
.header__mobile-lang{display:flex;align-items:center;gap:.6rem;font-weight:600}
.header__mobile-lang .header__flag{width:22px;height:17px}
.header__mobile-quote{
  margin-top:.75rem;text-align:center;border-radius:var(--r-md);
  background-image:var(--gradient-accent);color:var(--fg);
  border-bottom:0 !important;padding:.75rem 1rem !important;
}
.menu-open{overflow:hidden}

/* -------------------------------------------------------------------- 404 */
.notfound__inner{padding-block:5rem;text-align:center}
.notfound__code{font-family:var(--font-display);font-size:5rem;font-weight:800;color:color-mix(in oklab,var(--accent-ink) 40%,transparent);line-height:1}
.notfound__title{margin-top:.5rem;font-size:1.75rem;font-weight:800;color:var(--brand)}
.notfound__sub{margin-top:.75rem;color:var(--muted-fg)}
.notfound__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:2rem}

/* ===================================================== PHASE 1b: services */

/* ------------------------------------------------------------ breadcrumbs */
.breadcrumbs{border-bottom:1px solid var(--border);background:var(--bg)}
.breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding-block:.75rem;font-size:.8125rem}
.breadcrumbs__item{display:flex;align-items:center;gap:.5rem;color:var(--muted-fg)}
/* Vertical padding on an inline element grows the hit area without changing the
   line box, so the crumb row keeps its height and the target still doubles. */
.breadcrumbs__item a{color:var(--muted-fg);text-decoration:underline;text-underline-offset:2px;padding-block:.375rem}
.breadcrumbs__item a:hover{color:var(--brand)}
.breadcrumbs__item [aria-current]{color:var(--brand);font-weight:600}
.breadcrumbs__sep{color:var(--border)}

/* ------------------------------------------------- generic inner page head */
.page-head{background:color-mix(in oklab,var(--secondary) 40%,var(--bg));border-bottom:1px solid var(--border);padding-block:3rem}
@media (min-width:768px){ .page-head{padding-block:4.5rem} }
.page-head__title{margin-top:.5rem;font-size:clamp(2rem,1.4rem + 2.6vw,3rem);font-weight:800;color:var(--brand);max-width:44rem}
.page-head__sub{margin-top:.75rem;font-size:1.125rem;color:var(--muted-fg);max-width:36rem}

/* --------------------------------------------------- service index (rows) */
.svc-list{display:grid;gap:1.5rem;padding-block:3rem}
.svc-row__link{
  display:grid;overflow:hidden;height:100%;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-2xl);
  box-shadow:var(--shadow-card);transition:box-shadow .3s ease;
}
.svc-row__link:hover{box-shadow:var(--shadow-elegant)}
@media (min-width:768px){ .svc-row__link{grid-template-columns:2fr 3fr} }
.svc-row__media{position:relative;overflow:hidden;min-height:14rem}
.svc-row__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.svc-row__link:hover .svc-row__media img{transform:scale(1.05)}
.svc-row__body{padding:1.5rem}
@media (min-width:768px){ .svc-row__body{padding:2rem} }
.svc-row__head{display:flex;align-items:center;gap:.75rem}
.svc-row__icon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:2.5rem;height:2.5rem;border-radius:var(--r-md);
  background-image:var(--gradient-accent);color:var(--fg);
}
.svc-row__title{font-size:clamp(1.125rem,1rem + .6vw,1.5rem);font-weight:800;color:var(--brand)}
.svc-row__text{margin-top:.75rem;color:var(--muted-fg)}
.svc-row__bullets{display:grid;gap:.375rem;margin-top:1rem}
@media (min-width:640px){ .svc-row__bullets{grid-template-columns:1fr 1fr} }
.svc-row__bullets li{display:flex;align-items:flex-start;gap:.5rem;font-size:.875rem;color:color-mix(in oklab,var(--fg) 80%,transparent)}
.svc-row__bullets .icon{width:1rem;height:1rem;margin-top:.2rem;color:var(--accent-ink)}
.svc-row__more{display:inline-flex;align-items:center;gap:.375rem;margin-top:1.25rem;font-size:.875rem;font-weight:600;color:var(--brand)}
.svc-row__link:hover .svc-row__more{color:var(--accent-ink)}

/* -------------------------------------------------------- service detail */
.svc-hero{position:relative;overflow:hidden;background-image:var(--gradient-hero);color:var(--brand-fg)}
.svc-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.25}
.svc-hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(to right,color-mix(in oklab,var(--brand) 95%,transparent),color-mix(in oklab,var(--brand) 80%,transparent) 55%,color-mix(in oklab,var(--brand) 40%,transparent));
}
.svc-hero__inner{position:relative;padding-block:3rem}
@media (min-width:768px){ .svc-hero__inner{padding-block:4.5rem} }
.svc-hero__back{font-size:.875rem;color:color-mix(in oklab,var(--brand-fg) 75%,transparent)}
.svc-hero__back:hover{color:var(--accent)}
.svc-hero__badge-row{display:flex;align-items:center;gap:.75rem;margin-top:1rem}
.svc-hero__badge{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:3rem;height:3rem;border-radius:var(--r-md);
  background-image:var(--gradient-accent);color:var(--fg);
}
.eyebrow--bare{color:var(--accent)}
.svc-hero__title{margin-top:.75rem;font-size:clamp(1.875rem,1.3rem + 3vw,3rem);font-weight:800;max-width:44rem}
.svc-hero__lead{margin-top:1rem;font-size:1.125rem;max-width:40rem;color:color-mix(in oklab,var(--brand-fg) 85%,transparent)}
.svc-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.5rem}
.svc-hero__types{
  display:inline-flex;align-items:center;gap:.5rem;height:3rem;padding-inline:1rem;
  border-radius:var(--r-md);background:rgb(255 255 255/.1);border:1px solid rgb(255 255 255/.2);
  font-size:.875rem;
}

.svc-body{display:grid;gap:2.5rem;padding-block:3rem}
@media (min-width:1024px){ .svc-body{grid-template-columns:2fr 1fr;padding-block:4rem} }
.svc-includes{display:grid;gap:.75rem;margin-top:1.5rem}
@media (min-width:640px){ .svc-includes{grid-template-columns:1fr 1fr} }
.svc-includes__item{
  display:flex;align-items:flex-start;gap:.75rem;padding:1rem;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);
  font-size:.875rem;color:color-mix(in oklab,var(--fg) 85%,transparent);
}
.svc-includes__item .icon{color:var(--accent-ink);margin-top:.1rem}
.svc-coverage-note{
  display:flex;align-items:center;gap:.5rem;margin-top:1.5rem;
  font-size:.875rem;color:var(--muted-fg);
}
.svc-coverage-note .icon{color:var(--accent-ink)}
.svc-gallery__title,.svc-faq__title{margin-top:2.5rem}
.svc-gallery{display:grid;gap:.75rem;margin-top:1.5rem;grid-template-columns:1fr 1fr}
@media (min-width:640px){ .svc-gallery{grid-template-columns:repeat(3,1fr)} }
.svc-gallery img{border-radius:var(--r-xl);object-fit:cover;width:100%;height:11rem}

.svc-aside__card{
  position:sticky;top:calc(var(--header-h) + 1rem);
  padding:1.5rem;border-radius:var(--r-2xl);
  background:var(--brand);color:var(--brand-fg);box-shadow:var(--shadow-elegant);
}
.svc-aside__title{font-size:1.25rem;font-weight:800}
.svc-aside__body{margin-top:.5rem;font-size:.875rem;color:color-mix(in oklab,var(--brand-fg) 80%,transparent)}
.svc-aside__actions{display:flex;flex-direction:column;gap:.5rem;margin-top:1.25rem}
.svc-aside__trust{display:flex;flex-direction:column;gap:.5rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgb(255 255 255/.1);font-size:.875rem}
.svc-aside__trust li{display:flex;align-items:flex-start;gap:.5rem;color:color-mix(in oklab,var(--brand-fg) 85%,transparent)}
.svc-aside__trust .icon{width:1rem;height:1rem;margin-top:.2rem;color:var(--accent)}
.svc-aside__hours{
  display:flex;flex-direction:column;gap:.125rem;margin-top:1.25rem;padding-top:1.25rem;
  border-top:1px solid rgb(255 255 255/.1);font-size:.8125rem;
}
.svc-aside__hours span{color:var(--accent)}

/* -------------------------------------------------------- other services */
.svc-related{background:color-mix(in oklab,var(--secondary) 40%,var(--bg));border-top:1px solid var(--border)}
.svc-related__grid{display:grid;gap:.75rem;margin-top:2rem}
@media (min-width:640px){ .svc-related__grid{grid-template-columns:1fr 1fr} }
@media (min-width:1024px){ .svc-related__grid{grid-template-columns:repeat(4,1fr)} }
.svc-related__card{
  display:flex;align-items:center;gap:.75rem;height:100%;padding:1rem;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.svc-related__card:hover{border-color:var(--brand);box-shadow:var(--shadow-card)}
.svc-related__icon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:2.25rem;height:2.25rem;border-radius:var(--r-md);
  background:var(--secondary);color:var(--accent-ink);
}
.svc-related__text{display:flex;flex-direction:column;gap:.125rem}
.svc-related__name{font-size:.875rem;font-weight:700;color:var(--brand);line-height:1.3}
.svc-related__more{font-size:.75rem;font-weight:600;color:var(--muted-fg)}
.svc-related__card:hover .svc-related__more{color:var(--accent-ink)}

/* ============================ PHASE 1c: gallery, about, contact, quote, legal */

.page-head__meta{margin-top:.5rem;font-size:.875rem;color:var(--muted-fg)}
.page-head__note{
  display:inline-flex;align-items:flex-start;gap:.5rem;margin-top:1rem;
  padding:.5rem .75rem;border-radius:var(--r-md);
  background:var(--card);border:1px solid var(--border);
  font-size:.8125rem;color:var(--muted-fg);
}
.page-head__note .icon{width:1rem;height:1rem;margin-top:.15rem;color:var(--accent-ink)}

/* --------------------------------------------------------------- gallery */
.gallery{padding-block:3rem}
.gallery__grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:640px){ .gallery__grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .gallery__grid{grid-template-columns:repeat(3,1fr)} }
.gallery__figure{
  height:100%;overflow:hidden;background:var(--card);
  border:1px solid var(--border);border-radius:var(--r-2xl);box-shadow:var(--shadow-card);
}
.gallery__media{overflow:hidden;height:15rem}
.gallery__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery__figure:hover .gallery__media img{transform:scale(1.05)}
.gallery__caption{display:flex;flex-direction:column;gap:.25rem;padding:1rem}
.gallery__cat{font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.gallery__title{font-family:var(--font-display);font-weight:700;color:var(--brand)}

/* ----------------------------------------------------------------- about */
.about{display:grid;gap:2.5rem;padding-block:3rem}
@media (min-width:1024px){ .about{grid-template-columns:3fr 2fr;align-items:start} }
.about__lead{font-size:1.0625rem;color:color-mix(in oklab,var(--fg) 85%,transparent)}
.about__lead + .about__lead{margin-top:1rem}
.about__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:2rem;max-width:28rem}
.about__stats li{
  padding:1rem;text-align:center;background:var(--card);
  border:1px solid var(--border);border-radius:var(--r-xl);
}
.about__stat-num{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--brand)}
.about__stat-label{display:block;margin-top:.25rem;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-fg)}
.about__media{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.about__media img{border-radius:var(--r-xl);object-fit:cover;width:100%;height:14rem}
.about__media picture:last-child img{margin-top:2rem}
.about__values{display:grid;gap:1rem;margin-top:1.5rem;grid-template-columns:1fr}
@media (min-width:640px){ .about__values{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .about__values{grid-template-columns:repeat(4,1fr)} }
.about__value{padding:1.5rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r-2xl)}
.about__value-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;margin-bottom:1rem;border-radius:var(--r-md);
  background-image:var(--gradient-accent);color:var(--fg);
}
.about__value-title{font-size:1rem;font-weight:700;color:var(--brand)}
.about__value-desc{margin-top:.5rem;font-size:.875rem;color:var(--muted-fg)}

/* --------------------------------------------------------------- contact */
.contact-cards{display:grid;gap:1rem;padding-block:3rem;grid-template-columns:1fr}
@media (min-width:640px){ .contact-cards{grid-template-columns:repeat(2,1fr)} }
.contact-card{
  display:flex;flex-direction:column;gap:.25rem;padding:1.5rem;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-2xl);
  box-shadow:var(--shadow-card);transition:box-shadow .2s ease,border-color .2s ease;
}
a.contact-card:hover{box-shadow:var(--shadow-elegant);border-color:var(--brand)}
.contact-card__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;margin-bottom:.75rem;border-radius:var(--r-md);
  background:var(--whatsapp);color:#fff;
}
.contact-card__icon--accent{background-image:var(--gradient-accent);background-color:transparent;color:var(--fg)}
.contact-card__icon--brand{background:var(--brand);color:var(--brand-fg)}
.contact-card__icon--ghost{background:var(--secondary);color:var(--accent-ink)}
.contact-card__label{font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-fg)}
.contact-card__value{font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:var(--brand)}
.contact-card__value--sm{font-size:1rem;word-break:break-all}
.contact-card__sub{margin-top:.25rem;font-size:.875rem;color:var(--muted-fg)}
.contact-card__urgent{
  margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border);
  font-size:.8125rem;color:var(--accent-ink);
}
.contact-card--hours{background:var(--secondary)}
.contact-form-block{padding-block:1rem 3rem}
.contact-form-block__head{max-width:36rem;margin-bottom:1.5rem}

/* ----------------------------------------------------------------- quote */
.quote-layout{display:grid;gap:2rem;padding-block:3rem}
@media (min-width:1024px){ .quote-layout{grid-template-columns:3fr 2fr;align-items:start} }
.quote-aside__card{padding:1.5rem;border-radius:var(--r-2xl);background:var(--brand);color:var(--brand-fg)}
.quote-aside__title{font-size:1.125rem;font-weight:800}
.quote-aside__actions{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}
.quote-aside__hours{
  display:flex;flex-direction:column;gap:.125rem;margin-top:1.25rem;padding-top:1.25rem;
  border-top:1px solid rgb(255 255 255/.1);font-size:.8125rem;
}
.quote-aside__hours span{color:var(--accent)}
.quote-aside__trust{display:flex;flex-direction:column;gap:.625rem;margin-top:1.25rem;font-size:.875rem}
.quote-aside__trust li{display:flex;align-items:flex-start;gap:.5rem;color:color-mix(in oklab,var(--fg) 80%,transparent)}
.quote-aside__trust .icon{width:1rem;height:1rem;margin-top:.2rem;color:var(--accent-ink)}

/* ------------------------------------------------------------- lead form */
.lead-form{
  display:flex;flex-direction:column;gap:1.25rem;padding:1.5rem;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-2xl);box-shadow:var(--shadow-card);
}
@media (min-width:768px){ .lead-form{padding:2rem} }
/* Honeypot: off-screen rather than display:none - some bots skip hidden fields. */
.lead-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-form__field{display:flex;flex-direction:column;gap:.375rem}
.lead-form__group{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.lead-form__label{font-size:.875rem;font-weight:600;color:var(--brand);padding:0}
.lead-form__sublabel{font-size:.8125rem;font-weight:500;color:var(--muted-fg)}
.lead-form__optional{font-weight:400;color:var(--muted-fg)}
.lead-form__req{color:var(--accent-ink)}
.lead-form__hint{font-size:.8125rem;color:var(--muted-fg)}
.lead-form__row{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:640px){ .lead-form__row{grid-template-columns:1fr 1fr} }
.lead-form__input{
  width:100%;min-height:3rem;padding:.625rem .75rem;
  background:var(--bg);color:var(--fg);
  border:1px solid var(--input);border-radius:var(--r-md);
  font-size:1rem;                    /* 16px stops iOS zooming on focus */
  transition:border-color .15s ease,box-shadow .15s ease;
}
.lead-form__input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 25%,transparent)}
.lead-form__input[aria-invalid="true"]{border-color:oklch(.58 .22 27)}
.lead-form__textarea{min-height:7rem;resize:vertical}
.lead-form__error{font-size:.8125rem;font-weight:500;color:oklch(.48 .20 27)}
.lead-form__urgency{display:flex;flex-wrap:wrap;gap:.5rem}
.lead-form__chip{position:relative;display:inline-flex}
.lead-form__chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.lead-form__chip span{
  display:inline-flex;align-items:center;min-height:2.75rem;padding-inline:1rem;
  border:1px solid var(--input);border-radius:var(--r-md);
  font-size:.875rem;background:var(--bg);transition:all .15s ease;
}
.lead-form__chip input:checked + span{
  background-image:var(--gradient-accent);color:var(--fg);border-color:transparent;font-weight:600;
}
/* Visible focus on the chips - the Lovable radios were sr-only with no ring
   at all, which failed CLAUDE.md section 6 (docs/AUDIT.md 3.17b). */
.lead-form__chip input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.lead-form__submit{width:100%}
.lead-form__status{font-size:.875rem;font-weight:500}
.lead-form__privacy{font-size:.75rem;color:var(--muted-fg);text-align:center}
.lead-form__privacy a{text-decoration:underline;text-underline-offset:2px;color:var(--brand);display:inline-block;padding-block:.25rem}

/* --------------------------------------------------------------- thanks */
.thanks__inner{padding-block:4rem;text-align:center}
.thanks__mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:4rem;height:4rem;border-radius:50%;
  background:color-mix(in oklab,var(--whatsapp) 15%,transparent);color:var(--whatsapp);
}
.thanks__mark .icon{width:2rem;height:2rem}
.thanks__title{margin-top:1.25rem;font-size:clamp(1.5rem,1.2rem + 1.6vw,2.25rem);font-weight:800;color:var(--brand)}
.thanks__sub{margin-top:.75rem;color:var(--muted-fg)}
.thanks__next{
  margin-top:2.5rem;padding:1.5rem;text-align:left;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-2xl);
}
.thanks__next-title{font-size:1rem;font-weight:700;color:var(--brand)}
.thanks__steps{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem}
.thanks__steps li{display:flex;align-items:flex-start;gap:.75rem;font-size:.9375rem;color:color-mix(in oklab,var(--fg) 85%,transparent)}
.thanks__step-num{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:1.5rem;height:1.5rem;border-radius:50%;
  background:var(--secondary);color:var(--brand);font-size:.75rem;font-weight:700;
}
.thanks__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:2rem}

/* ------------------------------------------------------------ legal page */
.legal{padding-block:2.5rem 4rem}
.legal__draft{
  padding:1rem 1.25rem;margin-bottom:2rem;border-radius:var(--r-xl);
  background:color-mix(in oklab,var(--accent) 12%,var(--bg));
  border:2px solid var(--accent-ink);
  font-size:.875rem;color:var(--fg);
}
/* Bold red, per the owner's instruction 2026-08-02. This must be impossible to
   miss or to mistake for a real address — the LFPDPPP requires the controller's
   domicile, so the site cannot go live while this is still rendering. */
.legal__pending{
  color:oklch(.47 .21 27);            /* 6.3:1 on --bg — measured */
  font-weight:800;
  background:color-mix(in oklab,oklch(.47 .21 27) 10%,transparent);
  padding:.1em .3em;border-radius:3px;
  border:1px solid color-mix(in oklab,oklch(.47 .21 27) 35%,transparent);
}
.legal__intro{color:color-mix(in oklab,var(--fg) 85%,transparent)}
.legal__section{margin-top:2rem}
.legal__h{font-size:1.125rem;font-weight:700;color:var(--brand)}
.legal__p{margin-top:.5rem;color:color-mix(in oklab,var(--fg) 85%,transparent)}
.legal__list{display:flex;flex-direction:column;gap:.375rem;margin-top:.75rem;padding-left:1.25rem}
.legal__list li{list-style:disc;color:var(--muted-fg)}
.legal__contact{margin-top:2.5rem}

/* --------------------------------------------------------------- guides */
.guides{padding-block:3rem}
.guides__empty{
  padding:2.5rem;text-align:center;color:var(--muted-fg);
  background:var(--card);border:1px dashed var(--border);border-radius:var(--r-2xl);
}
.guides__list{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:768px){ .guides__list{grid-template-columns:repeat(2,1fr)} }
.guide-card{
  display:flex;flex-direction:column;gap:.5rem;height:100%;padding:1.5rem;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-2xl);
  box-shadow:var(--shadow-card);transition:box-shadow .2s ease;
}
.guide-card:hover{box-shadow:var(--shadow-elegant)}
.guide-card__title{font-size:1.125rem;font-weight:700;color:var(--brand)}
.guide-card__date{font-size:.75rem;color:var(--muted-fg)}
.guide-card__excerpt{font-size:.875rem;color:var(--muted-fg)}
.guide-card__more{margin-top:auto;padding-top:.75rem;font-size:.875rem;font-weight:600;color:var(--accent-ink)}

/* Long-form post body */
.prose{padding-block:2.5rem 4rem}
.prose__header{padding-bottom:1.5rem;border-bottom:1px solid var(--border)}
.prose__title{font-size:clamp(1.75rem,1.3rem + 2.2vw,2.5rem);font-weight:800;color:var(--brand)}
.prose__meta{margin-top:.75rem;font-size:.875rem;color:var(--muted-fg)}
.prose__h{margin-top:2rem;font-size:1.25rem;font-weight:700;color:var(--brand)}
.prose__p{margin-top:1rem;color:color-mix(in oklab,var(--fg) 85%,transparent)}
.prose__list{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;padding-left:1.25rem}
.prose__list li{list-style:disc;color:color-mix(in oklab,var(--fg) 85%,transparent)}
.prose__quote{
  margin-top:1.5rem;padding:1rem 1.25rem;border-left:3px solid var(--accent);
  background:var(--secondary);border-radius:0 var(--r-md) var(--r-md) 0;color:var(--muted-fg);
}
.prose__pre{
  margin-top:1.5rem;padding:1rem;overflow-x:auto;
  background:var(--brand);color:var(--brand-fg);border-radius:var(--r-md);font-size:.8125rem;
}
.prose__hr{margin-block:2rem;border:0;border-top:1px solid var(--border)}
.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--accent-ink)}
.prose__related{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:2.5rem;padding:1.25rem;
  background:var(--secondary);border-radius:var(--r-xl);
}
.prose__related-label{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-fg)}
.prose__related-link{font-weight:700;color:var(--brand);text-decoration:none}
.prose__related-link:hover{color:var(--accent-ink)}
.prose__back{margin-top:2rem;font-size:.875rem}

/* ------------------------------------------------------------------ print */
@media print{
  .cta-bar,.header__toggle,.header__mobile,.hero__bg{display:none !important}
  body{padding-bottom:0}
}

/* ------------------------------------------------------------ landing pages */
/* /lp/{angulo} — paid traffic only. Deliberately narrow, single-column and
   link-poor: every element that is not the WhatsApp button or the form is a
   place for a paid visitor to leak away. */
.lp__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem var(--pad);border-bottom:1px solid var(--border);background:var(--bg);
}
.lp__logo{border-radius:8px}
/* The only tappable thing in a landing page header, on the pages that receive
   paid traffic. It was 20px tall. */
.lp__phone a{
  font-weight:700;color:var(--brand);white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px;padding-inline:.25rem;
}

.lp__hero{max-width:34rem;margin-inline:auto;padding:2rem var(--pad) 1.5rem;text-align:center}
.lp__h1{
  font-size:clamp(1.6rem,6vw,2.4rem);line-height:1.15;font-weight:800;
  letter-spacing:-.02em;color:var(--brand);text-wrap:balance;
}
.lp__lead{margin-top:.9rem;font-size:1.05rem;line-height:1.55;color:var(--ink-soft,#41506a)}
/* The CTA is the point of the page. Full width on phones, never below the fold. */
.lp__cta{margin-top:1.5rem;width:100%;justify-content:center;font-size:1.05rem;min-height:52px}
.lp__reassure{margin-top:.6rem;font-size:.9rem;color:var(--ink-soft,#41506a)}

.lp__proof{
  max-width:34rem;margin-inline:auto;padding:0 var(--pad);
  display:grid;gap:.5rem;
}
.lp__proof li{
  position:relative;padding-left:1.6rem;font-size:.95rem;line-height:1.45;
}
.lp__proof li::before{
  content:"";position:absolute;left:0;top:.45em;width:.7rem;height:.7rem;
  border-radius:50%;background:var(--accent);
}

.lp__steps,.lp__form{max-width:34rem;margin:2.5rem auto 0;padding:0 var(--pad)}
.lp__h2{font-size:1.2rem;font-weight:700;color:var(--brand);margin-bottom:.75rem}
.lp__steps ol{display:grid;gap:.9rem;counter-reset:none}
.lp__steps li{display:flex;gap:.75rem;align-items:flex-start;line-height:1.45}
.lp__num{
  flex:0 0 1.6rem;height:1.6rem;border-radius:50%;background:var(--brand);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:700;
}
.lp__formhint{margin-bottom:1rem;font-size:.92rem;color:var(--ink-soft,#41506a)}

.lp__foot{
  margin-top:3rem;padding:1.5rem var(--pad);border-top:1px solid var(--border);
  text-align:center;font-size:.85rem;color:var(--ink-soft,#41506a);
}
.lp__foot a{text-decoration:underline;text-underline-offset:2px;display:inline-block;padding-block:.375rem}

@media (min-width:640px){
  .lp__cta{width:auto;min-width:20rem}
}

/* Landing page: photos, what's-included and objections. Same narrow column as
   the hero — a wide multi-column layout on a page whose only job is one button
   just gives the eye more places to go. */
.lp__gallery,.lp__includes,.lp__faq,.lp__again{max-width:34rem;margin:2.5rem auto 0;padding:0 var(--pad)}
.lp__grid{display:grid;gap:.6rem;grid-template-columns:1fr}
.lp__grid img{width:100%;height:auto;border-radius:10px;display:block}
@media (min-width:560px){ .lp__grid{grid-template-columns:repeat(3,1fr)} }

.lp__includes ul{display:grid;gap:.55rem}
.lp__includes li{position:relative;padding-left:1.6rem;line-height:1.45}
.lp__includes li::before{
  content:"";position:absolute;left:.15rem;top:.42em;width:.55rem;height:.3rem;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}

/* <details> rather than a JS accordion: objections have to be readable with the
   markup alone, and this is one of the few widgets the browser already ships. */
.lp__q{border-bottom:1px solid var(--border);padding:.75rem 0}
.lp__q summary{
  cursor:pointer;font-weight:600;color:var(--brand);list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;
}
.lp__q summary::-webkit-details-marker{display:none}
.lp__q summary::after{content:"+";font-weight:400;font-size:1.3rem;line-height:1;color:var(--accent)}
.lp__q[open] summary::after{content:"\2212"}
.lp__q p{margin-top:.5rem;line-height:1.55;color:var(--ink-soft,#41506a)}

.lp__again{text-align:center}

/* ------------------------------------------------- landing: sticky CTA bar */
/* The single highest-value element on a mobile landing page: the action stays
   reachable no matter how far down the reader is. Hidden by default and raised
   by lp.js only once neither the hero button nor the form is on screen —
   floating a "message us" bar over the actual message-us button just covers
   your own call to action. */
.lp__sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;gap:.5rem;padding:.6rem var(--pad);
  background:color-mix(in oklab,var(--bg) 92%,transparent);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--border);
  transform:translateY(110%);
  transition:transform .22s ease;
  padding-bottom:calc(.6rem + env(safe-area-inset-bottom));
}
.lp__sticky.is-up{transform:translateY(0)}
.lp__sticky-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;border-radius:10px;font-weight:700;font-size:.95rem;
}
.lp__sticky-btn--wa{background:var(--wa,#00852e);color:#fff}
.lp__sticky-btn--call{background:var(--brand);color:#fff}
/* Room for the bar so it can never sit on top of the submit button. */
.lp__foot{padding-bottom:6rem}
@media (min-width:640px){
  .lp__sticky{justify-content:center}
  .lp__sticky-btn{flex:0 1 15rem}
}
/* A fixed bar eats a third of a short landscape phone screen. */
@media (max-height:420px){ .lp__sticky{display:none} }

/* ------------------------------------------------- landing: reveal on scroll */
/* Deliberately small: 12px and a fade. Anything larger reads as a template,
   and on a page selling "we do not oversell" that is the wrong signal.
   The class is what makes content VISIBLE, so if lp.js never runs the
   no-JS rule below keeps everything on screen. */
/* Scoped to html.lp-js, which an inline script in landing.php sets before the
   first paint. Unscoped, a blocked or failed lp.js would leave the entire page
   body at opacity:0 — an invisible landing page is worse than an unanimated
   one. No class, no hiding. */
html.lp-js [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
html.lp-js [data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html.lp-js [data-reveal]{opacity:1;transform:none;transition:none}
  .lp__sticky{transition:none}
}