@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/Plus_Jakarta_Sans/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

/* Canape catering product page */
.canape-page-hero { background-image:linear-gradient(90deg,rgba(29,25,21,.88),rgba(29,25,21,.3)),url("/assets/MusicRelease_13.webp"); background-position:center; background-size:cover; }
.canape-page-hero .container { max-width:780px; margin-left:max(0px,calc((100vw - 1200px) / 2)); }
.canape-page-hero .hero-text { max-width:720px; }
.canape-hero-highlight { margin:22px 0 6px; color:#fff; font-size:clamp(1.05rem,2vw,1.35rem); font-weight:700; }
.canape-heading { max-width:780px; margin:0 auto 48px; text-align:center; }
.canape-heading h2,.canape-serving-card h3,.canape-level-grid h3,.canape-chef-copy h2,.canape-chef-copy h3,.canape-complete-grid h3,.canape-faq-section h2,.canape-faq-section h3 { color:var(--navy); }
.canape-serving-section,.canape-level-section,.canape-chef-section,.canape-faq-section { background:#fffdf6; color:var(--blue-grey); }.canape-complete-section { background:#fff7e8; color:var(--blue-grey); }
.canape-serving-grid { display:grid; grid-template-columns:minmax(260px,.75fr) repeat(2,minmax(0,1.125fr)); gap:20px; align-items:stretch; }
.canape-serving-card { display:grid; grid-template-rows:340px 1fr; overflow:hidden; border-radius:28px; background:#fff; box-shadow:var(--soft-shadow); }
.canape-serving-card > img { width:100%; height:100%; object-fit:cover; }
.canape-serving-card > div { padding:clamp(28px,3.5vw,40px); }
.canape-serving-card > div > strong,.canape-chef-copy > strong,.canape-complete-grid article strong { color:var(--orange-strong); }
.canape-serving-card ul { columns:2; margin:10px 0 0; padding-left:20px; }
.canape-serving-label { margin:22px 0 0; color:var(--navy); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.canape-serving-moments { margin:22px 0 0; }
.canape-serving-moments strong { color:var(--navy); }
.canape-serving-note { display:flex; flex-direction:column; justify-content:center; margin:0; padding:clamp(30px,4vw,46px); border:1px solid rgba(99,87,71,.14); border-radius:24px; background:#fff7e8; box-shadow:var(--soft-shadow); }
.canape-serving-note > strong { margin-bottom:20px; color:var(--navy); font-size:clamp(1.45rem,2.5vw,2rem); line-height:1.2; }
.canape-serving-note p { margin:0; line-height:1.65; }
.canape-serving-card blockquote,.canape-chef-copy blockquote { margin:24px 0 0; padding-left:18px; border-left:3px solid var(--orange); color:var(--navy); font-weight:700; }
.canape-level-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.canape-level-grid article { padding:clamp(28px,4vw,46px); border:1px solid rgba(99,87,71,.15); border-radius:24px; background:#fff; box-shadow:var(--soft-shadow); }
.canape-level-grid article:nth-child(2) { transform:translateY(-22px); }
.canape-level-grid article > strong { color:var(--orange-strong); }
.canape-level-count { padding:16px 0; border-bottom:1px solid rgba(99,87,71,.14); color:var(--navy); font-weight:700; }
.canape-level-actions { display:flex; justify-content:center; gap:14px; margin-top:38px; }
.canape-chef-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px,7vw,88px); align-items:center; }
.canape-chef-visual { display:grid; gap:10px; }
.canape-chef-visual > img { width:100%; height:560px; border-radius:26px; object-fit:cover; }
.canape-chef-visual > div { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.canape-chef-visual > div img { width:100%; height:210px; border-radius:18px; object-fit:cover; }
.canape-chef-copy h2 { margin:0 0 28px; font-size:clamp(2.15rem,4vw,3.35rem); line-height:1.08; }
.canape-chef-copy h3:first-of-type { margin:0 0 4px; font-size:clamp(1.35rem,2.4vw,1.75rem); line-height:1.25; }
.canape-chef-copy > strong { display:block; margin-bottom:26px; font-size:.94rem; }
.canape-chef-copy > p { margin:0 0 22px; font-size:1rem; line-height:1.75; }.canape-chef-copy h4 { margin: 34px 0 12px; color: var(--navy); font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }
.canape-chef-copy ul { margin:0 0 28px; padding-left:20px; font-size:.96rem; line-height:1.65; }
.canape-chef-copy li + li { margin-top:8px; }
.canape-chef-copy blockquote { margin-top:30px; line-height:1.55; }
.canape-complete-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.canape-complete-grid article { display:grid; grid-template-rows:280px 1fr; overflow:hidden; padding:0; border-radius:22px; background:#fff; box-shadow:var(--soft-shadow); }
.canape-complete-grid article > img { width:100%; height:100%; object-fit:cover; }
.canape-complete-grid article > div { padding:30px; }
.canape-complete-grid article h3 { margin-top:0; }
.canape-complete-grid article strong { display:block; margin-bottom:12px; }
.canape-experience-message { margin-top:28px; text-align:center; }
.canape-experience-message strong { color:var(--navy); font-size:1.35rem; }
.canape-faq-section .faq-list h3 { margin:0; font-size:inherit; }
.canape-final-cta { color:#fff; }
@media(max-width:960px){.canape-chef-grid{grid-template-columns:1fr}.canape-serving-grid{grid-template-columns:1fr}.canape-level-grid,.canape-complete-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.canape-level-grid article:nth-child(2){transform:none}}
@media(max-width:640px){.canape-page-hero{background-position:58% center}.canape-page-hero .hero-actions{display:grid}.canape-page-hero .button{width:100%}.canape-serving-grid,.canape-level-grid,.canape-complete-grid,.canape-serving-note{grid-template-columns:1fr}.canape-serving-card ul{columns:1}.canape-complete-grid article{grid-template-rows:240px 1fr}.canape-level-actions{display:grid}.canape-level-actions .button{width:100%}}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Italic-VariableFont_wght.ttf") format("truetype");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "DM Serif Display";
  src: url("/assets/fonts/DM_Serif_Display/DMSerifDisplay-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "DM Serif Display";
  src: url("/assets/fonts/DM_Serif_Display/DMSerifDisplay-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --font-primary: "Plus Jakarta Sans", sans-serif;
  --font-secondary: "DM Serif Display", serif;
  --cream: #fff7e8;
  --cream-2: #fffdf6;
  --navy: #4c4345;
  --blue-grey: #635747;
  --orange: #f9a51a;
  --orange-strong: #a94f00;
  --warm-tint: #ffe6b8;
  --white: #ffffff;
  --shadow: 0 24px 70px rgba(18, 16, 12, 0.16);
  --soft-shadow: 0 14px 42px rgba(18, 16, 12, 0.1);
  --radius-lg: 42px;
  --radius-md: 28px;
  --header-height: 84px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--blue-grey);
  font-family: var(--font-primary);
  line-height: 1.65;
  overflow-x: hidden;
}

#root {
  min-height: 100vh;
}

a {
  color: inherit;
}

.section p a,
.hero-text a {
  color: var(--orange-strong);
  text-decoration: underline;
  text-decoration-color: rgba(169, 79, 0, 0.35);
  text-underline-offset: 3px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.section p a:hover,
.hero-text a:hover {
  color: var(--orange);
  text-decoration-color: currentColor;
}

button,
input,
select {
  font: inherit;
}

.site-shell {
  width: min(1240px, calc(100% - 42px));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  top: -80px;
  left: 18px;
  z-index: 60;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
}

.skip-link:focus {
  top: 16px;
}

.brand-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--header-height);
  background: rgba(255, 247, 232, 0.86);
  backdrop-filter: blur(18px);
  transition: box-shadow 220ms ease, min-height 220ms ease, background 220ms ease;
}

.brand-header.is-scrolled {
  min-height: 70px;
  background: rgba(255, 253, 246, 0.96);
  box-shadow: 0 12px 36px rgba(18, 16, 12, 0.1);
}

.header-inner {
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: var(--navy);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
}

.brand-logo img {
  display: block;
  width: 136px;
  max-width: 100%;
  height: auto;
}

.plant-footer .brand-logo img {
  width: 92px;
  border-radius: 24px;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  color: var(--navy);
  font-size: 0.94rem;
  font-weight: 400;
}

.desktop-nav a,
.site-nav .nav-dropdown > a,
.dropdown-panel a,
.plant-footer a {
  text-decoration: none;
}

.desktop-nav > a:hover,
.site-nav > a:not(.nav-cta):hover,
.site-nav .nav-dropdown > a:hover,
.nav-dropdown > a:hover {
  color: var(--orange);
}

.desktop-nav > a,
.site-nav > a:not(.nav-cta),
.site-nav .nav-dropdown > a,
.nav-dropdown > a {
  position: relative;
}

.desktop-nav > a::before,
.site-nav > a:not(.nav-cta)::before,
.site-nav .nav-dropdown > a::before,
.nav-dropdown > a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}

.desktop-nav > a:hover::before,
.site-nav > a:not(.nav-cta):hover::before,
.site-nav .nav-dropdown > a:hover::before,
.nav-dropdown > a:hover::before {
  transform: scaleX(1);
}

.nav-dropdown {
  position: relative;
  padding-block: 26px;
}

.nav-dropdown > a::after {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.16em) rotate(45deg);
}

.dropdown-panel {
  position: absolute;
  top: 68px;
  left: 50%;
  display: grid;
  min-width: 210px;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(18, 16, 12, 0.08);
  border-radius: 22px;
  background: var(--white);
  box-shadow: var(--soft-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.nav-dropdown:hover .dropdown-panel,
.nav-dropdown:focus-within .dropdown-panel,
.nav-dropdown.is-open .dropdown-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.dropdown-panel a {
  padding: 9px 10px;
  border-radius: 999px;
  color: var(--navy);
}

.dropdown-panel a:hover {
  background: var(--warm-tint);
}
.menu-close {
  border: 0;
  background: transparent;
  color: var(--navy);
  font-weight: 700;
  cursor: pointer;
}

.pill-button {
  display: inline-flex;
  min-height: 46px;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.pill-button:hover {
  transform: scale(1.035);
}

.pill-primary {
  background: var(--orange);
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(18, 16, 12, 0.16);
}

.pill-primary:hover {
  background: var(--orange);
  color: #ffffff;
}
.pill-outline:hover{
  background: var(--orange);
  color: #ffffff;
}

.pill-outline {
  color: #ffffff;
  background: var(--orange);
  border-color: transparent;
}

.menu-button {
  display: none;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(18, 16, 12, 0.12);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
}

.menu-button span {
  display: block;
  width: 19px;
  height: 2px;
  margin: 5px auto;
  border-radius: 999px;
  background: var(--navy);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  justify-content: flex-end;
  background: rgba(18, 16, 12, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-panel {
  display: flex;
  width: min(390px, 88vw);
  height: 100%;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  background: var(--cream-2);
  box-shadow: -24px 0 70px rgba(18, 16, 12, 0.18);
  transform: translateX(100%);
  transition: transform 260ms ease;
}

.mobile-menu.is-open .mobile-menu-panel {
  transform: translateX(0);
}

.mobile-menu-panel a {
  color: var(--navy);
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
}

.menu-close {
  align-self: flex-end;
}

.home-page {
  --cursor-x: 50%;
  --cursor-y: 18%;
  --testing-ink: var(--navy);
  --testing-panel: var(--cream-2);
  --testing-panel-soft: var(--warm-tint);
  --testing-cream: var(--cream);
  --testing-muted: var(--blue-grey);
  --testing-line: rgba(76, 67, 69, 0.16);
  --testing-accent: var(--orange);
  position: relative;
  /* `overflow: hidden` makes this the scroll-container reference that the
     hero's position:sticky pin resolves against instead of the real
     viewport, breaking the pin (same failure mode as .testing-urban-page
     had). `clip` renders identically but isn't a scroll container. */
  overflow: clip;
  isolation: isolate;
  font-family: var(--font-primary);
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 45%, var(--warm-tint) 100%);
}

.home-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(76, 67, 69, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 67, 69, 0.04) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.home-page > section {
  position: relative;
  z-index: 1;
}

.warm-gradient-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.14;
  background-image:
    linear-gradient(rgba(76, 67, 69, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 67, 69, 0.035) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.warm-gradient-page > section {
  position: relative;
  z-index: 1;
}

.warm-gradient-page > .section:not(.section-muted):not(.final-cta),
.warm-gradient-page > .section-space:not(.section-muted):not(.final-cta) {
  background: transparent;
}

.warm-gradient-page .section-muted {
  background:
    radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(255, 247, 232, 0.3), transparent 28rem),
    rgba(255, 230, 184, 0.72);
}

.home-page h1,
.home-page h2 {
  font-family: var(--font-secondary);
}

.home-page .button,
.home-page .testing-button {
  font-family: var(--font-primary);
}

.home-page h1,
.home-page h2 {
  font-weight: 400;
}

.home-page h3 {
  font-weight: 600;
}

.home-page .button,
.home-page .testing-button {
  font-weight: 600;
}

.home-page p,
.home-page li,
.home-page input,
.home-page select,
.home-page textarea {
  font-family: var(--font-primary);
}

.home-gallery-hero .testing-hero-content-inner {
  gap: clamp(10px, 1.15vw, 15px);
}

.home-gallery-hero .testing-hero-content h1 + p {
  margin-top: clamp(-6px, -0.4vw, -2px);
}
.recipe-card,
.newsletter-copy,
.community-copy,
.faq-list,
.plant-footer > * {
  min-width: 0;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--navy);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  overflow-wrap: anywhere;
}

h1,
h2 {
  font-family: var(--font-secondary);
  font-weight: 400;
}

h3 {
  font-family: var(--font-primary);
}

h1 {
  max-width: 15ch;
  font-size: clamp(2.85rem, 4.6vw, 4.9rem);
}

h2 {
  font-size: clamp(2.3rem, 5.4vw, 5rem);
}

h3 {
  font-size: clamp(1.75rem, 3vw, 2.7rem);
}

.hero-kicker {
  margin: 8px 0 0;
  color: var(--navy);
  font-size: clamp(1.12rem, 1.55vw, 1.35rem);
  font-weight: 700;
}

.hero-text {
  max-width: 560px;
  margin: 10px 0 0;
  color: var(--blue-grey);
  font-size: 1rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.vector-scene {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.vector-scene::before,
.vector-scene::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.vector-buffet {
  background: linear-gradient(140deg, var(--warm-tint), var(--orange) 62%, var(--navy));
}

.vector-buffet::before {
  left: 14%;
  right: 14%;
  top: 26%;
  height: 42%;
  border-radius: 24px;
  background:
    radial-gradient(circle at 22% 47%, #fffdf6 0 10%, transparent 10.5%),
    radial-gradient(circle at 48% 45%, var(--warm-tint) 0 12%, transparent 12.5%),
    radial-gradient(circle at 74% 47%, #fffdf6 0 10%, transparent 10.5%),
    linear-gradient(90deg, #fff7e8 0 30%, #1a1712 30% 35%, #fff7e8 35% 65%, #1a1712 65% 70%, #fff7e8 70%);
  box-shadow: 0 18px 0 rgba(18, 16, 12, 0.9);
}

.vector-buffet::after {
  left: 22%;
  top: 18%;
  width: 56%;
  height: 24%;
  border: 6px solid #1a1712;
  border-bottom: 0;
  border-radius: 70px 70px 0 0;
}

.vector-bento {
  background: linear-gradient(140deg, var(--cream), var(--orange) 64%, var(--navy));
}

.vector-bento::before {
  inset: 20% 16% 18%;
  border-radius: 24px;
  background:
    linear-gradient(90deg, transparent 0 47%, #1a1712 47% 53%, transparent 53%),
    linear-gradient(transparent 0 47%, #1a1712 47% 53%, transparent 53%),
    radial-gradient(circle at 26% 28%, #fffdf6 0 12%, transparent 12.5%),
    radial-gradient(circle at 72% 30%, var(--orange) 0 12%, transparent 12.5%),
    radial-gradient(circle at 26% 72%, var(--orange-strong) 0 11%, transparent 11.5%),
    radial-gradient(circle at 72% 72%, var(--warm-tint) 0 13%, transparent 13.5%),
    #fff7e8;
  border: 8px solid #1a1712;
  box-shadow: 0 18px 34px rgba(18, 16, 12, 0.22);
}

.vector-bento::after {
  right: 15%;
  top: 12%;
  width: 24%;
  height: 12%;
  border-radius: 999px;
  background: #1a1712;
  transform: rotate(12deg);
}

.vector-wedding {
  background: linear-gradient(145deg, var(--cream-2), var(--warm-tint) 62%, var(--orange));
}

.vector-wedding::before {
  left: 13%;
  right: 13%;
  bottom: 18%;
  height: 34%;
  border-radius: 999px 999px 26px 26px;
  background:
    radial-gradient(circle at 22% 42%, #fffdf6 0 9%, transparent 9.5%),
    radial-gradient(circle at 45% 38%, var(--orange) 0 9%, transparent 9.5%),
    radial-gradient(circle at 68% 42%, #fffdf6 0 9%, transparent 9.5%),
    linear-gradient(90deg, #1a1712 0 100%);
  box-shadow: 0 22px 0 #fff7e8, 0 28px 40px rgba(18, 16, 12, 0.22);
}

.vector-wedding::after {
  left: 33%;
  top: 16%;
  width: 34%;
  height: 42%;
  border-radius: 18px 18px 8px 8px;
  background:
    linear-gradient(#fffdf6 0 28%, #1a1712 28% 34%, #fffdf6 34% 62%, #1a1712 62% 68%, #fffdf6 68%);
  border: 6px solid #1a1712;
}

.vector-festive {
  background: linear-gradient(145deg, var(--navy), var(--orange) 58%, var(--warm-tint));
}

.vector-festive::before {
  left: 21%;
  top: 22%;
  width: 58%;
  height: 58%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fffdf6 0 13%, transparent 13.5%),
    radial-gradient(circle at 32% 33%, var(--orange) 0 9%, transparent 9.5%),
    radial-gradient(circle at 70% 34%, var(--warm-tint) 0 8%, transparent 8.5%),
    radial-gradient(circle at 36% 70%, var(--warm-tint) 0 8%, transparent 8.5%),
    radial-gradient(circle at 70% 70%, var(--orange) 0 9%, transparent 9.5%),
    #1a1712;
  border: 9px solid #fff7e8;
  box-shadow: 0 18px 34px rgba(18, 16, 12, 0.24);
}

.vector-festive::after {
  left: 17%;
  right: 17%;
  bottom: 16%;
  height: 12%;
  border-radius: 999px;
  background: rgba(255, 247, 232, 0.72);
}

.vector-teatime {
  background: linear-gradient(145deg, var(--cream), var(--warm-tint) 62%, var(--navy));
}

.vector-teatime::before {
  left: 18%;
  right: 18%;
  bottom: 25%;
  height: 20%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 22% 38%, #fffdf6 0 18%, transparent 18.5%),
    radial-gradient(circle at 50% 38%, var(--orange) 0 18%, transparent 18.5%),
    radial-gradient(circle at 78% 38%, #fffdf6 0 18%, transparent 18.5%),
    #1a1712;
}

.vector-teatime::after {
  left: 33%;
  top: 22%;
  width: 34%;
  height: 30%;
  border-radius: 12px 12px 28px 28px;
  background: #fffdf6;
  border: 7px solid #1a1712;
  box-shadow: 34px 10px 0 -20px #1a1712;
}

.vector-feast::before {
  left: 50%;
  top: 50%;
  width: 56%;
  height: 56%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fffdf6 0 15%, transparent 15.5%),
    radial-gradient(circle at 30% 35%, var(--orange) 0 9%, transparent 9.5%),
    radial-gradient(circle at 72% 34%, var(--warm-tint) 0 8%, transparent 8.5%),
    radial-gradient(circle at 35% 72%, var(--warm-tint) 0 8%, transparent 8.5%),
    radial-gradient(circle at 70% 72%, #f9a51a 0 9%, transparent 9.5%),
    #1a1712;
  border: 12px solid rgba(255, 255, 255, 0.8);
  transform: translate(-50%, -50%);
}

.vector-feast::after {
  left: 16%;
  right: 16%;
  bottom: 13%;
  height: 12%;
  border-radius: 999px;
  background: rgba(18, 16, 12, 0.24);
}

.blob {
  position: absolute;
  z-index: 0;
  border-radius: 44% 56% 64% 36% / 44% 45% 55% 56%;
  opacity: 0.84;
  animation: blobFloat 13s ease-in-out infinite alternate;
}

.section-space {
  position: relative;
  padding-block: clamp(86px, 12vw, 160px);
}

.story-wrap {
  position: relative;
  max-width: 920px;
  text-align: center;
}

.story-wrap > :not(.tiny-illustrations) {
  position: relative;
  z-index: 2;
}

.story-wrap .story-tagline {
  font-family: var(--font-secondary);
  font-weight: 400;
}

.story-wrap .pill-button {
  margin-top: 30px;
}

.story-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(38px, 5vw, 62px);
  text-align: center;
}

.story-trust-grid article {
  min-width: 0;
  padding: clamp(24px, 3vw, 34px) clamp(18px, 2.4vw, 28px);
  border: 1px solid rgba(249, 165, 26, 0.2);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 188, 50, 0.24), transparent 42%),
    rgba(255, 255, 255, 0.86);
  box-shadow: var(--soft-shadow);
}

.trust-icon {
  display: inline-grid;
  width: 76px;
  height: 76px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  box-shadow: 0 18px 42px rgba(249, 165, 26, 0.26);
}

.trust-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.story-trust-grid article:first-child .trust-icon svg {
  fill: currentColor;
  stroke-width: 0;
}

.story-trust-grid h3 {
  color: var(--navy);
  font-size: clamp(1.18rem, 1.6vw, 1.55rem);
  line-height: 1.12;
}

.story-trust-grid p {
  margin: 14px 0 0;
  color: var(--blue-grey);
  font-size: 0.98rem;
}

.story-trust-grid strong {
  color: var(--navy);
  font-weight: 700;
}

.halal-proof-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 22%, rgba(255, 188, 50, 0.24) 0 15%, transparent 15.5%),
    radial-gradient(circle at 88% 78%, rgba(255, 208, 163, 0.42) 0 18%, transparent 18.5%),
    rgba(255, 230, 184, 0.72);
}

.halal-proof-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1fr);
  gap: clamp(34px, 6vw, 86px);
  align-items: center;
}

.halal-cert-panel {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
}

.halal-cert-panel img {
  position: relative;
  z-index: 1;
  width: min(286px, 72%);
  height: auto;
  border-radius: 22px;
  box-shadow: 0 26px 70px rgba(18, 16, 12, 0.24);
}

.halal-proof-copy h2 {
  max-width: none;
  font-size: clamp(1.5rem, 3.6vw, 3.6rem);
  line-height: 1.08;
}

.halal-proof-copy h2 span {
  display: block;
  white-space: nowrap;
}

.halal-proof-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 28px;
  margin: 28px 0 30px;
  padding-left: 20px;
  color: var(--blue-grey);
  font-size: 1.05rem;
}

.halal-proof-points li {
  padding-left: 2px;
}

.tiny-illustrations span {
  position: absolute;
  z-index: 1;
  display: block;
}

.seed {
  left: 4%;
  top: 18%;
  width: 42px;
  height: 62px;
  border-radius: 50%;
  background: var(--orange);
  transform: rotate(-20deg);
}

.droplet {
  right: 8%;
  top: 4%;
  width: 44px;
  height: 58px;
  border-radius: 60% 60% 60% 0;
  background: var(--warm-tint);
  transform: rotate(45deg);
}

.cashew {
  right: 18%;
  bottom: 2%;
  width: 62px;
  height: 38px;
  border: 10px solid #f9a51a;
  border-radius: 999px;
  transform: rotate(-18deg);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 42px;
}

.section-heading h2 {
  max-width: 810px;
}

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.occasion-section {
  overflow: hidden;
}

.occasion-section .section-heading {
  align-items: flex-start;
}

.occasion-section .section-heading > div {
  max-width: 800px;
}

.occasion-section .section-heading p {
  max-width: 65ch;
  margin: 18px 0 0;
  font-size: 1.08rem;
}

.occasion-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(32px, 5vw, 52px);
  padding-top: 28px;
  border-top: 1px solid rgba(76, 67, 69, 0.16);
}

.occasion-cta p {
  margin: 0;
  color: var(--navy);
  font-size: 1.08rem;
  font-weight: 600;
}

@media (max-width: 640px) {
  .occasion-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .occasion-cta .pill-button {
    width: 100%;
  }
}

.occasion-hover-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.occasion-hover-card {
  --occasion-hover-copy-zone: 132px;
  position: relative;
  display: block;
  height: clamp(360px, 30vw, 440px);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
  text-decoration: none;
  box-shadow: var(--soft-shadow);
  transition: box-shadow 220ms ease;
}

.occasion-hover-card:hover,
.occasion-hover-card:focus-visible {
  box-shadow: var(--shadow);
}

.occasion-hover-media {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100% - var(--occasion-hover-copy-zone));
  overflow: hidden;
  transition: height 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.occasion-hover-card:hover .occasion-hover-media,
.occasion-hover-card:focus-visible .occasion-hover-media {
  height: 100%;
}

.occasion-hover-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 15, 14, 0) 55%, rgba(10, 15, 14, 0.88) 100%);
  opacity: 0;
  transition: opacity 320ms ease;
}

.occasion-hover-card:hover .occasion-hover-media::after,
.occasion-hover-card:focus-visible .occasion-hover-media::after {
  opacity: 1;
}

.occasion-hover-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms ease;
}

.occasion-hover-card:hover .occasion-hover-photo,
.occasion-hover-card:focus-visible .occasion-hover-photo {
  transform: scale(1.05);
}

.occasion-hover-copy {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - var(--occasion-hover-copy-zone));
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
}

.occasion-hover-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy);
  transition: color 320ms ease;
}

.occasion-hover-desc {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--blue-grey);
  transition: color 320ms ease;
}

.occasion-hover-card:hover .occasion-hover-title,
.occasion-hover-card:focus-visible .occasion-hover-title {
  color: var(--white);
}

.occasion-hover-card:hover .occasion-hover-desc,
.occasion-hover-card:focus-visible .occasion-hover-desc {
  color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 980px) {
  .occasion-hover-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .occasion-hover-grid {
    grid-template-columns: 1fr;
  }

  .occasion-hover-card {
    height: 320px;
  }
}

.recipe-card {
  display: block;
  overflow: hidden;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--blue-grey);
  text-decoration: none;
  box-shadow: var(--soft-shadow);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.recipe-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow);
}

