/*
 * Home — the approved Homepage v2 composition.
 *
 * This file replaces the earlier Home stylesheet entirely. That one was
 * written against the superseded brown/umber homepage and drew every colour
 * from the v1 --ti-* tokens, whose ink and accent are brown and umber and
 * whose faces are Newsreader and Instrument Sans. None of that is the approved
 * identity, so none of it survives here — not even as a value in a comment, so
 * that an audit of this file finds no trace of the superseded palette.
 *
 * Everything below is scoped to body.ti-route-home. The global shell keeps its
 * earlier colours until its own migration gate, and nothing in this file
 * reaches it.
 *
 * Ground sequence, which is the page's argument. The export's own ran
 * navy → ivory → ivory → navy → warm gray → ivory → ivory → navy; Final drops two of
 * those sections and Step 2A reorders what remains, so it now runs
 *   navy → ivory → warm gray → navy → warm gray → ivory
 * The mid-page navy moved from the frameworks, which Final removed, to the
 * Legacy teaser, which the source's own design note asks to set on navy. It
 * is the same three grounds doing the same work in the same order of weight.
 * Navy carries authority, ivory carries reading, warm gray marks the writing
 * band, and gold appears only as hairlines, numerals, one button and one
 * italic. There is no fifth colour.
 */

/* ------------------------------------------------------------------ resets
 *
 * Astra styles the semantic elements this page uses. The lesson from the
 * Legacy blockquote is applied here in advance: what a parent theme sets on an
 * element is reset explicitly rather than assumed absent. Every rule is
 * route-scoped, so Astra is not globally neutralised.
 *
 * These resets deliberately do NOT set colour. An earlier version did, with
 * `color: inherit`, and because the reset carries an element selector it was
 * (0,2,1) against the (0,2,0) of the rule that names the real colour - so it
 * won, and every heading on this page inherited the shell's ink instead. That
 * is what made the hero, the frameworks and the closing line render brown. A
 * reset that is more specific than the rule it defers to is not a reset. */

/* The page ground.

   The v1 shell paints body in the superseded warm cream, and that colour shows
   wherever the sections do not: overscroll, and any gap between them. Home
   opens navy and closes navy, so navy is the ground beneath the whole page.
   Two classes outrank Astra's own body rule, which is the pattern the four
   rooms already use. */
.ti-route-home.ast-plain-container,
body.ti-route-home {
	background: var(--ti2-navy);
}

.ti-route-home [hidden] { display: none !important; }

.ti-route-home .ti-home__hero h1,
.ti-route-home .ti-home__story h2,
.ti-route-home .ti-home__work h2,
.ti-route-home .ti-home__frameworks h2,
.ti-route-home .ti-home__ideas h2,
.ti-route-home .ti-home__ideas h3,
.ti-route-home .ti-home__legacy h2,
.ti-route-home .ti-home__baami h2,
.ti-route-home .ti-home__close h2 {
	margin: 0;
	font-weight: 400;
}

.ti-route-home .ti-home__rooms-list,
.ti-route-home .ti-home__patterns {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* This reset exists for one reason: Astra sets `p { margin-bottom: 1.75em }`,
   and the approved design sets its own spacing on every paragraph that has
   any. It is a floor, not a rule with an opinion.

   It used to be written as `.ti-route-home .ti-home__hero p, ...`, which is
   (0,2,1) - one class and one element more than `.ti-home__hero-lede` at
   (0,2,0). So the floor outranked the design. Eleven declared margins across
   five sections never applied: the hero's register and standfirst both
   collapsed to zero, and the headline sat directly on the paragraph beneath
   it. Only Legacy's register survived, because somebody had already worked
   around this by writing that one at (0,3,0).

   This is the fourth time in this file that a reset written more specifically
   than the rules it defers to has caused a visible defect - the other three
   were colour. So the floor is now a floor: `:where()` matches without
   contributing any specificity, which makes the whole selector (0,0,1), the
   same weight as Astra's own `p` and beaten by every component rule here.
   Nothing needs to be made more specific to escape it, and nothing can be
   caught by it again. */
:where(
	.ti-route-home .ti-home__hero,
	.ti-route-home .ti-home__story,
	.ti-route-home .ti-home__work,
	.ti-route-home .ti-home__frameworks,
	.ti-route-home .ti-home__ideas,
	.ti-route-home .ti-home__legacy,
	.ti-route-home .ti-home__baami,
	.ti-route-home .ti-home__close
) p {
	margin: 0;
}

.ti-route-home .ti-home__hero figure,
.ti-route-home .ti-home__hero-figure { margin: 0; }

/* This rule sets no colour, and must not.

   It began as `.ti-route-home a { color: inherit }`, meant only to neutralise
   Astra's link colour. At (0,1,1) it matched the shell's own `.ti-nav__list a`
   and, loading later, won - so the entire global navigation and the wordmark
   inherited navy on a navy band and disappeared. Re-scoping it to .ti-main
   made it (0,2,1), which then beat `.ti-home__button--ghost` (0,2,0) and blanked
   the hero's secondary button instead.

   Both failures are the same mistake: a reset written more specifically than
   the rules it is supposed to defer to. Every link on this page declares its
   own colour, so no colour reset is needed at all. Only the underline is
   reset here. */
.ti-route-home .ti-main a { text-decoration: none; }

.ti-route-home .ti-home__offscreen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ shell */

.ti-route-home .ti-home__shell {
	max-width: var(--ti2-hm-shell);
	margin: 0 auto;
	padding: 0 clamp(20px, 5vw, 64px);
}

.ti-route-home .ti-home__register {
	font-family: var(--ti2-sans);
	font-size: 10.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ti2-hm-muted);
	font-weight: 600;
	margin: 0 0 clamp(20px, 2.4vw, 30px);
}

.ti-route-home .ti-home__register--gold {
	font-size: clamp(10px, 1vw, 11.5px);
	letter-spacing: 0.26em;
	color: var(--ti2-gold);
	font-weight: 500;
	line-height: 2.1;
	margin-bottom: clamp(20px, 2.6vw, 30px);
}

/* The same gold register, spaced differently in the two places the export
   uses it: 30px under the hero's, 34px under the frameworks'. One value was
   carried for both, which was invisible while the reset was suppressing them
   and is a 4px difference now that it is not. */
.ti-route-home .ti-home__frameworks .ti-home__register--gold {
	margin-bottom: clamp(22px, 2.6vw, 34px);
}

.ti-route-home .ti-home__register--split {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: clamp(18px, 2.2vw, 28px);
}

