/* =====================================================================
   VOLTAGE APPLIANCE REPAIR · Global Stylesheet
   ===================================================================== */

:root {
  /* Brand colors from logo */
  --red:        #E63946;
  --red-hot:    #F23B49;
  --red-deep:   #B02531;
  --blue:       #2563BF;
  --blue-light: #3BA3E0;
  --blue-deep:  #113F9A;

  /* Light theme surfaces */
  --bg:      #FFFFFF;
  --bg-2:    #F8F7F3;
  --bg-3:    #F2F0EA;
  --bg-dark: #0A0D14;

  /* Ink */
  --ink:      #0E1015;
  --ink-soft: #3A3D45;
  --muted:    #7A7D86;
  --line:     rgba(14,16,21,.09);
  --line-2:   rgba(14,16,21,.14);

  /* Type */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  38px;
  --fs-3xl:  56px;
  --fs-4xl:  72px;

  --radius:    14px;
  --radius-lg: 22px;

  --gutter: 20px;
  --max:    1280px;
  --tap:    56px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

@media (min-width: 768px) {
  :root {
    --fs-2xl: 52px;
    --fs-3xl: 72px;
    --fs-4xl: 96px;
    --gutter: 32px;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: 80px;
}
@media (min-width: 1200px) { body { padding-bottom: 0; } }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.mono {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: 'tnum';
}

/* ========== TOP BAR ========== */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 80px;
}
@media (min-width: 900px) { .top-row { height: 96px; } }

.brand { display: flex; align-items: center; }
.brand img { height: 54px; width: auto; object-fit: contain; display: block; }
@media (min-width: 900px) { .brand img { height: 64px; } }

.top-nav { display: none; }
@media (min-width: 980px) {
  .top-nav {
    display: flex;
    gap: 28px;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
  }
  .top-nav a { color: var(--ink-soft); transition: color .2s var(--ease); }
  .top-nav a:hover { color: var(--red); }
}

.top-cta {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--red);
  color: #FFF;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  min-height: 42px;
  box-shadow: 0 6px 20px -6px rgba(230,57,70,.45);
  transition: transform .15s var(--ease), box-shadow .2s var(--ease);
}
.top-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -6px rgba(230,57,70,.6); }
.top-cta .mono { font-size: 12px; }
@media (min-width: 980px) {
  .top-cta { display: inline-flex; padding: 11px 18px; font-size: 14px; min-height: 46px; }
  .top-cta .mono { font-size: 13px; }
}

/* ===== Menu button (mobile only) ===== */
.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 48px;
  height: 48px;
  background: var(--red, #e63946);
  color: #FFF;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  box-shadow: 0 6px 18px -6px rgba(230,57,70,.45);
}
.menu-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -6px rgba(14,16,21,.45); }
.menu-btn-bars {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 12px;
}
.menu-btn-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease), top .25s var(--ease);
}
.menu-btn-bars span:nth-child(1) { top: 0; }
.menu-btn-bars span:nth-child(2) { top: 5px; }
.menu-btn-bars span:nth-child(3) { top: 10px; }
.menu-btn[aria-expanded="true"] .menu-btn-bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn-bars span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn-bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }
@media (min-width: 980px) {
  .menu-btn { display: none; }
}

