@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   The Green — site design system
   Tokens, type scale and components taken verbatim from
   "The Green Final Website.fig" (Colour Palette + Type Style
   Guide frames). Design canvas is 1280 wide with a 1168
   content column, i.e. 56px side margins.
   ============================================================ */

:root{
  /* palette — names are the file's own variable names */
  --ink:#0D170A;
  --forest-dark:#132119;
  --mid-dark-green:#172B1A;
  --olive:#37452C;
  --centralpark:#78B950;
  --lime:#C9D965;
  --sage:#AFBEAC;
  --cream:#DED2AC;
  --cream-light:#F2EDDE;
  --white:#FFFFFF;

  /* Tinted surfaces. The file paints sage at low opacity over the WHITE page
     frame, so these are pre-composited against white — using the raw rgba()
     would pick up whatever sits behind the section instead. */
  --surface-light:#EFF2EE;      /* sage @20% over white */
  --surface-sage:#BAC7B8;       /* sage @86% over white */
  --surface-sage-soft:#DFE5DE;  /* sage @40% over white */
  --rule-light:rgba(242,237,222,.50);      /* cream-light @50% */

  --content:1168px;
  --gutter:56px;
  /* The header's own height, as a token because the homepage hero measures
     against it: its green panel is one screen MINUS this, so that the header
     and the panel together are exactly the first viewport. */
  --header-h:83px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* Zero the block theme's root padding at source — this is what puts a 70px
   band above the design; overriding it downstream fights the theme. */
:root{
  --wp--style--root--padding-top:0px;
  --wp--style--root--padding-right:0px;
  --wp--style--root--padding-bottom:0px;
  --wp--style--root--padding-left:0px;
}

/* ---- strip Twenty Twenty-Five chrome; the design owns the page ---- */
/* .wp-block-post-title is only still reachable on a page with no H1 of its
   own — inc/seo.php drops the block entirely wherever the content supplies
   one, so it cannot ship a hidden duplicate H1. The rule stays because the
   homepage is such a page: its title block still renders, and without this it
   would print "The Green — Homepage" above the hero. */
body header.wp-block-template-part,
body footer.wp-block-template-part,
body .wp-block-post-title{display:none !important;}
body .has-global-padding{padding-left:0 !important;padding-right:0 !important;
  margin-left:0 !important;margin-right:0 !important;}
body .wp-site-blocks main.wp-block-group,
body .wp-site-blocks .wp-block-group,
body .wp-site-blocks .entry-content{margin-block-start:0 !important;margin-top:0 !important;}
/* The page template wraps the content in a group carrying
   padding-top/bottom:var(--wp--preset--spacing--60) = 70px. Only the top was
   zeroed, so every page had 70px of dead forest-dark below the footer. */
body .wp-site-blocks > main.wp-block-group,
body .wp-block-group.alignfull{padding-top:0 !important;padding-bottom:0 !important;}
body,body .wp-site-blocks{background:var(--forest-dark);}
body .entry-content{max-width:none !important;}

body .wpb-content-wrapper{max-width:none !important;width:100% !important;margin:0 !important;
  font-family:var(--font);-webkit-font-smoothing:antialiased;color:var(--ink);}
.wpb-content-wrapper *{box-sizing:border-box;}
.wpb-content-wrapper .vc_row{margin-left:0;margin-right:0;}
.wpb-content-wrapper .wpb_column{padding-left:0;padding-right:0;}
.wpb-content-wrapper .vc_column-inner{padding-left:0;padding-right:0;padding-top:0;}
/* Clear WPBakery's stock 35px bottom margins. Wrapped in :where() so the
   reset carries ZERO specificity — a plain .tg-* component rule can then set
   its own spacing without needing to out-specify this. Written as a normal
   two-class selector it silently beat every component rule and collapsed the
   gap above every button. */
.wpb-content-wrapper :where(.wpb_content_element, .wpb_single_image, .vc_btn3-container){margin-bottom:0;}
/* js_composer sets `.vc_btn3-container{margin-bottom:22px}` and
   `.vc_icon_element{margin-bottom:35px}` in its own sheet. Those are single-
   class rules, so the zero-specificity `:where()` reset above cannot touch
   them — every button on the site carried 22px of phantom space beneath it and
   the header hamburger held the 83px bar open to 95. Two classes to beat the
   vendor; every component rule that wants its own button spacing is already
   two-class and lands later, so it still wins. */
.wpb-content-wrapper .vc_btn3-container,
.wpb-content-wrapper .vc_icon_element{margin-bottom:0;}
.wpb-content-wrapper img{max-width:100%;height:auto;display:block;}

/* ---- rows: full-bleed band + centred 1168 content ---- */
.tg-band{width:100%;}
.tg-inner > .wpb_column,
.wpb-content-wrapper .tg-inner{max-width:var(--content);margin-left:auto;margin-right:auto;}
.wpb-content-wrapper .tg-pad{padding-left:var(--gutter);padding-right:var(--gutter);}

/* ---- type scale (Type Style Guide frame) ----
   Scoped to .wpb-content-wrapper on purpose. WPBakery writes a per-page
   `.vc_do_custom_heading{margin-bottom:0.625rem;margin-top:0}` inline AFTER
   this sheet; at equal specificity it wins and silently dictates the margin
   on every heading. Two classes beat it. */
/* `lh100%` in the specs is NOT line-height:1. Figma's 100% means 100% of the
   font's own line height, which for Inter is ~1.21 — so the file's heading
   boxes are 22->27, 35->42, 55->67 and 60->73, all of them 1.21x. Built at
   1.05 every heading came out ~9px short, which is most of the residual error
   on the card sections. Measured against four sizes, so it is the metric, not
   a fudge. */
.wpb-content-wrapper .tg-h1{font-size:clamp(38px,4.7vw,60px);font-weight:400;line-height:1.21;letter-spacing:-.01em;margin:0;}
.wpb-content-wrapper .tg-h2{font-size:clamp(34px,4.3vw,55px);font-weight:300;line-height:1.21;letter-spacing:-.01em;margin:0;}
.wpb-content-wrapper .tg-h3{font-size:clamp(30px,3.4vw,44px);font-weight:400;line-height:1.21;margin:0;}
.wpb-content-wrapper .tg-h4{font-size:clamp(24px,2.7vw,35px);font-weight:500;line-height:1.21;margin:0;}
.wpb-content-wrapper .tg-h5{font-size:22px;font-weight:700;line-height:1.25;margin:0;}
.tg-p1,.tg-p1 p{font-size:clamp(20px,2.2vw,28px);font-weight:400;line-height:1.4;}
.tg-p2,.tg-p2 p{font-size:16px;font-weight:400;line-height:1.5;}
.tg-p3,.tg-p3 p{font-size:15px;font-weight:400;line-height:1.5;}
.tg-p1 p:last-child,.tg-p2 p:last-child,.tg-p3 p:last-child{margin-bottom:0;}
.wpb-content-wrapper .tg-eyebrow,.tg-eyebrow p{font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  line-height:1.2;margin:0;}
.wpb-content-wrapper .tg-label,.tg-label p{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0;}

/* colour helpers */
.tg-on-dark,.tg-on-dark p,.tg-on-dark a{color:var(--white);}
.tg-on-cream,.tg-on-cream p{color:var(--cream-light);}
.tg-on-light,.tg-on-light p{color:var(--ink);}
.tg-olive-text,.tg-olive-text p{color:var(--olive);}

/* ---- button: 1.5px outline, square, Label/Button type ---- */
.tg-btn .vc_btn3{
  display:inline-block;border-radius:0 !important;border-width:1.5px !important;border-style:solid !important;
  font-family:var(--font);font-size:13px !important;font-weight:700 !important;
  letter-spacing:.08em;text-transform:uppercase;line-height:1;
  padding:14px 24px !important;background:transparent !important;transition:background .18s,color .18s;
}
.tg-btn-light .vc_btn3{color:var(--white) !important;border-color:var(--white) !important;}
.tg-btn-light .vc_btn3:hover{background:var(--white) !important;color:var(--forest-dark) !important;}
.tg-btn-dark .vc_btn3{color:var(--ink) !important;border-color:var(--mid-dark-green) !important;}
.tg-btn-dark .vc_btn3:hover{background:var(--mid-dark-green) !important;color:var(--white) !important;}

/* ---- header nav (01 Header Nav — 83px split bar) ---- */
.tg-header{display:flex;align-items:stretch;min-height:var(--header-h);}
.tg-header > .wpb_column{float:none;width:50%;display:flex;align-items:center;}
.wpb-content-wrapper .tg-header-left{background:var(--mid-dark-green);padding:0 var(--gutter);}
.wpb-content-wrapper .tg-header-right{background:var(--surface-light);padding:0 var(--gutter);justify-content:flex-end;}
/* `> .vc_column-inner > .wpb_wrapper` on purpose, never a descendant match:
   vc_single_image renders its <figure> as `class="wpb_wrapper vc_figure"`, so
   a plain `.tg-x .wpb_wrapper{...}` also lands on every image inside .tg-x and
   re-applies the column's padding, max-width or display inside the figure. */
.tg-header-left > .vc_column-inner > .wpb_wrapper{display:flex;align-items:center;gap:22px;width:100%;}
/* Icon/Hamburger is three 34x3 bars on a 10px pitch — 34x23 overall. The
   fontawesome glyph vc_icon renders instead sits in a 60x60 box, which made
   the bar 95 tall instead of 83 and pushed every section below it down 12px,
   so the bars are drawn in CSS and the glyph is suppressed. */
/* el_class lands ON .vc_icon_element, not around it — `.tg-burger .vc_icon_element`
   matches nothing. js_composer gives that element margin-bottom:35px and sizes
   its inner box to 60x60 for size="md"; the `:where()` reset in this sheet has
   zero specificity so it loses to both. */
.wpb-content-wrapper .tg-header .tg-burger,
.wpb-content-wrapper .tg-header .vc_btn3-container{margin:0;}
/* Icon/Hamburger is 34x23. size="md" renders the fa-bars glyph at 30px in a
   60x60 box; 39px puts the glyph's own width on 34 and the bars on ~27. */
.wpb-content-wrapper .tg-burger{line-height:0;}
.wpb-content-wrapper .tg-burger .vc_icon_element-inner{display:block;width:34px;height:27px;
  background:none;border:0;border-radius:0;}
.wpb-content-wrapper .tg-burger .vc_icon_element-icon{display:block;width:34px;height:27px;
  font-size:39px;line-height:27px;color:var(--white);}

/* ---- interior page header (Header / Desktop) ----
   NOT the same component as the homepage's 01 Header Nav. Here the bar is
   mid-dark-green edge to edge, the wordmark IS shown beside the burger (on
   the homepage both it and the MENU label are visible:false), the MENU label
   stays hidden, and Book Now is the white-outline variant. */
.wpb-content-wrapper .tg-header-int .tg-header-right{background:var(--mid-dark-green);}
.wpb-content-wrapper .tg-header-int .tg-wordmark{font-size:26px;font-weight:700;letter-spacing:-.02em;
  line-height:1;margin:0;}
.wpb-content-wrapper .tg-header-int .tg-wordmark a{color:var(--white);text-decoration:none;}
.wpb-content-wrapper .tg-header-int .tg-wordmark a::after{content:none;}

/* ---- the wordmark, as the official logo ----
   Every "THE GREEN" on the site was set type standing in for the real mark.
   It is applied as a CSS MASK rather than an <img> or a background-image, so
   the artwork takes the element's own `color` — which means the colour rules
   already written above and in the footer keep working untouched, and the one
   file serves a light background later without a second export. The asset is
   shipped with no fill of its own for exactly that reason.

   The words stay in the markup. font-size:0 collapses the line box so the box
   is the logo's size and nothing else, while the text remains in the
   accessibility tree — the header link keeps its accessible name, and the
   page still says "The Green" to a search engine.

   Sizes come off the frame: 201x24 in the interior header, 352x42 in the
   footer. aspect-ratio rather than a fixed height, so a narrow column scales
   the mark instead of squashing it. */
.tg-logo,
.wpb-content-wrapper .tg-header-int .tg-wordmark a,
.wpb-content-wrapper .tg-header .tg-wordmark a,
.wpb-content-wrapper .tg-hero-wordmark,
.wpb-content-wrapper .tg-foot-wordmark{
  display:block;
  font-size:0;
  line-height:0;
  overflow:hidden;
  max-width:100%;
  height:auto;
  aspect-ratio:499.68/59.59;   /* the asset's own viewBox */
  /* The ratio has to govern the MARK, not the mark plus whatever padding a
     placement carries. Under the site-wide border-box, padding is taken out
     of the ratio box instead of sitting outside it, so the hero's designed
     9px bottom gap silently became 9px less logo — the mark painted flush to
     the panel edge where the type left its descender space. */
  box-sizing:content-box;
  background-color:currentColor;
  -webkit-mask-image:url(assets/logo-wordmark.svg);
  mask-image:url(assets/logo-wordmark.svg);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:left center;
  mask-position:left center;
  -webkit-mask-size:contain;
  mask-size:contain;
}
.wpb-content-wrapper .tg-header-int .tg-wordmark a{width:201px;}
/* The homepage hero's mark. The frame calls this one "Logo Mark" and gives it
   500 wide; its stated 10 tall is a bad read of a collapsed instance, so the
   height comes from the asset's own ratio like every other placement.

   The gap beneath is measured off the frame as a RATIO rather than a pixel
   count — the space below the mark is about 1.1x the mark's own height, which
   holds whatever the screenshot was scaled to. At 500 wide that is ~65px. The
   9px it replaces belonged to the set type this supersedes, and left the mark
   sitting on the panel edge.

   The `body` prefix is load-bearing: the homepage's own CSS carries a
   `.wpb-content-wrapper .tg-hero-wordmark` rule of its own, at identical
   specificity and later in the document, so without it that stale 9px wins. */
body .wpb-content-wrapper .tg-hero-wordmark{width:500px;padding-bottom:128px;}

/* ---- homepage hero: the RIGHT column sets the height ----
   The events column used to be a scroll box — `flex:1 1 0` collapsed it so the
   left column measured the band, and the cards scrolled inside their own
   overflow with a thin sage bar for an affordance. That is gone: a nested
   scroller swallows the wheel, so the page could not drive the hero and the
   two columns moved independently.

   Now the right column is the measure and the left one pins against it. The
   whole mechanism is `position:sticky` on the video and lives with the rest of
   the homepage hero in pages.css — the band it governs is page-specific
   layout, and splitting it across two files is what made the old version hard
   to follow. Nothing hero-shaped belongs here any more. */

/* ---- page banner (Banner Image, 1280x314) ---- */
.tg-banner img{width:100%;aspect-ratio:1280/314;object-fit:cover;}

/* ---- page intro (Intro band, every interior page) ----
   Title sits at x=56 and the body at x=494 of the 1280 canvas, so the split
   is 38.6 / 61.4 rather than a half. Body is Paragraph/P1 at the file's own
   640px measure. */
.tg-pagehead{background:var(--forest-dark);display:flex;}
.tg-pagehead > .wpb_column{float:none;}
.tg-pagehead > .wpb_column:first-child{flex:0 0 38.6%;padding:118px 24px 64px var(--gutter);}
.tg-pagehead > .wpb_column + .wpb_column{flex:1 1 auto;padding:118px var(--gutter) 64px 0;}
.tg-pagehead-body{max-width:640px;}
.tg-pagehead-body p{margin:0;}

/* ---- Menu overlay (Menu Expanded, 1280x823) ----
   The file wires Menu Trigger -> ON_CLICK -> Menu Expanded (dissolve 0.3s),
   so the nav is a closed overlay, not hero furniture. The header hamburger
   links to #tg-menu and :target opens it; Close returns to "#". No JS. */
.tg-menu{display:none;}
.tg-menu:target{display:flex;position:fixed;top:0;right:0;bottom:0;left:0;
  z-index:9999;animation:tg-menu-in .3s ease both;}
@keyframes tg-menu-in{from{opacity:0;}to{opacity:1;}}
.tg-menu > .wpb_column{float:none;width:50%;}
.wpb-content-wrapper .tg-menu-nav{background:var(--mid-dark-green);
  padding:32px var(--gutter) 56px;overflow-y:auto;}
/* Close Trigger sits at (56,32) and the first Nav Link at (56,198). */
.tg-menu-nav .tg-menu-close-icon,
.tg-menu-nav .tg-menu-close{display:inline-block;vertical-align:middle;margin-bottom:142px;}
.tg-menu-close-icon{margin-right:14px;}
.wpb-content-wrapper .tg-menu-close{font-size:19.8px;font-weight:700;letter-spacing:.06em;}
.wpb-content-wrapper .tg-menu-close a{color:var(--white);text-decoration:none;}
.wpb-content-wrapper .tg-menu-close a::after{content:none;}
.tg-menu-media img{width:100%;height:100vh;object-fit:cover;}

/* Nav links — shared by the overlay on every page */
.wpb-content-wrapper .tg-navlink{font-size:clamp(30px,3.9vw,50px);font-weight:500;line-height:1.22;margin:0 0 10px;}
.wpb-content-wrapper .tg-navlink a{color:var(--white);text-decoration:none;}
.wpb-content-wrapper .tg-navlink a::after{content:" >";}
/* One rule covers both nav surfaces: the overlay uses .tg-navlink plain, the
   homepage hero's inline list adds .tg-hero-navlink on top of it. */
.wpb-content-wrapper .tg-navlink a:hover,
.wpb-content-wrapper .tg-navlink a:focus-visible{color:var(--centralpark);}
/* Book Now is set apart from the five section links: the fifth ends at y=543
   and Book Now starts at y=698 in Menu Expanded. It appears ONLY in the
   overlay — the homepage hero's inline nav list is the five section links,
   and Book Now is the button in the header bar instead. */
.wpb-content-wrapper .tg-navlink-book{margin-top:155px;}

/* ---- footer (Footer / Desktop, 435 tall) ----
   Not a four-up grid: Nav Columns is MENU(91) + 96 + ADDRESS(158) + 96 +
   FOLLOW(71) = 512 hard left, and SUBSCRIBE(237) is pushed to the right edge.
   Vertically: Footer Columns at y=72 and 176 tall, Divider at 293, Footer
   Bottom at 339 and 42 tall, 54 below it. The `:not()` is because the base and
   bottom rows carry `.tg-footer` too. */
.tg-footer{background:var(--forest-dark);}
.tg-footer:not(.tg-footer-base):not(.tg-footer-bottom){display:flex;padding:0 var(--gutter);}
.tg-footer:not(.tg-footer-base):not(.tg-footer-bottom)::before,
.tg-footer:not(.tg-footer-base):not(.tg-footer-bottom)::after{display:none;}
.wpb-content-wrapper .tg-footer-inner{float:none;width:auto;padding:72px 0 45px;}
.wpb-content-wrapper .tg-footer-inner + .tg-footer-inner{margin-left:96px;}
.wpb-content-wrapper .tg-footer-inner:last-child{margin-left:auto;flex:0 0 237px;}
/* Label 16 tall with the first line 14 below it, then lines on a 32 pitch. */
.wpb-content-wrapper .tg-foot-label{color:var(--centralpark);font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;line-height:1.2;margin:0 0 14px;}
.tg-foot-list p{margin:0;}
.tg-foot-list br{display:none;}
.tg-foot-list a{display:block;color:var(--cream-light);text-decoration:none;font-size:15px;
  line-height:1.2;margin-bottom:14px;}
.tg-foot-list a:last-child{margin-bottom:0;}
.tg-foot-list a:hover{color:var(--centralpark);}
.tg-foot-body p{color:var(--cream-light);font-size:15px;line-height:1.2;margin:0 0 14px;}
.tg-foot-body{margin:0 0 14px;}
.tg-foot-rule .vc_sep_line{border-color:var(--olive);}
.wpb-content-wrapper .tg-foot-rule{margin:0;}
/* THE GREEN Logo in Footer Bottom is 352x42. Now the real mark, masked in the
   block above — the width is all this needs, since the height follows the
   asset's aspect ratio. `color` is what paints it. */
.wpb-content-wrapper .tg-foot-wordmark{color:var(--white);width:352px;margin:0;}
.tg-foot-legal p{color:var(--sage);font-size:13px;line-height:1.6;margin:0;text-align:right;}
/* Footer Bottom — the rule and the wordmark/legal line. These live here rather
   than in page CSS because every page carries its own copy of the footer; the
   homepage had them locally and the interior pages rendered edge to edge
   without them. */
.wpb-content-wrapper .tg-footer-base{padding:0 var(--gutter);}
.wpb-content-wrapper .tg-footer-bottom{padding:46px var(--gutter) 54px;display:flex;align-items:flex-end;}
.tg-footer-bottom > .wpb_column{float:none;width:50%;}

/* ---- sliders ----
   Four rows are drawn in the file with arrow controls: the vendor page's
   What's On row and the Why Come / Event / Booking galleries. Every one of
   them is already one slide per column, so they become carousels without any
   markup change.
   The point is that NOTHING changes at the current content. Each slide keeps
   the proportional `flex` that puts it on the file's exact width (606/260/270,
   or 25% for a card), so at 1280 the rows still measure what §1 left them at.
   A `min-width` is what makes it a carousel: once there are more slides than
   fit, the mins can no longer be satisfied, the track overflows, and the row
   scrolls instead of squeezing every slide thinner. The arrows the file draws
   are all `visible:false`, so there are none to build — the native scrollbar
   appears only while there is something to scroll, and swipe works on touch.
   `.tg-photogrid` lives in four pages' page CSS because the markup is copied
   between them; this behaviour belongs here for the same reason. */
.tg-photogrid,
.tg-vwhatson-grid{overflow-x:auto;scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;}
.tg-photogrid > .wpb_column,
.tg-vwhatson-grid > .wpb_column{scroll-snap-align:start;}
.tg-photogrid > .wpb_column{min-width:260px;}
.tg-vwhatson-grid > .wpb_column{min-width:255px;}

/* ---- shared section furniture ---- */
.tg-heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;}
.tg-heading-row > .wpb_column{float:none;}
.tg-split{display:flex;align-items:stretch;}
/* WPBakery's clearfix ::before/::after become flex items on any row set to
   flex. They are zero-width so they go unnoticed until the row uses `gap` or
   `justify-content`, at which point the spacing is shared out between four
   slots instead of two. */
