/* ============================================================
   THEME SYSTEM  (v2 — premium)
   Default theme = "Berry" (warm rose/raspberry + cream + antique gold).
   The original maroon brand palette is the "Signature" alternate. Themes
   are the [data-theme="…"] blocks below, switched by the swatch picker in
   the header (see script.js) and kept within one elegant, warm family.
   Every themeable colour is a variable here; the rest of the stylesheet
   only references these names, so adding a theme is just a new block.
   ------------------------------------------------------------
   Variable roles:
     --maroon       primary brand — solid fills that carry white text
     --maroon-deep  deepest brand — headings, hero, footer, dark bands
     --cherry       warm accent text — eyebrows, category tags
     --gold         antique-gold accent — primary button fill, links on dark
     --mint/sky/rose  soft warm tints for section backgrounds & cards
     --cream        light section background
     --paper        page background
     --cocoa/--ink/--muted  text shades (strong / body / secondary)
   ============================================================ */
:root {
  --maroon: #a83250;
  --maroon-deep: #6e1f38;
  --cherry: #b5603f;
  --gold: #d0a24e;
  --mint: #f3dde3;
  --mint-strong: #a83250;
  --sky: #f6e0dc;
  --rose: #f4d5de;
  --cream: #f9eef0;
  --paper: #fdf6f4;
  --cocoa: #5a2233;
  --ink: #37141f;
  --muted: #8a6270;
  --line: rgba(110, 31, 56, 0.12);
  --shadow: 0 24px 60px rgba(110, 31, 56, 0.14);

  /* elegant serif display (headings, stats); clean humanist sans for UI + body */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --bounce: cubic-bezier(0.22, 1, 0.36, 1);

  /* surfaces & effects */
  --header-bg: rgba(253, 246, 244, 0.86);
  --footer-bg: #43172a;
  --hero-overlay:
    linear-gradient(90deg, rgba(70, 20, 40, 0.86), rgba(140, 40, 74, 0.58) 42%, rgba(140, 40, 74, 0.18) 74%),
    linear-gradient(0deg, rgba(55, 16, 32, 0.36), rgba(55, 16, 32, 0.05));
  --btn-shadow: 0 14px 30px rgba(208, 162, 78, 0.3);
  --focus-ring: rgba(168, 50, 80, 0.6);
  --accent-lemon: #f3e2c4;
  --accent-berry: #f2cdd7;
  --accent-soft: #f0d8cd;

  /* fixed swatch preview colours for the theme picker */
  --sw-berry: #b23a55;
  --sw-signature: #8a2433;
  --sw-mango: #c98a3a;
  --sw-mint: #7d9068;
  --sw-classic: #4a2c1c;
}

/* Signature — original maroon + antique-gold brand palette */
[data-theme="signature"] {
  --maroon: #8a2433;
  --maroon-deep: #4d1520;
  --cherry: #b06a3c;
  --gold: #c69a46;
  --mint: #e6ece0;
  --mint-strong: #7d9068;
  --sky: #f0e3d5;
  --rose: #f2ded3;
  --cream: #f6efe3;
  --paper: #fbf7f0;
  --cocoa: #3f281c;
  --ink: #2b1b12;
  --muted: #7c6553;
  --line: rgba(77, 21, 32, 0.12);
  --shadow: 0 24px 60px rgba(77, 21, 32, 0.12);
  --header-bg: rgba(251, 247, 240, 0.85);
  --footer-bg: #2c1610;
  --hero-overlay:
    linear-gradient(90deg, rgba(45, 16, 22, 0.86), rgba(77, 21, 32, 0.6) 42%, rgba(77, 21, 32, 0.18) 74%),
    linear-gradient(0deg, rgba(30, 12, 10, 0.4), rgba(30, 12, 10, 0.05));
  --btn-shadow: 0 14px 30px rgba(198, 154, 70, 0.32);
  --focus-ring: rgba(138, 36, 51, 0.6);
  --accent-lemon: #f0e2bf;
  --accent-berry: #eccdbf;
  --accent-soft: #e4d6c4;
}

