/* ==========================================================================
   W4 Entertainment — "Front of House" design system
   Black stage, coloured light. Each division re-lights the same room.
   Colours follow the brand book: black, white, W4 purple #BA55D3 and red #FE0000
   (Mask Audio); Groovy Event Rentals keeps amber and DJ & Photo Booth keeps pink.
   Plain CSS, no build step. All classes are prefixed w4-.
   ========================================================================== */

:root {
	--w4-bg: #000000;
	--w4-bg-2: #08080A;
	--w4-ink: #0A0A0C;
	--w4-surface: #121215;
	--w4-surface-2: #1A1A1F;
	--w4-line: #2C2C35;
	--w4-line-soft: rgba(44, 44, 53, .62);
	--w4-text: #D0D0D8;
	--w4-text-hi: #FFFFFF;
	--w4-muted: #9A9AA6;

	--w4-purple: #BA55D3;
	--w4-red: #FE0000;
	--w4-amber: #F59E0B;
	--w4-pink: #EC4899;

	/* Active accent. Parent brand = W4 purple.
	   --accent        the brand colour itself: rules, glows, dots
	   --accent-fill   the colour behind a filled button or tab (deep enough for its label)
	   --accent-ink    the label colour on --accent-fill
	   --accent-text   a lighter tint for small coloured text on black */
	--accent: #BA55D3;
	--accent-rgb: 186, 85, 211;
	--accent-fill: #A74CBE;
	--accent-ink: #FFFFFF;
	--accent-text: #D290E2;

	--w4-font-display: "Archivo", Verdana, "DejaVu Sans", system-ui, sans-serif;
	--w4-font-body: "Avenir Next", Avenir, "Nunito Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
	--w4-font-serif: Cochin, "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--w4-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--w4-wrap: 1240px;
	--w4-gutter: clamp(20px, 4vw, 40px);
	--w4-radius: 14px;
	--w4-radius-sm: 8px;
	--w4-header-h: 68px;
}

/* Division accents: set on <body> for a whole microsite, or on one element. */
.w4-div--events, .w4-acc--events, .w4-div--production, .w4-acc--production { --accent: #BA55D3; --accent-rgb: 186, 85, 211; --accent-fill: #A74CBE; --accent-ink: #FFFFFF; --accent-text: #D290E2; }
.w4-div--mask, .w4-acc--mask { --accent: #FE0000; --accent-rgb: 254, 0, 0; --accent-fill: #E00000; --accent-ink: #FFFFFF; --accent-text: #FF5C5C; }
.w4-div--groovy, .w4-acc--groovy { --accent: #F59E0B; --accent-rgb: 245, 158, 11; --accent-fill: #F59E0B; --accent-ink: #0B0B0F; --accent-text: #FBBF24; }
.w4-div--dj, .w4-acc--dj { --accent: #EC4899; --accent-rgb: 236, 72, 153; --accent-fill: #EC4899; --accent-ink: #0B0B0F; --accent-text: #F472B6; }

/* --------------------------------------------------------------------------
   Reset (kept explicit so the theme renders the same with or without a
   framework reset loaded in the draft preview)
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--w4-header-h) + 28px); scrollbar-color: #3A3A46 #000000; }
body {
	margin: 0;
	background: var(--w4-bg);
	color: var(--w4-text);
	font-family: var(--w4-font-body);
	font-size: 1.0625rem;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, menu, pre { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ol, ul, menu { list-style: none; padding: 0; }
img, svg, video, canvas, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; }
strong, b { font-weight: 700; color: var(--w4-text-hi); }
::selection { background: rgba(var(--accent-rgb), .55); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; }
.screen-reader-text, .w4-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.w4-skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 700; transition: top .2s; }
.w4-skip:focus { top: 12px; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.w4-wrap { width: 100%; max-width: calc(var(--w4-wrap) + var(--w4-gutter) * 2); margin-inline: auto; padding-inline: var(--w4-gutter); }
.w4-wrap--narrow { max-width: calc(860px + var(--w4-gutter) * 2); }
.w4-main { display: block; min-height: 50vh; }

.w4-section { position: relative; padding-block: clamp(60px, 7.6vw, 108px); }
.w4-section--tight { padding-block: clamp(44px, 6vw, 76px); }
.w4-section--alt { background: linear-gradient(180deg, var(--w4-bg-2) 0%, var(--w4-bg) 100%); }
.w4-section--panel { background: radial-gradient(1200px 500px at 85% 0%, rgba(var(--accent-rgb), .10), transparent 60%), var(--w4-bg-2); }
.w4-section--rule { border-top: 1px solid var(--w4-line); }
.w4-section--rule::before {
	content: ""; position: absolute; top: -1px; left: 50%; width: min(560px, 62%); height: 1px; transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .95), transparent);
	box-shadow: 0 0 18px rgba(var(--accent-rgb), .85);
}

.w4-grid { display: grid; gap: clamp(16px, 2.2vw, 26px); }
.w4-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w4-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.w4-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.w4-grid--top { align-items: start; }
.w4-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 76px); align-items: center; }
.w4-split--flip > :first-child { order: 2; }
.w4-split--top { align-items: start; }
.w4-stack > * + * { margin-top: 1.1em; }
.w4-mt { margin-top: clamp(28px, 4vw, 52px); }
.w4-mt-sm { margin-top: 20px; }
.w4-center { text-align: center; }
.w4-center .w4-eyebrow, .w4-center .w4-actions { justify-content: center; }
.w4-center .w4-h2, .w4-center .w4-sub { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.w4-eyebrow {
	display: flex; align-items: flex-start; gap: 12px;
	font-family: var(--w4-font-mono); font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
	color: var(--accent-text);
}
.w4-eyebrow::before { content: ""; flex: none; width: 24px; height: 2px; margin-top: .72em; background: currentColor; box-shadow: 0 0 12px currentColor; }
.w4-h1, .w4-h2, .w4-h3 { font-family: var(--w4-font-display); color: var(--w4-text-hi); text-wrap: balance; }
.w4-h1 {
	font-stretch: 125%; font-weight: 800; text-transform: uppercase;
	font-size: clamp(1.5rem, 5vw, 3.4rem); font-size: min(7.8cqi, 3.4rem); line-height: 1; letter-spacing: -.012em;
	max-width: 18ch; overflow-wrap: break-word;
}
/* Page headlines size themselves from the width of their column (cqi), so the longest word of an expanded headline stays on one line at every screen size. The vw value before each cqi value is the fallback for older browsers. */
.w4-hero__inner, .w4-hero__copy, .w4-pagehead > .w4-wrap { container-type: inline-size; }
.w4-h1 em, .w4-h2 em { font-style: normal; color: var(--accent-text); text-shadow: 0 0 34px rgba(var(--accent-rgb), .6); }
.w4-h2 {
	font-stretch: 118%; font-weight: 800; text-transform: uppercase;
	font-size: clamp(1.55rem, 3.3vw, 2.75rem); line-height: 1.04; letter-spacing: -.008em;
	max-width: 22ch;
}
.w4-h3 { font-stretch: 108%; font-weight: 700; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.2; letter-spacing: 0; }
.w4-tagline {
	font-family: var(--w4-font-serif); font-style: italic; font-weight: 500;
	font-size: clamp(1.3rem, 2.4vw, 1.85rem); line-height: 1.2; color: var(--w4-text-hi); letter-spacing: .005em;
}
.w4-tagline::before { content: "\201C"; color: var(--accent-text); margin-right: 2px; }
.w4-tagline::after { content: "\201D"; color: var(--accent-text); margin-left: 2px; }
.w4-lead { font-size: clamp(1.1rem, 1.42vw, 1.26rem); line-height: 1.58; color: var(--w4-text); max-width: 60ch; }
.w4-sub { font-size: 1.1rem; color: var(--w4-text); max-width: 62ch; }
.w4-small { font-size: .88rem; color: var(--w4-muted); }
.w4-mono { font-family: var(--w4-font-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--w4-muted); }
.w4-link { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .45); text-underline-offset: 4px; transition: text-decoration-color .2s, color .2s; }
.w4-link:hover { color: var(--w4-text-hi); text-decoration-color: currentColor; }
.w4-sechead { display: grid; gap: 16px; margin-bottom: clamp(30px, 4.4vw, 54px); }
.w4-sechead--row { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: end; gap: clamp(20px, 5vw, 72px); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.w4-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 50px; padding: 0 24px; border-radius: 10px; border: 1px solid transparent;
	font-family: var(--w4-font-body); font-size: .95rem; font-weight: 700; letter-spacing: .01em; line-height: 1; white-space: nowrap;
	cursor: pointer; transition: transform .18s ease, box-shadow .25s ease, background-color .2s, border-color .2s, color .2s;
}
.w4-btn svg { width: 18px; height: 18px; flex: none; }
.w4-btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .45), 0 12px 32px -12px rgba(var(--accent-rgb), .85); }
.w4-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .8), 0 18px 44px -12px rgba(var(--accent-rgb), 1); }
.w4-btn--ghost { background: rgba(255, 255, 255, .035); border-color: var(--w4-line); color: var(--w4-text-hi); }
.w4-btn--ghost:hover { border-color: rgba(var(--accent-rgb), .85); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .16); transform: translateY(-2px); }
.w4-btn--sm { min-height: 40px; padding: 0 16px; font-size: .85rem; border-radius: 8px; }
.w4-btn--block { width: 100%; }
.w4-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.w4-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--w4-text-hi); }
.w4-arrow::after { content: "\2192"; color: var(--accent-text); transition: transform .2s ease; }
a:hover > .w4-arrow::after, .w4-arrow:hover::after { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   Announcement bar + header
   -------------------------------------------------------------------------- */
.w4-spectrum { height: 3px; background: linear-gradient(90deg, var(--w4-purple) 0 25%, var(--w4-red) 25% 50%, var(--w4-amber) 50% 75%, var(--w4-pink) 75% 100%); }
.w4-announce { background: var(--w4-ink); border-bottom: 1px solid var(--w4-line-soft); font-family: var(--w4-font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--w4-muted); }
.w4-announce__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.w4-announce__badge { display: inline-flex; align-items: center; gap: 9px; color: var(--w4-text-hi); }
.w4-announce__badge svg { width: 12px; height: 12px; color: var(--accent-text); filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .9)); }
.w4-announce__badge span { color: var(--w4-muted); }
.w4-announce__contact { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.w4-announce__call { display: inline-flex; align-items: center; gap: 8px; color: var(--w4-text-hi); font-weight: 500; white-space: nowrap; transition: color .2s; }
.w4-announce__call svg { width: 12px; height: 12px; color: var(--accent-text); }
.w4-announce__call:hover { color: var(--accent-text); }
.w4-announce__text { color: var(--w4-muted); text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .6); text-underline-offset: 3px; transition: color .2s; }
.w4-announce__text:hover { color: var(--accent-text); }
.w4-announce__book { display: inline-flex; align-items: center; gap: 6px; color: var(--w4-text-hi); font-weight: 500; white-space: nowrap; transition: color .2s; }
.w4-announce__book::before { content: "\2022"; color: var(--w4-muted); }
.w4-announce__book svg { width: 12px; height: 12px; color: var(--accent-text); }
.w4-announce__book:hover { color: var(--accent-text); }