.recipe-card:hover .recipe-image {
  transform: scale(1.06);
}

.recipe-card:focus-visible {
  outline: 3px solid var(--orange-strong);
  outline-offset: 4px;
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.recipe-card:active {
  transform: translateY(-2px) scale(0.99);
}

.recipe-image {
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  transition: transform 280ms ease;
}

.recipe-two {
  background:
    radial-gradient(circle at 30% 35%, #fffdf7 0 12%, transparent 13%),
    radial-gradient(circle at 68% 58%, var(--warm-tint) 0 16%, transparent 17%),
    linear-gradient(135deg, var(--orange), var(--navy));
}

.recipe-three {
  background:
    radial-gradient(circle at 66% 30%, #fffdf7 0 10%, transparent 11%),
    radial-gradient(circle at 34% 68%, #ffe1a8 0 16%, transparent 17%),
    linear-gradient(135deg, var(--warm-tint), var(--orange));
}

.recipe-four {
  background:
    radial-gradient(circle at 38% 34%, #fffdf7 0 12%, transparent 13%),
    radial-gradient(circle at 72% 70%, var(--orange) 0 15%, transparent 16%),
    linear-gradient(135deg, var(--warm-tint), var(--navy));
}

.recipe-card div:last-child {
  padding: 18px 8px 8px;
}

.recipe-card span {
  color: var(--orange-strong);
  font-weight: 700;
}

.recipe-card h3 {
  margin-top: 6px;
  font-size: 1.32rem;
  line-height: 1.1;
}

.community-section {
  overflow: hidden;
}

.home-page .story-section,
.home-page .products-section,
.home-page .community-section,
.home-page .occasion-section,
.home-page .faq-section {
  background: transparent;
}

.home-page .newsletter-section {
  background: rgba(255, 247, 232, 0.56);
}

.blob-pink {
  right: -130px;
  top: 14%;
  width: 520px;
  height: 430px;
  background: var(--warm-tint);
}

.community-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(36px, 7vw, 86px);
  align-items: center;
}

.home-page .community-section {
  padding-bottom: clamp(28px, 4vw, 52px);
}

.home-page .community-grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
}

.home-page .community-feature-photo {
  min-height: clamp(360px, 40vw, 520px);
}

.home-client-logo-section .client-logo-showcase {
  margin-top: 0;
}

.ugc-card {
  min-height: 260px;
  border: 10px solid var(--white);
  border-radius: 36px;
  box-shadow: var(--soft-shadow);
}

.ugc-card:nth-child(1) {
  grid-row: span 2;
  min-height: 540px;
}

.newsletter-section {
  padding-block: clamp(84px, 10vw, 136px);
}

.newsletter-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(30px, 7vw, 80px);
  align-items: center;
  padding: clamp(28px, 5vw, 62px);
  border-radius: var(--radius-lg);
  background: #ffe5b3;
}.newsletter-art { background: radial-gradient(circle at 34% 30%, #fffdf7 0 14%, transparent 15%),
    radial-gradient(circle at 68% 66%, var(--warm-tint) 0 14%, transparent 15%),
    linear-gradient(135deg, var(--warm-tint), var(--navy)); background-size: cover; position: relative; min-height: 430px; border-radius: 44px; box-shadow: var(--soft-shadow); }

.illustrated-plate {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  height: 190px;
  border: 20px solid rgba(255, 255, 255, 0.84);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.mini-leaf,
.mini-tomato {
  position: absolute;
  display: block;
}

.mini-leaf {
  right: 48px;
  top: 54px;
  width: 56px;
  height: 92px;
  border-radius: 70% 0 70% 0;
  background: var(--orange-strong);
}

.mini-tomato {
  left: 48px;
  bottom: 58px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--orange);
}

.newsletter-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.newsletter-form .form-wide,
.newsletter-form .pill-button {
  grid-column: 1 / -1;
}

.newsletter-form label {
  display: grid;
  gap: 8px;
  color: var(--navy);
  font-weight: 700;
}.newsletter-form textarea { min-height: 112px; padding: 0 18px; border: 2px solid transparent; border-radius: 26px; background: var(--white); color: var(--navy); outline: none; box-shadow: 0 8px 22px rgba(18, 16, 12, 0.06); padding-block: 16px; resize: vertical; font: inherit; }

.newsletter-form input:focus,
.newsletter-form select:focus,
.newsletter-form textarea:focus {
  border-color: var(--navy);
}

.faq-layout {
  display: grid;
  grid-template-columns: 0.6fr 1fr;
  gap: clamp(32px, 7vw, 78px);
}

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

.faq-list details {
  border-radius: 26px;
  background: var(--white);
  box-shadow: var(--soft-shadow);
  transition: box-shadow 220ms ease, background 220ms ease;
}

.faq-list details:hover {
  background: var(--cream-2);
  box-shadow: var(--shadow);
}

.faq-list summary {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 20px 24px;
  color: var(--navy);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 180ms ease;
}

.faq-list details[open] > summary::before {
  transform: rotate(90deg);
}

.faq-list summary > :where(h3, span[role="heading"]) {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 0;
  padding-right: 0;
  font: inherit;
  line-height: 1.45;
}

.corporate-event-page .faq-list summary h3 {
  text-wrap: wrap;
}

.faq-list p {
  margin: 0;
  padding: 0 24px 22px;
}

.faq-list ul {
  margin: -8px 0 20px;
  padding: 0 24px 0 44px;
  color: var(--blue-grey);
}

.faq-list li + li {
  margin-top: 8px;
}

.plant-footer {
  padding: 70px 0 34px;
  background: #000;
  color: rgba(255, 255, 255, 0.72);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 34px;
}

.footer-logo {
  color: var(--white);
}

.plant-footer h2 {
  margin: 0 0 16px;
  color: var(--white);
  font-size: 1rem;
  line-height: 1.2;
}

.plant-footer a {
  display: block;
  margin: 9px 0;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
  transition: color 180ms ease;
}

.plant-footer a:hover {
  color: var(--orange);
}

.reveal,
.reveal-card {
  opacity: 1;
  transform: translate(0, 0);
}

.js-ready .reveal,
.js-ready .reveal-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.js-ready .reveal-scale {
  transform: scale(0.94);
}

.js-ready .reveal-fade {
  transform: translateY(0);
}

.js-ready .reveal-left {
  transform: translateX(-36px);
}

.js-ready .reveal-right {
  transform: translateX(36px);
}

.js-ready .reveal.is-visible,
.js-ready .reveal-card.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

@keyframes blobFloat {
  from {
    transform: rotate(-4deg) scale(1);
  }
  to {
    transform: rotate(8deg) scale(1.07);
  }
}

@keyframes ingredientFloat {
  from {
    transform: translateY(0) rotate(18deg);
  }
  to {
    transform: translateY(-18px) rotate(28deg);
  }
}

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

@media (min-width: 981px) and (max-height: 760px) {
  .brand-logo img {
    width: 126px;
  }

  .page-hero {
    padding-block: 24px 34px;
  }

  h1 {
    font-size: clamp(2.55rem, 4vw, 4.25rem);
  }

  .page-hero h1 {
    font-size: clamp(2.55rem, 4vw, 4.25rem);
  }

  .hero-kicker,
  .hero-text {
    margin-top: 10px;
  }

  .hero-actions {
    margin-top: 14px;
  }
}

@media (max-width: 980px) {
  .desktop-nav{
    display: none;
  }

  .menu-button {
    display: block;
  }
  .halal-proof-grid,
  .community-grid,
  .home-page .community-grid,
  .newsletter-grid,
  .faq-layout {
    grid-template-columns: 1fr;
  }

  .halal-proof-copy h2 {
    max-width: none;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
  }

  .recipe-grid,
  .story-trust-grid,
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile navigation and reading comfort shared by all route templates. */
.mobile-nav-links {
  display: none;
}

.desktop-nav-links {
  display: contents;
}

@media (max-width: 1279px) {
  .desktop-nav,
  .desktop-nav-links {
    display: none;
  }

  .menu-button {
    display: block;
  }

  .mobile-nav-links {
    display: grid;
    width: 100%;
    gap: 2px;
  }

  .mobile-nav-links > a,
  .mobile-nav-group > summary {
    display: flex;
    min-height: 48px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--navy);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
  }

  .mobile-nav-links > a[aria-current="page"],
  .mobile-nav-group[open] > summary {
    background: var(--warm-tint);
  }

  .mobile-nav-group > summary {
    justify-content: space-between;
    list-style: none;
  }

  .mobile-nav-group > summary::-webkit-details-marker {
    display: none;
  }

  .mobile-nav-group > summary::after {
    content: "+";
    width: 24px;
    color: var(--orange-strong);
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
  }

  .mobile-nav-group[open] > summary::after {
    content: "−";
  }

  .mobile-nav-submenu {
    display: grid;
    gap: 2px;
    margin: 2px 0 8px 12px;
    padding-left: 12px;
    border-left: 2px solid var(--warm-tint);
  }

  .mobile-nav-submenu a {
    min-height: 42px;
    padding: 9px 10px;
    color: var(--blue-grey);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
  }

  .mobile-nav-submenu .mobile-nav-overview {
    color: var(--orange-strong);
    font-weight: 700;
  }

  .mobile-nav-links .mobile-nav-cta {
    justify-content: center;
    margin-top: 10px;
    background: var(--orange);
    color: #fff;
  }

}

@media (max-width: 980px) {
  :root {
    --header-height: 68px;
  }

  body {
    font-size: 16px;
    line-height: 1.6;
  }

  .brand-header,
  .site-header,
  .brand-header.is-scrolled,
  .site-header.is-scrolled {
    min-height: var(--header-height);
  }

  .brand-logo img,
  .brand img {
    width: 104px;
  }

  .desktop-nav-links {
    display: none;
  }

  .mobile-menu-panel {
    gap: 8px;
  }

  .menu-close {
    min-width: 48px;
    min-height: 44px;
    padding: 8px 0;
    font-size: 1rem;
  }

  .mobile-nav-links {
    display: grid;
    width: 100%;
    gap: 2px;
  }

  .mobile-nav-links > a,
  .mobile-nav-group > summary {
    display: flex;
    min-height: 48px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--navy);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
  }

  .mobile-nav-links > a[aria-current="page"],
  .mobile-nav-group[open] > summary {
    background: var(--warm-tint);
  }

  .mobile-nav-group > summary {
    justify-content: space-between;
    list-style: none;
  }

  .mobile-nav-group > summary::-webkit-details-marker {
    display: none;
  }

  .mobile-nav-group > summary::after {
    content: "+";
    width: 24px;
    color: var(--orange-strong);
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
  }

  .mobile-nav-group[open] > summary::after {
    content: "−";
  }

  .mobile-nav-submenu {
    display: grid;
    gap: 2px;
    margin: 2px 0 8px 12px;
    padding-left: 12px;
    border-left: 2px solid var(--warm-tint);
  }

  .mobile-nav-submenu a {
    min-height: 42px;
    padding: 9px 10px;
    color: var(--blue-grey);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
  }

  .mobile-nav-submenu .mobile-nav-overview {
    color: var(--orange-strong);
    font-weight: 700;
  }

  .mobile-nav-links .mobile-nav-cta {
    justify-content: center;
    margin-top: 10px;
    background: var(--orange);
    color: #fff;
  }

  .section,
  .section-space {
    padding-block: 64px;
  }
  .page-hero {
    min-height: min(680px, calc(100svh - var(--header-height)));
    padding-block: 48px 56px;
  }

  h1,
  .page-hero h1,
  .legacy-hero h1 {
    max-width: 16ch;
    font-size: clamp(2.4rem, 11vw, 3.7rem);
    line-height: 1.02;
    overflow-wrap: normal;
  }

  h2,
  .section-heading h2 {
    font-size: clamp(2rem, 8.5vw, 3rem);
    line-height: 1.08;
    overflow-wrap: normal;
  }

  h3 {
    font-size: clamp(1.4rem, 6vw, 2rem);
    line-height: 1.16;
    overflow-wrap: normal;
  }

  .hero-kicker {
    font-size: 1.08rem;
    line-height: 1.35;
  }

  .hero-text,
  .page-hero .hero-text,
  .legacy-hero p,
  .legacy-prose {
    font-size: 1rem;
    line-height: 1.65;
  }

  .section-heading {
    gap: 16px;
    margin-bottom: 28px;
  }
  .community-copy > p,
  .halal-proof-copy > p {
    max-width: 62ch;
  }

  .legacy-hero {
    padding: 72px 0 56px;
  }

  .legacy-hero h1 {
    margin-bottom: 16px;
  }

  .legacy-article {
    padding: 52px 0;
  }

  .legacy-prose :is(h2, h3, h4) {
    margin-top: 1.75em;
  }

  .legacy-prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .legacy-card-grid {
    gap: 18px;
  }

  .legacy-card > div {
    padding: 20px;
  }
}

/* Corporate Event is the mobile hero behaviour reference. */
@media (max-width: 640px) {
  #main .page-hero {
    min-height: 0;
    padding-block: 48px 56px;
  }

  #main .page-hero .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 100%;
    overflow: visible;
  }

  #main .page-hero .hero-actions .button {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .page-hero {
    min-height: 0;
  }

  .hero-actions {
    gap: 10px;
  }

  .hero-actions .pill-button,
  .hero-actions .button {
    min-height: 50px;
  }

  .recipe-card,
  .service-panel,
  .legacy-card {
    border-radius: 16px;
  }

  .sticky-whatsapp {
    width: 54px;
    height: 54px;
  }
}

[data-quote-form] button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.legacy-hero {
  padding: clamp(120px, 16vw, 190px) 0 clamp(56px, 8vw, 96px);
  color: #fff;
  background:
    linear-gradient(125deg, rgba(13, 51, 42, 0.96), rgba(72, 56, 42, 0.86)),
    url('/assets/catering-buffet-hero.webp') center / cover;
}

.legacy-hero .container {
  max-width: 920px;
}

.legacy-hero h1 {
  max-width: 18ch;
  margin-bottom: 20px;
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 0.98;
}

.legacy-hero p,
.legacy-hero time {
  display: block;
  max-width: 70ch;
  color: rgba(255, 255, 255, 0.86);
}

.legacy-article {
  padding: clamp(56px, 8vw, 100px) 0;
  background: #fffdf8;
}

.legacy-prose {
  max-width: 820px;
  color: #302b28;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.78;
}

.legacy-prose :is(h2, h3, h4) {
  margin: 2.2em 0 0.7em;
  color: #173c32;
  line-height: 1.15;
}

.legacy-prose :is(p, ul, ol, blockquote, table, img) {
  margin: 0 0 1.4em;
}

.legacy-prose :is(ul, ol) {
  padding-left: 1.4em;
}

.legacy-prose img {
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: cover;
  border-radius: 22px;
}

.legacy-prose table {
  width: 100%;
  border-collapse: collapse;
}

.legacy-prose :is(th, td) {
  padding: 12px;
  border: 1px solid rgba(23, 60, 50, 0.18);
  text-align: left;
}

.legacy-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.legacy-card {
  overflow: hidden;
  border: 1px solid rgba(23, 60, 50, 0.12);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(23, 60, 50, 0.08);
}

.legacy-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.legacy-card > div {
  padding: 24px;
}

.legacy-card h2 {
  margin: 8px 0 12px;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
}

.legacy-card h2 a,
.legacy-link-list a {
  color: #173c32;
}

.legacy-link-list {
  max-width: 900px;
}

