/* ============================================================
   BREEZY CLEANING - HOMEPAGE
   Fonts: Fraunces (display), Hanken Grotesk (body), Archivo (cta)
   ============================================================ */
:root{
  /* cool palette */
  --deep-water:#0F4C7F;
  --navy-deep:#083A63;
  --ink:#16324C;
  --sea-breeze:#1A8FCC;
  --deep-breeze:#0F6391;
  --breeze-mist:#E1F2FB;
  --sky-wash:#F4FAFD;
  --slate:#5A6B7A;
  --line:#E2EBF0;
  --line-2:#EDF3F7;
  /* warm - LINES/TYPE only */
  --sun-gold:#F5B11E;
  --sunset:#F5831C;
  --coral:#FF7E87;
  --good:#2E7D5B;
  --white:#fff;

  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-cta:'Archivo',system-ui,sans-serif;

  /* signature warm gradient - matches brand standards (gold -> orange -> coral -> pink) */
  --warm-grad:linear-gradient(115deg,#C97E06 0%,#D3740E 17%,#D46512 34%,#DD5838 52%,#E25069 74%,#E04672 100%);--warm-grad-soft:linear-gradient(115deg,#F5B11E 0%,#F6911B 17%,#F5831C 34%,#FB7E59 52%,#FF7E87 74%,#FF6C88 100%);--sunset-ink:#A85A08;--gold-ink:#B87300;--coral-ink:#B93A47;
  --warm-grad-soft:linear-gradient(115deg,#FFF3DE 0%,#FFE7D6 45%,#FFE0E4 100%);
  /* atmospheric washes */
  --atmo-cool:radial-gradient(120% 90% at 82% 12%,rgba(26,143,204,.16),transparent 60%);
  --atmo-warm:radial-gradient(90% 80% at 88% 82%,rgba(255,126,135,.14),transparent 62%);
  --atmo-gold:radial-gradient(70% 70% at 12% 88%,rgba(245,177,30,.12),transparent 60%);

  --wrap:1240px;
  --radius:16px;
  --radius-sm:11px;
  --shadow-sm:0 2px 10px rgba(16,50,76,.06);
  --shadow-md:0 14px 40px rgba(16,50,76,.10);
  --shadow-lg:0 30px 70px rgba(12,34,55,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:122px}
@media(max-width:940px){html{scroll-padding-top:96px}}
body{
  font-family:var(--font-body);
  color:var(--deep-water);
  background:var(--white);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
em{font-style:italic}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,48px)}

/* ---------- type primitives ---------- */
.eyebrow{
  font-family:var(--font-cta);font-weight:700;font-size:12.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--deep-breeze);
  margin-bottom:16px;display:inline-flex;align-items:center;gap:12px;
}
.eyebrow-light{color:#7FCBF0}
@media(max-width:480px){.eyebrow{font-size:11px;letter-spacing:.13em;gap:10px}.eyebrow-tick::before{width:26px}}
/* editorial tick - warm gradient rule before the eyebrow */
.eyebrow-tick::before{content:"";width:34px;height:3px;border-radius:3px;background:var(--warm-grad);flex:none}
.eyebrow-tick[data-num]::after{content:"/ " attr(data-num);font-weight:800;letter-spacing:.12em;color:var(--sun-gold);opacity:.85}
.eyebrow-light.eyebrow-tick::after{color:var(--sun-gold)}
.sec-h{
  font-family:var(--font-display);font-weight:500;
  font-variation-settings:'opsz' 144;
  font-size:clamp(33px,5vw,62px);line-height:1.02;letter-spacing:-.022em;
  color:var(--deep-water);max-width:16ch;margin-bottom:16px;text-wrap:balance;
}
.sec-h-wide{max-width:22ch}
/* italic + background-clip:text crops Fraunces swashes/descenders. Give the
   painted box headroom on all sides so glyph tails (f,g,y,j) never clip. */
.sec-h em{font-style:italic;font-weight:500;background:var(--warm-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding:.06em .12em .14em .02em;margin:-.06em -.06em -.14em 0;display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;overflow:visible}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--slate);max-width:62ch;line-height:1.65}

/* ---------- global centered homepage layout ---------- */
.section>.wrap{text-align:center}
.section>.wrap .eyebrow,
.section>.wrap .sec-h,
.section>.wrap .lead{margin-left:auto;margin-right:auto}
.section>.wrap .eyebrow{justify-content:center}
/* action rows / button groups centered */
.hero-actions,.hero-pills{justify-content:flex-start}
.hero-inner{text-align:left}
.hero-h,.hero-lead{margin-left:0;margin-right:auto}
.eyebrow-light.eyebrow-tick{justify-content:flex-start}
@media(max-width:760px){.hero-actions,.hero-pills{justify-content:center}.hero-inner{text-align:center}.hero-h,.hero-lead{margin-left:auto;margin-right:auto}.eyebrow-light.eyebrow-tick{justify-content:center}}
/* keep multi-column & data blocks left-aligned for readability */
.bento,.feat-svc,.svc-grid,.estimate-layout,.about,.steps,
.areas,.book-form,.acc{text-align:left}
.bento-tile,.svc-card,.step,.rev,.acc-item,.feat-svc,.about-body{text-align:left}
/* re-center intros that live inside centered sections */
.areas-lead,.rev-agg{text-align:center}
/* estimate is a 2-col block - keep its copy column left-aligned */
.estimate-copy{text-align:left}
.estimate-copy .eyebrow{justify-content:flex-start}
.estimate-copy .sec-h,.estimate-copy .lead{margin-left:0;margin-right:0}
.checks{text-align:left}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-cta);font-weight:800;font-size:15px;letter-spacing:.005em;
  padding:14px 24px;border-radius:999px;border:1.6px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  cursor:pointer;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--deep-water);color:#fff;box-shadow:var(--shadow-sm)}
.btn-solid:hover{background:var(--navy-deep);box-shadow:var(--shadow-md)}
.btn-light{background:#fff;color:var(--deep-water);box-shadow:var(--shadow-md)}
.btn-out{background:transparent;border-color:var(--deep-water);color:var(--deep-water)}
.btn-out:hover{background:var(--deep-water);color:#fff}
.btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(4px)}
.btn-ghost:hover{background:rgba(255,255,255,.18)}
.btn-dashed{border-style:dashed}
.btn-lg{font-size:16px;padding:16px 30px}
.btn-block{display:flex;width:100%;white-space:normal;text-align:center;line-height:1.25}
.btn-gold{background:var(--sun-gold);color:var(--deep-water)}
.btn-gold:hover{background:var(--sunset)}
/* signature warm gradient CTA */
.btn-warm{position:relative;color:#fff;background:var(--warm-grad);background-size:180% 180%;background-position:0% 50%;box-shadow:0 10px 26px rgba(245,131,28,.32),0 2px 6px rgba(255,108,136,.28);transition:transform .18s ease,box-shadow .22s ease,background-position .5s ease}
.btn-warm:hover{transform:translateY(-2px);background-position:100% 50%;box-shadow:0 16px 40px rgba(245,131,28,.42),0 3px 10px rgba(255,108,136,.34)}
.btn-warm:focus-visible{outline:3px solid rgba(255,126,135,.5);outline-offset:2px}

/* ---- signature sparkle button: diagonal light sweep + twinkling star (brand standard) ---- */
.btn-sparkle{position:relative;overflow:hidden}
.btn-sparkle>span:not(.btn-spark){position:relative;z-index:2}
/* diagonal light band sweeps across on hover */
.btn-sparkle::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;z-index:1;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-18deg);pointer-events:none}
.btn-sparkle:hover::after{animation:btn-sweep 1.5s ease-in-out infinite}
@keyframes btn-sweep{0%{left:-130%}55%,100%{left:150%}}
/* twinkling star icon: hidden at rest, pulses + rotates on hover */
.btn-spark{position:absolute;z-index:2;top:6px;right:12px;width:14px;height:14px;pointer-events:none;opacity:0;color:#fff;filter:drop-shadow(0 0 4px rgba(255,255,255,.9))}
.nav-book .btn-spark{top:5px;right:10px;width:11px;height:11px}
.btn-spark svg{display:block;width:100%;height:100%}
.btn-sparkle:hover .btn-spark{animation:btn-twinkle 1.05s ease-in-out infinite}
@keyframes btn-twinkle{0%,100%{opacity:0;transform:scale(.25) rotate(0deg)}45%{opacity:1;transform:scale(1) rotate(80deg)}}
@media(prefers-reduced-motion:reduce){.btn-sparkle:hover::after,.btn-sparkle:hover .btn-spark{animation:none}}
/* light/outline variant: the white sweep is invisible on light buttons, so tint the
   sweep and star to the brand warm tone so the same signature effect reads on them */
.btn-sparkle.spark-warm::after{background:linear-gradient(105deg,transparent,rgba(251,126,89,.42),transparent)}
.btn-sparkle.spark-warm .btn-spark{color:var(--sunset);filter:drop-shadow(0 0 4px rgba(251,126,89,.75))}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s;
}
.site-header.scrolled{border-color:var(--line);box-shadow:0 2px 16px rgba(16,50,76,.05)}
.nav{display:flex;align-items:center;gap:30px;height:104px;transition:height .28s ease}
.site-header.scrolled .nav{height:90px}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--deep-water);flex:none;margin-right:auto}
.brand-logo{height:76px;width:auto;display:block;transition:height .28s ease}
.site-header.scrolled .brand-logo{height:58px}
/* nested hybrid nav: utility row (phone + Book) on top, main row (links + MORE) below, both right-aligned */
.nav-right{display:flex;flex-direction:column;align-items:flex-end;gap:11px;min-width:0}
.site-header.scrolled .nav-right{gap:7px}
/* Scrolled state shrinks the CONTENT of both rows, not just the bar around them.
   Without this the two stacked rows stay 87px tall inside an 84px bar and the
   Book capsule clips through the top edge of the window. */
.site-header.scrolled .nav-book{padding:5px 15px;font-size:12px}
.site-header.scrolled .nav-phone{font-size:12.5px}
.site-header.scrolled .nav-utility{gap:15px}
.site-header.scrolled .nav-main{gap:24px}
.site-header.scrolled .nav-main>a,
.site-header.scrolled .nav-drop .has-sub{font-size:13.5px}
.site-header.scrolled .nav-more-btn{padding:2px 4px;font-size:13.5px}
.site-header.scrolled .nav-more-lines{gap:4px}
.site-header.scrolled .nav-more-lines span{width:24px}
.nav-book,.nav-phone,.nav-main,.nav-utility,.nav-more-btn,.nav-more-lines,.nav-more-lines span{transition:padding .28s ease,font-size .28s ease,gap .28s ease,width .28s ease}
/* utility row: phone (left) + centered Book capsule (right). Stays visible on scroll. */
.nav-utility{display:flex;align-items:center;justify-content:flex-end;gap:18px}
.nav-phone{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-cta);font-weight:700;font-size:13.5px;text-decoration:none;color:var(--deep-water);white-space:nowrap;letter-spacing:.01em;transition:color .2s}
.nav-phone-ic{width:15px;height:15px;flex:none;color:var(--sea-breeze)}
.nav-phone:hover{color:var(--sea-breeze)}
.nav-book{padding:8px 17px;font-size:12.5px}
/* main nav row, right-aligned; visual order right-to-left handled by source order */
.nav-main{display:flex;align-items:center;gap:28px}
.nav-main>a{font-family:var(--font-cta);font-weight:600;font-size:14.5px;text-decoration:none;color:var(--deep-water);position:relative;padding:4px 0;display:inline-flex;align-items:center;gap:5px}
.nav-main>a.has-sub::before{content:"";width:7px;height:7px;order:2;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.55;transition:opacity .2s,transform .2s}
.nav-main>a.has-sub:hover::before{opacity:.9;transform:translateY(-1px) rotate(45deg)}
.nav-main>a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--warm-grad);transition:width .22s ease}
.nav-main>a:hover::after{width:100%}
/* MORE hamburger menu */
.nav-more{position:relative}
.nav-more-btn{display:inline-flex;align-items:center;gap:11px;background:none;border:none;cursor:pointer;padding:6px 4px;font-family:var(--font-cta);font-weight:700;font-size:14.5px;letter-spacing:.09em;color:var(--deep-water)}
.nav-more-lines{display:flex;flex-direction:column;gap:5px}
.nav-more-lines span{display:block;width:27px;height:3px;background:var(--deep-water);border-radius:2px;transition:transform .28s ease,opacity .2s ease}
.nav-more-btn[aria-expanded="true"] .nav-more-lines span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-more-btn[aria-expanded="true"] .nav-more-lines span:nth-child(2){opacity:0}
.nav-more-btn[aria-expanded="true"] .nav-more-lines span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nav-more-label{line-height:1}
.nav-more-btn:hover{color:var(--sea-breeze)}
.nav-more-btn:hover .nav-more-lines span{background:var(--sea-breeze)}
/* MORE opens the slide-out drawer (no dropdown panel) */

