@charset "utf-8";
/* ============================================================================
   Elements Group  ·  dinewithelements.com.au
   Built on the Elements Group Design System: white dominant, ink as the
   accent, Voga headings, Agency FB interface, zero radius, gold retired.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. FONTS */
@font-face{
  font-family:"Voga";
  src:url("../fonts/VogaMedium.woff2") format("woff2"),
      url("../fonts/VogaMedium.woff") format("woff");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Agency FB";
  src:url("../fonts/AgencyFB.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}

/* --------------------------------------------------------------- 2. TOKENS */
:root{
  /* ---------------------------------------------------------------------
     Elements Group palette. Cream surfaces, cocoa text, burgundy accent,
     gold as the supporting colour. Components reference the semantic
     aliases and the --accent-* layer, never a named ramp.
     --------------------------------------------------------------------- */
  --cream-100:#FDFAF3; --cream-200:#F6F1E7; --cream-300:#EFE8DA;
  --cream-400:#E4D9C4; --cream-500:#D4C6AC;
  --cocoa-900:#221A19; --cocoa-800:#2E2422; --cocoa-700:#4A423A;
  --cocoa-600:#665C50; --cocoa-500:#6F6557; --cocoa-400:#ABA091; --cocoa-300:#CDC4B4;
  --burgundy-700:#55151F; --burgundy-600:#6E1D2B; --burgundy-500:#8C2839;
  --burgundy-300:#D69AA3; --burgundy-100:#F6E7E9;
  --gold-700:#614917; --gold-600:#806220; --gold-500:#A8842C;
  --gold-400:#C9A227; --gold-300:#DCC694; --gold-100:#F5EFDF;
  --leaf-600:#3F6B43; --leaf-100:#E8F1E7;
  --amber-600:#8A6A2E; --amber-100:#F5EFE2;
  --crimson-600:#9B2C2C; --crimson-100:#F7E6E6;

  /* The only accent tokens a component may reference. */
  --accent-strong:var(--burgundy-700);
  --accent:var(--burgundy-600);
  --accent-mid:var(--burgundy-500);
  --accent-light:var(--burgundy-300);
  --accent-tint:var(--burgundy-100);

  /* Gold, resolved for a light surface. Flips inside .eg-inverse.
     Prices, the star divider, premium flags, rules. Never a CTA fill. */
  --gold:var(--gold-600);
  --gold-fg:var(--cream-100);
  --gold-rule:var(--gold-500);
  --gold-tint:var(--gold-100);

  --surface-page:var(--cream-200);
  --surface-raised:var(--cream-100);
  --surface-sunken:var(--cream-300);
  --surface-card:var(--cream-100);
  --surface-inverse:var(--cocoa-900);
  --surface-inverse-raised:var(--cocoa-800);
  --surface-accent:var(--cream-400);

  --text-heading:var(--cocoa-900);
  --text-body:var(--cocoa-700);
  --text-muted:var(--cocoa-600);
  --text-subtle:var(--cocoa-500);
  --text-accent:var(--accent);
  --text-on-inverse:var(--cream-100);
  --text-on-inverse-muted:var(--cocoa-300);
  --text-on-accent:var(--cream-100);

  --border-hairline:rgba(34,26,25,.10);
  --border-default:rgba(34,26,25,.18);
  --border-strong:var(--cocoa-900);
  --border-accent:var(--accent-mid);
  --border-on-inverse:rgba(255,255,255,.16);

  --link-rest:var(--cocoa-900);
  --link-hover:var(--accent);
  --link-on-inverse:var(--cream-100);
  --link-on-inverse-hover:var(--cream-100);
  --focus-ring:var(--accent);

  --status-success-fg:var(--leaf-600); --status-success-bg:var(--leaf-100);
  --status-warning-fg:var(--amber-600); --status-warning-bg:var(--amber-100);
  --status-error-fg:var(--crimson-600); --status-error-bg:var(--crimson-100);

  --scrim-bottom:linear-gradient(to top,rgba(34,26,25,.88) 0%,rgba(34,26,25,.45) 42%,rgba(34,26,25,0) 100%);
  --scrim-flat:rgba(34,26,25,.55);

  --font-display:"Voga","Bodoni Moda","Didot",Georgia,serif;
  --font-core:"Agency FB","Saira Condensed","Oswald",sans-serif;
  --font-body:"Agency FB","Saira Condensed","Oswald",sans-serif;
  --font-size-lead:1.5rem;    --font-size-body:1.25rem;
  --font-size-small:1.125rem; --font-size-micro:1rem;
  --h1-size:clamp(3rem,1.7rem + 5.2vw,5rem);
  --h2-size:clamp(2.25rem,1.55rem + 2.8vw,3.625rem);
  --h3-size:clamp(1.75rem,1.5rem + 1vw,2.125rem);
  --h4-size:clamp(1.375rem,1.24rem + .55vw,1.75rem);
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --leading-snug:1.15; --leading-heading:1.2; --leading-body:1.7; --leading-loose:1.8;
  --tracking-tightest:-.02em; --tracking-tight:-.01em; --tracking-body:.012em;
  --tracking-wide:.06em; --tracking-wider:.14em; --tracking-widest:.28em;
  --measure-body:70ch; --measure-lead:54ch;

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem;
  --space-20:5rem; --space-24:6rem; --space-32:8rem;
  --container-max:1200px; --container-narrow:920px; --container-text:680px;
  --gutter:clamp(1.25rem,4vw,3rem);
  --section-y-sm:clamp(2.5rem,4vw,3.5rem);
  --section-y:clamp(4rem,7vw,6.5rem);
  --section-y-lg:clamp(5rem,9vw,9rem);
  --section-heading-gap:clamp(2rem,3vw,2.5rem);
  --grid-gap:clamp(1rem,2vw,2rem); --grid-gap-tight:var(--space-2);
  --column-gap:clamp(2.5rem,5vw,4rem);
  --card-padding:var(--space-8); --card-padding-sm:var(--space-5); --card-padding-lg:var(--space-10);
  --field-padding-y:.8125rem; --field-padding-x:var(--space-4);
  --header-height:6rem;
  --promo-bar-height:2.5rem;   /* rulebook: tokens/spacing.css */

  --bw-hair:1px; --bw-rule:2px; --bw-heavy:3px;
  --shadow-sm:0 2px 6px rgba(20,18,15,.07);
  --shadow-md:0 8px 20px rgba(20,18,15,.09);
  --shadow-lg:0 20px 48px rgba(20,18,15,.14);
  --overlay-backdrop:rgba(20,18,15,.72);

  --duration-fast:160ms; --duration-base:240ms; --duration-slow:420ms; --duration-reveal:700ms;
  --ease-standard:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --transition-color:color var(--duration-fast) var(--ease-standard),
                     background-color var(--duration-fast) var(--ease-standard),
                     border-color var(--duration-fast) var(--ease-standard);
}
@media (prefers-reduced-motion:reduce){
  :root{--duration-fast:1ms;--duration-base:1ms;--duration-slow:1ms;--duration-reveal:1ms}
}

/* One dark band per page, plus the footer. */
.eg-inverse{
  --surface-page:var(--cocoa-900); --surface-sunken:var(--cocoa-900);
  --surface-card:var(--cocoa-800); --surface-accent:var(--cocoa-800);
  --text-heading:var(--cream-100); --text-body:var(--cream-300);
  --text-muted:var(--cocoa-300); --text-subtle:var(--cocoa-400); --text-accent:var(--gold-400);
  --border-hairline:rgba(255,255,255,.12); --border-default:rgba(255,255,255,.24);
  --border-strong:var(--cream-100);
  --link-rest:var(--cream-100); --link-hover:var(--cocoa-300);
  --focus-ring:var(--cream-100);
  color:var(--text-body); background:var(--surface-page);
}

/* ---------------------------------------------------------------- 3. RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:9rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;overflow-x:clip}
img,video,svg,iframe{max-width:100%;display:block;border:0}
img,video{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0}
figure{margin:0}
[hidden]{display:none !important}

/* ----------------------------------------------------------------- 4. BASE */
body{
  background:var(--surface-page); color:var(--text-body);
  font-family:var(--font-body); font-size:var(--font-size-body);
  font-weight:var(--weight-regular); line-height:var(--leading-body);
  letter-spacing:var(--tracking-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0 0 var(--space-4);color:var(--text-heading);text-wrap:balance;
  font-family:var(--font-display);font-weight:var(--weight-medium)}
h1{font-size:var(--h1-size);line-height:var(--leading-snug);letter-spacing:var(--tracking-tightest)}
h2{font-size:var(--h2-size);line-height:var(--leading-heading);letter-spacing:var(--tracking-tight)}
h3{font-size:var(--h3-size);line-height:var(--leading-heading);letter-spacing:var(--tracking-tight)}
h4{font-size:var(--h4-size);line-height:var(--leading-heading)}
p{margin:0 0 var(--space-4);max-width:var(--measure-body);text-wrap:pretty}
.eg-lead{font-size:var(--font-size-lead);line-height:var(--leading-loose);color:var(--text-body);max-width:var(--measure-lead)}
small,.eg-meta{font-size:var(--font-size-small);color:var(--text-muted)}
.eg-meta{margin:0 0 var(--space-2)}
strong{font-weight:var(--weight-semibold);color:var(--text-heading)}
hr{border:0;border-top:var(--bw-hair) solid var(--border-hairline);margin:var(--space-10) 0}

a{color:var(--link-rest);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.22em;text-decoration-color:var(--border-default);
  transition:var(--transition-color),text-decoration-color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--link-hover);text-decoration-color:currentColor}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,
input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--focus-ring);outline-offset:3px;text-decoration-color:currentColor}
a.eg-plain{text-decoration:none}
a.eg-plain:hover{text-decoration:underline}
a.eg-link-quiet{text-decoration:none}
a.eg-link-quiet:hover{color:var(--link-hover);text-decoration:underline}
.eg-link-cta{font-family:var(--font-core);font-size:var(--font-size-small);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wider);text-transform:uppercase;text-decoration:none;
  border-bottom:var(--bw-rule) solid var(--border-strong);padding-bottom:2px;
  display:inline-block;align-self:flex-start;color:var(--text-heading)}
a.eg-link-cta:hover{color:var(--link-hover);border-bottom-color:currentColor}
.eg-link-cta--pad{margin-top:var(--space-4)}
::selection{background:var(--cream-400);color:var(--cocoa-900)}
.eg-inverse ::selection{background:var(--cocoa-700);color:var(--cream-100)}

.eg-eyebrow{font-family:var(--font-core);font-size:var(--font-size-micro);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-accent);
  margin:0 0 var(--space-3);display:block}
.eg-eyebrow--flush{margin-bottom:0}
.eg-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--cocoa-900);color:var(--cream-100);
  padding:var(--space-3) var(--space-5);font-family:var(--font-core);text-transform:uppercase;
  letter-spacing:var(--tracking-wider);font-size:var(--font-size-micro);text-decoration:none}
.eg-skip:focus{left:var(--space-4);top:var(--space-4)}
.eg-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------------- 5. LAYOUT */
.eg-container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
.eg-container--narrow{max-width:var(--container-narrow)}
.eg-container--text{max-width:var(--container-text)}
.eg-centred{margin-inline:auto}
.eg-section{padding-block:var(--section-y)}
.eg-section--sm{padding-block:var(--section-y-sm)}
.eg-section--lg{padding-block:var(--section-y-lg)}
.eg-section--tinted{background:var(--surface-sunken)}
.eg-section--ruled{border-top:var(--bw-hair) solid var(--border-hairline)}
.eg-section-head{margin-bottom:var(--section-heading-gap)}
.eg-section-head--center{text-align:center;max-width:var(--container-text);margin-inline:auto}
.eg-section-head--center .eg-lead{margin-inline:auto}
.eg-section-head>:last-child{margin-bottom:0}
.eg-grid{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.eg-grid--2{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}
.eg-grid--3{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.eg-grid--4{grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr))}
.eg-tilegrid{display:grid;gap:var(--grid-gap-tight);grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
.eg-columns{display:grid;gap:var(--column-gap);grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}
.eg-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.eg-row--between{justify-content:space-between;width:100%}
.eg-split{display:grid;gap:var(--column-gap);grid-template-columns:1fr;align-items:start}
@media (min-width:60rem){.eg-split{grid-template-columns:1.05fr .95fr}}
.eg-divider{display:flex;align-items:center;gap:var(--space-4);margin:var(--space-12) 0 0;color:var(--text-subtle)}
.eg-divider::before,.eg-divider::after{content:"";flex:1;height:1px;background:var(--border-hairline)}
.eg-divider span{font-size:.75rem;letter-spacing:.5em;padding-left:.5em}
.eg-note-top{margin-top:var(--space-4)}
.eg-col-h{font-size:1.375rem;margin-bottom:var(--space-4)}

/* --------------------------------------------------------------- 6. BUTTON */
.eg-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-core);font-size:var(--font-size-small);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wider);text-transform:uppercase;text-decoration:none;
  padding:.9375rem var(--space-6);border:var(--bw-hair) solid transparent;border-radius:0;
  cursor:pointer;white-space:nowrap;line-height:1;
  transition:var(--transition-color),transform var(--duration-fast) var(--ease-standard)}
.eg-btn:active{transform:translateY(1px)}
.eg-btn--primary{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}
.eg-btn--primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--text-on-accent)}
.eg-btn--light{background:var(--cream-100);color:var(--cocoa-900);border-color:var(--cream-100)}
.eg-btn--light:hover{background:var(--cream-300);border-color:var(--cream-300);color:var(--cocoa-900)}
.eg-btn--outline{background:transparent;color:var(--text-heading);border-color:var(--border-strong)}
.eg-btn--outline:hover{background:var(--border-strong);color:var(--surface-page)}
.eg-btn--oninverse{color:var(--cream-100);border-color:rgba(255,255,255,.42)}
.eg-btn--oninverse:hover{background:var(--cream-100);color:var(--cocoa-900);border-color:var(--cream-100)}
.eg-btn--sm{padding:.625rem var(--space-4);font-size:var(--font-size-micro)}
.eg-btn--lg{padding:1.125rem var(--space-8);font-size:var(--font-size-body)}
.eg-btn--full{width:100%}
.eg-btnrow{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.eg-btnrow--pad{margin-top:var(--space-10)}
.eg-btnrow--tight{margin-top:var(--space-4)}
.eg-btnrow--stack{flex-direction:column;align-items:flex-start}
.eg-btnrow--stack .eg-btn{width:100%;justify-content:flex-start}

/* --------------------------------------------------- 7. BADGE, TAG, TOKEN */
.eg-badge{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-core);
  font-size:var(--font-size-micro);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wider);
  text-transform:uppercase;padding:.375rem .625rem;line-height:1;
  background:var(--cocoa-900);color:var(--cream-100)}