.tg-split::before,.tg-split::after{display:none;}
.tg-split > .wpb_column{float:none;width:50%;}
.tg-media-fill .vc_column-inner,.tg-media-fill .wpb_wrapper,
.tg-media-fill .wpb_single_image,.tg-media-fill figure,
.tg-media-fill .vc_single_image-wrapper{height:100%;display:block;}
.tg-media-fill img{width:100%;height:100%;object-fit:cover;}

/* ---- Split Row lead (spotlight, event and vendor pages) ----
   A 640/640 split: copy at x=64 in a 512 measure, image column full bleed.
   Top-aligned on purpose — the two halves are different heights in every one
   of these frames, and the shorter one sits against the page background. */
.tg-splitlead{display:flex;align-items:flex-start;}
.tg-splitlead > .wpb_column{float:none;width:50%;}
.wpb-content-wrapper .tg-splitlead-copy{padding:96px 64px;}
.tg-splitlead-copy > .vc_column-inner > .wpb_wrapper{max-width:512px;}
.tg-splitlead-media img{width:100%;aspect-ratio:640/832;object-fit:cover;}
.wpb-content-wrapper .tg-backlink{font-size:15px;line-height:1.5;margin:0 0 28px;}
.wpb-content-wrapper .tg-backlink a{color:inherit;text-decoration:none;}
.wpb-content-wrapper .tg-backlink a:hover{text-decoration:underline;}
.wpb-content-wrapper .tg-lead-title{margin:0 0 28px;}
.tg-lead-body{margin:0 0 28px;}
.tg-lead-body:last-child{margin-bottom:0;}
/* The lead body is 16px at lh100% in the file, which is a 19px line — not the
   1.5 used elsewhere. Paragraph breaks are a blank line in the source text
   node, so the margin is one line too: 12 lines + 4 blank lines is exactly the
   304 the Event frame draws. (Some 16px copy in the same file IS lh1.5 — the
   Upcoming Dates list, for one. Read the spec line, don't assume.) */
