/**
 * Ulannii — the home page.
 *
 * Loaded only on pages using template-home.php. One block per section, in the
 * order the sections appear.
 */

/* ============================================================
   0 · The canvas
   ============================================================ */

/* Astra wraps page content in .ast-container, which on a wide screen is a flex
   row sized for a text column beside a sidebar. Every section here is
   full-bleed and paints its own ground, so that wrapper has to stop being a
   layout: left as a flex parent it squeezes each section down to the width of
   its own text, which is what turned the hero into a narrow strip. Blocking it
   out also drops the side gutter and the vertical padding Astra gives the
   column — both of which would show as gaps between sections that are meant to
   meet edge to edge.

   Scoped to this template's body class, so no other page changes. */
.page-template-template-home .site-content > .ast-container {
	display: block;
	max-width: none;
	padding: 0;
}

.page-template-template-home .site-main,
.page-template-template-home .site-main > article,
.page-template-template-home .entry-content {
	margin: 0;
	padding: 0;
}

/* ============================================================
   1 · Hero
   ============================================================ */

/* The painted ground matters as much as the clip. Until the video has arrived
   this gradient is the whole hero, and a visitor should not be able to tell
   that anything is missing. */
.u-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 620px;
	padding: 0;
	overflow: hidden;
	background: linear-gradient(150deg, #1b2733 0%, #2f3f4e 40%, #4a3a2c 72%, #6b4a2c 100%);
}

.u-hero__film {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%);
	object-fit: cover;
	pointer-events: none;
}

.u-hero__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 12, 18, 0.42), rgba(8, 12, 18, 0.58));
}

.u-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0 20px;
	color: #fff;
	text-align: center;
}

.u-hero__kicker {
	margin: 0 0 22px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

/* The rungs move between three fixed sizes rather than sliding a strip, so the
   type never lands on a half pixel and never blurs mid-animation. */
.u-hero__rung {
	line-height: 1.06;
	transition: all 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

.u-hero__rung--1 {
	font-size: clamp(30px, 5.4vw, 64px);
	font-weight: 900;
	letter-spacing: -0.015em;
	text-shadow: 0 3px 26px rgba(0, 0, 0, 0.4);
}

.u-hero__rung--2 {
	margin-top: 12px;
	font-size: clamp(19px, 3.2vw, 38px);
	font-weight: 800;
	color: rgba(255, 255, 255, 0.5);
}

.u-hero__rung--3 {
	margin-top: 10px;
	font-size: clamp(11px, 1.5vw, 18px);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.36);
}

.u-hero__cue {
	position: absolute;
	left: 50%;
	bottom: 30px;
	z-index: 3;
	width: 25px;
	height: 41px;
	border: 2px solid rgba(255, 255, 255, 0.55);
	border-radius: 14px;
	transform: translateX(-50%);
}

.u-hero__cue::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 8px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: #fff;
	animation: u-hero-bob 1.8s ease-in-out infinite;
}

@keyframes u-hero-bob {
	0%,
	100% {
		transform: translateY(0);
		opacity: 1;
	}
	50% {
		transform: translateY(13px);
		opacity: 0.3;
	}
}

/* ---------- phones ---------- */

/* Astra swaps to its mobile header at this width, so the hero changes shape at
   the same point the rest of the page does. */
@media (max-width: 921px) {

	.u-hero {
		height: 330px;
	}

	/* Text over video is only legible when the video is given up on a little. */
	.u-hero__veil {
		background: linear-gradient(180deg, rgba(8, 12, 18, 0.6), rgba(8, 12, 18, 0.72));
	}

	.u-hero__kicker {
		margin-bottom: 12px;
		font-size: 9.5px;
		letter-spacing: 0.18em;
	}

	.u-hero__rung--1 {
		font-size: 28px;
	}

	.u-hero__rung--2 {
		margin-top: 8px;
		font-size: 17px;
	}

	/* Three rungs do not fit a 330px banner, and shrinking them further would
	   leave the third unreadable anyway. */
	.u-hero__rung--3,
	.u-hero__cue {
		display: none;
	}

}

