/* ============================================================
   THE GENIES — Soft Sky
   Blue-mist / deep harbor navy / soft sky blue · Cormorant Garamond + Jost
   Brand: thejunkgenies.com — sky #64B2D6 · ink #24201F
   ============================================================ */

:root{
  --mist:    #F3F8FB;
  --mist-2:  #E8F1F7;
  --mist-3:  #DBEAF3;
  --navy:  #1C4257;
  --navy-2:#255269;
  --navy-3:#132F3F;
  --blue:   #3D89B0;
  --blue-2: #8FC8E3;
  --ink:      #22303A;
  --muted:    #5F707C;
  --line:     rgba(34,48,58,.16);
  --line-mist:rgba(243,248,251,.22);
  --maxw:     1280px;
  --ease:     cubic-bezier(.22,1,.36,1);
  --serif:    "Cormorant Garamond", Georgia, serif;
  --sans:     "Jost", system-ui, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--mist);
  color:var(--ink);
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
svg{ display:block; }
::selection{ background:var(--navy); color:var(--mist); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,4.5vw,56px); }
.serif{ font-family:var(--serif); font-weight:500; letter-spacing:.005em; }

/* paper grain */
.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scroll-progress{ position:fixed; top:0; left:0; width:100%; height:2px; z-index:9999; }
.scroll-progress span{ display:block; height:100%; width:0; background:var(--blue); }

/* ---------- shared type ---------- */
h2.serif{ font-size:clamp(2.2rem,4.8vw,3.9rem); line-height:1.03; font-weight:500; }
.eyebrow{
  font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.28em;
  text-transform:uppercase; color:var(--blue); margin-bottom:1.4rem;
  display:inline-block;
}
.eyebrow--invert{ color:var(--blue-2); }
.ink-blue{ color:var(--blue); font-style:italic; }
.hero__title em{ font-style:italic; color:var(--blue-2); font-weight:500; }
.rule{ width:64px; height:1px; background:var(--blue); margin:0 0 2rem; }

.section-head{ max-width:640px; margin-bottom:clamp(2.6rem,5vw,4.2rem); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow{ }
.section-head--invert h2,.section-head--invert{ color:var(--mist); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:500; font-size:.82rem; letter-spacing:.13em;
  text-transform:uppercase; padding:1.05em 2em; border-radius:2px; cursor:pointer;
  border:1px solid transparent; transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn--solid{ background:var(--navy); color:var(--mist); }
.btn--solid:hover{ background:var(--navy-2); transform:translateY(-2px); }
.btn--outline{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn--outline:hover{ background:var(--navy); color:var(--mist); transform:translateY(-2px); }
.btn--block{ width:100%; }
.btn--text{ padding:1.05em 0; color:var(--ink); position:relative; }
.btn--text::after{ content:""; position:absolute; left:0; bottom:.7em; width:0; height:1px; background:var(--blue); transition:width .35s var(--ease); }
.btn--text:hover{ color:var(--blue); }
.btn--text:hover::after{ width:100%; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:900;
  display:flex; align-items:center; gap:2.5rem;
  padding:1.15rem clamp(20px,4.5vw,56px);
  background:rgba(243,248,251,.85); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
  transition:background .4s, padding .4s, box-shadow .4s;
}
.nav.scrolled{ background:rgba(243,248,251,.95); padding-block:.9rem; }

/* Over a dark full-bleed hero the nav starts transparent with light type,
   then flips to the standard light bar once scrolled past the hero. */
.nav__mark--light{ display:none; }
.has-dark-hero .nav:not(.scrolled){ background:transparent; backdrop-filter:none; box-shadow:none; }
.has-dark-hero .nav:not(.scrolled) .nav__brand{ color:var(--mist); }
.has-dark-hero .nav:not(.scrolled) .nav__mark--light{ display:block; }
.has-dark-hero .nav:not(.scrolled) .nav__mark--dark{ display:none; }
.has-dark-hero .nav:not(.scrolled) .nav__links a{ color:rgba(243,248,251,.88); }
.has-dark-hero .nav:not(.scrolled) .nav__links a:hover{ color:var(--blue-2); }
.has-dark-hero .nav:not(.scrolled) .nav__links a::after{ background:var(--blue-2); }
.has-dark-hero .nav:not(.scrolled) .nav__burger span{ background:var(--mist); }
.has-dark-hero .nav:not(.scrolled) .nav__cta{ background:var(--blue); border-color:var(--blue); color:#0E2233; }
.has-dark-hero .nav:not(.scrolled) .nav__cta:hover{ background:var(--blue-2); border-color:var(--blue-2); }
.nav__brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--serif); font-weight:600; font-size:1.4rem; flex-shrink:0; letter-spacing:.01em; }
.nav__mark{ width:34px; height:34px; object-fit:contain; flex-shrink:0; }
.nav__links{ display:flex; gap:2rem; margin-left:auto; }
.nav__links a{ font-size:.8rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); position:relative; padding:.2rem 0; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--blue); transition:width .35s var(--ease); }
.nav__links a:hover{ color:var(--blue); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ padding:.75em 1.4em; font-size:.72rem; flex-shrink:0; }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; margin-left:auto; }
.nav__burger span{ width:24px; height:2px; background:var(--ink); transition:.35s var(--ease); }

/* ============================================================
   HERO — split: cream copy + emerald panel
   ============================================================ */
.hero{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden; padding-top:7rem;
  background:var(--navy-3); color:var(--mist);
}