.ti-route-home .ti-home__register-rule {
	display: block;
	width: clamp(28px, 4vw, 56px);
	height: 1px;
	background: var(--ti2-gold);
}

.ti-route-home .ti-home__rule {
	display: block;
	width: 88px;
	height: 1px;
	background: var(--ti2-gold);
	margin: clamp(24px, 2.6vw, 34px) 0;
}

/* The same hairline, closing a column rather than dividing one: no trailing
   margin, because nothing follows it. */
.ti-route-home .ti-home__rule--light { margin-bottom: 0; }

.ti-route-home .ti-home__section-title {
	font-family: var(--ti2-serif);
	font-size: clamp(28px, 3vw, 42px);
	line-height: 1.1;
	color: var(--ti2-navy);
}

/* ---------------------------------------------------------------- buttons */

.ti-route-home .ti-home__button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 0 30px;
	background: var(--ti2-gold);
	color: var(--ti2-navy);
	font-family: var(--ti2-sans);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.ti-route-home .ti-home__button:hover,
.ti-route-home .ti-home__button:focus-visible { background: var(--ti2-ivory); }

.ti-route-home .ti-home__button--ghost {
	background: none;
	border: 1px solid rgba(var(--ti2-dune-rgb), 0.4);
	color: var(--ti2-dune);
	font-weight: 500;
}

.ti-route-home .ti-home__button--ghost:hover,
.ti-route-home .ti-home__button--ghost:focus-visible {
	background: none;
	border-color: var(--ti2-gold);
	color: var(--ti2-gold);
}

/* Navy, for the one action that sits on a light ground. The hero owns the
   page's single gold button; a second flattens the hierarchy, and against
   ivory navy carries more weight anyway. */
.ti-route-home .ti-home__button--navy {
	background: var(--ti2-navy);
	color: var(--ti2-ivory);
}

.ti-route-home .ti-home__button--navy:hover,
.ti-route-home .ti-home__button--navy:focus-visible {
	background: var(--ti2-hm-ink);
	color: var(--ti2-ivory);
}

.ti-route-home .ti-home__textlink {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-height: 48px;
	font-family: var(--ti2-sans);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ti2-navy);
	border-bottom: 1px solid var(--ti2-gold);
	padding-bottom: 6px;
	transition: color 0.3s ease;
}

.ti-route-home .ti-home__textlink:hover,
.ti-route-home .ti-home__textlink:focus-visible { color: var(--ti2-gold); }

.ti-route-home .ti-home__textlink--small {
	min-height: 44px;
	gap: 12px;
	font-size: 12px;
	padding-bottom: 5px;
}

/* ------------------------------------------------------------------- hero */

.ti-route-home .ti-home__hero {
	position: relative;
	background: var(--ti2-navy);
	overflow: hidden;
}

/* The band is fixed and this hero deliberately runs beneath it, so the copy
   has to clear the band on its own terms. Until now it cleared only because
   the grid centres its rows and the photograph happened to be the taller
   column; between roughly 860px and 1370px it is not, and the register slid
   under the band. The clearance is now stated, and the frame is pulled back up
   by the same amount so the photograph still reaches the top edge. */
.ti-route-home .ti-home__hero-grid {
	padding-top: clamp(48px, 6.5vw, 92px);
	padding-bottom: clamp(40px, 5.5vw, 76px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

.ti-route-home .ti-home__hero-copy {
	position: relative;
	z-index: 2;
	min-width: 0;
}

.ti-route-home .ti-home__hero-title {
	font-family: var(--ti2-serif);
	font-size: clamp(44px, 7vw, 96px);
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: var(--ti2-ivory);
	text-wrap: balance;
}

.ti-route-home .ti-home__hero-title em {
	font-style: italic;
	color: var(--ti2-gold);
}

/* The middle tier of the hero: between a 96px display line and 15px running
   copy there has to be something, or the two read as unrelated objects that
   happen to share a column. Serif, so it belongs to the headline; regular
   rather than italic, because the headline's gold italic is already the one
   emphasis this composition spends. */
.ti-route-home .ti-home__hero-sub {
	margin: clamp(18px, 2.2vw, 26px) 0 0;
	max-width: 38ch;
	font-family: var(--ti2-serif);
	font-size: clamp(19px, 1.7vw, 25px);
	line-height: 1.36;
	color: rgba(var(--ti2-ivory-rgb), 0.94);
	text-wrap: pretty;
}

.ti-route-home .ti-home__hero-lede {
	margin: clamp(20px, 2.4vw, 28px) 0 0;
	max-width: 46ch;
	font-family: var(--ti2-sans);
	font-size: clamp(15px, 1.25vw, 17px);
	line-height: 1.75;
	font-weight: 300;
	color: rgba(var(--ti2-ivory-rgb), 0.88);
}

.ti-route-home .ti-home__hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: clamp(26px, 3vw, 38px);
}

/* The second tier of the introduction, beneath the whole grid rather than
   inside the copy column.

   Final's introduction is four times the length of the line it replaced. In
   the column it pushed the headline and the buttons so far apart that neither
   read as part of one composition, and the photograph - which is the other
   half of that composition - ended up beside a wall of text. Here it takes a
   wide measure, gets the gold rule this design already uses for an aside, and
   gives the hero a bottom edge instead of a tail. Nothing is cut, reordered or
   paraphrased; the page still reads in the order the client wrote it. */
.ti-route-home .ti-home__hero-intro {
	margin: 0 0 clamp(44px, 5.5vw, 80px);
	max-width: 84ch;
	padding-left: clamp(14px, 1.8vw, 26px);
	border-left: 2px solid var(--ti2-gold);
	font-family: var(--ti2-sans);
	font-size: clamp(14.5px, 1.15vw, 16px);
	line-height: 1.85;
	font-weight: 300;
	color: rgba(var(--ti2-ivory-rgb), 0.8);
}

.ti-route-home .ti-home__hero-figure {
	position: relative;
	min-width: 0;
	align-self: stretch;
	min-height: clamp(320px, 44vw, 560px);
}

/* The frame bleeds past the shell on the right, which is the export's
   composition rather than an accident of the grid. */
.ti-route-home .ti-home__hero-frame {
	position: absolute;
	inset: 0;
	left: clamp(-24px, -2vw, 0px);
	right: calc(-1 * clamp(20px, 5vw, 64px));
	overflow: hidden;
	background: var(--ti2-hm-plate);
}

.ti-route-home .ti-home__hero-img,
.ti-route-home .ti-home__hero-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.42) contrast(1.06) brightness(0.98);
	animation: ti-home-drift 26s ease-in-out infinite alternate;
}

