/* ============================================================
   Roto-Rooter of Eastern Idaho — Polished Homepage
   Design system / stylesheet
   Brand locked: Roto Red + Plumb Purple. Oswald + Source Sans 3.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Brand (locked) */
  --red:        #da291c;   /* PMS 485 — primary action */
  --red-deep:   #b21f14;   /* hover / gradient stop */
  --red-glow:   rgba(218,41,28,.38);
  --purple:     #2a1768;   /* PMS 2685 — primary brand */
  --purple-lt:  #4734a3;   /* gradient end-stops only */
  --purple-deep:#150a35;   /* footer / dark sections */
  --blue:       #857ee7;   /* PMS 272 — accent, sparing */
  --porcelain:  #eceef6;   /* off-white background */

  /* Neutrals (allowed) */
  --ink:        #191427;   /* warm near-black text */
  --slate:      #534f63;   /* secondary text */
  --mute:       #8a8699;   /* tertiary text */
  --line:       #e3e2ec;   /* hairlines */
  --white:      #ffffff;
  --paper:      #f7f8fc;

  /* Shadows — soft, layered, never harsh */
  --sh-sm: 0 1px 2px rgba(21,10,53,.06), 0 2px 6px rgba(21,10,53,.05);
  --sh-md: 0 4px 12px rgba(21,10,53,.08), 0 12px 28px rgba(21,10,53,.07);
  --sh-lg: 0 8px 24px rgba(21,10,53,.10), 0 24px 56px rgba(21,10,53,.12);
  --sh-red: 0 6px 18px var(--red-glow), 0 2px 5px rgba(178,31,20,.35);

  /* Radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Type */
  --display: 'Oswald', 'DIN Condensed', Impact, sans-serif;   /* headlines / CTA / caps */
  --body: 'Source Sans 3', 'Acumin Pro', -apple-system, system-ui, sans-serif;

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 48px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--white);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:600; line-height:1.04; letter-spacing:.005em; }
p{ margin:0; text-wrap:pretty; }

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

/* Section rhythm */
section{ position:relative; }
.pad{ padding-block: clamp(56px, 7vw, 104px); }
.eyebrow{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:600;
  font-size:.82rem;
  color:var(--red);
}
.section-head{ max-width:760px; margin-bottom: clamp(32px,4vw,52px); }
.section-head h2{
  font-size:clamp(2rem, 4.2vw, 3.1rem);
  text-transform:uppercase;
  color:var(--purple);
  margin-top:10px;
}
.section-head p{ color:var(--slate); font-size:1.12rem; margin-top:14px; max-width:60ch; }
.center{ text-align:center; margin-inline:auto; }

/* ============================================================
   BUTTONS — the conversion engine
   ============================================================ */
.btn{
  --b-bg:var(--red); --b-fg:#fff; --b-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; font-size:1.06rem; line-height:1;
  padding:1.05em 1.6em; border-radius:var(--r-pill);
  background:var(--b-bg); color:var(--b-fg);
  border:2px solid var(--b-bd);
  position:relative; overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease);
  white-space:nowrap;
}
.btn svg, .btn .ico{ flex:none; }
.btn:active{ transform:translateY(1px) scale(.995); }

/* Primary CALL button — Roto Red, glowing, unmistakable */
.btn-call{
  --b-bg:var(--red);
  box-shadow:var(--sh-red);
}
.btn-call:hover{
  background:var(--red-deep);
  transform:translateY(-3px);
  box-shadow:0 12px 30px var(--red-glow), 0 4px 10px rgba(178,31,20,.4);
}
/* Shine sweep on hover */
.btn-call::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-130%); transition:transform .7s var(--ease);
}
.btn-call:hover::after{ transform:translateX(130%); }

/* Book Online — purple, strong secondary */
.btn-book{
  --b-bg:var(--purple); --b-fg:#fff;
  box-shadow:0 4px 14px rgba(42,23,104,.28);
}
.btn-book:hover{ background:var(--purple-lt); transform:translateY(-3px); box-shadow:0 12px 28px rgba(42,23,104,.34); }

/* Ghost (on dark) */
.btn-ghost{
  --b-bg:transparent; --b-fg:#fff; --b-bd:rgba(255,255,255,.55);
}
.btn-ghost:hover{ --b-bg:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-3px); }