.w4-header { position: sticky; top: 0; z-index: 60; background: rgba(0, 0, 0, .84); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid var(--w4-line-soft); }
.w4-header__inner { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); height: var(--w4-header-h); }
.w4-brand { display: inline-flex; align-items: center; flex: none; }
.w4-brand img { height: 44px; width: auto; }
.w4-brand__text { font-family: var(--w4-font-display); font-stretch: 118%; font-weight: 800; font-size: 1.15rem; text-transform: uppercase; color: var(--w4-text-hi); }
.w4-nav { margin-left: auto; }
.w4-nav__list { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 28px); }
.w4-nav__list a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; font-size: .9rem; font-weight: 500; color: var(--w4-text); white-space: nowrap; transition: color .2s; }
.w4-nav__list a:hover, .w4-nav__list .current-menu-item > a, .w4-nav__list .current_page_item > a { color: var(--w4-text-hi); }
.w4-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--dot, var(--accent)); box-shadow: 0 0 12px var(--dot, var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.w4-nav__list a:hover::after, .w4-nav__list .current-menu-item > a::after, .w4-nav__list .current_page_item > a::after { transform: scaleX(1); }
.w4-nav--events { --dot: #BA55D3; }
.w4-nav--mask { --dot: #FE0000; }
.w4-nav--groovy { --dot: #F59E0B; }
.w4-nav--dj { --dot: #EC4899; }
.w4-nav--events > a::before, .w4-nav--mask > a::before, .w4-nav--groovy > a::before, .w4-nav--dj > a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 10px var(--dot); flex: none; }
.w4-nav__list .w4-nav--cta { margin-left: 4px; }
.w4-nav__list .w4-nav--cta > a { min-height: 40px; padding: 0 17px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: .86rem; font-weight: 700; box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .45), 0 10px 26px -12px rgba(var(--accent-rgb), .9); transition: transform .18s ease, box-shadow .25s ease; }
.w4-nav__list .w4-nav--cta > a::after { display: none; }
.w4-nav__list .w4-nav--cta > a:hover { color: var(--accent-ink); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .8), 0 16px 34px -12px rgba(var(--accent-rgb), 1); }
.w4-burger { display: none; flex: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--w4-line); align-items: center; justify-content: center; margin-left: auto; }
.w4-burger span, .w4-burger span::before, .w4-burger span::after { display: block; width: 20px; height: 2px; background: var(--w4-text-hi); border-radius: 2px; transition: transform .25s ease, opacity .2s; }
.w4-burger span { position: relative; }
.w4-burger span::before, .w4-burger span::after { content: ""; position: absolute; left: 0; }
.w4-burger span::before { top: -6px; }
.w4-burger span::after { top: 6px; }
.w4-nav-open .w4-burger span { background: transparent; }
.w4-nav-open .w4-burger span::before { transform: translateY(6px) rotate(45deg); }
.w4-nav-open .w4-burger span::after { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.w4-drawer { position: fixed; inset: 0; z-index: 55; display: none; flex-direction: column; padding: calc(var(--w4-header-h) + 60px) var(--w4-gutter) 32px; background: radial-gradient(900px 500px at 100% 0%, rgba(var(--accent-rgb), .22), transparent 60%), rgba(0, 0, 0, .98); overflow-y: auto; }
.w4-nav-open .w4-drawer { display: flex; }
.w4-nav-open { overflow: hidden; }
.w4-drawer__list { display: grid; gap: 2px; }
.w4-drawer__list a { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--w4-line-soft); font-family: var(--w4-font-display); font-stretch: 112%; font-weight: 700; font-size: 1.35rem; text-transform: uppercase; color: var(--w4-text-hi); }
.w4-drawer__list .w4-nav--events > a::before, .w4-drawer__list .w4-nav--mask > a::before, .w4-drawer__list .w4-nav--groovy > a::before, .w4-drawer__list .w4-nav--dj > a::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 12px var(--dot); }
.w4-drawer__list .w4-nav--cta { display: none; }
.w4-drawer__actions { display: grid; gap: 10px; margin-top: 28px; }

/* Division sub-header: the microsite bar. On division pages the global header
   scrolls away and this bar sticks, the way a product page's local nav does. */
.w4-is-division .w4-header { position: relative; }
.w4-divbar { position: sticky; top: 0; z-index: 50; background: linear-gradient(90deg, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), .05) 55%, rgba(var(--accent-rgb), 0)), rgba(8, 8, 10, .94); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid var(--w4-line); transition: box-shadow .3s ease; }
.w4-divbar::after { content: ""; position: absolute; left: 0; bottom: -1px; width: min(420px, 55%); height: 1px; background: linear-gradient(90deg, var(--accent), transparent); box-shadow: 0 0 14px rgba(var(--accent-rgb), .9); }
.w4-divbar.is-stuck { box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9); }
.w4-divbar__inner { display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); min-height: 54px; }
.w4-divbar__home { display: none; flex: none; align-items: center; justify-content: center; height: 28px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--w4-line); font-family: var(--w4-font-display); font-stretch: 118%; font-weight: 900; font-size: .78rem; letter-spacing: .02em; color: var(--w4-text-hi); transition: border-color .2s; }
.w4-divbar__home:hover { border-color: var(--accent); }
.w4-divbar__brand { display: inline-flex; align-items: center; gap: 10px; flex: none; font-family: var(--w4-font-display); font-stretch: 118%; font-weight: 800; font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; color: var(--w4-text-hi); white-space: nowrap; }
.w4-divbar__brand::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 14px var(--accent); transform: rotate(45deg); flex: none; }
.w4-divbar__nav { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 24px); flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 20px; }
.w4-divbar__nav::-webkit-scrollbar { display: none; }
.w4-divbar__nav a { display: block; padding: 8px 0; font-size: .84rem; font-weight: 500; color: var(--w4-text); white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; transition: color .2s, box-shadow .2s; }
.w4-divbar__nav a:hover { color: var(--accent-text); }
.w4-divbar__nav a.is-active { color: var(--w4-text-hi); box-shadow: inset 0 -2px 0 var(--accent); }
.w4-divbar__parent { flex: none; font-family: var(--w4-font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--w4-muted); white-space: nowrap; }
.w4-divbar__parent a { color: var(--w4-text-hi); border-bottom: 1px solid var(--w4-line); transition: border-color .2s, color .2s; }
.w4-divbar__parent a:hover { color: var(--accent-text); border-color: var(--accent-text); }
.w4-divbar__call { flex: none; display: inline-flex; align-items: center; gap: 7px; margin-left: auto; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--w4-line); font-family: var(--w4-font-mono); font-size: .72rem; letter-spacing: .08em; color: var(--w4-text-hi); white-space: nowrap; transition: border-color .2s, color .2s; }
.w4-divbar__call svg { width: 13px; height: 13px; color: var(--accent-text); }
.w4-divbar__call:hover { border-color: rgba(var(--accent-rgb), .8); color: var(--accent-text); }
.w4-divbar__book { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--w4-line); font-family: var(--w4-font-mono); font-size: .72rem; letter-spacing: .08em; color: var(--w4-text-hi); white-space: nowrap; transition: border-color .2s, color .2s; }
.w4-divbar__book svg { width: 13px; height: 13px; color: var(--accent-text); }
.w4-divbar__book:hover { border-color: rgba(var(--accent-rgb), .8); color: var(--accent-text); }
.w4-divbar__cta { flex: none; }
@media (max-width: 1180px) { .w4-divbar__book { display: none; } }
@media (max-width: 1020px) { .w4-divbar__call { display: none; } .w4-divbar__cta { margin-left: auto; } }
.w4-divbar .w4-short { display: none; }

/* WordPress toolbar offsets for the sticky bars (logged-in users only). */
.admin-bar:not(.w4-is-division) .w4-header, .admin-bar .w4-divbar { top: 32px; }
@media (max-width: 782px) { .admin-bar:not(.w4-is-division) .w4-header, .admin-bar .w4-divbar { top: 46px; } }
@media (max-width: 600px) { .admin-bar:not(.w4-is-division) .w4-header, .admin-bar .w4-divbar { top: 0; } }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.w4-hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--w4-line); }
.w4-hero__media { position: absolute; inset: 0; z-index: -3; }
.w4-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.w4-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .74) 58%, var(--w4-bg) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .88) 38%, rgba(0, 0, 0, .52) 70%, rgba(0, 0, 0, .3) 100%);
}
.w4-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.w4-beams { position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; overflow: hidden; }
.w4-beams i {
	position: absolute; top: -12%; width: 46vw; max-width: 760px; height: 135%;
	background: linear-gradient(180deg, rgba(var(--accent-rgb), .6) 0%, rgba(var(--accent-rgb), .14) 45%, rgba(var(--accent-rgb), 0) 78%);
	clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
	filter: blur(26px); opacity: .5; transform-origin: 50% 0;
	animation: w4-sway 16s ease-in-out infinite alternate;
}
.w4-beams i:nth-child(1) { left: 34%; --r0: -26deg; --r1: -12deg; }
.w4-beams i:nth-child(2) { left: 52%; --r0: 4deg; --r1: -9deg; animation-duration: 21s; opacity: .36; }
.w4-beams i:nth-child(3) { left: 66%; --r0: 14deg; --r1: 30deg; animation-duration: 18s; opacity: .44; }
@keyframes w4-sway { from { transform: rotate(var(--r0, -10deg)); } to { transform: rotate(var(--r1, 10deg)); } }

.w4-hero__inner { display: grid; gap: 22px; padding-block: clamp(64px, 9.5vw, 138px) clamp(56px, 8vw, 110px); }
.w4-hero__inner > .w4-actions { margin-top: 10px; }
.w4-hero--page .w4-hero__inner { padding-block: clamp(52px, 7vw, 100px) clamp(44px, 6vw, 80px); }
.w4-hero--page .w4-h1 { font-size: clamp(1.5rem, 3.9vw, 3.1rem); font-size: min(7.8cqi, 3.1rem); max-width: 20ch; }
.w4-hero--home .w4-h1 { font-size: clamp(1.5rem, 4vw, 2.9rem); font-size: min(7.8cqi, 2.9rem); max-width: none; }
.w4-hero--slim .w4-hero__inner { padding-block: clamp(44px, 6vw, 84px) clamp(32px, 4vw, 56px); }
.w4-hero__logo { height: auto; width: min(300px, 62vw); margin-bottom: 6px; filter: drop-shadow(0 0 28px rgba(var(--accent-rgb), .45)); }
.w4-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 14px; font-family: var(--w4-font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--w4-muted); }
.w4-hero__meta > * { display: inline-flex; align-items: center; gap: 8px; }
.w4-hero__meta > *::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* Home hero: text + four "channel" slices */
.w4-hero--home .w4-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-block: clamp(56px, 8vw, 116px) clamp(56px, 7vw, 100px); }
.w4-hero--home .w4-hero__copy { display: grid; gap: 22px; }
.w4-slices { display: flex; gap: 12px; height: clamp(340px, 40vw, 520px); }
.w4-slice { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 12px; border: 1px solid var(--w4-line); background: var(--w4-surface); transition: flex-grow .5s cubic-bezier(.2, .7, .2, 1), border-color .3s, box-shadow .3s; }
.w4-slice:nth-child(even) { margin-top: 34px; margin-bottom: -34px; }
.w4-slice img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .78; transition: opacity .4s, transform .8s ease; }
.w4-slice::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; z-index: 2; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
.w4-slice::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .1) 30%, rgba(0, 0, 0, .92) 100%); }
.w4-slice__label { position: absolute; left: 12px; bottom: 14px; z-index: 3; display: flex; align-items: center; gap: 12px; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.w4-slice__n { font-family: var(--w4-font-mono); font-size: .7rem; letter-spacing: .16em; color: var(--accent-text); }
.w4-slice__t { font-family: var(--w4-font-display); font-stretch: 112%; font-weight: 800; font-size: .92rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--w4-text-hi); }
.w4-slice:hover, .w4-slice:focus-visible { flex-grow: 2.1; border-color: rgba(var(--accent-rgb), .9); box-shadow: 0 24px 60px -24px rgba(var(--accent-rgb), .9); }
.w4-slice:hover img, .w4-slice:focus-visible img { opacity: 1; transform: scale(1.05); }