.eg-badge--outline{background:transparent;color:var(--text-heading);box-shadow:inset 0 0 0 1px var(--border-default)}
.eg-badge--ember{background:var(--accent);color:var(--cream-100)}

/* Venue token. The design system retired every secondary colour, so venues are
   distinguished by a wide-tracked suburb code rather than a swatch. */
.eg-token{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;
  font-family:var(--font-core);font-size:.6875rem;font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wider);text-transform:uppercase;padding:.25rem .4375rem .25rem .5625rem;
  line-height:1;border:1px solid var(--border-strong);color:var(--text-heading);background:transparent}
.eg-token--oninverse{border-color:rgba(255,255,255,.5);color:var(--cream-100)}

.eg-chip{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-core);
  font-size:var(--font-size-micro);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;padding:.5rem .75rem;line-height:1;cursor:pointer;text-decoration:none;
  background:transparent;color:var(--text-body);border:1px solid var(--border-default);
  transition:var(--transition-color);white-space:nowrap}
.eg-chip:hover{border-color:var(--border-strong);color:var(--text-heading)}
.eg-chip[aria-pressed=true],.eg-chip[aria-current=page]{background:var(--cocoa-900);color:var(--cream-100);border-color:var(--cocoa-900)}
.eg-chip--clear{border-color:transparent;text-decoration:underline;text-underline-offset:.2em}
.eg-chiprow{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.eg-chiprow--pad{margin-top:var(--space-3);margin-bottom:var(--space-8)}
.eg-chiprow--scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--space-2);scrollbar-width:thin}
.eg-filterbar{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-end;justify-content:space-between;margin-bottom:var(--space-5)}
.eg-filterbar .eg-chiprow{flex:1}
.eg-count{font-family:var(--font-core);font-size:var(--font-size-micro);letter-spacing:var(--tracking-wider);
  text-transform:uppercase;color:var(--text-muted);margin:0;white-space:nowrap}

/* ----------------------------------------------------------------- 8. CARD */
.eg-card{background:var(--surface-card);border:var(--bw-hair) solid var(--border-hairline);
  padding:var(--card-padding-sm);display:flex;flex-direction:column;gap:var(--space-3)}
.eg-card--sm{padding:var(--space-4)}
.eg-card--lg{padding:var(--card-padding-lg)}
.eg-card--flush{padding:0;gap:0}
.eg-card>:last-child{margin-bottom:0}
.eg-card--oninverse{background:transparent;border-color:rgba(255,255,255,.16)}
.eg-card--link{text-decoration:none;color:inherit;
  transition:border-color var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out)}
.eg-card--link:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:var(--shadow-md);color:inherit}
.eg-inverse .eg-card--link:hover{box-shadow:none}
.eg-card__media{position:relative;overflow:hidden;background:var(--cream-400)}
.eg-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-out)}
.eg-card--link:hover .eg-card__media img{transform:scale(1.04)}
.eg-card__body{padding:var(--card-padding-sm);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.eg-card__h{font-size:1.375rem;margin:0;line-height:1.2}
.eg-card__h2{font-size:1.5rem;margin:0;line-height:1.2}
.eg-card__top{margin-bottom:var(--space-1)}
.eg-card__cta{margin-top:auto;padding-top:var(--space-4)}
.eg-card__body-copy{font-size:var(--font-size-small);margin:0}
.eg-ratio-45{aspect-ratio:4/5}
.eg-ratio-32{aspect-ratio:3/2}
.eg-ratio-11{aspect-ratio:1/1}
.eg-img-45{aspect-ratio:4/5;object-fit:cover;width:100%}
.eg-img-43{aspect-ratio:4/3;object-fit:cover;width:100%}
.eg-img-32{aspect-ratio:3/2;object-fit:cover;width:100%}

/* Deal card on the "on today" bands */
.eg-deal-card__what{font-size:var(--font-size-small);margin:0}
.eg-deal-card__cta{margin-top:auto;padding-top:var(--space-4)}
.eg-band__more{margin-top:var(--space-8)}

/* ---------------------------------------------------------- 9. PROMO + NAV */
/* Universal announcement bar. Not dismissible, present on every page. */
.eg-promo{background:var(--cocoa-900);color:var(--cream-100);position:relative;z-index:60}
.eg-promo--ember{background:var(--accent-strong)}
/* The rulebook sets this strip at --font-size-small. Its bulk came from the
   inherited body leading, which gave every wrapped line 27px of box on a
   phone: three lines and a 116px bar. Snug leading is what makes it compact. */
.eg-promo__in{display:flex;align-items:center;justify-content:center;gap:var(--space-2) var(--space-4);
  min-height:var(--promo-bar-height);padding:.5rem var(--gutter);text-align:center;flex-wrap:wrap;
  font-family:var(--font-core);font-size:var(--font-size-small);line-height:var(--leading-snug);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--cream-100);text-decoration:none;
  transition:background-color var(--duration-fast) var(--ease-standard)}
/* A phone has no hover, so the strip needs an active state or a tap feels
   like nothing happened. The whole bar is the link, not just the words. */
.eg-promo__in:hover{background:rgba(255,255,255,.06);color:var(--cream-100)}
.eg-promo__in:active{background:rgba(255,255,255,.14)}
.eg-promo__cta{font-weight:var(--weight-bold);border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:1px}
.eg-promo__msg--sm{display:none}
/* One line on a phone: the short message, and no separate call to action. */
@media (max-width:47.99em){
  .eg-promo__msg{display:none}
  .eg-promo__msg--sm{display:inline}
  .eg-promo__cta{display:none}
}

.eg-header{position:sticky;top:0;z-index:50;background:var(--cream-100);
  border-bottom:var(--bw-hair) solid var(--border-hairline);
  transition:background-color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard)}
.eg-header__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-4);
  height:var(--header-height);max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
.eg-zL{justify-self:start;display:flex;align-items:center;gap:var(--space-6);min-width:0}
.eg-zC{justify-self:center}
.eg-zR{justify-self:end;display:flex;gap:var(--space-2);align-items:center}
.eg-burger{display:inline-flex;align-items:center;gap:.625rem;background:none;border:0;cursor:pointer;
  font-family:var(--font-core);font-size:var(--font-size-micro);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-heading);padding:.75rem 0}
.eg-burger__bars{width:22px;height:13px;position:relative;display:inline-block;flex:none}
.eg-burger__bars i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform var(--duration-base) var(--ease-out),opacity var(--duration-fast) linear}
.eg-burger__bars i:nth-child(1){top:0}
.eg-burger__bars i:nth-child(2){top:5.75px}
.eg-burger__bars i:nth-child(3){top:11.5px}
.eg-burger[aria-expanded=true] .eg-burger__bars i:nth-child(1){transform:translateY(5.75px) rotate(45deg)}
.eg-burger[aria-expanded=true] .eg-burger__bars i:nth-child(2){opacity:0}
.eg-burger[aria-expanded=true] .eg-burger__bars i:nth-child(3){transform:translateY(-5.75px) rotate(-45deg)}
.eg-header__tel{font-family:var(--font-core);font-size:var(--font-size-micro);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wider);text-transform:uppercase;text-decoration:none;color:var(--text-heading);white-space:nowrap}
.eg-header__tel:hover{color:var(--text-muted)}
.eg-mark{display:block;text-decoration:none;line-height:0}
.eg-mark img{height:48px;width:auto}
.eg-mark__alt{display:none}

/* Second banner. Appears only when the single row cannot carry the actions. */
.eg-header__banner{display:none;border-top:var(--bw-hair) solid var(--border-hairline);background:var(--cream-100)}
.eg-header__banner .eg-container{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);padding-block:.625rem}
.eg-header__acts{display:flex;gap:var(--space-2);align-items:center}

/* Transparent over a hero, a genuine fill on scroll, never a blur. */
.eg-header--over{background:transparent;border-bottom-color:rgba(255,255,255,.22);position:absolute;top:auto;left:0;right:0}
.eg-header--over .eg-burger,.eg-header--over .eg-header__tel{color:var(--cream-100)}
.eg-header--over .eg-mark__main{display:none}
.eg-header--over .eg-mark__alt{display:block}
.eg-header--over .eg-header__banner{background:transparent;border-top-color:rgba(255,255,255,.22)}
.eg-header--over .eg-btn--outline{color:var(--cream-100);border-color:rgba(255,255,255,.55)}
.eg-header--over .eg-btn--outline:hover{background:var(--cream-100);color:var(--cocoa-900);border-color:var(--cream-100)}
.eg-header--over .eg-btn--primary{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}
.eg-header--over .eg-btn--primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--text-on-accent)}
.eg-header--over.is-stuck{position:fixed;top:0;background:var(--cream-100);border-bottom-color:var(--border-hairline)}
.eg-header--over.is-stuck .eg-burger,.eg-header--over.is-stuck .eg-header__tel{color:var(--text-heading)}
.eg-header--over.is-stuck .eg-mark__main{display:block}
.eg-header--over.is-stuck .eg-mark__alt{display:none}
.eg-header--over.is-stuck .eg-header__banner{background:var(--cream-100);border-top-color:var(--border-hairline)}
.eg-header--over.is-stuck .eg-btn--outline{color:var(--text-heading);border-color:var(--border-strong)}
.eg-header--over.is-stuck .eg-btn--outline:hover{background:var(--cocoa-900);color:var(--cream-100);border-color:var(--cocoa-900)}
.eg-header--over.is-stuck .eg-btn--primary{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}
.eg-header--over.is-stuck .eg-btn--primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--text-on-accent)}

/* Phone in the left zone only where there is genuinely room for it. */
@media (max-width:79.99em){ .eg-zL .eg-header__tel{display:none} }
/* Between 768 and 1100 the actions move to the second banner row. */
@media (max-width:68.74em) and (min-width:48em){
  :root{--header-height:5rem}
  .eg-zR{display:none}
  .eg-header__banner{display:block}
  .eg-mark img{height:40px}
}
@media (max-width:47.99em){
  :root{--header-height:4.25rem}
  .eg-zR{display:none}
  .eg-mark img{height:26px}
  .eg-burger__label{display:none}
}

/* -------------------------------------------------------- 10. MENU OVERLAY */
/* Every link is a real anchor in the server rendered HTML, hidden with CSS. */
.eg-overlay{position:fixed;inset:0;z-index:70;background:var(--cream-100);display:flex;flex-direction:column;
  visibility:hidden;opacity:0;transition:opacity var(--duration-base) var(--ease-out),visibility 0s linear var(--duration-base)}
.eg-overlay.is-open{visibility:visible;opacity:1;transition:opacity var(--duration-base) var(--ease-out)}
.eg-overlay__head{flex:none;border-bottom:var(--bw-hair) solid var(--border-hairline)}
.eg-overlay__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding-block:var(--space-10)}
.eg-overlay__cols{display:grid;gap:var(--space-8) var(--column-gap);grid-template-columns:1.1fr 1.25fr 1.05fr .95fr}
.eg-ovcol h2{font-family:var(--font-core);font-size:var(--font-size-micro);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-heading);
  margin:0 0 var(--space-4);padding-bottom:var(--space-3);border-bottom:var(--bw-rule) solid var(--border-strong)}
.eg-ovcol h3{font-family:var(--font-core);font-size:.6875rem;font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-subtle);margin:var(--space-6) 0 var(--space-2)}
.eg-ovcol ul{list-style:none}
.eg-ovcol li a{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);
  text-decoration:none;color:var(--text-body);font-size:var(--font-size-small);padding:.3125rem 0;
  border-bottom:1px solid transparent}
.eg-ovcol li a:hover{color:var(--text-heading);border-bottom-color:var(--border-default)}
.eg-ovcol__s{font-size:var(--font-size-micro);color:var(--text-subtle);white-space:nowrap;
  letter-spacing:var(--tracking-wide);text-transform:uppercase}
.eg-ovvenue{display:flex;gap:var(--space-3);align-items:center;text-decoration:none;padding:var(--space-2) 0;
  border-bottom:var(--bw-hair) solid var(--border-hairline)}
.eg-ovvenue:hover .eg-ovvenue__th img{transform:scale(1.04)}
.eg-ovvenue__th{width:52px;height:62px;flex:none;overflow:hidden;background:var(--cream-400)}
.eg-ovvenue__th img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-out)}
.eg-ovvenue b{display:block;font-family:var(--font-core);font-size:var(--font-size-small);
  font-weight:var(--weight-bold);color:var(--text-heading);line-height:1.25}
.eg-ovvenue span{display:block;font-size:var(--font-size-micro);color:var(--text-muted);line-height:1.45}
.eg-ovvenue span u{text-decoration:none;color:var(--text-heading);font-weight:var(--weight-bold);
  text-transform:uppercase;letter-spacing:var(--tracking-wide)}
.eg-ovpromo{margin-top:var(--space-6);border:var(--bw-hair) solid var(--border-default);padding:var(--space-5)}
.eg-ovpromo b{display:block;font-family:var(--font-display);font-size:1.375rem;color:var(--text-heading);margin-bottom:var(--space-2)}
.eg-ovpromo p{font-size:var(--font-size-micro);color:var(--text-muted);margin-bottom:var(--space-4);line-height:1.5}
.eg-overlay__foot{flex:none;border-top:var(--bw-hair) solid var(--border-hairline);background:var(--surface-sunken)}
.eg-overlay__foot .eg-container{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-8);
  padding-block:var(--space-4);font-size:var(--font-size-micro);color:var(--text-muted);align-items:baseline}
.eg-overlay__foot a{color:var(--text-heading);font-weight:var(--weight-semibold)}
.eg-today{display:inline-block;font-family:var(--font-core);font-size:.625rem;font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;border:1px solid var(--border-strong);
  padding:.125rem .3125rem;margin-left:.375rem;color:var(--text-heading)}
.eg-ovacc__btn{display:none}
@media (max-width:71.99em){.eg-overlay__cols{grid-template-columns:1fr 1fr}}
@media (max-width:47.99em){
  .eg-overlay__cols{grid-template-columns:1fr;gap:0}
  .eg-ovcol{border-bottom:var(--bw-hair) solid var(--border-hairline)}
  .eg-ovcol h2{display:none}
  .eg-ovacc__btn{display:flex;width:100%;align-items:center;justify-content:space-between;
    background:none;border:0;cursor:pointer;padding:var(--space-4) 0;font-family:var(--font-core);
    font-size:var(--font-size-body);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);
    text-transform:uppercase;color:var(--text-heading);text-align:left}
  .eg-ovacc__btn::after{content:"+";font-size:1.25rem;line-height:1;color:var(--text-subtle)}
  .eg-ovacc__btn[aria-expanded=true]::after{content:"\2212"}
  .eg-ovcol__panel{display:none;padding-bottom:var(--space-5)}
  .eg-ovcol__panel.is-open{display:block}
  .eg-overlay__body{padding-block:var(--space-4)}
}

