/* =========================================================
   Balloons by Ellie — portfolio project (fictional business)
   Few words, big photos, one accent colour.
   ========================================================= */

:root {
  --ink: #1C2527;
  --ink-2: #5A6466;
  --line: #E3E6E6;
  --paper: #FFFFFF;
  --mist: #F4F5F5;
  --dark: #161D1F;

  --accent: #F4B3C5;         /* blush pink from the logo balloon, used sparingly */
  --accent-hover: #F7C6D3;
  --accent-ink: #A83A62;     /* deeper rose, readable as small text on white */
  --accent-line: #F2A2BA;     /* a touch stronger, for thin lines */
  --accent-wash: #FBE3EA;    /* pale pink for the map area */
  --area-near: #F6C3D2;      /* deeper pink: the free-delivery zone */

  /* One clean typeface for everything: easy to read on a phone */
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 12px;
  --radius-sm: 10px;
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 80px;
  --banner-h: 36px;                                   /* the Concept bar */
  --top: calc(var(--header-h) + var(--banner-h));     /* everything sticky sits below both */
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--top);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.65 var(--font-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }

a { color: inherit; text-underline-offset: .22em; }

/* Highlighted text: pastel pink instead of the browser's blue */
::selection { background: #F8CDD9; color: var(--ink); }

/* Controls aren't text to copy: a double-click or long-press on them shouldn't
   highlight anything. Content (prices, phone, email, reviews) stays selectable. */
button,
summary,
.btn,
.chip,
.tile,
.swatch,
.nav__list,
.menu-toggle,
.brand,
.make__head,
.reviews__nav,
.pin,
.step__num,
.progress,
.package__tag,
.concept__tag,
.concept__more,
.calendar,
.townlist,
.social__link,
.contact__icon,
.contact__arrow,
.zone__swatch,
.zone__sep,
.shot,
.lightbox__btn,
.action-bar,
.site-footer__logo {
  -webkit-user-select: none;
  user-select: none;
}
/* No grey/blue flash when tapping on phones; buttons get a small press instead */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.98); }

:focus-visible {
  outline: 2px solid #0098D4;
  outline-offset: 3px;
  border-radius: 4px;
}

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

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: 1rem; }

/* Headings: same typeface, heavier and tighter */
.hero__title,
.section-title,
.intro__text,
.step h3,
.package__name,
.form-step__title,
.quote-success h3 {
  font-weight: 600;
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: .75em 1.6em;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 500 1rem/1.1 var(--font-body);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .1s;
}
.btn--primary { background: var(--accent); color: var(--ink); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--light { background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, .6); }
.btn--light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--small { min-height: 42px; padding: .55em 1.25em; font-size: .9375rem; }
.btn--text {
  min-height: 44px;
  padding: .5rem .25rem;
  background: none;
  color: var(--ink);
  text-decoration: underline;
}

.text-link {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.text-link:hover,
.text-link:focus-visible { color: var(--accent-ink); }

/* ---------- Concept banner (sits inside the sticky header) ---------- */

.concept {
  background: var(--accent);
  color: var(--ink);
  font-size: .8125rem;
  line-height: 1.35;
}
.concept__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--banner-h);
}
.concept__text {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}
.concept__tag {
  flex: none;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--accent);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.concept__long { font-weight: 500; }
.concept__short,
.concept__more { display: none; }
.concept__details { padding-bottom: .6rem; font-weight: 500; }

/* Phones: one short line, the full note opens on tap */
@media (max-width: 759px) {
  .concept { font-size: .75rem; }
  .concept__long { display: none; }
  .concept__short {
    display: block;
    overflow: hidden;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .concept__more {
    display: block;
    flex: none;
    margin-left: auto;
    padding: .35rem 0 .35rem .5rem;
    border: 0;
    background: none;
    color: var(--ink);
    font: 600 .75rem var(--font-body);
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
  }
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  margin-right: auto;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.03em;
  text-decoration: none;
  white-space: nowrap;
}
.brand__logo {
  display: block;
  width: auto;
  height: 66px;
}
@media (max-width: 899px) {
  .brand__logo { height: 56px; }
}

.nav__list {
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__list a {
  font-size: .96875rem;
  text-decoration: none;
  color: var(--ink);
  transition: color .2s;
}
/* Same rose as the links in the footer and elsewhere on the page */
.nav__list a:hover,
.nav__list a:focus-visible { color: var(--accent-ink); }

.site-header__phone {
  font-size: .96875rem;
  text-decoration: none;
  color: var(--ink-2);
  transition: color .2s;
}
.site-header__phone:hover,
.site-header__phone:focus-visible { color: var(--accent-ink); }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-right: -8px;
  border: 0;
  background: none;
  cursor: pointer;
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 22px; height: 1.5px;
  margin-inline: auto;
  background: var(--ink);
  transition: transform .2s;
}
.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before,
.menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -7px; }
.menu-toggle__bars::after { top: 7px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1023px) {
  .site-header__phone { display: none; }
}
@media (max-width: 899px) {
  :root { --header-h: 64px; --banner-h: 32px; }
  .site-header__inner { gap: 1rem; }
  .menu-toggle { display: block; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    display: none;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; gap: 0; padding: .5rem var(--gutter) 1.25rem; }
  .nav__list a {
    display: block;
    padding: .9rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 419px) {
  .site-header__cta { display: none; }
}

/* ---------- 1. Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  /* Fills the screen under the sticky bars on every display; 520px floor for short landscape phones */
  min-height: max(520px, calc(100vh - var(--top) - 1px));
  min-height: max(520px, calc(100svh - var(--top) - 1px));
  /* Bottom gap grows with screen height, so the text sits in the lower third but never on the floor */
  padding-block: 8rem clamp(3rem, 24vh - 6rem, 16rem);
  padding-block: 8rem clamp(3rem, 24svh - 6rem, 16rem);
  background: var(--dark);
  color: var(--paper);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 45%;   /* on phones this keeps the right-hand garland in view */
  will-change: translate;
}
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(14, 20, 21, .78) 0%, rgba(14, 20, 21, .4) 50%, rgba(14, 20, 21, 0) 80%),
    linear-gradient(90deg, rgba(14, 20, 21, .45) 0%, rgba(14, 20, 21, 0) 60%);
}