/* ===== Menu panel (dropdown with services + cities) ===== */
.menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: rgba(255,255,255,.98);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 22px 50px -20px rgba(14,16,21,.25);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  animation: menuDrop .26s var(--ease, cubic-bezier(.22,.61,.36,1));
}
@media (min-width: 900px) { .menu-panel { max-height: calc(100vh - 96px); } }
@keyframes menuDrop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.menu-panel .wrap { padding: 28px 24px 36px; }
.menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px 32px;
}
@media (min-width: 700px) { .menu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .menu-grid { grid-template-columns: repeat(4, 1fr); } }
.menu-col h4 {
  margin: 0 0 14px;
  font: 700 11px/1 'JetBrains Mono', monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red, #e63946);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.menu-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.menu-col a {
  display: block;
  padding: 7px 0;
  color: var(--ink, #0e1015);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s var(--ease), transform .15s var(--ease);
}
.menu-col a:hover { color: var(--red, #e63946); transform: translateX(3px); }
.menu-all a { color: var(--red, #e63946); font-weight: 600; font-size: 13px; padding-top: 12px; }
body.menu-open { overflow: hidden; }

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 28px;
  min-height: var(--tap);
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--fs-base);
  letter-spacing: -.005em;
  transition: transform .15s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn-red {
  background: var(--red);
  color: #FFF;
  box-shadow: 0 10px 26px -8px rgba(230,57,70,.55), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-red:hover { background: var(--red-hot); box-shadow: 0 14px 34px -6px rgba(230,57,70,.7); transform: translateY(-2px); }
.btn-red .mono { font-size: 15px; opacity: .95; }

.btn-outline {
  background: #FFF;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-outline:hover { background: var(--ink); color: #FFF; }

.btn-dark { background: var(--bg-dark); color: #FFF; box-shadow: 0 10px 30px -8px rgba(0,0,0,.5); }
.btn-dark:hover { transform: translateY(-2px); }
.btn-white { background: rgba(255,255,255,.16); color: #FFF; border: 1px solid rgba(255,255,255,.32); }
.btn-white:hover { background: rgba(255,255,255,.26); }

/* ========== BREADCRUMB ========== */
.breadcrumb {
  padding-top: 28px;
  padding-bottom: 4px;
  font-size: 13px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .02em;
}
.breadcrumb a { color: var(--muted); transition: color .2s var(--ease); }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb .sep { margin: 0 8px; opacity: .5; }

/* ========== SECTION ========== */
section { padding: 64px 0; }
@media (min-width: 900px) { section { padding: 96px 0; } }

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow::before { content: ''; width: 24px; height: 1px; background: currentColor; }

.section-head h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: var(--fs-2xl);
  line-height: .96;
  letter-spacing: -.03em;
  max-width: 18ch;
  color: var(--ink);
}
@media (min-width: 900px) { .section-head h2 { font-size: var(--fs-3xl); } }

.section-head p {
  margin-top: 16px;
  font-size: var(--fs-md);
  color: var(--ink-soft);
  max-width: 54ch;
}

/* ========== HERO ========== */
.hero { position: relative; padding: 28px 0 0; overflow: hidden; }
@media (min-width: 900px) { .hero { padding: 40px 0 80px; } }
@media (min-width: 1024px) { .hero { padding: 24px 0 48px; } }

.hero-grid { display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 1024px) {
  .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: stretch;
  }
}
@media (min-width: 1440px) {
  .hero-grid { gap: 72px; }
}

.local-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 10px;
  background: #FFF;
  border: 1px solid var(--line-2);
  color: var(--ink);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 22px;
  box-shadow: 0 2px 8px -2px rgba(14,16,21,.05);
}
.local-pill .dot {
  width: 8px; height: 8px;
  background: #2ECB6A;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(46,203,106,.7);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(46,203,106,.7); }
  70% { box-shadow: 0 0 0 10px rgba(46,203,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,203,106,0); }
}
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.local-pill-mobile { display: none; }
.local-pill-desktop { display: inline; }
@media (max-width: 1023px) {
  .local-pill-desktop { display: none; }
  .local-pill-mobile { display: inline; }
}

.hero h1, .hero .hero-h {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-variation-settings: 'opsz' 96;
  font-size: var(--fs-2xl);
  line-height: .92;
  letter-spacing: -.035em;
  color: var(--ink);
}
@media (min-width: 600px) { .hero h1, .hero .hero-h { font-size: var(--fs-3xl); } }
@media (min-width: 1100px) { .hero h1, .hero .hero-h { font-size: var(--fs-4xl); } }
.hero h1 em, .hero .hero-h em {
  font-style: normal;
  position: relative;
  display: inline-block;
}
.hero h1 em::after, .hero .hero-h em::after {
  content: '';
  position: absolute;
  left: -4px; right: -4px;
  bottom: .08em; height: .28em;
  background: var(--red);
  opacity: .2; z-index: -1;
  transform: skewX(-8deg);
}
.hero h1 .dot-red, .hero .hero-h .dot-red { color: var(--red); }
.hero h1 .dot-blue, .hero .hero-h .dot-blue { color: var(--blue); }

.hero-sub {
  margin-top: 20px;
  font-size: var(--fs-md);
  max-width: 52ch;
  color: var(--ink-soft);
  line-height: 1.5;
}
@media (min-width: 1024px) { .hero-sub { margin-top: 16px; } }

.hero-cta { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 520px) { .hero-cta { flex-direction: row; flex-wrap: wrap; } }
@media (min-width: 1024px) { .hero-cta { margin-top: 20px; } }

.hero-trust {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
@media (min-width: 1024px) { .hero-trust { margin-top: 20px; } }
.hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust svg { width: 16px; height: 16px; color: var(--red); }

.hero-photo {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-3);
  box-shadow: 0 30px 60px -20px rgba(14,16,21,.25), 0 10px 20px -10px rgba(14,16,21,.15);
  order: -1;
}
@media (min-width: 1024px) { .hero-photo { aspect-ratio: 4/5; order: 0; } }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
@media (min-width: 1000px) { .hero-photo img { object-position: center 30%; } }
.hero-photo .photo-badge {
  position: absolute;
  z-index: 2;
  left: 18px; bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 20px -6px rgba(14,16,21,.3);
}
.hero-photo .photo-badge::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
}

/* ========== PRICE RAIL ========== */
.price-rail {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 32px;
}
@media (min-width: 1000px) { .price-rail { margin-top: 0; } }
.price-rail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 700px) { .price-rail-grid { grid-template-columns: repeat(4, 1fr); } }
.price-cell {
  padding: 20px var(--gutter);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.price-cell:nth-child(2n) { border-right: none; }
@media (min-width: 700px) {
  .price-cell { padding: 26px 24px; border-right: 1px solid var(--line); }
  .price-cell:nth-child(2n) { border-right: 1px solid var(--line); }
  .price-cell:last-child { border-right: none; }
}
.price-cell .big {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}
@media (min-width: 700px) { .price-cell .big { font-size: 40px; } }
.price-cell .big.accent { color: var(--red); }
.price-cell .lbl {
  font-size: 12px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 8px;
}

/* ========== MARQUEE ========== */
.marquee {
  background: var(--ink);
  color: var(--bg-2);
  padding: 16px 0;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  gap: 48px;
  animation: marquee 35s linear infinite;
  white-space: nowrap;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.01em;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 48px; }
.marquee-track .sep { color: var(--red); font-size: 16px; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ========== SERVICE TILES ========== */
.svc-grid {
  margin-top: 40px;
  display: grid;
  gap: 18px;
}

@media (min-width: 900px) {
  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

.svc-tile {
  position: relative;
  display: grid;
  grid-template-columns: 78px 1fr 44px;
  align-items: center;
  column-gap: 18px;
  min-height: 138px;
  padding: 20px 18px 20px 16px;
  background:
    radial-gradient(circle at 10% 18%, rgba(242,59,73,.08), transparent 24%),
    radial-gradient(circle at 92% 85%, rgba(37,99,191,.05), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #fcfcff 100%);
  border: 1px solid rgba(37, 99, 191, 0.08);
  border-radius: 24px;
  box-shadow:
    0 18px 40px -30px rgba(17, 63, 154, 0.16),
    0 8px 18px -14px rgba(14, 16, 21, 0.10),
    inset 0 1px 0 rgba(255,255,255,.95);
  overflow: hidden;
  transition:
    transform .25s var(--ease),
    box-shadow .25s var(--ease),
    border-color .25s var(--ease);
}

.svc-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(37, 99, 191, 0.14);
  box-shadow:
    0 24px 44px -28px rgba(17, 63, 154, 0.20),
    0 10px 20px -14px rgba(14, 16, 21, 0.14);
}

.svc-tile > svg {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  color: var(--red);
  justify-self: center;
  align-self: center;
  position: relative;
  z-index: 1;
}

.svc-tile > svg::before {
  content: '';
}

.svc-tile::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  width: 78px;
  height: 78px;
  transform: translateY(-50%);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.90) 58%, rgba(242,59,73,.10) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 24px -18px rgba(242, 59, 73, 0.28);
  pointer-events: none;
}

.svc-tile h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 6px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
  align-self: end;
}

.svc-tile p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  max-width: 26ch;
  font-size: 14px;
  line-height: 1.45;
  color: #5B6784;
  align-self: start;
}

.svc-tile::after {
  content: '›';
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  justify-self: center;
  align-self: center;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  box-shadow:
    0 8px 20px -16px rgba(17, 63, 154, 0.22),
    inset 0 1px 0 rgba(255,255,255,.95);
  color: var(--red);
  font-size: 34px;
  line-height: 1;
  font-weight: 400;
}

@media (max-width: 699px) {
  .svc-grid {
    gap: 16px;
  }

  .svc-tile {
    grid-template-columns: 70px 1fr 38px;
    min-height: 124px;
    padding: 18px 16px 18px 14px;
    column-gap: 14px;
    border-radius: 22px;
  }

  .svc-tile::before {
    left: 14px;
    width: 70px;
    height: 70px;
  }

  .svc-tile > svg {
    width: 34px;
    height: 34px;
  }

  .svc-tile h3 {
    font-size: 17px;
    margin-bottom: 4px;
  }

  .svc-tile p {
    font-size: 13px;
    max-width: 22ch;
  }

  .svc-tile::after {
    width: 38px;
    height: 38px;
    font-size: 30px;
  }
}


/* ========== SYMPTOMS ========== */
.symptom-grid { margin-top: 40px; display: grid; gap: 14px; }
@media (min-width: 700px) { .symptom-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1000px) { .symptom-grid { grid-template-columns: repeat(3, 1fr); } }
.symptom {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.symptom-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #FFF;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--red);
}
.symptom-icon svg { width: 18px; height: 18px; }
.symptom-text { font-size: 15px; color: var(--ink); font-weight: 500; }

/* ========== PILLARS ========== */
.pillars { margin-top: 40px; display: grid; gap: 0; }
@media (min-width: 700px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar { padding: 26px 0; border-top: 1px solid var(--line); }
@media (min-width: 700px) {
  .pillar { padding: 28px 24px 28px 0; }
  .pillar:nth-child(even) { padding-left: 24px; padding-right: 0; border-left: 1px solid var(--line); }
  .pillar:nth-child(-n+2) { border-top: 1px solid var(--line); }
}
@media (min-width: 1000px) {
  .pillar { border-left: 1px solid var(--line); padding: 28px 24px; }
  .pillar:first-child { border-left: none; padding-left: 0; }
}
.pillar-num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 48px;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--red);
  margin-bottom: 12px;
}
.pillar h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: 6px;
}
.pillar p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }

