/* ============================================================================
   Good Enough Garage Doors — styles.css
   Palette: plum #6b3fa0 + warm sand #e0a82e. Layout variant: B (split hero,
   soft cards, slab section dividers). Voice: humble over-deliverer.
   Built on the fleet design-system tokens + animations layer.
   ========================================================================= */

/* self-hosted variable fonts (latin) — no third-party CDN, no render-blocking font CSS */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/inter.woff2') format('woff2');}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-display:swap;src:url('/assets/fonts/bricolage-grotesque.woff2') format('woff2');}

:root {
  color-scheme: light;
  /* ---- per-site brand ---- */
  --brand:        #6b3fa0;
  --brand-dark:   #4f2d7a;
  --brand-darker: #34204f;
  --brand-light:  #f1ebf8;
  --brand-rgb:    107,63,160;
  --accent:       #e0a82e;
  --accent-dark:  #8a6012;   /* AA-safe for text on white (~5:1); sand bg keeps dark text */
  --accent-soft:  #fbf2dd;
  --accent-rgb:   224,168,46;

  --font-head: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- shared scale ---- */
  --ink:      #221a2e;
  --ink-soft: #5a5468;
  --line:     #e8e3ef;
  --bg:       #ffffff;
  --bg-soft:  #f8f6fb;
  --white:    #ffffff;
  --success:  #1f9d57;

  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem;

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --shadow-sm: 0 1px 2px rgba(34,26,46,.06), 0 1px 3px rgba(34,26,46,.08);
  --shadow-md: 0 6px 18px rgba(34,26,46,.09), 0 2px 6px rgba(34,26,46,.06);
  --shadow-lg: 0 22px 48px rgba(52,32,79,.16);
  --shadow-plum: 0 14px 30px rgba(79,45,122,.28);
  --ease: cubic-bezier(.4,0,.2,1);
  --dur:.22s;

  --t-xs:.8125rem; --t-sm:.9375rem; --t-base:1rem; --t-lg:1.125rem;
  --t-xl: clamp(1.25rem,1.1rem + .6vw,1.55rem);
  --t-2xl: clamp(1.65rem,1.3rem + 1.5vw,2.4rem);
  --t-3xl: clamp(2.05rem,1.5rem + 2.8vw,3.5rem);

  --container: 1160px;
}