/* ---------- full-bleed stage ---------- */
.hero__stage{ position:absolute; inset:0; z-index:0; }
.hero__shot{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 55%; display:block;
}
/* ---------- the magic clear ----------
   Two rooms share an 18s cycle, 9s each: the room holds, a shimmer sweeps across
   and the junk is gone behind it, it holds clean, then hands over to the next.
   Room 2 runs the identical animations offset by half the cycle. */
.hero__room{
  position:absolute; inset:0; opacity:0;
  animation:jgRoom 18s linear infinite;
  animation-delay:calc(var(--i) * -9s);
}
@keyframes jgRoom{
  0%, 45%  { opacity:1; }
  51%, 95% { opacity:0; }   /* slightly longer crossfade between rooms */
  100%     { opacity:1; }
}

.hero__shot--clean{
  -webkit-mask-image:linear-gradient(105deg, #000 0%, #000 55%, rgba(0,0,0,.5) 62%, transparent 70%);
          mask-image:linear-gradient(105deg, #000 0%, #000 55%, rgba(0,0,0,.5) 62%, transparent 70%);
  -webkit-mask-size:300% 100%;   mask-size:300% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  animation:jgSweep 18s cubic-bezier(.4,0,.25,1) infinite;
  animation-delay:calc(var(--i) * -9s);
}
@keyframes jgSweep{
  0%, 11%   { -webkit-mask-position:85% 0; mask-position:85% 0; }  /* mess holds ~2s */
  28%, 51%  { -webkit-mask-position:0% 0;  mask-position:0% 0;  }  /* clear, and STAY clear
                                                                      through the whole fade-out */
  51.5%     { -webkit-mask-position:85% 0; mask-position:85% 0; }  /* reset only once the room
                                                                      is genuinely at opacity 0 */
  100%      { -webkit-mask-position:85% 0; mask-position:85% 0; }
}

/* the light itself, travelling with the mask edge */
.hero__glow{
  position:absolute; inset:0; z-index:5; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(105deg,
    transparent 54%, rgba(143,200,227,.30) 58%, rgba(255,255,255,.52) 61%,
    rgba(143,200,227,.26) 64%, transparent 69%);
  background-size:300% 100%; background-repeat:no-repeat; opacity:.85;
  animation:jgGlow 18s cubic-bezier(.4,0,.25,1) infinite;
  animation-delay:calc(var(--i) * -9s);
}
@keyframes jgGlow{
  0%, 11%  { background-position:85% 0; opacity:0; }
  14%      { opacity:.85; }
  25%      { opacity:.85; }
  28%      { background-position:0% 0; opacity:0; }
  100%     { background-position:0% 0; opacity:0; }
}

/* a few sparks riding the light — genie, not Vegas */
.hero__sparks{
  position:absolute; inset:0; z-index:6; pointer-events:none; mix-blend-mode:screen; opacity:0;
  background:
    radial-gradient(circle 2.5px at 18% 22%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(circle 2px   at 34% 61%, rgba(200,232,248,.9), transparent 60%),
    radial-gradient(circle 3px   at 52% 34%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(circle 2px   at 66% 74%, rgba(200,232,248,.85), transparent 60%),
    radial-gradient(circle 2.5px at 81% 46%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(circle 2px   at 27% 84%, rgba(200,232,248,.8), transparent 60%);
  animation:jgSparks 9s linear infinite;
}
@keyframes jgSparks{
  0%, 27%  { opacity:0; transform:scale(1); }
  34%      { opacity:.7; }
  48%      { opacity:.55; }
  57%      { opacity:0; transform:scale(1.04); }
  100%     { opacity:0; transform:scale(1); }
}

.hero__scrim{
  position:absolute; inset:0; z-index:4;
  /* Heavy only where the copy sits, then falls away fast so the sweep stays visible. */
  background:
    linear-gradient(95deg,
      rgba(19,47,63,.93) 0%, rgba(19,47,63,.87) 24%,
      rgba(19,47,63,.5) 42%, rgba(19,47,63,.15) 58%, rgba(19,47,63,.06) 100%),
    linear-gradient(to bottom, rgba(19,47,63,.62) 0%, transparent 16%),
    linear-gradient(to top, rgba(19,47,63,.55) 0%, transparent 26%);
}

.hero__inner{
  flex:1; display:grid; grid-template-columns:1.5fr .9fr; align-items:center;
  gap:clamp(2rem,5vw,4.5rem); padding-block:clamp(2rem,5vw,3.5rem);
  position:relative; z-index:7;
}
.hero__row{ display:flex; align-items:center; flex-wrap:wrap; gap:clamp(1.4rem,3vw,2.6rem); margin-bottom:1.7rem; }
@media (min-width:1001px){ .hero__row > .hero__actions{ margin-bottom:0; } }
.hero__mark{ display:flex; flex-direction:column; align-items:flex-end; flex:none; }

.hero .eyebrow{ color:var(--blue-2); }
.hero__title{ font-family:var(--serif); font-weight:500; font-size:clamp(2.9rem,5.2vw,5.2rem); line-height:1; letter-spacing:-.01em; margin-bottom:1.6rem; color:var(--mist); }
.hero__title span{ display:block; }

.hero__sub{ font-size:1.06rem; color:rgba(243,248,251,.8); max-width:42ch; margin-bottom:2rem; }
.hero__actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.7rem; }
.hero__actions .btn--solid{ background:var(--blue); border-color:var(--blue); color:#0E2233; }
.hero__actions .btn--solid:hover{ background:var(--blue-2); border-color:var(--blue-2); }
.hero__actions .btn--outline{ border-color:rgba(243,248,251,.5); color:var(--mist); }
.hero__actions .btn--outline:hover{ border-color:var(--mist); background:rgba(243,248,251,.1); }
.hero__chips{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem .8rem; }
.hero__chips li{
  font-size:.74rem; font-weight:500; letter-spacing:.05em; color:rgba(243,248,251,.9);
  padding:.5em 1em; border:1px solid rgba(243,248,251,.24); border-radius:100px;
  display:flex; align-items:center; gap:.5em;
}
.hero__chips li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--blue-2); }

/* seal straddles the seam between the two panels */
.seal{ position:relative; width:clamp(150px,15vw,190px); aspect-ratio:1; }
.seal__ring{ width:100%; height:100%; animation:spin 22s linear infinite; }
.seal__ring text{ font-family:var(--sans); font-size:7px; font-weight:500; letter-spacing:.24em; fill:var(--blue-2); text-transform:uppercase; }
.seal__disc{
  position:absolute; inset:17%; border-radius:50%; background:var(--navy); color:var(--mist);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
  box-shadow:0 24px 48px -22px rgba(0,0,0,.7), inset 0 0 0 1px rgba(143,200,227,.4);
}
.seal__mark{ width:34px; height:34px; object-fit:contain; }
.seal__stars{ color:var(--blue-2); font-size:.6rem; letter-spacing:.16em; }
.seal__note{ font-size:.92rem; color:var(--mist); }
@keyframes spin{ to{ transform:rotate(360deg); } }

.hero__index{ position:relative; z-index:7; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(243,248,251,.18); }
.hero__cat{ display:flex; align-items:baseline; gap:1rem; padding:1.5rem 1.6rem; border-left:1px solid rgba(243,248,251,.22); color:var(--mist); transition:background .35s, color .35s; }
.hero__cat:first-child{ border-left:none; padding-left:0; }
.hero__cat span{ font-family:var(--serif); font-size:clamp(1.3rem,2.4vw,1.7rem); }
.hero__cat:hover{ color:var(--blue-2); background:rgba(243,248,251,.08); }

/* ============================================================
   STATEMENT band (emerald)
   ============================================================ */
.statement{ position:relative; background:var(--navy-3); color:var(--mist); padding:clamp(4.5rem,9vw,7.5rem) 0; overflow:hidden; text-align:center; }
.statement__glow{ position:absolute; width:700px; height:700px; top:-40%; left:50%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,rgba(100,178,214,.18),transparent 65%); }
.statement__text{ position:relative; font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,6vw,4.6rem); line-height:1.08; }
/* Each sentence stays whole: it wraps as a unit rather than breaking mid-thought. */
.statement__text span{ display:inline-block; margin-inline:.3rem; }
.statement__em{ font-style:italic; color:var(--blue-2); }

/* ============================================================
   MARQUEE (continuous scroll)
   ============================================================ */
.marquee{ overflow:hidden; border-block:1px solid var(--line); background:var(--mist-2); padding:1.15rem 0; }
.marquee__row{ display:flex; align-items:center; gap:2.4rem; width:max-content; white-space:nowrap; animation:marquee 26s linear infinite; }
.marquee__row span{ font-family:var(--serif); font-size:clamp(1.3rem,2.4vw,1.9rem); font-style:italic; color:var(--navy); }
.marquee__row i{ color:var(--blue); font-style:normal; font-size:.9rem; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee__row{ animation-play-state:paused; }

/* ============================================================
   ABOUT
   ============================================================ */
.about{ padding:clamp(6rem,11vw,9rem) 0; }
.about__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.about__media{ position:relative; overflow:hidden; border-radius:4px; aspect-ratio:4/5; width:100%; }
.about__media img{ position:absolute; top:-8%; left:0; width:100%; height:116%; object-fit:cover; will-change:transform; }
.about__text h2{ margin:0 0 1.6rem; max-width:16ch; }
.about__text{ display:flex; flex-direction:column; }
.about__text p:not(.eyebrow){ font-size:1.05rem; color:var(--ink); margin-bottom:1.3rem; }
.about__text strong{ font-weight:500; }
.about__stats{ grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3.5rem); margin-top:clamp(2rem,4vw,3.5rem); }
.figure{ border-top:1px solid var(--line); padding-top:1.5rem; }
.figure__num{ display:block; font-family:var(--serif); font-weight:500; font-size:clamp(2.8rem,5.5vw,4.2rem); line-height:1; color:var(--navy); margin-bottom:.6rem; }
.figure__label{ font-size:.86rem; color:var(--muted); letter-spacing:.02em; }

/* ============================================================
   SERVICES
   ============================================================ */
.services{ padding:clamp(5rem,10vw,8rem) 0; background:var(--mist-2); }
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.5rem; }
.svc__go{ margin-top:auto; padding-top:1.1rem; font-size:.72rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); }
.svc{
  background:var(--mist); border:1px solid var(--line); border-radius:3px;
  padding:2.2rem 2rem 2.4rem; display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s, border-color .5s;
}
.svc:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -30px rgba(28,66,87,.35); border-color:var(--blue); }
.svc__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.6rem; }
.svc__ic{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:var(--navy); background:var(--mist-3); border:1px solid var(--line); }
.svc__ic svg{ width:24px; height:24px; }
.svc:hover .svc__ic{ background:var(--navy); color:var(--mist); border-color:var(--navy); }
.svc__no{ display:none; }
.svc__top{ justify-content:flex-start; }
.svc h3{ font-size:1.55rem; margin-bottom:.6rem; }
.svc p{ font-size:.94rem; color:var(--muted); }

