/* =========================================================
   Strive Cleaning OK — design system
   Palette lock: ink navy base, ONE accent (Strive brand cyan). No second accent.
   Radius lock: cards 14px, inputs 10px, buttons pill.
   Mobile-first. Every breakpoint declared explicitly.
   ========================================================= */

:root{
  /* --- ink / neutrals (cool grey family, locked) --- */
  --ink:#0A1A2F;
  --ink-2:#12283f;
  --slate-700:#33465c;
  --slate-500:#5b7189;
  --slate-400:#8296ab;
  --slate-200:#d7dfe8;
  --slate-100:#e9eef4;
  --paper:#f6f8fb;
  --white:#ffffff;

  /* --- single accent: Strive brand cyan (#00BCD4 in the logo).
     The raw brand hue fails AA as a button fill, so interactive elements use
     the deepened tint and the bright tint is reserved for dark backgrounds.
     One hue, one accent, whole site. --- */
  --accent:#0B7C90;
  --accent-700:#086376;
  --accent-300:#3ED8EC;
  --accent-50:#e7f6f9;

  /* --- brand pink, sampled from the logo wordmark (#F0B4D8).
     The logo is cyan star + pink wordmark, so the site carries both. Pink is
     rationed: eyebrows, step numbers and the CTA wash. Never a button fill. --- */
  --pink-300:#F0B4D8;
  --pink:#B23A78;
  --pink-50:#fcecf4;

  /* --- type --- */
  --font-sans:"Manrope","Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* --- shape lock --- */
  --r-card:14px;
  --r-input:10px;
  --r-pill:999px;

  /* --- elevation (tinted to background hue, never pure black) --- */
  --sh-sm:0 1px 2px rgba(10,26,47,.06), 0 2px 6px rgba(10,26,47,.05);
  --sh-md:0 4px 10px rgba(10,26,47,.07), 0 12px 28px rgba(10,26,47,.08);
  --sh-lg:0 10px 24px rgba(10,26,47,.10), 0 30px 60px rgba(10,26,47,.12);

  /* --- z-index, semantic. Never arbitrary 999s. --- */
  --z-dropdown:100;
  --z-sticky:200;
  --z-drawer:300;
  --z-skip:400;
  --z-mobilebar:250;

  /* --- rhythm --- */
  --pad-x:20px;
  --maxw:1180px;
  --nav-h:64px;
  --mobilebar-h:64px;
}

