/* ==========================================================================
   Palmetto Home Cleaning — "The Clean Reveal"
   Design system: 8px spacing · Fraunces + Inter · brand palette from logo
   Motion policy: scroll-tied motion animates transform/opacity only.
   ========================================================================== */

:root {
  /* Brand */
  --navy: #082847;
  --navy-deep: #041A30;
  --navy-soft: #1C3952;
  --sage: #7A8D6C;
  --sage-deep: #5D7052;      /* button surfaces — AA with white text */
  --sage-light: #94A68D;
  --sky: #8AA9BB;
  --sky-pale: #D8E2EA;
  --paper: #FAFBFC;
  --paper-warm: #F2F5F7;
  --ink: #0E2238;
  --muted: #5A6B7B;
  --white: #FFFFFF;
  --error: #B3372B;

  /* 8px spacing scale */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px;
  --s-6: 48px; --s-7: 56px; --s-8: 64px; --s-10: 80px; --s-12: 96px;
  --s-14: 112px; --s-16: 128px;

  --radius-s: 12px;
  --radius: 16px;
  --radius-l: 24px;
  --shadow: 0 18px 50px -22px rgba(8, 40, 71, .45);
  --shadow-soft: 0 10px 30px -16px rgba(8, 40, 71, .35);
  --ease-out: cubic-bezier(.22, .61, .36, 1);

  --speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .38 0 0 0 0 .42 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* Safari 15 fallback */
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
[id] { scroll-margin-top: 92px; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; }
button { font: inherit; }
::selection { background: var(--sky-pale); color: var(--navy); }

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--navy);
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--s-3); }

.eyebrow {
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sage);
  margin-bottom: var(--s-2);
}
.eyebrow-light { color: var(--sage-light); }

/* ---------- Focus & skip link ---------- */
:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: absolute;
  top: -60px; left: var(--s-2);
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  font-size: .9rem;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--ease-out), background .25s, box-shadow .25s;
}
.btn:hover { background: var(--navy-deep); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn:active { transform: translateY(0); }
.btn-sage { background: var(--sage-deep); }
.btn-sage:hover { background: #4F6045; }
.btn-lg { padding: 16px 32px; font-size: 1.02rem; }
.link-arrow { font-weight: 600; transition: opacity .2s; }
.link-arrow:hover { opacity: .75; }
.link-arrow span { display: inline-block; transition: transform .25s var(--ease-out); }
.link-arrow:hover span { transform: translateX(4px); }

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  transform: scale(0);
  pointer-events: none;
  animation: ripple .6s ease-out forwards;
}
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* ==========================================================================
   HEADER
   ========================================================================== */
#siteHeader {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background .35s, box-shadow .35s;
}
#siteHeader nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
#siteHeader.scrolled {
  background: rgba(250, 251, 252, .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(8, 40, 71, .08), 0 8px 24px -18px rgba(8, 40, 71, .25);
}
/* No-JS: header never gets .scrolled, so keep it solid and readable */
html:not(.js) #siteHeader {
  position: sticky;
  background: rgba(250, 251, 252, .95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(8, 40, 71, .08);
}
html:not(.js) .nav-links a:not(.btn) { color: var(--muted); }
html:not(.js) .nav-toggle { color: var(--navy); }
.brand-chip {
  display: inline-block;
  background: var(--white);
  border-radius: 10px;
  padding: 5px 10px;
  box-shadow: var(--shadow-soft);
  line-height: 0;
}
.brand-chip img { width: 66px; height: auto; }
.nav-links {
  display: flex;
  gap: var(--s-4);
  align-items: center;
}
.nav-links a {
  font-size: .92rem;
  font-weight: 500;
  color: var(--white);
  transition: opacity .2s, color .2s;
}
.nav-links a:not(.btn):hover { opacity: .75; }
#siteHeader.scrolled .nav-links a { color: var(--muted); }
#siteHeader.scrolled .nav-links a:not(.btn):hover { color: var(--navy); opacity: 1; }
#siteHeader.scrolled .nav-links a.btn, .nav-links a.btn { color: var(--white); }
.nav-tel { font-variant-numeric: tabular-nums; }
.btn-nav { padding: 11px 22px; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--white);
  padding: 8px;
  border-radius: 8px;
}
#siteHeader.scrolled .nav-toggle, #siteHeader.menu-open .nav-toggle { color: var(--navy); }