/* ========== COVERAGE ========== */
.coverage-box {
  margin-top: 36px;
  padding: 32px 26px;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
  color: #FFF;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.coverage-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.12), transparent 50%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 14px);
  z-index: -1;
}
.coverage-box.blue { background: linear-gradient(135deg, var(--blue-light) 0%, var(--blue) 50%, var(--blue-deep) 100%); }
.coverage-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .82;
  margin-bottom: 10px;
}
.coverage-city {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: var(--fs-2xl);
  line-height: .95;
  letter-spacing: -.03em;
  margin-bottom: 18px;
}
.cities { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 24px; }
.city {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(6px);
}
.zip-list { margin-top: 20px; font-size: 14px; opacity: .92; line-height: 1.6; }
.zip-list strong { font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: .03em; }
.area-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 24px;
  min-height: 52px;
  border-radius: 999px;
  background: #FFF;
  color: var(--ink);
  align-self: flex-start;
  transition: transform .2s var(--ease);
  margin-top: 12px;
}
.area-cta:hover { transform: translateY(-2px); }
.area-cta .mono { font-size: 14px; }

.areas-grid { display: grid; gap: 18px; margin-top: 40px; }
@media (min-width: 800px) { .areas-grid { grid-template-columns: 1fr 1fr; gap: 22px; } }