/* --------------------------------------------------------- 11. BOOK PICKER */
.eg-scrim{position:fixed;inset:0;background:var(--overlay-backdrop);z-index:80;
  visibility:hidden;opacity:0;transition:opacity var(--duration-base) var(--ease-out),visibility 0s linear var(--duration-base)}
.eg-scrim.is-open{visibility:visible;opacity:1;transition:opacity var(--duration-base) var(--ease-out)}
.eg-picker{position:fixed;top:0;right:0;bottom:0;width:min(27rem,100%);z-index:85;
  background:var(--cocoa-900);color:var(--cream-100);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform var(--duration-base) var(--ease-out);visibility:hidden}
.eg-picker.is-open{transform:none;visibility:visible}
.eg-picker__head{flex:none;padding:var(--space-6) var(--space-6) var(--space-4);
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4)}
.eg-picker__head h2{color:var(--cream-100);font-size:1.5rem;margin:0;letter-spacing:var(--tracking-tight)}
.eg-picker__x{background:none;border:0;color:rgba(255,255,255,.6);cursor:pointer;font-size:1.375rem;line-height:1;padding:.25rem}
.eg-picker__x:hover{color:var(--cream-100)}
.eg-picker__toggles{flex:none;display:flex;gap:var(--space-2);padding:0 var(--space-6) var(--space-4)}
.eg-picker__toggles .eg-chip{flex:1;justify-content:center;color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.26);white-space:normal;text-align:center}
.eg-picker__toggles .eg-chip[aria-pressed=true]{background:var(--cream-100);color:var(--cocoa-900);border-color:var(--cream-100)}
.eg-picker__list{flex:1;overflow-y:auto;overscroll-behavior:contain}
.eg-picker__acts{padding:var(--space-5) var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.eg-prow{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-4) var(--space-6);
  border-top:1px solid rgba(255,255,255,.10);text-decoration:none;color:inherit;
  transition:background-color var(--duration-fast) var(--ease-standard)}
.eg-prow:hover{background:rgba(255,255,255,.06);color:inherit}
.eg-prow__th{width:52px;height:52px;flex:none;overflow:hidden;background:rgba(255,255,255,.12)}
.eg-prow__th img{width:100%;height:100%;object-fit:cover}
.eg-prow__m{flex:1;min-width:0}
.eg-prow__m b{display:block;font-family:var(--font-core);font-size:var(--font-size-small);font-weight:var(--weight-bold);line-height:1.25}
.eg-prow__m span{display:block;font-size:var(--font-size-micro);color:rgba(255,255,255,.68);line-height:1.45}
.eg-prow__m span u{text-decoration:none;color:var(--cream-100);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-wide)}
.eg-prow__m i{font-style:normal;display:block;font-size:.6875rem;color:rgba(255,255,255,.5);
  text-transform:uppercase;letter-spacing:var(--tracking-wide);margin-top:.125rem}
.eg-picker__foot{flex:none;padding:var(--space-5) var(--space-6);border-top:1px solid rgba(255,255,255,.10);
  font-size:var(--font-size-micro);color:rgba(255,255,255,.62)}
.eg-picker__foot a{color:var(--cream-100);display:block;margin-bottom:var(--space-2);font-weight:var(--weight-semibold)}
.eg-picker__tel{display:inline !important;margin:0 !important}
.eg-picker__note{padding:var(--space-4) var(--space-6) 0;font-size:var(--font-size-micro);color:rgba(255,255,255,.55);max-width:none}
@media (max-width:35.99em){
  .eg-picker{top:auto;width:100%;max-height:88vh;transform:translateY(100%)}
  .eg-picker.is-open{transform:none}
}
body.is-locked{overflow:hidden}

/* ---------------------------------------------------------- 12. BREADCRUMB */
.eg-crumbs{border-bottom:var(--bw-hair) solid var(--border-hairline);background:var(--surface-page)}
.eg-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  padding-block:var(--space-4);font-family:var(--font-core);font-size:var(--font-size-micro);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted)}
.eg-crumbs li{display:flex;align-items:center;gap:.5rem;min-width:0}
.eg-crumbs li+li::before{content:"/";color:var(--text-subtle)}
.eg-crumbs a{color:var(--text-muted);text-decoration:none}
.eg-crumbs a:hover{color:var(--text-heading);text-decoration:underline}
.eg-crumbs [aria-current=page]{color:var(--text-heading);font-weight:var(--weight-bold);min-width:0;overflow-wrap:anywhere}
@media (max-width:47.99em){
  .eg-crumbs li{display:none}
  .eg-crumbs li:nth-last-child(2){display:flex}
  .eg-crumbs li:nth-last-child(2)::before{content:"\2039"}
}

/* ----------------------------------------------------------------- 13. HERO */
.eg-hero{position:relative;background:var(--cocoa-900);color:var(--cream-100);overflow:hidden;isolation:isolate}
.eg-hero__media{position:absolute;inset:0;z-index:0}
.eg-hero__media img,.eg-hero__media video{width:100%;height:100%;object-fit:cover}
.eg-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(34,26,25,.58) 0%,rgba(34,26,25,.26) 26%,rgba(34,26,25,0) 56%),
    var(--scrim-bottom),
    rgba(34,26,25,.24)}
.eg-hero__in{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:var(--hero-h,32rem);padding-block:max(7.5rem,7vw) var(--space-16)}
.eg-hero h1{color:var(--cream-100);margin-bottom:var(--space-5)}

.eg-hero p{color:rgba(255,255,255,.9);max-width:52ch}
.eg-hero--full{--hero-h:min(88vh,50rem)}
.eg-hero--feature,.eg-hero--compact{--hero-h:26rem}
/* The last line of hero copy carries a paragraph margin the layout never
   asked for, so a page with no hero button sits 16px higher than one with. */
.eg-hero__in>*:last-child{margin-bottom:0}
.eg-hero--center .eg-hero__in{align-items:center;text-align:center}
.eg-hero--center p{margin-inline:auto}
/* Hero copy sits in the right half, over the second video. */
.eg-hero--right .eg-hero__in{align-items:flex-end;text-align:right}
.eg-hero--right .eg-hero__actions{justify-content:flex-end}
@media (max-width:47.99em){.eg-hero--right .eg-hero__in{align-items:flex-start;text-align:left}.eg-hero--right .eg-hero__actions{justify-content:flex-start}}
/* Minimum text over video: headline and the two actions, nothing else. */
.eg-hero--minimal .eg-hero__in{gap:0}
.eg-hero--minimal h1{max-width:14ch;margin-bottom:var(--space-8)}
.eg-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.eg-hero--minimal .eg-hero__actions{margin-top:0}
.eg-hero__facts{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);margin-top:var(--space-6);
  font-family:var(--font-core);font-size:var(--font-size-micro);letter-spacing:var(--tracking-wider);
  text-transform:uppercase;color:rgba(255,255,255,.82)}

/* Two videos, half and half on desktop. One on a phone. */
/* Column count follows how many clips are switched on, so one clip fills the
   hero rather than sitting in half of it with a dead panel beside it. */
.eg-hero__split{position:absolute;inset:0;z-index:0;display:grid;
  grid-template-columns:repeat(var(--split-n,2),1fr)}
.eg-hero__split>div{position:relative;overflow:hidden;background:var(--cocoa-800)}
.eg-hero__split>div+div{box-shadow:inset 1px 0 0 rgba(255,255,255,.16)}
.eg-hero__split video,.eg-hero__split img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:47.99em){
  .eg-hero__split{grid-template-columns:1fr}
  .eg-hero__split>div:nth-child(2){display:none}
  .eg-hero--full{--hero-h:min(86vh,38rem)}
  /* The homepage video runs square on a phone. One clip, roughly 1:1,
     so the H1 in the band below is reachable without a scroll. */
  .eg-hero--bare{--hero-h:min(100vw,30rem)}
  .eg-hero--feature,.eg-hero--compact{--hero-h:19rem}
  .eg-hero__in{padding-block:5rem var(--space-10)}
}

.eg-pagehead{border-bottom:var(--bw-hair) solid var(--border-hairline);padding-block:var(--section-y-sm)}
.eg-pagehead h1{margin-bottom:var(--space-4)}
/*  The article hero used to run the full width of the window at 2:1, which on
    a desktop is most of a screen of photograph before a word of the piece.
    It now sits on the text measure at 16:9, so the headline, the image and
    the article share one column and the reading starts above the fold. */
.eg-articlehero{max-width:var(--container-text);margin:var(--space-8) auto 0;
  padding-inline:var(--container-pad)}
.eg-articlehero img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

/* ---------------------------------------------------------- 14. VENUE CARD */
.eg-venue{display:flex;flex-direction:column;background:var(--surface-card);
  border:var(--bw-hair) solid var(--border-hairline);height:100%}
.eg-venue__media{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--cream-400)}
.eg-venue__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-out)}
.eg-venue:hover .eg-venue__media img{transform:scale(1.04)}
.eg-venue__tok{position:absolute;left:0;top:0;z-index:2}
.eg-venue__tok .eg-token{border-color:transparent;background:var(--cocoa-900);color:var(--cream-100)}
.eg-venue__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.eg-venue__brand{font-family:var(--font-display);font-size:1.5rem;line-height:1.15;color:var(--text-heading);margin:0}
.eg-venue__sub{font-family:var(--font-core);font-size:var(--font-size-small);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-heading);margin:0}
.eg-venue__desc{font-size:var(--font-size-small);color:var(--text-muted);margin:0;line-height:1.55}
.eg-venue__meta{font-family:var(--font-core);font-size:var(--font-size-micro);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--text-subtle);margin:0;display:flex;flex-wrap:wrap;gap:.375rem}
.eg-venue__meta .dot{color:var(--border-default)}
.eg-venue__walk{font-family:var(--font-core);font-size:var(--font-size-micro);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--text-heading);margin:0}
.eg-venue__foot{margin-top:auto;padding-top:var(--space-4);display:flex;gap:var(--space-2);flex-wrap:wrap}
.eg-venue__foot .eg-btn{flex:1;min-width:8rem}

/* ------------------------------------------------- 14a. FINE PRINT LINE */
/*  The deal caveats as one line above the cards, opening to the detail only
    for the people who want it. Native details, so it works without script. */
.eg-fine{margin:var(--space-4) 0 0;border-top:var(--bw-hair) solid var(--border-hairline);
  border-bottom:var(--bw-hair) solid var(--border-hairline);max-width:74ch}
.eg-fine summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--space-2) var(--space-3);padding:var(--space-3) 0;
  font-size:var(--font-size-small);color:var(--text-muted)}
.eg-fine summary::-webkit-details-marker{display:none}
.eg-fine summary:focus-visible{outline:var(--bw-rule) solid var(--accent);outline-offset:2px}
.eg-fine__k{font-family:var(--font-core);font-size:var(--font-size-micro);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-heading);flex:none}
.eg-fine__t{flex:1 1 16rem;min-width:0}
.eg-fine__more{font-family:var(--font-core);font-size:var(--font-size-micro);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--accent-strong);
  border-bottom:var(--bw-rule) solid currentColor;flex:none}
.eg-fine[open] .eg-fine__more{color:var(--text-subtle)}
.eg-fine[open] .eg-fine__more::after{content:" less"}
.eg-fine__body{padding:0 0 var(--space-4)}
.eg-fine__body p{margin:0;font-size:var(--font-size-small);line-height:1.55;color:var(--text-muted)}
.eg-section-head .eg-fine{margin-top:var(--space-5)}
.eg-fine__grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  margin:0 0 var(--space-4)}
.eg-fine__set h4{font-family:var(--font-core);font-size:var(--font-size-micro);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-heading);margin:0 0 var(--space-2)}
.eg-fine__dates{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem var(--space-4);
  font-size:var(--font-size-small);color:var(--text-muted)}
.eg-fine__dates li{white-space:nowrap}
.eg-fine__dates b{color:var(--text-heading);font-weight:var(--weight-bold)}
.eg-fine__note{margin:var(--space-2) 0 0;font-size:var(--font-size-micro);line-height:1.5;color:var(--text-subtle)}
/*  Inside the day picker band the line sits under the chips, not in a band
    of its own. The chip row already carries the padding. */
.eg-chiprow+.eg-fine{margin-top:var(--space-4)}

/* ------------------------------------------------------------- 14b. RAIL */
/*  Horizontal card rail. Scroll-snap does the work, so it behaves with a
    trackpad, a finger and a keyboard whether or not the script runs. The
    arrows are progressive enhancement and stay hidden until JS unhides them. */
.eg-rail{position:relative}
.eg-rail__track{display:flex;gap:var(--grid-gap);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:thin;padding-bottom:var(--space-3);
  scroll-padding-left:var(--space-1)}
.eg-rail__track>*{flex:0 0 78%;scroll-snap-align:start}
@media (min-width:40em){ .eg-rail__track>*{flex:0 0 44%} }
@media (min-width:64em){ .eg-rail__track>*{flex:0 0 23.5%} }
.eg-rail__nav{position:absolute;top:calc(50% - 1.5rem);z-index:3;width:2.75rem;height:2.75rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-family:var(--font-core);font-size:1.5rem;line-height:1;
  color:var(--text-heading);background:var(--surface-card);
  border:var(--bw-hair) solid var(--border-default);border-radius:50%;
  transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}
.eg-rail__nav:hover{background:var(--cocoa-900);color:var(--cream-100);border-color:var(--cocoa-900)}
.eg-rail__nav[hidden]{display:none}
.eg-rail__nav--prev{left:calc(var(--space-4) * -1)}
.eg-rail__nav--next{right:calc(var(--space-4) * -1)}
@media (max-width:47.99em){
  .eg-rail__nav{display:none}
}

/*  Solo card. One venue in a three-up grid stretches to the full width and
    the 4/5 image becomes a wall of texture, so the card turns side-on and
    stops short of the full measure instead. */
.eg-grid--solo{grid-template-columns:1fr;max-width:46rem}
@media (min-width:48em){
  .eg-venue--wide{flex-direction:row;align-items:stretch}
  .eg-venue--wide .eg-venue__media{flex:0 0 42%;aspect-ratio:auto;align-self:stretch}
  .eg-venue--wide .eg-venue__body{justify-content:center;padding:var(--space-7)}
  .eg-venue--wide .eg-venue__foot .eg-btn{flex:0 1 auto}
}

.eg-tile{position:relative;display:block;text-decoration:none;color:var(--cream-100);overflow:hidden;aspect-ratio:3/4;background:var(--cocoa-800)}
.eg-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-out)}
.eg-tile::after{content:"";position:absolute;inset:0;background:var(--scrim-bottom)}
.eg-tile:hover img{transform:scale(1.04)}
.eg-tile__t{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--space-4)}
.eg-tile__t b{display:block;font-family:var(--font-core);font-size:var(--font-size-micro);
  font-weight:var(--weight-bold);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:rgba(255,255,255,.82)}
