/*
Theme Name: Barmotion 2026
Description: A standalone, from-scratch replacement for Porcelain (end of life). Not a child theme — it does not depend on Porcelain's functions, options framework, or templates. It re-registers the "portfolio" post type and taxonomy itself so the existing 14 bar pages keep working after switching themes. The homepage (front-page.php) is fully built out; other page types (page.php, single.php, index.php) are clean, functional fallbacks to be designed properly in a follow-up pass — see README.txt.
Author: Barmotion
Version: 0.9.575
Requires PHP: 7.4
*/

:root{
	--bg:          #0d1a1f;
	--bg-panel:    #12232a;
	--bg-panel-2:  #17303a;
	--accent:      #94c93f;
	--accent-dim:  #6d9930;
	--accent-soft: rgba(148,201,63,.14);
	--ink:         #eef1ea;
	--ink-muted:   #a7b6ae;
	--ink-faint:   #6f8079;
	--rule:        rgba(238,241,234,.10);
	--maxw:        1440px;
	--gutter:      5%;     /* side gutter on every page (same 5% as the nav and footer); content is centred at --maxw on wide screens */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	background:var(--bg);
	color:var(--ink-muted);
	font-family:'Open Sans',Helvetica,Arial,sans-serif;
	font-size:16px;
	line-height:1.38;   /* body-copy leading — same as the homepage (.bm-home) on every page */
	-webkit-font-smoothing:antialiased;
}
/* body-qualified + !important on font-family: a stale "Custom CSS & JS"
   snippet left over from the old Porcelain theme (confirmed live, an
   inline <style> tag in <head>, separate from anything in this theme)
   sets "h1,h2,h3,h4,h5,h6{font-family:'open sans' !important}" sitewide
   — that snippet also has Porcelain-only rules (#hp-headings, #pop-img,
   .header-wrapper etc.) that are just dead weight now, but this one
   line clobbers every heading regardless of theme since it's blanket
   and !important. Can't edit that plugin's stored CSS from here, so
   this out-specifies AND out-importants it instead of relying on
   source order, which isn't reliable across plugin updates. Also adds
   the uppercase treatment headings were always meant to have. */
body h1, body h2, body h3{
	font-family:'Oswald','Open Sans',Helvetica,Arial,sans-serif !important;
	color:var(--ink);
	text-transform:uppercase;
	letter-spacing:.01em;
	margin:0;
	text-wrap:balance;
	font-weight:300;
	line-height:.9;
}
/* House rule (2026-09-24, revised twice same day): plain ink heading
   text is always non-bold (300) — only a <b>/<strong>/accent-coloured
   phrase inside it is bold (700), sitewide, no exceptions, INCLUDING the
   home page and How It Works (both previously exempted — no longer;
   user: "this rule must apply to all pages, incl home"). Line-height
   stays tight (.9, from the home-page-match revision) since that part
   was never in question, only weight. Page-specific heading rules that
   need a different weight/line-height still win via specificity, same
   as before — this is just the fallback every
   heading gets unless something more specific says otherwise. */
body h1 b, body h1 strong, body h2 b, body h2 strong, body h3 b, body h3 strong{
	font-weight:700;
}
a{ color:var(--accent); text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
	outline:2px solid var(--accent); outline-offset:3px;
}
img,svg{ display:block; max-width:100%; }
/* Sitewide default: every photo/image frame gets square corners, not
   rounded ones. Targets the img tag itself plus every shared
   photo-wrapper class that currently sets its own border-radius (hero
   art, editorial/brand-gallery photos, placeholders, inclusion photos,
   visual-break statements) — !important since several of those are more
   specific single-purpose rules that would otherwise win. Apply this to
   any new photo component too, rather than giving it its own radius. */
img, .hero-art, .hero-art__gallery, .photo-placeholder,
.editorial__photo, .brand-gallery__main, .brand-gallery__main-photo,
.brand-gallery__detail, .brand-gallery__copy-photo, .inclusion__photo,
.visual-break, .photo-grid__item .hero-art{
	border-radius:0 !important;
}
.wrap{ max-width:calc(var(--maxw) + 2 * var(--gutter)); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.eyebrow{
	font-family:'Oswald',sans-serif; font-size:.72rem; letter-spacing:.22em;
	text-transform:uppercase; color:var(--accent); font-weight:600; display:block;
}
.btn{
	font-family:'Oswald',sans-serif; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
	font-weight:600; padding:14px 26px; border-radius:2px; display:inline-flex; align-items:center; gap:8px;
	transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
	border:1px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--accent); color:#0d1a1f; }
.btn-primary:hover{ background:#a8dc55; transform:translateY(-1px); }
.btn-ghost{ border-color:var(--accent); border-width:2px; color:var(--ink-muted); background:none; }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* ---- site chrome ---- */
.site-nav{
	display:flex; align-items:center; justify-content:space-between;
	padding:14px 5%; border-bottom:1px solid var(--rule);
	position:sticky; top:0; z-index:30; background:var(--bg);
}
.site-nav .logo img{ height:84px; width:auto; display:block; }
.nav-menu{ list-style:none; display:flex; gap:28px; margin:0; padding:0; }
.nav-menu a{
	font-family:'Oswald',sans-serif; font-size:15px; letter-spacing:.08em;
	text-transform:uppercase; color:var(--ink);
}
.nav-menu a:hover{ color:var(--accent); }
.nav-toggle{ display:none; background:none; border:0; color:var(--ink); font-size:1.4rem; cursor:pointer; }

/* ---- Dropdown submenus (e.g. Event Solutions > Exhibitions/
   Conferences/Brand Activations) — added in wp-admin under Appearance →
   Menus. On desktop the panel opens on :hover; nav.js only intercepts
   the parent link's click on touch devices (no hover), where the first
   tap has to open the submenu instead of navigating straight through —
   see nav.js for the full behaviour. */
.nav-menu li{ position:relative; }
.nav-menu > li.menu-item-has-children > a{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.nav-menu > li.menu-item-has-children > a::after{
	content:''; width:6px; height:6px; margin-top:-3px;
	border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
	transform:rotate(45deg); transition:transform .15s ease;
}
.nav-menu > li.menu-item-has-children:hover > a::after,
.nav-menu > li.menu-item-has-children.is-open > a::after{ transform:rotate(-135deg); margin-top:3px; }

.sub-menu{
	list-style:none; margin:0; padding:8px; position:absolute; top:100%; left:0; margin-top:14px;
	min-width:220px; background:var(--bg-panel); border:1px solid var(--rule); border-radius:6px;
	box-shadow:0 14px 30px rgba(0,0,0,.45);
	opacity:0; visibility:hidden; transform:translateY(6px);
	transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
	z-index:50;
}
.nav-menu > li.menu-item-has-children:hover > .sub-menu,
.nav-menu > li.menu-item-has-children.is-open > .sub-menu{
	opacity:1; visibility:visible; transform:translateY(0);
}
.sub-menu a{
	display:block; padding:9px 12px; border-radius:4px; white-space:nowrap;
	font-size:15px; letter-spacing:.05em;
}
.sub-menu a:hover{ background:var(--bg-panel-2); color:var(--accent); }
/* 15px menu text needs a little less room between items on narrower desktops; the last two items' dropdowns open leftwards so it never pushes the page wider. */
@media (min-width:901px){ .nav-menu > li.menu-item-has-children:nth-last-child(-n+2) > .sub-menu{ left:auto; right:0; } }
@media (min-width:901px) and (max-width:1150px){ .nav-menu{ gap:14px; } .nav-menu a{ letter-spacing:.04em; } }
@media (min-width:901px) and (max-width:1000px){ .nav-menu{ gap:10px; } .nav-menu a{ letter-spacing:.02em; } .site-nav .logo img{ height:60px; } }

/* ---- new site-wide footer ---- */
.site-footer-new{ background:var(--bg-panel); border-top:1px solid var(--rule); }
.footer-top{
	display:grid; grid-template-columns:1.2fr 1fr; gap:40px;
	padding-top:clamp(36px,5vw,52px); padding-bottom:clamp(32px,4vw,44px);
}
.footer-intro h2{ font-size:clamp(1.4rem,2.6vw,1.9rem); font-weight:300; max-width:none; white-space:nowrap; margin:0; }
.footer-intro h2 b{ color:var(--accent); font-weight:700; }
.footer-intro > p{ margin:10px 0 0; max-width:44ch; color:var(--ink-muted); font-size:.9rem; }
.footer-signup{ display:flex; max-width:300px; margin-top:16px; border:1px solid var(--rule); border-radius:4px; overflow:hidden; }
.footer-signup-success{ margin-top:16px; padding:14px 16px; max-width:300px; border:1px solid var(--rule); border-radius:4px; color:var(--accent); font-size:.9rem; }
.footer-signup input{
	flex:1; min-width:0; background:transparent; border:0; padding:10px 14px;
	color:var(--ink); font-family:'Open Sans',sans-serif; font-size:.85rem;
}
.footer-signup input::placeholder{ color:var(--ink-faint); }
.footer-signup input:focus{ outline:none; }
.footer-signup .btn{ border-radius:0; }
.footer-signup .btn:disabled{ opacity:.6; cursor:not-allowed; }
.footer-social{ display:flex; gap:12px; margin-top:16px; }
.footer-social a{
	width:32px; height:32px; border:1px solid var(--rule); border-radius:50%;
	display:flex; align-items:center; justify-content:center; color:var(--ink-muted);
	transition:border-color .15s ease, color .15s ease;
}
.footer-social a:hover{ border-color:var(--accent); color:var(--accent); }
.footer-cols{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.footer-col h3{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 10px; }
.footer-col a:not(.btn), .footer-col p{ display:block; font-size:.85rem; color:var(--ink-muted); margin:0 0 8px; }
.footer-col a:not(.btn):hover{ color:var(--accent); }
.footer-col p{ line-height:1.38; }
.footer-col .contact-detail{ margin-bottom:10px; font-size:.85rem; }
.footer-bottom{
	padding:14px 5%; border-top:1px solid var(--rule);
	font-size:.75rem; color:var(--ink-faint);
}
/* Footer loads on every page via get_footer(), so it can't be scoped to
   one template's body class like the bar-v2/how-it-works width bump
   was — instead this overrides just these two .wrap usages directly
   (2-class selector beats the shared 1-class .wrap{max-width:var(--maxw)}
   rule), so the footer matches the new 1320px content width everywhere,
   without changing --maxw itself or any other page's .wrap. */
.footer-top.wrap, .footer-bottom.wrap{ max-width:1440px; padding-left:5%; padding-right:5%; }
@media (max-width:820px){
	.footer-top{ grid-template-columns:1fr; gap:28px; }
	.footer-cols{ grid-template-columns:1fr 1fr; gap:24px; }
}
@media (max-width:560px){
	.footer-cols{ grid-template-columns:1fr; }
}
.footer-ticker{ background:var(--accent); color:var(--bg); padding:14px 0; overflow:hidden; white-space:nowrap; }
.footer-ticker .ticker-track span{ color:var(--bg); font-weight:600; }
.ticker{
	border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
	background:var(--bg-panel); overflow:hidden; white-space:nowrap; padding:16px 0;
}
/* Bar pages only — the homepage's ticker stays full-bleed edge to edge,
   but on bar pages the rest of the page is boxed to --maxw now, so this
   matches that instead of being the one full-width band on the page. */
.ticker--bar{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
/* ver2 no longer uses the ticker at all (removed, nothing put in its
   place — a divider was tried there for a bit and has also been
   removed). */
.ticker-track{ display:inline-flex; gap:36px; animation:bm-scroll 32s linear infinite; }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }
@keyframes bm-scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.ticker-track span{
	font-family:'Oswald',sans-serif; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
	color:var(--ink-faint); display:inline-flex; align-items:center; gap:36px;
}
.ticker-track span em{ color:var(--accent); font-style:normal; }

/* ---- hero ---- */
.hero{
	display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center;
	padding:50px var(--gutter);
}
.hero h1{ font-size:clamp(2.3rem,5vw,3.6rem); line-height:.9; font-weight:300; }
.hero h1 b{ font-weight:700; color:var(--ink); }
/* The word this replaces every couple seconds (Coffee / Smoothie / ...)
   — see js/rotate-word.js, enqueued on the front page only. Bold like
   the other emphasised hero word, but in the accent colour so it reads
   as the part that's changing. */
.rotate-word{ display:inline-block; font-weight:700; color:var(--accent); transition:opacity .25s ease; }
/* Bar pages — same light weight as .hero h1 above (the 700 override
   this used to carry is gone); barmotion_bar_hero_heading_html()
   (functions.php) wraps the bar's own name in <b>, which picks up the
   shared .hero h1 b rule above (bold, ink) plus this accent-colour
   override below — bar pages only, doesn't touch the homepage hero's
   own <b> emphasis word. The heading's other emphasised part (the last
   word, wrapped in <em>) is the reverse: plain ink, not accent — same
   weight as the rest of the heading, just still not italic. */
.hero--bar h1 b{ color:var(--accent); }
.hero--bar h1 em{ font-style:normal; color:var(--ink); }
/* Hero eyebrow only — the shared .eyebrow{font-size:.72rem} above is used
   for many non-hero section eyebrows too (9-21 times per page on some
   templates), so this is scoped to just the hero's own eyebrow rather
   than bumping every eyebrow sitewide. Confirmed house style
   (2026-09-15): 15.36px; changed to 15px on every page's hero 2026-10-14
   (user request); the gap under it is 12px sitewide. */
.hero .eyebrow{ margin-bottom:16px; font-size:15px; }
.hero p.sub{ margin-top:20px; max-width:590px; font-size:16px; }
/* Bar pages only — the homepage's .sub is a longer descriptive sentence,
   better in body copy; the mockup's tagline is a short punchy line, set
   in Oswald like the rest of the bar-page hero. */
.hero--bar p.sub{ font-family:'Oswald',sans-serif; font-weight:400; text-transform:none; font-size:1.15rem; color:var(--ink); }
/* ver2's hero-art grid-ratio override (was 1.15fr 1.2fr, ~20% bigger
   than the shared ratio) has been removed — hero-art here should now
   match the homepage's exactly, so it just uses the shared .hero rule
   above (1.15fr .85fr) like every other bar page and the homepage. */
.hero-cta{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
/* ver2's hero text was centred for a bit — reverted back to the shared
   rule's default left alignment (same as every other bar page/the
   homepage). */
.hero-art{
	aspect-ratio:4/3; border-radius:4px;
	background:
		radial-gradient(circle at 30% 25%, var(--accent-soft), transparent 60%),
		linear-gradient(155deg, var(--bg-panel-2), var(--bg-panel));
	border:0;
	display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.hero-art img{ width:100%; height:100%; object-fit:cover; }

/* Conference (template-conference.php) and Exhibitions (template-
   exhibitions.php) — the only two pages still using the bare .hero/
   .hero-art boxed treatment above with no page-specific override. Same
   full-bleed gallery-photo-behind-text hero + dark blend every other page
   now uses (see the bar-v2 block further down for the full reasoning). */
.page-template-template-conference-php,
.page-template-template-exhibitions-php,
.page-template-template-about-php{ --maxw: 1440px; }
.page-template-template-conference-php .hero,
.page-template-template-exhibitions-php .hero,
.page-template-template-about-php .hero{
	position:relative; overflow:hidden; display:block;
	min-height:0; max-width:none; margin-left:0; margin-right:0;
	padding-top:0; padding-bottom:0;
	padding-left:max(var(--gutter), calc((100% - var(--maxw))/2));
	padding-right:max(var(--gutter), calc((100% - var(--maxw))/2));
}
.page-template-template-conference-php .hero > div:first-child,
.page-template-template-exhibitions-php .hero > div:first-child,
.page-template-template-about-php .hero > div:first-child{
	position:relative; z-index:1; max-width:610px;
	padding-block:50px;
}
.page-template-template-conference-php .hero > .hero-art,
.page-template-template-exhibitions-php .hero > .hero-art,
.page-template-template-about-php .hero > .hero-art{
	position:absolute; top:0; right:0; bottom:0; z-index:0; width:60%;
	aspect-ratio:auto; max-width:none; border-radius:0; border:0; background:none;
}
/* Gradient lives on .hero itself, NOT .hero-art — .hero-art is now only
   60% wide, so a gradient scoped to it would have its 0-100% stops span
   just that narrow box instead of the full hero, breaking the "solid
   black past the image's own left edge" effect this is built on. */
.page-template-template-conference-php .hero:after,
.page-template-template-exhibitions-php .hero:after,
.page-template-template-about-php .hero:after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(90deg, #000 0%, #000 42%, rgba(13,26,31,.15) 65%, rgba(13,26,31,.45) 100%);
}
/* Conference only: the hero text column is wider (740px, was 610px) and its two intro paragraphs run the full column width (they were capped at 590px). */
@media (min-width:901px){
	.page-template-template-conference-php .hero > div:first-child{ max-width:740px; }
	.page-template-template-conference-php .hero .sub{ max-width:none; }
}
/* Exhibitions: the same wider hero text column as Conference (740px, was 610px), paragraphs running the full column width. */
@media (min-width:901px){
	.page-template-template-exhibitions-php .hero > div:first-child{ max-width:740px; }
	.page-template-template-exhibitions-php .hero .sub{ max-width:none; }
}
/* Conference hero is at least 525px tall; the text block stays vertically centred when the hero is taller than its content. */
.page-template-template-conference-php .hero{ display:flex; align-items:center; min-height:525px; }
.page-template-template-conference-php .hero > div:first-child{ width:100%; }
/* Exhibitions hero: the same — at least 525px tall, text vertically centred. */
.page-template-template-exhibitions-php .hero{ display:flex; align-items:center; min-height:525px; }
.page-template-template-exhibitions-php .hero > div:first-child{ width:100%; }
/* Conference hero heading: line 2 ("Around Your Conference") is green and bold. */
.page-template-template-conference-php .hero h1 b{ color:var(--accent); font-weight:700; }
@media (max-width:900px){
	.page-template-template-conference-php .hero > div:first-child,
	.page-template-template-exhibitions-php .hero > div:first-child,
	.page-template-template-about-php .hero > div:first-child{ max-width:90%; }
	.page-template-template-conference-php .hero > .hero-art,
	.page-template-template-exhibitions-php .hero > .hero-art,
	.page-template-template-about-php .hero > .hero-art{ width:100%; }
	.page-template-template-conference-php .hero:after,
	.page-template-template-exhibitions-php .hero:after,
	.page-template-template-about-php .hero:after{
		background:linear-gradient(180deg, rgba(13,26,31,.92), rgba(13,26,31,.6) 75%, rgba(13,26,31,.87));
	}
}

/* [Conference: Start the Day Right] 40/30/30 three-up — copy, the
   section's existing photo, then a short highlights list — instead of
   the shared .editorial--photo-lg 2-up pattern this template's other
   .editorial sections use. */
/* (.hero-pullquote--20 statements: sized by the central white-Oswald label rule at the end of this file.) */

/* [Exhibitions: Hospitality With a Purpose] text left / 4-up icon grid
   right (no photo), matching the approved reference image — the
   closing statement sits on its own full-width row under the icons
   (flex:1 0 100% forces the wrap, same technique as
   .conference-unbranded__quote). */
/* The photo column is exactly as wide as the photo collage (49.5% of the space after the gap: what the collage measured as
   90% of the old 55% column), so the text gets everything else. */
.page-template-template-exhibitions-php .exhibition-purpose{
	grid-template-columns:minmax(0,1fr) minmax(0,calc((100% - 56px) * .495)); gap:56px; align-items:stretch;
}
.exhibition-purpose__options{ display:flex; flex-wrap:wrap; gap:28px 20px; margin-top:24px; }
.exhibition-purpose__option{ flex:1; min-width:110px; }
/* Photo collage: one large photo on the left (3 parts) with two rectangles stacked beside it (2 parts), stretched to the full height of the text column. */
.exhibition-purpose__photos{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); grid-template-rows:1fr 1fr; gap:10px; width:100%; height:547px; align-self:center; }   /* fills its column (607px wide at 1440, 685px at full width); fixed at the 10%-smaller height, whatever the text height; centred beside the text */
.exhibition-purpose__photo{ position:relative; overflow:hidden; background:var(--bg-panel); }
.exhibition-purpose__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.exhibition-purpose__photo--square{ grid-column:1; grid-row:1 / span 2; }
.exhibition-purpose__icon{
	width:56px; height:56px; border-radius:50%; background:var(--accent-soft);
	display:flex; align-items:center; justify-content:center; color:var(--accent); margin-bottom:14px;
}
/* "Reason to Stop." in the hero h1 is accent green on this page (the shared .hero h1 b is plain ink). */
.page-template-template-exhibitions-php .hero h1 b{ color:var(--accent); }
.exhibition-purpose__icon svg{ width:26px; height:26px; }
.exhibition-purpose__option h3{ font-size:1rem; margin:0 0 6px; }
.exhibition-purpose__option p{ font-size:.85rem; color:var(--ink-muted); margin:0; }
/* "The objective comes first." sits directly under the text (10px under the last paragraph), above the four options. */
.exhibition-purpose .exhibition-purpose__quote.pullquote{ margin-top:-6px !important; margin-bottom:0 !important; text-align:left; }

/* [Exhibitions: Or Give Them Something They Weren't Expecting] 2 x 2 grid
   of 4 photos left, copy right, stretched to match the copy
   column's height (out-of-flow img technique — see conference-coffee). */
.page-template-template-exhibitions-php .exhibition-variety{ align-items:stretch; }
.exhibition-variety__photos{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:10px; height:100%; }
/* sides swapped: the copy on the left, the four photos on the right (same column sizes as before); stacked on narrow screens the photos stay first */
@media (min-width:821px){ .page-template-template-exhibitions-php .exhibition-variety .exhibition-variety__photos{ order:2; } }
.exhibition-variety__photo{ position:relative; overflow:hidden; background:var(--bg-panel); }
.exhibition-variety__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:820px){
	.exhibition-variety__photos{ height:auto; }
	.exhibition-variety__photo{ aspect-ratio:1; }
}

/* [Exhibitions: Put Your Brand in Their Hand] main photo + 3 detail
   photos left, copy + a 5-up branding icon row right — matching the
   approved reference image. */
.exhibition-brand__photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.exhibition-brand__photo{ position:relative; aspect-ratio:1; overflow:hidden; background:var(--bg-panel); }
.exhibition-brand__photo--main{ grid-column:1 / -1; aspect-ratio:16/10; }
/* Desktop only: 16:10, then 100px shorter (padding % follows the photo's width), but never flatter than 45% of its width
   (small desktop widths, where the column is narrow). Phones keep the plain 16:10. */
@media (min-width:901px){
	.exhibition-brand__photo--main{ aspect-ratio:auto; height:auto; padding-top:max(calc(62.5% - 100px), 45%); }
}
.exhibition-brand__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* "Your Stand → Their Hand → Around the Show": the same type as the pullquote under it (Oswald 500, 20px, normal case), sitting
   directly on top of it with no gap. Arrows stay green. */
.exhibition-brand .process-row{ font-size:20px; font-weight:500; text-transform:none; letter-spacing:normal; line-height:1.38; margin-bottom:0; }
.exhibition-brand .process-row + .pullquote{ margin-top:0 !important; }
/* Styled like the Conference sponsor .icon-stepper (PNG line art): light line drawings 45px tall with no circle, the same
   label type, spread evenly across the column. No arrows: these are a list, not steps. */
.exhibition-brand__icons{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; width:100%; margin:24px 0; }
.exhibition-brand__icon-item{ display:flex; flex-direction:column; align-items:center; gap:12px; flex:1; min-width:0; text-align:center; }
.exhibition-brand__icon{
	height:45px; display:flex; align-items:center; justify-content:center; color:var(--ink); flex:0 0 auto;
}
.exhibition-brand__icon svg{ width:45px; height:45px; stroke-width:1.2; }
.exhibition-brand__icon-item span:last-child{
	font-family:'Oswald',sans-serif; font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink); text-align:center;
}
/* narrow column: wrap the five items instead of squashing them */
@media (max-width:1100px){
	.exhibition-brand__icons{ flex-wrap:wrap; justify-content:center; gap:20px 12px; }
	.exhibition-brand__icon-item{ flex:1 1 calc(33.333% - 12px); }
}
@media (max-width:700px){ .exhibition-brand__icon-item{ flex-basis:calc(50% - 12px); } }

/* [Exhibitions: Busy Is Good] 10-up icon row spanning the section's
   full (1440) width, matching the approved reference image. */
.page-template-template-exhibitions-php .exhibition-ready__in{ max-width:1440px; text-align:left; }
/* Same .statement p centring fix as the conference page's left-aligned
   .statement columns — the sitewide .statement p rule caps paragraphs
   at 60ch with auto margins, which offsets them from the eyebrow/
   heading above once the column is left- rather than centre-aligned. */
.page-template-template-exhibitions-php .exhibition-ready__in > p{ max-width:none; margin-left:0; margin-right:0; margin-top:10px; }
.exhibition-ready__icons{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px 12px; margin:28px 0; }
.exhibition-ready__icon-item{ display:flex; flex-direction:column; align-items:center; gap:10px; flex:1; min-width:90px; text-align:center; }
.exhibition-ready__icon-item svg{ width:28px; height:28px; color:var(--accent); flex:0 0 auto; }
.exhibition-ready__icon-item span{
	font-family:'Oswald',sans-serif; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--ink);
}
@media (max-width:900px){ .exhibition-ready__icon-item{ min-width:30%; } }
@media (max-width:560px){ .exhibition-ready__icon-item{ min-width:40%; } }

/* [Exhibitions] 30px section-padding rhythm, matching the other
   rebuilt pages (conference, sustainability, brand marketing). */
.page-template-template-exhibitions-php section.editorial,
.page-template-template-exhibitions-php section.statement{
	padding-top:30px; padding-bottom:30px;
}
/* [Coffee Gets People Talking] keeps its natural band-grey shade/border
   so it reads as its own section against Think Beyond Coffee below —
   the actual "grey line under An Exhibition Favourite" turned out to be
   the .editorial--photo-lg h2 divider rule below, not the band border. */
.page-template-template-exhibitions-php .exhibition-coffee.editorial--photo-lg .editorial__copy h2{
	border-top:0; padding-top:0; margin-top:0;
}
/* "Good coffee gets people talking." with the Specialty Coffee Bars button on the same line, pushed to the far right of the copy
   column (wraps under the quote when there isn't room). No extra gap above it: just the paragraph spacing. */
.exhibition-coffee__close{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; margin-top:0; }
.exhibition-coffee__close .pullquote{ margin:0 !important; }
.exhibition-coffee__close .btn{ flex:0 0 auto; }

/* [Exhibitions: Before the Stand Is Built + Fully Managed Exhibition
   Hospitality] 50/50 split — left column's 4-up spec row (Counter/
   Under Counter/Behind the Bar/Technical), right column's two
   process-row flows, matching the approved reference image. */
.page-template-template-exhibitions-php .exhibition-managed__in{
	display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; text-align:left; max-width:1440px;
}
.exhibition-managed__col:first-child{ border-right:1px solid var(--rule); padding-right:56px; }
.page-template-template-exhibitions-php .exhibition-managed__col > p{ max-width:none; margin-left:0; margin-right:0; }
.exhibition-managed__specs{ display:flex; flex-wrap:wrap; gap:20px; margin:20px 0; }
.exhibition-managed__spec{ flex:1; min-width:110px; }
.exhibition-managed__spec svg{ width:24px; height:24px; color:var(--accent); margin-bottom:10px; }
.exhibition-managed__spec h3{ font-size:.85rem; margin:0 0 4px; }
.exhibition-managed__spec p{ font-size:.75rem; color:var(--ink-muted); margin:0; }
@media (max-width:900px){
	.page-template-template-exhibitions-php .exhibition-managed__in{ grid-template-columns:1fr; }
	.exhibition-managed__col:first-child{ border-right:0; padding-right:0; border-bottom:1px solid var(--rule); padding-bottom:40px; margin-bottom:8px; }
}

/* [Exhibitions: Exhibition Hospitality in Action] copy left, 3-across
   photo strip right, matching the approved reference image. */
.page-template-template-exhibitions-php .exhibition-action{
	grid-template-columns:minmax(0,2fr) minmax(0,3fr); align-items:center;
}
.exhibition-action__photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.exhibition-action__photo{ position:relative; aspect-ratio:1; overflow:hidden; background:var(--bg-panel); }
.exhibition-action__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){
	.page-template-template-exhibitions-php .exhibition-purpose{ grid-template-columns:1fr; }
	.exhibition-purpose__option{ min-width:45%; }
	.exhibition-purpose__photos{ width:auto; max-width:640px; height:auto; min-height:0; }
	.exhibition-purpose__photo--square{ aspect-ratio:1; }
}
/* Conference Coffee: 50/50 — copy on the left (with the three highlights under the pullquote), photo on the right. */
.page-template-template-conference-php .conference-coffee{
	grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:stretch;
}
/* the three highlights sit side by side in one row (they stack only on phones) */
/* pullquote: 10px under the paragraph above it (was 28px), 36px above the highlights (was 20px) */
.page-template-template-conference-php .conference-coffee .pullquote{ margin-top:-6px !important; }
.conference-coffee__highlights{ display:flex; flex-direction:row; flex-wrap:nowrap; gap:18px 20px; justify-content:flex-start; margin:36px 0 24px; }
.conference-coffee__item{ display:flex; flex:1 1 0; min-width:0; gap:12px; align-items:flex-start; }
@media (max-width:560px){ .conference-coffee__highlights{ flex-direction:column; } }
.conference-coffee__item svg{ width:28px; height:28px; flex:0 0 auto; color:var(--accent); margin-top:2px; }
.conference-coffee__item h3{ font-size:1rem; margin:0 0 4px; }
.conference-coffee__item p{ font-size:.85rem; color:var(--ink-muted); margin:0; }
/* Photo height matches the copy column (the tallest of the three items)
   instead of its own fixed aspect-ratio — same out-of-flow-img fix used
   on the Sustainability page: an aspect-ratio-based height still gets
   used as this item's max-content contribution to the row's auto
   height even with min-height:0, so the <img> has to come out of flow
   entirely for the row to size off the text alone. */
.page-template-template-conference-php .conference-coffee .editorial__photo{
	aspect-ratio:auto !important; position:relative; margin:0;
}
.page-template-template-conference-php .conference-coffee .editorial__photo img{
	position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
@media (max-width:900px){
	.page-template-template-conference-php .conference-coffee{ grid-template-columns:1fr; }
	.page-template-template-conference-php .conference-coffee .editorial__photo{ aspect-ratio:4/3 !important; position:relative; width:100%; max-width:none; }
}

/* [Conference: Conference Breaks] 50/50 — existing copy left, an
   icon-circle Refresh→Gather→Talk→Connect stepper + the closing
   pullquote right (replaces the old 16:9 photo above the heading). */
.page-template-template-conference-php .conference-break__in{
	display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; text-align:left; max-width:1440px;
}
/* The sitewide .statement p rule centres paragraphs via max-width:60ch
   + auto margins, built for .statement-in's own centred default. This
   column is left-aligned instead, so without this override the
   paragraphs (capped at 60ch, auto-centred within a wider column) sit
   ~30px right of the eyebrow/heading above them, which have no such
   cap. */
.page-template-template-conference-php .conference-break__copy p{ max-width:none; margin-left:0; margin-right:0; }
.conference-break__visual{ display:flex; flex-direction:column; gap:28px; align-items:center; text-align:center; }
/* [Conference] Shared icon-circle stepper — used here (Refresh/Gather/
   Talk/Connect) and in Give Sponsors More Visibility (Sponsor/
   Hospitality/Delegate/Around the Conference). space-between so it
   fills the full width of whatever column it sits in, rather than
   clustering in the middle; icons/labels sized up to match. */
.icon-stepper{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; width:100%; }
.icon-stepper__step{ display:flex; flex-direction:column; align-items:center; gap:12px; flex:1; min-width:0; }
.icon-stepper__step > span:last-child{
	font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:.85rem; font-weight:700; letter-spacing:.03em; color:var(--ink); text-align:center;
}
.icon-stepper__icon{
	width:72px; height:72px; border-radius:50%; border:1px solid var(--rule);
	display:flex; align-items:center; justify-content:center; color:var(--accent); flex:0 0 auto;
}
.icon-stepper__icon svg{ width:34px; height:34px; }
/* PNG line-art icons (the same set as Brand & Marketing's "Your Bar > Your Cup > Your Guest > Around the Event" flow): dark art on transparent,
   inverted to light for this theme, with no circle round them. */
.icon-stepper__icon--img{ width:auto; height:45px; border:0; border-radius:0; }   /* 20% smaller than the first version (56px) */
.icon-stepper__icon--img img{ height:45px; width:auto; max-width:58px; object-fit:contain; filter:invert(1); display:block; }
/* in a narrow column (tablet width) the four icon steps wrap two by two instead of overflowing */
@media (max-width:1100px){
	.icon-stepper:has(.icon-stepper__icon--img){ flex-wrap:wrap; justify-content:center; gap:20px 12px; }
	.icon-stepper:has(.icon-stepper__icon--img) .icon-stepper__arrow{ display:none; }
	.icon-stepper:has(.icon-stepper__icon--img) .icon-stepper__step{ flex:1 1 calc(50% - 12px); }
}
.icon-stepper__arrow{ color:var(--ink-faint); font-size:1.4rem; font-style:normal; flex:0 0 auto; margin-top:26px; }
.icon-stepper__quote{ font-size:20px !important; }
@media (max-width:700px){
	.icon-stepper{ flex-wrap:wrap; justify-content:center; }
	.icon-stepper__arrow{ display:none; }
}
@media (max-width:800px){
	.page-template-template-conference-php .conference-break__in{ grid-template-columns:1fr; text-align:center; }
}

/* Shared labelled placeholder — sits inside any photo slot that has no
   image set yet (hero-art, brand-gallery__main/__detail, or as a class
   added straight onto a section that would otherwise use an inline
   background-image, like .visual-break/.bar-closer--photo). Same
   gradient tokens as .hero-art's own empty-state background above, plus
   a visible label so an empty slot reads as "photo needed here" rather
   than just a flat/blank panel. */
.photo-placeholder{
	width:100%; height:100%; display:grid; place-items:center; text-align:center;
	padding:16px; gap:8px;
	background:
		radial-gradient(circle at 30% 25%, var(--accent-soft), transparent 60%),
		linear-gradient(155deg, var(--bg-panel-2), var(--bg-panel));
	color:var(--ink-muted); font-family:'Oswald',sans-serif; font-size:.85rem;
}
.photo-placeholder span{
	border:1px solid var(--rule); border-radius:2px; padding:6px 12px;
	text-transform:uppercase; letter-spacing:.08em; font-size:.68rem; color:var(--accent);
}

/* NextGEN/Imagely gallery standing in for the hero photo. [imagely] renders
   a Slick slideshow that sizes its track to the tallest photo in the
   gallery (auto height, not tied to our 4:3 frame) — with hero-art's
   overflow:hidden that silently crops the bottom off every slide. The
   chain below forces every layer Slick wraps the image in down to 100%
   of the frame, same as a plain <img> would get above; !important is
   needed because Slick sets its own sizes as inline styles via JS, which
   plain CSS can't outrank on specificity alone. Width already matched
   the frame correctly on its own — this is only fixing height. */
.hero-art__gallery{ width:100%; height:100%; overflow:hidden; }
.hero-art__gallery .ngg-galleryoverview,
.hero-art__gallery .slick-list,
.hero-art__gallery .slick-track,
.hero-art__gallery .slick-slide,
.hero-art__gallery .slick-slide > div,
.hero-art__gallery .slick-slide a{
	height:100% !important;
}
/* Imagely also puts a 40px top margin on .ngg-slideshow.slick-slider by
   default (meant for sitting inline in normal content, from its own
   ngg_basic_slideshow.css) — inside this fixed-height frame that just
   pushes the image down and shoves an equal amount off the bottom via
   overflow:hidden, showing as a blank strip up top. Confirmed live: that
   plugin rule is also !important with the same two-class specificity as
   a plain ".hero-art__gallery .ngg-galleryoverview" override, and since
   its stylesheet loads after ours, it was winning the tie — so this
   targets the extra .ngg-slideshow class too, to actually outrank it
   rather than just match it. */
.hero-art__gallery .ngg-galleryoverview.ngg-slideshow{ margin-top:0 !important; }
.hero-art__gallery img{ width:100% !important; height:100% !important; max-height:none !important; object-fit:cover !important; }
.rating-badge{
	position:absolute; left:16px; bottom:16px; background:var(--bg); border:1px solid var(--rule);
	border-radius:4px; padding:12px 16px; display:flex; flex-direction:column; gap:4px;
	box-shadow:0 12px 28px -14px rgba(0,0,0,.6);
}
.rating-badge .stars{ color:var(--accent); font-size:.85rem; letter-spacing:.1em; }
.rating-badge .score{ font-family:'Oswald',sans-serif; font-size:.82rem; color:var(--ink); }

/* ---- trusted / stats ---- */
.trusted{ padding:clamp(48px,6vw,72px) var(--gutter); text-align:center; }
.trusted h2{ font-size:clamp(1.3rem,2.6vw,1.7rem); font-weight:300; max-width:34ch; margin:0 auto; }
.trusted h2 b{ font-weight:700; }
.logo-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.logo-chip{
	width:112px; height:64px; border:1px dashed var(--rule); border-radius:3px;
	display:flex; align-items:center; justify-content:center;
	font-family:'Oswald',sans-serif; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
	color:var(--ink-faint);
}
.logo-chip--photo{ border-style:solid; background:var(--bg-panel); padding:10px; }
.logo-chip--photo img{ max-width:100%; max-height:100%; object-fit:contain; }
.stat-row{
	display:flex; flex-wrap:wrap; justify-content:center; gap:1px; background:var(--rule);
	border:1px solid var(--rule); border-radius:4px; overflow:hidden; margin-top:40px;
}
.stat{ flex:1 1 200px; background:var(--bg); padding:24px 20px; text-align:center; }
.stat .n{ font-family:'Oswald',sans-serif; font-weight:700; font-size:1.7rem; color:var(--accent); display:block; }
.stat .l{ font-size:.82rem; color:var(--ink-faint); margin-top:4px; }

/* ---- statement ---- */
.statement{ background:var(--bg-panel); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:clamp(56px,8vw,96px) var(--gutter); }
/* 820px is the standard centered-text width now — .managed p,
   .daypart-close and .bar-closer p all match this instead of each
   picking their own ch-based width, so every centered text block reads
   the same width across a bar page regardless of which section it's in. */
.statement-in{ max-width:820px; margin:0 auto; text-align:center; }
.statement h2{ font-size:clamp(1.6rem,3.6vw,2.4rem); font-weight:300; }
.statement h2 b{ font-weight:700; color:var(--accent); }
.statement p{ margin-top:22px; max-width:60ch; margin-left:auto; margin-right:auto; }
.statement .hero-cta{ justify-content:center; margin-top:32px; }

/* ---- grids ---- */
.section-head{ display:flex; align-items:baseline; justify-content:space-between; padding:0 var(--gutter); margin-bottom:22px; gap:20px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(1.3rem,2.4vw,1.7rem); }
.work-grid{ display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(2,130px); gap:6px; padding:0 var(--gutter) 20px; }
.work-grid .cell{ position:relative; border-radius:2px; overflow:hidden; display:flex; align-items:flex-end; background-size:cover; background-position:center; }
.work-grid .cell span{ font-family:'Oswald',sans-serif; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(238,241,234,.6); padding:8px 10px; }
.work-grid .cell:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.work-grid .cell:nth-child(6){ grid-column:span 2; }
.work-more{ text-align:center; padding:0 0 clamp(56px,7vw,84px); font-family:'Oswald',sans-serif; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; }

.events{ padding:0 var(--gutter) clamp(56px,7vw,84px); }
.event-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:70%; margin-left:auto; margin-right:auto; }
.event-card{ position:relative; aspect-ratio:3/4; border-radius:3px; overflow:hidden; display:flex; align-items:flex-end; padding:20px; background-size:cover; background-position:center; }
.event-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.72), transparent 55%); }
.event-card span{ position:relative; z-index:1; font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; color:var(--ink); font-size:1rem; line-height:1.25; }
/* [ver2 Menu/Refreshment Options only] .bar-gallery--cards — the old
   generic bar pages' plain photo-grid look reused here instead of the
   auto-rotating .event-cards carousel. Sized to match .bar-gallery--vc
   (the ACTUAL gallery those old pages use — 6 columns, fixed 140px
   rows) rather than the base .bar-gallery rule above (4 columns,
   square aspect-ratio tiles, meant for a full-bleed page-width
   gallery) — that one rendered noticeably bigger than the old pages'
   real gallery tiles once it's this section's own (narrower, --maxw-
   capped) width, hence the separate sizing here. Zeroes out
   .bar-gallery's own side/bottom padding (style.css further down)
   since .events above already provides that spacing. */
