/* The Pond Company
   Rebuilt November 2026 (Taki design sweep: REBUILD). The system is written up
   in docs/DESIGN.md: change it there first, then here.

   The colours are the logo's own, sampled from the logo file. Each one now does
   the job it can do with readable contrast: dark ink on the olive field (6.7:1),
   white on the deep pink buttons (6.0:1), the sky, pink, lime and green only as
   the logo's four tiles. No lime or white type over photographs. */

@font-face {
  font-family: "Jost";
  src: url("/fonts/jost-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --olive:      #9db230;   /* the logo's field */
  --olive-deep: #5c6215;   /* the logo's lettering */
  --ink:        #17261a;
  --ink-soft:   #3c4a3f;
  --water:      #eef6fb;   /* a pale tint of the logo's blue */
  --paper:      #ffffff;
  --line:       #d3dbcf;

  --sky:        #47a2da;   /* tile */
  --pink:       #eb008b;   /* tile */
  --pink-deep:  #c2006f;   /* button ground, white text 6.0:1 */
  --pink-press: #9e005a;
  --lime:       #bdd63a;   /* tile, and type on ink */
  --green:      #297f40;   /* tile */

  --wrap: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2rem);
  --radius: 8px;

  --display: "Jost", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--sky);
}

/* The pinned photograph under the blue wash, kept from the old site (Vern,
   8 Nov 2026: "keep the background where we have the blue go over the still
   photo"). Each page's own photo, fixed behind everything, under the logo's
   sky blue at 45%. A position: fixed layer, not background-attachment: fixed,
   so it holds still on phones too. The page's words sit on panels over it,
   never on the photo itself.
   The photo starts clear and the wash comes in as you scroll (Vern, 11 Nov
   2026, as on the original site): site.js sets --wash from 0 to 1. With
   scripts off the wash is simply on. */
