/* =============================================================================
   EDUTOURS — THE FRONT-PAGE HERO
   Loaded on the front page only, after shema.css.
   =============================================================================

   THE ARGUMENT
   ------------
   A hero has one job: in the first second, place the brand. Everything below is
   in service of that and nothing here is decoration for its own sake.

   Four decisions carry the whole composition:

   1. THE GRADE IS DIRECTIONAL, NOT A WASH.
      Contrast is bought only where type sits. The scrim is deep down the left
      third, releases through the middle, and is gone by 92% across — so the lit
      ridge and the blue town stay visible on the right, which is the half of
      the frame nobody is reading. This was measured rather than guessed, and
      re-measured against the current photograph: sampling the real glyph
      rectangles over the background alone, the worst case across six widths is
      the gold headline at 5.75:1 (threshold 3 for display sizes) and the folio
      word at 6.26:1. There is no need to drown the picture.

   2. THE READING COLUMN IS ~680px AND STAYS THERE.
      Editorial measure, not viewport measure. The empty right is the design.

   3. THE DISPLAY FACE IS DRIVEN ON ITS OPTICAL AXIS.
      Fraunces here is a two-axis variable: opsz 9–144, wght 100–900. The
      headline is set at opsz 132 and wght 380 — high stroke contrast, hairline
      serifs, no weight. That combination is what a magazine cover looks like,
      and it is only reachable because the axis is there; a static face at the
      same size would read as a heavy web headline.

   4. MOTION IS CSS, NOT JAVASCRIPT.
      The opening sequence is six staggered keyframes on transform and opacity.
      It cannot leave the hero blank if a script fails, it needs no library, and
      it stays on the compositor. GSAP is left with the one thing it is actually
      needed for here: the scroll parallax.

   PALETTE NOTE
   ------------
   --hh-ink is a midnight navy below the charter's darkest blue. It is not a new
   brand colour: it is a *light* — the scrim through which the photograph is
   seen — in the same way shema.css already grades the tour hero. Nothing typed,
   drawn or filled on this page uses it as a surface colour.
   ========================================================================== */

.hhero {
	/* The scrim. Brand primary-dark pulled down into shadow.
	   Comma-separated on purpose: this token is consumed by rgba(), and
	   `rgba(3 26 48, .9)` — space-separated channels with a comma before the
	   alpha — is not valid CSS. The declaration is dropped silently, which
	   costs the entire grade and is invisible until you sample the pixels. */
	--hh-ink: 3, 26, 48;

	--hh-ivory: #F7F3EA;
	--hh-gold:  var(--color-accent);

	/* The reading column. Editorial measure — see decision 2. Held inside the
	   brief's 650–700px so the headline occupies about half the frame and the
	   right half stays photograph. */
	--hh-col: 43rem;          /* 688px */

	--hh-ease: cubic-bezier(.16, 1, .3, 1);

	position: relative;
	isolation: isolate;
	display: flex;
	align-items: stretch;
	/* One viewport, minus the bar above it — the header is sticky and in flow,
	   so without the subtraction the hero's foot always sits below the fold.

	   The 60rem ceiling is inside the min() rather than on its own line.
	   As a separate `max-height` it was dead code: when min-height resolves
	   larger than max-height the used value is the minimum, so on any display
	   taller than about 1035px the cap was silently discarded and the hero
	   grew with the screen. On a 1250px viewport that meant a 1174px hero for
	   roughly 640px of headline, eyebrow, lead and button — the rest was
	   photograph the composition never asked for, banked above and below the
	   reading column.

	   Folded into min() the ceiling actually binds: one viewport on a laptop,
	   960px on anything taller, and the hero stops chasing the screen. */
	min-height: min(calc(100svh - var(--et-header-h, 74px) - 1px), 60rem);
	padding-block: clamp(3rem, 7vh, 6rem);
	overflow: hidden;
	background: rgb(var(--hh-ink));
}

/* =============================================================================
   1. THE PHOTOGRAPH
   ========================================================================== */

.hhero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	will-change: transform;
}

