/**
 * sigma/hero (C1) -- full-bleed hero band. Loaded only where the block
 * renders (block.json "style" field).
 *
 * Rebuilt 2026-09-08 to the client's five comps, section S00 of each
 * docs/qa/comp-spec/SPEC-*.md (1 unit = 1 CSS px at a 1440 viewport).
 * Every comp opens the same way: the team photograph under a flat navy
 * wash, the nav riding over the top 78px, a centred 70px Cormorant
 * Garamond Bold headline with one italic gold phrase, and a 316x33
 * white-outlined button under it. The numbers below are the comp's, and
 * where a number is not a token it is named here with the comp line it
 * comes from so a reviewer can check it against the spec, not against
 * this file.
 *
 * Not nested inside sigma/section (see render.php's header comment), so
 * this owns its own full-bleed-band + reading-column split. .hero
 * carries the background and the vertical geometry, .hero__inner the
 * reading width -- the same separation assets/css/section.css uses, for
 * the same reason.
 *
 * Vertical model. The comp is not centred: with only a headline and a
 * button the content block spans y=269..486 in a 580 band (SPEC-home
 * S00: headline line boxes 269-423, button 452.7-485.7), whose midpoint
 * is 377.5 -- below both the band's centre (290) and the centre of the
 * area under the nav (329). The Copy Master adds an eyebrow above the
 * headline and a paragraph below it that the comp does not draw, so a
 * fixed headline position would push Home's buttons out of the 580
 * band. So on a page with a comp the content is centred on the comp's
 * own midpoint instead (.hero--vcomp; everywhere else the content simply
 * centres in the strip under the nav -- see that rule for why):
 * padding-top = 78 (nav) + 121 = 199, and the bottom padding is
 * whatever keeps the centring region's floor at 556 for every band
 * height (580 - 24, 604 - 48, 567 - 11). The comp's content then lands
 * on its exact coordinates, and Home's fuller stack (eyebrow, two-line
 * headline, three-line paragraph, micro-text, buttons) centres on the
 * same point and still finishes inside 580. The three band heights are
 * the comps' own: 580 Home, 604 Sell Your Business / Industries, 567
 * About Us / Our Offices.
 *
 * Contrast. The comp's wash is navy at 0.62 (measured: least-squares fit
 * of the comp band against the source photograph, alpha 0.617, flat in
 * every row -- there is no gradient). White text over it clears 4.5:1
 * everywhere (the brightest patch behind the copy composites to about
 * #59668a, 7.6:1 against white). The gold accent is display text (70px
 * bold, WCAG "large"), so its threshold is 3:1; it measures 3.4:1 over
 * the band's average and drops to ~2.2:1 over that one brightest patch.
 * That is the designer's comp reproduced as asked, recorded here rather
 * than quietly darkened.
 *
 * Button chrome (padding, border, type, the shared .sigma-button--inverse
 * navy-band swap) now lives once in assets/css/base.css -- this file used
 * to carry its own full copy, along with five other blocks, and that
 * per-block drift is what QA reported as "button sizing". What stays
 * here is only .sigma-button.hero__button's min-width: the one thing
 * that is genuinely about a hero button.
 */

.hero {
	/* Comp S00 band height; overridden by the .hero--height-* variants. */
	--hero-height: 580px;
	/* The nav's reserved strip: its 0.75px rule sits at y=78.3 on every
	   comp (SPEC-*.md S00 RULE). The header overlays this strip, so the
	   hero leaves it clear. */
	--hero-nav-reserve: 78px;
	/* Where the centring region ends -- see the vertical model above. */
	--hero-content-floor: 556px;

	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--hero-height);
	overflow: hidden;
	/* Default: centred in the strip under the nav. Only the ten pages the
	   client drew get the comp's own off-centre placement, and they ask
	   for it by name -- see .hero--vcomp. */
	padding-block: var(--hero-nav-reserve) 0;
}