.page-bg {
  position: fixed; inset: 0; z-index: -1;
  background: var(--page-bg) center / cover no-repeat, var(--sky);
}
.page-bg::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(71, 162, 218, .45);
  opacity: var(--wash, 1);
}
.js .page-bg::after { opacity: var(--wash, 0); }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--olive-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 { font-family: var(--display); color: var(--ink); line-height: 1.12; text-wrap: balance; }
h1 { font-weight: 600; font-size: clamp(2.4rem, 6vw, 4.25rem); letter-spacing: -0.01em; margin: 0 0 1rem; }
h2 { font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0 0 1rem; }
h3 { font-weight: 600; font-size: 1.3rem; margin: 0 0 .4rem; }
p { margin: 0 0 1rem; text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
.site-footer :focus-visible { outline-color: var(--lime); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
/* Long-form pages keep the full wrap so the text lines up with the headings
   above and below it; article.prose caps the measure itself. */
.wrap.narrow { max-width: var(--wrap); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* The logo's four tiles, as a small row. Hero and footer only. */
.tiles { display: flex; gap: 6px; margin: 0 0 1.4rem; }
.tiles span { width: 22px; height: 22px; display: block; }
.tiles span:nth-child(1) { background: var(--sky); }
.tiles span:nth-child(2) { background: var(--pink); }
.tiles span:nth-child(3) { background: var(--lime); }
.tiles span:nth-child(4) { background: var(--green); }
/* The lime tile disappears on the olive band without an edge. */
.band .tiles span { box-shadow: 0 0 0 2px var(--ink); }

/* ---------------------------------------------------------------- header - */

/* The old site's sky blue header, back by request (Jess and Vern, 9 Nov 2026).
   Dark ink on the logo's sky is 5.6:1; white on it would be 2.8:1, which is
   why the old header's white nav was hard to read. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--sky);
  border-bottom: 1px solid rgba(23, 38, 26, .18);
}
.site-header .wrap { display: flex; align-items: center; gap: 1.25rem; min-height: 72px; }

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); flex: 0 0 auto; }
.brand img { width: 48px; height: 48px; }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 1.15rem; line-height: 1.1; }
.brand-name span { display: block; font-family: var(--body); font-weight: 500; font-size: .82rem; color: var(--ink); }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block; padding: .55rem .7rem;
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: .97rem;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover { border-bottom-color: rgba(23, 38, 26, .35); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--ink); }

.header-call { flex: 0 0 auto; }

.nav-toggle {
  display: none;
  align-items: center; gap: .5rem;
  background: none; border: 2px solid var(--ink); border-radius: var(--radius);
  color: var(--ink); padding: .5rem .75rem; cursor: pointer;
  font: 700 .95rem var(--body);
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 18px; height: 2px; background: currentColor; position: relative;
}
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

/* ---------------------------------------------------------------- buttons - */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.4rem;
  border-radius: var(--radius); border: 2px solid transparent;
  font: 700 1rem var(--body); text-decoration: none; cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--pink-deep); color: #fff; }
.btn-primary:hover { background: var(--pink-press); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-sm { min-height: 44px; padding: .55rem 1rem; font-size: .95rem; }

.actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ------------------------------------------------------------ olive bands - */

/* Bands are open to the washed photo behind the page (the old site's look,
   Jess and Vern, 9 Nov 2026). The words sit on an olive panel, the logo's own
   field with dark ink type, sized to the words and lined up with the content
   column. Nothing is ever written straight onto the photo. */
.band { background: transparent; color: var(--ink); }
.band a:not(.btn) { color: var(--ink); }
.band > .wrap {
  width: fit-content;
  max-width: min(48rem, calc(100% - 2 * var(--gutter)));
  margin: 0 0 0 max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  padding: clamp(1.4rem, 3.5vw, 2.5rem) clamp(1.25rem, 3.5vw, 2.5rem);
  background: var(--olive);
  border-radius: 6px;
}

.hero {
  min-height: clamp(26rem, 72vh, 46rem);
  display: flex; align-items: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.hero h1 { max-width: 19ch; }
.hero .lead { font-size: clamp(1.15rem, 2vw, 1.35rem); max-width: 54ch; margin-bottom: 1.6rem; }

/* Three of their own ponds under the hero, over the washed photo. One at phone width. */
.hero-photos {
  display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: clamp(.5rem, 1.2vw, 1rem);
  padding-bottom: clamp(.5rem, 1.5vw, 1rem);
}
/* A white print border and a soft shadow on every photo, so each one stands
   off the photo behind the page and the green panels (Vern, 11 Nov 2026: home
   page first, then "the other images that are throughout the site"). The
   full-bleed pond window and the lightbox stay unframed. */
.hero-photos img, .banner img, .split img, .portfolio img,
.ba-slider, .ba-pair img, .prose img {
  border: clamp(4px, .5vw, 6px) solid #fff;
  box-shadow: 0 6px 18px rgba(23, 38, 26, .35);
}
/* Gallery thumbnails are small: a thinner frame and a lighter shadow. */
.portfolio img { border-width: 4px; box-shadow: 0 4px 12px rgba(23, 38, 26, .3); }
.hero-photos img {
  width: 100%; height: clamp(240px, 31vw, 430px); object-fit: cover; border-radius: 4px;
}
/* The koi sit low in that frame; keep them in shot. */
.hero-photos img:first-child { object-position: 50% 80%; }

.page-head { padding: clamp(2.25rem, 6vw, 5rem) 0 clamp(1.25rem, 3vw, 2rem); }
.page-head h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); max-width: 20ch; }
.page-head .lead { font-size: clamp(1.1rem, 1.8vw, 1.25rem); max-width: 52ch; margin: 0 0 1.4rem; }
.page-head .lead:last-child { margin-bottom: 0; }
/* No banner photo under it. */
.page-head.flat { padding-bottom: clamp(1rem, 2.5vw, 1.75rem); }

.banner { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--wrap) - 2 * var(--gutter)); padding: 0; }
.banner img { width: 100%; height: clamp(200px, 30vw, 380px); object-fit: cover; border-radius: 4px; }

/* --------------------------------------------------------------- sections - */

/* Each section is a panel of the logo's olive over the washed photo, square
   cornered like the logo, with the logo's four tiles as a strip along the top
   (Vern, 9 Nov 2026: the white sheets read "like an A4 page from Word"). The
   gaps between panels, and the margins beside them, show the photo. The panel
   lines up with the banner photos above it.
   On olive only dark ink passes (6.7:1): ink-soft would be 3.9:1 and the
   olive-deep links 2.3:1, so the panel resets those tokens to ink. */
.section { padding: clamp(1rem, 2.5vw, 1.75rem) 0; }
.section > .wrap {
  --ink-soft: var(--ink);
  --olive-deep: var(--ink);
  --line: rgba(23, 38, 26, .3);
  position: relative;
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--wrap) - 2 * var(--gutter));
  padding: calc(clamp(2rem, 5vw, 4.5rem) + 8px) clamp(1.25rem, 4.5vw, 4rem) clamp(2rem, 5vw, 4.5rem);
  background: var(--olive);
}
.section > .wrap::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: linear-gradient(90deg,
    var(--sky) 0 25%, var(--pink) 25% 50%, var(--lime) 50% 75%, var(--green) 75% 100%);
}
/* The reviews and other long reading stay on the pale blue, which breaks up
   the green and keeps the quotes easy to read. */
