/* The Pond Company
   Palette and layout carried across from the Horizons build. The brand colours
   come from the logo and the client is attached to them, so they are tokens
   here rather than literals scattered through the markup.

   The signature effect: a per page photograph pinned behind everything, with
   the content scrolling over it under a 45% sky blue wash. The Horizons build
   did that with background-attachment: fixed, which iOS Safari and most mobile
   browsers silently ignore, so the effect only ever worked on desktop. Here it
   is a position: fixed layer instead, which behaves the same everywhere. */

:root {
  --blue:        #46a1db;   /* sky, the overlay and the header */
  --lime:        #bed63a;   /* cards */
  --green:       #297f40;   /* card borders, secondary buttons */
  --forest:      #1b3022;   /* body text and dark ground */
  --pink:        #ec008c;   /* primary call to action */
  --pink-dark:   #c4007a;   /* its hover */
  --off-white:   #f9f9f6;

  --overlay:     rgba(70, 161, 219, 0.45);
  --header-bg:   rgba(70, 161, 219, 0.80);

  --radius:      12px;
  --wrap:        1180px;
  --shadow:      0 4px 6px rgba(0, 0, 0, 0.10);
  --shadow-lift: 0 8px 15px rgba(236, 0, 140, 0.30);

  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--forest);
  background: var(--forest);
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* Keyboard users need to see where they are. The Horizons build had no visible
   focus ring at all. */
:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ---------------------------------------------------------------- layout - */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.wrap.narrow { max-width: 860px; }

/* The pinned photograph. One element, behind everything, never scrolls.
   Each page sets --page-bg on the body. */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--page-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

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

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: padding .3s ease, background-color .3s ease;
}
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; padding-top: 1rem; padding-bottom: 1rem; }
.site-header.is-scrolled { background: rgba(70, 161, 219, 0.95); }
.site-header.is-scrolled .wrap { padding-top: .6rem; padding-bottom: .6rem; }

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: 0 0 auto; }
.brand img { width: 52px; height: 52px; border-radius: 10px; }
.brand-name { font-weight: 800; color: #fff; font-size: 1.05rem; line-height: 1.15; letter-spacing: .01em; }
.brand-name span { display: block; font-weight: 500; font-size: .74rem; opacity: .95; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block; padding: .5rem .8rem; border-radius: 8px;
  color: #fff; text-decoration: none; font-weight: 600; font-size: .93rem;
  transition: background-color .2s ease;
}
.site-nav a:hover { background: rgba(255, 255, 255, 0.18); }
.site-nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.26); }

.header-cta { display: flex; gap: .6rem; flex: 0 0 auto; }

