/* =========================================================
   Coastal Shine: styles
   Brand colors, fonts and shapes live in :root. Change once, updates everywhere.
   Shape rule: buttons and inputs 8px, cards and photos 12px.
   The arched hero photo is the one intentional exception.
   ========================================================= */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 500 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* One cool neutral family, built from the logo's ocean blue */
  --ink: #0f2438;          /* headings + body text */
  --ink-muted: #46607a;    /* secondary text (AA on white and --mist) */
  --blue: #1461b3;         /* brand blue */
  --blue-deep: #0b2e55;    /* contact + footer */
  --blue-deeper: #08233f;
  --mist: #eef4fa;         /* light section tint */
  --line: #d6e2ee;
  --white: #ffffff;
  /* Single accent: sunset orange, only for "Get a Free Quote" actions.
     Darkened from the logo orange so white button text passes WCAG AA. */
  --accent: #c75211;
  --accent-hover: #a9440d;
  --accent-soft: #ffb584;  /* orange for labels on dark blue */
  /* Tropical water tones, used for waves, highlights and water fills (never for buttons) */
  --aqua: #22b5c9;
  --aqua-soft: #b9ecf2;
  --sea: #0e7a98;          /* white text passes AA on this */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-swell: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-pull: cubic-bezier(0.55, 0.08, 0.3, 1);   /* steady squeegee pull that eases off at the edge */
  --wave-h: clamp(72px, 9vw, 140px);

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-control: 8px;
  --r-card: 12px;
  --header-h: 72px;
  --container: 1160px;

  /* z-index scale */
  --z-header: 10;
  --z-skip: 20;
  --z-splash: 30;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-tap-highlight-color: rgba(20, 97, 179, 0.15);
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 {
  font-family: var(--font-display); font-weight: 700; line-height: 1.08;
  margin: 0 0 0.75rem; letter-spacing: -0.025em; text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 5.2vw, 4rem); font-weight: 750; }