.tg-lead-body p{font-size:16px;line-height:19px;margin:0 0 19px;}
.tg-lead-body p:last-child{margin-bottom:0;}

/* ---- form fields (event registration, contact, newsletter) ----
   These submit. Each field is one text block holding a label + input, and the
   forms POST to Basin — see inc/forms.php, which reproduces exactly this DOM so
   that adopting a form backend cost the design nothing. `.tg-field-green`, the
   overlay's tone, lives in forms.css beside the rest of the overlay. */
.tg-field{margin:0 0 20px;}
.tg-field p{margin:0;}
.tg-field label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin:0 0 8px;}
.tg-field input,.tg-field textarea{display:block;width:100%;box-sizing:border-box;
  font-family:var(--font);font-size:14px;line-height:1.5;border-radius:0;
  background:transparent;padding:12px 20px;}
.tg-field textarea{resize:vertical;}
.tg-field-dark label{color:var(--cream-light);}
.tg-field-dark input,.tg-field-dark textarea{border:1px solid var(--cream-light);color:var(--cream-light);}
.tg-field-dark input::placeholder,.tg-field-dark textarea::placeholder{color:var(--sage);}
.tg-field-olive input,.tg-field-olive textarea{border:1px solid var(--olive);color:var(--olive);}
.tg-field-olive input::placeholder,.tg-field-olive textarea::placeholder{color:var(--olive);opacity:.75;}

