/*
 * The GBT protocol page.
 *
 * The third per-page stylesheet, enqueued only where it is used (plan section
 * 1.1, engineering standards section 7). It loads after components.css and may
 * build on both it and tokens.css; like both of them it declares no colour of
 * its own.
 *
 * MOBILE FIRST, READ BACKWARDS FROM THE MOCKUP. The mockup is authored
 * desktop-first. This page needs almost none of that translation, and the
 * reason is worth stating rather than leaving as an absence: the whole layout
 * is one column of cards, and each card is a single `auto-fit` grid that finds
 * its own second column around 714 px. Measured, not assumed - at 390 px the
 * card resolves to one 326 px track and at 800 px to two 336 px tracks, with no
 * media query anywhere in between. Adding a breakpoint of our own here would
 * move a boundary the design already places correctly.
 *
 * WHAT WAS SNAPPED TO THE CANON, and why each one is written down rather than
 * quietly rounded:
 *
 *   RADII. Three bands only - 12-16 for icon boxes, 20-28 for cards, 999 for
 *   pills (sypsena-design SKILL.md, the shapes section), enforced as qa-tokens
 *   T4. This mockup reaches outside them twice: the mint and ink panels clamp
 *   to 32, and every step's media block sits at 18. They move to the nearest
 *   value inside the band - 32 -> 28 and 18 -> 20 - the mapping WPS-020 and
 *   WPS-021 already used.
 *
 *   THE PHOTOGRAPHS' BACKING COLOUR. The mockup paints pure black behind three
 *   step photographs and the pale cool grey of --tint-stripe-a behind the
 *   fourth. Pure black is not in the palette, and a bare hex outside tokens.css
 *   is a review error (plan section 1.1). All four take --color-ink, which is
 *   the palette's black and matches what those four pictures actually are -
 *   dark studio frames. The colour is only ever visible while the file is still
 *   arriving, since the box declares its own height and the image covers it.
 *
 *   THE EYEBROW OVER THE MINT PANEL. The shared .eyebrow paints in
 *   --text-link, which is the accent blue. On mint that pairing is not one the
 *   palette cleared; --color-mint-ink is, at 4.54:1, and it is the colour the
 *   mockup draws. Only the colour is overridden - the size, the tracking and
 *   the capitals stay shared.
 *
 * WHAT IS DELIBERATELY ABSENT. The mockup ships a resize listener and a
 * `renderVals()` that returns `narrow` / `isDesktop` / `stickyVisible` with
 * nothing in the markup bound to any of them - finding AS-76. It is dead in the
 * mockup and it is not carried over: this page needs no JavaScript at all.
 */

/* ---------------------------------------------------------------------------
 * Section rhythm
 *
 * Identical to the other two pages': no space above, a generous gap below, and
 * the shared 1100 px container. The hero opens the page, so it has space above
 * the fold as well, and the call to action closes it, so its gap is the larger
 * one.
 */

.bh-section {
	padding-block: 0 clamp( 32px, 5vw, 56px );
}

.bh-cta {
	padding-block: 0 clamp( 40px, 6vw, 72px );
}

/* ---------------------------------------------------------------------------
 * Hero
 *
 * The one band on the page that is not on the 1100 px grid: the mockup caps it
 * at 1000 px. That is a second WIDTH, not a second grid - 1000 px is one of the
 * narrow widths the measurer knows (scripts/qa/lib/canon.mjs NARROW_MAX_WIDTHS),
 * this is the only element that uses it, and everything inside is centred, so
 * no edge in the hero is supposed to line up with anything below it.
 */

.bh-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 1000px;
	padding-block: clamp( 28px, 5vw, 60px ) clamp( 20px, 3vw, 36px );
	gap: var( --space-4 );
	text-align: center;
}

.bh-hero__pill {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: var( --space-2 ) var( --space-4 );
	background: var( --tint-ice );
	border-radius: var( --radius-pill );
	color: var( --color-accent-text );
	font-size: var( --fs-eyebrow );
	font-weight: var( --fw-bold );
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
}

/*
 * Smaller than the shared h1 - clamp( 36px, 5.4vw, 56px ) - because this page
 * opens on a centred single column rather than beside a photograph, and the
 * mockup sizes it for that. The type scale is unchanged; only this heading's
 * clamp is.
 */
