/* home-v2.css — layout and accessibility fixes from the homepage v2 work.
   2026-10-14, built on the /home-v2/ test page; promoted to the front page 2026-10-15
   (loads after page-home.css on is_front_page(), functions.php). From the Impeccable
   critique and accessibility pass. Kept as its own file so page-home.css stays
   byte-identical to its design-handoff copies; fold it in when the handoff is next
   reconciled. The header-nav rule fixes a sitewide contrast bug and belongs in
   page-specific.css for every page. */

/* In-page links ("see the work") land below the sticky header instead of under it.
   Header measures ~109px on desktop, ~169px on mobile (GP wraps the hamburger onto a
   second row there; that's a sitewide header issue, flagged separately). */
html { scroll-padding-top: 125px; }
@media (max-width: 768px) {
	html { scroll-padding-top: 185px; }
}

/* Header nav hover/focus went to --orange-darkest (#913D14) on espresso: about 2.4:1,
   below AA. Use orange-mid, the brand's on-dark accent, plus an underline. */
@media (min-width: 769px) {
	.site-head #primary-menu li.link > a:hover,
	.site-head #primary-menu li.link > a:focus {
		color: var(--orange-mid);
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: .3em;
	}
}

/* Hero checklist and AI list kept GP's default 3em list indent, pushing the ticks right
   of the card title and squeezing the text on phones. */
.hero-card ul,
.ai-list { margin-left: 0; padding-left: 0; }

/* The absolutely positioned step number ("03") overlapped long step headings. */
.step h3 { padding-right: 3.5rem; }

/* The step numbers are CSS-generated and decorative; most screen readers read them
   ("zero one"). Same content with empty alt text. Browsers without the "/ alt" syntax
   drop this declaration and keep page-home.css's rule, so nothing breaks. */
.step::before { content: "0" counter(step) / ""; }

/* Card min-height (357px) is there to even out the 3-column rows; on one column it only
   leaves empty space at the bottom of every card. */
@media (max-width: 768px) {
	.card { min-height: 0; }
}

/* AI section, v2: AI is background, so the section moves to the end of the page (just
   before the final call to action) and drops the full-bleed maroon band that made it the
   most prominent section. It now sits on the page surface with a hairline, like a note. */
.ai-band {
	background: none;
	border-top: 1px solid var(--line);
	padding-top: 72px;
	padding-bottom: 72px;
}
.ai-band h2 {
	font-size: clamp(1.45rem, 2.4vw, 1.9rem);
}

/* The landmarks timeline is now a keyboard-focusable region (tabindex="0", set on the
   block), so arrow keys can scroll it. The theme's focus ring only covers a and button;
   give the region the same 3px orange-mid ring. */
.lm-scroller:focus-visible {
	outline: 3px solid var(--orange-mid);
	outline-offset: -3px;
	border-radius: 14px;
}

/* Hero H1 highlight (2026-10-15): the highlighted phrase is now a whole quoted line
   ("that's interesting. tell me more"), not one word. page-home.css keeps the <em> on
   one line (nowrap) and draws its maroon bar as a single block, which overflowed on
   phones and wouldn't follow a wrap. Let it wrap, and draw the bar as a background
   that repeats on every line instead. */
