/* ===========================================================================
   TAPP Digital theme: page sections.

   The layouts the TAPP Builder blocks and the theme's own templates draw:
   heroes, services, work, products, stats, process, quotes, FAQ, contact,
   flow steps, Insights cards, the article page. Tokens and the site chrome
   are in tapp.css.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   Shared pieces
--------------------------------------------------------------------------- */

.has-kicker { margin-top: 14px; }
.section-head .t-h2 { max-width: 640px; }
.section-head__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 380px; }
.section-head__aside p { font-size: 15px; line-height: 1.7; color: var(--fg-muted); }
.section-head--center .section-head__aside { align-items: center; max-width: 640px; }

.card-grid {
	display: grid;
	gap: 22px;
}
@media (min-width: 768px) {
	.card-grid--2,
	.card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tick-list {
	display: grid;
	gap: 10px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.55;
	color: var(--fg);
}
.tick-list li { display: flex; gap: 11px; align-items: flex-start; }
.tick-list .icon {
	flex-shrink: 0;
	margin-top: 3px;
	padding: 3px;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: var(--tint-mint-icon);
	color: var(--color-teal-600);
}
.on-dark .tick-list .icon,
.section--dark .tick-list .icon,
.section--petrol .tick-list .icon,
.section--deep .tick-list .icon { color: var(--color-mint); }

.filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}
.filter-chips a,
.filter-chips button {
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--rule-dark-strong);
	font-size: 13px;
	font-weight: 500;
	color: var(--muted-dark-85);
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.filter-chips a:hover,
.filter-chips button:hover { border-color: var(--color-mint); color: #ffffff; }
.filter-chips [aria-current="page"],
.filter-chips [aria-pressed="true"] { border-color: var(--color-mint); background: var(--color-mint); color: var(--color-teal-900); }
.filter-chips--light { margin: -18px 0 30px; }
.filter-chips--light button { border-color: var(--input-border); color: var(--muted-light); }
.filter-chips--light button:hover { border-color: var(--color-teal-500); color: var(--color-ink); }
.filter-chips--light [aria-pressed="true"] { border-color: var(--color-teal-900); background: var(--color-teal-900); color: #ffffff; }
.section--dark .filter-chips--light button { border-color: var(--rule-dark-strong); color: var(--muted-dark-85); }

.empty-note {
	padding: 40px 28px;
	border-radius: var(--radius-card);
	border: 1px solid var(--rule-light-soft);
	background: #ffffff;
	font-size: 15px;
	color: var(--muted-light);
}

.underline-link {
	padding-bottom: 2px;
	border-bottom: 1px solid var(--link-underline);
	font-size: 13px;
	font-weight: 500;
	color: var(--color-teal-600);
}
.underline-link:hover { border-bottom-color: currentColor; }

.browser--lg { margin-top: 0; border-radius: var(--radius-card); border-color: var(--rule-light); box-shadow: 0 30px 70px rgba(3, 31, 39, 0.18); background: #ffffff; }
.on-dark .browser--lg,
.section--dark .browser--lg,
.section--petrol .browser--lg,
.hero .browser--lg { border-color: var(--rule-dark-mid); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4), var(--shadow-mock-glow); }
.browser--lg .browser__bar { padding: 10px 14px; gap: 6px; }
.browser--lg .browser__bar span { width: 9px; height: 9px; }
/* Large frames show the whole screen at its own shape: a crop cuts headlines
   off wide captures. An empty frame keeps a 16:10 placeholder. */
.browser--lg .browser__screen { aspect-ratio: auto; }
.browser--lg .browser__screen:has(.browser__empty) { aspect-ratio: 16 / 10; }
.browser--lg .browser__screen img { position: static; display: block; width: 100%; height: auto; }
.browser--lg .browser__screen img { transition: transform 0.6s var(--ease-soft); }
a:hover .browser--lg .browser__screen img,
.browser--lg:hover .browser__screen img { transform: scale(1.025); }

/* Loose core blocks on a page built from TAPP blocks keep to the reading width. */
.site-main > p,
.site-main > h2,
.site-main > h3,
.site-main > ul,
.site-main > ol,
.site-main > figure,
.site-main > blockquote,
.site-main > .wp-block-buttons,
.site-main > .wp-block-columns,
.site-main > .wp-block-table {
	max-width: calc(760px + var(--gutter) * 2);
	margin: 0 auto;
	padding: 1em var(--gutter) 0;
}

/* ---------------------------------------------------------------------------
   Hero
--------------------------------------------------------------------------- */

.hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.hero--home {
	background: var(--color-deep);
	padding: var(--nav-h) 0 104px;
}
@media (min-width: 768px) {
	.hero--home { padding-bottom: 132px; }
}
.admin-bar .hero--home { padding-top: calc(var(--nav-h) + 32px); }
.hero__video {
	position: absolute;
	inset: 0;
	z-index: -3;
	pointer-events: none;
}
.hero__video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.7s ease;
}
.hero__video video[data-ready] { opacity: 1; }
.hero__wash { position: absolute; inset: 0; z-index: -2; opacity: 0.84; }
.hero__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(3, 31, 39, 0.55) 0%, rgba(3, 31, 39, 0.15) 35%, rgba(3, 31, 39, 0.75) 100%);
}

.hero__grid {
	position: relative;
	display: grid;
	align-items: center;
	gap: 24px;
}
.hero--home .hero__grid { padding-top: 72px; }
@media (min-width: 768px) {
	.hero--home .hero__grid { padding-top: 88px; }
}
@media (min-width: 1024px) {
	.hero--home.has-visual .hero__grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: 32px; }
}

.hero__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	text-align: center;
}
@media (min-width: 1024px) {
	.hero__copy { align-items: flex-start; text-align: left; }
}
.hero--page .hero__copy { align-items: flex-start; text-align: left; }
.hero.no-visual .hero__copy { max-width: 900px; }

.hero__eyebrow {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.34em;
	text-transform: uppercase;
}
@media (min-width: 768px) {
	.hero__eyebrow { font-size: 13.5px; }
}
.hero__rule { width: min(380px, 70vw); max-width: 100%; margin-top: 16px; }
.hero__title { margin-top: 32px; color: #ffffff; }
.hero--home .hero__title { font-size: 34px; line-height: 1.16; }
@media (min-width: 640px) { .hero--home .hero__title { font-size: 42px; } }
@media (min-width: 1024px) { .hero--home .hero__title { font-size: 46px; } }
@media (min-width: 1280px) { .hero--home .hero__title { font-size: 54px; } }
.hero__text {
	max-width: 52ch;
	margin-top: 24px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--muted-dark-78);
}
@media (min-width: 768px) {
	.hero__text { font-size: 19px; }
}
.hero__actions { margin-top: 40px; justify-content: center; }
@media (min-width: 1024px) {
	.hero__actions { justify-content: flex-start; }
}
.hero--page .hero__actions { justify-content: flex-start; margin-top: 32px; }

.hero__visual--mark {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 40px 24px;
}
.mark-readout {
	display: flex;
	align-items: center;
	gap: 12px;
	width: min(420px, 88%);
	min-width: 0;
	margin-top: 56px;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted-dark-45);
}
.mark-readout .mark-blip { flex-shrink: 0; width: 8px; height: 8px; border-radius: 999px; background: var(--color-mint); }
.mark-readout i { flex: 1; height: 1px; background: var(--rule-dark-mid); }

/* Page hero. */
.hero--page {
	padding: 48px 0 72px;
}
@media (min-width: 768px) {
	.hero--page { padding: 64px 0 88px; }
}
@media (min-width: 1024px) {
	.hero--page.has-visual .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(420px, 52%, 680px)); gap: 56px; }
}
.hero--page .crumbs { margin-bottom: 22px; }
.hero__kicker { margin-bottom: -14px; }
.hero--page .hero__title { margin-top: 22px; font-size: clamp(34px, 4.1vw, 52px); line-height: 1.1; }
.hero--page .hero__title .t-accent { display: inline; }
.hero--page .hero__text { margin-top: 20px; }
.hero__stats {
	display: grid;
	width: 100%;
	margin: 40px 0 0;
	border-top: 1px solid var(--rule-dark-12);
}
.hero__stats > div { padding: 22px 0 0; }
.hero__stats dd { margin: 0; font-size: 32px; line-height: 1.1; font-weight: 300; color: #ffffff; }
.hero__stats dt { margin-top: 10px; font-size: 12px; color: var(--muted-dark-60); }
@media (min-width: 640px) {
	.hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hero__stats > div { padding: 26px 24px 0 26px; border-left: 1px solid var(--rule-dark-12); }
	.hero__stats > div:first-child { padding-left: 0; border-left: 0; }
}
@media (min-width: 768px) {
	.hero__stats dd { font-size: 38px; }
}
.figure__unit { font-size: 0.58em; color: var(--accent); }
.figure__num { font-variant-numeric: tabular-nums; }
.js .figure__num--word { opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .figure__num--word.is-counted { opacity: 1; transform: none; }
html.a11y-motion .figure__num--word { opacity: 1 !important; transform: none !important; }

.hero__visual--shot,
.hero__visual--photo { min-width: 0; }
.hero__visual--photo img { width: 100%; border-radius: var(--radius-panel); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4); }
@media (min-width: 1024px) {
	.hero--page .hero__visual--shot .browser { animation: float 7s ease-in-out infinite; }
}

/* ---------------------------------------------------------------------------
   Logo wall
--------------------------------------------------------------------------- */

.logos { position: relative; padding: 48px 0; }
@media (min-width: 768px) {
	.logos { padding: 56px 0; }
}
.logos--dark { background: var(--color-teal-900); border-top: 1px solid var(--rule-dark-soft); }
.logos--light { background: var(--color-cream); border-block: 1px solid var(--rule-light-soft); }
.logos__head { display: flex; flex-direction: column; align-items: center; margin-bottom: 32px; padding-inline: var(--gutter); }
.logos__title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--muted-dark-60);
}
.logos--light .logos__title { color: var(--muted-light); }
.logos__rule { width: min(220px, 50vw); max-width: 100%; margin-top: 14px; }