.legacy-link-list li {
  padding: 18px 0;
  border-bottom: 1px solid rgba(23, 60, 50, 0.14);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

@media (max-width: 900px) {
  .legacy-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .legacy-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {

  .brand-logo img {
    width: 118px;
  }

  h1 {
    max-width: 10ch;
    font-size: clamp(2.95rem, 15vw, 4.6rem);
  }

  h2 {
    font-size: clamp(1.9rem, 10vw, 3rem);
  }

  h3 {
    font-size: clamp(1.45rem, 8vw, 2.1rem);
  }

  .hero-actions,
  .newsletter-form {
    align-items: stretch;
  }

  .halal-proof-grid {
    gap: 28px;
  }

  .halal-cert-panel img {
    width: min(190px, 58%);
  }

  .halal-proof-points {
    grid-template-columns: 1fr;
  }

  .newsletter-form {
    grid-template-columns: 1fr;
  }

  .story-trust-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-actions .pill-button,
  .newsletter-form .pill-button {
    width: 100%;
  }

  .recipe-grid,
  .footer-grid{
    grid-template-columns: 1fr;
  }

  .ugc-card:nth-child(1) {
    min-height: 280px;
  }

  .newsletter-art {
    min-height: 300px;
  }

  .newsletter-grid {
    padding: 24px;
    border-radius: 30px;
  }

  .footer-grid {
    gap: 24px;
  }

}

@media (max-width: 390px) {
  .site-shell {
    width: min(100% - 22px, 1240px);
  }

  .header-inner {
    gap: 14px;
  }

  .brand-logo img {
    width: 104px;
  }

  .menu-button {
    width: 44px;
    height: 44px;
  }

  h1 {
    font-size: clamp(2.5rem, 14vw, 3.35rem);
  }

  h2 {
    font-size: clamp(1.7rem, 9vw, 2.5rem);
  }

  .hero-text{
    font-size: 1rem;
  }

  .section-space {
    padding-block: 72px;
  }

  .recipe-card,
  .faq-list details {
    border-radius: 24px;
  }

  .newsletter-form input,
  .newsletter-form select,
  .newsletter-form textarea {
    min-height: 50px;
  }
}

.vector-scene {
  background-size: cover;
  background-position: center;
}

.vector-scene::before,
.vector-scene::after {
  display: none;
}
.vector-buffet,
.vector-feast {
  background-image:
    linear-gradient(180deg, rgba(18, 16, 12, 0.04), rgba(18, 16, 12, 0.12)),
    url("assets/catering-buffet-hero.webp");
}

.vector-buffet.home-buffet-photo {
  background-image:
    linear-gradient(180deg, rgba(18, 16, 12, 0.02), rgba(18, 16, 12, 0.1)),
    url("assets/DSC_3877-1.webp");
  background-position: center;
}

.vector-bento.home-bento-photo {
  background-image:
    linear-gradient(180deg, rgba(18, 16, 12, 0.02), rgba(18, 16, 12, 0.1)),
    url("assets/DSC05639.webp");
  background-position: center;
}

.vector-teatime.home-teatime-photo {
  background-image:
    linear-gradient(180deg, rgba(18, 16, 12, 0.02), rgba(18, 16, 12, 0.1)),
    url("assets/A744296.webp");
  background-position: center 54%;
}

.vector-festive.home-festive-photo {
  background-image:
    linear-gradient(180deg, rgba(18, 16, 12, 0.02), rgba(18, 16, 12, 0.1)),
    url("assets/Client_Sunsuria.webp");
  background-position: center;
}

.vector-wedding.home-banquet-photo {
  background-image:
    linear-gradient(180deg, rgba(18, 16, 12, 0.02), rgba(18, 16, 12, 0.1)),
    url("assets/DSC_8236.webp");
  background-position: center;
}

.vector-teatime.home-canape-photo {
  background-image:
    linear-gradient(180deg, rgba(18, 16, 12, 0.02), rgba(18, 16, 12, 0.1)),
    url("assets/DSC08033.webp");
  background-position: center;
}

.vector-festive.home-diy-photo {
  background-image:
    linear-gradient(180deg, rgba(18, 16, 12, 0.02), rgba(18, 16, 12, 0.1)),
    url("assets/DSC_2454.webp");
  background-position: center;
}

.ugc-card.ugc-one {
  background-image:
    linear-gradient(180deg, rgba(18, 16, 12, 0.02), rgba(18, 16, 12, 0.08)),
    url("assets/DSC05250-1.webp");
  background-position: center;
}

.newsletter-art.vector-feast {
  background-image:
    linear-gradient(180deg, rgba(18, 16, 12, 0.02), rgba(18, 16, 12, 0.1)),
    url("assets/DSC09841.webp");
  background-position: center;
}

.vector-bento {
  background-image:
    linear-gradient(180deg, rgba(18, 16, 12, 0.02), rgba(18, 16, 12, 0.1)),
    url("assets/catering-bento.webp");
}

.vector-wedding {
  background-image:
    linear-gradient(180deg, rgba(18, 16, 12, 0.02), rgba(18, 16, 12, 0.1)),
    url("assets/catering-wedding-banquet.webp");
}

.vector-festive {
  background-image:
    linear-gradient(180deg, rgba(18, 16, 12, 0.02), rgba(18, 16, 12, 0.12)),
    url("assets/catering-festive.webp");
}

.vector-teatime {
  background-image:
    linear-gradient(180deg, rgba(18, 16, 12, 0.02), rgba(18, 16, 12, 0.1)),
    url("assets/catering-teatime.webp");
}

.vector-feast .illustrated-plate,
.vector-feast .mini-leaf,
.vector-feast .mini-tomato {
  display: none;
}

/* Shared page templates: applies the homepage visual system to secondary pages. */
.container {
  width: min(1240px, calc(100% - 42px));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--header-height);
  background: rgba(255, 247, 232, 0.9);
  backdrop-filter: blur(18px);
  transition: box-shadow 220ms ease, min-height 220ms ease, background 220ms ease;
}

.site-header.is-scrolled {
  min-height: 70px;
  background: rgba(255, 253, 246, 0.96);
  box-shadow: 0 12px 36px rgba(18, 16, 12, 0.1);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.brand img {
  display: block;
  width: 136px;
  max-width: 100%;
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  color: var(--navy);
  font-size: 0.94rem;
  font-weight: 700;
}

.site-nav a {
  color: var(--navy);
  text-decoration: none;
}

.site-nav .nav-dropdown > a {
  color: var(--navy);
}

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

.nav-cta,
.button {
  display: inline-flex;
  min-height: 46px;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.nav-cta,
.button-primary,
.button-whatsapp {
  background: var(--orange);
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(18, 16, 12, 0.16);
}

.button-secondary {
  background: var(--orange);
  color: #ffffff;
  border-color: transparent;
}

.nav-cta:hover,
.button:hover {
  transform: scale(1.035);
  background: var(--orange);
  color: #ffffff !important;
}

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(18, 16, 12, 0.12);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 19px;
  height: 2px;
  margin: 5px auto;
  border-radius: 999px;
  background: var(--navy);
}

.page-hero {
  position: relative;
  display: grid;
  min-height: clamp(480px, 36vw, 520px);
  overflow: hidden;
  padding: clamp(28px, 5vw, 64px) 0 clamp(34px, 4vw, 54px);
  align-items: center;
  background-image:
    linear-gradient(90deg, rgba(30, 26, 27, 0.78) 0%, rgba(30, 26, 27, 0.62) 42%, rgba(30, 26, 27, 0.25) 76%, rgba(30, 26, 27, 0.1) 100%),
    var(--page-hero-image, url("assets/catering-buffet-hero.webp"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 82% 24%, rgba(255, 188, 50, 0.18) 0 17%, transparent 17.5%),
    radial-gradient(circle at 8% 72%, rgba(255, 208, 163, 0.16) 0 18%, transparent 18.5%);
  pointer-events: none;
}

.page-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -120px;
  bottom: -170px;
  width: 430px;
  height: 360px;
  border-radius: 44% 56% 64% 36% / 44% 45% 55% 56%;
  background: var(--warm-tint);
  opacity: 0.16;
}

.hero-corporate,
.hero-portfolio,
.hero-about,
.hero-contact {
  --page-hero-image: url("assets/catering-buffet-hero.webp");
  background-position: center 54%;
}

.corporate-event-page .hero-corporate {
  --page-hero-image: url("assets/DSC_0272.webp");
}

.products-page .hero-menus {
  --page-hero-image: url("assets/A744134.webp");
}

.buffet-page-hero {
  --page-hero-image: url("assets/AnnualDinner_7.webp");
}.hero-private { --page-hero-image: url("assets/DSC03456.webp"); background-position: center 48%; }

.hero-wedding {
  --page-hero-image: url("assets/catering-wedding-banquet.webp");
  background-position: center 50%;
}

.wedding-event-page .hero-wedding {
  --page-hero-image: url("assets/wed-1.webp");
}

.banquet-services-page .hero-wedding {
  --page-hero-image: url("assets/DSC09841.webp");
}

.hero-festive {
  --page-hero-image: url("assets/catering-festive.webp");
  background-position: center 46%;
}

.festive-page .hero-festive {
  --page-hero-image: url("assets/DSC04313.webp");
}

.hero-event-space {
  --page-hero-image: url("assets/DSC00812.webp");
  background-position: center 52%;
}

.page-hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  column-gap: clamp(32px, 6vw, 76px);
  row-gap: 0;
  align-items: center;
}

.page-hero .container > * {
  grid-column: 1;
}

.page-hero h1 {
  max-width: 15ch;
  color: #fff;
  font-size: clamp(2.85rem, 4.6vw, 4.9rem);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
}
.page-hero .hero-kicker {
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
}

.page-hero .hero-text {
  max-width: 560px;
  margin: 10px 0 0;
  color: #fff;
  font-size: 1rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
}

.buffet-page-hero .hero-kicker {
  max-width: 620px;
  margin-top: 8px;
}

.buffet-page-hero .buffet-hero-copy {
  display: grid;
  gap: 8px;
}

.buffet-page-hero .buffet-hero-copy p {
  margin: 0;
}

.buffet-hero-highlight {
  max-width: 620px;
  margin: 18px 0 0;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
}

.section {
  position: relative;
  padding-block: clamp(74px, 10vw, 130px);
}

.section-muted {
  background: #ffe5b3;
  position: relative;
}

.section-divider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(36px, 5vw, 64px);
  background-color: #ffe5b3;
  transform: translateY(-100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
}

.section-divider-wave {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C240,90 480,10 720,50 C960,90 1200,10 1440,50 L1440,100 L0,100 Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C240,90 480,10 720,50 C960,90 1200,10 1440,50 L1440,100 L0,100 Z' fill='white'/%3E%3C/svg%3E");
}

.section-divider-angle {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,80 L1440,20 L1440,100 L0,100 Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,80 L1440,20 L1440,100 L0,100 Z' fill='white'/%3E%3C/svg%3E");
}

.section-divider-arc {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 Q720,0 1440,100 Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 Q720,0 1440,100 Z' fill='white'/%3E%3C/svg%3E");
}

@media (max-width: 640px) {
  .section-divider {
    height: 28px;
  }
}

.final-cta {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
}

.final-cta h2 {
  color: var(--white);
}

.section .section-heading {
  display: block;
  margin-bottom: 36px;
}

.split-grid,
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
  gap: clamp(30px, 6vw, 72px);
  align-items: start;
}
.service-detail-grid,
.menu-grid,
.benefit-grid{
  display: grid;
  gap: 20px;
}
.service-detail-grid,
.menu-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.festive-page .service-detail-grid .service-panel {
  display: flex;
  min-height: 320px;
  aspect-ratio: 16 / 9;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background-image: linear-gradient(180deg, rgba(8, 21, 18, 0.08) 25%, rgba(8, 21, 18, 0.9) 100%), var(--festive-card-image);
  background-position: var(--festive-card-position, center);
  background-size: cover;
  color: var(--white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.48);
}

.festive-page .service-detail-grid .service-panel h3 {
  margin-top: 0;
  color: var(--white);
}

.festive-page .service-detail-grid .service-panel p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.94);
}

.festive-page .service-detail-grid .service-panel:nth-child(1) {
  --festive-card-image: url("/assets/Festive-raya.webp");
  --festive-card-position: 58% center;
}

.festive-page .service-detail-grid .service-panel:nth-child(2) {
  --festive-card-image: url("/assets/Festive-cny.webp");
  --festive-card-position: 62% center;
}

.festive-page .service-detail-grid .service-panel:nth-child(3) {
  --festive-card-image: url("/assets/Festive-deepavali.webp");
  --festive-card-position: 58% center;
}

.festive-page .service-detail-grid .service-panel:nth-child(4) {
  --festive-card-image: url("/assets/Festive-xmas.webp");
  --festive-card-position: 52% center;
}

@media (max-width: 1100px) {
  .festive-page .service-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .festive-page .service-detail-grid .service-panel {
    width: 100%;
    min-width: 0;
    min-height: clamp(280px, 42vw, 380px);
    aspect-ratio: auto;
  }
}

.corporate-ordering,
.corporate-customers {
  overflow: hidden;
}

.corporate-customers {
  background: var(--cream);
}

.corporate-ordering .container,
.corporate-customers .container {
  position: relative;
  z-index: 1;
}

.corporate-ordering-blob {
  top: 12%;
  left: -120px;
  width: clamp(360px, 48vw, 620px);
  height: clamp(300px, 38vw, 470px);
  background: var(--warm-tint);
  opacity: 0.5;
}

.corporate-customers-blob {
  top: 16%;
  right: -150px;
  width: clamp(340px, 44vw, 560px);
  height: clamp(300px, 36vw, 450px);
  background: var(--warm-tint);
  opacity: 0.62;
  animation-delay: -4s;
}

.corporate-customers-heading {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: clamp(30px, 5vw, 54px);
  text-align: center;
}

.corporate-customers-heading h2 {
  max-width: none;
  margin-bottom: 20px;
  font-size: clamp(1.9rem, 5.5vw, 4.3rem);
  white-space: nowrap;
}

.corporate-customers-heading p {
  max-width: 680px;
  margin-inline: auto;
  font-size: 1.05rem;
  line-height: 1.65;
}

.corporate-customers-lead {
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--blue-grey);
  font-size: clamp(1.15rem, 2vw, 1.4rem) !important;
  font-weight: 700;
  line-height: 1.4 !important;
}

.client-carousel {
  position: relative;
}

.client-carousel-controls {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(10px, 2vw, 22px);
  pointer-events: none;
}

.client-carousel-controls button {
  display: grid;
  width: clamp(44px, 5vw, 58px);
  height: clamp(44px, 5vw, 58px);
  padding: 0 0 5px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(255, 253, 246, 0.9);
  color: var(--navy);
  font: inherit;
  font-family: var(--font-secondary);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 8px 24px rgba(18, 16, 12, 0.22);
  backdrop-filter: blur(10px);
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.client-carousel-controls button:hover,
.client-carousel-controls button:focus-visible {
  background: var(--navy);
  color: var(--white);
}

.client-carousel-controls button:active {
  transform: translateY(1px);
}

.client-carousel-viewport {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.client-carousel-viewport::-webkit-scrollbar {
  display: none;
}

.client-carousel-track {
  display: grid;
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  gap: 20px;
}

.client-slide {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--blue-grey);
  box-shadow: var(--shadow);
  scroll-snap-align: start;
}

.client-slide::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 18, 15, 0.26), rgba(4, 18, 15, 0.56));
  content: '';
  pointer-events: none;
}

.client-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: client-ken-burns 12s ease-in-out infinite alternate;
}

.client-slide:nth-child(even) img {
  animation-direction: alternate-reverse;
  transform-origin: 70% 45%;
}

.wedding-carousel {
  margin-bottom: clamp(34px, 5vw, 56px);
}

.wedding-slide::after {
  display: none;
}

.client-slide figcaption {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  padding: clamp(24px, 5vw, 54px);
  place-items: center;
  color: var(--white);
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72);
}

.client-slide:has(figcaption)::after {
  background: rgba(18, 16, 12, 0.5);
}

@keyframes client-ken-burns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

.client-logo-showcase {
  margin-top: clamp(64px, 9vw, 112px);
  text-align: center;
}

.client-logo-showcase h3 {
  margin-bottom: 10px;
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.client-logo-showcase > p {
  margin: 0 0 30px;
  font-size: 1.05rem;
}

.client-logo-marquee {
  --client-logo-width: calc((min(1240px, 100vw - 42px) - 80px) / 5);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.client-logo-track,
.client-logo-group {
  display: flex;
  align-items: center;
}

.client-logo-track {
  width: max-content;
  animation: client-logo-flow 26s linear infinite;
}

.client-logo-marquee:hover .client-logo-track,
.client-logo-marquee:focus-within .client-logo-track {
  animation-play-state: paused;
}

.client-logo-group {
  gap: 20px;
  padding-right: 20px;
}

.client-logo {
  display: grid;
  width: var(--client-logo-width);
  height: 132px;
  flex: 0 0 var(--client-logo-width);
  padding: 24px;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: 0 10px 30px rgba(18, 16, 12, 0.08);
}

.client-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 74px;
  object-fit: contain;
}

.client-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(54px, 8vw, 88px);
  padding-top: clamp(30px, 5vw, 48px);
}

.client-impact-stat {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 12px;
  padding: 4px clamp(16px, 3vw, 40px);
  text-align: center;
}

.client-impact-stat + .client-impact-stat::before {
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 0;
  width: 1px;
  background: rgba(18, 16, 12, 0.22);
  content: '';
}

.client-impact-stat strong {
  color: var(--orange);
  font-family: var(--font-secondary);
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.client-impact-stat span {
  color: var(--navy);
  font-size: clamp(0.82rem, 1.3vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
}

@keyframes client-logo-flow {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .client-logo-track {
    animation: none;
  }
}

.benefit-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-panel,
.menu-grid article,
.benefit-grid > div,
.quote-form,
.inline-cta {
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--blue-grey);
  box-shadow: var(--soft-shadow);
}
.menu-grid article a {
  text-decoration: none;
}
.service-panel:hover,
.menu-grid article:hover,
.inline-cta:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.service-panel,
.menu-grid article,
.inline-cta {
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.service-panel h3,
.menu-grid h3 {
  margin-top: 10px;
}

.benefit-grid strong,
.benefit-grid span {
  display: block;
}

.benefit-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 18px;
  border-radius: 18px;
}

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

.corporate-benefit-grid > div {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  padding: 0;
}

.corporate-benefit-grid img {
  aspect-ratio: 4 / 3;
  height: auto;
  margin-bottom: 0;
  border-radius: 0;
}

.corporate-benefit-grid strong {
  margin: 20px 22px 0;
}

.corporate-benefit-grid span {
  margin: 8px 22px 24px;
}

.benefit-grid span {
  margin-top: 8px;
}
.menu-grid article a {
  display: inline-flex;
  margin-top: 14px;
  color: var(--orange-strong);
  font-weight: 700;
}

.card-icon {
  display: inline-grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: var(--orange);
  color: var(--navy);
  font-weight: 700;
}

.service-panel ul {
  padding-left: 20px;
}

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

.legal-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.legal-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(18, 16, 12, 0.08);
}

.legal-content {
  padding: clamp(24px, 4vw, 48px);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--blue-grey);
  box-shadow: var(--soft-shadow);
}

.legal-content h2 {
  margin: clamp(36px, 5vw, 56px) 0 18px;
  color: var(--navy);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  margin: 28px 0 12px;
  color: var(--navy);
  font-size: 1.1rem;
}

.legal-content p,
.legal-content li {
  font-size: 0.96rem;
  line-height: 1.75;
}

.legal-content ul {
  padding-left: 22px;
}

.legal-content .section {
  margin: 0 0 22px;
  padding-block: 0;
}

.legal-indent {
  padding-left: 24px;
}

.policy-table {
  width: 100%;
  margin: 18px 0 24px;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.policy-table th,
.policy-table td {
  padding: 12px;
  border: 1px solid rgba(18, 16, 12, 0.16);
  text-align: left;
  vertical-align: top;
}

.policy-table th {
  background: var(--cream-2);
  color: var(--navy);
}

.order-step-grid {
  counter-reset: orderStep;
}

.order-step {
  position: relative;
}

.order-step h3 {
  font-size: 1.3rem;
  line-height: 1.15;
}

.order-step .card-icon {
  margin-bottom: 16px;
}

.photo-placeholder {
  min-height: 280px;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 10px solid var(--white);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(18, 16, 12, 0.02), rgba(18, 16, 12, 0.12)),
    url("assets/catering-buffet-hero.webp") center / cover;
  color: var(--white);
  font-weight: 700;
  text-align: center;
  box-shadow: var(--soft-shadow);
}

.photo-placeholder.large {
  min-height: 380px;
}

.product-photo-section {
  background: var(--white);
}

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

.product-photo-slot {
  min-height: 220px;
  align-content: end;
  justify-items: start;
}
.buffet-difference-section {
  background: #fff8ea;
  overflow: hidden;
}

.buffet-difference-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.65fr);
  gap: 14px clamp(32px, 7vw, 96px);
  align-items: end;
  margin-bottom: clamp(54px, 8vw, 96px);
}

.buffet-difference-intro h2 {
  max-width: 12ch;
  margin: 0;
  color: var(--leaf);
  font-size: clamp(3rem, 6vw, 5.8rem);
  line-height: 0.94;
}

.buffet-difference-intro > div p {
  margin: 0;
}

.buffet-difference-intro > div p + p {
  margin-top: 12px;
}

.buffet-experience-list {
  display: grid;
  gap: clamp(72px, 10vw, 132px);
}

.buffet-experience-block {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
  gap: clamp(34px, 7vw, 90px);
  align-items: center;
}

.buffet-experience-reverse .buffet-experience-visual {
  order: 2;
}

.buffet-experience-visual {
  min-height: clamp(420px, 52vw, 660px);
  padding: clamp(24px, 4vw, 42px);
  align-content: end;
  justify-items: start;
  border-radius: 16px;
  color: var(--leaf);
}

.buffet-experience-visual span,
.buffet-experience-visual small {
  display: block;
  width: fit-content;
  padding: 6px 10px;
  background: #fff8ea;
}

.buffet-experience-visual small {
  margin-top: 6px;
  opacity: 0.72;
}

.buffet-experience-block:nth-child(1) .buffet-experience-visual {
  background-image: linear-gradient(180deg, transparent 48%, rgba(13, 51, 42, 0.24)), url("/assets/DSC06331.webp");
}

.buffet-experience-block:nth-child(2) .buffet-experience-visual {
  background-image: linear-gradient(180deg, transparent 48%, rgba(13, 51, 42, 0.24)), url("/assets/A744134.webp");
}

.buffet-experience-block:nth-child(3) .buffet-experience-visual {
  background-image: linear-gradient(180deg, transparent 48%, rgba(13, 51, 42, 0.24)), url("/assets/_KCH6540.webp");
}

.buffet-experience-block:nth-child(4) .buffet-experience-visual {
  background-image: linear-gradient(180deg, transparent 48%, rgba(13, 51, 42, 0.24)), url("/assets/DSC02524.webp");
}

.buffet-experience-visual {
  background-position: center;
  background-size: cover;
}

.buffet-experience-copy h3 {
  max-width: 14ch;
  margin: 0 0 22px;
  color: var(--leaf);
  font-size: clamp(2.25rem, 4.6vw, 4.3rem);
  line-height: 0.98;
}

.buffet-experience-copy > p {
  max-width: 62ch;
}

.buffet-block-lead {
  color: var(--leaf);
  font-weight: 700;
}

.buffet-feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 22px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

.buffet-feature-list li {
  position: relative;
  padding-left: 18px;
}

.buffet-feature-list li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

.buffet-proof-note,
.buffet-positioning-note {
  padding-top: 18px;
  border-top: 1px solid rgba(13, 51, 42, 0.18);
  color: var(--leaf);
  font-size: 0.94rem;
  font-weight: 600;
}

.buffet-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0;
}

.buffet-chip-group span {
  padding: 10px 15px;
  border: 1px solid rgba(13, 51, 42, 0.24);
  border-radius: 999px;
  color: var(--leaf);
  font-size: 0.88rem;
  font-weight: 600;
}

.buffet-chip-group-primary span {
  border-color: var(--leaf);
  background: #fff8ea;
  color: var(--leaf);
}

