/* Bushido Billing — foundation.
 *
 * INFRASTRUCTURE PASS ONLY. This file carries the design tokens, the page
 * frame, the header and the footer. Per-page layout is deliberately not here
 * yet — the 26 pages are being rebuilt from the captured Beaver Builder markup
 * as a separate step.
 *
 * Every colour and both typefaces were measured from the old site's own
 * stylesheets, not chosen. #67c18d appeared 648 times, more than any other
 * value, which is what makes it the brand green rather than an accent.
 */

/* ---------------------------------------------------------------- tokens - */

:root {
	--green:        #67c18d;
	--green-pale:   #ccf2dd;
	--green-deep:   #4ea173;

	--ink:          #202020;
	--ink-soft:     #3d3d3d;
	--rule:         #d1d1d1;
	--wash:         #f2f2f2;
	--wash-2:       #e6e6e6;
	--paper:        #ffffff;

	--blue:         #2b7bb9;
	--orange:       #dd6420;

	--font-head: "Oswald", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;

	/* MEASURED off the live site, not chosen. Beaver Builder rows do not share
	   one container width: most are 1400, Services and FAQs are 1200, Software
	   is 1600, the form rows 1238, the testimonials row 1695.99, and /chiro/'s
	   "what makes us different" row 1300 — SIX of them across 26 pages.
	   Flattening those to a single wrap is what makes a rebuild look
	   approximately right and measurably wrong, so each is a token. */
	--wrap:        1400px;
	--wrap-1200:   1200px;
	--wrap-1300:   1300px;
	--wrap-1600:   1600px;
	--wrap-narrow:  760px;
	--gap:          24px;

	/* Recolours the itv-back-to-top must-use plugin's arrow from the theme.
	   Never edit that plugin file per client. */
	--to-top-ink:     #202020;
	--to-top-surface: rgba(255, 255, 255, .92);
	--to-top-border:  #d1d1d1;
}

/* ----------------------------------------------------------------- base - */

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.65;
	/* No -webkit-font-smoothing. Theirs leaves it at auto, and on a Mac
	   `antialiased` renders every weight visibly thinner than their site. */
	/* Their theme sets this on BODY, so it applies to every text element on
	   every page: a word longer than its column breaks rather than overflowing
	   it. Without it the bare URL in the terms page's contact list stayed one
	   unbreakable token, took 3 lines where theirs takes 4, and spilled out of
	   a 315px column at 375. Rare, but it is the client's global behaviour and
	   the failure it prevents is visible rather than measurable. */
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	font-family: var(--font-head);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: .01em;
	text-transform: uppercase;
}

h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

p { margin: 0 0 1.15em; }

a { color: var(--green-deep); }
a:hover, a:focus-visible { color: var(--ink); }

img { max-width: 100%; height: auto; }

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gap);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed; top: 8px; left: 8px;
	z-index: 999;
	width: auto; height: auto;
	clip-path: none;
	padding: 10px 16px;
	background: var(--ink);
	color: var(--paper);
}

/* --------------------------------------------------------------- header - */
/* All values measured with getComputedStyle on the live site at 1440px.
   The original header is NOT sticky, so this one is not either. */

/* THE HEADER HAS TWO LAYERS OF INSET, and collapsing them into one is what
   made every page overflow sideways between 769 and 1200.
   On the original the ROW carries 20px of padding and each module inside it
   carries a further 20px of margin, so the logo starts 40px in at EVERY width.
   This file used to have a single 20px padding on the inner box; at 1440 the
   other 20 arrived by accident, as the slack from centring a 1400px box in a
   1440px viewport. Below 1440 there is no slack, so the logo sat at x=20
   against their 40 — and nothing caught it, because the header is the top row
   and its height is pinned by the 88px Book a Call image either way.
   Measured on their about-us at 992: content box 20..972, logo image at x=40,
   hamburger flush to 972. */
.site-header {
	position: relative;
	z-index: 50;                 /* keeps the shadow above the row below it */
	background: var(--paper);
	padding-inline: 20px;        /* the ROW's padding */
}

/* A soft grey shadow under the header — NOT on the original. Added at Gerek's
   request (2026-09-16), the same value the Momma's Chiro build uses. Tablet and
   phone only: on desktop the page-title band's green corner already separates
   the header, and the shadow smudged that edge. 992 is where the nav collapses. */
@media (max-width: 992px) {
	.site-header { box-shadow: 0 4px 30px -10px rgba(51, 48, 47, .15); }
}

/* space-between is THEIR mechanism, not a fit: their header box is
   `display:flex; justify-content:space-between`, which is why the two gaps are
   always equal. At 1440 it gives the same answer the old hand-fitted 54px
   margin did — nav at 493.88, Book a Call at 1200 — and unlike the margin it
   stays right when the nav collapses to a hamburger at 992. */
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 5px 0;              /* module margins supply the side inset */
	min-height: 98px;            /* measured row height */
	gap: 0;
}

.site-header__logo { display: block; flex: 0 0 auto; margin: 0 20px; }
/* 78.13, not 78: 400 x 150/768 is 78.125, and the logo is vertically centred
   in the 88px line, so the rounded value put it 0.06px low at every width. */
.site-header__logo-img { display: block; width: 400px; height: 78.13px; }

/* The nav sits between the logo and the CTA, and space-between on the inner
   box is what places it: at 1440 the free space either side of a 652.25px nav
   is 53.875, which lands the first link at 493.88 — their measured value. */
.site-nav {
	margin: 0;
	/* MEASURED on the original: the nav block is 39px tall and the 36px list
	   sits at its BOTTOM, so the first link lands 3px below the block's top.
	   Simple vertical centring of the list alone gives 31.
	   CORRECTED 2026-09-08 from 40px. The block is 39, not 40 — read off their
	   about-us at 1440, where the menu module measures 493.88,29.5,652.25,39
	   with its first link at y=32.5. A 40px box put ours at 33.
	   An earlier attempt explained the offset as an inline-flex baseline effect
	   and set a 29px line-height strut. That was wrong — it moved the list to
	   29, 4px out the other way. Stated plainly instead: 39px box, bottom
	   aligned, centred on the 88px line. */
	display: flex;
	align-items: flex-end;
	height: 39px;
}


.site-header__cta { display: block; flex: 0 0 auto; margin: 0 20px; }
.site-header__cta-img { display: block; width: 200px; height: 88px; }

/* ------------------------------------------------------------------ nav - */

