/* common.css — shared pieces added 2026-09-15 for Meta ads and local SEO:
   header click-to-call, the NAP footer, form consent text, and the new pages
   (/free-quote, /thank-you, /services, legal pages, 404). It loads AFTER
   site.css (or the homepage's inline styles), so it only adds or narrowly
   overrides; the existing look is untouched. */

/* ---- header: click-to-call beside Quote ----
   auto margins keep the desktop links centred between the logo and the two
   buttons, and push the buttons right on phones where the links are hidden */
.nav-in>.nav-links{margin-left:auto}
.nav-call{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 12px;border-radius:99px;font-family:var(--font);font-weight:700;font-size:.9rem;white-space:nowrap;flex:none;color:#fff;border:1px solid rgba(255,255,255,.6);background:rgba(0,0,0,.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .25s,color .25s,border-color .25s}
.nav-call svg{width:18px;height:18px;flex:none}
.nav-call span{display:none}
header.nav.scrolled .nav-call,header.nav.solid .nav-call{color:var(--accent-dark);border-color:color-mix(in srgb,var(--accent) 35%,var(--hair));background:#fff}
.nav-call:hover{border-color:var(--accent)}
.nav-book{min-height:44px;display:inline-flex;align-items:center}
@media(min-width:900px){.nav-call{padding:0 16px}.nav-call span{display:inline}}

/* pages with no photo behind the header keep the white bar from the start */
header.nav.solid{background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--hair)}
header.nav.solid .brand img.logo-badge{filter:none}
header.nav.solid .nav-links a{color:var(--muted);text-shadow:none}

/* ---- footer: name, click-to-call, email, service area, legal links ---- */
.site-foot .nap{font-style:normal;display:grid;justify-items:center;gap:0;font-family:var(--font);font-size:.95rem;line-height:1.5;color:#fff}
.site-foot .nap strong{font-size:1.02rem;letter-spacing:.02em}
.site-foot .nap a{display:inline-block;padding:11px 4px;color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.site-foot .area{font-family:var(--font);font-size:.88rem;line-height:1.6;color:#fff;max-width:56ch}
.site-foot .legal{display:flex;flex-wrap:wrap;justify-content:center;gap:0 20px}
.site-foot .legal a{display:inline-block;padding:11px 2px;font-family:var(--font);font-size:.9rem;font-weight:600;color:#fff;text-decoration:underline;text-underline-offset:3px}
.site-foot .copy{font-family:var(--font);font-size:.8rem;color:#fff}
.site-foot .flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:0 16px;font-family:var(--font);font-size:.9rem;margin:0}
.site-foot .flinks a{display:inline-block;padding:11px 0;color:#fff;opacity:.95;text-decoration:none}
.site-foot .flinks a:hover{opacity:1;text-decoration:underline}
.site-foot .social a{width:44px;height:44px}

/* ---- forms ---- */
.consent{grid-column:1/-1;margin:2px 0 0;font-family:var(--font);font-size:12.5px;line-height:1.45;color:#fff;text-align:left}
.consent a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.qform [aria-invalid="true"]{border-color:#fff!important;background-color:rgba(0,0,0,.22)!important}
.ghl-embed{width:100%;margin-top:14px;border-radius:12px;overflow:hidden;background:#fff}
.ghl-embed iframe{display:block;width:100%;min-height:640px;border:0}

/* review dots: same look, 24px hit area (they were 9x9, under the tap minimum) */
.rev-dots{gap:2px}
.rev-dot,.rev-dot.on{position:relative;width:24px;height:24px;border-radius:0;background:transparent}
.rev-dot.on{width:36px}
.rev-dot::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);background:var(--muted-2);transition:width .3s,background .3s}
.rev-dot.on::before{width:26px;border-radius:99px;background:var(--accent)}

/* ---- simple content pages (privacy, terms, 404) ---- */
.page-top{padding:118px 0 clamp(2.2rem,6vw,3.4rem);background:var(--bg-2);border-bottom:1px solid var(--hair)}
.page-top h1{font-size:clamp(2.4rem,7vw,4rem);font-weight:700}
.page-top p{font-family:var(--font);color:var(--muted);margin-top:12px;max-width:62ch}
.doc{padding:clamp(2.2rem,6vw,4rem) 0}
.doc .wrap{max-width:820px}
.doc h2{font-size:clamp(1.45rem,4vw,1.9rem);margin:2.2rem 0 .5rem;line-height:1.1}
.doc h2:first-child{margin-top:0}
.doc h3{font-family:var(--font);text-transform:none;letter-spacing:0;font-size:1.04rem;font-weight:700;line-height:1.35;margin:1.3rem 0 .3rem}
.doc p,.doc li{font-family:var(--font);font-size:1rem;line-height:1.7;color:var(--ink)}
.doc p{margin-top:.7rem}
.doc ul{margin:.5rem 0 0 1.25rem}
.doc li{margin-top:.35rem}
.doc a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.doc .card{margin-top:1rem;padding:18px 20px;border:1px solid var(--hair);border-radius:14px;background:var(--card)}

/* ---- /free-quote landing page (Meta ads) ----
   Phones: a two-line headline, then the form, then the benefits, so the whole
   form and its submit button sit above the sticky call bar on a 390px-wide
   iPhone without scrolling (measured by the Playwright fold test). The
   sub-line and the card title only show on desktop, where there is room. */
.lp-hero{padding:70px 0 clamp(2rem,5vw,4rem)}
.lp-grid{display:grid;gap:12px;grid-template-areas:"head" "form" "benefits"}
.lp-head{grid-area:head}
.lp-card{grid-area:form}
.lp-benefits{grid-area:benefits}
.lp-head .eyebrow{font-size:.76rem}
.lp-head h1{margin-top:4px;font-size:clamp(1.9rem,8vw,4.4rem);font-weight:700;line-height:.95}
.lp-head h1 .text-accent{display:block}
.lp-sub{display:none;margin-top:10px;font-family:var(--font);font-size:clamp(1rem,2.6vw,1.2rem);color:var(--muted)}
.lp-card{position:relative;border-radius:18px;padding:12px;color:#fff;background:linear-gradient(160deg,var(--accent-hover),var(--accent) 58%,var(--accent-dark));box-shadow:0 30px 70px -30px color-mix(in srgb,var(--accent) 60%,transparent);scroll-margin-top:80px}
.lp-card h2{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.qform.lp-form{grid-template-columns:1fr 1fr;gap:8px;margin:0}
.lp-form .full{grid-column:1/-1}
.lp-form input,.lp-form select{width:100%;height:46px;padding:0 14px;border-radius:11px;border:1px solid rgba(255,255,255,.6);background-color:rgba(255,255,255,.14);color:#fff;font:500 16px/1.2 var(--font);transition:background-color .2s,border-color .2s,box-shadow .2s}
.lp-form input::placeholder{color:#fff;opacity:.88}
.lp-form select{-webkit-appearance:none;appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:16px}
.lp-form select option{color:var(--ink)}
.lp-form input:focus,.lp-form select:focus{outline:0;background-color:rgba(255,255,255,.24);border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.lp-form .consent{font-size:12px;line-height:1.4;margin:0}
.lp-form button{grid-column:1/-1;height:50px;border:0;border-radius:11px;background:#fff;color:var(--accent-dark);font:700 1.06rem var(--font);cursor:pointer;transition:transform .18s,opacity .2s}
.lp-form button:active{transform:scale(.98)}
.lp-form button[disabled]{opacity:.75;cursor:default}
.lp-form .qnote{grid-column:1/-1;font-size:13px;line-height:1.4;color:#fff;text-align:center}
.lp-form .qnote:empty{display:none}
.lp-benefits{list-style:none;display:grid;gap:12px;margin:10px 0 0;padding:0}
.lp-benefits li{display:flex;gap:12px;align-items:flex-start;font-family:var(--font);font-size:1rem;line-height:1.45}
.lp-benefits .tick{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--accent);color:#fff}
.lp-benefits .tick svg{width:16px;height:16px}
.lp-benefits b{display:block}
.lp-benefits small{display:block;color:var(--muted);font-size:.93rem}
@media(min-width:900px){
  .lp-hero{padding:128px 0 5rem}
  .lp-grid{grid-template-columns:1.05fr .95fr;grid-template-areas:"head form" "benefits form";column-gap:clamp(36px,5vw,76px);row-gap:26px;align-items:start}
  .lp-head h1{max-width:15ch}
  .lp-sub{display:block}
  .lp-card{padding:24px 24px 26px;border-radius:20px}
  .lp-card h2{position:static;width:auto;height:auto;margin:2px 2px 14px;overflow:visible;clip:auto;white-space:normal;font-size:1.7rem;color:#fff;line-height:1}
  .qform.lp-form{gap:9px}
  .lp-form input,.lp-form select{height:48px}
  .lp-form .consent{font-size:12.5px;line-height:1.45}
  .lp-form button{height:54px}
  .lp-benefits{gap:18px}
  .lp-benefits li{font-size:1.08rem}
}
.lp-photos{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:24px}
.lp-photos figure{position:relative;margin:0;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--bg-2);border:1px solid var(--hair)}
.lp-photos img{width:100%;height:100%;object-fit:cover}
.lp-photos figcaption{position:absolute;left:8px;right:8px;bottom:8px;width:max-content;max-width:calc(100% - 16px);padding:4px 9px;border-radius:99px;background:rgba(10,10,12,.66);color:#fff;font-family:var(--font);font-size:12px;font-weight:600;line-height:1.3}
@media(min-width:760px){.lp-photos{grid-template-columns:repeat(3,1fr);gap:14px}.lp-photos figcaption{font-size:13px}}
.lp-reviews-link{display:inline-block;margin-top:14px;padding:10px 0;font-family:var(--font);font-weight:700;color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}

/* sticky call bar, phones only; slides away while a field has focus so it
   never sits on top of the keyboard */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:flex;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--hair);box-shadow:0 -12px 30px -20px rgba(0,0,0,.4);transition:transform .25s ease}
.callbar a{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;border-radius:12px;font-family:var(--font);font-weight:700;font-size:1rem;white-space:nowrap}
.callbar .cb-call{flex:1.5;background:var(--accent);color:#fff}
.callbar .cb-quote{flex:1;background:#fff;color:var(--accent-dark);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--hair))}
.callbar svg{width:19px;height:19px;flex:none}
.callbar.away{transform:translateY(115%)}
@media(min-width:900px){.callbar{display:none}}

/* ---- /thank-you and 404 ---- */
.ty{min-height:calc(100svh - 60px);display:grid;place-items:center;padding:120px 0 64px;text-align:center}
.ty .wrap{max-width:680px}
.ty-tick{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;background:var(--accent);color:#fff;box-shadow:var(--glow)}
.ty-tick svg{width:30px;height:30px}
.ty h1{font-size:clamp(2.3rem,7.5vw,4rem);font-weight:700}
.ty p{margin:14px auto 0;max-width:46ch;font-family:var(--font);font-size:1.08rem;line-height:1.6;color:var(--muted)}
.ty p a{color:var(--accent-dark);font-weight:700;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.ty .btn{margin-top:26px;background:var(--accent);color:#fff}
.ty .links{display:flex;flex-wrap:wrap;gap:0 22px;justify-content:center;margin-top:14px;font-family:var(--font)}
.ty .links a{display:inline-block;padding:11px 0;color:var(--accent-dark);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---- /services ---- */
.svc-rows{display:grid;gap:clamp(40px,7vw,80px);margin-top:clamp(2rem,5vw,3.5rem)}
.svc-row{display:grid;gap:clamp(18px,3vw,44px);align-items:center}
.svc-row-img{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--hair);background:var(--bg-2)}
.svc-row-img img{width:100%;height:100%;object-fit:cover}
.svc-row h2{font-size:clamp(1.9rem,5vw,3rem);margin-top:.4rem}
.svc-row p{margin-top:12px;max-width:60ch;font-family:var(--font);font-size:1.03rem;line-height:1.7}
.svc-card{padding:clamp(22px,4vw,36px);border-radius:18px;border:1px solid var(--hair);background:var(--bg-2)}
.svc-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.svc-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:99px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--hair));background:#fff;font-family:var(--font);font-weight:700;font-size:.92rem;color:var(--accent-dark)}
.svc-links a:hover{border-color:var(--accent)}
.prose a{color:var(--accent-dark);font-weight:700;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
@media(min-width:860px){.svc-row{grid-template-columns:1fr 1fr}.svc-row.flip .svc-row-img{order:2}.svc-row.svc-row-text{grid-template-columns:1fr}}

/* homepage photos are <picture> (WebP + JPEG fallback); display:contents keeps every
   existing img rule behaving as if the img were still a direct child */
.hero-bg picture,.hcard picture,.galt picture,.craft-img picture{display:contents}