@media (min-width:768px){ :root{ --pad-x:32px; --nav-h:72px; --mobilebar-h:0px; } }

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--white);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,h4{margin:0;line-height:1.12;letter-spacing:-0.025em;font-weight:800;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* body padding so the sticky mobile action bar never covers content */
body{padding-bottom:var(--mobilebar-h)}

/* ---------- layout primitives ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.wrap-wide{max-width:1360px}
.section{padding-block:56px}
@media (min-width:768px){.section{padding-block:88px}}
.section--tight{padding-block:40px}
@media (min-width:768px){.section--tight{padding-block:60px}}
.section--paper{background:var(--paper)}
.section--ink{background:var(--ink);color:var(--white)}
.section--ink p{color:rgba(255,255,255,.76)}

.h1{font-size:clamp(2rem,7.2vw,3.5rem)}
.h2{font-size:clamp(1.65rem,4.6vw,2.5rem)}
.h3{font-size:clamp(1.15rem,2.6vw,1.4rem);letter-spacing:-0.015em}
.lede{font-size:clamp(1rem,2.4vw,1.125rem);color:var(--slate-500);max-width:62ch;line-height:1.65}
.section--ink .lede{color:rgba(255,255,255,.72)}
.eyebrow{
  font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pink);margin-bottom:12px;display:block
}
.section--ink .eyebrow{color:var(--pink-300)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border-radius:var(--r-pill);border:1.5px solid transparent;
  font-weight:800;font-size:.95rem;letter-spacing:-0.01em;white-space:nowrap;
  cursor:pointer;transition:transform .16s cubic-bezier(.16,1,.3,1),background .16s,box-shadow .16s,border-color .16s;
}
.btn:active{transform:scale(.975)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(11,124,144,.30)}
.btn-primary:hover{background:var(--accent-700);box-shadow:0 8px 22px rgba(11,124,144,.38);transform:translateY(-1px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-2);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--slate-200)}
.btn-outline:hover{border-color:var(--ink);background:var(--slate-100)}
.btn-on-dark{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.34);backdrop-filter:blur(8px)}
.btn-on-dark:hover{background:rgba(255,255,255,.18);border-color:#fff}
.btn-block{width:100%}
.btn-lg{padding:16px 30px;font-size:1rem}

/* ---------- header / nav ---------- */
.topbar{
  background:#071322;color:rgba(255,255,255,.72);
  font-size:.78rem;font-weight:600;letter-spacing:.01em
}
.topbar .wrap{display:flex;align-items:center;justify-content:center;gap:18px;min-height:36px;text-align:center}
.topbar b{color:#fff}
.topbar__item{display:none;align-items:center;gap:7px}
.topbar__item--always{display:inline-flex}
@media (min-width:900px){.topbar__item{display:inline-flex}.topbar .wrap{justify-content:space-between}}

.site-header{position:sticky;top:0;z-index:var(--z-sticky);background:rgba(10,26,47,.92);backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,.10);transition:box-shadow .2s}
.site-header.is-stuck{box-shadow:0 6px 24px rgba(10,26,47,.28)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
/* The supplied logo is a near-white wordmark on transparency, so it only ever
   sits on ink. That is why the header and drawer head are dark. */
.brand__logo{height:26px;width:auto;flex-shrink:0}
@media (min-width:768px){.brand__logo{height:32px}}
.brand__sub{
  font-size:.58rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-300);padding-left:11px;margin-left:2px;
  border-left:1px solid rgba(255,255,255,.22);white-space:nowrap
}

.nav__links{display:none}
@media (min-width:1024px){
  .nav__links{display:flex;align-items:center;gap:4px}
  .nav__cta{display:flex;align-items:center;gap:10px}
  .nav__cta .btn{padding:11px 18px;font-size:.85rem}
}
.nav__link{
  /* Shared by <a> and <button>. The button reset is not optional: without it
     the UA paints buttonface grey plus a border behind the dropdown triggers. */
  appearance:none;background:transparent;border:0;margin:0;font-family:inherit;
  cursor:pointer;text-align:left;
  padding:9px 10px;border-radius:8px;font-weight:700;font-size:.875rem;color:rgba(255,255,255,.82);
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  transition:color .15s,background .15s
}
@media (min-width:1200px){.nav__link{padding:9px 12px;font-size:.9rem}}
.nav__link:hover{color:#fff;background:rgba(62,216,236,.13)}
.nav__link[aria-expanded="true"]{color:var(--accent-300);background:rgba(62,216,236,.13)}
.nav__link.is-active{color:var(--accent-300)}
.caret{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.has-menu[aria-expanded="true"] .caret{transform:rotate(-135deg) translateY(-2px)}

.dropdown{position:relative}
.dropdown__panel{
  position:absolute;top:calc(100% + 8px);left:0;min-width:260px;
  background:#0A1A2F;border:0;border-radius:var(--r-card);
  box-shadow:0 16px 40px rgba(4,12,22,.55);
  padding:7px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;z-index:var(--z-dropdown)
}
.dropdown.is-open .dropdown__panel{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown__panel--wide{min-width:320px;max-width:min(320px,calc(100vw - 48px))}
.dropdown__panel--plain{min-width:220px}
.dd-item{display:block;padding:10px 12px;border-radius:9px;transition:background .14s,color .14s}
.dd-item:hover{background:rgba(62,216,236,.12)}
.dd-item__t{font-weight:800;font-size:.88rem;color:#fff;display:block}
.dd-item__d{font-size:.76rem;color:rgba(255,255,255,.6);display:block;margin-top:2px;line-height:1.4}
.dd-item:hover .dd-item__t{color:var(--accent-300)}
/* plain variant: names only, no descriptions */
.dropdown__panel--plain .dd-item{padding:9px 12px}
.dd-foot{border-top:1px solid var(--slate-100);margin-top:6px;padding:10px 12px 4px}
.dd-foot a{font-size:.8rem;font-weight:800;color:var(--accent)}

.nav__phone{display:none}
@media (min-width:1200px){.nav__phone{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:.92rem;color:#fff}}
.nav__phone svg{color:var(--accent-300)}

/* burger */
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;background:transparent;border:1px solid rgba(255,255,255,.26);
  border-radius:10px;cursor:pointer
}
.burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .22s,opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (min-width:1024px){.burger{display:none}}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;top:0;z-index:var(--z-drawer);background:#fff;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.16,1,.3,1);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain
}
.drawer.is-open{transform:translateX(0)}
@media (min-width:1024px){.drawer{display:none}}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:14px var(--pad-x);position:sticky;top:0;background:var(--ink);z-index:2}
.drawer__body{padding:8px var(--pad-x) 28px;flex:1}
.drawer__link{display:block;padding:15px 0;font-weight:800;font-size:1.05rem;border-bottom:1px solid var(--slate-100)}
.acc__btn{
  appearance:none;margin:0;font-family:inherit;
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:15px 0;background:transparent;border:0;border-bottom:1px solid var(--slate-100);
  font-weight:800;font-size:1.05rem;color:var(--ink);cursor:pointer;text-align:left
}
.acc__btn .caret{color:var(--slate-400)}
.acc__btn[aria-expanded="true"] .caret{transform:rotate(-135deg) translateY(-2px)}
.acc__panel{display:none;padding:4px 0 10px}
.acc__panel.is-open{display:block}
.acc__panel a{display:block;padding:11px 0 11px 14px;font-size:.95rem;font-weight:600;color:var(--slate-700);border-left:2px solid var(--slate-200)}
.acc__panel a:hover{color:var(--accent);border-left-color:var(--accent)}
.drawer__foot{padding:18px var(--pad-x) 32px;background:var(--paper);display:grid;gap:10px}

/* sticky mobile action bar — the single biggest mobile conversion lever */
.mobilebar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-mobilebar);
  display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:1px;
  background:var(--slate-200);border-top:1px solid var(--slate-200);
  padding-bottom:env(safe-area-inset-bottom)
}
@media (min-width:768px){.mobilebar{display:none}}
.mobilebar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:#fff;padding:9px 4px;font-size:.68rem;font-weight:800;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);min-height:56px
}
.mobilebar a.is-primary{background:var(--accent);color:#fff}
.mobilebar svg{width:19px;height:19px}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.42}
.hero__bg::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(10,26,47,.86) 0%,rgba(10,26,47,.74) 45%,rgba(10,26,47,.95) 100%)
}

