/* ==================================================================
 * iTech Valet — HOMEPAGE
 *
 * Loaded ONLY on the front page. See functions.php.
 *
 * !! EVERY PAGE ON THIS SITE IS CUSTOM. Nothing here is expected to be
 * reused. Do not "promote" a rule from this file into main.css because
 * it looks generic - the next page will measure differently and you will
 * be fighting an inherited value you did not know existed.
 *
 * main.css holds only what is genuinely global: tokens, reset, type,
 * header, footer, buttons, prose and article listings.
 *
 * Every value below was measured off the live page at 1280 and 375. It
 * describes THIS page and nothing else.
 * ================================================================== */

/* ==================================================================
 * 12 HOMEPAGE SECTIONS
 *
 * Used only by front-page.php. Kept at the end so the shared layer
 * above stays readable as the reusable part of the theme.
 * ================================================================== */

/* --- shared helpers ---------------------------------------------- */

/* Caps a reading column inside the full-width container, so section
   backgrounds still run edge to edge while the text keeps a comfortable
   measure.

   LEFT-ALIGNED, NOT CENTRED, on purpose. The hero is left-aligned in the
   original design, and centring the body columns underneath it gave every
   section a different left edge - visibly ragged when you scroll the page.
   Sharing one left edge with the hero is what makes the page read as one
   layout. The centred SECTION TITLES in the card sections are the original's
   own choice and are kept. */
.measure-center {
	max-width: var(--measure);
}

/* So the band's tail is the section padding and nothing else - otherwise the
   last paragraph's own 10px rides on top and "100px of space after the last
   sentence" quietly becomes 110. */
.measure-center > *:last-child { margin-bottom: 0; }

.section-title--center { text-align: center; }

/* Measured per band: navy by default, white on dark artwork, and bright
   blue on the white/grey band - not one colour throughout. */
.section-title--blue  { color: var(--c-blue); }
.on-dark .section-title { color: var(--c-white); }

.section-close {
	max-width: var(--measure);
	margin-inline: auto;
	margin-top: var(--s-7);
	text-align: center;
	font-size: var(--t-lead);
}

/* Inside a left-aligned reading column the closer should follow the column,
   not re-centre itself against the full container. */
.section-close:last-child { margin-bottom: 0; }

.measure-center .section-close {
	margin-inline: 0;
	text-align: left;
}


/* --- section backgrounds -----------------------------------------
 * These are the REAL artwork from the original site, not approximations.
 * The hand-drawn valet motif - VIP tickets, crowns, bow ties, martini
 * glasses, stars, diamonds - is baked into the images themselves.
 *
 * They were sitting in the captured media the whole time; the mapping of
 * which image belongs to which band lives in Beaver Builder's generated
 * stylesheet (migration/export/design/css/..15-layout.css), keyed by node
 * id. Reading THAT is what tells you the design. The page HTML alone does
 * not, which is how a first pass ended up as flat colours.
 * ---------------------------------------------------------------- */

