/**
 * Responsive and usability corrections.
 *
 * The design export is inline-styled, so it has no media queries of its own and
 * a handful of layouts that only work at desktop widths. This sheet is loaded
 * last on every page and carries the fixes. Keep it small and keep each rule
 * commented with what it is correcting — it is the one place in the theme where
 * the design is deliberately overridden.
 */

/* ---------------------------------------------------------------------------
 * 1. In-page anchors landed underneath the fixed header.
 *
 * Every hero has a "How we help" jump link and the industry pages have a whole
 * sticky rail of them, but nothing set a scroll offset — so the heading you
 * jumped to sat behind the 126px header, and on the rail pages behind the rail
 * as well. This is the single most visible problem on a phone, where the header
 * is tallest relative to the screen.
 * ------------------------------------------------------------------------ */
html {
	scroll-padding-top: clamp(118px, 15vh, 150px);
}

/* Pages with the sticky section rail have to clear the rail too. */
html:has([data-indrail]) {
	scroll-padding-top: clamp(190px, 24vh, 240px);
}

/* ---------------------------------------------------------------------------
 * 2. The dark panel's CTA stretched into a full-width bar.
 *
 * [data-indaside] is a column flexbox, so the inline-flex anchor inside it was
 * stretched by the default align-items:stretch. At desktop the column is ~400px
 * and it merely looked wide; once the panel wraps at tablet the column is the
 * full panel width and the button became a ~750px slab.
 * ------------------------------------------------------------------------ */
[data-indaside] > a,
[data-capaside] > a {
	align-self: flex-start;
}

/* ---------------------------------------------------------------------------
 * 3. Two-up section headers half-filled the row once they wrapped.
 *
 * The pattern is a flex row of "big heading" + "lede paragraph (flex:0 1 440px)"
 * pushed apart with space-between. Between roughly 760px and 1100px the two no
 * longer fit side by side, so both dropped to the left edge at their intrinsic
 * widths and left the right half of the section empty.
 * ------------------------------------------------------------------------ */
/* The export sets these as inline declarations, which beat any stylesheet rule
   on specificity alone — hence !important. It is confined to this sheet. */
@media (max-width: 1100px), (hover: none) and (max-width: 1400px) {
	section > div > div[data-reveal] > p[style*="flex:0 1 440px"],
	section > div > div[data-reveal] > p[style*="flex: 0 1 440px"] {
		flex: 1 1 100% !important;
		max-width: 62ch;
	}

	/* Bottom-aligning the heading against a taller paragraph only reads as
	   deliberate when they sit side by side. Stacked, it looks like a mistake. */
	section > div > div[data-reveal][style*="align-items:flex-end"] {
		align-items: flex-start !important;
	}
}

/* ---------------------------------------------------------------------------
 * 4. Long-form "who this is for" rows.
 *
 * Heading beside body copy is a desktop layout. The renderer emits these rows
 * stacked; this promotes them to two columns only once there is genuinely room,
 * rather than letting auto-fit make two cramped columns at 780px.
 * ------------------------------------------------------------------------ */
[data-lf-row] {
	grid-template-columns: 1fr;
}

@media (min-width: 1100px) and (hover: hover) {
	[data-lf-row] {
		grid-template-columns: minmax(240px, 0.85fr) 1.7fr;
		gap: clamp(24px, 3vw, 64px);
	}
}

/* ---------------------------------------------------------------------------
 * 5. Tap targets.
 *
 * Footer navigation and the inline "→" links rendered 17–19px tall, well under
 * the 44px comfortable minimum. Padding the block axis grows the hit area
 * without moving the text, because the surrounding gaps absorb it.
 * ------------------------------------------------------------------------ */
@media (max-width: 900px), (hover: none) {
	/* Zeroing the column gap keeps the visual rhythm close to the design's
	   while the padding grows each link's hit area from 19px to ~44px. */
	footer div[style*="flex-direction:column"][style*="gap:12px"] {
		gap: 0 !important;
	}

	footer a[href] {
		padding-block: 12px;
	}

	a[data-arrow],
	a:has(> [data-arrow]) {
		padding-block: 13px;
	}
}

/* ---------------------------------------------------------------------------
 * 6. The sticky section rail on a phone.
 *
 * Six links at 12.5px wrapped onto three rows, making the sticky bar ~96px tall
 * on a 667px screen, and each link only 15px high to tap. One horizontally
 * scrollable row is both smaller and far easier to hit.
 * ------------------------------------------------------------------------ */
