/* ============================================================
   VENTURE CAFÉ 3.0 — PAGE-BUILDER BLOCK LAYOUT
   Layout/scaffolding for the custom builder blocks, on top of the
   design tokens in site.css. Section backgrounds, grids, sliders,
   media cards. Component look comes from the design system classes
   (.vc-card, .vc-btn, .vc-eyebrow, .vc-bigstat, etc.).
   ============================================================ */

/* ---- Section background variants (ACF `background` select) ---- */
.vc-block--ink   { background: var(--vc-ink);        color: #fff; }
.vc-block--dark  { background: #232323;              color: #fff; }
.vc-block--warm  { background: var(--vc-paper-warm); }
.vc-block--accent { background: var(--vc-primary); color: var(--vc-ink); }
/* Soft accent: a 15% accent tint on white (opaque, not transparent) with regular
   dark text. It is a separate class from --accent on purpose, so the accent dots
   /eyebrows keep their default full-strength green (like a light-grey surface). */
.vc-block--accent-soft { background: #eef6da; background: color-mix(in srgb, var(--vc-primary) 15%, #fff); color: var(--vc-ink); }
/* On a primary-accent surface the little accent dots would vanish → use the
   secondary. Kept narrow (just the dots), and reset inside nested non-accent
   surfaces (e.g. a white column in an accent columns block) so those stay green. */
.vc-block--accent .vc-eyebrow .dot,
.vc-surface--accent .vc-eyebrow .dot,
.vc-block--accent .vc-amenity .dot,
.vc-surface--accent .vc-amenity .dot { background: var(--vc-secondary); }
/* RTE/WYSIWYG eyebrows draw their dot as a ::before (not a .dot span), so recolour
   that on accent too — otherwise it's green-on-green (invisible). */
.vc-block--accent .vc-rte .vc-eyebrow::before,
.vc-surface--accent .vc-rte .vc-eyebrow::before,
.vc-block--accent .vc-prose .vc-eyebrow::before,
.vc-surface--accent .vc-prose .vc-eyebrow::before { background: var(--vc-secondary); }
.vc-surface--paper .vc-eyebrow .dot,
.vc-surface--warm .vc-eyebrow .dot,
.vc-surface--ink .vc-eyebrow .dot,
.vc-surface--dark .vc-eyebrow .dot,
.vc-surface--paper .vc-amenity .dot,
.vc-surface--warm .vc-amenity .dot,
.vc-surface--ink .vc-amenity .dot,
.vc-surface--dark .vc-amenity .dot { background: var(--vc-green); }
.vc-block--shape { background: var(--vc-paper-warm); position: relative; overflow: hidden; }

/* ---- Code-first two-tone accent icons (VC_Media_Icons) ----
   Each inlined icon has two parts:
     • body paths (no fill) = currentColor → they inherit the section text colour,
       so the body is dark on light sections and white on dark ones automatically.
     • highlight paths (.vc-i-accent) = the accent (--vc-primary), which stays put
       on both light and dark sections.
   Third case: on an accent-STRONG surface the accent would vanish against itself,
   so the whole icon (body + highlight) goes white. Size via font-size (1em). */
.vc-icon              { display: inline-flex; line-height: 0; }
.vc-icon svg          { width: 1em; height: 1em; fill: currentColor; }
.vc-icon .vc-i-accent { fill: var(--vc-primary); }
.vc-icon--sm { font-size: 20px; }
.vc-icon--md { font-size: 32px; }
.vc-icon--lg { font-size: 48px; }
/* Accent-strong surface → whole icon white. */
.vc-block--accent   .vc-icon,
.vc-surface--accent .vc-icon              { color: #fff; }
.vc-block--accent   .vc-icon .vc-i-accent,
.vc-surface--accent .vc-icon .vc-i-accent { fill: #fff; }
/* Nested LIGHT surface inside a dark/accent section (e.g. a white .vc-card in a
   launchpad on a dark background, or a paper/warm column): the icon body would
   otherwise inherit the section's white text and disappear on the white surface.
   Pin it back to the light-surface treatment — body ink, highlight accent —
   mirroring the per-element .vc-card text resets already in this file. */
.vc-block--ink    .vc-card:not(.vc-card-ink) .vc-icon,
.vc-block--dark   .vc-card:not(.vc-card-ink) .vc-icon,
.vc-block--accent .vc-card:not(.vc-card-ink) .vc-icon,
.vc-surface--paper .vc-icon,
.vc-surface--warm  .vc-icon { color: var(--vc-ink); }
.vc-block--accent .vc-card:not(.vc-card-ink) .vc-icon .vc-i-accent,
.vc-surface--paper .vc-icon .vc-i-accent,
.vc-surface--warm  .vc-icon .vc-i-accent { fill: var(--vc-primary); }
/* Escape hatch: force the body white regardless of section. */
.vc-icon--invert { color: #fff; }
.vc-block--ink .vc-section-title,
.vc-block--ink .vc-h2,
.vc-block--ink .vc-h3,
.vc-block--dark .vc-section-title,
.vc-block--dark .vc-h2,
.vc-block--dark .vc-h3 { color: #fff; }
.vc-block--ink .vc-lead,
.vc-block--dark .vc-lead { color: rgba(255,255,255,0.82); }
.vc-block--ink .vc-body,
.vc-block--dark .vc-body { color: rgba(255,255,255,0.78); }
.vc-block--ink .vc-eyebrow,
.vc-block--dark .vc-eyebrow { color: rgba(255,255,255,0.6); }

/* Cards keep a white surface even inside a dark/ink block, so their text must
   NOT follow the block's light-on-dark flip above (that gave white-on-white,
   e.g. the launchpad tiles). Re-assert the normal ink colours within a card. */
.vc-block--ink .vc-card:not(.vc-card-ink) .vc-section-title,
.vc-block--dark .vc-card:not(.vc-card-ink) .vc-section-title,
.vc-block--ink .vc-card:not(.vc-card-ink) .vc-h2,
.vc-block--dark .vc-card:not(.vc-card-ink) .vc-h2,
.vc-block--ink .vc-card:not(.vc-card-ink) .vc-h3,
.vc-block--dark .vc-card:not(.vc-card-ink) .vc-h3 { color: var(--vc-ink); }
.vc-block--ink .vc-card:not(.vc-card-ink) .vc-lead,
.vc-block--dark .vc-card:not(.vc-card-ink) .vc-lead { color: var(--vc-ink-soft); }
.vc-block--ink .vc-card:not(.vc-card-ink) .vc-body,
.vc-block--dark .vc-card:not(.vc-card-ink) .vc-body { color: var(--vc-ink-soft); }
.vc-block--ink .vc-card:not(.vc-card-ink) .vc-eyebrow,
.vc-block--dark .vc-card:not(.vc-card-ink) .vc-eyebrow { color: var(--vc-mute); }

/* Strong-accent surface: the block head must read at full contrast (white), like
   the ink surface — dark text on a saturated accent is too muddy. Scoped to the
   block head so the white cards below (e.g. launchpad tiles) keep their dark
   text; the eyebrow dot stays the secondary accent (set above). */
.vc-block--accent .vc-block-head .vc-section-title,
.vc-block--accent .vc-block-head .vc-h2,
.vc-block--accent .vc-block-head .vc-h3 { color: #fff; }
.vc-block--accent .vc-block-head .vc-lead,
.vc-block--accent .vc-block-head .vc-body { color: rgba(255,255,255,0.9); }
.vc-block--accent .vc-block-head .vc-eyebrow { color: rgba(255,255,255,0.85); }

.vc-block-head { margin-bottom: clamp(24px, 3vw, 40px); }

/* Ghost buttons on dark surfaces (banner hero / dark sections) → light text+border */
.vc-arrowhero .vc-btn-ghost,
.vc-block--ink .vc-btn-ghost,
.vc-block--dark .vc-btn-ghost,
.vc-btn-ghost.is-on-dark { color: #fff; border-color: rgba(255,255,255,0.55); }
.vc-arrowhero .vc-btn-ghost:hover,
.vc-block--ink .vc-btn-ghost:hover,
.vc-block--dark .vc-btn-ghost:hover,
.vc-btn-ghost.is-on-dark:hover { background: #fff; color: var(--vc-ink); border-color: #fff; }

/* ---- Launchpad tiles — quick-access cards that must read as clickable ---- */
.vc-launch-tile { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
/* 40px whether it's a raster <img> (width/height) or an inlined .vc-icon (font-size → 1em svg). */
.vc-launch-icon { width: 40px; height: 40px; object-fit: contain; font-size: 40px; }
.vc-launch-title { font-size: 18px; }
.vc-launch-desc { color: var(--vc-ink-soft); font-size: 14px; }

/* Linked tiles get the full affordance: pointer, hover lift, accent border, and a
   corner arrow badge on the right that signals the whole box navigates. */
.vc-launch-tile--link {
	position: relative;
	cursor: pointer;
	padding-right: 74px;            /* room for the corner arrow badge */
	border-color: color-mix(in srgb, var(--vc-primary) 32%, var(--vc-rule));
	transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.vc-launch-tile--link:hover,
.vc-launch-tile--link:focus-visible {
	transform: translateY(-4px);
	border-color: var(--vc-primary);
	box-shadow: var(--vc-shadow-md);
	outline: none;
}
.vc-launch-arrow {
	position: absolute;
	top: 22px;
	right: 22px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--vc-primary-soft);
	color: var(--vc-primary-deep);
	transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.vc-launch-arrow svg { display: block; }
.vc-launch-tile--link:hover .vc-launch-arrow,
.vc-launch-tile--link:focus-visible .vc-launch-arrow {
	background: var(--vc-primary);
	color: var(--vc-ink);
	transform: translate(2px, -2px);   /* nudge toward the arrow's ↗ direction */
}

/* ---- Generic responsive grids ---- */
.vc-grid { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.vc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .vc-grid-3, .vc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .vc-grid-2, .vc-grid-3, .vc-grid-4 { grid-template-columns: 1fr; } }

/* ---- Campaign signup: two-column thank-you + gated file download ---- */
.vc-campaign-thankyou { max-width: 920px; margin: 0 auto; }
.vc-campaign-dl { text-align: center; padding: clamp(22px, 3.5vw, 38px); border: 1.5px solid rgba(0,0,0,0.12); border-radius: var(--vc-radius-md); background: rgba(0,0,0,0.02); }
.vc-block--ink .vc-campaign-dl, .vc-block--dark .vc-campaign-dl { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); }

/* ---- Archive grid pagination (archive_grid block) ---- */
.vc-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(32px, 4vw, 52px); }
.vc-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 12px;
	border: 1.5px solid var(--vc-rule); border-radius: var(--vc-radius-pill);
	font-family: var(--vc-font-mono); font-size: 13px; color: var(--vc-ink);
	text-decoration: none; transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.vc-pagination a.page-numbers:hover,
.vc-pagination button.page-numbers:not(:disabled):hover { border-color: var(--vc-ink); }
/* JS-built cardslider controls are <button>s — reset the native chrome so they
   match the archive's <a>/<span> pagination pills. */
.vc-pagination button.page-numbers { background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.vc-pagination button.page-numbers:disabled { opacity: 0.4; cursor: default; }
.vc-pagination .page-numbers.current { background: var(--vc-ink); border-color: var(--vc-ink); color: var(--vc-paper); }
.vc-pagination .page-numbers.dots { border-color: transparent; }
/* On dark blocks the controls invert to read on the ink background. */
.vc-block--ink .vc-pagination .page-numbers { border-color: rgba(255,255,255,0.24); color: #fff; }
.vc-block--ink .vc-pagination a.page-numbers:hover { border-color: #fff; }
.vc-block--ink .vc-pagination .page-numbers.current { background: #fff; color: var(--vc-ink); }

/* Text block: columns are set via --tcols (a custom property) instead of an inline
   grid-template-columns, so this media query can actually collapse them to one on
   phones — an inline grid-template-columns would win over any stylesheet rule. */
.vc-text-cols { display: grid; grid-template-columns: var(--tcols, 1fr); gap: clamp(24px, 4vw, 56px); }
@media (max-width: 600px) { .vc-text-cols { grid-template-columns: 1fr; } }

/* Stats (classic big-number grid): on phones, one centered column with larger
   numbers so the figures read as the hero of the section. */
@media (max-width: 600px) {
	.vc-statgrid { grid-template-columns: 1fr; gap: 30px; }
	.vc-statgrid .vc-stat { text-align: center; }
	.vc-statgrid .vc-stat-num { font-size: 46px; }
}
/* cardslider — minimal cells are denser (narrower) in the horizontal scroller */
.block-cardslider--minimal .vc-hscroll { grid-auto-columns: minmax(210px, 24%); }

/* ---- Horizontal sliders (scroll-snap, no JS required) ---- */
.vc-hscroll {
	display: grid; grid-auto-flow: column;
	grid-auto-columns: minmax(280px, 32%);
	gap: clamp(16px, 2vw, 24px);
	overflow-x: auto; scroll-snap-type: x mandatory;
	/* top/bottom headroom so a card's hover-lift isn't clipped by overflow-y */
	padding-block: 10px; margin: 0 calc(var(--vc-pad-x) * -1); padding-inline: var(--vc-pad-x);
	scrollbar-width: thin; cursor: grab;
}
.vc-hscroll > * { scroll-snap-align: start; }
.vc-hscroll.is-grabbing { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.vc-hscroll.is-grabbing a, .vc-hscroll.is-grabbing img { pointer-events: none; }

/* Testimonial card: subtle border that stays put on hover */
.vc-tcard { border: 1px solid rgba(255,255,255,0.14); }
/* WYSIWYG quote: tidy paragraph spacing + brighter highlight on the dark card */
.vc-tcard blockquote p { margin: 0 0 0.5em; }
.vc-tcard blockquote p:last-child { margin-bottom: 0; }
.vc-tcard .vc-hl::after { opacity: 0.8; }
a.who { text-decoration: none; color: inherit; cursor: pointer; }
a.who:hover .n { color: var(--vc-green); }
/* Quote + card sliders: extra breathing room on the left so the first card / drag
   start isn't flush against the edge (scroll-padding keeps the gap when snapped).
   Not the carousel — those stay full-width. */
.block-textslider .vc-hscroll,
.block-cardslider .vc-hscroll {
	padding-left: calc(var(--vc-pad-x) + clamp(12px, 2vw, 28px));
	scroll-padding-left: calc(var(--vc-pad-x) + clamp(12px, 2vw, 28px));
}
@media (max-width: 700px) { .vc-hscroll { grid-auto-columns: 84%; } }

/* One or two quotes cluster at the left of the scroller with dead space to the
   right. Lay those counts out statically (no scroll) so they fill the width. */
.block-textslider .vc-hscroll.vc-tslider--1,
.block-textslider .vc-hscroll.vc-tslider--2 {
	grid-auto-flow: row; overflow: visible; scroll-snap-type: none; cursor: auto;
	margin-inline: 0; padding-inline: 0; padding-left: 0; scroll-padding-left: 0;
}
/* One quote: a single centred, prominent pull-quote. */
.block-textslider .vc-hscroll.vc-tslider--1 {
	grid-template-columns: minmax(0, 720px); justify-content: center; text-align: center;
}
.block-textslider .vc-tslider--1 .vc-tcard { align-items: center; padding: clamp(34px, 4.5vw, 56px); }
.block-textslider .vc-tslider--1 .vc-tcard .qmark { font-size: 84px; }
.block-textslider .vc-tslider--1 .vc-tcard blockquote { font-size: clamp(21px, 2.4vw, 30px); max-width: 32ch; }
.block-textslider .vc-tslider--1 .vc-tcard .who { justify-content: center; }
/* Two quotes: fill the full width, side by side (stack on small screens). */
.block-textslider .vc-hscroll.vc-tslider--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .block-textslider .vc-hscroll.vc-tslider--2 { grid-template-columns: 1fr; } }

/* ---- Carousel — banner style (45° wedge panel + side image) ---- */
.block-cbanner {
	/* the site grid's left content edge (matches .vc-container) */
	--cb-edge: max(var(--vc-pad-x), calc((100vw - var(--vc-maxw)) / 2 + var(--vc-pad-x)));
	--cb-content: clamp(280px, 38vw, 460px);
	--cb-gap: clamp(20px, 2.5vw, 36px);
}
.vc-cbanner-viewport { position: relative; }
.vc-cbanner-track:not(.vc-hscroll) { display: block; }
/* multiple slides → full-width scroll-snap slider.
   display:grid is restated so it wins over .vc-cbanner-track's block rule.
   align-items:stretch makes every slide the height of the tallest one. */
.vc-cbanner-track.vc-hscroll { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; align-items: stretch; gap: 0; margin: 0; padding: 0; }
.vc-cbanner-track.is-grabbing { scroll-snap-type: none; cursor: grabbing; }
/* slide height grows to its content (the in-flow .vc-cbanner-content); a floor
   keeps short slides from collapsing. No fixed height → text/button never clip. */
.vc-cbanner-slide { position: relative; overflow: hidden; min-height: clamp(360px, 46vh, 520px); background: var(--vc-primary-soft); scroll-snap-align: start; display: flex; align-items: center; }
/* crumb sits on the slide (top-left, on the grid line) */
.vc-cbanner-crumb { position: absolute; z-index: 5; top: clamp(18px, 3.4vh, 38px); left: var(--cb-edge); margin: 0; pointer-events: none; }
.vc-cbanner-media { position: absolute; inset: 0; z-index: 0; }
.vc-cbanner-media img { width: 100%; height: 100%; object-fit: cover; object-position: center right; }
/* solid coloured area: full-bleed on the left, ending just past the text, then a
   45° point. aspect-ratio:1/2 makes the triangle exactly 45° at any height. */
.vc-cbanner-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--cb-edge) + var(--cb-content) + var(--cb-gap)); z-index: 2; background: var(--vc-white); }
.vc-cbanner-fill::after { content: ""; position: absolute; left: 100%; top: 0; height: 100%; aspect-ratio: 1 / 2; background: inherit; clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* second 45° triangle, shifted toward the image, at 30% opacity */
.vc-cbanner-wedge--ghost { position: absolute; top: 0; left: calc(var(--cb-edge) + var(--cb-content) + var(--cb-gap)); height: 100%; aspect-ratio: 1 / 2; z-index: 1; background: var(--vc-white); opacity: 0.3; clip-path: polygon(0 0, 100% 50%, 0 100%); margin-left: clamp(40px, 8vw, 150px); }
/* per-background colours for the wedge shapes */
.block-cbanner.vc-block--ink .vc-cbanner-fill, .block-cbanner.vc-block--ink .vc-cbanner-wedge--ghost { background: var(--vc-ink); }
.block-cbanner.vc-block--accent .vc-cbanner-fill, .block-cbanner.vc-block--accent .vc-cbanner-wedge--ghost { background: var(--vc-primary); }
.block-cbanner.vc-block--accent-soft .vc-cbanner-fill, .block-cbanner.vc-block--accent-soft .vc-cbanner-wedge--ghost { background: #eef6da; background: color-mix(in srgb, var(--vc-primary) 15%, #fff); }
/* content: in-flow (so the slide grows to fit it), left-aligned to the site grid,
   vertically centred by the slide's flex, and capped before the wedge. */
.vc-cbanner-content { position: relative; z-index: 3; margin-left: var(--cb-edge); width: var(--cb-content); padding-block: clamp(54px, 8vh, 116px); }
/* prev/next */
.vc-cbanner-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,0.92); color: var(--vc-ink); font-size: 24px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: var(--vc-shadow-sm); transition: background 0.15s, transform 0.15s; }
.vc-cbanner-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.vc-cbanner-nav.prev { left: 16px; }
.vc-cbanner-nav.next { right: 16px; }
@media (max-width: 760px) {
	/* stack: image on top, solid content panel below (no wedges) */
	.vc-cbanner-slide { min-height: 0; display: block; background: var(--vc-white); }
	.block-cbanner.vc-block--ink .vc-cbanner-slide { background: var(--vc-ink); }
	.block-cbanner.vc-block--accent .vc-cbanner-slide { background: var(--vc-primary); }
	.block-cbanner.vc-block--accent-soft .vc-cbanner-slide { background: #eef6da; background: color-mix(in srgb, var(--vc-primary) 15%, #fff); }
	.vc-cbanner-media { position: relative; height: clamp(180px, 42vw, 260px); }
	.vc-cbanner-fill, .vc-cbanner-wedge--ghost { display: none; }
	.vc-cbanner-content { margin-left: 0; width: auto; padding: 26px var(--vc-pad-x); }
	.vc-cbanner-crumb { position: static; margin: 22px var(--vc-pad-x) 0; }
	.vc-cbanner-nav { top: auto; bottom: 10px; transform: none; width: 40px; height: 40px; }
	.vc-cbanner-nav:hover { transform: scale(1.06); }
}

/* ---- Media card (used by carousels / card sliders / grids) ---- */
/* always a light card → pin dark text so it never inherits a dark section's white */
.vc-mediacard { display: flex; flex-direction: column; background: var(--vc-paper); color: var(--vc-ink); border: 1px solid var(--vc-rule); border-radius: var(--vc-radius-lg); overflow: hidden; box-shadow: var(--vc-shadow-sm); }
.vc-mediacard .vc-mediacard-img { aspect-ratio: 16 / 10; background: var(--vc-paper-warm); overflow: hidden; }
.vc-mediacard .vc-mediacard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-mediacard .vc-mediacard-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vc-mediacard h3 { font-size: 18px; line-height: 1.2; margin: 0; }
.vc-mediacard .meta { font-family: var(--vc-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vc-mute); }

/* ---- License ---- */
/* Editors can paste <img> logos (often wrapped in <a>) straight into the
   License block's Text field. The global `img { display:block }` rule — and any
   inline styles in the pasted markup — would stack them one per line. Making the
   text line a flex row forces every child (text, links, images) side-by-side,
   centred and wrapping, regardless of each element's own `display`. */
.block-license p { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.block-license p img { max-height: 60px; width: auto; margin: 0; }

/* ---- Banner 4 ---- */
.block-banner-4 .vc-banner4-eyebrow { color: var(--vc-green); }

/* WHERE / WHEN / FORMAT facts strip under the intro. */
.vc-banner4-facts { display: flex; flex-wrap: wrap; gap: clamp(22px, 4vw, 56px); margin: 4px 0 0; }
.vc-banner4-fact dt { font-family: var(--vc-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 6px; }
.vc-banner4-fact dd { margin: 0; font-family: var(--vc-font-display); font-weight: 700; font-size: clamp(15px, 1.4vw, 19px); color: #fff; }

/* Right panel: nested page-builder blocks stacked as cards. */
.vc-banner4-panel > .vc-pblock + .vc-pblock { margin-top: 16px; }

/* A campaign_signup nested in the panel renders as a solid, left-aligned card with
   stacked full-width fields (set the nested block's Background to "White"). */
.vc-banner4-panel .block-campaign-signup { padding: 0; background: transparent; }
.vc-banner4-panel .block-campaign-signup > .vc-container { padding: 0; max-width: none; }
.vc-banner4-panel .vc-campaign-form { max-width: none !important; margin: 0 !important; text-align: left !important; background: var(--vc-paper); border-radius: var(--vc-radius-lg); box-shadow: var(--vc-shadow-lg); padding: clamp(24px, 3vw, 40px); color: var(--vc-ink); }
.vc-banner4-panel .vc-campaign-form .vc-eyebrow { justify-content: flex-start !important; }
/* The card is always light, but the campaign block emits white inline colours
   under its default (ink) scheme — force dark text so it's legible on the cream. */
.vc-banner4-panel .vc-campaign-form h2 { color: var(--vc-ink) !important; }
.vc-banner4-panel .vc-campaign-form .vc-lead { color: var(--vc-ink-soft) !important; }
.vc-banner4-panel .vc-news-consent { color: rgba(26, 29, 33, 0.72) !important; }
.vc-banner4-panel .vc-news-consent a { color: var(--vc-ink) !important; }
.vc-banner4-panel .vc-news-extra-field label { color: var(--vc-ink); }
.vc-banner4-panel .vc-news-form--full .vc-news-row { flex-direction: column; gap: 12px; background: transparent; border: 0; padding: 0; }
.vc-banner4-panel .vc-news-form--full .vc-news-row input { width: 100%; border: 1.5px solid var(--vc-rule); border-radius: var(--vc-radius-md); padding: 14px 16px; background: #fff; }
.vc-banner4-panel .vc-news-form--full .vc-news-row button { width: 100%; }

/* Campaign extra fields (Organization, "You are a…") — applies wherever the
   campaign block renders, not only inside Banner 4. */
.vc-news-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-bottom: 12px; }
.vc-news-extra-full { grid-column: 1 / -1; }
.vc-news-extra-field { display: flex; flex-direction: column; gap: 6px; }
.vc-news-extra-field label { font-family: var(--vc-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.vc-news-extra input, .vc-news-extra select { border: 1.5px solid var(--vc-ink); border-radius: var(--vc-radius-md); padding: 14px 16px; background: var(--vc-white); font-family: var(--vc-font-body); font-size: 15px; color: var(--vc-ink); outline: none; }
.vc-news-extra select { appearance: auto; }
@media (max-width: 520px) { .vc-news-extra { grid-template-columns: 1fr; } .vc-news-extra-half { grid-column: 1 / -1; } }

/* ---- Text grid ---- */
/* Typed alternative to the icon (e.g. "01") — a large accent numeral/label. */
.vc-textgrid-num { font-family: var(--vc-font-display); font-weight: 800; font-size: clamp(30px, 3vw, 42px); line-height: 1; letter-spacing: -0.01em; color: var(--vc-green); margin-bottom: 12px; }
/* Smaller mono accent line under an item title. */
.vc-textgrid-subtitle { font-family: var(--vc-font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vc-green); margin-top: 6px; }
/* Rich-text (WYSIWYG) item content — bold headers etc. read at body size. */
.vc-textgrid-body { font-size: 15px; }
.vc-textgrid-body p { color: var(--vc-ink-soft); margin: 0 0 8px; }
.vc-textgrid-body p:last-child { margin-bottom: 0; }
.vc-textgrid-body.vc-rte--on-dark p { color: rgba(255,255,255,0.78); }
/* Comma-separated tags rendered as pills under each item. */
.vc-textgrid-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* Stacked layout: full-width rows, number/title on the left, details on the right. */
.vc-textgrid-stack { display: flex; flex-direction: column; }
.vc-textgrid-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); padding: clamp(28px, 4vw, 48px) 0; border-top: 1px solid var(--vc-rule); align-items: start; }
.vc-block--ink .vc-textgrid-row, .vc-block--dark .vc-textgrid-row { border-color: rgba(255,255,255,0.13); }
.vc-textgrid-row-head { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.vc-textgrid-row-heading { min-width: 0; }
.block-textgrid--stacked .vc-textgrid-num { font-size: clamp(38px, 5vw, 64px); margin-bottom: 0; }
.vc-textgrid-row-head h3 { font-size: clamp(22px, 2.6vw, 32px); margin: 0; }
.vc-textgrid-row-head .vc-textgrid-subtitle { margin-top: 8px; }
.vc-textgrid-row-body { align-self: center; }
@media (max-width: 760px) { .vc-textgrid-row { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; } }

/* ---- Lineup (day strip + card grid) ---- */
/* Shared header: pill eyebrow + title + lead. Two columns on wide screens. */
.vc-lineup-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; margin-bottom: clamp(24px, 3vw, 40px); }
.vc-lineup-head .vc-lead { margin-top: 8px; }
@media (max-width: 720px) { .vc-lineup-head { grid-template-columns: 1fr; gap: 16px; } }

/* Day strip: a row of day cards; grows to fill on wide, scrolls on narrow. */
.vc-lineup-strip { display: flex; gap: clamp(12px, 1.4vw, 20px); overflow-x: auto; scrollbar-width: thin; padding-block: 4px; }
.vc-daycard { flex: 1 0 150px; min-width: 150px; text-align: center; padding: 24px 18px; text-decoration: none; color: var(--vc-ink); display: block; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
a.vc-daycard:hover { transform: translateY(-3px); box-shadow: var(--vc-shadow-md); }
.vc-daycard-wd { font-family: var(--vc-font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vc-mute); margin-bottom: 6px; }
.vc-daycard-d { font-family: var(--vc-font-display); font-weight: 800; font-size: clamp(34px, 3.4vw, 46px); line-height: 0.95; }
.vc-daycard-title { font-family: var(--vc-font-display); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: 0.02em; line-height: 1.25; margin-top: 12px; color: var(--vc-ink-soft); }
/* Highlighted (dark) day card. */
.vc-daycard.is-highlight { color: #fff; }
.vc-daycard.is-highlight .vc-daycard-wd { color: var(--vc-green); }
.vc-daycard.is-highlight .vc-daycard-title { color: rgba(255,255,255,0.82); }
.vc-daycard-wd .star { color: var(--vc-green); }

/* Card grid: a warm rounded panel wrapping the header + a grid of cards. */
.vc-lineup-panel { background: var(--vc-paper-warm); border-radius: var(--vc-radius-lg); padding: clamp(24px, 3vw, 48px); }
.vc-block--warm .vc-lineup-panel, .vc-block--ink .vc-lineup-panel, .vc-block--dark .vc-lineup-panel { background: rgba(0,0,0,0.03); }
.vc-block--ink .vc-lineup-panel, .vc-block--dark .vc-lineup-panel { background: rgba(255,255,255,0.05); }
.vc-lineup-card { text-decoration: none; color: var(--vc-ink); display: block; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
a.vc-lineup-card:hover { transform: translateY(-3px); border-color: var(--vc-ink); box-shadow: var(--vc-shadow-md); }
.vc-lineup-card h3 { font-size: 19px; margin: 0; }
.vc-lineup-card-meta { font-family: var(--vc-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vc-green-deep); margin-top: 10px; }

/* ---- Logo wall (partners) ---- */
.vc-logowall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px; align-items: center; }
.vc-logowall a, .vc-logowall span { display: flex; align-items: center; justify-content: center; padding: 18px; background: var(--vc-paper); border: 1px solid var(--vc-rule); border-radius: var(--vc-radius-md); }
.vc-logowall img { max-width: 100%; max-height: 56px; object-fit: contain; }
/* Partners block is centred: intro text, logo wall and CTAs */
.block-partners { text-align: center; }
.block-partners .vc-rte { margin-inline: auto; }
/* flex wrap (not the stretching auto-fill grid) so the logos — including a
   partial last row — are genuinely centred. */
.block-partners .vc-logowall { display: flex; flex-wrap: wrap; justify-content: center; }
.block-partners .vc-logowall > a, .block-partners .vc-logowall > span { flex: 0 1 170px; }

/* Partners "Compact animation": small left label + right-to-left logo marquee. */
.block-partners--compact { text-align: left; }
.vc-logomarquee-row { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); }
.vc-logomarquee-label { flex: none; font-family: var(--vc-font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(12px, 1.1vw, 15px); letter-spacing: 0.02em; line-height: 1.1; color: var(--vc-ink); }
/* viewport: hides overflow + soft-fades both edges so logos slide in/out (no hard line) */
.vc-logomarquee { position: relative; flex: 1; min-width: 0; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
/* track holds two identical sets; sliding -50% loops seamlessly. Pauses on hover. */
.vc-logomarquee-track { display: flex; width: max-content; animation: vc-marquee 16s linear infinite; }
.vc-logomarquee:hover .vc-logomarquee-track { animation-play-state: paused; }
.vc-logomarquee-set { display: flex; flex: none; align-items: center; }
.vc-logomarquee-item { display: inline-flex; align-items: center; justify-content: center; padding-inline: clamp(20px, 2.6vw, 46px); }
/* grayscale here (unlike the standard logo wall); a logo returns to colour on hover */
.vc-logomarquee-item img { max-height: 30px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.7; transition: filter 0.2s, opacity 0.2s; }
.vc-logomarquee-item:hover img { filter: grayscale(0); opacity: 1; }
/* Scroll left by exactly one set (the track holds --vc-marq-copies identical sets),
   so it loops seamlessly no matter how many copies were rendered to fill the strip. */
@keyframes vc-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% / var(--vc-marq-copies, 2))); } }
@media (prefers-reduced-motion: reduce) { .vc-logomarquee-track { animation: none; } }
@media (max-width: 600px) {
	.vc-logomarquee-row { flex-direction: column; align-items: flex-start; gap: 14px; }
	.vc-logomarquee { width: 100%; }
}
.block-partners .vc-flex { justify-content: center; }

/* ---- Stat row ---- */
.vc-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(20px, 3vw, 44px); }
.vc-stat .vc-stat-num { font-family: var(--vc-font-display); font-weight: 800; font-size: clamp(34px, 5vw, 54px); line-height: 1; letter-spacing: -0.02em; color: var(--vc-green-deep); }
.vc-block--ink .vc-stat .vc-stat-num, .vc-block--dark .vc-stat .vc-stat-num { color: var(--vc-green); }
.vc-stat .vc-stat-label { margin-top: 8px; font-size: 14px; color: var(--vc-ink-soft); }
.vc-block--ink .vc-stat .vc-stat-label, .vc-block--dark .vc-stat .vc-stat-label { color: rgba(255,255,255,0.72); }

/* Stats on a strong-accent surface → white text. The block draws its own markup
   (split layout) instead of the shared .vc-block-head, so the accent block-head
   white-text rules don't reach it; mirror the dark-surface treatment here for both
   the split and classic layouts. (Accent-soft stays dark text — it's a light tint.) */
.block-stats.vc-block--accent .vc-h2,
.block-stats.vc-block--accent .vc-stat-row .val,
.block-stats.vc-block--accent .vc-stat .vc-stat-num { color: #fff; }
.block-stats.vc-block--accent .vc-eyebrow,
.block-stats.vc-block--accent .vc-stat-row .lbl,
.block-stats.vc-block--accent .vc-stat .vc-stat-label { color: rgba(255,255,255,0.85); }
.block-stats.vc-block--accent .vc-lead { color: rgba(255,255,255,0.9); }
.block-stats.vc-block--accent .vc-stat-row { border-color: rgba(255,255,255,0.28); }

/* ---- Countdown ---- */
.vc-countbox { display: inline-flex; gap: 14px; }
.vc-countbox .unit { text-align: center; min-width: 64px; background: var(--vc-paper); color: var(--vc-ink); border: 1px solid var(--vc-rule); border-radius: var(--vc-radius-md); padding: 12px 10px; }
.vc-countbox .unit b { display: block; font-family: var(--vc-font-display); font-weight: 800; font-size: 30px; line-height: 1; }
.vc-countbox .unit span { font-family: var(--vc-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vc-mute); }
/* Bare countdown (no tiles) — used inside the next-event card */
.vc-countbox--bare { gap: clamp(6px, 1.2vw, 14px); }
.vc-countbox--bare .unit { min-width: 0; background: none; border: 0; border-radius: 0; padding: 0; }
.vc-countbox--bare .unit b { font-size: clamp(24px, 3.2vw, 38px); }
.vc-countbox--bare .unit span { font-size: 9.5px; margin-top: 3px; }
/* Countdown block: one big, centred countdown */
.block-countdown { text-align: center; }
.vc-countbox--lg { gap: clamp(10px, 1.6vw, 22px); }
.vc-countbox--lg .unit { min-width: clamp(82px, 12vw, 150px); padding: clamp(16px, 2vw, 30px) clamp(12px, 1.4vw, 22px); }
.vc-countbox--lg .unit b { font-size: clamp(42px, 7vw, 96px); }
.vc-countbox--lg .unit span { font-size: clamp(10px, 0.9vw, 13px); margin-top: 8px; }

/* ---- Profile card ---- */
.vc-profilecard { display: grid; grid-template-columns: 200px 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.vc-profilecard .vc-profilecard-photo { aspect-ratio: 1; border-radius: var(--vc-radius-lg); overflow: hidden; background: var(--vc-paper-warm); }
.vc-profilecard .vc-profilecard-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .vc-profilecard { grid-template-columns: 1fr; } }

/* ---- Banner 2 (banner-1 arrow-chevron hero, single centered column) ---- */
.block-banner-2-inner { max-width: 760px; margin-inline: auto; align-items: center; text-align: center; }

/* (legacy lighter hero variant kept for any older content still using it) */
.vc-block-hero2 { position: relative; background: var(--vc-ink); color: #fff; overflow: hidden; }
.vc-block-hero2 .vc-block-hero2-media { position: absolute; inset: 0; z-index: 0; opacity: 0.5; }
.vc-block-hero2 .vc-block-hero2-media img, .vc-block-hero2 .vc-block-hero2-media video { width: 100%; height: 100%; object-fit: cover; }
.vc-block-hero2 .vc-container { position: relative; z-index: 1; }

/* ---- Banner 3 (focus-area style: black chevron hero, green divider, photo band) ---- */
.block-banner-3-hero { background: #0c0e11; }
/* no photo sits behind the text here, so the chevrons read as faint LIGHTER facets
   on the black field (instead of the darkening overlay used over media in .vc-arrowhero) */
.block-banner-3-hero .vc-arrow-top { background: linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.018) 68%, rgba(255,255,255,0) 100%); }
.block-banner-3-hero .vc-arrow-bottom { background: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.014) 76%, rgba(255,255,255,0) 100%); }
.block-banner-3-photo { border-top: 4px solid var(--vc-green); line-height: 0; }
.block-banner-3-photo img { display: block; width: 100%; height: clamp(320px, 46vh, 560px); object-fit: cover; }
/* crumb: small, grey, no dot (the green-dot eyebrow is the separate `caption`). */
.block-banner-3-crumb { font-family: var(--vc-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
/* keep the rich-text body fully white on the black hero. */
.block-banner-3 .vc-rte--on-dark { color: #fff; }
/* the content H1 is the hero title → display-sized. */
.block-banner-3 .vc-rte h1 { font-size: clamp(34px, 5.4vw, 74px); margin-bottom: 0.2em; }

/* ---- Job list ---- */
/* Cards are always white, so keep the ghost "Apply" button dark even when the
   section sits on a dark background (otherwise the on-dark rules turn it white-on-white). */
.block-job-list .vc-card .vc-btn-ghost { color: var(--vc-ink); border-color: var(--vc-ink); }
.block-job-list .vc-card .vc-btn-ghost:hover { background: var(--vc-ink); color: var(--vc-paper); border-color: var(--vc-ink); }

/* ---- Tag cloud ---- */
.vc-tagcloud { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- Gallery (masonry) ---- */
/* Fixed-height frames; photos are cropped to cover them so the rounded corners
   stay clean. (columns:auto neutralises the old masonry declaration.) */
.vc-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 14px; columns: auto; }
@media (max-width: 900px) { .vc-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .vc-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .vc-gallery { grid-template-columns: 1fr; } }
.vc-gallery-item {
	display: block; position: relative; margin: 0;
	border-radius: var(--vc-radius-md); overflow: hidden;
	cursor: zoom-in; background: var(--vc-paper-warm); box-shadow: var(--vc-shadow-sm);
}
.vc-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s cubic-bezier(.2,.7,.2,1); }
.vc-gallery-item:hover img { transform: scale(1.04); }
.vc-gallery-item:focus-visible { outline: 3px solid var(--vc-secondary); outline-offset: 2px; }
.vc-gallery-cap {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 12px;
	color: #fff; font-size: 13px; line-height: 1.4;
	background: linear-gradient(transparent, rgba(10,12,15,0.78));
	opacity: 0; transform: translateY(6px); transition: opacity 0.2s, transform 0.2s;
}
.vc-gallery-item:hover .vc-gallery-cap { opacity: 1; transform: none; }

/* ---- Lightbox ---- */
.vc-lightbox {
	position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
	background: rgba(10,12,15,0.93); backdrop-filter: blur(4px); padding: clamp(16px, 4vw, 56px);
}
.vc-lightbox[hidden] { display: none; }
.vc-lightbox-fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vc-lightbox-fig img { max-width: min(100%, 1400px); max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.vc-lightbox-fig figcaption { color: rgba(255,255,255,0.86); font-size: 14px; text-align: center; max-width: 720px; }
.vc-lightbox-x { position: absolute; top: 18px; right: 20px; }
.vc-lightbox-x, .vc-lightbox-nav {
	appearance: none; border: 0; background: rgba(255,255,255,0.12); color: #fff;
	width: 46px; height: 46px; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.vc-lightbox-x:hover, .vc-lightbox-nav:hover { background: rgba(255,255,255,0.25); }
.vc-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.vc-lightbox-prev { left: clamp(10px, 3vw, 36px); }
.vc-lightbox-next { right: clamp(10px, 3vw, 36px); }
.vc-lightbox-count {
	position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
	color: rgba(255,255,255,0.7); font-family: var(--vc-font-mono); font-size: 12px; letter-spacing: 0.14em;
}
@media (prefers-reduced-motion: reduce) {
	.vc-gallery-item img, .vc-gallery-cap { transition: none; }
}

/* ============================================================
   FORMS (in builder blocks — native + Gravity / Contact Form 7)
   ============================================================ */
.vc-form label { display: block; font-family: var(--vc-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vc-ink); margin-bottom: 7px; font-weight: 600; }

.vc-form input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=file]),
.vc-form textarea,
.vc-form select {
	width: 100%; box-sizing: border-box;
	font-family: var(--vc-font-body); font-size: 15px; color: var(--vc-ink); line-height: 1.4;
	/* soft filled field that brightens to white on focus — a more modern look than a flat outline */
	background: var(--vc-paper-warm); border: 1.5px solid transparent; border-radius: 12px;
	padding: 14px 16px; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.vc-form textarea { min-height: 130px; resize: vertical; }
/* Selects get a chevron in a divided "dropdown zone" on the right, so they read
   as a menu rather than a plain input. Two background layers: the chevron + a
   thin vertical rule separating the zone. */
.vc-form select {
	appearance: none;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234a4e54' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"),
		linear-gradient(var(--vc-rule), var(--vc-rule));
	background-position: calc(100% - 17px) center, calc(100% - 44px) center;
	background-size: 14px 14px, 1.5px 60%;
	background-repeat: no-repeat, no-repeat;
	padding-right: 52px;
}
.vc-form--on-dark select {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"),
		linear-gradient(rgba(255,255,255,0.28), rgba(255,255,255,0.28));
}
.vc-form input:focus, .vc-form textarea:focus, .vc-form select:focus {
	outline: none; background: var(--vc-white); border-color: var(--vc-primary); box-shadow: 0 0 0 4px var(--vc-primary-soft);
}
.vc-form input:hover:not(:focus), .vc-form textarea:hover:not(:focus), .vc-form select:hover:not(:focus) { border-color: var(--vc-rule); }
.vc-form ::placeholder { color: var(--vc-mute); opacity: 1; }
.vc-form input[type=checkbox], .vc-form input[type=radio] { accent-color: var(--vc-primary); width: 1.15em; height: 1.15em; margin-right: 9px; vertical-align: -0.18em; cursor: pointer; }
/* Radio/checkbox OPTION labels are readable body text — the uppercase mono
   field-label style above otherwise makes each option almost illegible.
   Formidable classes and the generic :has() form are kept in separate rules so
   an engine without :has() still styles the Formidable options. */
.vc-form .frm_opt_container label,
.vc-form .frm_radio label,
.vc-form .frm_checkbox label {
	display: flex; align-items: center;
	font-family: var(--vc-font-body); font-size: 15px; font-weight: 400;
	letter-spacing: normal; text-transform: none; color: var(--vc-ink); margin-bottom: 0; cursor: pointer;
}
.vc-form label:has(> input[type=checkbox]),
.vc-form label:has(> input[type=radio]) {
	display: flex; align-items: center;
	font-family: var(--vc-font-body); font-size: 15px; font-weight: 400;
	letter-spacing: normal; text-transform: none; color: var(--vc-ink); margin-bottom: 0; cursor: pointer;
}
.vc-form--on-dark .frm_opt_container label,
.vc-form--on-dark .frm_radio label,
.vc-form--on-dark .frm_checkbox label { color: rgba(255,255,255,0.9); }
.vc-form--on-dark label:has(> input[type=checkbox]),
.vc-form--on-dark label:has(> input[type=radio]) { color: rgba(255,255,255,0.9); }

/* field spacing across plugins (Formidable = .frm_form_field).
   NOTE: we deliberately do NOT set display/flex/width on Formidable's field
   containers, so the column layout from its form designer is honored. */
.vc-form .gfield, .vc-form .wpforms-field, .vc-form p, .vc-form .form-row { margin-bottom: 16px; }
.vc-form ul.gform_fields { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.vc-form .frm_primary_label, .vc-form .frm_form_field > label { display: block; font-family: var(--vc-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vc-ink); margin-bottom: 7px; font-weight: 600; }
.vc-form .frm_description, .vc-form .frm_form_field .description { font-size: 13px; color: var(--vc-mute); margin-top: 5px; }
.vc-form .frm_required { color: var(--vc-secondary); }
.vc-form .frm_blank_field input, .vc-form .frm_blank_field textarea, .vc-form .frm_blank_field select { border-color: #d33; }
.vc-form .frm_error { color: #d33; font-size: 13px; margin-top: 6px; }

/* submit buttons → accent pill (Formidable = .frm_button_submit) */
.vc-form input[type=submit], .vc-form button[type=submit], .vc-form .gform_button, .vc-form .wpcf7-submit, .vc-form .frm_button_submit, .vc-form button:not([type]) {
	appearance: none; cursor: pointer; border: 0; width: auto;
	border-radius: var(--vc-radius-pill); background: var(--vc-primary); color: var(--vc-ink);
	font-family: var(--vc-font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.01em;
	padding: 13px 26px; transition: filter 0.15s, transform 0.15s, background 0.15s, color 0.15s;
}

/* Formidable submit → site accent (override its styler reliably) */
.vc-form .frm_submit button,
.vc-form .frm_submit input[type=submit],
.vc-form .frm_button_submit {
	background: var(--vc-primary) !important;
	color: var(--vc-ink) !important;
	border: 0 !important;
	border-radius: var(--vc-radius-pill) !important;
	font-family: var(--vc-font-display) !important;
	font-weight: 700 !important;
	padding: 13px 26px !important;
}
.vc-form .frm_submit button:hover,
.vc-form .frm_submit input[type=submit]:hover,
.vc-form .frm_button_submit:hover {
	background: var(--vc-ink) !important;
	color: var(--vc-primary) !important;
}
.vc-form input[type=submit]:hover, .vc-form button[type=submit]:hover, .vc-form .gform_button:hover, .vc-form .wpcf7-submit:hover, .vc-form .frm_button_submit:hover { filter: brightness(0.94); transform: translateY(-1px); }

/* FormPanel as a cohesive page section (no boxed card): intro left, form right */
.block-formpanel { position: relative; overflow: hidden; }
.block-formpanel > .vc-container { position: relative; z-index: 2; }
/* the two signature chevrons as a faint background facet behind the form — they
   always DARKEN the section (subtle on light, deeper black on dark backgrounds). */
.block-formpanel .vc-arrow-top { background: linear-gradient(180deg, rgba(26,29,33,0.05) 0%, rgba(26,29,33,0.015) 70%, rgba(26,29,33,0) 100%); }
.block-formpanel .vc-arrow-bottom { background: linear-gradient(180deg, rgba(26,29,33,0.04) 0%, rgba(26,29,33,0.012) 78%, rgba(26,29,33,0) 100%); }
.block-formpanel.vc-block--ink .vc-arrow-top, .block-formpanel.vc-block--dark .vc-arrow-top { background: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.07) 68%, rgba(0,0,0,0) 100%); }
.block-formpanel.vc-block--ink .vc-arrow-bottom, .block-formpanel.vc-block--dark .vc-arrow-bottom { background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.06) 76%, rgba(0,0,0,0) 100%); }
.block-formpanel-grid { display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 820px) { .block-formpanel-grid { grid-template-columns: 1fr; } }

/* validation hints */
.vc-form .wpcf7-not-valid-tip, .vc-form .gfield_description.validation_message, .vc-form .error { color: #d33; font-size: 13px; margin-top: 6px; }
.vc-form .wpcf7-response-output { border-radius: var(--vc-radius-sm); padding: 12px 14px; margin: 16px 0 0; }

/* ---- on dark panels (black / charcoal backgrounds) ---- */
.vc-form--on-dark label { color: rgba(255,255,255,0.7); }
/* Formidable field labels (.frm_primary_label / .frm_form_field > label) are set
   to dark ink above with (0,2,0) specificity, which beats the plain-label rule
   here — so they need their own on-dark override at matching specificity. */
.vc-form--on-dark .frm_primary_label,
.vc-form--on-dark .frm_form_field > label { color: rgba(255,255,255,0.7); }
.vc-form--on-dark input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=file]),
.vc-form--on-dark textarea,
.vc-form--on-dark select {
	background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); color: #fff;
}
.vc-form--on-dark ::placeholder { color: rgba(255,255,255,0.45); }
.vc-form--on-dark input:focus, .vc-form--on-dark textarea:focus, .vc-form--on-dark select:focus {
	/* keep the translucent dark fill (don't inherit the light-theme white focus bg) so white text stays readable */
	background: rgba(255,255,255,0.1); border-color: var(--vc-primary); box-shadow: 0 0 0 4px rgba(149,205,49,0.28);
}
.vc-form--on-dark input:hover:not(:focus), .vc-form--on-dark textarea:hover:not(:focus), .vc-form--on-dark select:hover:not(:focus) { border-color: rgba(255,255,255,0.35); }

/* ---- Banner info-video frame ---- */
.block-banner-video-frame { position: relative; border-radius: var(--vc-radius-lg); overflow: hidden; box-shadow: var(--vc-shadow-lg); cursor: pointer; }
.block-banner-video-frame video { width: 100%; display: block; }
.block-banner-video-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border: none; border-radius: 50%; background: rgba(255,255,255,0.9); color: var(--vc-ink); font-size: 22px; cursor: pointer; }

/* ---- Advanced: anchor + "belongs to block below" ---- */
/* anchored blocks clear the sticky header when jumped to via #anchor */
.vc-pblock { scroll-margin-top: 100px; }
/* Tighten the gap between a joined block and the block directly below it.
   Target whichever element actually carries the vertical padding: .vc-section
   on standard blocks, .vc-arrowhero-inner on the hero banners (banner/2/3). */
.vc-pblock--joined > .vc-section,
.vc-pblock--joined .vc-arrowhero-inner { padding-bottom: clamp(8px, 1.4vw, 18px); }
.vc-pblock--joined + .vc-pblock > .vc-section,
.vc-pblock--joined + .vc-pblock .vc-arrowhero-inner { padding-top: clamp(8px, 1.4vw, 18px); }

/* ---- Reusable colour surfaces (cards/columns) ---- */
.vc-surface--paper { background: var(--vc-white); color: var(--vc-ink); border: 1px solid var(--vc-rule); }
.vc-surface--warm { background: var(--vc-paper-warm); color: var(--vc-ink); }
.vc-surface--dark { background: #232323; color: #fff; }
.vc-surface--ink { background: var(--vc-ink); color: #fff; }
.vc-surface--accent { background: var(--vc-primary); color: var(--vc-ink); }

/* ---- Columns block: columns are transparent; the nested blocks carry any colour ---- */
.vc-column { display: flex; flex-direction: column; }
/* Each nested block is wrapped in a .vc-pblock (like top-level blocks) so anchors
   and "Belongs to block below" work in columns; the section is its child. Every
   nested block reads as a rounded card — round the corners and clip inner content
   (e.g. full-bleed images) to them (the column used to do this clipping itself). */
.vc-column > .vc-pblock > section { padding-block: clamp(16px, 2vw, 26px); border-radius: var(--vc-radius-md); overflow: hidden; }
.vc-column > .vc-pblock > section > .vc-container { padding-inline: clamp(18px, 2vw, 24px); max-width: none; }
/* a nested block that sets its own colour also gets an inset margin so the colour
   reads as a distinct box; a transparent one is flush and shows the page through. */
.vc-column > .vc-pblock > section.vc-block--ink,
.vc-column > .vc-pblock > section.vc-block--dark,
.vc-column > .vc-pblock > section.vc-block--warm,
.vc-column > .vc-pblock > section.vc-block--accent,
.vc-column > .vc-pblock > section.vc-block--accent-soft,
.vc-column > .vc-pblock > section.vc-block--shape { margin: 10px; }
/* …unless that nested block has the SAME background as the columns block itself:
   the inset "card" would be an invisible box-on-box, so drop the column padding,
   inset margin and rounding and let it sit flush/seamless within the column. */
.block-columns.vc-block--warm        .vc-column > .vc-pblock > section.vc-block--warm,
.block-columns.vc-block--dark        .vc-column > .vc-pblock > section.vc-block--dark,
.block-columns.vc-block--ink         .vc-column > .vc-pblock > section.vc-block--ink,
.block-columns.vc-block--accent      .vc-column > .vc-pblock > section.vc-block--accent,
.block-columns.vc-block--accent-soft .vc-column > .vc-pblock > section.vc-block--accent-soft,
.block-columns.vc-block--shape       .vc-column > .vc-pblock > section.vc-block--shape { margin: 0; border-radius: 0; padding-block: 0; }
.block-columns.vc-block--warm        .vc-column > .vc-pblock > section.vc-block--warm > .vc-container,
.block-columns.vc-block--dark        .vc-column > .vc-pblock > section.vc-block--dark > .vc-container,
.block-columns.vc-block--ink         .vc-column > .vc-pblock > section.vc-block--ink > .vc-container,
.block-columns.vc-block--accent      .vc-column > .vc-pblock > section.vc-block--accent > .vc-container,
.block-columns.vc-block--accent-soft .vc-column > .vc-pblock > section.vc-block--accent-soft > .vc-container,
.block-columns.vc-block--shape       .vc-column > .vc-pblock > section.vc-block--shape > .vc-container { padding-inline: 0; }
/* "Belongs to block below": tighten the gap so this block groups with the next. */
.vc-column > .vc-pblock--joined > section { padding-bottom: clamp(8px, 1.4vw, 18px); margin-bottom: 0; }
.vc-column > .vc-pblock--joined + .vc-pblock > section { padding-top: clamp(8px, 1.4vw, 18px); margin-top: 0; }

/* Vertical alignment of the columns (align-items on the grid). */
.vc-columns-valign-top { align-items: start; }
.vc-columns-valign-center { align-items: center; }
.vc-columns-valign-bottom { align-items: end; }
.vc-columns-valign-stretch { align-items: stretch; }

/* ---- Link tree (two-panel: dark info left, link/download list right) ---- */
.vc-linktree { display: grid; grid-template-columns: 0.72fr 1fr; border-radius: var(--vc-radius-lg); overflow: hidden; border: 1px solid var(--vc-rule); box-shadow: var(--vc-shadow-sm); }
.vc-linktree--links-only { grid-template-columns: 1fr; }        /* no left info → links span the card */
@media (max-width: 820px) { .vc-linktree { grid-template-columns: 1fr; } }

/* left info panel — always dark */
.vc-linktree-info { background: var(--vc-ink); color: #fff; padding: clamp(30px, 4vw, 56px); display: flex; flex-direction: column; }
.vc-linktree-eyebrow { color: var(--vc-primary); }                 /* green eyebrow (dot stays green) */
.vc-linktree-title { font-family: var(--vc-font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 3vw, 40px); line-height: 1.04; letter-spacing: -0.01em; color: #fff; margin: 16px 0 0; }
.vc-linktree-sub { font-family: var(--vc-font-mono); font-size: 14px; letter-spacing: 0.06em; color: rgba(255,255,255,0.6); margin-top: 12px; }
.vc-linktree-details { font-family: var(--vc-font-mono); font-size: 14px; letter-spacing: 0.03em; margin-top: 26px; }
.vc-linktree-details p { margin: 0 0 8px; }
.vc-linktree-details a { text-decoration: none; word-break: break-word; }
/* The info panel is dark but has no .vc-ink-bg class, so make the ghost (second)
   button legible on it — same treatment as .vc-ink-bg .vc-btn-ghost. */
.vc-linktree-info .vc-btn-ghost { color: var(--vc-paper); border-color: rgba(255,255,255,0.5); }
.vc-linktree-info .vc-btn-ghost:hover { background: var(--vc-paper); color: var(--vc-ink); border-color: var(--vc-paper); }

/* right link list panel */
.vc-linktree-links { background: var(--vc-white); padding: clamp(22px, 3vw, 40px) clamp(22px, 3vw, 44px); }
.vc-linktree-links-head { font-family: var(--vc-font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vc-mute); margin: 0 0 6px; }
.vc-linktree-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 20px 2px; text-decoration: none; color: inherit; transition: background 0.15s; }
.vc-linktree-row + .vc-linktree-row { border-top: 1px solid var(--vc-rule); }
.vc-linktree-ico { width: 52px; height: 52px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--vc-green-soft); color: var(--vc-green-deep); transition: background 0.15s, color 0.15s; }
.vc-linktree-row-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vc-linktree-row-title { font-family: var(--vc-font-display); font-weight: 700; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.2; color: var(--vc-ink); }
.vc-linktree-row-sub { font-size: 14px; line-height: 1.4; color: var(--vc-ink-soft); }
.vc-linktree-arrow { flex: none; display: inline-flex; color: var(--vc-mute); transition: color 0.15s, transform 0.15s; }
/* hover (only real links get <a>) */
a.vc-linktree-row:hover .vc-linktree-ico { background: var(--vc-primary); color: var(--vc-ink); }
a.vc-linktree-row:hover .vc-linktree-arrow { color: var(--vc-ink); transform: translateX(3px); }

/* ---- Press mentions (featured org quote + grid of outlet quotes) ---- */
.vc-press-eyebrow { color: var(--vc-primary); margin-bottom: clamp(20px, 3vw, 34px); }

/* Featured pull-quote — a large, subtly-raised panel (dark by default) */
.vc-press-feature { display: block; text-decoration: none; color: inherit; border-radius: var(--vc-radius-lg); padding: clamp(28px, 4vw, 56px); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09); transition: border-color 0.16s, background 0.16s; }
a.vc-press-feature:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); }
.vc-press-feature-quote { margin: 0; font-family: var(--vc-font-display); font-weight: 500; font-size: clamp(24px, 3.2vw, 44px); line-height: 1.18; letter-spacing: -0.015em; color: #fff; }
.vc-press-feature-cite { display: flex; align-items: center; flex-wrap: wrap; gap: 14px clamp(24px, 4vw, 56px); margin-top: clamp(24px, 3vw, 40px); padding-top: clamp(20px, 2.4vw, 30px); border-top: 1px solid rgba(255,255,255,0.14); }
.vc-press-feature .vc-outlet { font-size: clamp(22px, 2.6vw, 34px); line-height: 1; color: rgba(255,255,255,0.16); }
.vc-press-feature .vc-outlet-img { max-height: 34px; width: auto; opacity: 0.6; filter: brightness(0) invert(1); }
.vc-press-feature-meta { display: flex; flex-direction: column; gap: 8px; }
.vc-press-feature-sub { font-family: var(--vc-font-mono); font-size: 13px; letter-spacing: 0.03em; color: rgba(255,255,255,0.6); }
.vc-press-feature-read { display: inline-flex; align-items: center; gap: 6px; font-family: var(--vc-font-mono); font-size: 13px; letter-spacing: 0.03em; font-weight: 600; color: var(--vc-green); }
a.vc-press-feature:hover .vc-press-feature-read { color: #fff; }

/* Grid of shorter mentions — always white cards, so they read on any background */
.vc-mention-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.4vw, 22px); margin-top: clamp(20px, 2.6vw, 36px); }
@media (max-width: 1000px) { .vc-mention-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vc-mention-grid { grid-template-columns: 1fr; } }
.vc-mention { display: flex; flex-direction: column; background: var(--vc-white); color: var(--vc-ink); border: 1px solid var(--vc-rule); border-radius: var(--vc-radius-lg); padding: clamp(20px, 1.6vw, 28px); text-decoration: none; transition: transform 0.16s, box-shadow 0.16s; }
a.vc-mention:hover { transform: translateY(-3px); box-shadow: var(--vc-shadow-md); }
.vc-mention-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--vc-rule); }
.vc-mention .vc-outlet { font-size: 17px; line-height: 1; color: var(--vc-ink); }
.vc-mention .vc-outlet-img { max-height: 22px; width: auto; }
.vc-mention-kind { flex: none; font-family: var(--vc-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--vc-green-deep); }
.vc-mention-quote { flex: 1; margin: 16px 0; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.4; font-weight: 500; color: var(--vc-ink); }
.vc-mention-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--vc-rule); }
.vc-mention-headline { font-size: 13px; line-height: 1.4; color: var(--vc-ink-soft); }
.vc-mention-meta { flex: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-family: var(--vc-font-mono); font-size: 11px; letter-spacing: 0.05em; color: var(--vc-mute); }

/* OutletLogo — typographic wordmark placeholder until real logo files exist */
.vc-outlet { font-family: var(--vc-font-display); font-weight: 800; letter-spacing: -0.01em; }
.vc-outlet--serif { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; letter-spacing: 0; }
.vc-outlet--mono { font-family: var(--vc-font-mono); font-weight: 700; letter-spacing: 0.01em; }
.vc-outlet--italic { font-style: italic; font-weight: 800; }
.vc-outlet-img { display: block; object-fit: contain; }

/* On a LIGHT section (not black/charcoal) the featured panel flips to a light card. */
.block-press:not(.vc-block--ink):not(.vc-block--dark) .vc-press-feature { background: var(--vc-white); border-color: var(--vc-rule); }
.block-press:not(.vc-block--ink):not(.vc-block--dark) .vc-press-feature-quote { color: var(--vc-ink); }
.block-press:not(.vc-block--ink):not(.vc-block--dark) .vc-press-feature-cite { border-top-color: var(--vc-rule); }
.block-press:not(.vc-block--ink):not(.vc-block--dark) .vc-press-feature .vc-outlet { color: rgba(26,29,33,0.14); }
.block-press:not(.vc-block--ink):not(.vc-block--dark) .vc-press-feature .vc-outlet-img { filter: none; opacity: 0.5; }
.block-press:not(.vc-block--ink):not(.vc-block--dark) .vc-press-feature-sub { color: var(--vc-ink-soft); }
.block-press:not(.vc-block--ink):not(.vc-block--dark) .vc-press-feature-read { color: var(--vc-green-deep); }

/* ---- Streamer (highlight bar + CTA) ---- */
.vc-streamer { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; border-radius: var(--vc-radius-lg); padding: clamp(24px, 3.2vw, 44px) clamp(24px, 3.5vw, 48px); }
.vc-streamer--paper { background: var(--vc-white); color: var(--vc-ink); border: 1px solid var(--vc-rule); }
.vc-streamer--warm { background: var(--vc-paper-warm); color: var(--vc-ink); }
.vc-streamer--dark { background: #232323; color: #fff; }
.vc-streamer--ink { background: var(--vc-ink); color: #fff; }
.vc-streamer--accent { background: var(--vc-primary); color: var(--vc-ink); }
.vc-streamer--accent-soft { background: #eef6da; background: color-mix(in srgb, var(--vc-primary) 15%, #fff); color: var(--vc-ink); }
.vc-streamer-main { flex: 1 1 420px; min-width: 0; }
.vc-streamer-cta { flex: none; }
/* eyebrow with a green dash */
.vc-streamer-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--vc-font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vc-ink-soft); margin-bottom: 14px; }
.vc-streamer-eyebrow .dash { width: 22px; height: 2px; background: var(--vc-primary); flex: none; }
/* On the solid accent bar the dash would be accent-on-accent — recolour to the
   secondary so it stays visible (matches the eyebrow-dot treatment on accent). */
.vc-streamer--accent .vc-streamer-eyebrow .dash { background: var(--vc-secondary); }
.vc-streamer--ink .vc-streamer-eyebrow, .vc-streamer--dark .vc-streamer-eyebrow { color: var(--vc-primary); }
.vc-streamer-title { font-family: var(--vc-font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.02; letter-spacing: -0.015em; margin: 0; }
.vc-streamer-text { font-size: clamp(15px, 1.4vw, 19px); line-height: 1.5; color: var(--vc-ink-soft); margin: 12px 0 0; max-width: 620px; }
.vc-streamer--ink .vc-streamer-text, .vc-streamer--dark .vc-streamer-text { color: rgba(255,255,255,0.7); }
.vc-streamer--accent .vc-streamer-text { color: rgba(26,29,33,0.8); }
/* partner style: boxed label on the left */
.vc-streamer--partner { gap: 16px 28px; }
.vc-streamer-label { flex: none; align-self: stretch; display: flex; align-items: center; justify-content: center; min-width: 200px; padding: 20px 24px; border-radius: var(--vc-radius-md); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); font-family: var(--vc-font-display); font-weight: 800; font-size: clamp(22px, 2.4vw, 32px); }
.vc-streamer--partner.vc-streamer--paper .vc-streamer-label, .vc-streamer--partner.vc-streamer--warm .vc-streamer-label { background: var(--vc-paper-warm); border-color: var(--vc-rule); }
.vc-streamer--partner .vc-streamer-eyebrow { margin-bottom: 8px; }
@media (max-width: 700px) {
	.vc-streamer-label { min-width: 0; align-self: stretch; width: 100%; }
}

/* ---- Events list: upcoming / past switch ---- */
/* The Upcoming/Past panes hide via the [hidden] attribute, but .vc-stack sets
   display:flex, which would beat the UA [hidden] rule — re-assert it so switching
   actually swaps the panes. */
[data-vc-events-pane][hidden] { display: none !important; }
.vc-eventswitch { display: inline-flex; background: var(--vc-paper-warm); border: 1px solid var(--vc-rule); border-radius: var(--vc-radius-pill); padding: 4px; gap: 2px; }
.vc-eventswitch button { appearance: none; border: 0; cursor: pointer; background: none; border-radius: var(--vc-radius-pill); padding: 8px 16px; font-family: var(--vc-font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vc-ink-soft); transition: background 0.15s, color 0.15s; }
.vc-eventswitch button.is-active { background: var(--vc-ink); color: var(--vc-paper); }
.vc-eventswitch button .count { opacity: 0.7; font-weight: 600; }
.vc-block--ink .vc-eventswitch, .vc-block--dark .vc-eventswitch { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
.vc-block--ink .vc-eventswitch button, .vc-block--dark .vc-eventswitch button { color: rgba(255,255,255,0.7); }
.vc-block--ink .vc-eventswitch button.is-active, .vc-block--dark .vc-eventswitch button.is-active { background: var(--vc-paper); color: var(--vc-ink); }

/* ============================================================
   No iOS zoom-on-focus: form controls must be ≥16px on phones so the page
   doesn't zoom in when an input is tapped. (Pinch-zoom is left untouched.)
   In blocks.css — the last-loaded sheet — so it wins over the base sizes.
   ============================================================ */
@media (max-width: 600px) {
  .vc-form input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=file]),
  .vc-form textarea, .vc-form select,
  .vc-input, .vc-textarea, .vc-select,
  .vc-loc-search input, .vc-news-form input,
  input[type=text], input[type=email], input[type=search], input[type=tel], input[type=url], input[type=password], input[type=number],
  textarea, select {
    font-size: 16px;
  }
}

/* ---- Cadence (planning grid: a year of months, or one week of days) ----
   The grid draws its 1px rules with `gap` over a coloured grid background, so
   the column count can change at any breakpoint without nth-child bookkeeping.
   That means the CELLS must be opaque — hence the --vc-cad-* variables, which
   each section background re-points at a surface that sits on top of it. */
.block-cadence {
  --vc-cad-line:  var(--vc-rule);
  --vc-cad-cell:  var(--vc-paper);
  --vc-cad-now:   var(--vc-paper-warm);
  --vc-cad-ink:   var(--vc-ink);
  --vc-cad-mute:  #c8ccd2;
  --vc-cad-label: var(--vc-mute);
  --vc-cad-accent: var(--vc-primary-deep);
}
.vc-cadence-eyebrow { margin-bottom: clamp(18px, 2.4vw, 28px); }

.vc-cadence-statement {
  max-width: 62ch; margin: 0 0 clamp(28px, 4vw, 52px);
  font-size: clamp(19px, 1.7vw, 25px); line-height: 1.5; text-wrap: pretty;
  color: var(--vc-ink-soft);
}
/* The opening claim, highlighted the way a marker pen would. Tinted with the
   site accent rather than a fixed colour, so it follows each café's palette. */
.vc-cadence-hl {
  background: var(--vc-primary-soft);
  background: color-mix(in srgb, var(--vc-primary) 22%, transparent);
  color: var(--vc-ink); font-weight: 700;
  padding: 0.06em 0.14em; margin-inline: -0.14em; border-radius: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

.vc-cadence-grid {
  display: grid; gap: 1px;
  background: var(--vc-cad-line);
  border: 1px solid var(--vc-cad-line);
  border-radius: var(--vc-radius-sm);
  overflow: hidden;
}
.vc-cadence-grid--year { grid-template-columns: repeat(6, 1fr); }
.vc-cadence-grid--week { grid-template-columns: repeat(7, 1fr); }

.vc-cadence-cell {
  display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(18px, 2vw, 30px) 8px;
  min-width: 0;                      /* a long label must shrink, never widen the track */
  background: var(--vc-cad-cell);
}
.vc-cadence-cell.is-now { background: var(--vc-cad-now); }
.vc-cadence-label {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--vc-font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--vc-cad-label);
}
.vc-cadence-date { letter-spacing: 0.04em; color: var(--vc-cad-ink); font-weight: 600; }

/* Marker states. Default (nothing planned) is a dotted outline — present but
   unclaimed; held is solid; scheduled is an open accent square; `on` (week
   view, which has no held/scheduled split) is a filled accent square. */
.vc-cadence-mark {
  width: 18px; height: 18px; flex: none; border-radius: 2px;
  border: 1.5px dotted var(--vc-cad-mute); background: transparent;
}
.vc-cadence-mark.is-held { border: 1.5px solid var(--vc-cad-ink); background: var(--vc-cad-ink); }
.vc-cadence-mark.is-scheduled {
  border: 1.5px solid var(--vc-cad-accent);
  background: color-mix(in srgb, var(--vc-cad-accent) 18%, transparent);
}
.vc-cadence-mark.is-on { border: 1.5px solid var(--vc-cad-accent); background: var(--vc-cad-accent); }

.vc-cadence-legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px clamp(18px, 2.4vw, 34px);
  margin-top: clamp(14px, 1.6vw, 20px);
  font-family: var(--vc-font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--vc-cad-label);
}
/* The two keys carry the section's text colour so they read as the legend
   proper; the footnote stays muted, as an aside to it. */
.vc-cadence-key { display: inline-flex; align-items: center; gap: 10px; color: var(--vc-cad-ink); }
.vc-cadence-legend .vc-cadence-mark { width: 13px; height: 13px; border-width: 1.5px; }
.vc-cadence-note { color: var(--vc-cad-label); }

@media (max-width: 900px) { .vc-cadence-grid--year { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) {
  .vc-cadence-grid--year { grid-template-columns: repeat(3, 1fr); }
  .vc-cadence-label { font-size: 10px; letter-spacing: 0.12em; }
  /* A week keeps all seven columns at every width — dropping to four would leave
     an empty eighth cell that reads as a missing day. It narrows instead, with
     the date stacked under the weekday so the cell can shrink to the weekday. */
  .vc-cadence-grid--week .vc-cadence-cell { padding-inline: 4px; gap: 12px; }
  .vc-cadence-grid--week .vc-cadence-label { flex-direction: column; align-items: center; gap: 3px; }
}

/* ---- Cadence on non-white sections ---- */
.block-cadence.vc-block--warm { --vc-cad-now: var(--vc-rule-soft); }
.block-cadence.vc-block--ink,
.block-cadence.vc-block--dark {
  --vc-cad-line:  rgba(255,255,255,0.16);
  --vc-cad-now:   rgba(255,255,255,0.07);
  --vc-cad-ink:   #fff;
  --vc-cad-mute:  rgba(255,255,255,0.3);
  --vc-cad-label: rgba(255,255,255,0.55);
  --vc-cad-accent: var(--vc-primary);
}
.block-cadence.vc-block--ink  { --vc-cad-cell: var(--vc-ink); }
.block-cadence.vc-block--dark { --vc-cad-cell: #232323; }
.block-cadence.vc-block--ink .vc-cadence-statement,
.block-cadence.vc-block--dark .vc-cadence-statement { color: rgba(255,255,255,0.74); }
.block-cadence.vc-block--ink .vc-cadence-hl,
.block-cadence.vc-block--dark .vc-cadence-hl { color: #fff; background: color-mix(in srgb, var(--vc-primary) 34%, transparent); }
/* Accent-strong: the accent marker would vanish into its own surface, so the
   "planned" state borrows white and only "held" stays ink. */
.block-cadence.vc-block--accent {
  --vc-cad-line:   rgba(26,29,33,0.18);
  --vc-cad-cell:   var(--vc-primary);
  --vc-cad-now:    color-mix(in srgb, var(--vc-primary) 82%, #fff);
  --vc-cad-mute:   rgba(26,29,33,0.32);
  --vc-cad-label:  rgba(26,29,33,0.62);
  --vc-cad-accent: #fff;
}
.block-cadence.vc-block--accent .vc-cadence-statement { color: var(--vc-ink); }
.block-cadence.vc-block--accent .vc-cadence-hl { background: rgba(255,255,255,0.5); }
.block-cadence.vc-block--accent-soft {
  --vc-cad-cell: var(--vc-paper);
  --vc-cad-now: color-mix(in srgb, var(--vc-primary) 15%, #fff);
}