.bg-hero,
.bg-dark-01,
.bg-dark-02,
.bg-dark-globe,
.bg-white-grey {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.bg-hero        { background-image: url("../../img/bg/home-hero.webp"); }
.bg-dark-01     { background-image: url("../../img/bg/home-dark-01.webp"); }
.bg-dark-02     { background-image: url("../../img/bg/home-dark-02.webp"); }
.bg-dark-globe  { background-image: url("../../img/bg/home-dark-globe.webp"); }
.bg-white-grey  { background-image: url("../../img/bg/home-white-grey.webp"); }
.bg-brand-blue  { background-color: var(--c-blue); }

/* Text treatment for any band with dark artwork behind it. Replaces the
   old .section--navy, which painted its own gradient. */
.on-dark,
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark p, .on-dark li { color: var(--c-white); }

/* Anything with its OWN light surface inside a dark band must keep dark text.
   `.on-dark p` (0,1,1) outranks a plain `.hero__lead` (0,1,0), which rendered
   the hero paragraph white on a white card - invisible, and the markup looked
   perfectly correct the whole time. Same trap as `.cta-button` in section 02. */
.on-dark .hero__lead,
.on-dark .hero__lead p,
.on-dark .card:not(.card--blue) p,
.on-dark .card:not(.card--blue) h3 { color: var(--c-text); }
.on-dark .card:not(.card--blue) h3 { color: var(--c-heading); }
.on-dark .pull-quote { color: var(--c-white); }
/* THE `a` RULE THAT SAT HERE IS GONE. Every `.on-dark` section carries
   `links-inherit` in front-page.php, so a link takes `currentColor` -
   the white of the copy around it - and an underline. See main.css 02b.

   THAT FIXES THE FOUNDER LINK'S HOVER, which was broken. This rule was
   (0,2,1) and governed only the resting state, so main.css's (0,3,1)
   hover repainted it --c-link-hover, which is navy, on `home-dark-02`.
   Measured on the artwork actually behind it: 1.00:1 worst pixel. The
   link vanished under the pointer. BUILD-PLAN.md flagged the homepage
   and /services/ as the two pages still carrying this after /about/ was
   fixed; both are fixed now, by the site rule rather than by two more
   one-line patches.

   --c-blue-pale is not lost - it stays on the headings and the founder
   line below. It is not used for a LINK any more because it measures
   1.26:1 against the white copy beside it, so with no underline a reader
   cannot tell it is one. */
.on-dark .stat__figure { color: var(--c-white); }
.on-dark .stat__label,
.on-dark .founder-line { color: var(--c-blue-pale); }

/* Cards keep their white surface on dark bands - that contrast is the
   original design, not an accident. */
.on-dark .card h3,
.on-dark .card p { color: var(--c-text); }
.on-dark .card h3 { color: var(--c-heading); }
.on-dark .card--outlined { background: var(--c-white); }


/* --- 1. hero ------------------------------------------------------ */

.section--hero { padding-block: var(--s-band); }   /* measured 100px, fluid below */

.hero__inner { max-width: 900px; }

.hero__headline {
	margin: 0;
	color: var(--c-white);
	font-size: var(--t-hero);
}

/* Measured: Chewy 110px, ITALIC, line-height 154px (1.4), tracking -2px. */
.hero__accent {
	margin: 0 0 var(--s-6);
	color: var(--c-white);
	font-family: var(--f-accent);
	font-size: var(--t-accent);
	font-style: italic;
	letter-spacing: -0.018em;
	line-height: 1.4;
}

/* Measured: white card, 25px radius, spanning the full row, 18px centred
   text. It is a distinct element in the design, not loose body copy. */
.hero__lead {
	max-width: none;
	margin: clamp(2rem, 5.5vw, 62px) 0 0;   /* was 7rem; pulled in 50px */
	padding: var(--s-5) var(--s-6);
	border-radius: 25px;
	background: var(--c-white);
	color: var(--c-text);
	font-size: 1.125rem;      /* measured: 18px */
	font-weight: 300;         /* measured */
	line-height: 1.1;         /* measured: 19.8px on 18px - deliberately tight */
	color: #000;              /* measured: pure black, not the body ink */
	text-align: center;
}


/* --- 2. pull quote ------------------------------------------------ */

/* Measured: 30px in the body face, BOLD, sitting in a grey pill - #c7c7c7,
   100px radius, 720px wide. Not a display heading and not loose text; the
   pill is what makes it read as a spoken question. */
.pull-quote {
	max-width: 720px;
	margin: var(--s-6) auto;
	padding: var(--s-2) var(--s-5);
	border-radius: 100px;
	background: #c7c7c7;
	color: #000;
	font-size: clamp(1.375rem, 2.35vw, 30px);
	font-weight: 700;
	line-height: 1.45;
}


/* --- 5 & 7. cards -------------------------------------------------- */

.card-grid { display: grid; gap: var(--s-6); }
.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card {
	padding: var(--s-6);
	border-radius: var(--radius);
	background: var(--c-white);
	box-shadow: var(--shadow-card);
}

.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.card--outlined {
	border: 2px solid var(--c-blue-pale);
	box-shadow: none;
}

.card__eyebrow {
	margin: 0 0 var(--s-2);
	color: var(--c-orange);
	font-size: var(--t-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}


/* --- 6. numbered steps -------------------------------------------- */

.step-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--s-6);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.step {
	position: relative;
	padding: var(--s-6);
	padding-top: var(--s-7);
	border-radius: var(--radius);
	background: var(--c-white);
	box-shadow: var(--shadow-card);
	counter-increment: step;
}

/* The number is decorative - the heading already names the step, so it is
   hidden from assistive technology rather than read out as noise. */
.step::before {
	content: counter(step);
	position: absolute;
	top: var(--s-4);
	right: var(--s-5);
	color: var(--c-blue-pale);
	font-family: var(--f-display);
	font-size: 3rem;
	line-height: 1;
}

.step__title { margin-top: 0; }


/* --- 8. statistics ------------------------------------------------- */

.stat-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-7);
	margin-bottom: var(--s-6);
}

.stat { display: flex; flex-direction: column; }

.stat__figure {
	color: var(--c-navy);
	font-family: var(--f-display);
	font-size: clamp(2.5rem, 5vw, 3.75rem);
	line-height: 1;
}