.eg-tile__t strong{display:block;font-family:var(--font-display);font-weight:500;font-size:1.5rem;line-height:1.1;color:var(--cream-100);margin-top:.25rem}
.eg-tile__t span{display:block;font-size:var(--font-size-micro);color:rgba(255,255,255,.72);margin-top:.375rem}

/* ------------------------------------------------------------- 15. FEATURE */
.eg-band{position:relative;color:var(--cream-100);background:var(--cocoa-900);overflow:hidden;isolation:isolate}
.eg-band__media{position:absolute;inset:0;z-index:0}
.eg-band__media img{width:100%;height:100%;object-fit:cover}
.eg-band::after{content:"";position:absolute;inset:0;z-index:1;background:var(--scrim-flat)}
.eg-band .eg-container{position:relative;z-index:2}
.eg-band h2,.eg-band h3{color:var(--cream-100)}
.eg-band p{color:rgba(255,255,255,.92)}

.eg-band__copy{max-width:52ch;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.eg-band__copy h2{margin-bottom:var(--space-2)}
.eg-band__copy .eg-btn,.eg-band__copy .eg-btnrow{margin-top:var(--space-4)}
.eg-band__fact{font-family:var(--font-core);font-size:var(--font-size-micro);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wider);text-transform:uppercase;color:rgba(255,255,255,.85);margin:0}

/* --------------------------------------------------------- 16. ROOM / DEAL */
.eg-room{border-top:var(--bw-rule) solid var(--border-strong);padding-top:var(--space-8);
  margin-top:var(--space-16);scroll-margin-top:10rem}
.eg-room:first-of-type{margin-top:var(--space-6)}
.eg-room__top{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-start;
  justify-content:space-between;margin-bottom:var(--space-6)}
.eg-room__top h2{margin:0}
.eg-room__gallery{margin-bottom:var(--space-8)}
.eg-facts{list-style:none;display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  border:var(--bw-hair) solid var(--border-hairline);margin:var(--space-6) 0}
.eg-facts--flush{margin:0;border:0}
.eg-facts--top{margin-top:0}
.eg-facts li{padding:var(--space-4) var(--space-5);border-right:var(--bw-hair) solid var(--border-hairline);
  border-bottom:var(--bw-hair) solid var(--border-hairline)}
.eg-facts li:last-child{border-right:0}
.eg-facts b{display:block;font-family:var(--font-core);font-size:.6875rem;font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-subtle);margin-bottom:.25rem}
.eg-facts span{display:block;font-family:var(--font-core);font-size:var(--font-size-body);
  font-weight:var(--weight-bold);color:var(--text-heading);line-height:1.3}
.eg-facts span.sm{font-size:var(--font-size-small);font-weight:var(--weight-semibold)}
/*  Rows carry a hairline so a wrapped item still reads as one item, and the
    tick sits on the first line rather than floating against the block. */
.eg-checklist{list-style:none;display:grid;gap:0 var(--space-8);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin:var(--space-5) 0;padding:0}
.eg-checklist--one{grid-template-columns:1fr}
.eg-checklist--wide{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.eg-checklist li{position:relative;padding:var(--space-3) 0 var(--space-3) 1.6rem;
  font-size:var(--font-size-small);line-height:1.45;color:var(--text-body);
  border-bottom:var(--bw-hair) solid var(--border-hairline)}
.eg-checklist li::before{content:"";position:absolute;left:.15rem;top:1.15em;width:.45rem;height:.45rem;
  border-left:var(--bw-rule) solid currentColor;border-bottom:var(--bw-rule) solid currentColor;
  transform:rotate(-45deg);color:var(--text-heading)}
.eg-checklist li strong{color:var(--text-heading);font-weight:var(--weight-bold)}

.eg-deal{border:var(--bw-hair) solid var(--border-hairline);padding:var(--card-padding);
  display:flex;flex-direction:column;gap:var(--space-3)}
.eg-deal__top{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.eg-deal__top .eg-row{flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.eg-deal h3{margin:0}
.eg-deal__what{margin:0}
.eg-deal__price{font-family:var(--font-core);font-size:1.5rem;font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);color:var(--text-heading);line-height:1}
.eg-deal__when{font-family:var(--font-core);font-size:var(--font-size-micro);letter-spacing:var(--tracking-wider);
  text-transform:uppercase;color:var(--text-muted);margin:0}

.eg-notice{border-left:var(--bw-heavy) solid var(--accent);background:var(--gold-tint);
  padding:var(--space-5) var(--space-6);margin:var(--space-6) 0}
.eg-notice>:last-child{margin-bottom:0}
.eg-notice b{color:var(--accent-strong)}
.eg-notice--quiet{border-left-color:var(--cocoa-900);background:var(--surface-sunken)}
.eg-notice--quiet b{color:var(--text-heading)}

.eg-switch{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center;justify-content:space-between}
.eg-switch .eg-lead{margin:0;max-width:60ch}
.eg-statusbar{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);align-items:center;justify-content:space-between}
.eg-statusbar .eg-meta{margin:0;max-width:64ch}
.eg-status{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-core);
  font-size:var(--font-size-micro);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wider);
  text-transform:uppercase;padding:.5rem .75rem;line-height:1}
.eg-status--live{background:var(--status-success-bg);color:var(--status-success-fg)}
.eg-status--soon{background:var(--status-warning-bg);color:var(--status-warning-fg)}
.eg-status--off{background:var(--surface-accent);color:var(--text-muted)}

/* Book Now cards on the inverted booking band */
.eg-bookcard{background:transparent;border:var(--bw-hair) solid rgba(255,255,255,.18);
  padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}
.eg-bookcard .eg-token{align-self:flex-start}
.eg-bookcard h3{margin:0;font-size:1.375rem;color:var(--cream-100)}
.eg-bookcard .eg-meta{color:rgba(255,255,255,.7);margin:0}
.eg-bookcard__cta{margin-top:auto;padding-top:var(--space-4)}
.eg-bookcard__note{margin-top:var(--space-8);color:rgba(255,255,255,.62)}

/* --------------------------------------------------------------- 17. TABLE */
.eg-tablewrap{overflow-x:auto;border:var(--bw-hair) solid var(--border-hairline);margin:var(--space-6) 0}
.eg-tablewrap--tight{margin-top:0}
table.eg-table{width:100%;border-collapse:collapse;font-size:var(--font-size-small);min-width:44rem}
table.eg-table--narrow{min-width:0}
.eg-table th{font-family:var(--font-core);text-transform:uppercase;letter-spacing:var(--tracking-wide);
  text-align:left;color:var(--text-muted);font-weight:var(--weight-bold);font-size:var(--font-size-micro);
  background:var(--surface-sunken);white-space:nowrap}
.eg-table th,.eg-table td{padding:var(--space-3) var(--space-4);border-bottom:var(--bw-hair) solid var(--border-hairline);vertical-align:top}
.eg-table tbody tr:hover{background:var(--cream-100)}
.eg-table td a{font-weight:var(--weight-semibold)}
.eg-table .num{font-family:var(--font-core);font-weight:var(--weight-bold);white-space:nowrap}
.eg-table .eg-meta{margin:0}

/* ------------------------------------------------------------------ 18. FAQ */
.eg-faq{border-top:var(--bw-hair) solid var(--border-hairline)}
.eg-faq details{border-bottom:var(--bw-hair) solid var(--border-hairline)}
.eg-faq summary{cursor:pointer;list-style:none;padding:var(--space-5) 2.5rem var(--space-5) 0;position:relative;
  font-family:var(--font-core);font-size:var(--font-size-body);font-weight:var(--weight-bold);color:var(--text-heading)}
.eg-faq summary::-webkit-details-marker{display:none}
.eg-faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-size:1.375rem;line-height:1;color:var(--text-subtle)}
.eg-faq details[open] summary::after{content:"\2212"}
.eg-faq__a{padding:0 0 var(--space-5)}
.eg-faq__a>:last-child{margin-bottom:0}

/* ----------------------------------------------------------------- 19. FORM */
.eg-form{display:grid;gap:var(--space-5)}
.eg-field{display:flex;flex-direction:column;gap:.4375rem}
.eg-field label,.eg-field__label{font-family:var(--font-core);font-size:var(--font-size-micro);
  font-weight:var(--weight-bold);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-muted)}
.eg-field .req{color:var(--accent)}
.eg-inverse .eg-field .req{color:var(--cocoa-300)}
.eg-field .help{font-size:var(--font-size-micro);color:var(--text-subtle);text-transform:none;letter-spacing:var(--tracking-body)}
.eg-input,.eg-select,.eg-textarea{
  width:100%;padding:var(--field-padding-y) var(--field-padding-x);
  background:var(--surface-card);color:var(--text-heading);
  border:var(--bw-hair) solid var(--border-default);border-radius:0;
  font-family:var(--font-body);font-size:var(--font-size-small);line-height:1.4;
  transition:var(--transition-color),box-shadow var(--duration-fast) var(--ease-standard)}
.eg-textarea{min-height:7.5rem;resize:vertical}
.eg-input:hover,.eg-select:hover,.eg-textarea:hover{border-color:var(--border-strong)}
.eg-input:focus,.eg-select:focus,.eg-textarea:focus{outline:2px solid var(--focus-ring);outline-offset:2px;
  box-shadow:inset 0 -2px 0 var(--border-strong)}
.eg-select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 12px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.5rem}
.eg-inverse .eg-input,.eg-inverse .eg-select,.eg-inverse .eg-textarea{background:var(--cocoa-800);color:var(--cream-100);border-color:rgba(255,255,255,.26)}
.eg-inverse .eg-input::placeholder,.eg-inverse .eg-textarea::placeholder{color:rgba(255,255,255,.42)}
.eg-fieldrow{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.eg-radios{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.eg-radios label,.eg-check label{font-family:var(--font-body);font-size:var(--font-size-small);
  letter-spacing:var(--tracking-body);text-transform:none;color:var(--text-body);
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;font-weight:400}
.eg-check{display:flex;gap:.625rem;align-items:flex-start}
.eg-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.eg-formnote{font-size:var(--font-size-micro);color:var(--text-subtle)}

.eg-quickbook{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.eg-quickbook .eg-select{width:auto;min-width:17rem;flex:1}

/* --------------------------------------------------------------- 20. FOOTER */
.eg-footer{background:var(--cocoa-900);color:var(--cream-300)}
.eg-footer h2,.eg-footer h3{color:var(--cream-100)}
.eg-footer__book{border-bottom:1px solid rgba(255,255,255,.12);padding-block:var(--space-8)}
.eg-footer__book .eg-container{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center;justify-content:space-between}
.eg-footer__book h2{margin:0;font-size:1.75rem}
.eg-footer__cols{padding-block:var(--space-16);display:grid;gap:var(--space-10) var(--space-8);
  grid-template-columns:1.4fr 1fr 1fr 1.2fr}
@media (max-width:63.99em){.eg-footer__cols{grid-template-columns:1fr 1fr}}
@media (max-width:35.99em){.eg-footer__cols{grid-template-columns:1fr}}
.eg-footer__col h3{font-family:var(--font-core);font-size:var(--font-size-micro);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--cream-100);margin:0 0 var(--space-4);
  padding-bottom:var(--space-3);border-bottom:1px solid rgba(255,255,255,.18)}
.eg-footer__col ul{list-style:none}
.eg-footer__col li a{display:block;padding:.28125rem 0;font-size:var(--font-size-small);
  color:rgba(255,255,255,.72);text-decoration:none;line-height:1.4}
.eg-footer__col li a:hover{color:var(--cream-100);text-decoration:underline;text-underline-offset:.22em}
.eg-footer__col--brand img{height:38px;width:auto;margin-bottom:var(--space-5)}
.eg-footer__blurb{font-size:var(--font-size-small);color:rgba(255,255,255,.66);max-width:34ch}
.eg-footer__contact{font-family:var(--font-core);font-size:1.25rem;font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);margin-top:var(--space-5)}
.eg-footer__contact a{color:var(--cream-100);text-decoration:none;display:block}
.eg-footer__contact a.sm{font-size:var(--font-size-small);font-weight:var(--weight-regular);
  color:rgba(255,255,255,.72);letter-spacing:var(--tracking-body);margin-top:.25rem}
.eg-footer__contact a:hover{text-decoration:underline}
.eg-footer__nl{margin-top:var(--space-8);display:flex;flex-direction:column;gap:var(--space-2)}
.eg-footer__nl label{font-family:var(--font-core);font-size:var(--font-size-micro);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wider);text-transform:uppercase;color:rgba(255,255,255,.72)}
.eg-footer__nlrow{display:flex;gap:var(--space-2)}
.eg-footer__nlrow .eg-input{background:var(--cocoa-800);color:var(--cream-100);border-color:rgba(255,255,255,.26)}
.eg-footer__nlrow .eg-input::placeholder{color:rgba(255,255,255,.4)}
.eg-footer__legal{border-top:1px solid rgba(255,255,255,.12);padding-block:var(--space-5);
  display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);align-items:center;justify-content:space-between;
  font-size:var(--font-size-micro);color:rgba(255,255,255,.5)}
.eg-footer__legal a{color:rgba(255,255,255,.72);text-decoration:none}
.eg-footer__legal a:hover{color:var(--cream-100);text-decoration:underline}
.eg-socials{display:flex;gap:var(--space-3);margin-top:var(--space-5)}
.eg-socials a{width:2.25rem;height:2.25rem;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.24);color:var(--cream-100);text-decoration:none;font-family:var(--font-core);
  font-size:var(--font-size-micro);font-weight:var(--weight-bold)}
.eg-socials a:hover{background:var(--cream-100);color:var(--cocoa-900);border-color:var(--cream-100)}

/* ---------------------------------------------------- 21. MOBILE STICKY BAR */
.eg-mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;gap:1px;
  background:var(--cocoa-900);box-shadow:0 -1px 0 var(--border-default)}
.eg-mobilebar .eg-btn{flex:1;border-radius:0;padding-block:1rem}
.eg-mobilebar .eg-btn--outline{background:var(--surface-raised);color:var(--text-heading);
  border-color:var(--surface-raised)}
.eg-mobilebar .eg-btn--outline:hover{background:var(--cream-300);border-color:var(--cream-300)}
@media (max-width:47.99em){
  .eg-mobilebar{display:flex}
  /*  Only where the bar exists. A landing page carries none, and used to get
      3.5rem of empty space under the footer for nothing. */
  body:has(.eg-mobilebar){padding-bottom:3.5rem}
}

/* ------------------------------------------------------- NEWSLETTER MODAL */
/*  The footer keeps a button; the form itself is a dialog, so the footer of
    every page is not carrying three inputs nobody asked for. */
