/* =========================================================
   Verdura — Vegan & Plant-Based Restaurant
   Main stylesheet (Home 1)
   ========================================================= */

:root {
  --sage: #9caf88;
  --sage-deep: #7d9468;
  --sage-light: #e3ebd9;
  --forest: #2f4a36;
  --forest-deep: #1b3024;
  --cream: #faf5ea;
  --beige: #eee3cd;
  --terracotta: #c4694a;
  --terracotta-dark: #a95338;

  --bg: var(--cream);
  --bg-soft: #f2e9d5;
  --bg-tint: #e6ede0;
  --surface: #fffdf8;
  --text: #3a463d;
  --muted: #5f6e63;
  --heading: var(--forest);
  --border: rgba(47, 74, 54, 0.15);
  --tint: rgba(156, 175, 136, 0.22);
  --header-bg: rgba(250, 245, 234, 0.97);

  --shadow-sm: 0 6px 20px rgba(31, 51, 38, 0.08);
  --shadow-md: 0 18px 50px rgba(31, 51, 38, 0.14);
  --shadow-lg: 0 30px 80px rgba(31, 51, 38, 0.24);

  --radius: 22px;
  --radius-sm: 12px;
  --ff-head: "Cormorant Garamond", "Cairo", Georgia, serif;
  --ff-body: "Jost", "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --container: 1240px;
  --header-h: 108px;
  --offer-ticker-h: 32px;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  font-weight: 350;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  transition:
    background-color 0.4s,
    color 0.4s;
}
body.is-loading,
body.nav-open,
body.lb-open {
  overflow: hidden;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}
h1,
h2,
h3 {
  font-family: var(--ff-head);
  color: var(--heading);
  font-weight: 400;
  line-height: 1.12;
}
em {
  font-style: italic;
  color: var(--terracotta);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  inset-block-start: -60px;
  inset-inline-start: 16px;
  z-index: 4000;
  background: var(--forest);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  transition: inset-block-start 0.3s;
}
.skip-link:focus {
  inset-block-start: 16px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.section {
  padding-block: clamp(76px, 9vw, 130px);
  position: relative;
}

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--terracotta);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
}
.eyebrow--light {
  color: #efb59d;
}
.section-title {
  font-size: clamp(2.2rem, 4.6vw, 3.7rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.section-title--light {
  color: #fff;
}
.section-title--light em {
  color: #efb59d;
}
.section-lead {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 560px;
  margin-top: 20px;
}
.section-lead--light {
  color: rgba(255, 255, 255, 0.85);
}
.section-head {
  margin-bottom: clamp(40px, 5vw, 64px);
}
.section-head--center {
  text-align: center;
}
.section-head--center .section-lead {
  margin-inline: auto;
}
.section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.section-head--split .section-lead {
  margin-top: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.35s var(--ease),
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}
.btn:hover {
  transform: translateY(-3px);
}
.btn i {
  transition: transform 0.35s var(--ease);
  font-size: 0.85em;
}
.btn:hover i.fa-arrow-right {
  transform: translateX(4px);
}
.btn--primary {
  background: var(--terracotta);
  color: #fff;
  box-shadow: 0 10px 26px rgba(196, 105, 74, 0.35);
}
.btn--primary:hover {
  background: var(--terracotta-dark);
  box-shadow: 0 14px 32px rgba(196, 105, 74, 0.45);
}
.btn--light {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
.btn--light:hover {
  background: #fff;
  color: var(--forest);
  border-color: #fff;
}
.btn--forest {
  background: var(--forest);
  color: #fff;
}
.btn--forest:hover {
  background: var(--forest-deep);
  box-shadow: var(--shadow-md);
}
.btn--sm {
  padding: 11px 22px;
  font-size: 0.88rem;
}
.btn--lg {
  padding: 18px 40px;
  font-size: 1.02rem;
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  font-weight: 500;
  color: var(--forest);
  border-bottom: 1.5px solid var(--terracotta);
  padding-bottom: 4px;
  transition:
    gap 0.3s var(--ease),
    color 0.3s;
}
.link-arrow:hover {
  gap: 16px;
  color: var(--terracotta);
}

/* ---------- Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  background: var(--forest-deep);
  color: var(--cream);
}
.preloader__inner {
  text-align: center;
  padding: 24px;
}
.preloader__leaf {
  font-size: 2.6rem;
  color: var(--sage);
  animation: sway 1.6s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.preloader__name {
  font-family: var(--ff-head);
  font-size: clamp(2rem, 6vw, 2.8rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 300;
  margin-top: 14px;
}
.preloader__tag {
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sage);
  margin-top: 4px;
}
.preloader__bar {
  width: 180px;
  height: 2px;
  margin: 26px auto 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.preloader__bar span {
  display: block;
  height: 100%;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left center;
  animation: loadbar 1.5s var(--ease) forwards;
}
@keyframes sway {
  0%,
  100% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg) translateY(-4px);
  }
}
@keyframes loadbar {
  to {
    transform: scaleX(1);
  }
}

/* ---------- Header ---------- */
.offer-ticker {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1001;
  height: var(--offer-ticker-h);
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--forest-deep);
  color: var(--cream);
  font-size: 0.78rem;
  line-height: 1;
}
.offer-ticker__track {
  display: flex;
  width: max-content;
  animation: offer-ticker-scroll 36s linear infinite;
  will-change: transform;
}
.offer-ticker__group {
  display: flex;
  flex: 0 0 max-content;
  align-items: center;
  justify-content: space-around;
  gap: clamp(22px, 4vw, 56px);
  min-width: 100vw;
  padding-inline: 20px;
  white-space: nowrap;
}
.offer-ticker__group i {
  color: #efb59d;
  font-size: 0.7rem;
}
@keyframes offer-ticker-scroll {
  to {
    transform: translateX(-50%);
  }
}
.header {
  --hfg: #fff;
  position: fixed;
  inset-block-start: var(--offer-ticker-h);
  inset-inline: 0;
  z-index: 1000;
  padding-block: 16px;
  color: var(--hfg);
  transition:
    background-color 0.4s,
    box-shadow 0.4s,
    padding 0.35s,
    color 0.3s;
}
.header.is-scrolled,
.header.menu-open {
  --hfg: var(--heading);
  background: var(--header-bg);
  box-shadow: 0 6px 30px rgba(20, 40, 28, 0.1);
}
.header.is-scrolled {
  padding-block: 9px;
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.logo__mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sage);
  color: var(--forest-deep);
  font-size: 1.05rem;
  transition:
    transform 0.5s var(--ease),
    background-color 0.3s;
}
.logo:hover .logo__mark {
  transform: rotate(-18deg) scale(1.06);
  background: var(--terracotta);
  color: #fff;
}
.logo__text {
  font-family: var(--ff-head);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  display: flex;
  flex-direction: column;
}
.logo__text small {
  font-family: var(--ff-body);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 400;
  margin-top: 5px;
  opacity: 0.8;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav__item {
  position: relative;
}
.nav__row {
  display: flex;
  align-items: center;
}
.nav__link {
  position: relative;
  display: inline-block;
  padding: 24px 12px;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: color 0.3s;
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  inset-block-end: 17px;
  height: 1.5px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s var(--ease);
}
.nav__link:hover::after,
.nav__link.active::after {
  transform: scaleX(1);
}
.nav__link.active {
  font-weight: 500;
}
.nav__caret {
  font-size: 0.62rem;
  width: 22px;
  height: 22px;
  margin-inline-start: -8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: transform 0.35s var(--ease);
}
.nav__item.is-open > .nav__row .nav__caret {
  transform: rotate(180deg);
}
.nav__item--cta {
  display: none;
}

.dropdown {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: -6px;
  min-width: 230px;
  padding: 10px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.3s,
    transform 0.35s var(--ease),
    visibility 0.3s;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown,
.has-dropdown.is-open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.has-dropdown:hover > .nav__row .nav__caret {
  transform: rotate(180deg);
}
.dropdown a {
  display: block;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.94rem;
  transition:
    background-color 0.25s,
    color 0.25s,
    padding 0.3s var(--ease);
}
.dropdown a:hover {
  background: var(--tint);
  color: var(--forest);
  padding-inline-start: 22px;
}
.dropdown a.active {
  background: var(--tint);
  color: var(--terracotta);
  font-weight: 500;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  font-size: 0.95rem;
  opacity: 0.9;
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.35s var(--ease),
    border-color 0.3s;
}
.icon-btn:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
  transform: rotate(15deg);
}
.icon-btn .icon-sun {
  display: none;
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform 0.4s var(--ease),
    opacity 0.3s;
}
.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- 1. Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--forest-deep),
    var(--forest) 60%,
    var(--sage-deep)
  );
}
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__bg img {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -10%;
  width: 100%;
  height: 120%;
  object-fit: cover;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      105deg,
      rgba(18, 36, 26, 0.88) 8%,
      rgba(18, 36, 26, 0.5) 55%,
      rgba(18, 36, 26, 0.25)
    ),
    linear-gradient(0deg, rgba(18, 36, 26, 0.55), transparent 40%);
}
.hero__floaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.float {
  position: absolute;
  color: var(--sage-light);
  opacity: 0.3;
}
.float--1 {
  inset-block-start: 22%;
  inset-inline-end: 12%;
  font-size: 3.4rem;
}
.float--2 {
  inset-block-start: 58%;
  inset-inline-end: 7%;
  font-size: 2.2rem;
}
.float--3 {
  inset-block-start: 14%;
  inset-inline-end: 34%;
  font-size: 1.8rem;
}
.float--4 {
  inset-block-end: 20%;
  inset-inline-end: 28%;
  font-size: 4.4rem;
  opacity: 0.16;
}
.float--5 {
  inset-block-start: 40%;
  inset-inline-end: 22%;
  font-size: 2.4rem;
  opacity: 0.22;
}
.float--6 {
  inset-block-end: 12%;
  inset-inline-start: 6%;
  font-size: 2.6rem;
  opacity: 0.2;
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding-block: calc(var(--header-h) + 60px) 110px;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #efb59d;
  margin-bottom: 26px;
}
.hero__eyebrow::before {
  content: "";
  width: 44px;
  height: 1px;
  background: currentColor;
}
.hero__title {
  color: #fff;
  font-weight: 300;
  font-size: clamp(2.8rem, 7.2vw, 6rem);
  letter-spacing: -0.02em;
  line-height: 1.04;
  max-width: 900px;
}
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-block: 0.06em 0.12em;
}
.hero__title .line > span {
  display: block;
}
.hero__title em {
  color: #efb59d;
  font-weight: 400;
}
.hero__text {
  max-width: 560px;
  margin-top: 26px;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(255, 255, 255, 0.88);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 38px;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin-top: 54px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
}
.hero__meta i {
  color: var(--sage);
  margin-inline-end: 8px;
}
.hero__scroll {
  position: absolute;
  z-index: 2;
  inset-inline-start: 50%;
  inset-block-end: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.hero__scroll i {
  animation: bounce 1.8s ease-in-out infinite;
}
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(7px);
    opacity: 1;
  }
}

/* parallax helper */
.parallax {
  position: relative;
  overflow: hidden;
}
.parallax img[data-parallax] {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -10%;
  width: 100%;
  height: 120%;
  object-fit: cover;
}

/* ---------- 2. Promise ---------- */
.promise {
  background: var(--bg);
}
.promise__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}
.promise__media {
  position: relative;
  padding-block-end: 70px;
  padding-inline-end: 70px;
  background: linear-gradient(135deg, var(--sage-light), var(--beige));
  border-radius: 220px 220px var(--radius) var(--radius);
}
.promise__main {
  aspect-ratio: 4 / 5;
  border-radius: 200px 200px var(--radius) var(--radius);
  box-shadow: var(--shadow-md);
  background: linear-gradient(160deg, var(--sage), var(--forest));
  position: relative;
  z-index: 1;
}
.promise__inset {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 8px solid var(--bg);
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, var(--terracotta), var(--sage));
  z-index: 2;
}
.promise__inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promise__badge {
  position: absolute;
  z-index: 3;
  inset-block-start: 40px;
  inset-inline-start: -14px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--terracotta);
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.3;
  box-shadow: var(--shadow-md);
}
.promise__badge i {
  position: absolute;
  inset-block-start: 14px;
  font-size: 0.8rem;
}
.promise__badge span {
  margin-top: 16px;
}
.promise__badge strong {
  font-family: var(--ff-head);
  font-size: 1.5rem;
  letter-spacing: 0;
  font-weight: 500;
}
.pillars {
  margin-top: 38px;
  display: grid;
  gap: 26px;
}
.pillar {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.pillar__icon {
  flex: 0 0 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  color: var(--forest);
  background: var(--tint);
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.4s var(--ease);
}
.pillar:hover .pillar__icon {
  background: var(--terracotta);
  color: #fff;
  transform: translateY(-4px) rotate(-6deg);
}
.pillar h3 {
  font-size: 1.45rem;
  margin-bottom: 4px;
}
.pillar p {
  color: var(--muted);
  font-size: 0.98rem;
}

/* ---------- 3. Signature dishes ---------- */
.signature {
  background: var(--bg-soft);
}
.dish-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.dish-card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.dish-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-md);
}
.dish-card__media {
  position: relative;
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sage), var(--forest));
}
.dish-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.dish-card:hover .dish-card__media img {
  transform: scale(1.1);
}
.dish-card__tag {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.94);
  color: var(--forest);
}
.dish-card__tag i {
  color: var(--terracotta);
}
.dish-card__body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.dish-card__body h3 {
  font-size: 1.6rem;
  margin-bottom: 8px;
}
.dish-card__body p {
  color: var(--muted);
  font-size: 0.95rem;
  flex: 1;
}
.dish-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.price {
  font-family: var(--ff-head);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--terracotta);
  line-height: 1;
}
.diet {
  font-size: 0.8rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.diet i {
  color: var(--sage-deep);
}

/* ---------- 4. Fresh from nature ---------- */
.harvest {
  background: radial-gradient(
    circle at 15% 0%,
    #2f4a36 0%,
    var(--forest-deep) 60%
  );
  color: #fff;
  overflow: hidden;
}
.harvest .section-title {
  color: #fff;
}
.harvest .section-title em {
  color: #efb59d;
}
.harvest .section-lead {
  color: rgba(255, 255, 255, 0.78);
}
.harvest .eyebrow {
  color: #efb59d;
}
.harvest__strip {
  display: flex;
  gap: 14px;
  height: 540px;
}
.harvest__panel {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(160deg, var(--sage-deep), var(--forest));
  transition: flex 0.8s var(--ease);
  isolation: isolate;
}
.harvest__panel.is-active {
  flex: 4.2;
  cursor: default;
}
.harvest__panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transform: scale(1.12);
  transition: transform 1.4s var(--ease);
}
.harvest__panel.is-active img {
  transform: scale(1);
}
.harvest__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    0deg,
    rgba(14, 28, 20, 0.85),
    rgba(14, 28, 20, 0.12) 62%
  );
}
.harvest__label {
  position: absolute;
  inset-block-end: 28px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  font-family: var(--ff-head);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  transition: opacity 0.4s;
}
.harvest__panel.is-active .harvest__label {
  opacity: 0;
}
.harvest__info {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 34px;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s 0.25s,
    transform 0.6s 0.25s var(--ease);
}
.harvest__panel.is-active .harvest__info {
  opacity: 1;
  transform: none;
}
.harvest__season {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  margin-bottom: 14px;
}
.harvest__info h3 {
  color: #fff;
  font-size: 2.2rem;
  margin-bottom: 8px;
}
.harvest__info p {
  max-width: 420px;
  color: rgba(255, 255, 255, 0.88);
}
.ticker {
  margin-top: 56px;
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, 0.16);
  padding-block: 18px;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
}
.ticker__track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: ticker 38s linear infinite;
  font-family: var(--ff-head);
  font-size: 1.6rem;
  font-style: italic;
  color: var(--sage-light);
}
.ticker__track i {
  font-size: 0.8rem;
  color: var(--terracotta);
  font-style: normal;
}
@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- 5. Menu preview ---------- */
.menu-preview {
  background: var(--bg);
}
.menu-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
}
.menu-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.94rem;
  font-weight: 400;
  color: var(--text);
  transition:
    background-color 0.35s,
    color 0.35s,
    border-color 0.35s,
    transform 0.35s var(--ease),
    box-shadow 0.35s;
}
.menu-tab i {
  color: var(--sage-deep);
  transition:
    color 0.3s,
    transform 0.4s var(--ease);
}
.menu-tab:hover {
  transform: translateY(-3px);
  border-color: var(--sage);
}
.menu-tab:hover i {
  transform: rotate(-12deg) scale(1.15);
}
.menu-tab.is-active {
  background: var(--forest);
  color: #fff;
  border-color: var(--forest);
  box-shadow: var(--shadow-sm);
}
.menu-tab.is-active i {
  color: #efb59d;
}
.menu-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.menu-panel__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 9 / 7;
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, var(--sage), var(--forest));
}
.menu-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menu-panel__chip {
  position: absolute;
  inset-block-end: 18px;
  inset-inline-start: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.95);
  color: var(--forest);
  font-size: 0.82rem;
  font-weight: 500;
}
.menu-panel__chip i {
  color: var(--terracotta);
}
.menu-list {
  display: grid;
  gap: 30px;
}
.menu-item__top {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.menu-item h3 {
  font-size: 1.65rem;
  white-space: nowrap;
}
.menu-item__dots {
  flex: 1;
  border-bottom: 2px dotted var(--border);
  transform: translateY(-5px);
  min-width: 20px;
}
.menu-item .price {
  font-size: 1.5rem;
}
.menu-item p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.97rem;
  max-width: 460px;
}
.menu-preview__cta {
  text-align: center;
  margin-top: 56px;
}

/* ---------- 6. Craft ---------- */
.craft {
  background: var(--bg-tint);
  overflow: hidden;
}
.craft__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}
.steps {
  margin-top: 40px;
  display: grid;
  gap: 0;
}
.step {
  display: flex;
  gap: 26px;
  padding-block: 22px;
  border-top: 1px solid var(--border);
  transition: padding 0.4s var(--ease);
}
.step:last-child {
  border-bottom: 1px solid var(--border);
}
.step:hover {
  padding-inline-start: 14px;
}
.step__num {
  font-family: var(--ff-head);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--terracotta);
  font-style: italic;
  flex: 0 0 56px;
}
.step h3 {
  font-size: 1.5rem;
  margin-bottom: 4px;
}
.step p {
  color: var(--muted);
  font-size: 0.97rem;
}
.craft__media {
  position: relative;
  padding: 0 0 70px;
}
.craft__frame {
  position: absolute;
  inset-block-start: 30px;
  inset-inline-end: -26px;
  inset-block-end: 96px;
  inset-inline-start: 56px;
  border: 2px solid var(--terracotta);
  border-radius: var(--radius);
  opacity: 0.55;
}
.craft__main {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  background: linear-gradient(160deg, var(--sage), var(--forest));
  margin-inline-start: 40px;
}
.craft__quote {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  max-width: 300px;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--forest);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.craft__quote > i {
  color: #efb59d;
  font-size: 1.4rem;
  margin-bottom: 12px;
  display: block;
}
.craft__quote blockquote {
  font-family: var(--ff-head);
  font-size: 1.4rem;
  line-height: 1.3;
  font-style: italic;
}
.craft__quote figcaption {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  color: var(--sage-light);
}
.craft__quote figcaption strong {
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ---------- 7. Why dine with us ---------- */
.why {
  background: var(--bg);
}
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.bento__card {
  grid-column: span 3;
  padding: 34px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease),
    border-color 0.4s;
}
.bento__card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  border-color: var(--sage);
}
.bento__card:nth-child(2) {
  grid-column: 7 / span 6;
}
.bento__card:nth-child(3) {
  grid-column: 7 / span 3;
}
.bento__card:nth-child(4) {
  grid-column: 10 / span 3;
}
.bento__card--feature {
  grid-column: 1 / span 6 !important;
  grid-row: 1 / span 2;
  background: linear-gradient(
    150deg,
    var(--terracotta),
    var(--terracotta-dark)
  );
  border: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 440px;
  position: relative;
  overflow: hidden;
}
.bento__card--feature::before {
  content: "\f4d8";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset-block-start: -30px;
  inset-inline-end: -20px;
  font-size: 14rem;
  color: rgba(255, 255, 255, 0.09);
  transform: rotate(-12deg);
}
.bento__card--feature h3 {
  color: #fff;
  font-size: 2.4rem;
}
.bento__icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  background: var(--tint);
  color: var(--forest);
  margin-bottom: 22px;
  transition: transform 0.4s var(--ease);
}
.bento__card:hover .bento__icon {
  transform: rotate(-8deg) scale(1.08);
}
.bento__card--feature .bento__icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.bento__card h3 {
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.bento__card p {
  color: var(--muted);
  font-size: 0.97rem;
}
.bento__card--feature p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 460px;
}
.bento__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.bento__tags li {
  padding: 6px 14px;
  font-size: 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
  padding-top: 44px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.stats strong {
  display: block;
  font-family: var(--ff-head);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 400;
  color: var(--terracotta);
  line-height: 1;
}
.stats span {
  display: block;
  margin-top: 10px;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- 8. Gallery ---------- */
.space {
  background: var(--bg-soft);
}
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 250px;
  gap: 18px;
}
.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--sage), var(--forest));
  display: block;
  width: 100%;
  height: 100%;
}
.gallery__item--a {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery__item--wide {
  grid-column: span 2;
}
.gallery__item--half {
  grid-column: span 2;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 1.2s var(--ease),
    filter 0.6s;
}
.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(14, 28, 20, 0.65), transparent 55%);
  opacity: 0.75;
  transition: opacity 0.5s;
}
.gallery__item:hover img {
  transform: scale(1.12);
}
.gallery__item:hover::after {
  opacity: 1;
}
.gallery__cap {
  position: absolute;
  z-index: 2;
  inset-inline: 20px;
  inset-block-end: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: var(--ff-head);
  font-size: 1.3rem;
  text-align: start;
  transform: translateY(8px);
  opacity: 0.92;
  transition: transform 0.5s var(--ease);
}
.gallery__cap i {
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.4s;
}
.gallery__item:hover .gallery__cap {
  transform: none;
}
.gallery__item:hover .gallery__cap i {
  opacity: 1;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: rgba(10, 20, 14, 0.92);
}
.lightbox__fig {
  max-width: min(1100px, 82vw);
}
.lightbox__fig img {
  max-height: 78vh;
  width: auto;
  margin-inline: auto;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.lightbox__fig figcaption {
  text-align: center;
  color: #fff;
  font-family: var(--ff-head);
  font-size: 1.4rem;
  margin-top: 14px;
}
.lightbox__close,
.lightbox__nav {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition:
    background-color 0.3s,
    border-color 0.3s;
  flex-shrink: 0;
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
}
.lightbox__close {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-end: 20px;
}

/* ---------- 9. Guests ---------- */
.guests {
  background: var(--bg);
  overflow: hidden;
}
.guests__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.t-thumbs {
  display: flex;
  gap: 12px;
  margin-top: 34px;
}
.t-thumb {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid transparent;
  outline: 1px solid var(--border);
  background: linear-gradient(135deg, var(--sage), var(--terracotta));
  opacity: 0.6;
  transition:
    opacity 0.3s,
    transform 0.4s var(--ease),
    border-color 0.3s;
}
.t-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.t-thumb:hover {
  opacity: 1;
  transform: translateY(-4px);
}
.t-thumb.is-active {
  opacity: 1;
  border-color: var(--terracotta);
  transform: scale(1.1);
}
.guests__carousel {
  position: relative;
  padding: clamp(32px, 5vw, 60px);
  border-radius: 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.guests__mark {
  position: absolute;
  inset-block-start: 26px;
  inset-inline-end: 36px;
  font-size: 4rem;
  color: var(--tint);
}
.t-slides {
  display: grid;
}
.t-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
}
.t-slide.is-active {
  opacity: 1;
  visibility: visible;
}
.t-stars {
  color: var(--terracotta);
  display: flex;
  gap: 5px;
  font-size: 0.95rem;
  margin-bottom: 22px;
}
.t-slide blockquote {
  font-family: var(--ff-head);
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  line-height: 1.35;
  color: var(--heading);
  font-weight: 400;
}
.t-slide figcaption {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  color: var(--muted);
}
.t-slide figcaption strong {
  font-size: 1.05rem;
  color: var(--heading);
  font-weight: 500;
}
.t-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
}
.t-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--forest);
  transition:
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s,
    transform 0.35s var(--ease);
}
.t-btn:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
  transform: scale(1.08);
}
.t-progress {
  flex: 1;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.t-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---------- 10. Reserve ---------- */
.reserve {
  color: #fff;
  overflow: hidden;
  background: var(--forest-deep);
}
.reserve__bg {
  position: absolute;
  inset: 0;
}
.reserve__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(14, 28, 20, 0.92) 10%,
    rgba(14, 28, 20, 0.65)
  );
}
.reserve__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.reserve__contact {
  display: grid;
  gap: 12px;
  margin-top: 38px;
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.88);
}
.reserve__contact i {
  width: 22px;
  color: #efb59d;
  margin-inline-end: 10px;
}
.reserve__card {
  padding: clamp(28px, 4vw, 44px);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.reserve__card h3 {
  color: #fff;
  font-size: 2rem;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.reserve__card h3 i {
  color: #efb59d;
  font-size: 1.4rem;
}
.hours li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 15px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
  font-size: 0.98rem;
}
.hours li span {
  color: rgba(255, 255, 255, 0.8);
}
.hours li strong {
  font-weight: 500;
  white-space: nowrap;
}
.reserve__note {
  margin-top: 24px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  gap: 10px;
}
.reserve__note i {
  color: #efb59d;
  margin-top: 4px;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--forest-deep);
  color: rgba(255, 255, 255, 0.78);
  padding-block: clamp(52px, 7vw, 84px) 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.25fr repeat(2, minmax(120px, 0.75fr)) 1.1fr 1.2fr;
  gap: clamp(22px, 3vw, 42px);
}
.footer .logo {
  color: #fff;
}
.footer__brand > p {
  max-width: 25ch;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.94rem;
}
.footer__social {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.footer__social a {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: var(--sage-light);
  transition: color 0.3s, background-color 0.3s, border-color 0.3s, transform 0.3s;
}
.footer__social a:hover {
  transform: translateY(-3px);
  border-color: var(--terracotta);
  background: var(--terracotta);
  color: #fff;
}
.footer__col h2 {
  margin-bottom: 18px;
  color: #fff;
  font-size: 1.3rem;
}
.footer__links {
  display: grid;
  gap: 10px;
  font-size: 0.92rem;
}
.footer__links a {
  transition: color 0.3s, padding 0.3s;
}
.footer__links a:hover {
  color: #efb59d;
  padding-inline-start: 4px;
}
.footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
}
.footer__contact h2 {
  margin-bottom: 6px;
}
.footer__contact address {
  font-style: normal;
  line-height: 1.65;
}
.footer__contact a {
  overflow-wrap: anywhere;
  transition: color 0.3s;
}
.footer__contact a:hover {
  color: #efb59d;
}
.footer__hours ul {
  display: grid;
  gap: 12px;
  font-size: 0.84rem;
}
.footer__hours li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.footer__hours span {
  color: var(--sage-light);
  font-weight: 500;
}
.footer__hours time {
  color: rgba(255, 255, 255, 0.68);
}
.footer__bottom {
  margin-top: clamp(36px, 5vw, 62px);
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer__copy {
  font-size: 0.82rem;
  text-align: center;
}

@media (max-width: 1099px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__contact { min-width: 0; }
}

@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__brand { grid-column: auto; }
}

