/*
Theme Name: Computer Wall
Theme URI: https://computer-wall.com/
Author: Computer Wall
Description: Dark-theme redesign for Computer Wall (Stony Plain). Sticky terminal-style header, bench-status stat grid, numbered process cards, pricing table, service tiles. Palette: near-black #04080B with teal #35CFE0 primary and indigo/pink gradient accents. Fonts: Barlow, Barlow Semi Condensed, Saira (Google Fonts).
Version: 7.2.0
License: GNU General Public License v2 or later
Text Domain: computer-wall
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
  /* Surfaces */
  --bg:            #04080B;
  --surface:       #060C10;
  --surface-alt:   rgba(27,154,171,.05);
  --surface-tint:  rgba(27,154,171,.07);
  --surface-hover: rgba(27,154,171,.09);
  --surface-glow:  rgba(27,154,171,.1);

  /* Accents */
  --teal:          #35CFE0;
  --teal-bright:   #7BE4EF;
  --teal-deep:     #1B9AAB;
  --teal-brighter: #22B4C7;
  --indigo:        #6366F1;
  --indigo-mid:    #7C7CF5;
  --pink:          #D946A6;
  --pink-mid:      #E85BB4;

  /* Text */
  --ink:           #FFFFFF;
  --ink-1:         #A9BAC2;
  --ink-2:         #9DB0B9;
  --ink-3:         #8FA3AC;
  --ink-4:         #7E939D;
  --ink-5:         #6D818B;
  --ink-6:         #46565E;

  /* Borders (teal at various opacities) */
  --border-1:      rgba(53,207,224,.14);
  --border-2:      rgba(53,207,224,.16);
  --border-3:      rgba(53,207,224,.18);
  --border-4:      rgba(53,207,224,.2);
  --border-5:      rgba(53,207,224,.28);
  --border-6:      rgba(53,207,224,.3);
  --border-7:      rgba(53,207,224,.35);
  --border-8:      rgba(53,207,224,.4);

  /* Gradient text/bars */
  --grad-bar:      linear-gradient(90deg, #35CFE0 0%, #6366F1 50%, #D946A6 100%);
  --grad-text:     linear-gradient(90deg, #35CFE0, #7C7CF5 55%, #E85BB4);
  --grad-hero:     radial-gradient(110% 62% at 50% 6%, rgba(27,154,171,.26) 0%, rgba(4,8,11,0) 62%);
  --grid-lines:    linear-gradient(rgba(53,207,224,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(53,207,224,.05) 1px, transparent 1px);
  --grid-lines-alt: linear-gradient(rgba(53,207,224,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(53,207,224,.045) 1px, transparent 1px);
  --grid-size:     46px 46px;

  /* Layout */
  --container:     1120px;
  --radius:        3px;
  --sh-btn:        0 0 30px rgba(27,154,171,.4);
  --sh-call:       0 10px 34px rgba(0,0,0,.7), 0 0 24px rgba(27,154,171,.4);
  --sh-logo:       drop-shadow(0 0 38px rgba(27,154,171,.6));

  /* Section padding */
  --pad-y:         clamp(28px, 4.5vw, 60px);
  --pad-x:         clamp(16px, 4vw, 40px);
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Barlow, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--teal-bright); }
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.1; }

/* Screen-reader-only helper (kept from prior theme) */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute; top: -40px; left: 8px;
  background: var(--teal); color: var(--bg);
  padding: 8px 14px; border-radius: var(--radius);
  z-index: 1000; font-weight: 700;
}
.skip-link:focus { top: 8px; }

/* =========================================================
   LAYOUT PRIMITIVES
   ========================================================= */
.container       { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }
.container-full  { width: 100%; padding: 0 var(--pad-x); }
.section         { padding: var(--pad-y) var(--pad-x); }
.section-tight   { padding: clamp(20px, 3vw, 34px) var(--pad-x) 0; }
.section-alt     { border-top: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); background: var(--surface-alt); }
.section-grid    { background-color: var(--surface-alt); background-image: var(--grid-lines-alt); background-size: var(--grid-size); }

/* =========================================================
   TOP + BOTTOM GRADIENT BARS
   ========================================================= */
.grad-bar { height: 3px; background: var(--grad-bar); }

/* =========================================================
   CLOSURE / ANNOUNCEMENT BANNER (temporary, auto-hides via
   PHP date check in header.php).
   ========================================================= */
.closure-banner {
  background: var(--grad-bar);
  color: var(--ink);
  padding: 10px var(--pad-x);
  text-align: center;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .01em;
}
.closure-banner-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.closure-banner strong {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .02em;
}
@media (max-width: 640px) {
  .closure-banner { font-size: 13.5px; padding: 10px 14px; }
}