/* ========== REVIEWS ========== */
.review-carousel { position: relative; margin-top: 40px; }
.review-carousel .review-wall { margin-top: 0; }
.review-nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFF;
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, transform .15s, opacity .15s;
}
.review-nav svg { width: 20px; height: 20px; display: block; }
.review-nav:hover:not(:disabled) { background: var(--red); color: #FFF; border-color: var(--red); }
.review-nav:disabled { opacity: .35; cursor: default; }
.review-nav--prev { left: -22px; }
.review-nav--next { right: -22px; }
@media (min-width: 1000px) { .review-nav { display: inline-flex; } }
.review-wall {
  margin-top: 40px;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 6px;
  scroll-padding-left: 0;
}
.review-wall::-webkit-scrollbar { display: none; }
.review {
  flex: 0 0 86%;
  scroll-snap-align: start;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 22px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 700px) { .review { flex: 0 0 calc(50% - 7px); } }
@media (min-width: 1000px) {
  .review-wall { gap: 18px; }
  .review { flex: 0 0 calc(33.333% - 12px); }
}
.review.featured {
  background: linear-gradient(160deg, var(--red) 0%, var(--red-deep) 100%);
  border-color: var(--red);
  color: #FFF;
}
.stars { display: inline-flex; gap: 2px; color: var(--red); }
.review.featured .stars { color: #FFF; }
.stars svg { width: 14px; height: 14px; }
.review-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.review-source { display: inline-flex; align-items: center; gap: 6px; }
.review-source .g-mark { width: 16px; height: 16px; display: block; }
.review.featured .review-source { background: #FFF; border-radius: 50%; padding: 4px; }
.review.featured .review-source .g-mark { width: 14px; height: 14px; }
.review p { font-size: 15px; line-height: 1.5; font-weight: 500; flex-grow: 1; }
.review-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.review.featured .review-meta { border-top-color: rgba(255,255,255,.2); }
.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 14px;
}
.review.featured .avatar { background: rgba(255,255,255,.22); color: #FFF; }
.review-name { font-weight: 600; }
.review-city { color: var(--muted); font-size: 12px; }
.review.featured .review-city { color: rgba(255,255,255,.75); }

/* ========== FAQ ========== */
.faq-list { margin-top: 36px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  text-align: left;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--ink);
}
@media (min-width: 700px) { .faq-q { font-size: 20px; padding: 26px 0; } }
.faq-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #FFF;
  color: var(--ink);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: var(--red);
  color: #FFF;
  border-color: var(--red);
}
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-a-inner {
  padding: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 72ch;
}

/* ========== FINAL CTA ========== */
.final {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
  color: #FFF;
  position: relative;
  overflow: hidden;
}
.final::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 60% 50% at 18% 12%, rgba(255,255,255,.08), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 44px);
  pointer-events: none;
}
.final .wrap { position: relative; z-index: 1; }
.final h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: var(--fs-2xl);
  line-height: .92;
  letter-spacing: -.035em;
  max-width: 20ch;
  color: #FFF;
}
@media (min-width: 700px) { .final h2 { font-size: var(--fs-3xl); } }
.final h2 .under {
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-underline-offset: 8px;
  text-decoration-color: rgba(255,255,255,.55);
}
.final-sub { margin-top: 20px; font-size: var(--fs-md); max-width: 48ch; color: rgba(255,255,255,.88); }
.final-cta { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 520px) { .final-cta { flex-direction: row; } }
.final-note {
  margin-top: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
}

