/* Brand Activations page (template-brand-activations.php,
   /brand-activations/) — dark-theme
   reskin of the two supplied mockups (hero from the first, every
   section after it from the second). */

/* ---- Hero: same full-bleed-photo-behind-text treatment as every other
   full-bleed hero on the site — see style.css's bar-v2 block for the
   full reasoning. Scoped to .hero > .hero-art (direct child only), not
   the bare .hero-art class — that class is reused elsewhere on this
   page (.editorial__photo, the trio cards, the serving icons)
   and an unscoped rule here would strip those photos' own height/
   positioning too (confirmed gotcha, see the other rebuilt pages'
   blocks in style.css). */
.page-template-template-brand-activations-php{ --maxw: 1440px; }
.page-template-template-brand-activations-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-activations-php .hero > div:first-child{
	position:relative; z-index:1; width:100%; max-width:830px;   /* was 610px: the hero text spreads further across the screen (wide enough for the heading to sit on two lines) */
	padding-block:50px;
}
.page-template-template-brand-activations-php .hero .sub{ max-width:none; }
.page-template-template-brand-activations-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-activations-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%);   /* same fade as every other hero */
}
@media (max-width:900px){
	.page-template-template-brand-activations-php .hero > div:first-child{ max-width:90%; padding-block:50px; }
	.page-template-template-brand-activations-php .hero > .hero-art{ width:100%; }
	.page-template-template-brand-activations-php .hero:after{
		background:linear-gradient(180deg, rgba(13,26,31,.92), rgba(13,26,31,.6) 75%, rgba(13,26,31,.87));
	}
}

/* ---- Every other section: 1440 content width (the sitewide --maxw
   default, .wrap handles it) with a flat 30px top/bottom buffer,
   matching the home page's section spacing (.bm-home__trusted etc. in
   barmotion-home.css) instead of this page's own tighter 20px. */
.page-template-template-brand-activations-php .brand-activations__why,
.page-template-template-brand-activations-php .brand-activations__trio,
.page-template-template-brand-activations-php .editorial,
.page-template-template-brand-activations-php .brand-activations__work-with,
.page-template-template-brand-activations-php .daypart,
.page-template-template-brand-activations-php .faq-list{
	padding-top:30px; padding-bottom:30px;
}

/* Plain bold statement line — no pullquote box, matching the hero
   treatment already used sitewide. */
.brand-activations__note{ margin:20px 0 0; font-weight:700; color:var(--ink); }
.hero .brand-activations__note{ font-family:'Open Sans',sans-serif; font-weight:700; font-size:16px; line-height:1.38; color:var(--ink); }

/* "Get People Involved." in the hero h1 goes accent green (the shared
   .hero h1 b is plain ink) — matches the pattern used on Event
   Solutions/Sustainability's hero headings. */
.page-template-template-brand-activations-php .hero h1 b{ color:var(--accent); }

/* ---- What Do You Want People to Do? — heading + tag row on the left,
   supporting copy on the right. */
.brand-activations__why{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:56px; align-items:start; }
/* Left column only has a heading + tag row, next to a right column with
   3 paragraphs — left, visually sparse against the taller column beside
   it. Scaled up here rather than sitewide (same one-off-bigger-heading
   pattern as .editorial__copy--intro on the brand-marketing page). The
   eyebrow steps up to .96rem to match — the house rule pairing a bigger
   eyebrow with a bigger heading (same size used on the hero eyebrow). */
.brand-activations__why-main > .eyebrow{ font-size:15px; }
.brand-activations__why-main > h2{ margin-bottom:.4em; font-size:38.4px; line-height:1; }
.brand-activations__why-main > h2 b{ color:var(--accent); font-size:38.4px; }
/* Column strip with thin dividers between words (not underlines).
   Word columns are sized to their own content (fit-content, capped at
   9em where longer phrases wrap) so short words like "Stop." don't
   carry a dead gap sized for "Start a Conversation.". The divider
   between each pair of words is its own flexible 1fr column (the <i>
   elements the template inserts) with the actual grey line centred
   inside it via margin:auto — that's the part a border-left on each
   word span couldn't do: justify-content's leftover space landed
   entirely on one side of the border (after the word, before the next
   line), so the line always sat closer to the next word than the
   previous one. Centring the line inside its own flexible spacer keeps
   it equidistant from both neighbours regardless of how much leftover
   space there is. Pushed further down from the heading so it doesn't
   read as glued to it. */