/* ============================================================
   HOW (emerald)
   ============================================================ */
.how{ padding:clamp(6rem,11vw,9rem) 0; background:var(--navy); color:var(--mist); }
/* Heading runs on one line across the section instead of stacking. */
#how .section-head,
#promise .section-head{ max-width:none; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3.5rem); }
.step{ border-top:1px solid var(--line-mist); padding-top:1.8rem; }
.step__no{ display:block; font-size:2.6rem; color:var(--blue-2); font-weight:500; margin-bottom:1.2rem; line-height:1; }
.step h3{ font-size:1.6rem; margin-bottom:.7rem; color:var(--mist); }
.step p{ font-size:.96rem; color:rgba(243,248,251,.72); }

/* ============================================================
   BUNDLE
   ============================================================ */
.bundle{ padding:clamp(6rem,11vw,9rem) 0; background:var(--mist-2); }
.bundle__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem,6vw,6rem); align-items:center; }
.bundle__copy h2{ margin-bottom:1.6rem; }
.bundle__lede{ font-size:1.05rem; color:var(--muted); max-width:46ch; margin-bottom:1.8rem; }
.bundle__who{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.4rem; }
.bundle__who span{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; padding:.5em 1em; border:1px solid var(--line); border-radius:2px; color:var(--muted); }
.bundle__list{ list-style:none; }
.bundle__list li::before{
  content:""; flex-shrink:0; width:1.15em; height:1.15em; margin-top:.28em;
  background:var(--blue); border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/74% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/74% no-repeat;
}
.bundle__list li{
  display:flex; align-items:baseline; gap:1.2rem;
  font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.5rem); font-weight:500;
  padding:1.15rem 0; border-top:1px solid var(--line); color:var(--ink);
}
.bundle__list li:last-child{ border-bottom:1px solid var(--line); }