.hero h1 em {
	white-space: normal;
	background: linear-gradient(transparent 68%, rgba(125, 40, 24, .55) 68%, rgba(125, 40, 24, .55) 90%, transparent 90%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.hero h1 em::after { content: none; }

/* ---- hero, 2026-10-15 (Rob): full width, desk photo, four-line H1 revealed line by line ---- */

/* The desk-and-coffee photo every babaLucas hero uses, under the same espresso scrim as
   the client portal (HeroPhoto.astro, --hero-scrim): warm-white text stays 14:1+.
   File: assets/img/hero-desk.webp (2048x1536, the portal's babalucas-background.webp). */
.hero {
	padding: 120px 0 104px;
	background:
		linear-gradient(180deg, rgb(21 10 6 / 72%), rgb(21 10 6 / 92%)),
		url(../img/hero-desk.webp) center / cover no-repeat,
		var(--bg);
}

/* The "complete solution" box moved out of the hero, so the copy gets the full width. */
.hero .wrap { grid-template-columns: 1fr; }
.hero-copy { max-width: 980px; }
.hero .lead { max-width: 38em; }

/* Four lines: "how do we tell your story" / "so people say," /
   "“that's interesting." / "tell me more”?" (each a span.hl in the H1). */
.hero h1 .hl { display: block; }

/* Hero motion (2026-10-15): the motion layer's anim-up + anim-blur classes on each H1
   line, the paragraph, the buttons and the California line (markup); this file only sets
   their tunables, so the story keeps its pauses. 5 seconds end to end:
     0.14s  "how do we tell your story"
     1.19s  "so people say,"                        (pause)
     2.43s  "“that's interesting; tell me more”?"   (longer pause; both lines together)
     3.19s  the underline draws under the quote
     4.05s  lead, buttons and the California line, together (longest pause)
   Reduced motion and no-JS visitors see it all at once (motion layer rules). */
.hero h1 .hl,
.hero .lead,
.hero .cta-row,
.hero .micro {
	--anim-duration: .95s;
	--anim-distance: .45em;
	--anim-ease: cubic-bezier(.2, .7, .2, 1);
}
.hero h1 .hl:nth-child(1) { --anim-delay: .14s; }
.hero h1 .hl:nth-child(2) { --anim-delay: 1.19s; }
.hero h1 .hl:nth-child(3),
.hero h1 .hl:nth-child(4) { --anim-delay: 2.43s; }
.hero .lead,
.hero .cta-row,
.hero .micro { --anim-delay: 4.05s; }

/* The maroon underline on the two quoted lines draws in left to right once the quote has
   landed. Not in the motion layer's vocabulary, so it stays a small local animation. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes bl-underline-in {
		from { background-size: 0% 100%; }
	}
	.hero h1 em {
		background-repeat: no-repeat;
		background-size: 100% 100%;
		animation: bl-underline-in .76s ease-out 3.19s both;
	}
}

/* ---- counters + the "complete solution" box, side by side (Rob, 2026-10-15) ----
   The box left the hero. It now sits on the right of the counters section in its
   original vertical card form (page-home.css .hero-card), with the three counters
   stacked vertically on the left. */
.trust { padding: 64px 0; }
.trust .wrap {
	display: grid;
	/* The box keeps the width it had in the hero (about 432px at full width); the
	   counters get the rest. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 432px);
	gap: 56px;
	align-items: center;
}
.trust .stats { display: grid; gap: 28px; }
/* Each counter: icon, then the orange bar with the number and its label
   (icons added 2026-10-16: floppy-disk, rocket-launch, battery-bolt; Classic Light, brand orange). */
.trust .stat {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	column-gap: 16px;
	align-items: center;
}
.trust .stat > .fa-light {
	grid-row: 1 / 3;
	font-size: 2.3rem; /* was 1.9rem; a little bigger (Rob, 2026-10-16) */
	line-height: 1;
	text-align: center;
}
.trust .stat > .gb-text:not(.fa-light) {
	display: block;
	grid-column: 2;
	padding-left: 20px;
	border-left: 3px solid var(--orange-dark);
}
@media (max-width: 900px) {
	.trust { padding: 48px 0; }
	.trust .wrap { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
	.hero { padding: 72px 0 64px; }
}

/* Third counter is a number now ("9,000+ cups of coffee, tea, and kombucha", 2026-10-15),
   so it matches the other two counters' size (page-home.css kept it smaller as a phrase). */
.trust .gb-text-stat3n b { font-size: 1.8rem; line-height: 1.7; }

/* Service-card icons ("everything your organization needs"), a little bigger on the
   homepage (Rob, 2026-10-16): 1.875rem (30px, babalucas-tokens.css) -> 2.25rem (36px). */
.card .t .fa-light { font-size: 2.25rem; }