/* Minimal project-level CSS. Layout and components are Tailwind-first. */

:root {
  --brand-primary: #0f8b8d;
  --brand-primary-dark: #0b6668;
  --brand-primary-soft: #c7efea;
  --brand-neutral-warm: #eef7f4;
  --brand-neutral-panel: #fbfdfa;
  --brand-neutral-soft: #d7ebe5;
  --brand-ink: #17333a;
  --brand-muted: #4f6d73;
  --brand-border: #9bc9c3;
  --brand-shadow: 0 20px 44px rgba(18, 67, 73, 0.11);
  --brand-teal: var(--brand-primary);
  --brand-teal-dark: var(--brand-primary-dark);
  --brand-bg: var(--brand-neutral-warm);
}

body {
  background:
    radial-gradient(circle at top left, rgba(15, 139, 141, 0.18), transparent 32%),
    radial-gradient(circle at 88% 12%, rgba(255, 185, 106, 0.14), transparent 26%),
    linear-gradient(180deg, rgba(250, 255, 253, 0.92), rgba(238, 247, 244, 0.96)),
    var(--brand-neutral-warm);
  text-rendering: optimizeLegibility;
}

html {
  scroll-behavior: auto;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}

[id] {
  scroll-margin-top: 9rem;
}

@media (min-width: 1024px) {
  [id] {
    scroll-margin-top: 10rem;
  }
}

.brand-shell {
  position: relative;
}

.brand-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 100% 0%, rgba(15, 139, 141, 0.08), transparent 24%),
    radial-gradient(circle at 0% 100%, rgba(11, 102, 104, 0.07), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 42%),
    repeating-linear-gradient(135deg, rgba(15, 139, 141, 0.02) 0, rgba(15, 139, 141, 0.02) 1px, transparent 1px, transparent 18px);
}

.brand-section {
  border: 1px solid rgba(155, 201, 195, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 250, 0.96)),
    rgba(251, 253, 250, 0.96);
  box-shadow: var(--brand-shadow);
}

.brand-section-tint {
  border: 1px solid rgba(155, 201, 195, 0.92);
  background:
    linear-gradient(135deg, rgba(199, 239, 234, 0.82), rgba(251, 254, 252, 0.95) 48%, rgba(255, 245, 229, 0.84)),
    rgba(251, 253, 250, 0.95);
  box-shadow: var(--brand-shadow);
}

.brand-section-neutral {
  border: 1px solid rgba(155, 201, 195, 0.86);
  background:
    linear-gradient(180deg, rgba(215, 235, 229, 0.8), rgba(244, 251, 248, 0.92)),
    rgba(226, 242, 238, 0.82);
  box-shadow: var(--brand-shadow);
}

.brand-section-dark {
  border: 1px solid rgba(123, 197, 191, 0.22);
  background: linear-gradient(145deg, #124a52, #17333a);
  box-shadow: var(--brand-shadow);
}

.brand-hero {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(155, 201, 195, 0.95);
  background:
    linear-gradient(135deg, rgba(193, 236, 229, 0.92), rgba(250, 255, 253, 0.98) 38%, rgba(221, 243, 238, 0.96) 68%, rgba(255, 241, 214, 0.88)),
    rgba(251, 253, 250, 0.96);
  box-shadow: 0 28px 54px rgba(18, 67, 73, 0.14);
}

.brand-hero > * {
  position: relative;
  z-index: 1;
}

.brand-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 14%, rgba(15, 139, 141, 0.22), transparent 28%),
    radial-gradient(circle at 90% 20%, rgba(255, 185, 106, 0.2), transparent 26%),
    radial-gradient(circle at 56% 0%, rgba(255, 255, 255, 0.34), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 44%),
    repeating-linear-gradient(135deg, rgba(15, 139, 141, 0.02) 0, rgba(15, 139, 141, 0.02) 1px, transparent 1px, transparent 16px);
  opacity: 0.96;
}

.cake-hero-panel {
  border: 1px solid rgba(11, 102, 104, 0.18);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 34px rgba(18, 67, 73, 0.1);
}

.cake-hero-highlight {
  border: 1px solid rgba(11, 102, 104, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(229, 245, 241, 0.92)),
    rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 32px rgba(18, 67, 73, 0.12);
}

.cake-image-frame {
  position: relative;
  overflow: hidden;
}

.cake-image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(23, 51, 58, 0.02), rgba(23, 51, 58, 0.22));
}

.brand-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.brand-kicker::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--brand-primary), rgba(15, 139, 141, 0.18));
}

.brand-divider {
  position: relative;
}

.brand-divider::after {
  content: "";
  display: block;
  width: 4.25rem;
  height: 2px;
  margin-top: 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-primary), rgba(15, 139, 141, 0.15));
}

.brand-pill {
  border: 1px solid rgba(15, 139, 141, 0.16);
  background: rgba(251, 253, 250, 0.9);
  color: var(--brand-muted);
}

.brand-link {
  color: var(--brand-primary);
  transition: color 150ms ease, opacity 150ms ease;
}

.brand-link:hover {
  color: var(--brand-primary-dark);
}

.theme-banner {
  background: linear-gradient(90deg, rgba(15, 139, 141, 0.16), rgba(255, 243, 216, 0.9) 50%, rgba(15, 139, 141, 0.16));
}

.theme-card-glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
}

.theme-list-teal {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(199, 239, 234, 0.76) 56%, rgba(255, 242, 216, 0.9));
}

.theme-list-warm {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(199, 239, 234, 0.72) 52%, rgba(255, 240, 219, 0.92));
}

.theme-step-teal {
  border: 1px solid rgba(15, 139, 141, 0.2);
  background: rgba(255, 255, 255, 0.85);
  color: var(--brand-primary-dark);
}

.theme-step-warm {
  border: 1px solid rgba(255, 185, 106, 0.52);
  background: rgba(255, 255, 255, 0.85);
  color: #8d6422;
}

.theme-step-soft {
  border: 1px solid rgba(155, 201, 195, 0.9);
  background: rgba(255, 255, 255, 0.85);
  color: var(--brand-primary);
}

.theme-ring {
  box-shadow: inset 0 0 0 1px rgba(15, 139, 141, 0.1);
}

.theme-success-panel {
  border: 1px solid rgba(15, 139, 141, 0.2);
  background: rgba(15, 139, 141, 0.1);
  color: var(--brand-ink);
}

.theme-warm-panel {
  border: 1px solid rgba(255, 185, 106, 0.52);
  background: rgba(255, 244, 220, 0.95);
  color: #4d3a19;
}

.theme-soft-text {
  color: rgba(199, 239, 234, 0.95);
}

