/* =========================================================
   Glayze Café — Bakes
   Shell from the "WHITE" template, re-skinned onto Glayze
   typography and gold, kept on the template's dark espresso
   base so this reads as the moodiest page in the set.
   ========================================================= */:root {
  /* Glayze palette (matches homepage / coffee / workspace) */
  --cream:      #FAF7F2;
  --cream-dark: #F0E8DC;
  --tan:        #d4c5b3;
  --choc:       #2d2d2d;
  --choc-deep:  #1C0F06;
  --choc-mid:   #2A1608;
  --gold:       #C8922A;
  --gold-light: #E8C97A;
  --gold-glow:  rgba(200, 146, 42, 0.22);
  --text:       #2A1608;
  --text-muted: #7A5C45;

  /* dark-page equivalents — this page runs on espresso, not cream */
  --ink:        #140B04;
  --ink-soft:   #1F1208;
  --line:       rgba(250, 247, 242, 0.12);
  --body-dim:   rgba(250, 247, 242, 0.62);

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-card: 16px;
  --radius-pill: 100px;
  --radius-btn:  2px;
  --transition:  300ms ease;
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.5);

  /* The transplanted preview sections reference these two names, which
     were never declared here. An unresolved var() makes the whole
     declaration invalid-at-computed-value-time, so `transition: color
     var(--transition-base)` on .filter-tab, .product-card, the form
     fields and .form-submit was resolving to no transition at all. */
  --transition-base:     300ms ease;
  --shadow-card-hover:   0 16px 48px rgba(0, 0, 0, 0.5);
}*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }/* No `scroll-behavior: smooth` — it fights Lenis. */body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}img { display: block; max-width: 100%; height: auto; }a { color: inherit; text-decoration: none; }ul { list-style: none; }button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }::-webkit-scrollbar { width: 6px; }::-webkit-scrollbar-track { background: var(--ink-soft); }::-webkit-scrollbar-thumb { background: rgba(200,146,42,0.4); border-radius: 3px; }::selection { background: var(--gold); color: var(--ink); }/* ---------------- shared utilities ---------------- */.container {
  width: 100%;
  max-width: 1650px;
  margin: 0 auto;
  padding: 0 40px;
}section { padding-block: 200px; position: relative; overflow: hidden; }/* =========================================================
   SHELL — grain, cursor
   ========================================================= *//* loader — moved to shared/glayze.css (see shared/glayze.js) */.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 500;
  pointer-events: none;
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation: grainShift 6s steps(6) infinite;
}@keyframes grainShift {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2%, 1%); }
  40% { transform: translate(1%, -2%); }
  60% { transform: translate(-1%, 2%); }
  80% { transform: translate(2%, -1%); }
}/* CURSOR — moved to shared/glayze.css, which handles the touch and
   reduced-motion cases itself (an empty media query lived here) *//* NAV — moved to shared/glayze.css (see shared/glayze.js) *//* =========================================================
   HERO
   ========================================================= */#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: 0;
  background: var(--ink);
}/* the enormous word sitting behind everything */.hero-bg-word {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(18vw, 22vw, 28vw);
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  color: rgba(200, 146, 42, 0.07);
  letter-spacing: -0.03em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1650px;
  margin: 0 auto;
  padding: 150px 40px 70px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 70px;
  align-items: center;
}.hero-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 30px;
  display: block;
}.hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: 32px;
}/* masked line-by-line reveal */.title-line-wrap { display: block; overflow: hidden; }.title-line { display: block; line-height: 0.98; }.title-line.italic { font-style: italic; color: var(--gold); }/* Hidden only until the reveal has run. `hero-shown` is set by the
   standalone hero IIFE — on completion, or by its 3.5s backstop — so
   the headline can never be left clipped by a fault elsewhere. Gated on
   `gz-arm`, which the reveal script adds on the line before it animates,
   so a script that never gets there leaves the words on the page. */html.gz-arm:not(.hero-shown) .title-line { transform: translateY(110%); opacity: 0; }html.gz-arm.hero-shown .title-line { transform: none; opacity: 1; }.hero-desc {
  font-size: clamp(16px, 2vw, 22px);
  color: var(--body-dim);
  max-width: 46ch;
  margin-bottom: 40px;
}.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }.hero-image-wrap {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
}.hero-image {
      border-radius: 20px;
    overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}.hero-cake-badge {
  position: absolute;
  left: -26px;
  bottom: 34px;
  background: var(--gold);
  color: var(--ink);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: var(--radius-btn);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}.scroll-indicator {
  position: absolute;
  left: 40px; bottom: 34px;
  z-index: 3;
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.5);
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  gap: 14px;
}.scroll-indicator::after {
  content: "";
  width: 1px; height: 70px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollPulse 2.4s ease-in-out infinite;
  transform-origin: top center;
}@keyframes scrollPulse {
  0%, 100% { transform: scaleY(0.35); opacity: 0.45; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

.formFoot .gzE-btn:hover{
  color: #fff;
 }
/* =========================================================
   MARQUEE
   ========================================================= */.marquee-wrap {
  overflow: hidden;
  background: var(--gold);
  color: var(--ink);
  padding: 18px 0;
  position: relative;
  z-index: 4;
}.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}.marquee-item {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}.marquee-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink); flex-shrink: 0; }@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}/* =========================================================
   ABOUT
   ========================================================= */.section-about { background: var(--ink-soft); }.about-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 90px;
  align-items: center;
}.about-headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin-bottom: 28px;
}.about-headline em { font-style: italic; color: var(--gold); }.about-body {
  font-size: clamp(16px, 2vw, 22px);
  color: var(--body-dim);
  max-width: 50ch;
}.about-image-wrap {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}.about-image { border-radius: 20px !important; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }/* =========================================================
   PULL QUOTE
   ========================================================= */.section-philosophy {
  background: var(--choc-deep);
  text-align: center;
}.philosophy-inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; }.philosophy-quote {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 5.5rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin-bottom: 34px;
}.philosophy-source {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}/* FOOTER — moved to shared/glayze.css (see shared/glayze.js) *//* =========================================================
   REVEAL ARCHITECTURE (shared with the other Glayze pages)
   ========================================================= */.slideRight {
  will-change: transform, opacity, letter-spacing;
  transition: transform 1.2s cubic-bezier(0.18, 0.89, 0.32, 1.28),
              opacity 1s ease,
              letter-spacing 1s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}.has-anim .slideRight {
  opacity: 0;
  letter-spacing: 35px;
  transform: rotate3d(1, 0, 0.1, 50deg);
}.has-anim section.active .slideRight {
  opacity: 1;
  letter-spacing: 1px;
  transform: rotate3d(1, 0, 1, 0deg);
}/* 35px of tracking on a 38px headline is several viewports wide on a
   phone. The other pages already carry this guard; this one didn't. */@media (max-width: 992px) {
  .has-anim .slideRight { letter-spacing: 0; }
}.showUp { transition: 1s cubic-bezier(0, 0, 0.07, 0.98); will-change: transform; }.has-anim .showUp { transform: scale(0.8) translate(-6px, 110%); opacity: 0; }.has-anim section.active .showUp { transform: scale(1) translate(0, 0); opacity: 1; }.rotateAnim { transition: 1s cubic-bezier(0, 0, 0.07, 0.98); will-change: transform; }.has-anim .rotateAnim { transform: scale(1.2) translate(-6px, 110%) rotate(5deg); opacity: 0; }.has-anim section.active .rotateAnim { transform: scale(1) translate(0, 0) rotate(0); opacity: 1; }.has-anim .showUp:nth-of-type(2) { transition-delay: 0.12s; }.has-anim .showUp:nth-of-type(3) { transition-delay: 0.24s; }.has-anim .showUp:nth-of-type(4) { transition-delay: 0.36s; }.has-anim .showUp:nth-of-type(5) { transition-delay: 0.48s; }.has-anim .showUp:nth-of-type(6) { transition-delay: 0.60s; }.has-anim [data-reveal] { opacity: 0; transform: translateY(26px); will-change: transform, opacity; }/* oversized gold italic locality tag */.floatDuck {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(48px, 6vw, 100px);
  color: var(--gold);
  position: absolute;
  pointer-events: none;
  transition: 1s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: 1.2s;
  will-change: transform, opacity;
}.has-anim .floatDuck { transform: scale(1.5) translate(-100px, 110%) rotate(50deg); opacity: 0; }.has-anim section.active .floatDuck { transform: scale(1) translate(0, 0) rotate(-12.15deg); opacity: 1; }/* decorative line-art */.bean { position: absolute; pointer-events: none; z-index: 0; opacity: 0.18; }/* =========================================================
   RESPONSIVE
   ========================================================= */@media (max-width: 1100px) {
  .hero-content { grid-template-columns: 1fr; gap: 44px; padding-top: 130px; }
  .about-inner { grid-template-columns: 1fr; gap: 44px; }
  .hero-image { aspect-ratio: 16 / 10; }
}@media (max-width: 992px) {
  section { padding-block: 50px; }
  .container, .hero-content { padding-left: 24px; padding-right: 24px; }
  .scroll-indicator { display: none; }
}@media (prefers-reduced-motion: reduce) {
  .grain, .marquee-track, .scroll-indicator::after { animation: none !important; }
  .slideRight, .showUp, .rotateAnim, .floatDuck, .title-line {
    opacity: 1 !important; transform: none !important;
    letter-spacing: normal !important; transition: none !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}/* =========================================================
   TRANSPLANTED SECTIONS from glayze-cafe-cakes-preview
   Rules lifted verbatim, then colour-mapped from the
   preview's cream skin onto this page's espresso skin.
   ========================================================= */#collection {
  background: var(--ink);
  padding: 120px 48px;
}.collection-header {
  max-width: 1200px; margin: 0 auto 56px;
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 24px;
}.filter-bar {
  max-width: 1200px; margin: 0 auto 56px;
  position: sticky; top: 72px; z-index: 10;
  background: var(--tan);
  padding: 0 0 0;
  border-bottom: 0px solid rgba(250, 247, 242, 0.14);
  display: flex; align-items: center; gap: 0;
}.filter-tab {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 16px 24px;
  cursor: pointer;
  color: var(--body-dim);
  border: none; background: none;
  position: relative;
  transition: color var(--transition-base);
  white-space: nowrap;
}.filter-tab::after {
  content: "";
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 300ms ease;
}.filter-tab.active {
  color: var(--gold);
}.filter-tab.active::after {
  transform: scaleX(1);
}.filter-tab:hover {
  color: var(--cream);
}.product-card {
  background: var(--ink-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base);
  position: relative;
  /* No `cursor: pointer`: the tile itself is a div with no click handler,
     only the Enquire button inside it is interactive. It also broke the
     custom cursor — html.gz-cursor hides the system pointer on body, and
     an explicit cursor here brought it back over all sixteen tiles, so
     two cursors showed at once. */
}.product-card:hover {
  box-shadow: var(--shadow-card-hover);
}.card-img-wrap {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}.card-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}.product-card:hover .card-img-wrap img {
  transform: scale(1.06);
}.card-body {
  padding: 20px 22px 22px;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}.card-category {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}.card-name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: 4px;
}.card-desc {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  color: var(--body-dim);
  line-height: 1.5;
  margin-bottom: 16px;
}.price-toggle {
  display: inline-flex;
  border: 1px solid rgba(250, 247, 242, 0.14);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 14px;
  position: relative;
}.price-toggle-opt {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  cursor: pointer;
  border: none; background: none;
  color: var(--body-dim);
  transition: color 200ms ease, background 200ms ease;
  position: relative; z-index: 1;
}.price-toggle-opt.active {
  background: var(--gold);
  color: var(--ink);
  border-radius: 20px;
}.card-price {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--cream);
  margin-bottom: 14px;
}.card-price span {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--body-dim);
}.card-enquire {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 22px;
  background: var(--choc);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: space-between;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 250ms ease, opacity 250ms ease;
  cursor: pointer;
  border: none;
}.card-enquire span {
  color: var(--gold);
}.product-card:hover .card-enquire {
  transform: translateY(0);
  opacity: 1;
}#pricing {
  background: var(--ink-soft);
  padding: 120px 48px;
}.pricing-inner {
  max-width: 900px; margin: 0 auto;
}.pricing-header {
  text-align: center; margin-bottom: 72px;
}.pricing-section-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--body-dim);
  padding: 20px 0 14px;
  border-bottom: 1px solid rgba(250, 247, 242, 0.14);
  margin-top: 48px;
  margin-bottom: 0;
}.pricing-section-title:first-of-type {
  margin-top: 0;
}#cta-banner {
  background: var(--choc-deep);
  padding: 120px 48px;
  text-align: center;
  position: relative; /* NOT hidden — .cta-banner-inner uses .gzE-pull to overlap the
     section above, and an overflow:hidden ancestor would clip it. See the
     later #cta-banner block, which sets overflow:visible. */
}.cta-banner-inner {
  position: relative; z-index: 1;
}.cta-banner-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 300;
  color: var(--cream);
  line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}.cta-banner-title em {
  font-style: italic; color: var(--gold-light);
}.cta-banner-sub {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: rgba(250,247,242,0.55);
  margin-bottom: 48px;
  max-width: 480px; margin-left: auto; margin-right: auto;
}.cta-banner-btns {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}#contact {
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: 600px;
}.contact-left {
  background: var(--ink-soft);
  padding: 80px 64px;
  display: flex; flex-direction: column; justify-content: center;
}/* (.contact-heading removed — the section opens on .contactTitle now.) */.contact-info-item {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 20px;
}.contact-info-icon {
  font-size: 16px; margin-top: 3px; color: var(--gold);
}.contact-info-label {
  font-family: var(--font-body); font-size: 10px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(250,247,242,0.45); margin-bottom: 4px;
}.contact-info-value {
  font-family: var(--font-body); font-size: 14px; font-weight: 300;
  color: rgba(250,247,242,0.85);
}.contact-right {
  background: var(--ink);
  padding: 80px 72px;
  display: flex; flex-direction: column; justify-content: center;
}.contact-form-title {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 400;
  color: var(--cream); margin-bottom: 36px;
}.form-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; margin-bottom: 20px;
}.form-group {
  margin-bottom: 20px;
}.form-group label {
  display: block;
  font-family: var(--font-body); font-size: 10px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--body-dim); margin-bottom: 8px;
}.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 13px 16px;
  background: var(--ink-soft);
  border: 1px solid rgba(250, 247, 242, 0.14);
  border-radius: 2px;
  font-family: var(--font-body); font-size: 14px; font-weight: 300;
  color: var(--cream);
  /* outline intentionally left alone — :focus-visible in
     shared/glayze.css draws the keyboard ring */
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  appearance: none;
}.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(200,146,42,0.15);
}.form-group textarea {
  resize: vertical; min-height: 120px;
}.form-submit {
  width: 100%;
  padding: 16px;
  background: var(--gold);
  color: var(--cream);
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  border: none; cursor: pointer; border-radius: 2px;
  transition: background var(--transition-base);
}.form-submit:hover {
  background: #b07820;
}@media (max-width: 968px) {
  /* #hero is display:flex and .hero-content is the grid, so this
     grid-template-columns never applied; .hero-content's own
     `grid-template-columns: 1fr` at 1100px already handles the stack. */
  #hero {
    height: auto; min-height: 100svh;
  }

  /* .hero-left carried a full 140px/120px of its own top padding on top of
     .hero-content's 130px, so the H1 sat ~260px down an otherwise empty
     screen on every phone. .hero-content owns the gutter and the clearance
     for the fixed header; the column inside it owns neither. */
  .hero-left {
    padding: 0;
  }

  .hero-right {
    display: none;
  }

  #contact {
    grid-template-columns: 1fr;
  }

  #spotlight {
    overflow: hidden;
  }

  #spotlight-track {
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }

  .spotlight-card {
    scroll-snap-align: start; flex-shrink: 0;
  }

}@media (max-width: 768px) {
  /* `.product-grid { grid-template-columns: 1fr }` used to live here, from
     before the bento. The bento sets its own columns at 6 / 4 / 2, and the
     2-col rule starts at 760px — so between 761 and 768 this single
     explicit track met tiles asking for `grid-column: span 4`, grid opened
     three implicit auto columns to satisfy them, and the row ran wider than
     the container (silently clipped by body's overflow-x). The bento owns
     the column count at every width now. */

  #explorer, #collection, #pricing, #marquee {
    padding: 80px 24px;
  }

  #trust {
    padding: 40px 24px;
  }

  .filter-bar {
    overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; justify-content: flex-start; scrollbar-width: none;
  }

  .filter-bar::-webkit-scrollbar {
    display: none;
  }

  .filter-tab {
    flex-shrink: 0;
  }

  .pricing-table {
    font-size: 14px;
  }

  .pricing-table td, .pricing-table th {
    padding: 12px 8px;
  }

}@media (max-width: 480px) {
  .hero-title {
    font-size: 40px;
  }

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

  .cta-banner-title {
    font-size: 36px;
  }

  .product-grid {
    padding: 0 16px;
  }

}@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  .fade-up {
    opacity: 1 !important; transform: none !important;
  }

}/* =========================================================
   EDITORIAL PASS — asymmetry, hierarchy, varied interaction
   Fixes items 22-28 from UI-CRITIQUE-AND-FIXES.md
   ========================================================= *//* (The three-feature + list-row experiment that lived here has been
   removed — the bento grid below supersedes it. Its
   :nth-child(n+4) rules were hiding 13 card images via
   `display:none` and collapsing .card-body with `display:contents`,
   which is what broke this section.) *//* the closing quote mark, oversized, behind the pull-quote */.section-philosophy .philosophy-inner { position: relative; text-align: left; }.section-philosophy .philosophy-inner::before {
  content: "“";
  position: absolute;
  left: -0.12em;
  top: -0.42em;
  font-family: var(--font-display);
  font-size: 400px;
  line-height: 1;
  color: rgba(200, 146, 42, 0.08);
  pointer-events: none;
  z-index: -1;
}.section-philosophy { text-align: left; }.philosophy-quote { max-width: 22ch; }.product-card:hover { transform: none; box-shadow: none; }/* wrapper only — declared so no class in the markup is unstyled */.about-text { position: relative; }/* pricing opens with one oversized figure instead of an eyebrow */.bigNumeral {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(80px, 12vw, 180px);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: rgba(200, 146, 42, 0.22);
  margin-bottom: -0.2em;
}.pricing-kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2vw, 26px);
  color: var(--body-dim);
  margin-top: 14px;
}@media (max-width: 1100px) {
  .bigNumeral { font-size: 84px; }
}/* =========================================================
   THE COUNTER — site-wide live status strip
   One component, different data per page. Reads the real clock
   so it reflects opening hours (09:00–23:00) and bake times.
   ========================================================= */.theCounter {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 300;
  display: none !important;
  align-items: center;
  gap: 0;
  padding: 0 clamp(16px, 3vw, 40px);
  height: 42px;
  background: rgba(20, 11, 4, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(200, 146, 42, 0.28);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.72);
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}.theCounter.is-in { transform: translateY(0); }.counterItem {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding-right: 26px;
  margin-right: 26px;
  border-right: 1px solid rgba(250, 247, 242, 0.14);
}.counterItem:last-child { border-right: none; margin-right: 0; padding-right: 0; }.counterItem b { color: var(--gold-light); font-weight: 500; }/* the live pip */.counterPip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: counterPulse 2.4s ease-out infinite;
  flex-shrink: 0;
}.counterPip.closed { background: #E06B4A; animation: none; }@keyframes counterPulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}/* keep the strip from covering the last line of the footer */body { padding-bottom: 42px; }@media (max-width: 900px) {
  .theCounter { gap: 0; font-size: 9.5px; letter-spacing: 0.14em; }
  .counterItem { padding-right: 16px; margin-right: 16px; }
  .counterItem.optional { display: none; }
}@media (prefers-reduced-motion: reduce) {
  .theCounter { transform: none; transition: none; }
  .counterPip { animation: none; }
}/* =========================================================
   THE STANDARD — replaces the three grey trust tiles
   A compact credential ledger: rotated section label on the
   left edge, three unequal columns stepping down to the right,
   each with a plate label and a rule that draws on hover.
   ========================================================= */#trust {
  background: var(--ink-soft);          /* was var(--choc) — the grey clashed */
  padding-block: clamp(70px, 9vh, 130px);
  border-block: 1px solid var(--line);
}.standardBand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(26px, 4vw, 80px);
  align-items: start;
}/* deliberately unequal columns, not three identical tiles */.standardList {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.25fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}.standardItem {
  position: relative;
  padding: 0 clamp(20px, 3vw, 54px);
  border-left: 1px solid var(--line);
}.standardItem:first-child { padding-left: 0; border-left: none; }.standardItem:last-child  { padding-right: 0; }/* each column sits a little lower than the last */.standardItem:nth-child(2) { padding-top: 26px; }.standardItem:nth-child(3) { padding-top: 52px; }/* the rule that draws itself across on hover */.standardItem::after {
  content: "";
  position: absolute;
  left: clamp(20px, 3vw, 54px);
  right: clamp(20px, 3vw, 54px);
  bottom: -18px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}.standardItem:first-child::after { left: 0; }.standardItem:last-child::after  { right: 0; }.standardItem:hover::after { transform: scaleX(1); }/* sentence case, not the shouty all-caps serif that was there */.standardTitle {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(23px, 2.3vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--cream);
  margin: 0 0 12px;
}.standardDesc {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--body-dim);
  margin: 0;
  max-width: 34ch;
}/* phone number draws its own underline */.standardTel {
  color: var(--gold);
  position: relative;
  white-space: nowrap;
}.standardTel::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}.standardTel:hover { color: var(--gold-light); }.standardTel:hover::after { transform: scaleX(1); }@media (max-width: 992px) {
  #trust { padding-block: 60px; }
  .standardBand { grid-template-columns: 1fr; gap: 26px; }
  .standardList { grid-template-columns: 1fr; gap: 34px; }
  .standardItem,
  .standardItem:nth-child(2),
  .standardItem:nth-child(3) {
    padding: 0 0 0 20px;
    border-left: 1px solid var(--line);
  }
  .standardItem::after { display: none; }
  .standardDesc { max-width: none; }
}@media (prefers-reduced-motion: reduce) {
  .standardItem::after, .standardTel::after { transition: none; }
}/* =========================================================
   OUR COLLECTION — BENTO GRID
   Asymmetric modular tiles instead of 16 identical cards.
   Sizes are set per card (b-hero / b-wide / b-tall / b-sm)
   so no two rows read the same. Glowing hairline borders on
   the espresso ground, in the Linear/Vercel dark-bento idiom.
   ========================================================= */#collection { background: var(--ink); padding-block: clamp(90px, 12vh, 170px); }.collection-header { max-width: 1650px; margin: 0 auto clamp(40px, 6vh, 80px); padding: 0 40px; }/* the filter bar: pills on the dark ground, no light panel */.filter-bar {
  position: static;
  max-width: 1650px;
  margin: 0 auto clamp(34px, 5vh, 60px);
  padding: 0 40px;
  background: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  justify-content: flex-start;
}.filter-tab {
  padding: 11px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--body-dim);
  transition: color 300ms ease, border-color 300ms ease, background 300ms ease;
}.filter-tab:hover { color: var(--gold-light); border-color: rgba(200,146,42,0.5); }.filter-tab.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}/* ---- the bento grid itself ---- */.product-grid {
  display: grid;
  max-width: 1650px;
  margin: 0 auto;
  padding: 0 40px;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 190px;
  gap: 16px;
  align-items: stretch;
}/* tile sizes live in the "responsive re-tiling" block further down — the
   solved set that covers all six tiles at all three column counts. This
   is where a superseded four-tile draft used to sit. *//* every tile: photo behind, copy over it, hairline that glows on hover */.product-card {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--ink-soft);
  padding: 0;
  margin: 0;
  box-shadow: none;
  transition: border-color 420ms ease, box-shadow 420ms ease, transform 420ms ease;
}.product-card:hover {
  border-color: rgba(200, 146, 42, 0.55);
  box-shadow: 0 0 0 1px rgba(200,146,42,0.18), 0 24px 60px rgba(0,0,0,0.5);
  transform: none;
}.product-card .card-img-wrap {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: hidden;
  margin: 0;
}.product-card .card-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}.product-card:hover .card-img-wrap img { transform: scale(1.06); }/* legible scrim, heavier at the foot where the type sits */.product-card .card-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(12,7,2,0.94) 0%, rgba(12,7,2,0.62) 34%, rgba(12,7,2,0.12) 68%, rgba(12,7,2,0.30) 100%);
}.product-card .card-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: clamp(18px, 2vw, 30px);
  gap: 0;
  background: none;
}.product-card .card-category {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
}.product-card .card-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(19px, 1.6vw, 26px);
  line-height: 1.1;
  color: var(--cream);
  margin: 0;
  transform: none;
}/* only the big tiles carry a description — small ones would crowd */.product-card .card-desc { display: none; }.product-card.b-hero .card-desc,
.product-card.b-tall .card-desc {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(250,247,242,0.68);
  margin: 10px 0 0;
  max-width: 34ch;
}.product-card.b-hero .card-name { font-size: clamp(26px, 2.6vw, 42px); }/* price sits top-right as a gold chip */.product-card .card-price {
  position: absolute;
  top: clamp(14px, 1.6vw, 22px);
  right: clamp(14px, 1.6vw, 22px);
  z-index: 3;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--gold);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}.product-card .card-price span { font-size: 10px; margin-left: 3px; }/* slice / full toggle, only where it exists */.product-card .price-toggle {
  position: absolute;
  left: clamp(14px, 1.6vw, 22px);
  top: clamp(14px, 1.6vw, 22px);
  z-index: 3;
  display: flex;
  gap: 4px;
  margin: 0;
  background: rgba(12,7,2,0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  padding: 3px;
}.price-toggle-opt {
  padding: 5px 12px;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250,247,242,0.6);
  transition: background 300ms ease, color 300ms ease;
}.price-toggle-opt.active { background: var(--gold); color: var(--ink); }/* enquire becomes a hairline link at the foot, not a grey bar */.card-enquire {
  position: static;
  inset: auto;
  z-index: 3;
  align-self: flex-start;
  margin-top: 14px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 380ms ease, transform 380ms ease;
}.product-card:hover .card-enquire { opacity: 1; transform: translateY(0); }.product-card.b-sm .card-enquire { display: none; }/* the 4-column re-tiling is at max-width:1200px further down. A second
   copy used to sit here at 1100px with a fixed 170px row height, which
   overrode the fluid clamp for every width below 1100. */@media (max-width: 700px) {
  /* the 2-column re-tiling is at max-width:760px further down */
  .filter-bar, .collection-header { padding: 0 24px; }
  .product-card.b-tall .card-desc { display: none; }
}@media (prefers-reduced-motion: reduce) {
  .product-card, .product-card .card-img-wrap img, .card-enquire { transition: none; }
  .card-enquire { opacity: 1; transform: none; }
}/* =========================================================
   SPOTLIGHT — pinned horizontal scroll
   The section pins and continued vertical scrolling drives the
   row sideways; it releases to normal scroll at the end.
   ========================================================= */#spotlight {
  background: var(--choc-deep);
  padding: 0;
  height: auto;
  /* NOT overflow:hidden — the horizontal rail below is position:sticky and
     an ancestor with overflow:hidden silently kills sticky. See the second
     #spotlight block further down, which sets overflow:visible. */
}.spotlightHead {
  flex-shrink: 0;
  max-width: 1650px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
}.spotlightHint {
  position: absolute;
  right: 40px;
  bottom: 4px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(250,247,242,0.34);
}/* the row itself — JS translates this on scroll */.spotlight-track {
  display: flex;
  gap: clamp(14px, 1.6vw, 26px);
  padding-inline: 40px;
  width: max-content;
  will-change: transform;
  cursor: default;
}.spotlight-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(240px, 24vw, 380px);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink-soft);
  transition: border-color 420ms ease, box-shadow 420ms ease;
}.spotlight-card:hover {
  border-color: rgba(200,146,42,0.5);
  box-shadow: 0 0 0 1px rgba(200,146,42,0.16), 0 24px 60px rgba(0,0,0,0.5);
}/* every third card is taller — breaks the even rhythm */.spotlight-card:nth-child(3n) { align-self: flex-start; }.spotlight-card:nth-child(3n/**/+2) { align-self: flex-end; }.spotlight-index {
  position: absolute;
  top: 14px; left: 16px;
  z-index: 3;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}.spotlight-card-img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}.spotlight-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}.spotlight-card:hover .spotlight-card-img img { transform: scale(1.05); }.spotlight-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12,7,2,0.8) 0%, rgba(12,7,2,0.1) 46%, rgba(12,7,2,0.28) 100%);
}.spotlight-card-info {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(16px, 1.8vw, 24px);
}.spotlight-card-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(18px, 1.5vw, 25px);
  line-height: 1.12;
  color: var(--cream);
  margin: 0 0 4px;
}.spotlight-card-price {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--gold-light);
  margin: 0;
}/* progress rail under the row */.spotlightProgress {
  flex-shrink: 0;
  height: 1px;
  max-width: 1650px;
  width: calc(100% - 80px);
  margin: 0 auto;
  background: var(--line);
  position: relative;
}.spotlightProgress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--gold);
  transition: width 120ms linear;
}@media (max-width: 992px) {
  /* no pinning on touch — let it be a normal swipeable row */
  .spotlight-track { overflow-x: auto; width: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .spotlight-card { scroll-snap-align: start; width: 72vw; align-self: auto !important; }
  .spotlightHint, .spotlightProgress { display: none; }
  .spotlight-track { padding-inline: 24px; }
  .spotlightHead { padding: 0 24px; }
}@media (prefers-reduced-motion: reduce) {
  .spotlight-track { overflow-x: auto; width: auto; transform: none !important; }
}/* =========================================================
   EXPLORE THE LAYERS — auto-rotating showcase
   Chips sit on the image rather than beside it. The stage
   advances on a loop, pauses on hover, and a click jumps
   straight to that cake and restarts the timer.
   ========================================================= */#explorer { background: var(--ink); padding-block: clamp(90px, 12vh, 170px); }.explorerHead { text-align: center; margin-bottom: clamp(34px, 5vh, 64px); }.layerStage { max-width: 1450px; margin: 0 auto; }.layerFrame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-soft);
}/* stacked slides, cross-fading with a slow drift */.layerSlide {
  overflow: hidden;
  border-radius: 20px !important;
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1);
}.layerSlide.is-active { opacity: 1; }.layerSlide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 7000ms linear;
}.layerSlide.is-active img { transform: scale(1.08); }.layerScrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(12,7,2,0.92) 0%, rgba(12,7,2,0.42) 34%, rgba(12,7,2,0.04) 62%, rgba(12,7,2,0.24) 100%);
}/* caption sits above the chips */.layerCaptions {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  right: clamp(20px, 3vw, 46px);
  bottom: clamp(96px, 12vh, 130px);
  z-index: 3;
  min-height: 2.6em;
}.layerCaption {
  position: absolute;
  inset: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.8vw, 27px);
  font-weight: 300;
  line-height: 1.35;
  color: var(--cream);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22,0.61,0.36,1);
}.layerCaption.is-active { opacity: 1; transform: none; }.layerCaption b { font-weight: 400; color: var(--gold-light); }/* the chips, on the image */.layerChips {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  right: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vh, 40px);
  z-index: 4;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: clamp(6px, 0.8vw, 14px);
}.layerChip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 380ms ease;
}.layerChip:hover, .layerChip.is-active { opacity: 1; }/* the bar doubles as the progress indicator for the active chip */.layerChipBar {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: rgba(250, 247, 242, 0.26);
  overflow: hidden;
}.layerChipBar::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}/* the active chip's bar fills over the dwell time */.layerChip.is-active .layerChipBar::after {
  animation: chipFill var(--dwell, 5s) linear forwards;
}@keyframes chipFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }/* hovering the stage pauses the fill and the timer */.layerStage.is-paused .layerChip.is-active .layerChipBar::after { animation-play-state: paused; }.layerChipName {
  font-family: var(--font-body);
  font-size: clamp(9.5px, 0.85vw, 12px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.3;
}.layerChip.is-active .layerChipName { color: var(--gold-light); }@media (max-width: 992px) {
  .layerFrame { aspect-ratio: 4 / 5; border-radius: 16px; }
  .layerChips { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .layerCaptions { bottom: clamp(140px, 22vh, 200px); }
  .layerCaption { font-size: 16px; }
}@media (prefers-reduced-motion: reduce) {
  .layerSlide, .layerCaption { transition: none; }
  .layerSlide img { transition: none; transform: none; }
  .layerChip.is-active .layerChipBar::after { animation: none; transform: scaleX(1); }
}/* =========================================================
   PLACE YOUR ORDER — rebuilt for the dark skin
   The panel was var(--choc) neutral grey with the form controls
   inheriting the preview's light styling. Now a two-column band
   on espresso with hairline-underline inputs.
   ========================================================= */#contact {
  background: var(--ink);
  padding-block: clamp(90px, 12vh, 170px);
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 0;
  align-items: stretch;
  max-width: 1650px;
  margin: 0 auto;
  padding-inline: 40px;
}.contact-left {
  background: none;
  padding: 0 clamp(30px, 4vw, 70px) 0 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vh, 40px);
}.contact-info-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 16px;
  align-items: start;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}.contact-info-item:last-child { border-bottom: none; padding-bottom: 0; }/* replace the emoji glyphs with a gold rule marker */.contact-info-icon {
  font-size: 0;
  width: 22px; height: 1px;
  background: var(--gold);
  margin-top: 12px;
  color: transparent;
}.contact-info-label {
  grid-column: 2;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}.contact-info-value {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 26px);
  font-weight: 300;
  line-height: 1.4;
  color: var(--cream);
}.contact-info-value a { color: var(--gold-light); }/* ---- the form ---- */.contact-right {
  background: none;
  padding: 0 0 0 clamp(30px, 4vw, 70px);
}.contact-form-title {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(24px, 3vh, 40px);
}.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 30px);
}.form-group { margin-bottom: clamp(20px, 2.6vh, 34px); }.form-group label {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250,247,242,0.45);
  margin-bottom: 10px;
}/* hairline-underline fields, not boxes */.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 12px 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--cream);
  transition: border-color 320ms ease;
  -webkit-appearance: none;
  appearance: none;
}.form-group textarea { resize: vertical; min-height: 110px; line-height: 1.6; }.form-group select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 12px) 22px, calc(100% - 7px) 22px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}.form-group select option { background: var(--ink-soft); color: var(--cream); }.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  /* outline intentionally left alone — :focus-visible in
     shared/glayze.css draws the keyboard ring */
  border-bottom-color: var(--gold);
}.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(250,247,242,0.3); }.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(10px, 2vh, 22px);
  padding: 16px 38px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background 320ms ease, color 320ms ease;
}.form-submit:hover { background: var(--gold-light); }.form-submit:disabled { background: transparent; border: 1px solid var(--line); color: var(--body-dim); cursor: default; }/* =========================================================
   FAQ + PRICING + CTA — contrast sweep
   ========================================================= */#pricing { background: var(--ink); padding-block: clamp(90px, 12vh, 170px); }.pricing-inner { max-width: 1100px; margin: 0 auto; }.pricing-section-title {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: clamp(36px, 5vh, 60px) 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}.pricing-table { width: 100%; border-collapse: collapse; font-size: 15px; }.pricing-table td { padding: 15px 0; border-bottom: 1px solid rgba(250,247,242,0.07); vertical-align: baseline; }.pricing-table .item-name { font-family: var(--font-display); font-size: 20px; font-weight: 300; color: var(--cream); }.pricing-table .item-desc { font-size: 13px; color: rgba(250,247,242,0.45); }.pricing-table .price, .pricing-table .price-full {
  text-align: right; white-space: nowrap;
  font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--gold);
}.pricing-table .price-na { color: rgba(250,247,242,0.35); font-weight: 300; }.pricing-note { margin-top: 30px; font-size: 13px; color: rgba(250,247,242,0.42); }#cta-banner { background: var(--choc-deep); padding-block: clamp(90px, 12vh, 160px); text-align: center; }.cta-banner-inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 2; }.cta-banner-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 4.6vw, 66px);
  line-height: 1.06;
  color: var(--cream);
  margin-bottom: 20px;
}.cta-banner-sub { font-size: clamp(15px, 1.5vw, 19px); color: var(--body-dim); margin-bottom: 34px; }.cta-banner-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }@media (max-width: 992px) {
  #contact { grid-template-columns: 1fr; gap: 44px; padding-inline: 24px; }
  .contact-left { padding: 0; border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 40px; }
  .contact-right { padding: 0; }
  .form-row { grid-template-columns: 1fr; }
  #marquee, #pricing, #cta-banner { padding-inline: 24px; }
}/* =========================================================
   SECTION RHYTHM — keep adjacent grounds distinguishable
   ========================================================= *//* explorer and collection both landed on --ink; give the explorer
   the deepest tone so the sequence alternates all the way down */#explorer { background: var(--choc-deep); }/* hairline seams wherever two dark grounds meet */#trust, #explorer, #collection, #spotlight, #pricing, #cta-banner, #marquee, #contact {
  border-top: 1px solid rgba(250, 247, 242, 0.06);
}/* the collection is the centrepiece — give it a faint warm bloom */#collection::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(200,146,42,0.07) 0%, transparent 70%);
}#collection > * { position: relative; z-index: 1; }/* =========================================================
   BENTO — corrections after the editorial rules were removed
   ========================================================= *//* the tile is the positioning context and clips its own photo */.product-card {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 0;
}/* photo fills the tile; nothing may hide it */.product-card .card-img-wrap {
  display: block !important;
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  margin: 0;
  overflow: hidden;
}.product-card .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; }/* body is a real flex column again, sitting above the photo */.product-card .card-body {
  display: flex !important;
  position: relative;
  z-index: 2;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: clamp(18px, 2vw, 30px);
  padding-top: clamp(54px, 5vw, 72px);   /* clear of the price chip */
  gap: 0;
  background: none;
  border: none;
}/* price chip: fixed small size, top-right, never overlapping the name */.product-card .card-price {
  position: absolute;
  top: clamp(14px, 1.4vw, 20px);
  right: clamp(14px, 1.4vw, 20px);
  z-index: 4;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--gold);
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}.product-card .card-price span {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  color: var(--ink);
  opacity: 0.72;
  margin-left: 4px;
}/* the slice/full toggle sits top-LEFT so the two never collide */.product-card .price-toggle {
  position: absolute;
  top: clamp(14px, 1.4vw, 20px);
  left: clamp(14px, 1.4vw, 20px);
  right: auto;
  z-index: 4;
  display: flex;
  gap: 3px;
  margin: 0;
  padding: 3px;
  background: rgba(12, 7, 2, 0.66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
}/* name and category, sized for a tile */.product-card .card-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(19px, 1.6vw, 26px);
  line-height: 1.1;
  color: var(--cream);
  margin: 0;
  transform: none !important;
}.product-card:hover .card-name { transform: none !important; }.product-card.b-hero .card-name { font-size: clamp(26px, 2.4vw, 40px); }.product-card.b-tall .card-name { font-size: clamp(22px, 1.9vw, 30px); }/* small tiles: name only, no category or description */.product-card.b-sm  .card-category,
.product-card.b-wide .card-category { display: none; }.product-card.b-sm  .card-desc,
.product-card.b-wide .card-desc { display: none; }/* every tile needs a scrim or the type disappears into the photo */.product-card .card-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(10,6,2,0.95) 0%, rgba(10,6,2,0.72) 30%, rgba(10,6,2,0.24) 62%, rgba(10,6,2,0.42) 100%);
}@media (max-width: 700px) {
  .product-card .card-body { padding-top: 50px; }
  .product-card .card-name { font-size: 17px; }
  .product-card.b-hero .card-name { font-size: 22px; }
}/* =========================================================
   SPOTLIGHT — sticky rail, not a ScrollTrigger pin
   The previous pin never engaged because `section { overflow:
   hidden }` makes #spotlight the containing block, which defeats
   both position:sticky and ScrollTrigger's pin. Hence vertical and
   horizontal moving at once, and the empty spacer below.

   Structure:  #spotlight  (overflow visible)
                 .spotlightRail    tall — its height IS the lock
                   .spotlightSticky  sticky, exactly one viewport
   ========================================================= */:root { --nav-h: 112px; }#spotlight {
  overflow: visible;            /* critical — sticky needs this */
  padding: 0;
  height: auto;
  background: var(--choc-deep);
}/* the rail's height is set by JS to 100vh + the row's travel,
   so the lock lasts exactly as long as the horizontal run */.spotlightRail { position: relative; }.spotlightSticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;             /* clip the row, not the sticky */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 3vh, 46px);
  padding-top: var(--nav-h);    /* clears the fixed header */
  padding-bottom: clamp(20px, 3vh, 40px);
}.spotlightHead { flex: 0 0 auto; }.spotlight-track {
  flex: 0 0 auto;
  display: flex;
  gap: clamp(14px, 1.6vw, 26px);
  padding-inline: 40px;
  width: max-content;
  will-change: transform;
}/* cards size to the available height so nothing is cut off */.spotlight-card {
  flex: 0 0 auto;
  width: clamp(230px, 22vw, 340px);
  align-self: stretch !important;
  display: flex;
  flex-direction: column;
  max-height: 100%;
}.spotlight-card-img {overflow: hidden; border-radius: 20px !important; flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }.spotlight-card-info { position: static; padding: 16px clamp(14px, 1.4vw, 20px) 18px; }.spotlightProgress { flex: 0 0 auto; }@media (max-width: 992px) {
  /* no lock on touch — a native swipe row is friendlier */
  .spotlightRail { height: auto !important; }
  .spotlightSticky {
    position: static;
    height: auto;
    padding-top: 70px;
    padding-bottom: 70px;
    overflow: visible;
  }
  .spotlight-track {
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    transform: none !important;
    padding-inline: 24px;
  }
  .spotlight-card { width: 72vw; scroll-snap-align: start; max-height: none; }
  .spotlight-card-img { aspect-ratio: 4 / 5; }
}@media (prefers-reduced-motion: reduce) {
  .spotlightRail { height: auto !important; }
  .spotlightSticky { position: static; height: auto; overflow: visible; padding-block: 70px; }
  .spotlight-track { width: auto; overflow-x: auto; transform: none !important; }
  .spotlight-card { max-height: none; }
}/* =========================================================
   DESKTOP GUARD  (min-width: 993px)
   A block of the preview's mobile media-query rules was flattened
   to top level when I extracted its CSS, so rules like
   `#contact { grid-template-columns: 1fr }`,
   `#explorer,#collection,#pricing,#faq { padding: 80px 24px }` and
   `.filter-bar { overflow-x: auto; white-space: nowrap }` were
   applying at every width. This re-asserts the desktop values.
   ========================================================= */@media (min-width: 993px) {

  /* section rhythm — the flattened rule forced 80px/24px everywhere */
  #explorer, #collection, #pricing, #marquee {
    padding: clamp(90px, 12vh, 170px) 0;
  }

  /* the filter bar is not sticky and does not scroll horizontally */
  .filter-bar {
    position: relative;
    top: auto;
    z-index: 1;
    overflow: visible;
    white-space: normal;
    flex-wrap: wrap;
    justify-content: flex-start;
    background: none;
    max-width: 1650px;
    margin: 0 auto clamp(30px, 4vh, 52px);
    padding: 0 40px;
  }

  .filter-tab { flex-shrink: 1; }

  /* contact is two columns again */
  #contact { grid-template-columns: 0.82fr 1.18fr; }

  /* mobile-only helper must stay hidden */

  /* spotlight must keep overflow visible for the sticky rail */
  #spotlight { overflow: visible; }
  #spotlight-track { overflow: visible; scroll-snap-type: none; }
  .spotlight-card { width: clamp(230px, 22vw, 340px); flex-shrink: 0; }
}/* =========================================================
   BENTO — tessellating pattern
   The old sizes couldn't pack 6 columns, so a wide tile that
   didn't fit the remaining span jumped a row and left a hole.
   These six sizes tile 60 cells across exactly 10 rows:

     R1  ▓▓▓▓ ░░      R6  ▓▓▓ ░░░
     R2  ▓▓▓▓ ░░      R7  ░░ ░░ ▓▓
     R3  ▓▓ ░░ ░░     R8  ░░░░ ▓▓
     R4  ▓▓ ░░░░      R9  ▓▓▓ ▓▓▓
     R5  ▓▓▓ ░░░      R10 ▓▓▓ ▓▓▓

   grid-auto-flow: dense keeps it packed when the filter hides
   tiles and the pattern no longer applies.
   ========================================================= */.product-grid {
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(150px, 15.5vw, 215px);
  grid-auto-flow: row dense;
  gap: clamp(12px, 1vw, 18px);
}.product-card.b-feature { grid-column: span 4; grid-row: span 2; }.product-card.b-hero    { grid-column: span 3; grid-row: span 2; }.product-card.b-tall    { grid-column: span 2; grid-row: span 2; }.product-card.b-wide    { grid-column: span 4; grid-row: span 1; }.product-card.b-band    { grid-column: span 3; grid-row: span 1; }.product-card.b-sm      { grid-column: span 2; grid-row: span 1; }/* type scales with the tile so a short one never crowds */.product-card.b-feature .card-name { font-size: clamp(28px, 2.7vw, 46px); }.product-card.b-hero    .card-name { font-size: clamp(24px, 2.2vw, 38px); }.product-card.b-tall    .card-name { font-size: clamp(21px, 1.8vw, 29px); }.product-card.b-wide    .card-name,
.product-card.b-band    .card-name { font-size: clamp(19px, 1.6vw, 27px); }.product-card.b-sm      .card-name { font-size: clamp(17px, 1.35vw, 22px); }/* descriptions only where there's genuinely room for them */.product-card .card-desc { display: none; }.product-card.b-feature .card-desc,
.product-card.b-hero    .card-desc,
.product-card.b-tall    .card-desc {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(250, 247, 242, 0.7);
  margin: 9px 0 0;
  max-width: 36ch;
}/* single-row tiles get a tighter body so the name always clears
   the price chip and the toggle above it */.product-card.b-sm .card-body,
