/* =========================================================
   TOKENS
   ========================================================= */

:root {
  /* The structural face. Archivo ships from Google as static width
     instances (extra-condensed … expanded), NOT as a variable font, so
     every rule below uses font-stretch keywords. font-variation-settings
     would silently do nothing. */
  --font-struct: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* rhythm: sections should NOT all be the same height */
  --pad-cathedral: clamp(120px, 18vh, 210px);   /* the one big moment */
  --pad-room:      clamp(80px, 11vh, 130px);    /* normal */
  --pad-corridor:  clamp(44px, 6vh,  70px);     /* deliberately tight */

  --bleed: clamp(24px, 4vw, 90px);

  --rule:      rgba(42, 22, 8, 0.16);
  --rule-firm: rgba(42, 22, 8, 0.42);
  --rule-dark: rgba(250, 247, 242, 0.16);
  --rule-dark-firm: rgba(250, 247, 242, 0.4);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-snap: cubic-bezier(0.18, 0.89, 0.32, 1.28);

  /* The brand gold is #C8922A. On the dark sections that is a 6.8:1
     contrast and reads beautifully. On cream it is 2.59:1 — under the
     3.0 floor for large text, never mind the 4.5 the small tracked
     labels need. So there are two golds: the brand one for dark
     grounds, and a darker mix for type on cream (4.6:1). Same hue, so
     nothing looks off-brand; it just becomes legible.

     Rule of thumb: gold ON CREAM  -> var(--gold-ink)
                    gold ON DARK   -> var(--gold) / var(--gold-light)
                    a gold FILL    -> keep --gold, put dark text on it */
  --gold-ink: #9A6614;
}

/* =========================================================
   GRAIN
   Fixed, overlay-blended, barely there. It is the difference between
   "flat beige" and "paper".
   ========================================================= */

.gzE-grain {
  position: fixed;
  inset: 0;
  z-index: 700;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;   /* works on cream and on the dark sections alike */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.36'/%3E%3C/svg%3E");
}

/* a heavier variant for pages that are dark end to end */
.gzE-grain--strong { opacity: 0.72; }

/* =========================================================
   TYPE AS ARCHITECTURE
   ========================================================= */

/* one word, edge to edge.
   line-height 0.86, not 0.82: Cormorant's descenders (y, g) and the
   period after an italic overshoot the box below about 0.86, and when a
   .gzE-mega runs to two or three lines that overshoot lands on whatever
   follows it. 0.86 still reads as tight display setting. */
.gzE-mega {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-weight: 300;
  font-size: clamp(52px, 11vw, 190px);
  line-height: 0.86;
  letter-spacing: -0.03em;
  margin: 0;
  /* ink insurance: at this size Cormorant's descenders sit below the last
     line box, and without this the following element rides up into them */
  padding-bottom: 0.08em;
  text-wrap: balance;
}

/* =========================================================
   MASKED LINE REVEAL

   Two elements, and it matters which does what: .hl clips, .hlIn moves.
   The first version put both jobs on one block and used padding-bottom
   plus a negative margin-bottom to make room for descenders — at 250px
   that margin was -25px a line, so the heading reserved far less height
   than its glyphs occupied and the paragraph below slid up underneath
   it. Separating the two means the box always equals the ink.
   ========================================================= */

.gzE-mega .hl,
.gzE-wide .hl {
  display: block;
  overflow: hidden;
}

.gzE-mega .hlIn,
.gzE-wide .hlIn {
  display: block;
  font-style: inherit;
  will-change: transform;
}

/* START STATE — armed by JavaScript, never by CSS on its own.

   This used to hang off `html.has-anim`, which is set in <head> before
   anything is known about whether the animation can actually run. If the
   reveal script then failed for any reason — a CDN that didn't answer, an
   exception thrown a few lines earlier, a slow connection — the headline
   stayed translated 115% down inside its own overflow:hidden mask and the
   page simply had no title on it. That is what was happening on Bakes,
   Journal, Reserve and Contact.

   `gz-arm` is now added by the page's reveal script on the line
   immediately before it starts the tween. No arm, no hidden state: the
   text is visible by default and only ever hidden by the same code that
   is about to bring it back. */