.ti-route-home .ti-home__hero-wash,
.ti-route-home .ti-home__hero-veil,
.ti-route-home .ti-home__hero-foot {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
}

.ti-route-home .ti-home__hero-wash {
	background: var(--ti2-navy);
	mix-blend-mode: color;
	opacity: 0.72;
}

.ti-route-home .ti-home__hero-veil {
	background: linear-gradient(90deg, rgba(var(--ti2-navy-rgb), 1) 0%, rgba(var(--ti2-navy-rgb), 0.72) 22%, rgba(var(--ti2-navy-rgb), 0.12) 60%, rgba(var(--ti2-navy-rgb), 0.34) 100%);
}

.ti-route-home .ti-home__hero-foot {
	background: linear-gradient(180deg, rgba(var(--ti2-navy-rgb), 0.34) 0%, rgba(var(--ti2-navy-rgb), 0) 34%, rgba(var(--ti2-navy-rgb), 0.46) 100%);
}

/* The composed empty state, used only while no photograph is set. */
.ti-route-home .ti-home__await {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 24px;
	text-align: center;
	border: 1px solid rgba(var(--ti2-gold-rgb), 0.28);
}

.ti-route-home .ti-home__await-mark {
	font-family: var(--ti2-serif);
	font-size: 15px;
	letter-spacing: 0.2em;
	color: var(--ti2-gold);
	border: 1px solid rgba(var(--ti2-gold-rgb), 0.5);
	padding: 8px 12px;
}

.ti-route-home .ti-home__await-note {
	font-family: var(--ti2-sans);
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(var(--ti2-dune-rgb), 0.72);
}

/* -------------------------------------------------------- opening statement */

.ti-route-home .ti-home__story {
	background: var(--ti2-ivory);
	padding: clamp(56px, 7.5vw, 112px) 0;
}

/* The export's two facing columns, which Step 1 left with nothing in the
   second. Final's five paragraphs fill it properly: the opening claim and the
   gold rule hold the left, the running copy holds the right.

   Not auto-fit. A repeat(auto-fit, minmax()) grid decides its own column count
   from the available width, which is right for a set of peers and wrong for a
   masthead and its body - at some widths it broke the claim onto its own row
   with an empty column beside it. The split is stated, and it is stated at the
   same 1000px the ledger below uses, so the page changes shape once rather
   than twice. */
.ti-route-home .ti-home__story-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(22px, 3.2vw, 40px);
	align-items: start;
}

@media (min-width: 1000px) {
	.ti-route-home .ti-home__story-grid {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
		gap: clamp(40px, 5vw, 88px);
	}
}

.ti-route-home .ti-home__story-claim,
.ti-route-home .ti-home__story-copy { min-width: 0; }

.ti-route-home .ti-home__story-title {
	font-family: var(--ti2-serif);
	font-size: clamp(29px, 3.4vw, 48px);
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--ti2-navy);
	text-wrap: pretty;
}

/* Running copy, at the measure the page reads at everywhere else. */
.ti-route-home .ti-home__story-body {
	margin: 0 0 clamp(17px, 1.9vw, 24px);
	max-width: 62ch;
	font-family: var(--ti2-sans);
	font-size: clamp(15px, 1.2vw, 16.5px);
	line-height: 1.85;
	font-weight: 300;
	color: var(--ti2-hm-slate);
}

.ti-route-home .ti-home__story-pull {
	margin: clamp(26px, 3vw, 38px) 0 0;
	max-width: 44ch;
	font-family: var(--ti2-serif);
	font-style: italic;
	font-size: clamp(19px, 1.9vw, 26px);
	line-height: 1.45;
	color: var(--ti2-hm-slate);
	text-wrap: pretty;
}

/* The statement's last line. Serif and navy, so it lands as a conclusion
   rather than as one more paragraph, but upright - the italic above it is the
   question, and two italics running would make neither of them the emphasis. */
.ti-route-home .ti-home__story-close {
	margin: clamp(20px, 2.2vw, 28px) 0 0;
	max-width: 52ch;
	font-family: var(--ti2-serif);
	font-size: clamp(18px, 1.5vw, 22px);
	line-height: 1.5;
	color: var(--ti2-navy);
	text-wrap: pretty;
}

.ti-route-home .ti-home__story-copy .ti-home__textlink { margin-top: clamp(24px, 2.8vw, 36px); }

.ti-route-home .ti-home__rooms-list {
	display: flex;
	flex-direction: column;
	border-left: 1px solid rgba(var(--ti2-navy-rgb), 0.16);
	padding-left: clamp(14px, 1.8vw, 26px);
}

.ti-route-home .ti-home__room {
	display: flex;
	align-items: baseline;
	gap: clamp(12px, 1.4vw, 18px);
	padding: clamp(6px, 0.8vw, 10px) 0;
}

/* Each room steps further from the rule than the last. */
.ti-route-home .ti-home__room--2 { padding-left: clamp(0px, 2.2vw, 18px); }
.ti-route-home .ti-home__room--3 { padding-left: clamp(0px, 4.4vw, 36px); }
.ti-route-home .ti-home__room--4 { padding-left: clamp(0px, 6.6vw, 54px); }

.ti-route-home .ti-home__room-num {
	font-family: var(--ti2-sans);
	font-size: 10.5px;
	letter-spacing: 0.2em;
	color: var(--ti2-hm-ink);
	font-weight: 600;
	padding-top: 2px;
}

.ti-route-home .ti-home__room-name {
	font-family: var(--ti2-serif);
	font-size: clamp(22px, 3.1vw, 46px);
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--ti2-navy);
	text-wrap: balance;
}

.ti-route-home .ti-home__rooms-note {
	margin: clamp(22px, 2.6vw, 34px) 0 0;
	max-width: 40ch;
	padding-left: clamp(14px, 1.8vw, 26px);
	border-left: 2px solid var(--ti2-gold);
	font-family: var(--ti2-sans);
	font-size: clamp(15px, 1.2vw, 16.5px);
	line-height: 1.72;
	color: var(--ti2-hm-slate);
}

.ti-route-home .ti-home__rooms-note-label {
	display: block;
	margin-bottom: 6px;
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ti2-hm-ink);
	font-weight: 600;
}

/* -------------------------------------------------------- how I contribute */

