/* ==========================================================================
   Loosey Goosey Grill: the site's design
   Dark and warm, like the trailer at night: cream text on near-black, the mustard yellow of the trailer's
   tiles for anything to press, the checked paper the burgers sit on, and tall poster lettering (Anton)
   for the headlines, as on the menu boards. Built on the template's components (carousels, the photo
   viewer, the map, the questions), restyled; class names are the template's.
   ========================================================================== */

:root {
  --bg: #100e0c;
  --bg-2: #171411;
  --surface: #1e1a16;
  --surface-2: #27221d;
  --ink: #0a0908;
  --ink-2: #14110f;
  --ink-3: #2b2520;
  --line: rgb(255 238 214 / 0.10);
  --line-strong: rgb(255 238 214 / 0.18);
  --text: #f5eee2;
  --muted: #bcb09f;
  --faint: #8d8274;
  --cream: #efe7d6;
  --accent: #f2c230;           /* the trailer's tiles */
  --accent-hi: #ffd85a;
  --accent-lo: #c99b14;
  --accent-tint: rgb(242 194 48 / 0.12);
  --accent-2: #ec7a2f;         /* the goose's beak */
  --on-accent: #17130b;
  --whatsapp: #25d366;
  --star: #f2c230;
  --veg: #7fc47a;

  --font-display: "Anton", Impact, "Arial Narrow Bold", ui-sans-serif, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --shadow-sm: 0 2px 10px rgb(0 0 0 / 0.25);
  --shadow: 0 24px 48px -24px rgb(0 0 0 / 0.75);
  --shadow-lg: 0 40px 80px -30px rgb(0 0 0 / 0.85);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --container: 1220px;
  --gutter: clamp(16px, 4vw, 32px);
  --section: clamp(72px, 9vw, 124px);
  --header-h: 78px;
  --footer-h: 64px;            /* the slim footer: the last home page section shares its screen with it */
  --mist: var(--surface-2);    /* the sidebar design's name for a photo's background while it loads */
  /* the checked paper under the burgers */
  --checks: repeating-conic-gradient(var(--cream) 0 25%, #121110 0 50%) 0 0 / 22px 22px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); color-scheme: dark; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-body); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
h1, h2 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 1.02;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
abbr[title] { text-decoration: none; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 1000;
  padding: 10px 16px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 700;
}
.skip-link:focus { top: 12px; }
/* the client's preview only (build.py --client-preview): says plainly it isn't the live site */
.preview-ribbon {
  position: fixed; z-index: 1000; top: 0; left: 50%; transform: translateX(-50%);
  padding: 0.3rem 0.9rem; border-radius: 0 0 10px 10px; background: #b3261e; color: #fff;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; pointer-events: none;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.25);
}

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { position: relative; padding-block: var(--section); }
.section--mist { background: var(--bg-2); }

/* One screen per section (Adam's rule for every site): on desktop-sized windows each home page section fills
   the window below the header, and everything in it fits inside, at 1080p (1920 x 950 inside the browser)
   and 1440p (2560 x 1310). The content is centred in its screen, so a menu link lands on exactly one "page"
   at a time. Smaller windows and phones let sections take the height they need. */
@media (min-width: 1081px) and (min-height: 700px) {
  .section--screen {
    display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    padding-block: clamp(28px, 4.5vh, 64px);
  }
  .section--screen .section-head { margin-bottom: clamp(22px, 3.6vh, 44px); }
  .section--screen .h2, .section--screen .section-head h2 { font-size: clamp(2.3rem, 1rem + 2.6vw, 3.75rem); }
  .section--screen .section-head p { margin-top: 0.8rem; }
  /* the last section shares its screen with the footer */
  main > .section--screen:last-child {
    min-height: calc(100vh - var(--header-h) - var(--footer-h));
    min-height: calc(100svh - var(--header-h) - var(--footer-h));
  }
  /* the opening screen: the photo and the strip of four points over its foot, together exactly one screen */
  .intro { display: flex; flex-direction: column; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); padding-bottom: clamp(18px, 3vh, 40px); }
  .intro > .hero { flex: 1; display: flex; flex-direction: column; }
  .intro .hero__inner { flex: 1; min-height: 0; padding-block: clamp(28px, 4.5vh, 64px) calc(clamp(104px, 10vw, 124px) + clamp(24px, 4vh, 48px)); }
  /* what each section changes so its content fits its screen is at the end of this file (it must come after
     the sections' own rules) */
}
/* 1440p and other tall screens: the same sizes as 1080p, never scaled or zoomed up. The extra height goes into
   spacing instead (see "Tall screens" at the end of this file). */
.icon { width: 1.25em; height: 1.25em; flex: none; }
.nowrap { white-space: nowrap; }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; }
.eyebrow--light { color: var(--accent); }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; max-width: none; flex-wrap: wrap; }
.section-head--split > div { max-width: 680px; }
.h2, .section-head h2 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.25rem); margin-top: 0.85rem; }
.section-head p { margin-top: 1.1rem; font-size: 1.125rem; color: var(--muted); }
.lead { font-size: 1.125rem; color: var(--muted); }
.text-grad, .hero__highlight { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 52px; padding: 0.85rem 1.5rem;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: 1rem; font-weight: 700; line-height: 1.1; white-space: nowrap;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 1.15em; height: 1.15em; }
/* phones: shorter words (Adam, 14 Nov 2026), built by phone_text() in build.py. .phone-hide stays in the page for
   screen readers and Google but isn't shown on phones ("Book us for your event" shows as "Book us"); .phone-only,
   marked aria-hidden, is a short form phones show in its place ("£5m PL insurance") */
