/* Bluecrest Pool Service — bluecrest.noahlot.com
   White ground, aqua and deep navy, water-light. Outfit everywhere;
   Caveat ONLY where Gail literally wrote something (the gate note).
   Rounded (12–24px) but never pill-shaped. The hero IS the gate note. */

/* Palette, sampled from the five photographs (PIL medianCut; proportions read
   off each frame, not eyeballed). Gail's own artifacts still outrank a sampled
   swatch -- white, aqua and navy come off her truck lettering and her shop
   door -- so the photographs were only allowed to correct the NEUTRALS:
     navy    #003DB6  40.1% of pool-edge        -> kept Gail's #0A2E40
     aqua    #16B1D3  40.4% of water-caustics   -> kept Gail's #54C4DB highlight
     ink     #192129  21.5% of test-kit         -> --ink corrected toward it
     chalk   #DEDDD8  16.9% of pool-edge coping -> --coping / --mist corrected
     bone    #E2E0DA  17.2% of pool-edge        -> --line corrected
     reagent #A4679D   0.8% of the test-kit comparator block -> the one accent,
                                                    spent once, on one rule. */
:root{
  --white:#FFFFFF;
  --mist:#EDF6F8;          /* water-tinted off-white */
  --coping:#E3F1F4;        /* the pale tile edge around the pool */
  --navy:#0A2E40;
  --ink:#16323F;
  --muted:#47626E;
  --line:#D3E5EA;
  --aqua:#0E7E96;          /* buttons, labels — passes 4.5:1 on white at weight */
  --aqua-dk:#0A657A;
  --aqua-hi:#54C4DB;       /* light accent on navy ground only */
  --water-1:#4BC0D8;
  --water-2:#0F7D97;
  --water-3:#0A6880;

  /* vertical rhythm (local trade genre, per spacing.md):
     base 112px between sections (TruGreen register);
     grand 192px = 1.7x base, spent ONCE, before the gate-note visit
     section — the artifact the whole business rides on;
     tight 80px = 0.7x, packing the season pitch against that proof.
     Constant-beat legality: the ABAB white/mist/navy surface
     alternation carries the polyphony. */
  --rhythm-tight: clamp(3.5rem, 5.6vw, 5rem);
  --rhythm-base: clamp(4.5rem, 7.8vw, 7rem);
  --rhythm-grand: clamp(7.5rem, 13.4vw, 12rem);

  --r:12px;
  --r-lg:18px;
  --r-pool:26px;
  --wrap:1160px;
  --sans:"Outfit",system-ui,sans-serif;
  --hand:"Caveat","Segoe Script",cursive;

  /* neutrals corrected by the photographs */
  --chalk:#DEDDD8;
  --bone:#E2E0DA;
  --reagent:#A4679D;   /* 0.8% of one frame. Appears exactly once. */

  /* Grain is a material here, not an effect: it lies over every photographic
     ground and it raises apparent text contrast on the photo as well. */
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:150px}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--aqua)}
h1,h2,h3{color:var(--navy); line-height:1.08; margin:0; letter-spacing:-.02em}

.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}