.events .bar-gallery--cards{ padding:0; grid-template-columns:repeat(6,1fr); grid-auto-rows:140px; }
.bar-gallery--cards .bar-gallery__tile{ position:relative; display:block; overflow:hidden; border-radius:2px; }
.bar-gallery--cards .bar-gallery__tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.bar-gallery--cards .bar-gallery__tile:hover img{ transform:scale(1.06); }
/* Same title/desc caption idea as .event-card (dark gradient so light
   text stays readable over any photo), just laid over this tile via
   absolute positioning instead of the tile's own padding. */
.bar-gallery--cards .bar-gallery__tile::after{
	content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.72), transparent 55%);
}
.bar-gallery--cards .bar-gallery__tile span{
	position:absolute; left:10px; right:10px; bottom:8px; z-index:1;
	font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
	color:var(--ink); font-size:.68rem; line-height:1.25;
}
.bar-gallery--cards .bar-gallery__tile small{ display:block; font-weight:400; text-transform:none; font-size:.64rem; opacity:.85; }
/* Same asymmetric masonry spans as .bar-gallery--vc's isotope grid
   (first tile big, sixth tile wide) rather than every tile the same
   size — matches that layout's look instead of a plain even grid. */
.bar-gallery--cards .bar-gallery__tile:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.bar-gallery--cards .bar-gallery__tile:nth-child(6){ grid-column:span 2; }
@media (max-width:700px){
	.events .bar-gallery--cards{ grid-template-columns:repeat(3,1fr); grid-auto-rows:110px; }
	.bar-gallery--cards .bar-gallery__tile:nth-child(6){ grid-column:span 1; }
}
/* [ver2 Menu only] .events--split — text on the left (left-aligned,
   not the shared .statement-in's centered treatment), every populated
   card's photo on the right in a fixed 3-per-row grid of fixed
   192×140px tiles, rather than a flexible track. Overrides the
   masonry nth-child spans .bar-gallery--cards carries above, since
   this grid is meant to be perfectly even, not asymmetric. Doesn't
   touch [Refreshment Options], which keeps the full-width masonry
   layout. */
/* .events' own padding is 0 on top (padding:0 5% clamp(...)) — this
   section gets the same top buffer as Editorial/Built for Events/
   Timeline (clamp(56px,7vw,84px)) instead. */
.events--split{ display:grid; grid-template-columns:1fr auto; gap:40px; align-items:start; padding-top:clamp(56px,7vw,84px); }
.events--split .events__copy{ text-align:left; }
.events--split .events__copy .section-head{ justify-content:flex-start; padding:0; }
.events--split .events__copy p, .events--split .events__copy ul, .events--split .events__copy .pullquote{ max-width:60ch; }
.events--split .events__photos.bar-gallery{ grid-template-columns:repeat(3,200px); grid-auto-rows:200px; gap:8px; padding:0; }
.events--split .events__photos .bar-gallery__tile:nth-child(1),
.events--split .events__photos .bar-gallery__tile:nth-child(6){ grid-column:auto; grid-row:auto; }
/* [ver2 template standard] every .bar-gallery--cards grid on this
   template (Menu's events--split gallery, Refreshment Options' plain
   gallery, and any future section that uses the same card markup) —
   photos grow and lift above their neighbours on hover, instead of
   just the base rule's subtle internal image crop-zoom. Transform is
   on the tile itself (not clipped by its own overflow:hidden, which
   only clips children), so it visibly pops out over the grid. Was
   Menu-only (.events--split .events__photos); broadened to the whole
   .bar-gallery--cards class so it's the template's standard tile
   behaviour, not one section's special case. */
.bar-gallery--cards .bar-gallery__tile{
	transition:transform .25s ease, box-shadow .25s ease; will-change:transform;
}
.bar-gallery--cards .bar-gallery__tile:hover{
	transform:scale(1.5); z-index:5; box-shadow:0 10px 26px rgba(0,0,0,.4);
}
/* Short description (the <small> under the title) stays hidden while
   the tile is small, and fades in only once it's expanded on hover —
   avoids cramming that extra line into the tiny default tile size. */
.bar-gallery--cards .bar-gallery__tile small{ opacity:0; transition:opacity .2s ease; }
.bar-gallery--cards .bar-gallery__tile:hover small{ opacity:.85; }
@media (max-width:900px){
	.events--split{ grid-template-columns:1fr; }
	.events--split .events__photos.bar-gallery{ grid-template-columns:repeat(3,1fr); }
}
/* Mobile 2-column collapse already comes from the base .bar-gallery
   rule further down (max-width:820px) — this carries both classes. */

/* ---- testimonial ---- */
.testimonial{ background:var(--bg-panel); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:clamp(56px,7vw,84px) var(--gutter); }
.testimonial-in{ max-width:760px; margin:0 auto; text-align:center; }
.avatar{
	width:76px; height:76px; border-radius:50%; margin:0 auto 22px; background:var(--bg-panel-2);
	border:1px dashed var(--rule); display:flex; align-items:center; justify-content:center;
	font-family:'Oswald',sans-serif; color:var(--ink-faint); font-size:.7rem; text-align:center;
	overflow:hidden;
}
.avatar--photo{ border-style:solid; }
.avatar--photo img{ width:100%; height:100%; object-fit:cover; }
.testimonial blockquote{ margin:0; font-size:1.25rem; color:var(--ink); font-style:italic; font-weight:300; }
.testimonial cite{ display:block; margin-top:20px; font-style:normal; font-family:'Oswald',sans-serif; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }

/* ---- contact ---- */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:50px; padding:clamp(56px,7vw,84px) var(--gutter); }
.contact h2{ font-size:clamp(1.5rem,3vw,2.1rem); font-weight:300; margin-bottom:18px; }
.contact h2 b{ font-weight:700; }
.contact-detail{ margin-bottom:18px; font-size:.95rem; }
.contact-detail strong{ display:block; color:var(--ink); font-family:'Oswald',sans-serif; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px; }
/* Swapped into #vfb-ajax-wrap on a successful submit — see
   js/vfb-ajax.js. Same shape as .footer-signup-success (same idea,
   different form). */
.vfb-ajax-success{ padding:14px 16px; max-width:420px; border:1px solid var(--rule); border-radius:4px; color:var(--accent); font-size:.95rem; }

/* ---- generic inner-page fallback (page.php / single.php / index.php) ---- */
/* Covers News, Contact Us, Who We Are, What We Do, Gallery, and any
   other plain page — centered and bold, matching the bar pages' hero
   weight (.hero--bar h1) rather than each page picking its own look.
   Bar pages themselves are untouched — they use .hero--bar, not this. */
.page-hero{ padding:56px var(--gutter) 28px; border-bottom:1px solid var(--rule); text-align:center; }
/* Same size and white/green split as the bar pages' hero heading
   (.hero--bar h1) — barmotion_split_title_html() colours the last word;
   a one-word title (News, Gallery) renders entirely in the accent
   colour since there's nothing to split it from. */
.page-hero h1{ font-size:clamp(2.3rem,5vw,3.6rem); line-height:.9; font-weight:300; }
.page-hero h1 em{ font-style:normal; font-weight:700; color:var(--accent); }

/* ---- Our Bars / Gallery / News / Contact Us get a bit more presence
   than the plain page-hero: an eyebrow kicker, a tagline, and a
   double-rule frame (same idea as the section headers used elsewhere on
   the site) instead of just a bare heading on a straight border. Scoped
   via .page-hero--framed (eyebrow keyed by slug in
   barmotion_framed_hero_eyebrow(), functions.php; tagline pulled from
   the page's own Excerpt) — .page-hero on its own is still the plain
   version the legal pages use. */
.page-hero--framed{
	position:relative; border-bottom:0; padding:64px var(--gutter) 20px;
	background:radial-gradient(ellipse 70% 100% at 50% 0%, rgba(148,201,63,.12), transparent 65%);
}
.page-hero--framed::before, .page-hero--framed::after{
	content:''; display:block; width:130px; height:2px; margin:0 auto;
	background:linear-gradient(90deg, transparent, var(--ink) 50%, transparent);
}
.page-hero--framed::before{ margin-bottom:22px; }
.page-hero--framed::after{ margin-top:14px; }
.page-hero--framed .eyebrow{ display:block; margin-bottom:16px; }
.page-hero--framed .sub{ max-width:46ch; margin:18px auto 0; }

/* ---- Thank You / Success Page template (template-thank-you.php) ----
   Reads as a centered success modal rather than a plain page, since VFB
   Pro's redirect-to-page setting lands here after a real (non-AJAX)
   form POST — see the note in the template file for why this is a page
   rather than a same-page popup. */
.success-modal-wrap{
	min-height:60vh; display:flex; align-items:center; justify-content:center;
	padding:60px var(--gutter);
}
.success-modal{
	max-width:480px; width:100%; text-align:center;
	background:var(--bg-panel); border:1px solid var(--rule); border-radius:6px;
	padding:48px 36px; box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
.success-modal__icon{
	width:56px; height:56px; margin:0 auto 22px; border-radius:50%;
	background:var(--accent-soft); color:var(--accent);
	display:flex; align-items:center; justify-content:center;
}
.success-modal h1{ font-size:1.6rem; margin-bottom:14px; }
.success-modal__body{ color:var(--ink-muted); font-size:.95rem; margin-bottom:28px; }
.success-modal__body p:last-child{ margin-bottom:0; }
.success-modal .btn{ width:100%; justify-content:center; }

/* ---- Hospitality Service Page template (template-service.php) ----
   Hero switched to the same two-column .hero/.hero-art grid the bar
   pages use (was centered text-only) — see .hero--service in the
   width-cap list further down for why it lines up with the rest of the
   page instead of running full-bleed like the homepage's version does.
   The body-width override itself (.service-content max-width) has to
   live after .entry-content's own max-width further down — same
   specificity, so source order decides, and .entry-content comes later. */

/* Shared "long-form content" rules — the Hospitality Service Page
   template (.service-content) and the bar-page body (.bar-story__body,
   which used to only have its drop-cap rule and nothing for headings,
   lists, or FAQs) both get the same H2/list/FAQ treatment from here, so
   a bar page with sections and an FAQ block (e.g. Cappuccino Bar) looks
   the same as a Hospitality Service Page with the same content shape. */
.service-content h2{
	font-size:1.4rem; text-align:left; margin-top:2.2em; margin-bottom:.6em;
	padding-top:1.4em; border-top:1px solid var(--rule);
}
.service-content > h2:first-child{ border-top:0; padding-top:0; margin-top:0; }
/* Bar-page body H2 — bumped to match the 24px section-heading size the
   "featured" bar templates (ver2/ver3) use, plus a short accent rule
   standing in for those templates' green eyebrow kicker (this body copy
   is free-form block-editor content, not tagged sections, so there's no
   per-heading eyebrow text to render — the rule alone gives the same
   "something marks this as a new section" cue). */
.bar-story__body h2{
	font-size:1.5rem; text-align:left; margin-top:2.4em; margin-bottom:.7em;
	padding-top:20px; border-top:1px solid var(--rule); position:relative;
}
.bar-story__body h2:before{
	content:""; position:absolute; top:-1px; left:0; width:50px; height:2px; background:var(--accent);
}
.bar-story__body > h2:first-child{ border-top:0; padding-top:0; margin-top:0; }
.bar-story__body > h2:first-child:before{ display:none; }
/* Bar-page body H3 — was inheriting the browser default (serif, no theme
   styling) since nothing in the shared block below sized it; brought in
   line with the small uppercase Oswald sub-headings used throughout the
   featured bar templates (e.g. bar-v3's card titles). */
.bar-story__body h3{
	font-family:'Oswald',sans-serif; font-size:1.05rem; font-weight:600;
	text-transform:uppercase; letter-spacing:.02em; color:var(--ink);
	margin-top:1.6em; margin-bottom:.5em;
}
/* any real bulleted-list block becomes the site's checkmark list
   automatically — the editor just needs to use a normal WordPress list
   block, no class to add by hand. */
.service-content ul, .bar-story__body ul, .brand-list{
	list-style:none; padding:0; margin:24px 0; display:grid;
	grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px;
}
.service-content ul li, .bar-story__body ul li, .brand-list li{
	position:relative; display:flex; align-items:center;
	background:var(--bg-panel); border:1px solid var(--rule); border-radius:999px;
	padding:4px 18px 4px 4px; font-weight:600; color:var(--ink); line-height:1.3;
	transition:border-color .15s ease, transform .15s ease;
}
.service-content ul li:hover, .bar-story__body ul li:hover, .brand-list li:hover{ border-color:var(--accent); transform:translateY(-2px); }
.service-content ul li::before, .bar-story__body ul li::before, .brand-list li::before{
	content:''; flex:0 0 auto; width:34px; height:34px; margin-right:14px; border-radius:50%;
	background-color:var(--accent);
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center/16px 16px;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center/16px 16px;
}
/* Service pages (Exhibitions, Conference, Branded Event Hospitality)
   specifically — a firm 2-column grid rather than leaving it to
   auto-fill above, which could land on a single column depending on
   exactly how wide .service-content's 74ch cap renders. Bar pages keep
   the auto-fill behaviour (.bar-story__body ul, untouched here) since
   their body column is a different width. */
.service-content ul{ grid-template-columns:repeat(2,1fr); }
@media (max-width:520px){ .service-content ul{ grid-template-columns:1fr; } }

/* FAQ accordion — a real <details>/<summary> pair per question, native
   HTML disclosure widget, no JS required. The editor writes:
   <details><summary>Question?</summary><p>Answer.</p></details>
   one per question, right where the FAQ list belongs in the content. */
.service-content details, .bar-story__body details, .faq-list details{
	border:1px solid var(--rule); border-radius:4px; margin:12px 0; overflow:hidden;
}
.service-content summary, .bar-story__body summary, .faq-list summary{
	cursor:pointer; padding:16px 44px 16px 18px; font-family:'Oswald',sans-serif;
	font-weight:500; color:var(--ink); list-style:none; position:relative;
}
.service-content summary::-webkit-details-marker, .bar-story__body summary::-webkit-details-marker, .faq-list summary::-webkit-details-marker{ display:none; }
.service-content summary::after, .bar-story__body summary::after, .faq-list summary::after{
	content:'+'; position:absolute; right:18px; top:50%; transform:translateY(-50%);
	color:var(--accent); font-size:1.3rem; font-family:'Oswald',sans-serif; line-height:1;
}
/* > (direct child), not the bare descendant combinator this used to be.
   The FAQ nests a per-question <details> inside the outer .faq-toggle
   <details> — "details[open] summary" (descendant) matched EVERY
   summary inside any open details, so opening the outer section alone
   flipped every question's own "+" to "−" regardless of whether that
   question was actually expanded. Scoping to the summary's own parent
   fixes it: each "−" now reflects only that element's own open state. */
.service-content details[open] > summary::after, .bar-story__body details[open] > summary::after, .faq-list details[open] > summary::after{ content:'\2212'; }
.service-content details p, .bar-story__body details p, .faq-list details p{ margin:0; padding:0 18px 16px; color:var(--ink-muted); }
.service-content summary:hover, .bar-story__body summary:hover, .faq-list summary:hover{ color:var(--accent); }

/* [FAQ]'s outer wrapper — a details/summary pair same as each question,
   just one level up, so the whole list of questions stays hidden until
   the "Frequently Asked Questions" heading itself is opened, not just
   each question's own answer. Styled as its own card (background +
   border, bg-panel-2 so it still contrasts against either alternating
   band colour — see .band-black/.band-grey) rather than inheriting the
   plain-box look .faq-list details gets above; the per-question
   <details> nested inside are stripped back to plain divided rows
   further down so the result reads as one card with a list in it,
   not boxes nested inside another box. */
.faq-toggle{
	background:var(--bg-panel-2); border:1px solid var(--rule); border-radius:6px;
	margin:0; padding:0 18px 6px;
}
.faq-toggle > summary h2{ font-size:38.4px; }
.faq-toggle > summary .eyebrow{ font-size:15px; margin-bottom:12px; }
/* Every FAQ accordion (the shared .faq-list): standard 32px section padding, questions in two columns. */
section.faq-list{ padding-top:30px; padding-bottom:30px; }
.faq-toggle .faq-grid{ columns:2; column-gap:48px; }
.faq-toggle .faq-grid details{ break-inside:avoid; border-top:0; border-bottom:1px solid var(--rule); }
@media (max-width:760px){
	.faq-toggle .faq-grid{ columns:1; }
}
/* ver3 bar pages: the questions run in two columns (first half left, second half right). */
.page-template-template-bar-v3-php .faq-list{ padding-block:30px; }
.page-template-template-bar-v3-php .bar3-faq-grid{ columns:2; column-gap:48px; }
.page-template-template-bar-v3-php .bar3-faq-grid details{ break-inside:avoid; border-top:0; border-bottom:1px solid var(--rule); }
@media (max-width:760px){
	.page-template-template-bar-v3-php .bar3-faq-grid{ columns:1; }
}
/* Bigger +/− for the outer toggle specifically (> summary, not the
   nested per-question ones) — it's opening the whole section, so it
   reads as a more significant action than expanding one answer. Extra
   right padding on this summary only, so the larger glyph has room
   without crowding the heading text or the base 44px reserved for the
   normal-size nested ones. */
.faq-toggle > summary{ padding-right:60px; }
.faq-toggle > summary::after{ right:16px; font-size:2.8rem; }
/* Nested questions sit as plain rows on the card's own background —
   no border/radius/margin of their own (overriding .faq-list details
   above), just a rule between rows (not before the first one, which
   already has the outer summary/heading above it as a divider). */
.faq-toggle details{ border:0; border-radius:0; margin:0; }
.faq-toggle details + details{ border-top:1px solid var(--rule); }
.entry-content{
	max-width:74ch; padding:30px var(--gutter) 30px; margin:0 auto;   /* house rule: 30px top and bottom */
	font-size:14px; line-height:1.38; color:#c4c4c4;
}
/* Hospitality Service Page template (Exhibitions, Conference, Branded
   Event Hospitality) — widened from the default 74ch reading-width cap.
   With no sidebar rail next to it (bar pages have one, this template
   doesn't), 74ch read as noticeably cramped next to the full-width
   hero/gallery above and below it. 900px roughly matches the legal
   pages' existing "wide but still readable" cap (.is-wide, 880px)
   rather than the full 1180px page width, which would stretch body
   paragraphs into uncomfortably long lines. Has to come after the base
   .entry-content rule above — same specificity, source order decides. */
.entry-content.service-content{ max-width:900px; }
.entry-content img{ border-radius:3px; margin:20px 0; max-width:100%; height:auto; }
.entry-content h2{ font-size:1.5rem; margin-top:1.8em; margin-bottom:.6em; }
.entry-content h3{ font-size:1.2rem; margin-top:1.5em; margin-bottom:.5em; color:var(--ink); }
.entry-content h4{ font-size:1.05rem; color:var(--ink); line-height:1.38; }
.entry-content p{ margin:7px 0; }
.entry-content strong{ font-weight:700; }
.entry-content blockquote{ margin:0 0 20px; padding:0 0 0 15px; line-height:1.38; }
.entry-content ul{ padding-left:1.2em; }
.entry-content li{ margin-bottom:.4em; }
.entry-content a{ text-decoration:underline; text-underline-offset:2px; }
/* Porcelain's own "accent word" class (e.g. "<span class="highlight">
   Giving</span> Back" on About Us) — never had a definition ported over,
   so it was silently inheriting the same grey body-text colour as
   everything else and reading as barely-there against a light panel. */
.entry-content .highlight{ color:var(--accent); }
/* Porcelain's own checkmark-list class (About Us: "Why Choose Us" /
   "Solutions We Offer"), same idea as .highlights (front-page/bar pages)
   but this one's on real page content rather than markup this theme
   controls, so it's styled by class instead. var(--ink) rather than
   var(--accent) for the mark itself since this list also appears on a
   lime-green panel further down the page — a light dot reads on both
   the dark panel and the green one; the accent green wouldn't on green. */
.entry-content ul.bullet_star{ list-style:none; padding:0; margin:20px 0; display:grid; gap:10px; }
.entry-content ul.bullet_star li{ position:relative; padding-left:26px; margin-bottom:0; }
.entry-content ul.bullet_star li::before{
	content:''; position:absolute; left:0; top:.25em; width:16px; height:16px;
	background-color:var(--ink);
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center/contain;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center/contain;
}
/* Definition tables (Privacy Policy: term / explanation rows). Without a
   fixed width on the term column, each row's first cell auto-sizes to
   its own text ("Data" vs "Cookies"), so rows don't line up — table-layout:
   fixed plus an explicit width fixes that. */
.entry-content table{ width:100%; border-collapse:collapse; table-layout:fixed; margin:10px 0 20px; }
.entry-content td{ vertical-align:top; padding:10px 0; }
.entry-content td:first-child{ width:160px; padding-right:20px; font-weight:700; }
/* full-width WPBakery pages (Who We Are, What We Do, Gallery all use
   Porcelain's template-full-custom.php — this theme doesn't have that
   file, so they fall back to this class with the width cap removed) */
/* Capped at the same var(--maxw) bar pages use (1180px) rather than left
   unbounded — matches what the real old site's own "full width" pages
   (News, What We Do, etc.) actually rendered at (~1170-1180px measured
   live), and keeps every full-width page consistent with bar pages on
   very large screens instead of Contact Us etc. stretching edge to edge
   past where bar pages stop. */
.entry-content.is-full-width{ max-width:var(--maxw); }
/* Legal pages (Privacy Policy, Terms & Conditions, Copyright) and news articles: 1024px reading width (text about 880px). */
.entry-content.is-wide{ max-width:1024px; }

/* ---- "What We Do" bar grid (services-wrapper) ----
   This is NOT from Porcelain's theme files — it turned out to live in
   WordPress's own "Additional CSS" field (Appearance → Customize →
   Additional CSS), which WordPress stores per-theme. That's exactly why
   switching themes silently dropped it. Pulled verbatim from the live
   #wp-custom-css block on barmotion.co.uk (still running Porcelain) so
   this is the real, current design — including the hover reveal and
   "View Details" caption — not a guess at one. */

.services-wrapper.services-square{
	display:flex; flex-direction:row; flex-wrap:wrap;
	justify-content:flex-start; align-items:stretch; width:100%; clear:both; gap:20px;
}
.services-box.col{
	display:flex; flex-direction:column;
	flex:0 0 calc(25% - 15px); width:calc(25% - 15px); max-width:calc(25% - 15px);
	box-sizing:border-box;
}
.services-box.parallax-element{ opacity:1; visibility:visible; transform:none; }

.square-wrapper{
	display:flex; flex-direction:column; justify-content:flex-end;
	position:relative; width:100%; aspect-ratio:1/1;
	background:#000; border-radius:4px; overflow:hidden;
	border:1px solid var(--rule);
	transition:border-color .15s ease, transform .15s ease;
}
.square-wrapper:hover{ border-color:var(--accent); transform:translateY(-2px); }
.services-img{
	position:absolute; top:0; left:0; width:100%; height:100%;
	background-size:cover; background-position:center; background-repeat:no-repeat;
	display:block; z-index:1;
	transition:transform .4s ease;
}
.square-wrapper:hover .services-img{ transform:scale(1.08); }

/* Bottom gradient is its own layer (not part of .services-content) so
   .services-content can stay in normal flex flow instead of being
   absolutely positioned to just the text's own height — otherwise the
   "whole tile is clickable" link overlay below only covered that short
   strip instead of the full photo. */
.square-wrapper::before{
	content:''; position:absolute; left:0; right:0; bottom:0; z-index:2; height:65%;
	background:linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,.15) 55%, transparent);
	pointer-events:none;
}

