/* ==========================================================================
   The Christmas Decorators Worcester
   Mobile-first. Breakpoints: 640px, 960px, 1200px.
   ========================================================================== */

:root {
  /* Palette: gold from the logo drives accents, neutrals do the rest */
  --ivory: #fbf8f2;
  --paper: #f4eee3;
  --white: #ffffff;
  --ink: #1a1f2d;
  --ink-deep: #11141d;
  --ink-soft: #4b5163;
  --navy: #2c3346; /* background navy for dark bands and sections */
  --gold: #d9a430;
  --gold-hover: #c8921f;
  --gold-deep: #8a6516;
  --gold-dark: #b3801c;
  --line: #e4dccd;
  --form-bg: #ffffff;
  --hero-form-bg: rgba(255, 255, 255, .95);
  --trustpilot: #00b67a;

  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Butler", Georgia, "Times New Roman", serif;

  --container: calc(83rem + 2 * var(--gutter)); /* content area 1328px plus side margins */
  --gutter: clamp(1.5rem, 5vw, 3.5rem);
  --header-h: 5rem;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 960px) {
  :root { --header-h: 6.75rem; }
}

/* Wide screens: generous side margins (96px at 1600, 115px at 1920) */
@media (min-width: 1200px) {
  :root { --gutter: clamp(6rem, 6vw, 8rem); }
}

/* ---------- Fonts ----------
   Butler by Fabian De Smet, licensed via Dafont. Font files list
   CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0/). Self-hosted. */