/* =========================================================
   STICKY HEADER
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(4,8,11,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-1);
}
.site-header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 11px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink);
}
.site-brand:hover { color: var(--ink); }
.site-brand img {
  width: 30px; height: 30px;
  filter: drop-shadow(0 0 10px rgba(27,154,171,.5));
}
.site-brand-name {
  font-family: Saira, sans-serif;
  font-size: clamp(11.5px, 1.4vw, 14px);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-brand-name .accent { color: var(--teal); }

.header-actions { display: flex; align-items: center; gap: 14px; font-family: "Barlow Semi Condensed", sans-serif; }
.open-pill {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; letter-spacing: .14em;
  color: var(--ink-4); text-transform: uppercase; white-space: nowrap;
}
.open-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); display: inline-block;
  animation: cwblink 2.2s ease-in-out infinite;
}
.open-pill.is-closed .open-pill-dot { background: var(--ink-5); animation: none; }

.header-phone {
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 700; letter-spacing: .04em;
  color: var(--ink);
  border: 1px solid var(--border-8);
  border-radius: var(--radius);
  padding: 7px 13px; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.header-phone:hover { border-color: var(--teal); color: var(--teal); }

@media (max-width: 640px) {
  .open-pill { display: none; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  text-align: center;
  padding: clamp(34px, 6vw, 76px) var(--pad-x) clamp(26px, 4vw, 46px);
  background-color: var(--bg);
  background-image: var(--grad-hero), var(--grid-lines);
  background-size: auto, var(--grid-size), var(--grid-size);
}
.hero-inner { max-width: 900px; margin: 0 auto; }
.hero-logo {
  width: clamp(94px, 11vw, 132px);
  height: clamp(94px, 11vw, 132px);
  margin: 0 auto;
  filter: var(--sh-logo);
}
/* v6.1 hero: real headline (not a wordmark). Search-intent H1 up top,
   full-sentence supporting copy underneath. */
.hero-eyebrow {
  margin: clamp(14px, 2vw, 22px) 0 clamp(10px, 1.4vw, 14px);
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(12px, 1.5vw, 15px);
  font-weight: 600; letter-spacing: .18em;
  color: var(--teal); text-transform: uppercase;
}
.hero h1 {
  margin: 0 auto;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(30px, 5vw, 54px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  max-width: 22ch;
  text-wrap: balance;
  color: var(--ink);
}
.hero h1 .accent { color: var(--teal); }
.hero-tagline {
  margin: clamp(14px, 2vw, 22px) auto 0;
  font-family: Barlow, system-ui, sans-serif;
  font-size: clamp(16px, 1.9vw, 20px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-1);
  max-width: 60ch;
  text-wrap: pretty;
}
.hero-tagline .grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Inline review strip in hero — stars + rating + count. Compact, not a
   stat grid. Reinforces the click-decision, doesn't compete for attention. */
.hero-review {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: clamp(14px, 2vw, 22px) auto 0;
  padding: 8px 16px;
  border: 1px solid var(--border-4);
  border-radius: 100px;
  background: rgba(27,154,171,.05);
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(14px, 1.5vw, 16px);
  color: var(--ink-1);
}
.hero-review-stars {
  color: #fbbf24;
  letter-spacing: 2px;
  font-size: 1.05em;
  line-height: 1;
}
.hero-review-text strong { color: var(--ink); font-weight: 700; }
.hero-ctas {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
  margin-top: clamp(22px, 3vw, 32px);
  font-family: "Barlow Semi Condensed", sans-serif;
}

/* v6.2 hero-with-quiz variant. The wizard IS the primary interaction, so
   the H1 is smaller (still readable, still an H1 for SEO), no separate
   tagline, and the review pill sits directly under the H1 as social proof
   before the first quiz question. */
.hero.hero-with-quiz { padding-top: clamp(20px, 3.5vw, 44px); }
.hero-with-quiz .hero-inner { max-width: 780px; }
.hero-with-quiz .hero-h1-compact {
  margin: 6px auto 0;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  max-width: 24ch;
  text-wrap: balance;
  color: var(--ink);
}
/* v6.7 tagline under the H1 — sets up the broadened positioning before
   the wizard. Slightly smaller than the default hero-tagline so it doesn't
   compete with the wizard card for attention. */
.hero-with-quiz .hero-tagline {
  margin: clamp(8px, 1.4vw, 14px) auto 0;
  font-size: clamp(15px, 1.7vw, 18px);
  max-width: 62ch;
  color: var(--ink-1);
}
/* v6.9 sub-headline between H1 and tagline — the "your local technology
   people" positioning line. Teal color and a slightly larger, weightier
   type so it registers as a genuine sub-headline, not another sentence. */
.hero-with-quiz .hero-sub-h {
  margin: clamp(10px, 1.6vw, 16px) auto 0;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--teal);
}
/* v7.0.2 Technology Care offer panel — sits directly under the sub-headline
   and is the second-strongest visual element in the hero (H1 stays largest
   for SEO). Distinct teal-tinted card with an "accepting new members"
   status pill, an uppercase headline, a supporting line, and a solid CTA
   into /technology-care/. Positioned so it registers as a real offer, not
   a promo strip. */
.hero-with-quiz .hero-care-panel {
  max-width: 620px;
  margin: clamp(16px, 2.4vw, 26px) auto 0;
  padding: clamp(18px, 2.6vw, 26px) clamp(20px, 2.8vw, 30px);
  background:
    linear-gradient(135deg, rgba(53, 207, 224, .10), rgba(27, 154, 171, .05) 55%, rgba(140, 100, 220, .06));
  border: 1px solid rgba(53, 207, 224, .35);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 0 40px rgba(27, 154, 171, .10);
}
.hero-care-panel-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(34, 197, 94, .12);
  border: 1px solid rgba(34, 197, 94, .35);
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #86efac;
  margin-bottom: 12px;
}
.hero-care-panel-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, .55);
}
.hero-care-panel-h {
  margin: 0;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(17px, 2.2vw, 23px);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.2;
}
.hero-care-panel-body {
  margin: 10px auto 18px;
  max-width: 52ch;
  font-family: Barlow, system-ui, sans-serif;
  font-size: clamp(14px, 1.55vw, 16px);
  line-height: 1.55;
  color: var(--ink-1);
}
.hero-care-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--teal-deep);
  color: var(--ink);
  border-radius: var(--radius);
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--sh-btn);
  transition: background .15s ease, transform .15s ease;
}
.hero-care-panel-cta:hover {
  background: var(--teal-brighter);
  color: var(--ink);
  transform: translateY(-1px);
}
.hero-care-panel-arrow {
  transition: transform .18s ease;
}
.hero-care-panel-cta:hover .hero-care-panel-arrow {
  transform: translateX(2px);
}