/* water-on-glass canvas: over the photo, under the scrim, never interactive */
.water{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;
  pointer-events:none;display:block
}
.pagehero .water{opacity:.75}
@media (min-width:1024px){
  .hero__bg::after{background:linear-gradient(100deg,rgba(10,26,47,.96) 0%,rgba(10,26,47,.86) 46%,rgba(10,26,47,.55) 100%)}
}
.hero__inner{position:relative;z-index:1;display:grid;gap:24px;padding-block:34px 40px}
@media (min-width:1024px){
  /* Text column gets the larger share so the headline can run big in a narrow
     measure. The form is capped rather than fluid so it stays a card, not a
     column that stretches with the viewport.
     align-items:start pins the copy to the top of the hero rather than
     centring it against the taller form column. */
  .hero__inner{
    grid-template-columns:1.12fr minmax(0,440px);
    /* Row 2 takes all the slack from the taller form column. Without the 1fr
       the surplus is split across both rows and the buttons drift down the page. */
    grid-template-rows:min-content min-content 1fr;
    column-gap:56px;row-gap:20px;align-items:start;
    padding-block:56px 64px
  }
  .hero__copy{grid-column:1;grid-row:1}
  .hero__actions{grid-column:1;grid-row:2;align-self:start;margin-top:0}
  .hero__proof{grid-column:1;grid-row:3;align-self:start}
  .hero__formcol{grid-column:2;grid-row:1 / span 3}
}
@media (min-width:1280px){
  .hero__inner{grid-template-columns:1.15fr minmax(0,470px);column-gap:72px}
}
/* Short laptops (1366x768 and similar) give roughly 640px of viewport. The big
   logo plus the padding would push the CTAs under the fold there, so trim both
   on height rather than width. Width alone cannot see this. */
