/* spareday homepage hero: the water light (released 2026-10-02, Reece's round 108 pick, card 1 "a little stronger").
   Round 100's Pool light, polished (rounds 107-108): it settles in on a first visit, sits calmer behind the words, fades
   at its edges and on scroll, has no banding, and reacts a little to the mouse (a tap on a phone). Replaces the pen and
   its phrases (released 2026-09-30, retired by Reece on rounds 104-106). Kept from that release: the side-by-side phone
   buttons, ivory tone and the polish pack he took. Source and proof: spareday-website branch hero-final3-source,
   mockups/hero-waves-2026-10-02 (DECISIONS.md, VERIFY.md). Script: hero-water.js. */
/* Shared effect layer: the height of the first screen, full width, never catches taps, never adds sideways scroll. */
.fx{position:absolute;top:0;left:0;right:0;height:100svh;pointer-events:none;overflow:hidden;}
.fx canvas,.fx svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.fx-over{z-index:4;}   /* light that falls ON the page (over the words too, like real light) */
.fx-under{z-index:1;}  /* things that sit BEHIND the words */
.fx{opacity:0;animation:fxin 1.6s ease .2s forwards;}
@keyframes fxin{to{opacity:1}}
@media (prefers-reduced-motion: reduce){.fx{animation:none;opacity:1;}}

/* PHONE POLISH (round 99, every card). Reece on round 98: "on mobile, the contact us and free quote CTA
   placement is terrible ... it just looks a bit clunky and doesnt look polished".
   Cause, measured on the live page: the round-58 "buttons step up" sizes (.hero-cta 1.15rem 2.6rem,
   .hero-ghost 1.1rem 2.2rem) sit AFTER the 430px phone sizes in the stylesheet, so phones get computer-sized
   pills. They no longer fit one row, wrap into two uneven pills of different widths and heights with a big gap.
   Fix: one tidy pair on phones, the quote button a little wider, both the same height and type size, and the
   reviews line kept on one row beside the faces instead of stacking into three. Approved for release by Reece
   on round 102 (card 4, TAKE). */
@media (max-width:560px){
  .hero .hero-ctas{display:grid;grid-template-columns:1.3fr 1fr;gap:.55rem;margin-top:1.35rem;width:100%;max-width:26rem;}
  .hero .hero-ctas .hero-cta,.hero .hero-ctas .hero-ghost{display:flex;align-items:center;justify-content:center;
    box-sizing:border-box;min-height:3.3rem;padding:.85rem .6rem;font-size:.95rem;line-height:1.1;white-space:nowrap;text-align:center;}
  .hero .hero-ctas .hero-ghost{border-color:rgba(20,20,18,.55);}
  .hero .hero-ctas .aside{display:none;}
  .hero .hero-proof{flex-wrap:nowrap;gap:.7rem;margin-top:1.15rem;}
  .hero .hero-proof .txt{min-width:0;}
  .hero .hero-proof .who{font-size:.78rem;line-height:1.35;}
}
@media (max-width:374px){
  .hero .hero-ctas .hero-cta,.hero .hero-ctas .hero-ghost{font-size:.9rem;padding:.8rem .45rem;}
}

/* Newcastle: "love," never splits from its comma (live, at 360 wide the comma sat alone on its own line) */
.hero h1 .nw{white-space:nowrap;}

/* TONE: Ivory (round 100). Where the warm, approachable premium sites sit when measured (claude.com #FAF9F5,
   Readwise #FBF9F3, Mercury #F6F5F2): a barely-warm off-white, chroma about 0.006 on the OKLCH scale, hue 85-95.
   The live page's cold cast is two things: a violet hue (303-315) and corners dimmed to L .88. Here the hue is warm
   ivory and the corners are only lightly deepened (L about .95), so the page stays bright. theme: #F4F3EE */