/* White (on dark / red) */
.btn-white{ --b-bg:#fff; --b-fg:var(--purple); box-shadow:var(--sh-md); }
.btn-white:hover{ transform:translateY(-3px); box-shadow:var(--sh-lg); }

.btn-lg{ font-size:1.18rem; padding:1.15em 1.9em; }
.btn-sm{ font-size:.92rem; padding:.7em 1.1em; }

/* soft attention ring on the single most important CTA (restrained) */
.pulse::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  box-shadow:0 0 0 0 var(--red-glow);
  animation:pulse 3.4s var(--ease) infinite;
  pointer-events:none;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(218,41,28,.34); }
  70%{ box-shadow:0 0 0 14px rgba(218,41,28,0); }
  100%{ box-shadow:0 0 0 0 rgba(218,41,28,0); }
}
@media (prefers-reduced-motion: reduce){
  .pulse::before{ animation:none; }
  *{ scroll-behavior:auto !important; }
}

/* ============================================================
   UTILITY BAR (top)
   ============================================================ */
.utility{
  background:linear-gradient(90deg,var(--purple-deep),var(--purple) 55%,var(--purple-lt));
  color:#dcd8f4;
  font-size:.82rem;
  letter-spacing:.01em;
}
.utility .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:38px; }
.utility .u-left{ display:flex; align-items:center; gap:9px; font-family:var(--display); text-transform:uppercase; letter-spacing:.12em; font-weight:500; color:#fff; }
.utility .dot{ width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 var(--red-glow); animation:liveDot 2.2s ease-in-out infinite; }
@keyframes liveDot{ 0%,100%{ box-shadow:0 0 0 0 rgba(218,41,28,.6);} 50%{ box-shadow:0 0 0 6px rgba(218,41,28,0);} }
.utility .u-right{ display:flex; align-items:center; gap:22px; }
.utility .u-right span{ display:flex; align-items:center; gap:7px; white-space:nowrap; }
.utility .u-right .sep{ width:1px; height:14px; background:rgba(255,255,255,.18); }

/* ============================================================
   HEADER (sticky)
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.scrolled{ box-shadow:var(--sh-md); }
.nav{ display:flex; align-items:center; gap:28px; min-height:74px; }
.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand img{ height:46px; width:auto; }
.brand .brand-sub{ font-family:var(--display); text-transform:uppercase; font-size:.72rem; letter-spacing:.14em; color:var(--purple); line-height:1.15; font-weight:600; border-left:2px solid var(--line); padding-left:12px; }
.nav-links{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.nav-links a{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.06em;
  font-weight:500; font-size:.96rem; color:var(--ink); white-space:nowrap;
  padding:8px 12px; border-radius:var(--r-sm); position:relative;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
.nav-links a:hover{ color:var(--purple); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:10px; flex:none; }
.nav-phone{ display:flex; flex-direction:column; align-items:flex-end; line-height:1; }
.nav-phone .lbl{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); font-family:var(--display); }
.hamburger{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; background:var(--porcelain); overflow:hidden; }
.hero .wrap{ display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(28px,4vw,64px); align-items:center; padding-block:clamp(48px,6vw,84px); }
.hero-badge{
  display:inline-flex; align-items:center; gap:9px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--sh-sm);
  border-radius:var(--r-pill); padding:7px 15px 7px 9px;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; font-weight:600; color:var(--purple);
}
.hero-badge .yrs{ background:var(--red); color:#fff; border-radius:var(--r-pill); padding:3px 9px; font-size:.72rem; }
.hero h1{
  font-size:clamp(2.6rem, 5.4vw, 4.3rem);
  text-transform:uppercase; color:var(--purple);
  margin:20px 0 0; max-width:14ch;
}
.hero h1 .accent{ color:var(--red); }
.hero .lead{ font-size:1.2rem; color:var(--slate); margin-top:20px; max-width:46ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; align-items:center; }
.hero-trust{ display:flex; align-items:center; gap:14px; margin-top:26px; color:var(--slate); font-size:.96rem; }
.stars{ color:#f5a623; letter-spacing:2px; font-size:1.05rem; }
.hero-trust strong{ color:var(--ink); }

.hero-media{ position:relative; }
.hero-media .frame{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-lg); aspect-ratio:4/4.3; background:var(--purple-deep);
}
.hero-media image-slot{ width:100%; height:100%; }
/* rich overlay so the photo reads premium and text-safe */
.hero-media .frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(21,10,53,0) 45%,rgba(21,10,53,.55)),
             radial-gradient(120% 80% at 80% 10%, rgba(133,126,231,.18), transparent 60%);
}
.hero-rating{
  position:absolute; left:18px; bottom:18px; z-index:3;
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.96); backdrop-filter:blur(6px);
  border-radius:var(--r-md); padding:12px 16px; box-shadow:var(--sh-md);
}
.hero-rating .num{ font-family:var(--display); font-size:1.5rem; color:var(--purple); line-height:1; }
.hero-rating .sub{ font-size:.78rem; color:var(--slate); }
.hero-media .floater{
  position:absolute; top:18px; right:-6px; z-index:3;
  background:var(--red); color:#fff; border-radius:var(--r-md);
  padding:12px 16px; box-shadow:var(--sh-red); text-align:center; transform:rotate(2deg);
}
.hero-media .floater .big{ font-family:var(--display); font-size:1.4rem; line-height:1; text-transform:uppercase; }
.hero-media .floater .sml{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; opacity:.92; margin-top:3px; }