.theme-cta-gradient {
  background: linear-gradient(90deg, var(--brand-primary), #18a6a4, var(--brand-primary-dark));
}

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.85rem;
  padding: 0.9rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}

.btn-primary {
  border: 1px solid rgba(11, 102, 104, 0.95);
  background: linear-gradient(180deg, #19a3a3, var(--brand-primary));
  color: #fff;
  box-shadow: 0 12px 24px rgba(11, 102, 104, 0.16);
}

.btn-primary:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #118b8d, var(--brand-primary-dark));
  box-shadow: 0 16px 28px rgba(11, 102, 104, 0.2);
}

.btn-primary:active,
.btn-secondary:active {
  transform: translateY(0);
}

.btn-secondary {
  border: 1px solid rgba(15, 139, 141, 0.24);
  background: rgba(251, 253, 250, 0.86);
  color: var(--brand-ink);
  box-shadow: 0 8px 20px rgba(18, 67, 73, 0.05);
}

.btn-secondary:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 139, 141, 0.5);
  color: var(--brand-primary-dark);
  box-shadow: 0 14px 24px rgba(18, 67, 73, 0.1);
}

.btn-primary.is-pressed,
.btn-secondary.is-pressed {
  transform: translateY(1px) scale(0.985);
}

.brand-order-switcher {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.brand-select-wrap {
  position: relative;
}

.brand-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid rgba(11, 102, 104, 0.72);
  border-bottom: 2px solid rgba(11, 102, 104, 0.72);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.brand-select {
  width: 100%;
  appearance: none;
  border: 1px solid rgba(15, 139, 141, 0.28);
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 250, 247, 0.98)),
    rgba(255, 255, 255, 0.96);
  color: var(--brand-ink);
  padding: 0.95rem 3rem 0.95rem 1rem;
  font-size: 0.95rem;
  line-height: 1.4;
  box-shadow: 0 10px 18px rgba(18, 67, 73, 0.08);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.brand-select:hover {
  border-color: rgba(15, 139, 141, 0.5);
}

.brand-select:focus {
  transform: translateY(-1px);
}

/* ── Cake order form: iOS date/time inputs ─────────
   On iOS Safari, input[type=date]/[type=time] render as native
   controls whose intrinsic sizing/padding can push the field past
   the width the box model assigns it, so on iPhone the box looks
   wider than the neighbouring text inputs and reaches the card edge.
   Stripping the native appearance makes them obey the same
   border-box / width:100% rules as every other field (tapping still
   opens the native iOS picker). */
#cake-order-form input[type="date"],
#cake-order-form input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
  min-width: 0;
}

/* ── Site Header ──────────────────────────────── */

.site-header {
  background: #265768;
  box-shadow: 0 2px 22px rgba(18, 67, 73, 0.38);
  transition: box-shadow 200ms ease;
}

.site-header.is-scrolled {
  box-shadow: 0 4px 36px rgba(18, 67, 73, 0.55);
}

/* Header row (menu | centered logo | balance column) */
.site-header-logo-row {
  display: grid;
  grid-template-columns: minmax(6.75rem, 1fr) auto minmax(6.75rem, 1fr);
  align-items: center;
  min-height: 5.55rem;
  padding: 0.3rem clamp(1rem, 4vw, 3.625rem);
  gap: 1rem;
}

.site-logo-link {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  color: #ffffff;
}

.site-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-width: 6.75rem;
  min-height: 3.25rem;
  padding: 0.7rem 1rem;
  gap: 0.55rem;
  border: 1px solid rgba(142, 224, 218, 0.82);
  border-radius: 0.2rem;
  background: rgba(142, 224, 218, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.site-menu-button:hover,
.site-menu-button[aria-expanded="true"] {
  border-color: #8ee0da;
  background: rgba(142, 224, 218, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.site-menu-button-icon {
  width: 1.55rem;
  height: 1.55rem;
}

.site-menu-button-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.site-logo-split-img {
  height: 3.75rem;
  width: auto;
  display: block;
}

.site-logo-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-decoration: none;
}

.site-logo-mark::after {
  display: none;
}

.site-home-title-logo {
  display: block;
  width: clamp(8rem, 15vw, 12.5rem);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.site-header-logo-row .site-home-title-logo {
  width: clamp(11.25rem, 18vw, 15rem);
  height: clamp(4.05rem, 6.1vw, 5rem);
  object-fit: cover;
  object-position: center 52%;
}

.site-logo-est {
  order: 2;
  color: rgba(255, 255, 255, 0.74);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.site-social-stack {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-self: end;
  gap: 0.28rem;
}

.site-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.95rem;
  padding: 0.34rem 0.56rem;
  gap: 0.42rem;
  border: 1px solid rgba(142, 224, 218, 0.3);
  border-radius: 0.2rem;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.84);
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.site-social-link:hover {
  border-color: rgba(142, 224, 218, 0.82);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  transform: translateY(-1px);
}

.site-social-icon {
  width: 1.18rem;
  height: 1.18rem;
  flex-shrink: 0;
}

.site-social-label {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-menu-panel {
  position: relative;
}

.site-menu-surface {
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  max-height: calc(100svh - 8rem);
  border: 1px solid rgba(155, 201, 195, 0.9);
  border-radius: 1.5rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 247, 244, 0.96)),
    rgba(251, 253, 250, 0.96);
  box-shadow: 0 24px 40px rgba(18, 67, 73, 0.12);
}

.site-menu-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top right, rgba(15, 139, 141, 0.1), transparent 24%),
    radial-gradient(circle at bottom left, rgba(255, 185, 106, 0.12), transparent 22%);
}

.site-menu-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.85rem;
}

.site-menu-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 2.75rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.42);
  color: rgba(23, 51, 58, 0.78);
  font-size: 0.95rem;
  font-weight: 600;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.site-menu-link::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.6rem;
  height: 1px;
  transform: scaleX(0);
  transform-origin: center;
  border-radius: 999px;
  background: rgba(15, 139, 141, 0.72);
  transition: transform 150ms ease;
}

.site-menu-link:hover,
.site-menu-link.active {
  color: var(--brand-primary-dark);
  border-color: rgba(155, 201, 195, 0.86);
  background: rgba(243, 251, 248, 0.9);
}

.site-menu-link-primary {
  grid-column: 1 / -1;
  border: 1px solid rgba(11, 102, 104, 0.92);
  background: linear-gradient(180deg, rgba(25, 163, 163, 0.98), rgba(15, 139, 141, 0.98));
  box-shadow: 0 10px 18px rgba(11, 102, 104, 0.14);
  color: #fff;
}

.site-menu-link-primary::after {
  display: none;
}

.site-menu-link:hover,
.site-menu-link.active,
.site-menu-button:hover {
  transform: translateY(-1px);
}