/* ============================================================
   RECENT WORK (before/after sliders)
   ============================================================ */
.work{ padding:clamp(6rem,11vw,9rem) 0; }
.work__head{ display:grid; grid-template-columns:auto 1fr; align-items:end; gap:1.5rem clamp(2rem,6vw,5rem); margin-bottom:clamp(2.5rem,5vw,4rem); }
.work__head .eyebrow{ grid-column:1/-1; }
.work__lead{ font-size:1.02rem; color:var(--muted); max-width:44ch; }
.ba-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2rem); }
.ba figcaption{ margin-top:1rem; font-family:var(--serif); font-size:1.25rem; color:var(--ink); }
.ba figcaption em{ font-family:var(--sans); font-style:normal; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); }
.ba__frame{
  --pos:50%; position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:4px;
  background:var(--mist-3); cursor:ew-resize; user-select:none; touch-action:pan-y;
}
.ba__after,.ba__before{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; }
.ba__before{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba__tag{
  position:absolute; top:1rem; z-index:3; font-size:.66rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; padding:.4em .8em; border-radius:100px; color:var(--mist);
  background:rgba(19,47,63,.72); backdrop-filter:blur(4px); pointer-events:none;
}
.ba__tag--before{ left:1rem; }
.ba__tag--after{ right:1rem; background:rgba(61,137,176,.9); }
.ba__handle{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:var(--mist); transform:translateX(-50%); z-index:4; pointer-events:none; box-shadow:0 0 12px rgba(0,0,0,.4); }
.ba__handle span{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%; background:var(--mist);
  box-shadow:0 4px 16px rgba(0,0,0,.35); display:grid; place-items:center;
}
.ba__handle span::before,.ba__handle span::after{
  content:""; position:absolute; width:0; height:0; border-block:5px solid transparent;
}
.ba__handle span::before{ border-right:7px solid var(--navy); left:8px; }
.ba__handle span::after{ border-left:7px solid var(--navy); right:8px; }

/* ============================================================
   PROMISE
   ============================================================ */
.promise{ padding:clamp(6rem,11vw,9rem) 0; background:var(--mist-2); }
.promise__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.promise__grid > *{ min-width:0; }
@media (max-width:1000px){ .promise__grid{ grid-template-columns:repeat(2,1fr); } }
.value{ text-align:center; padding:2.4rem 1.6rem; background:var(--mist); border:1px solid var(--line); border-radius:3px; transition:transform .5s var(--ease), border-color .5s; }
.value:hover{ transform:translateY(-6px); border-color:var(--blue); }
.value__ic{ width:60px; height:60px; margin:0 auto 1.4rem; border-radius:50%; display:grid; place-items:center; color:var(--blue); border:1px solid var(--blue); }
.value__ic svg{ width:28px; height:28px; }
.value h3{ font-size:1.4rem; margin-bottom:.6rem; }
.value p{ font-size:.9rem; color:var(--muted); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{ padding:clamp(6rem,11vw,9rem) 0; }
.quotes .eyebrow{ display:flex; justify-content:center; margin-inline:auto; width:fit-content; margin-bottom:clamp(2.5rem,5vw,4rem); }
/* ---------- revolving reviews ---------- */
.rv{ max-width:820px; margin-inline:auto; text-align:center; }
.rv__head{ display:flex; align-items:center; justify-content:center; gap:.7rem; margin-bottom:clamp(1.8rem,4vw,2.8rem); }
.rv__g{ display:flex; }
.rv__rating{ display:flex; align-items:baseline; gap:.45rem; }
.rv__rating strong{ font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--ink); line-height:1; }
.rv__stars{ color:var(--blue); font-size:.8rem; letter-spacing:.12em; }
.rv__src{ font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* Items are stacked; only the active one is shown, so height settles on the tallest. */
.rv__stage{ display:grid; }
.rv__item{
  grid-area:1/1; margin:0; opacity:0; visibility:hidden;
  transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.rv__item.is-on{ opacity:1; visibility:visible; transform:none; }
.rv__item p{
  font-family:var(--serif); font-size:clamp(1.3rem,2.5vw,1.9rem); line-height:1.36;
  font-weight:500; color:var(--ink);
}
.rv__item cite{
  display:block; margin-top:1.3rem; font-family:var(--sans); font-style:normal;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--blue);
}
.rv__item cite em{ font-style:normal; font-weight:400; color:var(--muted); }

.rv__nav{ display:flex; align-items:center; justify-content:center; gap:1.1rem; margin-top:clamp(2rem,4vw,2.8rem); }
.rv__arrow{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:transparent;
  color:var(--ink); font-size:1.2rem; line-height:1; cursor:pointer;
  transition:border-color .25s, background .25s, color .25s;
}
.rv__arrow:hover{ border-color:var(--blue); color:var(--blue); background:rgba(61,137,176,.06); }
.rv__dots{ display:flex; gap:.5rem; }
.rv__dot{
  width:7px; height:7px; padding:0; border:none; border-radius:50%;
  background:var(--line); cursor:pointer; transition:background .25s, transform .25s;
}
.rv__dot.is-on{ background:var(--blue); transform:scale(1.35); }
.rv__all{
  display:inline-block; margin-top:clamp(1.6rem,3vw,2.2rem);
  font-size:.76rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--line); padding-bottom:.25rem; transition:color .25s, border-color .25s;
}
.rv__all:hover{ color:var(--blue); border-color:var(--blue); }

/* ============================================================
   AREAS (emerald)
   ============================================================ */
.areas{ padding:clamp(6rem,11vw,9rem) 0; background:var(--navy); color:var(--mist); }
.areas__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.areas__copy h2{ color:var(--mist); }
/* Minnesota outline starts level with the county list and fills the column below the copy. */
.areas__copy{ align-self:stretch; }
.areas__head{
  position:relative; width:max-content; max-width:100%; height:100%;
  display:flex; flex-direction:column; justify-content:center;
}
.areas__head h2{ position:relative; z-index:1; }
.areas__list{ position:relative; z-index:1; }
.areas__map{
  position:absolute; z-index:0; pointer-events:none;
  top:0; left:50%; transform:translateX(-50%);
  width:clamp(200px,20vw,300px); height:auto;
}
.areas__map svg{ display:block; width:100%; height:auto; }
.areas__outline{ fill:rgba(143,200,227,.05); stroke:rgba(143,200,227,.26); stroke-width:2.2; stroke-linejoin:round; }
.areas__list{ list-style:none; columns:2; column-gap:2.5rem; }
.areas__list li{
  display:flex; align-items:baseline; gap:1rem; break-inside:avoid;
  font-family:var(--serif); font-size:clamp(1.4rem,2.6vw,1.9rem); font-weight:500; color:var(--mist);
  padding:1rem 0; border-bottom:1px solid var(--line-mist); transition:padding-left .3s var(--ease), color .3s;
}
.areas__list li em{ font-style:normal; color:var(--blue-2); }
.areas__list li:hover{ padding-left:.7rem; color:var(--blue-2); }

/* ============================================================
   CTA / FORM
   ============================================================ */
.cta{ padding:clamp(6rem,11vw,9rem) 0; }
.cta__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:start; }
/* Grid children default to min-content width and refuse to shrink, which pushed
   the quote form past the viewport between ~600 and 1000px. */