/* ============================================================
   TRUST BAR — sculpted red
   ============================================================ */
.trustbar{
  background:linear-gradient(180deg,var(--red),var(--red-deep));
  color:#fff; position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), var(--sh-md);
}
.trustbar .wrap{ display:grid; grid-template-columns:repeat(5,1fr); }
.trust-item{
  text-align:center; padding:26px 14px; position:relative;
}
.trust-item + .trust-item::before{
  content:""; position:absolute; left:0; top:24%; height:52%; width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.32),transparent);
}
.trust-item .t-big{ font-family:var(--display); text-transform:uppercase; font-size:1.7rem; line-height:1; letter-spacing:.02em; }
.trust-item .t-sml{ font-size:.82rem; letter-spacing:.04em; margin-top:6px; color:#ffe2df; }

/* ============================================================
   SERVICES
   ============================================================ */
.services{ background:var(--white); }
.svc-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:clamp(28px,3vw,44px); }
.svc-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:24px 22px 22px; min-height:200px; overflow:hidden;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.svc-card::before{ /* red wipe accent */
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--red);
  transform:scaleY(0); transform-origin:top; transition:transform .3s var(--ease);
}
.svc-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:transparent; }
.svc-card:hover::before{ transform:scaleY(1); }
.svc-card .tag{
  align-self:flex-start; font-family:var(--display); text-transform:uppercase; letter-spacing:.1em;
  font-size:.66rem; font-weight:600; padding:4px 9px; border-radius:var(--r-pill); margin-bottom:14px;
}
.tag-core{ background:rgba(42,23,104,.08); color:var(--purple); }
.tag-emergency{ background:rgba(218,41,28,.1); color:var(--red); }
.tag-specialty{ background:rgba(133,126,231,.16); color:#5a52c4; }
.tag-commercial{ background:rgba(25,20,39,.07); color:var(--slate); }
.svc-card h3{ font-size:1.32rem; text-transform:uppercase; color:var(--purple); letter-spacing:.01em; }
.svc-card p{ font-size:.96rem; color:var(--slate); margin-top:9px; flex:1; }
.svc-card .more{
  display:inline-flex; align-items:center; gap:6px; margin-top:16px;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.06em; font-size:.86rem; font-weight:600; color:var(--red);
}
.svc-card .more .arw{ transition:transform .25s var(--ease); }
.svc-card:hover .more .arw{ transform:translateX(5px); }
.svc-card.feature{ grid-column:span 2; background:linear-gradient(135deg,var(--purple),var(--purple-lt)); border-color:transparent; color:#fff; }
.svc-card.feature h3{ color:#fff; font-size:1.5rem; }
.svc-card.feature p{ color:#d9d4f3; }
.svc-card.feature .tag{ background:rgba(255,255,255,.16); color:#fff; }
.svc-card.feature .more{ color:#fff; }
.svc-card.feature::before{ background:var(--red); }
.svc-card.allcard{ background:var(--porcelain); border-style:dashed; border-color:#c9cbe0; justify-content:center; align-items:flex-start; }
.svc-card.allcard h3{ color:var(--purple); }

/* ============================================================
   WHY US
   ============================================================ */
.why{ background:var(--porcelain); }
.why .wrap{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(28px,4vw,60px); align-items:center; }
.why-media{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); aspect-ratio:5/5.4; background:var(--purple-deep); }
.why-media image-slot{ width:100%; height:100%; }
.why-media .cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:30px 22px 20px; color:#fff;
  background:linear-gradient(180deg,transparent,rgba(21,10,53,.78));
  font-family:var(--display); text-transform:uppercase; letter-spacing:.05em; font-size:1rem;
}
.why-points{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:18px; }
.why-points li{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; }
.why-check{
  width:42px; height:42px; border-radius:12px; flex:none;
  display:grid; place-items:center; color:#fff; font-size:1.2rem;
  background:linear-gradient(140deg,var(--red),var(--red-deep)); box-shadow:var(--sh-red);
}
.why-points h3{ font-size:1.24rem; text-transform:uppercase; color:var(--purple); }
.why-points p{ color:var(--slate); margin-top:5px; font-size:1rem; }

/* ============================================================
   SERVICE AREA
   ============================================================ */
.area{ background:var(--white); }
.area-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:clamp(28px,3vw,40px); }
.area-card{
  display:flex; flex-direction:column; gap:2px; padding:16px 18px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--white);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.area-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); border-color:transparent; }
.area-card .city{ font-family:var(--display); text-transform:uppercase; font-size:1.06rem; color:var(--purple); letter-spacing:.02em; }
.area-card .county{ font-size:.82rem; color:var(--mute); }
.area-card.more{ background:var(--purple); border-color:transparent; }
.area-card.more .city{ color:#fff; }
.area-card.more .county{ color:#cfc9ee; }

/* ============================================================
   REAL WORK — before / after
   ============================================================ */
.work{ background:var(--purple-deep); color:#fff; }
.work .section-head h2{ color:#fff; }
.work .section-head p{ color:#c7c2e6; }
.work .eyebrow{ color:var(--blue); }
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:clamp(28px,3vw,44px); }
.work-card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-md); overflow:hidden; }
.ba{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:2px; aspect-ratio:16/10; }
.ba image-slot{ width:100%; height:100%; }
.ba .ba-tag{ position:absolute; top:10px; z-index:3; font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; font-size:.66rem; font-weight:600; padding:4px 9px; border-radius:var(--r-pill); color:#fff; }
.ba .ba-before{ left:10px; background:rgba(21,10,53,.78); }
.ba .ba-after{ right:10px; background:var(--red); }
.work-card .cap{ padding:16px 18px; font-size:.96rem; color:#d9d6ee; }
.work-card .cap strong{ color:#fff; }

/* ---- Real photos wired in ---- */
.brand-logo{ height:58px; width:auto; display:block; }
.frame-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 35%; }
.why-media .frame-img{ object-position:50% 30%; }
.work-card{ margin:0; }
.work-photo{ position:relative; overflow:hidden; }
.work-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 50%; display:block; transition:transform .5s var(--ease); }
.work-card:hover .work-photo img{ transform:scale(1.05); }
.work-chip{ position:absolute; top:12px; left:12px; z-index:2; font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; font-size:.66rem; font-weight:600; padding:5px 11px; border-radius:var(--r-pill); background:var(--red); color:#fff; box-shadow:var(--sh-sm); }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews{ background:var(--porcelain); }
.rev-top{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:clamp(26px,3vw,40px); }
.gbadge{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px 22px; box-shadow:var(--sh-md);
}
.gbadge .gscore{ font-family:var(--display); font-size:2.4rem; line-height:1; color:var(--purple); }
.gbadge .gmeta .stars{ font-size:1.05rem; }
.gbadge .gmeta .cnt{ font-size:.86rem; color:var(--slate); }
.gbadge .glogo{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:#fff; box-shadow:var(--sh-sm); border:1px solid var(--line); font-family:var(--display); font-size:1.5rem; font-weight:700; }
.rev-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.rev-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px 24px; box-shadow:var(--sh-sm); position:relative;
  display:flex; flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.rev-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); }
.rev-card .quote-mark{ font-family:var(--display); font-size:3.4rem; color:var(--porcelain); line-height:.6; position:absolute; top:18px; right:20px; }
.rev-card .stars{ font-size:1rem; }
.rev-card blockquote{ margin:14px 0 0; font-size:1.04rem; color:var(--ink); line-height:1.55; }
.rev-card .who{ margin-top:auto; padding-top:16px; margin-bottom:0; border-top:1px solid var(--line); display:flex; align-items:center; gap:12px; }
.rev-card blockquote + .who{ margin-top:auto; }
.rev-card .who-pad{ height:18px; }
.rev-card .av{ width:40px; height:40px; border-radius:50%; background:linear-gradient(140deg,var(--purple),var(--purple-lt)); color:#fff; display:grid; place-items:center; font-family:var(--display); font-size:1.1rem; }
.rev-card .who .nm{ font-weight:700; color:var(--ink); }
.rev-card .who .meta{ font-size:.82rem; color:var(--mute); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ background:var(--white); }
.faq-list{ max-width:840px; margin-top:clamp(24px,3vw,36px); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; background:none; border:0; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 4px; font-family:var(--display); text-transform:uppercase; letter-spacing:.02em;
  font-size:1.18rem; color:var(--purple);
}
.faq-q .pm{ flex:none; width:30px; height:30px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; color:var(--red); transition:transform .3s var(--ease), background .2s, border-color .2s, color .2s; font-size:1.2rem; }
.faq-item[open] .faq-q .pm{ transform:rotate(45deg); background:var(--red); color:#fff; border-color:var(--red); }
.faq-a{ padding:0 4px 24px; color:var(--slate); font-size:1.02rem; max-width:72ch; }
.faq-a a{ color:var(--red); font-weight:600; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.finalcta{
  background:
    radial-gradient(120% 120% at 15% 0%, rgba(133,126,231,.22), transparent 55%),
    linear-gradient(135deg,var(--purple),var(--purple-deep));
  color:#fff; text-align:center; overflow:hidden;
}
.finalcta::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 85% 110%, rgba(218,41,28,.22), transparent 60%); pointer-events:none; }
.finalcta .eyebrow{ color:var(--blue); }
.finalcta h2{ color:#fff; font-size:clamp(2.2rem,4.6vw,3.4rem); text-transform:uppercase; margin-top:10px; }
.finalcta p{ color:#d6d1f0; font-size:1.15rem; max-width:54ch; margin:16px auto 0; }
.finalcta .hero-actions{ justify-content:center; }
.finalcta .or{ color:#b8b2e0; font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:.84rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--purple-deep); color:#c9c4e6; padding-block:clamp(48px,5vw,72px) 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; }
.footer h4{ font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-size:1rem; color:#fff; margin-bottom:14px; }
.footer p, .footer a{ font-size:.95rem; line-height:1.7; }
.footer a:hover{ color:#fff; }
.footer .f-brand img{ height:40px; margin-bottom:14px; }
.footer-phone{ font-family:var(--display); font-size:1.4rem; color:#fff; }
.footer-bottom{ margin-top:clamp(36px,4vw,56px); border-top:1px solid rgba(255,255,255,.12); padding-block:20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-bottom .pillars{ font-family:var(--display); text-transform:uppercase; letter-spacing:.22em; font-size:.78rem; color:var(--blue); }
.footer-bottom .legal{ font-size:.82rem; color:#9b95c4; }

/* ============================================================
   MOBILE STICKY BOTTOM BAR
   ============================================================ */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:none; gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(21,10,53,.12);
}
.mobile-bar .btn{ flex:1; font-size:1.02rem; padding:1em .6em; }

/* ============================================================
   CTA STYLE SWITCHER (comparison tool — not part of the site)
   ============================================================ */
.cta-switch{
  position:fixed; right:16px; bottom:16px; z-index:90;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); padding:12px; width:236px; font-family:var(--body);
  transition:transform .3s var(--ease);
}
.cta-switch.collapsed{ transform:translateY(calc(100% + 24px)); }
.cta-switch .cs-head{ font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; color:var(--purple); display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cta-switch .cs-opt{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm); border:1px solid var(--line); margin-bottom:7px; cursor:pointer; font-size:.9rem; transition:border-color .2s, background .2s; }
.cta-switch .cs-opt:hover{ border-color:var(--blue); }
.cta-switch .cs-opt.on{ border-color:var(--red); background:rgba(218,41,28,.05); }
.cta-switch .cs-opt .sw{ width:14px; height:14px; border-radius:50%; border:2px solid var(--line); flex:none; }
.cta-switch .cs-opt.on .sw{ border-color:var(--red); background:var(--red); box-shadow:inset 0 0 0 2px #fff; }
.cta-switch .cs-opt .nm{ font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; font-size:.82rem; color:var(--ink); }
.cta-switch .cs-opt .ds{ font-size:.72rem; color:var(--mute); }
.cs-tab{
  position:fixed; right:16px; bottom:16px; z-index:89;
  background:var(--purple); color:#fff; border:0; border-radius:var(--r-pill);
  padding:10px 16px; font-family:var(--display); text-transform:uppercase; letter-spacing:.06em; font-size:.8rem;
  box-shadow:var(--sh-lg); display:none; align-items:center; gap:8px;
}

/* ---- CTA variation B: outlined-on-light book, bigger pulse ---- */
body.cta-b .btn-book{ --b-bg:#fff; --b-fg:var(--purple); border-color:var(--purple); box-shadow:var(--sh-sm); }
body.cta-b .btn-book:hover{ --b-bg:var(--purple); --b-fg:#fff; }
body.cta-b .hero-actions .btn-call{ font-size:1.24rem; padding:1.2em 2em; }

/* ---- CTA variation C: amped — gradient red + persistent soft pulse on hero & header ---- */
body.cta-c .btn-call{ background:linear-gradient(135deg,#ef3a2d,var(--red-deep)); }
body.cta-c .hero-actions .btn-call,
body.cta-c .nav-cta .btn-call,
body.cta-c .finalcta .btn-call{ box-shadow:0 8px 22px var(--red-glow), 0 0 0 0 var(--red-glow); }

/* ============================================================
   SCROLL REVEAL  (base state = VISIBLE; only hides once JS confirms
   it can re-reveal — guarantees content in print/PDF/no-JS/capture)
   ============================================================ */
.js-reveal .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js-reveal .reveal.in{ opacity:1; transform:none; }
.js-reveal .reveal.d1{ transition-delay:.06s; } .js-reveal .reveal.d2{ transition-delay:.12s; }
.js-reveal .reveal.d3{ transition-delay:.18s; } .js-reveal .reveal.d4{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){ .js-reveal .reveal{ opacity:1; transform:none; transition:none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .area-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:880px){
  .nav-links{ display:none; }
  .hamburger{ display:grid; }
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-media{ order:-1; max-width:520px; }
  .why .wrap{ grid-template-columns:1fr; }
  .why-media{ max-width:520px; }
  .trustbar .wrap{ grid-template-columns:repeat(2,1fr); }
  .trust-item:nth-child(5){ grid-column:span 2; }
  .work-grid{ grid-template-columns:1fr; }
  .rev-grid{ grid-template-columns:1fr; }
  .utility .u-right span:not(.keep){ display:none; }
}
@media (max-width:620px){
  body{ font-size:16px; }
  .svc-grid{ grid-template-columns:1fr; }
  .svc-card.feature{ grid-column:span 1; }
  .area-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; }
  .mobile-bar{ display:flex; }
  body{ padding-bottom:74px; }
  .nav-cta .btn-call .full{ display:none; }
  .cta-switch{ display:none; }
}

/* ============================================================
   SERVICE / CITY PAGE SHARED STYLES
   ============================================================ */
.breadcrumb{ display:flex; align-items:center; gap:9px; font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; font-size:.76rem; color:var(--mute); margin-bottom:16px; flex-wrap:wrap; }
.breadcrumb a{ color:var(--slate); transition:color .2s var(--ease); }
.breadcrumb a:hover{ color:var(--red); }
.breadcrumb .sep{ color:#c3c2d3; }
.breadcrumb .here{ color:var(--red); }

/* page hero variant — slightly shorter than home hero */
.page-hero{ background:var(--porcelain); overflow:hidden; }
.page-hero .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,60px); align-items:center; padding-block:clamp(40px,5vw,72px); }
.page-hero h1{ font-size:clamp(2.4rem,5vw,3.8rem); text-transform:uppercase; color:var(--purple); margin:6px 0 0; }
.page-hero h1 .accent{ color:var(--red); }
.page-hero .lead{ font-size:1.15rem; color:var(--slate); margin-top:18px; max-width:48ch; }
.page-hero .hero-actions{ margin-top:26px; }
.page-hero-media{ position:relative; }
.page-hero-media .frame{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); aspect-ratio:4/3.4; background:var(--purple-deep); }
.page-hero-media .frame::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(21,10,53,0) 55%,rgba(21,10,53,.5)); }

/* 3-step process */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:clamp(28px,3vw,44px); }
.step{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:28px 26px; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.step:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); }
.step .num{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; color:#fff; font-family:var(--display); font-size:1.5rem; background:linear-gradient(140deg,var(--red),var(--red-deep)); box-shadow:var(--sh-red); margin-bottom:18px; }
.step h3{ font-size:1.26rem; text-transform:uppercase; color:var(--purple); }
.step p{ color:var(--slate); margin-top:8px; font-size:1rem; }

/* simple feature checklist (reuses why-check) */
.feat-list{ list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 26px; }
.feat-list li{ display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start; color:var(--ink); font-size:1.04rem; }
.feat-list .ck{ width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center; color:#fff; font-size:.9rem; background:linear-gradient(140deg,var(--red),var(--red-deep)); box-shadow:0 3px 8px var(--red-glow); margin-top:1px; }
.feat-list li b{ color:var(--purple); display:block; font-family:var(--display); text-transform:uppercase; letter-spacing:.02em; font-weight:600; font-size:1.04rem; }
.feat-list li span{ color:var(--slate); font-size:.95rem; }

/* prose split (reuses .why layout) */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:center; }
.split.flip .split-media{ order:2; }
.split-media{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); aspect-ratio:4/3.2; background:var(--purple-deep); }
.split-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.split-copy h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); text-transform:uppercase; color:var(--purple); }
.split-copy .eyebrow{ display:block; margin-bottom:8px; }
.split-copy p{ color:var(--slate); font-size:1.08rem; margin-top:14px; max-width:54ch; }

/* highlighted single review */
.quote-feature{ background:linear-gradient(135deg,var(--purple),var(--purple-lt)); color:#fff; border-radius:var(--r-lg); padding:clamp(32px,4vw,52px); position:relative; overflow:hidden; box-shadow:var(--sh-lg); }
.quote-feature::before{ content:"\201D"; position:absolute; top:-10px; right:24px; font-family:var(--display); font-size:9rem; color:rgba(255,255,255,.12); line-height:1; }
.quote-feature .stars{ color:#ffc83d; letter-spacing:2px; font-size:1.15rem; }
.quote-feature blockquote{ margin:14px 0 0; font-size:clamp(1.2rem,2.2vw,1.6rem); line-height:1.5; max-width:30ch; font-weight:500; }
.quote-feature .who{ margin-top:22px; font-family:var(--display); text-transform:uppercase; letter-spacing:.05em; font-size:1rem; }
.quote-feature .who span{ color:#cfc9ee; }

@media (max-width:880px){
  .page-hero .wrap{ grid-template-columns:1fr; }
  .page-hero-media{ order:-1; max-width:520px; }
  .steps{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .split.flip .split-media{ order:-1; }
  .split-media, .page-hero-media{ max-width:560px; }
  .feat-list{ grid-template-columns:1fr; }
}

/* ===== Callback form (Web3Forms) ===== */
.cb-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--sh-md)}
.cb-form .full{grid-column:1/-1}
.cb-form label{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:.74rem;color:var(--purple);display:block;margin-bottom:6px}
.cb-form input,.cb-form select,.cb-form textarea{width:100%;padding:.82em .9em;border:1.5px solid var(--line);border-radius:var(--r-sm);font:inherit;font-size:1rem;color:var(--ink);background:#fff;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.cb-form input:focus,.cb-form select:focus,.cb-form textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(42,23,104,.12)}
.cb-form textarea{min-height:96px;resize:vertical}
.cb-form .cb-submit{grid-column:1/-1;width:100%;cursor:pointer}
.cb-status{grid-column:1/-1;font-weight:600;min-height:1.2em}
.cb-status.ok{color:#1f8a5b}.cb-status.err{color:var(--red)}.cb-status.sending{color:var(--slate)}
@media(max-width:620px){.cb-form{grid-template-columns:1fr}}