/* Coasties homepage draft - page layer on top of scrollcraft.css.
   Brand tokens come from the live site (navy #0F1E36 family, blue accent,
   Outfit). Nothing here restyles .sc-stage, .sc-copy or [data-sc-*]. */

/* The engine writes --sc-p on every act, every frame. Unregistered, that
   custom property inherits, and Chrome repaints the whole act (and, for flow
   acts, the whole document layer) each time it changes. Nothing on this page
   reads --sc-p from CSS, so registering it as a non-inherited number turns
   those writes into no-ops for paint. Measured: ~450 paints per hero scroll
   down to single digits. */
@property --sc-p { syntax: '<number>'; inherits: false; initial-value: 0; }

:root {
  --sc-canvas: #F7F9FC;
  --sc-surface: #FFFFFF;
  --sc-ink: #0F1E36;
  --sc-ink-soft: #4A5B78;
  --sc-accent: #1D63C9;
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Outfit", system-ui, sans-serif;
  --sc-font-text: "Outfit", system-ui, sans-serif;
  --sc-shadow-color: 216 45% 22%;
  --sc-edge: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  --c-mist: #E8F1FB;      /* the lightest blue, from the logo swoosh */
  --c-line: #D9E2EE;
  --c-tick: #1D63C9;
  --c-navy-800: #1B2A4A;
  --bar-h: 72px;
}
@media (max-width: 860px) { :root { --bar-h: 60px; } }

html { scroll-padding-top: calc(var(--bar-h) + 12px); }
/* clip (not hidden) so nothing wide adds a sideways scroll, without making
   a scroll container that would stop the pinned stages sticking. */
html, body { overflow-x: clip; }

/* The engine sizes each pinned act (span x 100vh) and makes its stage sticky
   once it runs, a beat after first paint. Laid out short until then, the page
   jumped (CLS 0.85 on desktop). Give pinned acts their final size from the
   start. Only with scripting on: without it there is nothing to pin. */