/* Title sits over the gradient and stays visible at all times — the old
   site only ever showed it on :hover, which meant the bar name never
   appeared at all on a touchscreen (no hover state on mobile). "View
   Details" keeps the hover-reveal flourish, it's just no longer the
   only thing carrying the label. */
.services-content{
	/* No position here on purpose — flex items keep their z-index
	   stacking without it, and staying position:static means the click-
	   catcher below (.services-content h3 a::after) skips past this box
	   and resolves against .square-wrapper instead, covering the whole
	   tile rather than just this text strip. */
	z-index:5;
	display:flex; flex-direction:column; align-items:flex-start;
	padding:16px; text-align:left; box-sizing:border-box;
}

.services-content h3{ margin:0; padding:0; }
.services-content h3 a{
	color:var(--ink); text-decoration:none; font-family:'Oswald',sans-serif;
	font-size:15px; font-weight:300; text-transform:uppercase; letter-spacing:.02em; line-height:1.3;
}
.services-content .sc-wraper::after{
	content:"View Details"; display:block; color:var(--accent); font-size:11px;
	font-weight:600; text-transform:uppercase; letter-spacing:.08em;
	margin-top:0; max-height:0; opacity:0; overflow:hidden;
	transition:max-height .2s ease, opacity .2s ease, margin-top .2s ease;
}
.square-wrapper:hover .services-content .sc-wraper::after{ margin-top:6px; max-height:20px; opacity:1; }
/* Positioned relative to .square-wrapper (the nearest positioned
   ancestor, since .services-content itself is no longer position:absolute)
   so the click target covers the entire tile — image included, not just
   the caption strip. */
.services-content h3 a::after{
	content:""; position:absolute; top:0; left:0; width:100%; height:100%; z-index:10;
}

@media (max-width:1024px){
	.services-box.col{ flex:0 0 calc(50% - 10px); width:calc(50% - 10px); max-width:calc(50% - 10px); }
}
@media (max-width:600px){
	.services-box.col{ flex:0 0 100%; width:100%; max-width:100%; }
	.news-grid{ grid-template-columns:1fr; }
}

/* ---- Visual Form Builder Pro (Contact Us + the homepage "Ready when
   you are" enquiry form) — the plugin ships its own CSS assuming a light
   page background; these overrides just make the same form legible on
   our dark one. Scoped to both .entry-content (inner pages) and .contact
   (front-page.php's [vfb id=3]) since it's the same form in two
   different page contexts. ---- */
.entry-content .vfbp-form, .contact .vfbp-form{ max-width:640px; }
.entry-content .vfb-form-group, .contact .vfb-form-group{ margin-bottom:18px; }
.entry-content .vfb-control-label, .contact .vfb-control-label{
	font-family:'Oswald',sans-serif; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
	color:var(--ink-muted); display:block; margin-bottom:6px; text-decoration:none;
}
.entry-content .vfb-required-asterisk, .contact .vfb-required-asterisk{ color:var(--accent); }
.entry-content .vfb-form-control, .contact .vfb-form-control{
	width:100%; background:var(--bg-panel); border:1px solid var(--rule); border-radius:2px;
	color:var(--ink); padding:11px 13px; font-family:'Open Sans',sans-serif; font-size:.95rem;
}
.entry-content .vfb-form-control:focus, .contact .vfb-form-control:focus{ border-color:var(--accent); outline:none; }
.entry-content .vfb-checkbox label, .contact .vfb-checkbox label{ color:var(--ink-muted); font-size:.92rem; display:flex; gap:8px; align-items:center; text-decoration:none; }
.entry-content .vfbp-form input[type="submit"], .contact .vfbp-form input[type="submit"],
.entry-content .vfbp-form button[type="submit"], .contact .vfbp-form button[type="submit"]{
	font-family:'Oswald',sans-serif; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
	padding:14px 26px; border-radius:2px; background:var(--accent); color:#0d1a1f; border:0; cursor:pointer;
}
.entry-content .vfbp-form input[type="submit"]:hover, .contact .vfbp-form input[type="submit"]:hover,
.entry-content .vfbp-form button[type="submit"]:hover, .contact .vfbp-form button[type="submit"]:hover{ background:#a8dc55; }

/* ---- "bar-page-lite" pages (Bubble Tea, Frozen Yoghurt, Soft Serve, Hot
   Chocolate, Gelato, Popcorn, Crepe, Soup, Waffle, Milkshake — see
   barmotion_bar_pages()/barmotion_bar_v2_pages() and the body_class
   filter beside them in functions.php) — same full-bleed gallery-photo-
   behind-text hero + dark left-to-right blend every bar-v2/v3 page
   already uses (see the bar-v2 block further down for the full
   reasoning), plus the rest of the page capped to the site's standard
   --maxw instead of running edge-to-edge. A stopgap visual upgrade until
   each of these gets the full bar-v2 content treatment. */
.bar-page-lite .hero--bar{
	display:block; grid-template-columns:none; position:relative; overflow:hidden;
	min-height:0; max-width:none; margin-left:0; margin-right:0;
	padding-top:0; padding-bottom:0;
	padding-left:max(var(--gutter), calc((100% - var(--maxw))/2));
	padding-right:max(var(--gutter), calc((100% - var(--maxw))/2));
}
.bar-page-lite .hero--bar > div:first-child{
	position:relative; z-index:1; max-width:610px; padding-block:50px;
}
.bar-page-lite .hero--bar > .hero-art{
	position:absolute; top:0; right:0; bottom:0; z-index:0; width:60%;
	aspect-ratio:auto; max-width:none; border-radius:0; border:0; background:none;
}
.bar-page-lite .hero--bar:after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(90deg, #000 0%, #000 42%, rgba(13,26,31,.15) 65%, rgba(13,26,31,.45) 100%);
}
@media (max-width:900px){
	.bar-page-lite .hero--bar > div:first-child{ max-width:90%; }
	.bar-page-lite .hero--bar > .hero-art{ width:100%; }
	.bar-page-lite .hero--bar:after{
		background:linear-gradient(180deg, rgba(13,26,31,.92), rgba(13,26,31,.6) 75%, rgba(13,26,31,.87));
	}
}
/* .bar-story/.bar-gallery/.bar-closer had no max-width at all below (just
   padding:...var(--gutter)), so their content ran edge-to-edge uncapped
   on wide screens instead of centring at --maxw like every other section
   on the site (.ticker--bar, just above the body content, was already
   capped this way). Same .band-debox padding trick as the rest of the
   site (style.css, further down) rather than a max-width+margin box: that
   would leave a band-black/band-grey background centred as a visible
   rectangle instead of reading as a full-bleed band, now that these three
   sections alternate between them below. */
.bar-page-lite .bar-story,
.bar-page-lite .bar-gallery,
.bar-page-lite .bar-closer{
	padding-left:max(var(--gutter), calc((100% - var(--maxw))/2));
	padding-right:max(var(--gutter), calc((100% - var(--maxw))/2));
}
/* Alternating band-black/band-grey backgrounds + thin --rule divider now
   applied to these three sections (page.php's $next_band(), same classes
   as bar-v2/v3) — the classes' own background/border styling already
   comes from the sitewide .band-black/.band-grey rules further down this
   file, nothing extra needed here beyond the width fix above. .bar-explore
   keeps its own fixed grey band untouched (see page.php). */

/* ---- single bar page (single-portfolio.php) ---- */
/* align-items:start rather than the grid default (stretch) — on a long
   page like Specialty Coffee Bar the body column runs to 2500px+ while
   the rail is only a couple of short cards; stretch was forcing .bar-rail
   to match that full height, leaving it stranded at the top of a mostly
   empty column for the rest of the scroll. */
.bar-story{ display:grid; grid-template-columns:minmax(0,64ch) 1fr; gap:56px; padding:56px var(--gutter); align-items:start; }
.bar-story__body p:first-of-type::first-letter{
	font-family:'Oswald',sans-serif; float:left; font-size:3.4em; line-height:.8;
	padding:.06em .07em 0 0; color:var(--accent); font-weight:700;
}
/* Mockup's highlight list — a <ul class="highlights"> in the bar's body
   copy, currently just plain browser-default round bullets since nothing
   styled that class. CSS-only checkmark via mask-image (same path the
   mockup used inline as an <svg> per <li>) rather than requiring an SVG
   pasted into every list item by hand — works on any .highlights list
   dropped into any bar page's content, no per-item editing needed. */
.highlights{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:14px; }
.highlights--cols-2{ grid-template-columns:repeat(2,1fr); column-gap:32px; }
@media (max-width:700px){ .highlights--cols-2{ grid-template-columns:1fr; } }
/* ul. prefix (not just .highlights) bumps this to the same specificity as
   the shared ".bar-story__body ul li"/"::before" rules above (1 class + 2
   type selectors each) so it reliably wins the tie via source order —
   without it, that shared rule's 34px flex-circle checkmark + 4px padding
   silently overrode this list's own smaller 16px tick + 26px padding
   whenever a <ul class="highlights"> sat inside a bar page's body copy,
   leaving the tick overlapping the wrapped text instead of beside it. */
ul.highlights li{ position:relative; padding-left:26px; }
ul.highlights li::before{
	content:''; position:absolute; left:0; top:.25em; width:16px; height:16px;
	background-color:var(--accent);
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center/contain;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center/contain;
}
/* Sticky rather than static — on a long page the CTA cards would
   otherwise scroll out of view early and leave the rest of the scroll
   with nothing beside the body text. The header isn't sticky itself
   (position:relative), so there's no overlap to account for. */
.bar-rail{ display:flex; flex-direction:column; gap:20px; position:sticky; top:24px; }
.bar-rail__card{ background:var(--bg-panel); border:1px solid var(--rule); border-radius:4px; padding:22px; }
.bar-rail__card h3{ font-family:'Oswald',sans-serif; color:var(--ink); text-transform:uppercase; font-size:15px; margin:0 0 10px; }
.bar-rail__card p{ font-size:14px; margin:0 0 14px; }
.bar-rail__card .btn{ width:100%; justify-content:center; }
.bar-rail__card--photo{ overflow:hidden; }
.bar-rail__photo{ margin:0 -22px 18px; aspect-ratio:16/10; }
.bar-rail__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.bar-rail__photo--slot{
	display:flex; align-items:center; justify-content:center;
	background:linear-gradient(155deg,var(--bg-panel-2),var(--bg-panel));
	color:var(--ink-faint); font-family:'Oswald',sans-serif; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
}

.bar-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:0 var(--gutter) 56px; }
.bar-gallery a{ display:block; aspect-ratio:1/1; overflow:hidden; border-radius:2px; }
.bar-gallery img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.bar-gallery a:hover img{ transform:scale(1.06); }

/* WPBakery's [vc_gallery] renders one wrapper div, not individual grid
   items — .bar-gallery's own display:grid would squash that single div
   into one of the 4 columns, so switch back to block here and let
   WPBakery lay itself out at full width. The a/img rules above still
   apply to whatever anchors/images WPBakery renders inside it (square
   crop, hover zoom), since they're plain descendant selectors. */
.bar-gallery--vc{ display:block; }

/* Placeholder photo slots — shown instead of .bar-gallery when a bar page
   has no images attached yet. Same asymmetric grid + gradient-tile
   treatment as the homepage's Recent Work grid (.work-grid), so an
   unfilled bar page still reads as designed rather than empty. */
.bar-gallery--slots{ grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(2,140px); }
.bar-gallery--slots .cell{ position:relative; border-radius:2px; overflow:hidden; display:flex; align-items:flex-end; }
.bar-gallery--slots .cell span{ font-family:'Oswald',sans-serif; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(238,241,234,.55); padding:8px 10px; }
.bar-gallery--slots .cell:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.bar-gallery--slots .cell:nth-child(6){ grid-column:span 2; }

.bar-explore{ background:var(--bg-panel); padding:56px var(--gutter); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); text-align:center; }
/* Flex + justify-content:center rather than a grid — a grid's implicit
   auto-fill tracks fill the full row width regardless of how many chips
   actually exist, so with only two or three (the usual case here) they
   ended up stranded against the left edge of a much wider row instead
   of reading as a centered cluster. flex-wrap lets them wrap and center
   as a group at any count instead. */
.bar-explore__grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:20px; }
.bar-chip{
	background:var(--bg); border:1px solid var(--rule); border-radius:3px; padding:16px 14px;
	display:flex; flex-direction:column; gap:8px; text-decoration:none; text-align:left;
	flex:0 1 220px;
	transition:border-color .15s ease, transform .15s ease;
}
.bar-chip:hover{ border-color:var(--accent); transform:translateY(-2px); }
.bar-chip__cat{ font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.bar-chip__name{ font-family:'Oswald',sans-serif; color:var(--ink); font-size:14px; font-weight:500; text-transform:uppercase; }

.bar-closer{ padding:72px var(--gutter); text-align:center; }
.bar-closer p{ color:var(--ink-muted); max-width:820px; margin:0 auto 26px; }
.bar-closer .hero-cta{ justify-content:center; }
.bar-closer__contact{ margin-top:24px; font-size:14px; color:var(--ink-faint); }
.bar-closer__contact a{ color:var(--ink-muted); }

/* Sitewide content width is 1440px (:root --maxw, above) — confirmed
   house style across every template's non-hero sections. .page-template-
   template-bar-v2-php/-brand-marketing-php/-our-bars-php below all still
   set their own --maxw:1440px too; now redundant with the :root value but
   left in place (harmless, same number) rather than removed, since a
   future per-template width change would want that scoping back. */
.page-template-template-bar-v2-php{ --maxw: 1440px; }
/* Bar pages: cap content width like the rest of a normal page instead of
   running full-bleed edge to edge. .hero and .section-head are shared
   with other templates (homepage, generic fallback pages), so scoped via
   .hero--bar and the #bar-gallery id rather than their bare class names
   — the other selectors here are already exclusive to bar pages.
   .bar-explore keeps its background/border spanning the full viewport
   (it's a colored band, not a plain section) by adjusting its padding
   instead of its width, so the band stays edge-to-edge while the text
   and grid inside it still line up with everything else's boxed edge. */
.bar-story, #bar-gallery, .bar-gallery, .bar-closer{
	max-width:var(--maxw);
	margin-left:auto;
	margin-right:auto;
}
/* .hero--bar (page.php's bar-page branch, template-smoothie-bar.php) and
   .hero--service (template-service.php) are boxed, not full-bleed like
   bar-v2/brand-marketing/our-bars — pinned to the old 1180px width
   explicitly (rather than var(--maxw), now 1440px) so widening every
   other section's content width sitewide doesn't also widen these two
   still-boxed heroes. Full-bleed heroes (.page-template-*-php .hero /
   .hero--bar overrides further down) already set max-width:none, which
   already wins over this regardless of what --maxw resolves to. */
.hero--bar, .hero--service{
	max-width:1180px;
	margin-left:auto;
	margin-right:auto;
}
/* ver2: full-bleed hero photo — same treatment as the How It Works page
   (template-how-it-works-v3.php / assets/how-it-works.css): the hero
   photo becomes a full-width/height background sitting behind the text
   instead of a boxed 4:3 .hero-art panel beside it in a two-column grid,
   with the same left-to-right dark fade so the heading stays readable.
   Replaces the previous boxed 40/60-column layout entirely. Scoped to
   .page-template-template-bar-v2-php so the shared .hero/.hero-art
   classes (homepage, triptych, duo items) are untouched, and left
   unconditional (not media-query-gated) so it also overrides the shared
   rule's own mobile stacking fallback (.hero{grid-template-columns:1fr}
   / .hero-art{order:-1;max-width:340px}) further down — a full-bleed
   photo behind the text is wanted at every width, not just desktop. */
.page-template-template-bar-v2-php .hero--bar{
	position:relative; overflow:hidden; display:block;
	min-height:0; max-width:none; margin-left:0; margin-right:0;
	padding-top:0; padding-bottom:0;
	padding-left:max(var(--gutter), calc((100% - var(--maxw))/2));
	padding-right:max(var(--gutter), calc((100% - var(--maxw))/2));
}
.page-template-template-bar-v2-php .hero--bar > div:first-child{
	position:relative; z-index:1; max-width:610px;
	padding-block:50px;
}
.page-template-template-bar-v2-php .hero-art{
	position:absolute; top:0; right:0; bottom:0; z-index:0; width:60%;
	aspect-ratio:auto; max-width:none; border-radius:0; border:0; background:none;
}
.page-template-template-bar-v2-php .hero--bar:after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(90deg, #000 0%, #000 42%, rgba(13,26,31,.15) 65%, rgba(13,26,31,.45) 100%);
}
@media (max-width:900px){
	.page-template-template-bar-v2-php .hero--bar > div:first-child{ max-width:90%; padding-block:50px; }
	.page-template-template-bar-v2-php .hero-art{ width:100%; }
	.page-template-template-bar-v2-php .hero--bar:after{
		background:linear-gradient(180deg, rgba(13,26,31,.92), rgba(13,26,31,.6) 75%, rgba(13,26,31,.87));
	}
}
/* [ver2 only] plain divider under the hero — 3px, --rule colour,
   inset 15% each side. */
.ver2-hero-rule{ border:0; border-top:3px solid var(--rule); margin:0 5%; }

/* Brand & Marketing page (template-brand-marketing.php): same full-bleed
   hero photo + 1320px content width treatment as bar-v2/How It
   Works/homepage — see the bar-v2 block just above for the full
   reasoning, identical here except the hero uses the plain .hero class
   (this page has no .hero--bar modifier) and the photo is a fixed
   gallery ([imagely id="21"]) rather than a per-bar lookup. */
.page-template-template-brand-marketing-php{ --maxw: 1440px; }
/* This page's hero uses the plain .hero class, not .hero--bar — the
   shared .hero h1 b{color:var(--ink)} (style.css) stays plain ink, and
   only .hero--bar h1 b gets the accent-green treatment. Scoped here so
   "Work for Your Event." reads green like every other bar page's <b>
   emphasis, without changing the plain .hero h1 b default other
   .hero-using templates (without --bar) rely on. */
.page-template-template-brand-marketing-php .hero h1 b{ color:var(--accent); }
/* h1 was bumped larger here for a bit (clamp(2.76rem,6vw,4.32rem)) but
   reverted — confirmed house style (2026-09-15): h1 is 57.6px (the
   shared .hero h1's own clamp ceiling, 3.6rem) on every page except the
   homepage, which keeps its own larger bespoke size. */

/* Our Bars page (template-our-bars.php): same full-bleed hero photo +
   1320px content width treatment as bar-v2/How It Works/brand-marketing/
   the homepage — see the bar-v2 block above for the full reasoning.
   Uses the plain .hero class (no .hero--bar modifier, this page isn't
   "about" one bar), so h1 b/em stay the shared defaults. */
.page-template-template-our-bars-php{ --maxw: 1440px; }
.page-template-template-our-bars-php .hero{
	position:relative; overflow:hidden; display:block;
	min-height:0; max-width:none; margin-left:0; margin-right:0;
	padding-top:0; padding-bottom:0;
	/* Same content-edge alignment as every other full-bleed hero: 5% on narrow
	   screens, the 1440 container's own edge on wide ones (was a flat 5%, which
	   left this hero ~230px left of the page content on big screens). */
	padding-left:max(var(--gutter), calc((100% - var(--maxw))/2));
	padding-right:max(var(--gutter), calc((100% - var(--maxw))/2));
}
.page-template-template-our-bars-php .hero > div:first-child{
	position:relative; z-index:1; max-width:610px;
	/* Matches the How It Works hero's own padding (assets/how-it-works.css
	   .bm-hiw__hero-inner) — the site's standard hero padding. */
	padding-block:50px;
}
.page-template-template-our-bars-php .hero-art{
	position:absolute; top:0; right:0; bottom:0; z-index:0; width:60%;
	aspect-ratio:auto; max-width:none; border-radius:0; border:0; background:none;
}
.page-template-template-our-bars-php .hero:after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(90deg, #000 0%, #000 42%, rgba(13,26,31,.15) 65%, rgba(13,26,31,.45) 100%);
}
@media (max-width:900px){
	.page-template-template-our-bars-php .hero > div:first-child{ max-width:90%; padding-block:50px; }
	.page-template-template-our-bars-php .hero-art{ width:100%; }
	.page-template-template-our-bars-php .hero:after{
		background:linear-gradient(180deg, rgba(13,26,31,.92), rgba(13,26,31,.6) 75%, rgba(13,26,31,.87));
	}
}

/* Sustainability page (template-sustainability.php): same full-bleed
   hero photo + 1440px content width treatment as bar-v2/brand-marketing/
   our-bars/the homepage — see the bar-v2 block above for the full
   reasoning. Uses the plain .hero class (no .hero--bar modifier). Every
   other section on this page is capped to 20px top/bottom padding
   instead of the shared components' own larger clamp()s — a page-only
   request, doesn't touch .editorial/.statement's defaults elsewhere. */
.page-template-template-sustainability-php{ --maxw: 1440px; }
.page-template-template-sustainability-php .hero{
	position:relative; overflow:hidden; display:block;
	min-height:0; max-width:none; margin-left:0; margin-right:0;
	padding-top:0; padding-bottom:0;
	padding-left:max(var(--gutter), calc((100% - var(--maxw))/2));
	padding-right:max(var(--gutter), calc((100% - var(--maxw))/2));
}
.page-template-template-sustainability-php .hero > div:first-child{
	position:relative; z-index:1; max-width:700px;
	padding-block:50px;
}
/* Scoped to .hero > .hero-art (direct child) rather than the bare
   .hero-art class — .hero-art is reused elsewhere on this page
   (.editorial__photo, .sus-lower__media), and an unscoped rule here
   previously stripped those photo frames' own height/positioning too,
   collapsing them to nothing. Same fix as the documented bar-page/
   brand-marketing gotcha (see those blocks) — must stay scoped this way. */
.page-template-template-sustainability-php .hero > .hero-art{
	position:absolute; top:0; right:0; bottom:0; z-index:0; width:60%;
	aspect-ratio:auto; max-width:none; border-radius:0; border:0; background:none;
}
.page-template-template-sustainability-php .hero:after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(90deg, #000 0%, #000 42%, rgba(13,26,31,.15) 65%, rgba(13,26,31,.45) 100%);
}
@media (max-width:900px){
	.page-template-template-sustainability-php .hero > div:first-child{ max-width:90%; padding-block:50px; }
	.page-template-template-sustainability-php .hero > .hero-art{ width:100%; }
	.page-template-template-sustainability-php .hero:after{
		background:linear-gradient(180deg, rgba(13,26,31,.92), rgba(13,26,31,.6) 75%, rgba(13,26,31,.87));
	}
}
.page-template-template-sustainability-php .editorial,
.page-template-template-sustainability-php .sus-lower,
.page-template-template-sustainability-php .statement,
.page-template-template-sustainability-php .purchasing{
	padding-top:30px; padding-bottom:30px;
}
/* "Have Specific Sustainability Requirements?" + "Planning an Event?" —
   heading (or eyebrow+heading) on the left, copy and button on the
   right, instead of the shared .statement-in's centred single column. */
.page-template-template-sustainability-php .statement-in--split{
	display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:56px; align-items:center;
	max-width:1300px; text-align:left;
}
.page-template-template-sustainability-php .statement-in--split h2{ margin:0; }
.page-template-template-sustainability-php .statement-in--split .statement__body p{
	margin:0 0 16px; max-width:none; text-align:left;
}
.page-template-template-sustainability-php .statement-in--split .statement__body p:last-of-type{ margin-bottom:0; }
.page-template-template-sustainability-php .statement-in--split .hero-cta{ justify-content:flex-start; margin-top:20px; }
@media(max-width:800px){
	.page-template-template-sustainability-php .statement-in--split{ grid-template-columns:1fr; text-align:center; gap:24px; }
	.page-template-template-sustainability-php .statement-in--split .statement__body p{
		text-align:center; max-width:60ch; margin-left:auto; margin-right:auto;
	}
	.page-template-template-sustainability-php .statement-in--split .hero-cta{ justify-content:center; }
}
/* "Responsible Hospitality." in the hero h1 is accent green on this page (the shared .hero h1 b is plain ink). */
.page-template-template-sustainability-php .hero h1 b{ color:var(--accent); }
/* Every pullquote on this page is 20px (the box styling it used to have
   is now gone sitewide — see the base .pullquote rule). */
.page-template-template-sustainability-php .pullquote{ font-size:20px; }
/* "Behind the Bar / How We Operate": the intro paragraph sits just to the right of the heading, close to it (stacks on small screens). */
.page-template-template-sustainability-php .sus-operate__head{
	display:grid; grid-template-columns:max-content minmax(0,1fr); gap:64px; align-items:center; margin-bottom:30px;
}
.page-template-template-sustainability-php .sus-operate__head p{ margin:0; }
@media (max-width:900px){
	.page-template-template-sustainability-php .sus-operate__head{ grid-template-columns:minmax(0,1fr); gap:16px; }
}
/* Hero note: plain white 16px text, no pullquote box. */
.sus-hero-note{
	margin:28px 0 0; font-family:'Oswald',sans-serif; font-weight:500;
	font-size:16px; line-height:1.38; color:var(--ink);
}