.eg-footer__nllabel{font-family:var(--font-core);font-size:var(--font-size-small);
  font-weight:var(--weight-bold);letter-spacing:var(--tracking-wider);text-transform:uppercase;
  color:var(--cream-100);margin:0 0 var(--space-2)}
.eg-footer__nlblurb{font-size:var(--font-size-small);line-height:1.5;
  color:rgba(255,255,255,.72);margin:0 0 var(--space-4);max-width:34ch}

.eg-modal{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(20,18,15,.86);overflow-y:auto}
.eg-modal[hidden]{display:none}
.eg-modal__panel{position:relative;width:min(34rem,100%);background:var(--surface-card);
  border:var(--bw-hair) solid var(--border-default);padding:clamp(1.5rem,4vw,2.5rem);
  box-shadow:0 30px 80px rgba(0,0,0,.45);max-height:100%;overflow-y:auto}
.eg-modal__close{position:absolute;top:.75rem;right:.75rem;width:3rem;height:3rem;
  display:grid;place-items:center;font-size:2.25rem;line-height:1;cursor:pointer;
  background:none;border:var(--bw-hair) solid var(--border-hairline);color:var(--text-heading);
  transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),
             border-color var(--duration-fast) var(--ease-out)}
.eg-modal__close:hover{background:var(--cocoa-900);color:var(--cream-100);border-color:var(--cocoa-900)}
.eg-modal__close:focus-visible{outline:var(--bw-rule) solid var(--accent);outline-offset:2px}
/*  reCAPTCHA. The floating badge would sit on the WhatsApp button and the
    back to top arrow, so it is hidden and replaced by the disclosure line
    site.js adds to each protected form, which is what Google requires. */
.grecaptcha-badge{visibility:hidden}
.eg-rcnote{margin:var(--space-3) 0 0;max-width:none;font-size:.75rem;line-height:1.5;
  color:inherit;opacity:.65}
.eg-rcnote a{color:inherit;text-decoration:underline}

/*  Functions popup. Picture on top, then the offer, then one button. Wider
    than the newsletter dialog because the photograph is doing the selling. */
.eg-fpop__panel{width:min(40rem,100%);padding:0;overflow:hidden}
.eg-fpop__img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.eg-fpop__body{padding:clamp(1.5rem,4vw,2.25rem)}
.eg-fpop__body .eg-modal__lead{margin-bottom:var(--space-5)}
/*  The close sits over the photograph, so it carries its own ground. The
    hover has to be restated here: this selector and .eg-modal__close:hover
    have equal specificity, so without it this rule wins on hover too and
    leaves cream text on a cream ground. */
.eg-fpop .eg-modal__close{background:var(--surface-card)}
.eg-fpop .eg-modal__close:hover{background:var(--cocoa-900)}
@media (max-width:35.99em){ .eg-fpop__img{aspect-ratio:4/3} }

.eg-modal__h{margin:var(--space-2) 0 var(--space-3)}
.eg-modal__lead{margin:0 0 var(--space-5);font-size:var(--font-size-small);line-height:1.55;color:var(--text-muted)}
.eg-modal__form{display:grid;gap:var(--space-4)}
.eg-modal__done{border:0;padding:0;background:none}
.eg-modal__done[hidden]{display:none}
body.eg-modal-open{overflow:hidden}

/* ------------------------------------------------------ TERMS ACCORDION */
/*  Native details, so the whole section is readable and findable with no
    script, and every heading is one line until somebody asks for it. */
.eg-terms{max-width:74ch;border-top:var(--bw-hair) solid var(--border-hairline)}
.eg-terms__item{border-bottom:var(--bw-hair) solid var(--border-hairline)}
.eg-terms__item>summary{list-style:none;cursor:pointer;position:relative;
  padding:var(--space-4) 2.5rem var(--space-4) 0;
  font-family:var(--font-core);font-size:var(--font-size-small);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-heading)}
.eg-terms__item>summary::-webkit-details-marker{display:none}
.eg-terms__item>summary:hover{color:var(--accent-strong)}
.eg-terms__item>summary:focus-visible{outline:var(--bw-rule) solid var(--accent);outline-offset:2px}
/*  A plus that becomes a minus. Two rules rather than a glyph, so it never
    depends on a font shipping the character. */
.eg-terms__item>summary::before,
.eg-terms__item>summary::after{content:"";position:absolute;right:.5rem;top:50%;
  background:currentColor;transition:transform var(--duration-fast) var(--ease-out)}
.eg-terms__item>summary::before{width:.75rem;height:var(--bw-rule);margin-top:-1px}
.eg-terms__item>summary::after{width:var(--bw-rule);height:.75rem;margin-top:-.375rem;right:.875rem}
.eg-terms__item[open]>summary::after{transform:scaleY(0)}
.eg-terms__item ul{list-style:none;margin:0;padding:0 0 var(--space-5)}
.eg-terms__item li{position:relative;padding:0 0 var(--space-2) 1.1rem;
  font-size:var(--font-size-small);line-height:1.55;color:var(--text-muted)}
.eg-terms__item li::before{content:"";position:absolute;left:0;top:.6em;
  width:.3rem;height:.3rem;background:var(--accent);border-radius:50%}
.eg-terms__foot{margin-top:var(--space-4)}

/* ------------------------------------------------- HOME AND BACK TO TOP */
/*  A small home button beside the phone number, on every page but the home
    page. Hidden on phones, where the menu carries Home at the top instead. */
.eg-homebtn{display:none;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;
  flex:none;color:var(--text-heading);border:var(--bw-hair) solid var(--border-default);
  transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),
             border-color var(--duration-fast) var(--ease-out)}
.eg-homebtn svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.eg-homebtn:hover{background:var(--cocoa-900);color:var(--cream-100);border-color:var(--cocoa-900)}
.eg-homebtn:focus-visible{outline:var(--bw-rule) solid var(--accent);outline-offset:2px}
@media (min-width:48em){ .eg-homebtn{display:inline-flex} }
/*  Over a hero the header sits on the image, so the button follows the light
    treatment the rest of that header already uses. */
.eg-header--over:not(.is-stuck) .eg-homebtn{color:var(--cream-100);border-color:rgba(255,255,255,.45)}
.eg-header--over:not(.is-stuck) .eg-homebtn:hover{background:var(--cream-100);color:var(--cocoa-900);border-color:var(--cream-100)}

/*  Home at the head of the mobile menu, set to match the column headings it
    sits above so the drawer reads as one list. Desktop already has the
    wordmark and the header home button, so it is a phone-only item. */
.eg-ovhome{display:none}
@media (max-width:47.99em){
  .eg-ovhome{display:block;padding:var(--space-4) 0;
    border-bottom:var(--bw-hair) solid var(--border-hairline);
    font-family:var(--font-core);font-size:var(--font-size-body);font-weight:var(--weight-bold);
    letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-heading)}
  .eg-ovhome:hover{color:var(--accent-strong)}
}

/*  Back to top. Sits above the mobile action bar rather than behind it. */
.eg-totop{position:fixed;right:var(--space-5);bottom:var(--space-5);z-index:46;
  width:2.75rem;height:2.75rem;display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--cream-100);background:var(--cocoa-900);border:var(--bw-hair) solid var(--cocoa-900);
  border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.22);
  transition:background var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}
.eg-totop svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.eg-totop:hover{background:var(--accent-strong);border-color:var(--accent-strong);transform:translateY(-2px)}
.eg-totop:focus-visible{outline:var(--bw-rule) solid var(--accent);outline-offset:3px}
.eg-totop[hidden]{display:none}
@media (max-width:47.99em){ .eg-totop{bottom:4.25rem;right:var(--space-4)} }
@media (prefers-reduced-motion:reduce){ .eg-totop{transition:none} .eg-totop:hover{transform:none} }

/* --------------------------------------------------------------- 22. MISC */
.eg-gallery{display:grid;gap:var(--grid-gap-tight);grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.eg-gallery figure{position:relative;overflow:hidden;aspect-ratio:1/1;background:var(--cream-400)}
.eg-gallery img{width:100%;height:100%;object-fit:cover}
.eg-gallery--wide :first-child{grid-column:span 2;aspect-ratio:2/1}
@media (max-width:35.99em){.eg-gallery--wide :first-child{grid-column:span 1;aspect-ratio:1/1}}
/* One even row. The column count follows the number of images, so a page
   with its own four-shot gallery does not leave a hole where a fifth would be. */
.eg-gallery--strip{grid-template-columns:repeat(var(--strip-n,5),1fr)}
.eg-gallery--strip figure{aspect-ratio:1/1}
@media (max-width:47.99em){
  .eg-gallery--strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:var(--space-2)}
  .eg-gallery--strip figure{flex:0 0 62vw;scroll-snap-align:start}
}

.eg-steps{list-style:none;counter-reset:s;display:grid;gap:var(--grid-gap);
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.eg-steps--one{grid-template-columns:1fr}
.eg-steps li{counter-increment:s;border-top:var(--bw-rule) solid var(--border-strong);padding-top:var(--space-4)}
.eg-steps li::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--font-core);
  font-size:var(--font-size-micro);font-weight:var(--weight-bold);letter-spacing:var(--tracking-widest);
  color:var(--text-subtle);margin-bottom:var(--space-2)}
.eg-steps h3{font-size:1.375rem;margin-bottom:var(--space-2)}
.eg-steps p{font-size:var(--font-size-small);color:var(--text-muted);margin:0}

.eg-linklist{list-style:none;border-top:var(--bw-hair) solid var(--border-hairline)}
.eg-linklist li a{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-4) 0;border-bottom:var(--bw-hair) solid var(--border-hairline);text-decoration:none;
  color:var(--text-heading);font-family:var(--font-core);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;font-size:var(--font-size-small);
  transition:padding var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard)}
.eg-linklist li a:hover{background:var(--surface-sunken);padding-inline:var(--space-3)}
.eg-linklist .s{font-family:var(--font-body);font-size:var(--font-size-micro);color:var(--text-muted);
  text-transform:none;letter-spacing:var(--tracking-body);font-weight:400;text-align:right}

.eg-quote{border-left:var(--bw-rule) solid var(--border-strong);padding-left:var(--space-6);margin:var(--space-8) 0}
.eg-quote p{font-family:var(--font-display);font-size:1.5rem;line-height:1.4;color:var(--text-heading);margin-bottom:var(--space-3)}
.eg-quote cite{font-family:var(--font-core);font-size:var(--font-size-micro);font-style:normal;
  letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-muted)}

.eg-map{border:var(--bw-hair) solid var(--border-hairline);background:var(--surface-sunken)}
.eg-map iframe{display:block;width:100%;height:26rem;border:0;filter:grayscale(1) contrast(1.05)}

.eg-prose>h2{margin-top:var(--space-12)}
.eg-prose>h3{margin-top:var(--space-8)}
.eg-prose ul,.eg-prose ol{margin:0 0 var(--space-4) 1.25rem;max-width:var(--measure-body)}
.eg-prose li{margin-bottom:var(--space-2)}
.eg-prose>:first-child{margin-top:0}
/*  One size for the whole article. The intro paragraph sets it and every
    paragraph after it matches, so a long read does not step down a size the
    moment the piece actually starts. */
.eg-prose p{font-size:var(--font-size-lead);line-height:var(--leading-loose);max-width:var(--measure-lead)}
.eg-prose li{font-size:var(--font-size-lead);line-height:var(--leading-loose)}
/*  A table inside an article scrolls in its own box rather than pushing the
    page sideways on a phone. */
.eg-prose table{display:block;overflow-x:auto;width:100%;border-collapse:collapse;
  margin:0 0 var(--space-6);font-size:var(--font-size-small)}
.eg-prose th,.eg-prose td{padding:var(--space-3) var(--space-4);text-align:left;vertical-align:top;
  border-bottom:var(--bw-hair) solid var(--border-hairline)}
.eg-prose th{font-family:var(--font-core);font-size:var(--font-size-micro);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-heading);
  border-bottom-color:var(--border-strong);white-space:nowrap}

.eg-stats .eg-stat{font-family:var(--font-display);font-size:2.75rem;line-height:1;margin:0;color:var(--text-heading)}
.eg-serieslogo{width:auto;max-height:110px;margin-bottom:var(--space-5)}
/* A night's own mark, standing in for the photograph beside the copy. Same
   footprint as the 4:5 image it replaces; contain, so the mark is never
   cropped or stretched, on the dark ground these marks are drawn for. */
.eg-logopanel{aspect-ratio:4/5;display:grid;place-items:center;
  background:var(--cocoa-900);padding:var(--space-8)}
.eg-logopanel img{width:100%;height:100%;object-fit:contain}
/* Stated, not clickable: a night with no tickets on sale yet. */
.eg-soontag{display:inline-flex;align-items:center;font-family:var(--font-core);
  font-size:var(--font-size-small);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wider);text-transform:uppercase;
  padding:.9rem var(--space-8);border:var(--bw-rule) dashed var(--border-default);
  color:var(--text-muted)}
.eg-empty{border:var(--bw-hair) dashed var(--border-default);padding:var(--space-10);text-align:center;color:var(--text-muted)}
.eg-empty p{margin-inline:auto}
.eg-empty--lg{margin-bottom:var(--space-10)}
.eg-empty--lg h2{margin-bottom:var(--space-3)}