/* ── Buttons ─────────────────────────────────────────── */
.btn{
  display:inline-block; border:1px solid transparent; border-radius:var(--r);
  font-family:var(--sans); font-weight:600; font-size:.92rem; letter-spacing:.005em;
  padding:.68rem 1.15rem; text-decoration:none; cursor:pointer;
  transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-solid{background:var(--aqua); color:#fff; box-shadow:0 1px 0 rgba(10,46,64,.2)}
.btn-solid:hover{background:var(--aqua-dk); transform:translateY(-1px); box-shadow:0 6px 18px rgba(10,101,122,.3)}
.btn-lg{font-size:1.04rem; padding:.9rem 1.55rem}
.btn-ghostlite{border-color:rgba(255,255,255,.4); color:#fff; background:transparent}
.btn-ghostlite:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.7)}
:focus-visible{outline:3px solid var(--aqua-hi); outline-offset:2px}

/* ── Top stack: for-sale banner + header ─────────────── */
.topstack{position:sticky; top:0; z-index:60}

.forsale{background:var(--navy); color:#C9DEE7; border-bottom:2px solid var(--aqua-hi)}
.forsale-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.5rem 0; font-size:.8rem;
}
.forsale p{margin:0}
.forsale-txt strong{color:#fff; font-weight:600}
.forsale-detail{color:#8FB3C2}
.forsale-buy{display:flex; align-items:center; white-space:nowrap}
.forsale-buy a{
  font-weight:600; font-size:.82rem; color:var(--navy); background:var(--aqua-hi);
  text-decoration:none; border-radius:8px; padding:.28rem .7rem;
  transition:background-color .18s ease;
}
.forsale-buy a:hover{background:#7FD6E7}

.site-head{
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex; align-items:center; gap:1.4rem; min-height:66px}
.mark{
  display:flex; align-items:center; gap:.55rem; color:var(--navy);
  font-weight:700; font-size:1.16rem; letter-spacing:-.025em;
  text-decoration:none; margin-right:auto;
}
.mark svg{color:var(--aqua); flex:none}
.nav{display:flex; gap:1.25rem}
.nav a{
  font-size:.87rem; font-weight:500; color:var(--ink); text-decoration:none;
  padding:.2rem 0; border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.nav a:hover{color:var(--aqua); border-bottom-color:var(--aqua)}
.head-cta{display:flex; align-items:center; gap:.85rem}
.tel{
  font-weight:600; font-size:.98rem; color:var(--navy);
  text-decoration:none; letter-spacing:-.005em; white-space:nowrap;
}
.tel:hover{color:var(--aqua)}
.menu{display:none; background:none; border:0; padding:.4rem; cursor:pointer}
.menu span{display:block; width:22px; height:2px; background:var(--navy); margin:4px 0; transition:.2s}
.menu[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── Hero: the gate note ─────────────────────────────── */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(2.75rem,6vw,5rem) 0 clamp(2.25rem,4vw,3.25rem);
  background:var(--mist);
  border-bottom:1px solid var(--line);
}
/* A photograph carries the hero: pool-surface caustics, washed back hard on the
   copy side so the type lands on near-white, left at strength behind the gate
   note where nothing but the opaque card touches it. */
.hero-ground{
  position:absolute; inset:-5%; z-index:0;
  background-image:
    linear-gradient(101deg,
      rgba(255,255,255,.975) 0%,  rgba(255,255,255,.958) 31%,
      rgba(255,255,255,.87)  47%, rgba(255,255,255,.64)  61%,
      rgba(240,250,252,.48) 100%),
    url("../img/hero-water.webp");
  background-size:auto, cover;
  background-position:center, 52% 46%;
  transform:scale(1.035);
  animation:causticDrift 52s cubic-bezier(.45,0,.55,1) infinite alternate;
  will-change:transform;
}
/* Vignette toward the coping white, never toward black -- this page stays airy
   -- plus the grain. Static: only the ground beneath it drifts. */
.hero-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    radial-gradient(118% 96% at 52% 44%,
      rgba(255,255,255,0) 40%, rgba(233,245,248,.5) 76%, rgba(212,232,238,.9) 100%),
    var(--grain);
  background-size:auto, 160px 160px;
  opacity:.9;
}
.hero > .wrap{position:relative; z-index:2}
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(2.25rem,5vw,4.75rem); align-items:center;
}
.hero h1{
  font-size:clamp(2.3rem,5.2vw,3.9rem); font-weight:700; letter-spacing:-.032em;
  max-width:14ch;
}
.hero .lede{
  color:var(--muted); max-width:52ch;
  margin:1.15rem 0 0; font-size:clamp(1.02rem,1.4vw,1.16rem); line-height:1.65;
}
.hero-offer{
  margin-top:1.9rem; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.35rem 1.5rem; max-width:31rem;
  box-shadow:0 16px 40px -28px rgba(10,46,64,.5);
}
.offer-price{margin:0 0 .95rem; font-size:1.08rem; color:var(--muted)}
.offer-price strong{color:var(--navy); font-weight:700; letter-spacing:-.015em}
.hero-acts{display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap}
.tel-lg{
  font-weight:600; font-size:1.02rem; color:var(--navy); text-decoration:none;
  border-bottom:2px solid var(--aqua-hi); padding-bottom:.06rem; white-space:nowrap;
  transition:color .18s, border-color .18s;
}
.tel-lg:hover{color:var(--aqua); border-bottom-color:var(--aqua)}
.daychip{
  margin:1.05rem 0 0; font-size:.88rem; font-weight:500; color:var(--aqua-dk);
  padding-top:.9rem; border-top:1px dashed var(--line);
}
.hero-trust{
  margin:1.5rem 0 0; font-size:.84rem; font-weight:500;
  color:var(--muted); letter-spacing:.01em;
}

.gatenote{position:relative; margin:0; padding-top:16px}
.gatenote-clip{
  position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:2;
}
.gatenote-card{
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  padding:2.1rem 1.9rem 1.6rem;
  transform:rotate(-1.6deg);
  box-shadow:0 24px 55px -28px rgba(10,46,64,.5), 0 2px 6px rgba(10,46,64,.08);
  background-image:repeating-linear-gradient(
    180deg, transparent 0 2.05rem, var(--coping) 2.05rem calc(2.05rem + 1px));
  background-position:0 .05rem;
}
.gatenote-card p{
  font-family:var(--hand); font-weight:500; color:var(--ink);
  font-size:1.38rem; line-height:2.05rem; margin:0;
}
.gn-when{color:var(--aqua-dk); font-weight:600}
.gn-sign{font-weight:600}
.gn-sign span{color:var(--aqua-dk); font-size:1.55rem}
.gatenote figcaption{
  margin:1.15rem auto 0; max-width:34ch; text-align:center;
  font-size:.86rem; color:var(--muted); line-height:1.5;
}

/* ── Section frame ───────────────────────────────────── */
/* half-base each side: section-to-section gap = one base beat (112px) */
.sec{padding:calc(var(--rhythm-base) / 2) 0}

/* hero -> first section is glued: 0.5x base, the offer ribbon pattern */
#route{padding-top:1.75rem}

/* the GRAND pause: 192px of air before Gail's gate note (the visit log),
   then the season pitch packs tight (0.7x) against that proof */
#visit{
  padding-top:calc(var(--rhythm-grand) - var(--rhythm-base) / 2);
  padding-bottom:calc(var(--rhythm-tight) / 2);
}
#season{padding-top:calc(var(--rhythm-tight) / 2)}

/* pre-footer compresses to ~0.7x base; the navy footer's own padding closes */
#contact{padding-bottom:calc(var(--rhythm-tight) / 2 + 1rem)}
.sec-alt{background:var(--mist); border-block:1px solid var(--line)}
/* The inversion: this section's ground is a photograph rather than a hex --
   deep water against the coping -- with stronger grain and mid-size text. */
.sec-ink{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--navy); color:#D7E7EE;
}
.ink-ground{
  position:absolute; inset:-5%; z-index:0;
  background-image:
    radial-gradient(125% 105% at 46% 48%,
      rgba(10,46,64,.74) 0%, rgba(9,40,57,.86) 56%, rgba(7,32,46,.94) 100%),
    url("../img/pool-caustics.webp");
  /* zoomed past the pale board wedge in the lower-left of the frame, so the
     third column's text never lands on the one near-white region */
  background-size:auto, 172% auto;
  background-position:center, 84% 40%;
  transform:scale(1.035);
  animation:causticDrift 74s cubic-bezier(.45,0,.55,1) infinite alternate;
  will-change:transform;
}
.ink-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:var(--grain);
  background-size:150px 150px;
  opacity:.4;                    /* stronger than the hero's grain */
  mix-blend-mode:soft-light;
}
.sec-ink > .wrap{position:relative; z-index:2}
.sec-ink h2,.sec-ink h3,.sec-ink strong{color:#fff}

.lbl{
  font-size:.8rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--aqua); margin:0 0 2.1rem;
  display:flex; align-items:center; gap:.9rem;
}
.lbl::after{content:""; flex:1; height:1px; background:var(--line)}
.sec-ink .lbl{color:#6FD3E7}   /* measured 5.02:1 on the photographic ground */
.sec-ink .lbl::after{background:rgba(255,255,255,.16)}

.big{
  font-size:clamp(1.8rem,3.4vw,2.7rem); font-weight:700; letter-spacing:-.03em;
  max-width:18ch; line-height:1.08;
}

/* ── Route days ──────────────────────────────────────── */
.route-intro{
  display:grid; grid-template-columns:1.12fr .88fr;
  gap:clamp(1.75rem,4vw,3.25rem); align-items:center;
  margin:0 0 2.4rem;
}
.route-lede{font-size:1.14rem; color:var(--ink); max-width:46ch; margin:0}
.route-fig{margin:0}
.route-fig img{
  width:100%; aspect-ratio:16/10; object-fit:cover; object-position:50% 40%;
  border-radius:var(--r-pool);
  box-shadow:0 22px 48px -30px rgba(10,46,64,.6);
}
.route-fig figcaption{
  margin:.85rem 0 0; font-size:.8rem; color:var(--muted); line-height:1.5;
}
.days{
  list-style:none; margin:0; padding:0; counter-reset:none;
  display:grid; grid-template-columns:repeat(5,1fr); gap:.9rem;
}
.days li{
  position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.15rem 1.15rem 1.9rem; overflow:hidden;
}
.days li::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:9px;
  background:linear-gradient(90deg,var(--water-1),var(--water-2));
}
.day-name{display:block; font-weight:700; font-size:1.06rem; color:var(--navy); letter-spacing:-.015em}
.day-towns{display:block; margin-top:.35rem; font-size:.92rem; color:var(--muted); line-height:1.45}
.days li.today{background:var(--mist); border-color:var(--aqua)}
.days li.today::after{height:14px}
.days li.today .day-name::after{
  content:"Today"; margin-left:.5rem; font-size:.68rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--aqua);
  border:1px solid var(--aqua); border-radius:6px; padding:.1rem .38rem;
  position:relative; top:-.14em;
}
.route-notes{
  margin-top:2.25rem; display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.75rem 2.25rem;
}
.route-notes p{margin:0; font-size:.99rem; color:var(--muted)}
.route-notes strong{color:var(--navy); font-weight:600}