@media (min-width:1024px) and (max-height:820px){
  .hero__logo{height:76px;margin-bottom:18px}
  .hero__inner{padding-block:36px 44px;row-gap:20px}
  .hero__sub{margin-top:14px}
}
.hero h1{
  font-size:clamp(2.15rem,6.4vw,3.7rem);
  line-height:1.03;letter-spacing:-.04em;font-weight:800;
  max-width:15ch
}
@media (min-width:1024px){.hero h1{max-width:13ch}}
.hero h1 em{font-style:normal;color:var(--accent-300)}
.hero__sub{margin-top:18px;font-size:clamp(1rem,2.4vw,1.09rem);color:rgba(255,255,255,.8);max-width:42ch;line-height:1.62}
.hero__actions{margin-top:2px;display:flex;flex-wrap:wrap;gap:11px}
.hero__actions .btn{flex:1 1 auto;min-width:158px}
@media (min-width:520px){.hero__actions .btn{flex:0 0 auto}}
.hero__logo{
  height:clamp(56px,13vw,72px);width:auto;margin-bottom:22px;
  filter:drop-shadow(0 6px 24px rgba(4,12,22,.6))
}
@media (min-width:768px){.hero__logo{height:78px;margin-bottom:22px}}
@media (min-width:1280px){.hero__logo{height:88px;margin-bottom:24px}}
.stars{color:#FFC53D;letter-spacing:.06em;font-size:.85rem}

/* page hero (inner pages) — same theme family, shorter */
.pagehero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.pagehero__bg{position:absolute;inset:0;z-index:0}
.pagehero__bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.pagehero__bg::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(10,26,47,.90),rgba(10,26,47,.80))}
.pagehero__inner{position:relative;z-index:1;padding-block:40px 46px}
@media (min-width:768px){.pagehero__inner{padding-block:64px 72px}}
.crumbs{font-size:.76rem;font-weight:700;color:rgba(255,255,255,.62);margin-bottom:14px}
.crumbs a:hover{color:#fff}
.crumbs span{margin-inline:7px;opacity:.5}
.pagehero h1{font-size:clamp(1.9rem,5.6vw,3rem)}
.pagehero__sub{margin-top:14px;color:rgba(255,255,255,.78);max-width:58ch;font-size:1.02rem}
.pagehero__actions{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}

/* ---------- quote form card (GoHighLevel embed) ---------- */
.quotecard{
  background:#fff;color:var(--ink);border-radius:18px;padding:20px;
  box-shadow:0 18px 44px rgba(4,12,22,.32), 0 2px 6px rgba(4,12,22,.14)
}
@media (min-width:768px){.quotecard{padding:20px 20px 18px}}
.quotecard__head{margin-bottom:14px;text-align:center}
.quotecard__head h2{font-size:1.22rem;letter-spacing:-.025em}
@media (min-width:768px){.quotecard__head h2{font-size:1.3rem}}
.quotecard__head p{font-size:.78rem;color:var(--slate-500);margin-top:4px;line-height:1.4}

/* The GHL iframe self-resizes via form_embed.js. min-height reserves space so
   the page does not reflow on load; the script overwrites height once ready. */
.ghl-embed{position:relative;width:100%;border-radius:var(--r-input);overflow:hidden;min-height:400px}
.ghl-embed iframe{
  width:100%;min-height:400px;border:0;display:block;background:transparent;
  position:relative;z-index:1
}
/* Skeleton sits behind the iframe so the card is never a blank box while the
   third-party form boots. The iframe paints over it on load. */
.ghl-skeleton{position:absolute;inset:0;z-index:0;padding:2px;display:grid;gap:14px;align-content:start}
.ghl-skeleton i{display:block;border-radius:8px;background:var(--slate-100);height:42px}
.ghl-skeleton i:nth-child(5){height:78px}
.ghl-skeleton i:last-child{height:48px;border-radius:var(--r-pill);background:var(--slate-200)}
@media (prefers-reduced-motion:no-preference){
  .ghl-skeleton i{animation:shimmer 1.5s ease-in-out infinite}
  .ghl-skeleton i:nth-child(2){animation-delay:.1s}
  .ghl-skeleton i:nth-child(3){animation-delay:.2s}
  .ghl-skeleton i:nth-child(4){animation-delay:.3s}
  .ghl-skeleton i:nth-child(5){animation-delay:.4s}
  .ghl-skeleton i:last-child{animation-delay:.5s}
}
@keyframes shimmer{0%,100%{opacity:1}50%{opacity:.55}}
.quotecard--embed .form-note{margin-top:7px}

/* Reassurance under the form. Reads as a person, not fine print, so it gets
   real weight and colour rather than the muted note treatment below it. */
.form-direct{
  display:flex;align-items:flex-start;gap:8px;
  margin-top:11px;padding:9px 11px;border-radius:var(--r-input);
  background:var(--accent-50);
  font-size:.78rem;font-weight:700;line-height:1.4;color:var(--ink)
}
.form-direct svg{flex-shrink:0;color:var(--accent);margin-top:1px}
.form-note{font-size:.72rem;color:var(--slate-400);text-align:center;line-height:1.5}
.form-note a{color:var(--accent);font-weight:800}

/* ---------- hero proof: fills the column beside the form ----------
   Not decoration. It sits level with the form fields so the reassurance is
   read at the moment someone decides whether to hand over their number. */
.hero__proof{display:grid;gap:14px;max-width:33rem}
.hero__pills{display:grid;gap:9px}
@media (min-width:480px){.hero__pills{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}}
.hero__pills li{
  display:flex;align-items:center;gap:9px;
  font-size:.82rem;font-weight:700;color:rgba(255,255,255,.9);line-height:1.3
}
.hero__pills svg{color:var(--accent-300);flex-shrink:0}

.hero__quote{
  margin:0;padding:13px 15px;border-radius:var(--r-card);
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)
}
.hero__quote blockquote{
  margin:7px 0 0;font-size:.89rem;line-height:1.5;color:rgba(255,255,255,.92);
  text-wrap:pretty
}
.hero__quote figcaption{
  margin-top:8px;font-size:.74rem;font-weight:700;letter-spacing:.02em;
  color:rgba(255,255,255,.6)
}
/* Inner pages carry the pills but not the quote: their copy column is shorter
   and a testimonial there competes with the page's own message. */