.cta__grid > *{ min-width:0; }
.form__row > *{ min-width:0; }
@media (max-width:900px){
  .cta__grid{ grid-template-columns:1fr; gap:2.5rem; }
}
.cta__sub{ margin-top:1.4rem; color:var(--muted); max-width:36ch; }
.cta__contacts{ display:flex; flex-direction:column; gap:1.4rem; margin-top:2.6rem; }
.cta__contacts a{ display:flex; flex-direction:column; font-family:var(--serif); font-size:1.5rem; color:var(--navy); transition:color .3s; }
.cta__contacts a:hover{ color:var(--blue); }
.cta__contacts small{ font-family:var(--sans); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:.25rem; }

.form{ background:var(--mist-2); border:1px solid var(--line); border-radius:4px; padding:clamp(1.8rem,3.5vw,2.8rem); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.2rem; }
.field span{ font-size:.68rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.field input,.field textarea{
  background:var(--mist); border:1px solid var(--line); border-radius:2px; padding:.85rem 1rem;
  color:var(--ink); font-family:inherit; font-size:1rem; transition:border-color .3s, box-shadow .3s; resize:vertical;
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(28,66,87,.12); }
.form .btn{ margin-top:.6rem; }
.form__note{ margin-top:1.1rem; text-align:center; font-size:.9rem; color:var(--navy); min-height:1.2em; }

/* ============================================================
   FOOTER (emerald)
   ============================================================ */
.foot{ background:var(--navy-3); color:var(--mist); }
.foot__top{ padding-block:clamp(4rem,8vw,6.5rem) clamp(2rem,4vw,3rem); }
.foot__big{ font-family:var(--serif); font-weight:500; font-size:clamp(3rem,8vw,6rem); line-height:1; }
.foot__tel{ font-family:var(--sans); font-style:normal; font-weight:400; letter-spacing:-.01em; }
.foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; }
.foot__logo{ color:var(--mist); font-size:1.3rem; gap:.45rem; }
.foot__logo .nav__mark{ width:38px; height:38px; }
.foot__logo .nav__mark{ color:var(--blue-2); }
.foot__brand p{ color:rgba(243,248,251,.55); font-size:.9rem; max-width:30ch; margin-top:1rem; }
.foot__col h4{ font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--blue-2); margin-bottom:1.2rem; }
.foot__col a{ display:block; color:rgba(243,248,251,.75); font-size:.92rem; margin-bottom:.7rem; transition:color .3s; }
.foot__col a:hover{ color:var(--mist); }
.foot__hours{ color:rgba(243,248,251,.5); font-size:.85rem; margin-top:.5rem; }
.foot__base{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-block:1.6rem; border-top:1px solid var(--line-mist); color:rgba(243,248,251,.5); font-size:.8rem; }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:calc(var(--i,0) * 85ms); }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  /* Single column over the full-bleed photo. */
  .hero{ padding-top:5.5rem; }
  .hero__inner{ grid-template-columns:1fr; gap:2.2rem; }
  .hero__shot{ object-position:center 52%; }
  /* Mobile keeps the original stack: the desktop row dissolves and the seal
     drops back below the chips, exactly where it sat before. */
  .hero__copy{ display:flex; flex-direction:column; }
  .hero__row{ display:contents; }
  .hero__mark{ align-items:flex-start; order:1; margin-top:2.2rem; }
  .seal{ width:110px; }
  .seal__mark{ width:24px; height:24px; }
  .seal__stars{ font-size:.46rem; }
  .seal__note{ font-size:.7rem; }
  /* the copy needs a denser bed once it sits over the whole frame */
  .hero__scrim{
    background:
      linear-gradient(to bottom, rgba(19,47,63,.9) 0%, rgba(19,47,63,.78) 42%, rgba(19,47,63,.5) 72%, rgba(19,47,63,.72) 100%);
  }
  .hero__index{ grid-template-columns:1fr; }
  .hero__cat{ border-left:none; padding:1.1rem 0; border-top:1px solid var(--line); }
  .hero__cat:first-child{ border-top:none; }
  .hero__actions .btn{ width:100%; }
  .rv__head{ flex-wrap:wrap; gap:.5rem; }

  /* tighter vertical rhythm on phones */
  .about,.services,.how,.bundle,.promise,.quotes,.areas,.cta,.work,.statement{ padding-block:clamp(3.2rem,11vw,4.6rem); }
  .svc{ padding:1.7rem 1.6rem 1.9rem; }
  .svc__top{ margin-bottom:1rem; }
  .value{ padding:2rem 1.5rem; }
  .value__ic{ margin-bottom:1.1rem; }
  .about__stats{ gap:1.6rem; margin-top:2.2rem; }
  .figure{ padding-top:1.1rem; }
  .section-head{ margin-bottom:2.2rem; }
  .bundle__list li{ font-size:1.15rem; padding:.95rem 0; }
  .marquee__row span{ font-size:1.4rem; }
}
@media (max-width:420px){
  h2.serif,.h-display{ font-size:clamp(2.1rem,8.6vw,2.8rem); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001s !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
  /* No travelling light and no sparks — but the room still clears, via a plain
     opacity fade, which involves no movement and so is safe here. */
  .hero__glow, .hero__sparks{ display:none; }
  .hero__shot--clean{
    -webkit-mask-image:none; mask-image:none;
    animation:jgFade 18s ease-in-out infinite !important;
    animation-delay:calc(var(--i) * -9s) !important;
  }
  .hero__room{ animation:jgRoom 18s linear infinite !important; animation-delay:calc(var(--i) * -9s) !important; }
  @keyframes jgFade{ 0%,11%{ opacity:0 } 28%,46%{ opacity:1 } 46.01%,100%{ opacity:0 } }
}

/* ---------- Online booking picker ---------- */
.book__days, .book__windows { display: flex; flex-wrap: wrap; gap: .5rem; }
.book__windows { margin-top: .6rem; }
.book__chip {
  font: inherit; font-size: .8rem; letter-spacing: .04em;
  padding: .55rem .95rem; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.book__chip:hover { border-color: var(--blue); }
.book__chip.on { background: var(--navy); color: var(--mist); border-color: var(--navy); }
.book__chip:disabled { opacity: .38; cursor: not-allowed; text-decoration: line-through; }
.book__note { margin-top: .7rem; font-size: .8rem; color: var(--blue); }

/* ---------- Consent / compliance note ---------- */
.form__consent{ font-size:.72rem; opacity:.65; margin:10px 0 0; line-height:1.5; color:var(--muted); }
.form__consent a{ color:inherit; text-decoration:underline; }

/* ============================================================
   SERVICE PAGES
   ============================================================ */
.svc-hero{ min-height:auto; padding-top:9.5rem; padding-bottom:clamp(3rem,6vw,5rem); background:var(--navy-3); }
.svc-hero .hero__inner{ grid-template-columns:1fr; flex:0 1 auto; }
.svc-hero .hero__title{ font-size:clamp(2.6rem,6vw,5rem); }
.svc-hero .hero__sub{ max-width:52ch; margin-bottom:2rem; }

.svc-intro{ padding:clamp(4.5rem,9vw,7rem) 0; }
.svc-intro__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.svc-intro__lead{ font-size:clamp(1.3rem,2.4vw,1.85rem); line-height:1.4; font-weight:500; color:var(--ink); }
.svc-incl__h{ font-size:1.45rem; margin-bottom:1.1rem; }
.svc-incl__list{ list-style:none; }
.svc-incl__list li{
  display:flex; gap:.85rem; align-items:baseline; font-size:1rem; color:var(--ink);
  padding:.78rem 0; border-top:1px solid var(--line);
}
.svc-incl__list li:last-child{ border-bottom:1px solid var(--line); }
.svc-incl__list li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--blue); flex-shrink:0; }