.logo-wall {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 clamp(40px, 9vw, 150px), #000 calc(100% - clamp(40px, 9vw, 150px)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 clamp(40px, 9vw, 150px), #000 calc(100% - clamp(40px, 9vw, 150px)), transparent 100%);
}
.logo-wall:focus-visible { outline-offset: -4px; }
.logo-wall-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	animation: logo-wall-drift 64s linear infinite;
	will-change: transform;
}
.logo-wall-set { display: flex; flex-wrap: nowrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.logo-wall-set > li { padding: 8px 10px; }
.logo-wall-tile {
	display: grid;
	place-items: center;
	width: 200px;
	height: 104px;
	padding: 0 25px;
	border-radius: var(--radius-card);
	background: #ffffff;
	box-shadow: var(--shadow-logo-tile);
	transition: transform 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft);
}
.logos--light .logo-wall-tile { box-shadow: var(--shadow-card); border: 1px solid var(--rule-light-soft); }
.logo-wall-tile img { max-width: 150px; max-height: 66px; width: auto; height: auto; object-fit: contain; }
.logo-wall-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-logo-tile-hover); }
.logo-wall:hover .logo-wall-track,
.logo-wall:focus-within .logo-wall-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.logo-wall { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
	.logo-wall-track { transform: none; }
	.logo-wall-set[data-copy="2"],
	.logo-wall-set > li:not([data-pass="0"]) { display: none; }
}
html.a11y-motion .logo-wall { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
html.a11y-motion .logo-wall-track { transform: none; }
html.a11y-motion .logo-wall-set[data-copy="2"],
html.a11y-motion .logo-wall-set > li:not([data-pass="0"]) { display: none; }

/* ---------------------------------------------------------------------------
   Services: cards
--------------------------------------------------------------------------- */

.svc-cards { display: grid; gap: 22px; }
@media (min-width: 768px) {
	.svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.svc-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.svc-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.svc-cards--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.svc-cards--5 .svc-card { grid-column: span 2; }
	.svc-cards--5 .svc-card:nth-child(n + 4) { grid-column: span 3; }
	.svc-cards--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.svc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 30px 28px 32px;
	border-radius: var(--radius-card);
	border: 1px solid var(--rule-light-soft);
	background: #ffffff;
	color: var(--color-ink);
	transition: border-color 0.2s ease, transform 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft), background-color 0.2s ease;
}
.svc-card:hover { border-color: var(--color-teal-500); transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.svc-card__top { display: flex; align-items: center; justify-content: space-between; }
.svc-card__num { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; color: var(--color-teal-500); }
.svc-card__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--tint-mint-icon);
	color: var(--color-teal-600);
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.35s var(--ease-soft);
}
.svc-card:hover .svc-card__icon { background: var(--color-mint); color: var(--color-teal-900); transform: rotate(-6deg) scale(1.05); }
.svc-card__kicker { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-teal-500); }
.svc-card__title { margin-top: 6px; font-size: 24px; line-height: 1.2; font-weight: 500; }
.svc-card__blurb { font-size: 14.5px; line-height: 1.7; color: var(--muted-light); }
.svc-card__link {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--rule-light-soft);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--color-teal-600);
}
.svc-card__link .icon { transition: transform 0.25s var(--ease-soft); }
.svc-card:hover .svc-card__link .icon { transform: translateX(4px); }
.svc-card--inverted { border-color: var(--color-teal-900); background: var(--color-teal-900); color: #ffffff; }
.svc-card--inverted:hover { border-color: var(--color-teal-700); background: var(--color-teal-700); }
.svc-card--inverted .svc-card__num,
.svc-card--inverted .svc-card__kicker,
.svc-card--inverted .svc-card__link { color: var(--color-mint); }
.svc-card--inverted .svc-card__icon { background: var(--tint-mint-icon-strong); color: var(--color-mint); }
.svc-card--inverted .svc-card__blurb { color: var(--muted-dark-75); }
.svc-card--inverted .svc-card__link { border-top-color: var(--rule-mock); }

/* Services: tabs */
.svc-tabs { display: grid; gap: 28px; align-items: stretch; }
@media (min-width: 900px) {
	.svc-tabs { grid-template-columns: 320px minmax(0, 1fr); }
}
.svc-tabs__side { display: flex; flex-direction: column; gap: 10px; }
.svc-tabs__list { display: flex; flex-direction: column; gap: 10px; }
.svc-tabs__tab {
	padding: 17px 20px;
	border-radius: var(--radius-tile);
	border: 1px solid var(--rule-dark-mid);
	background: var(--wash-dark);
	text-align: left;
	color: var(--muted-dark);
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.svc-tabs__tab:hover { border-color: var(--tint-mint-panel-border); }
.svc-tabs__tab[aria-selected="true"] { border-color: var(--tab-border-active); background: var(--tint-mint-strong); color: #ffffff; }
.svc-tabs__name { display: flex; align-items: baseline; gap: 10px; font-size: 17px; font-weight: 500; }
.svc-tabs__num { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; opacity: 0.7; }
.svc-tabs__sub { display: block; margin-top: 6px; font-size: 12.5px; opacity: 0.7; }
.svc-tabs__aside {
	margin-top: auto;
	padding: 18px 20px;
	border-radius: var(--radius-tile);
	border: 1px solid var(--tint-mint-panel-border);
	background: var(--tint-mint-panel);
	transition: border-color 0.15s ease;
}
.svc-tabs__aside:hover { border-color: var(--tab-border-active); }
.svc-tabs__aside-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: #ffffff; }
.svc-tabs__aside-text { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: var(--muted-dark); }
.svc-tabs__panel {
	min-height: 360px;
	padding: 34px 34px 30px;
	border-radius: var(--radius-panel);
	border: 1px solid var(--panel-border);
	background: rgba(255, 255, 255, 0.05);
	animation: widget-in 0.35s var(--ease-out) both;
}
.svc-tabs__panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.svc-tabs__title { margin-top: 10px; font-size: 30px; font-weight: 500; color: #ffffff; }
.svc-tabs__blurb { max-width: 640px; margin-top: 14px; font-size: 16px; line-height: 1.75; color: var(--muted-dark-75); }
.svc-tabs__chips {
	display: grid;
	gap: 10px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) {
	.svc-tabs__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
}
.svc-tabs__chips li {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 14px;
	border-radius: var(--radius-chip);
	background: var(--tint-mint-chip);
	font-size: 14px;
	color: #e8fffa;
}
.svc-tabs__chips .icon { color: var(--color-mint); }
.svc-tabs__link { margin-top: 26px; font-size: 14px; }

/* Services: the flowing spine */
.services--spine { padding-block: 72px 80px; }
.spine { position: relative; display: grid; align-items: center; gap: 40px; }
@media (min-width: 1024px) {
	.spine { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
.spine__title { margin-top: 18px; font-size: 40px; line-height: 1.1; }
@media (min-width: 768px) {
	.spine__title { font-size: 54px; }
}
.spine__text { max-width: 440px; margin-top: 22px; font-size: 18px; line-height: 1.7; color: var(--muted-dark-75); }
.spine__rails { display: flex; flex-direction: column; gap: 16px; }
.spine__rail {
	padding: 20px 24px;
	border-radius: var(--radius-card);
	border: 1px solid var(--tint-mint-row-border, rgba(47, 227, 194, 0.24));
	background: rgba(255, 255, 255, 0.05);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.spine__rail:hover { border-color: var(--tab-border-active); background: rgba(255, 255, 255, 0.07); }
.spine__rail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.spine__num { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--color-mint); }
.spine__name { font-size: 19px; font-weight: 500; color: #ffffff; }
.spine__name:hover { color: var(--color-mint); }
.spine__sub { font-size: 13px; color: var(--muted-dark-60); }
@media (min-width: 768px) {
	.spine__sub { margin-left: auto; }
}
.spine__track { position: relative; height: 3px; margin-top: 18px; border-radius: 999px; background: var(--rule-dark-mid); }
.spine__packet {
	position: absolute;
	top: -3.5px;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--packet);
	box-shadow: 0 0 14px var(--packet);
	animation: flow-dot 5s linear infinite;
}
.spine__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.spine__chips li { padding: 6px 12px; border-radius: 999px; background: var(--tint-mint-chip-strong); font-size: 11.5px; color: var(--muted-dark-75); }
.spine__chips li:last-child { padding: 0; background: none; }
.spine__chips a { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: 11.5px; font-weight: 500; color: var(--color-mint); }

/* Services: detailed rows */
.svc-rows { display: flex; flex-direction: column; gap: 72px; }
.svc-row { display: grid; align-items: center; gap: 32px; }
@media (min-width: 1024px) {
	.svc-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; }
	.svc-row--flip .svc-row__copy { order: 2; }
}
.svc-row__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.svc-row__top { display: flex; align-items: center; gap: 14px; }
.svc-row__num { font-size: 40px; font-weight: 200; line-height: 1; color: var(--color-teal-500); }
.svc-row .t-h3 a:hover { color: var(--color-teal-600); }
.svc-row__blurb { font-size: 16px; line-height: 1.75; color: var(--fg-muted); }
.svc-row .chip-list { margin: 4px 0 6px; }
.svc-row__media { display: block; }

/* ---------------------------------------------------------------------------
   Work
--------------------------------------------------------------------------- */

.work-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-card);
	border: 1px solid var(--rule-light-soft);
	background: #ffffff;
	color: var(--color-ink);
	transition: border-color 0.2s ease, transform 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft);
}
.work-card:hover { border-color: var(--color-teal-500); transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.work-card[hidden] { display: none; }
.work-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--grad-icon-tile); }
.work-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.6s var(--ease-soft); }
.work-card:hover .work-card__media img { transform: scale(1.04); }
.work-card__placeholder,
.insight-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--grad-initiative);
}
.work-card__placeholder .chat-glyph,
.insight-card__placeholder .chat-glyph { width: 48px; height: 48px; opacity: 0.6; }
.work-card__result {
	position: absolute;
	left: 14px;
	bottom: 14px;
	padding: 7px 13px;
	border-radius: 999px;
	background: var(--badge-ground);
	border: 1px solid var(--badge-border);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: 12px;
	color: #ffffff;
}
.work-card__result strong { font-weight: 600; color: var(--color-mint); }
.work-card__body { display: flex; flex: 1; flex-direction: column; padding: 22px 22px 24px; }
.work-card__meta { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-teal-500); }
.work-card__title { margin-top: 10px; font-size: 20px; line-height: 1.3; font-weight: 500; }
.work-card__excerpt { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--muted-light-65); }
.work-card__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; font-size: 13px; font-weight: 500; color: var(--color-teal-600); }
.work-card__link .icon { transition: transform 0.25s var(--ease-soft); }
.work-card:hover .work-card__link .icon { transform: translateX(4px); }
.section--dark .work-card,
.section--petrol .work-card { border-color: var(--rule-dark-mid); background: rgba(255, 255, 255, 0.05); color: #ffffff; }
.section--dark .work-card__excerpt,
.section--petrol .work-card__excerpt { color: var(--muted-dark-70); }
.section--dark .work-card__meta,
.section--dark .work-card__link { color: var(--color-mint); }

.work-featured { display: grid; gap: 22px; }
@media (min-width: 1024px) {
	.work-featured { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.work-card--lead .work-card__media { aspect-ratio: 16 / 11; }
.work-card--lead .work-card__title { font-size: 26px; }
.work-featured__side { display: grid; gap: 22px; }
.work-card--compact { flex-direction: row; }
.work-card--compact .work-card__media { flex: 0 0 42%; aspect-ratio: auto; min-height: 150px; }
.work-card--compact .work-card__result { display: none; }
.work-card--compact .work-card__title { font-size: 17px; }
.work-card--compact .work-card__body { padding: 18px 18px 20px; }
@media (max-width: 520px) {
	.work-card--compact { flex-direction: column; }
	.work-card--compact .work-card__media { aspect-ratio: 16 / 10; }
}

.work-rows { display: flex; flex-direction: column; gap: 28px; }
.work-row {
	display: grid;
	overflow: hidden;
	border-radius: var(--radius-panel);
	border: 1px solid var(--rule-light-soft);
	background: #ffffff;
	color: var(--color-ink);
	transition: border-color 0.2s ease, box-shadow 0.35s var(--ease-soft);
}
.work-row:hover { border-color: var(--color-teal-500); box-shadow: var(--shadow-card-hover); }
@media (min-width: 900px) {
	.work-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
	.work-row--flip .work-row__media { order: 2; }
}
.work-row__media { position: relative; min-height: 260px; overflow: hidden; background: var(--grad-icon-tile); }
.work-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.6s var(--ease-soft); }
.work-row:hover .work-row__media img { transform: scale(1.03); }
.work-row__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 34px; }
.work-row__title { font-size: 26px; line-height: 1.25; font-weight: 500; }
.work-row__body p { font-size: 15px; line-height: 1.75; color: var(--muted-light); }
.work-row__result { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--muted-light); }
.work-row__result > span { font-size: 34px; font-weight: 300; color: var(--color-teal-500); }