/* ── Services ────────────────────────────────────────── */
.svc{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  grid-template-columns:repeat(3,1fr);
}
.svc li{background:var(--white); padding:1.6rem 1.6rem 1.5rem; display:flex; flex-direction:column}
.svc h3{font-size:1.22rem; font-weight:600; letter-spacing:-.02em}
.svc p{margin:.7rem 0 0; font-size:.99rem; color:var(--muted)}
.rate{
  margin-top:auto !important; padding-top:1.1rem;
  font-weight:600; font-size:.95rem; color:var(--navy) !important;
  letter-spacing:-.01em;
}
.rate::before{
  content:""; display:block; width:28px; height:3px;
  background:var(--aqua-hi); margin-bottom:.7rem; border-radius:2px;
}

/* ── A weekly visit ──────────────────────────────────── */
.visit-grid{display:grid; gap:clamp(2rem,4.5vw,4.5rem); grid-template-columns:1.05fr .95fr; align-items:start}
.visit-copy > p{margin:0 0 1.4rem; max-width:52ch; color:var(--muted); font-size:1.05rem}
.steps{margin:0; padding:0; list-style:none; counter-reset:step; max-width:34rem}
.steps li{
  counter-increment:step; position:relative;
  padding:.62rem 0 .62rem 2.5rem; border-bottom:1px solid var(--line);
  font-size:1.02rem; color:var(--ink);
}
.steps li::before{
  content:counter(step); position:absolute; left:0; top:.68rem;
  width:1.62rem; height:1.62rem; border-radius:8px;
  background:var(--mist); color:var(--aqua); border:1px solid var(--line);
  font-size:.82rem; font-weight:600; display:grid; place-items:center;
}
.visit-fine{
  font-size:.99rem; color:var(--muted); margin:1.5rem 0 0 !important; max-width:48ch;
  padding-left:1rem; border-left:3px solid var(--aqua-hi);
}