/* Bar Template ver3 (template-bar-v3.php) — a new, separate Specialty
   Coffee redesign, NOT applied to template-bar-v2.php (every other bar
   page, and this one until reassigned, stays on ver2 unchanged). Same
   full-bleed hero + 1440px content width treatment as every other
   template above; uses .hero--bar like ver2, so h1 b/em pick up the
   same accent-green/ink treatment. */
.page-template-template-bar-v3-php{ --maxw: 1440px; }
.page-template-template-bar-v3-php .hero--bar{
	position:relative; overflow:hidden; display:block;
	min-height:0; max-width:none; margin-left:0; margin-right:0;
	padding-top:0; padding-bottom:0;
	padding-left:max(var(--gutter), calc((100% - var(--maxw))/2));
	padding-right:max(var(--gutter), calc((100% - var(--maxw))/2));
}
.page-template-template-bar-v3-php .hero--bar > div:first-child{
	position:relative; z-index:1; max-width:610px;
	padding-block:50px;
}
.page-template-template-bar-v3-php .hero--bar > .hero-art{
	position:absolute; top:0; right:0; bottom:0; z-index:0; width:60%;
	aspect-ratio:auto; max-width:none; border-radius:0; border:0; background:none;
}
.page-template-template-bar-v3-php .hero--bar:after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(90deg, #000 0%, #000 42%, rgba(13,26,31,.15) 65%, rgba(13,26,31,.45) 100%);
}
@media (max-width:900px){
	.page-template-template-bar-v3-php .hero--bar > div:first-child{ max-width:90%; padding-block:50px; }
	.page-template-template-bar-v3-php .hero--bar > .hero-art{ width:100%; }
	.page-template-template-bar-v3-php .hero--bar:after{
		background:linear-gradient(180deg, rgba(13,26,31,.92), rgba(13,26,31,.6) 75%, rgba(13,26,31,.87));
	}
}
/* "Built for Events / Fully Managed, From Start to Finish" — the one
   section with no existing shared component to reuse: a 2-column split,
   left a paragraph + 3 stacked icon/title/caption benefit items, right a
   paragraph + a 5-step Plan-Prepare-SetUp-Serve-BreakDown icon flow (same
   visual language as .creative-managed__process on the brand-marketing
   page, but kept as its own copy here rather than reusing that class,
   since that one is scoped to a different template). */
.page-template-template-bar-v3-php .bar3-managed{
	display:grid; grid-template-columns:1fr 1fr; gap:56px;
	padding-block:30px;
}
.page-template-template-bar-v3-php .bar3-managed__col + .bar3-managed__col{
	border-left:1px solid var(--rule); padding-left:28px;
}
/* Left col stays plain (section's own band-black background shows
   through); right col gets a grey background bled out to the true right
   edge of the viewport. Painted as a separate absolutely-positioned
   layer on the section (::after) rather than as margin/padding on the
   column itself — a negative-margin bleed on the column would also
   widen its grid track, breaking the 50/50 split; this way the two
   columns stay exactly equal width and only the background paints
   wider, matching the .band-debox full-bleed trick used elsewhere. */
.page-template-template-bar-v3-php .bar3-managed{ position:relative; }
.page-template-template-bar-v3-php .bar3-managed:after{
	content:""; position:absolute; z-index:-1; top:0; bottom:0;
	left:calc(50% + 28px);
	right:0; /* the section is full-bleed (.band-debox), so 0 is already the viewport edge */
	background:var(--bg-panel);
}
.page-template-template-bar-v3-php .bar3-managed__col--grey{
	padding-right:max(var(--gutter), calc((100% - var(--maxw)) / 2));
}
@media (max-width:900px){
	.page-template-template-bar-v3-php .bar3-managed:after{ display:none; }
	.page-template-template-bar-v3-php .bar3-managed__col--grey{ background:var(--bg-panel); margin:0 calc(-1 * var(--gutter)); padding:32px var(--gutter); }
}
.page-template-template-bar-v3-php .bar3-managed__col h2{ font-weight:300; }
.page-template-template-bar-v3-php .bar3-managed__col p b{ color:inherit; font-weight:inherit; }
.page-template-template-bar-v3-php .brand-gallery__copy h2{ font-weight:300; }
.page-template-template-bar-v3-php .bar3-daypart .section-head h2{ font-weight:300; color:var(--ink); }
/* Explore More Event Hospitality — closing cross-link strip. */
/* Coffee Is Just the Beginning + Planning an Event? — two columns: a row of
   4 photo cards linking to the other bars (left), enquiry CTA (right). */
.page-template-template-bar-v3-php .bar3-explore{
	display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:32px 64px; padding-block:30px; align-items:start;
}
.page-template-template-bar-v3-php .bar3-explore__more h2,
.page-template-template-bar-v3-php .bar3-explore__cta h2{ font-weight:300; }
.page-template-template-bar-v3-php .bar3-explore__cta h2 b{ color:var(--accent); }
.page-template-template-bar-v3-php .bar3-explore__cta{ border-left:1px solid var(--rule); padding-left:64px; }
.page-template-template-bar-v3-php .bar3-explore__tag{ font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:600; color:var(--ink); letter-spacing:.02em; }
.page-template-template-bar-v3-php .bar3-explore__cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:24px; }
.page-template-template-bar-v3-php .bar3-explore__card{ display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--ink); }
.page-template-template-bar-v3-php .bar3-explore__photo{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:var(--bg-panel); }
.page-template-template-bar-v3-php .bar3-explore__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.page-template-template-bar-v3-php .bar3-explore__card:hover .bar3-explore__photo img{ transform:scale(1.05); }
.page-template-template-bar-v3-php .bar3-explore__label{ font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:.72rem; font-weight:600; letter-spacing:.03em; text-align:center; }
.page-template-template-bar-v3-php .bar3-explore__card:hover .bar3-explore__label{ color:var(--accent); }
@media (max-width:900px){
	.page-template-template-bar-v3-php .bar3-explore{ grid-template-columns:1fr; }
	.page-template-template-bar-v3-php .bar3-explore__cta{ border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:32px; }
}
.page-template-template-bar-v3-php .bar3-managed__benefits{
	display:flex; flex-direction:column; gap:20px; margin-top:24px;
}
.page-template-template-bar-v3-php .bar3-managed__benefits svg{
	width:36px; height:36px; flex:0 0 auto; fill:none; stroke:currentColor;
	stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; color:var(--accent);
}
.page-template-template-bar-v3-php .bar3-managed__benefits > div{ display:flex; align-items:flex-start; gap:16px; }
.page-template-template-bar-v3-php .bar3-managed__benefits h3{ font-size:1rem; margin:0 0 4px; }
.page-template-template-bar-v3-php .bar3-managed__benefits p{ margin:0; font-size:.88rem; color:var(--ink-muted); }
.page-template-template-bar-v3-php .bar3-managed__process{
	display:flex; align-items:flex-start; gap:6px; margin:24px 0; flex-wrap:wrap;
}
.page-template-template-bar-v3-php .bar3-managed__process > div{
	display:flex; flex-direction:column; align-items:center; gap:6px; flex:1 1 0; min-width:0;
}
.page-template-template-bar-v3-php .bar3-managed__process svg{
	height:22px; width:auto; max-width:100%; flex:0 0 auto;
	fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; color:var(--ink);
}
.page-template-template-bar-v3-php .bar3-managed__process span{
	font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:.62rem; letter-spacing:.02em; color:var(--ink);
	text-align:center; white-space:nowrap;
}
.page-template-template-bar-v3-php .bar3-managed__process em{
	align-self:center; margin-top:13px; color:var(--accent); font-style:normal; font-size:1rem; flex:0 0 auto;
}
@media (max-width:900px){
	.page-template-template-bar-v3-php .bar3-managed{ grid-template-columns:1fr; gap:36px; }
	.page-template-template-bar-v3-php .bar3-managed__process{ flex-wrap:wrap; gap:14px 6px; }
	.page-template-template-bar-v3-php .bar3-managed__process > div{ flex:1 1 30%; }
}
/* Photo inside each .daypart-step (the shared component's default is
   text-only) — scoped here since ver3 is the only page that adds a photo
   into this slot. The shared .daypart-step has its own 20px/18px padding
   on every side (style.css) which would inset the photo from the card's
   edges; zeroed out here (top/sides) so the photo fills the card
   full-bleed, with the caption text given its own inset padding instead.
   Bottom-blended into the section background via the ::after gradient
   rather than a hard-edged crop. */
.page-template-template-bar-v3-php .bar3-daypart .daypart-step{ padding:0 0 12px; overflow:hidden; }
.page-template-template-bar-v3-php .bar3-daypart .daypart-step h3{ margin:14px 18px 8px; }
.page-template-template-bar-v3-php .bar3-daypart .daypart-step p{ margin:0 18px; }
.page-template-template-bar-v3-php .bar3-daypart .daypart-step{ display:flex; flex-direction:column; height:auto; }
.page-template-template-bar-v3-php .bar3-daypart-photo{
	position:relative; flex:0 0 auto; height:176px; width:100%; margin:0; border-radius:0; overflow:hidden;
}
.page-template-template-bar-v3-php .bar3-daypart-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.page-template-template-bar-v3-php .bar3-daypart-photo:after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(180deg, transparent 80%, var(--bg-panel) 100%);
}