/* =========================================================
   Responsive
   ========================================================= */

/* Large tablets / small laptops: collapse the nav */
@media (max-width: 1099px) {
  .burger {
    display: inline-flex;
  }
  .header__cta {
    display: none;
  }
  .nav {
    position: fixed;
    inset-inline: 0;
    inset-block-start: var(--header-h);
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: 14px 24px 30px;
    background: var(--surface);
    color: var(--text);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    transition:
      opacity 0.35s,
      transform 0.45s var(--ease),
      visibility 0.35s;
  }
  .header.is-scrolled .nav {
    inset-block-start: calc(var(--offer-ticker-h) + 62px);
    max-height: calc(100dvh - var(--offer-ticker-h) - 62px);
  }
  .header.menu-open .nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__item {
    border-bottom: 1px solid var(--border);
  }
  .nav__row {
    justify-content: space-between;
  }
  .nav__link {
    flex: 1;
    padding: 17px 4px;
    font-size: 1.05rem;
  }
  .nav__link::after {
    display: none;
  }
  .nav__link.active {
    color: var(--terracotta);
  }
  .nav__caret {
    width: 44px;
    height: 44px;
    margin: 0;
    font-size: 0.8rem;
  }
  .dropdown {
    position: static;
    min-width: 0;
    padding: 0 0 0 14px;
    border: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition:
      max-height 0.5s var(--ease),
      padding 0.3s;
  }
  .has-dropdown:hover > .dropdown,
  .has-dropdown:focus-within > .dropdown {
    max-height: 0;
  }
  .has-dropdown.is-open > .dropdown {
    max-height: 360px;
    padding-block: 0 12px;
  }
  .has-dropdown:hover > .nav__row .nav__caret {
    transform: none;
  }
  .has-dropdown.is-open > .nav__row .nav__caret {
    transform: rotate(180deg);
  }
  .nav__item--cta {
    display: block;
    border: 0;
    padding-top: 22px;
  }
  .nav__item--cta .btn {
    width: 100%;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .dish-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .promise__grid,
  .craft__grid,
  .guests__grid,
  .reserve__grid {
    grid-template-columns: 1fr;
  }
  .promise__media {
    max-width: 560px;
    margin-inline: auto;
    width: 100%;
  }
  .craft__media {
    max-width: 560px;
    margin-inline: auto;
    width: 100%;
  }
  .harvest__strip {
    height: 480px;
  }
  .menu-panel {
    grid-template-columns: 1fr;
  }
  .menu-item h3 {
    white-space: normal;
  }
  .bento {
    gap: 20px;
  }
  .bento__card--feature {
    grid-column: 1 / -1 !important;
    grid-row: auto;
    min-height: 340px;
  }
  .bento__card:nth-child(2) {
    grid-column: span 12;
  }
  .bento__card:nth-child(3),
  .bento__card:nth-child(4) {
    grid-column: span 6;
  }
  .gallery {
    grid-auto-rows: 210px;
  }
  .section-head--split {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --header-h: 100px;
  }
  body {
    font-size: 1rem;
  }
  .container {
    padding-inline: 18px;
  }
  .header__inner {
    gap: 10px;
  }
  .header__actions {
    gap: 6px;
  }
  .icon-btn {
    width: 38px;
    height: 38px;
    font-size: 0.85rem;
  }
  .logo__mark {
    width: 36px;
    height: 36px;
  }
  .logo__text {
    font-size: 1.45rem;
  }
  .logo__text small {
    display: none;
  }
  .nav {
    padding-inline: 18px;
  }
  .hero__inner {
    padding-block: calc(var(--header-h) + 40px) 100px;
  }
  .hero__actions .btn {
    flex: 1 1 100%;
  }
  .hero__meta {
    gap: 12px 22px;
    margin-top: 40px;
    font-size: 0.86rem;
  }
  .float--1 {
    font-size: 2.4rem;
  }
  .float--4 {
    font-size: 3rem;
  }
  .promise__media {
    padding-block-end: 50px;
    padding-inline-end: 40px;
  }
  .promise__badge {
    width: 88px;
    height: 88px;
    font-size: 0.6rem;
    inset-inline-start: -6px;
  }
  .promise__badge strong {
    font-size: 1.2rem;
  }
  .dish-grid {
    grid-template-columns: 1fr;
  }
  .harvest__strip {
    flex-direction: column;
    height: 640px;
    gap: 10px;
  }
  .harvest__label {
    writing-mode: horizontal-tb;
    inset-block-end: auto;
    inset-block-start: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.35rem;
  }
  .harvest__panel.is-active {
    flex: 5;
  }
  .harvest__info {
    padding: 22px;
  }
  .harvest__info h3 {
    font-size: 1.7rem;
  }
  .menu-tabs {
    gap: 8px;
  }
  .menu-tab {
    padding: 10px 16px;
    font-size: 0.86rem;
  }
  .craft__main {
    margin-inline-start: 20px;
  }
  .craft__quote {
    position: relative;
    max-width: none;
    margin-top: -50px;
    margin-inline: 14px 0;
  }
  .craft__media {
    padding-bottom: 0;
  }
  .craft__frame {
    display: none;
  }
  .step {
    gap: 16px;
  }
  .step__num {
    flex-basis: 44px;
    font-size: 2rem;
  }
  .bento__card {
    padding: 26px;
  }
  .bento__card:nth-child(3),
  .bento__card:nth-child(4) {
    grid-column: span 12;
  }
  .bento__card--feature h3 {
    font-size: 2rem;
  }
  .stats {
    gap: 12px;
  }
  .stats span {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
  }
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 170px;
    gap: 12px;
  }
  .gallery__item--a,
  .gallery__item--wide {
    grid-column: span 2;
  }
  .gallery__item--half {
    grid-column: span 1;
  }
  .gallery__item--a {
    grid-row: span 2;
  }
  .gallery__cap {
    font-size: 1.05rem;
    inset-inline: 14px;
    inset-block-end: 12px;
  }
  .gallery__cap i {
    display: none;
  }
  .lightbox {
    padding: 12px;
    gap: 6px;
  }
  .lightbox__fig {
    max-width: 78vw;
  }
  .lightbox__nav {
    width: 40px;
    height: 40px;
  }
  .t-thumbs {
    gap: 8px;
  }
  .t-thumb {
    width: 52px;
    height: 52px;
  }
  .guests__carousel {
    border-radius: 24px;
  }
  .reserve .btn--lg {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .logo__text {
    font-size: 1.25rem;
  }
  .icon-btn {
    width: 34px;
    height: 34px;
  }
  .burger {
    width: 38px;
  }
  .hours li {
    flex-direction: column;
    gap: 2px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .ticker__track {
    animation: none;
  }
  .offer-ticker__track {
    animation: none;
  }
  .preloader__bar span {
    transform: scaleX(1);
  }
}

/* =========================================================
   Home 2 — refined editorial restaurant layout
   ========================================================= */
.page-home2 {
  --olive: #6b7a3e;
  --char: #1a1d18;
}
.h2-sec {
  padding-block: clamp(80px, 9vw, 136px);
  position: relative;
}
.h2 h2 {
  font-size: clamp(2.1rem, 3.8vw, 3.2rem);
  line-height: 1.1;
}
.h2 h3 {
  line-height: 1.15;
}
.h2 p {
  max-width: 62ch;
}
.h2-img {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sage-deep), var(--forest));
}
.h2-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.h2-img:hover img {
  transform: scale(1.04);
}
.h2-link {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-top: 28px;
  font-weight: 500;
  color: var(--heading);
  border-bottom: 1px solid var(--olive);
  padding-bottom: 4px;
  transition: gap 0.3s var(--ease);
}
.h2-link:hover {
  gap: 16px;
}
.h2-dark {
  background: var(--char);
  color: rgba(250, 245, 234, 0.86);
}
.h2-dark h2,
.h2-dark h3 {
  color: #fff;
}
.h2-dark .eyebrow,
.h2-forest .eyebrow {
  color: var(--sage);
}
.h2-forest {
  background: var(--forest-deep);
  color: rgba(250, 245, 234, 0.86);
}
.h2-forest h2,
.h2-forest h3 {
  color: #fff;
}
.h2-dark em,
.h2-forest em {
  color: var(--sage);
}

/* 1 Hero */
.h2-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--char);
  overflow: hidden;
}
.h2-hero__bg {
  position: absolute;
  inset: 0;
}
.h2-hero__bg video,
.h2-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.h2-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(16, 26, 19, 0.92),
    rgba(16, 26, 19, 0.3) 60%,
    rgba(16, 26, 19, 0.55)
  );
}
.h2-hero .container {
  position: relative;
  z-index: 2;
  padding-block: 150px 120px;
}
.h2-hero h1 {
  color: #fff;
  font-weight: 400;
  font-size: clamp(2.8rem, 6.4vw, 5.4rem);
  max-width: 11em;
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.h2-hero h1 .l {
  display: block;
  overflow: hidden;
  padding-block: 0.05em 0.1em;
}
.h2-hero h1 .l > span {
  display: block;
}
.h2-hero p {
  margin-top: 24px;
  max-width: 520px;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(255, 255, 255, 0.88);
}
.h2-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}
.h2-scroll {
  position: absolute;
  z-index: 2;
  inset-block-end: 30px;
  inset-inline-start: max(24px, calc((100vw - var(--container)) / 2 + 24px));
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.8);
}
.h2-scroll i {
  position: relative;
  width: 56px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.h2-scroll i::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 22px;
  background: #fff;
  animation: h2line 2s var(--ease) infinite;
}
@keyframes h2line {
  from {
    transform: translateX(-24px);
  }
  to {
    transform: translateX(58px);
  }
}

/* 2 Philosophy */
.h2-phil {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
}
.h2-phil__img {
  position: relative;
}
.h2-phil__img .h2-img {
  aspect-ratio: 4 / 5;
}
.h2-phil__img::before {
  content: "";
  position: absolute;
  inset: 28px -22px -22px 28px;
  border: 1px solid var(--sage);
}
.h2-phil__img .h2-img {
  z-index: 1;
}
.h2-phil h2 {
  margin-bottom: 22px;
}
.h2-phil p + p {
  margin-top: 14px;
}
.h2-phil__note {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
  font-size: 0.98rem;
}
.h2-phil__note i {
  color: var(--olive);
  font-size: 1.2rem;
  margin-top: 4px;
}

/* 3 Signature */
.h2-sig {
  background: var(--bg-soft);
}
.h2-sig__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 48px;
}
.h2-sig__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(30px, 5vw, 70px);
}
.h2-feat .h2-img {
  aspect-ratio: 4 / 3;
}
.h2-feat h3 {
  font-size: 2.2rem;
  margin: 22px 0 8px;
}
.h2-dish__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}
.h2-dish__price {
  font-family: var(--ff-head);
  font-size: 1.8rem;
  color: var(--forest);
}
.h2-diet {
  display: flex;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--olive);
}
.h2-rows {
  display: grid;
  align-content: space-between;
}
.h2-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 22px;
  padding-block: 22px;
  border-top: 1px solid var(--border);
}
.h2-row:first-child {
  padding-top: 0;
  border-top: 0;
}
.h2-row .h2-img {
  aspect-ratio: 4 / 3;
}
.h2-row h3 {
  font-size: 1.55rem;
  margin-bottom: 6px;
}
.h2-row p {
  font-size: 0.94rem;
  color: var(--muted);
}
.h2-row .h2-dish__meta {
  margin-top: 10px;
}
.h2-row .h2-dish__price {
  font-size: 1.4rem;
}

/* 4 Seasonal */
.h2-seas {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
}
.h2-seas__media {
  position: relative;
  padding-block-end: 60px;
}
.h2-seas__main {
  aspect-ratio: 5 / 6;
}
.h2-seas__main img {
  height: 118%;
}
.h2-seas__inset {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: -4%;
  width: 42%;
  aspect-ratio: 1;
  border: 8px solid var(--forest-deep);
}
.h2-seas h2 {
  margin-bottom: 18px;
}
.h2-ingr {
  margin-top: 34px;
}
.h2-ingr li {
  display: grid;
  grid-template-columns: 1fr;
  padding-block: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.h2-ingr h3 {
  font-size: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.h2-ingr h3 small {
  font-family: var(--ff-body);
  font-size: 0.8rem;
  color: var(--sage);
  font-weight: 400;
  align-self: center;
}
.h2-ingr p {
  margin-top: 6px;
  font-size: 0.95rem;
  color: rgba(250, 245, 234, 0.75);
}

/* 5 Craft */
.h2-craft__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  align-items: end;
  margin-bottom: 48px;
}
.h2-craft__hero {
  aspect-ratio: 21 / 9;
}
.h2-craft__hero img {
  height: 124%;
}
.h2-stages {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5vw;
  margin-top: 64px;
  padding-top: 44px;
}
.h2-stages__line {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--border);
}
.h2-stages__line::after {
  content: "";
  position: absolute;
  inset: -1px 0 0;
  height: 3px;
  background: var(--olive);
  transform-origin: left center;
  transform: scaleX(var(--p, 1));
}
.h2-stage {
  position: relative;
}
.h2-stage > i {
  display: block;
  font-size: 1.4rem;
  color: var(--olive);
  margin-bottom: 16px;
}
.h2-stage h3 {
  font-size: 1.7rem;
  margin-bottom: 8px;
}
.h2-stage p {
  font-size: 0.97rem;
  color: var(--muted);
}
.h2-stage b {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--olive);
}

/* 6 Menu */
.h2-menu {
  background: var(--bg-tint);
}
.h2-menu__grid {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
  margin-top: 44px;
}
.h2-cats {
  display: grid;
}
.h2-cat {
  text-align: start;
  padding-block: 20px;
  border-top: 1px solid var(--border);
  font-family: var(--ff-head);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition:
    color 0.3s,
    padding 0.4s var(--ease);
}
.h2-cat:last-child {
  border-bottom: 1px solid var(--border);
}
.h2-cat i {
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.3s;
}
.h2-cat:hover {
  color: var(--heading);
}
.h2-cat[aria-selected="true"] {
  color: var(--heading);
  padding-inline-start: 14px;
}
.h2-cat[aria-selected="true"] i {
  opacity: 1;
  color: var(--olive);
}
.h2-pane .h2-img {
  aspect-ratio: 16 / 10;
}
.h2-pane__txt {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 30px;
  margin-top: 22px;
  align-items: start;
}
.h2-pane__txt p {
  color: var(--muted);
  font-size: 0.98rem;
}
.h2-pane__txt ul {
  font-size: 0.94rem;
  border-inline-start: 1px solid var(--border);
  padding-inline-start: 22px;
  display: grid;
  gap: 6px;
}
.h2-pane__txt .h2-link {
  margin-top: 0;
  grid-column: 1 / -1;
  justify-self: start;
}

/* 7 Space */
.h2-space {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: end;
}
.h2-space__a {
  grid-column: 1 / span 7;
  aspect-ratio: 3 / 2;
}
.h2-space__txt {
  grid-column: 8 / span 5;
  padding-inline-start: 2vw;
}
.h2-space__txt h2 {
  margin-bottom: 18px;
}
.h2-space__b {
  grid-column: 2 / span 4;
  aspect-ratio: 4 / 5;
}
.h2-space__c {
  grid-column: 6 / span 3;
  aspect-ratio: 3 / 4;
}
.h2-space__info {
  grid-column: 9 / span 4;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.95rem;
}
.h2-space__info h3 {
  font-size: 1.5rem;
  margin-bottom: 14px;
}
.h2-space__info li {
  display: flex;
  gap: 12px;
  padding-block: 7px;
}
.h2-space__info i {
  color: var(--sage);
  margin-top: 5px;
  width: 18px;
}

/* 8 Commitment */
.h2-commit {
  background: var(--bg);
}
.h2-commit h2 {
  max-width: 14em;
  margin-bottom: 54px;
}
.h2-commit__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
}
.h2-pledge {
  padding: 36px clamp(20px, 3vw, 44px) 10px;
  border-inline-start: 1px solid var(--border);
}
.h2-pledge:first-child {
  border-inline-start: 0;
  padding-inline-start: 0;
}
.h2-pledge > i {
  font-size: 1.6rem;
  color: var(--olive);
  margin-bottom: 22px;
  display: block;
  transition: transform 0.5s var(--ease);
}
.h2-pledge:hover > i {
  transform: translateY(-4px);
}
.h2-pledge h3 {
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.h2-pledge p {
  font-size: 0.97rem;
  color: var(--muted);
}

/* 9 Guests */
.h2-guest {
  background: var(--bg-soft);
  overflow: hidden;
}
.h2-guest__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 44px;
}
.h2-guest__view {
  overflow: hidden;
}
.h2-guest__track {
  display: flex;
}
.h2-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  padding-inline-end: 2px;
}
.h2-slide .h2-img {
  aspect-ratio: 4 / 5;
}
.h2-slide blockquote {
  font-family: var(--ff-head);
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  line-height: 1.3;
  color: var(--heading);
  max-width: 28em;
}
.h2-slide figcaption {
  margin-top: 22px;
  font-size: 0.92rem;
  color: var(--muted);
}
.h2-slide figcaption strong {
  display: block;
  color: var(--heading);
  font-size: 1.05rem;
  font-weight: 500;
}
.h2-guest__ctrl {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
}
.h2-guest__ctrl button {
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--heading);
  transition:
    background-color 0.3s,
    color 0.3s;
}
.h2-guest__ctrl button:hover {
  background: var(--forest);
  color: #fff;
}
.h2-guest__ctrl output {
  font-size: 0.92rem;
  color: var(--muted);
  min-width: 4ch;
  text-align: center;
}

