/* ============================================================
       CSS VARIABLE SYSTEM — aligned with approved Cakes page
       ============================================================ */:root {
      /* ─── Palette ─── */
      --cream:       #FAF7F2;
      --cream-dark:  #F0E8DC;
      --tan:         #D4C5B3;
      --choc:        #2D2D2D;
      --choc-deep:   #1C0F06;
      --gold:        #C8922A;
      --gold-light:  #E8C97A;
      --gold-glow:   rgba(200, 146, 42, 0.22);
      --text:        #2A1608;
      --text-muted:  #7A5C45;
      /* ─── Page-specific tokens (no Glayze equivalent) ─── */
      --border:   #E8DDD0;
      --overlay:  rgba(20, 15, 10, 0.68);
      --nav-bg:   rgba(250, 247, 242, 0.92);

      --space-xs:  8px;
      --space-sm:  16px;
      --space-md:  32px;
      --space-lg:  64px;
      --space-xl:  200px;
      --space-2xl: 200px;

      /* Radii are gone from the vocabulary. Rounded cards and pill chips
         were the single loudest template tell on this page — every box
         had a 16px corner and a shadow. Squared off, everything reads as
         printed matter instead of as a UI kit. */
      --radius-btn:  0;
      --transition:  300ms ease;

      --font-display: "Cormorant Garamond", Georgia, serif;
      --font-body:    "DM Sans", system-ui, sans-serif;
      --fs-hero:    clamp(48px, 8vw, 120px);
      /* --fs-section is gone with .display-title. Headline scale is now set
         per section, because the treatment alternates down the page. */
      --fs-body:    16px;
      --lh-body:    1.7;
    }/* ============================================================
       RESET & BASE
       ============================================================ */*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }/* No `scroll-behavior: smooth` here on purpose — the browser's native
       smooth scroll fights Lenis and produces jerky scrolling. The Glayze
       homepage has the same rule commented out for exactly this reason. */body {
      background-color: var(--cream);
      color: var(--text);
      font-family: var(--font-body);
      font-size: var(--fs-body);
      line-height: var(--lh-body);
      font-weight: 300;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }img { display: block; width: 100%; height: 100%; object-fit: cover; }a { text-decoration: none; color: inherit; }ul { list-style: none; }/* ─── SCROLLBAR ── */::-webkit-scrollbar { width: 6px; }::-webkit-scrollbar-track { background: var(--cream-dark); }::-webkit-scrollbar-thumb { background: var(--tan); border-radius: 3px; }/* ============================================================
       UTILITY
       ============================================================ */.lgContainer { max-width: 1800px; }/* Wider gutters than before, so .gzE-rail--hang has somewhere to hang
       its rule. Matches the coffee and contact pages. */.container {
      max-width: 1650px;
      margin: 0 auto;
      padding: 0 clamp(24px, 4vw, 90px);
    }/* The hang in editorial.css assumes a 90px gutter. Cap it to what this
       page's gutter can actually absorb, or the rule falls outside the
       section — which has overflow:hidden and would clip it. */@media (min-width: 1200px) {
      .container > .gzE-rail--hang,
      .amenities-header .gzE-rail--hang,
      .fuel-header .gzE-rail--hang,
      .timeline-header .gzE-rail--hang,
      .zonesIntro .gzE-rail--hang { margin-left: calc(-1 * clamp(20px, 2.6vw, 60px)); }
    }/* .section-label and .display-title are gone. Every section on this
       page used to open with the same three-part stack — gold eyebrow with
       a little rule, big Cormorant headline, muted lead paragraph. That
       repetition was the tell. Sections now open with a numbered
       .gzE-rail and the headline treatment alternates between
       .gzE-wide and .gzE-mega down the page. */.body-text {
      font-family: var(--font-body);
      font-size: 15px;
      color: var(--text-muted);
      line-height: 1.75;
    }/* ─── BUTTONS ──
       .btn-gold and .btn-outline are removed. Both were the same shape
       with a translateY(-2px) hover, and neither was used in the markup
       any more. Every button on the page is now .gzE-btn, whose fill
       wipes up from the bottom edge behind the label. *//* NAVIGATION — moved to shared/glayze.css (see shared/glayze.js) *//* ============================================================
       SECTION 1 — HERO  (stays dark — photo backdrop)
       ============================================================ */#hero {
      position: relative;
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }.hero-bg {
      position: absolute;
      inset: 0;
      
      background-image:
        radial-gradient(ellipse 80% 60% at 60% 40%, rgba(120,80,40,0.45) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 20% 70%, rgba(90,55,25,0.5) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(70,45,20,0.4) 0%, transparent 60%);
      will-change: transform;
    }.hero-bg::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle 120px at 72% 22%, rgba(200,146,42,0.18) 0%, transparent 70%),
        radial-gradient(circle 80px at 18% 35%,  rgba(200,146,42,0.12) 0%, transparent 70%),
        radial-gradient(circle 200px at 50% 80%, rgba(92,74,58,0.6)    0%, transparent 70%);
    }.hero-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--overlay);
      background-image: linear-gradient(to bottom, rgba(20,15,10,0.3) 0%, rgba(20,15,10,0.5) 50%, rgba(20,15,10,0.85) 100%);
    }.hero-content {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: var(--space-lg) var(--space-md);
      max-width: 900px;
      width: 100%;
    }.hero-eyebrow {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: var(--space-sm);
      opacity: 0;
      white-space: nowrap;
      overflow: hidden;
    }.hero-headline {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: var(--fs-hero);
      line-height: 1.05;
      color: var(--cream);
      margin-bottom: var(--space-sm);
      opacity: 0;
    }.hero-subline {
      font-family: var(--font-body);
      font-size: clamp(16px, 2vw, 22px);
      font-weight: 300;
      color: var(--tan);
      margin-bottom: var(--space-md);
      opacity: 0;
      transform: translateY(20px);
    }.hero-cta { opacity: 0; transform: translateY(20px); }.hero-stats {
      position: absolute;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: flex;
      gap: var(--space-lg);
      opacity: 0;
      animation: fadeIn 0.8s ease 1.6s forwards;
    }.hero-stat { text-align: center; }.hero-stat-num {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 400;
      color: var(--gold);
      line-height: 1;
    }.hero-stat-label {
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(250,247,242,0.6);
      margin-top: 4px;
    }.hero-scroll-cue {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      opacity: 0;
      animation: scrollCueFade 1s ease 1.8s forwards;
      transition: opacity 0.4s ease;
    }.hero-scroll-cue span {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--tan);
    }.scroll-line {
      width: 1px;
      height: 48px;
      background: linear-gradient(to bottom, var(--gold), transparent);
      animation: scrollLinePulse 2s ease-in-out 2s infinite;
    }@keyframes scrollCueFade { to { opacity: 1; } }@keyframes fadeIn { to { opacity: 1; } }@keyframes scrollLinePulse {
      0%, 100% { opacity: 1; transform: scaleY(1); }
      50%       { opacity: 0.4; transform: scaleY(0.8); }
    }/* ============================================================
       SECTION 2 — THREE PILLARS
       ============================================================ */#pillars {
      position: relative;
      background: var(--cream);
      border-top: 1px solid rgba(200,146,42,0.15);
    }/* the headline: wide Archivo caps with one ink slab. The slab is the
       only solid block of colour in this section — gold is a rule and a
       figure everywhere else. */.pillarsTitle {
      color: var(--text);
      font-size: clamp(28px, 5.4vw, 84px);
      margin-bottom: clamp(40px, 6vh, 84px);
    }/* three plates, offset from each other by the gzE-drop utilities so
       the row is not a level grid of boxes */.pillars-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(24px, 3.2vw, 56px);
      align-items: start;
    }.pillar {
      opacity: 1;
      will-change: transform;
    }/* .gzE-card__n carries the type; this only sets the gap under it */.pillar-title {
      font-family: var(--font-display);
      font-size: clamp(24px, 2.7vw, 40px);
      font-weight: 300;
      color: var(--text);
      line-height: 1.14;
      margin-bottom: 14px;
    }.pillar-body {
      font-family: var(--font-body);
      font-size: 15px;
      color: var(--text-muted);
      line-height: 1.72;
      max-width: 34ch;
    }/* ============================================================
       SECTION 3 — SPLIT PANELS (ZONES)
       ============================================================ */#zones { overflow: hidden; }/* the numbered rail + one oversized Cormorant line, then straight into
       the panels. No lead paragraph. */.zonesIntro { padding-bottom: clamp(24px, 4vh, 52px); }.zonesTitle {
      color: var(--text);
      font-size: clamp(38px, 7.4vw, 128px);
    }.zonesTitle em { font-style: italic; color: var(--text-muted); }.zone-panel {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 60vh;
    }.zone-panel.reversed { direction: rtl; }.zone-panel.reversed > * { direction: ltr; }.zone-image {
      position: relative;
      overflow: hidden;
      min-height: 480px;
      will-change: clip-path;
      -webkit-clip-path: inset(0);
      clip-path: inset(0);
    }.zone-image .img-ph {
      position: absolute;
      inset: 0;
      will-change: transform;
      transform-origin: center center;
    }.zone-image-a {
      /* The Focus Corner - solo desks, natural light */
      background-image:
        radial-gradient(ellipse 60% 80% at 30% 20%, rgba(200,146,42,0.20) 0%, transparent 62%),
        linear-gradient(150deg, rgba(28,15,6,0.42) 0%, rgba(28,15,6,0.16) 45%, rgba(28,15,6,0.55) 100%),
        url("images/zone-focus.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }.zone-image-b {
      /* The Collab Nook - longer tables for teams */
      background-image:
        linear-gradient(150deg, rgba(28,15,6,0.42) 0%, rgba(28,15,6,0.16) 45%, rgba(28,15,6,0.55) 100%),
        url("images/zone-collab.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }.zone-image-c {
      /* The Lounge - sofas and low tables */
      background-image:
        linear-gradient(150deg, rgba(28,15,6,0.42) 0%, rgba(28,15,6,0.16) 45%, rgba(28,15,6,0.55) 100%),
        url("images/zone-lounge.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }.zone-image-inner {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.12;
    }.zone-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: var(--space-xl) var(--space-lg);
      overflow: hidden;
      will-change: transform;
    }/* dark-bg zones become cream-dark on light theme.
       These win over .gzE-card's transparent background because the page
       sheet loads after editorial.css — which is the point of that order. */.zone-content.dark-bg {
      background: var(--cream-dark);
      color: var(--text);
    }.zone-content.dark-bg .body-text    { color: var(--text-muted); }.zone-content.cream-bg {
      background: var(--cream);
      color: var(--text);
    }.zone-content.cream-bg .body-text    { color: var(--text-muted); }.zone-content .body-text { max-width: 40ch; }/* the icon stays, but quietly — six gold line icons at full strength
       across the page was gold used as decoration at one intensity */.zone-icon { margin-bottom: 20px; opacity: 0.4; }/* Zone A / B / C is a plate label now, not a gold eyebrow with a rule */.zoneTag { margin-bottom: 16px; }.zone-title {
      font-family: var(--font-display);
      font-size: clamp(26px, 3.2vw, 44px);
      font-weight: 300;
      line-height: 1.12;
      color: var(--text);
      margin-bottom: 14px;
    }/* was gold italic. Gold on this page is now a rule or a figure. */.zone-tagline {
      font-family: var(--font-display);
      font-style: italic;
      font-size: clamp(17px, 1.9vw, 24px);
      color: var(--text);
      margin-bottom: 18px;
      line-height: 1.4;
      max-width: 30ch;
    }/* ============================================================
       SECTION 4 — STARLINK  (kept dark as accent section)
       ============================================================ *//* The one big moment on the page — .gzE-cathedral gives it the tallest
       padding of any section, and it is the only section still centred.
       Centring one section on purpose reads differently from centring
       all of them by default. */#starlink {
      background: var(--choc-deep);
      text-align: center;
      position: relative;
      overflow: hidden;
    }#starlink::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(200,146,42,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(20,15,10,0.4) 0%, transparent 100%);
      pointer-events: none;
      z-index: 0;
    }.starlink-inner {
      position: relative;
      z-index: 2;
      max-width: 745px;
      margin: 0 auto;
      padding: 0 var(--space-md);
    }.starlink-svg-wrap {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      z-index: 1;
    }.starlink-svg-wrap svg { width: min(680px, 95vw); height: min(680px, 95vw); }/* .gzE-wide: light Archivo stretched wide and tracked out in caps.
       Was Cormorant italic, which is the same voice as every other
       headline on the site. The per-character stagger still runs. */.starlink-headline {
      font-size: clamp(28px, 5.2vw, 74px);
      color: var(--cream);
      margin-bottom: clamp(20px, 3vh, 34px);
      will-change: transform;
    }.starlink-subline {
      font-family: var(--font-display);
      font-size: clamp(18px, 1.9vw, 26px);
      font-weight: 300;
      color: rgba(250, 247, 242, 0.7);
      line-height: 1.5;
      max-width: 44ch;
      margin: 0 auto var(--space-lg);
    }/* the three figures as ruled rows (.gzE-data--dark), not three boxes
       with hairline dividers between them */.starlink-stats {
      max-width: 560px;
      margin: clamp(26px, 4vh, 48px) auto 0;
      text-align: left;
      opacity: 0;   /* start state; the reveal in the page JS clears it */
    }.starlink-stat-num {
      display: block;
      font-family: var(--font-struct);
      font-stretch: condensed;
      font-weight: 300;
      font-size: clamp(30px, 3.4vw, 46px);
      line-height: 1;
      letter-spacing: -0.02em;
      color: var(--cream);
      font-feature-settings: "tnum" 1;
    }.starlink-stat-unit {
      font-size: 0.32em;
      letter-spacing: 0.1em;
      color: var(--gold-light);
      margin-left: 3px;
    }/* ============================================================
       SECTION 5 — TIMELINE
       ============================================================ *//* overflow has to be visible here so the .gzE-pull plate below can
       ride up over the dark Starlink section. Nothing in this section
       uses .slideRight's 35px start letter-spacing, so there is nothing
       left to clip. */#timeline {
      background: var(--cream-dark);
      color: var(--text);
      overflow: visible;
    }/* the header is a cream plate pushed up into the section above it —
       the page stops being a stack of separate coloured bands */
       .timeline-header {
      margin-left: auto;
      margin-right: auto;
      text-align: left;
      background: var(--cream-dark);
      max-width: 940px;
      padding: clamp(28px, 3.6vw, 54px) clamp(24px, 3.4vw, 60px) clamp(24px, 3vw, 44px);
      margin-bottom: clamp(34px, 5vh, 66px);
    }.timelineTitle {
      color: var(--text);
      font-size: clamp(32px, 5.2vw, 80px);
    }.timelineTitle em { font-style: italic; color: var(--text-muted); }/* left-aligned under the plate above it, not centred in the container.
       Everything on the page now hangs off the same left edge except the
       one section that is centred on purpose. */.timeline-inner {
      max-width: 640px;
      margin: 0 auto;;
      padding: 0 var(--space-md);
      position: relative;
    }.timeline-svg-wrap {
      position: absolute;
      left: calc(var(--space-md) + 40px);
      top: 0; bottom: 0;
      width: 2px;
      pointer-events: none;
    }.timeline-svg { width: 2px; height: 100%; }.timeline-entries { padding-left: 80px; }.timeline-entry {
      position: relative;
      padding-bottom: var(--space-lg);
      will-change: transform, opacity;
      border-left: 2px solid transparent;
      padding-left: 12px;
      transition: border-left-color 0.5s ease;
    }.timeline-entry:last-child { padding-bottom: 0; }.timeline-dot {
      position: absolute;
      left: -46px; top: 6px;
      width: 12px; height: 12px;
      border-radius: 50%;
      background: var(--gold);
      transform: scale(0);
      will-change: transform, opacity;
    }/* Archivo, muted. The gold marker dot beside it is enough gold. */.timeline-time {
      font-family: var(--font-struct);
      font-stretch: semi-expanded;
      font-size: 10.5px; font-weight: 500;
      letter-spacing: 0.28em; text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 10px;
      font-feature-settings: "tnum" 1;
    }.timeline-copy {
      font-family: var(--font-display);
      font-size: clamp(18px, 1.6vw, 25px);
      font-weight: 400;
      color: var(--text);
      line-height: 1.4;
      margin-bottom: 8px;
    }/* was a row of gold-tinted pill chips with 1px borders. Now they are
       ruled docket lines — no fill, no border, no radius. */.timeline-food {
      display: flex;
      flex-wrap: wrap;
      gap: 0 22px;
      font-family: var(--font-struct);
      font-stretch: normal;
      font-weight: 400;
      font-size: 10.5px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-muted);
    }.timeline-food span {
      display: inline-block;
      padding: 7px 0;
      border-bottom: 1px solid var(--rule);
      font-feature-settings: "tnum" 1;
    }/* ============================================================
       SECTION 6 — AMENITIES
       ============================================================ */#amenities {
      position: relative;   /* anchors the .gzE-vlabel on the right edge */
      background: var(--tan);
    }.amenities-header { text-align: left; margin-bottom: clamp(40px, 6vh, 78px); }.amenitiesTitle {
      color: var(--text);
      font-size: clamp(23px, 4vw, 58px);
    }/* the six cards are plates with a rule on the top edge only. The
       cream fill, the 16px radius, the 1px border and the 24px drop
       shadow are all gone — that combination was the box. */.amenities-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(22px, 2.6vw, 46px) clamp(26px, 3.4vw, 64px);
      align-items: start;
    }.amenity-card {
      will-change: transform, opacity;
      cursor: default;
    }/* the icons stay in the markup but out of sight — six identical gold
       line icons was decoration standing in for hierarchy */.amenity-icon { display: none; }.amenity-name {
      font-family: var(--font-display);
      font-weight: 300;
      font-size: clamp(21px, 2.2vw, 30px);
      color: var(--text);
      margin-bottom: 10px;
    }.amenity-desc {
      font-family: var(--font-body);
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.62;
      max-width: 34ch;
    }/* ============================================================
       SECTION 7 — MENU FUEL CROSS-SELL
       ============================================================ */#fuel { background: var(--cream); }.fuel-header { text-align: left; margin-bottom: clamp(40px, 6vh, 78px); }.fuel-headline {
      color: var(--text);
      font-size: clamp(36px, 6.2vw, 104px);
    }.fuel-headline em { font-style: italic; color: var(--text-muted); }/* two plates, the second dropped so the pair is not level */.fuel-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(30px, 4vw, 72px);
      align-items: start;
    }.fuel-card {
      cursor: pointer;
      will-change: transform, opacity;
      display: block;
    }.fuel-card-img {
      aspect-ratio: 3/2;
      overflow: hidden;
      position: relative;
      margin-bottom: 24px;
    }.fuel-img-coffee {
      position: absolute; inset: 0;
      /* Flat White */
      background-image:
        linear-gradient(150deg, rgba(28,15,6,0.42) 0%, rgba(28,15,6,0.16) 45%, rgba(28,15,6,0.55) 100%),
        url("images/fuel-coffee-real.webp");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }.fuel-img-cakes {
      position: absolute; inset: 0;
      /* Double Chocolate Cake */
      background-image:
        linear-gradient(150deg, rgba(28,15,6,0.42) 0%, rgba(28,15,6,0.16) 45%, rgba(28,15,6,0.55) 100%),
        url("images/fuel-cake-real.webp");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }.fuel-card-body { padding: 0; }/* .gzE-card__n carries the type — condensed Archivo plate label */.fuel-card-category { margin-bottom: 14px; }.fuel-card-name {
      font-family: var(--font-display);
      font-size: clamp(24px, 2.6vw, 38px);
      font-weight: 300;
      color: var(--text);
      line-height: 1.14;
      margin-bottom: 10px;
    }.fuel-card-desc { font-size: 14.5px; color: var(--text-muted); margin-bottom: 26px; line-height: 1.66; max-width: 36ch; }/* the price list, ruled. .gzE-go handles the explore label — see
       the hover section below. */.fuel-menu-list { margin-bottom: 26px; border-top: 1px solid var(--rule); }.fuel-menu-item {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 18px;
      font-size: 13.5px;
      color: var(--text-muted);
      border-bottom: 1px solid var(--rule);
      padding: 9px 0;
    }.fuel-menu-price {
      color: var(--text);
      font-family: var(--font-struct);
      font-stretch: normal;
      font-size: 11.5px;
      font-weight: 500;
      letter-spacing: 0.1em;
      flex-shrink: 0;
      font-feature-settings: "tnum" 1;
    }/* ============================================================
       SECTION 8 — CTA FOOTER STRIP  (dark closing panel)
       ============================================================ */#cta-footer {
      background: var(--choc-deep);
      border-top: 1px solid rgba(200,146,42,0.15);
    }.cta-inner {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
      gap: clamp(36px, 6vw, 100px);
      align-items: end;
    }.cta-headline {
      font-size: clamp(21px, 3.3vw, 50px);
      color: var(--cream);
      margin-bottom: clamp(24px, 3vh, 40px);
      will-change: transform;
    }.cta-right { display: flex; flex-direction: column; gap: clamp(26px, 3.4vw, 46px); }/* the three practical facts as .gzE-data--dark rows. Was three
       icon-plus-text rows inside a block — the icons were three more gold
       line drawings doing no work the label wasn't already doing. */.cta-info-block dd a { transition: color 300ms var(--ease-out); }.cta-info-block dd a:hover { color: var(--gold-light); }.cta-open-indicator { display: flex; align-items: center; gap: 10px; }.cta-open-dot {
      width: 10px; height: 10px;
      flex-shrink: 0; border-radius: 50%;
      background: #4CAF50;
      animation: openDotPulse 2s ease-in-out infinite;
      will-change: transform, opacity;
    }@keyframes openDotPulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50%       { transform: scale(1.4); opacity: 0.4; }
    }.cta-open-text {
      font-family: var(--font-struct);
      font-stretch: semi-expanded;
      font-size: 10.5px; font-weight: 500;
      letter-spacing: 0.24em; text-transform: uppercase;
      color: #4CAF50;
    }.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }/* SITE FOOTER — moved to shared/glayze.css (see shared/glayze.js) *//* ============================================================
       ANIMATION ADDITIONS
       ============================================================ *//* Scroll progress bar */#scroll-progress {
      position: fixed;
      top: 0; left: 0;
      height: 2px; width: 0%;
      background: var(--gold);
      z-index: 9999;
      transition: width 0.05s linear;
      pointer-events: none;
      opacity: 0.85;
    }/* Hero scan line */#hero-scanline {
      position: absolute;
      left: 0; right: 0;
      height: 1px;
      background: linear-gradient(
        to right,
        transparent 0%,
        rgba(200,146,42,0.15) 20%,
        rgba(200,146,42,0.35) 50%,
        rgba(200,146,42,0.15) 80%,
        transparent 100%
      );
      z-index: 1;
      pointer-events: none;
      top: 0; opacity: 0;
    }/* The animated eyebrow rule is gone with the eyebrow. The rails draw
       themselves instead — see .gzE-rail in shared/editorial.css. *//* ============================================================
       RESPONSIVE — TABLET (768–1200px)
       ============================================================ */@media (max-width: 1200px) {
      .zone-panel { grid-template-columns: 1fr; direction: ltr; }
      .zone-panel.reversed > * { direction: ltr; }
      .zone-panel.reversed .zone-image { order: 2; }
      .zone-panel.reversed .zone-content { order: 1; }
      .zone-image { min-height: 320px; }
      .zone-content { padding: var(--space-lg) var(--space-md); }
      .amenities-grid { grid-template-columns: repeat(2, 1fr); }
      .cta-inner { grid-template-columns: 1fr; gap: var(--space-md); align-items: start; }
      .timeline-header { max-width: none; }
    }/* the .gzE-drop offsets switch off below 1000px, so the multi-column
       grids that relied on them collapse at the same point */@media (max-width: 999px) {
      .pillars-grid { grid-template-columns: 1fr; gap: 0; }
      .amenities-grid { grid-template-columns: 1fr; gap: 0; }
      .fuel-cards { grid-template-columns: 1fr; gap: 0; }
      .timeline-header { padding: 26px 22px 22px; }
    }/* ============================================================
       RESPONSIVE — MOBILE (<768px)
       ============================================================ */@media (max-width: 767px) {
      :root { --space-lg: 48px; --space-xl: 72px; --space-md: 24px; }
      .hero-content { padding: var(--space-md); }
      .hero-headline { font-size: clamp(40px, 10vw, 56px); }
      .hero-stats { display: none; }
      .pillars-grid { grid-template-columns: 1fr; }
      .zone-panel { grid-template-columns: 1fr; direction: ltr; }
      .zone-panel.reversed .zone-image { order: 2; }
      .zone-panel.reversed .zone-content { order: 1; }
      .zone-image { min-height: 240px; }
      .zone-content { padding: var(--space-lg) var(--space-md); }
      .amenities-grid { grid-template-columns: 1fr; }
      .fuel-cards { grid-template-columns: 1fr; }
      .cta-inner { grid-template-columns: 1fr; }
      .cta-actions { flex-direction: column; }
      .cta-actions .gzE-btn { text-align: center; justify-content: center; }
      .timeline-entries { padding-left: 56px; }
      .timeline-svg-wrap { left: calc(var(--space-md) + 16px); }
      .timeline-dot { left: -34px; }
      .timeline-copy { font-size: 18px; }
      .starlink-headline { font-size: clamp(22px, 6.4vw, 40px); }
      .starlink-svg-wrap svg { width: 100%; height: auto; }
    }@media (max-width: 390px) {
      :root { --space-md: 20px; --space-sm: 12px; }
      .hero-headline { font-size: clamp(36px, 11vw, 52px); }
      .zone-content { padding: var(--space-md); }
      .cta-headline { font-size: clamp(17px, 5.4vw, 26px); }
      .gzE-btn { padding: 13px 22px; }
    }/* ============================================================
       REDUCED MOTION
       ============================================================ */@media (prefers-reduced-motion: reduce) {
      #scroll-progress { display: none; }
      #hero-scanline { display: none; }
      * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
      /* the blanket rule above is in a later sheet than editorial.css, so
         restate the editorial layer's own reduced-motion decisions here or
         they lose the !important race */
      .gzE-strip__track { animation: none !important; transform: none !important; }
      .gzE-mark::before  { transform: scaleX(1) !important; }
      .gzE-card::after   { width: 0 !important; }
      .scroll-line { animation: none; }
      .hero-scroll-cue { animation: none; opacity: 1; }
      .cta-open-dot { animation: none; background: #4CAF50; }
      .hero-eyebrow, .hero-headline, .hero-subline, .hero-cta { opacity: 1; transform: none; }
      .pillar { opacity: 1; }
      .timeline-dot { transform: scale(1); }
      .starlink-stats { opacity: 1; }
      html { scroll-behavior: auto; }
    }/* ============================================================
       SHARED REVEAL SYSTEM
       Same data-attribute API as the coffee page, so markup moves
       between pages unchanged. Every hidden start state is gated on
       html.has-anim, which JS removes if GSAP never arrives — so
       content can't be stranded invisible.
       ============================================================ */.splitWord {
      display: inline-block;
      overflow: hidden;
      vertical-align: top;
      padding-bottom: 0.18em;   /* room for descenders and accents */
      margin-bottom: -0.18em;   /* ...without changing line spacing */
    }.splitWord > i {
      display: inline-block;
      font-style: inherit;
      will-change: transform;
    }.has-anim .splitWord > i { transform: translateY(110%); }.has-anim [data-reveal]  { opacity: 0; transform: translateY(26px); will-change: transform, opacity; }@media (prefers-reduced-motion: reduce) {
      .splitWord > i { transform: none !important; }
      [data-reveal]  { opacity: 1 !important; transform: none !important; }
    }/* ============================================================
       HERO — REDESIGN
       Editorial left-aligned layout over a photographic background.
       Appended last so it overrides the earlier hero rules.
       ============================================================ */#hero {
      display: grid;
      grid-template-rows: 1fr auto;
      align-items: stretch;
      justify-content: stretch;
      isolation: isolate;
    }/* --- photographic background, slow Ken Burns push --- */.hero-bg {
      background-image: url("images/hero-work.jpg");
      background-size: cover;
      background-position: 50% 42%;
      background-repeat: no-repeat;
      transform-origin: 55% 45%;
      animation: heroKenBurns 26s ease-in-out infinite alternate;
      z-index: 0;
    }@keyframes heroKenBurns {
      from { transform: scale(1.04); }
      to   { transform: scale(1.14); }
    }/* --- cinematic grade: warm the mids, crush the corners --- */.hero-vignette {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      /* no left/right bands — they framed the photo in dark strips and made
         the grain read as texture panels at both edges */
      background:
        linear-gradient(105deg, rgba(20,11,4,0.86) 0%, rgba(20,11,4,0.52) 38%, rgba(20,11,4,0.18) 72%, rgba(20,11,4,0.34) 100%),
        linear-gradient(to bottom, rgba(20,11,4,0.55) 0%, rgba(20,11,4,0.06) 30%, rgba(20,11,4,0.72) 100%);
    }/* --- fine film grain, keeps large flat areas from banding --- *//* .hero-grain removed — the noise overlay read as texture panels
       down the dark left and right edges of the hero. */@keyframes grainShift {
      0%   { transform: translate(0, 0); }
      20%  { transform: translate(-2%, 1%); }
      40%  { transform: translate(1%, -2%); }
      60%  { transform: translate(-1%, 2%); }
      80%  { transform: translate(2%, -1%); }
      100% { transform: translate(0, 0); }
    }/* --- content: left-aligned editorial column --- */.hero-content {
      grid-row: 1;
      align-self: center;
      position: relative;
      z-index: 4;
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 140px var(--space-md) var(--space-lg);
      text-align: left;
    }/* A structural coordinate line rather than a gold eyebrow — Archivo,
       tracked wide, in the same voice as the rails further down. The
       typewriter animation and its gold cursor rule are untouched, which
       is why the text stays a single text node with no child elements. */.hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 26px;
      white-space: nowrap;
      font-family: var(--font-struct);
      font-stretch: semi-expanded;
      font-weight: 500;
      font-size: 10.5px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: rgba(250, 247, 242, 0.66);
    }.hero-eyebrow::before {
      display: none;
      content: "";
      width: 54px;
      height: 1px;
      background: var(--gold);
      flex-shrink: 0;
    }/* .gzE-mega — type as architecture. Bigger and tighter than before. */.hero-headline {
      font-size: clamp(50px, 9.6vw, 152px);
      line-height: 0.88;
      letter-spacing: -0.032em;
      margin-bottom: 28px;
      max-width: 14ch;
      text-shadow: 0 4px 40px rgba(20, 11, 4, 0.45);
    }.hero-subline {
      font-family: var(--font-display);
      font-size: clamp(19px, 1.8vw, 27px);
      line-height: 1.45;
      color: rgba(250, 247, 242, 0.78);
      max-width: 30ch;
      margin-bottom: 40px;
    }/* --- bottom bar: stats sit on a hairline, left-aligned --- */.hero-footer {
      grid-row: 2;
      position: relative;
      z-index: 4;
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 var(--space-md) 44px;
    }.hero-stats {
      position: static;
      transform: none;
      display: flex;
      gap: 0;
      opacity: 0;
      animation: fadeIn 0.9s ease 1.5s forwards;
      border-top: 1px solid rgba(250, 247, 242, 0.14);
      padding-top: 26px;
    }.hero-stat {
      text-align: left;
      padding: 0 46px;
      border-left: 1px solid rgba(250, 247, 242, 0.14);
    }.hero-stat:first-child { padding-left: 0; border-left: none; }/* Archivo condensed with tabular figures — data, not a headline */.hero-stat-num {
      font-family: var(--font-struct);
      font-stretch: condensed;
      font-weight: 300;
      font-size: clamp(28px, 2.7vw, 42px);
      line-height: 0.9;
      letter-spacing: -0.02em;
      color: var(--cream);
      font-feature-settings: "tnum" 1;
    }.hero-stat-num sup {
      font-size: 0.32em;
      vertical-align: super;
      letter-spacing: 0.1em;
      color: rgba(250, 247, 242, 0.5);
    }/* The WiFi speed is the argument this whole page rests on, so it is
       the one .gzE-figure — and the one place gold appears as a figure
       in the hero. */.hero-stat--lead .hero-stat-num {
      color: var(--gold);
      font-size: clamp(46px, 6.6vw, 112px);
    }.hero-stat--lead .hero-stat-num sup { color: var(--gold-light); }.hero-stat-label {
      font-family: var(--font-struct);
      font-stretch: semi-expanded;
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(250, 247, 242, 0.5);
      margin-top: 10px;
    }/* --- scroll cue: rotated, pinned to the right edge.
           Out of the bottom bar entirely, so no more overlap. --- */.hero-scroll-cue {
      left: auto;
      right: 30px;
      bottom: 50%;
      transform: translateY(50%);
      flex-direction: column;
      gap: 16px;
      z-index: 4;
      opacity: 1;
      animation: none;
    }.hero-scroll-cue span {
      writing-mode: vertical-rl;
      font-size: 10px;
      letter-spacing: 0.42em;
      text-transform: uppercase;
      color: rgba(250, 247, 242, 0.55);
    }.hero-scroll-cue .scroll-line {
      width: 1px;
      height: 74px;
      background: linear-gradient(to bottom, var(--gold), transparent);
      animation: cueTravel 2.4s ease-in-out infinite;
      transform-origin: top center;
    }@keyframes cueTravel {
      0%, 100% { transform: scaleY(0.35); opacity: 0.45; }
      50%      { transform: scaleY(1);    opacity: 1; }
    }@media (max-width: 992px) {
      .hero-content  { padding: 130px var(--space-md) var(--space-md); }
      .hero-headline { max-width: none; }
      .hero-scroll-cue { display: none; }
      .hero-stats  { display: flex; }
      .hero-stat   { padding: 0 22px; }
    }@media (max-width: 600px) {
      .hero-stats     { flex-wrap: wrap; gap: 18px 0; }
      .hero-stat      { flex: 1 0 50%; padding: 0 14px; }
      .hero-stat:nth-child(odd) { padding-left: 0; border-left: none; }
      .hero-footer    { padding-bottom: 30px; }
    }@media (prefers-reduced-motion: reduce) {
      .hero-bg    { animation: none !important; transform: none !important; }
      .hero-scroll-cue .scroll-line { animation: none !important; transform: none !important; }
    }/* =========================================================
       HOMEPAGE REVEAL ARCHITECTURE
       Ported from home-g/style.css. ScrollTrigger adds .active to a
       <section>; CSS transitions do the rest. Start states gated on
       html.has-anim so a failed GSAP load can't hide content.
       ========================================================= */section { overflow: hidden; }/* clips the 35px start letter-spacing */.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; }.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; }@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

       .btnDefault is gone. It was a gold pill that lifted 2px and cast a
       gold shadow on hover — the same hover as every card on the page.
       All four buttons are .gzE-btn now (see shared/editorial.css); the
       label sits in a <span> because the fill wipes up behind it on a
       ::before.
       ========================================================= *//* ---- oversized gold italic locality tag ---- */.floatDuck {
      font-family: var(--font-display);
      font-style: italic;
      font-size: clamp(48px, 6vw, 100px);
      margin: 0;
      color: var(--gold-ink);
      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;
    }.hero-content .floatDuck   { right: 6%; bottom: 8%; }.starlink-inner .floatDuck { right: 4%; top: -40px; }/* ---- three-line counter-rotating marquee ---- */#marquee { padding-block: 0; }.localidades {
      overflow: hidden;
      padding-block: 10px;
    }.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;
      color: var(--text-muted);
    }.localidades li:nth-child(even) { color: var(--gold); }@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 + LOGO INVERSION
       ========================================================= */.bean {
      position: absolute;
      pointer-events: none;
      z-index: 0;
      opacity: 0.32;
    }#pillars   .bean1 { left: -70px;  top: 80px;     width: 190px; }#starlink  .bean2 { right: -50px; bottom: 60px;  width: 200px; opacity: 0.22; }#amenities .bean3 { left: 60px; top: 140px; width: 315px; object-fit: contain;}#amenities .bean4 { right: 10px; bottom: 100px; object-fit: contain; width: 150px; }#fuel      .bean5 { left: -50px;  bottom: 40px;  width: 180px; }#pillars .container,
    #amenities .container,
    #fuel .container,
    #starlink .container { position: relative; z-index: 2; }/* triple-gradient veil over the dark sections */.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.26) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 20% 70%, rgba(90, 55, 25, 0.30) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(70, 45, 20, 0.24) 0%, transparent 60%);
    }/* =========================================================
       EDITORIAL PASS — de-boxing, asymmetry, varied interaction

       This block used to contain the page's own attempt at asymmetry,
       written on top of the boxed layout rather than instead of it. The
       boxes are gone now — .pillar, .amenity-card, .fuel-card and
       .zone-content all carry .gzE-card, which is a single rule on the
       top edge and nothing else. What is left here is what .gzE-card
       cannot know: which cards sit where, and which of them drops.
       ========================================================= *//* ---- amenities: the first card is the feature, and the rest are
            offset by .gzE-drop-s in the markup so the rows aren't level ---- */.amenity-card:nth-child(1) {
      grid-column: 1 / -1;
      padding-bottom: 44px;
    }.amenity-card:nth-child(1) .amenity-name { font-size: clamp(28px, 3.6vw, 52px); }.amenity-card:nth-child(1) .amenity-desc { max-width: 54ch; font-size: 17px; }/* ---- zones: vary the split per panel instead of a uniform 50/50 ----

       :nth-of-type counts among siblings of the same ELEMENT, and the
       first <div> inside #zones is .container.zonesIntro, not a panel. So
       nth-of-type(1) matched the intro, panels one and two picked up the
       wrong splits and panel three picked up none at all. The three
       panels are children 2, 3 and 4.

       Wrapped in min-width so the `grid-template-columns: 1fr` in the
       max-width:1200px block above actually wins below that breakpoint —
       these two-class selectors outrank its single class regardless of
       source order, which was leaving two of the three panels
       side-by-side down to 993px. */@media (min-width: 1201px) {
      .zone-panel:nth-of-type(2) { grid-template-columns: 58% 42%; }
      .zone-panel:nth-of-type(3) { grid-template-columns: 44% 56%; }
      .zone-panel:nth-of-type(4) { grid-template-columns: 66% 34%; }
    }/* ---- hero stats: one dominant, not three equal ---- */.hero-stat--lead { padding-right: 70px; }/* ---- staggered second line, the homepage signature ---- */.amenitiesTitle .lineB { display: block; margin-left: clamp(20px, 11vw, 180px); }/* ---- varied hover response --------------------------------------
       Four different answers, one per component, and not one of them is
       translateY(-2px) plus a shadow:
         .gzE-card  wipes a gold rule along its own top edge
         .gzE-wake  brings a desaturated image back up to full colour
         .gzE-go    extends its own rule to the right
         .gzE-btn   fills upward from the bottom edge
       ------------------------------------------------------------------ *//* .gzE-wake in editorial.css is written for <img>. Both the zone
       panels and the two fuel images are background-image divs instead,
       so the same desaturate-until-wanted rule is restated for them.
       Only `filter` is touched: `transform` on these elements belongs to
       the scroll-scrubbed zoom in the page JS, and fighting it would
       make the panels jitter. */.gzE-wake .img-ph,
    .gzE-wake .fuel-img-coffee,
    .gzE-wake .fuel-img-cakes {
      filter: saturate(0.62) contrast(1.02);
      transition: filter 700ms var(--ease-out);
    }.zone-panel:hover .gzE-wake .img-ph,
    .gzE-wake:hover .img-ph,
    a:hover .gzE-wake .fuel-img-coffee,
    a:hover .gzE-wake .fuel-img-cakes {
      filter: saturate(1.05) contrast(1);
    }/* the amenity name still shifts — a spring on one axis, no lift and
       no shadow. The gold colour swap is gone; the card's own top rule
       is the gold. */.amenity-card .amenity-name { transition: transform 380ms cubic-bezier(0.34,1.56,0.64,1); }.amenity-card:hover .amenity-name { transform: translateX(10px); }/* .gzE-go carries the type and the extending rule; this just spaces it */.fuel-card-link { margin-top: 2px; }/* the ink slab keeps its own inner spacing on a caps headline */.pillarsTitle .gzE-ink { padding: 0.02em 0.3em 0.1em; }/* .gzE-card's top rule is ink-coloured, which is nearly invisible on
       the dark closing panel and inside the dark zone content */.zone-content.dark-bg.gzE-card { border-top-color: var(--rule-firm); }/* Slightly gentler than the default .gzE-pull. The plate has to land
       inside the bottom padding of the Starlink section above it — at a
       wide but short viewport the stock -140px would clip its figures. */.timeline-header.gzE-pull { margin-top: clamp(-110px, -7vw, -40px); }/* the speed trace is allowed out past the 820px measure */.speedTrace.gzE-bleed {
      max-width: none;
      margin-inline: calc(-1 * var(--bleed));
    }/* .gzE-btn--gold paints its own opaque fill, which sits in front of
       the ::before wipe (that runs at z-index:-1). Transition the gold
       variant's own background instead, so it still answers a hover. */.gzE-btn--gold {
      transition: color 420ms var(--ease-out),
                  border-color 420ms var(--ease-out),
                  background-color 420ms var(--ease-out);
    }.gzE-btn--gold:hover:not(:disabled) {
      background-color: var(--choc-deep);
      border-color: var(--choc-deep);
    }/* ---- motion hierarchy: the hero owns the drama.
            Pillar and amenity headings arrive quietly.      ---- */.pillar-title.slideRight,
    .amenitiesTitle.slideRight,
    .zone-title.slideRight {
      letter-spacing: normal !important;
      transform: none !important;
      transition: opacity 900ms ease, transform 900ms cubic-bezier(0.22,0.61,0.36,1) !important;
    }.has-anim .pillar-title.slideRight,
    .has-anim .amenitiesTitle.slideRight,
    .has-anim .zone-title.slideRight { opacity: 0; transform: translateY(20px) !important; }.has-anim section.active .pillar-title.slideRight,
    .has-anim section.active .amenitiesTitle.slideRight,
    .has-anim section.active .zone-title.slideRight { opacity: 1; transform: none !important; }@media (max-width: 992px) {
      .amenity-card:nth-child(1) { padding-bottom: 30px; }
      /* the varied splits are now behind min-width: 1201px, so nothing
         needs unsetting here */
      .amenitiesTitle .lineB { margin-left: 20px; }
      .hero-stat--lead { padding-right: 22px; }
    }/* =========================================================
       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; }
    }/* declared so no class in the markup is unstyled */.cta-left { position: relative; }/* =========================================================
       AMENITIES — INK FOR THE TAN GROUND

       #amenities is the one section on --tan (#D4C5B3), which is a lot
       darker than cream. --text-muted was picked to sit on cream, where
       it is 5.71:1; on tan it drops to 3.61:1, and .amenity-desc is
       14px body copy — the largest block of running text on the page.
       The rail label is 11px and lands in the same place, and
       .gzE-rail__end compounds it with opacity 0.65.

       Same hue, darker, scoped to this section only so the cream
       sections keep the lighter muted tone: 5.34:1 at full opacity.
       ========================================================= */#amenities .amenity-desc,
    #amenities .gzE-rail__t { color: #5C4432; }#amenities .gzE-rail__end { color: #5C4432; opacity: 1; }/* NOTE: .starlink-ring are SVG <circle> elements animated by the page's
       own JS — they must NOT be given layout or transform rules here. *//* =========================================================
       LIVE SPEED TRACE  (IDEAS-INVENTORY idea 6)
       The 200+ Mbps claim drawn as a measured trace rather than
       printed as a number. Reuses the stroke-dashoffset technique
       already used by the timeline SVG on this page.
       ========================================================= */.speedTrace {
      max-width: 760px;
      margin: 0 auto var(--space-lg);
      text-align: left;
    }.speedTraceHead {
      display: flex;
      align-items: flex-end;   /* baseline mis-sits a .gzE-btn (inline-flex) */
      justify-content: center;
      gap: 20px;
      margin-bottom: 14px;
    }/* Archivo condensed with tabular figures — the same voice as the
       .gzE-figure in the hero, because it is doing the same job */.speedTraceReadout {
      font-family: var(--font-struct);
      font-stretch: condensed;
      font-weight: 300;
      font-size: clamp(44px, 6vw, 84px);
      line-height: 1;
      letter-spacing: -0.03em;
      /* --gold-ink is the darkened gold for type on CREAM (4.6:1 there).
         #starlink is --choc-deep, where gold-ink drops to 3.8:1 and reads
         as muddy brown; the brand gold is 6.8:1 on this ground. See the
         two-golds note in shared/editorial.css. */
      color: var(--gold);
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum" 1;
    }.speedTraceReadout em {
      font-family: var(--font-struct);
      font-stretch: semi-expanded;
      font-style: normal;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: rgba(250, 247, 242, 0.5);
      margin-left: 12px;
    }/* was a gold pill. It is a .gzE-btn--onDark now, so all this needs to
       do is keep it from stretching in the flex row. */.speedTraceBtn { flex-shrink: 0; padding: 13px 22px; }.speedTraceSvg {
      display: block;
      width: 100%;
      height: clamp(90px, 12vw, 150px);
      overflow: visible;
    }.speedGrid { stroke: rgba(250, 247, 242, 0.09); stroke-width: 1; }.speedLine {
      fill: none;
      stroke: var(--gold);
      stroke-width: 2;
      stroke-linejoin: round;
      stroke-linecap: round;
      filter: drop-shadow(0 0 10px rgba(200, 146, 42, 0.35));
    }.speedTraceCaption {
      text-align: center;
      font-family: var(--font-body);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      /* was 0.34 alpha, which is 2.96:1 on --choc-deep — under the 4.5
         floor for 11px tracked caps. 0.55 gives 5.85:1 and still reads as
         a caption rather than as body copy. */
      color: rgba(250, 247, 242, 0.55);
      margin-top: 12px;
    }@media (prefers-reduced-motion: reduce) {
      /* show the finished trace and final figure, don't animate */
      .speedLine { stroke-dashoffset: 0 !important; }
    }