/* ============================================================
   CUBE Electrical — static stylesheet
   Brand: teal #0F8F8A, warm off-white #FAF8F4, charcoal #111827
   Fonts: Cabinet Grotesk (headings) / Satoshi (body)
   Edit colours in :root below to re-theme the whole site.
   ============================================================ */

:root {
  --primary: #0F8F8A;
  --primary-90: #0a6e6a;
  --primary-soft: #e6f4f4;
  --foreground: #111827;
  --background: #FAF8F4;
  --muted: #F3F4F6;
  --muted-foreground: #4B5563;
  --border: #E5E7EB;
  --radius: 6px;
  --container: 1280px;
  --font-sans: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Cabinet Grotesk', var(--font-sans);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 72px; /* room for mobile CTA bar */
}
@media (min-width: 768px) { body { padding-bottom: 0; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
::selection { background: #0F8F8A22; color: var(--primary); }

/* ---------- layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .container { padding: 0 48px; } }
.section { padding: 64px 0; }
@media (min-width: 768px) { .section { padding: 96px 0; } }
.eyebrow { color: var(--primary); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; }
.lead { font-size: 1.125rem; color: var(--muted-foreground); line-height: 1.7; }
@media (min-width: 768px) { .lead { font-size: 1.25rem; } }
.text-primary { color: var(--primary); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--radius);
  font-size: 0.95rem; font-weight: 500; transition: all 0.2s ease; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-dark { background: var(--foreground); color: #fff; }
.btn-dark:hover { background: hsl(240 10% 18%); }
.btn-dark:hover .arrow { transform: translateX(4px); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.btn-primary:hover { background: var(--primary-90); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--foreground); }
.btn-outline:hover { background: var(--muted); }
.btn-white { background: #fff; color: var(--primary); }
.btn-white:hover { background: rgba(255,255,255,.9); }
.btn-block { display: flex; width: 100%; }
.arrow { transition: transform 0.2s ease; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: all 0.3s ease; padding: 20px 0; background: transparent;
}
.navbar.scrolled { background: rgba(255,255,255,.95); backdrop-filter: blur(12px); box-shadow: 0 1px 2px rgba(0,0,0,.06); padding: 12px 0; }
.navbar.solid { background: rgba(255,255,255,.95); backdrop-filter: blur(12px); box-shadow: 0 1px 2px rgba(0,0,0,.06); padding: 12px 0; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; align-items: center; gap: 12px; z-index: 50; }
.nav-logo img { height: 32px; width: auto; }
@media (min-width: 768px) { .nav-logo img { height: 40px; } }
.nav-logo span { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; }
@media (max-width: 639px) { .nav-logo span { display: none; } }

.nav-desktop { display: none; align-items: center; gap: 32px; }
@media (min-width: 768px) { .nav-desktop { display: flex; } }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-link { font-size: 0.9rem; font-weight: 500; color: var(--muted-foreground); transition: color 0.2s; background: none; }
.nav-link:hover { color: var(--primary); }

.nav-dropdown { position: relative; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 4px; }
.nav-dropdown-toggle svg { width: 14px; height: 14px; transition: transform 0.2s; }
.nav-dropdown.open .nav-dropdown-toggle svg { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 12px; width: 288px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 8px 0;
  opacity: 0; visibility: hidden; transition: opacity 0.15s; z-index: 50;
}
.nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; }
.nav-dropdown-menu a { display: block; padding: 10px 20px; font-size: 0.9rem; color: var(--foreground); transition: all 0.15s; }
.nav-dropdown-menu a:hover { color: var(--primary); background: hsl(240 5% 96% / .5); }
.nav-dropdown-divider { border-top: 1px solid var(--border); margin: 8px 0 0; padding-top: 8px; }
.nav-dropdown-divider a { color: var(--muted-foreground); }

/* mobile toggle + menu */
.nav-toggle { display: inline-flex; padding: 8px; z-index: 50; color: var(--foreground); }
.nav-toggle svg { width: 24px; height: 24px; }
@media (min-width: 768px) { .nav-toggle { display: none; } }
.nav-mobile {
  position: fixed; inset: 0; background: #fff; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto;
}
.nav-mobile.open { transform: translateX(0); }
.nav-mobile-list { list-style: none; text-align: center; display: flex; flex-direction: column; gap: 20px; width: 100%; padding: 0 32px; }
.nav-mobile-list .group-label { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; color: var(--muted-foreground); margin-bottom: 12px; display: block; }
.nav-mobile-services { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.nav-mobile-services a { font-size: 1rem; color: var(--foreground); padding: 4px 0; display: block; }
.nav-mobile-services a:hover { color: var(--primary); }
.nav-mobile-link { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; }
.nav-mobile-link:hover { color: var(--primary); }
.nav-mobile-divider { border-top: 1px solid var(--border); padding-top: 16px; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; min-height: 100dvh; display: flex; align-items: center; padding: 96px 0 64px; overflow: hidden; }
.hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1fr 1fr; gap: 80px; } }
.hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 24px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: var(--muted); color: var(--muted-foreground); font-size: 0.75rem; font-weight: 500; }
.pill .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--primary); }
.stars { display: inline-flex; align-items: center; gap: 6px; }
.stars svg { width: 14px; height: 14px; fill: var(--primary); color: var(--primary); }
.stars .score { font-size: 0.75rem; font-weight: 600; margin-left: 4px; }
.stars .muted { font-size: 0.75rem; color: var(--muted-foreground); }
.hero h1 { font-size: 3rem; margin-bottom: 24px; }
@media (min-width: 768px) { .hero h1 { font-size: 3.75rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 4.5rem; } }
.hero p.lead { margin-bottom: 40px; max-width: 36rem; }
.hero-cta { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; }
@media (min-width: 640px) { .hero-cta { flex-direction: row; } }
.hero-ticks { display: flex; flex-wrap: wrap; gap: 16px 32px; font-size: 0.9rem; font-weight: 500; }
.hero-ticks div { display: flex; align-items: center; gap: 8px; }
.hero-ticks svg { width: 18px; height: 18px; color: var(--primary); }
.hero-media { position: relative; display: none; height: 700px; }
@media (min-width: 1024px) { .hero-media { display: block; } }
.hero-media .accent { position: absolute; top: 40px; right: -40px; width: 100%; height: 100%; background: hsl(4 88% 46% / .1); border-radius: var(--radius); z-index: -1; transform: rotate(3deg); }
.hero-media .frame { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: var(--radius); box-shadow: 0 25px 50px -12px rgba(0,0,0,.35); }
.hero-media .frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-media .frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.4), transparent); }
.hero-quote { position: absolute; bottom: -32px; left: -32px; background: #fff; padding: 24px; box-shadow: 0 20px 40px rgba(0,0,0,.15); border-radius: var(--radius); max-width: 20rem; border: 1px solid var(--border); }
.hero-quote p:first-child { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; line-height: 1.3; margin-bottom: 8px; }
.hero-quote p:last-child { font-size: 0.875rem; color: var(--muted-foreground); }

/* ============================================================
   TRUST
   ============================================================ */
.trust { background: hsl(240 5% 96% / .5); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 768px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-icon { margin-bottom: 24px; background: #fff; width: 64px; height: 64px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,.06); border: 1px solid var(--border); }
.trust-icon svg { width: 32px; height: 32px; color: var(--primary); stroke-width: 1.5; }
.trust h3 { font-size: 1.25rem; margin-bottom: 12px; }
.trust p { color: var(--muted-foreground); }

/* ============================================================
   PROJECTS (bento grid)
   ============================================================ */
.section-head { display: flex; flex-direction: column; gap: 32px; margin-bottom: 64px; }
@media (min-width: 768px) { .section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.section-head h2 { font-size: 2.25rem; margin-bottom: 16px; }
@media (min-width: 768px) { .section-head h2 { font-size: 3rem; } }
.section-head .max { max-width: 42rem; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 500; transition: color 0.2s; }
.link-arrow:hover { color: var(--primary); }
.link-arrow:hover .arrow { transform: translateX(4px); }
.link-arrow svg { width: 16px; height: 16px; }

.bento { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; } }
.bento-item { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--muted); }
.bento-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
@media (max-width: 767px) { .bento-item { height: 240px; } }
.bento-item:hover img { transform: scale(1.05); }
.bento-item .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.2) 50%, transparent); opacity: 0; transition: opacity 0.3s; }
.bento-item:hover .overlay { opacity: 1; }
.bento-item .caption { position: absolute; bottom: 0; left: 0; padding: 24px; transform: translateY(16px); opacity: 0; transition: all 0.3s; }
@media (min-width: 768px) { .bento-item .caption { padding: 32px; } }
.bento-item:hover .caption { transform: none; opacity: 1; }
.bento-item .caption .cat { font-size: 0.75rem; font-weight: 500; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-bottom: 8px; }
.bento-item .caption h3 { font-size: 1.25rem; font-weight: 500; color: #fff; }
@media (min-width: 768px) { .bento-item .caption h3 { font-size: 1.5rem; } }
.bento-lg { grid-column: span 1; }
@media (min-width: 768px) { .bento-lg { grid-column: span 2; grid-row: span 2; } }

/* ============================================================
   DARK SECTIONS (Services + How it works)
   ============================================================ */
.dark { background: var(--foreground); color: #fff; }
.dark h2 { color: #fff; }
.dark .lead { color: rgba(255,255,255,.7); }
.services-head { max-width: 48rem; margin-bottom: 64px; }
.services-head h2 { font-size: 2.25rem; margin-bottom: 24px; }
@media (min-width: 768px) { .services-head h2 { font-size: 3rem; } }
.services-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .services-grid { grid-template-columns: repeat(4, 1fr); } }
.service-card { display: flex; flex-direction: column; height: 100%; padding: 28px; border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); transition: all 0.2s; }
.service-card:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.service-card .ic { margin-bottom: 20px; }
.service-card .ic svg { width: 36px; height: 36px; color: var(--primary); stroke-width: 1.2; }
.service-card h3 { font-size: 1.125rem; font-weight: 500; color: #fff; margin-bottom: 12px; transition: color 0.2s; }
.service-card:hover h3 { color: var(--primary); }
.service-card p { color: rgba(255,255,255,.6); font-size: 0.9rem; flex: 1; }
.service-card .more { margin-top: 20px; font-size: 0.75rem; font-weight: 500; color: hsl(4 88% 60%); }

/* how it works */
.steps { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.step { display: flex; flex-direction: column; gap: 24px; }
.step-top { display: flex; align-items: center; gap: 16px; }
.step-num { font-family: var(--font-display); font-size: 3rem; font-weight: 600; color: rgba(255,255,255,.1); line-height: 1; user-select: none; }
.step-ic { width: 48px; height: 48px; border-radius: var(--radius); background: hsl(4 88% 46% / .1); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.step-ic svg { width: 28px; height: 28px; stroke-width: 1.5; }
.step h3 { font-size: 1.25rem; margin-bottom: 12px; color: #fff; }
.step p { color: rgba(255,255,255,.6); }
.hiw-cta { margin-top: 64px; padding-top: 48px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 640px) { .hiw-cta { flex-direction: row; align-items: center; justify-content: space-between; } }
.hiw-cta .big { color: rgba(255,255,255,.8); font-size: 1.125rem; font-weight: 500; }
.hiw-cta .sub { color: rgba(255,255,255,.5); font-size: 0.875rem; margin-top: 4px; }
.hiw-cta .actions { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 640px) { .hiw-cta .actions { flex-direction: row; } }
.btn-ghost-light { background: rgba(255,255,255,.1); color: #fff; }
.btn-ghost-light:hover { background: rgba(255,255,255,.15); }

/* ============================================================
   GUARANTEE
   ============================================================ */
.guarantee { background: hsl(4 88% 46% / .05); border-top: 1px solid hsl(4 88% 46% / .1); border-bottom: 1px solid hsl(4 88% 46% / .1); padding: 80px 0; }
.guarantee .center { text-align: center; margin-bottom: 48px; }
.guarantee h2 { font-size: 1.875rem; margin-bottom: 12px; }
@media (min-width: 768px) { .guarantee h2 { font-size: 2.25rem; } }
.guarantee .center p { color: var(--muted-foreground); max-width: 36rem; margin: 0 auto; }
.promise-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .promise-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .promise-grid { grid-template-columns: repeat(4, 1fr); } }
.promise { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.promise .ic { width: 40px; height: 40px; background: hsl(4 88% 46% / .08); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; }
.promise .ic svg { width: 22px; height: 22px; color: var(--primary); stroke-width: 1.5; }
.promise h3 { font-family: var(--font-sans); font-weight: 600; margin-bottom: 8px; }
.promise p { font-size: 0.875rem; color: var(--muted-foreground); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.testimonials .head { margin-bottom: 64px; display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 768px) { .testimonials .head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.testimonials .rating-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.testimonials .rating-row .stars svg { width: 20px; height: 20px; }
.testimonials h2 { font-size: 2.25rem; }
@media (min-width: 768px) { .testimonials h2 { font-size: 3rem; } }
.testimonials .head p { color: var(--muted-foreground); max-width: 24rem; }
@media (min-width: 768px) { .testimonials .head p { text-align: right; } }
.reviews { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .reviews { grid-template-columns: repeat(2, 1fr); } }
.review { background: hsl(240 5% 96% / .5); border: 1px solid var(--border); padding: 32px; border-radius: var(--radius); display: flex; flex-direction: column; gap: 20px; }
.review .stars svg { width: 16px; height: 16px; }
.review .body { flex: 1; line-height: 1.7; }
.review .foot { padding-top: 16px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review .foot .name { font-weight: 600; font-size: 0.875rem; }
.review .foot .loc { font-size: 0.75rem; color: var(--muted-foreground); }
.review .foot .tag { font-size: 0.75rem; color: var(--muted-foreground); background: #fff; border: 1px solid var(--border); padding: 4px 12px; border-radius: 999px; white-space: nowrap; }

/* ============================================================
   APPROACH + FAQ accordion
   ============================================================ */
.approach { background: hsl(240 5% 96% / .3); }
.approach-grid { display: grid; grid-template-columns: 1fr; gap: 64px; }
@media (min-width: 1024px) { .approach-grid { grid-template-columns: 1fr 1fr; gap: 96px; } }
.approach h2 { font-size: 2.25rem; margin-bottom: 24px; }
@media (min-width: 768px) { .approach h2 { font-size: 3rem; } }
.approach .quote { font-size: 1.25rem; color: var(--foreground); font-weight: 500; margin-bottom: 40px; line-height: 1.6; }
.approach ul { list-style: none; display: flex; flex-direction: column; gap: 24px; }
.approach ul li { display: flex; gap: 16px; }
.approach ul svg { width: 24px; height: 24px; color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.approach ul h4 { font-family: var(--font-sans); font-weight: 600; font-size: 1.125rem; margin-bottom: 4px; }
.approach ul p { color: var(--muted-foreground); }
.faq-card { background: #fff; padding: 32px; border-radius: var(--radius); box-shadow: 0 1px 2px rgba(0,0,0,.06); border: 1px solid var(--border); }
@media (min-width: 768px) { .faq-card { padding: 40px; } }
.faq-card h3 { font-size: 1.5rem; margin-bottom: 8px; }
.faq-card .sub { font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 32px; }

.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-trigger { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 500; transition: color 0.2s; }
.accordion-trigger:hover { color: var(--primary); }
.accordion-trigger .chev { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.2s; color: var(--muted-foreground); }
.accordion-item.open .accordion-trigger .chev { transform: rotate(180deg); }
.accordion-panel { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.accordion-panel-inner { padding-bottom: 16px; color: var(--muted-foreground); line-height: 1.7; }

/* ============================================================
   SERVICE AREA
   ============================================================ */
.area-grid { display: grid; grid-template-columns: 1fr; gap: 64px; align-items: center; }
@media (min-width: 1024px) { .area-grid { grid-template-columns: 1fr 1fr; gap: 96px; } }
.area h2 { font-size: 2.25rem; margin: 16px 0 24px; }
@media (min-width: 768px) { .area h2 { font-size: 3rem; } }
.area-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 0; }
.area-list li { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; color: var(--muted-foreground); }
.area-list li.primary { font-weight: 600; color: var(--foreground); }
.area-list svg { width: 16px; height: 16px; color: var(--muted-foreground); }
.area-list li.primary svg { color: var(--primary); }
.area-map { position: relative; background: hsl(240 5% 96% / .3); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.area-map svg.map { width: 100%; height: 100%; }
.area-map .compass { position: absolute; bottom: 16px; right: 16px; font-size: 0.75rem; color: hsl(240 5% 45% / .5); text-align: center; }
.area-map .compass .arrow-n { font-size: 1rem; line-height: 1; display: block; }
.area-map .map-label { position: absolute; top: 16px; left: 16px; font-size: 0.75rem; color: hsl(240 5% 45% / .6); font-weight: 500; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 64px; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 96px; } }
.contact h2 { font-size: 2.25rem; margin-bottom: 24px; }
@media (min-width: 768px) { .contact h2 { font-size: 3rem; } }
.contact .intro { margin-bottom: 48px; max-width: 28rem; }
.contact-info { display: flex; flex-direction: column; gap: 32px; }
.contact-info .row { display: flex; gap: 16px; }
.contact-info .row svg { width: 24px; height: 24px; color: var(--primary); flex-shrink: 0; margin-top: 4px; }
.contact-info .row h4 { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.contact-info .row a, .contact-info .row p { font-size: 1.25rem; color: var(--muted-foreground); transition: color 0.2s; }
.contact-info .row a:hover { color: var(--primary); }

.form-card { background: hsl(240 5% 96% / .5); padding: 32px; border-radius: var(--radius); border: 1px solid var(--border); position: relative; overflow: hidden; }
@media (min-width: 768px) { .form-card { padding: 40px; } }
.form-card > h3 { font-size: 1.5rem; margin-bottom: 32px; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .form-grid.two { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.field:last-of-type { margin-bottom: 0; }
.field label { font-size: 0.875rem; font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; font-size: 0.875rem; font-family: inherit; color: var(--foreground);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid hsl(4 88% 46% / .4); outline-offset: 0; border-color: var(--primary); }
.field-row { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 24px; }
@media (min-width: 768px) { .field-row.two { grid-template-columns: 1fr 1fr; } .field-row.three { grid-template-columns: repeat(3, 1fr); } }
.field-row .field { margin-bottom: 0; }
.form-note { font-size: 0.875rem; color: var(--muted-foreground); margin: 24px 0; }
.form-note a { color: var(--primary); }
.form-note a:hover { text-decoration: underline; }
.slots-label { font-size: 0.875rem; font-weight: 500; margin-bottom: 12px; }
.form-error { font-size: 0.875rem; color: #dc2626; margin-bottom: 16px; display: none; }
.hidden { display: none !important; }
.form-success {
  position: absolute; inset: 0; background: rgba(255,255,255,.97); backdrop-filter: blur(4px);
  z-index: 10; display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px; text-align: center;
}
.form-success.show { display: flex; }
.form-success .check { width: 64px; height: 64px; background: #dcfce7; color: #16a34a; border-radius: 999px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.form-success .check svg { width: 32px; height: 32px; }
.form-success h3 { font-size: 1.5rem; margin-bottom: 8px; }
.form-success p { color: var(--muted-foreground); margin-bottom: 32px; }
.form-success button { color: var(--primary); font-weight: 500; }
.form-success button:hover { text-decoration: underline; }
.spinner { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 999px; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--foreground); color: rgba(255,255,255,.8); padding: 64px 0; border-top: 1px solid rgba(255,255,255,.1); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 48px; margin-bottom: 64px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer img { height: 32px; width: auto; opacity: .9; margin-bottom: 24px; }
.footer .blurb { font-size: 0.875rem; color: rgba(255,255,255,.6); margin-bottom: 24px; max-width: 20rem; }
.footer .creds { font-size: 0.875rem; color: rgba(255,255,255,.6); }
.footer h4 { font-family: var(--font-display); font-weight: 500; color: #fff; margin-bottom: 16px; }
.footer h4.mt { margin-top: 32px; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 0.875rem; }
.footer ul.tight { gap: 6px; color: rgba(255,255,255,.6); }
.footer a:hover { color: #fff; }
.footer-bottom { padding-top: 32px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; align-items: center; gap: 16px; font-size: 0.75rem; color: rgba(255,255,255,.4); }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.footer-bottom .links { display: flex; gap: 24px; }

/* ============================================================
   MOBILE CTA BAR
   ============================================================ */
.mobile-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; display: flex; background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -4px 12px rgba(0,0,0,.08); }
@media (min-width: 768px) { .mobile-cta { display: none; } }
.mobile-cta a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; font-size: 0.875rem; font-weight: 600; }
.mobile-cta a svg { width: 18px; height: 18px; }
.mobile-cta .call { background: var(--primary); color: #fff; }
.mobile-cta .quote { background: var(--foreground); color: #fff; }

/* ============================================================
   SERVICE PAGE
   ============================================================ */
.sp-hero { padding: 144px 0 80px; background: var(--foreground); color: #fff; }
.sp-hero .container { max-width: 1024px; }
.sp-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: rgba(255,255,255,.5); margin-bottom: 32px; flex-wrap: wrap; }
.sp-breadcrumb a:hover { color: rgba(255,255,255,.8); }
.sp-breadcrumb svg { width: 14px; height: 14px; }
.sp-breadcrumb .current { color: rgba(255,255,255,.8); }
.sp-hero h1 { font-size: 2.25rem; color: #fff; margin: 16px 0 24px; }
@media (min-width: 768px) { .sp-hero h1 { font-size: 3.75rem; } }
.sp-hero .tagline { font-size: 1.25rem; color: rgba(255,255,255,.7); max-width: 42rem; line-height: 1.6; }
.sp-body { padding: 80px 0; }
.sp-body .container { max-width: 1024px; }
.sp-cols { display: grid; grid-template-columns: 1fr; gap: 64px; }
@media (min-width: 1024px) { .sp-cols { grid-template-columns: 2fr 1fr; } }
.sp-main { display: flex; flex-direction: column; gap: 56px; }
.sp-main h2 { font-size: 1.5rem; margin-bottom: 16px; }
.sp-main p.big { color: var(--muted-foreground); line-height: 1.8; font-size: 1.125rem; }
.sp-side .sticky { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 24px; }
.cost-card { background: hsl(240 5% 96% / .4); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; }
.cost-card .label { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-foreground); margin-bottom: 8px; }
.cost-card .range { font-family: var(--font-display); font-size: 1.875rem; font-weight: 600; margin-bottom: 16px; }
.cost-card .note { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.7; }
.cta-card { background: var(--primary); border-radius: var(--radius); padding: 32px; }
.cta-card h3 { color: #fff; font-size: 1.25rem; margin-bottom: 12px; }
.cta-card p { color: rgba(255,255,255,.8); font-size: 0.875rem; margin-bottom: 24px; line-height: 1.6; }
.cta-card .phone { display: flex; align-items: center; justify-content: center; gap: 8px; color: rgba(255,255,255,.8); font-size: 0.875rem; margin-top: 16px; }
.cta-card .phone:hover { color: #fff; }
.cta-card .phone svg { width: 14px; height: 14px; }
.trust-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.trust-list li { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; color: var(--muted-foreground); }
.trust-list svg { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; }
.other-services { padding: 64px 0; background: hsl(240 5% 96% / .3); border-top: 1px solid var(--border); }
.other-services .container { max-width: 1024px; }
.other-services h2 { font-size: 1.5rem; margin-bottom: 32px; }
.other-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .other-grid { grid-template-columns: repeat(3, 1fr); } }
.other-card { display: block; padding: 24px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); transition: all 0.2s; }
.other-card:hover { border-color: hsl(4 88% 46% / .4); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.other-card h3 { font-weight: 600; margin-bottom: 8px; transition: color 0.2s; }
.other-card:hover h3 { color: var(--primary); }
.other-card p { font-size: 0.875rem; color: var(--muted-foreground); }

/* 404 */
.nf { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: hsl(240 5% 96% / .5); padding: 24px; }
.nf-card { width: 100%; max-width: 28rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.nf-card .top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.nf-card svg { width: 32px; height: 32px; color: var(--primary); }
.nf-card h1 { font-size: 1.5rem; }
.nf-card p { color: var(--muted-foreground); margin-bottom: 24px; }

/* ============================================================
   REWIRE CALCULATOR
   ============================================================ */
.rc-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 900px) { .rc-grid { grid-template-columns: 1.3fr 1fr; } }
.rc-fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
.rc-fieldset legend { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; padding: 0 8px; }
.rc-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .rc-row { grid-template-columns: 1fr 1fr; } }
.rc-form .field { margin-bottom: 16px; }
.rc-form .rc-row .field { margin-bottom: 0; }
.rc-result .rc-card { background: var(--foreground); color: #fff; border-radius: var(--radius); padding: 32px; }
@media (min-width: 900px) { .rc-result > .rc-card { position: sticky; top: 104px; } }
.rc-label { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,.6); }
.rc-range { font-family: var(--font-display); font-size: 2.5rem; font-weight: 600; color: #fff; margin: 8px 0 16px; line-height: 1.1; }
.rc-note { color: rgba(255,255,255,.6); font-size: 0.85rem; line-height: 1.6; }
.rc-lead { margin-top: 24px; background: hsl(240 5% 96% / .6); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.rc-lead h3 { font-size: 1.25rem; margin-bottom: 6px; }
.rc-leadnote { font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 16px; }
.rc-success { display: none; margin-top: 16px; padding: 14px 16px; background: #dcfce7; color: #166534; border-radius: var(--radius); font-size: 0.9rem; }
.rc-success.show { display: block; }
.hero-note { margin-top: 20px; font-size: 0.95rem; color: var(--muted-foreground); }
.hero-note a { color: var(--primary); font-weight: 500; }
.hero-note a:hover { text-decoration: underline; }

/* field hint + file input (shorter enquiry form) */
.field-hint { font-size: 0.8rem; color: var(--muted-foreground); margin-top: 6px; }
.field input[type="file"] { padding: 8px; background: #fff; font-size: 0.85rem; }
.field input[type="file"]::file-selector-button { font: inherit; font-size: 0.8rem; padding: 6px 12px; margin-right: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted); cursor: pointer; }

/* hero image now shows on mobile too (feature parity with desktop) */
.hero-media { display: block; position: relative; height: 320px; margin-top: 8px; }
.hero-media .accent, .hero-media .hero-quote { display: none; }
@media (min-width: 1024px) {
  .hero-media { height: 700px; margin-top: 0; }
  .hero-media .accent, .hero-media .hero-quote { display: block; }
}

/* sage "C" in the CUBE wordmark, matched to the logo mark */
.logo-c { color: inherit; }

/* ── HERO mobile image show ──────────────────────────── */
.hero-media { display: block; position: relative; }
.hero-media .accent, .hero-media .hero-quote { display: none; }
@media (min-width: 1024px) {
  .hero-media .accent, .hero-media .hero-quote { display: block; }
}

/* ── HERO INNER ─────────────────────────────────────── */
.hero-inner { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .hero-inner { grid-template-columns: 1fr 1fr; } }
.hero-ticks { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 24px 0; }
.hero-ticks li { display: flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: 500; }
.hero-ticks svg { color: var(--primary); width: 18px; height: 18px; flex-shrink: 0; }
.hero-note { font-size: .875rem; color: var(--muted-foreground); display: flex; align-items: center; gap: 6px; margin-top: 16px; }
.hero-note svg { color: var(--primary); width: 16px; height: 16px; flex-shrink: 0; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.hero-media .frame img { border-radius: 12px; width: 100%; object-fit: cover; max-height: 480px; }

/* ── QUICK JOBS GRID ────────────────────────────────── */
.qj-section { background: #fff; }
.section-intro { margin-bottom: 48px; }
.section-intro h2 { margin-bottom: 12px; }
.qj-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 640px)  { .qj-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .qj-grid { grid-template-columns: repeat(4, 1fr); } }
.qj-tile { display: flex; flex-direction: column; gap: 10px; padding: 24px 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.qj-tile:hover { border-color: var(--primary); box-shadow: 0 4px 16px #0F8F8A18; }
.qj-ic { width: 40px; height: 40px; background: var(--primary-soft); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.qj-ic svg { color: var(--primary); width: 20px; height: 20px; }
.qj-tile h3 { font-size: .95rem; font-weight: 700; color: var(--foreground); line-height: 1.3; }
.qj-tile p  { font-size: .8rem; color: var(--muted-foreground); line-height: 1.5; flex: 1; }

/* ── CONSUMER UNIT FEATURE ──────────────────────────── */
.cu-section { background: var(--background); border-top: 1px solid var(--border); }
.cu-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .cu-grid { grid-template-columns: 1fr 1fr; } }
.cu-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
.cu-list li { display: flex; align-items: flex-start; gap: 10px; }
.cu-list svg { color: var(--primary); width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.cu-list span { font-size: .95rem; }
.cu-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.cu-img { position: relative; }
.cu-img img { border-radius: 12px; width: 100%; object-fit: cover; }
.cu-badge { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid var(--border); border-radius: 100px; padding: 10px 20px; display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.cu-badge svg { color: var(--primary); width: 16px; height: 16px; }

/* ── SMALL JOBS WELCOME ─────────────────────────────── */
.sj-section { background: var(--primary); color: #fff; }
.sj-section .eyebrow { color: rgba(255,255,255,.7); }
.sj-section h2 { color: #fff; }
.sj-section .lead { color: rgba(255,255,255,.85); }
.sj-inner { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .sj-inner { grid-template-columns: 1fr 1fr; } }
.sj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0; }
.sj-item { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 500; color: rgba(255,255,255,.9); }
.sj-item svg { width: 18px; height: 18px; flex-shrink: 0; color: rgba(255,255,255,.7); }
.sj-bottom { font-size: 1rem; color: rgba(255,255,255,.9); margin-top: 8px; }
.sj-bottom a { color: #fff; font-weight: 600; text-decoration: underline; }
.sj-photo img { border-radius: 12px; width: 100%; object-fit: cover; max-height: 420px; }

/* ── WHY CHOOSE CUBE ────────────────────────────────── */
.why-section { background: #fff; border-top: 1px solid var(--border); }
.why-grid { display: grid; gap: 24px; margin-top: 40px; }
@media (min-width: 640px)  { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }
.why-item { display: flex; align-items: flex-start; gap: 14px; padding: 24px; border: 1px solid var(--border); border-radius: 8px; }
.why-item .ic { width: 40px; height: 40px; background: var(--primary-soft); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.why-item .ic svg { color: var(--primary); width: 20px; height: 20px; }
.why-item h3 { font-size: .95rem; font-weight: 700; margin-bottom: 6px; }
.why-item p  { font-size: .85rem; color: var(--muted-foreground); line-height: 1.5; }

/* ── MEET MATT ──────────────────────────────────────── */
.matt-section { background: var(--background); border-top: 1px solid var(--border); }
.matt-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .matt-grid { grid-template-columns: 5fr 7fr; } }
.matt-img img { border-radius: 12px; width: 100%; object-fit: cover; max-height: 420px; }
.matt-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.matt-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--primary-soft); color: var(--primary); font-size: .8rem; font-weight: 600; padding: 8px 14px; border-radius: 100px; }
.matt-badge svg { width: 14px; height: 14px; }

/* ── BENTO 3-col ────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; gap: 8px; margin-top: 48px; }
@media (max-width: 767px) { .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; } }

/* ── STATS BAND ─────────────────────────────────────── */
.stats-band { background: var(--foreground); color: #fff; padding: 28px 0; }
.stats-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.stat, .stat-niceic { flex: 1; min-width: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px 20px; border-right: 1px solid rgba(255,255,255,.12); }
.stat:last-of-type, .stat-niceic { border-right: none; }
.stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: #fff; line-height: 1; }
.stat-label { font-size: .75rem; color: rgba(255,255,255,.6); margin-top: 4px; text-transform: uppercase; letter-spacing: .08em; }
.stat-niceic { flex-direction: row; gap: 10px; }
.niceic-check { font-size: 1.5rem; color: var(--primary); font-weight: 700; }
.stat-niceic span:last-child { font-size: .85rem; font-weight: 700; color: #fff; text-align: left; line-height: 1.3; }
@media (max-width: 480px) { .stat, .stat-niceic { min-width: 48%; border-right: none; border-bottom: 1px solid rgba(255,255,255,.12); } }

/* ── STICKY QUOTE BUTTON (desktop) ─────────────────────── */
.sticky-quote {
  position: fixed; bottom: 32px; right: 32px; z-index: 200;
  display: none; /* hidden on mobile — mobile CTA bar covers it */
  align-items: center; gap: 8px;
  background: var(--primary); color: #fff;
  padding: 14px 22px; border-radius: 100px;
  font-size: .9rem; font-weight: 600;
  box-shadow: 0 8px 24px rgba(15,143,138,.35);
  opacity: 0; transform: translateY(12px);
  transition: opacity .25s, transform .25s;
  text-decoration: none;
}
.sticky-quote svg { flex-shrink: 0; }
.sticky-quote:hover { background: var(--primary-90); }
.sticky-quote.visible { opacity: 1; transform: translateY(0); }
@media (min-width: 768px) { .sticky-quote { display: flex; } }

/* ── GOOGLE BADGE ────────────────────────────────────────── */
.google-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 20px; border: 1px solid var(--border);
  border-radius: 100px; background: #fff; text-decoration: none;
  color: var(--foreground); font-size: .875rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: box-shadow .2s;
}
.google-badge:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.gb-stars { color: #FBBC05; letter-spacing: -.5px; font-size: 1rem; }
.gb-text strong { font-weight: 600; }
.gb-text { color: var(--muted-foreground); }

/* ── SP-FORM (service + area page sidebar mini-form) ─ */
.sp-form .field { margin-bottom: 10px; }
.sp-form input, .sp-form select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: .875rem; font-family: var(--font-sans);
  background: #fff; color: var(--foreground);
}
.sp-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px #0F8F8A18; }
.sp-form small { display: block; font-size: .75rem; color: var(--muted-foreground); margin-top: 4px; }
.sp-form .btn { margin-top: 6px; }

/* ── LOGO MARK ───────────────────────────────────────── */
.logo-mark { height: 32px; width: auto; margin-right: 6px; vertical-align: middle; }

/* ── SVG LOGO LOCKUP ─────────────────────────────────── */
.nav-logo-img    { height: 38px; width: auto; display: block; }
.footer-logo-img { height: 38px; width: auto; display: block; }

/* ── NICEIC BADGE ────────────────────────────────────── */
.footer-accreditations { padding: 32px 0 0; border-top: 1px solid rgba(255,255,255,.1); text-align: center; }
.niceic-badge { height: 72px; width: auto; opacity: .92; }

/* ── FUSE BOARD CHECKER ──────────────────────────────── */
.checker-card { background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.checker-progress { height:4px; background:var(--border); }
.checker-progress-bar { height:4px; background:var(--primary); transition:width .4s ease; }
.checker-step-label { font-size:.8rem; color:var(--muted-foreground); text-align:right; padding:10px 24px 0; }
.checker-questions { padding:32px 28px 28px; }
.cq { display:none; }
.cq.active { display:block; animation:fadeUp .25s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.cq h2 { font-size:1.25rem; margin-bottom:8px; }
.cq-hint { font-size:.85rem; color:var(--muted-foreground); margin-bottom:20px; }
.cq-opts { display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.cq-opt { text-align:left; padding:14px 18px; border:1.5px solid var(--border); border-radius:8px; background:#fff; cursor:pointer; font-size:.95rem; font-weight:500; color:var(--foreground); line-height:1.4; transition:border-color .15s, background .15s; display:flex; flex-direction:column; gap:2px; }
.cq-opt:hover { border-color:var(--primary); background:var(--primary-soft); }
.cq-opt.selected { border-color:var(--primary); background:var(--primary-soft); color:var(--primary); }
.cq-sub { font-size:.8rem; font-weight:400; color:var(--muted-foreground); }
.cq-opt.selected .cq-sub { color:var(--primary); opacity:.7; }

/* result */
.checker-result { padding:32px 28px 36px; }
.cr-badge { display:inline-block; padding:6px 18px; border-radius:100px; font-size:.85rem; font-weight:700; margin-bottom:20px; }
.cr-badge.green  { background:#dcfce7; color:#166534; }
.cr-badge.amber  { background:#fef9c3; color:#854d0e; }
.cr-badge.red    { background:#fee2e2; color:#991b1b; }
.cr-badge.urgent { background:#fca5a5; color:#7f1d1d; }
.checker-result h2 { font-size:1.35rem; margin-bottom:12px; }
.cr-body { color:var(--muted-foreground); line-height:1.65; margin-bottom:24px; }
.cr-answers { background:var(--muted); border-radius:8px; padding:16px 18px; margin-bottom:32px; display:flex; flex-direction:column; gap:8px; }
.cr-answer { display:flex; justify-content:space-between; gap:16px; font-size:.8rem; }
.cr-answer span { color:var(--muted-foreground); }
.cr-answer strong { color:var(--foreground); text-align:right; }
.cr-form-wrap { border-top:1px solid var(--border); padding-top:28px; margin-top:8px; }
.cr-form-wrap h3 { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.cr-form-wrap svg { color:var(--primary); width:20px; height:20px; }
.cr-form-wrap p { color:var(--muted-foreground); font-size:.9rem; margin-bottom:20px; }
.cr-success svg { color:var(--primary); width:48px; height:48px; }
.checker-restart { margin-top:24px; background:none; border:none; color:var(--muted-foreground); font-size:.85rem; cursor:pointer; text-decoration:underline; padding:0; }
.checker-restart:hover { color:var(--foreground); }

/* ── FUSE BOARD POPUP ─────────────────────────────────── */
#fb-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(17,24,39,.55); backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
#fb-overlay.visible { opacity: 1; pointer-events: all; }
#fb-popup {
  background: #fff; border-radius: 16px 16px 0 0;
  padding: 32px 28px 40px; max-width: 520px; width: 100%;
  transform: translateY(40px); transition: transform .3s;
  position: relative;
}
#fb-overlay.visible #fb-popup { transform: translateY(0); }
@media (min-width: 640px) {
  #fb-overlay { align-items: center; }
  #fb-popup { border-radius: 16px; transform: translateY(12px); }
  #fb-overlay.visible #fb-popup { transform: translateY(0); }
}
#fb-close {
  position: absolute; top: 16px; right: 18px;
  background: none; border: none; font-size: 1.5rem;
  color: var(--muted-foreground); cursor: pointer; line-height: 1; padding: 4px;
}
.fb-eyebrow { font-size: .75rem; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
#fb-popup h3 { font-size: 1.2rem; margin-bottom: 10px; color: var(--foreground); }
#fb-popup p { font-size: .9rem; color: var(--muted-foreground); line-height: 1.6; margin-bottom: 20px; }
.fb-dismiss { display: block; width: 100%; margin-top: 10px; background: none; border: none; color: var(--muted-foreground); font-size: .875rem; cursor: pointer; padding: 8px; }
.fb-dismiss:hover { color: var(--foreground); }
.fb-trust { font-size: .75rem; text-align: center; color: var(--muted-foreground); margin-top: 16px !important; margin-bottom: 0 !important; }

/* ── CHECKER RESULT disclaimer ──────────────────────── */
.cr-disclaimer { font-size: .78rem; color: var(--muted-foreground); border-top: 1px solid var(--border); padding-top: 12px; margin: 16px 0 24px; }

/* ── ROUTE CHOOSER ───────────────────────────────────── */
.route-section { background: #fff; border-top: 1px solid var(--border); }
.route-intro { margin-bottom: 48px; max-width: 640px; }
.route-intro h2 { margin-bottom: 12px; }
.route-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted-foreground); margin-top: 16px; }
.route-trust svg { width: 13px; height: 13px; color: var(--primary); flex-shrink: 0; }
.route-grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .route-grid { grid-template-columns: repeat(3, 1fr); } }
.route-card { padding: 28px 24px 24px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--background); display: flex; flex-direction: column; gap: 12px; position: relative; transition: box-shadow .2s; }
.route-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.07); }
.route-featured { border-color: var(--primary); background: var(--primary-soft); }
.route-eyebrow { font-size: .72rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.route-icon { width: 40px; height: 40px; background: rgba(15,143,138,.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.route-featured .route-icon { background: rgba(15,143,138,.15); }
.route-icon svg { color: var(--primary); width: 20px; height: 20px; }
.route-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--foreground); }
.route-card p { font-size: .875rem; color: var(--muted-foreground); line-height: 1.6; margin: 0; flex: 1; }
.route-note { font-size: .78rem !important; color: var(--primary) !important; font-weight: 500; }
.route-btn { margin-top: 8px; width: 100%; text-align: center; }

/* ── WHATSAPP LINK ───────────────────────────────────── */
.wa-divider { display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--muted-foreground); font-size:.8rem; }
.wa-divider::before, .wa-divider::after { content:""; flex:1; height:1px; background:var(--border); }
.wa-hint { font-size:.78rem; color:var(--muted-foreground); text-align:center; margin-top:10px; }

/* fuse checker dual CTA */
.cr-cta-row { display:flex; flex-direction:column; gap:10px; margin:16px 0 8px; }
@media (min-width:560px){ .cr-cta-row { flex-direction:row; } .cr-cta-row .btn { flex:1; } }


/* rewire price gate */
.rc-range-wrap { position:relative; }
.rc-blurred { filter:blur(8px); user-select:none; pointer-events:none; opacity:.6; }
.rc-gate { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:8px; }
.rc-gate-text { display:flex; align-items:center; gap:6px; font-size:.85rem; font-weight:600; color:var(--foreground); margin-bottom:10px; }
.rc-gate-text svg { width:15px; height:15px; color:var(--primary); }
.rc-gate-row { display:flex; gap:8px; width:100%; max-width:340px; }
.rc-gate-row input { flex:1; padding:10px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:.875rem; }
.rc-gate-row .btn { white-space:nowrap; padding:10px 16px; }
.rc-gate-note { font-size:.72rem; color:var(--muted-foreground); margin-top:8px; }

/* ── WHATSAPP (brand-native, teal monochrome) ─────────── */
.btn-wa-outline { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn-wa-outline svg { width:18px; height:18px; color:var(--primary); }
/* standalone teal-outline WhatsApp link (forms) */
.wa-outline { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:11px 18px; background:#fff; color:var(--primary); border:1.5px solid var(--primary); border-radius:8px; font-weight:600; font-size:.9rem; text-decoration:none; transition:background .15s; }
.wa-outline:hover { background:var(--primary-soft); }
.wa-outline svg { width:18px; height:18px; }
/* divider */
.wa-divider { display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--muted-foreground); font-size:.8rem; }
.wa-divider::before, .wa-divider::after { content:""; flex:1; height:1px; background:var(--border); }
.wa-hint { font-size:.78rem; color:var(--muted-foreground); text-align:center; margin-top:10px; }

/* hero tap-to-call line */
.hero-tel { display:inline-flex; align-items:center; gap:7px; margin-top:16px; color:var(--foreground); font-weight:700; font-size:1.05rem; text-decoration:none; }
.hero-tel svg { width:17px; height:17px; color:var(--primary); }
.hero-tel:hover { color:var(--primary); }

/* mobile sticky bar — call (filled) + whatsapp (outline) */
.mobile-cta .call { background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; gap:6px; flex:1.6; font-size:.9rem; }
.mobile-cta .call svg { width:17px; height:17px; }
.mobile-cta .wa-outline { background:#fff; color:var(--primary); border:1.5px solid var(--primary); flex:1; width:auto; padding:11px 14px; }
.mobile-cta .wa-outline svg { width:17px; height:17px; }

/* fuse checker dual CTA */
.cr-cta-row { display:flex; flex-direction:column; gap:10px; margin:16px 0 8px; }
@media (min-width:560px){ .cr-cta-row { flex-direction:row; } .cr-cta-row .btn { flex:1; } }