@font-face {
  font-family: "Butler";
  src: url("../fonts/butler-medium.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Butler";
  src: url("../fonts/butler-bold.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

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

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

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2 { font-size: clamp(1.875rem, 4.2vw, 2.875rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p { margin: 0; }

a { color: inherit; }

[id] { scroll-margin-top: var(--header-h); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section-title {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Spam trap field in the WordPress forms: off-screen for people, filled in by bots */
.enquiry-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--navy);
  color: var(--ivory);
}
.skip-link:focus { top: 1rem; }

.tp-stars {
  color: var(--trustpilot);
  letter-spacing: .1em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .9rem 1.6rem;
  border: 0;
  border-radius: 0;
  font: 600 .8125rem/1.2 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--navy); color: var(--ivory); }

/* Text CTA: no background, gold text */
.btn--text {
  padding-inline: 0;
  background: none;
  color: var(--gold-dark);
  letter-spacing: .04em;
}
.btn--text:hover { color: var(--gold-deep); }

/* Outline CTA (form submits): gold keyline and text, fills gold on hover */
.btn--outline {
  background: transparent;
  color: var(--gold);
  box-shadow: inset 0 0 0 1.5px var(--gold);
  letter-spacing: .04em;
}
.btn--outline:hover { background: var(--gold); color: var(--ink); }

.btn--ink { background: var(--navy); color: var(--ivory); }
.btn--ink:hover { background: var(--gold); color: var(--ink); }

.btn--block { width: 100%; }
/* Tighter padding for the form submit buttons */
.btn--compact {
  justify-self: start;
  width: auto;
  min-height: 0;
  padding: .6rem;
  letter-spacing: .06em;
  white-space: nowrap;
}
/* Small tree mark after the CTA label, in the button's text colour */
.btn__icon {
  flex: none;
  width: auto;
  height: 1.15em;
  aspect-ratio: 251 / 348;
  margin-left: .45em;
  fill: currentColor;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(10px);
  }
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -24px rgba(26, 31, 45, .45);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: var(--header-h);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header__logo { margin-right: auto; }
.site-header__logo img { width: auto; height: 3.5rem; }

.site-header__actions { display: flex; align-items: center; gap: 1.75rem; }
.site-header__cta,
.site-header__phone { display: none; }

.site-header__phone {
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  color: var(--ink);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.site-header__phone:hover { color: var(--gold-deep); }

.site-header__call {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.site-header__call,
.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.375rem;
  height: 2px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle__bars { position: relative; }
.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); }

/* Mobile drawer */
.site-nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  padding: 1rem var(--gutter) 2rem;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 30px 40px -30px rgba(26, 31, 45, .35);
  transform: translateY(-.75rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
}
.site-nav.is-open {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.site-nav__list { list-style: none; margin: 0; padding: 0; }
.site-nav__list a {
  display: block;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.375rem;
  text-decoration: none;
}

.site-nav__phone {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  margin-top: 1.25rem;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

@media (min-width: 640px) {
  .site-header__cta { display: inline-flex; margin-left: .5rem; }
}

@media (min-width: 1024px) {
  .site-header__logo img { height: 5.25rem; }
  .site-header__call,
  .nav-toggle { display: none; }

  .site-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .site-nav__list { display: flex; gap: 1.75rem; }
  .site-nav__list a {
    position: relative;
    padding: .5rem 0;
    border: 0;
    font-family: var(--font-body);
    font-size: .875rem;
    font-weight: 500;
  }
  /* Short vertical gold line that draws straight down beneath the link on hover */
  .site-nav__list a::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 3px;
    height: 1.1rem;
    margin-left: -1.5px;
    background: var(--gold);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .3s var(--ease);
  }
  .site-nav__list a:hover::after,
  .site-nav__list a:focus-visible::after { transform: scaleY(1); }

  .site-nav__phone { display: none; }

  /* Three columns: phone + CTA | centred logo | menu */
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "actions logo nav";
    gap: 2rem;
  }
  .site-header__logo { grid-area: logo; margin: 0; }
  .site-nav { grid-area: nav; justify-self: end; }
  .site-header__actions { grid-area: actions; justify-self: start; }
  .site-header__cta { margin-left: 0; white-space: nowrap; }
}

@media (min-width: 1200px) {
  .site-header__phone { display: inline-flex; }
}

/* ---------- Hero ---------- */
.hero { position: relative; }

.hero__media { display: block; position: relative; }
.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hero__inner {
  display: grid;
  gap: 2.5rem;
  padding-block: 2rem 1.75rem;
}

.hero h1 {
  color: var(--gold-dark);
  font-size: clamp(3rem, 12vw, 6rem);
  font-weight: 700;
  line-height: .92;
  text-align: center;
}
.hero__title-main { display: block; }
.hero__title-sub {
  display: block;
  margin-top: .2em;
  font-family: var(--font-body);
  font-size: .5em;
  font-weight: 400;
  letter-spacing: .01em;
}


.hero__mobile-cta { width: 100%; margin-top: 1.75rem; }

.hero__heading { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Trustpilot tab under "For Homes" */
.hero__rating {
  display: inline-block;
  margin-top: 1.25rem;
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 600;
  white-space: nowrap;
}
.hero__rating .tp-stars { margin-right: .35rem; font-size: 1.125rem; }

/* Top band of the hero form stack: navy, small gold tree on the left,
   intro and perk split by a short gold divider; 4px gap above the form */
.hero__band.hero__intro {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 4px;
  padding-inline: 1.25rem;
  background: var(--navy);
  color: var(--ivory);
  line-height: 1.4;
}
.hero__intro-icon { flex: none; width: auto; height: 2.75rem; }
.hero__intro-text { flex: 1; text-wrap: balance; }
.hero__perk {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid var(--gold);
  color: var(--gold);
  font-weight: 600;
}

/* Band under the hero form card: navy like the top band, 4px gap */
.hero__band.hero__talk { margin-top: 4px; background: var(--navy); color: var(--ivory); }
.hero__band {
  padding: 1.1rem clamp(1.5rem, 3vw, 2.25rem);
  background: var(--hero-form-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 500;
  text-align: center;
}
.hero__talk a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
}

@media (min-width: 960px) {
  /* Panoramic photo shown whole (full width, no side crop) across the top of
     the hero; the form column overlaps down past it onto the page background. */
  /* Photo height comes from the hero's own width (cqw), not the window's
     (100vw includes the scrollbar and left a light line under the photo) */
  .hero {
    container-type: inline-size;
    overflow: hidden;
  }
  .hero__inner {
    --photo-h: calc(100cqw * 1394 / 3204);
    min-height: var(--photo-h);
  }
  .hero__media {
    position: absolute;
    inset: 0 0 auto 0;
  }
  /* 1px taller than the photo's ratio to cover sub-pixel rounding at the bottom */
  .hero__media img { height: calc(100cqw * 1394 / 3204 + 1px); aspect-ratio: auto; }

  .hero__inner {
    position: relative;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 37rem);
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
    /* Form column centred vertically on the photo */
    padding-block: 2rem;
  }

  .hero__mobile-cta { display: none; }
  /* Centre the headline vertically on the photo */
  .hero__copy {
    display: flex;
    align-items: center;
    margin-left: -30px;
    min-height: calc(var(--photo-h) - 4rem);
  }
  /* Compact hero form stack so the hero stays short */
  .hero__band { padding-block: .8rem; }
  .hero .form-card { --card-pad: 1.75rem; }
  .hero .enquiry-form { margin-top: 1rem; gap: .5rem; }
  .hero .field input { min-height: 2.75rem; }

  /* Over the full-colour photo: white headline with a soft, dispersed shadow
     in a deep warm brown sampled from the photo's garland shadows (#3a2a22) */
  .hero h1 {
    display: inline-block;
    color: var(--white);
    text-shadow: 0 6px 80px rgba(58, 42, 34, .75), 0 4px 36px rgba(58, 42, 34, .45);
  }
  /* Rating sits straight on the photo: white text, same warm shadow */
  .hero__rating {
    color: var(--white);
    text-shadow: 0 6px 80px rgba(58, 42, 34, .75), 0 4px 36px rgba(58, 42, 34, .45);
  }
}

/* ---------- Form card (hero + final) ---------- */
.form-card {
  --card-pad: clamp(1.5rem, 3vw, 2.25rem);
  padding: var(--card-pad);
  background: var(--form-bg);
  border-top: 3px solid var(--gold);
  box-shadow: 0 30px 60px -30px rgba(17, 20, 29, .35);
  color: var(--ink-soft);
}

/* Hero version: no gold rule, translucent over the photo */
.hero .form-card {
  border-top: 0;
  background: var(--hero-form-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: none;
  color: var(--ink);
}

.form-card__title {
  font-size: clamp(1.375rem, 2.4vw, 1.625rem);
}
.form-card__note { margin-top: .35rem; font-size: .9375rem; }
/* Hero form heading: bold title + note on one line, all Montserrat */
.form-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .6rem;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.4;
}
.form-card__head-title { font-weight: 700; }
.form-card__head .form-card__note { margin: 0; font-size: inherit; }
.form-card__reply {
  margin-top: -.25rem;
  font-size: .8125rem;
  text-align: left;
}

.enquiry-form {
  display: grid;
  gap: .75rem;
  margin-top: 1.25rem;
}
/* Four text fields in a 2x2 grid; everything else full width */
@media (min-width: 400px) {
  .enquiry-form { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .enquiry-form > :not(.field) { grid-column: 1 / -1; }
}
/* Hero form: submit button and reply note share one row */
@media (min-width: 640px) {
  .enquiry-form .btn:has(+ .form-card__reply) { grid-column: 1; }
  .enquiry-form .btn + .form-card__reply {
    grid-column: 2;
    align-self: center;
    margin: 0;
    padding-left: 1rem;
    text-align: left;
  }
}

.field input {
  width: 100%;
  min-height: 3.1rem;
  padding: .75rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 400 1rem/1.4 var(--font-body);
  transition: border-color .2s, background-color .2s;
}
.field input::placeholder { color: #7d8294; font-size: .875rem; }
.field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 1px 0 var(--gold);
}
.field input[aria-invalid="true"] { border-color: #b3261e; }

/* Question and options on one line; wraps on narrow screens.
   Floating the legend lets it sit in the row like the options. */
.choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.25rem;
  margin: .25rem 0 .5rem;
  padding: 0;
  border: 0;
}
.choice legend {
  float: left;
  margin-right: .25rem;
  color: var(--ink);
  font-size: .875rem;
  font-weight: 600;
}
.choice label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  font-size: .9375rem;
  cursor: pointer;
}
/* Custom radios: no fill by default, gold dot when selected */
.choice input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 1px solid #7d8294;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.choice input:checked {
  border-color: var(--gold-deep);
  background: radial-gradient(circle, var(--gold-deep) 0 40%, transparent 45%);
}

.enquiry-form__status:empty { display: none; }
.enquiry-form__status {
  padding: .75rem 1rem;
  background: var(--paper);
  color: var(--ink);
  font-size: .9375rem;
}
.enquiry-form__status.is-error { background: #fbeceb; color: #8c1d18; }

/* ---------- Booking strip ---------- */
.strip {
  background: var(--navy);
  color: var(--ivory);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
}
.strip p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .35rem 1rem;
  padding-block: 1rem;
  text-align: center;
}
.strip svg { display: none; width: .7rem; height: .7rem; fill: var(--gold); }
.strip__highlight { color: var(--gold); font-weight: 600; }

/* Phones and tablets: the three lines stack; desktop: one row with stars */
@media (max-width: 1199px) {
  .strip p { flex-direction: column; gap: .3rem; }
}
@media (min-width: 1200px) {
  .strip svg { display: block; }
}

/* ---------- Intro ---------- */
.intro {
  padding-block: clamp(4.5rem, 9vw, 7.5rem) clamp(4rem, 8vw, 6rem);
  text-align: center;
  /* White background bleeds edge to edge beyond the container */
  background: var(--white);
  box-shadow: 0 0 0 100vmax var(--white);
  clip-path: inset(0 -100vmax);
}
.intro h2 { color: var(--gold-dark); line-height: 1.05; }
.decorate .section-title,
.team h2 { color: var(--gold-dark); }
.intro__lead,
.intro__body {
  max-width: 48rem;
  margin-inline: auto;
}
.intro__lead {
  margin-top: .5rem;
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--gold-dark);
}
.intro__body { max-width: 72rem; margin-top: 1.25rem; line-height: 1.55; text-wrap: balance; }

/* Four points: full-width carousel, one point per slide (main.js) */
.intro__carousel { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
/* Short gold divider above the carousel */
.intro__carousel::before {
  content: "";
  display: block;
  width: 20rem;
  max-width: 100%;
  height: 1px;
  margin: 0 auto clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--gold);
}
.intro__points {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden; /* never a vertical scroller, so page scrolling can't get caught here */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.intro__points::-webkit-scrollbar { display: none; }
.intro__points li { scroll-snap-align: start; }
.intro__points h3 { color: var(--ink); font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.15; }
.intro__points p { margin: 1rem auto 0; line-height: 1.55; text-wrap: balance; }
.intro__carousel .carousel__controls { margin-top: 1rem; }

/* ---------- Tick lists ---------- */
.ticks {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ticks li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--ink);
}
/* Gold star bullet: star icon (assets/images/icons/star.svg) inlined as a mask,
   so the colour comes from CSS and it also shows when opened from file:// */
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .47em;
  width: .765rem;
  height: .73rem;
  background: var(--gold);
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 253.44 240.68'%3E%3Cpolygon points='127.56 0 156.57 91.76 253.44 91.01 175.31 148.49 204.95 240.68 127.02 183.77 48.48 240.68 78.13 148.49 0 91.01 96.12 91.44 127.56 0'/%3E%3C/svg%3E");
  -webkit-mask: var(--star) center / contain no-repeat;
  mask: var(--star) center / contain no-repeat;
}

@media (min-width: 640px) {
  .ticks--2col { grid-template-columns: repeat(2, max-content); column-gap: 3rem; }
}

/* ---------- What we decorate ---------- */
.decorate {
  position: relative;
  z-index: 1;
  /* Matches the title's bottom margin (.section-title) */
  padding-top: calc(clamp(2rem, 4vw, 3.25rem) + 6px);
}

.decorate__grid {
  display: grid;
  gap: 1.5rem;
  margin-bottom: -6rem;
}

.decorate-card {
  background: var(--white);
}
.decorate-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.decorate-card__body {
  display: grid;
  gap: .6rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.decorate-card__body .ticks { margin-top: .75rem; }
/* Title + tagline on one line, all Montserrat */
.decorate-card__title {
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}
.decorate-card__title strong { color: var(--ink); font-weight: 700; }
@media (min-width: 960px) and (max-width: 1599px) {
  .decorate-card__title { font-size: .875rem; }
  .decorate-card .ticks--2col { column-gap: 1.5rem; }
  .decorate-card__body { padding-inline: 1.5rem; }
}
/* Small laptops: Outside bullets in one column so the card doesn't overflow */
@media (min-width: 960px) and (max-width: 1199px) {
  .decorate-card .ticks--2col { grid-template-columns: 1fr; }
}

@media (min-width: 960px) {
  .decorate__grid { grid-template-columns: minmax(0, 1427fr) minmax(0, 1335fr); }
  /* Both photos shown whole at their own shape (never cropped). Card widths
     are in proportion to the photos' ratios (1.427 : 1.335), so the two
     photos come out the same height and the cards stay level. */
  .decorate-card { display: flex; flex-direction: column; }
  .decorate-card--outside img { aspect-ratio: 1200 / 841; height: auto; }
  .decorate-card--inside img { aspect-ratio: 1200 / 899; height: auto; }
}

/* ---------- Everything included ---------- */
.included {
  padding-block: calc(6rem + clamp(3.5rem, 7vw, 5.5rem)) clamp(3.5rem, 7vw, 5.5rem);
  background: var(--ivory);
}
.included__inner {
  display: grid;
  gap: 2.25rem;
}
.included__intro p { margin-top: .75rem; font-size: 1.0625rem; }
.included__intro .btn { margin-top: 1.75rem; }
/* Mobile: tighter space above the button */
@media (max-width: 959px) {
  .included__inner { gap: 1.25rem; }
  .included__intro .btn { margin-top: .75rem; }
}

.included__list { align-self: center; }

/* Large Butler braces either side of the list (tablet up) */
.included__bracket { display: grid; align-items: center; }
.included__brace { display: none; }

@media (min-width: 640px) {
  .included__list { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .included__bracket { grid-template-columns: auto 1fr auto; column-gap: clamp(1.25rem, 3vw, 2.5rem); }
  .included__brace {
    display: block;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(8rem, 13.5vw, 12.5rem);
    font-weight: 500;
    line-height: .8;
    transform: translateY(.05em);
  }
}
@media (min-width: 960px) {
  .included__inner { grid-template-columns: auto 1fr; gap: 3rem; }
}

/* ---------- Gallery ---------- */
.gallery {
  padding-block: clamp(4.5rem, 9vw, 7rem) clamp(4rem, 8vw, 6rem);
  background: var(--navy);
}
.gallery .section-title { color: var(--ivory); }

.gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.gallery figure {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.gallery figure:hover img { transform: scale(1.015); }
.gallery figcaption {
  padding-top: .6rem;
  color: rgba(251, 248, 242, .82);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
}

@media (min-width: 768px) {
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .gallery figure:first-child { grid-column: span 2; grid-row: span 2; }
  .gallery figure:first-child img { flex: 1 1 0; height: 0; min-height: 0; aspect-ratio: auto; }
}

/* ---------- How it works + reviews share one surface ---------- */
.how { background: var(--paper); }
.reviews { background: var(--white); }

.how { padding-block: clamp(4.5rem, 9vw, 7rem) clamp(2.5rem, 5vw, 4rem); }

/* Mobile/tablet: hand-drawn vertical wave (how-it-works-line-vertical.svg)
   runs from step 1 to step 5, weaving past the outside of each circle.
   Steps are equal height so the wave's bends land on each step; the wave
   is as wide as a circle and centred on the circle column. */
.steps {
  --step-h: 5.5rem;
  --step-gap: 1.25rem;
  --pitch: calc(var(--step-h) + var(--step-gap));
  --wave-w: 3.25rem;
  --wave-left: -.125rem;
  counter-reset: step;
  position: relative;
  display: grid;
  grid-auto-rows: var(--step-h);
  gap: var(--step-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: var(--wave-left);
  width: var(--wave-w);
  height: calc(var(--pitch) * 4);
  background: url("../images/how-it-works-line-vertical.svg") center / 100% 100% no-repeat;
  /* Flipped so the thick end of the stroke is at step 5 */
  transform: scaleY(-1);
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 4.75rem;
  min-height: 3rem;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  /* Butler's digits sit high in the line box: nudge them to the optical centre */
  padding-top: .2em;
  border-radius: 50%;
  background: #d2a740;
  color: var(--paper); /* matches the section background */
  font: 600 1.25rem/1 var(--font-display);
}
.steps h3 { font-size: 1.25rem; padding-top: .55rem; }
.steps p { margin-top: .25rem; }
/* Phones: text wraps more, so taller equal rows */
@media (max-width: 639px) {
  .steps { --step-h: 6.75rem; }
}
@media (max-width: 379px) {
  .steps { --step-h: 8rem; }
}
@media (max-width: 339px) {
  .steps { --step-h: 9.25rem; }
}

.how__cta { margin-top: 2.75rem; text-align: center; }
/* Label and tree in the section's paper colour */
.how__cta .btn { color: var(--paper); }

@media (min-width: 1200px) {
  /* Hand-drawn line (assets/images/how-it-works-line.svg). Its five dots sit at
     each column centre: 5 equal columns with no gap, and the SVG placed so its
     first and last dots land at 10% and 90%. Sizes use cqw (steps width). */
  .steps {
    container-type: inline-size;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: auto;
    gap: 0;
    text-align: center;
  }
  .steps::before {
    left: 8.35%;
    top: 0;
    bottom: auto;
    width: 83.26%;
    height: auto;
    margin: 0;
    aspect-ratio: 1326.08 / 68.25;
    background: url("../images/how-it-works-line.svg") center / 100% 100% no-repeat;
    transform: none;
  }
  .steps li { padding: calc(4.29cqw + 1.5rem) .75rem 0; }
  .steps li::before {
    left: 50%;
    top: .89cqw;
    width: 3.3cqw;
    height: 3.3cqw;
    background: none;
    font-size: clamp(1rem, 1.6cqw, 1.5rem);
    transform: translateX(-50%);
  }
  .steps h3 { padding-top: 0; }
}

/* ---------- Reviews ---------- */
.reviews { padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(4.5rem, 9vw, 7rem); }

.reviews__head {
  margin-bottom: 2.25rem;
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.reviews__head p { margin-top: .75rem; font-weight: 500; }

/* Carousel: native scroll-snap (swipe/drag/trackpad), arrows + dots in main.js.
   1 review per view on mobile, 2 on tablet, 3 on desktop. */
/* The track runs out into the side gutters; white fades there soften
   reviews as they slide in and out, without fading the ones at rest */
.reviews__viewport { position: relative; }
.reviews__viewport::before,
.reviews__viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: var(--gutter);
  pointer-events: none;
}
.reviews__viewport::before {
  left: calc(var(--gutter) * -1);
  background: linear-gradient(to right, var(--white) 15%, rgba(255, 255, 255, 0));
}
.reviews__viewport::after {
  right: calc(var(--gutter) * -1);
  background: linear-gradient(to left, var(--white) 15%, rgba(255, 255, 255, 0));
}

.reviews__track {
  --per-view: 1;
  --gap: 1.5rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: hidden; /* never a vertical scroller, so page scrolling can't get caught here */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.reviews__track::-webkit-scrollbar { display: none; }

.review {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  text-align: center;
  scroll-snap-align: start;
}
.review p {
  flex: 1;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.65;
}
.review footer {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.carousel__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold-dark);
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), opacity .25s;
}
.carousel__arrow svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.carousel__arrow:hover:not(:disabled) { color: var(--gold); }
.carousel__arrow:disabled { opacity: .3; cursor: default; }

.carousel__dots { display: flex; gap: .5rem; }
.carousel__dots span {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--line);
  transition: background-color .25s, transform .25s;
}
.carousel__dots span.is-active { background: var(--gold); transform: scale(1.25); }

@media (min-width: 640px) {
  .reviews__track { --per-view: 2; }
}
@media (min-width: 960px) {
  .reviews__track { --per-view: 3; --gap: 3rem; }
}

/* ---------- Meet the team ---------- */
.team { padding-block: clamp(4.5rem, 9vw, 7.5rem) clamp(3rem, 6vw, 4.5rem); }

.team__inner {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
.team__photo {
  width: 100%;
  aspect-ratio: 1000 / 1100;
  object-fit: cover;
  outline: 1px solid rgba(255, 255, 255, .75);
  outline-offset: -1rem;
}
/* Two-photo slider: arrows sit on the photo, inside the inner border */
.team__media { position: relative; }
.team__slides {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden; /* never a vertical scroller, so page scrolling can't get caught here */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.team__slides::-webkit-scrollbar { display: none; }
.team__slides li { scroll-snap-align: start; }
.team__controls {
  position: absolute;
  inset: 50% 1.5rem auto;
  justify-content: space-between;
  margin: 0;
  transform: translateY(-50%);
  pointer-events: none;
}
.team__controls .carousel__dots { display: none; }
.team__controls .carousel__arrow {
  color: var(--white);
  filter: drop-shadow(0 1px 4px rgba(17, 20, 29, .6));
  pointer-events: auto;
}
.team__controls .carousel__arrow svg { width: 1.6rem; height: 1.6rem; }
.team__controls .carousel__arrow:hover:not(:disabled) { color: var(--gold); }
.team__copy p { margin-top: 1rem; font-size: 1.0625rem; }
.team__copy .team__lead {
  margin-top: 1.25rem;
  color: var(--ink);
  font-size: clamp(1.125rem, 1.8vw, 1.25rem);
  line-height: 1.6;
}

@media (min-width: 960px) {
  .team__inner { grid-template-columns: 5fr 6fr; gap: clamp(3rem, 7vw, 6.5rem); }
}

/* ---------- Areas ---------- */
.areas { padding-bottom: clamp(4.5rem, 9vw, 7rem); }

.areas__inner {
  display: grid;
  gap: 2.5rem;
  padding-top: clamp(3rem, 6vw, 4.5rem);
  /* Divider sits inside the gutters, aligned with the content */
  background: linear-gradient(var(--line), var(--line)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.areas__inner > div > p { margin-top: 1rem; }
.areas__inner > div > .btn { margin-top: 1.75rem; }


.areas__map {
  width: 100%;
  height: auto;
  aspect-ratio: 836.56 / 793.81;
}

@media (min-width: 960px) {
  .areas__inner { grid-template-columns: 1.35fr 1fr; gap: 4.5rem; align-items: center; }
}

/* ---------- FAQs ---------- */
.faqs {
  padding-block: clamp(4.5rem, 9vw, 7rem) clamp(5rem, 10vw, 8rem);
  /* White background bleeds edge to edge beyond the container */
  background: var(--white);
  box-shadow: 0 0 0 100vmax var(--white);
  clip-path: inset(0 -100vmax);
}


/* Each FAQ: question, answer (one line until opened), chevron.
   The whole row is clickable via the stretched button. */
.faq {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "q icon" "a a";
  column-gap: 1.5rem;
  row-gap: .5rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid rgba(26, 31, 45, .07);
}
.faq:last-child { border-bottom: 0; }
.faq__q {
  grid-area: q;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}
.faq__toggle {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .2s;
}
/* Stretch the button's hit area over the whole row */
.faq__toggle::after { content: ""; position: absolute; inset: 0; }
.faq__toggle:focus-visible { outline: none; }
.faq__toggle:focus-visible::after { outline: 2px solid var(--gold); outline-offset: 2px; }
.faq:hover .faq__toggle,
.faq.is-open .faq__toggle { color: var(--gold-deep); }

.faq__a { grid-area: a; }
.faq__a p { max-width: 48rem; }
.faq:not(.is-open) .faq__a p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}

.faq__icon {
  grid-area: icon;
  align-self: start;
  width: .7rem;
  height: .7rem;
  margin-top: .3rem;
  border: solid var(--gold-deep);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.faq.is-open .faq__icon { transform: translateY(.3rem) rotate(-135deg); }

/* Desktop: question left, answer right, chevron far right */
@media (min-width: 960px) {
  .faq {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
    grid-template-areas: "q a icon";
    column-gap: clamp(2rem, 5vw, 5rem);
    padding-block: 1.6rem;
  }
  .faq__a p { max-width: none; }
}

/* ---------- Final CTA ---------- */
.final {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 10vw, 8rem);
  background:
    radial-gradient(60rem 30rem at 15% 0%, rgba(217, 164, 48, .16), transparent 60%),
    var(--navy);
  color: rgba(251, 248, 242, .82);
}
.final__inner {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
.final h2 {
  color: var(--ivory);
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  line-height: 1.08;
}
.final h2 em { color: var(--gold); font-weight: 500; }
/* White tree watermark behind the "Christmas, handled." copy */
.final__copy { position: relative; isolation: isolate; }
.final__copy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Centred in the whole navy panel; 85% of its previous height */
  background: url("../images/logo-icon-white.webp") center / auto calc((100% - 3rem) * .85) no-repeat;
  opacity: .06;
  pointer-events: none;
}
.final__copy > p { margin-top: 1.25rem; max-width: 32rem; font-size: 1.0625rem; line-height: 1.5; }
/* Tablets and phones: paragraph runs the full width; tree watermark sits
   behind the title, centred on it */
@media (max-width: 1199px) {
  .final__copy > p { max-width: none; }
  .final__copy::before {
    inset: -1.5rem auto auto 0;
    width: 13rem;
    height: 9rem;
    background-position: center;
    background-size: contain;
  }
}

.final__talk { color: var(--ink); font-size: .9375rem; font-weight: 500; }
/* Lower form: "Prefer to talk?" to the right of the button (wraps under it
   only if the form is too narrow) */
.final__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.75rem;
}
.final__talk { font-size: .875rem; line-height: 1.35; white-space: nowrap; }
.final__actions .final__talk a { display: block; }
.final__talk a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.final__talk a:hover { color: var(--gold-deep); }

/* Entrance hall photo, never cropped (square). Smaller screens: on top */
.final__media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: calc(clamp(4.5rem, 10vw, 8rem) * -1) 0 clamp(3rem, 6vw, 4rem);
  object-fit: cover;
}

@media (min-width: 960px) {
  .final__inner { grid-template-columns: 1.15fr minmax(0, 27rem); gap: clamp(3rem, 7vw, 7rem); }
}

/* Contact form: no gold top rule; question on its own line above the options */
.final .form-card { border-top: 0; }
.final .choice legend { float: none; width: 100%; margin: 0 0 .25rem; }
/* Gold tree icon to the left of the lower form title */
.form-card__heading { display: flex; align-items: center; gap: 1rem; }
.form-card__icon { flex: none; width: auto; height: 5.5rem; }
/* Tablets and phones: smaller tree icon, still to the left of the title */
@media (max-width: 1199px) {
  .form-card__heading .form-card__icon { height: 3.5rem; }
}
.final .form-card__title { color: var(--gold-dark); font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: 1.08; }
.final .form-card__note { margin-top: .75rem; color: var(--ink-soft); line-height: 1.5; }

/* Desktop: copy | form panel | square photo. The form panel runs the full
   height of the section and meets the photo; the photo is flush right, top
   and bottom, and the section is as tall as the photo is wide (no crop). */
@media (min-width: 1200px) {
  .final {
    --media-w: clamp(32rem, 34vw, 44rem);
    display: flex;
    min-height: var(--media-w);
    padding-block: 0;
  }
  .final > .container { width: 100%; }
  .final__media {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--media-w);
    max-width: none;
    height: 100%;
    margin: 0;
  }
  /* The space left of the photo splits exactly in half: navy copy panel
     (page margin inside it) and white form panel */
  .final__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    max-width: none;
    padding-left: 0;
    padding-right: var(--media-w);
  }
  .final__copy {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem clamp(3rem, 5vw, 6rem) 3rem var(--gutter);
  }
  .final .form-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline: calc(var(--card-pad) + 1rem);
    box-shadow: none;
  }
}
/* Below 1400px the copy column gets narrow: scale the copy down */
@media (min-width: 1200px) and (max-width: 1599px) {
  .final h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); }
  .final__copy > p { font-size: .9375rem; }
  .final .form-card { --card-pad: 1.5rem; }
  .final .form-card__title { font-size: 1.875rem; }
  .final .form-card__icon { height: 4.25rem; }
  .final .form-card__heading .form-card__title { font-size: clamp(1.625rem, 2.4vw, 1.875rem); }
  .final .form-card { padding-block: 1rem; }
  .final .form-card__note { margin-top: .4rem; line-height: 1.4; }
  .final .choice { margin-bottom: .25rem; }
  .final .form-card__note { font-size: .875rem; }
  .final .enquiry-form { margin-top: 1rem; gap: .5rem; }
}