@media (prefers-reduced-motion: reduce) {

	.u-hero__rung,
	.u-hero__cue::after {
		transition: none;
		animation: none;
	}

}

/* ============================================================
   2 · Who Ulannii is, and who is listening
   ============================================================ */

.u-intro {
	position: relative;
	z-index: 2;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 40px 92px;
}

/* Lifted over the foot of the hero. The overlap is the whole point of the
   shape — it ties the two sections into one gesture instead of stacking two
   rectangles — so it is a negative margin here rather than spacing above. */
.u-intro__card {
	margin-top: -72px;
	padding: 38px 46px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 18px 46px rgba(25, 20, 15, 0.13);
	text-align: center;
}

.u-intro__card p {
	margin: 0;
	font-size: 17.5px;
	line-height: 1.7;
	color: #26303b;
}

.u-intro__channels {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.u-channel {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 17px 18px;
	background: #f4f5f7;
	border-radius: 12px;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
}

.u-channel:hover,
.u-channel:focus-visible {
	background: #eceef1;
	transform: translateY(-2px);
}

.u-channel__mark {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 11px;
	color: #fff;
}

.u-channel__mark svg {
	width: 24px;
	height: 24px;
}

.u-channel__mark--youtube {
	background: #ff0000;
}

.u-channel__mark--facebook {
	background: #1877f2;
}

.u-channel__mark--tiktok {
	background: #010101;
}

.u-channel__mark--zalo {
	background: #0068ff;
}

/* Without this the channel name sets the column width and four long names push
   the grid past the page. */
.u-channel__text {
	min-width: 0;
}

.u-channel__name {
	display: block;
	font-size: 15.5px;
	font-weight: 800;
	line-height: 1.3;
	color: #26303b;
}

.u-channel__count {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	color: #6b7280;
}

/* ---------- phones ---------- */

@media (max-width: 921px) {

	.u-intro {
		padding: 0 18px 56px;
	}

	.u-intro__card {
		margin-top: -46px;
		padding: 24px 20px;
		border-radius: 14px;
	}

	.u-intro__card p {
		font-size: 15px;
	}

	.u-intro__channels {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		margin-top: 16px;
	}

	.u-channel {
		gap: 9px;
		padding: 12px;
	}

	.u-channel__mark {
		width: 34px;
		height: 34px;
		border-radius: 9px;
	}

	.u-channel__mark svg {
		width: 19px;
		height: 19px;
	}

	.u-channel__name {
		font-size: 13px;
	}

	.u-channel__count {
		font-size: 11.5px;
	}

}

/* ============================================================
   3 · The founder
   ============================================================ */

/* A full hall, blurred back into a texture. It deliberately does not show the
   founder: with her in the picture as well as cut out in front of it, there
   were two of her on screen and the eye could not decide which to read. */
.u-founder {
	position: relative;
	overflow: hidden;
	background: #241b15 url("../img/nguoi-sang-lap-nen.jpg") center / cover no-repeat;
}

/* Warm rather than black, and lightest across the middle where she stands. The
   right stays heavier because that is where the text has to hold up; anywhere
   lighter there and the paragraphs start to struggle. */
.u-founder__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(26, 18, 12, 0.68), rgba(26, 18, 12, 0.42) 40%, rgba(22, 16, 11, 0.8));
}

/* Proportioned off the reference panel, which is a single flat 1728x940 image:
   the figure takes about a fifth of the width down the left, then a generous
   gap, then the text across the remaining half. The gap is doing as much work
   as either column — without it the two sit shoulder to shoulder and the
   section feels crowded. */
.u-founder__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
	gap: 70px;
	align-items: end;
	max-width: 1220px;
	margin: 0 auto;
	padding: 0 40px;
}

/* The figure takes the height the text sets, rather than a height of its own.
   Pinned to a fixed size it stopped matching the column beside it the moment
   the portrait was recropped — whoever crops it next should not have to come
   back here and retune a number. Stretched, the two columns stay the same
   height whatever the picture or the biography turn out to be.

   She still stands on the bottom edge: a cut-out floating clear of it reads as
   a sticker. */