.hero--inner .hero__quote{display:none}

/* ---------- trust pill row ---------- */
.badges-strip{border-bottom:1px solid var(--slate-100);background:var(--paper)}
.badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding-block:18px}
@media (min-width:768px){.badges{gap:14px;padding-block:22px}}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--slate-200);
  font-size:.78rem;font-weight:800;letter-spacing:.01em;color:var(--ink);
  box-shadow:var(--sh-sm)
}
@media (min-width:768px){.badge{font-size:.83rem}}
.badge svg{color:var(--accent);flex-shrink:0}
.badge--stars{border-color:var(--pink-50);background:var(--pink-50)}
.badge--stars .stars{font-size:.92rem;letter-spacing:.04em}

/* ---------- map ---------- */
.mapframe{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-md);background:var(--ink-2)}
.mapframe iframe{display:block;width:100%;height:300px;border:0;filter:grayscale(.35) contrast(1.05)}
@media (min-width:900px){.mapframe iframe{height:390px}}

/* ---------- review CTA ---------- */
.rev-cta{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--slate-100);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px
}
.rev-cta p{font-size:.94rem;color:var(--slate-500);max-width:46ch}

/* ---------- services grid: four even cards ---------- */
.svc-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:600px){.svc-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media (min-width:1100px){.svc-grid{grid-template-columns:repeat(4,1fr)}}
.svc{
  position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--ink);
  aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px;color:#fff;isolation:isolate;
  transition:transform .34s cubic-bezier(.2,.7,.2,1)
}
@media (min-width:600px){.svc{aspect-ratio:3/4}}
@media (min-width:1100px){.svc{aspect-ratio:3/4.2}}
.svc:hover{transform:translateY(-5px)}
.svc img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)
}
.svc:hover img{transform:scale(1.05)}
.svc::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.9;
  background:linear-gradient(180deg,rgba(10,26,47,.10) 0%,rgba(10,26,47,.60) 48%,rgba(10,26,47,.95) 100%);
  transition:opacity .34s cubic-bezier(.2,.7,.2,1)
}
.svc:hover::after{opacity:1}
.svc h3{font-size:1.12rem;letter-spacing:-.02em}
.svc p{font-size:.84rem;color:rgba(255,255,255,.76);margin-top:7px;line-height:1.5}
.svc__more{
  margin-top:13px;font-size:.76rem;font-weight:800;letter-spacing:.04em;
  color:var(--accent-300);display:inline-flex;align-items:center;gap:6px;
  transition:gap .28s cubic-bezier(.2,.7,.2,1)
}
.svc:hover .svc__more{gap:11px}