/* ---------- Footer ---------- */
.site-footer {
  padding-block: 3.5rem 6rem;
  background: var(--white);
  color: var(--ink-soft);
  font-size: .875rem;
}
.site-footer__inner {
  display: grid;
  gap: 2rem;
}
.site-footer__brand img { width: 11rem; height: auto; margin-bottom: 1.25rem; }
.site-footer strong { color: var(--ink); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--gold-deep); }
.site-footer__meta { display: grid; gap: .75rem; align-content: end; }
.site-footer__tp { display: inline-block; color: var(--ink); font-weight: 600; text-decoration: none; }
.site-footer__contact { margin-bottom: .5rem; }
.site-footer__name { margin-bottom: .35rem; }
/* Small print: full-width row across the bottom of the footer */
.site-footer__company {
  grid-column: 1 / -1;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .75rem;
  line-height: 1.6;
  text-align: center;
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__legal a,
.site-footer__cookie-settings {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.site-footer__cookie-settings:hover { color: var(--gold-deep); }
.site-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Icon-only links: 44px tap target */
.site-footer__social {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--ink);
  transition: color .2s;
}
.site-footer__social svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.site-footer__social:hover { color: var(--gold-deep); }

@media (min-width: 960px) {
  .site-footer { padding-bottom: 3.5rem; }
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: end; }
  .site-footer__meta { text-align: right; justify-items: end; }
  .site-footer__legal { justify-content: flex-end; }
}