.product-card.b-band .card-body,
.product-card.b-wide .card-body { padding-top: clamp(46px, 4vw, 60px); }.product-card.b-sm .card-category { display: none; }/* the enquire link only on the larger tiles */.product-card.b-sm .card-enquire,
.product-card.b-band .card-enquire { display: none; }/* ---------------- responsive re-tiling ---------------- */@media (max-width: 1200px) {
  /* 4 columns. These spans were solved for rather than guessed —
     they pack 10 rows with zero holes for this tile order. */
  .product-grid { grid-template-columns: repeat(4, 1fr); }
  .product-card.b-feature { grid-column: span 4; grid-row: span 1; }
  .product-card.b-hero    { grid-column: span 2; grid-row: span 2; }
  .product-card.b-tall    { grid-column: span 2; grid-row: span 1; }
  .product-card.b-wide    { grid-column: span 2; grid-row: span 1; }
  .product-card.b-band    { grid-column: span 2; grid-row: span 1; }
  .product-card.b-sm      { grid-column: span 2; grid-row: span 1; }
  .product-card.b-tall .card-desc,
  .product-card.b-feature .card-desc { display: none; }
}@media (max-width: 760px) {
  /* 2 columns: everything is either full-width or a half tile */
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 46vw;
    gap: 10px;
    padding: 0 24px;
  }
  .product-card.b-feature,
  .product-card.b-hero    { grid-column: span 2; grid-row: span 1; }
  .product-card.b-wide,
  .product-card.b-band    { grid-column: span 2; grid-row: span 1; }
  .product-card.b-tall,
  .product-card.b-sm      { grid-column: span 1; grid-row: span 1; }
  .product-card .card-desc { display: none !important; }
  .product-card .card-body { padding-top: 46px; }
}/* =========================================================
   MARQUEE — the homepage's .localidades, in place of the FAQ
   Three lines of oversized display italic, the middle one
   counter-rotating. Ported from home-g/style.css and re-skinned
   for the espresso ground.
   ========================================================= */#marquee {
  background: var(--ink-soft);
  padding-block: clamp(70px, 9vh, 130px);
  overflow: hidden;
  border-block: 1px solid rgba(250, 247, 242, 0.06);
}.localidades {
  overflow: hidden;
  padding-block: 8px;
  display: grid;
  gap: clamp(4px, 1vh, 14px);
}.localidades .line {
  display: block;
  white-space: nowrap;
  animation: carrouselLine 55s linear infinite;
}/* the middle line runs the other way — the homepage's signature */.localidades .line:nth-child(even) {
  animation: carrouselLine 55s linear infinite reverse;
}.localidades ul {
  display: inline-flex;
  align-items: center;
  gap: clamp(40px, 6vw, 100px);
  margin: 0;
  padding: 0;
  list-style: none;
}.localidades li {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3vw, 54px);
  line-height: 1.16;
  width: max-content;
  text-transform: none;
  color: var(--tan);
}/* alternate words in gold, as on the homepage */.localidades li:nth-child(even) { color: var(--gold); }/* the centre line is the quiet one */.localidades .line:nth-child(2) li { font-size: clamp(20px, 2.1vw, 36px); opacity: 0.66; }@keyframes carrouselLine {
  0%  { transform: translateZ(0); }
  to  { transform: translate3d(-50%, 0, 0); }
}/* soften both edges so words don't clip hard against the viewport */.localidades::before,
.localidades::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(60px, 10vw, 190px);
  z-index: 2;
  pointer-events: none;
}#marquee { position: relative; }.localidades::before { left: 0;  background: linear-gradient(to right, var(--ink-soft), transparent); }.localidades::after  { right: 0; background: linear-gradient(to left,  var(--ink-soft), transparent); }@media (prefers-reduced-motion: reduce) {
  .localidades .line { animation: none !important; }
}/* =========================================================
   BAKES — EDITORIAL PASS
   =========================================================

   This block is the answer to "the inner pages look AI generated".
   What was removed, and what replaced it:

   1. THE REPEATED OPENER. Every section used to start with a gold
      .tag eyebrow, a big Cormorant .section-title and a muted lead.
      All seven of those stacks are gone. Each section now opens on a
      .gzE-rail — rule, gold tick, wide
      tracked label, right-hand end label — numbered 01 to 07 down
      the page, so the page reads like a contents list. The headline
      after the rail alternates .gzE-mega (Cormorant, edge to edge)
      and .gzE-wide (Archivo stretched wide, caps) and never repeats
      the same treatment twice in a row.

   2. BOXES. The three "standard" tiles are .gzE-card plates now —
      one rule on the top edge, a gold rule that wipes across it on
      hover, an Archivo-condensed plate label — and they are offset from
      each other with .gzE-drop / .gzE-drop-s so the row is not level.
      The bento tiles lost their 18px radius and their 60px drop
      shadow; they keep a hairline and gain the same wiping top rule.

   3. HEIGHT. Sections carried a flat 200px block padding. They now
      carry .gzE-cathedral / --room / --corridor, so the page has a
      pulse instead of a metronome.

   4. THE GRID. .layerStage runs past the container on both edges,
      the hero and about images run off one edge each, and the CTA
      block is pulled up over the section above it with .gzE-pull.

   5. GOLD. It was italic text at every size, in eleven places. It is
      now a rule or a figure everywhere except two: one .gzE-mark
      bar behind "layer." in the about headline, and one .gzE-slab
      behind "Extraordinary" in the closing CTA.

   6. HOVERS. Everything used to be translateY(-2px) + box-shadow.
      Links carry .gzE-wipe, image wrappers .gzE-wake, the sixteen
      Enquire labels .gzE-go, and buttons are .gzE-btn, whose fill
      wipes up from the bottom edge.

   7. FIGURES. Prices are Archivo condensed with tabular numerals and
      a small tracked LKR label, and the 32 that already sat in the
      pricing header is promoted to the page's single .gzE-figure.

   Nothing here touches the bento spans, the sticky spotlight rail,
   the filter bar, the layer showcase, the price toggles or the
   WhatsApp wiring — those are load bearing and were left alone.
   ========================================================= */:root {
  /* .gzE-bleed lands exactly on the viewport edge only if it matches
     the container gutter, which on this page is a flat 40px. */
  --bleed: 40px;

  /* squarer, flatter. Rounded cards with a big drop shadow were the
     loudest single tell on the page. */
  --radius-card:  2px;
  --radius-btn:   0;
  --radius-pill:  2px;
  --shadow-card:  none;
  --shadow-hover: none;
}@media (max-width: 992px) { :root { --bleed: 24px; } }/* ---------------------------------------------------------
   1. DARK-GROUND SPECIALISATION OF editorial.css
   The shared layer is written ink-on-cream. This page is espresso
   from top to bottom, so every rule and label has to flip.
   --------------------------------------------------------- */.gzE-card       { border-top-color: var(--rule-dark-firm); }.gzE-card__n    { color: var(--gold-light); }.gzE-go         { color: var(--gold-light); }.gzE-figure     { color: var(--cream); }.gzE-data       { border-top-color: var(--rule-dark-firm); }.gzE-vlabel     { color: rgba(250, 247, 242, 0.4); opacity: 1; }/* a bare .gzE-btn is near-black on near-black. Every button on this
   page is --gold or --onDark; this is only a safety net. */.gzE-btn:not(.gzE-btn--gold):not(.gzE-btn--onDark) {
  border-color: var(--rule-dark-firm);
  color: var(--cream);
}.gzE-btn:not(.gzE-btn--gold):not(.gzE-btn--onDark)::before { background: var(--cream); }/* Dark on the gold fill, NOT cream. Cream on #C8922A is 2.6:1; --ink on
   it is 6.6:1. This is the same rule shared/editorial.css states for
   .gzE-slab, and the slab on this page already follows it. The hover
   state is untouched: .gzE-btn:hover wipes --choc-deep up behind the
   label and recolours it cream, and that selector outranks this one. */.gzE-btn--gold { color: var(--ink); }/* the gold bar behind "layer." is lit by `section.active`, which GSAP
   adds. With GSAP absent the class never lands, so light it up front
   rather than leave the word looking unfinished. */html:not(.has-anim) .gzE-mark::before { transform: scaleX(1); transition: none; }/* .gzE-wake keys off `a:hover`, and neither a bento tile nor a
   spotlight card is an anchor, so map the card hover onto it. */.product-card:hover  .gzE-wake img,