@media (scripting: enabled) {
  [data-sc-act="pin"] { position: relative; }
  [data-sc-act="pin"][data-sc-span="1.5"] { height: 150vh; }
  [data-sc-act="pin"][data-sc-span="3.2"] { height: 320vh; }
  [data-sc-act="pin"] > [data-sc-stage] { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
}
body { background: var(--sc-canvas); color: var(--sc-ink); font-weight: 400; }
.sc-display { font-weight: 700; color: var(--sc-ink); }
.sc-body { color: var(--sc-ink-soft); }
img { max-width: 100%; }
a[href^="tel:"] { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--sc-ink); color: #fff; padding: 10px 16px; border-radius: var(--sc-r-sm); }
.skip:focus { top: 12px; }

/* ---------- buttons: one label, one shape ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sc-2);
  min-height: 48px; padding: 0 var(--sc-5); border-radius: var(--sc-r-pill);
  font: 600 var(--sc-t-base)/1 var(--sc-font-text); white-space: nowrap; text-decoration: none;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: 0 6px 18px -6px rgba(29, 99, 201, 0.55); }
.btn--quiet { color: var(--sc-ink); background: transparent; padding-inline: var(--sc-3); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #1855AE; box-shadow: 0 10px 24px -8px rgba(29, 99, 201, 0.6); }
  .btn--quiet:hover { color: var(--sc-accent); }
}
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- site bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 80; height: var(--bar-h);
  background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--c-line);
}
.bar__in { height: 100%; display: flex; align-items: center; gap: var(--sc-5); max-width: 90rem; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2.5rem); }
.bar__logo { display: block; flex: none; }
.bar__logo img { display: block; height: 40px; width: auto; }
.bar__nav { display: flex; align-items: center; gap: var(--sc-1); margin-left: auto; }
.bar__nav > a, .dd > button {
  font: 500 0.95rem/1 var(--sc-font-text); color: var(--sc-ink); text-decoration: none; background: none; border: 0;
  padding: 10px 12px; border-radius: var(--sc-r-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.bar__nav > a[aria-current="page"] { color: var(--sc-accent); }
.dd { position: relative; }
.dd > button svg { width: 12px; height: 12px; transition: transform var(--sc-d-fast) var(--sc-ease-out); }
.dd__menu {
  position: absolute; top: calc(100% + 6px); left: -8px; min-width: 250px; padding: var(--sc-2);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--sc-r-md); box-shadow: var(--sc-e2);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out), visibility 0s linear var(--sc-d-fast);
}
.dd__menu a { display: block; padding: 8px 12px; border-radius: var(--sc-r-sm); color: var(--sc-ink); text-decoration: none; font-size: 0.93rem; }
.dd__menu a:first-child { font-weight: 600; }
.dd.is-open .dd__menu, .dd:focus-within .dd__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dd.is-open > button svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .dd:hover .dd__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .bar__nav > a:hover, .dd > button:hover, .dd__menu a:hover { background: var(--c-mist); }
}
.bar__phone { font-weight: 600; color: var(--sc-ink); text-decoration: none; white-space: nowrap; font-size: 0.95rem; }
.bar__cta { min-height: 44px; font-size: 0.95rem; }
.bar__menu { display: none; }

@media (max-width: 1180px) { .bar__phone { display: none; } }
@media (min-width: 1021px) and (max-width: 1180px) { .bar__nav > a, .dd > button { padding: 10px 8px; } }
@media (max-width: 1020px) {
  .bar__nav, .bar__cta { display: none; }
  .bar__menu {
    display: inline-flex; margin-left: auto; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
    border: 1px solid var(--c-line); border-radius: var(--sc-r-pill); background: #fff; font: 600 0.95rem/1 var(--sc-font-text); color: var(--sc-ink);
  }
  .bar__logo img { height: 34px; }
}
.drawer {
  position: fixed; inset: var(--bar-h) 0 0 0; z-index: 79; background: #fff; overflow-y: auto;
  padding: var(--sc-5) clamp(1rem, 5vw, 2rem) var(--sc-9);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--sc-d-base) var(--sc-ease-out), transform var(--sc-d-base) var(--sc-ease-out), visibility 0s linear var(--sc-d-base);
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.drawer a, .drawer summary { display: block; padding: 14px 0; font-size: 1.15rem; font-weight: 500; color: var(--sc-ink); text-decoration: none; border-bottom: 1px solid var(--c-line); cursor: pointer; }
.drawer details a { padding-left: var(--sc-4); font-size: 1rem; }
.drawer .btn { display: flex; justify-content: center; margin-top: var(--sc-6); width: 100%; padding: 14px var(--sc-5); border: 0; color: var(--sc-accent-ink); }

/* ---------- 1 HERO: wet glass ---------- */
/* --hero-left matches .sc-wrap: the gutter, plus half of any width past the max. */
.hero { --wipe: 0; --hero-left: calc(var(--sc-gutter) + max(0px, (100vw - var(--sc-maxw)) / 2)); }
.hero [data-sc-stage] { overflow: hidden; background: #DDE7F2; }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; will-change: transform; }
/* The wipe is two counter-translated layers, so it runs on the compositor:
   no clip-path, no live blur, nothing repainted per frame. The fog and drops
   are baked into one canvas once per resize. */
.hero__glass, .hero__glass-in { position: absolute; inset: 0; overflow: hidden; will-change: transform; transform: translate3d(0,0,0); }
.hero__glass-in { overflow: visible; }
/* First paint, before the script draws the canvas: already frosted, blade
   parked off-screen, so a slow connection never flashes a half-built hero. */
.hero__glass { background: linear-gradient(100deg, rgba(247,250,253,.93), rgba(236,243,250,.86)); }
/* Once the opaque canvas is drawn it covers this gradient: one less full-screen fill. */
.hero__glass.is-drawn { background: none; }
.hero__blade { transform: translate3d(110vw, 0, 0); }
.hero__edge { opacity: 0; }
.hero__drops { position: absolute; left: -24px; top: -24px; max-width: none; max-height: none; will-change: transform; }
.hero__edge {
  position: absolute; top: 0; bottom: 0; left: 0; width: 22px; margin-left: -11px; pointer-events: none; will-change: transform;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 40%, rgba(160, 190, 222, 0.55) 55%, rgba(255, 255, 255, 0) 100%);
  filter: blur(1px);
}
.hero__blade { position: absolute; top: -4%; left: 0; height: 108%; width: 64px; margin-left: -32px; pointer-events: none; will-change: transform; z-index: 30; }
.hero__handle {
  position: absolute; top: 47%; left: 50px; width: clamp(120px, 12vw, 200px); height: 22px; border-radius: 11px;
  background: linear-gradient(180deg, #3C82E6 0%, #1D63C9 45%, #123F86 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 14px 18px 22px rgba(15,30,54,.28);
}
.hero__handle::before { content: ""; position: absolute; left: -10px; top: -6px; width: 30px; height: 34px; border-radius: 8px; background: linear-gradient(90deg, #8E9BAE, #F4F7FB 45%, #7D8AA0); }
.hero__blade svg { width: 100%; height: 100%; display: block; filter: drop-shadow(18px 22px 22px rgba(15, 30, 54, 0.28)); }
.hero__copy {
  position: absolute; z-index: 20; left: var(--hero-left); top: calc(var(--bar-h) + clamp(2rem, 9vh, 7rem));
  width: min(34rem, 40vw);
}
.hero__copy h1 { font-size: clamp(2.7rem, 1.6rem + 3.3vw, 5rem); line-height: 1.0; letter-spacing: -0.035em; text-wrap: balance; margin: 0; }
.hero__copy h1 span { display: block; color: var(--sc-accent); }
.hero__copy p { margin: var(--sc-5) 0 0; font-size: var(--sc-t-lg); line-height: 1.5; color: #33456A; max-width: 30ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3); margin-top: var(--sc-6); }
.hero__proof { position: absolute; z-index: 20; left: var(--hero-left); bottom: clamp(1.5rem, 5vh, 3rem); display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); margin: 0; padding: 0; list-style: none; font-size: var(--sc-t-sm); font-weight: 500; color: #33456A; max-width: min(36rem, 44vw); }
.hero__proof li { display: flex; align-items: center; gap: 8px; }
.hero__proof svg { width: 16px; height: 16px; color: var(--sc-accent); flex: none; }

@media (min-width: 861px) and (max-width: 1180px) {
  .hero__copy { width: min(34rem, 47vw); }
  .hero__copy p { max-width: 34ch; }
}
@media (min-width: 861px) and (max-height: 820px) {
  .hero__copy { top: calc(var(--bar-h) + 2rem); }
  .hero__copy h1 { font-size: clamp(2.5rem, 1.4rem + 2.8vw, 4.2rem); }
  .hero__proof { display: none; }
}
@media (max-width: 860px) {
  .hero__copy { width: auto; right: clamp(1.25rem, 5vw, 5.5rem); top: calc(var(--bar-h) + 1.75rem); }
  .hero__copy h1 { font-size: clamp(2.3rem, 9.6vw, 3rem); }
  .hero__copy p { font-size: var(--sc-t-base); max-width: 34ch; margin-top: var(--sc-4); }
  .hero__actions { margin-top: var(--sc-5); }
  .hero__proof { display: none; }
  .hero__photo { object-position: 42% 50%; }
  .hero__edge { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 22px; margin: -11px 0 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 40%, rgba(160,190,222,.55) 55%, rgba(255,255,255,0) 100%); }
  .hero__blade { top: 0; left: -4%; width: 108%; height: 56px; margin: -28px 0 0; transform: translate3d(0, 110svh, 0); }
  .hero__handle { display: none; }
  .hero__blade svg { position: absolute; left: 0; top: 0; width: 56px; height: 108vw; transform-origin: 0 0; transform: translateY(56px) rotate(-90deg); filter: drop-shadow(0 -14px 16px rgba(15, 30, 54, 0.25)); }
}

/* ---------- 2 PICKER ---------- */
.pick { padding-block: clamp(4.5rem, 10vw, 8.5rem) clamp(3rem, 6vw, 5rem); }
.pick h2 { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); line-height: 1.08; max-width: 18ch; margin: 0; }
.pick .sc-body { margin-top: var(--sc-4); }
.pick__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sc-3); margin-top: var(--sc-7); }
.pick__opt {
  position: relative; display: flex; flex-direction: column; text-align: left; gap: var(--sc-3); padding: var(--sc-2) var(--sc-2) var(--sc-4);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--sc-r-lg); cursor: pointer; font: inherit; color: var(--sc-ink);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
.pick__opt img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; display: block; }
.pick__opt b { font-weight: 600; font-size: 1.05rem; padding-inline: var(--sc-2); line-height: 1.25; }
.pick__opt:active { transform: scale(0.98); }
.pick__opt[aria-checked="true"] { border-color: var(--sc-accent); box-shadow: 0 0 0 2px var(--sc-accent), var(--sc-e2); }
.pick__opt[aria-checked="true"]::after {
  content: ""; position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--sc-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: 0 2px 6px rgba(15, 30, 54, 0.3);
}
@media (hover: hover) and (pointer: fine) { .pick__opt:hover { border-color: #AFC3DD; box-shadow: var(--sc-e1); } }
@media (max-width: 960px) {
  .pick__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--sc-gutter) * -1); padding: 4px var(--sc-gutter) var(--sc-3); scrollbar-width: none; }
  .pick__list::-webkit-scrollbar { display: none; }
  .pick__opt { flex: 0 0 min(62vw, 15rem); scroll-snap-align: start; }
}