.u-founder__figure {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	align-self: stretch;
	min-height: 420px;
	margin: 0;
}

/* Her width is capped and her height follows from it, so she keeps the scale
   the reference sets rather than growing to whatever the biography happens to
   need. She cannot also reach the top of the panel the way Cô Lanh does: that
   figure is a full-length áo dài at a ratio of 0.37, and this one is cropped at
   the hip with folded arms at 0.61 — at equal heights it is half again as wide.
   Matching both the width and the height needs a full-length photograph. */
.u-founder__figure img {
	display: block;
	width: 100%;
	max-width: 330px;
	height: 100%;
	object-fit: contain;
	object-position: bottom center;
	filter: drop-shadow(0 20px 46px rgba(0, 0, 0, 0.5));
}

.u-founder__text {
	padding: 84px 0 90px;
}

.u-founder__name {
	margin: 0 0 10px;
	font-size: clamp(27px, 3.6vw, 40px);
	font-weight: 900;
	letter-spacing: -0.02em;
	color: #fff;
}

/* Set as a label rather than a sentence — small, spaced and in the accent
   colour — so it reads as her title and not as the first line of the text. */
.u-founder__role {
	margin: 0 0 34px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #f0871e;
}

.u-founder__point {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 34px 0 14px;
	font-size: 18.5px;
	font-weight: 800;
	line-height: 1.4;
	color: #fff;
}

/* Drawn rather than typed. As the character U+25B6 it renders as a missing
   glyph box in Mulish, and which fonts carry an arrowhead is not something to
   depend on; three borders always look the same everywhere. The top margin
   sits it on the cap height of the first line rather than centring it, so a
   heading that wraps to two lines still has the mark beside its first. */
.u-founder__point::before {
	content: "";
	flex: none;
	width: 0;
	height: 0;
	margin-top: 7px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid #f0871e;
}

/* Ranged left, not justified. Vietnamese sets long words and this column is
   narrow enough that forcing both edges straight opens rivers of white down the
   middle of every paragraph. The measure is capped for the same reason a book
   is: past roughly sixty characters the eye loses the start of the next line. */
.u-founder__text p {
	max-width: 58ch;
	margin: 0 0 16px;
	font-size: 16.5px;
	line-height: 1.85;
	color: rgba(242, 234, 226, 0.88);
}

.u-founder__quote {
	max-width: 46ch;
	margin: 40px 0 0;
	padding: 2px 0 2px 20px;
	border-left: 3px solid #f0871e;
}

.u-founder__quote p {
	margin: 0;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.5;
	color: #fff;
	text-align: left;
}

.u-founder__quote cite {
	display: block;
	margin-top: 10px;
	font-size: 14px;
	font-style: normal;
	color: rgba(238, 229, 220, 0.62);
}

/* ---------- phones ---------- */

@media (max-width: 921px) {

	.u-founder__inner {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 0 20px;
	}

	/* Name first on a phone. Led by the photograph, a reader meets a stranger
	   before they are told who she is — and the picture eats the whole first
	   screen doing it. Beneath the words she closes the section instead, which
	   is also the role she plays on a wide screen. */
	/* Stacked, there is no column to match, so she goes back to her own size. */
	.u-founder__figure {
		order: 2;
		align-self: auto;
		min-height: 0;
	}

	.u-founder__figure img {
		width: 100%;
		max-width: 250px;
		height: auto;
	}

	.u-founder__text {
		order: 1;
		padding: 44px 0 28px;
	}

	.u-founder__point {
		margin-top: 26px;
		font-size: 16.5px;
	}

	.u-founder__point::before {
		margin-top: 6px;
	}

	.u-founder__text p {
		max-width: none;
		font-size: 15.5px;
		line-height: 1.8;
	}

	.u-founder__quote p {
		font-size: 17px;
	}

}

/* ============================================================
   4 · The numbers
   ============================================================ */

.u-numbers {
	position: relative;
	overflow: hidden;
	padding: 92px 40px;
	background: #fff;
}

/* Two pale wedges in the top corners, the one decorative gesture in an
   otherwise plain section. Behind the content and inert to the pointer. */
