/* Websites For Electricians - brand layer on top of the shared Websites For
   Tradies design system. styles.css stays byte-identical to the parent so it
   can be re-synced; everything specific to this brand lives here.

   Brand (Jeremy, 9 Nov 2026): black, white and hi-vis yellow; rounded
   corners; a bold sans-serif (Plus Jakarta Sans); clear, plain messaging.
   The shared CSS was built around WFT orange, so the orange tokens are
   remapped to yellow below, and every place the shared CSS puts WHITE text
   on the accent colour is flipped to black (white on yellow fails contrast).
   Yellow is never used as text on white - it's a fill, underline or
   highlight there, and text only on black. */

:root {
  --ink: #0B0B0D;   /* brand kit: primary dark */
  --ink-2: #1A1A1D;
  --yellow: #FFC400; /* brand kit: accent */
  --yellow-2: #FFD54A;
  --yellow-soft: #FFF6D6;

  --wft-dark: var(--ink);
  --wft-dark-2: var(--ink-2);
  --wft-dark-soft: rgba(11, 11, 12, 0.74);
  --wft-dark-dim: rgba(11, 11, 12, 0.58);
  --wft-dark-line: rgba(11, 11, 12, 0.12);
  --wft-dark-hairline: rgba(11, 11, 12, 0.07);
  --trade-orange: var(--yellow);
  --trade-orange-light: var(--yellow);
  --trade-orange-text: var(--ink);            /* accent text on white = black */
  --trade-grad: linear-gradient(to right, #FFC400, #FFD54A);
  --trade-grad-soft: linear-gradient(135deg, rgba(255,194,14,0.16), rgba(255,213,74,0.16));
  --orange-tint: var(--yellow-soft);
  --orange-border: rgba(255, 194, 14, 0.65);
  --cream: #FFFFFF;
  --cream-2: #F3F3F1;
  --panel-tint: #F4F4F2;
  --green: #138A4A;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --radius: 22px;
  --shadow-card: 0 24px 48px -28px rgba(11,11,12,0.28), 0 0 0 1px rgba(11,11,12,0.06);
}

body { font-family: var(--font); color: var(--ink); background: #FFFFFF; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; }

/* ---------- Buttons: yellow with black text ---------- */
.btn-primary { color: var(--ink); font-weight: 700; letter-spacing: 0; border-radius: 14px; }
.btn-primary:hover { box-shadow: 0 14px 30px -12px rgba(255,194,14,0.7); }
.btn-primary .arrow { background: rgba(11,11,12,0.12); }
.btn-secondary, .btn-ghost { border-radius: 14px; font-weight: 700; }
.btn-secondary { border: 2px solid var(--ink); color: var(--ink); }

/* Every shared component that sat white-on-orange */
.step-card .num, .qc-av, .work-card:hover .meta .go,
.faq-item.open button .chev { color: var(--ink); }
.label .dot { box-shadow: none; }
.label { font-weight: 800; }

/* Accent text: highlighter on white, yellow on black */
.accent-text, .badge-tag .big {
  background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 92%, transparent 92%);
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; color: inherit; padding: 0 2px;
}
.page-hero .accent-text, .final-cta .accent-text {
  background: none; color: var(--yellow); -webkit-text-fill-color: var(--yellow); padding: 0;
}

/* Header + top bar */
.topbar { background: var(--ink); }
.topbar .stars { color: var(--yellow); }
header.site-header { background: rgba(255,255,255,0.92); border-bottom: 1px solid var(--wft-dark-hairline); }
.call-link svg { color: var(--ink); }
.call-link:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }
.mobile-cta-bar { background: rgba(255,255,255,0.96); }

/* Links in body text: black with a yellow underline */
.prose a, .text-link, .faq-item .answer a, .split .copy a:not([class]) {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow);
  text-decoration-thickness: 3px; text-underline-offset: 3px; font-weight: 700;
}

/* ---------- Logo (inline SVG wordmark) ---------- */
.brand .wfe-logo { height: 42px; width: auto; display: block; }
.mobile-menu .top .wfe-logo { height: 34px; width: auto; filter: none; }
.site-footer .f-brand .wfe-logo { height: 44px; width: auto; margin-bottom: 18px; display: block; filter: none; }
.site-footer .f-brand a { color: var(--yellow); }
@media (max-width: 420px) { .brand .wfe-logo { height: 38px; } }

/* ---------- Black hero ---------- */
.page-hero {
  background:
    radial-gradient(ellipse at 85% -30%, rgba(255, 194, 14, 0.20), transparent 55%),
    var(--ink);
  border-bottom: 0;
  color: var(--white);
}
.page-hero::before { display: none; }
.page-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 0%, black 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 85% 85% at 50% 0%, black 20%, transparent 75%);
  pointer-events: none;
}
.page-hero .container-site { position: relative; z-index: 1; }
.page-hero h1 { color: var(--white); font-weight: 800; }
.page-hero p { color: rgba(255, 255, 255, 0.8); }
.page-hero .label { color: var(--yellow); }
.page-hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
.page-hero .btn-secondary, .final-cta .btn-secondary {
  background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.45);
}
.page-hero .btn-secondary:hover, .final-cta .btn-secondary:hover { background: rgba(255, 255, 255, 0.1); }
.page-hero.home { padding: 92px 0 84px; }
.page-hero.home h1 { max-width: 900px; font-size: clamp(36px, 5.4vw, 62px); line-height: 1.05; }
.page-hero .reassure {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 22px; margin-top: 26px;
  font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, 0.85);
}
.page-hero .reassure span { display: inline-flex; align-items: center; gap: 7px; }
.page-hero .reassure svg { color: var(--yellow); flex-shrink: 0; }

/* Final CTA band: black with yellow */
.final-cta { background: var(--ink); }
.final-cta .label { color: var(--yellow) !important; }

/* Footer */
footer.site-footer { background: var(--ink); }