/* 10-year seal */
.w4-seal { position: relative; display: inline-grid; place-items: center; align-content: center; width: 124px; height: 124px; border-radius: 50%; text-align: center; background: radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb), .3), rgba(var(--accent-rgb), .05) 70%); border: 1px solid rgba(var(--accent-rgb), .6); box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .08), 0 0 44px -6px rgba(var(--accent-rgb), .75); flex: none; }
.w4-seal__n { font-family: var(--w4-font-display); font-stretch: 125%; font-weight: 900; font-size: 2.6rem; line-height: .85; color: var(--w4-text-hi); }
.w4-seal__t { font-family: var(--w4-font-mono); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--accent-text); margin-top: 6px; padding-left: .3em; }
.w4-seal__s { font-family: var(--w4-font-mono); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: var(--w4-muted); margin-top: 2px; }
.w4-seal--sm { width: 96px; height: 96px; }
.w4-hero__inner--split > .w4-seal { justify-self: end; align-self: center; width: clamp(150px, 15vw, 200px); height: clamp(150px, 15vw, 200px); }
.w4-hero__inner--split > .w4-seal .w4-seal__n { font-size: clamp(3.2rem, 5.4vw, 4.6rem); }
.w4-hero__inner--split > .w4-seal .w4-seal__t { font-size: .78rem; margin-top: 10px; }
.w4-hero__inner--split > .w4-seal .w4-seal__s { font-size: .64rem; margin-top: 4px; }
.w4-seal--sm .w4-seal__n { font-size: 2rem; }

/* Ticker */
.w4-ticker { overflow: hidden; border-bottom: 1px solid var(--w4-line); background: var(--w4-ink); padding-block: 16px; }
.w4-ticker__track { display: flex; width: max-content; gap: 44px; }
.w4-ticker__track.is-ready { animation: w4-ticker 46s linear infinite; }
.w4-ticker__track span { display: inline-flex; align-items: center; gap: 44px; font-family: var(--w4-font-display); font-stretch: 125%; font-weight: 800; font-size: clamp(1rem, 1.7vw, 1.35rem); text-transform: uppercase; letter-spacing: .04em; color: transparent; -webkit-text-stroke: 1px rgba(208, 208, 216, .62); white-space: nowrap; }
.w4-ticker__track span::after { content: ""; width: 8px; height: 8px; background: var(--accent); box-shadow: 0 0 12px var(--accent); transform: rotate(45deg); }
@keyframes w4-ticker { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.w4-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--w4-radius); background: linear-gradient(180deg, var(--w4-surface-2), var(--w4-surface)); border: 1px solid var(--w4-line); transition: transform .25s ease, border-color .25s ease, box-shadow .3s ease; }
.w4-card:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), .75); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .22), 0 26px 60px -30px rgba(var(--accent-rgb), .8); }
.w4-card--flat:hover { transform: none; }
.w4-card__kicker { font-family: var(--w4-font-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); }
.w4-card__text { font-size: .96rem; color: var(--w4-text); }
.w4-card__foot { margin-top: auto; padding-top: 10px; }
.w4-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .4); color: var(--accent-text); flex: none; }
.w4-icon svg { width: 22px; height: 22px; }

/* Division portal cards: channel strips */
.w4-chans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.w4-chan { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 100%; padding: 26px 22px 22px; border-radius: var(--w4-radius); overflow: hidden; background: linear-gradient(180deg, rgba(var(--accent-rgb), .13) 0%, rgba(var(--accent-rgb), 0) 38%), linear-gradient(180deg, var(--w4-surface-2), var(--w4-surface)); border: 1px solid var(--w4-line); transition: transform .28s ease, border-color .28s ease, box-shadow .32s ease; }
.w4-chan::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); box-shadow: 0 0 22px var(--accent); }
.w4-chan:hover, .w4-chan:focus-visible { transform: translateY(-6px); border-color: rgba(var(--accent-rgb), .85); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .3), 0 34px 70px -34px rgba(var(--accent-rgb), .95); }
.w4-chan__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.w4-chan__n { font-family: var(--w4-font-mono); font-size: .72rem; letter-spacing: .2em; color: var(--accent-text); }
.w4-meter { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.w4-meter i { width: 4px; border-radius: 1px; background: var(--accent); opacity: .35; height: 30%; transition: height .35s ease, opacity .35s ease; }
.w4-meter i:nth-child(2) { height: 55%; } .w4-meter i:nth-child(3) { height: 40%; } .w4-meter i:nth-child(4) { height: 70%; } .w4-meter i:nth-child(5) { height: 45%; } .w4-meter i:nth-child(6) { height: 25%; }
.w4-chan:hover .w4-meter i, .w4-chan:focus-visible .w4-meter i { opacity: 1; animation: w4-meter 1s ease-in-out infinite alternate; }
.w4-chan:hover .w4-meter i:nth-child(2n) { animation-duration: .7s; } .w4-chan:hover .w4-meter i:nth-child(3n) { animation-duration: 1.25s; }
@keyframes w4-meter { from { height: 22%; } to { height: 100%; } }
.w4-chan__name { font-family: var(--w4-font-display); font-stretch: 118%; font-weight: 800; font-size: clamp(1.15rem, 1.55vw, 1.4rem); line-height: 1.05; text-transform: uppercase; color: var(--w4-text-hi); }
.w4-chan__desc { font-size: .93rem; color: var(--w4-text); }
.w4-chan .w4-list { font-size: .88rem; }
.w4-chan__go { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--w4-line-soft); }

/* Lists */
.w4-list { display: grid; gap: 9px; }
.w4-list li { position: relative; padding-left: 22px; color: var(--w4-text); }
.w4-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), .9); }
.w4-list--check li::before { top: .38em; width: 11px; height: 6px; background: none; box-shadow: none; border-left: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: rotate(-45deg); }
.w4-list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }

/* Media shots */
.w4-shot { position: relative; border-radius: var(--w4-radius); overflow: hidden; border: 1px solid var(--w4-line); background: var(--w4-surface); box-shadow: 0 40px 90px -50px rgba(var(--accent-rgb), .75); }
.w4-shot img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.w4-shot--wide img { aspect-ratio: 16 / 9; }
.w4-shot--tall img { aspect-ratio: 4 / 5; }
.w4-shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 -90px 80px -60px rgba(0, 0, 0, .85); }
.w4-shot__cap { position: absolute; left: 14px; bottom: 12px; z-index: 2; font-family: var(--w4-font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--w4-text-hi); }
.w4-shot__cap::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.w4-shots { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; }
.w4-shots .w4-shot:first-child { grid-row: span 2; }
.w4-shots .w4-shot:first-child img { aspect-ratio: auto; height: 100%; }
.w4-shots .w4-shot:not(:first-child) img { aspect-ratio: 16 / 10; }

/* Stats / facts strip */
.w4-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--w4-line); border-radius: var(--w4-radius); overflow: hidden; background: var(--w4-surface); }
.w4-facts > div { padding: 22px 22px 20px; border-left: 1px solid var(--w4-line); }
.w4-facts > div:first-child { border-left: 0; }
.w4-facts dt { font-family: var(--w4-font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--w4-muted); }
.w4-facts dd { margin-top: 6px; font-family: var(--w4-font-display); font-stretch: 112%; font-weight: 800; font-size: clamp(1.05rem, 1.55vw, 1.35rem); line-height: 1.1; text-transform: uppercase; color: var(--w4-text-hi); }

/* Spec sheet */
.w4-spec { border: 1px solid var(--w4-line); border-radius: var(--w4-radius); overflow: hidden; background: var(--w4-surface); }
.w4-spec__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--w4-line); background: rgba(var(--accent-rgb), .09); font-family: var(--w4-font-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); }
.w4-spec__head span:last-child { color: var(--w4-muted); }
.w4-spec dl > div { display: grid; grid-template-columns: minmax(130px, .42fr) minmax(0, 1fr); gap: 16px; padding: 15px 20px; border-top: 1px solid var(--w4-line-soft); }
.w4-spec dl > div:first-child { border-top: 0; }
.w4-spec dt { font-family: var(--w4-font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--w4-muted); padding-top: 3px; }
.w4-spec dd { color: var(--w4-text-hi); font-weight: 500; }
.w4-spec dd small { display: block; font-size: .86rem; font-weight: 400; color: var(--w4-muted); margin-top: 2px; }

/* Pricing */
.w4-price { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.6vw, 30px); border-radius: var(--w4-radius); background: linear-gradient(180deg, var(--w4-surface-2), var(--w4-surface)); border: 1px solid var(--w4-line); transition: transform .25s ease, border-color .25s ease, box-shadow .3s ease; }
.w4-price:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), .75); box-shadow: 0 26px 60px -30px rgba(var(--accent-rgb), .8); }
.w4-price--featured { border-color: rgba(var(--accent-rgb), .8); background: linear-gradient(180deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .02) 46%), linear-gradient(180deg, var(--w4-surface-2), var(--w4-surface)); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .25), 0 30px 70px -36px rgba(var(--accent-rgb), .9); }
.w4-price__flag { position: absolute; top: -11px; left: 22px; padding: 4px 10px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-family: var(--w4-font-mono); font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.w4-price__name { font-family: var(--w4-font-display); font-stretch: 114%; font-weight: 800; font-size: 1.12rem; text-transform: uppercase; color: var(--w4-text-hi); line-height: 1.1; }
.w4-price__for { font-family: var(--w4-font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.w4-price__amt { font-family: var(--w4-font-display); font-stretch: 112%; font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1; color: var(--w4-text-hi); }
.w4-price__amt small { font-family: var(--w4-font-mono); font-stretch: 100%; font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--w4-muted); margin-left: 6px; }
.w4-price__amt--range { font-size: clamp(1.5rem, 2.1vw, 1.95rem); }
.w4-price__alt { font-size: .9rem; color: var(--w4-text); }
.w4-price__cta { margin-top: auto; padding-top: 10px; }
.w4-price__alt b { color: var(--accent-text); }
.w4-price hr { width: 100%; height: 1px; border: 0; margin: 2px 0; background: var(--w4-line-soft); }
.w4-rates { display: grid; gap: 0; border: 1px solid var(--w4-line); border-radius: var(--w4-radius); overflow: hidden; background: var(--w4-surface); }
.w4-rate { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: baseline; padding: 18px 22px; border-top: 1px solid var(--w4-line-soft); }
.w4-rate:first-child { border-top: 0; }
.w4-rate__name { font-weight: 700; color: var(--w4-text-hi); }
.w4-rate__amt { font-family: var(--w4-font-display); font-stretch: 112%; font-weight: 800; font-size: 1.3rem; color: var(--w4-text-hi); white-space: nowrap; }
.w4-rate__amt small { font-family: var(--w4-font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--w4-muted); margin-left: 5px; }
.w4-rate__note { grid-column: 1 / -1; font-size: .9rem; color: var(--w4-text); }
.w4-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 10px; border: 1px dashed rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .07); font-size: .93rem; color: var(--w4-text); }
.w4-note > span { min-width: 0; }
.w4-note::before { content: "!"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: var(--w4-font-mono); font-weight: 700; font-size: .8rem; }