/* Caramel — warm amber/toffee */
[data-theme="mango"] {
  --maroon: #b06a1f;
  --maroon-deep: #7a4310;
  --cherry: #b5603a;
  --gold: #d4a13f;
  --mint: #f2e6cf;
  --mint-strong: #b0791f;
  --sky: #f4e6ce;
  --rose: #f2e0c8;
  --cream: #f9f1e2;
  --paper: #fdf9f0;
  --cocoa: #5f3c16;
  --ink: #3a2510;
  --muted: #85694a;
  --line: rgba(122, 67, 16, 0.12);
  --shadow: 0 24px 60px rgba(122, 67, 16, 0.14);
  --header-bg: rgba(253, 249, 240, 0.86);
  --footer-bg: #442a0e;
  --hero-overlay:
    linear-gradient(90deg, rgba(70, 42, 12, 0.86), rgba(140, 84, 22, 0.56) 42%, rgba(140, 84, 22, 0.18) 74%),
    linear-gradient(0deg, rgba(55, 32, 10, 0.36), rgba(55, 32, 10, 0.05));
  --btn-shadow: 0 14px 30px rgba(212, 161, 63, 0.3);
  --focus-ring: rgba(176, 106, 31, 0.6);
  --accent-lemon: #f4e6bd;
  --accent-berry: #f0d8c0;
  --accent-soft: #eeddbf;
}

/* Pistachio — soft sage green */
[data-theme="mint"] {
  --maroon: #4f7a52;
  --maroon-deep: #345436;
  --cherry: #b5763c;
  --gold: #c99f47;
  --mint: #dfe9d6;
  --mint-strong: #4f7a52;
  --sky: #e6ecdd;
  --rose: #ece2d0;
  --cream: #f1f4ea;
  --paper: #f8faf3;
  --cocoa: #33482f;
  --ink: #21301e;
  --muted: #6c7a63;
  --line: rgba(52, 84, 54, 0.12);
  --shadow: 0 24px 60px rgba(52, 84, 54, 0.14);
  --header-bg: rgba(248, 250, 243, 0.86);
  --footer-bg: #263c27;
  --hero-overlay:
    linear-gradient(90deg, rgba(28, 48, 30, 0.86), rgba(58, 92, 60, 0.56) 42%, rgba(58, 92, 60, 0.18) 74%),
    linear-gradient(0deg, rgba(22, 38, 24, 0.36), rgba(22, 38, 24, 0.05));
  --btn-shadow: 0 14px 30px rgba(201, 159, 71, 0.3);
  --focus-ring: rgba(79, 122, 82, 0.6);
  --accent-lemon: #eee6c4;
  --accent-berry: #e2ddc9;
  --accent-soft: #dee6d2;
}

/* Espresso — deep warm brown */
[data-theme="classic"] {
  --maroon: #6b4327;
  --maroon-deep: #3d2416;
  --cherry: #b06a3c;
  --gold: #c99a52;
  --mint: #ece0cf;
  --mint-strong: #8a6a44;
  --sky: #efe2d2;
  --rose: #ecdcc9;
  --cream: #f5ece0;
  --paper: #fbf6ee;
  --cocoa: #46291a;
  --ink: #2c1a10;
  --muted: #7d6450;
  --line: rgba(61, 36, 22, 0.12);
  --shadow: 0 24px 60px rgba(61, 36, 22, 0.14);
  --header-bg: rgba(252, 248, 242, 0.9);
  --footer-bg: #2c1810;
  --hero-overlay:
    linear-gradient(90deg, rgba(45, 26, 15, 0.88), rgba(74, 44, 24, 0.66) 42%, rgba(74, 44, 24, 0.22) 74%),
    linear-gradient(0deg, rgba(42, 24, 14, 0.36), rgba(42, 24, 14, 0.06));
  --btn-shadow: 0 14px 30px rgba(201, 154, 82, 0.3);
  --focus-ring: rgba(107, 67, 39, 0.6);
  --accent-lemon: #f0e2bd;
  --accent-berry: #ecd6c2;
  --accent-soft: #e6d6c1;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", "Segoe UI", system-ui, Arial, sans-serif;
  line-height: 1.65;
}

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

a {
  color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
}

.container {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 12px max(20px, calc((100vw - 1120px) / 2));
  border-bottom: 1px solid rgba(77, 21, 32, 0.1);
  background: var(--header-bg);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px rgba(61, 31, 18, 0.06);
}

.brand {
  display: inline-flex;
  align-items: center;
  width: 176px;
}

.brand img {
  width: 100%;
  height: auto;
}

.site-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.site-nav a,
.header-cta,
.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 220ms var(--bounce), border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.site-nav a {
  padding: 8px 13px;
  color: var(--cocoa);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  background: var(--rose);
  color: var(--maroon);
}