/* ==========================================================================
   HERO — THE CLEAN REVEAL
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-deep);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(102deg, rgba(4, 26, 48, .78) 0%, rgba(4, 26, 48, .52) 44%, rgba(4, 26, 48, .18) 75%),
    linear-gradient(180deg, rgba(4, 26, 48, .55) 0%, rgba(4, 26, 48, 0) 30%, rgba(4, 26, 48, .35) 100%);
}
.hero-grain {
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: .5;
  mix-blend-mode: overlay;
}
.hero-rays {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 42%);
  opacity: 0;
  transition: opacity 1.6s ease .2s;
}
.hero.revealed .hero-rays { opacity: 1; }

.hero-inner {
  position: relative;
  z-index: 1;
  padding-top: var(--s-14);
  padding-bottom: var(--s-12);
  max-width: 1200px;
  width: 100%;
}
.hero h1 {
  color: var(--white);
  font-size: clamp(2.7rem, 6vw, 4.6rem);
  max-width: 15em;
}
.hero h1 em {
  font-style: italic;
  font-weight: 450;
  color: var(--sage-light);
}
.hero .lead {
  color: var(--sky-pale);
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  margin: var(--s-3) 0 var(--s-5);
  max-width: 44ch;
}
.hero-cta {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
}
.hero-cta .link-arrow { color: var(--white); }
.hero-trust {
  margin-top: var(--s-6);
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.hero-trust li {
  background: rgba(250, 251, 252, .1);
  border: 1px solid rgba(216, 226, 234, .25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-s);
  padding: 10px 18px;
  display: flex;
  flex-direction: column;
}
.hero-trust b {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--white);
}
.hero-trust span { font-size: .78rem; color: var(--sky-pale); }

/* --- grime + wipe (JS only) --- */
.wipe-track {
  position: absolute; inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  display: none;
}
html.js .wipe-track { display: block; }
.wipe-carrier {
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  will-change: transform;
  transform: rotate(-14deg);
}
.grime {
  position: absolute; inset: 0;
  background-color: rgba(222, 228, 232, .93);
  background-image:
    radial-gradient(38% 30% at 24% 30%, rgba(90, 107, 123, .25), transparent 70%),
    radial-gradient(30% 26% at 72% 62%, rgba(90, 107, 123, .22), transparent 70%),
    radial-gradient(24% 20% at 48% 82%, rgba(122, 141, 108, .12), transparent 70%),
    var(--speckle);
}
.squeegee {
  position: absolute;
  z-index: 3;
  top: 0; left: 0;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.hero-sparkles { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sparkle {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--white);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  will-change: transform, opacity;
}

/* --- dust motes in the light --- */
.hero-motes { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 2s ease 1s; }
.hero.revealed .hero-motes { opacity: 1; }
.hero-motes i {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  filter: blur(1px);
  animation: mote 13s linear infinite;
}
.hero-motes i:nth-child(1) { top: 22%; left: 58%; animation-duration: 14s; }
.hero-motes i:nth-child(2) { top: 34%; left: 70%; width: 4px; height: 4px; animation-duration: 17s; animation-delay: -4s; }
.hero-motes i:nth-child(3) { top: 18%; left: 80%; animation-duration: 12s; animation-delay: -8s; }
.hero-motes i:nth-child(4) { top: 48%; left: 64%; width: 5px; height: 5px; animation-duration: 19s; animation-delay: -2s; }
.hero-motes i:nth-child(5) { top: 40%; left: 86%; animation-duration: 15s; animation-delay: -10s; }
.hero-motes i:nth-child(6) { top: 60%; left: 74%; width: 4px; height: 4px; animation-duration: 18s; animation-delay: -6s; }
.hero-motes i:nth-child(7) { top: 28%; left: 90%; width: 5px; height: 5px; animation-duration: 16s; animation-delay: -12s; }
.hero-motes i:nth-child(8) { top: 54%; left: 92%; animation-duration: 20s; animation-delay: -3s; }
@keyframes mote {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: .8; }
  88%  { opacity: .5; }
  100% { transform: translate3d(-46px, 34px, 0); opacity: 0; }
}

