/* =====================================================================
   Pressure Cleaning Canberra — styles
   One stylesheet, shared across every page. Design tokens first, then
   base, components, sections, and motion. Mobile-first.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand — water, freshness, high energy */
  --ink:        #0a1929;   /* near-black navy for text            */
  --ink-soft:   #3d5266;   /* muted body text                     */
  --deep:       #062033;   /* deep sections                       */
  --aqua:       #0aa2c7;   /* primary — clean water               */
  --aqua-dark:  #087a97;
  --spray:      #22d3ee;   /* bright spray highlight              */
  --marine:     #0e5a8a;
  --sun:        #ffc93c;   /* sunny accent — the "after" glow     */
  --sun-deep:   #ffab00;
  --lime:       #7ce495;   /* fresh/clean confirmation            */
  --grime:      #4a4237;   /* the dirt we blast away              */
  --grime-2:    #2c2620;

  --paper:      #ffffff;
  --mist:       #f2f8fb;   /* page background                     */
  --mist-2:     #e4f1f7;
  --line:       #d7e6ee;

  --radius:     18px;
  --radius-sm:  12px;
  --radius-lg:  30px;
  --shadow:     0 18px 50px -22px rgba(6, 32, 51, .40);
  --shadow-lg:  0 40px 90px -35px rgba(6, 32, 51, .55);
  --ring:       0 0 0 4px rgba(34, 211, 238, .30);

  --wrap:       1160px;
  --gutter:     clamp(20px, 5vw, 56px);

  --sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Reset-ish base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(16px, 1.05vw, 17.5px);
  line-height: 1.65;
  color: var(--ink);
  background: var(--mist);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--aqua-dark); text-decoration: none; }
a:hover { color: var(--aqua); }

h1, h2, h3, h4 { line-height: 1.08; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2.3rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p  { margin: 0 0 1rem; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--aqua-dark);
  background: linear-gradient(90deg, var(--mist-2), transparent);
  padding: .4em .9em; border-radius: 100px;
}
.eyebrow::before { content: "💦"; font-size: 1em; }

.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section__head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 60px); }
.section__head.-center { margin-inline: auto; text-align: center; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--aqua);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font: inherit; font-weight: 700; line-height: 1;
  padding: 1.05em 1.7em; border-radius: 100px; border: 0; cursor: pointer;
  color: var(--btn-fg); background: var(--btn-bg);
  box-shadow: 0 14px 30px -12px rgba(10, 162, 199, .8);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
  text-align: center; -webkit-tap-highlight-color: transparent;
}
.btn:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 22px 42px -14px rgba(10, 162, 199, .9); }
.btn:active { transform: translateY(-1px) scale(.99); }
.btn:focus-visible { outline: none; box-shadow: var(--ring), 0 14px 30px -12px rgba(10,162,199,.8); }
.btn.-sun    { --btn-bg: var(--sun); --btn-fg: var(--ink); box-shadow: 0 14px 30px -12px rgba(255,171,0,.8); }
.btn.-sun:hover { box-shadow: 0 22px 42px -14px rgba(255,171,0,.95); }
.btn.-ghost  { --btn-bg: transparent; --btn-fg: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.btn.-ghost:hover { --btn-bg: rgba(255,255,255,.12); box-shadow: inset 0 0 0 2px #fff; }
.btn.-dark   { --btn-bg: var(--ink); --btn-fg: #fff; box-shadow: 0 14px 30px -14px rgba(10,25,41,.8); }
.btn.-block  { display: flex; width: 100%; }
.btn.-lg     { padding: 1.2em 2em; font-size: 1.05rem; }

.textlink { font-weight: 700; display: inline-flex; align-items: center; gap: .4em; }
.textlink::after { content: "→"; transition: transform .2s var(--ease); }
.textlink:hover::after { transform: translateX(4px); }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s, border-color .3s, background .3s;
}
.topbar.is-scrolled { box-shadow: 0 10px 30px -20px rgba(6,32,51,.5); border-color: var(--line); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 74px; }

.brand { display: inline-flex; align-items: center; gap: .6em; font-weight: 800; font-size: 1.12rem; color: var(--ink); letter-spacing: -.02em; }
.brand:hover { color: var(--ink); }
.brand__mark {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.25rem;
  background: linear-gradient(135deg, var(--aqua), var(--marine));
  box-shadow: 0 8px 18px -8px rgba(10,162,199,.9); color: #fff;
  transform: rotate(-8deg);
}
.brand small { display: block; font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--aqua-dark); }

.topbar__nav { display: flex; align-items: center; gap: .3rem; }
.topbar__nav a:not(.btn) {
  color: var(--ink-soft); font-weight: 600; font-size: .95rem;
  padding: .55em .8em; border-radius: 10px; transition: color .2s, background .2s;
}
.topbar__nav a:not(.btn):hover { color: var(--ink); background: var(--mist-2); }
.topbar__actions { display: flex; align-items: center; gap: .7rem; }
.topbar__phone { font-weight: 800; color: var(--ink); white-space: nowrap; }
.topbar__phone:hover { color: var(--aqua-dark); }

.topbar__toggle {
  display: none; width: 46px; height: 46px; border: 0; border-radius: 12px;
  background: var(--mist-2); cursor: pointer; position: relative;
}
.topbar__toggle span, .topbar__toggle span::before, .topbar__toggle span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px;
  background: var(--ink); border-radius: 2px; transform: translate(-50%, -50%); transition: transform .3s var(--ease), opacity .2s;
}
.topbar__toggle span::before { transform: translate(-50%, -7px); }
.topbar__toggle span::after  { transform: translate(-50%,  7px); }
.nav-open .topbar__toggle span { background: transparent; }
.nav-open .topbar__toggle span::before { transform: translate(-50%, 0) rotate(45deg); }
.nav-open .topbar__toggle span::after  { transform: translate(-50%, 0) rotate(-45deg); }