/* Alternating panels */
section.panel.alt { background: var(--panel-tint); }

/* ---------- Small pieces ---------- */
.section-cta { margin-top: 40px; display: flex; justify-content: center; }
.section-cta .cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.text-link { color: var(--trade-orange-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.split .copy .check-list li > span:last-child { flex: 1; }
.split.flip .visual { order: 0; }
@media (min-width: 980px) { .split.flip .visual { order: 2; } }
.client-logo { max-height: 56px; max-width: 200px; width: auto; height: auto; display: block; margin-bottom: 16px; }
.step-card:not(:has(.num)) h3 { margin-top: 0; }

/* Portfolio: 4 cards = 2 x 2 */
@media (min-width: 1024px) { .work-grid.four { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-left: auto; margin-right: auto; } }
.work-card.solo { display: block; }
.work-card.solo .shot { height: 560px; }
.work-card.solo:hover .shot img { transform: translateY(calc(-100% + 560px)); }

/* Review quotes */
.quote-grid { display: grid; gap: 22px; grid-template-columns: 1fr; max-width: 980px; margin: 0 auto; }
@media (min-width: 800px) { .quote-grid { grid-template-columns: 1fr 1fr; } }
.quote-card {
  margin: 0; background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 30px 30px 26px;
  display: flex; flex-direction: column; gap: 16px;
}
.qc-stars { color: var(--gold); letter-spacing: 2px; font-size: 18px; }
.quote-card blockquote { margin: 0; font-size: 16px; line-height: 1.65; color: var(--wft-dark); flex: 1; }
.quote-card figcaption { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--wft-dark-dim); }
.quote-card figcaption strong { display: block; color: var(--wft-dark); font-size: 15px; }
.qc-av {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--trade-grad); color: var(--white); font-weight: 700; font-size: 14px; flex-shrink: 0;
}

/* Guide teaser cards */
.guide-cards { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .guide-cards { grid-template-columns: repeat(3, 1fr); } }
.guide-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--white); border-radius: var(--radius); padding: 28px;
  box-shadow: var(--shadow-card); color: var(--wft-dark); text-decoration: none;
  border: 1px solid transparent; transition: transform .2s ease, border-color .2s ease;
}
.guide-card:hover { transform: translateY(-4px); border-color: var(--orange-border); }
.guide-card h3 { font-size: 19px; line-height: 1.3; margin: 0; }
.guide-card p { margin: 0; color: var(--wft-dark-soft); font-size: 15px; }
.gc-tag {
  align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--trade-orange-text);
  background: var(--orange-tint); padding: 5px 10px; border-radius: 50px;
}
.gc-more { margin-top: auto; padding-top: 6px; font-weight: 600; font-size: 14px; color: var(--trade-orange-text); }

/* Package inclusions */
.incl-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .incl-grid { grid-template-columns: repeat(3, 1fr); } }
.incl-col { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 30px 28px; }
.incl-num { font-weight: 800; font-size: 13px; color: var(--trade-orange-text); letter-spacing: .08em; }
.incl-col h3 { margin: 6px 0 4px; font-size: 21px; }
.incl-col > p { margin: 0 0 18px; color: var(--wft-dark-dim); font-size: 14.5px; }
.incl-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.incl-col li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--wft-dark-soft); line-height: 1.5; }
.incl-col li svg { color: var(--green); flex-shrink: 0; margin-top: 3px; }
.incl-col li strong { color: var(--wft-dark); }
.not-incl {
  margin: 28px auto 0; max-width: 860px; padding: 18px 22px; border-radius: 14px;
  background: var(--orange-tint); border: 1px solid var(--orange-border);
  font-size: 15px; color: var(--wft-dark-soft); text-align: center;
}
.not-incl strong { color: var(--wft-dark); }

/* Founder strip */
.founder-strip {
  display: grid; gap: 28px; align-items: center; max-width: 860px; margin: 0 auto;
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 28px;
}
@media (min-width: 720px) { .founder-strip { grid-template-columns: 180px 1fr; padding: 34px; } }
.founder-strip img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; }
.founder-strip p { margin: 0 0 12px; color: var(--wft-dark-soft); font-size: 16px; }
.fs-sign strong { display: block; color: var(--wft-dark); }

/* ---------- Long-form text: legal pages + guides ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(23px, 2.6vw, 29px); line-height: 1.25; letter-spacing: -0.01em; margin: 44px 0 14px; }
.prose h3 { font-size: 19px; margin: 30px 0 10px; }
.prose p, .prose li { color: var(--wft-dark-soft); font-size: 17px; line-height: 1.75; }
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 20px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--wft-dark); }
.prose a { color: var(--trade-orange-text); text-decoration: underline; text-underline-offset: 3px; }
.prose .updated { font-size: 14px; color: var(--wft-dark-dim); }
.prose > h2:first-child, .prose .updated + h2 { margin-top: 10px; }

.guide-meta {
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center;
  margin-top: 22px; font-size: 14px; color: rgba(255, 255, 255, 0.7);
}
.guide-meta strong { color: var(--yellow); font-weight: 700; }

.answer-box {
  background: var(--white); border-left: 4px solid var(--trade-orange);
  border-radius: 0 14px 14px 0; box-shadow: var(--shadow-card);
  padding: 22px 26px; margin: 0 0 30px;
}
.answer-box p:last-child { margin-bottom: 0; }
.answer-box .ab-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--trade-orange-text); margin-bottom: 6px; }

.toc { background: var(--panel-tint); border-radius: 14px; padding: 20px 24px; margin: 0 0 34px; }
.toc strong { display: block; margin-bottom: 8px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--wft-dark-dim); }
.toc ol { margin: 0; padding-left: 20px; }
.toc li { font-size: 15.5px; margin-bottom: 4px; line-height: 1.5; }

.callout {
  background: var(--orange-tint); border: 1px solid var(--orange-border);
  border-radius: 14px; padding: 18px 22px; margin: 24px 0;
}
.callout p:last-child { margin-bottom: 0; }

.confirm {
  background: #FFE9A8; color: #5C4300; border: 1px dashed #C99A00;
  padding: 1px 6px; border-radius: 4px; font-size: .9em; font-weight: 600;
}

figure.shot-fig { margin: 28px 0; }
figure.shot-fig img { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }
figure.shot-fig figcaption { text-align: center; font-size: 14px; color: var(--wft-dark-dim); margin-top: 10px; }

/* State-by-state table */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: 14px; box-shadow: var(--shadow-card); background: var(--white); margin: 24px 0 30px;
}
table.rules { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px; }
table.rules th, table.rules td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--wft-dark-hairline); line-height: 1.5; }
table.rules thead th { background: var(--ink); color: var(--yellow); font-weight: 600; white-space: nowrap; }
table.rules tbody th { font-weight: 700; color: var(--wft-dark); background: var(--panel-tint); white-space: nowrap; }
table.rules td { color: var(--wft-dark-soft); }
table.rules tr:last-child th, table.rules tr:last-child td { border-bottom: 0; }