.bh-hero__title {
	max-width: 760px;
	margin: 0;
	font-size: clamp( 32px, 5.2vw, 52px );
}

/* The highlighted half of the heading, coloured by position: the translated
 * string carries a bare <span> so that no ASCII quotation mark ends up inside
 * it (qa-grep G5). */
.bh-hero__title span {
	color: var( --text-link );
}

.bh-hero__title-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --space-2 );
}

.bh-hero__location {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	gap: 6px;
	color: var( --text-link );
	font-size: var( --fs-sm );
	font-weight: var( --fw-bold );
	text-decoration: none;
}

.bh-hero__location:hover {
	color: var( --text-heading );
	text-decoration: none;
}

.bh-hero__location .material-symbols-outlined {
	font-size: 18px;
}

.bh-hero__lead {
	max-width: 640px;
	margin: 0;
	color: var( --text-body );
	font-size: clamp( 16px, 2vw, 19px );
	line-height: var( --lh-body );
}

/*
 * Four technology marks shared with the front page. The EMS wordmark is wider
 * than the three circular marks, so keep it shorter while preserving aspect
 * ratios; flex-wrap lets them reflow on narrow phones.
 */
.bh-hero__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: var( --space-1 ) 0 0;
	gap: var( --space-6 );
}

.bh-hero__badges img {
	flex: 0 0 auto;
	width: auto;
	height: clamp( 68px, 7.5vw, 80px );
	object-fit: contain;
}

.bh-hero__badges .bh-hero__badge--wide {
	flex: 0 1 auto;
	max-width: 40vw;
	height: clamp( 38px, 4.8vw, 50px );
}

/* ---------------------------------------------------------------------------
 * The method, in Diana's own voice
 */

.bh-method__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: clamp( 22px, 3.5vw, 40px );
	background: var( --color-mint );
	border-radius: clamp( 20px, 2.5vw, 28px );
	gap: 14px;
	text-align: center;
}

/* Colour only - see the note at the top of the file. */

.bh-method__quote {
	max-width: 780px;
	margin: 0;
	color: var( --text-heading );
	font-size: clamp( 18px, 2.4vw, 24px );
	font-weight: var( --fw-medium );
	line-height: var( --lh-snug );
	text-wrap: pretty;
}

.bh-method__sign {
	color: var( --color-mint-ink );
	font-size: clamp( 22px, 3vw, 27px );
	line-height: 1.1;
}

/* ---------------------------------------------------------------------------
 * The eight steps
 *
 * One column of cards; each card splits itself in two when it has the room.
 * `minmax( min( 100%, 300px ), 1fr )` is the mockup's own rule and the reason
 * there is no breakpoint here: below the width where two 300 px tracks and the
 * gap fit, `min( 100%, 300px )` collapses to the card's own width and the grid
 * resolves to a single track.
 */

.bh-steps {
	display: flex;
	flex-direction: column;
	gap: clamp( 14px, 2vw, 20px );
}

.bh-step {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 300px ), 1fr ) );
	align-items: center;
	padding: clamp( 16px, 2.5vw, 26px );
	background: var( --surface-card );
	border-radius: var( --radius-xl );
	box-shadow: var( --shadow-card );
	gap: clamp( 16px, 3vw, 32px );
}

/*
 * Every card declares the same media height so the list keeps a stable rhythm
 * while its photographs load.
 */
.bh-step__media {
	position: relative;
	height: clamp( 190px, 24vw, 260px );
	margin: 0;
	overflow: hidden;
	background: var( --tint-mist );
	border-radius: var( --radius-lg );
}

.bh-step__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bh-step__body {
	display: grid;
	grid-template-columns: 80px minmax( 0, 1fr );
	align-items: center;
	column-gap: 14px;
	row-gap: 10px;
}

.bh-step__photo--portrait {
	position: absolute;
	top: 50%;
	left: 4%;
	width: 92%;
	height: auto;
	transform: translateY( -50% );
}

.bh-step__photo--airflow {
	transform: scale( 1.42 );
	transform-origin: 50% 100%;
}

.bh-step__marker {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	width: 64px;
	height: 64px;
}

.bh-step__illustration {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: contain;
}