/* ---- reset / base ---- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:92px; scroll-padding-bottom:80px; }
html,body { overflow-x:clip; }          /* lesson: clip not hidden — keeps sticky working */
body {
  margin:0; color:var(--ink); background:var(--bg);
  font-family:var(--font-body); font-size:var(--t-base); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { font-family:var(--font-head); line-height:1.12; color:var(--ink); margin:0 0 var(--s-4); font-weight:700; }
h1 { font-size:var(--t-3xl); letter-spacing:-.02em; font-weight:800; }
h2 { font-size:var(--t-2xl); letter-spacing:-.015em; }
h3 { font-size:var(--t-xl); }
p { margin:0 0 var(--s-4); color:var(--ink-soft); }
a { color:var(--brand-dark); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; height:auto; display:block; }
svg { width:1.25em; height:1.25em; flex:none; }   /* lesson: prevent giant inline SVGs */
ul { margin:0 0 var(--s-4); padding-left:1.2em; }
strong { color:var(--ink); }
:focus-visible { outline:3px solid var(--brand); outline-offset:2px; border-radius:4px; }   /* plum ring: ≥3:1 on white (sand failed) */

.container { width:min(100% - 2rem, var(--container)); margin-inline:auto; }
.section { padding-block:var(--s-9); }
.section--soft { background:var(--bg-soft); }
.section--plum { background:var(--brand-darker); color:#fff; }
.section--plum h2,.section--plum h3,.section--plum p { color:#fff; }
.section--tight { padding-block:var(--s-8); }
.center { text-align:center; }
.measure { max-width:62ch; }
.measure-c { max-width:60ch; margin-inline:auto; }
.eyebrow {
  display:inline-block; color:var(--brand); font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; font-size:var(--t-sm); margin-bottom:var(--s-3);
}
.section--plum .eyebrow { color:var(--accent); }
.lede { font-size:var(--t-lg); color:var(--ink-soft); }
.strike { text-decoration:line-through; text-decoration-color:rgba(var(--accent-rgb),.85); text-decoration-thickness:.12em; opacity:.7; }
.hl { color:var(--accent-dark); }
.nowrap { white-space:nowrap; }

/* ---- buttons ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-head); font-weight:700; font-size:var(--t-base);
  padding:.9rem 1.55rem; border-radius:var(--r-pill); border:2px solid transparent;
  cursor:pointer; line-height:1.1; text-align:center;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn:hover { text-decoration:none; transform:translateY(-2px); }
.btn--primary { background:var(--accent); color:var(--brand-darker); box-shadow:0 8px 18px rgba(var(--accent-rgb),.35); }
.btn--primary:hover { background:#eab73f; box-shadow:0 12px 26px rgba(var(--accent-rgb),.45); }
.btn--plum { background:var(--brand); color:#fff; box-shadow:var(--shadow-plum); }
.btn--plum:hover { background:var(--brand-dark); }
.btn--ghost { background:#fff; color:var(--brand-dark); border-color:var(--line); }
.btn--ghost:hover { border-color:var(--brand); background:var(--brand-light); }
.btn--outline-light { background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn--outline-light:hover { background:rgba(255,255,255,.12); border-color:#fff; }
.btn--lg { font-size:var(--t-lg); padding:1.05rem 2rem; }
.btn--block { width:100%; }
.btn-row { display:flex; flex-wrap:wrap; gap:var(--s-3); }

/* ---- top utility bar ---- */
.topbar { background:var(--brand-darker); color:rgba(255,255,255,.92); font-size:var(--t-sm); }
.topbar__in { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding-block:.45rem; }
.topbar a { color:#fff; }
.topbar__msg { display:flex; align-items:center; gap:.45rem; }
.topbar__msg .dot { width:.5rem; height:.5rem; border-radius:50%; background:var(--accent); flex:none; box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6); animation:pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot { 50% { box-shadow:0 0 0 6px rgba(var(--accent-rgb),0); } }
.topbar__links { display:flex; gap:var(--s-5); align-items:center; }
@media (max-width:760px){ .topbar__more { display:none; } .topbar__msg { font-size:.82rem; } }

/* ---- header / nav ---- */
.site-header { position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding-block:.7rem; }
.brand { display:flex; align-items:center; gap:.6rem; font-family:var(--font-head); font-weight:800; color:var(--ink); font-size:1.12rem; letter-spacing:-.02em; }
.brand:hover { text-decoration:none; }
.brand__mark { width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,var(--brand),var(--brand-dark)); display:grid; place-items:center; color:var(--accent); flex:none; box-shadow:var(--shadow-sm); }
.brand__mark svg { width:22px; height:22px; }
.brand__txt small { display:block; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); font-weight:700; margin-top:-2px; }
.nav__links { display:flex; gap:var(--s-5); align-items:center; }
.nav__links a { color:var(--ink); font-weight:600; font-size:.95rem; }
.nav__links a:hover { color:var(--brand); text-decoration:none; }
.nav__cta { display:inline-flex; align-items:center; gap:.4rem; background:var(--accent); color:var(--brand-darker)!important; padding:.6rem 1.1rem; border-radius:var(--r-pill); font-weight:700; font-family:var(--font-head); }
.nav__cta:hover { background:#eab73f; text-decoration:none; }
.nav__toggle { display:none; background:none; border:1px solid var(--line); border-radius:10px; padding:.45rem; color:var(--ink); cursor:pointer; }
.nav__toggle svg { width:1.5rem; height:1.5rem; }

/* dropdown for services */
.has-drop { position:relative; }
.drop { position:absolute; top:calc(100% + .6rem); left:50%; transform:translateX(-50%) translateY(8px); background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:.5rem; min-width:250px; opacity:0; visibility:hidden; transition:opacity .18s,transform .18s; z-index:70; }
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.drop a { display:block; padding:.5rem .7rem; border-radius:8px; font-size:.92rem; }
.drop a:hover { background:var(--brand-light); text-decoration:none; }

/* ---- hero (layout B: split copy + framed photo) ---- */
.hero { position:relative; background:linear-gradient(165deg,var(--brand-light),#fff 60%); overflow:hidden; }
.hero::before { content:""; position:absolute; top:-30%; right:-12%; width:46%; aspect-ratio:1; background:radial-gradient(circle,rgba(var(--accent-rgb),.18),transparent 70%); z-index:0; }
.hero__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s-7); align-items:center; padding-block:var(--s-8) var(--s-9); position:relative; z-index:1; }
.hero__copy { max-width:34rem; }
.hero h1 { margin-bottom:var(--s-4); }
.hero__sub { font-size:var(--t-lg); color:var(--ink-soft); margin-bottom:var(--s-5); }
.hero__micro { display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin-top:var(--s-5); font-size:var(--t-sm); color:var(--ink-soft); font-weight:600; }
.hero__micro span { display:inline-flex; align-items:center; gap:.35rem; }
.hero__micro svg { color:var(--success); width:1.05rem; height:1.05rem; }
.hero__media { position:relative; }
.hero__frame { position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); border:6px solid #fff; aspect-ratio:4/3; }
.hero__frame img { width:100%; height:100%; object-fit:cover; }
.hero__badge { position:absolute; bottom:-18px; left:-14px; background:#fff; border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:.7rem .95rem; display:flex; align-items:center; gap:.6rem; max-width:230px; }
.hero__badge .b-ic { width:38px; height:38px; border-radius:10px; background:var(--brand-light); color:var(--brand); display:grid; place-items:center; flex:none; }
.hero__badge strong { display:block; font-family:var(--font-head); font-size:.98rem; }
.hero__badge small { color:var(--ink-soft); font-size:.78rem; }
.hero__stars { position:absolute; top:-14px; right:14px; background:#fff; border-radius:var(--r-pill); box-shadow:var(--shadow-md); padding:.4rem .8rem; font-weight:700; font-size:.85rem; display:flex; align-items:center; gap:.35rem; }
.hero__stars .s { color:var(--accent); letter-spacing:-1px; }

/* ---- interior page head (photo bg + plum gradient) ---- */
.pagehead { position:relative; overflow:hidden; background:var(--brand-darker); color:#fff; }
.pagehead .container { position:relative; z-index:2; padding-block:var(--s-8); }
.pagehead h1 { color:#fff; max-width:20ch; }
.pagehead p { color:rgba(255,255,255,.9); }
.pagehead__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.pagehead::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(115deg,rgba(52,32,79,.95),rgba(79,45,122,.78) 55%,rgba(34,26,46,.55)); }
.crumbs { font-size:var(--t-sm); margin-bottom:var(--s-4); color:rgba(255,255,255,.8); }
.crumbs a { color:rgba(255,255,255,.92); }
.crumbs span { opacity:.6; margin-inline:.4rem; }

/* ---- trust / reassurance strip ---- */
.reassure { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4); }
.reassure__item { display:flex; gap:.7rem; align-items:flex-start; padding:var(--s-4); background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-sm); }
.reassure__item .ic { width:42px; height:42px; border-radius:11px; background:var(--brand-light); color:var(--brand); display:grid; place-items:center; flex:none; }
.reassure__item strong { display:block; font-family:var(--font-head); font-size:.98rem; }
.reassure__item small { color:var(--ink-soft); font-size:.82rem; line-height:1.4; display:block; }

/* ---- how-it-works steps ---- */
.steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5); counter-reset:step; }
.step { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-6) var(--s-5) var(--s-5); box-shadow:var(--shadow-sm); }
.step__n { position:absolute; top:-16px; left:var(--s-5); width:34px; height:34px; border-radius:50%; background:var(--brand); color:#fff; font-family:var(--font-head); font-weight:800; display:grid; place-items:center; box-shadow:var(--shadow-plum); }
.step__ic { width:48px; height:48px; border-radius:13px; background:var(--brand-light); color:var(--brand); display:grid; place-items:center; margin:.4rem 0 var(--s-4); }
.step__ic svg { width:24px; height:24px; }
.step h3 { font-size:var(--t-lg); margin-bottom:.35rem; }
.step p { font-size:var(--t-sm); margin:0; }
.steps::before { content:""; position:absolute; }
@media (max-width:900px){ .steps { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .steps { grid-template-columns:1fr; } }

/* ---- generic grids / cards ---- */
.grid { display:grid; gap:var(--s-5); }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--2 { grid-template-columns:repeat(2,1fr); }
.grid--4 { grid-template-columns:repeat(4,1fr); }
.card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-6); box-shadow:var(--shadow-sm); transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease); height:100%; }
.card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.card__icon { width:52px; height:52px; border-radius:14px; background:var(--brand-light); display:grid; place-items:center; color:var(--brand); margin-bottom:var(--s-4); }
.card__icon svg { width:26px; height:26px; }
.card h3 { margin-bottom:.4rem; }
.card p { font-size:var(--t-sm); margin-bottom:var(--s-4); }
.card__link { font-family:var(--font-head); font-weight:700; font-size:.92rem; color:var(--brand-dark); display:inline-flex; align-items:center; gap:.35rem; }
.card__link:hover { gap:.55rem; text-decoration:none; }