.header-cta {
  padding: 9px 20px;
  background: var(--maroon);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.header-cta:hover,
.button:hover {
  transform: translateY(-2px);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--maroon);
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  background: currentColor;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 82svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

.page-hero {
  min-height: 60svh;
}

.hero-media,
.hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-media {
  object-fit: cover;
  object-position: center;
  z-index: -3;
}

.home-hero .hero-media {
  object-position: center right;
}

.hero-overlay {
  z-index: -2;
  background: var(--hero-overlay);
}

.hero-content {
  width: min(760px, calc(100% - 40px));
  margin: 0 auto;
  padding: 72px 0;
}

.home-hero .hero-content {
  margin-left: max(20px, calc((100vw - 1120px) / 2));
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--cherry);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.hero .eyebrow {
  color: var(--gold);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 860px;
  margin-bottom: 22px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 4.2rem;
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.page-hero h1 {
  font-size: 3.7rem;
}

h2 {
  margin-bottom: 18px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.7rem;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--maroon-deep);
}

h3 {
  margin-bottom: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--maroon-deep);
}

.hero-copy {
  max-width: 680px;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.16rem;
}

.hero-actions,
.message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  border: 1px solid transparent;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.button-primary {
  background: var(--gold);
  color: var(--maroon-deep);
  box-shadow: var(--btn-shadow);
}

.button-light {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.92);
  color: var(--maroon);
}

.metric-strip {
  width: min(1120px, calc(100% - 40px));
  margin: -48px auto 0;
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* slim antique-gold band across the top of the stats bar */
.metric-strip::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  z-index: 1;
  background: linear-gradient(90deg, var(--maroon), var(--gold) 55%, var(--maroon));
}

.metric-strip div {
  padding: 24px;
  border-right: 1px solid var(--line);
}

.metric-strip div:last-child {
  border-right: 0;
}

.metric-strip strong {
  display: block;
  color: var(--maroon);
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1;
}

.metric-strip span {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.section {
  padding: 96px 0;
  background: var(--paper);
}

.section-light {
  background: var(--cream);
}

.section-mint {
  background: linear-gradient(90deg, var(--mint), var(--sky));
}

.section-maroon {
  background: var(--maroon-deep);
  color: #fff;
}

.section-maroon h2,
.section-maroon h3,
.section-maroon .eyebrow {
  color: #fff;
}

.section-maroon .eyebrow {
  color: var(--gold);
}

.section-maroon p {
  color: rgba(255, 255, 255, 0.82);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 52px;
  align-items: center;
}

.split-invert {
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1fr);
}

.section-copy p {
  color: var(--muted);
  font-size: 1.04rem;
}

.section-maroon .section-copy p {
  color: rgba(255, 255, 255, 0.82);
}

.feature-list,
.chip-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.feature-list span,
.chip-cloud span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--maroon-deep);
  font-weight: 600;
  transition: transform 200ms var(--bounce);
}

.chip-cloud span:hover {
  transform: translateY(-2px);
}

.image-stack {
  display: grid;
  grid-template-columns: 1fr 0.76fr;
  grid-template-rows: 200px 200px;
  gap: 14px;
}

.image-stack img,
.media-panel img,
.flavour-tile img,
.menu-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-stack img,
.media-panel,
.flavour-tile,
.menu-card,
.service-card,
.package-card,
.collection-grid article,
.promise-grid article,
.template-grid details,
.faq-list details,
.enquiry-form,
.contact-points div {
  border-radius: 16px;
}

/* gentle lift on cards */
.service-card,
.package-card,
.flavour-tile,
.collection-grid article {
  transition: transform 260ms var(--bounce), box-shadow 260ms ease;
}

.service-card:hover,
.package-card:hover,
.collection-grid article:hover,
.flavour-tile:hover {
  transform: translateY(-4px);
}

.image-stack img:first-child {
  grid-row: span 2;
}

.image-stack img,
.media-panel {
  overflow: hidden;
  box-shadow: var(--shadow);
}

.media-panel {
  min-height: 440px;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 36px;
}

.section-heading h2 {
  margin-bottom: 0;
}

.service-grid,
.promise-grid,
.collection-grid,
.template-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.service-grid-wide,
.collection-grid,
.template-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-card,
.promise-grid article,
.collection-grid article,
.package-card {
  min-height: 250px;
  padding: 26px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 14px 34px rgba(61, 31, 18, 0.07);
}