h2 { font-size: clamp(2rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.3125rem; letter-spacing: -0.015em; }
p { margin: 0 0 1rem; text-wrap: pretty; }

.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: var(--z-skip);
  background: var(--ink); color: var(--white); padding: 10px 14px; border-radius: var(--r-control);
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.scroll-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

.eyebrow {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 1rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.9375rem 1.5rem; border-radius: var(--r-control); border: 2px solid transparent;
  font: 700 1rem/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 0.6875rem 1.125rem; font-size: 0.9375rem; }
.btn-block { width: 100%; }
.btn-accent { background: var(--accent); color: var(--white); }
.btn-accent:hover { background: var(--accent-hover); }
.btn-outline { border-color: var(--line); color: var(--ink); background: var(--white); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }
.btn[disabled] { opacity: .7; cursor: progress; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 4px 16px rgba(11, 46, 85, 0.06); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; }
.brand img { width: 52px; height: 52px; border-radius: 50%; }
.brand-name { white-space: nowrap; font-family: var(--font-display); font-size: 1.3125rem; font-weight: 750; letter-spacing: -0.02em; color: var(--blue-deep); }
.site-nav { display: flex; align-items: center; gap: 2rem; }
.site-nav a:not(.btn) {
  text-decoration: none; font-weight: 600; font-size: 0.9375rem; color: var(--ink-muted);
  transition: color .15s ease;
}
.site-nav a:not(.btn):hover { color: var(--blue); }
.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav-toggle {
    display: grid; place-items: center; width: 44px; height: 44px;
    background: none; border: 0; border-radius: var(--r-control); cursor: pointer;
  }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 22px; height: 2px; background: var(--ink); position: relative;
    transition: transform .2s ease, background-color .2s ease;
  }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -7px; }
  .nav-toggle-bars::after { top: 7px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

  .site-nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: 0.25rem 16px 1rem; display: none;
    box-shadow: 0 12px 24px rgba(11, 46, 85, 0.08);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a:not(.btn) { padding: 0.875rem 0; font-size: 1.0625rem; color: var(--ink); }
  .site-nav a:not(.btn) + a:not(.btn) { border-top: 1px solid var(--line); }
  .site-nav .btn { margin-top: 0.75rem; padding-block: 0.9375rem; }
  .brand img { width: 46px; height: 46px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(55% 60% at 88% 8%, rgba(255, 181, 132, 0.30), transparent 62%),
    radial-gradient(45% 55% at 0% 100%, rgba(34, 181, 201, 0.16), transparent 70%),
    linear-gradient(180deg, var(--mist) 0%, var(--white) 100%);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 calc(clamp(3rem, 5vw, 4.5rem) + var(--wave-h) * 0.6);
}
.hero > .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero-lead { font-size: 1.1875rem; color: var(--ink-muted); max-width: 40ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* Photo framed like an arched window, a nod to the trade */
.hero-media { margin: 0; position: relative; isolation: isolate; max-width: 500px; justify-self: end; width: 100%; }
.hero-media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 999px 999px var(--r-card) var(--r-card);
}
.hero-media::before {
  content: ""; position: absolute; inset: -12px 12px 12px -12px; z-index: -1;
  border: 2px solid var(--accent-soft); border-radius: 999px 999px var(--r-card) var(--r-card);
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { justify-self: center; max-width: 520px; }
  .hero-media img { aspect-ratio: 5 / 4; }
  .hero-media::before { inset: -8px 8px 8px -8px; }
}
@media (max-width: 420px) {
  .hero-actions .btn { flex: 1 1 100%; }
}

/* ---------- Service areas (town links) ---------- */
.areas { background: var(--mist); }
.area-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.area-link {
  position: relative; display: grid; align-content: space-between; gap: 2.5rem; height: 100%;
  padding: 1.5rem 1.5rem 1.25rem; background: var(--white); border-radius: var(--r-card);
  border: 1px solid var(--line); text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.area-link:hover { border-color: var(--blue); box-shadow: 0 10px 24px rgba(11, 46, 85, 0.08); transform: translateY(-2px); }
.area-link:active { transform: translateY(0); }
.area-name { font-family: var(--font-display); font-weight: 750; font-size: clamp(1.625rem, 2.4vw, 2rem); letter-spacing: -0.025em; line-height: 1; color: var(--blue-deep); }
.area-tag { font-size: 0.9375rem; color: var(--ink-muted); padding-right: 2rem; }
.area-arrow { position: absolute; right: 1.25rem; bottom: 1.1rem; font-size: 1.25rem; color: var(--blue); transition: transform .18s ease; }
.area-link:hover .area-arrow { transform: translateX(4px); }
@media (max-width: 960px) { .area-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
  .area-links { grid-template-columns: 1fr; gap: 10px; }
  .area-link { gap: 0.5rem; padding: 1.125rem 1.25rem; }
}

/* "Also serving nearby" on town pages: plain large links, no tiles */
.area-links-3 { display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; }
.area-links-3 .area-link { display: inline-flex; align-items: baseline; gap: 0.75rem; padding: 0.25rem 0; background: none; border: 0; border-radius: 0; box-shadow: none; transform: none; }
.area-links-3 .area-tag { display: none; }
.area-links-3 .area-arrow { position: static; }
.area-links-3 .area-link:hover .area-name { color: var(--blue); }

/* ---------- Sections ---------- */
section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head p { color: var(--ink-muted); margin: 0; }

/* ---------- Services (5-cell bento: 3 photo, 2 tint) ---------- */
.service-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(230px, auto); gap: 14px;
}
.svc { position: relative; border-radius: var(--r-card); overflow: hidden; display: flex; align-items: flex-end; }
.svc-residential { grid-column: span 4; min-height: 340px; }
.svc-commercial { grid-column: span 2; min-height: 340px; }
.svc-tint, .svc-solar { grid-column: span 2; }
.svc-body { position: relative; padding: 1.5rem; }
.svc-body p { margin: 0; }
.svc h3 { margin-bottom: 0.375rem; }

.svc-photo { color: var(--white); background: var(--blue-deep); }
.svc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 35, 63, 0) 18%, rgba(8, 35, 63, 0.55) 52%, rgba(8, 35, 63, 0.92) 100%);
}
.svc-photo .svc-body { z-index: 1; max-width: 46ch; }
.svc-photo p { color: #e3edf7; }
.svc-photo h3, .svc-photo p { text-shadow: 0 1px 12px rgba(8, 35, 63, 0.45); }

.svc-tint {
  color: var(--white);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q25 6 50 20 T100 20 T150 20 T200 20 V40 H0Z' fill='%23ffffff' fill-opacity='0.08'/%3E%3C/svg%3E") bottom / 100% 42% no-repeat,
    linear-gradient(150deg, var(--blue) 0%, var(--sea) 100%);
}
.svc-tint + .svc-tint { background-color: var(--sea);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q25 34 50 20 T100 20 T150 20 T200 20 V40 H0Z' fill='%23ffffff' fill-opacity='0.08'/%3E%3C/svg%3E") bottom / 100% 42% no-repeat,
    linear-gradient(150deg, var(--sea) 0%, var(--blue-deep) 100%);
}
.svc-tint p { color: #dcf1f7; }

@media (max-width: 860px) {
  .service-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .svc-residential, .svc-commercial, .svc-solar { grid-column: span 2; min-height: 260px; }
  .svc-tint { grid-column: span 1; }
}
@media (max-width: 520px) {
  .service-grid { grid-template-columns: 1fr; }
  .svc-residential, .svc-commercial, .svc-solar, .svc-tint { grid-column: auto; }
  .svc-tint { min-height: 0; }
}

/* ---------- Recent work: horizontal photo rail ---------- */
.work { background: var(--mist); }
.work-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 26vw, 320px); gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 0 max(16px, calc((100vw - var(--container)) / 2)) 1rem;
  scroll-padding-inline: max(16px, calc((100vw - var(--container)) / 2));
  scrollbar-width: thin; scrollbar-color: #b9c9da transparent;
}
.work-rail:focus-visible { outline-offset: -3px; }
.work-rail figure { margin: 0; scroll-snap-align: start; border-radius: var(--r-card); overflow: hidden; background: var(--line); }
.work-rail img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.work-note { margin-top: 1rem; font-size: 0.9375rem; color: var(--ink-muted); }