.u-numbers__flare {
	position: absolute;
	top: 0;
	z-index: 0;
	width: 260px;
	height: 220px;
	opacity: 0.55;
	pointer-events: none;
}

.u-numbers__flare--left {
	left: -46px;
	background: linear-gradient(135deg, #dbe6fb, transparent 70%);
	clip-path: polygon(0 0, 100% 22%, 18% 100%);
}

.u-numbers__flare--right {
	right: -34px;
	background: linear-gradient(215deg, #fde3cd, transparent 70%);
	clip-path: polygon(100% 0, 0 30%, 86% 100%);
}

.u-numbers__inner {
	position: relative;
	z-index: 1;
	max-width: 1290px;
	margin: 0 auto;
}

.u-numbers__heading {
	margin: 0 0 46px;
	font-size: clamp(26px, 3.5vw, 40px);
	font-weight: 900;
	line-height: 1.24;
	letter-spacing: -0.02em;
	color: #26303b;
	text-align: center;
	text-wrap: balance;
}

.u-numbers__heading span {
	display: block;
	color: #e2650f;
}

/* No gap: the film butts against the cream panel and laps a little over its
   edge, which is what stops the two reading as separate boxes parked side by
   side. */
.u-numbers__row {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	gap: 0;
	align-items: center;
}

/* With no film to sit beside, the panel is the whole composition rather than
   half of one left hanging. */
.u-numbers--wide .u-numbers__row {
	grid-template-columns: 1fr;
}

.u-numbers__panel {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 34px 14px;
	margin: 0;
	padding: 46px 30px 46px 38px;
	background: #fef3eb;
	border-radius: 16px;
	list-style: none;
	text-align: center;
}

/* A grid track is only as narrow as its widest unbreakable child, so without
   this a long figure widens its column and pushes the panel off the page. */
.u-figure {
	min-width: 0;
}

.u-figure b {
	display: block;
	font-size: clamp(25px, 3.1vw, 42px);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.02em;
}

/* Colour alternates by row because six figures in one colour read as a table,
   and each of these is a separate claim. */
.u-figure--warm b {
	color: #e2650f;
}

.u-figure--cool b {
	color: #1257bd;
}

.u-figure span {
	display: block;
	margin-top: 9px;
	font-size: 14.5px;
	line-height: 1.4;
	color: #3d4650;
	text-wrap: balance;
}

/* Standing taller than the panel and lapping over its edge. Equal heights sit
   flat; the overhang is what gives the pair a front and a back. */
.u-numbers__film {
	position: relative;
	z-index: 1;
	margin: -22px 0 -22px -16px;
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	overflow: hidden;
	background: #241a12;
	box-shadow: 0 18px 44px rgba(50, 30, 12, 0.26);
}

.u-numbers__film iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- phones ---------- */

@media (max-width: 921px) {

	.u-numbers {
		padding: 54px 20px;
	}

	.u-numbers__heading {
		margin-bottom: 28px;
	}

	.u-numbers__row {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	/* Stacked, the overlap has nothing to lap over. */
	.u-numbers__film {
		margin: 0;
	}

	/* Two columns, not three: "100%" cannot break, and three-up it was wider
	   than a third of the screen. */
	.u-numbers__panel {
		grid-template-columns: 1fr 1fr;
		gap: 24px 10px;
		padding: 26px 14px;
		border-radius: 14px;
	}

	.u-figure b {
		font-size: 27px;
	}

	/* Two columns re-cut the rows, so the warm/cool split has to be re-cut with
	   them: by index it would leave one of each stranded in the middle row. */
	.u-figure--cool b {
		color: #e2650f;
	}

	.u-figure:nth-child(4n + 3) b,
	.u-figure:nth-child(4n + 4) b {
		color: #1257bd;
	}

	.u-figure span {
		margin-top: 5px;
		font-size: 12.5px;
	}

}

/* The stand-in frame, shown only to someone who can actually fill it. */
.u-numbers__film--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: #f4f5f7;
	border: 2px dashed #c9cdd3;
	box-shadow: none;
}

.u-numbers__film--empty p {
	margin: 0;
	font-size: 15.5px;
	font-weight: 800;
	line-height: 1.45;
	color: #6b7280;
	text-align: center;
}

.u-numbers__film--empty span {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 500;
}

/* ============================================================
   5 · The journey abroad
   ============================================================ */

.u-journey {
	position: relative;
	overflow: hidden;
	padding: 78px 40px 0;
	background: #cfd8e4 url("../img/hanh-trinh-nen.jpg") center top / cover no-repeat;
}

/* Dark type on a photograph reads only where the photograph has been given up
   on. The wash bleaches the top of the picture out under the heading and
   releases it again below, so the delegation still comes through. */
.u-journey__wash {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 58%;
	background: linear-gradient(rgba(255, 255, 255, 0.94) 26%, rgba(255, 255, 255, 0.5) 62%, transparent);
}

.u-journey__heading {
	position: relative;
	z-index: 2;
	margin: 0 0 0;
	font-size: clamp(26px, 3.5vw, 40px);
	font-weight: 900;
	line-height: 1.24;
	letter-spacing: -0.02em;
	color: #26303b;
	text-align: center;
	text-wrap: balance;
}

.u-journey__heading em {
	font-style: normal;
	color: #e2650f;
}

.u-journey__heading span {
	display: block;
}

.u-journey__stage {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	max-width: 1290px;
	margin: 46px auto 0;
}

/* Pushed right so the group in the photograph is not covered, and running off
   the bottom edge: the section is a glimpse of something still going on, not a
   framed exhibit. */
.u-journey__film {
	position: relative;
	width: 62%;
	aspect-ratio: 16 / 9;
	border-radius: 16px 16px 0 0;
	overflow: hidden;
	background: #20406b;
	box-shadow: 0 -6px 40px rgba(20, 30, 50, 0.28);
}

.u-journey__film iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.u-journey__film--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(255, 255, 255, 0.88);
	border: 2px dashed #a9b4c2;
	border-bottom: 0;
	box-shadow: none;
}

.u-journey__film--empty p {
	margin: 0;
	font-size: 15.5px;
	font-weight: 800;
	line-height: 1.45;
	color: #56606c;
	text-align: center;
}

.u-journey__film--empty span {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 500;
}

/* With no film at all the section is a photograph with a heading on it, so it
   needs its own bottom edge rather than the one the film was providing. */
.u-journey--plain {
	padding-bottom: 300px;
}

.u-journey--plain .u-journey__stage {
	display: none;
}

/* ---------- phones ---------- */

@media (max-width: 921px) {

	.u-journey {
		padding: 48px 18px 0;
	}

	.u-journey__wash {
		height: 70%;
	}

	.u-journey__stage {
		margin-top: 28px;
	}

	.u-journey__film {
		width: 100%;
	}

	.u-journey--plain {
		padding-bottom: 190px;
	}

}

/* ============================================================
   6 · The agents' evenings
   ============================================================ */

.u-stories {
	padding: 92px 40px;
	background: #fff;
}

.u-stories__inner {
	max-width: 1290px;
	margin: 0 auto;
}

.u-stories__heading {
	margin: 0 0 66px;
	font-size: clamp(26px, 3.5vw, 40px);
	font-weight: 900;
	line-height: 1.24;
	letter-spacing: -0.02em;
	color: #26303b;
	text-align: center;
	text-wrap: balance;
}

.u-stories__heading em {
	font-style: normal;
	color: #e2650f;
}

.u-stories__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 38px;
	align-items: start;
	padding: 0 40px 40px;
	background: #fef3eb;
	border-radius: 16px;
}

