/* "Pro" skin: clean contractor look. Barlow (uppercase heavy headings) + DM Sans (text).
White + warm grey, charcoal ink, bright orange used as a fill with dark text (AA). Loaded after site.css. */
:root{ --serif:'Barlow', 'Arial Narrow', Arial, sans-serif; --sans:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--radius:10px; --shadow:0 1px 2px rgba(20,22,26,.05), 0 8px 24px rgba(20,22,26,.06) }
body{ font:400 17px/1.6 var(--sans) }
h1,h2,h3{ font-family:var(--serif); font-weight:800; text-transform:uppercase; letter-spacing:0; line-height:1.02 }
h1 em, h2 em, h3 em{ font-style:normal; font-weight:800; color:var(--accent-text) }
.kicker{ display:inline-flex; align-items:center; gap:10px; font:700 12.5px/1.2 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--accent-text) }
.kicker::before{ content:""; width:24px; height:3px; border-radius:2px; background:var(--accent); flex-shrink:0 }
/* Buttons */
.btn{ border:0; border-radius:6px; min-height:52px; padding:0 24px; font:700 14.5px/1.1 var(--sans); letter-spacing:.07em; text-transform:uppercase;
background:var(--card); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink) }
.btn:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1.5px var(--ink), 0 10px 20px rgba(20,22,26,.12) }
.btn.primary{ background:var(--accent); color:var(--on-accent); box-shadow:none }
.btn.primary:hover{ background:var(--accent-hover); box-shadow:0 10px 20px color-mix(in srgb, var(--ink) 25%, transparent) }
.btn.ink{ background:var(--ink); color:#fff; box-shadow:none }
.btn.sm{ min-height:44px; padding:0 16px; font-size:13px }
/* Header */
.top{ background:#fff; border-bottom:1px solid var(--rule); box-shadow:0 2px 12px rgba(20,22,26,.04) }
.top .wrap{ min-height:76px }
.logo b{ font:800 25px/1 var(--serif); letter-spacing:.01em; text-transform:uppercase }
.logo small{ font:700 10px/1 var(--sans); letter-spacing:.3em; color:var(--accent-text) }
.demo-tag{ border:1px solid var(--rule); border-radius:4px; color:var(--ink-2); font-family:var(--sans) }
.top.pill nav.main{ border:0; background:none; padding:0; gap:28px }
.top.pill nav.main a{ padding:8px 0; border-radius:0; font:700 13.5px var(--sans); letter-spacing:.08em; text-transform:uppercase }
.top.pill nav.main a:hover{ background:none; color:var(--accent-text) }
.top.pill nav.main a[aria-current="true"]{ background:none; color:var(--accent-text); box-shadow:inset 0 -3px 0 var(--accent) }
@media (min-width:1080px) and (max-width:1439px){ .top.pill nav.main{ gap:18px } .top.pill nav.main a{ padding:8px 0; font-size:12.5px } }
.top-call{ font:700 17px var(--sans) } .top-call .lbl{ font-family:var(--sans); color:var(--accent-text) }
@media (max-width:520px){ .top-call{ border:0; border-radius:6px; background:var(--accent); color:var(--on-accent); font-size:14px; text-transform:uppercase; letter-spacing:.06em } }
.menu-btn{ border:1.5px solid var(--rule); border-radius:6px; background:#fff }
.sheet{ border-left:0; box-shadow:-20px 0 40px rgba(20,22,26,.18) }
.sheet-top{ border-bottom:1px solid var(--rule) } .sheet-close{ border:1.5px solid var(--rule); border-radius:6px; font-family:var(--sans) }
.sheet nav a{ font:800 24px/1.1 var(--serif); text-transform:uppercase }
/* Hero */
.hero-pro{ position:relative; background:var(--paper-2); overflow:hidden }
.hp-bg{ display:block; height:180px }
.hp-bg img{ width:100%; height:100%; object-fit:cover; object-position:72% 30% }
.hp-inner{ position:relative; padding-top:22px; padding-bottom:30px }
.hp-copy{ display:flex; flex-direction:column; align-items:flex-start }
.hp-badge{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px 7px 8px; border-radius:999px; background:#fff; box-shadow:var(--shadow);
font:700 12px/1.25 var(--sans); letter-spacing:.06em; text-transform:uppercase }
.hp-badge i{ width:22px; height:22px; border-radius:50%; background:var(--accent); display:grid; place-items:center; flex-shrink:0 }
.hp-badge i::before{ content:""; width:8px; height:12px; background:var(--ink); clip-path:polygon(60% 0, 0 58%, 45% 58%, 35% 100%, 100% 40%, 55% 40%) }
.hp-copy h1{ margin-top:16px; font-size:clamp(34px, 9.4vw, 72px); line-height:1 }
.hp-copy .sub{ margin-top:18px; font-size:18px; color:var(--ink-2); max-width:50ch }
.hp-copy .ctas{ margin-top:26px }
.hp-copy .trusted{ margin-top:18px; border:0; box-shadow:var(--shadow); background:#fff; font-family:var(--sans) }
.hp-copy .trusted b{ font:800 18px var(--serif) }
.hp-quote{ margin:16px 0 0; background:#fff; border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); border-left:4px solid var(--accent); max-width:420px }
.hp-quote blockquote{ margin:0; font:500 16px/1.5 var(--sans) }
.hp-quote figcaption{ margin-top:8px; font:700 11.5px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2) }
.hp-quote .stars{ font-size:14px }
@media (max-width:899px){
.hp-copy .hp-badge{ order:1 } .hp-copy h1{ order:2 } .hp-copy .trusted{ order:3 } .hp-copy .hp-quote{ order:4 } .hp-copy .sub{ order:5 } .hp-copy .ctas{ order:6 }
}
@media (max-width:640px){ .hp-copy .ctas{ display:none } .hp-copy .trusted{ font-size:12.5px } }
@media (min-width:900px){
.hero-pro{ min-height:min(740px, 86vh); display:flex; align-items:center }
.hp-bg{ position:absolute; inset:0; height:auto }
.hp-bg img{ object-position:right 30% }
.hp-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--paper-2) 0%, var(--paper-2) 30%, color-mix(in srgb, var(--paper-2) 90%, transparent) 44%, transparent 64%) }
.hp-inner{ width:100%; padding-top:64px; padding-bottom:132px }
.hp-copy{ max-width:600px }
.hp-copy h1{ font-size:clamp(46px, 5.2vw, 74px) }
.hp-quote{ position:absolute; right:var(--gut); bottom:126px; width:360px }
}
@media (min-width:1280px){ .hp-quote{ right:calc((100vw - var(--max)) / 2 + var(--gut)) } }
/* Help band overlapping the hero */
.hp-band{ position:relative; z-index:2 }
.hp-band-in{ background:var(--ink); color:#fff; border-radius:12px; padding:24px; display:grid; gap:22px; box-shadow:0 20px 40px rgba(20,22,26,.18) }
@media (min-width:900px){ .hp-band{ margin-top:-72px } .hp-band-in{ grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); padding:30px 34px; gap:40px; align-items:center } }
.hb-urgent b{ display:block; font:800 24px/1.1 var(--serif); text-transform:uppercase }
.hb-urgent p{ margin-top:6px; color:var(--paper-soft); font-size:15.5px }
.hb-urgent .btn{ margin-top:16px }
.hb-form label{ display:block; font:700 12px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:10px }
.hb-row{ display:flex; gap:10px; flex-wrap:wrap }
.hb-row select{ flex:1 1 220px; min-height:52px; border-radius:6px; border:0; padding:0 14px; font:600 16px var(--sans); color:var(--ink); background:#fff }
.hb-row .btn{ flex:0 0 auto }
.hb-form p{ margin-top:10px; font-size:14px; color:var(--paper-soft) }
/* Brand strip */
.brands{ border-top:0; background:#fff; padding:44px 0 34px }
.brands .kicker::before{ display:none }
.marq-toggle{ border:1px solid var(--rule); border-radius:4px; font-family:var(--sans); color:var(--ink-2) }
.marq li{ font:800 clamp(22px, 2.4vw, 30px)/1 var(--serif); color:var(--ink-2); letter-spacing:.02em }
/* Proof strip */
.proof{ border-block:0; background:var(--paper-2) }
.proof b{ font:800 clamp(34px, 4vw, 52px)/1 var(--serif); letter-spacing:0 }
.proof li, .proof li:nth-child(odd){ border-color:var(--rule) }
/* Section heads: centred */
.sec{ padding:88px 0 }
.sec-head, .sec-head.split{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; border-top:0; padding-top:0; margin-bottom:44px }
.sec-head h2{ font-size:clamp(32px, 4.4vw, 54px); font-weight:800; letter-spacing:0; max-width:20ch }
.sec-head p{ font-size:17.5px; margin:0 auto }
.alt-bg{ background:var(--paper-2) }
/* Cards */
.card{ border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px; transition:transform .2s, border-color .2s }
.card:hover{ transform:translateY(-4px); border-color:var(--accent) }
.card .n{ display:grid; place-items:center; width:46px; height:46px; border-radius:8px; background:var(--accent-soft); color:var(--accent-text); font:800 18px var(--serif); letter-spacing:0 }
.card h3{ font-size:22px; font-weight:800 }
.card.danger{ background:var(--ink); border-color:var(--ink) }
.card.danger .n{ background:var(--accent); color:var(--on-accent) }
.tag{ border:0; border-radius:4px; font-family:var(--sans) }
.tag.plain{ border:1px solid var(--rule) }
.also{ text-align:center }
/* Safe or urgent */
.split2 > div{ border-radius:var(--radius); padding:30px }
.split2 .wait{ border:1px solid var(--rule); box-shadow:var(--shadow) }
.split2 .now{ border:0 }
.split2 h3{ font-size:28px }
.note-line{ text-align:center }
/* Steps: timeline */
.steps li{ border-top:2px dashed var(--rule); padding-top:0 }
.steps li::before{ width:56px; height:56px; margin:-29px 0 18px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:grid; place-items:center;
font:800 22px/1 var(--serif); font-style:normal; box-shadow:0 0 0 6px var(--paper) }
.steps b{ font:800 21px/1.15 var(--serif); text-transform:uppercase }
/* Team with photos */
.tech.photo{ display:block; padding:0; overflow:hidden; border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow) }
.tech.photo img{ display:block; width:100%; aspect-ratio:1; object-fit:cover; background:var(--paper-2) }
.tech.photo div{ padding:18px 20px 20px }
.tech b{ font:800 22px/1.1 var(--serif); text-transform:uppercase }
.tech .role{ font-family:var(--sans) }
.van{ border:1.5px dashed var(--rule); border-radius:var(--radius); text-align:center; background:#fff }
/* About with photos */
.about-pro{ display:grid; gap:56px; align-items:center }
@media (min-width:980px){ .about-pro{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:72px } }
.collage{ position:relative; padding:0 0 40px 0; max-width:560px }
.collage .big{ display:block; width:82%; border-radius:12px; aspect-ratio:4/5; object-fit:cover }
.collage .small{ position:absolute; right:0; bottom:0; width:48%; border-radius:12px; border:8px solid var(--paper); aspect-ratio:4/5; object-fit:cover; box-shadow:var(--shadow) }
.collage .years{ position:absolute; left:-6px; top:24px; width:116px; height:116px; border-radius:50%; background:var(--accent); color:var(--on-accent);
display:grid; place-items:center; text-align:center; font:700 11px/1.2 var(--sans); letter-spacing:.1em; text-transform:uppercase; box-shadow:0 0 0 8px var(--paper) }
.collage .years b{ display:block; font:800 38px/1 var(--serif); letter-spacing:0 }
.collage figcaption{ position:absolute; left:16px; bottom:56px; background:rgba(20,22,26,.78); color:#fff; font:600 13px var(--sans); padding:6px 10px; border-radius:6px }
.about-text h2{ margin-top:14px; font-size:clamp(32px, 4vw, 50px) }
.about-text p{ margin-top:16px; color:var(--ink-2) }
.checks{ margin:22px 0 0; padding:0; list-style:none; display:grid; gap:10px; font-weight:700 }
.checks li{ display:flex; align-items:center; gap:12px }
.checks li::before{ content:""; width:22px; height:22px; border-radius:50%; flex-shrink:0;
background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat }
.owner-line{ margin-top:26px; display:flex; align-items:center; gap:16px; padding-top:22px; border-top:1px solid var(--rule) }
.owner-line img{ width:56px; height:56px; border-radius:50%; object-fit:cover }
.owner-line b{ display:block; font:800 18px var(--serif); text-transform:uppercase }
.owner-line span{ font-size:14.5px; color:var(--ink-2) }
.owner-quote{ margin-top:22px; padding:16px 20px; background:var(--paper-2); border-left:4px solid var(--accent); border-radius:0 8px 8px 0; font:500 18px/1.5 var(--sans) }
/* Reviews: cards */
.revs{ columns:auto; column-rule:none; display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)) }
.rev{ margin:0; border:1px solid var(--rule); border-top:3px solid var(--accent); border-radius:var(--radius); padding:22px; background:#fff; box-shadow:var(--shadow) }
/* Band */
.band{ background:var(--ink); color:#fff; border:0 }
.band h2{ font-size:clamp(34px, 5vw, 64px); font-weight:800; letter-spacing:0 }
.band h2 em{ color:var(--accent) }
.band p{ color:var(--paper-soft); font-weight:500 }
.band .btn{ background:#fff; color:var(--ink); box-shadow:none }
.band .btn.ink{ background:var(--accent); color:var(--on-accent) }
/* Contact + footer */
.cdl{ border-top:2px solid var(--ink) }
.cdl dd{ font:600 17px/1.45 var(--sans) }
.zip{ border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow) }
.zip h3{ font-size:26px }
.zip input{ border:1.5px solid var(--rule); border-radius:6px; font-family:var(--sans) }
.foot{ border-top:1px solid var(--rule); background:var(--paper-2) }
.foot .tagline{ font:700 15px var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2) }
.actionbar{ background:#fff; border-top:1px solid var(--rule); box-shadow:0 -6px 20px rgba(20,22,26,.08) }
/* Booking page */
.bk .progress{ border-bottom:1px solid var(--rule) }
.bk .bar{ border:0; background:var(--paper-2); border-radius:999px }
.bk h1{ font-size:clamp(32px, 5.4vw, 52px); letter-spacing:0 }
.chip span{ border:1.5px solid var(--rule); border-radius:8px; font:600 16.5px/1.25 var(--sans) }
.chip input:checked + span{ border-color:var(--accent); background:var(--accent-soft); color:var(--ink) }
.chip input:checked + span::before{ background:var(--accent); border-color:var(--accent) }
.field input, .field textarea{ border:1.5px solid var(--rule); border-radius:8px }
.field input:focus, .field textarea:focus{ border-color:var(--ink); outline:none }
.callnow{ border:0; border-radius:12px }
.callnow h2 em{ color:var(--accent) }
.callnow .btn{ border:0 }
.done{ border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow) }
.done .ref{ font:800 28px var(--serif); border-bottom:3px solid var(--accent) }
.err{ border-radius:8px; border-width:1.5px }
.page h1{ letter-spacing:0 }
/* hero fit */
@media (min-width:900px){ .hp-copy{ max-width:640px } .hp-copy h1{ font-size:clamp(44px, 4.4vw, 62px) } }
@media (max-width:899px){ .hp-bg{ height:132px } .hp-inner{ padding-top:16px } .hp-copy h1{ margin-top:12px; font-size:clamp(31px, 8.6vw, 52px) } .hp-quote{ margin-top:12px; padding:12px 14px } .hp-quote blockquote{ font-size:15px } }
@media (max-width:640px){ .hp-badge{ font-size:10.5px; padding:5px 10px 5px 6px } .hp-badge i{ width:18px; height:18px } }
.collage .big, .collage .small, .tech.photo img{ height:auto }
.collage .years{ left:auto; right:4%; top:28px }
@media (max-width:640px){ .collage .years{ width:96px; height:96px } .collage .years b{ font-size:30px } }
/* Palette skin: on dark panels, swap the accent to the light end of the palette */
.hp-band-in, .band, .split2 .now, .card.danger, .callnow{ --accent:var(--dk-accent); --accent-hover:var(--dk-hover); --on-accent:var(--dk-on); --accent-text:var(--dk-text) }
.hp-badge i::before{ background:var(--on-accent) }
.hb-form label{ color:var(--accent-text) }
.card.danger .tag{ background:var(--accent); color:var(--on-accent) }
.btn.primary:hover{ color:var(--on-accent) }
.rev{ border-top-color:var(--accent) }
/* Theme-driven type + highlighter accent (set in theme.css; defaults keep the Barlow look) */
h1, h2{ font-family:var(--display, var(--serif)); font-weight:var(--hw, 800); text-transform:var(--htt, uppercase); letter-spacing:var(--hls, 0) }
h1 em, h2 em{ background:linear-gradient(transparent 60%, var(--em-mark, transparent) 60%, var(--em-mark, transparent) 92%, transparent 92%); -webkit-box-decoration-break:clone; box-decoration-break:clone; padding:0 .04em }
.hp-band-in, .band, .split2 .now, .card.danger, .callnow{ --em-mark:transparent }
.checks li::before{ background:var(--accent); content:"\2713"; display:grid; place-items:center; color:var(--on-accent); font:800 13px/1 var(--sans) }
/* Script accent words (only when the theme sets --em-font) */
h1 em, h2 em{ font-family:var(--em-font, inherit) }
.has-script h1 em, .has-script h2 em{ font-weight:400; font-size:1.14em; letter-spacing:0; text-transform:none; line-height:.8; padding:0 .06em 0 .02em; color:var(--accent-text) }
.has-script .hp-band-in h2 em, .has-script .band h2 em, .has-script .callnow h2 em{ color:var(--accent) }
/* ===== Limestone 3 hero, ported (hero="limestone") ===== */
h1 em, h2 em{ font-style:var(--em-style, normal) }
.ls-pill{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 22px; border-radius:999px; border:0; cursor:pointer;
background:var(--accent); color:var(--on-accent); font:600 14.5px/1 var(--sans); letter-spacing:-.005em; text-decoration:none; white-space:nowrap;
transition:transform .4s cubic-bezier(.22,.61,.36,1), background .3s }
.ls-pill:hover, .ls-pill:focus-visible{ transform:translateY(-2px); background:var(--accent-hover) }
.ls-pill.big{ height:54px; padding:0 30px; font-size:15.5px }
.ls-pill.line{ background:transparent; color:#F2F3F1; box-shadow:inset 0 0 0 1px rgba(242,243,241,.42) }
.ls-pill.line:hover, .ls-pill.line:focus-visible{ background:rgba(242,243,241,.1) }
/* Floating header: transparent over the hero, solid after */
.top.float{ position:fixed; left:0; right:0; top:0; transition:background .35s, box-shadow .35s, border-color .35s, color .35s }
.top.float .btn{ border-radius:999px }
.nav-rating{ display:none; align-items:baseline; gap:5px; text-decoration:none; font:600 15px var(--sans); white-space:nowrap; font-variant-numeric:tabular-nums }
.nav-rating span{ color:var(--accent) }
.nav-rating small{ font-weight:400; font-size:12.5px; color:var(--ink-2) }
@media (min-width:700px){ .nav-rating{ display:inline-flex; margin-left:auto } .top.ls-pill .nav-rating + .top-call{ margin-left:0 } }
.top.float.over{ background:transparent; border-color:transparent; box-shadow:none; color:#F2F3F1 }
.top.float.over::before{ content:""; position:absolute; inset:0 0 -30px; z-index:-1; pointer-events:none; background:linear-gradient(to bottom, rgba(16,16,16,.78), rgba(16,16,16,0)) }
.top.float.over .logo small, .top.float.over .nav-rating small{ color:rgba(242,243,241,.8) }
.top.float.over .demo-tag{ border-color:rgba(242,243,241,.45); color:#F2F3F1 }
.top.float.over nav.main a{ color:#F2F3F1 }
.top.float.over .top-call .lbl{ color:var(--accent) }
.top.float.over .menu-btn{ background:transparent; border-color:rgba(242,243,241,.35); border-radius:50% }
.top.float.over .menu-btn .bars, .top.float.over .menu-btn .bars::before, .top.float.over .menu-btn .bars::after{ background:#F2F3F1 }
.top.float.over .logo svg rect{ fill:rgba(242,243,241,.12) }
@media (max-width:520px){ .top.float .nav-rating{ display:none } }
.hero-ls{ position:relative; isolation:isolate; overflow:hidden; min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center;
padding:max(112px, calc(env(safe-area-inset-top, 0px) + 100px)) var(--gut) clamp(96px, 14vh, 150px); background:#161616; color:#F2F3F1; text-align:center }
.ls-bg, .ls-bg img{ position:absolute; inset:0; width:100%; height:100%; z-index:-2 }
.ls-bg img{ object-fit:cover; object-position:50% 62% }
.ls-scrim{ position:absolute; inset:0; z-index:-1; background:
radial-gradient(62% 58% at 50% 54%, rgba(18,18,18,.72) 0%, rgba(18,18,18,.5) 62%, rgba(18,18,18,.28) 100%),
linear-gradient(to bottom, rgba(18,18,18,.78) 0%, rgba(18,18,18,.3) 28%, rgba(18,18,18,.4) 66%, rgba(18,18,18,.92) 100%) }
.ls-inner{ width:100%; max-width:900px; display:flex; flex-direction:column; align-items:center }
.ls-badge{ display:inline-block; margin-bottom:28px; border-radius:999px; color:inherit; text-decoration:none; transition:transform .25s; animation:ls-drop .6s cubic-bezier(.34,1.56,.64,1) backwards }
.ls-badge:hover{ transform:scale(1.05) }
.ls-badge-in{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:999px; background:rgba(242,243,241,.12); border:1px solid rgba(242,243,241,.26);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font:500 13.5px var(--sans) }
.ls-badge-in i{ width:4px; height:4px; border-radius:50%; background:var(--accent) }
.ls-where{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 12px; margin-bottom:18px; font:500 12px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:rgba(242,243,241,.82) }
.ls-where span{ color:var(--accent) }
.hero-ls h1{ font-family:var(--display); font-weight:400; text-transform:none; font-size:clamp(50px, 8vw, 116px); line-height:.92; letter-spacing:-.025em; text-wrap:balance; animation:ls-rise .6s cubic-bezier(.22,.61,.36,1) .2s backwards }
.hero-ls h1 em{ display:block; font-style:italic; color:var(--hero-em, #FFE58A); background:none; padding:0 }
.ls-sub{ max-width:46ch; margin-top:24px; font-size:clamp(16px, 1.35vw, 19px); line-height:1.5; color:rgba(242,243,241,.82); text-wrap:pretty }
.ls-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:32px }
.ls-proof{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 14px; margin-top:34px }
.ls-faces{ list-style:none; display:flex; margin:0; padding:0 }
.ls-faces li{ width:36px; height:36px; margin-left:-8px; border-radius:50%; display:grid; place-items:center; border:2px solid rgba(242,243,241,.92); font:600 11.5px var(--sans); color:#fff; background:#3A3A3A }
.ls-faces li:first-child{ margin-left:0 }
.ls-faces li:nth-child(2){ background:var(--face-2, #8A6D00) }
.ls-faces li:nth-child(3){ background:#262626 }
.ls-faces li:nth-child(4){ background:#5C5C5C }
.ls-rating{ display:inline-flex; align-items:center; gap:8px; padding:14px 0; font:400 14.5px/1 var(--sans); color:#F2F3F1; text-decoration:none }
.ls-rating .stars{ color:var(--accent); letter-spacing:.06em }
.ls-rating b{ font-weight:600 }
.ls-rating span:last-child{ color:rgba(242,243,241,.82); text-decoration:underline; text-decoration-color:rgba(242,243,241,.35); text-underline-offset:3px }
.ls-trust{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin:6px 0 0; padding:0; font:500 13.5px var(--sans) }
.ls-trust li{ display:inline-flex; align-items:center; gap:6px }
.ls-trust li::before{ content:""; width:13px; height:13px; flex-shrink:0; background:var(--accent);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat }
.ls-band{ margin-top:-56px }
@media (max-width:899px){ .ls-band{ margin-top:-40px } }
@media (max-width:640px){ .ls-cta{ display:none } .hero-ls{ padding-bottom:110px } .ls-where{ font-size:11px } }
@keyframes ls-drop{ from{ opacity:0; transform:translateY(-20px) } to{ opacity:1; transform:none } }
@keyframes ls-rise{ from{ transform:translateY(20px) } to{ transform:none } }
@media (prefers-reduced-motion:reduce){ .ls-badge, .hero-ls h1{ animation:none } }
/* Floating header type: lighter, like Limestone */
.top.float nav.main{ gap:clamp(14px, 1.8vw, 26px) }
.top.float nav.main a{ font:500 14px var(--sans); letter-spacing:0; text-transform:none; opacity:.85 }
.top.float nav.main a:hover, .top.float nav.main a[aria-current="true"]{ opacity:1 }
.top.float .btn{ font:600 14.5px var(--sans); letter-spacing:-.005em; text-transform:none; min-height:46px; padding:0 22px }
.top.float .top-call .lbl{ display:none }
.top.float .top-call{ font:500 15px var(--sans) }
.top.float .logo b{ text-transform:none; font:600 19px var(--sans); letter-spacing:-.02em }
.top.float .logo small{ font:400 11px var(--sans); letter-spacing:.08em; text-transform:uppercase }
@media (min-width:1080px) and (max-width:1320px){ .top.float .demo-tag, .top.float .top-call{ display:none } }
@media (max-width:520px){ .top.float .top-call::after{ content:"Call" } .top.float .top-call{ border-radius:999px; padding:9px 16px; font-weight:600 } }
@media (min-width:700px){ .top.float .btn{ display:inline-flex } }
/* Problem cards with a photo of the issue behind them */
.card.has-bg{ position:relative; isolation:isolate; overflow:hidden; color:#F2F3F1; border-color:transparent; min-height:320px;
background:#1E1E1E var(--card-bg) center/cover no-repeat }
.card.has-bg::before{ content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(180deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,.72) 45%, rgba(20,20,20,.92) 100%); transition:opacity .3s }
.card.has-bg.danger::before{ background:linear-gradient(180deg, rgba(20,20,20,.5) 0%, rgba(20,20,20,.78) 45%, rgba(20,20,20,.95) 100%) }
.card.has-bg h3{ color:#fff }
.card.has-bg p{ color:rgba(242,243,241,.86) }
.card.has-bg .n{ background:var(--accent); color:var(--on-accent) }
.card.has-bg .tag.plain{ color:#F2F3F1; border-color:rgba(242,243,241,.45); background:rgba(20,20,20,.35) }
.card.has-bg .btn:not(.primary){ background:transparent; color:#F2F3F1; box-shadow:inset 0 0 0 1.5px rgba(242,243,241,.6) }
.card.has-bg .btn:not(.primary):hover{ background:rgba(242,243,241,.12) }
.card.has-bg:hover{ border-color:var(--accent) }
.card.has-bg:hover::before{ opacity:.9 }
.phone-only{ display:none }
@media (max-width:699px){ .phone-only{ display:block } }
/* ===== Reviews: liquid-glass marquee (native port of marquee-card + liquid-glass-card) ===== */
.reviews-glass{ position:relative; isolation:isolate; overflow:hidden; background:#141414; color:#F2F3F1;
--accent-text:var(--dk-text); --ink-2:rgba(242,243,241,.78); --em-mark:transparent }
.gl-bg, .gl-bg img{ position:absolute; inset:0; width:100%; height:100%; z-index:-2 }
.gl-bg img{ object-fit:cover; object-position:50% 60% }
.reviews-glass::before{ content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(180deg, rgba(16,16,16,.86) 0%, rgba(16,16,16,.55) 45%, rgba(16,16,16,.8) 100%) }
.reviews-glass .sec-head h2{ color:#fff }
.reviews-glass .sec-head p{ color:rgba(242,243,241,.8) }
.reviews-glass .kicker{ color:var(--dk-text) }
.gl-defs{ position:absolute; width:0; height:0; overflow:hidden }
.gl-marq{ --gap:14px; --duration:70s; overflow:hidden; padding:10px 0 6px;
-webkit-mask:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent) }
.gl-track{ display:flex; width:max-content; gap:var(--gap); animation:gl-marquee var(--duration) linear infinite }
.gl-group{ display:flex; gap:var(--gap); margin:0; padding:0; list-style:none; flex-shrink:0 }
.gl-marq:hover .gl-track, .gl-marq:focus-within .gl-track, .reviews-glass.paused .gl-track{ animation-play-state:paused }
@keyframes gl-marquee{ from{ transform:translateX(0) } to{ transform:translateX(calc(-50% - var(--gap) / 2)) } }
.gl-card{ width:340px; flex-shrink:0; display:flex; flex-direction:column; gap:14px; padding:22px 24px; border-radius:24px; color:#F2F3F1;
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22);
-webkit-backdrop-filter:blur(14px) saturate(1.5);
backdrop-filter:blur(14px) saturate(1.5);
backdrop-filter:url(#ohm-glass) saturate(1.4);
box-shadow:0 0 8px rgba(0,0,0,.03), 0 2px 6px rgba(0,0,0,.08),
inset 3px 3px .5px -3.5px rgba(255,255,255,.09), inset -3px -3px .5px -3.5px rgba(255,255,255,.85),
inset 1px 1px 1px -.5px rgba(255,255,255,.6), inset -1px -1px 1px -.5px rgba(255,255,255,.6),
inset 0 0 6px 6px rgba(255,255,255,.12), inset 0 0 2px 2px rgba(255,255,255,.06), 0 0 12px rgba(0,0,0,.15) }
.gl-who{ display:flex; align-items:center; gap:12px }
.gl-av{ width:42px; height:42px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font:700 14px var(--sans); color:var(--on-accent); background:var(--accent) }
.gl-card:nth-child(3n+2) .gl-av{ background:rgba(255,255,255,.9); color:#1E1E1E }
.gl-card:nth-child(3n) .gl-av{ background:rgba(255,255,255,.18); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5) }
.gl-who b{ display:block; font:600 16px/1.2 var(--sans) }
.gl-who span{ display:block; margin-top:2px; font-size:13.5px; color:rgba(242,243,241,.7) }
.gl-card p{ font-size:16px; line-height:1.5; color:#F7F7F5; flex:1 }
.gl-stars{ color:var(--dk-accent, #FFDB00); letter-spacing:2px; font-size:16px }
.gl-foot{ display:flex; justify-content:center; margin-top:18px }
.gl-toggle{ min-height:44px; padding:0 18px; border-radius:999px; border:1px solid rgba(242,243,241,.35); background:rgba(255,255,255,.06); color:#F2F3F1; font:600 13.5px var(--sans); cursor:pointer }
.gl-toggle:hover{ background:rgba(255,255,255,.12) }
@media (max-width:699px){ .gl-card{ width:286px; padding:20px } .gl-marq{ --duration:60s } }
/* No motion: static, swipeable row instead of a moving strip */
@media (prefers-reduced-motion:reduce){
.gl-track{ animation:none }
.gl-marq{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-mask:none; mask:none; padding-left:var(--gut); padding-right:var(--gut) }
.gl-group[aria-hidden="true"]{ display:none }
.gl-card{ scroll-snap-align:start }
.gl-foot{ display:none }
}
.gl-who .gl-av{ display:grid; place-items:center; margin:0; font:700 14px/1 var(--sans); color:var(--on-accent) }
.gl-card:nth-child(3n+2) .gl-who .gl-av{ color:#1E1E1E } .gl-card:nth-child(3n) .gl-who .gl-av{ color:#fff }
/* ===== Shimmer buttons (native ports) ===== */
/* 1. Text shimmer pill: a light band sweeps across the label (Book) */
.sh-text{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:54px; padding:0 30px; border-radius:999px;
background:#fff; border:1px solid #E5E5E5; text-decoration:none; cursor:pointer; transition:transform .2s ease }
.sh-text:hover{ transform:scale(1.02) } .sh-text:active{ transform:scale(.98) }
.sh-text:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.sh-text .sh-label{ display:block; font:600 15.5px/1 var(--sans); letter-spacing:-.01em; color:transparent;
background:linear-gradient(110deg, #6B6B6B 0%, #6B6B6B 40%, #171717 50%, #6B6B6B 60%, #6B6B6B 100%);
background-size:200% 100%; -webkit-background-clip:text; background-clip:text; animation:sh-text 1.6s linear infinite }
@keyframes sh-text{ from{ background-position:0% 0 } to{ background-position:-200% 0 } }
/* 2. Spark button: a light travels round the border (Call now) */
.sh-spark{ --spread:90deg; --shimmer:#FFDB00; --speed:3s; --cut:.07em; --bg:#1C1C1C;
position:relative; z-index:0; display:inline-flex; align-items:center; justify-content:center; height:54px; padding:0 28px;
border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:var(--bg); color:#fff; text-decoration:none;
white-space:nowrap; cursor:pointer; transform:translateZ(0); transition:transform .3s ease-in-out }
.sh-spark:active{ transform:translateY(1px) }
.sh-spark:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.sh-spark .sh-wrap{ position:absolute; inset:0; z-index:-3; display:block; overflow:visible; filter:blur(2px); container-type:size }
.sh-spark .sh-spk{ position:absolute; inset:0; display:block; height:100cqh; aspect-ratio:1; animation:sh-slide var(--speed) ease-in-out infinite alternate }
.sh-spark .sh-spk::before{ content:""; position:absolute; inset:-100%;
background:conic-gradient(from calc(270deg - (var(--spread) * .5)), transparent 0, var(--shimmer) var(--spread), transparent var(--spread));
animation:sh-spin calc(var(--speed) * 2) infinite linear }
.sh-spark .sh-bd{ position:absolute; z-index:-2; inset:var(--cut); display:block; border-radius:inherit; background:var(--bg) }
.sh-spark .sh-hl{ position:absolute; inset:0; display:block; border-radius:inherit; pointer-events:none; box-shadow:inset 0 -8px 10px #ffffff1f; transition:box-shadow .3s ease-in-out }
.sh-spark:hover .sh-hl{ box-shadow:inset 0 -6px 10px #ffffff3f }
.sh-spark:active .sh-hl{ box-shadow:inset 0 -10px 10px #ffffff3f }
.sh-spark .sh-label{ display:inline-flex; align-items:center; gap:9px; font:600 15.5px/1 var(--sans); letter-spacing:-.01em }
.sh-spark .sh-label svg{ width:18px; height:18px }
@keyframes sh-slide{ to{ transform:translate(calc(100cqw - 100%), 0) } }
@keyframes sh-spin{ 0%{ transform:translateZ(0) rotate(0) } 15%, 35%{ transform:translateZ(0) rotate(90deg) } 65%, 85%{ transform:translateZ(0) rotate(270deg) } 100%{ transform:translateZ(0) rotate(360deg) } }
/* Hero: on the dark photo the spark button gets a faint ring so its edge reads */
.ls-cta .sh-spark{ border-color:rgba(255,255,255,.22) }
/* Phone action bar */
.actionbar.shimmer{ grid-template-columns:1.25fr 1fr }
.actionbar.shimmer .sh-spark, .actionbar.shimmer .sh-text{ width:100%; height:54px; padding:0 14px }
@media (prefers-reduced-motion:reduce){
.sh-text .sh-label{ animation:none; background:none; color:#171717 }
.sh-spark .sh-spk, .sh-spark .sh-spk::before{ animation:none }
}
/* Shimmer buttons in the site colours */
.sh-spark{ --bg:var(--ink) }
.sh-text.yellow{ background:var(--accent); border-color:var(--accent) }
.sh-text.yellow:hover{ background:var(--accent-hover) }
.sh-text.yellow .sh-label{ background-image:linear-gradient(110deg, var(--sh-a, #4A4A4A) 0%, var(--sh-a, #4A4A4A) 40%, var(--sh-b, #000) 50%, var(--sh-a, #4A4A4A) 60%, var(--sh-a, #4A4A4A) 100%) }
.sh-spark.yellow{ --bg:var(--accent); --shimmer:var(--ink); color:var(--on-accent); border-color:rgba(50,50,50,.18) }
.sh-spark.yellow .sh-hl{ box-shadow:inset 0 -8px 10px rgba(255,255,255,.35) }
.sh-spark.yellow:hover .sh-hl{ box-shadow:inset 0 -6px 10px rgba(255,255,255,.55) }
@media (prefers-reduced-motion:reduce){ .sh-text.yellow .sh-label{ background:none; color:var(--on-accent) } }
/* ===== SEO sections: pricing, FAQ, service area, service pages ===== */
.price-grid{ display:grid; gap:18px }
@media (min-width:900px){ .price-grid{ grid-template-columns:1fr 1fr; gap:24px } }
.price-card{ background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 28px }
.price-card.solo{ max-width:760px; margin:0 auto }
.price-card h3{ font-size:20px; margin-bottom:8px }
.price-list{ list-style:none; margin:0; padding:0 }
.price-list li{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:13px 0; border-bottom:1px solid var(--rule); font-size:16px }
.price-list li:last-child{ border-bottom:0 }
.price-list b{ font:700 16.5px var(--sans); white-space:nowrap; font-variant-numeric:tabular-nums }
.price-list a{ font-weight:600; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:4px }
.price-note{ margin-top:12px; font-size:14.5px; color:var(--ink-2) }
.demo-note{ margin-top:14px; text-align:center; font-size:13px; color:var(--ink-2) }
.faq-wrap{ max-width:880px }
.faq-list{ border-top:1px solid var(--rule) }
.faq-item{ border-bottom:1px solid var(--rule) }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 2px; min-height:44px }
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary h3{ font:600 18px/1.35 var(--sans); text-transform:none; letter-spacing:-.01em; margin:0 }
.faq-item summary::after{ content:"+"; flex-shrink:0; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--on-accent); font:600 20px/1 var(--sans); transition:transform .25s }
.faq-item[open] summary::after{ transform:rotate(45deg) }
.faq-item summary:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:6px }
.faq-item p{ padding:0 2px 22px; max-width:68ch; color:var(--ink-2); font-size:16.5px; line-height:1.6 }
.area-grid{ display:grid; gap:28px; align-items:center }
@media (min-width:980px){ .area-grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:56px } }
.area-grid h2{ margin-top:12px; font-size:clamp(32px, 4vw, 50px) }
.area-grid p{ margin-top:14px; color:var(--ink-2) }
.area-svc{ display:flex; flex-wrap:wrap; gap:8px 18px } .area-svc a{ font-weight:600; color:var(--ink) }
.town-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.town-chips li{ padding:9px 14px; border-radius:999px; background:var(--card); border:1px solid var(--rule); font:500 14.5px var(--sans) }
.foot-svc{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px 20px; padding-top:6px; font-weight:600 }
.foot-svc a{ display:inline-flex; align-items:center; min-height:44px; text-decoration:none }
/* Service pages */
.svc-hero{ padding:40px 0 56px; background:var(--paper-2) }
.svc-hero-grid{ display:grid; gap:32px; align-items:center }
@media (min-width:980px){ .svc-hero{ padding:56px 0 72px } .svc-hero-grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px } }
.crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:14px; color:var(--ink-2); margin-bottom:18px }
.crumbs a{ color:var(--ink-2); text-decoration:none } .crumbs a:hover{ color:var(--ink); text-decoration:underline }
.svc-hero h1{ font-size:clamp(40px, 5.6vw, 76px); line-height:.98 }
.svc-hero h1 em{ display:block }
.svc-lede{ margin-top:18px; font-size:clamp(17px, 1.5vw, 19px); color:var(--ink-2); max-width:54ch }
.svc-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px }
.svc-trust{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; font:600 14px var(--sans) }
.svc-trust li{ display:inline-flex; align-items:center; gap:7px } .svc-trust li::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent) }
.svc-img{ margin:0 } .svc-img img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:16px; box-shadow:var(--shadow) }
.svc-two{ display:grid; gap:18px } @media (min-width:900px){ .svc-two{ grid-template-columns:1fr 1fr; gap:24px } }
.svc-box{ background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow) }
.svc-box.alt{ background:var(--paper-2); box-shadow:none }
.svc-box h2{ font-size:clamp(26px, 3vw, 34px); margin-bottom:6px }
.svc-box .checks{ margin-top:16px }
.other-svcs{ display:grid; gap:12px } @media (min-width:760px){ .other-svcs{ grid-template-columns:repeat(2, 1fr) } }
.other-svc{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:20px 22px; min-height:64px; border:1px solid var(--rule); border-radius:var(--radius);
background:var(--card); text-decoration:none; font:600 17px var(--sans); transition:border-color .2s, transform .2s }
.other-svc:hover{ border-color:var(--accent); transform:translateY(-2px) }
.other-svc i{ font-style:normal; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--on-accent) }
@media (max-width:699px){
.svc-hero{ padding:24px 0 40px } .svc-hero h1{ font-size:clamp(36px, 10vw, 48px) }
.svc-cta > *{ flex:1 1 100% } .svc-box{ padding:22px } .price-card{ padding:18px 20px }
.price-list li{ font-size:15px } .faq-item summary h3{ font-size:16.5px } .faq-item summary{ padding:16px 2px }
}
/* Same light header on every page (service pages use the solid header) */
.top.pill nav.main{ gap:clamp(14px, 1.8vw, 26px) }
.top.pill nav.main a{ font:500 14px var(--sans); letter-spacing:0; text-transform:none; opacity:.85; box-shadow:none }
.top.pill nav.main a:hover, .top.pill nav.main a[aria-current="true"]{ opacity:1 }
.top.pill nav.main a[aria-current="true"]{ box-shadow:inset 0 -3px 0 var(--accent) }
.top.pill .btn{ font:600 14.5px var(--sans); letter-spacing:-.005em; text-transform:none; min-height:46px; padding:0 22px; border-radius:999px }
.top.pill .top-call .lbl{ display:none }
.top.pill .top-call{ font:500 15px var(--sans) }
.top.pill .logo b{ text-transform:none; font:600 19px var(--sans); letter-spacing:-.02em }
.top.pill .logo small{ font:400 11px var(--sans); letter-spacing:.08em; text-transform:uppercase }
@media (min-width:700px){ .top.pill .btn{ display:inline-flex } }
@media (min-width:1080px) and (max-width:1320px){ .top.pill .demo-tag, .top.pill .top-call{ display:none } }
@media (min-width:1080px) and (max-width:1200px){ .top.pill .nav-rating{ display:none } }
/* ===== Footer: native port of stacked-circular-footer ===== */
.fc{ background:var(--paper-2); border-top:1px solid var(--rule); padding:64px 0 36px; text-align:center }
.fc-in{ display:flex; flex-direction:column; align-items:center }
.fc-badge{ display:grid; place-items:center; width:104px; height:104px; border-radius:50%; background:color-mix(in srgb, var(--accent) 22%, transparent); margin-bottom:18px; transition:transform .25s }
.fc-badge:hover{ transform:scale(1.04) }
.fc-badge svg{ width:44px; height:44px }
.fc-name{ font:700 22px/1 var(--sans); letter-spacing:-.02em }
.fc-name span{ font:500 12px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-left:4px }
.fc-tag{ margin-top:8px; font-family:var(--display, var(--serif)); font-style:italic; font-size:20px; color:var(--ink-2) }
.fc-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 26px; margin-top:28px }
.fc-nav a{ display:inline-flex; align-items:center; min-height:44px; font:500 15px var(--sans); color:var(--ink); text-decoration:none; transition:color .2s }
.fc-nav a:hover{ color:var(--ink-2); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--accent); text-decoration-thickness:2px }
.fc-svc{ margin-top:4px; gap:0 22px } .fc-svc a{ font-size:14px; color:var(--ink-2) }
.fc-socials{ list-style:none; margin:26px 0 0; padding:0; display:flex; gap:12px }
.fc-social{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1px solid var(--rule); background:var(--card); color:var(--ink); transition:background .2s, border-color .2s, transform .2s }
.fc-social:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); transform:translateY(-2px) }
.fc-social svg{ width:18px; height:18px }
.fc-sub{ display:flex; gap:8px; width:100%; max-width:460px; margin-top:30px }
.fc-sub input{ flex:1; min-width:0; height:48px; padding:0 18px; border-radius:999px; border:1px solid var(--rule); background:var(--card); color:var(--ink); font:16px var(--sans) }
.fc-sub input:focus{ outline:2px solid var(--ink); outline-offset:1px }
.fc-sub button{ height:48px; padding:0 24px; border:0; border-radius:999px; background:var(--accent); color:var(--on-accent); font:600 15px var(--sans); cursor:pointer; transition:background .2s, transform .2s }
.fc-sub button:hover{ background:var(--accent-hover); transform:translateY(-1px) }
.fc-sub button[disabled]{ opacity:.7; cursor:progress; transform:none }
.fc-sub-note{ margin-top:10px; font-size:13px; color:var(--ink-2) } .fc-sub-note a{ color:var(--ink) }
.fc-status{ min-height:20px; margin-top:6px; font:600 14px var(--sans); color:var(--ok) }
.fc-status.err{ color:#9b1c1c }
.fc-contact{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 12px; margin-top:22px; font-size:15px }
.fc-contact a{ color:var(--ink); font-weight:600; display:inline-flex; align-items:center; min-height:44px }
.fc-contact span{ color:var(--ink-2); display:inline-flex; align-items:center }
.fc-small{ margin-top:26px; padding-top:22px; border-top:1px solid var(--rule); width:100%; max-width:820px; display:grid; gap:8px; font-size:13.5px; color:var(--ink-2) }
.fc-small a{ color:var(--ink) }
@media (max-width:560px){ .fc{ padding:52px 0 30px } .fc-nav{ gap:0 18px } .fc-sub{ flex-direction:column } .fc-sub button{ width:100% } .fc-contact{ flex-direction:column; gap:0 } .fc-contact span[aria-hidden]{ display:none } }
/* Utilities needed on every page (were only in bookls.css) */
.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 }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
@media (max-width:560px){ .fc-sub input{ flex:none; width:100%; height:50px } .fc-contact{ align-items:center } }
/* Help band: let the column shrink below the dropdown's longest option (was overflowing under ~340px) */
.hp-band-in > *{ min-width:0 }
.hb-row select{ min-width:0; max-width:100%; width:100%; text-overflow:ellipsis }
.hb-urgent .btn, .hb-row .btn{ max-width:100%; white-space:normal; text-align:center }
/* Very narrow screens (under 360px): header was 311px minimum and widened the whole page in mobile view.
The phone bar already has Call now, so the header call link goes; price cards may wrap. */
@media (max-width:359px){
header .top-call{ display:none }
header .logo{ min-width:0; flex-shrink:1 }
header .logo span{ min-width:0 }
}
.cost-grid > *, .price-card{ min-width:0 }
.big-price, .price-card .points li{ overflow-wrap:anywhere }
/* Over the dark hero photo, small accent marks use the light dark-panel accent so they stay visible
(no change on Ohm, where both accents are yellow) */
.top.float.over .nav-rating span, .top.float.over .top-call .lbl,
.ls-badge-in i, .ls-where span, .ls-rating .stars{ color:var(--dk-accent) }
.ls-badge-in i, .ls-trust li::before{ background:var(--dk-accent) }