/* =========================================================
   Glayze Café — Coffee page
   Rebuilt in the Glayze design system (matches home-g tokens)
   ========================================================= */:root {
  --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;
  --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;
}*, *::before, *::after { box-sizing: border-box; }/* NOTE: no `scroll-behavior: smooth` here on purpose — it fights Lenis.
   The homepage has the same rule commented out for this reason. */body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: var(--cream);
  background: var(--choc-deep);
  -webkit-font-smoothing: antialiased;
}img { max-width: 100%; display: block; height: auto; }a { color: inherit; text-decoration: none; }.lgContainer { max-width: 1800px; }/* The gutter is deliberately the same value as editorial.css's --bleed,
   so .gzE-bleed / .gzE-bleed-r land exactly on the viewport edge and
   .gzE-rail--hang has room to hang its rule into the margin. */.container {
  width: 100%;
  max-width: 1650px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 90px);
}/* .eyebrow is gone. Every section now opens on a .gzE-rail instead of
   the gold-tracked-caps / big-Cormorant / muted-lead stack. */.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}.cPrimary { color: var(--gold-ink); }/* header + footer moved to shared/glayze.css *//* ---------------- hero ---------------- */.hero {
  position: relative;
  min-height: 100vh;
  height: 100vh;              /* exactly one viewport — nothing pins it now */
  display: flex;
  align-items: center;
  overflow: hidden;
  background: url("images/hero-bg.webp") center/cover no-repeat, var(--choc-deep);
}/* darkens the edges so the copy stays legible over the photo */.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,  rgba(28,15,6,0.62) 0%, rgba(28,15,6,0.10) 34%, rgba(28,15,6,0.10) 66%, rgba(28,15,6,0.55) 100%),
    linear-gradient(to bottom, rgba(28,15,6,0.55) 0%, rgba(28,15,6,0.05) 30%, rgba(28,15,6,0.72) 100%);
  pointer-events: none;
}.hero .container { position: relative; z-index: 2; }.heroTop {
  display: grid;
  /* col 2 is an intentional empty gutter over the drink in the photo */
  grid-template-columns: minmax(0,1fr) minmax(200px, 0.6fr) minmax(0,1fr);
  align-items: center;
  gap: 40px;
  padding: 150px 0 0;
}.heroTop .heroRight { grid-column: 3; }/* brush-stroke artwork sits behind the script word */.heroScript {
  width: 100%;
  max-width: 430px;
  aspect-ratio: 964 / 640;
  background: url("images/brush.png") center/contain no-repeat;
  display: grid;
  place-items: center;
}.heroScript span {
  font-family: "Dancing Script", var(--font-display), cursive;
  font-weight: 500;
  font-size: clamp(56px, 7.4vw, 128px);
  line-height: 1;
  color: #2E1C0E;
  padding-bottom: 0.12em;
}/* the whole stroke + word drift together, forever, smoothly */.heroScript {
  animation: coolWave 6s ease-in-out infinite;
  will-change: transform;
}@keyframes coolWave {
  0%   { transform: translate3d(0, -14px, 0) rotate(-1.4deg); }
  50%  { transform: translate3d(0,  14px, 0) rotate(1.4deg); }
  100% { transform: translate3d(0, -14px, 0) rotate(-1.4deg); }
}.heroTitle {
  font-size: clamp(48px, 8vw, 120px);
  color: var(--cream);
  text-shadow: 0 2px 24px rgba(28,15,6,0.5);
}/* Iced Chocolate block, lower-left of the hero */.heroFeature {
  max-width: 430px;
  padding: 40px 0 120px;
}.heroFeature .roundImg { margin: 0 0 28px; }.heroFeature .featureTitle { color: var(--cream); font-size: clamp(28px, 3.5vw, 46px); }.heroFeature .featureBody { color: var(--cream); opacity: 0.88; }/* the drink list: ruled Archivo labels (.gzE-go), not gold circle chips */.heroList {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  justify-items: start;
}.heroList li { margin: 0; }.heroList .gzE-go { color: var(--gold-light); }/* ---------------- generic section ---------------- */.section { padding-block: 200px; position: relative; }.section--cream { background: var(--cream); color: var(--text); }.section--cream .display { color: var(--text); }.featureTitle { font-size: clamp(36px, 5vw, 60px); }.featureBody { margin: 20px 0 0; max-width: 46ch; color: var(--text-muted); }.section:not(.section--cream) .featureBody { color: var(--tan); }.roundImg {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cream-dark);
  padding: 26px;
}
.formFoot .gzE-btn:hover{
  color: #fff;
 }
 /* ---------------- contact strip ---------------- */.contactStrip {
  background: var(--choc-mid);
  padding-block: 110px;
  border-top: 1px solid rgba(250,247,242,0.08);
  border-bottom: 1px solid rgba(250,247,242,0.08);
}.contactGrid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1.1fr;
  gap: 44px;
}/* the label is a .gzE-card__n plate label now — Archivo condensed, gold as a
   figure rather than gold as a sentence */.contactCard .gzE-card__n {
  font-family: var(--font-struct);
  font-stretch: condensed;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--gold-ink);
  margin: 0 0 14px;
}.contactCard p, .contactCard a {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--cream);
  margin: 0;
  transition: color var(--transition);
}/* no colour swap on hover — .gzE-wipe draws a rule under the link instead *//* ---------------- chocolate sundae ---------------- */.sundae {
  position: relative;
  padding-block: 200px;
  background: var(--cream-dark);
  color: var(--text);
  overflow: hidden;
}.sundae .container { position: relative; z-index: 2; }.sundaeTitle {
  font-size: clamp(48px, 8vw, 120px);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--choc-mid);
  text-align: center;
  margin-bottom: -30px;
}.sundaeGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: end;
}.sundaeCopy { padding-bottom: 40px; }.sundaeCopy p {
  max-width: 42ch;
  color: var(--text-muted);
  margin: 0;
}.sundaeArt img {
  max-width: 420px;
  margin: 0 auto;
  filter: drop-shadow(0 26px 50px rgba(42,22,8,0.28));
}.sundae .customers { margin-top: 40px; }.sundae .avatars img { border-color: var(--cream-dark); }.sundae .customers .count { color: var(--choc-mid); }.sundae .customers .label { color: var(--text-muted); }.customers {
  margin-top: 64px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
}.avatars { display: flex; }.avatars img {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--choc-deep);
  margin-left: -14px;
}.avatars img:first-child { margin-left: 0; }.customers .count {
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--gold-light);
  line-height: 1;
}.customers .label {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tan);
}/* ---------------- menu ---------------- */.menuHead { text-align: center; margin-bottom: 46px; }.menuHead .display { font-size: clamp(36px, 5vw, 60px); text-transform: uppercase; }.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 58px;
}.tabBtn {
  padding: 11px 26px;
  border: 1px solid rgba(42,22,8,0.18);
  background: transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}.tabBtn:hover { border-color: var(--gold); color: var(--text); }.tabBtn[aria-selected="true"] {
  background: var(--choc-mid);
  border-color: var(--choc-mid);
  color: var(--cream);
}.tabPanel { display: none; }.tabPanel.is-active { display: block; }.menuGrid {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  gap: 0 84px;
}.menuItem {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px dashed rgba(42,22,8,0.16);
}.menuItem img {
  width: 58px; height: 58px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cream-dark);
}.menuItem h3 {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 400;
  margin: 0;
  color: var(--text);
}.menuItem p {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}.price {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold-ink);
  white-space: nowrap;
}/* ---------------- intro / crafting ---------------- */.crafting { position: relative; overflow: hidden; }/* minmax(0, …) so a long line of wide Archivo caps can't force the copy
   column wider than its share and push the bleeding art off-screen */.craftingGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(34px, 4.4vw, 70px);
  align-items: center;
}.craftingArt { position: relative; }.craftingArt img { border-radius: var(--radius-card); }.beans {
  position: absolute;
  right: -30px;
  bottom: -40px;
  width: 190px;
  opacity: 0.9;
  pointer-events: none;
}.brew {
  position: absolute;
  left: -34px;
  top: -34px;
  width: 120px;
  opacity: 0.85;
  pointer-events: none;
}/* header + footer moved to shared/glayze.css *//* ---------------- responsive ---------------- */@media (max-width: 1100px) {
  .heroTop { grid-template-columns: 1fr; gap: 30px; padding: 130px 0 0; }
  .heroTop .heroRight { grid-column: 1; }
  .heroScript {display: none; max-width: 330px; }
  .heroFeature { max-width: none; padding: 34px 0 90px; }
  .splitGrid, .craftingGrid { grid-template-columns: 1fr; gap: 44px; }
  .sundaeGrid { grid-template-columns: 1fr; gap: 20px; }
  .sundaeCopy { padding-bottom: 0; order: 2; }
  .sundaeArt { order: 1; }
  .sundaeTitle { margin-bottom: 20px; }
  .roundImg { margin: 0 auto; }
  .menuGrid { grid-template-columns: 1fr; gap: 8px; }
  .beans, .brew { display: none; }
}/* =========================================================
   ANIMATION LAYER
   Same stack as the homepage: GSAP + ScrollTrigger + Lenis.
   Every start-state here is undone by JS, and the whole block
   is neutralised under prefers-reduced-motion (bottom of file).
   ========================================================= *//* scroll progress bar */.scrollProgress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  /* over the fixed header (999), under the preloader (10000). At 100 the
     header's is-stuck background — cream at 0.92 alpha plus a blur — sat
     on top of the bar and hid it from the moment it started filling. */
  z-index: 1000;
  pointer-events: none;
}.scrollProgress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transform: scaleX(0);
  transform-origin: 0 50%;
}/* header + footer moved to shared/glayze.css *//* masked word reveal for headings.
   The mask needs slack at the bottom for descenders (y, g) and accents,
   pulled back with a negative margin so line spacing is unaffected. */.splitWord {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}.splitWord > i {
  display: inline-block;
  font-style: inherit;
  will-change: transform;
}.revealImg {
  overflow: hidden;
  border-radius: var(--radius-card);
}/* ---------------------------------------------------------------
   HIDDEN START STATES — only while `has-anim` is on <html>.
   That class is set by an inline script in <head> and removed again
   if GSAP fails to load, so content can never be stranded invisible.
   --------------------------------------------------------------- */.has-anim .splitWord > i    { transform: translateY(110%); }.has-anim [data-reveal]     { opacity: 0; transform: translateY(26px); will-change: transform, opacity; }.has-anim .revealImg        { clip-path: inset(0% 0% 100% 0%); will-change: clip-path; }/* free-floating decorative art */.drifter {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}.drifter--beans { top: 4%;  left: -70px;  width: 230px; animation: bob 9s ease-in-out infinite; }.drifter--brew  { bottom: 6%; right: -40px; width: 150px; animation: bob 11s ease-in-out infinite reverse; }@keyframes bob {
  0%, 100% { transform: translateY(-10px) rotate(-4deg); }
  50%      { transform: translateY(14px)  rotate(5deg); }
}/* rotating circular badge on the sundae */.spinBadge {
  position: absolute;
  right: 4%;
  bottom: 14%;
  width: 150px;
  height: 150px;
  animation: spin 22s linear infinite;
  pointer-events: none;
}.spinBadge svg { width: 100%; height: 100%; overflow: visible; }.spinBadge text {
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0.24em;
  fill: var(--gold);
  text-transform: uppercase;
}@keyframes spin { to { transform: rotate(360deg); } }.sundaeArt { position: relative; }/* hover life */.menuItem { transition: transform 350ms cubic-bezier(0.4,0,0.2,1), border-color 350ms ease; }.menuItem:hover { transform: translateX(8px); border-color: var(--gold); }.menuItem img { transition: transform 450ms cubic-bezier(0.34,1.56,0.64,1); }.menuItem:hover img { transform: scale(1.12) rotate(-6deg); }.magnetic { will-change: transform; }/* honour the OS setting — kills every motion above */@media (prefers-reduced-motion: reduce) {
  .heroScript, .drifter, .spinBadge { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .splitWord > i { transform: none !important; }
  .revealImg { clip-path: none !important; }
  .menuItem:hover { transform: none; }
  .menuItem:hover img { transform: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}@media (max-width: 992px) {
  .section, .crafting, .sundae { padding-block: 50px; }
  .contactStrip { padding-block: 50px; }
}@media (max-width: 768px) {
  .spinBadge { width: 104px; height: 104px; right: 0; bottom: 6%; }
  .spinBadge text { font-size: 17px; }
  .drifter--beans { width: 140px; left: -40px; }
  .drifter--brew { width: 96px; }
  .sundae { padding: 110px 0; }
  .menuItem { grid-template-columns: 46px 1fr auto; gap: 14px; }
  .menuItem img { width: 46px; height: 46px; }
  .menuItem h3 { font-size: 20px; }
  .roundImg { width: 230px; height: 230px; }
  .customers { flex-wrap: wrap; justify-content: center; }
}/* =========================================================
   HOMEPAGE REVEAL ARCHITECTURE
   Ported from home-g/style.css. ScrollTrigger adds .active to a
   <section> and CSS transitions do the work — the homepage barely
   animates properties directly, which is why its arrivals feel
   slower and heavier than a GSAP tween.

   Start states are gated on html.has-anim so a failed GSAP load
   can never strand a heading invisible.
   ========================================================= *//* the 35px start letter-spacing overflows; the homepage clips it
   with `section { overflow: hidden }` */.section, .sundae, .contactStrip, .crafting { overflow: hidden; }.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);
}.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;
}/* stagger the transition so grouped items arrive in sequence */.has-anim .showUp:nth-of-type(2),  .has-anim .rotateAnim:nth-of-type(2)  { transition-delay: 0.12s; }.has-anim .showUp:nth-of-type(3),  .has-anim .rotateAnim:nth-of-type(3)  { transition-delay: 0.24s; }.has-anim .showUp:nth-of-type(4)  { transition-delay: 0.36s; }@media (prefers-reduced-motion: reduce) {
  .slideRight, .showUp, .rotateAnim {
    opacity: 1 !important; transform: none !important;
    letter-spacing: normal !important; transition: none !important;
  }
}/* =========================================================
   HOMEPAGE COMPONENTS
   .floatDuck, .localidades — copied from home-g.

   .btnDefault is gone: its hover was the stock translateY(-2px) +
   box-shadow. Both buttons on the page are now .gzE-btn, whose fill
   wipes up from the bottom edge instead.
   ========================================================= *//* ---- oversized italic locality tag, thrown in from off-canvas ---- */.floatDuck {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(48px, 6vw, 100px);
  margin: 0;
  /* was gold — gold now only appears as a rule, a figure or the one
     .gzE-mark bar. This reads as a ghosted printed word instead. */
  color: rgba(250, 247, 242, 0.34);
  position: absolute;
  overflow: revert;
  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;
}.heroFeature .floatDuck { right: 6%;  bottom: 22%; }.menuHead   .floatDuck  { right: 4%;  top: -30px; }/* ---- three-line counter-rotating marquee ---- */.localidades {
  margin-top: 0;               /* the band is flush now (.gzE-flush-top) */
  overflow: hidden;
  padding-block: clamp(30px, 5vh, 60px);
}.localidades .line {
  display: block;
  white-space: nowrap;
  animation: carrouselLine 50s linear infinite;
}.localidades .line:nth-child(odd) {
  animation: carrouselLine 50s linear infinite reverse;
}.localidades ul {
  display: inline-flex;
  align-items: center;
  gap: 100px;
  padding: 0;
  margin: 0;
  list-style: none;
}.localidades li {
  font-weight: 300;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 3vw, 50px);
  width: max-content;
  text-transform: none;
  /* two weights of cream, not alternating gold. The band is texture, not
     a place to spend the accent colour. */
  color: rgba(250, 247, 242, 0.26);
}.localidades li:nth-child(even) { color: rgba(250, 247, 242, 0.52); }@keyframes carrouselLine {
  0%  { transform: translateZ(0); }
  to  { transform: translate3d(-50%, 0, 0); }
}@media (prefers-reduced-motion: reduce) {
  .localidades .line { animation: none !important; }
  .floatDuck { opacity: 1 !important; transform: none !important; position: static; }
}/* =========================================================
   DECORATIVE MOTIFS + HEADER INVERSION
   ========================================================= *//* per-section line-art, each on its own parallax lane, as the
   homepage does with #sectionSobre .bean1 / .bean2 etc. */.bean {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.42;
}.contactStrip .bean1 { left: -60px;  top: 20px;    width: 170px; }.sundae       .bean2 { right: -40px; bottom: 40px; width: 200px; }#menu         .bean3 { left: -70px;  top: 120px;   width: 180px; opacity: 0.28; }#menu         .bean4 { right: -50px; bottom: 90px; width: 150px; opacity: 0.28; }.crafting     .bean5 { left: -50px;  bottom: 60px; width: 160px; }/* triple-gradient veil over dark sections, à la .bgGradientAbout */.bgGradientAbout {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(120, 80, 40, 0.30) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 20% 70%, rgba(90, 55, 25, 0.34) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(70, 45, 20, 0.28) 0%, transparent 60%);
}.crafting .container,
.contactStrip .container { position: relative; z-index: 2; }/* header + footer moved to shared/glayze.css *//* the cup icon's hover lives with the menu rules further down */.menuItem:hover img { transform: scale(1.05) rotate(0deg); }/* =========================================================
   EDITORIAL PASS — asymmetry, hierarchy, varied interaction
   ========================================================= *//* ---- 1. no more mathematically even grids ---------------- *//* was: repeat(auto-fit, minmax(220px, 1fr)) — three identical columns.
   The vertical offsets are now the .gzE-drop / .gzE-drop-s utilities on
   the plates themselves, so the row is never level. */.contactGrid {
  grid-template-columns: 1.35fr 1fr 1.1fr;
  align-items: start;
}/* ---- 2. let things break their container ------------------ */.heroScript { margin-left: -90px; }.sundaeArt img { margin-right: -7%; }/* .crafting .craftingArt used a -6% nudge; it now carries .gzE-bleed-r
   so it runs off the real viewport edge instead of a percentage. *//* ---- 3. varied hover response, not one -2px for everything -- *//* menu rows: the dotted leader firms up, the price slides */.menuItem { transition: border-color 400ms ease; }.menuItem:hover { transform: none; }.menuItem .price { transition: transform 380ms cubic-bezier(0.34,1.56,0.64,1), color 300ms ease; }.menuItem:hover .price { transform: translateX(-8px); }.menuItem:hover img { transform: scale(1.06); }/* contact plates: the gold rule wipes across the top edge (.gzE-card),
   nothing lifts and nothing casts a shadow *//* ---- 4. motion hierarchy: the hero is the only headline act -- *//* the crafting headline arrives quietly instead of doing slideRight's
   35px letter-spacing throw, which would fight Archivo's own tracking */.crafting .craftingTitle {
  letter-spacing: 0.03em !important;
  transform: none !important;
  transition: opacity 900ms ease !important;
}.has-anim .crafting .craftingTitle { opacity: 0; }.has-anim section.active .crafting .craftingTitle,
.has-anim .crafting.active .craftingTitle { opacity: 1; }@media (max-width: 1100px) {
  .contactGrid { grid-template-columns: 1fr; }
  .menuGrid { grid-template-columns: 1fr; gap: 0; }
  .heroScript { margin-left: 0; }
  .sundaeArt img { margin-right: 0; }
}/* =========================================================
   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; }
}/* =========================================================
   HERO — exactly one viewport
   The scrubber is gone and nothing pins the section, so the hero
   is a true 100vh. Both blocks (the "Cool" row and the Iced
   Chocolate feature) have to fit inside it, so the vertical
   rhythm is driven by vh rather than fixed px.
   ========================================================= */.hero {
  display: grid;                     /* was flex + align-items:center */
  align-content: center;
  padding-block: 0;
}.hero .container {
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: clamp(10px, 2.4vh, 40px);
  height: 100%;
  padding-top: clamp(84px, 13vh, 150px);
  padding-bottom: clamp(20px, 4vh, 56px);
}.heroTop {
  padding: 0;                        /* the container owns the offsets now */
  align-items: center;
}.heroTitle {
  font-size: clamp(34px, min(7.4vw, 8.4vh), 104px);
  line-height: 0.98;
}.heroList {
  margin-top: clamp(14px, 2.6vh, 40px);
  gap: clamp(6px, 1.3vh, 16px);
}.heroList .gzE-go { font-size: clamp(9px, 1.2vh, 10.5px); }.heroList .gzE-go::after { width: clamp(18px, 3vh, 30px); }.heroList a:hover .gzE-go::after { width: clamp(34px, 6vh, 58px); }.heroFeature {
  max-width: 480px;
  padding: 0;
}/* the round cup scales with viewport height so it never forces overflow */.heroFeature .roundImg {
  width: clamp(96px, 15vh, 190px);
  height: clamp(96px, 15vh, 190px);
  padding: clamp(10px, 1.8vh, 22px);
  margin-bottom: clamp(10px, 2vh, 24px);
}.heroFeature .featureTitle { font-size: clamp(22px, 3.4vh, 42px); margin-bottom: clamp(6px, 1.2vh, 14px); }.heroFeature .featureBody  { font-size: clamp(13px, 1.75vh, 17px); margin-top: 0; max-width: 52ch; }.heroCta { margin: 0; }.heroFeature .featureBody + .heroCta { margin-top: clamp(12px, 2.2vh, 28px); }/* short laptop screens: drop the paragraph rather than clip the layout */@media (max-height: 720px) and (min-width: 993px) {
  .heroFeature .featureBody { display: none; }
}/* on phones the hero is allowed to grow — cramming it is worse */@media (max-width: 992px) {
  .hero { height: auto; min-height: 100vh; }
  .hero .container { gap: 30px; padding-top: 120px; padding-bottom: 60px; }
  .heroFeature .roundImg { width: 140px; height: 140px; }
  .heroFeature .featureBody { display: block; }
}/* the marquee band sits flush between sections — no vertical padding
   (this rule was lost when the Extraction Scrubber block was removed) */.marqueeSection { padding-block: 0; }/* =========================================================
   CHOCOLATE SUNDAE — rebuilt to match the Elementor layout
   Centred heavy sans display title, sundae overlapping it from
   below, copy in the lower-left, rotating badge lower-right.
   Later in the file than the original rules, so it wins.
   ========================================================= */.sundae {
  background: var(--cream);          /* near-white, not cream-dark */
  color: var(--text);
  padding-block: clamp(90px, 12vh, 150px) clamp(60px, 8vh, 110px);
  overflow: hidden;
}/* faint coffee-ring stain, top-left */.sundaeRing {
  position: absolute;
  left: -60px;
  top: 40px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 14px solid rgba(142, 112, 83, 0.07);
  z-index: 0;
  pointer-events: none;
}/* the line-art leaves sitting behind the sundae */.sundaeLeaf {
  position: absolute;
  left: 50%;
  top: 44%;
  width: clamp(320px, 42vw, 620px);
  transform: translateX(-56%);
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
}.sundae .container { position: relative; z-index: 2; }/* ---- the display title: wide Archivo caps (.gzE-wide), left-set and
        staggered. The second line carries the page's single ink slab.

        NOTE: editorial.css loads after this file, so every property that
        .gzE-wide also sets has to be claimed with a two-class selector or
        source order hands it back to the shared layer. ---- */.sundaeTitle.gzE-wide {
  font-size: clamp(40px, 9.2vw, 148px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  margin: 0;
}.sundaeTitle {
  text-align: left;
  color: #8E7053;
  position: relative;
  z-index: 1;                        /* the sundae sits in front of this */
}.sundaeTitle > span { display: block; width: max-content; max-width: 100%; }.sundaeTitle .gzE-ink { display: inline-block; }/* ---- three columns: copy | sundae | badge ---- */.sundaeGrid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 0 clamp(20px, 4vw, 70px);
  margin-top: clamp(-90px, -7vw, -30px);   /* pulls the sundae over the title */
}/* centre column */.sundaeArt {
  grid-column: 2;
  position: relative;
  z-index: 3;
  justify-self: center;
}.sundaeArt img {
  width: clamp(210px, 27vw, 420px);
  height: auto;
  margin: 0;                         /* clear the old -7% bleed */
  filter: drop-shadow(0 30px 60px rgba(42, 22, 8, 0.22));
}/* ---- lower-left copy ---- */.sundaeCopy {
  grid-column: 1;
  padding-bottom: clamp(10px, 4vh, 60px);
  max-width: 420px;
}.sundaeCopy p {
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 34ch;
  margin: 0 0 30px;
}/* the page's primary action: .gzE-btn--gold, whose fill wipes up from the
   bottom edge. Only the arrow needs local styling. */.sundaeBtn i { font-style: normal; font-size: 14px; line-height: 1; }/* customers block, under a hairline */.sundaeCopy .customers {
  display: block;
  margin-top: clamp(28px, 5vh, 60px);
  padding-top: 26px;
  border-top: 1px solid rgba(142, 112, 83, 0.28);
}.sundaeCopy .avatars { display: flex; align-items: center; margin-bottom: 14px; }.sundaeCopy .avatars img {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cream);
  margin-left: -13px;
}.sundaeCopy .avatars img:first-child { margin-left: 0; }/* the gold 1k+ disc, last in the row */.avatarCount {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--cream);
  margin-left: -13px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  /* dark on gold, not cream on gold: cream on #C8922A is 2.59:1, the deep
     brown is 6.25:1. Same reasoning as .gzE-slab in shared/editorial.css. */
  color: var(--choc-deep);
  flex-shrink: 0;
}.customersLabel {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 500;
  color: #8E7053;
  margin: 0;
}/* ---- lower-right: hairline + rotating badge ---- */.sundaeAside {
  grid-column: 3;
  position: relative;
  padding-bottom: clamp(10px, 4vh, 60px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(30px, 8vh, 90px);
}.sundaeAside::before {
  content: "";
  width: min(300px, 70%);
  height: 1px;
  background: rgba(142, 112, 83, 0.28);
}.sundae .spinBadge {
  position: relative;               /* was absolute inside .sundaeArt */
  inset: auto;
  width: clamp(120px, 13vw, 190px);
  height: clamp(120px, 13vw, 190px);
  margin-right: clamp(0px, 3vw, 60px);
}.sundae .spinBadge text { fill: #8E7053; font-size: 14px; letter-spacing: 0.26em; }.badgeArrow {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: clamp(26px, 2.6vw, 40px);
  color: #8E7053;
  animation: none;                  /* the ring spins, the arrow doesn't */
}/* counter-rotate so the arrow stays upright inside the spinning badge */.sundae .spinBadge svg { animation: spin 22s linear infinite; }.sundae .spinBadge { animation: none; }



@media (max-width: 992px) {

    .sundae {
        padding: 10px 0;
        padding-block: clamp(10px, 1vh, 10px) clamp(10px, 1vh, 10px) !important;
    }

    .gzE-cathedral{
      padding: 10px !important;
    }


  .sundaeGrid {
    grid-template-columns: 1fr;
    margin-top: -20px;
    gap: 30px;
  }
  .sundaeCopy, .sundaeArt, .sundaeAside { grid-column: 1; }
  .sundaeArt  { order: 1; justify-self: center; }
  .sundaeCopy { order: 2; padding-bottom: 0; max-width: none; }
  .sundaeAside { display: none; order: 3; align-items: flex-start; gap: 24px; }
  .sundaeAside::before { width: 100%; }
  .sundae .spinBadge { margin-right: 0; }
  .sundaeLeaf { top: 30%; }
}




@media (prefers-reduced-motion: reduce) {
  .sundae .spinBadge svg { animation: none; }
}/* =========================================================
   COFFEE MENU — the cathedral section

   The header is left-set under rail 03: no eyebrow, one Cormorant
   .gzE-mega line. The tabs lost their gold pills — they are squared
   Archivo labels sitting on a hairline, and the active one is marked
   by a gold RULE rather than a gold fill.
   ========================================================= */.menuHead { text-align: left; margin-bottom: 0; }/* .gzE-mega is 14.5vw by default, which is too much for two words at
   this measure; this keeps it architectural but on the page. Two-class
   selector, because editorial.css loads after this file. */.menuTitle.gzE-mega {
  font-size: clamp(46px, 9.4vw, 164px);
  line-height: 0.86;
  margin: 0;
}.menuTitle { color: var(--text); }.menuTitle em { color: var(--text-muted); }/* the vertical edge label, clear of the header */#menu .gzE-vlabel {
  top: clamp(90px, 13vh, 190px);
  right: clamp(8px, 1.4vw, 30px);
}/* ---- tabs: ruled labels, gold rule on the active one ---- */.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0;
  margin: clamp(34px, 5vh, 64px) 0 clamp(40px, 6vh, 76px);
  border-bottom: 1px solid var(--rule);
}.tabBtn {
  position: relative;
  padding: 14px 26px 15px 14px;
  margin-right: clamp(18px, 2.4vw, 44px);
  border: none;
  background: transparent;
  border-radius: 0;
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 320ms var(--ease-out);
}/* the rule that marks the tab, wiping in from the left */.tabBtn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 460ms var(--ease-out);
}.tabBtn:hover { color: var(--text); }.tabBtn:hover::after { transform: scaleX(0.35); }.tabBtn[aria-selected="true"]::after { transform: scaleX(1); }@media (prefers-reduced-motion: reduce) {
  .tabBtn::after { transition: none; }
}.tabPanel { display: none; }.tabPanel.is-active { display: block; }/* ---- two even columns of rows ---- */.menuGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vh, 42px) clamp(50px, 7vw, 130px);
  align-items: start;
}.menuItem {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 0 22px;
  align-items: start;
  padding: 0;
  border-bottom: none;
  transition: none;
}/* the round cup icon */.menuItem img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  background: none;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}.menuItemBody { min-width: 0; padding-top: 6px; }/* name, then a dotted leader filling the gap to the price */.menuItemHead { display: flex; align-items: baseline; }.menuItemHead h3 {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 22px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--text);
  margin: 0;
  flex-shrink: 0;
  max-width: 100%;
}.menuItemHead::after {
  content: "";
  flex: 1 1 auto;
  min-width: 18px;
  margin-left: 14px;
  transform: translateY(-4px);
  border-bottom: 1px dotted rgba(42, 22, 8, 0.3);
}.menuItemBody p {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 6px 0 0;
  max-width: 42ch;
}/* price: a tabular Archivo-condensed figure over a tracked currency
   label. Thirty-one gold prices was gold-as-text at one intensity; the
   figure now carries the weight and the ink carries the colour. */.price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-struct);
  font-stretch: condensed;
  font-size: clamp(22px, 2vw, 31px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
  color: var(--text);
  padding-top: 4px;
  white-space: nowrap;
  transition: none;
}.price span {
  font-stretch: semi-expanded;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  margin-top: 5px;
}/* the editorial-pass feature treatment doesn't apply here */.menuItem:nth-child(-n/**/+3) {
  grid-column: auto;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  padding: 0;
  border-bottom: none;
}.menuItem:nth-child(-n/**/+3) img { width: 76px; height: 76px; }.menuItem:nth-child(-n/**/+3) h3  { font-size: clamp(17px, 1.4vw, 22px); }.menuItem:nth-child(-n/**/+3) p   { font-size: 14.5px; max-width: 42ch; }.menuItem:nth-child(-n/**/+3) .price { font-size: clamp(22px, 2vw, 31px); }/* restrained hover — the dotted leader firms up and the price steps in;
   the row itself never lifts and never casts a shadow */.menuItem:hover { transform: none; border-bottom-color: transparent; }.menuItem:hover img { transform: scale(1.06); }.menuItem:hover .price { transform: translateX(-8px); }.menuItemHead::after { transition: border-bottom-color 380ms var(--ease-out); }.menuItem:hover .menuItemHead::after { border-bottom-color: var(--gold); }@media (max-width: 992px) {
  .menuGrid { grid-template-columns: 1fr; gap: 26px; }
  .menuItem, .menuItem:nth-child(-n/**/+3) { grid-template-columns: 58px minmax(0,1fr) auto; gap: 0 16px; }
  .menuItem img, .menuItem:nth-child(-n/**/+3) img { width: 58px; height: 58px; }
  .tabBtn { font-size: 9.5px; padding: 12px 14px 13px 0; margin-right: 16px; letter-spacing: 0.18em; }
}/* =========================================================
   EDITORIAL LAYER — page-local wiring

   Everything below adapts the shared editorial vocabulary
   (shared/editorial.css) to this page: rails on dark sections, the
   de-boxed contact plates, the promoted figure, and the two places
   where a block is allowed to break out of the grid.
   ========================================================= *//* ---- rails ---------------------------------------------- *//* The rails fade up on the existing [data-reveal] hook, so no new JS is
   involved and nothing can strand them invisible.

   Every section on this page clips its overflow (the .slideRight start
   state throws letter-spacing 35px wide and has to be hidden), so the
   hanging rule is pulled only as far as the gutter really allows —
   editorial.css's default -5vw would put it past the viewport edge
   between 1200px and 1650px, where the container has no outer margin.
   The child selector is what makes this win over the shared rule, which
   is in a stylesheet loaded after this one. */@media (min-width: 1200px) {
  .container > .gzE-rail--hang { margin-left: calc(-1 * clamp(20px, 2.6vw, 60px)); }
}/* ---- de-boxed contact plates ---------------------------- *//* .gzE-card's top rule is ink-coloured by default, which is invisible
   on --choc-mid. */.contactStrip .gzE-card { border-top-color: var(--rule-dark-firm); }.contactStrip .gzE-card__n { color: var(--gold-light); }/* .gzE-card:hover sets `transform: none`, and editorial.css loads after
   this file. Naming .contactCard in the .showUp selectors puts the start
   and end states back on top by specificity (3 classes beats 2), so a
   card hovered before it has revealed cannot pop into place. */.has-anim .contactCard.showUp {
  transform: scale(0.8) translate(-6px, 110%);
  opacity: 0;
}.has-anim section.active .contactCard.showUp {
  transform: scale(1) translate(0, 0);
  opacity: 1;
}/* ---- the sundae photograph desaturates until you want it ---- */.sundaeArt.gzE-wake img { filter: saturate(0.72) contrast(1.02); }/* ---- crafting: the ratio, promoted ---------------------- *//* no max-width here: the column already has one from the grid track, and a
   ch-based cap would strangle the wide-caps heading and the data panel.
   The paragraph keeps its own 46ch measure. */.craftingCopy { min-width: 0; }/* the copy column is only ~55% of the container, so the wide caps have to
   be set smaller than .gzE-wide's default or "CRAFTING MOMENTS," runs
   straight out of its column */.craftingTitle.gzE-wide {
  font-size: clamp(22px, 3.4vw, 52px);
  line-height: 1.02;
  margin: 0 0 clamp(18px, 3vh, 34px);
}.craftingTitle { color: var(--cream); }/* The one gold bar on the page. The text stays cream: the bar only covers
   the lower 0.42em of the word, and if GSAP never loads the section never
   gets .active — a dark ink colour here would strand the word invisible. */.craftingTitle .gzE-mark { color: inherit; }/* the photograph is a plate, not a rounded card */.craftingArt .revealImg,