.buffet-availability-label {
  margin: 26px 0 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.buffet-inline-options {
  color: var(--leaf);
  font-weight: 700;
}

.buffet-inline-options span {
  padding-inline: 5px;
  color: var(--orange);
}

.buffet-experience-copy blockquote {
  margin: 26px 0 18px;
  padding-left: 20px;
  border-left: 3px solid var(--orange);
  color: var(--leaf);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  line-height: 1.25;
}

.buffet-experience-copy .button {
  margin-top: 10px;
}

@media (max-width: 820px) {
  .buffet-difference-intro,
  .buffet-experience-block {
    grid-template-columns: 1fr;
  }

  .buffet-experience-reverse .buffet-experience-visual {
    order: 0;
  }

  .buffet-experience-visual {
    min-height: clamp(320px, 94vw, 500px);
  }
}

@media (max-width: 520px) {
  .buffet-feature-list {
    grid-template-columns: 1fr;
  }
}

/* Mini buffet product page */
.mini-buffet-page-hero {
  background-image: linear-gradient(90deg, rgba(28, 25, 22, 0.86), rgba(28, 25, 22, 0.35)), url("/assets/mini-catering.webp");
  background-position: center;
  background-size: cover;
}

.mini-buffet-page-hero .container {
  max-width: 780px;
  margin-left: max(0px, calc((100vw - 1200px) / 2));
}

.mini-buffet-page-hero .hero-text {
  max-width: 720px;
}

.mini-buffet-hero-highlight {
  margin: 22px 0 6px;
  color: #fff;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
}

.mini-buffet-value-section,
.mini-buffet-occasions-section,
.mini-buffet-faq-section {
  background: #fffdf6;
  color: var(--blue-grey);
}

.mini-buffet-occasions-section {
  padding-bottom: clamp(36px, 4vw, 52px);
}

.mini-buffet-occasions-section + .shared-product-trust-section {
  padding-top: clamp(36px, 4vw, 52px);
}

.mini-buffet-heading h2,
.mini-buffet-section-heading h2 {
  color: var(--navy);
}.mini-buffet-section-heading { max-width: 820px; margin: 0 auto 52px; text-align: left; margin-right: 0; margin-left: 0; }

.mini-buffet-section-heading > div {
  max-width: 760px;
  margin: 20px 0 0;
}

.mini-buffet-value-list {
  display: grid;
  gap: 38px;
}

.mini-buffet-value-block {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  min-height: 480px;
  overflow: hidden;
  border: 1px solid rgba(99, 87, 71, 0.14);
  border-radius: 30px;
  background: #fff;
  box-shadow: var(--soft-shadow);
}

.mini-buffet-value-block > div:last-child {
  align-self: center;
  padding: clamp(32px, 5vw, 64px);
}

.mini-buffet-value-block > div:last-child > span,
.mini-buffet-occasion-grid article > span {
  color: var(--orange-strong);
  font-weight: 700;
}

.mini-buffet-value-block h3,
.mini-buffet-menu-card h3,
.mini-buffet-custom-cta h3,
.mini-buffet-occasion-grid h3 {
  color: var(--navy);
}

.mini-buffet-value-block strong,
.mini-buffet-menu-card strong {
  display: block;
  margin-bottom: 14px;
  color: var(--orange-strong);
}

.mini-buffet-value-block blockquote {
  margin: 22px 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--orange);
  color: var(--navy);
  font-weight: 700;
}

.mini-buffet-value-photo,
.mini-buffet-menu-photo {
  min-height: 360px;
  background-position: center;
  background-size: cover;
}

.mini-buffet-value-block:nth-child(1) .mini-buffet-value-photo,
.mini-buffet-value-block:nth-child(2) .mini-buffet-value-photo,
.mini-buffet-value-block:nth-child(3) .mini-buffet-value-photo,
.mini-buffet-value-block:nth-child(4) .mini-buffet-value-photo {
  background-image: url("/assets/RMC-Raya-MENU_09.webp");
}

.mini-buffet-value-reverse .mini-buffet-value-photo {
  order: 2;
}

.mini-buffet-menu-section{
  background: #fff7e8;
  color: var(--blue-grey);
}

.mini-buffet-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.mini-buffet-menu-card {
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--soft-shadow);
}

.mini-buffet-menu-card:nth-child(1) .mini-buffet-menu-photo,
.mini-buffet-menu-card:nth-child(2) .mini-buffet-menu-photo {
  background-image: url("/assets/RMC-Raya-MENU_09.webp");
}

.mini-buffet-menu-card > div:last-child {
  padding: clamp(28px, 4vw, 44px);
}

.mini-buffet-menu-card ul,
.mini-buffet-value-block ul {
  padding-left: 20px;
}

.mini-buffet-proof-note {
  padding-top: 16px;
  border-top: 1px solid rgba(99, 87, 71, 0.16);
  font-size: 0.9rem;
}

.mini-buffet-custom-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 32px;
  padding: 34px clamp(26px, 5vw, 52px);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--soft-shadow);
}

.mini-buffet-custom-cta p:last-child {
  margin-bottom: 0;
}

.mini-buffet-occasion-layout {
  display: grid;
  grid-template-columns: minmax(260px, 3fr) minmax(0, 7fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: stretch;
}

.mini-buffet-occasion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.mini-buffet-occasion-grid article:last-child {
  grid-column: 1 / -1;
}

.mini-buffet-occasion-grid article {
  padding: 28px 22px;
  border: 1px solid rgba(99, 87, 71, 0.14);
  border-radius: 20px;
  background: #fff;
}

.mini-buffet-occasion-grid p {
  margin-bottom: 0;
}

.mini-buffet-occasion-grid article:not(.mini-buffet-facts-summary) {
  display: flex;
  min-height: clamp(240px, 21vw, 300px);
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: 0;
  background-image:
    linear-gradient(180deg, rgba(13, 51, 42, 0.04) 24%, rgba(13, 51, 42, 0.9) 100%),
    url("/assets/RMC-Raya-MENU_09.webp");
  background-position: center;
  background-size: cover;
  box-shadow: var(--soft-shadow);
}

.mini-buffet-occasion-grid article:not(.mini-buffet-facts-summary) > span {
  margin-bottom: 8px;
  color: #ffd5ad;
}

.mini-buffet-occasion-grid article:not(.mini-buffet-facts-summary) h3 {
  margin-bottom: 10px;
  color: #fff;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.25;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

.mini-buffet-occasion-grid article:not(.mini-buffet-facts-summary) p {
  color: #fff;
}

.mini-buffet-facts-summary {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid rgba(99, 87, 71, 0.14);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--soft-shadow);
}

.mini-buffet-facts-summary h3 {
  margin: 0 0 18px;
  color: var(--orange-strong);
  font-size: clamp(1.7rem, 2.6vw, 2.25rem);
  line-height: 1.12;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.mini-buffet-facts-summary > p {
  max-width: 72ch;
  margin: 0 0 24px;
  color: var(--navy);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 600;
  line-height: 1.65;
}

.mini-buffet-facts-summary ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin: 0;
  padding-left: 22px;
  color: var(--blue-grey);
}

.mini-buffet-facts-summary li {
  padding-left: 4px;
  line-height: 1.55;
}

.mini-buffet-facts-summary li::marker {
  color: var(--orange-strong);
}

.mini-buffet-faq-section .faq-list h3 {
  margin: 0;
  color: var(--navy);
  font-size: inherit;
}

.mini-buffet-final-cta {
  color: #fff;
}

@media (max-width: 980px) {
  .mini-buffet-value-block {
    grid-template-columns: 1fr;
  }

  .mini-buffet-value-reverse .mini-buffet-value-photo {
    order: 0;
  }

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

  .mini-buffet-occasion-layout {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 640px) {
  .mini-buffet-page-hero {
    background-position: 60% center;
  }

  .mini-buffet-page-hero .hero-actions,
  .mini-buffet-custom-cta {
    display: grid;
  }

  .mini-buffet-page-hero .button,
  .mini-buffet-custom-cta .button,
  .mini-buffet-menu-card .button {
    width: 100%;
  }

  .mini-buffet-menu-grid,
  .mini-buffet-occasion-grid {
    grid-template-columns: 1fr;
  }

  .mini-buffet-facts-summary ul {
    grid-template-columns: 1fr;
  }

  .mini-buffet-value-block {
    min-height: 0;
    border-radius: 22px;
  }

  .mini-buffet-value-photo,
  .mini-buffet-menu-photo {
    min-height: 280px;
  }
}

.buffet-flavours-section {
  background: #fff;
}

.buffet-flavours-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.72fr);
  gap: 12px clamp(32px, 7vw, 96px);
  align-items: end;
  margin-bottom: clamp(44px, 7vw, 82px);
}

.buffet-flavours-heading > p:last-child {
  margin-top: 5px;
}

.buffet-cuisine-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}

.buffet-cuisine-card {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.buffet-cuisine-photo {
  aspect-ratio: 4 / 4.6;
  padding: 0;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
}

.buffet-cuisine-photo span,
.buffet-cuisine-photo small {
  display: block;
  width: fit-content;
  padding: 6px 10px;
  background: #fff8ea;
}

.buffet-cuisine-photo small {
  margin-top: 5px;
  opacity: 0.72;
}

.buffet-cuisine-card:nth-child(1) .buffet-cuisine-photo {
  background-image: url("/assets/RMC-Raya-MENU_09.webp");
}

.buffet-cuisine-card:nth-child(2) .buffet-cuisine-photo {
  background-image: url("/assets/RMC-Raya-MENU_09.webp");
}

.buffet-cuisine-card:nth-child(3) .buffet-cuisine-photo {
  background-image: url("/assets/RMC-Raya-MENU_09.webp");
}

.buffet-cuisine-card:nth-child(4) .buffet-cuisine-photo {
  background-image: url("/assets/RMC-Raya-MENU_09.webp");
}

.buffet-cuisine-photo {
  background-position: center;
  background-size: cover;
}

.buffet-cuisine-card-copy {
  padding: 18px 2px 0;
}

.buffet-card-number {
  display: none;
}

.buffet-cuisine-card h3 {
  max-width: none;
  margin: 0 0 8px;
  color: var(--leaf);
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
  line-height: 1.15;
}

.buffet-familiar-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  gap: clamp(28px, 6vw, 76px);
  align-items: center;
  margin-top: clamp(42px, 7vw, 76px);
  padding: clamp(30px, 5vw, 58px);
  border-radius: 16px;
  border: 1px solid rgba(13, 51, 42, 0.18);
  background: #fff8ea;
  color: var(--leaf);
}

.buffet-familiar-note h3 {
  margin: 0 0 12px;
  color: var(--leaf);
  font-size: clamp(1.7rem, 3vw, 2.7rem);
}

.buffet-familiar-note h3 span {
  color: var(--orange);
}

.buffet-familiar-note p {
  margin-bottom: 0;
}

.buffet-flavours-highlight {
  padding-left: clamp(22px, 4vw, 44px);
  border-left: 1px solid rgba(13, 51, 42, 0.22);
  color: var(--leaf);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  line-height: 1.2;
}

@media (max-width: 1080px) {
  .buffet-cuisine-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .buffet-flavours-heading,
  .buffet-familiar-note {
    grid-template-columns: 1fr;
  }
  .buffet-flavours-heading h2{
    grid-column: 1;
    grid-row: auto;
  }

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

  .buffet-flavours-highlight {
    padding: 24px 0 0;
    border-top: 1px solid rgba(13, 51, 42, 0.22);
    border-left: 0;
  }
}

.buffet-sample-menus,
.buffet-complete-section {
  background: #fff8ea;
}

.buffet-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  gap: 14px clamp(32px, 7vw, 92px);
  align-items: end;
  margin-bottom: clamp(44px, 7vw, 82px);
}

.buffet-section-heading h2 {
  max-width: 13ch;
  margin: 0;
  color: var(--leaf);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 600;
  line-height: 0.96;
}

.buffet-section-heading > div p {
  margin: 0;
}

.buffet-section-heading > div p + p {
  margin-top: 10px;
}

.buffet-menu-samples {
  display: grid;
  gap: clamp(38px, 6vw, 72px);
}

.buffet-menu-sample {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: clamp(30px, 6vw, 76px);
  align-items: start;
  padding-bottom: clamp(38px, 6vw, 72px);
  border-bottom: 1px solid rgba(13, 51, 42, 0.18);
}

.buffet-menu-photo,
.buffet-setup-photo {
  min-height: clamp(360px, 43vw, 560px);
  align-content: end;
  justify-items: start;
  color: var(--leaf);
}

.buffet-menu-photo :where(span, small),
.buffet-setup-photo :where(span, small) {
  display: block;
  width: fit-content;
  padding: 6px 10px;
  background: #fff8ea;
}

.buffet-menu-sample:nth-child(1) .buffet-menu-photo {
  background-image: linear-gradient(180deg, transparent 48%, rgba(13, 51, 42, 0.22)), url("/assets/DSC_3877-1.webp");
}

.buffet-menu-sample:nth-child(2) .buffet-menu-photo {
  background-image: linear-gradient(180deg, transparent 48%, rgba(13, 51, 42, 0.22)), url("/assets/DSC09841.webp");
}

.buffet-menu-photo,
.buffet-setup-photo {
  background-position: center;
  background-size: cover;
}

.buffet-menu-copy h3 {
  margin-bottom: 16px;
  color: var(--leaf);
  font-size: clamp(2rem, 4vw, 3.7rem);
}

.buffet-menu-copy ul {
  display: grid;
  gap: 9px;
  margin: 24px 0;
  padding-left: 20px;
}

.buffet-menu-copy li::marker {
  color: var(--orange);
}

.buffet-full-menu-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin-top: clamp(40px, 7vw, 76px);
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid rgba(13, 51, 42, 0.18);
  border-radius: 16px;
  background: #fff;
}

.buffet-full-menu-cta h3 {
  color: var(--leaf);
}

.buffet-waiter-section {
  background: #fff;
}

.buffet-waiter-intro {
  max-width: 920px;
  margin-bottom: clamp(42px, 7vw, 76px);
}

.buffet-waiter-intro h2 {
  margin-bottom: 12px;
  color: var(--leaf);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 600;
}

.buffet-waiter-intro h3 {
  margin-bottom: 24px;
  color: var(--orange-strong);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.buffet-waiter-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  counter-reset: buffet-waiter-step;
}

.buffet-waiter-grid article {
  position: relative;
  counter-increment: buffet-waiter-step;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-height: clamp(340px, 32vw, 440px);
  padding: clamp(64px, 8vw, 92px) clamp(24px, 2.8vw, 34px) clamp(24px, 2.8vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(169, 79, 0, 0.14);
  border-radius: 28px;
  background: var(--white);
  box-shadow: 0 16px 36px rgba(18, 16, 12, 0.08);
}

.buffet-waiter-grid article::before {
  content: counter(buffet-waiter-step, decimal-leading-zero);
  position: absolute;
  top: clamp(10px, 1.6vw, 18px);
  right: clamp(18px, 2.4vw, 26px);
  color: var(--orange-strong);
  font-family: var(--font-secondary);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
}

.buffet-waiter-grid span {
  display: none;
}

.buffet-waiter-grid h3 {
  min-height: 2.4em;
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 800;
  line-height: 1.2;
}

.buffet-waiter-grid p {
  max-width: none;
  margin: 0;
  color: var(--blue-grey);
  font-size: 0.94rem;
  line-height: 1.55;
}

.buffet-service-highlight {
  margin: clamp(40px, 6vw, 68px) 0 0;
  color: var(--leaf);
  font-family: var(--font-secondary);
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.08;
  text-align: center;
}

.buffet-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 42px);
}

.buffet-setup-grid article {
  overflow: hidden;
  border: 1px solid rgba(13, 51, 42, 0.16);
  border-radius: 16px;
  background: #fff;
}

.buffet-setup-grid .buffet-setup-photo {
  border: 0;
  border-bottom: 1px solid rgba(13, 51, 42, 0.12);
  border-radius: 0;
  background: #fff;
  align-content: center;
  justify-items: center;
  box-shadow: inset 0 0 0 2px rgba(13, 51, 42, 0.18);
}

.buffet-setup-grid .buffet-setup-photo :where(span, small) {
  background: #fff8ea;
  color: var(--leaf);
  text-align: center;
}

.buffet-setup-grid article:nth-child(1) .buffet-setup-photo {
  background-image: linear-gradient(180deg, transparent 48%, rgba(13, 51, 42, 0.2)), url("/assets/DSC04403.webp");
}

.buffet-setup-grid article:nth-child(2) .buffet-setup-photo {
  background-image: linear-gradient(180deg, transparent 48%, rgba(13, 51, 42, 0.2)), url("/assets/AnnualDinner_2.webp");
}

.buffet-setup-grid article > div:last-child {
  padding: clamp(24px, 4vw, 38px);
}

.buffet-setup-grid h3 {
  margin-bottom: 12px;
  color: var(--leaf);
}

.buffet-setup-note {
  margin: 24px 0 0;
  color: var(--leaf);
  font-weight: 600;
}

.buffet-faq-section {
  background: #fff;
}

.buffet-faq-section summary h3 {
  margin: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  line-height: inherit;
}

.buffet-faq-section .faq-list details p + p {
  margin-top: 10px;
}

.buffet-final-cta .container {
  max-width: 840px;
}

.buffet-final-cta .hero-actions {
  justify-content: center;
}

@media (max-width: 900px) {
  .buffet-waiter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .buffet-section-heading,
  .buffet-menu-sample,
  .buffet-full-menu-cta,
  .buffet-setup-grid {
    grid-template-columns: 1fr;
  }

  .buffet-full-menu-cta .button {
    justify-self: start;
  }
}

#main .banquet-chef-credentials-inline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(13, 51, 42, 0.14);
}

#main .banquet-chef-profile .banquet-chef-subheading {
  margin: 0 0 14px;
  color: var(--navy);
  font-size: 1rem;
  line-height: 1.4;
}

#main .banquet-chef-credentials-inline ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 18px;
  font-size: 0.88rem;
  line-height: 1.5;
}

#main .banquet-chef-profile .banquet-chef-highlight {
  margin: 30px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(13, 51, 42, 0.14);
  text-align: left;
}

@media (max-width: 820px) {
  #main .banquet-chef-profile {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  #main .banquet-chef-credentials-inline {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .buffet-waiter-grid {
    grid-template-columns: 1fr;
  }

  .buffet-waiter-grid article {
    min-height: 0;
  }
}

@keyframes buffet-carousel-swap {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - clamp(7px, 1vw, 12px)));
  }
}

@media (prefers-reduced-motion: reduce) {
}
.split-grid .photo-placeholder {
  background-image:
    linear-gradient(180deg, rgba(18, 16, 12, 0.02), rgba(18, 16, 12, 0.12)),
    url("assets/catering-wedding-banquet.webp");
}

.wedding-event-page .split-grid .photo-placeholder {
  background-image:
    linear-gradient(180deg, rgba(18, 16, 12, 0.02), rgba(18, 16, 12, 0.12)),
    url("assets/Wedding_20230721-0250.webp");
}

.wedding-simple-heading {
  margin-bottom: clamp(24px, 3vw, 38px);
  text-align: left;
}

.wedding-simple-heading h2 {
  max-width: 12ch;
}

.birthday-difference-section {
  padding-block: clamp(72px, 9vw, 124px);
  background: var(--warm-tint);
}

.birthday-difference-intro {
  max-width: 850px;
  margin-bottom: clamp(48px, 7vw, 88px);
}

.birthday-difference-intro h2 {
  max-width: 15ch;
  margin-bottom: 1rem;
}

.birthday-difference-intro strong {
  display: block;
  margin-bottom: 1.4rem;
  color: var(--navy);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
}

.birthday-difference-intro p {
  max-width: 68ch;
  margin-bottom: 0.7rem;
}

.birthday-experience-list {
  display: grid;
  gap: clamp(20px, 2.6vw, 32px);
}

.birthday-experience-row {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
  padding: clamp(24px, 4vw, 50px);
  border-radius: 28px;
  background: var(--white);
  box-shadow: 0 20px 55px rgba(18, 16, 12, 0.09);
}

.birthday-experience-row-reverse figure {
  order: 2;
}

.birthday-experience-row figure {
  min-height: 480px;
  height: min(55vw, 650px);
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--white);
  box-shadow: none;
}

.birthday-experience-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.birthday-experience-row:first-child img {
  object-position: center 63%;
}

.birthday-experience-copy > span {
  display: block;
  margin-bottom: 0.85rem;
  color: var(--orange-strong);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.birthday-experience-copy h3 {
  max-width: 17ch;
  margin: 0 0 1rem;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.03;
}

.birthday-experience-copy p {
  max-width: 58ch;
}

.birthday-experience-copy blockquote {
  margin: 1.8rem 0 0;
  padding-left: 1.25rem;
  border-left: 4px solid var(--orange-strong);
  color: var(--navy);
  font-family: var(--font-secondary);
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.35;
}

.birthday-positioning-note {
  display: inline-flex;
  margin-top: 0.6rem;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  background: rgba(169, 79, 0, 0.1);
  color: var(--orange-strong);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.birthday-experience-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.birthday-experience-tags li {
  padding: 0.62rem 0.9rem;
  border: 1px solid rgba(169, 79, 0, 0.22);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 700;
}

.birthday-experience-copy .button {
  margin-top: 1.35rem;
}

.birthday-parent-row {
  padding: clamp(24px, 4vw, 50px);
  border-radius: 28px;
  background: var(--white);
  box-shadow: 0 20px 55px rgba(18, 16, 12, 0.09);
}

.birthday-parent-row figure {
  min-height: 400px;
  height: min(44vw, 540px);
  box-shadow: none;
}

.birthday-style-section {
  padding-block: clamp(72px, 9vw, 118px);
  background: var(--white);
}

.birthday-style-heading {
  max-width: 820px;
  margin-bottom: clamp(42px, 6vw, 72px);
}

.birthday-style-heading h2 {
  max-width: 17ch;
  margin-bottom: 1.1rem;
}

.birthday-style-heading p {
  max-width: 65ch;
  margin: 0;
}

.birthday-style-list {
  display: grid;
  gap: clamp(20px, 2.6vw, 32px);
}

.birthday-style-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
  padding-block: clamp(34px, 5vw, 58px);
  padding-inline: clamp(24px, 4vw, 48px);
  background: var(--white);
}

.birthday-style-number {
  color: var(--orange-strong);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.birthday-style-copy h3 {
  margin: 0 0 0.9rem;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.04;
}

.birthday-style-copy p {
  max-width: 54ch;
  margin-bottom: 1.5rem;
}

.birthday-style-copy .button {
  width: fit-content;
}

.birthday-style-best {
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--warm-tint);
}

.birthday-style-best strong {
  display: block;
  margin-bottom: 0.8rem;
  color: var(--orange-strong);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.birthday-style-best ul {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.birthday-style-best li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--navy);
  font-weight: 700;
  line-height: 1.45;
}

.birthday-style-best li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange-strong);
}

.birthday-brand-section {
  padding-block: clamp(76px, 10vw, 132px);
  background:
    radial-gradient(circle at 88% 12%, rgba(249, 165, 26, 0.16), transparent 28%),
    var(--warm-tint);
}

.birthday-brand-heading {
  max-width: 850px;
  margin-bottom: clamp(48px, 7vw, 82px);
}

.birthday-brand-heading h2 {
  max-width: 16ch;
  margin-bottom: 1.2rem;
}

.birthday-brand-heading p {
  max-width: 62ch;
  margin: 0;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
}

.birthday-brand-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
}

.birthday-brand-pillar {
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(169, 79, 0, 0.14);
  border-radius: 26px;
  background: var(--white);
  box-shadow: 0 16px 36px rgba(18, 16, 12, 0.08);
}

.birthday-brand-pillar > span {
  display: block;
  margin-bottom: clamp(34px, 5vw, 64px);
  color: var(--orange-strong);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.birthday-brand-pillar h3 {
  margin: 0 0 0.8rem;
  font-size: clamp(1.75rem, 3vw, 2.8rem);
  line-height: 1.08;
}

.birthday-brand-pillar strong {
  display: block;
  min-height: 3em;
  margin-bottom: 1rem;
  color: var(--navy);
  font-size: 1rem;
  line-height: 1.5;
}

.birthday-brand-pillar p {
  margin: 0;
}

.birthday-brand-highlight {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 6vw, 88px);
  align-items: center;
  margin-top: clamp(42px, 7vw, 78px);
  padding: clamp(28px, 5vw, 58px);
  border-radius: 24px;
  background: var(--navy);
  color: var(--white);
}