/* v7.2 standalone Care band — Care is no longer inside the hero. It sits
   directly under the hero as its own prominent full-width section, so the
   H1 can lead with the broader positioning and Care still gets its own
   visual moment above the fold as you scroll. */
.care-band {
  padding: clamp(30px, 4.5vw, 56px) var(--pad-x);
  background:
    radial-gradient(ellipse at center top, rgba(53, 207, 224, .12), transparent 65%),
    var(--bg);
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
  text-align: center;
}
.care-band-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(24px, 3.2vw, 36px) clamp(22px, 3vw, 34px);
  background:
    linear-gradient(135deg, rgba(53, 207, 224, .12), rgba(27, 154, 171, .06) 55%, rgba(140, 100, 220, .08));
  border: 1px solid rgba(53, 207, 224, .35);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  box-shadow: 0 0 60px rgba(27, 154, 171, .14);
}
.care-band-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(34, 197, 94, .12);
  border: 1px solid rgba(34, 197, 94, .35);
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #86efac;
  margin-bottom: clamp(14px, 1.8vw, 18px);
}
.care-band-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, .6);
}
.care-band-h {
  margin: 0;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.2;
}
.care-band-body {
  margin: clamp(12px, 1.6vw, 16px) auto clamp(18px, 2.4vw, 24px);
  max-width: 56ch;
  font-family: Barlow, system-ui, sans-serif;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.55;
  color: var(--ink-1);
}
.care-band-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  background: var(--teal-deep);
  color: var(--ink);
  border-radius: var(--radius);
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--sh-btn);
  transition: background .15s ease, transform .15s ease;
}
.care-band-cta:hover {
  background: var(--teal-brighter);
  color: var(--ink);
  transform: translateY(-1px);
}
.care-band-arrow { transition: transform .18s ease; }
.care-band-cta:hover .care-band-arrow { transform: translateX(3px); }

/* =========================================================
   v7.1 TECHNOLOGY CARE PAGE — custom benefit-first hero,
   prominent availability badge, big price, one primary CTA.
   ========================================================= */
.care-hero {
  text-align: center;
  padding: clamp(40px, 6vw, 80px) var(--pad-x) clamp(32px, 4.5vw, 56px);
  background-color: var(--bg);
  background-image: var(--grad-hero), var(--grid-lines);
  background-size: auto, var(--grid-size), var(--grid-size);
}
.care-hero-inner { max-width: 780px; margin: 0 auto; }
.care-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(34, 197, 94, .10);
  border: 1px solid rgba(34, 197, 94, .35);
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #86efac;
  margin-bottom: clamp(18px, 2.4vw, 26px);
}
.care-hero-status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, .6);
}
.care-hero-eyebrow {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(12px, 1.5vw, 15px);
  font-weight: 700; letter-spacing: .22em;
  color: var(--teal); text-transform: uppercase;
  margin-bottom: clamp(12px, 1.6vw, 18px);
}
.care-hero-h1 {
  margin: 0 auto;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(28px, 4.4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.12;
  max-width: 22ch;
  text-wrap: balance;
  color: var(--ink);
}
.care-hero-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: clamp(16px, 2vw, 22px);
  padding: 6px 14px;
  border-radius: var(--radius);
  background: rgba(27, 154, 171, .10);
  border: 1px solid rgba(53, 207, 224, .28);
}
.care-hero-price-amount {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 700;
  color: var(--teal);
  line-height: 1;
}
.care-hero-price-unit {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 500;
  color: var(--ink-2);
}
.care-hero-body {
  margin: clamp(18px, 2.4vw, 26px) auto 0;
  font-family: Barlow, system-ui, sans-serif;
  font-size: clamp(15px, 1.75vw, 18px);
  line-height: 1.55;
  max-width: 60ch;
  color: var(--ink-1);
}
.care-hero-actions {
  margin-top: clamp(22px, 3vw, 32px);
}
.care-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  background: var(--teal-deep);
  color: var(--ink);
  border-radius: var(--radius);
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(15px, 1.7vw, 18px);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--sh-btn);
  transition: background .15s ease, transform .15s ease;
}
.care-hero-cta:hover {
  background: var(--teal-brighter);
  color: var(--ink);
  transform: translateY(-1px);
}
.care-hero-cta-arrow { transition: transform .18s ease; }
.care-hero-cta:hover .care-hero-cta-arrow { transform: translateX(3px); }
.care-hero-secondary {
  margin: clamp(14px, 1.8vw, 18px) 0 0;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 14px;
  color: var(--ink-3);
}
.care-hero-secondary a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.care-hero-secondary a:hover { color: var(--ink); }

/* 4-benefit grid directly below the hero */
.care-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--border-2);
  border: 1px solid var(--border-2);
  margin-top: clamp(6px, 1.4vw, 14px);
}
.care-benefit {
  background: var(--surface);
  padding: clamp(20px, 2.4vw, 26px);
}
.care-benefit-h {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink);
  margin-bottom: 8px;
}
.care-benefit-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-1);
}
.hero-with-quiz .hero-review {
  margin-top: clamp(14px, 2vw, 20px);
  margin-bottom: clamp(20px, 3vw, 30px);
}
.hero-fallback {
  margin-top: clamp(16px, 2vw, 22px);
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 14px;
  color: var(--ink-3);
}
.hero-fallback span { opacity: .8; }
.hero-fallback a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.hero-fallback a:hover { color: var(--ink); }