/* service card variant with mini price */
.svc-card { display:flex; flex-direction:column; }
.svc-card .price-hint { margin-top:auto; font-size:.82rem; color:var(--ink-soft); }
.svc-card .price-hint b { color:var(--ink); font-family:var(--font-head); }

/* ---- price transparency ---- */
.ptrust { display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s-7); align-items:center; }
.ptrust__list { list-style:none; padding:0; margin:0; display:grid; gap:var(--s-3); }
.ptrust__list li { display:flex; gap:.65rem; align-items:flex-start; }
.ptrust__list .ck { color:var(--success); flex:none; margin-top:.15rem; }
.ptrust__card { background:linear-gradient(160deg,var(--brand),var(--brand-dark)); color:#fff; border-radius:var(--r-lg); padding:var(--s-6); box-shadow:var(--shadow-plum); }
.ptrust__card h3 { color:#fff; }
.ptrust__card p { color:rgba(255,255,255,.88); }
.ptrust__card .big { font-family:var(--font-head); font-size:2rem; font-weight:800; color:var(--accent); }

/* ---- spring pricing tiers ---- */
.tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); align-items:stretch; }
.tier { background:#fff; border:1.5px solid var(--line); border-radius:var(--r-lg); padding:var(--s-6); display:flex; flex-direction:column; box-shadow:var(--shadow-sm); position:relative; }
.tier--feat { border-color:var(--brand); box-shadow:var(--shadow-plum); }
.tier__flag { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--accent); color:var(--brand-darker); font-family:var(--font-head); font-weight:700; font-size:.75rem; padding:.3rem .85rem; border-radius:var(--r-pill); white-space:nowrap; }
.tier h3 { font-size:var(--t-lg); margin-bottom:.3rem; }
.tier__price { font-family:var(--font-head); font-weight:800; font-size:2.3rem; color:var(--ink); line-height:1; margin:.4rem 0 .2rem; }
.tier__price small { font-size:.95rem; font-weight:600; color:var(--ink-soft); }
.tier__sub { font-size:var(--t-sm); margin-bottom:var(--s-4); }
.tier__inc { list-style:none; padding:0; margin:0 0 var(--s-5); display:grid; gap:.5rem; font-size:var(--t-sm); }
.tier__inc li { display:flex; gap:.5rem; align-items:flex-start; color:var(--ink); }
.tier__inc .ck { color:var(--success); flex:none; }
.tier .btn { margin-top:auto; }
.tier__media { margin:calc(-1 * var(--s-6)) calc(-1 * var(--s-6)) var(--s-4); border-radius:var(--r-lg) var(--r-lg) 0 0; overflow:hidden; aspect-ratio:5/2; background:var(--bg-soft); }
.tier__media img { width:100%; height:100%; object-fit:cover; display:block; }
/* $0 trust row + no-upsell promise (spring pricing) */
.trust-row { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4); margin-top:var(--s-6); }
.trust-row__item { background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s-4); text-align:center; box-shadow:var(--shadow-sm); }
.trust-row__item strong { display:block; font-family:var(--font-head); font-weight:800; font-size:2rem; color:var(--brand); line-height:1; margin-bottom:.3rem; }
.trust-row__item span { font-size:.82rem; color:var(--ink-soft); }
.promise { margin:var(--s-5) auto 0; font-size:var(--t-sm); color:var(--ink); font-weight:500; }
@media (max-width:640px){ .trust-row{grid-template-columns:repeat(2,1fr);} }