@media (max-width: 700px), (hover: none) and (max-width: 900px) {
	[data-indrail] > div {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-block: 0 !important;
	}

	[data-indrail] > div::-webkit-scrollbar {
		display: none;
	}

	[data-indrail] a {
		flex: 0 0 auto;
		padding-block: 13px;
		white-space: nowrap;
	}
}

/* The announcement bar's link was a 26px target. */
@media (max-width: 900px), (hover: none) {
	header a[href]:not([data-magnetic]) {
		padding-block: 7px;
	}
}

/* ---------------------------------------------------------------------------
 * 7. Touch devices get the mobile nav, whatever their width.
 *
 * The design swaps to the burger below 1119px, which is a width test. An iPad
 * in landscape is 1180–1366px, so it was served the *desktop* nav — and that
 * nav's dropdowns open on `mouseenter` and close on `mouseleave`, with no
 * click or touch handler anywhere. On a tablet the mega menu therefore could
 * not be opened reliably at all: a tap either did nothing or followed the
 * parent link.
 *
 * `hover: none` is the correct test — it asks whether the device can hover
 * rather than guessing from width. Desktop is untouched; every touch device
 * gets the menu that was actually designed for touch.
 * ------------------------------------------------------------------------ */
@media (hover: none) {
	[data-nav-links] {
		display: none !important;
	}

	[data-burger] {
		display: flex !important;
	}
}

/* ---------------------------------------------------------------------------
 * 8. A real default font on <body>.
 *
 * Every element in the export sets its own font, so body was left at the
 * browser default — anything added later that forgets to set one renders in
 * Times. Cheap insurance, invisible on the existing pages.
 * ------------------------------------------------------------------------ */