/* Every bar page hero is at least 505px tall; the text block is centred vertically inside it when the hero is taller than its content. */
.hero.hero--bar{ min-height:505px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
/* Lead-in line in the hero, above the CTA button (every ver3 bar page). */
.page-template-template-bar-v3-php .bar3-hero__lead{
	margin:6px 0 0; font-family:'Oswald',sans-serif; font-size:16px; line-height:1.4; color:var(--ink);
}
.page-template-template-bar-v3-php .bar3-weight-normal{ font-weight:400; }
/* Highlighted line inside body copy (e.g. Smoothie "On the Menu" list): white and bold instead of the muted body grey. */
.page-template-template-bar-v3-php .bar3-white-bold, .page-template-template-bar-v3-php .bar3-white-bold b{ color:var(--ink); font-weight:700; }
/* A pullquote that should read as ordinary body copy (normal font, case and weight, muted grey) — Smoothie closing line. */
.page-template-template-bar-v3-php .bar3-plain{ font-family:'Open Sans',sans-serif; font-weight:400; text-transform:none; color:var(--ink-muted); }
/* ...and it sits one normal paragraph gap (16px) under the list above it, not the pullquote's 28px. */
.page-template-template-bar-v3-php .pullquote:has(> .bar3-plain){ margin-top:16px !important; }
.page-template-template-bar-v3-php .bar3-editorial--stretch .pullquote{ font-size:16px; font-weight:700; text-transform:uppercase; }

/* Specialty Coffee / Put Your Brand — photo column stretched to match
   the copy column's own (content-driven) height instead of keeping its
   own fixed aspect-ratio. */
.page-template-template-bar-v3-php .bar3-editorial--stretch{ align-items:stretch; padding-block:30px; }
/* Craft section ("Made to Order" / "Specialty Coffee, Professionally Crafted.") — eyebrow 12px, heading 38.4px, on every ver3 bar page. */
.page-template-template-bar-v3-php .bar3-editorial--stretch .editorial__copy .eyebrow{ font-size:15px; }
/* No leftover paragraph margin under the last line of the copy, so the section's own 30px padding is the only space below it. */
.page-template-template-bar-v3-php .bar3-editorial--stretch .editorial__copy > :last-child{ margin-bottom:0; }
/* Same for the last paragraph of the "Where … Works" copy: no leftover paragraph margin underneath it. */
.page-template-template-bar-v3-php .bar3-where__copy > :last-child{ margin-bottom:0; }
.page-template-template-bar-v3-php .bar3-editorial--stretch .editorial__copy h2,
.page-template-template-bar-v3-php .bar3-editorial--stretch .editorial__copy h2 b{ font-size:38.4px; }
/* "Made to Order" (craft) picture on every bar page: the photo column is up to 657px wide but never more than 52% of the row, so on
   narrower screens it shrinks with the copy like the other sections, keeping the 657:411 proportions (657 x 411 at full width). */
.page-template-template-bar-v3-php .bar3-editorial__photo--fill{ position:relative; aspect-ratio:657 / 411; width:100%; height:auto; align-self:center; justify-self:start; }
@media (min-width:901px){
	.page-template-template-bar-v3-php .bar3-editorial--stretch{ grid-template-columns:minmax(0,min(657px,52%)) minmax(0,1fr); }
}
.page-template-template-bar-v3-php .bar3-editorial__photo--fill img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-template-template-bar-v3-php .bar3-brand-gallery--stretch{ grid-template-columns:minmax(0,3fr) minmax(0,7fr); align-items:stretch; padding-block:30px; }
.page-template-template-bar-v3-php .bar3-brand-gallery__main--fill{ aspect-ratio:auto; position:relative; grid-row:1 / 3; }
.page-template-template-bar-v3-php .bar3-brand-gallery__main--fill img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* More Than a Coffee Bar — copy on the left, one large photo on the right
   stretched to the copy's height, with an "Ideal For" icon row spanning
   the full width underneath (replaces the old 4-card photo grid + tick list). */
.page-template-template-bar-v3-php .bar3-mixed{
	display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:20px 48px; align-items:stretch;
}
.page-template-template-bar-v3-php .bar3-more-coffee{ padding-block:30px; }
.page-template-template-bar-v3-php .bar3-mixed__copy h2{ font-weight:300; }
.page-template-template-bar-v3-php .bar3-mixed__copy h2 b{ color:var(--accent); }
/* "More Than a …" section — eyebrow 12px, heading 38.4px, on every ver3 bar page. */
.page-template-template-bar-v3-php .bar3-mixed__copy{ padding-right:20px; }
.page-template-template-bar-v3-php .bar3-mixed__copy .eyebrow{ font-size:15px; }
.page-template-template-bar-v3-php .bar3-mixed__copy h2,
.page-template-template-bar-v3-php .bar3-mixed__copy h2 b{ font-size:38.4px; }
.page-template-template-bar-v3-php .bar3-mixed__photo{ position:relative; min-height:320px; overflow:hidden; background:var(--bg-panel); }
/* "More Than a …" / "Make It Yours" photo: the same size on every bar page — 793 x 492 (835 x 518 less 5%). Width is 793px whenever the column
   has room (never wider) and 95% of the column when it is narrower; the height follows from the 793:492 shape. Stacked layouts keep their full-width 4:3. */
@media (min-width:901px){
	.page-template-template-bar-v3-php .bar3-mixed__photo{ width:min(793px,95%); height:auto; aspect-ratio:793 / 492; min-height:0; align-self:center; justify-self:center; }
}
.page-template-template-bar-v3-php .bar3-mixed__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-template-template-bar-v3-php .bar3-tagline{
	font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:600; color:var(--ink); font-size:1rem;
}
/* "Ideal For" — label above a full-width row of circled icons, thin
   vertical rules between items. */
.page-template-template-bar-v3-php .bar3-ideal{ margin-top:24px; }
.page-template-template-bar-v3-php .bar3-ideal h3{
	font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:.95rem; letter-spacing:.04em; color:var(--accent); margin:0 0 14px;
}
/* Ideal For now sits in the left (copy) column under the text, so it wraps as a compact grid. */
.page-template-template-bar-v3-php .bar3-ideal__list{
	list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:14px 6px;
}
.page-template-template-bar-v3-php .bar3-ideal__list li{
	min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:0 4px;
}
/* In the "More Than a …" / "Make It Yours" copy the icon row is centred: fixed-width items that wrap and centre (a short last row stays centred too). */
.page-template-template-bar-v3-php .bar3-mixed__copy .bar3-ideal__list{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 6px; }
.page-template-template-bar-v3-php .bar3-mixed__copy .bar3-ideal__list li{ flex:0 0 90px; }
/* "Ideal For" with 6 or more items: three per row (two rows for six), spread evenly across the column. Shorter lists keep the centred wrap above. */
.page-template-template-bar-v3-php .bar3-mixed__copy .bar3-ideal__list:has(> li:nth-child(6)){ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 16px; }
.page-template-template-bar-v3-php .bar3-mixed__copy .bar3-ideal__list:has(> li:nth-child(6)) > li{ flex:none; }
.page-template-template-bar-v3-php .bar3-ideal__icon{
	width:56px; height:56px; border:1.5px solid var(--accent); border-radius:50%;
	display:flex; align-items:center; justify-content:center; color:var(--accent);
}
.page-template-template-bar-v3-php .bar3-ideal__icon svg{
	width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2;
	stroke-linecap:round; stroke-linejoin:round;
}
.page-template-template-bar-v3-php .bar3-ideal__label{ font-size:.8rem; line-height:1.3; color:var(--ink); font-weight:600; }
@media (max-width:900px){
	.page-template-template-bar-v3-php .bar3-mixed{ grid-template-columns:1fr; }
	.page-template-template-bar-v3-php .bar3-mixed__photo{ min-height:0; aspect-ratio:4/3; }
}

/* Numbered 3-step row under the craft copy, inside the text column (e.g. How It Works: 01 Choose / 02 Pedal / 03 Enjoy):
   coloured number badge, line icon, title, description, with a coloured arrow between the steps. */
.page-template-template-bar-v3-php .bar3-steps{
	list-style:none; margin:28px 0 0; padding:0;
	display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px;
}
.page-template-template-bar-v3-php .bar3-steps li{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; }
.page-template-template-bar-v3-php .bar3-steps__item--1{ --step:var(--accent); --step-ink:#0d1a1f; }
.page-template-template-bar-v3-php .bar3-steps__item--2{ --step:#f58220; --step-ink:#fff; }
.page-template-template-bar-v3-php .bar3-steps__item--3{ --step:#e91e63; --step-ink:#fff; }
.page-template-template-bar-v3-php .bar3-steps__n{
	display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
	background:var(--step); color:var(--step-ink); font-family:'Oswald',sans-serif; font-size:13px; font-weight:700; line-height:1; letter-spacing:.02em;
}
/* Step icons 10% smaller (56px -> 50.4px); the 01/02/03 numbers are gone. */
.page-template-template-bar-v3-php .bar3-steps__icon{ display:block; width:50.4px; height:50.4px; margin:4px 0 2px; color:var(--step); }
.page-template-template-bar-v3-php .bar3-steps__icon svg{ display:block; width:50.4px; height:50.4px; }
.page-template-template-bar-v3-php .bar3-steps__t{ font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); font-size:1.05rem; }
.page-template-template-bar-v3-php .bar3-steps__d{ color:var(--ink-muted); font-size:.92rem; line-height:1.35; }
/* Step-flow arrows between the steps (decorative, not buttons). */
.page-template-template-bar-v3-php .bar3-steps li:not(:last-child)::after{
	content:"→"; position:absolute; top:66px; right:-34px; width:24px; text-align:center; font-size:22px; line-height:1; color:var(--step);
}
.page-template-template-bar-v3-php .bar3-steps li.bar3-steps__item--2:not(:last-child)::after{ color:#e91e63; }
@media (max-width:700px){
	.page-template-template-bar-v3-php .bar3-steps{ grid-template-columns:1fr; gap:28px; }
	.page-template-template-bar-v3-php .bar3-steps li:not(:last-child)::after{ content:"↓"; position:static; width:auto; margin-top:6px; }
}

/* Extra photo + copy block ("Everyone Can Get Involved") — copy left, photo right. */
.page-template-template-bar-v3-php .bar3-extra{
	display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:24px 56px; align-items:stretch; padding-block:30px;
}
.page-template-template-bar-v3-php .bar3-extra__copy h2{ font-weight:300; }
.page-template-template-bar-v3-php .bar3-extra__photo{ position:relative; min-height:280px; overflow:hidden; background:var(--bg-panel); }
.page-template-template-bar-v3-php .bar3-extra__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-template-template-bar-v3-php .bar3-extra__photo .photo-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; }
@media (max-width:900px){
	.page-template-template-bar-v3-php .bar3-extra{ grid-template-columns:1fr; }
	.page-template-template-bar-v3-php .bar3-extra__photo{ min-height:0; aspect-ratio:4/3; }
}

/* Placeholder shown when a bar has no photo set for a slot yet. */
.page-template-template-bar-v3-php .bar3-hands__photo .photo-placeholder,
.page-template-template-bar-v3-php .bar3-mixed__photo .photo-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; }

/* Make It Yours / Put Your Brand in Their Hand — mirrors the
   .hands-showcase layout on the Brand & Marketing Integration page: 4-photo
   collage (one wide + three square) stretched to the copy column's height,
   copy on the right, then the full-width icon row + CTA underneath. */
.page-template-template-bar-v3-php .bar3-hands{
	display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:20px 56px; align-items:stretch; padding-block:30px;
}
.page-template-template-bar-v3-php .bar3-hands__photos{
	display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:1.6fr 1fr; gap:10px; height:100%; min-height:360px;
}
.page-template-template-bar-v3-php .bar3-hands__photo{ position:relative; overflow:hidden; background:var(--bg-panel); }
.page-template-template-bar-v3-php .bar3-hands__photo--main{ grid-column:1 / -1; }
/* "Make It Yours" photo collage: the Coffee page's size on every bar page — 736 x 580 (wide photo 736 x 351, three 239 x 219 below). Width is 736px
   whenever there is room and the column width when narrower; the height follows from the 736:580 shape instead of stretching to the copy.
   Stacked layouts keep their own 4:3. */
@media (min-width:901px){
	.page-template-template-bar-v3-php .bar3-hands{ grid-template-columns:minmax(0,min(736px,60%)) minmax(0,1fr); }
	.page-template-template-bar-v3-php .bar3-hands > .bar3-hands__photos{ width:min(736px,100%); height:auto; aspect-ratio:736 / 580; min-height:0; align-self:center; justify-self:start; }
}
.page-template-template-bar-v3-php .bar3-hands__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-template-template-bar-v3-php .bar3-hands__copy h2{ font-weight:300; line-height:.95; margin-bottom:20px; }
.page-template-template-bar-v3-php .bar3-hands__copy h2 b{ color:var(--accent); }
/* "Make It Yours / Put Your Brand in Their Hand" — eyebrow 12px, heading 38.4px, on every ver3 bar page. */
.page-template-template-bar-v3-php .bar3-hands__copy .eyebrow{ font-size:15px; }
.page-template-template-bar-v3-php .bar3-hands__copy h2,
.page-template-template-bar-v3-php .bar3-hands__copy h2 b{ font-size:38.4px; }
/* Paragraphs that come after the Ideal For row in "More Than a …". */
.page-template-template-bar-v3-php .bar3-mixed__after{ margin-top:18px; }
.page-template-template-bar-v3-php .bar3-mixed__after p{ margin:0 0 8px; }

/* "Make It Yours" list — two-column tick list with a divider between the columns. */
.page-template-template-bar-v3-php .bar3-hands__label{
	font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:.95rem; letter-spacing:.04em; color:var(--accent); margin:24px 0 14px;
}
.page-template-template-bar-v3-php .bar3-checks{
	list-style:none; margin:0 0 24px; padding:0; columns:2; column-gap:32px;
}
.page-template-template-bar-v3-php .bar3-checks li{
	display:flex; align-items:flex-start; gap:10px; break-inside:avoid; margin:0 0 12px; color:var(--ink); font-size:.92rem; line-height:1.35;
}
/* Bullet = one chevron from the Barmotion logo (lime). */
.page-template-template-bar-v3-php .bar3-checks svg{
	width:14px; height:14px; flex:0 0 auto; margin-top:5px; fill:var(--accent); stroke:none;
}
.page-template-template-bar-v3-php .bar3-hands__cta{ margin:0; }
@media (max-width:560px){
	.page-template-template-bar-v3-php .bar3-checks{ columns:1; }
}
@media (max-width:900px){
	.page-template-template-bar-v3-php .bar3-hands{ grid-template-columns:1fr; }
	.page-template-template-bar-v3-php .bar3-hands__photos{ height:auto; min-height:0; aspect-ratio:4/3; }
}

/* "Make It Yours" branding list — icon-over-label cards instead of the
   shared .brand-list pills, matching the approved reference. */
.page-template-template-bar-v3-php .bar3-iconrow{
	display:flex; flex-wrap:nowrap; gap:20px; margin-top:20px;
}
.page-template-template-bar-v3-php .bar3-iconrow > div{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; flex:1 1 0; min-width:0; }
@media (max-width:900px){
	.page-template-template-bar-v3-php .bar3-iconrow{ flex-wrap:wrap; }
	.page-template-template-bar-v3-php .bar3-iconrow > div{ flex:1 1 30%; }
}
.page-template-template-bar-v3-php .bar3-iconrow svg{
	width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.7;
	stroke-linecap:round; stroke-linejoin:round; color:var(--accent);
}
.page-template-template-bar-v3-php .bar3-iconrow span{ font-size:.72rem; color:var(--ink-muted); }

/* Built for Events — 3 benefit items side by side instead of stacked. */
.page-template-template-bar-v3-php .bar3-managed__benefits--row{
	flex-direction:row; gap:24px;
}
.page-template-template-bar-v3-php .bar3-managed__benefits--row > div{ flex-direction:column; align-items:center; text-align:center; flex:1 1 0; }
/* The item is a column with a 16px gap between icon, title and text; pull the text back up under the title (leaves a 4px gap). */
.page-template-template-bar-v3-php .bar3-managed__benefits--row h3{ margin-bottom:-12px; }
@media (max-width:640px){
	.page-template-template-bar-v3-php .bar3-managed__benefits--row{ flex-direction:column; }
}

/* Coffee Can Be Just the Beginning — left-aligned heading (overrides the
   shared .daypart .section-head{justify-content:center;text-align:center}),
   a small sub-line under it, and a 5th "section" in the row holding the
   closing statement instead of a separate paragraph below. */
.page-template-template-bar-v3-php .bar3-daypart{ padding-block:30px; }
.page-template-template-bar-v3-php .bar3-daypart .daypart-row{ padding-bottom:0; }
.page-template-template-bar-v3-php .bar3-daypart .section-head{ flex-direction:column; align-items:flex-start; justify-content:flex-start; text-align:left; padding-left:0; padding-right:0; gap:0; }
.page-template-template-bar-v3-php .bar3-daypart__sub{ margin:0; color:var(--ink-muted); }
/* Day-part section heading ("Mix It Up" / "Throughout the Day") on every bar-v3 page: heading 38.4px, eyebrow 15px (2026-10-14). */
body.page-template-template-bar-v3-php .bar3-daypart .section-head > .eyebrow{ font-size:15px; }
body.page-template-template-bar-v3-php .bar3-daypart .section-head > h2,
body.page-template-template-bar-v3-php .bar3-daypart .section-head > h2 b{ font-size:38.4px; }
.page-template-template-bar-v3-php .bar3-daypart .daypart-row{ align-items:stretch; }
.page-template-template-bar-v3-php .bar3-daypart-note{
	flex:1.2 1 0; align-self:stretch; display:flex; align-items:center; padding-left:24px;
	color:var(--ink); font-family:'Oswald',sans-serif; font-size:20px;
}
@media (max-width:900px){
	.page-template-template-bar-v3-php .bar3-daypart-note{ border-left:0; padding-left:0; margin-top:20px; }
}

/* "Where it works" — copy left, boxed Ideal For grid (3 columns) right. */
.page-template-template-bar-v3-php .bar3-where{
	display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:24px 56px; align-items:center; padding-block:30px;
}
.page-template-template-bar-v3-php .bar3-where__copy h2{ font-weight:300; }
.page-template-template-bar-v3-php .bar3-where__copy h2 b{ color:var(--accent); }
.page-template-template-bar-v3-php .bar3-where__copy .pullquote{ font-size:20px; text-transform:uppercase; }
.page-template-template-bar-v3-php .bar3-where__ideal{ background:var(--bg-panel); padding:28px 32px; }
.page-template-template-bar-v3-php .bar3-where__ideal h3{
	font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:.95rem; letter-spacing:.04em; color:var(--accent); margin:0 0 20px;
}
.page-template-template-bar-v3-php .bar3-where__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px 12px; }
.page-template-template-bar-v3-php .bar3-where__grid li{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
/* More section Ideal For row — icons in the .impact-flow__row style: no circle, 68px line-art
   (off-white outline, lime accent), Oswald caps label. */
.page-template-template-bar-v3-php .bar3-ideal__list .bar3-ideal__icon{ width:44px; height:44px; border:0; border-radius:0; color:var(--ink); }
.page-template-template-bar-v3-php .bar3-ideal__list .bar3-ideal__icon img{ width:44px; height:44px; object-fit:contain; display:block; }
.page-template-template-bar-v3-php .bar3-ideal__list .bar3-ideal__icon svg{
	width:38px; height:38px; fill:none; stroke:var(--ink); stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round;
}
.page-template-template-bar-v3-php .bar3-ideal__list .bar3-ideal__icon svg .acc{ stroke:var(--accent); }
.page-template-template-bar-v3-php .bar3-ideal__list .bar3-ideal__label{
	font-family:'Oswald',sans-serif; font-size:.72rem; line-height:1.25; text-transform:uppercase; letter-spacing:.02em; font-weight:700; color:var(--ink);
}

/* Linked Ideal For items keep the same stacked icon + label look. */
.page-template-template-bar-v3-php .bar3-ideal__list li a,
.page-template-template-bar-v3-php .bar3-where__grid li a{
	display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; color:inherit; text-decoration:none;
}
.page-template-template-bar-v3-php .bar3-ideal__list li a{ gap:6px; }
.page-template-template-bar-v3-php .bar3-ideal__list li a:hover .bar3-ideal__label,
.page-template-template-bar-v3-php .bar3-where__grid li a:hover .bar3-ideal__label{ color:var(--accent); }
@media (max-width:900px){
	.page-template-template-bar-v3-php .bar3-where{ grid-template-columns:1fr; }
}
@media (max-width:480px){
	.page-template-template-bar-v3-php .bar3-where__grid{ grid-template-columns:repeat(2,1fr); }
}

/* Day-part cards with a 3rd (description) line: let the cards grow with the
   text (equal heights via the row's stretch) and keep the photo at a fixed
   ratio instead of squeezing it into the old fixed 271.84px height. */
/* The card's description is hidden; it fades in over the photo when the photo is hovered
   (or focused / tapped on touch screens — the photo box gets tabindex="0"). */
.page-template-template-bar-v3-php .bar3-daypart .bar3-daypart-photo .bar3-daypart-step__desc{
	position:absolute; inset:0; z-index:2; margin:0; padding:14px; display:flex; align-items:flex-end;
	background:linear-gradient(0deg,rgba(13,26,31,.88) 0%,rgba(13,26,31,.55) 45%,transparent 85%); color:var(--ink); font-size:.82rem; line-height:1.4;
	opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.page-template-template-bar-v3-php .bar3-daypart .bar3-daypart-photo:hover .bar3-daypart-step__desc,
.page-template-template-bar-v3-php .bar3-daypart .bar3-daypart-photo:focus .bar3-daypart-step__desc,
.page-template-template-bar-v3-php .bar3-daypart .bar3-daypart-photo:focus-within .bar3-daypart-step__desc{ opacity:1; }
.page-template-template-bar-v3-php .bar3-daypart .bar3-daypart-photo[tabindex]{ cursor:pointer; outline:none; }
.page-template-template-bar-v3-php .bar3-daypart-note__head{ display:block; font-family:'Oswald',sans-serif; font-size:20px; color:var(--ink); }
.page-template-template-bar-v3-php .bar3-daypart-note__text{ display:block; margin-top:10px; font-family:'Open Sans',sans-serif; font-size:.88rem; color:var(--ink-muted); }

/* "Put Your Brand in Their Hands" rebuild — bespoke component (not the
   shared .editorial/.brand-gallery, both already used elsewhere on this
   page for a different shape) matching the approved reference: a 4-photo
   collage (one wide + three square, left) and an icon flow / divider /
   second statement / copy / handwritten pullquote / 4-icon benefits row
   (right). Scoped to this template only. */
.page-template-template-brand-marketing-php .hands-showcase{
	display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:56px; align-items:stretch;
}
/* Photo collage stretches to match .hands-showcase__copy's height (grid's
   own default for the two top-level columns, now that align-items is
   stretch) — needs its own rows sized in fr, not aspect-ratio, so the
   collage's total height can flex to whatever the copy column needs
   instead of a fixed ratio. Each photo's img/placeholder is already
   position:absolute so it can't feed its own intrinsic size back in. */
.page-template-template-brand-marketing-php .hands-showcase__photos{
	display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:1.6fr 1fr; gap:10px; height:100%;
}
/* Put Your Brand in Their Hands: the left column is exactly as wide as the photo collage (the collage keeps the size it had — 662 x 649 at a
   1440px window, 747 x 554 once the page is at its 1440px content width), and the right column takes everything that is left for the text.
   Scoped to the section itself — the same collage class is reused in the Brand Touchpoints showcase, which is left as it was. */
@media(min-width:901px){
	.page-template-template-brand-marketing-php section.hands-showcase{ grid-template-columns:minmax(0,calc((100% - 56px) * .54)) minmax(0,1fr); }
	.page-template-template-brand-marketing-php section.hands-showcase > .hands-showcase__photos{ width:100%; height:auto; aspect-ratio:662 / 649; align-self:center; }
}
@media(min-width:1500px){
	.page-template-template-brand-marketing-php section.hands-showcase > .hands-showcase__photos{ aspect-ratio:747 / 554; }
}
@media(max-width:900px){
	.page-template-template-brand-marketing-php section.hands-showcase > .hands-showcase__photos{ width:100%; height:auto; aspect-ratio:4/3; }
}
.page-template-template-brand-marketing-php .hands-showcase__photo--main{
	grid-column:1 / -1; overflow:hidden; background:var(--bg-panel); position:relative;
}
.page-template-template-brand-marketing-php .hands-showcase__photo{
	overflow:hidden; background:var(--bg-panel); position:relative;
}
.page-template-template-brand-marketing-php .hands-showcase__photo img,
.page-template-template-brand-marketing-php .hands-showcase__photo .photo-placeholder{
	position:absolute; inset:0; width:100%; height:100%;
}
.page-template-template-brand-marketing-php .hands-showcase__photo img{ object-fit:cover; }
.page-template-template-brand-marketing-php .hands-showcase__copy h2{ margin-top:50px; margin-bottom:20px; font-weight:300; line-height:.9; }
.page-template-template-brand-marketing-php .hands-showcase__benefits{ margin-bottom:30px; }
.page-template-template-brand-marketing-php .hands-showcase__copy h2 b{ color:var(--accent); font-size:3.2rem; }
.page-template-template-brand-marketing-php .hands-showcase__flow{
	display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:24px;
}
/* Icon PNGs are dark line-art on transparent (made for a light
   background) — inverted so they read as light-on-dark to match this
   page's theme. This icon set is glyph-only (no baked-in label, unlike
   an earlier version of these assets), so each sits in its own wrapper
   div with a plain text <span> label underneath. */
.page-template-template-brand-marketing-php .hands-showcase__flow > div{
	display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
}
.page-template-template-brand-marketing-php .hands-showcase__flow img{
	width:44px; height:44px; object-fit:contain; filter:invert(1);
}
.page-template-template-brand-marketing-php .hands-showcase__flow span{
	font-family:'Oswald',sans-serif; font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-muted);
}
.page-template-template-brand-marketing-php .hands-showcase__flow b{
	color:var(--accent); font-size:1.2rem; font-weight:400;
}
.page-template-template-brand-marketing-php .hands-showcase__flow b{ margin-left:20px; margin-right:20px; }
.page-template-template-brand-marketing-php .hands-showcase hr{
	border:0; border-top:1px solid var(--rule); margin:0 0 24px;
}
.page-template-template-brand-marketing-php .hands-showcase__copy h3{
	font-size:clamp(1.3rem,2.2vw,1.7rem); font-weight:300; margin-bottom:16px; line-height:.9;
}
.page-template-template-brand-marketing-php .hands-showcase__copy h3 b{ color:var(--accent); }
/* align-items:start, not center — labels wrap to different numbers of
   lines ("More Visibility" vs "A Higher Return on Experience"), so
   centering each cell within the row shifted the shorter-label icons
   down relative to the taller ones instead of keeping every icon's own
   top edge level. */
.page-template-template-brand-marketing-php .hands-showcase__benefits{
	display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:24px; padding-top:20px; border-top:1px solid var(--rule); align-items:start;
}
.page-template-template-brand-marketing-php .hands-showcase__benefits > div{
	display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
	border-right:1px solid var(--rule);
}
.page-template-template-brand-marketing-php .hands-showcase__benefits > div:last-child{ border-right:0; }
.page-template-template-brand-marketing-php .hands-showcase__benefits img{
	width:38px; height:38px; object-fit:contain; filter:invert(1);
}
.page-template-template-brand-marketing-php .hands-showcase__benefits span{
	font-family:'Oswald',sans-serif; font-size:.66rem; text-transform:uppercase; letter-spacing:.02em; color:var(--ink-muted); line-height:1.3;
}
@media(max-width:900px){
	.page-template-template-brand-marketing-php .hands-showcase{ grid-template-columns:1fr; }
	.page-template-template-brand-marketing-php .hands-showcase__benefits{ grid-template-columns:repeat(2,1fr); }
	.page-template-template-brand-marketing-php .hands-showcase__benefits > div:nth-child(2n){ border-right:0; }
}

/* "More Than Putting a Logo on a Cup." + "Your Brand, Every Touchpoint."
   — combined into one .brand-touchpoints section per the approved
   reference image: a head row (heading+subtext left, small-caps tag
   right), a 3-step row reusing the shared .daypart-arrow for its arrows,
   then a photo-led showcase reusing the .hands-showcase__photos 60/40
   height-matched collage pattern, and a foot row reusing the
   .impact-flow__foot 3-column shape with its own content. */
/* Flat 30px top/bottom buffer on every section, matching the home
   page's section spacing (.bm-home__trusted etc. in barmotion-home.css)
   — this page's own sections had no consistent vertical rhythm at all
   (0, 15px bottom only, 56px, clamp(56-84px) depending on the section). */
.page-template-template-brand-marketing-php .hands-showcase,
.page-template-template-brand-marketing-php .brand-touchpoints-top,
.page-template-template-brand-marketing-php .brand-touchpoints,
.page-template-template-brand-marketing-php .event-journey,
.page-template-template-brand-marketing-php .daypart,
.page-template-template-brand-marketing-php .brand-touchpoints-top{
	border-bottom:1px solid var(--rule) !important;
}
.page-template-template-brand-marketing-php section.hands-showcase,
.page-template-template-brand-marketing-php section.brand-touchpoints-top,
.page-template-template-brand-marketing-php section.brand-touchpoints,
.page-template-template-brand-marketing-php section.event-journey,
.page-template-template-brand-marketing-php section.creative-managed,
.page-template-template-brand-marketing-php section.daypart{
	padding-top:30px; padding-bottom:30px;
}
.page-template-template-brand-marketing-php .brand-touchpoints__top{
	display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center;
	padding-top:20px; padding-bottom:24px;
}
.page-template-template-brand-marketing-php .brand-touchpoints__head{ padding:0; }
.page-template-template-brand-marketing-php .brand-touchpoints__title{ font-size:clamp(2.2rem,4vw,3.2rem); line-height:1.05; font-weight:300; margin:0 0 12px; }
.page-template-template-brand-marketing-php .brand-touchpoints__title b{ color:var(--accent); }
.page-template-template-brand-marketing-php .brand-touchpoints__head > div:first-child p{ margin:0; color:var(--ink-muted); }
.page-template-template-brand-marketing-php .brand-touchpoints__steps{
	display:flex; flex-direction:column; gap:10px;   /* was 22px: the three steps sit closer together */
}
.page-template-template-brand-marketing-php .brand-touchpoints__step{ display:flex; align-items:center; gap:14px; }
.page-template-template-brand-marketing-php .brand-touchpoints__num{
	display:flex; align-items:center; font-family:'Oswald',sans-serif; font-size:2.4rem; font-weight:700; color:var(--ink-faint); line-height:1;   /* was 4rem */
	border-right:1px solid var(--rule); padding-right:14px;
}
.page-template-template-brand-marketing-php .brand-touchpoints__step h3{ font-size:1.05rem; margin:0 0 2px; }
.page-template-template-brand-marketing-php .brand-touchpoints__step p{ font-size:.88rem; color:var(--ink-muted); margin:0; }
.page-template-template-brand-marketing-php .brand-touchpoints__showcase{
	display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:56px; align-items:stretch; padding-top:8px;
}
.page-template-template-brand-marketing-php .brand-touchpoints__photos{
	display:grid; grid-template-columns:repeat(3,1fr); gap:10px; height:100%;
}
.page-template-template-brand-marketing-php .brand-touchpoints__photo{
	overflow:hidden; background:var(--bg-panel); position:relative; height:100%;
}
.page-template-template-brand-marketing-php .brand-touchpoints__photo img,
.page-template-template-brand-marketing-php .brand-touchpoints__photo .photo-placeholder{
	position:absolute; inset:0; width:100%; height:100%;
}
.page-template-template-brand-marketing-php .brand-touchpoints__photo img{ object-fit:cover; }
.page-template-template-brand-marketing-php .brand-touchpoints__copy .eyebrow{ display:block; margin-bottom:8px; font-size:15.36px; }
.page-template-template-brand-marketing-php .brand-touchpoints__copy h2{ margin:0 0 16px; font-weight:300; line-height:.9; font-size:57.6px; }
.page-template-template-brand-marketing-php .brand-touchpoints__copy h2 b{ color:var(--accent); }
.page-template-template-brand-marketing-php .brand-touchpoints__copy > p{ margin:0 0 24px; color:var(--ink-muted); }
.page-template-template-brand-marketing-php .brand-touchpoints__list{
	display:flex; gap:16px; padding-top:16px; margin-top:16px;
}
.page-template-template-brand-marketing-php .brand-touchpoints__list:first-of-type{ margin-top:0; padding-top:0; }
.page-template-template-brand-marketing-php .brand-touchpoints__list svg{
	width:30px; height:34px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2;
	stroke-linecap:round; stroke-linejoin:round; color:var(--accent); margin-top:2px;
	border-right:1px solid var(--rule); padding-right:16px; box-sizing:content-box;
}
.page-template-template-brand-marketing-php .brand-touchpoints__copy > div:nth-child(4) svg,
.page-template-template-brand-marketing-php .brand-touchpoints__copy > div:nth-child(5) svg{
	width:39px; height:44.2px; color:var(--ink);
}
.page-template-template-brand-marketing-php .brand-touchpoints__list h3{ font-size:.95rem; font-weight:300; margin:0 0 6px; }
.page-template-template-brand-marketing-php .brand-touchpoints__list p{ font-size:.82rem; color:var(--ink-muted); margin:0; line-height:1.38; }
.page-template-template-brand-marketing-php .brand-touchpoints__foot{
	display:grid; grid-template-columns:1.2fr .8fr 1.2fr; align-items:stretch; gap:32px; margin:24px 0 0;
	border:1px solid var(--rule); border-radius:4px;
}
.page-template-template-brand-marketing-php .brand-touchpoints__retain-head{
	display:flex; flex-direction:column; justify-content:center; border-left:3px solid var(--accent); padding:14px 24px;
}
.page-template-template-brand-marketing-php .brand-touchpoints__retain-head h2{ margin:0 0 8px; font-weight:300; line-height:.9; font-size:clamp(1.5rem,2.6vw,1.9rem); }
.page-template-template-brand-marketing-php .brand-touchpoints__retain-head h2 b{ color:var(--accent); }
.page-template-template-brand-marketing-php .brand-touchpoints__retain-head p{ margin:0; font-size:.9rem; color:var(--ink-muted); }
.page-template-template-brand-marketing-php .brand-touchpoints__retain-flow{
	position:relative; display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 24px;
}
.page-template-template-brand-marketing-php .brand-touchpoints__retain-flow::before,
.page-template-template-brand-marketing-php .brand-touchpoints__retain-flow::after{
	content:""; position:absolute; top:20%; bottom:20%; width:2px; background:var(--rule);
}
.page-template-template-brand-marketing-php .brand-touchpoints__retain-flow::before{ left:0; }
.page-template-template-brand-marketing-php .brand-touchpoints__retain-flow::after{ right:0; }
.page-template-template-brand-marketing-php .brand-touchpoints__retain-flow > div{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.page-template-template-brand-marketing-php .brand-touchpoints__retain-flow svg{
	width:42.5px; height:42.5px; color:var(--ink);
}
.page-template-template-brand-marketing-php .brand-touchpoints__retain-flow span{
	font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:.66rem; letter-spacing:.03em; color:var(--ink); font-weight:700; text-align:center; max-width:9ch;
}
.page-template-template-brand-marketing-php .brand-touchpoints__retain-flow > div:nth-child(3) svg{ color:var(--accent); }
.page-template-template-brand-marketing-php .brand-touchpoints__retain-arrow{ align-self:center; }
.page-template-template-brand-marketing-php .brand-touchpoints__retain-arrow svg{ width:32.5px; height:32.5px; color:var(--accent); }
.page-template-template-brand-marketing-php .brand-touchpoints__retain-copy{ display:flex; flex-direction:column; justify-content:center; padding:14px 24px; }
.page-template-template-brand-marketing-php .brand-touchpoints__retain-copy p{ margin:0 0 12px; font-size:.9rem; color:var(--ink-muted); }
.page-template-template-brand-marketing-php .brand-touchpoints__retain-copy .brand-touchpoints__highlight{
	font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:15.2px; letter-spacing:.02em;
	color:var(--accent) !important; font-weight:700; margin:0 !important; display:inline-block; white-space:nowrap;
}
@media(max-width:900px){
	.page-template-template-brand-marketing-php .brand-touchpoints__foot{ grid-template-columns:1fr; margin-right:0; }
	.page-template-template-brand-marketing-php .brand-touchpoints__retain-flow{ border-top:2px solid var(--rule); border-bottom:2px solid var(--rule); }
	.page-template-template-brand-marketing-php .brand-touchpoints__retain-flow::before,
	.page-template-template-brand-marketing-php .brand-touchpoints__retain-flow::after{ content:none; }
	.page-template-template-brand-marketing-php .brand-touchpoints__retain-copy{ padding-right:24px; }
}
@media(max-width:900px){
	.page-template-template-brand-marketing-php .brand-touchpoints__top{ grid-template-columns:1fr; gap:28px; }
	.page-template-template-brand-marketing-php .brand-touchpoints__showcase{ grid-template-columns:1fr; }
}

/* "From One Bar to the Whole Event." + "One Event, Different Jobs to
   Do." — combined into one .event-journey section per the approved
   reference image: icon+arrow row for the first half, a circular-photo
   daypart journey for the second, one shared callout box to close. */
.page-template-template-brand-marketing-php .event-journey__head{ text-align:center; max-width:820px; margin:0 auto; }
.page-template-template-brand-marketing-php .event-journey__head h2{ font-weight:300; }
.page-template-template-brand-marketing-php .event-journey__head h2 b{ position:relative; display:inline-block; color:var(--accent); }
.page-template-template-brand-marketing-php .event-journey__head h2 b::after{
	content:""; position:absolute; left:0; right:0; bottom:-6px; height:4px; background:var(--accent); border-radius:2px;
}
.page-template-template-brand-marketing-php .event-journey__head p{ max-width:820px; margin:16px auto 0; color:var(--ink-muted); }
/* Text-left / icons-right split for "From One Bar to the Whole Event."
   (was heading+copy centred full-width above a centred icon row). */
.page-template-template-brand-marketing-php .event-journey__top{
	display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center;
}
.page-template-template-brand-marketing-php .event-journey__top .event-journey__head{ text-align:left; max-width:none; margin:0; }
.page-template-template-brand-marketing-php .event-journey__top .event-journey__head p{ margin-left:0; margin-right:0; }
.page-template-template-brand-marketing-php .event-journey__head:first-of-type h2{ font-size:57.6px; }
.page-template-template-brand-marketing-php .event-journey__head:first-of-type h2 b::after{ content:none; }
.page-template-template-brand-marketing-php .event-journey__head--daypart h2{ font-size:38.4px; }
.page-template-template-brand-marketing-php .event-journey__head--daypart h2 b::after{ content:none; }
.page-template-template-brand-marketing-php .event-journey__head--daypart p{ margin-top:0; }
.page-template-template-brand-marketing-php .event-journey__steps{
	display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:16px; padding:10px 0 4px;
}
.page-template-template-brand-marketing-php .event-journey__top .event-journey__steps{
	justify-content:flex-start; flex-wrap:wrap; align-items:center; gap:20px 24px; padding:0;
}
.page-template-template-brand-marketing-php .event-journey__steps > div{ display:flex; align-items:center; gap:10px; }
.page-template-template-brand-marketing-php .event-journey__steps svg{
	height:64px; width:auto; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2;
	stroke-linecap:round; stroke-linejoin:round; color:var(--accent);
}
.page-template-template-brand-marketing-php .event-journey__steps span{
	font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:400; font-size:.85rem; color:var(--ink);
}
.page-template-template-brand-marketing-php .event-journey__steps-arrow{ align-self:center; }
.page-template-template-brand-marketing-php .event-journey__steps-arrow svg{ height:22px; color:var(--accent); }
.page-template-template-brand-marketing-php .event-journey__daypart-row{
	display:flex; align-items:flex-start; justify-content:center; gap:16px; padding:28px 0 8px;
}
.page-template-template-brand-marketing-php .event-journey__daypart-step{
	display:flex; flex-direction:column; align-items:center; text-align:center; max-width:220px;
}
.page-template-template-brand-marketing-php .event-journey__photo{
	width:140px; height:140px; border-radius:50%; overflow:hidden; position:relative;
	background:var(--bg-panel); border:2px solid var(--rule); margin-bottom:14px;
}
.page-template-template-brand-marketing-php .event-journey__photo img,
.page-template-template-brand-marketing-php .event-journey__photo .photo-placeholder{
	position:absolute; inset:0; width:100%; height:100%;
}
.page-template-template-brand-marketing-php .event-journey__photo img{ object-fit:cover; }
.page-template-template-brand-marketing-php .event-journey__label{
	font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:700; font-size:14.72px; color:var(--accent);
}
.page-template-template-brand-marketing-php .event-journey__daypart-step h3{
	position:relative; font-size:.92rem; margin:4px 0 18px; padding-bottom:8px; display:inline-block;
}
.page-template-template-brand-marketing-php .event-journey__daypart-step h3::after{
	content:""; position:absolute; left:50%; bottom:0; width:30px; height:2px; background:var(--accent); transform:translateX(-50%);
}
.page-template-template-brand-marketing-php .event-journey__daypart-step p{ font-size:.84rem; color:var(--ink-muted); margin:0; }
.page-template-template-brand-marketing-php .event-journey__daypart-row .daypart-arrow{ align-self:center; margin-top:60px; }
.page-template-template-brand-marketing-php .event-journey__pullquote{
	display:flex; align-items:center; justify-content:center; gap:24px;
	max-width:640px; margin-left:auto !important; margin-right:auto !important; text-align:center;
}
.page-template-template-brand-marketing-php .event-journey__pullquote > svg{
	height:48px; width:auto; flex:0 0 auto; color:var(--accent);
	border-right:1px solid var(--rule); padding-right:24px; box-sizing:content-box;
}
.page-template-template-brand-marketing-php .event-journey__pullquote-text{ text-align:left; }
.page-template-template-brand-marketing-php .event-journey__pullquote-lead{
	font-weight:400; text-transform:uppercase; font-size:16px;
}
.page-template-template-brand-marketing-php .event-journey__pullquote-sub{
	display:inline-block; margin-top:6px; font-size:13.44px;
}
@media(max-width:600px){
	.page-template-template-brand-marketing-php .event-journey__pullquote{ flex-direction:column; gap:16px; }
	.page-template-template-brand-marketing-php .event-journey__pullquote-text{ text-align:center; }
	.page-template-template-brand-marketing-php .event-journey__pullquote > svg{ border-right:0; padding-right:0; }
}
@media(max-width:900px){
	.page-template-template-brand-marketing-php .event-journey__top{ grid-template-columns:minmax(0,1fr); gap:24px; }
	.page-template-template-brand-marketing-php .event-journey__steps{ flex-direction:column; align-items:flex-start; }
	.page-template-template-brand-marketing-php .event-journey__daypart-row{ flex-direction:column; align-items:center; }
	.page-template-template-brand-marketing-php .event-journey__daypart-row .daypart-arrow{ transform:rotate(90deg); margin-top:0; }
}

/* "Creative at the Front." + "Fully Managed." — combined into one
   two-column .creative-managed section per the approved reference
   image: a vertical rule between the two statement columns (only one
   of the two, via border-left on the second), an icon-led process row
   replacing the old plain-text .process-row on the right, and a shared
   footer CTA callout reusing the boxed-panel pattern already used for
   .brand-touchpoints__foot. */
.page-template-template-brand-marketing-php .creative-managed{
	display:grid; grid-template-columns:1fr 1fr; gap:64px; padding-top:30px; padding-bottom:30px;
}
.page-template-template-brand-marketing-php .creative-managed__col:first-child{
	border-right:1px solid var(--rule); padding-right:64px;
}
.page-template-template-brand-marketing-php .creative-managed__col--right{
	padding-left:64px;
}
.page-template-template-brand-marketing-php .creative-managed__col h2{ font-weight:300; margin-bottom:16px; }
.page-template-template-brand-marketing-php .creative-managed__title{ font-size:51.2px; line-height:.9; }
.page-template-template-brand-marketing-php .creative-managed__title b{ font-weight:700; }
.page-template-template-brand-marketing-php .creative-managed__col h2 b{ color:var(--accent); }
.page-template-template-brand-marketing-php .creative-managed__col > p{ color:var(--ink-muted); margin:0; }
.page-template-template-brand-marketing-php .creative-managed__note{
	display:flex; align-items:center; gap:16px; margin-top:28px;
}
.page-template-template-brand-marketing-php .creative-managed__note-line{
	width:40px; height:3px; background:var(--accent); flex:0 0 auto;
}
.page-template-template-brand-marketing-php .creative-managed__note p{ margin:0; font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:700; font-size:24px; }
.page-template-template-brand-marketing-php .creative-managed__note p b{ color:var(--accent); font-weight:700; }
.page-template-template-brand-marketing-php .creative-managed__note-lead{ font-weight:400; color:var(--ink); }
.page-template-template-brand-marketing-php .creative-managed__process{
	display:flex; align-items:flex-start; flex-wrap:nowrap; gap:4px; margin:24px 0;
}
.page-template-template-brand-marketing-php .creative-managed__process > div{
	display:flex; flex-direction:column; align-items:center; gap:6px; flex:1 1 0; min-width:0;
}
.page-template-template-brand-marketing-php .creative-managed__process svg{
	height:22px; width:auto; max-width:100%; flex:0 0 auto;
	fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
	color:var(--ink);
}
.page-template-template-brand-marketing-php .creative-managed__process span{
	font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:.58rem; letter-spacing:.01em; color:var(--ink);
	text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.page-template-template-brand-marketing-php .creative-managed__process-arrow{
	align-self:center; margin-top:11px; color:var(--accent); font-style:normal; font-size:1rem; flex:0 0 auto;
}
.page-template-template-brand-marketing-php .creative-managed__process-arrow svg{ height:16px; }
.page-template-template-brand-marketing-php .creative-managed__process-arrow svg{ height:22px; }
.page-template-template-brand-marketing-php .creative-managed__foot{
	grid-column:1 / -1; display:flex; align-items:center; gap:20px;
	width:fit-content; max-width:100%; margin-left:auto !important; margin-right:auto !important; margin-bottom:0;
}
.page-template-template-brand-marketing-php .creative-managed__foot-icon{
	display:flex; align-items:center; justify-content:center; width:80px; flex:0 0 auto;
	border-right:1px solid var(--rule); padding:0 20px; box-sizing:content-box;
}
.page-template-template-brand-marketing-php .creative-managed__foot-icon svg{
	height:40px; width:auto; flex:0 0 auto; color:var(--accent);
}
.page-template-template-brand-marketing-php .creative-managed__foot p{
	flex:1; margin:0; font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:700; font-size:38.4px;
}
.page-template-template-brand-marketing-php .creative-managed__foot p b{ color:var(--accent); }
@media(max-width:900px){
	.page-template-template-brand-marketing-php .creative-managed{ grid-template-columns:1fr; gap:40px; }
	.page-template-template-brand-marketing-php .creative-managed__col:first-child{ border-right:0; padding-right:0; }
	.page-template-template-brand-marketing-php .creative-managed__col--right{ padding-left:0; border-top:1px solid var(--rule); padding-top:40px; }
	.page-template-template-brand-marketing-php .creative-managed__foot{ flex-direction:column; text-align:center; }
	.page-template-template-brand-marketing-php .creative-managed__foot-icon{ border-right:0; padding:0; width:auto; }
}
@media(max-width:600px){
	.page-template-template-brand-marketing-php .creative-managed__process{ flex-wrap:wrap; gap:14px 6px; }
	.page-template-template-brand-marketing-php .creative-managed__process > div{ flex:1 1 22%; }
	.page-template-template-brand-marketing-php .creative-managed__process-arrow{ display:none; }
}

/* "Hospitality With a Job to Do." — bigger than the shared .section-head
   h2 (a compact section-label size used by every .section-head sitewide,
   left untouched), with the "a Job to Do." line broken out and coloured
   like every other <b> emphasis on this page. --lg modifier scopes this
   to just this one heading, not the other three .section-head usages on
   this same page (logo-on-a-cup / one-event-different-jobs / FAQ). The
   paragraph moves inside .section-head itself to sit on the right —
   .section-head is already a flex row with justify-content:space-between,
   so a second child there lines up beside the heading for free. */
/* .section-head's own padding:0 5% (shared, sitewide) insets its content
   an extra 5% beyond .wrap's own padding — fine when .section-head sits
   directly under <body> like everywhere else it's used, but here it's
   nested inside .wrap band-debox, so that extra padding was pushing the
   heading's own left edge past .photo-grid's (a plain .wrap child with
   no padding of its own) instead of lining up with it. */
/* Grid, not flex — a 50/50 grid guarantees the paragraph's own left edge
   starts exactly at the row's horizontal midpoint regardless of how wide
   the heading or paragraph text itself is (flex + justify-content only
   controls the two ends, not a fixed middle start point). */
.page-template-template-brand-marketing-php .section-head--lg{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:48px; padding-left:0; padding-right:0; }
.page-template-template-brand-marketing-php .section-head--lg > div:first-child{ border-right:1px solid var(--rule); padding-right:24px; }
.page-template-template-brand-marketing-php .section-head--lg h2{
	font-size:clamp(2.2rem,4vw,3.2rem); line-height:.9; font-weight:300;
}
.page-template-template-brand-marketing-php .section-head--lg h2 b{ color:var(--accent); }
/* Left column: the old "Hospitality Is Already Part of the Event" intro
   heading, reused here at its original bigger size (--title) so it reads
   as the dominant heading of the pair, with a green underline beneath the
   bold word matching the approved reference image. Right column: the
   original "Hospitality With a Job to Do." heading, demoted to h3 and
   kept at the section-head--lg h2 rule's smaller size so it reads as the
   secondary line under the paragraph. This lead line is an eyebrow (was
   styled as plain ink-coloured text, not the standard green tag) — bumped
   to the site's normal accent-green eyebrow treatment, sized 15.36px to
   pair with the 57.6px heading beside it (same rule as the hero eyebrow). */
.page-template-template-brand-marketing-php .section-head--lg .section-head__eyebrow{
	font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:600;
	font-size:15.36px; letter-spacing:.22em; line-height:1.3; color:var(--accent); margin:0 0 4px;
}
.page-template-template-brand-marketing-php .section-head--lg h2.section-head--lg__title{
	font-size:3.6rem; line-height:.9; font-weight:300; margin:0;
}
.page-template-template-brand-marketing-php .section-head--lg__job{
	font-size:38.4px; line-height:.9; font-weight:300; margin-top:16px;
}
.page-template-template-brand-marketing-php .section-head--lg__job b{ color:var(--accent); }
/* .statement-in{max-width:820px} (shared with bar-v2/conference/
   exhibitions/smoothie-bar/sustainability, so left untouched there) is
   this page's OTHER width-capped container besides .wrap — this page
   uses .statement heavily for its later sections, so it needs the same
   1320px bump for everything on the page to read as one consistent
   width, not just the .wrap-based sections above. */
.page-template-template-brand-marketing-php .statement-in{ max-width:1320px; }
/* "Hospitality Is Already Part of the Event" intro section — two-tier
   heading matching the approved reference image: a small uppercase lead
   line, then a much bigger heading than .editorial__copy h2 normally
   gets elsewhere on this same page (hands/interaction sections), hence
   the --intro modifier rather than resizing .editorial__copy h2 sitewide
   on this template. */
.page-template-template-brand-marketing-php .editorial__copy--intro .editorial__lead{
	font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:400;
	font-size:1.1rem; line-height:1.3; color:var(--ink); margin:0 0 4px;
}
.page-template-template-brand-marketing-php .editorial__copy--intro h2{
	font-size:3.6rem; line-height:.9; font-weight:300;
}
/* Photo column matches the copy column's height instead of the fixed
   4:3 .hero-art normally gets — .editorial's own align-items:center
   would otherwise centre both grid cells at their own content height
   (mismatched), so this cell needs align-items:stretch instead, plus
   aspect-ratio:auto since a fixed ratio would fight being stretched to
   an arbitrary height. The img/placeholder inside is taken out of flow
   (position:absolute) so its own intrinsic size can't feed back into
   the stretch calculation — same fix as the how-it-works "Make it
   yours" section's photo (assets/how-it-works.css). */
.page-template-template-brand-marketing-php .editorial--intro{ align-items:stretch; }
.page-template-template-brand-marketing-php .editorial--intro .editorial__photo{
	aspect-ratio:auto; position:relative;
}
.page-template-template-brand-marketing-php .editorial--intro .editorial__photo img,
.page-template-template-brand-marketing-php .editorial--intro .editorial__photo .photo-placeholder{
	position:absolute; inset:0;
}
/* .brand-gallery__main to match .brand-gallery__copy's height (same grid
   row, column 2) — .brand-gallery itself never sets align-items, so
   Grid's own default (stretch) already applies to both cells; only
   .brand-gallery__main's own aspect-ratio:4/3 (shared with every other
   template using this component, so scoped here rather than changed
   there) fights that stretch by locking its own ratio instead. Same
   position:absolute-the-image fix as .editorial--intro above, for the
   same circular-height reason. */
.page-template-template-brand-marketing-php .brand-gallery__main{
	aspect-ratio:auto; position:relative;
}
.page-template-template-brand-marketing-php .brand-gallery__main img,
.page-template-template-brand-marketing-php .brand-gallery__main .photo-placeholder{
	position:absolute; inset:0;
}
.page-template-template-brand-marketing-php .hero{
	position:relative; overflow:hidden; display:flex; align-items:center;   /* min 525px; the text stays vertically centred */
	min-height:525px; max-width:none; margin-left:0; margin-right:0;
	padding-top:0; padding-bottom:0;
	padding-left:max(var(--gutter), calc((100% - var(--maxw))/2));
	padding-right:max(var(--gutter), calc((100% - var(--maxw))/2));
}
.page-template-template-brand-marketing-php .hero > div:first-child{
	position:relative; z-index:1; width:100%; max-width:610px;
	padding-block:50px;
}
/* This template reuses the plain .hero-art class extensively elsewhere on
   the page (photo-grid items, editorial photos, brand-gallery, triptych
   items) for its own gradient-placeholder box, not just the hero — so
   these two rules MUST stay scoped to ".hero >", not just ".hero-art"
   alone, or every one of those other boxes also becomes position:absolute
   and collapses to (0,0), which is what silently broke the rest of the
   page's layout the first time this was deployed. Bar-v2's equivalent
   rule (above) gets away without the ">.hero" scope only because that
   template never reuses .hero-art outside its own hero. */
.page-template-template-brand-marketing-php .hero > .hero-art{
	position:absolute; top:0; right:0; bottom:0; z-index:0; width:60%;
	aspect-ratio:auto; max-width:none; border-radius:0; border:0; background:none;
}
.page-template-template-brand-marketing-php .hero:after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(90deg, #000 0%, #000 42%, rgba(13,26,31,.15) 65%, rgba(13,26,31,.45) 100%);
}
@media (max-width:900px){
	.page-template-template-brand-marketing-php .hero > div:first-child{ max-width:90%; padding-block:50px; }
	.page-template-template-brand-marketing-php .hero > .hero-art{ width:100%; }
	.page-template-template-brand-marketing-php .hero:after{
		background:linear-gradient(180deg, rgba(13,26,31,.92), rgba(13,26,31,.6) 75%, rgba(13,26,31,.87));
	}
}
.bar-explore{
	padding-left:max(var(--gutter), calc((100% - var(--maxw)) / 2));
	padding-right:max(var(--gutter), calc((100% - var(--maxw)) / 2));
}

@media (max-width:820px){
	.bar-story{ grid-template-columns:1fr; }
	/* Single-column stack here — sticky would mean the rail cards, which
	   now sit below the body text in the stacked order, only start
	   sticking partway down the page instead of behaving predictably. */
	.bar-rail{ position:static; }
	.bar-gallery{ grid-template-columns:repeat(2,1fr); }
}

/* ---- [pexblogposts] shortcode output (News page) ----
   Sizing pulled from the live barmotion.co.uk/news/ (still on Porcelain)
   via computed styles, not guessed: 4:3 thumbnail crop, Open Sans (not
   Oswald) for the title at a thin 100 weight/22px, 13px uppercase
   Open Sans for "Read More". */
.news-grid-title{ font-size:1.5rem; margin:0 0 24px; }
.news-grid{
	display:grid; grid-template-columns:repeat(var(--news-cols,4),1fr);
	column-gap:34px; row-gap:30px;
}
.news-card{ display:flex; flex-direction:column; }
.news-card__thumb{
	display:block; aspect-ratio:4/3; border-radius:0; overflow:hidden;
	background:var(--bg-panel); margin-bottom:0;
}
.news-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.news-card__title{
	font-size:22px; font-weight:100; line-height:1.4; margin:0; padding:20px 0 9px;
}
.news-card__title a{ font-family:'Open Sans',sans-serif; color:var(--ink); text-decoration:none; }
.news-card__title a:hover{ color:var(--accent); }
.news-card__excerpt{ font-size:14px; color:var(--ink-muted); margin:7px 0; }
.news-card__more{
	font-family:'Open Sans',sans-serif; font-size:13px; text-transform:uppercase;
	color:var(--accent); text-decoration:none; display:inline-block; padding-top:12px;
}
.news-card__more:hover{ color:#a8dc55; }

@media (max-width:900px){
	.news-grid{ grid-template-columns:repeat(2,1fr); }
	.nav-menu{ display:none; }
	.nav-menu.is-open{
		display:flex; flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0;
		background:var(--bg-panel); border-bottom:1px solid var(--rule); padding:8px 5% 16px; z-index:30;
	}
	.nav-menu.is-open li{ padding:10px 0; border-bottom:1px solid var(--rule); }
	.nav-menu.is-open li:last-child{ border-bottom:0; }
	.nav-toggle{ display:block; }

	/* No hover on touch — the submenu here is a plain toggled panel in
	   normal flow (nav.js adds/removes .is-open on tap) instead of the
	   absolutely-positioned hover panel used on desktop. */
	.nav-menu.is-open .sub-menu{
		position:static; opacity:1; visibility:visible; transform:none; margin-top:0;
		display:none; background:none; border:0; box-shadow:none; padding:4px 0 0 16px;
	}
	.nav-menu.is-open li.menu-item-has-children.is-open > .sub-menu{ display:block; }
	.nav-menu.is-open .sub-menu li{ border-bottom:0; padding:8px 0; }
	.hero{ grid-template-columns:1fr; }
	.hero-art{ order:-1; max-width:340px; margin:0 auto; }
	.work-grid{ grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,110px); }
	.work-grid .cell:nth-child(6){ grid-column:span 1; }
	.bar-gallery--slots{ grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,110px); }
	.bar-gallery--slots .cell:nth-child(6){ grid-column:span 1; }
	.event-cards{ grid-template-columns:repeat(2,1fr); }
	.contact{ grid-template-columns:1fr; }
	.rating-badge{ display:none; }
}

/* ---- Featured Bar Page template (template-featured-bar.php) ----
   Sections used so far only by Specialty Coffee — see
   barmotion_featured_bar_pages() in functions.php for how a second bar
   would opt in to the same layout. Photos throughout come from the
   per-page Customizer slots (barmotion_featured_bar_image()), not from
   post content, so nothing here assumes an <img> could be missing —
   the PHP already skips the tag entirely when a slot has no photo. */

/* "Specialty Coffee, Professionally Crafted" — 50/50 editorial split.
   Full-bleed panel band, same idea as Built for Events / Managed
   Process — this section always carries both .editorial and .wrap in
   the template, so the second rule below (higher specificity, two
   classes) overrides just the properties needed to go edge-to-edge:
   .wrap's max-width, and its own padding-left/right, replaced with the
   same padding-math .bar-explore uses so the grid columns still line up
   at the normal boxed width while the background spans the viewport. */
.editorial{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:clamp(56px,7vw,84px) var(--gutter); }
.editorial.wrap{
	background:var(--bg-panel); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
	max-width:none;
	padding-left:max(var(--gutter), calc((100% - var(--maxw)) / 2));
	padding-right:max(var(--gutter), calc((100% - var(--maxw)) / 2));
}
.editorial__photo{ aspect-ratio:1/1; border-radius:4px; overflow:hidden; background:var(--bg-panel); }
.editorial__photo img{ width:100%; height:100%; object-fit:cover; }
.editorial__copy h2{ margin-bottom:.6em; }
/* Matches .statement h2 b's accent-green treatment (this file, above) —
   .editorial__copy h2 never had its own <b> colour, so every editorial
   section's bold closing phrase (this one included) was rendering in
   plain ink instead of the site's usual "last phrase highlighted" look. */
.editorial__copy h2 b{ color:var(--accent); }
.editorial__copy p{ margin:0 0 16px; }

/* [ver2 Editorial only] .editorial--photo-lg — same photo-left/copy-
   right order as the shared .editorial rule above (Case Study, both
   templates' own Editorial section), but the photo's column is twice
   the copy column's width instead of an even split, so the photo
   itself renders roughly twice as big. Doesn't touch the base
   .editorial/.editorial__photo rules — everything else keeps the
   equal-width layout. (Previously .editorial--reversed put the copy
   on the left with a small photo + CTA card sidebar on the right —
   dropped in favour of this; see git history if that's wanted back.) */
/* Fixed 500px photo column (was 300px, then 600px) — copy takes the rest. */
.editorial--photo-lg{ grid-template-columns:500px 1fr; }
/* Thin divider rule directly above this section's own heading — same
   idea as the generic bar pages' .page-hero border, just placed on
   the heading itself rather than the whole copy column, since the
   lead-in paragraphs (.editorial__intro) sit above the heading here
   and shouldn't have a rule cutting across them too. */
.editorial--photo-lg .editorial__copy h2{ border-top:1px solid var(--rule); padding-top:24px; margin-top:8px; }
/* Drop cap on the first lead-in paragraph — same treatment as the
   generic bar pages' .bar-story__body p:first-of-type::first-letter
   (large, Oswald, accent green). Scoped to .editorial__intro
   specifically (not p:first-of-type) since .editorial__copy's actual
   first-of-type <p> is this one anyway, but naming it directly makes
   the intent explicit and keeps this rule from picking up the
   section's own body paragraphs if the lead-in ever isn't there. */
.editorial--photo-lg .editorial__copy p.editorial__intro:first-of-type::first-letter{
	font-family:'Oswald',sans-serif; float:left; font-size:3.4em; line-height:.8;
	padding:.06em .07em 0 0; color:var(--accent); font-weight:700;
}
@media (max-width:760px){
	.editorial--photo-lg{ grid-template-columns:1fr; }
}
/* No photo, copy column only — e.g. Sustainability's "How We Operate"
   section, which dropped its photo in favour of a full-width icon row. */
.editorial--copy-only{ grid-template-columns:1fr; }
/* Plain emphasised text, no box — the green border-left + tinted
   background read as a "quote box" when every section already has
   plenty of its own visual weight; the bold Oswald treatment alone is
   enough to make this line stand out. */
.pullquote{
	margin-top:28px !important; padding:0; border-left:0;
	background:none; color:var(--ink); font-family:'Oswald',sans-serif;
	font-weight:500; font-size:1.05rem; font-style:normal;
}

/* Event-purpose cards reuse .event-card (style.css already has the
   photo+gradient+label mechanics from the homepage) — this just adds
   room for the second, smaller caption line under the bold label. */
.event-card span{ display:flex; flex-direction:column; gap:6px; }
.event-card small{ font-family:'Open Sans',sans-serif; font-weight:400; text-transform:none; font-size:.8rem; color:var(--ink-muted); }

/* Full-width photo statement break ("Good Coffee Gets People Talking.") */
.visual-break{
	background-size:cover; background-position:center; position:relative;
	padding:clamp(40px,6vw,72px) var(--gutter); display:flex; align-items:center; justify-content:center; text-align:center;
}
.visual-break::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,26,31,.35), rgba(13,26,31,.75)); }
.visual-break h2{
	position:relative; z-index:1; max-width:24ch; font-size:clamp(1.4rem,3.6vw,2.4rem); font-weight:300; color:var(--ink);
	/* Hard cap at 2 lines regardless of how long a future heading runs —
	   24ch already fits every current bar's Visual Break line on 1-2
	   lines on its own; this is just the safety net if that ever changes. */
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}