/* The visit-log facsimile */
.log{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.6rem 1.7rem;
  box-shadow:0 18px 44px -26px rgba(10,46,64,.4);
}
.log-head{
  margin:0 0 1.1rem; display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--aqua);
}
.log-head span{font-weight:500; letter-spacing:.02em; text-transform:none; color:var(--muted); font-size:.86rem}
.log-checks{list-style:none; margin:0; padding:0}
.log-checks li{
  position:relative; padding:.42rem 0 .42rem 1.7rem; font-size:.99rem; color:var(--ink);
  border-bottom:1px dashed var(--line);
}
.log-checks li::before{
  content:""; position:absolute; left:.1rem; top:.78rem; width:.72rem; height:.42rem;
  border-left:2.5px solid var(--aqua); border-bottom:2.5px solid var(--aqua);
  transform:rotate(-45deg);
}
.log-readings{
  margin:1.2rem 0 0; display:grid; grid-template-columns:repeat(6,1fr); gap:.5rem;
}
.log-readings > div{
  background:var(--mist); border-radius:10px; padding:.55rem .3rem .5rem; text-align:center;
}
.log-readings dt{font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.log-readings dd{margin:.15rem 0 0; font-weight:700; font-size:.98rem; color:var(--navy); letter-spacing:-.01em}
.log-note{
  font-family:var(--hand); font-weight:500; margin:1.25rem 0 0;
  font-size:1.32rem; color:var(--ink); line-height:1.5;
}
.gn-initials{color:var(--aqua-dk); font-weight:600}
.log-tech{
  display:block; margin:.5rem 0 0;
  font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--aqua);
}