/* ---------- why-us text grid ---------- */
.why-grid{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:640px){.why-grid{grid-template-columns:repeat(2,1fr);gap:32px}}
@media (min-width:1024px){.why-grid{grid-template-columns:repeat(4,1fr)}}
.why__item p{margin-top:9px;font-size:.94rem;color:var(--slate-500);line-height:1.6}
.section--ink .why__item p{color:rgba(255,255,255,.72)}

/* ---------- process (numbered, not cards) ---------- */
.steps{display:grid;gap:0;counter-reset:s}
@media (min-width:900px){.steps{grid-template-columns:repeat(4,1fr);gap:28px}}
.step{counter-increment:s;padding:22px 0;border-top:2px solid var(--pink-50)}
@media (min-width:900px){.step{border-top:2px solid var(--pink-50);padding:22px 0 0}}
.step::before{
  content:"0" counter(s);display:block;font-size:.82rem;font-weight:900;letter-spacing:.1em;
  color:var(--pink);margin-bottom:9px
}
.step h3{font-size:1.05rem}
.step p{font-size:.9rem;color:var(--slate-500);margin-top:7px}

/* ---------- split feature ---------- */
.split{display:grid;gap:30px;align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:56px}}
.split--flip .split__media{order:-1}
@media (min-width:900px){.split--flip .split__media{order:1}}
.split__media img{border-radius:var(--r-card);width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:var(--sh-md)}
.ticks{display:grid;gap:11px;margin-top:22px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;color:var(--slate-700);line-height:1.5}
.section--ink .ticks li{color:rgba(255,255,255,.82)}
.tick{
  flex-shrink:0;width:21px;height:21px;border-radius:50%;background:var(--accent-50);color:var(--accent);
  display:grid;place-items:center;margin-top:1px
}
.tick svg{display:block}
.section--ink .tick{background:rgba(0,188,212,.20);color:var(--accent-300)}

/* ---------- gallery carousel ---------- */
.carousel{position:relative}
.carousel__track{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;
  margin-inline:calc(var(--pad-x) * -1);padding-inline:var(--pad-x);padding-bottom:4px
}
.carousel__track::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.carousel__track{scroll-behavior:auto}}
.carousel__item{
  flex:0 0 78%;max-width:420px;scroll-snap-align:start;
  border-radius:var(--r-card);overflow:hidden;background:var(--slate-100);
  aspect-ratio:4/3
}
@media (min-width:640px){.carousel__item{flex:0 0 46%}}
@media (min-width:1024px){.carousel__item{flex:0 0 31.5%}}
.carousel__item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.2,.7,.2,1)
}
.carousel__item:hover img{transform:scale(1.04)}
.carousel__nav{display:flex;gap:9px;align-items:center}
.carousel__btn{
  appearance:none;margin:0;font-family:inherit;
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  border:1.5px solid var(--slate-200);background:#fff;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
  transition:border-color .16s,background .16s,transform .16s,opacity .16s
}
.carousel__btn:hover:not(:disabled){border-color:var(--ink);background:var(--slate-100)}
.carousel__btn:active:not(:disabled){transform:scale(.94)}
.carousel__btn:disabled{opacity:.32;cursor:default}
.carousel__btn svg{width:17px;height:17px}
.carousel__btn--prev svg{transform:rotate(180deg)}

/* full gallery page keeps a grid, the homepage rail is the carousel */
.gal{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media (min-width:768px){.gal{grid-template-columns:repeat(3,1fr);gap:14px}}
.gal a{display:block;overflow:hidden;border-radius:var(--r-card)}
.gal img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.gal a:hover img{transform:scale(1.04)}

/* ---------- reviews ---------- */
.rev-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;margin-inline:calc(var(--pad-x) * -1);padding-inline:var(--pad-x);scrollbar-width:thin}
.rev{
  flex:0 0 84%;max-width:380px;scroll-snap-align:start;
  background:#fff;border:1px solid var(--slate-100);border-radius:var(--r-card);padding:22px;box-shadow:var(--sh-sm)
}
@media (min-width:768px){.rev{flex:0 0 340px}}
.rev p{font-size:.94rem;color:var(--slate-700);margin-top:11px;line-height:1.6}
.rev__who{margin-top:16px;padding-top:14px;border-top:1px solid var(--slate-100);font-size:.82rem}
.rev__who b{display:block;font-weight:800;color:var(--ink)}
.rev__who span{color:var(--slate-400);font-size:.76rem}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--slate-200)}
.faq details{border-bottom:1px solid var(--slate-200)}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;
  font-weight:800;font-size:1rem;letter-spacing:-.01em
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:24px;width:10px;height:10px;
  border-right:2px solid var(--slate-400);border-bottom:2px solid var(--slate-400);
  transform:rotate(45deg);transition:transform .2s
}
.faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--accent)}
.faq details p{padding:0 0 20px;color:var(--slate-500);font-size:.94rem;max-width:70ch}