.hero__place {
  display: inline-block;
  margin-bottom: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}
.hero__place:hover { color: var(--paper); text-decoration: underline; }
.hero__title {
  max-width: 13ch;
  font-size: clamp(2.6rem, 6.4vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

@media (max-width: 599px) {
  .hero { padding-bottom: clamp(2.25rem, 9svh, 5rem); }
  .hero__shade { background: linear-gradient(0deg, rgba(14, 20, 21, .85) 0%, rgba(14, 20, 21, .45) 50%, rgba(14, 20, 21, 0) 80%); }
  .hero__actions .btn { flex: 1 1 0; padding-inline: 1rem; }
}

/* ---------- Intro sentence ---------- */

.intro { padding-block: clamp(4.5rem, 10vw, 8rem) 0; }
.intro__text {
  max-width: 30ch;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.8vw, 2.25rem);
  line-height: 1.3;
  letter-spacing: -.015em;
}

/* ---------- Sections ---------- */

.section { padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.section--tight-top { padding-top: clamp(4rem, 8vw, 6rem); }
.section--mist { background: var(--mist); }
.section--dark { background: var(--dark); color: #B9C1C2; }
.section--dark .section-title,
.section--dark h3 { color: var(--paper); }

.section-title {
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -.035em;
  margin-bottom: clamp(2rem, 4.5vw, 3.25rem);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 2rem;
  margin-bottom: clamp(2rem, 4.5vw, 3.25rem);
}
.section-head .section-title { margin-bottom: 0; }
.section-note { color: var(--ink-2); }

/* ---------- 2. What we make: list + photo preview ---------- */

.make {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.make__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.make__item { position: relative; }
.make__heading { margin: 0; font: inherit; }

.make__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  padding: 1.5rem 0 .25rem;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.make__name {
  font-size: clamp(1.35rem, 2.3vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.2;
  transition: color .25s;
}
.make__from {
  font-weight: 600;
  white-space: nowrap;
}
.make__from span { font-weight: 400; color: var(--ink-2); font-size: .9375rem; }

.make__icon { display: none; }

.make__body {
  padding: .35rem 0 1.5rem;
}
.make__desc { max-width: 42ch; color: var(--ink-2); }
.make__link {
  display: inline-block;
  margin-top: .75rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.make__link:hover,
.make__link:focus-visible { color: var(--accent-ink); }

.make__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--mist);
}

/* Desktop: every row is open, the active row drives the big photo.
   A line runs down the left, one segment per row. The active segment
   fills while it plays, and is simply full while you hover or tab. */
@media (min-width: 900px) {
  .make__item { padding-left: 2rem; }
  .make__item::before,
  .make__item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 3px;
    border-radius: 3px;
  }
  .make__item::before { background: var(--line); }
  .make__item::after {
    background: var(--accent-line);
    transform: scaleY(var(--p, 0));
    transform-origin: top;
  }
  .make__list.is-held .make__item.is-active::after {
    transform: scaleY(1);
    transition: transform .35s ease;
  }

  .make__photo { display: none; }
  .make__item:not(.is-active) .make__name { color: #A3ABAC; }
  .make__item:not(.is-active) .make__from,
  .make__item:not(.is-active) .make__body { opacity: .55; }
  .make__from,
  .make__body { transition: opacity .25s; }

  .make__preview {
    position: sticky;
    top: calc(var(--top) + 2rem);
    aspect-ratio: 4 / 5;
    max-height: calc(100vh - var(--top) - 4rem);
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--mist);
  }
  .make__preview img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .5s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
  }
  .make__preview img.is-shown { opacity: 1; transform: none; }
}

/* Phones: a plain accordion, the photo opens inside the row */
@media (max-width: 899px) {
  .make { grid-template-columns: 1fr; }
  .make__preview { display: none; }
  .make__list { border-bottom: 1px solid var(--line); }
  .make__item { border-top: 1px solid var(--line); }
  .make__head { grid-template-columns: 1fr auto 20px; padding: 1.15rem 0; align-items: center; }
  .make__name { font-size: 1.2rem; }
  .make__from { font-size: .9375rem; }
  .make__icon {
    display: block;
    position: relative;
    width: 20px; height: 20px;
  }
  .make__icon::before,
  .make__icon::after {
    content: "";
    position: absolute;
    left: 3px; right: 3px; top: 9px;
    height: 1.5px;
    background: var(--ink);
    transition: transform .25s;
  }
  .make__icon::after { transform: rotate(90deg); }
  .make__head[aria-expanded="true"] .make__icon::after { transform: rotate(0deg); }

  .make__body {
    display: grid;
    grid-template-rows: 0fr;
    padding: 0;
    transition: grid-template-rows .35s ease;
  }
  /* No padding on the inner box: padding can't shrink to 0,
     so it would leave a strip of the photo showing on closed rows */
  .make__body > * { min-height: 0; overflow: hidden; }
  .make__item.is-active .make__body { grid-template-rows: 1fr; }
  .make__photo { margin: .25rem 0 1rem; }
  .make__link { margin-bottom: 1.4rem; }
}

/* ---------- 3. Gallery ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(180px, 19vw, 260px);
  grid-auto-flow: dense;
  gap: clamp(.5rem, 1.2vw, .9rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery__item--feature { grid-column: span 2; grid-row: span 2; }
.gallery__item--tall { grid-row: span 2; }
.gallery__item--tall img { object-position: 35% 50%; }   /* garden photo: keep the whole garland in */
.gallery__item--wide { grid-column: span 2; }
.gallery__item--wide img { object-position: 50% 78%; }   /* keep the bottom of the scene (the big letters) in view */

.shot {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
  cursor: zoom-in;
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.12;
  will-change: translate;
}
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(14, 20, 21, 0);
  transition: background-color .3s;
}
.shot:hover::after { background: rgba(14, 20, 21, .12); }

@media (max-width: 999px) {
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44vw; }
  .gallery__item--feature,
  .gallery__item--tall { grid-row: span 1; }
  .gallery__item--wide { grid-column: span 1; }
}

