/**
 * Global layer — design tokens, reset, shared typography, shared buttons, container.
 *
 * Values come from the Figma design (canvas 1920, content box x=240 w=1440).
 * Vanilla CSS: no preprocessor, no build step. Desktop-first media queries at
 * 1600 / 1440 / 1360 / 1200 / 999 / 767 / 640 / 479.
 *
 * @package lawncareknox
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	/* --- Colours (semantic names; every value verified against the design) --- */
	--color-white: #ffffff;
	--color-black: #000000;
	--color-text: #2b2b2b;
	--color-text-muted: #6e6e6e;
	--color-text-light: #878787;
	--color-primary: #7c9a74;
	--color-secondary: #2f5d3a;
	--color-accent: #97af90;
	--color-bg-dark: #26492d;
	--color-bg-light: #effff5;
	--color-border: #8c8c8c;
	--color-border-light: #c3c3c3;

	/* --- Derived translucent values (measured off the design) --- */
	--color-hairline: rgba(43, 43, 43, 0.2);          /* area-list rules on light bg */
	--line-on-dark: rgba(255, 255, 255, 0.16);        /* rules + numbers on dark bg */
	--text-on-dark: rgba(255, 255, 255, 0.8);         /* body copy on dark bg */
	--text-on-dark-muted: rgba(255, 255, 255, 0.64);  /* footer links + copyright */
	--btn-icon-tint: rgba(0, 0, 0, 0.12);             /* button icon panel */

	/* --- Typography --- */
	--font-primary: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* --- Spacing scale (Figma only — do not add values) --- */
	--sp-4: 4px;
	--sp-8: 8px;
	--sp-10: 10px;
	--sp-16: 16px;
	--sp-24: 24px;
	--sp-32: 32px;
	--sp-40: 40px;
	--sp-48: 48px;
	--sp-64: 64px;
	--sp-80: 80px;
	--sp-150: 150px;
	--sp-240: 240px;
	--sp-650: 650px;

	/* --- Layout --- */
	--container-max: 1470px;
	--container-gutter: 15px;
	--radius: 8px;
	--transition: all 0.3s ease;

	/* --- Button scale ---
	 *
	 * Lifted out of the rules below so there is ONE definition of what a button on
	 * this site measures. The homepage builds its buttons from a composition —
	 * `.btn` frames, `.btn__body` pads, `.btn__text` types — but the inner pages
	 * (blog read-more, 404, search submits, attorney links) are single <a> and
	 * <input> elements that have to play all three roles at once. They read these
	 * tokens rather than repeating the numbers, so the two button systems cannot
	 * drift apart, and changing a button anywhere means editing one value here.
	 *
	 * The values are exactly what the rules held before; the media queries further
	 * down now step THESE instead of re-declaring `.btn__text`, so every computed
	 * result is unchanged.
	 */
	--btn-min-height: 62px;
	--btn-pad-inline: var(--sp-24);
	--btn-pad-block: 10px;
	--btn-text-size: 20px;
	--btn-text-lh: 30px;
	--btn-text-tracking: -0.02em;
	--btn-text-weight: 700;
}

/* ==========================================================================
   2. Reset / base
   ========================================================================== */

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

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

