/* =====================================================================
   ChiTown Color Collective — Production Stylesheet
   Brand: high-energy Chicago sports / advertising. NOT minimalist.
   Palette: Chicago Blue, Bright Red, Safety Yellow, sunset, electric blue.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --navy:        #0A2E7A;   /* Chicago Blue */
  --navy-deep:   #061a47;
  --navy-bg:     #000000;   /* page background */
  --navy-bg-2:   #0c1c4d;
  --red:         #D90416;
  --red-dark:    #a8030f;
  --yellow:      #FFD000;
  --yellow-deep: #f0a500;
  --green:       #1ba23f;
  --green-dark:  #137a2d;
  --electric:    #2fb6ef;   /* logo "ChiTown" script blue */
  --orange:      #ff6a00;
  --white:       #ffffff;
  --cream:       #f5f7fb;
  --ink:         #0a0f22;
  --muted:       #b9c4e0;

  --sunset: linear-gradient(180deg,#3a1d6e 0%, #b3252b 38%, #e7621f 64%, #ffc02e 100%);
  --shadow-card: 0 24px 50px -18px rgba(0,0,0,.55);
  --shadow-pop:  0 16px 40px -12px rgba(0,0,0,.45);

  --font-poster: 'Anton', 'Montserrat', sans-serif;
  --font-body:   'Montserrat', system-ui, sans-serif;
  --font-script: 'Kaushan Script', cursive;

  --container: 1200px;
  --radius: 16px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; overflow-x:clip; }

body{
  font-family:var(--font-body);
  background:var(--navy-bg);
  color:var(--white);
  line-height:1.6;
  overflow-x:clip;
  max-width:100%;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

h1,h2,h3,h4{ line-height:1.02; text-transform:uppercase; letter-spacing:.01em; }

.container{ width:min(var(--container), 92%); margin-inline:auto; }
.section{ padding:84px 0; position:relative; }

/* film-grain + depth overlay applied site-wide */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
main, header, footer, nav{ position:relative; z-index:2; }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--red); --fg:#fff;
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  font-size:.96rem; padding:16px 28px; border-radius:10px;
  background:var(--bg); color:var(--fg); border:none; cursor:pointer;
  position:relative; overflow:hidden; isolation:isolate;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.5), inset 0 -3px 0 rgba(0,0,0,.18);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  white-space:nowrap;
}
.btn .arw{ transition:transform .2s ease; }
.btn:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -10px rgba(0,0,0,.55); filter:brightness(1.06); }
.btn:hover .arw{ transform:translateX(5px); }
.btn:active{ transform:translateY(-1px); }
.btn::after{ /* sheen sweep */
  content:""; position:absolute; inset:0; z-index:-1; transform:translateX(-120%);
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
}
.btn:hover::after{ transition:transform .7s ease; transform:translateX(120%); }
.btn--yellow{ --bg:var(--yellow); --fg:#0a1330; }
.btn--blue{ --bg:var(--navy); }
.btn--green{ --bg:var(--green); }
.btn--red{ --bg:var(--red); }
.btn--ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.7); }
.btn--ghost:hover{ background:rgba(255,255,255,.12); }
.btn--lg{ font-size:1.05rem; padding:18px 34px; }
.btn--block{ width:100%; justify-content:center; }