/* ---------------------------------------------------------------------------
   Products
--------------------------------------------------------------------------- */

.product-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-card);
	border: 1px solid var(--rule-light-soft);
	background: #ffffff;
	scroll-margin-top: calc(var(--nav-h) + 24px);
	transition: border-color 0.2s ease, transform 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft);
}
.product-card:hover { border-color: var(--color-teal-500); transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.product-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--grad-preview); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.product-card__status { position: absolute; top: 14px; left: 14px; }
.product-card__body { display: flex; flex: 1; flex-direction: column; gap: 14px; padding: 22px 22px 24px; }
.product-card__head { display: flex; align-items: center; gap: 12px; }
.product-card__title { font-size: 20px; font-weight: 500; color: var(--color-ink); }
.product-card__audience { font-size: 12.5px; color: var(--muted-light-65); }
.product-card__tagline { font-size: 14.5px; line-height: 1.7; color: var(--muted-light); }
.product-card__link { margin-top: auto; }

.product-rows { display: flex; flex-direction: column; gap: 96px; }
.product-row { display: grid; align-items: center; gap: 36px; scroll-margin-top: calc(var(--nav-h) + 24px); }
@media (min-width: 1024px) {
	.product-row { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; }
	.product-row--flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
	.product-row--flip .product-row__copy { order: 2; }
}
.product-row__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.product-row__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.product-row__logo { width: auto; max-width: 180px; max-height: 48px; }
.product-row__title { font-size: 34px; line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; color: var(--fg); }
.product-row__tagline { font-size: 19px; line-height: 1.55; color: var(--fg); font-weight: 300; }
.product-row__summary { font-size: 15.5px; line-height: 1.75; color: var(--fg-muted); }
.product-row .tick-list { margin: 4px 0 10px; }

/* ---------------------------------------------------------------------------
   Stats
--------------------------------------------------------------------------- */

.stat-rule {
	display: grid;
	margin: 0;
	border-block: 1px solid var(--rule);
}
@media (min-width: 640px) {
	.stat-rule--2 { grid-template-columns: repeat(2, 1fr); }
	.stat-rule--3 { grid-template-columns: repeat(3, 1fr); }
	.stat-rule--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.stat-rule--4 { grid-template-columns: repeat(4, 1fr); }
}
.stat-rule__cell { padding: 30px 0; border-top: 1px solid var(--rule); }
.stat-rule__cell:first-child { border-top: 0; }
@media (min-width: 640px) {
	.stat-rule__cell { padding: 30px 26px; border-top: 0; border-left: 1px solid var(--rule); }
	.stat-rule__cell:first-child { padding-left: 0; border-left: 0; }
}
.stat-rule__value { margin: 0; font-size: 46px; line-height: 1.05; font-weight: 300; color: var(--fg); }
.stat-rule__label { margin-top: 8px; font-size: 13px; color: var(--fg-muted); }

/* ---------------------------------------------------------------------------
   Process
--------------------------------------------------------------------------- */