/* 10 Reserve */
.h2-res {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  background: var(--forest-deep);
}
.h2-res__bg {
  position: absolute;
  inset: 0;
}
.h2-res__bg img {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -8%;
  width: 100%;
  height: 116%;
  object-fit: cover;
}
.h2-res::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(16, 28, 20, 0.93) 20%,
    rgba(16, 28, 20, 0.45)
  );
}
.h2-res .container {
  position: relative;
  z-index: 2;
  padding-block: 100px;
}
.h2-res h2 {
  color: #fff;
  max-width: 10em;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
}
.h2-res p {
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.86);
  max-width: 500px;
}
.h2-res .btn {
  margin-top: 32px;
}
.h2-res__info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 260px));
  gap: 30px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.95rem;
}
.h2-res__info h3 {
  color: #fff;
  font-size: 1.35rem;
  margin-bottom: 8px;
}
.h2-res__info li {
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 1024px) {
  .h2-phil,
  .h2-sig__grid,
  .h2-seas,
  .h2-craft__head,
  .h2-menu__grid {
    grid-template-columns: 1fr;
  }
  .h2-phil__img {
    max-width: 520px;
  }
  .h2-seas__media {
    max-width: 560px;
  }
  .h2-space__a,
  .h2-space__txt {
    grid-column: 1 / -1;
    padding: 0;
  }
  .h2-space__b {
    grid-column: 1 / span 6;
  }
  .h2-space__c {
    grid-column: 7 / span 6;
  }
  .h2-space__info {
    grid-column: 1 / -1;
  }
  .h2-sig__head,
  .h2-guest__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .h2-cats {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
  }
}
@media (max-width: 767px) {
  .h2-hero .container {
    padding-block: 120px 100px;
  }
  .h2-hero__cta .btn {
    flex: 1 1 100%;
  }
  .h2-scroll {
    display: none;
  }
  .h2-phil__img::before {
    inset: 16px -10px -10px 16px;
  }
  .h2-row {
    grid-template-columns: 110px 1fr;
    gap: 16px;
  }
  .h2-feat h3 {
    font-size: 1.8rem;
  }
  .h2-seas__inset {
    width: 46%;
    inset-inline-end: 0;
  }
  .h2-craft__hero {
    aspect-ratio: 4 / 3;
  }
  .h2-stages {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 0 0 0 30px;
    margin-top: 44px;
  }
  .h2-stages__line {
    inset-inline: auto;
    inset-block: 0;
    inset-inline-start: 0;
    width: 1px;
    height: auto;
  }
  .h2-stages__line::after {
    inset: 0 -1px 0 auto;
    width: 3px;
    height: auto;
    transform-origin: top center;
    transform: scaleY(var(--p, 1));
  }
  .h2-cats {
    display: flex;
    overflow-x: auto;
    gap: 22px;
    border-bottom: 1px solid var(--border);
  }
  .h2-cat {
    border: 0 !important;
    white-space: nowrap;
    font-size: 1.3rem;
    padding: 10px 0;
  }
  .h2-cat[aria-selected="true"] {
    padding-inline-start: 0;
    box-shadow: inset 0 -2px var(--olive);
  }
  .h2-cat i {
    display: none;
  }
  .h2-pane__txt {
    grid-template-columns: 1fr;
  }
  .h2-pane__txt ul {
    border: 0;
    padding: 0;
  }
  .h2-space__b,
  .h2-space__c {
    grid-column: 1 / -1;
  }
  .h2-commit__row {
    grid-template-columns: 1fr;
  }
  .h2-pledge,
  .h2-pledge:first-child {
    border-inline-start: 0;
    padding: 30px 0 10px;
    border-top: 1px solid var(--border);
  }
  .h2-pledge:first-child {
    border-top: 0;
  }
  .h2-slide {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .h2-slide .h2-img {
    max-width: 200px;
  }
  .h2-res__info {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .h2-res::before {
    background: rgba(16, 28, 20, 0.82);
  }
}
/* =========================================================
   Our Menu page — editorial menu layout (all rules mn-*)
   ========================================================= */
.mn {
  --char: #1d201b;
}
.mn h2,
.mn h3 {
  font-weight: 400;
  line-height: 1.12;
}
.mn h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
}
.mn p {
  max-width: 60ch;
}
.mn section[id] {
  scroll-margin-top: 110px;
}
.mn-sec {
  padding-block: clamp(72px, 8vw, 120px);
}
.mn-img {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sage-deep), var(--forest));
}
.mn-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.mn-img:hover img {
  transform: scale(1.04);
}
.mn-cap {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--muted);
}
.mn-head {
  margin-bottom: 44px;
  max-width: 640px;
}
.mn-head p {
  margin-top: 14px;
  color: var(--muted);
}
.mn-rule {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}
.mn-note {
  font-size: 0.88rem;
  color: var(--muted);
}

/* menu list */
.mn-list > li {
  padding-block: 20px;
  border-top: 1px solid var(--border);
}
.mn-list > li:last-child {
  border-bottom: 1px solid var(--border);
}
.mn-item__top {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.mn-item__top h3 {
  font-size: 1.5rem;
}
.mn-item__top i {
  font-size: 0.8rem;
  color: var(--olive, #6b7a3e);
  margin-inline-start: 6px;
}
.mn-item__rule {
  flex: 1;
  min-width: 16px;
  border-bottom: 1px dotted var(--border);
  transform: translateY(-4px);
}
.mn-price {
  font-family: var(--ff-head);
  font-size: 1.4rem;
  color: var(--forest);
  white-space: nowrap;
}
.mn-list p {
  margin-top: 6px;
  font-size: 0.95rem;
  color: var(--muted);
}
.mn-list--cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(30px, 5vw, 70px);
}
.mn-list--cols > li:nth-last-child(2) {
  border-bottom: 1px solid var(--border);
}

/* 1 Intro */
.mn-intro {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 92vh;
  background:
    linear-gradient(90deg, rgba(12, 26, 18, 0.863) 0%, rgba(12, 26, 18, 0.58) 48%, rgba(12, 26, 18, 0.16) 100%),
    url("../images/hero our menu.jpg") center / cover no-repeat,
    var(--forest-deep);
  color: rgba(250, 245, 234, 0.86);
}
.mn-intro__txt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 150px 80px;
  padding-inline-start: max(24px, calc((100vw - var(--container)) / 2 + 24px));
  padding-inline-end: clamp(24px, 6vw, 90px);
}
.mn-intro h1 {
  color: #fff;
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1.06;
  max-width: 10em;
}
.mn-intro h1 span {
  display: block;
  overflow: hidden;
  padding-block: 0.04em 0.1em;
}
.mn-intro h1 b {
  display: block;
  font-weight: 400;
}
.mn-intro p {
  margin-top: 22px;
  max-width: 460px;
}
.mn-intro__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  max-width: 460px;
  font-size: 0.94rem;
}
.mn-intro__nav a {
  color: #fff;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.mn-intro__nav a:hover {
  border-color: var(--sage);
}
.mn-intro__img {
  min-height: 420px;
}
.mn-intro__img img {
  transform: scale(1.04);
}

/* sticky jump bar */
.mn-jump {
  position: sticky;
  inset-block-start: 60px;
  z-index: 900;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
}
.mn-jump ul {
  display: flex;
  gap: 6px 30px;
  overflow-x: auto;
  padding-block: 4px;
  scrollbar-width: none;
}
.mn-jump a {
  display: block;
  padding: 14px 0;
  font-size: 0.92rem;
  white-space: nowrap;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition:
    color 0.3s,
    border-color 0.3s;
}
.mn-jump a:hover,
.mn-jump a.is-on {
  color: var(--heading);
  border-color: var(--forest);
}

/* 2 Philosophy */
.mn-phil {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.mn-phil__txt {
  grid-column: 1;
  grid-row: 1;
}
.mn-phil__media {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.mn-phil__txt p + p {
  margin-top: 14px;
}
.mn-phil__list {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}
.mn-phil__list li {
  padding-block: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.94rem;
}
.mn-phil__list b {
  display: block;
  font-family: var(--ff-head);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--heading);
}
.mn-phil .mn-img {
  aspect-ratio: 4 / 5;
}

/* 3 Starters */
.mn-start {
  background: var(--bg-soft);
}
.mn-start__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
}
.mn-start__pic {
  position: sticky;
  inset-block-start: 130px;
}
.mn-start__pic .mn-img {
  aspect-ratio: 4 / 5;
}
.mn-start__pic h3 {
  font-size: 1.5rem;
  margin-top: 16px;
}

/* 4 Bowls */
.mn-bowls__pano {
  aspect-ratio: 21 / 8;
  margin-bottom: 44px;
}
.mn-bowls__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  align-items: end;
  margin-bottom: 36px;
}
.mn-bowls__top p {
  color: var(--muted);
}

/* 5 Mains */
.mn-mains {
  background: var(--bg-tint);
}
.mn-mains__feat {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.mn-mains__feat .mn-img {
  aspect-ratio: 4 / 3.2;
}
.mn-mains__feat h3 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  margin-bottom: 8px;
}
.mn-mains__feat .mn-price {
  font-size: 1.7rem;
}
.mn-mains__feat dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 20px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 0.93rem;
}
.mn-mains__feat dt {
  color: var(--muted);
}
.mn-mains__more {
  margin-top: 60px;
}
.mn-mains__more > h3 {
  font-size: 1.3rem;
  margin-bottom: 14px;
  color: var(--muted);
}

/* 6 Desserts */
.mn-sweet {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.mn-sweet__pics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.mn-sweet__pics .mn-img {
  aspect-ratio: 3 / 4;
}
.mn-sweet__pics .mn-img:last-child {
  margin-top: 60px;
}

/* 7 Drinks */
.mn-drinks {
  background: var(--char);
  color: rgba(250, 245, 234, 0.84);
}
.mn-drinks h2,
.mn-drinks h3,
.mn-drinks .mn-price {
  color: #fff;
}
.mn-drinks .mn-head p,
.mn-drinks .mn-list p {
  color: rgba(250, 245, 234, 0.65);
}
.mn-drinks__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(26px, 4vw, 60px);
}
.mn-drinks__col > .mn-img {
  aspect-ratio: 16 / 9;
  margin-bottom: 18px;
}
.mn-drinks__col > h3 {
  font-size: 1.7rem;
  margin-bottom: 8px;
}
.mn-drinks .mn-list > li,
.mn-drinks .mn-list > li:last-child {
  border-color: rgba(255, 255, 255, 0.16);
}
.mn-drinks .mn-item__top h3 {
  font-size: 1.25rem;
}
.mn-drinks .mn-item__rule {
  border-color: rgba(255, 255, 255, 0.25);
}

/* 8 Seasonal */
.mn-season {
  background: var(--bg);
}
.mn-season__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
}
.mn-season__pic {
  grid-column: 1 / span 7;
  aspect-ratio: 4 / 3;
}
.mn-season__card {
  grid-column: 7 / span 6;
  grid-row: 1;
  position: relative;
  z-index: 2;
  margin-inline-start: 6%;
  padding: clamp(28px, 4vw, 54px);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-top: 18%;
}
.mn-season__card h2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  margin-bottom: 14px;
}
.mn-season__card blockquote {
  margin-top: 18px;
  padding-inline-start: 18px;
  border-inline-start: 2px solid var(--sage);
  font-family: var(--ff-head);
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--heading);
}
.mn-season__meta {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 8px 32px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}
.mn-season__meta dt {
  color: var(--muted);
  font-size: 0.8rem;
}
.mn-season__meta dd {
  margin: 0;
}

/* 9 Info */
.mn-info {
  background: var(--bg-soft);
}
.mn-info__grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
}
.mn-faq details {
  border-top: 1px solid var(--border);
  padding-block: 4px;
}
.mn-faq details:last-child {
  border-bottom: 1px solid var(--border);
}
.mn-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-block: 16px;
  font-family: var(--ff-head);
  font-size: 1.35rem;
  color: var(--heading);
}
.mn-faq summary::-webkit-details-marker {
  display: none;
}
.mn-faq summary i {
  font-size: 0.8rem;
  transition: transform 0.35s var(--ease);
}
.mn-faq details[open] summary i {
  transform: rotate(45deg);
}
.mn-faq details p {
  padding-bottom: 18px;
  color: var(--muted);
  font-size: 0.96rem;
}
.mn-book {
  background: var(--forest-deep);
  color: rgba(250, 245, 234, 0.86);
  padding: clamp(30px, 4vw, 50px);
}
.mn-book h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 14px;
}
.mn-book .btn {
  margin-top: 24px;
}
.mn-book ul {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.93rem;
  display: grid;
  gap: 8px;
}
.mn-book li i {
  width: 22px;
  color: var(--sage);
}

@media (max-width: 1024px) {
  .mn-intro {
    grid-template-columns: 1fr;
    min-height: 92vh;
  }
  .mn-intro__txt {
    padding: 130px 24px 56px !important;
  }
  .mn-intro__img {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
  .mn-phil {
    grid-template-columns: 1fr 1fr;
  }
  .mn-phil__txt,
  .mn-phil__media {
    grid-row: auto;
  }
  .mn-phil__media {
    grid-column: 2;
  }
  .mn-phil__list {
    grid-column: 1 / -1;
    grid-row: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 28px;
  }
  .mn-start__grid,
  .mn-mains__feat,
  .mn-sweet,
  .mn-info__grid,
  .mn-bowls__top {
    grid-template-columns: 1fr;
  }
  .mn-start__pic {
    position: static;
    order: -1;
    max-width: 480px;
  }
  .mn-start__pic .mn-img {
    aspect-ratio: 4 / 3;
  }
  .mn-drinks__cols {
    grid-template-columns: 1fr;
    max-width: 640px;
  }
  .mn-season__pic {
    grid-column: 1 / -1;
  }
  .mn-season__card {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: -60px 24px 0;
  }
}
@media (max-width: 767px) {
  .mn-jump {
    inset-block-start: 56px;
  }
  .mn-intro__txt {
    padding-top: 110px;
  }
  .mn-phil {
    grid-template-columns: 1fr;
  }
  .mn-phil__txt,
  .mn-phil__media,
  .mn-phil__list {
    grid-column: 1;
    grid-row: auto;
  }
  .mn-phil__list {
    grid-template-columns: 1fr;
  }
  .mn-phil .mn-img {
    aspect-ratio: 4 / 3;
  }
  .mn-list--cols {
    grid-template-columns: 1fr;
  }
  .mn-list--cols > li:nth-last-child(2) {
    border-bottom: 0;
  }
  .mn-item__top h3 {
    font-size: 1.3rem;
  }
  .mn-bowls__pano {
    aspect-ratio: 16 / 10;
  }
  .mn-sweet__pics {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .mn-sweet__pics .mn-img:last-child {
    margin-top: 30px;
  }
  .mn-season__card {
    margin: -40px 0 0;
  }
  .mn-season__meta {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
   Main Course page (mc-*)
   ========================================================= */
.mc-hero {
  position: relative;
  min-height: 80svh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--forest-deep);
  overflow: hidden;
}
.mc-hero__bg,
.mc-hero__bg img,
.mc-season__bg,
.mc-season__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      105deg,
      rgba(18, 36, 26, 0.88) 8%,
      rgba(18, 36, 26, 0.5) 55%,
      rgba(18, 36, 26, 0.25)
    ),
    linear-gradient(0deg, rgba(18, 36, 26, 0.55), transparent 40%);
}
.mc-hero .container {
  position: relative;
  z-index: 2;
  padding-block: calc(var(--header-h) + 70px) 70px;
}
.mc-hero h1 {
  color: #fff;
  font-size: clamp(2.8rem, 6.4vw, 5.4rem);
  max-width: 11em;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.mc-hero h1 em {
  color: #efb59d;
}
.mc-hero p {
  margin-top: 22px;
  max-width: 540px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.1rem;
}
.mc-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.mc-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 26px;
}
.mc-crumbs a:hover {
  color: #efb59d;
}
.mc-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 46px;
}
.mc-jump a {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 0.85rem;
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.35s var(--ease);
}
.mc-jump a:hover {
  background: #fff;
  color: var(--forest);
  transform: translateY(-3px);
}
/* 2 signature */
.mc-sig {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
}
.mc-card {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  border-radius: var(--radius);
  background: var(--forest);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.mc-card--big {
  grid-row: span 2;
  min-height: 620px;
}
.mc-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.mc-card:hover img {
  transform: scale(1.06);
}
.mc-card__cap {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 70px 28px 26px;
  background: linear-gradient(0deg, rgba(14, 26, 19, 0.9), transparent);
}
.mc-card__cap h3 {
  color: #fff;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  margin-top: 10px;
}
.mc-card:not(.mc-card--big) .mc-card__cap h3 {
  margin-top: 0;
  font-size: 1.6rem;
}
.mc-card__cap p {
  margin-top: 8px;
  max-width: 42ch;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.86);
}
.mc-card__cap .dish-card__tag {
  position: static;
}
/* 3 comfort */
.mc-comfort {
  background: var(--bg-tint);
}
.mc-comfort__grid,
.mc-veg__grid,
.mc-find__grid {
  display: grid;
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.mc-comfort__grid {
  grid-template-columns: 0.9fr 1.2fr;
}
.mc-collage {
  position: relative;
  padding-bottom: 60px;
}
.mc-collage img,
.mc-veg__img img,
.mc-veg__inset img,
.mc-inside__img img,
.mc-media img,
.mc-season__inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mc-collage__a {
  aspect-ratio: 4 / 5;
  border-radius: 200px 200px var(--radius) var(--radius);
  overflow: hidden;
  width: 82%;
  box-shadow: var(--shadow-md);
  background: var(--sage-light);
}
.mc-collage__b {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  width: 52%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 8px solid var(--bg-tint);
  box-shadow: var(--shadow-md);
  background: var(--sage-light);
}
.mc-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 36px;
}
.mc-tile {
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s,
    border-color 0.3s;
}
.mc-tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--sage);
}
.mc-tile > i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--forest);
}
.mc-tile h3 {
  font-size: 1.4rem;
}
.mc-tile p {
  margin-top: 8px;
  font-size: 0.93rem;
  color: var(--muted);
}
/* 4 vegetables */
.mc-veg {
  background: var(--forest-deep);
  color: rgba(255, 255, 255, 0.85);
}
.mc-veg__grid {
  grid-template-columns: 1.1fr 0.9fr;
}
.mc-tech {
  margin-top: 38px;
}
.mc-tech li {
  display: flex;
  gap: 24px;
  padding-block: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.mc-tech li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.mc-tech span {
  font-family: var(--ff-head);
  font-size: 2.6rem;
  line-height: 1;
  color: #efb59d;
}
.mc-tech h3 {
  color: #fff;
  font-size: 1.6rem;
}
.mc-tech p {
  margin-top: 6px;
  font-size: 0.95rem;
}
.mc-veg__img {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: var(--forest);
}
.mc-veg__img > img {
  border-radius: var(--radius);
}
.mc-veg__inset {
  position: absolute;
  inset-inline-start: -12%;
  inset-block-end: 8%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 7px solid var(--forest-deep);
  box-shadow: var(--shadow-lg);
}
/* 5 protein accordion */
.mc-acc {
  display: flex;
  gap: 14px;
  height: 460px;
}
.mc-acc__p {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 28px 24px;
  border-radius: var(--radius);
  background: var(--c);
  color: #fff;
  text-align: start;
  overflow: hidden;
  transition:
    flex 0.7s var(--ease),
    box-shadow 0.4s;
}
.mc-acc__p.is-open {
  flex: 4;
  box-shadow: var(--shadow-md);
}
.mc-acc__p:hover {
  box-shadow: var(--shadow-md);
}
.mc-acc__p i {
  position: absolute;
  inset-block-start: 26px;
  inset-inline-start: 24px;
  font-size: 1.5rem;
  opacity: 0.9;
}
.mc-acc__p strong {
  font-family: var(--ff-head);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.1;
}
.mc-acc__p span {
  max-width: 36ch;
  font-size: 0.98rem;
  opacity: 0;
  max-height: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s 0.15s,
    max-height 0.5s,
    transform 0.5s 0.15s;
}
.mc-acc__p.is-open span {
  opacity: 1;
  max-height: 140px;
  transform: none;
}
.mc-acc__p:not(.is-open) strong {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-self: flex-start;
}
/* 6 global */
.mc-global {
  background: var(--bg-soft);
}
.mc-reg {
  display: grid;
  grid-template-columns: 0.7fr 1.5fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.mc-tabs {
  display: grid;
  gap: 10px;
}
.mc-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 500;
  text-align: start;
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.35s var(--ease);
}
.mc-tab:hover {
  transform: translateX(6px);
}
.mc-tab i {
  color: var(--terracotta);
  width: 1.2em;
  text-align: center;
}
.mc-tab.is-active {
  background: var(--forest);
  color: #fff;
  border-color: var(--forest);
}
.mc-tab.is-active i {
  color: #efb59d;
}
.mc-pans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.mc-media {
  min-height: 380px;
  background: var(--sage-light);
}
.mc-pan {
  padding: clamp(24px, 3vw, 40px);
  align-self: center;
  animation: mcFade 0.6s var(--ease);
}
.mc-pan h3 {
  font-size: 2rem;
  margin-bottom: 20px;
}
.mc-pan li {
  padding-block: 16px;
  border-top: 1px solid var(--border);
}
.mc-pan strong {
  display: block;
  font-family: var(--ff-head);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--heading);
}
.mc-pan span {
  font-size: 0.93rem;
  color: var(--muted);
}
@keyframes mcFade {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* 7 seasonal */
.mc-season {
  position: relative;
  min-height: 680px;
  display: flex;
  align-items: center;
  color: #fff;
  background: var(--forest-deep);
  overflow: hidden;
  padding-block: 90px;
}
.mc-season::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(14, 28, 20, 0.8),
    rgba(14, 28, 20, 0.25)
  );
}
.mc-season__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.mc-season__card {
  max-width: 540px;
  padding: clamp(28px, 4vw, 50px);
  border-radius: var(--radius);
  background: linear-gradient(150deg, #c4694a, #a14a30);
  box-shadow: var(--shadow-lg);
}
.mc-season__card h2 {
  color: #fff;
  font-size: clamp(2rem, 3.8vw, 3rem);
}
.mc-season__card h2 em {
  color: #ffe0d1;
}
.mc-season__card p {
  margin: 18px 0 20px;
  color: rgba(255, 255, 255, 0.92);
}
.mc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.mc-pills li {
  padding: 5px 14px;
  font-size: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
}
.mc-season__inset {
  width: 260px;
  flex: none;
}
.mc-season__inset img {
  aspect-ratio: 4 / 5;
  border-radius: 130px 130px var(--radius) var(--radius);
  border: 6px solid rgba(255, 255, 255, 0.85);
}
.mc-season__inset figcaption {
  margin-top: 12px;
  font-size: 0.85rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}
/* 8 inside */
.mc-inside__top {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: end;
  margin-bottom: 56px;
}
.mc-inside__img {
  aspect-ratio: 16 / 8;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sage-light);
}
.mc-inside {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
}
.mc-inside li {
  padding: 32px 26px 8px;
  border-inline-end: 1px solid var(--border);
}
.mc-inside li:first-child {
  padding-inline-start: 0;
}
.mc-inside li:last-child {
  border-inline-end: 0;
}
.mc-inside i {
  font-size: 1.6rem;
  color: var(--terracotta);
  margin-bottom: 16px;
  transition: transform 0.4s var(--ease);
}
.mc-inside li:hover i {
  transform: translateY(-5px) rotate(-8deg);
}
.mc-inside h3 {
  font-size: 1.4rem;
}
.mc-inside p {
  margin-top: 8px;
  font-size: 0.93rem;
  color: var(--muted);
}
.mc-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 44px;
  padding: 18px 22px;
  border-radius: var(--radius-sm);
  background: var(--tint);
  font-size: 0.95rem;
}
.mc-note i {
  margin-top: 5px;
  color: var(--forest);
}
/* 9 finder */
.mc-find {
  background: var(--bg-tint);
}
.mc-find__grid {
  grid-template-columns: 1.1fr 0.9fr;
}
.mc-moods {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.mc-mood {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-weight: 500;
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.35s var(--ease);
}
.mc-mood:hover {
  transform: translateY(-3px);
  border-color: var(--sage);
}
.mc-mood[aria-pressed="true"] {
  background: var(--forest);
  color: #fff;
  border-color: var(--forest);
}
.mc-result {
  padding: clamp(28px, 4vw, 48px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.mc-result h3 {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
}
.mc-result p {
  margin-top: 12px;
  color: var(--muted);
}
.mc-result.is-swap {
  animation: mcFade 0.5s var(--ease);
}
.mc-result__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

@media (max-width: 1024px) {
  .mc-sig {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .mc-card--big {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 460px;
  }
  .mc-comfort__grid,
  .mc-veg__grid,
  .mc-find__grid,
  .mc-inside__top {
    grid-template-columns: 1fr;
  }
  .mc-collage {
    max-width: 520px;
  }
  .mc-veg__img {
    max-width: 520px;
    width: 100%;
    margin-inline: auto;
    aspect-ratio: 1;
  }
  .mc-veg__inset {
    inset-inline-start: 4%;
  }
  .mc-reg {
    grid-template-columns: 1fr;
  }
  .mc-tabs {
    grid-template-columns: repeat(4, 1fr);
  }
  .mc-tab {
    flex-direction: column;
    text-align: center;
    padding: 14px 8px;
    font-size: 0.88rem;
    gap: 8px;
  }
  .mc-tab:hover {
    transform: translateY(-3px);
  }
  .mc-season__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .mc-season__inset {
    display: none;
  }
  .mc-inside {
    grid-template-columns: 1fr 1fr;
  }
  .mc-inside li {
    padding-inline: 0 22px;
    border-bottom: 1px solid var(--border);
  }
  .mc-inside li:nth-child(2) {
    border-inline-end: 0;
  }
}
@media (max-width: 767px) {
  .mc-hero {
    min-height: 88svh;
  }
  .mc-sig,
  .mc-tiles,
  .mc-pans {
    grid-template-columns: 1fr;
  }
  .mc-card,
  .mc-card--big {
    min-height: 340px;
  }
  .mc-acc {
    flex-direction: column;
    height: auto;
  }
  .mc-acc__p,
  .mc-acc__p.is-open {
    flex: none;
    padding: 22px 20px 22px 62px;
    min-height: 72px;
    justify-content: center;
  }
  .mc-acc__p i {
    inset-block-start: 22px;
    inset-inline-start: 20px;
  }
  .mc-acc__p:not(.is-open) strong {
    writing-mode: horizontal-tb;
    transform: none;
  }
  .mc-acc__p span {
    transition:
      opacity 0.4s,
      max-height 0.4s;
  }
  .mc-tabs {
    grid-template-columns: 1fr 1fr;
  }
  .mc-tab {
    flex-direction: row;
    text-align: start;
    padding: 14px 16px;
  }
  .mc-media {
    min-height: 220px;
  }
  .mc-season {
    min-height: 0;
    padding-block: 70px;
  }
  .mc-inside {
    grid-template-columns: 1fr;
  }
  .mc-inside li {
    border-inline-end: 0;
    padding-inline: 0;
  }
  .mc-mood {
    flex: 1 1 100%;
    justify-content: center;
  }
  .mc-result__cta .btn {
    flex: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-card img,
  .mc-acc__p,
  .mc-tile,
  .mc-pan,
  .mc-result {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   Contact page — all rules ct-*  (body.page-contact)
   ========================================================= */
.ct section[id] {
  scroll-margin-top: 90px;
}
.ct-sec {
  padding-block: clamp(64px, 8vw, 112px);
  background: var(--bg);
}
.ct-sec--soft {
  background: var(--bg-soft);
}
.ct-head h2,
.ct-find__info h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
}
.ct-head > p {
  margin-top: 14px;
  color: var(--muted);
  max-width: 46ch;
}
.ct-faq__help {
  display: grid;
  justify-items: start;
  gap: 10px;
  max-width: 420px;
  margin-top: clamp(28px, 4vw, 48px);
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.ct-faq__help-icon {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 4px;
  place-items: center;
  border-radius: 15px;
  background: var(--tint);
  color: var(--terracotta);
}
.ct-faq__help h3 {
  font-size: 1.5rem;
}
.ct-faq__help > p {
  color: var(--muted);
  font-size: 0.95rem;
}
.ct-faq__help .btn {
  margin-top: 6px;
}
.ct-split {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
}

/* 1 Hero */
.ct-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 90vh;
  overflow: hidden;
  background: var(--forest-deep);
  color: rgba(250, 245, 234, 0.86);
}
.ct-hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(10, 20, 14, 0.38);
  content: "";
}
.ct-hero__txt {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 150px 80px;
  padding-inline-start: max(24px, calc((100vw - var(--container)) / 2 + 24px));
  padding-inline-end: clamp(24px, 6vw, 90px);
}
.ct-crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  font-size: 0.88rem;
  color: var(--sage);
}
.ct-crumbs i {
  font-size: 0.6rem;
}
.ct-crumbs a {
  transition: color 0.3s;
}
.ct-crumbs a:hover {
  color: #fff;
}
.ct-hero h1 {
  color: #fff;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1.06;
  max-width: 10em;
}
.ct-hero h1 span {
  display: block;
  overflow: hidden;
  padding-block: 0.04em 0.1em;
}
.ct-hero h1 b {
  display: block;
  font-weight: 400;
}
.ct-hero__txt > p {
  margin-top: 22px;
  max-width: 480px;
}
.ct-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.ct-hero__img {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sage-deep), var(--forest));
}
.ct-hero__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ct-hero__img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(15, 35, 25, 0.55),
    rgba(15, 35, 25, 0.2)
  );
  pointer-events: none;
}
/* Info list */
.ct-info {
  margin-top: 30px;
}
.ct-info li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding-block: 18px;
  border-top: 1px solid var(--border);
}
.ct-info li:last-child {
  border-bottom: 1px solid var(--border);
}
.ct-info i {
  color: var(--terracotta);
  font-size: 1.1rem;
  margin-top: 6px;
}
.ct-info span {
  display: block;
  font-size: 0.86rem;
  color: var(--muted);
}
.ct-info a {
  font-family: var(--ff-head);
  font-size: 1.4rem;
  color: var(--heading);
  line-height: 1.3;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.ct-info a:hover {
  border-color: var(--terracotta);
}
.ct-points {
  margin-top: 26px;
  display: grid;
  gap: 10px;
  font-size: 0.95rem;
}
.ct-points i,
.ct-list i {
  color: var(--terracotta);
  margin-inline-end: 10px;
}
.ct-res__callout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.ct-res__callout-icon {
  display: grid;
  flex: 0 0 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: var(--tint);
  color: var(--terracotta);
}
.ct-res__callout h3 {
  font-size: 1.35rem;
}
.ct-res__callout p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.92rem;
}
.ct-res__callout a {
  display: inline-block;
  margin-top: 8px;
  font-weight: 500;
  color: var(--heading);
  transition: color 0.3s;
}
.ct-res__callout a:hover {
  color: var(--terracotta);
}