.service-card {
  background: var(--rose);
}

.service-card.accent-mint {
  background: var(--mint);
}

.service-card.accent-gold {
  background: var(--accent-lemon);
}

.service-card.accent-sky {
  background: var(--sky);
}

.service-card.accent-rose {
  background: var(--accent-berry);
}

.service-card.accent-cocoa {
  background: var(--accent-soft);
}

.service-card p,
.promise-grid p,
.collection-grid p,
.package-card p {
  margin-bottom: 0;
  color: var(--muted);
}

.flavour-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.flavour-tile {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow);
}

.flavour-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(33, 18, 16, 0.78), rgba(33, 18, 16, 0.04) 62%);
}

.flavour-tile span {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 1;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
}

.cta-band {
  padding: 84px 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(198, 154, 70, 0.22), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(138, 36, 51, 0.16), transparent 46%),
    var(--rose);
  color: var(--maroon-deep);
}

.cta-content {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 28px;
  align-items: center;
}

.cta-content h2 {
  margin: 0;
  color: var(--maroon-deep);
}

.cta-content p {
  margin: 0;
  color: var(--cocoa);
}

.site-footer {
  padding: 56px 0;
  background: var(--footer-bg);
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.7fr 0.9fr;
  gap: 40px;
  align-items: start;
}

.footer-logo {
  width: 176px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: #fff;
}

.site-footer p {
  max-width: 380px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
}

.site-footer nav {
  display: grid;
  gap: 10px;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--gold);
}

.site-footer h2 {
  margin-bottom: 10px;
  color: #fff;
  font-size: 1.5rem;
}

.footer-link {
  color: var(--gold) !important;
  font-weight: 700;
}

.values-row,
.difference-grid,
.package-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.values-row div,
.difference-grid div {
  min-height: 124px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.values-row strong {
  display: block;
  color: var(--maroon);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.7rem;
}

.values-row span {
  color: var(--muted);
}

.difference-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.difference-grid div {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: 600;
}

.package-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.package-card {
  display: grid;
  align-content: start;
  gap: 14px;
}

.package-card a {
  color: var(--maroon);
  font-weight: 700;
  text-decoration: none;
}

.package-featured {
  background: var(--maroon);
  color: #fff;
}

.package-featured h3,
.package-featured a {
  color: #fff;
}

.package-featured p {
  color: rgba(255, 255, 255, 0.82);
}

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

.filter-tabs button {
  min-height: 42px;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--cocoa);
  font-weight: 600;
  cursor: pointer;
  transition: transform 200ms var(--bounce), background 180ms ease, color 180ms ease;
}

.filter-tabs button.is-active,
.filter-tabs button:hover {
  background: var(--maroon);
  color: #fff;
  transform: translateY(-1px);
}

.menu-card {
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 14px 34px rgba(61, 31, 18, 0.07);
}

/* ---------- flavour carousel (menu page) ----------
   A scroll-snap track of flavour cards with arrow buttons, page dots and
   pointer-drag. The track is the scroll container; the wrapper only exists
   to anchor the arrows. Everything degrades to a plain horizontal scroller
   if JS never runs. */
.flavour-carousel {
  position: relative;
  /* how far the arrows sit outside the card edges — must stay inside the
     container gutter (20px) so the page never scrolls sideways */
  --nav-offset: -16px;
}

.flavour-track {
  --per: 3;
  --gap: 18px;
  --peek: 46px;

  /* arc tuning — read by script.js, so a media query can retune the curve.
     --arc-drop is how far the outermost card sinks below the centre one. */
  --arc-drop: 72px;
  --arc-tilt: 7deg;
  --arc-shrink: 0.09;
  --arc-fade: 0.16;

  display: flex;
  gap: var(--gap);
  /* the arc swings the outer cards down, so the track needs room below them;
     the negative margin reclaims most of it. Kept off the inline axis so the
     resting scroll position stays a clean 0. */
  margin: -14px 0 -44px;
  padding: 14px 0 78px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.flavour-track::-webkit-scrollbar {
  display: none;
}

.flavour-track:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: 20px;
}

/* while dragging, snapping would fight the pointer */
.flavour-track.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
}

.flavour-track.is-dragging .flavour-card {
  cursor: grabbing;
}

