/* ==========================================================================
   Alfresco Living Tech - site.css
   The only stylesheet on the site. Organised as:
     1. Custom properties (palette, type, spacing)
     2. Reset and base elements
     3. Layout primitives
     4. Header and navigation
     5. Hero and page intro
     6. Cards and grids
     7. Affiliate components
     8. Gallery and lightbox
     9. Footer
    10. Cookie consent
   10b. Email signup popups
   10c. Hot tub hire
    11. Utilities, print, reduced motion

   The palette is sampled from the Canva page graphics in /images so the
   hand-built pages and the owner's existing artwork read as one site.
   The caption bar in those graphics is exactly #CBC7B7.
   ========================================================================== */

/* -------------------------------------------------- 1. Custom properties */

:root {
  /* Neutrals - warm stone, sampled from the Canva caption bars */
  --cream:      #FAF8F2;
  --cream-deep: #F2EFE4;
  --stone-100:  #E8E6DD;
  --stone-200:  #D8D5C8;
  --stone-300:  #CBC7B7;
  --stone-500:  #8C8A7C;

  /* Greens - garden foliage */
  --green-900: #16261C;
  --green-800: #1E3427;
  --green-700: #2C4A35;
  --green-600: #3A6044;
  --green-400: #6E9179;

  /* Terracotta - pots, brick, the accent in the furniture artwork */
  --terracotta:      #A64B23;
  --terracotta-dark: #7E3818;
  --terracotta-tint: #F6E7DF;

  /* Brand - taken straight out of the logo artwork. --charcoal is the exact
     colour of the logo's background plate, so the header and footer use it
     and the logo sits flush with no visible edge. */
  --charcoal:      #2E2E2D;
  --charcoal-soft: #3D3D3B;
  --brand-orange:  #FF6000;

  /* Text */
  --ink:      #1B2118;
  --ink-soft: #454C41;
  --ink-mute: #61695C;

  --focus: #A64B23;

  /* Typography - system stack, no webfont request */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                  "Times New Roman", serif;

  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.25vw, 2.6rem);
  --step-4:  clamp(2.1rem, 1.65rem + 2.2vw, 3.6rem);

  /* Spacing */
  --sp-1: 0.375rem;
  --sp-2: 0.75rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 6.5rem;

  --measure: 68ch;
  --wrap: 1180px;
  --wrap-wide: 1440px;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgb(27 33 24 / 0.06), 0 3px 10px rgb(27 33 24 / 0.05);
  --shadow-md: 0 4px 12px rgb(27 33 24 / 0.08), 0 14px 34px rgb(27 33 24 / 0.09);

  --header-h: 4.5rem;
}

/* ------------------------------------------------ 2. Reset and base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  color: var(--green-900);
  margin: 0 0 var(--sp-2);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); letter-spacing: -0.015em; }
h2 { font-size: var(--step-3); letter-spacing: -0.01em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, ul, ol, dl, figure, table, blockquote { margin: 0 0 var(--sp-3); }
p { text-wrap: pretty; }

a { color: var(--terracotta-dark); text-underline-offset: 0.18em; }
a:hover { color: var(--terracotta); }

img, picture, video, svg { max-width: 100%; height: auto; display: block; }

strong, b { font-weight: 650; }

hr {
  border: 0;
  border-top: 1px solid var(--stone-200);
  margin: var(--sp-5) 0;
}

blockquote {
  margin-inline: 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--green-400);
  background: var(--cream-deep);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--step-1);
  font-family: var(--font-display);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--stone-300); color: var(--green-900); }

.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -6rem;
  z-index: 999;
  padding: var(--sp-2) var(--sp-3);
  background: var(--green-800);
  color: #fff;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* ------------------------------------------------ 3. Layout primitives */

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

main { display: block; }