@media print{
  .eg-header,.eg-promo,.eg-mobilebar,.eg-picker,.eg-scrim,.eg-overlay,.eg-footer__book{display:none !important}
  body{padding-bottom:0}
  a{text-decoration:none;color:#000}
}

/* ------------------------------------------- 23. PRODUCT COMPARISON TABLE */
/* Group booking vs private dining vs venue hire, shown wherever someone
   might be on the wrong one. The current page's column is marked. */
.eg-compare th,.eg-compare td{vertical-align:top}
.eg-compare th.is-current{background:var(--cocoa-900);color:var(--cream-100)}
.eg-compare td.is-current{background:var(--cream-100);box-shadow:inset 2px 0 0 var(--cocoa-900),inset -2px 0 0 var(--cocoa-900)}
.eg-compare tbody tr:last-child td.is-current{box-shadow:inset 2px 0 0 var(--cocoa-900),inset -2px 0 0 var(--cocoa-900),inset 0 -2px 0 var(--cocoa-900)}
.eg-compare tbody tr:last-child td{font-family:var(--font-core);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;font-size:var(--font-size-micro)}
.eg-compare tbody tr:hover{background:transparent}
.eg-compare__foot{margin-top:var(--space-4);max-width:72ch}

/* ----------------------------------------- 24. BARE HERO + WELCOME BAND */
/* Homepage: the two videos carry the top of the page on their own. No text,
   no buttons, no scrim fighting the footage. The H1 lands directly beneath. */
.eg-hero--bare::after{background:none}
.eg-hero--bare .eg-hero__in{min-height:var(--hero-h,32rem);padding-block:0}
/* The band runs dark, straight out of the video above it. The colour change
   is the divider, so it needs no rule under it. */
.eg-welcome{border-bottom:0}
.eg-welcome__in{display:grid;gap:var(--space-5) var(--column-gap);grid-template-columns:1fr;align-items:end}
@media (min-width:60rem){.eg-welcome__in{grid-template-columns:1.4fr 1fr}}
.eg-welcome__h{font-size:clamp(2.25rem,1.1rem + 3.6vw,4rem);line-height:1.03;letter-spacing:var(--tracking-tightest);margin:0;max-width:13ch}
.eg-welcome__aside{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
.eg-welcome__sub{font-family:var(--font-core);font-size:var(--font-size-small);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-muted);margin:0;max-width:32ch}

/* ---------------------------------------------------------------- 25. Footnote marker
   A deal is a standing offer, not a guarantee, so anywhere we list them
   carries a marker back to the conditions. Ember, because it is an offer. */
.eg-fn{color:var(--accent);font-weight:var(--weight-bold);padding-left:.15em;font-size:.85em;vertical-align:super;line-height:0}
.eg-fn-note{margin-top:var(--space-5);padding-top:var(--space-3);border-top:var(--bw-hair) solid var(--border-hairline);color:var(--text-muted);max-width:72ch}
.eg-fn-note .eg-fn{vertical-align:baseline;font-size:1em;padding-left:0;padding-right:.35em}

/* ---------------------------------------------------------------- 26. Important dates
   Two columns of dates the weekly deals do not apply on. The weekday is
   computed at build time, so it can never disagree with the date beside it. */
.eg-dates__group h3{font-size:var(--font-size-body);font-family:var(--font-core);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;margin:0 0 var(--space-2)}
.eg-dates{list-style:none;margin:var(--space-4) 0 0;padding:0;border-top:var(--bw-hair) solid var(--border-hairline)}
.eg-dates li{display:flex;flex-wrap:wrap;gap:.25rem var(--space-4);justify-content:space-between;
  padding:var(--space-3) 0;border-bottom:var(--bw-hair) solid var(--border-hairline)}
.eg-dates__when{font-family:var(--font-core);font-weight:var(--weight-bold);color:var(--text-heading);
  letter-spacing:var(--tracking-wide)}
.eg-dates__what{color:var(--text-muted);text-align:right}
@media (max-width:35.99em){.eg-dates__what{text-align:left;flex-basis:100%}}
/*  A date that has passed is hidden by the script rather than removed, so the
    markup a crawler reads still carries the full run of dates. */
.eg-dates li[hidden],.eg-dates[hidden],.eg-dates__none[hidden]{display:none}
.eg-dates__none{margin:var(--space-4) 0 0;color:var(--text-muted)}

/* A stop notice, for the days the weekly specials do not run. Ember, because
   it is about an offer, and the only place on the site that colour is used. */
.eg-notice--stop{border-left:var(--bw-thick,3px) solid var(--accent);background:var(--gold-tint);
  padding:var(--space-4) var(--space-5);margin-bottom:var(--space-6)}
.eg-notice--stop p{margin:0;color:var(--accent-strong)}
.eg-notice--stop a{color:var(--accent-strong)}

/* A plain list of venue sites, one per row. The default linklist expects a
   label and a value on each row; this one carries a link and nothing else. */
.eg-linklist--plain li a{justify-content:flex-start}
.eg-linklist--plain li a::after{content:"";flex:0 0 auto}

/* The plain link list is one link per row, not a label and a value, so it
   needs its own row rule rather than the two-column flex of the default. */
.eg-linklist--plain{margin-top:var(--space-4)}
.eg-linklist--plain li{display:block}
.eg-linklist--plain li a{display:block;justify-content:flex-start;
  padding-block:var(--space-3);border-bottom:var(--bw-hair) solid var(--border-hairline)}

/* ---------------------------------------------------------------- 27. Lightbox
   Content images invite a closer look on hover and open full size on press.
   Square corners and hairline rules, like everything else in the system. */
.eg-zoomable{cursor:zoom-in;transition:transform .35s ease,filter .35s ease}
.eg-zoomable:hover,.eg-zoomable:focus-visible{transform:scale(1.03);filter:brightness(1.06)}
.eg-zoomable:focus-visible{outline:2px solid var(--cocoa-900);outline-offset:3px}
.eg-gallery figure{overflow:hidden}
@media (prefers-reduced-motion:reduce){.eg-zoomable{transition:none}.eg-zoomable:hover{transform:none}}

.eg-lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(20,18,15,.92)}
.eg-lightbox[hidden]{display:none}
.eg-lightbox__img{max-width:min(1200px,100%);max-height:100%;width:auto;height:auto;object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.5);cursor:default}
.eg-lightbox__close{position:absolute;top:clamp(.75rem,2vw,1.5rem);right:clamp(.75rem,2vw,1.5rem);
  width:3rem;height:3rem;display:grid;place-items:center;font-size:1.75rem;line-height:1;
  background:transparent;color:var(--cream-100);border:var(--bw-rule) solid rgba(255,255,255,.6);border-radius:0;cursor:pointer}
.eg-lightbox__close:hover{background:var(--cream-100);color:var(--cocoa-900)}
.eg-lightbox__close:focus-visible{outline:2px solid var(--cream-100);outline-offset:3px}
body.eg-lightbox-open{overflow:hidden}


/* Gold does the work the design system reserves for it: prices, the star
   divider, premium flags. Burgundy keeps every action. */
.eg-deal__price,.eg-deal-card .eg-badge--ember{color:var(--gold);background:transparent;border-color:var(--gold-rule)}
.eg-divider span{color:var(--gold)}
.eg-token{border-color:var(--gold-rule);color:var(--gold)}
/* The dark bands are inverse surfaces, so the tokens flip inside them: gold
   brightens to its cocoa step, burgundy lightens, rules go pale. */
/*  Gold belongs on a solid cocoa band, where it reads as an accent. Over a
    photograph it competes with the image and picks up whatever is behind it,
    so the hero and the feature bands keep a plain cream eyebrow. */
.eg-hero,.eg-band{--text-accent:var(--cream-100)}

.eg-promo,.eg-hero,.eg-band,.eg-footer,.eg-picker,.eg-lightbox,.eg-inverse{
  --text-heading:var(--cream-100);
  --text-body:var(--cream-300);
  --text-muted:var(--cocoa-300);
  --text-subtle:var(--cocoa-400);
  --text-accent:var(--gold-400);
  --gold:var(--gold-400);
  --gold-fg:var(--cocoa-900);
  --gold-rule:var(--gold-400);
  --gold-tint:rgba(201,162,39,.14);
  --border-hairline:rgba(255,255,255,.10);
  --border-default:rgba(255,255,255,.20);
  --border-strong:var(--cream-100);
  --link-rest:var(--cream-100);
  --link-hover:var(--cocoa-300);
  --focus-ring:var(--cream-100);
}
/* Photo-backed sections, asserted after the shared dark-band tokens. */
.eg-hero,.eg-band{--text-accent:var(--cream-100)}

/* An occasion inside two months wears a solid badge, so the card that leads
   the list is the one that reads first. */
.eg-badge--now{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}

/* --------------------------------------------------------- 30. HTML SITEMAP
   The site drawn as what it is: one root, six branches, limbs and leaves.
   Connectors are drawn with borders on the list, never with extra markup, so
   the tree stays a plain nested <ul> for a screen reader and for search. */
.eg-sitemap{display:grid;gap:var(--grid-gap);
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));align-items:start}

.eg-branch{position:relative;background:var(--surface-card);
  border:var(--bw-hair) solid var(--border-hairline);
  padding:var(--space-8) var(--space-6) var(--space-6)}
.eg-branch::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--gold-rule)}
.eg-branch__h{font-size:var(--h4-size);margin:0 0 var(--space-2)}
.eg-branch__h a{text-decoration:none;color:var(--text-heading)}
.eg-branch__h a:hover{color:var(--accent)}
.eg-branch__blurb{font-size:var(--font-size-small);color:var(--text-muted);
  margin:0 0 var(--space-5)}

/* The root sits above the grid and reads as the trunk. */
.eg-branch--root{display:block;text-decoration:none;margin-bottom:var(--grid-gap);
  background:var(--cocoa-900);border-color:var(--cocoa-900);color:var(--cream-300);
  --text-heading:var(--cream-100);--text-accent:var(--gold-400);--text-muted:var(--cocoa-300)}
.eg-branch--root::before{background:var(--gold-400)}
.eg-branch--root .eg-branch__h a,.eg-branch--root .eg-branch__h{color:var(--cream-100)}
.eg-branch--root:hover{border-color:var(--gold-400)}

.eg-tree,.eg-tree__sub{list-style:none;margin:0;padding:0}
.eg-tree>li{position:relative;padding-left:var(--space-5);
  border-left:var(--bw-hair) solid var(--border-default)}
.eg-tree>li:last-child{border-left-color:transparent}
/* the elbow into each limb */
.eg-tree>li::before{content:"";position:absolute;left:0;top:0;width:var(--space-4);
  height:1.05em;border-left:var(--bw-hair) solid var(--border-default);
  border-bottom:var(--bw-hair) solid var(--border-default)}
.eg-tree>li:last-child::before{border-left-color:var(--border-default)}

.eg-tree__limb{display:inline-block;padding:.3rem 0;font-family:var(--font-core);
  font-size:var(--font-size-small);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:var(--text-heading);text-decoration:none;
  transition:transform var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.eg-tree__limb:hover{color:var(--accent);transform:translateX(2px)}

.eg-tree__n{display:inline-block;margin-left:var(--space-2);padding:0 .4rem;
  font-family:var(--font-core);font-size:var(--font-size-small);
  color:var(--gold);border:var(--bw-hair) solid var(--gold-rule);vertical-align:1px}

.eg-tree__sub{margin:0 0 var(--space-3) var(--space-3);padding-left:var(--space-4);
  border-left:var(--bw-hair) solid var(--border-hairline)}
.eg-tree__sub li{position:relative;padding:.15rem 0}
.eg-tree__sub li::before{content:"";position:absolute;left:calc(var(--space-4) * -1);
  top:.9em;width:var(--space-3);border-top:var(--bw-hair) solid var(--border-hairline)}
.eg-tree__sub a{font-size:var(--font-size-small);color:var(--text-body);
  text-decoration:none;border-bottom:1px solid transparent}
.eg-tree__sub a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* A phone gets one column and a tighter indent so the tree never scrolls sideways. */
@media (max-width:47.99em){
  .eg-sitemap{grid-template-columns:1fr}
  .eg-branch{padding:var(--space-6) var(--space-5) var(--space-5)}
  .eg-tree>li{padding-left:var(--space-4)}
  .eg-tree__sub{margin-left:var(--space-2);padding-left:var(--space-3)}
}

/* ------------------------------------------- 31. FOOTER AND DEAL CARD ACCENT
   Gold names the sections in the footer; the links under them stay cream so
   the heading reads as a label rather than competing with what it heads. */
.eg-footer__book h2{color:var(--gold-400)}
.eg-footer__col h3{color:var(--gold-400)}
.eg-footer__nl label{color:var(--gold-400)}

/* Burgundy carries the deal card: the price as a filled label, the venue line,
   and the action. Cream text on the fill clears AA at this size. */
.eg-deal-card .eg-badge--ember{background:var(--accent);color:var(--text-on-accent);
  border-color:var(--accent)}
.eg-deal-card .eg-meta{color:var(--accent)}
.eg-deal-card__cta .eg-btn--outline{color:var(--accent);border-color:var(--accent)}
.eg-deal-card__cta .eg-btn--outline:hover{background:var(--accent);color:var(--text-on-accent);
  border-color:var(--accent)}

/* -------------------------------------------------- 32. VENUE TILES, HOMEPAGE
   Two up on a phone, three up from tablet, so six venues land as two even
   rows rather than one long strip. Square rather than tall portrait. */
.eg-tilegrid{grid-template-columns:repeat(2,1fr)}
@media (min-width:48em){.eg-tilegrid{grid-template-columns:repeat(3,1fr)}}
.eg-tile{aspect-ratio:1/1}

/* At two up on a phone the tile is about 160px across and the venue names wrap
   to two lines, which pushed the caption taller than the square and clipped it.
   Smaller type and a tighter inset keep every name inside the tile. */
@media (max-width:47.99em){
  .eg-tile__t{padding:var(--space-3)}
  .eg-tile__t strong{font-size:1.125rem;line-height:1.15}
  .eg-tile__t span{margin-top:.25rem}
}

/* ------------------------------------------------------- 33. MOBILE HEADER
   On a phone the mark leads from the left and the menu control sits on the
   right, where a thumb reaches it. The overlay header uses the same zones,
   so Close lands in the same place Menu was: nothing jumps across the screen. */
@media (max-width:47.99em){
  .eg-header__in{grid-template-columns:auto 1fr}
  .eg-zC{order:1;justify-self:start}
  .eg-zL{order:2;justify-self:end;gap:var(--space-4)}
}

/* Two links under the deal band: today's day, and the rest of the week. */
.eg-band__more{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8)}


/* --------------------------------------------------------- 34. VENUE TABS
   Two short reads on a venue page: the room, and the kitchen. A segmented
   control rather than underlined text, so it reads as a switch at a glance
   and gives a real target on a phone.

   Radios drive it, so it works with JavaScript off and both panels ship in
   the HTML for search to read. The inputs sit off screen rather than
   display:none, so they stay focusable and arrow keys move between tabs. */
.eg-tabs{margin-bottom:var(--space-5)}
.eg-tabs__r{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.eg-tabs__bar{display:grid;grid-template-columns:1fr 1fr;gap:2px;
  padding:3px;margin-bottom:var(--space-5);
  background:var(--surface-sunken);border:var(--bw-hair) solid var(--border-hairline)}
.eg-tabs__t{display:flex;align-items:center;justify-content:center;text-align:center;
  padding:.7rem var(--space-4);cursor:pointer;user-select:none;
  font-family:var(--font-core);font-size:var(--font-size-small);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);
  transition:background-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard)}
.eg-tabs__t:hover{color:var(--text-heading);background:var(--surface-raised)}

/* The selected segment fills; its panel shows. */
.eg-tabs__r:nth-of-type(1):checked~.eg-tabs__bar .eg-tabs__t:nth-of-type(1),
.eg-tabs__r:nth-of-type(2):checked~.eg-tabs__bar .eg-tabs__t:nth-of-type(2){
  background:var(--accent);color:var(--text-on-accent)}

.eg-tabs__p{display:none}
.eg-tabs__p>p:last-child{margin-bottom:0}
.eg-tabs__r:nth-of-type(1):checked~.eg-tabs__p--1,
.eg-tabs__r:nth-of-type(2):checked~.eg-tabs__p--2{display:block;
  animation:eg-tabin var(--duration-base) var(--ease-out) both}