.birthday-brand-highlight p {
  margin: 0;
  color: var(--white);
  font-family: var(--font-secondary);
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 1.08;
}

.birthday-brand-highlight span {
  max-width: 50ch;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.75;
}

.birthday-how-section {
  padding-block: clamp(76px, 10vw, 126px);
  background: var(--white);
}

.birthday-how-heading {
  max-width: 760px;
  margin-bottom: clamp(44px, 7vw, 76px);
}

.birthday-how-heading h2 {
  max-width: 15ch;
}

.birthday-how-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: birthday-how-step;
}

.birthday-how-step {
  position: relative;
  counter-increment: birthday-how-step;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-height: clamp(340px, 32vw, 440px);
  padding: clamp(64px, 8vw, 92px) clamp(24px, 2.8vw, 34px) clamp(24px, 2.8vw, 34px);
  border: 1px solid rgba(169, 79, 0, 0.14);
  border-radius: 28px;
  background: var(--white);
  box-shadow: 0 16px 36px rgba(18, 16, 12, 0.08);
  overflow: hidden;
}

.birthday-how-step::before {
  content: counter(birthday-how-step, decimal-leading-zero);
  position: absolute;
  top: clamp(10px, 1.6vw, 18px);
  right: clamp(18px, 2.4vw, 26px);
  color: var(--orange-strong);
  font-family: var(--font-secondary);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
}

.birthday-how-copy > span {
  display: none;
}

.birthday-how-copy h3 {
  max-width: none;
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 800;
  line-height: 1.2;
  min-height: 2.4em;
}

.birthday-how-step > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--blue-grey);
  font-size: 0.94rem;
  line-height: 1.55;
  min-height: 7.8em;
}

.birthday-how-step > ul li {
  display: inline;
  padding: 0;
  border: 0;
  color: var(--blue-grey);
  font-weight: 400;
}

.birthday-how-step > ul li:not(:last-child)::after {
  content: ", ";
}

.birthday-how-step > p {
  max-width: none;
  margin: 0;
  color: var(--blue-grey);
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.55;
}

.birthday-how-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(38px, 6vw, 64px);
}

.birthday-faq-section {
  padding-block: clamp(72px, 9vw, 116px);
  background: var(--white);
}

.birthday-faq-heading {
  position: sticky;
  top: 110px;
}

.birthday-faq-heading h2 {
  max-width: 10ch;
}

.birthday-faq-list summary span[role="heading"] {
  display: block;
  padding-right: 28px;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.45;
}

.birthday-faq-list details[open] {
  background: var(--cream-2);
}

.birthday-faq-list details p + p {
  padding-top: 0;
}

.birthday-final-cta {
  padding-block: clamp(68px, 9vw, 112px);
  background: var(--warm-tint);
}

.birthday-final-cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  overflow: hidden;
  border-radius: 26px;
  background: var(--white);
  box-shadow: 0 22px 60px rgba(18, 16, 12, 0.11);
}

.birthday-final-cta-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  padding: clamp(34px, 6vw, 72px);
}

.birthday-final-cta-copy > span {
  margin-bottom: 1rem;
  color: var(--orange-strong);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.birthday-final-cta-copy h2 {
  max-width: 12ch;
  margin-bottom: 1.25rem;
  font-size: clamp(2.35rem, 5vw, 4.6rem);
  line-height: 1.02;
}

.birthday-final-cta-copy p {
  max-width: 55ch;
  margin-bottom: 0.7rem;
}

.birthday-final-cta-copy strong {
  margin: 0.8rem 0 1.6rem;
  color: var(--orange-strong);
  font-family: var(--font-secondary);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 400;
}

.birthday-final-cta-photo {
  min-height: 580px;
  margin: 0;
  overflow: hidden;
}

.birthday-final-cta-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wedding-accordion-row {
  display: flex;
  height: clamp(380px, 42vw, 460px);
  gap: 10px;
}

.wedding-accordion-item {
  position: relative;
  flex: 1 1 74px;
  min-width: 0;
  overflow: hidden;
  border-radius: 20px;
  cursor: pointer;
  outline: none;
  box-shadow: var(--soft-shadow);
  transition: flex-grow 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wedding-accordion-item:hover,
.wedding-accordion-item:focus-visible {
  flex-grow: 9;
}

.wedding-accordion-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wedding-accordion-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 15, 14, 0.85) 0%, rgba(10, 15, 14, 0.18) 48%, rgba(10, 15, 14, 0.05) 100%);
}

.wedding-accordion-edge {
  position: absolute;
  left: 28px;
  bottom: 26px;
  z-index: 2;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--white);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: opacity 220ms ease;
}

.wedding-accordion-item:hover .wedding-accordion-edge,
.wedding-accordion-item:focus-visible .wedding-accordion-edge {
  opacity: 0;
}

.wedding-accordion-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(18px, 2.2vw, 26px);
  color: var(--white);
  opacity: 0;
  transition: opacity 260ms ease 120ms;
}

.wedding-accordion-item:hover .wedding-accordion-caption,
.wedding-accordion-item:focus-visible .wedding-accordion-caption {
  opacity: 1;
}

.wedding-accordion-title {
  display: block;
  margin-bottom: 10px;
  font-size: 1.1rem;
  font-weight: 800;
  white-space: nowrap;
}

.wedding-accordion-caption ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.wedding-accordion-caption li {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .wedding-accordion-row {
    flex-direction: column;
    height: auto;
    gap: 14px;
  }

  .wedding-accordion-item {
    flex: none;
    height: 230px;
  }

  .wedding-accordion-edge {
    display: none;
  }

  .wedding-accordion-caption {
    opacity: 1;
  }

  .wedding-accordion-title {
    white-space: normal;
  }
}

.wedding-style-section {
  padding-block: clamp(68px, 9vw, 118px);
}

.wedding-style-heading {
  max-width: 830px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.wedding-style-heading h2 {
  max-width: 13ch;
  margin-bottom: 12px;
}

.wedding-style-heading p {
  margin: 0;
  color: var(--blue-grey);
  font-size: 1rem;
  line-height: 1.72;
}

.wedding-style-heading .wedding-style-subtitle {
  margin-bottom: 12px;
  color: var(--navy);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
}

.wedding-style-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.6vw, 32px);
}

.wedding-style-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: clamp(320px, 30vw, 400px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(169, 79, 0, 0.14);
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(18, 16, 12, 0.08);
}

.wedding-style-photo {
  width: 100%;
  height: 100%;
  min-height: clamp(240px, 28vw, 400px);
  object-fit: cover;
}

.wedding-style-content {
  display: grid;
  align-content: center;
  gap: 24px;
  padding: clamp(28px, 3.4vw, 46px);
}

.wedding-style-card:nth-child(even) .wedding-style-photo {
  order: 2;
}

.wedding-style-card:nth-child(even) .wedding-style-content {
  order: 1;
}

.wedding-style-card h3 {
  margin-bottom: 12px;
  color: var(--navy);
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.05;
}

.wedding-style-card p {
  margin: 0;
  color: var(--blue-grey);
  line-height: 1.62;
}

.wedding-style-best {
  align-self: start;
}

.wedding-style-best span {
  display: block;
  margin-bottom: 10px;
  color: var(--orange-strong);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.wedding-style-best ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--blue-grey);
}

.wedding-style-best li {
  padding: 0;
  color: var(--blue-grey);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.55;
}

.wedding-style-card .button {
  width: auto;
  min-height: 0;
  display: inline;
  justify-self: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--orange-strong) !important;
  box-shadow: none;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
}

.wedding-style-card .button:hover {
  color: var(--orange) !important;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.wedding-touch-section {
  padding-block: clamp(68px, 9vw, 118px);
}

.wedding-touch-heading {
  max-width: 880px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.wedding-touch-heading h2 {
  max-width: 15ch;
  margin-bottom: 16px;
}

.wedding-touch-heading p {
  margin: 0;
  color: var(--blue-grey);
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.72;
}

.wedding-touch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(16px, 2vw, 24px);
}

.wedding-touch-card {
  border: 1px solid rgba(169, 79, 0, 0.14);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(18, 16, 12, 0.08);
}

.wedding-touch-card {
  min-height: 360px;
  padding: clamp(22px, 2.4vw, 32px);
}

.wedding-touch-card span {
  display: block;
  margin-bottom: 14px;
  color: var(--orange-strong);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.wedding-touch-card h3,
.wedding-touch-highlight h3 {
  margin: 0 0 14px;
  color: var(--navy);
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.05;
}

.wedding-touch-card p,
.wedding-touch-highlight p {
  margin: 0;
  color: var(--blue-grey);
  line-height: 1.68;
}

.wedding-touch-highlight {
  max-width: 760px;
  margin-top: clamp(22px, 3vw, 36px);
  padding-top: clamp(18px, 2.4vw, 28px);
  border-top: 1px solid rgba(169, 79, 0, 0.16);
}

.wedding-how-section {
  padding-block: clamp(68px, 9vw, 118px);
}

.wedding-how-heading {
  max-width: 780px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.wedding-how-heading h2 {
  max-width: 10ch;
  margin-bottom: 12px;
}

.wedding-how-heading p {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
}

.wedding-how-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(16px, 2vw, 24px);
}

.wedding-how-card {
  min-height: 410px;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid rgba(169, 79, 0, 0.14);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(18, 16, 12, 0.08);
}

.wedding-how-card > span {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--orange);
  color: #ffffff;
  font-weight: 800;
  line-height: 1;
}

.wedding-how-card h3 {
  color: var(--navy);
  font-size: clamp(1.28rem, 1.8vw, 1.8rem);
  line-height: 1.08;
}

.wedding-how-card p {
  margin: 0;
  color: var(--blue-grey);
  line-height: 1.58;
}

.wedding-how-card ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--blue-grey);
  font-weight: 700;
  line-height: 1.5;
}

.wedding-how-card li {
  padding: 0;
  color: var(--blue-grey);
  font-size: 0.95rem;
}

.wedding-how-card li + li {
  margin-top: 0.42rem;
}

.wedding-how-card-final {
  background: #ffffff;
}

.wedding-how-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 3vw, 40px);
}

.wedding-how-cta .button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(22px, 3vw, 34px);
}

.wedding-proof-section {
  padding-block: clamp(68px, 9vw, 118px);
}

.wedding-proof-heading {
  max-width: 760px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.wedding-proof-heading h2 {
  max-width: 13ch;
}

.wedding-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.wedding-proof-card {
  position: relative;
  min-height: 100%;
  display: grid;
  align-content: start;
  overflow: hidden;
  border: 1px solid rgba(169, 79, 0, 0.14);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(18, 16, 12, 0.08);
}

.wedding-proof-card > div {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(22px, 2.5vw, 32px);
}

.wedding-proof-card h3 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.28rem, 1.8vw, 1.9rem);
  line-height: 1.08;
}

.wedding-proof-card strong {
  color: var(--orange-strong);
  font-size: 0.96rem;
  line-height: 1.38;
}

.wedding-proof-card p {
  margin: 0;
  color: var(--blue-grey);
  line-height: 1.62;
}

.wedding-proof-card-featured {
  background:
    linear-gradient(135deg, #ffffff, rgba(255, 247, 232, 0.96));
}

.wedding-trust-proof-section {
  padding-block: clamp(58px, 7vw, 96px);
}

.wedding-trust-counter-grid {
  margin-top: clamp(30px, 5vw, 48px);
}

.wedding-final-cta {
  padding-top: 0;
}

.festive-page .split-grid .photo-placeholder {
  background-image:
    linear-gradient(180deg, rgba(18, 16, 12, 0.02), rgba(18, 16, 12, 0.12)),
    url("assets/2025_RMC-CNY-MENU_03.webp");
}

.final-cta .inline-cta {
  color: var(--blue-grey);
}

.portfolio-hero {
  padding: clamp(130px, 14vw, 190px) 0 clamp(54px, 8vw, 96px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.05)),
    url("assets/portfolio-bg.webp") center top / cover no-repeat,
    var(--cream);
}

.portfolio-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 56px);
  align-items: end;
}

.portfolio-hero-copy h1 {
  max-width: 840px;
  margin-bottom: 18px;
  color: var(--navy);
  font-size: clamp(2.8rem, 7vw, 6.6rem);
  line-height: 0.92;
}

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

.portfolio-contents-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 38px);
}

.portfolio-index-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 32px);
}

.portfolio-index-image {
  width: clamp(150px, 24vw, 230px);
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform 260ms ease;
}

.portfolio-index-card:hover .portfolio-index-image,
.portfolio-index-card:focus-within .portfolio-index-image {
  transform: scale(1.04);
}

.portfolio-index-copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
}

.portfolio-title-link {
  display: inline-grid;
  width: fit-content;
  max-width: 100%;
  gap: 12px;
  margin-bottom: 18px;
  text-decoration: none;
  transition: transform 180ms ease;
}

.portfolio-number {
  display: block;
  color: #9a5c00;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  font-weight: 700;
  line-height: 0.86;
}

.portfolio-title-pill {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  background: #ffd67a;
  color: var(--navy);
  font-family: var(--font-secondary);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 14px 32px rgba(154, 92, 0, 0.16);
  transition: background 180ms ease;
}

a.portfolio-title-link:hover,
a.portfolio-title-link:focus-visible {
  transform: translateY(-2px);
}

a.portfolio-title-link:hover .portfolio-title-pill,
a.portfolio-title-link:focus-visible .portfolio-title-pill {
  background: var(--orange);
}

.portfolio-index-copy ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.portfolio-index-copy li {
  position: relative;
  padding-left: 24px;
  color: var(--blue-grey);
  font-weight: 700;
}

.portfolio-index-copy li::before {
  position: absolute;
  top: 0.72em;
  left: 0;
  color: var(--orange);
  font-size: 0.75em;
  line-height: 1;
  content: "★";
  transform: translateY(-50%);
}

.portfolio-index-copy a:not(.portfolio-title-link) {
  color: inherit;
  text-decoration: none;
}

.portfolio-index-copy a:not(.portfolio-title-link):hover {
  color: #9a5c00;
}

.event-space-album-section .section-heading {
  max-width: 720px;
  margin-bottom: clamp(30px, 5vw, 52px);
  margin-inline: auto;
  text-align: center;
}

.event-space-slide figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(42px, 7vw, 82px);
}

.event-space-slide h3 {
  margin: 0 0 10px;
  color: var(--white);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
}

.event-space-slide p {
  max-width: 64ch;
  margin: 0;
  color: var(--warm-tint);
  font-size: clamp(0.82rem, 1.3vw, 1rem);
  font-weight: 600;
  line-height: 1.55;
}

.menu-tabs-wrap {
  margin-bottom: clamp(32px, 5vw, 52px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.menu-tabs-wrap::-webkit-scrollbar {
  display: none;
}

.menu-tabs {
  display: flex;
  gap: clamp(10px, 2.4vw, 30px);
  min-width: max-content;
  border-bottom: 1px solid rgba(18, 16, 12, 0.12);
}

.menu-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 4px 14px;
  border: none;
  background: none;
  color: var(--blue-grey);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}

.menu-tab:hover {
  color: var(--navy);
}

.menu-tab.is-active {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

.menu-tab:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.menu-panel {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

html.js-ready .menu-panel:not(.is-active) {
  display: none;
}

html.js-ready .menu-panel [data-menu-hidden] {
  display: none;
}

.menu-load-more {
  display: none;
  margin: clamp(24px, 4vw, 40px) auto 0;
}

html.js-ready .menu-panel[data-menu-has-more] .menu-load-more {
  display: flex;
}

.portfolio-photo-masonry {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.portfolio-photo-card {
  display: block;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--soft-shadow);
}

.portfolio-photo-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-back-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 24px;
  color: #9a5c00;
  font-weight: 700;
  text-decoration: none;
  transition: color 180ms ease;
}

.portfolio-back-link:hover {
  color: var(--orange);
}

.about-story-photo {
  align-self: center;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--soft-shadow);
}

.about-story-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.about-proof-heading {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.about-proof-heading p {
  margin-inline: auto;
}

.about-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 34px);
  margin-top: clamp(30px, 5vw, 52px);
}

.about-proof-card {
  display: flex;
  min-height: 300px;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid rgba(13, 51, 42, 0.12);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--soft-shadow);
}

.about-proof-card h3 {
  margin: 8px 0 14px;
}

.about-proof-card .button {
  margin-top: auto;
}

.about-proof-trust {
  background: linear-gradient(145deg, rgba(13, 51, 42, 0.06), rgba(244, 178, 49, 0.08));
}

@media (max-width: 760px) {
  .about-proof-grid {
    grid-template-columns: 1fr;
  }

  .about-proof-card {
    min-height: 0;
  }

  .about-proof-card .button {
    margin-top: 10px;
  }
}

.halal-certificate-only {
  display: flex;
  justify-content: center;
  align-self: center;
  align-items: center;
}

.halal-certificate-only img {
  width: min(283px, 100%);
  height: auto;
  border-radius: 20px;
}

.halal-assurance-section {
  align-items: center;
}

.inline-cta {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.quote-form {
  display: grid;
  gap: 16px;
}

.quote-form label {
  display: grid;
  gap: 8px;
  color: var(--navy);
  font-weight: 700;
}.quote-form textarea { min-height: 124px; width: 100%; padding: 0 18px; border: 2px solid transparent; border-radius: 26px; background: var(--cream-2); color: var(--navy); font: inherit; outline: none; box-shadow: 0 8px 22px rgba(18, 16, 12, 0.06); padding-block: 16px; resize: vertical; }

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  border-color: var(--navy);
}

.form-note {
  margin: 0;
  font-size: 0.94rem;
}

.contact-enquiry-section {
  background: #f1ece4;
}

.contact-enquiry-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: stretch;
}

.contact-direct-panel {
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-md);
  background: var(--navy);
  color: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow);
}

.contact-direct-panel h2 {
  margin: 8px 0 18px;
  color: var(--white);
}

.contact-direct-intro {
  max-width: 48ch;
  color: rgba(255, 255, 255, 0.82);
}

.contact-method-list {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

.contact-method {
  display: grid;
  gap: 5px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  text-decoration: none;
}

a.contact-method:hover {
  border-color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.14);
}

.contact-method span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-method strong {
  overflow-wrap: anywhere;
  color: var(--white);
  line-height: 1.45;
}

.contact-quote-form {
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid #c4cbc7;
  background: #ffffff;
}

.contact-form-heading h2 {
  margin: 8px 0 12px;
  color: var(--navy);
}

.contact-form-heading > p:last-child {
  max-width: 58ch;
  color: #46534e;
}

.contact-form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.contact-field-wide {
  grid-column: 1 / -1;
}

.contact-quote-form label {
  color: #102f27;
}

.contact-quote-form input,
.contact-quote-form select,
.contact-quote-form textarea {
  border: 2px solid #66766f;
  background: #ffffff;
  color: #102f27;
  box-shadow: none;
}

.contact-quote-form input::placeholder,
.contact-quote-form textarea::placeholder {
  color: #59655f;
  opacity: 1;
}

.contact-quote-form input:hover,
.contact-quote-form select:hover,
.contact-quote-form textarea:hover {
  border-color: #354b43;
}

.contact-quote-form input:focus,
.contact-quote-form select:focus,
.contact-quote-form textarea:focus {
  border-color: #a95600;
  outline: 3px solid rgba(214, 116, 20, 0.3);
  outline-offset: 2px;
}

.contact-quote-form .form-note {
  color: #46534e;
}

@media (max-width: 860px) {
  .contact-enquiry-grid,
  .contact-form-fields {
    grid-template-columns: 1fr;
  }

  .contact-field-wide {
    grid-column: auto;
  }
}

.sticky-whatsapp {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(18, 16, 12, 0.26);
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.sticky-whatsapp svg {
  width: 32px;
  height: 32px;
}

.sticky-whatsapp:hover {
  background: #1ebe5d;
  box-shadow: 0 16px 34px rgba(18, 16, 12, 0.32);
  transform: translateY(-3px);
}

.sticky-whatsapp:active {
  transform: translateY(0) scale(0.96);
}

.sticky-whatsapp:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 4px;
}