.process__track { position: relative; }
.process__rail { position: absolute; top: 26px; left: 0; right: 0; display: none; height: 2px; background: var(--grad-rail); }
.process__steps { position: relative; display: grid; gap: 40px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) {
	.process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
}
@media (min-width: 1024px) {
	.process__rail { display: block; }
	.process__steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.process__steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.process__steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.process__steps--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.process__steps { gap: 0; }
	.process__step:not(.is-last) { padding-right: 26px; }
}
.process__node {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 999px;
	border: 2px solid var(--tab-border-active);
	background: var(--color-teal-900);
	color: var(--color-mint);
	font-size: 16px;
	font-weight: 600;
	transition: transform 0.35s var(--ease-soft);
}
.process__step.is-first .process__node { border-color: var(--color-mint); }
.process__step.is-last .process__node { border: 0; background: var(--color-mint); color: var(--color-teal-900); }
.process__step:hover .process__node { transform: scale(1.08); }
.process__name { margin-top: 20px; font-size: 19px; font-weight: 500; color: var(--fg); }
.process__body { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--fg-muted); }
.section--cream .process__node { background: #ffffff; color: var(--color-teal-600); border-color: var(--color-teal-500); }
.section--cream .process__step.is-last .process__node { background: var(--color-teal-900); color: var(--color-mint); }

/* ---------------------------------------------------------------------------
   Testimonials
--------------------------------------------------------------------------- */

.quotes { display: grid; gap: 20px; align-items: stretch; }
@media (min-width: 1024px) {
	.quotes { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
	.quotes--single { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
}
.quotes__side { display: flex; flex-direction: column; gap: 20px; }
.quote {
	display: flex;
	flex: 1;
	flex-direction: column;
	margin: 0;
	padding: 28px 30px;
	border-radius: var(--radius-panel);
	border: 1px solid var(--rule-light-soft);
	background: #ffffff;
}
.quote blockquote { margin: 0; font-size: 17px; line-height: 1.7; color: var(--color-ink); }
.quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; }
.quote figcaption > span:last-child { display: flex; flex-direction: column; }
.quote figcaption strong { font-size: 13.5px; font-weight: 500; color: var(--color-ink); }
.quote figcaption span span { font-size: 12px; color: var(--muted-light-55); }
.quote__photo { width: 42px; height: 42px; border-radius: 999px; object-fit: cover; object-position: top; }
.quote__initials {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	background: rgba(15, 133, 158, 0.14);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--color-teal-600);
}
.quote--lead { padding: 38px 40px; border: 0; background: var(--color-teal-900); }
.quote--lead blockquote { margin-top: 22px; font-size: 22px; line-height: 1.55; font-weight: 300; color: #ffffff; }
@media (min-width: 768px) {
	.quote--lead blockquote { font-size: 25px; }
}
.quote--lead figcaption { padding-top: 30px; }
.quote--lead figcaption strong { font-size: 14.5px; color: #ffffff; }
.quote--lead figcaption span span { color: var(--muted-dark-60); }
.quote--lead .quote__initials { background: var(--tint-mint-icon-strong); color: var(--color-mint); }
.quote--lead .quote__photo { width: 48px; height: 48px; }

/* ---------------------------------------------------------------------------
   Call to action band
--------------------------------------------------------------------------- */

.cta-band {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	overflow: hidden;
	padding: 40px 32px;
	border-radius: var(--radius-panel);
}
@media (min-width: 768px) {
	.cta-band { flex-direction: row; align-items: center; justify-content: space-between; padding: 44px 44px; }
}
.cta-band__text { position: relative; }
.cta-band__title { font-size: 26px; line-height: 1.2; font-weight: 200; color: #ffffff; }
@media (min-width: 768px) {
	.cta-band__title { font-size: 34px; }
}
.cta-band__text p { margin-top: 12px; font-size: 14.5px; color: var(--muted-dark); }
.cta-band .btn { position: relative; flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   FAQ
--------------------------------------------------------------------------- */

.faq__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) {
	.faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
	.faq__head { position: sticky; top: calc(var(--nav-h) + 32px); }
}
.faq__intro { margin-top: 16px; font-size: 15.5px; line-height: 1.7; color: var(--fg-muted); }
.faq__list { display: flex; flex-direction: column; gap: 10px; }
.faq__item {
	border-radius: var(--radius-tile);
	border: 1px solid var(--rule-light-soft);
	background: #ffffff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq__item[open] { border-color: var(--color-teal-500); box-shadow: var(--shadow-card); }
.faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	font-size: 16px;
	font-weight: 500;
	color: var(--color-ink);
	list-style: none;
	cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__toggle {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--tint-mint-icon);
	color: var(--color-teal-600);
	transition: transform 0.25s var(--ease-soft), background-color 0.2s ease;
}
.faq__item[open] .faq__toggle { transform: rotate(45deg); background: var(--color-teal-900); color: var(--color-mint); }
.faq__answer { padding: 0 22px 20px; font-size: 15px; line-height: 1.75; color: var(--body-light); }
.faq__answer p + p { margin-top: 0.8em; }

/* ---------------------------------------------------------------------------
   Contact
--------------------------------------------------------------------------- */

.contact__grid { display: grid; gap: 44px; align-items: start; }
@media (min-width: 1024px) {
	.contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
	.contact__intro { position: sticky; top: calc(var(--nav-h) + 32px); }
}
.contact__lede { max-width: 420px; margin-top: 16px; font-size: 16.5px; line-height: 1.75; color: var(--muted-light-72); }
.contact__rows { display: flex; flex-direction: column; gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
.contact__rows a,
.contact__rows li > span { display: flex; align-items: center; gap: 14px; }
.contact__rows .icon-tile { width: 40px; height: 40px; }
.contact__label { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-light-55); }
.contact__value { display: block; margin-top: 2px; font-size: 15px; font-weight: 500; color: var(--color-ink); transition: color 0.15s ease; }
.contact__rows a:hover .contact__value { color: var(--color-teal-600); }

.contact__panel {
	padding: 34px 34px 36px;
	border-radius: var(--radius-panel);
	border: 1px solid var(--rule-light);
	background: #ffffff;
	box-shadow: 0 30px 70px rgba(7, 41, 50, 0.08);
}
@media (max-width: 520px) {
	.contact__panel { padding: 24px 20px 26px; }
}
.contact__done { padding: 18px 0; text-align: center; }
.contact__done:focus { outline: none; }
.contact__done-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 999px; background: var(--tint-mint-icon); color: var(--color-teal-600); }
.contact__done h3 { margin-top: 18px; font-size: 24px; font-weight: 500; }
.contact__done p { max-width: 420px; margin: 10px auto 0; font-size: 15px; line-height: 1.7; color: var(--muted-light); }
.contact__fallback h3 { font-size: 22px; font-weight: 500; }
.contact__fallback p { margin: 10px 0 22px; font-size: 15px; line-height: 1.7; color: var(--muted-light); }

.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-form__note { padding: 12px 14px; border-radius: var(--radius-chip); background: var(--tint-teal-panel); font-size: 13.5px; line-height: 1.6; color: var(--color-teal-600); }
.contact-form__pair { display: grid; gap: 18px; }
@media (min-width: 640px) {
	.contact-form__pair { grid-template-columns: 1fr 1fr; }
}
.field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label,
.field legend { font-size: 12.5px; font-weight: 500; color: var(--color-ink); }
.field legend { margin-bottom: 10px; padding: 0; }
.field__optional { font-weight: 300; color: var(--muted-light-55); }
.field input,
.field textarea {
	width: 100%;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px solid var(--input-border);
	background: #ffffff;
	font-size: 14px;
	color: var(--color-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { min-height: 112px; line-height: 1.7; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--muted-light-55); }
.field input:focus,
.field textarea:focus { border-color: var(--color-teal-500); box-shadow: 0 0 0 3px var(--tint-mint-strong); outline: none; }
.field input:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--color-mint); outline-offset: 2px; }
.field.has-error input,
.field.has-error textarea { border: 1.5px solid var(--color-danger); }
.field__error { font-size: 12.5px; color: #b3261e; }
.choice-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.choice-chips label { position: relative; cursor: pointer; }
.choice-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-chips span {
	display: inline-block;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid var(--input-border);
	font-size: 12.5px;
	color: var(--muted-light);
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.choice-chips label:hover span { border-color: var(--color-teal-500); }
.choice-chips input:checked + span { border-color: var(--color-teal-900); background: var(--color-teal-900); color: #ffffff; font-weight: 500; }
.choice-chips input:focus-visible + span { outline: 2px solid var(--color-mint); outline-offset: 2px; }
.contact-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
.contact-form__submit .btn-lozenge { font-size: 14.5px; }
.contact-form__submit .btn:disabled { opacity: 0.6; cursor: progress; }
.contact-form__hint { font-size: 12.5px; color: var(--muted-light-55); }
.contact-form__error { padding: 12px 14px; border-radius: var(--radius-chip); background: rgba(255, 107, 82, 0.1); font-size: 13px; line-height: 1.6; color: #a1281a; }

/* ---------------------------------------------------------------------------
   Feature grid
--------------------------------------------------------------------------- */

.feature-grid { display: grid; gap: 20px; }
@media (min-width: 640px) {
	.feature-grid--2,
	.feature-grid--3,
	.feature-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.feature-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.feature-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.feature { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.features--cards .feature {
	padding: 26px 24px 28px;
	border-radius: var(--radius-card);
	border: 1px solid var(--rule-light-soft);
	background: #ffffff;
	transition: border-color 0.2s ease, transform 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft);
}
.features--cards .feature:hover { border-color: var(--color-teal-500); transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.features--plain .feature-grid { gap: 0; border-top: 1px solid var(--rule); }
.features--plain .feature { padding: 28px 24px 28px 0; border-bottom: 1px solid var(--rule); }
.feature__title { margin-top: 6px; font-size: 18px; font-weight: 500; color: var(--fg); }
.feature__body { font-size: 14.5px; line-height: 1.7; color: var(--fg-muted); }
.feature__link { margin-top: auto; padding-top: 6px; }
.section--dark .features--cards .feature,
.features--cards.section--dark .feature,
.features--cards.section--petrol .feature,
.features--cards.section--deep .feature { border-color: var(--rule-dark-mid); background: rgba(255, 255, 255, 0.05); }
.features--cards.section--dark .feature .icon-tile,
.features--cards.section--petrol .feature .icon-tile,
.features--plain.section--dark .icon-tile,
.features--plain.section--petrol .icon-tile { color: var(--color-mint); }

/* ---------------------------------------------------------------------------
   Flow steps
--------------------------------------------------------------------------- */

.flow__grid { display: grid; align-items: center; gap: 44px; }
@media (min-width: 1024px) {
	.flow__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
}
.flow__intro { max-width: 520px; margin-top: 16px; font-size: 16px; line-height: 1.7; color: var(--muted-dark-70); }
.flow__steps { display: flex; flex-direction: column; gap: 11px; margin: 28px 0 0; padding: 0; list-style: none; }
.flow__step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	overflow: hidden;
	padding: 15px 18px;
	border-radius: var(--radius-tile);
	border: 1px solid var(--rule-dark-mid);
	background: var(--wash-dark);
	text-align: left;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}
.flow__step:hover { border-color: var(--tint-mint-panel-border); }
.flow__step.is-active { border: 1.5px solid var(--color-mint); background: var(--tint-mint-current, rgba(47, 227, 194, 0.14)); }
.flow__num { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--color-mint); line-height: 1.9; }
.flow__label { flex: 1; }
.flow__label > span { display: block; font-size: 14.5px; font-weight: 500; color: #ffffff; }
.flow__label > .flow__sub { margin-top: 3px; font-size: 12px; font-weight: 300; color: var(--muted-dark-55); transition: color 0.3s ease; }
.flow__step.is-active .flow__sub { color: var(--color-mint); }
.flow__tick {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: rgba(47, 227, 194, 0.6);
	transform: scaleX(0);
	transform-origin: left;
}
.flow.is-walking .flow__step.is-active .flow__tick,
.is-walking .flow__step.is-active .flow__tick { animation: flow-tick var(--flow-dwell, 6000ms) linear both; }
.flow__panels { display: grid; align-items: center; }
.flow__panel {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY(7px);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.flow__panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.flow__card {
	padding: 26px 26px;
	border-radius: var(--radius-panel);
	border: 1px solid var(--tint-mint-panel-border);
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}
@media (min-width: 768px) {
	.flow__card { padding: 28px 30px; }
}
.flow__card-title { margin-top: 10px; font-size: 21px; line-height: 1.3; font-weight: 300; color: #ffffff; }
.flow__card-body { margin-top: 14px; font-size: 14.5px; line-height: 1.75; color: var(--muted-dark-75); }
.flow__points { display: flex; flex-direction: column; gap: 11px; margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--rule-dark-12); }
.flow__points > div { position: relative; padding-left: 15px; }
.flow__points > div::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 999px; background: var(--color-mint); }
.flow__points dt { font-size: 13.5px; font-weight: 500; color: #ffffff; }
.flow__points dd { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted-dark-60); }
.flow__card .text-link { margin-top: 22px; font-weight: 600; }

/* ---------------------------------------------------------------------------
   Text and picture
--------------------------------------------------------------------------- */

.split__grid { display: grid; align-items: center; gap: 40px; }
@media (min-width: 1024px) {
	.split__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 64px; }
	.split--flip .split__copy { order: 2; }
	.split--text .split__grid { grid-template-columns: minmax(0, 760px); }
}
.split__text { margin-top: 18px; font-size: 16.5px; line-height: 1.8; color: var(--fg-muted); }
.split__text p + p { margin-top: 1em; }
.split__picture img { width: 100%; }
.split__picture--rounded img { border-radius: var(--radius-panel); box-shadow: 0 30px 70px rgba(7, 41, 50, 0.16); }

/* ---------------------------------------------------------------------------
   Team
--------------------------------------------------------------------------- */

.team-grid { display: grid; gap: 28px 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) {
	.team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.person { display: flex; flex-direction: column; gap: 4px; }
.person__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 12px; border-radius: var(--radius-card); background: var(--grad-icon-tile); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: saturate(0.9); transition: transform 0.6s var(--ease-soft), filter 0.4s ease; }
.person:hover .person__photo img { transform: scale(1.03); filter: none; }
.person__initials { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; font-weight: 200; color: var(--color-teal-600); }
.person__name { font-size: 17px; font-weight: 500; color: var(--color-ink); }
.person__role { font-size: 13px; color: var(--color-teal-500); }
.person__bio { margin-top: 6px; font-size: 13.5px; line-height: 1.65; color: var(--muted-light); }
.person__link { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-top: 8px; border-radius: 999px; border: 1px solid var(--input-border); color: var(--color-teal-600); }
.person__link:hover { border-color: var(--color-teal-500); }
.person__link .icon { width: 14px; height: 14px; }

/* ---------------------------------------------------------------------------
   Chat demo
--------------------------------------------------------------------------- */

.chat-demo { position: relative; overflow: hidden; background: var(--grad-chatbot); }
.chat-demo__grid { position: relative; display: grid; align-items: center; gap: 44px; }
@media (min-width: 1024px) {
	.chat-demo__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 72px; }
}
.chat-demo__intro { max-width: 480px; margin-top: 16px; font-size: 16.5px; line-height: 1.75; color: var(--muted-dark-75); }
.chat-demo__window { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-panel); animation: none; }
.chat-demo__name { display: block; font-size: 14.5px; font-weight: 500; color: #ffffff; }
.chat-demo__window .chat__log { min-height: 340px; }
.js .chat-demo__line { opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s var(--ease-soft); }
.js .chat-demo__line.is-shown { opacity: 1; transform: none; }
html.a11y-motion .chat-demo__line { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
	.js .chat-demo__line { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Text section
--------------------------------------------------------------------------- */

.text-section__head { margin-bottom: 28px; }
.prose--wide > .wp-block-gallery,
.prose--wide > figure { margin-block: 1.6em; }
.prose .wp-block-gallery { display: flex; flex-wrap: wrap; gap: 14px; }
.prose .wp-block-gallery figure { flex: 1 1 260px; margin: 0; }
.prose .wp-block-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-tile); }
.prose .wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: var(--radius-card); }
.prose .wp-block-columns { display: grid; gap: 28px; }
@media (min-width: 768px) {
	.prose .wp-block-columns { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}
.prose .wp-block-pullquote { padding: 28px 0; border-block: 1px solid var(--rule-light); text-align: left; }
.prose .wp-block-pullquote blockquote { border: 0; padding: 0; font-size: 24px; line-height: 1.5; font-weight: 300; }

/* ---------------------------------------------------------------------------
   Insights: cards, the featured article, lists, pagination
--------------------------------------------------------------------------- */

.insight-card { display: flex; }
.insight-card__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-card);
	border: 1px solid var(--rule-light-soft);
	background: #ffffff;
	color: var(--color-ink);
	transition: border-color 0.2s ease, transform 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft);
}
.insight-card__link:hover { border-color: var(--color-teal-500); transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.insight-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--grad-icon-tile); }
.insight-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-soft); }
.insight-card__link:hover .insight-card__media img { transform: scale(1.04); }
.insight-card__body { display: flex; flex: 1; flex-direction: column; padding: 22px 22px 24px; }
.insight-card__title { margin-top: 10px; font-size: 19px; line-height: 1.35; font-weight: 500; }
.insight-card__excerpt { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--muted-light-65); }
.insight-card__meta { margin-top: auto; padding-top: 18px; font-size: 12px; color: var(--muted-light-55); }