/* Gear list */
.w4-gear { border: 1px solid var(--w4-line); border-radius: var(--w4-radius); overflow: hidden; background: var(--w4-surface); }
.w4-gear__row { display: grid; grid-template-columns: minmax(120px, .26fr) minmax(0, 1fr); gap: 18px; padding: 18px 22px; border-top: 1px solid var(--w4-line-soft); }
.w4-gear__row:first-child { border-top: 0; }
.w4-gear__cat { font-family: var(--w4-font-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); padding-top: 5px; }
.w4-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.w4-tags li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--w4-line); background: rgba(255, 255, 255, .03); font-size: .86rem; color: var(--w4-text-hi); transition: border-color .2s, background-color .2s; }
.w4-tags li:hover { border-color: rgba(var(--accent-rgb), .8); background: rgba(var(--accent-rgb), .1); }

/* Waveform (Mask Audio) */
.w4-wave { display: flex; align-items: center; gap: 4px; height: 70px; margin-top: 8px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent); mask-image: linear-gradient(90deg, #000 60%, transparent); }
.w4-wave i { flex: none; width: 4px; height: 100%; border-radius: 2px; background: linear-gradient(180deg, var(--accent-text), var(--accent)); transform: scaleY(.25); animation: w4-wave 1.4s ease-in-out infinite alternate; box-shadow: 0 0 10px rgba(var(--accent-rgb), .6); }
.w4-wave i:nth-child(2n) { animation-duration: 1s; animation-delay: -.3s; }
.w4-wave i:nth-child(3n) { animation-duration: 1.8s; animation-delay: -.9s; }
.w4-wave i:nth-child(5n) { animation-duration: .8s; animation-delay: -.5s; }
.w4-wave i:nth-child(7n) { animation-duration: 2.2s; animation-delay: -1.3s; }
@keyframes w4-wave { from { transform: scaleY(.12); } to { transform: scaleY(1); } }

/* Steps */
.w4-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); counter-reset: w4step; }
.w4-step { position: relative; padding-top: 22px; border-top: 1px solid var(--w4-line); counter-increment: w4step; }
.w4-step::before { content: "0" counter(w4step); position: absolute; top: -11px; left: 0; padding-right: 12px; background: var(--w4-bg); font-family: var(--w4-font-mono); font-size: .76rem; letter-spacing: .16em; color: var(--accent-text); }
.w4-section--alt .w4-step::before, .w4-section--panel .w4-step::before { background: var(--w4-bg-2); }
.w4-step .w4-h3 { margin-bottom: 8px; }
.w4-step p { font-size: .94rem; }

/* Quote */
.w4-quote { position: relative; display: grid; gap: 20px; padding: clamp(26px, 4vw, 48px); border-radius: var(--w4-radius); border: 1px solid var(--w4-line); background: radial-gradient(700px 300px at 0% 0%, rgba(var(--accent-rgb), .14), transparent 65%), var(--w4-surface); }
.w4-quote blockquote { font-family: var(--w4-font-serif); font-weight: 500; font-size: clamp(1.32rem, 2.5vw, 2.05rem); line-height: 1.3; color: var(--w4-text-hi); text-wrap: balance; }
.w4-quote blockquote::before { content: "\201C"; display: block; font-size: 2.9em; line-height: .62; color: var(--accent-text); margin-bottom: 14px; }
.w4-quote figcaption { font-family: var(--w4-font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--w4-muted); }
.w4-quote figcaption b { display: block; color: var(--w4-text-hi); font-weight: 700; margin-bottom: 3px; }

/* Logo row */
.w4-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px clamp(20px, 3vw, 40px); }
.w4-stack > .w4-logos { margin-top: clamp(22px, 3vw, 34px); }
.w4-logos img { height: 46px; width: auto; max-width: 160px; object-fit: contain; opacity: .8; transition: opacity .25s; }
.w4-logos img:hover { opacity: 1; }
.w4-logos__label { flex: 1 1 100%; margin-bottom: -4px; }

/* Versus (fragmented vendors vs one company) */
.w4-versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(14px, 2.4vw, 30px); align-items: stretch; }
.w4-versus__col { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: var(--w4-radius); border: 1px solid var(--w4-line); background: var(--w4-surface); }
.w4-versus__col--us { border-color: rgba(var(--accent-rgb), .8); background: linear-gradient(180deg, rgba(var(--accent-rgb), .15), rgba(var(--accent-rgb), .02) 60%), var(--w4-surface); box-shadow: 0 30px 70px -40px rgba(var(--accent-rgb), .9); }
.w4-versus__mid { align-self: center; font-family: var(--w4-font-mono); font-size: .76rem; letter-spacing: .2em; color: var(--w4-muted); }
.w4-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.w4-chiprow span { padding: 7px 12px; border-radius: 8px; border: 1px dashed var(--w4-line); font-size: .86rem; color: var(--w4-text); }
.w4-versus__col--us .w4-chiprow span { border-style: solid; border-color: rgba(var(--accent-rgb), .55); color: var(--w4-text-hi); background: rgba(var(--accent-rgb), .08); }

/* People */
.w4-person { display: grid; gap: 16px; align-content: start; }
.w4-person__photo { position: relative; aspect-ratio: 1 / 1; border-radius: var(--w4-radius); overflow: hidden; border: 1px solid var(--w4-line); background: radial-gradient(circle at 50% 30%, rgba(var(--accent-rgb), .32), rgba(var(--accent-rgb), .04) 68%), var(--w4-surface); }
.w4-person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.w4-person__role { font-family: var(--w4-font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.w4-person > p:not([class]) { font-size: .95rem; }

/* Contact cards */
.w4-contact { display: grid; gap: 4px; padding: 22px; border-radius: var(--w4-radius); border: 1px solid var(--w4-line); background: var(--w4-surface); transition: border-color .25s, transform .25s, box-shadow .3s; }
a.w4-contact:hover { border-color: rgba(var(--accent-rgb), .8); transform: translateY(-3px); box-shadow: 0 24px 54px -30px rgba(var(--accent-rgb), .85); }
.w4-contact__k { font-family: var(--w4-font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); }
.w4-contact__v { font-family: var(--w4-font-display); font-stretch: 105%; font-weight: 700; font-size: clamp(1rem, 1.3vw, 1.1rem); color: var(--w4-text-hi); overflow-wrap: anywhere; }
.w4-contact__s { font-size: .88rem; color: var(--w4-muted); }

/* Planning Beats form container */
.w4-formbox { position: relative; }
@media (min-width: 1100px) { .w4-formbox { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(56%, 620px)); gap: clamp(28px, 5vw, 72px); align-items: start; } .w4-formbox .w4-formbox__head { position: sticky; top: calc(var(--w4-header-h) + 28px); margin-bottom: 0; } }
.w4-formbox__head { display: grid; gap: 10px; margin-bottom: 22px; }
#planning-beats-crm-container, .w4-pb { position: relative; width: 100%; border-radius: 12px; background: rgba(18, 18, 21, .7); border: 1px solid var(--w4-line); padding: clamp(12px, 2.2vw, 20px); box-shadow: 0 40px 90px -60px rgba(var(--accent-rgb), .9); }
#planning-beats-crm-container::before, .w4-pb::before { content: ""; position: absolute; top: -1px; left: 24px; width: min(260px, 50%); height: 1px; background: linear-gradient(90deg, var(--accent), transparent); box-shadow: 0 0 14px rgba(var(--accent-rgb), .9); }
/* The Planning Beats forms currently use their light style, so each one sits on a white rounded card inside the dark frame. If the forms are restyled dark or transparent in Planning Beats, remove "background: #fff !important". */
iframe[data-pb-form] { display: block; width: 100%; border: 0; border-radius: 10px; background: #fff !important; height: var(--pbh-m, 1400px); }
@media (min-width: 641px) { iframe[data-pb-form] { height: var(--pbh-d, 980px); } }
.w4-pb__fallback { margin-top: 12px; font-size: .86rem; color: var(--w4-muted); text-align: center; }

/* Gallery */
.w4-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.w4-chip { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--w4-line); background: rgba(255, 255, 255, .03); font-family: var(--w4-font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--w4-text); transition: all .2s; }
.w4-chip:hover { border-color: rgba(var(--accent-rgb), .8); color: var(--w4-text-hi); }
.w4-chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.w4-gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 15vw, 210px); grid-auto-flow: dense; gap: 12px; }
.w4-gallery__item { position: relative; grid-column: span 4; grid-row: span 1; overflow: hidden; border-radius: 12px; border: 1px solid var(--w4-line); background: var(--w4-surface); cursor: zoom-in; transition: border-color .25s, box-shadow .3s; }
.w4-gallery__item--wide { grid-column: span 8; grid-row: span 2; }
.w4-gallery__item--tall { grid-row: span 2; }
.w4-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease, opacity .3s; }
.w4-gallery__item:hover { border-color: rgba(var(--accent-rgb), .85); box-shadow: 0 24px 60px -30px rgba(var(--accent-rgb), .9); }
.w4-gallery__item:hover img { transform: scale(1.06); }
.w4-gallery__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 14px 12px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .92)); font-family: var(--w4-font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--w4-text-hi); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.w4-gallery__item:hover .w4-gallery__cap, .w4-gallery__item:focus-visible .w4-gallery__cap { opacity: 1; transform: none; }
.w4-gallery__item.is-hidden { display: none; }
.w4-lightbox { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: 56px 16px 72px; background: rgba(0, 0, 0, .95); }
.w4-lightbox.is-open { display: flex; }
.w4-lightbox img { max-width: min(1400px, 100%); max-height: 100%; width: auto; height: auto; border-radius: 10px; box-shadow: 0 40px 120px -40px rgba(var(--accent-rgb), .9); }
.w4-lightbox__cap { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; padding-inline: 70px; font-family: var(--w4-font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--w4-text); }
.w4-lightbox__btn { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--w4-line); background: rgba(18, 18, 21, .9); color: var(--w4-text-hi); font-size: 1.2rem; transition: border-color .2s, background-color .2s; }
.w4-lightbox__btn:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), .25); }
.w4-lightbox__btn--x { top: 14px; right: 14px; }
.w4-lightbox__btn--p { left: 14px; top: 50%; transform: translateY(-50%); }
.w4-lightbox__btn--n { right: 14px; top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   CTA band + footer
   -------------------------------------------------------------------------- */
.w4-cta { position: relative; overflow: hidden; isolation: isolate; border-top: 1px solid var(--w4-line); background: var(--w4-bg-2); }
.w4-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 320px at 12% 0%, rgba(var(--accent-rgb), .3), transparent 62%), radial-gradient(600px 300px at 92% 100%, rgba(var(--accent-rgb), .18), transparent 62%); }
.w4-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding-block: clamp(48px, 6.5vw, 84px); }
.w4-cta__inner .w4-h2 { max-width: 20ch; }
.w4-cta__copy { display: grid; gap: 14px; }