/* Forms */
.ct-card {
  padding: clamp(24px, 4vw, 44px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: var(--shadow-sm);
}
.ct-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 24px;
}
.ct-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.ct-field--full {
  grid-column: 1 / -1;
}
.ct-field label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--heading);
  transition: color 0.3s;
}
.ct-field label small {
  font-weight: 350;
  color: var(--muted);
}
.ct-field:focus-within label {
  color: var(--terracotta);
}
.ct-field input,
.ct-field select,
.ct-field textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  transition:
    border-color 0.3s,
    box-shadow 0.35s var(--ease),
    background-color 0.3s,
    transform 0.35s var(--ease);
}
.ct-field textarea {
  resize: vertical;
  min-height: 96px;
}
.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus {
  outline: 0;
  border-color: var(--terracotta);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(196, 105, 74, 0.16);
  transform: translateY(-1px);
}
.ct-field [aria-invalid="true"] {
  border-color: #b3402a;
}
.ct-err {
  font-size: 0.84rem;
  color: #b3402a;
}
.ct-err:empty {
  display: none;
}
.ct-done {
  text-align: center;
  padding: clamp(30px, 5vw, 56px) 12px;
  outline: 0;
}
.ct-done > i {
  font-size: 2.6rem;
  color: var(--sage-deep);
}
.ct-done h3 {
  font-size: 2rem;
  margin-top: 14px;
}
.ct-done p {
  margin: 10px auto 0;
  max-width: 44ch;
  color: var(--muted);
}
.ct-res {
  background: var(--bg-tint);
}
.ct-res__img {
  margin-top: 30px;
  aspect-ratio: 4 / 3;
  max-width: 420px;
  border-radius: 200px 200px var(--radius) var(--radius);
  overflow: hidden;
  background: linear-gradient(160deg, var(--sage), var(--forest));
  box-shadow: var(--shadow-md);
}
.ct-res__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 3 Visit */
.ct-find {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 70px);
  align-items: stretch;
}
.ct-map {
  position: relative;
  min-height: 480px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, var(--sage-light), var(--beige));
}
.ct-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ct-find address {
  font-style: normal;
  margin-top: 14px;
  font-size: 1.1rem;
}
.ct-find .link-arrow {
  margin-top: 18px;
}
.ct-find__info h3 {
  font-size: 1.5rem;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.ct-list {
  margin-top: 12px;
  display: grid;
  gap: 8px;
  font-size: 0.96rem;
}
.ct-table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
}
.ct-table th,
.ct-table td {
  padding: 12px 8px;
  text-align: start;
  border-bottom: 1px dashed var(--border);
  font-weight: 350;
}
.ct-table th {
  font-family: var(--ff-head);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--heading);
}
.ct-table td {
  white-space: nowrap;
  text-align: end;
}
.ct-table tr.is-today {
  background: var(--tint);
}
.ct-table tr.is-today th::after {
  content: "Today";
  margin-inline-start: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--terracotta);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 0.72rem;
  vertical-align: middle;
}

/* 5 FAQ */
.ct-faq__item {
  border-top: 1px solid var(--border);
}
.ct-faq__item:last-child {
  border-bottom: 1px solid var(--border);
}
.ct-faq__item h3 {
  font-size: inherit;
}
.ct-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding-block: 22px;
  text-align: start;
  font-family: var(--ff-head);
  font-size: 1.5rem;
  color: var(--heading);
  line-height: 1.2;
}
.ct-faq__q i {
  flex: none;
  font-size: 0.9rem;
  color: var(--terracotta);
  transition: transform 0.45s var(--ease);
}
.ct-faq__q[aria-expanded="true"] i {
  transform: rotate(135deg);
}
.ct-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.ct-faq__a > div {
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.4s,
    visibility 0.5s;
}
.ct-faq__a p {
  padding-bottom: 24px;
  color: var(--muted);
  max-width: 56ch;
}
.ct-faq__item.is-open .ct-faq__a {
  grid-template-rows: 1fr;
}
.ct-faq__item.is-open .ct-faq__a > div {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 1024px) {
  .ct-hero {
    grid-template-columns: 1fr;
  }
  .ct-hero__txt {
    padding-block: 130px 56px;
    padding-inline: 24px;
  }
  .ct-split,
  .ct-find {
    grid-template-columns: 1fr;
  }
  .ct-map {
    min-height: 380px;
  }
  .ct-res__img {
    max-width: 480px;
  }
}
@media (max-width: 767px) {
  .ct-hero__txt {
    padding-inline: 18px;
    padding-block: 112px 44px;
  }
  .ct-hero__actions .btn {
    flex: 1 1 100%;
  }
  .ct-form {
    grid-template-columns: 1fr;
  }
  .ct-info a {
    font-size: 1.2rem;
    overflow-wrap: anywhere;
  }
  .ct-faq__q {
    font-size: 1.3rem;
  }
  .ct-map {
    min-height: 320px;
  }
  .ct-table th {
    font-size: 1.1rem;
  }
  .ct-table td {
    font-size: 0.9rem;
  }
  .ct-table tr.is-today th::after {
    display: block;
    width: max-content;
    margin: 4px 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ct-faq__a,
  .ct-faq__a > div,
  .ct-field input {
    transition: none !important;
  }
}

/* =========================================================
   Starters page — all rules st-*  (body.page-starters)
   ========================================================= */
.st section[id] {
  scroll-margin-top: 90px;
}
.st-sec {
  padding-block: clamp(64px, 8vw, 112px);
  background: var(--bg);
}
.st-sec--soft {
  background: var(--bg-soft);
}
.st-head {
  margin-bottom: clamp(32px, 4vw, 52px);
  max-width: 620px;
}
.st-head h2,
.st-kit h2 {
  font-size: clamp(2.1rem, 4vw, 3.3rem);
}
.st-head p {
  margin-top: 14px;
  color: var(--muted);
}
.st-head--split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}
.st-price {
  font-family: var(--ff-head);
  font-size: 1.4rem;
  color: var(--forest);
  white-space: nowrap;
}
.st-dots {
  flex: 1;
  min-width: 14px;
  border-bottom: 1px dotted var(--border);
  transform: translateY(-5px);
}
.st-row__top {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.st-row__top h3 {
  font-size: 1.55rem;
}
.st-tag {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(250, 245, 234, 0.92);
  color: var(--forest);
  font-size: 0.78rem;
  font-weight: 500;
}
.st-tag i {
  color: var(--terracotta);
}
.st-tag--inline {
  position: static;
  background: var(--tint);
  margin-bottom: 8px;
  padding: 3px 12px;
}
.st-tag--solid {
  background: var(--terracotta);
  color: #fff;
}
.st-tag--solid i {
  color: #fff;
}

/* 1 Hero */
.st-hero {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--forest-deep),
    var(--forest) 60%,
    var(--sage-deep)
  );
}
.st-hero__bg {
  position: absolute;
  inset: 0;
}
.st-hero__bg img {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -8%;
  width: 100%;
  height: 116%;
  object-fit: cover;
}
.st-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(14, 28, 20, 0.92) 8%,
    rgba(14, 28, 20, 0.45) 55%,
    rgba(14, 28, 20, 0.55)
  );
}
.st-hero__in {
  position: relative;
  z-index: 2;
  padding-block: 160px 70px;
}
.st-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.78);
}
.st-crumbs i {
  font-size: 0.6rem;
}
.st-crumbs a {
  transition: color 0.3s;
}
.st-crumbs a:hover {
  color: #efb59d;
}
.st-hero h1 {
  color: #fff;
  font-weight: 300;
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 11em;
}
.st-hero h1 span {
  display: block;
  overflow: hidden;
  padding-block: 0.04em 0.1em;
}
.st-hero h1 b {
  display: block;
  font-weight: 300;
}
.st-hero__in > p {
  margin-top: 22px;
  max-width: 540px;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(255, 255, 255, 0.88);
}
.st-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.92rem;
}
.st-hero__meta i {
  color: var(--sage);
  margin-inline-end: 8px;
}

/* 2 Signature */
.st-sig {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
}
.st-feat__img {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 200px 200px var(--radius) var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: linear-gradient(160deg, var(--sage), var(--forest));
}
.st-feat__img img,
.st-row__img img,
.st-card__img img,
.st-kit__img img,
.st-pair__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.st-feat:hover img,
.st-row:hover img,
.st-card:hover img {
  transform: scale(1.05);
}
.st-feat__img .st-tag {
  inset-block-start: auto;
  inset-block-end: 18px;
}
.st-feat__body {
  margin-top: 24px;
}
.st-feat__body h3 {
  font-size: 2rem;
}
.st-feat__body p,
.st-row p,
.st-card p {
  margin-top: 8px;
  font-size: 0.96rem;
  color: var(--muted);
}
.st-list > * + * {
  border-top: 1px solid var(--border);
}
.st-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 26px;
  align-items: center;
  padding-block: 24px;
}
.st-row:first-child {
  padding-top: 0;
}
.st-row__img {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: linear-gradient(135deg, var(--sage-light), var(--sage));
}

/* 3 Fresh */
.st-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.st-filter button {
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.9rem;
  transition:
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s,
    transform 0.3s var(--ease);
}
.st-filter button:hover {
  transform: translateY(-2px);
}
.st-filter button.is-on {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}
.st-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.st-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s;
}
.st-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.st-card.is-off {
  display: none;
}
.st-card__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sage-light), var(--sage));
}
.st-card__body {
  padding: 22px 24px 26px;
}
.st-card h3 {
  font-size: 1.4rem;
}

/* 4 Kitchen */
.st-kitchen {
  background: var(--forest-deep);
  color: rgba(250, 245, 234, 0.82);
}
.st-kitchen h2,
.st-kitchen h3 {
  color: #fff;
}
.st-kit {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
}
.st-kit__lead {
  margin-top: 16px;
  max-width: 52ch;
}
.st-kit h3 {
  font-size: 1.6rem;
  margin-top: 38px;
}
.st-ingr li,
.st-tech li {
  padding-block: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.st-ingr li:first-child,
.st-tech li:first-child {
  margin-top: 12px;
}
.st-ingr li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
}
.st-ingr i,
.st-tech i {
  color: #efb59d;
  margin-top: 5px;
}
.st-ingr strong,
.st-tech strong {
  display: block;
  font-weight: 500;
  color: #fff;
}
.st-ingr span,
.st-tech span {
  font-size: 0.94rem;
  opacity: 0.85;
}
.st-tech {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
}
.st-tech li {
  display: block;
}
.st-tech li:first-child {
  margin-top: 0;
}
.st-tech i {
  display: block;
  margin-bottom: 8px;
  font-size: 1.2rem;
}
.st-kit__media {
  position: relative;
  padding-block-end: 90px;
}
.st-kit__img {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(160deg, var(--sage-deep), var(--forest));
  box-shadow: var(--shadow-lg);
}
.st-special {
  position: absolute;
  inset-inline: 7% -4%;
  inset-block-end: 0;
  padding: 28px;
  border-radius: 24px;
  background: var(--cream);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
.st-special .st-tag {
  position: static;
  margin-bottom: 12px;
}
.st-special h3 {
  color: var(--forest);
  font-size: 1.7rem;
  margin-top: 0;
}
.st-special p {
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--muted);
}
.st-special__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}
.st-special__foot strong {
  font-family: var(--ff-head);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--terracotta);
}
.st-special .link-arrow {
  margin-top: 0;
  font-size: 0.92rem;
}

/* 5 Pairings */
.st-pair {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.st-pair__tabs {
  display: grid;
  gap: 10px;
}
.st-tab {
  text-align: start;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--ff-head);
  font-size: 1.3rem;
  color: var(--heading);
  transition:
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s,
    transform 0.35s var(--ease);
}
.st-tab:hover {
  transform: translateX(6px);
}
.st-tab.is-on {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}
.st-pair__panels {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 28px;
  align-items: stretch;
}
.st-pair__img {
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 320px;
  background: linear-gradient(160deg, var(--sage), var(--forest));
  box-shadow: var(--shadow-md);
}
.st-pp li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding-block: 20px;
  border-top: 1px solid var(--border);
}
.st-pp li:last-child {
  border-bottom: 1px solid var(--border);
}
.st-pp i {
  color: var(--terracotta);
  font-size: 1.2rem;
  margin-top: 6px;
}
.st-pp span {
  display: block;
  font-size: 0.84rem;
  color: var(--muted);
}
.st-pp strong {
  display: block;
  font-family: var(--ff-head);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--heading);
  line-height: 1.25;
}
.st-pp small {
  display: block;
  font-size: 0.94rem;
  color: var(--muted);
}
.st-end {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 54px;
}

@media (max-width: 1024px) {
  .st-sig,
  .st-kit,
  .st-pair,
  .st-pair__panels {
    grid-template-columns: 1fr;
  }
  .st-feat {
    max-width: 520px;
  }
  .st-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .st-head--split {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .st-kit__media {
    max-width: 560px;
  }
  .st-pair__tabs {
    grid-template-columns: 1fr 1fr;
  }
  .st-pair__img {
    min-height: 260px;
    aspect-ratio: 16 / 9;
  }
}
@media (max-width: 767px) {
  .st-hero__in {
    padding-block: 130px 50px;
  }
  .st-hero__meta {
    gap: 10px 22px;
    font-size: 0.86rem;
  }
  .st-row {
    grid-template-columns: 110px 1fr;
    gap: 16px;
  }
  .st-row__top h3 {
    font-size: 1.3rem;
  }
  .st-row p {
    font-size: 0.92rem;
  }
  .st-grid {
    grid-template-columns: 1fr;
  }
  .st-tech {
    grid-template-columns: 1fr;
  }
  .st-tech li {
    display: grid;
    grid-template-columns: 30px 1fr;
    column-gap: 12px;
  }
  .st-tech i {
    grid-row: span 2;
    margin: 5px 0 0;
    font-size: 1rem;
  }
  .st-special {
    position: relative;
    inset: auto;
    margin: -60px 0 0 14px;
    padding: 22px;
  }
  .st-kit__media {
    padding-block-end: 0;
  }
  .st-pair__tabs {
    grid-template-columns: 1fr;
  }
  .st-tab {
    font-size: 1.15rem;
  }
  .st-end .btn {
    flex: 1 1 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .st-card,
  .st-tab,
  .st-feat__img img,
  .st-row__img img,
  .st-card__img img {
    transition: none !important;
  }
}

/* =========================================================
   Salads & Bowls page — all rules sb-*  (body.page-salads)
   ========================================================= */
.sb section[id] {
  scroll-margin-top: 90px;
}
.sb-sec {
  padding-block: clamp(64px, 8vw, 112px);
  background: var(--bg);
}
.sb-sec--soft {
  background: var(--bg-soft);
}
.sb-head {
  margin-bottom: clamp(30px, 4vw, 50px);
  max-width: 620px;
}
.sb-head h2 {
  font-size: clamp(2.1rem, 4vw, 3.3rem);
}
.sb-head p {
  margin-top: 14px;
  color: var(--muted);
}
.sb-price {
  font-family: var(--ff-head);
  font-size: 1.4rem;
  color: var(--forest);
  white-space: nowrap;
}
.sb-dots {
  flex: 1;
  min-width: 14px;
  border-bottom: 1px dotted var(--border);
  transform: translateY(-5px);
}

/* 1 Hero */
.sb-hero {
  background-image: url(../images/hero1.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #fff;
  /* padding-block-start: 150px; */
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.sb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.651);
  z-index: -1;
}
.sb-crumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font-size: 0.88rem;
  color: var(--sage);
}
.sb-crumbs i {
  font-size: 0.6rem;
}
.sb-crumbs a {
  transition: color 0.3s;
}
.sb-crumbs a:hover {
  color: #fff;
}
.sb-hero h1 {
  color: #fff;
  font-weight: 300;
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.sb-hero h1 span {
  display: block;
  overflow: hidden;
  padding-block: 0.04em 0.1em;
}
.sb-hero h1 b {
  display: block;
  font-weight: 300;
}
.sb-hero__in > p {
  max-width: 560px;
  margin: 22px auto 0;
  color: rgba(255, 255, 255, 0.85);
}
.sb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}
.sb-arches {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: clamp(12px, 2.4vw, 30px);
  align-items: end;
  margin-top: clamp(40px, 6vw, 70px);
  max-width: 980px;
}
.sb-arch {
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background: linear-gradient(160deg, var(--sage), var(--sage-deep));
}
.sb-arch--mid {
  aspect-ratio: 3 / 4.2;
}
.sb-arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2 Bowls */
.sb-bowls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px 30px;
}
.sb-bowl-card {
  position: relative;
  padding: 170px 28px 28px;
  margin-top: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s;
}
.sb-bowl-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.sb-bowl-card__img {
  position: absolute;
  inset-block-start: -56px;
  inset-inline-start: 50%;
  width: 210px;
  height: 210px;
  margin-inline-start: -105px;
  border-radius: 50%;
  overflow: hidden;
  border: 8px solid var(--bg);
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, var(--sage-light), var(--sage));
}
.sb-bowl-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.sb-bowl-card:hover img {
  transform: scale(1.08) rotate(3deg);
}
.sb-bowl-card__top {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.sb-bowl-card h3 {
  font-size: 1.65rem;
}
.sb-bowl-card p {
  margin: 10px auto 0;
  max-width: 40ch;
  font-size: 0.96rem;
  color: var(--muted);
}
.sb-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.sb-chip {
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--tint);
  font-size: 0.82rem;
}
.sb-chip--pro {
  background: var(--forest);
  color: #fff;
}
.sb-chip--pro i {
  margin-inline-end: 6px;
  color: var(--sage);
}