/* --- scroll cue --- */
.scroll-cue {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: var(--s-4);
  transform: translateX(-50%);
}
html.js .scroll-cue { opacity: 0; animation: cueIn 1s var(--ease-out) 2.4s both; }
@keyframes cueIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.scroll-cue-track {
  display: block;
  width: 26px; height: 42px;
  border: 2px solid rgba(216, 226, 234, .7);
  border-radius: 999px;
  position: relative;
}
.scroll-cue-dot {
  position: absolute;
  left: 50%; top: 7px;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--sky-pale);
  animation: cueDot 2s ease-in-out infinite;
}
@keyframes cueDot {
  0%, 100% { transform: translateY(0); opacity: 1; }
  55% { transform: translateY(16px); opacity: .2; }
  56% { transform: translateY(0); opacity: 0; }
}

/* ==========================================================================
   SECTIONS — shared
   ========================================================================== */
.section { padding: var(--s-14) 0; position: relative; }
.section-head { max-width: 640px; margin-bottom: var(--s-8); }
.section-head h2 { font-size: clamp(2rem, 3.6vw, 2.75rem); }
.section-head p:not(.eyebrow) { color: var(--muted); margin-top: var(--s-2); font-size: 1.05rem; }

/* polish-in haze — injected by JS, opacity scrubbed to 0 */
.polish-haze {
  position: absolute; inset: 0;
  background: var(--paper);
  pointer-events: none;
  z-index: 5;
}

/* wave dividers */
.wave { line-height: 0; }
.wave svg { display: block; width: 100%; height: clamp(48px, 7vw, 90px); }
.wave-drift { animation: waveDrift 9s ease-in-out infinite alternate; }
@keyframes waveDrift { from { transform: translateX(0); } to { transform: translateX(-64px); } }
.wave-to-deep { background: var(--paper-warm); }

/* ==========================================================================
   SERVICES
   ========================================================================== */
#services { padding-bottom: 0; }
#services .wave { margin-top: var(--s-12); }
.services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
.svc {
  background: var(--white);
  border-radius: var(--radius);
  padding: var(--s-4);
  border: 1px solid rgba(8, 40, 71, .09);
  position: relative;
  overflow: hidden;
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0));
  transition: transform .3s var(--ease-out), box-shadow .3s;
  will-change: transform;
}
.svc:hover { box-shadow: var(--shadow); --ty: -4px; }
.svc.tilting { transition: box-shadow .3s; }
.svc::after {
  content: '';
  position: absolute;
  top: -60%; bottom: -60%;
  left: 0;
  width: 34%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-160%) rotate(10deg);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .svc:hover::after { animation: shineSweep .9s ease; }
}
.svc.shine-once::after { animation: shineSweep 1.1s ease .2s; }
@keyframes shineSweep {
  from { transform: translateX(-160%) rotate(10deg); }
  to   { transform: translateX(460%) rotate(10deg); }
}
.svc .ico {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--paper-warm);
  display: grid;
  place-items: center;
  color: var(--navy);
  margin-bottom: var(--s-3);
}
.svc h3 { font-size: 1.35rem; margin-bottom: var(--s-1); }
.svc p { color: var(--muted); font-size: .96rem; }
.svc .tag {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 600;
  background: rgba(122, 141, 108, .1);
  padding: 5px 10px;
  border-radius: 999px;
}

/* ==========================================================================
   HOW IT WORKS — navy band + broom scene
   ========================================================================== */
.band { background: var(--navy); }
.band .eyebrow { color: var(--sage-light); }
.band .section-head h2 { color: var(--white); }
#process { padding-bottom: 0; }
#process .wave { margin-top: var(--s-10); }