.sources { border-top: 1px solid var(--wft-dark-line); margin-top: 44px; padding-top: 22px; }
.sources h2 { font-size: 20px; margin-top: 0; }
.sources li { font-size: 14.5px; line-height: 1.6; word-break: break-word; }

.author-box {
  display: flex; gap: 18px; align-items: center; margin-top: 40px;
  background: var(--panel-tint); border-radius: 16px; padding: 20px 22px;
}
.author-box img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.author-box p { margin: 0; font-size: 15px; line-height: 1.6; }

/* Guides index */
.guides-list { display: grid; gap: 22px; max-width: 900px; margin: 0 auto; }
.guides-list .guide-card { padding: 30px 32px; }
.guides-list .guide-card h3 { font-size: 22px; }

/* Shared CSS has no 3-up variant; six service cards read better 3 x 2 */
@media (min-width: 1024px) { .steps-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

/* Badge on photos: black chip, yellow number (no highlighter here) */
.badge-tag { background: var(--ink); color: var(--white); border-radius: 16px; }
.badge-tag .big { background: none; color: var(--yellow); -webkit-text-fill-color: var(--yellow); padding: 0; }

/* ---------- Two-package pricing cards ---------- */
.price-grid { display: grid; gap: 24px; grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; }
@media (min-width: 800px) { .price-grid { grid-template-columns: 1fr 1fr; } }
.price-card {
  position: relative; background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 34px 30px 30px; display: flex; flex-direction: column; gap: 14px;
}
.price-card.featured { background: var(--ink); color: var(--white); box-shadow: 0 0 0 3px var(--yellow), var(--shadow-card); }
.price-card h3 { margin: 0; font-size: 22px; }
.pc-tag {
  align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--yellow); color: var(--ink); padding: 5px 11px; border-radius: 50px;
}
.price-card:not(.featured) .pc-tag { background: var(--panel-tint); }
.pc-price { margin: 0; font-size: 16px; color: var(--wft-dark-dim); }
.pc-price strong { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); margin-right: 4px; }
.price-card.featured .pc-price { color: rgba(255,255,255,0.7); }
.price-card.featured .pc-price strong { color: var(--yellow); }
.price-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.price-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.price-card li svg { color: var(--green); flex-shrink: 0; margin-top: 3px; }
.price-card.featured li svg { color: var(--yellow); }
.pc-note { margin: 0; font-size: 13.5px; color: var(--wft-dark-dim); }
.price-card.featured .pc-note { color: rgba(255,255,255,0.65); }
.price-card .btn-primary { margin-top: auto; align-self: stretch; }
.price-card:not(.featured) .btn-primary { background: var(--ink); color: var(--white); }
.price-card:not(.featured) .btn-primary .arrow { background: rgba(255,255,255,0.18); }

/* Stats band sits straight under the black hero - keep it one continuous dark block */
.impact-bar { background: var(--ink); padding-top: 8px; }
.impact-bar::before, .impact-bar::after { display: none; }
.impact-item { border-radius: 18px; }

/* Three review cards */
@media (min-width: 1024px) { .quote-grid.three { grid-template-columns: repeat(3, 1fr); max-width: none; } }
.quote-card figcaption a { color: var(--wft-dark-dim); text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 2px; }

/* SEO proof block (Bice Electrical results) */
.seo-proof { background: var(--ink); color: var(--white); border-radius: var(--radius); padding: 30px; margin: 0 auto 36px; max-width: 1000px; }
.seo-proof-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.seo-proof-head img { height: 44px; width: auto; background: #fff; border-radius: 10px; padding: 6px 10px; }
.seo-proof-head p { margin: 0; flex: 1; min-width: 240px; color: rgba(255,255,255,0.82); font-size: 15.5px; }
.seo-proof-head strong { color: var(--white); }
.seo-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 24px 0 18px; }
@media (min-width: 860px) { .seo-stats { grid-template-columns: repeat(4, 1fr); } }
.seo-stat { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.ss-num { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; color: var(--yellow); letter-spacing: -0.02em; line-height: 1; }
.ss-label { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.4; }
.seo-source { margin: 0; font-size: 13px; color: rgba(255,255,255,0.6); }
.seo-source a { color: var(--white); text-decoration: underline; text-decoration-color: var(--yellow); }
.section-head p .text-link { font-weight: 700; }

/* Price comparison */
table.compare-prices tr.ours th, table.compare-prices tr.ours td { background: var(--yellow-soft); color: var(--ink); font-weight: 600; }
table.compare-prices tr.ours th { box-shadow: inset 4px 0 0 var(--yellow); }
.sources-toggle { max-width: 900px; margin: 6px auto 0; font-size: 14px; color: var(--wft-dark-soft); }
.sources-toggle summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.sources-toggle a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); }