.insight-feature {
	display: grid;
	overflow: hidden;
	margin-bottom: 52px;
	border-radius: var(--radius-panel);
	background: var(--color-teal-900);
	color: #ffffff;
	transition: box-shadow 0.35s var(--ease-soft), transform 0.35s var(--ease-soft);
}
.insight-feature:hover { transform: translateY(-3px); box-shadow: 0 30px 70px rgba(3, 31, 39, 0.25); }
@media (min-width: 900px) {
	.insight-feature { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
.insight-feature__media { position: relative; min-height: 260px; overflow: hidden; background: var(--grad-initiative); }
.insight-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-soft); }
.insight-feature:hover .insight-feature__media img { transform: scale(1.03); }
.insight-feature__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 34px; }
.insight-feature__title { font-size: 28px; line-height: 1.25; font-weight: 300; color: #ffffff; }
.insight-feature__body p { font-size: 15px; line-height: 1.7; color: var(--muted-dark-70); }
.insight-feature__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: auto; padding-top: 14px; font-size: 12.5px; color: var(--muted-dark-55); }
.insight-feature__meta .text-link { font-weight: 600; }

.list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.list-head h2 { font-size: 24px; font-weight: 400; }
.insights-news { margin-top: 56px; }
.insights-news .newsletter { border: 0; background: linear-gradient(120deg, #032e38, #0c6a7e); }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 44px; }
.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid var(--rule-light);
	font-size: 14px;
	color: var(--color-ink);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.pagination a.page-numbers:hover { border-color: var(--color-teal-500); }
.pagination .current { border-color: var(--color-teal-900); background: var(--color-teal-900); color: #ffffff; }
.pagination .dots { border: 0; }

/* ---------------------------------------------------------------------------
   The article page
--------------------------------------------------------------------------- */

.masthead--article { padding-bottom: 120px; }
.article__dek { max-width: 720px; }
.article__meta { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--muted-dark-70); }
.article__meta strong { display: block; font-weight: 500; color: #ffffff; }
.article__avatar { width: 40px; height: 40px; border-radius: 999px; }
.article__figure { position: relative; margin-top: -80px; }
.article__figure img { width: 100%; max-height: 620px; object-fit: cover; border-radius: var(--radius-panel); box-shadow: 0 30px 70px rgba(3, 31, 39, 0.25); }
/* The article sits on a white sheet the full width of the page, on the
   cream ground: the words fill the space, the share links ride beside them. */
.article__layout {
	display: grid;
	gap: 32px;
	margin-block: 40px 80px;
	padding: 32px 22px 40px;
	border: 1px solid rgba(7, 41, 50, 0.06);
	border-radius: var(--radius-panel);
	background: #ffffff;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 40px 80px -48px rgba(3, 31, 39, 0.28);
}
.article__layout { grid-template-columns: minmax(0, 1fr); }
.article__layout .prose { font-size: 17.5px; line-height: 1.85; }
.article__layout .prose a { overflow-wrap: anywhere; }
.article__layout .prose > p:first-child { font-size: 1.2em; line-height: 1.7; color: var(--color-ink); }
@media (min-width: 768px) {
	.article__layout { padding: 56px 56px 64px; margin-top: 56px; }
}
@media (min-width: 1100px) {
	.article__layout { grid-template-columns: 220px minmax(0, 1fr) 48px; gap: 56px; padding: 72px 80px 80px; }
	.article__layout--plain { grid-template-columns: 48px minmax(0, 1fr); gap: 64px; }
	.article__layout--plain .article__aside { order: -1; justify-content: flex-start; }
	.article__layout--plain .share { align-items: flex-start; }
	.article__layout--plain .share .kicker { text-align: left; }
	.article__layout .prose { font-size: 18.5px; }
}
.article__body { min-width: 0; }
.toc { display: none; }
@media (min-width: 1100px) {
	.toc { display: block; position: sticky; top: calc(var(--nav-h) + 28px); align-self: start; }
}
.toc .kicker { display: block; padding-bottom: 12px; border-bottom: 1px solid var(--input-border-soft); }
.toc ol { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 0; padding: 0; list-style: none; }
.toc a { display: block; padding: 8px 12px; border-radius: 9px; font-size: 13.5px; line-height: 1.45; color: var(--muted-light-62); transition: background-color 0.15s ease, color 0.15s ease; }
.toc a:hover { color: var(--color-ink); }
.toc a[aria-current] { background: var(--tint-teal); font-weight: 500; color: var(--color-ink); }
.article__aside { display: flex; }
@media (min-width: 1100px) {
	.article__aside { position: sticky; top: calc(var(--nav-h) + 28px); align-self: start; justify-content: flex-end; }
}
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.share .kicker { width: 100%; margin-bottom: 4px; }
.share a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--input-border); color: var(--color-teal-600); transition: border-color 0.15s ease, background-color 0.15s ease; }
.share a:hover { border-color: var(--color-teal-500); background: var(--tint-teal); }
.share .icon { width: 16px; height: 16px; }
@media (min-width: 1100px) {
	.share { flex-direction: column; align-items: flex-end; }
	.share .kicker { text-align: right; }
}

/* ---------------------------------------------------------------------------
   Search, 404
--------------------------------------------------------------------------- */

.search-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	width: min(640px, 100%);
	margin-top: 10px;
	padding: 6px 6px 6px 18px;
	border-radius: 999px;
	border: 1px solid var(--rule-dark-strong);
	background: var(--newsletter-field);
	color: var(--muted-dark-60);
}
.search-bar input { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: none; font-size: 15px; color: #ffffff; }
.search-bar input:focus { outline: none; }
.search-bar:focus-within { border-color: var(--color-mint); }
.search-bar input::placeholder { color: var(--muted-dark-55); }
.result-count { margin-bottom: 18px; font-size: 13px; color: var(--muted-light-62); }
.result-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.result-list a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 24px;
	border-radius: var(--radius-card);
	border: 1px solid var(--rule-light-soft);
	background: #ffffff;
	transition: border-color 0.15s ease;
}
.result-list a:hover { border-color: var(--color-teal-500); }
.result-list__title { font-size: 19px; font-weight: 500; color: var(--color-ink); }
.result-list__excerpt { font-size: 14px; line-height: 1.65; color: var(--muted-light); }
.link-tiles { display: grid; gap: 14px; margin-top: 32px; }
@media (min-width: 768px) {
	.link-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.link-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.link-tile {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border-radius: var(--radius-card);
	border: 1px solid var(--rule-light-soft);
	background: #ffffff;
	transition: border-color 0.15s ease, transform 0.3s var(--ease-soft);
}
.link-tile:hover { border-color: var(--color-teal-500); transform: translateY(-2px); }
.link-tile__text { display: flex; flex: 1; flex-direction: column; }
.link-tile strong { font-size: 15.5px; font-weight: 500; color: var(--color-ink); }
.link-tile small { font-size: 12.5px; color: var(--muted-light-62); }
.link-tile > .icon { color: var(--color-teal-500); }

/* ---------------------------------------------------------------------------
   Grounds that turn a light component dark
--------------------------------------------------------------------------- */

.masthead--center .masthead__inner { align-items: center; text-align: center; }
.masthead--center .masthead__text { margin-inline: auto; }
.newsletter-section .newsletter--dark { border-color: transparent; }
.section--dark .quote,
.section--petrol .quote { border-color: var(--rule-dark-mid); background: rgba(255, 255, 255, 0.05); }
.section--dark .faq__item,
.section--petrol .faq__item { border-color: var(--rule-dark-mid); background: rgba(255, 255, 255, 0.05); }
.section--dark .faq__item summary,
.section--petrol .faq__item summary { color: #ffffff; }
.section--dark .faq__answer,
.section--petrol .faq__answer { color: var(--muted-dark-75); }

/* Motion off: everything that floats or travels stands still. */
@media (prefers-reduced-motion: reduce) {
	.spine__packet { display: none; }
}
html.a11y-motion .spine__packet { display: none; }

/* ---------------------------------------------------------------------------
   Page heroes with a background film
--------------------------------------------------------------------------- */

.hero--page.has-video { background: var(--color-deep); }
.hero--page .hero__wash { position: absolute; inset: 0; z-index: -2; background: var(--grad-petrol); opacity: 0.8; }
.hero--page .hero__shade { background: linear-gradient(90deg, rgba(3, 31, 39, 0.75) 0%, rgba(3, 31, 39, 0.35) 55%, rgba(3, 31, 39, 0.55) 100%); }
.hero--page.has-video.no-visual { padding: 96px 0 112px; }
@media (min-width: 1024px) {
	.hero--page.has-video.no-visual { padding: 128px 0 144px; }
}
html.a11y-contrast .hero--page .hero__wash { opacity: 1; }

/* ---------------------------------------------------------------------------
   Video
--------------------------------------------------------------------------- */

.video-grid { display: grid; gap: 22px; }
@media (min-width: 700px) {
	.video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.video-card { display: flex; flex-direction: column; gap: 14px; }
.video-card__poster {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-card);
	background: var(--grad-preview);
	box-shadow: 0 20px 50px rgba(3, 31, 39, 0.22);
	cursor: pointer;
}
.video-card__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-soft), filter 0.4s ease; }
.video-card__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(3, 31, 39, 0.55)); }
.video-card__poster:hover img { transform: scale(1.04); filter: brightness(1.05); }
.video-card__play {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	border-radius: 999px;
	background: var(--color-mint);
	color: var(--color-teal-900);
	box-shadow: 0 0 0 10px rgba(47, 227, 194, 0.18), 0 14px 34px rgba(0, 0, 0, 0.35);
	transform: translate(-50%, -50%);
	transition: transform 0.3s var(--ease-soft), box-shadow 0.3s ease;
}
.video-card__play .icon { margin-left: 3px; }
.video-card__poster:hover .video-card__play { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 14px rgba(47, 227, 194, 0.22), 0 14px 34px rgba(0, 0, 0, 0.35); }
.video-card--large .video-card__play { width: 92px; height: 92px; }
.video-card__time {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 1;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(3, 31, 39, 0.75);
	font-size: 12px;
	font-weight: 500;
	color: #ffffff;
}
.video-card__player { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-card); background: #000; box-shadow: 0 20px 50px rgba(3, 31, 39, 0.22); }
.video-card__title { font-size: 18px; font-weight: 500; color: var(--fg); }
.video-card--large .video-card__title { font-size: 22px; }
.video-card__sub { margin-top: 4px; font-size: 13.5px; color: var(--fg-muted); }