/* =========================================================
   v6.2 QUIZ WIZARD — 3-step state machine (device → symptom
   → result). Only one step visible at a time. All steps live
   in the DOM for SEO / no-JS fallback. Console + phone paths
   short-circuit to an out-of-scope screen (quiz-oos-step).
   ========================================================= */
.quiz-wizard {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(18px, 2.6vw, 28px);
  background: var(--surface);
  border: 1px solid var(--border-4);
  border-radius: var(--radius);
  text-align: left;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
}
.quiz-step { animation: quizFade .32s ease; }
.quiz-step[hidden] { display: none; }
.quiz-step-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: clamp(12px, 1.6vw, 16px);
  min-height: 24px;
}
.quiz-step-num {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: auto;
}
.quiz-back {
  background: transparent;
  border: 0;
  color: var(--ink-2);
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  margin-left: -8px;
  cursor: pointer;
  letter-spacing: .02em;
}
.quiz-back:hover { color: var(--teal); }
.quiz-question {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
}
.quiz-hint {
  margin: 6px 0 clamp(14px, 2vw, 18px);
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.4;
}
.quiz-wizard .quiz-buttons {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}
.quiz-wizard .quiz-btn {
  padding: 14px 16px;
  font-size: clamp(15px, 1.7vw, 17px);
}
.quiz-result-step,
.quiz-oos-step {
  padding: 4px 0 0;
}
.quiz-oos-step .quiz-result-head { color: #fde68a; }
.quiz-oos-step {
  padding-top: 4px;
}
.quiz-oos-step::before {
  content: "";
  display: block;
  width: 32px; height: 3px;
  background: #fbbf24;
  border-radius: 3px;
  margin: 0 0 12px;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px; height: 60px; padding: 0 22px;
  color: var(--ink); border-radius: var(--radius);
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 700; letter-spacing: .03em;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--teal-deep);
  font-size: clamp(19px, 2vw, 21px);
  box-shadow: var(--sh-btn);
}
.btn-primary:hover { background: var(--teal-brighter); color: var(--ink); }
.btn-outline {
  border-color: var(--border-7);
  font-size: clamp(17px, 1.8vw, 19px);
  font-weight: 600;
}
.btn-outline:hover { border-color: var(--teal); color: var(--ink); }
.btn-sm { height: 54px; font-size: clamp(17px, 1.8vw, 19px); }
.btn-fluid { flex: 1 1 260px; max-width: 380px; }
.btn-fluid-sm { flex: 1 1 180px; max-width: 260px; }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee {
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  overflow: hidden;
  padding: 10px 0;
  background: var(--surface-tint);
}
.marquee-track {
  display: flex; width: max-content;
  animation: cwslide 34s linear infinite;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-2);
}
.marquee-group { display: flex; gap: 22px; padding-right: 22px; }
.marquee-group .m-dot { color: var(--teal); }

/* =========================================================
   BENCH STATUS STAT GRID
   ========================================================= */
.bench-band { padding: clamp(20px, 3vw, 34px) var(--pad-x) 0; }
.bench-card {
  max-width: var(--container); margin: 0 auto;
  border: 1px solid var(--border-5);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-glow), rgba(4,8,11,0));
}
.bench-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-3);
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-4);
}
.bench-live { display: flex; align-items: center; gap: 6px; color: var(--teal); }
.bench-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); display: inline-block;
  animation: cwblink 2.2s ease-in-out infinite;
}
.bench-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--border-2);
}
.bench-cell {
  background: var(--surface);
  padding: 16px 12px;
  text-align: center;
}
.bench-num {
  font-family: Saira, sans-serif;
  font-size: clamp(21px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -.02em;
}
.bench-label {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; color: var(--ink-5);
  text-transform: uppercase;
  margin-top: 5px;
}

/* =========================================================
   SECTION HEAD ("01 — Section name" with trailing rule)
   ========================================================= */
.section-head {
  display: flex; align-items: center; gap: 10px;
}
.section-head-dot {
  width: 7px; height: 7px;
  background: var(--teal); display: inline-block;
  flex-shrink: 0;
}
.section-head-label {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .18em; color: var(--teal);
  text-transform: uppercase;
}
.section-head-rule {
  flex: 1; height: 1px; background: var(--border-4);
}
.section-h2 {
  margin: clamp(12px, 2vw, 18px) 0 0;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700; line-height: 1.06;
  text-wrap: balance;
}
.section-h2.narrow { max-width: 22ch; }
.section-h2.wider  { max-width: 24ch; }

/* =========================================================
   SYMPTOM PILLS
   ========================================================= */
.symptom-pills {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin-top: clamp(16px, 2.4vw, 24px);
  font-family: "Barlow Semi Condensed", sans-serif;
}
.symptom-pill {
  border: 1px solid var(--border-6);
  border-radius: 100px;
  padding: 10px 17px;
  font-size: clamp(15.5px, 1.7vw, 18px);
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-tint);
  transition: border-color .15s ease, color .15s ease;
}
.symptom-pill:hover { border-color: var(--teal); color: var(--teal); }

/* =========================================================
   BENCH OVERLAY SECTION (image + gradient + caption)
   ========================================================= */