/* ---------- 3 TONIGHT'S CLEAN (peak) ---------- */
.night [data-sc-stage] { display: flex; align-items: center; }
.night__grid {
  width: 100%; max-width: 90rem; margin-inline: auto; padding: calc(var(--bar-h) + 1.5rem) clamp(1.25rem, 4vw, 4rem) 1.5rem;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center;
}
.night__frame { contain: paint; position: relative; border-radius: var(--sc-r-lg); overflow: hidden; aspect-ratio: 4 / 3.1; background: #1B2A4A; box-shadow: var(--sc-e3); }
.night__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.night__dim { filter: brightness(0.42) saturate(0.55) contrast(1.05) hue-rotate(8deg); }
.night__lit { opacity: 0; will-change: opacity; }
.night__glow { position: absolute; top: -10%; bottom: -10%; left: -30%; width: 70%; background: radial-gradient(50% 45% at 50% 45%, rgba(255, 246, 222, 0.32), rgba(255, 246, 222, 0) 70%); opacity: 0; will-change: transform, opacity; pointer-events: none; }
.night__clock {
  position: absolute; left: var(--sc-4); top: var(--sc-4); display: flex; align-items: baseline; gap: 10px; padding: 10px 16px; border-radius: var(--sc-r-pill);
  background: rgba(255, 255, 255, 0.94); color: var(--sc-ink); font-variant-numeric: tabular-nums; box-shadow: var(--sc-e1);
}
.night__clock b { font-weight: 700; font-size: 1.15rem; min-width: 4.6ch; }
.night__clock span { font-size: 0.8rem; font-weight: 500; color: var(--sc-ink-soft); }
/* The visit record reads as a log: a fixed column, bottom-left, in order.
   Every badge keeps its slot from the start (hidden ones are transparent),
   so a new badge never wraps or pushes the others. */
.night__stamps { position: absolute; left: var(--sc-4); bottom: var(--sc-4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-2); margin: 0; padding: 0; list-style: none; }
.night__stamps li {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: var(--sc-r-pill);
  background: #fff; color: var(--sc-ink); font-size: 0.9rem; font-weight: 600; box-shadow: var(--sc-e2);
  opacity: 0; transform: translateY(6px); transition: opacity 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out);
}
.night__stamps li.is-on { opacity: 1; transform: none; }
.night__stamps svg { width: 20px; height: 20px; color: #fff; background: #15803D; border-radius: 50%; padding: 3px; flex: none; }

.night__side h2 { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); line-height: 1.06; margin: 0; }
.night__side h2 em { font-style: normal; color: var(--sc-accent); }
.night__lede { margin: var(--sc-3) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-base); }
.tasks { contain: paint; list-style: none; margin: var(--sc-6) 0 0; padding: 0; border-top: 1px solid var(--c-line); }
/* A tick is one event: circle, mark and text change together in 180ms, and
   the mark pops once. Separate timings left ticks caught half-done and pale. */