@media (max-width: 1024px) {
  .topbar__toggle { display: block; margin-left: auto; }  /* sit at the far right */
  .topbar__actions { display: none; }                     /* empty once phone is hidden — was stranding the toggle mid-bar */
  .topbar__nav {
    position: fixed; inset: 74px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: .25rem; padding: 1rem var(--gutter) 1.6rem; background: #fff;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    transform: translateY(-130%); transition: transform .35s var(--ease); z-index: 55;
  }
  .nav-open .topbar__nav { transform: translateY(0); }
  .topbar__nav a:not(.btn) { padding: .9em 1em; font-size: 1.05rem; }
  .topbar__nav .btn { margin-top: .5rem; }
  .topbar__phone { display: none; }
}

/* ============================================================
   HERO — the interactive "blast the grime away" scene
   ============================================================ */
.hero { position: relative; overflow: hidden; background: var(--deep); }
.hero__stage {
  position: relative;
  min-height: min(88vh, 820px);
  display: grid; align-items: center;   /* vertically centre the copy */
  isolation: isolate;
  touch-action: pan-y;                 /* let the page still scroll on touch */
}

/* The CLEAN scene sits underneath and is revealed as grime is blasted off. */
.hero__scene {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 120% at 80% -10%, rgba(255,201,60,.35), transparent 55%),
    radial-gradient(130% 130% at -10% 110%, rgba(34,211,238,.45), transparent 55%),
    linear-gradient(160deg, #0b3b5c 0%, #0e5a8a 45%, #0aa2c7 100%);
}
.hero__scene::after { /* sheen */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 30% 20%, rgba(255,255,255,.18), transparent 60%);
  pointer-events: none;
}

/* Grime canvas on top — JS fills it, pointer erases it. */
.hero__grime { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; cursor: none; }
.no-js .hero__grime, .hero.is-static .hero__grime { display: none; }

/* click-through wrap so grime can be blasted behind the text, but the
   CTAs inside stay clickable (they re-enable pointer events) */