.bench-overlay { position: relative; }
.bench-overlay img {
  width: 100%;
  height: clamp(240px, 36vw, 460px);
  object-fit: cover;
  filter: saturate(.85);
}
.bench-overlay-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(4,8,11,.2), rgba(4,8,11,.88) 84%, var(--bg));
}
.bench-overlay-copy {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 var(--pad-x) clamp(18px, 3vw, 34px);
}
.bench-overlay-copy .inner { max-width: var(--container); margin: 0 auto; }
.bench-overlay-eyebrow {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .18em; color: var(--teal);
  text-transform: uppercase;
}
.bench-overlay-h {
  margin: 8px 0 0;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(25px, 3.4vw, 40px);
  font-weight: 700; line-height: 1.12;
  max-width: 24ch; text-wrap: balance;
}

/* =========================================================
   PROCESS CARDS (numbered)
   ========================================================= */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--border-2);
  border: 1px solid var(--border-2);
  margin-top: clamp(18px, 2.6vw, 28px);
}
.process-card {
  background: var(--bg);
  padding: 18px 18px 20px;
}
.process-num {
  font-family: Saira, sans-serif;
  font-size: 12px; font-weight: 600; color: var(--teal);
}
.process-title {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(20px, 2.1vw, 24px);
  font-weight: 700; margin-top: 8px;
}
.process-body {
  margin: 5px 0 0;
  font-size: 15px; line-height: 1.55;
  color: var(--ink-3);
}

/* =========================================================
   PRICING CARD (3-column price grid with dashed dividers)
   ========================================================= */
.pricing-wrap { padding: 0 var(--pad-x) var(--pad-y); }
.pricing-card {
  max-width: var(--container); margin: 0 auto;
  border: 1px solid var(--border-6);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(27,154,171,.05);
}
.pricing-card-bar { height: 2px; background: var(--grad-bar); }
.pricing-card-head { padding: clamp(16px, 2.4vw, 26px) clamp(16px, 2.4vw, 26px) clamp(14px, 2vw, 20px); }
.pricing-card-eyebrow {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .18em; color: var(--teal);
  text-transform: uppercase;
}
.pricing-card-h {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(29px, 3.6vw, 42px);
  font-weight: 700; line-height: 1.06;
  margin-top: 8px;
}
.pricing-card-divider {
  height: 1px;
  background: repeating-linear-gradient(to right, rgba(53,207,224,.4) 0 6px, transparent 6px 12px);
}
.pricing-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px; background: var(--border-2);
}
.pricing-card-cell {
  background: var(--surface);
  padding: clamp(15px, 2vw, 22px) clamp(16px, 2.4vw, 26px);
}
.pricing-card-label {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: .16em; color: var(--ink-4);
  text-transform: uppercase;
}
.pricing-card-num {
  font-family: Saira, sans-serif;
  font-size: clamp(30px, 3.2vw, 40px);
  font-weight: 700; color: var(--teal);
  letter-spacing: -.02em;
  margin-top: 5px;
}
.pricing-card-body {
  margin: 0;
  padding: clamp(14px, 2vw, 20px) clamp(16px, 2.4vw, 26px) clamp(18px, 2.4vw, 24px);
  font-size: 15px; line-height: 1.6;
  color: var(--ink-3);
  max-width: 80ch; text-wrap: pretty;
}

/* =========================================================
   OWNER SPLIT SECTION (Patrick + Marlena)
   ========================================================= */
.owner-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  margin-top: clamp(14px, 2vw, 22px);
}
.owner-lede {
  margin: 14px 0 0;
  font-size: clamp(15.5px, 1.7vw, 17px);
  line-height: 1.6;
  color: var(--ink-1);
  text-wrap: pretty;
}
.owner-quote {
  margin-top: 20px;
  padding-left: 16px;
  border-left: 2px solid var(--teal-deep);
}
.owner-quote-eyebrow {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .16em; color: var(--teal);
  text-transform: uppercase;
}
.owner-quote-body {
  margin: 7px 0 0;
  font-size: 15.5px; line-height: 1.6;
  color: var(--ink-1); text-wrap: pretty;
}
.owner-quote-body strong { color: var(--ink); font-weight: 600; }
.owner-photo {
  width: 100%;
  height: clamp(200px, 26vw, 380px);
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border-3);
}

/* =========================================================
   SERVICES GRID (tile links)
   ========================================================= */
.service-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--border-1);
  border: 1px solid var(--border-1);
  margin-top: clamp(14px, 2vw, 24px);
  font-family: "Barlow Semi Condensed", sans-serif;
}
.service-tile {
  background: var(--bg);
  padding: 15px 18px;
  color: var(--ink);
  transition: background .15s ease;
}
.service-tile:hover { background: var(--surface-hover); color: var(--ink); }
.service-tile-name {
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 600;
}
.service-tile-sub {
  font-size: 13.5px; font-weight: 600;
  letter-spacing: .1em; color: var(--ink-5);
  text-transform: uppercase;
  margin-top: 4px;
}

/* =========================================================
   VISIT TABLE (contact info rows)
   ========================================================= */
.visit-table {
  display: grid;
  font-family: "Barlow Semi Condensed", sans-serif;
}
.visit-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--border-1);
}
.visit-row:last-child { border-bottom: 1px solid var(--border-1); }
.visit-row-label {
  font-size: 13.5px; font-weight: 600;
  letter-spacing: .14em; color: var(--teal);
  text-transform: uppercase; text-align: right;
}
.visit-row-value {
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 600;
}
.visit-row-value a { color: var(--ink); }
.visit-row-value a:hover { color: var(--teal); }