.tasks { --tick-d: 180ms; }
.tasks li { display: flex; align-items: center; gap: var(--sc-3); padding: 13px 0; border-bottom: 1px solid var(--c-line); color: #6A7A95; font-size: var(--sc-t-base); transition: color var(--tick-d) var(--sc-ease-out); }
.tasks i { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #B9C7DA; transition: background-color var(--tick-d) var(--sc-ease-out), border-color var(--tick-d) var(--sc-ease-out); }
.tasks i::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat; transform: scale(0.4); opacity: 0; transition: opacity var(--tick-d) var(--sc-ease-out), transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.tasks li.is-done { color: var(--sc-ink); }
.tasks li.is-done i { background: var(--c-tick); border-color: var(--c-tick); }
.tasks li.is-done i::after { opacity: 1; transform: none; }
.night__foot { margin: var(--sc-5) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.night__foot a { color: var(--sc-accent); font-weight: 600; }

@media (max-width: 860px) {
  .night__grid { grid-template-columns: 1fr; gap: var(--sc-4); padding: calc(var(--bar-h) + 0.75rem) var(--sc-gutter) 0.75rem; align-content: start; }
  .night__side { display: contents; }
  .night__side h2 { order: 0; }
  .night__frame { order: 1; }
  .tasks { order: 2; }
  .night__side h2 { font-size: clamp(1.6rem, 6.4vw, 2rem); }
  .night__lede { display: none; }
  .night__frame { aspect-ratio: auto; height: 27svh; }
  .tasks { margin-top: 0; }
  .tasks li { padding: 8px 0; font-size: 0.95rem; }
  .tasks i { width: 22px; height: 22px; }
  .night__foot { display: none; }
  .night__clock { top: 10px; left: 10px; padding: 7px 12px; }
  .night__clock b { font-size: 1rem; }
  .night__stamps { left: 10px; right: 10px; bottom: 10px; gap: 6px; }
  .night__stamps li { font-size: 0.78rem; padding: 6px 10px 6px 7px; }
  .night__stamps svg { width: 16px; height: 16px; }
  /* On phones the badges share one spot and the newest fades in over the
     last. Nothing changes size, so nothing shifts, and a narrow frame never
     wraps a badge up over the clock. */
  .night__stamps { height: 30px; }
  .night__stamps li { position: absolute; left: 0; bottom: 0; }
  .night__stamps li.is-on:has(~ li.is-on) { opacity: 0; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .night__frame { height: 22svh; }
  .tasks li { padding: 6px 0; font-size: 0.9rem; }
}

/* ---------- 4 ASK ANY CLEANER ---------- */
.ask { padding-block: var(--sc-section); background: #fff; border-block: 1px solid var(--c-line); }
.ask__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-6); align-items: end; }
.ask h2 { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); line-height: 1.06; margin: 0; max-width: 16ch; }
.ask__list { margin: var(--sc-8) 0 0; padding: 0; border-top: 1px solid var(--c-line); }
.ask__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--sc-6); padding: var(--sc-5) 0; border-bottom: 1px solid var(--c-line); }
.ask__row dt { font-size: var(--sc-t-lg); font-weight: 500; color: var(--sc-ink-soft); line-height: 1.35; }
.ask__row dd { margin: 0; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); }
.ask__row dd b { font-weight: 700; }
.ask__row dd small { display: block; margin-top: 6px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
@media (max-width: 760px) {
  .ask__head { grid-template-columns: 1fr; gap: var(--sc-3); }
  .ask__row { grid-template-columns: 1fr; gap: var(--sc-2); padding: var(--sc-4) 0; }
  .ask__row dt, .ask__row dd { font-size: var(--sc-t-base); }
}

/* ---------- 5 SAM AND JEN ---------- */
.people { padding-block: var(--sc-section); }
.people__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.people__photo { position: relative; margin: 0; border-radius: var(--sc-r-lg); overflow: hidden; aspect-ratio: 7 / 6; box-shadow: var(--sc-e3); background: #DCE6F2; }
.people__photo img { position: absolute; left: 0; top: -5%; width: 100%; height: 110%; object-fit: cover; object-position: 50% 30%; }
.people__photo figcaption { position: absolute; left: var(--sc-4); bottom: var(--sc-4); padding: 8px 14px; border-radius: var(--sc-r-pill); background: rgba(255, 255, 255, 0.95); font-size: 0.9rem; font-weight: 600; color: var(--sc-ink); }
.people h2 { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); line-height: 1.06; margin: 0; max-width: 17ch; }
.people__story { margin-top: var(--sc-5); }
.people__nums { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: clamp(2.5rem, 6vw, 5rem); row-gap: var(--sc-5); margin: var(--sc-7) 0 0; padding: var(--sc-5) 0 0; border-top: 1px solid var(--c-line); }
.people__nums div { display: flex; flex-direction: column; gap: 2px; }
.people__nums dt { order: 2; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
/* Reserve the counter's width so 999 -> 1,000 does not re-lay out the row each tick. */
.people__nums dd [data-sc-count] { display: inline-block; min-width: 5ch; }
.people__nums dd { order: 1; margin: 0; font-size: var(--sc-t-xl); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.quotes { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: var(--sc-5); margin-top: clamp(3.5rem, 8vw, 6.5rem); }
.quote { margin: 0; padding: var(--sc-6) var(--sc-5) var(--sc-5); background: #fff; border: 1px solid var(--c-line); border-radius: var(--sc-r-lg); display: flex; flex-direction: column; gap: var(--sc-4); }
.quote:first-child { background: var(--c-mist); border-color: transparent; }
.quote blockquote { margin: 0; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); }
.quote:first-child blockquote { font-size: var(--sc-t-xl); line-height: 1.35; }
.quote figcaption { margin-top: auto; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.quote figcaption b { display: block; color: var(--sc-ink); font-weight: 600; }
.stars { display: flex; gap: 2px; color: #E0A100; }
.stars svg { width: 16px; height: 16px; }
@media (max-width: 1100px) {
  .quotes { grid-template-columns: 1fr 1fr; }
  .quote:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .people__grid { grid-template-columns: 1fr; }
  .people__photo { max-width: 38rem; }
  .quotes { grid-template-columns: 1fr; }
}

/* ---------- 6 AREAS ---------- */
.areas { padding-block: var(--sc-section); background: #fff; border-top: 1px solid var(--c-line); }
.areas h2 { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); line-height: 1.06; margin: 0; max-width: 18ch; }
.areas__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-6) var(--sc-5); margin-top: var(--sc-8); }
.area { padding-top: var(--sc-4); border-top: 2px solid var(--sc-ink); }
/* The areas ground is white, so their wipe runs as a white cover (compositor-only). */
.areas [data-sc-reveal] { --sc-reveal-cover: #fff; }
.area h3 { margin: 0; font-size: var(--sc-t-lg); font-weight: 700; }
.area h3 a { color: inherit; text-decoration: none; }
.area h3 a:hover { color: var(--sc-accent); }
.area p { margin: 4px 0 0; font-size: var(--sc-t-sm); color: var(--sc-accent); font-weight: 600; }
.area ul { list-style: none; margin: var(--sc-4) 0 0; padding: 0; color: var(--sc-ink-soft); line-height: 1.9; }
@media (max-width: 900px) { .areas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .areas__grid { grid-template-columns: 1fr 1fr; gap: var(--sc-6) var(--sc-4); } .area ul { font-size: 0.95rem; } }
.areas__more { margin: var(--sc-7) 0 0; color: var(--sc-ink-soft); }
.areas__more a { color: var(--sc-accent); font-weight: 600; }

/* ---------- 7 MORNING ---------- */
/* The close grows with its content (never clipped on short screens) while
   still filling at least one screen, so it reads as the page's resting place. */
.morning__stage { min-height: 100svh; display: grid; place-items: center; background: radial-gradient(90% 70% at 50% 35%, #FFFFFF 0%, #F2F7FD 60%, #E6F0FB 100%); }
.morning__in { width: 100%; text-align: center; padding: calc(var(--bar-h) + clamp(1.5rem, 5vh, 3.5rem)) var(--sc-gutter) clamp(3rem, 8vh, 5rem); max-width: 52rem; }
.morning__logo { width: min(250px, 52vw, 28vh); height: auto; margin: 0 auto clamp(1.25rem, 3.5vh, 2rem); display: block; }
.morning h2 { font-size: clamp(2.3rem, 1.5rem + 3.2vw, 4.4rem); letter-spacing: var(--sc-track-tight); line-height: 1.02; margin: 0 auto; max-width: 15ch; text-wrap: balance; }
.morning p { margin: var(--sc-5) auto 0; max-width: 40ch; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); }
.morning__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sc-3); margin-top: var(--sc-7); }
.morning__actions .btn--primary { min-height: 56px; padding-inline: var(--sc-7); font-size: 1.1rem; }
.morning__small { margin-top: var(--sc-5) !important; font-size: var(--sc-t-sm) !important; }

/* ---------- footer ---------- */
.foot { background: #EEF3F9; border-top: 1px solid var(--c-line); padding: var(--sc-9) 0 var(--sc-6); font-size: 0.95rem; }
.foot__grid { display: grid; grid-template-columns: 1.2fr 0.9fr 0.9fr 1.4fr; gap: var(--sc-7); }
.foot__logo { width: 190px; height: auto; display: block; }
.foot h3 { margin: 0 0 var(--sc-3); font-size: 0.95rem; font-weight: 700; }
.foot ul { list-style: none; margin: 0; padding: 0; line-height: 2; }
.foot a { color: var(--sc-ink-soft); text-decoration: none; display: inline-block; padding-block: 3px; min-height: 24px; }
.foot a:hover { color: var(--sc-accent); text-decoration: underline; }
.foot__tag { margin: var(--sc-4) 0 0; color: var(--sc-ink-soft); max-width: 30ch; }
.foot__social { display: flex; gap: var(--sc-2); margin-top: var(--sc-4); }
.foot__social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--c-line); color: var(--sc-ink); }
.foot__social svg { width: 18px; height: 18px; }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-3); margin-top: var(--sc-8); padding-top: var(--sc-5); border-top: 1px solid var(--c-line); color: var(--sc-ink-soft); font-size: 0.85rem; }
@media (max-width: 1100px) { .foot__grid { grid-template-columns: 1fr 1fr; row-gap: var(--sc-7); } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; } .foot { padding-bottom: 96px; } }