.spotlight-card:hover .gzE-wake img { filter: saturate(1.02) contrast(1); }/* the hanging rule must stay inside the 40px gutter or the section's
   own overflow:hidden clips it */@media (min-width: 1200px) {
  .container > .gzE-rail--hang,
  .collection-header > .gzE-rail--hang,
  .pricing-header > .gzE-rail--hang,
  .spotlightHead > .gzE-rail--hang { margin-left: calc(-1 * clamp(14px, 1.8vw, 34px)); }
}.contact-left .gzE-rail { margin-bottom: 0; }.pricing-header .gzE-rail { margin-bottom: clamp(22px, 4vh, 44px); }/* ---------------------------------------------------------
   2. HERO
   The eyebrow is a ruled coordinate line in Archivo rather than a
   gold all-caps label, and the giant word behind it is structural
   type rather than a gold Cormorant italic.
   --------------------------------------------------------- */.hero-bg-word {
  font-family: var(--font-struct);
  font-stretch: expanded;
  font-weight: 300;
  font-style: normal;
  text-transform: uppercase;
  font-size: clamp(16vw, 20vw, 24vw);
  letter-spacing: 0.02em;
  color: rgba(250, 247, 242, 0.045);
}.hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(26px, 4vh, 48px);
  padding-bottom: 16px;
  border-bottom: 0px solid var(--rule-dark);
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.55);
}/* the dashes are the only gold in the hero, and they read as rules */.hero-eyebrow span { color: var(--gold); }.hero-title { margin-bottom: 0; letter-spacing: -0.035em; }/* the italic line was gold; gold as text is now spent elsewhere */.title-line.italic { color: var(--tan); }.hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(24px, 4vw, 70px);
  margin-top: clamp(30px, 4.5vh, 54px);
}.hero-desc {
  margin: 0;
  max-width: 42ch;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.5;
  color: rgba(250, 247, 242, 0.66);
}.hero-cta { gap: 12px; }.hero-image-wrap {
  border-radius: 0;
  box-shadow: none;
  margin-right: calc(-1 * var(--bleed));
}/* was a solid gold chip. Now a plate with a gold rule on its top edge. */.hero-cake-badge {
  left: auto;
  right: 0;
  bottom: 0;
  margin: 0;
  background: rgba(10, 6, 2, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 0px solid var(--gold);
  border-radius: 0;
  box-shadow: none;
  padding: 13px 20px 12px;
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  color: var(--cream);
}.scroll-indicator {
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.38em;
  color: rgba(250, 247, 242, 0.42);
}/* ---------------------------------------------------------
   3. THE RUNNING STRIP
   This is the page's own version of .gzE-strip: wide Archivo caps on
   a paper-toned band, hairline rules top and bottom, and hairline
   ticks instead of gold dots. It was a solid gold bar.
   --------------------------------------------------------- */.marquee-wrap {
  z-index: 2;
  padding-block: 16px;
  background: var(--ink-soft);
  color: rgba(250, 247, 242, 0.55);
  border-block: 1px solid rgba(250, 247, 242, 0.1);
}.marquee-item {
  gap: 30px;
  padding-right: 30px;
  font-family: var(--font-struct);
  font-stretch: expanded;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.34em;
  color: inherit;
}.marquee-dot {
  display: none;
  width: 14px;
  height: 1px;
  border-radius: 0;
  background: rgba(250, 247, 242, 0.3);
}.marquee-wrap:hover .marquee-track { animation-play-state: paused; }/* ---------------------------------------------------------
   4. ABOUT  (rail 01, headline .gzE-mega)
   --------------------------------------------------------- */.about-inner { align-items: end; grid-template-columns: 1.02fr 0.98fr; }.about-image-wrap {
  border-radius: 0;
  box-shadow: none;
  margin-left: calc(-1 * var(--bleed));
}.about-headline.gzE-mega {
  font-family: var(--font-display);
  font-size: clamp(38px, 7.4vw, 124px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--cream);
  margin-bottom: clamp(22px, 3vh, 34px);
}/* the page's ONE .gzE-mark — a gold bar wiping in behind the word */.about-headline .gzE-mark {
  font-style: normal;
  color: var(--cream);
}.about-body {
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.75;
  max-width: 46ch;
  color: var(--body-dim);
}/* the oversized locality tag was gold italic; it is texture now */.floatDuck { color: rgba(212, 197, 179, 0.16); }/* ---------------------------------------------------------
   5. THE STANDARD  (rail 02, .gzE-card plates)
   Three plates with a rule on the top edge only, stepped down the
   row by .gzE-drop-s / .gzE-drop rather than by hand-set padding.
   --------------------------------------------------------- */.standardBand { display: block; }.standardList {
  grid-template-columns: 1.15fr 1fr 1.25fr;
  gap: 0 clamp(24px, 3.2vw, 60px);
  align-items: start;
}.standardItem.gzE-card,
.standardItem.gzE-card:nth-child(2),
.standardItem.gzE-card:nth-child(3) {
  border-left: none;
  padding: 22px 0 0;
}/* The plate's own gold rule (.gzE-card::after) does this job now — but
   .standardItem::after and .gzE-card::after are the SAME pseudo-element,
   so `display: none` here switched both off and the plates lost their
   hover gesture entirely. Reset the old bottom-rule geometry instead and
   let the .gzE-card top rule through. */.standardItem.gzE-card::after {
  left: 0;
  right: auto;
  top: -1px;
  bottom: auto;
  width: 0;
  height: 1px;
  transform: none;
  transition: width 600ms var(--ease-out);
}.standardItem.gzE-card:hover::after { width: 100%; transform: none; }/* (.standardNum removed with the section numerals — the plates carry a
   title and a description only.) */.standardTitle { font-size: clamp(21px, 2vw, 30px); margin-bottom: 14px; }.standardDesc  { font-size: 14px; max-width: 32ch; }.standardTel { color: var(--gold-light); }.standardTel::after { display: none; }/* .gzE-wipe draws the rule *//* ---------------------------------------------------------
   6. EXPLORE THE LAYERS  (rail 03, headline .gzE-wide)
   The showcase panel is the one thing on the page allowed to run
   past the container on both sides.
   --------------------------------------------------------- */.explorerHead {
  text-align: left;
  margin-bottom: clamp(26px, 4vh, 50px);
}.explorerTitle.gzE-wide {
  font-size: clamp(24px, 4.6vw, 74px);
  color: var(--cream);
}/* Archivo from Google has no italic axis, so the second word is
   differentiated by width, not by slant */.explorerTitle em {
  font-style: normal;
  font-stretch: condensed;
  color: var(--tan);
}.layerStage.gzE-bleed {
  max-width: none;
  width: auto;
}.layerFrame {
  border-radius: 0;
  border: none;
  border-top: 1px solid rgba(250, 247, 242, 0.12);
}.layerCaption b { font-weight: 400; color: var(--cream); }.layerChipBar { border-radius: 0; }.layerChipName {
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(250, 247, 242, 0.6);
}.layerChip.is-active .layerChipName { color: var(--cream); }/* ---------------------------------------------------------
   7. OUR COLLECTION  (rail 04, headline .gzE-mega)
   The bento spans are untouched. What changed is the skin: no
   radius, no 60px shadow, a gold rule that wipes across the top
   edge on hover, and prices set as figures rather than gold pills.
   --------------------------------------------------------- */.collection-header {
  display: block;
  max-width: 1650px;
  margin: 0 auto clamp(24px, 3.5vh, 44px);
  padding: 0 40px;
}.collectionTitle.gzE-mega {
  font-size: clamp(44px, 10.5vw, 176px);
  line-height: 0.84;
  color: var(--cream);
  margin: 0;
}.collectionTitle .lineB {
  display: block;
  margin-left: clamp(30px, 9vw, 230px);
  margin-top: -0.06em;
  font-style: italic;
  color: var(--tan);
}/* the filter bar: tracked Archivo labels on a rule, not gold pills */.filter-bar {
  gap: 0;
  align-items: flex-end;
  border-top: 0px solid var(--rule-dark-firm);
}.filter-tab {
  position: relative;
  margin-right: clamp(16px, 2.2vw, 34px);
  padding: 12px 0 11px;
  border: none;
  border-radius: 0;
  background: none;
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.26em;
  color: rgba(250, 247, 242, 0.45);
  transition: color 360ms var(--ease-out);
}.filter-tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px; bottom: auto;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 460ms var(--ease-out);
}.filter-tab:hover { color: var(--cream); border-color: transparent; }.filter-tab.active {
  background: none;
  border-color: transparent;
  color: var(--cream);
}.filter-tab.active::after { transform: scaleX(1); }/* ---- the tiles ---- */.product-card {
  border: 1px solid rgba(250, 247, 242, 0.1);
  border-radius: 0;
  box-shadow: none;
  transition: border-color 420ms var(--ease-out);
}/* the same gesture .gzE-card makes: a gold rule drawing across the
   top edge. Replaces the lift-and-shadow. */.product-card::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  z-index: 5;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 620ms var(--ease-out);
}.product-card:hover {
  border-color: rgba(250, 247, 242, 0.26);
  box-shadow: none;
  transform: none;
}.product-card:hover::after { width: 100%; }.product-card:hover .card-img-wrap img { transform: scale(1.03); }.product-card .card-img-wrap { border-radius: 0; }.product-card .card-category {
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.28em;
  color: rgba(250, 247, 242, 0.55);
}/* price: Archivo condensed, tabular, with a small tracked currency
   label under it. Was a gold pill. */.product-card .card-price {
  top: clamp(13px, 1.4vw, 20px);
  right: clamp(13px, 1.4vw, 20px);
  padding: 0;
  border-radius: 0;
  background: none;
  text-align: right;
  font-family: var(--font-struct);
  font-stretch: condensed;
  font-weight: 400;
  font-size: clamp(19px, 1.8vw, 29px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-shadow: 0 1px 14px rgba(10, 6, 2, 0.8);
}.product-card .card-price span {
  display: block;
  margin: 5px 0 0;
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 8.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.5);
  opacity: 1;
}.product-card .card-price--na {
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(250, 247, 242, 0.6);
}/* slice / full toggle: squared, and the active option is marked with
   a gold rule instead of a gold fill */.product-card .price-toggle {
      border-radius: 15px;
  
  padding: 2px;
  gap: 0;
  background: rgba(10, 6, 2, 0.62);
}.price-toggle-opt {
  border-radius: 0;
  padding: 6px 11px 5px;
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 8.5px;
  letter-spacing: 0.2em;
  color: rgba(250, 247, 242, 0.5);
  transition: color 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}.price-toggle-opt.active {
  background: none;
  color: var(--cream);
  box-shadow: inset 0 -1px 0 var(--gold);
}/* Enquire is a .gzE-go label — the rule extends, the tile stays put */.product-card .card-enquire {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  align-self: flex-start;
  margin-top: 16px;
  padding: 0;
  background: none;
  border: none;
  transform: none;
  opacity: 0;
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-light);
  transition: opacity 380ms var(--ease-out);
}.product-card:hover .card-enquire { opacity: 1; transform: none; }.product-card:hover .card-enquire::after { width: 48px; }/* Revealing the only way to enquire about an item on :hover alone made
   those buttons unusable in two situations that between them cover most
   traffic:

   - Touch. There is no hover on a phone, so all eight visible Enquire
     buttons sat at opacity 0 permanently and the bento had no call to
     action at all.
   - Keyboard. They stayed in the tab order at opacity 0, so Tab landed
     on an invisible control.

   :focus-within covers the keyboard, and the coarse-pointer query pins
   them open with room in the card body to sit in. */.product-card:focus-within .card-enquire { opacity: 1; transform: none; }.product-card:focus-within .card-enquire::after { width: 48px; }@media (hover: none) {
  .product-card .card-enquire { opacity: 1; transform: none; }
}/* ---------------------------------------------------------
   8. ON THE COUNTER  (rail 05, headline .gzE-wide)
   #spotlight keeps overflow:visible and .spotlightSticky keeps
   position:sticky — the horizontal lock depends on both.
   --------------------------------------------------------- */.spotlightHead .gzE-rail { margin-bottom: 14px; }/* has to stay small: the whole head plus the row plus the progress
   rail must fit inside one 100vh sticky viewport */.spotlightTitle.gzE-wide {
  font-size: clamp(19px, 2.6vw, 44px);
  color: var(--cream);
}.spotlightTitle em {
  font-style: normal;
  font-stretch: condensed;
  color: var(--tan);
}.spotlightHint {
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.3em;
  color: rgba(250, 247, 242, 0.34);
}.spotlight-card {
  border: none;
  border-top: 1px solid rgba(250, 247, 242, 0.14);
  border-radius: 0;
  background: none;
  transition: border-top-color 460ms var(--ease-out);
}.spotlight-card:hover {
  border-top-color: var(--gold);
  box-shadow: none;
}.spotlight-index {
  top: 16px;
  left: 14px;
  font-family: var(--font-struct);
  font-stretch: condensed;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}.spotlight-card-info { padding: 14px 0 0; }.spotlight-card-name { font-size: clamp(17px, 1.4vw, 23px); }.spotlight-card-price {
  font-family: var(--font-struct);
  font-stretch: condensed;
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}.spotlight-card-price .cur {
  margin-left: 6px;
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 8.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.42);
}.spotlightProgress { background: var(--rule-dark); }/* ---------------------------------------------------------
   9. FULL PRICE LIST  (rail 06, headline .gzE-mega)
   The page's single .gzE-figure, and every price re-set as a
   condensed tabular numeral with a tracked currency label.
   --------------------------------------------------------- */#pricing .gzE-vlabel { top: clamp(30px, 6vh, 70px); right: 16px; }.pricing-inner { max-width: 1180px; }.pricing-header { text-align: left; margin-bottom: clamp(28px, 4.5vh, 56px); }.pricing-headline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 3.5vw, 56px);
  align-items: end;
}/* was a ghosted gold Cormorant italic. Gold is allowed to be a
   figure, and this is the one on the page. */.bigNumeral.gzE-figure {
  display: none;
  font-family: var(--font-struct);
  font-stretch: condensed;
  font-weight: 300;
  font-style: normal;
  font-size: clamp(64px, 9vw, 150px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--gold);
  margin: 0;
}.pricing-headline-text { min-width: 0; }.pricingTitle.gzE-mega {
  font-size: clamp(32px, 5.6vw, 92px);
  line-height: 0.9;
  color: var(--cream);
  margin: 0;
}.pricingTitle em { font-style: italic; color: var(--tan); }.pricing-kicker {
  margin: 14px 0 0;
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.42);
}.pricing-section-title {
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(250, 247, 242, 0.5);
  margin: clamp(38px, 5.5vh, 68px) 0 0;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--rule-dark-firm);
}.pricing-table thead th {
  font-family: var(--font-struct);
  font-stretch: normal;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.3);
  padding: 14px 0 11px;
  text-align: left;
  border-bottom: 1px solid rgba(250, 247, 242, 0.07);
}.pricing-table thead th:nth-child(2),
.pricing-table thead th:last-child,
.pricing-table tbody td:nth-child(2),
.pricing-table tbody td:last-child { text-align: right; }.pricing-table tbody tr { transition: none; }.pricing-table tbody tr:hover { background: none; }.pricing-table tbody tr:hover .item-name { color: var(--gold-light); }.pricing-table .item-name { font-size: clamp(18px, 1.6vw, 22px); }.pricing-table .price,
.pricing-table .price-full {
  font-family: var(--font-struct);
  font-stretch: condensed;
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}.pricing-table .price-full { color: rgba(250, 247, 242, 0.5); }.pricing-table .cur {
  margin-left: 5px;
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 8.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.38);
}.pricing-table .price-na {
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.26);
}.pricing-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 26px;
  margin-top: clamp(32px, 5vh, 58px);
  padding-top: 22px;
  border-top: 1px solid var(--rule-dark-firm);
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.45);
}.pricing-note strong {
  display: inline-block;
  margin: 0;
  font-family: var(--font-struct);
  font-stretch: condensed;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}/* the emoji glyphs stay in the source but never render — a phone
   pictogram in a price footer is the other kind of template tell */.emo { display: none; }/* ---------------------------------------------------------
   10. CLOSING CTA  (headline .gzE-wide, one .gzE-slab)
   Not centred any more, and pulled up over the section above it —
   the page's single .gzE-pull.
   --------------------------------------------------------- */#cta-banner {
  background: var(--choc-deep);
  text-align: left;
  overflow: visible;              /* .gzE-pull has to break the seam */
}.cta-banner-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: 40px;
  text-align: left;
}/* gentler than the default .gzE-pull so the line lands on the seam
   rather than halfway up the price list */.cta-banner-inner.gzE-pull { margin-top: clamp(-116px, -7vw, -44px); }.cta-banner-title.gzE-wide {
  font-size: clamp(23px, 3.7vw, 60px);
  color: var(--cream);
  margin-bottom: 0;
}/* the page's ONE gold slab */.cta-banner-title .gzE-slab {
  font-style: normal;
  background: var(--gold);
  color: var(--ink);
  padding: 0.02em 0.24em 0.1em;
}.cta-banner-sub {
  max-width: 46ch;
  margin: clamp(20px, 3vh, 30px) 0 clamp(26px, 4vh, 42px);
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 23px);
  line-height: 1.5;
  color: var(--body-dim);
}.cta-banner-btns { justify-content: flex-start; gap: 12px; }/* ---------------------------------------------------------
   11. THE RUNNING WORDS
   The homepage carrousel stays, but the gold-every-other-word
   alternation is gone and the middle line is re-set in wide
   Archivo caps so the band carries structure as well as texture.
   --------------------------------------------------------- */.localidades li { color: rgba(250, 247, 242, 0.3); }.localidades li:nth-child(even) { color: var(--tan); }.localidades .line:nth-child(2) li {
  font-family: var(--font-struct);
  font-stretch: expanded;
  font-weight: 300;
  font-style: normal;
  text-transform: uppercase;
  font-size: clamp(11px, 1.15vw, 17px);
  letter-spacing: 0.3em;
  color: rgba(250, 247, 242, 0.4);
  opacity: 1;
}/* ---------------------------------------------------------
   12. PLACE YOUR ORDER  (rail 07, headline .gzE-mega)
   --------------------------------------------------------- */.contactTitle.gzE-mega {
  font-size: clamp(32px, 4.6vw, 76px);
  line-height: 0.92;
  color: var(--cream);
  margin: 0;
}.contactTitle em { font-style: italic; color: var(--tan); }.contact-info-label {
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  color: rgba(250, 247, 242, 0.42);
}.contact-info-value a { color: var(--cream); }.contact-info-value a:hover { color: var(--gold-light); }.contact-form-title {
  padding-top: 14px;
  border-top: 1px solid var(--rule-dark-firm);
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(250, 247, 242, 0.42);
}.form-group label {
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.26em;
  color: rgba(250, 247, 242, 0.42);
}.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-display);
  font-size: 20px;
  border-bottom-color: var(--rule-dark-firm);
}.form-group textarea { font-size: 18px; }/* the submit button is a .gzE-btn now, so the old skin has to be
   unwound — the page sheet loads after editorial.css and would
   otherwise win on every one of these properties */.form-submit.gzE-btn {
  width: auto;
  margin-top: 0px;
  padding: 17px 34px;
  border: 1px solid var(--gold);
  border-radius: 0;
  background: var(--gold);
  color: var(--ink);                /* cream on gold is 2.6:1 — see .gzE-btn--gold */
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  transition: color 420ms var(--ease-out), border-color 420ms var(--ease-out);
}/* on hover .gzE-btn--gold::before wipes --choc-deep up behind the label,
   so the label goes cream there and stays legible */.form-submit.gzE-btn:hover { background: var(--gold); color: var(--cream); }.gz-invalid input,