/* ---- Card/Event + Card/Vendor (file components, reused site-wide) ---- */
.tg-card{margin:0 0 90px;}
.tg-card:last-child{margin-bottom:0;}
/* Card/Event Stacked's Image is 360 tall. The symbol is 560 wide and the
   homepage instance is 528, so writing it as the symbol's 560/360 ratio made
   the image 339 and every hero card ~20 short. Height is the invariant here
   too — see .tg-vcard-img below. */
/* Both card images below are sized by height, and that only works once their
   wrappers are real blocks. vc_single_image nests the img in an inline-block
   <figure class="wpb_wrapper vc_figure"> and an inline-block
   .vc_single_image-wrapper, both shrink-to-fit: with a fixed height on the img,
   `width:100%` resolves against a box that is itself sized from the image's
   intrinsic ratio at that height, so the width is circular and collapses. A
   landscape source is wider than the column and gets clamped back to full width,
   which is why this reads as correct almost everywhere — but a portrait source
   renders 203 wide and a square one 360, in a 601 column. Same trap
   .tg-media-fill already unpicks above, for the same reason. */
.tg-card-img .vc_figure,.tg-card-img .vc_single_image-wrapper,
.tg-vcard-img .vc_figure,.tg-vcard-img .vc_single_image-wrapper{display:block;width:100%;}
.tg-card-img img{width:100%;height:360px;object-fit:cover;}
/* Card/Event Stacked is 560x601: Image 360, then Text at y=385 (a 25 gap),
   and inside Text the eyebrow/heading/body/button sit 19 apart. */
.tg-card .tg-eyebrow{margin:25px 0 19px;}
.tg-card .tg-card-title{margin:0 0 19px;}
.tg-card .tg-card-body{margin:0 0 19px;}
.tg-card .tg-card-body p{font-size:19px;line-height:1.5;color:var(--olive);margin:0;}

.tg-grid{display:flex;align-items:stretch;}
.tg-grid > .wpb_column{float:none;width:25%;}
/* Every column keeps the same horizontal padding so all four content boxes
   are identical widths — zeroing the outer edges makes the end columns wider,
   which silently changes the height of any aspect-ratio image inside them.
   The section pulls its own gutter in by 24px to keep the outer edge true. */
.wpb-content-wrapper .tg-grid > .wpb_column{padding:0 24px;}
.tg-grid > .wpb_column + .wpb_column{border-left:1px solid var(--rule-light);}

/* Card/Vendor is a fixed 255x512 in the file. The homepage stacks two per
   column, so pinning the height is what keeps the second row aligned. */
.tg-vcard{margin:0 0 32px;}
.tg-vcard:last-child{margin-bottom:0;}
.tg-grid .tg-vcard-img{margin-top:0;}
.tg-grid .wpb_wrapper > .tg-vcard-img ~ .tg-vcard-img{margin-top:32px;}
/* Card/Event in a grid (Regular Events & Offers) carries an eyebrow above the
   title. Its stack is gap=14 like Card/Vendor — the bare .tg-eyebrow rule is
   margin:0, which is only correct inside Card/Event Stacked. */
.wpb-content-wrapper .tg-grid .tg-eyebrow{margin:14px 0;}

/* Card/Vendor is a vertical stack with gap=14 throughout.
   The image placeholder is 360 tall in EVERY card in the file, at 272 wide on
   the homepage's four-up and at 255 wide in the three-up rows — so 360 is the
   invariant, not the ratio. Written as 272/360 it was only right at 272: the
   255-wide rows rendered 338 and each card row came out 22 short, which was
   most of the -52 on both Who's Here grids. */
.tg-vcard-img img{width:100%;height:360px;object-fit:cover;background:var(--olive);}
.wpb-content-wrapper .tg-vcard-title{margin:14px 0;font-size:18px;font-weight:700;line-height:1.2;}
.tg-vcard-body{margin:0 0 14px;}
.tg-vcard-body p{font-size:16px;line-height:1.5;margin:0;}