.stat__label {
	color: var(--c-grey-mid);
	font-size: var(--t-small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.founder-line {
	margin-top: var(--s-6);
	color: var(--c-grey-mid);
	font-size: var(--t-small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}


/* --- 9. closing ---------------------------------------------------- */

/* NO RULE ABOVE THIS. It carried a 1px white border-top, which drew a divider
   across the band under the CTA that the original does not have.

   Measured: 22px / 24.2px, weight 700, UPPERCASE, centred, white. */
.closing-note {
	margin: 0 0 10px;
	font-size: clamp(1.125rem, 1.72vw, 22px);   /* floor measured: 18px */
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
}
.closing-note:last-child { margin-bottom: 0; }

/* `.section--navy a` USED TO SIT HERE AND IS DELETED. It is the same rule
   as the `.on-dark a` above and it was dead besides: `section--navy`
   appears in no template, no include and no script - grepped across the
   theme. A link on a dark band is now handled by `links-inherit` on the
   section. */



/* ==================================================================
 * 13 HOMEPAGE COMPONENTS
 *
 * The original alternates text-and-illustration bands. These are the
 * shapes that produces.
 * ================================================================== */

/* --- two-column band ---------------------------------------------- */

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.split__text > *:first-child { margin-top: 0; }
.split__text > *:last-child  { margin-bottom: 0; }

.split__img {
	width: 100%;
	height: auto;
	margin-inline: auto;
}

.split__img--photo { border-radius: var(--radius); }

.split__media--narrow { max-width: 320px; }

/* The hero leans on its text; the illustration is support, not the subject. */
/* Measured as two equal columns, but weighted 45/55 by choice so the
   illustration carries more of the row and closes the gap between the two
   columns. */
.split--hero {
	grid-template-columns: 1fr 1fr;
	/* No column gap: the 100px indent below already separates the two, and
	   the inherited ~48px gap was stealing exactly the width the headline
	   needed to hold two lines. */
	gap: 0;
}

/* Gerek's direction: shift the headline column 100px right to balance it
   against the illustration, with the columns back to 50/50 to pay for it.
   Desktop only - the mobile hero centres.

   The headline's longest line needs 506px at 70px Bebas. 50/50 minus the
   100px indent leaves 520px at a 1280 viewport - it fits with 14px to
   spare, so the indent cannot grow much further without breaking the
   two-line headline. */
@media (min-width: 861px) {
	.split--hero .split__text { padding-left: 100px; }
}
.split--hero .split__media { max-width: 640px; }

/* Measured: 420px / 780px columns, logo 250px centred in its own column,
   and the text block carries 40px above and below - that vertical breathing
   is what makes the band feel balanced rather than cramped. */
.split--band {
	grid-template-columns: 7fr 13fr;   /* was 420px 780px - same ratio, shrinks */
	gap: 0;
	align-items: center;
}
.split--band .split__media--narrow {
	max-width: none;
	text-align: center;
}
.split--band .split__img { max-width: 250px; margin-inline: auto; }
/* Measured: 40px above and below the copy. Both sides, equal - the band
   reads as unbalanced the moment they differ. */
.split--band .split__text { padding: 40px 20px; }
.split--band .split__media { align-self: center; }
.split--band .lead {
	margin: 0 0 10px;
	line-height: 1.1;     /* measured: 24.2px on 22px */
	text-align: left;
}
.split--band .lead:last-child { margin-bottom: 0; }

/* Stacked, the LOGO GOES ON TOP. The generic mobile rule below puts every
   .split__media after its text - right for an illustration that supports a
   message, wrong for a logo, which is the thing being introduced. Left alone
   it sat flush against the bottom edge of the band with nothing under it.
   Gerek: "the logo is literally at the bottom of the section on mobile."

   The air is balanced deliberately: the band's own 40px top and bottom do the
   work and the text's vertical padding is removed, so the logo has 60px above
   it (40 plus the section's 20) and the copy has the same 60 below. Leaving
   the text's 40px in place made the bottom 100 against the top's 60. */
@media (max-width: 900px) {
	.split--band {
		grid-template-columns: 1fr;
		gap: var(--s-5);
		padding-block: 40px;
	}
	.split--band .split__media { order: 1; }
	.split--band .split__text  { order: 2; padding: 0; }
}

.split--close { margin-top: 0; }   /* the 100px lives on the text column - see row 7 */

/* Measured: two 600px columns, photo 560 inside the left one, copy inset 20px
   inside the right. Not the 0.8/1.2 this had. */
.split--founders { grid-template-columns: 1fr 1fr; gap: 0; }
.split--founders .split__text { padding-left: 20px; }
.split--founders .split__media { text-align: center; }

@media (max-width: 860px) {
	.split,
	.split--hero,
	.split--band,
	.split--founders { grid-template-columns: 1fr; }

	/* Illustration below the words on narrow screens, whichever order the
	   markup uses - the message should read first. */
	.split__media { order: 2; margin-inline: auto; max-width: 420px; }
	.split__text  { order: 1; }
}


/* --- the before/after phones --------------------------------------
 * Measured: 500px images, 40px apart, centred as a pair. Laying them out
 * as two half-width columns pushed them ~136px apart, which is what made
 * the comparison read as two unrelated pictures instead of a before and
 * after.
 * ---------------------------------------------------------------- */

.compare {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;                 /* measured */
	margin-top: 40px;          /* measured: 40px below the heading */
	margin-bottom: var(--s-7);
}

/* Measured: two 500px images in 600px columns. */
.compare__img {
	width: 100%;
	max-width: 500px;
	height: auto;
	flex: 0 1 500px;
}

/* Measured: the text block under the phones is 1200px wide and centred. */
.measure-center--mid { max-width: 1200px; margin-inline: auto; text-align: center; }


/* --- plain text columns (no card surface) -------------------------- */

.col-grid { display: grid; gap: var(--s-7); }
.col-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.col-item h3 { margin-top: 0; font-size: var(--t-h3); }
.col-item p:last-child { margin-bottom: 0; }


/* --- card variants -------------------------------------------------- */

.card--blue {
	background: var(--c-blue);
	color: var(--c-white);
	box-shadow: none;
}
.card--blue h3,
.card--blue p { color: var(--c-white); }

.card__icon {
	width: 56px;
	height: auto;
	margin-bottom: var(--s-4);
}


/* --- highlighted paragraph ------------------------------------------ */

/* Measured off the original, which built this as a COLUMN with a background
   rather than a text module: navy fill, 15px radius on all four corners, and
   a 10px bright-blue bottom border - a bottom edge only, not a ring. The
   letter-spacing is measured too; it is what gives the block its wide,
   plaque-like set. */
.callout {
	margin: 40px 0 0;
	padding: 20px;
	border-radius: 15px;
	border-bottom: 10px solid var(--c-blue);
	background: var(--c-navy);
	color: var(--c-white);
	font-size: var(--t-lead);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 2.7px;
}

/* NOT a heading. It was set in Bebas, uppercase, navy, at h2 scale, which
   made "We handle every piece of it." read as a section title. On the live
   site it is body Lexend - 36px / 52.2px, weight 700, bright blue. */
.lead--emphatic {
	color: var(--c-blue);
	font-size: clamp(1.875rem, 2.8125vw, 36px);   /* floor measured: 30px */
	font-weight: 700;
	line-height: var(--lh-lead);
}

/* On dark bands the emphatic line needs to invert with everything else. */
.on-dark .lead--emphatic { color: var(--c-white); }
.on-dark .compare__label { color: var(--c-white); }


/* ==================================================================
 * 14 MOBILE HERO
 *
 * Measured on the original at 375px. Everything centres, and the answer
 * card gets BIGGER type than desktop, not smaller - it is there to be
 * read on a phone as much as by a crawler.
 * ================================================================== */

@media (max-width: 860px) {

	.split--hero .split__text { text-align: center; }

	/* The original's hero row carries NO horizontal padding on mobile. With
	   20px gutters "COMPETITORS. NOT YOU." misses fitting by 4px and drops to
	   a third line. Narrower gutters here, and the inner blocks keep their
	   own breathing room. */
	.section--hero > .container { padding-inline: 14px; }

	.hero__headline { line-height: 0.95; }   /* measured: 42.3px on 47px */

	/* The original measures 18px here, but at full width that leaves the
	   button looking half empty and the label hard to read. Gerek's call:
	   size it up to fill the pill. */
	.split--hero .cta-button {
		display: block;
		width: 100%;
		padding-inline: var(--s-4);
		font-size: 1.3125rem;
	}

	/* THE BUTTON AND THE MASCOT WERE TOUCHING. .split--hero kills the gap so
	   the desktop headline can hold two lines; stacked, that left the image
	   starting on the exact pixel the button ended - measured 0px on an iPad
	   mini. Row gap only, so the desktop column behaviour is untouched. */
	.split--hero { row-gap: 40px; }

	/* Measured: 20px on mobile against 18px on desktop. */
	.hero__lead {
		padding: var(--s-5) var(--s-4);
		font-size: 1.25rem;
		line-height: 1.1;
	}
}



/* ==================================================================
 * 15 MEASURED BAND DETAIL
 *
 * Rows 4-10, read off the live site at 1280. Card radius is 15px
 * throughout - not the theme's default 10px.
 * ================================================================== */

/* --- row 4: the blue band ------------------------------------------ */


/* --- row 6: disqualifiers, no card surface ------------------------- */
.col-item { text-align: center; }

.col-item__icon {
	width: 30px;              /* measured */
	height: auto;
	margin: 0 auto var(--s-4);
}

/* Measured: 30px / 33px Bebas Neue in pale blue, not the body face, with a
   40px gap to the copy underneath. */
.col-item h3 {
	margin: 0 0 40px;
	font-family: var(--f-display);
	font-size: clamp(1.875rem, 2.35vw, 30px);   /* floor measured: 30px */
	font-weight: 400;
	color: var(--c-blue-pale);
	text-transform: uppercase;
	line-height: 1.1;
}
.on-dark .col-item h3 { color: var(--c-blue-pale); }

/* Measured: 20px on 22px. Same leading fault as the method tiles - the copy
   was running on the 1.7 body default and sprawling under its heading. */
.col-item p {
	margin: 0;
	font-size: clamp(1.125rem, 1.6vw, 20px);   /* floor measured: 18px */
	line-height: 1.1;
	letter-spacing: 2.7px;
}

/* --- row 7: the method cards --------------------------------------- */
.card { border-radius: 15px; }              /* measured, all cards */
.card__icon { width: 100px; margin-inline: auto; }   /* measured: 100x94 */
.card-grid--3 .card { text-align: center; }

/* BEBAS NEUE, not the body face. h1-h4 in main.css do not set a family, so
   these were inheriting Lexend and rendering "Foundation" in mixed case where
   the original shows FOUNDATION in condensed caps.

   Measured on the live DOM: 40px / 44px, weight 700, 2.7px tracking, white.
   The original leaves text-transform alone because Bebas has no lowercase to
   render; the uppercase here is insurance for the fallback face. */
.card--blue h3 {
	margin: 0 0 20px;
	font-family: var(--f-display);
	font-size: clamp(2.125rem, 3.125vw, 40px);   /* floor measured: 34px */
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 2.7px;
	text-transform: uppercase;
}

/* Measured: 20px on 22px - line-height 1.1, not the 1.7 body default, which
   is what made the card copy sprawl below the heading. */
.card--blue p {
	margin: 0;
	font-size: clamp(1.125rem, 1.6vw, 20px);   /* floor measured: 18px */
	line-height: 1.1;
	letter-spacing: 2.7px;
}

.split--close .split__img { max-width: 200px; }   /* measured: mascot 200x338 */

/* --- row 8: the engine tiers --------------------------------------- */
.card--outlined { text-align: center; }
.card--outlined .card__icon { width: 100px; margin-bottom: 40px; }

/* Measured: tier 50px / 55px, product 26px / 28.6px, both bright blue, both
   tracked 2.7px. The tier is BEBAS - it had no family of its own and was
   inheriting Lexend, the same fault as the method tiles' headings. */
.card__tier {
	margin: 0 0 10px;
	font-family: var(--f-display);
	color: var(--c-blue);
	font-size: clamp(2.5rem, 3.91vw, 50px);   /* floor measured: 40px */
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 2.7px;
}
.card__product {
	margin: 0 0 40px;
	color: var(--c-blue);
	font-size: clamp(1.125rem, 2.04vw, 26px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 2.7px;
}
.card--outlined p:last-child {
	margin: 0;
	font-size: clamp(1.25rem, 1.6vw, 20px);   /* floor measured: 20px */
	line-height: 1.1;
	letter-spacing: 2.7px;
	color: #000;
}

/* --- row 9: credentials -------------------------------------------- */
/* The photo's width is set with the rest of this band's geometry further
   down. It used to be declared here too, at a different value, with the later
   rule silently winning - two numbers for one thing is how a stylesheet starts
   lying to you. */

/* THE STATS ARE BOXES. Two 220x150 outlines, 2px white, 15px radius, on the
   dark artwork with nothing behind them - they were rendering as loose text
   and the whole row read as a caption instead of a credential.

   Measured: figure 40px / 58px weight 400 white, label 24px / 24px weight
   700 blue, both left-aligned on a 20px inset. */
.stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 220px;
	min-height: 150px;
	padding: 20px;
	border: 2px solid var(--c-white);
	border-radius: 15px;
}

.stat__figure {
	font-family: var(--f-body);
	font-variant-numeric: tabular-nums;   /* so the count-up does not jiggle */
	font-size: clamp(2.5rem, 3.125vw, 40px);   /* floor measured: 40px */
	font-weight: 400;
	line-height: 1.45;
}
.stat__label {
	font-size: clamp(1.5rem, 1.875vw, 24px);   /* floor measured: 24px */
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
}
.on-dark .stat__label { color: var(--c-blue); }

/* Measured: 20px on 22px in PALE BLUE, not white - the band's body copy is a
   step down from the headline, and it was rendering at full white on the 1.7
   body leading. */
.split--founders .split__text p:not(.founder-line) {
	margin: 0 0 20px;
	font-size: clamp(1.25rem, 1.6vw, 20px);   /* floor measured: 20px */
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 2.7px;
	color: var(--c-blue-pale);
}

/* Measured: 30px / 33px Bebas, white, uppercase - a display line, and the
   only one in the band. The link inside it carries no underline. */
.founder-line {
	margin: 40px 0 0;
	font-family: var(--f-display);
	font-size: clamp(1.25rem, 2.35vw, 30px);   /* floor measured: 20px */
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: normal;
	text-transform: uppercase;
}
.on-dark .founder-line { color: var(--c-white); }

/* THE FOUNDER LINK'S THREE OWN RULES ARE GONE - the white on the `a`,
   which `currentColor` now inherits from the line above, and the
   no-underline-at-rest / underline-on-hover pair.
   
   IT NOW CARRIES AN UNDERLINE AT REST, and that is a deliberate change
   rather than a side effect. Underline-on-hover-only is invisible on a
   touch screen, which never sends the hover - the same argument
   learn.css already makes for `.lrn-more__link`, and this link is the
   only way to /about/ from the homepage. Its hover was broken outright
   until this pass: main.css's (0,3,1) navy hover outranked the (0,2,1)
   rule above it and repainted the link --c-navy on `home-dark-02`,
   measured 1.00:1 worst pixel against the artwork behind it. */

/* --- row 10: closing ------------------------------------------------ */




/* ==================================================================
 * 16 MEASURED BAND GEOMETRY
 *
 * Column widths and module margins, read off the live site at 1280.
 * The TYPE in these bands was already right for several passes while
 * the page still looked wrong - it was the geometry underneath.
 * ================================================================== */

/* --- row 5: Hopium ------------------------------------------------- */
/* Measured at 1280: two 600px columns with no gutter between them, and the
   heading spanning BOTH of them with 100px of air above it. The heading is
   left-aligned and full width - it starts at the left edge of the copy and
   runs on across the illustration column. Boxing it into the left column is
   what forced it onto two lines and made the band read as a narrow strip. */
.hopium {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 0;
}

.section--deep .hopium__title {
	grid-column: 1 / -1;
	margin-top: clamp(2.5rem, 7.82vw, 100px);
	text-align: left;
}

/* Measured: 560px of copy inside the 600px column - the 40px is the column's
   own right inset, not a grid gap. */
.hopium__text {
	max-width: 560px;
	font-size: var(--t-lead);
	line-height: var(--lh-lead);   /* measured: 31.9px on 22px, not the 1.7 body */
}
.hopium__text > *:first-child { margin-top: 0; }
.hopium__text > *:last-child  { margin-bottom: 0; }

/* The illustration sits on the FLOOR OF ITS COLUMN - level with the bottom of
   the callout beside it, with the band's 100px of padding still below. Not
   centred in the column, and not flush to the bottom of the section. */
.hopium__media {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	align-self: stretch;
}

.hopium__img {
	width: 100%;
	max-width: 400px;   /* measured: 400px on a 775x1158 original */
	height: auto;
}

@media (max-width: 860px) {
	.hopium { grid-template-columns: 1fr; }
	.section--deep .hopium__title { text-align: center; }
	.hopium__text { max-width: none; }
	.hopium__media { justify-content: center; margin-top: var(--s-6); }
	.hopium__img { max-width: 250px; }
}

/* --- row 6: disqualifiers ------------------------------------------ */
/* Measured: three 400px columns, content inset 40px inside each. */
.col-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 0; }
.col-item { padding-inline: 40px; }
.col-item__icon { margin-top: 20px; }

@media (max-width: 860px) {
	.col-grid--3 { grid-template-columns: 1fr; gap: var(--s-6); }
	.col-item { padding-inline: 0; }
}

/* --- row 7: the method --------------------------------------------- */
/* Measured at 1280: three 400px COLUMNS, but the blue surface inside each is
   only 360 wide - the original puts a 20px margin on the column content, so
   the tiles sit 40px apart with 20px of air at the outer edges too.
   Grid `gap` cannot express that (it would not inset the outer edges), so the
   margin lives on the card, exactly as the original has it. */
.card-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 0; }
.card--blue { margin: 20px; padding: 40px 20px 20px; }
.card--blue .card__icon { margin-bottom: 20px; }

/* Measured: a 300/900 split beside the mascot. The 100px below the tiles is
   carried by the TEXT COLUMN, not by the row - on the live site the mascot
   starts 40px under the tiles while the first line starts at 100px, so the
   mascot rides higher than the copy it sits beside. Centring the row (which
   is what this did before) pushed the copy 130px too low. */
/* 1fr 3fr, NOT 300px 900px. Fixed columns do not shrink: they summed to
   1200 inside an 860 container and pushed the whole document 20px wider than
   the viewport on every screen between 861 and 1240. Same ratio at 1200. */
.split--close { grid-template-columns: 1fr 3fr; gap: 0; align-items: start; }
.split--close .split__media { max-width: none; text-align: center; margin-top: 40px; }
.split--close .split__text { padding: 100px 20px 0; }

/* Both closing lines are BLUE on the live site, not black and not a navy
   display heading. Measured: 20px / 29px weight 400, then 36px / 52.2px
   weight 700 - the same Lexend, two sizes, 60px apart.

   :not() so this does not outrank .lead--emphatic on size and weight - it is
   the more specific selector and was flattening the second line back to 20px. */
.split--close .lead:not(.lead--emphatic) {
	font-size: clamp(1.125rem, 1.5625vw, 20px);   /* floor measured: 18px */
	font-weight: 400;
}
.split--close .lead { margin: 0 0 60px; color: var(--c-blue); }
.split--close .lead:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
	.card-grid--3 { grid-template-columns: 1fr; gap: var(--s-6); }
	.split--close { grid-template-columns: 1fr; }
}