.video-dialog {
	width: min(1100px, calc(100vw - 2rem));
	max-width: none;
	margin: auto;
	padding: 0;
	border: 1px solid var(--rule-dark-mid);
	border-radius: var(--radius-panel);
	background: var(--color-deep);
	color: #ffffff;
	overflow: hidden;
	box-shadow: var(--shadow-float);
}
.video-dialog::backdrop { background: rgba(3, 31, 39, 0.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.video-dialog[open] { animation: widget-in 0.26s var(--ease-out) both; }
.video-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px 12px 22px; }
.video-dialog__title { font-size: 15px; font-weight: 500; }
.video-dialog__player { display: block; width: 100%; max-height: calc(100vh - 140px); background: #000; }

/* ---------------------------------------------------------------------------
   Background clips: page headings, section pictures, CTA bands, collages.
   The still shows first; the clip fades in once it can play.
--------------------------------------------------------------------------- */

.masthead.has-video { isolation: isolate; background: var(--color-deep); }
.masthead .hero__video { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.masthead .hero__video video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s ease; }
.masthead .hero__video video[data-ready] { opacity: 1; }
.masthead__wash { position: absolute; inset: 0; z-index: -2; background: var(--grad-masthead); opacity: 0.82; }
.masthead.has-video { padding-block: 80px 96px; }
@media (min-width: 1024px) {
	.masthead.has-video { padding-block: 104px 120px; }
}
html.a11y-contrast .masthead__wash { opacity: 1; }

.clip { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--grad-preview); }
.clip > img { width: 100%; height: 100%; object-fit: cover; }
.clip__video,
.collage__video,
.cta-band__video { position: absolute; inset: 0; pointer-events: none; }
.clip__video video,
.collage__video video,
.cta-band__video video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s ease; }
.clip__video video[data-ready],
.collage__video video[data-ready],
.cta-band__video video[data-ready] { opacity: 1; }
.split__picture--rounded .clip,
.split__picture--plain .clip { border-radius: var(--radius-panel); box-shadow: 0 30px 70px rgba(7, 41, 50, 0.16); }
.browser--lg .browser__screen .clip { aspect-ratio: 16 / 9; }