.section.water > .wrap {
  --ink-soft: #3c4a3f;
  --olive-deep: #5c6215;
  --line: #d3dbcf;
  background: var(--water);
}
.section > .wrap a:not(.btn) { text-decoration-thickness: 1.5px; }
.section-intro { max-width: 60ch; margin-bottom: 2.5rem; }
.section-intro p { color: var(--ink-soft); font-size: 1.1rem; margin: 0; }

.kicker-link { font-weight: 700; }

/* Home: the lead service gets the room; the rest are a ruled list beside it. */
.lead-service { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.lead-service .ba-item { margin-top: 1.5rem; }

.rule-list { list-style: none; margin: 0; padding: 0; }
.rule-list > li { border-top: 1px solid var(--line); padding: 1.15rem 0; }
.rule-list > li:last-child { border-bottom: 1px solid var(--line); }
.rule-list p { margin: 0; color: var(--ink-soft); }
.rule-list h3 a { color: var(--ink); }
.rule-list.two-col { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); }
.rule-list.two-col > li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); }

/* Split: words one side, one of their photos the other. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split.wide-left { grid-template-columns: 1.3fr 1fr; align-items: start; }
.split img { width: 100%; border-radius: 4px; }
.split p { max-width: 37rem; }
.split .photo-tall { aspect-ratio: 4 / 5; object-fit: cover; }

.facts { margin: 1.5rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.25rem; }
.facts dt { font-family: var(--display); font-weight: 600; }
.facts dd { margin: 0; color: var(--ink-soft); }

/* Real sequence, so numbers are allowed (design-quality sign 14). */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
.steps.three { grid-template-columns: repeat(3, 1fr); }
.steps li { counter-increment: step; border-top: 3px solid var(--ink); padding-top: 1rem; }
.steps li::before {
  content: counter(step); display: block;
  font-family: var(--display); font-weight: 500; font-size: 2.2rem; line-height: 1; color: var(--olive-deep);
  margin-bottom: .6rem;
}
.steps p { margin: 0; color: var(--ink-soft); }

/* ------------------------------------------------------ the pond window -- */

/* The one motion moment (docs/DESIGN.md). A photograph pinned to the viewport,
   seen through a clipped band, so the page slides past it like a window. It
   carries forward the pinned photograph from the old site, in one place.
   clip-path clips the fixed child to the band in every current browser,
   phones included, which background-attachment: fixed does not. */
.window {
  position: relative;
  height: clamp(380px, 62vh, 620px);
  overflow: hidden;
  background: var(--ink);
}
.window-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
@media (prefers-reduced-motion: no-preference) {
  .window { clip-path: inset(0); }
  .window-img { position: fixed; height: 100vh; }
}
.window-note {
  position: absolute; left: var(--gutter); bottom: clamp(1rem, 4vw, 2.5rem); z-index: 1;
  max-width: min(30rem, calc(100% - 2 * var(--gutter)));
  background: var(--olive); color: var(--ink);
  padding: 1.1rem 1.35rem; border-radius: 4px;
}
.window-note p { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.3; }

/* ---------------------------------------------------------------- reviews - */

.reviews-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2.25rem; }
.reviews-top h2 { margin: 0; }
.reviews-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.reviews-score { font-family: var(--display); font-weight: 600; font-size: 2.6rem; line-height: 1; }
.reviews-stars { color: var(--olive-deep); font-size: 1.2rem; letter-spacing: .08em; }
.reviews-count { color: var(--ink-soft); }
.reviews-source { margin: .35rem 0 0; color: var(--ink-soft); font-size: .95rem; }

.review-list { columns: 2 22rem; column-gap: clamp(2rem, 5vw, 4rem); }
.review { break-inside: avoid; border-top: 1px solid var(--line); padding: 1.25rem 0 1.5rem; margin: 0; }
.review-stars { color: var(--olive-deep); letter-spacing: .08em; margin: 0 0 .5rem; font-size: .95rem; }
.review blockquote { margin: 0 0 .6rem; }
.review blockquote p { margin: 0; font-size: 1.06rem; }
.review-who { margin: 0; font-weight: 700; font-size: .95rem; }
.review-who span { font-weight: 400; color: var(--ink-soft); }

