/* ============================================================
   SHINE CLEANING — Design System (brand style sheet)
   Headings: Futura PT (Jost web fallback)  ·  Body: Lato
   Colours: Purple #6022A6 · Turquoise #28D2D1 · Indigo #212B46
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800;900&family=Lato:wght@400;700;900&display=swap');

:root{
  /* brand — official style sheet */
  --teal:        #28D2D1;
  --teal-bright: #28D2D1;
  --teal-deep:   #0d8a89;
  --purple:      #6022A6;
  --violet:      #6022A6;
  --violet-soft: #8a52cf;

  /* ink + surfaces */
  --ink:    #212B46;
  --ink-2:  #2d3a5c;
  --muted:  #5d6480;
  --line:   #e6e6f1;
  --cloud:  #f5f4fa;
  --cloud-2:#e9e9f4;
  --white:  #ffffff;

  /* gradients (flat solids, brand colours) */
  --grad-brand: #6022A6;
  --grad-teal:  #28D2D1;
  --grad-violet:#6022A6;
  --scrim:      rgba(33,43,70,.58);
  --scrim-side: rgba(33,43,70,.64);

  /* type */
  --f-display:"Futura PT", "Futura", "Jost", system-ui, sans-serif;
  --f-body:"Lato", system-ui, sans-serif;

  /* shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(33,18,66,.06);
  --shadow-md: 0 14px 40px rgba(33,18,66,.10);
  --shadow-lg: 0 30px 70px rgba(33,18,66,.18);
  --shadow-teal: 0 16px 38px rgba(40,210,209,.32);
  --shadow-violet: 0 16px 38px rgba(96,34,166,.30);

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --nav-h: 80px;
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--f-body); color:var(--ink);
  background:#f6f5fb; line-height:1.6; font-size:17px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:800; line-height:1.05; margin:0; letter-spacing:-.01em; color:var(--ink); text-transform:uppercase; }
p{ margin:0; }
::selection{ background:var(--teal); color:#fff; }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(64px,8vw,128px); }
.section--tight{ padding-block:clamp(48px,6vw,88px); }
.center{ text-align:center; }
.stack{ display:flex; flex-direction:column; }

/* eyebrow */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--f-body); font-weight:800; font-size:.8rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--teal-deep);
}
.eyebrow--center{ justify-content:center; }
.eyebrow--light{ color:var(--teal-bright); }

.h-xl{ font-size:clamp(2.6rem,6.4vw,5.1rem); }
.h-lg{ font-size:clamp(2.1rem,4.6vw,3.6rem); }
.h-md{ font-size:clamp(1.6rem,3vw,2.5rem); }
.lead{ font-size:clamp(1.05rem,1.5vw,1.28rem); color:var(--muted); }
.tealtext{ color:var(--teal-deep); }
.violettext{ color:var(--violet); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--f-body); font-weight:800; font-size:.9rem; text-transform:uppercase; letter-spacing:.05em;
  padding:1em 1.7em; border-radius:var(--r-pill); line-height:1;
  transition:transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
  white-space:nowrap; position:relative; overflow:hidden;
}
.btn::after{ content:""; position:absolute; top:0; left:-140%; width:55%; height:100%; background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%); transform:skewX(-22deg); pointer-events:none; transition:left .65s cubic-bezier(.4,0,.2,1); }
.btn:hover::after{ left:150%; }
.btn svg{ width:1.05em; height:1.05em; }
.btn--teal{ background:var(--grad-teal); color:#06343a; box-shadow:var(--shadow-teal); }
.btn--teal:hover{ transform:translateY(-3px); box-shadow:0 22px 48px rgba(40,210,209,.42); }
.btn--violet{ background:var(--grad-violet); color:#fff; box-shadow:var(--shadow-violet); }
.btn--violet:hover{ transform:translateY(-3px); box-shadow:0 22px 48px rgba(96,34,166,.42); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ transform:translateY(-3px); background:#23163f; }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--line); }
.btn--ghost:hover{ box-shadow:inset 0 0 0 2px var(--teal); color:var(--teal-deep); }
.btn--ghost-light{ background:rgba(255,255,255,.08); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4); backdrop-filter:blur(6px); }
.btn--ghost-light:hover{ background:rgba(255,255,255,.18); transform:translateY(-3px); }
.btn--lg{ padding:1.15em 2.1em; font-size:.98rem; }
.btn--block{ width:100%; }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:fixed; top:16px; left:0; right:0; z-index:1000;
  display:flex; justify-content:center; pointer-events:none;
}
.nav__inner{ pointer-events:auto; width:min(1200px, calc(100% - 28px)); height:64px; padding:0 .5rem 0 1.4rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:rgba(255,255,255,.46); -webkit-backdrop-filter:blur(22px) saturate(1.6); backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.45); border-radius:var(--r-pill); box-shadow:0 12px 40px rgba(33,18,66,.13);
  transition:background .3s, box-shadow .3s; }