.w4-footer { background: var(--w4-ink); border-top: 1px solid var(--w4-line); font-size: .93rem; }
.w4-footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 60px); padding-block: clamp(48px, 6vw, 76px) 40px; }
.w4-footer__brand { display: grid; gap: 18px; align-content: start; }
.w4-footer__brand img { height: 62px; width: auto; }
.w4-footer__lockup { display: flex; align-items: center; gap: 20px; }
.w4-footer address { font-style: normal; display: grid; gap: 6px; color: var(--w4-text); }
.w4-footer address a { color: var(--w4-text-hi); font-weight: 600; transition: color .2s; }
.w4-footer address a:hover { color: var(--accent-text); }
.w4-footer__h { font-family: var(--w4-font-mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--w4-muted); margin-bottom: 16px; }
.w4-footer__list { display: grid; gap: 10px; }
.w4-footer__list a { display: inline-flex; align-items: center; gap: 9px; color: var(--w4-text); transition: color .2s, transform .2s; }
.w4-footer__list a:hover { color: var(--w4-text-hi); transform: translateX(3px); }
.w4-footer__list i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex: none; }
.w4-footer__trust { display: grid; gap: 7px; margin-top: 16px; font-size: .88rem; color: var(--w4-text); }
.w4-footer__trust li { display: flex; align-items: center; gap: 9px; }
.w4-footer__trust svg { width: 14px; height: 14px; flex: none; color: var(--accent-text); }
.w4-footer__trust a { color: var(--w4-text-hi); border-bottom: 1px solid var(--w4-line); transition: color .2s, border-color .2s; }
.w4-footer__trust a:hover { color: var(--accent-text); border-color: var(--accent-text); }
.w4-footer__social { display: flex; gap: 10px; margin-top: 18px; }
.w4-footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--w4-line); color: var(--w4-text); transition: border-color .2s, color .2s, box-shadow .2s; }
.w4-footer__social a:hover { border-color: var(--accent); color: var(--w4-text-hi); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.w4-footer__social svg { width: 18px; height: 18px; }
.w4-footer__bar { border-top: 1px solid var(--w4-line-soft); }
.w4-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 22px; }
.w4-footer__links a { display: inline-block; padding: 6px 0; color: var(--w4-text); transition: color .2s; }
.w4-footer__links a:hover { color: var(--w4-text-hi); }
.w4-footer__links .w4-footer__staff { display: inline-flex; align-items: center; gap: 7px; margin: -7px 0; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .1); color: var(--w4-text-hi); transition: border-color .2s, background-color .2s; }
.w4-footer__links .w4-footer__staff svg { width: 12px; height: 12px; flex: none; color: var(--accent-text); }
.w4-footer__links .w4-footer__staff:hover { border-color: rgba(var(--accent-rgb), .9); background: rgba(var(--accent-rgb), .18); }
.w4-footer__bar .w4-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 20px; font-family: var(--w4-font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--w4-muted); }

/* --------------------------------------------------------------------------
   Default content (blog posts, policy pages) + utility pages
   -------------------------------------------------------------------------- */
.w4-pagehead { padding-block: clamp(48px, 7vw, 90px) clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--w4-line); background: radial-gradient(900px 300px at 10% 0%, rgba(var(--accent-rgb), .16), transparent 62%); }
.w4-pagehead .w4-h1 { font-size: clamp(1.5rem, 4.2vw, 2.8rem); font-size: min(7.8cqi, 2.8rem); max-width: 24ch; }
.w4-prose { padding-block: clamp(36px, 5vw, 64px); max-width: 74ch; }
.w4-prose > * + * { margin-top: 1.15em; }
.w4-prose .w4-prose__lead { font-size: 1.12rem; line-height: 1.6; color: var(--w4-text-hi); }
.w4-prose h2, .w4-prose h3, .w4-prose h4 { font-family: var(--w4-font-display); font-stretch: 110%; font-weight: 800; color: var(--w4-text-hi); line-height: 1.15; margin-top: 1.8em; }
.w4-prose h2 { font-size: 1.6rem; } .w4-prose h3 { font-size: 1.25rem; } .w4-prose h4 { font-size: 1.05rem; }
.w4-prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.w4-prose ul, .w4-prose ol { padding-left: 1.3em; }
.w4-prose ul { list-style: disc; } .w4-prose ol { list-style: decimal; }
.w4-prose li + li { margin-top: .4em; }
.w4-prose img { border-radius: var(--w4-radius); }
.w4-prose blockquote { padding-left: 18px; border-left: 3px solid var(--accent); color: var(--w4-text-hi); }
.w4-postlist { display: grid; gap: 18px; padding-block: clamp(36px, 5vw, 64px); }
.w4-404 { display: grid; gap: 20px; justify-items: start; padding-block: clamp(80px, 12vw, 160px); }

/* --------------------------------------------------------------------------
   Extra components
   -------------------------------------------------------------------------- */

/* Hero with a callout beside the copy */
.w4-hero__inner--split { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; gap: clamp(28px, 5vw, 72px); }
.w4-hero__copy { display: grid; gap: 22px; align-content: start; }
.w4-hero__copy > .w4-actions { margin-top: 10px; }
.w4-callout { position: relative; display: grid; gap: 10px; padding: clamp(20px, 2.4vw, 26px); border-radius: var(--w4-radius); border: 1px solid rgba(var(--accent-rgb), .55); background: linear-gradient(180deg, rgba(var(--accent-rgb), .18), rgba(18, 18, 21, .78)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 30px 70px -40px rgba(var(--accent-rgb), .95); }
.w4-callout__k { font-family: var(--w4-font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); }
.w4-callout__v { font-family: var(--w4-font-display); font-stretch: 112%; font-weight: 800; font-size: clamp(2.1rem, 3.6vw, 3rem); line-height: 1; color: var(--w4-text-hi); }
.w4-callout__v small { display: inline-block; margin-left: 6px; font-family: var(--w4-font-mono); font-stretch: 100%; font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--w4-muted); }
.w4-callout > p:not([class]) { font-size: .93rem; color: var(--w4-text); }
.w4-callout .w4-list { font-size: .93rem; }
.w4-callout hr { width: 100%; height: 1px; border: 0; margin: 4px 0; background: var(--w4-line-soft); }
.w4-callout__logo { width: min(240px, 70%); height: auto; }

/* Oversized outlined word behind a section */
.w4-has-bigword { overflow: hidden; isolation: isolate; }
.w4-bigword { position: absolute; right: -1.5%; top: 4%; z-index: -1; font-family: var(--w4-font-display); font-stretch: 125%; font-weight: 900; font-size: clamp(4.5rem, 17vw, 15rem); line-height: .8; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(var(--accent-rgb), .22); pointer-events: none; -webkit-user-select: none; user-select: none; }

/* Tabs (two inquiry forms on one page) */
.w4-tabs__bar { display: none; flex-wrap: wrap; gap: 6px; padding: 6px; margin-bottom: 18px; border-radius: 12px; border: 1px solid var(--w4-line); background: var(--w4-surface); }
.w4-js .w4-tabs__bar { display: inline-flex; }
.w4-tab { min-height: 44px; padding: 0 18px; border-radius: 8px; font-size: .92rem; font-weight: 600; color: var(--w4-text); transition: background-color .2s, color .2s; }
.w4-tab:hover { color: var(--w4-text-hi); }
.w4-tab[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.w4-tabs__panel + .w4-tabs__panel { margin-top: 32px; }
.w4-js .w4-tabs__panel + .w4-tabs__panel { margin-top: 0; }
.w4-tabs__label { margin-bottom: 12px; }
.w4-js .w4-tabs__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* Service area */
.w4-radius { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3.4vw, 44px); align-items: center; padding: clamp(20px, 3vw, 34px); border-radius: var(--w4-radius); border: 1px solid var(--w4-line); background: var(--w4-surface); }
.w4-radius__map { position: relative; display: grid; place-items: center; width: clamp(150px, 19vw, 210px); aspect-ratio: 1 / 1; border-radius: 50%; border: 1px dashed rgba(var(--accent-rgb), .4); }
.w4-radius__map::before { content: ""; position: absolute; inset: 17%; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .06); }
.w4-radius__map::after { content: ""; position: absolute; inset: 36%; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), .95); background: rgba(var(--accent-rgb), .2); box-shadow: 0 0 34px rgba(var(--accent-rgb), .7); animation: w4-ping 3.2s ease-in-out infinite; }
@keyframes w4-ping { 0%, 100% { box-shadow: 0 0 20px rgba(var(--accent-rgb), .45); } 50% { box-shadow: 0 0 46px rgba(var(--accent-rgb), .95); } }
.w4-radius__pin { position: relative; z-index: 1; font-family: var(--w4-font-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--w4-text-hi); }
.w4-radius__list { display: grid; gap: 16px; }
.w4-radius__list li { display: grid; gap: 2px; padding-left: 16px; border-left: 2px solid rgba(var(--accent-rgb), .5); color: var(--w4-text-hi); font-weight: 500; }
.w4-radius__list li span { font-family: var(--w4-font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.w4-radius__list li small { font-size: .88rem; font-weight: 400; color: var(--w4-muted); }

/* Family strip: every division page closes with the way back to the parent */
.w4-family { border-top: 1px solid var(--w4-line); background: var(--w4-bg-2); }
.w4-family__inner { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 60px); align-items: center; padding-block: clamp(40px, 5vw, 66px); }
.w4-family__lead { display: grid; gap: 12px; justify-items: start; }
.w4-family__lead img { height: 58px; width: auto; }
.w4-family__lead > p:not([class]) { font-size: .93rem; color: var(--w4-text); max-width: 34ch; }
.w4-family__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.w4-family__link { position: relative; display: grid; gap: 6px; align-content: start; padding: 18px 18px 18px 22px; border-radius: 12px; overflow: hidden; border: 1px solid var(--w4-line); background: var(--w4-surface); transition: border-color .25s, transform .25s, box-shadow .3s; }
.w4-family__link::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.w4-family__link:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .8); box-shadow: 0 22px 50px -30px rgba(var(--accent-rgb), .9); }
.w4-family__name { font-family: var(--w4-font-display); font-stretch: 112%; font-weight: 800; font-size: .92rem; line-height: 1.15; text-transform: uppercase; color: var(--w4-text-hi); }
.w4-family__desc { font-size: .84rem; color: var(--w4-muted); }