.svc-price{ padding:clamp(5rem,10vw,8rem) 0; background:var(--mist-2); }
.svc-price__p{
  max-width:75ch; margin:0 auto clamp(2.5rem,5vw,4rem); text-align:center;
  font-size:1.08rem; line-height:1.65; color:var(--muted);
}
.svc-faq{ max-width:760px; margin-inline:auto; }
.faq{ border-top:1px solid var(--line); }
.faq:last-child{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.35rem 0; display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; font-family:var(--serif); font-size:clamp(1.1rem,1.9vw,1.35rem); font-weight:500; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--blue); font-family:var(--sans); font-size:1.3rem; flex-shrink:0; transition:transform .3s var(--ease); }
.faq[open] summary::after{ transform:rotate(45deg); }
.faq p{ padding:0 0 1.4rem; max-width:62ch; color:var(--muted); line-height:1.65; }

.svc-cta{ background:var(--navy); color:var(--mist); }
.svc-cta__in{ text-align:center; max-width:800px; margin-inline:auto; }
.svc-cta__in h2{ color:var(--mist); }
.svc-cta__in p{ margin:1.2rem auto 2rem; max-width:60ch; color:rgba(243,248,251,.8); }
.svc-cta__in .hero__actions{ justify-content:center; margin-bottom:0; }