/* EVERY card grid on a monitor wider than the design canvas.
   The four columns are 25% each with no upper bound, so they keep growing
   while the card image stays pinned at 360 tall — the photo crosses square at
   ~1700px and goes landscape, which stops reading as the file's portrait card.
   3:4 is the cap the client set, and it is the ONE ratio for every grid: at a
   360-tall image that is 270 wide, and the column adds its own 24px each side,
   so 318 is the column that holds it. Reached at ~1336px; below that the
   columns are already narrower than 318 and nothing here applies, which is why
   the 1280 canvas renders exactly as it did — every measured padding value in
   pages.css is against that canvas and none of them move.
   WIDTH is capped rather than the ratio being written onto the image, because
   360 tall is the invariant the rows were built to (see Card/Vendor above): an
   `aspect-ratio` on .tg-vcard-img resolves against whatever the column happens
   to be and shortens the 255-wide rows by ~20px against the file.
   Capping alone would leave the run hard against the left gutter, so what
   centres is the four-column TRACK — 4 x 318 = 1272 — and the columns stay
   left-aligned inside it. Centring the COLUMNS instead was wrong and visibly
   so: a row of four centred itself while the three-card row above it sat on
   the gutter, and the two rows no longer shared a left edge. A row is now
   placed as though it were four columns however many it actually holds, which
   is what makes What's On line up — Events (3) and Spotlights start exactly
   where Offers (4) does.
   Padding rather than a max-width on the row: the row IS the band, carrying
   the section's full-bleed background, so capping its width would cap the
   colour with it.
   The handover is seamless, not merely close. The columns reach 318 at
   1336px ((1336 - 2 x 32) / 4), and at 1336 the centring term is
   (1336 - 1272) / 2 = 32 — the same 32 the gutter was already using. So below
   1336 the padding is the file's gutter and the columns stretch; above it the
   padding grows and the track holds. Nothing jumps at the crossover, and the
   1280 canvas renders exactly as it did — every measured padding value in
   pages.css is against that canvas and none of them move.
   (0,3,0) via `.tg-band.tg-grid`: every one of these rows carries tg-band, and
   that beats the (0,2,0) `:where()`-scoped page rules in pages.css, which all
   set this same `var(--gutter) - 24px` horizontally. Only the horizontal
   longhands are set here, so each page keeps its own measured top and bottom.
   Above 901px only: below the breakpoint the columns are 50% and a 318 cap
   would start shrinking cards at tablet widths, which is a different design. */
@media (min-width:901px){
  .wpb-content-wrapper .tg-band.tg-grid{
    padding-left:max(var(--gutter) - 24px, (100% - 1272px) / 2);
    padding-right:max(var(--gutter) - 24px, (100% - 1272px) / 2);
  }
  /* Redundant while the track holds, since 25% of 1272 is already 318. Kept as
     the backstop that actually states the 3:4 rule, for any grid that reaches
     this breakpoint without tg-band on the row. */
  .tg-grid > .wpb_column{max-width:318px;}
}

/* ---- Filter Controls (Dropdown - Frequency) ----
   Lifted out of page 135's page CSS now that the [tg_event_row] element can
   render the dropdown on any page. The copy on 135 loads after this one and is
   identical, so it simply wins with the same values; it goes when that page is
   next rewritten. The chevron is a rotated border rather than an SVG data URI
   so no angle bracket ever reaches the stylesheet — a block theme merges
   Additional CSS in HTML-escaped and turns ">" into "&gt;". */
.tg-filter p{margin:0;display:flex;align-items:center;gap:32px;justify-content:flex-end;}
.tg-filter label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(242,237,222,.70);}
.tg-filter .tg-select{position:relative;display:inline-block;}
.tg-filter .tg-select::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;
  border-right:1.5px solid var(--cream-light);border-bottom:1.5px solid var(--cream-light);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;}
.tg-filter select{appearance:none;-webkit-appearance:none;width:172px;height:43px;
  background:transparent;border:1px solid rgba(242,237,222,.50);border-radius:0;
  color:var(--cream-light);font-family:var(--font);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;line-height:1;padding:0 40px 0 16px;}
.tg-filter select option{color:var(--ink);}

/* A card filtered out by the dropdown. The remaining columns keep their 25%
   rather than stretching, which is how a three-card row already renders — the
   Events grid on What's On has always been three columns in a four-up band. */
.tg-grid > .wpb_column.tg-hidden{display:none;}
/* `+ .wpb_column` counts DOM siblings, so hiding the first card leaves the
   next one wearing the divider against the band edge. events.js marks whoever
   is first on screen and this takes that one border back off. */
.tg-grid > .wpb_column.tg-first-visible{border-left:0;}

/* ---- gallery (07 Gallery) ---- */
.tg-gallery-large img{width:100%;height:100%;object-fit:cover;min-height:520px;}
.wpb-content-wrapper .tg-gallery-panel{padding:0 56px;display:flex;align-items:center;}
.tg-gallery-panel > .vc_column-inner > .wpb_wrapper{width:100%;}
/* These three are the homepage's WPBakery Image Carousel, which wears
   el_class="tg-carousel" — `.vc_carousel-inner`, `.vc_slide` and
   `.vc_carousel-control` are all that element's own internals and the eatery
   photostrip, a hand-rolled <ul>, has none of them. They were renamed to
   .tg-photostrip along with the strip's own rules and stopped matching
   anything, which is what took the arrows and the photo's shape off the
   homepage gallery. */
.tg-carousel .vc_carousel-inner,.tg-carousel .vc_slide{overflow:hidden;}
.tg-carousel img{width:100%;aspect-ratio:334/470;object-fit:cover;}
/* margin is js_composer's own -15px, which its 30px-tall default control needs
   and a 56px circle centred by translate does not — left in, the arrows ride
   15px above the middle of the photo. */
.tg-carousel .vc_carousel-control{width:56px;height:56px;border-radius:50%;background:var(--white);
  color:var(--ink);opacity:1;text-shadow:none;font-size:26px;font-weight:700;display:flex;
  align-items:center;justify-content:center;top:50%;margin:0;transform:translateY(-50%);}
.tg-gallery-meta{display:flex;justify-content:space-between;margin-top:16px;}
.tg-gallery-meta > .wpb_column{float:none;width:50%;}
.tg-gallery-meta .tg-cap{font-size:16px;font-weight:700;color:var(--olive);margin:0;}

/* The slide is inset inside the panel, and by a lot.
   07 Gallery is 1280x823: a 640 image and a 640 panel holding ONE 528x505
   Gallery Slide, centred — the 56 either side is .tg-gallery-panel's padding
   above, the 159 above and below falls out of align-items:center. Inside the
   slide the Carousel Row is 446 (a 334 Photo with a 56 arrow flush against
   each edge, no gap) and the Meta Row is 334, so the caption and the count
   line up with the PHOTO, not with the arrows.
   446/528 and the 56 gutters, rather than a flat 446px: the band's height is
   already the large image's 640/823 ratio, so the panel has to scale with it
   or the photo strands itself in the middle of a taller and taller band.
   Absolute positioning resolves against the padding box, so the carousel's
   own left:0 / right:0 arrows land in the 56 gutters with nothing to do.
   Above 901 only — below it the split has wrapped, the panel is the full
   viewport, and 112px of arrow gutter out of a 375 phone would leave a 110px
   photo. */
@media (min-width:901px){
  .tg-carousel .vc_images_carousel{max-width:84.47%;margin:0 auto;padding:0 56px;}
  .wpb-content-wrapper .tg-gallery-meta{width:84.47%;margin:16px auto 0;padding:0 56px;}
}