.pull-quote { margin: 0; border-left: 0; }
.pull-quote p { font-family: var(--display); font-weight: 500; font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1.3; margin: 0 0 .9rem; }
.pull-quote footer { color: var(--ink-soft); }

/* --------------------------------------------------------------- articles - */

/* Public Sans runs narrow, so ch overstates the measure: 37rem is about 75 characters. */
article.prose { max-width: 37rem; }
.pull-quote { max-width: 40rem; }
.prose h2 { font-size: clamp(1.45rem, 2.8vw, 1.85rem); margin: 2.4rem 0 .75rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.6rem 0 .4rem; font-size: 1.2rem; }
.prose ul, .prose ol { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.prose li { margin-bottom: .5rem; }
.article-links { margin: 2.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .97rem; }

/* Advice index: a list of guides, not a row of cards. */
.guide-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4rem); }
.guide-list li { border-top: 3px solid var(--ink); padding: 1.25rem 0 2rem; }
.guide-list h2 { font-size: 1.45rem; margin: 0 0 .5rem; }
.guide-list h2 a { color: var(--ink); text-decoration: none; }
.guide-list h2 a:hover { text-decoration: underline; }
.guide-list p { color: var(--ink-soft); margin: 0 0 .75rem; }

/* ---------------------------------------------------------------- gallery - */

.portfolio { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem 1rem; }
.portfolio figure { margin: 0; }
.portfolio img { width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; border-radius: 4px; background: var(--water); }
.portfolio figcaption { padding-top: .5rem; font-size: .95rem; color: var(--ink-soft); line-height: 1.4; }

/* Before and after. Two images side by side with no JavaScript; site.js turns
   each pair into a slider driven by a real range input (drag, touch, keys). */
.ba-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem; }
.ba-item > h3 { margin: 0 0 .75rem; }
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.ba-pair figure { margin: 0; }
.ba-pair img { width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; border-radius: 4px; }
.ba-pair figcaption { margin-top: .4rem; font-weight: 700; font-size: .95rem; }

/* Fills its column; the height is capped so a wide column does not make a
   very tall slider (object-fit: cover crops the photos to suit). */
.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: min(620px, 80vh);
  border-radius: 4px; overflow: hidden;
  background: var(--ink);
}
.ba-slider img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.ba-slider .ba-reveal { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ba-slider .ba-tag {
  position: absolute; top: .6rem; z-index: 3;
  background: var(--ink); color: #fff;
  font-size: .85rem; font-weight: 700;
  padding: .2rem .55rem; border-radius: 3px; pointer-events: none;
}
.ba-slider .ba-tag-before { left: .6rem; }
.ba-slider .ba-tag-after  { right: .6rem; }
.ba-slider .ba-line {
  position: absolute; top: 0; bottom: 0; z-index: 3;
  left: var(--pos, 50%); width: 3px; margin-left: -1.5px;
  background: #fff; pointer-events: none;
}
.ba-slider .ba-line::after {
  content: "\2194";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--pink-deep); color: #fff; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.ba-slider input[type="range"] {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; cursor: ew-resize;
}
.ba-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 2.6rem; height: 2.6rem; border-radius: 50%; opacity: 0; cursor: ew-resize;
}
.ba-slider input[type="range"]::-moz-range-thumb {
  width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; opacity: 0; cursor: ew-resize;
}
.ba-slider:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; }
.ba-hint { margin: .6rem 0 0; font-size: .95rem; color: var(--ink-soft); }

/* --------------------------------------------------------------- lightbox - */