/* --- row 8: the engine ---------------------------------------------- */
/* Measured: two 600px cards, contents inset ~43px, 40px under the heading. */
/* Same construction as the method tiles: two 600px columns with the white
   surface inset 20px inside each, so the tiles sit 40px apart instead of
   touching. Gerek asked for 10-20px; the original's own inset gives 40 and
   matches the spacing he signed off on in row 7. */
.card-grid--2 { grid-template-columns: repeat(2, 1fr); gap: 0; }
.card--outlined { margin: 20px; padding: 40px 20px 20px; border: none; }

@media (max-width: 860px) {
	.card-grid--2 { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* --- row 9: credentials --------------------------------------------- */
/* Measured: 100px band top, and the photo sits ON the bottom edge of the band
   with no gap, by design.

   BOTTOM-ALIGNED, NOT TOP-ALIGNED, and that is the whole fix. Under
   `align-items: start` the photo only LOOKED flush while it happened to be
   the taller of the two columns, and it wins by a hair - 17px at 1280. On a
   wide viewport the stat labels wrap to two lines, the text column overtakes
   the photo, and the photo lifts off the bottom edge while the founder line
   jams against it. Both faults, one cause.

   Aligning both columns to the bottom makes the flush edge a fact instead of
   a coincidence, whichever column is taller. */
.section--credentials { padding-block: clamp(3rem, 7.82vw, 100px) 0; }
.split--founders { grid-template-columns: 1fr 1fr; gap: 0; align-items: end; }
.split--founders .split__media { max-width: none; }

/* Fills its column. The photo is a cut-out on transparent ground, so the extra
   width scales the people rather than adding frame - which closes the gap
   above them that bottom-alignment would otherwise open. */
.split--founders .split__img { max-width: 600px; }

/* The copy stops short of the band's edge. The photo may touch it; text never
   should - that was the second half of what Gerek reported. */
.split--founders .split__text { padding: 0 0 60px 20px; }

/* The two boxes are 220 wide with 20px between them - they sit at the LEFT of
   the column, not stretched across it, which is what `repeat(2, 1fr)` was
   doing. An earlier pass read them as 300px boxes with a 42px text inset;
   the live DOM says 220x150 on a 20px inset. */
.stat-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 40px;
}

@media (max-width: 860px) {
	.split--founders { grid-template-columns: 1fr; }
}

/* --- row 10: closing ------------------------------------------------ */
/* Measured: three 400px columns - copy, mascot, copy. */
.trio {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	align-items: start;
	margin-top: clamp(2.5rem, 7.82vw, 100px);
}
/* CENTRED. Every line in this band is centred on the original - the columns
   read as three captions around the mascot, not as two blocks of body copy.
   Measured: 22px / 24.2px, weight 300, 10px apart. */
.trio__text { padding-inline: 20px; text-align: center; }

.trio__text .lead {
	margin: 0 0 10px;
	line-height: 1.1;
	font-weight: 300;
}
.trio__text .lead:last-child { margin-bottom: 0; }
.trio__media { text-align: center; }
.trio__img { max-width: 250px; margin-inline: auto; }   /* measured: 250x363 */

.closing-note { margin-top: clamp(2.5rem, 7.82vw, 100px); }

/* The original separates the two notes with an empty paragraph. A margin says
   the same thing without shipping a blank <p> to a screen reader. */
.closing-note + .closing-note { margin-top: 44px; }

@media (max-width: 860px) {
	.trio { grid-template-columns: 1fr; gap: var(--s-6); }
	.trio__text { padding-inline: 0; }
}



/* ==================================================================
 * 17 MOTION
 *
 * Deliberately restrained. This is a B2B site selling authority - an
 * illustration bouncing hard reads as a template, not as craft. The
 * intent is "alive", not "animated".
 *
 * All of it is inside prefers-reduced-motion guards. Motion is a real
 * accessibility problem for some people, and a hero that never stops
 * moving is the worst offender.
 * ================================================================== */

@media (prefers-reduced-motion: no-preference) {

	/* !! NO PERPETUAL ANIMATION ON THIS PAGE.
	   A 10px float was tried on the hero illustration and removed: it
	   reads as pleasant for a few seconds and as an irritation by ten,
	   which is how long someone actually spends reading the hero.
	   Motion here is response-only - it happens because the visitor did
	   something, and then it stops. Do not reintroduce an infinite loop. */

	/* Cards lift toward the cursor. Cheap, and it makes the grid feel
	   like objects rather than printed panels. */
	.card,
	.article-card {
		transition: transform var(--ease), box-shadow var(--ease);
	}

	.card:hover,
	.article-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 6px 12px rgba(6, 58, 108, 0.12),
		            0 16px 40px rgba(6, 58, 108, 0.10);
	}

	/* The credential boxes lift the same way. Their shadow is white-tinted,
	   not navy: they sit on dark artwork, where a navy shadow is invisible. */
	.stat { transition: transform var(--ease), box-shadow var(--ease); }

	.stat:hover {
		transform: translateY(-4px);
		box-shadow: 0 6px 12px rgba(255, 255, 255, 0.10),
		            0 16px 40px rgba(255, 255, 255, 0.08);
	}
}