/* "Put Your Brand in Their Hand" — large photo + copy, detail thumbs row,
   branding-options list underneath. */
.brand-gallery{
	display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:auto auto; gap:40px 56px;
	padding:clamp(56px,7vw,84px) var(--gutter);
}
.brand-gallery__main{ aspect-ratio:4/3; border-radius:4px; overflow:hidden; background:var(--bg-panel); }
.brand-gallery__main img{ width:100%; height:100%; object-fit:cover; }
/* [ver2 Coffee only] .brand-gallery__main--card — the same "Make it
   yours" card page.php's .bar-rail__card--photo uses, wrapped around
   this section's own main photo instead of the plain aspect-ratio box
   above (which every other bar's Branding Gallery still uses
   unmodified). aspect-ratio moves down onto .brand-gallery__main-photo
   so the photo itself keeps the same 4:3 shape/proportions as before —
   the card adds a border/background/padding/heading/button around it,
   not a resize. */
.brand-gallery__main--card{
	aspect-ratio:auto; display:flex; flex-direction:column; align-self:start;
	background:var(--bg-panel-2); border:1px solid var(--rule); border-radius:4px; padding:22px;
}
.brand-gallery__main--card h3{ font-family:'Oswald',sans-serif; color:var(--ink); text-transform:uppercase; font-size:15px; margin:0 0 10px; }
.brand-gallery__main--card p{ font-size:14px; margin:0 0 14px; color:var(--ink-muted); }
.brand-gallery__main-photo{ aspect-ratio:4/3; border-radius:4px; overflow:hidden; margin-bottom:18px; background:var(--bg-panel); }
.brand-gallery__main-photo img,
.brand-gallery__main-photo video{ width:100%; height:100%; object-fit:cover; display:block; }
.brand-gallery__main--card .btn{ width:100%; justify-content:center; }
.brand-gallery__copy h2{ margin-bottom:.6em; }
.brand-gallery__copy p{ margin:0 0 16px; }
.brand-gallery__details{ grid-column:1; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.brand-gallery__detail{ aspect-ratio:1/1; border-radius:4px; overflow:hidden; background:var(--bg-panel); }
.brand-gallery__detail img{ width:100%; height:100%; object-fit:cover; }
.brand-gallery__list{ grid-column:2; grid-row:2; }
.brand-gallery__list h3{ font-family:'Oswald',sans-serif; color:var(--ink); text-transform:uppercase; font-size:15px; margin:0 0 14px; }
/* [ver2 Coffee only] full section width (both columns, effectively the
   whole --maxw content area) instead of the shared rule's column-2-
   only slot — the feature-boxes--proof grid reads better spanning the
   full width than squeezed into half of it. */
.page-template-template-bar-v2-php .brand-gallery__list{ grid-column:1 / -1; grid-row:2; }
/* [ver2 Coffee only] new square photo — lives inside .brand-gallery__copy
   now (right after the text), not as its own grid item, so it just sits
   in normal flow directly under the copy. */
.brand-gallery__copy-photo{
	aspect-ratio:1/1; max-width:400px; margin:24px auto 0;
	border-radius:4px; overflow:hidden;
}
.brand-gallery__copy-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* "Make It Yours" (Smoothie) — under the branding-detail photos (column 1,
   its own row) rather than .brand-gallery__list's usual column-2/row-2
   slot beside the copy text. Scoped to #smoothie-branding rather than
   changing the shared .brand-gallery__list rule, which Coffee/Blender
   Bike/Raw Juice/Matcha still use in its original position. */
#smoothie-branding .brand-gallery__list{ grid-column:1; grid-row:3; }
/* Items as individual bordered cards instead of the pill-shaped
   .brand-list used elsewhere. auto-fit rather than a fixed column count
   since this sits in the narrower column-1 width, not full section
   width. */
.feature-boxes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; }
.feature-boxes__item{
	background:var(--bg-panel); border:1px solid var(--rule); border-radius:4px;
	padding:18px 14px; text-align:center; color:var(--ink);
	font-family:'Oswald',sans-serif; font-size:.8rem; letter-spacing:.02em; text-transform:uppercase;
}
/* A chip can also be a real link (e.g. Conference page's service list,
   linking through to that service's own page) — keep the same ink
   colour instead of the sitewide accent-green link colour, and pick up
   the accent only on hover, matching how a plain chip visually settles. */
a.feature-boxes__item{ text-decoration:none; transition:border-color .15s ease, color .15s ease; }
a.feature-boxes__item:hover{ color:var(--accent); border-color:var(--accent); }
/* [ver2 only] .feature-boxes--proof — each box now framed individually
   (see .feature-boxes__item override below), so this just spaces them
   out rather than doing the seamless shared-background/gap trick. */
.feature-boxes--proof{
	grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; background:transparent;
	border:0; border-radius:0; overflow:visible;
}
/* [ver2 Coffee only] each proof box styled like .pullquote — accent
   left border + accent-soft fill + the same Oswald treatment — instead
   of the base rule's plain centred/uppercase look. Grey frame (1px
   --rule border) all round, on top of the accent left edge. */
.feature-boxes--proof .feature-boxes__item{
	background:var(--accent-soft); border:1px solid var(--rule); border-left:3px solid var(--accent); border-radius:4px;
	color:var(--ink); font-family:'Oswald',sans-serif; font-weight:500; font-size:1.05rem; font-style:normal;
	text-transform:none; letter-spacing:normal; text-align:left;
}

/* "Built for Events" — dark contrasting band, same treatment as
   .statement, holding 4 short proof points instead of a stat number. */
.built-for{ background:var(--bg-panel); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:clamp(56px,7vw,84px) 0; }
.faq-list{ padding-top:clamp(56px,7vw,84px); padding-bottom:clamp(56px,7vw,84px); }
.built-for h2{ margin-bottom:.5em; }
.built-for > .wrap > p{ max-width:70ch; margin:0 0 32px; }
/* [ver2 only] two-column text row above the proof grid — this
   section's own heading/paragraphs on the left, [Managed Process]'s
   heading/list/paragraph/link reused on the right (see
   template-bar-v2.php). Both columns left-aligned; .built-for > .wrap
   > p above doesn't reach paragraphs in here (they're a level deeper
   now), so margin-bottom is set directly on the row instead to keep
   the same spacing before the proof grid that used to come from that
   rule's own margin. */
.built-for__cols{
	display:grid; grid-template-columns:1fr 1fr; gap:56px; text-align:left; margin-bottom:32px;
}
.built-for__col p{ max-width:60ch; margin:0 0 16px; }
/* [ver2 Coffee only] left/right proof-grid rows lined up with each
   other regardless of how much heading/paragraph/process-row content
   sits above them in each column — flex column + margin-top:auto on
   the proof-grid pins it to the bottom of its own column, and since
   both columns share one grid row (built-for__cols stretches them to
   equal height by default), that bottom edge is the same on both
   sides. */
.built-for__col{ display:flex; flex-direction:column; }
/* The Managed Process link is a flex item now too — without this it
   stretches to the column's full width (flex's default align-items:
   stretch), instead of staying its own natural button size like it was
   before built-for__col became a flex column. */
.built-for__col > a.btn{ align-self:flex-start; }
/* [ver2 Coffee only] thin divider between the Managed Process content
   (right column) and its proof boxes below, same 1px --rule weight
   used for dividers elsewhere on the site (e.g. .editorial__copy h2's
   border-top). margin-top:auto (not the proof-grid's own, see below)
   is what actually gets pushed to sit right above the boxes — the
   proof-grid then just trails it with a small fixed gap, so the line
   stays directly adjacent to the boxes rather than splitting the
   leftover space between the two. */
.built-for__col-rule{ border:0; border-top:1px solid var(--rule); margin:auto 0 0; }
.built-for__col-rule + .proof-grid{ margin-top:24px; }
@media (max-width:760px){ .built-for__cols{ grid-template-columns:1fr; } }
.proof-grid{
	display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule);
	border:1px solid var(--rule); border-radius:4px; overflow:hidden;
}
.proof{ background:var(--bg); padding:22px 20px; }
/* [ver2 Coffee only] the 3 hardcoded boxes at the bottom of built-for__col
   sit in a half-width column, not the full section width the shared
   .proof-grid rule above is sized for — 3 across, smaller type/padding
   than the shared rule so the text still fits (wraps to its own
   multiple lines rather than forcing the column wider). */
.built-for__col .proof-grid{ grid-template-columns:repeat(3,1fr); margin-top:auto; }
.built-for__col .proof{ padding:14px 12px; min-height:160px; }
.built-for__col .proof h3{ font-size:.72rem; margin:0 0 5px; }
.built-for__col .proof p{ font-size:.7rem; line-height:1.38; }
.proof h3{ font-family:'Oswald',sans-serif; color:var(--ink); text-transform:uppercase; font-size:.92rem; margin:0 0 6px; }
.proof p{ font-size:.85rem; margin:0; }

/* "Coffee Can Be Just the Beginning" — morning-to-happy-hour timeline. */
.daypart{ padding-top:clamp(56px,7vw,84px); padding-bottom:clamp(56px,7vw,84px); }
/* .section-head is shared with Event Cards and FAQ (heading left-aligned
   there), so scope the centering to Daypart only rather than the bare
   .section-head selector. */
.daypart .section-head{ justify-content:center; text-align:center; }
.daypart-row{ display:flex; align-items:stretch; gap:18px; padding:0 0 28px; }
.daypart-step{
	flex:1; background:var(--bg-panel); border:1px solid var(--rule); border-radius:4px; padding:20px 18px;
}
.daypart-step h3{ font-size:1.05rem; margin:10px 0 8px; }
.daypart-step p{ font-size:.88rem; margin:0; }
.daypart-arrow{ align-self:center; color:var(--accent); font-size:1.3rem; flex:0 0 auto; }
.daypart-close{ text-align:center; max-width:820px; margin:0 auto; color:var(--ink); font-family:'Oswald',sans-serif; font-weight:500; }

/* "Fully Managed, From Start to Finish" — simple process strip. */
/* Same panel shade as every other banded section site-wide (.built-for,
   .bar-explore, .testimonial, .statement, .editorial) — var(--bg-panel-2)
   was tried here first but isn't used as a flat section background
   anywhere else (only hover states/gradient stops), so it read as an
   inconsistent one-off. The Hospitality Timeline strip between this and
   Built for Events is what keeps the two bands from reading as one
   continuous panel, not a different colour. */
.managed{ background:var(--bg-panel); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:clamp(56px,7vw,84px) 0; text-align:center; }
.managed h2{ margin-bottom:24px; }
.process-row{
	display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 14px; margin-bottom:28px;
	font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:.85rem; letter-spacing:.06em; color:var(--ink);
}
.process-row em{ color:var(--accent); font-style:normal; }
.managed p{ max-width:820px; margin:0 auto 28px; }
.managed .btn{ margin:0 auto; }

/* Final CTA with a photo background — same content rules as .bar-closer
   (h2/p/hero-cta/.bar-closer__contact), this modifier just breaks it out
   to full viewport width with a photo + dark overlay instead of the
   plain padded band. Doubled-up class beats the plain .bar-closer
   max-width rule in the width-cap list above on specificity, so this
   works regardless of source order. */
.bar-closer.bar-closer--photo{
	max-width:none; background-size:cover; background-position:center; position:relative;
	padding-left:var(--gutter); padding-right:var(--gutter);
}
.bar-closer.bar-closer--photo::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,26,31,.55), rgba(13,26,31,.88)); }
.bar-closer.bar-closer--photo > *{ position:relative; z-index:1; }

@media (max-width:820px){
	.editorial{ grid-template-columns:1fr; }
	.brand-gallery{ grid-template-columns:1fr; }
	.brand-gallery__details{ grid-column:1; }
	.brand-gallery__list{ grid-column:1; grid-row:auto; }
	.proof-grid{ grid-template-columns:repeat(2,1fr); }
	.daypart-row{ flex-direction:column; }
	.daypart-arrow{ transform:rotate(90deg); align-self:center; }
	.event-cards--six{ grid-template-columns:repeat(3,1fr); }
	.inclusion{ grid-template-columns:1fr; }
}
@media (max-width:520px){
	.brand-gallery__details{ grid-template-columns:repeat(2,1fr); }
	.event-cards--six{ grid-template-columns:repeat(2,1fr); }
}

/* ---- Bar Page template (template-smoothie-bar.php) ----
   Alternating black/grey section backgrounds, computed in PHP rather
   than guessed at in CSS — every bar has a different combination of
   sections in a different order, so a fixed chain of adjacent-sibling
   selectors (the original approach, back when only Smoothie used this
   template) can't generalise: e.g. Blender Bike has three .events-shaped
   sections in a row before its first Visual Break, which a rule like
   ".events + .events" only alternates correctly for a chain of two.
   Instead, the template increments a counter as each section actually
   renders and adds .band-black/.band-grey directly — see $next_band()
   in template-smoothie-bar.php. Visual Break and Inclusion Note don't
   participate (skipped, not counted): Visual Break is its own full-bleed
   photo, and Inclusion Note is deliberately a compact aside rather than
   a full section.
   !important because these need to win over whichever base class
   (.managed, .built-for, .editorial.wrap, .bar-explore, ...) happens to
   already set its own background/border — those bare classes aren't
   used anywhere outside this template except .bar-explore, which
   page.php/template-service.php's generic bar pages also rely on for
   their own always-grey band, so its default has to stay untouched
   there too. */
.band-black{ background:var(--bg) !important; border-top:0 !important; border-bottom:0 !important; }
.band-grey{ background:var(--bg-panel) !important; border-top:1px solid var(--rule) !important; border-bottom:1px solid var(--rule) !important; }
/* De-boxes a section that's normally .wrap-constrained (Editorial,
   Branding Gallery, Hospitality Timeline, FAQ) so a grey band actually
   reads as full-bleed instead of a centered grey rectangle. Applied
   unconditionally (regardless of which color a section lands on) since
   it's harmless for black — matching the page's own background never
   needs to visibly extend edge-to-edge in the first place. Sections
   with their own inner .wrap div for centering (Managed, Explore the
   Other Bars) must NOT get this — it would double up their padding. */
.band-debox{
	max-width:none !important; margin-left:0 !important; margin-right:0 !important;
	padding-left:max(var(--gutter), calc((100% - var(--maxw)) / 2)) !important;
	padding-right:max(var(--gutter), calc((100% - var(--maxw)) / 2)) !important;
}

/* .events normally has padding-top:0 (it's meant to sit flush under
   whatever came before it in most other contexts) — every other section
   on this page has equal top/bottom padding, so match that here too. */
.page-template-template-smoothie-bar-php .events{ padding-top:clamp(56px,7vw,84px); }

/* Smaller padding throughout — same clamp() shape, just a lower range,
   applied to every section's top+bottom padding on this page (.events
   above included, since it shares the rule this overrides). */
.page-template-template-smoothie-bar-php .events,
.page-template-template-smoothie-bar-php .editorial,
.page-template-template-smoothie-bar-php .brand-gallery,
.page-template-template-smoothie-bar-php .daypart,
.page-template-template-smoothie-bar-php .managed,
.page-template-template-smoothie-bar-php .bar-explore{ padding-top:22px; padding-bottom:22px; }
.page-template-template-smoothie-bar-php .visual-break{ padding-top:clamp(18px,2.5vw,28px); padding-bottom:clamp(18px,2.5vw,28px); }

/* ---- Blender Bike Page template (template-blender-bike.php) ----
   New components this page needed that Coffee/Smoothie didn't. */

/* "Jump On. Start Pedalling." — 3-step Choose/Pedal/Enjoy row. Deliberately
   plain (per the brief: "keep text minimal") — no photos, just a big
   number and two lines, unlike the photo-led cards elsewhere. */