/* Final CTA grid + live map */
.final-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
@media (min-width: 900px) { .final-grid { grid-template-columns: 1.15fr .85fr; gap: 40px; } }
.final-text { min-width: 0; }
.final-legend { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 18px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.final-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.final-legend .dot-palm    { background: #FBBF24; box-shadow: 0 0 0 2px rgba(251,191,36,.35); }
.final-legend .dot-broward { background: #93C5FD; box-shadow: 0 0 0 2px rgba(147,197,253,.35); }
.final-legend .dot-miami   { background: #fff;    box-shadow: 0 0 0 2px rgba(255,255,255,.25); }

.final-map {
  position: relative;
  height: 520px;
  width: 100%;
  align-self: stretch;
  border-radius: 18px;
  overflow: hidden;
  background: #f1ece4;
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 0 0 1px rgba(255,255,255,.22),
    0 30px 60px -22px rgba(0,0,0,.55),
    0 10px 22px -10px rgba(0,0,0,.30);
}
#coverage-map { width: 100%; height: 100%; }
.final-map .leaflet-container { background: #f1ece4 !important; font-family: 'JetBrains Mono', monospace; }
.final-map::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), inset 0 -90px 90px -60px rgba(0,0,0,.18);
}

/* Modern overlay (glass UI on top of map) */
.cmap-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 500; }
.cmap-live {
  position: absolute; top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 11px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #0e1015;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(14,16,21,.10);
  border-radius: 999px;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.25);
}
.cmap-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 0 rgba(34,197,94,.6);
  animation: cmapLive 1.8s ease-out infinite;
}
@keyframes cmapLive {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.cmap-stats {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 12px 14px;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(14,16,21,.08);
  border-radius: 12px;
  box-shadow: 0 12px 28px -14px rgba(0,0,0,.30);
}
.cmap-stat { display: flex; flex-direction: column; gap: 2px; }
.cmap-stat + .cmap-stat { border-left: 1px solid rgba(14,16,21,.08); padding-left: 12px; }
.cmap-stat-num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 22px; line-height: 1;
  color: #0e1015;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.cmap-stat-num i { font-style: normal; font-size: 13px; font-weight: 700; color: #6B7280; margin-left: 1px; }
.cmap-stat-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: #6B7280;
}