.site-menu-link:hover::after,
.site-menu-link.active::after {
  transform: scaleX(1);
}

.site-menu-link-primary:hover,
.site-menu-link-primary.active {
  border-color: rgba(11, 102, 104, 1);
  background: linear-gradient(180deg, #118b8d, var(--brand-primary-dark));
  box-shadow: 0 14px 24px rgba(11, 102, 104, 0.18);
  color: #fff;
}

.site-menu-link-primary:hover::after,
.site-menu-link-primary.active::after {
  transform: none;
}

input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 3px rgba(15, 139, 141, 0.16);
}

.home-hero {
  background:
    radial-gradient(circle at 16% 16%, rgba(255, 213, 110, 0.34), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(255, 151, 174, 0.22), transparent 18%),
    radial-gradient(circle at 78% 76%, rgba(123, 213, 193, 0.18), transparent 20%),
    linear-gradient(135deg, rgba(255, 234, 211, 0.96), rgba(255, 249, 242, 0.98) 34%, rgba(255, 229, 221, 0.96) 68%, rgba(247, 212, 174, 0.9)),
    rgba(251, 244, 235, 0.94);
}

.home-hero::before {
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.5), transparent 20%),
    radial-gradient(circle at 88% 20%, rgba(255, 185, 106, 0.16), transparent 18%),
    radial-gradient(circle at 62% 0%, rgba(255, 255, 255, 0.36), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 44%);
}

.home-hero-sprinkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.home-hero-sprinkles span {
  position: absolute;
  width: 0.95rem;
  height: 0.28rem;
  border-radius: 999px;
  opacity: 0.8;
  box-shadow: 0 4px 10px rgba(18, 67, 73, 0.08);
}

.home-hero-sprinkles span:nth-child(1) { top: 10%; left: 8%; background: #0f8b8d; transform: rotate(28deg); }
.home-hero-sprinkles span:nth-child(2) { top: 18%; left: 22%; background: #f5b545; transform: rotate(118deg); }
.home-hero-sprinkles span:nth-child(3) { top: 12%; right: 20%; background: #6cc9b6; transform: rotate(36deg); }
.home-hero-sprinkles span:nth-child(4) { top: 24%; right: 8%; background: #ffb96a; transform: rotate(128deg); }
.home-hero-sprinkles span:nth-child(5) { top: 46%; left: 3%; background: #18a6a4; transform: rotate(55deg); }
.home-hero-sprinkles span:nth-child(6) { top: 56%; left: 18%; background: #73d1c5; transform: rotate(142deg); }
.home-hero-sprinkles span:nth-child(7) { top: 60%; right: 22%; background: #f5b545; transform: rotate(44deg); }
.home-hero-sprinkles span:nth-child(8) { top: 72%; right: 12%; background: #0f8b8d; transform: rotate(134deg); }
.home-hero-sprinkles span:nth-child(9) { bottom: 18%; left: 9%; background: #ffb96a; transform: rotate(20deg); }
.home-hero-sprinkles span:nth-child(10) { bottom: 14%; left: 32%; background: #18a6a4; transform: rotate(110deg); }
.home-hero-sprinkles span:nth-child(11) { bottom: 9%; right: 28%; background: #73d1c5; transform: rotate(32deg); }
.home-hero-sprinkles span:nth-child(12) { bottom: 16%; right: 6%; background: #f5b545; transform: rotate(124deg); }

.home-confetti-orb {
  position: absolute;
  z-index: 0;
  width: 12rem;
  aspect-ratio: 1;
  border-radius: 999px;
  filter: blur(2px);
  opacity: 0.75;
  pointer-events: none;
}

.home-confetti-orb-left {
  top: -2.5rem;
  left: -2.5rem;
  background:
    radial-gradient(circle at 38% 34%, rgba(255, 255, 255, 0.9) 0 8%, transparent 9%),
    radial-gradient(circle at 67% 22%, rgba(15, 139, 141, 0.85) 0 6%, transparent 7%),
    radial-gradient(circle at 24% 70%, rgba(108, 201, 182, 0.85) 0 7%, transparent 8%),
    radial-gradient(circle at 78% 74%, rgba(245, 181, 69, 0.78) 0 8%, transparent 9%),
    radial-gradient(circle, rgba(255, 236, 204, 0.9), rgba(255, 236, 204, 0));
}

.home-confetti-orb-right {
  right: -2rem;
  bottom: -2rem;
  background:
    radial-gradient(circle at 28% 25%, rgba(108, 201, 182, 0.9) 0 8%, transparent 9%),
    radial-gradient(circle at 66% 20%, rgba(255, 185, 106, 0.88) 0 7%, transparent 8%),
    radial-gradient(circle at 38% 72%, rgba(245, 181, 69, 0.82) 0 8%, transparent 9%),
    radial-gradient(circle at 76% 66%, rgba(15, 139, 141, 0.76) 0 7%, transparent 8%),
    radial-gradient(circle, rgba(232, 248, 245, 0.88), rgba(232, 248, 245, 0));
}

.home-highlight-card {
  border: 1px solid rgba(155, 201, 195, 0.68);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(241, 250, 247, 0.88)),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 28px rgba(18, 67, 73, 0.08);
  backdrop-filter: blur(8px);
}

.home-cake-showcase {
  position: relative;
  border: 1px solid rgba(155, 201, 195, 0.82);
  background:
    radial-gradient(circle at top right, rgba(255, 185, 106, 0.14), transparent 22%),
    radial-gradient(circle at bottom left, rgba(108, 201, 182, 0.16), transparent 20%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(235, 247, 243, 0.94));
  box-shadow: 0 26px 46px rgba(18, 67, 73, 0.12);
}

.home-cake-showcase::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border-radius: 1.6rem;
  border: 1px dashed rgba(15, 139, 141, 0.2);
  pointer-events: none;
}

.home-cake-badge {
  position: absolute;
  z-index: 2;
  max-width: 14rem;
  border: 1px solid rgba(155, 201, 195, 0.82);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 249, 246, 0.94)),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 34px rgba(18, 67, 73, 0.12);
}

.home-cake-badge-top {
  top: 1.25rem;
  left: -1rem;
  transform: rotate(-4deg);
}

.home-cake-badge-bottom {
  right: -1rem;
  bottom: 1.25rem;
  transform: rotate(3deg);
}

.home-party-note {
  border: 1px solid rgba(155, 201, 195, 0.76);
  background:
    radial-gradient(circle at top right, rgba(255, 185, 106, 0.18), transparent 24%),
    linear-gradient(160deg, rgba(247, 253, 251, 0.94), rgba(234, 247, 243, 0.92));
  box-shadow: 0 18px 32px rgba(18, 67, 73, 0.08);
}

.home-marquee {
  border: 1px solid rgba(155, 201, 195, 0.76);
  background:
    linear-gradient(90deg, rgba(233, 248, 244, 0.94), rgba(255, 255, 255, 0.98) 48%, rgba(255, 243, 220, 0.94)),
    rgba(251, 253, 250, 0.92);
  box-shadow: 0 14px 28px rgba(18, 67, 73, 0.08);
}

.home-moments-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 185, 106, 0.16), transparent 20%),
    radial-gradient(circle at 88% 82%, rgba(15, 139, 141, 0.16), transparent 22%),
    linear-gradient(145deg, #13525a, #17333a);
}

.home-moments-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 20px);
}

.home-moment-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.home-signature-band {
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 185, 106, 0.16), transparent 18%),
    radial-gradient(circle at 90% 18%, rgba(108, 201, 182, 0.16), transparent 20%),
    linear-gradient(180deg, rgba(244, 252, 249, 0.96), rgba(232, 246, 242, 0.96));
}

.home-signature-card {
  border: 1px solid rgba(155, 201, 195, 0.8);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(239, 249, 246, 0.92)),
    rgba(255, 255, 255, 0.74);
  box-shadow: 0 14px 26px rgba(18, 67, 73, 0.08);
}

.home-mini-pill {
  border: 1px solid rgba(15, 139, 141, 0.18);
  background: rgba(243, 251, 248, 0.88);
}

.home-cta-panel {
  border: 1px solid rgba(155, 201, 195, 0.82);
  background:
    radial-gradient(circle at top right, rgba(15, 139, 141, 0.16), transparent 22%),
    radial-gradient(circle at bottom left, rgba(255, 185, 106, 0.18), transparent 22%),
    linear-gradient(160deg, rgba(248, 254, 252, 0.96), rgba(233, 247, 243, 0.95));
  box-shadow: 0 24px 42px rgba(18, 67, 73, 0.12);
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  /* NOTE: no `will-change` here on purpose. `will-change: transform` pins the
     element to its own GPU compositing layer permanently; on iOS Safari a layer
     taller than the device tile limit stops delivering taps to content past it,
     which broke the checkout button. Without it the element only composites for
     the duration of the transition and then returns to normal. */
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-secondary,
  .btn-hero-primary,
  .btn-hero-secondary,
  .reveal-on-scroll,
  .site-menu-button,
  .site-social-link,
  .site-menu-link,
  .site-header {
    transition: none;
  }

  .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }
}