@keyframes eg-tabin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .eg-tabs__r:checked~.eg-tabs__p{animation:none}
}

/* Focus has to show on the label, because the input itself is off screen. */
.eg-tabs__r:focus-visible~.eg-tabs__bar{outline:2px solid var(--focus-ring);outline-offset:2px}

/* --------------------------------------------------------------- FORM DONE --
   The confirmation that replaces a sent form. It carries the whole receipt,
   because nothing is emailed back to the person who filled the form in. */
.eg-formdone{border:var(--bw-hair) solid var(--border-default);padding:var(--space-10) var(--space-8);display:grid;gap:var(--space-4);background:var(--surface-card)}
.eg-formdone:focus{outline:none}
.eg-formdone__tick{width:2.75rem;height:2.75rem;margin:0 0 var(--space-2);display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--text-on-accent);font-size:1.25rem;line-height:1}
.eg-formdone h3{margin:0}
.eg-formdone p{margin:0;color:var(--text-subtle)}
.eg-formdone p a{color:inherit}
.eg-formerr{color:var(--accent-strong);font-size:var(--font-size-micro);margin:0}
.eg-inverse .eg-formdone{background:transparent;border-color:rgba(255,255,255,.28)}
.eg-inverse .eg-formdone p{color:rgba(255,255,255,.78)}

/* ------------------------------------------------------------------- TIERS --
   The corporate account ladder. Each tier builds on the one below it, so they
   stack rather than sit side by side: as cards, Core ran nine benefits deep
   next to two that were a single line. */
.eg-tiers{border-top:var(--bw-hair) solid var(--border-default)}
.eg-tier{border-bottom:var(--bw-hair) solid var(--border-default)}
.eg-tier summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;flex-wrap:wrap;
  gap:var(--space-2) var(--space-5);padding:var(--space-6) 3rem var(--space-6) 0;position:relative}
.eg-tier summary::-webkit-details-marker{display:none}
.eg-tier summary:hover .eg-tier__h{color:var(--accent)}
.eg-tier summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-size:1.5rem;line-height:1;color:var(--text-subtle)}
.eg-tier[open] summary::after{content:"\2212";color:var(--accent)}
.eg-tier summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* The tier name is what people scan for, so it holds a fixed column and the
   descriptive line sits beside it rather than under it. */
.eg-tier summary .eg-eyebrow{flex:0 0 auto;min-width:9rem;margin:0}
.eg-tier__h{font-family:var(--font-display);font-size:1.5rem;line-height:var(--leading-heading);
  color:var(--text-heading);transition:color .15s ease}
.eg-tier__body{padding:0 3rem var(--space-8) 9rem;display:grid;gap:var(--space-5)}
.eg-tier__body>:last-child{margin-bottom:0}
.eg-tier__body .eg-note-top{margin-top:0}
@media (max-width:47.9375em){
  .eg-tier summary{display:grid;gap:var(--space-2);padding-block:var(--space-5)}
  .eg-tier summary .eg-eyebrow{min-width:0}
  .eg-tier__h{font-size:1.25rem}
  .eg-tier__body{padding:0 0 var(--space-6)}
}

/* --------------------------------------------------------------- DEAL MEDIA --
   The photograph sits flush to the card edges rather than inside the padding,
   so a grid of deals reads as a row of plates and not a row of documents. */
.eg-deal__media{margin:calc(var(--card-padding) * -1) calc(var(--card-padding) * -1) 0;
  overflow:hidden;background:var(--surface-sunken)}
.eg-deal__media img{width:100%;height:100%;object-fit:cover;display:block}

/* ===================================================== PAID LANDING PAGE ==
   Same fonts, same colours, same components as the rest of the site. What
   changes is what is removed: no nav, no overlay, no footer sitemap, and a
   conversion in view at every scroll depth. */
.eg-lp__bar{position:sticky;top:0;z-index:60;background:var(--cocoa-900);
  border-bottom:var(--bw-hair) solid rgba(255,255,255,.16)}
.eg-lp__bar-in{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);padding-block:var(--space-3)}
.eg-lp__mark img{display:block;width:auto;height:2.25rem}
.eg-lp__bar-acts{display:flex;align-items:center;gap:var(--space-4)}
.eg-lp__tel{font-family:var(--font-core);font-size:var(--font-size-small);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);color:var(--cream-100);white-space:nowrap}
.eg-lp__tel:hover{color:var(--accent)}
.eg-lp__tel-lab{display:none}
@media (max-width:47.99em){
  .eg-lp__mark img{height:1.75rem}
  .eg-lp__tel{font-size:var(--font-size-micro)}
  .eg-lp__bar-acts .eg-btn{display:none}
}

/*  Hero. Video behind, scrim over, copy and the first CTA above the fold on
    a laptop and on a phone. */
.eg-lp__hero{position:relative;isolation:isolate;color:var(--cream-100);
  background:var(--cocoa-900);overflow:hidden;
  padding-block:clamp(3rem,7vw,6rem);min-height:min(88svh,44rem);display:grid;align-items:center}
.eg-lp__hero-media{position:absolute;inset:0;z-index:0}
.eg-lp__hero-media video,.eg-lp__hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.eg-lp__hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,rgba(20,18,15,.92),rgba(20,18,15,.72) 55%,rgba(20,18,15,.55))}
.eg-lp__hero-in{position:relative;z-index:2}
.eg-lp__hero-copy{max-width:44rem}
.eg-lp__hero h1{color:var(--cream-100);margin:0 0 var(--space-5)}
.eg-lp__hero .eg-lead{color:rgba(255,255,255,.9);max-width:36ch}
.eg-lp__proof{margin:var(--space-5) 0 0;font-size:var(--font-size-small);color:rgba(255,255,255,.72)}

/*  Trust strip: the venues behind the offer, stated once, right under the
    fold where the visitor is deciding whether this is a real operator. */
.eg-lp__strip{background:var(--surface-sunken);border-bottom:var(--bw-hair) solid var(--border-hairline)}
.eg-lp__venues{list-style:none;margin:0;padding:var(--space-5) 0;display:flex;flex-wrap:wrap;
  gap:var(--space-4) var(--space-8);justify-content:center;text-align:center}
.eg-lp__venues li{font-family:var(--font-core);font-size:var(--font-size-small);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-heading)}
.eg-lp__venues span{display:block;font-weight:400;letter-spacing:var(--tracking-wide);
  text-transform:none;color:var(--text-muted)}

.eg-lp__pack .eg-card{display:flex;flex-direction:column;gap:var(--space-2)}
.eg-lp__mid{justify-content:center}
.eg-lp__room{border:var(--bw-hair) solid var(--border-hairline)}

/*  The form sits in a card beside the reasons to fill it, which keeps the
    argument and the action in one eyeful rather than one above the other. */
.eg-lp__form-sec{background:var(--cocoa-900);color:var(--cream-100)}
.eg-lp__form-sec h2,.eg-lp__form-sec .eg-eyebrow{color:var(--cream-100)}
/*  Gold, not the accent. Burgundy on cocoa is close enough in value that the
    eyebrow and the tick marks all but disappear on this band. */
.eg-lp__form-sec .eg-eyebrow{color:var(--gold-400)}
.eg-lp__form-sec .eg-lead{color:rgba(255,255,255,.9)}
.eg-lp__form-wrap{display:grid;gap:clamp(2rem,4vw,4rem);align-items:start;
  grid-template-columns:1fr}
@media (min-width:60em){ .eg-lp__form-wrap{grid-template-columns:1fr 1fr} }
.eg-lp__ticks{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:var(--space-3)}
/*  The default is the light surface, which is where the brochure dialog uses
    these. The dark form band overrides both colours below. */
.eg-lp__ticks li{position:relative;padding-left:1.75rem;color:var(--text-muted);
  font-size:var(--font-size-small);line-height:1.5}
.eg-lp__ticks li::before{content:"";position:absolute;left:0;top:.45em;width:.55rem;height:.3rem;
  border-left:var(--bw-rule) solid var(--gold);border-bottom:var(--bw-rule) solid var(--gold);
  transform:rotate(-45deg)}
.eg-lp__form-sec .eg-lp__ticks li{color:rgba(255,255,255,.9)}
.eg-lp__form-sec .eg-lp__ticks li::before{border-left-color:var(--gold-400);
  border-bottom-color:var(--gold-400)}
.eg-lp__reassure{margin:var(--space-6) 0 0;font-size:var(--font-size-small);color:rgba(255,255,255,.72)}
.eg-lp__reassure a{color:var(--cream-100);border-bottom:var(--bw-rule) solid currentColor}
.eg-lp__form-card{background:var(--surface-card);color:var(--text-body);
  padding:clamp(1.5rem,3vw,2.5rem);border:var(--bw-hair) solid var(--border-default)}
.eg-lp__form-card .eg-form{display:grid;gap:var(--space-4)}
.eg-lp__submit{width:100%}
.eg-lp__note{margin:0;font-size:var(--font-size-micro);color:var(--text-subtle);text-align:center}

.eg-lp__foot{background:var(--cocoa-900);color:rgba(255,255,255,.72);padding-block:var(--space-8);text-align:center}
.eg-lp__foot a{color:var(--cream-100)}
.eg-lp__foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-5);text-align:left}
.eg-lp__foot-mark{height:2.75rem;width:auto;display:block}
.eg-lp__foot-acts{display:flex;flex-wrap:wrap;gap:var(--space-3)}
/*  Suburbs, not links. They carry the reach of the group without giving a
    paid visitor somewhere else to go. */
/*  max-width:none defeats the global prose measure on p, which would
    otherwise cut the divider rule short of the container. */
.eg-lp__foot-places{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  max-width:none;gap:.4rem var(--space-3);margin:var(--space-6) 0 0;padding-top:var(--space-6);
  border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--font-core);letter-spacing:var(--tracking-wide);
  font-size:var(--font-size-micro);text-transform:uppercase}
.eg-lp__foot-places span[aria-hidden]{color:rgba(255,255,255,.35)}
.eg-lp__foot-fine{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.4rem var(--space-4);margin:var(--space-4) 0 0;font-size:var(--font-size-micro)}
.eg-lp__foot-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem var(--space-4)}
@media (max-width:47.99em){
  .eg-lp__foot-top{flex-direction:column;text-align:center;gap:var(--space-4)}
  .eg-lp__foot-acts{width:100%;flex-direction:column}
  .eg-lp__foot-acts .eg-btn{width:100%}
}

/*  Phone only. The brochure sits on an edge tab at desktop width, and that tab
    is hidden on a phone, so the button carries it there instead. */
.eg-lp__mob{display:none}
@media (max-width:47.99em){
  .eg-lp__mob{display:inline-flex}
  .eg-lp__hero .eg-btnrow .eg-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){ .eg-lp__hero-media video{display:none} }

/*  Landing page gallery. Proof that the rooms are real, before anyone is
    asked for a phone number. Grid on desktop, swipeable on a phone so it
    costs no vertical space where the form matters most. */
.eg-lp__gallery{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(3,1fr)}
/*  Hover and click behaviour comes from .eg-zoomable, the same lightbox the
    rest of the site uses, so a paid page and a venue page feel identical.
    Only the shape of the tile is set here. */
.eg-lp__gallery figure{margin:0;overflow:hidden}
.eg-lp__gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
@media (max-width:60em){ .eg-lp__gallery{grid-template-columns:repeat(2,1fr)} }
@media (max-width:47.99em){
  .eg-lp__gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-behavior:smooth;scrollbar-width:thin;padding-bottom:var(--space-3)}
  .eg-lp__gallery figure{flex:0 0 78%;scroll-snap-align:start}
}
.eg-lp__proof b{color:var(--cream-100)}

/*  ---- Landing page: shared sections -------------------------------------
    The same five blocks run on every landing page in the same order, so two
    ad groups differ by their traffic and not by their layout. Icon led and
    short: a paid visitor scans, they do not read. */

.eg-lp__ico{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

.eg-lp__ring{display:grid;place-items:center;inline-size:5.5rem;block-size:5.5rem;
  border:2px solid var(--gold-rule);border-radius:50%;
  margin-inline:auto;color:var(--cream-100)}
.eg-lp__ring .eg-lp__ico{width:2rem;height:2rem}
.eg-lp__ring--sm{inline-size:3.5rem;block-size:3.5rem;margin-inline:0}
.eg-lp__ring--sm .eg-lp__ico{width:1.35rem;height:1.35rem}

.eg-lp__why-grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-6);
  grid-template-columns:repeat(4,1fr)}
.eg-lp__why-cell{text-align:center}
.eg-lp__why-cell h3{margin:var(--space-4) 0 var(--space-2);font-size:var(--font-size-h5)}
.eg-lp__why-cell p{margin:0;max-width:34ch;margin-inline:auto;color:var(--cocoa-300)}

/*  A list of occasions, not a set of articles. Names only, four across, so
    the whole range is scannable in one pass. */
.eg-lp__types{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3);
  grid-template-columns:repeat(4,1fr)}
.eg-lp__types > li{display:flex}
.eg-lp__types > li > .eg-lp__type{flex:1}
.eg-lp__type{display:flex;align-items:center;gap:var(--space-3);
  border:1px solid var(--border-default);padding:var(--space-4);background:var(--surface-card);
  font-family:var(--font-core);letter-spacing:var(--tracking-wide);
  font-size:var(--font-size-small);line-height:1.25}
.eg-lp__type .eg-lp__ico{color:var(--gold);width:1.6rem;height:1.6rem}
.eg-lp__type--link{color:inherit;text-decoration:none;
  transition:border-color var(--duration-fast) var(--ease-out)}
.eg-lp__type--link:hover,.eg-lp__type--link:focus-visible{border-color:var(--accent);
  color:var(--accent);text-decoration:none}
@media (prefers-reduced-motion:reduce){ .eg-lp__type--link{transition:none} }

.eg-lp__incl{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.eg-lp__incl-bar{display:flex;align-items:flex-start;gap:var(--space-5);
  background:var(--gold-tint);border-inline-start:3px solid var(--gold-rule);
  padding:var(--space-5)}
.eg-lp__incl-ico{display:grid;place-items:center;color:var(--gold-700);flex:0 0 auto}
.eg-lp__incl-ico .eg-lp__ico{width:2rem;height:2rem}
.eg-lp__incl-bar h3{margin:0 0 var(--space-1);font-size:var(--font-size-h5)}
.eg-lp__incl-bar p{margin:0;color:var(--cocoa-700)}

.eg-lp__cb-wrap{display:grid;gap:var(--space-8);
  grid-template-columns:1fr minmax(0,26rem);align-items:center}
.eg-lp__cb-copy .eg-lp__ring--sm{margin-bottom:var(--space-4)}
.eg-lp__cb-card{background:var(--surface-card);padding:var(--space-6);
  border:1px solid var(--border-default)}
.eg-inverse .eg-lp__cb-card{background:var(--cocoa-800);border-color:rgba(255,255,255,.18)}

/*  ---- Brochure: edge tab and modal --------------------------------------
    The lead magnet is pinned to the window rather than parked in the page,
    so it is reachable the whole way down and costs no scroll. */
/*  Right edge, mid height. WhatsApp sits in the corner below it and the two
    never meet. Vertical writing mode rather than a rotate, so the box is laid
    out where it is drawn and nothing has to be nudged back into place. */
.eg-lp__tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:65;
  writing-mode:vertical-rl;
  display:flex;align-items:center;gap:.5rem;padding:1.25rem .6rem;cursor:pointer;
  background:var(--gold-600);color:var(--cream-100);border:0;
  font-family:var(--font-core);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;font-size:var(--font-size-micro);
  box-shadow:0 2px 14px rgba(0,0,0,.28)}