/* ---- responsive ---- */
@media (max-width:1024px){
  :root{--gutter:32px;}
}
@media (max-width:900px){
  .tg-split,.tg-header,.tg-grid{flex-wrap:wrap;}
  .tg-split > .wpb_column{width:100%;}
  .tg-grid > .wpb_column{width:50%;}
  .tg-gallery-large img{min-height:320px;}
  /* Below the breakpoint the columns stop being 255/272 wide, so the fixed
     360 stops being the file's number and goes back to a ratio — and the ratio
     is the same 3:4 the desktop cap enforces, so there is one number for the
     card image on the whole site rather than a desktop one and a mobile one.
     Was 272/360 (0.756); 3:4 is 0.750, i.e. under 2px on a 360-tall image. */
  .tg-vcard-img img{height:auto;aspect-ratio:3/4;}
  .tg-header > .wpb_column{width:100%;min-height:64px;}
  .tg-media-fill img{height:auto;min-height:0;}
  .tg-heading-row{flex-wrap:wrap;align-items:flex-start;}
  .tg-heading-row > .wpb_column{width:100% !important;}
  .tg-foot-legal p{text-align:left;}
  .tg-pagehead{flex-wrap:wrap;}
  .tg-pagehead > .wpb_column:first-child{flex:0 0 100%;padding:64px var(--gutter) 24px;}
  .tg-pagehead > .wpb_column + .wpb_column{flex:0 0 100%;padding:0 var(--gutter) 56px;}
  .tg-splitlead{flex-wrap:wrap;}
  .tg-splitlead > .wpb_column{width:100%;}
  .wpb-content-wrapper .tg-splitlead-copy{padding:56px var(--gutter);}
  .tg-splitlead-media img{aspect-ratio:16/10;}
  .tg-footer-bottom{flex-wrap:wrap;}
  .tg-footer-bottom > .wpb_column{width:100%;}
  /* The four footer columns never wrapped: the row is flex with a fixed 237px
     last column and a 96px gap, so below ~700px it ran past the viewport and
     put a horizontal scrollbar on EVERY page. This is the existing responsive
     CSS being repaired, not the mobile design — the file's Mobile Footer is a
     504px layout that is still to be built. */
  .tg-footer:not(.tg-footer-base):not(.tg-footer-bottom){flex-wrap:wrap;}
  .wpb-content-wrapper .tg-footer-inner{flex:1 1 40%;padding:40px 0 0;}
  .wpb-content-wrapper .tg-footer-inner + .tg-footer-inner{margin-left:0;}
  .wpb-content-wrapper .tg-footer-inner:last-child{margin-left:0;flex:1 1 40%;}
  .tg-footer:not(.tg-footer-base):not(.tg-footer-bottom){gap:0 32px;padding-bottom:40px;}
}
/* The sticky bar and the homepage's header logo exist only in the mobile
   frames; both are switched on inside the mobile block below. */
.tg-stickybar{display:none;}
.tg-wordmark-m{display:none;}

/* ==== MOBILE (Mobile * frames, 430 wide) ==================================
   Below 600 the layout stops being a reflow of the desktop build and follows
   the file's own 430px frames. Three of those exist — Mobile Homepage, Mobile
   Who's Here Page, Mobile Vendor Page - Turtle — and the chrome in this block
   (header, footer, sticky bar) is theirs, measured. The nine pages with no
   mobile frame inherit this chrome and keep the extrapolated reflow below it;
   anything invented for them is marked in QUALITY.hd §2.
   ========================================================================= */
@media (max-width:600px){
  /* Mobile Header — 430x52. Logo left at x=20, hamburger right at x=386, bar
     mid-dark-green edge to edge, and NO Book Now: that moves to the sticky bar
     at the bottom of the viewport. */
  .tg-header{min-height:52px;}
  .tg-header > .wpb_column{width:100%;min-height:52px;}
  .wpb-content-wrapper .tg-header .tg-header-right{display:none;}
  .wpb-content-wrapper .tg-header .tg-header-left{background:var(--mid-dark-green);
    padding:0 20px;}
  .tg-header-left > .vc_column-inner > .wpb_wrapper{justify-content:space-between;gap:0;}
  .wpb-content-wrapper .tg-header .tg-burger{order:2;}
  /* The homepage's header mark, which exists only in the mobile frames. The
     logo is on the <a>, so the wrapper only has to stop being hidden. */
  .wpb-content-wrapper .tg-header .tg-wordmark{order:1;display:block;}
  .wpb-content-wrapper .tg-header .tg-wordmark a{width:168px;}
  /* Icon/Hamburger is 24x16 here, against 34x23 on desktop. */
  .wpb-content-wrapper .tg-burger .vc_icon_element-inner,
  .wpb-content-wrapper .tg-burger .vc_icon_element-icon{width:24px;height:16px;}
  .wpb-content-wrapper .tg-burger .vc_icon_element-icon{font-size:27px;line-height:16px;}

  /* Mobile Footer — 430x504, and NOT the desktop footer stacked. The Menu
     column is gone (the hamburger overlay carries the nav), Address and Follow
     share one 293-wide row, Subscribe runs full width under them. */
  .tg-footer:not(.tg-footer-base):not(.tg-footer-bottom){flex-wrap:wrap;
    gap:32px 64px;padding:48px 24px 0;}
  .wpb-content-wrapper .tg-footer-inner{padding:0;margin-left:0;}
  .wpb-content-wrapper .tg-footer-inner:nth-child(1){display:none;}
  .wpb-content-wrapper .tg-footer-inner:nth-child(2){flex:0 0 158px;}
  .wpb-content-wrapper .tg-footer-inner:nth-child(3){flex:0 0 71px;}
  .wpb-content-wrapper .tg-footer-inner:nth-child(4),
  .wpb-content-wrapper .tg-footer-inner:last-child{flex:1 1 100%;margin-left:0;}
  .wpb-content-wrapper .tg-footer-base{padding:0 24px;margin-top:32px;}
  .wpb-content-wrapper .tg-footer-bottom{padding:32px 24px 40px;flex-wrap:wrap;
    align-items:flex-start;}
  .tg-footer-bottom > .wpb_column{width:100%;}
  /* Footer Bottom is 201x86: logo 24, then the Central Park credit and the
     copyright line on a 23px pitch, ending at 86. */
  /* Footer Bottom is 201x86 on mobile: the mark at 24 tall, then the credit
     and copyright lines on a 23px pitch. */
  .wpb-content-wrapper .tg-foot-wordmark{width:201px;margin:0 0 16px;}
  .tg-foot-legal p{text-align:left;font-size:13px;line-height:23px;}
  /* SUBSCRIBE is 16 + 14 + 46 + 14 + 44 = the file's 134. */
  .wpb-content-wrapper .tg-foot-label{line-height:16px;margin:0 0 14px;}
  .tg-foot-body{margin:0 0 14px;}
  .tg-foot-body p{margin:0;line-height:23px;}

  /* Mobile section headings are 24px — a 29px box — against the desktop 55.
     The clamp's 34px floor was well over it. Stay Up To Date is the one
     exception in the file at 28px, set on the page. */
  .wpb-content-wrapper .tg-h2{font-size:24px;}

  /* Sticky Book Now Bar — 430x68, pinned to the bottom of the viewport with a
     390x44 button inset 20. It has no desktop equivalent, so the row is hidden
     above this breakpoint. The matching padding on <body> keeps it from
     covering the end of the footer. */
  body{padding-bottom:68px;}
  .wpb-content-wrapper .tg-stickybar{display:block;position:fixed;left:0;right:0;
    bottom:0;z-index:60;background:var(--mid-dark-green);padding:12px 20px;}
  .tg-stickybar > .wpb_column{width:100%;}
  .wpb-content-wrapper .tg-stickybtn{margin:0;}
  .tg-stickybtn .vc_btn3{display:block;width:100%;text-align:center;}
}
@media (max-width:900px){
  .tg-menu > .wpb_column{width:100%;}
  .tg-menu-media{display:none;}
  .wpb-content-wrapper .tg-menu-nav{height:100vh;}
  .tg-navlink-book{margin-top:48px;}
}
@media (max-width:600px){
  :root{--gutter:20px;}
  .tg-grid > .wpb_column{width:100%;border-left:0;padding:0 0 32px;}
  .tg-card{margin-bottom:56px;}
  /* As with .tg-vcard-img: once the column is no longer the file's width, the
     fixed 360 stops being the design's number. */
  .tg-card-img img{height:auto;aspect-ratio:560/360;}
}