.broom-stage {
  position: relative;
  height: clamp(190px, 30vw, 300px);
  margin-bottom: var(--s-8);
  background: radial-gradient(70% 90% at 50% 100%, rgba(28, 57, 82, .85), transparent 78%);
  border-radius: var(--radius-l);
}
.broom-fallback, .broom-canvas { position: absolute; inset: 0; }
.broom-canvas { display: none; }
.broom-stage.has-canvas .broom-canvas { display: block; }
.broom-stage.has-canvas .broom-fallback { display: none; }
.broom-canvas canvas { width: 100%; height: 100%; display: block; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.step { padding-top: var(--s-3); border-top: 2px solid var(--sage); }
.step .num {
  font-family: 'Fraunces', serif;
  font-size: .95rem;
  color: var(--sage-light);
  font-weight: 600;
  letter-spacing: .06em;
}
.step h3 { font-size: 1.3rem; color: var(--white); margin: var(--s-2) 0 var(--s-1); }
.step p { color: rgba(216, 226, 234, .78); font-size: .95rem; }

/* ==========================================================================
   WHY — trust strip
   ========================================================================== */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  text-align: center;
}
.trust-strip .item {
  background: var(--white);
  border: 1px solid rgba(8, 40, 71, .08);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-2);
}
.trust-strip b {
  font-family: 'Fraunces', serif;
  font-size: 2.2rem;
  color: var(--navy);
  display: block;
  font-weight: 600;
  line-height: 1.15;
}
.trust-strip span { color: var(--muted); font-size: .9rem; }

/* ==========================================================================
   BEFORE / AFTER
   ========================================================================== */
.compare { background: var(--paper); }
.ba { max-width: 720px; margin: 0 auto; }
.ba-frame {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: var(--shadow);
  touch-action: pan-y;
}
.ba-frame img { width: 100%; height: 100%; object-fit: cover; }
.ba-before {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 var(--ba-pos, 55%));
}
.ba-before img { filter: saturate(.5) sepia(.16) brightness(.78) contrast(.94); }
.ba-speckle {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(40% 34% at 30% 40%, rgba(60, 70, 60, .18), transparent 70%),
    radial-gradient(34% 28% at 70% 68%, rgba(70, 70, 55, .16), transparent 70%),
    var(--speckle);
  opacity: .55;
}
.ba-chip {
  position: absolute;
  top: var(--s-2);
  z-index: 2;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(4, 26, 48, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 6px 12px;
  border-radius: 999px;
}
.ba-chip-after { left: var(--s-2); }
.ba-chip-before { right: var(--s-2); }
.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-pos, 55%);
  z-index: 3;
  width: 0;
  cursor: ew-resize;
  touch-action: none;
  outline-offset: 6px;
}
.ba-bar {
  position: absolute;
  top: 0; bottom: 0;
  left: -1.5px;
  width: 3px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 12px rgba(4, 26, 48, .45);
}
.ba-grip {
  position: absolute;
  top: 50%; left: 0;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(4, 26, 48, .4);
  transition: transform .2s var(--ease-out);
}
.ba-handle:hover .ba-grip, .ba-handle:focus-visible .ba-grip { transform: translate(-50%, -50%) scale(1.08); }
.ba-hint {
  text-align: center;
  color: var(--muted);
  font-size: .88rem;
  margin-top: var(--s-3);
}

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.reviews { background: var(--white); }
.reviews-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.reviews-head .section-head { margin-bottom: 0; }
.rating-badge {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--paper-warm);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  border: 1px solid rgba(8, 40, 71, .08);
}
.rating-badge .score {
  font-family: 'Fraunces', serif;
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
}
.rating-badge .stars { display: flex; gap: 3px; }
.rating-badge .star { fill: var(--sage); }
.rating-badge.anim .star { fill: #CBD6CD; transform: scale(.4); opacity: .4; }
.rating-badge.anim .star.lit {
  fill: var(--sage);
  animation: starPop .5s var(--ease-out) forwards;
}
@keyframes starPop {
  0%   { transform: scale(.4); opacity: .4; }
  60%  { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.rating-badge .src { font-size: .8rem; color: var(--muted); margin-top: 3px; }

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.review {
  background: var(--paper);
  border-radius: var(--radius);
  padding: var(--s-4);
  border: 1px solid rgba(8, 40, 71, .09);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.review .stars { color: var(--sage); font-size: .95rem; letter-spacing: 2px; }
.review blockquote { flex-grow: 1; }
.review p { color: var(--ink); font-size: .98rem; }
.review .who { display: flex; align-items: center; gap: 12px; }
.review .avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: .9rem;
  flex-shrink: 0;
}
.review .who b { font-size: .92rem; display: block; }
.review .who span { font-size: .78rem; color: var(--muted); }

/* ==========================================================================
   QUOTE
   ========================================================================== */
.quote { background: var(--paper-warm); }
.quote-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: var(--s-8);
  align-items: start;
}
.quote-copy h2 { font-size: clamp(2rem, 3.6vw, 2.75rem); }
.quote-copy > p:not(.eyebrow) { color: var(--muted); margin-top: var(--s-2); font-size: 1.05rem; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gleam {
    background: linear-gradient(110deg, var(--navy) 0% 42%, var(--sky) 50%, var(--navy) 58% 100%);
    background-size: 280% 100%;
    background-position: 120% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gleam 7s ease-in-out 2s infinite;
  }
}
@keyframes gleam {
  0%   { background-position: 120% 0; }
  24%  { background-position: -40% 0; }
  100% { background-position: -40% 0; }
}

.quote-list {
  margin-top: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.quote-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .98rem; }
.quote-list .check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--sage-deep);
  color: var(--white);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: .7rem;
  margin-top: 2px;
}
.quote-contact {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(8, 40, 71, .12);
  font-size: .95rem;
  color: var(--muted);
  line-height: 2;
}
.quote-contact a { color: var(--navy); font-weight: 600; }
.quote-contact a:hover { text-decoration: underline; }