/* A ledger, full width.

   Four faults were fixed here, and they are worth naming because only the
   first was a matter of taste.

   It shared a ground with the section above. "Four rooms, one question"
   numbers a list 01 to 04 in gold on ivory and sets its names in Playfair;
   this did the same thing directly beneath it, on the same uninterrupted
   field, at 29px against that block's 46px. The page's widest claim was its
   quietest moment and read as the previous section's continuation. Warm gray
   gives it its own band and steps the page into the navy that follows.

   Name and description shared a baseline, which flattens two different kinds
   of information into one long line - the single thing that most makes a row
   read as a table row. They now hold separate columns.

   The names were too small for what they say. They are the section.

   And an earlier attempt at this redesign set the whole thing as two facing
   columns, masthead against index. It photographed well and did not work: a
   head of one title and one line cannot balance four rows, and the 440px
   difference had to go somewhere - beneath the button when the column aligned
   high, above it when the column aligned low. The imbalance was structural,
   not a spacing value, so the columns are gone rather than tuned and the
   width is spent on the names instead.

   Emphasis, never disclosure. Hover and focus change weight, colour and one
   connector rule; they reveal nothing, because nothing is hidden. That keeps
   reading immediate, and it means a visitor who never hovers - a keyboard
   user, a touch screen, a printer - misses nothing at all. Four
   non-interactive rows are not given tab stops merely to make a hover effect
   reachable. */

.ti-route-home .ti-home__work {
	background: var(--ti2-dune);
	padding: clamp(56px, 7.5vw, 108px) 0 clamp(60px, 8vw, 116px);
}

.ti-route-home .ti-home__work-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px clamp(24px, 4vw, 64px);
	margin-bottom: clamp(26px, 3.2vw, 44px);
}

.ti-route-home .ti-home__work-title {
	font-family: var(--ti2-serif);
	font-optical-sizing: auto;
	font-size: clamp(30px, 3.4vw, 48px);
	line-height: 1.04;
	letter-spacing: -0.015em;
	color: var(--ti2-navy);
	text-wrap: balance;
}

.ti-route-home .ti-home__work-standfirst {
	max-width: 34ch;
	font-family: var(--ti2-sans);
	font-size: clamp(14px, 1.1vw, 15.5px);
	line-height: 1.7;
	letter-spacing: 0.01em;
	font-weight: 300;
	color: var(--ti2-hm-slate);
}

/* The ledger opens on gold and closes on it. Between the rows the rule is
   navy at low alpha, so the two gold hairlines read as the boundary of one
   object rather than as four separated bands. */
.ti-route-home .ti-home__contributions {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(var(--ti2-gold-rgb), 0.55);
	border-bottom: 1px solid rgba(var(--ti2-gold-rgb), 0.55);
}

/* The row's own measures are named rather than repeated, because the arrow is
   positioned from them on desktop and has to land on the title's first line
   whatever the viewport does to the type scale. */
.ti-route-home .ti-home__contribution {
	--ti-c-pad: clamp(24px, 2.8vw, 38px);
	--ti-c-title: clamp(28px, 3.4vw, 52px);
	--ti-c-rail: clamp(30px, 3.2vw, 46px);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(8px, 2vw, 12px);
	padding: var(--ti-c-pad) 0;
	color: var(--ti2-navy);
}

.ti-route-home .ti-home__contribution + .ti-home__contribution {
	border-top: 1px solid rgba(var(--ti2-navy-rgb), 0.16);
}

/* The rule that travels, drawn on the row's own edge so nothing moves when it
   arrives - only its colour, from the left. */
.ti-route-home .ti-home__contribution::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--ti2-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 520ms var(--ti2-ease);
}

.ti-route-home .ti-home__contribution:last-child::after { bottom: 0; }

.ti-route-home .ti-home__contribution-num {
	font-family: var(--ti2-sans);
	font-size: 11px;
	letter-spacing: 0.2em;
	font-weight: 600;
	color: var(--ti2-hm-ink);
	transition:
		color          320ms var(--ti2-ease),
		letter-spacing 320ms var(--ti2-ease);
}

.ti-route-home .ti-home__contribution-title {
	margin: 0;
	min-width: 0;
	font-family: var(--ti2-serif);
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: var(--ti-c-title);
	line-height: 1.06;
	letter-spacing: -0.014em;
	color: var(--ti2-navy);
	transition: color 320ms var(--ti2-ease);
}

/* Final's descriptions run to paragraphs, and Board Service to two of them,
   so this is a wrapper now rather than a single line. The page's paragraph
   floor sets every margin here to zero, which is why the space between the
   two is declared rather than assumed. */
.ti-route-home .ti-home__contribution-note {
	min-width: 0;
	max-width: 58ch;
	font-family: var(--ti2-sans);
	font-size: clamp(14px, 1.05vw, 15.5px);
	line-height: 1.78;
	font-weight: 400;
	color: var(--ti2-hm-slate);
	transition: color 320ms var(--ti2-ease);
}

.ti-route-home .ti-home__contribution-note p + p { margin-top: 0.95em; }

/* The row is the click target.

   The anchor wraps the name alone and is stretched over the whole row by its
   own ::after, which is what keeps the link's accessible name the name of the
   thing - "Executive Advisory" - instead of the name followed by seventy
   words of description. The description stays outside the anchor as the
   running text it is.

   Focus is drawn on the row rather than on the two words inside it, by
   outlining that same stretched pseudo-element: it is already the shape of
   the row, so the ring lands where a keyboard user's eye needs it without a
   second selector having to guess at the geometry. */
.ti-route-home .ti-home__contribution-link { color: inherit; }

.ti-route-home .ti-home__contribution-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ti-route-home .ti-home__contribution-link:focus-visible { outline: none; }

.ti-route-home .ti-home__contribution-link:focus-visible::after {
	outline: 2px solid var(--ti2-gold);
	outline-offset: 4px;
}

/* The affordance, and the only thing on the row that moves on hover. It
   replaces the connector rule an earlier pass drew from the numeral rail:
   that flourish existed to tie three cells together, and a row that is now
   plainly one link no longer needs persuading of it.

   Narrow screens keep it inline beside the name, where the row is a single
   stacked column and there is no far edge to travel to. Wide screens send it
   to the row's right edge; see the 1000px block below. */
.ti-route-home .ti-home__contribution-go {
	display: inline-block;
	margin-left: 0.3em;
	font-family: var(--ti2-sans);
	font-size: 0.4em;
	line-height: 1;
	vertical-align: middle;
	color: var(--ti2-gold);
	transition: transform 320ms var(--ti2-ease);
}