.bh-step__index {
	position: absolute;
	right: -14px;
	bottom: -4px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: content-box;
	width: 28px;
	height: 28px;
	border: 3px solid var( --surface-card );
	border-radius: 50%;
	background: var( --color-ink );
	color: var( --surface-card );
	font-size: 15px;
	font-weight: var( --fw-black );
}

/*
 * Smaller than the shared h2 - clamp( 26px, 3.6vw, 38px ) - because eight of
 * them stack down one page: at the section size the list would read as eight
 * sections rather than eight steps of one. The level is unchanged, and that is
 * the part that matters here (finding AS-43).
 */
.bh-step__title {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-size: clamp( 19px, 2.4vw, 24px );
	line-height: 1.2;
}

.bh-step__text {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0;
	color: var( --text-body );
	font-size: var( --fs-sm );
	line-height: var( --lh-body );
}

/* ---------------------------------------------------------------------------
 * Closing call to action
 */

.bh-cta__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp( 28px, 4vw, 48px );
	background: var( --surface-inverse );
	border-radius: clamp( 20px, 2.5vw, 28px );
	gap: 18px;
	text-align: center;
}

.bh-cta__title {
	max-width: 620px;
	margin: 0;
	color: var( --color-surface );
	font-size: clamp( 24px, 3.4vw, 34px );
	line-height: 1.14;
}

/* White at reduced opacity over the ink panel, the same composited value the
 * front page's booking panel measures at 7.9:1. */
.bh-cta__lead {
	max-width: 520px;
	margin: 0;
	color: rgba( 255, 255, 255, 0.65 );
	font-size: var( --fs-sm );
	line-height: var( --lh-body );
}

.bh-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	gap: var( --space-3 );
}

/*
 * Both buttons are .btn, so the pill shape, the 44 px floor and the transition
 * stay shared; only the two colour pairs are local, because neither .btn--primary
 * (ink on light) nor .btn--secondary (white with a hairline) is legible on an
 * ink panel.
 *
 * White on ink is not a second copy of the sticky bar's black button: below
 * 921 px the bar carries the same action in the opposite colours, and this
 * section cannot hand the job over and disappear the way a hero can, because
 * the action is what the section is for (invariant I12).
 */
.bh-cta__primary {
	padding: 14px 26px;
	background: var( --color-surface );
	color: var( --text-heading );
}

.bh-cta__primary:hover {
	background: var( --color-accent-strong );
	color: var( --color-surface );
}



.bh-cta__actions .material-symbols-outlined {
	flex: 0 0 auto;
	font-size: 18px;
}

/* ---------------------------------------------------------------------------
 * 2026-09-27 rebuild: hero visit line, section heads, adaptations, before and
 * after, FAQ pointer (Storybook reference informacine-v2-2026-09-27b).
 */
.bh-hero__visit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --space-2 );
}

.bh-hero__person {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	color: var( --text-link );
	font-weight: var( --fw-bold );
	text-decoration: none;
}

.bh-hero__person:hover span {
	text-decoration: underline;
}

.bh-hero__person img {
	width: 144px;
	height: 144px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var( --border-hairline );
	object-fit: cover;
	object-position: 50% 26%;
}

.bh-hero__price,
.bh-hero__note {
	margin: 0;
	color: var( --text-body );
}

.bh-hero__price {
	font-size: clamp( 19px, 2.4vw, 23px );
}

.bh-hero__price strong {
	color: var( --text-heading );
	font-size: 1.2em;
	font-weight: var( --fw-black );
}

.bh-hero__note {
	max-width: 480px;
	color: var( --text-meta );
	font-size: var( --fs-sm );
	line-height: var( --lh-body );
	text-wrap: pretty;
}

.bh-link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	min-height: 44px;
	color: var( --text-link );
	font-weight: var( --fw-bold );
	text-decoration: none;
}

.bh-hero .bh-link {
	align-self: center;
}

.bh-link:hover {
	text-decoration: none;
}

.bh-link .material-symbols-outlined {
	font-size: 18px;
}

.bh-intro {
	padding-top: clamp( 8px, 1.5vw, 16px );
}

.bh-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --space-3 );
	text-align: center;
}

.bh-head h2,
.bh-title {
	margin: 0;
	font-size: clamp( 24px, 3.4vw, 34px );
	line-height: 1.14;
}

