/* =============================================================================
   BigMouth — built from BigM-Website-110326 (InDesign, 1600pt artboards).

   Every size below is in design pixels (1pt = 1px at a 1600px viewport) multiplied
   by --u, so the layout matches the artboard at 1600px and scales proportionally
   below it.

   Vertical rhythm mirrors InDesign: each text element's box is trimmed so it runs
   from (first baseline − line height) to its last baseline. Then:
     - gap between paragraphs = space after + space before (no line-box slop),
     - a section's --space = distance from the previous section's last baseline
       (or bottom edge) to this section's box top.
   --m is (ascent − descent) / 2 of the font, as a fraction of font size.
   ========================================================================== */

/* Neue Haas Grotesk Display Std, self-hosted from the design package (assets/fonts). */
@font-face {
	font-family: "BM Neue Haas Display";
	src: url("../fonts/NHaasGroteskDSStd-25Th.woff2") format("woff2");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "BM Neue Haas Display";
	src: url("../fonts/NHaasGroteskDSStd-45Lt.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "BM Neue Haas Display";
	src: url("../fonts/NHaasGroteskDSStd-55Rg.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "BM Neue Haas Display";
	src: url("../fonts/NHaasGroteskDSStd-65Md.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

:root {
	--u: min(1px, calc(100vw / 1600));

	--bm-orange: #e64623;
	--bm-red: #d42618;
	--bm-ink: #000;
	--bm-sub: #323737;
	--bm-head: #4b5055;
	--bm-head-alt: #555a5f;
	--bm-grey-bg: #f0f0f0;

	--font: "BM Neue Haas Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--w-thin: 200;
	--w-light: 300;
	--w-roman: 400;
	--w-medium: 500;
	/* InDesign set this with Optical kerning, which browsers can't do; these offsets
	   (measured from line widths in the PDF) bring the CSS widths back in line. */
	--opt-display: -0.011em;
	--opt-copy: -0.0055em;
	--opt-sub: -0.004em;
	--opt-thin: -0.014em;
	/* (ascent − descent) / 2 per weight of Neue Haas Grotesk Display: 65 Md 930/263, 55 Rg 916/228, 25 Th 910/204 */
	--m: 0.3335;
	--m-roman: 0.344;
	--m-thin: 0.353;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: #fff;
	color: var(--bm-ink);
	font-family: var(--font);
	font-weight: var(--w-roman);
	font-size: calc(30 * var(--u));
	line-height: calc(40 * var(--u));
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-kerning: normal;
	text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
strong, b { font-weight: var(--w-medium); }

.screen-reader-text,
.skip-link:not(:focus) {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed; z-index: 100; top: 8px; left: 8px;
	padding: 8px 12px; background: #fff; color: #000;
	font-size: 16px; line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   Trimmed text boxes
   ------------------------------------------------------------------------ */

.tx,
.title,
.prose > p, .prose > h2, .prose > h3,
.prose > ul > li, .prose > ol:not(.numbered) > li,
.numbered__title, .numbered__item > p,
.clients__cat, .clients__list > li,
.next-link__label,
.site-menu__list > li,
.address {
	--k: calc(var(--lh) * var(--u) / 2 - var(--fs) * var(--u) * var(--m));
	font-size: calc(var(--fs) * var(--u));
	line-height: calc(var(--lh) * var(--u));
	padding-top: var(--k);
	margin-top: calc(var(--sb, 0) * var(--u));
	margin-bottom: calc(var(--sa, 0) * var(--u) - var(--k));
}

.prose > p, .numbered__item > p,
.prose > ul > li, .prose > ol:not(.numbered) > li,
.clients__list > li,
.site-menu__list > li,
.address { --m: var(--m-roman); }
.prose > h3, .prose > .subhead,
.next-link__label { --m: var(--m-thin); }

/* Flow containers: flex columns so margins add up instead of collapsing. */
.prose,
.prose > ul, .prose > ol:not(.numbered),
.numbered, .numbered__item,
.clients__col,
.sec {
	display: flex;
	flex-direction: column;
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child,
.numbered__item > :last-child,
.prose > ul > li:last-child,
.prose > ol:not(.numbered) > li:last-child,
.clients__list > li:last-child { margin-bottom: calc(-1 * var(--k)); }

/* ---------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------ */

.site-header {
	position: relative;
	z-index: 50;
	height: calc(62 * var(--u));
	background: var(--bm-orange);
}
.site-header__inner {
	position: relative;
	width: calc(1600 * var(--u));
	height: 100%;
	margin: 0 auto;
}
.site-logo {
	position: absolute;
	left: calc(35.4 * var(--u));
	top: calc(12.4 * var(--u));
	width: calc(232.3 * var(--u));
}
.site-logo__svg { width: 100%; height: auto; }

.menu-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: calc(80 * var(--u));
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
}
.menu-toggle__icon {
	position: absolute;
	left: calc(19 * var(--u));      /* lines at x 1539 */
	top: calc(23 * var(--u));
	width: calc(25 * var(--u));
	height: calc(14 * var(--u));
}
.menu-toggle__icon span {
	position: absolute;
	left: 0;
	width: 100%;
	height: max(1px, calc(2 * var(--u)));
	background: currentColor;
	transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.menu-toggle__icon span:nth-child(1) { top: 0; }
.menu-toggle__icon span:nth-child(2) { top: calc(6 * var(--u)); }
.menu-toggle__icon span:nth-child(3) { top: calc(12 * var(--u)); }

/* Open: a 19×19 ✕ at x 1558, y 21 */
.menu-toggle[aria-expanded="true"] .menu-toggle__icon {
	left: calc(36 * var(--u));
	top: calc(21 * var(--u));
	width: calc(19 * var(--u));
	height: calc(19 * var(--u));
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span {
	top: calc(9 * var(--u));
	width: calc(26.87 * var(--u));
	left: calc(-3.93 * var(--u));
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(1) { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(3) { transform: rotate(-45deg); }

.site-menu {
	position: absolute;
	top: 100%;
	right: 0;
	width: calc(196 * var(--u));
	height: calc(222 * var(--u));
	background: var(--bm-orange);
	box-shadow: calc(7.7 * var(--u)) calc(7.7 * var(--u)) calc(5.5 * var(--u)) rgb(0 0 0 / .22);   /* InDesign: 22%, offset 7.7, size 5.5 */
}
.site-menu[hidden] { display: none; }
.site-menu__list {
	padding-left: calc(26.4 * var(--u));
	/* first baseline 14px below the bar */
	margin-top: calc((14 - 42.9) * var(--u));
}
.site-menu__list > li {
	--fs: 18.7;
	--lh: 42.9;
	letter-spacing: .02em;
	color: #fff;
}
.site-menu__list a { text-decoration: none; }
.site-menu__list a:hover,
.site-menu__list a:focus-visible,
.site-menu__list .current-menu-item > a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }

/* ---------------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------------ */

.site-main { padding-bottom: calc(160 * var(--u)); overflow: hidden; }

.sec { margin-top: calc(var(--space, 0) * var(--u)); }

.col {
	width: calc(900 * var(--u));
	margin-inline: auto;
}
.col--narrow { width: calc(800 * var(--u)); }

/* Titles ------------------------------------------------------------------ */

.sec--title {
	width: calc(1600 * var(--u));
	margin-inline: auto;
	padding-left: calc(var(--x, 50) * var(--u));
}
.title {
	font-weight: var(--w-medium);
	letter-spacing: calc(var(--ls, -0.01em) + var(--opt-display));
	color: var(--bm-head);
	white-space: nowrap;
	font-kerning: normal;
}
.title--hero    { --fs: 140.625; --lh: 126; }
.title--section { --fs: 120; --lh: 100; color: var(--bm-head-alt); }
.title--page    { --fs: 300; --lh: 270; --ls: -0.02em; }
/* Per-page overrides come from ACF as inline --fs / --lh / --ls on the heading and --x on the section. */

/* Full-width image -------------------------------------------------------- */

.bleed-image {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #5d6670;
}
.bleed-image__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Prose (Basic Copy, Sub 2, Subhead) -------------------------------------- */

.prose > p,
.numbered__item > p {
	--fs: 30; --lh: 40; --sa: 16;
	letter-spacing: calc(.02em + var(--opt-copy));
}
.prose > h2,
.numbered__title {
	--fs: 35; --lh: 34; --sb: 42; --sa: 24;
	letter-spacing: var(--opt-sub);
	font-weight: var(--w-medium);
	color: var(--bm-sub);
}
.prose > h3,
.prose > .subhead {
	--fs: 66; --lh: 60; --sb: 112; --sa: 34;
	position: relative;
	font-weight: var(--w-thin);
	letter-spacing: calc(.01em + var(--opt-thin));
	color: var(--bm-ink);
}
/* 300px red rule, 84px above the first baseline */
.prose > h3::before,
.prose > .subhead::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(-24 * var(--u));
	width: calc(300 * var(--u));
	height: max(1px, var(--u));
	background: var(--bm-red);
}
.prose a { color: var(--bm-red); text-decoration: none; }
.prose a:hover { text-decoration: underline; }

/* Lists inside rich text: FAQ "Numbered copy" and "Bulleted copy" */
.prose > ol:not(.numbered), .prose > ul { margin-bottom: calc(16 * var(--u)); }
.prose > ol:not(.numbered) > li,
.prose > ul > li {
	--fs: 30; --lh: 40; --sa: 16;
	position: relative;
	letter-spacing: calc(.02em + var(--opt-copy));
}
.prose > ol:not(.numbered) { counter-reset: bm; }
.prose > ol:not(.numbered) > li { padding-left: calc(30 * var(--u)); counter-increment: bm; }
.prose > ol:not(.numbered) > li::before {
	content: counter(bm) ".";
	position: absolute;
	left: 0;
}
.prose > ul > li { padding-left: calc(24 * var(--u)); }
.prose > ul > li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--bm-red);
	font-weight: var(--w-medium);
}
.prose > ol:not(.numbered) > li::before,
.prose > ul > li::before { top: var(--k); }

/* Numbered list (Driver Brands, Deliverables) ----------------------------- */

.numbered { margin-top: calc(var(--intro-space, 110) * var(--u)); }
.prose > .numbered:first-child { margin-top: 0; }
.sec--list .prose > .subhead { --sa: 0; }   /* intro → first item is set by --intro-space alone */
.numbered__item > :first-child { margin-top: 0; }                            /* the item gap below carries it */
.numbered__item + .numbered__item { margin-top: calc(58 * var(--u)); }       /* 16 after + 42 before */
.numbered__item.has-link + .numbered__item { margin-top: calc(96.3 * var(--u)); }
.numbered__item > p.more { margin-top: calc(1.8 * var(--u)); }
.num {
	display: inline-block;
	min-width: calc(36 * var(--u));
	color: var(--bm-red);
}
.num--wide { min-width: 0; margin-right: .29em; }
.numbered__item > p.more { text-align: right; }
.more-link {
	display: inline-flex;
	align-items: flex-end;
	gap: calc(5 * var(--u));
	color: var(--bm-ink) !important;
	text-decoration: none;
}
.more-link__arrow {
	width: calc(31 * var(--u));
	height: calc(31 * var(--u));
	margin-bottom: calc(-4 * var(--u));
	color: var(--bm-red);
}

/* FAQs -------------------------------------------------------------------- */

.prose > h2.faq__q {
	--fs: 35; --lh: 52; --sb: 72; --sa: 24;
	position: relative;
	letter-spacing: calc(.02em + var(--opt-copy));
	color: var(--bm-ink);
}
.prose > h2.faq__q::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(-15 * var(--u));
	width: calc(200 * var(--u));
	height: max(1px, var(--u));
	background: var(--bm-red);
}

/* Clients ----------------------------------------------------------------- */

.clients {
	display: grid;
	grid-template-columns: calc(456 * var(--u)) 1fr;
	align-items: start;
}
.clients__cat {
	--fs: 30; --lh: 27; --sb: 27; --sa: 27;
	letter-spacing: var(--opt-sub);
	font-weight: var(--w-medium);
}
.clients__col > .clients__cat:first-child { margin-top: 0; }
.clients__list {
	display: flex;
	flex-direction: column;
	margin-bottom: calc(16 * var(--u));
}
.clients__col > .clients__list:last-child { margin-bottom: 0; }
.clients__list > li {
	--fs: 27; --lh: 27; --sa: 16;
	position: relative;
	padding-left: calc(24 * var(--u));
	letter-spacing: calc(.02em + var(--opt-copy));
}
.clients__list > li::before {
	content: "•";
	position: absolute;
	left: 0;
	top: var(--k);
	color: var(--bm-red);
	font-weight: var(--w-medium);
}

/* Vision rings ------------------------------------------------------------ */

.vision {
	position: relative;
	height: calc(1200 * var(--u));
	overflow: hidden;
	background: var(--bm-orange);
}
.vision__graphic {
	position: absolute;
	top: 0;
	left: 50%;
	width: calc(1600 * var(--u));
	height: calc(1200 * var(--u));
	max-width: none;
	transform: translateX(-50%);
	overflow: visible;
}
.vision__labels { font-family: var(--font); font-weight: var(--w-medium); letter-spacing: var(--opt-sub); }
.vision__headline {
	--fs: 120; --lh: 110;
	position: absolute;
	z-index: 1;
	top: calc(32 * var(--u));
	left: max(calc(54 * var(--u)), calc(50% - 746 * var(--u)));
	color: #fff;
}

/* Orange band ------------------------------------------------------------- */

.band {
	position: relative;
	height: calc(688 * var(--u));
	overflow: hidden;
	background: var(--bm-orange);
	isolation: isolate;
}
/* InDesign: the texture is placed 1:1 with Color Burn at 22% over the orange fill. */
.band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--texture) center / cover no-repeat;
	mix-blend-mode: color-burn;
	opacity: .22;
}
.title--band {
	--fs: 112.5; --lh: 100; --ls: 0em;
	color: #fff;
	text-shadow: 0 0 calc(18 * var(--u)) rgb(0 0 0 / .5);   /* InDesign drop shadow: 50%, size 18 */
}
.band__headline {
	position: absolute;
	z-index: 1;
	top: calc(48.5 * var(--u));
	left: max(calc(75 * var(--u)), calc(50% - 725 * var(--u)));
}

/* Three kinds of brands --------------------------------------------------- */

.drivers {
	position: relative;
	height: calc(1200 * var(--u));
	background: var(--bm-grey-bg);
}
.drivers__graphic {
	width: calc(1600 * var(--u));
	height: 100%;
	margin-inline: auto;
	font-family: var(--font);
	font-weight: var(--w-medium);
	letter-spacing: var(--opt-sub);
}

/* Contact ----------------------------------------------------------------- */

.booking { margin-top: calc(66.8 * var(--u)); }
.booking__placeholder { width: 100%; height: auto; }
.booking__embed { min-width: 320px; height: calc(700 * var(--u)); min-height: 640px; }
.address {
	--fs: 16; --lh: 22; --sb: 59;
	margin-bottom: 0;
	color: var(--bm-sub);
	white-space: pre-wrap;
	border-top: 1px solid var(--bm-ink);
	padding-top: calc(var(--k) + 13.9 * var(--u));
}
.address strong { margin-right: .75em; }

/* Next-page link ---------------------------------------------------------- */

.sec--next {
	width: calc(900 * var(--u));
	margin-inline: auto;
	align-items: flex-end;
}
.next-link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: calc(250 * var(--u));
	color: var(--bm-ink);
	text-decoration: none;
}
.next-link::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: calc(200 * var(--u));
	height: max(1px, var(--u));
	background: var(--bm-red);
}
.next-link__label {
	--fs: 66; --lh: 60; --sb: 20;   /* baseline 80px below the rule */
	margin-bottom: calc(-1 * var(--k));
	font-weight: var(--w-thin);
	letter-spacing: calc(.01em + var(--opt-thin));
	white-space: nowrap;
}
.next-link__arrow {
	width: calc(46 * var(--u));
	height: calc(46 * var(--u));
	margin-top: calc(51 * var(--u));
	margin-right: calc(6 * var(--u));
	align-self: flex-end;
	color: var(--bm-red);
	transition: transform .2s ease;
}
.next-link:hover .next-link__arrow,
.next-link:focus-visible .next-link__arrow { transform: translateX(calc(6 * var(--u))); }

:focus-visible { outline: 2px solid var(--bm-red); outline-offset: 3px; }
.site-header :focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------------------
   Small screens — not in the design; a proportional adaptation.
   ------------------------------------------------------------------------ */

@media (max-width: 760px) {
	:root { --u: calc(100vw / 760); }

	.site-header { height: 56px; }
	.site-header__inner { width: auto; }
	.drivers { height: auto; }
	.drivers__graphic { width: 100%; height: auto; }
	.site-logo { left: 20px; top: 15px; width: 150px; }
	.menu-toggle { width: 64px; }
	.menu-toggle__icon { left: 20px; top: 21px; width: 24px; height: 14px; }
	.menu-toggle__icon span { height: 2px; }
	.menu-toggle__icon span:nth-child(2) { top: 6px; }
	.menu-toggle__icon span:nth-child(3) { top: 12px; }
	.menu-toggle[aria-expanded="true"] .menu-toggle__icon { left: 22px; top: 18px; width: 19px; height: 19px; }
	.menu-toggle[aria-expanded="true"] .menu-toggle__icon span { top: 9px; width: 26.87px; left: -3.93px; }
	.site-menu { width: 220px; height: auto; padding-bottom: 14px; }
	.site-menu__list { padding-left: 24px; margin-top: 0; }
	.site-menu__list > li { --fs: 18.7; --lh: 42.9; font-size: 18px; line-height: 44px; padding-top: 0; margin: 0; }

	.col, .col--narrow, .sec--next { width: auto; margin-inline: 20px; }
	.sec--title { width: auto; padding-left: 20px; padding-right: 20px; }
	.title { white-space: normal; }
	.title--hero { --fs: 110; --lh: 100; }
	.title--section { --fs: 96; --lh: 86; }
	.title--page { --fs: 180; --lh: 170; }
	.title--band { --fs: 84; --lh: 78; }
	.vision__headline { --fs: 84; --lh: 78; left: 20px; }
	.band { height: auto; min-height: calc(688 * var(--u)); padding: calc(48.5 * var(--u)) 20px calc(60 * var(--u)); }
	.band__headline { position: relative; top: 0; left: 0; }

	.prose > p, .numbered__item > p, .prose > ol:not(.numbered) > li, .prose > ul > li { --fs: 34; --lh: 46; }
	.clients { grid-template-columns: 1fr; }
	.clients__col--right { margin-top: calc(70 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}