.visit-note {
  margin: 0;
  font-size: 15px; line-height: 1.6;
  color: var(--ink-3); text-wrap: pretty;
}
.visit-cta-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 18px;
  font-family: "Barlow Semi Condensed", sans-serif;
}

/* =========================================================
   FAQ (bordered rows in two columns)
   ========================================================= */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(0px, 2vw, 40px);
  margin-top: clamp(12px, 2vw, 20px);
}
.faq-col > .faq-item:first-child { border-top: 1px solid var(--border-1); }
.faq-col > .faq-item:last-child { border-bottom: 1px solid var(--border-1); }
.faq-item {
  border-top: 1px solid var(--border-1);
  padding: 14px 0;
}
.faq-q {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 600;
}
.faq-a {
  margin: 4px 0 0;
  font-size: 15px; line-height: 1.6;
  color: var(--ink-3);
}
.faq-a a { color: var(--teal); }

/* Details/summary variant (used where content is collapsible) */
details.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 600;
  position: relative;
  padding-right: 30px;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: "+";
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  color: var(--teal); font-weight: 400; font-size: 24px;
  line-height: 1;
}
details.faq-item[open] summary::after { content: "−"; }
details.faq-item p {
  margin: 8px 0 0;
  font-size: 15px; line-height: 1.6;
  color: var(--ink-3);
}

/* =========================================================
   v6.1 SYMPTOM QUIZ — deterministic router. Buttons on top, one
   result panel visible at a time. No LLM, no external service.
   ========================================================= */
.quiz-section .quiz-intro {
  margin: clamp(12px, 2vw, 18px) 0 clamp(18px, 2.5vw, 26px);
  font-size: clamp(16px, 1.8vw, 18px);
  color: var(--ink-1);
  max-width: 60ch;
  line-height: 1.55;
}
.quiz-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin-bottom: clamp(18px, 2.5vw, 28px);
}
.quiz-btn {
  display: block;
  width: 100%;
  padding: 18px 20px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-4);
  border-radius: var(--radius);
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.quiz-btn:hover,
.quiz-btn:focus-visible {
  background: rgba(27,154,171,.09);
  border-color: var(--teal);
  color: var(--teal);
  outline: none;
}
.quiz-btn.is-selected {
  background: rgba(27,154,171,.12);
  border-color: var(--teal);
  color: var(--ink);
  border-left: 4px solid var(--teal);
}

.quiz-results { position: relative; }
.quiz-result {
  padding: clamp(20px, 3vw, 32px);
  background: var(--surface);
  border: 1px solid var(--border-5);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  animation: quizFade .35s ease;
}
.quiz-result[hidden] { display: none; }
@keyframes quizFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.quiz-result-head {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}
.quiz-result-body {
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.6;
  color: var(--ink-1);
  margin: 0 0 12px;
  max-width: 65ch;
}
.quiz-result-fine {
  font-size: 14px;
  color: var(--ink-3);
  margin: 0 0 16px;
  max-width: 65ch;
}
.quiz-result-warning {
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: var(--radius);
  background: rgba(251, 191, 36, .1);
  border-left: 3px solid #fbbf24;
  color: #fde68a;
  font-size: 15px;
  line-height: 1.5;
}
.quiz-result-warning strong { color: #fbbf24; font-weight: 700; }
.quiz-result-tips {
  margin: 4px 0 18px;
  padding: 14px 16px;
  background: rgba(27, 154, 171, 0.05);
  border: 1px solid var(--border-3);
  border-radius: var(--radius);
}
.quiz-result-tips-h {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 10px;
}
.quiz-result-tips ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-1);
}
.quiz-result-tips li + li { margin-top: 7px; }
.quiz-result-tips li strong { color: var(--ink); font-weight: 700; }
.quiz-result-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  font-family: "Barlow Semi Condensed", sans-serif;
}

/* =========================================================
   v6.5 HELPER FORM — rendered inside each Step-3 result.
   Client leaves name + phone/email, we email info@computer-wall.com.
   ========================================================= */
.quiz-form {
  margin-top: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--border-4);
  border-radius: var(--radius);
}
.quiz-form-h {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: .01em;
}
.quiz-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 480px) {
  .quiz-form-grid { grid-template-columns: 1fr; }
}
.quiz-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quiz-form-label {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.quiz-form-field input {
  width: 100%;
  padding: 11px 12px;
  background: rgba(0, 0, 0, .35);
  color: var(--ink);
  border: 1px solid var(--border-4);
  border-radius: calc(var(--radius) - 4px);
  font-family: Barlow, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.3;
  transition: border-color .15s ease, background .15s ease;
}
.quiz-form-field input::placeholder { color: var(--ink-3); }
.quiz-form-field input:hover { border-color: var(--border-7); }
.quiz-form-field input:focus {
  outline: none;
  border-color: var(--teal);
  background: rgba(0, 0, 0, .5);
  box-shadow: 0 0 0 2px rgba(27, 154, 171, .18);
}
.quiz-form-hint {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
}
/* Honeypot: visually hidden but reachable to bots that ignore CSS. */
.quiz-form-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.quiz-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  font-family: "Barlow Semi Condensed", sans-serif;
}
.quiz-form-submit {
  min-width: 160px;
}
.quiz-form-submit[disabled] {
  opacity: .6;
  cursor: not-allowed;
}
.quiz-form-callout {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 14px;
  font-weight: 600;
}
.quiz-form-callout:hover { color: var(--teal); }
.quiz-form-status {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.45;
  min-height: 1.2em;
  color: var(--ink-2);
}
.quiz-form-status.is-error {
  color: #fca5a5;
}
.quiz-form-status.is-pending {
  color: var(--teal);
}
/* Post-submit success replacement rendered by JS. */
.quiz-form-done {
  padding: clamp(18px, 3vw, 26px);
  background: rgba(27, 154, 171, .08);
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  text-align: left;
  animation: quizFade .35s ease;
}
.quiz-form-done-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--teal-deep);
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}
.quiz-form-done-h {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.quiz-form-done-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-1);
}
.quiz-form-done-body a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
}