/* Lapping over the top edge of the card, the same move the intro card makes
   over the hero — the page uses it twice on purpose. */
.u-stories__shot {
	margin-top: -46px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(40, 30, 20, 0.2);
}

.u-stories__shot img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.u-stories__words {
	position: relative;
	padding: 44px 0 6px;
}

.u-stories__quo {
	position: absolute;
	right: 0;
	top: 6px;
	font-size: 76px;
	font-weight: 900;
	line-height: 0.7;
	color: #f6c49a;
}

.u-stories__words h3 {
	margin: 0 0 14px;
	padding-right: 70px;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.45;
	color: #26303b;
}

.u-stories__words p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.75;
	color: #4b545e;
	text-align: justify;
}

.u-stories__strip {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-top: 44px;
}

.u-stories__arrow {
	flex: none;
	width: 46px;
	height: 46px;
	margin-top: 62px;
	padding: 0;
	font-size: 22px;
	line-height: 1;
	color: #fff;
	background: #fbd6b3;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s ease;
}

.u-stories__arrow:hover,
.u-stories__arrow:focus-visible {
	background: #f0871e;
}

.u-stories__thumbs {
	display: grid;
	flex: 1;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.u-thumb {
	display: block;
	width: 100%;
	min-width: 0;
	padding: 0;
	font: inherit;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
}

.u-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 8px;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.u-thumb[aria-current="true"] img {
	box-shadow: 0 0 0 3px #e2650f;
	transform: translateY(-2px);
}

.u-thumb span {
	display: block;
	margin-top: 9px;
	font-size: 15px;
	line-height: 1.4;
	color: #3d4650;
	overflow-wrap: anywhere;
}

.u-stories__count {
	margin: 26px 0 0;
	font-size: 13.5px;
	font-weight: 700;
	color: #6b7280;
	text-align: center;
}

/* ---------- phones ---------- */

@media (max-width: 921px) {

	.u-stories {
		padding: 54px 20px;
	}

	.u-stories__heading {
		margin-bottom: 44px;
	}

	.u-stories__card {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 0 16px 24px;
	}

	.u-stories__shot {
		margin-top: -30px;
	}

	.u-stories__words {
		padding: 4px 0;
	}

	.u-stories__quo {
		top: -4px;
		font-size: 52px;
	}

	.u-stories__words h3 {
		padding-right: 40px;
		font-size: 16.5px;
	}

	.u-stories__strip {
		gap: 8px;
		margin-top: 24px;
	}

	.u-stories__arrow {
		width: 32px;
		height: 32px;
		margin-top: 36px;
		font-size: 16px;
	}

	.u-stories__thumbs {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.u-thumb span {
		margin-top: 5px;
		font-size: 11.5px;
	}

}

/* ============================================================
   7 · Contact
   ============================================================ */

.u-contact {
	position: relative;
	overflow: hidden;
	padding: 74px 40px;
	background: #26303b url("../img/lien-he-nen.jpg") center / cover no-repeat;
}

/* Lit from the left, where the card sits, and cooling to the right so the hall
   still reads as a photograph rather than wallpaper. */
.u-contact__haze {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.24) 55%, rgba(30, 40, 52, 0.3));
}