.section { padding-block: var(--sp-6); }
.section-tight { padding-block: var(--sp-5); }
.section-alt { background: var(--cream-deep); }
.section-dark {
  background: var(--green-800);
  color: var(--stone-100);
}
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark a { color: var(--stone-300); }
.section-dark a:hover { color: #fff; }
.section-dark .btn-primary { color: #fff; }

/* Seasonal strip - the slim promo bar between the header and the hero on the
   home page. Cool and frosted so it separates the dark header from the hero
   photograph and reads as a time-limited message. Change the wording in the
   page; delete the <aside> there to take it down. */
.season-strip {
  background: linear-gradient(90deg, #E4EDED 0%, #F4F7F4 100%);
  border-bottom: 1px solid var(--stone-200);
  font-size: var(--step--1);
}
.season-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem var(--sp-3);
  padding-block: 0.65rem;
  text-align: center;
}
.season-strip p { margin: 0; color: var(--ink-soft); }
.season-tag {
  display: inline-block;
  margin-right: 0.45rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--green-700);
  color: #fff;
  font-weight: 700;
  font-size: 0.82em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.season-strip-link { font-weight: 650; white-space: nowrap; }
/* The second half of the sentence is dropped on phones so the strip stays a
   strip rather than pushing the hero off the screen. */
.season-strip-more { display: none; }
@media (min-width: 46rem) { .season-strip-more { display: inline; } }
.season-strip-link::after { content: " \2192"; }

.section-head { max-width: var(--measure); margin-bottom: var(--sp-4); }
.section-head p { color: var(--ink-soft); font-size: var(--step-1); margin-bottom: 0; }

.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--terracotta-dark);
  margin-bottom: var(--sp-2);
}

.prose { max-width: var(--measure); }
.prose > * + h2 { margin-top: var(--sp-5); }
.prose > * + h3 { margin-top: var(--sp-4); }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li { margin-bottom: var(--sp-1); }
.prose li::marker { color: var(--green-600); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  font-weight: 650;
  font-size: var(--step-0);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
}
.btn-primary { background: var(--terracotta); color: #fff; }
.btn-primary:hover { background: var(--terracotta-dark); color: #fff; transform: translateY(-2px); }
.btn-secondary {
  background: transparent;
  color: var(--green-800);
  border-color: var(--green-600);
}
.btn-secondary:hover { background: var(--green-800); color: #fff; border-color: var(--green-800); }
.btn-light { background: #fff; color: var(--green-900); }
.btn-light:hover { background: var(--stone-100); color: var(--green-900); transform: translateY(-2px); }

/* ------------------------------------------------ 4. Header and nav */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--charcoal);
  border-bottom: 3px solid var(--brand-orange);
}

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand img { width: 168px; height: auto; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: 1.5px solid rgb(255 255 255 / 0.35);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 650;
  color: #fff;
  cursor: pointer;
}
.nav-toggle-bars { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  align-items: center;
}
.site-nav a,
.nav-sub-toggle {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  color: #EDEBE4;
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  white-space: nowrap;
}
.site-nav a:hover { background: var(--charcoal-soft); color: #fff; }
.site-nav a[aria-current="page"] {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--brand-orange);
}

/* --- dropdown groups ---------------------------------------------------
   Opening is driven by :hover and :focus-within, so the menus are fully
   operable by mouse and by keyboard even with JavaScript disabled. The
   script only adds click-to-open and Escape-to-close on top. */

.nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.nav-sub-toggle:hover { background: var(--charcoal-soft); color: #fff; }
.has-sub.is-active > .nav-sub-toggle {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--brand-orange);
}
.chev {
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}

@media (min-width: 60.0625rem) {
  .site-nav .has-sub { position: relative; }

  .nav-sub {
    position: absolute;
    top: 100%;                      /* flush, so there is no hover gap */
    left: 0;
    z-index: 10;
    min-width: 16rem;
    padding: 0.35rem;
    background: var(--charcoal);
    border: 1px solid rgb(255 255 255 / 0.16);
    border-top: 2px solid var(--brand-orange);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  }
  .nav-sub a { white-space: normal; padding: 0.55rem 0.7rem; }

  .has-sub:hover > .nav-sub,
  .has-sub:focus-within > .nav-sub,
  .has-sub > .nav-sub-toggle[aria-expanded="true"] + .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .has-sub:hover > .nav-sub-toggle .chev,
  .has-sub:focus-within > .nav-sub-toggle .chev {
    transform: translateY(1px) rotate(225deg);
  }

  /* Right-hand groups drop leftwards so they cannot overflow the viewport. */
  .nav-top > .has-sub:nth-last-child(-n+3) > .nav-sub { left: auto; right: 0; }
}

/* Mobile: the toggle button is only shown when JS has enhanced the nav.
   Without JS the nav simply stays open, so every page remains navigable. */
.nav-toggle { display: none; }

@media (max-width: 60rem) {
  .header-inner { flex-wrap: wrap; padding-block: 0.6rem; }
  .site-nav { flex-basis: 100%; }
  .nav-top { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--sp-2); }
  .site-nav a {
    padding: 0.7rem 0.6rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.12);
  }

  /* No nested menus on small screens - each group becomes a labelled
     section that is always open, so nothing is more than one tap away. */
  .nav-sub-toggle {
    width: 100%;
    justify-content: flex-start;
    padding: 1rem 0.6rem 0.35rem;
    font-size: var(--step--1);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--stone-300);
    cursor: default;
  }
  .nav-sub-toggle:hover { background: none; color: var(--stone-300); }
  .chev { display: none; }
  .has-sub.is-active > .nav-sub-toggle { box-shadow: none; color: var(--brand-orange); }
  .nav-sub a { padding-left: 1.4rem; }

  .js .nav-toggle { display: inline-flex; }
  .js .site-nav[hidden] { display: none; }
}