/* County label chips on the map */
.cmap-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  font-weight: 700;
  color: #0e1015;
  background: rgba(255,255,255,.92);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(14,16,21,.10);
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.18);
  white-space: nowrap;
  transform: translateX(-50%);
}
.cmap-airport {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  color: #0e1015;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(14,16,21,.20);
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.20);
}
.cmap-truck {
  position: relative;
  width: 36px;
  height: 36px;
  transition: transform .25s ease;
}
.cmap-truck:hover { transform: scale(1.15); z-index: 1000; }
.cmap-truck-pin {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ff6b78 0%, #ef3340 48%, #b8101e 100%);
  border: 2px solid #fff;
  box-shadow:
    0 6px 14px -3px rgba(184,16,30,.55),
    0 2px 4px rgba(0,0,0,.28),
    inset 0 -2px 4px rgba(0,0,0,.18),
    inset 0 1px 1px rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmap-truck-pin svg {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
.cmap-truck-pulse {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: rgba(239,51,64,.32);
  animation: cmapPulse 2.4s ease-out infinite;
  animation-delay: var(--d, 0s);
  pointer-events: none;
}
.cmap-truck-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(239,51,64,.55);
  animation: cmapPulseRing 2.4s ease-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes cmapPulse {
  0%   { transform: scale(.7); opacity: .9; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes cmapPulseRing {
  0%   { transform: scale(.7); opacity: 1; }
  100% { transform: scale(2.1); opacity: 0; }
}

@media (max-width: 899px) {
  .final-map { height: 380px; border-radius: 14px; }
  .cmap-stats { padding: 10px 12px; }
  .cmap-stat-num { font-size: 18px; }
  .cmap-stat-lbl { font-size: 8.5px; }
}

/* ========== FOOTER ========== */
.foot { background: var(--bg-dark); color: #F4F5F8; padding: 56px 0 24px; }
.foot-grid { display: grid; gap: 36px; }
@media (min-width: 800px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot-brand img { height: 56px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.foot-brand p { margin-top: 16px; font-size: 14px; color: #9CA0AB; line-height: 1.55; max-width: 36ch; }
.foot-col h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8B8F9C;
  margin-bottom: 14px;
  font-weight: 500;
}
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.foot-col a { font-size: 14px; color: #C8CBD4; transition: color .2s var(--ease); }
.foot-col a:hover { color: var(--red); }
.foot-col li { font-size: 14px; color: #C8CBD4; }
.hours-line {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #C8CBD4;
}
.hours-line span:last-child {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #FFF;
}
.foot-bottom {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: #8B8F9C;
}
@media (min-width: 700px) { .foot-bottom { flex-direction: row; justify-content: space-between; } }

/* ========== STICKY CALL BAR ========== */
.sticky-call {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  display: flex;
  gap: 10px;
  padding: 8px;
  background: #FFF;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  box-shadow: 0 20px 50px -10px rgba(14,16,21,.25);
}
.sticky-call .btn { flex: 1; min-height: 54px; border-radius: 999px; font-size: 15px; }
.sticky-call .btn-outline { border-width: 1.5px; }
@media (min-width: 900px) { .sticky-call { display: none; } }
.hero-photo {

  position: relative !important;

  overflow: hidden !important;

  aspect-ratio: 3 / 4.25 !important;

}


.hero-photo img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  object-position: center top !important;

}

.hero-photo img[src*="tech-refrigerator"] {
  object-position: center center !important;
}
.hero-photo img[src*="team-wide"] {
  object-position: center 20% !important;
}

.hero-photo::after {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  background: linear-gradient(

    to bottom,

    rgba(0,0,0,0.00) 0%,

    rgba(0,0,0,0.05) 34%,

    rgba(0,0,0,0.45) 63%,

    rgba(0,0,0,0.92) 100%

  ) !important;

  z-index: 1 !important;

  pointer-events: none !important;

}

.hero-photo .photo-overlay {

  position: absolute !important;

  left: 24px !important;

  right: 24px !important;

  bottom: 28px !important;

  z-index: 5 !important;

}

.hero-photo .photo-caption {

  background: transparent !important;

  color: #fff !important;

  max-width: 100% !important;

}

.hero-photo .photo-kicker {

  display: none !important;

  background: #ef3340 !important;

  color: #fff !important;

  padding: 7px 13px !important;

  border-radius: 999px !important;

  font-size: 13px !important;

  line-height: 1 !important;

  font-weight: 900 !important;

  text-transform: uppercase !important;

  margin-bottom: 14px !important;

}

.hero-photo .photo-title {

  color: #fff !important;

  font-size: 54px !important;

  line-height: 0.9 !important;

  font-weight: 900 !important;

  text-transform: uppercase !important;

  letter-spacing: -2px !important;

}

.hero-photo .photo-title span {

  color: #ef3340 !important;

}

.hero-photo .photo-subtitle {

  display: block !important;

  margin-top: 6px !important;

  color: #fff !important;

  font-size: 24px !important;

  line-height: 1.12 !important;

  font-weight: 900 !important;

}

.hero-photo .photo-subtitle::after {

  content: "LICENSED • INSURED • LOCAL EXPERTS";

  display: table;

  background: #ef3340;

  color: #fff;

  font-family: 'JetBrains Mono', monospace;

  font-size: 11px;

  letter-spacing: .14em;

  text-transform: uppercase;

  padding: 7px 13px;

  margin-top: 8px;

  border-radius: 999px;

  line-height: 1;

  font-weight: 700;

}

.hero-photo .photo-area {

  display: block !important;

  margin-top: 10px !important;

  color: #fff !important;

  font-size: 18px !important;

  line-height: 1.25 !important;

  font-weight: 700 !important;

}

@media (max-width: 1023px) {
  .hero-photo .photo-area { display: none !important; }
}

@media (max-width: 700px) {

  .hero-photo {

    aspect-ratio: 1 / 1 !important;

  }

  .hero-photo .photo-overlay {

    left: 24px !important;

    right: 20px !important;

    bottom: 14px !important;

  }

  .hero-photo img {

    object-position: center 65% !important;

  }

  .hero-photo .photo-kicker {

    font-size: 11px !important;

    padding: 7px 12px !important;

    margin-bottom: 13px !important;

  }

  .hero-photo .photo-title {

    font-size: 36px !important;

    line-height: 0.9 !important;

    letter-spacing: -1.2px !important;

  }

  .hero-photo .photo-subtitle {

    font-size: 18px !important;

    line-height: 1.12 !important;

    margin-top: 11px !important;

  }

  .hero-photo .photo-subtitle::after {

    font-size: 9px !important;

    padding: 6px 11px !important;

    margin-top: 7px !important;

  }

  .hero-photo .photo-area {

    font-size: 14px !important;

    line-height: 1.22 !important;

    margin-top: 14px !important;

  }

}

@media (min-width: 1024px) {
  .hero-photo { aspect-ratio: auto !important; height: 100% !important; min-height: 0 !important; }
  .hero-photo img { position: absolute !important; inset: 0 !important; object-position: center bottom !important; }
  .hero-photo--city {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: start !important;
    justify-self: stretch !important;
  }
  .hero-photo--city img { position: absolute !important; inset: 0 !important; object-position: center 30% !important; }
}
.hero-photo--city {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  align-self: start !important;
}

/* ========== BLOG ========== */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 32px;
}
@media (min-width: 760px)  { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -24px rgba(14,16,21,.18);
  border-color: rgba(230,57,70,.35);
}
.blog-card-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-2); }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.blog-card:hover .blog-card-img img { transform: scale(1.04); }
.blog-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card-meta {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.blog-card-meta .dot-sep { opacity: .6; }
.blog-card-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 24px; line-height: 1.1;
  letter-spacing: -.02em; color: var(--ink); margin: 0;
}
.blog-card-excerpt { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0; flex: 1; }
.blog-card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--red); font-weight: 700; font-size: 14px;
  margin-top: 6px;
}
.blog-card-cta svg { width: 14px; height: 14px; }

/* Article page */
.blog-post { padding: 0 0 64px; }
.blog-post-header { padding: 24px 0 28px; max-width: 760px; }
.blog-post-header .blog-card-meta { margin-bottom: 16px; }
.blog-post-header h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 5.4vw, 56px);
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0 0 18px;
}
.blog-post-lede {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.blog-post-hero {
  margin: 8px 0 40px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-2);
}
.blog-post-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
@media (min-width: 760px) {
  .blog-post-hero { border-radius: 22px; max-width: 1080px; margin-left: auto; margin-right: auto; }
}
.blog-post-body {
  max-width: 720px;
  font-size: 18px;
  line-height: 1.72;
  color: var(--ink);
}
.blog-post-body p { margin: 0 0 22px; }
.blog-post-body h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 44px 0 14px;
  color: var(--ink);
}
.blog-post-body h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  margin: 32px 0 12px;
  color: var(--ink);
}
.blog-post-body ul, .blog-post-body ol { margin: 0 0 22px; padding-left: 22px; }
.blog-post-body li { margin: 0 0 8px; }
.blog-post-body a { color: var(--red); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.blog-post-body a:hover { text-decoration-thickness: 2px; }
.blog-post-body blockquote {
  border-left: 3px solid var(--red);
  margin: 28px 0;
  padding: 4px 0 4px 20px;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.55;
}
.blog-post-body code {
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .92em;
}
.blog-post-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 36px 0;
}