@media (max-width: 900px) {
	.w4-hero__inner--split, .w4-family__inner { grid-template-columns: minmax(0, 1fr); }
	.w4-hero__inner--split { align-items: start; }
	.w4-hero__inner--split > .w4-seal { justify-self: start; width: 132px; height: 132px; }
	.w4-hero__inner--split > .w4-seal .w4-seal__n { font-size: 2.9rem; }
}
@media (max-width: 640px) {
	.w4-family__links { grid-template-columns: minmax(0, 1fr); }
	.w4-radius { grid-template-columns: minmax(0, 1fr); justify-items: start; }
	.w4-tabs__bar { display: none; }
	.w4-js .w4-tabs__bar { display: flex; }
	.w4-tab { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
.w4-js .w4-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--w4-d, 0ms); }
.w4-js .w4-reveal.is-in { opacity: 1; transform: none; }
.w4-js .w4-hero__inner > :not(.w4-hero__copy), .w4-js .w4-hero__copy > *, .w4-js .w4-slice { opacity: 0; transform: translateY(26px); animation: w4-rise .9s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 110ms + 80ms); }
.w4-hero__inner > :nth-child(2), .w4-hero__copy > :nth-child(2) { --i: 1; }
.w4-hero__inner > :nth-child(3), .w4-hero__copy > :nth-child(3) { --i: 2; }
.w4-hero__inner > :nth-child(4), .w4-hero__copy > :nth-child(4) { --i: 3; }
.w4-hero__inner > :nth-child(5), .w4-hero__copy > :nth-child(5) { --i: 4; }
.w4-hero__inner > :nth-child(6), .w4-hero__copy > :nth-child(6) { --i: 5; }
.w4-hero__inner > :nth-child(n+7), .w4-hero__copy > :nth-child(n+7) { --i: 6; }
.w4-slice:nth-child(1) { --i: 2; } .w4-slice:nth-child(2) { --i: 3; } .w4-slice:nth-child(3) { --i: 4; } .w4-slice:nth-child(4) { --i: 5; }
@keyframes w4-rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.w4-js .w4-reveal, .w4-js .w4-hero__inner > :not(.w4-hero__copy), .w4-js .w4-hero__copy > *, .w4-js .w4-slice { opacity: 1; transform: none; }
	.w4-ticker__track { animation: none; }
	.w4-wave i { transform: scaleY(.6); }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1020px) {
	.w4-nav { display: none; }
	.w4-burger { display: inline-flex; }
}
@media (max-width: 1120px) {
	.w4-chans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.w4-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.w4-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
	.w4-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.w4-divbar__parent { display: none; }
	.w4-divbar__home { display: inline-flex; }
	.w4-divbar__nav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 20px; }
}
@media (max-width: 900px) {
	.w4-split, .w4-sechead--row, .w4-hero--home .w4-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.w4-split--flip > :first-child { order: 0; }
	.w4-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.w4-slices { height: clamp(230px, 46vw, 340px); }
	.w4-slice:nth-child(even) { margin-top: 18px; margin-bottom: -18px; }
	.w4-hero--home .w4-hero__grid { padding-bottom: clamp(64px, 9vw, 90px); }
	.w4-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.w4-facts > div:nth-child(3) { border-left: 0; }
	.w4-facts > div:nth-child(n+3) { border-top: 1px solid var(--w4-line); }
	.w4-versus { grid-template-columns: minmax(0, 1fr); }
	.w4-versus__mid { justify-self: center; }
	.w4-cta__inner { grid-template-columns: minmax(0, 1fr); }
	.w4-gallery__item { grid-column: span 6; }
	.w4-gallery__item--wide { grid-column: span 12; }
	.w4-gallery { grid-auto-rows: clamp(130px, 26vw, 220px); }
}
@media (max-width: 640px) {
	:root { --w4-header-h: 60px; }
	.w4-h1, .w4-hero--page .w4-h1, .w4-hero--home .w4-h1, .w4-pagehead .w4-h1 { font-stretch: 112%; font-size: clamp(1.6rem, 8vw, 2.4rem); font-size: min(8.7cqi, 2.4rem); max-width: none; }
	.w4-h2 { font-stretch: 108%; }
	.w4-brand img { height: 38px; }
	.w4-announce { font-size: .62rem; letter-spacing: .1em; }
	.w4-announce__badge span, .w4-announce__call-label, .w4-announce__book { display: none; }
	.w4-grid--2, .w4-grid--3, .w4-grid--4, .w4-chans, .w4-steps, .w4-footer__grid, .w4-shots { grid-template-columns: minmax(0, 1fr); }
	.w4-shots .w4-shot:first-child { grid-row: auto; }
	.w4-shots .w4-shot:first-child img { aspect-ratio: 4 / 3; height: auto; }
	.w4-list--cols { grid-template-columns: minmax(0, 1fr); }
	.w4-spec dl > div, .w4-gear__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.w4-rate { grid-template-columns: minmax(0, 1fr); }
	.w4-actions .w4-btn { flex: 1 1 100%; }
	.w4-slices { gap: 8px; height: 220px; }
	.w4-slice__t { font-size: .74rem; }
	.w4-slice__label { left: 8px; bottom: 10px; gap: 8px; }
	.w4-slice:hover, .w4-slice:focus-visible { flex-grow: 1.5; }
	.w4-seal { width: 100px; height: 100px; }
	.w4-seal__n { font-size: 2.05rem; }
	.w4-facts dd { font-size: 1.02rem; }
	.w4-facts > div { padding: 16px; }
	.w4-divbar__inner { min-height: 48px; gap: 10px; }
	.w4-divbar__brand { font-size: .74rem; font-stretch: 108%; gap: 8px; flex: 0 1 auto; min-width: 0; } .w4-divbar__brand .w4-short { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
	.w4-divbar__nav { display: none; }
	.w4-divbar .w4-long { display: none; }
	.w4-divbar .w4-short { display: inline; }
	#planning-beats-crm-container { padding: 10px !important; }
	.w4-gallery { grid-auto-rows: 46vw; }
	.w4-gallery__item, .w4-gallery__item--wide { grid-column: span 12; grid-row: span 1; }
	.w4-gallery__item--tall { grid-row: span 1; }
	.w4-gallery__cap { opacity: 1; transform: none; }
	.w4-footer__bar .w4-wrap { justify-content: flex-start; }
	.w4-logos img { height: 42px; }
}
@media (max-width: 350px) { .w4-btn { padding-inline: 16px; white-space: normal; text-align: center; line-height: 1.15; } .w4-rate__amt { white-space: normal; } .w4-divbar__inner { gap: 8px; } .w4-divbar__brand { font-size: .7rem; letter-spacing: 0; gap: 6px; } .w4-divbar__cta { padding-inline: 12px; } }
/* Filled accent controls use --accent-fill, deep enough for their labels to clear WCAG AA contrast (4.5:1) in all four division colours. */
.w4-skip, .w4-btn--primary, .w4-nav__list .w4-nav--cta > a, .w4-price__flag, .w4-note::before, .w4-chip.is-on, .w4-tab[aria-selected="true"] { background: var(--accent-fill); }
@media (max-width: 1180px) { .w4-divbar__parent { display: none; } .w4-divbar__home { display: inline-flex; } }
@media (max-width: 900px) { .w4-divbar .w4-long { display: none; } .w4-divbar .w4-short { display: inline; } }

/* --------------------------------------------------------------------------
   Round 2 components
   -------------------------------------------------------------------------- */

/* Service-area line that sits under the quote buttons */
.w4-reach { display: flex; align-items: flex-start; gap: 10px; max-width: 66ch; font-size: .92rem; line-height: 1.55; color: var(--w4-muted); }
.w4-reach svg { flex: none; width: 16px; height: 16px; margin-top: .3em; color: var(--accent-text); }
.w4-reach > span { min-width: 0; }
.w4-reach b { color: var(--w4-text-hi); font-weight: 600; }
.w4-footer .w4-reach { font-size: .86rem; }
.w4-talk { display: flex; align-items: flex-start; gap: 10px; max-width: 66ch; margin-top: 10px; font-size: .92rem; line-height: 1.55; color: var(--w4-muted); }
.w4-talk svg { flex: none; width: 16px; height: 16px; margin-top: .3em; color: var(--accent-text); }
.w4-talk a { color: var(--w4-text-hi); border-bottom: 1px solid var(--w4-line); transition: color .2s, border-color .2s; }
.w4-talk a:hover { color: var(--accent-text); border-color: var(--accent-text); }

/* Kits page: logo downloads, swatches */
.w4-logokit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.w4-logokit__item { display: grid; gap: 10px; align-content: start; padding: 18px; border: 1px solid var(--w4-line); border-radius: 14px; background: rgba(255, 255, 255, .02); text-align: center; }
.w4-logokit__item img { width: 100%; height: 110px; object-fit: contain; }
.w4-logokit__item p { font-size: .88rem; color: var(--w4-text); }
.w4-logokit__item .w4-dl { margin: 0; white-space: nowrap; }
.w4-logokit__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: -4px; }
.w4-logokit__item--light { background: #f4f4f6; border-color: #d8d8de; }
.w4-logokit__item--light p { color: #2a2a30; }
.w4-logokit__item--light .w4-dl { color: #111; border-color: #bbb; }
.w4-logokit__item--light .w4-dl small { color: #555; }
.w4-h4 { font-family: var(--w4-font-display); font-stretch: 110%; font-weight: 700; font-size: 1rem; letter-spacing: .02em; text-transform: uppercase; color: var(--w4-text-hi); margin-bottom: 12px; }
.w4-dl { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; color: var(--w4-text-hi); border-bottom: 1px solid var(--w4-line); transition: color .2s, border-color .2s; }
.w4-dl:hover { color: var(--accent-text); border-color: var(--accent-text); }
.w4-dl svg { width: 13px; height: 13px; color: var(--accent-text); }
.w4-dl small { font-family: var(--w4-font-mono); font-size: .7rem; letter-spacing: .06em; color: var(--w4-muted); }
.w4-swatches { display: grid; gap: 8px; margin: 10px 0 14px; font-size: .9rem; }
.w4-swatches li { display: flex; align-items: center; gap: 10px; }
.w4-swatches i { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--w4-line); flex: none; }
.w4-swatches code { margin-left: auto; font-family: var(--w4-font-mono); font-size: .78rem; color: var(--w4-muted); }
.w4-mt-md { margin-top: 32px; }
.w4-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 24px; margin-top: 20px; padding: 20px 24px; border: 1px solid var(--w4-line); border-radius: var(--w4-radius); background: var(--w4-surface); font-size: .95rem; line-height: 1.5; }
.w4-kv dt { font-family: var(--w4-font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--w4-muted); padding-top: .3em; }
.w4-kv dd { color: var(--w4-text-hi); overflow-wrap: anywhere; }
.w4-kv a { color: var(--w4-text-hi); border-bottom: 1px solid var(--w4-line); transition: color .2s, border-color .2s; }
.w4-kv a:hover { color: var(--accent-text); border-color: var(--accent-text); }
@media (max-width: 640px) { .w4-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .w4-kv dd { margin-bottom: 10px; } }
@media (max-width: 900px) { .w4-logokit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .w4-logokit { grid-template-columns: minmax(0, 1fr); } .w4-logokit__item img { height: 90px; } }

/* Google reviews strip */
.w4-reviews { display: grid; gap: 18px; }
.w4-reviews__badge { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.w4-reviews__stars { display: inline-flex; gap: 2px; }
.w4-reviews__stars svg { width: 18px; height: 18px; fill: var(--accent); stroke: var(--accent); filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .7)); }
.w4-reviews__rating { font-family: var(--w4-font-display); font-stretch: 112%; font-weight: 800; font-size: 1.6rem; line-height: 1; color: var(--w4-text-hi); }
.w4-reviews__label { font-family: var(--w4-font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--w4-muted); }
.w4-reviews__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.w4-reviews__quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.w4-review { display: grid; gap: 14px; align-content: start; padding: 22px; border: 1px solid var(--w4-line); border-radius: var(--w4-radius); background: var(--w4-surface); }
.w4-review blockquote { font-family: var(--w4-font-serif); font-weight: 500; font-size: 1.12rem; line-height: 1.4; color: var(--w4-text-hi); }
.w4-review blockquote::before { content: "\201C"; color: var(--accent-text); margin-right: 2px; }
.w4-review figcaption { font-family: var(--w4-font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--w4-muted); }
.w4-review figcaption b { color: var(--w4-text-hi); font-weight: 700; }
@media (max-width: 900px) { .w4-reviews__quotes { grid-template-columns: minmax(0, 1fr); } }

/* Multi-event agreement band */
.w4-partner { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, 3vw, 44px); padding: clamp(22px, 3.4vw, 40px); border-radius: var(--w4-radius); overflow: hidden; border: 1px solid rgba(var(--accent-rgb), .6); background: linear-gradient(115deg, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), .04) 52%, rgba(var(--accent-rgb), 0)), var(--w4-surface); box-shadow: 0 34px 80px -50px rgba(var(--accent-rgb), .95); }
.w4-partner__badge { display: grid; place-items: center; width: clamp(60px, 7vw, 86px); aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), .7); background: rgba(var(--accent-rgb), .14); color: var(--accent-text); box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .08); }
.w4-partner__badge svg { width: 42%; height: 42%; }
.w4-partner__copy { display: grid; gap: 10px; min-width: 0; }
.w4-partner__copy .w4-h3 { font-stretch: 112%; font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.1; text-transform: uppercase; }
.w4-partner__copy > p:not([class]) { max-width: 70ch; color: var(--w4-text); }
@media (max-width: 900px) { .w4-partner { grid-template-columns: minmax(0, 1fr); justify-items: start; } }

/* Panoramic lead photo (case study) */
.w4-shot--pano img { aspect-ratio: 21 / 9; }
@media (max-width: 640px) { .w4-shot--pano img { aspect-ratio: 16 / 10; } }
.w4-shot--square img { aspect-ratio: 1 / 1; }