.flavour-card {
  /* set per-frame by script.js as the card travels along the arc */
  --arc-y: 0px;
  --arc-rot: 0deg;
  --arc-scale: 1;
  --arc-dim: 1;

  flex: 0 0 calc((100% - var(--peek) - (var(--per) - 1) * var(--gap)) / var(--per));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  transform: translateY(var(--arc-y)) rotate(var(--arc-rot)) scale(var(--arc-scale));
  /* fading toward the page reads softer than darkening the artwork */
  opacity: var(--arc-dim);
  /* no transform transition — the values are rewritten every frame while
     scrolling, and easing them would trail the finger */
  transition: box-shadow 300ms ease;
  will-change: transform;
}

/* the card sitting closest to the centre of the arc */
.flavour-card.is-crest {
  z-index: 2;
  box-shadow: 0 26px 54px rgba(110, 31, 56, 0.22);
}

.flavour-card:hover {
  box-shadow: 0 26px 54px rgba(110, 31, 56, 0.26);
}

.flavour-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky), var(--cream));
}

.flavour-card__media img {
  aspect-ratio: 1 / 1;
  transition: transform 420ms var(--bounce);
}

/* warms the photos' cool grey backdrop into the page's cream family */
.flavour-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(244, 213, 222, 0.5), rgba(253, 246, 244, 0.12));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* scalloped "melt" edge where the card body meets the photo */
.flavour-card__media::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: -9px;
  left: -8px;
  z-index: 2;
  height: 22px;
  background: radial-gradient(circle at 11px 11px, #fff 11px, transparent 11.5px) repeat-x;
  background-size: 22px 22px;
  pointer-events: none;
}

.flavour-card:hover .flavour-card__media img {
  transform: scale(1.06);
}

.flavour-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--maroon);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(110, 31, 56, 0.28);
}

.flavour-card__body {
  flex: 1;
  padding: 14px 20px 22px;
}

.flavour-card__body h3 {
  margin: 0 0 6px;
}

.flavour-card__body p {
  margin: 0;
  color: var(--muted);
}

/* ---------- carousel controls ---------- */
.scoop-nav {
  position: absolute;
  /* sits over the card artwork rather than the caption */
  top: 32%;
  z-index: 4;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--maroon-deep);
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(110, 31, 56, 0.18);
  transition: transform 200ms var(--bounce), background 180ms ease, color 180ms ease, opacity 180ms ease;
}

.scoop-nav svg {
  width: 20px;
  height: 20px;
}

.scoop-nav--prev {
  left: var(--nav-offset);
}

.scoop-nav--next {
  right: var(--nav-offset);
}

.scoop-nav:hover:not(:disabled) {
  background: var(--maroon);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}

.scoop-nav:disabled {
  opacity: 0.32;
  cursor: default;
  box-shadow: none;
}

/* single page of cards — nothing to page through, so no arc either */
.flavour-carousel.is-static .scoop-nav,
.flavour-carousel.is-static .flavour-carousel__foot {
  display: none;
}

.flavour-carousel.is-static .flavour-track {
  justify-content: center;
  padding-bottom: 14px;
  margin-bottom: 0;
}

.flavour-carousel__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
}

.flavour-dots {
  display: flex;
  gap: 8px;
}

.flavour-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--rose);
  cursor: pointer;
  transition: width 240ms var(--bounce), background 200ms ease;
}

.flavour-dot:hover {
  background: var(--gold);
}

.flavour-dot.is-active {
  width: 28px;
  background: var(--maroon);
}

.flavour-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

[hidden] {
  display: none !important;
}

.collection-grid article {
  min-height: 220px;
}

.toppings-panel {
  padding: 30px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
}

.enquiry-layout {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 44px;
  align-items: start;
}

.contact-points {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.contact-points div {
  padding: 18px;
  border: 1px solid var(--line);
  background: #fff;
}

.contact-points strong,
.contact-points span {
  display: block;
}

.contact-points strong {
  color: var(--maroon);
}

.contact-points span {
  color: var(--muted);
}

.enquiry-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 26px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}

label span {
  display: block;
  margin-bottom: 7px;
  color: var(--cocoa);
  font-size: 0.88rem;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid rgba(77, 21, 32, 0.18);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
}

input,
select {
  min-height: 46px;
  padding: 10px 12px;
}