.hero__wrap { position: relative; z-index: 3; width: 100%; pointer-events: none; }
.hero__copy { position: relative; padding-block: clamp(40px, 8vh, 90px); max-width: 720px; pointer-events: none; }
.hero__copy .btn, .hero__copy a { pointer-events: auto; }
.hero__tag {
  display: inline-flex; align-items: center; gap: .55em; margin-bottom: 1.2rem;
  color: #eafcff; font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  padding: .5em 1em; border-radius: 100px; backdrop-filter: blur(4px);
}
.hero h1 { color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.25); }
.hero h1 .pop { color: var(--sun); position: relative; white-space: nowrap; }
.hero__sub { color: #dff3fb; font-size: clamp(1.05rem, 1.7vw, 1.35rem); max-width: 34ch; margin-bottom: 2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.hero__estimate { margin: 1rem 0 0; }
.hero__estimate a { display: inline-flex; align-items: center; gap: .4em; color: var(--sun); font-weight: 700;
  font-size: .98rem; padding: .35em 0; border-bottom: 1px solid transparent; transition: border-color .2s, gap .2s; }
.hero__estimate a:hover { color: var(--sun); border-color: var(--sun); gap: .65em; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 1.2rem 1.6rem; margin-top: 2.2rem; color: #cdeaf5; font-weight: 600; font-size: .92rem; }
.hero__trust span { display: inline-flex; align-items: center; gap: .5em; }
.hero__trust b { color: var(--sun); font-size: 1.15em; }

/* Nozzle cursor + spray */
.hero__nozzle {
  position: absolute; z-index: 4; top: 0; left: 0; width: 74px; height: 74px;
  transform: translate(-50%, -50%); pointer-events: none; opacity: 0;
  transition: opacity .2s; will-change: transform;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.hero.is-cleaning .hero__nozzle { opacity: 1; }
.hero__nozzle::before { /* glow */
  content: ""; position: absolute; inset: 20% auto auto 42%; width: 16px; height: 16px;
  border-radius: 50%; background: radial-gradient(circle, #fff, var(--spray)); filter: blur(2px);
}

/* HUD — grime meter + reset */
.hero__hud {
  position: absolute; z-index: 5; left: var(--gutter); right: var(--gutter); bottom: clamp(16px, 3vh, 30px);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; pointer-events: none;
}
.hero__meter {
  pointer-events: none; flex: 1 1 240px; max-width: 340px;
  background: rgba(6,32,51,.45); border: 1px solid rgba(255,255,255,.25);
  border-radius: 100px; padding: 6px 6px 6px 16px; display: flex; align-items: center; gap: .8rem;
  backdrop-filter: blur(6px); color: #fff; font-weight: 700; font-size: .82rem;
}
.hero__meter-track { flex: 1; height: 8px; border-radius: 100px; background: rgba(255,255,255,.22); overflow: hidden; }
.hero__meter-fill { display: block; height: 100%; width: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--grime), var(--grime-2)); transition: width .3s ease, background .5s; }
.hero.is-clean .hero__meter-fill { background: linear-gradient(90deg, var(--lime), var(--spray)); }
.hero__meter-label { white-space: nowrap; min-width: 88px; text-align: right; }
.hero__reset {
  pointer-events: auto; font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer;
  color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  padding: .7em 1.2em; border-radius: 100px; backdrop-filter: blur(6px); transition: background .2s, transform .2s;
}
.hero__reset:hover { background: rgba(255,255,255,.26); transform: translateY(-2px); }

.hero__hint {
  position: absolute; z-index: 5; top: clamp(16px, 4vh, 40px); right: var(--gutter);
  margin: 0; color: #eafcff; font-weight: 700; font-size: .9rem; text-align: right;
  background: rgba(6,32,51,.4); border: 1px solid rgba(255,255,255,.22);
  padding: .6em 1em; border-radius: 100px; backdrop-filter: blur(6px);
  display: inline-flex; align-items: center; gap: .5em; transition: opacity .4s;
}
.hero__hint .wiggle { display: inline-block; animation: wiggle 1.4s var(--ease) infinite; }
.hero.is-clean .hero__hint { background: rgba(124,228,149,.22); border-color: rgba(124,228,149,.5); }
@keyframes wiggle { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-6px) rotate(-8deg); } }
@media (max-width: 620px) { .hero__hint { display: none; } }

/* confetti-ish sparkle burst when clean */
.hero__glints { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .6s; }
.hero.is-clean .hero__glints { opacity: 1; }
.hero__glints i {
  position: absolute; width: 14px; height: 14px; color: #fff;
  background: conic-gradient(from 0deg, transparent 0 45%, currentColor 45% 55%, transparent 55%),
              conic-gradient(from 90deg, transparent 0 45%, currentColor 45% 55%, transparent 55%);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.9)); animation: twinkle 2.6s ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { transform: scale(.4); opacity: .2; } 50% { transform: scale(1); opacity: 1; } }

/* ============================================================
   MARQUEE / trust strip
   ============================================================ */