@media (max-width: 1279px) {

  .site-nav .nav-dropdown {
    padding-block: 0;
  }

  .site-nav .dropdown-panel {
    position: static;
    min-width: 0;
    margin-top: 8px;
    padding: 0 0 0 12px;
    border: 0;
    border-left: 2px solid rgba(18, 16, 12, 0.1);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .site-nav .dropdown-panel a {
    padding: 6px 0;
  }

  .site-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  .menu-toggle {
    display: block;
  }
}

@media (max-width: 980px) {.site-nav { width: min(390px, 88vw); max-height: calc(100dvh - var(--header-height)); overflow-y: auto; overscroll-behavior: contain; padding: 24px; border-radius: 0 0 0 30px; inset: var(--header-height) 0 auto auto; align-content: start; gap: 18px; position: fixed; display: grid; background: var(--cream-2); box-shadow: -24px 24px 70px rgba(18, 16, 12, 0.18); opacity: 0; pointer-events: none; transform: translateX(100%); transition: opacity 220ms ease, transform 260ms ease; }

  .site-nav .nav-dropdown {
    padding-block: 0;
  }

  .site-nav .dropdown-panel {
    position: static;
    min-width: 0;
    margin-top: 8px;
    padding: 0 0 0 12px;
    border: 0;
    border-left: 2px solid rgba(18, 16, 12, 0.1);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .site-nav .dropdown-panel a {
    padding: 6px 0;
  }

  .site-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  .menu-toggle {
    display: block;
  }

  .split-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .page-hero .container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .portfolio-hero-grid {
    grid-template-columns: 1fr;
  }

  .corporate-customers-heading {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }

  .corporate-customers-heading h2 {
    max-width: none;
  }

  .client-logo-marquee {
    --client-logo-width: calc((100vw - 82px) / 3);
  }
  .service-detail-grid,
  .menu-grid,
  .benefit-grid,
  .product-photo-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .portfolio-contents-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-index-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .portfolio-index-image {
    align-self: center;
  }

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

@media (max-width: 640px) {
  .client-slide:has(figcaption){
    aspect-ratio: 4 / 3;
  }

  .event-space-slide figcaption {
    gap: 6px;
    padding: 28px 52px;
  }

  .brand img {
    width: 118px;
  }

  .page-hero {
    padding-top: 42px;
    padding-bottom: clamp(34px, 4vw, 54px);
  }

  .page-hero h1 {
    max-width: 10ch;
    font-size: clamp(2.95rem, 15vw, 4.6rem);
  }

  .page-hero .hero-text {
    max-width: 560px;
    font-size: 1rem;
  }

  .page-hero .hero-actions .button {
    width: 100%;
  }
  .service-detail-grid,
  .menu-grid,
  .benefit-grid,
  .product-photo-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .festive-page .service-detail-grid {
    grid-template-columns: 1fr;
  }

  .client-carousel-track {
    grid-auto-columns: 100%;
    gap: 14px;
  }

  .client-carousel-controls {
    justify-content: space-between;
  }

  .client-carousel-controls button {
    min-width: 0;
    flex: 0 0 auto;
  }

  .client-logo-marquee {
    --client-logo-width: calc((100vw - 42px) / 2);
  }

  .client-logo {
    height: 112px;
    padding: 20px;
  }

  .client-impact-grid {
    grid-template-columns: 1fr;
    padding-top: 18px;
  }

  .client-impact-stat {
    padding-block: 24px;
  }

  .client-impact-stat + .client-impact-stat::before {
    top: 0;
    right: 10%;
    bottom: auto;
    left: 10%;
    width: auto;
    height: 1px;
  }

  .corporate-benefit-grid {
    grid-template-columns: 1fr;
  }

  .inline-cta,
  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .button,
  .nav-cta {
    width: 100%;
  }

  .portfolio-index-image {
    max-width: 200px;
  }

  .portfolio-title-link {
    width: 100%;
  }

  .portfolio-title-pill {
    padding-inline: 14px;
    font-size: clamp(1.35rem, 7vw, 2rem);
  }

  .menu-tabs {
    gap: 18px;
  }

  .menu-tab span {
    font-size: 0.85rem;
  }

  .portfolio-photo-masonry {
    grid-template-columns: 1fr;
  }

  .sticky-whatsapp {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 980px) {

  .page-hero {
    background-image:
      linear-gradient(180deg, rgba(30, 26, 27, 0.8) 0%, rgba(30, 26, 27, 0.68) 48%, rgba(30, 26, 27, 0.42) 100%),
      var(--page-hero-image, url("assets/catering-buffet-hero.webp"));
    background-position: center;
  }
}

/* Final mobile guards: page-specific rules above must not undo readable type. */
@media (max-width: 980px) {
  h1,
  .page-hero h1,
  .legacy-hero h1 {
    max-width: 16ch;
    font-size: clamp(2.4rem, 11vw, 3.7rem);
    line-height: 1.02;
    overflow-wrap: normal;
  }

  h2,
  .section-heading h2 {
    font-size: clamp(2rem, 8.5vw, 3rem);
    line-height: 1.08;
    overflow-wrap: normal;
  }

  h3 {
    font-size: clamp(1.4rem, 6vw, 2rem);
    line-height: 1.16;
    overflow-wrap: normal;
  }

  .mobile-menu-panel a,
  .site-nav a {
    overflow-wrap: normal;
  }
}

@media (max-width: 640px) {.site-shell,.container { width: min(100% - 32px, 1240px); }
  .page-hero {
    min-height: 0;
    padding-block: 48px 56px;
  }
}

.testing-hero {
  position: relative;
  min-height: 92dvh;
  display: grid;
  align-items: center;
  padding: clamp(92px, 9vw, 142px) 0 clamp(54px, 7vw, 110px);
}

.testing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 8px;
}

.testing-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 999px;
  padding: 0 22px;
  border: 1px solid var(--testing-line);
  color: var(--testing-cream);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease;
}

.testing-button:hover {
  transform: translateY(-2px);
  border-color: rgba(244, 234, 216, 0.36);
}

.testing-button:active {
  transform: translateY(1px) scale(0.985);
}

.testing-button-primary {
  border-color: transparent;
  background: var(--testing-accent);
  color: #160f0c;
}

.testing-button-ghost {
  background: rgba(244, 234, 216, 0.06);
}

@keyframes testing-panel-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes testing-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - 9px));
  }
}

@media (prefers-reduced-motion: reduce) {
}

@media (max-width: 1100px) {
}

@media (max-width: 760px) {

  .testing-hero {
    min-height: 0;
    padding-block: 78px 46px;
  }
}
.testing-button{
  font-family: var(--font-primary);
}
.testing-button{
  font-weight: 600;
}

.testing-hero {
  --hero-scale: 2.35;
  --hero-main-opacity: 1;
  --hero-gallery-opacity: 0;
  --hero-copy-opacity: 1;
  --hero-overlay-opacity: 0.34;
  position: relative;
  width: 100%;
  height: 300vh;
  min-height: 0;
  padding: 0;
  overflow: clip;
  background: #0f1512;
}

.testing-hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(13, 51, 42, 0.42), transparent 34rem),
    linear-gradient(180deg, #0d1512 0%, #101712 100%);
}

.testing-hero-gallery {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: clamp(10px, 1vw, 16px);
  padding: clamp(12px, 1.25vw, 20px);
  transform: scale(var(--hero-scale));
  transform-origin: center;
  opacity: var(--hero-gallery-opacity, 0);
  transition: transform 80ms linear, opacity 80ms linear;
  will-change: transform, opacity;
}

/* Wrapper carries the FLIP translate/scale that shrinks the full-bleed
   photo into its grid slot, and clips it. The <img> inside gets its own
   counter-scale (applied in JS) so the photo itself never gets stretched
   when the wrapper's scaleX/scaleY diverge (e.g. shrinking into the tall,
   short cells of the mobile single-column layout) — without that, the
   photo visibly squashes non-uniformly, then "pops" back to its correct
   proportions the instant it fades into the identical, undistorted static
   grid cell underneath. */
.testing-hero-main-photo-clip {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  overflow: hidden;
  transform-origin: 0 0;
  pointer-events: none;
  will-change: opacity, transform;
}

.testing-hero-main-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center;
  will-change: transform;
}

.testing-gallery-cell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(244, 239, 228, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(244, 239, 228, 0.08), transparent 34%),
    radial-gradient(circle at 70% 24%, rgba(182, 216, 168, 0.32), transparent 32%),
    linear-gradient(135deg, #283b31 0%, #14211b 54%, #09100d 100%);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.28);
  transform: translate3d(0, 0, 0);
}

.testing-gallery-cell img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(calc(1.04 - var(--hero-progress, 0) * 0.04));
  transition: transform 80ms linear;
}

.testing-gallery-cell.cell-1 {
  background-image:
    linear-gradient(180deg, rgba(5, 10, 8, 0.08), rgba(5, 10, 8, 0.42)),
    url("assets/catering-buffet-hero.webp");
  background-position: center;
  background-size: cover;
}

.testing-gallery-cell.cell-2 {
  background-image:
    linear-gradient(180deg, rgba(5, 10, 8, 0.08), rgba(5, 10, 8, 0.42)),
    url("assets/canape_1.webp");
  background-position: center;
  background-size: cover;
}

.testing-gallery-cell.cell-3 {
  background-image:
    linear-gradient(180deg, rgba(5, 10, 8, 0.08), rgba(5, 10, 8, 0.42)),
    url("assets/AnnualDinner_4.webp");
  background-position: center;
  background-size: cover;
}

.testing-gallery-cell.cell-4 {
  background-image:
    linear-gradient(180deg, rgba(5, 10, 8, 0.08), rgba(5, 10, 8, 0.42)),
    url("assets/DSC09841.webp");
  background-position: center;
  background-size: cover;
}

.testing-gallery-cell.cell-5 {
  background-image:
    linear-gradient(180deg, rgba(5, 10, 8, 0.04), rgba(5, 10, 8, 0.34)),
    url("assets/catering-wedding-banquet.webp");
  background-position: center;
  background-size: cover;
}

.testing-gallery-cell.cell-6 {
  background-image:
    linear-gradient(180deg, rgba(5, 10, 8, 0.08), rgba(5, 10, 8, 0.42)),
    url("assets/DSC_0272.webp");
  background-position: center;
  background-size: cover;
}

.testing-gallery-cell.cell-7 {
  background-image:
    linear-gradient(180deg, rgba(5, 10, 8, 0.08), rgba(5, 10, 8, 0.42)),
    url("assets/Wedding_20230721-0241-1.webp");
  background-position: center;
  background-size: cover;
}

.testing-gallery-cell.cell-8 {
  background-image:
    linear-gradient(180deg, rgba(5, 10, 8, 0.08), rgba(5, 10, 8, 0.42)),
    url("assets/Bday_4.webp");
  background-position: center;
  background-size: cover;
}

.testing-gallery-cell.cell-9 {
  background-image:
    linear-gradient(180deg, rgba(5, 10, 8, 0.08), rgba(5, 10, 8, 0.42)),
    url("assets/MusicRelease_4.webp");
  background-position: center;
  background-size: cover;
}

.testing-gallery-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 8, 6, 0.02), rgba(3, 8, 6, 0.24)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 18px);
}

.testing-gallery-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.16) 45%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.testing-gallery-cell:hover::after {
  transform: translateX(120%);
}

.testing-gallery-cell span {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1;
  color: rgba(244, 239, 228, 0.88);
  font-family: var(--font-primary);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: calc(0.2 + var(--hero-progress, 0) * 0.8);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28);
}

.testing-gallery-cell.is-main {
  background:
    linear-gradient(145deg, rgba(244, 239, 228, 0.08), transparent 34%),
    radial-gradient(circle at 50% 22%, rgba(182, 216, 168, 0.42), transparent 28%),
    linear-gradient(145deg, #47614e 0%, #1d3128 50%, #0c1511 100%);
}

.testing-image-overlay-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(5, 10, 8, 0.04), rgba(5, 10, 8, var(--hero-overlay-opacity))),
    linear-gradient(180deg, rgba(5, 10, 8, 0.28), rgba(5, 10, 8, 0.06) 48%, rgba(5, 10, 8, 0.36));
  transition: background 80ms linear;
}

.testing-hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 96px 24px 48px;
  text-align: center;
  opacity: var(--hero-copy-opacity);
  transform: scale(calc(1 - var(--hero-progress, 0) * 0.18)) translateY(calc(var(--hero-progress, 0) * -5vh));
  transform-origin: center;
  transition: opacity 80ms linear, transform 80ms linear;
  pointer-events: none;
}

.testing-hero-content-inner {
  width: min(100%, 780px);
  display: grid;
  justify-items: center;
  gap: 18px;
  pointer-events: auto;
}

.testing-hero-content h1 {
  max-width: 11ch;
  color: var(--testing-cream);
  font-size: clamp(4.4rem, 9vw, 9.4rem);
  line-height: 0.92;
  text-align: center;
}

.testing-hero-content p {
  max-width: 37rem;
  color: rgba(244, 239, 228, 0.88);
  font-size: clamp(0.96rem, 1.3vw, 1.1rem);
}

.testing-hero-content .testing-actions {
  justify-content: center;
}

.testing-button {
  font-size: 1.08rem;
  letter-spacing: 0.02em;
}

.testing-button-primary {
  background: var(--testing-accent);
  color: #0d332a;
}

.testing-button-ghost {
  background: rgba(244, 239, 228, 0.07);
}

@media (prefers-reduced-motion: reduce) {
  .testing-hero {
    height: auto;
  }

  .testing-hero-stage {
    position: relative;
  }

  .testing-hero-gallery {
    transform: scale(1);
  }

  .testing-hero-content {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 760px) {
  .testing-hero {
    height: 185vh;
  }

  .testing-hero-stage {
    min-height: 100svh;
  }

  .testing-hero-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 1fr);
    transform: scale(calc(1.8 + (var(--hero-scale) - 1) * 0.18));
  }

  .testing-gallery-cell:nth-child(n+6) {
    display: none;
  }

  .testing-hero-content h1 {
    max-width: 8.5ch;
    font-size: clamp(3.7rem, 17vw, 6rem);
  }
}

/* Same fix as .home-page::after: keep the cursor-follow glow off the page's
   own (full scrollable height) background and on a fixed, viewport-sized
   layer instead{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(249, 165, 26, 0.14), transparent 30rem);
}

.testing-hero-stage {
  background:
    url("assets/catering-wedding-banquet.webp") center / cover no-repeat,
    radial-gradient(circle at 50% 48%, rgba(249, 165, 26, 0.16), transparent 34rem),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
}

.testing-image-overlay-layer {
  background:
    radial-gradient(circle at center, rgba(5, 10, 8, 0.02), rgba(5, 10, 8, var(--hero-overlay-opacity))),
    linear-gradient(180deg, rgba(5, 10, 8, 0.18), rgba(5, 10, 8, 0.03) 48%, rgba(5, 10, 8, 0.24));
}

.testing-button-primary {
  background: var(--testing-accent);
  color: var(--navy);
}

.testing-button-ghost {
  background: rgba(255, 250, 240, 0.12);
  color: #fffaf0;
}

/* Testing hero: show original photos on first screen without dark photo overlays. */
.testing-hero {
  --hero-overlay-opacity: 0;
  --hero-scale: 3.2;
  --hero-main-opacity: 1;
  --hero-gallery-opacity: 0;
  background: var(--cream);
}

.testing-gallery-cell {
  background-color: var(--cream-2);
}

.testing-gallery-cell.cell-1 {
  background-image: url("assets/catering-buffet-hero.webp");
}

.testing-gallery-cell.cell-2 {
  background-image: url("assets/canape_1.webp");
}

.testing-gallery-cell.cell-3 {
  background-image: url("assets/AnnualDinner_4.webp");
}

.testing-gallery-cell.cell-4 {
  background-image: url("assets/DSC09841.webp");
}

.testing-gallery-cell.cell-5 {
  background-image: url("assets/catering-wedding-banquet.webp");
}

.testing-gallery-cell.cell-6 {
  background-image: url("assets/DSC_0272.webp");
}

.testing-gallery-cell.cell-7 {
  background-image: url("assets/Wedding_20230721-0241-1.webp");
}

.testing-gallery-cell.cell-8 {
  background-image: url("assets/Bday_4.webp");
}

.testing-gallery-cell.cell-9 {
  background-image: url("assets/MusicRelease_4.webp");
}

.testing-gallery-cell.is-main {
  background-color: var(--cream-2);
}

.testing-gallery-cell::before,
.testing-image-overlay-layer {
  background: transparent;
}

.testing-hero-content h1,
.testing-hero-content p {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

/* Testing hero: return to the Urban Restaurant style single-gallery zoom. */
.testing-hero {
  --hero-scale: 3.2;
  --hero-main-opacity: 0;
  --hero-gallery-opacity: 1;
  --hero-copy-opacity: 1;
  --hero-overlay-opacity: 0;
  height: 300vh;
  background: var(--cream);
}

.testing-hero-stage {
  background: var(--cream);
}

.testing-hero-main-photo-clip {
  display: none;
}

.testing-hero-gallery {
  z-index: 0;
  gap: 1rem;
  padding: 0;
  opacity: 1;
  transform: scale(var(--hero-scale));
  transition: transform 80ms linear;
}

.testing-gallery-cell {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-position: center;
  background-size: cover;
}

.testing-gallery-cell img {
  transform: none;
}

.testing-gallery-cell span,
.testing-gallery-cell::before,
.testing-gallery-cell::after,
.testing-image-overlay-layer {
  display: none;
}

.testing-hero-content {
  z-index: 2;
  opacity: var(--hero-copy-opacity);
  transform: scale(calc(1 - var(--hero-progress, 0) * 0.1)) translateY(calc(var(--hero-progress, 0) * -3vh));
}

.testing-hero-content h1 {
  max-width: 12ch;
  color: var(--cream);
  font-size: clamp(4rem, 8.6vw, 8.8rem);
  line-height: 0.9;
}

.testing-hero-content p {
  color: rgba(255, 253, 246, 0.9);
}

@media (max-width: 760px) {
  .testing-hero {
    height: 240vh;
  }

  .testing-hero-gallery {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    transform: scale(calc(2.35 - var(--hero-progress, 0) * 1.35));
  }

  .testing-gallery-cell:nth-child(n+6) {
    display: block;
  }
}

/* Testing hero: closer Urban Restaurant opening frame and zoom-out gallery. */
.testing-hero {
  /* An earlier design pass left `display: grid; align-items: center;` active
     on this selector, which vertically centers the 100vh sticky stage inside
     this 300vh wrapper instead of anchoring it to the top — breaking the
     sticky pin outright. Reset back to normal block flow. */
  display: block;
  align-items: normal;
  height: 300vh;
  background: var(--cream);
}

.testing-hero-stage {
  height: 100dvh;
  min-height: 620px;
  background: var(--cream);
}

.testing-hero-main-photo-clip {
  display: block;
  transform-origin: 0 0;
  transition: none;
}

.testing-hero-main-photo {
  transform-origin: center;
  transition: none;
}

.testing-hero-gallery {
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  gap: 1rem;
  padding: 0;
  opacity: 1;
  transform: none;
  transition: none;
}

.testing-gallery-cell.cell-5,
.testing-gallery-cell.is-main {
  background-image: url("assets/catering-wedding-banquet.webp");
  background-position: center;
  background-size: cover;
}

.testing-gallery-cell {
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background-position: center;
  background-size: cover;
  box-shadow: none;
  will-change: opacity, transform;
}

.testing-gallery-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}

.testing-gallery-cell span,
.testing-gallery-cell::before,
.testing-gallery-cell::after {
  display: none;
}

.testing-image-overlay-layer {
  z-index: 1;
  display: block;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(61, 36, 16, 0.58) 0%, rgba(169, 79, 0, 0.3) 38%, rgba(255, 247, 232, 0.08) 74%, rgba(255, 247, 232, 0) 100%),
    linear-gradient(180deg, rgba(255, 247, 232, 0.06) 0%, rgba(249, 165, 26, 0.05) 42%, rgba(61, 36, 16, 0.28) 100%);
  opacity: 1;
  transition: opacity 0.25s ease;
  will-change: opacity;
}

.testing-hero-content {
  z-index: 2;
  opacity: 1;
  transform: none;
  transition: none;
  will-change: opacity, transform;
}

.testing-hero-content-inner {
  gap: clamp(14px, 1.7vw, 22px);
}

.testing-hero-content h1 {
  max-width: 15ch;
  color: var(--cream);
  font-size: clamp(3rem, 7vw, 7.4rem);
  line-height: 0.92;
  text-shadow: 0 2px 22px rgba(13, 51, 42, 0.42);
}

.testing-hero-content p {
  max-width: 42rem;
  color: rgba(255, 253, 246, 0.92);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  text-shadow: 0 1px 18px rgba(13, 51, 42, 0.42);
}

.testing-hero-content p strong {
  color: var(--cream);
  font-weight: 700;
}

@media (max-width: 760px) {
  .testing-hero {
    height: 250vh;
  }

  .testing-hero-stage {
    min-height: 100svh;
  }

  .testing-hero-gallery {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    opacity: 1;
    transform: none;
  }

  .testing-gallery-cell:nth-child(n+6) {
    display: block;
  }

  .testing-hero-content h1 {
    max-width: 12ch;
    font-size: clamp(2.7rem, 12vw, 4.6rem);
  }
}

@media (max-width: 760px) {
  .home-gallery-hero .testing-hero-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
  }

  .home-gallery-hero .testing-gallery-cell {
    display: none;
  }

  .home-gallery-hero .testing-gallery-cell.cell-2,
  .home-gallery-hero .testing-gallery-cell.cell-5,
  .home-gallery-hero .testing-gallery-cell.cell-8 {
    display: block;
  }

  .home-gallery-hero .testing-gallery-cell.cell-2 {
    grid-column: 1;
    grid-row: 1;
  }

  .home-gallery-hero .testing-gallery-cell.cell-5 {
    grid-column: 1;
    grid-row: 2;
  }

  .home-gallery-hero .testing-gallery-cell.cell-8 {
    grid-column: 1;
    grid-row: 3;
  }
}

.warm-gradient-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(249, 165, 26, 0.18), rgba(255, 247, 232, 0.08) 18rem, transparent 34rem),
    radial-gradient(circle at calc(var(--cursor-x) + 18rem) calc(var(--cursor-y) + 10rem), rgba(255, 247, 232, 0.18), transparent 24rem);
}

.warm-gradient-page > section {
  position: relative;
  z-index: 1;
}

.warm-gradient-page > .section:not(.page-hero):not(.section-muted):not(.final-cta),
.warm-gradient-page > .section-space:not(.page-hero):not(.section-muted):not(.final-cta),
.warm-gradient-page > .contact-enquiry-section,
.warm-gradient-page > .corporate-customers {
  background: transparent;
}

.warm-gradient-page > .section-muted {
  background:
    radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(255, 247, 232, 0.34), transparent 28rem),
    rgba(255, 230, 184, 0.68);
}

.warm-gradient-page > .section-muted .section-divider {
  background-color: rgba(255, 230, 184, 0.68);
}

.warm-gradient-page > .final-cta {
  background: rgba(76, 67, 69, 0.96);
}.home-page::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(249, 165, 26, 0.22), rgba(255, 247, 232, 0.08) 18rem, transparent 34rem),
    radial-gradient(circle at calc(var(--cursor-x) + 18rem) calc(var(--cursor-y) + 10rem), rgba(255, 247, 232, 0.2), transparent 24rem); }

.home-page > section {
  position: relative;
  z-index: 1;
}.warm-gradient-page { --cursor-x: 50%; --cursor-y: 18%; position: relative; overflow: clip; isolation: isolate; background: radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(249, 165, 26, 0.2), transparent 31rem),
    radial-gradient(circle at calc(var(--cursor-x) + 18rem) calc(var(--cursor-y) + 22rem), rgba(255, 230, 184, 0.28), transparent 30rem),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 48%, var(--warm-tint) 100%); font-family: var(--font-primary); }

.warm-gradient-page :is(h1, h2) {
  font-family: var(--font-secondary);
}

.warm-gradient-page :is(h3, h4, h5, h6, button, .button, .pill-button) {
  font-family: var(--font-primary);
}

.warm-gradient-page :is(h1, h2) {
  font-weight: 400;
}

.warm-gradient-page :is(h3, h4, h5, h6) {
  font-weight: 600;
}

.warm-gradient-page :is(button, .button, .pill-button) {
  font-weight: 600;
}

.warm-gradient-page :is(p, li, label, input, select, textarea) {
  font-family: var(--font-primary);
}