.steps-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:0 var(--gutter) 8px; }
.step{ text-align:center; padding:28px 20px; background:var(--bg-panel); border:1px solid var(--rule); border-radius:4px; }
.step__n{
	display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0 auto 14px;
	border-radius:50%; background:var(--accent-soft); color:var(--accent);
	font-family:'Oswald',sans-serif; font-weight:700; font-size:1.2rem;
}
.step h3{ font-size:1.05rem; margin:0 0 6px; }
.step p{ font-size:.88rem; margin:0; }
@media (max-width:820px){ .steps-row{ grid-template-columns:1fr; } }

/* "Smoothies Are Just the Start" — the same .event-cards mechanics as a
   4-card row, just six across (a 6-column .events section covers more
   drink categories than smoothies alone). Portrait 3/4 cards get very
   narrow at six-across, so this drops the aspect-ratio for a shorter,
   wider tile instead — better proportions at this column count. */
.event-cards--six{ grid-template-columns:repeat(6,1fr); }
.event-cards--six .event-card{ aspect-ratio:3/4; }
@media (min-width:821px){ .event-cards--six .event-card{ aspect-ratio:1/1; } }

/* "What's Going In?" (Raw Juice) — same idea, five across instead of six
   (a separate modifier rather than reusing --six with an empty trailing
   cell). */
.event-cards--five{ grid-template-columns:repeat(5,1fr); }
.event-cards--five .event-card{ aspect-ratio:3/4; }
@media (min-width:821px){ .event-cards--five .event-card{ aspect-ratio:1/1; } }
@media (max-width:820px){ .event-cards--five{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .event-cards--five{ grid-template-columns:repeat(2,1fr); } }

/* "Your Smoothie Menu, Your Way" carousel — square tiles (rather than the
   plain 4-across grid's portrait default) at the section's full width.
   A separate modifier from .event-cards--carousel itself (which only
   drives the rotation, see js/event-card-carousel.js) since "Refreshment
   That Works for any Event" also rotates but keeps the regular portrait
   cards — so the square treatment needs its own opt-in rather than
   living on the bare carousel class. */
.event-cards--carousel.event-cards--square .event-card{ aspect-ratio:1/1; }

/* "Everyone Can Get Involved" — a compact photo + copy note, deliberately
   smaller than the full .editorial treatment (per the brief: "small
   image + copy rather than full section"). Narrower image column, no
   pullquote, tighter padding. */
.inclusion{ display:grid; grid-template-columns:.6fr 1fr; gap:32px; align-items:center; padding:clamp(32px,5vw,48px) var(--gutter); }
.inclusion__photo{ aspect-ratio:1/1; border-radius:4px; overflow:hidden; background:var(--bg-panel); }
.inclusion__photo img{ width:100%; height:100%; object-fit:cover; }
.inclusion__copy h3{ font-size:1.15rem; margin:0 0 10px; }
.inclusion__copy p{ font-size:.92rem; margin:0; }

/* ---- Raw Juice Bar Page template (template-raw-juice-bar.php) ---- */

/* "Colour That Works With Your Brand" — bold Green/Orange/Red/Pink
   swatch row (per the brief), sitting above the normal .brand-gallery
   copy. Solid colour chips, not photos — the point is the colour itself,
   which no single photo could show as cleanly as a flat swatch. */
.colour-row{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 22px; }
.colour-row__swatch{
	flex:1 1 90px; padding:14px 10px; border-radius:4px; text-align:center;
	font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; font-size:.8rem;
	letter-spacing:.04em; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* ---- How It Works page (template-how-it-works.php) ---- */

/* [01] Tell Us — the "incomplete brief" visual: a short list of rows
   (label + value), some genuinely filled in, some still a "???" — the
   point being that a partial answer is still enough to start. */
.brief-form{ border:1px solid var(--rule); border-radius:6px; background:var(--bg-panel); padding:26px 28px; }
.brief-form__row{
	display:flex; align-items:center; justify-content:space-between; gap:16px;
	padding:11px 0; border-bottom:1px solid var(--rule);
	font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:.85rem; letter-spacing:.04em;
}
.brief-form__row:last-of-type{ border-bottom:0; }
.brief-form__row span{ color:var(--ink-muted); }
.brief-form__row strong{ color:var(--accent); font-weight:600; }
.brief-form__note{
	margin:18px 0 0; text-align:center; font-family:'Oswald',sans-serif; text-transform:uppercase;
	font-weight:600; letter-spacing:.06em; color:var(--ink); font-size:.85rem;
}

/* [02] Plan — GUEST NUMBERS + SERVICE TIME + ... = THE RIGHT SETUP, same
   Oswald-chip language as .process-row, just with +/= instead of →. */
.plan-equation{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px;
	margin:28px 0; font-family:'Oswald',sans-serif; text-transform:uppercase;
	font-size:.85rem; letter-spacing:.04em; color:var(--ink);
}
.plan-equation em{ font-style:normal; color:var(--accent); font-size:1.15rem; }
.plan-equation__result{ color:var(--accent); font-weight:700; }

/* [04]/Working With Your Event Team — a plain "Barmotion" chip sitting
   above a row of partner-type chips, rather than a literal connected
   flowchart (deliberately kept simple per the design brief: "just
   enough to communicate coordination", not a complicated diagram). */
.hub-diagram{ text-align:center; }
.hub-diagram__center{
	display:inline-block; font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:700;
	letter-spacing:.06em; font-size:1rem; color:var(--bg); background:var(--accent);
	padding:10px 26px; border-radius:999px;
}

.how-it-works__tagline{
	text-align:center; font-family:'Oswald',sans-serif; text-transform:uppercase;
	letter-spacing:.08em; font-size:.8rem; color:var(--ink-muted); margin:18px 0 0;
}

/* [02] Plan — visual-column card for the plan-equation + feature-boxes
   pairing, so this section reads as a genuine split (like .brief-form
   does for [01]) rather than a floating equation with nothing framing
   it. Same panel look as .brief-form, generic name since it isn't
   form-shaped content. */
.plan-visual{ border:1px solid var(--rule); border-radius:6px; background:var(--bg-panel); padding:26px 28px; }
.plan-visual .plan-equation{ margin:20px 0 0; }
.plan-visual .feature-boxes{ margin:0; }

/* [05–07] Set Up / Serve / Break Down — one triptych instead of three
   separate photo sections, per the brief ("three strong event images
   ... rather than three large text-heavy blocks"). Each item reuses the
   .hero-art gradient-placeholder look when its Customizer photo is
   still empty, exactly like every other photo slot on the site. */
.triptych{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; }
.triptych__item .hero-art{ aspect-ratio:3/4; }
.triptych__cap{
	margin-top:14px; text-align:center; font-family:'Oswald',sans-serif; text-transform:uppercase;
	letter-spacing:.06em; font-size:.82rem; color:var(--ink);
}
.triptych__cap b{ display:block; color:var(--accent); font-size:.72rem; letter-spacing:.14em; margin-bottom:4px; }
@media (max-width:760px){ .triptych{ grid-template-columns:1fr; } }
/* Two-up variant (Conference) — was an inline grid-template-columns, which beats the phone rule above. */
.triptych--pair{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:760px){ .triptych--pair{ grid-template-columns:minmax(0,1fr); } }

/* Closing "From Brief to Bar" recap — same .process-row component, just
   larger and roomier for a full-width dark statement near the page end. */
.process-row--lg{ font-size:1.1rem; gap:14px 20px; margin-bottom:0; }

/* Scroll-reveal utility (see js/how-it-works-reveal.js) — content stays
   fully visible without JS or with prefers-reduced-motion; the hidden
   starting state only exists once motion is allowed. Shared with the
   Sustainability page below. */
.reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference){
	.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
	.reveal.is-visible{ opacity:1; transform:none; }
}

/* ---- Sustainability page (template-sustainability.php) ---- */

/* [How We Operate] four operational pillars — small line-art icon,
   label, heading and short paragraph, divided by a thin rule. Sits
   inside .editorial__copy (roughly half the page width), so the
   auto-fit grid below naturally settles into 2x2 rather than a single
   row of 4. */
.spec-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px 0; margin-top:32px; text-align:left; }
/* Vertical dividers between the four pillars (no horizontal rules). */
.spec-item{ padding:0 24px; border-left:1px solid var(--rule); }
.spec-item:first-child{ padding-left:0; border-left:0; }
@media (max-width:900px){
	.spec-grid{ grid-template-columns:repeat(2,1fr); }
	.spec-item:nth-child(odd){ padding-left:0; border-left:0; }
}
@media (max-width:560px){
	.spec-grid{ grid-template-columns:1fr; }
	.spec-item{ padding:0; border-left:0; }
}
.spec-item svg{ width:40px; height:40px; fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; margin-bottom:12px; }
.spec-item .eyebrow{ margin-bottom:8px; }
.spec-item h3{ font-size:1rem; margin:0 0 8px; }
.spec-item p{ margin:0; font-size:.92rem; }

/* [Branding With Purpose] two related photos side by side (branded cup +
   branded bar panel) — same idea as .triptych, just a pair instead of
   three. */
.duo{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:28px 0; }
.duo__item .hero-art{ aspect-ratio:1/1; }
.duo__cap{
	margin-top:12px; text-align:center; font-family:'Oswald',sans-serif; text-transform:uppercase;
	letter-spacing:.06em; font-size:.8rem; color:var(--ink-muted);
}
@media (max-width:560px){ .duo{ grid-template-columns:1fr; } }

/* [Responsible Choices, From Bar to Cup] two text columns (venue waste +
   branding) sharing one .editorial__copy column, next to the section's
   own photo. */
/* align-items:start — grid's default stretch was inflating the shorter
   (waste) column's own box down to match the longer (branding) column,
   so .editorial__copy read taller in the box model than either column's
   actual text, even though nothing was visibly cut off. */
/* One merged block of text running the full width of the section, as a single column (it used to be two separate column boxes). */
.sus-cols{ margin-top:20px; }
.sus-cols > p:last-child{ margin-bottom:0; }

/* [Reduce. Reuse. Redistribute.] 40/60 split — image left, copy right
   (DOM already has the photo first). */
.sus-reduce{ grid-template-columns:minmax(0,2fr) minmax(0,3fr); align-items:stretch; }
.sus-reduce .editorial__copy > p:last-child{ margin-bottom:0; }
/* min-height:0 alone wasn't enough — it only drops the item's automatic
   MINIMUM size, not its max-content contribution, and an "auto" grid
   row sizes to each item's max-content by default. A replaced element
   with no explicit height still contributes its intrinsic aspect ratio
   (at the column's resolved width) as that max-content height, so the
   row — and the text column stretched to match it — kept coming out as
   tall as the photo's own shape wanted to be, not as tall as the text.
   Taking the <img> out of flow (absolute, 0 intrinsic size) removes
   that contribution entirely: the row is then sized by the text alone,
   and the photo (align-self:stretch) fills whatever that turns out to
   be. Same fix as .bar3-editorial__photo--fill on the bar-v3 template. */
.sus-reduce .editorial__photo{ aspect-ratio:auto; position:relative; }
.sus-reduce .editorial__photo img,
.sus-reduce .editorial__photo .photo-placeholder{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:760px){ .sus-reduce{ grid-template-columns:1fr; } }

/* [Responsible Choices, From Bar to Cup] 70/30 split — copy left,
   image right (DOM already has the copy first). Pullquote pulled up
   close to the two text columns above it (base .pullquote's 28px
   margin-top is too loose here), and the photo stretched to the
   copy column's full height instead of the shared .editorial square
   crop, since copy length varies a lot more in this section. */
.sus-bartocup{ grid-template-columns:minmax(0,3fr) minmax(0,2fr); align-items:stretch; }
.sus-bartocup .pullquote{ margin-top:10px !important; }
/* Same out-of-flow-img fix as .sus-reduce above — see that comment. */
.sus-bartocup .editorial__photo{ aspect-ratio:auto; position:relative; }
.sus-bartocup .editorial__photo img,
.sus-bartocup .editorial__photo .photo-placeholder{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:760px){ .sus-bartocup{ grid-template-columns:1fr; } }

/* [Specific Requirements + Ongoing Improvement] back to the 4fr/3fr/4fr
   3-way split this row originally had — same .wrap/.band-debox
   full-bleed-background pattern as .editorial. (Responsible Purchasing
   used to take the left slot; it's now its own .purchasing section
   below, and the "specific requirements?" CTA takes this slot instead.) */
.sus-lower{ display:grid; grid-template-columns:4fr 3fr 4fr; gap:48px; align-items:start; padding:clamp(56px,7vw,84px) var(--gutter); }
.sus-lower__requirements{ display:flex; flex-direction:column; justify-content:center; }
.sus-lower__requirements .hero-cta{ margin-top:24px; }
/* No fixed aspect-ratio — matches the two article columns' own height
   (whichever is taller) instead of a ratio that drifts from it as the
   column width (and therefore a ratio-based height) changes. Image
   taken out of flow (same fix as .sus-reduce/.sus-bartocup above) so
   its own intrinsic aspect ratio can't inflate the row past what the
   two articles actually need. */
.sus-lower__media{ aspect-ratio:auto; align-self:stretch; }
.sus-lower__media img,
.sus-lower__media .photo-placeholder{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sus-lower__article h2{ margin-bottom:.6em; }
.sus-lower__article h2 b{ color:var(--accent); }
.sus-lower__article h3{ font-size:1rem; margin:0 0 10px; }
/* Same checkmark-bullet treatment as .entry-content ul.bullet_star
   (dynamic page content's plain-list style) — reused here since this
   list is hardcoded in the template rather than coming through the
   page-content parser. */
.sus-lower__list{ list-style:none; padding:0; margin:0 0 16px; display:grid; gap:10px; }
.sus-lower__list li{ position:relative; padding-left:26px; margin-bottom:0; }
.sus-lower__list li::before{
	/* the green logo chevron used on the bar pages' tick lists, instead of a tick */
	content:''; position:absolute; left:0; top:.42em; width:14px; height:14px;
	background-color:var(--accent);
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='3,2 11,2 21,12 11,22 3,22 13,12'/%3E%3C/svg%3E") no-repeat center/contain;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='3,2 11,2 21,12 11,22 3,22 13,12'/%3E%3C/svg%3E") no-repeat center/contain;
}
.sus-rule{ border:0; border-top:1px solid var(--rule); margin:26px 0; }
@media (max-width:900px){ .sus-lower{ grid-template-columns:1fr 1fr; } .sus-lower__media{ grid-column:1/-1; aspect-ratio:16/9; } }
@media (max-width:560px){ .sus-lower{ grid-template-columns:1fr; } }

/* [Responsible Purchasing] 50/50 split — values/approach left,
   purchasing considerations + checklist right. */
.purchasing__grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.purchasing__col h2{ margin-bottom:.6em; }
.purchasing__col h2 b{ color:var(--accent); }
.purchasing__col p{ margin:0 0 16px; }
.purchasing__col p:last-child{ margin-bottom:0; }
@media (max-width:800px){ .purchasing__grid{ grid-template-columns:1fr; gap:24px; } }

/* ---- Brand & Marketing page (template-brand-marketing.php) ---- */

/* Flexible N-up photo panel grid — "Hospitality With a Job to Do" and
   "Give People a Reason to Stop" both need several large photographic
   panels with a short label, unlike .triptych's fixed 3 or .duo's fixed
   2. Reuses .hero-art for the photo itself, same gradient-placeholder
   fallback as every other photo slot on the site. */
.photo-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; margin-top:32px; }
.photo-grid__cap{ margin-top:16px; text-align:left; }
.photo-grid__num{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.photo-grid__num span{ font-family:'Oswald',sans-serif; font-size:15.37px; font-weight:600; color:var(--accent); }
.photo-grid__num:after{ content:""; width:30%; height:1px; background:linear-gradient(90deg,var(--accent),transparent); }
.photo-grid__cap h3{
	font-size:1.05rem; text-transform:uppercase; letter-spacing:.02em; color:var(--ink);
	font-weight:300; margin-bottom:8px; line-height:.9;
}
.photo-grid__cap p{
	font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.03em;
	font-weight:400; color:var(--ink-muted); font-size:.78rem; line-height:1.38; margin:0;
}

/* "Start With What You Want to Achieve" — a 5-step outcome funnel, CTA
   and handwritten closing line, matching the approved reference image.
   Bespoke component (not reusing .daypart/.editorial, both already used
   elsewhere on this page for a different shape). */
.impact-flow{ padding-bottom:12px; }
/* Nested inside .wrap now (merged into the "Hospitality With a Job to
   Do." wrap so both share one band), so ver2-hero-rule's own margin:0 5%
   — sized for sitting directly under <body>, outside any .wrap — would
   inset it past .wrap's own 5% padding and narrow it further than the
   content above/below it. Reset to full width of the wrap instead. */
.page-template-template-brand-marketing-php .wrap .ver2-hero-rule{ margin:24px 0 12px; }
/* "Hospitality With a Job to Do" photo cards — same look as the Our Bars cards: the title sits on the photo over a
   dark gradient; the one-line description is revealed on hover / focus while the photo zooms in. Touch screens
   (no hover) keep the description visible. */
.page-template-template-brand-marketing-php .photo-grid__item{ position:relative; overflow:hidden; }
.page-template-template-brand-marketing-php .photo-grid__item::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg,rgba(13,26,31,.82) 0%,rgba(13,26,31,.4) 24%,transparent 48%); transition:background .3s ease; }
.page-template-template-brand-marketing-php .photo-grid__item > .hero-art img{ transition:transform .5s ease; }
.page-template-template-brand-marketing-php .photo-grid__item:hover > .hero-art img, .page-template-template-brand-marketing-php .photo-grid__item:focus-within > .hero-art img{ transform:scale(1.12); }
.page-template-template-brand-marketing-php .photo-grid__item > .photo-grid__cap{ position:absolute; left:0; right:0; bottom:0; z-index:1; margin:0; padding:16px 18px; }
.page-template-template-brand-marketing-php .photo-grid__item > .photo-grid__cap h3{ margin:0; font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; font-size:1.02rem; line-height:1.2; color:var(--ink); }
.page-template-template-brand-marketing-php .photo-grid__item > .photo-grid__cap p{ margin:0; max-height:0; opacity:0; overflow:hidden; font-family:inherit; text-transform:none; letter-spacing:0; font-size:.82rem; line-height:1.45; color:var(--ink-muted); transition:max-height .35s ease, opacity .25s ease, margin-top .35s ease; }
.page-template-template-brand-marketing-php .photo-grid__item:hover > .photo-grid__cap p, .page-template-template-brand-marketing-php .photo-grid__item:focus-within > .photo-grid__cap p{ max-height:8em; opacity:1; margin-top:6px; }
.page-template-template-brand-marketing-php .photo-grid__item:hover::after, .page-template-template-brand-marketing-php .photo-grid__item:focus-within::after{ background:linear-gradient(0deg,rgba(13,26,31,.88) 0%,rgba(13,26,31,.55) 38%,transparent 65%); }
@media (hover:none){ .page-template-template-brand-marketing-php .photo-grid__item > .photo-grid__cap p{ max-height:none; opacity:1; margin-top:6px; } }
.impact-flow h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:20px; }
.impact-flow h2 b{ color:var(--accent); }
/* Five-column icon grid, a vertical rule between each column (not
   after the last) instead of the funnel's arrows. */
.impact-flow__row{ display:grid; grid-template-columns:repeat(5,1fr); }
.impact-flow__row > div{
	display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
	padding:0 24px; border-right:1px solid var(--rule);
}
.impact-flow__row > div:first-child{ padding-left:0; }
.impact-flow__row > div:last-child{ padding-right:0; border-right:0; }
.impact-flow__row img{
	width:68px; height:68px; object-fit:contain;
}
.impact-flow__row strong{
	font-family:'Oswald',sans-serif; font-size:.92rem; text-transform:uppercase; letter-spacing:.02em; color:var(--ink); font-weight:700;
}
.impact-flow__row span{
	font-family:'Open Sans',sans-serif; font-size:.82rem; text-transform:none; letter-spacing:normal; color:var(--ink-muted); font-weight:400; line-height:1.38;
}
/* Heading on the left, the "You don't need to know which bar you want…" line on the right of it (Oswald caps, wraps to fit), no button. */
.impact-flow__head{ display:flex; align-items:center; justify-content:space-between; gap:48px; margin-bottom:20px; }
.impact-flow__head h2{ margin:0; flex:0 0 auto; }
.impact-flow__head p{
	font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:17.6px; line-height:1.38;
	color:var(--ink); margin:0; flex:0 1 560px; max-width:560px;
}
@media(max-width:900px){
	.impact-flow__row{ grid-template-columns:1fr 1fr; }
	.impact-flow__row > div{ border-right:0; border-bottom:1px solid var(--rule); padding:16px 0; }
	.impact-flow__row > div:first-child{ padding-left:0; }
}
@media(max-width:560px){ .impact-flow__row{ grid-template-columns:1fr; } }
@media(max-width:900px){
	.impact-flow__head{ flex-direction:column; align-items:flex-start; gap:12px; }
	.impact-flow__head p{ flex:0 1 auto; max-width:none; }
}

/* ---- One Campaign. More Than One Serve. — the .daypart.bar3-daypart
   component reused from the Specialty Coffee (bar-v3) page, same as the
   Brand Activations page's own reuse of it. The shared .daypart-step/
   .daypart-row/.daypart-arrow rules above apply automatically since
   they aren't page-scoped; only the bar-v3-specific refinements
   (photo-filled cards, left-aligned section head, the note column) are
   page-scoped there, so they're mirrored here too, plus this page's
   accent-bold heading treatment (bar-v3's own heading has no bold
   portion). bar-v3's captions are one short word/phrase per line —
   aspect-ratio on the photo itself (not the whole card) so this page's
   longer captions ("Through the Day", "Bubble Tea + Ice Cream +
   Popcorn") don't squeeze the photo to nothing. */
.page-template-template-brand-marketing-php .daypart .section-head h2{ font-weight:300; color:var(--ink); }
.page-template-template-brand-marketing-php .daypart .section-head h2 b{ color:var(--accent); font-weight:700; }
.page-template-template-brand-marketing-php .daypart .daypart-step{ padding:0 0 12px; overflow:hidden; display:flex; flex-direction:column; }
.page-template-template-brand-marketing-php .daypart .daypart-step h3{ margin:14px 18px 8px; }
.page-template-template-brand-marketing-php .daypart .daypart-step p{ margin:0 18px; }
/* Third line this page's steps carry that bar-v3's own (time + serve
   only) doesn't need — a short descriptive sentence under the serve
   list, muted and a touch smaller so it reads as supporting copy. */
.page-template-template-brand-marketing-php .bar3-daypart-step__note{ margin:6px 18px 0 !important; font-size:.8rem; color:var(--ink-muted); }
/* Same as the bar-v3 pages' "--desc" day-part cards: the description is hidden until the photo is hovered (or focused / tapped on
   touch screens — the photo box has tabindex="0"), then fades in over the foot of the photo. */
.page-template-template-brand-marketing-php .bar3-daypart .bar3-daypart-photo .bar3-daypart-step__desc{
	position:absolute; inset:0; z-index:2; margin:0; padding:14px; display:flex; align-items:flex-end;
	background:linear-gradient(0deg,rgba(13,26,31,.88) 0%,rgba(13,26,31,.55) 45%,transparent 85%); color:var(--ink); font-size:.82rem; line-height:1.4;
	opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.page-template-template-brand-marketing-php .bar3-daypart .bar3-daypart-photo:hover .bar3-daypart-step__desc,
.page-template-template-brand-marketing-php .bar3-daypart .bar3-daypart-photo:focus .bar3-daypart-step__desc,
.page-template-template-brand-marketing-php .bar3-daypart .bar3-daypart-photo:focus-within .bar3-daypart-step__desc{ opacity:1; }
.page-template-template-brand-marketing-php .bar3-daypart .bar3-daypart-photo[tabindex]{ cursor:pointer; outline:none; }
.page-template-template-brand-marketing-php .bar3-daypart-photo{
	position:relative; flex:0 0 auto; height:176px; width:100%; margin:0; border-radius:0; overflow:hidden;   /* same as the Coffee (bar-v3) page */
}
.page-template-template-brand-marketing-php .bar3-daypart-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.page-template-template-brand-marketing-php .bar3-daypart-photo:after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(180deg, transparent 80%, var(--bg-panel) 100%);
}
.page-template-template-brand-marketing-php .bar3-daypart .section-head{ flex-direction:column; align-items:flex-start; justify-content:flex-start; text-align:left; padding-left:0; padding-right:0; gap:0; }
.page-template-template-brand-marketing-php .bar3-daypart__sub{ margin:0; color:var(--ink-muted); }
.page-template-template-brand-marketing-php .bar3-daypart .daypart-row{ align-items:stretch; }
.page-template-template-brand-marketing-php .bar3-daypart-note{ flex:1.2 1 0; align-self:stretch; display:flex; align-items:center; padding-left:24px; }
.page-template-template-brand-marketing-php .bar3-daypart-note__intro{ margin:0 0 16px; color:var(--ink-muted); }
.page-template-template-brand-marketing-php .bar3-daypart-note__lead{ margin:0; color:var(--ink); font-family:'Oswald',sans-serif; font-size:24px; }
@media (max-width:900px){
	.page-template-template-brand-marketing-php .bar3-daypart-note{ padding-left:0; margin-top:20px; }
}

/* ---- HOUSE RULE: every eyebrow, on every page, has the same line-height and
   the same spacing under it (2026-09-21, matched to the homepage hero's
   eyebrow: line-height 1.38, 12px below, nothing above, no vertical padding).
   Covers the shared .eyebrow plus the bespoke homepage/How It Works ones.
   !important on purpose: many page-scoped and plugin-era rules set their own
   eyebrow margin (6/8/10/16px…) and this is meant to win everywhere. Only the
   vertical margin/padding and line-height are forced — font-size, colour and
   horizontal margins are left to each context. .section-head__eyebrow
   (brand-marketing) used to be excluded as a bespoke large secondary title
   line rather than a kicker, but it's since been restyled to the standard
   green eyebrow treatment, so it now follows the same spacing rule too. */
.eyebrow,
.bm-home__eyebrow,
.bm-hiw__eyebrow,
.bm-how__eyebrow,
.section-head__eyebrow{
	line-height:1.38 !important;
	margin-top:0 !important;
	margin-bottom:12px !important;
	padding-top:0 !important;
	padding-bottom:0 !important;
}

/* Same house rule, made exact where the browser allows: text-box-trim (Chrome/
   Edge 133+, Safari 18.2+; ignored elsewhere, where the 12px rule above still
   applies) trims the invisible leading above a heading's capitals and below
   the eyebrow's baseline, so the visible gap from eyebrow letters to the
   heading's letters is exactly 12px on every page, whatever the heading's own
   line-height or size. */
@supports (text-box: trim-start cap alphabetic){
	.eyebrow,
	.bm-home__eyebrow,
	.bm-hiw__eyebrow,
	.bm-how__eyebrow,
	.section-head__eyebrow{
		text-box: trim-end cap alphabetic;
	}
	:is(.eyebrow, .bm-home__eyebrow, .bm-hiw__eyebrow, .bm-how__eyebrow, .section-head__eyebrow) + :is(h1, h2, h3, h4, p){
		text-box: trim-start cap alphabetic;
	}
	/* Visible gap under every eyebrow is 12px, hero eyebrows included (2026-10-14: "the hero and headings always 12px apart") —
	   the old 20px exception for eyebrows above 57.6px headings was removed. */
}

/* Brand & Marketing on phones: rows that were sized for desktop can't shrink below their content, so
   the whole page scrolled sideways (~500px). Let the tracks shrink (minmax(0,1fr)) and let the icon
   flow, the two-column heading and the nowrap highlight wrap. */
@media (max-width:900px){
	.page-template-template-brand-marketing-php .brand-touchpoints__foot{ grid-template-columns:minmax(0,1fr); }
	.page-template-template-brand-marketing-php .brand-touchpoints__retain-flow{ flex-wrap:wrap; row-gap:14px; }
	.page-template-template-brand-marketing-php .brand-touchpoints__retain-copy .brand-touchpoints__highlight{ white-space:normal; }
}
@media (max-width:760px){
	.page-template-template-brand-marketing-php .section-head--lg{ grid-template-columns:minmax(0,1fr); gap:20px; }
	.page-template-template-brand-marketing-php .section-head--lg > div:first-child{ border-right:0; padding-right:0; }
	.page-template-template-brand-marketing-php .event-journey__head:first-of-type h2{ white-space:normal; }
}

/* ---- Conference page: full 1440 width + 30px section rhythm ----
   .statement-in's sitewide 820px cap (and this page's old 760/900/1000/
   1100px per-section overrides) replaced with the full 1440 content
   width, matching every .wrap-based section (.editorial/.daypart/
   .built-for/.faq-list) already at 1440 via .wrap itself. Each
   section's own clamp()-based vertical padding replaced with the flat
   30px rhythm used on the other rebuilt pages (sustainability, brand
   marketing, brand activations). */
/* [Conference: Branded or Unbranded] heading / copy / options three-up,
   per the approved reference image — replaces the old stacked
   process-row + spec-grid layout with three side-by-side columns and a
   full-width ruled-off pullquote underneath. */
/* [Make It Yours] 50/50: the heading and, directly under it, the three options on the left; the explanatory copy on the right. */
.page-template-template-conference-php .conference-unbranded{
	grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 56px; align-items:start;
}
.page-template-template-conference-php .conference-unbranded__head{ grid-column:1; grid-row:1; }
.page-template-template-conference-php .conference-unbranded__options{ grid-column:1; grid-row:2; }
.page-template-template-conference-php .conference-unbranded__copy{ grid-column:2; grid-row:1 / span 2; align-self:center; }
/* [Give Sponsors More Visibility] branding options — two lists of four with the green logo chevrons (no icons), the same bullet as the
   other lists on the site. */