/* ---- openers (from shared design-system) ---- */
.openers { display:grid; gap:var(--s-4); }
.opener { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow var(--dur) ease; }
.opener:hover { box-shadow:var(--shadow-md); }
.opener__main { display:grid; grid-template-columns:210px 1fr; gap:var(--s-5); padding:var(--s-5); align-items:start; }
.opener__img { width:210px; height:200px; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:0; }
.opener__tag { display:inline-block; font-family:var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; color:var(--accent-dark); margin-bottom:.25rem; }
.opener h3 { margin:0 0 .3rem; font-size:var(--t-lg); }
.opener__spec { color:var(--ink-soft); font-size:var(--t-sm); margin:0 0 .55rem; }
.opener__price { font-family:var(--font-head); font-weight:800; color:var(--ink); font-size:var(--t-xl); margin:0 0 .65rem; }
.opener__price small { font-size:.8rem; font-weight:600; color:var(--ink-soft); }
.opener__pills { display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:0; padding:0; }
.opener__pills li { font-size:.78rem; font-weight:600; padding:.28rem .65rem; border-radius:var(--r-pill); background:var(--bg-soft); color:var(--ink-soft); border:1px solid var(--line); }
.opener__pills li.is-feature { background:var(--brand-light); color:var(--brand-dark); border-color:transparent; }
.opener__foot { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.75rem var(--s-5); border-top:1px solid var(--line); background:var(--bg-soft); flex-wrap:wrap; }
.opener__foot a { font-weight:700; font-size:var(--t-sm); color:var(--brand-dark); display:inline-flex; align-items:center; gap:.35rem; }
details.more-openers { margin-top:var(--s-5); }
details.more-openers > summary { list-style:none; cursor:pointer; text-align:center; }
details.more-openers > summary::-webkit-details-marker { display:none; }
.more-openers .openers { margin-top:var(--s-4); }
@media (max-width:560px){ .opener__main{grid-template-columns:1fr;} .opener__img{width:100%;height:180px;} }

