@charset "UTF-8";
/*
 * Ascenthya: What We Offer deep-dive pages, version 3 (.a3)
 *
 * Direction chosen by the CTO on 14 October 2026: a full-bleed photograph,
 * then deep green carries most of the page. The palette is the brand's three
 * colours; only their share changes.
 *
 * Rules this sheet keeps:
 *   - Gold is never text on the light ground (2.1:1). On deep green it is a
 *     numeral, a rule, a drawing or a button fill.
 *   - No all-caps labels, no numbering unless the content is a real
 *     sequence, prose instead of dash lists.
 *   - Every colour reads a token from ascenthya-header.css :root.
 */

.a3, .a3 *, .a3 *::before, .a3 *::after { box-sizing: border-box; }

.a3 {
	--g-deep: var(--asc-green-deep, #0E2E27);
	--g-mid: var(--asc-green, #1F5A4A);
	--g-gold: var(--asc-gold, #C1A55B);
	--g-light: var(--asc-surface-alt, #F4F2EC);
	--g-ink: var(--asc-ink, #0E2E27);
	--g-soft: var(--asc-ink-soft, #4A5F58);
	--g-on: rgba(244, 242, 236, .76);
	--g-on-quiet: rgba(244, 242, 236, .52);
	--g-rule-dark: rgba(244, 242, 236, .14);
	--g-rule-light: rgba(14, 46, 39, .14);
	--g-serif: var(--asc-serif, "EB Garamond", Georgia, serif);
	--g-sans: var(--asc-sans, "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif);
	--g-ease: cubic-bezier(.16, 1, .3, 1);
	--g-shell: var(--asc-shell, 1280px);
	--g-gutter: var(--asc-gutter, clamp(20px, 3.2vw, 44px));
	--g-band: clamp(88px, 11vw, 152px);
	--g-bar-h: 58px;

	background: var(--g-light);
	color: var(--g-ink);
	font-family: var(--g-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Resets carry no weight (:where), so every component rule below wins. */
:where(.a3) :where(p, h1, h2, h3, h4, figure, ul) { margin: 0; }
:where(.a3) img { display: block; max-width: 100%; }
:where(.a3) a { text-decoration: none; color: inherit; }
.a3 a:not(.a3-crumbs a) { text-decoration: none; }

.a3-shell {
	width: 100%;
	max-width: calc(var(--g-shell) + var(--g-gutter) * 2);
	margin: 0 auto;
	padding-inline: var(--g-gutter);
}

.a3-dark { background: var(--g-deep); color: var(--g-light); }
.a3-light { background: var(--g-light); color: var(--g-ink); }

.a3 .a3-h2 {
	color: inherit;
	font-family: var(--g-serif);
	font-weight: 400;
	font-size: clamp(40px, 4.8vw, 66px);
	line-height: 1.02;
	letter-spacing: -.02em;
	text-wrap: balance;
}

/* ================================================================== hero */

.a3-hero {
	position: relative;
	min-height: max(600px, min(92vh, 900px));
	display: flex;
	color: var(--g-light);
	background: var(--g-deep);
	overflow: hidden;
	isolation: isolate;
}

.a3-hero > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 58%;
	z-index: -2;
}

.a3-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(14, 46, 39, .5) 0%, rgba(14, 46, 39, 0) 24%, rgba(14, 46, 39, .08) 48%, rgba(14, 46, 39, .9) 100%),
		linear-gradient(90deg, rgba(14, 46, 39, .38) 0%, rgba(14, 46, 39, 0) 55%);
}

.a3-hero__in {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-top: 28px;
	padding-bottom: clamp(48px, 7vw, 88px);
}

.a3-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	font-size: 14px;
	line-height: 1.4;
	color: rgba(244, 242, 236, .82);
}

.a3-crumbs a:hover { color: var(--g-light); text-decoration: underline; text-underline-offset: 3px; }
.a3-crumbs [aria-current] { color: var(--g-light); }

.a3 .a3-hero h1 {
	color: var(--g-light);
	font-family: var(--g-serif);
	font-weight: 400;
	font-size: clamp(52px, 8.4vw, 116px);
	line-height: .95;
	letter-spacing: -.026em;
	max-width: 16ch;
	text-wrap: balance;
}

.a3-hero__line {
	margin-top: clamp(20px, 2.4vw, 30px);
	font-family: var(--g-serif);
	font-size: clamp(21px, 2vw, 27px);
	line-height: 1.35;
	color: rgba(244, 242, 236, .9);
	max-width: 30ch;
}

@media (prefers-reduced-motion: no-preference) {
	.a3-hero > img { animation: a3-settle 2.4s var(--g-ease) both; }
	.a3-hero h1, .a3-hero__line { animation: a3-rise .7s var(--g-ease) both; }
	.a3-hero__line { animation-delay: .12s; }
}

@keyframes a3-settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes a3-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ============================================================ anchor bar */

.a3-bar {
	position: sticky;
	top: var(--asc-header-h, 0px);
	z-index: 20;
	background: var(--g-deep);
	border-bottom: 1px solid var(--g-rule-dark);
}

.a3-bar__row {
	display: flex;
	gap: clamp(24px, 3.4vw, 44px);
	height: var(--g-bar-h);
	align-items: stretch;
	overflow-x: auto;
	scrollbar-width: none;
}

.a3-bar__row::-webkit-scrollbar { display: none; }

.a3-bar a {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 500;
	color: var(--g-on-quiet);
	white-space: nowrap;
	box-shadow: inset 0 0 0 var(--g-gold);
	transition: color .2s ease, box-shadow .2s ease;
}

.a3-bar a:hover { color: var(--g-light); }
.a3-bar a.is-active { color: var(--g-light); box-shadow: inset 0 -2px 0 var(--g-gold); }

.a3 [id] { scroll-margin-top: calc(var(--asc-header-h, 0px) + var(--g-bar-h) + 8px); }

/* ======================================================= approach + figures */

.a3-approach { padding-block: var(--g-band); }

.a3-approach__lead {
	font-family: var(--g-serif);
	font-size: clamp(30px, 3.7vw, 52px);
	line-height: 1.16;
	letter-spacing: -.012em;
	max-width: 23ch;
	text-wrap: pretty;
}

.a3-approach__sub {
	margin-top: clamp(28px, 3vw, 40px);
	margin-left: auto;
	max-width: 44ch;
	font-size: 18.5px;
	line-height: 1.68;
	color: var(--g-on);
}

@media (min-width: 900px) {
	.a3-approach__sub { margin-right: 8%; }
}

.a3-figs {
	margin-top: clamp(72px, 9vw, 120px);
	border-top: 1px solid rgba(193, 165, 91, .5);
}

.a3-m {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	align-items: center;
	padding-block: clamp(30px, 3.4vw, 44px);
	border-bottom: 1px solid var(--g-rule-dark);
}

@media (min-width: 900px) {
	.a3-m { grid-template-columns: 4fr 8fr; gap: 24px; }
}

.a3-m__n {
	display: block;
	font-family: var(--g-serif);
	font-size: clamp(54px, 5.6vw, 80px);
	line-height: 1;
	letter-spacing: -.02em;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--g-gold);
}

.a3-m__n .u { font-size: .52em; vertical-align: .6em; margin-inline: .03em; letter-spacing: 0; }

.a3-m__l {
	display: block;
	margin-top: 12px;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--g-on);
	max-width: 30ch;
}

.a3-scale { position: relative; height: 66px; }

.a3-scale__track, .a3-scale__fill { position: absolute; left: 0; top: 22px; height: 12px; }
.a3-scale__track { right: 0; background: rgba(244, 242, 236, .1); }
.a3-scale__fill { width: calc(var(--v) * 100%); background: var(--g-gold); transform-origin: left center; }

.a3-scale__end {
	position: absolute;
	left: calc(var(--v) * 100%);
	top: 8px;
	width: 2px;
	height: 40px;
	margin-left: -1px;
	background: var(--g-light);
}

.a3-scale__tk {
	position: absolute;
	top: 44px;
	left: calc(var(--at) * 100%);
	padding-top: 10px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	color: var(--g-on-quiet);
	white-space: nowrap;
	transform: translateX(-50%);
}

.a3-scale__tk:first-of-type { transform: none; }
.a3-scale__tk:last-of-type { transform: translateX(-100%); }

.a3-ticks { position: relative; padding-right: 40px; }

.a3-ticks__row { display: flex; align-items: flex-end; justify-content: space-between; height: 48px; }

.a3-ticks__row i {
	display: block;
	width: 2px;
	height: 26px;
	background: rgba(244, 242, 236, .62);
	transform-origin: bottom center;
}

.a3-ticks__row i:nth-child(10n) { height: 48px; background: var(--g-gold); }

.a3-ticks__k { position: relative; height: 14px; margin-top: 10px; font-size: 12px; font-weight: 500; line-height: 1; color: var(--g-on-quiet); }
.a3-ticks__k span { position: absolute; left: calc(var(--p) * (100% - 2px) + 1px); transform: translateX(-50%); }

.a3-ticks__plus {
	position: absolute;
	right: 6px;
	top: 6px;
	font-family: var(--g-serif);
	font-size: 34px;
	line-height: 1;
	color: var(--g-gold);
}

.a3-jur { display: flex; flex-wrap: wrap; gap: 20px 56px; }
.a3-jur__g { display: flex; flex-direction: column; gap: 12px; }
.a3-jur__g > div { display: flex; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(244, 242, 236, .4); }
.a3-jur__g i { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--g-gold); }
.a3-jur__g > span { font-size: 13px; font-weight: 500; line-height: 1; color: var(--g-on); }

.a3-figs__note { margin-top: 20px; font-size: 13px; color: var(--g-on-quiet); }

@media (max-width: 699px) {
	.a3-scale__tk.is-minor, .a3-ticks__k span.is-minor { display: none; }
}

.a3.is-motion .a3-scale__fill { transform: scaleX(0); transition: transform 1.2s var(--g-ease) .1s; }
.a3.is-motion .a3-scale__end { opacity: 0; transition: opacity .3s ease 1.1s; }
.a3.is-motion .a3-ticks__row i { transform: scaleY(0); transition: transform .3s var(--g-ease) calc(var(--i) * 12ms); }
.a3.is-motion .a3-ticks__plus { opacity: 0; transition: opacity .3s ease .9s; }
.a3.is-motion .a3-jur__g i { transform: scale(0); transition: transform .3s var(--g-ease) calc(var(--i) * 60ms); }
.a3.is-motion .a3-m.is-in .a3-scale__fill,
.a3.is-motion .a3-m.is-in .a3-ticks__row i,
.a3.is-motion .a3-m.is-in .a3-jur__g i { transform: none; }
.a3.is-motion .a3-m.is-in .a3-scale__end,
.a3.is-motion .a3-m.is-in .a3-ticks__plus { opacity: 1; }

/* ============================================================ the events */

.a3-events { padding-block: var(--g-band); }

.a3-events__intro {
	margin-top: 22px;
	font-family: var(--g-serif);
	font-size: clamp(20px, 1.9vw, 24px);
	line-height: 1.45;
	color: var(--g-on);
	max-width: 40ch;
}

.a3-panel { margin-top: clamp(56px, 6vw, 80px); }
.a3-panel + .a3-panel { padding-top: clamp(56px, 6vw, 80px); border-top: 1px solid var(--g-rule-dark); }

.a3 .a3-panel__name {
	color: inherit;
	font-family: var(--g-serif);
	font-weight: 400;
	font-size: clamp(32px, 3.2vw, 44px);
	line-height: 1.05;
	margin-bottom: 14px;
}

.a3-panel__q {
	font-family: var(--g-serif);
	font-style: italic;
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.3;
	color: var(--g-gold);
	max-width: 34ch;
}

.a3-moments {
	margin: clamp(36px, 4vw, 52px) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media (min-width: 760px) {
	.a3-moments { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4.4vw, 64px); }
}

.a3-moments svg { display: block; width: 112px; height: 90px; margin-bottom: 24px; overflow: visible; }
.a3-moments svg * { fill: none; stroke: var(--g-light); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a3-moments svg .g { stroke: var(--g-gold); }

.a3 .a3-moments h4 {
	margin: 0;
	font-family: var(--g-serif);
	font-weight: 400;
	font-size: clamp(24px, 2.1vw, 29px);
	line-height: 1.2;
	color: var(--g-light);
	text-wrap: balance;
}

.a3-moments p { margin-top: 12px; font-size: 16.5px; line-height: 1.66; color: var(--g-on); max-width: 34ch; }

.a3 .a3-link {
	display: inline-block;
	margin-top: 30px;
	font-size: 16px;
	font-weight: 500;
	color: var(--g-mid);
	padding-bottom: 4px;
	border-bottom: 2px solid var(--g-gold);
	transition: color .2s ease;
}

.a3 .a3-link:hover { color: var(--g-ink); }
.a3 .a3-link:focus-visible { outline: 2px solid var(--g-mid); outline-offset: 4px; }

/* ================================================================ close */

.a3-close {
	position: relative;
	padding-block: var(--g-band) calc(var(--g-band) * .5 + clamp(120px, 29.7vw, 480px));
	overflow: hidden;
}

.a3-close__line {
	font-family: var(--g-serif);
	font-size: clamp(34px, 4.4vw, 62px);
	line-height: 1.1;
	letter-spacing: -.016em;
	max-width: 20ch;
	text-wrap: balance;
}

.a3 .a3-btn {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	margin-top: clamp(32px, 3.4vw, 44px);
	padding: 0 30px;
	border-radius: 999px;
	background: var(--g-gold);
	color: var(--g-deep);
	font-size: 16px;
	font-weight: 600;
	transition: background-color .2s ease;
}

.a3 .a3-btn:hover { background: #CDB46F; }
.a3 .a3-btn:focus-visible { outline: 2px solid var(--g-light); outline-offset: 4px; }

.a3-close__bridge {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: clamp(120px, 29.7vw, 480px);
	pointer-events: none;
	opacity: .55;
}

.a3-close__bridge * { fill: none; }
.a3-close__bridge .cable { stroke: var(--g-gold); stroke-width: 1.6; }
.a3-close__bridge .hang line { stroke: var(--g-gold); stroke-width: .8; opacity: .6; }
.a3-close__bridge .tower, .a3-close__bridge .deck { stroke: rgba(244, 242, 236, .7); stroke-width: 2; }

/* ================================================================ more */

.a3-more { padding-block: clamp(72px, 8vw, 112px); }

.a3 .a3-more__title {
	font-family: var(--g-serif);
	font-weight: 400;
	font-size: clamp(26px, 2.4vw, 32px);
	line-height: 1.15;
	color: var(--g-ink);
}

.a3-more__list { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--g-rule-light); }

.a3-more__list a {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
	padding: 28px 0;
	border-bottom: 1px solid var(--g-rule-light);
}

@media (min-width: 900px) {
	.a3-more__list a { grid-template-columns: 5fr 7fr; gap: 24px; align-items: baseline; }
}

.a3 .a3-more__list strong {
	font-family: var(--g-serif);
	font-weight: 400;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.1;
	color: var(--g-ink);
	transition: color .2s ease;
}

.a3-more__list span { font-size: 16.5px; line-height: 1.6; color: var(--g-soft); max-width: 52ch; }
.a3 .a3-more__list a:hover strong { color: var(--g-mid); text-decoration: underline; text-decoration-color: var(--g-gold); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.a3-more__list a:focus-visible { outline: 2px solid var(--g-mid); outline-offset: 4px; }

/* ================================================================ phones */

@media (max-width: 699px) {
	.a3 { --g-band: 80px; }
	.a3-hero { min-height: 82vh; }
	.a3-hero > img { object-position: 62% 50%; }
	.a3-approach__sub { margin-left: 0; font-size: 17px; }
	.a3-moments { gap: 28px; }
	.a3-moments li { display: grid; grid-template-columns: 64px 1fr; gap: 0 18px; align-items: start; }
	.a3-moments svg { grid-row: span 2; width: 64px; height: 52px; margin: 2px 0 0; }
	.a3 .a3-moments h4 { font-size: 23px; }
	.a3-moments p { margin-top: 6px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.a3 *, .a3 *::before, .a3 *::after { animation: none !important; transition: none !important; }
}