/* Scattered photographic assets, to the composition rule: the LARGER frame
   sits lower, the smaller one rides on top of it, and a hard margin of safety
   is kept around every word -- no type ever crosses either photograph. */
.scatter{
  margin-top:clamp(2.5rem,5.5vw,4.25rem);
  display:grid; grid-template-columns:1.32fr 1fr;
  gap:clamp(1rem,2.5vw,2rem); align-items:end;
}
.sc{
  margin:0; position:relative; border-radius:var(--r-pool); overflow:hidden;
  box-shadow:0 26px 56px -34px rgba(10,46,64,.65);
}
.sc img{width:100%; display:block; transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.sc:hover img{transform:scale(1.035)}
.sc-lg{grid-column:1; z-index:1; margin-top:clamp(1.5rem,4vw,3.25rem)}
.sc-sm{grid-column:2; z-index:2; align-self:start; margin-left:clamp(-3.25rem,-3.5vw,-1rem)}
.scatter-cap{
  grid-column:1 / -1; margin:1.55rem 0 0; max-width:44ch;
  font-size:.99rem; color:var(--muted);
  padding-left:1rem; border-left:3px solid var(--reagent);
}

/* ── Openings and closings ───────────────────────────── */
.season-grid{display:grid; grid-template-columns:1fr 1fr .9fr; gap:clamp(1.75rem,4vw,3.5rem)}
.season-col h3{font-size:clamp(1.4rem,2.2vw,1.72rem); font-weight:600; letter-spacing:-.022em}
.season-col .season-dates{
  margin:.6rem 0 1rem; font-weight:600; font-size:1rem; letter-spacing:.02em;
  color:#BFEFF9;   /* measured 4.66:1 against the brightest ground behind it */
}
.season-col p{margin:0; font-size:1.09rem; line-height:1.62; color:#DCEAF0; max-width:44ch}
.season-note{
  border-left:1px solid rgba(255,255,255,.16); padding-left:clamp(1.5rem,3vw,2.5rem);
  align-self:center;
}
.season-note p{font-size:1.12rem}
.season-act{margin-top:1.4rem !important}

/* ── Service area ────────────────────────────────────── */
.area-lede{
  margin:-1rem 0 2rem; font-size:1.14rem;
  max-width:52ch; color:var(--ink);
}
.towns{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:.1rem 1.5rem;
}
.towns li{
  font-size:.95rem; font-weight:500; color:var(--ink);
  padding:.55rem 0; border-bottom:1px solid var(--line);
}
.area-note{margin:2rem 0 0; font-size:1rem; color:var(--muted); max-width:52ch}

/* ── Contact ─────────────────────────────────────────── */
.contact-grid{display:grid; gap:clamp(2.25rem,5vw,4.5rem); grid-template-columns:1fr .9fr; align-items:start}
.contact-lede{margin:1.3rem 0 0; font-size:1.08rem; max-width:46ch; color:var(--muted)}
.bigtel{margin:1.8rem 0 0}
.bigtel a{
  font-weight:700; letter-spacing:-.035em;
  font-size:clamp(1.9rem,4.2vw,2.7rem); color:var(--navy); text-decoration:none;
  border-bottom:4px solid var(--aqua-hi); padding-bottom:.1rem;
  transition:color .18s, border-color .18s;
}
.bigtel a:hover{color:var(--aqua); border-bottom-color:var(--aqua)}
.meta{margin:2rem 0 0; display:grid; gap:.1rem}
.meta > div{display:flex; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--line)}
.meta dt{font-size:.78rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); flex:0 0 84px; padding-top:.2em}
.meta dd{margin:0; font-size:1rem}
.who{
  margin:2.1rem 0 0; font-size:1rem;
  color:var(--muted); max-width:54ch; line-height:1.65;
}