.cta-band.has-video { isolation: isolate; }
.cta-band__video { z-index: -2; }
.cta-band__wash { position: absolute; inset: 0; z-index: -1; background: var(--grad-cta); opacity: 0.86; }

/* Collage: a bento of tiles, the first one large. */
.collage__grid { display: grid; gap: 14px; grid-template-columns: 1fr; grid-auto-rows: 220px; }
@media (min-width: 640px) {
	.collage__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
	.collage__tile:first-child { grid-column: span 2; grid-row: span 2; }
}
@media (min-width: 1024px) {
	.collage__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; }
	.collage__grid--6 .collage__tile:nth-child(6) { grid-column: span 4; }
	.collage__grid--7 .collage__tile:nth-child(6),
	.collage__grid--7 .collage__tile:nth-child(7) { grid-column: span 2; }
	.collage__grid--4 .collage__tile:nth-child(4) { grid-column: span 2; }
	.collage__grid--8 .collage__tile:nth-child(6) { grid-column: span 2; }
}
.collage__tile {
	position: relative;
	display: block;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-card);
	background: var(--grad-preview);
	box-shadow: 0 18px 44px rgba(3, 31, 39, 0.22);
	isolation: isolate;
}
.collage__tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-soft); }
.collage__tile .collage__video video { transition: opacity 0.7s ease, transform 0.8s var(--ease-soft); }
.collage__tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 50%, rgba(3, 31, 39, 0.65)); pointer-events: none; }
a.collage__tile:hover > img,
a.collage__tile:hover .collage__video video { transform: scale(1.04); }
.collage__caption {
	position: absolute;
	left: 16px;
	bottom: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - 32px);
	font-size: 13.5px;
	font-weight: 500;
	color: #ffffff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.collage__tile:first-child .collage__caption { font-size: 16px; }

/* Quiet moving texture behind a light or dark section. */
.has-bg-video { position: relative; isolation: isolate; overflow: hidden; }
.section-video { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.section-video video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s ease; }
.section-video video[data-ready] { opacity: 1; }
.section-video__wash { position: absolute; inset: 0; z-index: -1; background: inherit; opacity: 0.8; }
html.a11y-contrast .section-video { display: none; }

/* ---------------------------------------------------------------------------
   What we stand for: the TAPP letters write themselves in, one after the
   other, a light passes through each, then the words settle beneath.
--------------------------------------------------------------------------- */
.values__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.values__row {
	position: relative;
	display: grid;
	gap: 8px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.values__row::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, var(--color-teal-500), var(--rule) 45%, var(--rule));
	transform-origin: left;
	transition: transform 1.4s var(--ease-out) 0.1s;
}
.js .values__row:not(.is-in)::before { transform: scaleX(0); }
.value {
	position: relative;
	display: grid;
	grid-template-columns: 76px 1fr;
	grid-template-rows: auto auto 1fr;
	column-gap: 20px;
	padding: 28px 0 20px;
}
.value__mark { grid-row: 1 / span 3; color: var(--fg); }
.value__glyph {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.6s var(--ease-out), filter 0.6s var(--ease-out);
}
.value__track { stroke: rgba(12, 106, 126, 0.08); }
.value__ink { stroke-dasharray: 1 1.2; stroke-dashoffset: 0; }
.js .values__row:not(.is-in) .value__ink { stroke-dashoffset: 1.05; }
.js .values__row.is-in .value__ink { animation: value-draw 1.5s var(--ease-out) calc(var(--i) * 180ms + 150ms) both; }
.value__sheen { transform: translateX(0); }
.js .values__row.is-in .value__sheen { animation: value-sheen 1.5s var(--ease-soft) calc(var(--i) * 180ms + 1.25s) both; }
.js .values__row.is-in .value:hover .value__sheen {
	animation: value-sheen 1.5s var(--ease-soft) calc(var(--i) * 180ms + 1.25s) both, value-sheen-again 1.1s var(--ease-soft) both;
}
.value:hover .value__glyph { transform: translateY(-4px); filter: drop-shadow(0 14px 18px rgba(12, 106, 126, 0.22)); }
.value__letter { display: block; font-size: 72px; font-weight: 600; line-height: 1; color: var(--accent); }
@keyframes value-draw { from { stroke-dashoffset: 1.05; } to { stroke-dashoffset: 0; } }
@keyframes value-sheen { from { transform: translateX(0); } to { transform: translateX(2300px); } }
@keyframes value-sheen-again { from { transform: translateX(0); } to { transform: translateX(2300px); } }

.value__index {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: var(--accent);
}
.value__index::after { content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.5; }
.value__title { margin: 8px 0 0; font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg); }
.value__body { margin: 8px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--fg-muted); }
.value__index,
.value__title,
.value__body {
	transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-soft);
	transition-delay: calc(var(--i) * 180ms + 550ms);
}
.js .values__row:not(.is-in) :is(.value__index, .value__title, .value__body) { opacity: 0; transform: translateY(10px); }