/* ---- reviews ---- */
.reviews { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); }
.review { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-6); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.review__stars { display:flex; color:var(--accent); font-size:1.05rem; letter-spacing:-1px; margin-bottom:.6rem; }
.review p { font-size:var(--t-sm); color:var(--ink); margin-bottom:var(--s-4); }
.review__who { margin-top:auto; display:flex; align-items:center; gap:.6rem; }
.review__av { width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; background:var(--brand-light); box-shadow:0 0 0 2px rgba(var(--brand-rgb),.18); }
.review__who strong { display:block; font-size:.9rem; font-family:var(--font-head); }
.review__who small { color:var(--ink-soft); font-size:.78rem; }

/* ---- guarantee band ---- */
.guarantee { display:grid; grid-template-columns:auto 1fr; gap:var(--s-6); align-items:center; background:linear-gradient(160deg,var(--brand-darker),var(--brand-dark)); color:#fff; border-radius:var(--r-xl); padding:var(--s-7); }
.guarantee__seal { width:120px; height:120px; border-radius:50%; border:3px dashed var(--accent); display:grid; place-items:center; text-align:center; color:var(--accent); font-family:var(--font-head); font-weight:800; line-height:1; flex:none; }
.guarantee__seal span { font-size:.6rem; letter-spacing:.1em; }
.guarantee h2,.guarantee p { color:#fff; }
.guarantee p { color:rgba(255,255,255,.9); }

/* ---- service-area links ---- */
.areas { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-3); }
.area-chip { background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:.85rem 1rem; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:.5rem; transition:all var(--dur) var(--ease); }
.area-chip:hover { border-color:var(--brand); background:var(--brand-light); color:var(--brand-dark); text-decoration:none; transform:translateY(-2px); }
.area-chip svg { color:var(--brand); }
.area-chip.is-plain { color:var(--ink-soft); }

/* ---- FAQ ---- */
.faq { display:grid; gap:var(--s-3); max-width:820px; margin-inline:auto; }
.faq details { background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:0; box-shadow:var(--shadow-sm); overflow:hidden; }
.faq summary { cursor:pointer; list-style:none; padding:1.1rem 1.3rem; font-family:var(--font-head); font-weight:700; font-size:1.02rem; display:flex; justify-content:space-between; gap:1rem; align-items:center; color:var(--ink); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:1.5rem; color:var(--brand); line-height:1; flex:none; transition:transform .2s; }
.faq details[open] summary::after { content:"–"; }
.faq details[open] summary { color:var(--brand-dark); }
.faq__a { padding:0 1.3rem 1.2rem; }
.faq__a p { margin:0; font-size:var(--t-sm); }

/* ---- CTA band ---- */
.cta-band { background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; text-align:center; border-radius:var(--r-xl); padding:var(--s-8) var(--s-5); }
.cta-band h2,.cta-band p { color:#fff; }
.cta-band p { color:rgba(255,255,255,.9); }
.cta-band .btn-row { justify-content:center; }

/* ---- forms ---- */
.form { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-6); box-shadow:var(--shadow-md); }
.field { margin-bottom:var(--s-4); }
.field label { display:block; font-weight:600; font-size:var(--t-sm); margin-bottom:.35rem; color:var(--ink); }
.field input,.field select,.field textarea {
  width:100%; padding:.8rem .9rem; border:1.5px solid var(--line); border-radius:var(--r-sm);
  font:inherit; color:var(--ink); background:#fff; transition:border-color var(--dur);
}
.field input:focus,.field select:focus,.field textarea:focus { outline:none; border-color:var(--brand); }
.field textarea { min-height:110px; resize:vertical; }
.field .req { color:var(--accent-dark); }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
.form__note { font-size:var(--t-xs); color:var(--ink-soft); }
.hp { position:absolute; left:-9999px; }   /* honeypot */

/* ---- contact split ---- */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-7); align-items:start; }
.contact-list { list-style:none; padding:0; margin:0; display:grid; gap:var(--s-4); }
.contact-list li { display:flex; gap:.8rem; align-items:flex-start; }
.contact-list .ic { width:44px; height:44px; border-radius:12px; background:var(--brand-light); color:var(--brand); display:grid; place-items:center; flex:none; }
.contact-list strong { font-family:var(--font-head); display:block; }
.contact-list a { color:var(--brand-dark); font-weight:600; }