/* ---- .tg-photostrip — the image strip behind the frame's arrows ----
   The file draws four of these (the eatery gallery, its What's On row, and the
   two page galleries) as three frames with a left and right arrow over them.
   Three is what is VISIBLE, not the limit, so the row is a scroll strip whose
   items keep the drawn 348 / 521 / 347 rhythm as a repeating unit — every
   third photo is the wide one, at any length.

   The widths have to be a fixed basis rather than the proportional `flex:348
   1 0` a static grid can use: a grow factor would squeeze every item into view
   and there would be nothing left to scroll. 1216 is 348+521+347, so each item
   takes its share of the row once the two 16px gaps are removed. */
.tg-photostrip{position:relative;}
.tg-photostrip-track{
  /* It is a <ul>, so the theme's list styling has to come off or every photo
     gets a bullet and the track sits indented by the list's padding. */
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  /* The arrows are the affordance the design draws; a scrollbar under the
     photos is not in the frame. Swipe and keyboard still work. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.tg-photostrip-track::-webkit-scrollbar{display:none;}
.tg-photostrip-item{
  flex:0 0 calc((100% - 32px) * 348 / 1216);
  scroll-snap-align:start;
  margin:0;
}
.tg-photostrip-item:nth-child(3n+2){flex-basis:calc((100% - 32px) * 521 / 1216);}
.tg-photostrip-item:nth-child(3n+3){flex-basis:calc((100% - 32px) * 347 / 1216);}
.tg-photostrip-item img{display:block;width:100%;height:348px;object-fit:cover;}

/* One and two photos are the counts the frame never draws. Filling the row is
   the only sensible reading — a lone photo at 28% of the width with empty
   space beside it looks like a bug, not a layout. */
.tg-photostrip[data-count="1"] .tg-photostrip-item{flex-basis:100%;}
.tg-photostrip[data-count="2"] .tg-photostrip-item{flex-basis:calc((100% - 16px) * 348 / 869);}
.tg-photostrip[data-count="2"] .tg-photostrip-item:nth-child(2){flex-basis:calc((100% - 16px) * 521 / 869);}

/* 40x140 buttons over a 20x71 white backing, per the frame. Hidden until
   there is something to scroll — photostrip.js adds .is-scrollable. */
.tg-photostrip-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  display:none;
  align-items:center;
  justify-content:center;
  width:40px;
  height:140px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  z-index:2;
}
.tg-photostrip.is-scrollable .tg-photostrip-arrow{display:flex;}
.tg-photostrip-arrow::before{
  content:"";
  position:absolute;
  width:20px;
  height:71px;
  background:rgba(255,255,255,.89);
}
.tg-photostrip-arrow span{
  position:relative;
  font-family:Roboto,var(--font);
  font-weight:700;
  font-size:24px;
  line-height:1;
  color:var(--ink);
}
.tg-photostrip-arrow--prev{left:0;}
.tg-photostrip-arrow--next{right:0;}
.tg-photostrip-arrow:disabled{opacity:.35;cursor:default;}
.tg-photostrip-arrow:focus-visible{outline:2px solid var(--centralpark);outline-offset:-4px;}

@media (prefers-reduced-motion:reduce){
  .tg-photostrip-track{scroll-behavior:auto;}
}

@media (max-width:900px){
  /* Two up on a narrow screen, still snapping, arrows still live. */
  .tg-photostrip-item,
  .tg-photostrip-item:nth-child(3n+2),
  .tg-photostrip-item:nth-child(3n+3){flex-basis:calc((100% - 16px) / 2);}
  .tg-photostrip[data-count="1"] .tg-photostrip-item{flex-basis:100%;}
  .tg-photostrip-item img{height:240px;}
}

/* ---- [tg_gmap] — the Google Map ----
   The wrapper carries the shape and width as an inline style from the element,
   so one component serves whatever size a frame asks for. Neither an iframe
   nor a map container has an intrinsic aspect ratio the way an <img> does, so
   the height comes entirely from that ratio — Google will not draw into a
   container with no height, which is the usual cause of a blank map. */
.tg-gmap{position:relative;width:100%;background:var(--surface-light);}
.tg-gmap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;display:block;}
/* Google's own controls, on the site's type rather than Roboto. */
.tg-gmap-live{font-family:var(--font);}

/* ---- [tg_video] — a Vimeo clip sized to its frame ----
   Same arrangement as the map above: the shape is an inline aspect-ratio from
   the element, because an iframe has no intrinsic ratio and a box with no
   height draws nothing. The poster and the frame are stacked in the same
   space, poster underneath — video.js sets data-tg-playing once the player has
   painted, so a slow connection shows the still rather than a dark rectangle.
   The background colour matters for the gap before that: it is what the reader
   sees if the poster is missing. */
/* NO `width:100%` here, deliberately. A block element already fills its
   container, and pinning the width to 100% breaks the full-bleed case: with
   `margin:0 -56px` the used width stays at the container's, so the negative
   margins only SHIFT the box left instead of widening it, and the right edge
   lands three gutters short. Left at auto, the used width becomes
   container + 112 and the element reaches both edges. */
.tg-video{position:relative;overflow:hidden;background:var(--forest-dark);}
.tg-video-poster,
.tg-video-frame{position:absolute;top:0;left:0;width:100%;height:100%;display:block;}
.tg-video-poster{object-fit:cover;}
.tg-video-frame{border:0;}

/* Vimeo letterboxes inside its own iframe whenever the box's shape and the
   clip's shape disagree, and the bars it adds are TRANSPARENT — so the poster
   sitting underneath shows through them as a strip down each edge. That reads
   as a second, wrongly-cropped image rather than as a border, which is what
   makes it so obvious.

   This is object-fit:cover for an iframe, which cannot be done with object-fit
   because an iframe is not a replaced element in that sense. Instead the frame
   is given the CLIP's ratio and told it may not be smaller than the box on
   EITHER axis; the ratio then forces the short axis to grow past the box, and
   .tg-video's overflow:hidden crops the overhang. Centring is what makes the
   crop symmetrical.

   It replaces a flat `scale(1.02)`. A fixed 2% was enough while the box was
   locked to the clip's own 640/832 and only had to swallow a rounding error,
   but the homepage hero now sizes this box as 50% of the window by one
   screen — a ratio that changes with every window — and no single percentage
   covers that. This does, at any proportion, without knowing the layout.

   Background mode only. A real player SHOULD letterbox: cropping a clip
   somebody chose to watch would cut off the picture and the controls with it. */
.tg-video-bg .tg-video-frame{
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:auto;height:auto;min-width:100%;min-height:100%;
  /* Unset on a clip with an unparseable ratio, which computes the whole
     declaration to `auto` — the frame then simply fills the box, which is the
     behaviour this rule replaced. */
  aspect-ratio:var(--tg-video-ar);
  pointer-events:none;}