/* ==================================================================
 * 18 TABLET TYPE — the clamps above are the MOBILE scale
 *
 * Every font-size in this file is a clamp that reaches its desktop value
 * somewhere near 1280 and decays below it. The original does not decay:
 * it holds the desktop size down to 769 and only changes at 768. On an
 * iPad the difference showed as a page that was uniformly a size or two
 * too small.
 *
 * Each clamp is already sitting on its floor by 768, so this block adds
 * nothing at mobile and nothing at desktop - it only fills the middle.
 * The six clamps not listed here have identical floor and cap and were
 * never varying in the first place.
 *
 * Values are each clamp's own cap, so no desktop size changes. The one
 * genuine step - section titles at 50px between 769 and 992 - lives on
 * --t-h2 in main.css, because it is not homepage-specific.
 * ================================================================== */

@media (min-width: 600px) {
	.pull-quote                                        { font-size: 30px; }
	.closing-note                                      { font-size: 22px; }
	.lead--emphatic                                    { font-size: 36px; }
	.col-item p                                        { font-size: 20px; }
	.card--blue h3                                     { font-size: 40px; }
	.card--blue p                                      { font-size: 20px; }
	.card__tier                                        { font-size: 50px; }
	.card__product                                     { font-size: 26px; }
	.founder-line                                      { font-size: 30px; }
	.split--close .lead:not(.lead--emphatic)           { font-size: 20px; }
}