/* ---- prose (about, legal, service body) ---- */
.byline { font-size:var(--t-sm); color:var(--ink-soft); font-weight:600; margin-bottom:var(--s-4); display:inline-flex; align-items:center; gap:.4rem; background:var(--brand-light); color:var(--brand-dark); padding:.35rem .8rem; border-radius:var(--r-pill); }
.prose { max-width:72ch; }
.prose h2 { margin-top:var(--s-7); }
.prose h3 { margin-top:var(--s-5); }
.prose ul { display:grid; gap:.4rem; }
.prose li { color:var(--ink-soft); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-7); align-items:center; }
.split img { border-radius:var(--r-lg); box-shadow:var(--shadow-md); }
.figframe { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:16/10; }
.figframe img { width:100%; height:100%; object-fit:cover; }

/* stat strip */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5); text-align:center; }
.stat .n { font-family:var(--font-head); font-weight:800; font-size:2rem; color:var(--brand); display:block; }
.stat .l { font-size:var(--t-sm); color:var(--ink-soft); }
.section--plum .stat .n { color:var(--accent); }
.section--plum .stat .l { color:rgba(255,255,255,.85); }

/* ---- footer ---- */
.site-footer { background:var(--brand-darker); color:rgba(255,255,255,.72); padding-block:var(--s-8) var(--s-6); }
.site-footer a { color:rgba(255,255,255,.85); }
.site-footer a:hover { color:#fff; }
.footer__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s-6); margin-bottom:var(--s-6); }
.footer__grid h4 { color:#fff; font-size:.95rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:var(--s-4); }
.footer__grid ul { list-style:none; padding:0; margin:0; display:grid; gap:.55rem; font-size:var(--t-sm); }
.footer__brand .brand { color:#fff; margin-bottom:var(--s-3); }
.footer__brand .brand__txt { color:#fff; }
.footer__brand p { color:rgba(255,255,255,.7); font-size:var(--t-sm); }
.footer__contact { font-size:var(--t-sm); display:grid; gap:.4rem; margin-top:var(--s-3); }
.footer__contact a { font-weight:600; }
.footer__bottom { border-top:1px solid rgba(255,255,255,.14); padding-top:var(--s-5); display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s-3); font-size:var(--t-xs); color:rgba(255,255,255,.6); }
.footer__bottom a { color:rgba(255,255,255,.75); }

/* price reveal (footer) — FLEET-STANDARDS §2: prices hidden by default, one button reveals all [data-px] in place */
.price-reveal { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-lg); padding:var(--s-5); margin-bottom:var(--s-6); }
.price-reveal__head { display:flex; align-items:center; justify-content:space-between; gap:var(--s-5); flex-wrap:wrap; }
.price-reveal__head p { margin:0; flex:1 1 280px; color:rgba(255,255,255,.8); font-size:.9rem; }
#pricing-toggle { display:inline-flex; align-items:center; gap:.5rem; background:var(--accent); color:var(--brand-darker); border:none; font-family:var(--font-head); font-weight:700; padding:.7rem 1.3rem; border-radius:var(--r-pill); cursor:pointer; font-size:var(--t-base); white-space:nowrap; flex:none; }
#pricing-toggle:hover { background:#eab73f; }
#pricing-toggle[aria-pressed="true"] { background:#fff; color:var(--brand-dark); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.45); }
#pricing-toggle svg { width:1.05rem; height:1.05rem; }
.price-reveal__panel { margin-top:var(--s-5); }
/* hidden-by-default price tags: generic label normally, the price after the toggle */
.price-tag { font-style:normal; }
.show-pricing .price-tag { color:inherit; }
.price-table { width:100%; border-collapse:collapse; font-size:var(--t-sm); color:rgba(255,255,255,.9); }
.price-table th,.price-table td { text-align:left; padding:.6rem .5rem; border-bottom:1px solid rgba(255,255,255,.12); }
.price-table th { color:#fff; font-family:var(--font-head); }
.price-table .num { text-align:right; font-family:var(--font-head); font-weight:700; color:var(--accent); white-space:nowrap; }

/* ---- floating sticky call/text (mobile) ---- */
.sticky-cta { position:fixed; left:0; right:0; bottom:0; z-index:80; display:none; gap:.6rem; padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(34,26,46,.1); }
.sticky-cta .btn { flex:1; padding:.85rem; }
.sticky-cta .btn svg { width:1.2rem; height:1.2rem; }

/* ---- helpers ---- */
.notice { background:var(--accent-soft); border:1px solid rgba(var(--accent-rgb),.4); border-radius:var(--r-md); padding:var(--s-4) var(--s-5); display:flex; gap:.7rem; align-items:flex-start; }
.notice svg { color:var(--accent-dark); flex:none; margin-top:.1rem; }
.notice p { margin:0; font-size:var(--t-sm); color:var(--ink); }
.tag-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:var(--s-5); }
.tag { font-size:.78rem; font-weight:600; background:var(--brand-light); color:var(--brand-dark); padding:.3rem .75rem; border-radius:var(--r-pill); }
.anchor-cta { background:var(--brand-light); border-radius:var(--r-lg); padding:var(--s-5); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-4); }
.anchor-cta strong { font-family:var(--font-head); font-size:1.1rem; }