/* ---------- About ---------- */
/* With no photo gallery between them, tint About so it doesn't run into the white Services section */
.services + .about, .services + .about + .waves-contact { background: var(--mist); }
.about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.about-copy { max-width: 58ch; }
.about-copy p { color: var(--ink-muted); }
.about-media { margin: 0; }
.about-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-card); }
.about-points { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.about-points li { display: grid; gap: 0.25rem; padding-top: 1rem; border-top: 2px solid var(--blue); }
.about-points strong { font-family: var(--font-display); font-size: 1.1875rem; letter-spacing: -0.015em; }
.about-points span { color: var(--ink-muted); font-size: 0.9375rem; }
@media (max-width: 480px) { .about-points { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-media { order: -1; }
  .about-media img { aspect-ratio: 16 / 10; }
}

/* ---------- Contact ---------- */
.contact { background: var(--blue-deep); color: var(--white); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contact-info > p { color: #c6d8ea; max-width: 42ch; }
.contact-list { margin: 2.25rem 0 0; display: grid; gap: 1.25rem; }
.contact-list dt { font-size: 0.875rem; color: var(--accent-soft); font-weight: 600; }
.contact-list dd { margin: 0.125rem 0 0; font-size: 1.1875rem; font-weight: 500; overflow-wrap: anywhere; }
.contact-list a { text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 4px; transition: text-decoration-color .15s ease; }
.contact-list a:hover { text-decoration-color: var(--accent-soft); }
.contact :focus-visible { outline-color: var(--accent-soft); }

.quote-form {
  background: var(--white); color: var(--ink); border-radius: var(--r-card);
  padding: clamp(1.5rem, 4vw, 2.25rem); display: grid; gap: 1.125rem;
}
.quote-form :focus-visible { outline-color: var(--blue); }
.quote-form h3 { font-size: 1.5rem; margin-bottom: 0; }
.field { display: grid; gap: 0.375rem; }
.field label, .quote-form legend { font-weight: 600; font-size: 0.9375rem; }
.quote-form input:not([type="checkbox"]), .quote-form select, .quote-form textarea {
  font: 400 1rem var(--font-body); color: var(--ink); background-color: var(--white);
  padding: 0.75rem 0.875rem; border: 1.5px solid #b9c9da; border-radius: var(--r-control); width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.quote-form ::placeholder { color: #6b7f94; }
.quote-form input:focus-visible, .quote-form select:focus-visible, .quote-form textarea:focus-visible {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(20, 97, 179, 0.22);
}
.quote-form [aria-invalid="true"] { border-color: #b3261e; }
.field-error { margin: 0; font-size: 0.875rem; color: #b3261e; }
.field-error:empty { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.quote-form fieldset { border: 0; padding: 0; margin: 0; }
.quote-form legend { margin-bottom: 0.5rem; padding: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.checks label {
  display: flex; align-items: center; gap: 0.5rem; font-weight: 500; cursor: pointer;
  border: 1.5px solid #b9c9da; border-radius: var(--r-control); padding: 0.5rem 0.875rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.checks label:hover { border-color: var(--blue); }
.checks label:has(input:checked) { border-color: var(--blue); background: var(--mist); }
.checks input { accent-color: var(--blue); width: 1.05rem; height: 1.05rem; margin: 0; }
.optional { font-weight: 400; color: var(--ink-muted); }
.form-status { margin: 0; font-weight: 600; }
.form-status:empty { display: none; }
.form-status.is-success { color: #1d6b3a; }
.form-status.is-error { color: #b3261e; }
.form-fine { margin: 0; font-size: 0.8125rem; color: var(--ink-muted); }
.form-fine a { color: var(--blue); }
.hidden-field { display: none; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--blue-deeper); color: #b7cbe0; padding: 2.5rem 0 1.75rem; font-size: 0.9375rem; }
.site-footer p { margin: 0; }
.footer-inner { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 2rem; align-items: start; }
.footer-id { display: flex; gap: 1rem; align-items: center; }
.footer-areas { display: grid; gap: 0.375rem; }
.footer-areas a[aria-current="page"] { color: var(--accent-soft); }
.footer-brand img { width: 64px; height: 64px; border-radius: 50%; }
.footer-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; color: var(--white); }
.footer-contact { display: grid; gap: 0.375rem; text-align: right; }
.site-footer a { color: var(--white); text-decoration: none; transition: color .15s ease; }
.site-footer a:hover { color: var(--accent-soft); }
.site-footer :focus-visible { outline-color: var(--accent-soft); }
.footer-base {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.8125rem;
}
.footer-base a { color: #b7cbe0; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-contact { text-align: left; }
}

/* ---------- Town pages ---------- */
.crumbs { display: flex; gap: 0.5rem; font-size: 0.875rem; color: var(--ink-muted); margin-bottom: 1rem; }
.crumbs a { color: var(--blue); text-underline-offset: 3px; }

.local { background: var(--mist); }
.local-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.local-copy p { color: var(--ink-muted); font-size: 1.125rem; max-width: 42ch; }
.causes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.causes li {
  background: var(--white); border-radius: var(--r-card); padding: 1.25rem 1.5rem;
  box-shadow: inset 0 3px 0 var(--aqua);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.causes li:hover { transform: translateY(-2px); box-shadow: inset 0 3px 0 var(--aqua), 0 12px 28px rgba(11, 46, 85, 0.08); }
.causes h3 { font-size: 1.1875rem; margin-bottom: 0.25rem; color: var(--blue-deep); }
.causes p { margin: 0; color: var(--ink-muted); }

.town-services-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.town-services-media { margin: 0; }
.town-services-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-card); }
.svc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem; margin: 1.5rem 0 0; }
.svc-list dt { font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.015em; }
.svc-list dd { margin: 0.25rem 0 0; color: var(--ink-muted); }

.faq { background: var(--mist); }
.faq-inner { max-width: 760px; }
.faq-list { display: grid; gap: 1.75rem; margin: 1.5rem 0 0; }
.faq-list dt { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.015em; }
.faq-list dd { margin: 0.375rem 0 0; color: var(--ink-muted); max-width: 62ch; }

.nearby { padding-block: clamp(3rem, 6vw, 4.5rem); }
.nearby h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--ink-muted); }

@media (max-width: 860px) {
  .local-grid, .town-services-grid { grid-template-columns: 1fr; }
  .town-services-media img { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) { .svc-list { grid-template-columns: 1fr; gap: 1.25rem; } }

/* ---------- Simple pages (thanks, 404, privacy) ---------- */
.page-simple { min-height: 70dvh; display: grid; place-items: center; text-align: center; padding: 4rem 16px; background: var(--mist); }
.page-simple img { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 1.5rem; }
.page-simple p { color: var(--ink-muted); max-width: 46ch; margin-inline: auto; }
.page-simple .btn { margin-top: 1rem; }
.prose { max-width: 68ch; margin-inline: auto; padding: 3rem 0 5rem; }
.prose h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.prose h2 { font-size: 1.375rem; margin-top: 2rem; }
.prose p, .prose li { color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}
.footer-base-solo { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 380px) { .brand-name { font-size: 1.125rem; } .header-inner .btn-sm { padding-inline: 0.75rem; } }

/* ---------- Reviews (only rendered when data/reviews.json has entries) ---------- */
.reviews-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: 1.5rem; }
.review { margin: 0; padding: 1.5rem; border-radius: var(--r-card); background: var(--mist); display: grid; gap: 1rem; align-content: space-between; }
.review p { margin: 0; font-size: 1.0625rem; }
.review-lead { grid-row: span 2; background: var(--blue-deep); color: var(--white); padding: clamp(1.5rem, 4vw, 2.5rem); }
.review-lead p { font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.3; letter-spacing: -0.015em; }
.review cite { font-style: normal; font-weight: 700; display: grid; }
.review cite span { font-weight: 400; font-size: 0.875rem; color: var(--ink-muted); }
.review-lead cite span { color: #c6d8ea; }
.reviews-grid:has(> .review:only-child) { grid-template-columns: 1fr; max-width: 760px; }
.reviews-more { display: inline-block; margin-top: 1.25rem; color: var(--blue); font-weight: 600; text-underline-offset: 4px; }
@media (max-width: 760px) { .reviews-grid { grid-template-columns: 1fr; } .review-lead { grid-row: auto; } }

/* =========================================================
   Coastal motion
   Waves drift, glass shines once, headlines get a water-colored highlight,
   and town tiles fill with water on hover. Everything here is transform/opacity
   based and switches off for visitors who ask for reduced motion.
   ========================================================= */

/* ---- Waves ---- */
.waves { position: relative; height: var(--wave-h); overflow: hidden; pointer-events: none; line-height: 0; }
.waves-hero { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 0; }
.waves-contact { background: var(--white); margin-bottom: -1px; }
.wave { position: absolute; left: 0; bottom: -10px; width: 200%; height: 100%; animation: wave-drift 24s linear infinite; will-change: transform; }
.wave-back  { height: 100%; animation-duration: 32s; animation-direction: reverse; }
.wave-mid   { height: 80%;  animation-duration: 21s; animation-delay: -7s; }
.wave-front { height: 58%;  animation-duration: 15s; animation-delay: -3s; }
.waves-hero .wave-back { opacity: .85; }
.waves-hero .wave-mid  { opacity: .8; }
/* Each layer also rises and falls a little, like swell passing under it */
.wave-back  { animation-name: wave-drift-r, wave-bob; animation-duration: 32s, 5.2s; animation-timing-function: linear, cubic-bezier(.45, 0, .55, 1); animation-iteration-count: infinite, infinite; animation-direction: normal, alternate; }
.wave-mid   { animation-name: wave-drift, wave-bob;   animation-duration: 21s, 4.1s; animation-timing-function: linear, cubic-bezier(.45, 0, .55, 1); animation-iteration-count: infinite, infinite; animation-direction: normal, alternate; animation-delay: -7s, -1.3s; }
.wave-front { animation-name: wave-drift-r, wave-bob; animation-duration: 15s, 3.4s; animation-timing-function: linear, cubic-bezier(.45, 0, .55, 1); animation-iteration-count: infinite, infinite; animation-direction: normal, alternate; animation-delay: -3s, -.7s; }
@keyframes wave-bob { from { translate: 0 0; } to { translate: 0 -6px; } }
@keyframes wave-drift-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.wave-texture { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fff; opacity: .45; mix-blend-mode: soft-light; pointer-events: none; }
@keyframes wave-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Glass shine across the hero photo (once on load, again on hover) ---- */
.hero-glass { display: block; position: relative; overflow: hidden; border-radius: 999px 999px var(--r-card) var(--r-card); isolation: isolate; }
.glint {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, .18) 53%, transparent 62%);
  transform: translateX(-110%);
  animation: glint 1.5s .8s var(--ease-swell) forwards;
}
.hero-media:hover .glint { animation: glint-again 1.2s var(--ease-swell); }
@keyframes glint { to { transform: translateX(110%); } }
@keyframes glint-again { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

/* ---- Water-colored highlight under key words ---- */
h1, h2 { isolation: isolate; }
.hl { position: relative; white-space: nowrap; color: var(--blue); }
.hl::after {
  content: ""; position: absolute; z-index: -1; left: -0.06em; right: -0.06em; bottom: 0.04em; height: 0.34em;
  border-radius: 0.2em; background: linear-gradient(90deg, var(--aqua-soft), #d4f4f7);
  transform: scaleX(0); transform-origin: left center;
  animation: hl-draw .9s .3s var(--ease-out) forwards;
}
.hl-soft { color: inherit; }
.hl-soft::after { animation: none; transform: scaleX(1); }
@keyframes hl-draw { to { transform: scaleX(1); } }

/* ---- Town tiles fill with water on hover ---- */
.area-link { overflow: hidden; isolation: isolate; }
.area-link::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: calc(100% + 22px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 22' preserveAspectRatio='none'%3E%3Cpath d='M0 11 Q25 0 50 11 T100 11 T150 11 T200 11 V22 H0Z' fill='%231461b3'/%3E%3C/svg%3E") top / 100% 22px no-repeat,
    linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%) 0 21px / 100% 100% no-repeat;
  transform: translateY(100%);
  transition: transform .6s var(--ease-swell);
}
.area-link:hover::before, .area-link:focus-visible::before { transform: translateY(0); }
.area-name, .area-tag, .area-arrow { transition: color .35s var(--ease-out), transform .35s var(--ease-out); }
.area-link:hover .area-name, .area-link:hover .area-tag, .area-link:hover .area-arrow,
.area-link:focus-visible .area-name, .area-link:focus-visible .area-tag, .area-link:focus-visible .area-arrow { color: var(--white); }
.area-links-3 .area-link::before { display: none; }
.area-links-3 .area-link:hover .area-name, .area-links-3 .area-link:hover .area-arrow { color: var(--blue); }

/* ---- Button shine (the "squeegee pass") ---- */
.btn-accent { position: relative; overflow: hidden; isolation: isolate; }
.btn-accent::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn-accent:hover::after { transform: translateX(120%); transition: transform .75s var(--ease-swell); }

/* ---- Photo cards drift slightly closer on hover ---- */
.svc-photo img { transition: transform .9s var(--ease-out); }
.svc-photo:hover img { transform: scale(1.04); }

/* ---- Sections rise in as they scroll into view (JS adds .motion only when motion is OK) ---- */
.motion .reveal { opacity: 0; transform: translateY(22px); }
.motion .reveal.in-view {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* Looping animations stop while scrolled out of view, to save battery on phones */
.waves.is-offscreen *, .is-offscreen .scene * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .wave, .glint, .hl::after { animation: none !important; }
  .hl::after { transform: scaleX(1); }
  .glint { display: none; }
  .area-link::before, .btn-accent::after { transition: none !important; }
}

/* =========================================================
   First-visit ocean intro
   The screen fills like a glass: water rises, overshoots, sloshes and settles,
   bubbles rise past the logo, then the whole sea pulls away upward on a wave edge.
   Pure CSS timing, so it always finishes even if JavaScript fails.
   Shown once per session; never for reduced-motion visitors (see the gate script).
   ========================================================= */
.splash { display: none; }
.intro .splash {
  display: block; position: fixed; inset: 0; z-index: var(--z-splash); overflow: visible;
  background: linear-gradient(180deg, #f7fbfe 0%, #e4f2fa 100%);
  animation: splash-exit .85s var(--ease-swell) 2.15s forwards;
}
/* Wave-shaped trailing edge, only seen while the sea pulls away */
.intro .splash::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 70' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H240 V30 Q210 70 180 40 T120 40 T60 40 T0 30 Z' fill='%230b2e55'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
@keyframes splash-exit { to { transform: translateY(calc(-100% - 70px)); visibility: hidden; } }
.intro-skip .splash { animation: splash-exit .5s var(--ease-swell) forwards !important; }

.splash-water {
  position: absolute; left: -12vw; right: -12vw; top: 0; height: 130vh;
  transform: translateY(105vh);
  animation: splash-fill 1.7s .25s linear forwards;
}
/* Rise fast, overshoot, slosh back and forth, settle. Tilt follows the slosh. */
@keyframes splash-fill {
  0%   { transform: translateY(105vh) rotate(0deg);      animation-timing-function: cubic-bezier(.3, .05, .2, 1); }
  52%  { transform: translateY(5vh)   rotate(-2.6deg);   animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  67%  { transform: translateY(15vh)  rotate(2deg);      animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  80%  { transform: translateY(9.5vh) rotate(-1.1deg);   animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  91%  { transform: translateY(12.8vh) rotate(.45deg);   animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { transform: translateY(12vh)  rotate(0deg); }
}
.splash-surface { position: absolute; left: 0; right: 0; top: 0; height: clamp(60px, 9vh, 96px); transform: translateY(calc(-100% + 2px)); }
.swave { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; animation: wave-drift 4s linear infinite; }
.swave-back  { fill: #b9ecf2; animation-duration: 5.5s; animation-direction: reverse; }
.swave-mid   { fill: var(--aqua); height: 82%; animation-duration: 3.6s; }
.swave-front { fill: #1b86c9; height: 62%; animation-duration: 2.8s; animation-direction: reverse; }
.splash-body { position: absolute; inset: 0; background: linear-gradient(180deg, #1b86c9 0%, var(--blue) 30%, var(--blue-deep) 85%); overflow: hidden; }

/* Bubbles, like the ones in the logo */
.bubble {
  position: absolute; bottom: 8%; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .14);
  opacity: 0; animation: bubble-rise 1.9s var(--ease-out) forwards;
}
.b1 { left: 22%; animation-delay: .55s; } .b2 { left: 31%; width: 9px; height: 9px; animation-delay: .75s; }
.b3 { left: 44%; width: 18px; height: 18px; animation-delay: .6s; } .b4 { left: 53%; width: 10px; height: 10px; animation-delay: .95s; }
.b5 { left: 61%; animation-delay: .7s; } .b6 { left: 70%; width: 20px; height: 20px; animation-delay: 1.05s; }
.b7 { left: 78%; width: 8px; height: 8px; animation-delay: .85s; } .b8 { left: 38%; width: 12px; height: 12px; animation-delay: 1.2s; }
.b9 { left: 66%; width: 11px; height: 11px; animation-delay: 1.3s; }
@keyframes bubble-rise {
  0%   { opacity: 0; transform: translate(0, 0) scale(.6); }
  20%  { opacity: 1; }
  60%  { transform: translate(10px, -40vh) scale(1); }
  100% { opacity: 0; transform: translate(-6px, -75vh) scale(1.15); }
}

.splash-mark {
  position: absolute; left: 50%; top: 42%; width: clamp(150px, 24vw, 230px);
  transform: translate(-50%, -50%);
  animation: mark-bob 2.4s cubic-bezier(.45, 0, .55, 1) 1.2s infinite alternate;
}
.splash-mark img {
  width: 100%; height: auto; border-radius: 50%;
  box-shadow: 0 22px 60px rgba(8, 35, 63, .35), 0 0 0 6px rgba(255, 255, 255, .55);
  opacity: 0; transform: scale(.8);
  animation: mark-in .8s var(--ease-out) .05s forwards;
}
@keyframes mark-in { to { opacity: 1; transform: scale(1); } }
@keyframes mark-bob { from { transform: translate(-50%, -50%); } to { transform: translate(-50%, calc(-50% - 8px)); } }
.splash-tag {
  position: absolute; left: 16px; right: 16px; top: calc(42% + clamp(100px, 15vw, 150px)); margin: 0;
  text-align: center; color: var(--white);
  font-family: var(--font-display); font-weight: 750; letter-spacing: -0.02em; font-size: clamp(1.375rem, 3.2vw, 2.125rem);
  opacity: 0; transform: translateY(14px);
  animation: tag-in .7s var(--ease-out) 1.3s forwards;
}
@keyframes tag-in { to { opacity: 1; transform: none; } }

/* Let the hero's own entrances play after the intro instead of underneath it */
.intro .hl::after { animation-delay: 2.7s; }
.intro .glint { animation-delay: 3s; }

/* =========================================================
   Homepage window + squeegee
   One pane of glass over a living beach scene. On the first homepage view of each visit it starts
   hazy with salt film and a squeegee cleans it in three diagonal strokes, right to left, top to
   bottom. Then the glass shines once and stays clean. Later views in the same visit, and visitors
   who ask for reduced motion, just see clean glass. The "sq" class comes from the gate script in
   scripts/build.mjs. Keyframe timings are generated (3 strokes, 3.8s total).
   ========================================================= */
.hero-window { --sq-delay: .6s; max-width: 440px; }
.intro .hero-window { --sq-delay: 2.9s; }
.hero-window::before { inset: -22px 22px 22px -22px; border-radius: 20px; }
.hero-window .hero-glass {
  aspect-ratio: 4 / 5; background: #c9ecf9; border-radius: var(--r-card);
  box-shadow: 0 0 0 10px var(--white), 0 0 0 12.5px var(--blue-deep), 0 22px 44px rgba(11, 46, 85, .16);
}
.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---- Living scene behind the glass ---- */
.sun-rays { transform-box: view-box; transform-origin: 300px 175px; animation: sun-turn 60s linear infinite; }
@keyframes sun-turn { to { transform: rotate(360deg); } }
.cloud { animation: cloud-drift 38s linear infinite alternate; }
.cloud-2 { animation-duration: 52s; animation-direction: alternate-reverse; }
@keyframes cloud-drift { from { transform: translateX(-24px); } to { transform: translateX(40px); } }
.boat { animation: boat-sail 26s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes boat-sail { from { transform: translate(0, 0); } 50% { transform: translate(80px, 2px); } to { transform: translate(170px, 0); } }
.swell { animation: swell-roll 30s linear infinite; }
.swell-s2 { animation-duration: 21s; animation-direction: reverse; }
.swell-s3 { animation-duration: 14s; }
.swell-s4 { animation-duration: 9s; animation-direction: reverse; }
@keyframes swell-roll { from { transform: translateX(0); } to { transform: translateX(-400px); } }
.glint-dot { fill: #fff; opacity: 0; animation: twinkle 3.2s ease-in-out infinite; }
.g2 { animation-delay: -1.1s; } .g3 { animation-delay: -2.2s; } .g4 { animation-delay: -.6s; }
@keyframes twinkle { 0%, 100% { opacity: 0; } 45%, 55% { opacity: .85; } }
.sea-texture { fill: #fff; opacity: .5; mix-blend-mode: soft-light; pointer-events: none; }
.surf { animation: surf-in 3.6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes surf-in { 0%, 100% { transform: translate(0, 6px); } 50% { transform: translate(-30px, -8px); } }
.wash { animation: wash 3.6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes wash { 0%, 100% { transform: translateY(2px); opacity: .5; } 50% { transform: translateY(-5px); opacity: .95; } }

/* ---- Salt haze, cut into three slanted bands (one per stroke). In each band the wipe layer slides
        left while the film inside slides right by the same amount, so the haze stays put and only
        its right edge moves with the blade (transform-only reveal). ---- */
.grime, .grime-band, .grime-wipe, .grime-film { position: absolute; inset: 0; pointer-events: none; }
.grime-wipe { overflow: hidden; }
.gb1 { clip-path: polygon(100% -12%, 100% 27.33%, 0% 39.33%, 0% 0%); }
.gb2 { clip-path: polygon(100% 27.33%, 100% 60.67%, 0% 72.67%, 0% 39.33%); }
.gb3 { clip-path: polygon(100% 60.67%, 100% 100%, 0% 112%, 0% 72.67%); }
.grime-film {
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .3) 0 1.2px, transparent 2.2px) 0 0 / 23px 19px,
    radial-gradient(circle at 60% 70%, rgba(255, 255, 255, .22) 0 1px, transparent 2px) 7px 5px / 37px 29px,
    radial-gradient(ellipse 40% 30% at 25% 30%, rgba(255, 255, 255, .22), transparent 70%),
    radial-gradient(ellipse 45% 35% at 75% 70%, rgba(170, 158, 132, .18), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(170, 158, 132, .10) 34px 36px, transparent 36px 58px),
    linear-gradient(180deg, rgba(232, 228, 216, .80), rgba(212, 204, 186, .76));
}

/* ---- The squeegee: navy rubber blade leading, silver channel, orange handle trailing to the right ---- */
.squeegee-track { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; }
.grime, .squeegee-track { display: none; }
.sq .grime, .sq .squeegee-track { display: block; }
.squeegee {
  position: absolute; left: 0; top: 0; width: 18px; height: 38%; margin-left: -9px;
  transform: translateY(-50%) rotate(-4deg);
}
.squeegee-blade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--blue-deep) 0 28%, #c3d0dd 28% 45%, #eef3f8 45%);
  border: 2.5px solid var(--blue-deep); border-radius: 5px;
  box-shadow: -6px 4px 12px rgba(11, 46, 85, .22);
}
.squeegee-handle {
  position: absolute; left: calc(100% - 3px); top: 50%; width: clamp(36px, 10vw, 54px); height: 16px; margin-top: -8px;
  background: linear-gradient(180deg, #ff9a52, #ef6a1d 60%, #d9570f);
  border: 2.5px solid var(--blue-deep); border-radius: 3px 8px 8px 3px;
}
.sill {
  position: absolute; z-index: 1; left: -6%; right: -6%; bottom: -16px; height: 16px;
  background: #fff; border: 3px solid var(--blue-deep); border-radius: 6px;
  box-shadow: 0 8px 18px rgba(11, 46, 85, .14);
}

/* ---- The run: three strokes, then one shine ---- */
.sq .squeegee-track { animation: sq-run 3.8s linear var(--sq-delay) both; }
.sq .gb1 .grime-wipe { animation: sq-wipe-1 3.8s linear var(--sq-delay) both; }
.sq .gb1 .grime-film { animation: sq-film-1 3.8s linear var(--sq-delay) both; }
.sq .gb2 .grime-wipe { animation: sq-wipe-2 3.8s linear var(--sq-delay) both; }
.sq .gb2 .grime-film { animation: sq-film-2 3.8s linear var(--sq-delay) both; }
.sq .gb3 .grime-wipe { animation: sq-wipe-3 3.8s linear var(--sq-delay) both; }
.sq .gb3 .grime-film { animation: sq-film-3 3.8s linear var(--sq-delay) both; }
.hero-window .glint, .hero-window:hover .glint { animation: none; }
.sq .hero-window .glint { animation: glint-again 1.2s var(--ease-swell) calc(var(--sq-delay) + 3.45s) both; }
@keyframes sq-run {
  0% { transform: translate(108%, 7.67%); opacity: 0; animation-timing-function: ease-out; }
  6.58% { transform: translate(100%, 7.67%); opacity: 1; animation-timing-function: cubic-bezier(.55, .08, .3, 1); }
  30.26% { transform: translate(0%, 19.67%); opacity: 1; animation-timing-function: ease-in; }
  34.21% { transform: translate(-6%, 20.27%); opacity: 0; }
  34.47% { transform: translate(108%, 44%); opacity: 0; animation-timing-function: ease-out; }
  38.16% { transform: translate(100%, 44%); opacity: 1; animation-timing-function: cubic-bezier(.55, .08, .3, 1); }
  61.84% { transform: translate(0%, 56%); opacity: 1; animation-timing-function: ease-in; }
  65.79% { transform: translate(-6%, 56.6%); opacity: 0; }
  66.05% { transform: translate(108%, 80.33%); opacity: 0; animation-timing-function: ease-out; }
  69.74% { transform: translate(100%, 80.33%); opacity: 1; animation-timing-function: cubic-bezier(.55, .08, .3, 1); }
  93.42% { transform: translate(0%, 92.33%); opacity: 1; animation-timing-function: ease-in; }
  100% { transform: translate(-6%, 92.93%); opacity: 0; }
}
@keyframes sq-wipe-1 { 0%, 6.58% { transform: translateX(0); animation-timing-function: cubic-bezier(.55, .08, .3, 1); } 30.26%, 100% { transform: translateX(-100%); } }
@keyframes sq-film-1 { 0%, 6.58% { transform: translateX(0); animation-timing-function: cubic-bezier(.55, .08, .3, 1); } 30.26%, 100% { transform: translateX(100%); } }
@keyframes sq-wipe-2 { 0%, 38.16% { transform: translateX(0); animation-timing-function: cubic-bezier(.55, .08, .3, 1); } 61.84%, 100% { transform: translateX(-100%); } }
@keyframes sq-film-2 { 0%, 38.16% { transform: translateX(0); animation-timing-function: cubic-bezier(.55, .08, .3, 1); } 61.84%, 100% { transform: translateX(100%); } }
@keyframes sq-wipe-3 { 0%, 69.74% { transform: translateX(0); animation-timing-function: cubic-bezier(.55, .08, .3, 1); } 93.42%, 100% { transform: translateX(-100%); } }
@keyframes sq-film-3 { 0%, 69.74% { transform: translateX(0); animation-timing-function: cubic-bezier(.55, .08, .3, 1); } 93.42%, 100% { transform: translateX(100%); } }

@media (max-width: 860px) {
  .hero-window .hero-glass { aspect-ratio: 1 / 1; box-shadow: 0 0 0 8px var(--white), 0 0 0 10.5px var(--blue-deep), 0 18px 36px rgba(11, 46, 85, .14); }
  .hero-window::before { inset: -16px 16px 16px -16px; }
  .hero-window .sill { left: -4%; right: -4%; }
  .squeegee { height: 42%; }
}

@media (prefers-reduced-motion: reduce) {
  .splash, .intro .splash { display: none !important; }
  .sun-rays, .cloud, .boat, .swell, .glint-dot, .surf, .wash, .hero-window * { animation: none !important; }
  .grime, .squeegee-track { display: none !important; }
}