.phone-only { display: none; }
@media (max-width: 640px) {
  .phone-hide { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .phone-only { display: inline; }
}
.btn--primary {
  --btn-bg: var(--accent); --btn-fg: var(--on-accent);
  box-shadow: 0 14px 30px -14px rgb(242 194 48 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.35);
}
.btn--primary:hover { --btn-bg: var(--accent-hi); box-shadow: 0 18px 36px -14px rgb(242 194 48 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.4); }
.btn--glass {
  --btn-bg: rgb(255 248 236 / 0.08); border-color: rgb(255 248 236 / 0.26);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--glass:hover { --btn-bg: rgb(255 248 236 / 0.16); border-color: rgb(255 248 236 / 0.45); }
.btn--dark { --btn-bg: var(--ink); }
.btn--light { --btn-bg: var(--cream); --btn-fg: var(--on-accent); }
.btn--light:hover { --btn-bg: #fff; }
.btn--outline { --btn-bg: transparent; border-color: var(--line-strong); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.btn--whatsapp { --btn-bg: var(--whatsapp); --btn-fg: #04230f; }
.btn--whatsapp:hover { box-shadow: 0 14px 28px -14px rgb(37 211 102 / 0.9); }
.btn--lg { min-height: 60px; padding: 1rem 1.9rem; font-size: 1.0625rem; }
.btn--sm { min-height: 42px; padding: 0.55rem 1rem; font-size: 0.9rem; }
.btn--block { width: 100%; }
@media (max-width: 480px) { .btn { white-space: normal; text-align: center; } }

.link-arrow { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; color: var(--accent); }
.link-arrow .icon { width: 1.1em; height: 1.1em; transition: transform 0.2s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

.stars { display: inline-flex; gap: 2px; color: var(--star); }
.stars .icon { width: 17px; height: 17px; }
.stars .is-off { color: #4a4239; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 70;
  background: rgb(10 9 8 / 0.92);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.header__inner { display: flex; align-items: center; gap: 1.25rem; height: calc(var(--header-h) - 1px); }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; flex: none; }
.brand__badge { width: 56px; height: auto; filter: drop-shadow(0 4px 10px rgb(0 0 0 / 0.5)); transition: transform 0.35s var(--ease); }
.brand:hover .brand__badge { transform: rotate(-8deg) scale(1.05); }
/* the full name in bold white, and the slogan under it, drawn out to the name's width by a line either side */
.brand__text { display: inline-grid; line-height: 1; }
.brand__name { font-family: var(--font-display); font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.02em; color: #fff; white-space: nowrap; }
.brand__sub {
  display: flex; align-items: center; gap: 0.55rem; margin-top: 0.34rem;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); white-space: nowrap;
}
.brand__sub > span { margin-right: -0.2em; }      /* the letter spacing after the last letter, so the slogan sits dead centre */
.brand__sub::before, .brand__sub::after { content: ""; flex: 1; min-width: 10px; height: 2px; border-radius: 2px; background: currentColor; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 0.1rem; }
.nav__link {
  position: relative; display: inline-flex; align-items: center;
  padding: 0.55rem 0.85rem; border-radius: 999px;
  color: rgb(245 238 226 / 0.78); font-size: 0.96875rem; font-weight: 600;
  transition: color 0.2s, background-color 0.2s;
}
.nav__link:hover { color: var(--text); background: rgb(255 248 236 / 0.07); }
.nav__link.is-active, .nav__link[aria-current="page"] { color: var(--accent); }
.nav__cta { display: none; }
.header__cta { flex: none; }
.header__cta .btn { min-height: 46px; padding: 0.65rem 1.2rem; font-size: 0.9375rem; }
.nav-toggle {
  display: none; place-items: center; flex: none; width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 14px; background: rgb(255 248 236 / 0.05); color: var(--text);
}
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-grid; order: 1; }
  .header__cta { margin-left: auto; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 12px var(--gutter) 24px;
    background: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 30px 50px -20px rgb(0 0 0 / 0.8);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
    max-height: calc(100dvh - var(--header-h) - 40px); overflow-y: auto; overscroll-behavior: contain;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { padding: 0.95rem 1rem; border-radius: 14px; font-size: 1.0625rem; }
  .nav__cta { display: block; padding-top: 12px; }
}
/* phones have the WhatsApp and Call bar fixed at the foot of the screen, even with the menu open, so the menu doesn't
   repeat it (Adam, 14 Nov 2026); tablets have no bar, so their menu keeps the button */
@media (max-width: 760px) { .nav__cta { display: none; } }
/* phones: the open menu covers the whole screen under the header in black, with the WhatsApp and Call bar still on
   top of it (its z-index is above the header's), and the page behind it stays still (Adam, 14 Nov 2026) */
@media (max-width: 760px) {
  .nav {
    height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); max-height: none;
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
    background: var(--ink); border-bottom: 0; box-shadow: none;
  }
  /* on body, not html: html's overflow would stop body's reaching the window, making body a scroll box of its own,
     and the sticky header would scroll away */
  html.nav-open body { overflow: hidden; }
}
@media (max-width: 560px) {
  :root { --header-h: 70px; }
  .brand__badge { width: 44px; }
  .brand__name { font-size: 1.12rem; }
  .brand__sub { gap: 0.4rem; font-size: 0.5rem; letter-spacing: 0.16em; }
  .brand__sub > span { margin-right: -0.16em; }
  .header__inner { gap: 0.6rem; }
  .header__cta .btn { width: 46px; min-height: 46px; padding: 0; }
  .header__cta .btn span { display: none; }
}
@media (max-width: 370px) { .brand__sub { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--text); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture { display: contents; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%);
  animation: hero-zoom 16s var(--ease) both;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgb(10 9 8 / 0.94) 0%, rgb(10 9 8 / 0.82) 34%, rgb(10 9 8 / 0.30) 66%, rgb(10 9 8 / 0.08) 100%),
    linear-gradient(0deg, rgb(10 9 8 / 0.95) 0%, transparent 38%);
}
.hero__inner {
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(640px, 90svh, 860px);
  padding-block: clamp(48px, 7vw, 96px) clamp(150px, 15vw, 190px);
}
.hero__content { max-width: 680px; }
.hero__logo { width: clamp(96px, 9vw, 132px); height: auto; margin-bottom: 1.1rem; filter: drop-shadow(0 10px 24px rgb(0 0 0 / 0.6)); animation: rise 0.8s var(--ease) both; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.35rem 0.95rem 0.35rem 0.35rem; border-radius: 999px;
  background: rgb(255 248 236 / 0.08); border: 1px solid rgb(255 248 236 / 0.16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 0.875rem; font-weight: 600; color: rgb(245 238 226 / 0.9);
  animation: rise 0.8s 0.04s var(--ease) both;
}
.hero__badge-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.hero__badge-icon .icon { width: 14px; height: 14px; }
.hero h1 { margin-top: 1.1rem; font-size: clamp(2.4rem, 0.8rem + 8vw, 6.4rem); line-height: 0.95; animation: rise 0.9s 0.08s var(--ease) both; }
.hero__highlight { display: inline-block; color: var(--accent); }
.hero__lead { max-width: 580px; margin-top: 1.3rem; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); color: rgb(245 238 226 / 0.86); animation: rise 0.9s 0.16s var(--ease) both; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; animation: rise 0.9s 0.24s var(--ease) both; }
.hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.5rem; margin-top: 2rem; font-size: 0.9375rem; color: rgb(245 238 226 / 0.86); animation: rise 0.9s 0.32s var(--ease) both; }
.hero__proof li { display: inline-flex; align-items: flex-start; gap: 0.5rem; line-height: 1.45; }
.hero__proof .tick { margin-top: 0.05rem; }
.hero__proof .tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); }
.hero__proof .tick .icon { width: 13px; height: 13px; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (max-width: 760px) {
  .hero::before { background: linear-gradient(180deg, rgb(10 9 8 / 0.45) 0%, rgb(10 9 8 / 0.78) 42%, rgb(10 9 8 / 0.97) 100%); }
  .hero__inner { min-height: 0; padding-block: 40px 150px; }
  /* the two buttons share one row in equal halves (Adam's rule: paired buttons side by side on phones, 14 Nov 2026);
     they'd only stack on a screen too narrow for both */
  .hero__actions .btn { flex: 1 1 0; min-width: max-content; }
}
/* phones (Adam, 14 Nov 2026): no location pill and no card of four claims below the hero (the heading and the lead
   already say where, and the claims' facts are further down the page); the short claims two to a row; "Book us" and
   "See the menu" a touch more compact, like About's pair, both fitting from 320px */
@media (max-width: 640px) {
  .hero__badge { display: none; }
  .hero h1 { margin-top: 0; }
  .hero__inner { padding-bottom: 56px; }
  .hero__actions .btn { padding-inline: 0.875rem; font-size: 0.9375rem; }
  /* 13.5px keeps "Rated 5.0 on Google" on one line from 360px, and every claim on one from 375px */
  .hero__proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 0.75rem 0.5rem; font-size: 0.84375rem; }
  .hero__proof li { gap: 0.375rem; line-height: 1.35; }
  .hero__proof .tick { width: 18px; height: 18px; margin-top: 0; }
  .hero__proof .tick .icon { width: 11px; height: 11px; }
  .hero__proof small { display: block; margin-top: 0.1rem; font-size: 0.78rem; color: rgb(245 238 226 / 0.62); }
  .features { display: none; }
}
@media (max-width: 640px) { .hero__media img { object-position: var(--focus-m, var(--focus, 50% 50%)); } }

/* Feature strip, over the bottom of the hero */
.features { position: relative; z-index: 2; margin-top: calc(-1 * clamp(104px, 10vw, 124px)); }
.features__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--line-strong); box-shadow: var(--shadow-lg);
}
.feature { display: flex; align-items: flex-start; gap: 1rem; padding: 1.6rem 1.4rem; background: var(--surface); }
.feature__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-tint); color: var(--accent); }
.feature__icon .icon { width: 24px; height: 24px; }
.feature h3 { font-size: 1.0625rem; line-height: 1.25; }
.feature p { margin-top: 0.3rem; font-size: 0.9375rem; line-height: 1.45; color: var(--muted); }
@media (max-width: 1000px) { .features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features__grid { grid-template-columns: 1fr; } .feature { padding: 1.2rem 1.2rem; } }
/* the checked-paper band under the opening screen */
.intro { position: relative; padding-bottom: clamp(40px, 5vw, 64px); }
.intro::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--checks); background-size: 12px 12px; opacity: 0.9; }

/* ---------- Carousels ---------- */
.carousel { --per-view: 3; --gap: 22px; position: relative; min-width: 0; }
.carousel__track {
  display: grid; grid-auto-flow: column; gap: var(--gap);
  grid-auto-columns: calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 10px 8px 22px; margin: -10px -8px -4px; scroll-padding-inline: 8px; scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; min-width: 0; }
.carousel__controls { display: flex; align-items: center; margin-top: 0.75rem; }
.carousel.is-static .carousel__controls { display: none; }
.carousel--center.is-static .carousel__track { justify-content: center; }
.carousel__progress { display: none; flex: 1; max-width: 260px; height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.js .carousel__progress { display: block; }
.carousel__progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform: scaleX(var(--progress, 0)); transform-origin: left; transition: transform 0.3s var(--ease); }
.carousel { --arrow-top: 50%; --arrow-out: min(24px, calc(var(--gutter) - 10px)); }
.carousel--photos { --arrow-top: 33%; }
.carousel__btn {
  position: absolute; top: var(--arrow-top); z-index: 5; translate: 0 -50%;
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-2); color: var(--text);
  box-shadow: 0 12px 28px -10px rgb(0 0 0 / 0.8);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, visibility 0.2s;
}
.carousel__btn[data-prev] { left: calc(-1 * var(--arrow-out)); }
.carousel__btn[data-next] { right: calc(-1 * var(--arrow-out)); }
.carousel__btn:hover:not([aria-disabled="true"]) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.carousel__btn[aria-disabled="true"] { cursor: default; color: var(--faint); }
.carousel__btn[aria-disabled="true"]:not(:focus-visible) { opacity: 0; visibility: hidden; transition: background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, visibility 0s 1.5s; }
.carousel__btn[aria-disabled="true"]:hover { visibility: visible; }
.carousel__btn .icon { width: 22px; height: 22px; }
@media (max-width: 640px) { .carousel__btn { width: 44px; height: 44px; } }
@media (max-width: 1180px) { .carousel { --per-view: 2; } }
@media (max-width: 640px) { .carousel { --per-view: 1.14; --gap: 14px; } }
.carousel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; min-height: 36px; }
.carousel__head > h2 { min-width: 0; margin: 0; }
.carousel--head > .carousel__head { margin-bottom: 1.25rem; }
.carousel--head .carousel__controls { flex: none; gap: 8px; margin: 0; }
.carousel--head .carousel__progress { flex: none; width: 96px; margin-right: 6px; }
.carousel--head .carousel__btn { position: static; translate: none; width: 38px; height: 38px; box-shadow: none; }
.carousel--head .carousel__btn .icon { width: 20px; height: 20px; }
.carousel--head .carousel__btn[aria-disabled="true"]:not(:focus-visible) { opacity: 0.4; visibility: visible; }
@media (max-width: 640px) { .carousel__head { min-height: 42px; } .carousel--head .carousel__btn { width: 42px; height: 42px; } .carousel--head .carousel__progress { display: none; } }
/* Phones: every carousel's arrows sit above its cards, on the right, the compact kind the catering page's has (Adam,
   13 Nov 2026: arrows on the cards' edges covered the photos). Wide screens keep them on the edges, level with the
   cards. Only the look changes: the buttons stay where they are in the page, after the cards. */