.ti-route-home .ti-home__contribution--linked:hover .ti-home__contribution-go,
.ti-route-home .ti-home__contribution--linked:focus-within .ti-home__contribution-go {
	transform: translateX(7px);
}

/* Wide: three cells to a row - the numeral in its own rail, the name, the
   description beside it. The rails line up down the page, which is what makes
   four rows read as an index rather than as a table. */
@media (min-width: 1000px) {
	.ti-route-home .ti-home__contribution {
		grid-template-columns: 48px minmax(0, 0.92fr) minmax(0, 1.34fr);
		gap: clamp(18px, 2.6vw, 48px);
		align-items: start;
	}

	/* The arrow leaves the name and takes the row's right edge.

	   Two things make that work without touching the type or the copy. The row
	   reserves a rail of padding on the right, so the description column stops
	   short of the edge instead of colliding with the glyph; and the arrow is
	   given a box exactly one title-line tall, starting at the row's top
	   padding, so it centres on the first line of the name however the clamp
	   resolves. Nothing here is a magic number: both come from the row's own
	   named measures.

	   It stays inside the anchor, so the link is still one element, the
	   accessible name is still the name alone, the whole row is still the
	   click target, and focus is still drawn around the whole row. */
	.ti-route-home .ti-home__contribution--linked { padding-right: var(--ti-c-rail); }

	.ti-route-home .ti-home__contribution--linked .ti-home__contribution-go {
		position: absolute;
		right: 0;
		top: var(--ti-c-pad);
		display: flex;
		align-items: center;
		height: calc(var(--ti-c-title) * 1.06);
		margin-left: 0;
		font-size: clamp(17px, 1.5vw, 21px);
	}

	/* Optical, not mechanical: an 11px cap and a 52px one do not share a
	   baseline and should not pretend to. */
	.ti-route-home .ti-home__contribution-num { padding-top: 0.95em; }
	.ti-route-home .ti-home__contribution-note { padding-top: 0.55em; }

	.ti-route-home .ti-home__contribution:hover::after,
	.ti-route-home .ti-home__contribution:focus-within::after {
		transform: scaleX(1);
	}

	.ti-route-home .ti-home__contribution:hover .ti-home__contribution-num,
	.ti-route-home .ti-home__contribution:focus-within .ti-home__contribution-num {
		color: var(--ti2-gold);
		letter-spacing: 0.26em;
	}

	.ti-route-home .ti-home__contribution:hover .ti-home__contribution-title,
	.ti-route-home .ti-home__contribution:focus-within .ti-home__contribution-title {
		color: var(--ti2-hm-ink);
	}

	.ti-route-home .ti-home__contribution:hover .ti-home__contribution-note,
	.ti-route-home .ti-home__contribution:focus-within .ti-home__contribution-note {
		color: var(--ti2-navy);
	}
}

/* Narrow: the same idea recomposed, not stacked. The numeral rises above its
   name as a marker, the name takes the full measure, and since there is no
   hover to give, the rule draws as the row arrives instead. The motif
   performs on both; only what triggers it changes. */
@media (max-width: 999.98px) {
	.ti-route-home .ti-home__contribution::after { transform: scaleX(1); }

	.ti-js .ti-route-home .ti-home__contribution:not(.is-in)::after {
		transform: scaleX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ti-route-home .ti-home__contribution::after,
	.ti-route-home .ti-home__contribution-go,
	.ti-route-home .ti-home__contribution-num,
	.ti-route-home .ti-home__contribution-title,
	.ti-route-home .ti-home__contribution-note {
		transition: none;
	}
}

/* ------------------------------------------------------------- frameworks */

/* Naming What Matters.

   The colour stays exactly as approved; three things changed around it.

   The section was 28% padding - 130px above and below at 1440 - which left
   three short sentences floating in a navy field rather than set in one. It
   is now about a hundred.

   The closing paragraph sat in the left half of a two-column grid built for a
   paragraph and a button. The button is guarded - no frameworks route exists
   - so its column stood empty: 579px of nothing beside the text. With no
   button, the paragraph now spans the full measure in two columns divided by
   a gold hairline; with one, the original grid returns unchanged.

   And each pattern now carries a small line diagram that draws the pattern
   itself. The diagrams are the only graphic on a page of type, so they are
   hairlines at 1px in the same gold as the numerals, drawn once as the panel
   arrives and then left still. */

.ti-route-home .ti-home__frameworks {
	background: var(--ti2-navy);
	padding: clamp(56px, 7vw, 104px) 0;
}

.ti-route-home .ti-home__frameworks-title {
	max-width: 22ch;
	font-family: var(--ti2-serif);
	font-size: clamp(38px, 5.4vw, 84px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--ti2-ivory);
	text-wrap: balance;
}

.ti-route-home .ti-home__frameworks-title em {
	font-style: italic;
	color: var(--ti2-gold);
}

.ti-route-home .ti-home__frameworks-intro {
	margin: clamp(22px, 2.4vw, 32px) 0 0;
	max-width: 60ch;
	font-family: var(--ti2-sans);
	font-size: clamp(15px, 1.3vw, 18px);
	line-height: 1.8;
	font-weight: 300;
	color: rgba(var(--ti2-ivory-rgb), 0.88);
}

.ti-route-home .ti-home__patterns {
	margin: clamp(30px, 3.4vw, 46px) 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0;
}

.ti-route-home .ti-home__pattern {
	--ti-d: 0ms;
	padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2vw, 30px);
	border-top: 1px solid rgba(var(--ti2-gold-rgb), 0.45);
	background: rgba(var(--ti2-ivory-rgb), 0.03);
}

.ti-route-home .ti-home__pattern:nth-child(2) { --ti-d: 180ms; }
.ti-route-home .ti-home__pattern:nth-child(3) { --ti-d: 360ms; }

/* Numeral at the left, its diagram at the right, the sentence beneath both.
   The numeral names the pattern; the drawing shows it; the words say it. */
.ti-route-home .ti-home__pattern-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(16px, 1.6vw, 22px);
}

.ti-route-home .ti-home__pattern-num {
	margin: 0;
	font-family: var(--ti2-sans);
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--ti2-gold);
	font-weight: 600;
}

.ti-route-home .ti-home__pattern-body {
	font-family: var(--ti2-serif);
	font-size: clamp(20px, 1.9vw, 26px);
	line-height: 1.3;
	color: var(--ti2-ivory);
	text-wrap: pretty;
}

/* -- The diagrams -------------------------------------------------------- */