body {
	font-family: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Touch devices get a comfortable rail target at any width. */
@media (hover: none) {
	[data-indrail] a {
		padding-block: 13px;
	}
}

/* ---------------------------------------------------------------------------
 * 9. The homepage stat band dropped its fourth item onto a row of its own.
 *
 * Four stats in `repeat(auto-fit, minmax(min(100%,196px),1fr))`. The column
 * count is floor(width / 196), so any width between 588 and 783 gives THREE
 * columns and the fourth stat drops alone — visibly broken.
 *
 * It cannot be fixed with a viewport breakpoint, because the band's width does
 * not track the viewport: it is 768px at a 820px viewport (the row has wrapped,
 * so the band is full width) but only 446px at a 1024px viewport (the row fits,
 * so the band is a column). Measured:
 *
 *     viewport  820 -> band 768 -> 3 cols   (iPad portrait, broken)
 *     viewport 1024 -> band 446 -> 2 cols
 *     viewport 1180 -> band 516 -> 2 cols
 *     viewport 1366 -> band 599 -> 3 cols   (iPad Pro landscape, broken)
 *
 * So the query has to be on the band's own width. Two columns is the default —
 * which is also the fallback anywhere container queries are unavailable, and is
 * never wrong — and four only once there is genuinely room for four.
 * ------------------------------------------------------------------------ */
[data-statwrap] {
	container-type: inline-size;
}

[data-statband] {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@container (max-width: 359px) {
	[data-statband] {
		grid-template-columns: 1fr !important;
	}
}

@container (min-width: 700px) {
	[data-statband] {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

/* ===========================================================================
 * 10. FAQ accordion
 *
 * The exported design had no accordion, so this is new vocabulary rather than
 * an override — but it is built from the design's own parts: the 1px rule, the
 * blue accent, Albert Sans for body copy, and the same cubic-bezier the rest of
 * the site eases with.
 *
 * Only the open state animates; see inc/render-faq.php for why.
 * ======================================================================== */

[data-faq-item] {
  border-bottom: 1px solid rgba(8, 13, 16, 0.14);
}

[data-faq-q] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(18px, 2.2vw, 28px) 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(17px, 1.5vw, 23px);
  line-height: 1.28;
  letter-spacing: -0.016em;
  color: #080D10;
  transition: color .25s ease;
  /* The whole row is the hit area, which matters most on a phone. */
  min-height: 44px;
}

/* Safari and Chrome each need their own marker removal. */
[data-faq-q]::-webkit-details-marker { display: none; }
[data-faq-q]::marker { content: ''; }

[data-faq-q]:hover,
[data-faq-item][open] > [data-faq-q] { color: #0057FF; }

[data-faq-q]:focus-visible {
  outline: 2px solid #0057FF;
  outline-offset: 3px;
  border-radius: 4px;
}

/* A plus that becomes a minus. Two pseudo-elements, no icon font, no SVG. */
[data-faq-ico] {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}
[data-faq-ico]::before,
[data-faq-ico]::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transition: transform .38s cubic-bezier(.16, 1, .3, 1), opacity .28s ease;
}
[data-faq-ico]::before { width: 15px; height: 1.5px; transform: translate(-50%, -50%); }
[data-faq-ico]::after  { width: 1.5px; height: 15px; transform: translate(-50%, -50%); }
[data-faq-item][open] [data-faq-ico]::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

[data-faq-a] {
  padding: 0 clamp(38px, 5vw, 70px) clamp(20px, 2.4vw, 30px) 0;
  animation: bwm-faq-in .34s cubic-bezier(.16, 1, .3, 1);
}
[data-faq-a] p {
  margin: 0;
  max-width: 74ch;
  font-family: 'Albert Sans', system-ui, sans-serif;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
  color: #4A5464;
}

@keyframes bwm-faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-faq-a] { animation: none; }
  [data-faq-ico]::before,
  [data-faq-ico]::after { transition: none; }
}

/* ===========================================================================
 * 11. Header row fallback for pages on chrome.js
 *
 * The 20 exported page scripts each carry a fitRow() that compacts the nav row
 * below 1120px and again below 430px (home.js:184-205). assets/js/chrome.js —
 * the fallback used by pages with no design export of their own, such as
 * /privacy-policy/, /next-steps-confirmation/ and the 404 template — has no
 * such routine and no CSS equivalent existed. The result at 320px: the logo,
 * the CTA and the burger laid out at their full desktop sizes with nowrap, so
 * the burger's right edge sat at 433px in a 320px viewport — 113px off-screen
 * and unreachable.
 *
 * This is the same set of values fitRow() applies, expressed as CSS so it
 * covers every page whether or not a page script is present. !important is
 * required throughout: the export styles this row inline.
 * ======================================================================== */

@media (max-width: 1119px) {
	[data-nav] [data-navrow] {
		gap: 16px !important;
		padding: 18px 20px !important;
		flex-wrap: nowrap !important;
	}
	[data-nav] [data-navlogo] { min-width: 0 !important; flex-shrink: 0 !important; }
	[data-nav] [data-navlogo] img { height: 30px !important; }
	[data-navcta] {
		white-space: nowrap !important;
		min-height: 44px !important;
		padding: 13px 18px !important;
		font-size: 13px !important;
		gap: 7px !important;
	}
}

@media (max-width: 430px) {
	[data-nav] [data-navrow] {
		gap: 10px !important;
		padding: 14px 14px !important;
	}
	[data-nav] [data-navlogo] { flex-shrink: 1 !important; }
	[data-nav] [data-navlogo] img { height: 26px !important; }
	[data-navcta] {
		padding: 11px 13px !important;
		font-size: 11.5px !important;
		letter-spacing: 0.06em !important;
	}
}

/* Below ~360px even the compacted row is tight, and the CTA is the least
   valuable thing in it — the burger opens a panel whose first item is the same
   call to action. Drop it rather than let it push the burger off-screen. */
@media (max-width: 359px) {
	[data-navcta] { display: none !important; }
}

/* The announcement bar is hidden on phones.
 *
 * It is a desktop marketing message and it cost more than it returned on a
 * small screen: measured at 91px tall on a 320px viewport (wrapping to five
 * lines), taking the whole header to 165px — 29% of the screen before the
 * visitor has seen any content, and before the menu panel opens on top of it.
 * At 390 and 430 it still wrapped to three lines and 59px.
 *
 * Hidden rather than compacted: shrinking the type further would have made a
 * marketing line that nobody asked for both small AND still in the way.
 *
 * 768px is the cut. At tablet widths and up the bar fits on two lines at 44px
 * and the header sits at a reasonable 12-16% of the viewport, so it stays.
 *
 * Nothing depends on it being visible: home.js reads `bar.offsetHeight` for its
 * dark-section probe and gets 0, and mobile-nav.js measures the header with
 * offsetHeight, so the panel moves up to meet it automatically. */
@media (max-width: 767px) {
	[data-bar] { display: none !important; }
}

/* ===========================================================================
 * 12. Numbered index rows below the desktop layout
 *
 * The exported row is `grid-template-columns: auto minmax(0,1.1fr)
 * minmax(0,1.6fr) auto` — number, title, description, arrow — which assumes a
 * desktop-width row. Both fr tracks can shrink to nothing, so at 320px the
 * tracks measured 16.6 / 79.7 / 115.9px: a heading like "Manufacturing &
 * Industrial" in an 80px column, one word per line, beside a 116px paragraph.
 *
 * Below 760px the row becomes two rows instead: number, title and arrow on the
 * first; the description spanning the full width underneath. Nothing is
 * hidden, and the title finally gets the width it needs.
 *
 * :has() distinguishes the four-part industry/region rows from the three-part
 * city rows, which need a different split.
 * ======================================================================== */

@media (max-width: 760px) {
	/* Four-part rows: number | title | description | arrow */
	[data-indcard]:has(> :nth-child(4)) {
		grid-template-columns: auto minmax(0, 1fr) auto !important;
		row-gap: 12px !important;
		column-gap: 14px !important;
		align-items: center !important;
	}
	[data-indcard]:has(> :nth-child(4)) > :nth-child(1) { grid-column: 1; grid-row: 1; }
	[data-indcard]:has(> :nth-child(4)) > :nth-child(2) { grid-column: 2; grid-row: 1; }
	[data-indcard]:has(> :nth-child(4)) > :nth-child(4) { grid-column: 3; grid-row: 1; }
	[data-indcard]:has(> :nth-child(4)) > :nth-child(3) {
		grid-column: 1 / -1;
		grid-row: 2;
		max-width: 62ch;
	}

	/* Three-part rows: title | deck | arrow */
	[data-indcard]:not(:has(> :nth-child(4))) {
		grid-template-columns: minmax(0, 1fr) auto !important;
		row-gap: 10px !important;
		column-gap: 14px !important;
		align-items: center !important;
	}
	[data-indcard]:not(:has(> :nth-child(4))) > :nth-child(1) { grid-column: 1; grid-row: 1; }
	[data-indcard]:not(:has(> :nth-child(4))) > :nth-child(3) { grid-column: 2; grid-row: 1; }
	[data-indcard]:not(:has(> :nth-child(4))) > :nth-child(2) {
		grid-column: 1 / -1;
		grid-row: 2;
		max-width: 62ch;
	}
}

/* ===========================================================================
 * 13. Display numerals that are actually words
 *
 * [data-display] is the design's big-stat treatment, sized clamp(28px,2.8vw,44px)
 * on the assumption of short numerics — "190+", "92%", "<4 hrs". Several proof
 * bands use it for words instead ("WooCommerce", "Automotive", "RFQ-ready"),
 * and in a ~150px auto-fit track a 44px word is ~272px wide. With the default
 * overflow:visible it did not clip, it spilled sideways INTO the neighbouring
 * stat, so two values printed over each other.
 *
 * min-width:0 lets the grid item shrink to its track, and anywhere-wrapping
 * keeps a long word inside its own column.
 * ======================================================================== */

[data-display] {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ===========================================================================
 * 14. Mega-menu panel
 *
 * The panel grid is `230px repeat(auto-fit, minmax(205px, 1fr))` inside
 * `width: min(1420px, calc(100vw - 40px))`. Between roughly 1120px and 1400px
 * the five cards cannot hold one row beside the 230px rail, so the grid wraps
 * and the panel's height jumps from ~466px to 772-809px — taller than an
 * 800px-high laptop viewport, so the bottom of the menu became unreachable.
 *
 * Narrower tracks keep it to a single row through that band, and a height cap
 * with internal scrolling means the panel can never exceed the viewport
 * whatever it ends up containing.
 * ======================================================================== */

@media (max-width: 1440px) {
	[data-indmenu-list] > div {
		grid-template-columns: 200px repeat(auto-fit, minmax(148px, 1fr)) !important;
		gap: 12px !important;
	}
}

[data-indmenu-list] {
	max-height: min(78vh, 680px) !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
}

/* ===========================================================================
 * 15. "Made in Michigan" badge
 *
 * The supplied file inlined a 35KB SVG. In a footer that renders on every one
 * of ~50 pages that is 9KB gzipped added to every HTML response; as a separate
 * file it is fetched and cached once. An <img> would have been simpler still,
 * but it cannot inherit colour — and the badge's whole trick is currentColor,
 * so it works on the dark footer and would work on a light section unchanged.
 * A CSS mask keeps that: the shape comes from the file, the colour from the
 * text around it.
 *
 * aspect-ratio rather than a second fixed dimension, because the mark is
 * 499x468 and a square box would squash it.
 * ======================================================================== */

.bwm-mi {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font-family: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: currentColor;
	border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
	border-radius: 100px;
	padding: 7px 16px 7px 12px;
	text-decoration: none;
	transition: color .35s, border-color .35s;
}

.bwm-mi::before {
	content: '';
	display: block;
	flex: none;
	height: 23px;
	aspect-ratio: 499 / 468;
	background: currentColor;
	opacity: .62;
	-webkit-mask: var(--bwm-mi-src) center / contain no-repeat;
	mask: var(--bwm-mi-src) center / contain no-repeat;
	transition: opacity .35s, transform .5s cubic-bezier(.16, 1, .3, 1);
}

a.bwm-mi:hover { border-color: color-mix(in srgb, currentColor 38%, transparent); }
a.bwm-mi:hover::before { opacity: 1; transform: translateY(-2px); }

a.bwm-mi:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.bwm-mi::before { transition: none; }
	a.bwm-mi:hover::before { transform: none; }
}

/* ===========================================================================
 * 16. Homepage hero on phones
 *
 * Two passes got this wrong before this one. The first shrank all nine content
 * blocks — smaller is not the same as simpler. The second cut blocks but used
 * `[data-reveal]:first-of-type` to hide the eyebrow: :first-of-type matches the
 * first of EACH element type, so it hid the div eyebrow AND the h2 deck, and
 * the hero shipped with no value proposition at all.
 *
 * This pass: cut the duplication with exact selectors, then make what survives
 * BIGGER. A phone hero should be a headline, a line that says what you do, and
 * one thing to press.
 *
 * SPECIFICITY NOTE — this cost a pass too. assets/css/hero-fold.css is enqueued
 * AFTER this sheet, and its rules are `.bwm-page-home [data-hero-fold] h1` with
 * !important: identical specificity to the obvious selector here, so source
 * order decided every tie and none of the sizes below applied. Every rule in
 * this block therefore carries `section#top`, whose id outranks it outright.
 * Do not "simplify" these selectors.
 * ======================================================================== */

@media (max-width: 767px) {

	/* --- what goes ------------------------------------------------------ */

	/* The eyebrow duplicates the deck one line below it. `> div` is load-
	   bearing: without it this also matches the h2. */
	.bwm-page-home section#top [data-hero-fold] > div[data-reveal]:first-of-type {
		display: none !important;
	}

	/* Supporting prose, not hero copy. Still shown from tablet up. */
	.bwm-page-home section#top [data-hero-fold] [data-hero-layer="1.5"] p:last-of-type {
		display: none !important;
	}

	/* One action. The second button competed with the primary one for the same
	   glance, and the menu carries the same link. */
	.bwm-page-home section#top [data-hero-fold] a[href="#work"] {
		display: none !important;
	}

	/* --- what stays, larger --------------------------------------------- */

	/* The headline can afford the room now that three blocks left. */
	.bwm-page-home section#top [data-hero-fold] h1 {
		font-size: clamp(36px, 10.2vw, 46px) !important;
		line-height: 1.08 !important;
		letter-spacing: -0.022em !important;
	}

	/* The line that actually says what the company does. It was 11px and
	   hidden; it is the second most important thing on the screen. */
	.bwm-page-home section#top [data-hero-fold] h2 {
		display: block !important;
		font-size: clamp(17px, 4.6vw, 20px) !important;
		line-height: 1.4 !important;
		color: rgba(255, 255, 255, 0.82) !important;
		margin-top: 18px !important;
		max-width: 30ch !important;
	}

	/* The button sits two levels down: [data-hero-layer] > div[data-reveal]
	   (a column with align-items:flex-start) > the button wrapper. That
	   flex-start is what shrank the wrapper to 234px, so a 100%-wide button
	   inside it resolved to 100% of 234. Stretch the column's children. */
	.bwm-page-home section#top [data-hero-fold] [data-hero-layer="1.5"] > div[data-reveal] {
		align-items: stretch !important;
	}

	/* Full width and thumb-sized: it is the only button here.
	 *
	 * :not() matters — BOTH hero buttons carry data-magnetic, so without it this
	 * rule matched the "View our work" link too, at identical specificity to the
	 * display:none above and later in the file. It won, and the link I was
	 * hiding came back as a second full-width button. */
	.bwm-page-home section#top [data-hero-fold] a[data-magnetic]:not([href="#work"]) {
		display: flex !important;
		width: 100% !important;
		justify-content: center !important;
		padding: 21px 26px !important;
		font-size: 15px !important;
		border-radius: 10px !important;
	}

	/* One trust line, legible rather than incidental. */
	/* The two marks sit side by side; the label takes its own line underneath.
	   Forcing all three onto one row squeezed the label into three wrapped
	   lines — worse than the two rows it replaced. */
	section#top [data-hero-reviews] {
		flex-wrap: wrap !important;
		gap: 10px !important;
		align-items: center !important;
		margin-top: 4px !important;
	}
	section#top [data-hero-reviews] > span[data-rev-label],
	section#top [data-hero-reviews] > span > span[data-rev-label] {
		display: none !important;
	}
	section#top [data-hero-reviews] > span[data-rev-combined] {
		display: block !important;
		flex: 0 0 100% !important;
		margin-top: 2px !important;
		font-size: 14.5px !important;
		letter-spacing: 0.01em !important;
		color: rgba(255, 255, 255, 0.85) !important;
	}
	section#top [data-hero-reviews] > span > span:first-child {
		padding: 8px 13px !important;
		gap: 5px !important;
		font-size: 14px !important;
	}

	/* Centre the fold's content vertically.
	 *
	 * hero-fold.css already asks for this, but without !important, and the
	 * element carries an inline `justify-content:flex-start` from the design
	 * export — so the rule had never applied and everything piled at the top
	 * with the remainder dumped below the scroll cue. */
	.bwm-page-home section#top [data-hero-fold] {
		justify-content: center !important;
	}
}