/* ---------- mega dropdowns (Office Cleaning / Who We Serve / Service Areas) ---------- */
.nav-drop{position:relative;display:inline-flex}
/* down-arrow caret indicating a dropdown; rotates up when open */
.nav-drop .has-sub{display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.nav-drop .has-sub::before{content:"";order:2;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.6;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s}
.nav-drop .has-sub:hover::before{opacity:.9}
.nav-drop.open .has-sub::before{transform:translateY(1px) rotate(225deg);opacity:.95}
/* the three exposed items use the down-arrow only, no underline */
.nav-drop .has-sub::after{display:none}

.drop-panel{
  position:absolute;top:calc(100% + 16px);left:50%;
  transform:translateX(-50%);
  min-width:max-content;z-index:70;
  pointer-events:none;
}
/* keep the rightmost panel (Service Areas) pinned to the right so it never runs off-screen */
.nav-drop:last-of-type .drop-panel{left:auto;right:0;transform:none}
.nav-drop:last-of-type .drop-inner::after{left:auto;right:64px;transform:rotate(45deg)}
/* invisible hover bridge so the pointer can travel from link to panel */
.drop-panel::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.drop-inner{
  background:var(--warm-grad);border:1px solid rgba(255,255,255,.35);border-radius:18px;
  box-shadow:0 26px 64px -20px rgba(245,131,28,.5),0 2px 0 rgba(255,255,255,.35) inset;
  padding:15px;display:flex;gap:11px;
  /* reveal state */
  opacity:0;transform:translateY(-10px) scale(.985);
  transform-origin:top center;
  clip-path:inset(0 0 42% 0 round 18px);
  transition:opacity .26s ease,transform .32s cubic-bezier(.2,.85,.25,1),clip-path .36s cubic-bezier(.2,.85,.25,1);
  will-change:opacity,transform,clip-path;
}
/* little pointer notch */
.drop-inner::after{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:12px;height:12px;background:#F5B11E;border-radius:3px 0 0 0}
.nav-drop.open .drop-panel{pointer-events:auto}
.nav-drop.open .drop-inner{opacity:1;transform:translateY(0) scale(1);clip-path:inset(0 0 0 0 round 18px)}

/* service list columns sit on translucent white cards so text stays legible on the warm gradient */
.drop-list{display:flex;flex-direction:column;gap:2px;min-width:250px;
  background:rgba(255,255,255,.9);border-radius:13px;padding:6px}
.drop-link{display:flex;flex-direction:column;gap:2px;padding:10px 13px;border-radius:10px;text-decoration:none;
  color:var(--navy-deep);position:relative;
  /* per-item reveal */
  opacity:0;transform:translateY(8px);
  transition:background .16s ease,opacity .34s ease,transform .34s cubic-bezier(.2,.8,.2,1)}
.drop-link-t{font-family:var(--font-cta);font-weight:600;font-size:14.5px;line-height:1.2}
.drop-link-d{font-size:12.5px;color:var(--slate);line-height:1.35}
.drop-link::before{content:"";position:absolute;left:4px;top:50%;transform:translateY(-50%) scaleY(0);
  width:3px;height:56%;border-radius:3px;background:var(--warm-grad);transition:transform .2s ease}
.drop-link:hover{background:var(--sky-wash)}
.drop-link:hover .drop-link-t{color:var(--sea-breeze)}
.drop-link:hover::before{transform:translateY(-50%) scaleY(1)}
/* inline CTA row that closes the Office Cleaning list */
.drop-link-cta{margin-top:2px;background:var(--navy-deep)}
.drop-link-cta .drop-link-t{color:#fff}
.drop-link-cta .drop-link-d{color:rgba(255,255,255,.8)}
.drop-link-cta:hover{background:var(--deep-water)}
.drop-link-cta:hover .drop-link-t{color:#fff}
.drop-link-cta::before{display:none}

.drop-feature{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:3px;
  min-width:210px;padding:16px 18px;border-radius:14px;text-decoration:none;
  background:linear-gradient(150deg,var(--deep-water),var(--navy-deep));color:#fff;position:relative;overflow:hidden;
  opacity:0;transform:translateY(8px);transition:opacity .34s ease,transform .34s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.drop-feature::after{content:"";position:absolute;inset:0;background:var(--warm-grad);opacity:0;transition:opacity .24s ease}
.drop-feature>*{position:relative;z-index:1}
.drop-feature-k{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72);font-family:var(--font-cta);font-weight:700}
.drop-feature-h{font-family:var(--font-display);font-size:19px;line-height:1.1}
.drop-feature-c{font-size:12.5px;color:rgba(255,255,255,.82)}
.drop-feature:hover{box-shadow:0 12px 30px -12px rgba(245,131,28,.6)}
.drop-feature:hover::after{opacity:.16}

/* two-column industries */
.drop-inner-cols .drop-list{min-width:236px}
/* navy catch-all box that closes the right column of Who We Serve */
.drop-inner-cols .drop-feature{min-width:0;margin-top:6px;padding:13px 15px;gap:2px}
.drop-inner-cols .drop-feature .drop-feature-k{font-size:11px;color:rgba(255,255,255,.66)}
.drop-inner-cols .drop-feature .drop-feature-h{font-size:16.5px;line-height:1.18}

/* service areas: gradient frame wraps one white card of chips + footer link */
.drop-inner-areas{flex-direction:column;min-width:388px;max-width:440px}
.drop-areas-card{display:flex;flex-direction:column;gap:11px;width:100%;
  background:rgba(255,255,255,.92);border-radius:13px;padding:14px}
.drop-area-col{display:flex;flex-direction:column;gap:9px}
.drop-col-h{font-family:var(--font-cta);font-weight:700;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--slate);padding:0 2px}
.drop-chips{display:flex;flex-wrap:wrap;gap:7px}
.drop-chip{font-family:var(--font-cta);font-weight:600;font-size:13px;text-decoration:none;color:var(--deep-water);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;background:#fff;
  opacity:0;transform:translateY(8px) scale(.96);
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1),background .16s ease,color .16s ease,border-color .16s ease}
.drop-chip:hover{background:var(--sky-wash);color:var(--sea-breeze);border-color:var(--sea-breeze)}
.drop-area-all{display:block;text-align:center;font-family:var(--font-cta);font-weight:700;font-size:13px;
  text-decoration:none;color:#fff;background:var(--navy-deep);border-radius:11px;padding:11px 14px;margin-top:2px;
  opacity:0;transform:translateY(8px);transition:opacity .32s ease,transform .32s cubic-bezier(.2,.8,.2,1),background .18s ease}
.drop-area-all:hover{background:var(--deep-water)}

/* staggered entrance: children animate in only when the panel is open */
.nav-drop.open .drop-link,
.nav-drop.open .drop-feature,
.nav-drop.open .drop-chip,
.nav-drop.open .drop-area-col,
.nav-drop.open .drop-area-all{opacity:1;transform:none}
.nav-drop .drop-link{transition-delay:0s}
.nav-drop.open .drop-link:nth-child(1){transition-delay:.05s}
.nav-drop.open .drop-link:nth-child(2){transition-delay:.09s}
.nav-drop.open .drop-link:nth-child(3){transition-delay:.13s}
.nav-drop.open .drop-link:nth-child(4){transition-delay:.17s}
.nav-drop.open .drop-link:nth-child(5){transition-delay:.21s}
.nav-drop.open .drop-feature{transition-delay:.16s}
.nav-drop.open .drop-chip:nth-child(1){transition-delay:.05s}
.nav-drop.open .drop-chip:nth-child(2){transition-delay:.08s}
.nav-drop.open .drop-chip:nth-child(3){transition-delay:.11s}
.nav-drop.open .drop-chip:nth-child(4){transition-delay:.14s}
.nav-drop.open .drop-chip:nth-child(n+5){transition-delay:.17s}
.nav-drop.open .drop-area-all{transition-delay:.22s}
@media(prefers-reduced-motion:reduce){
  .drop-inner,.drop-link,.drop-feature,.drop-chip,.drop-area-all{transition:opacity .12s ease!important;transform:none!important;clip-path:none!important}
  .nav-drop.open .drop-link,.nav-drop.open .drop-feature,.nav-drop.open .drop-chip,.nav-drop.open .drop-area-all{transition-delay:0s!important}
}

/* ---------- SLIDE-OUT DRAWER (MORE on desktop, hamburger on mobile) ---------- */
.mm-phone{display:flex;align-items:center;gap:8px;font-family:var(--font-cta);font-weight:700;color:var(--deep-water)!important;text-decoration:none}
.mm-phone svg{width:17px;height:17px;color:var(--sea-breeze)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2.5px;background:var(--deep-water);border-radius:2px;transition:.25s}

.drawer-overlay{position:fixed;inset:0;background:rgba(12,34,55,.5);backdrop-filter:blur(2px);
  z-index:120;opacity:0;transition:opacity .3s ease}
.drawer-overlay[hidden]{display:none}
.drawer-overlay.open{opacity:1}
.drawer{position:fixed;top:0;bottom:0;right:0;height:100vh;width:min(380px,88vw);z-index:130;
  background:var(--warm-grad);color:#fff;display:flex;flex-direction:column;
  box-shadow:-24px 0 60px -20px rgba(12,34,55,.5);
  transform:translateX(100%);transition:transform .38s cubic-bezier(.22,.85,.24,1)}
.drawer[hidden]{display:none}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 14px}
.drawer-brand{font-family:var(--font-display);font-size:26px;color:#fff;line-height:1}
.drawer-x{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.18);
  color:#fff;display:flex;align-items:center;justify-content:center;transition:background .18s ease}
.drawer-x svg{width:20px;height:20px}
.drawer-x:hover{background:rgba(255,255,255,.32)}
.drawer-nav{display:flex;flex-direction:column;padding:8px 16px;overflow-y:auto;flex:1}
.drawer-group{font-family:var(--font-cta);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.7);padding:16px 12px 6px}
.drawer-link{font-family:var(--font-cta);font-weight:600;font-size:17px;color:#fff;text-decoration:none;
  padding:12px 12px;border-radius:11px;position:relative;
  opacity:0;transform:translateX(16px);
  transition:background .16s ease,opacity .3s ease,transform .34s cubic-bezier(.2,.8,.2,1)}
.drawer-link:hover{background:rgba(255,255,255,.16)}
.drawer.open .drawer-link{opacity:1;transform:none}
.drawer.open .drawer-link:nth-child(2){transition-delay:.06s}
.drawer.open .drawer-link:nth-child(3){transition-delay:.10s}
.drawer.open .drawer-link:nth-child(4){transition-delay:.14s}
.drawer.open .drawer-link:nth-child(6){transition-delay:.18s}
.drawer.open .drawer-link:nth-child(7){transition-delay:.22s}
.drawer.open .drawer-link:nth-child(8){transition-delay:.26s}
.drawer.open .drawer-link:nth-child(9){transition-delay:.30s}
.drawer.open .drawer-link:nth-child(10){transition-delay:.34s}
.drawer-foot{padding:16px 24px 26px;display:flex;flex-direction:column;gap:14px;
  background:rgba(12,34,55,.18);border-top:1px solid rgba(255,255,255,.2)}
.drawer-foot .mm-phone{color:#fff!important}
.drawer-foot .mm-phone svg{color:#fff}
.drawer-foot .btn-warm{background:#fff;color:var(--navy-deep);width:100%;justify-content:center}
@media(prefers-reduced-motion:reduce){
  .drawer{transition:none}
  .drawer-link{transition:background .16s ease;opacity:1;transform:none}
  .drawer.open .drawer-link{transition-delay:0s}
}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:clamp(560px,84vh,820px);display:flex;align-items:center;overflow:hidden;background:var(--navy-deep)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;z-index:0}
@media(max-width:760px){.hero-scrim{background:linear-gradient(180deg,rgba(8,58,99,.72) 0%,rgba(8,58,99,.74) 55%,rgba(8,58,99,.9) 100%)}}
.hero-scrim{position:absolute;inset:0;z-index:2;
  background:
   linear-gradient(90deg,rgba(8,58,99,.9) 0%,rgba(8,58,99,.72) 42%,rgba(8,58,99,.3) 68%,rgba(8,58,99,.26) 100%),
   linear-gradient(0deg,rgba(8,58,99,.5),transparent 45%);
}
.hero-vctrl{position:absolute;top:96px;right:26px;z-index:4;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);background:rgba(8,58,99,.4);color:#fff;font-size:12px;cursor:pointer;backdrop-filter:blur(4px)}
.hero-vctrl:hover{background:rgba(12,34,55,.7)}
.hero-inner{position:relative;z-index:3;padding-top:40px;padding-bottom:40px;width:100%}
.hero-h{
  font-family:var(--font-display);font-weight:400;
  font-variation-settings:'opsz' 144;
  font-size:clamp(44px,7.4vw,96px);line-height:.99;letter-spacing:-.025em;
  color:#fff;max-width:15ch;margin:6px 0 22px;
  filter:drop-shadow(0 2px 3px rgba(8,58,99,.55)) drop-shadow(0 10px 28px rgba(8,58,99,.5));
}
.hero-h em{font-style:italic;font-weight:500;background:linear-gradient(120deg,#57B7EA,#1A8FCC 60%,#9AD8F5);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;padding:.06em .14em .18em .06em;margin:-.06em -.1em -.16em -.04em;line-height:1.18;overflow:visible}
.hero-lead{font-size:clamp(16px,1.6vw,20px);color:#eaf2fa;max-width:52ch;line-height:1.55;text-shadow:0 1px 2px rgba(8,58,99,.7),0 4px 18px rgba(8,58,99,.55)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-pills{list-style:none;display:flex;gap:9px;flex-wrap:wrap;margin-top:30px}
.hero-pills li{font-family:var(--font-cta);font-weight:600;font-size:12.5px;color:#eaf2fa;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.09);border-radius:999px;padding:7px 15px}

/* ---------- HERO CINEMATIC INTRO ---------- */
/* solid navy cover sits directly over the video (z1), BELOW the scrim (z2) and
   BELOW the copy (z3). so the headline animates in full view on the navy screen,
   then the cover fades to reveal the video underneath. the scrim/filter always
   rides on top, so swapping the video later keeps the exact same look. */
.hero-cover{position:absolute;inset:0;z-index:1;background:var(--navy-deep);
  opacity:1;transition:opacity 1s ease .35s;pointer-events:none}
.hero.intro-done .hero-cover{opacity:0}
/* video fades in as the cover clears */
.hero-intro .hero-video{opacity:0;transition:opacity 1.1s ease}
.hero-intro.intro-done .hero-video{opacity:1}

/* headline words: hidden until revealed one at a time */
.hero-h .hw{display:inline-block;opacity:0;transform:translateY(.4em) scale(.97);
  filter:blur(5px);transition:opacity .26s ease,transform .3s cubic-bezier(.2,.8,.2,1),filter .26s ease;will-change:opacity,transform}
.hero-h .hw.hw-in{opacity:1;transform:none;filter:none}
/* keep the gradient em styling on animated em words */
.hero-h em.hw{padding:.06em .14em;margin:-.06em -.1em}

/* supporting hero elements rise in after the words */
.hero-intro .hero-el{opacity:0;transform:translateY(20px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);will-change:opacity,transform}
.hero-intro .hero-el.el-in{opacity:1;transform:none}

/* if JS never runs, reveal everything so the hero is never blank */
.no-js .hero-cover{display:none}
.no-js .hero-intro .hero-video{opacity:1}
.no-js .hero-h .hw{opacity:1;transform:none;filter:none}
.no-js .hero-intro .hero-el{opacity:1;transform:none}

/* ---------- STAT BAND ---------- */
.stats{background:var(--white);border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:38px 20px;text-align:center;border-left:1px solid var(--line-2)}
.stat:first-child{border-left:none}
.stat-num{font-family:var(--font-display);font-weight:600;font-size:clamp(34px,4vw,52px);line-height:1.12;letter-spacing:-.02em;display:inline-block;padding:.02em .1em;
  background:var(--warm-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-num.accent{background:var(--warm-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-cap{font-size:13.5px;color:var(--slate);margin-top:8px;display:block;max-width:22ch;margin-inline:auto}
@media(max-width:640px){.stats-grid{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3){border-left:none}.stat:nth-child(n+3){border-top:1px solid var(--line-2)}}

/* ---------- TRUST (marquee) ---------- */
.trust{padding:44px 0;text-align:center;background:var(--sky-wash);overflow:hidden}
.trust-lead{font-family:var(--font-cta);font-weight:700;font-size:14px;color:var(--deep-breeze);letter-spacing:.02em}
.trust-marquee{position:relative;margin:20px 0 18px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.trust-track{display:flex;width:max-content;animation:trust-scroll 46s linear infinite}
.trust-marquee:hover .trust-track{animation-play-state:paused}
.trust-group{list-style:none;display:flex;align-items:center;flex:none;margin:0;padding:0}
.trust-group li{position:relative;font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(18px,2vw,24px);color:var(--deep-water);opacity:.82;padding:0 30px;white-space:nowrap}
.trust-group li::after{content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--sea-breeze);opacity:.55}
@keyframes trust-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.trust-track{animation:none;flex-wrap:wrap;justify-content:center}}
.trust-note{font-size:13px;color:var(--slate);margin-top:14px}

/* ---------- section shell ---------- */
.section{padding:clamp(38px,4.2vw,60px) 0;position:relative}
.section>.wrap{position:relative;z-index:1}
.section-alt{background:var(--sky-wash)}
/* atmospheric washes on key light sections */
.section-atmo{background:
  var(--atmo-cool),
  var(--atmo-warm),
  linear-gradient(180deg,#fff 0%,var(--sky-wash) 100%)}
.section-atmo-warm{background:
  var(--atmo-gold),
  radial-gradient(85% 80% at 90% 15%,rgba(255,126,135,.12),transparent 60%),
  linear-gradient(180deg,var(--sky-wash) 0%,#fff 100%)}

/* ---------- BENTO ---------- */
.why-sec .eyebrow{margin-bottom:10px}
.why-h{margin-bottom:8px}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:26px}
.bento-tile{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:28px;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.bento-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.bento-tile h3{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.01em;margin-bottom:9px;line-height:1.15}
.bento-tile p{font-size:15px;color:var(--slate);line-height:1.55}
/* icon chip */
.tile-ico{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--breeze-mist);color:var(--deep-breeze);margin-bottom:16px;flex:none}
.tile-ico svg{width:22px;height:22px}
/* W-2 hero - wide, horizontal, fills its row */
.tile-hero{grid-column:span 8;background:linear-gradient(140deg,var(--deep-water),var(--navy-deep));color:#fff;border-color:transparent;padding:0;overflow:hidden}
.tile-hero-grid{display:grid;grid-template-columns:1.35fr 1fr;height:100%}
.tile-hero-copy{padding:34px 34px 34px 36px;display:flex;flex-direction:column;justify-content:center}
.tile-hero .tile-ico{background:rgba(255,255,255,.12);color:#8fd4f5}
.tile-hero h3{color:#fff;font-size:clamp(22px,2.4vw,28px)}
.tile-hero p{color:#c8d8e6;font-size:16px;max-width:44ch}
.tile-hero-stat{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;
  padding:34px 32px;background:linear-gradient(160deg,rgba(245,131,28,.14),rgba(255,108,136,.10));border-left:1px solid rgba(255,255,255,.12)}
.ths-num{font-family:var(--font-display);font-weight:600;font-size:clamp(48px,5.2vw,68px);line-height:1;
  background:var(--warm-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding:.02em .06em}
.ths-lbl{font-family:var(--font-cta);font-weight:800;font-size:14px;letter-spacing:.04em;color:#fff}
.ths-sub{font-size:13px;color:#a9bccd}
/* crew video tile */
.tile-media{grid-column:span 4;padding:0;overflow:hidden;position:relative;min-height:230px}
.tile-video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.tile-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,34,55,.5),transparent 45%)}
.tile-vlabel{position:absolute;left:18px;bottom:16px;z-index:2;font-family:var(--font-cta);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
/* value cards - enriched */
.tile-value{grid-column:span 6;position:relative;overflow:hidden}
.tile-value::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--warm-grad);opacity:0;transition:opacity .2s}
.tile-value:hover::before{opacity:1}
.tile-value .tile-ico{background:linear-gradient(150deg,var(--breeze-mist),#fff);color:var(--sea-breeze);box-shadow:inset 0 0 0 1px var(--line)}
.tile-foot{margin-top:14px;font-family:var(--font-cta);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--deep-breeze);display:inline-flex;align-items:center;gap:8px}
.tile-foot::before{content:"";width:20px;height:2px;border-radius:2px;background:var(--warm-grad)}
@media(max-width:860px){
  .bento{grid-template-columns:1fr 1fr}
  .tile-hero{grid-column:1/-1}
  .tile-media{grid-column:1/-1;min-height:240px}
  .tile-value{grid-column:span 1}
}
@media(max-width:560px){
  .bento{grid-template-columns:1fr}
  .tile-hero-grid{grid-template-columns:1fr}
  .tile-hero-stat{border-left:none;border-top:1px solid rgba(255,255,255,.12);flex-direction:row;align-items:baseline;gap:10px;flex-wrap:wrap}
  .tile-value{grid-column:1}
}

/* ---------- THE BREEZY PROMISE (full-width warm band) ---------- */
.promise{position:relative;overflow:hidden;color:#fff;padding:clamp(42px,5vw,68px) 0;text-align:center;
  background:var(--warm-grad);background-size:220% 220%;animation:promise-shift 14s ease-in-out infinite}
@keyframes promise-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media(prefers-reduced-motion:reduce){.promise{animation:none;background-size:160% 160%}}
.promise::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 15% 10%,rgba(255,255,255,.18),transparent 55%);pointer-events:none}
.promise-inner{position:relative;z-index:1;max-width:760px;margin:0 auto}
.promise-eyebrow{color:#fff;justify-content:center}
.promise-eyebrow.eyebrow-tick::before{background:#fff}
.promise-eyebrow.eyebrow-tick[data-num]::after,.promise-eyebrow::after{color:#fff}
.promise-h{font-family:var(--font-display);font-weight:500;font-variation-settings:'opsz' 144;
  font-size:clamp(30px,4.6vw,54px);line-height:1.05;letter-spacing:-.02em;margin:6px auto 16px;max-width:18ch}
.promise-lead{font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:rgba(255,255,255,.94);max-width:56ch;margin:0 auto 30px}
.promise-btn{background:#fff;color:var(--sunset);box-shadow:0 12px 30px rgba(180,60,20,.28)}
.promise-btn:hover{transform:translateY(-2px);background:#fff;color:var(--coral);box-shadow:0 18px 44px rgba(180,60,20,.34)}

/* ---------- COMPARISON (centered spotlight table) ---------- */
.cmp-wrap{margin:38px auto 0;max-width:900px;border-radius:22px;overflow:hidden;
  box-shadow:0 30px 70px rgba(16,50,76,.14),0 3px 10px rgba(16,50,76,.06);border:1px solid var(--line);background:#fff}
table.cmp{width:100%;border-collapse:collapse;font-size:15.5px;background:#fff;table-layout:fixed}
table.cmp th,table.cmp td{padding:17px 24px;vertical-align:middle}
/* header row */
table.cmp thead th{border-bottom:none}
.cmp-rowhead{background:var(--deep-water)}
.cmp-typical{background:var(--sky-wash);color:var(--slate);font-family:var(--font-cta);font-weight:700;
  font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;text-align:center;border-bottom:1px solid var(--line-2)}
/* Breezy header: logo on a warm-gradient panel with glow */
.cmp-breezy{position:relative;text-align:center;padding:18px 22px;
  background:var(--warm-grad);background-size:180% 180%}
.cmp-breezy::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 130% at 50% 0%,rgba(255,255,255,.28),transparent 60%);pointer-events:none}
.cmp-logo-plate{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:12px;padding:8px 18px;box-shadow:0 8px 22px rgba(150,50,10,.28)}
.cmp-logo{height:34px;width:auto;display:block}
/* body */
table.cmp tbody th{text-align:left;font-family:var(--font-body);font-weight:600;color:var(--deep-water);font-size:15px}
table.cmp tbody tr{border-bottom:1px solid var(--line-2)}
table.cmp tbody tr:last-child{border-bottom:none}
table.cmp tbody tr:nth-child(even) th,table.cmp tbody tr:nth-child(even) td.n{background:rgba(228,235,240,.35)}
/* cell content: icon + text on one centered baseline row */
.cmp-cell{display:inline-flex;align-items:center;gap:10px;text-align:left}
table.cmp td.y,table.cmp td.n{text-align:center}
.cmp-mark{flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.cmp-mark svg{width:12px;height:12px}
.cmp-yes{background:var(--good);color:#fff}
.cmp-no{background:rgba(255,126,135,.16);color:var(--coral)}
.cmp-txt{line-height:1.2}
table.cmp td.y .cmp-txt{color:var(--deep-water);font-weight:700}
table.cmp td.n .cmp-txt{color:var(--slate)}
/* spotlight the Breezy column down the whole body */
table.cmp tbody td.y{background:rgba(46,125,91,.06);
  box-shadow:inset 3px 0 0 var(--good),inset -3px 0 0 var(--good)}
table.cmp tbody tr:last-child td.y{box-shadow:inset 3px 0 0 var(--good),inset -3px 0 0 var(--good),inset 0 -3px 0 var(--good)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:560px){
  table.cmp{table-layout:auto}
  table.cmp th,table.cmp td{padding:12px 8px;font-size:12px}
  table.cmp tbody th{font-size:12px}
  .cmp-cell{flex-direction:column;gap:5px;text-align:center}
  .cmp-txt{overflow-wrap:normal;font-size:12px}
  table.cmp tbody th{width:31%}
  .cmp-mark{width:18px;height:18px}
  .cmp-mark svg{width:10px;height:10px}
  .cmp-logo{height:24px}
  .cmp-logo-plate{padding:5px 10px}
  .cmp-typical{font-size:11px;padding:12px 6px}
}

/* ---------- SERVICES ---------- */
.feat-svc{display:grid;grid-template-columns:230px 1fr auto;gap:26px;align-items:center;
  border:2px solid var(--deep-water);border-radius:var(--radius);padding:20px;margin:32px 0 20px;background:#fff}
.feat-media{position:relative;width:230px;height:150px;border-radius:var(--radius-sm);overflow:hidden}
.feat-media img{width:100%;height:100%;object-fit:cover}
.feat-media .tile-play{width:46px;height:46px;font-size:14px}
.feat-flag{font-family:var(--font-cta);font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sea-breeze)}
.feat-body h3{font-family:var(--font-display);font-weight:600;font-size:24px;letter-spacing:-.01em;margin:6px 0 6px}
.feat-body p{color:var(--slate);font-size:16px;max-width:52ch}
.feat-cta{align-self:center}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.svc-card{position:relative;border:1px solid var(--line);border-radius:14px;padding:22px 20px 20px;overflow:hidden;
  background:linear-gradient(160deg,#fff,var(--sky-wash));transition:transform .18s,box-shadow .18s,border-color .18s}
.svc-card::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--sea-breeze);opacity:.9}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.svc-card{text-decoration:none;color:inherit;display:block}
.svc-card-more{display:inline-block;margin-top:10px;font-family:var(--font-cta);font-weight:800;font-size:12px;color:var(--deep-breeze)}
.svc-card h4{font-family:var(--font-cta);font-weight:800;font-size:15.5px;margin-bottom:6px;color:var(--deep-water)}
.svc-card p{font-size:14px;color:var(--slate);line-height:1.5}
/* colorful rotation across the grid */
.svc-card:nth-child(4n+1)::before{background:var(--sea-breeze)}
.svc-card:nth-child(4n+2)::before{background:var(--sun-gold)}
.svc-card:nth-child(4n+3)::before{background:var(--coral)}
.svc-card:nth-child(4n+4)::before{background:var(--good)}
.svc-card:nth-child(4n+1){background:linear-gradient(160deg,#fff,var(--breeze-mist))}
.svc-card:nth-child(4n+2){background:linear-gradient(160deg,#fff,#FDF3DE)}
.svc-card:nth-child(4n+3){background:linear-gradient(160deg,#fff,#FFEEF0)}
.svc-card:nth-child(4n+4){background:linear-gradient(160deg,#fff,#E4F3EC)}
@media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
  .feat-svc{grid-template-columns:1fr;text-align:left}
  .feat-media{width:100%;height:200px}
  .feat-cta{justify-self:start}
}

/* ---------- ESTIMATE / CALCULATOR ---------- */
.section-estimate{position:relative;color:#fff;background:
  radial-gradient(90% 120% at 88% 8%,rgba(26,143,204,.38),transparent 55%),
  radial-gradient(80% 90% at 8% 92%,rgba(245,131,28,.18),transparent 55%),
  linear-gradient(160deg,var(--deep-water),var(--navy-deep))}
.section-estimate .eyebrow{color:var(--sea-breeze)}
.section-estimate .sec-h{color:#fff}
.section-estimate .lead{color:#c6d6e4}
.estimate-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}.estimate-layout>*{min-width:0}
.checks{list-style:none;margin-top:24px;display:grid;gap:12px}
.checks li{position:relative;padding-left:30px;color:#dbe8f2;font-size:15.5px}
.checks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--sun-gold);font-weight:800}
.calc{background:#fff;color:var(--deep-water);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-lg)}
.calc-row{display:flex;justify-content:space-between;align-items:baseline}
.calc-row label{font-family:var(--font-cta);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--deep-breeze)}
.calc-sqft{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:22px;color:var(--sea-breeze)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;margin:14px 0 6px;
  background:linear-gradient(90deg,var(--sea-breeze) var(--fill,32%),var(--line) var(--fill,32%));cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--deep-water);border:4px solid #fff;box-shadow:0 2px 8px rgba(16,50,76,.35);cursor:pointer}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--deep-water);border:4px solid #fff;cursor:pointer}
.calc-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--slate)}
.calc-label{font-family:var(--font-cta);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--deep-breeze);margin:22px 0 10px}
.freq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.freq button{font-family:var(--font-cta);font-weight:700;font-size:14px;padding:11px 4px;white-space:nowrap;min-width:0;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--deep-water);cursor:pointer;transition:.16s}
.freq button:hover{border-color:var(--sea-breeze)}
.freq button.active{background:var(--deep-water);color:#fff;border-color:var(--deep-water)}
.calc-result{background:var(--sky-wash);border-radius:var(--radius-sm);padding:22px;text-align:center;margin:22px 0 18px}
.calc-rlabel{font-family:var(--font-cta);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--deep-breeze)}
.calc-range{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,4vw,42px);line-height:1;margin:10px 0 4px;color:var(--deep-water)}
.calc-dash{color:var(--sea-breeze)}
.calc-per{font-size:17px;color:var(--slate);font-family:var(--font-body);margin-left:4px}
.calc-note{font-size:14px;color:var(--slate);margin-top:8px}
.calc-fine{font-size:12.5px;color:var(--slate);margin-top:4px;opacity:.85}
.calc-call{text-align:center;font-size:13px;color:var(--slate);margin-top:12px}
.calc-call a{color:var(--deep-breeze);font-weight:600}
@media(max-width:820px){.estimate-layout{grid-template-columns:1fr;gap:34px}}

/* ---------- STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px;counter-reset:s}
.step{border:1px solid var(--line);border-radius:16px;background:#fff;padding:30px 28px;position:relative;box-shadow:var(--shadow-sm);
  transition:transform .18s,box-shadow .18s}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.step-n{font-family:var(--font-display);font-weight:600;font-size:26px;line-height:1;display:inline-flex;
  align-items:center;justify-content:center;width:58px;height:58px;border-radius:16px;margin-bottom:18px;color:#fff}
.step:nth-child(1) .step-n{background:linear-gradient(150deg,var(--sea-breeze),var(--deep-breeze))}
.step:nth-child(2) .step-n{background:linear-gradient(150deg,var(--sun-gold),var(--sunset))}
.step:nth-child(3) .step-n{background:linear-gradient(150deg,var(--coral),#FF6C88)}
.step h4{font-family:var(--font-cta);font-weight:800;font-size:17.5px;margin-bottom:8px;color:var(--deep-water)}
.step p{font-size:15px;color:var(--slate);line-height:1.55}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* ---------- CHIPS ---------- */
.chips{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px;justify-content:center;max-width:760px;margin-left:auto;margin-right:auto}
.chips span,.chips a{text-decoration:none;font-family:var(--font-cta);font-weight:600;font-size:14.5px;color:var(--deep-water);
  border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 18px;transition:.16s}
.chips span:hover,.chips a:hover{border-color:var(--sea-breeze);color:var(--deep-breeze);transform:translateY(-2px);box-shadow:var(--shadow-sm)}

/* ---------- AREAS ---------- */
.areas-lead{margin-bottom:30px}
.areas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:stretch;text-align:left}
.areas>*{min-width:0}
.areas-left{display:flex;flex-direction:column}
.borough-toggle{display:inline-flex;align-self:flex-start;background:var(--sky-wash);border:1px solid var(--line);border-radius:999px;padding:5px;margin-bottom:18px}
.borough-toggle button{font-family:var(--font-cta);font-weight:700;font-size:14px;padding:9px 22px;border:none;background:none;border-radius:999px;cursor:pointer;color:var(--slate)}
.borough-toggle button.active{background:var(--deep-water);color:#fff}
.area-list{display:flex;flex-wrap:wrap;gap:10px}
.area-chip{font-family:var(--font-cta);font-weight:600;font-size:14px;padding:9px 15px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.16s;color:var(--deep-water)}
.area-chip:hover{border-color:var(--sea-breeze);transform:translateY(-1px)}
.area-chip.selected{background:var(--deep-water);color:#fff;border-color:var(--deep-water)}
.area-chip .dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot-live{background:var(--sea-breeze)}
.area-chip.selected .dot-live{background:#fff}
.map-frame{position:relative;height:100%;background:linear-gradient(160deg,#fff,var(--sky-wash));border:1px solid var(--line);border-radius:var(--radius);padding:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-md)}
.map-frame::before{content:"";position:absolute;inset:0;border-radius:var(--radius);padding:1.5px;background:linear-gradient(135deg,rgba(26,143,204,.5),rgba(245,177,30,.35),rgba(255,126,135,.4));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.6;pointer-events:none}
.map-svg{width:100%;height:auto;flex:1;overflow:visible;border-radius:calc(var(--radius) - 9px)}
.map-boro{font-family:var(--font-cta);font-weight:800;font-size:10px;letter-spacing:.2em;fill:rgba(22,50,76,.34)}
.map-boro-mnh{fill:rgba(255,255,255,.9);letter-spacing:.26em;paint-order:stroke;stroke:rgba(12,34,55,.35);stroke-width:2.5px;stroke-linejoin:round}
.map-boro-bk{fill:rgba(22,50,76,.32);font-size:8.5px}
.map-boro-riv{fill:rgba(26,143,204,.42);font-size:7.5px;letter-spacing:.24em;font-weight:700}
.map-cap{text-align:center;font-family:var(--font-cta);font-weight:600;font-size:12.5px;color:var(--deep-water);margin-top:8px;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.map-cap .dot{width:9px;height:9px;border-radius:50%;background:var(--good);display:inline-block;position:relative;box-shadow:0 0 0 0 rgba(46,125,91,.5);animation:mapPulse 2.4s ease-out infinite}
@keyframes mapPulse{0%{box-shadow:0 0 0 0 rgba(46,125,91,.5)}70%{box-shadow:0 0 0 7px rgba(46,125,91,0)}100%{box-shadow:0 0 0 0 rgba(46,125,91,0)}}
/* Context neighborhoods (unserved) sit faint behind the served regions */
.map-ctx{fill:#E4EDF3;stroke:#CFDCE6;stroke-width:.5;opacity:.95;pointer-events:none}
/* Served neighborhood regions: filled, outlined, hoverable district shapes */
.map-reg{cursor:pointer}
.map-reg:focus{outline:none}
.map-reg .map-reg-shape{fill:url(#regFill);stroke:#fff;stroke-width:1.1;stroke-linejoin:round;transition:fill .2s,stroke .2s,filter .2s}
.map-reg:hover .map-reg-shape,.map-reg:focus .map-reg-shape{fill:#3FA6DF;stroke:#fff;filter:drop-shadow(0 2px 4px rgba(12,34,55,.28))}
.map-reg.selected .map-reg-shape{fill:url(#regFillOn);stroke:#fff;filter:drop-shadow(0 2px 5px rgba(245,131,28,.45))}
.map-reg-label{font-family:var(--font-cta);font-weight:700;font-size:8.6px;letter-spacing:.01em;fill:var(--deep-water);pointer-events:none;transition:.2s;paint-order:stroke;stroke:rgba(255,255,255,.92);stroke-width:2.4px;stroke-linejoin:round}
.map-labels{pointer-events:none}
.map-reg-label.selected{fill:#5A3200}
.map-reg-off{pointer-events:none}
.map-reg-off .map-reg-shape{fill:#C7DEEC;stroke:#fff;stroke-width:.8;filter:none;opacity:.8}
@media(prefers-reduced-motion:reduce){.map-cap .dot{animation:none}}
.area-detail{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-top:18px;box-shadow:var(--shadow-sm);flex:none;display:flex;align-items:flex-start;min-height:344px}
.ad-in{width:100%}
.ad-tag{font-family:var(--font-cta);font-weight:800;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;display:inline-block}
.ad-live{background:var(--breeze-mist);color:var(--deep-breeze)}
.ad-name{font-family:var(--font-display);font-weight:600;font-size:23px;margin:12px 0 8px;color:var(--deep-water)}
.ad-blurb{font-size:14.5px;color:var(--slate);line-height:1.6}
.ad-cta{margin-top:16px;font-size:13.5px;padding:11px 20px;white-space:normal;text-align:center;max-width:100%}
.ad-empty{align-items:center}
.ad-hint{font-size:14.5px;color:var(--slate);font-style:italic;font-family:var(--font-display)}
.ad-hint-sub{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);font-size:13.5px}
@media(max-width:760px){.areas{grid-template-columns:minmax(0,1fr);gap:22px}.area-detail{min-height:350px}.areas-right{order:-1}.map-frame{min-height:320px}.area-list{gap:8px}.area-chip{font-size:13px;padding:8px 12px}}

/* ---------- REVIEWS (warm-gradient carousel band) ---------- */
.reviews-band{position:relative;overflow:hidden;color:#fff;
  background:var(--warm-grad);background-size:220% 220%;animation:promise-shift 16s ease-in-out infinite}
.reviews-band::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 85% 8%,rgba(255,255,255,.16),transparent 55%);pointer-events:none}
.reviews-band .wrap{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.reviews-band{animation:none}}
.rev-eyebrow{color:#fff;justify-content:center}
.rev-eyebrow.eyebrow-tick::before{background:#fff}
.rev-eyebrow[data-num]::after{color:rgba(255,255,255,.7)}
.rev-h{color:#fff}
.rev-h em{background:none;-webkit-text-fill-color:#fff;color:#fff}
/* carousel shell */
.rev-carousel{display:flex;align-items:center;gap:14px;margin-top:34px}
.rev-viewport{flex:1;overflow:hidden;border-radius:18px}
.rev-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.rev-slide{flex:0 0 100%;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:4px}
.rev{background:#fff;border:none;border-radius:16px;padding:26px;box-shadow:0 18px 44px rgba(120,45,10,.22);
  display:flex;flex-direction:column}
.rev .stars{color:var(--sun-gold);letter-spacing:2px;font-size:15px;margin-bottom:12px}
.rev p{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:16px;line-height:1.45;color:var(--deep-water);margin-bottom:16px;flex:1}
.rev cite{font-family:var(--font-cta);font-weight:700;font-style:normal;font-size:13px;color:var(--slate)}
/* arrows */
.rev-arrow{flex:none;width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--sunset);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(120,45,10,.25);transition:transform .16s,background .16s}
.rev-arrow svg{width:20px;height:20px}
.rev-arrow:hover{transform:scale(1.08);background:#fff}
.rev-arrow:active{transform:scale(.96)}
/* dots */
.rev-dots{display:flex;justify-content:center;gap:10px;margin-top:24px}
.rev-dots button{width:10px;height:10px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:rgba(255,255,255,.45);transition:background .18s,transform .18s}
.rev-dots button[aria-selected=true]{background:#fff;transform:scale(1.25)}
.rev-agg{text-align:center;margin-top:28px;font-size:15px;color:rgba(255,255,255,.92)}
.rev-agg .stars{color:#fff;letter-spacing:2px}
.rev-agg strong{color:#fff;font-family:var(--font-cta)}
.rev-link{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:600;margin-left:6px}
.rev-link:hover{text-decoration-thickness:2px}
@media(max-width:820px){
  .rev-slide{grid-template-columns:1fr}
  .rev-arrow{width:40px;height:40px}
}

/* ---------- ABOUT ---------- */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}
.about-body{text-align:left}
.about-body .btn-out{margin-top:28px}
.about-body .lead{margin-bottom:0}
.about-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:4/3}
.about-media img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.about{grid-template-columns:1fr;gap:28px}}

/* ---------- THE BREEZY BRIEF ---------- */
.brief-sec{background:var(--sky-wash)}
.brief-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:34px}
.brief-head>div{max-width:660px}
.brief-lead{margin-bottom:0}
.brief-all{flex:none;white-space:nowrap}
.brief-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.brief-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--deep-water);box-shadow:0 10px 28px rgba(16,50,76,.06);transition:transform .2s ease,box-shadow .25s ease}
.brief-card:hover{transform:translateY(-4px);box-shadow:0 20px 46px rgba(16,50,76,.13)}
.brief-media{aspect-ratio:4/3;overflow:hidden}
.brief-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.brief-card:hover .brief-media img{transform:scale(1.05)}
.brief-body{display:flex;flex-direction:column;gap:11px;padding:22px 22px 24px;flex:1;text-align:left}
.brief-card,.brief-head{text-align:left}
.brief-tag{align-self:flex-start;font-family:var(--font-cta);font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase;padding:5px 11px;border-radius:999px;color:#fff}
.brief-tag-blue{background:var(--sea-breeze)}
.brief-tag-gold{background:var(--sun-gold);color:var(--deep-water)}
.brief-tag-coral{background:var(--coral)}
.brief-title{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.24;letter-spacing:-.01em;margin:0}
.brief-ex{font-size:14.5px;color:var(--slate);line-height:1.55;margin:0}
.brief-meta{margin-top:auto;font-family:var(--font-cta);font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--sea-breeze)}
@media(max-width:900px){.brief-grid{grid-template-columns:1fr 1fr}.brief-grid .brief-card:last-child{grid-column:1/-1;flex-direction:row}.brief-grid .brief-card:last-child .brief-media{flex:0 0 42%;aspect-ratio:auto}}
@media(max-width:640px){.brief-head{flex-direction:column;align-items:flex-start;gap:18px}.brief-grid{grid-template-columns:1fr}.brief-grid .brief-card:last-child{flex-direction:column}.brief-grid .brief-card:last-child .brief-media{flex:none;aspect-ratio:4/3}}

/* ---------- FAQ ---------- */
.acc{max-width:820px;margin:34px auto 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 16px 40px rgba(16,50,76,.07);text-align:left}
.acc-item+.acc-item{border-top:1px solid var(--line-2)}
.acc-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--font-cta);font-weight:700;font-size:16.5px;color:var(--deep-water);
  padding:20px 24px;background:none;border:none;text-align:left;cursor:pointer}
.acc-ico{font-size:22px;color:var(--sea-breeze);transition:transform .22s;flex:none;line-height:1}
.acc-q[aria-expanded=true] .acc-ico{transform:rotate(45deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.acc-inner{padding:0 24px 22px;font-size:15px;color:var(--slate);line-height:1.6}

/* ---------- CLOSE (big CTA + form) ---------- */
.close{position:relative;overflow:hidden;color:#fff;padding:clamp(46px,5.5vw,76px) 0;background:
  radial-gradient(70% 90% at 82% 88%,rgba(255,126,135,.22),transparent 58%),
  radial-gradient(65% 80% at 12% 10%,rgba(26,143,204,.28),transparent 55%),
  linear-gradient(160deg,var(--deep-water) 0%,var(--navy-deep) 100%)}
.close .wrap{position:relative;z-index:1}
.close-inner{text-align:center;max-width:880px}
.close-h{font-family:var(--font-display);font-weight:500;font-size:clamp(34px,6vw,66px);line-height:1.08;letter-spacing:-.02em;max-width:18ch;margin:0 auto 20px;text-wrap:balance}
.close-h em{font-style:italic;background:var(--warm-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding:.06em .12em .14em .02em;margin:-.06em -.06em -.14em 0;display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;overflow:visible}
.close-lead{color:#bccadb;font-size:clamp(16px,1.6vw,19px);max-width:52ch;margin:0 auto 40px}
.book-form{background:#fff;color:var(--deep-water);border-radius:var(--radius);padding:34px;text-align:left;box-shadow:var(--shadow-lg);max-width:760px;margin:0 auto}
.bf-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.bf-field{display:flex;flex-direction:column;gap:7px}
.bf-field label{font-family:var(--font-cta);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--deep-breeze)}
.bf-field input,.bf-field select{font-family:var(--font-body);font-size:15.5px;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--deep-water);transition:border-color .16s}
.bf-field input:focus,.bf-field select:focus{outline:none;border-color:var(--sea-breeze);box-shadow:0 0 0 3px rgba(26,143,204,.12)}
.bf-field input.err,.bf-field select.err,.bf-field input.invalid,.bf-field select.invalid{border-color:var(--coral)}
.book-form .btn{margin-top:24px}
.bf-fine{text-align:center;font-size:13px;color:var(--slate);margin-top:16px}
.bf-fine a{color:var(--deep-breeze);font-weight:600}
.bf-success{background:var(--sky-wash);border:1px solid var(--sea-breeze);border-radius:12px;padding:18px 20px;margin-top:18px;font-size:15px;color:var(--deep-water);text-align:center}
@media(max-width:600px){.bf-grid{grid-template-columns:1fr}.book-form{padding:24px}}

/* ---------- FOOTER ---------- */
.foot{background:linear-gradient(180deg,#062C4C 0%,#041F38 100%);color:#9fb3c6;padding:60px 0 40px;position:relative}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.foot-logo{height:58px;width:auto;margin-bottom:18px;display:block}
.foot address{font-style:normal;font-size:14.5px;line-height:1.9;color:#93a2b0}
.foot address a{color:#cdd8e2;text-decoration:none}
.foot-badges{font-family:var(--font-cta);font-size:12.5px;color:#6f7f8d;margin-top:14px;letter-spacing:.02em}
.foot-col h5{font-family:var(--font-cta);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#66757f;margin-bottom:12px}
.foot-col a{display:block;font-size:14.5px;line-height:2;color:#b7c8d8;text-decoration:none}
.foot-col a:hover{color:#fff}
.foot-legal{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:#6f7f8d;padding-right:120px}
/* Omythic maker's mark (full wordmark), pinned to the footer's bottom-right corner.
   Padded so the animation's scale/rotate never gets clipped by the corner. */
.omythic-mark{position:absolute;right:22px;bottom:16px;display:block;width:96px;height:auto;padding:14px;line-height:0;z-index:3;overflow:visible;filter:drop-shadow(0 3px 10px rgba(255,82,107,0));transition:filter .5s ease}
.omythic-mark,.omythic-mark.reveal{opacity:1!important;transform:none;filter:drop-shadow(0 3px 10px rgba(255,82,107,0))}
/* The maker's mark is a persistent brand element, not a scroll animation. It sits
   16px off the bottom of the footer, which falls inside the reveal observer's -14%
   dead band AND below the sweep's 82% line, so it never received .in and stayed at
   opacity 0 on every page. It no longer depends on JS at all. */
.omythic-mark img{opacity:.82}
.omythic-mark.reveal img{opacity:.82}
.omythic-mark.reveal.in img{opacity:.82}
.omythic-mark img{display:block;width:100%;height:auto;opacity:.82;transform-origin:center center;transition:opacity .5s ease}
.omythic-mark.in img{animation:omy-mark-in 1.15s cubic-bezier(.16,.7,.2,1) both}
@keyframes omy-mark-in{0%{opacity:0;transform:translateY(20px) rotate(-8deg) scale(.78)}60%{opacity:1;transform:translateY(-2px) rotate(3deg) scale(1.05)}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
.omythic-mark:hover{filter:drop-shadow(0 4px 16px rgba(255,82,107,.55))}
.omythic-mark:hover img{opacity:1;animation:omy-mark-wobble 1.1s cubic-bezier(.36,.07,.19,.97) both}
@keyframes omy-mark-wobble{0%{transform:rotate(0) scale(1)}18%{transform:rotate(-5deg) scale(1.06)}38%{transform:rotate(4deg) scale(1.08)}56%{transform:rotate(-3deg) scale(1.05)}74%{transform:rotate(2deg) scale(1.03)}88%{transform:rotate(-1deg) scale(1.02)}100%{transform:rotate(0) scale(1.04)}}
.omythic-mark:focus-visible{outline:2px solid var(--coral,#FF526B);outline-offset:6px;border-radius:8px}
@media(prefers-reduced-motion:reduce){.omythic-mark.in img{animation:none}.omythic-mark:hover img{animation:none}}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}.omythic-mark{width:78px;right:12px;bottom:10px}.foot-legal{padding-right:92px}}

/* ---------- MOBILE STICKY BAR ---------- */
.mobile-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;gap:10px;padding:10px 14px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(16,50,76,.08)}
.mobile-bar a{flex:1;font-family:var(--font-cta);font-weight:800;font-size:15px;text-align:center;padding:14px;border-radius:999px;text-decoration:none}
.mb-call{background:var(--breeze-mist);color:var(--deep-water)}
.mb-book{background:var(--deep-water);color:#fff}

/* ---------- REEL MODAL ---------- */
.modal{position:fixed;inset:0;z-index:200;background:rgba(8,18,28,.82);display:flex;align-items:center;justify-content:center;padding:24px}
.modal[hidden]{display:none}
.modal-box{position:relative;width:min(880px,94vw)}
.modal-box video{width:100%;border-radius:14px;background:#000;aspect-ratio:16/9;object-fit:cover}
.modal-x{position:absolute;top:-16px;right:-16px;width:38px;height:38px;border-radius:50%;background:#fff;border:none;font-size:20px;cursor:pointer;box-shadow:var(--shadow-md)}

/* ---------- RESPONSIVE NAV ---------- */
@media(max-width:940px){
  .nav-right{display:none}
  .nav-toggle{display:flex}
  .nav{height:76px;justify-content:space-between}
  .brand{margin-right:0}
  .brand-logo{height:52px}
  .site-header.scrolled .nav{height:70px}
  .site-header.scrolled .brand-logo{height:46px}
}
@media(max-width:720px){
  .mobile-bar{display:flex}
  body{padding-bottom:72px}
  .hero-vctrl{top:88px;right:16px}
  .hero-actions .btn-dashed{display:none}
}

/* ---------- SCROLL REVEAL ---------- */
/* FAIL-SAFE: content is fully visible by default. The hidden start state is
   scoped to html.js, which app.js sets only after the observer is wired up.
   If JS fails, is blocked, or the observer misses an element, nothing is ever
   hidden. Animation is enhancement only, never a gate on content. */
.reveal{opacity:1;transform:none;filter:none}
html.js .reveal{opacity:0;transition:opacity 1.05s cubic-bezier(.18,.6,.16,1),transform 1.15s cubic-bezier(.18,.6,.16,1),filter 1.05s ease,clip-path 1.2s cubic-bezier(.18,.6,.16,1);will-change:opacity,transform}
html.js .reveal.in{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}

/* reveal variants - a little more travel and character, still tasteful */
html.js .rv-up{transform:translateY(44px)}
html.js .rv-down{transform:translateY(-34px)}
html.js .rv-left{transform:translateX(-52px)}
html.js .rv-right{transform:translateX(52px)}
html.js .rv-fade{transform:none}
html.js .rv-scale{transform:scale(.93)}
html.js .rv-blur{filter:blur(12px);transform:translateY(26px)}
html.js .rv-rise{transform:translateY(64px) scale(.97)}
html.js .rv-clip{clip-path:inset(0 0 100% 0);transform:translateY(22px)}
html.js .rv-tilt{transform:perspective(1000px) rotateX(10deg) translateY(40px);transform-origin:top center}
html.js .rv-swing{transform:translateX(-46px) rotate(-2.5deg);transform-origin:left center}
html.js .rv-zoom{transform:scale(1.06);filter:blur(6px)}

/* staggered children: parent gets .rv-stagger, children animate in sequence once parent .in */
html.js .rv-stagger > *{opacity:0;transform:translateY(34px);transition:opacity .85s cubic-bezier(.18,.6,.16,1),transform .95s cubic-bezier(.18,.6,.16,1)}
html.js .rv-stagger.in > *{opacity:1;transform:none}
html.js .rv-stagger.in > *:nth-child(1){transition-delay:.06s}
html.js .rv-stagger.in > *:nth-child(2){transition-delay:.17s}
html.js .rv-stagger.in > *:nth-child(3){transition-delay:.28s}
html.js .rv-stagger.in > *:nth-child(4){transition-delay:.39s}
html.js .rv-stagger.in > *:nth-child(5){transition-delay:.50s}
html.js .rv-stagger.in > *:nth-child(6){transition-delay:.61s}
html.js .rv-stagger.in > *:nth-child(7){transition-delay:.72s}
html.js .rv-stagger.in > *:nth-child(8){transition-delay:.83s}
html.js .rv-stagger.in > *:nth-child(n+9){transition-delay:.92s}
/* horizontal stagger variant for chips */
html.js .rv-stagger-x > *{opacity:0;transform:translateY(6px) scale(.88);transition:opacity .6s ease,transform .65s cubic-bezier(.2,.8,.2,1)}
html.js .rv-stagger-x.in > *{opacity:1;transform:none}
html.js .rv-stagger-x.in > *:nth-child(1){transition-delay:.04s}
html.js .rv-stagger-x.in > *:nth-child(2){transition-delay:.09s}
html.js .rv-stagger-x.in > *:nth-child(3){transition-delay:.14s}
html.js .rv-stagger-x.in > *:nth-child(4){transition-delay:.19s}
html.js .rv-stagger-x.in > *:nth-child(5){transition-delay:.24s}
html.js .rv-stagger-x.in > *:nth-child(6){transition-delay:.29s}
html.js .rv-stagger-x.in > *:nth-child(7){transition-delay:.34s}
html.js .rv-stagger-x.in > *:nth-child(8){transition-delay:.39s}
html.js .rv-stagger-x.in > *:nth-child(9){transition-delay:.44s}
html.js .rv-stagger-x.in > *:nth-child(n+10){transition-delay:.49s}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .hero{background:var(--navy-deep) url(img/hero-poster.jpg) center/cover}
  *{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  /* skip the cinematic intro: show hero copy instantly, no cover, no word animation */
  .hero-cover{display:none}
  .hero-h .hw{opacity:1;transform:none;filter:none;transition:none}
  .hero-intro .hero-el{opacity:1;transform:none;transition:none}
}

/* ============ BEFORE / AFTER SLIDER ============ */
.ba-sec .lead{max-width:56ch}
.ba-wrap{max-width:1180px;margin:36px auto 0;padding:0 clamp(16px,4vw,48px)}
.ba{position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px -28px rgba(12,34,55,.55),0 2px 0 rgba(255,255,255,.6) inset;
  user-select:none;touch-action:pan-y;cursor:ew-resize;background:var(--navy-deep);outline:none}
.ba:focus-visible{box-shadow:0 0 0 3px var(--sea-breeze),0 24px 60px -28px rgba(12,34,55,.55)}
.ba-img{position:absolute;top:0;left:0;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba-after{width:100%}
/* clip layer: only its WIDTH changes; inner image stays pinned to the slider's full width */
.ba-before-wrap{position:absolute;top:0;left:0;height:100%;width:50%;overflow:hidden;will-change:width;z-index:2}
.ba.hinting .ba-before-wrap,.ba.hinting .ba-handle{transition:width .24s ease,left .24s ease}
.ba-before-wrap .ba-before{width:var(--ba-w,100%);max-width:none}

/* handle */
.ba-handle{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  pointer-events:none;z-index:4}
.ba-line{flex:1;width:2px;background:rgba(255,255,255,.92);box-shadow:0 0 10px rgba(12,34,55,.4)}
.ba-grip{flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;color:var(--deep-water);
  background:#fff;box-shadow:0 6px 18px -4px rgba(12,34,55,.6);margin:8px 0}
.ba-grip svg{width:20px;height:20px}

/* time tags */
.ba-tag{position:absolute;top:16px;z-index:3;font-family:var(--font-cta);
  font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px);
  background:rgba(12,34,55,.62);border:1px solid rgba(255,255,255,.22)}
.ba-tag-before{left:16px}
.ba-tag-after{right:16px;background:rgba(26,143,204,.68);border-color:rgba(255,255,255,.3)}

.ba-cap{margin:18px 0 0;text-align:center;font-family:var(--font-cta);
  font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--slate);
  display:flex;align-items:center;justify-content:center;gap:8px}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--good);
  box-shadow:0 0 0 4px rgba(46,125,91,.18);display:inline-block}

@media(max-width:720px){
  .ba-wrap{padding:0 14px}
  .ba{border-radius:14px}
  .ba-grip{width:40px;height:40px}
  .ba-tag{font-size:.64rem;padding:5px 9px;top:12px}
  .ba-tag-before{left:12px}.ba-tag-after{right:12px}
}

/* ============================================================
   SERVICE PAGE TEMPLATE  (scoped .svc-* + .skip-link)
   Reuses tokens, .btn, .eyebrow, .reveal from above.
   ============================================================ */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--deep-water);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;font-family:var(--font-cta);font-weight:700;font-size:13px}
.skip-link:focus{left:0}

/* breadcrumb */
.svc-breadcrumb{border-bottom:1px solid var(--line);background:var(--sky-wash)}
.svc-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:14px 0;font-family:var(--font-cta);font-size:12.5px;font-weight:600;letter-spacing:.03em}
.svc-breadcrumb li{display:flex;align-items:center;gap:8px;color:var(--slate)}
.svc-breadcrumb li+li::before{content:"›";color:var(--line);font-weight:700}
.svc-breadcrumb a{color:var(--deep-breeze);text-decoration:none}
.svc-breadcrumb a:hover{color:var(--sea-breeze);text-decoration:underline}
.svc-breadcrumb li[aria-current]{color:var(--deep-water)}

/* generic section rhythm */
.svc-section{padding:84px 0}
.svc-head{max-width:760px;margin:0 0 44px}
.svc-head h2{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,4vw,42px);line-height:1.08;letter-spacing:-.01em;color:var(--deep-water);margin:0 0 14px}
.svc-head-lead{font-size:17px;line-height:1.6;color:var(--slate);margin:0}
.svc-eyebrow{display:inline-block;font-family:var(--font-cta);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);background:rgba(255,126,135,.12);padding:6px 13px;border-radius:100px;margin-bottom:20px}

/* hero */
.svc-hero{padding:56px 0 72px;background:linear-gradient(180deg,var(--sky-wash),#fff)}
.svc-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.svc-hero-copy h1{font-family:var(--font-display);font-weight:600;font-size:clamp(34px,5.2vw,58px);line-height:1.02;letter-spacing:-.02em;color:var(--deep-water);margin:0 0 20px}
.svc-lead{font-size:19px;line-height:1.6;color:var(--slate);margin:0 0 30px;max-width:37ch}
.svc-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:28px}
.svc-hero-trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.svc-hero-trust li{position:relative;padding-left:24px;font-family:var(--font-cta);font-weight:600;font-size:13.5px;color:var(--deep-water)}
.svc-hero-trust li::before{content:"";position:absolute;left:0;top:2px;width:15px;height:15px;border-radius:50%;background:var(--good);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;background:var(--good)}
.svc-hero-media{position:relative}
.svc-hero-media img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow-md);display:block}
.svc-hero-badge{position:absolute;left:-18px;bottom:-18px;background:#fff;border-radius:14px;box-shadow:var(--shadow-md);padding:14px 18px;display:flex;align-items:center;gap:12px}
.svc-hero-badge-num{font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--sun-gold);line-height:1}
.svc-hero-badge-txt{font-family:var(--font-cta);font-weight:600;font-size:12px;line-height:1.35;color:var(--deep-water)}

/* overview */
.svc-overview{background:#fff}
.svc-overview-grid{display:grid;grid-template-columns:1.4fr .85fr;gap:48px;align-items:start}
.svc-overview-lead h2{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3.6vw,38px);line-height:1.1;letter-spacing:-.01em;color:var(--deep-water);margin:0 0 18px}
.svc-overview-lead p{font-size:17.5px;line-height:1.65;color:var(--slate);margin:0 0 16px}
.svc-facts{background:var(--breeze-mist);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px}
.svc-facts h3{font-family:var(--font-cta);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--deep-breeze);margin:0 0 16px}
.svc-facts dl{margin:0}
.svc-facts div{padding:12px 0;border-bottom:1px solid rgba(15,99,145,.14)}
.svc-facts div:last-child{border-bottom:none;padding-bottom:0}
.svc-facts dt{font-family:var(--font-cta);font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:3px}
.svc-facts dd{margin:0;font-size:15px;font-weight:500;color:var(--deep-water);line-height:1.4}

/* included grid */
.svc-included{background:var(--sky-wash)}
.svc-incl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc-incl{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;transition:transform .2s ease,box-shadow .2s ease}
.svc-incl:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.svc-incl h3{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--deep-water);margin:0 0 8px}
.svc-incl p{font-size:15px;line-height:1.55;color:var(--slate);margin:0}
.svc-incl-note{margin:28px 0 0;font-size:15.5px;color:var(--slate)}
.svc-incl-note a{color:var(--deep-breeze);font-weight:600;text-decoration:none;white-space:nowrap}
.svc-incl-note a:hover{text-decoration:underline}

/* why grid */
.svc-why{background:#fff}
.svc-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.svc-why-card{border-top:3px solid;border-image:var(--warm-grad) 1;padding:22px 4px 0}
.svc-why-k{display:block;font-family:var(--font-cta);font-weight:800;font-size:13px;letter-spacing:.1em;color:var(--sun-gold);margin-bottom:12px}
.svc-why-card h3{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--deep-water);margin:0 0 8px;line-height:1.15}
.svc-why-card p{font-size:14.5px;line-height:1.55;color:var(--slate);margin:0}

/* difference split */
.svc-diff{background:var(--navy-deep);color:#fff}
.svc-diff-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
.svc-diff-media img{width:100%;height:auto;border-radius:var(--radius);display:block;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.svc-diff-copy .eyebrow{color:#7FCBF0}
.svc-diff-copy h2{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,4vw,42px);line-height:1.08;color:#fff;margin:0 0 16px}
.svc-diff-copy>p{font-size:17.5px;line-height:1.65;color:#C7D8E6;margin:0 0 22px}
.svc-check{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:13px}
.svc-check li{position:relative;padding-left:32px;font-size:16px;line-height:1.5;color:#E1F2FB}
.svc-check li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--sea-breeze);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/13px no-repeat}

/* pricing */
.svc-pricing{background:var(--sky-wash)}
.svc-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc-price{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;text-align:center}
.svc-price-feat{border:2px solid var(--sea-breeze);box-shadow:var(--shadow-md);position:relative}
.svc-price-feat::before{content:"Most offices";position:absolute;top:-13px;left:50%;transform:translateX(-50%);line-height:1;background:var(--warm-grad);color:#fff;font-family:var(--font-cta);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:100px;white-space:nowrap}
.svc-price-k{display:block;font-family:var(--font-cta);font-weight:700;font-size:14px;letter-spacing:.04em;color:var(--deep-water);margin-bottom:4px}
.svc-price-size{display:block;font-size:13px;color:var(--slate);margin-bottom:16px}
.svc-price-amt{display:block;font-family:var(--font-display);font-weight:700;font-size:30px;color:var(--deep-breeze);line-height:1}
.svc-price-amt span{font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--slate)}
.svc-price-note{margin:28px 0 0;font-size:15.5px;line-height:1.6;color:var(--slate);max-width:760px}
.svc-price-note a{color:var(--deep-breeze);font-weight:600;text-decoration:none}
.svc-price-note a:hover{text-decoration:underline}

/* resources */
.svc-resources{background:#fff}
.svc-res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.svc-res{display:block;background:var(--sky-wash);border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 24px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.svc-res:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--breeze-mist)}
.svc-res-tag{display:inline-block;font-family:var(--font-cta);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--deep-breeze);margin-bottom:12px}
.svc-res h3{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.2;color:var(--deep-water);margin:0 0 10px}
.svc-res p{font-size:14.5px;line-height:1.55;color:var(--slate);margin:0 0 16px}
.svc-res-more{font-family:var(--font-cta);font-weight:700;font-size:13.5px;color:var(--sunset)}
.svc-res-all{margin:28px 0 0;text-align:center}
.svc-res-all a{font-family:var(--font-cta);font-weight:700;font-size:15px;color:var(--deep-breeze);text-decoration:none}
.svc-res-all a:hover{text-decoration:underline}

/* faq */
.svc-faq{background:var(--sky-wash)}
.svc-faq-wrap{max-width:840px}
.svc-faq-list{display:grid;gap:12px}
.svc-q{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.svc-q summary{cursor:pointer;list-style:none;padding:20px 24px;font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--deep-water);display:flex;justify-content:space-between;align-items:center;gap:16px}
.svc-q summary::-webkit-details-marker{display:none}
.svc-q summary::after{content:"+";font-family:var(--font-body);font-weight:400;font-size:26px;color:var(--sea-breeze);line-height:1;flex:none;transition:transform .25s ease}
.svc-q[open] summary::after{transform:rotate(45deg)}
.svc-a{padding:0 24px 22px}
.svc-a p{font-size:16px;line-height:1.62;color:var(--slate);margin:0}

/* related */
.svc-related{background:#fff}
.svc-rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.svc-rel{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.svc-rel:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.svc-rel h3{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--deep-water);margin:0 0 8px;min-height:1.5em}
.svc-rel p{font-size:14.5px;line-height:1.5;color:var(--slate);margin:0 0 14px}
.svc-rel-more{font-family:var(--font-cta);font-weight:700;font-size:13px;color:var(--deep-breeze)}

/* cta band */
.svc-cta{background:var(--deep-water);color:#fff;padding:72px 0}
.svc-cta-inner{max-width:720px;margin:0 auto;text-align:center}
.svc-cta h2{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3.6vw,38px);line-height:1.1;color:#fff;margin:0 0 14px}
.svc-cta p{font-size:17px;line-height:1.6;color:#C7D8E6;margin:0 0 28px}
.svc-cta-btns{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:center}
.svc-cta-phone{font-family:var(--font-cta);font-weight:600;font-size:15px;color:#7FCBF0;text-decoration:none}
.svc-cta-phone:hover{color:#fff;text-decoration:underline}

/* responsive */
@media(max-width:940px){
  .svc-hero-grid{grid-template-columns:1fr;gap:40px}
  .svc-hero-media{order:-1}
  .svc-overview-grid{grid-template-columns:1fr;gap:32px}
  .svc-incl-grid{grid-template-columns:repeat(2,1fr)}
  .svc-why-grid{grid-template-columns:repeat(2,1fr)}
  .svc-diff-grid{grid-template-columns:1fr;gap:36px}
  .svc-diff-media{order:-1}
  .svc-price-grid{grid-template-columns:1fr}
  .svc-res-grid{grid-template-columns:1fr}
  .svc-rel-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .svc-section{padding:60px 0}
  .svc-incl-grid,.svc-why-grid,.svc-rel-grid{grid-template-columns:1fr}
  .svc-hero-cta .btn,.svc-cta-btns .btn{width:100%;justify-content:center}
  .svc-hero-media{margin-bottom:44px}
  .svc-hero-badge{left:12px;bottom:-32px;padding:14px 20px;align-items:center;gap:14px}
  .svc-hero-badge-num{font-size:28px;line-height:1;align-self:center}
  .svc-hero-badge-txt{font-size:11.5px;line-height:1.35;padding-bottom:2px}
}

/* ============================================================
   SERVICE PAGE - DESIGN UPGRADE
   Fixes: narrow single-column feel, flat H1, uniform rhythm,
   empty right side, low visual interest. Wider hero media,
   gradient-italic H1 accent (anti-clip), alternating rhythm,
   section index numerals, richer cards.
   ============================================================ */

/* H1 gradient-italic accent with generous headroom so Fraunces
   italic swashes/descenders never clip (recurring issue). */
.svc-hero-copy h1 em{
  font-style:italic;font-weight:500;
  background:linear-gradient(118deg,var(--sea-breeze),var(--deep-breeze) 55%,#57B7EA);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;padding:.04em .14em .18em .04em;margin:-.04em -.1em -.16em -.02em;
  line-height:1.18;overflow:visible}

/* HERO: rebalance so it fills the width. Larger media column,
   taller image, tighter copy measure, more presence. */
.svc-hero{padding:64px 0 84px;background:
  radial-gradient(1100px 460px at 88% -6%,rgba(87,183,234,.16),transparent 60%),
  linear-gradient(180deg,var(--sky-wash),#fff)}
.svc-hero-grid{grid-template-columns:1fr 1.02fr;gap:64px}
.svc-hero-copy h1{font-size:clamp(38px,5.6vw,64px);line-height:1.0;margin:0 0 22px}
.svc-lead{max-width:46ch;font-size:19.5px}
.svc-hero-media img{aspect-ratio:4/3.05;object-fit:cover;box-shadow:0 30px 70px -24px rgba(12,34,55,.42)}
.svc-hero-badge{left:-22px;bottom:-22px;padding:16px 20px;border:1px solid var(--line)}

/* SECTION RHYTHM: vary padding by role instead of a flat 84px
   everywhere. Big anchor sections breathe; connective ones tighten. */
.svc-section{padding:96px 0}
.svc-overview{padding:88px 0}
.svc-why{padding:80px 0}
.svc-related{padding:76px 0}

/* SECTION HEADS: add an index numeral + rule so the page reads
   like a considered sequence, not a stack of boxes. */
.svc-head{max-width:820px;position:relative}
.svc-head .svc-eyebrow{margin-bottom:16px}
.svc-head h2{font-size:clamp(30px,4.2vw,46px);letter-spacing:-.02em}

/* OVERVIEW: give the lead real scale, warm up the facts card. */
.svc-overview-grid{grid-template-columns:1.5fr .8fr;gap:56px}
.svc-overview-lead h2{font-size:clamp(28px,3.8vw,40px)}
.svc-overview-lead p{font-size:18px}
.svc-facts{background:linear-gradient(165deg,var(--breeze-mist),#fff);box-shadow:0 18px 40px -26px rgba(12,34,55,.3)}

/* INCLUDED: make cards feel designed, add a soft top accent + index. */
.svc-incl-grid{gap:22px}
.svc-incl{padding:30px 26px 26px;border-radius:18px;position:relative;overflow:hidden}
.svc-incl::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--warm-grad);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.svc-incl:hover::before{transform:scaleX(1)}
.svc-incl:hover{box-shadow:0 22px 48px -28px rgba(12,34,55,.45)}
.svc-incl h3{font-size:21px}

/* WHY: turn the four thin columns into stronger cards. */
.svc-why-grid{gap:24px}
.svc-why-card{border-top:none;padding:28px 24px;background:var(--sky-wash);border:1px solid var(--line);border-radius:16px;position:relative}
.svc-why-card::before{content:"";position:absolute;top:0;left:24px;right:24px;height:3px;background:var(--warm-grad);border-radius:0 0 3px 3px}
.svc-why-k{font-size:15px;color:var(--sunset);margin-bottom:14px}
.svc-why-card h3{font-size:20px;min-height:2.3em;display:flex;align-items:flex-end}

/* PRICING: make the featured tier clearly win, add depth. */
.svc-price-grid{gap:24px}
.svc-price{padding:34px 28px;border-radius:18px}
.svc-price-feat{transform:translateY(-8px);box-shadow:0 30px 60px -30px rgba(26,143,204,.6)}
.svc-price-feat::before{top:-14px;padding:6px 16px;font-size:11.5px;box-shadow:0 6px 16px -4px rgba(245,131,28,.55)}
.svc-price-amt{font-size:34px}

/* RESOURCES: give the cards a bit more editorial character. */
.svc-res-grid{gap:24px}
.svc-res{padding:30px 30px 26px;border-radius:18px}
.svc-res h3{font-size:21px}

/* FAQ: center the column and let it breathe. */
.svc-faq-wrap{margin:0 auto}
.svc-q summary{font-size:19px;padding:22px 26px}

/* RELATED: cards with a directional cue. */
.svc-rel{padding:26px 24px;border-radius:16px;background:var(--sky-wash)}
.svc-rel:hover{background:#fff}

/* CTA: more presence, subtle glow. */
.svc-cta{padding:88px 0;background:
  radial-gradient(700px 300px at 50% 0,rgba(26,143,204,.28),transparent 62%),
  var(--deep-water)}
.svc-cta h2{font-size:clamp(30px,4.2vw,46px)}

/* responsive tuning for the upgraded layout */
@media(max-width:940px){
  .svc-hero-grid{grid-template-columns:1fr;gap:40px}
  .svc-overview-grid{grid-template-columns:1fr;gap:34px}
  .svc-section{padding:72px 0}
  .svc-price-feat{transform:none}
}

/* ============================================================
   SERVICE PAGE - DESCENDER + BADGE FIXES (critical)
   Fraunces has deep descenders (g, y, j, p, Q). Tight line-height
   was clipping the tails on every section heading. Give all svc
   display headings room, and remove any clipping around them.
   ============================================================ */
.svc-head h2,
.svc-overview-lead h2,
.svc-diff-copy h2,
.svc-cta h2,
.svc-incl h3,
.svc-res h3,
.svc-rel h3,
.svc-why-card h3,
.svc-q summary,
.svc-hero-copy h1{
  line-height:1.22;
  padding-bottom:.08em;
  overflow:visible;
}
/* headings sit in their own space, never cropped by the next block */
.svc-head h2{margin-bottom:16px}

/* ---- Featured pricing badge: stop it clipping ----
   Put the badge fully above the card with clear separation, add top
   room on the grid so it is never cut by the row edge, and make the
   badge legible with padding + shadow. The grid needs top padding so
   the lifted featured card + badge have somewhere to go. */
.svc-price-grid{padding-top:22px;align-items:start}
.svc-price-feat{overflow:visible}
.svc-price-feat::before{
  top:-16px;
  padding:7px 18px;
  font-size:12px;
  letter-spacing:.09em;
  line-height:1.1;
  box-shadow:0 8px 20px -6px rgba(245,131,28,.65);
  z-index:3;
}
/* make sure nothing above the grid overlaps the badge */
.svc-pricing .svc-head{margin-bottom:40px}

/* ---- Featured pricing badge: real element (replaces ::before) ----
   The pseudo-badge stacked behind the card. A real first-child span
   inside the card sits above the content, lifted with negative margin,
   and never clips because it lives in the card's normal flow. */
.svc-price-feat::before{content:none !important;display:none !important;}
.svc-price-feat{padding-top:38px;overflow:visible;}
.svc-price-tag{
  display:inline-block;
  margin:-14px 0 14px;
  background:var(--warm-grad);
  color:#fff;
  font-family:var(--font-cta);
  font-weight:700;
  font-size:12px;
  letter-spacing:.09em;
  text-transform:uppercase;
  line-height:1;
  padding:7px 18px;
  border-radius:100px;
  box-shadow:0 8px 20px -6px rgba(245,131,28,.6);
}

/* ============================================================
   SERVICE PAGE - VISUAL RICHNESS PASS
   Imagery, icons, full-bleed band, editorial detail strips.
   ============================================================ */

/* Overview: lead row full width, then image + facts side by side */
.svc-overview-lead-row{max-width:760px;margin:0 0 40px}
.svc-overview-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:40px;align-items:stretch}
.svc-overview-media{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 60px -30px rgba(12,34,55,.5)}
.svc-overview-media img{width:100%;height:100%;object-fit:cover;display:block}
.svc-overview-media figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 22px 16px;font-family:var(--font-cta);font-weight:600;font-size:13px;color:#fff;background:linear-gradient(180deg,transparent,rgba(12,34,55,.82))}
.svc-facts{align-self:stretch}

/* Included: icon on each card */
.svc-incl{position:relative}
.svc-incl-ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;color:var(--deep-breeze);background:var(--breeze-mist);margin-bottom:14px}
.svc-incl-ic svg{width:24px;height:24px}
.svc-incl:hover .svc-incl-ic{background:var(--warm-grad);color:#fff;transition:background .25s ease}

/* Included: editorial detail strip (image + copy) */
.svc-incl-feature{display:grid;grid-template-columns:1fr 1.05fr;gap:0;margin-top:40px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 20px 50px -32px rgba(12,34,55,.4)}
.svc-incl-feature-media{margin:0;min-height:100%}
.svc-incl-feature-media img{width:100%;height:100%;object-fit:cover;display:block;min-height:260px}
.svc-incl-feature-copy{padding:38px 40px;align-self:center}
.svc-incl-feature-copy h3{font-family:var(--font-display);font-weight:600;font-size:24px;color:var(--deep-water);margin:0 0 12px;line-height:1.2}
.svc-incl-feature-copy p{font-size:15.5px;line-height:1.6;color:var(--slate);margin:0 0 12px}
.svc-incl-feature-copy .svc-incl-note{margin:0}

/* Full-bleed proof band */
.svc-band{position:relative;padding:96px 0;overflow:hidden;isolation:isolate}
.svc-band-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2;transform:scale(1.04)}
.svc-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,rgba(12,34,55,.92),rgba(15,99,145,.72))}
.svc-band-inner{color:#fff;text-align:center}
.svc-band-lead{font-family:var(--font-display);font-weight:500;font-style:italic;font-size:clamp(22px,3vw,32px);line-height:1.3;max-width:760px;margin:0 auto 44px;color:#fff}
.svc-band-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.svc-band-stats > div{display:flex;flex-direction:column;gap:8px;padding:0 8px}
.svc-band-num{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,3.6vw,44px);line-height:1;color:#fff;letter-spacing:-.01em}
.svc-band-star{color:var(--sun-gold);font-size:.6em;margin-left:4px;vertical-align:top}
.svc-band-lbl{font-family:var(--font-cta);font-weight:500;font-size:13px;letter-spacing:.02em;color:rgba(225,242,251,.85);line-height:1.4}
.svc-band-stats > div + div{border-left:1px solid rgba(255,255,255,.18)}

@media(max-width:900px){
  .svc-overview-grid{grid-template-columns:1fr;gap:28px}
  .svc-incl-feature{grid-template-columns:1fr}
  .svc-incl-feature-media img{min-height:220px}
  .svc-band-stats{grid-template-columns:repeat(2,1fr);gap:24px 20px}
  .svc-band-stats > div:nth-child(odd){border-left:none}
  .svc-band-stats > div:nth-child(3){border-top:1px solid rgba(255,255,255,.18);padding-top:24px}
  .svc-band-stats > div:nth-child(4){border-top:1px solid rgba(255,255,255,.18);padding-top:24px}
}
@media(max-width:560px){
  .svc-band{padding:64px 0}
  .svc-incl-feature-copy{padding:26px 22px}
}

/* ============================================================
   ROOT FIX: Fraunces descender headroom (no more clipping)
   Fraunces has deep descenders/swashes on g y j p q and italic
   swashes. Any display heading below ~1.14 line-height clips.
   These override the tight values set earlier, globally.
   ============================================================ */
.svc-hero-copy h1{line-height:1.12}
.svc-head h2,
.svc-diff-copy h2{line-height:1.16}
.svc-overview-lead h2{line-height:1.16}
.svc-cta h2{line-height:1.16}
/* italic display text (hero <em>, band lead) needs the most room */
.svc-hero-copy h1 em,
.svc-band-lead{line-height:1.22;padding-bottom:.04em}
/* ensure no ancestor clips the swashes */
.svc-hero-copy h1,
.svc-head h2,
.svc-overview-lead h2,
.svc-diff-copy h2,
.svc-cta h2{overflow:visible;padding-bottom:.06em}

/* ============================================================
   SERVICES HUB PAGE (/services) - card grid for the nine services
   Appended for the hub page only. Reuses tokens and .svc-* rhythm.
   Fraunces headings here follow the ROOT FIX rules: line-height
   at or above 1.2, overflow visible, padding-bottom headroom.
   ============================================================ */
.svc-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc-hub-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:28px 26px 24px;text-decoration:none;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease}
.svc-hub-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--warm-grad);
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.svc-hub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.svc-hub-card:hover::before{transform:scaleX(1)}
.svc-hub-k{font-family:var(--font-cta);font-weight:800;font-size:13px;letter-spacing:.1em;color:var(--sun-gold);margin-bottom:12px}
.svc-hub-sub{font-family:var(--font-cta);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--deep-breeze);margin-bottom:5px}
.svc-hub-card h3{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--deep-water);
  margin:0 0 10px;line-height:1.2;padding-bottom:.08em;overflow:visible}
.svc-hub-card p{font-size:15px;line-height:1.55;color:var(--slate);margin:0 0 18px}
.svc-hub-more{margin-top:auto;font-family:var(--font-cta);font-weight:700;font-size:13.5px;color:var(--deep-breeze)}
.svc-hub-card:hover .svc-hub-more{color:var(--sea-breeze)}
/* flagship card: full row, navy, "Most popular" chip */
.svc-hub-feat{grid-column:1/-1;background:linear-gradient(140deg,var(--deep-water),var(--navy-deep));
  border-color:transparent;padding:34px 34px 30px}
.svc-hub-feat h3{color:#fff;font-size:clamp(24px,2.6vw,30px)}
.svc-hub-feat p{color:#C7D8E6;font-size:16.5px;max-width:64ch}
.svc-hub-feat .svc-hub-sub{color:#7FCBF0}
.svc-hub-feat .svc-hub-more{color:#7FCBF0}
.svc-hub-feat:hover .svc-hub-more{color:#fff}
/* chip uses the warm gradient as a thin accent, per the gradient rule */
.svc-hub-flag{position:absolute;top:24px;right:26px;background:var(--warm-grad);color:#fff;
  font-family:var(--font-cta);font-weight:700;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  line-height:1;padding:7px 14px;border-radius:100px;box-shadow:0 8px 20px -6px rgba(245,131,28,.5)}
@media(max-width:940px){.svc-hub-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .svc-hub-grid{grid-template-columns:1fr}
  .svc-hub-feat{padding:26px 22px 24px}
  .svc-hub-flag{position:static;align-self:flex-start;margin-bottom:14px}
}

/* ---------- MAP: Central Park + comprehensive coverage (added with logo/map update) ---------- */
.map-park{fill:#D6E7CF;stroke:#C2D8BC;stroke-width:.5;opacity:.95}.map-boro-park{fill:rgba(63,110,70,.45);font-size:7.5px;letter-spacing:.24em;font-weight:700}
.map-reg-label.lbl-quiet{opacity:0;transition:opacity .18s}
.map-reg-label.lbl-quiet.is-on,.map-reg-label.lbl-quiet.selected{opacity:1}

.ad-page{display:inline-block;margin:10px 0 0 12px;font-family:var(--font-cta);font-weight:800;font-size:13px;color:var(--deep-breeze);text-decoration:none}
.ad-page:hover{text-decoration:underline}

/* ============================================================
   CONTRAST + LAYOUT POLISH (Sept 3)
   ============================================================ */
.btn-warm>span:not(.btn-spark){text-shadow:0 1px 1px rgba(0,0,0,.14)}
.feat-flag,.rev-src,.contact-card h3{color:var(--deep-breeze)}
.hub-card-k,.svc-res-more,.svc-why-k{color:var(--sunset-ink)}
.svc-eyebrow{color:var(--coral-ink);background:rgba(255,126,135,.14)}
.svc-hero-badge-num{color:var(--gold-ink)}
.svc-price-tag{background:none;background-color:#FFF1D6;color:var(--sunset-ink);border:1px solid #F5D9A6}
.foot-badges{color:#9FB3C4}
.svc-band-star{color:#FFD27A}
/* service hero: two buttons side by side */
.svc-hero-cta{flex-wrap:nowrap;gap:12px}
.svc-hero-cta .btn{font-size:15px;padding:14px 22px;white-space:nowrap}
@media(max-width:560px){.svc-hero-cta{flex-wrap:wrap}.svc-hero-cta .btn{white-space:normal}}
/* overview: editorial split, heading left, copy right */
.svc-overview-lead-row{max-width:none}
.svc-overview-lead{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;align-items:start}
.svc-overview-lead .ov-head{position:sticky;top:96px}
.svc-overview-lead .ov-copy p:first-child{margin-top:4px}
.svc-overview-lead h2{max-width:14ch;text-wrap:balance}
@media(max-width:940px){.svc-overview-lead{grid-template-columns:1fr;row-gap:6px}.svc-overview-lead .ov-head{position:static}.svc-overview-lead h2{max-width:none}}
.promise-btn{color:var(--sunset-ink)}
.promise-btn:hover{color:var(--coral-ink)}
.section-estimate .eyebrow{color:#9CD3F2}
/* left-aligned homepage blocks: kill the centered auto margins (Sept 3) */
.section>.wrap .estimate-copy .sec-h,.section>.wrap .about-body .sec-h,.section>.wrap .brief-head .sec-h,.section>.wrap .brief-head .lead,.section>.wrap .about-body .lead{margin-left:0;margin-right:0}
.brief-meta{color:var(--deep-breeze)}

/* assessment pass: proof near buttons, tap targets, small type */
.hero-pills .hero-rating{color:inherit;text-decoration:none;font-weight:700}
.hero-pills .hero-rating:hover{text-decoration:underline}
.bf-proof{margin:14px 0 4px;font-family:var(--font-cta);font-weight:600;font-size:13.5px;color:var(--deep-water)}
.bf-proof a{color:var(--sunset-ink);text-decoration:none}
.bf-proof a:hover{text-decoration:underline}
.nav-toggle{min-width:44px;min-height:44px}
.foot-col a{display:block;padding:5px 0;line-height:1.6}
.foot-tel{display:inline-block;padding:8px 0}
.cmp-cell,.cmp-txt{font-size:13px}
.ba-tag{font-size:11.5px}

.calc-hint{margin:10px 0 18px;font-size:12.5px;line-height:1.45;color:var(--deep-water);opacity:.8}

/* ---- client logo strip ---- */
.clients{padding:10px 0 48px;background:var(--sky-wash)}
.clients-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:26px 56px}
.clients-row li{display:flex;align-items:center;justify-content:center;min-height:46px}
.clients-row img{display:block;height:auto;opacity:.55;filter:saturate(0);transition:opacity .25s ease,transform .25s ease}
.clients-row li:hover img{opacity:.9;transform:translateY(-1px)}
@media (max-width:720px){
  .clients{padding:26px 0 32px}
  .clients-row{gap:20px 34px}
  .clients-row li{min-height:38px}
  .clients-row img{transform:scale(.88);transform-origin:center}
  .clients-row li:hover img{transform:scale(.88)}
}
@media (prefers-reduced-motion:reduce){.clients-row img{transition:none}}

/* ---- hero woman-owned badge ----
   Self-declared brand badge, not a certification mark. Decorative: the same
   facts are in the eyebrow, the lead and the pills, so it is aria-hidden. */
.hero-badge{
  position:absolute;z-index:4;right:clamp(16px,3.2vw,48px);bottom:clamp(16px,3vw,44px);
  width:clamp(70px,9.2vw,136px);aspect-ratio:1;pointer-events:none;
  filter:drop-shadow(0 6px 22px rgba(4,24,42,.45));
}
.hero-badge svg{width:100%;height:100%;display:block;overflow:visible}
.hero-badge .hb-fill{fill:rgba(8,40,68,.5);stroke:rgba(255,255,255,.55);stroke-width:1.6}
.hero-badge .hb-ring{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1}
.hero-badge .hb-dot{fill:var(--coral)}
.hero-badge text{text-anchor:middle;fill:#fff}
.hero-badge .hb-top{font-family:var(--font-cta);font-weight:700;font-size:16px;letter-spacing:2.4px}
.hero-badge .hb-bot{font-family:var(--font-cta);font-weight:600;font-size:11px;letter-spacing:3px;fill:rgba(255,255,255,.85)}
.hero-badge .hb-est{font-family:var(--font-cta);font-weight:600;font-size:10px;letter-spacing:4px;fill:rgba(255,255,255,.72)}
.hero-badge .hb-year{font-family:var(--font-display);font-weight:600;font-size:35px;letter-spacing:.5px}
@supports not (aspect-ratio:1){.hero-badge{height:clamp(70px,9.2vw,136px)}}
/* Small screens: hero copy centres and fills the width, so the badge gets its
   own lane at the bottom instead of sitting on top of the pills. */
/* Under 760px the hero copy centres and fills the width, and below 720px a
   fixed Call / Book bar covers the bottom 72px of the viewport. Floating the
   badge in a corner there means it either sits on the pills or hides behind
   the bar, so on phones it leaves the corner and stacks under the copy. */
@media(max-width:760px){
  .hero{flex-direction:column;justify-content:center}
  .hero-inner{padding-bottom:18px}
}
/* The fixed Call / Book bar covers the bottom 72px of the viewport from 720px
   down, and the hero is a full-viewport section, so its own bottom sits under
   the bar. Reserve that height inside the hero. */
@media(max-width:720px){
  .hero{padding-bottom:84px}
}
@media(max-width:760px){
  .hero-badge{position:static;right:auto;bottom:auto;margin:0 auto;width:clamp(74px,20vw,98px);flex:none}
}
@media(prefers-reduced-motion:no-preference){
  .hero-intro .hero-badge{opacity:0;transform:scale(.94);transition:opacity .7s ease .35s,transform .7s cubic-bezier(.2,.8,.2,1) .35s}
  .hero-intro.intro-done .hero-badge{opacity:1;transform:none}
}

/* ============ RESPONSIVE HARDENING (Sept 4 pass) ============ */

/* 1. Horizontal reveals pushed content past the right edge on phones, which
      gave every page a few pixels of horizontal scroll and side-to-side
      rubber-banding. Below 760px the same reveals come from the Y axis. */
@media(max-width:760px){
  html.js .rv-left,html.js .rv-right{transform:translateY(26px)}
  html.js .rv-swing{transform:translateY(26px) rotate(0deg)}
}
/* Guard so no future transform can create a horizontal scrollbar. `clip`
   rather than `hidden` because `hidden` on body breaks position:sticky. */
html,body{overflow-x:clip}

/* 2. Grid children default to min-width:auto, so one wide word or image held
      the single-column layout at 333px inside a 320px phone. */
.svc-diff-grid>*,.svc-onb-grid>*,.about-facts-grid>*,.ba-wrap>*{min-width:0}
.svc-diff-media img,.svc-diff-copy img{max-width:100%;height:auto}

/* 3. The comparison table is wider than a small phone. It was being clipped by
      overflow:hidden (used for the rounded corners), so the last column was
      unreachable. Let it scroll inside its own container instead. */
@media(max-width:560px){
  .cmp-wrap{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  table.cmp{table-layout:auto;min-width:460px;font-size:14.5px}
  table.cmp th,table.cmp td{padding:14px 16px}
}

/* 4. The range input's own box was 7px tall. The thumb is 26px, but the box is
      what a finger has to find. Pad the box out to a real target and clip the
      track gradient to the content box so it still reads as a 6px rail. */
input[type=range]{padding:12px 0;height:30px;background-clip:content-box;box-sizing:border-box}
@media(pointer:coarse){
  input[type=range]::-webkit-slider-thumb{width:30px;height:30px}
  input[type=range]::-moz-range-thumb{width:26px;height:26px}
}

/* 5. Tap targets that were under 28px. */
.hero-pills li:has(.hero-rating){padding:0}
.hero-pills .hero-rating{display:inline-flex;align-items:center;min-height:30px;padding:0 15px}
.art-body .art-cta-call{display:inline-flex;align-items:center;min-height:30px}
.mb-call,.mb-book{min-height:44px}

/* 6. Sub-11px type is below the comfortable floor on a phone. */
.ad-tag,.hub-card-k{font-size:11px}

/* --- responsive hardening, round 2 --- */

/* Carousel dots were 10px and 13px. Keep the dot the same size, grow the box a
   finger can actually hit. background-clip paints the dot in the content box. */
.rev-dots{gap:2px}
.rev-dots button{width:28px;height:28px;padding:9px;box-sizing:border-box;background-clip:content-box}

/* Long button labels could not fit a 320px phone, so the pill was clipped.
   Let the label wrap on the narrowest screens instead of running off. */
@media(max-width:420px){
  .btn{white-space:normal;text-align:center;padding:13px 18px;max-width:100%}
  .btn-lg{padding:15px 20px}
}

/* Tappable phone numbers and email addresses in prose and in the footer were
   15 to 16px tall. On a phone these are the primary contact actions. */
.calc-call a,.bf-fine a,.foot-brand address a,.rev-agg .rev-link,.ad-page,
.svc-price-note a,.svc-incl-note a,.rev-src,.contact-card p a,.svc-res-all a,
.bf-proof a{display:inline-block;padding:6px 0;line-height:1.2}
.crumbs a,nav[aria-label="Breadcrumb"] a{display:inline-block;padding:5px 0}