.marquee { background: var(--ink); color: #cfe7f2; overflow: hidden; padding: .9rem 0; }
.marquee__track { display: flex; gap: 3rem; white-space: nowrap; width: max-content; animation: slide 26s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span { display: inline-flex; align-items: center; gap: .6em; font-weight: 700; letter-spacing: .02em; }
.marquee b { color: var(--sun); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ============================================================
   SERVICES — cards that "wash clean" on hover
   ============================================================ */
.services { background:
  radial-gradient(60% 50% at 100% 0%, var(--mist-2), transparent 60%),
  var(--mist); }
.grid-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.svc {
  position: relative; overflow: hidden; border-radius: var(--radius); padding: 1.6rem 1.5rem 1.7rem;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.svc::before { /* grime film that lifts on hover */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 30% at 20% 15%, rgba(74,66,55,.5), transparent 60%),
    radial-gradient(45% 35% at 85% 80%, rgba(44,38,32,.55), transparent 60%),
    linear-gradient(135deg, rgba(74,66,55,.35), rgba(44,38,32,.25));
  opacity: .5; mix-blend-mode: multiply; transition: opacity .45s var(--ease);
}
.svc:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--spray); }
.svc:hover::before { opacity: 0; }
.svc > * { position: relative; z-index: 1; }
.svc__icon {
  width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; font-size: 1.7rem;
  background: linear-gradient(135deg, var(--mist-2), #fff); box-shadow: inset 0 0 0 1px var(--line);
  margin-bottom: 1rem; transition: transform .4s var(--ease);
}
.svc:hover .svc__icon { transform: scale(1.08) rotate(-6deg); }
.svc h3 { margin-bottom: .35em; }
.svc p { color: var(--ink-soft); font-size: .95rem; margin-bottom: .9rem; }
.svc__from { font-weight: 700; color: var(--aqua-dark); font-size: .9rem; }
a.svc__from { display: inline-flex; align-items: center; gap: .3em; padding: .3em .7em; border-radius: 100px;
  background: var(--mist-2); transition: background .2s, gap .2s, color .2s; }
a.svc__from:hover { background: var(--aqua); color: #fff; gap: .55em; }
.svc__shine { position: absolute; z-index: 2; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-18deg); opacity: 0; transition: none; pointer-events: none; }
.svc:hover .svc__shine { animation: shine .7s var(--ease) forwards; }
@keyframes shine { from { left: -60%; opacity: 1; } to { left: 130%; opacity: 0; } }

/* ============================================================
   BEFORE / AFTER slider
   ============================================================ */
.ba { background: var(--deep); color: #fff; }
.ba .lead { color: #bfe0ef; }
.ba .eyebrow { color: var(--spray); background: linear-gradient(90deg, rgba(34,211,238,.14), transparent); }
.ba__stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); user-select: none; touch-action: pan-y; background: #12324a;
  cursor: ew-resize;
}
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after  { z-index: 1; }
.ba__before { z-index: 2; clip-path: inset(0 50% 0 0); filter: saturate(.55) brightness(.62) contrast(1.05) sepia(.35); }
.ba__tag {
  position: absolute; bottom: 16px; z-index: 3; font-weight: 800; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; padding: .5em 1em; border-radius: 100px; backdrop-filter: blur(6px);
}
.ba__tag.-before { left: 16px; background: rgba(74,66,55,.75); color: #fff; z-index: 3; }
.ba__tag.-after  { right: 16px; background: rgba(124,228,149,.9); color: var(--ink); z-index: 1; }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 4; width: 4px; transform: translateX(-50%);
  background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}
.ba__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--aqua-dark);
  display: grid; place-items: center; font-size: 1.4rem; box-shadow: var(--shadow-lg);
  cursor: ew-resize;
}
.ba__grip::before { content: "⟷"; font-weight: 700; }
.ba__hint { text-align: center; margin-top: 1.2rem; color: #bfe0ef; font-weight: 600; font-size: .9rem; }

/* ============================================================
   STATS counters
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.2rem; }
.stat {
  text-align: center; padding: 1.8rem 1rem; border-radius: var(--radius); background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.stat b { display: block; font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--aqua), var(--marine)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: var(--ink-soft); font-weight: 600; font-size: .95rem; }

/* ============================================================
   STEPS — how it works
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem; counter-reset: step; }
.step { position: relative; padding: 2.2rem 1.5rem 1.6rem; background: #fff; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -22px; left: 24px; width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; color: #fff;
  background: linear-gradient(135deg, var(--aqua), var(--marine)); box-shadow: 0 10px 20px -8px rgba(10,162,199,.9);
}
.step h3 { margin: .3em 0 .3em; }
.step p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* ============================================================
   SPLIT (why us) + coverage
   ============================================================ */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.checks { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1rem; }
.checks li { display: grid; grid-template-columns: 34px 1fr; gap: .9rem; align-items: start; }
.checks li::before {
  content: "✓"; grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--lime), var(--aqua)); box-shadow: 0 8px 16px -8px rgba(10,162,199,.8);
}
.checks b { display: block; }
.checks span { color: var(--ink-soft); font-size: .95rem; }