@media (min-width: 60.0625rem) {
  .site-nav[hidden] { display: block; }
}

/* ------------------------------------------------ 5. Hero */

.hero { position: relative; background: var(--green-900); overflow: hidden; }
.hero picture, .hero > img { position: absolute; inset: 0; }
.hero img { width: 100%; height: 100%; object-fit: cover; }

/* Contrast scrim.

   Hero text sits on photography, so its contrast depends on whatever happens
   to be behind it - a blown-out sky will fail WCAG however light the text is,
   and text-shadow does not count towards the contrast ratio. This opaque-enough
   gradient guarantees a dark background behind the text no matter what the
   photograph does. Mobile-first it covers the whole hero, because the text
   spans the full width; on wider screens it is weighted to the left so more of
   the photograph shows through beside the copy. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(10 16 12 / 0.88) 0%, rgb(10 16 12 / 0.80) 100%);
}

@media (min-width: 52rem) {
  .hero::after {
    background: linear-gradient(96deg,
      rgb(10 16 12 / 0.92) 0%,
      rgb(10 16 12 / 0.88) 58%,
      rgb(10 16 12 / 0.55) 80%,
      rgb(10 16 12 / 0.30) 100%);
  }
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 9vw, 7.5rem);
  max-width: 46rem;
  color: #fff;
}
.hero-inner h1 { color: #fff; text-shadow: 0 2px 18px rgb(0 0 0 / 0.35); }
.hero-inner .eyebrow { color: var(--stone-300); }
.hero-lede {
  font-size: var(--step-1);
  color: #F3F1E9;
  margin-bottom: var(--sp-4);
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.35);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Compact header for utility pages with no photograph */
.page-head {
  background: var(--green-800);
  color: #fff;
  padding-block: var(--sp-5);
}
.page-head h1 { color: #fff; margin-bottom: var(--sp-2); }
.page-head p { color: var(--stone-200); max-width: var(--measure); margin-bottom: 0; }
.page-head .eyebrow { color: var(--stone-300); }

/* Poster layout - portrait key art beside the intro copy */
.poster-intro {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .poster-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
}
.poster-intro img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

/* Breadcrumbs */
.breadcrumbs { font-size: var(--step--1); padding-block: var(--sp-2); color: var(--ink-mute); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "›"; margin-right: 0.4rem; color: var(--stone-500); }
.breadcrumbs a { color: var(--ink-soft); }

/* ------------------------------------------------ 6. Cards and grids */

.grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--stone-100);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--stone-200); }
.card:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }

.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-body { padding: var(--sp-3); display: flex; flex-direction: column; flex: 1; }
.card h3 { font-size: var(--step-1); margin-bottom: var(--sp-1); }
.card p { color: var(--ink-soft); font-size: var(--step--1); margin-bottom: var(--sp-3); }
.card .card-cta { margin-top: auto; font-weight: 650; font-size: var(--step--1); text-decoration: none; }
.card .card-cta::after { content: " →"; }

/* Whole card clickable, but only one real link in the accessibility tree */
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Cards built from the Canva artwork already carry their own caption bar,
   so they are shown whole rather than cropped. */
.card-artwork img { aspect-ratio: auto; }

.feature {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-reverse > :first-child { order: 2; }
}
.feature img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.feature-body > :last-child { margin-bottom: 0; }

.checklist { list-style: none; padding: 0; }
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: var(--sp-2);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.85rem;
  height: 0.45rem;
  border-left: 2.5px solid var(--green-600);
  border-bottom: 2.5px solid var(--green-600);
  transform: rotate(-45deg);
}

.stat-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.stat { flex: 1 1 12rem; }
.stat dt { font-size: var(--step--1); color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.08em; }
.stat dd { margin: 0; font-family: var(--font-display); font-size: var(--step-2); color: var(--green-800); }

/* ------------------------------------------------ 7. Affiliate components */

/* Amazon Associates disclosure.

   Required to be visible without interaction on every page carrying Amazon
   links - and on every visit, which is why it lives here in the page and not
   only in the cookie banner (that is dismissed once and never seen again).

   Deliberately understated: a single small line under the hero copy rather
   than a full-width coloured bar across the top of the page. */
.hero-disclosure {
  margin: var(--sp-3) 0 0;
  font-size: var(--step--1);
  line-height: 1.5;
  color: #E7E4DA;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.5);
}
.hero-disclosure a { color: #E7E4DA; text-decoration-thickness: 1px; }
.hero-disclosure a:hover { color: #fff; }

/* Same line on the flat-colour page headers. */
.page-head .hero-disclosure { color: var(--stone-200); text-shadow: none; }
.page-head .hero-disclosure a { color: var(--stone-200); }

.disclosure-inline {
  font-size: var(--step--1);
  color: var(--ink-mute);
  background: var(--cream-deep);
  border-left: 3px solid var(--stone-300);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Product recommendation row */
.pick {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
  padding: var(--sp-3);
  background: #fff;
  border: 1px solid var(--stone-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-3);
}
@media (min-width: 40rem) {
  .pick { grid-template-columns: 10rem minmax(0, 1fr); align-items: start; }
}
.pick img { border-radius: 10px; background: var(--cream-deep); object-fit: contain; aspect-ratio: 1; }
.pick h3 { font-size: var(--step-1); margin-bottom: var(--sp-1); }
.pick p { font-size: var(--step--1); color: var(--ink-soft); }
.pick > div > :last-child { margin-bottom: 0; }

/* Outbound affiliate link marker */
a[rel~="sponsored"]::after {
  content: "↗";
  font-size: 0.75em;
  margin-left: 0.25em;
  vertical-align: super;
  color: var(--ink-mute);
}
.btn[rel~="sponsored"]::after { content: none; }

/* A sponsored card link needs ::after to stay the inline "↗" marker, so its
   whole-card overlay moves to ::before rather than being dropped altogether. */
.card-link[rel~="sponsored"]::after { position: static; inset: auto; }
.card-link[rel~="sponsored"]::before {
  content: "";
  position: absolute;
  inset: 0;
}

.banner-rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  align-items: center;
}
.banner-rail a { display: block; line-height: 0; }
.banner-rail img { border-radius: 8px; box-shadow: var(--shadow-sm); }

.partner-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.partner-list a {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--stone-300);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  color: var(--green-800);
  background: #fff;
}
.partner-list a:hover { background: var(--green-800); color: #fff; border-color: var(--green-800); }

/* ------------------------------------------------ 8. Gallery and lightbox */

.gallery {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.gallery figure { margin: 0; }
.gallery button {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform 0.3s ease, filter 0.3s ease;
}
.gallery button:hover img { transform: scale(1.04); filter: brightness(1.04); }
.gallery figcaption { font-size: var(--step--1); color: var(--ink-mute); padding-top: var(--sp-1); }

/* Native dialog - closes with Esc and traps focus for free */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(96vw, 1200px);
  max-height: 94vh;
  overflow: visible;
}
.lightbox::backdrop { background: rgb(12 18 12 / 0.88); }
.lightbox img {
  max-width: 100%;
  max-height: 84vh;
  width: auto;
  margin-inline: auto;
  border-radius: var(--radius);
}
.lightbox figcaption { color: var(--stone-200); text-align: center; padding-top: var(--sp-2); font-size: var(--step--1); }
.lightbox-close {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--green-900);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}

/* ------------------------------------------------ 9. Footer */

.site-footer {
  background: var(--charcoal);
  color: var(--stone-200);
  padding-block: var(--sp-6) var(--sp-4);
  margin-top: var(--sp-6);
  border-top: 3px solid var(--brand-orange);
}
.site-footer h2, .site-footer h3 {
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.site-footer a { color: var(--stone-200); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.4rem; font-size: var(--step--1); }
.footer-brand img { width: 190px; }
.footer-brand p { font-size: var(--step--1); color: var(--stone-300); margin-top: var(--sp-2); }
.footer-legal {
  border-top: 1px solid rgb(255 255 255 / 0.14);
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--stone-300);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
}
.footer-legal p { margin: 0; }
.footer-legal ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; padding: 0; }