/* =========================================================
   v6.1 VALUE CARDS — 3-card grid explaining why customers
   bring us the problem instead of trying to diagnose it first.
   ========================================================= */
.value-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--border-2);
  border: 1px solid var(--border-2);
  margin-top: clamp(18px, 2.6vw, 28px);
}
.value-card {
  background: var(--surface);
  padding: 22px 22px 24px;
}
.value-card-h {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.value-card-body {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* Pricing-slim: demoted variant of the pricing card. Range in body copy,
   no big FREE / $0 columns. Kept visible, not visually dominant. */
.pricing-card-slim {
  background: var(--surface);
  border: 1px solid var(--border-4);
  border-left: 4px solid var(--teal);
  padding: clamp(20px, 3vw, 32px);
  overflow: visible;
}
.pricing-card-slim .pricing-card-head { padding: 0; }
.pricing-card-slim .pricing-card-h {
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 0 0 clamp(12px, 1.6vw, 16px);
}
.pricing-card-slim .pricing-card-body {
  padding: 0;
  color: var(--ink-1);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 12px;
  max-width: 65ch;
}
.pricing-card-slim .pricing-card-body strong { color: var(--ink); }
.pricing-card-slim .pricing-card-lead {
  font-size: clamp(17px, 1.9vw, 20px);
  color: var(--ink);
}
.pricing-card-slim .pricing-card-lead strong {
  color: var(--teal);
  font-weight: 700;
}

/* =========================================================
   FINAL CTA CARD
   ========================================================= */
.final-cta-wrap { padding: 0 var(--pad-x) clamp(28px, 4vw, 56px); }
.final-cta {
  max-width: var(--container); margin: 0 auto;
  border: 1px solid var(--border-6);
  border-radius: var(--radius);
  overflow: hidden; text-align: center;
  background-color: var(--surface-tint);
  background-image: var(--grid-lines);
  background-size: var(--grid-size);
}
.final-cta-bar { height: 2px; background: var(--grad-bar); }
.final-cta-body { padding: clamp(26px, 4vw, 48px) clamp(18px, 4vw, 40px); }
.final-cta-h {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(27px, 3.6vw, 44px);
  font-weight: 700; line-height: 1.1;
  max-width: 26ch; margin: 0 auto;
  text-wrap: balance;
}
.final-cta-phone {
  display: inline-block;
  font-family: Saira, sans-serif;
  font-size: clamp(25px, 3vw, 36px);
  font-weight: 700; letter-spacing: -.01em;
  color: var(--teal);
  margin-top: 14px;
}
.final-cta-phone:hover { color: var(--teal-bright); }
.final-cta-tag {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 600; letter-spacing: .16em;
  color: var(--ink-4); text-transform: uppercase;
  margin-top: 10px;
}
.final-cta-sub {
  font-size: clamp(15px, 1.7vw, 18px);
  color: var(--ink-1);
  line-height: 1.55;
  max-width: 50ch;
  margin: 12px auto 0;
}
.final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(16px, 2vw, 22px);
  font-family: "Barlow Semi Condensed", sans-serif;
}
.btn-on-dark {
  color: var(--ink);
  border-color: rgba(255,255,255,.35);
}
.btn-on-dark:hover { border-color: var(--teal); color: var(--teal); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  padding: 0 var(--pad-x) clamp(30px, 4vw, 50px);
  text-align: center;
}
.footer-inner {
  max-width: 760px; margin: 0 auto;
  display: grid; gap: 12px; justify-items: center;
}
.footer-inner img { width: 46px; height: 46px; opacity: .85; }
.footer-brand {
  font-family: Saira, sans-serif;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
}
.footer-brand .accent { color: var(--teal); }
.footer-text {
  margin: 0;
  font-size: 14px; line-height: 1.65;
  color: var(--ink-5); text-wrap: pretty;
}
.footer-copyright {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 12px; font-weight: 500;
  color: var(--ink-6);
  letter-spacing: .12em; text-transform: uppercase;
}
.footer-nav {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  justify-content: center;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; margin-top: 4px;
}
.footer-nav a { color: var(--ink-3); font-weight: 600; }
.footer-nav a:hover { color: var(--teal); }

/* =========================================================
   STICKY MOBILE CALL BAR
   ========================================================= */
.mobile-call {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center;
  padding: 12px 16px 18px;
  background: linear-gradient(to top, var(--bg) 60%, rgba(4,8,11,0));
  z-index: 40;
  pointer-events: none;
}
.mobile-call a {
  pointer-events: auto;
  width: min(100%, 420px);
  display: flex; align-items: center; justify-content: center;
  height: 56px;
  background: var(--teal-deep);
  color: var(--ink);
  border-radius: var(--radius);
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 700; font-size: 20px;
  letter-spacing: .03em;
  box-shadow: var(--sh-call);
}
.mobile-call a:hover { background: var(--teal-brighter); color: var(--ink); }
/* Hide on wider screens where the header phone is always visible */
@media (min-width: 720px) {
  .mobile-call { display: none; }
}
body.has-sticky-call { padding-bottom: 80px; }
@media (min-width: 720px) {
  body.has-sticky-call { padding-bottom: 0; }
}

/* =========================================================
   PAGE HERO (for non-home pages)
   ========================================================= */
.page-hero {
  padding: clamp(40px, 6vw, 80px) var(--pad-x) clamp(24px, 4vw, 44px);
  background-color: var(--bg);
  background-image: var(--grad-hero), var(--grid-lines);
  background-size: auto, var(--grid-size), var(--grid-size);
  border-bottom: 1px solid var(--border-1);
}
.page-hero-inner { max-width: var(--container); margin: 0 auto; }
.page-hero-eyebrow {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .18em; color: var(--teal);
  text-transform: uppercase;
}
.page-hero h1 {
  margin: 12px 0 0;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 700; line-height: 1.06;
  max-width: 22ch;
  text-wrap: balance;
}
.page-hero-lede {
  margin: clamp(14px, 2vw, 20px) 0 0;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.55;
  color: var(--ink-1);
  max-width: 60ch;
  text-wrap: pretty;
}
.page-hero-cta {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(18px, 2.5vw, 28px);
  font-family: "Barlow Semi Condensed", sans-serif;
}

/* =========================================================
   PROSE (long-form body content on service pages, about, faq)
   ========================================================= */
.prose {
  max-width: 68ch;
}
.prose h2 {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  margin: clamp(28px, 4vw, 48px) 0 clamp(10px, 1.5vw, 16px);
  line-height: 1.1;
  color: var(--ink);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  margin: clamp(20px, 3vw, 30px) 0 clamp(6px, 1vw, 10px);
  line-height: 1.2;
  color: var(--ink);
}
.prose p {
  color: var(--ink-1);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 1em;
}
.prose p.big-text {
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 1em;
}
.prose ul, .prose ol {
  color: var(--ink-1);
  margin: 0 0 1em;
  padding-left: 1.5em;
  font-size: 16px;
  line-height: 1.7;
}
.prose li { margin-bottom: .35em; }
.prose li strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--teal-bright); }
.prose strong { color: var(--ink); }
.prose ul.check-list { list-style: none; padding-left: 0; }
.prose ul.check-list li {
  padding-left: 1.8em;
  position: relative;
}
.prose ul.check-list li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 12px; height: 6px;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}