/* 3 Salads */
.sb-sal {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
}
.sb-sal__media {
  position: sticky;
  inset-block-start: 100px;
  padding-block-end: 60px;
  padding-inline-end: 50px;
}
.sb-sal__main {
  aspect-ratio: 4 / 5;
  border-radius: 220px 220px var(--radius) var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: linear-gradient(160deg, var(--sage), var(--forest));
}
.sb-sal__main img,
.sb-sal__inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sb-sal__inset {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 8px solid var(--bg-soft);
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, var(--terracotta), var(--sage));
}
.sb-sal__item {
  padding-block: 24px;
  border-top: 1px solid var(--border);
}
.sb-sal__item:last-child {
  border-bottom: 1px solid var(--border);
}
.sb-sal__top {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.sb-sal__top h3 {
  font-size: 1.65rem;
}
.sb-sal dl {
  margin: 12px 0 0;
  display: grid;
  gap: 6px;
  font-size: 0.95rem;
}
.sb-sal dl > div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
}
.sb-sal dt {
  color: var(--terracotta);
  font-weight: 500;
}
.sb-sal dd {
  margin: 0;
  color: var(--muted);
}

/* 4 Build */
.sb-build {
  background: var(--bg-tint);
}
.sb-form {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.sb-steps {
  display: grid;
  gap: 22px;
}
.sb-step {
  border: 0;
  margin: 0;
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 0;
  position: relative;
}
.sb-step legend {
  float: left;
  width: 100%;
  padding: 0;
  font-family: var(--ff-head);
  font-size: 1.5rem;
  color: var(--heading);
  margin-bottom: 14px;
}
.sb-step__note {
  position: absolute;
  inset-block-start: 26px;
  inset-inline-end: 26px;
  font-size: 0.84rem;
  color: var(--muted);
}
.sb-opts {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sb-opt {
  position: relative;
  cursor: pointer;
}
.sb-opt input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.sb-opt span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font-size: 0.92rem;
  transition:
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s,
    transform 0.3s var(--ease);
}
.sb-opt i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.sb-opt small {
  color: var(--muted);
}
.sb-opt:hover span {
  transform: translateY(-2px);
}
.sb-opt input:checked + span {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}
.sb-opt input:checked + span small {
  color: rgba(255, 255, 255, 0.8);
}
.sb-opt input:focus-visible + span {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}
.sb-opt.is-dis {
  opacity: 0.45;
  cursor: not-allowed;
}
.sb-opt.is-dis input {
  cursor: not-allowed;
}
.sb-sum {
  position: sticky;
  inset-block-start: 100px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.sb-bowl {
  --base: var(--border);
  width: 190px;
  height: 190px;
  margin: 0 auto 18px;
  border-radius: 50%;
  padding: 12px;
  background: linear-gradient(145deg, var(--beige), #d8c9a8);
  box-shadow:
    inset 0 -8px 18px rgba(0, 0, 0, 0.12),
    var(--shadow-sm);
}
.sb-bowl__in {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--base);
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 4px;
  padding: 20px;
  transition: background-color 0.5s;
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, 0.18);
}
.sb-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.25),
    inset 0 -3px 5px rgba(0, 0, 0, 0.15);
  animation: sbpop 0.5s var(--ease);
}
.sb-dot--s {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  transform: rotate(20deg);
}
@keyframes sbpop {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.sb-sum h3 {
  font-size: 1.7rem;
}
.sb-sum__list {
  margin-top: 12px;
  text-align: start;
  font-size: 0.94rem;
}
.sb-sum__list li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-block: 7px;
  border-top: 1px solid var(--border);
}
.sb-sum__list li.is-empty {
  color: var(--muted);
  justify-content: center;
}
.sb-sum__list span {
  color: var(--muted);
}
.sb-sum__list strong {
  font-weight: 500;
  text-align: end;
}
.sb-sum__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--heading);
}
.sb-sum__total strong {
  font-family: var(--ff-head);
  font-size: 2rem;
  font-weight: 500;
  color: var(--terracotta);
}
.sb-sum__msg {
  margin: 12px 0 18px;
  font-size: 0.9rem;
  color: var(--muted);
}
.sb-sum .btn {
  width: 100%;
  white-space: normal;
}
.sb-sum .btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  box-shadow: none;
}
.sb-reset {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition:
    color 0.3s,
    border-color 0.3s;
}
.sb-reset:hover {
  color: var(--terracotta);
  border-color: var(--terracotta);
}
.sb-reset i {
  margin-inline-end: 6px;
}

/* 5 Dressings */
.sb-dress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sb-dr {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s;
}
.sb-dr:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.sb-dr__sw {
  width: 54px;
  height: 54px;
  border-radius: 50% 50% 50% 8px;
  box-shadow:
    inset 0 -6px 10px rgba(0, 0, 0, 0.15),
    var(--shadow-sm);
  margin-bottom: 6px;
}
.sb-dr h3 {
  font-size: 1.55rem;
}
.sb-dr p {
  font-size: 0.95rem;
  color: var(--muted);
}
.sb-dr .sb-dr__ing {
  color: var(--text);
  font-size: 0.88rem;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.sb-dr__pair {
  font-size: 0.88rem;
}
.sb-dr__pair i {
  color: var(--terracotta);
  margin-inline-end: 6px;
}
.sb-dr .link-arrow {
  margin-top: auto;
  padding-top: 12px;
  align-self: flex-start;
  border-bottom: 0;
  font-size: 0.92rem;
}
.sb-dr--fin {
  background: var(--forest);
  color: rgba(255, 255, 255, 0.85);
  border-color: var(--forest);
}
.sb-dr--fin > i {
  font-size: 1.6rem;
  color: #efb59d;
}
.sb-dr--fin h3 {
  color: #fff;
}
.sb-dr--fin li {
  padding-block: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.93rem;
}
.sb-dr--fin strong {
  display: block;
  color: #fff;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .sb-bowls {
    gap: 80px 22px;
  }
  .sb-sal,
  .sb-form {
    grid-template-columns: 1fr;
  }
  .sb-sal__media {
    position: relative;
    inset-block-start: 0;
    max-width: 460px;
    margin-inline: auto;
    width: 100%;
  }
  .sb-sum {
    position: static;
    max-width: 520px;
    width: 100%;
    margin-inline: auto;
  }
  .sb-dress {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .sb-hero {
    padding-block-start: 120px;
  }
  .sb-hero__actions .btn {
    flex: 1 1 100%;
  }
  .sb-bowls {
    grid-template-columns: 1fr;
    gap: 90px;
    margin-top: 50px;
  }
  .sb-bowl-card {
    padding-top: 150px;
  }
  .sb-bowl-card__img {
    width: 190px;
    height: 190px;
    margin-inline-start: -95px;
  }
  .sb-sal__media {
    padding-inline-end: 30px;
  }
  .sb-sal dl > div {
    grid-template-columns: 74px 1fr;
  }
  .sb-step {
    padding: 20px 18px;
  }
  .sb-step__note {
    position: static;
    display: block;
    margin-bottom: 10px;
    clear: both;
  }
  .sb-step legend {
    margin-bottom: 4px;
  }
  .sb-opt span {
    padding: 8px 13px;
    font-size: 0.88rem;
  }
  .sb-dress {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sb-bowl-card,
  .sb-dr,
  .sb-opt span,
  .sb-dot {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   Vegan Desserts page — all rules ds-*  (body.page-desserts)
   ========================================================= */
.ds section[id] {
  scroll-margin-top: 90px;
}
.ds-sec {
  padding-block: clamp(64px, 8vw, 112px);
  background: var(--bg);
  position: relative;
}
.ds-sec--soft {
  background: var(--bg-soft);
}
.ds-head {
  margin-bottom: clamp(32px, 4vw, 54px);
  max-width: 640px;
}
.ds-head h2 {
  font-size: clamp(2.1rem, 4vw, 3.3rem);
}
.ds-head p {
  margin-top: 14px;
  color: var(--muted);
}
.ds-head--center {
  margin-inline: auto;
  text-align: center;
}
.ds-head--split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.ds-head--split > div {
  max-width: 600px;
}
.ds-head--split p {
  max-width: 400px;
  margin-top: 0;
}
.ds-price {
  font-family: var(--ff-head);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--forest);
  white-space: nowrap;
}
.ds-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ds-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--tint);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.ds-tag i {
  color: var(--terracotta);
  font-size: 0.78em;
}
.ds-tag--solid {
  background: var(--terracotta);
  color: #fff;
}
.ds-tag--solid i {
  color: #fff;
}

/* 1 Hero */
.ds-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(100vh, 860px);
  padding-block: 150px clamp(70px, 8vw, 110px);
  color: #fff;
  background: var(--forest-deep);
}
.ds-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(160deg, var(--forest-deep), var(--forest));
}
.ds-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ds-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      105deg,
      rgba(18, 36, 26, 0.92) 8%,
      rgba(18, 36, 26, 0.62) 55%,
      rgba(18, 36, 26, 0.35)
    ),
    linear-gradient(0deg, rgba(18, 36, 26, 0.55), transparent 40%);
}
.ds-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.ds-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 0.88rem;
  color: var(--sage);
}
.ds-crumbs i {
  font-size: 0.6rem;
}
.ds-crumbs a {
  transition: color 0.3s;
}
.ds-crumbs a:hover {
  color: #fff;
}
.ds-crumbs span {
  color: rgba(255, 255, 255, 0.85);
}
.ds-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: #efb59d;
}
.ds-hero__eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
}
.ds-hero h1 {
  color: #fff;
  font-weight: 300;
  font-size: clamp(2.8rem, 6.4vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.ds-hero h1 span {
  display: block;
  overflow: hidden;
  padding-block: 0.04em 0.1em;
}
.ds-hero h1 b {
  display: block;
  font-weight: 300;
}
.ds-hero h1 em {
  color: #efb59d;
}
.ds-hero__in > p {
  max-width: 540px;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.86);
}
.ds-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}
.ds-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 38px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
}
.ds-hero__meta i {
  margin-inline-end: 8px;
  color: var(--sage);
}
.ds-hero__art {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin-inline-start: auto;
  padding-block-end: 54px;
  padding-inline-start: 64px;
}
.ds-hero__main {
  aspect-ratio: 4 / 5;
  border-radius: 240px 240px var(--radius) var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(160deg, var(--sage), var(--forest));
}
.ds-hero__main img,
.ds-hero__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ds-hero__circle {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 8px solid var(--forest-deep);
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, var(--terracotta), var(--sage));
}
.ds-badge {
  position: absolute;
  inset-block-start: 28px;
  inset-inline-start: 18px;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--terracotta);
  color: #fff;
  box-shadow: var(--shadow-md);
  animation: dsfloat 5s ease-in-out infinite;
}
.ds-badge strong {
  font-family: var(--ff-head);
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1;
}
.ds-badge span {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@keyframes dsfloat {
  0%,
  100% {
    transform: translateY(0) rotate(-6deg);
  }
  50% {
    transform: translateY(-10px) rotate(4deg);
  }
}

/* 2 Signature */
.ds-sig {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 24px;
}
.ds-feat {
  grid-row: 1 / span 2;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 640px;
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(160deg, var(--forest), var(--forest-deep));
  box-shadow: var(--shadow-md);
}
.ds-feat__img {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.ds-feat__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.ds-feat:hover .ds-feat__img img {
  transform: scale(1.06);
}
.ds-feat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    0deg,
    rgba(14, 28, 20, 0.93) 12%,
    rgba(14, 28, 20, 0.4) 55%,
    rgba(14, 28, 20, 0.1)
  );
}
.ds-feat__rank {
  position: absolute;
  inset-block-start: 22px;
  inset-inline-start: 22px;
}
.ds-feat__body {
  padding: clamp(24px, 3vw, 36px);
}
.ds-feat h3 {
  color: #fff;
  font-size: clamp(2rem, 3vw, 2.7rem);
}
.ds-feat p {
  max-width: 44ch;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.88);
}
.ds-feat__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}
.ds-feat .ds-tag {
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
}
.ds-feat .ds-tag--solid {
  background: var(--terracotta);
}
.ds-feat .ds-price {
  color: #fff;
  font-size: 2.1rem;
}
.ds-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s;
}
.ds-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.ds-card__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sage-light), var(--sage));
}
.ds-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.ds-card:hover .ds-card__img img {
  transform: scale(1.07);
}
.ds-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 22px 24px 26px;
}
.ds-card__cat {
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--terracotta);
}
.ds-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ds-card h3 {
  font-size: 1.5rem;
}
.ds-card p {
  font-size: 0.94rem;
  color: var(--muted);
}

/* 3 Naturally sweet */
.ds-sweet {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.ds-sweet li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  padding-inline-end: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.ds-sweet i {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: var(--sage-light);
}
.ds-sweet strong {
  display: block;
  font-family: var(--ff-head);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--heading);
}
.ds-sweet span {
  font-size: 0.82rem;
  color: var(--muted);
}
.ds-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 34px;
}
.ds-chip {
  padding: 10px 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.92rem;
  transition:
    transform 0.3s var(--ease),
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s;
}
.ds-chip:hover {
  transform: translateY(-2px);
  border-color: var(--sage-deep);
}
.ds-chip.is-on {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}
.ds-bites {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.ds-bite {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 22px;
  align-items: center;
  padding: 16px;
  padding-inline-end: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-start-start-radius: 999px;
  border-end-start-radius: 999px;
  border-start-end-radius: 28px;
  border-end-end-radius: 28px;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s;
}
.ds-bite:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.ds-bite__img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sage-light), var(--sage));
}
.ds-bite__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.ds-bite:hover .ds-bite__img img {
  transform: scale(1.1) rotate(3deg);
}
.ds-bite__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}
.ds-bite h3 {
  font-size: 1.4rem;
}
.ds-bite p {
  margin: 6px 0 10px;
  font-size: 0.92rem;
  color: var(--muted);
}
.ds-bite .ds-tag {
  padding: 3px 12px;
  font-size: 0.76rem;
}

/* 4 Craft */
.ds-craft {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.86);
  background: radial-gradient(
    circle at 12% 0%,
    #2a4a35 0%,
    var(--forest-deep) 62%
  );
}
.ds-craft__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.ds-craft__media {
  position: relative;
  padding-block-end: 70px;
  padding-inline-end: 64px;
}
.ds-craft__main {
  aspect-ratio: 4 / 5;
  border-radius: 240px 240px var(--radius) var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(160deg, var(--sage), var(--forest));
}
.ds-craft__main img,
.ds-craft__tile img,
.ds-craft__inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ds-craft__tile {
  position: absolute;
  inset-block-start: 56px;
  inset-inline-end: 0;
  width: 34%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 6px solid var(--forest-deep);
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, var(--beige), var(--sage));
  transform: rotate(5deg);
}
.ds-craft__inset {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 8px solid var(--forest-deep);
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, var(--terracotta), var(--sage));
}
.ds-craft h2 {
  color: #fff;
  font-size: clamp(2.1rem, 4vw, 3.3rem);
}
.ds-craft h2 em {
  color: #efb59d;
}
.ds-craft__lead {
  max-width: 540px;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.82);
}
.ds-acc {
  margin-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.ds-acc__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.ds-acc__item h3 {
  font-size: inherit;
}
.ds-acc__btn {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 20px 0;
  text-align: start;
  font-family: var(--ff-head);
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  color: #fff;
  transition: color 0.3s;
}
.ds-acc__btn:hover {
  color: #efb59d;
}
.ds-acc__num {
  min-width: 28px;
  font-family: var(--ff-body);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: #efb59d;
}
.ds-acc__btn i {
  margin-inline-start: auto;
  font-size: 0.8rem;
  color: var(--sage);
  transition: transform 0.4s var(--ease);
}
.ds-acc__item.is-open .ds-acc__btn i {
  transform: rotate(180deg);
}
.ds-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.ds-acc__item.is-open .ds-acc__panel {
  grid-template-rows: 1fr;
}
.ds-acc__in {
  overflow: hidden;
}
.ds-acc__in > div {
  padding: 0 0 24px;
  padding-inline-start: 46px;
}
.ds-acc__in p {
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.8);
}
.ds-swap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.ds-swap span {
  padding: 4px 14px;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 0.85rem;
  text-decoration: line-through;
  opacity: 0.75;
}
.ds-swap i {
  font-size: 0.75rem;
  color: #efb59d;
}
.ds-swap strong {
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--forest-deep);
  font-size: 0.85rem;
  font-weight: 500;
}
.ds-pantry {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.ds-pantry li {
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.85);
}

/* 5 Extras */
.ds-pair {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(24px, 4vw, 48px);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.ds-pair__pick {
  min-width: 0;
  margin: 0;
  padding: 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ds-pair__pick legend {
  float: left;
  width: 100%;
  padding: 0;
  font-family: var(--ff-head);
  font-size: 1.7rem;
  color: var(--heading);
}
.ds-pair__opts {
  clear: both;
  display: grid;
  gap: 10px;
  padding-top: 18px;
}
.ds-popt {
  position: relative;
  cursor: pointer;
}
.ds-popt input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ds-popt span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  transition:
    transform 0.3s var(--ease),
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s;
}
.ds-popt:hover span {
  transform: translateY(-2px);
}
.ds-popt small {
  font-size: 0.9rem;
  color: var(--muted);
}
.ds-popt input:checked + span {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}
.ds-popt input:checked + span small {
  color: rgba(255, 255, 255, 0.8);
}
.ds-popt input:focus-visible + span {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}
.ds-pair__res {
  padding: 30px;
  border-radius: var(--radius);
  background: var(--forest);
  color: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-md);
}
.ds-pair__res h3 {
  color: #fff;
  font-size: 1.7rem;
  margin-bottom: 8px;
}
.ds-pair__list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.ds-pair__list i {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #efb59d;
}
.ds-pair__list small {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
}
.ds-pair__list strong {
  font-weight: 500;
  font-size: 1.05rem;
  color: #fff;
}
.ds-pair__note {
  margin-top: 10px;
  font-family: var(--ff-head);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.4;
  color: #fff;
}
.ds-pair__total {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.95rem;
}
.ds-pair__total strong {
  font-family: var(--ff-head);
  font-size: 1.6rem;
  font-weight: 500;
  color: #efb59d;
}
.ds-boards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ds-board {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.ds-board__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sage-light), var(--sage));
}
.ds-board__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ds-board__img--sw {
  display: flex;
}
.ds-board__img--sw span {
  flex: 1;
}
.ds-board__body {
  padding: 24px 26px 28px;
}
.ds-board h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.6rem;
}
.ds-board h3 i {
  font-size: 1.1rem;
  color: var(--terracotta);
}
.ds-board__sub {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}
.ds-opts {
  margin-top: 14px;
}
.ds-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-inline: -12px;
  padding: 11px 12px;
  border-top: 1px dashed var(--border);
  border-radius: 12px;
  transition:
    background-color 0.3s,
    box-shadow 0.3s;
}
.ds-opt:first-child {
  border-top-color: transparent;
}
.ds-opt__sw {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.25);
}
.ds-opt strong {
  flex: 1;
  font-weight: 500;
  font-size: 0.97rem;
  color: var(--heading);
}
.ds-opt__p {
  font-family: var(--ff-head);
  font-size: 1.1rem;
  color: var(--forest);
}
.ds-opt.is-pick {
  background: var(--tint);
  box-shadow: inset 0 0 0 1.5px var(--terracotta);
  border-top-color: transparent;
}
.ds-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(28px, 4vw, 48px);
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(135deg, var(--forest-deep), var(--forest));
  box-shadow: var(--shadow-md);
}
.ds-cta h3 {
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}
.ds-cta em {
  color: #efb59d;
}
.ds-cta p {
  max-width: 48ch;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.84);
}
.ds-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .ds-badge {
    animation: none;
  }
  .ds-acc__panel {
    transition: none;
  }
}