.ti-route-home .ti-home__diagram {
	display: block;
	flex: none;
	width: 72px;
	height: 56px;
	overflow: visible;
}

.ti-route-home .ti-home__diagram * {
	fill: none;
	stroke: var(--ti2-gold);
	stroke-width: 1;
	stroke-linecap: round;
}

.ti-route-home .ti-home__diagram .is-solid {
	fill: var(--ti2-gold);
	stroke: none;
	transition: opacity 700ms var(--ti2-ease) calc(900ms + var(--ti-d));
}

/* The idea that is present but unresolved: drawn only in dashes. */
.ti-route-home .ti-home__diagram .is-muted {
	stroke-dasharray: 1.5 3;
	opacity: 0.55;
	transition: opacity 700ms var(--ti2-ease) calc(900ms + var(--ti-d));
}

/* Nodes that sit on a dashed ring are filled with the panel's own ground, so
   the ring passes behind them rather than through them. */
.ti-route-home .ti-home__diagram .is-masked {
	fill: var(--ti2-navy);
	fill: color-mix(in srgb, var(--ti2-navy), var(--ti2-ivory) 3%);
}

/* The resting state is fully drawn, and is what anyone without script, or
   who has asked for less motion, sees. Only script hides the lines, and only
   until the panel has arrived. */
.ti-route-home .ti-home__diagram .is-drawn {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1200ms var(--ti2-ease) calc(240ms + var(--ti-d));
}

.ti-js .ti-route-home .ti-home__patterns:not(.is-in) .ti-home__diagram .is-drawn {
	stroke-dashoffset: 1;
}

.ti-js .ti-route-home .ti-home__patterns:not(.is-in) .ti-home__diagram .is-solid,
.ti-js .ti-route-home .ti-home__patterns:not(.is-in) .ti-home__diagram .is-muted {
	opacity: 0;
}

/* On a pointer that can hover, the drawing sharpens under it. Nothing is
   revealed by it - the diagram is already whole - so nothing is lost to a
   keyboard or a touch screen. */
@media (hover: hover) {
	.ti-route-home .ti-home__pattern .ti-home__diagram {
		opacity: 0.82;
		transition: opacity 320ms var(--ti2-ease);
	}

	.ti-route-home .ti-home__pattern:hover .ti-home__diagram {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ti-route-home .ti-home__diagram,
	.ti-route-home .ti-home__diagram * {
		transition: none;
	}

	.ti-js .ti-route-home .ti-home__patterns:not(.is-in) .ti-home__diagram .is-drawn {
		stroke-dashoffset: 0;
	}

	.ti-js .ti-route-home .ti-home__patterns:not(.is-in) .ti-home__diagram .is-solid {
		opacity: 1;
	}

	.ti-js .ti-route-home .ti-home__patterns:not(.is-in) .ti-home__diagram .is-muted {
		opacity: 0.55;
	}
}

/* -- The close ------------------------------------------------------------ */

.ti-route-home .ti-home__frameworks-foot {
	margin-top: clamp(30px, 3.4vw, 46px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(24px, 4vw, 64px);
	align-items: end;
}

.ti-route-home .ti-home__frameworks-close {
	max-width: 58ch;
	font-family: var(--ti2-sans);
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.8;
	font-weight: 300;
	color: rgba(var(--ti2-ivory-rgb), 0.88);
}

/* No button: the paragraph takes the whole measure, in two columns divided
   by a gold hairline, instead of half of it. Wide screens only - below this
   a column of text is already the right shape. */
@media (min-width: 1000px) {
	.ti-route-home .ti-home__frameworks-foot--solo {
		display: block;
	}

	.ti-route-home .ti-home__frameworks-foot--solo .ti-home__frameworks-close {
		max-width: none;
		columns: 2;
		column-gap: clamp(40px, 4.4vw, 64px);
		column-rule: 1px solid rgba(var(--ti2-gold-rgb), 0.24);
		font-size: clamp(15px, 1.25vw, 18px);
		orphans: 2;
		widows: 2;
	}
}

/* --------------------------------------------------------- latest writing */

.ti-route-home .ti-home__ideas {
	background: var(--ti2-dune);
	padding: clamp(56px, 7.5vw, 112px) 0;
}

.ti-route-home .ti-home__ideas-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
}

.ti-route-home .ti-home__record {
	margin-top: clamp(24px, 3vw, 40px);
	padding-top: clamp(22px, 2.6vw, 34px);
	border-top: 2px solid var(--ti2-gold);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(20px, 4vw, 56px);
	align-items: end;
}

.ti-route-home .ti-home__record-copy,
.ti-route-home .ti-home__record-side { min-width: 0; }

.ti-route-home .ti-home__record-meta {
	margin: 0 0 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	font-family: var(--ti2-sans);
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ti2-hm-slate);
	font-weight: 600;
}

.ti-route-home .ti-home__record-kind {
	color: var(--ti2-navy);
	background: rgba(var(--ti2-gold-rgb), 0.32);
	padding: 6px 12px;
}

.ti-route-home .ti-home__record-title {
	font-family: var(--ti2-serif);
	font-size: clamp(27px, 3.2vw, 46px);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--ti2-navy);
	text-wrap: balance;
}

.ti-route-home .ti-home__record-note {
	margin: 18px 0 0;
	font-family: var(--ti2-sans);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ti2-hm-slate);
	font-weight: 500;
}

/* ---------------------------------------------------------------- legacy */

/* Navy, and the page's middle anchor.

   It was ivory, between two other light grounds, and once Step 1 removed the
   navy block that used to sit in the middle of this page there was nothing
   between the hero and the footer to break a run of four light sections. The
   source's own design note for this teaser asks for a navy field here, so the
   ground it now takes is the one the client's copy specifies rather than a
   new idea about the page. No photograph has been supplied for the band, so
   it is set as type on navy, not as an empty image frame. */
.ti-route-home .ti-home__legacy {
	background: var(--ti2-navy);
	padding: clamp(56px, 7vw, 104px) 0;
}

.ti-route-home .ti-home__legacy-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(22px, 3.2vw, 40px);
	align-items: start;
}

@media (min-width: 1000px) {
	.ti-route-home .ti-home__legacy-grid {
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
		gap: clamp(40px, 5vw, 88px);
	}
}

.ti-route-home .ti-home__legacy-copy,
.ti-route-home .ti-home__legacy-side { min-width: 0; }