/* Lightbox */
.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 4.5rem) 1rem calc(env(safe-area-inset-bottom, 0px) + 2rem);
  border: 0;
  background: rgba(14, 20, 21, .95);
  color: var(--paper);
}
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; place-items: center; }

.lightbox__frame { max-width: min(100%, 1000px); }
.lightbox__img {
  max-width: 100%;
  max-height: 74vh;
  margin-inline: auto;
  border-radius: 12px;
  object-fit: contain;
}
.lightbox__caption {
  margin-top: 1rem;
  text-align: center;
  color: #D7DDDE;
}

.lightbox__btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  cursor: pointer;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .24); }
.lightbox__btn svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: var(--paper);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lightbox__close { top: calc(env(safe-area-inset-top, 0px) + 1rem); right: 1rem; }
.lightbox__prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 1rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 699px) {
  .lightbox { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem); }
  .lightbox__prev,
  .lightbox__next { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); transform: none; }
  .lightbox__prev { left: calc(50% - 60px); }
  .lightbox__next { right: calc(50% - 60px); }
}


/* ---------- About ---------- */

.about {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.about__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: var(--mist);
}
.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.12;
  will-change: translate;
}
.about .section-title { margin-bottom: 1.25rem; }
/* "Ellie" in a script close to the logo. No generic cursive fallback (that's Comic Sans on Windows) */
.script-name {
  font-family: "Dancing Script", var(--font-body);
  font-weight: 500;
  font-size: 1.36em;
  line-height: 1;
  letter-spacing: 0;
  margin-left: .14em;   /* the E starts with a flourish, so give it a little more room after "Meet" */
  color: var(--accent-ink);
}

.about__lead {
  max-width: 30ch;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.02em;
}
.about__body {
  max-width: 50ch;
  margin-top: 1.25rem;
  color: var(--ink-2);
}
.about__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.about__facts dt { font-size: .875rem; color: var(--ink-2); }
.about__facts dd { margin-top: .2rem; font-weight: 600; }
.about__facts a { text-decoration-thickness: 1px; }
.about__facts a:hover,
.about__facts a:focus-visible { color: var(--accent-ink); }

@media (max-width: 899px) {
  .about { grid-template-columns: 1fr; }
  .about__photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 559px) {
  .about__facts { grid-template-columns: 1fr 1fr; }
  .about__facts div:last-child { grid-column: 1 / -1; }
}

/* ---------- 4. How it works ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.step__num {
  display: block;
  margin-bottom: 1.25rem;
  color: var(--accent);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .04em;
}
.step h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.step p { margin-top: .5rem; }

@media (max-width: 799px) {
  .steps { grid-template-columns: 1fr; gap: 2rem; }
  .step__num { margin-bottom: .6rem; }
}

/* ---------- 5. Packages ---------- */