@media (max-width: 1024px) {
  .ds-head--split {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .ds-head--split p {
    max-width: 560px;
  }
  .ds-hero__art {
    max-width: 360px;
    padding-inline-start: 44px;
  }
  .ds-badge {
    width: 92px;
    height: 92px;
  }
  .ds-badge strong {
    font-size: 1.6rem;
  }
  .ds-sig {
    grid-template-columns: 1fr 1fr;
  }
  .ds-feat {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 520px;
  }
  .ds-sweet {
    grid-template-columns: repeat(2, 1fr);
  }
  .ds-bites {
    grid-template-columns: 1fr;
  }
  .ds-craft__grid,
  .ds-pair {
    grid-template-columns: 1fr;
  }
  .ds-craft__media {
    max-width: 460px;
    width: 100%;
    margin-inline: auto;
  }
  .ds-boards {
    grid-template-columns: 1fr 1fr;
  }
  .ds-board:last-child {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .ds-board:last-child .ds-board__img {
    flex: 0 0 42%;
    aspect-ratio: auto;
  }
  .ds-board:last-child .ds-board__body {
    flex: 1;
    align-self: center;
  }
}
@media (max-width: 767px) {
  .ds-hero {
    min-height: 0;
    padding-block-start: 120px;
  }
  .ds-hero__grid {
    grid-template-columns: 1fr;
  }
  .ds-hero__art {
    display: none;
  }
  .ds-hero__actions .btn {
    flex: 1 1 100%;
  }
  .ds-sig {
    grid-template-columns: 1fr;
  }
  .ds-feat {
    min-height: 480px;
  }
  .ds-sweet {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ds-bite {
    grid-template-columns: 96px 1fr;
    gap: 14px;
    padding: 12px;
    padding-inline-end: 18px;
  }
  .ds-bite__img {
    width: 96px;
    height: 96px;
  }
  .ds-bite h3 {
    font-size: 1.2rem;
  }
  .ds-bite p {
    font-size: 0.88rem;
  }
  .ds-craft__media {
    padding-inline-end: 40px;
    padding-block-end: 50px;
  }
  .ds-acc__in > div {
    padding-inline-start: 0;
  }
  .ds-pair__pick,
  .ds-pair__res {
    padding: 24px 20px;
  }
  .ds-boards {
    grid-template-columns: 1fr;
  }
  .ds-board:last-child {
    flex-direction: column;
  }
  .ds-board:last-child .ds-board__img {
    flex: none;
    aspect-ratio: 16 / 10;
  }
  .ds-cta__btns,
  .ds-cta__btns .btn {
    width: 100%;
  }
}

/* =========================================================
   Drinks page — all rules dk-*  (body.page-drinks)
   ========================================================= */
.dk section[id] {
  scroll-margin-top: 90px;
}
.dk-sec {
  padding-block: clamp(64px, 8vw, 112px);
  background: var(--bg);
  position: relative;
}
.dk-sec--tint {
  background: var(--bg-tint);
}
.dk-head {
  margin-bottom: clamp(32px, 4vw, 54px);
  max-width: 640px;
}
.dk-head h2 {
  font-size: clamp(2.1rem, 4vw, 3.3rem);
}
.dk-head p {
  margin-top: 14px;
  color: var(--muted);
}
.dk-head--center {
  margin-inline: auto;
  text-align: center;
}
.dk-head--split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.dk-head--split > div {
  max-width: 620px;
}
.dk-price {
  font-family: var(--ff-head);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--forest);
  white-space: nowrap;
}
.dk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dk-chips span {
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--tint);
  font-size: 0.78rem;
}
.dk-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.dk-tag--solid {
  background: var(--terracotta);
  color: #fff;
}

/* image placeholders: a soft icon shows if a photo fails to load */
.dk-ph {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sage-light), var(--sage));
}
.dk-ph::before {
  content: var(--ic, "\f5ba");
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 2.6rem;
  color: rgba(255, 255, 255, 0.6);
}
.dk-ph > img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 1 Hero */
.dk-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(100vh, 860px);
  padding-block: 150px clamp(70px, 8vw, 110px);
  color: #fff;
  background: var(--forest-deep);
}
.dk-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(160deg, var(--forest-deep), var(--forest));
}
.dk-hero__bg::before {
  display: none;
}
.dk-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      105deg,
      rgba(18, 36, 26, 0.92) 8%,
      rgba(18, 36, 26, 0.62) 55%,
      rgba(18, 36, 26, 0.35)
    ),
    linear-gradient(0deg, rgba(18, 36, 26, 0.55), transparent 40%);
}
.dk-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.dk-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 0.88rem;
  color: var(--sage);
}
.dk-crumbs i {
  font-size: 0.6rem;
}
.dk-crumbs a {
  transition: color 0.3s;
}
.dk-crumbs a:hover {
  color: #fff;
}
.dk-crumbs span {
  color: rgba(255, 255, 255, 0.85);
}
.dk-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: #efb59d;
}
.dk-hero__eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
}
.dk-hero h1 {
  color: #fff;
  font-weight: 300;
  font-size: clamp(2.8rem, 6.4vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.dk-hero h1 span {
  display: block;
  overflow: hidden;
  padding-block: 0.04em 0.1em;
}
.dk-hero h1 b {
  display: block;
  font-weight: 300;
}
.dk-hero h1 em {
  color: #efb59d;
}
.dk-hero__in > p {
  max-width: 540px;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.86);
}
.dk-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}
.dk-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 38px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
}
.dk-hero__meta i {
  margin-inline-end: 8px;
  color: var(--sage);
}
.dk-hero__caps {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: clamp(10px, 1.6vw, 20px);
}
.dk-cap {
  flex: 1;
  max-width: 150px;
  border-radius: 999px;
  border: 5px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--shadow-lg);
}
.dk-cap--1 {
  aspect-ratio: 1 / 2.1;
}
.dk-cap--2 {
  aspect-ratio: 1 / 2.7;
}
.dk-cap--3 {
  aspect-ratio: 1 / 1.8;
}

/* 2 Juices */
.dk-size {
  display: inline-flex;
  flex: none;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.dk-size button {
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 0.92rem;
  transition:
    background-color 0.3s,
    color 0.3s;
}
.dk-size button.is-on {
  background: var(--forest);
  color: #fff;
}
.dk-juices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.dk-juice {
  --c: var(--sage);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 24px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-block-end: 5px solid var(--c);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s;
}
.dk-juice:nth-child(3n + 2) {
  margin-top: 44px;
}
.dk-juice:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.dk-juice__img {
  width: 62%;
  aspect-ratio: 3 / 4;
  margin-bottom: 20px;
  border-radius: 999px;
  box-shadow: 0 22px 40px -12px color-mix(in srgb, var(--c) 55%, transparent);
  outline: 6px solid color-mix(in srgb, var(--c) 18%, transparent);
}
.dk-juice__img img {
  transition: transform 1.2s var(--ease);
}
.dk-juice:hover .dk-juice__img img {
  transform: scale(1.08);
}
.dk-juice__cat {
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}
.dk-juice__cat::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background: var(--c);
}
.dk-juice h3 {
  margin-top: 6px;
  font-size: 1.55rem;
}
.dk-juice p {
  max-width: 32ch;
  margin: 8px auto 14px;
  font-size: 0.94rem;
  color: var(--muted);
}
.dk-juice .dk-chips {
  justify-content: center;
}
.dk-juice__foot {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}
.dk-juice__foot small {
  font-size: 0.82rem;
  color: var(--muted);
}
.dk-season {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) 1.4fr auto;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  margin-top: clamp(40px, 5vw, 64px);
  padding: 18px;
  padding-inline-end: clamp(24px, 3vw, 44px);
  color: #fff;
  background: linear-gradient(135deg, var(--forest-deep), var(--forest));
  border-radius: 28px;
  box-shadow: var(--shadow-md);
}
.dk-season__img {
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radius) - 4px);
}
.dk-season h3 {
  margin-top: 14px;
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}
.dk-season p {
  max-width: 52ch;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.85);
}
.dk-season__price {
  text-align: center;
}
.dk-season .dk-price {
  display: block;
  font-size: 2.4rem;
  color: #fff;
}
.dk-season__price small {
  font-size: 0.82rem;
  color: var(--sage);
}

/* 3 Smoothies */
.dk-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.dk-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  transition:
    transform 0.3s var(--ease),
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s;
}
.dk-tab i {
  color: var(--terracotta);
  transition: color 0.3s;
}
.dk-tab:hover {
  transform: translateY(-2px);
}
.dk-tab.is-on {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}
.dk-tab.is-on i {
  color: var(--sage);
}
.dk-panel {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(30px, 6vw, 90px);
  align-items: center;
}
.dk-panel__img {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  aspect-ratio: 1;
  border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%;
  box-shadow: var(--shadow-md);
  animation: dkmorph 14s ease-in-out infinite;
}
@keyframes dkmorph {
  0%,
  100% {
    border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%;
  }
  50% {
    border-radius: 44% 56% 46% 54% / 56% 44% 58% 42%;
  }
}
.dk-list li {
  padding-block: 22px;
  border-top: 1px solid var(--border);
}
.dk-list li:last-child {
  border-bottom: 1px solid var(--border);
}
.dk-list__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.dk-list h3 {
  font-size: 1.6rem;
}
.dk-list p {
  margin: 6px 0 12px;
  font-size: 0.96rem;
  color: var(--muted);
}
.dk-boosts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 24px;
  margin-top: clamp(40px, 5vw, 60px);
  padding: 20px 30px;
  background: var(--surface);
  border: 1px dashed var(--sage-deep);
  border-radius: 999px;
}
.dk-boosts strong {
  font-family: var(--ff-head);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--heading);
}
.dk-boosts ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.dk-boosts li {
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--tint);
  font-size: 0.86rem;
}

/* 4 Botanical */
.dk-bot {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.86);
  background: radial-gradient(
    circle at 88% 0%,
    #2a4a35 0%,
    var(--forest-deep) 62%
  );
}
.dk-bot__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
}
.dk-bot__media {
  position: sticky;
  inset-block-start: 100px;
  padding-block-end: 60px;
  padding-inline-end: 60px;
}
.dk-bot__main {
  aspect-ratio: 1 / 1.5;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
}
.dk-bot__inset {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid var(--forest-deep);
  box-shadow: var(--shadow-md);
}
.dk-bot h2 {
  color: #fff;
  font-size: clamp(2.1rem, 4vw, 3.3rem);
}
.dk-bot h2 em {
  color: #efb59d;
}
.dk-bot__lead {
  max-width: 540px;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.82);
}
.dk-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.dk-chip {
  padding: 9px 20px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.88);
  transition:
    transform 0.3s var(--ease),
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s;
}
.dk-chip:hover {
  transform: translateY(-2px);
  border-color: var(--sage);
}
.dk-chip.is-on {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--forest-deep);
}
.dk-botlist {
  margin-top: 26px;
}
.dk-botrow {
  display: grid;
  grid-template-columns: 52px 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding-block: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  transition: padding 0.4s var(--ease);
}
.dk-botrow:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.dk-botrow:hover {
  padding-inline-start: 10px;
}
.dk-botrow > i {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #efb59d;
  font-size: 1.15rem;
}
.dk-botrow h3 {
  color: #fff;
  font-size: 1.4rem;
}
.dk-botrow p {
  margin-top: 4px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.72);
}
.dk-badge {
  padding: 3px 12px;
  border: 1px solid var(--sage);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
}
.dk-bot .dk-price {
  color: #fff;
}

/* 5 Find your sip */
.dk-sip {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.dk-sip__ctrl {
  display: grid;
  gap: 22px;
}
.dk-fs {
  min-width: 0;
  margin: 0;
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.dk-fs legend {
  float: left;
  width: 100%;
  margin-bottom: 16px;
  padding: 0;
  font-family: var(--ff-head);
  font-size: 1.6rem;
  color: var(--heading);
}
.dk-prefs {
  clear: both;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.dk-pref {
  position: relative;
  cursor: pointer;
}
.dk-pref input,
.dk-meal input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.dk-pref span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 20px 12px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg);
  transition:
    transform 0.3s var(--ease),
    background-color 0.3s,
    border-color 0.3s;
}
.dk-pref i {
  margin-bottom: 6px;
  font-size: 1.5rem;
  color: var(--terracotta);
  transition: color 0.3s;
}
.dk-pref strong {
  font-family: var(--ff-head);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--heading);
  transition: color 0.3s;
}
.dk-pref small {
  font-size: 0.82rem;
  color: var(--muted);
  transition: color 0.3s;
}
.dk-pref:hover span {
  transform: translateY(-3px);
}
.dk-pref input:checked + span {
  background: var(--forest);
  border-color: var(--forest);
}
.dk-pref input:checked + span i {
  color: var(--sage);
}
.dk-pref input:checked + span strong {
  color: #fff;
}
.dk-pref input:checked + span small {
  color: rgba(255, 255, 255, 0.78);
}
.dk-pref input:focus-visible + span,
.dk-meal input:focus-visible + span {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}
.dk-meals {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dk-meal {
  position: relative;
  cursor: pointer;
}
.dk-meal span {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font-size: 0.92rem;
  transition:
    transform 0.3s var(--ease),
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s;
}
.dk-meal:hover span {
  transform: translateY(-2px);
}
.dk-meal input:checked + span {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}
.dk-result {
  position: sticky;
  inset-block-start: 100px;
  padding: 30px;
  border-radius: 28px;
  color: rgba(255, 255, 255, 0.88);
  background: var(--forest);
  box-shadow: var(--shadow-md);
}
.dk-result__top {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dk-medal {
  flex: none;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sage);
  color: var(--forest-deep);
  font-size: 1.6rem;
}
.dk-result small {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
}
.dk-result h3 {
  color: #fff;
  font-size: 1.8rem;
}
.dk-result__top .dk-price {
  margin-inline-start: auto;
  font-size: 1.7rem;
  color: #efb59d;
}
.dk-result > p {
  margin-top: 16px;
}
.dk-result .dk-chips {
  margin-top: 14px;
}
.dk-result .dk-chips span {
  background: rgba(255, 255, 255, 0.12);
}
.dk-result__also {
  margin-top: 14px;
  font-size: 0.92rem;
}
.dk-result__also strong {
  font-weight: 500;
  color: #fff;
}
.dk-result__pair {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.dk-result__pair a {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--ff-head);
  font-size: 1.5rem;
  color: #fff;
  border-bottom: 1.5px solid #efb59d;
  transition: color 0.3s;
}
.dk-result__pair a:hover {
  color: #efb59d;
}
.dk-result__pair p {
  margin-top: 8px;
  font-size: 0.95rem;
}

@media (prefers-reduced-motion: reduce) {
  .dk-panel__img {
    animation: none;
  }
}

@media (max-width: 1024px) {
  .dk-head--split {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .dk-hero__caps {
    max-width: 340px;
    margin-inline-start: auto;
  }
  .dk-juices {
    grid-template-columns: repeat(2, 1fr);
  }
  .dk-juice:nth-child(3n + 2) {
    margin-top: 0;
  }
  .dk-juice:nth-child(even) {
    margin-top: 36px;
  }
  .dk-season {
    grid-template-columns: 0.8fr 1.2fr;
  }
  .dk-season__price {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
  }
  .dk-panel,
  .dk-bot__grid,
  .dk-sip {
    grid-template-columns: 1fr;
  }
  .dk-panel__img {
    max-width: 380px;
  }
  .dk-bot__media {
    position: relative;
    inset-block-start: 0;
    padding: 0;
  }
  .dk-bot__main {
    aspect-ratio: 16 / 9;
  }
  .dk-bot__inset {
    display: none;
  }
  .dk-result {
    position: static;
  }
}
@media (max-width: 767px) {
  .dk-hero {
    min-height: 0;
    padding-block-start: 120px;
  }
  .dk-hero__grid {
    grid-template-columns: 1fr;
  }
  .dk-hero__caps {
    display: none;
  }
  .dk-hero__actions .btn {
    flex: 1 1 100%;
  }
  .dk-juices {
    grid-template-columns: 1fr;
  }
  .dk-juice:nth-child(even) {
    margin-top: 0;
  }
  .dk-juice__img {
    width: 56%;
  }
  .dk-season {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .dk-tab {
    flex: 1 1 100%;
    justify-content: center;
  }
  .dk-boosts {
    border-radius: 28px;
    padding: 22px 20px;
  }
  .dk-botrow {
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
  }
  .dk-botrow > i {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }
  .dk-botrow .dk-badge {
    display: none;
  }
  .dk-botrow h3 {
    font-size: 1.2rem;
  }
  .dk-fs {
    padding: 22px 18px;
  }
  .dk-result {
    padding: 24px 20px;
  }
  .dk-result__top {
    flex-wrap: wrap;
  }
  .dk-medal {
    width: 56px;
    height: 56px;
    font-size: 1.3rem;
  }
}
/* =========================================================
   404 page — all rules nf-*  (body.page-404)
   Coming Soon page — all rules cs-*  (body.page-soon)
   ========================================================= */

/* shared: falling leaves, section shell, CTA band */
.nf-fall,
.cs-fall {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.nf-fall i,
.cs-fall i {
  position: absolute;
  inset-block-start: -60px;
  inset-inline-start: var(--x, 50%);
  font-size: var(--s, 1.4rem);
  color: var(--sage-light);
  opacity: 0;
  animation: leaf-fall var(--d, 16s) linear var(--delay, 0s) infinite;
}
@keyframes leaf-fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.34;
  }
  50% {
    transform: translate3d(36px, 55vh, 0) rotate(180deg);
  }
  90% {
    opacity: 0.2;
  }
  100% {
    transform: translate3d(-24px, 112vh, 0) rotate(360deg);
    opacity: 0;
  }
}
.nf-sec,
.cs-sec {
  position: relative;
  padding-block: clamp(64px, 8vw, 112px);
  background: var(--bg);
}
.nf-sec--tint,
.cs-sec--tint {
  background: var(--bg-tint);
}
.nf-sec section[id],
.nf-sec[id],
.cs-sec[id] {
  scroll-margin-top: 90px;
}
.nf-cta,
.cs-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: clamp(32px, 6vw, 68px);
  border-radius: 32px;
  color: rgba(255, 255, 255, 0.86);
  background: linear-gradient(
    135deg,
    var(--forest-deep),
    var(--forest) 65%,
    var(--sage-deep)
  );
  box-shadow: var(--shadow-md);
}
.nf-cta > i,
.cs-cta > i {
  position: absolute;
  inset-block-end: -50px;
  inset-inline-end: 4%;
  font-size: clamp(9rem, 20vw, 15rem);
  color: #fff;
  opacity: 0.07;
  transform: rotate(-18deg);
  pointer-events: none;
}
.nf-cta > div,
.cs-cta > div {
  position: relative;
  z-index: 1;
}
.nf-cta h2,
.cs-cta h2 {
  color: #fff;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  max-width: 16em;
}
.nf-cta h2 em,
.cs-cta h2 em {
  color: #efb59d;
}
.nf-cta p,
.cs-cta p {
  margin-top: 12px;
  max-width: 520px;
}
.nf-cta__btns,
.cs-cta__btns {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  flex-shrink: 0;
}

/* ---------- 404 : 1 Hero ---------- */
.nf-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + 54px) 90px;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--forest-deep),
    var(--forest) 60%,
    var(--sage-deep)
  );
}
.nf-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.nf-hero__bg img {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -10%;
  width: 100%;
  height: 120%;
  object-fit: cover;
}
.nf-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      105deg,
      rgba(18, 36, 26, 0.92) 8%,
      rgba(18, 36, 26, 0.62) 55%,
      rgba(18, 36, 26, 0.4)
    ),
    linear-gradient(0deg, rgba(18, 36, 26, 0.55), transparent 40%);
}
.nf-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.nf-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 0.88rem;
  color: var(--sage);
}
.nf-crumbs i {
  font-size: 0.6rem;
}
.nf-crumbs a {
  transition: color 0.3s;
}
.nf-crumbs a:hover {
  color: #fff;
}
.nf-title {
  color: #fff;
  font-weight: 300;
  font-size: clamp(2.5rem, 5.6vw, 4.6rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  max-width: 12em;
}
.nf-line {
  display: block;
  overflow: hidden;
  padding-block: 0.05em 0.12em;
}
.nf-line b {
  display: block;
  font-weight: inherit;
}
.nf-title em {
  color: #efb59d;
  font-weight: 400;
}
.nf-text {
  max-width: 500px;
  margin-top: 22px;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(255, 255, 255, 0.86);
}
.nf-url {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin-top: 22px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.86rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.nf-url i {
  color: #efb59d;
  flex-shrink: 0;
}
.nf-url span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nf-url code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #efb59d;
  direction: ltr;
  unicode-bidi: isolate;
}
.nf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}
.nf-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.nf-code {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.2vw, 14px);
  font-family: var(--ff-head);
  font-weight: 300;
  font-variant-numeric: lining-nums;
  line-height: 0.8;
  font-size: clamp(8rem, 19vw, 17rem);
  color: #fff;
}
.nf-4 {
  display: block;
  text-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  animation: nf-bob 6s ease-in-out infinite;
}
.nf-4:last-child {
  animation-delay: -3s;
}
@keyframes nf-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
.nf-plate {
  position: relative;
  flex: 0 0 auto;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  box-shadow:
    0 0 0 0.02em #efb59d,
    0 0 0 0.07em rgba(255, 255, 255, 0.14),
    0 24px 60px rgba(0, 0, 0, 0.4);
}
.nf-plate::before {
  content: "";
  position: absolute;
  inset: -0.13em;
  border: 1px dashed rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  animation: nf-spin 50s linear infinite reverse;
}
.nf-plate__img {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sage), var(--forest));
}
.nf-plate__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: nf-spin 60s linear infinite;
}
.nf-plate__leaf {
  position: absolute;
  inset-block-start: 4%;
  inset-inline-end: -4%;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--terracotta);
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 10px 24px rgba(196, 105, 74, 0.5);
}
@keyframes nf-spin {
  to {
    transform: rotate(360deg);
  }
}
.nf-status {
  font-family: var(--ff-body);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #efb59d;
  text-align: center;
}

/* ---------- 404 : 2 Find your way back ---------- */
.nf-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: clamp(32px, 4vw, 54px);
}
.nf-head h2 {
  font-size: clamp(2.1rem, 4vw, 3.3rem);
}
.nf-head p {
  margin-top: 14px;
  color: var(--muted);
  max-width: 520px;
}
.nf-search {
  position: relative;
  width: min(100%, 380px);
  flex-shrink: 0;
}
.nf-search > i {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 20px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  transition: color 0.3s;
}
.nf-search:focus-within > i {
  color: var(--terracotta);
}
.nf-search input {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 14px 20px;
  padding-inline-start: 48px;
  transition:
    border-color 0.3s,
    box-shadow 0.35s var(--ease),
    background-color 0.3s;
}
.nf-search input::placeholder {
  color: var(--muted);
  opacity: 0.8;
}
.nf-search input:focus {
  outline: 0;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 4px rgba(196, 105, 74, 0.16);
}
.nf-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.nf-link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease),
    border-color 0.3s;
}
.nf-link:hover,
.nf-link:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--terracotta);
}
.nf-link__ic {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tint);
  color: var(--forest);
  font-size: 1.1rem;
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.45s var(--ease);
}
.nf-link:hover .nf-link__ic {
  background: var(--terracotta);
  color: #fff;
  transform: rotate(-12deg) scale(1.06);
}
.nf-link h3 {
  font-size: 1.45rem;
  margin-top: 6px;
}
.nf-link p {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.55;
}
.nf-link__go {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--terracotta);
  transition: gap 0.3s var(--ease);
}
.nf-link:hover .nf-link__go {
  gap: 14px;
}
.nf-count {
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--muted);
}
.nf-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--muted);
}
.nf-empty i {
  font-size: 2rem;
  color: var(--sage-deep);
}
.nf-empty h3 {
  font-size: 1.7rem;
  margin-top: 10px;
}

/* ---------- 404 : 3 Picks ---------- */
.nf-picks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.nf-pick {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(160deg, var(--sage-deep), var(--forest));
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow 0.45s var(--ease),
    transform 0.45s var(--ease);
}
.nf-pick:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.nf-pick img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.nf-pick:hover img {
  transform: scale(1.07);
}
.nf-pick::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    0deg,
    rgba(14, 28, 20, 0.92) 6%,
    rgba(14, 28, 20, 0.35) 50%,
    transparent 75%
  );
}
.nf-pick__body {
  padding: clamp(20px, 3vw, 30px);
}
.nf-pick__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--terracotta);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}
.nf-pick h3 {
  color: #fff;
  font-size: 1.7rem;
  margin-top: 12px;
}
.nf-pick p {
  margin-top: 8px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}
.nf-pick__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.88rem;
  font-weight: 500;
  color: #efb59d;
  transition: gap 0.3s var(--ease);
}
.nf-pick:hover .nf-pick__go {
  gap: 14px;
}