body{
  --tone:
    radial-gradient(56% 52% at 100% 100%, rgba(236,226,218,.26), transparent 74%),
    radial-gradient(48% 44% at 0% 100%, rgba(236,226,218,.20), transparent 74%),
    linear-gradient(#fffefb, #fffefb);
}

html{background-color:#F4F3EE;}

/* POLISH PACK, ROUND 101 (2026-09-30): only the details Reece took on round 100 (14 pressed buttons, 16 top bar on a
   phone, 17 local time moved off the hero, 18 faces open, 20 number copies, 21 highlighter). Dropped on his word: 15 the
   letter-by-letter changing word ("dont like it compared to whats on there now"), 19 the pause button ("no"), 22 the
   magnetic quote button ("too much").
   Round 100 notes follow. POLISH PACK (round 100, 2026-09-29). Reece: "what are some extra polish things, small little details ... top 1%,
   top 0.1% details and features that would really take this to the next level? I want to see those in the next
   mock-ups". Sources: Emil Kowalski's design-engineering rules (Vercel, Linear), Vercel's Web Interface Guidelines,
   Apple's autoplay pause control, WCAG 2.2.2. Research note: 02_areas/Business/spareday/research/
   hero-tone-and-polish-details-2026-09-29.md. Every rule here is on every card; the polish cards show each one up close. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);}
html{-webkit-tap-highlight-color:transparent;}

/* P2 Buttons that feel pressed: a quick press-down, a soft lift on hover with a warm (not grey) shadow, and an arrow
   that slides in on "Get a free quote". Press 90ms, lift 180ms, strong ease-out. */
.hero-cta,.hero-ghost,.nav-cta{touch-action:manipulation;
  transition:transform .18s var(--ease-out),box-shadow .3s var(--ease-out),background-color .2s ease,color .2s ease;}
.hero-cta{position:relative;
  box-shadow:0 1px 1px rgba(64,44,24,.08),0 8px 16px -8px rgba(64,44,24,.28),0 22px 36px -22px rgba(64,44,24,.32);}
.hero-cta .lbl{display:inline-block;transition:transform .34s var(--ease-out);}
.hero-cta .arw{position:absolute;top:50%;right:1.2rem;width:15px;height:15px;margin-top:-7.5px;opacity:0;
  transform:translateX(-7px);transition:opacity .22s ease,transform .34s var(--ease-out);}
.hero-cta .arw path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
@media (hover:hover) and (pointer:fine){
  .hero-cta:hover{transform:translateY(-1px);
    box-shadow:0 1px 1px rgba(64,44,24,.08),0 12px 22px -10px rgba(64,44,24,.32),0 30px 46px -24px rgba(64,44,24,.36);}
  .hero-cta:hover .lbl{transform:translateX(-9px);}
  .hero-cta:hover .arw{opacity:1;transform:none;}
  .hero-ghost:hover,.nav-ghost:hover{transform:translateY(-1px);}
}
.hero-cta:active,.hero-ghost:active,.nav-cta:active{transform:scale(.97);transition-duration:.09s;}

/* Keyboard users get a neat ring that follows the pill (not the browser's default box) */
.hero-cta:focus-visible,.hero-ghost:focus-visible,.nav-cta:focus-visible,.nav-phone:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;}

/* P9 Typesetting: no single word stranded on the paragraph's last line; kerning and ligatures on */
.hero-sub{text-wrap:pretty;}
.hero h1{font-kerning:normal;text-rendering:optimizeLegibility;}

/* P4 The header settles as you scroll: a hairline and a soft shadow once the page moves; on a phone it slides away
   while you read down and comes back the moment you scroll up. The call bar stays, clear of the iPhone home bar. */
header{transition:transform .42s var(--ease-out),box-shadow .3s ease;}
header.scrolled{box-shadow:0 1px 0 rgba(48,36,24,.07),0 10px 26px -20px rgba(48,36,24,.22);}
@media (max-width:700px){header.away{transform:translateY(-105%);}}
@media (max-width:700px){.callbar{padding-bottom:calc(env(safe-area-inset-bottom, 0px) + .9rem);}}

/* P5 Local time in Newcastle, ROUND 101: moved off the header into the footer's address block (Reece on round 100:
   "maybe a bit sublter somewhere else on the page so it doesnt affect CTR"). Same small label style as the address. */
.foot-nap .lt{font-variant-numeric:tabular-nums;}

/* P6 The faces under the button open on hover or tap: the three circles spread a little and a small card shows who
   it is and that the review is a five-star Google review. The card opens to the RIGHT, over the five-star line it sums up: above it covered the quote button, below it fell
   off the first screen on a computer. */
.hero-proof .pile{position:relative;}
.hero-proof .pile .face{transition:transform .34s var(--ease-out),box-shadow .3s ease;cursor:default;}
@media (hover:hover){.hero-proof .pile:hover .face:nth-child(1){transform:translateX(-3px);}
  .hero-proof .pile:hover .face:nth-child(3){transform:translateX(3px);}}
.hero-proof .pile .face.on{transform:translateY(-3px) scale(1.08)!important;box-shadow:0 8px 18px -8px rgba(48,36,24,.4);z-index:3;position:relative;}
.facecard{position:absolute;left:calc(100% + 12px);top:50%;z-index:6;pointer-events:none;
  background:color-mix(in srgb,var(--paper) 94%,#fff);border:1px solid rgba(20,20,18,.08);border-radius:12px;
  padding:.5rem .75rem .55rem;white-space:nowrap;
  box-shadow:0 1px 1px rgba(48,36,24,.05),0 14px 30px -16px rgba(48,36,24,.35);
  opacity:0;transform:translate(-6px,-50%) scale(.97);transform-origin:0 50%;
  transition:opacity .2s ease,transform .26s var(--ease-out);}
.facecard.on{opacity:1;transform:translate(0,-50%);}
.facecard b{display:block;font-weight:400;font-size:.86rem;color:var(--ink);letter-spacing:-.005em;}
.facecard span{display:block;margin-top:.15rem;font-size:.74rem;color:var(--muted);}
.facecard span i{font-style:normal;color:#E7A91E;letter-spacing:.06em;margin-right:.35rem;}

/* P8 On a computer, clicking the phone number copies it (a computer cannot call it) and says so */
.nav-phone{position:relative;}
.copied{position:absolute;left:50%;top:calc(100% + 8px);transform:translate(-50%,-3px);opacity:0;pointer-events:none;
  font-family:var(--sans,inherit);font-size:.72rem;letter-spacing:.01em;white-space:nowrap;color:var(--paper);background:var(--ink);
  border-radius:999px;padding:.32rem .7rem;transition:opacity .18s ease,transform .26s var(--ease-out);}
.copied.on{opacity:1;transform:translate(-50%,0);}

/* P10 Highlighting text looks like a highlighter pen (the pen is part of the page), not a black block */
::selection{background:rgba(246,205,138,.55);color:var(--ink);}