.also{ padding:clamp(4.5rem,9vw,7rem) 0; }
.also__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(1.8rem,4vw,2.6rem); }
.alsoc{
  background:var(--mist); padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:.7rem;
  transition:background .3s var(--ease);
}
.alsoc:hover{ background:var(--mist-2); }
.alsoc__t{ font-size:1.2rem; color:var(--ink); line-height:1.25; }
.alsoc__a{ font-size:.72rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); }

@media (max-width:1000px){
  .svc-intro__grid{ grid-template-columns:1fr; }
  .svc-hero{ padding-top:8rem; }
}

/* ============================================================
   RESOURCES / BLOG
   ============================================================ */
.rfeat{ padding:clamp(3rem,6vw,4.5rem) 0 0; }
.rfeat__card{
  display:block; background:var(--navy); color:var(--mist); border-radius:4px;
  padding:clamp(2.2rem,5vw,3.4rem); transition:transform .5s var(--ease), box-shadow .5s;
}
.rfeat__card:hover{ transform:translateY(-5px); box-shadow:0 30px 60px -34px rgba(28,66,87,.5); }
.rfeat__card h2{ color:var(--mist); font-size:clamp(1.8rem,3.6vw,2.9rem); line-height:1.14; margin:.7rem 0 1rem; }
.rfeat__card p{ color:rgba(243,248,251,.82); max-width:62ch; font-size:1.03rem; line-height:1.6; }
.rfeat__card .rcard__cat{ color:var(--blue-2); }
.rfeat__card .rcard__meta{ color:rgba(243,248,251,.62); }

.rlist{ padding:clamp(4rem,8vw,6.5rem) 0; }
.rgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(1.6rem,3vw,2.2rem); }
.rcard{
  background:var(--mist); padding:2rem 1.9rem 2.2rem; display:flex; flex-direction:column; gap:.55rem;
  transition:background .35s var(--ease);
}
.rcard:hover{ background:var(--mist-2); }
.rcard h3{ font-size:1.4rem; line-height:1.22; color:var(--ink); margin:.15rem 0 .4rem; }
.rcard p{ color:var(--muted); font-size:.95rem; line-height:1.58; flex:1; }
.rcard__cat{ font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); }
.rcard__meta{ margin-top:.9rem; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

/* ---- article ---- */
.post-hero{ min-height:auto; padding-top:9.5rem; padding-bottom:clamp(2.5rem,5vw,4rem); background:var(--navy-3); display:block; }
.post-hero .wrap{ max-width:820px; }
.post-hero__back{ color:var(--blue-2); }
.post-hero__back:hover{ color:var(--mist); }
.post-hero__h1{ font-size:clamp(2.1rem,4.6vw,3.7rem); line-height:1.1; color:var(--mist); margin-bottom:1.2rem; }
.post-hero__dek{ font-size:clamp(1.05rem,1.9vw,1.3rem); line-height:1.5; color:rgba(243,248,251,.82); max-width:60ch; }
.post-hero__meta{ margin-top:1.6rem; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(243,248,251,.55); }

.post{ padding:clamp(3.5rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem); }
.post__in{ max-width:720px; }
.post__in h2{ font-size:clamp(1.5rem,2.7vw,2rem); line-height:1.22; color:var(--ink); margin:2.6rem 0 1rem; }
.post__in h2:first-child{ margin-top:0; }
.post__in p{ font-size:1.07rem; line-height:1.72; color:var(--ink); margin-bottom:1.15rem; }
.post__in p a{ color:var(--blue); border-bottom:1px solid rgba(61,137,176,.35); }
.post__in p a:hover{ border-color:var(--blue); }
.post__list{ list-style:none; margin:0 0 1.5rem; }
.post__list li{
  display:flex; gap:.85rem; align-items:baseline; font-size:1.03rem; line-height:1.6;
  color:var(--ink); padding:.55rem 0;
}
.post__list li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--blue); flex-shrink:0; }