/*
 * The comp's vertical model, for the pages that have a comp to be
 * measured against (the five SPEC-*.md pages and the five industry hubs,
 * which are built to SPEC-industries). The layout asks for it with
 * opts.vertical "comp".
 *
 * 121px is the comp's own offset from the nav rule to the top of the
 * centring region; not a token because it is a comp coordinate, not a
 * rhythm value.
 *
 * Why this is no longer the default (QA 811). The region it centres in
 * is [199, 556] of a 580 band, so its midpoint is 377.5 -- 65% of the way
 * down. That is the designer's own midpoint and it is right for the stack
 * he drew (a headline and a button, 217px). Every page we build carries
 * the Copy Master's eyebrow and paragraph on top of that, and on the
 * fullest stacks -- Business Valuation and Exit Readiness, 358px measured
 * live -- the content runs 199..557 in a 581 band: 121px of air under the
 * nav and 24px under the buttons. The comps' absolute offsets survive a
 * copy change no better than their absolute heights did (see
 * stats-band/style.css and value-prop/style.css for the same lesson one
 * round earlier). So the offset stays only where a drawing exists to
 * defend it, and the other seventeen pages centre.
 */
.hero--vcomp {
	padding-block: calc(var(--hero-nav-reserve) + 121px) calc(var(--hero-height) - var(--hero-content-floor));
}

.hero--height-604 {
	--hero-height: 604px;
}

.hero--height-567 {
	--hero-height: 567px;
}

/*
 * Sized to its own content, for a page with no comp to be measured
 * against.
 *
 * The three heights above are comp band heights and are right wherever a
 * drawing exists. Contact Us has no drawing, and it carries the least
 * content of any hero on the site: a headline and one sentence, 145px
 * measured live, with no eyebrow and no button because the client's copy
 * for that box supplies neither. Held at the 580 default that left 435px
 * of empty navy under two lines of text, which reads as an unfinished
 * header rather than a designed one (Roman, 19 Sep).
 *
 * The floor is the nav strip plus the same padding top and bottom, so a
 * short stack sits in a band proportioned to it and a longer one still
 * grows the band exactly as every other hero does -- this only removes
 * the fixed minimum, it does not cap anything.
 */
.hero--height-content {
	--hero-height: 0px;

	padding-block: calc(var(--hero-nav-reserve) + var(--space-3xl)) var(--space-3xl);
}

.hero--bg-navy,
.hero--bg-photograph {
	background-color: var(--color-navy);
	color: var(--color-white);
}

.hero--bg-white {
	background-color: var(--color-white);
	color: var(--color-navy);
}

/*
 * 2026-09-07 fix (Location hero-background "width bug", docs/qa/M2-VISUAL.md
 * Wrong #12): a bare edge-to-edge hero directly followed by a navy
 * sigma/section (the white box between them empty and dropped by
 * engine.php) read as one navy band whose background narrows partway
 * down. Restoring the rhythm gap layout.css gives every other stacked
 * pair makes them read as two bands again. Scoped to hero-navy/photograph
 * immediately followed by a navy section, so it never fires once real
 * copy fills the middle box.
 */
.hero--bg-navy + .sigma-section--bg-navy,
.hero--bg-photograph + .sigma-section--bg-navy {
	margin-block-start: var(--space-2xl);
}

/*
 * 2026-09-07 fix (task 776, about-us "what is this empty blue section"):
 * the same bug one step more general -- two navy sigma/section instances
 * back to back merge into one block with the copy between them invisible
 * (measured live on about-us: stats band + CTA band ran together into one
 * 842px navy block). Kept next to the hero rule above because it is the
 * same underlying adjacency problem, and layout.css/section.css are
 * page-level files this block does not open.
 */
.sigma-section--bg-navy + .sigma-section--bg-navy {
	margin-block-start: var(--space-2xl);
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * The comp places the 3000x2000 photograph at x=0 y=-80 w=1440 h=960
 * (SPEC-home S00 IMAGE): full width, cropped to the band, pushed up 80px.
 * object-fit: cover reproduces the 1440x960 fit at 1440; the vertical
 * position is 80 / (960 - 580) = 21% of the overflow, which is also what
 * the 604 and 567 comps resolve to within a point.
 */
.hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 21%;
}