.nav__logo{ display:flex; align-items:center; gap:.55rem; z-index:2; flex:none; }
.nav__logo img{ height:34px; width:auto; flex:none; }
.nav__links{ display:flex; align-items:center; gap:.2rem; flex:0 1 auto; min-width:0; }
.nav__link{
  position:relative; font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; padding:.65em .85em; border-radius:var(--r-pill);
  color:var(--ink); transition:color .18s, background .18s; display:inline-flex; align-items:center; gap:.35em;
}
.nav__link:hover{ color:var(--teal-deep); background:var(--cloud); }
.nav__link svg{ width:.7em; height:.7em; transition:transform .2s; }
.nav__item{ position:relative; }
.nav__item:hover .nav__link svg{ transform:rotate(180deg); }
.nav__cta{ display:flex; align-items:center; gap:.6rem; z-index:2; flex:none; }
.nav__phone{ display:inline-flex; align-items:center; gap:.5em; font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; padding:.7em 1.1em; border-radius:var(--r-pill); transition:color .2s, background .2s, box-shadow .2s; white-space:nowrap; flex:none; box-shadow:inset 0 0 0 1.5px var(--line); color:var(--ink); }
.nav__phone svg{ width:1.05em; height:1.05em; color:var(--teal-deep); flex:none; }
.nav__phone:hover{ color:var(--teal-deep); box-shadow:inset 0 0 0 1.5px var(--teal); background:rgba(40,210,209,.08); }