/* --- form --- */
form {
  background: var(--white);
  border-radius: 20px;
  padding: var(--s-5);
  box-shadow: var(--shadow);
  border: 1px solid rgba(8, 40, 71, .08);
  position: relative;
}
.field { position: relative; margin-bottom: var(--s-2); }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 24px 16px 8px;
  border: 1.5px solid rgba(8, 40, 71, .18);
  border-radius: var(--radius-s);
  font-family: inherit;
  font-size: 1rem; /* >=16px so iOS Safari doesn't auto-zoom on focus */
  color: var(--ink);
  background: var(--paper);
  transition: border-color .2s, box-shadow .2s, background .2s;
  appearance: none;
  -webkit-appearance: none;
}
.field textarea { resize: vertical; min-height: 96px; }
.field label {
  position: absolute;
  left: 17px; top: 16px;
  font-size: .95rem;
  color: var(--muted);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .18s var(--ease-out), color .18s;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field-select select:focus + label,
.field-select select:valid + label {
  transform: translateY(-9px) scale(.74);
  color: var(--sage-deep);
  font-weight: 600;
  letter-spacing: .02em;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--sage);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(122, 141, 108, .18);
}
.field-select::after {
  content: '';
  position: absolute;
  right: 18px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.btn-submit {
  width: 100%;
  padding: 16px;
  font-size: 1rem;
  margin-top: var(--s-1);
}
.btn-submit.loading { pointer-events: none; }
.btn-submit.loading .btn-label { opacity: .55; }
.btn-submit.loading::after {
  content: '';
  position: absolute;
  right: 20px; top: 50%;
  width: 18px; height: 18px;
  margin-top: -9px;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.form-note {
  font-size: .8rem;
  color: var(--muted);
  text-align: center;
  margin-top: var(--s-2);
}
.form-error {
  font-size: .9rem;
  color: var(--error);
  background: rgba(179, 55, 43, .07);
  border: 1px solid rgba(179, 55, 43, .25);
  border-radius: var(--radius-s);
  padding: 12px 16px;
  margin-bottom: var(--s-2);
}
.form-error a { font-weight: 600; text-decoration: underline; }

.form-success { text-align: center; padding: var(--s-5) var(--s-2); position: relative; overflow: hidden; }
.form-success .ico {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--sage-deep);
  color: var(--white);
  display: grid;
  place-items: center;
  margin: 0 auto var(--s-3);
}
.form-success h3 { font-size: 1.6rem; margin-bottom: var(--s-1); }
.form-success p { color: var(--muted); }
.bubbles { position: absolute; inset: 0; pointer-events: none; }
.bubbles span {
  position: absolute;
  bottom: -20px;
  left: var(--bx, 50%);
  width: var(--bs, 14px);
  height: var(--bs, 14px);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .95), rgba(216, 226, 234, .3));
  border: 1px solid rgba(138, 169, 187, .55);
  opacity: 0;
  animation: bubbleRise var(--bd, 1.6s) ease-in var(--bdel, 0s) forwards;
}
@keyframes bubbleRise {
  0%   { transform: translateY(0) translateX(0) scale(.6); opacity: 0; }
  12%  { opacity: .9; }
  100% { transform: translateY(-190px) translateX(var(--bsw, 8px)) scale(1); opacity: 0; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer {
  background: var(--navy-deep);
  color: rgba(216, 226, 234, .78);
}
footer .wrap { padding-top: var(--s-8); padding-bottom: var(--s-4); }
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}
.brand-chip-lg { padding: 10px 16px; border-radius: 14px; margin-bottom: var(--s-2); }
.brand-chip-lg img { width: 132px; }
footer p.tag { max-width: 32ch; font-size: .95rem; line-height: 1.7; }
.foot-col h4 {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sage-light);
  margin-bottom: var(--s-2);
  font-weight: 600;
}
.foot-col a, .foot-col p {
  display: block;
  font-size: .95rem;
  margin-bottom: 10px;
  color: rgba(216, 226, 234, .78);
  transition: color .2s;
}
.foot-col a:hover { color: var(--white); }
.foot-bottom {
  border-top: 1px solid rgba(216, 226, 234, .16);
  padding-top: var(--s-3);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-1);
  font-size: .84rem;
  color: rgba(216, 226, 234, .55);
}