@media (prefers-reduced-motion: reduce) {
  .testing-hero {
    height: auto;
  }

  .testing-hero-stage {
    position: relative;
  }

  .testing-hero-main-photo-clip {
    display: none;
  }

  .testing-hero-gallery {
    gap: 16px;
    opacity: 1;
    transform: scale(1);
  }

  .testing-hero-content {
    opacity: 1;
    transform: none;
  }

  .testing-image-overlay-layer {
    background:
      linear-gradient(180deg, rgba(61, 36, 16, 0.38) 0%, rgba(169, 79, 0, 0.16) 38%, rgba(61, 36, 16, 0.34) 100%),
      linear-gradient(90deg, rgba(61, 36, 16, 0.28) 0%, rgba(255, 247, 232, 0.04) 100%);
  }
}

.corporate-difference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}

.corporate-difference-card {
  display: grid;
  gap: 14px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(169, 79, 0, 0.14);
  border-radius: 22px;
  background: rgba(255, 253, 246, 0.9);
  box-shadow: 0 16px 40px rgba(18, 16, 12, 0.08);
}

.corporate-difference-card .card-icon {
  width: 48px;
  height: 48px;
  background: var(--orange);
  color: var(--navy);
  font-size: 0.95rem;
}

.corporate-difference-card h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  line-height: 1.12;
}

.corporate-difference-card p {
  margin: 0;
  color: var(--blue-grey);
  font-size: clamp(0.94rem, 1vw, 1.02rem);
  line-height: 1.62;
}

.corporate-difference-note {
  margin: clamp(24px, 3vw, 34px) 0 0;
  color: var(--navy);
  font-size: clamp(1.16rem, 2vw, 1.55rem);
  font-weight: 700;
  line-height: 1.35;
}

.corporate-final-cta {
  padding-top: 0;
}

.corporate-final-cta-panel {
  display: grid;
  justify-items: start;
  gap: clamp(18px, 2.4vw, 26px);
  padding: clamp(30px, 5vw, 58px);
  overflow: hidden;
  border: 1px solid rgba(169, 79, 0, 0.16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(249, 165, 26, 0.24), transparent 38%),
    rgba(255, 253, 246, 0.92);
  box-shadow: 0 18px 50px rgba(18, 16, 12, 0.1);
}

.corporate-final-cta-panel h2 {
  max-width: 12ch;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
}

.corporate-final-cta-panel p {
  max-width: 760px;
  margin: 0;
  color: var(--blue-grey);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.7;
}

@media (max-width: 767px) {
  .corporate-difference-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1080px) {

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

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

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

.wedding-event-page .page-hero .hero-actions {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
}

.wedding-event-page .page-hero .hero-actions .button {
  width: auto;
  min-width: max-content;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .wedding-simple-heading h2 {
    max-width: 100%;
  }

  .wedding-style-section {
    padding-block: 54px;
  }

  .wedding-style-heading h2 {
    max-width: 100%;
  }

  .wedding-style-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .wedding-style-photo {
    order: -1;
    min-height: 220px;
  }

  .wedding-style-card:nth-child(even) .wedding-style-photo {
    order: -1;
  }

  .wedding-style-card:nth-child(even) .wedding-style-content {
    order: 0;
  }

  .wedding-style-content {
    gap: 18px;
  }

  .wedding-touch-section {
    padding-block: 54px;
  }

  .wedding-touch-heading h2 {
    max-width: 100%;
  }

  .wedding-touch-grid {
    grid-template-columns: 1fr;
  }

  .wedding-touch-card {
    min-height: 0;
  }

  .wedding-how-section {
    padding-block: 54px;
  }

  .wedding-how-heading h2 {
    max-width: 100%;
  }

  .wedding-how-grid {
    grid-template-columns: 1fr;
  }

  .wedding-how-card {
    min-height: 0;
  }

  .wedding-how-cta .button {
    width: 100%;
  }

  .wedding-proof-section {
    padding-block: 54px;
  }

  .wedding-proof-heading h2 {
    max-width: 100%;
  }

  .wedding-proof-grid {
    grid-template-columns: 1fr;
  }

  .wedding-trust-proof-section {
    padding-block: 54px;
  }
}

/* Shared semantic and responsive safeguards for every current and migrated page. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

main :where(section, article, div, figure, form, fieldset) {
  min-width: 0;
}

main :where(img, video, iframe, svg, canvas) {
  max-width: 100%;
}

main :where(h1, h2, h3, p, li, a, button, summary, label) {
  overflow-wrap: break-word;
}

main :where(h1, h2, h3) {
  text-wrap: balance;
}

@media (max-width: 640px) {
  main :where(.button, button, input, select, textarea) {
    max-width: 100%;
  }
}

/* Keep the closed off-canvas navigation inside the viewport's scroll bounds. */
@media (max-width: 1279px) {.site-nav { position: fixed; inset: var(--header-height) 0 auto auto; display: grid; width: min(390px, 88vw); padding: 24px; gap: 18px; border-radius: 0 0 0 30px; background: var(--cream-2); box-shadow: -24px 24px 70px rgba(18, 16, 12, 0.18); opacity: 0; pointer-events: none; transform: translateX(0); transition: opacity 220ms ease, transform 260ms ease; visibility: hidden; }

  .site-nav.is-open {
    visibility: visible;
    transform: translateX(0);
  }
}

@media (max-width: 900px) {
  .birthday-difference-section {
    padding-block: 56px;
  }

  .birthday-difference-intro h2 {
    max-width: 100%;
  }

  .birthday-experience-list {
    gap: 24px;
  }

  .birthday-experience-row {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 18px;
    border-radius: 22px;
  }

  .birthday-experience-row-reverse figure {
    order: 0;
  }

  .birthday-experience-row figure,
  .birthday-parent-row figure {
    min-height: 300px;
    height: min(76vw, 480px);
    border-radius: 18px;
  }

  .birthday-experience-copy h3 {
    max-width: none;
  }

  .birthday-parent-row {
    padding: 18px;
    border-radius: 22px;
  }

  .birthday-style-section {
    padding-block: 56px;
  }

  .birthday-style-heading h2 {
    max-width: 100%;
  }

  .birthday-style-item {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .birthday-style-best {
    grid-column: 2;
  }

  .birthday-brand-section {
    padding-block: 56px;
  }

  .birthday-brand-heading h2 {
    max-width: 100%;
  }

  .birthday-brand-pillars {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .birthday-brand-pillar > span {
    margin-bottom: 24px;
  }

  .birthday-brand-pillar strong {
    min-height: 0;
  }

  .birthday-brand-highlight {
    grid-template-columns: 1fr;
    border-radius: 20px;
  }

  .birthday-how-section {
    padding-block: 56px;
  }

  .birthday-how-heading h2 {
    max-width: 100%;
  }

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

  .birthday-faq-section {
    padding-block: 56px;
  }

  .birthday-faq-heading {
    position: static;
  }

  .birthday-faq-heading h2 {
    max-width: 100%;
  }

  .birthday-final-cta {
    padding-block: 56px;
  }

  .birthday-final-cta-panel {
    grid-template-columns: 1fr;
    border-radius: 20px;
  }

  .birthday-final-cta-photo {
    min-height: 320px;
    height: 70vw;
    max-height: 480px;
  }
}

@media (max-width: 520px) {
  .birthday-experience-copy .button {
    width: 100%;
  }


  .birthday-style-item {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .birthday-style-number,
  .birthday-style-best {
    grid-column: auto;
  }

  .birthday-style-copy .button {
    width: 100%;
  }

  .birthday-how-steps {
    grid-template-columns: 1fr;
  }

  .birthday-how-step {
    min-height: 0;
  }

  .birthday-how-actions {
    display: grid;
  }

  .birthday-how-actions .button {
    width: 100%;
  }

  .birthday-final-cta-copy {
    padding: 30px 22px;
  }

  .birthday-final-cta-copy .button {
    width: 100%;
  }
}

/* Tea break product page */
.tea-break-hero {
  background-image: linear-gradient(90deg, rgba(29, 25, 21, 0.88), rgba(29, 25, 21, 0.28)), url("/assets/catering-teatime.webp");
  background-position: center;
  background-size: cover;
}

.tea-break-hero .container {
  max-width: 760px;
  margin-left: max(0px, calc((100vw - 1200px) / 2));
}

.tea-break-hero-highlight {
  margin: 22px 0 6px;
  color: #fff;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
}

.tea-break-options,
.tea-break-upgrade-section,
.tea-break-faq-section {
  background: #fffdf6;
  color: var(--blue-grey);
}

.tea-break-menu-section{
  background: #fff7e8;
  color: var(--blue-grey);
}

.tea-break-heading {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}

.tea-break-heading h2,
.tea-break-format h3,
.tea-break-upgrade-section h2,
.tea-break-upgrade-section h3,
.tea-break-faq-section h2,
.tea-break-faq-section h3 {
  color: var(--navy);
}

.tea-break-format-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 510px);
  gap: 20px;
  align-items: stretch;
}

.tea-break-format {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(99, 87, 71, 0.14);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--soft-shadow);
}

.tea-break-format > img {
  width: 100%;
  height: 100%;
  min-height: 390px;
  object-fit: cover;
}

.tea-break-format > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: clamp(20px, 2.2vw, 28px);
}

.tea-break-format > div > h3:first-child {
  margin-bottom: 2px;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.25;
}

.tea-break-format > div > h3:not(:first-child),
.tea-break-format h4 {
  margin: 20px 0 8px;
  color: var(--navy);
  font-family: var(--font-primary);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tea-break-format ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
  margin: 0 0 14px;
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 1.45;
}

.tea-break-format-tagline {
  display: block;
  margin-bottom: 20px;
  color: var(--orange-strong);
  font-size: 0.92rem;
  line-height: 1.45;
}

.tea-break-format > div > p:not(.tea-break-product-proof):not(.tea-break-product-minimum) {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
}

.tea-break-product-proof {
  margin: 9px 0;
  padding: 9px 11px;
  border-left: 3px solid var(--orange);
  background: #fff7e8;
  font-size: 0.76rem;
  line-height: 1.5;
}

.tea-break-product-minimum {
  display: grid;
  gap: 2px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(99, 87, 71, 0.14);
}

.tea-break-product-minimum span {
  color: var(--orange-strong);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tea-break-product-minimum strong {
  color: var(--navy);
  font-size: 1.08rem;
}

.tea-break-format .button {
  align-self: flex-start;
  margin-top: 12px;
}

.tea-break-format-premium {
  grid-column: auto;
}

.tea-break-format dl {
  margin: 28px 0;
}

.tea-break-format dl > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(99, 87, 71, 0.14);
}

.tea-break-format dt {
  color: var(--orange-strong);
  font-weight: 700;
}

.tea-break-format dd {
  margin: 0;
}

.tea-break-menu-journeys {
  display: grid;
  gap: 34px;
}

.tea-break-menu-journey {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--soft-shadow);
}

.tea-break-menu-journey-western {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.tea-break-menu-journey-western .tea-break-menu-gallery {
  order: 2;
}

.tea-break-menu-gallery {
  display: block;
  min-height: 760px;
  padding: 8px;
}

.tea-break-menu-gallery img {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 20px;
  object-fit: cover;
}

.tea-break-menu-copy {
  padding: clamp(32px, 5vw, 58px);
}

.tea-break-menu-copy > strong {
  display: block;
  margin-bottom: 18px;
  color: var(--orange-strong);
}

.tea-break-menu-proof,
.tea-break-box-proof {
  padding-left: 16px;
  border-left: 3px solid var(--orange);
  font-size: 0.88rem;
}

.tea-break-sample-menu {
  margin-top: 30px;
  padding: 26px;
  border-radius: 18px;
  background: #fff7e8;
}

.tea-break-sample-menu h4,
.tea-break-boxes h4 {
  margin: 0 0 16px;
  color: var(--navy);
  font-family: var(--font-primary);
}

.tea-break-sample-menu dl {
  margin: 0;
}

.tea-break-sample-menu dl > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(99, 87, 71, 0.12);
}

.tea-break-sample-menu dt {
  color: var(--orange-strong);
  font-weight: 700;
}

.tea-break-sample-menu dd {
  margin: 0;
}

.tea-break-sample-menu > p {
  margin: 18px 0 0;
  font-size: 0.82rem;
}

.tea-break-boxes {
  margin-top: 34px;
  padding: clamp(30px, 5vw, 54px);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--soft-shadow);
}

.tea-break-boxes-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.8fr) minmax(0, 2.2fr);
  gap: clamp(26px, 4vw, 46px);
  align-items: start;
}

.tea-break-boxes-content {
  min-width: 0;
}

.tea-break-box-facts-note {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(169, 79, 0, 0.16);
  border-radius: 22px;
  background: #fff7e8;
  box-shadow: var(--soft-shadow);
}

.tea-break-box-facts-note h3,
.tea-break-box-facts-note h4 {
  margin: 0 0 14px;
  color: var(--navy);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.25;
}

.tea-break-box-facts-note > p {
  margin: 0 0 20px;
}

.tea-break-box-facts-note ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tea-break-box-facts-note li {
  display: grid;
  gap: 4px;
  padding: 13px 0;
  border-top: 1px solid rgba(99, 87, 71, 0.14);
}

.tea-break-box-facts-note li strong {
  color: var(--orange-strong);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tea-break-box-facts-note li span {
  color: var(--navy);
  font-weight: 600;
  line-height: 1.45;
}

.tea-break-box-facts-note small {
  display: block;
  margin-top: 18px;
  color: var(--blue-grey);
  font-size: 0.78rem;
  line-height: 1.55;
}

.tea-break-boxes-heading {
  max-width: 700px;
  margin-bottom: 28px;
}

.tea-break-box-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.tea-break-box-grid article {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(99, 87, 71, 0.14);
  border-radius: 18px;
  background: #fffdf6;
}

.tea-break-box-grid img {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: 230px;
  object-fit: cover;
}

.tea-break-box-grid article > div {
  padding: 22px;
}

.tea-break-box-grid h3,
.tea-break-box-grid h4,
.tea-break-box-grid p {
  margin: 0;
}

.tea-break-box-grid h3,
.tea-break-box-grid h4 {
  margin-bottom: 8px;
  color: var(--navy);
  font-size: clamp(0.82rem, 1.2vw, 1rem);
  line-height: 1.25;
  white-space: nowrap;
}

.tea-break-box-proof {
  max-width: 840px;
  margin: 26px 0 0;
}

.tea-break-menu-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px 32px;
  margin-top: 28px;
  padding: 32px clamp(26px, 5vw, 52px);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--soft-shadow);
}

.tea-break-menu-cta h3,
.tea-break-menu-cta p {
  margin: 0;
}

.tea-break-menu-cta .button {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.tea-break-upgrade-cards {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.tea-break-upgrade-cards article {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--navy);
  box-shadow: var(--soft-shadow);
}

.tea-break-upgrade-cards article:nth-child(2) {
  margin-top: 46px;
}

.tea-break-upgrade-cards img {
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
  opacity: 0.82;
}

.tea-break-upgrade-cards article::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent, rgba(29, 25, 21, 0.92));
}

.tea-break-upgrade-cards h3 {
  position: absolute;
  z-index: 1;
  right: 26px;
  bottom: 26px;
  left: 26px;
  margin: 0;
  color: #fff;
}

.tea-break-upgrade-section {
  padding-bottom: clamp(42px, 5vw, 64px);
}

.tea-break-trust-section {
  padding-top: clamp(24px, 3vw, 38px);
  background: #fff7e8;
  color: var(--blue-grey);
}

.tea-break-counter-grid {
  margin-top: 48px;
}

.tea-break-trust-section .tea-break-counter-grid {
  margin-top: 0;
}

.tea-break-faq-section .faq-list h3 {
  margin: 0;
  font-size: inherit;
}

.tea-break-final-cta {
  color: #fff;
}

@media (max-width: 900px) {
  .tea-break-boxes-layout {
    grid-template-columns: 1fr;
  }

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

  .tea-break-upgrade-cards article:nth-child(2) {
    margin-top: 0;
  }

  .tea-break-upgrade-cards article:last-child {
    grid-column: 1 / -1;
  }

  .tea-break-format-grid{
    grid-template-columns: 1fr;
  }

  .tea-break-format-premium {
    grid-column: auto;
    display: grid;
  }

  .tea-break-format {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  }

  .tea-break-format > img,
  .tea-break-format-premium > img {
    width: 100%;
    height: 100%;
    min-height: 430px;
  }

  .tea-break-format > div,
  .tea-break-format-premium > div {
    min-height: 0;
  }

  .tea-break-menu-journey,
  .tea-break-menu-journey-western {
    grid-template-columns: 1fr;
  }

  .tea-break-menu-journey-western .tea-break-menu-gallery {
    order: 0;
  }

  .tea-break-menu-gallery {
    grid-template-columns: 1.35fr 0.65fr;
    grid-template-rows: none;
    min-height: 380px;
  }
}