/* Cross-faded rather than switched, so the handover is not a flicker. The
   poster is still painted underneath, which is what covers the first frame
   while the player negotiates. */
.tg-video .tg-video-frame{opacity:0;transition:opacity .45s ease;}
.tg-video[data-tg-playing] .tg-video-frame{opacity:1;}

@media (prefers-reduced-motion:reduce){
  /* video.js never loads the frame here, so this is belt-and-braces against a
     cached src surviving a preference change. */
  .tg-video .tg-video-frame{opacity:0;transition:none;}
}

/* ==== HEADER — corrections ================================================
   These belong HERE, not in a page's custom CSS. The header, the burger and
   the #tg-menu overlay are site-wide chrome — the homepage and every interior
   page render the same component — so a fix held in one page's sheet leaves
   every other page broken. That is not hypothetical: these corrections were
   first written into the homepage's page CSS and Group Bookings (and every
   other interior page) kept the old behaviour.
   ========================================================================= */

/* 601–900. `.tg-header > .wpb_column` is sent to width:100% at 900 above, but
   the mobile treatment that makes that sane — hide Book Now, move it to the
   sticky bar — only starts at 600. In between, the header stacked into a
   full-width green burger bar with a second full-width light band beneath it
   holding the button: 128px of chrome and an obvious seam. Keep the two cells
   side by side across that band. */
@media (min-width:601px) and (max-width:900px){
  .wpb-content-wrapper .tg-header > .wpb_column{width:50%;}
}

@media (max-width:600px){
  /* The frames draw a 52px bar; it reads cramped with the wordmark in it, so
     the client asked for taller. */
  .tg-header{min-height:64px;}
  .tg-header > .wpb_column{min-height:64px;}
  /* The homepage wordmark is a vc_custom_heading and so carries js_composer's
     `.vc_do_custom_heading{margin-bottom:.625rem}`. Inside the centre-aligned
     flex row that 10px is part of the box, lifting the logo 5px above the
     burger's axis. The interior header sets its own margin and was already
     level — zeroing it here puts both headers on one rule. */
  .wpb-content-wrapper .tg-header .tg-wordmark{margin:0;}
}

/* Burger glyph. The icon span is given a fixed height above (27px, 16px on
   mobile) while its line box is the full font-size — which js_composer's own
   icon sizing resolves to ~30px whatever `line-height` is set to. A block box
   shorter than its line box neither clips nor centres it: the line renders
   from the box's top edge and simply overflows the bottom, so the ink centre
   fell ~7px below the bar's centreline and the burger sat visibly low against
   the wordmark. Letting the span be its own line box fixes it — at
   line-height:1 the line box equals the font bounding box, and for fa-bars the
   ink centre and the font-box centre coincide (ink 23up/1down, font 26up/4down,
   both 11 above the baseline), so the ink lands dead centre of the box. */
.wpb-content-wrapper .tg-header .tg-burger .vc_icon_element-icon{height:auto;line-height:1;}

/* DO NOT give `.vc_icon_element-inner` height:auto. The span above is
   position:absolute and so contributes no height to it; the inner collapses to
   0, and `.vc_icon_element-link` — the anchor to #tg-menu, and the burger's
   ONLY hit area — is sized height:100% of that inner. The tap target becomes
   24x0 and the menu cannot be opened at all. The span is centred on the
   inner's MIDPOINT, so the fixed heights above are what the centring reads;
   they are load-bearing, not decoration.
   At 34x27 / 24x16 that anchor is also well under the 44px minimum target, so
   grow it with negative insets — hit box only, nothing visible moves. */
.wpb-content-wrapper .tg-header .tg-burger .vc_icon_element-link{
  top:-14px;right:-14px;bottom:-14px;left:-14px;width:auto;height:auto;}

/* ==== CARD GRIDS — mobile is 2-up ========================================
   Every .tg-grid on the site is the same component: columns of image + title +
   body + button. The block above sends them to width:100% below 600, which
   leaves one enormous card per screen and a very long scroll; the homepage
   overrode that to 2-up per grid in its own page CSS, which is why What's On,
   Food Trucks and the eatery pages still stacked. It is one component, so it
   gets one mobile behaviour, set here.

   Two things have to move together. The columns carry the 24px side padding
   that insets the grid from the viewport, and the grids compensate with
   `padding:Npx calc(var(--gutter) - 24px)` — which at mobile is calc(20-24),
   i.e. negative, i.e. clamped to 0. So dropping the columns to an 11px gutter
   without giving the grid its own 24px back would put the cards hard against
   both screen edges. padding-left/right only, so each page keeps its own
   vertical rhythm.

   nth-child(2n+1) also drops the divider from the left column of each row; it
   has to beat `.tg-grid > .wpb_column + .wpb_column` at (0,3,0), which the
   extra pseudo-class does. An odd column count leaves the last row half full —
   inherent to 2-up, and the same as Who's Here's seven across four columns. */
@media (max-width:600px){
  /* `.tg-band.tg-grid`, not `.tg-grid`: a page's own
     `.wpb-content-wrapper .tg-<name>-grid{padding:...}` is the same (0,2,0) and
     is served in an inline <style> AFTER this file, so it wins a tie. Every one
     of these rows carries tg-band, and the extra class takes it to (0,3,0). */
  .wpb-content-wrapper .tg-band.tg-grid{padding-left:24px;padding-right:24px;}
  .wpb-content-wrapper .tg-grid > .wpb_column{width:50%;padding:0 11px 32px;}
  .wpb-content-wrapper .tg-grid > .wpb_column:nth-child(2n+1){border-left:0;padding-left:0;}
  .wpb-content-wrapper .tg-grid > .wpb_column:nth-child(2n){padding-right:0;}
}

/* ---- body copy in a 2-up mobile column ----
   ONE type standard, for every component that ends up two-across below 600 —
   not per component, because doing it per component is how Why Come got missed
   when the card grids were done. A card grid column is ~160px and a Why Come
   feature column ~155px; at the shared 16px/1.5 that is four or five words a
   line, which reads oversized against the title beside it. One step down the
   scale, to the eyebrow's size.

   Add to this list rather than writing a fresh rule next to a new component.
   The wrapper prefix is load-bearing: `.tg-feature-body p` is defined in Why
   Come's own page CSS at (0,1,1) and served in an inline <style> after this
   file, so (0,2,1) is what actually wins. */
@media (max-width:600px){
  .wpb-content-wrapper .tg-grid .tg-vcard-body p,
  .wpb-content-wrapper .tg-why-row .tg-feature-body p,
  .wpb-content-wrapper .tg-space-row .tg-space-body p{font-size:14px;}
}

/* ---- the divider between a two-column pair ----
   `.tg-grid` draws this with a border on the column edge, which works there
   because its columns carry symmetric padding and the edge IS the middle of
   the gutter. `.tg-space-row` is built differently — `flex` with `gap:40px`
   and `flex:1 1 0` columns, so the columns have no padding and their edges sit
   at the OUTSIDE of the gutter. A border there would hug the text instead of
   splitting the gap, and adding padding to centre it would make the two
   columns unequal widths.
   A positioned pseudo-element avoids both: it draws the line 20px left of the
   second column, i.e. the middle of that 40px gap, and touches no box at all.
   -20px is half the row's gap — if the gap changes, change this with it. */
.tg-space-row > .wpb_column + .wpb_column{position:relative;}
.tg-space-row > .wpb_column + .wpb_column::before{
  content:"";position:absolute;top:0;bottom:0;left:-20px;
  border-left:1px solid var(--rule-light);}