/* ==================================================================
 * 19 RESTING CARD SHADOW — tablet and mobile
 *
 * The cards lift and take a shadow on hover, which is most of what makes
 * the grids read as objects rather than printed panels. A touch screen
 * has no hover, so on the two sizes where most people will see this page
 * the cards were flat. Gerek asked for the shadow to be permanent there.
 *
 * --shadow-card, not the hover shadow: this is a RESTING state, and the
 * hover weight sitting on every card at once reads heavy. Hover still adds
 * the stronger one wherever a pointer exists.
 * ================================================================== */

@media (max-width: 992px) {
	.card { box-shadow: var(--shadow-card); }
}


/* ==================================================================
 * 20 FIXES FROM THE MOBILE REVIEW  (2026-08-24)
 * ================================================================== */

/* Measured 30px on the live site at both 375 and 768; this was reaching its
   30px cap only near 1280 and sitting on a 20px floor everywhere else, which
   is what made the line under the credentials read as an afterthought. It is
   the same size at every width on the original, so it is a flat value here
   rather than a clamp. */
.founder-line { font-size: 30px; }


/* The hero button at tablet sizes. 21px is the phone value - Gerek's earlier
   call to size it up from the original's 18 so the full-width pill does not
   read half empty - and on a tablet that same 21px looks undersized against
   a 70px headline. From 600 up it takes the desktop 26px. */
@media (min-width: 600px) {
	.split--hero .cta-button { font-size: 26px; }
}