.hhero__frame {
	position: absolute;
	/* Slightly oversized so the parallax drift never exposes an edge. */
	inset: -6% 0 -6%;
	transform-origin: 60% 45%;
}

.hhero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The sunlit break on the ridge sits a little right of centre; anchoring
	   there keeps it in frame as the viewport narrows, and leaves the town
	   climbing out from under the reading column rather than behind it. */
	object-position: 58% 50%;
}

/* =============================================================================
   2. THE GRADE
   Two layers. The horizontal one is load-bearing; the vertical one only seats
   the type against the white bar above and closes the foot of the frame.
   ========================================================================== */

.hhero__grade {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		/* The burn. A soft ellipse sitting under the reading column, the way a
		   retoucher would dodge and burn a plate rather than drop a panel over
		   it. The two linear layers below are frame-shaped; this one is
		   text-shaped, and it is what carries the tail of the gold headline —
		   measured on the render of the first source, "something" ended on
		   3.9:1 against open sky without it, and on better than 6:1 with it.
		   Still the binding constraint on the current photograph: the gold line
		   is the worst case there too, at 5.75:1. It has no edge, so it costs
		   the photograph nothing you can point at. */
		radial-gradient(118% 86% at 20% 54%,
			rgba(var(--hh-ink), .60) 0%,
			rgba(var(--hh-ink), .46) 34%,
			rgba(var(--hh-ink), .22) 55%,
			rgba(var(--hh-ink), .06) 72%,
			rgba(var(--hh-ink), 0) 86%),

		/* Vertical. This layer is only doing two jobs — seating the frame under
		   the white bar, and closing its foot — so it stays deliberately thin
		   through the middle, where the ridge and the blue town are. NOTE: this
		   thin middle is why the landscape master is cropped rather than used
		   whole (see _dev/genhero-home.py). With the full frame, the town fell
		   into the .44–.78 run at the foot and went to mud; nothing that can be
		   fixed here without giving up the closed foot. Its
		   first pass was roughly twice these values and the result was a navy
		   poster with a landscape faintly printed on it. */
		linear-gradient(180deg,
			rgba(var(--hh-ink), .46) 0%,
			rgba(var(--hh-ink), .15) 9%,
			rgba(var(--hh-ink), .03) 24%,
			rgba(var(--hh-ink), .02) 44%,
			rgba(var(--hh-ink), .17) 63%,
			rgba(var(--hh-ink), .44) 81%,
			rgba(var(--hh-ink), .66) 93%,
			rgba(var(--hh-ink), .78) 100%),

		/* Horizontal — the load-bearing one. 96deg rather than 90 so the edge
		   runs very slightly off-vertical: a perfectly upright boundary reads as
		   a panel, a raked one reads as light falling across the frame.

		   It stays deep to 40% and then releases fast. Measured on the render,
		   that leaves ivory at better than 9:1 everywhere type sits — there is
		   an enormous amount of headroom here, and spending it on darkness
		   rather than on the photograph would be the wrong trade. */
		linear-gradient(96deg,
			rgba(var(--hh-ink), .93) 0%,
			rgba(var(--hh-ink), .88) 26%,
			rgba(var(--hh-ink), .68) 41%,
			rgba(var(--hh-ink), .40) 55%,
			rgba(var(--hh-ink), .17) 67%,
			rgba(var(--hh-ink), .05) 79%,
			rgba(var(--hh-ink), 0) 89%);
}

/* The brass listel closing the hero onto the white band below. A single
   hairline, brightest under the reading column and fading out across the
   photograph — the one overtly Moroccan gesture in the composition, and it is
   1px tall. */
.hhero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	z-index: 4;
	background: linear-gradient(90deg,
		rgba(242, 201, 76, .55) 0%,
		rgba(242, 201, 76, .32) 38%,
		rgba(242, 201, 76, .10) 62%,
		transparent 88%);
}

/* =============================================================================
   3. THE MEASURED FRAME
   Three hairlines on the shell's twelve-column grid, over the photographic half
   only. Masked at both ends so they have no start and no finish.
   ========================================================================== */