/* "Starting at" label above a price */
.w4-price__from { margin-bottom: -8px; font-family: var(--w4-font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--w4-muted); }

/* Video tiles: a poster that opens the video where it is hosted */
.w4-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.w4-videos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w4-video { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--w4-radius); overflow: hidden; isolation: isolate; border: 1px solid var(--w4-line); background: var(--w4-surface); transition: transform .25s ease, border-color .25s ease, box-shadow .3s ease; }
.w4-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity .3s, transform .7s ease; }
.w4-video::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 35%, rgba(0, 0, 0, .92) 100%); }
.w4-video__play { position: absolute; left: 50%; top: 42%; z-index: 2; display: grid; place-items: center; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: var(--accent-fill); color: var(--accent-ink); box-shadow: 0 0 0 8px rgba(var(--accent-rgb), .22), 0 18px 40px -12px rgba(var(--accent-rgb), 1); transition: transform .25s ease; }
.w4-video__play svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }
.w4-video__cap { position: absolute; left: 16px; right: 16px; bottom: 13px; z-index: 2; display: grid; gap: 3px; }
.w4-video__t { font-family: var(--w4-font-display); font-stretch: 108%; font-weight: 700; font-size: 1rem; line-height: 1.2; color: var(--w4-text-hi); }
.w4-video__m { font-family: var(--w4-font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--w4-text); }
.w4-video:hover, .w4-video:focus-visible { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), .85); box-shadow: 0 26px 60px -30px rgba(var(--accent-rgb), .9); }
.w4-video:hover img, .w4-video:focus-visible img { opacity: 1; transform: scale(1.05); }
.w4-video:hover .w4-video__play, .w4-video:focus-visible .w4-video__play { transform: scale(1.08); }
@media (max-width: 900px) { .w4-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .w4-videos, .w4-videos--2 { grid-template-columns: minmax(0, 1fr); } }

/* Timeline (About) */
.w4-timeline { display: grid; margin-left: 6px; border-left: 1px solid var(--w4-line); }
.w4-timeline li { position: relative; display: grid; grid-template-columns: minmax(96px, .16fr) minmax(0, 1fr); gap: 6px 22px; padding: 0 0 26px 26px; }
.w4-timeline li:last-child { padding-bottom: 0; }
.w4-timeline li::before { content: ""; position: absolute; left: -6px; top: .5em; width: 11px; height: 11px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 14px var(--accent); transform: rotate(45deg); }
.w4-timeline__y { padding-top: .22em; font-family: var(--w4-font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.w4-timeline__b { display: grid; gap: 4px; }
.w4-timeline__b b { font-family: var(--w4-font-display); font-stretch: 108%; font-weight: 700; font-size: 1.08rem; line-height: 1.25; color: var(--w4-text-hi); }
.w4-timeline__b span { font-size: .98rem; color: var(--w4-text); }
@media (max-width: 640px) { .w4-timeline li { grid-template-columns: minmax(0, 1fr); } }

/* Anniversary emblem */
.w4-emblem { justify-self: center; width: min(460px, 100%); border-radius: var(--w4-radius); overflow: hidden; border: 1px solid var(--w4-line); background: #000; box-shadow: 0 40px 90px -50px rgba(var(--accent-rgb), .85); }
.w4-emblem img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

/* Text-only client names beside the logo row */
.w4-logos__names { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
.w4-logos__names span { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--w4-line); background: rgba(255, 255, 255, .03); font-family: var(--w4-font-display); font-stretch: 108%; font-weight: 700; font-size: .86rem; letter-spacing: .02em; color: var(--w4-text-hi); }

/* Serif pull line (the mantra) */
.w4-serif { font-family: var(--w4-font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.25rem, 2.1vw, 1.7rem); line-height: 1.3; color: var(--w4-text-hi); }

/* Hero photo: show more of the picture on wide screens, where the copy sits clear of it */
@media (min-width: 901px) {
	.w4-hero__media img { opacity: .72; }
	.w4-hero::before {
		background:
			linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .56) 58%, var(--w4-bg) 100%),
			linear-gradient(90deg, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .9) 36%, rgba(0, 0, 0, .5) 68%, rgba(0, 0, 0, .22) 100%);
	}
}

/* Small phones: fact strips stack and long headline words stay inside the column */
@media (max-width: 389px) {
	.w4-facts { grid-template-columns: minmax(0, 1fr); }
	.w4-facts > div, .w4-facts > div:nth-child(3) { border-left: 0; }
	.w4-facts > div:nth-child(n+2) { border-top: 1px solid var(--w4-line); }
}
@media (max-width: 300px) {
	.w4-h2 { font-size: 1.36rem; }
}

/* Photo trio: the large tile takes its height from the two small ones. Its image is lifted out of the
   flow, so the 3000x1500 placeholder size WordPress gives lazy-loaded images cannot stretch the rows. */
@media (min-width: 641px) {
	.w4-shots .w4-shot:first-child img { position: absolute; inset: 0; }
}
.w4 img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 300px 150px; }

/* Photo captions stay readable over bright parts of a picture and wrap inside the tile */
.w4-shot__cap { right: 14px; text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 14px rgba(0, 0, 0, .85); }

/* Phone numbers in running text stay on one line */
.w4 a[href^="tel:"]:not(.w4-btn):not(.w4-contact) { white-space: nowrap; }

/* Tap targets: links in the top bar and the division bar use the full height of their bar */
.w4-announce__contact, .w4-divbar__brand { align-self: stretch; }
@media (max-width: 640px) { .w4-divbar__home { height: 34px; padding: 0 10px; } }

/* Inquiry forms keep a sensible height while they load or switch tabs */
iframe[data-pb-form] { min-height: 420px; }


/* --------------------------------------------------------------------------
   Round 3 components
   -------------------------------------------------------------------------- */

/* Featured work: photo tiles that open a case study */
.w4-works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.w4-work { position: relative; display: flex; align-items: flex-end; min-height: clamp(340px, 34vw, 470px); border-radius: var(--w4-radius); overflow: hidden; isolation: isolate; border: 1px solid var(--w4-line); background: var(--w4-surface); transition: transform .25s ease, border-color .25s ease, box-shadow .3s ease; }
.w4-work img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .3s, transform .7s ease; }
.w4-work::before { content: ""; position: absolute; inset: 0 0 auto 0; z-index: 2; height: 4px; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
.w4-work::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .04) 28%, rgba(0, 0, 0, .8) 62%, rgba(0, 0, 0, .96) 100%); }
.w4-work__body { position: relative; z-index: 2; display: grid; gap: 8px; width: 100%; padding: clamp(18px, 2.2vw, 26px); }
.w4-work__k { font-family: var(--w4-font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 12px rgba(0, 0, 0, .9); }
.w4-work__t { font-family: var(--w4-font-display); font-stretch: 112%; font-weight: 800; font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.08; text-transform: uppercase; color: var(--w4-text-hi); text-wrap: balance; }
.w4-work__d { font-size: .95rem; line-height: 1.5; color: var(--w4-text); }
.w4-work .w4-arrow { margin-top: 4px; font-size: .92rem; }
.w4-work:hover, .w4-work:focus-visible { transform: translateY(-5px); border-color: rgba(var(--accent-rgb), .85); box-shadow: 0 30px 70px -34px rgba(var(--accent-rgb), .95); }
.w4-work:hover img, .w4-work:focus-visible img { opacity: 1; transform: scale(1.05); }
.w4-work:hover .w4-arrow::after, .w4-work:focus-visible .w4-arrow::after { transform: translateX(5px); }
@media (max-width: 900px) {
	.w4-works { grid-template-columns: minmax(0, 1fr); }
	.w4-work { min-height: clamp(260px, 50vw, 380px); }
	.w4-work::after { background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .74) 42%, rgba(0, 0, 0, .96) 100%); }
}

/* Promo strip under a hero: one line that points at a section further down */
.w4-spot { display: block; border-bottom: 1px solid var(--w4-line); background: linear-gradient(90deg, rgba(var(--accent-rgb), .24), rgba(var(--accent-rgb), .06) 58%, rgba(var(--accent-rgb), 0)), var(--w4-ink); }
.w4-spot__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; padding-block: 14px; }
.w4-spot__k { display: inline-flex; align-items: center; gap: 8px; font-family: var(--w4-font-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); white-space: nowrap; }
.w4-spot__k svg { width: 14px; height: 14px; flex: none; }
.w4-spot__t { flex: 1 1 300px; min-width: 0; font-weight: 600; color: var(--w4-text-hi); }
.w4-spot .w4-arrow { font-size: .92rem; white-space: nowrap; }
.w4-spot:hover .w4-arrow::after, .w4-spot:focus-visible .w4-arrow::after { transform: translateX(5px); }
.w4-spot:hover .w4-spot__t, .w4-spot:focus-visible .w4-spot__t { color: var(--accent-text); }

/* A photo credit under a group of pictures */
.w4-stack > .w4-small { margin-top: .7em; }

/* Very narrow phones: a long division name wraps onto two lines instead of being cut off */
@media (max-width: 359px) {
	.w4-divbar__brand { white-space: normal; line-height: 1.15; }
	.w4-divbar__brand .w4-short { overflow: visible; text-overflow: clip; }
}


/* --------------------------------------------------------------------------
   Round 4 components
   -------------------------------------------------------------------------- */

/* Events we do: four photo tiles, two by two. Wide tiles carry the words over the photo;
   from 900px down the photo sits on top and the words go under it, and phones get one column. */
.w4-works--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w4-works--4 .w4-work { min-height: clamp(360px, 38vw, 400px); }
.w4-works--4 .w4-work__d { max-width: 46ch; }
.w4-works--4 .w4-work::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, .56) 52%, rgba(0, 0, 0, .9) 76%, rgba(0, 0, 0, .96) 100%); }
@media (max-width: 900px) {
	.w4-works--4 .w4-work { flex-direction: column; align-items: stretch; min-height: 0; }
	.w4-works--4 .w4-work img { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 10; }
	.w4-works--4 .w4-work::after { inset: 0 0 auto 0; aspect-ratio: 16 / 10; background: linear-gradient(180deg, rgba(18, 18, 21, 0) 50%, rgba(18, 18, 21, .8) 84%, var(--w4-surface) 100%); }
	.w4-works--4 .w4-work__body { flex: 1 1 auto; grid-template-rows: auto auto 1fr auto; margin-top: -30px; padding-top: 0; }
	.w4-works--4 .w4-work:hover img, .w4-works--4 .w4-work:focus-visible img { transform: none; }
}
@media (max-width: 600px) {
	.w4-works--4 { grid-template-columns: minmax(0, 1fr); }
}

/* The bar above the navigation: "Fully insured" joins the anniversary line where there is room for it */
.w4-announce__more { color: var(--w4-text-hi); }
@media (max-width: 760px) {
	.w4-announce__more { display: none; }
}

/* Home headline: "Event Management" is the longest line it has to hold. The words take a little more of the
   hero than the four photo strips do, and the type is sized so that line fits its column at every width. */