.panel {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 420px;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(34,211,238,.5), transparent 55%),
    linear-gradient(160deg, #0e5a8a, #062033);
  box-shadow: var(--shadow-lg); color: #fff; display: grid; place-content: center; text-align: center; padding: 2.5rem;
}
.panel__big { font-size: clamp(3.4rem, 10vw, 6rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--sun); }
.panel p { color: #dff3fb; margin: .4rem 0 0; }
.panel::after { content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='6' cy='6' r='1.2' fill='%23ffffff22'/%3E%3Ccircle cx='26' cy='18' r='1' fill='%23ffffff18'/%3E%3Ccircle cx='14' cy='30' r='1.4' fill='%23ffffff1e'/%3E%3C/svg%3E"); pointer-events: none; }

.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.chip { font-weight: 600; font-size: .9rem; padding: .5em 1em; border-radius: 100px; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .2s, border-color .2s, color .2s; }
.chip:hover { transform: translateY(-2px); border-color: var(--spray); color: var(--aqua-dark); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem; box-shadow: var(--shadow); }
.quote__stars { color: var(--sun-deep); letter-spacing: .1em; font-size: 1.05rem; margin-bottom: .6rem; }
.quote p { font-size: 1.02rem; }
.quote__who { display: flex; align-items: center; gap: .8rem; margin-top: 1.1rem; }
.quote__ava { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--aqua), var(--marine)); }
.quote__who b { display: block; }
.quote__who span { color: var(--ink-soft); font-size: .85rem; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { display: grid; gap: .9rem; max-width: 820px; margin-inline: auto; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.faq__item summary { cursor: pointer; list-style: none; padding: 1.15rem 1.4rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 1.5rem; font-weight: 700; color: var(--aqua-dark); transition: transform .25s var(--ease); line-height: 1; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--aqua-dark); }
.faq__item summary:focus-visible { outline: none; box-shadow: var(--ring); }
.faq__item p { margin: 0; padding: 0 1.4rem 1.25rem; color: var(--ink-soft); }

/* ============================================================
   CTA band + contact
   ============================================================ */
.cta-band {
  position: relative; overflow: hidden; color: #fff; text-align: center;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255,201,60,.35), transparent 50%),
    radial-gradient(90% 120% at 0% 100%, rgba(34,211,238,.5), transparent 55%),
    linear-gradient(150deg, #0b3b5c, #0aa2c7);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #eafcff; max-width: 40ch; margin-inline: auto; }
.cta-band .hero__cta { justify-content: center; }

.contact { background: var(--mist); }
.contact__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }
.contact__info .lead { margin-bottom: 1.6rem; }
.contact__lines { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 1rem; }
.contact__lines li { display: flex; align-items: center; gap: .9rem; font-weight: 600; }
.contact__lines .ico { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.2rem; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.contact__lines a { color: var(--ink); }
.contact__lines a:hover { color: var(--aqua-dark); }
/* let grid items shrink and long strings (e.g. the email) wrap on small screens */
.contact__grid > * { min-width: 0; }
.contact__lines li, .contact__lines a, .contact__lines span { min-width: 0; }
.contact__lines a, .contact__lines span { overflow-wrap: anywhere; word-break: break-word; }
.contact__lines small { display: block; font-weight: 500; color: var(--ink-soft); }

.form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.4rem); box-shadow: var(--shadow-lg); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .form__row { grid-template-columns: 1fr; } }
.field { display: block; margin-bottom: 1rem; }
.field > span { display: block; font-weight: 700; font-size: .85rem; margin-bottom: .4rem; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--mist);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: .85em 1em; transition: border-color .2s, box-shadow .2s, background .2s;
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--aqua); background: #fff; box-shadow: var(--ring);
}
.field.-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form small.fineprint { display: block; margin-top: .8rem; color: var(--ink-soft); font-size: .82rem; text-align: center; }
.form__sent {
  margin-top: 1rem; padding: 1rem 1.2rem; border-radius: var(--radius-sm); font-weight: 700;
  background: linear-gradient(135deg, rgba(124,228,149,.25), rgba(34,211,238,.18));
  border: 1px solid var(--lime); color: var(--deep);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--deep); color: #b9d6e5; padding: clamp(56px, 8vw, 90px) 0 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.4rem; margin-bottom: 3rem; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; gap: 1.8rem; } }