/* ---------- Coming Soon : 1 Hero ---------- */
.cs-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + 50px) 80px;
  color: #fff;
  text-align: center;
  background: linear-gradient(
    135deg,
    var(--forest-deep),
    var(--forest) 60%,
    var(--sage-deep)
  );
}
.cs-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.cs-hero__bg img {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -10%;
  width: 100%;
  height: 120%;
  object-fit: cover;
}
.cs-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      ellipse at 50% 38%,
      rgba(18, 36, 26, 0.6),
      rgba(18, 36, 26, 0.9) 88%
    ),
    linear-gradient(0deg, rgba(18, 36, 26, 0.55), transparent 40%);
}
.cs-in {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin-inline: auto;
}
.cs-hero .hero__eyebrow::after {
  content: "";
  width: 44px;
  height: 1px;
  background: currentColor;
}
.cs-title {
  color: #fff;
  font-weight: 300;
  font-size: clamp(2.7rem, 7vw, 5.6rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.cs-line {
  display: block;
  overflow: hidden;
  padding-block: 0.06em 0.12em;
}
.cs-line b {
  display: block;
  font-weight: inherit;
}
.cs-title em {
  color: #efb59d;
  font-weight: 400;
}
.cs-text {
  max-width: 580px;
  margin: 24px auto 0;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(255, 255, 255, 0.88);
}
.cs-count {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 2vw, 22px);
  max-width: 640px;
  margin: 38px auto 0;
}
.cs-unit {
  padding: clamp(14px, 2.4vw, 24px) 8px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cs-num {
  display: block;
  font-family: var(--ff-head);
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  color: #fff;
}
.cs-num.is-tick {
  animation: cs-pop 0.45s var(--ease);
}
@keyframes cs-pop {
  0% {
    transform: translateY(-8px);
    opacity: 0.3;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
.cs-lab {
  display: block;
  margin-top: 10px;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #efb59d;
}
.cs-live {
  margin: 38px auto 0;
  max-width: 560px;
  padding: 22px 26px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cs-live i {
  font-size: 1.8rem;
  color: #efb59d;
}
.cs-live h2 {
  color: #fff;
  font-size: 1.9rem;
  margin-top: 8px;
}
.cs-live .btn {
  margin-top: 16px;
}
.cs-form {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  margin: 34px auto 0;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition:
    box-shadow 0.35s var(--ease),
    border-color 0.3s;
}
.cs-form:focus-within {
  border-color: #efb59d;
  box-shadow: 0 0 0 4px rgba(239, 181, 157, 0.25);
}
.cs-form input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: #fff;
  background: transparent;
  border: 0;
  padding: 12px 8px;
  padding-inline-start: 20px;
}
.cs-form input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.cs-form input:focus {
  outline: 0;
}
.cs-form .btn {
  flex-shrink: 0;
}
.cs-form .btn[disabled] {
  opacity: 0.75;
  cursor: progress;
  transform: none;
}
.cs-err {
  min-height: 1.4em;
  margin-top: 12px;
  font-size: 0.88rem;
  color: #ffc3b0;
}
.cs-note {
  margin-top: 4px;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.72);
}
.cs-done {
  max-width: 560px;
  margin: 34px auto 0;
  padding: 26px 28px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  outline: 0;
}
.cs-done > i {
  font-size: 2.2rem;
  color: #efb59d;
}
.cs-done h2 {
  color: #fff;
  font-size: 1.9rem;
  margin-top: 8px;
}
.cs-done p {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.85);
}
.cs-social {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.cs-social a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  transition:
    background-color 0.3s,
    border-color 0.3s,
    transform 0.35s var(--ease);
}
.cs-social a:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  transform: translateY(-3px);
}

/* ---------- Coming Soon : 2 Teasers ---------- */
.cs-head {
  margin-bottom: clamp(32px, 4vw, 54px);
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.cs-head h2 {
  font-size: clamp(2.1rem, 4vw, 3.3rem);
}
.cs-head p {
  margin-top: 14px;
  color: var(--muted);
}
.cs-teasers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: start;
}
.cs-teaser {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
.cs-teaser:nth-child(even) {
  margin-top: 30px;
}
.cs-teaser:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.cs-teaser__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sage-light), var(--sage));
}
.cs-teaser__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.cs-teaser:hover .cs-teaser__img img {
  transform: scale(1.07);
}
.cs-badge {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--terracotta);
  color: #fff;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}
.cs-teaser__body {
  padding: 22px 22px 26px;
}
.cs-teaser h3 {
  font-size: 1.5rem;
}
.cs-teaser p {
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--muted);
}

/* ---------- Coming Soon : 3 Seed to table ---------- */
.cs-stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.cs-stage {
  position: relative;
  text-align: center;
}
.cs-stage::before {
  content: "";
  position: absolute;
  inset-block-start: 27px;
  inset-inline-start: calc(50% + 38px);
  width: calc(100% + 24px - 76px);
  height: 2px;
  background: var(--border);
}
.cs-stage:last-child::before {
  display: none;
}
.cs-stage.is-done::before {
  background: var(--sage-deep);
}
.cs-stage__dot {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--muted);
  font-size: 1.1rem;
}
.cs-stage.is-done .cs-stage__dot {
  background: var(--sage-deep);
  border-color: var(--sage-deep);
  color: #fff;
}
.cs-stage.is-now .cs-stage__dot {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
  animation: cs-pulse 2.2s ease-out infinite;
}
@keyframes cs-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(196, 105, 74, 0.45);
  }
  100% {
    box-shadow: 0 0 0 18px rgba(196, 105, 74, 0);
  }
}
.cs-stage h3 {
  font-size: 1.45rem;
  margin-top: 18px;
}
.cs-stage p {
  margin: 8px auto 0;
  max-width: 240px;
  font-size: 0.94rem;
  color: var(--muted);
}
.cs-stage__st {
  display: inline-block;
  margin-top: 12px;
  padding: 3px 14px;
  border-radius: 999px;
  background: var(--tint);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--heading);
}
.cs-stage.is-now .cs-stage__st {
  background: var(--terracotta);
  color: #fff;
}

/* ---------- 404 + Coming Soon : responsive ---------- */
@media (max-width: 1024px) {
  .nf-hero {
    min-height: 0;
    padding-block: calc(var(--header-h) + 40px) 70px;
  }
  .nf-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .nf-visual {
    order: -1;
  }
  .nf-code {
    font-size: clamp(7rem, 24vw, 12rem);
  }
  .nf-crumbs,
  .nf-actions {
    justify-content: center;
  }
  .nf-title,
  .nf-text {
    margin-inline: auto;
  }
  .nf-url {
    margin-inline: auto;
  }
  .nf-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  .nf-search {
    width: 100%;
    max-width: 460px;
  }
  .nf-links {
    grid-template-columns: repeat(3, 1fr);
  }
  .nf-picks {
    grid-template-columns: repeat(2, 1fr);
  }
  .nf-pick:last-child {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 8;
  }
  .cs-hero {
    min-height: 0;
    padding-block: calc(var(--header-h) + 50px) 80px;
  }
  .cs-teasers {
    grid-template-columns: repeat(2, 1fr);
  }
  .cs-teaser:nth-child(even) {
    margin-top: 0;
  }
  .nf-cta,
  .cs-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 767px) {
  .nf-hero {
    padding-block: calc(var(--header-h) + 28px) 56px;
  }
  .nf-code {
    font-size: clamp(6.2rem, 30vw, 9rem);
  }
  .nf-plate__leaf {
    width: 38px;
    height: 38px;
    font-size: 0.9rem;
  }
  .nf-actions .btn {
    flex: 1 1 100%;
  }
  .nf-status {
    letter-spacing: 0.2em;
    font-size: 0.72rem;
  }
  .nf-links {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .nf-link {
    padding: 20px 18px;
  }
  .nf-link h3 {
    font-size: 1.25rem;
  }
  .nf-picks {
    grid-template-columns: 1fr;
  }
  .nf-pick,
  .nf-pick:last-child {
    grid-column: auto;
    aspect-ratio: 4 / 4.2;
  }
  .cs-hero {
    padding-block: calc(var(--header-h) + 36px) 60px;
  }
  .cs-lab {
    font-size: 0.64rem;
    letter-spacing: 0.12em;
  }
  .cs-unit {
    border-radius: 18px;
  }
  .cs-form {
    flex-direction: column;
    align-items: stretch;
    border-radius: 28px;
    padding: 10px;
  }
  .cs-form input {
    padding: 12px 16px;
    text-align: center;
  }
  .cs-form .btn {
    width: 100%;
  }
  .cs-teasers {
    grid-template-columns: 1fr;
  }
  .cs-stages {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .cs-stage {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 0 18px;
    text-align: start;
    padding-bottom: 28px;
  }
  .cs-stage:last-child {
    padding-bottom: 0;
  }
  .cs-stage::before {
    inset-block-start: 56px;
    inset-inline-start: 27px;
    width: 2px;
    height: calc(100% - 56px);
  }
  .cs-stage__dot {
    margin: 0;
    grid-row: 1 / span 3;
  }
  .cs-stage h3 {
    margin-top: 4px;
  }
  .cs-stage p {
    margin: 6px 0 0;
    max-width: none;
  }
  .cs-stage__st {
    justify-self: start;
  }
  .nf-cta .btn,
  .cs-cta .btn {
    flex: 1 1 100%;
  }
  .nf-cta__btns,
  .cs-cta__btns {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .nf-links {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .nf-link {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
  }
  .nf-link > div {
    min-width: 0;
  }
  .nf-link h3 {
    margin-top: 0;
  }
  .nf-link__go {
    display: none;
  }
  .nf-link__ic {
    flex-shrink: 0;
  }
}
@media (max-width: 400px) {
  .cs-count {
    grid-template-columns: repeat(2, 1fr);
  }
  .cs-lab {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
  }
}
/* =========================================================
   Our Story page — all rules os-*  (body.page-story)
   ========================================================= */
.os-sec {
  position: relative;
  padding-block: clamp(70px, 9vw, 120px);
  background: var(--bg);
}
.os-sec--tint {
  background: var(--bg-tint);
}
.os-hero[id],
.os-sec[id],
.os-ing[id],
.os-exp[id],
.os-next[id] {
  scroll-margin-top: 70px;
}
.os-head {
  max-width: 680px;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.os-head--center {
  margin-inline: auto;
  text-align: center;
}
.os-head h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  letter-spacing: -0.01em;
}
.os-head p {
  margin-top: 16px;
  color: var(--muted);
}
.os-ph {
  background: linear-gradient(135deg, var(--sage-light), var(--sage));
}
.os-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 1 Hero */
.os-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + 60px) clamp(60px, 8vw, 110px);
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--forest-deep),
    var(--forest) 60%,
    var(--sage-deep)
  );
}
.os-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.os-hero__bg img {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -10%;
  width: 100%;
  height: 120%;
  object-fit: cover;
}
.os-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      0deg,
      rgba(18, 36, 26, 0.92) 4%,
      rgba(18, 36, 26, 0.45) 55%,
      rgba(18, 36, 26, 0.6)
    ),
    linear-gradient(105deg, rgba(18, 36, 26, 0.7), transparent 60%);
}
.os-hero__in {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: end;
}
.os-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 0.88rem;
  color: var(--sage);
}
.os-crumbs i {
  font-size: 0.6rem;
}
.os-crumbs a {
  transition: color 0.3s;
}
.os-crumbs a:hover {
  color: #fff;
}
.os-title {
  color: #fff;
  font-weight: 300;
  font-size: clamp(2.8rem, 7vw, 6rem);
  letter-spacing: -0.02em;
  line-height: 1.04;
  max-width: 11em;
}
.os-line {
  display: block;
  overflow: hidden;
  padding-block: 0.06em 0.12em;
}
.os-line b {
  display: block;
  font-weight: inherit;
}
.os-title em {
  color: #efb59d;
  font-weight: 400;
}
.os-hero__text {
  max-width: 560px;
  margin-top: 26px;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(255, 255, 255, 0.88);
}
.os-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.os-toc {
  padding: 26px 28px;
  border-radius: 24px;
  background: rgba(14, 28, 20, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.os-toc p {
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #efb59d;
  margin-bottom: 12px;
}
.os-toc ol {
  display: grid;
}
.os-toc a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--ff-head);
  font-size: 1.3rem;
  transition:
    color 0.3s,
    padding 0.35s var(--ease);
}
.os-toc li:last-child a {
  border-bottom: 0;
}
.os-toc a span {
  font-family: var(--ff-body);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--sage);
}
.os-toc a:hover {
  color: #efb59d;
  padding-inline-start: 8px;
}

/* 2 Beginning */
.os-begin__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.os-begin__media {
  position: relative;
  padding-block-end: 70px;
  padding-inline-end: 60px;
}
.os-begin__main {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 240px 240px var(--radius) var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.os-begin__inset {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 8px solid var(--bg);
  box-shadow: var(--shadow-md);
}
.os-begin__note {
  position: absolute;
  inset-block-end: 100px;
  inset-inline-start: -14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 230px;
  padding: 12px 18px;
  border-radius: 16px;
  background: var(--surface);
  color: var(--heading);
  font-family: var(--ff-head);
  font-size: 1.1rem;
  line-height: 1.2;
  box-shadow: var(--shadow-md);
}
.os-begin__note i {
  color: var(--terracotta);
  font-size: 1.1rem;
}
.os-begin__txt .os-head {
  margin-bottom: 0;
}
.os-begin__lead {
  margin-top: 20px;
  color: var(--muted);
  max-width: 540px;
}
.os-beats {
  margin-top: 34px;
  display: grid;
  gap: 24px;
  padding-inline-start: 28px;
  border-inline-start: 1px solid var(--border);
}
.os-beat {
  position: relative;
}
.os-beat::before {
  content: "";
  position: absolute;
  inset-block-start: 9px;
  inset-inline-start: -33px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 0 0 0 5px var(--tint);
}
.os-beat h3 {
  font-size: 1.5rem;
}
.os-beat p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.98rem;
}

/* 3 Journey */
.os-chaps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.os-chap {
  position: relative;
  text-align: center;
}
.os-chap::before {
  content: "";
  position: absolute;
  inset-block-start: 27px;
  inset-inline-start: calc(50% + 38px);
  width: calc(100% + 24px - 76px);
  height: 2px;
  background: var(--sage-deep);
}
.os-chap:nth-child(3)::before {
  background: repeating-linear-gradient(
    90deg,
    var(--sage-deep) 0 8px,
    transparent 8px 14px
  );
}
.os-chap:last-child::before {
  display: none;
}
.os-chap__dot {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sage-deep);
  border: 2px solid var(--sage-deep);
  color: #fff;
  font-family: var(--ff-head);
  font-size: 1.4rem;
  line-height: 1;
}
.os-chap:last-child .os-chap__dot {
  background: var(--terracotta);
  border-color: var(--terracotta);
  animation: cs-pulse 2.2s ease-out infinite;
}
.os-chap__img {
  margin-top: 22px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.os-chap__img img {
  transition: transform 1s var(--ease);
}
.os-chap:hover .os-chap__img img {
  transform: scale(1.06);
}
.os-chap h3 {
  font-size: 1.5rem;
  margin-top: 20px;
}
.os-chap p {
  margin: 8px auto 0;
  max-width: 260px;
  font-size: 0.95rem;
  color: var(--muted);
}

/* 4 People */
.os-people__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 70px);
}
.os-people__top .os-head {
  margin-bottom: 0;
}
.os-people__top > p {
  color: var(--muted);
  max-width: 520px;
}
.os-folks {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: clamp(18px, 3vw, 40px);
  align-items: start;
}
.os-folk__img {
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.os-folk__img img {
  transition: transform 1s var(--ease);
}
.os-folk:hover .os-folk__img img {
  transform: scale(1.05);
}
.os-folk:nth-child(1) .os-folk__img {
  aspect-ratio: 3 / 4;
  margin-top: 60px;
}
.os-folk:nth-child(2) .os-folk__img {
  aspect-ratio: 4 / 5;
  border-radius: 200px 200px var(--radius) var(--radius);
}
.os-folk:nth-child(3) .os-folk__img {
  aspect-ratio: 3 / 4;
  margin-top: 110px;
}
.os-folk figcaption {
  margin-top: 18px;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--terracotta);
}
.os-folk figcaption small {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.os-folk h3 {
  font-size: 1.6rem;
  margin-top: 2px;
}
.os-folk figcaption p {
  margin-top: 4px;
  font-size: 0.95rem;
  color: var(--muted);
}

/* 5 Ingredients */
.os-ing {
  position: relative;
  overflow: hidden;
  padding-block: clamp(70px, 9vw, 120px) 0;
  background: var(--forest-deep);
  color: rgba(255, 255, 255, 0.82);
}
.os-ing__top {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.os-ing__top .eyebrow {
  color: #efb59d;
}
.os-ing__top h2 {
  color: #fff;
  font-size: clamp(2.3rem, 5vw, 4.2rem);
  font-weight: 300;
  letter-spacing: -0.01em;
}
.os-ing__top h2 em {
  color: #efb59d;
  font-weight: 400;
}
.os-ing__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.os-ing__item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 3 / 4.2;
  color: #fff;
  background: linear-gradient(160deg, var(--sage-deep), var(--forest));
}
.os-ing__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  transition: transform 1.2s var(--ease);
}
.os-ing__img img {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -8%;
  width: 100%;
  height: 116%;
  object-fit: cover;
}
.os-ing__item:hover .os-ing__img {
  transform: scale(1.06);
}
.os-ing__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    0deg,
    rgba(10, 22, 15, 0.9) 4%,
    rgba(10, 22, 15, 0.1) 55%,
    rgba(10, 22, 15, 0.25)
  );
}
.os-ing__tag {
  position: absolute;
  inset-block-start: 18px;
  inset-inline-start: 18px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(14, 28, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.os-ing__cap {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: clamp(18px, 2.4vw, 30px);
}
.os-ing__cap span {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: #efb59d;
}
.os-ing__cap h3 {
  color: #fff;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-top: 4px;
}
.os-ing__cap p {
  margin-top: 6px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

/* 6 Culinary identity */
.os-col {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 16px;
}
.os-col__txt {
  grid-column: 1 / 6;
  grid-row: 1 / 5;
  align-self: center;
  padding-inline-end: clamp(0px, 2vw, 30px);
}
.os-col__txt h2 {
  font-size: clamp(2.1rem, 3.8vw, 3.2rem);
}
.os-col__txt > p {
  margin-top: 18px;
  color: var(--muted);
}
.os-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.os-tech li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--tint);
  font-size: 0.86rem;
  color: var(--heading);
}
.os-tech i {
  color: var(--terracotta);
  font-size: 0.8rem;
}
.os-col__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  min-height: 100%;
  box-shadow: var(--shadow-sm);
}
.os-col__item img {
  position: absolute;
  inset: 0;
  transition: transform 1s var(--ease);
}
.os-col__item:hover img {
  transform: scale(1.06);
}
.os-col__item figcaption {
  position: absolute;
  inset-inline-start: 14px;
  inset-block-end: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  background: rgba(250, 245, 234, 0.92);
  color: var(--forest);
}
.os-col__a {
  grid-column: 6 / 10;
  grid-row: 1 / 4;
}
.os-col__b {
  grid-column: 10 / 13;
  grid-row: 1 / 6;
  border-radius: 160px 160px var(--radius) var(--radius);
}
.os-col__c {
  grid-column: 1 / 5;
  grid-row: 5 / 9;
}
.os-col__d {
  grid-column: 5 / 10;
  grid-row: 4 / 9;
}
.os-col__e {
  grid-column: 10 / 13;
  grid-row: 6 / 9;
}

/* 7 Values */
.os-vals {
  border-top: 1px solid var(--border);
}
.os-val {
  display: grid;
  grid-template-columns: 110px 1fr 1.1fr;
  gap: clamp(20px, 4vw, 64px);
  align-items: center;
  padding-block: clamp(28px, 4vw, 52px);
  border-bottom: 1px solid var(--border);
}
.os-val__ill {
  width: 110px;
  height: 110px;
  color: var(--terracotta);
  transition: transform 0.6s var(--ease);
}
.os-val:hover .os-val__ill {
  transform: rotate(-6deg) scale(1.06);
}
.os-val__ill * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.os-val__word small {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  color: var(--muted);
  margin-bottom: 6px;
}
.os-val__word h3 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  transition: color 0.4s;
}
.os-val:hover .os-val__word h3 {
  color: var(--terracotta);
}
.os-val p {
  color: var(--muted);
  max-width: 440px;
}
.os-vals.os-anim .os-val__ill * {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s var(--ease);
}
.os-vals.os-anim .os-val.is-in .os-val__ill * {
  stroke-dashoffset: 0;
}
.os-vals.os-anim .os-val__ill *:nth-child(2) {
  transition-delay: 0.15s;
}
.os-vals.os-anim .os-val__ill *:nth-child(3) {
  transition-delay: 0.3s;
}
.os-vals.os-anim .os-val__ill *:nth-child(4) {
  transition-delay: 0.45s;
}
.os-vals.os-anim .os-val__ill *:nth-child(5) {
  transition-delay: 0.6s;
}

/* 8 Experience */
.os-exp {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(100vh, 900px);
  padding-block: clamp(70px, 9vw, 120px) 110px;
  color: #fff;
  background: var(--forest-deep);
}
.os-exp__slides {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.os-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
  background: linear-gradient(160deg, var(--sage-deep), var(--forest));
}
.os-slide.is-active {
  opacity: 1;
}
.os-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 9s linear;
}
.os-slide.is-active img {
  transform: scale(1.1);
}
.os-exp::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      100deg,
      rgba(14, 28, 20, 0.9) 10%,
      rgba(14, 28, 20, 0.5) 60%,
      rgba(14, 28, 20, 0.3)
    ),
    linear-gradient(0deg, rgba(14, 28, 20, 0.6), transparent 40%);
}
.os-exp__card {
  max-width: 580px;
  padding: clamp(26px, 4vw, 50px);
  border-radius: 30px;
  background: rgba(14, 28, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.os-exp__card .eyebrow {
  color: #efb59d;
}
.os-exp__card h2 {
  color: #fff;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  font-weight: 300;
}
.os-exp__card h2 em {
  color: #efb59d;
  font-weight: 400;
}
.os-exp__card > p {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.86);
}
.os-feel {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}
.os-feel li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.98rem;
}
.os-feel i {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(239, 181, 157, 0.18);
  color: #efb59d;
  font-size: 0.8rem;
}
.os-exp__ctrl {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 30px;
}
.os-exp__ctrl .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.os-exp__cap {
  font-family: var(--ff-head);
  font-size: 1.4rem;
  color: #fff;
}
.os-exp__cap small {
  display: block;
  font-family: var(--ff-body);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #efb59d;
}
.os-dots {
  display: flex;
  gap: 10px;
}
.os-dot {
  width: 34px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.35);
  transition:
    background-color 0.3s,
    width 0.4s var(--ease);
}
.os-dot::after {
  content: "";
  position: absolute;
  inset: -12px 0;
}
.os-dot {
  position: relative;
}
.os-dot.is-active {
  width: 56px;
  background: #efb59d;
}