.nav-toggle {
  display: none; margin-left: auto;
  background: rgba(255, 255, 255, .18); border: 0; border-radius: 8px;
  color: #fff; padding: .55rem .7rem; cursor: pointer; font-size: 1.35rem; line-height: 1;
}

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .8rem 1.6rem; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: .95rem; text-decoration: none; cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--pink); color: #fff; box-shadow: 0 4px 12px rgba(236, 0, 140, .35); }
.btn-primary:hover { background: var(--pink-dark); }
.btn-secondary { background: var(--green); color: #fff; box-shadow: 0 4px 12px rgba(41, 127, 64, .35); }
.btn-secondary:hover { background: #1f6531; }
.btn-outline { background: rgba(255,255,255,.92); color: var(--forest); border-color: var(--green); }
.btn-outline:hover { background: #fff; }
.btn-sm { padding: .5rem 1.1rem; font-size: .87rem; }

/* ------------------------------------------------------------------ hero - */

/* Transparent, so the pinned photograph is what you see. */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 9rem 0 4rem;
}
.hero.hero-tall { min-height: 100vh; }

/* No panel behind the headline. The photograph stays crisp and the words are
   held off it by the outline below, which is how the Horizons site did it. */
.hero-inner {
  padding: 0;
  max-width: 900px;
}

/* The outlined heading, carried across from the Horizons build's .heading-main.
   Four one-pixel shadows draw the outline, and a soft drop shadow lifts the
   whole thing off the photograph. Reproduced rather than reinvented: it is the
   look the client likes, and it is the only thing making the text readable now
   the panel is gone. */
.outlined,
.hero h1,
.hero p,
.section-head h2,
.section-head p,
.reviews-score,
.reviews-count {
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, .7),
     1px -1px 0 rgba(0, 0, 0, .7),
    -1px  1px 0 rgba(0, 0, 0, .7),
     1px  1px 0 rgba(0, 0, 0, .7),
     0    4px 8px rgba(0, 0, 0, .5);
}

.hero h1 {
  margin: 0 0 1rem;
  color: var(--lime);
  /* Up 10% on 5 September 2026, at Vern's request. Was 2.1 / 6vw / 4. */
  font-size: clamp(2.3rem, 6.6vw, 4.4rem);
  line-height: 1.08;
  font-weight: 800;
  text-wrap: balance;
}
/* The whole headline is lime, so the accent line only needs the line break. */
.hero h1 .accent { display: block; }
.hero p {
  margin: 0 auto 1.75rem; max-width: 700px;
  color: #fff; font-weight: 700;
  /* Up ~18%, more than the headline: this was the one that read too small,
     and at 375px the clamp minimum is what applies, so 1rem was doing all the
     work on a phone. Was 1 / 2.2vw / 1.2. */
  font-size: clamp(1.18rem, 2.6vw, 1.42rem);
}

/* The hero buttons scale with the words above them. Kept local to the hero so
   the calls to action further down the page are untouched. */
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-actions .btn { padding: .95rem 1.9rem; font-size: 1.08rem; }

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

/* The bluey wash. Content scrolls up through it while the photograph stays put. */
.section {
  position: relative; z-index: 20;
  background: var(--overlay);
  padding: 4.5rem 0;
}
.section + .section { padding-top: 0; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
/* Same outlined lime as the hero. The Horizons build used its .heading-main on
   these section titles too, not just on the h1. */
.section-head h2 {
  margin: 0 0 .75rem; color: var(--lime); font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.15; text-wrap: balance;
}
.section-head p { margin: 0; color: #fff; font-weight: 600; font-size: 1.05rem; }

.prose { color: var(--forest); }
.prose h2 { color: var(--forest); }
.prose p { margin: 0 0 1rem; }

/* ------------------------------------------------------------------ cards - */

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  background: var(--lime);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  height: 100%;
}
.card-hover:hover { border-color: var(--pink); box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.card h3 { margin: 0 0 .6rem; font-size: 1.2rem; font-weight: 800; color: var(--forest); }
.card p { margin: 0; color: var(--forest); }

.card-icon {
  width: 3.25rem; height: 3.25rem; border-radius: 10px;
  background: rgba(255, 255, 255, .55);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem; font-size: 1.6rem;
}

.card-light { background: var(--off-white); }

/* The four small stat cards */
.stat { text-align: center; }
.stat .stat-value { font-size: 1.15rem; font-weight: 800; display: block; margin-bottom: .2rem; }
.stat p { font-size: .93rem; }

/* Numbered process steps */
.step { position: relative; padding-top: 2.25rem; }
.step-number {
  position: absolute; top: -1.1rem; left: 1.4rem;
  background: var(--pink); color: #fff; font-weight: 800;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(0,0,0,.2);
}

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

.portfolio { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.portfolio figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 2px solid var(--green); background: var(--forest); }
.portfolio img { width: 100%; height: 240px; object-fit: cover; transition: transform .4s ease; }
.portfolio figure:hover img { transform: scale(1.06); }
.portfolio figcaption {
  padding: .6rem .75rem; font-size: .84rem; background: var(--off-white);
  color: var(--forest); line-height: 1.4;
}

/* Before and after. Two images side by side rather than a drag slider: it works
   with no JavaScript, on touch, and for anyone using a keyboard. */
.ba-set { display: grid; gap: 2rem; }
.ba-item { background: var(--off-white); border: 2px solid var(--green); border-radius: var(--radius); padding: 1.25rem; }
.ba-item > h3 { margin: 0 0 1rem; font-size: 1.15rem; color: var(--forest); }
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ba-pair figure { margin: 0; }
.ba-pair img { width: 100%; height: 340px; object-fit: cover; border-radius: 8px; border: 2px solid var(--green); }
.ba-pair figcaption {
  margin-top: .5rem; text-align: center; font-weight: 800; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--forest);
}
.ba-pair .is-before figcaption { color: #8a4b00; }
.ba-pair .is-after figcaption { color: var(--green); }

/* The slider that site.js builds on top of the pair above. Driven by a range
   input, so it works by drag, by touch and by arrow key, and a screen reader
   announces the position. The side by side pair is what shows if the script
   never runs, so none of this is load bearing. */
/* All six source photographs are exactly 3:4, so this box crops none of them.
   aspect-ratio rather than an in-flow sizer image: the height is then decided by
   CSS alone and does not depend on an image having loaded and decoded. */
.ba-slider {
  position: relative;
  aspect-ratio: 3 / 4;
  max-width: 460px;
  margin: 0 auto;
  border-radius: 8px; overflow: hidden;
  border: 2px solid var(--green); background: var(--forest);
}
.ba-slider img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}

/* The after shot sits on top, revealed from the left as --pos grows. */
.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: rgba(27, 48, 34, .78); color: #fff;
  font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 999px; 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; box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none;
}
.ba-slider .ba-line::after {
  content: "\2194";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--pink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* The real control, laid over the whole image and made invisible. Keeping a
   genuine range input is what buys the keyboard and screen reader behaviour;
   hiding it with display:none or opacity on a parent would throw that away. */
.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 input[type="range"]:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

.ba-hint { margin: .75rem 0 0; font-size: .84rem; text-align: center; color: var(--forest); opacity: .75; }

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

/* Click a portfolio photograph and it opens at 1200px. Built by site.js, so
   with the script blocked the grid is simply a grid of pictures. */
.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(12, 22, 16, .92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.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%;
  /* Leave room for the caption under it, whatever the viewport. */
  max-height: calc(100vh - 9rem);
  width: auto; height: auto;
  border-radius: 10px;
  border: 3px solid var(--lime);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  background: var(--forest);
}
.lightbox figcaption {
  color: #fff; font-size: .95rem; font-weight: 600; 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(--pink); color: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}
.lightbox-close:hover { background: var(--pink-dark); }

/* A spinner would be overkill; the frame simply sits empty for the moment the
   1200px file is in flight. */
.lightbox.is-loading img { opacity: .35; transition: opacity .2s ease; }

/* Nothing behind the lightbox should scroll while it is open. */
body.lightbox-open { overflow: hidden; }

@media (max-width: 560px) {
  .lightbox { padding: .75rem; }
  .lightbox-close { top: -.5rem; right: -.5rem; width: 2.4rem; height: 2.4rem; }
  .lightbox img { max-height: calc(100vh - 8rem); }
}

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

.reviews-head { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.reviews-score { font-size: 2.4rem; font-weight: 800; color: #fff; line-height: 1; }
.reviews-stars { color: #fbbc05; font-size: 1.35rem; letter-spacing: .1em; }
.reviews-count { color: #fff; font-size: .95rem; }

.review-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.25rem; }
.review {
  background: var(--off-white); border: 2px solid var(--green);
  border-radius: var(--radius); padding: 1.4rem; display: flex; flex-direction: column;
}
.review-top { display: flex; align-items: center; gap: .75rem; margin-bottom: .7rem; }
.review-avatar {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; flex: 0 0 auto;
  background: var(--blue); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.review-who { font-weight: 700; font-size: .95rem; }
.review-when { font-size: .8rem; opacity: .72; }
.review-rating { color: #fbbc05; letter-spacing: .08em; margin-bottom: .5rem; }
.review p { margin: 0 0 1rem; font-size: .93rem; }
.review a { margin-top: auto; font-size: .84rem; font-weight: 700; color: var(--green); }

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

.form-card {
  background: var(--off-white); border: 2px solid var(--green);
  border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow);
}
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 700; margin-bottom: .35rem; font-size: .93rem; }
.field .req { color: var(--pink); }
.field input, .field select, .field textarea {
  width: 100%; padding: .7rem .85rem; font: inherit; font-size: .95rem;
  border: 2px solid var(--green); border-radius: 8px; background: #fff; color: var(--forest);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--pink); }
.field textarea { min-height: 140px; resize: vertical; }
.field-hint { font-size: .82rem; opacity: .75; margin: .3rem 0 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

/* Honeypot. Off screen rather than display:none, which some bots check for. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: .87rem; margin-top: 1rem; opacity: .8; }
.form-alert { padding: 1rem 1.25rem; border-radius: 8px; margin-bottom: 1.25rem; font-weight: 600; }
.form-alert.ok  { background: #dff5e2; border: 2px solid var(--green); color: #14532d; }
.form-alert.bad { background: #ffe3f2; border: 2px solid var(--pink); color: #7a0049; }

/* Contact details beside the form */
.contact-lines { list-style: none; margin: 0; padding: 0; }
.contact-lines li { margin-bottom: 1.1rem; }
.contact-lines .label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; opacity: .7; }
.contact-lines a { font-weight: 700; font-size: 1.05rem; text-decoration: none; color: var(--forest); }
.contact-lines a:hover { color: var(--pink); }

/* ------------------------------------------------------------------- CTA - */

.cta-band { background: var(--forest); color: #fff; text-align: center; padding: 3.5rem 0; position: relative; z-index: 20; }
.cta-band h2 { margin: 0 0 .75rem; font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 800; }
.cta-band p { margin: 0 auto 1.75rem; max-width: 560px; opacity: .92; }
.cta-actions { display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; }

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

.site-footer { background: var(--forest); color: #fff; position: relative; z-index: 20; padding: 3.5rem 0 1.5rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.site-footer h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; margin: 0 0 1rem; color: var(--lime); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5rem; font-size: .93rem; }
.site-footer a { color: #fff; text-decoration: none; opacity: .9; }
.site-footer a:hover { opacity: 1; color: var(--lime); }
.footer-brand img { width: 150px; margin-bottom: 1rem; }
.footer-brand p { font-size: .93rem; opacity: .88; margin: 0; max-width: 34ch; }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.16);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .84rem; opacity: .82;
}
.footer-bottom a { text-decoration: underline; }

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

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(70, 161, 219, .98); padding: .75rem 1.25rem 1.25rem;
    box-shadow: 0 12px 24px rgba(0,0,0,.22);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: .15rem; }
  .site-nav a { padding: .8rem .9rem; }
  .header-cta { display: none; }
  .hero { min-height: 70vh; padding-top: 7.5rem; }
  .hero.hero-tall { min-height: 82vh; }
  /* No side padding here: .wrap already supplies it, and doubling it up cost
     40px of a 375px screen, which the larger type could not afford. */
  .hero-inner { padding: 0; }
  .hero-actions .btn { padding: .85rem 1.5rem; font-size: 1rem; }
  .ba-pair { grid-template-columns: 1fr; }
  .ba-pair img { height: 260px; }
  .section { padding: 3rem 0; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .portfolio { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .portfolio img { height: 170px; }
}

/* Printing a quote request or a contact page should not print the photograph. */
@media print {
  .page-bg, .site-header, .cta-band { display: none; }
  .section { background: none; padding: 1rem 0; }
  .section-head h2, .section-head p, .hero h1, .hero p { color: #000; }
}