/* Article breadcrumb — replaces the old eyebrow. A plain link, no caps or tracking. */
.post-crumb{
  font-family:var(--sans); font-size:.86rem; color:rgba(243,248,251,.65);
  margin-bottom:1.1rem;
}
.post-crumb a{ color:var(--blue-2); }
.post-crumb a:hover{ color:var(--mist); text-decoration:underline; }

/* ============================================================
   MOBILE LAYOUT FIXES
   Several grids were declared multi-column with no collapse rule, so at phone
   widths their second column began past the screen edge — that is what allowed
   the page to be dragged sideways. Grid children also default to min-content
   width and refuse to shrink, so they push the document wider than the viewport.
   ============================================================ */
html{ overflow-x:clip; }          /* body already had this; html did not, so it still scrolled */
.wrap > *, .about__grid > *, .bundle__grid > *, .areas__grid > *,
.work__head > *, .ba-grid > *, .steps > *, .about__stats > *{ min-width:0; }

@media (max-width:900px){
  .about__grid,
  .bundle__grid,
  .areas__grid{ grid-template-columns:1fr; gap:clamp(1.6rem,5vw,2.4rem); }
  .areas__map{ top:50%; transform:translate(-50%,-50%); width:clamp(95px,15vw,135px); }
  .work__head{ grid-template-columns:1fr; }
  .ba-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .ba-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .about__stats{ grid-template-columns:1fr; gap:1.4rem; }
  .form__row{ grid-template-columns:1fr; }
}

/* Hero seal on phones: centred and larger — it was pinned left at 110px,
   sitting ~112px off centre, and reading as an afterthought. */
@media (max-width:1000px){
  .hero__mark{ align-items:center; width:100%; }
  .seal{ width:min(56vw,190px); }
  .seal__mark{ width:32px; height:32px; }
  .seal__stars{ font-size:.6rem; letter-spacing:.16em; }
  .seal__note{ font-size:.92rem; }
  .seal__ring text{ font-size:6.6px; letter-spacing:.2em; }
}

/* About on phones: pull the photo tight to the heading it belongs to, and stop
   the stats block from drifting away from the copy. */
@media (max-width:900px){
  .about__grid{ row-gap:1rem; }
  .about__media{ margin-bottom:0; }
  .about__text h2{ margin-top:0; }
  .about__stats{ margin-top:1.8rem; }
}

/* Hero headline on phones. At 375px the desktop minimum (46.4px) needed 340px
   for "A smarter way to" but only had 335, so "to" orphaned onto its own line.
   Scale with the viewport so it holds on 320px screens too. */
@media (max-width:600px){
  .hero__title{ font-size:clamp(1.85rem,10.4vw,2.9rem); line-height:1.06; }
  .svc-hero .hero__title{ font-size:clamp(1.7rem,9vw,2.6rem); }
  .post-hero__h1{ font-size:clamp(1.6rem,8vw,2.4rem); }
}


/* ============================================================
   MOBILE POLISH
   ============================================================ */
@media (max-width:1000px){
  /* Four footer columns are unreadable below desktop. */
  .foot__grid{ grid-template-columns:1fr 1fr; gap:2.2rem 1.5rem; }
  .foot__brand{ grid-column:1 / -1; }
  /* Contact lands alone on the last row; the email is wider than half. */
  .foot__grid > :last-child{ grid-column:1 / -1; }
}
@media (max-width:900px){
  /* Heading (and the outline centred on it) sit over the county list. */
  .areas__head{ margin-inline:auto; text-align:center; }
}
@media (max-width:640px){
  /* Category rows read as tappable rows, not stray text in dead space. */
  .hero__cat{ justify-content:space-between; align-items:center; }
  .hero__cat::after{ content:"\2192"; font-family:var(--sans); font-size:.95rem; color:var(--blue-2); opacity:.75; }

  /* One sentence per line, with air between the two. */
  .statement__text{ font-size:clamp(1.9rem,7.4vw,2.6rem); }
  .statement__text span{ display:block; margin-inline:0; }
  .statement__em{ margin-top:.45em; }

  /* Two narrow columns wrapped every card's copy to three words a line. */
  .promise__grid{ grid-template-columns:1fr; }

  .foot__top{ padding-block:2.6rem 1.4rem; }
  .foot__base{ justify-content:center; text-align:center; }
}

/* ============================================================
   LINE BREAKING
   Headings even out their lines; body copy refuses to end on a
   stranded word. Both degrade to normal wrapping where unsupported.
   ============================================================ */
h1,h2,h3,h4,p,li,figcaption,dd,blockquote{ text-wrap:balance; }
/* On phones long-form copy runs past the browser's balancing limit, where
   balance is ignored; 'pretty' still keeps the last line off a lone word. */
@media (max-width:640px){ .post__in p,.svc-intro__lead{ text-wrap:pretty; } }