body {
	margin: 0;
	font-family: var(--font-primary);
	font-size: 18px;
	line-height: 28px;
	letter-spacing: -0.02em;
	font-weight: 400;
	color: var(--color-text);
	background-color: var(--color-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg {
	max-width: 100%;
	height: auto;
	display: block;
	border: 0;
}

a {
	color: inherit;
	text-decoration: none;
	-webkit-transition: var(--transition);
	transition: var(--transition);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font-family: inherit;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	clip: auto;
	clip-path: none;
	background: var(--color-white);
	color: var(--color-text);
	display: block;
	height: auto;
	left: 5px;
	padding: 15px 23px 14px;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ==========================================================================
   3. Structure + container
   ========================================================================== */

/* Page wrapper and main region. Every section in this design is full-bleed and
   owns its own vertical rhythm, so these carry no spacing of their own. */
.site {
	overflow-x: hidden;
}

.site-main {
	display: block;
}

/* 1470 max-width + 15px gutters puts content at x=240 on a 1920 viewport,
   matching the design's 1440 content box exactly. */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

/* ==========================================================================
   4. Shared typography classes
   ==========================================================================
   Per-section variations are made by scoping to the parent section class
   (e.g. `.home-about .section-title`), never by adding a new heading class.
   ========================================================================== */

/* Figma "Hairline" — 22/32, +0.12em, Medium, uppercase. */
.section-label {
	font-size: 22px;
	line-height: 32px;
	letter-spacing: 0.12em;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--color-secondary);
}

/* Figma "Heading 3" — 63/73, -0.03em, Bold. */
.section-title {
	font-size: 63px;
	line-height: 73px;
	letter-spacing: -0.03em;
	font-weight: 700;
	color: var(--color-text);
}

/* Figma "Heading 5" — 35/45, -0.03em, Bold. */
.section-subtitle {
	font-size: 35px;
	line-height: 45px;
	letter-spacing: -0.03em;
	font-weight: 700;
	color: var(--color-text);
}

/* Figma "Heading 4" — 47/57, -0.03em, Bold. Used for the What We Do numbers. */
.section-number {
	font-size: 47px;
	line-height: 57px;
	letter-spacing: -0.03em;
	font-weight: 700;
}

/* Figma "Body Small" — 18/28, -0.02em, Regular. */
.section-description,
.text-small {
	font-size: 18px;
	line-height: 28px;
	letter-spacing: -0.02em;
	font-weight: 400;
	color: var(--color-text-muted);
}

/*
 * WYSIWYG output normalisation.
 *
 * Every description field is an ACF WYSIWYG, so its value arrives already run
 * through wpautop and wrapped in <p>. A browser's default 1em paragraph margins
 * would change the measured spacing, so they are zeroed and replaced with the
 * design's OWN inter-paragraph gap of 28px — measured on the About right
 * column, which is the only place in the design where two paragraphs occur.
 *
 * The reset in section 2 already zeroes p / h1-h6 / ul / ol / figure sitewide,
 * so this only restates it locally; the :first-child / :last-child pair below is
 * what catches everything else the editor can emit (blockquote, pre, table, hr)
 * and guarantees a WYSIWYG block never grows taller than its content.
 */
.section-description p {
	margin: 0;
}

.section-description p + p {
	margin-top: 28px;
}

.section-description > :first-child {
	margin-top: 0;
}

.section-description > :last-child {
	margin-bottom: 0;
}

/* Figma "Heading 6" — 26/36, -0.03em, Bold. */
.text-large {
	font-size: 26px;
	line-height: 36px;
	letter-spacing: -0.03em;
	font-weight: 700;
	color: var(--color-text);
}

/* Figma "Body Medium" — 20/30, -0.02em, Regular. */
.text-medium {
	font-size: 20px;
	line-height: 30px;
	letter-spacing: -0.02em;
	font-weight: 400;
	color: var(--color-text);
}

/* Label + hairline dash row, shared by every section head. */
.hairline {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: var(--sp-16);
}

.hairline__dash {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 24px;
	        flex: 0 0 24px;
	width: 24px;
	height: 2px;
}

.hairline__rule {
	display: block;
}

/* Label above title. */
.section-head {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: var(--sp-16);
}

/* ==========================================================================
   5. Shared buttons
   ==========================================================================
   Every button on the site is one ACF Group (text / url / target) rendered
   through lawncareknox_button(). Only these four classes exist.
   ========================================================================== */

.btn {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	min-height: var(--btn-min-height);
	border-radius: 0;
	overflow: hidden;
	-webkit-transition: var(--transition);
	transition: var(--transition);
	cursor: pointer;
}

.btn__body {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	padding-inline: var(--btn-pad-inline);
	padding-block: var(--btn-pad-block);
}

.btn__text {
	font-size: var(--btn-text-size);
	line-height: var(--btn-text-lh);
	letter-spacing: var(--btn-text-tracking);
	font-weight: var(--btn-text-weight);
	/* white-space: nowrap; */
}

.btn__label {
	font-size: 18px;
	line-height: 28px;
	letter-spacing: -0.02em;
	font-weight: 400;
	/* white-space: nowrap; */
}

/* Tinted icon panel — a flat 12% black wash over the button fill, exactly as
   the Figma icon frames define it. */
.btn__icon {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 64px;
	        flex: 0 0 64px;
			width: 64px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	background-color: var(--btn-icon-tint);
	-webkit-transition: var(--transition);
	transition: var(--transition);
}

.btn__icon img {
	display: block;
}

/* Icon sitting inline inside the padded body instead of its own panel. */
.btn__icon--plain {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;
			width:auto;
	background-color: transparent;
	padding-left: var(--sp-24);
}

/* --- Variants --- */

.btn-primary {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background-color: var(--color-secondary);
}

.btn-secondary {
	background-color: var(--color-secondary);
	color: var(--color-white);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
	background-color: var(--color-primary);
}

.btn-outline {
	background-color: transparent;
	color: var(--color-text);
	-webkit-box-shadow: inset 0 0 0 1px var(--color-border);
	        box-shadow: inset 0 0 0 1px var(--color-border);
}

.btn-outline:hover,
.btn-outline:focus-visible {
	background-color: var(--color-primary);
	color: var(--color-white);
	-webkit-box-shadow: inset 0 0 0 1px var(--color-primary);
	        box-shadow: inset 0 0 0 1px var(--color-primary);
}

/* --- Two-line phone button (hero): 296x96 with an 82px icon panel. --- */
.btn--phone-hero {
	min-height: 96px;
}

.btn--phone-hero .btn__icon {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 82px;
	        flex: 0 0 82px;
			width:82px;
}

/*
 * The hero's phone number is 26/36, not the shared button 20/30. Without this
 * the button measured 259.3 wide instead of the design's 296 (82 icon + 24 +
 * text + 24 => the text has to be 166, and 20px Sora only makes 129.3) and the
 * two-line block came out 58 tall instead of the measured 64 (28 + 36).
 * Values are the hero's own Figma text nodes: 'CALL US ON' 18/28 (already the
 * shared .btn__label) over '865.938.1291' fontSize 26, bounds height 36.
 * Weight stays 700 like every other button label — the design width is within
 * ~2px at either 500 or 700, so there is no evidence to change it.
 */
.btn--phone-hero .btn__text {
	font-size: 26px;
	line-height: 36px;
}

/* --- Header phone button: 210x62, 24px badge inline, no tinted panel. --- */
.btn--phone .btn__body {
	padding-left: var(--sp-8);
}

.btn--phone .btn__icon img {
	width: 24px;
	height: 24px;
}

/* ==========================================================================
   6. Responsive — shared layer
   ==========================================================================
   The Figma file has desktop (1920) frames only: responsive-map.json reports
   mobile: null and tablet: null. Every value below therefore comes from
   proportional scaling of the desktop design, not from a design reference, and
   cannot be pixel-verified.
   ========================================================================== */

@media (max-width: 1360px) {
	.section-title {
		font-size: 52px;
		line-height: 62px;
	}
}


/* --------------------------------------------------------------------------
   THE 1200-AND-BELOW LAYER
   --------------------------------------------------------------------------
   Rebuilt twice. What the current ladder answers, point by point:

   A. .section-title HAS A HARD 28px FLOOR at every width. This is a direct
      instruction and it deliberately OVERRIDES the type scale — 28 is not a
      Figma step. The floor is reached at 767 and then held at 640 and 479 by
      cascade: there is intentionally NO .section-title rule below 767, because
      the only thing another rule could do there is break the floor.

   B. THE TITLE:SUBTITLE RATIO IS THE DESIGN INTENT AND IS NOW PRESERVED.
      Desktop is 63/35 = 1.80x. The previous ladder let it collapse to 1.10x at
      640 (title 22 against subtitle 20 — a 2px gap, i.e. no hierarchy left,
      which is why the title READ as smaller than the subtitle even though it
      was nominally larger). Now:
        1200  47/26 = 1.81x      767  28/20 = 1.40x      479  28/18 = 1.56x
         999  35/22 = 1.59x      640  28/18 = 1.56x
      Never below 1.40x and never converging.

   C. BUTTONS: THE TYPE STEPS, NOT JUST THE BOX. The previous ladder shrank
      .btn__text once (20 -> 18, -10%) while min-height fell -35% and the icon
      panel -50%: a small box crammed with proportionally large text, which is
      why the buttons still read as oversized while the padding looked starved.
      Box and type now come down together at the same rate, so the desktop
      proportion survives instead of drifting:
        .btn   text 20->14 (-30%)  min-height 62->44 (-29%)  icon 64->44 (-31%)
               text:min-height .323 desktop -> .318 at 479  (was .323 -> .450)
        .btn--phone-hero
               text 26->16 (-38%)  min-height 96->58 (-40%)  icon 82->48 (-41%)
      Horizontal padding is deliberately NOT cut early — it holds at 24 down to
      767 and only drops to 16 at 640, because the reported problem was the font
      being too big, not the padding being too generous.
      Button metrics are already off-scale in this design (62 / 96 / 82 are
      Figma component heights, not spacing steps), so the intermediate heights
      and the sub-18 font sizes are off-scale too. Noted rather than forced onto
      a scale that has no values in that range.

   D. EVERY TYPE CLASS IS ON THE SAME BREAKPOINT RHYTHM (1200 / 999 / 767 / 640
      / 479) instead of some classes stepping while their neighbours held still.
      Where a class stops moving it is because it has reached a stated floor:
      28px for .section-title, 16px for body copy, 14px for button text and
      14px for .section-label.

      .section-label used to stop dead at 18px from 999 downward while the title,
      subtitle and body copy around it kept shrinking, so on a phone the eyebrow
      competed with its own heading. It now continues 16 (767) -> 14 (640).

   E. NO NO-OP RULES REMAIN, verified by reading computed font-size at all nine
      widths rather than by reading the stylesheet. Three were still present and
      are now gone:
        .section-description  declared 18px at 1200 == its own 18px base
        .text-small           declared 18px at 1200 AND again at 999
        .section-label        restated the 999 tracking at 767, changing nothing
      A rule that only restates an inherited value is worse than no rule: it
      reads as a deliberate step when nothing steps.

   F. BODY COPY NOW SCALES. .section-description / .text-small / .text-medium
      previously ran 18/18/18 from 1920 all the way to 767, so body copy never
      responded on tablet at all. The ladder is now
        .text-medium          20 -> 18 (1200) -> 17 (999) -> 16 (767, floor)
        .section-description  18 -> 18        -> 17 (999) -> 16 (767, floor)
        .text-small           18 -> 18        -> 17 (999) -> 16 (767, floor)
      17px and 16px are both off the Figma type scale, which stops at 18 — the
      same sanctioned deviation as .btn__text's 15/14. 16px is the hard floor:
      the smallest size that still avoids iOS tap-to-zoom on form fields and
      stays comfortably legible.
      The 999 step holds the 28px line box exactly (17 x 1.647 = 28.0) so the
      first reduction is pure glyph and moves no surrounding rhythm; the 767
      floor then tightens the leading too (16 x 1.625 = 26) because by that
      width the vertical space matters more than the line box being stable.

   Kept from the previous pass, both correct and neither complained about:
   line-height in `em` throughout, and negative letter-spacing easing toward 0 as
   the screen narrows. The `em` line-heights are on leaf text classes only and
   never on `body`, because an `em` line-height computes to a length and would
   then be inherited as that fixed length by every descendant that does not set
   its own.

   The @media (max-width: 1360px) block above is intentionally NOT touched. This
   pass is scoped to 1200 and below, and that block also styles 1201-1360, which
   is desktop territory. So .section-title still has its 52px step there and
   .section-subtitle still has none — out of scope, not an oversight.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	/* --- Type --- */
	.section-title {
		font-size: 47px;
		line-height: 1.213em;
		letter-spacing: -0.02em;
	}

	.section-subtitle {
		font-size: 26px;
		line-height: 1.385em;
		letter-spacing: -0.02em;
	}

	.section-number {
		font-size: 35px;
		line-height: 1.286em;
		letter-spacing: -0.02em;
	}

	.section-label {
		font-size: 20px;
		line-height: 1.5em;
	}

	.text-large {
		font-size: 22px;
		line-height: 1.455em;
		letter-spacing: -0.02em;
	}

	.text-medium {
		font-size: 18px;
		line-height: 1.556em;
		letter-spacing: -0.01em;
	}

	/*
	 * .section-description / .text-small deliberately have NO rule here.
	 *
	 * Their base size is already 18px, so declaring 18px again at this
	 * breakpoint was a no-op: it reduced nothing and only made the ladder look
	 * busier than it was. They hold their base 18px through 1200 and take their
	 * first real step at 999 (below), which is where .text-medium has already
	 * come down to meet them.
	 */

	/* --- Buttons --- */
	.btn,
	.btn--header-cta {
		min-height: 56px;
	}

	.btn__icon {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 56px;
		        flex: 0 0 56px;
				width: 56px;
	}

	:root {
		--btn-text-size: 17px;
		--btn-text-lh: 1.556em;
		--btn-text-tracking: -0.01em;
	}

	.btn__label {
		font-size: 17px;
		line-height: 1.647em;
		letter-spacing: -0.01em;
	}

	.btn--phone-hero {
		min-height: 82px;
	}

	.btn--phone-hero .btn__icon {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 70px;
		        flex: 0 0 70px;
				width:70px;
	}

	.btn--phone-hero .btn__text {
		font-size: 22px;
		line-height: 1.455em;
	}

	/* --- The one full-bleed block gets the page gutter ---
	   .services-cards__row is the only block in this design that is NOT inside
	   .container: it is full-bleed thirds by measurement, so the cards run edge
	   to edge and their CONTENT was inset only by the card's own padding while
	   every container-bound section sat on the 15px --container-gutter.
	   Measured at 999: card content x=32, every other section x=15.

	   Pinning the OUTER edges to the gutter and keeping a wider inner padding
	   gives the page one consistent 15px edge without losing the column
	   separation. The full-viewport top/bottom rules live on the section itself
	   and card 2's vertical dividers are its own left/right edges, so neither
	   moves — the desktop full-bleed behaviour is untouched. */
	.services-card {
		padding-inline: var(--sp-24);
	}

	.services-card:first-child {
		padding-left: var(--container-gutter);
	}

	.services-card:last-child {
		padding-right: var(--container-gutter);
	}
}

@media (max-width: 999px) {
	/* --- Type --- */
	.section-title {
		font-size: 35px;
		line-height: 1.286em;
		letter-spacing: -0.01em;
	}

	.section-subtitle {
		font-size: 22px;
		line-height: 1.455em;
		letter-spacing: -0.01em;
	}

	.section-number {
		font-size: 26px;
		line-height: 1.385em;
		letter-spacing: -0.01em;
	}

	.section-label {
		font-size: 18px;
		line-height: 1.556em;
		letter-spacing: 0.1em;
	}

	.text-large {
		font-size: 20px;
		line-height: 1.5em;
		letter-spacing: -0.01em;
	}

	/*
	 * BODY COPY'S FIRST REAL STEP. This used to declare 18px, which was 18px at
	 * 1200 as well and 18px at base — so all three classes sat unchanged from
	 * 1920 all the way to 767 and body copy never responded on tablet at all.
	 * 17px is off the Figma type scale (18 is its smallest value), the same
	 * sanctioned deviation as the 16px body floor at 767 and the 15/14px button
	 * text: the scale simply has no values between 18 and nothing.
	 * 17 x 1.647 = 28.0, so the line box is unchanged while the glyphs shrink.
	 */
	.text-medium,
	.section-description,
	.text-small {
		font-size: 17px;
		line-height: 1.647em;
		letter-spacing: -0.01em;
	}

	/* Tracking only — see the note above on why `body` gets no em line-height. */
	body {
		letter-spacing: -0.01em;
	}

	/* --- Buttons --- */
	.btn,
	.btn--header-cta {
		min-height: 54px;
	}

	.btn__icon {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 54px;
		        flex: 0 0 54px;
				width:54px;
	}

	:root {
		--btn-text-size: 17px;
		--btn-text-lh: 1.647em;
	}

	.btn__label {
		font-size: 16px;
		line-height: 1.75em;
	}

	.btn--phone-hero {
		min-height: 74px;
	}

	.btn--phone-hero .btn__icon {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 64px;
		        flex: 0 0 64px;
				width: 64px;
	}

	.btn--phone-hero .btn__text {
		font-size: 20px;
		line-height: 1.5em;
	}

	/* Stacked cards are full width, so each one carries the page gutter on both
	   sides and its content lands on 15px like every container section. */
	.services-card,
	.services-card:first-child,
	.services-card:last-child {
		padding-inline: var(--container-gutter);
	}
}

@media (max-width: 767px) {
	/* --- Type: tracking reaches 0 here, and both floors are hit. --- */

	/* THE 28px FLOOR. Held at 640 and 479 by cascade — deliberately no rule
	   below this one. Overrides the Figma type scale, on instruction. */
	.section-title {
		font-size: 28px;
		line-height: 1.429em;
		letter-spacing: 0;
	}

	.section-subtitle {
		font-size: 20px;
		line-height: 1.5em;
		letter-spacing: 0;
	}

	.section-number {
		font-size: 22px;
		line-height: 1.455em;
		letter-spacing: 0;
	}

	/*
	 * .section-label KEEPS STEPPING PAST 999. It previously stopped at 18px here
	 * and this rule only restated the 0.1em tracking the 999 block had already
	 * set — a no-op that made the label hold 18px while the title, subtitle and
	 * body copy around it all kept shrinking, so the eyebrow ended up competing
	 * with its own heading on a phone.
	 * 16px and the 14px at 640 are off the Figma type scale for the same reason
	 * the body floor is: 18 is the scale's smallest value. Tracking carries over
	 * from 999 unchanged, and the line box is held at 24px here and at 640 so
	 * stepping the label never reflows the section head twice.
	 */
	.section-label {
		font-size: 16px;
		line-height: 1.5em;
	}

	.text-large {
		font-size: 18px;
		line-height: 1.556em;
		letter-spacing: 0;
	}

	/* Body copy leaves the Figma scale here (18 is its smallest value) and lands
	   on its own 16px floor. */
	.text-medium,
	.section-description,
	.text-small {
		font-size: 16px;
		line-height: 1.625em;
		letter-spacing: 0;
	}

	body {
		font-size: 16px;
		letter-spacing: 0;
	}

	.section-description p + p {
		margin-top: var(--sp-24);
	}

	.section-head {
		gap: var(--sp-8);
	}

	.hairline {
		gap: var(--sp-10);
	}

	/* --- Buttons. Horizontal padding deliberately still 24 here. --- */
	.btn,
	.btn--header-cta {
		min-height: 48px;
	}

	.btn__icon {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 48px;
		        flex: 0 0 48px;
				width: 48px;
	}

	:root {
		--btn-text-size: 16px;
		--btn-text-lh: 1.75em;
		--btn-text-tracking: 0;
	}

	.btn__label {
		font-size: 15px;
		line-height: 1.867em;
		letter-spacing: 0;
	}

	.btn--phone-hero {
		min-height: 66px;
	}

	.btn--phone-hero .btn__icon {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 56px;
		        flex: 0 0 56px;
				width: 56px;
	}

	.btn--phone-hero .btn__text {
		font-size: 18px;
		line-height: 1.556em;
	}
}

@media (max-width: 640px) {
	/* .section-title deliberately absent — it is on its 28px floor from 767. */
	.section-subtitle {
		font-size: 18px;
		line-height: 1.556em;
	}

	/* The label's floor. 14 x 1.714 = 24px, the same line box as the 16px step
	   at 767, so this is a pure glyph reduction with no reflow. Held at 479 by
	   cascade — only the tracking finishes its journey there. */
	.section-label {
		font-size: 14px;
		line-height: 1.714em;
	}

	.section-number {
		font-size: 20px;
		line-height: 1.5em;
	}

	/* --- Buttons: this is where the horizontal padding finally comes in. --- */
	.btn,
	.btn--header-cta {
		min-height: 46px;
	}

	.btn__icon {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 46px;
		        flex: 0 0 46px;
				width:46px;
	}

	:root {
		--btn-pad-inline: var(--sp-16);
	}

	.btn__icon--plain {
		padding-left: var(--sp-16);
	}

	:root {
		--btn-text-size: 15px;
		--btn-text-lh: 1.867em;
	}

	.btn__label {
		font-size: 14px;
		line-height: 2em;
	}

	.btn--phone-hero {
		min-height: 62px;
	}

	.btn--phone-hero .btn__icon {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 52px;
		        flex: 0 0 52px;
				width:52px;
	}

	.btn--phone-hero .btn__text {
		font-size: 17px;
		line-height: 1.647em;
	}
}

@media (max-width: 479px) {
	/* .section-title deliberately absent — 28px floor. */
	.section-number {
		font-size: 18px;
		line-height: 1.556em;
	}

	.section-label {
		letter-spacing: 0.08em;
	}

	/* --- Buttons --- */
	.btn,
	.btn--header-cta {
		min-height: 44px;
	}

	.btn__icon {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 44px;
		        flex: 0 0 44px;
				width:44px;
	}

	:root {
		--btn-text-size: 14px;
		--btn-text-lh: 2em;
	}

	.btn--phone-hero {
		min-height: 58px;
	}

	.btn--phone-hero .btn__icon {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 48px;
		        flex: 0 0 48px;
				width: 48px;
	}

	.btn--phone-hero .btn__text {
		font-size: 16px;
		line-height: 1.75em;
	}
}