/* Pricing: who it suits + worked totals */
.worked { display: grid; gap: 22px; max-width: 900px; margin: 28px auto 0; background: var(--panel-tint); border-radius: var(--radius); padding: 26px 28px; }
@media (min-width: 800px) { .worked { grid-template-columns: 1fr 1fr; } }
.worked h3 { margin: 0 0 8px; font-size: 18px; }
.worked p, .worked li { font-size: 15px; color: var(--wft-dark-soft); line-height: 1.6; margin: 0; }
.worked ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.worked strong { color: var(--ink); }
.last-reviewed { text-align: center; font-size: 13.5px; color: var(--wft-dark-dim); margin: 16px 0 0; }
.split .copy p a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }

/* Stats band: brand yellow numbers (shared CSS hard-codes the orange gradient) */
.impact-num .grad { background: none !important; color: var(--yellow) !important; -webkit-text-fill-color: var(--yellow) !important; }
.impact-sign { color: var(--yellow); }
.impact-stars { color: var(--yellow); }
.impact-go { color: var(--yellow); }
.impact-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); }
.impact-item:hover { border-color: var(--yellow); }

/* Two "reasons to believe" tiles */
@media (min-width: 980px) { .impact-row.three { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.impact-row.three .impact-item { padding: 30px 30px 26px; }
.impact-row.three .impact-label { font-size: 19px; }
.impact-row.three .impact-sub { font-size: 15px; color: rgba(255,255,255,0.72); }

/* Reason tiles: yellow icon badge + clear heading */
.impact-icon {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: var(--yellow); color: var(--ink); margin-bottom: 6px;
}
.impact-row.three .impact-label { font-size: 21px; line-height: 1.25; }

/* Jeremy in the hero */
.jeremy-card {
  display: inline-flex; align-items: center; gap: 14px; margin: 26px auto 0; text-align: left;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px; padding: 8px 22px 8px 8px; max-width: 560px;
}
.jeremy-card img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--yellow); flex-shrink: 0; }
.page-hero .jeremy-card p { margin: 0; font-size: 14.5px; color: rgba(255,255,255,0.85); max-width: none; }
.jeremy-card strong { color: var(--white); }
.jeremy-card a { color: var(--yellow); font-weight: 700; white-space: nowrap; }
@media (max-width: 560px) { .jeremy-card { border-radius: 20px; } }

/* Meet Jeremy */
.video-portrait .play-circle { background: var(--yellow); color: var(--ink); }
.split .copy .signature { width: 170px; height: auto; display: block; margin: 6px 0 4px; }
.transcript { margin-top: 22px; font-size: 14.5px; color: var(--wft-dark-soft); }
.transcript summary { cursor: pointer; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 3px; }
.transcript p { font-size: 14.5px !important; margin: 10px 0 0 !important; }

/* Contact: photo of Jeremy */
.contact-jeremy { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.contact-jeremy img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid var(--yellow); flex-shrink: 0; }
.contact-jeremy p { margin: 0; }

/* Reason tiles: platform logos + Jeremy's face */
.impact-icons { display: flex; gap: 10px; margin-bottom: 6px; }
.logo-badge { width: 52px; height: 52px; border-radius: 16px; background: #fff; display: grid; place-items: center; }
.impact-face { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--yellow); }
.tm-note { margin: 16px 0 0; font-size: 12px; color: rgba(255,255,255,0.45); text-align: center; }

/* Hero: Jeremy card, clearly a real person */
.jeremy-card { padding: 12px 24px 12px 12px; gap: 16px; border-radius: 24px; max-width: 620px; }
.jeremy-card img { width: 78px; height: 78px; }
.page-hero .jeremy-card p { line-height: 1.45; }
.page-hero .jeremy-card .jc-name { font-size: 15.5px; margin-bottom: 2px; }
.jc-name span { color: rgba(255,255,255,0.6); font-size: 13px; margin-left: 6px; }
.jeremy-card .jc-video { display: inline-block; margin-top: 4px; font-size: 13.5px; color: var(--yellow); font-weight: 700; text-decoration: none; }
.jeremy-card .jc-video:hover { text-decoration: underline; }

/* ---------- Websites carousel ----------
   The strip drifts sideways slowly; each card shows the TOP of the client's
   site (its hero, which reads well at this size). Hovering a card scrolls
   through that site. No motion at all for prefers-reduced-motion. */