.craftingArt .revealImg img { border-radius: 20px; }.craftFigure {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 60px);
  margin-top: clamp(30px, 5vh, 56px);
}.craftFigure .gzE-figure {
  color: var(--gold-ink);
  font-size: clamp(64px, 7vw, 120px);
}.craftFigure .gzE-figure sup { color: var(--tan); }.craftData { align-self: end; }.craftData.gzE-data .row { padding: 10px 0; }.craftData.gzE-data dd { font-size: clamp(17px, 1.4vw, 21px); }/* ---- crafting: the panel breaks out ---------------------- *//* .gzE-pull lifts the image over the marquee band above, so this section
   cannot clip its own top edge. `clip` is the one overflow value the
   spec lets you pair with `visible`, so the horizontal clip survives
   while the vertical overlap is allowed through. */.crafting {
  overflow: visible;
  overflow-x: clip;
}.craftingArt { z-index: 3; }@media (max-width: 1100px) {
  .craftFigure { grid-template-columns: 1fr; gap: 20px; }
  .craftData { align-self: start; }
}/* the .gzE-vlabel on this section is absolutely positioned, so the section
   has to be its containing block — without this the label escapes to the
   nearest positioned ancestor and lands nowhere useful. */#menu { position: relative; }
/* the menu tabs are the page's main control and sat at 11–12px of
   vertical padding — around 34px tall, under the 44px tap minimum */
.tabBtn { min-height: 44px; }

/* The menu rows used to share four category icons. They now carry a real
   photograph of the drink, so the thumbnail gets the same colour treatment
   as the mocktail cards on the homepage: pulled back at rest so the warm,
   saturated menu photography sits inside the Glayze palette, released on
   hover. */
.menuItem img {
  filter: saturate(0.7) contrast(1.02);
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 520ms ease;
}

.menuItem:hover img { filter: saturate(1.05) contrast(1); }