.hhero__rules {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	translate: -50% 0;
	width: var(--t-shell);
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	pointer-events: none;
}

.hhero__rules span {
	width: 1px;
	justify-self: start;
	background: rgba(255, 255, 255, .085);
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 62%, transparent 92%);
	        mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 62%, transparent 92%);
}

/* =============================================================================
   4. LAYOUT
   ========================================================================== */

.hhero__shell {
	position: relative;
	z-index: 3;
	width: var(--t-shell);
	margin-inline: auto;
	display: flex;
	align-items: center;
}

.hhero__layout {
	display: grid;
	/* max-content, not auto. An `auto` track in a grid with no flexible track
	   absorbs all the free space when justify-content resolves to stretch —
	   which handed the 580px of intentional emptiness to the folio rail and
	   pushed the reading column onto the right of the frame, mirroring the
	   composition. max-content plus an explicit start keeps the rail one
	   character wide and leaves the space where it was designed to be. */
	grid-template-columns: max-content minmax(0, var(--hh-col));
	justify-content: start;
	gap: clamp(1.5rem, 3vw, 2.75rem);
	align-items: center;
	width: 100%;
}

/* =============================================================================
   5. THE FOLIO RAIL — the signature element
   ========================================================================== */

.hhero__rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .9rem;
	padding-block: .25rem;
	font-family: var(--et-font-body);
	font-size: .625rem;
	font-weight: 600;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
	user-select: none;
}

.hhero__rail-no {
	font-family: var(--et-font-head);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--hh-gold);
}

.hhero__rail-rule {
	width: 1px;
	height: 1.75rem;
	background: linear-gradient(180deg, rgba(242, 201, 76, .7), rgba(255, 255, 255, .18));
}

/* Vertical text, reading upward — the folio convention, and it keeps the rail
   one character wide however long the word is. */
.hhero__rail-word {
	writing-mode: vertical-rl;
	rotate: 180deg;
	line-height: 1;
	padding-block: .15rem;
}

/* The travelling line. This is also the scroll affordance: a full-viewport hero
   owes the visitor a hint that there is a page under it, and a second element
   saying SCROLL would have been a second signature. */
.hhero__rail-track {
	position: relative;
	width: 1px;
	height: clamp(3.5rem, 9vh, 5.5rem);
	background: rgba(255, 255, 255, .16);
	overflow: hidden;
}

.hhero__rail-track i {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 42%;
	background: linear-gradient(180deg, transparent, var(--hh-gold));
	transform: translate3d(0, -100%, 0);
	animation: hh-track 3.4s var(--hh-ease) 1.9s infinite;
}

@keyframes hh-track {
	0%        { transform: translate3d(0, -100%, 0); }
	55%, 100% { transform: translate3d(0, 240%, 0); }
}

/* =============================================================================
   6. TYPOGRAPHY
   ========================================================================== */

.hhero__eyebrow {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin: 0 0 clamp(1.25rem, 2.4vh, 1.85rem);
	font-family: var(--et-font-body);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--hh-gold);
}

/* The separator: a 4px lozenge, not a bullet. A bullet is a list marker; a
   lozenge is a typographic ornament, and at this size it is the only geometry
   on the page that nods to zellige without drawing a tile. */
.hhero__lozenge {
	width: 4px;
	height: 4px;
	flex-shrink: 0;
	rotate: 45deg;
	background: var(--hh-gold);
	opacity: .85;
}

.hhero__title {
	margin: 0 0 clamp(1.25rem, 2.6vh, 2rem);
	font-family: var(--et-font-head);
	/* 84px at 1440, 45px on a phone. The cap is what keeps the line from
	   becoming a banner on a 27-inch display. */
	font-size: clamp(2.8125rem, 5.85vw, 5.5rem);
	line-height: .96;
	letter-spacing: -.035em;
	font-optical-sizing: none;
	color: var(--hh-ivory);
}