@media (min-width: 640px) {
	.values__row { grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
	.value { display: block; padding: 36px 0 28px; }
	.value__mark { width: 84px; margin-bottom: 26px; }
}
@media (min-width: 1024px) {
	.values__row--4 { grid-template-columns: repeat(4, 1fr); gap: 0; }
	.values__row--3 { grid-template-columns: repeat(3, 1fr); gap: 0; }
	.values__row--4 .value,
	.values__row--3 .value { padding: 44px 32px 32px; }
	.values__row--4 .value:first-child,
	.values__row--3 .value:first-child { padding-left: 0; }
	.values__row--4 .value + .value::before,
	.values__row--3 .value + .value::before {
		content: "";
		position: absolute;
		left: 0;
		top: 44px;
		bottom: 12px;
		width: 1px;
		background: linear-gradient(180deg, var(--rule), transparent);
		transform-origin: top;
		transition: transform 1.2s var(--ease-out) calc(var(--i) * 180ms + 300ms);
	}
	.js .values__row:not(.is-in) .value + .value::before { transform: scaleY(0); }
	.value__mark { width: 96px; margin-bottom: 30px; }
}

/* Mission and vision: one dark panel with a slow, drifting glow. */
.values__mv {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	gap: 32px;
	margin-top: 56px;
	padding: 36px 28px;
	border-radius: 28px;
	background: var(--grad-process);
	color: #ffffff;
	box-shadow: 0 30px 60px -30px rgba(3, 31, 39, 0.55);
}
.values__mv::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 70%;
	aspect-ratio: 1;
	left: -15%;
	top: -60%;
	background: radial-gradient(closest-side, rgba(47, 227, 194, 0.2), transparent);
	animation: values-glow 18s ease-in-out infinite alternate;
}
@keyframes values-glow {
	from { transform: translate(0, 0); }
	to { transform: translate(85%, 70%); }
}
.values__label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-mint);
}
.values__label::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
	transform-origin: left;
	transition: transform 1s var(--ease-out) 0.5s;
}
.js .values__mv:not(.is-in) .values__label::before { transform: scaleX(0); }
.values__text { margin: 0; font-size: clamp(19px, 1.8vw, 24px); font-weight: 300; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
@media (min-width: 900px) {
	.values__mv { padding: 52px 56px; }
	.values__mv--2 { grid-template-columns: 1fr 1fr; gap: 0; }
	.values__mv--2 .values__statement + .values__statement { padding-left: 56px; margin-left: 56px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
}

/* On the deepest ground, the panel turns to glass. */
.values--dark .value__track { stroke: rgba(47, 227, 194, 0.08); }
.values--dark .values__mv { background: var(--grad-glass); border: 1px solid rgba(255, 255, 255, 0.08); }
.values--dark .value:hover .value__glyph { filter: drop-shadow(0 14px 22px rgba(47, 227, 194, 0.25)); }

html.a11y-contrast .value__ink { stroke: currentColor; }
html.a11y-contrast .value__track,
html.a11y-contrast .value__sheen,
html.a11y-contrast .values__mv::before { display: none; }
@media (forced-colors: active) {
	.value__ink { stroke: CanvasText; }
	.value__sheen,
	.value__track { display: none; }
}

/* ---------------------------------------------------------------------------
   Scrolling browser frame: one shape for every platform, browsing a real
   page. The script moves the picture; this only sets the stage.
--------------------------------------------------------------------------- */
.browser--lg.browser--scroll .browser__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #f4f1ea; }
.browser--scroll .browser__bar { align-items: center; }
.browser--scroll .browser__url {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	height: 22px;
	margin: 0 6px 0 10px;
	padding: 0 12px;
	border-radius: 999px;
	background: #eef0ec;
	color: #5d6b6c;
	font-style: normal;
	font-size: 11.5px;
	line-height: 1;
}
.browser--scroll .browser__url .icon { flex: none; opacity: 0.7; }
.browser--scroll .browser__url b { overflow: hidden; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; transition: opacity 0.3s ease; }
.browser--scroll .browser__url.is-changing b { opacity: 0; }
.browser__pause {
	display: grid;
	flex: none;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #5d6b6c;
	cursor: pointer;
}
.browser__pause:hover { background: #eef0ec; color: var(--color-ink); }
.browser__pause:focus-visible { outline: 2px solid var(--color-teal-500); outline-offset: 2px; }
.browser__pause .browser__pause-on,
.browser__pause[aria-pressed="true"] .browser__pause-off { display: none; }
.browser__pause[aria-pressed="true"] .browser__pause-on { display: block; }
.scroll-frame__page { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s var(--ease-soft); }
.scroll-frame__page.is-active { opacity: 1; }
.browser--lg.browser--scroll .browser__screen .scroll-frame__page img {
	display: block;
	width: 100%;
	height: auto;
	min-height: 100%;
	object-fit: cover;
	object-position: top;
	transform: none;
	transition: none;
	will-change: transform;
}
/* A soft edge under the address bar, as if the page slides beneath it. */
.browser--scroll .browser__screen::before {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0 0 auto;
	height: 14px;
	background: linear-gradient(180deg, rgba(3, 31, 39, 0.08), transparent);
	pointer-events: none;
}
/* A screen wider than the frame: whole, over a soft blurred copy of itself. */
.scroll-frame__page--fit { overflow: hidden; background: #0c4a57; }
.scroll-frame__page--fit::before {
	content: "";
	position: absolute;
	inset: -24px;
	background: var(--shot, none) center / cover no-repeat;
	filter: blur(22px) saturate(1.1);
	opacity: 0.75;
}
.browser--lg.browser--scroll .browser__screen .scroll-frame__page--fit img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: contain;
	object-position: center;
	filter: drop-shadow(0 10px 24px rgba(3, 31, 39, 0.25));
}

/* ---------------------------------------------------------------------------
   Page heading with a person: the words on the left, a cut-out portrait
   standing at the foot of the heading on the right, the clip clear behind.
--------------------------------------------------------------------------- */
.masthead.masthead--person { padding-bottom: 0; }
.masthead--person .masthead__wash {
	background: linear-gradient(90deg, rgba(3, 31, 39, 0.94) 0%, rgba(3, 31, 39, 0.8) 42%, rgba(4, 48, 58, 0.32) 100%);
	opacity: 1;
}
.masthead__grid { display: grid; gap: 8px; }
.masthead--person .masthead__inner { padding-bottom: 40px; }
.masthead__person { position: relative; display: flex; justify-content: center; align-self: end; }
.masthead__person::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	bottom: -20%;
	width: 110%;
	aspect-ratio: 1;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(47, 227, 194, 0.26), transparent 72%);
}
.masthead__person img {
	display: block;
	width: auto;
	max-width: 100%;
	height: clamp(300px, 40vw, 560px);
	object-fit: contain;
	object-position: bottom;
	filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.35));
	animation: person-rise 1.1s var(--ease-out) 0.15s both;
}
@keyframes person-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.masthead__sign {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 8px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.masthead__logo { display: block; width: 150px; height: auto; }
.masthead__who { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.82); }
.masthead__who b { font-size: 17px; font-weight: 600; color: var(--color-mint); }
.masthead__org { font-weight: 600; color: #ffffff; }
@media (min-width: 900px) {
	.masthead__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: end; gap: 40px; }
	.masthead--person .masthead__inner { align-self: center; padding-block: 24px 104px; }
}

/* ---------------------------------------------------------------------------
   Services with a portrait: a person card on the left, the services as a
   clean ruled list on the right.
--------------------------------------------------------------------------- */
.services--portrait { padding-block: 80px 96px; }
.svc-portrait { display: grid; gap: 48px; }
.svc-portrait__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.svc-portrait__text { max-width: 460px; margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--fg-muted); }
/* The person stands at the foot of the section, no frame; the name sits in
   the open space beside her. */
.svc-portrait__figure { position: relative; display: flex; flex-direction: column-reverse; align-items: flex-start; width: 100%; margin: 12px 0 -96px; }
.svc-portrait__photo {
	display: block;
	width: 100%;
	max-width: 620px;
	height: auto;
	filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.35));
	transition: opacity 1s var(--ease-soft) 0.25s, transform 1s var(--ease-out) 0.25s;
}
.js .svc-portrait__figure[data-reveal] { opacity: 1; transform: none; }
.js .svc-portrait__figure:not(.is-in) .svc-portrait__photo { opacity: 0; transform: translateY(30px); }
.svc-portrait__caption {
	position: static;
	margin-bottom: 10px !important;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}
.svc-portrait__caption b { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--color-mint); }
.svc-portrait__caption span { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.86); }

.svc-lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.svc-lines li { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.svc-line {
	position: relative;
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) 38px;
	align-items: center;
	gap: 16px;
	padding: 24px 6px;
	color: #ffffff;
	text-decoration: none;
	transition: padding 0.45s var(--ease-out), background-color 0.45s ease;
}
.svc-line::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--color-mint);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s var(--ease-out);
}
.svc-line:hover,
.svc-line:focus-visible { padding-left: 16px; background-color: rgba(47, 227, 194, 0.05); }
.svc-line:hover::after,
.svc-line:focus-visible::after { transform: scaleX(1); }
.svc-line:focus-visible { outline: 2px solid var(--color-mint); outline-offset: 4px; border-radius: 12px; }
.svc-line__num { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; color: var(--color-mint); }
.svc-line__title { display: block; font-size: clamp(20px, 2vw, 26px); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.svc-line__chips { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.64); }
.svc-line__go {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.4s var(--ease-out);
}
.svc-line:hover .svc-line__go,
.svc-line:focus-visible .svc-line__go { border-color: transparent; background: var(--color-mint); color: var(--color-deep); transform: rotate(-45deg); }
@media (min-width: 1024px) {
	.svc-portrait { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: 72px; }
	.svc-portrait { grid-template-rows: auto 1fr; row-gap: 0; }
	.svc-portrait__aside { grid-column: 1; grid-row: 1; }
	.svc-lines { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
	.svc-portrait__figure { grid-column: 1; grid-row: 2; align-self: end; margin: 24px 0 -96px; }
	.svc-portrait__caption { position: absolute; left: 0; top: 6%; max-width: 27%; }
	.svc-line { grid-template-columns: 44px minmax(0, 1fr) 46px; padding-block: 28px; }
	.svc-line__go { width: 46px; height: 46px; }
}