/* ---------- Tokens / Base ---------- */ :root{ --bg:#0b0c10; --fg:#0d1b2a;
--muted:#516072; --acc:#259492; --acc2:#3ed4be; --surface:#ffffff;
--line:#e6ebf2; } *{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe
UI,Roboto,Helvetica,Arial,sans-serif;color:var(--fg);background:#fff;} /* Layout
helpers */ .wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.section-pad{padding:56px 0} @media(max-width:700px){.section-pad{padding:36px
0}} /* Headings */
h1,h2,h3{font-family:'Montserrat',Inter,system-ui,Arial,sans-serif;font-weight:900;letter-spacing:.2px}
h2{font-size:28px;margin:0 0 16px} h3{font-size:18px;margin:0 0 6px} /* Header +
nav (sticky, light) */
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px
solid #e8edf3;padding:20px}
.header-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:14px;font-weight:700;font-size:1.2rem;text-decoration:none;color:var(--fg)}
.logo{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--acc),var(--acc2))}
.logo img{width:22px;height:22px;display:block} #site-nav
a{color:var(--fg);text-decoration:none;margin-left:18px;padding:6px
10px;border-radius:8px;font-weight:600} #site-nav a:hover,#site-nav
a:focus{background:var(--acc2);color:#06101d}
.nav-toggle{display:none;border:0;background:none} .nav-backdrop{display:none}
@media(max-width:700px){
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;padding:8px;border-radius:9px;background:rgba(47,168,159,.14)}
#site-nav{position:absolute;top:56px;left:0;right:0;display:flex;flex-direction:column;gap:0;padding:12px
0;border-bottom:1px solid
#e8edf3;background:#fff;max-height:0;opacity:0;overflow:hidden;transition:max-height
.25s,opacity .25s} #site-nav.open{max-height:500px;opacity:1} #site-nav
a{margin:0;padding:15px 24px;border-bottom:1px solid #eef2f6} #site-nav
a:last-child{border-bottom:none}
.nav-backdrop.open{display:block;position:fixed;inset:0;background:rgba(17,24,33,.55)}
} /* Service tabs (underline style) */
.service-tabs{display:flex;gap:28px;justify-content:center;padding:6px 0 0}
.service-tabs
a{position:relative;color:var(--fg);text-decoration:none;font-weight:700;opacity:.9;padding:6px
0} .service-tabs a:hover,.service-tabs a:focus-visible{opacity:1} .service-tabs
a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:transparent;transform:scaleX(0);transform-origin:left;transition:transform
.18s,background .18s} .service-tabs a:hover::after,.service-tabs
a[aria-current="page"]::after{background:linear-gradient(90deg,var(--acc),var(--acc2));transform:scaleX(1)}
/* Buttons */
a.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px
20px;border-radius:12px;font-weight:700;text-decoration:none} .btn{border:1px
solid #cbd5e1;background:#fff;color:var(--fg)}
.btn.primary{background:linear-gradient(90deg,#3ed4be 0%, #ffb357
100%);border:none;color:#06101d;box-shadow:0 6px 24px rgba(255,179,87,.25)}
.btn.primary:hover{filter:brightness(1.07)} /* CTA row */
.cta-row{display:flex;gap:22px;flex-wrap:wrap;align-items:center;justify-content:center;margin:18px
0 6px} /* Soft alt section for depth */
.alt-soft{background:linear-gradient(180deg,#fff 0%,#f7fafc 100%);border-top:1px
solid #eef2f6;border-bottom:1px solid #eef2f6} /* Cards + grid */
.grid{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.card{grid-column:span 4;background:#fff;border:1px solid
var(--line);border-radius:14px;padding:18px;box-shadow:0 10px 30px
rgba(16,24,40,.06)} .card h3 + p{color:#516072}
@media(max-width:900px){.card{grid-column:span 12}} /* ---------- Homepage
(light) ---------- */ .home-light{color:var(--fg);background:#fff}
.display{font-family:'Montserrat',Inter,system-ui,Arial,sans-serif;font-weight:900;font-size:clamp(2.3rem,4.8vw,3.3rem);line-height:1.05;margin:10px
0 8px} .hero--light{padding:28px 0 12px} .hero--light .hero-bg{display:none}
.hero-text{text-align:center;max-width:820px;margin:0 auto} .hero-text
.lead{font-size:1.15rem;color:#213246;margin:0 0 4px} .hero-text
.sublead{font-size:.98rem;color:#64748b;margin:0 0 12px} /* Hero collage (3 up)
*/
.hero-collage{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0
auto 18px} .hero-collage .tile{aspect-ratio:4/3;border:1px solid
var(--line);border-radius:14px;overflow:hidden;background:#f8fafc;box-shadow:0
8px 24px rgba(16,24,40,.06)} .hero-collage .tile
img{width:100%;height:100%;object-fit:cover;display:block} .hero-collage
.tile--center{position:relative} .hero-collage .tile--center
.tick{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:16px;display:grid;place-items:center;font-size:40px;font-weight:900;color:#fff;background:rgba(13,27,42,.55);backdrop-filter:blur(4px)}
/* Why cards (dark-on-light) */ .card-why
.ico{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:#ecfeff;border:1px
solid #c3f3f4;color:#0b7b7a;font-weight:800;margin-bottom:6px} /* Before/After
(elevated) */ .ba{position:relative;border:1px solid
var(--line);border-radius:12px;overflow:hidden;box-shadow:0 10px 24px
rgba(16,24,40,.08);margin:12px 0 18px} .ba>img{display:block;width:100%} .ba
.after{position:absolute;inset:0;overflow:hidden} .ba .after
img{position:absolute;top:0;left:0;width:100%} .ba
input[type=range]{position:absolute;left:0;right:0;bottom:0;width:100%;height:32px;-webkit-appearance:none;background:transparent;outline:none}
.ba
input[type=range]::-webkit-slider-runnable-track{height:3px;background:#d7dee8}
.ba
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:3px
solid var(--acc);margin-top:-8px;box-shadow:0 0 0 4px rgba(37,148,146,.25)} /*
Footer */ footer{padding:28px 20px;border-top:1px solid #e8edf3;color:#516072}
/* ===== HOMEPAGE TUNE-UP: match reference collage + type + cards ===== */ /* 1)
Wider hero container so the 3 tiles feel substantial */ .hero--light .wrap {
max-width: 1180px; } /* 2) Collage: larger tiles, wider gaps, bigger check badge
*/ @media (min-width: 960px){ .hero-collage { gap: 22px; margin-bottom: 28px; }
.hero-collage .tile { aspect-ratio: 4 / 3; border-radius: 16px; } .hero-collage
.tile img { object-position: center; } } .hero-collage .tile--center .tick{
width: 84px; height: 84px; border-radius: 18px; font-size: 44px; } /* 3)
Headline: larger + all caps like the mock, with tighter rhythm */ .hero--light
.display{ font-size: clamp(2.6rem, 5vw, 3.6rem); text-transform: uppercase;
letter-spacing: .5px; margin: 6px 0 8px; } .hero--light .lead { font-size:
1.14rem; margin-top: 8px; } .hero--light .cta-row { margin-top: 22px; } /* 4)
Why Choose Us cards: dark, high-contrast like the screenshot */ #why .grid {
gap: 20px; } #why .card{ background: #0b1220; border: 1px solid #0f1b2e; color:
#eaf2ff; box-shadow: 0 10px 30px rgba(2,12,33,.14); } #why .card h3 { color:
#f1f5f9; } #why .card p { color: #c9d4e3; } #why .card .ico{ width: 38px;
height: 38px; border-radius: 9px; display: grid; place-items: center;
background: #0e1a2c; border: 1px solid #19304e; color:#7debd5; font-weight: 800;
} /* 5) Before/After: same max width as hero + slightly more air */
#before-after .wrap { max-width: 1180px; } .ba-elevated { margin: 16px 0 22px; }
/* 6) Section rhythm: a touch tighter so fold-to-fold feels intentional */
.section-pad { padding: 48px 0; } /* Upload CTA = match dark Why cards */
.home-light .cta-row a.btn[href*="dropbox.com"]{ background:#0b1220; /* deep
slate */ color:#eaf2ff; border:1px solid #19304e; box-shadow:0 10px 30px
rgba(2,12,33,.18); } .home-light .cta-row a.btn[href*="dropbox.com"]:hover{
border-color:#2aa39a; box-shadow:0 14px 38px rgba(37,148,146,.28);
transform:translateY(-1px); } /* Why cards = dark, high-contrast, square icon
badge */ #why .card{ background:#0b1220; border:1px solid #0f1b2e;
color:#eaf2ff; box-shadow:0 10px 30px rgba(2,12,33,.14); } #why .card h3{
color:#f1f5f9; letter-spacing:.25px; margin-bottom:6px } #why .card p{
color:#c9d4e3 } #why .card .ico{ width:40px; height:40px; border-radius:10px;
display:grid; place-items:center; background:#0e1a2c; border:1px solid #19304e;
color:#ffffff; margin-bottom:8px; } #why .card .ico svg{ display:block; } /* ===
Hero collage tune-up (uniform size, match reference) === */ .hero-collage {
grid-template-columns: repeat(3, 1fr); gap: 20px; /* more space between tiles */
max-width: 1240px; /* wider container */ } .hero-collage .tile { aspect-ratio: 3
/ 4; /* taller portrait-like frames */ border-radius: 18px; overflow: hidden;
border: 1px solid #e6ebf2; background: #f8fafc; box-shadow: 0 10px 28px rgba(16,
24, 40, .08); } .hero-collage .tile img { width: 100%; height: 100%; object-fit:
cover; object-position: center; /* keep subject centered */ display: block; }
.hero-collage .tile--center .tick { width: 90px; height: 90px; border-radius:
20px; font-size: 48px; } /* === Hero collage tighter spacing === */
.hero-collage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
/* reduce spacing between images */ max-width: 960px; /* narrower container to
pull them closer */ margin: 0 auto 18px; /* keep centered */ } .hero-collage
.tile { aspect-ratio: 3 / 4; /* keep consistent height/shape */ border-radius:
16px; overflow: hidden; border: 1px solid #e6ebf2; background: #f8fafc;
box-shadow: 0 8px 20px rgba(16, 24, 40, .08); } .hero-collage .tile img { width:
100%; height: 100%; object-fit: cover; display: block; } /* === Force hero
collage to be a tight 3-up cluster (like the mock) === */ .hero--light
.hero-collage{ /* use flex so spacing is 100% predictable */ display:flex
!important; justify-content:center; align-items:center; gap:12px; /* distance
BETWEEN photos */ max-width: calc(3 * 280px + 2 * 12px); /* total cluster width
*/ margin: 0 auto 22px auto; /* center the cluster */ } .hero--light
.hero-collage .tile{ width:280px; /* each photo width */ height:370px; /* each
photo height (tall, like ref) */ border-radius:18px; overflow:hidden; border:1px
solid #e6ebf2; background:#f8fafc; box-shadow:0 10px 28px rgba(16,24,40,.10); }
.hero--light .hero-collage .tile img{ width:100%; height:100%; object-fit:cover;
object-position:center; display:block; } /* center badge scales with the taller
tile */ .hero--light .hero-collage .tile--center .tick{ width:88px; height:88px;
border-radius:20px; font-size:46px; } /* At 900px and below, switch to mobile
nav */ @media (max-width: 900px) { #site-nav { flex-direction: column; gap: 0; }
} /* === HERO COLLAGE — fixed size + ultra-tight spacing === */ .hero--light
.hero-collage{ display:flex !important; /* override any grid */
justify-content:center; align-items:center; gap:8px !important; /* distance
BETWEEN photos (adjust if needed) */ max-width: calc(3 * 300px + 2 * 8px)
!important; /* total width = 3 tiles + 2 gaps */ margin: 0 auto 24px auto
!important; /* center the cluster */ padding: 0 !important; } .hero--light
.hero-collage figure, .hero--light .hero-collage .tile{ margin:0 !important; /*
nuke default
<figure>
  margins */ padding:0 !important; border:0; flex:0 0 300px !important; /* TILE
  WIDTH (match your reference) */ width:300px !important; height:400px
  !important; /* TILE HEIGHT (match your reference) */ border-radius:18px;
  overflow:hidden; background:#f8fafc; border:1px solid #e6ebf2; box-shadow:0
  8px 18px rgba(16,24,40,.10); /* subtle so the gap still looks tight */ }
  .hero--light .hero-collage .tile img{ width:100% !important; height:100%
  !important; object-fit:cover !important; object-position:center !important;
  display:block; } /* ✓ badge stays proportional */ .hero--light .hero-collage
  .tile--center .tick{ width:84px; height:84px; border-radius:20px;
  font-size:46px; } /* Optional: stack cleanly on small screens */ @media
  (max-width: 860px){ .hero--light .hero-collage{ flex-direction:column;
  gap:10px !important; max-width:320px !important; } .hero--light .hero-collage
  .tile{ width:100% !important; height:420px !important; } } /* ---------- ALIGN
  HERO COLLAGE EDGES WITH GRID ---------- */ /* Use the same content width as
  your .wrap (update if you ever change it) */ :root{ --wrap-width: 1080px; /*
  your .wrap max width */ --hero-gap: 12px; /* space between the 3 photos */ }
  .hero--light .wrap{ max-width: var(--wrap-width); } .hero--light
  .hero-collage{ display:flex !important; justify-content:center;
  align-items:center; gap: var(--hero-gap) !important; max-width:
  var(--wrap-width) !important; /* flush to the grid edges */ width: 100%;
  margin: 0 auto 24px !important; padding: 0 !important; } .hero--light
  .hero-collage .tile{ /* Each tile fills exactly 1/3 of the wrap minus the 2
  gaps */ flex: 0 0 calc((var(--wrap-width) - 2*var(--hero-gap)) / 3)
  !important; width: calc((var(--wrap-width) - 2*var(--hero-gap)) / 3)
  !important; height: 400px !important; /* keep your preferred height */ margin:
  0 !important; border-radius: 18px; overflow: hidden; border: 1px solid
  #e6ebf2; background: #f8fafc; box-shadow: 0 8px 18px rgba(16,24,40,.10); }
  .hero--light .hero-collage .tile img{ width:100% !important; height:100%
  !important; object-fit:cover !important; object-position:center !important;
  display:block; } /* Badge stays proportional */ .hero--light .hero-collage
  .tile--center .tick{ width: 84px; height: 84px; border-radius: 20px;
  font-size: 46px; } /* ---------- HEADLINE SPACING LIKE THE REFERENCE
  ---------- */ .hero--light .display{ line-height: 1.20; /* more vertical
  breathing between lines */ letter-spacing: .4px; /* touch more tracking for
  the big type */ margin: 6px 0 12px; /* add a bit of air below */ } /* Subhead
  spacing nudge to echo the mock */ .hero--light .lead{ margin-top: 10px; }
  .hero--light .sublead{ margin-top: 6px; } /* === HERO COLLAGE: match width to
  grid below === */ .hero--light .hero-collage { display: flex; justify-content:
  center; gap: 14px; /* keep small spacing */ max-width: 1080px; /* align with
  .wrap + cards */ margin: 0 auto 24px auto; } .hero--light .hero-collage .tile
  { flex: 1 1 0; height: 420px; /* taller like your mock */ border-radius: 14px;
  overflow: hidden; border: 1px solid #e6ebf2; background: #f8fafc; box-shadow:
  0 8px 24px rgba(16,24,40,.06); } .hero--light .hero-collage .tile img { width:
  100%; height: 100%; object-fit: cover; } /* Center tick stays centered on
  taller image */ .hero--light .hero-collage .tile--center .tick { width: 88px;
  height: 88px; font-size: 46px; } /* === HERO TEXT SPACING === */ .hero--light
  h1.display { line-height: 1.25; /* looser, more airy */ margin-bottom: 14px; }
  .hero--light .lead { font-size: 1.2rem; line-height: 1.6; /* more vertical
  space */ margin-bottom: 10px; } .hero--light .sublead { font-size: 1rem;
  line-height: 1.55; margin-bottom: 16px; } /* === 1) Collage aligned to the
  same content width as cards === */ .hero--light .wrap { max-width: 1200px;
  padding-left: 20px; padding-right: 20px; } /* matches your .wrap */
  .hero--light .hero-collage{ display:flex !important; width:100% !important; /*
  fill the same inner width as cards */ max-width:100% !important; /* prevent a
  narrower custom max-width from misaligning edges */ gap:14px; /* space between
  photos */ margin:0 auto 24px auto; } .hero--light .hero-collage .tile{ flex:0
  0 calc((100% - 2*14px)/3); /* 3 equal tiles inside the wrap width */
  height:440px; /* taller, per your request */ border-radius:14px;
  overflow:hidden; border:1px solid #e6ebf2; background:#f8fafc; box-shadow:0
  8px 24px rgba(16,24,40,.06); } .hero--light .hero-collage .tile img{
  width:100%; height:100%; object-fit:cover; object-position:center; }
  .hero--light .hero-collage .tile--center .tick{ width:88px; height:88px;
  border-radius:20px; font-size:46px; } /* === 2) Sub-headline contrast + line
  spacing === */ .hero--light .sublead{ color:#334155; /* darker/slightly
  desaturated slate */ opacity:1; /* ensure no inherited opacity */
  font-weight:500; line-height:1.55; } /* === Enlarge Why Choose Us icons === */
  #why .card .ico { width: 64px; /* was 38px */ height: 64px; /* was 38px */
  border-radius: 14px; /* slightly bigger rounding */ font-size: 32px; /* for
  emoji icons */ } #why .card .ico svg { width: 32px; /* scale SVG icons */
  height: 32px; } /* === Why Choose Us: larger icons + stronger title hierarchy
  === */ #why .card .ico { width: 80px; /* bigger square */ height: 80px;
  border-radius: 16px; margin-bottom: 14px; /* more space below icon */
  font-size: 42px; /* for emoji icons */ } #why .card .ico svg { width: 42px; /*
  scale up inline SVGs */ height: 42px; } #why .card h3 { font-size: 1.35rem; /*
  larger than body, stands out */ font-weight: 800; /* bold, closer to mock */
  margin-bottom: 8px; letter-spacing: 0.3px; text-transform: uppercase; /*
  stronger visual hierarchy */ } #why .card p { font-size: 1rem; /* keep body
  text smaller */ line-height: 1.5; color: #c9d4e3; /* keep contrast lower than
  h3 */ } /* Fade + slide-up animation for reveal */ .reveal { opacity: 0;
  transform: translateY(30px); transition: opacity 0.9s ease, transform 0.9s
  ease; } .reveal-in { opacity: 1; transform: translateY(0); } /* Optional:
  stagger effect for grid items */ #why .card-why:nth-child(1) {
  transition-delay: 0.1s; } #why .card-why:nth-child(2) { transition-delay:
  0.25s; } #why .card-why:nth-child(3) { transition-delay: 0.4s; } /* === Why
  Choose Us: make SVG icons bold white === */ #why .card .ico svg { width: 42px;
  height: 42px; stroke: #ffffff; /* icon lines */ fill: none; /* keep them
  outline style */ } #why .card .ico svg * { stroke: #ffffff !important; fill:
  none !important; } /* === Why Choose Us: force big bold white icons === */
  #why .card .ico svg { width: 48px; /* bigger glyph */ height: 48px; stroke:
  #fff !important; /* force white lines */ stroke-width: 2.6 !important; /*
  thicker lines for "bold" look */ fill: none !important; /* keep outline style
  */ } #why .card .ico svg * { stroke: #fff !important; stroke-width: 2.6
  !important; fill: none !important; } /* Why cards — big bold white SVG icons
  */ #why .card .ico { width: 80px; height: 80px; border-radius: 16px;
  margin-bottom: 14px; display: grid; place-items: center; background:#0e1a2c;
  border:1px solid #19304e; } #why .card .ico svg, #why .card .ico svg path,
  #why .card .ico svg rect, #why .card .ico svg line, #why .card .ico svg
  polyline, #why .card .ico svg circle { stroke: #fff !important; stroke-width:
  2.8 !important; /* thicker = “bold” look */ fill: none !important;
  stroke-linecap: round !important; stroke-linejoin: round !important; } #why
  .card .ico svg { width: 48px; height: 48px; } /* === NAV LINK STYLING
  (theme-consistent) === */ /* Base links */ #site-nav a { color: #0d1b2a; /*
  dark slate text */ text-decoration: none; font-weight: 600; transition: color
  0.2s, border-color 0.2s; border-bottom: 2px solid transparent; padding: 6px
  10px; } /* Hover state: teal accent */ #site-nav a:hover, #site-nav a:focus {
  color: #259492; /* teal */ border-bottom: 2px solid #3ed4be; /* aqua underline
  */ } /* Active/current page link */ #site-nav a.active, #site-nav
  a[aria-current="page"] { color: #259492; border-bottom: 2px solid #3ed4be; }
  /* Primary CTA (Upload photos) keeps orange→teal gradient */ #site-nav
  a.btn.primary { margin-left: 12px; background: linear-gradient(90deg, #3ed4be
  0%, #ffb357 100%); color: #06101d; font-weight: 700; border: none; box-shadow:
  0 6px 24px rgba(255, 179, 87, 0.25); } #site-nav a.btn.primary:hover { filter:
  brightness(1.07); transform: translateY(-2px); box-shadow: 0 10px 32px
  rgba(255, 179, 87, 0.35); } /* Secondary CTA (e.g., Get a Quote) — ghost teal
  style */ #site-nav a.btn.secondary { margin-left: 12px; border: 1.5px solid
  #259492; color: #259492; background: transparent; font-weight: 600;
  transition: background 0.2s, color 0.2s; } #site-nav a.btn.secondary:hover {
  background: #e6fdf9; color: #0d1b2a; } /* === NAV LINKS: stronger hover/active
  states === */ #site-nav a { opacity: 1; /* ensure base is solid */ color:
  #0d1b2a; transition: color 0.2s ease, border-color 0.2s ease; } #site-nav
  a:hover, #site-nav a:focus { color: #259492; /* strong teal */ font-weight:
  700; /* bolden a bit */ text-shadow: 0 0 6px rgba(37,148,146,0.35); /* glow
  effect */ border-bottom: 2px solid #3ed4be; opacity: 1 !important; /* never
  fade */ } /* Active/current page link */ #site-nav a.active, #site-nav
  a[aria-current="page"] { color: #259492; font-weight: 700; border-bottom: 2px
  solid #3ed4be; text-shadow: 0 0 6px rgba(62,212,190,0.35); opacity: 1
  !important; } /* === NAV: kill fading + pill, make hover POP === */ header
  #site-nav a{ opacity: 1 !important; /* never faded */ background: transparent
  !important; /* no pill */ color: #0d1b2a !important; /* base text */
  border-bottom: 2px solid transparent !important; border-radius: 8px; /* keep
  subtle rounding if you like */ transition: color .2s ease, border-color .2s
  ease, text-shadow .2s ease; } /* Hover/Focus: teal text + underline + glow */
  header #site-nav a:hover, header #site-nav a:focus{ opacity: 1 !important;
  background: transparent !important; /* force no pill from other CSS */ color:
  #259492 !important; /* teal */ border-bottom-color: #3ed4be !important;/* aqua
  underline */ font-weight: 700; /* bolder */ text-shadow: 0 0 6px
  rgba(37,148,146,.35); } /* Active/current */ header #site-nav a.active, header
  #site-nav a[aria-current="page"]{ opacity: 1 !important; background:
  transparent !important; color: #259492 !important; border-bottom-color:
  #3ed4be !important; font-weight: 700; } /* Keep the Upload CTA as a button
  (still stands out) */ header #site-nav a.btn.primary{ background:
  linear-gradient(90deg,#3ed4be 0%,#ffb357 100%) !important; color:#06101d
  !important; border: none !important; box-shadow: 0 6px 24px
  rgba(255,179,87,.25); } header #site-nav a.btn.primary:hover{ filter:
  brightness(1.07); transform: translateY(-2px); box-shadow: 0 10px 32px
  rgba(255,179,87,.35); } /* Process badges */ .process-card { position:
  relative; padding-top: 18px; } .step-badge{ position:absolute; top:-12px;
  left:18px; width:36px; height:36px; border-radius:50%; display:grid;
  place-items:center; background:#0e1a2c; color:#eaf2ff; border:1px solid
  #19304e; font-weight:800; box-shadow:0 6px 18px rgba(2,12,33,.18); } /*
  Pricing cards + Pro highlight */ .pricing-card h3{ margin-bottom:4px; }
  .pricing-card .bullets{ margin-top:8px; } .pricing-card--pro{ border:2px solid
  #259492 !important; box-shadow:0 16px 40px rgba(37,148,146,.18) !important; }
  /* FAQ accordion hover */ #faq .faq-item summary{ font-weight:800;
  cursor:pointer; border-radius:10px; padding:10px 12px; transition: background
  .18s; } #faq .faq-item summary:hover{ background:#eef7f6; } /* Blog preview
  thumbnails */ #blog-preview .thumb{ display:block; border-radius:12px;
  overflow:hidden; margin-bottom:10px; border:1px solid #e6ebf2 } #blog-preview
  .thumb img{ width:100%; height:260px; object-fit:cover; display:block } /*
  Match new sections to Why Choose Us style */ .section-band { background:
  linear-gradient(180deg, #ffffff 0%, #f7fafc 100%); border-top: 1px solid
  #eef2f6; border-bottom: 1px solid #eef2f6; padding: 56px 20px; } .section-band
  .card { background: #fff; border: 1px solid #e6ebf2; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(16,24,40,.06); } /* === Dark card theme
  (identical to #why) for any band with .cards-dark === */ .cards-dark .card{
  background:#0b1220 !important; border:1px solid #0f1b2e !important;
  color:#eaf2ff !important; box-shadow:0 10px 30px rgba(2,12,33,.14) !important;
  border-radius:14px !important; } .cards-dark .card h3{ color:#f1f5f9
  !important; letter-spacing:.25px; } .cards-dark .card p{ color:#c9d4e3
  !important; } /* Process step number badge – match dark palette */ .cards-dark
  .step-badge{ background:#0e1a2c !important; color:#eaf2ff !important;
  border:1px solid #19304e !important; box-shadow:0 6px 18px rgba(2,12,33,.18)
  !important; } /* Pricing “Pro Plan” highlight stays on top of the dark card */
  .cards-dark .pricing-card--pro{ border:2px solid var(--acc) !important;
  box-shadow:0 16px 40px rgba(37,148,146,.18) !important; } /* Blog preview
  cards as dark cards too */ .cards-dark #blog-preview .card{ background:#0b1220
  !important; } .cards-dark #blog-preview .thumb{ border:1px solid #19304e
  !important; } /* FAQ details styled as dark cards */ .cards-dark #faq
  .faq-item{ background:#0b1220 !important; border:1px solid #0f1b2e !important;
  border-radius:14px !important; margin:10px 0 !important; box-shadow:0 10px
  30px rgba(2,12,33,.14) !important; overflow:hidden; } .cards-dark #faq
  .faq-item summary{ color:#f1f5f9 !important; padding:12px 14px !important;
  font-weight:800 !important; cursor:pointer; } .cards-dark #faq .faq-item p{
  color:#c9d4e3 !important; padding:0 14px 14px !important; } .cards-dark #faq
  .faq-item summary:hover{ background:#0e1a2c !important; } /* Optional: dark
  icon badge in any dark-card section */ .cards-dark .card .ico{ width:80px;
  height:80px; border-radius:16px; display:grid; place-items:center;
  background:#0e1a2c; border:1px solid #19304e; margin-bottom:14px; }
  .cards-dark .card .ico svg, .cards-dark .card .ico svg *{ stroke:#fff
  !important; stroke-width:2.8 !important; fill:none !important;
  stroke-linecap:round; stroke-linejoin:round; } /* Pricing typography + spacing
  inside dark cards */ .pricing-card h3{ margin: 0 0 8px; color:#f1f5f9
  !important; letter-spacing:.25px; } .pricing-card .price-row{ display:flex;
  align-items:flex-end; gap:6px; margin-bottom:8px; } .pricing-card .price{
  font-size: 28px; font-weight: 900; color:#f1f5f9; line-height: 1; }
  .pricing-card .unit{ font-size: 13px; color:#9fb4c9; line-height: 1.1;
  letter-spacing:.2px; } .bullets-tight{ margin-top:8px; } .bullets-tight li{
  margin:6px 0; color:#c9d4e3; } /* Buttons inside dark cards */ .cards-dark
  .pricing-card .btn.secondary{ border:1.5px solid var(--acc); color:var(--acc);
  background:transparent; } .cards-dark .pricing-card .btn.secondary:hover{
  background:#0e1a2c; color:#eaf2ff; border-color:#2aa39a; } /* Base step badge
  style */ .step-badge { background:#fff !important; font-weight:800; border:2px
  solid transparent; box-shadow:0 4px 10px rgba(0,0,0,.12); color:#0d1b2a; /*
  fallback */ } /* Step-specific colors */ #process .card:nth-child(1)
  .step-badge { border-color:#259492; /* teal */ color:#259492; } #process
  .card:nth-child(2) .step-badge { border-color:#3ed4be; /* aqua */
  color:#3ed4be; } #process .card:nth-child(3) .step-badge {
  border-color:#ffb357; /* orange */ color:#ffb357; } #process
  .card:nth-child(4) .step-badge { border-color:#334155; /* slate */
  color:#334155; } /* Allow the logo container to grow and remove the small
  square badge */ .logo{ width:auto; /* was 38px */ height:auto; /* was 38px */
  background:none; /* remove teal square (optional) */ border-radius:0; /*
  optional */ display:flex; align-items:center; padding:0; } /* Override the old
  .logo img 22px rule */ .logo img{ width:auto; height:auto; } /* neutralize
  earlier rule */ /* Size the real site logo */ .logo .site-logo{ width: 200px;
  /* pick the size you want */ height:auto; display:block; } /* Tweak spacing
  with the text “PrepReady” next to it */ .brand{ gap: 10px; } /*
  increase/decrease as you like */ /* Optional: smaller on mobile */ @media
  (max-width: 700px){ .logo .site-logo{ width: 140px; } } /* --- Header/Nav
  alignment fixes --- */ /* Let logo size itself naturally */ .logo { width:
  auto !important; height: auto !important; background: none !important; /*
  remove colored box */ border-radius: 0 !important; padding: 0 !important; } /*
  Desktop nav fixes */ #site-nav { display: flex; align-items: center; gap:
  20px; /* consistent spacing between links */ flex-wrap: nowrap; /* keep on one
  line until mobile breakpoint */ min-width: 0; /* allow flex shrink */ }
  #site-nav a { margin: 0 !important; /* remove old margin-left */ padding: 6px
  10px; white-space: nowrap; /* stop wrapping inside link text */ font-size:
  clamp(13px, 1.05vw, 16px); /* responsive text size */ } /* Prevent stretching
  in Featured Samples */ .folio { display: grid; grid-template-columns:
  repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .folio figure {
  border-radius: 12px; overflow: hidden; background: #0b1220; /* dark band
  background */ border: 1px solid #0f1b2e; box-shadow: 0 6px 18px
  rgba(0,0,0,.15); } .folio img { width: 100%; height: auto; /* keeps original
  aspect ratio */ object-fit: cover; /* crop if needed */ display: block; } /*
  Featured Samples – uniform image sizing */ .folio { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } /*
  Featured Samples – stronger pop-out effect */ .folio figure { position:
  relative; border-radius: 12px; border: 1px solid #e6ebf2; background: #fff;
  aspect-ratio: 4 / 3; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.12);
  transition: transform 0.35s ease, box-shadow 0.35s ease; } .folio img { width:
  100%; height: 100%; object-fit: cover; display: block; } /* Featured Samples –
  3D pop + tilt */ .folio{ perspective: 900px; /* gives depth for rotateX/Y */ }
  .folio figure{ position: relative; border-radius: 12px; border: 1px solid
  #e6ebf2; background: #fff; aspect-ratio: 4 / 3; overflow: hidden; box-shadow:
  0 6px 18px rgba(0,0,0,.12); transform-style: preserve-3d; will-change:
  transform, box-shadow; transition: transform .25s ease, box-shadow .25s ease;
  } /* Hover: bigger scale + deeper shadow */ .folio figure:hover { transform:
  scale(2.00); /* expand 15% instead of 5% */ box-shadow: 0 20px 50px
  rgba(0,0,0,.35); z-index: 10; } /* Fallback (and for reduced motion) – scale
  only */ @media (prefers-reduced-motion: reduce){ .folio figure:hover{
  transform: scale(1.05); box-shadow: 0 12px 28px rgba(0,0,0,.25); } } .folio
  img{ width:100%; height:100%; object-fit:cover; display:block; } /* =====
  Featured Samples — BIG pop-out ===== */ .folio{ position: relative; overflow:
  visible; /* allow cards to expand outside the grid */ perspective: 1000px; /*
  depth for 3D tilt if you keep it */ } .folio figure{ position: relative;
  border-radius: 12px; border: 1px solid #e6ebf2; background: #fff;
  aspect-ratio: 4 / 3; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.12);
  transform-origin: center center; /* expand from center */ transform-style:
  preserve-3d; will-change: transform, box-shadow; transition: transform .35s
  ease, box-shadow .35s ease; z-index: 0; /* default layer */ } .folio img{
  width:100%; height:100%; object-fit:cover; display:block; } /* HOVER: go big
  */ .folio figure:hover{ transform: scale(1.75); /* adjust: 1.6–2.0 for huge */
  box-shadow: 0 28px 80px rgba(0,0,0,.45); z-index: 100; /* rise above neighbors
  */ } /* Optional: keep your cursor-follow tilt */ .folio figure:hover{ /* if
  you’re running the JS tilt, it will append rotateX/Y; this scale stacks */ }
  /* Safety: dial back on smaller viewports */ @media (max-width: 1200px){
  .folio figure:hover{ transform: scale(1.55); } } @media (max-width: 900px){
  .folio figure:hover{ transform: scale(1.35); } } @media (max-width: 600px){
  .folio figure:hover{ transform: scale(1.18); } } /* Featured Samples —
  container allows expansion */ .folio{ position:relative; overflow:visible;
  perspective:1000px; } .folio figure{ position:relative; border-radius:12px;
  border:1px solid #e6ebf2; background:#fff; aspect-ratio:4/3; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.12); transform-origin:center center;
  transform-style:preserve-3d; transition:transform .35s ease, box-shadow .35s
  ease; will-change:transform, box-shadow; } /* Quote form layout */
  .quote-form{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px; max-width:720px; } .quote-form .full{ grid-column: 1 / -1; }
  .quote-form label{ display:flex; flex-direction:column; gap:6px;
  font-weight:700; color:#0d1b2a; } .quote-form input, .quote-form select,
  .quote-form textarea{ appearance:none; background:#fff; border:1px solid
  #e6ebf2; border-radius:10px; padding:12px 14px; font:inherit; color:#0d1b2a;
  transition:border-color .2s ease, box-shadow .2s ease; } .quote-form
  input:focus, .quote-form select:focus, .quote-form textarea:focus{
  outline:none; border-color:#3ed4be; box-shadow:0 0 0 3px rgba(62,212,190,.18);
  } /* hide honeypot */ .hp{ position:absolute; left:-9999px; height:0;
  overflow:hidden; } @media (max-width:700px){ .quote-form{
  grid-template-columns:1fr; } } /* MLS hero: slideshow sits behind gradient,
  below content card */ .mls .hero { position: relative; overflow: hidden; } /*
  slideshow layer */ .mls .hero-slideshow{ position: absolute; inset: 0;
  z-index: 0; /* bottom: slides */ pointer-events: none; /* never blocks clicks
  */ } .mls .hero-slideshow .slide{ position: absolute; inset: 0; width: 100%;
  height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease;
  will-change: opacity; filter: saturate(1.05) contrast(1.02); } .mls
  .hero-slideshow .slide.active{ opacity: 1; } /* gradient scrim stays above
  slides, below content */ .mls .hero .hero-bg{ z-index: 1; } /* content card
  already has z-index:2 in your CSS */ /* MLS hero layering: slides (0) < scrim
  (1) < content card (2) */ .mls .hero { position: relative; overflow: hidden; }
  .mls .hero-slideshow{ position:absolute; inset:0; z-index:0;
  pointer-events:none; } .mls .hero .hero-bg{ position:absolute; inset:0;
  z-index:1; pointer-events:none; } .mls .hero-content-card{ position:relative;
  z-index:2; } /* Cross-fade slides */ .mls .hero-slideshow .slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:block; opacity:0; transition:opacity 1.2s ease; will-change:opacity;
  background:#0b0c10; /* avoids any brief 'see-through' */ } .mls
  .hero-slideshow .slide.active{ opacity:1; } /* --- MLS hero layout --- */
  .hero--mls { position: relative; overflow: visible; } .hero--mls .hero-stage{
  position: relative; height: 380px; /* height of the slideshow box */
  border-radius: 14px; overflow: hidden; } /* slideshow sits inside the stage */
  .hero--mls .hero-slideshow{ position: absolute; inset: 0; z-index: 0;
  pointer-events: none; } .hero--mls .hero-slideshow .slide{ position:absolute;
  inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0;
  transition:opacity 1.2s ease; will-change:opacity; background:#0b0c10; }
  .hero--mls .hero-slideshow .slide.active{ opacity:1; } /* gradient scrim over
  slides (still inside stage) */ .hero--mls .hero-stage .hero-bg{
  position:absolute; inset:0; z-index:1; pointer-events:none; } /* content card
  BELOW the stage */ .hero--mls .hero-copy{ margin-top: 16px; } .hero--mls
  .hero-content-card{ position: static; z-index: auto; } /* mobile: slightly
  smaller stage */ @media (max-width: 700px){ .hero--mls .hero-stage{ height:
  260px; } } /* --- Dealer hero layout (same as MLS) --- */ .hero--dealer {
  position: relative; overflow: visible; } .hero--dealer .hero-stage{ position:
  relative; height: 380px; /* slideshow box height */ border-radius: 14px;
  overflow: hidden; } /* slideshow sits inside the stage */ .hero--dealer
  .hero-slideshow{ position: absolute; inset: 0; z-index: 0; pointer-events:
  none; } .hero--dealer .hero-slideshow .slide{ position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block; opacity:0;
  transition:opacity 1.2s ease; will-change:opacity; background:#0b0c10; /*
  avoids brief see-through on decode */ } .hero--dealer .hero-slideshow
  .slide.active{ opacity:1; } /* gradient scrim over slides (still inside stage)
  */ .hero--dealer .hero-stage .hero-bg{ position:absolute; inset:0; z-index:1;
  pointer-events:none; } /* content card below the slideshow */ .hero--dealer
  .hero-copy{ margin-top: 16px; } .hero--dealer .hero-content-card{ position:
  static; z-index: auto; } @media (max-width: 700px){ .hero--dealer .hero-stage{
  height: 260px; } } /* Related post image sizing */ .post-grid .thumb img {
  width: 100%; height: 260px; /* consistent height */ object-fit: cover; /* crop
  rather than distort */ border-radius: 12px; /* match other cards */ display:
  block; } /* === Compact sticky header (desktop + mobile) === */ header{
  padding: 8px 0 !important; /* was ~20px */ border-bottom: 1px solid #e8edf3;
  /* subtle divider on light */ background: rgba(255,255,255,.88); /* slightly
  clearer glass */ backdrop-filter: blur(8px); /* a touch less blur */
  -webkit-backdrop-filter: blur(8px); } .header-inner{ height: 56px; } /* fixes
  the track height */ .brand{ gap: 8px; padding: 0 8px 0 0; font-size: 1.05rem;
  } .logo{ width:auto; height:auto; background:none; border-radius:0; padding:0;
  } .logo .site-logo{ width: 140px; height:auto; } /* shrink logo inside header
  */ #site-nav{ gap: 16px; align-items: center; } #site-nav a{ padding: 6px 8px;
  margin: 0 !important; } #site-nav a.btn.primary{ padding: 10px 14px; } /* Your
  in-page links use scroll-margin to clear the sticky header */ section{
  scroll-margin-top: 64px; } /* was 80px */ /* Start slightly taller; become
  compact when .is-scrolled is set */ header{ padding: 14px 0; transition:
  padding .18s ease, background .18s ease; } body.is-scrolled header{ padding:
  8px 0; background: rgba(255,255,255,.88); } body.is-scrolled .logo .site-logo{
  width: 140px; } /* === Mobile fixes: Process + Pricing (portrait) === */
  @media (max-width: 700px){ /* 1) Force single-column cards and tighter gaps */
  .grid{ grid-template-columns: 1fr !important; gap: 12px !important; } .card{
  grid-column: 1 / -1 !important; padding: 14px !important; } /* 2) Process:
  smaller badge + spacing */ #process .card, .process-card{ padding-top: 16px
  !important; } .step-badge{ top: -8px !important; left: 12px !important; width:
  28px !important; height: 28px !important; font-size: 13px !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.18) !important; } #process h3{ margin: 4px 0
  6px !important; } /* 3) Pricing: readable numbers + full-width CTA */
  .pricing-card .price-row{ gap: 4px !important; margin-bottom: 6px !important;
  } .pricing-card .price{ font-size: 24px !important; line-height: 1 !important;
  } .pricing-card .unit{ font-size: 12px !important; line-height: 1.1
  !important; } .bullets-tight{ margin-top: 6px !important; } .bullets-tight li{
  margin: 5px 0 !important; } /* Buttons fill width so they don't crowd */
  .pricing-card .btn{ width: 100% !important; justify-content: center
  !important; } /* 4) Band/section rhythm smaller on mobile */ .section-pad{
  padding: 32px 0 !important; } /* 5) Dark cards: slightly softer shadow on
  small screens */ .cards-dark .card{ box-shadow: 0 8px 22px rgba(0,0,0,.28)
  !important; } } /* ===== Desktop nav: prevent wrapping + tighten spacing =====
  */ .header-inner { gap: 10px; } /* ——— Desktop nav: spacing & no wrap ——— */
  #site-nav{ flex: 1 1 auto; display: flex; align-items: center;
  justify-content: center; gap: 18px; flex-wrap: nowrap; /* keep on one line */
  min-width: 0; /* allow flexbox to shrink */ } #site-nav a{ margin: 0
  !important; /* kill old margin-left */ padding: 6px 10px; white-space: nowrap;
  /* “White-Label” won’t break */ font-size: clamp(13px, 1.05vw, 16px); } /*
  Upload button: push to far right and keep compact */ #site-nav a.btn.primary{
  margin-left: auto; /* right-align the CTA */ white-space: nowrap; padding:
  10px 14px; } /* Optional: slightly smaller logo so nav has a little more room
  */ .logo .site-logo{ width: 136px; } /* adjust to taste */ /* When the screen
  truly gets narrow, let the hamburger take over */ @media (max-width: 900px){
  /* your existing mobile styles will kick in; nothing else needed here */ } /*
  Push Upload button to the far right on wide screens */ @media (min-width:
  1000px){ /* Upload button stays compact */ #site-nav a.btn.primary { padding:
  10px 14px; white-space: nowrap; margin-left: auto; /* push it to far right on
  wide screens */ } .step-badge { background: #0e1a2c; /* keep the dark circle
  */ color: #fff; font-weight: 700; font-size: 1.2rem; /* keep current number
  size */ width: 42px; height: 42px; border-radius: 100%; display: grid;
  place-items: center; /* make teal border stand out */ border: 20px solid
  #3ed4be; /* thicker + brighter aqua */ box-shadow: 0 0 10px rgba(62, 212, 190,
  0.6); /* subtle glow */ } /* Quote rotator (expectation-style) */ .qr {
  position: relative; min-height: 60px; } .qr-item { position: absolute; inset:
  0; opacity: 0; transform: translateY(6px); transition: opacity .8s ease,
  transform .8s ease; font-size: 1.05rem; color: var(--fg); } .qr-item.is-active
  { opacity: 1; transform: none; } .qr small.kicker { display:block;
  color:#64748b; margin-bottom:6px; font-weight:700; letter-spacing:.02em; }
  @media (prefers-reduced-motion: reduce){ .qr-item { transition: none;
  transform: none; } } /* === NAV FIX PATCH — paste at end of style.css === */
  /* Base desktop nav: left align, even gaps, never wrap */ #site-nav{
  display:flex; align-items:center; justify-content:flex-start; /* was center —
  must be flex-start */ gap:16px; /* consistent spacing between links */
  flex-wrap:nowrap; /* keep on one line on desktop */ min-width:0; /* allow
  shrink inside header */ } #site-nav a{ margin:0 !important; /* kill legacy
  margin-left */ padding:6px 10px; white-space:nowrap; /* no multi-line labels
  (e.g., White-Label) */ font-size:clamp(13px, 1.02vw, 16px); /* gentle
  responsive text */ } /* Push the Upload button to the far right on wide
  screens */ #site-nav a.btn.primary{ margin-left:auto; /* creates left cluster
  + right CTA */ white-space:nowrap; padding:10px 14px; } /* Slightly smaller
  logo buys a few extra pixels at tight widths */ .logo .site-logo{ width:136px;
  } /* ----------------------------------------------------------- Earlier
  mobile rules only triggered at <=700px. Enable hamburger layout earlier so
  links never crowd.
  ------------------------------------------------------------*/ @media
  (max-width:1024px){ .nav-toggle{ display:inline-flex; } /* show the hamburger
  earlier */ /* Mobile/stacked flyout */ #site-nav{ position:absolute; top:56px;
  left:0; right:0; display:flex; flex-direction:column; gap:0; padding:12px 0;
  border-bottom:1px solid #e8edf3; background:#fff; max-height:0; opacity:0;
  overflow:hidden; transition:max-height .25s, opacity .25s;
  justify-content:flex-start; /* (safety) */ } #site-nav.open{ max-height:500px;
  opacity:1; } #site-nav a{ margin:0 !important; padding:15px 24px;
  border-bottom:1px solid #eef2f6; } #site-nav a:last-child{ border-bottom:none;
  } /* In the stacked menu the CTA shouldn't push; reset its margin */ #site-nav
  a.btn.primary{ margin-left:0; } .nav-backdrop.open{ display:block;
  position:fixed; inset:0; background:rgba(17,24,33,.55); } } /*
  ----------------------------------------------------------- Optional:
  ultra-narrow desktop tuning if you still see a little crowding between
  ~1025–1160 px. ------------------------------------------------------------*/
  @media (min-width:1025px) and (max-width:1160px){ #site-nav{ gap:12px; } .logo
  .site-logo{ width:132px; } } /* Desktop logo boost */ @media (min-width:
  1000px){ .logo .site-logo { width: 180px; /* was 140px */ } } /* Tablet range:
  slightly smaller than desktop */ @media (min-width: 701px) and (max-width:
  999px){ .logo .site-logo { width: 160px; } } /* Mobile already has 140px set —
  keep it */ /* === PrepReady sections (drop-in) === */ :root{ --ink:#0d1321;
  --muted:#5b6370; --bg:#ffffff; --band:#f6f7f9; --brand:#1b74e4;
  --accent:#0f8b8d; --card:#ffffff; --shadow:0 8px 24px rgba(13,19,33,0.06);
  --radius:14px; } .nowrap{white-space:nowrap;}
  .container{max-width:1100px;margin:0 auto;padding:0 20px;}
  .banner{background:var(--band);border-bottom:1px solid #e6e9ee;} .banner
  .container{padding:10px 20px;font-size:14px;color:var(--muted);}
  .hero{padding:56px 0 28px;background:var(--bg);} .hero
  h1{font-size:36px;line-height:1.2;color:var(--ink);margin:0 0 10px;} .hero
  .subhead{font-size:18px;color:var(--muted);margin-bottom:18px;}
  .badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;}
  .badge{background:#eef3ff;border:1px solid #d9e4ff;padding:6px
  10px;border-radius:999px;font-size:13px;color:#2856b6;}
  .cta-row{display:flex;gap:12px;flex-wrap:wrap;}
  .btn{display:inline-block;padding:10px 16px;border:1px solid
  #d0d7e2;border-radius:10px;text-decoration:none;color:var(--ink);}
  .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;}
  .btn.ghost{background:transparent;} .why{padding:40px
  0;background:var(--band);} .why .lede{color:var(--muted);max-width:840px;}
  .why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:18px;}
  .why-card{background:var(--card);border:1px solid
  #eff1f5;border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);}
  .pricing{padding:40px 0;} .subtext{color:var(--muted);}
  .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:10px;}
  .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:10px;}
  .card.plan{background:#fff;border:1px solid
  #e8ecf3;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;}
  .card.plan.featured{border-color:var(--brand);box-shadow:0 12px 26px
  rgba(27,116,228,0.12);}
  .plan-head{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
  .price-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .price{font-size:36px;font-weight:700;} .unit{color:var(--muted);}
  .tooltip{margin-left:auto;font-size:12px;color:var(--brand);cursor:help;position:relative;}
  .tooltip::after{content:attr(data-tooltip);position:absolute;left:50%;transform:translateX(-50%);bottom:120%;background:#0d1321;color:#fff;padding:8px
  10px;border-radius:8px;white-space:normal;max-width:280px;font-size:12px;opacity:0;pointer-events:none;transition:opacity
  .2s;box-shadow:var(--shadow);}
  .tooltip:hover::after,.tooltip:focus::after{opacity:1;}
  .bundles{margin-top:12px;} .bundle-list{display:grid;gap:6px;margin:8px 0 0
  0;padding:0;list-style:none;} .footnotes
  summary{cursor:pointer;color:var(--brand);} .mt-lg{margin-top:28px;}
  .muted{color:var(--muted);} .addons
  .addon-list{display:grid;gap:4px;list-style:none;padding:0;margin:6px 0 0;}
  .table-wrap{overflow-x:auto;}
  .compare-table{width:100%;border-collapse:collapse;} .compare-table
  th,.compare-table td{border:1px solid #e8ecf3;padding:10px;text-align:left;}
  .compare-table thead th{background:#f7f9fc;} .proof{padding:36px
  0;background:var(--band);} .trust-strip{display:grid;grid-template-columns:1fr
  1fr;gap:16px;} .trust-strip
  .logos{display:flex;gap:20px;align-items:center;flex-wrap:wrap;} .trust-strip
  img{height:30px;opacity:.8;} .quotes blockquote{margin:0 0
  6px;font-size:16px;} .compliance-links ul{margin:8px 0 0;padding-left:18px;}
  .cta{padding:36px 0;} .cta-inner{border:1px solid
  #e8ecf3;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);background:#fff;}
  .faq{padding:36px 0;background:var(--band);} .faq
  details{background:#fff;border:1px solid
  #e8ecf3;border-radius:12px;padding:10px 12px;margin-bottom:10px;} /*
  Before/after slider */ .before-after{padding:40px 0;background:#fff;}
  .ba-wrap{position:relative;max-width:960px;margin:16px
  auto;border-radius:12px;overflow:hidden;border:1px solid
  #e8ecf3;box-shadow:var(--shadow);} .ba-wrap
  img{display:block;width:100%;height:auto;}
  .ba-overlay{position:absolute;inset:0;clip-path:inset(0 0 0 0);} .ba-overlay
  .ba-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--brand);box-shadow:0
  0 0 2px #fff;cursor:ew-resize;}
  .ba-handle::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;border:2px
  solid var(--brand);background:#fff;box-shadow:var(--shadow);} @media
  (max-width:720px){ .hero h1{font-size:28px;}
  .trust-strip{grid-template-columns:1fr;} } /* --- Fix Before/After slider ---
  */ .ba-wrap { position: relative; overflow: hidden; } .ba-wrap .ba-before,
  .ba-wrap .ba-after { width: 100%; height: auto; display: block; } .ba-wrap
  .ba-overlay { position: absolute; inset: 0; overflow: hidden; clip-path:
  inset(0 50% 0 0); /* start 50/50 split */ transition: clip-path 0.2s ease; }
  .ba-wrap .ba-after { width: 100%; height: 100%; object-fit: cover; } .ba-wrap
  .ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px;
  background: var(--brand); cursor: ew-resize; } .ba-wrap .ba-handle::before {
  content: ''; position: absolute; top: 50%; left: 50%; transform:
  translate(-50%,-50%); width: 28px; height: 28px; border-radius: 50%; border:
  2px solid var(--brand); background: #fff; box-shadow: var(--shadow); }
  /* --- Badge contrast fixes --- */
.cards-dark .badge {
  background: #19304e;   /* darker slate */
  border-color: #2aa39a; /* teal border */
  color: #eaf2ff;        /* light text */
}
/* --- Dark theme pill fixes --- */
.cards-dark .pill {
  background: #19304e;       /* deep slate background */
  border: 1px solid #2aa39a; /* teal border */
  color: #eaf2ff;            /* light text */
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
}
/* === Badge contrast fixes (light sections & hero) === */

/* === Badge contrast overrides (final-wins) === */
.badge{
  background:#fff !important;
  border:1px solid #cbd5e1 !important;
  color:#0d1b2a !important;
  font-weight:700; padding:6px 10px; border-radius:999px;
  box-shadow:0 2px 8px rgba(13,19,33,.06);
}
/* readable over bright hero images */
.hero .badge-row{
  padding:6px 8px; border-radius:999px;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(120%) blur(2px);
  -webkit-backdrop-filter:saturate(120%) blur(2px);
}
/* keep your dealer-dark look where used */
.cards-dark .badge{
  background:#17222c !important; border:1px solid #233646 !important; color:#eaf2ff !important;
}
/* === Comparison table — pro skin ======================================== */
.table-wrap{
  overflow-x:auto;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

/* Light theme base */
.compare-table{
  width:100%;
  border-collapse: separate;
  border-spacing:0;
  background:#fff;
  border:1px solid #e6ebf2;
  border-radius:14px;
  overflow:hidden; /* for rounded corners on scroll */
  font-size: 15px;
}

/* Header */
.compare-table thead th{
  background:#f6f9fc;
  color:#0d1b2a;
  text-align:left;
  font-weight:800;
  padding:12px 14px;
  border-bottom:1px solid #e6ebf2;
  letter-spacing:.2px;
}

/* Body cells */
.compare-table td{
  padding:12px 14px;
  border-bottom:1px solid #eef2f6;
  vertical-align:middle;
  color:#213246;
}

/* First column: features */
.compare-table tbody td:first-child{
  font-weight:700;
  color:#0d1b2a;
  white-space:nowrap;
}

/* Last row border tidy */
.compare-table tbody tr:last-child td{
  border-bottom:none;
}

/* Zebra + subtle row hover */
.compare-table tbody tr:nth-child(odd){ background:#fcfdff; }
.compare-table tbody tr:hover{ background:#f7fbff; }

/* Icon badges (consistent across themes) */
.badge-yes, .badge-no, .badge-maybe, .badge-text {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; padding:0 8px;
  border-radius:999px; font-weight:800; line-height:1;
  font-size:13px; letter-spacing:.1px;
}
.badge-yes   { background:#e7faf5; color:#1e846f; border:1px solid #bff0e4; }
.badge-no    { background:#ffeeee; color:#b12a2a; border:1px solid #ffd1d1; }
.badge-maybe { background:#fff7e6; color:#9a6a10; border:1px solid #ffe1ab; }
.badge-text  { background:#eef2f7; color:#0d1b2a; border:1px solid #dbe3ed; }

/* If your page is in dealer dark skin, keep contrast */
.dealer-skin .compare-table{
  background:#0f1216; border-color:#213041;
}
.dealer-skin .compare-table thead th{
  background:#151c26; color:#e8eef2; border-bottom-color:#213041;
}
.dealer-skin .compare-table td{
  color:#c9d4df; border-bottom-color:#1a2736;
}
.dealer-skin .compare-table tbody tr:nth-child(odd){ background:#101721; }
.dealer-skin .compare-table tbody tr:hover{ background:#122031; }

/* Make long text “chips” in DIY column look intentional */
.compare-chip{
  display:inline-flex; align-items:center; gap:.35ch;
  padding:6px 10px; border-radius:999px; font-weight:700;
  background:#101721; color:#eaf2ff; border:1px solid #233646;
}
/* === Ghost button contrast fix on dark cards === */
.cards-dark .btn.ghost,
.dealer-skin .btn.ghost,
.cta-inner .btn.ghost {
  background: transparent;
  color: #eaf2ff;             /* light text */
  border: 1.5px solid #2aa39a; /* teal outline */
  font-weight: 600;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.cards-dark .btn.ghost:hover,
.dealer-skin .btn.ghost:hover,
.cta-inner .btn.ghost:hover {
  background: #2aa39a; /* teal fill */
  color: #0b1220;      /* dark text when filled */
  border-color: #2aa39a;
}
/* === MLS Bundles / Add-ons (polished) === */
.mls-bundles.card{
  background:#0b1220; border:1px solid #0f1b2e; border-radius:14px;
  padding:18px; box-shadow:0 10px 30px rgba(2,12,33,.14);
}
.mls-bundles .mb-xxs{ margin-bottom:8px; }

.bundle-grid{
  list-style:none; padding:0; margin:0 0 8px 0;
  display:grid; gap:10px;
}
@media (min-width:720px){
  .bundle-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.bundle-grid li{
  background:#0e1a2c; border:1px solid #19304e; border-radius:12px; padding:12px;
  display:grid; gap:4px; min-height:84px;
}
.bundle-title{ color:#eaf2ff; font-weight:800; letter-spacing:.2px; }
.bundle-price{ color:#eaf2ff; font-size:1.05rem; font-weight:900; }
.bundle-note{ color:#9fb4c9; font-size:.9rem; line-height:1.35; }

.addons-wrap{ margin-top:10px; }
.addons-heading{ color:#f1f5f9; margin:8px 0 6px; }
.addon-grid{
  list-style:none; padding:0; margin:0;
  display:grid; gap:8px;
}
@media (min-width:720px){
  .addon-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.addon-grid li{
  display:flex; justify-content:space-between; align-items:center;
  background:#0e1a2c; border:1px solid #19304e; border-radius:10px; padding:10px 12px;
  color:#d5e4ea;
}

/* MLS footnotes inside dark card */
.mls-bundles details.footnotes{
  margin-top:8px; border:1px solid #19304e; border-radius:10px; padding:8px 10px; background:#101a26;
}
.mls-bundles details.footnotes summary{ color:#c9d4e3; cursor:pointer; }
.mls-bundles details.footnotes ul{ margin:8px 0 0 18px; color:#9fb4c9; }

/* === Comparison table — pro skin (dark aware) === */
.table-wrap{ overflow-x:auto; border-radius:14px; box-shadow:0 10px 26px rgba(0,0,0,.10); }
.compare-table{ width:100%; border-collapse:separate; border-spacing:0; background:#0f1216; border:1px solid #213041; border-radius:14px; overflow:hidden; font-size:15px; }
.compare-table thead th{ background:#151c26; color:#e8eef2; text-align:left; font-weight:800; padding:12px 14px; border-bottom:1px solid #213041; letter-spacing:.2px; }
.compare-table td{ padding:12px 14px; border-bottom:1px solid #1a2736; vertical-align:middle; color:#c9d4df; }
.compare-table tbody tr:nth-child(odd){ background:#101721; }
.compare-table tbody tr:hover{ background:#122031; }
.compare-table tbody tr:last-child td{ border-bottom:none; }
.compare-table tbody td:first-child{ font-weight:700; color:#e8eef2; white-space:nowrap; }

/* Icon/Chip badges */ 
.badge-yes, .badge-no, .badge-maybe, .badge-text {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; padding:0 8px;
  border-radius:999px; font-weight:800; line-height:1; font-size:13px; letter-spacing:.1px;
}
.badge-yes   { background:#0d3a36; color:#8af2d8; border:1px solid #1e7f71; }
.badge-no    { background:#3a0d0d; color:#ffb1b1; border:1px solid #b12a2a; }
.badge-maybe { background:#3a2a0d; color:#ffd78a; border:1px solid #9a6a10; }
.badge-text  { background:#0f1a28; color:#e8eef2; border:1px solid #233646; }

.compare-chip{
  display:inline-flex; align-items:center; gap:.35ch;
  padding:6px 10px; border-radius:999px; font-weight:700;
  background:#101721; color:#eaf2ff; border:1px solid #233646;
}
/* === Ghost CTA button (fix readability + match site theme) === */
.btn.ghost {
  border: 1.5px solid #259492;  /* teal outline */
  color: #259492;               /* teal text */
  background: transparent;
  font-weight: 600;
  border-radius: 12px;          /* keep consistent rounded corners */
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn.ghost:hover,
.btn.ghost:focus {
  background: #e6fdf9;          /* subtle aqua fill on hover */
  color: #0d1b2a;               /* dark text for contrast */
  border-color: #3ed4be;        /* brighter aqua border */
}
/* 1) Ghost buttons on dark surfaces only (NOT global .dealer-skin) */
.cards-dark .btn.ghost,
.cta .cta-inner .btn.ghost {
  background: transparent;
  color: #eaf2ff;              /* light text for dark boxes */
  border: 1.5px solid #2aa39a; /* teal outline */
  font-weight: 600;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cards-dark .btn.ghost:hover,
.cta .cta-inner .btn.ghost:hover {
  background: #2aa39a;         /* fill on hover */
  color: #0b1220;              /* dark text on teal */
  border-color: #2aa39a;
}

/* 2) Ghost buttons in LIGHT areas (e.g., hero on index) */
.hero .btn.ghost,
.home-light .btn.ghost {
  background: transparent;
  color: #259492;               /* teal text */
  border: 1.5px solid #259492;  /* teal outline */
  font-weight: 600;
  border-radius: 12px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.hero .btn.ghost:hover,
.home-light .btn.ghost:hover {
  background: #e6fdf9;          /* subtle aqua fill */
  color: #0d1b2a;               /* readable on light */
  border-color: #3ed4be;        /* brighter aqua outline */
}
/* Ghost CTA on dark cards only */
.cards-dark .btn.ghost,
.cta .cta-inner .btn.ghost { color:#eaf2ff; border:1.5px solid #2aa39a; }
.cards-dark .btn.ghost:hover,
.cta .cta-inner .btn.ghost:hover { background:#2aa39a; color:#0b1220; }

/* Ghost CTA on light sections (e.g., hero) */
.hero .btn.ghost, .home-light .btn.ghost {
  color:#259492; border:1.5px solid #259492;
}
.hero .btn.ghost:hover, .home-light .btn.ghost:hover {
  background:#e6fdf9; color:#0d1b2a; border-color:#3ed4be;
}
body.home-light .btn.ghost {
  color: #0d1b2a;             /* dark text */
  border: 1.5px solid #259492; /* teal border */
  background: #fff;           /* white background for readability */
}

body.home-light .btn.ghost:hover {
  background: #259492;        /* teal fill on hover */
  color: #fff;                /* white text when hovered */
}
/* === Quote Form Contrast Fixes === */
.quote-form label {
  color: #eaf2ff; /* light text for dark background */
  font-weight: 600;
}

.quote-form input,
.quote-form select,
.quote-form textarea {
  background: #fff;       /* keep fields white */
  color: #0d1b2a;         /* dark text inside */
  border: 1px solid #334155;
}

.quote-form input::placeholder,
.quote-form textarea::placeholder {
  color: #64748b; /* slate gray, visible on white */
}

.quote-form button.btn {
  background: linear-gradient(90deg, #3ed4be 0%, #ffb357 100%);
  color: #0d1321;
  font-weight: 700;
}
.quote-form button.btn:hover {
  filter: brightness(1.07);
}

</figure>