.brand-activations__why-tags{
	display:grid;
	grid-template-columns:fit-content(9em) 1fr fit-content(9em) 1fr fit-content(9em) 1fr fit-content(9em) 1fr fit-content(9em) 1fr fit-content(9em);
	align-items:center; margin-top:32px;
}
.brand-activations__why-tags span{
	font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
	font-size:16px; line-height:1.3; letter-spacing:.02em; color:var(--ink);
	text-align:center;
}
.brand-activations__why-tags span:first-child{ text-align:left; }
.brand-activations__why-tags i{ width:1px; height:1.6em; background:var(--rule); margin:0 auto; }
.brand-activations__why-copy p{ margin:0 0 14px; }
/* On wide screens the heading sits on one line, so the word strip is cut to exactly the heading's width (main is as wide as
   the heading; the strip adds nothing to that width, then fills it) and the longer phrases wrap onto two lines to fit. Narrower
   screens keep the full column width. */
@media (min-width:1101px){
	/* Split: the left column is exactly as wide as the heading, the right column takes everything else and its text runs the full width. */
	.brand-activations__why{ grid-template-columns:max-content minmax(0,1fr); gap:72px; }
	.brand-activations__why-copy p{ max-width:none; }
	.brand-activations__why-main{ justify-self:start; width:fit-content; max-width:100%; }
	.brand-activations__why-tags{
		width:0; min-width:100%;
		grid-template-columns:auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto;
	}
	/* Each word box is exactly its text (no wrapping but the one break in "Start a / Conversation."), so the six 1fr spacers are equal
	   and every word sits the same distance from the divider lines either side of it. */
	.brand-activations__why-tags span{ font-size:14px; white-space:nowrap; }
}
@media (max-width:900px){ .brand-activations__why{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:640px){
	/* Simpler 3-per-row layout at this width: drop the flexible-spacer
	   dividers (hide the <i> elements) and go back to a border-left per
	   word instead — space is tight enough here that dead-centred
	   dividers matter less than just fitting three words per row. */
	.brand-activations__why-tags{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:20px; column-gap:0; }
	.brand-activations__why-tags i{ display:none; }
	.brand-activations__why-tags span{ border-left:1px solid var(--rule); padding:0 12px; }
	.brand-activations__why-tags span:first-child{ border-left:0; padding-left:0; }
	.brand-activations__why-tags span:not(:first-child):nth-of-type(3n+1){ border-left:0; padding-left:0; }
}

/* ---- 3-card row: photo, heading, copy, stacked. */
.brand-activations__trio{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.brand-activations__trio-item .hero-art{ aspect-ratio:4/3; margin-bottom:20px; }
/* heading + eyebrow sizes come from the standard .bm-sub-head (style.css) */
/* the card headings are h2s, styled exactly like the Services page's "Different Events / Different Jobs to Do" */
.brand-activations__trio-item > h2{ margin:0 0 .5em; font-size:38.4px; line-height:.9; font-weight:300; }
.brand-activations__trio-item > h2 b{ color:var(--accent); font-weight:700; }
/* the three card headings are 38.4px (the bm-sub-head standard gives 27.2px, so this page overrides it for these three) */
body .brand-activations__trio-item.bm-sub-head.bm-sub-head > h2,
body .brand-activations__trio-item.bm-sub-head.bm-sub-head > h2 b{ font-size:38.4px; }
/* "New Product New Campaign / Hospitality Built Around It" and "Creative Ideas Built to Work" are 38.4px as well */
body .brand-activations__launch .bm-sub-head.bm-sub-head > h2,
body .brand-activations__launch .bm-sub-head.bm-sub-head > h2 b,
body .brand-activations__creative .bm-sub-head.bm-sub-head > h2,
body .brand-activations__creative .bm-sub-head.bm-sub-head > h2 b{ font-size:38.4px; }
.brand-activations__trio-item p{ margin:0 0 14px; font-size:.92rem; }
.brand-activations__trio-item .process-row{ justify-content:flex-start; margin-top:16px; }
.brand-activations__trio-item .btn{ margin-top:6px; }
@media (max-width:900px){ .brand-activations__trio{ grid-template-columns:minmax(0,1fr); } }

/* ---- We Work With — reworked to match the how-it-works page's
   bm-hiw__services section format: a 2-column grid, intro copy on the
   left (same .9fr/1.1fr ratio), a strip of tiles on the right. This page
   has no photography per partner-type (Production Teams, Stand
   Builders, etc.), so the existing SVG icons fill the strip instead of
   photos, centred rather than caption-overlaid. */
.brand-activations__work-with-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:4%; align-items:center; }
.brand-activations__work-with-intro > p{ margin:12px 0 0; color:var(--ink-muted); }
.brand-activations__work-with-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 20px; }
.brand-activations__work-with-row > div{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
.brand-activations__work-with-row svg{
	width:32px; height:32px; flex:0 0 auto; fill:none; stroke:currentColor;
	stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; color:var(--accent);
}
.brand-activations__work-with-row span{
	font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; font-size:.7rem;
	letter-spacing:.02em; color:var(--ink);
}
@media (max-width:900px){
	.brand-activations__work-with-grid{ grid-template-columns:minmax(0,1fr); gap:24px; }
	.brand-activations__work-with-row{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ---- One Campaign. More Than One Serve. — the .daypart.bar3-daypart
   component reused from the Specialty Coffee (bar-v3) page. The shared
   .daypart-step/.daypart-row/.daypart-arrow rules (style.css) 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 verbatim for
   this page, plus the accent-bold heading treatment used everywhere
   else on this page (bar-v3's own heading has no bold portion).
   bar-v3's own captions are one short word/phrase per line, so putting
   aspect-ratio:4/3 on the whole .daypart-step (photo + caption sharing
   one fixed-height flex box) works there — this page's longer captions
   ("Through the Day", "Bubble Tea + Ice Cream + Popcorn") wrap to 2-3
   lines and ate the entire box, squeezing the photo to 0 height. Moved
   the 4/3 ratio onto the photo itself instead, so it always renders as
   a real photo and the card's total height simply grows to fit whatever
   the caption needs below it. */
.page-template-template-brand-activations-php .daypart .section-head h2{ font-weight:300; color:var(--ink); }
.page-template-template-brand-activations-php .daypart .section-head h2 b{ color:var(--accent); font-weight:700; }
.page-template-template-brand-activations-php .daypart .daypart-step{ padding:0 0 12px; overflow:hidden; display:flex; flex-direction:column; }
.page-template-template-brand-activations-php .daypart .daypart-step h3{ margin:14px 18px 8px; }
.page-template-template-brand-activations-php .daypart .daypart-step p{ margin:0 18px; }
.page-template-template-brand-activations-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-activations-php .bar3-daypart-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.page-template-template-brand-activations-php .bar3-daypart-photo:after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(180deg, transparent 80%, var(--bg-panel) 100%);
}
.page-template-template-brand-activations-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-activations-php .bar3-daypart__sub{ margin:0; color:var(--ink-muted); }
.page-template-template-brand-activations-php .bar3-daypart .daypart-row{ align-items:stretch; }
.page-template-template-brand-activations-php .bar3-daypart-note{
	flex:1.2 1 0; align-self:stretch; display:flex; align-items:center; padding-left:24px;
}
.page-template-template-brand-activations-php .bar3-daypart-note__intro{ margin:0 0 16px; color:var(--ink-muted); }
.page-template-template-brand-activations-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-activations-php .bar3-daypart-note{ border-left:0; padding-left:0; margin-top:20px; }
}

/* ---- New Product. New Campaign. — photo column matches the copy
   column's height instead of the fixed 1:1 .editorial__photo ratio
   (same technique as Event Solutions' .event-solutions__built, see
   assets/barmotion-event-solutions.css: stretch the row, let the
   photo's ratio go auto, and take the img out of flow so its own
   intrinsic size can't fight the stretch). The photo's left edge fades
   into the section's own background (var(--bg), this section is
   band-black) instead of cutting hard against the copy column beside
   it. Fixed-height fallback on phones, where the grid drops to a
   single column and "match the text" no longer means anything. */
.page-template-template-brand-activations-php .brand-activations__launch{ align-items:stretch; }
.page-template-template-brand-activations-php .brand-activations__launch .editorial__photo{
	aspect-ratio:auto; position:relative;
}
.page-template-template-brand-activations-php .brand-activations__launch .editorial__photo img{
	position:absolute; inset:0; width:100%; height:100%;
}
.page-template-template-brand-activations-php .brand-activations__launch .editorial__photo:after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(90deg, var(--bg) 0%, transparent 18%);
}
@media (max-width:820px){
	.page-template-template-brand-activations-php .brand-activations__launch .editorial__photo{ height:320px; }
}

/* ---- Let's Create Something People Want to Walk Towards — closing CTA: copy only, no photo (the shared .editorial--copy-only layout). */
/* ---- Creative Ideas. Built to Work. — two columns, no photo: the copy takes the wide column and the checklist sits beside it. */
.page-template-template-brand-activations-php .brand-activations__creative{
	grid-template-columns:minmax(0,9fr) minmax(0,4fr); align-items:center;
}
.page-template-template-brand-activations-php .brand-activations__creative-checklist{ align-self:center; }
.page-template-template-brand-activations-php .brand-activations__creative-checklist .highlights{ margin-top:0; }
/* The remaining small eyebrows on this page go to 15px too (the bm-sub-head ones come from style.css). */
.page-template-template-brand-activations-php .brand-activations__work-with-intro > .eyebrow,
.page-template-template-brand-activations-php .daypart .section-head > .eyebrow,
.page-template-template-brand-activations-php .brand-activations__closing .eyebrow{ font-size:15px; }
/* Green logo chevrons instead of ticks, same as the other lists (.sus-lower__list, the bar pages' lists). */
.page-template-template-brand-activations-php .brand-activations__creative-checklist ul.highlights li::before{
	top:.42em; width:14px; height:14px;
	-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;
}
@media (max-width:900px){
	.page-template-template-brand-activations-php .brand-activations__creative{ grid-template-columns:minmax(0,1fr); }
}
/* "One Campaign / More Than One Serve" heading: 38.4px. */
body.page-template-template-brand-activations-php .daypart .section-head > h2,
body.page-template-template-brand-activations-php .daypart .section-head > h2 b{ font-size:38.4px; }
/* Closing CTA: 50/50 — eyebrow + heading (38.4px) on the left, copy and button on the right. */
body.page-template-template-brand-activations-php .brand-activations__closing{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
body.page-template-template-brand-activations-php .brand-activations__closing h2,
body.page-template-template-brand-activations-php .brand-activations__closing h2 b{ font-size:38.4px; }
@media (max-width:820px){ body.page-template-template-brand-activations-php .brand-activations__closing{ grid-template-columns:minmax(0,1fr); } }
/* Closing CTA: the last line and the button share a row, button pushed to the far right. */
body.page-template-template-brand-activations-php .brand-activations__closing-foot{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
body.page-template-template-brand-activations-php .brand-activations__closing-foot > p,
body.page-template-template-brand-activations-php .brand-activations__closing-foot .hero-cta{ margin:0; }
@media (max-width:480px){ body.page-template-template-brand-activations-php .brand-activations__closing-foot{ flex-wrap:wrap; } }

/* "Creative enough to get noticed" checklist ("Bespoke concepts and themed bars" …): white text, same font and size as before. */
.page-template-template-brand-activations-php .brand-activations__creative-checklist .highlights li{ color:var(--ink); }

/* "Start with the Why" and the three cards below it are one section (.brand-activations__intro): 30px top and bottom on the section,
   none on the two blocks inside it, with 40px between them. */
.page-template-template-brand-activations-php .brand-activations__intro{ padding-top:30px; padding-bottom:30px; }
.page-template-template-brand-activations-php .brand-activations__intro .brand-activations__why,
.page-template-template-brand-activations-php .brand-activations__intro .brand-activations__trio{ padding-top:0; padding-bottom:0; }
.page-template-template-brand-activations-php .brand-activations__intro .brand-activations__trio{ margin-top:40px; }

/* "New Product. New Campaign…" photo: no grey 1px outline (the sitewide .hero-art frame). */
.page-template-template-brand-activations-php .brand-activations__launch .editorial__photo{ border:0; }

/* "Stop. Discover. Take Part. / Start a Conversation. Stay Longer. Try Something New." — two left-aligned rows of three phrases with a green dot
   between them (replaces the one-row strip with vertical dividers). Wide screens: the strip never widens the heading column (width:0 + min-width:100%). */
.page-template-template-brand-activations-php .brand-activations__why-tags{ display:block; margin-top:28px; }
.page-template-template-brand-activations-php .brand-activations__why-row{ display:flex; flex-wrap:wrap; align-items:center; column-gap:22px; row-gap:6px; }
.page-template-template-brand-activations-php .brand-activations__why-row + .brand-activations__why-row{ margin-top:14px; }
.page-template-template-brand-activations-php .brand-activations__why-row span{ text-align:left; white-space:nowrap; border:0; padding:0; }
.page-template-template-brand-activations-php .brand-activations__why-row i{ display:block; flex:0 0 auto; width:8px; height:8px; margin:0; border-radius:50%; background:var(--accent); }
@media (min-width:1101px){
	.page-template-template-brand-activations-php .brand-activations__why-tags{ width:0; min-width:100%; }
	.page-template-template-brand-activations-php .brand-activations__why-row{ flex-wrap:nowrap; }
}
@media (max-width:640px){
	.page-template-template-brand-activations-php .brand-activations__why-row{ column-gap:14px; }
	.page-template-template-brand-activations-php .brand-activations__why-row span{ white-space:normal; }
}

/* Green dots lined up: both rows share the same five columns (text / dot / text / dot / text), so each dot sits directly above the one below. */
.page-template-template-brand-activations-php .brand-activations__why-tags{ display:grid; grid-template-columns:max-content 8px max-content 8px max-content; justify-content:start; column-gap:22px; row-gap:14px; align-items:center; }
.page-template-template-brand-activations-php .brand-activations__why-row{ display:contents; }
.page-template-template-brand-activations-php .brand-activations__why-row + .brand-activations__why-row{ margin-top:0; }
@media (max-width:640px){
	.page-template-template-brand-activations-php .brand-activations__why-tags{ grid-template-columns:minmax(0,auto) 8px minmax(0,auto) 8px minmax(0,auto); column-gap:12px; }
}