/* Fraunces — SIL OFL 1.1 (fraunces-OFL.txt), Fontsource's Latin subset, served by the site itself.
   The renderer prepends this file to css/look.css and copies the woff2 files to fonts/,
   so the url() is relative to css/. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/fraunces-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Source Sans 3 — SIL OFL 1.1 (source-sans-3-OFL.txt), Fontsource's Latin subset, served by the site itself.
   The renderer prepends this file to css/look.css and copies the woff2 files to fonts/,
   so the url() is relative to css/. */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(../fonts/source-sans-3-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Look: Clear Water. A premium service that sells calm: pool and spa, cleaning, landscaping.
   One idea: the water. A light warm page with a lot of air, a deep blue that the photos sink
   into, one "deep end" band with light moving on it, and nothing sharp.
   Grown from B64's fresh (the pill buttons, the rounded frames, the round numerals are fresh's)
   with the prototype's Fraunces and its deep end (research/2026-10-23-site-quality/prototype).
   Tokens first; the rules after them are this look's bounded set: the kicker mark, the hero's
   buttons and frames, the blocks, the form card, the band and the one hero moment. */

:root {
  --bg: #fbfaf7;
  --bg-raised: #ffffff;
  --bg-alt: #e6f2f4;
  --bg-line: #d3e1e6;
  --ink: #0d2633;
  --ink-dim: #4b6370;
  --accent: #0a6684;
  --accent-strong: #074e66;
  --accent-ink: #ffffff;
  --band: #062a3d;
  --band-ink: #eef7fa;
  --band-dim: #a9c6d1;
  --band-accent: #8fdcf0;
  /* the hero's own pair, as literals so a checker reads the pair the page shows: band-ink on the deep end */
  --hero-ground: #062a3d;
  --hero-ink: #eef7fa;
  --hero-dim: #a9c6d1;
  --hero-accent: #8fdcf0;
  --hero-scrim: #062a3d;
  --footer-bg: var(--band);
  --footer-ink: #c3d8e0;
  --rule-strong: 1px solid color-mix(in srgb, var(--accent) 40%, var(--bg-line));
  /* light on water: a soft highlight and three slow wave lines, drawn here so no file is fetched */
  --texture:
    radial-gradient(80% 120% at 85% 0%, rgb(143 220 240 / 0.18), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='96' viewBox='0 0 240 96'%3E%3Cg fill='none' stroke='%23bfeaf5' stroke-opacity='.09' stroke-width='1.5'%3E%3Cpath d='M0 24q30-12 60 0t60 0 60 0 60 0'/%3E%3Cpath d='M-30 72q30-12 60 0t60 0 60 0 60 0 60 0'/%3E%3C/g%3E%3C/svg%3E");

  --font-display: "Fraunces", Georgia, serif;
  --font-text: "Source Sans 3", system-ui, sans-serif;
  --font-kicker: var(--font-text);
  --font-button: var(--font-text);
  --display-weight: 340;
  --heading-weight: 380;
  --display-tracking: -0.025em;
  --display-leading: 0.98;
  --kicker-case: none;
  --kicker-tracking: 0.01em;
  --kicker-weight: 600;
  --kicker-size: var(--step--1);
  --text-size: 1.125rem;
  --step-5: clamp(3rem, 1.4rem + 6.2vw, 6rem);

  --radius: 12px;
  --radius-card: 22px;
  --radius-btn: 999px;
  --radius-media: 22px;
  --section-pad: clamp(4.5rem, 3rem + 6vw, 9rem);
  --shadow-2: 0 1px 2px rgb(13 38 51 / 0.05), 0 30px 60px -28px rgb(10 102 132 / 0.35);
}

/* Kickers: sentence case after a small ring, a float on the water line. */
.kicker, .hero-kicker { display: flex; align-items: center; gap: 0.55rem; }
.kicker::before, .hero-kicker::before {
  content: ""; flex: none; width: 0.65rem; height: 0.65rem; border: 2px solid currentColor; border-radius: 50%;
}
.wordmark { font-weight: 420; }

/* Hero: on a photo the main button turns white, so it reads against any water. */
.hero--full-dark .btn-primary { background: #ffffff; color: var(--band); }
.hero--full-dark .btn-primary:hover { background: #dff4f9; color: var(--band); }
.hero--full-dark .hero-heading em { font-weight: 300; }
.hero--band-card .hero-media, .hero--split .hero-media { border-radius: 0 0 var(--radius-media) var(--radius-media); }
.hero--split .hero-media { margin: 0 var(--page-pad) var(--page-pad); border-radius: var(--radius-media); }
@media (min-width: 56em) {
  .hero--split .hero-media { margin: var(--space-2) var(--page-pad) var(--space-2) 0; }
}
.hero--typographic .hero-heading { font-weight: 300; }

/* Proof: a quiet aqua line under the water. */
.proof--strip .proof-list { font-weight: 500; }
.proof--strip li::before { width: 0.4rem; height: 0.4rem; }

/* Services: light numerals as display type; fresh's round numerals on the blocks. */
.service-n { font-weight: 300; color: color-mix(in srgb, var(--accent) 72%, var(--band-accent)); }
.services--blocks .service-list { gap: 1rem; }
/* flat pools of colour, not floating cards: a shadow on every card is the template tell */
.services--blocks .service-list li { border-radius: var(--radius-card); background: var(--bg-alt); }
.services--blocks.alt .service-list li { background: var(--bg-raised); }
.services--blocks .service-n {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font: 600 var(--step--1)/1 var(--font-text); letter-spacing: 0;
}

/* The deep end: the one dark band; pictures float on it. */
.band .about-media img, .band .section-media img { box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.5); }
.place-list li { font-weight: 360; }

/* Forms float; times are soft tiles; the full calendar rules its days in aqua. */
.slot-time { font-weight: 420; }
.contact-card { background-image: var(--texture); }

/* The one moment: as the fonts arrive, the hero photo settles, like water going still.
   It starts at 106% and is whole the whole time. */
@media (prefers-reduced-motion: no-preference) {
  html.motion .hero-block .hero-media img { transform: scale(1.06); transition: transform var(--dur-moment) var(--ease); }
  html.motion body.is-ready .hero-block .hero-media img { transform: none; }
}