/* 9 Next chapter */
.os-next {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  color: #fff;
  padding-block: clamp(90px, 12vw, 170px);
  background: var(--forest-deep);
}
.os-next__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.os-next__bg img {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -10%;
  width: 100%;
  height: 120%;
  object-fit: cover;
}
.os-next::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      ellipse at 50% 45%,
      rgba(18, 36, 26, 0.5),
      rgba(18, 36, 26, 0.88)
    ),
    linear-gradient(180deg, rgba(196, 105, 74, 0.2), transparent 55%);
}
.os-next__frame {
  position: absolute;
  inset: clamp(14px, 3vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 30px;
  pointer-events: none;
}
.os-next__in {
  position: relative;
  max-width: 780px;
  margin-inline: auto;
}
.os-next__mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sage);
  color: var(--forest-deep);
  font-size: 1.4rem;
}
.os-next .eyebrow {
  color: #efb59d;
}
.os-next h2 {
  color: #fff;
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 5rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
}
.os-next h2 em {
  color: #efb59d;
  font-weight: 400;
}
.os-next__in > p {
  max-width: 580px;
  margin: 22px auto 0;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: rgba(255, 255, 255, 0.88);
}
.os-next__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}
.os-next__sign {
  margin-top: 34px;
  font-family: var(--ff-head);
  font-style: italic;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.8);
}

/* Our Story: tablet */
@media (max-width: 1024px) {
  .os-hero {
    min-height: 0;
    align-items: center;
  }
  .os-hero__in {
    grid-template-columns: 1fr;
  }
  .os-toc ol {
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
  }
  .os-toc li:nth-last-child(2) a {
    border-bottom: 0;
  }
  .os-begin__grid {
    grid-template-columns: 1fr;
  }
  .os-begin__media {
    max-width: 520px;
    margin-inline: auto;
    width: 100%;
  }
  .os-chaps {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 24px;
  }
  .os-chap::before {
    display: none;
  }
  .os-people__top {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .os-folk:nth-child(1) .os-folk__img {
    margin-top: 36px;
  }
  .os-folk:nth-child(3) .os-folk__img {
    margin-top: 64px;
  }
  .os-ing__top {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .os-ing__row {
    grid-template-columns: repeat(2, 1fr);
  }
  .os-ing__item {
    aspect-ratio: 4 / 3.4;
  }
  .os-col {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(210px, auto);
  }
  .os-col__txt {
    grid-column: 1 / -1;
    grid-row: auto;
    padding-inline-end: 0;
    margin-bottom: 14px;
  }
  .os-col__a,
  .os-col__c {
    grid-column: auto;
    grid-row: auto;
  }
  .os-col__b {
    grid-column: 2;
    grid-row: 2 / 4;
    border-radius: 140px 140px var(--radius) var(--radius);
  }
  .os-col__a {
    grid-column: 1;
    grid-row: 2;
  }
  .os-col__c {
    grid-column: 1;
    grid-row: 3;
  }
  .os-col__d {
    grid-column: 1 / -1;
    grid-row: 4;
  }
  .os-col__e {
    grid-column: 1 / -1;
    grid-row: 5;
  }
  .os-val {
    grid-template-columns: 96px 1fr;
  }
  .os-val__ill {
    width: 96px;
    height: 96px;
  }
  .os-val p {
    grid-column: 2;
  }
  .os-exp {
    min-height: 0;
  }
}

/* Our Story: mobile */
@media (max-width: 767px) {
  .os-hero {
    padding-block: calc(var(--header-h) + 36px) 56px;
  }
  .os-hero__actions .btn {
    flex: 1 1 100%;
  }
  .os-toc {
    padding: 20px;
    border-radius: 20px;
  }
  .os-toc ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .os-toc a {
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 999px;
    font-size: 1rem;
  }
  .os-toc a span {
    display: none;
  }
  .os-toc a:hover {
    padding-inline-start: 14px;
  }
  .os-begin__media {
    padding-block-end: 50px;
    padding-inline-end: 36px;
  }
  .os-begin__main {
    border-radius: 180px 180px var(--radius) var(--radius);
  }
  .os-begin__note {
    inset-block-end: 70px;
    inset-inline-start: -6px;
    max-width: 190px;
    padding: 10px 14px;
    font-size: 1rem;
  }
  .os-chaps {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .os-chap {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 0 18px;
    text-align: start;
    padding-bottom: 36px;
  }
  .os-chap:last-child {
    padding-bottom: 0;
  }
  .os-chap::before {
    display: block;
    inset-block-start: 56px;
    inset-inline-start: 27px;
    width: 2px;
    height: calc(100% - 56px);
  }
  .os-chap:nth-child(3)::before {
    background: repeating-linear-gradient(
      180deg,
      var(--sage-deep) 0 8px,
      transparent 8px 14px
    );
  }
  .os-chap__dot {
    margin: 0;
    grid-row: 1 / span 3;
  }
  .os-chap__img {
    margin-top: 0;
    aspect-ratio: 16 / 11;
  }
  .os-chap h3 {
    margin-top: 14px;
  }
  .os-chap p {
    margin: 6px 0 0;
    max-width: none;
  }
  .os-folks {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .os-folk {
    width: 82%;
  }
  .os-folk:nth-child(2) {
    margin-inline-start: auto;
  }
  .os-folk:nth-child(n) .os-folk__img {
    margin-top: 0;
  }
  .os-folk:nth-child(2) .os-folk__img {
    border-radius: 160px 160px var(--radius) var(--radius);
  }
  .os-ing__row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: 18px;
    padding-block-end: 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--sage-deep) transparent;
    -webkit-overflow-scrolling: touch;
  }
  .os-ing__item {
    flex: 0 0 76%;
    aspect-ratio: 3 / 4;
    scroll-snap-align: center;
    border-radius: var(--radius);
  }
  .os-col {
    grid-auto-rows: minmax(170px, auto);
    gap: 12px;
  }
  .os-col__b {
    border-radius: 100px 100px var(--radius) var(--radius);
  }
  .os-val {
    grid-template-columns: 72px 1fr;
    gap: 14px 18px;
  }
  .os-val__ill {
    width: 72px;
    height: 72px;
  }
  .os-exp {
    padding-block: 60px 100px;
  }
  .os-exp__card {
    border-radius: 24px;
  }
  .os-exp__ctrl .container {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 12px;
  }
  .os-next__frame {
    border-radius: 22px;
  }
  .os-next__actions .btn {
    flex: 1 1 100%;
  }
}
/* =========================================================
   Our Philosophy page — all rules ph-*  (body.page-philosophy)
   ========================================================= */
.ph-sec {
  position: relative;
  padding-block: clamp(70px, 9vw, 120px);
  background: var(--bg);
}
.ph-sec--tint {
  background: var(--bg-tint);
}
.ph-sec--soft {
  background: var(--bg-soft);
}
.ph-hero[id],
.ph-sec[id],
.ph-promise[id] {
  scroll-margin-top: 70px;
}
.ph-head {
  max-width: 680px;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.ph-head h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  letter-spacing: -0.01em;
}
.ph-head p {
  margin-top: 16px;
  color: var(--muted);
}
.ph-head--center {
  margin-inline: auto;
  text-align: center;
}
.ph-head--split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.ph-head--split > div {
  max-width: 620px;
}
.ph-head--split > p {
  max-width: 430px;
  margin-top: 0;
}
.ph-ph {
  background: linear-gradient(135deg, var(--sage-light), var(--sage));
}
.ph-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 1 Hero */
.ph-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  /* min-height: 100vh; */
  /* min-height: 100svh; */
  padding-block: calc(var(--header-h) + 60px) 65px;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--forest-deep),
    var(--forest) 60%,
    var(--sage-deep)
  );
}
.ph-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.ph-hero__bg img {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -10%;
  width: 100%;
  height: 120%;
  object-fit: cover;
}
.ph-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      105deg,
      rgba(18, 36, 26, 0.9) 8%,
      rgba(18, 36, 26, 0.55) 55%,
      rgba(18, 36, 26, 0.3)
    ),
    linear-gradient(0deg, rgba(18, 36, 26, 0.6), transparent 45%);
}
.ph-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 0.88rem;
  color: var(--sage);
}
.ph-crumbs i {
  font-size: 0.6rem;
}
.ph-crumbs a {
  transition: color 0.3s;
}
.ph-crumbs a:hover {
  color: #fff;
}
.ph-crumbs span {
  color: rgba(255, 255, 255, 0.88);
}
.ph-title {
  color: #fff;
  font-weight: 300;
  font-size: clamp(2.8rem, 7vw, 6rem);
  letter-spacing: -0.02em;
  line-height: 1.04;
  max-width: 11em;
}
.ph-line {
  display: block;
  overflow: hidden;
  padding-block: 0.06em 0.12em;
}
.ph-line b {
  display: block;
  font-weight: inherit;
}
.ph-title em {
  color: #efb59d;
  font-weight: 400;
}
.ph-hero__text {
  max-width: 580px;
  margin-top: 26px;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(255, 255, 255, 0.88);
}
.ph-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.ph-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  max-width: 640px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.88);
}
.ph-hero__meta i {
  color: var(--sage);
  margin-inline-end: 8px;
}

/* 2 Core belief */
.ph-belief {
  overflow: hidden;
}
.ph-statement {
  font-size: clamp(2.6rem, 7.4vw, 6.6rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 13em;
}
.ph-statement em {
  font-weight: 400;
}
.ph-w {
  display: inline-block;
}
.ph-belief__body {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(36px, 7vw, 110px);
  align-items: start;
  margin-top: clamp(48px, 7vw, 96px);
  padding-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--border);
}
.ph-belief__lead {
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 46ch;
}
.ph-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.ph-tags li {
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--tint);
  font-size: 0.86rem;
  color: var(--heading);
}
.ph-belief__list {
  border-top: 1px solid var(--border);
}
.ph-belief__list li:first-child {
  border-top: 0;
}
.ph-bcol {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding-block: 22px;
  border-bottom: 1px solid var(--border);
}
.ph-bcol:first-child {
  padding-top: 0;
}
.ph-bcol__n {
  font-family: var(--ff-head);
  font-size: 2.2rem;
  font-style: italic;
  line-height: 1;
  color: var(--terracotta);
}
.ph-bcol h3 {
  font-size: 1.6rem;
}
.ph-bcol p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.97rem;
  max-width: 44ch;
}
.ph-belief__list {
  border-top: 0;
}

/* 3 Ingredients */
.ph-ing__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 110px;
  gap: 16px;
}
.ph-ing__grid figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.ph-ing__grid img {
  position: absolute;
  inset: 0;
  transition: transform 1.2s var(--ease);
}
.ph-ing__grid figure:hover img {
  transform: scale(1.07);
}
.ph-ing__grid figcaption {
  position: absolute;
  inset-inline-start: 14px;
  inset-block-end: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  background: rgba(250, 245, 234, 0.92);
  color: var(--forest);
}
.ph-ing__a {
  grid-column: 1 / 5;
  grid-row: 1 / 5;
}
.ph-ing__e {
  grid-column: 1 / 5;
  grid-row: 5 / 6;
}
.ph-ing__b {
  grid-column: 5 / 9;
  grid-row: 1 / 4;
}
.ph-ing__d {
  grid-column: 5 / 9;
  grid-row: 4 / 6;
}
.ph-ing__c {
  grid-column: 9 / 13;
  grid-row: 1 / 6;
  border-radius: 200px 200px var(--radius) var(--radius) !important;
}
.ph-pts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(40px, 5vw, 64px);
}
.ph-pt {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.ph-pt__ic {
  flex: 0 0 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tint);
  color: var(--forest);
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.4s var(--ease);
}
.ph-pt:hover .ph-pt__ic {
  background: var(--terracotta);
  color: #fff;
  transform: rotate(-8deg) scale(1.06);
}
.ph-pt h3 {
  font-size: 1.5rem;
}
.ph-pt p {
  margin-top: 6px;
  font-size: 0.95rem;
  color: var(--muted);
}

/* 4 Flavour wheel */
.ph-flavor {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.84);
  background: radial-gradient(
    circle at 88% 0%,
    #2a4a35 0%,
    var(--forest-deep) 62%
  );
}
.ph-flavor .eyebrow {
  color: #efb59d;
}
.ph-flavor__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.ph-flavor__title {
  color: #fff;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
}
.ph-flavor__title em {
  color: #efb59d;
}
.ph-flavor__lead {
  margin-top: 16px;
  max-width: 540px;
  color: rgba(255, 255, 255, 0.82);
}
.ph-wheel {
  --size: min(480px, calc(100vw - 48px));
  --n: calc(var(--size) * 0.2);
  --r: calc(var(--size) * 0.4);
  position: relative;
  width: var(--size);
  height: var(--size);
  margin-inline: auto;
}
.ph-wheel__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(255, 255, 255, 0.24);
  stroke-width: 0.35;
  stroke-dasharray: 1 1.6;
  animation: ph-spin 90s linear infinite;
  transform-origin: 50% 50%;
}
.ph-wheel__ring .is-inner {
  stroke: rgba(239, 181, 157, 0.35);
}
@keyframes ph-spin {
  to {
    transform: rotate(360deg);
  }
}
.ph-wheel__core {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: calc(var(--size) * 0.3);
  height: calc(var(--size) * 0.3);
  margin: calc(var(--size) * -0.15);
  border-radius: 50%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  text-align: center;
  background: var(--forest);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: var(--shadow-lg);
  color: #fff;
}
.ph-wheel__core i {
  color: #efb59d;
  font-size: clamp(1.2rem, calc(var(--size) * 0.06), 1.9rem);
}
.ph-wheel__core span {
  font-family: var(--ff-head);
  font-size: clamp(0.95rem, calc(var(--size) * 0.04), 1.4rem);
}
.ph-node {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: var(--n);
  height: var(--n);
  margin: calc(var(--n) / -2);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1));
  transition:
    background-color 0.35s,
    border-color 0.35s,
    color 0.35s,
    scale 0.35s var(--ease),
    box-shadow 0.35s;
}
.ph-node i {
  font-size: clamp(1rem, calc(var(--n) * 0.28), 1.6rem);
}
.ph-node span {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ph-node:hover {
  scale: 1.08;
  border-color: #efb59d;
}
.ph-node.is-on {
  background: var(--terracotta);
  border-color: var(--terracotta);
  scale: 1.1;
  box-shadow: 0 12px 30px rgba(196, 105, 74, 0.45);
}
.ph-node.is-pair {
  border-color: var(--sage);
  box-shadow: 0 0 0 5px rgba(156, 175, 136, 0.25);
}
.ph-panel {
  margin-top: 30px;
  padding: clamp(24px, 3vw, 34px);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.ph-panel__top {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ph-panel__ic {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sage);
  color: var(--forest-deep);
  font-size: 1.2rem;
}
.ph-panel h3 {
  color: #fff;
  font-size: 2rem;
}
.ph-panel > p {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.86);
}
.ph-panel__dl {
  margin: 18px 0 0;
  display: grid;
  gap: 0;
}
.ph-panel__dl > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  padding-block: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.95rem;
}
.ph-panel__dl dt {
  color: #efb59d;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-top: 4px;
}
.ph-panel__dl dd {
  margin: 0;
}
.ph-pairs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ph-pairbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.86rem;
  color: #fff;
  transition:
    background-color 0.3s,
    border-color 0.3s;
}
.ph-pairbtn i {
  color: #efb59d;
  font-size: 0.8rem;
}
.ph-pairbtn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--sage);
}

/* 5 Mindful dining */
.ph-mind__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(36px, 7vw, 110px);
  align-items: start;
}
.ph-mind__side {
  position: sticky;
  inset-block-start: 110px;
}
.ph-mind__title {
  font-size: clamp(2.2rem, 4.2vw, 3.5rem);
}
.ph-mind__lead {
  margin-top: 18px;
  color: var(--muted);
  max-width: 46ch;
}
.ph-rows {
  border-top: 1px solid var(--border);
}
.ph-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: clamp(18px, 3vw, 32px);
  padding-block: clamp(28px, 3.4vw, 46px);
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.ph-row__ic {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: var(--forest);
  background: var(--tint);
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.5s var(--ease);
}
.ph-row:hover .ph-row__ic {
  background: var(--terracotta);
  color: #fff;
  transform: rotate(-8deg) scale(1.05);
}
.ph-row__n {
  display: block;
  margin-bottom: 6px;
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  color: var(--muted);
}
.ph-row h3 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}
.ph-row p {
  margin-top: 10px;
  color: var(--muted);
  max-width: 46ch;
}

/* 6 Sustainability */
.ph-eco__grid {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 400px) 1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
}
.ph-eco__col {
  display: grid;
  gap: clamp(30px, 5vw, 64px);
}
.ph-eco__col--l {
  text-align: end;
}
.ph-eco__ic {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--forest);
  font-size: 1.1rem;
}
.ph-eco__col--l .ph-eco__ic {
  margin-inline-start: auto;
}
.ph-eco__item h3 {
  font-size: 1.6rem;
}
.ph-eco__item p {
  margin-top: 8px;
  font-size: 0.96rem;
  color: var(--muted);
  max-width: 34ch;
}
.ph-eco__col--l .ph-eco__item p {
  margin-inline-start: auto;
}
.ph-eco__art {
  width: 100%;
  height: auto;
  color: var(--sage-deep);
}
.ph-eco__art * {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ph-eco__art circle:nth-child(2) {
  opacity: 0.5;
}
.ph-eco.ph-anim .ph-eco__art * {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2s var(--ease);
}
.ph-eco.ph-anim.is-in .ph-eco__art * {
  stroke-dashoffset: 0;
}
.ph-eco.ph-anim .ph-eco__art *:nth-child(3) {
  transition-delay: 0.3s;
}
.ph-eco.ph-anim .ph-eco__art *:nth-child(4) {
  transition-delay: 0.5s;
}
.ph-eco.ph-anim .ph-eco__art *:nth-child(5) {
  transition-delay: 0.65s;
}
.ph-eco.ph-anim .ph-eco__art *:nth-child(6) {
  transition-delay: 0.8s;
}
.ph-eco.ph-anim .ph-eco__art *:nth-child(7) {
  transition-delay: 0.95s;
}
.ph-eco.ph-anim .ph-eco__art *:nth-child(n + 8) {
  transition-delay: 1.1s;
}
.ph-eco__note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 820px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding: 20px 26px;
  border-radius: var(--radius-sm);
  background: var(--tint);
  font-size: 0.96rem;
  color: var(--text);
}
.ph-eco__note i {
  margin-top: 5px;
  color: var(--forest);
}

/* 7 Promise */
.ph-promise {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  color: #fff;
  padding-block: clamp(100px, 13vw, 180px);
  background: var(--forest-deep);
}
.ph-promise__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.ph-promise__bg img {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -10%;
  width: 100%;
  height: 120%;
  object-fit: cover;
}
.ph-promise::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      ellipse at 50% 45%,
      rgba(18, 36, 26, 0.55),
      rgba(18, 36, 26, 0.9)
    ),
    linear-gradient(180deg, rgba(196, 105, 74, 0.18), transparent 55%);
}
.ph-promise__frame {
  position: absolute;
  inset: clamp(14px, 3vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 30px;
  pointer-events: none;
  z-index: 1;
}
.ph-promise__in {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin-inline: auto;
}
.ph-promise__mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sage);
  color: var(--forest-deep);
  font-size: 1.4rem;
}
.ph-promise .eyebrow {
  color: #efb59d;
}
.ph-promise h2 {
  color: #fff;
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 5rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
}
.ph-promise h2 em {
  color: #efb59d;
  font-weight: 400;
}
.ph-promise__in > p {
  max-width: 600px;
  margin: 22px auto 0;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: rgba(255, 255, 255, 0.88);
}
.ph-promise__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 38px;
}

/* Our Philosophy: tablet */
@media (max-width: 1024px) {
  .ph-head--split {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .ph-belief__body {
    grid-template-columns: 1fr;
  }
  .ph-ing__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }
  .ph-ing__a,
  .ph-ing__b,
  .ph-ing__d,
  .ph-ing__e {
    grid-column: auto;
    grid-row: auto;
  }
  .ph-ing__c {
    grid-column: 2;
    grid-row: 1 / 3;
    border-radius: 140px 140px var(--radius) var(--radius) !important;
  }
  .ph-ing__a {
    grid-column: 1;
    grid-row: 1;
  }
  .ph-ing__b {
    grid-column: 1;
    grid-row: 2;
  }
  .ph-ing__d {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .ph-ing__e {
    grid-column: 1 / -1;
    grid-row: 4;
  }
  .ph-pts {
    grid-template-columns: 1fr;
  }
  .ph-flavor__grid {
    grid-template-columns: 1fr;
  }
  .ph-mind__grid {
    grid-template-columns: 1fr;
  }
  .ph-mind__side {
    position: static;
  }
  .ph-eco__grid {
    grid-template-columns: 1fr;
  }
  .ph-eco__art {
    order: -1;
    max-width: 340px;
    margin-inline: auto;
  }
  .ph-eco__col {
    grid-template-columns: 1fr 1fr;
  }
  .ph-eco__col--l {
    text-align: start;
  }
  .ph-eco__col--l .ph-eco__ic,
  .ph-eco__col--l .ph-eco__item p {
    margin-inline-start: 0;
  }
}

/* Our Philosophy: mobile */
@media (max-width: 767px) {
  .ph-hero {
    min-height: 0;
    padding-block: calc(var(--header-h) + 40px) 100px;
  }
  .ph-hero__actions .btn {
    flex: 1 1 100%;
  }
  .ph-hero__meta {
    gap: 10px 22px;
    margin-top: 38px;
    font-size: 0.86rem;
  }
  .ph-bcol {
    grid-template-columns: 48px 1fr;
    gap: 12px;
  }
  .ph-bcol__n {
    font-size: 1.8rem;
  }
  .ph-ing__grid {
    grid-auto-rows: 160px;
    gap: 12px;
  }
  .ph-ing__c {
    border-radius: 100px 100px var(--radius) var(--radius) !important;
  }
  .ph-wheel {
    --size: min(360px, calc(100vw - 36px));
  }
  .ph-node span {
    display: none;
  }
  .ph-panel__dl > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .ph-row {
    grid-template-columns: 56px 1fr;
  }
  .ph-row__ic {
    width: 56px;
    height: 56px;
    font-size: 1.15rem;
  }
  .ph-eco__col {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .ph-promise__frame {
    border-radius: 22px;
  }
  .ph-promise__actions .btn {
    flex: 1 1 100%;
  }
}

/* Keep non-home page heroes at the Contact hero's viewport height. */
.mc-hero,
.st-hero,
.sb-hero,
.ds-hero,
.dk-hero,
.nf-hero,
.cs-hero,
.os-hero,
.ph-hero {
  width: 100%;
  min-height: 90vh;
  min-height: 90svh;
}
.os-hero,
.ph-hero,
.sb-hero {
  min-height: 90vh;
}
@media (prefers-reduced-motion: reduce) {
  .ph-wheel__ring {
    animation: none;
  }
  .ph-eco.ph-anim .ph-eco__art * {
    transition: none !important;
  }
}