/* ------------------------------------------------ 10. Cookie consent */

.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 200;
  background: var(--charcoal);
  color: var(--stone-100);
  border-top: 3px solid var(--brand-orange);
  padding: var(--sp-3) 0;
  box-shadow: 0 -8px 30px rgb(0 0 0 / 0.25);
}
.consent[hidden] { display: none; }
.consent-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
}
.consent-copy { max-width: 68ch; }
.consent p { margin: 0; font-size: var(--step--1); }
.consent-affiliate {
  margin-bottom: 0.4rem !important;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.14);
  color: #fff;
}
.consent a { color: var(--stone-300); }
.consent-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.consent .btn { padding: 0.6rem 1.2rem; font-size: var(--step--1); }
.consent-reject {
  background: transparent;
  color: var(--stone-100);
  border-color: var(--stone-500);
}
.consent-reject:hover { background: rgb(255 255 255 / 0.12); color: #fff; }

/* ------------------------------------------ 10b. Email signup popups

   Shown only when a visitor arrives on a URL carrying ?popup=thanks or
   ?popup=already - the two addresses AWeber redirects to after a signup.
   The markup is built by site.js, so no page file carries it. */

.signup-dialog {
  border: 0;
  padding: 0;
  width: min(92vw, 33rem);
  border-radius: var(--radius-lg);
  background: var(--cream);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  overflow: visible;
}
.signup-dialog::backdrop { background: rgb(12 18 12 / 0.66); }
.signup-inner {
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  text-align: center;
  border-top: 4px solid var(--brand-orange);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.signup-mark {
  display: block;
  margin: 0 auto var(--sp-2);
  width: 3.25rem;
  height: 3.25rem;
  line-height: 3.25rem;
  border-radius: 50%;
  background: var(--terracotta-tint);
  color: var(--terracotta);
  font-size: 1.6rem;
}
.signup-dialog h2 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  margin: 0 0 var(--sp-2);
  color: var(--green-900);
}
.signup-dialog p {
  margin: 0 auto var(--sp-2);
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.signup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-3);
}
.signup-dialog .btn { padding: 0.7rem 1.35rem; font-size: var(--step--1); }
.signup-close {
  position: absolute;
  top: -0.6rem;
  right: -0.6rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 0;
  background: var(--charcoal);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.signup-close:hover { background: var(--terracotta); }

@media (max-width: 30rem) {
  .signup-close { top: 0.35rem; right: 0.35rem; }
  .signup-actions .btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------ 10c. Hot tub hire

   The /hot-tub-hire/ page and its homepage banner. The booking form does not
   post anywhere: site.js turns it into a pre-filled WhatsApp message. */

.hire-price {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius);
  background: var(--terracotta-tint);
  border-left: 4px solid var(--terracotta);
}
.hire-price p { margin: 0; }
.hire-price-label { font-size: var(--step--1); font-weight: 650; color: var(--ink-soft); }
.hire-price-amount {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.15;
  color: var(--terracotta-dark);
}
.hire-price-note { font-size: var(--step--1); color: var(--ink-soft); }

.hire-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  counter-reset: hire-step;
}
.hire-steps li {
  counter-increment: hire-step;
  padding: var(--sp-3);
  background: #fff;
  border: 1px solid var(--stone-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.hire-steps li::before {
  content: counter(hire-step);
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--sp-2);
  border-radius: 50%;
  background: var(--green-700);
  color: #fff;
  font-weight: 700;
  line-height: 2.25rem;
  text-align: center;
}
.hire-steps h3 { font-size: var(--step-1); margin-bottom: var(--sp-1); }
.hire-steps p { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }

.notice.hire-heat-notice {
  max-width: 48rem;
  margin-bottom: var(--sp-3);
  background: var(--terracotta-tint);
  border-color: var(--terracotta);
}

.hire-form {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  max-width: 48rem;
  padding: var(--sp-4);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.hire-field-wide { grid-column: 1 / -1; }
.hire-field label { display: block; margin-bottom: 0.35rem; font-weight: 650; }
.hire-optional { font-weight: 400; color: var(--ink-mute); }
.hire-field input,
.hire-field select,
.hire-field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--stone-300);
  border-radius: 10px;
}
.hire-field input:focus,
.hire-field select:focus,
.hire-field textarea:focus {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}
.hire-check { display: flex; align-items: flex-start; gap: 0.6rem; }
.hire-check input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; flex: none; accent-color: var(--terracotta); }
.hire-check label { margin: 0; }