/* =================== animations (fleet motion layer) =================== */
[data-hover-lift],.hover-lift { transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease; will-change:transform; }
[data-hover-lift]:hover,.hover-lift:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.zoom-frame { overflow:hidden; }
.zoom-frame img { transition:transform .5s cubic-bezier(.16,1,.3,1); }
.zoom-frame:hover img { transform:scale(1.05); }
/* parallax images: motion.js sets an inline translateY on scroll. To stop the subtle
   translate from revealing a gap inside the overflow:hidden frame, the image is sized a
   little larger than its frame (via box metrics, NOT transform — so the inline transform
   from motion.js is free to animate translateY without being clobbered). */
[data-parallax] { will-change:transform; }
.hero__frame img[data-parallax] { width:100%; height:114%; top:-7%; position:relative; }
.pagehead__bg[data-parallax] { height:114%; top:-7%; }
@supports (animation-timeline:view()) {
  .css-reveal { opacity:0; transform:translateY(24px); animation:css-reveal-in linear both; animation-timeline:view(); animation-range:entry 0% entry 38%; }
  @keyframes css-reveal-in { to { opacity:1; transform:translateY(0); } }
}
.cta-pulse { animation:cta-pulse 2.6s ease-in-out infinite; }
@keyframes cta-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0);} 50%{box-shadow:0 0 0 8px rgba(var(--accent-rgb),.14);} }