@media (max-width: 640px) {
  .carousel:not(.carousel--head) { display: flex; flex-direction: column; }
  .carousel:not(.carousel--head) > .carousel__controls { order: -1; justify-content: flex-end; gap: 8px; margin: 0 0 1.25rem; }
  .carousel:not(.carousel--head) .carousel__progress { display: none; }
  .carousel:not(.carousel--head) .carousel__btn { position: static; translate: none; width: 42px; height: 42px; box-shadow: none; }
  .carousel:not(.carousel--head) .carousel__btn .icon { width: 20px; height: 20px; }
  .carousel:not(.carousel--head) .carousel__btn[aria-disabled="true"]:not(:focus-visible) { opacity: 0.4; visibility: visible; }
  /* the home page's sections with a link to another page (services, menu, events): the arrows sit at the right of
     the link's row (Adam, 14 Nov 2026), the heading over them and the cards under them. The head and the carousel
     lay their parts out in the section's own grid (display: contents); the link is a little more compact, so
     "How our catering works" fits beside the arrows on a 375px phone (narrower phones wrap its words). */
  .container--carousel { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
  .container--carousel > .section-head, .container--carousel > .carousel { display: contents; }
  .container--carousel > .section-head > div { grid-column: 1 / -1; margin-bottom: 24px; }
  .container--carousel > .section-head > .btn { grid-row: 2; grid-column: 1; justify-self: start; padding-inline: 1rem; font-size: 0.9375rem; gap: 0.5rem; }
  .container--carousel > .carousel > .carousel__controls { grid-row: 2; grid-column: 2; margin: 0; }
  .container--carousel > .carousel > .carousel__track { grid-row: 3; grid-column: 1 / -1; margin-top: 26px; }
  /* arrows only where they sit beside something (a link button, or a heading in a head carousel); anywhere else (the
     reviews) a row of their own looked out of place (Adam, 14 Nov 2026), so there it's swiping, the next card peeking
     in from the edge to show there's more */
  .carousel:not(.carousel--head):not(.container--carousel > .carousel) > .carousel__controls { display: none; }
}

/* ---------- Service cards ---------- */
.service-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
}
.service-card:hover { transform: translateY(-6px); border-color: rgb(242 194 48 / 0.45); box-shadow: var(--shadow); }
.service-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.service-card:hover .service-card__media img { transform: scale(1.05); }
.service-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgb(10 9 8 / 0.55)); }
.service-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(150deg, var(--ink-3), var(--ink)); color: var(--accent); }
.service-card__placeholder .icon { width: 64px; height: 64px; stroke-width: 1.5; }
.service-card__tag {
  position: absolute; left: 14px; top: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.8rem; border-radius: 999px; background: rgb(10 9 8 / 0.78); color: var(--text); font-size: 0.8125rem; font-weight: 700;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.service-card__tag .icon { width: 15px; height: 15px; color: var(--accent); }
.service-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.4rem 1.5rem 1.4rem; }
.service-card h3 { font-size: 1.3rem; transition: color 0.2s; }
.service-card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.service-card__link:focus-visible { outline: none; }
.service-card:has(.service-card__link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.service-card__body p { margin-top: 0.5rem; font-size: 0.98rem; color: var(--muted); }
.service-card__more { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 1rem; font-size: 0.9375rem; font-weight: 700; color: var(--accent); }
.service-card__more .icon { width: 1em; height: 1em; transition: transform 0.2s var(--ease); }
.service-card:hover .service-card__more .icon { transform: translateX(4px); }
.service-card:hover h3 { color: var(--accent); }
.service-card--plain:hover { transform: none; border-color: var(--line); box-shadow: var(--shadow-sm); }
.service-card--plain:hover .service-card__media img { transform: none; }
.service-card--plain:hover h3 { color: inherit; }

.checklist { display: grid; gap: 0.6rem; }
.checklist li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.98rem; line-height: 1.45; }
.checklist .icon { width: 21px; height: 21px; margin-top: -1px; padding: 4px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); }

/* ---------- From the menu (home page) ---------- */
/* the dishes are a carousel: four across on wide screens (all in view, so no arrows), two on tablets, one and a bit
   on phones, its arrows above the cards there like every carousel's */
@media (min-width: 1081px) { .carousel--dishes { --per-view: 4; } }
.dish {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s var(--ease);
}
.dish:hover { transform: translateY(-6px); border-color: rgb(242 194 48 / 0.45); box-shadow: var(--shadow); }
.dish__media { aspect-ratio: 1; overflow: hidden; background: var(--surface-2); }
.dish__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.dish:hover .dish__media img { transform: scale(1.06); }
.dish__body { padding: 1.2rem 1.25rem 1.4rem; }
.dish h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; transition: color 0.2s; }
.dish:hover h3 { color: var(--accent); }
.dish__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.dish__link:focus-visible { outline: none; }
.dish:has(.dish__link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.dish p { margin-top: 0.5rem; font-size: 0.95rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 520px) { .dish__media { aspect-ratio: 4 / 3; } }

/* ---------- About ---------- */
/* The eyebrow has a row of its own over the text, so the photo starts level with the heading and runs to the
   end of the text: both columns start and end on the same lines (Adam's placement rule) */
.about {
  display: grid; grid-template-columns: 1fr 1.05fr; grid-template-areas: ". eyebrow" "media body";
  column-gap: clamp(40px, 6vw, 96px); row-gap: 0.85rem; align-items: stretch;
}
.about__eyebrow { grid-area: eyebrow; }
.about__media { grid-area: media; position: relative; }
.about__body { grid-area: body; }
.about__body > .h2 { margin-top: 0; }
.about__photo { overflow: hidden; height: 100%; min-height: 320px; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); background: var(--surface-2); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.float-card {
  position: absolute; display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 1.1rem 0.8rem 0.8rem;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: rgb(30 26 22 / 0.92); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.float-card--br { right: clamp(-28px, -2vw, -12px); bottom: 36px; }
.float-card img { width: 52px; height: auto; }
.float-card strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.05; text-transform: uppercase; color: var(--accent); }
.float-card span { display: block; font-size: 0.85rem; color: var(--muted); line-height: 1.3; }
.about__body > p { margin-top: 1rem; color: var(--muted); }
.about__body > p:first-of-type { margin-top: 1.4rem; font-size: 1.1875rem; color: var(--text); }
.about__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2.25rem; }
/* phones: "Book us" and "See where we've been" side by side on one line (Adam, 14 Nov 2026), a touch more compact;
   on the smallest phones the link's words wrap beside the button rather than under it */
@media (max-width: 640px) {
  .about__actions { flex-wrap: nowrap; gap: 1rem; }
  .about__actions .btn { flex: none; padding-inline: 1rem; font-size: 0.9375rem; }
  .about__actions .link-arrow { min-width: 0; font-size: 0.9375rem; }
}
.about > *, .areas > *, .detail > *, .contact > * { min-width: 0; }
@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; grid-template-areas: "media" "eyebrow" "body"; row-gap: 0; }
  .about__media { width: 100%; max-width: 520px; margin-inline: auto; margin-bottom: clamp(32px, 6vw, 48px); }
  .about__photo { height: auto; min-height: 0; aspect-ratio: 5 / 4; }
  .about__body > .h2 { margin-top: 0.85rem; }
}
@media (max-width: 560px) { .float-card--br { right: 12px; bottom: 16px; } }

/* ---------- Event cards (the template's project cards) ---------- */
.project { position: relative; display: flex; flex-direction: column; }
.project__media {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  margin: 0; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--surface-2); cursor: zoom-in; box-shadow: var(--shadow-sm);
}
.project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.project__media:hover img, .project__media:focus-visible img { transform: scale(1.05); }
.project__zoom {
  position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.6rem; border-radius: 999px;
  background: rgb(10 9 8 / 0.72); color: var(--text); font-size: 0.8125rem; font-weight: 700; line-height: 1;
}
.project__zoom .icon { width: 16px; height: 16px; }
.project__body { padding: 1rem 0.2rem 0; }
.project h3 { font-size: 1.1875rem; }
.project__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem calc(1rem + 0.2em);
  margin: 0.35rem -6px 0; padding-inline: 6px; overflow-x: clip; font-size: 0.9375rem; color: var(--muted);
}
.project__meta > * { position: relative; }
.project__meta > * + *::before { content: "\00B7"; content: "\00B7" / ""; position: absolute; right: 100%; width: calc(1rem + 0.2em); text-align: center; color: var(--faint); pointer-events: none; }
.project__meta a { position: relative; z-index: 1; font-weight: 600; color: var(--accent); }
.project__meta a:hover { text-decoration: underline; }
.project--page .project__media { cursor: pointer; }
.project__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.project__link:focus-visible { outline: none; }
.project--page:has(.project__link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: var(--r-lg); }
.project--page .project__meta a { z-index: 3; }
.project--page h3 { transition: color 0.2s; }
.project--page:hover h3 { color: var(--accent); }
.project--page:hover .project__media img { transform: scale(1.05); }
.project__text { margin-top: 0.4rem; font-size: 0.95rem; color: var(--muted); }
.project__sample { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 0.3rem 0.65rem; border-radius: 999px; background: rgb(10 9 8 / 0.78); font-size: 0.75rem; font-weight: 700; }
.sample-note { margin-top: 1.1rem; padding: 0.7rem 1rem; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--accent-tint); font-size: 0.95rem; line-height: 1.55; }