.eg-lp__tab,.eg-lp__tab:hover{text-decoration:none}
.eg-lp__tab:hover,.eg-lp__tab:focus-visible{background:var(--gold-700);color:var(--cream-100)}
.eg-lp__tab .eg-lp__ico{width:1.1rem;height:1.1rem}
/*  Attention once, not for the whole visit. Three passes, then it settles. */
@keyframes eg-lp-tab-pulse{
  0%,100%{box-shadow:0 2px 14px rgba(0,0,0,.28)}
  50%{box-shadow:0 2px 14px rgba(0,0,0,.28),0 0 0 .6rem rgba(168,132,44,.28)}
}
.eg-lp__tab{animation:eg-lp-tab-pulse 2.2s ease-in-out 3s 3}
.eg-lp__tab[data-seen]{animation:none}
@media (prefers-reduced-motion:reduce){ .eg-lp__tab{animation:none} }

/*  On a phone the corner belongs to WhatsApp and the sticky bar. Two floating
    things plus a fixed bar is one too many for a thumb, so the brochure tab
    stands down; the brochure is still reachable from the page itself. */
@media (max-width:47.99em){ .eg-lp__tab{display:none} }

/*  One line under the room grid, for the visitor whose group is smaller than
    everything above it. */
.eg-lp__small{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--space-3) var(--space-5);max-width:none;
  margin:var(--space-6) 0 0;padding-top:var(--space-5);
  border-top:1px solid var(--border-default)}
.eg-lp__small > span{color:var(--text-muted)}

/*  One space, one wide card. A single tall card in a three column grid reads
    as a page that failed to load the other two. */
.eg-lp__room-solo{display:block}
.eg-lp__room--wide{display:grid;grid-template-columns:1fr;
  background:var(--surface-card);border:1px solid var(--border-default)}
.eg-lp__room-media{display:block;overflow:hidden}
.eg-lp__room-media img{width:100%;height:100%;object-fit:cover;display:block}
.eg-lp__room-body{display:flex;flex-direction:column;gap:var(--space-2);
  padding:clamp(1.5rem,3vw,2.5rem)}
.eg-lp__room-h{margin:0;font-family:var(--font-display);font-size:var(--font-size-h3);line-height:1.15;
  color:var(--text-heading)}
.eg-lp__room-blurb{margin:var(--space-2) 0 0;max-width:none;color:var(--text-muted)}
.eg-lp__room--wide .eg-meta{margin:0}
.eg-lp__room-incl{margin-top:var(--space-3)}
.eg-lp__room--wide .eg-checklist li{color:var(--text-body)}
@media (min-width:48em){
  .eg-lp__room--wide{grid-template-columns:minmax(0,46%) minmax(0,1fr);align-items:stretch}
  .eg-lp__room-media{height:100%}
}

/*  Alternatives from the rest of the group, on a venue page. Small and
    secondary: this venue is still the offer, these are the fallbacks. */
.eg-lp__alts{margin-top:var(--space-6);padding-top:var(--space-5);
  border-top:1px solid var(--border-default)}
.eg-lp__alts-lead{margin:0 0 var(--space-4);max-width:none;color:var(--text-muted);
  font-size:var(--font-size-small)}
.eg-lp__alts-row{display:grid;gap:var(--space-3);grid-template-columns:repeat(3,1fr)}
.eg-lp__alt{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:inherit;
  border:1px solid var(--border-default);background:var(--surface-card);padding:.5rem;
  transition:border-color var(--duration-fast) var(--ease-out)}
.eg-lp__alt:hover{border-color:var(--accent)}
.eg-lp__alt img{width:4.5rem;height:3.5rem;object-fit:cover;flex:0 0 auto}
.eg-lp__alt-txt{display:flex;flex-direction:column;line-height:1.3;font-size:var(--font-size-small);
  color:var(--text-muted)}
.eg-lp__alt-txt b{font-family:var(--font-core);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;font-size:var(--font-size-micro);color:var(--text-body)}
@media (max-width:47.99em){ .eg-lp__alts-row{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .eg-lp__alt{transition:none} }

/*  A running offer, as a strip rather than a section. Image, the line, the
    price and one button, all on one row where there is space for it. */
.eg-lp__offer{background:var(--cocoa-900);color:var(--cream-100)}
/*  The photograph carries this, so it takes the room. The words sit small
    beside it: the price and the button are what the visitor is scanning for. */
.eg-lp__offer-in{display:flex;align-items:center;gap:var(--space-6);
  padding-block:var(--space-6)}
.eg-lp__offer-img{width:clamp(14rem,32%,22rem);aspect-ratio:4/3;height:auto;
  object-fit:cover;flex:0 0 auto;display:block}
.eg-lp__offer-txt{flex:1;min-width:0}
.eg-lp__offer-txt .eg-eyebrow{color:var(--gold-400)}
.eg-lp__offer-txt h2{margin:.15rem 0 .35rem;font-size:var(--font-size-h5);color:var(--cream-100)}
.eg-lp__offer-txt p{margin:0;max-width:none;font-size:var(--font-size-micro);
  line-height:1.5;color:rgba(255,255,255,.8)}
.eg-lp__offer-fine{margin-top:.35rem !important;color:rgba(255,255,255,.55) !important}
.eg-lp__offer-act{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-3);
  flex:0 0 auto;text-align:center}
.eg-lp__offer-price{font-family:var(--font-display);font-size:var(--font-size-h3);line-height:1;
  color:var(--cream-100)}
.eg-lp__offer-price small{display:block;font-family:var(--font-core);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  font-size:var(--font-size-micro);color:rgba(255,255,255,.6);margin-top:.25rem}
@media (max-width:60em){
  .eg-lp__offer-in{flex-wrap:wrap}
  .eg-lp__offer-act{width:100%;flex-direction:row;align-items:center;justify-content:space-between}
}
@media (max-width:47.99em){
  .eg-lp__offer-img{width:100%;aspect-ratio:16/9}
}

/*  A room card is the whole link. It goes to the enquiry rather than off the
    page, and the form is told which space was pressed. */
.eg-lp__room{display:block;text-decoration:none;color:inherit;
  transition:border-color var(--duration-fast) var(--ease-out)}
.eg-lp__room:hover{border-color:var(--accent)}
@media (prefers-reduced-motion:reduce){ .eg-lp__room{transition:none} }

/*  ---- WhatsApp ----------------------------------------------------------
    A circle in the corner, and a message that introduces itself a few
    seconds in. Deliberately styled as a conversation rather than a widget:
    an avatar, a name, a typing pause, then two lines. */
.eg-wa{position:fixed;right:1.25rem;bottom:1.25rem;z-index:80;
  display:flex;flex-direction:column;align-items:flex-end;gap:.75rem}
.eg-wa__btn{position:relative;display:grid;place-items:center;inline-size:3.5rem;block-size:3.5rem;
  border-radius:50%;background:#25D366;color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.3);transition:transform .25s var(--ease-out)}
.eg-wa__btn .eg-lp__ico{width:2rem;height:2rem}
.eg-wa__btn:hover,.eg-wa__btn:focus-visible{transform:scale(1.08);color:#fff}
/*  The ring is drawn on a pseudo element so the button itself never moves. */
.eg-wa__btn::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:eg-wa-ring 2.4s ease-out infinite}
@keyframes eg-wa-ring{ to{box-shadow:0 0 0 1.1rem rgba(37,211,102,0)} }
.eg-wa[data-wa-open] .eg-wa__btn::after{animation:none}

/*  Built to WhatsApp's own proportions: teal header, sand thread, white
    incoming bubbles with a tail and a small timestamp, green action bar.
    Narrow and tight, so it reads as a phone conversation in the corner
    rather than a marketing panel. */
.eg-wa__pop{position:relative;width:min(17rem,calc(100vw - 2.5rem));overflow:hidden;
  border-radius:.65rem;box-shadow:0 14px 40px rgba(0,0,0,.28);
  transform-origin:100% 100%;animation:eg-wa-pop .35s var(--ease-out) both}
@keyframes eg-wa-pop{ from{opacity:0;transform:translateY(.75rem) scale(.92)} }

.eg-wa__head{display:flex;align-items:center;gap:.55rem;padding:.5rem .6rem;
  background:#075E54;color:#fff}
.eg-wa__av{display:grid;place-items:center;inline-size:1.9rem;block-size:1.9rem;
  border-radius:50%;background:#25D366;color:#fff;flex:0 0 auto;
  font-family:var(--font-core);font-size:.95rem;line-height:1}
.eg-wa__who{flex:1;font-family:var(--font-core);font-size:.9rem;
  letter-spacing:.02em;color:#fff}
.eg-wa__x{border:0;background:none;cursor:pointer;padding:0 .15rem;
  font-size:1.25rem;line-height:1;color:rgba(255,255,255,.75)}
.eg-wa__x:hover{color:#fff}

.eg-wa__thread{display:grid;gap:.3rem;justify-items:start;
  padding:.6rem;background:#ECE5DD;min-height:3.5rem}
.eg-wa__msg{position:relative;margin:0;max-width:90%;padding:.4rem 3.1rem .4rem .55rem;
  background:#fff;border-radius:0 .45rem .45rem .45rem;
  font-size:.8125rem;line-height:1.4;color:#111;
  box-shadow:0 1px 1px rgba(0,0,0,.12);animation:eg-wa-pop .25s var(--ease-out) both}
/*  The tail on the first bubble only, the way a real thread renders it. */
.eg-wa__msg:first-of-type::before{content:"";position:absolute;left:-.4rem;top:0;
  border:.4rem solid transparent;border-top-color:#fff;border-right:0}
.eg-wa__msg time{position:absolute;right:.5rem;bottom:.3rem;
  font-size:.625rem;color:#8c8c8c}
.eg-wa__typing{margin:0;padding:.5rem .6rem;background:#fff;
  border-radius:0 .45rem .45rem .45rem;display:flex;gap:.22rem;width:max-content;
  box-shadow:0 1px 1px rgba(0,0,0,.12)}
.eg-wa__typing span{width:.32rem;height:.32rem;border-radius:50%;background:#9a9a9a;
  animation:eg-wa-dot 1.2s infinite}
.eg-wa__typing span:nth-child(2){animation-delay:.2s}
.eg-wa__typing span:nth-child(3){animation-delay:.4s}
@keyframes eg-wa-dot{ 0%,60%,100%{opacity:.3} 30%{opacity:1} }

.eg-wa__go{display:flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.55rem;background:#25D366;color:#fff;text-decoration:none;
  font-family:var(--font-core);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;font-size:.6875rem}
.eg-wa__go:hover,.eg-wa__go:focus-visible{background:#1da851;color:#fff;text-decoration:none}
.eg-wa__btn,.eg-wa__btn:hover{text-decoration:none}

/*  The unread badge. Once the conversation has closed itself, this is all
    that is left on screen, and it should read the way an unread message
    reads on a phone: red disc, white count, hard against the icon. */
.eg-wa__badge{position:absolute;top:-.1rem;right:-.1rem;
  min-inline-size:1.3rem;block-size:1.3rem;padding:0 .3rem;border-radius:999px;
  background:#FF3B30;color:#fff;display:grid;place-items:center;
  font-family:var(--font-core);font-size:.8rem;line-height:1;
  box-shadow:0 0 0 2px #fff;animation:eg-wa-badge .35s var(--ease-out) both}
@keyframes eg-wa-badge{ from{opacity:0;transform:scale(.3)} }
@media (prefers-reduced-motion:reduce){ .eg-wa__badge{animation:none} }
.eg-wa__go .eg-lp__ico{width:1rem;height:1rem}

/*  Nothing under it any more, so it sits in the corner proper. */
@media (max-width:47.99em){ .eg-wa{bottom:1rem;right:.75rem} }
@media (prefers-reduced-motion:reduce){
  .eg-wa__btn,.eg-wa__btn::after,.eg-wa__pop,.eg-wa__msg,.eg-wa__typing span{animation:none;transition:none}
}

/*  Small on purpose. The file has already been handed over, so this is a
    thank you and a phone number, not a second pitch. */
.eg-lp__bro-panel{max-width:26rem;width:min(26rem,100%);text-align:center}
.eg-lp__bro-panel h2{font-size:var(--font-size-h3)}
.eg-lp__bro-say{margin:var(--space-2) 0 var(--space-5);max-width:none;color:var(--text-muted)}
.eg-lp__bro-form{margin-top:var(--space-5);padding-top:var(--space-5);
  border-top:1px solid var(--border-default);text-align:left}
.eg-lp__bro-ask{margin:0 0 var(--space-3);text-align:center;font-family:var(--font-core);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  font-size:var(--font-size-micro);color:var(--text-muted)}

.eg-lp__eco{display:grid;gap:var(--space-3);grid-template-columns:repeat(3,1fr)}
.eg-lp__eco-card{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-5);background:var(--surface-card);border:1px solid var(--border-default);
  text-decoration:none;color:inherit;transition:border-color var(--duration-fast) var(--ease-out)}
.eg-lp__eco-card:hover{border-color:var(--accent)}
.eg-lp__eco-h{font-family:var(--font-display);font-size:var(--font-size-h5);line-height:1.2}
.eg-lp__eco-go{font-family:var(--font-core);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;font-size:var(--font-size-micro);color:var(--accent);flex:0 0 auto}

@media (max-width:60em){
  .eg-lp__why-grid{grid-template-columns:repeat(2,1fr)}
  .eg-lp__types,.eg-lp__eco{grid-template-columns:repeat(2,1fr)}
  .eg-lp__cb-wrap,.eg-lp__bro-wrap{grid-template-columns:1fr}
}
@media (max-width:47.99em){
  .eg-lp__why-grid{grid-template-columns:1fr;gap:var(--space-7)}
  .eg-lp__eco{grid-template-columns:1fr}
  .eg-lp__types{grid-template-columns:repeat(2,1fr)}
  .eg-lp__incl-bar{flex-direction:column;gap:var(--space-3)}
}
@media (prefers-reduced-motion:reduce){ .eg-lp__eco-card{transition:none} }