/* =================== responsive =================== */
@media (max-width:900px){
  .hero__grid { grid-template-columns:1fr; gap:var(--s-6); padding-block:var(--s-7); }
  .hero__media { order:-1; }
  .reassure { grid-template-columns:repeat(2,1fr); }
  .grid--3,.grid--4 { grid-template-columns:repeat(2,1fr); }
  .tiers { grid-template-columns:1fr; }
  .reviews { grid-template-columns:1fr; }
  .ptrust,.contact-grid,.split,.guarantee { grid-template-columns:1fr; }
  .areas { grid-template-columns:repeat(2,1fr); }
  .stats { grid-template-columns:repeat(2,1fr); }
  .footer__grid { grid-template-columns:1fr 1fr; }
  .guarantee__seal { margin-inline:auto; }
}
@media (max-width:760px){
  .nav__links { display:none; }
  .nav__toggle { display:inline-flex; }
  .topbar__links { display:none; }
  .site-header.is-open .nav__links {
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; left:0; right:0; top:100%; background:#fff;
    border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg);
    padding:.5rem; max-height:calc(100vh - 100%); overflow-y:auto;
  }
  .site-header.is-open .nav__links a { padding:.9rem 1rem; border-bottom:1px solid var(--line); width:100%; }
  .site-header.is-open .nav__links .has-drop .drop { position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:none; padding-left:1rem; min-width:0; }
  .site-header.is-open .nav__cta { text-align:center; justify-content:center; margin:.5rem; border-bottom:none; }
  .sticky-cta { display:flex; }
  body { padding-bottom:4.5rem; }   /* room for sticky bar */
  .grid--3,.grid--4 { grid-template-columns:1fr; }
}
@media (max-width:430px){
  .brand { font-size:1rem; }
  .reassure { grid-template-columns:1fr; }
  .areas { grid-template-columns:1fr; }
  .form__row { grid-template-columns:1fr; }
}

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