.blog-related {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
  margin-top: 28px;
}
@media (min-width: 760px) { .blog-related { grid-template-columns: repeat(2, 1fr); } }
.blog-related-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px 28px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.blog-related-card:hover { border-color: rgba(230,57,70,.4); transform: translateY(-2px); }
.blog-related-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.blog-related-card h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: 20px; line-height: 1.2;
  margin: 0; color: var(--ink);
}
.blog-related-cta { color: var(--red); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.blog-related-cta svg { width: 13px; height: 13px; }


/* ========== HOW IT WORKS ========== */
.howit { padding: 56px 0 64px; background: var(--bg); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.howit::before {
  content: "";
  position: absolute;
  top: -120px; right: -140px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(37,99,191,.07), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.howit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0 28px;
  position: relative;
}
.howit-head-text { max-width: 640px; }
.howit-head .eyebrow { margin-bottom: 10px; }
.howit-head h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 10px;
}
.howit-sub {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
}
.howit-gear { flex-shrink: 0; position: relative; width: 140px; height: 110px; }
.howit-gear svg { display: block; position: absolute; }
.howit-gear .gear-big { top: 0; left: 0; filter: drop-shadow(0 6px 16px rgba(37,99,191,.20)); }
.howit-gear .gear-small { bottom: -4px; right: 0; filter: drop-shadow(0 4px 12px rgba(239,51,64,.22)); }
.gear-spin { transform-origin: 12px 12px; animation: gear-rotate 18s linear infinite; }
.gear-spin-rev { animation: gear-rotate-rev 12s linear infinite; }
@keyframes gear-rotate { to { transform: rotate(360deg); } }
@keyframes gear-rotate-rev { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .gear-spin, .gear-spin-rev { animation: none; } }

.howit-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(15,15,15,.04);
  overflow: hidden;
}
.howit-bar .howit-step {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 28px;
  border-right: 1px solid var(--line);
  position: relative;
  transition: background .25s ease;
}
.howit-bar .howit-step:hover { background: var(--bg-2, #f7f7f5); }
.howit-bar .howit-step:last-child { border-right: none; }
.howit-bar .howit-num {
  flex-shrink: 0;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  background: var(--red);
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(239,51,64,.28);
}
.howit-bar .howit-text { display: flex; flex-direction: column; gap: 3px; line-height: 1.3; }
.howit-bar .howit-text b { color: var(--ink); font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.howit-bar .howit-text span { color: var(--muted); font-size: 14px; }

@media (max-width: 900px) {
  .howit { padding: 36px 0 40px; }
  .howit-head { display: block; position: relative; padding-bottom: 22px; padding-right: 76px; }
  .howit-head h3 { font-size: 22px; }
  .howit-sub { font-size: 14px; }
  .howit-gear { position: absolute; top: 0; right: 0; width: 70px; height: 56px; }
  .howit-gear .gear-big { width: 46px; height: 46px; top: 0; left: 0; }
  .howit-gear .gear-small { width: 30px; height: 30px; bottom: 0; right: 0; }
  .howit-bar { grid-template-columns: 1fr; }
  .howit-bar .howit-step { border-right: none; border-bottom: 1px solid var(--line); padding: 18px 20px; }
  .howit-bar .howit-step:last-child { border-bottom: none; }
}