textarea {
  resize: vertical;
  padding: 12px;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.form-full {
  grid-column: 1 / -1;
}

.message-panel {
  display: grid;
  gap: 12px;
  padding-top: 8px;
}

.message-panel .button-light {
  border-color: var(--line);
  background: var(--cream);
}

.form-status {
  min-height: 24px;
  margin: 0;
  color: var(--maroon);
  font-weight: 700;
}

.template-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.template-grid details,
.faq-list details {
  border: 1px solid var(--line);
  background: #fff;
}

details summary {
  cursor: pointer;
  padding: 18px 20px;
  color: var(--maroon-deep);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
}

details p {
  margin: 0;
  padding: 0 20px 20px;
  color: var(--muted);
}

.template-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 0 20px 20px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--maroon);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.template-send:hover {
  background: var(--maroon-deep);
  color: #fff;
}

.faq-layout {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 44px;
  align-items: start;
}

.faq-list {
  display: grid;
  gap: 12px;
}

/* ---------- two-up cards (Two Ways We Serve You, process steps) ---------- */
.duo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.duo-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(61, 31, 18, 0.07);
}

.duo-card .eyebrow {
  margin-bottom: 4px;
}

.duo-card p {
  color: var(--muted);
}

.duo-card a.button {
  justify-self: start;
  margin-top: 6px;
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  counter-reset: step;
}

.step-grid article {
  position: relative;
  padding: 28px 26px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(61, 31, 18, 0.07);
}

.step-grid article::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--maroon-deep);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
}

.step-grid article p {
  margin: 0;
  color: var(--muted);
}

/* grouped flavour lists (Fruit-Forward / Classic & Signature / Regional) */
.flavour-groups {
  display: grid;
  gap: 30px;
}

.flavour-groups h3 {
  margin-bottom: 14px;
}

.flavour-note {
  margin-top: 26px;
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 980px) {
  .duo-grid,
  .step-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- theme picker ---------- */
.theme-picker {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
}

.theme-swatch {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.theme-swatch:hover {
  transform: scale(1.18);
}

.theme-swatch.is-active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--maroon-deep);
}

.theme-swatch[data-theme=""]           { background: var(--sw-berry); }
.theme-swatch[data-theme="signature"]  { background: var(--sw-signature); }
.theme-swatch[data-theme="mango"]      { background: var(--sw-mango); }
.theme-swatch[data-theme="mint"]       { background: var(--sw-mint); }
.theme-swatch[data-theme="classic"]    { background: var(--sw-classic); }

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: auto auto;
  }

  .brand {
    width: 150px;
  }

  .nav-toggle {
    display: block;
    justify-self: end;
  }

  .site-nav {
    grid-column: 1 / -1;
    display: none;
    width: 100%;
    padding-top: 8px;
    align-items: stretch;
    justify-content: start;
    flex-direction: column;
  }

  .site-header.nav-open .site-nav {
    display: flex;
  }

  .header-cta {
    display: none;
  }

  .hero {
    min-height: 76svh;
  }

  .page-hero {
    min-height: 54svh;
  }

  h1,
  .page-hero h1 {
    font-size: 3.1rem;
  }

  h2 {
    font-size: 2.25rem;
  }

  .metric-strip,
  .split,
  .split-invert,
  .enquiry-layout,
  .faq-layout,
  .cta-content,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .metric-strip {
    margin-top: 0;
    border-radius: 0;
    width: 100%;
  }

  .metric-strip div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .service-grid,
  .service-grid-wide,
  .promise-grid,
  .collection-grid,
  .flavour-preview,
  .values-row,
  .difference-grid,
  .package-grid,
  .template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-panel {
    min-height: 360px;
  }
}