/* Each line gets its own edge to rise from. */
.hhero__mask {
	display: block;
	overflow: hidden;
	/* Fraunces overshoots its em box at display sizes; without the padding the
	   mask clips the descender of the "g" in "something". */
	padding-block: .06em .12em;
	margin-block: -.06em -.12em;
}

.hhero__line {
	display: block;
	will-change: transform;
}

/* See decision 3 in the header note. wght is named explicitly alongside opsz
   because naming one axis in font-variation-settings drops the other back to
   the file's default — which for this subset is 900. */
.hhero__line--a {
	font-variation-settings: "opsz" 132, "wght" 340;
	/* Optical, not metric. The crossbar of a cap T overhangs its stem, so a T
	   set flush left reads as indented beside the lowercase t on the line
	   below. Hanging it by a hundredth of an em squares the left edge to the
	   eye — which is the edge that matters. */
	margin-left: -.012em;
}

.hhero__line--b {
	color: var(--hh-gold);
	font-variation-settings: "opsz" 132, "wght" 400;
	/* The gold line carries the sentence, so it is given a hair more presence
	   than the ivory one — weight rather than size, so the baseline grid holds. */
}

.hhero__lead {
	max-width: 38.75rem;   /* 620px, per brief */
	margin: 0 0 clamp(1.75rem, 3.4vh, 2.5rem);
	font-family: var(--et-font-body);
	font-size: clamp(1.0625rem, .9rem + .3vw, 1.1875rem);
	line-height: 1.72;
	letter-spacing: -.003em;
	color: rgba(247, 243, 234, .88);
	text-wrap: pretty;
}

/* =============================================================================
   7. THE BUTTONS
   Two surfaces, one level of craft. The ghost is not an outline: it is a real
   translucent surface with a lit top edge, so it reads as glass over the
   photograph rather than as a border drawn on nothing.
   ========================================================================== */

.hhero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.hbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .625rem;
	padding: 1.0625rem 1.9rem;
	border: 1px solid transparent;
	border-radius: 100px;
	font-family: var(--et-font-body);
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: .005em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .5s var(--hh-ease), background-color .4s var(--hh-ease),
	            border-color .4s var(--hh-ease), box-shadow .5s var(--hh-ease),
	            color .4s var(--hh-ease);
}

.hbtn:focus-visible {
	outline: 2px solid var(--hh-gold);
	outline-offset: 3px;
}

/* Gold always carries ink. White on gold is 1.59:1 and the charter forbids it. */
.hbtn--gold {
	background: var(--hh-gold);
	color: var(--color-text-primary);
	box-shadow: 0 1px 2px rgba(20, 14, 0, .18),
	            0 14px 32px -14px rgba(242, 201, 76, .8);
}
.hbtn--gold:hover {
	background: #F6D368;
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(20, 14, 0, .2),
	            0 22px 46px -16px rgba(242, 201, 76, .9);
}
.hbtn--gold:active { transform: translateY(0); }

.hbtn__arrow {
	transition: transform .5s var(--hh-ease);
}
.hbtn--gold:hover .hbtn__arrow { transform: translateX(4px); }