.form{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.75rem; box-shadow:0 12px 36px -26px rgba(10,46,64,.5);
}
.f-row{margin:0 0 1.1rem; display:flex; flex-direction:column; gap:.42rem}
.f-row label{font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.f-row input,.f-row textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--mist); border:1px solid var(--line); border-radius:var(--r);
  padding:.72rem .85rem; width:100%; transition:border-color .15s, background .15s;
}
.f-row textarea{resize:vertical; line-height:1.5}
.f-row input:focus,.f-row textarea:focus{border-color:var(--aqua); background:#fff; outline:none}
.f-row ::placeholder{color:#7C93A0}
.f-act{margin:.4rem 0 0}
.f-act .btn{width:100%; text-align:center}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ── Footer ──────────────────────────────────────────── */
.site-foot{background:var(--navy); color:#9DBECB; padding:clamp(3rem,5vw,4.25rem) 0 2rem; font-size:.98rem}
.foot-in{display:grid; gap:2.25rem; grid-template-columns:2fr 1fr 1fr}
.foot-in p{margin:0 0 .45rem}
.mark-foot{color:#fff; margin-bottom:.9rem !important}
.mark-foot svg{color:var(--aqua-hi)}
.foot-brand p:last-child{max-width:44ch}
.foot-h{
  font-size:.74rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--aqua-hi); margin-bottom:.9rem !important;
}
.site-foot a{color:#D4E6ED; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.2)}
.site-foot a:hover{color:var(--aqua-hi); border-bottom-color:var(--aqua-hi)}
.foot-photos{
  margin-top:2.75rem; padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.13);
}
.foot-photos-note{margin:0 0 .9rem !important; font-size:.83rem; color:#9DBECB; max-width:64ch}
.credits{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.55rem 2.25rem;
}
.credits li{font-size:.78rem; line-height:1.5; color:#9DBECB}
.credits em{color:#C7DEE8; font-style:normal}

.foot-fine{
  margin-top:1.75rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.13);
  font-size:.8rem; color:#7FA2B1;
}
.foot-fine p{margin:0}

/* ── Motion ──────────────────────────────────────────── */
/* ── Motion: TWO themes, repeated the whole way down ───────────────

   THEME 1 -- "SURFACING".
   Everything arrives the way a thing arrives at a water surface: it rises the
   last inch and resolves out of a shallow blur. One entrance, reused on every
   [data-rise] block -- the route intro and its photo, the day cards, all six
   service cards, the visit copy, the visit log, the scattered frames, all three
   season columns, the towns list, the contact copy and the form.

   THEME 2 -- "CAUSTIC DRIFT".
   Every photographic ground breathes on a long sine-eased cycle, the way pool
   light does, with no loop point you can catch. Hero ground 52s, inverted
   season ground 74s, and the same easing scaled down to a 1.1s hover creep on
   the two scattered frames. Two grounds and two frames, one move.

   Both are decorative. prefers-reduced-motion kills both, and the page is
   complete with JS dead because [data-rise] is only hidden once .js lands. */

/* THEME 1 -- surfacing */
.js [data-rise]{opacity:0; transform:translateY(18px); filter:blur(5px)}
.js .is-in[data-rise],.js [data-rise].is-in{
  opacity:1; transform:none; filter:blur(0);
  transition:opacity .62s cubic-bezier(.2,.7,.3,1),
             transform .62s cubic-bezier(.2,.7,.3,1),
             filter .62s cubic-bezier(.2,.7,.3,1);
}

/* THEME 2 -- caustic drift */
@keyframes causticDrift{
  from{transform:scale(1.035) translate3d(-1.1%,-0.8%,0)}
  to  {transform:scale(1.075) translate3d(1.2%,1.1%,0)}
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width:1080px){
  .svc{grid-template-columns:repeat(2,1fr)}
  .days{grid-template-columns:repeat(5,1fr); gap:.6rem}
  .day-towns{font-size:.85rem}
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:2.5rem}
  .route-intro{grid-template-columns:1fr; gap:1.75rem}
  .route-lede{max-width:60ch}
  .scatter{grid-template-columns:1fr; gap:1.35rem}
  .sc-lg,.sc-sm{grid-column:1; margin-left:0; margin-top:0}
  .credits{grid-template-columns:1fr}
  .gatenote{max-width:26rem; margin-inline:auto; width:100%}
  .visit-grid,.contact-grid{grid-template-columns:1fr}
  .days{grid-template-columns:repeat(2,1fr); gap:.9rem}
  .days li:last-child{grid-column:1 / -1}
  .route-notes{grid-template-columns:1fr; gap:1.25rem}
  .season-grid{grid-template-columns:1fr 1fr}
  .season-note{grid-column:1 / -1; border-left:0; padding-left:0;
    border-top:1px solid rgba(255,255,255,.16); padding-top:1.75rem}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:920px){
  html{scroll-padding-top:120px}
  .site-head{position:relative}
  .menu{display:block}
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; background:var(--white);
    border-bottom:1px solid var(--line); padding:.5rem 1.25rem 1rem;
    box-shadow:0 18px 30px -22px rgba(10,46,64,.5);
  }
  .nav.open{display:flex}
  .nav a{padding:.8rem 0; border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .head-in{min-height:60px; gap:.75rem}
}
@media (max-width:760px){
  .svc{grid-template-columns:1fr}
  .btn-solid.btn:not(.btn-lg){display:none}
  .tel{font-size:.95rem}
  .head-in{min-height:58px}
  html{scroll-padding-top:72px}
  .topstack{display:contents}
  .site-head{position:sticky; top:0; z-index:60}
  .forsale-in{gap:.7rem; padding:.5rem 0; align-items:flex-start}
  .forsale-txt{font-size:.75rem; line-height:1.4}
  .forsale-buy a{font-size:.76rem; padding:.24rem .6rem}

  /* one column: the copy now sits over the whole frame instead of only its
     washed-back left third, so the wash has to go even */
  .hero-ground{
    background-image:
      linear-gradient(180deg,
        rgba(255,255,255,.9) 0%, rgba(255,255,255,.915) 50%,
        rgba(255,255,255,.865) 100%),
      url("../img/hero-water.webp");
  }
  .hero-veil{opacity:.68}
  .hero-offer{max-width:none; padding:1.2rem 1.15rem}
  .hero-acts .btn{flex:1 1 100%; text-align:center}
  .gatenote-card{padding:1.9rem 1.3rem 1.4rem}
  .gatenote-card p{font-size:1.26rem; line-height:1.9rem}
  .gatenote-card{background-image:repeating-linear-gradient(
    180deg, transparent 0 1.9rem, var(--coping) 1.9rem calc(1.9rem + 1px));
    background-position:0 0}
  .log-readings{grid-template-columns:repeat(3,1fr)}
  .season-grid{grid-template-columns:1fr}
  .season-note{border-top:1px solid rgba(255,255,255,.16); padding-top:1.75rem}
}
@media (max-width:560px){
  .days{grid-template-columns:1fr}
  .days li:last-child{grid-column:auto}
  .days li{padding-bottom:1.6rem}
}
@media (max-width:420px){
  .foot-in{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  [data-rise],.js [data-rise]{opacity:1 !important; transform:none !important; filter:none !important}
  .hero-ground,.ink-ground{transform:scale(1.035) !important}
  .sc:hover img{transform:none !important}
}