.ti-route-home .ti-home__legacy-title {
	font-family: var(--ti2-serif);
	font-size: clamp(30px, 3.6vw, 52px);
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--ti2-ivory);
	text-wrap: balance;
}

.ti-route-home .ti-home__legacy-body {
	margin: 0;
	max-width: 56ch;
	font-family: var(--ti2-sans);
	font-size: clamp(15px, 1.2vw, 16.5px);
	line-height: 1.85;
	font-weight: 300;
	color: rgba(var(--ti2-ivory-rgb), 0.84);
}

.ti-route-home .ti-home__legacy-side .ti-home__button { margin-top: clamp(26px, 3vw, 36px); }

/* ----------------------------------------------------------------- BAAMI */

/* "This is a handover, not a pitch", so the treatment stays quiet: a hairline
   above, the heading and the wordmark holding one column, Final's three
   paragraphs the other, and one navy button rather than a second gold one.
   The section used to be a single sentence with the link inside it, which is
   why everything here is new: it is now a block of running copy and has to be
   set as one. */

.ti-route-home .ti-home__baami {
	background: var(--ti2-ivory);
	padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 7vw, 100px);
}

.ti-route-home .ti-home__baami-grid {
	padding-top: clamp(28px, 3.4vw, 44px);
	border-top: 1px solid rgba(var(--ti2-navy-rgb), 0.14);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(22px, 3.2vw, 40px);
	align-items: start;
}

@media (min-width: 1000px) {
	.ti-route-home .ti-home__baami-grid {
		grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
		gap: clamp(40px, 5vw, 88px);
	}
}

.ti-route-home .ti-home__baami-head,
.ti-route-home .ti-home__baami-copy { min-width: 0; }

.ti-route-home .ti-home__baami-title {
	font-family: var(--ti2-serif);
	font-size: clamp(27px, 3.2vw, 44px);
	line-height: 1.1;
	letter-spacing: -0.012em;
	color: var(--ti2-navy);
	text-wrap: balance;
}

/* Modest, and beneath the heading rather than opposite it: the wordmark is a
   signature on the handover, not a second headline competing with the first. */
.ti-route-home .ti-home__baami-mark {
	margin: clamp(16px, 1.8vw, 24px) 0 0;
	font-family: var(--ti2-serif);
	font-size: clamp(16px, 1.5vw, 20px);
	letter-spacing: 0.16em;
	color: var(--ti2-hm-muted);
}

.ti-route-home .ti-home__baami-line {
	margin: 0 0 clamp(15px, 1.7vw, 21px);
	max-width: 60ch;
	font-family: var(--ti2-sans);
	font-size: clamp(14.5px, 1.15vw, 16px);
	line-height: 1.8;
	font-weight: 300;
	color: var(--ti2-hm-slate);
}

.ti-route-home .ti-home__baami-line:last-of-type { margin-bottom: 0; }

.ti-route-home .ti-home__baami-copy .ti-home__button { margin-top: clamp(26px, 3vw, 36px); }

/* ----------------------------------------------------------------- close */

.ti-route-home .ti-home__close {
	background: var(--ti2-navy);
	padding: clamp(72px, 9vw, 150px) 0 clamp(48px, 6vw, 88px);
	border-top: 1px solid rgba(var(--ti2-gold-rgb), 0.35);
}

.ti-route-home .ti-home__close-shell {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 clamp(20px, 5vw, 64px);
	text-align: center;
}

.ti-route-home .ti-home__close-title {
	font-family: var(--ti2-serif);
	font-size: clamp(34px, 5vw, 76px);
	line-height: 1.06;
	letter-spacing: -0.015em;
	color: var(--ti2-ivory);
	text-wrap: balance;
}

.ti-route-home .ti-home__close-title em {
	font-style: italic;
	color: var(--ti2-gold);
}

.ti-route-home .ti-home__close-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: clamp(30px, 3.6vw, 48px);
}

.ti-route-home .ti-home__close-actions .ti-home__button { padding: 0 32px; }

.ti-route-home .ti-home__close-note {
	margin: clamp(24px, 2.8vw, 34px) 0 0;
	font-family: var(--ti2-sans);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ti2-dune);
	font-weight: 400;
}

/* ---------------------------------------------------------------- motion */

@keyframes ti-home-rise {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: none; }
}

@keyframes ti-home-drift {
	from { transform: scale(1.04) translate3d(0, 0, 0); }
	to   { transform: scale(1.09) translate3d(-1.2%, -1.4%, 0); }
}

/* The export reveals each block on a short stagger. Applied to the blocks
   themselves rather than through a marker class, so the markup carries no
   presentational hooks. */
.ti-route-home .ti-home__hero-copy,
.ti-route-home .ti-home__story-claim,
.ti-route-home .ti-home__story-copy,
.ti-route-home .ti-home__record,
.ti-route-home .ti-home__legacy-grid {
	animation: ti-home-rise 860ms var(--ti2-ease) both;
}

.ti-route-home .ti-home__story-copy { animation-delay: 110ms; }


@media (prefers-reduced-motion: reduce) {
	.ti-route-home .ti-home__hero-copy,
	.ti-route-home .ti-home__story-claim,
	.ti-route-home .ti-home__story-copy,
	.ti-route-home .ti-home__record,
	.ti-route-home .ti-home__legacy-grid,
	.ti-route-home .ti-home__hero-img,
	.ti-route-home .ti-home__hero-frame img {
		animation: none;
		opacity: 1;
		transform: none;
	}

	/* The buttons keep their affordance; only the travel stops. */
	.ti-route-home .ti-home__button,
	.ti-route-home .ti-home__textlink {
		transition: none;
	}
}

/* ------------------------------------------------------------ narrow view */

/* The band is fixed and the hero runs beneath it. The grid keeps the approved
   padding; the copy column alone takes whatever extra clearance the band needs
   at this width, and takes none when the approved padding already clears it.
   Only above the nav breakpoint: below it the photograph is above the copy. */
@media (min-width: 860px) {
	.ti-route-home .ti-home__hero-copy {
		padding-top: max(0px, calc(var(--ti-header-h) + 12px - clamp(48px, 6.5vw, 92px)));
	}
}

@media (max-width: 859px) {
	.ti-route-home .ti-home__hero-figure {
		min-height: clamp(260px, 62vw, 420px);
		order: -1;
	}

	.ti-route-home .ti-home__hero-frame {
		left: calc(-1 * clamp(20px, 5vw, 64px));
	}
}