/* ---------- Section headers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.8rem;
  font-weight:800; letter-spacing:.12em; color:var(--white);
  font-size:clamp(1.3rem,3.4vw,2.1rem);
}
.eyebrow .star{ color:var(--red); font-size:1.1em; line-height:1; }
.eyebrow--center{ justify-content:center; }
.sec-head{ text-align:center; margin-bottom:46px; }
.script{
  font-family:var(--font-script); text-transform:none; color:var(--yellow); letter-spacing:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M2 9 Q32 2 62 7 T118 6' stroke='%23FFD000' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat bottom center / 100% .34em;
  padding-bottom:.12em;
}
.crew h3 .script, .split h2 .script{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M2 9 Q32 2 62 7 T118 6' stroke='%23D90416' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* =====================================================================
   NAVBAR
   ===================================================================== */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(7,16,44,.92);
  backdrop-filter:blur(10px);
  border-bottom:2px solid rgba(255,255,255,.06);
  box-shadow:0 8px 30px -14px #000;
  transition:background-color .25s ease, box-shadow .25s ease;
}
.nav__inner{ display:flex; align-items:center; gap:22px; padding:10px 0; transition:padding .25s ease; }
.nav__logo img{ height:78px; width:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); transition:height .25s ease; }
@media (max-width:560px){ .nav__logo img{ height:56px; } }
.nav.scrolled{ background:rgba(0,0,0,.97); }
.nav.scrolled .nav__inner{ padding:5px 0; }
.nav.scrolled .nav__logo img{ height:58px; }
.nav__links{ display:flex; gap:6px; margin-left:auto; }
.nav__links a{
  font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  padding:10px 13px; border-radius:8px; position:relative; color:#dfe6f7;
  transition:color .15s ease, background .15s ease;
}
.nav__links a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:5px; height:3px;
  background:var(--red); border-radius:3px; transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease;
}
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after, .nav__links a.active::after{ transform:scaleX(1); }
.nav__links a.active{ color:#fff; }
.nav__cta{ margin-left:18px; }
.nav__cta .btn{ padding:13px 22px; font-size:.84rem; }
.nav__toggle{ display:none; margin-left:auto; background:none; border:none; color:#fff; font-size:1.7rem; cursor:pointer; }

/* mobile drawer */
.nav__drawer{
  position:fixed; inset:0 0 0 auto; width:min(82%,360px); z-index:70;
  background:linear-gradient(160deg,var(--navy) 0%, var(--navy-deep) 100%);
  transform:translateX(100%); transition:transform .35s cubic-bezier(.7,0,.2,1);
  padding:26px; display:flex; flex-direction:column; gap:8px;
  box-shadow:-30px 0 60px -20px #000;
}
.nav__drawer.open{ transform:translateX(0); }
.nav__drawer a{ padding:15px 12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,.08); }
.nav__drawer a.active{ color:var(--yellow); }
.nav__drawer .btn{ margin-top:16px; }
.nav__close{ align-self:flex-end; background:none; border:none; color:#fff; font-size:1.8rem; cursor:pointer; }
.scrim{ position:fixed; inset:0; background:rgba(3,8,24,.6); backdrop-filter:blur(2px); z-index:65; opacity:0; visibility:hidden; transition:.3s; }
.scrim.open{ opacity:1; visibility:visible; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding:70px 0 86px;
  background:
    linear-gradient(180deg, rgba(8,15,40,.30) 0%, rgba(8,15,40,.62) 60%, var(--navy-bg) 100%),
    url("https://images.unsplash.com/photo-1494522855154-9297ac14b55f?q=80&w=2000&auto=format&fit=crop") center 28%/cover no-repeat;
}
.hero__sky{ position:absolute; inset:0; z-index:-1; }
.hero__inner{ text-align:center; max-width:880px; margin-inline:auto; position:relative; z-index:2; }
.hero__kicker{
  display:inline-block; font-family:var(--font-poster);
  font-size:clamp(3rem,9vw,6.3rem); color:#fff; letter-spacing:.02em;
  text-shadow:0 3px 0 rgba(0,0,0,.35);
  -webkit-text-stroke:1px rgba(255,255,255,.15);
}
.hero__sale{
  display:inline-block; position:relative; font-family:var(--font-poster);
  font-size:clamp(5rem,18vw,12.5rem); line-height:.8; color:#fff;
  text-shadow:0 6px 0 var(--red-dark), 0 10px 22px rgba(0,0,0,.5);
  margin:.04em 0 .18em;
}
.hero__sale::before{ /* red paint splash behind SALE */
  content:""; position:absolute; inset:-30% -16%; z-index:-1;
  background:
    radial-gradient(38% 46% at 22% 64%, var(--red) 0 60%, transparent 64%),
    radial-gradient(30% 40% at 82% 30%, var(--red) 0 58%, transparent 62%),
    radial-gradient(60% 64% at 50% 50%, var(--red) 0%, rgba(217,4,22,.92) 52%, transparent 72%);
  filter:blur(1.5px); transform:rotate(-3deg);
}
.hero__book{
  font-family:var(--font-poster); color:#fff; letter-spacing:.04em;
  font-size:clamp(1.1rem,3.4vw,1.7rem); margin-bottom:18px;
}
.hero__book b{ color:var(--yellow); display:inline-block; animation:pulse-urgent 1.8s ease-in-out infinite; }
@keyframes pulse-urgent{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
.hero__tag1{ color:var(--yellow); font-weight:800; font-style:italic; font-size:clamp(1.1rem,3vw,1.5rem); letter-spacing:.02em; }
.hero__tag2{ color:#fff; font-weight:600; font-style:italic; text-transform:none; font-size:clamp(1rem,2.6vw,1.3rem); margin-bottom:26px; }
.hero__cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero__badge{
  position:absolute; right:5%; top:34%; z-index:3; text-align:center;
  transform:rotate(-7deg); font-family:var(--font-poster); line-height:1.1;
  font-size:clamp(.9rem,1.6vw,1.15rem);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));
}
.hero__badge .stars{ color:var(--yellow); font-size:1.3em; display:block; }
.hero__badge span{ display:block; }
.hero__badge .c1{ color:#fff; } .hero__badge .c2{ color:var(--yellow); }
.hero__badge .c3{ color:var(--electric); } .hero__badge .c4{ color:#2ee06a; }
@media (max-width:780px){ .hero__badge{ display:none; } }

/* =====================================================================
   TRUST BAR
   ===================================================================== */
.trust{ background:var(--navy-deep); border-block:1px solid rgba(255,255,255,.08); }
.trust__row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; padding:16px 0; }
.trust__item{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:#dde5f7; }
.trust__item .ic{ color:var(--yellow); display:grid; place-items:center; }
.trust__item svg{ width:22px; height:22px; }

/* =====================================================================
   PRICING
   ===================================================================== */
.pricing{ background:radial-gradient(120% 80% at 50% -10%, var(--navy-bg-2), var(--navy-bg)); }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:start; }
.card{
  background:#fff; color:#10203f; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-card); position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-10px); box-shadow:0 36px 64px -20px rgba(0,0,0,.6); }
.card__top{ padding:22px; display:flex; align-items:center; gap:14px; color:#fff; }
.card__top .ic{ width:46px; height:46px; flex:none; }
.card__top h3{ font-size:1.7rem; font-weight:900; }
.card__top p{ text-transform:none; font-weight:600; font-size:.82rem; opacity:.92; letter-spacing:0; }
.card--basic .card__top{ background:linear-gradient(135deg,var(--navy),#15469e); }
.card--standard .card__top{ background:linear-gradient(135deg,var(--green-dark),var(--green)); }
.card--premium .card__top{ background:linear-gradient(135deg,var(--red-dark),var(--red)); }
.card__ribbon{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  background:var(--yellow); color:#0a1330; font-weight:900; font-size:.72rem;
  letter-spacing:.12em; padding:5px 16px; border-radius:20px; z-index:3;
  box-shadow:0 6px 14px -4px rgba(0,0,0,.4);
}
.card--standard{ transform:scale(1.04); border:3px solid var(--yellow); }
.card--standard:hover{ transform:scale(1.04) translateY(-10px); }
.card__price{ text-align:center; padding:26px 22px 8px; }
.card__price .amt{ font-family:var(--font-poster); font-size:5rem; line-height:.8; }
.card__price .unit{ font-weight:900; font-size:1.6rem; letter-spacing:.02em; }
.card--basic .amt{ color:var(--navy); } .card--standard .amt{ color:var(--green); } .card--premium .amt{ color:var(--red); }
.card__list{ padding:14px 26px 4px; }
.card__list li{ display:flex; align-items:center; gap:11px; padding:9px 0; font-weight:600; border-bottom:1px solid #eef1f7; }
.card__list li:last-child{ border-bottom:none; }
.card__list .chk{ width:20px; height:20px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:.7rem; }
.card--basic .chk{ background:var(--navy); } .card--standard .chk{ background:var(--green); } .card--premium .chk{ background:var(--red); }
.card__foot{ padding:14px 26px 26px; }

/* doors + disclaimer bar */
.addon{
  margin-top:30px; background:linear-gradient(135deg,#0c1c4d,#0a1638);
  border:1px solid rgba(255,255,255,.1); border-radius:var(--radius);
  display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center;
  padding:24px 30px; box-shadow:var(--shadow-pop);
}
.addon__doors{ display:flex; align-items:center; gap:14px; }
.addon__doors .ic{ width:50px; height:54px; color:var(--orange); }
.addon__doors b{ font-family:var(--font-poster); font-size:1.5rem; color:var(--orange); display:block; }
.addon__doors .amt{ font-family:var(--font-poster); font-size:2rem; color:#fff; }
.addon__note{ display:flex; align-items:center; gap:16px; font-size:.92rem; color:#dde5f7; }
.addon__note .ic{ width:44px; height:50px; flex:none; color:var(--electric); }
.addon__note em{ color:var(--yellow); font-style:normal; font-weight:700; }
.addon__cans{ width:120px; }
@media (max-width:860px){ .addon{ grid-template-columns:1fr; text-align:center; } .addon__doors,.addon__note{ justify-content:center; } .addon__cans{ display:none; } }

/* =====================================================================
   WHY CHOOSE US (blue brush band)
   ===================================================================== */
.why{
  background:
    linear-gradient(120deg, rgba(10,46,122,.0), rgba(47,182,239,.10) 50%, rgba(10,46,122,0)),
    linear-gradient(180deg,var(--navy),#0a2358);
  border-block:3px solid rgba(47,182,239,.25);
}
.why__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.why__item{ text-align:center; }
.why__item .ic{
  width:74px; height:74px; margin:0 auto 16px; border-radius:18px;
  display:grid; place-items:center; color:var(--navy); background:var(--yellow);
  box-shadow:0 14px 26px -10px rgba(0,0,0,.5); transform:rotate(-4deg);
  transition:transform .25s ease;
}
.why__item:hover .ic{ transform:rotate(0) scale(1.06); }
.why__item svg{ width:38px; height:38px; }
.why__item h4{ font-size:1.05rem; margin-bottom:8px; letter-spacing:.03em; }
.why__item p{ text-transform:none; color:var(--muted); font-size:.92rem; font-weight:500; }

/* =====================================================================
   TRANSFORMATIONS (before/after)
   ===================================================================== */
.transform .sec-head{ display:flex; align-items:flex-end; justify-content:center; gap:18px; flex-wrap:wrap; }
.transform__hint{ color:#cdd8f2; font-weight:600; text-transform:none; font-size:.95rem; display:flex; align-items:center; gap:8px; }
.ba-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ba{
  position:relative; aspect-ratio:4/3; border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow-card); cursor:ew-resize; user-select:none;
  border:2px solid rgba(255,255,255,.12);
}
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba__before{ position:absolute; inset:0; width:100%; overflow:hidden; clip-path:inset(0 50% 0 0); }
.ba__before img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; }
.ba__before::after{ content:"BEFORE"; position:absolute; left:10px; top:10px; background:rgba(0,0,0,.6); color:#fff; font-weight:800; font-size:.62rem; letter-spacing:.1em; padding:4px 9px; border-radius:5px; }
.ba__after-label{ position:absolute; right:10px; top:10px; background:var(--red); color:#fff; font-weight:800; font-size:.62rem; letter-spacing:.1em; padding:4px 9px; border-radius:5px; }
.ba__handle{ position:absolute; top:0; bottom:0; left:50%; width:4px; background:#fff; transform:translateX(-50%); box-shadow:0 0 12px rgba(0,0,0,.5); }
.ba__handle::after{
  content:"⟨ ⟩"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%; background:#fff; color:var(--navy);
  display:grid; place-items:center; font-weight:900; font-size:.85rem; letter-spacing:-2px;
  box-shadow:0 6px 16px rgba(0,0,0,.4);
}
.ba__cap{ position:absolute; left:0; right:0; bottom:0; text-align:center; padding:18px 8px 8px; color:#fff; font-weight:800; letter-spacing:.06em; font-size:.8rem; background:linear-gradient(transparent,rgba(0,0,0,.7)); pointer-events:none; }

/* =====================================================================
   GALLERY
   ===================================================================== */
.gallery{ background:radial-gradient(120% 90% at 50% 0%, var(--navy-bg-2), var(--navy-bg)); }
.filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:30px; }
.filter{
  background:rgba(255,255,255,.06); color:#dbe3f6; border:1px solid rgba(255,255,255,.14);
  font-weight:700; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase;
  padding:9px 18px; border-radius:30px; cursor:pointer; transition:.2s;
}
.filter:hover{ background:rgba(255,255,255,.14); }
.filter.active{ background:var(--red); border-color:var(--red); color:#fff; }
.grid-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tile{
  position:relative; aspect-ratio:4/3; border-radius:12px; overflow:hidden; cursor:pointer;
  box-shadow:var(--shadow-pop); border:2px solid rgba(255,255,255,.08);
}
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.tile:hover img{ transform:scale(1.08); }
.tile::after{ content:"＋ VIEW"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:800; letter-spacing:.1em; font-size:.8rem; background:linear-gradient(0deg,rgba(10,46,122,.85),rgba(217,4,22,.25)); opacity:0; transition:.25s; }
.tile:hover::after{ opacity:1; }
.tile.hide{ display:none; }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(4,8,22,.92); display:none; place-items:center; padding:30px; }
.lightbox.open{ display:grid; }
.lightbox img{ max-width:92vw; max-height:84vh; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.7); }
.lightbox__close,.lightbox__nav{ position:absolute; background:rgba(255,255,255,.12); border:none; color:#fff; cursor:pointer; border-radius:50%; width:54px; height:54px; font-size:1.6rem; display:grid; place-items:center; transition:.2s; }
.lightbox__close:hover,.lightbox__nav:hover{ background:var(--red); }
.lightbox__close{ top:24px; right:24px; }
.lightbox__nav.prev{ left:24px; top:50%; transform:translateY(-50%); }
.lightbox__nav.next{ right:24px; top:50%; transform:translateY(-50%); }

/* =====================================================================
   CREW + REVIEWS
   ===================================================================== */
.crewrev{ background:linear-gradient(180deg,#eef1f8,#dfe5f1); color:#10203f; }
.crewrev__grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.crew{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:center; }
.crew__photo{ border-radius:14px; overflow:hidden; box-shadow:var(--shadow-card); aspect-ratio:3/4; }
.crew__photo img{ width:100%; height:100%; object-fit:cover; }
.crew h3{ font-size:1.7rem; color:var(--navy); line-height:1.05; }
.crew h3 .script{ color:var(--red); display:block; font-size:1.5rem; }
.crew p{ text-transform:none; color:#3a4a6b; font-weight:500; margin:12px 0 16px; }
.crew__list li{ display:flex; align-items:center; gap:10px; font-weight:700; color:#1d2b4d; padding:6px 0; }
.crew__list .chk{ width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:.7rem; flex:none;}
.crew .btn{ margin-top:18px; }

.reviews__head{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.reviews__head .eyebrow{ color:var(--navy); }
.reviews{ min-width:0; }
.reviews__viewport{ overflow:hidden; min-width:0; }
.reviews__track{ display:flex; transition:transform .5s cubic-bezier(.7,0,.2,1); min-width:0; }
.review{ min-width:calc(33.333% - 14px); margin-right:21px; background:#fff; border-radius:14px; padding:24px; box-shadow:var(--shadow-pop); }
.review .stars{ color:var(--yellow); font-size:1.05rem; letter-spacing:2px; }
.review p{ text-transform:none; color:#33425f; font-weight:500; margin:12px 0 16px; font-style:italic; }
.review .who{ font-weight:900; color:var(--navy); }
.review .loc{ text-transform:none; color:var(--red); font-weight:700; font-size:.85rem; }
.reviews__ctrl{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:22px; }
.reviews__ctrl button{ width:46px;height:46px;border-radius:50%;border:none;background:var(--navy);color:#fff;font-size:1.2rem;cursor:pointer;transition:.2s; }
.reviews__ctrl button:hover{ background:var(--red); transform:scale(1.08); }
.dots{ display:flex; gap:8px; }
.dot{ width:10px;height:10px;border-radius:50%;background:#b8c2da;border:none;cursor:pointer;transition:.2s; }
.dot.active{ background:var(--red); width:26px; border-radius:6px; }

/* =====================================================================
   FINAL CTA BAR
   ===================================================================== */
.cta-bar{
  position:relative; overflow:hidden;
  background:linear-gradient(115deg,var(--red-dark),var(--red) 55%,#ef3a48);
  padding:64px 0;
}
.cta-bar__skyline{ position:absolute; left:0; bottom:0; width:60%; opacity:.18; z-index:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 160'%3E%3Cg fill='%23ffffff'%3E%3Crect x='10' y='70' width='34' height='90'/%3E%3Crect x='52' y='40' width='28' height='120'/%3E%3Crect x='88' y='86' width='40' height='74'/%3E%3Crect x='134' y='20' width='22' height='140'/%3E%3Crect x='150' y='6' width='6' height='20'/%3E%3Crect x='166' y='60' width='34' height='100'/%3E%3Crect x='208' y='44' width='30' height='116'/%3E%3Crect x='246' y='78' width='42' height='82'/%3E%3Crect x='296' y='30' width='26' height='130'/%3E%3Crect x='330' y='66' width='36' height='94'/%3E%3Crect x='374' y='50' width='28' height='110'/%3E%3Crect x='410' y='84' width='44' height='76'/%3E%3Crect x='462' y='40' width='30' height='120'/%3E%3Crect x='500' y='72' width='38' height='88'/%3E%3Crect x='544' y='56' width='26' height='104'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom left/contain;
}
.cta-bar__inner{ position:relative; z-index:2; text-align:center; }
.cta-bar h2{ font-family:var(--font-poster); font-size:clamp(2rem,6vw,3.6rem); color:#fff; text-shadow:0 4px 0 var(--red-dark); }
.cta-bar h2 .y{ color:var(--yellow); font-style:italic; }
.cta-bar p{ text-transform:none; font-weight:600; font-style:italic; margin:6px 0 26px; font-size:1.15rem; }
.cta-bar__btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{ background:var(--navy-deep); padding:60px 0 0; border-top:4px solid var(--red); }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.4fr 1.2fr; gap:34px; }
.footer__brand img{ height:74px; margin-bottom:14px; }
.footer__brand p{ text-transform:none; color:var(--muted); font-weight:600; font-style:italic; font-size:.92rem; }
.footer__social{ display:flex; gap:10px; margin-top:16px; }
.footer__social a{ width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;transition:.2s; }
.footer__social a:hover{ background:var(--red); transform:translateY(-3px); }
.footer__social svg{ width:18px;height:18px;fill:#fff; }
.footer h4{ color:#fff; font-size:1rem; letter-spacing:.06em; margin-bottom:16px; }
.footer__col a, .footer__col li{ text-transform:none; color:var(--muted); font-weight:500; padding:5px 0; display:block; transition:.15s; }
.footer__col a:hover{ color:var(--yellow); padding-left:5px; }
.footer__contact li{ display:flex; gap:10px; align-items:flex-start; color:var(--muted); text-transform:none; font-weight:500; padding:7px 0; }
.footer__contact svg{ width:18px;height:18px;fill:var(--yellow); flex:none; margin-top:3px; }
.footer__contact a{ color:var(--muted); }
.footer__contact a:hover{ color:var(--yellow); }
.footer__cta p{ text-transform:none; color:var(--muted); font-weight:500; margin-bottom:16px; }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:44px; padding:20px 0; }
.footer__bottom .container{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:#8d9bbd; font-size:.85rem; text-transform:none; }
.footer__bottom a{ color:#8d9bbd; }
.footer__bottom a:hover{ color:var(--yellow); }
.footer__bottom .links{ display:flex; gap:20px; }

/* =====================================================================
   SUBPAGE BANNER + shared subpage blocks
   ===================================================================== */
.page-hero{
  position:relative; padding:84px 0 70px; text-align:center; overflow:hidden;
  background:linear-gradient(180deg,rgba(8,15,40,.55),rgba(8,15,40,.85)),
    url("https://images.unsplash.com/photo-1513694203232-719a280e022f?q=80&w=2000&auto=format&fit=crop") center/cover;
  border-bottom:4px solid var(--red);
}
.page-hero h1{ font-family:var(--font-poster); font-size:clamp(2.6rem,8vw,5rem); color:#fff; text-shadow:0 5px 0 var(--red-dark); }
.page-hero p{ text-transform:none; color:#dde5f7; font-weight:600; font-style:italic; font-size:1.1rem; margin-top:8px; }
.crumbs{ text-transform:uppercase; font-size:.74rem; letter-spacing:.12em; color:var(--yellow); font-weight:800; margin-bottom:14px; }
.crumbs a{ color:#cdd8f2; }

/* service cards */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.svc{ background:#0d1c47; border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-pop); transition:.25s; }
.svc:hover{ transform:translateY(-8px); border-color:var(--yellow); }
.svc__img{ aspect-ratio:16/10; overflow:hidden; }
.svc__img img{ width:100%;height:100%;object-fit:cover; transition:transform .5s ease; }
.svc:hover .svc__img img{ transform:scale(1.08); }
.svc__body{ padding:24px; }
.svc__body .ic{ width:54px;height:54px;border-radius:12px;background:var(--red);display:grid;place-items:center;margin:0 0 14px;position:relative;box-shadow:var(--shadow-pop); }
.svc{ padding-top:6px; }
.svc__body .ic svg{ width:28px;height:28px;fill:#fff; }
.svc__body h3{ font-size:1.25rem; color:#fff; margin-bottom:8px; }
.svc__body p{ text-transform:none; color:var(--muted); font-weight:500; }

/* simple info strip / stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat{ text-align:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:26px 14px; }
.stat b{ font-family:var(--font-poster); font-size:2.8rem; color:var(--yellow); display:block; line-height:1; }
.stat span{ text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; font-weight:700; color:var(--muted); }

/* service area chips */
.areas{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.areas span{ background:rgba(47,182,239,.12); border:1px solid rgba(47,182,239,.4); color:#cfe9fa; padding:10px 18px; border-radius:30px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:.82rem; }

/* about story */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.split img{ border-radius:var(--radius); box-shadow:var(--shadow-card); }
.split h2{ font-size:2rem; color:#fff; margin-bottom:14px; }
.split h2 .script{ display:block; font-size:1.6rem; }
.split p{ text-transform:none; color:var(--muted); font-weight:500; margin-bottom:14px; }
.split .crew__list{ margin-top:8px; }
.split .crew__list .chk{ background:var(--green); }

/* reviews wall */
.wall{ columns:3; column-gap:22px; }
.wall .review{ min-width:0; margin:0 0 22px; break-inside:avoid; display:inline-block; width:100%; color:#10203f; }
.wall .review p{ color:#33425f; }

/* contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.form{ background:#fff; color:#10203f; border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-card); }
.form h3{ color:var(--navy); font-size:1.5rem; margin-bottom:6px; }
.form p{ text-transform:none; color:#56648a; font-weight:500; margin-bottom:18px; }
.form label{ display:block; font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:#33425f; margin:14px 0 6px; }
.form input, .form textarea, .form select{
  width:100%; padding:13px 15px; border:2px solid #d8deec; border-radius:10px;
  font-family:inherit; font-size:1rem; color:#10203f; background:#f7f9fd; transition:.15s;
}
.form input:focus, .form textarea:focus, .form select:focus{ outline:none; border-color:var(--electric); background:#fff; box-shadow:0 0 0 4px rgba(47,182,239,.15); }
.form textarea{ min-height:120px; resize:vertical; }
.form .btn{ margin-top:20px; }
.contact-info{ display:flex; flex-direction:column; gap:18px; }
.info-card{ display:flex; gap:16px; align-items:flex-start; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:20px; }
.info-card .ic{ width:50px;height:50px;border-radius:12px;background:var(--red);display:grid;place-items:center;flex:none; }
.info-card .ic svg{ width:24px;height:24px;fill:#fff; }
.info-card h4{ color:#fff; margin-bottom:4px; font-size:1rem; }
.info-card p, .info-card a{ text-transform:none; color:var(--muted); font-weight:500; }
.info-card a:hover{ color:var(--yellow); }

/* generic prose / pricing notes */
.note-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:26px 30px; text-transform:none; }
.note-card h3{ color:var(--yellow); margin-bottom:10px; }
.note-card p, .note-card li{ color:var(--muted); font-weight:500; }
.note-card ul{ margin-top:10px; }
.note-card li{ padding:5px 0 5px 22px; position:relative; }
.note-card li::before{ content:"▸"; position:absolute; left:0; color:var(--red); }

/* ---------- Sticky promo bar (urgency, injected) ---------- */
.promo{
  position:sticky; top:0; z-index:70; position:sticky;
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  background:linear-gradient(90deg,var(--red),var(--red-dark));
  color:#fff; padding:9px 46px 9px 16px; text-align:center;
  font-weight:700; font-size:.86rem; letter-spacing:.01em;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.5);
}
.promo b{ color:var(--yellow); }
.promo .sep{ opacity:.6; }
.promo a{ text-decoration:underline; text-underline-offset:3px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.promo a:hover{ color:var(--yellow); }
.promo__x{ position:absolute; right:12px; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.2); border:none; color:#fff; width:24px; height:24px; border-radius:50%; cursor:pointer; font-size:.78rem; line-height:1; transition:.15s; }
.promo__x:hover{ background:rgba(0,0,0,.35); }
@media (max-width:600px){ .promo{ font-size:.74rem; padding-right:40px; gap:8px; } .promo .hide-sm{ display:none; } }

/* ---------- Hero Google rating pill ---------- */
.hero__rating{
  display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  background:#fff; color:#10203f; padding:9px 18px; border-radius:40px;
  font-weight:700; font-size:.86rem; box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
  transition:transform .2s ease;
}
.hero__rating:hover{ transform:translateY(-2px); }
.hero__rating .stars{ color:#FBBC05; letter-spacing:1px; }
.hero__rating strong{ color:var(--navy); }
.hero__rating .g{ font-weight:900; font-size:1rem; background:linear-gradient(90deg,#4285F4,#EA4335 40%,#FBBC05 70%,#34A853); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- Social-proof band ---------- */
.proof{ background:#000; padding:42px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.proof__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.proof__cell{ display:flex; align-items:center; justify-content:center; gap:16px; }
.proof__cell + .proof__cell{ border-left:1px solid rgba(255,255,255,.12); }
.proof__num{ font-family:var(--font-poster); font-size:3.1rem; color:var(--yellow); line-height:.9; }
.proof .stars{ color:#FBBC05; font-size:1.05rem; letter-spacing:2px; display:block; }
.proof b{ font-family:var(--font-poster); font-size:2.8rem; color:#fff; line-height:.9; }
.proof span{ color:var(--muted); font-weight:600; font-size:.9rem; }
.proof strong{ color:#fff; display:block; font-weight:800; letter-spacing:.05em; text-transform:uppercase; font-size:.95rem; }
.proof .ic{ width:46px; height:46px; color:var(--yellow); flex:none; }
@media (max-width:680px){
  .proof__grid{ grid-template-columns:1fr; gap:18px; }
  .proof__cell + .proof__cell{ border-left:none; border-top:1px solid rgba(255,255,255,.12); padding-top:18px; }
}

/* ---------- Countdown ---------- */
.countdown{ display:flex; gap:10px; justify-content:center; margin:2px 0 20px; }
.countdown .cd{
  background:rgba(0,0,0,.5); border:2px solid rgba(255,255,255,.2); border-radius:12px;
  padding:8px 12px; min-width:72px; backdrop-filter:blur(4px);
}
.countdown .cd b{ font-family:var(--font-poster); font-size:2rem; line-height:1; color:var(--yellow); display:block; }
.countdown .cd span{ font-size:.6rem; letter-spacing:.14em; font-weight:800; text-transform:uppercase; color:#e6ecfb; }
@media (max-width:480px){ .countdown .cd{ min-width:60px; padding:6px 8px; } .countdown .cd b{ font-size:1.5rem; } }

/* ---------- Instant Estimate calculator ---------- */
.calc{ background:linear-gradient(180deg,#000,#06122e); }
.calc__wrap{ display:grid; grid-template-columns:1.05fr .95fr; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-card); border:1px solid rgba(255,255,255,.1); }
.calc__controls{ background:#0c1c4d; padding:34px; }
.calc__controls label{ display:block; font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; color:#cdd8f2; margin:22px 0 10px; }
.calc__controls label:first-child{ margin-top:0; }
.calc input[type=range]{ width:100%; accent-color:var(--red); height:8px; cursor:pointer; }
.calc__sqft{ text-align:center; margin-top:10px; color:#fff; font-weight:700; }
.calc__sqft b{ font-family:var(--font-poster); font-size:1.9rem; color:var(--yellow); }
.calc__seg{ display:flex; gap:8px; }
.calc__seg button{ flex:1; padding:12px 6px; border-radius:10px; border:2px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05); color:#dfe6f7; font-weight:800; cursor:pointer; transition:.15s; font-size:.84rem; line-height:1.25; }
.calc__seg button:hover{ border-color:var(--yellow); }
.calc__seg button.active{ background:var(--red); border-color:var(--red); color:#fff; }
.calc__step{ display:flex; align-items:center; gap:16px; }
.calc__step button{ width:44px; height:44px; border-radius:10px; border:none; background:var(--navy); color:#fff; font-size:1.5rem; font-weight:800; cursor:pointer; transition:.15s; }
.calc__step button:hover{ background:var(--red); }
.calc__step b{ font-family:var(--font-poster); font-size:1.7rem; color:#fff; min-width:34px; text-align:center; }
.calc__result{ background:linear-gradient(160deg,var(--red),var(--red-dark)); padding:34px; display:flex; flex-direction:column; justify-content:center; text-align:center; }
.calc__label{ text-transform:uppercase; letter-spacing:.12em; font-weight:800; font-size:.82rem; color:#ffe9aa; }
.calc__total{ font-family:var(--font-poster); font-size:clamp(3rem,8vw,4.8rem); color:#fff; line-height:1; margin:4px 0; text-shadow:0 4px 0 var(--red-dark); }
.calc__break{ color:#ffeaea; font-weight:600; margin-bottom:20px; }
.calc__result small{ color:rgba(255,255,255,.82); text-transform:none; font-weight:500; margin-top:14px; font-size:.74rem; line-height:1.5; }
@media (max-width:760px){ .calc__wrap{ grid-template-columns:1fr; } }

/* ---------- Focus states (a11y) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--yellow); outline-offset:2px; border-radius:4px;
}

/* ---------- Floating mobile action bar (injected) ---------- */
.mobile-bar{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; box-shadow:0 -8px 24px -8px rgba(0,0,0,.5); }
.mobile-bar a{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 8px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:.85rem; color:#fff; }
.mobile-bar .call{ background:var(--navy); }
.mobile-bar .est{ background:var(--red); }
@media (max-width:768px){ .mobile-bar{ display:flex; } body{ padding-bottom:54px; } }

/* ---------- Card tilt + magnetic buttons ---------- */
.card, .tile, .svc{ will-change:transform; }
.btn{ will-change:transform; }

/* ---------- Multi-step quote wizard ---------- */
.wizard__bar{ display:flex; gap:8px; margin:4px 0 6px; }
.wizard__bar span{ flex:1; height:6px; border-radius:4px; background:#dce3f0; transition:background .3s ease; }
.wizard__bar span.on{ background:var(--red); }
.wizard__step-label{ font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; color:var(--red); margin-bottom:14px; }
.wizard__panel{ display:none; }
.wizard__panel.active{ display:block; animation:fade .3s ease; }
.wizard__nav{ display:flex; gap:12px; margin-top:22px; }
.wizard__nav .btn{ flex:1; }
.pkg-group{ display:flex; gap:8px; flex-wrap:wrap; }
.pkg-group button{ flex:1; min-width:84px; padding:12px 8px; border-radius:10px; border:2px solid #d8deec; background:#f7f9fd; color:#10203f; font-weight:800; cursor:pointer; transition:.15s; line-height:1.2; }
.pkg-group button:hover{ border-color:var(--red); }
.pkg-group button.active{ background:var(--red); border-color:var(--red); color:#fff; }
.form input[type=range]{ width:100%; accent-color:var(--red); height:8px; cursor:pointer; }
.form .range-val{ text-align:center; font-weight:800; color:var(--navy); margin-top:8px; font-size:1.05rem; }

/* ---------- Exit-intent modal ---------- */
.exit{ position:fixed; inset:0; z-index:120; display:none; place-items:center; padding:24px; background:rgba(3,8,22,.82); backdrop-filter:blur(4px); }
.exit.open{ display:grid; animation:fade .25s ease; }
@keyframes fade{ from{opacity:0;} to{opacity:1;} }
.exit__card{ position:relative; max-width:520px; width:100%; background:linear-gradient(160deg,#0c1c4d,#081335); border:2px solid var(--yellow); border-radius:var(--radius); padding:42px 34px; text-align:center; box-shadow:0 40px 90px rgba(0,0,0,.7); animation:pop-in .4s both; }
.exit__card .tag{ display:inline-block; background:var(--red); color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; padding:5px 14px; border-radius:20px; margin-bottom:14px; }
.exit__card h3{ font-family:var(--font-poster); font-size:clamp(1.9rem,5vw,2.7rem); color:#fff; line-height:1; }
.exit__card h3 .y{ color:var(--yellow); }
.exit__card p{ text-transform:none; color:var(--muted); font-weight:600; margin:12px 0 24px; }
.exit__x{ position:absolute; top:12px; right:14px; background:rgba(255,255,255,.14); border:none; color:#fff; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:1rem; transition:.15s; }
.exit__x:hover{ background:var(--red); }
.exit__btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---------- Payments / financing ---------- */
.payments{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.payments .chip{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:30px; padding:9px 18px; display:inline-flex; gap:9px; align-items:center; color:#dfe6f7; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.8rem; }
.payments svg{ width:20px; height:20px; fill:var(--yellow); }

/* ---------- Map embed ---------- */
.map-embed{ border-radius:var(--radius); overflow:hidden; border:2px solid rgba(255,255,255,.12); box-shadow:var(--shadow-pop); }
.map-embed iframe{ display:block; width:100%; height:380px; border:0; filter:grayscale(.15) contrast(1.05); }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }

/* hero load animation */
@keyframes pop-in{ from{ opacity:0; transform:translateY(26px) scale(.96);} to{ opacity:1; transform:none; } }
.hero__inner > *{ animation:pop-in .7s both; }
.hero__kicker{ animation-delay:.05s; }
.hero__sale{ animation-delay:.16s; }
.hero__book{ animation-delay:.28s; }
.hero__tag1{ animation-delay:.36s; }
.hero__tag2{ animation-delay:.42s; }
.hero__cta{ animation-delay:.5s; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  .reveal{ opacity:1; transform:none; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .cards, .ba-grid, .grid-gallery, .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .why__grid{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .crewrev__grid, .split, .contact-grid{ grid-template-columns:1fr; }
  .review{ min-width:calc(50% - 14px); }
  .wall{ columns:2; }
  .nav__links, .nav__cta{ display:none; }
  .nav__toggle{ display:block; }
  .card--standard{ transform:none; } .card--standard:hover{ transform:translateY(-10px); }
}
@media (max-width:680px){
  .section{ padding:60px 0; }
  .cards, .ba-grid, .grid-gallery, .svc-grid, .why__grid, .stats{ grid-template-columns:1fr; }
  .crew{ grid-template-columns:1fr; }
  .review{ min-width:calc(100% - 0px); margin-right:0; }
  .reviews__track{ gap:0; }
  .wall{ columns:1; }
  .footer__grid{ grid-template-columns:1fr; }
  .trust__row{ justify-content:center; }
}