/* ==========================================================================
   CURSOR SPARKLE (desktop)
   ========================================================================== */
.cursor-spark {
  position: fixed;
  z-index: 999;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: var(--sky-pale);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  pointer-events: none;
  opacity: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 920px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 76px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid rgba(8, 40, 71, .12);
    padding: var(--s-1) var(--s-3) var(--s-3);
    box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  #siteHeader.menu-open { background: var(--paper); }
  .nav-links a, #siteHeader.scrolled .nav-links a {
    font-size: 1.02rem;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(8, 40, 71, .08);
    color: var(--ink);
  }
  .nav-links a.btn {
    margin-top: var(--s-2);
    text-align: center;
    padding: 15px;
    border-bottom: none;
    color: var(--white);
  }
  .services { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; gap: var(--s-3); }
  .trust-strip { grid-template-columns: 1fr 1fr; }
  .review-grid { grid-template-columns: 1fr 1fr; }
  .quote-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .section { padding: var(--s-10) 0; }
  .section-head { margin-bottom: var(--s-5); }
  .hero-inner { padding-top: var(--s-16); padding-bottom: var(--s-10); }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { text-align: center; }
  .hero-cta .link-arrow { text-align: center; padding-top: 6px; }
  .hero-trust { gap: 10px; }
  .hero-trust li { flex: 1 1 auto; padding: 8px 12px; }
  .services, .review-grid, .trust-strip, .field-row, .foot-grid { grid-template-columns: 1fr; }
  form { padding: var(--s-3) 20px; }
  .foot-bottom { flex-direction: column; }
  .scroll-cue { display: none; }
}

/* ==========================================================================
   REDUCED MOTION — everything static, everything visible
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .wipe-track, .squeegee, .hero-sparkles, .hero-motes, .cursor-spark { display: none !important; }
  .hero-rays { opacity: 1; }
  html.js .scroll-cue { animation: none; opacity: 1; }
  .gleam { animation: none; background-position: 120% 0; }
  .wave-drift { animation: none; }
  .rating-badge.anim .star { fill: var(--sage); transform: none; opacity: 1; }
  .svc { transform: none !important; }
}