/* two lists of four, filled down the columns */
.branding-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,auto); grid-auto-flow:column; gap:6px 32px; margin:14px 0 18px; }
.branding-grid__item{ position:relative; padding-left:26px; text-align:left; }
.branding-grid__item::before{
	content:''; position:absolute; left:0; top:.42em; width:14px; height:14px; background-color:var(--accent);
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='3,2 11,2 21,12 11,22 3,22 13,12'/%3E%3C/svg%3E") no-repeat center/contain;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='3,2 11,2 21,12 11,22 3,22 13,12'/%3E%3C/svg%3E") no-repeat center/contain;
}
.branding-grid__item span{ font-family:'Open Sans',sans-serif; font-size:.92rem; font-weight:400; text-transform:none; letter-spacing:normal; color:var(--ink); line-height:1.35; }

/* [Conference Service Planning] capacity callout — 4 plain icon+label
   items in a row (no card border, unlike .scenario-cards above),
   matching the approved reference image; replaces the old plain
   .feature-boxes chip row. */
.capacity-features{ display:flex; justify-content:space-between; gap:16px; margin-top:20px; }
.capacity-features__item{ display:flex; flex-direction:column; align-items:center; gap:10px; flex:1; text-align:center; }
.capacity-features__item svg{ width:26px; height:26px; color:var(--accent); flex:0 0 auto; }
.capacity-features__item span{
	font-family:'Oswald',sans-serif; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--ink);
}
@media (max-width:700px){ .capacity-features{ flex-wrap:wrap; } .capacity-features__item{ flex:1 1 40%; } }

/* [Conference: One Conference. Different Ways to Serve It.] the
   .bar3-daypart structural component reused from bar-v3/Brand
   Activations/Brand & Marketing — photo cards with time+serve (two
   lines, no third note line needed here) plus the note panel sharing
   the same row. Same page-scoped pattern as those pages' own copies. */
.page-template-template-conference-php .daypart .section-head h2{ font-weight:300; color:var(--ink); }
.page-template-template-conference-php .daypart .section-head h2 b{ color:var(--accent); font-weight:700; }
.page-template-template-conference-php .daypart .daypart-step{ padding:0 0 12px; overflow:hidden; display:flex; flex-direction:column; }
.page-template-template-conference-php .daypart .daypart-step h3{ margin:14px 18px 8px; }
.page-template-template-conference-php .daypart .daypart-step p{ margin:0 18px; }
.page-template-template-conference-php .bar3-daypart-photo{
	position:relative; flex:0 0 auto; height:176px; width:100%; margin:0; border-radius:0; overflow:hidden;   /* same as the Coffee (bar-v3) page */
}
.page-template-template-conference-php .bar3-daypart-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.page-template-template-conference-php .bar3-daypart-photo:after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(180deg, transparent 80%, var(--bg-panel) 100%);
}
.page-template-template-conference-php .bar3-daypart .section-head{ flex-direction:column; align-items:flex-start; justify-content:flex-start; text-align:left; padding-left:0; padding-right:0; gap:0; }
.page-template-template-conference-php .bar3-daypart__sub{ margin:0; color:var(--ink-muted); }
.page-template-template-conference-php .bar3-daypart .daypart-row{ align-items:stretch; }
.page-template-template-conference-php .bar3-daypart-note{ flex:1.2 1 0; align-self:stretch; display:flex; align-items:center; padding-left:24px; }
.page-template-template-conference-php .bar3-daypart-note__intro{ margin:0 0 16px; color:var(--ink-muted); }
.page-template-template-conference-php .bar3-daypart-note__lead{ margin:0; color:var(--ink); font-family:'Oswald',sans-serif; font-size:24px; }
@media (max-width:900px){
	.page-template-template-conference-php .bar3-daypart-note{ padding-left:0; margin-top:20px; }
}

/* [Conference Service Planning] "The Scenario" — 4 bordered cards in a
   row (icon + label), matching the approved reference image, replacing
   the old vertical arrow-stack .process-row. */
.scenario-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:16px; }
.scenario-cards__item{
	background:var(--bg-panel); border:1px solid var(--rule); border-radius:4px;
	padding:18px 14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scenario-cards__item svg{ width:22px; height:22px; color:var(--accent); flex:0 0 auto; }
.scenario-cards__item span{
	font-family:'Oswald',sans-serif; font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--ink);
}
@media (max-width:700px){ .scenario-cards{ grid-template-columns:repeat(2,1fr); } }
.conference-unbranded__head h2{ font-size:38.4px; }
.conference-unbranded__head h2 b{ color:var(--accent); }
.conference-unbranded__copy p{ margin:0 0 14px; }
.conference-unbranded__copy p:last-child{ margin-bottom:0; }
.conference-unbranded__options{ display:flex; flex-wrap:wrap; gap:24px; }
.conference-unbranded__option{ flex:1; min-width:110px; }
.conference-unbranded__option svg{ width:28px; height:28px; color:var(--accent); margin-bottom:10px; }
.conference-unbranded__option h3{ font-size:.95rem; margin:0 0 6px; }
.conference-unbranded__option p{ font-size:.8rem; color:var(--ink-muted); margin:0; }
/* "The level of branding should fit the event." sits under the explanatory text on the right. */
.conference-unbranded__quote{
	text-align:left; margin-top:18px !important; margin-bottom:0 !important; font-size:20px !important;
}
@media (max-width:900px){
	.page-template-template-conference-php .conference-unbranded{ grid-template-columns:1fr; }
	.page-template-template-conference-php .conference-unbranded__head,
	.page-template-template-conference-php .conference-unbranded__options,
	.page-template-template-conference-php .conference-unbranded__copy{ grid-column:1; grid-row:auto; align-self:auto; }
	.page-template-template-conference-php .conference-unbranded__head{ order:1; }
	.page-template-template-conference-php .conference-unbranded__options{ order:2; }
	.page-template-template-conference-php .conference-unbranded__copy{ order:3; }
	.conference-unbranded__options{ flex-direction:column; gap:20px; }
}

/* [Conference Sponsorship] 45/55 split: text (45%) left, the photo collage (55%) right — the collage takes the height of the copy column. */
.page-template-template-conference-php .conference-sponsor{
	grid-template-columns:minmax(0,45fr) minmax(0,55fr); gap:56px; align-items:stretch;
}
/* Photo collage: one large photo on top (takes whatever height is left beside the copy) and three squares below. */
.conference-sponsor__photos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:minmax(0,1fr) auto; gap:10px; min-height:0; }
.conference-sponsor__photo{ position:relative; overflow:hidden; background:var(--bg-panel); aspect-ratio:1; }
.conference-sponsor__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.conference-sponsor__photo--main{ grid-column:1 / -1; aspect-ratio:auto; min-height:220px; }
@media (max-width:900px){
	.page-template-template-conference-php .conference-sponsor{ grid-template-columns:minmax(0,1fr); }
	.conference-sponsor__photo--main{ aspect-ratio:16/9; min-height:0; }
}
/* [Conference Service Planning + Multiple Service Points] merged into
   one 50/50 section — a vertical rule between the two columns since
   each is dense enough (scenario box / spec-grid) to need a clear
   separation, same divider technique as .section-head--lg elsewhere. */
.page-template-template-conference-php .conference-planning__in{
	display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; text-align:left;
}
/* Same .statement p centring fix as .conference-break__copy above. */
.page-template-template-conference-php .conference-planning__col > p{ max-width:none; margin-left:0; margin-right:0; }
.conference-planning__col:first-child{ border-right:1px solid var(--rule); padding-right:56px; }
/* The right column's spec-grid is now a half-width column, not the
   full .wrap width .spec-grid normally gets — 4 columns at this width
   crowds 6 items, so this context gets 2 instead. */
.conference-planning__col .spec-grid{ grid-template-columns:repeat(2,1fr); }
/* The sitewide .spec-item:first-child rule strips the divider because
   in the normal 4-across row the first item sits flush against the
   page's own left edge. Here it's a 2-up grid instead, so item 1 is a
   left-column item same as every other left-column item below it —
   it needs its divider back to match them. */
.conference-planning__col .spec-item:first-child{ border-left:1px solid var(--rule); padding-left:24px; }
@media (max-width:900px){
	.page-template-template-conference-php .conference-planning__in{ grid-template-columns:1fr; }
	.conference-planning__col:first-child{ border-right:0; padding-right:0; border-bottom:1px solid var(--rule); padding-bottom:40px; margin-bottom:8px; }
}
.page-template-template-conference-php .statement-in{ max-width:1440px; }
.page-template-template-conference-php section.statement,
.page-template-template-conference-php section.editorial,
.page-template-template-conference-php section.daypart{
	padding-top:30px; padding-bottom:30px;
}
/* [Conference] standard site typography — 12px eyebrows, 38.4px light headings with the bold part in green,
   normal grey body text (hero keeps its own larger eyebrow / heading). */
.page-template-template-conference-php section:not(.faq-list) .eyebrow{ font-size:15px; }
.page-template-template-conference-php section:not(.faq-list) h2{ font-size:38.4px; font-weight:300; color:var(--ink); }
.page-template-template-conference-php section:not(.faq-list) h2 b{ font-size:inherit; color:var(--accent); font-weight:700; }

/* ---------------------------------------------------------------------
   About Barmotion (template-about.php)
   --------------------------------------------------------------------- */
.page-template-template-about-php .hero h1 b{ color:var(--accent); }
.page-template-template-about-php .hero p.sub{ max-width:560px; }
.page-template-template-about-php .editorial{ gap:56px; padding-block:30px; align-items:stretch; }
.page-template-template-about-php .editorial__copy{ align-self:center; }
.page-template-template-about-php .editorial__copy h2{ font-weight:300; }
.page-template-template-about-php .editorial__copy h2 b{ color:var(--accent); }
.page-template-template-about-php .editorial__copy .eyebrow, .page-template-template-about-php .about-cta__head .eyebrow{ font-size:15px; }
.page-template-template-about-php .editorial__copy h2, .page-template-template-about-php .editorial__copy h2 b{ font-size:38.4px; }
.page-template-template-about-php .about-photo{ aspect-ratio:auto; min-height:360px; border-radius:0; }
.page-template-template-about-php .about-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-template-template-about-php .about-statement{
	font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:700; color:var(--ink); letter-spacing:.02em; margin-top:24px !important;
}
/* Short lines that read as one block: no blank space between them, normal gap before the next paragraph. */
.page-template-template-about-php .about-tight{ margin:0; }
.page-template-template-about-php .about-tight + p:not(.about-tight){ margin-top:16px; }
.page-template-template-about-php .about-lead{ font-family:'Oswald',sans-serif; font-size:1.4rem; color:var(--accent); font-weight:600; margin:18px 0 8px; }
/* Six values — one row, a thin rule between each. */
.page-template-template-about-php .about-values{ grid-column:1 / -1; padding-top:10px; text-align:center; }
.page-template-template-about-php .about-values ul{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; justify-content:center; }
.page-template-template-about-php .about-values li{
	font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.14em; font-weight:700; color:var(--ink);
	padding:4px 28px; border-left:1px solid var(--rule); font-size:.95rem;
}
.page-template-template-about-php .about-values li:first-child{ border-left:0; }
/* Values now sit under the "Good People" copy (left half): left-aligned, no vertical dividers, copy runs the column width. */
.page-template-template-about-php .editorial__copy .about-values{ grid-column:auto; padding-top:0; text-align:left; }
.page-template-template-about-php .editorial__copy .about-values ul{ justify-content:flex-start; margin:0 0 16px; }
.page-template-template-about-php .editorial__copy .about-values li{ border-left:0; padding:4px 20px 4px 0; }
.page-template-template-about-php .editorial__copy .about-values p{ margin:0; max-width:none; }
.page-template-template-about-php .about-values p{ margin:0 auto; max-width:70ch; color:var(--ink-muted); }
/* "It Starts With Listening" | "We've Been Doing This for a While": two equal text columns (no photo) with a thin grey line between them. */
.page-template-template-about-php .about-lower{
	grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; align-items:stretch; padding-top:30px; padding-bottom:30px;
}
.page-template-template-about-php .about-lower__listening{ padding-right:56px; }
.page-template-template-about-php .about-lower__years{ padding-left:56px; border-left:1px solid rgba(238,241,234,.3); }
.page-template-template-about-php .about-lower h2,
.page-template-template-about-php .about-lower h2 b{ font-size:38.4px; }
.page-template-template-about-php .about-lower h2{ font-weight:300; line-height:.9; }
@media (max-width:900px){
	.page-template-template-about-php .about-lower{ grid-template-columns:minmax(0,1fr); }
	.page-template-template-about-php .about-lower__listening{ padding-right:0; padding-bottom:30px; }
	.page-template-template-about-php .about-lower__years{ padding-left:0; padding-top:30px; border-left:0; border-top:1px solid rgba(238,241,234,.3); }
}
/* Closing call-to-action: heading on the left, text and button on the right (no photo). */
.page-template-template-about-php .about-cta{
	display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; padding-block:30px;
}
.page-template-template-about-php .about-cta__body p{ margin:0 0 20px; }
.page-template-template-about-php .about-cta__body .hero-cta{ margin:0; }
.page-template-template-about-php .about-cta h2, .page-template-template-about-php .about-cta h2 b{ font-size:38.4px; }
.page-template-template-about-php .about-cta h2{ font-weight:300; }
.page-template-template-about-php .about-cta h2 b{ color:var(--accent); }
@media (max-width:900px){
	.page-template-template-about-php .editorial, .page-template-template-about-php .about-cta{ grid-template-columns:1fr; }
	.page-template-template-about-php .about-photo{ min-height:0; aspect-ratio:4/3; }
	.page-template-template-about-php .about-values li{ border-left:0; padding:4px 14px; }
}

/* Bar page heroes: let the intro text run wider to the right over the picture (610px -> 820px) so it takes fewer lines / less height. Desktop only. */
@media (min-width:901px){
	.page-template-template-bar-v3-php .hero--bar > div:first-child{ max-width:820px; }
}

/* Sustainability section headings 32px (How We Operate, Reduce Reuse Redistribute, Responsible Choices, Have Specific Sustainability Requirements?, There's Always More We Can Do, Working With People Who Share Our Values). The closing "Let's Talk Hospitality" statement keeps its own size. */
.page-template-template-sustainability-php .editorial--copy-only h2,
.page-template-template-sustainability-php .sus-reduce h2,
.page-template-template-sustainability-php .sus-bartocup h2,
.page-template-template-sustainability-php .sus-lower h2,
.page-template-template-sustainability-php .purchasing h2{ font-size:32px; }
/* Sustainability eyebrows 12px (the section eyebrows; the hero keeps its larger one). */
.page-template-template-sustainability-php section .eyebrow{ font-size:15px; }
/* Gap above the How We Operate grid: 22px (was 32px). The heading block above it keeps a smaller bottom margin so the larger of the two margins is the 22px. */
.page-template-template-sustainability-php .sus-operate__head{ margin-bottom:20px; }
.page-template-template-sustainability-php .sus-operate .spec-grid{ margin-top:22px; }
/* Purchasing closing line ("Better choices are easier when you work with people who care about the same things.") 16px. */
.page-template-template-sustainability-php .purchasing .pullquote{ font-size:16px; }
/* Purchasing list normal line spacing: no extra gap between the bullets, just the 22px line height (was 10px between items). */
.page-template-template-sustainability-php .purchasing .sus-lower__list{ gap:0; }
/* Purchasing: eyebrow + heading sit in their own grid row above the left column; both columns' copy starts in the row below, so the right-hand
   intro line always lines up with the first left paragraph whatever the heading's wrapping. */
.page-template-template-sustainability-php .purchasing__grid{ row-gap:0; }
.page-template-template-sustainability-php .purchasing__head{ grid-column:1; grid-row:1; }
.page-template-template-sustainability-php .purchasing__col--left{ grid-column:1; grid-row:2; }
.page-template-template-sustainability-php .purchasing__col--right{ grid-column:2; grid-row:2; }
@media (max-width:800px){
.page-template-template-sustainability-php .purchasing__head, .page-template-template-sustainability-php .purchasing__col--left, .page-template-template-sustainability-php .purchasing__col--right{ grid-column:1; grid-row:auto; }
.page-template-template-sustainability-php .purchasing__col--right{ margin-top:24px; }
}
/* About hero text block matches Sustainability: 700px wide, intro paragraph 590px (was 610px / 560px). Desktop only. */
@media (min-width:901px){
.page-template-template-about-php .hero > div:first-child{ max-width:700px; }
.page-template-template-about-php .hero p.sub{ max-width:590px; }
}
/* About "Good People": 60/40 split, text in the 60, photo in the 40. Desktop only (stacks below 900px). */
@media (min-width:901px){
.page-template-template-about-php .about-people{ grid-template-columns:minmax(0,3fr) minmax(0,2fr); }
}

/* ---- STANDARD: sub-heading (class "bm-sub-head") — 2026-10-14.
   Put it on the div that holds an eyebrow and the heading straight under it (the eyebrow and the h2/h3 must be direct children):
	   <div class="bm-sub-head"><span class="eyebrow">…</span><h3>Plain words <b>accent words</b></h3>…</div>
   Eyebrow 15px (was 11.52px until 2026-10-14), heading 27.2px (the accent <b> too). Nothing else is touched (colour, weight, margins and the 12px gap under
   the eyebrow stay as the page already sets them). Used for the Brand Activations cards and "Product Launches" section. */
body .bm-sub-head.bm-sub-head > .eyebrow{ font-size:15px; }
body .bm-sub-head.bm-sub-head > h2,
body .bm-sub-head.bm-sub-head > h3,
body .bm-sub-head.bm-sub-head > h2 b,
body .bm-sub-head.bm-sub-head > h3 b{ font-size:27.2px; }
/* eyebrow directly above a card grid: 12px between them, like every other eyebrow (the grids carried a 16px top margin) */
.eyebrow + .scenario-cards{ margin-top:0; }

/* Brand & Marketing Integration: five section headings at 38.4px (2026-10-14) — "Make It Part of the Strategy", "Your Brand, Every Touchpoint",
   "From One Bar to the Whole Event", "Creative at the Front / Proper Planning Behind It", "Fully Managed / From Start to Finish". */
body.page-template-template-brand-marketing-php .section-head--lg__title,
body.page-template-template-brand-marketing-php .section-head--lg__title b,
body.page-template-template-brand-marketing-php .brand-touchpoints__copy > h2,
body.page-template-template-brand-marketing-php .brand-touchpoints__copy > h2 b,
body.page-template-template-brand-marketing-php .event-journey__head > h2,
body.page-template-template-brand-marketing-php .event-journey__head > h2 b,
body.page-template-template-brand-marketing-php .creative-managed__title,
body.page-template-template-brand-marketing-php .creative-managed__title b,
body.page-template-template-brand-marketing-php .section-head--lg h2.section-head--lg__title,
body.page-template-template-brand-marketing-php .section-head--lg h2.section-head--lg__title b,
body.page-template-template-brand-marketing-php .event-journey__head:first-of-type h2,
body.page-template-template-brand-marketing-php .event-journey__head:first-of-type h2 b{ font-size:38.4px; }

/* Exhibitions: every section heading is 38.4px, with its eyebrow at 15px (2026-10-14), as on the other pages. */
body.page-template-template-exhibitions-php .exhibition-purpose .eyebrow,
body.page-template-template-exhibitions-php .exhibition-coffee .eyebrow,
body.page-template-template-exhibitions-php .exhibition-variety .eyebrow,
body.page-template-template-exhibitions-php .exhibition-brand .eyebrow,
body.page-template-template-exhibitions-php .exhibition-ready .eyebrow,
body.page-template-template-exhibitions-php .exhibition-managed .eyebrow,
body.page-template-template-exhibitions-php .exhibition-action .eyebrow{ font-size:15px; }
body.page-template-template-exhibitions-php .exhibition-purpose h2,
body.page-template-template-exhibitions-php .exhibition-coffee h2,
body.page-template-template-exhibitions-php .exhibition-variety h2,
body.page-template-template-exhibitions-php .exhibition-brand h2,
body.page-template-template-exhibitions-php .exhibition-ready h2,
body.page-template-template-exhibitions-php .exhibition-managed h2,
body.page-template-template-exhibitions-php .exhibition-action h2,
body.page-template-template-exhibitions-php .exhibition-purpose h2 b,
body.page-template-template-exhibitions-php .exhibition-coffee h2 b,
body.page-template-template-exhibitions-php .exhibition-variety h2 b,
body.page-template-template-exhibitions-php .exhibition-brand h2 b,
body.page-template-template-exhibitions-php .exhibition-ready h2 b,
body.page-template-template-exhibitions-php .exhibition-managed h2 b,
body.page-template-template-exhibitions-php .exhibition-action h2 b{ font-size:38.4px; }

/* FAQ accordion title (every page): heading 38.4px, eyebrow 15px with the standard 12px gap under it. */
body .faq-toggle > summary h2{ font-size:38.4px; }
body .faq-toggle > summary .eyebrow{ font-size:15px; margin-bottom:12px; }

/* Eyebrows at the 15px standard (were 11.52px): Our Bars flow + CTA, Brand & Marketing "Throughout the Day". The 12px gap below comes from the shared eyebrow spacing rule. */
.page-template-template-our-bars-php .bm-bars__flow-copy > .eyebrow,
.page-template-template-our-bars-php .bm-bars__cta-copy > .eyebrow,
.page-template-template-brand-marketing-php .section-head > .eyebrow{ font-size:15px; }
.page-template-template-brand-marketing-php .bar3-daypart .section-head > h2{ font-size:38.4px; }
/* About "We've Been Doing This": closing tag line, white and bold. */
.page-template-template-about-php .about-years__tag{ font-family:'Oswald',sans-serif; font-size:16px; text-transform:uppercase; font-weight:700; color:var(--ink); letter-spacing:.02em; margin-top:8px; }

/* ==========================================================================================================================
   EVENT SOLUTIONS PAGES — the one default style for white Oswald labels (everything that is white Oswald and not a main heading:
   statements / pull-quotes, chips, card and step titles, icon labels, flow steps, photo captions, FAQ questions).
   Pages: Event Solutions, Brand Activations, Conference, Exhibitions, Brand & Marketing, Corporate Events, Roadshows, Wellness Days.
   To change them ALL, change the four values below. To add another label, add its selector to the list.
   Not included on purpose: h1/h2 headings, bigger sub-headings, the Brand Activations "Stop. Discover. Take Part…" word row (.brand-activations__why-tags span, its own 14px), the Conference icon-stepper rows ("Sponsor → Hospitality → Delegate → Around the Conference" etc. = .icon-stepper__step span, 13.6px), the whole Conference "Service Planning" section (.conference-planning: scenario cards, process row, capacity features, spec grid titles — each keeps its own size), the Event Solutions "Brief → Plan → Prepare → Set Up → Serve → Break Down" row (.event-solutions__process span, 9.92px), the Exhibitions "Fully Managed" spec titles ("Counter / Under Counter / Behind the Bar / Technical" = .exhibition-managed__spec h3, 13.6px), the Exhibitions "Fully Managed" step rows ("One Bar → Multiple Services…" and "Brief → Plan → Coordinate…" = .exhibition-managed__col .process-row, 13.6px), the Exhibitions icon rows ("Branded Cups & Sleeves…" = .exhibition-brand__icon-item span 13.6px; "Visitor Numbers … Waste" = .exhibition-ready__icon-item span 10.88px) and the whole "Put Your Brand in Their Hands" block (.exhibition-brand: "Your Stand → Their Hand → Around the Show" row and its statement, 20px) ("Branded Cups & Sleeves…" = .exhibition-brand__icon-item span, 13.6px), the Brand & Marketing step rows ("One Bar / Multiple Services…" = .event-journey__steps span, 13.6px; "Brief → Plan → Create…" = .creative-managed__process span, 9.28px), the CARD TITLES (Event Solutions cards, Brand & Marketing photo captions, Corporate "What Are We Serving?" cards, Wellness cards — each keeps its own styling), and the green hero tag line (.ce-hero__lead = Oswald 18.4px).
   ========================================================================================================================== */
:root{
	--bm-label-size:17.6px;
	--bm-label-weight:400;
	--bm-label-transform:uppercase;
	--bm-label-color:var(--ink);
}
body:is(.page-template-template-event-solutions-php,.page-template-template-brand-activations-php,.page-template-template-conference-php,.page-template-template-exhibitions-php,.page-template-template-brand-marketing-php,.page-template-template-corporate-events-php,.page-template-template-roadshows-php,.page-template-template-wellness-days-php) :is(
	
	
	
	.event-solutions__note,
	.brand-activations__note,
	
	.brand-activations__work-with-row > div > span,
	.conference-coffee__item h3,
	
	.conference-unbranded__option h3,
	
	
	
	.exhibition-purpose__option h3,
	
	
	
	
	.impact-flow__head p,
	.impact-flow__row strong,
	.brand-touchpoints__step h3,
	.brand-touchpoints__list h3,
	.brand-touchpoints__retain-flow span,
	
	
	
	.ce-chips li,
	
	.ce-flow li,
	.ce-action__item figcaption,
	.rs-strap,
	.rs-stops__item figcaption strong,
	.rs-stops__more strong,
	.rs-list li a strong,
	.rs-icons li span,
	.rs-aud__block h3,
	
	
	.wd-steps__t,
	.wd-serve__foot p,
	p.pullquote:not(.exhibition-brand .pullquote),
	.process-row:not(.conference-planning .process-row):not(.exhibition-brand .process-row):not(.exhibition-managed__col .process-row) span,
	.daypart-step h3,
	.daypart-step h3 a,
	
	.faq-grid details > summary
){
	font-family:'Oswald',sans-serif !important;
	font-size:var(--bm-label-size) !important;
	font-weight:var(--bm-label-weight) !important;
	text-transform:var(--bm-label-transform) !important;
	color:var(--bm-label-color) !important;
}

/* ==========================================================================================================================
   EVENT SOLUTIONS PAGES — the default style for the larger "lead" line (the closing statement beside the day-part cards,
   e.g. "Different parts of the event. Different hospitality. One team taking care of it."): white Oswald, 24px, regular weight, all caps.
   To change them ALL, change the four values below. Same pages as the label rule above.
   ========================================================================================================================== */
:root{
	--bm-lead-size:24px;
	--bm-lead-weight:400;
	--bm-lead-transform:uppercase;
	--bm-lead-color:var(--ink);
}
body:is(.page-template-template-event-solutions-php,.page-template-template-brand-activations-php,.page-template-template-conference-php,.page-template-template-exhibitions-php,.page-template-template-brand-marketing-php,.page-template-template-corporate-events-php,.page-template-template-roadshows-php,.page-template-template-wellness-days-php) :is(
	.bar3-daypart-note__lead,
	.creative-managed__note-lead
){
	font-family:'Oswald',sans-serif !important;
	font-size:var(--bm-lead-size) !important;
	font-weight:var(--bm-lead-weight) !important;
	text-transform:var(--bm-lead-transform) !important;
	color:var(--bm-lead-color) !important;
}

/* Exhibitions "Your Stand → Their Hand → Around the Show" block: the statement keeps its original 20px (the row above it keeps its own styling too). */
body.page-template-template-exhibitions-php .exhibition-brand p.pullquote{ font-size:20px !important; }

/* ==========================================================================================================================
   EVENT SOLUTIONS PAGES — standard width for the day-part photo cards ("Beyond the Workplace", "Throughout the Day", "One Event / One
   Roadshow Different Ways to Serve It" …): every card is the same fixed width, so the photos match on every page (card 236px = photo
   234px wide x 176px tall). The note column beside the cards takes whatever room is left. Desktop only; phones stack as before.
   To change them ALL, change the one value below.
   ========================================================================================================================== */
:root{ --bm-daypart-card-w:236px; }
@media (min-width:901px){
	body:is(.page-template-template-event-solutions-php,.page-template-template-brand-activations-php,.page-template-template-conference-php,.page-template-template-exhibitions-php,.page-template-template-brand-marketing-php,.page-template-template-corporate-events-php,.page-template-template-roadshows-php,.page-template-template-wellness-days-php) .daypart-row > .daypart-step{ flex:0 0 var(--bm-daypart-card-w); max-width:var(--bm-daypart-card-w); }
}

/* ==========================================================================================================================
   HEADING LINE SPACING — one value for every section heading (h2) sitewide: change --bm-heading-lh and they all follow.
   (Section headings are 38.4px on most pages; before this rule they varied 0.9 / 0.95 / 1.0 / 1.1.) h1, h3 and card titles keep their own spacing.
   Left alone on purpose: the two large statement headings, "Business Event Doesn't Have…" (Corporate Events, .ce-break) and
   "More Than Putting a Logo…" (Brand & Marketing, .brand-touchpoints__title).
   ========================================================================================================================== */
:root{ --bm-heading-lh:0.9; }
body h2:not(.ce-break__copy h2):not(.brand-touchpoints__title){ line-height:var(--bm-heading-lh) !important; }

/* ==========================================================================================================================
   BAR PAGES (template-bar-v3) — white Oswald text in capitals
   - the hero strapline (white Oswald 18.4px) is now in capitals (size unchanged);
   - the white Oswald text that was 16px is now 17.6px, all caps: FAQ questions, the "managed" benefit headings, the "explore" tag line,
     the hero lead and the pull-quote (their weights are unchanged);
   - the day-part note ("One event. Different parts of the day. …"): white Oswald 24px, all caps.
   ========================================================================================================================== */
body.page-template-template-bar-v3-php header.hero p.sub{ text-transform:uppercase !important; }
body.page-template-template-bar-v3-php :is(
	.bar3-faq-grid details > summary,
	.bar3-managed__benefits h3,
	.bar3-explore__tag,
	.bar3-hero__lead,
	.editorial__copy p.pullquote
){ font-size:17.6px !important; text-transform:uppercase !important; }
body.page-template-template-bar-v3-php .bar3-daypart-note:not(:has(> div)){
	font-family:'Oswald',sans-serif !important; font-size:24px !important; font-weight:400 !important; text-transform:uppercase !important; color:var(--ink) !important; line-height:1.25;
}