.site-reel { overflow: hidden; padding: 10px 0 6px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.reel-track { display: flex; gap: 28px; width: max-content; animation: reel-slide 80s linear infinite; }
.site-reel:hover .reel-track, .site-reel:focus-within .reel-track { animation-play-state: paused; }
@keyframes reel-slide { to { transform: translateX(calc(-100% / 3 - 9.33px)); } }
.reel-card { flex: 0 0 360px; display: block; text-decoration: none; color: var(--white); transition: transform .25s ease; }
.reel-card:hover, .reel-card:focus-visible { transform: translateY(-6px); }
.reel-bar { display: flex; align-items: center; gap: 6px; background: #26262A; border-radius: 14px 14px 0 0; padding: 10px 14px; }
.reel-bar i { width: 9px; height: 9px; border-radius: 50%; background: #4A4A50; }
.reel-bar i:first-child { background: var(--yellow); }
.reel-bar span { margin-left: 8px; font-size: 12px; color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel-win { display: block; height: 440px; overflow: hidden; border-radius: 0 0 14px 14px; background: #fff; box-shadow: 0 24px 50px -24px rgba(0,0,0,0.8); }
.reel-win img { width: 360px; height: auto; display: block; transform: translateY(0); transition: transform 1s ease; }
.reel-card:hover .reel-win img, .reel-card:focus-visible .reel-win img { transform: translateY(var(--travel)); transition: transform var(--dur) linear; }
.reel-name { display: block; margin-top: 14px; font-weight: 700; font-size: 16px; text-align: center; }
.reel-name::after { content: " \2192"; color: var(--yellow); }
.reel-card:hover .reel-name, .reel-card:focus-visible .reel-name { color: var(--yellow); }
@media (prefers-reduced-motion: reduce) {
  .reel-track { animation: none; }
  .reel-win img { transition: none !important; transform: none !important; }
  .site-reel { overflow-x: auto; }
}

/* ---------- Split home hero: copy left, Jeremy right ---------- */
.page-hero.hero-split { text-align: left; padding: 64px 0 40px; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 56px; } }
.hero-split h1 { margin: 16px 0 16px; max-width: none; font-size: clamp(36px, 5vw, 60px); line-height: 1.04; }
.hero-split .hero-copy > p { margin: 0; max-width: 520px; font-size: 19px; }
.hero-split .cta-row { justify-content: flex-start; }
.hero-split .reassure { justify-content: flex-start; }
@media (max-width: 979px) {
  .page-hero.hero-split { text-align: center; }
  .hero-split .hero-copy > p { margin: 0 auto; }
  .hero-split .cta-row, .hero-split .reassure { justify-content: center; }
}
.hero-visual { position: relative; max-width: 440px; width: 100%; margin: 0 auto; }
.hv-photo { border-radius: 28px; overflow: hidden; border: 3px solid var(--yellow); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.9); }
.hv-photo img { width: 100%; height: auto; display: block; }
.hv-badge {
  position: absolute; background: rgba(16,16,18,0.92); border: 1px solid rgba(255,255,255,0.14); color: var(--white);
  border-radius: 18px; padding: 12px 16px; box-shadow: 0 20px 40px -18px rgba(0,0,0,0.9); backdrop-filter: blur(6px);
  font-size: 14px; line-height: 1.35; text-decoration: none; text-align: left;
}
.hv-name { left: -28px; bottom: 34px; display: flex; flex-direction: column; gap: 2px; max-width: 250px; }
.hv-name span { color: rgba(255,255,255,0.75); font-size: 13px; }
.hv-name em { font-style: normal; color: var(--yellow); font-weight: 700; font-size: 13px; margin-top: 4px; }
.hv-name:hover em { text-decoration: underline; }
.hv-rating { right: -22px; top: 26px; display: flex; align-items: center; gap: 10px; }
.hv-rating small { color: rgba(255,255,255,0.65); font-size: 12px; }
.hv-phone { position: absolute; right: -54px; bottom: -30px; width: 150px; height: auto; filter: drop-shadow(0 24px 30px rgba(0,0,0,0.6)); }
@media (max-width: 560px) {
  .hv-name { left: -6px; bottom: 16px; }
  .hv-rating { right: -6px; top: 14px; }
  .hv-phone { right: -10px; width: 110px; }
}


/* Carousel band straight under the hero */
.site-reel-band { background: var(--ink); padding: 18px 0 56px; }
.reel-caption { text-align: center; color: rgba(255,255,255,0.7); font-size: 14px; margin: 0 0 18px; }
.reel-caption a { color: var(--yellow); font-weight: 700; margin-left: 8px; }

/* Service chips (replaces six paragraph cards) */
.service-chips { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.service-chips li { background: var(--white); border: 1px solid var(--wft-dark-line); border-radius: 999px; padding: 12px 20px; font-weight: 700; font-size: 15.5px; color: var(--ink); box-shadow: 0 8px 20px -14px rgba(11,11,13,0.35); }
.service-chips li::before { content: "\26A1"; margin-right: 8px; }

/* Phones: Jeremy's face above the headline (the big photo sits below the buttons) */
.hero-mface { display: none; }
@media (max-width: 979px) {
  .hero-mface {
    display: inline-flex; align-items: center; gap: 12px; margin: 0 auto 18px; padding: 6px 16px 6px 6px;
    border-radius: 999px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
    color: var(--white); text-decoration: none; text-align: left; font-size: 14px; line-height: 1.3;
  }
  .hero-mface img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--yellow); }
  .hero-mface em { display: block; font-style: normal; color: var(--yellow); font-size: 12.5px; }
  .hero-split .label { display: block; }
}

/* On-site photo in the Bice case study */
.onsite-fig { margin: 18px 0 6px; }
.onsite-fig img { width: 100%; height: auto; border-radius: 16px; display: block; }
.onsite-fig figcaption { font-size: 13.5px; color: var(--wft-dark-dim); margin-top: 8px; }

/* Carousel cards: no browser chrome, bright border + glow so they stand out */
.reel-win {
  border-radius: 20px; border: 3px solid rgba(255,255,255,0.95);
  box-shadow: 0 0 0 6px rgba(255,196,0,0.14), 0 30px 60px -22px rgba(255,196,0,0.35), 0 24px 50px -24px rgba(0,0,0,0.9);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.reel-card:hover .reel-win, .reel-card:focus-visible .reel-win {
  border-color: var(--yellow);
  box-shadow: 0 0 0 8px rgba(255,196,0,0.25), 0 34px 70px -20px rgba(255,196,0,0.5), 0 24px 50px -24px rgba(0,0,0,0.9);
}
.site-reel { padding: 24px 0 10px; }

.reel-win { background: #1A1A1D; }

/* Google rating on the Jeremy tile */
.tile-rating { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); color: var(--white); font-size: 14.5px; line-height: 1.35; }
.tr-g { width: 40px; height: 40px; border-radius: 12px; background: #fff; display: grid; place-items: center; flex-shrink: 0; }
.tr-g svg { width: 24px; height: 24px; }
.tr-stars { color: var(--yellow); letter-spacing: 1.5px; }
.tile-rating small { color: rgba(255,255,255,0.6); font-size: 12.5px; }

/* Hero value pills (replace the tick row and the old tile band) */
.value-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
@media (max-width: 979px) { .value-pills { justify-content: center; } }
.value-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); color: var(--white);
  font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .2s ease, background .2s ease;
}
.value-pill:hover { border-color: var(--yellow); background: rgba(255,196,0,0.08); }
.vp-ic { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex-shrink: 0; overflow: hidden; }
.vp-ic + .vp-ic { margin-left: -14px; box-shadow: 0 0 0 2px var(--ink); }
.vp-ic svg { width: 18px; height: 18px; }
.vp-face { border: 2px solid var(--yellow); }
.vp-face img { width: 100%; height: 100%; object-fit: cover; }

/* Meet Jeremy: why-list */
.why-list { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; gap: 14px; }
.why-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 15.5px; color: var(--wft-dark-soft); line-height: 1.55; }
.why-list strong { color: var(--ink); }
.why-ic { width: 42px; height: 42px; border-radius: 12px; background: #fff; border: 1px solid var(--wft-dark-line); display: grid; place-items: center; flex-shrink: 0; overflow: hidden; }
.why-ic svg { width: 22px; height: 22px; }
.why-face { border-radius: 50%; border: 2px solid var(--yellow); }
.why-face img { width: 100%; height: 100%; object-fit: cover; }
.tm-note-light { font-size: 11.5px !important; color: var(--wft-dark-dim) !important; margin: 4px 0 10px !important; }
.value-pills { gap: 8px; flex-wrap: wrap; }
.value-pill { font-size: 13px; padding: 5px 12px 5px 5px; gap: 7px; white-space: nowrap; }
.vp-ic { width: 26px; height: 26px; }
.vp-ic svg { width: 16px; height: 16px; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.25fr 0.75fr; } }

/* Value pills as a clear stacked list */
.value-pills { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 24px; }
@media (max-width: 979px) { .value-pills { align-items: center; } }
.value-pill { font-size: 15px; font-weight: 500; padding: 6px 18px 6px 6px; gap: 10px; white-space: normal; text-align: left; }
.value-pill strong { color: var(--yellow); font-weight: 700; }
.vp-ic { width: 34px; height: 34px; }
.vp-ic svg { width: 20px; height: 20px; }

/* ---------- How it works, with visuals ---------- */
.hw-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .hw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .hw-grid { grid-template-columns: repeat(4, 1fr); } }
.hw-card { position: relative; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 16px 16px 24px; }
.hw-visual { height: 180px; border-radius: 16px; background: var(--ink); overflow: hidden; display: grid; place-items: center; position: relative; margin-bottom: 18px; }
.hw-num { position: absolute; top: 172px; left: 26px; width: 40px; height: 40px; border-radius: 12px; background: var(--yellow); color: var(--ink); font-weight: 800; display: grid; place-items: center; box-shadow: 0 8px 18px -8px rgba(255,196,0,0.8); }
.hw-card h3 { margin: 18px 10px 6px; font-size: 19px; }
.hw-card p { margin: 0 10px; color: var(--wft-dark-soft); font-size: 15px; line-height: 1.55; }
/* 1: call card */
.hw-call { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 999px; padding: 8px 10px 8px 8px; box-shadow: 0 16px 30px -12px rgba(0,0,0,0.6); }
.hw-call img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--yellow); }
.hw-call strong { display: block; font-size: 15px; color: var(--ink); }
.hw-call div span { font-size: 13px; color: var(--wft-dark-dim); }
.hw-callbtn { width: 38px; height: 38px; border-radius: 50%; background: #1FA855; color: #fff; display: grid; place-items: center; margin-left: 6px; }
/* 2: form mock */
.hw-form { width: 82%; background: #fff; border-radius: 12px; padding: 10px; display: grid; gap: 6px; box-shadow: 0 16px 30px -12px rgba(0,0,0,0.6); }
.hw-field { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; border: 1px solid var(--wft-dark-line); border-radius: 7px; padding: 5px 8px; }
.hw-field b { color: var(--ink); font-weight: 700; }
.hw-field i { font-style: normal; color: var(--wft-dark-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-submit { justify-self: end; background: var(--yellow); color: var(--ink); font-weight: 800; font-size: 11.5px; border-radius: 7px; padding: 4px 14px; }
/* 3: real site top */
.hw-shot { position: absolute; inset: 12px 12px 0; border-radius: 10px 10px 0 0; overflow: hidden; border: 2px solid rgba(255,255,255,0.9); border-bottom: 0; }
.hw-shot img { width: 100%; height: auto; display: block; }
/* 4: live on phones */
.hw-live { position: absolute; inset: 0; background: var(--yellow-soft); }
.hw-live img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.hw-badge { position: absolute; top: 10px; right: 10px; background: #1FA855; color: #fff; font-weight: 800; font-size: 12px; border-radius: 999px; padding: 4px 10px; }

/* ---------- Electricity: subtle current in the home hero ----------
   Faint circuit traces with a short pulse of current running along each,
   a rare flicker on the accent words, and a spark that circles the photo
   frame. Everything here stops for prefers-reduced-motion. */
.hero-circuit { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hc-trace { fill: none; stroke: rgba(255, 194, 14, 0.07); stroke-width: 2; }
.hc-via { fill: var(--ink); stroke: rgba(255, 194, 14, 0.22); stroke-width: 2; }
.hc-pulse {
  fill: none; stroke: var(--yellow); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 34 966; stroke-dashoffset: 1000; opacity: 0;
  filter: drop-shadow(0 0 4px rgba(255, 210, 60, 0.9));
  animation: hc-run 7s cubic-bezier(.55, 0, .45, 1) infinite;
}
.hc-p1 { animation-duration: 8.5s; animation-delay: 1.6s; }
.hc-p2 { animation-duration: 9s;   animation-delay: 3.1s; }
.hc-p3 { animation-duration: 7.5s; animation-delay: 4.4s; }
.hc-p4 { animation-duration: 10s;  animation-delay: 2.2s; }
.hc-p5 { animation-duration: 8s;   animation-delay: 5.6s; }
@keyframes hc-run {
  0%   { stroke-dashoffset: 1000; opacity: 0; }
  6%   { opacity: .85; }
  55%  { stroke-dashoffset: 0; opacity: .85; }
  62%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.hero-split .hero-copy, .hero-split .hero-visual { position: relative; z-index: 1; }

/* Accent words: a quick double flicker every few seconds, like a light coming on */
.hero-split h1 .accent-text { animation: wfe-flicker 6.5s steps(1, end) infinite; text-shadow: 0 0 18px rgba(255, 194, 14, 0.25); }
@keyframes wfe-flicker {
  0%, 90%, 100% { opacity: 1; text-shadow: 0 0 18px rgba(255, 194, 14, 0.25); }
  91% { opacity: .55; text-shadow: none; }
  92% { opacity: 1; text-shadow: 0 0 26px rgba(255, 194, 14, 0.55); }
  93% { opacity: .7; text-shadow: none; }
  94% { opacity: 1; text-shadow: 0 0 30px rgba(255, 194, 14, 0.6); }
}

/* Spark travelling round the photo frame */
@property --spark-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.hv-photo { position: relative; }
.hv-photo::after {
  content: ''; position: absolute; inset: 0; border-radius: 25px; padding: 3px; pointer-events: none;
  background: conic-gradient(from var(--spark-a), transparent 0deg 330deg, rgba(255,255,255,0.0) 334deg, #fff 350deg, #FFE27A 354deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(255, 226, 122, 0.9));
  animation: spark-orbit 5.5s linear infinite;
}
@keyframes spark-orbit { to { --spark-a: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .hc-pulse { animation: none; opacity: 0; }
  .hero-split h1 .accent-text { animation: none; }
  .hv-photo::after { animation: none; display: none; }
}

/* ---------- Trust badges (facts only: never invented awards or ratings) ---------- */
.trust-band { background: var(--ink); border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); padding: 18px 0; }
.tb-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .tb-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tb-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tb { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.03); color: var(--white); text-decoration: none; transition: border-color .2s ease, background .2s ease; }
a.tb:hover, a.tb:focus-visible { border-color: rgba(255,194,14,0.55); background: rgba(255,194,14,0.06); }
.tb-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); box-shadow: 0 0 0 4px rgba(255,194,14,0.12); }
.tb-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.tb-t strong { font-size: 14.5px; font-weight: 700; }
.tb-t small { font-size: 12.5px; color: rgba(255,255,255,0.6); margin-top: 2px; }

/* ---------- Meet Jeremy: tidier layout ---------- */
#meet-jeremy .split { align-items: start; }
@media (min-width: 980px) {
  #meet-jeremy .split { grid-template-columns: 0.8fr 1.2fr; gap: 64px; }
  #meet-jeremy .visual { position: sticky; top: 110px; }
}
#meet-jeremy .video-portrait { width: min(380px, 100%); border: 3px solid var(--yellow); border-radius: 26px; }
#meet-jeremy .video-portrait .play-hint { background: rgba(16,15,36,0.78); padding: 7px 14px; border-radius: 999px; text-shadow: none; font-size: 13.5px; }
#meet-jeremy .copy h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; max-width: 18ch; }
#meet-jeremy .why-list { gap: 16px; margin: 22px 0 18px; }
#meet-jeremy .why-list li { font-size: 15px; }
#meet-jeremy .why-list strong { display: block; font-size: 16px; margin-bottom: 2px; }
#meet-jeremy .signature { margin: 8px 0 0; }
#meet-jeremy .cta-row { margin-top: 18px; }
#meet-jeremy .tm-note-light { margin: 18px 0 0 !important; }

/* ---------- Five things a homeowner checks: numbered cards + markers on the phone ----------
   Markers pulse one after another; hovering/focusing a card (or its marker) lights
   both up. Pure CSS via :has(). Motion off for prefers-reduced-motion. */
.hs-wrap { position: relative; }
.hs {
  position: absolute; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--yellow); color: var(--ink); font-weight: 800; font-size: 14px;
  border: 2px solid var(--ink); box-shadow: 0 6px 16px -4px rgba(0,0,0,0.45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hs::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--yellow); opacity: 0;
  animation: hs-ping 10s ease-out infinite;
}
.hs-2::after { animation-delay: 2s; } .hs-3::after { animation-delay: 4s; }
.hs-4::after { animation-delay: 6s; } .hs-5::after { animation-delay: 8s; }
@keyframes hs-ping { 0% { transform: scale(1); opacity: .9; } 14% { transform: scale(2.3); opacity: 0; } 100% { opacity: 0; } }

.check-cards { list-style: none; margin: 20px 0 6px; padding: 0; display: grid; gap: 10px; counter-reset: none; }
.cc {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: default;
  background: #fff; border: 1px solid var(--wft-dark-line); border-radius: 16px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cc:focus { outline: none; }
.cc-n {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--yellow); font-weight: 800; font-size: 15px;
  transition: background .2s ease, color .2s ease;
}
.cc-t { display: flex; flex-direction: column; line-height: 1.35; }
.cc-t strong { font-size: 16.5px; color: var(--ink); }
.cc-t span { font-size: 15px; color: var(--wft-dark-soft); }
.cc:hover, .cc:focus-visible { transform: translateX(6px); border-color: var(--yellow); box-shadow: 0 10px 24px -14px rgba(16,15,36,0.35); }
.cc:hover .cc-n, .cc:focus-visible .cc-n { background: var(--yellow); color: var(--ink); }
.five-checks .split { align-items: center; }
.five-checks:has(.cc-1:hover) .hs-1, .five-checks:has(.cc-1:focus-visible) .hs-1 { transform: translate(-50%, -50%) scale(1.35); box-shadow: 0 0 0 8px rgba(255,194,14,0.35), 0 8px 20px -4px rgba(0,0,0,0.5); }
.five-checks:has(.cc-2:hover) .hs-2, .five-checks:has(.cc-2:focus-visible) .hs-2 { transform: translate(-50%, -50%) scale(1.35); box-shadow: 0 0 0 8px rgba(255,194,14,0.35), 0 8px 20px -4px rgba(0,0,0,0.5); }
.five-checks:has(.cc-3:hover) .hs-3, .five-checks:has(.cc-3:focus-visible) .hs-3 { transform: translate(-50%, -50%) scale(1.35); box-shadow: 0 0 0 8px rgba(255,194,14,0.35), 0 8px 20px -4px rgba(0,0,0,0.5); }
.five-checks:has(.cc-4:hover) .hs-4, .five-checks:has(.cc-4:focus-visible) .hs-4 { transform: translate(-50%, -50%) scale(1.35); box-shadow: 0 0 0 8px rgba(255,194,14,0.35), 0 8px 20px -4px rgba(0,0,0,0.5); }
.five-checks:has(.cc-5:hover) .hs-5, .five-checks:has(.cc-5:focus-visible) .hs-5 { transform: translate(-50%, -50%) scale(1.35); box-shadow: 0 0 0 8px rgba(255,194,14,0.35), 0 8px 20px -4px rgba(0,0,0,0.5); }

/* Reverse link: hovering a marker on the phone highlights its card */
.hs { cursor: pointer; }
.hs:hover { transform: translate(-50%, -50%) scale(1.35); box-shadow: 0 0 0 8px rgba(255,194,14,0.35), 0 8px 20px -4px rgba(0,0,0,0.5); }
.five-checks:has(.hs-1:hover) .cc-1 { transform: translateX(6px); border-color: var(--yellow); box-shadow: 0 10px 24px -14px rgba(16,15,36,0.35); }
.five-checks:has(.hs-1:hover) .cc-1 .cc-n { background: var(--yellow); color: var(--ink); }
.five-checks:has(.hs-2:hover) .cc-2 { transform: translateX(6px); border-color: var(--yellow); box-shadow: 0 10px 24px -14px rgba(16,15,36,0.35); }
.five-checks:has(.hs-2:hover) .cc-2 .cc-n { background: var(--yellow); color: var(--ink); }
.five-checks:has(.hs-3:hover) .cc-3 { transform: translateX(6px); border-color: var(--yellow); box-shadow: 0 10px 24px -14px rgba(16,15,36,0.35); }
.five-checks:has(.hs-3:hover) .cc-3 .cc-n { background: var(--yellow); color: var(--ink); }
.five-checks:has(.hs-4:hover) .cc-4 { transform: translateX(6px); border-color: var(--yellow); box-shadow: 0 10px 24px -14px rgba(16,15,36,0.35); }
.five-checks:has(.hs-4:hover) .cc-4 .cc-n { background: var(--yellow); color: var(--ink); }
.five-checks:has(.hs-5:hover) .cc-5 { transform: translateX(6px); border-color: var(--yellow); box-shadow: 0 10px 24px -14px rgba(16,15,36,0.35); }
.five-checks:has(.hs-5:hover) .cc-5 .cc-n { background: var(--yellow); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .hs::after { animation: none; } .cc, .hs { transition: none; } .cc:hover, .cc:focus-visible { transform: none; } }

/* ---------- Trust seals: award-style graphics with factual wording, placed
   beside the content each one backs up. Small, tilted, quiet. ---------- */
.seal-host { position: relative; }
.seal-float { position: absolute; z-index: 3; display: block; width: 96px; text-decoration: none;
  transform: rotate(-10deg); filter: drop-shadow(0 8px 14px rgba(0,0,0,0.28)); transition: transform .25s ease; }
.seal-svg { width: 100%; height: auto; display: block; font-family: inherit; }
.seal-float:hover, .seal-float:focus-visible { transform: rotate(-4deg) scale(1.06); }
.seal-checks { right: 4%; bottom: 6%; width: 116px; }
.seal-how { right: 0; top: -8px; transform: rotate(8deg); }
.seal-how:hover, .seal-how:focus-visible { transform: rotate(2deg) scale(1.06); }
.price-card { position: relative; }
.seal-card { right: -18px; top: -28px; width: 84px; }
.video-seal-host { width: min(380px, 100%); margin: 0 auto; }
.seal-video { right: -30px; bottom: 40px; width: 104px; transform: rotate(10deg); }
.seal-video:hover, .seal-video:focus-visible { transform: rotate(4deg) scale(1.06); }
@media (max-width: 979px) { .seal-how { display: none; } .seal-video { right: -8px; width: 88px; } }
@media (max-width: 560px) { .seal-card { right: -6px; top: -22px; width: 68px; } .seal-checks { width: 92px; } }
@media (prefers-reduced-motion: reduce) { .seal-float { transition: none; } }

/* ---------- Hero: small BICE phone mockup beside the on-site photo ----------
   Hangs off the photo's top-right corner over the wall, so it never covers a face. */
.hv-site {
  position: absolute; z-index: 4; top: -30px; right: -52px; width: 104px;
  display: block; text-decoration: none;
  transform: rotate(8deg); transition: transform .3s ease;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,0.6));
}
.hv-site img { width: 100%; height: auto; display: block; }
.hv-site:hover, .hv-site:focus-visible { transform: rotate(3deg) translateY(-3px) scale(1.04); }
.hv-site-cap { display: block; margin-top: 6px; text-align: center; font-size: 11px; font-weight: 700; color: var(--yellow); text-shadow: 0 1px 6px rgba(0,0,0,0.85); white-space: nowrap; }
@media (max-width: 1240px) { .hv-site { right: -30px; width: 92px; } }
@media (max-width: 979px) { .hv-site { top: -18px; right: -14px; width: 72px; } .hv-site-cap { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .hv-site { transition: none; } }