html.gz-arm:not(.hero-shown) .hlIn { transform: translateY(115%); }
html.gz-arm.hero-shown .hlIn { transform: none; }

.gzE-mega em {
  font-style: italic;
  letter-spacing: -0.02em;
}

/* the structural variant — wide, caps, architectural.
   This is the 2026 hospitality voice: light weight, stretched wide,
   generously tracked, all caps. */
.gzE-wide {
  font-family: var(--font-struct);
  font-stretch: expanded;
  font-weight: 300;
  font-size: clamp(30px, 6.2vw, 96px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}

/* a line of type that is allowed to run off the right edge */
.gzE-runoff {
  white-space: nowrap;
  overflow: visible;
}

/* stack two lines with the second one indented — kills centred symmetry */
.gzE-stagger > *:nth-child(2) { margin-left: clamp(16px, 5vw, 110px); }
.gzE-stagger > *:nth-child(3) { margin-left: clamp(8px, 2.5vw, 56px); }

/* =========================================================
   SECTION RAILS — the replacement for the eyebrow stack
   ========================================================= */

/* The rail originally carried a big gold section numeral. It was
   removed at the client's request — the counting read as decoration
   rather than information. What's left is the rule, the label, and a
   short gold tick that grows out of the left edge to give the label
   something to sit against. */
.gzE-rail {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 18px;
  margin-bottom: clamp(30px, 5vh, 64px);
  border-top: 0px solid var(--rule-firm);
  padding-top: 15px;
}

.gzE-rail__t {
  position: relative;
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-muted, #7A5C45);
  padding-left: 0px;
}

/* On dark grounds the brand gold is the readable one. This was written as
   `.gzE-rail--dark .gzE-card__n`, which matches nothing — the cards are
   siblings of the rail, not inside it — so both pages had quietly
   restated it locally. A modifier you put on the card works. */
.gzE-card--dark .gzE-card__n,
.gzE-data--dark .gzE-card__n { color: var(--gold-light, #E8C97A); }

/* and a whole dark card: rule and hover wipe inverted */
.gzE-card--dark { border-top-color: var(--rule-dark-firm); }
.gzE-card--dark::after { background: var(--gold-light, #E8C97A); }

/* the tick — replaces the numeral as the thing that anchors the label */
.gzE-rail__t::before {
  display: none;
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 30px;
  height: 1px;
  background: var(--gold-ink, #9A6614);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--ease-out) 120ms;
}

section.active .gzE-rail__t::before,
.gzE-rail.is-lit .gzE-rail__t::before { transform: scaleX(1); }

/* no JS on the page? show the tick rather than hide it forever */
html:not(.has-anim) .gzE-rail__t::before { transform: scaleX(1); }

.gzE-rail__end {
  font-family: var(--font-struct);
  font-stretch: normal;
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted, #7A5C45);
  /* no opacity: this end label carries real content — "Prices in LKR",
     the address, the opening window. At 0.65 it was 2.77:1 on cream.
     --text-muted on its own is 5.71:1. */
  align-self: end;
  padding-bottom: 3px;
  text-align: right;
}

/* dark-section variant */
.gzE-rail--dark { border-top-color: var(--rule-dark-firm); }
.gzE-rail--dark .gzE-rail__t,
.gzE-rail--dark .gzE-rail__end { color: rgba(250, 247, 242, 0.74); }
.gzE-rail--dark .gzE-rail__t::before { background: var(--gold-light, #E8C97A); }

/* the rail can hang into the left margin on wide screens, so the rule
   starts outside the text column and the page doesn't feel boxed */
@media (min-width: 1200px) {
  .gzE-rail--hang { margin-left: calc(-1 * clamp(40px, 5vw, 96px)); }
  /* .gzE-rail--hang .gzE-rail__t { padding-left: clamp(40px, 5vw, 96px); }
  .gzE-rail--hang .gzE-rail__t::before { width: clamp(24px, 3vw, 58px); } */
}



/* An absolutely positioned label needs its section to be the containing
   block. Relying on each page to remember that failed once already, so
   claim it here. */
section:has(> .gzE-vlabel) { position: relative; }

/* vertical rotated label, for the edge of a wide section */
.gzE-vlabel {
  position: absolute;
  top: clamp(40px, 8vh, 120px);
  right: clamp(8px, 1.4vw, 26px);
  writing-mode: vertical-rl;
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-muted, #7A5C45);
  /* 0.5 put this at 2.12:1 on cream and 1.79:1 on the tan section. It is
     a printer's mark, but it is still text. */
  opacity: 0.85;
  pointer-events: none;
  display: none !important;
}

/* =========================================================
   GOLD AS A SLAB
   ========================================================= */

/* a highlight bar sitting behind a word, like a marker over a
   printed page. Used once or twice per page, never more. */
.gzE-mark {
  position: relative;
  display: inline-block;
  font-style: normal;
  z-index: 0;
}

/* A 0.42em bar sitting 0.06em off the baseline works for lowercase, but
   .gzE-wide sets uppercase — the bar then cut the capitals in half, and
   because the page had also recoloured the word to cream it vanished
   into the bar. The bar now clears the full cap height and the word
   keeps its own colour, so it reads dark-on-gold like a marker. */
.gzE-mark::before {
  content: '';
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  bottom: -0.04em;
  height: 1.1em;
  background: var(--gold, #C8922A);
  z-index: -1;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 900ms var(--ease-out) 200ms;
}
.formFoot .gzE-btn:hover{
  color: #fff !important;
 }
/* lowercase display type needs the shorter, more marker-like bar */
.gzE-mega .gzE-mark::before {
  bottom: 0.04em;
  height: 0.52em;
}

section.active .gzE-mark::before,
.gzE-mark.is-lit::before { transform: scaleX(1); }

/* no JS, or GSAP blocked? nothing will ever add section.active, so draw
   the bar rather than leave it permanently unpainted. */
html:not(.has-anim) .gzE-mark::before { transform: scaleX(1); transition: none; }

/* a solid block of gold behind a whole line */
/* dark text on the gold, not cream: cream-on-gold is 2.59:1, whereas the
   deep brown on gold is 6.25:1 */
.gzE-slab {
  display: inline-block;
  background: var(--gold, #C8922A);
  color: var(--choc-deep, #1C0F06);
  padding: 0.06em 0.34em 0.12em;
}

/* an ink slab — dark block on cream, for a single strong statement */
.gzE-ink {
  display: inline-block;
  background: var(--choc-deep, #1C0F06);
  color: var(--cream, #FAF7F2);
  padding: 0.06em 0.34em 0.12em;
}

/* =========================================================
   BREAKING THE GRID
   ========================================================= */

/* push past the container on both sides */
.gzE-bleed {
  width: auto;
  margin-inline: calc(-1 * var(--bleed));
}

/* run off one edge only */
.gzE-bleed-r { margin-right: calc(-1 * var(--bleed)); }
.gzE-bleed-l { margin-left: calc(-1 * var(--bleed)); }

/* overlap whatever is above */
.gzE-pull { margin-top: clamp(-140px, -9vw, -40px); position: relative; z-index: 3; }

/* push a column down so a two-up stops being symmetrical */
@media (min-width: 1000px) {
  .gzE-drop   { margin-top: clamp(40px, 7vw, 130px); }
  .gzE-drop-s { margin-top: clamp(20px, 3.5vw, 64px); }
  .gzE-rise   { margin-top: clamp(-120px, -7vw, -40px); }
}

/* A running strip already reads as a break, so the section after it does
   not also need a cathedral's worth of air above — that combination was
   leaving a ~250px empty band that looked like a mistake. */
.gzE-strip + section { padding-top: clamp(52px, 7vh, 96px) !important; }

/* rhythm helpers, so sections stop being identical heights */
.gzE-cathedral { padding-block: var(--pad-cathedral) !important; }
.gzE-room      { padding-block: var(--pad-room) !important; }
.gzE-corridor  { padding-block: var(--pad-corridor) !important; }
.gzE-flush-top { padding-top: 0 !important; }
.gzE-flush-bot { padding-bottom: 0 !important; }

/* =========================================================
   RULED DATA PANELS
   The "tasting card" device — figures on ruled rows with tabular
   numerals. Replaces bordered boxes containing sentences.
   ========================================================= */

.gzE-data { border-top: 1px solid var(--rule-firm); }

.gzE-data li,
.gzE-data .row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}

.gzE-data dt,
.gzE-data .k {
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted, #7A5C45);
}

.gzE-data dd,
.gzE-data .v {
  margin: 0;
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.25;
  color: var(--text, #2A1608);
  text-align: right;
  font-feature-settings: 'tnum' 1;
}

.gzE-data--dark { border-top-color: var(--rule-dark-firm); }
.gzE-data--dark li,
.gzE-data--dark .row { border-bottom-color: var(--rule-dark); }
.gzE-data--dark dt,
.gzE-data--dark .k { color: rgba(250, 247, 242, 0.56); }
.gzE-data--dark dd,
.gzE-data--dark .v { color: var(--cream, #FAF7F2); }

/* an oversized figure, for a statistic that deserves to be seen */
.gzE-figure {
  font-family: var(--font-struct);
  font-stretch: condensed;
  font-weight: 300;
  font-size: clamp(52px, 8vw, 132px);
  line-height: 0.84;
  letter-spacing: -0.04em;
  font-feature-settings: 'tnum' 1;
  display: block;
}

.gzE-figure sup {
  font-size: 0.3em;
  vertical-align: super;
  letter-spacing: 0.1em;
}

/* =========================================================
   HOVERS THAT AREN'T translateY(-2px) + shadow
   ========================================================= */

/* a rule that wipes in under a link */
.gzE-wipe {
  position: relative;
  display: inline-block;
}

.gzE-wipe::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 480ms var(--ease-out);
}

.gzE-wipe:hover::after,
a:hover > .gzE-wipe::after { transform: scaleX(1); }

/* an image that desaturates until you want it */
.gzE-wake img {
  filter: saturate(0.62) contrast(1.02);
  transition: filter 700ms var(--ease-out), transform 900ms var(--ease-out);
}

.gzE-wake:hover img,
a:hover .gzE-wake img {
  filter: saturate(1.05) contrast(1);
  transform: scale(1.035);
}

/* a label that slides its arrow rather than lifting the whole card */
.gzE-go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-ink, #9A6614);
}

.gzE-go::after {
  content: '';
  width: 26px;
  height: 1px;
  background: currentColor;
  transition: width 420ms var(--ease-out);
}

a:hover .gzE-go::after,
.gzE-go:hover::after { width: 48px; }

/* =========================================================
   BUTTONS — squarer, wider tracking, a fill that wipes across
   rather than a colour swap
   ========================================================= */

.gzE-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 34px;
  overflow: hidden;
  border: 1px solid var(--choc-deep, #1C0F06);
  border-radius: 0;
  background: transparent;
  color: var(--choc-deep, #1C0F06);
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 420ms var(--ease-out), border-color 420ms var(--ease-out);
}

.gzE-btn:hover {
color: #fff;
}

/* z-index 0, not -1: at -1 the pseudo sits behind the button's own
   background, which made the wipe invisible on the filled --gold
   variant. At 0 it paints over the background but under the label. */
.gzE-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--choc-deep, #1C0F06);
  transform: translateY(101%);
  transition: transform 520ms var(--ease-out);
}

.gzE-btn > *,
.gzE-btn > svg { position: relative; z-index: 1; }

/* .gzE-btn:hover:not(:disabled) { color: var(--cream, #FAF7F2); } */
.gzE-btn:hover:not(:disabled)::before { transform: none; }

/* same reasoning as .gzE-slab — the label has to survive on the fill */
.gzE-btn--gold {
  border-color: var(--gold, #C8922A);
  background: var(--gold, #C8922A);
  color: var(--choc-deep, #1C0F06);
}

.gzE-btn--gold::before { background: var(--choc-deep, #1C0F06); }

.gzE-btn--onDark {
  border-color: rgba(250, 247, 242, 0.42);
  color: var(--cream, #FAF7F2);
}

.gzE-btn--onDark::before { background: var(--cream, #FAF7F2); }
.gzE-btn--onDark:hover { color: var(--choc-deep, #1C0F06); border-color: var(--cream, #FAF7F2); }

.gzE-btn svg { width: 14px; height: 14px; fill: currentColor; }
.gzE-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* =========================================================
   A DIVIDER THAT ISN'T A 1px LINE
   A running strip of wide caps between sections, borrowed from the
   homepage marquee but used structurally.
   ========================================================= */

.gzE-strip {
  position: relative;
  overflow: hidden;
  padding-block: 18px;
  border-block: 1px solid var(--rule-firm);
  background: var(--cream-dark, #F0E8DC);
}

.gzE-strip__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: gzEMarch 42s linear infinite;
}

.gzE-strip:hover .gzE-strip__track { animation-play-state: paused; }

.gzE-strip__track span {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  font-family: var(--font-struct);
  font-stretch: semi-expanded;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted, #7A5C45);
  white-space: nowrap;
}

.gzE-strip__track span::after {
  content: '';
  display: none;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #392d17;
  flex-shrink: 0;
}

.gzE-strip--dark {
  background: var(--choc-deep, #1C0F06);
  border-block-color: var(--rule-dark);
}

.gzE-strip--dark .gzE-strip__track span { color: rgba(250, 247, 242, 0.55); }

@keyframes gzEMarch {
  to { transform: translateX(-50%); }
}

/* =========================================================
   DE-BOXING
   Applied per page, but these are the shapes it takes: a card with
   a rule on one edge instead of four, and a plate that carries its
   number in the corner.
   ========================================================= */

.gzE-card {
  position: relative;
  border: none;
  border-top: 0px solid var(--rule-firm);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 26px 0 34px;
  transition: none;
}

.gzE-card::after {
  content: '';
  position: absolute;
  left: 0; top: -1px;
  width: 0; height: 1px;
  background: var(--gold, #C8922A);
  transition: width 600ms var(--ease-out);
}

.gzE-card:hover::after { width: 100%; }
.gzE-card:hover { transform: none; box-shadow: none; }

.gzE-card__n {
  font-family: var(--font-struct);
  font-stretch: condensed;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--gold-ink, #9A6614);
  font-feature-settings: 'tnum' 1;
  display: block;
  margin-bottom: 14px;
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .gzE-strip__track { animation: none; }
  .gzE-mark::before { transform: scaleX(1); transition: none; }
  .gzE-btn::before,
  .gzE-wipe::after,
  .gzE-card::after,
  .gzE-wake img { transition: none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  .gzE-stagger > *:nth-child(2),
  .gzE-stagger > *:nth-child(3) { margin-left: 0; }
  .gzE-rail { grid-template-columns: auto 1fr; gap: 12px; }
  .gzE-rail__end { display: none; }
  .gzE-pull { margin-top: -28px; }
  .gzE-vlabel { display: none; }
  .gzE-runoff { white-space: normal; }
  .gzE-btn { padding: 15px 24px; letter-spacing: 0.2em; }
}