@media (max-width: 640px) {
  .tea-break-format-grid {
    grid-template-rows: none;
    grid-auto-rows: auto;
  }

  .tea-break-format,
  .tea-break-format-premium {
    display: block;
  }

  .tea-break-format > img,
  .tea-break-format-premium > img {
    height: 260px;
    min-height: 0;
  }

  .tea-break-upgrade-cards{
    grid-template-columns: 1fr;
  }

  .tea-break-upgrade-cards article:last-child {
    grid-column: auto;
  }

  .tea-break-hero {
    background-position: 58% center;
  }

  .tea-break-hero .hero-actions {
    display: grid;
  }

  .tea-break-hero .button,
  .tea-break-format .button,
  .tea-break-menu-cta .button{
    width: 100%;
  }
  .tea-break-menu-cta {
    grid-template-columns: 1fr;
  }

  .tea-break-menu-cta .button {
    grid-column: auto;
    grid-row: auto;
    margin-top: 14px;
  }

  .tea-break-format dl > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .tea-break-format ul {
    grid-template-columns: 1fr;
  }

  .tea-break-menu-gallery {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .tea-break-menu-gallery img {
    height: 280px;
  }

  .tea-break-sample-menu dl > div,
  .tea-break-box-grid {
    grid-template-columns: 1fr;
  }

  .tea-break-sample-menu dl > div {
    gap: 2px;
  }
}

/* Bento and lunch box product page */
.bento-page-hero{background-image:linear-gradient(90deg,rgba(29,25,21,.88),rgba(29,25,21,.28)),url("/assets/DSC_6763.webp");background-position:center;background-size:cover}
.bento-page-hero .container{max-width:800px;margin-left:max(0px,calc((100vw - 1200px)/2))}.bento-page-hero .hero-text{max-width:740px}
.bento-heading{max-width:800px;margin:0 auto 48px;text-align:center}.bento-heading h2,.bento-value-grid h3,.bento-range-grid h3,.bento-cuisine-grid h3,.bento-more-grid h3,.bento-custom-panel h2,.bento-custom-panel h3,.bento-faq-section h2,.bento-faq-section h3{color:var(--navy)}
.bento-better-section,.bento-cuisine-section,.bento-custom-section,.bento-faq-section{background:#fffdf6;color:var(--blue-grey)}.bento-range-section,.bento-more-section{background:#fff7e8;color:var(--blue-grey)}
.bento-value-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px}.bento-value-grid article{grid-column:span 6;overflow:hidden;border-radius:26px;background:#fff;box-shadow:var(--soft-shadow)}.bento-value-grid article:first-child{grid-column:span 7}.bento-value-grid article:nth-child(2){grid-column:span 5}.bento-value-grid article:last-child{grid-column:3/span 8;display:grid;grid-template-columns:1fr 1fr}.bento-value-grid img{width:100%;height:350px;object-fit:cover}.bento-value-grid article:last-child img{height:100%;min-height:430px}.bento-value-grid article>div{padding:clamp(28px,4vw,44px)}.bento-value-grid article>div>strong,.bento-range-grid article>div>strong,.bento-more-grid article>strong{color:var(--orange-strong)}.bento-value-grid ul{columns:2;padding-left:20px}.bento-value-grid h4{color:var(--navy);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}.bento-proof{padding-left:15px;border-left:3px solid var(--orange);font-size:.86rem}.bento-value-grid blockquote,.bento-custom-panel blockquote{margin:22px 0 0;padding-left:16px;border-left:3px solid var(--orange);color:var(--navy);font-weight:700}
.bento-range-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}.bento-range-grid article{overflow:hidden;border-radius:24px;background:#fff;box-shadow:var(--soft-shadow)}.bento-range-grid article:nth-child(2){margin-top:42px}.bento-range-grid img{width:100%;height:300px;object-fit:cover}.bento-range-grid article>div{padding:30px}.bento-range-message{margin:40px auto 0;color:var(--navy);font-size:1.25rem;font-weight:700;text-align:center}.bento-cuisine-grid { grid-template-columns: repeat(2,minmax(0,1fr)); width: min(100%, 1104px); margin-inline: auto; row-gap: 38px; display: grid; gap: 20px; }.bento-cuisine-grid article{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;min-height:390px;border-radius:24px;background:#fff;box-shadow:var(--soft-shadow)}.bento-cuisine-grid img{width:100%;height:100%;object-fit:cover}.bento-cuisine-grid article>div{align-self:center;padding:30px}.bento-cuisine-highlight{margin-top:28px;text-align:center}.bento-cuisine-highlight strong{color:var(--navy);font-size:1.35rem}
.bento-more-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.bento-more-grid article{padding:clamp(28px,4vw,44px);border-radius:24px;background:#fff;box-shadow:var(--soft-shadow)}.bento-more-grid article:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px 40px}.bento-more-grid article:last-child h3,.bento-more-grid article:last-child>strong{grid-column:1/-1}.bento-more-grid .button{margin-top:18px}
.bento-custom-panel{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,7vw,80px);padding:clamp(34px,6vw,70px);border-radius:28px;background:#fff;box-shadow:var(--soft-shadow)}.bento-custom-panel ul{columns:2;padding-left:20px}.bento-custom-note{margin-top:18px;font-size:.82rem}.bento-faq-section .faq-list h3{margin:0;font-size:inherit}.bento-final-cta{color:#fff}
@media(max-width:920px){.bento-value-grid article,.bento-value-grid article:first-child,.bento-value-grid article:nth-child(2),.bento-value-grid article:last-child{grid-column:1/-1}.bento-range-grid{grid-template-columns:1fr 1fr}.bento-range-grid article:nth-child(2){margin-top:0}.bento-cuisine-grid,.bento-custom-panel{grid-template-columns:1fr}.bento-more-grid article:last-child{grid-template-columns:1fr}.bento-more-grid article:last-child h3,.bento-more-grid article:last-child>strong{grid-column:auto}}
@media(max-width:640px){.bento-page-hero{background-position:60% center}.bento-page-hero .hero-actions{display:grid}.bento-page-hero .button{width:100%}.bento-value-grid article:last-child,.bento-range-grid,.bento-cuisine-grid,.bento-cuisine-grid article,.bento-more-grid{grid-template-columns:1fr}.bento-value-grid article:last-child img{min-height:300px}.bento-value-grid ul,.bento-custom-panel ul{columns:1}.bento-cuisine-grid img{height:300px}}

/* Chinese banquet product page */
main:has(.banquet-page-hero) :where(h1,h2,h3){font-family:var(--font-primary)}.banquet-page-hero { background-image: linear-gradient(90deg,rgba(29,25,21,.9),rgba(29,25,21,.3)),url("/assets/DSC_8236.webp"); background-position: center; background-size: cover; }.banquet-page-hero .container{max-width:800px;margin-left:max(0px,calc((100vw - 1200px)/2))}.banquet-hero-highlight{margin:22px 0 28px;color:#fff;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:700}.banquet-courses-section,.banquet-service-section{background:#fff7e8;color:var(--blue-grey)}
.banquet-kitchen-section,.banquet-chef-section,.banquet-faq-section{background:#fffdf6;color:var(--blue-grey)}.banquet-heading{max-width:850px;margin:0 auto 48px;text-align:center}.banquet-heading h2,.banquet-kitchen-grid h3,.banquet-package-grid h3,.banquet-chef-copy h2,.banquet-chef-copy h3,.banquet-service-grid h3,.banquet-faq-section h2,.banquet-faq-section h3{color:var(--navy)}
.banquet-kitchen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:22px}.banquet-kitchen-grid article{overflow:hidden;border-radius:26px;background:#fff;box-shadow:var(--soft-shadow)}.banquet-kitchen-grid img{width:100%;height:220px;object-fit:cover}.banquet-kitchen-grid article>div{padding:clamp(24px,3vw,32px)}
.banquet-package-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.banquet-package-grid article{overflow:hidden;border-radius:24px;background:#fff;box-shadow:var(--soft-shadow)}.banquet-package-grid img{width:100%;height:260px;object-fit:cover}.banquet-package-grid article>div{padding:clamp(28px,4vw,46px)}.banquet-package-grid ol{padding-left:24px}.banquet-package-grid li{padding:7px 0}.banquet-chef-visual{display:grid;grid-template-columns:1.2fr .8fr;gap:10px}.banquet-chef-visual img{width:100%;height:620px;border-radius:24px;object-fit:cover}.banquet-chef-copy>strong{color:var(--orange-strong)}.banquet-chef-highlight{margin:36px 0 0;color:var(--navy);font-size:1.3rem;font-weight:700;text-align:center}
.banquet-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:18px}.banquet-service-grid article{display:flex;flex-direction:column;padding:28px;border-radius:22px;background:#fff;box-shadow:var(--soft-shadow)}.banquet-service-grid h3{margin:0 0 10px;font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.25}.banquet-faq-section .faq-list h3{margin:0;font-size:inherit}.banquet-product-final-cta{color:#fff}
@media(max-width:960px){.banquet-service-grid,.banquet-kitchen-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.banquet-page-hero{background-position:60% center}.banquet-page-hero .hero-actions{display:grid}.banquet-page-hero .button{width:100%}.banquet-kitchen-grid,.banquet-package-grid,.banquet-chef-visual,.banquet-service-grid{grid-template-columns:1fr}.banquet-chef-visual img{height:360px}}.sitdown-page-hero { background-image: linear-gradient(90deg,rgba(20,26,24,.9),rgba(20,26,24,.28)),url("/assets/edited-1-of-373-1.webp"); background-position: center; background-size: cover; }.sitdown-page-hero .container{max-width:800px;margin-left:max(0px,calc((100vw - 1200px)/2))}.sitdown-page-hero .hero-text{max-width:760px}.sitdown-heading{max-width:820px;margin-bottom:38px}.sitdown-heading p{font-size:1.1rem}.sitdown-menu-section,.sitdown-chefs-section,.sitdown-occasions-section{background:#fffdf6}.sitdown-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.sitdown-menu-card{overflow:hidden;background:#fff;border:1px solid rgba(13,51,42,.13);border-radius:18px;box-shadow:0 16px 46px rgba(13,51,42,.08)}.sitdown-menu-card>img{width:100%;height:330px;object-fit:cover}.sitdown-menu-copy{padding:30px}.sitdown-menu-copy>span,.sitdown-chefs-grid article>div>span,.sitdown-steps article>span{display:block;margin-bottom:10px;color:var(--orange);font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.sitdown-menu-copy>strong,.sitdown-chefs-grid article>div>strong{display:block;margin-bottom:18px;color:var(--navy)}.sitdown-menu-copy h4,.sitdown-chefs-grid h4{margin:24px 0 10px;color:var(--navy)}.sitdown-menu-copy ul,.sitdown-chefs-grid ul{padding-left:20px}.sitdown-chef-tag{font-weight:700;color:var(--navy)}.sitdown-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.sitdown-steps article,.sitdown-service-grid article{padding:26px;background:#fff;border:1px solid rgba(13,51,42,.13);border-radius:16px}.sitdown-experience-section{background:#fff}.sitdown-product-message,.sitdown-service-message{margin:38px 0 0;padding:30px;border:0;background:var(--navy);color:#fff;text-align:center;font-family:var(--font-secondary);font-size:clamp(1.35rem,3vw,2rem);border-radius:16px}.sitdown-product-message strong,.sitdown-service-message strong{font-family:var(--font-primary);font-size:.65em}.sitdown-chefs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.sitdown-chefs-grid article{overflow:hidden;background:#fff;border:1px solid rgba(13,51,42,.13);border-radius:18px}.sitdown-chefs-grid article>img{width:100%;height:420px;object-fit:cover}.sitdown-chefs-grid article>div{padding:30px}.sitdown-chefs-grid blockquote{margin:24px 0 0;color:var(--navy);font-family:var(--font-secondary);font-size:1.25rem}.sitdown-joint-message{max-width:860px;margin:34px auto 0;text-align:center}.sitdown-joint-message strong{color:var(--navy);font-family:var(--font-secondary);font-size:clamp(1.5rem,3vw,2.2rem)}.sitdown-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.sitdown-service-grid article{min-height:195px}.sitdown-service-grid h3{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.25}.sitdown-occasion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.sitdown-occasion-grid article{position:relative;overflow:hidden;min-height:340px;border-radius:16px}.sitdown-occasion-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.sitdown-occasion-grid article:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(9,24,20,.86))}.sitdown-occasion-grid h3{position:absolute;z-index:1;right:20px;bottom:18px;left:20px;margin:0;color:#fff}.sitdown-final-cta{background:var(--navy)}.sitdown-final-cta :where(h2,p){color:#fff}.sitdown-final-cta .container{max-width:900px;text-align:center}.sitdown-final-cta .hero-actions{justify-content:center}
@media(max-width:900px){.sitdown-menu-grid,.sitdown-chefs-grid{grid-template-columns:1fr}.sitdown-steps,.sitdown-occasion-grid,.sitdown-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.sitdown-page-hero{background-position:58% center}.sitdown-page-hero .hero-actions{display:grid}.sitdown-page-hero .button{width:100%}.sitdown-menu-copy,.sitdown-chefs-grid article>div{padding:22px}.sitdown-menu-card>img,.sitdown-chefs-grid article>img{height:300px}.sitdown-steps,.sitdown-service-grid,.sitdown-occasion-grid{grid-template-columns:1fr}.sitdown-occasion-grid article{min-height:300px}}.experience-page-hero { background-image: linear-gradient(90deg,rgba(18,29,24,.92),rgba(18,29,24,.3)),url("/assets/DSC_3331-1.webp"); background-position: center; background-size: cover; }.experience-page-hero .container{max-width:850px;margin-left:max(0px,calc((100vw - 1200px)/2))}.experience-page-hero .hero-text{max-width:800px}.experience-heading{max-width:870px;margin-bottom:38px}.experience-heading p{font-size:1.06rem}.experience-value-section,.experience-grid-section,.experience-faq-section{background:#fffdf6}.experience-value-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.experience-value-grid article{padding:30px;border:1px solid rgba(13,51,42,.13);border-radius:18px;background:#fff}.experience-value-grid article>span{display:block;margin-bottom:12px;color:var(--orange);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.experience-value-grid article>strong{display:block;margin-bottom:16px;color:var(--navy)}.experience-value-grid blockquote{margin:22px 0 0;color:var(--navy);font-family:var(--font-secondary);font-size:1.25rem}.experience-difference{margin-top:34px;padding:34px;background:var(--navy);color:#fff;border-radius:18px;text-align:center}.experience-difference h3,.experience-difference p{color:#fff}.experience-difference h3{font-size:clamp(1.5rem,3vw,2.25rem)}.experience-filters{display:grid;gap:12px;margin-bottom:16px}.experience-filters>div{display:flex;flex-wrap:wrap;gap:9px}.experience-filters button{padding:10px 16px;border:1px solid rgba(13,51,42,.25);border-radius:999px;background:#fff;color:var(--navy);font:600 .88rem var(--font-primary);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}.experience-filters button:hover,.experience-filters button.is-active{border-color:var(--navy);background:var(--navy);color:#fff}.experience-filters button:active{transform:translateY(1px)}.experience-result-status{margin:0 0 24px;color:var(--muted);font-size:.9rem}.experience-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.experience-product-card{overflow:hidden;border:1px solid rgba(13,51,42,.13);border-radius:16px;background:#fff;box-shadow:0 12px 34px rgba(13,51,42,.06)}.experience-product-card[hidden]{display:none}.experience-product-card img{width:100%;height:230px;object-fit:cover}.experience-product-card>div{padding:22px}.experience-product-card>div>span{display:block;margin-bottom:9px;color:var(--orange);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.experience-product-card h3{font-size:1.2rem}.experience-product-card dl{display:grid;gap:10px;margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(13,51,42,.12)}.experience-product-card dl div{display:grid;gap:3px}.experience-product-card dt{color:var(--navy);font-size:.73rem;font-weight:700;text-transform:uppercase}.experience-product-card dd{margin:0;color:var(--muted);font-size:.86rem}.experience-final-cta{background:var(--navy)}.experience-final-cta :where(h2,h3,p){color:#fff}.experience-final-cta .container{max-width:920px;text-align:center}.experience-final-cta .hero-actions{justify-content:center}
@media(max-width:960px){.experience-value-grid,.experience-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.experience-page-hero{background-position:58% center}.experience-page-hero .hero-actions{display:grid}.experience-page-hero .button{width:100%}.experience-value-grid,.experience-product-grid{grid-template-columns:1fr}.experience-filters>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.experience-filters button{width:100%}}

/* Shared navigation-page design system */
.canape-page-hero{background-image:linear-gradient(90deg,rgba(29,25,21,.88),rgba(29,25,21,.3)),url("/assets/MusicRelease_13.webp");background-position:center;background-size:cover}
.buffet-page-hero,.mini-buffet-page-hero,.tea-break-hero,.canape-page-hero,.bento-page-hero,.banquet-page-hero,.sitdown-page-hero,.experience-page-hero{min-height:clamp(480px,36vw,520px)}
#main :where(.buffet-section-heading,.buffet-flavours-heading,.buffet-waiter-intro,.mini-buffet-heading,.mini-buffet-section-heading,.tea-break-heading,.canape-heading,.bento-heading,.banquet-heading,.sitdown-heading,.experience-heading){max-width:860px;margin-right:auto;margin-left:0;text-align:left}
#main :where(.service-panel,.menu-grid article,.corporate-difference-card,.wedding-style-card,.wedding-touch-card,.wedding-how-card,.wedding-proof-card,.birthday-experience-row,.birthday-style-item,.birthday-brand-pillar,.mini-buffet-value-block,.mini-buffet-menu-card,.tea-break-format,.tea-break-upgrade-cards article,.canape-serving-card,.canape-level-grid article,.canape-complete-grid article,.bento-value-grid article,.bento-range-grid article,.bento-cuisine-grid article,.bento-more-grid article,.bento-custom-panel,.banquet-kitchen-grid article,.banquet-package-grid article,.banquet-service-grid article,.sitdown-menu-card,.sitdown-steps article,.sitdown-chefs-grid article,.sitdown-service-grid article,.experience-value-grid article,.experience-product-card,.product-directory-card){border-radius:24px;box-shadow:var(--soft-shadow)}
.shared-product-trust-section{background:#fff7e8}
.product-directory-card{display:grid;grid-template-rows:220px 1fr;overflow:hidden;background:#fff}.product-directory-card>img{width:100%;height:100%;object-fit:cover}.product-directory-card>div{padding:26px}.product-directory-card>div>h3{margin-top:0}
@media(max-width:640px){.product-directory-card{grid-template-rows:200px 1fr}}

/* Corporate Event is the typography reference for every page. */
#main {
  font-family: var(--font-primary);
  font-weight: 400;
}

#main :where(h1, h2) {
  font-family: var(--font-secondary);
  font-style: normal;
  font-weight: 400;
}

#main :where(h3, h4, h5, h6) {
  font-family: var(--font-primary);
  font-style: normal;
  font-weight: 600;
}

#main :where(button, .button, .pill-button) {
  font-family: var(--font-primary);
  font-style: normal;
  font-weight: 600;
}

/* Keep custom product heroes aligned to the site grid without losing their edge gutter. */
@media (min-width: 981px) {
  #main :where(
    .mini-buffet-page-hero,
    .tea-break-hero,
    .canape-page-hero,
    .bento-page-hero,
    .banquet-page-hero,
    .sitdown-page-hero,
    .experience-page-hero
  ) .container {
    margin-left: max(16px, calc((100vw - 1200px) / 2));
  }
}

/* Match Corporate Event's balanced hero inset on tablets and phones. */
@media (max-width: 980px) {
  #main .page-hero .container {
    width: min(100% - 32px, 1240px);
    max-width: 1240px;
    margin-inline: auto;
  }
}

/* Keep the homepage hero message and actions readable within the opening viewport. */
#main .home-gallery-hero .testing-hero-content-inner {
  width: min(100%, 980px);
}

#main .home-gallery-hero .testing-hero-content h1 {
  max-width: 24ch;
  font-size: clamp(2.75rem, 5.2vw, 5.5rem);
  line-height: 1;
  text-wrap: balance;
}

@media (max-width: 760px) {
  #main .home-gallery-hero .testing-hero-content {
    padding: 72px 16px 24px;
  }

  #main .home-gallery-hero .testing-hero-content h1 {
    max-width: 100%;
    font-size: clamp(1.5rem, 7vw, 2.25rem);
    line-height: 1.08;
  }
}

/* Global hero heading guardrail: preserve the full title while keeping it within four lines. */
#main :is(section, header, div)[class*="hero"] h1 {
  max-width: min(100%, 24ch);
  font-size: clamp(2.5rem, 5vw, 5.2rem);
  line-height: 1;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 760px) {
  #main :is(section, header, div)[class*="hero"] h1 {
    max-width: 100%;
    font-size: clamp(1.5rem, 7vw, 2.25rem);
    line-height: 1.08;
  }
}

/* Keep long headings readable at the narrow laptop / half-screen breakpoint. */
@media (min-width: 761px) and (max-width: 1279px) {
  #main :is(section, header, div)[class*="hero"] h1 {
    font-size: clamp(2.25rem, 3.6vw, 2.65rem);
  }

  .corporate-event-page .halal-assurance-section {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 641px) and (max-width: 1279px) {
}

/* Product heroes use the full copy measure instead of inheriting the legacy split grid. */
#main .page-hero.hero-menus .container {
  grid-template-columns: minmax(0, 1fr);
}

.corporate-event-page .halal-assurance-section h2 {
  font-size: clamp(2.5rem, 4.3vw, 3.9rem);
}.buffet-flavours-heading h2 { grid-column: 1; grid-row: 2 / span 2; max-width: 12ch; margin: 0; color: var(--leaf); font-size: clamp(2.5rem, 4.7vw, 4.25rem); line-height: 0.94; }

@media (max-width: 360px) {
  .corporate-event-page .halal-assurance-section h2 {
    font-size: 2rem;
  }

  #main h3 {
    font-size: clamp(1.15rem, 5.8vw, 1.3rem);
  }
}

/* Product-page final CTAs follow the Corporate Event content alignment.
   Typography, colours, and page-specific backgrounds remain unchanged. */
#main :is(
  .buffet-final-cta,
  .mini-buffet-final-cta,
  .tea-break-final-cta,
  .canape-final-cta,
  .bento-final-cta,
  .banquet-product-final-cta,
  .sitdown-final-cta,
  .experience-final-cta
) .container {
  max-width: 1240px;
  text-align: left;
}

#main :is(
  .buffet-final-cta,
  .mini-buffet-final-cta,
  .tea-break-final-cta,
  .canape-final-cta,
  .bento-final-cta,
  .banquet-product-final-cta,
  .sitdown-final-cta,
  .experience-final-cta
) h2 {
  max-width: 16ch;
  margin-right: 0;
  margin-left: 0;
  text-wrap: balance;
}

#main :is(
  .buffet-final-cta,
  .mini-buffet-final-cta,
  .tea-break-final-cta,
  .canape-final-cta,
  .bento-final-cta,
  .banquet-product-final-cta,
  .sitdown-final-cta,
  .experience-final-cta
) p {
  max-width: 760px;
  margin-right: 0;
  margin-left: 0;
  text-wrap: pretty;
}

#main :is(
  .buffet-final-cta,
  .mini-buffet-final-cta,
  .tea-break-final-cta,
  .canape-final-cta,
  .bento-final-cta,
  .banquet-product-final-cta,
  .sitdown-final-cta,
  .experience-final-cta
) .hero-actions {
  justify-content: flex-start;
}

#main :is(.banquet-product-final-cta, .experience-final-cta) ul {
  margin-right: 0;
  margin-left: 0;
  text-align: left;
}

/* Keep trust counters visually connected to the sections around them. */
#main .wedding-trust-counter-grid {
  margin-top: clamp(22px, 3vw, 34px);
  padding-top: 0;
}

#main .section:has(.wedding-trust-counter-grid) {
  padding-bottom: clamp(36px, 4.5vw, 56px);
}

#main .section:has(.wedding-trust-counter-grid) + .section {
  padding-top: clamp(36px, 4.5vw, 56px);
}

#main .section:has(+ .section > .container > .wedding-trust-counter-grid:only-child) {
  padding-bottom: clamp(36px, 4.5vw, 56px);
}

#main .section:has(> .container > .wedding-trust-counter-grid:only-child) {
  padding-block: clamp(36px, 4.5vw, 56px);
}

#main .section > .container > .wedding-trust-counter-grid:only-child,
#main .tea-break-trust-section .tea-break-counter-grid {
  margin-top: 0;
}

/* Bento experience cards: image-led horizontal rows. */
#main .bento-value-grid {
  grid-template-columns: minmax(0, 1fr);
}

#main .bento-value-grid article,
#main .bento-value-grid article:first-child,
#main .bento-value-grid article:nth-child(2),
#main .bento-value-grid article:last-child {
  display: grid;
  grid-column: auto;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  min-height: 430px;
}

#main .bento-value-grid img,
#main .bento-value-grid article:last-child img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
}

@media (max-width: 700px) {
  #main .bento-value-grid article,
  #main .bento-value-grid article:first-child,
  #main .bento-value-grid article:nth-child(2),
  #main .bento-value-grid article:last-child {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  #main .bento-value-grid img,
  #main .bento-value-grid article:last-child img {
    height: 280px;
    min-height: 280px;
  }
}

#main .bento-custom-panel {
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
}

#main .bento-custom-content {
  align-self: center;
  padding: clamp(34px, 6vw, 70px);
}

#main .bento-custom-content h2 {
  max-width: 12ch;
  margin: 0 0 18px;
  font-size: clamp(2.35rem, 4.2vw, 3.7rem);
  line-height: 1.02;
}

#main .bento-custom-content h3 {
  max-width: 28ch;
  margin: 0 0 26px;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.4;
}

#main .bento-custom-content > p:not(.bento-custom-note) {
  max-width: 58ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
}

#main .bento-custom-content h4 {
  margin: 0;
  color: var(--navy);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#main .bento-custom-share {
  margin-top: 38px;
}

#main .bento-custom-content .bento-custom-share > :is(h3, h4) {
  max-width: none;
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

#main .bento-custom-content ul {
  display: grid;
  gap: 10px;
  columns: auto;
  margin: 4px 0 0;
  padding-left: 20px;
  line-height: 1.55;
}

#main .bento-custom-content blockquote {
  margin: 30px 0 0;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.5;
}

#main .bento-custom-content .button {
  margin-top: 30px;
}

#main .bento-custom-content .bento-custom-note {
  max-width: 56ch;
  margin: 18px 0 0;
  line-height: 1.55;
}

#main .bento-custom-photo {
  width: 100%;
  height: 100%;
  min-height: 620px;
  object-fit: cover;
}

@media (max-width: 760px) {
  #main .bento-custom-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  #main .bento-custom-photo {
    height: 300px;
    min-height: 300px;
  }
}

/* Corporate Bento branding card keeps the message left and photography right. */
#main .bento-more-grid .bento-branding-card {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
}

#main .bento-branding-card > div {
  align-self: center;
  padding: clamp(28px, 4vw, 44px);
}

#main .bento-branding-card > div > strong {
  color: var(--orange-strong);
}

#main .bento-branding-card > img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

#main .banquet-chef-visual {
  grid-template-columns: minmax(0, 1fr);
}#main .banquet-chef-profile { grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.1fr); display: grid; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: var(--soft-shadow); }

#main .banquet-chef-profile .banquet-chef-visual img {
  height: 100%;
  min-height: 620px;
  border-radius: 0;
}

#main .banquet-chef-profile .banquet-chef-copy {
  align-self: center;
  padding: clamp(34px, 5vw, 64px);
}

#main .banquet-chef-label {
  margin: 0 0 14px;
  color: var(--orange-strong);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#main .banquet-chef-profile h2 {
  max-width: 13ch;
  margin-bottom: 20px;
}

#main .banquet-chef-profile h3 {
  margin: 0 0 6px;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}

#main .banquet-chef-profile strong {
  display: block;
  margin-bottom: 26px;
  color: var(--orange-strong);
}

#main .banquet-chef-profile .banquet-chef-copy > p:not(.banquet-chef-label) {
  line-height: 1.7;
}

@media (max-width: 820px) {
  #main .banquet-chef-profile{
    grid-template-columns: minmax(0, 1fr);
  }

  #main .banquet-chef-profile .banquet-chef-visual img {
    min-height: 420px;
    max-height: 520px;
  }
}

@media (max-width: 560px) {
}

@media (max-width: 760px) {
}

@media (max-width: 700px) {
  #main .bento-more-grid .bento-branding-card {
    grid-template-columns: minmax(0, 1fr);
  }

  #main .bento-branding-card > img {
    height: 280px;
    min-height: 280px;
  }
}