.gz-invalid select,
.gz-invalid textarea {
  border-bottom-color: #E06B4A !important;
  box-shadow: none !important;
}/* ---------------------------------------------------------
   13. PULL QUOTE
   --------------------------------------------------------- */.philosophy-quote {
  max-width: 24ch;
  font-size: clamp(2rem, 5.6vw, 6rem);
  line-height: 1.1;
}.philosophy-source {
  display: inline-block;
  padding-top: 16px;
  border-top: 0px solid var(--rule-dark-firm);
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(250, 247, 242, 0.42);
}.section-philosophy .philosophy-inner::before { color: rgba(250, 247, 242, 0.05); }/* ---------------------------------------------------------
   14. THE COUNTER — same de-golding as everything else
   --------------------------------------------------------- */.theCounter {
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.26em;
  border-top: 1px solid rgba(250, 247, 242, 0.14);
}.counterItem b { color: var(--cream); font-variant-numeric: tabular-nums; }/* ---------------------------------------------------------
   15. RESPONSIVE — the rules above are top level, so anything the
   earlier media queries used to handle has to be restated here.
   --------------------------------------------------------- */@media (max-width: 1100px) {
  .hero-foot { grid-template-columns: 1fr; gap: 26px; align-items: start; }
  .about-inner { grid-template-columns: 1fr; gap: 44px; align-items: start; }
  .section-philosophy .philosophy-inner::before { font-size: 200px; }
  .philosophy-quote { max-width: none; }
}@media (max-width: 992px) {
  .standardList { grid-template-columns: 1fr; gap: 30px; }
  .standardItem.gzE-card,
  .standardItem.gzE-card:nth-child(2),
  .standardItem.gzE-card:nth-child(3) { padding: 18px 0 0; }
  .standardDesc { max-width: none; }
  .collection-header, .cta-banner-inner { padding-inline: 24px; }
  .collectionTitle .lineB { margin-left: 24px; }
  .cta-banner-inner.gzE-pull { margin-top: -30px; }
  .pricing-headline { grid-template-columns: 1fr; gap: 10px; align-items: start; }
  .filter-tab { margin-right: 18px; }
}@media (max-width: 900px) {
  .theCounter { font-size: 9px; letter-spacing: 0.14em; }
}@media (max-width: 700px) {
  .hero-cake-badge { position: static; display: block; }
  .product-card .card-price { font-size: 17px; }
  .product-card .card-price span { font-size: 7.5px; letter-spacing: 0.2em; }
  .pricing-note strong { font-size: 20px; }
}@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; }
  .product-card::after,
  .filter-tab::after,
  .price-toggle-opt { transition: none; }
  .product-card .card-enquire { opacity: 1; }
}/* =========================================================
   DE-BOXING THE COLLECTION

   The bento sizing already breaks "level", but every one of the 16
   product cards still carried a 1px border on all four edges, which is
   the single most template-looking thing left on the page. Same
   treatment as .gzE-card: a rule on the top edge only, and a gold rule
   that wipes across it on hover.

   Scoped to .product-card so nothing in the bento spans is touched.
   ========================================================= */
  .product-card {
    border-radius: 15px;
  border: none;
  border-top: 1px solid var(--line);
  
  background: transparent;
  position: relative;
}.product-card::after {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 620ms var(--ease-out);
  z-index: 3;
}.product-card:hover::after { width: 100%; }.product-card .card-img-wrap { border-radius: 0; }/* gold was on the category label of all 16 cards — that is 16 gold
   instances against a budget of one or two. Muted to a plate label; the
   price keeps the emphasis. */.product-card .card-category {
  color: var(--body-dim);
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  letter-spacing: 0.24em;
}/* likewise the spotlight rail: 12 gold indices + 12 gold prices */.spotlight-index {
  color: rgba(250, 247, 242, 0.34);
  font-family: var(--font-struct);
  font-stretch: condensed;
  font-feature-settings: "tnum" 1;
}.spotlight-card-price { color: var(--cream); }
/* =========================================================
   TOUCH AND TARGET FIXES

   Three defects found in the production audit, all invisible on a
   desktop with a mouse.
   ========================================================= */