@media (min-width: 901px) {
	.w4-hero--home .w4-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
.w4-hero--home .w4-h1 { font-size: clamp(1.5rem, 3.6vw, 2.9rem); font-size: min(6.9cqi, 2.9rem); }
@media (max-width: 640px) {
	.w4-hero--home .w4-h1 { font-size: clamp(1.35rem, 6.9vw, 2.4rem); font-size: min(7.7cqi, 2.4rem); }
}


/* --------------------------------------------------------------------------
   Round 5 components
   -------------------------------------------------------------------------- */

/* Home hero: the four divisions as photo links, four equal squares. They sit two by two beside the headline and on
   phones, and four in a row on tablets, where two by two would fill the whole screen. */
.w4-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.w4-tile { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 12px; border: 1px solid var(--w4-line); background: var(--w4-surface); container-type: inline-size; transition: border-color .3s, box-shadow .3s; }
.w4-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .4s, transform .8s ease; }
.w4-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; z-index: 2; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
.w4-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, .7) 74%, rgba(0, 0, 0, .95) 100%); }
.w4-tile__n { position: absolute; top: 14px; left: 12px; z-index: 3; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, .62); font-family: var(--w4-font-mono); font-size: .66rem; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.w4-tile__label { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: grid; gap: 4px; }
.w4-tile__t { font-family: var(--w4-font-display); font-stretch: 100%; font-weight: 800; font-size: clamp(.66rem, 6.4cqi, 1.05rem); line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; color: var(--w4-text-hi); }
/* The one-line description under a name shows only where the square is wide enough to hold it. */
.w4-tile__d { display: none; font-size: .8rem; line-height: 1.25; color: var(--w4-text); }
@container (min-width: 200px) {
	.w4-tile__d { display: block; }
}
.w4-tiles__credit { grid-column: 1 / -1; font-family: var(--w4-font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; text-align: right; color: var(--w4-muted); }
.w4-tile:hover, .w4-tile:focus-visible { border-color: rgba(var(--accent-rgb), .9); box-shadow: 0 24px 60px -24px rgba(var(--accent-rgb), .9); }
.w4-tile:hover img, .w4-tile:focus-visible img { opacity: 1; transform: scale(1.05); }
.w4-js .w4-tile, .w4-js .w4-tiles__credit { opacity: 0; transform: translateY(26px); animation: w4-rise .9s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 110ms + 80ms); }
.w4-tile:nth-child(1) { --i: 2; } .w4-tile:nth-child(2) { --i: 3; } .w4-tile:nth-child(3) { --i: 4; } .w4-tile:nth-child(4) { --i: 5; } .w4-tiles__credit { --i: 6; }
@media (max-width: 900px) {
	.w4-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.w4-hero--home .w4-hero__grid { padding-bottom: clamp(48px, 7vw, 72px); }
}
@media (max-width: 600px) {
	.w4-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.w4-tile__n { top: 12px; left: 10px; }
	.w4-tile__label { left: 10px; right: 10px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.w4-js .w4-tile, .w4-js .w4-tiles__credit { opacity: 1; transform: none; }
}

/* Home hero photo: the festival crowd fills the first screen instead of stretching down the whole section,
   so it is still a picture on a phone, and it shows a little more than the photos on the inner pages. */
.w4-hero--home .w4-hero__media { inset: 0 0 auto 0; height: min(100%, 760px); -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
.w4-hero--home .w4-hero__media img { opacity: .66; }
@media (min-width: 901px) {
	.w4-hero--home .w4-hero__media { height: 100%; }
	.w4-hero--home .w4-hero__media img { opacity: .84; }
}

/* Scrolling banner: one row. It holds many more event types than it first did, so it takes longer to come
   round at the same reading speed. Each type is a link to the part of the site that covers it (w4.js); pointing
   at the row slows it so a link can be clicked, and never stops it. */
.w4-ticker--long .w4-ticker__track.is-ready { animation-duration: 144s; }
.w4-ticker__track a { color: inherit; -webkit-text-stroke: inherit; text-decoration: none; cursor: pointer; transition: color .25s, -webkit-text-stroke-color .25s; }
@media (hover: hover) {
	.w4-ticker__track a:hover { color: var(--w4-text-hi); -webkit-text-stroke-color: transparent; }
}

/* "More, just ask" at the end of the W4-way list */
.w4-chiprow .w4-chip-more { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 8px; border: 1px dashed rgba(var(--accent-rgb), .85); font-size: .86rem; font-weight: 700; color: var(--accent-text); transition: color .2s, background-color .2s, border-color .2s; }
.w4-chiprow .w4-chip-more:hover, .w4-chiprow .w4-chip-more:focus-visible { border-style: solid; color: var(--w4-text-hi); background: rgba(var(--accent-rgb), .18); }

/* The DJ page's sub-navigation holds six links (the W4 Events App section is one of them), so its
   "A W4 Entertainment company" line makes way for them. */
.w4-div--dj .w4-divbar__parent { display: none; }
.w4-div--dj .w4-divbar__nav { gap: clamp(12px, 1.4vw, 20px); }

/* Blog. The index lists articles as cards (the newest one wide on the first page); an article reads in one
   column sized for long text. */
.w4-wrap--read { max-width: calc(720px + var(--w4-gutter) * 2); }
.w4-eyebrow a { color: inherit; transition: color .2s; }
.w4-eyebrow a:hover { color: var(--w4-text-hi); }
.w4-pagehead .w4-eyebrow { margin-bottom: 14px; }
.w4-pagehead .w4-sub { margin-top: 18px; }
.w4-pagehead--blog { padding-bottom: clamp(30px, 4vw, 52px); }
.w4-pagehead--post .w4-h1 { font-stretch: 108%; font-size: clamp(1.6rem, 4.4vw, 2.5rem); font-size: min(7cqi, 2.5rem); line-height: 1.08; letter-spacing: -.01em; text-transform: none; max-width: none; }
.w4-pagehead--post .w4-hero__meta { margin-top: 20px; }
@media (max-width: 640px) {
	.w4-pagehead--post .w4-h1 { font-stretch: 104%; font-size: clamp(1.45rem, 7vw, 2rem); font-size: min(7.6cqi, 2rem); }
}

.w4-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 26px); padding-block: clamp(36px, 5vw, 64px); }
.w4-posts--empty { grid-template-columns: minmax(0, 1fr); }
.w4-post { padding: 0; gap: 0; overflow: hidden; }
.w4-post__media { position: relative; overflow: hidden; border-bottom: 1px solid var(--w4-line); background: var(--w4-surface); }
.w4-post__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .8s ease; }
.w4-post:hover .w4-post__media img, .w4-post:focus-visible .w4-post__media img { transform: scale(1.04); }
.w4-post__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 12px; padding: clamp(20px, 2.4vw, 28px); }
.w4-post--lead { grid-column: 1 / -1; }
.w4-post--lead .w4-h3 { font-stretch: 110%; font-weight: 800; font-size: clamp(1.3rem, 2.5vw, 1.9rem); line-height: 1.12; max-width: 30ch; }
.w4-post--lead .w4-card__text { font-size: 1.04rem; max-width: 64ch; }
@media (min-width: 761px) {
	.w4-post--lead.w4-post--photo { flex-direction: row; }
	.w4-post--lead .w4-post__media { flex: 0 0 48%; min-height: 320px; border-bottom: 0; border-right: 1px solid var(--w4-line); }
	.w4-post--lead .w4-post__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
	.w4-post--lead .w4-post__body { justify-content: center; padding: clamp(24px, 3.4vw, 44px); }
	.w4-post--lead .w4-card__foot { margin-top: 0; }
}
@media (max-width: 1000px) { .w4-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .w4-posts { grid-template-columns: minmax(0, 1fr); } }

.pagination { padding-bottom: clamp(40px, 5vw, 64px); }
.pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--w4-line); font-family: var(--w4-font-mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--w4-text); transition: border-color .2s, color .2s; }
.pagination a.page-numbers:hover { border-color: rgba(var(--accent-rgb), .8); color: var(--w4-text-hi); }
.pagination .page-numbers.current { border-color: transparent; background: var(--accent-fill); color: var(--accent-ink); }
.pagination .page-numbers.dots { min-width: 0; padding: 0 4px; border: 0; }

.w4-article__media { margin-top: clamp(26px, 3.6vw, 44px); }
.w4-article .w4-prose { max-width: none; font-size: 1.1rem; line-height: 1.72; }
.w4-article .w4-prose > p:first-child { font-size: 1.22rem; line-height: 1.6; color: var(--w4-text-hi); }
.w4-prose strong { color: var(--w4-text-hi); }
.w4-prose figure { margin-block: 1.7em; }
.w4-prose figcaption { margin-top: 8px; font-size: .86rem; color: var(--w4-muted); }
.w4-prose hr { margin-block: 2em; border: 0; border-top: 1px solid var(--w4-line); }
.w4-prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.w4-prose th, .w4-prose td { padding: 10px 12px; border: 1px solid var(--w4-line); text-align: left; vertical-align: top; }
.w4-prose th { background: var(--w4-surface); color: var(--w4-text-hi); }
.w4-prose .wp-block-button__link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 10px; background: var(--accent-fill); color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.w4-article__foot { display: grid; gap: clamp(22px, 3vw, 34px); padding-bottom: clamp(52px, 7vw, 96px); }
.w4-article__foot .w4-small a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.w4-article__cta { grid-template-columns: auto minmax(0, 1fr); row-gap: 18px; }
.w4-article__cta .w4-partner__badge { align-self: start; }
.w4-article__cta .w4-btn { grid-column: 2; justify-self: start; }
.w4-postnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.w4-postnav p { display: grid; align-content: start; gap: 6px; padding: 16px 18px; border-radius: var(--w4-radius); border: 1px solid var(--w4-line); background: var(--w4-surface); }
.w4-postnav p a { font-family: var(--w4-font-display); font-stretch: 106%; font-weight: 700; line-height: 1.25; color: var(--w4-text-hi); transition: color .2s; }
.w4-postnav p a:hover { color: var(--accent-text); }
.w4-postnav .w4-postnav__next { grid-column: 2; text-align: right; }
.w4-postnav .w4-postnav__all { grid-column: 1 / -1; padding: 0; border: 0; background: none; }
.w4-postnav .w4-postnav__all a { font-family: inherit; font-stretch: normal; color: var(--accent-text); }
@media (max-width: 640px) {
	.w4-article__cta { grid-template-columns: minmax(0, 1fr); }
	.w4-article__cta .w4-btn { grid-column: auto; }
	.w4-postnav { grid-template-columns: minmax(0, 1fr); }
	.w4-postnav .w4-postnav__next { grid-column: auto; text-align: left; }
}

/* Narrow division tiles (small phones, and the narrowest two-column hero): the name gets a little more room,
   so "Groovy Event Rentals" stays on two lines. */
@container (max-width: 112px) {
	.w4-tile__label { left: 6px; right: 6px; }
	.w4-tile__t { font-size: .64rem; letter-spacing: 0; }
}

/* An empty blog list is one full-width line at every screen size. */
.w4-posts.w4-posts--empty { grid-template-columns: minmax(0, 1fr); }

/* A division's own logo at the top of the price box beside its headline (the DJ and Groovy pages; the Mask Audio
   page has shown its logo there since the first round). These two files are cut close to the artwork, and a soft
   shadow keeps their colours clear of the tinted box. */
.w4-callout__logo--mark { width: min(260px, 76%); margin-bottom: 8px; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .6)); }

/* The DJ division goes by its full name, "DJ & Photo Booth Services", on phones as well. On most phones that is too
   long for one line beside the quote button, so it takes two lines instead of being cut short. */
@media (max-width: 419px) { .w4-div--dj .w4-divbar__brand { white-space: normal; line-height: 1.15; } .w4-div--dj .w4-divbar__brand .w4-short { overflow: visible; text-overflow: clip; } }

/* The notes in the DJ price box are short sentences, and each package card now starts with "Equipment package"
   before its guest count. Where one of them needs two lines, the lines come out even. */
.w4-div--dj .w4-callout > p:not([class]), .w4-div--dj .w4-price__for { text-wrap: balance; }