.hbtn--ghost {
	background: rgba(247, 243, 234, .07);
	border-color: rgba(247, 243, 234, .28);
	color: var(--hh-ivory);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* The lit top edge — one inset hairline. It is the difference between a glass
   surface and a rectangle with a border. */
.hbtn--ghost::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

.hbtn--ghost:hover {
	background: rgba(247, 243, 234, .14);
	border-color: rgba(247, 243, 234, .5);
	color: #fff;
	transform: translateY(-2px);
}
.hbtn--ghost:active { transform: translateY(0); }

/* =============================================================================
   8. THE OPENING
   Six steps. Nothing bounces, nothing overshoots, nothing moves more than 20px.
   ========================================================================== */

@keyframes hh-media {
	from { opacity: 0; transform: scale(1.075) translate3d(0, 1.6%, 0); }
	to   { opacity: 1; transform: scale(1.008) translate3d(0, 0, 0); }
}

@keyframes hh-rise {
	from { opacity: 0; transform: translate3d(0, 1.35rem, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes hh-lift {
	from { transform: translate3d(0, 108%, 0); }
	to   { transform: none; }
}

@keyframes hh-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.hhero__frame  { animation: hh-media 2200ms var(--hh-ease) both; }
.hhero__eyebrow{ animation: hh-rise  1100ms var(--hh-ease)  340ms both; }
.hhero__line--a{ animation: hh-lift  1250ms var(--hh-ease)  480ms both; }
.hhero__line--b{ animation: hh-lift  1250ms var(--hh-ease)  610ms both; }
.hhero__lead   { animation: hh-rise  1100ms var(--hh-ease)  840ms both; }
.hhero__cta    { animation: hh-rise  1100ms var(--hh-ease)  980ms both; }
.hhero__rail   { animation: hh-fade  1400ms var(--hh-ease) 1180ms both; }
.hhero__rules  { animation: hh-fade  2000ms var(--hh-ease) 1300ms both; }

/* =============================================================================
   9. THE HEADER ABOVE IT
   The bar stays white — the wordmark is brand blue and floating it over the
   photograph puts it at about 1.4:1. What changes is the join: a brass hairline
   under the bar, so the two surfaces meet on a drawn edge instead of simply
   stopping.
   ========================================================================== */

.home.et-tour .et-header {
	border-bottom-color: transparent;
	box-shadow: inset 0 -1px 0 rgba(242, 201, 76, .38);
}
.home.et-tour .et-header.is-stuck {
	box-shadow: inset 0 -1px 0 rgba(242, 201, 76, .28),
	            0 2px 14px rgba(1, 26, 48, .10);
}

/* =============================================================================
   10. RESPONSIVE
   The desktop composition is the structural case; each step below is a
   deliberate recomposition rather than a scale.
   ========================================================================== */

/* Laptop — the rail loses its gutter, so the column takes the space back. */
@media (max-width: 1180px) {
	.hhero { --hh-col: 38rem; }
	.hhero__rules span:nth-child(1) { display: none; }
}

/* Tablet — the headline stops leading and starts sharing. */
@media (max-width: 900px) {
	.hhero {
		--hh-col: 34rem;
		max-height: none;
	}
	.hhero__title { font-size: clamp(2.625rem, 6.4vw, 3.5rem); }
	.hhero__rules { display: none; }
	/* On a tablet the frame is taller than it is wide, so the composition
	   turns: the photograph takes the upper half and the type sits in the
	   lower third on a settled ground, instead of floating in the middle of a
	   950px box with dead space above and below it. */
	.hhero {
		align-items: flex-end;
		padding-block: clamp(3rem, 8vh, 5rem) clamp(3rem, 9vh, 5.5rem);
	}
	.hhero__shell { align-items: flex-end; }

	.hhero__grade {
		background:
			radial-gradient(140% 62% at 26% 78%,
				rgba(var(--hh-ink), .58) 0%,
				rgba(var(--hh-ink), .34) 45%,
				rgba(var(--hh-ink), 0) 80%),
			linear-gradient(180deg,
				rgba(var(--hh-ink), .52) 0%,
				rgba(var(--hh-ink), .16) 10%,
				rgba(var(--hh-ink), .04) 26%,
				rgba(var(--hh-ink), .30) 48%,
				rgba(var(--hh-ink), .68) 64%,
				rgba(var(--hh-ink), .86) 78%,
				rgba(var(--hh-ink), .92) 100%),
			linear-gradient(96deg,
				rgba(var(--hh-ink), .86) 0%,
				rgba(var(--hh-ink), .68) 42%,
				rgba(var(--hh-ink), .40) 66%,
				rgba(var(--hh-ink), .16) 84%,
				rgba(var(--hh-ink), 0) 100%);
	}
}

/* ---- Phone --------------------------------------------------------------
   Not a narrower desktop. The frame is recomposed into the order the brief
   asks for — photograph, then eyebrow, headline, description, action — by
   pinning the picture to the top of the hero and letting the grade dissolve it
   into a navy field that the type sits on. It stays one continuous surface, so
   it still reads as a single cinematic frame rather than as a banner with a
   caption underneath, but no line of type is ever set over a bright sky.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
	.hhero {
		--hh-col: 100%;
		min-height: calc(100svh - var(--et-header-h, 68px) - 1px);
		align-items: flex-end;
		padding-block: 0 clamp(2.5rem, 7vh, 3.5rem);
	}

	.hhero__media  { bottom: auto; height: 58%; }
	.hhero__frame  { inset: -4% 0 -4%; }

	/* The ramp finishes at 40%, above the folio — which is the first thing the
	   eye reads and was landing on open sky at 4.1:1. Everything from there
	   down is a plain navy field, so no line of type on a phone is ever set
	   over a bright sky. */
	.hhero__grade {
		background: linear-gradient(180deg,
			rgba(var(--hh-ink), .50) 0%,
			rgba(var(--hh-ink), .10) 8%,
			rgba(var(--hh-ink), .03) 20%,
			rgba(var(--hh-ink), .34) 30%,
			rgba(var(--hh-ink), .86) 38%,
			rgb(var(--hh-ink))       45%,
			rgb(var(--hh-ink))       100%);
	}

	.hhero__shell  { align-items: flex-end; }

	.hhero__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		align-items: start;
	}

	/* The folio turns horizontal and moves above the eyebrow, where it reads
	   as a dateline rather than as furniture down the side. */
	.hhero__rail {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: .7rem;
		margin-bottom: 1.15rem;
	}
	.hhero__rail-rule  { width: 1.5rem; height: 1px; }
	.hhero__rail-word  { writing-mode: horizontal-tb; rotate: none; padding: 0; }
	.hhero__rail-track { display: none; }

	/* The eyebrow is a two-part label, and at this width the two parts do not
	   share a line. Left as a flex row it wraps mid-phrase and strands the
	   lozenge in the gutter, so it stacks instead — which is the hierarchy the
	   brief drew in the first place. The lozenge has nothing left to separate
	   and goes. */
	.hhero__eyebrow {
		display: block;
		font-size: .625rem;
		letter-spacing: .22em;
		line-height: 1.9;
	}
	.hhero__eyebrow > span { display: block; }
	/* Matched on the same two-part selector as the rule above it — a bare
	   .hhero__lozenge loses to `.hhero__eyebrow > span` and the dot survives,
	   stranded on a line of its own. */
	.hhero__eyebrow > span.hhero__lozenge { display: none; }

	.hhero__title {
		font-size: clamp(2.4375rem, 11.2vw, 3.25rem);
		letter-spacing: -.032em;
		line-height: .98;
	}
	.hhero__line--a { font-variation-settings: "opsz" 96, "wght" 360; }
	.hhero__line--b { font-variation-settings: "opsz" 96, "wght" 420; }

	.hhero__lead {
		font-size: 1.0625rem;
		line-height: 1.66;
		max-width: 34ch;
	}

	.hhero__cta { flex-direction: column; align-items: stretch; gap: .625rem; }
	.hbtn { width: 100%; padding-block: 1.0625rem; }
}

/* Short landscape phones — a 100svh hero with this much type does not fit, and
   forcing it produces a cropped headline. Let it size to its content. */
@media (max-height: 560px) and (max-width: 900px) {
	.hhero { min-height: 0; }
	.hhero__media { position: absolute; height: 100%; }
}

/* =============================================================================
   11. REDUCED MOTION
   Every animation here is ornament. None of it is load-bearing, so all of it
   goes — with the end state applied, never the start state.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.hhero__frame,
	.hhero__eyebrow,
	.hhero__line--a,
	.hhero__line--b,
	.hhero__lead,
	.hhero__cta,
	.hhero__rail,
	.hhero__rules,
	.hhero__rail-track i {
		animation: none;
		opacity: 1;
		transform: none;
	}
	.hhero__frame { transform: scale(1.008); }
	.hbtn:hover { transform: none; }
	.hbtn--gold:hover .hbtn__arrow { transform: none; }
}