/* ---------- An event's photos (partials/photo-display) ---------- */
.pd { position: relative; overflow: hidden; aspect-ratio: var(--pd-ratio, 4 / 3); border-radius: inherit; background: var(--surface-2); isolation: isolate; }
.pd img { width: 100%; height: 100%; object-fit: cover; }
:where(.pd button) { padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.pd__item, .pd__tile { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; cursor: zoom-in; }
.pd__item img, .pd__tile img { transition: transform 0.7s var(--ease); }
.pd__item:hover img, .pd__tile:hover img { transform: scale(1.03); }
.pd__item { border-radius: inherit; }
.pd__item:focus-visible, .pd__tile:focus-visible, .pd__fold-open:focus-visible { outline: none; }
.pd__item:focus-visible::after, .pd__tile:focus-visible::after, .pd__fold-open:focus-visible::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 0 5px var(--ink); outline: 3px solid transparent; outline-offset: -3px;
}
.pd__zoom, .pd__caption, .pd__tag, .pd__more, .pd__expand {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.7rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; line-height: 1.2;
  background: rgb(10 9 8 / 0.74); color: var(--text); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pd .icon { width: 16px; height: 16px; }
.pd__zoom { top: 12px; right: 12px; padding: 0.45rem; pointer-events: none; transition: background-color 0.2s, color 0.2s; }
.pd__item:hover .pd__zoom, .pd__tile:hover .pd__zoom { background: var(--accent); color: var(--on-accent); }
.pd__sample { z-index: 3; pointer-events: none; }
.pd__caption { left: 12px; bottom: 12px; max-width: calc(100% - 24px); pointer-events: none; }
.pd--compare { --pos: 50%; container-type: inline-size; user-select: none; touch-action: pan-y pinch-zoom; cursor: ew-resize; }
.pd--compare img { pointer-events: none; }
.pd__after { position: absolute; inset: 0; }
.pd__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.pd__line { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 10px rgb(0 0 0 / 0.35); pointer-events: none; }
.pd__knob { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2px solid #fff; border-radius: 50%; background: rgb(10 9 8 / 0.55); color: #fff; }
.pd__knob .icon { width: 15px; height: 15px; }
.pd__tag { bottom: 12px; max-width: calc(50% - 18px); overflow-wrap: anywhere; pointer-events: none; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; }
.pd__tag--before { left: 12px; }
.pd__tag--after { right: 12px; }
.pd__range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.pd__range:focus-visible ~ .pd__line .pd__knob { outline: 3px solid var(--accent); outline-offset: 3px; }
.pd__expand { top: 12px; right: 12px; z-index: 4; padding: 0.45rem; cursor: zoom-in; }
.pd__expand:hover { background: var(--accent); color: var(--on-accent); }
.pd__expand--count { padding: 0.4rem 0.7rem; }
.pd--accordion { display: flex; gap: 4px; background: var(--bg); }
.pd__fold { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 6px; transition: flex-grow 0.55s var(--ease); }
.pd__fold.is-open { flex-grow: 6; }
@media (hover: hover) { .pd--accordion:hover .pd__fold { flex-grow: 1; } .pd--accordion .pd__fold:hover { flex-grow: 6; } }
/* each strip is one button: a click or a tap anywhere on its photo opens it full size (Adam, 13 Nov 2026). A mouse
   opens a strip out as it hovers, and the keyboard opens the strip it moves to. The expand mark only shows the way. */
.pd__fold-open { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.pd__fold-open img { filter: saturate(0.7) brightness(0.7); transition: filter 0.4s; }
.pd__fold.is-open .pd__fold-open img, .pd__fold:hover .pd__fold-open img, .pd__fold-open:focus-visible img { filter: none; }
.pd__fold .pd__caption, .pd__fold .pd__zoom { opacity: 0; transition: opacity 0.3s, background-color 0.2s, color 0.2s; }
.pd__fold.is-open .pd__caption, .pd__fold.is-open .pd__zoom { opacity: 1; }
.pd__fold:hover .pd__zoom { background: var(--accent); color: var(--on-accent); }
@media (hover: hover) {
  .pd--accordion:hover .pd__fold.is-open:not(:hover) .pd__caption, .pd--accordion:hover .pd__fold.is-open:not(:hover) .pd__zoom { opacity: 0; }
  .pd__fold:hover .pd__caption, .pd__fold:hover .pd__zoom { opacity: 1; }
}
.pd__fold:focus-within .pd__caption, .pd__fold:focus-within .pd__zoom { opacity: 1; }
.pd--mosaic { display: grid; gap: 4px; background: var(--bg); }
.pd--tiles-2 { grid-template-columns: 1fr 1fr; }
.pd--tiles-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.pd--tiles-3 .pd__tile:first-child { grid-row: span 2; }
.pd--tiles-4 { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr); }
.pd--tiles-4 .pd__tile:first-child { grid-row: span 3; }
.pd__tile { border-radius: 6px; }
.pd__tile:first-child { border-radius: 0; }
.pd__more { inset: 0; justify-content: center; border-radius: 0; font-size: 1.5rem; background: rgb(10 9 8 / 0.55); }
@media (prefers-reduced-motion: reduce) { .pd img, .pd__fold, .pd__fold-open img { transition: none !important; } }

.job-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 1rem; font-weight: 600; color: var(--muted); }
.job-meta li { display: inline-flex; align-items: center; gap: 0.45rem; }
.job-meta .icon { width: 18px; height: 18px; color: var(--accent); }
.job-meta a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.job-meta a:hover { color: var(--accent); }

/* Lightbox */
.lightbox { width: min(100vw - 32px, 1100px); max-width: none; max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--r-lg); background: transparent; color: #fff; overflow: visible; }
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: rgb(5 4 3 / 0.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox[open] { animation: rise 0.35s var(--ease); }
.lightbox figure { margin: 0; }
.lightbox img { width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: var(--r); background: #000; }
.lightbox figcaption { margin-top: 0.9rem; text-align: center; font-weight: 600; color: rgb(255 255 255 / 0.85); }
.lightbox__btn {
  position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -40px; padding: 0;
  border: 1px solid rgb(255 255 255 / 0.2); border-radius: 50%; background: rgb(10 9 8 / 0.7); color: #fff; transition: background-color 0.2s;
}
.lightbox__btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lightbox__btn .icon { width: 24px; height: 24px; }
.lightbox__btn--prev { left: 12px; }
.lightbox__btn--next { right: 12px; }
.lightbox__btn--close { top: 12px; right: 12px; margin-top: 0; width: 46px; height: 46px; }
.lightbox.is-single .lightbox__btn--prev, .lightbox.is-single .lightbox__btn--next { display: none; }

/* ---------- Reviews ---------- */
.reviews { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.rating-card {
  position: relative; overflow: hidden; padding: 2rem; border: 1px solid rgb(242 194 48 / 0.35);
  border-radius: var(--r-lg); background: linear-gradient(160deg, #2a2216, var(--surface) 60%); box-shadow: var(--shadow-lg);
}
.rating-card::before { content: ""; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgb(242 194 48 / 0.28), transparent 70%); }
.rating-card__top { position: relative; display: flex; align-items: center; gap: 0.75rem; font-weight: 700; }
.rating-card__score { position: relative; display: flex; align-items: flex-end; gap: 0.6rem; margin-top: 1.4rem; }
.rating-card__score strong { font-family: var(--font-display); font-size: 5rem; font-weight: 400; line-height: 0.85; color: var(--accent); }
.rating-card__score > span { padding-bottom: 0.35rem; color: var(--muted); font-weight: 600; }
.rating-card p { position: relative; margin-top: 1rem; color: var(--muted); font-size: 0.98rem; }
.rating-card p strong { color: var(--text); }
.rating-card__actions { position: relative; display: grid; gap: 0.6rem; margin-top: 1.6rem; }
.rating-card__actions .btn { min-height: 48px; font-size: 0.9375rem; }
.rating-card__actions .g { width: 16px; height: 16px; margin-right: 0.5rem; }
.reviews--solo { grid-template-columns: minmax(0, 760px); justify-content: start; }
.review { display: flex; flex-direction: column; padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.review__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.review__quote { width: 28px; height: 28px; color: var(--accent); opacity: 0.35; }
.review__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden; margin-top: 1rem; font-size: 0.99rem; line-height: 1.6; color: rgb(245 238 226 / 0.9); }
.review__text--empty { color: var(--muted); font-style: italic; }
.review__author { display: flex; align-items: flex-end; gap: 0.75rem; margin-top: auto; padding-top: 1.25rem; }
.review__avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 0.95rem; }
.review:nth-child(3n + 2) .review__avatar { background: var(--accent-2); }
.review:nth-child(3n + 3) .review__avatar { background: var(--cream); }
.review__name { font-weight: 700; line-height: 1.25; text-wrap: balance; }
@media (max-width: 960px) {
  .reviews { grid-template-columns: 1fr; }
  .rating-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 1.5rem; }
  .rating-card__top, .rating-card p { grid-column: 1 / -1; }
  .rating-card__actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .rating-card { display: block; padding: 1.5rem; }
  .rating-card__actions { grid-template-columns: 1fr; }
  /* phones: "5.0 on Google" and the count with its "as of" date, with no heading line and no "View on Google"
     (Adam, 14 Nov 2026); Google's G only ever sits inside that link, so it goes with it */
  .rating-card__top, .rating-card__view { display: none; }
  .rating-card__actions:not(:has(.btn:not(.rating-card__view))) { display: none; }
  .rating-card__score { margin-top: 0; }
  .rating-card__score strong { font-size: 4rem; }
  .rating-card p { margin-top: 0.8rem; }
}

/* ---------- Areas: the 25-mile circle on the map ---------- */
/* The eyebrow has a row of its own: the map starts level with the heading, and the note under the towns ends
   level with the card under the map (Adam's placement rule) */
.areas {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "eyebrow ." "body map";
  column-gap: clamp(28px, 4.5vw, 72px); row-gap: 0.85rem; align-items: stretch;
}
.areas--no-map { grid-template-columns: minmax(0, 820px); grid-template-areas: "eyebrow" "body"; }
.areas__eyebrow { grid-area: eyebrow; }
.areas__body { grid-area: body; display: flex; flex-direction: column; }
.areas__body > .h2 { margin-top: 0; }
.areas__map { grid-area: map; display: flex; flex-direction: column; }
.areas__map > .map { flex: 1; display: flex; flex-direction: column; }
.areas__map .map__frame { margin-bottom: 12px; }
.areas__map .map__card { margin-top: auto; }
.areas__body > p { margin-top: 1.1rem; color: var(--muted); font-size: 1.0625rem; }
.area-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; margin-bottom: 1.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem 0.45rem 0.65rem;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface);
  font-size: 0.9375rem; font-weight: 600; line-height: 1.2; color: var(--text);
  transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.2s var(--ease);
}
button.chip { cursor: default; }
.js button.chip { cursor: pointer; }
.js button.chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.chip .icon { width: 15px; height: 15px; color: var(--accent); }
.chip--home { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip--home .icon { color: var(--on-accent); }
.chip[aria-pressed="true"] { background: var(--cream); border-color: var(--cream); color: var(--on-accent); }
.chip[aria-pressed="true"] .icon { color: var(--on-accent); }
.chip--more { background: transparent; border-style: dashed; color: var(--muted); }
.areas__note { display: flex; align-items: center; gap: 0.9rem; min-height: 76px; margin-top: auto; padding: 0.8rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-weight: 600; line-height: 1.4; }
.areas__note .icon { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--accent-tint); color: var(--accent); }
@media (max-width: 900px) {
  .areas { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "body" "map"; }
  .areas__map { margin-top: 1.5rem; }
}
/* phones: the towns fold away behind one button and open as a tidy two-column list (Adam, 14 Nov 2026: the pills
   "litter the page and there's no structure there"). They stay in the page, so Google still reads every town, and
   they simply show without JavaScript */