/* 1. The Enquire link on all 16 product cards was opacity:0, revealed by
      `.product-card:hover`. There is no hover on a phone, so the primary
      action on the page's main section was permanently invisible to every
      touch visitor. On a coarse pointer it is simply always shown. */
@media (hover: none), (pointer: coarse) {
  .card-enquire {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 2. `.filter-bar` is position:sticky, but it lives in #collection and the
      sheet sets `section { overflow: hidden }` globally — an overflow
      ancestor kills sticky silently, so the bar never stuck. `clip` on the
      x-axis still contains the .slideRight letter-spacing overflow that
      the hidden was there for, while leaving the y-axis free. */
#collection {
  overflow-x: clip;
  overflow-y: visible;
}

/* 3. Tap targets. The price toggle sat at 3–7px of padding, well under the
      44px minimum, and it is the control that changes the price. */
.price-toggle-opt {
  min-height: 38px;
  padding-inline: 14px;
}

.filter-tab { min-height: 44px; }

@media (hover: none), (pointer: coarse) {
  .price-toggle-opt { min-height: 44px; }
  .card-enquire { min-height: 44px; display: inline-flex; align-items: center; }
}


/* The layer showcase reveals one slide at a time with .is-active, set by
   plain JS rather than GSAP — so the has-anim gate doesn't cover it. If
   the script never runs, all six slides stay at opacity:0 and the section
   is empty. Show the first one when there's no JS to rotate them. */
html:not(.has-anim) .layerSlide:first-child,
html:not(.has-anim) .layerCaption:first-child {
  opacity: 1;
  visibility: visible;
}