.footer .brand { color: #fff; }
.footer .brand small { color: var(--spray); }
.footer h4 { color: #fff; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer a { color: #b9d6e5; }
.footer a:hover { color: #fff; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.6rem; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 1rem; font-size: .85rem; color: #7fa5b8; }

/* ============================================================
   Sticky mobile call bar
   ============================================================ */
.callbar {
  position: fixed; z-index: 70; left: 12px; right: 12px; bottom: 12px; display: none;
  background: var(--ink); color: #fff; border-radius: 100px; padding: 6px; box-shadow: var(--shadow-lg);
  grid-template-columns: 1fr 1fr; gap: 6px; align-items: center;
}
.callbar a { display: flex; align-items: center; justify-content: center; gap: .5em; padding: .9em; border-radius: 100px; font-weight: 800; }
.callbar a.-call { background: var(--sun); color: var(--ink); }
.callbar a.-quote { color: #fff; }
@media (max-width: 720px) { .callbar { display: grid; } body { padding-bottom: 84px; } }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__glints i, .brand__mark { animation: none !important; }
}

/* ============================================================
   PAVER SCENE — CSS-drawn "driveway" for the before/after.
   Same scene both layers; .ba__before adds a grime filter so the
   split reads as dirty→clean. Swap for real job photos later.
   ============================================================ */
.paver {
  --mortar: #c9d3d8;
  --paver-a: #eef2f4;
  --paver-b: #e2e8ec;
  background-color: var(--paver-a);
  background-image:
    /* garden strip + house shadow along the top */
    linear-gradient(180deg, #6fae6a 0 7%, #5b7d55 7% 8.5%, rgba(0,0,0,.12) 8.5% 12%, transparent 12%),
    /* subtle lighting */
    radial-gradient(120% 80% at 70% 120%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(90% 70% at 10% -10%, rgba(10,25,41,.12), transparent 55%),
    /* mortar grid — running-bond brick pavers */
    repeating-linear-gradient(0deg, var(--mortar) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(90deg, var(--mortar) 0 2px, transparent 2px 92px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 92px 92px;
  position: relative;
}
.paver::before { /* offset every second brick row for running bond + paver tint */
  content: ""; position: absolute; inset: 12% 0 0 0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 46px, var(--mortar) 46px 48px, transparent 48px 92px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0 46px, rgba(255,255,255,.35) 46px 92px);
  background-size: 92px 92px; background-position: 46px 46px; opacity: .9;
}
.paver::after { /* faint dappled texture so it doesn't read as flat */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 60%, rgba(0,0,0,.05), transparent 8%),
    radial-gradient(circle at 68% 40%, rgba(0,0,0,.04), transparent 7%),
    radial-gradient(circle at 82% 75%, rgba(0,0,0,.05), transparent 9%);
  pointer-events: none;
}
/* the "before" grime: green-black mould, oil patch, weathering */
.ba__before.paver {
  background-blend-mode: multiply, normal, normal, normal, normal;
}
.ba__before.paver > .grime,
.ba__before .grime { display: none; }
.ba__img.ba__before::after {
  background:
    radial-gradient(35% 30% at 22% 68%, rgba(30,26,18,.6), transparent 60%),   /* oil stain */
    radial-gradient(50% 40% at 78% 82%, rgba(46,58,38,.55), transparent 60%),  /* mould */
    radial-gradient(40% 45% at 60% 30%, rgba(52,60,44,.4), transparent 60%),
    linear-gradient(160deg, rgba(60,66,50,.35), rgba(40,44,34,.25));
  mix-blend-mode: multiply;
}

/* water droplets flung off the nozzle while cleaning */
.droplet {
  position: absolute; z-index: 4; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #eafcff, var(--spray) 70%);
  box-shadow: 0 0 6px rgba(34,211,238,.7); pointer-events: none;
  animation: droplet .6s ease-out forwards;
}
@keyframes droplet {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); }
}
@media (prefers-reduced-motion: reduce) { .droplet { display: none; } }

/* ============================================================
   ESTIMATOR — customer-facing instant estimate
   ============================================================ */
.disclaimer {
  display: flex; gap: .9rem; align-items: flex-start;
  background: linear-gradient(135deg, rgba(255,201,60,.16), rgba(255,171,0,.08));
  border: 1px solid var(--sun-deep); border-radius: var(--radius);
  padding: 1rem 1.2rem; margin-bottom: 1.6rem;
}
.disclaimer .ico { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
.disclaimer b { display: block; margin-bottom: .15rem; }
.disclaimer p { margin: 0; color: var(--ink-soft); font-size: .92rem; }

.est { display: grid; grid-template-columns: 1fr 366px; gap: clamp(20px, 3vw, 32px); align-items: start; }
@media (max-width: 920px) { .est { grid-template-columns: 1fr; } }

.est__svc {
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff;
  padding: .9rem 1.1rem; margin-bottom: .7rem; transition: border-color .2s, background .2s;
}
.est__svc.on { border-color: var(--aqua); background: linear-gradient(0deg, var(--mist-2), transparent); }
.est__svc-top { display: flex; align-items: center; gap: .8rem; }
.est__svc-tog { display: flex; align-items: center; gap: .7rem; font-weight: 700; cursor: pointer; flex: 1; user-select: none; }
.est__svc-tog input { width: 20px; height: 20px; accent-color: var(--aqua); cursor: pointer; flex: 0 0 auto; }
.est__svc-ico { font-size: 1.2rem; }
.est__svc-price { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--aqua-dark); white-space: nowrap; }
.est__svc-in { display: none; gap: .7rem; margin-top: .8rem; flex-wrap: wrap; }
.est__svc.on .est__svc-in { display: flex; }
.est__svc-in .field { flex: 1; min-width: 130px; margin-bottom: 0; }

.est__cond { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1rem; }
@media (max-width: 520px) { .est__cond { grid-template-columns: 1fr; } }
.est__cond label {
  display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; cursor: pointer; user-select: none;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--mist); font-weight: 600; font-size: .92rem;
}
.est__cond label.on { border-color: var(--aqua); background: var(--mist-2); }
.est__cond input { width: 18px; height: 18px; accent-color: var(--aqua); flex: 0 0 auto; }

.est__result {
  position: sticky; top: 90px; background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.4rem 1.5rem; text-align: center;
}
.est__result-label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.est__range {
  font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: .2rem 0;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--aqua), var(--marine)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.est__gst { color: var(--ink-soft); font-size: .8rem; }
.est__lines { list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px dashed var(--line); text-align: left; }
.est__lines li { display: flex; justify-content: space-between; gap: .8rem; padding: .35rem 0; font-size: .9rem; }
.est__lines li span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.est__lines li.save span { color: #0a8f52; }
.est__empty { color: var(--ink-soft); font-size: .92rem; padding: .6rem 0; }
.est__mini { margin-top: 1rem; color: var(--ink-soft); font-size: .78rem; line-height: 1.5; }

/* ============================================================
   BLOG — listing + article
   ============================================================ */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; }
.post-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s; color: var(--ink);
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--spray); color: var(--ink); }
.post-card__thumb { aspect-ratio: 16 / 9; display: grid; place-items: center; font-size: 3.2rem;
  background: linear-gradient(160deg, #0b3b5c 0%, #0e5a8a 45%, #0aa2c7 100%); }
.post-card__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.post-card__cat { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--aqua-dark); }
.post-card h3 { margin: .5rem 0 .5rem; font-size: 1.18rem; }
.post-card p { color: var(--ink-soft); font-size: .93rem; margin-bottom: 1rem; }
.post-card__meta { margin-top: auto; font-size: .82rem; color: var(--ink-soft); font-weight: 600; }
.post-card__more { color: var(--aqua-dark); font-weight: 700; }

/* sticky category scroll-nav on the blog index */
.cat-nav { position: sticky; top: 74px; z-index: 40; background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.cat-nav__inner { display: flex; gap: .4rem; overflow-x: auto; padding: .7rem 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cat-nav__inner::-webkit-scrollbar { display: none; }
.cat-nav a { flex: 0 0 auto; font-weight: 700; font-size: .9rem; color: var(--ink-soft);
  padding: .5em 1em; border-radius: 100px; background: var(--mist); border: 1px solid var(--line); white-space: nowrap; transition: color .2s, background .2s, border-color .2s; }
.cat-nav a:hover, .cat-nav a.is-active { color: #fff; background: var(--aqua); border-color: var(--aqua); }
.blog-cat { padding-top: clamp(40px, 6vw, 72px); scroll-margin-top: 130px; }
.blog-cat__head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.blog-cat__head h2 { margin: 0; }
.blog-cat__head span { color: var(--ink-soft); font-size: .92rem; }

.post-hero { background: linear-gradient(160deg, #062033, #0e5a8a); color: #fff; }
.post-hero .eyebrow { color: #eafcff; background: rgba(255,255,255,.14); }
.post-hero h1 { color: #fff; max-width: 20ch; }
.post-hero__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1rem; color: #cdeaf5; font-weight: 600; font-size: .92rem; }
.crumbs { font-size: .85rem; color: #9fc6dc; margin-bottom: 1rem; }
.crumbs a { color: #cdeaf5; } .crumbs a:hover { color: #fff; }

.prose { max-width: 720px; margin-inline: auto; }
.prose h2 { margin: 2.2rem 0 .7rem; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.prose h3 { margin: 1.6rem 0 .5rem; }
.prose p, .prose li { color: var(--ink-soft); font-size: 1.05rem; }
.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.prose li { margin-bottom: .5rem; }
.prose strong { color: var(--ink); }
.prose a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.6rem; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.prose th { background: var(--mist-2); font-weight: 700; color: var(--ink); }
.prose td { color: var(--ink-soft); }
.post-cta {
  margin: 2rem 0; padding: 1.4rem 1.6rem; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--mist-2), var(--mist));
  border: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
}
.post-cta p { margin: 0; font-weight: 700; color: var(--ink); }

/* ============================================================
   BLOG — index (post cards) + article pages (prose)
   ============================================================ */
/* Shared dark hero for the blog index and each post */
.post-hero {
  position: relative; color: #fff;
  background:
    radial-gradient(120% 120% at 88% -10%, rgba(255,201,60,.25), transparent 55%),
    radial-gradient(120% 120% at -10% 110%, rgba(34,211,238,.42), transparent 55%),
    linear-gradient(155deg, #0b3b5c 0%, #0e5a8a 55%, #0aa2c7 100%);
}
.post-hero .eyebrow { color: #eafcff; background: rgba(255,255,255,.14); }
.post-hero h1 { color: #fff; text-wrap: balance; max-width: 22ch; }
.post-hero .lead { color: #dff3fb; }
.post-hero__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1rem; color: #cdeaf5; font-weight: 600; font-size: .9rem; }
.crumbs { font-size: .82rem; color: #bfe0ef; margin-bottom: .9rem; }
.crumbs a { color: #eafcff; }
.crumbs a:hover { color: #fff; text-decoration: underline; }

/* Sticky category pill bar (horizontal scroll on mobile) */
.cat-nav {
  position: sticky; top: 74px; z-index: 40;
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); border-bottom: 1px solid var(--line);
}
.cat-nav__inner {
  display: flex; gap: .5rem; overflow-x: auto; padding-top: .7rem; padding-bottom: .7rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.cat-nav__inner::-webkit-scrollbar { display: none; }
.cat-nav__inner a {
  flex: 0 0 auto; font-weight: 600; font-size: .9rem; color: var(--ink-soft);
  padding: .5em 1em; border-radius: 100px; background: var(--mist-2); white-space: nowrap;
  transition: background .2s, color .2s;
}
.cat-nav__inner a:hover { color: var(--aqua-dark); background: var(--mist); }

/* Category blocks + heading */
.blog-cat { padding: clamp(34px, 6vw, 58px) 0; scroll-margin-top: 130px; }
.blog-cat + .blog-cat { border-top: 1px solid var(--line); }
.blog-cat__head { margin-bottom: 1.3rem; }
.blog-cat__head h2 { margin-bottom: .15em; }
.blog-cat__head span { color: var(--ink-soft); font-weight: 600; }

/* Post-card grid */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.2rem; }
.post-card {
  display: flex; flex-direction: column; background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--spray); color: var(--ink); }
.post-card__thumb {
  display: grid; place-items: center; height: 92px; font-size: 2.6rem;
  background: linear-gradient(135deg, var(--mist-2), #fff); border-bottom: 1px solid var(--line);
}
.post-card:hover .post-card__thumb { background: linear-gradient(135deg, #dff1f8, var(--mist-2)); }
.post-card__body { display: flex; flex-direction: column; gap: .5rem; padding: 1.15rem 1.25rem 1.3rem; flex: 1; }
.post-card__cat {
  align-self: flex-start; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--aqua-dark); background: var(--mist-2); padding: .3em .75em; border-radius: 100px;
}
.post-card h3 { font-size: 1.08rem; margin: 0; line-height: 1.2; }
.post-card__body p { color: var(--ink-soft); font-size: .92rem; margin: 0; flex: 1; }
.post-card__meta { color: var(--ink-soft); font-size: .82rem; font-weight: 600; margin-top: .3rem; }
.post-card__more { color: var(--aqua-dark); }
.post-card:hover .post-card__more { text-decoration: underline; }

/* Article body typography */
.prose { max-width: 44rem; }
.prose > p, .prose > ul, .prose > ol { color: var(--ink); font-size: 1.06rem; line-height: 1.75; margin: 0 0 1.15rem; }
.prose h2 { font-size: clamp(1.4rem, 3.4vw, 1.85rem); margin: 2.1rem 0 .55rem; }
.prose h3 { font-size: 1.2rem; margin: 1.7rem 0 .4rem; }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li { margin-bottom: .5rem; line-height: 1.7; }
.prose strong { font-weight: 700; }
.prose a { color: var(--aqua-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--aqua); }

/* In-article CTA callout */
.post-cta {
  display: flex; flex-direction: column; align-items: center; gap: .9rem; text-align: center;
  margin: 2rem 0; padding: clamp(1.3rem, 3vw, 1.9rem);
  background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(255,201,60,.10));
  border: 1px solid var(--spray); border-radius: var(--radius);
}
.post-cta p { margin: 0; font-weight: 700; font-size: 1.06rem; color: var(--ink); }

/* small helpers */
.center { text-align: center; }
.mt-lg { margin-top: clamp(36px, 5vw, 60px); }
.muted { color: var(--ink-soft); }