/* ---------- mobile quick bar ---------- */
.quick { display: none; }
@media (max-width: 860px) {
  .quick {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--c-line);
    transform: translateY(110%); transition: transform 260ms var(--sc-ease-out);
  }
  .quick.is-on { transform: none; }
  .quick .btn { min-height: 46px; font-size: 0.98rem; padding-inline: var(--sc-3); }
  .quick .btn--quiet { border: 1px solid var(--c-line); }
}

/* ---------- cookie banner (rules copied from css/styles.css) ---------- */
.cookie-consent{position:fixed;bottom:0;left:0;right:0;z-index:1000;background:#1B2A4A;color:#fff;padding:16px 20px;transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.cookie-consent--visible{transform:translateY(0)}
.cookie-consent__inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
.cookie-consent__text{margin:0;font-size:.9375rem;line-height:1.5;color:rgba(255,255,255,.85)}
.cookie-consent__text a{color:#A3E4EF;text-decoration:underline}
.cookie-consent__actions{display:flex;gap:10px;flex-shrink:0}
.cookie-consent__btn{border:none;border-radius:6px;padding:10px 22px;font-family:inherit;font-size:.875rem;font-weight:600;cursor:pointer}
.cookie-consent__btn--accept{background:#1D63C9;color:#fff}
.cookie-consent__btn--decline{background:0 0;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.3)}
@media (max-width: 860px){.cookie-consent{padding:16px;bottom:62px}.cookie-consent__inner{flex-direction:column;text-align:center;gap:14px}.cookie-consent__text{font-size:.875rem}}

/* ---------- Ask Dusty chat widget (injected by greenshootsmedia.com.au, z-index 9999) ----------
   Consent first: the cookie bar sits above the widget so its buttons can always be clicked.
   On phones the suggestion bubbles are hidden (they covered content and buttons), and the
   launcher rides above the quick bar whenever the bar is showing. */
.cookie-consent { z-index: 10000; }
@media (max-width: 860px) {
  .gs-chatbot__chips { display: none !important; }
  /* On phones the widget fixes its launcher at bottom: 16px, separately from its container. */
  .gs-chatbot__trigger { transition: bottom 260ms var(--sc-ease-out); }
  /* With the bar showing, the round button docks in its right end instead of floating over content. */
  .quick { padding-right: 76px; }
  body:has(.quick.is-on) .gs-chatbot__trigger { right: 12px !important; bottom: calc(5px + env(safe-area-inset-bottom)) !important; }
}

/* ---------- focus + reduced motion ---------- */
:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 3px; border-radius: 6px; }
.pick__opt:focus-visible { outline-offset: 4px; border-radius: var(--sc-r-lg); }
@media (prefers-reduced-motion: reduce) {
  .night__stamps li, .tasks li, .tasks i, .tasks i::after, .drawer, .dd__menu, .quick { transition-duration: 1ms !important; }
  .night__stamps li { transform: none; }
}

/* ---------- phones: round chat button, compact cookie strip (as css/site.css) ----------
   The Ask Dusty pill covered lists, quotes and the closing button on phones.
   Long addresses may break anywhere only on narrow screens; on desktop the
   footer column is wide enough and "...com.au" stays whole. */
@media (max-width: 520px) { a[href^="mailto:"] { overflow-wrap: anywhere; } }
@media (max-width: 860px) {
  .gs-chatbot__chips { display: none !important; }
  .gs-chatbot__trigger--prominent {
    width: 52px !important; height: 52px !important; min-height: 0 !important; padding: 0 !important;
    justify-content: center !important; border-radius: 50% !important;
  }
  .gs-chatbot__trigger--prominent .gs-chatbot__trigger-text { display: none !important; }
  .gs-chatbot__trigger--prominent .gs-chatbot__trigger-dot { left: 34px; bottom: 5px; }
  .cookie-consent { bottom: 0 !important; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important; }
  .cookie-consent__inner { flex-direction: row !important; align-items: center !important; text-align: left !important; gap: 12px !important; }
  .cookie-consent__text { font-size: 0.8rem !important; line-height: 1.4 !important; }
  .cookie-consent__actions { flex-direction: column; gap: 6px !important; }
  .cookie-consent__btn { min-height: 40px; padding: 0 16px !important; }
  body:has(.cookie-consent--visible) .quick,
  body:has(.cookie-consent--visible) .gs-chatbot { visibility: hidden; }
  .areas .sc-reveal-cover { display: none; }
}
/* The clock and the counter keep a fixed slot so they never re-lay out; the
   slack goes on the left, not as a gap before "pm" or the "+". */
.night__clock b { text-align: right; }
.people__nums dd [data-sc-count] { min-width: 0; }

/* ---------- 6 Oct 2026 review fixes ----------
   Suggestion bubbles hidden and chat held behind the cookie strip at every
   width (both covered content on desktop); reduced motion shows wipe reveals
   at once instead of a half-wiped word. */
.gs-chatbot__chips { display: none !important; }
body:has(.cookie-consent--visible) .gs-chatbot { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .sc-reveal-cover { display: none !important; }
  [data-sc-reveal] { clip-path: none !important; }
}