.packages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.package {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem 1.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.package__name { font-size: 1.35rem; }
.package__for { margin-top: .25rem; color: var(--ink-2); font-size: .9375rem; }
.package__price {
  margin-top: 1.5rem;
  font-size: clamp(2.25rem, 3.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
}
.package__from {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-2);
}
.package__list {
  flex-grow: 1;
  margin: 1.5rem 0 2rem;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.package__list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: .96875rem;
}
.package__list li + li { margin-top: .6rem; }
.package__list li::before {
  content: "";
  position: absolute;
  left: 2px; top: .45em;
  width: .7rem; height: .38rem;
  border: solid var(--accent-ink);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}
.package__btn { width: 100%; }

/* The most booked package is the dark one: you see it first */
.package--featured {
  background: var(--dark);
  border-color: var(--dark);
  color: #C3CBCC;
}
.package--featured .package__name,
.package--featured .package__price { color: var(--paper); }
.package--featured .package__for,
.package--featured .package__from { color: #9EA8A9; }
.package--featured .package__list { border-top-color: rgba(255, 255, 255, .14); color: #E3E8E8; }
.package--featured .package__list li::before { border-color: var(--accent); }
.package__tag {
  position: absolute;
  top: 1.75rem; right: 1.5rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
}

@media (min-width: 900px) {
  .package--featured { margin-block: -1rem; padding-block: 3rem 2.75rem; }
}
@media (max-width: 899px) {
  .packages { grid-template-columns: 1fr; gap: 1rem; }
  .package--featured { order: -1; }
}

/* ---------- 6. Quote ---------- */

.quote {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
@media (min-width: 960px) {
  .quote__intro { position: sticky; top: calc(var(--top) + 2.5rem); }
}
@media (max-width: 959px) {
  .quote { grid-template-columns: 1fr; gap: 2rem; }
}
.quote .section-title { margin-bottom: .75rem; }
.quote__lead { color: var(--ink-2); }

/* What they get, then a second way to reach Ellie for people who'd rather not fill in a form */
.quote__promises {
  display: grid;
  gap: .7rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  font-weight: 500;
}
.quote__promises li { display: flex; align-items: center; gap: .7rem; }
.quote__promises svg {
  flex-shrink: 0;
  box-sizing: content-box;
  padding: 4px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-ink);
}

.quote__alt {
  margin-top: 2.25rem;
  color: var(--ink-2);
  font-size: .9375rem;
}
.quote__contacts {
  display: grid;
  gap: .6rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}
.contact {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .8rem 1rem;
  background: var(--paper);
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.contact__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.contact__text { display: grid; min-width: 0; }
.contact__label { color: var(--ink-2); font-size: .8125rem; }
.contact__value { font-weight: 600; overflow-wrap: anywhere; }
.contact__arrow { flex-shrink: 0; margin-left: auto; color: var(--ink-2); transition: transform .2s, color .2s; }
.contact:hover,
.contact:focus-visible { border-color: var(--accent); }
.contact:hover .contact__value,
.contact:focus-visible .contact__value,
.contact:hover .contact__arrow { color: var(--accent-ink); }
.contact:hover .contact__arrow { transform: translateX(3px); }
@media (max-width: 959px) {
  .quote__promises { margin-top: 1.5rem; }
  .quote__alt { margin-top: 1.75rem; }
}

.quote-form,
.quote-success {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
}

/* Progress */
.progress { margin-bottom: 1.5rem; }
.progress__label {
  margin-bottom: .6rem;
  color: var(--ink-2);
  font-size: .875rem;
}
.progress__bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.progress__bar li {
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  transition: background-color .3s;
}
.progress__bar li.is-active { background: var(--ink); }

/* Steps */
.form-step:not([hidden]) { animation: step-in .3s ease both; }
@keyframes step-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .form-step:not([hidden]) { animation: none; }
}

.form-step__title {
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
  line-height: 1.2;
}
.form-step__title:focus { outline: none; }

.form-step > .field + .field,
.form-step > .field + .form-grid,
.form-step > .recap + .form-grid { margin-top: 1.6rem; }

.form-step__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.form-step__nav .btn--primary { min-width: 190px; }
.form-step__nav .btn--text { margin-right: auto; }

.btn--text {
  min-height: 44px;
  padding: .5rem .25rem;
  background: none;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: .25em;
}
.btn--text:hover { color: var(--accent-ink); }

@media (max-width: 479px) {
  .form-step__nav .btn--primary { flex: 1; min-width: 0; }
}

/* Fields */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
}
.field--full { grid-column: 1 / -1; }
@media (max-width: 559px) {
  .form-grid { grid-template-columns: 1fr; }
}

.field { min-width: 0; margin: 0; padding: 0; border: 0; }

.field__label {
  display: block;
  margin-bottom: .55rem;
  padding: 0;
  font-weight: 500;
}
.field__optional { font-weight: 400; color: var(--ink-2); }

.input {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: .8rem 1rem;
  background: var(--mist);
  border: 1.5px solid transparent;
  border-radius: 12px;
  color: var(--ink);
  font: 400 1rem/1.4 var(--font-body);   /* 16px stops iPhone zooming in */
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.input:hover { background: #ECEFEF; }
.input:focus,
.input[aria-expanded="true"],
.field.has-error .input:focus,
.field.has-error .input[aria-expanded="true"] {
  outline: none;
  background: var(--paper);
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(30, 39, 41, .08);
}
.input::placeholder { color: #8A9293; }
textarea.input { min-height: 6rem; resize: vertical; }

.input-wrap { position: relative; }
.input-wrap .input { padding-left: 2.9rem; }
.input-wrap .input__icon {
  position: absolute;
  left: 1rem; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.input__icon,
.input__chevron {
  flex: none;
  width: 20px; height: 20px;
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.field.has-error .input {
  border-color: #C2413A;
  background: #FFF6F5;
}
.field.has-error .tile__box { border-color: #E3A5A0; }
.field__error {
  margin-top: .45rem;
  color: #B3372F;
  font-size: .9375rem;
  font-weight: 500;
}
.field__error:empty { display: none; }
.field__hint { color: var(--ink-2); font-size: .9375rem; margin-top: -.5rem; }
.field__extra { margin-top: 1.1rem; }

/* Event type tiles */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
}
@media (max-width: 479px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
}
.tile { position: relative; cursor: pointer; }
.tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tile__box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .65rem;
  min-height: 96px;
  padding: 1rem;
  background: var(--mist);
  border: 1.5px solid transparent;
  border-radius: 14px;
  font-weight: 500;
  line-height: 1.25;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.tile__box svg {
  width: 26px; height: 26px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tile:hover .tile__box { background: #ECEFEF; }

/* small round tick that pops in on the chosen tile or colour */
.tile__box::after,
.swatch__dot::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ink) url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') center / 12px no-repeat;
  transform: scale(0);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.tile__box::after { top: .75rem; right: .75rem; }

.tile input:checked + .tile__box {
  background: var(--paper);
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(30, 39, 41, .08);
}
.tile input:checked + .tile__box::after { transform: scale(1); }
.tile input:focus-visible + .tile__box { outline: 3px solid #0098D4; outline-offset: 2px; }

/* Colour swatches: flat colour, a tick when chosen */
.swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1rem .5rem;
}
.swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
}
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch__dot {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(30, 39, 41, .12);
  transition: transform .15s, box-shadow .15s, opacity .2s;
}
.swatch:hover .swatch__dot { transform: scale(1.06); }
.swatch__dot::after { right: -5px; bottom: -3px; border: 2px solid var(--paper); box-sizing: content-box; }
.swatch input:checked + .swatch__dot {
  box-shadow: inset 0 0 0 1px rgba(30, 39, 41, .12), 0 0 0 3px var(--paper), 0 0 0 4.5px var(--ink);
}
.swatch input:checked + .swatch__dot::after { transform: scale(1); }
.swatch input:focus-visible + .swatch__dot { outline: 3px solid #0098D4; outline-offset: 6px; }
.swatch__name {
  color: var(--ink-2);
  font-size: .8125rem;
  line-height: 1.2;
  text-align: center;
}
.swatch input:checked ~ .swatch__name { color: var(--ink); font-weight: 500; }

/* When four are picked, the rest fade out */
.swatch:has(input:disabled) { cursor: not-allowed; }
.swatch input:disabled + .swatch__dot,
.swatch input:disabled ~ .swatch__name { opacity: .35; }
.swatch:has(input:disabled):hover .swatch__dot { transform: none; }

.chip--help { display: inline-block; margin-top: 1.1rem; }

@media (max-width: 559px) {
  .swatches { grid-template-columns: repeat(4, 1fr); }
}

.note {
  display: flex;
  gap: .65rem;
  margin-top: .75rem;
  padding: .85rem 1rem;
  background: var(--accent-wash);
  border-radius: 12px;
  color: #6E2943;
  font-size: .9375rem;
  line-height: 1.5;
}
.note svg {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

/* Package picked from the Packages section */
.picked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.6rem;
  padding: .8rem 1rem;
  background: var(--dark);
  border-radius: 12px;
  color: #C3CBCC;
  font-size: .9375rem;
}
.picked strong { color: var(--paper); font-weight: 600; }
.picked__remove {
  padding: .25rem 0;
  border: 0;
  background: none;
  color: var(--paper);
  font: 500 .9375rem var(--font-body);
  text-decoration: underline;
  cursor: pointer;
}

.privacy {
  margin-top: 1.25rem;
  color: var(--ink-2);
  font-size: .875rem;
}

/* Chips: decor, budget, reply method */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .55rem 1.1rem;
  background: var(--mist);
  border-radius: 999px;
  font-size: .9375rem;
  transition: background-color .15s, color .15s;
}
.chip:hover span { background: #ECEFEF; }
.chip input:checked + span { background: var(--ink); color: var(--paper); }
.chip input:focus-visible + span { outline: 3px solid #0098D4; outline-offset: 2px; }

/* Recap on the last step */
.recap {
  display: grid;
  gap: .1rem;
  padding: .4rem 1.15rem;
  background: var(--mist);
  border-radius: 14px;
}
.recap__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .75rem;
}
.recap__row + .recap__row { border-top: 1px solid var(--line); }
.recap__label { color: var(--ink-2); font-size: .8125rem; }
.recap__value { font-weight: 500; font-size: .96875rem; line-height: 1.45; }
.recap__edit {
  flex: none;
  padding: .25rem 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font: 500 .9375rem var(--font-body);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

/* ---------- Date picker ---------- */

.datepicker,
.townpicker { position: relative; }

.datepicker__trigger,
.townpicker__trigger {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-align: left;
  cursor: pointer;
}
.datepicker__value,
.townpicker__value { flex: 1; }
.datepicker__value.is-empty,
.townpicker__value.is-empty { color: #8A9293; }
.datepicker__trigger .input__chevron,
.townpicker__trigger .input__chevron { transition: transform .2s; }
.datepicker__trigger[aria-expanded="true"] .input__chevron,
.townpicker__trigger[aria-expanded="true"] .input__chevron { transform: rotate(180deg); }

/* Pop-up card shared by the calendar and the town list */
.calendar,
.townlist {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: 340px;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 1rem 1rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 30px 60px -24px rgba(14, 20, 21, .38);
  transform-origin: top left;
  animation: pop-in .16s ease both;
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .calendar,
  .townlist { animation: none; }
}
@media (max-width: 559px) {
  .calendar,
  .townlist { width: auto; right: 0; }
}

.calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .4rem;
}
.calendar__month { font-weight: 500; font-size: 1.0625rem; }

.calendar__nav {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.calendar__nav:hover:not(:disabled) { background: var(--mist); }
.calendar__nav:disabled { opacity: .3; cursor: default; }
.calendar__nav svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar__grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px 3px;
  table-layout: fixed;
}
.calendar__grid th {
  padding: .45rem 0 .3rem;
  color: #8A9293;
  font-size: .8125rem;
  font-weight: 400;
  text-align: center;
}
.calendar__grid td { padding: 0; }

.calendar__day {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ink);
  font: 400 .96875rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color .12s;
}
.calendar__day:hover:not(:disabled) { background: var(--mist); }
.calendar__day:disabled { color: #C3C9CA; cursor: default; }
.calendar__day.is-today::after {
  content: "";
  position: absolute;
  bottom: 5px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--accent-ink);
}
.calendar__day.is-selected {
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
}
.calendar__day.is-selected.is-today::after { background: var(--paper); }
.calendar__day:focus-visible { outline: 2px solid #0098D4; outline-offset: 1px; }

/* ---------- Town picker ---------- */

/* In the right-hand column on wider screens, open towards the left */
@media (min-width: 560px) {
  .townlist { left: auto; right: 0; }
}

.townlist { padding: .9rem .9rem 1rem; }
.townlist__group + .townlist__group { margin-top: .75rem; }
.townlist__label {
  margin: 0 0 .35rem .55rem;
  color: #8A9293;
  font-size: .8125rem;
}
.townlist__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 4px;
}
.townlist__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  min-height: 42px;
  padding: .5rem .6rem;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ink);
  font: 400 .96875rem/1.2 var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: background-color .12s;
}
.townlist__opt:hover { background: var(--mist); }
.townlist__opt:focus-visible { outline: 2px solid #0098D4; outline-offset: 1px; }
.townlist__opt.is-selected {
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
}

.townlist__other {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
}
.townlist__opt--other small {
  color: #8A9293;
  font-size: .8125rem;
}
.townlist__opt--other.is-selected small { color: #C3CBCC; }

/* Success state */
.quote-success { text-align: center; padding-block: 3.5rem; }
.quote-success:focus { outline: none; }
.quote-success__icon {
  width: 48px; height: 48px;
  margin: 0 auto 1.25rem;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.quote-success__icon circle { fill: var(--accent); stroke: none; }
.quote-success__icon path { stroke: var(--ink); }
.quote-success h3 { font-size: 1.75rem; }
.quote-success p { max-width: 40ch; margin: .75rem auto 0; color: var(--ink-2); }
.quote-success__summary { color: var(--ink) !important; }
.quote-success__demo { font-size: .875rem; }
.quote-success .btn { margin-top: 2rem; }

/* ---------- 7. Reviews and area ---------- */

/* Title and arrows on the left, cards scroll off the right edge */
.reviews {
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.reviews__side .section-title { margin-bottom: 1.5rem; }

/* Review score */
.reviews__score {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-weight: 500;
}
.reviews__score strong {
  font-size: clamp(2.5rem, 4.2vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
}
/* Where the score comes from: a link, so it can be checked */
.reviews__source {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: .9rem;
  color: var(--ink-2);
  font-size: .9375rem;
  text-decoration: none;
  transition: color .2s;
}
.reviews__source b {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .2s;
}
.reviews__badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-wash);
}
.reviews__badge svg,
.reviews__ext {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--accent-ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reviews__ext { display: inline-block; width: 14px; height: 14px; margin-left: .35rem; vertical-align: -1px; stroke: currentColor; transition: transform .2s; }
.reviews__source:hover,
.reviews__source:focus-visible,
.reviews__source:hover b,
.reviews__source:focus-visible b { color: var(--accent-ink); }
.reviews__source:hover .reviews__ext { transform: translate(2px, -2px); }

.reviews__nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
}
.reviews__btn {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
  transition: border-color .2s, opacity .2s;
}
.reviews__btn:hover:not(:disabled) { border-color: var(--ink); }
.reviews__btn:disabled { opacity: .35; cursor: default; }
.reviews__btn svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reviews__progress {
  position: relative;
  width: 96px;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.reviews__thumb {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 30%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s;
}

.reviews__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(270px, 28vw, 340px);
  gap: 1.25rem;
  /* bleed past the right edge of the page */
  margin: 0 calc((min(100vw, var(--wrap)) - 100vw) / 2 - var(--gutter)) 0 0;
  padding: 0 var(--gutter) .5rem 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track:focus-visible { outline-offset: 6px; }

.review {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

/* Speech bubble with a small tail, as in the reference */
.review__bubble {
  position: relative;
  flex-grow: 1;
  padding: 1.6rem 1.6rem 1.75rem;
  background: var(--mist);
  border-radius: 16px 16px 16px 4px;
}
.review__bubble::after {
  content: "";
  position: absolute;
  left: 0; bottom: -14px;
  width: 22px; height: 15px;
  background: var(--mist);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.review__bubble p:last-child { line-height: 1.6; }

.review__who {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.4rem;
  padding-left: .25rem;
}
.review__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  font-size: .9375rem;
}
.review__who p { line-height: 1.35; }
.review__who strong { display: block; font-weight: 600; }
.review__who p span { display: block; font-size: .875rem; color: var(--ink-2); }

@media (max-width: 899px) {
  .reviews { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }   /* minmax(0,…) so the scrolling track can't widen the page on small phones */
  .reviews__side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 1rem;
  }
  .reviews__side > * { grid-column: 1; }
  .reviews__side .section-title { margin-bottom: 1rem; }
  .reviews__source { justify-self: start; }
  .reviews__nav { grid-row: 1 / 5; grid-column: 2; margin-top: 0; }
  .reviews__progress { display: none; }
  .reviews__nav { gap: .5rem; }
  .reviews__track {
    grid-auto-columns: 82%;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}

/* Phones: arrows go under the score and review link instead of beside them */
@media (max-width: 599px) {
  .reviews__side { grid-template-columns: minmax(0, 1fr); }
  .reviews__nav { grid-row: auto; grid-column: 1; margin-top: 1.25rem; }
}

/* ---------- 8. Where we decorate ---------- */

.area {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.area .section-title { margin-bottom: .75rem; }
.area__lead { color: var(--ink-2); text-wrap: pretty; }

/* Two delivery zones; the swatches match the two pinks on the map */
.zones {
  display: grid;
  gap: .75rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.zone {
  padding: 1.1rem 1.25rem 1.2rem;
  background: var(--paper);
  border-radius: var(--radius);
}
.zone__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 1rem;
  margin-bottom: .45rem;
}
.zone__name {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
/* Each swatch is drawn like its zone on the map: dashed edge for the free zone, thin solid edge for the rest */
.zone__swatch {
  display: inline-block;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  margin-right: .6rem;
  border: 1px solid rgba(168, 58, 98, .4);
  border-radius: 3px;
  background: var(--accent-wash);
  vertical-align: -2px;
}
.zone--near .zone__swatch {
  border: 1.5px dashed rgba(168, 58, 98, .6);
  background: var(--area-near);
}
.zone__price { margin: 0; font-weight: 600; white-space: nowrap; }
.zone__price span { font-weight: 400; color: var(--ink-2); font-size: .9375rem; }
.zone--near .zone__price { color: var(--accent-ink); }
.zone__towns { margin: 0; color: var(--ink-2); line-height: 1.7; }
.zone__towns [data-town] {
  display: inline-block;   /* so it can scale without pushing the other towns around */
  white-space: nowrap;
  cursor: default;
  transition: color .2s, transform .25s cubic-bezier(.2, .7, .2, 1);
}
.zone__towns [data-town].is-hot { color: var(--accent-ink); transform: scale(1.06); }
.zone__sep { margin-inline: .45em; color: #B4BBBC; }
@media (prefers-reduced-motion: reduce) {
  .zone__towns [data-town].is-hot { transform: none; }
}

.area__more { margin-top: 2rem; color: var(--ink-2); }
.area__more a { color: var(--ink); font-weight: 600; transition: color .2s; }
.area__more a:hover,
.area__more a:focus-visible { color: var(--accent-ink); }

/* The map is an SVG drawing; towns are HTML pins so their text stays the same size */
.areamap {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: #E2EAED;
}
.areamap__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.areamap__sea { fill: #E2EAED; }
.areamap__land { fill: #FAFBFB; }
.areamap__covered path {
  fill: var(--accent-wash);
  stroke: #FFFFFF;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.areamap__near {
  fill: var(--area-near);
  stroke: var(--accent-ink);
  stroke-opacity: .5;
  stroke-width: 1.2;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
}
.areamap__outline {
  fill: none;
  stroke: var(--accent-ink);
  stroke-opacity: .4;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.pin {
  position: absolute;
  width: 0;
  height: 0;
}
.pin::before {
  content: "";
  position: absolute;
  left: -5px; top: -5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 2px var(--ink);
  transition: transform .2s, background-color .2s;
}
.pin__label {
  position: absolute;
  top: 0;
  left: 11px;
  transform: translateY(-50%);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff;
  transition: color .2s;
}
.pin--left .pin__label { left: auto; right: 11px; }
.pin.is-hot::before { background: var(--accent); transform: scale(1.4); }
.pin.is-hot .pin__label { color: var(--accent-ink); font-weight: 600; }

@media (max-width: 559px) {
  .pin::before { left: -4px; top: -4px; width: 8px; height: 8px; }
  .pin__label { font-size: .75rem; left: 9px; }
  .pin--left .pin__label { right: 9px; }
}

@media (max-width: 899px) {
  .area { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 559px) {
  .zones { margin-top: 1.75rem; }
  .zone__head { flex-direction: column; }   /* price goes under the zone name */
  .zone__name { font-size: 1rem; }
}

/* ---------- 9. FAQ ---------- */

.faq {
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
  gap: clamp(1rem, 5vw, 4.5rem);
}
.faq .section-title { margin-bottom: 0; }
.faq__note { max-width: 30ch; margin-top: 1rem; color: var(--ink-2); }
.faq__note a { color: var(--ink); font-weight: 600; text-decoration-thickness: 1px; transition: color .2s; }
.faq__note a:hover,
.faq__note a:focus-visible { color: var(--accent-ink); }
@media (min-width: 800px) {
  .faq__side { position: sticky; top: calc(var(--top) + 2.5rem); align-self: start; }
}
.faq__list { border-bottom: 1px solid var(--line); }
.faq__item { border-top: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.01em;
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
@media (hover: hover) {
  .faq__item summary:hover { color: var(--accent-ink); }   /* not on phones, where a tap would leave it pink */
}
.faq__icon {
  position: relative;
  flex: none;
  width: 20px; height: 20px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 3px; right: 3px; top: 9px;
  height: 1.5px;
  background: currentColor;
  transition: transform .25s;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__item p {
  max-width: 60ch;
  padding-bottom: 1.5rem;
  color: var(--ink-2);
}
.faq__item[open] p { animation: fade-down .3s ease both; }
/* Browsers that can animate to "auto" open the answer smoothly instead of jumping */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq__list { interpolate-size: allow-keywords; }
    .faq__item::details-content {
      height: 0;
      overflow: clip;
      transition: height .35s ease, content-visibility .35s allow-discrete;
    }
    .faq__item[open]::details-content { height: auto; }
  }
}
@keyframes fade-down {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 799px) {
  .faq { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .faq__note { max-width: none; margin-top: .75rem; }
  .faq__item summary { font-size: 1.0625rem; padding: 1.15rem 0; }
}

/* ---------- 10. Footer ---------- */

/* A soft pink block, so the logo sits on its own colour without a tile */
.site-footer {
  --footer-line: rgba(28, 37, 39, .12);
  background: #FCEEF2;
  color: var(--ink-2);
  font-size: .96875rem;
}
.site-footer a:not(.btn) { color: var(--ink); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--accent-ink); }

.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: #33403F; }

/* Last nudge to book, straight after the FAQ */
.site-footer__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--footer-line);
}
.site-footer__title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.035em;
}
.site-footer__lead { margin-top: .6rem; max-width: 46ch; }
.site-footer__cta .btn { flex-shrink: 0; }

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  column-gap: clamp(2.5rem, 6vw, 6rem);
  row-gap: 2.25rem;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.site-footer__logo { display: inline-block; }
.site-footer__logo img { display: block; width: 150px; height: auto; }
.site-footer__about p { max-width: 32ch; margin-top: 1rem; text-wrap: pretty; }

.site-footer__label {
  margin: 0 0 .9rem;
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 600;
}
.site-footer__col ul { margin: 0; padding: 0; list-style: none; }
.site-footer__col li + li { margin-top: .55rem; }
.site-footer__col a { overflow-wrap: anywhere; }

/* Social icons: just the icons, no circles. The SVG is written into the page,
   so it takes the link colour (ink, rose on hover). The link stays 44px for fingers. */
.site-footer__col .social { display: flex; gap: .5rem; margin-left: -8px; }
.site-footer__col .social li + li { margin-top: 0; }
.social__link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: var(--ink);
  transition: color .2s, transform .2s;
}
.social__icon { display: block; width: 28px; height: 28px; }
.site-footer a.social__link:hover,
.site-footer a.social__link:focus-visible {
  color: var(--accent-ink);
  transform: translateY(-2px);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .4rem 2rem;
  padding-block: 1.4rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--footer-line);
  font-size: .875rem;
}

@media (max-width: 999px) {
  .site-footer__grid { grid-template-columns: repeat(3, auto); justify-content: start; }
  .site-footer__about { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .site-footer__cta .btn { width: 100%; }
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "about about"
      "contact contact"
      "explore follow";
    column-gap: 1.5rem;
  }
  .site-footer__about { grid-area: about; }
  .site-footer__col--contact { grid-area: contact; }
  .site-footer__col--explore { grid-area: explore; }
  .site-footer__col--follow { grid-area: follow; }
}

/* ---------- Mobile action bar ---------- */

.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: none;
  gap: .6rem;
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .25s ease;
}
.action-bar .btn { flex: 1; min-height: 48px; }
.action-bar .btn--outline { flex: 0 0 32%; }
.action-bar.is-visible { transform: none; }
@media (max-width: 759px) {
  .action-bar { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .action-bar, .shot img { transition: none; }
}

/* ---------- Motion: reveals on scroll, hero entrance ---------- */

@media (prefers-reduced-motion: no-preference) {
  .motion-ready .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
      opacity .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms),
      transform .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms);
  }
  .motion-ready .reveal.is-in { opacity: 1; transform: none; }

  /* Hero: the photo settles, then the words rise in.
     Once it has settled it slowly breathes: 14s in, 14s out, small enough to feel alive, not busy. */
  .js .hero__bg {
    animation:
      hero-zoom 1.8s cubic-bezier(.2, .7, .2, 1) both,
      hero-drift 14s ease-in-out 1.8s infinite alternate;
  }
  .hero.is-offscreen .hero__bg { animation-play-state: paused; }
  .js .hero__inner > * { animation: rise 1s cubic-bezier(.2, .7, .2, 1) both; }
  .js .hero__inner > :nth-child(1) { animation-delay: .2s; }
  .js .hero__inner > :nth-child(2) { animation-delay: .32s; }
  .js .hero__inner > :nth-child(3) { animation-delay: .46s; }
}
@keyframes hero-zoom {
  from { scale: 1.12; }
  to   { scale: 1.04; }
}
@keyframes hero-drift {
  from { scale: 1.04; }
  to   { scale: 1.09; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.hero__bg { scale: 1.04; }

@media (prefers-reduced-motion: reduce) {
  .make__item.is-active::after { transform: scaleY(1); }
  .shot img,
  .about__photo img,
  .hero__bg { translate: none !important; scale: 1; }
}