/* ── Dark Hero ──────────────────────────────────── */

.dark-hero {
  position: relative;
  min-height: 100svh;
  background: #192a2e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 5rem 1.5rem 4rem;
}

.hero-photos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-photo {
  position: absolute;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0.88;
}

/* Scattered positions — desktop */
/* Top edge photos */
.hp-tl  { top: -3%;   left: 1%;    width: 16vw; height: 16vw; max-width: 200px; max-height: 200px; transform: rotate(-14deg); }
.hp-tlc { top: 3%;    left: 16%;   width: 11vw; height: 11vw; max-width: 136px; max-height: 136px; border-radius: 44% 56% 52% 48%; transform: rotate(9deg); }
.hp-tr  { top: -2%;   right: 15%;  width: 14vw; height: 14vw; max-width: 175px; max-height: 175px; transform: rotate(-7deg); }
.hp-trc { top: 4%;    right: 1%;   width: 10vw; height: 14vw; max-width: 120px; max-height: 175px; border-radius: 46% 54% 50% 50%; transform: rotate(12deg); }
/* Mid-edge photos — kept tight to the very sides so centre text is clear */
.hp-ml  { top: 36%;   left: -1%;   width: 10vw; height: 13vw; max-width: 124px; max-height: 164px; border-radius: 50%; transform: rotate(-6deg); }
.hp-mr  { top: 32%;   right: -1%;  width: 10vw; height: 13vw; max-width: 124px; max-height: 164px; border-radius: 50%; transform: rotate(8deg); }
/* Bottom photos — raised so they sit above the features strip */
.hp-bl  { bottom: 24%; left: 0%;   width: 13vw; height: 10vw; max-width: 164px; max-height: 128px; border-radius: 46% 54% 48% 52%; transform: rotate(7deg); }
.hp-brc { bottom: 22%; right: 0%;  width: 14vw; height: 11vw; max-width: 175px; max-height: 140px; border-radius: 48% 52% 46% 54%; transform: rotate(-9deg); }

/* Hide decorative photos on small screens */
@media (max-width: 767px) {
  .hero-photo { display: none; }
}

@media (max-width: 1023px) {
  .hp-ml, .hp-mr, .hp-tlc, .hp-trc { display: none; }
  .hp-tl  { width: 20vw; height: 20vw; left: 0; }
  .hp-tr  { width: 18vw; height: 18vw; right: 0; }
  .hp-bl  { bottom: 28%; left: 0; width: 18vw; height: 14vw; }
  .hp-brc { bottom: 26%; right: 0; width: 20vw; height: 15vw; }
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 1.6rem;
}

.hero-eyebrow::before,
.hero-eyebrow::after {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.hero-heading {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.12;
  letter-spacing: 0;
  text-align: center;
  max-width: 34rem;
}

.hero-subtext {
  margin-top: 1.4rem;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.75;
  text-align: center;
  max-width: 28rem;
}

.hero-ctas {
  margin-top: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 2.1rem;
  background: var(--brand-primary);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 0.5rem;
  text-decoration: none;
  transition:
    background 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
  box-shadow: 0 8px 22px rgba(15, 139, 141, 0.35);
}

.btn-hero-primary:hover {
  background: var(--brand-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(15, 139, 141, 0.45);
}

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 2.1rem;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 0.5rem;
  text-decoration: none;
  transition:
    border-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.btn-hero-secondary:hover {
  border-color: rgba(255, 255, 255, 0.65);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Hero feature strip */
.hero-features {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 2.5rem;
  margin-top: 4rem;
  padding-top: 2.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  max-width: 40rem;
}

@media (min-width: 640px) {
  .hero-features {
    grid-template-columns: repeat(4, 1fr);
    max-width: 54rem;
    gap: 0 3rem;
  }
}

.hero-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  text-align: center;
}

.hero-feature-icon {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--brand-primary);
  opacity: 0.9;
}

.hero-feature-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
  line-height: 1.45;
}

/* ── Hero Sprinkles ─────────────────────────────── */

.hero-sprinkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.hero-sprinkles span {
  position: absolute;
  width: 0.85rem;
  height: 0.26rem;
  border-radius: 999px;
  opacity: 0;
  animation: sprinkle-drift linear infinite;
}