/*
 * Flat wash, not a gradient -- the comp measures the same alpha in every
 * row (see the header). rgba(10,26,84,*) is --color-navy's own RGB
 * triplet: a custom property alone cannot express a photo-blended alpha
 * colour, the same reason design/tokens.json's shadow.focus token
 * carries a literal rgba.
 */
.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgba(10, 26, 84, 0.62);
}

.hero__inner {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--space-lg);
	text-align: center;
}

@media (min-width: 768px) {
	.hero__inner {
		padding-inline: var(--space-xl);
	}
}

/*
 * The Copy Master's eyebrow: 12px uppercase Montserrat, tracked 0.12em,
 * in the band's text colour (white over the photo/navy, navy on white).
 * The comps do not draw one, so it takes the nav label's size and sits
 * on the headline's top margin.
 */
.hero__eyebrow {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-sans);
	font-size: var(--text-nav-label);
	font-weight: var(--weight-sans-regular);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: inherit;
}

/*
 * 70px Cormorant Garamond Bold at a 77px line pitch (SPEC: lines at
 * y=265 and 342), centred. The width cap decides where the headline
 * wraps: the Home and Our Offices comps hold their two lines inside
 * ~640px ("Expert guidance for the" is 627 wide), the Sell Your
 * Business, Industries and About Us comps run their lines out to
 * ~1000px ("with calculated moves for top value." is 956 wide). The
 * layout picks per page through the headline_width field; the narrow
 * value is the default because it is what the Home comp does.
 *
 * The caps are 680 and 1040, not 640 and 1000: the Cormorant Garamond
 * cut this theme ships measures about 4% wider than the designer's
 * ("Expert guidance for the" is 650px here by canvas measureText, and
 * the Industries comp's 994px line comes out at ~1030), so the comp's
 * own caps would break its own lines one word early. Each cap is the
 * smallest round value that keeps every comp line intact while still
 * breaking where the comp breaks.
 */
.hero__headline {
	max-width: 680px;
	margin: 0;
	/*
	 * Balanced line lengths instead of greedy ones (QA 810). A greedy wrap
	 * fills each line to the cap and leaves whatever is left on the last
	 * one, which on a two-line headline reads as a hanging word: "Selling
	 * someday? Start / today.", "He sold his own business / first.". It got
	 * worse when the gold phrase went in, because the italic face measures
	 * differently and moved several breaks by a word. Measured against all
	 * nine drawn pages before turning it on: the four with a comp headline
	 * (Home, About Us, Sell Your Business, Our Office) do not move at all,
	 * the five hubs break at their sentence boundary instead of mid-clause.
	 * Unsupported browsers ignore the property and get the greedy wrap.
	 */
	text-wrap: balance;
	font-family: var(--font-serif);
	font-size: var(--text-hero);
	font-weight: var(--weight-serif-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-heading);
	color: inherit;
}

.hero--headline-wide .hero__headline {
	max-width: 1040px;
}

/*
 * The accent phrase is Cormorant Garamond Bold Italic in gold on every
 * background -- the comps use #D8991B at display size on white too
 * (docs/COMPOSITION.md, "Things this plan decides"). About Us and Our
 * Offices draw their second line in the brighter #EB9112 instead; the
 * accent_tone field switches to it.
 */
.hero__accent {
	font-style: italic;
	font-weight: var(--weight-serif-italic);
	color: var(--color-gold);
}

.hero--accent-bright .hero__accent {
	color: var(--color-gold-bright);
}

/* 20px body at the 1.1 pitch, centred, inside 720px (docs/COMPOSITION.md,
   Home 1: "Paragraph centred under it, 20px, max 720px"). */
.hero__supporting {
	max-width: 720px;
	margin: var(--space-md) 0 0;
	font-family: var(--font-serif);
	font-size: var(--text-body);
	font-weight: var(--weight-serif-regular);
	line-height: var(--leading-body);
	color: inherit;
}