.site-nav__list {
	display: inline-flex;      /* inline, as the original — see the note above */
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list ul {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list li { position: relative; }

.site-nav__list a {
	display: block;
	padding: 10px;               /* measured */
	font-family: var(--font-body);
	font-size: 16px;             /* measured */
	font-weight: 400;            /* measured */
	line-height: 16px;           /* measured — gives the 36px link box */
	text-transform: uppercase;   /* measured */
	text-decoration: none;
	color: var(--ink-soft);      /* measured #3d3d3d */
	white-space: nowrap;
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible,
.site-nav__list .current-menu-item > a { color: var(--green-deep); }

/* THE DROPDOWNS ARE MODERNISED, NOT COPIED (Gerek, 2026-09-16). The original's
   are square white boxes. These follow the iTech Valet fleet pattern used on
   hbchiropractic-site: a 16px-radius panel with a soft shadow that fades and
   slides in 4px, rows that FILL with a tint on hover rather than only
   changing colour, and the page you are on held in that same filled state.
   Brand green instead of HB's navy. */
.site-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	display: grid;
	gap: 2px;
	min-width: 240px;
	padding: 12px;
	background: var(--paper);
	border: 1px solid #e6ebe8;
	border-radius: 16px;
	box-shadow: 0 2px 6px rgba(32, 32, 32, .06), 0 14px 32px rgba(32, 32, 32, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 60;
}

.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }

.site-nav__list .sub-menu li { width: 100%; }

/* 8px radius on the rows, not a pill: inside a 16px panel with 12px of inset,
   half the panel's radius keeps the row the same shape as the box around it. */
.site-nav__list .sub-menu a {
	padding: 10px 12px;
	border-radius: 8px;
	white-space: normal;
	transition: background-color .12s ease, color .12s ease;
}
.site-nav__list .sub-menu a:hover,
.site-nav__list .sub-menu a:focus-visible,
.site-nav__list .sub-menu .current-menu-item > a {
	background: rgba(103, 193, 141, .14);
	color: var(--green-deep);
}

/* The third level opens to the right, its first row level with the row that
   opened it: -13 is the panel's 12px inset plus its 1px border. */
.site-nav__list .sub-menu .sub-menu { top: -13px; left: calc(100% + 12px); }
/* An invisible bridge across that 12px gap, so moving the pointer from a row
   into its flyout does not cross empty space and close it. */
.site-nav__list .sub-menu li.menu-item-has-children > a { position: relative; }
.site-nav__list .sub-menu li.menu-item-has-children::after {
	content: "";
	position: absolute;
	top: 0; right: -14px;
	width: 14px; height: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.site-nav__list .sub-menu,
	.site-nav__list .sub-menu a { transition: none; }
}

.nav-toggle { display: none; }

/* Their menu gives every item after the first a 1px TRANSPARENT left border
   above 992. It draws nothing, but it is 4px of width across five items — and
   because the header is space-between, four pixels of width is two pixels of
   position for the whole nav. Without it the nav measured 648.25 and sat at
   495.88 against their 652.25 at 493.88. */
@media (min-width: 993px) {
	.site-nav__list > li + li { border-left: 1px solid transparent; }
}

/* ----------------------------------------------------------------- hero - */
/* Measured: row 1009px tall, background cover at 0% 50%, wrap padding
   40px 20px 80px. H1 is Oswald 700 at 120px/120px with 3px tracking and a
   hard 2px 2px 0 shadow in #3d3d3d — the shadow is what keeps it legible
   over the photograph, so it is not decoration and cannot be dropped. */

/* The 20px side padding belongs on the OUTER wrap, exactly as Beaver Builder
   has it, NOT on the inner content box. Putting it on the inner box adds a
   second 20px inset and pushes every child right by 20 and narrows the H1 by
   40 — which is precisely the kind of "close but measurably wrong" that this
   rebuild is trying to avoid. Measured: content box starts at x=20 and is
   1400 wide at a 1440 viewport. */
.hero {
	padding: 40px 20px 80px;
	background-image: var(--hero-bg-desktop);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0% 50%;
}

.hero__inner {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
}

.hero__title {
	margin: 20px 20px 100px;
	font-family: var(--font-head);
	font-size: 120px;
	font-weight: 700;
	line-height: 120px;
	letter-spacing: 3px;
	text-transform: none;
	color: #fff;
	text-shadow: 2px 2px 0 var(--ink-soft);
}

/* Measured column widths: 779 and 621 of the 1400 content box.
   The two columns are 529px tall, and that height is set by the artwork on the
   right: 589 tall + 20 top margin - 80 bottom margin = 529.
   The left column's content is 382px tall and is VERTICALLY CENTRED in that
   529, which is where the 74px gap above "BILLING DONE BETTER" comes from. It
   is centring, not a margin — so it is reproduced as centring, and it stays
   correct if the copy length ever changes. */
.hero__cols {
	display: flex;
	align-items: stretch;
}

.hero__left {
	flex: 0 0 779px;
	max-width: 779px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hero__right { flex: 0 0 621px; max-width: 621px; }

/* The mobile wording is hidden on desktop and vice versa — the client's site
   has two separate hero rows and the copy in them has drifted apart. */
.hero__lead--mobile, .hero__sub--mobile { display: none; }

.hero__lead {
	margin: 0 20px 20px;
	font-family: var(--font-body);
	font-size: 38px;
	font-weight: 700;
	line-height: 38px;
	text-transform: none;
	color: #000;
}

.hero__sub {
	margin: 0 20px 60px;
	font-family: var(--font-body);
	font-size: 24px;
	font-weight: 700;
	line-height: 24px;
	text-transform: none;
	color: #000;
}

.hero__cta { display: inline-block; margin: 60px 20px 50px 0; }
.hero__cta-img { display: block; width: 500px; height: 130px; }

/* The right-hand artwork overhangs its column, and that overhang is what lets
   it sit over the band below. Measured: the FIGURE carries margins of
   20 / 20 / -80 / -90, giving a 691px box, and the 674px image is centred
   inside it — which is the 8px that a naive "margins on the image" version
   gets wrong. */
.hero__art-fig {
	margin: 20px 20px -80px -90px;
	text-align: center;
}

.hero__art {
	display: inline-block;
	width: 674px;
	height: 589px;
	max-width: none;
	vertical-align: top;
}

/* ---------------------------------------------------------- our promise - */
/* Measured on the original at 1440px:
     row       670 tall, wrap padding 40 20 20
     content   1400 wide at x=20, y=1147
     col 1     630 wide, holds a 590x590 graphic at x=40 (its own 20px margin)
     col 2     770 wide at x=650
     heading   Montserrat 700 50/50, #67c18d, margin 100 20 20 20  -> y=1247
     body      Montserrat 400 20/29, #3d3d3d, paragraphs 10px apart
   The heading's 100px top margin is what sets the text block against the
   graphic; the columns are top aligned, not centred. */

.promise__inner {
	display: flex;
	align-items: flex-start;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
}

.promise { padding: 40px 20px 20px; }

.promise__media { flex: 0 0 630px; max-width: 630px; }

.promise__img {
	display: block;
	width: 590px;
	height: 590px;
	margin: 0 20px 20px;
}

/* A flex column, as Beaver Builder's own column is. That is not decoration:
   adjacent vertical margins COLLAPSE in normal flow, so the heading's 20px
   bottom and the text's 20px top would become one 20px gap instead of 40 —
   which measured as the body sitting exactly 20px too high. Flex items do not
   collapse margins, so reproducing the container reproduces the spacing. */
.promise__body {
	flex: 0 0 770px;
	max-width: 770px;
	display: flex;
	flex-direction: column;
}

.promise__title {
	margin: 100px 20px 20px;
	font-family: var(--font-body);
	font-size: 50px;
	font-weight: 700;
	line-height: 50px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--green);
}

.promise__text {
	margin: 20px;
	font-size: 20px;
	line-height: 29px;
	color: var(--ink-soft);
}

.promise__text p { margin: 0 0 10px; }
.promise__text p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ three ways - */
/* Measured at 1440px:
     row        y=1777, 777 tall, wrap padding 40 20 107 20
     heading    Montserrat 700 50/50 UPPERCASE, #67c18d, margin 50 20 60 20
     3 rows     140 tall each, at y=2027 / 2167 / 2307
     icon col   280 wide; module 240 at x=40 with margin -10 top; icon 150x150
                centred in the module, landing at x=85
     text col   1120 wide at x=300; module 1000 at x=320, margin 30 100 20 20
     body       Montserrat 400 20/29, #3d3d3d
   The icon's -10px top margin is what lifts each 150px icon out of its 140px
   row, so the icons overhang slightly. Reproduced, not tidied. */

.ways { padding: 40px 20px 107px; }

.ways__inner {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	display: flex;
	flex-direction: column;   /* stops the heading/row margins collapsing */
}

.ways__title {
	margin: 50px 20px 60px;
	font-family: var(--font-body);
	font-size: 50px;
	font-weight: 700;
	line-height: 50px;
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: left;
	color: var(--green);
}

.ways__row {
	display: flex;
	align-items: flex-start;
	height: 140px;
}

.ways__media { flex: 0 0 280px; max-width: 280px; text-align: center; }

.ways__icon {
	display: inline-block;
	width: 150px;
	height: 150px;
	margin: -10px 20px 0;     /* the -10 lifts it out of the 140px row */
	vertical-align: top;
}

/* The COLUMN is 1120 wide; the text module inside it is 1000, inset by the
   module's own 20/100 side margins. Putting those margins on the column makes
   the column 1240 and the text 1120 — right-looking, 120px wrong. */
.ways__body {
	flex: 0 0 1120px;
	max-width: 1120px;
	font-size: 20px;
	line-height: 29px;
	color: var(--ink-soft);
}

.ways__body p { margin: 30px 100px 20px 20px; }

/* The arrow art is a background on the 1120-wide text column, contain and
   centred, as theirs is. The column is 108 tall (30 + 58 + 20) and the art is
   10.67:1, so it lands 1120x105, 1.5px in from top and bottom. */
.ways__body { background: var(--ways-band) center / contain no-repeat; }

/* The third item's copy differs by device on the client's site — see
   front-page.php. Desktop repeats item 2; mobile carries the correct line. */
.ways__p--mobile { display: none; }

/* -------------------------------------------------------- dark CTA band - */
/* Measured: 149.4 tall, #1a1a1a, wrap padding 0 20.
   Left column 980 wide holds the heading RIGHT-aligned at 40/40 Oswald 700
   white with margin 50 20 40 20; right column 420 holds a 260 button image
   at x=1020.

   THE COLUMNS ARE 70/30, NOT 980/420. Same thing at 1440, different thing
   everywhere else, and it is the difference between a band that reflows like
   the original and one that does not. Measured at 992: their columns are
   666.39 and 285.59 of a 952 content box — exactly 70 and 30 per cent.

   THE BAND'S HEIGHT COMES FROM THE IMAGE COLUMN, not from a min-height. It is
   the figure's 15 top margin, the image, and its 20 bottom margin: 149.4 at
   1440 with a 260 image, 143.05 at 992 where the column has narrowed enough
   that the image scales to 245.59. A min-height pins it at one value and the
   band stops responding at all — which is what it was doing. */

.cta-band { padding: 0 20px; background: #1a1a1a; }

.cta-band__inner {
	display: flex;
	align-items: flex-start;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
}

.cta-band__title {
	/* 70% of the content box LESS its own 40px of side margins, because a flex
	   basis sizes the box and the margins sit outside it. */
	flex: 0 0 calc(70% - 40px);
	max-width: calc(70% - 40px);
	margin: 50px 20px 40px;
	font-family: var(--font-head);
	font-size: 40px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: 0;
	text-transform: none;
	text-align: right;        /* measured — it is right-aligned, not left */
	color: #fff;
}

.cta-band__link {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
	margin: 0 20px;
	padding: 15px 0 20px;
}
/* height:auto, not a hard 114. The natural image is 300x132, so 260 wide is
   114.4 and the rounded 114 was already 0.4 short at every size. It matters
   more below 1200: the right-hand column narrows until 260 no longer fits and
   the image scales down, which is why their band is 143.05 tall at 992 and
   149.4 at 1440. A fixed height cannot do that — it distorts instead. */
.cta-band__img { display: block; width: 260px; max-width: 100%; height: auto; }

/* ----------------------------------------------------------- testimonials - */
/* Measured at 1440px:
     row        y=2703, 1505 tall, wrap padding 100 20
     banner     module 1400 wide; image 1000x125 centred, landing at x=220
     3 cards    columns 467 wide at x=20 / 487 / 953, images 300 wide at
                x=103 / 570 / 1037, y=2978. The cards are NOT equal height —
                552, 565, 565 — because they are three different images, so
                nothing here forces a common height.
     wide strip module 1360 at x=40 y=3583, image 1360x436
     read more  right aligned, Montserrat 400 20/29, y=4059
   Heights add up: 100 + 125 + 30 + 605 + 545 + 100 = 1505. */

/* The #232323 is the original's own fill: their row lays a flat #232323
   gradient under the artwork. Without it, any viewport wider than the image
   shows white down the right-hand side. */
.tstm {
	padding: 100px 20px;
	background-color: #232323;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: auto;
}

.tstm__inner {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
}

.tstm__banner { margin: 0 0 30px; text-align: center; }

.tstm__banner-img {
	display: inline-block;
	width: 1000px;
	height: 125px;
	vertical-align: top;
}
.tstm__banner-img--mobile { display: none; }

/* Three 467px columns. align-items:flex-start keeps each card its own height,
   which is what the original does — stretching them would even out the 13px
   difference between the first card and the other two and look tidier than
   the site being copied. */
.tstm__cards {
	display: flex;
	align-items: flex-start;
}

.tstm__card { flex: 0 0 467px; max-width: 467px; text-align: center; }

/* 20px above AND below. The column heights prove it: 552+40=592 and
   565+40=605, which are exactly the measured column heights. Missing the
   bottom 20 pulled the strip below, the read-more line and the whole band
   up by 20px each. */
.tstm__card-img {
	display: inline-block;
	width: 300px;
	height: auto;
	margin: 20px 0;
	vertical-align: top;
}

.tstm__wide { margin: 20px; }

.tstm__wide-img { display: block; width: 1360px; height: 436px; }
.tstm__wide-img--mobile { display: none; }

.tstm__more {
	margin: 40px 0 0;
	font-size: 20px;
	line-height: 29px;
	text-align: right;
}

.tstm__more a { color: rgba(204, 242, 221, .6); text-decoration: none; }
.tstm__more a:hover,
.tstm__more a:focus-visible { color: var(--green-pale); text-decoration: underline; }

/* -------------------------------------------------------------- services - */
/* Measured at 1440px. NOTE THE ROW WIDTH: this section is 1200, not 1400, so
   its content starts at x=120 rather than x=20. That difference is exactly the
   sort of thing a single global container silently gets wrong.
     row      y=4208, 2062 tall, wrap padding 20 20 60 20, max-width 1200
     heading  Montserrat 700 50/50 UPPERCASE centred, #67c18d, margin 100 20 60
     cards    3 across at 400 pitch; icon 340x340; name Oswald 700 24/29
              centred in the green; a 170px 2px rule; then the copy
     icon     overhangs its own module upward by 50px, and the name is pulled
              back up by a -75px top margin. Both reproduced — together they
              are what tucks the title under the artwork. */

.svc { padding: 20px 20px 60px; }

.svc__inner {
	width: 100%;
	max-width: var(--wrap-1200);   /* 1200, NOT the site-wide 1400 */
	margin-inline: auto;
	display: flex;
	flex-direction: column;
}

.svc__title {
	margin: 100px 20px 60px;
	font-family: var(--font-body);
	font-size: 50px;
	font-weight: 700;
	line-height: 50px;
	text-align: center;
	text-transform: uppercase;
	color: var(--green);
}

.svc__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 10px of column padding above the icon — measured: the column starts at
   y=4438 and the icon module at 4448. 20px below each row gives the measured
   579px row pitch. */
.svc__card {
	position: relative;
	isolation: isolate;
	flex: 0 0 400px;
	max-width: 400px;
	padding: 10px 10px 0;   /* content box is 380 inside a 400 cell */
	margin-bottom: 10px;    /* 569 + 10 = the measured 579px row pitch */
	text-align: center;
}

/* The card itself: 15px corners and a soft #f2f2f2 50px shadow, on a box
   10px in from the cell — theirs is the column content with a 10px margin.
   A pseudo-element rather than the <li>, so none of the measured cell
   geometry above moves. Checked at 1440 and 900: rows 1-2 land within a
   pixel of their card boxes. */
.svc__card::before {
	content: "";
	position: absolute;
	inset: 10px 10px 0;
	z-index: -1;
	border-radius: 15px;
	box-shadow: 0 0 50px 0 #f2f2f2;
	pointer-events: none;
}

/* flow-root, and it matters. Without a block formatting context the icon's
   -50px top margin COLLAPSES out through this wrapper and drags the wrapper —
   and therefore the title, rule and copy — 50px up the page. flow-root
   contains the margin without clipping the icon that deliberately overhangs. */
.svc__icon-wrap { height: 310px; display: flow-root; }

/* 340 square in a 310-tall box: it overhangs upward by 50, which is what the
   original does and what the heading's negative margin then tucks under. */
.svc__icon {
	display: block;
	width: 340px;
	height: 340px;
	margin: -50px auto 0;
}

/* Beaver Builder's own row gaps are not uniform, measured from the title
   positions: rows 1->2 is 579 (a 10px gap) but 2->3 is 595, which with the
   last row's shallower title pull works out at a 6px gap. Reproduced as
   measured rather than averaged — averaging put row 3 four pixels low and the
   section five tall. */
.svc__card:nth-child(n+4):nth-child(-n+6) { margin-bottom: 6px; }
.svc__card:nth-child(n+7) { margin-bottom: 9px; }

/* The LAST row is different in two measured ways, and both add height:
   its two cells are 396 wide rather than 400 (names measure 336 at x=354 and
   x=750, so the content box is 376), and it pulls its title up by 55 rather
   than 75. The narrower cell makes the copy wrap taller. Reproduced rather
   than normalised — normalising either one shortens the section. */
.svc__card:nth-child(n+7) { flex: 0 0 396px; max-width: 396px; }
.svc__card:nth-child(n+7) .svc__name { margin-top: -55px; }

.svc__name {
	margin: -75px 20px 50px;
	font-family: var(--font-head);
	font-size: 24px;
	font-weight: 700;
	line-height: 29px;
	text-align: center;
	text-transform: none;
	color: var(--green);
}

.svc__rule {
	width: 170px;
	height: 0;
	margin: 0 auto;
	border: 0;
	border-top: 2px solid var(--ink-soft);
}

/* MEASURED, and I had all three wrong first time: it is 18px, BLACK, and
   LEFT aligned — not 16px grey and centred. Centred grey looked like a
   reasonable card style and made every card ~80px too short, which is what
   left the whole section 422px short of the original. */
/* 10px, not 1em. Card 8's module measures 223 = its 145px paragraph plus two
   empty paragraphs at 29 each and 10px between them. A 1em margin made the
   section 21px too tall. */
.svc__copy p { margin: 0 0 10px; }
.svc__copy p:last-child { margin-bottom: 0; }

.svc__copy {
	margin: 20px;
	font-size: 18px;
	line-height: 29px;
	text-align: left;
	color: #000;
}

/* -------------------------------------------------------------- software - */
/*
 * THE ONE SECTION THIS SITE REUSES. It is Beaver Builder row 9 on the homepage
 * and row 1 on /software/, and measured side by side on the client's live site
 * the two are the same section at all three widths:
 *
 *              homepage      /software/
 *   1440        997.80         996.80
 *    992        842.97         842.03
 *    375       1226.70        1226.70
 *
 * The whole difference is .sw__gap1, one pixel of empty column the homepage
 * has and /software/ does not. Markup and the reason are in
 * template-parts/software-band.php.
 *
 * REWRITTEN 2026-09-08, FROM THE MECHANISM. What was here before was fitted at
 * 1440 — a 241px heading block, a 688px intro, a 9px bottom margin — and each
 * of those numbers was right only at the width it was taken at. At 375 it also
 * hid the second paragraph of the client's copy, used 30px spacers where
 * theirs are 50, and still measured 1227.09 against their 1226.70 because the
 * errors cancelled.
 *
 * That sentence — "Software we use, but are not limited to, include:" — is the
 * SAME one found missing at desktop earlier the same day, restored there and
 * left hidden here. A section can measure right twice for two different wrong
 * reasons.
 *
 * Measured on the client's site, with the CSS backgrounds preloaded:
 *
 *   band          padding 0 20 (8 below 769), margin-bottom -10,
 *                 photograph cover at centre bottom, content max-width 1600
 *   heading col   min-height 250 / 110 / 50, margin-top -10 / -42 / -3,
 *                 brush-stroke background, contained and centred
 *   heading       Oswald 700 80/1 black centred, margin 80 20 20
 *   intro row     24% / 52% / 24%; the outer two are EMPTY and 1px tall, which
 *                 is nothing at desktop and 2px of the document at 375
 *   intro         Montserrat 400 22/1.1 black centred, module margin 0 20
 *   spacers       50 — BOTH of them, at every width
 *   four-up       25% cells, 300px logos centred
 *   three-up      33.33/33.33/33.34; first logo RIGHT, middle CENTRED, last
 *                 LEFT. Not an inconsistency to tidy — it is what pulls a row
 *                 of differently-proportioned logos together.
 *   foot col      min-height none / 110 / 50, a second brush stroke
 *   Book a Call   500px, module margin 60 20 20
 */

/* The -10 sits on the BAND, not on .sw, so that .sw reports the height their
   row reports and the background still paints the full 1007.8 behind it. */
.sw__band {
	padding: 0 20px;
	margin-bottom: -10px;
	background-image: var(--sw-bg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}

/* 1600, not the site's usual 1400. Rows do not share a container width on this
   site and this is the widest one. It only shows above a 1640px viewport, but
   a fixed 1400 would be wrong there and right nowhere. */
.sw__inner {
	width: 100%;
	max-width: var(--wrap-1600);
	margin-inline: auto;
}

/*
 * THE HEADING BLOCK'S SLACK IS LOAD-BEARING. The column is 250 tall where its
 * contents need 180, and the 70 that is left over is what holds the band's
 * shape — an earlier version folded it into the heading's own margin and got
 * the right answer at 1440 and the wrong one everywhere else.
 * The -10 top margin is theirs too: it is why the column reads 240 while its
 * content box reads 250.
 */
/*
 * TWO ELEMENTS, and it has to be two. The -10 belongs to the column's CONTENT
 * box, not to the column: on their page the content sits at y=88 while the
 * column it is in still starts at 98 and reports 240. Put the margin on one
 * box and it collapses straight out through the section, which moved the whole
 * band up 10px and left the document a pixel long.
 * Beaver Builder's col-group is a flex container, which is what stops the
 * collapse there; .sw__head is one here for the same reason.
 */
.sw__head { display: flex; flex-direction: column; }

.sw__head-inner {
	display: flex;
	flex-direction: column;
	min-height: 250px;
	margin-top: -10px;
	background-image: var(--sw-head-bg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

.sw__title {
	margin: 80px 20px 20px;
	font-family: var(--font-head);
	font-size: 80px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: normal;
	text-align: center;
	text-transform: none;
	color: #000;
}

/* Their row carries two heading modules, one tagged for desktop/large/medium
   and one for mobile, with different sizes. Both say the same words. */
.sw__title--mobile { display: none; }

.sw__intro-row { display: flex; align-items: flex-start; }

.sw__side { flex: 0 0 24%; max-width: 24%; min-height: 1px; }

.sw__intro-col {
	display: flex;
	flex-direction: column;
	flex: 0 0 52%;
	max-width: 52%;
}

/* No min-height. It used to be 107px — the module's measured desktop height —
   and that is precisely what hid a line of the client's copy: the block
   reported the right number with the wrong contents inside it. The height is
   produced now, not asserted. */
.sw__intro {
	margin: 0 20px;
	font-size: 22px;
	line-height: 1.1;
	text-align: center;
	color: #000;
}

.sw__intro p { margin: 0 0 10px; }
.sw__intro p:last-child { margin-bottom: 0; }

.sw__spacer { height: 50px; }

.sw__four, .sw__three { display: flex; align-items: flex-start; }

.sw__four .sw__cell  { flex: 0 0 25%;    max-width: 25%; }
.sw__three .sw__cell { flex: 0 0 33.33%; max-width: 33.33%; }
/* 33.34, not 33.33, on the last of three — theirs, and it is what keeps the
   row adding up to the whole. */
.sw__three .sw__cell:last-child { flex-basis: 33.34%; max-width: 33.34%; }

.sw__cell--center { text-align: center; }
.sw__cell--right  { text-align: right; }
.sw__cell--left   { text-align: left; }

/* The logo is an inline-block with a 20px margin, so the cell's text-align
   places its MARGIN box — which is how their module lands 300px of artwork at
   x=45 in a 350px cell rather than at 40. */
.sw__logo {
	display: inline-block;
	height: auto;
	margin: 20px;
	vertical-align: top;
}

.sw__four .sw__logo { width: 300px; }
.sw__logo--w400 { width: 400px; }
.sw__logo--w250 { width: 250px; }
.sw__logo--w130 { width: 130px; }

/* Homepage only — see template-parts/software-band.php. */
.sw__gap1 { height: 1px; }

/* Flex columns, like every .fl-col-content on their page — which is what keeps
   the Book a Call module's 60px lead-in and 20px lead-out INSIDE the column.
   Left as plain blocks both escaped, and the foot measured 129.55 where theirs
   is 209.55. */
.sw__tail { display: flex; flex-direction: column; }

.sw__foot {
	display: flex;
	flex-direction: column;
	background-image: var(--sw-foot-bg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

.sw__cta { margin: 60px 20px 20px; text-align: center; }
.sw__cta--mobile { display: none; }

.sw__cta-img {
	display: inline-block;
	width: 500px;
	height: auto;
	vertical-align: top;
}

/* The three values below are the same in BOTH tiers under 993 — theirs are
   written as one unbounded 992 query and they measure identically at 992 and
   at 375. Everything else about this section differs between the two tiers and
   is written in the bounded blocks further down. */
@media (max-width: 992px) {
	/* -3, where desktop is -10. The heading column's own pull. */
	.sw__head-inner { margin-top: -3px; }
	.sw__intro { margin: 20px 20px 0; }
	.sw__foot { background-position: center bottom; }
}

/* ------------------------------------------------------------------ faq - */
/* Measured at 1440px. This row is 1200 wide like Services, so its content
   starts at x=120.
     row      y=7268, 972 tall, wrap padding 20 20 60 20
     heading  Oswald 700 78/78, #3d3d3d, centred, margin 70 20 20 20
     items    10 questions, buttons 1160 x 58 at x=140, background #67c18d,
              padding 15, 1px #e5e5e5 top and bottom, 10px between items
     label    Montserrat 400 20px, #3d3d3d, left aligned
   Answers are collapsed on load, as on the original. */

.faq { padding: 20px 20px 60px; }

.faq__inner {
	width: 100%;
	max-width: var(--wrap-1200);   /* 1200, like Services */
	margin-inline: auto;
	display: flex;
	flex-direction: column;
}

.faq__title {
	margin: 70px 20px 20px;
	font-family: var(--font-head);
	font-size: 78px;
	font-weight: 700;
	line-height: 78px;
	text-align: center;
	text-transform: none;
	color: var(--ink-soft);
}

.faq__list { margin: 20px; }

/* 10px. The old 10.45 made up for a 58px button; the live button is now
   58.4 (the 26.4 label), so the pitch is 68.4 and the section 972 again. */
.faq__item { margin-bottom: 10px; }
.faq__h { margin: 0; padding: 0; font: inherit; letter-spacing: normal; text-transform: none; }

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 15px;
	background: var(--green);
	border: 0;
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 400;
	line-height: 26px;
	text-align: left;
	color: var(--ink-soft);   /* the icon's colour; the label is black */
	cursor: pointer;
}

/* Re-measured 2026-09-16 on the live site, which has changed since capture:
   the label is 22/26.4 BLACK at every width, not 20/26 grey. */
.faq__q-text { font-size: 22px; line-height: 26.4px; color: #000; }

.faq__q:hover { background: var(--green-deep); }
.faq__q:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* A plus that becomes a minus, drawn in CSS so it needs no icon font — the
   original uses Font Awesome's solid plus/minus at 20px, so the bars are 3px
   to carry the same weight. */
.faq__q-icon {
	position: relative;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
}

.faq__q-icon::before,
.faq__q-icon::after {
	position: absolute;
	inset: 50% 1px auto 1px;
	height: 3px;
	margin-top: -1.5px;
	background: currentColor;
	content: "";
}

.faq__q-icon::after { transform: rotate(90deg); transition: transform .18s ease; }

.faq__q[aria-expanded="true"] .faq__q-icon::after { transform: rotate(0deg); }

/* Live, re-measured: a white panel, 10px padding, 1px #e5e5e5 on the sides
   and bottom (the button carries the top), text 20/29 black. */
.faq__a-inner {
	padding: 10px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-top: 0;
	font-size: 20px;
	line-height: 29px;
	color: #000;
}

.faq__a-inner p { margin: 0 0 10px; }
.faq__a-inner p:last-child { margin-bottom: 0; }
.faq__a-inner ul { margin: 0 0 10px; padding-left: 20px; }
.faq__a-inner li { margin-bottom: 0; }

/* --------------------------------------------------------------- footer - */
/* The footer IS the green band — Beaver Builder row 11, the last row on the
   page. Measured at 1440px:
     band       358 tall, #67c18d, wrap padding 20
     logo       200 x 105 centred, module margin 20  -> y=8280
     social     4 x 40px black icons, 50px apart, group 90 tall -> y=8405
     menu       Montserrat 300 16px black, 14px padding -> y=8495
     copyright  Montserrat 300 16/29 black centred -> y=8549
     doc ends   8598
   The stacking below reproduces those offsets from the band's own padding
   rather than pinning anything, so it survives a longer menu or a second line
   of copyright. */

.site-footer {
	padding: 20px 20px 40px;   /* +20 at the bottom: Gerek's call, not theirs */
	background: var(--green);
	color: #000;
}

.site-footer__inner {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	text-align: center;
}

.site-footer__brand { margin: 20px; }

.site-footer__logo {
	display: inline-block;
	width: 200px;
	height: 105px;
	vertical-align: top;
}

/* Their group is 90 tall around 40px icons, 30px above and 20 below. The icons
   are 50px here at Gerek's request, so the group is 100 with the same gaps. */
.site-footer__social {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	height: 100px;
	padding: 30px 0 20px;
	margin: 0;
	list-style: none;
	box-sizing: border-box;
}

.site-footer__social-item { display: block; line-height: 0; }

.site-footer__social-link {
	display: block;
	color: #000;
	line-height: 0;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible { color: #fff; }

.site-footer__social-link svg { display: block; width: 50px; height: 50px; }

.footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	min-height: 54px;
	align-items: center;
}

.footer-nav__list a {
	display: block;
	padding: 14px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 300;
	line-height: 16px;
	text-transform: none;
	text-decoration: none;
	color: #000;
}

/* White on hover, as their footer menu and icons are. */
.footer-nav__list a:hover,
.footer-nav__list a:focus-visible { color: #fff; }

.site-footer__legal {
	margin: 0 20px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 300;
	line-height: 29px;
	text-align: center;
	color: #000;
}

/* The build credit inherits its colour and stays underline-free until hovered,
   so it reads as part of the legal sentence rather than as the brightest thing
   on the page. Do not give it the site's link colour. */
.footer-credit__link { color: inherit; text-decoration: none; }
.footer-credit__link:hover,
.footer-credit__link:focus-visible { color: #fff; }

/* ========================================================== ABOUT US ==== */
/* Every number below was read with getComputedStyle off
   https://bushidobilling.com/about-us/ at a 1440px viewport, with all images
   forced to load first. Nothing here was carried over from the homepage.

   Measured rows:   hero 908.87   making things better 1117.40
                    cta band 149.40 (shared)   footer 357.66 (shared)
                    document 2631                                          */

/* ---- about: hero ---- */
/* Row: wrap padding 20 20 60 20, content max-width 1400.
   The background is one image with a white band across its top, which is why
   the h1 reads as dark type on white and the lead below it as white on green.
   Desktop -02.webp; at <=768 a different FILE, -03.png, offset -350px 0. */

.ab-hero {
	padding: 20px 20px 60px;
	background-image: var(--ab-hero-bg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.ab-hero__inner {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
}

/* flex column, not a plain block. Beaver Builder's column contents are flex
   containers, so NO margin between the h1 and the lead collapses: the measured
   gap is the h1's 20 plus the lead's 40, all 60 of it. As a plain block those
   would collapse to 40 and cost 20px on every section below. */
.ab-hero__head { display: flex; flex-direction: column; }

.ab-hero__title {
	margin: 0 20px 20px;
	font-family: var(--font-head);
	font-size: 100px;      /* 80 at <=1200, 50 at <=992, 40 at <=768 */
	line-height: 120px;
	font-weight: 700;
	letter-spacing: normal;
	text-align: center;
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* Two drafts of the same paragraph, and they contradict each other on whether
   both founders are chiropractors. Reproduced, not reconciled — see
   page-about-us.php. The switch is 992/993, from fl-visible-desktop/large. */
.ab-hero__lead {
	margin: 40px 20px;
	font-family: var(--font-body);
	font-size: 28px;
	line-height: 30.8px;   /* 1.1, authored */
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
}
.ab-hero__lead--mobile { display: none; }

/* Three cards, equal height. Column widths on the original are 33.333% /
   33.337% / 33.33% of 1400 — 466.66, 466.72, 466.63. 1fr gives 466.67, which
   is inside a tenth of a pixel of all three, so they are not hard-coded. */
.ab-hero__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.ab-card { display: flex; }

/* The card face: 10px in from the column on every side, 15px radius. */
.ab-card__inner {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin: 10px;
	border-radius: 15px;
	background: #fff;
}
.ab-card--green .ab-card__inner { background: #38935d; }

.ab-card__fig { margin: 20px; text-align: center; }
/* display:block with auto side margins, NOT inline-block with text-align.
   An inline-block sits on the figure's text baseline and the descender space
   below it adds 8.05px — which made the card, the card row, the hero and the
   whole document exactly 8px tall. Centring this way has no line box at all. */
.ab-card__img { display: block; width: 200px; height: auto; margin-inline: auto; }

.ab-card__title {
	margin: 0 20px 20px;
	font-family: var(--font-body);
	font-size: 22px;
	line-height: 26.4px;
	font-weight: 700;
	letter-spacing: normal;
	text-align: center;
	text-transform: none;
	color: #000;
}

.ab-card__body {
	margin: 0 20px 20px;
	font-family: var(--font-body);
	font-size: 20px;
	line-height: 29px;
	font-weight: 400;
	text-align: center;
	color: var(--ink-soft);
}
.ab-card__body--mobile { display: none; }

/* 150px, and it is deliberate: it is what drops the shout line to the vertical
   middle of a card whose height is set by the two beside it. Not a nudge. */
.ab-card__shout {
	margin: 150px 20px 20px;
	font-family: var(--font-body);
	font-size: 34px;
	line-height: 37.4px;
	font-weight: 700;
	letter-spacing: normal;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
}

/* ---- about: making things better ---- */
/* Row: margin-top 100, wrap padding 20 20 60 20, content 1400.
   Reading order differs by device, so this is a grid rather than two copies
   of the markup — see the note in page-about-us.php.

   Measured band heights inside the row: 170 / 209.37 / 370 / 188.03 = 937.4 */

.mtb { padding: 20px 20px 60px; margin-top: 100px; }

.mtb__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; }

.mtb__grid { display: grid; grid-template-columns: repeat(3, 1fr); }

/* display:contents dissolves the column wrapper so its three children become
   grid items in their own right and can be placed by row. It also means the
   wrapper's own accent border does not paint here, which is correct: on
   desktop the bar belongs to the intro band alone. On mobile the wrapper
   becomes a real box again and takes the bar back. */
.mtb__col { display: contents; }
.mtb__col:nth-child(1) > * { grid-column: 1; }
.mtb__col:nth-child(2) > * { grid-column: 2; }
.mtb__col:nth-child(3) > * { grid-column: 3; }

/* align-self:start keeps the original's natural heading heights (110/60/55)
   instead of stretching all three to the tallest. */
.mtb__head {
	grid-row: 1;
	align-self: start;
	margin: 20px 20px 40px;
	font-family: var(--font-head);
	font-size: 50px;
	line-height: 55px;
	font-weight: 700;
	letter-spacing: normal;
	text-align: left;
	text-transform: uppercase;
}

/* "Why Bushido?" is the odd one out and it is authored that way: the other two
   headings carry line-height 1.1, this one carries none and inherits 1.2. Two
   siblings at 55 and one at 60. Copied, not averaged. */
.mtb__col--mid .mtb__head { line-height: 60px; }

.mtb__col--pale  .mtb__head { color: #ccf2dd; }
.mtb__col--mid   .mtb__head { color: #95e1b4; }
.mtb__col--brand .mtb__head { color: #67c18d; }

/* THE 5px ACCENT BAR. A real design element, colour-matched to the heading
   above it, and it is load-bearing geometry: it insets the text by 5px and
   takes 5px off its width. Invisible in a screenshot at any sensible zoom,
   obvious in getBoundingClientRect — the text starts at x=45 in a column that
   starts at x=20 with a 20px margin.

   Padding here rather than a margin on the text, because the bar has to run
   the full height of the band (the original stretches the column content to
   the tallest of the three) while the text stays at the top. */
.mtb__intro {
	grid-row: 2;
	border-left: 5px solid;
	padding: 20px;
	font-family: var(--font-body);
	font-size: 22px;
	line-height: 24.2px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.mtb__col--pale  .mtb__intro { border-left-color: #ccf2dd; }
.mtb__col--mid   .mtb__intro { border-left-color: #95e1b4; }
.mtb__col--brand .mtb__intro { border-left-color: #67c18d; }

.mtb__body {
	grid-row: 3;
	align-self: start;
	margin: 40px 20px 20px;
	font-family: var(--font-body);
	font-size: 20px;
	line-height: 29px;
	font-weight: 400;
	color: var(--ink-soft);
}
.mtb__body p { margin: 0 0 10px; }
.mtb__body p:last-child { margin-bottom: 0; }

/* Different FILE per device, not one image scaled — the two crops have
   different aspect ratios (1360x128 against 355x99). */
.mtb__strip { margin: 40px 20px 20px; text-align: center; }
.mtb__strip-img { display: block; width: 100%; height: auto; }
.mtb__strip--mobile { display: none; }

/* ====================================== LEGAL PAGES: privacy + terms ==== */
/* Measured off https://bushidobilling.com/privacy/ at 1440, 992 and 375 with
   every image forced to load. The two pages share this layout exactly.

     title row     260 tall, wrap margin-top 20, padding 20, banner -02.webp
     content row  2354.8 (privacy), wrap padding 40 20 20, margin-bottom 40,
                  and its content box is 1200 — NOT the 1400 of the row above it
     document     3070

   Neither page carries the dark CTA band. Checked, not assumed. */

/*
 * THE TITLE BAND — privacy, terms and faqs, and the same on all three.
 *
 * Renamed from .legal-hero on 2026-09-08, when the FAQs page measured
 * identical to it at all three widths: the same two background files, the same
 * -20 pull at 1440, the same -40/55/66 at 992 and the same 40/50/60 at 375.
 * Only the words differ, and how many lines they take.
 *
 * The 260px height the legal pages and FAQs share at 1440 is arithmetic, not a
 * rhythm — 100/120 type on one line with a -20 pull. At 375 the legal pages are
 * 260 again for a different reason (two lines and a +40 push) while FAQs, whose
 * title is one short word, is 200.
 */
.title-band {
	margin-top: 20px;
	padding: 20px;
	background-image: var(--title-band-bg);
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
}

.title-band__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; }

/* The -20px top margin is theirs and it is load-bearing: it pulls the title up
   into the banner's own white band. Dropping it would look tidier and sit the
   type 20px lower than the site being copied. */
.title-band__title {
	margin: -20px 20px 100px;
	font-family: var(--font-head);
	font-size: 100px;
	line-height: 120px;
	font-weight: 700;
	letter-spacing: normal;
	text-align: center;
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* 1200, not the site's usual 1400 — the same trap the Services and FAQ rows
   set on the homepage. */
.legal { padding: 40px 20px 20px; margin-bottom: 40px; }

.legal__inner {
	width: 100%;
	max-width: var(--wrap-1200);
	margin-inline: auto;
	/* flex column so the heading's 20px bottom and the body's 20px top stay as
	   40, the way Beaver Builder's own column keeps them. */
	display: flex;
	flex-direction: column;
}

.legal__heading {
	margin: 40px 20px 20px;
	font-family: var(--font-body);
	font-size: 24px;
	line-height: 28.8px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	text-align: center;
	color: var(--ink-soft);
}

/* THE TWO PAGES' SECTION HEADINGS ARE NOT THE SAME SIZE. Privacy's is 24px on
   a 28.8 line; terms' is 30px on a 36. Everything else about the two modules
   matches, which is exactly why it was worth measuring rather than assuming
   the shared layout meant shared type — it cost 6px on terms at 1440 and would
   have been invisible in a screenshot. */
.legal--terms .legal__heading { font-size: 30px; line-height: 36px; }

.legal__body {
	margin: 20px;
	font-size: 20px;
	line-height: 29px;
	color: var(--ink-soft);
}

/* 10px between paragraphs, nothing after the last. The numbered section
   headings are <em><strong> inside ordinary paragraphs rather than real
   headings — that is the client's own markup and it is what makes them read
   as italic bold at body size. */
.legal__body p { margin: 0 0 10px; }
.legal__body p:last-child { margin-bottom: 0; }

/* Terms carries two bulleted lists; privacy has none. Their lists are tighter
   than the browser default in both directions — no top margin at all, 10px
   below to match the paragraphs, and a 20px indent rather than the UA's 40.
   Left at defaults the two lists cost 40px on the page AND changed where the
   items wrapped, because the deeper indent narrows the text. */
.legal__body ul { margin: 0 0 10px; padding: 0 0 0 20px; list-style: disc; }
.legal__body li { margin: 0; padding: 0; }

/* ============================ FORM PAGES: the three ClickUp embeds ====== */
/* insurance-verification, free-resources, internal-client-audit-form.
   Measured on the live insurance-verification page:

              1440        992        375
   form row    702       278.6      278.6
   CTA band    184.39    178.05     324.4
   document   1342       909       1305

   THE FORM ROW'S HEIGHT IS NOT SET HERE AND CANNOT BE. ClickUp's script
   resizes the iframe after the form renders, and the live page gave 152px on
   some loads and 574px on others with nothing changed in between. The
   container is what is reproduced; the height is whatever the form is. */

.form-embed {
	padding: 40px 20px;
	background-image: var(--form-embed-bg);
	background-repeat: no-repeat;
	background-position: 50% 100%;   /* centre BOTTOM, not centre */
	background-size: cover;
}

/* 1238, and it is not a rounded number by accident — it is the row width the
   client set for this form and nothing else on the site uses it. */
.form-embed__inner { width: 100%; max-width: 1238px; margin-inline: auto; }

/* The form sits on a WHITE panel with 15px corners over the photograph —
   their column carries `background-color: #fff` and a 15px radius. Found by
   the 2026-09-16 sitewide sweep; without it the form floated on the photo. */
.form-embed__inner { background: #fff; border-radius: 15px; }

.form-embed__frame { margin: 20px; }

/* The iframe is left INLINE deliberately. Their module measures 8px taller
   than the frame inside it, which is the descender space under an inline
   replaced element sitting on a line box. Making it a block would remove that
   8px and be wrong in the same way the About Us card image was — except here
   it would be wrong in the other direction. */
.form-embed__frame iframe { width: 100%; border: 1px solid #ccc; background: transparent; }

/* ---- the CTA band on these pages is NOT the homepage's ---- */
/* Same words, same type, same button. Different colour, and it is boxed:
     background   #232323 against the homepage's #1a1a1a
     padding      20px top and bottom where the homepage has none
     margin-top   -5px, pulling it up over the row above
   Worth 35px, and invisible unless the two are measured side by side. */
.cta-band--boxed {
	margin-top: -5px;
	padding: 20px;
	background: #232323;
}

/* ================== TEAM PAGES: /team/ AND FIVE EHR ROSTERS SHARE THIS === */
/* Measured on jane-app-specialists, live, 2026-09-08:
     hero row  277.5 / 192.60 / 402.21     at 1440 / 992 / 375
     team row 1419.95 / 1143.22 / 3047.84
     document 2302 / 1932 / 4437
   And on /team/, the sixth page on this component:
     hero row  277.5 / 192.60 / 402.21     — the same three numbers
     team row 2983.05 / 2377.27 / 6646.52  — 31 cards rather than 14
     document 3865 / 3165 / 8035
   The CTA band on all six is the homepage's, unmodified — checked, not
   assumed. The hero row's 992 and 375 figures were recorded here as 193.09 and
   402.66 until 2026-09-08; a browser gives 192.60 and 402.21 on both pages
   today, and the icon rule below is what was 0.49px out. */

.team-hero {
	padding: 20px 20px 0;
	background-image: var(--team-hero-bg);
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
}
.team-hero__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; }

/* -10px, not 0. It pulls the title up into the banner's white band, the same
   trick the legal pages use with -20. */
.team-hero__title {
	margin: -10px 20px 20px;
	font-family: var(--font-head);
	font-size: 100px;
	line-height: 120px;
	font-weight: 700;
	letter-spacing: normal;
	text-align: center;
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* The icon and the filter sit side by side, the icon in a 210px column. */
.team-hero__bar { display: flex; align-items: flex-start; }

/* .team-hero .team-hero__icon, not .team-hero__icon on its own: WordPress's
   dashicons stylesheet is enqueued after this file and its own `.dashicons`
   rule sets font-size, width and height to 20px. At equal specificity it wins
   on order, and the glyph rendered 20px in a box 20px tall — 46.5px off the
   hero on its own.

   padding-left rather than margin-left, too. The glyph sits at x=200 while its
   COLUMN is only 210 wide starting at x=20, so it deliberately overflows to
   the right; a margin would have added 180px to the flex basis and pushed the
   filter menu 180px along with it. */
.team-hero .team-hero__icon {
	/* The bar is a 15 / 70 / 15 column group with the third column empty.
	   210 and 980 of 1400 ARE 15% and 70%, and so are 142.8 and 666.4 of 952 —
	   which is why a fixed 210px basis left the filter menu 133px too wide at
	   992 and stopped its items wrapping the way theirs do. */
	flex: 0 0 15%;
	box-sizing: border-box;
	min-width: 0;
	padding-top: 30px;
	font-size: 70px;
	line-height: 70px;
	width: auto;
	height: 127.5px;          /* the module's measured height, not the glyph's */
	margin: 0;
	text-align: right;
	color: #e8cb62;           /* measured — a gold, not the brand green */
	overflow: visible;
}

/* The glyph hangs PAST the right edge of its own column — 40px at 1440, 20 at
   992 — so it is shifted with position rather than a margin, which would have
   moved the filter menu with it. */
.team-hero .team-hero__icon::before { position: relative; right: -40px; }

.team-filter { flex: 0 0 70%; min-width: 0; }

/* CENTRED, with 7.5px either side of every item — their menu is
   `justify-content: center` with `li { margin: 0 7.5px }`. This was flush left
   with a 15px gap until 2026-09-16, which put ALL at x=230 at 1440, directly
   under the gold icon (live: x=324, clear of it), and wrapped the tablet rows
   differently. */
.team-filter__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0;
	margin: 42px 0 0;
	padding: 0;
	list-style: none;
}
.team-filter__item { margin: 0 7.5px; }

.team-filter__link {
	display: block;
	padding: 5px 7px;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 29px;
	font-weight: 400;
	text-align: center;
	text-decoration: none;
	color: #fff;              /* white on the banner's green */
}

/* The page you are on is BLACK, not highlighted with a background. That is the
   only thing marking it, so it has to be right. */
.team-filter__item.is-current .team-filter__link { color: #000; }

.team-filter__link:hover,
.team-filter__link:focus-visible { text-decoration: underline; }

/* ---- the roster ---- */
/* REDESIGNED 2026-09-16 at Gerek's request — see template-parts/team-page.php.
   The original is bare card artwork in thirds with a "Bio" toggle under each.
   Here every person sits on a white tile with the homepage service cards'
   15px corners and soft shadow, and the biography opens in a popup, so the
   grid never shifts. Three across on desktop and tablet, two on small tablets,
   one on phones. */
.team {
	position: relative;
	padding: 60px 20px 80px;
	/* clip, not hidden: it trims the watermark where it runs off the right
	   edge without making .team a scroll container, which would stop the
	   mark sticking. */
	overflow: clip;
}

/* The watermark. A zero-height sticky element, so it travels with the viewport
   while the section scrolls and is released (and clipped) at the section's
   end. The mark itself is a pseudo-element hanging off it. */
.team__mark {
	position: sticky;
	top: calc(50vh - 330px);
	height: 0;
	pointer-events: none;
}
.team__mark::before {
	content: "";
	position: absolute;
	top: 0;
	right: -140px;
	width: 700px;
	aspect-ratio: 1288 / 1200;
	background: var(--team-mark) no-repeat center / contain;
	opacity: .1;
}
.team__inner { position: relative; }

.team__inner {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	align-items: stretch;
}

.team-card { display: flex; min-width: 0; }
.team-card__pad { min-height: 1px; }

/* The tile. The shadow is a touch deeper than the homepage's #f2f2f2 glow,
   which disappears against a white page when the tiles sit this close. */
.team-card__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 24px 20px 24px;
	/* Frosted, not solid: solid white hid the watermark behind every tile and
	   left only broken slivers of it in the gaps. At 70% with a blur the mark
	   reads softly through the tile while the artwork stays crisp. */
	background: rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: 15px;
	box-shadow: 0 0 50px 0 #eaeaea, 0 2px 8px rgba(32, 32, 32, .05);
}

.team-card__fig { width: 100%; margin: 0 0 20px; }
.team-card__img { display: block; width: 100%; height: auto; }

/* margin-top:auto pins the button to the tile's foot, so buttons line up
   across a row even when one card's title wraps to two lines. */
.team-card__more {
	margin-top: auto;
	padding: 10px 26px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;         /* 700, not 600: 600 is not a loaded face, and
	                             Safari's synthesised bold measured wider and
	                             wrapped the label onto two lines */
	line-height: 20px;
	white-space: nowrap;
	color: var(--green-deep);
	background: transparent;
	border: 2px solid var(--green);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.team-card__more:hover,
.team-card__more:focus-visible { background: var(--green); color: #fff; }
.team-card__more:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 3px; }

/* ---- the biography popup ---- */
.bio-modal {
	width: min(720px, calc(100% - 32px));
	max-height: calc(100dvh - 48px);
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: #fff;
	color: var(--ink-soft);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .25);
	overflow: hidden;
}
.bio-modal[open] { animation: bio-in .18s ease-out; }
.bio-modal::backdrop { background: rgba(20, 20, 20, .55); }

@keyframes bio-in {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

/* The scroll lives on the body, not the dialog, so the close button stays put
   while a long bio scrolls under it. */
.bio-modal__body {
	max-height: calc(100dvh - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 36px 40px 40px;
}

.bio-modal__fig { max-width: 440px; margin: 0 auto 24px; }
.bio-modal__img { display: block; width: 100%; height: auto; }

.bio-modal__text { font-size: 18px; line-height: 1.65; }
.bio-modal__text p { margin: 0 0 14px; }
.bio-modal__text p:last-child { margin-bottom: 0; }
.bio-modal__text a { color: var(--green-deep); font-weight: 600; text-decoration: none; }
.bio-modal__text a:hover,
.bio-modal__text a:focus-visible { text-decoration: underline; }

.bio-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 1;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f2f2f2;
	color: var(--ink-soft);
	font-size: 26px;
	line-height: 40px;
	cursor: pointer;
	transition: background-color .15s ease;
}
.bio-modal__close:hover,
.bio-modal__close:focus-visible { background: var(--green-pale); }

/* The page behind an open popup does not scroll. */
html:has(.bio-modal[open]) { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.bio-modal[open] { animation: none; }
}

@media (min-width: 769px) and (max-width: 992px) {
	.team__mark { top: calc(50vh - 240px); }
	.team__mark::before { width: 500px; right: -120px; }
	.team__inner { gap: 20px; }
	.team-card__tile { padding: 20px 14px; }
	.team-card__more { padding: 9px 20px; font-size: 15px; }
}

@media (min-width: 601px) and (max-width: 768px) {
	.team { padding: 50px 24px 60px; }
	.team__inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.team__mark { top: calc(50vh - 220px); }
	.team__mark::before { width: 460px; right: -130px; }
	/* No centring cells in a two-column grid — they would leave a hole. A
	   lone final card is centred instead. nth-of-type counts only the
	   <article>s, so the hidden pad <div>s do not throw the count off. */
	.team-card__pad { display: none; }
	.team__inner > .team-card:last-of-type:nth-of-type(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 12px);
	}
}

/* Phones: one tile per row, and the popup rises from the bottom of the screen
   as a sheet, the pattern people expect from apps. */
@media (max-width: 600px) {
	.team { padding: 40px 16px 50px; }
	.team__inner { grid-template-columns: 1fr; gap: 20px; }
	/* One column leaves no gutters for the mark to show in, so on phones it
	   reads almost entirely through the frosted tiles — same strength as
	   desktop, anything fainter disappeared. */
	.team__mark { top: calc(50vh - 180px); }
	.team__mark::before { width: 360px; right: -120px; }
	.team-card__pad { display: none; }
	.team-card__tile { padding: 20px 16px; }

	.bio-modal {
		width: 100%;
		max-width: 100%;
		max-height: 88dvh;
		margin: auto 0 0;
		border-radius: 20px 20px 0 0;
	}
	.bio-modal[open] { animation-name: bio-sheet-in; }
	.bio-modal__body { max-height: 88dvh; padding: 32px 22px 36px; }
	.bio-modal__text { font-size: 17px; }
}

@keyframes bio-sheet-in {
	from { transform: translateY(40px); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

/* -------------------------------------------------------------- entries - */

.page-entry, .post-entry { padding: 48px 0; }
.post-entry__meta { color: var(--ink-soft); font-size: .9rem; }
.post-entry__image { display: block; margin: 0 0 28px; }

.post-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 34px;
	margin: 0; padding: 0;
	list-style: none;
}
.post-list__link { text-decoration: none; color: inherit; }
.post-list__title { margin: 12px 0 4px; font-size: 1.15rem; }
.post-list__date { color: var(--ink-soft); font-size: .85rem; }

/* --------------------------------------------------------- services page - */
/*
 * MEASURED on https://bushidobilling.com/services/ at 1440, 992 and 375 with
 * every image forced to load first. Document heights: 3872 / 3696 / 5662.
 *
 * Rows, at 1440:
 *
 *   hero + header    288    photo bg, wrap padding 20/20/0, content 1400
 *   intro            344.62 wrap padding 30/20/40, columns 25% + 75%
 *   full billing     412.79 wrap padding 20, heading + four 25% columns + rule
 *   pair x 3         304.72 / 304.64 / 304.64, two 50% columns each
 *   as needed       1405.56 photo bg, wrap padding 20/20/40, eight 50% blocks
 *   dark CTA band    149.40 the homepage's band, unmodified
 *   footer           357.66
 *
 * NO ROW ON THIS PAGE HAS A MOBILE DUPLICATE. Not one element carries an
 * fl-visible-* class, so every width renders the same markup — unlike the
 * homepage and About Us, which ship separate rows with separately edited copy.
 * Checked before building, because it decides whether the copy appears once
 * or twice.
 */

/* ---- the header is INSIDE the hero on this page ---- */
/*
 * --hdr-h is the header's own height, and the hero pulls itself up by exactly
 * that much so one background covers both. 108 = the row's 20px top padding
 * plus the 88px Book a Call image that sets the line height. The header is
 * given a stacking context so it paints ON the photograph rather than under
 * it — it comes first in the document, and without this the hero's negative
 * margin would cover it.
 */
/*
 * PER PAGE, because the two hero-header pages use different attachments of the
 * same logo and the same Book a Call button, and the proportions differ:
 *
 *                  logo at 400   button at 200   header   at 375
 *   services          78.13          88          108      152.09
 *   weekly-update     77.90          87.67       107.67   151.70
 *
 * The header's height IS the hero's pull, so a third of a pixel here is a
 * third of a pixel on the document.
 */
.bushido-hero-services      { --hdr-h: 108px; }
.bushido-hero-weekly-update { --hdr-h: 107.67px; }

.bushido-hero-weekly-update .site-header__logo-img { height: 77.9px; }
.bushido-hero-weekly-update .site-header__cta-img  { height: 87.67px; }

.site-header--hero {
	position: relative;
	z-index: 2;
	background: none;
	box-shadow: none;   /* it floats over the hero photograph; nothing to separate */
}

.site-header--hero .site-header__inner {
	padding: 20px 0 0;
	/* The header's height IS the hero's pull, so the two must be one value.
	   Hard-coding 108 here while --hdr-h said 107.67 on weekly-update left the
	   hero a third of a pixel low and the document a pixel long. */
	min-height: var(--hdr-h);
}

/* Their row sets colour on everything inside it: white links, white headings,
   and #67c18d on hover and on the current item. */
.site-header--hero .site-nav__list a { color: #fff; }
.site-header--hero .site-nav__list a:hover,
.site-header--hero .site-nav__list a:focus-visible,
.site-header--hero .site-nav__list .current-menu-item > a { color: var(--green); }

/* The desktop dropdown keeps its own white panel, so its links keep the dark
   ink — white on white is what inheriting the header colour would give. */
.site-header--hero .site-nav__list .sub-menu a { color: var(--ink-soft); }
.site-header--hero .site-nav__list .sub-menu a:hover,
.site-header--hero .site-nav__list .sub-menu a:focus-visible { color: var(--green-deep); }

/*
 * And the same applies to the WHOLE menu once it collapses, for the same
 * reason: below 993 the nav becomes a white panel, and white links in it are
 * invisible. Caught by opening the burger and reading the link colour, not by
 * measuring anything — the closed page is identical either way.
 *
 * It has to sit here rather than in the <=992 block far above, because that
 * block comes earlier in the file and these two selectors are the same
 * specificity: whichever is written last wins.
 *
 * NOTE FOR WHOEVER MATCHES THE OPEN MENU: theirs is not a panel at all. At 992
 * their ul.menu goes display:block INSIDE the header row, transparent, and
 * pushes the page down — their row grows 234 -> 438 and the document 3696 ->
 * 3900. This build overlays an absolute white panel instead, on every page.
 * That predates this page and the closed geometry is identical, so it is
 * recorded rather than changed here.
 */
@media (max-width: 992px) {
	.site-header--hero .site-nav__list a { color: var(--ink-soft); }
	.site-header--hero .site-nav__list a:hover,
	.site-header--hero .site-nav__list a:focus-visible,
	.site-header--hero .site-nav__list .current-menu-item > a { color: var(--green-deep); }
}

.svc-hero {
	margin-top: calc(var(--hdr-h) * -1);
	padding: var(--hdr-h) 20px 0;
	background-color: #fff;
	background-image: var(--svc-hero-bg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}

/* flow-root, not block: the title's 20px BOTTOM margin otherwise collapses out
   of the hero and the row measures 268 instead of 288. */
.svc-hero__inner {
	display: flow-root;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
}

.svc-hero__title {
	margin: 40px 20px 20px;
	font-family: var(--font-head);
	font-size: 100px;        /* 80 at 1200, 55 at 992, 38 at 768 — all authored */
	font-weight: 700;
	line-height: 1.2;        /* 120 / 96 / 66 / 45.6 — one ratio at all four */
	letter-spacing: normal;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
}

/* ---- intro ---- */
/* Columns 25 / 75 at 1440 and 40 / 60 at 992. The two are NOT the same box
   narrowed: 350 of 1400 is 25%, 380.8 of 952 is 40%, and their builder
   authors that step with a `width: 40% !important` in a 992 query. */
.svc-intro { padding: 30px 20px 40px; }

.svc-intro__inner {
	display: flex;
	align-items: flex-start;   /* their columns are 274.62 and 264 — not equalised */
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
}

.svc-intro__col--media { flex: 0 0 25%; max-width: 25%; }
.svc-intro__col--text  { flex: 0 0 75%; max-width: 75%; }

.svc-intro__fig { margin: 20px; text-align: center; }
.svc-intro__img { display: block; width: 100%; height: auto; }

.svc-intro__text { margin: 60px 20px 20px; }

/* 20px on 29 at desktop, 18 on 26.1 below 993 — the site's own body step. */
.svc-intro__text p { margin: 0 0 10px; font-size: 20px; line-height: 29px; color: #000; }
.svc-intro__text p:last-child { margin-bottom: 0; }

/* ---- full billing services ---- */
.svc-full { padding: 20px; }

/* flow-root: the heading's 60px top margin belongs INSIDE this box. */
.svc-full__inner {
	display: flow-root;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
}

/* 50px on a 60px line at every width above 768, then 30 on 34. The second
   pair is not 1.2 of the first — measured, not derived. */
.svc-full__title,
.svc-asneeded__title {
	margin: 60px 20px 0;
	font-family: var(--font-head);
	font-size: 50px;
	font-weight: 700;
	line-height: 60px;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	color: var(--green);
}

.svc-full__cols { display: flex; align-items: flex-start; }
.svc-full__col  { flex: 0 0 25%; max-width: 25%; }

.svc-full__text { margin: 20px; }
.svc-full__text p { margin: 0; font-size: 20px; line-height: 29px; color: #000; }

/* 1300px wide and LEFT aligned, so it stops 60px short of the column's right
   edge. max-width keeps it inside a narrower column below 1440. */
.svc-full__rule { margin: 0 20px 20px; }
.svc-full__rule-img { display: block; width: 1300px; max-width: 100%; height: auto; }

/* ---- the service blocks ---- */
.svc-row { padding: 20px; }

.svc-row__inner,
.svc-asneeded__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
}

/*
 * A COLUMN FLEX BOX, deliberately. The toggle sits 40px HIGHER than the space
 * left for it — their module content carries `margin-top: -40px` — and in
 * ordinary flow that negative margin collapses with the figure's 20px bottom
 * margin into a single -20 and the block comes out 20px short. Flex items do
 * not collapse margins with each other, so the two are applied as written:
 * 20 + 180.14 + 20 + (-40 + 64.5 + 20) = 264.64, their measured column.
 */
.svc-block {
	display: flex;
	flex-direction: column;
	flex: 0 0 50%;
	max-width: 50%;
}

.svc-block__fig { margin: 20px; text-align: center; }
.svc-block__img { display: block; width: 100%; height: auto; }

/* ---- Learn More ---- */
/* REDESIGNED 2026-09-16 (Gerek): the inline switch is now a button that opens
   the details in the team pages' popup (.bio-modal). The -20px lead-in keeps
   the button tucked under its banner the way the switch was. */
.svc-more-wrap { margin: -20px 20px 30px; text-align: center; }

.svc-more {
	padding: 10px 26px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;         /* 700, not 600 — see .team-card__more */
	line-height: 20px;
	white-space: nowrap;
	color: var(--green-deep);
	background: #fff;
	border: 2px solid var(--green);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.svc-more:hover,
.svc-more:focus-visible { background: var(--green); color: #fff; }
.svc-more:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 3px; }

/* The popup shows the service's own banner artwork above its details. */
.bio-modal__fig--svc { max-width: 520px; }
/* The As Needed popups match their dark band (Gerek, 2026-09-16): the band's
   #232323, white text, and a thin white border with a soft white glow to lift
   the card off the dark backdrop. The banners are white artwork made for that
   band, so they sit on it directly. */
.bio-modal--dark {
	color: #fff;
	background: #232323;
	border: 1px solid rgba(255, 255, 255, .55);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 0 40px rgba(255, 255, 255, .14), 0 24px 64px rgba(0, 0, 0, .5);
}
.bio-modal--dark::backdrop { background: rgba(0, 0, 0, .7); }
.bio-modal--dark .bio-modal__text a { color: var(--green-pale); }
.bio-modal--dark .bio-modal__close { color: #fff; background: rgba(255, 255, 255, .12); }
.bio-modal--dark .bio-modal__close:hover,
.bio-modal--dark .bio-modal__close:focus-visible { color: #232323; background: #fff; }

/* ---- as needed services ---- */
.svc-asneeded {
	padding: 20px 20px 40px;
	background-image: var(--svc-asneeded-bg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.svc-asneeded__inner {
	display: flow-root;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
}

.svc-asneeded__intro { margin: 20px 20px 60px; }
.svc-asneeded__intro p { margin: 0; font-size: 20px; line-height: 29px; color: #fff; }

/* On the dark band the button is outlined in white. */
.svc-asneeded .svc-more { color: #fff; background: transparent; border-color: #fff; }
.svc-asneeded .svc-more:hover,
.svc-asneeded .svc-more:focus-visible { color: var(--green-deep); background: #fff; }
.svc-asneeded .svc-more:focus-visible { outline-color: #fff; }

/* ---------------------------------------------------- weekly update page - */
/*
 * MEASURED on https://bushidobilling.com/weekly-update/ at 1440, 992 and 375,
 * every image forced to load and every CSS background preloaded first.
 * Document heights: 3420 / 3491 / 3957.
 *
 *   hero + header    287.67 / 233.67 /  302.90
 *   intro            286    / 342.38 /  535.02
 *   it includes      300    / 317    /  619
 *   the report      1270.30 /1297.66 / 1003.13
 *   the 133% band    240    / 256    /  363
 *   ask (desktop)    528.88 / 546.88 /  hidden
 *   ask (mobile)     hidden / hidden /  295.77
 *
 * TWO IMAGES ARE BROKEN ON THEIR OWN SITE — see .wu-missing at the end.
 */

/* ---- hero: the same component Services has, with different words ---- */
/* Their two hero-header rows are identical apart from the photograph and the
   heading, so the rules are shared rather than written twice. The header's
   own height differs between the pages and is carried in --hdr-h. */
.wu-hero {
	margin-top: calc(var(--hdr-h) * -1);
	padding: var(--hdr-h) 20px 0;
	background-color: #fff;
	background-image: var(--wu-hero-bg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}

.wu-hero__inner {
	display: flow-root;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
}

.wu-hero__title {
	margin: 40px 20px 20px;
	font-family: var(--font-head);
	font-size: 100px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
}

/* ---- intro ---- */
/* A flex column, because their .fl-col-content is one: the lead's 20px
   lead-out and the big line's 20px lead-in stay 40px apart instead of
   collapsing to 20. Worth 20px, and the same everywhere on this page. */
.wu-intro { padding: 30px 20px 40px; }

.wu-intro__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
}

.wu-intro__lead, .wu-intro__big { margin: 20px; }

.wu-intro__lead p {
	margin: 0 0 10px;
	font-size: 22px;
	line-height: 29px;
	text-align: center;
	color: var(--ink-soft);
}
.wu-intro__lead p:last-child { margin-bottom: 0; }

/* 34px type on a 29px line — the module sets a size and inherits the body's
   leading, so the lines sit tighter than the type. Theirs, and it is why this
   one is written out rather than sharing the lead's rule. */
.wu-intro__big p {
	margin: 0;
	font-size: 34px;
	line-height: 29px;
	text-align: center;
	color: var(--ink-soft);
}

/* ---- it includes ---- */
.wu-includes {
	padding: 0 20px 40px;
	background-image: var(--wu-includes-bg);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
}

.wu-includes__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
}

.wu-includes__head { display: flex; align-items: flex-start; }
.wu-includes__head-col { flex: 0 0 40%; max-width: 40%; }
.wu-includes__head-pad { flex: 0 0 60%; max-width: 60%; min-height: 1px; }

/* Oswald 500 — the only place on the site that uses it, which is why
   weekly-update is one of two pages whose font request asks for it. */
.wu-includes__title {
	margin: 20px 20px 40px;
	font-family: var(--font-head);
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	color: #000;
}

.wu-includes__lists { display: flex; align-items: flex-start; }
.wu-includes__col { flex: 0 0 50%; max-width: 50%; }

/*
 * Their build is two UABB list-icon modules; this is a <ul>, which says the
 * same thing to a screen reader without announcing six headings that are not
 * headings. The geometry is theirs: the module's content carries 30/20/20,
 * every item but the last has 10px beneath it, the icon is 30px with 10 to its
 * right, and the text is calc(100% - 40px).
 */
.wu-list {
	display: flex;
	flex-direction: column;
	margin: 30px 20px 20px;
	padding: 0;
	list-style: none;
}

.wu-list__item { display: flex; align-items: center; margin: 0 0 10px; }
.wu-list__item:last-child { margin-bottom: 0; }

.wu-list__icon { flex: 0 0 30px; margin-right: 10px; }
.wu-list__icon-img { display: block; width: 30px; height: auto; }

/* The leading here is their THEME's h3 rule, not the module's: 1.2 above 768
   and 1.4 below it. So 22px sets a 26.4 line and 20px sets 28, not 24 — which
   is 8px on a three-line item and 28 on the section.
   The item's own height never drops below 30 because the icon is 30 and the
   two are centred against each other; that is where a one-line item's 30 comes
   from at 992, not from a min-height. */
.wu-list__text {
	width: calc(100% - 40px);
	margin: 0;                /* it is an <h3>: shed the global heading rules */
	letter-spacing: normal;
	text-transform: none;
	font-family: var(--font-body);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
}

/* ---- the report ---- */
.wu-report { padding: 20px; }

.wu-report__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
}

.wu-report__block { display: flex; flex-direction: column; }

.wu-report__text { margin: 20px; }
.wu-report__text--lead { margin: 40px 20px 20px; }

.wu-report__text p {
	margin: 0;
	font-size: 22px;
	line-height: 29px;
	text-align: center;
	color: var(--ink-soft);
}

.wu-report__fig { margin: 20px; text-align: center; }
.wu-report__img { display: inline-block; max-width: 100%; height: auto; vertical-align: top; }

.wu-report__fig--w800 .wu-report__img { width: 800px; }
.wu-report__fig--w700 .wu-report__img { width: 700px; }
.wu-report__fig--w600 .wu-report__img { width: 600px; }

.wu-report__fig--tight { margin-top: 10px; }
.wu-report__fig--flush { margin-top: 0; }
.wu-report__fig--gap40 { margin-top: 40px; }
.wu-report__fig--last  { margin: 0 20px 40px; }

.wu-report__fig--mobile { display: none; }

/* The brush stroke behind WE GOT YOU! is the COLUMN's background, contained
   and centred, so it grows with the column rather than sitting in the flow.
   The 20% columns either side vanish below 993 and the middle goes full. */
.wu-report__banner-row { display: flex; align-items: flex-start; }
.wu-report__side { flex: 0 0 20%; max-width: 20%; min-height: 1px; }
.wu-report__side:last-child { flex-basis: 19.99%; max-width: 19.99%; }

.wu-report__banner {
	flex: 0 0 60.01%;
	max-width: 60.01%;
	margin-top: 20px;
	background-image: var(--wu-banner-bg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

.wu-report__banner-title {
	margin: 30px 20px 40px;
	font-family: var(--font-body);
	font-size: 50px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: normal;
	text-align: center;
	text-transform: none;
	color: #fff;
}

/* ---- the 133% band ---- */
.wu-stat { padding: 40px 20px 0; background: #232323; }

.wu-stat__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
}

.wu-stat__text { margin: 40px 20px; }
.wu-stat__text p {
	margin: 0 0 10px;
	font-size: 22px;
	line-height: 1;
	text-align: center;
	color: #fff;
}
.wu-stat__text p:last-child { margin-bottom: 0; }

/*
 * 45.26 + 21.41 + 33.333 is more than 100, so the third column WRAPS to a line
 * of its own and the row is 2px tall at 1440. Below 993 the two empty ones are
 * hidden, there is one line, and it is 1px. Debris, and two pixels of the
 * document — reproduced by keeping their percentages rather than by pinning a
 * height, so it behaves the way theirs does at every width.
 */
.wu-stat__badge-row { display: flex; flex-wrap: wrap; align-items: flex-start; }
.wu-stat__badge-col { flex: 0 0 45.26%; max-width: 45.26%; min-height: 1px; }
.wu-stat__pad       { flex: 0 0 21.41%; max-width: 21.41%; min-height: 1px; }
.wu-stat__pad--c    { flex: 0 0 33.333%; max-width: 33.333%; }

/* The badge hangs 176px UP into the paragraph above it. */
.wu-stat__badge { margin: -176px 20px 20px; text-align: right; }
.wu-stat__badge-img { display: inline-block; width: 210px; max-width: 100%; height: auto; vertical-align: top; }

/* ---- the ask ---- */
.wu-ask {
	padding: 20px;
	background-image: var(--wu-ask-bg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.wu-ask__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--wrap-1200);
	margin-inline: auto;
}

.wu-ask__head { display: flex; align-items: flex-start; }
.wu-ask__head-col { flex: 0 0 70%; max-width: 70%; }
.wu-ask__head-pad { flex: 0 0 30%; max-width: 30%; min-height: 1px; }

.wu-ask__line {
	margin: 140px 20px 0;
	font-family: var(--font-body);
	font-size: 24px;
	font-weight: 600;
	line-height: 1;
	text-align: left;
	text-transform: uppercase;
	color: #fff;
}

.wu-ask__foot { display: flex; flex-direction: column; }

.wu-ask__note {
	margin: 30px 20px 10px;
	font-family: var(--font-body);
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
	text-align: left;
	text-transform: uppercase;
	color: var(--green);
}

.wu-ask__arrow { margin: 0 20px; text-align: left; }
.wu-ask__arrow-img { display: inline-block; width: 80px; max-width: 100%; height: auto; vertical-align: top; }

/* The mobile version of the ask is a different row with different wording. */
.wu-ask--mobile { display: none; }

/*
 * TWO IMAGES ON THIS PAGE 404 ON THE CLIENT'S OWN SITE. Both are requested
 * from /wp-content/uploads/sites/10849/ — another subsite's uploads on the
 * Lime Funnels network:
 *
 *   Weekly-Update-17.png   the mobile diagram in the report. Not in their
 *                          media library under any path, so there is nothing
 *                          to point at even if we wanted to.
 *   Weekly-Update-15.png   the arrow beside the MOBILE call to action, which
 *                          exists in their library at sites/235/2026/03 and is
 *                          used correctly by the desktop row two rows above.
 *                          Their mobile "click the button below" has no button.
 *
 * A broken <img> with no width or height still sits on a line box, and their
 * modules measure 1.77px because of it. That is reproduced here as an empty
 * box of the same height rather than by shipping a 404 of our own — the page
 * matches today, and the day the client fixes their link there is one element
 * to swap.
 */
.wu-missing { height: 1.77px; }

/* ------------------------------------------------------------ faqs page - */
/*
 * MEASURED on https://bushidobilling.com/faqs/ at 1440, 992 and 375.
 * Document heights: 1526 / 1340 / 2008.
 *
 *   title band   260 / 106 / 200   (shared — see .title-band above)
 *   accordion    810 / 781.02 / 1106.44
 *
 * SAME WORDS AS THE HOMEPAGE, DIFFERENT COMPONENT. All ten questions and
 * answers are identical to the homepage's, and the two accordions are two
 * different Beaver Builder add-ons that share nothing:
 *
 *                    .faq (homepage)   .faqs (this page)
 *   label            20 / 26 #3d3d3d   22 / 29 #000
 *   button padding   15                10
 *   item height      58                51
 *   pitch            68.44 sub-pixel   61.00 exact
 *   border           top and bottom    all four sides
 *
 * The content is shared — inc/faq-data.php holds one copy of the client's
 * words — and the presentation is written twice, because it is two things.
 */

/* margin-bottom 40 is theirs, and it is the gap above the footer. */
.faqs { padding: 100px 20px 20px; margin-bottom: 40px; }

.faqs__inner {
	width: 100%;
	max-width: var(--wrap-1200);   /* 1200, like the legal pages and Services */
	margin-inline: auto;
}

/* The module's own 20px inset, which is why the list starts at x=140 in a
   content box that starts at 120.
   flow-root, and it is worth 10px: the LAST item's 10px bottom margin sits
   inside their module content, which measures 610 against the accordion's own
   600. Left to collapse out it merges with the list's own 20px lead-out and
   the page comes up ten short. */
.faqs__list { display: flow-root; margin: 20px; }

/* A flat 10px gap and an exact 61px pitch — unlike the homepage's accordion,
   whose pitch is a sub-pixel 68.44 and needs a 10.45px margin to keep it. */
.faqs__item {
	margin-bottom: 10px;
	border: 1px solid #e5e5e5;
}

.faqs__q {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 10px;
	background: var(--green);
	border: 0;
	font-family: var(--font-body);
	font-size: 22px;
	font-weight: 400;
	line-height: 29px;
	text-align: left;
	color: #000;
	cursor: pointer;
}

.faqs__q:hover { background: var(--green-deep); }
.faqs__q:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.faqs__q-text { flex: 1 1 auto; }

/*
 * Their icon is Font Awesome's fa-plus at 14px with 15px of padding on its
 * left, which measures a 27.25 x 14 box. This build does not load Font
 * Awesome — the plus is drawn in CSS, the same way the homepage's is, and
 * given the same 27.25 x 14 box so the label wraps where theirs does.
 */
.faqs__q-icon {
	position: relative;
	flex: 0 0 27.25px;
	width: 27.25px;
	height: 14px;
}

.faqs__q-icon::before,
.faqs__q-icon::after {
	position: absolute;
	inset: 50% 0 auto 15px;
	height: 2px;
	background: currentColor;
	content: "";
}

.faqs__q-icon::after { transform: rotate(90deg); transition: transform .18s ease; }
.faqs__q[aria-expanded="true"] .faqs__q-icon::after { transform: rotate(0deg); }

.faqs__a {
	padding: 10px;
	background: #fff;
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 400;
	color: #000;
}

.faqs__a p { margin: 0 0 1em; }
.faqs__a p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- about us at <=1200 - */
/* Beaver Builder's four tiers are large >=1201, desktop 993-1200, medium
   769-992, mobile <=768. The About Us headline is authored at all four:
   100 / 80 / 50 / 40. This is the 1200 step. */
@media (max-width: 1200px) {
	.ab-hero__title { font-size: 80px; line-height: 96px; }

	/* Services authors all four tiers of its H1 too: 100 / 80 / 55 / 38. */
	.svc-hero__title { font-size: 80px; }

	/* ---- the header steps here too, on every page ---- */
	/*
	 * FOUND WHILE MEASURING SERVICES, 2026-09-08, and it was on all 26 pages.
	 * Their logo box carries `max-width: 300px` below 1201, which with its
	 * 20px margins puts the image at 260 x 50.78 — and their nav drops a font
	 * size in the same step. This file had neither, so between 769 and 1200 it
	 * laid out a 400px logo, a 16px nav and a 200px button in a box too narrow
	 * to hold them: at a 992 viewport the document reported scrollWidth 1346.
	 *
	 * No height check could see it. The header is the top row, its height is
	 * set by the 88px Book a Call image, and nothing below it moves — which is
	 * why About Us measured 2608 against their 2607 at 992 with its own header
	 * 354px wider than the window.
	 *
	 * Measured on their about-us: logo 260 x 50.78 at x=40 at 1200, 1100 and
	 * 992; nav links 14px at 1200 and 1100.
	 */
	.site-header__logo-img { width: 260px; height: 50.78px; }
	.bushido-hero-weekly-update .site-header__logo-img { height: 50.63px; }

	.site-nav__list a { font-size: 14px; line-height: 14px; }

	/* Their nav wraps to a second line in this band rather than overflowing —
	   at 1100 their nav block measures 524.39 x 72.5, two 34px rows in an
	   88px line. So the box centres its content instead of bottom-aligning a
	   single 40px row. */
	.site-nav { align-items: center; height: auto; }
	.site-nav__list { flex-wrap: wrap; }

	/* The two hero-header pages author their own header instance and step to
	   12px here, not 14 — measured on services at 1200 and 1100. */
	.bushido-hero-header .site-nav__list a { font-size: 12px; line-height: 12px; }
}

/* -------------------------------------- the nav collapses at 992, not 768 - */
/*
 * Their menu module carries `fl-menu-responsive-toggle-medium-mobile`, which
 * is Beaver Builder for "collapse at medium AND mobile" — i.e. at 992, not at
 * 768. Verified on their live about-us at a 992 viewport: the hamburger is
 * displayed, the <ul> is display:none, and Book a Call sits between the logo
 * and the burger.
 *
 * This block holds only what is the SAME in both collapsed tiers — the button
 * itself and the panel it opens. The 769-992 layout and the <=768 layout are
 * different from each other and are written separately below.
 */
@media (max-width: 992px) {

	.site-header { position: relative; }

	/* NO BORDER. This carried a 1px box that the original does not have —
	   measured `border: 0px none` and a transparent background on theirs, so
	   the button reads as three bars alone, not as an outlined square.
	   Measured: 50.4 square, 14px padding, so a 22.4 icon area holding three
	   22.4 x 4.46 bars in #3d3d3d on an 8.965 pitch. */
	.nav-toggle {
		position: relative;
		display: block;
		width: 50.4px;
		height: 50.4px;
		padding: 14px;
		background: none;
		border: 0;
		cursor: pointer;
	}

	.nav-toggle__bar,
	.nav-toggle__bar::before,
	.nav-toggle__bar::after {
		display: block;
		width: 22.4px; height: 4.46px;
		background: var(--ink-soft);
		content: "";
	}

	/* Absolutely positioned, and it has to be. A <button> vertically CENTRES
	   its own content whatever its display, so laying the bars out with a
	   margin put the whole stack 4.47px low and overflowing the icon area —
	   while the button itself still measured a correct 50.4 square, so no
	   height caught it.
	   Pinned instead: the middle bar on the button's centre line, the other
	   two an exact 8.965 either side. */
	.nav-toggle__bar {
		position: absolute;
		top: 50%; left: 14px;
		transform: translateY(-50%);
	}
	.nav-toggle__bar::before,
	.nav-toggle__bar::after { position: absolute; left: 0; }
	.nav-toggle__bar::before { top: -8.965px; }
	.nav-toggle__bar::after  { top:  8.965px; }

	/* On the hero-header pages the bars are white, like every other mark in
	   that header — their rule sets `fill: rgb(255,255,255)` on the toggle. */
	.bushido-hero-header .nav-toggle__bar,
	.bushido-hero-header .nav-toggle__bar::before,
	.bushido-hero-header .nav-toggle__bar::after { background: #fff; }

	.site-nav {
		display: none;
		position: absolute;
		top: 100%; left: 0; right: 0;
		z-index: 80;
		height: auto;
		padding: 12px 8px 20px;
		background: var(--paper);
		border-bottom: 1px solid var(--rule);
		max-height: calc(100vh - 148px);
		overflow-y: auto;
		margin: 0;
	}
	.site-nav.is-open { display: block; }

	.site-nav__list,
	.site-nav__list ul { display: block; }
	.site-nav__list a { padding: 11px 0; color: var(--ink-soft); }

	/* No hover on a touch screen, so submenus are shown and simply indented —
	   a hover-only submenu would be unreachable. */
	.site-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		min-width: 0;
		padding: 0 0 0 18px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		transform: none;
		display: block;
	}
	.site-nav__list .sub-menu a { padding: 9px 0; border-radius: 0; }
	.site-nav__list .sub-menu a:hover,
	.site-nav__list .sub-menu a:focus-visible,
	.site-nav__list .sub-menu .current-menu-item > a { background: none; }
	.site-nav__list .sub-menu li.menu-item-has-children::after { content: none; }
}

/* --------------------------------------------------------------- mobile - */
/* MEASURED SEPARATELY at a 375px viewport, because matching desktop does not
   imply matching mobile on this site: Beaver Builder ships SEPARATE ROWS for
   mobile, and their contents were edited independently. The hero uses a
   different background image AND different wording, and the sub-heading is
   white on mobile where it is black on desktop.
   Original mobile document height: 12777.
   Side padding drops from 20 to 8 on nearly every row — 20 on testimonials,
   10 on services. */

/* 992, not a round 900. Read out of Beaver Builder's own stylesheet rather
   than guessed: its breakpoints are large >=1201, desktop 993-1200, medium
   769-992, mobile <=768. The hero and three-ways rows are tagged
   fl-visible-desktop/large and fl-visible-medium/mobile respectively, so the
   switch between the DESKTOP and MOBILE copy happens at 992/993.
   A 900px breakpoint would have served desktop wording and desktop layout
   across the whole 901-992 band, where the client's site serves mobile. */
/* BOUNDED AT BOTH ENDS, and it has to be. This block is the 769-992 TIER, not
   "everything below 993": the <=768 block below it is a different layout, and
   any rule here that <=768 does not happen to override leaks straight into it.
   That is exactly what happened - three ways picked up this tier's 30px item
   padding and its second-item margin at 375 and came out 139.68px tall.
   Leaving it unbounded means every rule added here has to be checked against a
   block 300 lines away. Bounding it means it cannot reach. */
@media (min-width: 769px) and (max-width: 992px) {

	/* ---- shared furniture ---- */

	/*
	 * THE HEADER IS A THIRD THING THAT STEPS HERE, and it was missing until
	 * 2026-09-08. See the <=1200 and <=992 blocks above for what was wrong and
	 * why no height check found it.
	 *
	 * Measured on their about-us at a 992 viewport, images forced to load:
	 *
	 *   row               98 tall, content box 20..972
	 *   logo image        260 x 50.78 at x=40, y=23.61   (centred on the line)
	 *   Book a Call       200 x 88     at x=520.81, y=5
	 *   hamburger         50.4 square  at x=921.61, flush to the content edge
	 *
	 * Those positions are space-between doing its own arithmetic, not three
	 * fitted numbers: the three boxes are 300, 240 and 50.4 wide, which leaves
	 * 361.6 of a 952 box to split into two gaps of 180.8. Change any one of
	 * them and the other two move the way theirs do.
	 *
	 * The ORDER is theirs as well — Book a Call before the burger, which is
	 * `order: 2` and `order: 3` on their two boxes.
	 */
	.nav-toggle { order: 3; margin: 0; }

	.site-header__cta { order: 2; margin: 0 20px; }

	/* The footer's ONLY change in this tier is the legal line's leading: their
	   base body line-height drops from 29 to 26.1 at 992, and that one line is
	   the whole 2.9px between a 357.66 footer and a 354.77 one. Everything
	   else in the footer — logo, icons, menu — is identical to desktop here. */
	.site-footer__legal { line-height: 26.1px; }

	/* The band's heading has its own step in this tier: 20px on a 20px line
	   with even 40px margins, where desktop is 40/40 with 50 above and 40
	   below. Measured on theirs at 992 — the column comes out 100 tall and the
	   image column's 143.05 is what the band actually reports. */
	.cta-band__title { font-size: 20px; line-height: 20px; margin: 40px 20px; }


	/* ---- HOMEPAGE at 769-992 ---- */
	/*
	 * A real tier, authored by the client, not a squeeze of the desktop one.
	 * Two of the seven sections STACK here and five keep their columns:
	 *
	 *   hero          stacks, mobile background AND mobile copy
	 *   our promise   two columns, 45/55
	 *   three ways    stacks
	 *   testimonials  three cards across, and the wide strip becomes the
	 *                 MOBILE artwork - a different picture, at 992 already
	 *   services      three across
	 *   software      3-col and 4-col groups kept
	 *   faqs          one column at every size, already exact
	 *
	 * The column widths below are percentages because that is what they always
	 * were: 630/1400 is 45%, 400/1200 is 33.33%, 467/1400 is 33.33%. The
	 * desktop rules keep their measured pixels so the verified 1440 numbers
	 * cannot move; these percentages only ever apply below 993.
	 */

	/* -- hero: stacked. Wrap padding 40 20 0; H1 70/70 with 40 above and
	   below; lead 38/38 white; sub 24/24 black; the CTA image 500 wide and
	   CENTRED; the artwork 350 wide and RIGHT aligned. Adds up to 874.17. -- */
	.hero {
		padding: 40px 20px 0;
		background-image: var(--hero-bg-mobile);
		background-position: 50% 50%;
	}
	/* flex column so the H1's 40px bottom margin and the lead's 50px top
	   margin stay as 90, rather than collapsing to 50. */
	.hero__inner { max-width: none; display: flex; flex-direction: column; }

	.hero__title {
		margin: 40px 20px;
		font-size: 70px;
		line-height: 70px;
		letter-spacing: 0;
		text-align: center;
	}

	.hero__cols { display: flex; flex-direction: column; }
	.hero__left, .hero__right { max-width: none; flex: none; }

	.hero__lead--desktop, .hero__sub--desktop { display: none; }
	.hero__lead--mobile,  .hero__sub--mobile  { display: block; }

	.hero__lead {
		margin: 50px 20px 20px;
		font-size: 38px;
		line-height: 38px;
		text-align: center;
		color: #fff;
	}
	.hero__sub {
		margin: 0 20px 20px;
		font-size: 24px;
		line-height: 24px;
		text-align: center;
		color: #000;
	}

	.hero__cta { display: block; margin: 0; }
	.hero__cta-img { width: 500px; max-width: 100%; height: auto; margin-inline: auto; }

	.hero__art-fig { margin: 27px 0 0; }
	.hero__art { display: block; width: 350px; max-width: 100%; height: auto; margin-left: auto; }

	/* -- our promise: still two columns, 45/55, and the graphic fills its
	   column less its 20px margins rather than sitting at a fixed 590. -- */
	.promise { padding: 40px 20px 20px; }
	.promise__inner { max-width: none; }
	.promise__media { flex: 0 0 45%; max-width: 45%; }
	.promise__img {
		width: calc(100% - 40px);
		height: auto;
		aspect-ratio: 1 / 1;
		margin: 0 20px 20px;
	}
	.promise__body { flex: 0 0 55%; max-width: 55%; }
	.promise__text { font-size: 18px; line-height: 26.1px; }

	/* -- three ways: stacks. Icon 100x100 centred with a 10px lead-in, text
	   18/26.1 with a 100px right margin, and each item carries 30px of
	   padding under it. -- */
	.ways { padding: 20px 20px 107px; }
	.ways__inner { max-width: none; }
	.ways__title { margin: 50px 20px 60px; font-size: 50px; line-height: 50px; }

	/* height:auto matters. The desktop row is a hard 140px — the icon hangs out
	   of it by -10 — and left in place it caps the stacked item at 140 while
	   its contents need 212. */
	.ways__row {
		display: flex;
		flex-direction: column;
		height: auto;
		padding-bottom: 30px;
		background: var(--ways-band-stack) center / cover no-repeat;
	}
	/* The MIDDLE item alone carries 20px above and below — an authored value on
	   that one column, not a rhythm. It is the 40px that makes the second item
	   252.19 where its identical neighbours are 212.19. */
	.ways__row:nth-of-type(2) { margin: 20px 0; }

	.ways__media { flex: none; width: 100%; max-width: none; margin: 10px 0 0; }
	/* block, not the desktop inline-block: an inline-block would sit on a line
	   box and add its descender to the module, which theirs reports as exactly
	   100 tall. Also drops the desktop -10px lift, which only exists to pull
	   the icon out of that 140px row. */
	.ways__icon { display: block; width: 100px; height: 100px; margin: 0 auto; }
	.ways__body {
		flex: none;
		width: 100%;
		max-width: none;
		font-size: 18px;
		line-height: 26.1px;
		color: #000;
		background: none;
	}
	/* The margins live on the PARAGRAPH, as they do on desktop. The 30px
	   lead-in goes to 0 here. */
	.ways__body p { margin: 0 100px 20px 20px; }
	/* Tablet shows the client's MOBILE row, so it carries the corrected third
	   sentence, not the desktop duplicate. */
	.ways__p--desktop { display: none; }
	.ways__p--mobile  { display: block; }

	/* -- testimonials: three cards across at a third each. The banner drops to
	   a fixed 500 wide, and the wide strip becomes the MOBILE artwork here —
	   a different picture with a different aspect ratio, switching at 992
	   rather than at 768. -- */
	.tstm { padding: 100px 20px; }
	.tstm__inner { max-width: none; }
	.tstm__banner-img { width: 500px; max-width: 100%; height: auto; }
	.tstm__card { flex: 0 0 33.333%; max-width: 33.333%; }
	.tstm__card-img { width: calc(100% - 40px); height: auto; margin: 20px; }
	.tstm__wide-img { display: none; }
	.tstm__wide-img--mobile { display: block; width: 100%; height: auto; }
	.tstm__more { font-size: 18px; line-height: 26.1px; }

	/* -- services: three across, icon filling its card less 60px, name 24/28.8
	   and copy 18/26.1. -- */
	.svc { padding: 20px 20px 60px; }
	.svc__inner { max-width: none; }
	.svc__card { flex: 0 0 33.333%; max-width: 33.333%; }
	/* The last row is 33%, NOT a third — theirs runs 17 / 33 / 33 / 17, with
	   spacer columns either side of the two remaining cards. A third makes
	   them 3px wider, which is enough to re-wrap the copy and lose 11.92px. */
	.svc__card:nth-child(n+7) { flex: 0 0 33%; max-width: 33%; }
	/* height:auto, and then the wrap sizes itself off the icon. The desktop
	   wrap is a hard 310 holding a 340 icon lifted by -50; here the icon is
	   257.33 lifted by -30, so the wrap comes out at 227.33 on its own rather
	   than being told a number that only suits one viewport width. */
	.svc__icon-wrap { height: auto; }
	.svc__icon { width: calc(100% - 40px); height: auto; margin: -30px 20px 0; }
	/* The n+7 override has to be repeated here or it wins on specificity. On
	   desktop the last two cards pull their name up by -55 rather than -50;
	   at 992 all eight use -40, and leaving the desktop -55 in place made that
	   row exactly 15px short. */
	.svc__name,
	.svc__card:nth-child(n+7) .svc__name { font-size: 24px; line-height: 28.8px; margin: -40px 20px 50px; }
	/* The rule fills its card here rather than staying a fixed 170. */
	.svc__rule { width: auto; margin: 0 20px; }
	.svc__copy { font-size: 18px; line-height: 26.1px; }

	/* -- software: keeps its 4-across and 3-across logo rows. The heading drops
	   hard here — 36 against the desktop 80 — and the block's own slack drops
	   with it: 110 where desktop is 250. The slack is not decoration; it is
	   what holds the band's shape, so it steps rather than disappearing. -- */
	.sw__head-inner { min-height: 110px; }
	.sw__title { margin: 40px 20px 20px; font-size: 36px; }
	/* The wide logos fill their cell less 40px; the two narrow ones keep their
	   own measured widths and stay aligned in the cell. */
	.sw__four .sw__logo,
	.sw__logo--w400 { width: calc(100% - 40px); }
	.sw__foot { min-height: 110px; }
	/* Width only. height:auto is on the base rule, and it has to be: setting
	   only the width once left a desktop 130px height in place, so a 300-wide
	   image rendered 130 tall where its proportions give 77.73 — 52px of
	   stretch, and the section's whole remaining error at the time. */
	.sw__cta-img { width: 300px; }

	/* -- legal pages: title 55/66 with a deeper -40 pull, body 18/26.1 -- */
	.title-band__inner, .legal__inner { max-width: none; }
	.title-band__title { margin: -40px 20px 20px; font-size: 55px; line-height: 66px; }
	.legal__body { font-size: 18px; line-height: 26.1px; }

	/* -- EHR team pages: still three across, smaller type -- */
	.team-hero__inner, .team__inner { max-width: none; }
	.team-hero__title { margin: -40px 20px 20px; font-size: 55px; line-height: 66px; }
	/* 126.6, not the 127.09 this said until 2026-09-08. The module is 30px of
	   margin, the glyph's line box, and 20px below; at 1440 the box is 70 plus
	   a 7.5px baseline gap on a 29px line, and here it is 70 plus 6.6 on a
	   26.1px one — 30 + 76.6 + 20. Measured on jane-app AND /team/, which
	   agree at 192.6; the old value made every one of these pages' heroes
	   0.49px tall. Still pinned rather than produced, because this build's
	   line boxes round that gap up where theirs keeps the half pixel. */
	.team-hero .team-hero__icon { height: 126.6px; }
	.team-hero .team-hero__icon::before { right: -20px; }
	/* 21, re-measured 2026-09-16 at 900: their first row sits 9px above the
	   glyph's top (185 against 194). 12 put it 18px above. */
	.team-filter__list { margin-top: 21px; }
	.team-filter__link { font-size: 16px; line-height: 26.1px; }

	/* ---- ABOUT US at 769-992: desktop LAYOUT, mobile WORDING ---- */
	/*
	 * This band is the whole reason this page needed its own breakpoints. The
	 * hero's text modules are tagged fl-visible-desktop/large, so they go at
	 * 992 — but the "Making Things Better" ROW is tagged
	 * fl-visible-desktop/large/MEDIUM, so it survives all the way to 768.
	 *
	 * Between 769 and 992 the client's site therefore serves the desktop row
	 * layout with the mobile copy inside it. Reproduced, not tidied.
	 */
	/*
	 * EVERY font-size here needs its line-height with it. The first pass set
	 * the sizes and left the line-heights at their desktop values, which is
	 * invisible in the CSS and expensive on the page: 22px text on a 30.8px
	 * line, 26 on 37.4, 40 on 55. It put the hero 31px tall and the Making
	 * Things Better row 94px tall on its own.
	 *
	 * Read off theirs at 992 rather than derived from a ratio, because the
	 * ratio is not constant — the three sibling headings run 44 / 48 / 44 here
	 * where they run 55 / 60 / 55 on desktop and 44 / 34 / 44 at 375.
	 */
	.ab-hero__title { font-size: 50px; line-height: 60px; }

	.ab-hero__lead--desktop { display: none; }
	.ab-hero__lead--mobile  { display: block; font-size: 22px; line-height: 24.2px; }

	.ab-card__body--desktop { display: none; }
	/* 14px, and it really is 14 here — it steps back UP to 18 at <=768. */
	.ab-card__body--mobile  { display: block; font-size: 14px; line-height: 26.1px; }

	.ab-card__shout { font-size: 26px; line-height: 28.6px; }

	.mtb__head { font-size: 40px; line-height: 44px; }
	.mtb__col--mid .mtb__head { line-height: 48px; }

	/* The body copy drops to 18 at 992, not at 768 — it is already 18/26.1
	   here and stays there all the way down. */
	.mtb__body { font-size: 18px; line-height: 26.1px; }
}


/* ---------------------- shared furniture: header, CTA band, footer <=768 - */
/*
 * MOVED OUT OF THE 992 QUERY, 2026-09-08. These three are on every page, and
 * they do NOT switch where the page content switches.
 *
 * Measured on the live site at a 992px viewport, which is the band nobody had
 * looked at before — the homepage was signed off at 1440 and 375 only:
 *
 *                     theirs @992      what this file was doing
 *   header               98            148.08   (mobile layout, 50px early)
 *   dark CTA band       143.05         224.05
 *   footer              354.77         528.23
 *   document           2607           3038      (About Us, 431px adrift)
 *
 * At 992 their header still carries the desktop 200x88 Book a Call and its
 * row is still 98 tall, while the hero above it has ALREADY swapped to the
 * mobile wording. So the page CONTENT switches at 992 and the FURNITURE
 * switches at 768. Two different breakpoints on one page, again.
 *
 * Nothing below 769 or above 992 changes as a result: these same rules still
 * apply at 375 and still do not apply at 1440. The homepage's verified
 * numbers at both of those sizes are untouched — only the 769-992 band moves,
 * and it was wrong there on every page.
 */
@media (max-width: 768px) {

	/* The inner boxes come off their 1400 cap here, not at 992 — measured:
	   at 992 all three still report max-width 1400 with a 952 content box. */
	.cta-band__inner, .site-footer__inner { max-width: none; }

	/* ---- header: logo centred, then Book a Call and the hamburger ---- */
	/*
	 * CORRECTED 2026-09-08. This block previously said "CTA hidden" and set
	 * `.site-header__cta { display: none }`, which dropped the Book a Call
	 * button from every page below 993px. It is NOT hidden on the original —
	 * it sits on the second line, to the LEFT of the hamburger, and it is the
	 * only call to action in the mobile header.
	 *
	 * How it was missed, and it is worth recording: the button is a lazy-loaded
	 * <img> whose module takes its height FROM the loaded image. Measure the
	 * page before that image paints and the header is ~24px shorter with
	 * nothing in that space — which reads exactly like a header that has no
	 * button. The homepage's mobile target of 12777 was 24px short for the same
	 * reason; the live page is 12801.
	 *
	 * The fix is not to look harder at a screenshot. It is to force every image
	 * to load and confirm naturalWidth before trusting any number.
	 *
	 * Measured at 375, images confirmed loaded:
	 *   row            148.08 tall, wrap padding 5px 8px, content 359 wide
	 *   line 1         logo 260 x 50.78 centred, y=5
	 *   row gap        12
	 *   line 2         y=67.78, 75.3 tall
	 *     Book a Call  171.14 x 75.3, left edge x=28  (20px in from content)
	 *     hamburger    50.4 x 50.4, x=296.6, y=80.23  (centred on the line)
	 */
	/* The row's 8px of padding lives on .site-header here, as the 20 does
	   above 768 — the module margins below add the other 20, which is what
	   puts Book a Call at x=28 in a content box that starts at 8. */
	.site-header { padding-inline: 8px; }

	.site-header__inner {
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		row-gap: 12px;
		padding: 5px 0;
		min-height: 148.08px;
	}

	.site-header__logo { flex: 0 0 100%; margin: 0; text-align: center; }
	.site-header__logo-img { width: 260px; height: 50.78px; margin: 0 auto; }

	.site-header__cta { display: block; order: 2; margin: 0 0 0 20px; }
	.site-header__cta-img { width: 171.14px; height: 75.3px; }

	/* auto on the left pushes the burger to the far edge; the CTA holds the
	   near one. 20px in from the content edge, measured. The button's own
	   appearance is in the <=992 block — it is the same in both tiers. */
	.nav-toggle { order: 3; margin: 0 20px 0 auto; }

	/* The panel is defined in the <=992 block; only its side padding differs,
	   and it follows the row's 8px gutter. */
	.site-nav { padding: 12px 8px 20px; }


	/* ---- dark CTA band: MEASURED at 375 ---- */
	/* 30/30 white centred with a 40px lead-in, then the 260px button centred. */
	.cta-band { padding: 0 8px; }
	/* flow-root, not block: the title's 40px top margin otherwise collapses out
	   of the band and lands the heading flush against its own top edge. */
	.cta-band__inner { display: flow-root; text-align: center; min-height: 0; }

	.cta-band__title {
		max-width: none;
		margin: 40px 20px 20px;
		font-size: 30px;
		line-height: 30px;
		text-align: center;
	}

	.cta-band__link { display: inline-block; margin: 0; padding: 0 0 12px; }
	.cta-band__img { width: 260px; height: auto; }


	/* ---- footer: MEASURED at 375 ---- */
	.site-footer { padding: 20px 8px 40px; }
	.site-footer__brand { margin: 20px; }

	/* Measured: the social group is 68 tall on mobile, not the desktop 90. */
	.site-footer__social { height: 78px; padding: 20px 0 8px; margin-top: 20px; }

	/* The footer links STACK on mobile — each 201 wide and centred, 35 tall on
	   a 36px pitch, with the padding uneven at 14 top and 5 bottom. Left as a
	   wrapping row they made the whole footer 139px short. */
	/* The list module measures 249 tall: 30px above the first link, five links
	   on a 36px pitch, and 40px below the last. */
	.footer-nav__list {
		display: block;
		min-height: 0;
		margin: 0;
		padding: 30px 0 44px;
	}

	.footer-nav__list li { text-align: center; }

	.footer-nav__list a {
		display: inline-block;
		width: 201px;
		padding: 14px 14px 5px;
		line-height: 16px;
	}
	.site-footer__logo { width: 200px; height: 105px; }
	.site-footer__legal { margin: 0 20px; font-size: 16px; line-height: 26px; }
}


/* ----------------------------------- homepage page content at <=768 - */
/*
 * MOVED OUT OF THE 992 QUERY, 2026-09-08, for the same reason the header,
 * CTA band and footer moved: this is the layout measured at 375, and the
 * client's site does not adopt it until 768.
 *
 * The homepage at a 992 viewport, before this moved:
 *
 *                 theirs      this build
 *   hero           874.17      697.19
 *   our promise    534.84      677
 *   three ways    1013.56      864
 *   testimonials  2060.89     2605.36
 *   services      1972.38     3430
 *   software       842.97     1147.09
 *   faqs           972.06      864
 *   document      8867       10881        2014px adrift
 *
 * The single biggest cause was services: this file stacked all eight cards
 * into one column at 992, where theirs is still a three-across grid. Their
 * column structure at 992, read off the live page:
 *
 *   hero          two columns, but each 952 wide - so they DO stack here
 *   our promise   two columns side by side, 428.4 + 523.6
 *   three ways    stacked, full width
 *   testimonials  three cards across at 317.3 each
 *   services      rows of 3 / 3 / 2-centred, 317.3 each
 *   software      3-col and 4-col groups preserved
 *   faqs          one column
 *
 * So at 992 nearly everything keeps its desktop column structure, just
 * narrower. Only the hero genuinely stacks, and only the hero's COPY swaps.
 * That hero-only behaviour is what the 992 block now carries.
 */
@media (max-width: 768px) {
	/* ---- hero: different image, different copy, centred ---- */
	/* Measured: row 677 tall, padding 40px 8px 0; H1 Oswald 700 44/44 white
	   centred; lead Montserrat 700 30/30 WHITE; sub 22/22 BLACK; CTA image
	   full width; artwork 250 wide, centred. */
	.hero {
		padding: 40px 8px 0;
		background-image: var(--hero-bg-mobile);
		background-position: center top;
	}

	.hero__title {
		margin: 0 20px;
		font-size: 44px;
		line-height: 44px;
		letter-spacing: 0;
		text-align: center;
	}

	.hero__cols { display: block; }
	.hero__left, .hero__right { max-width: none; }

	.hero__lead--desktop, .hero__sub--desktop { display: none; }
	.hero__lead--mobile,  .hero__sub--mobile  { display: block; }

	.hero__lead {
		margin: 50px 20px 20px;
		font-size: 30px;
		line-height: 30px;
		text-align: center;
		color: #fff;             /* white on mobile, black on desktop */
	}

	.hero__sub {
		margin: 0 20px 20px;
		font-size: 22px;
		line-height: 22px;
		text-align: center;
		color: #000;
	}

	.hero__cta { display: block; margin: 0; }
	.hero__cta-img { width: 100%; height: auto; }

	/* The artwork is RIGHT aligned on mobile, not centred: measured at x=117
	   with a 250px width, so its right edge sits on the 8px content edge. */
	.hero__art-fig { margin: 0; text-align: right; }
	.hero__art { width: 250px; height: auto; }

	/* ---- page gutters: 8px nearly everywhere ---- */
	.promise, .ways, .faq { padding-inline: 8px; }
	.sw__band { padding-inline: 8px; }
	.tstm { padding-inline: 20px; }
	.svc  { padding-inline: 10px; }

	.promise__inner, .ways__inner, .tstm__inner, .svc__inner,
	.faq__inner,
	.hero__inner { max-width: none; }
	/* .sw__inner keeps its 1600 cap — it is never reached below 1640 anyway,
	   and clearing it would be a value invented for a width nobody measured. */
	/* ---- our promise: MEASURED at 375 ---- */
	/* Order is REVERSED on mobile: title, then text, then the graphic last.
	   Title 30/30 green and CENTRED (left-aligned on desktop); body 18/26. */
	.promise { padding: 40px 8px 20px; }
	.promise__inner { display: flex; flex-direction: column; }
	/* flex:none matters here. Both carry `flex: 0 0 <n>px` for the desktop ROW,
	   and in a column-direction container that basis becomes a HEIGHT — which
	   stretched this section 600px and stopped the graphic centring. */
	.promise__media {
		order: 2;
		flex: none;
		width: 100%;
		max-width: none;
		text-align: center;
	}

	.promise__body {
		order: 1;
		flex: none;
		width: 100%;
		max-width: none;
	}

	/* Measured: graphic at y=1300, 300 square, with 40px below it before the
	   section's own 20px padding closes at 1660. */
	.promise__img { width: 300px; height: 300px; margin: 22px auto 39px; }

	.promise__title {
		margin: 0 20px 20px;
		font-size: 30px;
		line-height: 30px;
		text-align: center;
	}

	/* The mobile row's title has NO line break — the desktop one does. */
	.ways__title-br { display: none; }

	.promise__text { margin: 20px 20px 0; font-size: 18px; line-height: 26px; }
	.promise__text p { margin: 0 0 10px; }

	/* ---- three ways: MEASURED at 375 ---- */
	/* Title stays LEFT aligned here (it is centred in "our promise" — they are
	   not consistent, and copying means copying that). Icons drop to 100px and
	   centre; body text is 20/26 and BLACK, not the desktop grey. */
	.ways { padding: 20px 8px 107px; }

	.ways__title {
		margin: 20px 20px 40px;
		font-size: 30px;
		line-height: 30px;
		text-align: left;
	}

	.ways__row {
		display: block;
		height: auto;
		margin-bottom: 0;
		background: var(--ways-band-stack) right center / cover no-repeat;
	}
	.ways__media, .ways__body { max-width: none; background: none; }
	.ways__icon { width: 100px; height: 100px; margin: 0 auto; }

	/* The copy sits directly under its icon — measured, the icon ends at 1940
	   and the text begins at 1940. The 20px side inset comes from the column,
	   not from a top margin. */
	.ways__body p { margin: 0 20px; font-size: 20px; line-height: 26px; color: #000; text-align: left; }

	/* The corrected third sentence is the one the client's own mobile row
	   carries. Desktop keeps their duplicate. */
	.ways__p--desktop { display: none; }
	.ways__p--mobile  { display: block; }

	.ways__row:first-of-type { margin-top: 10px; }
	.ways__row + .ways__row { margin-top: 69px; }
	.ways__row:last-of-type { margin-bottom: 43px; }

	/* ---- testimonials: MEASURED at 375 ---- */
	/* Padding stays 100/20 here — this is the one row that keeps 20px gutters
	   on mobile. Banner 315 wide, cards 300 wide centred, strip 295. */
	.tstm { padding: 100px 20px; }
	.tstm__banner { margin: 0; }
	.tstm__banner-img { width: 315px; height: 162px; }
	.tstm__banner-img--desktop { display: none; }
	.tstm__banner-img--mobile { display: inline-block; }

	.tstm__cards { display: block; }
	.tstm__card { max-width: none; flex: none; }
	/* 19 above and 21 below: the banner-to-card gap measures 19 and the
	   card-to-card gap 40. */
	.tstm__card-img { width: 300px; height: auto; margin: 19px 0 21px; }

	.tstm__wide { margin: 20px 0 0; }
	.tstm__wide-img--desktop { display: none; }
	.tstm__wide-img--mobile { display: block; width: 295px; height: 356px; margin: 0 auto; }
	.tstm__more { margin: 40px 0 0; font-size: 18px; line-height: 26px; text-align: right; }

	/* ---- services: MEASURED at 375 ---- */
	/* Note the type: the card TITLE is 30px on a 28px line-height — a smaller
	   line box than the glyphs, which is theirs, not a typo of mine. Body drops
	   to 16/26 and the icon fills the 315px content width. */
	.svc { padding: 20px 10px 60px; }
	.svc__grid { display: block; }

	/* The overhang survives on mobile — it is not a desktop-only flourish.
	   Measured: the icon starts 15px BEFORE the section title's line box ends,
	   and each card title is pulled 55px back up into its icon, exactly as on
	   desktop. Card pitch is 491 and the gap between cards is 4px, because the
	   overlap does most of the work. Treating these as ordinary stacked blocks
	   made the section 1268px too tall. */
	.svc__card,
	.svc__card:nth-child(n+7) {
		max-width: none;
		flex: none;
		padding: 0;
		margin: 0 0 19px;
	}

	/* The card spacing is IRREGULAR on the original, and there is a reason:
	   Beaver Builder still groups these eight cards into rows of three, and the
	   columns in each group are equalised to the tallest. Stacked at 375 that
	   equalising has nothing to equalise, but the leftover space stays — so the
	   icon-to-icon pitch runs 491, 502, 439, 466, 550, 498, 496 rather than
	   anything regular.
	   A uniform gap measured 144px short across the section. These margins are
	   set to reproduce those pitches, and the pitch each one targets is written
	   beside it so the next person can re-check without re-deriving the cause.

	   NOTE THE `.svc__grid` PREFIX. Without it these lose to the DESKTOP rule
	   `.svc__card:nth-child(n+4):nth-child(-n+6)`, which is a double
	   pseudo-class and therefore more specific — it silently pinned cards 4, 5
	   and 6 to the desktop 6px gap inside this media query. Changing those
	   margins appeared to do nothing at all, which is a very convincing way to
	   look like the wrong values. */
	.svc__grid .svc__card:nth-child(1) { margin-bottom: 20px; }  /* pitch 491 */
	.svc__grid .svc__card:nth-child(2) { margin-bottom: 31px; }  /* pitch 502 */
	.svc__grid .svc__card:nth-child(3) { margin-bottom: 20px; }  /* pitch 439 */
	.svc__grid .svc__card:nth-child(4) { margin-bottom: 21px; }  /* pitch 466 */
	.svc__grid .svc__card:nth-child(5) { margin-bottom: 51px; }  /* pitch 550 */
	.svc__grid .svc__card:nth-child(6) { margin-bottom: 51px; }  /* pitch 498 */
	.svc__grid .svc__card:nth-child(7) { margin-bottom: 51px; }  /* pitch 496 */
	.svc__grid .svc__card:nth-child(8) { margin-bottom: 17px; }

	.svc__title { margin: 50px 0 0; font-size: 30px; line-height: 30px; }

	.svc__icon-wrap { height: auto; display: block; }
	.svc__icon { width: 100%; max-width: 315px; height: auto; margin: -15px auto 0; }

	.svc__name,
	.svc__card:nth-child(n+7) .svc__name {
		margin: -55px 20px 0;   /* 315 wide inside the 355 cell, measured */
		font-size: 30px;
		line-height: 28px;
	}

	.svc__rule { width: 170px; margin: 20px auto; }
	.svc__copy { margin: 0 20px; font-size: 16px; line-height: 26px; }

	/* ---- software: MEASURED at 375, on BOTH pages that carry it ---- */
	/*
	 * Every logo is normalised here and centred, which is why the desktop
	 * row's deliberate left/centre/right alignment does not apply — but the
	 * three sizes are not one size: 200 for the wide logos, 170 for ChiroUp
	 * and 100 for Jane.
	 *
	 * CORRECTED 2026-09-08. What was here hid the intro's second paragraph,
	 * used 30px spacers where theirs are 50, and set a fitted 319 x 83 button
	 * — and it measured 1227.09 against their 1226.70 anyway, because those
	 * errors cancelled. The paragraph is the same sentence found missing at
	 * desktop earlier the same day.
	 */
	/*
	 * THE -10 STOPS HERE. Their layout CSS carries it as a single unqualified
	 * rule with no responsive override, so it reads as applying everywhere —
	 * but a computed style at 375 returns `margin-bottom: 0px`, and their
	 * footer starts exactly where the band's last group ends rather than 10px
	 * into it. Beaver Builder clears row margins at its mobile breakpoint from
	 * its own stylesheet, which is not in the per-page layout file.
	 * Measured, not read. Worth 10px of the document.
	 */
	.sw__band { padding: 0 8px; margin-bottom: 0; }

	.sw__head-inner { min-height: 50px; }

	/* Their row carries two heading modules and swaps them here: 80px on
	   desktop, 40 on mobile, with margins of 80/20/20 and 20 respectively. */
	.sw__title--desktop { display: none; }
	.sw__title--mobile { display: block; margin: 20px; font-size: 40px; }

	.sw__intro-row { display: block; }
	.sw__intro-col { max-width: none; }
	.sw__side { max-width: none; }
	.sw__intro { font-size: 18px; }

	.sw__four, .sw__three { display: block; }

	.sw__four .sw__cell,
	.sw__three .sw__cell,
	.sw__three .sw__cell:last-child { max-width: none; flex: none; }
	.sw__cell,
	.sw__cell--left, .sw__cell--center, .sw__cell--right { text-align: center; }

	/* The compound selector is needed: `.sw__four .sw__logo` sets 300 at
	   desktop and out-specifies a bare `.sw__logo` from in here. */
	.sw__logo,
	.sw__four .sw__logo,
	.sw__logo--w400 { width: 200px; }
	.sw__logo--w250 { width: 170px; }
	.sw__logo--w130 { width: 100px; }
	.sw__logo { margin: 0 20px 20px; }

	/* The homepage's empty group collapses here, because the image it holds is
	   the one that becomes visible. */
	.sw__gap1 { display: none; }

	.sw__foot { min-height: 50px; }

	.sw__cta--desktop { display: none; }
	.sw__cta--mobile { display: block; margin: 20px; }
	.sw__cta--mobile .sw__cta-img { width: 100%; }

	/* ---- faq: MEASURED at 375 ---- */
	.faq { padding: 20px 8px 60px; }
	.faq__title { margin: 40px 20px 0; font-size: 44px; line-height: 44px; }
	.faq__list { margin: 40px 20px 0; }
	.faq__item { margin-bottom: 10px; }
	/* The question LABEL is 20px on a 24px line, with a 20px inset before the
	   icon — the 18px I first used gave a wider text column, so three of the
	   ten questions wrapped a line shorter than theirs and the block measured
	   72px short. The button's own font-size is 18; the label inside it is 20. */
	.faq__q { font-size: 20px; line-height: 24px; padding: 15px; gap: 0; }
	.faq__q-text { padding-right: 20px; font-size: 22px; line-height: 26.4px; }
	.faq__a-inner { line-height: 26.1px; }
	.faq__q-icon { flex: 0 0 18px; }
}


/* ---------------------------------------------------- about us at <=768 - */
/*
 * MEASURED SEPARATELY at 375, images forced to load first.
 *
 *   hero                 1640.45   (wrap padding 20 10 60 10, content 355)
 *     head band            446     h1 40/48 with a 46 lead-in, lead 20/22
 *     cards              1114.45   stacked: 432.69 / 498.79 / 182.97
 *   making things better 2099.85   (NO 100px row margin here)
 *     three column blocks 1840.95  611.32 / 590.71 / 638.91
 *     strip band           178.91
 *   document             4726
 *
 * 768/769, not the homepage's 992. Read out of the row's own visibility
 * classes rather than carried over.
 */
@media (max-width: 768px) {

	.ab-hero {
		padding: 20px 10px 60px;
		background-image: var(--ab-hero-bg-mobile);
		background-position: -350px 0;
	}
	.ab-hero__inner { max-width: none; }

	/* The copy swaps are repeated here rather than inherited: the 769-992
	   block is bounded, so it no longer reaches this far down. Stating them in
	   both tiers is the price of a tier that cannot leak. */
	.ab-hero__lead--desktop { display: none; }
	.ab-hero__lead--mobile  { display: block; }
	.ab-card__body--desktop { display: none; }
	.ab-card__body--mobile  { display: block; }

	.ab-hero__title { margin: 46px 20px 20px; font-size: 40px; line-height: 48px; }

	/* Full-bleed to the content edge here — the side margins go to 0, which is
	   why the lead is 355 wide where the h1 is 315. */
	.ab-hero__lead--mobile { margin: 80px 0 50px; font-size: 20px; line-height: 22px; }

	/* One column. The cards keep their own faces but lose the 10px column
	   inset, except the middle one which keeps 20 top and bottom — that is
	   what makes the two 20px gaps between the three cards. */
	.ab-hero__cards { grid-template-columns: 1fr; }
	.ab-card__inner { margin: 0; }
	.ab-hero__cards .ab-card:nth-child(2) .ab-card__inner { margin: 20px 0; }

	/* 34px on a 22px word. Not a typo and not 1.2 — measured. */
	.ab-card__title { line-height: 34px; }
	.ab-card__body--mobile { font-size: 18px; line-height: 26.1px; }
	.ab-card__shout { margin: 20px; font-size: 26px; line-height: 28.6px; }

	/* ---- making things better: one column, and the bar moves ---- */
	/* On desktop the accent bar belongs to the intro band alone. Here it runs
	   the full height of each column block, so it moves onto the wrapper. */
	.mtb { padding: 20px 10px 60px; margin-top: 0; }
	.mtb__inner { max-width: none; }
	.mtb__grid { grid-template-columns: 1fr; }

	/* flex column, so the 20px margins between heading, intro and body do NOT
	   collapse into one. Collapsed they cost 40px per block, 120 on the row. */
	.mtb__col {
		display: flex;
		flex-direction: column;
		border-left: 5px solid;
	}
	.mtb__col--pale  { border-left-color: #ccf2dd; }
	.mtb__col--mid   { border-left-color: #95e1b4; margin: 40px 0; }
	.mtb__col--brand { border-left-color: #67c18d; }

	/* align-self:start has to be undone here, and it is not obvious why.
	   On desktop the grid runs in rows, so `start` is a VERTICAL instruction
	   that keeps the natural heading heights. Here the column is a flex column,
	   so the cross axis is HORIZONTAL and the same declaration shrink-wraps the
	   heading to its text: "Why Bushido?" measured 252.48 wide in a 310 column,
	   which quietly cancels its own text-align:center. Only that one heading
	   showed it — the other two wrap to the full width anyway and looked fine. */
	.mtb__head,
	.mtb__body { align-self: stretch; }

	.mtb__head {
		margin: 20px;
		font-size: 40px;
		line-height: 44px;
		text-align: center;
	}
	/* Still the odd one out at this size, and still in the other direction:
	   34px of line on a 40px word, where its two siblings get 44. */
	.mtb__col--mid .mtb__head { line-height: 34px; }

	/* The bar is on the wrapper now, so the intro gives its own back and
	   returns to a plain margin like everything else in the block. */
	.mtb__intro {
		border-left: 0;
		padding: 0;
		margin: 20px;
		font-size: 20px;
		line-height: 22px;
		text-align: center;
	}

	.mtb__body { margin: 20px; font-size: 18px; line-height: 26.1px; }

	.mtb__strip--desktop { display: none; }
	.mtb__strip--mobile  { display: block; margin: 60px 0 20px; }

	/* ---- legal pages: MEASURED at 375 ---- */
	/* The title row is 260 here as it is at 1440, but for a different reason:
	   50/60 type on TWO lines with a +40 top margin, where 1440 is 100/120 on
	   one line with a -20. Same number, nothing shared. */
	.title-band {
		padding: 40px 10px 20px;
		background-image: var(--title-band-bg-mobile);
		background-position: 0 0;
	}
	.title-band__title { margin: 40px 20px 20px; font-size: 50px; line-height: 60px; }

	/* margin-bottom goes to 0 here — it is 40 at both larger sizes. */
	.legal { padding: 40px 10px 20px; margin-bottom: 0; }
	.legal__heading { margin: 20px; line-height: 34px; }
	/* Terms keeps its bigger 30px here and takes the same 34 line as privacy. */
	.legal--terms .legal__heading { line-height: 34px; }
	.legal__body { margin: 20px; font-size: 18px; line-height: 26.1px; }

	/* ---- form pages: MEASURED at 375 ---- */
	/* This row KEEPS its 20px side padding at mobile where nearly every other
	   row on the site drops to 8 or 10. Measured, not assumed. */
	.form-embed { padding: 40px 20px; }
	.form-embed__inner { max-width: none; }

	/* The -5px pull is a desktop and tablet thing only; at mobile the band
	   sits flush. The 20px of vertical padding stays. */
	.cta-band--boxed { margin-top: 0; padding: 20px 8px; }

	/* ---- EHR team pages: MEASURED at 375 ---- */
	/* The hero loses its top padding entirely here — 0px 10px, not 20 20 0 —
	   and the title, icon and filter all centre and stack. */
	.team-hero {
		padding: 0 10px;
		background-image: var(--team-hero-bg-mobile);
		background-position: 0 0;
	}
	.team-hero__title { margin: 0 20px 20px; font-size: 40px; line-height: 48px; }
	.team-hero__bar { display: block; text-align: center; }
	/* 20px above the glyph and 7 below it before the menu starts — measured. */
	.team-hero .team-hero__icon {
		display: inline-block;
		flex: none;
		padding: 0;
		height: 70px;
		margin: 20px 0 0;
		text-align: center;
	}
	.team-hero .team-hero__icon::before { right: 0; }

	/* Stacked, each item 300 wide and centred. The type steps down to 16/26.1
	   here, which is what makes each item 36.09 rather than 39 — 3px an item,
	   and the list is six items long. */
	.team-filter__list { display: block; margin: 0; padding: 7.09px 0 20px; }
	.team-filter__item { text-align: center; }
	.team-filter__link { display: inline-block; width: 300px; font-size: 16px; line-height: 26.1px; }

	/* The roster's phone layout is in the team block near the top of the file. */
}

/* Below 480 the hero headline needs to come down again or it overflows. */
/* NOTE: no headline step-down below 480. The original keeps the hero at
   44/44 all the way down, and reducing it here made the H1 six pixels short
   and pulled the whole hero up with it. */
@media (max-width: 480px) {
	.svc__title { font-size: 30px; line-height: 34px; }
}


/* ================================================ services page — tiers = */
/*
 * Three blocks, in cascade order, and the first one is deliberately UNBOUNDED.
 *
 * Everything in it measured the SAME at 992 and at 375 — the body leading step
 * to 26.1, the 16px switch label, and the toggle's -20px lift where desktop
 * lifts 40. Writing those once, below 993, is the honest description. The two
 * bounded blocks after it hold what genuinely differs between the tiers.
 */

@media (max-width: 992px) {

	/* The site's body leading steps from 29 to 26.1 here — the same 2.9px per
	   line that is worth the footer's whole 357.66 vs 354.77. */
	.svc-intro__text p,
	.svc-full__text p,
	.svc-asneeded__intro p { line-height: 26.1px; }

	/* Only the four full-billing columns step their SIZE at 992. The intro and
	   the as-needed lead-in stay at 20px until 768 — measured on all three,
	   because "the body text steps here" would have been wrong for two of them. */
	.svc-full__text p { font-size: 18px; }

	.svc-more-wrap { margin-top: -10px; }
}

@media (min-width: 769px) and (max-width: 992px) {

	.svc-hero__title { font-size: 55px; }

	/* 380.8 and 571.19 of a 952 content box: 40 and 60 per cent, against 25
	   and 75 above 993. Their builder authors this with a `width: 40%`
	   override in its own 992 query — it is a step, not a squeeze. */
	.svc-intro__col--media { flex: 0 0 40%; max-width: 40%; }
	.svc-intro__col--text  { flex: 0 0 60%; max-width: 60%; }
}

@media (max-width: 768px) {

	/* ---- the hero header at 375 ---- */
	/*
	 * This page keeps 20px side gutters where the standard header drops to 8,
	 * and its Book a Call renders at 157.54 x 69.31 rather than 171.14 x 75.3
	 * because the box it sits in is 70% of a narrower row.
	 *
	 * BOTH BUTTON SIZES ARE MEASURED CONSTANTS, and both are honest about
	 * being that: their image is sized by an inline-block shrink-to-fit inside
	 * a percentage box, which resolves differently at every viewport width.
	 * 375 is one of the three widths this build is verified at; between 481
	 * and 768 the button will be a few pixels out on every page. Pre-existing,
	 * recorded rather than papered over.
	 *
	 * --hdr-h follows from the content: 20 top padding + 50.78 logo + 12 row
	 * gap + 69.31 button = 152.09, which is the header height the hero pulls
	 * itself up by.
	 */
	.bushido-hero-services      { --hdr-h: 152.09px; }
	.bushido-hero-weekly-update { --hdr-h: 151.70px; }

	.site-header--hero { padding-inline: 20px; }
	.site-header--hero .site-header__inner { padding: 20px 0 0; min-height: 0; }
	.site-header--hero .site-header__cta-img { width: 157.54px; height: 69.31px; }
	.bushido-hero-weekly-update .site-header__logo-img { height: 50.63px; }
	.bushido-hero-weekly-update .site-header__cta-img  { height: 69.06px; }

	/* ---- hero ---- */
	.svc-hero__title { font-size: 38px; }

	/* ---- intro: NO side padding on this row, at all ---- */
	/* Measured: their wrap reports `30px 0px 40px` here, so the 20px module
	   margins are the only inset and the picture is a 200px block centred in
	   the full 375. */
	.svc-intro { padding: 30px 0 40px; }
	.svc-intro__inner { flex-wrap: wrap; }
	.svc-intro__col--media,
	.svc-intro__col--text { flex: 0 0 100%; max-width: 100%; }
	.svc-intro__img { width: 200px; margin-inline: auto; }
	.svc-intro__text { margin: 20px; }
	.svc-intro__text p { font-size: 18px; }

	/* ---- full billing services ---- */
	.svc-full { padding: 20px 8px; }
	.svc-full__title { margin: 0 20px; font-size: 30px; line-height: 34px; text-align: center; }
	.svc-full__cols { flex-wrap: wrap; }
	.svc-full__col { flex: 0 0 100%; max-width: 100%; }

	/* The FIRST column keeps a 20px lead-in and the other three do not: their
	   modules carry margin-top 0 below 768 where the first carries 20. */
	.svc-full__text { margin: 0 20px 20px; }
	.svc-full__col:first-child .svc-full__text { margin: 20px; }

	/* ---- the service blocks ---- */
	.svc-block { flex: 0 0 100%; max-width: 100%; }

	/* Their photo modules lose their side margins and their top margin here —
	   EXCEPT in the first of the three full-billing rows, which keeps the top
	   20. Two blocks x 20px x ... it is the 40px difference between that row
	   at 431.91 and the two below it at 391.88. */
	.svc-block__fig { margin: 0 0 20px; }
	.svc-row--first .svc-block__fig { margin: 20px 0; }

	/* ---- as needed services ---- */
	.svc-asneeded { padding: 20px 8px 40px; }
	.svc-asneeded__title { margin: 20px 20px 0; font-size: 30px; line-height: 34px; text-align: center; }
	.svc-asneeded__intro { margin: 20px; }
	.svc-asneeded__intro p { font-size: 18px; }
}


/* ========================================== weekly update page — tiers = */
/*
 * Same shape as the Services tiers: one unbounded block below 993 for the
 * values that measured identically at 992 and 375, then the two bounded
 * blocks for what genuinely differs.
 */

@media (max-width: 992px) {

	/* The site's body leading steps to 26.1 here, and the intro lead follows
	   it. Everything else on this page sets its own line-height. */
	.wu-intro__lead p,
	.wu-report__text p { line-height: 26.1px; }

	/* Their 34px line gets an explicit line-height of 1 below 993 and keeps it
	   at 375, where only the size changes. Written unbounded because that is
	   how theirs is written and how it measures. */
	.wu-intro__big p { line-height: 1; }

	.wu-list__text { font-size: 20px; }

	/* 21px below 993 and it stays 21 at 375 — theirs is one unbounded query.
	   Bounding it to the 769-992 tier left the paragraph 22px on a phone,
	   which wrapped one line further and cost 12px. */
	.wu-stat__text p { font-size: 21px; }

	/* The two 20% columns beside WE GOT YOU! are desktop-only; the middle one
	   takes the whole width. */
	.wu-report__side { display: none; }
	.wu-report__banner { flex: 0 0 100%; max-width: 100%; }

	/* Both empty columns beside the badge are desktop-only too, so the row
	   stops wrapping and is 1px rather than 2. */
	.wu-stat__pad { display: none; }
}

@media (min-width: 769px) and (max-width: 992px) {

	.wu-hero__title { font-size: 55px; }

	.wu-intro__lead p { font-size: 20px; }

	.wu-includes { background-position: center top; }
	.wu-includes__title { margin-top: 25px; font-size: 34px; }

	.wu-report__banner-title { margin-top: 40px; }

	/* Hidden here, but their margin still steps — kept so the rule reads the
	   way theirs does if the visibility ever changes. */
	.wu-stat__badge { margin: -245px 63px 20px 20px; text-align: center; }
	.wu-stat__badge-img { width: 200px; }

	.wu-ask__line { font-size: 22px; }
}

@media (max-width: 768px) {

	/* ---- hero ---- */
	.wu-hero__title { font-size: 38px; }

	/* ---- intro ---- */
	.wu-intro { padding: 30px 20px 40px; }
	.wu-intro__lead p { font-size: 20px; }
	.wu-intro__big p { font-size: 26px; }

	/* ---- it includes ---- */
	.wu-includes { padding: 0 20px 40px; background-position: 40% 0%; }
	.wu-includes__head { display: block; }
	.wu-includes__head-col,
	.wu-includes__head-pad { max-width: none; }

	/* -80 on the left, which pushes the heading OFF the left edge of a 375
	   viewport — x=-60 on theirs. It overflows to the left, which creates no
	   scrollbar, so it is reproduced rather than clamped. */
	.wu-includes__title {
		margin: 50px 20px 40px -80px;
		font-size: 40px;
		text-align: center;
	}

	.wu-includes__lists { display: block; }
	.wu-includes__col { max-width: none; }
	/* The first list loses its lead-out here and the second keeps one: 30/0
	   against 20/20. Measured on both, because they are not the same. */
	.wu-list { margin: 30px 20px 0; }
	.wu-list--second { margin: 20px; }
	.wu-list__text { font-size: 20px; line-height: 1.4; }

	/* ---- the report: the diagrams swap for mobile artwork ---- */
	.wu-report { padding: 20px; }
	.wu-report__text, .wu-report__text--lead { margin: 20px; }
	.wu-report__text p { font-size: 20px; }

	.wu-report__fig--desktop { display: none; }
	.wu-report__fig--mobile  { display: block; }
	.wu-report__fig { margin: 20px; }
	.wu-report__fig--last  { margin: 0 20px 20px; }
	.wu-report__fig--flush { margin: 0 20px 20px; }
	.wu-report__fig--m250 .wu-report__img { width: 250px; }

	/* The broken mobile diagram carries no margin at all here. */
	.wu-report__fig.wu-missing { margin: 0; }

	/* Their column's own 20px lead-in is gone here — Beaver Builder clears
	   column margins at its mobile breakpoint, the same way it clears the row
	   margin that cost 10px on the software band. Measured: their col-content
	   reports margin-top 0px at 375. Worth 20px. */
	.wu-report__banner { margin-top: 0; }
	.wu-report__banner-title { margin: 20px; font-size: 30px; }

	/* ---- the 133% band ---- */
	.wu-stat { padding: 40px 20px 0; }
	.wu-stat__text { margin: 20px; }
	.wu-stat__badge { margin: -285px 20px 20px; text-align: left; }
	.wu-stat__badge-img { width: 180px; }

	/* ---- the ask: the whole row swaps ---- */
	.wu-ask--desktop { display: none; }
	.wu-ask--mobile  { display: block; }

	/* Their padding here is asymmetric — 8 on the right and nothing on the
	   left, so the artwork runs to the left edge. */
	.wu-ask--mobile {
		padding: 0 8px 0 0;
		background-color: #232323;
		background-position: left center;
	}

	.wu-ask--mobile .wu-ask__mcol { max-width: none; }

	.wu-ask--mobile .wu-ask__line--a {
		margin: 120px 15px 0;
		font-size: 18px;
		text-align: center;
	}
	.wu-ask--mobile .wu-ask__line--b {
		margin: 20px 20px 0;
		font-size: 20px;
		text-align: center;
	}
	.wu-ask--mobile .wu-ask__note { margin: 20px 20px 0; font-size: 20px; }
	.wu-ask--mobile .wu-ask__arrow { margin: 10px 20px; }
	.wu-ask--mobile .wu-ask__arrow-img { width: 50px; }
}


/* ==================================================== faqs page — tiers = */

@media (max-width: 992px) {
	/* The site's body leading steps to 26.1, and the question label follows it
	   — 46.1 tall buttons rather than 49, and a 58.10 pitch rather than 61. */
	.faqs__q { line-height: 26.1px; }
}

@media (max-width: 768px) {
	/* 10px side gutters on both of this page's rows, where most rows on the
	   site drop to 8 and a few keep 20. Measured on theirs, twice. */
	/* margin-bottom goes to 0 here — it is 40 at both larger sizes. Third time
	   this build has met Beaver Builder clearing a margin at its mobile
	   breakpoint: the software band's row, weekly-update's banner column, and
	   now this row. The legal pages already carried the same rule. */
	.faqs { padding: 100px 10px 20px; margin-bottom: 0; }
	.faqs__q { font-size: 20px; }
}


/* ================================= CONTACT — page 17 of 26 ============= */
/* Measured on https://bushidobilling.com/contact/ at 1440 / 992 / 375, with
   the ClickUp embed allowed to settle first:

                       1440       992       375
     contact row       623       619.51    769.2
       head group      317       316.41    270.11
       cols group      266       263.10    459.09
     dark CTA band     149.4     143.05    284.4
     document         1223      1210      1755

   THE ROW IS THE FORM PAGES' ROW WITH HALF THE PADDING. Same background file,
   same 1238 content box, 20px top and bottom against their 40. Nothing looks
   different; it is 40px of document.

   THE LEAD'S LEADING IS INHERITED, NOT PROPORTIONAL. Their module sets a size
   and no line-height, so the leading is the site's body value in pixels — 29
   at 1440 and 26.1 below 993 — while the size itself goes 23, 23, 20. A ratio
   taken off the desktop pair would be wrong at both other widths. */

.contact {
	/* 20, NOT the .form-embed 40. Measured on both pages side by side. */
	padding: 20px;
	background-image: var(--contact-bg);
	background-repeat: no-repeat;
	background-position: 50% 100%;   /* centre BOTTOM, as the form pages' is */
	background-size: cover;
}

/* The same 1238 the three form pages use — the client set it once for this
   form and nothing else on the site is that width. */
.contact__inner { width: 100%; max-width: 1238px; margin-inline: auto; }

/* Their column content box is a flex column, which is what keeps the h1's
   20px lead-in inside the column instead of collapsing up into the row. */
.contact__head { display: flex; flex-direction: column; }

.contact__title {
	margin: 20px;
	font-family: var(--font-head);
	font-size: 100px;
	font-weight: 700;
	/* 1.2 at every width — 120 on 100, 102 on 85, 69.6 on 58. Checked at all
	   three rather than carried: weekly-update's headings change RATIO below
	   768 and this one does not. */
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	color: #fff;
	text-shadow: 2px 2px 0 #3d3d3d;
}

.contact__lead {
	margin: 20px 100px 40px;
	font-size: 23px;
	line-height: 29px;
	text-align: center;
	color: #fff;
}
/* 10px between the two paragraphs, and none under the last — their module
   measures 97 at 1440, which is 58 + 10 + 29 exactly. */
.contact__lead p { margin: 0 0 10px; }
.contact__lead p:last-child { margin-bottom: 0; }

/* flex-start, NOT the default stretch. Their form column reports 199.5 at
   1440 while the column beside it reports 266 — the group takes its height
   from the taller one and does not equalise them. */
.contact__cols { display: flex; align-items: flex-start; }
.contact__col  { width: 50%; }

/* A flex column, and that is load-bearing rather than decorative. Every
   .fl-col-content on this site is one, so adjoining module margins do NOT
   collapse: their logo figure's 20 below and the phone line's 20 above stay
   40px apart. Built as a plain block it collapsed to 20 and took the phone,
   the band, the footer and the document 20px up with it.

   The 15px radius is invisible — no background and no border sit on this box.
   Reproduced because it is on their column and costs nothing; noted because
   the next person will otherwise look for the rounded corner it implies. */
.contact__col-inner { display: flex; flex-direction: column; border-radius: 15px; }

/* The type here is set for the IFRAME's sake, not for any text — there is
   none. An inline replaced element sits on a line box and the space under it
   is that box's half-leading plus the strut's descender, so it is a function
   of the leading around it, not of the frame. Their module is 20/29 and this
   inherited the theme's own 17/1.65 until it was set, which is the wrong
   mechanism whatever it measures.

   IT DOES NOT CLOSE THE LAST HALF PIXEL, AND THE REASON IS WORTH RECORDING.
   Their gap is 7.5 and this one is 8.0 with the same font at the same size and
   leading — confirmed by dropping the identical synthetic element into both
   pages: theirs answers 7.5 for Montserrat AND Arial and steps 7 / 7.5 / 8
   across line-heights 28 / 29 / 30, while this one answers 8 for Montserrat,
   Arial and serif alike and steps 7 / 8. Three different fonts giving one
   number is not font metrics — it is the browser resolving a fractional line
   box to a whole pixel, which the method doc already records as the cause of
   the six 1px items on the homepage. Chasing it further would mean pinning a
   height on the frame, and a height written back from a measurement cannot
   then test anything. It reaches the document only at 375, where the columns
   stack. */
.contact__frame { margin: 20px; font-size: 20px; line-height: 29px; }

/* The iframe stays INLINE, the same decision the other three form pages make:
   their module measures 7.5px taller than the frame inside it, which is the
   descender space under an inline replaced element on a line box. Making it a
   block removes that space and is wrong by exactly as much. */
.contact__frame iframe { width: 100%; border: 1px solid #ccc; background: transparent; }

.contact__logo { margin: 20px; text-align: center; line-height: 0; }
/* width AND height:auto together. Below 769 the 295px column clamps the image
   through max-width and it has to keep its ratio — 300x157 becoming 295x154.38
   is measured on theirs, and a width-only rule stretches it instead. */
.contact__logo-img { display: inline; width: 300px; max-width: 100%; height: auto; }

.contact__phone { margin: 20px; text-align: center; font-size: 20px; line-height: 29px; }
.contact__phone p { margin: 0; }

/* ---- the CTA band here is the HOMEPAGE's geometry in the form pages' colour */
/* Not a third band. Same 70/30 columns, same 50/20/40 heading, same 15/20
   image padding — the whole difference from .cta-band is the colour and the
   5px pull, and the whole difference from .cta-band--boxed is that this one
   has NO vertical padding. 149.4 against the boxed band's 184.39. */
.cta-band--dark {
	margin-top: -5px;
	background: #232323;
}


/* ============================== contact page — tiers = */

@media (max-width: 992px) {
	/* The lead keeps its 23px and takes the site's smaller leading. Its own
	   size does not step until 769, so this rule is correct at 375 too. */
	.contact__lead { line-height: 26.1px; }
	/* The phone line sets nothing of its own — it is the column's inherited
	   body type, which steps here and stays stepped at 375. */
	.contact__phone { font-size: 18px; line-height: 26.1px; }
	/* The frame's line box follows the same step, and the iframe's baseline
	   gap follows it down: 6.6px here against 7.5 at 1440. */
	.contact__frame { font-size: 18px; line-height: 26.1px; }
}

@media (min-width: 769px) and (max-width: 992px) {
	/* Bounded at BOTH ends: 58px takes over at 768 and a bare max-width rule
	   here would also have to be re-overridden there. */
	.contact__title { font-size: 85px; }
	.contact__lead  { margin: 20px 30px 40px; }
}

@media (max-width: 768px) {
	/* The h1 loses three of its four margins here — 20 above and nothing
	   round the other three sides, so it spans the full 335 column. */
	.contact__title { margin: 20px 0 0; font-size: 58px; }
	.contact__lead  { margin: 20px 5px 20px; font-size: 20px; }

	/* The columns stack and go full width. */
	.contact__cols { flex-direction: column; }
	.contact__col  { width: 100%; }

	/* Side margins go, top and bottom stay — Beaver Builder's mobile rules
	   clear the module's horizontal margins only, so the frame runs the full
	   width of the column while keeping its 20px above and below. */
	.contact__frame { margin: 20px 0; }

	/* The band sits flush here: the -5px pull is a row margin and Beaver
	   Builder clears row margins at its mobile breakpoint. Fourth time on this
	   build. It keeps its colour and gains nothing else — no padding, unlike
	   .cta-band--boxed, which is why this page's band is 284.4 where the form
	   pages' is 324.4. */
	.cta-band--dark { margin-top: 0; }

	/* AND NOTHING ELSE. Their figure sits 20px above the band's bottom edge and
	   the shared .cta-band__link has 12, which looks like an 8px difference
	   and is not one: their photo module sets line-height 0, so its image has
	   no baseline gap under it, while this link is inline-block round an
	   inline image and carries an 8.05px one. 12 + 8.05 is their 20. Adding a
	   padding-bottom: 20px here — comparing their MARGIN with this PADDING as
	   though the two boxes were the same shape — made the band 292.44 against
	   their 284.4 and was the only fault at 375. */
}


/* ============================ TESTIMONIALS — page 19 of 26 ============== */
/* Measured on https://bushidobilling.com/testimonials/ at 1440 / 992 / 375:

     title band      200      126      130.40
     testimonials   5776.49  4204.24  10740.86
     white CTA       169.40   163.05   284.40
     document       6601     4946     11857

   THE TITLE BAND IS NOT THE SHARED ONE. Privacy, terms and FAQs use
   template-parts/title-band.php and it measures 260 / 106 / 200 with a -20px
   pull and different artwork. This one is 200 / 126 / 130.40 with no pull at
   1440, +20 at 992 and +40 at 375. Same idea, different component, and the
   only way to know was to check all three.

   THE CONTENT ROW IS 1695.99px. A FIFTH container width on this site, after
   1400, 1200, 1600 and the form pages' 1238. It only binds above a 1735px
   viewport, which is exactly why it would have been easy to miss.

   THE PREFIX IS `reviews`, NOT `tstm`, AND THAT IS A SCAR. `tstm` is already
   the HOMEPAGE's testimonial strip, further up this file. Written as `.tstm`
   these rules came later, won on order at equal specificity, and replaced that
   section's `padding: 100px 20px` with 60 — 80px off the homepage, from a page
   that shares nothing with it and was never opened. It was caught by measuring
   the homepage after touching the CTA band, and by nothing else. */

.reviews-hero {
	padding: 20px 20px 40px;
	background-image: var(--reviews-hero-bg);
	background-repeat: no-repeat;
	background-position: 0 0;        /* left top */
	background-size: cover;
}
/* flow-root, and it matters only at mobile — where the band's bottom padding
   goes to 0 and the title's 20px bottom margin would otherwise collapse
   straight out of the section. Worth 20px there and nothing at all above 769,
   which is why a plain block looked right twice before it looked wrong once. */
.reviews-hero__inner { display: flow-root; width: 100%; max-width: var(--wrap); margin-inline: auto; }

.reviews-hero__title {
	margin: 0 20px 20px;
	font-family: var(--font-head);
	font-size: 100px;
	line-height: 1.2;                /* 120 on 100, 66 on 55, 50.4 on 42 */
	font-weight: 700;
	letter-spacing: normal;
	text-align: center;
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* ---- the wall ---- */
.reviews {
	padding: 60px 20px;
	background-image: var(--reviews-bg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}
/* 1695.99, and it is theirs to the hundredth. */
.reviews__inner { width: 100%; max-width: 1695.99px; margin-inline: auto; }

/* Their group is fl-col-group-equal-height AND fl-col-group-align-center, so
   the single photograph beside a video is CENTRED against it rather than
   sitting at the top. align-items:center is that, and it is why the photo's y
   is not the row's y at any width. */
.reviews__feature { display: flex; align-items: center; }
.reviews__video { flex: 0 0 65%; min-width: 0; }
/* 35% LESS its own 40px of side margins. The figure is the flex item here and
   its margins sit outside the basis, so a flat 35% makes the pair 1440 wide in
   a 1400 box — which is exactly the 20px of horizontal overflow scrollWidth
   caught, and nothing about the page's height showed it. */
.reviews__feature > .reviews__photo { flex: 0 0 calc(35% - 40px); min-width: 0; }
/* The video swaps sides every block. Order, not a second rule set. */
.reviews__feature--video-right .reviews__video { order: 2; }

/* display:contents so the button adds no box — the thumbnail measures exactly
   what their bare <img> does, and the control is still a real button. */
.reviews__play { display: contents; cursor: pointer; }
.reviews__play-img {
	display: block;
	width: calc(100% - 40px);
	height: auto;
	margin: 20px 20px 60px;          /* 60 below, not 20 — measured */
	cursor: pointer;
}
.reviews__play:focus-visible .reviews__play-img {
	outline: 3px solid var(--green-deep);
	outline-offset: 3px;
}

.reviews__photo { margin: 20px; }
.reviews__img { display: block; width: 100%; height: auto; }

/* Four across, thirds of nothing — 25% each, and the cell is what carries the
   width so the figure keeps its own 20px margins inside it. */
.reviews__grid { display: flex; align-items: flex-start; }
/* A flex COLUMN as well as a flex item, and that is load-bearing in exactly
   one cell on this page: the one holding a photograph AND the pixel spacer
   under it. As a plain block their 20px margins collapse into one and the row
   measures 274.66 against their 294.66. Every .fl-col-content on this site is
   a flex column; this is the second time that has been worth 20px, after the
   contact page's aside. */
.reviews__cell { flex: 0 0 25%; min-width: 0; min-height: 1px; display: flex; flex-direction: column; }

/* 10px with 20px margins, which is the 50 their spacer measures. Writing 50
   here would have been the same number and none of the reason. */
.reviews__gap { height: 10px; margin: 20px; }

.reviews__spacer { line-height: 0; }
.reviews__spacer-box { display: inline-block; line-height: 0; font-size: 20px; }
.reviews__spacer-box img { display: inline; vertical-align: middle; }

/* ---- the video modal ---- */
/* Their trigger is a <div> with no role and the six videos cannot be reached
   from a keyboard. This is a <dialog>: Escape and the backdrop close it, focus
   is handled by the element itself, and the iframe is built on open so the
   page does not load six YouTube players nobody asked for. */
.reviews__modal {
	width: 900px;
	max-width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
}
.reviews__modal::backdrop { background: rgba(0, 0, 0, .75); }
/* The homepage's three popups are 700 wide, not 900 — measured on theirs. */
.reviews__modal--home { width: 700px; }
.tstm__card .reviews__play:focus-visible .tstm__card-img {
	outline: 3px solid var(--green-deep);
	outline-offset: 3px;
}
.reviews__modal-frame { position: relative; padding-top: 56.25%; }   /* their 16:9 */
.reviews__modal-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.reviews__modal-close {
	position: absolute;
	top: -34px;
	right: 0;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

/* ---- the CTA band here is WHITE, and it is the fourth variant ---- */
/* Same geometry as the homepage's in every respect — 70/30 columns, the
   50/20/40 heading, the 15/20 image padding, 149.4 tall. What changes is the
   colour, the heading's ink, and a +20px top margin where the form pages pull
   -5. So it is a modifier, like --dark, rather than a fourth copy:

     .cta-band          #1a1a1a   no pull   white title   149.4
     .cta-band--dark    #232323   -5px      white title   149.4
     .cta-band--boxed   #232323   -5px      white title   184.39
     .cta-band--light   #ffffff   +20px     BLACK title   149.4  */
.cta-band--light { margin-top: 20px; background: #fff; }
.cta-band--light .cta-band__title { color: #000; }


/* ============================== testimonials — tiers = */

@media (min-width: 769px) and (max-width: 992px) {
	/* The band gains a 20px pull of its own here and the title steps hard —
	   55/66 with a -40 lead-in, which is 46px of block against the 140 it has
	   at 1440. */
	.reviews-hero { margin-top: 20px; }
	.reviews-hero__title { margin: -40px 20px 20px; font-size: 55px; }
}

@media (max-width: 768px) {
	/* 40px above the band here, not 20, and the bottom padding goes entirely. */
	.reviews-hero { margin-top: 40px; padding: 20px 20px 0; }
	.reviews-hero__title { margin: 0 20px 20px; font-size: 42px; }
	.reviews-hero {
		background-image: var(--reviews-hero-bg-mobile);
		background-position: 100% 0;   /* right top — it flips sides */
	}

	/* 8px gutters on the wall, where the title band above it keeps 20. */
	.reviews { padding: 60px 8px; }
	.reviews__inner { max-width: none; }

	/* Everything stacks: the feature pair and the rows of four alike.
	   A flex COLUMN rather than a block, because their column content is one
	   and the two boxes must not share a margin. As blocks, the video's 20px
	   lead-out and the photograph's 20px lead-in collapse into a single 20 and
	   each feature measures 456.94 against their 476.95 — 20px six times over,
	   120 off the document. The `order` that swaps the video's side at desktop
	   keeps working here and puts it below the photograph, which is their DOM
	   order on those blocks anyway. */
	.reviews__feature { display: flex; flex-direction: column; align-items: stretch; }
	.reviews__grid { display: block; }
	.reviews__cell { min-height: 1px; }

	/* The video's 60px lead-out becomes 20 — the only number in the block that
	   changes at mobile. */
	.reviews__play-img { margin: 20px; }

	/* And the band's +20 goes, because it is a ROW margin and Beaver Builder
	   clears those at its mobile breakpoint. Fifth time on this build: the
	   software band's -10, weekly-update's column +20, the FAQ row's -40, the
	   contact band's -5, and now this +20. */
	.cta-band--light { margin-top: 0; }
}


/* ============================== BOOK A CALL — page 20 of 26 ============= */
/* Measured on https://bushidobilling.com/book-call/ at 1440 / 992 / 375:

     booking row   965.50   954.91   971.21
     dark band     180      180      180
     document     1601     1587     1853

   THE ROW IS THE CONTACT PAGE'S ROW — same background file, same 1238 box,
   same 20px padding, same 20px side padding at mobile, and a lead paragraph
   whose rules are identical at all three widths down to the 100/30/5 side
   margins. So this page's markup uses .contact__inner, .contact__lead and
   .contact__frame directly and only the section, the heading and the card are
   written here. The two rows are one component with two page names, which is
   worth saying out loud: a change to .contact__lead now moves this page too. */

.booking {
	padding: 20px;
	background-image: var(--booking-bg);
	background-repeat: no-repeat;
	background-position: 50% 100%;   /* centre BOTTOM, as contact's is */
	background-size: cover;
}

/* THE STACK IS WRITTEN OUT INSTEAD OF var(--font-head), AND THAT IS THE POINT.
   This page's Beaver Builder font request is `Montserrat:400,300` and nothing
   else, so the Oswald this heading names is never loaded and the type falls
   through to the generic sans-serif. --font-head would fall to "Helvetica
   Neue" instead, which is a different face and a different width.

   Measured on theirs: the rendered line box for "DISCOVERY" is 222.44px.
   sans-serif gives 222.44, Helvetica Neue 221.70, Oswald 226.73, Montserrat
   225.53. At 375 the heading wraps to two lines in a 295px box, so the wrong
   fallback is a real risk of the wrong number of lines, not just sub-pixels.

   And note that `document.fonts.check('700 38px Oswald')` returns TRUE on
   their page with no Oswald loaded — it returns true for a font name that does
   not exist either. It is not a usable check; measuring a string is. */
.booking__title {
	margin: 20px;
	font-family: Oswald, sans-serif;
	font-size: 100px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: normal;
	text-align: center;
	color: #fff;
	text-shadow: 2px 2px 0 #3d3d3d;
}

/* Their column content is a flex column and here that is worth 20px: the
   heading's 20px lead-out and the paragraph's 20px lead-in sit 40 apart on
   their page, and as plain blocks they collapse into one. Contact reproduces
   this with its own .contact__head wrapper; this page has no wrapper because
   the card is a sibling of both, so the rule goes on the inner box.
   Sixth time on this build. */
.booking .contact__inner { display: flex; flex-direction: column; }

/* The white card the schedule sits on. Full width of the 1238 box; the 20px
   inset round the iframe is .contact__frame's margin, shared with contact. */
.booking__card { background: #fff; border-radius: 15px; }

/* 180px of nothing: 20 of row padding, 20 of module margin, a 100px box, and
   the same again below. There is no content in it on their site either. */
.booking-outro { padding: 20px; background: #232323; }
.booking-outro__gap { height: 100px; margin: 20px; }


/* ============================== book a call — tiers = */

@media (min-width: 769px) and (max-width: 992px) {
	.booking__title { font-size: 75px; }
}

@media (max-width: 768px) {
	/* 38px on a FLAT 34px line, not 1.2. That is the theme's heading leading
	   below 769 — the same 34 the legal pages' headings take, so it is a rule
	   rather than a coincidence. Worth checking against, because 38 x 1.2
	   would be 45.6 and the heading is two lines here: 23px a line, 46 on the
	   section. */
	.booking__title { margin: 20px 20px 0; font-size: 38px; line-height: 34px; }

	/* The dark band drops to the 8px gutter every full-width row takes at
	   mobile. Its 180px does not change at any width. */
	.booking-outro { padding: 20px 8px; }
}


/* ============================ JOIN OUR TEAM — page 21 of 26 ============= */
/*
 * REDESIGNED 2026-09-16 at Gerek's request. The original is one long column of
 * same-weight text. This page is tuned for AI visibility, so the redesign may
 * not add or change a single word: page-join-team.php only WRAPS the client's
 * existing HTML (a card per <h2>, a card per FAQ pair) and everything below
 * styles those wrappers. Icons are CSS masks and carry no text.
 *
 *   intro      a mint "letter" card from Sara; her two lists become chips
 *   sections   white cards, green Oswald headings with a line icon
 *   lists      green checkmarks; benefits as a tile grid
 *   not for    a soft callout with crosses
 *   apply      a green card, then the Apply artwork on a green band
 *   faq        question/answer cards, two across
 *   aside      desktop only: a sticky card repeating the Apply artwork,
 *              aria-hidden with alt="" so nothing new is read out or indexed
 */

.jt {
	overflow-x: clip;
	padding: 60px 20px 0;
	background:
		radial-gradient(1200px 500px at 85% 0%, rgba(103, 193, 141, .10), transparent 70%),
		#f5f8f6;
}

.jt__inner {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
}

.jt__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 40px;
	align-items: start;
}

.jt__body { min-width: 0; font-size: 19px; line-height: 1.65; color: var(--ink-soft); }
.jt__body p { margin: 0 0 14px; }
.jt__body p:last-child { margin-bottom: 0; }
.jt__body p:empty { display: none; }
.jt__body strong { color: var(--ink); }

/* The client's inline font-size spans are inline styles, so !important is the
   only way to let the card headings set their own size. The spans stay in the
   HTML untouched. */
.jt__body h2 span,
.jt__body h3 span { font-size: inherit !important; }

/* ---- intro: Sara's letter ---- */
.jt-intro {
	position: relative;
	margin-bottom: 28px;
	padding: 44px 48px 40px;
	background: linear-gradient(135deg, #e3f5ea 0%, #f1faf4 100%);
	border-radius: 24px;
	overflow: hidden;
}
.jt-intro::after {
	content: "";
	position: absolute;
	right: -60px;
	bottom: -70px;
	width: 300px;
	aspect-ratio: 1288 / 1200;
	background: var(--jt-mark) no-repeat center / contain;
	opacity: .12;
	pointer-events: none;
}
.jt-intro > * { position: relative; z-index: 1; }

/* "We're Hiring! Join our team as a Billing Specialist." — the kicker. */
.jt-intro p:has(> strong:only-child) {
	margin-bottom: 18px;
	font-family: var(--font-head);
	font-size: 38px;
	line-height: 1.15;
	font-weight: 700;
}
.jt-intro p:has(> strong:only-child) strong { color: #2f7a52; font-weight: 700; }

/* Sara's two lists as chips. */
.jt-intro ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 6px 0 22px;
	padding: 0;
	list-style: none;
}
.jt-intro li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px 9px 12px;
	font-size: 16px;
	line-height: 1.3;
	font-weight: 600;
	color: #245f40;
	background: #fff;
	border: 1px solid rgba(78, 161, 115, .35);
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(32, 32, 32, .05);
}
.jt-intro li::before {
	content: "";
	flex: 0 0 16px;
	height: 16px;
	background: var(--green);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012.5l4.5%204.5L19%207.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012.5l4.5%204.5L19%207.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* The second list is questions, so it wears a lighter chip. */
.jt-intro ul ~ ul li { background: rgba(255, 255, 255, .6); font-weight: 500; }
.jt-intro ul ~ ul li::before { background: #9ccfb1; }

/* ---- section cards ---- */
.jt-sec {
	margin-bottom: 24px;
	padding: 36px 44px 38px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(32, 32, 32, .04), 0 10px 30px rgba(32, 32, 32, .06);
}

.jt-sec > h2 {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 18px;
	padding-bottom: 16px;
	font-family: var(--font-head);
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: #2f7a52;
	border-bottom: 2px solid #e6f3eb;
}
/* The icon: a green circle with a white line glyph, both from CSS. */
.jt-sec > h2::before {
	content: "";
	flex: 0 0 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--green);
	-webkit-mask-size: 24px 24px;
	mask-size: 24px 24px;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	box-shadow: none;
}
/* A mask would cut the circle away too, so the circle is drawn behind the
   glyph with an outline shadow on the heading row instead. */
.jt-sec > h2 { position: relative; }
.jt-sec > h2::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 48px;
	height: 48px;
	margin-top: -32px;
	border-radius: 50%;
	background: #e3f5ea;
	z-index: -1;
}
.jt-sec { position: relative; isolation: isolate; }
.jt-sec > h2::before { background-color: #2f7a52; }
.jt-sec--role > h2::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='7'%20width='20'%20height='14'%20rx='2'/%3E%3Cpath%20d='M16%207V5a2%202%200%200%200-2-2h-4a2%202%200%200%200-2%202v2'/%3E%3Cpath%20d='M2%2013h20'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='7'%20width='20'%20height='14'%20rx='2'/%3E%3Cpath%20d='M16%207V5a2%202%200%200%200-2-2h-4a2%202%200%200%200-2%202v2'/%3E%3Cpath%20d='M2%2013h20'/%3E%3C/svg%3E"); }
.jt-sec--remote > h2::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2011l9-8%209%208'/%3E%3Cpath%20d='M5%2010v10h14V10'/%3E%3Cpath%20d='M10%2020v-6h4v6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2011l9-8%209%208'/%3E%3Cpath%20d='M5%2010v10h14V10'/%3E%3Cpath%20d='M10%2020v-6h4v6'/%3E%3C/svg%3E"); }
.jt-sec--daily > h2::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='5'%20y='3'%20width='14'%20height='18'%20rx='2'/%3E%3Cpath%20d='M9%203h6v3H9z'/%3E%3Cpath%20d='M9%2011h6M9%2015h4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='5'%20y='3'%20width='14'%20height='18'%20rx='2'/%3E%3Cpath%20d='M9%203h6v3H9z'/%3E%3Cpath%20d='M9%2011h6M9%2015h4'/%3E%3C/svg%3E"); }
.jt-sec--experience > h2::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='9'%20r='6'/%3E%3Cpath%20d='M8.5%2014l-1.5%207%205-3%205%203-1.5-7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='9'%20r='6'/%3E%3Cpath%20d='M8.5%2014l-1.5%207%205-3%205%203-1.5-7'/%3E%3C/svg%3E"); }
.jt-sec--pay > h2::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%202v20'/%3E%3Cpath%20d='M17%206H9.5a3.5%203.5%200%200%200%200%207h5a3.5%203.5%200%200%201%200%207H6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%202v20'/%3E%3Cpath%20d='M17%206H9.5a3.5%203.5%200%200%200%200%207h5a3.5%203.5%200%200%201%200%207H6'/%3E%3C/svg%3E"); }
.jt-sec--benefits > h2::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.8%205.6a5.5%205.5%200%200%200-7.8%200L12%206.6l-1-1a5.5%205.5%200%200%200-7.8%207.8L12%2022l8.8-8.6a5.5%205.5%200%200%200%200-7.8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.8%205.6a5.5%205.5%200%200%200-7.8%200L12%206.6l-1-1a5.5%205.5%200%200%200-7.8%207.8L12%2022l8.8-8.6a5.5%205.5%200%200%200%200-7.8z'/%3E%3C/svg%3E"); }
.jt-sec--hours > h2::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%207v5l3%202'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%207v5l3%202'/%3E%3C/svg%3E"); }
.jt-sec--culture > h2::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9'%20cy='8'%20r='3.5'/%3E%3Cpath%20d='M2.5%2021v-1.5A5.5%205.5%200%200%201%208%2014h2a5.5%205.5%200%200%201%205.5%205.5V21'/%3E%3Ccircle%20cx='17.5'%20cy='9'%20r='2.5'/%3E%3Cpath%20d='M17%2014h.5a4%204%200%200%201%204%204v3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9'%20cy='8'%20r='3.5'/%3E%3Cpath%20d='M2.5%2021v-1.5A5.5%205.5%200%200%201%208%2014h2a5.5%205.5%200%200%201%205.5%205.5V21'/%3E%3Ccircle%20cx='17.5'%20cy='9'%20r='2.5'/%3E%3Cpath%20d='M17%2014h.5a4%204%200%200%201%204%204v3'/%3E%3C/svg%3E"); }
.jt-sec--not-for > h2::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M9%209l6%206M15%209l-6%206'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M9%209l6%206M15%209l-6%206'/%3E%3C/svg%3E"); }
.jt-sec--apply > h2::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%202L11%2013'/%3E%3Cpath%20d='M22%202l-7%2020-4-9-9-4%2020-7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%202L11%2013'/%3E%3Cpath%20d='M22%202l-7%2020-4-9-9-4%2020-7z'/%3E%3C/svg%3E"); }
.jt-sec--faq > h2::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M9.2%209a3%203%200%200%201%205.8%201c0%202-3%202.5-3%204.5'/%3E%3Cpath%20d='M12%2018h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M9.2%209a3%203%200%200%201%205.8%201c0%202-3%202.5-3%204.5'/%3E%3Cpath%20d='M12%2018h.01'/%3E%3C/svg%3E"); }

/* Lists inside cards: green checks. */
.jt-sec ul { margin: 4px 0 16px; padding: 0; list-style: none; }
.jt-sec li { position: relative; margin: 0 0 10px; padding-left: 34px; }
.jt-sec li:last-child { margin-bottom: 0; }
.jt-sec li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .28em;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #e3f5ea;
}
.jt-sec li::after {
	content: "";
	position: absolute;
	left: 5px;
	top: calc(.28em + 5px);
	width: 12px;
	height: 12px;
	background: #2f7a52;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012.5l4.5%204.5L19%207.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012.5l4.5%204.5L19%207.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Pay: the $18.00 already sits in <strong>; it gets the brand's weight. */
.jt-sec--pay strong { color: #2f7a52; font-size: 1.15em; }

/* Benefits: a tile grid. */
.jt-sec--benefits ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.jt-sec--benefits li {
	margin: 0;
	padding: 14px 16px 14px 50px;
	font-weight: 600;
	background: #f5f8f6;
	border-radius: 12px;
}
.jt-sec--benefits li::before { left: 16px; top: 50%; margin-top: -11px; background: #fff; }
.jt-sec--benefits li::after { left: 21px; top: 50%; margin-top: -6px; }

/* Who this role is not for: a callout, crosses instead of checks. */
.jt-sec--not-for {
	background: #fbf8f3;
	box-shadow: inset 5px 0 0 #e8cb62, 0 10px 30px rgba(32, 32, 32, .05);
}
.jt-sec--not-for > h2 { color: var(--ink); border-bottom-color: #f1e8d6; }
.jt-sec--not-for > h2::before { background-color: #8a6d1f; }
.jt-sec--not-for > h2::after { background: #f6ecd0; }
.jt-sec--not-for li::before { background: #f6ecd0; }
.jt-sec--not-for li::after {
	background: #8a6d1f;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%207l10%2010M17%207L7%2017'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%207l10%2010M17%207L7%2017'/%3E%3C/svg%3E");
}

/* How do I apply: the brand green card. */
.jt-sec--apply {
	color: #fff;
	background: linear-gradient(135deg, #4ea173 0%, #67c18d 100%);
	box-shadow: 0 14px 36px rgba(78, 161, 115, .30);
}
.jt-sec--apply > h2 { color: #fff; border-bottom-color: rgba(255, 255, 255, .25); }
.jt-sec--apply > h2::before { background-color: #2f7a52; }
.jt-sec--apply > h2::after { background: #fff; }
.jt-sec--apply p { font-size: 20px; }

/* FAQ: the section is a plain heading over a grid of Q&A cards. */
.jt-sec--faq { padding: 0; background: none; box-shadow: none; }
.jt-sec--faq > h2 { border-bottom: 0; padding-bottom: 0; margin-bottom: 20px; }
/* No bottom padding on this heading, so the circle centres on the row itself. */
.jt-sec--faq > h2::after { margin-top: -24px; }
.jt-faq {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
.jt-qa {
	padding: 24px 26px;
	font-size: 17px;
	line-height: 1.6;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(32, 32, 32, .04), 0 8px 24px rgba(32, 32, 32, .05);
}
.jt-qa h3 {
	margin: 0 0 10px;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: #2f7a52;
}
.jt-qa p { margin: 0; }

/* ---- the sticky Apply card (desktop) ---- */
.jt__aside { position: sticky; top: 30px; }
.jt__aside-card {
	padding: 28px 22px 22px;
	text-align: center;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(32, 32, 32, .04), 0 10px 30px rgba(32, 32, 32, .08);
}
.jt__aside-mark {
	display: block;
	width: 64px;
	height: 60px;
	margin: 0 auto 14px;
	background: var(--jt-mark) no-repeat center / contain;
}
.jt__aside-link { display: block; transition: transform .15s ease; }
.jt__aside-link:hover { transform: translateY(-2px); }
.jt__aside-img { display: block; width: 100%; height: auto; }

/* ---- the Apply artwork on its green band ---- */
.jt__apply {
	/* Full-bleed: out of the 1200 column to the viewport edges. .jt clips the
	   overflow so this never adds a horizontal scrollbar. */
	margin: 36px calc(50% - 50vw) 0;
	padding: 56px 20px 60px;
	text-align: center;
	line-height: 0;
	background:
		radial-gradient(900px 300px at 50% 0%, rgba(255, 255, 255, .18), transparent 70%),
		linear-gradient(135deg, #4ea173 0%, #67c18d 100%);
}
.jt__apply-img { display: inline; width: 420px; max-width: 100%; height: auto; transition: transform .15s ease; }
.jt__apply a:hover .jt__apply-img { transform: translateY(-2px); }

/* The title on this page is 80px on the live site, not the shared band's 100. */
@media (min-width: 993px) {
	.title-band:has(+ .jt) .title-band__title { font-size: 80px; line-height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
	.jt__aside-link, .jt__apply-img { transition: none; }
}

/* ============================== join our team — tiers = */

@media (max-width: 1100px) {
	.jt__layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; }
}

/* Tablets and phones: one column, no sidebar — the Apply band closes the page. */
@media (max-width: 992px) {
	.jt { padding: 40px 20px 0; }
	.jt__layout { display: block; }
	.jt__aside { display: none; }
	.jt-intro { padding: 36px 34px 32px; }
	.jt-intro p:has(> strong:only-child) { font-size: 32px; }
	.jt-sec { padding: 30px 32px 32px; }
	.jt-sec > h2 { font-size: 26px; }
}

@media (max-width: 768px) {
	.jt-faq { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.jt { padding: 28px 12px 0; }
	.jt__body { font-size: 17px; }
	.jt-intro { padding: 28px 22px 26px; border-radius: 20px; }
	.jt-intro p:has(> strong:only-child) { font-size: 27px; }
	.jt-intro li { font-size: 14px; padding: 7px 12px 7px 10px; }
	.jt-sec { padding: 24px 20px 26px; border-radius: 16px; margin-bottom: 18px; }
	.jt-sec > h2 { gap: 12px; font-size: 22px; }
	.jt-sec > h2::before,
	.jt-sec > h2::after { flex-basis: 40px; width: 40px; height: 40px; }
	.jt-sec > h2::after { margin-top: -28px; }
	.jt-sec--faq > h2::after { margin-top: -20px; }
	.jt-sec--benefits ul { grid-template-columns: 1fr; }
	.jt-sec--faq { padding: 0; }
	.jt-qa { padding: 20px; }
	.jt__apply { margin-top: 28px; padding: 40px 12px 44px; }
}


/* ============================== RESOURCES — page 22 of 26 ============== */
/* Measured on https://bushidobilling.com/resources/ at 1440 / 992 / 375:

     title band     260      106      200       (the shared .title-band, 5th page)
     resources     1689.14  1731.16  2989.24
     document      2405     2290     3891

   The row is #ddf3e5 and 1200 wide. */

.res { padding: 20px; background: #ddf3e5; }
.res__inner { width: 100%; max-width: var(--wrap-1200); margin-inline: auto; }

/* flex column, so the three headings' margins do not collapse into each other
   or into the card rows. Eighth time on this build. */
.res__head { display: flex; flex-direction: column; }

.res__title {
	margin: 40px 20px 0;
	font-family: var(--font-head);
	font-size: 40px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: normal;
	text-align: center;
	text-transform: uppercase;
	color: var(--ink-soft);
}
/* The second one has no lead-in at all — the two read as one two-line title. */
.res__title--tight { margin-top: 0; }

/* Oswald FIVE HUNDRED, and capitalize rather than uppercase. The only 500 on
   the site, which is why inc/fonts.php asks this page for Oswald:500,700 and
   every other Oswald page for 700 alone. */
.res__sub {
	margin: 0 20px 60px;
	font-family: var(--font-head);
	font-size: 30px;
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: normal;
	text-align: center;
	text-transform: capitalize;
	color: var(--ink-soft);
}

/* ---- the six cards ---- */
/* Two rows of three. Each row equalises its own columns, which is why theirs
   come out 233.62 and 283.41 at 1440 rather than both taking the taller. */
.res__row { display: flex; align-items: stretch; }
.res__card { flex: 0 0 33.333%; min-width: 0; display: flex; }

/* The white box carries no padding — every child brings its own margins, and
   two of them are negative. flex column so those do not collapse. */
.res__card-inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	margin: 20px;
	background: #fff;
	border-radius: 15px;
}

/* THE BADGE HANGS OFF THE CORNER. -35 up and -38 left, so it sits outside the
   white box on two sides. Reproduced with the margins rather than absolute
   positioning, because it also has to push the heading down: the figure's 20px
   lead-out and the heading's -100 lead-in add up in a flex column, and that
   sum is what puts the title back over the artwork. */
.res__card-fig { margin: -35px 20px 20px -38px; text-align: left; line-height: 0; }
.res__card-img { display: inline; width: 150px; height: auto; }

.res__card-title {
	margin: -100px 20px 20px;
	font-family: var(--font-head);
	font-size: 30px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: normal;
	text-align: center;
	text-transform: none;
	color: var(--ink-soft);
}
.res__card-body { margin: 0 20px 20px; font-size: 18px; line-height: 1.1; text-align: center; }
.res__card-body p { margin: 0; }

/* ---- the rule with their mark in it ---- */
/* Their module is a three-cell table; this is the same thing in flex. The
   lines take whatever is left either side of a 100px picture. */
/* 40 above and 20 below — their module measures 160 for a 100px picture, and
   the 20 is the module's own lead-out. Left off, the audit block below started
   20px early. */
.res__sep { display: flex; align-items: center; margin: 40px 20px 20px; line-height: 0; }
.res__sep-line { flex: 1 1 auto; border-top: 1px solid var(--green); }
.res__sep-img { display: block; width: 100px; height: auto; margin: 0 10px; }
/* The form frame below is pulled up under this rule (-60px, -40px on phones)
   and ClickUp paints its own page background, which covered the lower part
   of the mark. Lift the rule above the frame; it takes no clicks, so the top
   of the form stays usable. Spacing is unchanged. */
.res__sep { position: relative; z-index: 1; pointer-events: none; }

/* ---- the audit block ---- */
.res__audit { display: flex; align-items: flex-start; }
.res__form, .res__pitch { flex: 0 0 50%; min-width: 0; }

/* -60px, and it is why the form sits ABOVE the row it is in — the column
   measures 129.5 at 1440 while the frame inside it measures 189.5. */
.res__frame { margin: -60px 20px 0; font-size: 20px; line-height: 29px; }
.res__frame iframe { width: 100%; }

.res__pitch { display: flex; flex-direction: column; }
.res__title--audit { margin: 40px 20px 0; }
.res__pitch-body { margin: 20px; font-size: 22px; line-height: 1.1; text-align: left; }
/* 10px between paragraphs and none after the last, the same rule the legal
   pages and join-team carry. Four paragraphs here — one of them the client's
   empty &nbsp; spacer — so it is 30px, and without it the block came out
   266.06 against their 296.15. */
.res__pitch-body p { margin: 0 0 10px; }
.res__pitch-body p:last-child { margin-bottom: 0; }

.res__reminder {
	margin: 20px 20px 0;
	font-family: var(--font-head);
	font-size: 36px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: normal;
	text-align: center;
	text-transform: none;
	color: var(--ink-soft);
}
.res__underline { text-decoration: underline; }

.res__cta { margin: 20px 20px 60px; text-align: center; line-height: 0; }
.res__cta-img { display: inline; width: 500px; max-width: 100%; height: auto; }


/* ============================== resources — tiers = */

@media (max-width: 992px) {
	/* The card heading drops to 26 here and comes back to 30 at 768 — a step
	   DOWN and then back UP, which is why this needs its own tier rather than
	   a single max-width rule. */
	.res__card-title { font-size: 26px; }

	/* The form's -60 pull goes entirely, and the pitch gains a bigger lead-in
	   to compensate. */
	.res__frame { margin: 0 20px; font-size: 18px; line-height: 26.1px; }
	.res__title--audit { margin-top: 60px; }
	.res__pitch-body { font-size: 18px; }
	.res__reminder { margin-top: 20px; line-height: 1; }
	.res__cta { margin-top: 20px; }
}

@media (max-width: 768px) {
	/* 8px gutters on the row, and the column inside it carries 20px of its own
	   — so the content box is inset 28 rather than 8. Measured, not assumed. */
	.res { padding: 20px 8px; }
	.res__inner { max-width: none; }
	/* The 20px belongs to the COLUMN that holds the headings and the cards, and
	   the audit block is not in it — their audit group is a direct child of the
	   row. Giving it the padding too made its form, its copy and its button 40
	   narrower than theirs, which cost a line in two places and changed where
	   the button clamped. */
	.res__head, .res__row { padding-inline: 20px; }

	/* Every heading on the page goes to 34 on a flat line, including the one
	   that was 30 and the one that was 36. */
	.res__title, .res__sub, .res__reminder { font-size: 34px; line-height: 1; }
	.res__title { margin: 20px 20px 40px; }
	.res__title--tight { margin-top: 0; }
	.res__sub { margin-bottom: 40px; }

	/* The cards stack, lose their side margins and gain a 60px gap below. */
	.res__row { display: block; }
	/* The card stays a flex box even though the ROW stops being one: the white
	   panel's 60px lead-out has to stay inside its column the way theirs does.
	   As a plain block it escapes and the last card of each row loses it. */
	.res__card-inner { margin: 0 0 60px; }

	/* AND THE SIXTH CARD DOES NOT HAVE ONE. Their layout file writes
	   `margin-bottom: 60px` at this breakpoint on five of the six card columns
	   and never on v4elz5udk6y3, the last. Beaver Builder clears that one to 0,
	   so the roster ends flush against the rule below it. Not a collapse and not
	   a mechanism — a per-node value the client set five times and stopped.
	   Worth 60px, and the only way to find it was to read all six nodes rather
	   than the first. */
	.res__card--flush .res__card-inner { margin-bottom: 0; }
	.res__card-title { margin-top: -80px; font-size: 30px; }
	.res__card-body { font-size: 16px; }

	/* Half-size mark, and the module's lead-in halves with it. */
	.res__sep { margin-top: 20px; }
	.res__sep-img { width: 50px; }

	.res__audit { display: block; }
	.res__frame { margin: -40px 20px 0; }
	.res__title--audit { margin: 0 20px 40px; }
	.res__pitch-body { margin: 0 20px 20px; }
	.res__reminder { margin: 40px 20px 60px; }
	/* The button pulls back UP here, where at 992 it pushed down. */
	.res__cta { margin: -40px 20px 20px; }
}


/* ================= BLOG AND ARTICLES — page 23, AND NOT A COPY ========= */
/* DELIBERATE DEPARTURE, on Gerek's instruction 2026-09-09: mirror
   itechvalet.com and peninsulacregroup.com for how the pages work and how the
   tiles look, rather than copying bushidobilling.com's blog.

   Everything else in this stylesheet carries measurements taken off the
   client's live site. THESE RULES DO NOT. They are taken off the other two
   iTech Valet builds and translated into Bushido's tokens:

                          iTech Valet        Peninsula       here
     grid                 3 x 406.66         3 x 432         3 x 1fr
     gap                  20                 20              20
     card radius          15                 12              15
     media band           221.8 (0.545)      243 (16:9)      16:9
     media placeholder    #cfe8fc            #e7eef1         #ddf3e5
     body padding         20                 24              20
     title                Bebas Neue 24/26   Lora 20/25      Oswald 24/26
     date                 Lexend 14          Karla 14        Montserrat 14
     excerpt              Lexend 16/24       Karla 16/24     Montserrat 16/24
     Read More            600 #a94f00        600 #4e6d7e     600 --green-deep

   NO COLOUR HERE IS NEW. #ddf3e5 is the resources row, #1a1a1a is the CTA
   band, --green-deep is the footer's link hover. A blog that introduced a
   palette would look like a different site. */

.art-index { padding: 60px 20px; }
.art-index__inner { width: 100%; max-width: var(--wrap-1200); margin-inline: auto; }
.art-index__empty { margin: 0; font-size: 20px; line-height: 29px; color: var(--ink-soft); }

.art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* The CARD is the article element and carries nothing; the LINK is the panel.
   That is their arrangement and it is what makes the whole tile clickable
   without nesting anything inside an anchor that cannot go there. */
.art-card { display: flex; }
.art-card__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	overflow: hidden;              /* so the media band takes the top radius */
	border-radius: 15px;
	background: var(--paper);
	box-shadow: 0 1px 3px rgba(32, 32, 32, .08), 0 8px 24px rgba(32, 32, 32, .06);
	text-decoration: none;
	color: inherit;
	transition: transform .15s ease, box-shadow .15s ease;
}
.art-card__link:hover,
.art-card__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 2px 6px rgba(32, 32, 32, .10), 0 14px 32px rgba(32, 32, 32, .10);
}
.art-card__link:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 3px; }

/* 16:9, from aspect-ratio rather than a padding hack, so a real thumbnail and
   an empty band are the same box.

   All 129 posts DO have a featured image — 1440x785, checked against the
   database after posts-manifest.json's empty image field suggested otherwise.
   The tint is the fallback for a post published without one; iTech Valet's own
   cards show it on 17 of 21. object-fit: cover because 1440x785 is 1.83:1 and
   the band is 1.78:1, so a hair is cropped rather than the picture letterboxed. */
.art-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: #ddf3e5;
}
.art-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* flex column with the date and excerpt free to grow, so the "Read More" sits
   on the bottom edge of every card in a row however long the titles are.
   Without it the rule sits wherever the text stops and the row looks ragged. */
.art-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px; }

.art-card__title {
	margin: 0;
	font-family: var(--font-head);
	font-size: 24px;
	line-height: 26px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink-soft);
}
.art-card__date {
	display: block;
	margin-top: 10px;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	color: var(--green-deep);
}
.art-card__excerpt {
	display: block;
	flex: 1 1 auto;
	margin-top: 12px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: var(--ink-soft);
}
.art-card__more {
	display: block;
	padding-top: 12px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
	color: var(--green-deep);
}
.art-card__link:hover .art-card__more { text-decoration: underline; }

/* ---- pagination ---- */
/* .art-pager, not .pagination — the `class` argument to the_posts_pagination
   REPLACES WordPress's default class rather than adding to it, so styling
   .pagination matched nothing and the thirteen page links rendered unstyled. */
.art-pager { margin-top: 40px; }
.art-index .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.art-index .page-numbers {
	display: block;
	min-width: 44px;
	padding: 10px 14px;
	border: 1px solid var(--rule);
	border-radius: 6px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 22px;
	text-align: center;
	text-decoration: none;
	color: var(--ink-soft);
}
.art-index a.page-numbers:hover,
.art-index a.page-numbers:focus-visible { border-color: var(--green); color: var(--green-deep); }
.art-index .page-numbers.current { background: var(--green); border-color: var(--green); color: #fff; }
.art-index .page-numbers.dots { border-color: transparent; }

/* ================= a single article ================= */

.art-hero { padding: 20px; background: #1a1a1a; }
.art-hero__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; }

.art-hero__title {
	margin: 40px 20px 0;
	font-family: var(--font-head);
	font-size: 70px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
}

/* The lede sits in a card rather than loose on the dark, which is the whole
   reason their hero reads as a summary and not a banner. */
.art-hero__card { margin-top: 40px; border-radius: 25px; background: #ddf3e5; }
.art-hero__lede {
	margin: 20px;
	padding: 20px 0;
	font-family: var(--font-body);
	font-size: 22px;
	line-height: 32px;
	font-weight: 400;
	color: var(--ink-soft);
}

.art-hero__meta {
	margin: 20px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 24px;
	color: #fff;
}
.art-hero__by::before { content: " · "; }

.art-body { padding: 60px 20px 80px; }
.art-body__inner { width: 100%; max-width: var(--wrap-1200); margin-inline: auto; }

/* ---- contents ---- */
.art-toc {
	margin: 0 0 60px;
	border-radius: 6px;
	background: #f4faf6;
	overflow: hidden;
}
.art-toc__title {
	margin: 0;
	padding: 16px 24px;
	background: var(--green);
	font-family: var(--font-head);
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
}
.art-toc__list, .art-toc__sub { margin: 0; padding: 0; list-style: none; }
.art-toc__list { padding: 20px 24px; }
.art-toc__sub { padding-left: 20px; }
.art-toc__list li { margin: 0 0 8px; }
.art-toc__sub li { margin: 6px 0 0; }
.art-toc a {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 26px;
	color: var(--green-deep);
	text-decoration: none;
}
.art-toc a:hover, .art-toc a:focus-visible { text-decoration: underline; }
.art-toc__sub a { font-size: 16px; line-height: 24px; }

/* A heading jumped to from the contents needs somewhere to land — without it
   the sticky-free header still puts the target flush against the top edge. */
.art-prose :where(h2, h3) { scroll-margin-top: 20px; }

/* ---- the article itself ---- */
.art-prose { font-family: var(--font-body); font-size: 20px; line-height: 32px; color: var(--ink-soft); }
.art-prose > :first-child { margin-top: 0; }
.art-prose p { margin: 0 0 20px; }
.art-prose h2 {
	margin: 48px 0 16px;
	font-family: var(--font-head);
	font-size: 40px;
	line-height: 1.2;
	font-weight: 700;
	text-transform: none;
	color: var(--ink-soft);
}
.art-prose h3 {
	margin: 36px 0 12px;
	font-family: var(--font-head);
	font-size: 28px;
	line-height: 1.2;
	font-weight: 700;
	text-transform: none;
	color: var(--ink-soft);
}
.art-prose ul, .art-prose ol { margin: 0 0 20px; padding-left: 24px; }
.art-prose li { margin: 0 0 8px; }
.art-prose a { color: var(--green-deep); }
.art-prose img { max-width: 100%; height: auto; }
.art-prose blockquote {
	margin: 0 0 20px;
	padding: 4px 0 4px 20px;
	border-left: 4px solid var(--green);
}
/* THE ONLY THING ON THE PAGE ALLOWED TO MOVE SIDEWAYS. These posts carry real
   comparison tables — four in one of them — and at 375 one measured 630.9px in
   a 359px column, taking the document's scrollWidth to 646 against a 375
   window. The table keeps table layout and scrolls inside its own box; see
   bushido_wrap_wide_blocks(). */
.art-scroll { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch; }
.art-scroll:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 2px; }
.art-prose table { width: 100%; border-collapse: collapse; margin: 0; }
.art-prose th, .art-prose td { padding: 10px 12px; border: 1px solid var(--rule); text-align: left; }
/* Below this the columns stop being readable and scrolling is the better
   answer than four words stacked in a 40px cell. */
@media (max-width: 768px) { .art-prose table { min-width: 560px; } }

.art-back { margin: 60px 0 0; }
.art-back a {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 600;
	color: var(--green-deep);
}


/* ============================== blog and articles — tiers = */

@media (min-width: 769px) and (max-width: 992px) {
	/* Two across rather than three: at 992 a third column leaves each title
	   about eighteen characters wide, which is where these headlines break
	   into five and six lines. */
	.art-grid { grid-template-columns: repeat(2, 1fr); }
	.art-hero__title { font-size: 55px; }
}

@media (max-width: 768px) {
	.art-index { padding: 40px 8px; }
	.art-grid { grid-template-columns: 1fr; }

	.art-hero { padding: 20px 8px; }
	.art-hero__title { margin: 20px; font-size: 38px; }
	.art-hero__card { margin-top: 20px; }
	.art-hero__lede { font-size: 18px; line-height: 28px; }

	.art-body { padding: 40px 8px 60px; }
	.art-toc { margin-bottom: 40px; }
	.art-toc__title { font-size: 24px; padding: 12px 20px; }
	.art-toc__list { padding: 16px 20px; }
	.art-toc a { font-size: 16px; line-height: 24px; }

	.art-prose { font-size: 18px; line-height: 29px; }
	.art-prose h2 { margin-top: 36px; font-size: 30px; }
	.art-prose h3 { margin-top: 28px; font-size: 24px; }
}


/* ===== THE PROMO PAGE — pt-modifiers (24) and blackfriday1 (25) ======== */
/* One title band, one bare ClickUp form on a pale green row, the footer. Two
   pages are exactly this and nothing else. Prefixed `promo` rather than `ptm`
   since 2026-09-09, when blackfriday1 turned out to be the same page.

   THE SHAREABILITY TEST, AND THIS IS THE CLEANEST YES ON THE BUILD. Their two
   generated layout files carry BYTE-IDENTICAL rule sets for all six nodes —
   both rows, both columns, the heading and the html module — and the pages
   were then measured live against each other rather than taken on that:

                          /pt-modifiers/        /blackfriday1/
     band row (incl m)    220 / 146 / 160       220 / 146 / 160
     band wrap            220 / 126 / 140       220 / 126 / 140
     band padding 1440    20 20 60              20 20 60
     band padding 375     20 10 0               20 10 0
     h1                   100/120, 55/66, 50/60  identical
     h1 margin            0/20/20, -40/20/20, 40/20/20   identical
     form wrap padding    20, 20, 20px 8px      20, 20, 20px 8px
     form content box     1200 / 952 / 359      1200 / 952 / 359
     frame margin         20                    20
     iframe               VENDOR                VENDOR

   Every box agrees at all three widths. Only the heading TEXT and the ClickUp
   id differ, which is data rather than layout — the /team/ shape of a yes.

   AND WHAT THIS PAGE'S OWN CONTENT DOES THAT THE COMPONENT HAD NOT MET:
   blackfriday1's heading is two words. At 375 "SPECIAL OFFER" renders 307.36px
   in the 315px box — 7.64px of slack, ONE line, and a second line would be
   worth 60px. It only fits because Oswald 700 actually loads there (this
   page's font request is `Montserrat:300,400|Oswald:700`, unlike /book-call/,
   which asks for no Oswald at all). Checked by measuring the string, not by
   asking document.fonts.check, which answers true for fonts that do not exist.

   NO DOCUMENT FIGURE IS QUOTABLE FOR EITHER PAGE. The form row is the only
   thing between the band and the footer, ClickUp resizes its own iframe, and
   there is no taller column beside it to govern the row — so the page height
   IS the vendor's height. It read 936 / 42 / 152 on blackfriday1 and
   182 on pt-modifiers at 375 in the same session.

   THE TITLE BAND IS NOT .title-band, AND IT IS CLOSE. Below 993 the heading
   rules are identical to the shared component's; the box around them is not:

                        shared        here
     1440 row margin    20            0
     1440 padding       20            20 top, 60 bottom
     1440 h1 margin     -20/20/100    0/20/20
     1440 height        260           220
     375 padding        40/10/20      20 top, 10 sides, 0 bottom

   Reusing the component would have been right on two tiers and 40px out on
   the third. Two pages that share their type and not their box. */

.promo-band {
	padding: 20px 20px 60px;
	background-image: var(--promo-band-bg);
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
}
/* flow-root, and it only matters at 375 — where this band's bottom padding
   goes to 0 and the heading's 20px lead-out would otherwise collapse straight
   out of the section. The DOCUMENT is unaffected either way, because the
   margin still separates the band from the row below; what changes is where
   the band's BACKGROUND stops. It measured 120 tall against their 140, so the
   artwork ended 20px early and the page was still within a pixel.
   Second time this exact fault has hidden behind a correct total, after the
   testimonials band. */
.promo-band__inner { display: flow-root; width: 100%; max-width: var(--wrap); margin-inline: auto; }

/* No pull at all here, where the shared band has -20 and a 100px lead-out.
   The 60px belongs to the ROW below the heading instead. */
.promo-band__title {
	margin: 0 20px 20px;
	font-family: var(--font-head);
	font-size: 100px;
	line-height: 120px;
	font-weight: 700;
	letter-spacing: normal;
	text-align: center;
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* The same pale green and the same 1200 the resources row uses — four
   declarations in common and nothing else, which is why they are written twice
   rather than shared. */
.promo-form { padding: 20px; background: #ddf3e5; }
/* flex column so the frame's 20px margins stay INSIDE this box the way their
   .fl-col-content keeps them. The row total is the same either way here — the
   section's own padding stops the margin escaping any further — but their
   content box measures 229.5 and a plain block measures 190, and a number that
   is right by accident is the thing this build keeps being caught by. */
.promo-form__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--wrap-1200);
	margin-inline: auto;
}

/* The iframe stays INLINE, the same decision every other embed on this site
   makes: their module measures 7.5px taller than the frame at 1440 and 6.6
   below 993, which is the descender space under an inline replaced element.
   The type is set for that line box and for no text — there is none. */
.promo-form__frame { margin: 20px; font-size: 20px; line-height: 29px; }
.promo-form__frame iframe { width: 100%; }


/* ============================== the promo page — tiers = */

@media (max-width: 992px) {
	/* The row gains the 20px pull the 1440 band does without, and the heading
	   takes the shared component's own 992 step. */
	.promo-band { margin-top: 20px; }
	.promo-band__title { margin: -40px 20px 20px; font-size: 55px; line-height: 66px; }
	.promo-form__frame { font-size: 18px; line-height: 26.1px; }
}

@media (max-width: 768px) {
	/* The 60px lead-out goes entirely and the gutters drop to 10 — where the
	   shared band takes 40px of top padding here, this one keeps 20. */
	.promo-band {
		padding: 20px 10px 0;
		background-image: var(--promo-band-bg-mobile);
		background-position: 0 0;
	}
	.promo-band__title { margin: 40px 20px 20px; font-size: 50px; line-height: 60px; }

	.promo-form { padding: 20px 8px; }
	.promo-form__inner { max-width: none; }
}


/* == /chiro/ — "dynamic chiropractic magazine ad", page 26 of 26 ========= */
/* A one-off landing page for a print ad in Dynamic Chiropractic. Seven
   content rows, all bespoke: no title band, no CTA band, and nothing on it
   shared with another page except the header and the footer. Prefixed
   `chiroad`, grepped against the whole stylesheet first (0 hits) — the `tstm`
   lesson.

   Measured on https://bushidobilling.com/chiro/ at 1440 / 992 / 375, images
   forced, fonts awaited, CSS backgrounds preloaded:

     row              1440       992       375
     header            98         98      148.08
     intro            474.44    430.38    506.05
     hero             540       232       262
     lead             100.40    118.41    144
     why              616.15    585.70   1300.49
     different        664.86    615.58    752.26
     results          496.21    488       428
     cta             1042.91    992.39   1208.38
     footer           357.66    354.75    553.87
     document        4390      3915      5303

   A SIXTH CONTAINER WIDTH. The "what makes us different" row is 1300, after
   1400, 1200, 1600, 1238 and 1695.99. It only binds above a 1340 viewport, so
   at 992 and 375 it is simply the viewport minus the gutters — which is
   exactly why it would have been easy to write 1400 and never see it.

   AND THE MOBILE GUTTER IS PER ROW, NOT PER PAGE. At 375 the nine rows use
   8, 20, 8, 8, 10, 20, 8, 20 and 8 — five different values, giving content
   boxes of 359, 335, 359, 359, 355, 335, 359, 335 and 359. Nothing about the
   page suggests it; they are simply what each row was authored with.

   THE COL-GROUPS ON THIS PAGE ARE `display: block` WITH FLOATED COLUMNS, not
   the flex containers the software band taught. Read, don't carry forward.
   What matters is the consequence, and it is reproduced with flex here: the
   columns are NOT stretched to the tallest (the five cards measure 238.15,
   296.15, 238.15, 267.15 and 267.15 inside a 296.15 group), and each column's
   content box IS a flex column, so module margins never collapse. */

.chiroad-intro { padding: 20px; }
.chiroad-intro__inner {
	display: flex;
	flex-direction: column;
	max-width: var(--wrap);
	margin-inline: auto;
}
.chiroad-intro__title {
	margin: 20px 20px 40px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 80px;
	line-height: 80px;
	/* THE THEME'S BASE HEADING RULE SETS `letter-spacing: .01em` ON EVERY
	   HEADING, and theirs is `normal`. At 20px that is 0.2px a character — 7px
	   across a 35-character line — and it is what pushed two of the five
	   "Proven Results" headings onto an extra line at 375, worth 54px. Every
	   heading on this page states it, including the ones where it happened not
	   to change a line count. */
	letter-spacing: normal;
	color: var(--green);
	text-align: center;
	text-transform: uppercase;
}
/* THE GREEN UNDERLINE BENEATH "SIMPLIFY", AND IT IS NOT A BORDER — it is a
   354x16 image in a photo module pulled 35px up into the heading above it and
   pushed off centre by a 170px RIGHT margin and none on the left. Both numbers
   are what put it under one word rather than under the line. */
.chiroad-intro__rule { margin: -35px 170px 20px 0; line-height: 0; text-align: center; }
.chiroad-intro__rule img { width: 300px; height: auto; }
.chiroad-intro__lead {
	margin: 0 20px 20px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 20px;
	line-height: 29px;
	color: var(--ink-soft);
	text-align: center;
}
.chiroad-intro__offer { margin: 0 20px; line-height: 0; text-align: center; }
.chiroad-intro__offer img { width: 530px; height: auto; }
.chiroad-intro__cta { margin: 0 20px; line-height: 0; text-align: center; }
.chiroad-intro__cta img { width: 500px; height: auto; }

/* `line-height: 0` on every figure on this page, which is what their photo
   module sets and what makes the figure exactly as tall as the image inside
   it. An inline image on a normal line box carries a baseline gap — 8.05px on
   the contact page's button, and it is the difference between reproducing a
   number and coinciding with it. */

.chiroad-hero {
	padding: 100px 20px;
	background-image: var(--chiroad-hero-bg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}
.chiroad-hero__inner { max-width: var(--wrap); margin-inline: auto; }
.chiroad-hero__group { display: flex; align-items: flex-start; }
.chiroad-hero__col { display: flex; flex-direction: column; width: 50%; }
.chiroad-hero__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 80px;
	line-height: 120px;
	letter-spacing: 2px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}
/* Mirrored margins, and they are what holds the two headings off the join in
   the middle of the photograph rather than any gap between the columns. */
.chiroad-hero__title--a { margin: 60px 100px 40px 20px; }
.chiroad-hero__title--b { margin: 60px 20px 40px 100px; }

.chiroad-lead {
	padding: 20px;
	background-image: var(--chiroad-lead-bg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}
.chiroad-lead__inner {
	display: flex;
	flex-direction: column;
	max-width: var(--wrap);
	margin-inline: auto;
}
/* An <h2> doing a caption's job: 17px Montserrat 600, and the ONLY heading on
   the page that is not Oswald. Its leading is 1.2 at 1440 and 992 and a flat
   1.0 at 375 — measured at each width rather than carried as a ratio, which is
   the fault weekly-update's list headings taught. */
.chiroad-lead__title {
	margin: 20px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 17px;
	line-height: 20.4px;
	letter-spacing: normal;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}

.chiroad-why { padding: 20px; margin-bottom: 60px; }
.chiroad-why__inner {
	display: flex;
	flex-direction: column;
	max-width: var(--wrap);
	margin-inline: auto;
}
.chiroad-why__head { display: flex; align-items: flex-start; }
.chiroad-why__headcol { display: flex; flex-direction: column; width: 50%; }
/* AN EMPTY COLUMN, AND IT IS WORTH A PIXEL. Their heading row is
   [heading, empty] — 50/50 at 1440, 75/25 at 992, and at 375 the empty one
   does NOT stack to full width: it stays 25% and centres itself. Beside a 220
   column it is nothing; at 375, where the pair stack, it is exactly 1px of the
   page. /team/'s last row taught this one: an empty .fl-col is 1px tall, and
   leaving it out is right at two widths and wrong at the third. */
.chiroad-why__spacer { width: 50%; min-height: 1px; }
.chiroad-why__title {
	margin: 60px 20px 40px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 60px;
	line-height: 60px;
	letter-spacing: normal;
	color: var(--green);
	text-align: left;
	text-transform: uppercase;
}
.chiroad-why__cards { display: flex; align-items: flex-start; }
.chiroad-why__card { display: flex; flex-direction: column; width: 20%; }
.chiroad-why__icon { margin: 20px 20px 0; line-height: 0; text-align: left; }
.chiroad-why__icon img { width: 150px; height: auto; }
.chiroad-why__copy {
	margin: 0 20px 20px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 20px;
	line-height: 29px;
	color: var(--ink-soft);
}

.chiroad-diff { padding: 20px 20px 60px; background: var(--wash); }
.chiroad-diff__inner {
	display: flex;
	align-items: flex-start;
	max-width: var(--wrap-1300);
	margin-inline: auto;
}
.chiroad-diff__col { display: flex; flex-direction: column; width: 50%; }
.chiroad-diff__title {
	margin: 60px 20px 40px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 60px;
	line-height: 60px;
	letter-spacing: normal;
	color: var(--green);
	text-align: left;
	text-transform: uppercase;
}
/* 200px of right margin on a 650px column, which is what makes this paragraph
   430 wide rather than 610 and gives it four lines instead of three. Asked of
   the module, not inferred from the column. */
.chiroad-diff__copy {
	margin: 0 200px 20px 20px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 20px;
	line-height: 29px;
	color: var(--ink-soft);
}
.chiroad-diff__copy p { margin: 0; }
.chiroad-diff__copy p:first-child { margin-bottom: 10px; }
.chiroad-diff__banner { margin: 20px; line-height: 0; text-align: left; }
.chiroad-diff__banner:first-child { margin-top: 60px; }
.chiroad-diff__banner img { width: 500px; height: auto; max-width: 100%; }

.chiroad-results { padding: 20px; margin-bottom: 60px; }
.chiroad-results__inner {
	display: flex;
	flex-direction: column;
	max-width: var(--wrap);
	margin-inline: auto;
}
.chiroad-results__title {
	margin: 60px 20px 40px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 60px;
	line-height: 60px;
	letter-spacing: normal;
	color: var(--green);
	text-align: center;
	text-transform: uppercase;
}
/* The list module is the ONE module on this page with no side margin of its
   own — it is the full column width and the 20px inset lives on its content
   box instead. */
.chiroad-results__list { display: flex; flex-direction: column; margin: 20px; }
.chiroad-results__item {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 20px;
	line-height: 29px;
}
/* THE LAST ITEM DIFFERS FROM THE FIRST FOUR, and nothing on the page shows it:
   their fifth row carries margin 0 where the others carry 10. Found by reading
   every node of the group rather than one representative, which is the habit
   the resources page's six cards forced. Worth 10px. */
.chiroad-results__item:last-child { margin-bottom: 0; }
/* THE ICON'S BOX IS 30px AND ITS ROW IS 31.24, AND THE 1.24 IS NOT A NUMBER TO
   WRITE DOWN. It is the line box of a block set in 20px/29px Montserrat around
   an inline-block on `vertical-align: middle`: half the x-height above the
   baseline, 15px of icon each side of that, against the strut's own descender.
   Build it and the 1.24 is produced — and at 992, where the type steps to
   18px/26.1, the same arrangement produces exactly 30.00, which is what their
   page measures. A hard height would have been right once. */
.chiroad-results__icobox { width: 30px; margin-right: 10px; }
.chiroad-results__ico {
	display: inline-block;
	vertical-align: middle;
	width: 30px;
	height: 30px;
	color: var(--green);
}
.chiroad-results__ico svg { display: block; width: 30px; height: 30px; }
.chiroad-results__text { flex: 1; }
.chiroad-results__text h3 {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 400;
	font-size: 24px;
	line-height: 28.8px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink-soft);
}

.chiroad-cta { padding: 60px 20px; background: #000; }
.chiroad-cta__inner {
	display: flex;
	flex-direction: column;
	max-width: var(--wrap);
	margin-inline: auto;
}
.chiroad-cta__quotes { display: flex; align-items: flex-start; }
.chiroad-cta__qcol { display: flex; flex-direction: column; width: 50%; }
/* The two review images hug the centre gutter rather than sitting in the
   middle of their halves: 500px pictures in 660px figures, one aligned right
   and one left. */
.chiroad-cta__quote { margin: 20px; line-height: 0; }
.chiroad-cta__quote--a { text-align: right; }
.chiroad-cta__quote--b { text-align: left; }
.chiroad-cta__quote img { width: 500px; height: auto; max-width: 100%; }
/* THE SAME WORDS AS THE INTRO HEADING AND NOT THE SAME COMPONENT: 50px against
   80, 60px leading against 80, and a 20px lead-in against the intro's 20 with
   a different lead-out below. Same sentence twice on one page, twice measured.
   The FAQ accordion taught the general form — identical words are not the
   test, identical geometry is. */
.chiroad-cta__title {
	margin: 20px 20px 40px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 50px;
	line-height: 60px;
	letter-spacing: normal;
	color: var(--green);
	text-align: center;
	text-transform: uppercase;
}
.chiroad-cta__line {
	margin: 0 20px 20px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 20px;
	line-height: 29px;
	color: #fff;
	text-align: center;
}
/* A STACK OF NEGATIVE MARGINS, AUTHORED PER TIER AND NOT DERIVED. The seal
   overlaps the line above it by 100 and the line below overlaps the seal by
   another 100 — which is what makes the sentence read across the picture. At
   375 the same three become -50, -30 and 0. Nothing here is a ratio. */
.chiroad-cta__seal { margin: -100px 20px 20px; line-height: 0; text-align: center; }
.chiroad-cta__seal img { width: 440px; height: auto; max-width: 100%; }
.chiroad-cta__line--after { margin: -100px 20px 0; }
.chiroad-cta__btngroup { display: flex; }
.chiroad-cta__btncol { width: 100%; }
/* +80 ON THE COLUMN'S CONTENT AND -60 ON THE MODULE INSIDE IT, and they are
   not one +20. Put both on a single element and the column measures 89.55
   where theirs measures 169.55 — the row total is the same at 1440 and the
   two numbers part company at 375, where the 80 goes to 0 and the -60 becomes
   +20. A margin belongs to the box it was authored on; the column is a flex
   item, which is what stops the 80 collapsing out of it. */
.chiroad-cta__btnbox { display: flex; flex-direction: column; margin-top: 80px; }
.chiroad-cta__btn { margin: -60px 20px 20px; line-height: 0; text-align: center; }
.chiroad-cta__btn img { width: 500px; height: auto; max-width: 100%; }


/* ============================== /chiro/ — 769-992 = */
/* Bounded at BOTH ends. Written `max-width: 992px` it would also reach 375 and
   every rule the mobile block does not happen to override would land there. */

@media (min-width: 769px) and (max-width: 992px) {
	.chiroad-intro { padding: 20px 20px 40px; }
	.chiroad-intro__title { font-size: 46px; line-height: 55.2px; }
	.chiroad-intro__rule { margin: -40px 100px 20px 0; }
	.chiroad-intro__rule img { width: 180px; }
	.chiroad-intro__lead { font-size: 16px; line-height: 26.1px; }
	.chiroad-intro__cta img { width: 400px; }

	.chiroad-hero { padding: 0 20px; }
	.chiroad-hero__title { font-size: 44px; line-height: 66px; }
	.chiroad-hero__title--a,
	.chiroad-hero__title--b { margin: 60px 0 40px; }

	.chiroad-lead__title { font-size: 16px; line-height: 19.2px; }

	/* 75/25 here where 1440 is 50/50 — the heading needs the room once the
	   type has only stepped from 60 to 58 and the row has lost 448px. */
	.chiroad-why__headcol { width: 75%; }
	.chiroad-why__spacer  { width: 25%; }
	.chiroad-why__title { font-size: 58px; line-height: 58px; }
	.chiroad-why__copy { font-size: 14px; line-height: 22.4px; }

	.chiroad-diff__title { font-size: 58px; line-height: 58px; }
	.chiroad-diff__copy { margin: 0 40px 20px 20px; font-size: 20px; line-height: 26.1px; }
	.chiroad-diff__banner img { width: 100%; }

	.chiroad-results__title { font-size: 58px; line-height: 58px; }
	.chiroad-results__item { font-size: 18px; line-height: 26.1px; }

	.chiroad-cta__quote img { width: 100%; }
	.chiroad-cta__title { font-size: 40px; line-height: 48px; }
	.chiroad-cta__line { font-size: 18px; line-height: 26.1px; }
}


/* ============================== /chiro/ — mobile = */

@media (max-width: 768px) {
	/* Beaver Builder clears ROW margins at its own mobile breakpoint from a
	   stylesheet the per-page layout file does not contain. Both 60px row
	   margins on this page compute to 0 at 375 — the sixth and seventh time
	   this build has met it, after the software band's -10, weekly-update's
	   column +20, the FAQ row's -40, contact's -5 and testimonials' +20. */
	.chiroad-why,
	.chiroad-results { margin-bottom: 0; }

	.chiroad-intro { padding: 20px 20px 40px; }
	/* No vertical margin at all on the heading here, where every other tier
	   has 20 above and 40 below. */
	.chiroad-intro__title { margin: 0 20px; font-size: 40px; line-height: 52px; }
	/* The underline is HIDDEN below 769 — it is a 354px graphic sized for one
	   word of a 100px line, and there is no line for it to sit under once the
	   heading takes three. */
	.chiroad-intro__rule { display: none; }
	.chiroad-intro__lead { margin: 40px 0 30px; font-size: 18px; line-height: 26.1px; }
	.chiroad-intro__offer img,
	.chiroad-intro__cta img { width: 100%; }

	.chiroad-hero { padding: 0 8px; }
	.chiroad-hero__group { display: block; }
	.chiroad-hero__col { width: 100%; }
	.chiroad-hero__title { font-size: 36px; line-height: 54px; }
	.chiroad-hero__title--a { margin: 40px 0 0; }
	.chiroad-hero__title--b { margin: 20px 0 40px; }

	.chiroad-lead { padding: 20px 8px; }
	/* 1.0 leading, where 1440 and 992 are both 1.2. */
	.chiroad-lead__title { font-size: 16px; line-height: 16px; }

	.chiroad-why { padding: 20px 10px; }
	.chiroad-why__head { display: block; }
	.chiroad-why__headcol { width: 100%; }
	/* Still 25% and centred rather than stacking to full width — and still
	   1px tall, which is the whole of its contribution to the page. */
	.chiroad-why__spacer { width: 25%; margin-inline: auto; }
	.chiroad-why__title { margin: 20px; font-size: 38px; line-height: 38px; text-align: center; }
	.chiroad-why__cards { display: block; }
	.chiroad-why__card { width: 100%; }
	/* The icon keeps its 20px side margin and CENTRES; the copy below it loses
	   its side margin entirely and runs the full 355. Two boxes in one card
	   with different insets — ask which box a padding is on. */
	.chiroad-why__icon { text-align: center; }
	.chiroad-why__copy { margin: 0 0 20px; font-size: 16px; line-height: 25.6px; text-align: center; }

	.chiroad-diff__inner { display: block; }
	.chiroad-diff__col { width: 100%; }
	.chiroad-diff__title { margin: 20px; font-size: 40px; line-height: 40px; text-align: center; }
	.chiroad-diff__copy { margin: 0 0 20px; font-size: 18px; line-height: 26.1px; text-align: center; }
	/* The 60px lead-in on the first banner goes with the columns. */
	.chiroad-diff__banner,
	.chiroad-diff__banner:first-child { margin: 20px 0; }
	.chiroad-diff__banner img { width: 100%; }

	.chiroad-results { padding: 20px 8px; }
	.chiroad-results__title { margin: 20px; font-size: 40px; line-height: 40px; }
	.chiroad-results__item { font-size: 18px; line-height: 26.1px; }
	.chiroad-results__text h3 { font-size: 20px; line-height: 28px; }

	.chiroad-cta__quotes { display: block; }
	.chiroad-cta__qcol { width: 100%; }
	.chiroad-cta__quote { margin: 20px 0; }
	.chiroad-cta__quote img { width: 100%; }
	.chiroad-cta__title { margin: 60px 20px 20px; font-size: 40px; line-height: 40px; }
	.chiroad-cta__line { font-size: 18px; line-height: 26.1px; }
	.chiroad-cta__seal { margin: -50px 20px 0; }
	.chiroad-cta__seal img { width: 100%; }
	.chiroad-cta__line--after { margin: -30px 20px 0; }
	.chiroad-cta__btnbox { margin-top: 0; }
	.chiroad-cta__btn { margin: 20px 0; }
	.chiroad-cta__btn img { width: 100%; }
}

/* ======================================= small tablets: 601-768, and nav - */
/*
 * A DELIBERATE DEPARTURE FROM THE ORIGINAL, at Gerek's request (2026-09-16).
 *
 * An iPad mini in portrait is 744 wide, so it falls in the <=768 tier and got
 * the phone header: the logo alone on a line, then Book a Call and the burger
 * under it. On a tablet screen that reads as out of balance. Between 601 and
 * 768 the header is one line instead, laid out exactly as the 769-992 tier:
 * logo left, Book a Call, burger right, spaced by space-between.
 *
 * It sits at the END of the file on purpose — it has to beat the <=768 header
 * rules and the hero-header rules, which are the same specificity.
 */
@media (min-width: 601px) and (max-width: 768px) {
	.site-header__inner {
		flex-wrap: nowrap;
		justify-content: space-between;
		row-gap: 0;
		min-height: 0;
	}

	.site-header__logo { flex: 0 0 auto; margin: 0 20px; text-align: left; }
	.site-header__logo-img { margin: 0; }

	.site-header__cta { margin: 0 20px; }
	.nav-toggle { margin: 0 20px 0 0; }

	/* The hero pages pull up by the header's height, which is now one line:
	   20 top padding + the 69.31 / 69.06 button. */
	.bushido-hero-services      { --hdr-h: 89.31px; }
	.bushido-hero-weekly-update { --hdr-h: 89.06px; }
}

/* The opened menu on tablets. The desktop step leaves the links at 14px (12 on
   the hero pages), which is too small on a tablet held in the hand. 20px is
   Gerek's call — 24 was too big for the nav. Submenu items step down to 18. */
@media (min-width: 601px) and (max-width: 992px) {
	.site-nav__list a,
	.bushido-hero-header .site-nav__list a { font-size: 20px; line-height: 24px; }
	.site-nav__list .sub-menu a,
	.bushido-hero-header .site-nav__list .sub-menu a { font-size: 18px; line-height: 22px; }

	/* The panel's links start where the logo does, not at the screen edge. */
	.site-nav { padding-inline: 40px; }
}
@media (min-width: 601px) and (max-width: 768px) {
	.site-nav { padding-inline: 28px; }
}

/* ============================ small tablets: testimonials and software - */
/*
 * DELIBERATE DEPARTURES, at Gerek's request (2026-09-16), checked on an iPad
 * mini (744). Between 601 and 768 these two sections were getting the phone
 * layout: one 300px phone card at a time down the middle of a wide screen, a
 * squeezed banner, and the software logos stacked in a single column under a
 * heading that had fallen out of its green shape. They now take the 769-992
 * layout instead, which is the one that already works at 820.
 */
@media (min-width: 601px) and (max-width: 768px) {
	/* -- testimonials: three across, as at 769-992 -- */
	.tstm__banner { margin: 0 0 30px; }
	.tstm__banner-img { width: 500px; max-width: 100%; height: auto; }
	.tstm__banner-img--desktop { display: inline-block; }
	.tstm__banner-img--mobile { display: none; }
	.tstm__cards { display: flex; }
	.tstm__card { flex: 0 0 33.333%; max-width: 33.333%; }
	.tstm__card-img { width: calc(100% - 40px); height: auto; margin: 20px; }
	.tstm__wide { margin: 20px; }
	.tstm__wide-img--mobile { width: 100%; height: auto; margin: 0; }

	/* -- software: back to rows, heading inside the green stroke -- */
	.sw__head-inner { min-height: 110px; }
	.sw__title--desktop { display: block; }
	.sw__title--mobile { display: none; }

	.sw__four, .sw__three { display: flex; }
	.sw__four .sw__cell { flex: 0 0 25%; max-width: 25%; }
	.sw__three .sw__cell { flex: 0 0 33.33%; max-width: 33.33%; }
	.sw__three .sw__cell:last-child { flex-basis: 33.34%; max-width: 33.34%; }
	.sw__cell--center { text-align: center; }
	.sw__cell--right  { text-align: right; }
	.sw__cell--left   { text-align: left; }

	.sw__logo { margin: 20px; }
	.sw__four .sw__logo,
	.sw__logo--w400 { width: calc(100% - 40px); }
	.sw__logo--w250 { width: 250px; }
	.sw__logo--w130 { width: 130px; }
	.sw__logo { max-width: calc(100% - 40px); }

	.sw__foot { min-height: 110px; }
	.sw__cta--desktop { display: block; }
	.sw__cta--mobile { display: none; }
}

/* Both tablet tiers, 601-992: balance the software section. The heading steps
   up from 36 to 44 so it fills the green stroke; the intro runs full width
   instead of in the desktop's middle 52%; and the Book a Call button (320) is sized
   to sit inside the dark stroke rather than lost in it (300) or overwhelming
   the page (the phone's full width). */
@media (min-width: 601px) and (max-width: 992px) {
	.sw__title--desktop { margin: 36px 20px 20px; font-size: 44px; }

	.sw__intro-row { display: block; }
	.sw__side { display: none; }
	.sw__intro-col { max-width: none; }
	.sw__intro {
		max-width: 640px;
		margin: 20px auto 0;
		padding: 0 20px;
		font-size: 20px;
		line-height: 1.35;
	}

	.sw__cta { margin: 60px 20px 15px; }
	.sw__cta-img { width: 320px; max-width: 100%; }
}

/* ================================ team pages: breathing room, tablet/phone - */
/* Gerek, 2026-09-16. On phones and small tablets the team pages' title sat
   directly on the header (0px), where every other page's title has 40-100px,
   and at 744 the gold icon landed on the top edge of the green band: that band
   is part of the background image, and at tablet width the image scales taller.
   20px above the title everywhere under 769, plus more above the icon on small
   tablets so it sits inside the green. The corner triangle no longer touches
   the header, which Gerek has okayed. */
@media (max-width: 768px) {
	.team-hero { padding-top: 20px; }
}
@media (min-width: 601px) and (max-width: 768px) {
	.team-hero .team-hero__icon { margin-top: 44px; }
}

/* ========================= page titles: breathing room on larger tablets - */
/* Gerek, 2026-09-16. Between 769 and 992 the page titles that sit on the green
   corner band were flush against the header (0px) — the title-band pages
   (FAQs, Blog, Join the Team, Privacy, Terms, Resources), Testimonials and the
   two promo pages — and the team pages' title was pulled 20px UNDER it by the
   original's -40 margin. 20px of clear space on all of them. Desktop is
   untouched.

   MARGIN on the band, not padding inside it. The title's white area is part
   of each band's background artwork, so padding pushed the title down onto
   the green edge; a margin moves the artwork and the title together. */
@media (min-width: 769px) and (max-width: 992px) {
	.title-band { margin-top: 40px; }        /* its own 20, plus 20 */
	.reviews-hero,
	.promo-band { margin-top: 40px; }       /* their own 20 at this width, plus 20 */
	.team-hero { margin-top: 40px; }         /* the title is pulled up 20 under the header */
}

/* The popups' close glyph is drawn here rather than typed as "×" in the button,
   so the pages gain no text a crawler can read. The button's aria-label says
   "Close". */
.bio-modal__close::before,
.reviews__modal-close::before { content: "\00D7"; }

/* Services, phones and small tablets: every service one even step apart.
   With the switch gone the original's per-row padding showed as alternating
   50/70px gaps between services in a single column; the rows now stack flush
   and each service is followed by the same 40px. */
@media (max-width: 768px) {
	.svc-row { padding-top: 0; padding-bottom: 0; }
	.svc-row--first { padding-top: 20px; }
	.svc-row--first .svc-block__fig { margin: 0 0 20px; }
	.svc-more-wrap { margin-bottom: 40px; }
}

/* Services, tablet and phone: a short divider after each service (Gerek,
   2026-09-16), 75% wide and centred, so the stacked blocks read as separate
   items. Never after the last service in a list. Pale grey on the white
   section, faint white on the dark As Needed band. */
@media (max-width: 992px) {
	.svc-block::after {
		content: "";
		display: block;
		align-self: center;
		width: 75%;
		height: 1px;
		margin: 0 0 30px;
		background: #dcdcdc;
	}
	.svc-asneeded .svc-block::after { background: rgba(255, 255, 255, .22); }
	.svc-more-wrap { margin-bottom: 30px; }
}
/* Two columns: the last ROW of each list goes without. */
@media (min-width: 769px) and (max-width: 992px) {
	.svc-row--last .svc-block::after,
	.svc-asneeded__grid .svc-block:nth-last-child(-n+2)::after { display: none; }
}
/* One column: only the very last block of each list. */
@media (max-width: 768px) {
	.svc-row--last .svc-block:last-child::after,
	.svc-asneeded__grid .svc-block:last-child::after { display: none; }
	.svc-more-wrap { margin-bottom: 30px; }
}

/* ============================ weekly update: tablets (Gerek, 2026-09-16) - */
/*
 * On an iPad mini (744) the page was using the phone layout:
 *   - "It Includes:" was centred with a -80px pull and sat across the edge of
 *     its pale-green brush shape, cutting the word;
 *   - "No more waking up stressing / about unpaid claims." used the phone
 *     artwork, where each sentence is split over two equally spaced lines, so
 *     the four lines read as four separate statements;
 *   - the list icons were a small 30px;
 *   - and the hand-drawn oval, positioned by fixed offsets, floated clear of the
 *     "impressive 133%" it circles on desktop.
 */

/* The oval, anchored to the words it circles rather than to a column offset,
   so it lands on them however the paragraph wraps. The wrapper is a span
   around existing words; no text was added. Desktop keeps its own figure. */
.wu-stat__ring { position: relative; white-space: nowrap; }
@media (max-width: 992px) {
	.wu-stat__badge-row { display: none; }
	.wu-stat__ring::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 118%;
		height: 150%;
		transform: translate(-50%, -52%);
		background: var(--wu-ring) no-repeat center / 100% 100%;
		pointer-events: none;
	}
	.wu-stat { padding-bottom: 20px; }
	/* The paragraph's leading was 1.0 below 993, so wrapped lines touched and
	   the oval could not sit between them. 1.4 reads better and gives it room. */
	.wu-stat__text p { line-height: 1.4; }
	.wu-stat__text p + p { margin-top: 12px; }
}

@media (min-width: 601px) and (max-width: 768px) {
	/* It Includes: on the pale shape, not across its edge. */
	.wu-includes { background-position: left top; }
	.wu-includes__title { margin: 50px 20px 50px 20px; text-align: left; font-size: 44px; }

	/* Bigger bullets and a touch more type for a tablet held in the hand. */
	.wu-list__item { margin-bottom: 16px; }
	.wu-list__icon { flex-basis: 42px; margin-right: 16px; }
	.wu-list__icon-img { width: 42px; }
	.wu-list__text { font-size: 23px; line-height: 1.35; }

	/* The report's artwork: the desktop versions, as tablets from 769 up
	   already use — one line per sentence. */
	.wu-report__fig--desktop { display: block; }
	.wu-report__fig--mobile  { display: none; }
	.wu-report__fig { margin: 20px; }
	.wu-report__fig--tight { margin-top: 10px; }
	.wu-report__fig--last  { margin: 0 20px 40px; }
	.wu-report__fig--gap40 { margin-top: 40px; }
}

/* ============================ weekly update: phones (Gerek, 2026-09-16) - */
/* The same problems the iPad mini had, at phone size, plus the ask band. The
   oval is handled in the <=992 block above. */
@media (max-width: 600px) {
	/* It Includes: left, on its pale shape, no -80px pull off the edge. */
	.wu-includes { background-position: left top; }
	.wu-includes__title { margin: 44px 20px 36px; text-align: left; }

	/* Bigger bullets. */
	.wu-list__item { margin-bottom: 14px; }
	.wu-list__icon { flex-basis: 36px; margin-right: 12px; }
	.wu-list__icon-img { width: 36px; }

	/* "No more waking up stressing / about unpaid claims." and "No more
	   sleepless nights / worrying about making payroll." are two phone
	   images, each one sentence over two lines. Evenly spaced they read as
	   four statements; a clear gap between the images makes them two. */
	.wu-report__fig--mobile.wu-report__fig--flush + .wu-report__fig--mobile.wu-report__fig--flush { margin-top: 30px; }
}

/* The ask band, phones and small tablets. Its background is a 2560x671
   panorama with the green bar and the spotlit BB logo painted in. Stretched
   to cover a tall mobile band it was cropped to the left third: the bar ran
   through the first line of text, the logo was cut off at the edge, and the
   green "WE'LL BE HAPPY TO SHARE EXAMPLES." sat on the busy skyline. The whole
   panorama now shows as a strip across the top, and the words sit below it on
   the band's solid dark. */
@media (max-width: 768px) {
	.wu-ask--mobile {
		padding: calc(26.21vw + 10px) 0 36px;
		background-color: #232323;
		background-size: 100% auto;
		background-position: center top;
	}
	.wu-ask--mobile .wu-ask__line--a { margin: 20px 20px 0; font-size: 20px; line-height: 1.25; }
	.wu-ask--mobile .wu-ask__line--b { margin: 18px 20px 0; font-size: 20px; }
	.wu-ask--mobile .wu-ask__note { margin: 18px 20px 0; font-size: 18px; line-height: 1.3; text-align: center; }
}


/* ===================== weekly update: the "It Includes" shape, tablet/phone - */
/*
 * On desktop the pale-green header shape comes from the section's background
 * artwork and shows its 45-degree diagonal on the right. That artwork is a
 * 2560x505 strip whose pale shape is roughly ten times wider than it is tall;
 * scaled to cover the taller mobile section the diagonal falls off-screen and
 * only a flat band is left. Below 769 the shape is drawn in CSS instead, in
 * the artwork's own colours (#ccf2dc on #67c28d, the #60a078 shadow line and
 * the transparent notch top-right), sized to the heading at any width.
 * Gerek, 2026-09-16.
 */
@media (max-width: 768px) {
	.wu-includes {
		background-image: linear-gradient(#67c28d, #67c28d);
		background-size: 100% calc(100% - 34px);
		background-position: left bottom;
		background-color: transparent;
	}
	.wu-includes__head { position: relative; display: flow-root; }
	.wu-includes__head::before,
	.wu-includes__head::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: -20px;                         /* out to the viewport edge */
		width: min(calc(82% + 20px), 520px);
		-webkit-clip-path: polygon(0 0, 100% 0, calc(100% - var(--wu-slant, 84px)) 100%, 0 100%);
		clip-path: polygon(0 0, 100% 0, calc(100% - var(--wu-slant, 84px)) 100%, 0 100%);
	}
	/* The shadow: the same shape, 4px lower, in the artwork's shadow green. */
	.wu-includes__head::after { background: #60a078; transform: translateY(4px); z-index: 0; }
	.wu-includes__head::before { background: #ccf2dc; z-index: 1; }
	.wu-includes__title { position: relative; z-index: 2; }
}
@media (max-width: 600px) {
	.wu-includes__head::before,
	.wu-includes__head::after { width: calc(88% + 20px); --wu-slant: 64px; }
}

/* ======================================== blog: category sections (2026-09-16) */
/* Categories first, All Articles last - see inc/blog.php. */
.art-sec { margin: 0 0 80px; }
.art-sec:last-child { margin-bottom: 0; }
.art-sec__head { margin: 0 0 28px; }
.art-sec__title {
	margin: 0 0 8px;
	font-family: var(--font-head);
	font-size: 40px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: #2f7a52;
}
.art-sec__title a { color: inherit; text-decoration: none; }
.art-sec__title a:hover,
.art-sec__title a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.art-sec__lead { max-width: 780px; margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
/* A short green rule under each head, so the sections read as separate. */
.art-sec__head::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 16px; background: var(--green); border-radius: 2px; }
/* ALTERNATING BANDS (Gerek, 2026-09-16): each section runs edge to edge,
   white / pale green in turn, so the categories read as separate blocks rather
   than white tiles on a white page. Tiles are white on the green bands and a
   light grey on the white ones. The band escapes the 1200 column with negative
   margins; .art-index clips the overflow so no horizontal scrollbar appears. */
.art-index:not(.art-index--cat) { padding: 0 20px; overflow-x: clip; }
.art-index:not(.art-index--cat) .art-sec {
	margin: 0 calc(50% - 50vw);
	padding: 72px calc(50vw - 50%);
	background: #fff;
}
.art-index:not(.art-index--cat) .art-sec:nth-of-type(even) { background: #eef7f1; }
.art-index:not(.art-index--cat) .art-sec:nth-of-type(odd) .art-card__link {
	background: #f4f6f5;
	box-shadow: 0 1px 2px rgba(32, 32, 32, .05);
}
.art-index:not(.art-index--cat) .art-sec:nth-of-type(odd) .art-card__link:hover,
.art-index:not(.art-index--cat) .art-sec:nth-of-type(odd) .art-card__link:focus-visible {
	background: #fff;
	box-shadow: 0 2px 6px rgba(32, 32, 32, .10), 0 14px 32px rgba(32, 32, 32, .10);
}
.art-index:not(.art-index--cat) .art-index__empty { padding: 60px 0; }

/* A category page is one pale green band with white tiles. */
.art-index--cat { background: #eef7f1; }

.art-sec__more { margin: 32px 0 0; text-align: center; }
.art-btn {
	display: inline-block;
	padding: 13px 28px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	color: #fff;
	background: var(--green-deep);
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .15s ease, transform .15s ease;
}
.art-btn:hover,
.art-btn:focus-visible { color: #fff; background: #2f7a52; transform: translateY(-1px); }

.art-index--cat .art-sec__head--cat { margin-bottom: 36px; }
.art-sec__head--cat::after { content: none; }
.art-back { margin: 14px 0 0; font-size: 16px; font-weight: 700; }
.art-back a { color: var(--green-deep); text-decoration: none; }
.art-back a:hover, .art-back a:focus-visible { text-decoration: underline; }

@media (max-width: 992px) {
	.art-index:not(.art-index--cat) .art-sec { padding-top: 56px; padding-bottom: 56px; }
	.art-sec__title { font-size: 34px; }
}
@media (max-width: 600px) {
	.art-index:not(.art-index--cat) { padding: 0 8px; }
	.art-index:not(.art-index--cat) .art-sec { padding-top: 44px; padding-bottom: 44px; }
	.art-sec__title { font-size: 28px; }
	.art-sec__lead { font-size: 16px; }
	.art-btn { padding: 12px 22px; font-size: 15px; white-space: normal; }
}

/* ============================== ClickUp forms — height floor = */
/* ClickUp's `clickup-dynamic-height` script sets the iframe height after the
   form loads, and it does not always land: on some loads it wrote 2px or
   152px and the form collapsed to a sliver. These floors are each form's own
   measured height plus ~15px, so the form is always usable; when the script
   does its job and asks for more, min-height lets it. Phone values are taller
   because the fields wrap in the narrower frame. */
iframe.clickup-embed[data-form] { min-height: var(--cu-h, 600px); }
iframe[data-form="insurance-verification"]     { --cu-h: 590px; }
iframe[data-form="free-resources"]             { --cu-h: 660px; }
iframe[data-form="internal-client-audit-form"] { --cu-h: 660px; }
iframe[data-form="contact"]                    { --cu-h: 1160px; }
iframe[data-form="resources"]                  { --cu-h: 840px; }
iframe[data-form="pt-modifiers"]               { --cu-h: 600px; }
iframe[data-form="blackfriday1"]               { --cu-h: 880px; }

@media (max-width: 600px) {
	iframe[data-form="insurance-verification"]     { --cu-h: 630px; }
	iframe[data-form="free-resources"]             { --cu-h: 680px; }
	iframe[data-form="internal-client-audit-form"] { --cu-h: 705px; }
	iframe[data-form="contact"]                    { --cu-h: 1230px; }
	iframe[data-form="resources"]                  { --cu-h: 860px; }
	iframe[data-form="pt-modifiers"]               { --cu-h: 620px; }
	iframe[data-form="blackfriday1"]               { --cu-h: 900px; }
}

/* ============================== articles — the tool's own markup = */
/* The hero card now carries the article's OWN answer, which is several
   paragraphs rather than one trimmed line. Same card, same type as the lede
   it replaces; the paragraphs just need their own rhythm inside it. */
.art-hero__card--answer {
	padding: 20px;
	font-family: var(--font-body);
	font-size: 22px;
	line-height: 32px;
	color: var(--ink-soft);
}
.art-hero__card--answer > :first-child { margin-top: 0; }
.art-hero__card--answer > :last-child { margin-bottom: 0; }
.art-hero__card--answer p { margin: 0 0 16px; }
.art-hero__card--answer a { color: var(--green-deep); }

/* Links in the body are green and NOT underlined — Gerek, 2026-09-22. The
   articles used to set this themselves; their <style> blocks are stripped
   now, so it is stated here for every post. underline:none must also beat
   any inline styling the tool leaves on an individual link. */
.art-prose a,
.art-prose a:visited { color: var(--green-deep); text-decoration: none; }
.art-prose a:hover,
.art-prose a:focus-visible { color: #2f7a52; text-decoration: none; }

@media (max-width: 992px) {
	.art-hero__card--answer { font-size: 18px; line-height: 28px; }
}