.areas__toggle { display: none; }
@media (max-width: 640px) {
  .js .areas__toggle {
    display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 52px; margin-top: 1.4rem; padding: 0.75rem 1rem;
    border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface);
    color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer;
  }
  .areas__toggle .icon { flex: none; width: 18px; height: 18px; color: var(--accent); }
  .areas__toggle-arrow { margin-left: auto; transition: transform 0.2s var(--ease); }
  .areas__toggle[aria-expanded="true"] .areas__toggle-arrow { transform: rotate(180deg); }
  .area-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; margin-top: 1.2rem; margin-bottom: 0; }
  .js .area-chips { margin-top: 0.6rem; }
  .js .area-chips:not(.is-open) { display: none; }
  .area-chips > li { display: flex; min-width: 0; }
  .area-chips > li > .chip { flex: 1; min-width: 0; }
  .area-chips .chip { padding-inline: 0.55rem 0.6rem; font-size: 0.875rem; }
  .area-chips .chip--more { grid-column: 1 / -1; justify-content: center; }
  .areas__note { margin-top: 1rem; }
}

.map { position: relative; --vx: 0; --vy: 0; --vf: 1; }
.map__frame { position: relative; isolation: isolate; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: #191613; box-shadow: var(--shadow); container-type: inline-size; }
.map__base { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__land { fill: #1a1714; }
.map__layers { transition: opacity 0.6s var(--ease); }
.map__layers:empty { opacity: 0; }
.map__builtup { fill: #2a251f; }
.map__water { fill: #1e3a4a; }
.map__river { fill: none; stroke: #2f5f7a; stroke-width: 1.4px; stroke-linecap: round; stroke-linejoin: round; }
.map__road { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map__road--minor { stroke: #3a332b; stroke-width: 1px; }
.map__road--casing { stroke: #0f0d0b; stroke-width: 3.6px; }
.map__road--major { stroke: #6b5d4b; stroke-width: 1.8px; }
.map__area { fill: rgb(242 194 48 / 0.08); stroke: var(--accent); stroke-width: 2px; stroke-dasharray: 8 7; }
.map__pins { position: absolute; inset: 0; z-index: 1; }
.map__pin { position: absolute; width: 0; height: 0; cursor: pointer; left: calc((var(--x) - var(--vx)) / var(--vf) * 100%); top: calc((var(--y) - var(--vy)) / var(--vf) * 100%); }
.map__pin::before { content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--ink); box-shadow: 0 1px 4px rgb(0 0 0 / 0.5); transition: transform 0.2s var(--ease); }
.map__pin.is-base::before { left: -10px; top: -10px; width: 20px; height: 20px; background: var(--ink); border: 4px solid var(--accent); }
.map__pin:hover::before { transform: scale(1.25); }
.map__pin.is-active { z-index: 2; }
.map__pin.is-active::before { transform: scale(1.45); }
.map__pin.is-active::after { content: ""; position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--accent); animation: ping 1.6s var(--ease) infinite; }
@keyframes ping { from { opacity: 0.9; transform: scale(0.5); } to { opacity: 0; transform: scale(1.6); } }
.map__label {
  position: absolute; top: 0; left: 0; transform: translate(9px, -50%); white-space: nowrap;
  font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--text); pointer-events: none;
  text-shadow: 0 0 4px #0a0908, 0 0 3px #0a0908, 0 0 2px #0a0908, 0 0 1px #0a0908; transition: opacity 0.2s;
}
.map__pin.is-left .map__label { transform: translate(calc(-100% - 9px), -50%); }
.map__pin.is-top .map__label { transform: translate(-50%, calc(-100% - 11px)); }
.map__pin.is-bottom .map__label { transform: translate(-50%, 11px); }
.map__pin.is-base .map__label { font-size: 14px; color: var(--accent); }
.map__pin.is-minor .map__label { opacity: 0; }
.map.is-zoomed .map__label, .map__pin:hover .map__label, .map__pin.is-active .map__label { opacity: 1; }
@container (max-width: 480px) { .map__pin:not(.is-base, .is-page, .is-active) .map__label { opacity: 0; } .map__label { font-size: 11px; } }
.map__reset { position: absolute; right: 12px; top: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-2); font-size: 0.875rem; font-weight: 700; line-height: 1.2; }
.map__reset:hover { border-color: var(--accent); }
.map__reset .icon { width: 16px; height: 16px; color: var(--accent); }
.map__reset[hidden] { display: none; }
.map__credit { position: absolute; right: 10px; bottom: 6px; z-index: 3; font-size: 10.5px; color: rgb(245 238 226 / 0.55); }
.map__credit a { text-decoration: underline; }
.map__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.15rem 1rem; min-height: 76px; margin-top: 12px; padding: 0.8rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 0.9375rem; line-height: 1.4; }
.map__card > :not(.map__card-actions) { grid-column: 1; }
.map__card-actions { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
.map__card-title { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 1.0625rem; line-height: 1.2; }
.map__card-title .icon { width: 18px; height: 18px; color: var(--accent); }
.map__card-text { color: var(--muted); }
.map__card-links { color: var(--muted); }
@media (max-width: 560px) { .map__card { grid-template-columns: minmax(0, 1fr); } .map__card-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 0.5rem; } }

/* ---------- Book us (contact) ---------- */
/* The eyebrow has a row of its own, so the quote card starts level with the heading (never with the eyebrow,
   which is the way into the section) and both columns end on the same line (Adam's placement rule) */
.contact {
  display: grid; grid-template-columns: 1fr 1.1fr; grid-template-areas: "eyebrow ." "info quote";
  column-gap: clamp(28px, 4vw, 64px); row-gap: 0.85rem; align-items: stretch;
}
.contact__eyebrow { grid-area: eyebrow; }
.contact__info { grid-area: info; display: flex; flex-direction: column; }
.contact__info > .h2 { margin-top: 0; }
.contact .quote { grid-area: quote; display: flex; flex-direction: column; }
.contact .quote__form { flex: 1; align-content: start; }
.contact__socials { margin-top: auto; padding-top: 1.1rem; }     /* ends level with the foot of the quote card */
.contact__lead { margin-top: 1.1rem; }
.contact__cards { display: grid; gap: 12px; margin-top: 2rem; }
.contact-card {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s;
}
.contact-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); }
.contact-card__icon { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 14px; background: var(--accent-tint); color: var(--accent); }
.contact-card__icon .icon { width: 24px; height: 24px; }
.contact-card--wa { border-color: rgb(37 211 102 / 0.45); }
.contact-card--wa .contact-card__icon { background: rgb(37 211 102 / 0.14); color: var(--whatsapp); }
.contact-card__label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.contact-card__value { display: block; font-size: 1.15rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.contact-card > .icon { margin-left: auto; width: 20px; height: 20px; color: var(--faint); transition: transform 0.2s var(--ease), color 0.2s; }
.contact-card:hover > .icon { transform: translateX(3px); color: var(--accent); }
.has-anchors { position: relative; }
.anchor { position: absolute; top: 0; }
/* phones: WhatsApp, Email and Call side by side as three tiles, an icon over one word (Adam, 14 Nov 2026: the email
   address took two lines). The number and the address stay in each link for screen readers and Google */
@media (max-width: 640px) {
  .contact__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 1.5rem; }
  .contact-card { flex-direction: column; justify-content: center; gap: 0.55rem; padding: 0.95rem 0.4rem 0.85rem; text-align: center; }
  .contact-card__icon { width: 44px; height: 44px; border-radius: 12px; }
  .contact-card__icon .icon { width: 22px; height: 22px; }
  .contact-card > .icon { display: none; }
  .contact-card__label { font-size: 0.875rem; letter-spacing: 0; text-transform: none; color: var(--text); }
}
.find-us { margin-top: 2rem; padding: 1.4rem 1.5rem; border: 1px dashed var(--line-strong); border-radius: var(--r); }
.find-us h3 { font-size: 1.125rem; }
.find-us > p { margin-top: 0.5rem; color: var(--muted); font-size: 0.98rem; }
.find-us__base { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 1.1rem; font-size: 0.95rem; color: var(--muted); }
.find-us__base .icon { margin-top: 2px; color: var(--accent); }
.find-us__base strong { color: var(--text); }

/* the row is its own container: where the labelled buttons wouldn't fit on one line (they need 493px), they show their
   icons only, so the row stays in one line in every section (Adam, 14 Nov 2026: stacked rows looked random). The
   name stays in the page, hidden, so screen readers still read it. */
.socials { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; container-type: inline-size; }
.socials__link {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 44px; height: 44px; padding: 0 0.7rem;
  border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); font-size: 0.9rem; font-weight: 600;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.socials__link .icon { width: 20px; height: 20px; }
.socials__link:hover { border-color: var(--accent); color: var(--accent); }
.socials__link span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.socials--lg .socials__link { padding: 0 1rem 0 0.8rem; }
.socials--lg .socials__link span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
@container (max-width: 500px) {
  .socials--lg .socials__link { width: 44px; padding: 0; }
  .socials--lg .socials__link span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
}

.quote { position: relative; overflow: hidden; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lg); }
.quote::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--checks); background-size: 10px 10px; opacity: 0.85; }
.quote > * { position: relative; }
.quote h3 { margin-top: 0.4rem; font-family: var(--font-display); font-weight: 400; font-size: 2.1rem; line-height: 1; text-transform: uppercase; }
.quote > p { margin-top: 0.6rem; color: var(--muted); }
.quote__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.6rem; }
.field { display: grid; gap: 0.4rem; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.875rem; font-weight: 600; color: rgb(245 238 226 / 0.88); }
.field__optional { color: var(--faint); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 0.8rem 1rem; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s;
}
.field input[type="date"] { color-scheme: dark; }
.field textarea { min-height: 112px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.field select option { color: #111; background: #fff; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgb(242 194 48 / 0.18); }
.quote__actions { grid-column: 1 / -1; display: grid; gap: 0.75rem; margin-top: 0.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.quote__note { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--faint); }
@media (max-width: 960px) {
  .contact { grid-template-columns: 1fr; grid-template-areas: "eyebrow" "info" "quote"; }
  .contact .quote { margin-top: 1.5rem; }
}
/* phones (Adam, 14 Nov 2026: the card ran longer than a phone screen, with boxes of different sizes): every box the
   same height, the short ones in pairs, the intro left out (the note under the buttons says the same), and the two
   buttons side by side as "WhatsApp" and "Email". The boxes keep 16px text: iOS zooms in on anything smaller */
@media (max-width: 640px) {
  .quote { padding: 22px 16px 18px; }
  .quote h3 { font-size: 1.75rem; }
  .quote > p { display: none; }
  .quote__form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 0.6rem; margin-top: 1rem; }
  .field { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 0.3rem; }
  .field label { align-self: end; font-size: 0.8125rem; line-height: 1.25; }
  .field input, .field select, .field textarea { min-width: 0; min-height: 46px; padding: 0.55rem 0.75rem; border-radius: 10px; }
  .field input, .field select { height: 46px; }      /* the date box too: it drew 2px taller than the rest */
  .field select { padding-right: 2rem; background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; }
  .field textarea { min-height: 78px; }
  .quote__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.15rem; }
  .quote__actions .btn { min-height: 48px; padding-inline: 0.5rem; }
  .quote__note { font-size: 0.75rem; line-height: 1.4; }
}
/* the smallest phones: too narrow for boxes in pairs, so one to a row (the buttons stay side by side) */
@media (max-width: 359px) { .quote__form { grid-template-columns: minmax(0, 1fr); } }
/* iPhones draw a date box their own way: narrower or wider than the others, and shorter while it's empty */
@supports (-webkit-touch-callout: none) {
  .field input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; }
}
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }

/* ---------- Page heads (menu, events, text pages) and the 404 hero ---------- */
.page-head { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(48px, 7vw, 96px) clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 120% at 100% 0%, rgb(242 194 48 / 0.12), transparent 60%), radial-gradient(50% 90% at 0% 100%, rgb(236 122 47 / 0.08), transparent 60%); }
.page-head h1 { margin-top: 1rem; font-size: clamp(3rem, 1.6rem + 5.5vw, 6rem); line-height: 0.95; }
.page-head__lead { max-width: 720px; margin-top: 1.2rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 0.9375rem; color: var(--faint); }
.crumbs li { display: inline-flex; align-items: center; gap: 0.5rem; }
.crumbs li + li::before { content: "/"; color: var(--faint); }
.crumbs a { color: var(--muted); font-weight: 600; }
.crumbs a:hover { color: var(--accent); }

.page-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--text); }
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(10 9 8 / 0.95) 0%, rgb(10 9 8 / 0.8) 50%, rgb(10 9 8 / 0.45) 100%); }
.page-hero__inner { padding-block: clamp(56px, 8vw, 104px); }
.page-hero--tall { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--header-h) - 120px); }
.page-hero h1 { max-width: 860px; margin-top: 1.1rem; font-size: clamp(2.8rem, 1.4rem + 5vw, 5.6rem); line-height: 0.95; animation: rise 0.9s 0.08s var(--ease) both; }
.page-hero__inner > p { max-width: 620px; margin-top: 1.25rem; font-size: 1.1875rem; color: rgb(245 238 226 / 0.85); }
.page-hero .hero__actions { animation: rise 0.9s 0.24s var(--ease) both; }
@media (max-width: 760px) { .page-hero .hero__actions .btn { flex: 1 1 100%; } }

/* ---------- The menu page ---------- */
.menu-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; }
/* the menu's section buttons, and the events page's filters made to match them (Adam, 13 Nov 2026); the filter
   that's on takes the hover look */
.menu-jump a, .event-filters__btn {
  display: inline-flex; padding: 0.5rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: none;
  font-size: 0.9375rem; font-weight: 600; transition: border-color 0.2s, color 0.2s;
}
.menu-jump a:hover, .event-filters__btn:hover, .event-filters__btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.menu-page { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 56px); align-items: start; padding-block: clamp(36px, 5vw, 64px) clamp(64px, 9vw, 112px); }
.menu-groups { display: grid; gap: 16px; }
.menu-group { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); scroll-margin-top: calc(var(--header-h) + 16px); }
.menu-group[open] { border-color: var(--line-strong); }
.menu-group__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 1.5rem; cursor: pointer; list-style: none; }
.menu-group__head::-webkit-details-marker { display: none; }
.menu-group__titles { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; }
.menu-group__title { font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); line-height: 1; }
.menu-group__note { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.menu-group__toggle { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--accent); transition: transform 0.3s var(--ease), background-color 0.2s; }
.menu-group[open] .menu-group__toggle { transform: rotate(180deg); background: var(--accent-tint); }
.menu-group__head:hover .menu-group__toggle { border-color: var(--accent); }
.menu-group__body { padding: 0 1.5rem 1.5rem; }
.menu-group__text { max-width: 640px; color: var(--muted); }
.menu-items { display: grid; gap: 14px; }
.menu-group__text + .menu-items { margin-top: 1rem; }
.menu-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; padding: 1.1rem; border-radius: var(--r); background: var(--bg-2); scroll-margin-top: calc(var(--header-h) + 16px); }
.menu-item--photo { grid-template-columns: 200px minmax(0, 1fr); align-items: center; }
.menu-item__media { overflow: hidden; aspect-ratio: 4 / 3; border-radius: 12px; background: var(--surface-2); }
.menu-item__media img { width: 100%; height: 100%; object-fit: cover; }
.menu-item__name { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; }
.menu-item__body p { margin-top: 0.45rem; color: var(--muted); font-size: 0.98rem; }
.diet { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 6px; margin-left: 0.35rem; border: 1px solid var(--veg); border-radius: 6px; vertical-align: 0.35em; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--veg); }
.menu-item__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.menu-item__tags li { padding: 0.3rem 0.7rem; border: 1px solid rgb(242 194 48 / 0.45); border-radius: 999px; font-size: 0.8125rem; font-weight: 600; color: var(--accent); }
.menu-item:target { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-aside { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 16px; }
.menu-note { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.menu-note h2 { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-body); font-weight: 700; font-size: 1.125rem; text-transform: none; letter-spacing: 0; line-height: 1.25; }
.menu-note h2 .icon { color: var(--accent); }
.menu-note .checklist { margin-top: 1rem; }
.menu-note p { margin-top: 0.6rem; color: var(--muted); font-size: 0.98rem; }
.menu-note .btn { margin-top: 1.25rem; }
.menu-note--accent { border-color: rgb(242 194 48 / 0.4); background: linear-gradient(160deg, #2a2216, var(--surface) 70%); }
@media (max-width: 980px) { .menu-page { grid-template-columns: minmax(0, 1fr); } .menu-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } }
@media (max-width: 600px) {
  .menu-item--photo { grid-template-columns: minmax(0, 1fr); }
  .menu-group__head { padding: 1.1rem 1.1rem; }
  .menu-group__body { padding: 0 1rem 1rem; }
}

/* ---------- Events page ---------- */
.events-page { padding-block: clamp(36px, 5vw, 64px) clamp(64px, 9vw, 112px); }
/* the season in words, in a readable column on the page's left edge, then the filters, then the cards */
/* the season in two columns that end about level (Adam, 13 Nov 2026: not in half the page): the heading and the
   first paragraph on the left, the rest on the right, starting level with the heading */
.events-overview { margin-top: clamp(56px, 7vw, 88px); }
/* the filters sit under the lead in the page header, where the menu page has its sections */
.page-head .event-filters { margin: 1.6rem 0 0; }
.events-overview__part { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--svc-gap); align-items: start; }
.events-overview__part + .events-overview__part { margin-top: 2.5rem; }
.events-overview__title { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.events-overview p { margin-top: 0.9rem; color: var(--muted); line-height: 1.7; }
.events-overview__left p:first-of-type { margin-top: 1rem; color: var(--text); font-size: 1.125rem; }
.events-overview__right > p:first-child { margin-top: 0; }
@media (max-width: 900px) {
  .events-overview__part { grid-template-columns: minmax(0, 1fr); }
  .events-overview__right > p:first-child { margin-top: 0.9rem; }
}
.event-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 28px; }
.jobs__item { min-width: 0; }
.jobs__item[hidden] { display: none; }
.jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 36px 24px; }
.cta-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem;
  margin-top: clamp(48px, 7vw, 80px); padding: clamp(24px, 4vw, 40px); border: 1px solid rgb(242 194 48 / 0.4); border-radius: var(--r-lg);
  background: linear-gradient(160deg, #2a2216, var(--surface) 70%);
}
.cta-strip h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.cta-strip p { margin-top: 0.5rem; max-width: 560px; color: var(--muted); }

/* ---------- The catering page: a hub, like the menu and events pages (Adam, 13 Nov 2026) ----------
   The page header (with the credentials), each kind of event's card four in a row, then the sections two to a row
   with their headings level, the questions and the booking band. The rows' gap is the cards' (22px), so the
   right-hand sections start under the third card; the left-hand ones keep clear of them by their own padding. */
.page-head__lead + .page-head__lead { margin-top: 0.8rem; }
.page-head__proof { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin-top: 1.4rem; font-weight: 600; color: var(--muted); }
.page-head__proof:not(:has(li)) { display: none; }
.page-head__proof li { display: inline-flex; align-items: center; gap: 0.5rem; }
.page-head__proof .icon { width: 20px; height: 20px; color: var(--accent); }
.page-head__proof a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.page-head__proof a:hover { color: var(--accent); }
.hub-page { padding-block: clamp(36px, 5vw, 64px) clamp(64px, 9vw, 112px); }
@media (min-width: 1181px) { .hub-kinds .carousel { --per-view: 4; } }
.hub-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 6vw, 72px) 22px; margin-top: clamp(56px, 7vw, 88px); }
.hub-rows > .svc-block:nth-child(odd) { padding-right: clamp(24px, 4.5vw, 58px); }
.hub-page .faq__list { max-width: none; }
.steps { display: grid; gap: 14px; margin-top: 1.2rem; counter-reset: step; }
.steps li { position: relative; min-height: 36px; padding-left: 52px; counter-increment: step; color: var(--muted); line-height: 1.6; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 1rem;
}
@media (max-width: 900px) { .hub-rows { grid-template-columns: minmax(0, 1fr); } .hub-rows > .svc-block:nth-child(odd) { padding-right: 0; } }