/*
 * Buttons sit 32px under whatever precedes them: from the headline's
 * line box (bottom 423) that puts the comp's button top at 455 against
 * its 452.7. Two buttons stand side by side with a 24px gap; align-items
 * flex-end keeps a plain button level with a micro-text group's button.
 */
.hero__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	gap: var(--space-md);
	margin-top: var(--space-lg);
}

/*
 * Wraps a button together with its optional micro-text so the caption
 * stacks above just that one button (COMPONENTS.md C1) -- only emitted
 * by render.php when this button carries micro_text.
 */
.hero__button-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
}

.hero__button-micro {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-micro);
	font-weight: var(--weight-sans-regular);
	line-height: var(--leading-body);
	color: inherit;
}

/*
 * The comp's hero button (SPEC S00 BOX 316.2x33.0; "START THE
 * CONVERSATION" measures 251px here against the comp's 247-252). 316 is
 * a minimum, not a fixed width: the Sell Your Business and Industries
 * comps draw their longer labels in 364.4-wide boxes (SPEC-sell-your-
 * business, SPEC-industries S00 BOX), i.e. the box grows with the
 * label, which is what "Get Your Confidential Valuation" needs to stay
 * on one line. Padding, border, type and the .sigma-button--inverse
 * navy-band swap are assets/css/base.css's shared .sigma-button rule;
 * this is only the size.
 */
.sigma-button.hero__button {
	min-width: 316px;
}

/*
 * There is deliberately no filled button variant. The client's copy
 * labels the first hero button "solid", but DESIGN.md line 211 states
 * the outline button is "the only button style in the system" and none
 * of the five comps draws a filled button anywhere. A filled variant was
 * briefly built and backed out.
 */

/*
 * Between 768 and 1023 the band keeps the comp's vertical model but the
 * headline steps down to 56px: at 70px the Sell Your Business comp copy
 * runs to four lines in a 672px column (measured at 768) and pushes the
 * band past its own height, which is the one place the comp geometry
 * breaks before the phone layout takes over. 56px is 70 scaled by the
 * column (672 / 1040 of the wide cap, rounded to the 8px grid); there is
 * no tablet display token to name it by.
 */
@media (max-width: 1023px) {
	.hero__headline {
		font-size: 3.5rem;
	}
}

/*
 * Below 768 the comp geometry has nothing to say (there is no mobile
 * comp), so the band drops the fixed centring offsets and stacks like
 * any other section: the nav strip stays clear, the headline steps down
 * to 40px, and each button becomes a full-width 44px tap target.
 */
@media (max-width: 767px) {
	.hero {
		min-height: 0;
		padding-block: calc(var(--hero-nav-reserve) + var(--space-xl)) var(--space-2xl);
	}

	.hero__headline {
		/* 40px: the 70px display size scaled for a 375 viewport. There is
		   no mobile display token; --text-quote happens to be 2.5rem but
		   means something else. */
		font-size: 2.5rem;
	}

	.hero__buttons {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.hero__button-group {
		align-items: stretch;
		width: 100%;
	}

	/* Full width, and a long label may wrap: the box grows past 44px
	   rather than overflowing the column. */
	.sigma-button.hero__button {
		width: 100%;
		min-width: 0;
		height: auto;
		min-height: 44px;
		padding: var(--space-xs) var(--space-sm);
		white-space: normal;
	}
}

/*
 * Two-line headline. The client's About Us and Our Office documents draw
 * the headline as two lines in different styles -- "Get to Know" in white
 * italic over "Sigma Mergers & Acquisitions" in gold, and "Our Office"
 * upright over "We work where you work." in gold italic. Both lines keep
 * the headline's own size and leading; only colour and slant differ, so
 * there is nothing here but those two properties.
 */
.hero__headline-line-one,
.hero__headline-line-two {
	display: block;
}

.hero__headline-line-one--italic {
	font-style: italic;
}

.hero__headline-line-two--gold,
.hero__headline-line-two--gold-italic {
	color: var(--color-gold);
}

.hero__headline-line-two--gold {
	font-style: normal;
}

.hero__headline-line-two--gold-italic {
	font-style: italic;
}