/* dropdown */
.dropdown{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%,8px);
  background:#fff; border-radius:var(--r-md); box-shadow:var(--shadow-lg);
  padding:.6rem; min-width:260px; opacity:0; visibility:hidden; transition:opacity .2s, transform .2s;
  border:1px solid var(--line);
}
.dropdown--wide{ min-width:520px; display:grid; grid-template-columns:1fr 1fr; gap:.2rem; }
.nav__item:hover .dropdown{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.dropdown a{ display:flex; align-items:center; gap:.7rem; padding:.62rem .8rem; border-radius:10px; font-size:.92rem; font-weight:600; color:var(--ink-2); transition:background .15s, color .15s; }
.dropdown a:hover{ background:var(--cloud); color:var(--teal-deep); }
.dropdown a .dot{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--cloud-2); color:var(--violet); flex:none; }
.dropdown a:hover .dot{ background:var(--grad-teal); color:#fff; }

/* nav state: pill gets a touch more opaque on scroll, still see-through */
.nav--scrolled .nav__inner{ background:rgba(255,255,255,.64); box-shadow:0 14px 46px rgba(33,18,66,.18); }

.nav__burger{ display:none; position:relative; width:46px; height:46px; border-radius:12px; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.nav__burger span{ width:22px; height:2px; background:var(--ink); border-radius:2px; transition:opacity .2s; }
.nav--open .nav__burger span{ opacity:0; }
.nav--open .nav__burger::before,
.nav--open .nav__burger::after{ content:""; position:absolute; left:50%; top:50%; width:24px; height:2px; background:var(--ink); border-radius:2px; }
.nav--open .nav__burger::before{ transform:translate(-50%,-50%) rotate(45deg); }
.nav--open .nav__burger::after{ transform:translate(-50%,-50%) rotate(-45deg); }

/* ---------- mobile menu ---------- */
.mobile{
  position:fixed; inset:0; z-index:999; background:var(--ink);
  padding:calc(var(--nav-h) + 20px) var(--gut) 40px; overflow-y:auto;
  transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; justify-content:center;
}
.nav--open + .mobile, .mobile--open{ transform:translateX(0); }
.mobile a{ color:#fff; }
.mobile__group{ border-top:1px solid rgba(255,255,255,.1); }
.mobile__top{ display:flex; align-items:center; justify-content:center; text-align:center; width:100%; padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.1); font-family:var(--f-display); font-weight:700; font-size:1.35rem; color:#fff; }
.mobile__top svg{ width:1.1rem; height:1.1rem; transition:transform .25s; color:var(--teal-bright); }
.mobile__group.open .mobile__top svg{ transform:rotate(180deg); }
.mobile__sub{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.mobile__group.open .mobile__sub{ grid-template-rows:1fr; }
.mobile__sub > div{ overflow:hidden; }
.mobile__sub a{ display:block; padding:.55rem 0 .55rem 1rem; font-size:1.02rem; color:rgba(255,255,255,.72); }
.mobile__sub a:last-child{ padding-bottom:1rem; }
.mobile__cta{ margin-top:1.75rem; display:flex; flex-direction:column; gap:.8rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; isolation:isolate; color:#fff; }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img,.hero__media video{ width:100%; height:100%; object-fit:cover; }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:var(--scrim-side); }
.hero__inner{ width:100%; max-width:var(--maxw); margin:0 auto; padding:calc(var(--nav-h) + 18px) var(--gut) clamp(40px,6vh,80px); }
.hero__content{ max-width:780px; margin-inline:auto; text-align:center; }
.hero h1{ color:#fff; margin:.2em 0 .4em; text-shadow:0 4px 30px rgba(0,0,0,.28); font-size:clamp(2.7rem,6.4vw,5.4rem); line-height:.92; letter-spacing:-.02em; }
.hero__sub{ font-size:clamp(1.08rem,1.6vw,1.4rem); color:rgba(255,255,255,.92); max-width:600px; margin-top:.2rem; margin-inline:auto; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.3rem; }
.hero .hero__actions{ justify-content:center; }
.hero__badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.6rem; margin-top:1.5rem; padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.2); }
.hero__badge{ display:inline-flex; align-items:center; gap:.55em; font-weight:600; font-size:.95rem; color:rgba(255,255,255,.94); }
.hero__badge svg{ width:1.15em; height:1.15em; color:var(--teal-bright); flex:none; }

/* page hero (interior pages) */
.phero{ position:relative; padding:calc(var(--nav-h) + clamp(46px,7vw,86px)) 0 clamp(46px,7vw,86px); color:#fff; isolation:isolate; overflow:hidden; text-align:center; }
.phero--brand{ background:var(--grad-brand); }
.phero--media{ background:var(--ink); }
.phero--media .phero__bg{ position:absolute; inset:0; z-index:-2; opacity:.42; }
.phero--media .phero__bg img{ width:100%; height:100%; object-fit:cover; }
.phero::after{ content:""; position:absolute; inset:0; z-index:-1; }
.phero--media::after{ background:rgba(20,11,42,.62); }
.phero__blob{ display:none; }
.phero h1{ color:#fff; max-width:18ch; margin-inline:auto; }
.phero .lead{ color:rgba(255,255,255,.86); max-width:60ch; margin-top:1rem; margin-inline:auto; }
.phero .hero__actions{ justify-content:center; }
.crumbs{ display:flex; gap:.5em; align-items:center; justify-content:center; font-size:.86rem; color:rgba(255,255,255,.7); font-weight:600; margin-bottom:1.3rem; flex-wrap:wrap; }
.crumbs a:hover{ color:#fff; }
.crumbs span{ opacity:.5; }

/* ============================================================
   GUARANTEE / TRUST BAR
   ============================================================ */
.trustbar{ background:var(--ink); color:#fff; }
.trustbar__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.08); }
.trustbar__cell{ background:var(--ink); padding:1.5rem var(--gut); display:flex; align-items:center; gap:.9rem; justify-content:center; }
.trustbar__cell svg{ width:1.7rem; height:1.7rem; color:var(--teal-bright); flex:none; }
.trustbar__cell b{ font-family:var(--f-display); font-size:1.05rem; display:block; }
.trustbar__cell small{ color:rgba(255,255,255,.6); font-size:.82rem; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{ overflow:hidden; padding:1.1rem 0; background:var(--grad-violet); color:#fff; }
.marquee__track{ display:flex; gap:0; width:max-content; animation:marquee 32s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ display:inline-flex; align-items:center; gap:1.4rem; padding-inline:1.4rem; font-family:var(--f-display); font-weight:700; font-size:clamp(1.1rem,2vw,1.6rem); white-space:nowrap; }
.marquee__item svg{ width:1rem; height:1rem; color:var(--teal-bright); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   STATS
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,3vw,2.5rem); }
.stat{ text-align:center; }
.stat__num{ font-family:var(--f-display); font-weight:800; font-size:clamp(2.6rem,5vw,4rem); line-height:1; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-.03em; }
.stat__label{ margin-top:.5rem; color:var(--muted); font-weight:600; font-size:.96rem; }

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); }
.crewcard{ background:rgba(255,255,255,.08); border-radius:var(--r-lg); overflow:hidden; }
.crewcard img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
.crewcard__body{ padding:1.3rem 1.4rem 1.6rem; }
.crewcard__body h3{ color:#fff; font-size:1.15rem; }
.crewcard__body p{ color:rgba(255,255,255,.82); font-size:.95rem; margin-top:.45rem; }
.scard{ position:relative; display:block; border-radius:var(--r-lg); overflow:hidden; min-height:400px; box-shadow:var(--shadow-md); isolation:isolate; color:#fff; }
.scard__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.scard:hover .scard__bg{ transform:scale(1.07); }
.scard::after{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(13,8,26,.5); transition:background .4s; }
.scard__overlay{ position:absolute; left:0; right:0; bottom:0; padding:1.7rem; }
.scard__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.scard__head h3{ color:#fff; font-size:1.5rem; line-height:1.05; }
.scard__arrow{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:grid; place-items:center; flex:none; transition:transform .35s, background .35s; }
.scard__arrow svg{ width:1.2rem; height:1.2rem; color:#fff; }
.scard:hover .scard__arrow{ background:var(--grad-teal); transform:translateX(4px); }
.scard__arrow svg{ stroke:#fff; }
.scard:hover .scard__arrow svg{ stroke:#06343a; }
.scard__desc{ margin-top:.85rem; color:rgba(255,255,255,.92); font-size:.97rem; text-transform:none; max-height:0; opacity:0; transform:translateY(10px); overflow:hidden; transition:max-height .45s ease, opacity .4s ease, transform .45s ease; }
.scard:hover .scard__desc{ max-height:220px; opacity:1; transform:none; }
@media (hover:none){ .scard__desc{ max-height:220px; opacity:1; transform:none; } }

/* simple icon grid */
.feat{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,2rem); }
/* exactly-4 grids read cleaner as a centered 2x2 than a 3+1 row */
.cards:has(> *:nth-child(4):last-child){ grid-template-columns:repeat(2,1fr); max-width:920px; margin-inline:auto; }
.feat:has(> .feat__item:nth-child(4):last-child){ grid-template-columns:repeat(2,1fr); max-width:820px; margin-inline:auto; }
.feat__item{ display:flex; gap:1rem; }
.feat__ic{ width:50px; height:50px; border-radius:14px; flex:none; display:grid; place-items:center; background:var(--cloud); color:var(--violet); }
.feat__ic svg{ width:24px; height:24px; }
.feat__item h4,.feat__item h3{ font-size:1.12rem; }
.feat__item p{ color:var(--muted); font-size:.94rem; margin-top:.3rem; }
.included-sec{ padding-bottom:clamp(48px,5vw,80px); }
.included-sec .feat__item h4,.included-sec .feat__item h3{ color:var(--violet); }
.included-sec .feat__ic{ background:var(--violet); color:#fff; }
.included-sec .feat__item{ align-items:center; }
.bg-cloud.steps-sec .eyebrow{ color:var(--violet); }
.bg-cloud.steps-sec .step__n{ background:none; -webkit-text-fill-color:var(--violet); color:var(--violet); opacity:1; }

/* ============================================================
   SPLIT (image + text)
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.split--rev .split__media{ order:2; }
.split__media{ position:relative; }
.split__media img{ border-radius:var(--r-lg); box-shadow:var(--shadow-lg); aspect-ratio:4/5; object-fit:cover; width:100%; }
.split__media--wide img{ aspect-ratio:5/4; }
.split__badge{ position:absolute; background:#fff; border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:1rem 1.2rem; display:flex; align-items:center; gap:.8rem; }
.split__badge--br{ right:-18px; bottom:24px; }
.split__badge--tl{ left:-18px; top:24px; }
.split__badge .big{ font-family:var(--f-display); font-size:1.7rem; font-weight:800; line-height:1; color:var(--violet); }
.split__badge small{ color:var(--muted); font-size:.8rem; }
.ticklist{ display:grid; gap:.85rem; margin-top:1.6rem; }
.ticklist li{ display:flex; gap:.75rem; align-items:flex-start; font-weight:500; }
.ticklist svg{ width:1.4em; height:1.4em; color:#fff; background:var(--grad-teal); border-radius:50%; padding:.25em; flex:none; margin-top:.1em; }

/* ============================================================
   MEMBERSHIPS
   ============================================================ */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); align-items:stretch; }
.plan{ position:relative; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-lg); padding:2.2rem 1.8rem; display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s; }
.plan:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.plan--featured{ background:#4a1fae; color:#fff; border-color:transparent; box-shadow:var(--shadow-lg); }
.plan--featured h3,.plan--featured .plan__price{ color:#fff; }
.plan__tag{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--grad-teal); color:#06343a; font-weight:800; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; padding:.45em 1.1em; border-radius:var(--r-pill); white-space:nowrap; }
.plan__name{ font-size:1.3rem; }
.plan__price{ font-family:var(--f-display); font-weight:800; font-size:3rem; line-height:1; margin:.6rem 0 .1rem; letter-spacing:-.03em; }
.plan--featured .plan__price{ color:var(--teal-bright); }
.plan__per{ color:var(--muted); font-size:.9rem; }
.plan--featured .plan__per{ color:rgba(255,255,255,.6); }
.plan__list{ display:grid; gap:.7rem; margin:1.5rem 0; padding-top:1.5rem; border-top:1px solid var(--line); flex:1; }
.plan--featured .plan__list{ border-color:rgba(255,255,255,.14); }
.plan__list li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.95rem; }
.plan__list svg{ width:1.2em; height:1.2em; flex:none; margin-top:.15em; color:var(--teal); }
.plan__list li.no{ color:inherit; }
.plan--featured .plan__list li.no{ color:inherit; }
.plan__list li.yes svg{ color:#16b06f; }
.plan__list li.no svg{ color:#ff5a6e; }

/* ============================================================
   BEFORE / AFTER SLIDER
   ============================================================ */
.ba{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:16/10; user-select:none; touch-action:none; }
.ba__img{ position:absolute; inset:0; }
.ba__img img{ width:100%; height:100%; object-fit:cover; }
.ba__after{ clip-path:inset(0 0 0 var(--pos,50%)); }
.ba__label{ position:absolute; top:16px; padding:.4em 1em; border-radius:var(--r-pill); font-weight:800; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:#fff; backdrop-filter:blur(4px); }
.ba__label--before{ left:16px; background:rgba(22,12,46,.7); }
.ba__label--after{ right:16px; background:rgba(24,179,185,.85); color:#06343a; }
.ba__handle{ position:absolute; top:0; bottom:0; left:var(--pos,50%); width:3px; background:#fff; transform:translateX(-50%); box-shadow:0 0 18px rgba(0,0,0,.4); }
.ba__grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:var(--shadow-md); }
.ba__grip svg{ width:26px; height:26px; color:var(--violet); }

/* ============================================================
   REVIEWS CAROUSEL
   ============================================================ */
.reviews{ position:relative; }
.reviews__viewport{ overflow:hidden; }
.reviews__track{ display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.review{ flex:0 0 100%; padding:0 .5rem; }
@media(min-width:760px){ .review{ flex-basis:50%; } }
@media(min-width:1080px){ .review{ flex-basis:33.333%; } }
.review__card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:2rem 1.8rem; box-shadow:var(--shadow-sm); height:100%; display:flex; flex-direction:column; }
.review__stars{ display:flex; gap:.15rem; color:#f5b400; margin-bottom:1rem; }
.review__stars svg{ width:1.1rem; height:1.1rem; }
.review__text{ font-size:1.04rem; color:var(--ink-2); flex:1; }
.review__who{ display:flex; align-items:center; gap:.8rem; margin-top:1.4rem; }
.review__av{ width:44px; height:44px; border-radius:50%; background:var(--grad-violet); color:#fff; display:grid; place-items:center; font-family:var(--f-display); font-weight:800; flex:none; }
.review__who b{ display:block; font-size:.97rem; }
.review__who small{ color:var(--muted); font-size:.82rem; display:flex; align-items:center; gap:.3em; white-space:nowrap; }
.review__who small svg{ width:.95em; height:.95em; flex:none; }
.reviews__nav{ display:flex; gap:.6rem; justify-content:center; margin-top:2rem; }
.reviews__dot{ width:9px; height:9px; border-radius:50%; background:var(--cloud-2); transition:.25s; }
.reviews__dot.active{ background:var(--teal); width:28px; border-radius:5px; }
.rnav-btn{ width:48px; height:48px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; transition:.2s; background:#fff; color:var(--ink); }
.rnav-btn:hover{ border-color:var(--teal); color:var(--teal-deep); transform:translateY(-2px); }
.rnav-btn svg{ width:1.2rem; height:1.2rem; }

/* ============================================================
   AREA / MAP
   ============================================================ */
.arealist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.7rem; }
.arealink{ display:flex; align-items:center; gap:.6rem; padding:.85rem 1.05rem; border-radius:var(--r-md); background:#fff; border:1px solid var(--line); font-weight:600; font-size:.95rem; color:var(--ink-2); transition:.2s; }
.arealink:hover{ border-color:var(--teal); color:var(--teal-deep); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.arealink svg{ width:1.05em; height:1.05em; color:var(--violet); flex:none; }
.mapframe{ border:0; width:100%; height:100%; min-height:340px; border-radius:var(--r-lg); filter:grayscale(.2) contrast(1.05); }

/* chips */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }

/* business-info cards */
.infogrid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.infocard{ display:flex; flex-direction:column; gap:.2rem; padding:1.5rem 1.5rem 1.6rem; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s, border-color .25s; }
a.infocard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--teal); }
.infocard__ic{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; background:var(--grad-teal); color:#06343a; margin-bottom:.7rem; }
.infocard__ic svg{ width:24px; height:24px; }
.infocard__ic--violet{ background:var(--grad-violet); color:#fff; }
.infocard__label{ font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.infocard__val{ font-family:var(--f-display); font-size:1.18rem; color:var(--ink); word-break:break-word; }
.infocard small{ color:var(--muted); font-size:.86rem; margin-top:.1rem; }
.hours-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line); font-size:.98rem; }
.hours-row:last-child{ border-bottom:0; }
.hours-row b{ font-weight:700; }
.hours-row .open{ color:var(--teal-deep); font-weight:700; }
.hours-row .closed{ color:var(--muted); }
@media (max-width:560px){ .infogrid{ grid-template-columns:1fr; } }
.chip{ display:inline-flex; align-items:center; gap:.4em; padding:.5em 1em; border-radius:var(--r-pill); background:var(--cloud); font-weight:600; font-size:.9rem; color:var(--ink-2); }
.chip svg{ width:1em; height:1em; color:var(--teal-deep); }

/* ============================================================
   CTA BANNER
   ============================================================ */
.ctaband{ position:relative; isolation:isolate; color:#fff; border-radius:var(--r-xl); overflow:hidden; padding:clamp(2.6rem,6vw,5rem); background:var(--grad-brand); text-align:center; }
.ctaband__bg{ display:none; }
.ctaband__bg img{ width:100%; height:100%; object-fit:cover; }
.ctaband::after{ display:none; }
.ctaband h2{ color:#fff; max-width:20ch; margin-inline:auto; }
.ctaband .lead{ color:rgba(255,255,255,.86); max-width:54ch; margin-inline:auto; }
.ctaband .hero__actions{ justify-content:center; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ display:grid; gap:.8rem; max-width:840px; margin:0 auto; }
.faq__item{ border:1px solid var(--line); border-radius:var(--r-md); background:#fff; overflow:hidden; transition:box-shadow .2s; }
.faq__item.open{ box-shadow:var(--shadow-md); border-color:var(--cloud-2); }
.faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem 1.4rem; font-family:var(--f-display); font-weight:700; font-size:1.08rem; text-align:left; color:var(--ink); }
.faq__q svg{ width:1.2rem; height:1.2rem; flex:none; color:var(--teal-deep); transition:transform .25s; }
.faq__item.open .faq__q svg{ transform:rotate(45deg); }
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.faq__item.open .faq__a{ grid-template-rows:1fr; }
.faq__a > div{ overflow:hidden; }
.faq__a p{ padding:0 1.4rem 1.3rem; color:var(--muted); }

/* ============================================================
   FORM / QUOTE (multi-step)
   ============================================================ */
.quote{ background:#fff; border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.quote__head{ padding:1.6rem clamp(1.4rem,4vw,2.4rem); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.quote__steps{ display:flex; align-items:center; gap:.5rem; }
.qstep{ display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.9rem; color:var(--muted); }
.qstep__num{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--cloud); color:var(--muted); font-size:.85rem; transition:.25s; }
.qstep.active .qstep__num{ background:var(--grad-teal); color:#06343a; }
.qstep.done .qstep__num{ background:var(--violet); color:#fff; }
.qstep.active{ color:var(--ink); }
.qstep__line{ width:26px; height:2px; background:var(--line); }
.quote__body{ padding:clamp(1.6rem,4vw,2.6rem); }
.qpanel{ display:none; animation:fade .35s ease; }
.qpanel.active{ display:block; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
.qgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field--full{ grid-column:1/-1; }
.field label{ font-weight:600; font-size:.9rem; }
.field input,.field select,.field textarea{ font-family:inherit; font-size:1rem; padding:.85em 1em; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--cloud); transition:.2s; color:var(--ink); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--teal); background:#fff; box-shadow:0 0 0 4px rgba(24,179,185,.12); }
.field.invalid input,.field.invalid select{ border-color:#e0556b; background:#fff5f6; }
.field__err{ color:#d23a52; font-size:.8rem; font-weight:600; display:none; }
.field.invalid .field__err{ display:block; }
.optgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.7rem; }
.opt{ position:relative; }
.opt input{ position:absolute; opacity:0; }
.opt label{ display:flex; align-items:center; gap:.6rem; padding:.9rem 1rem; border:1.5px solid var(--line); border-radius:var(--r-md); cursor:pointer; font-weight:600; font-size:.95rem; transition:.18s; height:100%; }
.opt label .optic{ width:34px; height:34px; border-radius:9px; background:var(--cloud); display:grid; place-items:center; color:var(--violet); flex:none; transition:.18s; }
.opt label .optic svg{ width:18px; height:18px; }
.opt input:checked + label{ border-color:var(--teal); background:rgba(24,179,185,.06); box-shadow:0 0 0 3px rgba(24,179,185,.1); }
.opt input:checked + label .optic{ background:var(--grad-teal); color:#fff; }
.opt input:focus-visible + label{ box-shadow:0 0 0 3px rgba(123,60,208,.25); }
.quote__foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.8rem; }
.quote__success{ text-align:center; padding:clamp(2rem,5vw,3.5rem) 1rem; display:none; }
.quote__success.show{ display:block; animation:fade .4s ease; }
.quote__success .tick{ width:84px; height:84px; border-radius:50%; background:var(--grad-teal); display:grid; place-items:center; margin:0 auto 1.4rem; box-shadow:var(--shadow-teal); }
.quote__success .tick svg{ width:42px; height:42px; color:#fff; }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{ columns:3; column-gap:1rem; }
.gallery img{ width:100%; border-radius:var(--r-md); margin-bottom:1rem; break-inside:avoid; box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s; }
.gallery img:hover{ transform:scale(1.02); box-shadow:var(--shadow-lg); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:#212B46; color:rgba(255,255,255,.66); padding-top:clamp(3rem,6vw,5rem); border-top:1px solid rgba(255,255,255,.08); }
.footer__top{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:2.6rem; border-bottom:1px solid rgba(255,255,255,.1); }
.footer__logo img{ height:46px; width:auto; filter:drop-shadow(0 3px 14px rgba(0,0,0,.4)); }
.footer__social{ display:flex; gap:.6rem; margin-top:1.4rem; }
.footer__social a{ width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.07); color:#fff; display:grid; place-items:center; transition:.2s; }
.footer__social a:hover{ background:var(--grad-teal); color:#06343a; transform:translateY(-3px); }
.footer__social svg{ width:20px; height:20px; }
.footer__contact2{ margin-top:1.3rem; display:grid; gap:.55rem; }
.footer__contact2 a{ display:flex; align-items:center; gap:.6rem; font-weight:600; color:rgba(255,255,255,.78); font-size:.96rem; transition:color .15s; }
.footer__contact2 a:hover{ color:var(--teal-bright); }
.footer__contact2 svg{ width:1.15rem; height:1.15rem; color:var(--teal-bright); flex:none; }
.footer h5,.footer__h{ font-family:var(--f-display); color:#fff; font-size:.92rem; text-transform:uppercase; letter-spacing:.06em; margin:0 0 1rem; }
.footer__col a{ display:block; padding:.32rem 0; font-size:.94rem; color:rgba(255,255,255,.62); transition:color .15s, padding .15s; }
.footer__col a:hover{ color:var(--violet-soft); padding-left:5px; }
.footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.5rem 0; font-size:.85rem; color:rgba(255,255,255,.55); }
.footer__amplify img{ height:34px; width:auto; opacity:.7; transition:opacity .2s; }
.footer__amplify:hover img{ opacity:1; }

/* floating call btn (mobile) */
.fab{ position:fixed; right:18px; bottom:18px; z-index:900; display:none; }
.fab a{ display:flex; align-items:center; gap:.5em; background:var(--grad-teal); color:#06343a; font-weight:800; padding:.9em 1.3em; border-radius:var(--r-pill); box-shadow:var(--shadow-teal); }
.fab svg{ width:1.2em; height:1.2em; }

/* reveal */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-d="1"]{ transition-delay:.08s; }
[data-reveal-d="2"]{ transition-delay:.16s; }
[data-reveal-d="3"]{ transition-delay:.24s; }
[data-reveal-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } [data-reveal]{ opacity:1; transform:none; } }

/* misc helpers */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.4rem); }
.grid-2--hero{ align-items:center; }
.muted{ color:var(--muted); }
.mt-1{ margin-top:.6rem; } .mt-2{ margin-top:1.2rem; } .mt-3{ margin-top:2rem; } .mt-4{ margin-top:3rem; }
.pill-row{ display:flex; flex-wrap:wrap; gap:.7rem; }
.sec-head{ max-width:680px; margin-left:auto; margin-right:auto; text-align:center; }
.sec-head--center{ margin:0 auto; text-align:center; }
.sec-head .lead{ margin-top:1rem; }
/* ===== BOLD BRAND SECTIONS — brand turquoise & purple ===== */
.bg-cloud{ background:#0f9c9b; }
.bg-ink{ background:#6022A6; }
.bg-cloud h1,.bg-cloud h2,.bg-cloud h3,.bg-cloud h4,.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4{ color:#fff; }
.bg-cloud .eyebrow{ color:var(--violet); }
.bg-ink .eyebrow{ color:#e0fcfc; }
.bg-cloud .lead,.bg-ink .lead{ color:rgba(255,255,255,.86); }
.bg-cloud .muted,.bg-ink .muted{ color:rgba(255,255,255,.74); }
.bg-cloud .feat__ic,.bg-ink .feat__ic{ background:rgba(255,255,255,.18); color:#fff; }
.bg-cloud .feat__item h4,.bg-ink .feat__item h4,.bg-cloud .feat__item h3,.bg-ink .feat__item h3{ color:#fff; }
.bg-cloud .feat__item p,.bg-ink .feat__item p{ color:rgba(255,255,255,.82); }
.bg-cloud .step h4,.bg-ink .step h4{ color:#fff; }
.bg-cloud .step p,.bg-ink .step p{ color:rgba(255,255,255,.82); }
.bg-cloud .step__n,.bg-ink .step__n{ background:none; -webkit-text-fill-color:#fff; color:#fff; opacity:.92; }
.bg-cloud .step:not(:last-child)::after,.bg-ink .step:not(:last-child)::after{ background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 8px,transparent 8px 16px); }
.bg-cloud .stat__num,.bg-ink .stat__num{ background:none; -webkit-text-fill-color:#fff; color:#fff; }
.bg-cloud .stat__label{ color:var(--violet); }
.bg-ink .stat__label{ color:rgba(255,255,255,.8); }
.bg-cloud .prose p,.bg-ink .prose p{ color:rgba(255,255,255,.9); }
.bg-cloud .prose ul li,.bg-ink .prose ul li{ color:#fff; }
.bg-cloud .btn--ghost,.bg-ink .btn--ghost{ color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55); }
.bg-cloud .btn--ghost:hover,.bg-ink .btn--ghost:hover{ background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 2px #fff; }
.divider-wave{ height:60px; }

/* prose for content pages */
.prose{ max-width:72ch; }
.prose p{ margin-bottom:1.1rem; color:var(--ink-2); }
.prose h3{ font-size:1.5rem; margin:2.2rem 0 .8rem; }
.prose ul{ margin:1rem 0; padding:0; list-style:none; display:grid; gap:.7rem; }
.prose ul li{ display:flex; gap:.7rem; align-items:flex-start; }
.prose ul li::before{ content:""; width:1.4em; height:1.4em; flex:none; margin-top:.1em; border-radius:50%; background:var(--grad-teal); -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/.9em no-repeat; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/.9em no-repeat; }

/* steps */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; counter-reset:s; }
.step{ position:relative; padding-top:1rem; }
.step__n{ font-family:var(--f-display); font-weight:800; font-size:2.6rem; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; line-height:1; }
.step h4{ margin:.6rem 0 .4rem; font-size:1.15rem; }
.step p{ color:var(--muted); font-size:.94rem; }
.step:not(:last-child)::after{ content:""; position:absolute; top:1.95rem; left:4.2rem; right:-.6rem; height:2px; background:repeating-linear-gradient(90deg,var(--cloud-2) 0 8px,transparent 8px 16px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .cards,.feat,.plans,.steps{ grid-template-columns:repeat(2,1fr); }
  .trustbar__grid{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; gap:2rem; }
  .gallery{ columns:2; }
  .step:not(:last-child)::after{ display:none; }
}
@media (max-width:980px){
  .nav__links,.nav__cta .btn,.nav__phone{ display:none; }
  .nav__burger{ display:flex; }
}
@media (max-width:820px){
  .nav__links,.nav__cta .btn,.nav__phone{ display:none; }
  .nav__burger{ display:flex; }
  .fab{ display:none; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; }
  .split{ grid-template-columns:1fr; }
  .split--rev .split__media{ order:0; }
  .split__media img{ aspect-ratio:5/4; }
  .grid-2{ grid-template-columns:1fr; }
  .hero{ min-height:92svh; }

  /* ---- center everything on mobile ---- */
  .section, .split, .split > div, .grid-2 > div, .hero__content, .sec-head,
  .prose, .expect-grid > div, .ctaband, .phero .wrap{ text-align:center; }
  .eyebrow{ justify-content:center; }
  .hero__content{ max-width:100%; margin-inline:auto; }
  .hero__actions, .pill-row, .chips{ justify-content:center; }
  .hero__badges{ justify-content:center; }
  .crumbs{ justify-content:center; }
  .lead, .hero__sub, .prose, .sec-head, .footer__about{ margin-inline:auto; }
  /* lists: keep rows readable but center the group */
  .ticklist, .prose ul{ display:inline-grid; text-align:left; justify-items:start; margin-inline:auto; }
  .feat{ justify-items:center; }
  .feat__item{ flex-direction:column; align-items:center; text-align:center; }
  .split__badge{ left:50%!important; right:auto!important; transform:translateX(-50%); }
  .footer__top{ text-align:left; }
  .footer__social, .footer__contact2 a{ justify-content:flex-start; }
  .footer__contact2{ justify-items:start; }
  .footer__bottom{ flex-direction:column; justify-content:center; align-items:center; text-align:center; }
  .arealist{ justify-content:center; grid-template-columns:repeat(2,1fr); gap:.5rem; }
  .arealink{ padding:.6rem .65rem; font-size:.82rem; gap:.4rem; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .cards,.feat,.plans,.steps,.qgrid{ grid-template-columns:1fr; }
  .trustbar__grid{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .gallery{ columns:1; }
  .ba{ aspect-ratio:4/3; }
  .quote__steps .qstep span{ display:none; }
}