.bh-title {
	margin-bottom: clamp( 14px, 2vw, 20px );
	text-align: center;
}

.bh-head p {
	max-width: 720px;
	margin: 0;
	color: var( --text-body );
	font-size: clamp( 15.5px, 1.9vw, 17px );
	line-height: var( --lh-body );
	text-wrap: pretty;
}

.bh-intro .bh-method__panel {
	margin-block: clamp( 18px, 2.6vw, 28px );
}

.bh-intro .bh-method__quote {
	max-width: 720px;
	font-size: clamp( 17px, 2.2vw, 21px );
	font-style: italic;
}

.bh-adapt__list {
	display: flex;
	flex-direction: column;
	max-width: 800px;
	margin: 0 auto;
	gap: var( --space-3 );
}

.bh-acc {
	background: var( --surface-card );
	border: 1px solid var( --border-hairline );
	border-radius: var( --radius-lg );
	box-shadow: var( --shadow-soft );
}

.bh-acc summary {
	display: flex;
	align-items: center;
	gap: var( --space-3 );
	min-height: 44px;
	padding: 16px clamp( 14px, 2vw, 22px );
	color: var( --text-heading );
	font-size: clamp( 16px, 2vw, 18px );
	font-weight: var( --fw-bold );
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

.bh-acc summary::-webkit-details-marker {
	display: none;
}

.bh-acc__icon {
	flex: 0 0 auto;
	margin-left: auto;
	color: var( --text-link );
	font-size: 22px;
	transition: transform 0.2s ease;
}

.bh-acc[open] .bh-acc__icon {
	transform: rotate( 180deg );
}

.bh-acc p {
	margin: 0;
	padding: 0 clamp( 14px, 2vw, 22px ) 18px;
	color: var( --text-body );
	font-size: 15.5px;
	line-height: var( --lh-body );
}

.bh-acc__answer {
	padding: 0 clamp( 14px, 2vw, 22px ) 18px;
}

.bh-acc__answer p {
	padding: 0;
}

.bh-acc__answer .bh-link {
	display: flex;
	width: fit-content;
	margin-top: 4px;
	text-decoration: none;
}

.bh-around__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 300px ), 1fr ) );
	gap: clamp( 12px, 2vw, 20px );
}

.bh-around__card {
	display: flex;
	flex-direction: column;
	padding: clamp( 18px, 2.6vw, 26px );
	background: var( --surface-card );
	border-radius: var( --radius-lg );
	box-shadow: var( --shadow-card );
	gap: 10px;
}

.bh-around__card > p {
	margin: 0;
	color: var( --text-body );
	font-size: 15.5px;
	line-height: var( --lh-body );
}

.bh-around__card > .bh-around__head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bh-around__list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding-left: 20px;
	color: var( --text-body );
	font-size: 15.5px;
	line-height: var( --lh-body );
}

.bh-around__head .material-symbols-outlined {
	color: var( --text-link );
	font-size: 24px;
}

.bh-around__head--leaf .material-symbols-outlined {
	color: var( --color-green-ink );
}

.bh-around__title {
	color: var( --text-heading );
	font-size: clamp( 17px, 2.1vw, 20px );
	font-weight: var( --fw-black );
}

.bh-help__card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 800px;
	margin: 0 auto;
	padding: clamp( 18px, 2.4vw, 24px );
	background: var( --surface-card );
	border: 1px solid var( --border-hairline );
	border-radius: var( --radius-lg );
	box-shadow: var( --shadow-soft );
	gap: 14px 20px;
}

.bh-help__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: var( --tint-ice );
	border-radius: 50%;
	color: var( --color-accent-text );
	font-size: 24px;
}

.bh-help__copy {
	display: flex;
	flex: 1 1 220px;
	flex-direction: column;
	min-width: 0;
	gap: 3px;
}

.bh-help__copy p {
	margin: 0;
	color: var( --text-meta );
	font-size: var( --fs-sm );
	line-height: var( --lh-body );
}

.bh-help__copy .bh-help__title {
	color: var( --text-heading );
	font-size: clamp( 16px, 2vw, 18px );
	font-weight: var( --fw-black );
}

.bh-help .bh-link {
	align-self: center;
}