.portfolio button {
  display: block; width: 100%; padding: 0; border: 0; margin: 0;
  background: none; cursor: zoom-in; font: inherit; color: inherit;
}
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10, 18, 12, .94);
}
.lightbox[hidden] { display: none; }
.lightbox-figure { margin: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: .9rem; max-width: 100%; max-height: 100%; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 9rem); width: auto; height: auto; border-radius: 4px; background: var(--ink); }
.lightbox figcaption { color: #fff; font-size: 1rem; text-align: center; max-width: 60ch; }
.lightbox-close {
  position: absolute; top: -.75rem; right: -.75rem;
  width: 2.8rem; height: 2.8rem; border-radius: 50%;
  border: 2px solid #fff; background: var(--ink); color: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:focus-visible { outline-color: #fff; }
.lightbox.is-loading img { opacity: .35; }
body.lightbox-open { overflow: hidden; }

/* ------------------------------------------------------------------ forms - */

.contact-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 700; margin-bottom: .35rem; }
.field .req { color: var(--pink-deep); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .65rem .8rem; font: inherit;
  border: 2px solid #7d887f; border-radius: 6px; background: #fff; color: var(--ink);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.field textarea { min-height: 150px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .95rem; margin: 1rem 0 0; color: var(--ink-soft); }
.form-alert { padding: 1rem 1.25rem; border-radius: 6px; margin-bottom: 1.25rem; font-weight: 700; }
.form-alert.ok  { background: #e7f2d0; border: 2px solid var(--olive-deep); color: var(--ink); }
.form-alert.bad { background: #fde7f2; border: 2px solid var(--pink-deep); color: #6d0040; }

.contact-lines { list-style: none; margin: 0 0 2rem; padding: 0; }
.contact-lines li { border-top: 1px solid var(--line); padding: .9rem 0; }
.contact-lines .label { display: block; font-weight: 700; font-size: .95rem; color: var(--ink-soft); }
.contact-lines a { font-family: var(--display); font-weight: 600; font-size: 1.35rem; color: var(--ink); text-decoration: none; }
.contact-lines a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- call band - */

.call-band { padding: clamp(1rem, 2.5vw, 1.75rem) 0 clamp(2.5rem, 6vw, 4.5rem); }
.call-band > .wrap {
  width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--wrap) - 2 * var(--gutter));
  margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem 3rem; align-items: center;
}
.call-band h2 { margin: 0 0 .5rem; }
.call-band p { margin: 0; max-width: 46ch; }
.call-band .actions { justify-content: flex-end; }

/* ---------------------------------------------------------------- footer - */

.site-footer { background: var(--ink); color: #fff; padding: 3.5rem 0 1.5rem; }
.site-footer .tiles span { box-shadow: none; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.site-footer h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 .9rem; color: var(--lime); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .45rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-brand .brand-name { color: #fff; font-size: 1.3rem; display: block; margin-bottom: .6rem; }
.footer-brand p { color: #dfe6dc; margin: 0; max-width: 34ch; }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .2);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .95rem; color: #dfe6dc;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { text-decoration: underline; }

/* ------------------------------------------------------------- responsive - */

@media (max-width: 1100px) {
  /* With JavaScript off the menu button cannot open anything, so the menu
     simply sits under the header as a list. With it on, the button opens it. */
  .site-header .wrap { flex-wrap: wrap; }
  html:not(.js) .site-header { position: static; }
  .site-nav { order: 5; flex-basis: 100%; margin-left: 0; padding-bottom: .5rem; }
  .header-call { margin-left: auto; }
  .js .site-header .wrap { flex-wrap: nowrap; }
  .js .header-call { margin-left: 0; }
  .js .nav-toggle { display: inline-flex; margin-left: auto; }
  .js .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--sky); border-bottom: 1px solid rgba(23, 38, 26, .25);
    padding: .5rem var(--gutter) 1rem;
  }
  .js .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { padding: .85rem .25rem; border-bottom: 1px solid rgba(23, 38, 26, .25); font-size: 1.05rem; }
  .site-nav a[aria-current="page"] { border-bottom: 1px solid rgba(23, 38, 26, .25); box-shadow: inset 4px 0 0 var(--ink); padding-left: .9rem; }
}

@media (max-width: 900px) {
  .lead-service, .split, .split.wide-left, .contact-grid, .call-band .wrap { grid-template-columns: 1fr; }
  .call-band .actions { justify-content: flex-start; }
  .steps { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .hero-photos { grid-template-columns: 1fr; }
  .hero-photos img:not(:first-child) { display: none; }
  .hero-photos img { height: clamp(220px, 58vw, 300px); }
  .rule-list.two-col, .guide-list { grid-template-columns: 1fr; }
  .rule-list.two-col > li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .form-row { grid-template-columns: 1fr; }
  .steps, .steps.three { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .brand-name span { display: none; }
  .brand img { width: 42px; height: 42px; }
  .site-header .wrap { gap: .6rem; min-height: 64px; }
  .header-call .num { display: none; }
  .hero .actions .btn, .page-head .actions .btn, .call-band .actions .btn { flex: 1 1 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .portfolio { grid-template-columns: 1fr 1fr; gap: 1rem .75rem; }
  .ba-pair { gap: .5rem; }
}

/* The logo itself reads "The Pond Company", so on a phone the words beside it
   step aside for the Call and Menu buttons. Still read out by screen readers. */
@media (max-width: 480px) {
  .site-header .brand-name {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

@media print {
  .site-header, .call-band, .window, .hero-photos, .banner, .page-bg { display: none; }
  .band { background: none; }
  body { background: none; }
}