/* ---------- area chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.chip{
  padding:9px 16px;border-radius:var(--r-pill);border:1.5px solid var(--slate-200);
  font-size:.86rem;font-weight:700;color:var(--slate-700);transition:all .16s
}
.chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-50)}
.section--ink .chip{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.86)}
.section--ink .chip:hover{border-color:#fff;background:rgba(255,255,255,.10);color:#fff}

/* ---------- big CTA ---------- */
.cta{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.cta::before{
  content:"";position:absolute;width:520px;height:520px;right:-160px;top:-190px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,188,212,.24) 0%,rgba(240,180,216,.14) 45%,transparent 70%)
}
.cta__inner{position:relative;z-index:1;text-align:center;padding-block:56px}
@media (min-width:768px){.cta__inner{padding-block:80px}}
.cta h2{font-size:clamp(1.7rem,5vw,2.6rem)}
.cta p{margin:14px auto 0;max-width:52ch;color:rgba(255,255,255,.76)}
.cta__actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:11px;justify-content:center}

/* ---------- footer ---------- */
.footer{background:var(--ink-2);color:rgba(255,255,255,.66);font-size:.88rem}
.footer__grid{display:grid;gap:32px;padding-block:44px}
@media (min-width:768px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-block:60px}}
.footer__h{font-size:.74rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:15px}
.footer li{margin-bottom:9px}
.footer a:hover{color:#fff}
.footer .brand__logo{height:38px}
.footer__bot{border-top:1px solid rgba(255,255,255,.12);padding-block:20px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.78rem}
.footer__bot a{margin-left:16px}
.hours{display:grid;gap:5px;font-size:.82rem}
.hours div{display:flex;justify-content:space-between;gap:14px}

/* ---------- prose (service/area page body copy) ---------- */
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.4rem,3.6vw,1.85rem);margin-top:38px;margin-bottom:12px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.12rem;margin-top:26px;margin-bottom:8px}
.prose p{color:var(--slate-700);margin-bottom:15px;line-height:1.72;text-wrap:pretty}
.prose ul.ticks{margin-bottom:18px}
.prose strong{color:var(--ink);font-weight:800}

.layout-2col{display:grid;gap:36px}
@media (min-width:1024px){.layout-2col{grid-template-columns:minmax(0,1fr) 380px;gap:52px;align-items:start}}
.sidebar{position:relative}
@media (min-width:1024px){.sidebar{position:sticky;top:calc(var(--nav-h) + 20px)}}
.sidecard{background:var(--paper);border:1px solid var(--slate-100);border-radius:var(--r-card);padding:22px;margin-bottom:16px}
.sidecard h3{font-size:1.02rem;margin-bottom:12px}
.sidecard li{margin-bottom:8px}
.sidecard li a{font-size:.9rem;font-weight:700;color:var(--slate-700);display:flex;justify-content:space-between;gap:10px;padding:6px 0}
.sidecard li a:hover{color:var(--accent)}

/* pricing-ish info rows, grouped not hairline-per-row */
.infogrid{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:640px){.infogrid{grid-template-columns:repeat(2,1fr)}}
.infocard{background:var(--paper);border:1px solid var(--slate-100);border-radius:var(--r-card);padding:18px}
.infocard b{display:block;font-size:1.5rem;font-weight:900;letter-spacing:-.03em;color:var(--accent)}
.infocard span{display:block;font-weight:800;font-size:.92rem;margin-top:2px}
.infocard p{font-size:.84rem;color:var(--slate-500);margin-top:6px;line-height:1.5}

/* ---------- motion: scroll reveal ---------- */
/* Reveal enhances an already-visible default. The hidden start state is
   scoped to .js so no-JS, crawlers and headless renderers get the content. */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .62s cubic-bezier(.2,.7,.2,1),transform .62s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .svc,.svc::before,.svc img,.btn,.gal img{transition:none!important}
}

/* ---------- a11y ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:var(--z-skip);background:var(--accent);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-weight:800}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.no-scroll{overflow:hidden}