/* =========================================================
   HERITAGE PAGES (Soft Effects / CD Computers)
   ========================================================= */
.heritage-hero {
  padding: clamp(56px, 8vw, 96px) var(--pad-x) clamp(28px, 4vw, 48px);
  background-color: var(--bg);
  background-image: var(--grad-hero), var(--grid-lines);
  background-size: auto, var(--grid-size), var(--grid-size);
  border-bottom: 1px solid var(--border-1);
  text-align: center;
}
.heritage-hero-inner { max-width: 720px; margin: 0 auto; }
.heritage-hero h1 {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700; line-height: 1.06;
  margin-top: 12px;
  max-width: 24ch;
  margin-left: auto; margin-right: auto;
  text-wrap: balance;
}
.heritage-hero-lede {
  margin: clamp(16px, 2.4vw, 26px) auto 0;
  max-width: 56ch;
  color: var(--ink-2);
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.55;
  font-style: italic;
}
.heritage-prose {
  max-width: 660px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) var(--pad-x);
}
.heritage-prose p {
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--ink-1);
  margin: 0 0 1.5em;
}
.heritage-prose p.lead {
  font-size: 1.3rem;
  color: var(--ink);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.heritage-prose p.closer {
  font-size: 1.3rem;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--border-1);
  margin-top: 2rem;
}
.heritage-signoff {
  text-align: center;
  padding: 1rem 0 4rem;
  color: var(--ink-5);
  font-size: .98rem;
}
.heritage-signoff strong {
  color: var(--ink);
  display: block;
  margin-bottom: .35rem;
}

/* Pull quote for John Evjen quote (kept structure for future) */
.softfx-quote {
  margin: 2.5rem 0;
  padding: .5rem 0 .5rem 2rem;
  border-left: 3px solid var(--teal);
  position: relative;
}
.softfx-quote blockquote {
  margin: 0; padding: 0;
  font-size: 1.35rem; line-height: 1.5;
  color: var(--ink);
  font-weight: 500; font-style: italic;
}
.softfx-quote blockquote::before {
  content: "\201C";
  position: absolute;
  left: -.5rem; top: -1.5rem;
  font-size: 4.5rem; line-height: 1;
  color: var(--teal); opacity: .25;
  font-family: Georgia, serif;
}
.softfx-quote figcaption {
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--ink-3); font-style: normal;
}
.softfx-quote figcaption strong {
  color: var(--ink);
  font-weight: 600;
  display: block;
}

/* =========================================================
   PRIMARY DROPDOWN NAV (mobile fallback via WP menu)
   Not shown in the main sticky header per the designer, but
   retained for any page that mounts wp_nav_menu.
   ========================================================= */
.primary-nav {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 14px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.primary-nav a { color: var(--ink-2); }
.primary-nav a:hover { color: var(--teal); }
.menu-toggle { display: none; }

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes cwblink { 0%,100% { opacity: 1 } 50% { opacity: .2 } }
@keyframes cwslide { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .open-pill-dot, .bench-live-dot { animation: none !important; }
}