.gallery__zoom {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.gallery__zoom img { flex: 1; }

/* ---------- Gallery lightbox ---------- */
.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox:focus,
.lightbox:focus-visible { outline: none; }
.lightbox::backdrop { background: rgba(17, 20, 29, .92); }
.lightbox__figure {
  display: grid;
  justify-items: center;
  gap: .75rem;
  margin: 0;
  padding: 4rem 4.5rem 2rem;
}
.lightbox__img {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  object-fit: contain;
}
.lightbox__caption { color: var(--ivory); font-size: .875rem; letter-spacing: .04em; }
.lightbox__btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ivory);
  cursor: pointer;
}
.lightbox__btn svg { width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 2; }
.lightbox__btn:hover { color: var(--gold); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev,
.lightbox__next { top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: .75rem; }
.lightbox__next { right: .75rem; }
@media (max-width: 639px) {
  .lightbox__figure { padding: 4rem 1rem 5rem; }
  .lightbox__prev,
  .lightbox__next { top: auto; bottom: 1rem; transform: none; }
  .lightbox__prev { left: calc(50% - 3.5rem); }
  .lightbox__next { right: calc(50% - 3.5rem); }
}

/* ---------- Legal pop-ups ---------- */
.legal {
  width: min(52rem, calc(100% - 2rem));
  max-height: min(88vh, 60rem);
  padding: 0;
  border: 0;
  background: var(--white);
  color: var(--ink-soft);
  box-shadow: 0 30px 80px -20px rgba(17, 20, 29, .45);
}
.legal[open] { display: flex; flex-direction: column; }
.legal:focus,
.legal:focus-visible { outline: none; }
.legal::backdrop { background: rgba(17, 20, 29, .6); }
.legal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
.legal__head h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.legal__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.legal__close svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; }
.legal__close:hover { color: var(--gold-deep); }
/* Readable measure: ~70 characters */
.legal__body {
  overflow-y: auto;
  padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem) 2.5rem;
  font-size: .9375rem;
  line-height: 1.65;
}
.legal__body > * { max-width: 42rem; }
.legal__body h3 {
  margin-top: 2rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0;
}
.legal__body p,
.legal__body ul { margin-top: .75rem; }
.legal__body ul { padding-left: 1.25rem; }
.legal__body li + li { margin-top: .35rem; }
.legal__body a { color: var(--gold-deep); }
.legal__body strong { color: var(--ink); }
.legal__updated { margin-top: 0; color: var(--ink-soft); font-size: .8125rem; }
.legal-confirm { padding: 0 .2em; background: #fff1c2; color: var(--ink); }
/* Tables scroll sideways on phones rather than breaking the layout */
.legal__table { max-width: none !important; margin-top: 1rem; overflow-x: auto; }
.legal__table table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: .875rem; }
.legal__table th,
.legal__table td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal__table th { color: var(--ink); font-weight: 700; background: var(--ivory); }