@media (max-width: 640px) {
  .container,
  .hero-content {
    width: min(100% - 28px, 1120px);
  }

  .site-header {
    min-height: 68px;
    padding: 10px 14px;
  }

  .brand {
    width: 134px;
  }

  .home-hero .hero-content {
    margin-left: auto;
  }

  .hero {
    min-height: 74svh;
  }

  .page-hero {
    min-height: 52svh;
  }

  .hero-overlay {
    background: var(--hero-overlay);
  }

  .hero-content {
    padding: 52px 0;
  }

  h1,
  .page-hero h1 {
    font-size: 2.5rem;
    line-height: 1.08;
  }

  h2 {
    font-size: 1.95rem;
  }

  .hero-copy {
    font-size: 1.02rem;
  }

  .section {
    padding: 70px 0;
  }

  .metric-strip,
  .service-grid,
  .service-grid-wide,
  .promise-grid,
  .collection-grid,
  .flavour-preview,
  .values-row,
  .difference-grid,
  .package-grid,
  .template-grid,
  .enquiry-form {
    grid-template-columns: 1fr;
  }

  .image-stack {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 220px);
  }

  .image-stack img:first-child {
    grid-row: auto;
  }

  .media-panel {
    min-height: 300px;
  }

  .flavour-tile {
    min-height: 260px;
  }

  .cta-content {
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* ---------- scoop builder (menu page) ----------
   Pick a base flavour, then toppings; the SVG scoop repaints and the chips
   the kitchen would reach for first float to the front of the list. Without
   JS it degrades to two plainly readable lists of what is on offer. */
.scoop-builder {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 300px) 1fr;
  gap: 30px;
  align-items: start;
}

.scoop-step {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--cocoa);
  font-weight: 700;
}

.scoop-step b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--maroon);
  color: #fff;
  font-size: 0.82rem;
}

.scoop-note {
  margin: 0 0 14px;
  min-height: 42px;
  color: var(--muted);
  font-size: 0.9rem;
}

.scoop-legend {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.scoop-legend::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--gold);
}

.scoop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.scoop-chip {
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--maroon-deep);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 200ms var(--bounce), background 180ms ease, color 180ms ease,
    border-color 180ms ease, opacity 180ms ease;
}

.scoop-chip:hover {
  transform: translateY(-2px);
}

.scoop-chip[aria-pressed="true"] {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #fff;
}

/* the pairings we would serve first for the chosen base */
.scoop-chip.is-suggested::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--gold);
  vertical-align: 1px;
}

.scoop-chip.is-muted {
  opacity: 0.72;
}

.scoop-chip:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  transform: none;
}

/* ---------- the scoop itself ---------- */
.scoop-stage {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 20px 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, var(--cream));
  box-shadow: 0 20px 46px rgba(110, 31, 56, 0.1);
  text-align: center;
}

.scoop-svg {
  width: min(100%, 210px);
  height: auto;
}

.scoop-shadow {
  fill: rgba(110, 31, 56, 0.12);
}

.scoop-cup {
  fill: #fff;
  stroke: rgba(110, 31, 56, 0.16);
  stroke-width: 1.4;
}

.scoop-cup-rim {
  fill: #fff;
  stroke: rgba(110, 31, 56, 0.16);
  stroke-width: 1.4;
}

.scoop-ball {
  fill: var(--scoop-tint, #efe3e6);
  stroke: var(--scoop-shade, rgba(110, 31, 56, 0.16));
  stroke-width: 1.6;
  transition: fill 420ms ease, stroke 420ms ease;
}

.scoop-depth {
  fill: var(--scoop-shade, rgba(110, 31, 56, 0.16));
  opacity: 0.34;
  transition: fill 420ms ease;
}

.scoop-gloss {
  fill: rgba(255, 255, 255, 0.42);
}

/* toppings are drawn in, so fade them as they land */
.scoop-topping {
  animation: scoop-land 340ms var(--bounce) both;
}

@keyframes scoop-land {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scoop-summary {
  margin: 14px 0 16px;
  min-height: 48px;
  color: var(--cocoa);
  font-family: var(--display);
  font-size: 1.08rem;
  line-height: 1.4;
}

.scoop-summary b {
  color: var(--maroon);
}

@media (max-width: 980px) {
  .scoop-builder {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .scoop-stage {
    position: static;
  }
}

/* ---------- flavour carousel — responsive ---------- */
@media (max-width: 980px) {
  .flavour-track {
    --per: 2;
    --peek: 42px;
    --arc-drop: 54px;
    --arc-tilt: 5.5deg;
    margin-bottom: -36px;
    padding-bottom: 62px;
  }
}

@media (max-width: 640px) {
  .flavour-track {
    --per: 1;
    --peek: 54px;
    --arc-drop: 34px;
    --arc-tilt: 4deg;
    --arc-shrink: 0.07;
    margin-bottom: -24px;
    padding-bottom: 44px;
  }

  .flavour-carousel {
    --nav-offset: 2px;
  }

  .scoop-nav {
    width: 40px;
    height: 40px;
  }

  .flavour-carousel__foot {
    flex-direction: column;
    gap: 12px;
  }
}