.u-contact__inner {
	position: relative;
	z-index: 2;
	max-width: 1290px;
	margin: 0 auto;
}

.u-contact__card {
	width: min(480px, 100%);
	overflow: hidden;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 20px 50px rgba(10, 15, 25, 0.3);
}

/* The border of an airmail envelope: the one flourish in an otherwise plain
   form, and the thing that stops it looking like a database screen. */
.u-contact__stripe {
	height: 14px;
	background: repeating-linear-gradient(115deg,
		#d9382f 0 16px,
		#fff 16px 30px,
		#2f6fd9 30px 46px,
		#fff 46px 60px);
}

.u-contact__body {
	padding: 30px 32px 32px;
}

.u-contact__body h2 {
	margin: 0 0 22px;
	font-size: clamp(22px, 2.6vw, 29px);
	font-weight: 900;
	letter-spacing: -0.015em;
	color: #26303b;
}

.u-contact__note {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-radius: 9px;
	font-size: 14.5px;
	line-height: 1.5;
}

.u-contact__note--ok {
	background: #e9f5ec;
	color: #226b3e;
}

.u-contact__note--bad {
	background: #fdeceb;
	color: #a2322a;
}

.u-contact__body label {
	display: block;
	margin: 0 0 7px;
	font-size: 15px;
	font-weight: 600;
	color: #2c343d;
}

.u-contact__body label i {
	font-style: normal;
	color: #d9382f;
}

.u-contact__body input,
.u-contact__body select,
.u-contact__body textarea {
	width: 100%;
	margin: 0 0 18px;
	padding: 13px 15px;
	font-family: inherit;
	font-size: 15px;
	color: #26303b;
	background: #fff;
	border: 1px solid #dfe3e8;
	border-radius: 9px;
	box-shadow: none;
}

.u-contact__body input:focus,
.u-contact__body select:focus,
.u-contact__body textarea:focus {
	border-color: #f0871e;
	outline: 2px solid rgba(240, 135, 30, 0.28);
	outline-offset: 1px;
}

.u-contact__body textarea {
	min-height: 92px;
	resize: vertical;
}

.u-contact__tel {
	display: flex;
	align-items: stretch;
	gap: 9px;
	margin-bottom: 18px;
}

.u-contact__tel span {
	display: flex;
	flex: none;
	align-items: center;
	padding: 0 16px;
	font-size: 15px;
	font-weight: 700;
	color: #2c343d;
	background: #f4f5f7;
	border: 1px solid #dfe3e8;
	border-radius: 9px;
}

/* Without this the field sets the row width and the pair overflows the card. */
.u-contact__tel input {
	flex: 1;
	min-width: 0;
	margin: 0;
}

/* Off-screen rather than display:none — a robot filling forms reads the markup,
   and skips anything the stylesheet has plainly hidden. */
.u-contact__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.u-contact__send {
	width: 100%;
	margin-top: 6px;
	padding: 16px;
	font-family: inherit;
	font-size: 16.5px;
	font-weight: 800;
	color: #fff;
	background: #e2650f;
	border: 0;
	border-radius: 9px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.u-contact__send:hover,
.u-contact__send:focus-visible {
	background: #c9560c;
}

@media (max-width: 921px) {

	.u-contact {
		padding: 40px 18px;
	}

	.u-contact__body {
		padding: 22px 18px 24px;
	}

}

/* ============================================================
   8 · The footer
   ============================================================ */

.u-foot {
	padding: 56px 40px 24px;
	font-size: 15px;
	color: #c4ccd6;
	background: #101823;
}

.u-foot__inner {
	max-width: 1290px;
	margin: 0 auto;
}

.u-foot__logo img {
	width: auto;
	max-width: 160px;
	height: auto;
	margin-bottom: 12px;
}

.u-foot__corp {
	margin: 0 0 34px;
	font-size: 19px;
	font-weight: 900;
	color: #fff;
}

.u-foot__cols {
	display: grid;
	grid-template-columns: 1.2fr 1.1fr 0.85fr 0.95fr;
	gap: 34px;
}

.u-foot h2 {
	margin: 0 0 16px;
	font-size: 16.5px;
	font-weight: 700;
	color: #8f9caa;
}

.u-foot__later {
	margin-top: 26px;
}

.u-foot p {
	margin: 0 0 12px;
	line-height: 1.7;
	color: #c4ccd6;
}

.u-foot ul {
	margin: 0;
	padding: 0;
	line-height: 2.2;
	list-style: none;
}

.u-foot__social {
	display: flex;
	gap: 14px;
	line-height: 1;
}

.u-foot__social a {
	display: block;
	color: #c4ccd6;
	transition: color 0.15s ease;
}

.u-foot__social a:hover,
.u-foot__social a:focus-visible {
	color: #f0871e;
}

.u-foot__social svg {
	width: 26px;
	height: 26px;
}

.u-foot__base {
	margin: 36px 0 0;
	padding-top: 20px;
	font-size: 14px;
	color: #7d8896;
	text-align: center;
	border-top: 1px solid #26313d;
}

/* Astra prints its own copyright bar under this. Two of them one above the
   other is one too many, and this one belongs to the page. */
.page-template-template-home .site-footer {
	display: none;
}

@media (max-width: 921px) {

	.u-foot {
		padding: 34px 20px 18px;
		font-size: 13.5px;
	}

	.u-foot__corp {
		margin-bottom: 22px;
		font-size: 16px;
	}

	.u-foot__cols {
		grid-template-columns: 1fr;
		gap: 24px;
	}

}