/* ---------- Cookie banner (CookieYes plugin) ----------
   The plugin writes its colours as inline styles, so these need !important.
   Box and preference pop-up use the site's fonts, square corners, navy and gold. */
.cky-consent-container,
.cky-modal { font-family: var(--font-body); }
.cky-consent-container .cky-consent-bar,
.cky-preference-center {
  border: 0 !important;
  border-top: 3px solid var(--gold) !important;
  border-radius: 0 !important;
  background: var(--white) !important;
  box-shadow: 0 30px 80px -20px rgba(17, 20, 29, .45) !important;
}
.cky-consent-container { border-radius: 0; }
.cky-title,
.cky-preference-title {
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
.cky-notice-des,
.cky-notice-des *,
.cky-preference-content-wrapper,
.cky-preference-content-wrapper *,
.cky-accordion-header-des,
.cky-accordion-header-des * {
  color: var(--ink-soft) !important;
  font-size: .875rem !important;
  line-height: 1.6 !important;
}
.cky-accordion-btn,
.cky-accordion-header .cky-accordion-btn { color: var(--ink) !important; font-weight: 600 !important; }
.cky-notice-des a.cky-policy,
.cky-notice-des button.cky-policy,
.cky-show-desc-btn,
.cky-footer-wrapper a { color: var(--gold-deep) !important; }
.cky-btn {
  border-radius: 0 !important;
  padding: .6rem !important;
  font: 600 .8125rem/1.2 var(--font-body) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.cky-btn:hover { opacity: 1 !important; }
.cky-btn-accept,
.cky-btn-preferences {
  border: 2px solid var(--gold) !important;
  background: var(--gold) !important;
  color: var(--ink) !important;
}
.cky-btn-reject {
  border: 2px solid var(--navy) !important;
  background: var(--navy) !important;
  color: var(--ivory) !important;
}
.cky-btn-customize {
  border: 2px solid var(--navy) !important;
  background: transparent !important;
  color: var(--navy) !important;
}
.cky-btn-accept:hover,
.cky-btn-preferences:hover,
.cky-btn-customize:hover {
  border-color: var(--navy) !important;
  background: var(--navy) !important;
  color: var(--ivory) !important;
}
.cky-btn-reject:hover {
  border-color: var(--gold) !important;
  background: var(--gold) !important;
  color: var(--ink) !important;
}
.cky-btn:focus-visible { outline: 2px solid var(--gold) !important; outline-offset: 2px; }
/* On/off switches in the preference pop-up */
.cky-switch input[type="checkbox"]:checked { background: var(--gold-deep) !important; }
.cky-always-active { color: var(--gold-deep) !important; }
/* Floating button that reopens the banner */
.cky-btn-revisit-wrapper { background: var(--navy) !important; }

/* Footer on mobile: everything centred */
@media (max-width: 959px) {
  .site-footer__inner { text-align: center; }
  .site-footer__brand img { margin-inline: auto; }
  .site-footer__meta { justify-items: center; }
  .site-footer__socials,
  .site-footer__legal { justify-content: center; }
  .site-footer__sep { display: none; }
  .site-footer__contact a { display: block; }
  .site-footer__company p + p { margin-top: .75rem; }
}

/* ---------- Mobile sticky bar ---------- */
.sticky-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transform: translateY(100%);
  transition: transform .35s var(--ease);
  box-shadow: 0 -10px 30px -20px rgba(17, 20, 29, .5);
}
.sticky-bar.is-visible { transform: none; }
.sticky-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3.5rem;
  padding-bottom: env(safe-area-inset-bottom);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}
.sticky-bar__call { background: var(--navy); color: var(--white); }
.sticky-bar__book { background: var(--gold); color: var(--ink); }

@media (min-width: 960px) {
  .sticky-bar { display: none; }
}

/* ---------- Scroll reveal (only when JS is running) ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}