/* ===========================================================================
 * 17. The doubled logo on light pages
 *
 * The header carries two lockups stacked: the light one in flow, and the navy
 * one absolutely positioned over it at `top:0`, faded in by the page script
 * when the nav sits on a light background. That only lines up while the anchor
 * is exactly as tall as the image.
 *
 * Section 11 above forces the logo to a fixed height below 1120px, which left
 * the anchor taller than the image it contains — the light lockup sat centred
 * with a ~7px inset, the navy one stayed pinned to the anchor's top, and on
 * /contact/ both were visible at once, 7px apart. It read as a doubled,
 * ghosted logo. Mine to own: the override in section 11 introduced it.
 *
 * Centring the overlay is correct at every width rather than only fixing the
 * broken ones: where the anchor already matches the image height, 50% + a
 * -50% translate resolves to exactly top:0, so the widths that were right stay
 * byte-identical.
 * ======================================================================== */

[data-navlogo] img[data-logo-navy] {
	top: 50% !important;
	transform: translateY(-50%) !important;
}

/* ===========================================================================
 * 18. Interior page heroes on phones
 *
 * Every interior hero carries an inline `padding-top: clamp(172px, 19.5vh,
 * 236px)`. That number was chosen to clear a header that was ~147px tall
 * because it included the announcement bar — leaving a comfortable ~36px of
 * breathing room beneath it, which is what desktop still shows (140px header,
 * 176px to the first line).
 *
 * Section 11 then hid the announcement bar on phones and the header dropped to
 * 74px. The padding did not follow, so every interior page on a phone opened
 * with a 98px void between the header and the page title — 62px of it dead.
 * The fix belongs here rather than in the 20-odd templates that hard-code it.
 *
 * Value chosen to reproduce desktop's ~36px gap against a 74px header.
 * The homepage is excluded: its hero sets padding-top on [data-hero-fold]
 * instead and is handled in section 16.
 * ======================================================================== */

@media (max-width: 767px) {
	/* Two template shapes carry this padding and both must be handled, or the
	   fix stacks on top of the original instead of replacing it:
	     /contact/, /start-a-project/  -> padding-top sits on the <section>
	     location, industry, about...  -> it sits on an inner content wrapper
	   Zero the wrapper, then let the section supply the single correct value.
	   The wrapper is selected by NOT being one of the aria-hidden decorative
	   layers (the dot grid and the blue bloom), which are its siblings. */
	/* `section#top` covers the designed templates. The default page template
	   (privacy policy, and anything else published through WordPress) opens
	   with an unnamed dark section instead, so the first section in <main> is
	   matched too — on the designed pages that IS section#top, so the two
	   selectors agree rather than fight. */
	body:not(.bwm-page-home) section#top,
	body:not(.bwm-page-home) #bwm-main > section:first-of-type {
		padding-top: clamp(104px, 13vh, 132px) !important;
	}
	body:not(.bwm-page-home) section#top > div:not([aria-hidden="true"]),
	body:not(.bwm-page-home) #bwm-main > section:first-of-type > div:not([aria-hidden="true"]) {
		padding-top: 0 !important;
	}
}