.hire-form-note { margin: var(--sp-2) 0 0; font-size: var(--step--1); color: var(--ink-mute); }
.hire-direct { margin: var(--sp-3) 0 0; }
.hire-direct a { font-weight: 650; }

.hire-faq details {
  border-bottom: 1px solid var(--stone-200);
  padding-block: var(--sp-2);
}
.hire-faq summary {
  cursor: pointer;
  font-weight: 650;
  color: var(--green-800);
}
.hire-faq details p { margin: var(--sp-2) 0 0; color: var(--ink-soft); }

/* Gift vouchers */
.voucher-card {
  position: relative;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  background: #fff;
  border: 2px dashed var(--terracotta);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.voucher-card p { margin: 0; color: var(--ink-soft); }
.voucher-card .voucher-card-label {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta-dark);
}
.voucher-card .voucher-card-amount {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.2;
  color: var(--green-900);
  margin-bottom: var(--sp-1);
}
.voucher-points { margin-top: var(--sp-4); }
.hire-banner strong { color: #fff; }

/* Homepage banner */
.hire-banner {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--green-800);
  color: var(--stone-100);
  box-shadow: var(--shadow-md);
}
@media (min-width: 48rem) {
  .hire-banner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.hire-banner img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hire-banner-body { padding: var(--sp-4); align-self: center; }
.hire-banner .eyebrow { color: var(--stone-300); }
.hire-banner h2 { color: #fff; }
.hire-banner p { color: var(--stone-200); }
.hire-banner-price { font-family: var(--font-display); font-size: var(--step-2); color: #fff; }

/* ------------------------------------------------ 11. Utilities */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.center { text-align: center; }
.center .section-head, .center .prose { margin-inline: auto; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--sp-4); }
.lede { font-size: var(--step-1); color: var(--ink-soft); }

.tag {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 650;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--stone-100);
  color: var(--green-800);
}

.notice {
  padding: var(--sp-3);
  border-radius: var(--radius);
  background: var(--cream-deep);
  border: 1px solid var(--stone-200);
}
.notice > :last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .btn:hover { transform: none; }
  .gallery button:hover img { transform: none; }
}

@media print {
  .site-header, .site-footer, .consent, .banner-rail, .hero img { display: none; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}