/* ---------- Text pages ---------- */
.text-page { max-width: 780px; padding-block: clamp(36px, 5vw, 64px) clamp(64px, 9vw, 112px); }
.text-section + .text-section { margin-top: 2.25rem; }
.text-section h2 { font-family: var(--font-body); font-weight: 700; font-size: 1.375rem; text-transform: none; letter-spacing: -0.01em; line-height: 1.25; }
.text-section p { margin-top: 0.75rem; color: var(--muted); }

/* ---------- Catering (service) and event pages ---------- */
.service-page { padding-block: clamp(32px, 4.5vw, 64px) clamp(64px, 9vw, 112px); }
.service-page__title { margin-bottom: 1.25rem; font-size: clamp(2.8rem, 1.6rem + 4.2vw, 5.2rem); line-height: 0.95; }
.service-page__more { margin-top: clamp(56px, 7vw, 88px); }
.service-page__more > .detail__title { margin: 0 0 1.5rem; }
.detail { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.detail__intro { font-size: 1.1875rem; line-height: 1.6; }
.detail__intro + .detail__intro { margin-top: 1rem; font-size: 1.0625rem; color: var(--muted); }
.detail__title { margin-top: 2.25rem; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.checklist--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1.5rem; margin-top: 1.3rem; }
.detail__lead { grid-area: lead; }
.detail__more { grid-area: more; }
.sample-note + .detail__intro { margin-top: 1.25rem; }

/* A service page is led by its photos, so it takes the full width (Adam, 13 Nov 2026: a panel that stays in view
   suits pages that are mostly words; on these it shrank the photo and turned the page into a document).
   The opening: the words on the left; on the right the photo, then a small card with the credentials and the one
   quote button. Both columns start level, and the card's foot lines up with the foot of "What's included": the
   photo takes whatever height the words leave it, so it is as big as the words allow. */
.svc-hero { grid-template-columns: var(--svc-cols); column-gap: var(--svc-gap); grid-template-areas: "lead side" "more side"; grid-template-rows: auto 1fr; row-gap: 0; align-items: stretch; }
.svc-hero > .detail__lead { align-self: start; }
.svc-hero > .detail__more { align-self: end; }
.svc-hero__title { margin-top: 2.25rem; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.svc-hero__side { grid-area: side; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.svc-hero--text .svc-hero__side { justify-content: flex-end; }
.svc-hero__photo { position: relative; flex: 1 1 0; min-height: 320px; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); background: var(--surface-2); }
.svc-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the card under the photo (after SK Plumbing's): the credentials over a line, then the button */
.svc-card { padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.svc-card__creds { display: grid; gap: 8px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); font-size: 1.0625rem; font-weight: 600; line-height: 1.5; }
.svc-card__creds li { display: flex; align-items: center; gap: 10px; }
.svc-card__creds .icon { flex: none; width: 22px; height: 22px; color: var(--accent); }
.svc-card__creds a { display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.svc-card__creds a:hover { color: var(--accent); }
.svc-card__creds .svc-card__out { width: 15px; height: 15px; color: var(--muted); }

/* Under the opening, everything takes the full width: the personal card, then the sections as plain words on the
   page (no cards: Adam, 13 Nov 2026, "raw text would look better"), two to a row in the opening's own columns, so
   their left edges line up with the intro's and the photo's all the way down, with the headings level. "wide" and
   "wide-list" sections (and one left without a partner) take a whole row, in the same columns. */
:root { --svc-cols: minmax(0, 1.1fr) minmax(0, 0.9fr); --svc-gap: clamp(32px, 5vw, 80px); }
.svc-rows { display: grid; grid-template-columns: var(--svc-cols); gap: clamp(48px, 6vw, 72px) var(--svc-gap); margin-top: clamp(56px, 7vw, 88px); }
.svc-rows > .personal { grid-column: 1 / -1; margin-top: 0; }
.svc-block { min-width: 0; }
.svc-block__title { margin: 0 0 0.9rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.05; text-wrap: balance; }
.svc-block p { color: var(--muted); line-height: 1.7; }
.svc-block p + p { margin-top: 0.9rem; }
.svc-block__list { margin-top: 1.2rem; }
.svc-block__after { margin-top: 1.2rem; }
.svc-block--wide, .svc-block--list, .svc-block--alone { grid-column: 1 / -1; }
/* "wide": the words on the left; the list on the right, starting level with the heading, its items spread to end
   level with the words */
.svc-block--wide { display: grid; grid-template-columns: var(--svc-cols); column-gap: var(--svc-gap); }
.svc-block--wide > .svc-block__list { margin-top: 0; align-content: space-between; }
.svc-block--wide > .svc-block__after { grid-column: 1 / -1; }
/* "wide-list": the words on top, at a comfortable line length, and the list in the two columns under them; any
   words after the list close the section */
.svc-block--list .svc-block__words { max-width: 90ch; }
.svc-block--alone .svc-block__words { max-width: 75ch; }
.svc-block--list > .svc-block__list { grid-template-columns: var(--svc-cols); gap: 0.8rem var(--svc-gap); }
.svc-block--list > .svc-block__after { margin-top: 1.5rem; }
.svc-block--list > .svc-block__after p { color: var(--text); text-wrap: balance; }
.service-page .faq__list { max-width: none; }
/* the events on a service page: two or three fill the row (more go in a carousel) */
.jobs--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.jobs--row > :only-child { max-width: 600px; }
/* the booking band, after the questions: the last section's words beside the quote button */
.svc-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem;
  margin-top: clamp(56px, 7vw, 88px); padding: clamp(24px, 3.4vw, 44px); border: 1px solid rgb(242 194 48 / 0.4); border-radius: var(--r-lg);
  background: linear-gradient(160deg, #2a2216, var(--surface) 70%);
}
.svc-band__words { flex: 1 1 480px; max-width: 780px; }
.svc-band__title { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.svc-band p { margin-top: 0.7rem; color: var(--muted); line-height: 1.7; }
.svc-band .btn { flex: none; }
@media (max-width: 900px) {
  .svc-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead" "side" "more"; grid-template-rows: auto; row-gap: 1.75rem; }
  .svc-hero > .detail__more { align-self: start; }
  .svc-hero__title { margin-top: 0.5rem; }
  .svc-hero__photo { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
  .svc-rows { grid-template-columns: minmax(0, 1fr); }
  .svc-block--wide { grid-template-columns: minmax(0, 1fr); }
  .svc-block--wide > .svc-block__list { margin-top: 1.2rem; }
}
@media (max-width: 560px) {
  .svc-block--list > .svc-block__list { grid-template-columns: minmax(0, 1fr); }
  .svc-band .btn { flex: 1 1 100%; }
}
/* An event page, told in photos like the service pages and in their columns (Adam, 13 Nov 2026: the sidebar shrank
   the photos). The heading and the story on the left; the photos on the right, as big as the story allows, with the
   "Book us" card under them (rule 7). The photos span the heading's row and the story's, and the card has a last row
   of its own, so the photos' top is level with the heading and the card's foot with the story's end. */
.ev-hero {
  grid-template-columns: var(--svc-cols); column-gap: var(--svc-gap); row-gap: 0; align-items: stretch;
  grid-template-areas: "head photos" "story photos" "story card"; grid-template-rows: auto 1fr auto;
}
.ev-hero__head { grid-area: head; min-width: 0; }
.ev-hero__head .job-meta { margin: -0.25rem 0 0; }
.ev-hero__story { grid-area: story; min-width: 0; padding-top: 1.4rem; }
.ev-hero__photos { grid-area: photos; position: relative; min-width: 0; min-height: 420px; }
.ev-hero__photos > .pd { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.ev-hero__card { grid-area: card; margin-top: 16px; }
.svc-card__lead { font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }
.svc-card__text { margin-top: 0.4rem; color: var(--muted); line-height: 1.6; }
.svc-card__lead + .btn, .svc-card__text + .btn { margin-top: 16px; }
.project-section { margin-top: 1.75rem; }
.project-section > .detail__title { margin: 0 0 0.6rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.project-section > p { color: var(--muted); line-height: 1.7; }
.project-section > p + p { margin-top: 0.8rem; }
@media (max-width: 900px) {
  .detail { grid-template-columns: minmax(0, 1fr); }
  /* phones: the heading, the photos, the story, then the card */
  .ev-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "photos" "story" "card"; grid-template-rows: auto; row-gap: 1.5rem; }
  .ev-hero__photos { min-height: 0; }
  .ev-hero__photos > .pd { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3; }
  .ev-hero__story { padding-top: 0; }
  .ev-hero__card { margin-top: 0; }
}
@media (max-width: 560px) { .checklist--cols { grid-template-columns: 1fr; } }

/* "Personal" sections (weddings, parties): the people who will be serving your guests */
.personal {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 56px); align-items: center;
  margin-top: clamp(56px, 7vw, 88px); padding: clamp(18px, 3vw, 36px);
  border: 1px solid rgb(242 194 48 / 0.35); border-radius: var(--r-lg); background: linear-gradient(160deg, #2a2216, var(--surface) 65%);
}
.personal__media { overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r); box-shadow: var(--shadow); background: var(--surface-2); }
.personal__media img { width: 100%; height: 100%; object-fit: cover; }
.personal__body > .detail__title { margin: 0 0 1rem; }
.personal__body > p { color: var(--muted); line-height: 1.7; }
.personal__body > p:first-of-type { color: var(--text); font-size: 1.125rem; }
.personal__body > p + p { margin-top: 0.9rem; }
.personal__body .socials { margin-top: 1.4rem; }
.personal__review { margin: 1.6rem 0 0; padding: 1.1rem 1.3rem; border-left: 3px solid var(--accent); border-radius: 0 var(--r) var(--r) 0; background: rgb(10 9 8 / 0.4); }
.personal__review blockquote { margin: 0.55rem 0 0; }
.personal__review p { font-style: italic; color: var(--text); }
.personal__review figcaption { margin-top: 0.55rem; font-weight: 700; color: var(--accent); }
@media (max-width: 900px) { .personal { grid-template-columns: minmax(0, 1fr); } .personal__media { aspect-ratio: 4 / 3; } }
.about__social-text { margin-top: 1rem; color: var(--muted); }
.about__body .socials { margin-top: 1rem; }

/* Questions */
.faq__list { display: grid; gap: 0.75rem; max-width: 880px; }
.faq__item { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.0625rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--accent); transition: transform 0.2s var(--ease); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding: 0 1.3rem 1.2rem; color: var(--muted); }

/* ---------- Footer: one slim bar (Adam: footers take attention away from what matters) ---------- */
/* The company's legal details (name, number, where registered) on the left, the privacy page and the credit on
   the right. The registered office is on the privacy page. A thin band of the checked paper on top. */
.footer { position: relative; background: var(--ink); color: var(--faint); font-size: 0.8125rem; line-height: 1.45; }
.footer::before { content: ""; display: block; height: 8px; background: var(--checks); background-size: 8px 8px; opacity: 0.9; }
.footer__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.35rem 2rem;
  min-height: calc(var(--footer-h) - 8px); padding-block: 0.75rem;
}
.footer__links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; }
.footer__links a { color: var(--muted); transition: color 0.2s; }
.footer__links a:hover { color: var(--accent); }
@media (max-width: 760px) { .footer__bar { flex-direction: column; align-items: flex-start; padding-block: 1rem; } }

/* ---------- The goose on the footer (Adam, 13 Nov 2026: like the chicken on Stick Strike's, not interactive) ----------
   Adam's sunglasses goose (brand.goose) walks along the top of the checked band, crosses the page, turns round out of
   view and comes back. It's his drawing cut into three: the body and two legs. The legs swing from the hip in turn
   and the body sways with a small lift each step, so it waddles rather than hops (Adam: "so he waddles instead of
   hopping"). Decoration only: no script, no clicks, hidden from screen readers, and the images (7KB) load only as the
   footer nears. Only transforms move, handed to the graphics card, so nothing on the page is redrawn. The drawing
   faces left, so it's flipped while it walks right. It crosses at about a goose's pace whatever the width. With
   reduced motion it stands still. It's 44px tall, and the part of the page above the footer sits a layer above it,
   so it walks behind any card it meets. */
.goose-track { --goose-cross: 34s; position: absolute; left: 0; right: 0; bottom: 100%; z-index: 0; height: 48px; overflow: hidden; pointer-events: none; }
/* the words and cards always win: the last part of the page sits a layer above the goose (its background is clear), so
   where they meet (the contact card and the menu's last notes sit as little as 15px above the footer on a 1366 x 768
   laptop) the goose walks behind them */
main > :last-child { position: relative; z-index: 1; }
.goose-path { position: absolute; inset: 0; animation: goose-cross var(--goose-cross) linear infinite alternate; will-change: transform; }
.goose { position: absolute; left: 0; bottom: 0; height: 44px; aspect-ratio: 1136 / 1142; animation: goose-face calc(var(--goose-cross) * 2) linear infinite; }
.goose > img { position: absolute; display: block; max-width: none; }
/* each piece where it sat in the drawing (from goose_split.py); a leg turns about its hip, the body about its feet */
.goose__body { left: 0; top: 0; width: 100%; height: 84.06%; transform-origin: 50% 100%; animation: goose-sway 0.42s ease-in-out infinite alternate; }
/* a stride takes 0.84s: each leg swings forward with its foot lifted, then pushes back on the ground, half a stride
   behind the other, so one foot is always down; the body leans and lifts with each step (0.42s) */
.goose__leg { animation: goose-step 0.84s ease-in-out infinite; }
.goose__leg--a { left: 19.98%; top: 83.19%; width: 26.67%; height: 14.8%; transform-origin: 66.83% 5.92%; }
.goose__leg--b { left: 49.56%; top: 83.19%; width: 26.23%; height: 15.76%; transform-origin: 39.09% 5.56%; animation-delay: -0.42s; }
@keyframes goose-cross { from { transform: translateX(-60px); } to { transform: translateX(100%); } }
@keyframes goose-face { 0%, 49.99% { scale: -1 1; } 50%, 100% { scale: 1 1; } }
@keyframes goose-step {
  0% { rotate: -22deg; translate: 0 0; }
  25% { rotate: 0deg; translate: 0 -1.5px; }
  50% { rotate: 22deg; translate: 0 0; }
  75% { rotate: 0deg; translate: 0 0; }
  100% { rotate: -22deg; translate: 0 0; }
}
@keyframes goose-sway { 0% { rotate: -2.5deg; translate: 0 0; } 50% { rotate: 0deg; translate: 0 -1px; } 100% { rotate: 2.5deg; translate: 0 0; } }
@media (max-width: 1100px) { .goose-track { --goose-cross: 22s; } }
@media (max-width: 700px) { .goose-track { --goose-cross: 12s; } }

/* ---------- Phone quick-contact bar ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none; grid-template-columns: 1.5fr 1fr; gap: 10px;   /* above the header (70): it stays on top of the open menu */
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgb(10 9 8 / 0.94); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.callbar .btn { min-height: 50px; padding-inline: 1rem; font-size: 0.98rem; }
.callbar:has(> :only-child) { grid-template-columns: 1fr; }
@media (max-width: 760px) {
  html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .callbar { display: grid; }
  .footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; }
.js .reveal.is-visible { animation: reveal 0.85s var(--ease) var(--d, 0s) both; }
@keyframes reveal { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
.js section:target .reveal, .js section:has(> :target) .reveal { opacity: 1; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; }
  /* the goose stands still near the right-hand end, facing into the page (the drawing faces left) */
  .goose-path, .goose, .goose > img { animation: none !important; }
  .goose-path { transform: translateX(100%) translateX(-140px); }
}

/* ---------- One screen per section: what each section changes so its content fits its screen ----------
   (see "One screen per section" near the top). Measured at 1080p (1920 x 950 inside the browser): every
   section's content fits under the header, and the last one fits above the slim footer. */
@media (min-width: 1081px) and (min-height: 700px) {
  /* the opening screen: the heading on two lines, the logo and the gaps scaled to the window's height */
  .hero__content { max-width: 1080px; }
  .intro { padding-bottom: clamp(18px, 3vh, 40px); }
  .hero__logo { width: min(132px, 9.5vh); margin-bottom: 0.9rem; }
  .hero h1 { font-size: min(5.6rem, 9.4vh); }
  .hero__lead { max-width: 780px; }
  .hero__actions, .hero__proof { margin-top: min(2rem, 3.2vh); }
  .intro .hero__inner { padding-bottom: calc(clamp(104px, 10vw, 124px) + clamp(18px, 2.6vh, 36px)); }
  .hero__proof { gap: 0.6rem 1.1rem; font-size: 0.875rem; }      /* the four points on one line */
  /* the side-by-side sections set their heading a size smaller, so the words and the photo, map or form fit
     one screen next to each other */
  .about .h2, .areas .h2, .contact .h2 { font-size: clamp(2.1rem, 0.9rem + 2vw, 3.1rem); }
  .about__body > p { margin-top: 0.8rem; line-height: 1.6; }
  .about__body > p:first-of-type { margin-top: 1.1rem; font-size: 1.125rem; }
  .about__actions { margin-top: 1.5rem; }
  .area-chips { gap: 0.4rem; margin-top: 1.3rem; margin-bottom: 1.2rem; }
  .chip { padding-block: 0.38rem; }
  .contact__cards { gap: 10px; margin-top: 1.5rem; }
  .contact-card { padding: 0.8rem 1.1rem; }
  .contact-card__icon { width: 44px; height: 44px; }
  .find-us { margin-top: 1.5rem; padding: 1.1rem 1.3rem; }
  .contact .quote { padding: clamp(22px, 2.6vw, 32px); }
  .quote h3 { font-size: 1.9rem; }
  .quote__form { gap: 0.85rem; margin-top: 1.2rem; }
  .field input, .field select, .field textarea { min-height: 46px; padding-block: 0.7rem; }
  .field textarea { min-height: 84px; }
}
/* ---------- Tall screens (1440p: 2560 x 1310 inside the browser) ----------
   Everything stays the size it is at 1080p (Adam: increase the spacing, never zoom the design). The extra height
   goes into spacing: more room around each section and between its parts, back to the roomier gaps the 1080p
   fit had to tighten. */
@media (min-width: 1081px) and (min-height: 1150px) {
  .section--screen { padding-block: clamp(64px, 6vh, 104px); }
  .section--screen .section-head { margin-bottom: clamp(44px, 4.5vh, 72px); }
  .section--screen .section-head p { margin-top: 1.2rem; }
  /* the opening screen */
  .hero__logo { margin-bottom: 1.4rem; }
  .hero h1 { margin-top: 1.5rem; }
  .hero__lead { margin-top: 1.6rem; }
  .hero__actions, .hero__proof { margin-top: 2.6rem; }
  .intro .hero__inner { padding-bottom: calc(clamp(104px, 10vw, 124px) + 56px); }
  .intro { padding-bottom: 56px; }
  /* the side-by-side sections */
  .about__body > p { margin-top: 1.1rem; }
  .about__body > p:first-of-type { margin-top: 1.6rem; }
  .about__social-text { margin-top: 1.4rem; }
  .about__actions { margin-top: 2.4rem; }
  .areas__body > p { margin-top: 1.4rem; }
  .area-chips { gap: 0.55rem; margin-top: 2rem; margin-bottom: 2rem; }
  .contact__lead { margin-top: 1.4rem; }
  .contact__cards { gap: 14px; margin-top: 2.2rem; }
  .find-us { margin-top: 2.2rem; }
  .contact .quote { padding: 40px; }
  .quote__form { gap: 1.15rem; margin-top: 1.8rem; }
  .field textarea { min-height: 120px; }
  /* the cards' rows and the reviews: a little more room under them, and more of each review's words */
  .carousel__controls { margin-top: 1.25rem; }
  .review__text { -webkit-line-clamp: 10; line-clamp: 10; }
}