/* ======================================== the opening statement in motion

   CTO direction, 13 September 2026: surprise here, with the page's own
   confidence. Four moves, one vocabulary - navy, gold, the serif - and every
   one of them follows the reader rather than a clock. See the note in
   template-parts/home/story.php. Everything that hides or moves is keyed to
   .is-moving, which home.js adds only when the motion will run. */

/* The claim holds its place while the copy passes it. Not motion, so it is
   not withdrawn under reduced motion. */
@media (min-width: 1000px) {
	.ti-route-home .ti-home__story-claim {
		position: sticky;
		top: calc(var(--ti-header-h, 89px) + clamp(28px, 4vw, 56px));
	}
}

/* 1. The claim rises word by word from behind its own baseline. The mask is
   padded so descenders are never clipped. */
.ti-route-home .is-moving .ti-home__word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.14em;
	margin-bottom: -0.14em;
}

.ti-route-home .is-moving .ti-home__word-in {
	display: inline-block;
	transform: translateY(108%);
	transition: transform 1150ms cubic-bezier(0.19, 1, 0.22, 1);
	transition-delay: calc(var(--ti-i, 0) * 60ms + 120ms);
}

.ti-route-home .is-moving.is-live .ti-home__word-in { transform: none; }

/* 2. The rule is a measure. It starts at the approved 88px and extends to the
   width of the claim as the copy beside it is read. */
.ti-route-home .is-moving .ti-home__story-claim .ti-home__rule {
	position: relative;
	width: min(100%, 368px);
	height: 2px;
	background: rgba(var(--ti2-gold-rgb), 0.2);
}

.ti-route-home .is-moving .ti-home__story-claim .ti-home__rule::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ti2-gold);
	transform-origin: 0 50%;
	transform: scaleX(calc(0.24 + var(--ti-meter, 0) * 0.76));
}

/* 3. The question is marked. A soft gold band sweeps beneath it line after
   line - the background is laid across the wrapped lines as one strip - and
   the question darkens from slate to the page's ink. */
.ti-route-home .is-moving .ti-home__question {
	background-image: linear-gradient(rgba(var(--ti2-gold-rgb), 0.3), rgba(var(--ti2-gold-rgb), 0.3));
	background-repeat: no-repeat;
	background-position: 0 90%;
	background-size: 0% 0.36em;
	transition:
		background-size 1800ms cubic-bezier(0.65, 0, 0.35, 1) 200ms,
		color 1000ms ease 200ms;
}

.ti-route-home .is-moving .is-lit .ti-home__question {
	background-size: 100% 0.36em;
	color: var(--ti2-navy);
}

/* 4. The closing line and the link rise in through the site's own reveal. */

@media (prefers-reduced-motion: reduce), print {
	.ti-route-home .is-moving .ti-home__word-in {
		transform: none;
		transition: none;
	}

	.ti-route-home .is-moving .ti-home__story-claim .ti-home__rule::after { transform: none; }

	.ti-route-home .is-moving .ti-home__question {
		transition: none;
		background-size: 100% 0.36em;
	}
}


/* ============================================== responsive review, 13 Sept

   Faults confirmed in the full review captures, fixed at the widths they
   occurred. Nothing here changes the approved composition at widths where it
   was already right. */

/* The Home photograph beneath the opening claim. A 3:4 frame no wider than
   440px - the supplied file is 618px wide, so it is never shown past its own
   pixels - with the gold top rule the page's other frames carry. */
.ti-route-home .ti-home__story-grid--photo .ti-home__story-claim { position: static; }

.ti-route-home .ti-home__story-figure {
	position: relative;
	margin: clamp(26px, 3.2vw, 42px) 0 0;
	width: min(100%, 440px);
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--ti2-navy);
	border-top: 2px solid var(--ti2-gold);
}

.ti-route-home .ti-home__story-figure img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--ti-crop, 50% 45%);
	display: block;
}

@media (max-width: 999.98px) {
	.ti-route-home .ti-home__story-figure { margin-bottom: clamp(6px, 2vw, 14px); }
}

/* Hero, below the nav breakpoint: one column. At 768 the auto-fit grid still
   made two columns, so the photograph took the left half under the logo and
   collided with the copy. The photograph also clears the band now, instead of
   running beneath the logo. */
@media (max-width: 859px) {
	.ti-route-home .ti-home__hero-grid {
		grid-template-columns: minmax(0, 1fr);
		padding-top: calc(var(--ti-header-h, 89px) + 6px);
	}
}

/* The hero photograph bleeds to the viewport edge at every width. It stopped
   at the shell's padding, which reached the edge up to 1360px and fell 40px
   short of it above - a partial bleed that read as a misalignment. */
.ti-route-home .ti-home__hero-frame {
	right: calc(-1 * (max(0px, (100vw - var(--ti2-hm-shell)) / 2) + clamp(20px, 5vw, 64px)));
}

/* The register wraps as a balanced pair of lines, not one word left over. */
.ti-route-home .ti-home__hero .ti-home__register { text-wrap: balance; }

/* Stacked hero buttons take one width on phones. */
@media (max-width: 559.98px) {
	.ti-route-home .ti-home__hero-actions {
		display: grid;
		grid-template-columns: minmax(0, 290px);
	}

	.ti-route-home .ti-home__hero-actions > * { justify-content: center; }
}

/* Latest writing: the record's link sits on the right edge, level with "Read
   all writing" above it, instead of floating mid-row; below 1000px it follows
   the title. */
.ti-route-home .ti-home__record { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1000px) {
	.ti-route-home .ti-home__record { grid-template-columns: minmax(0, 1fr) auto; }
	.ti-route-home .ti-home__record-side { justify-self: end; }

	/* One split for every two-column section, so the second columns start on
	   the same line down the page (they started at 652, 675 and 594px). */
	.ti-route-home .ti-home__legacy-grid,
	.ti-route-home .ti-home__baami-grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
}

/* The hairline above Executive Advisory runs on the content's edges, not the
   shell's padding. */
.ti-route-home .ti-home__baami-grid {
	position: relative;
	border-top: 0;
}

.ti-route-home .ti-home__baami-grid::before {
	content: "";
	position: absolute;
	top: 0;
	left: clamp(20px, 5vw, 64px);
	right: clamp(20px, 5vw, 64px);
	height: 1px;
	background: rgba(var(--ti2-navy-rgb), 0.14);
}

/* The contribution arrow read as a stray hyphen at phone sizes. */
@media (max-width: 999.98px) {
	.ti-route-home .ti-home__contribution-go {
		font-size: 0.62em;
		margin-left: 0.4em;
	}
}