@keyframes sprinkle-drift {
  0%   { opacity: 0;    transform: var(--sp-rot) translateY(0); }
  8%   { opacity: 0.72; }
  90%  { opacity: 0.65; }
  100% { opacity: 0;    transform: var(--sp-rot) translateY(-18px); }
}

/* Individual sprinkle positions, colours, rotations, delays */
.hero-sprinkles span:nth-child(1)  { top: 12%; left: 7%;   background: var(--brand-primary);      --sp-rot: rotate(22deg);  animation-duration: 4.2s; animation-delay: 0.0s; }
.hero-sprinkles span:nth-child(2)  { top: 19%; left: 24%;  background: #6cc9b6;                   --sp-rot: rotate(112deg); animation-duration: 5.1s; animation-delay: 0.8s; }
.hero-sprinkles span:nth-child(3)  { top: 9%;  left: 44%;  background: rgba(255,255,255,0.55);    --sp-rot: rotate(40deg);  animation-duration: 3.8s; animation-delay: 1.4s; }
.hero-sprinkles span:nth-child(4)  { top: 14%; right: 22%; background: #18a6a4;                   --sp-rot: rotate(130deg); animation-duration: 4.6s; animation-delay: 0.3s; }
.hero-sprinkles span:nth-child(5)  { top: 22%; right: 8%;  background: rgba(255,255,255,0.4);     --sp-rot: rotate(55deg);  animation-duration: 5.4s; animation-delay: 1.9s; }
.hero-sprinkles span:nth-child(6)  { top: 42%; left: 8%;   background: #73d1c5;                   --sp-rot: rotate(148deg); animation-duration: 4.8s; animation-delay: 0.6s; }
.hero-sprinkles span:nth-child(7)  { top: 55%; left: 20%;  background: var(--brand-primary);      --sp-rot: rotate(30deg);  animation-duration: 3.9s; animation-delay: 2.2s; }
.hero-sprinkles span:nth-child(8)  { top: 48%; right: 18%; background: #6cc9b6;                   --sp-rot: rotate(120deg); animation-duration: 5.2s; animation-delay: 0.4s; }
.hero-sprinkles span:nth-child(9)  { top: 62%; right: 7%;  background: rgba(255,255,255,0.45);    --sp-rot: rotate(48deg);  animation-duration: 4.1s; animation-delay: 1.6s; }
.hero-sprinkles span:nth-child(10) { bottom: 30%; left: 14%; background: #18a6a4;                 --sp-rot: rotate(140deg); animation-duration: 4.5s; animation-delay: 0.9s; }
.hero-sprinkles span:nth-child(11) { bottom: 28%; left: 38%; background: var(--brand-primary);    --sp-rot: rotate(26deg);  animation-duration: 3.7s; animation-delay: 2.6s; }
.hero-sprinkles span:nth-child(12) { bottom: 32%; right: 36%; background: rgba(255,255,255,0.4);  --sp-rot: rotate(118deg); animation-duration: 5.0s; animation-delay: 1.1s; }
.hero-sprinkles span:nth-child(13) { bottom: 30%; right: 14%; background: #73d1c5;                --sp-rot: rotate(60deg);  animation-duration: 4.3s; animation-delay: 1.8s; }
.hero-sprinkles span:nth-child(14) { top: 33%;  left: 33%;  background: rgba(255,255,255,0.3);    --sp-rot: rotate(90deg);  animation-duration: 6.0s; animation-delay: 3.0s; }
.hero-sprinkles span:nth-child(15) { top: 38%;  right: 30%; background: #6cc9b6;                  --sp-rot: rotate(15deg);  animation-duration: 4.7s; animation-delay: 0.2s; }
.hero-sprinkles span:nth-child(16) { top: 26%;  left: 36%;  background: var(--brand-primary);     --sp-rot: rotate(80deg);  animation-duration: 5.5s; animation-delay: 2.4s; }

/* ── Extra rods: coral, cream, pink tones ─────────── */
.hero-sprinkles span:nth-child(17) { top: 6%;   left: 15%;  background: #e88b8b; width: 1.2rem; height: 0.32rem; --sp-rot: rotate(58deg);  animation-duration: 4.4s; animation-delay: 0.7s; }
.hero-sprinkles span:nth-child(18) { top: 30%;  left: 3%;   background: #f7d6a0; --sp-rot: rotate(145deg); animation-duration: 5.8s; animation-delay: 1.3s; }
.hero-sprinkles span:nth-child(19) { top: 8%;   right: 10%; background: #e88b8b; --sp-rot: rotate(72deg);  animation-duration: 4.0s; animation-delay: 2.1s; }
.hero-sprinkles span:nth-child(20) { top: 35%;  right: 4%;  background: #ffd1dc; width: 1.1rem; height: 0.3rem;  --sp-rot: rotate(165deg); animation-duration: 5.3s; animation-delay: 0.5s; }
.hero-sprinkles span:nth-child(21) { bottom: 22%; left: 26%; background: #e88b8b; --sp-rot: rotate(12deg);  animation-duration: 4.6s; animation-delay: 1.7s; }
.hero-sprinkles span:nth-child(22) { bottom: 26%; right: 20%; background: #f7d6a0; width: 1.2rem; height: 0.3rem; --sp-rot: rotate(102deg); animation-duration: 5.1s; animation-delay: 0.2s; }
.hero-sprinkles span:nth-child(23) { bottom: 10%; left: 46%; background: #ffd1dc; --sp-rot: rotate(78deg);  animation-duration: 3.6s; animation-delay: 2.8s; }
.hero-sprinkles span:nth-child(24) { top: 70%;  left: 4%;   background: #c5e8e4; width: 1.1rem; height: 0.32rem; --sp-rot: rotate(135deg); animation-duration: 4.9s; animation-delay: 1.0s; }

/* ── Dot circles ───────────────────────────────────── */
.hero-sprinkles i {
  position: absolute;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  opacity: 0;
  font-style: normal;
  display: block;
  animation: sprinkle-drift linear infinite;
  --sp-rot: rotate(0deg);
}
.hero-sprinkles i:nth-of-type(1) { top: 16%;    left: 32%;   background: #f5b545; animation-duration: 5.5s; animation-delay: 0.5s; }
.hero-sprinkles i:nth-of-type(2) { top: 28%;    left: 55%;   background: #e88b8b; animation-duration: 4.8s; animation-delay: 1.8s; }
.hero-sprinkles i:nth-of-type(3) { top: 50%;    right: 30%;  background: #ffd1dc; animation-duration: 5.2s; animation-delay: 0.9s; }
.hero-sprinkles i:nth-of-type(4) { bottom: 38%; left: 48%;   background: #18a6a4; animation-duration: 4.4s; animation-delay: 2.2s; }
.hero-sprinkles i:nth-of-type(5) { bottom: 22%; right: 42%;  background: #f7d6a0; animation-duration: 5.7s; animation-delay: 0.4s; }
.hero-sprinkles i:nth-of-type(6) { top: 72%;    right: 28%;  background: #6cc9b6; animation-duration: 4.1s; animation-delay: 3.1s; }

/* ── Twinkling stars ───────────────────────────────── */
.hero-sprinkles b {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background: rgba(255, 255, 255, 0.88);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  font-weight: normal;
  display: block;
  opacity: 0;
  animation: sprinkle-twinkle ease-in-out infinite;
}
.hero-sprinkles b:nth-of-type(1) { top: 22%;    left: 44%;   animation-duration: 3.2s; animation-delay: 0.6s; }
.hero-sprinkles b:nth-of-type(2) { top: 10%;    right: 36%;  animation-duration: 4.0s; animation-delay: 2.1s; }
.hero-sprinkles b:nth-of-type(3) { bottom: 35%; left: 38%;   animation-duration: 3.6s; animation-delay: 1.3s; }
.hero-sprinkles b:nth-of-type(4) { bottom: 18%; right: 32%;  animation-duration: 4.4s; animation-delay: 0.3s; }

@keyframes sprinkle-twinkle {
  0%, 100% { opacity: 0;    transform: scale(0.4) rotate(0deg); }
  20%       { opacity: 0.9; transform: scale(1.15) rotate(72deg); }
  50%       { opacity: 0.7; transform: scale(1)    rotate(180deg); }
  80%       { opacity: 0.85; transform: scale(1.05) rotate(288deg); }
}

/* ── Moments section: floating sprinkles ───────────── */
.moments-sprinkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.moments-sprinkles span {
  position: absolute;
  height: 0.22rem;
  border-radius: 999px;
  opacity: 0;
  animation: sprinkle-drift linear infinite;
  --sp-rot: rotate(0deg);
}
.moments-sprinkles span:nth-child(1) { width: 0.8rem;  top: 8%;     left: 6%;    background: rgba(108,201,182,0.7); --sp-rot: rotate(30deg);  animation-duration: 6.5s; animation-delay: 0.2s; }
.moments-sprinkles span:nth-child(2) { width: 0.6rem;  top: 20%;    right: 8%;   background: rgba(245,181,69,0.6);  --sp-rot: rotate(-40deg); animation-duration: 5.8s; animation-delay: 1.5s; }
.moments-sprinkles span:nth-child(3) { width: 0.9rem;  bottom: 25%; left: 10%;   background: rgba(115,209,197,0.6); --sp-rot: rotate(55deg);  animation-duration: 7.0s; animation-delay: 0.8s; }
.moments-sprinkles span:nth-child(4) { width: 0.7rem;  bottom: 18%; right: 6%;   background: rgba(255,255,255,0.35); --sp-rot: rotate(-20deg); animation-duration: 6.2s; animation-delay: 2.1s; }
.moments-sprinkles span:nth-child(5) { width: 0.55rem; top: 50%;    left: 3%;    background: rgba(232,139,139,0.5); --sp-rot: rotate(70deg);  animation-duration: 5.5s; animation-delay: 1.0s; }
.moments-sprinkles span:nth-child(6) { width: 0.65rem; top: 60%;    right: 4%;   background: rgba(247,214,160,0.5); --sp-rot: rotate(-55deg); animation-duration: 6.8s; animation-delay: 3.0s; }

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

/* ── Moment cards: corner sprinkle accent ──────────── */
.home-moment-card::after {
  content: '';
  position: absolute;
  top: 0.65rem;
  right: 0.85rem;
  width: 0.6rem;
  height: 0.18rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(38deg);
  pointer-events: none;
}

/* ── Marquee strip: sprinkle accents ───────────────── */
.home-marquee {
  position: relative;
  overflow: hidden;
}
.home-marquee::before {
  content: '';
  position: absolute;
  top: 0.45rem;
  right: 1.5rem;
  width: 0.85rem;
  height: 0.24rem;
  border-radius: 999px;
  background: #18a6a4;
  transform: rotate(32deg);
  opacity: 0.4;
}
.home-marquee::after {
  content: '';
  position: absolute;
  bottom: 0.45rem;
  left: 1.5rem;
  width: 0.7rem;
  height: 0.22rem;
  border-radius: 999px;
  background: #f5b545;
  transform: rotate(-28deg);
  opacity: 0.4;
}

/* ── Explore section: scattered dot field ──────────── */
.home-explore-section {
  position: relative;
}
.home-explore-section::before {
  content: '';
  position: absolute;
  top: 2rem;
  right: 2.5rem;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: #18a6a4;
  opacity: 0.22;
  pointer-events: none;
  box-shadow:
    -90px  50px 0 rgba(245,181,69,0.25),
     55px  90px 0 rgba(108,201,182,0.22),
   -170px 130px 0 rgba(232,139,139,0.2),
     85px 175px 0 rgba(245,181,69,0.18),
    -50px 220px 0 rgba(24,166,164,0.18),
    120px 260px 0 rgba(255,209,220,0.25),
   -130px 300px 0 rgba(245,181,69,0.15);
}

@media (prefers-reduced-motion: reduce) {
  .hero-sprinkles span { animation: none; opacity: 0.35; }
  .hero-sprinkles i    { animation: none; opacity: 0.3; }
  .hero-sprinkles b    { animation: none; opacity: 0.5; }
  .moments-sprinkles span { animation: none; opacity: 0.2; }
}

@media (max-width: 1023px) {
  .home-cake-badge {
    position: static;
    max-width: none;
    transform: none;
    margin-top: 0.75rem;
  }
}

@media (max-width: 767px) {
  .home-confetti-orb {
    width: 8rem;
  }
}

@media (max-width: 639px) {
  body {
    padding-bottom: 4.5rem;
  }

  .site-header {
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
  }

  .site-header::before,
  .site-header::after {
    display: none;
  }

  .site-header-logo-row {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    grid-template-columns: minmax(3.25rem, 1fr) auto minmax(3.25rem, 1fr);
    min-height: 5.05rem;
    padding: 0.28rem 0.6rem;
    gap: 0.5rem;
  }

  .site-menu-button {
    width: 2.9rem;
    min-width: 2.9rem;
    min-height: 2.9rem;
    padding: 0;
    gap: 0;
  }

  .site-menu-button-icon {
    width: 1.35rem;
    height: 1.35rem;
  }

  .site-menu-button-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .site-header-logo-row .site-home-title-logo {
    width: clamp(7.45rem, 38vw, 8.55rem);
    height: clamp(2.9rem, 14vw, 3.2rem);
  }

  .site-logo-mark {
    gap: 0.16rem;
  }

  .site-logo-est {
    font-size: 0.58rem;
    letter-spacing: 0.13em;
  }

  .site-social-stack {
    position: static;
    z-index: auto;
    gap: 0.24rem;
  }

  .site-social-link {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    min-height: 2rem;
    padding: 0;
    gap: 0;
    border-radius: 0.24rem;
  }

  .site-social-icon {
    width: 1.16rem;
    height: 1.16rem;
  }

  .site-social-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .dark-hero {
    min-height: calc(100svh - 4rem);
    padding: 4.25rem 1rem 3rem;
  }

  .hero-eyebrow {
    gap: 0.45rem;
    margin-bottom: 1.25rem;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-align: center;
  }

  .hero-eyebrow::before,
  .hero-eyebrow::after {
    width: 1.1rem;
  }

  .hero-heading {
    max-width: 21rem;
    font-size: clamp(2.15rem, 11vw, 3rem);
    line-height: 1.08;
  }

  .hero-subtext {
    max-width: 20rem;
    margin-top: 1.1rem;
    font-size: 0.98rem;
    line-height: 1.6;
  }

  .hero-ctas {
    width: min(100%, 20rem);
    margin-top: 1.75rem;
    gap: 0.75rem;
  }

  .btn-hero-primary,
  .btn-hero-secondary {
    width: 100%;
    justify-content: center;
    padding: 0.9rem 1.2rem;
  }

  .hero-features {
    margin-top: 3rem;
    gap: 1.25rem 1rem;
    padding-top: 1.75rem;
  }

  .home-hero-sprinkles span:nth-child(n + 9) {
    display: none;
  }

  /* On small screens hide the extra hero elements, keep original 16 */
  .hero-sprinkles span:nth-child(n + 17) { display: none; }
  .hero-sprinkles i,
  .hero-sprinkles b { display: none; }
  .moments-sprinkles span:nth-child(n + 4) { display: none; }
  .home-explore-section::before { display: none; }
}

@media (min-width: 768px) {
  .site-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .site-menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Design 4 homepage baseline */

.design4-hero {
  position: relative;
  display: grid;
  min-height: clamp(34rem, calc(100svh - 9rem), 44rem);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 44%, rgba(185, 225, 247, 0.42), transparent 42%),
    linear-gradient(115deg, #102f36 0%, #153e46 48%, #245a64 72%, #b9e1f7 100%);
}

.design4-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.design4-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  filter: saturate(1.03);
}

.design4-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 61% 48%, rgba(185, 225, 247, 0.08) 0%, rgba(12, 39, 46, 0.18) 31%, rgba(12, 39, 46, 0.44) 53%, rgba(12, 39, 46, 0.66) 100%),
    linear-gradient(90deg, rgba(12, 39, 46, 0.99) 0%, rgba(12, 39, 46, 0.94) 23%, rgba(12, 39, 46, 0.78) 38%, rgba(12, 39, 46, 0.42) 57%, rgba(12, 39, 46, 0.08) 100%),
    linear-gradient(180deg, rgba(12, 39, 46, 0.08), rgba(12, 39, 46, 0.24));
}

.design4-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 18%;
  background: linear-gradient(180deg, rgba(12, 39, 46, 0), rgba(12, 39, 46, 0.42));
  pointer-events: none;
}

.design4-hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(100%, 46rem);
  min-height: inherit;
  padding: clamp(4.5rem, 9vw, 7rem) clamp(1.5rem, 4vw, 4rem);
  color: #fff;
  transform: translateY(-1.25rem);
}

.design4-tag,
.design4-kicker,
.design4-card-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.design4-tag,
.design4-card-label {
  color: #bdeee8;
}

.design4-hero h1 {
  margin-top: 1.35rem;
  max-width: 42rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(3.4rem, 8vw, 7.15rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: 0;
}

.design4-hero h1 em {
  color: #8ee0da;
  font-style: italic;
}

.design4-lead {
  margin-top: 1.75rem;
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.08rem;
  line-height: 1.78;
}

.design4-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2rem;
}

.design4-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.35rem;
  padding: 1rem 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 0.25rem;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-transform: uppercase;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.design4-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.72);
}

.design4-btn-primary {
  border-color: #8ee0da;
  background: #8ee0da;
  color: #123e48;
}

.design4-btn-primary:hover {
  border-color: #a7eee9;
  background: #a7eee9;
}

.design4-action-link {
  display: inline-flex;
  align-items: center;
  min-height: 3.35rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: underline;
  text-decoration-color: rgba(142, 224, 218, 0.62);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.38rem;
  transition:
    color 160ms ease,
    text-decoration-color 160ms ease;
}

.design4-action-link:hover {
  color: #fff;
  text-decoration-color: #8ee0da;
}

.design4-order-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  width: min(100%, 44rem);
  margin-top: 2rem;
  border: 1px solid rgba(142, 224, 218, 0.36);
  background: rgba(142, 224, 218, 0.28);
}

.design4-order-facts div {
  min-width: 0;
  background: rgba(14, 55, 65, 0.58);
  padding: 1rem;
}

.design4-order-facts dt {
  color: #8ee0da;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.design4-order-facts dd {
  margin-top: 0.45rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.9rem;
  line-height: 1.45;
}

.design4-intro h2,
.design4-order-band h2,
.design4-card h3 {
  font-family: "Playfair Display", Georgia, serif;
  color: #123e48;
}

.design4-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.design4-kicker {
  color: #0f8b8d;
}

.design4-intro h2,
.design4-order-band h2 {
  margin-top: 0.75rem;
  max-width: 32rem;
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  line-height: 1.05;
}

.design4-intro p,
.design4-card p,
.design4-steps p {
  color: var(--brand-muted);
  line-height: 1.75;
}

.design4-intro > div > p:not(.design4-kicker) {
  margin-top: 1rem;
  max-width: 27rem;
}

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

.design4-card {
  min-width: 0;
  border: 1px solid rgba(15, 139, 141, 0.24);
  background: #fff;
  padding: 1.1rem;
  box-shadow: 0 18px 38px rgba(18, 67, 73, 0.08);
}

.design4-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 0.72;
  object-fit: cover;
  margin-bottom: 1.2rem;
  background: var(--brand-neutral-soft);
}

.design4-card h3 {
  margin-top: 0.55rem;
  font-size: 1.65rem;
  line-height: 1.08;
}

.design4-card p:not(.design4-card-label) {
  margin-top: 0.75rem;
  font-size: 0.94rem;
}

.design4-card a {
  display: inline-flex;
  margin-top: 1rem;
  color: #0f8b8d;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.design4-card a:hover {
  color: #0b6668;
}

.design4-order-band {
  display: grid;
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  margin-top: 4.5rem;
  border-top: 1px solid rgba(15, 139, 141, 0.22);
  border-bottom: 1px solid rgba(15, 139, 141, 0.22);
  padding: clamp(2rem, 4vw, 3rem) 0;
}

.design4-gallery {
  margin-top: 3.5rem;
  border-top: 1px solid rgba(15, 139, 141, 0.18);
  padding-top: 2.5rem;
}

.design4-gallery-heading {
  margin-bottom: 1.25rem;
}

.design4-gallery-heading h2 {
  margin-top: 0.75rem;
  max-width: 38rem;
  font-family: "Playfair Display", Georgia, serif;
  color: #123e48;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 1.05;
}

.design4-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.design4-gallery figure {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 139, 141, 0.18);
  background:
    linear-gradient(180deg, #fff, rgba(250, 255, 253, 0.96)),
    #fff;
  padding: 0.75rem;
  box-shadow: 0 18px 38px rgba(18, 67, 73, 0.07);
}

.design4-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background:
    linear-gradient(135deg, rgba(238, 247, 244, 0.82), rgba(255, 255, 255, 0.94)),
    #fff;
}

.design4-gallery figcaption {
  margin-top: 0.75rem;
  color: #123e48;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.design4-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
}

.design4-steps li {
  border-left: 2px solid #0f8b8d;
  background: rgba(250, 255, 253, 0.78);
  padding: 0.2rem 0 0.2rem 1rem;
}

.design4-steps span {
  display: block;
  color: #0f8b8d;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.design4-steps strong {
  display: block;
  margin-top: 0.55rem;
  color: var(--brand-ink);
}

.design4-steps p {
  margin-top: 0.45rem;
  font-size: 0.92rem;
}

.design4-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 3rem;
  border: 1px solid rgba(15, 139, 141, 0.24);
  background: rgba(15, 139, 141, 0.24);
}

.design4-links a {
  display: flex;
  flex-direction: column;
  min-height: 8rem;
  justify-content: flex-end;
  background: rgba(255, 255, 255, 0.9);
  padding: 1.25rem;
  color: #123e48;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.design4-links a:hover {
  background: #e7f6f3;
}

.design4-links span {
  margin-bottom: 0.55rem;
  color: #0f8b8d;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (max-width: 1023px) {
  .design4-hero {
    min-height: auto;
  }

  .design4-hero-content {
    width: min(100%, 42rem);
    min-height: 38rem;
    padding: 5rem 1.5rem 19rem;
    transform: translateY(-0.9rem);
  }

  .design4-intro,
  .design4-order-band {
    grid-template-columns: 1fr;
  }

  .design4-card-grid,
  .design4-steps {
    grid-template-columns: 1fr;
  }

  .design4-card {
    display: grid;
    grid-template-columns: minmax(8rem, 0.42fr) minmax(0, 0.58fr);
    column-gap: 1rem;
  }

  .design4-card img {
    grid-row: span 5;
    height: 100%;
    min-height: 12rem;
    margin-bottom: 0;
  }

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

  .design4-order-facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  .design4-hero {
    display: block;
    min-height: 0;
    background:
      radial-gradient(circle at 62% 16%, rgba(185, 225, 247, 0.32), transparent 42%),
      linear-gradient(145deg, #102f36 0%, #153e46 58%, #245a64 100%);
  }

  .design4-hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
  }

  .design4-hero-media img {
    object-fit: cover;
    object-position: 58% center;
    filter: saturate(1.03);
  }

  .design4-hero::before {
    z-index: -1;
    background:
      linear-gradient(180deg, rgba(12, 39, 46, 0.76), rgba(12, 39, 46, 0.9)),
      linear-gradient(90deg, rgba(12, 39, 46, 0.82), rgba(12, 39, 46, 0.44) 62%, rgba(12, 39, 46, 0.62));
  }

  .design4-hero::after {
    display: none;
  }

  .design4-hero-content {
    position: relative;
    z-index: 1;
    min-height: 0;
    padding: 2.75rem 1rem 1.35rem;
    transform: none;
  }

  .design4-hero h1 {
    margin-top: 1rem;
    font-size: clamp(2.7rem, 15vw, 3.8rem);
  }

  .design4-lead {
    margin-top: 1.2rem;
    font-size: 1rem;
    line-height: 1.65;
  }

  .design4-actions {
    margin-top: 1.5rem;
  }

  .design4-actions,
  .design4-btn {
    width: 100%;
  }

  .design4-action-link {
    justify-content: center;
    min-height: auto;
    width: 100%;
  }

  .design4-order-facts {
    margin-top: 1.35rem;
  }

  .design4-order-facts div {
    padding: 0.85rem;
  }

  .design4-card {
    display: block;
    padding: 1rem;
  }

  .design4-card img {
    display: block;
    width: 100%;
    height: auto;
    grid-row: auto;
    aspect-ratio: 1 / 0.72;
    min-height: 0;
    margin-bottom: 1rem;
  }

  .design4-card h3 {
    font-size: 1.45rem;
    line-height: 1.15;
  }

  .design4-card p:not(.design4-card-label) {
    font-size: 0.92rem;
    line-height: 1.55;
  }

  .design4-card a {
    line-height: 1.35;
  }

  .design4-order-band {
    margin-top: 2.75rem;
    padding: 2rem 0;
    clear: both;
  }

  .design4-gallery {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
  }

  .design4-gallery-grid {
    grid-template-columns: 1fr;
  }

  .design4-gallery figure {
    padding: 0.65rem;
  }

  .design4-intro h2,
  .design4-order-band h2,
  .design4-gallery-heading h2 {
    font-size: clamp(2rem, 11vw, 2.65rem);
    line-height: 1.08;
  }

  .design4-steps li {
    padding: 0.85rem 0 0.85rem 1rem;
  }

  .design4-steps strong,
  .design4-steps p {
    line-height: 1.45;
  }

  .design4-links {
    gap: 0.75rem;
    grid-template-columns: 1fr;
    border: 0;
    background: transparent;
  }

  .design4-links a {
    min-height: 0;
    padding: 1rem;
    font-size: 1.18rem;
    line-height: 1.22;
    overflow-wrap: anywhere;
  }

  .design4-links span {
    line-height: 1.25;
  }

  footer section,
  footer li {
    min-width: 0;
  }

  footer h2,
  footer li,
  footer p,
  footer a {
    overflow-wrap: anywhere;
  }

  footer h2 {
    line-height: 1.35;
  }
}