/* ==========================================================================
   Protean Minds - main stylesheet
   Dark, layered layout: ink background with cream "sheets" sliding over it.
   Motion hooks (.reveal, .is-split, [data-*]) are driven by assets/js/main.js
   and only hide content when the <html> element has the .js class.
   ========================================================================== */

@property --angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

:root {
	--ink: #06141d;
	--ink-2: #0a202d;
	--ink-3: #123346;
	--navy: #143f58;
	--navy-400: #2f7aa5;
	--amber: #f6b419;
	--amber-300: #ffd166;
	--amber-700: #b87d00;
	--cream: #f6f2e9;
	--cream-2: #ece6d7;
	--white: #fff;
	--text: #1d2c36;
	--muted: #5d6c76;
	--line: #e0d9c8;
	--on-dark: rgba(255, 255, 255, 0.72);
	--on-dark-muted: rgba(255, 255, 255, 0.5);
	--line-dark: rgba(255, 255, 255, 0.13);

	--font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--r: 48px;
	--radius: 26px;
	--radius-sm: 14px;
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--ease-in-out: cubic-bezier(0.7, 0, 0.2, 1);
	--shadow: 0 30px 60px -30px rgba(6, 20, 29, 0.35);

	--container: 1240px;
	--gutter: clamp(1.1rem, 4vw, 2.5rem);
	--section: clamp(3.5rem, 6vw, 5.5rem);
	--header-offset: 96px;
}

@media (max-width: 700px) {
	:root {
		--r: 28px;
		--radius: 20px;
		--header-offset: 84px;
	}
}

/* Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-offset) + 12px);
	background: var(--ink);
}

body {
	margin: 0;
	background: var(--ink);
	color: var(--on-dark);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

/* No whole-page fade-in: content starting transparent left the screen blank and stopped Chrome from
   recording First/Largest Contentful Paint. Page-to-page changes use the view transition instead. */

img,
svg,
video,
iframe {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 0.5em;
	color: var(--white);
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

p {
	margin: 0 0 1em;
}

a {
	color: inherit;
	text-underline-offset: 3px;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 3px;
	border-radius: 6px;
}

::selection {
	background: var(--amber);
	color: var(--ink);
}

[hidden] {
	display: none !important;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: fixed;
	top: -100px;
	left: 16px;
	z-index: 300;
	padding: 0.75rem 1rem;
	background: var(--amber);
	color: var(--ink);
	border-radius: var(--radius-sm);
	font-weight: 600;
}

.skip-link:focus {
	top: 16px;
}

.icon {
	flex: none;
	width: 1.25em;
	height: 1.25em;
}

/* Layout
   ========================================================================== */

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

.container--narrow {
	max-width: calc(820px + var(--gutter) * 2);
}

.section {
	padding-block: var(--section);
}

.section--tight {
	padding-block: calc(var(--section) * 0.75);
}

.section--flush {
	padding-top: 0;
}

.section--paper {
	background: var(--cream-2);
}

/* Cream panel that slides over the dark page background. */
.sheet {
	position: relative;
	z-index: 2;
	margin-top: calc(var(--r) * -1);
	border-radius: var(--r);
	background: var(--cream);
	color: var(--text);
	overflow: clip;
}

.sheet h1,
.sheet h2,
.sheet h3,
.sheet h4 {
	color: var(--ink);
}

.sheet a {
	color: var(--navy);
}

.sheet .dark {
	color: var(--on-dark);
}

.sheet .dark h1,
.sheet .dark h2,
.sheet .dark h3,
.sheet .dark h4 {
	color: var(--white);
}

/* Dark full-width band between sheets. */
.band {
	position: relative;
	z-index: 1;
	margin-top: calc(var(--r) * -1);
	padding-block: calc(var(--section) + var(--r));
	overflow: clip;
	isolation: isolate;
}

.section__title {
	font-size: clamp(2rem, 4.6vw, 3.75rem);
	line-height: 1.06;
	margin-bottom: 0.65em;
}

.section__title--sm {
	font-size: clamp(1.4rem, 2.4vw, 2rem);
}

.section__title--center {
	max-width: 16ch;
	margin-inline: auto;
	margin-bottom: clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.section__intro {
	max-width: 800px;
	margin: 0 auto clamp(2.25rem, 5vw, 4rem);
	color: var(--muted);
	text-align: center;
}

.section__intro .section__title {
	margin-bottom: 0.5em;
}

/* Ambient animated background shared by every dark hero/band. */
.hero,
.page-hero,
.article__header,
.notice {
	position: relative;
	overflow: clip;
	isolation: isolate;
}

.hero::before,
.page-hero::before,
.article__header::before,
.notice::before,
.band::before {
	content: "";
	position: absolute;
	inset: -25% -10%;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(38% 46% at 12% 22%, rgba(47, 122, 165, 0.55), transparent 70%),
		radial-gradient(30% 40% at 88% 12%, rgba(246, 180, 25, 0.2), transparent 70%),
		radial-gradient(46% 52% at 72% 92%, rgba(20, 63, 88, 0.95), transparent 72%);
	animation: aurora 22s ease-in-out infinite alternate;
}

.hero::after,
.page-hero::after,
.article__header::after,
.notice::after,
.band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 72px 72px;
	-webkit-mask-image: radial-gradient(75% 75% at 50% 35%, #000, transparent);
	mask-image: radial-gradient(75% 75% at 50% 35%, #000, transparent);
}

.supercharge::before {
	animation-delay: -9s;
}

.grow::before {
	animation-delay: -15s;
	animation-direction: alternate-reverse;
}

@keyframes aurora {
	0% {
		transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
	}

	50% {
		transform: translate3d(3%, -2%, 0) rotate(5deg) scale(1.1);
	}

	100% {
		transform: translate3d(-3%, 3%, 0) rotate(-4deg) scale(1.04);
	}
}

/* Motion primitives
   ========================================================================== */

.js .reveal {
	opacity: 0;
	transform: translate3d(0, 34px, 0);
	transition: opacity 0.9s var(--ease), transform 1s var(--ease);
	transition-delay: calc(var(--i, 0) * 90ms);
	will-change: opacity, transform;
}

.js .reveal[data-reveal="scale"] {
	transform: translate3d(0, 44px, 0) scale(0.93);
}

.js .reveal.is-in {
	opacity: 1;
	transform: none;
}

.js .reveal.is-done {
	transition-duration: 0.45s;
	transition-delay: 0s;
	will-change: auto;
}

.js [data-reveal="clip"] {
	clip-path: inset(0 0 100% 0 round var(--radius));
	transition: clip-path 1.25s var(--ease-in-out);
}

.js [data-reveal="clip"].is-in {
	clip-path: inset(0 0 0 0 round var(--radius));
}

/* Headings split into words by JS: each word rises out of a mask. */
.w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	margin: -0.1em -0.03em -0.16em;
	padding: 0.1em 0.03em 0.16em;
}

.w__i {
	display: inline-block;
}

.js .is-split .w__i {
	transform: translate3d(0, 118%, 0) rotate(5deg);
	transform-origin: left bottom;
	transition: transform 1.05s var(--ease);
	transition-delay: calc(var(--wi, 0) * 45ms);
}

.js .is-split.is-in .w__i {
	transform: none;
}

.fw {
	opacity: 0.16;
	transition: opacity 0.4s ease;
}

.fw.on {
	opacity: 1;
}

@keyframes marquee {
	to {
		transform: translate3d(-100%, 0, 0);
	}
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes float {
	0%,
	100% {
		transform: translate3d(0, 0, 0);
	}

	50% {
		transform: translate3d(0, -10px, 0);
	}
}

@keyframes pulse-ring {
	0% {
		transform: scale(1);
		opacity: 0.6;
	}

	100% {
		transform: scale(1.9);
		opacity: 0;
	}
}

/* Buttons
   ========================================================================== */

.btn {
	--btn-bg: var(--navy);
	--btn-fg: var(--white);
	--btn-hover: var(--ink);
	--btn-hover-fg: var(--white);

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.65em;
	padding: 0.95em 1.6em;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.45s var(--ease), border-color 0.45s var(--ease), transform 0.5s var(--ease), box-shadow 0.45s var(--ease);
}

.btn::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	background: var(--btn-hover);
	transform: translate3d(0, 102%, 0);
	transition: transform 0.55s var(--ease);
}

.btn:hover,
.sheet .btn:hover {
	color: var(--btn-hover-fg);
}

.btn:hover::before {
	transform: none;
}

.btn .icon--arrow-right {
	transition: transform 0.45s var(--ease);
}

.btn:hover .icon--arrow-right {
	transform: translate3d(5px, 0, 0);
}

.btn,
.sheet .btn {
	color: var(--btn-fg);
}

.btn--amber {
	--btn-bg: var(--amber);
	--btn-fg: var(--ink);
	--btn-hover: var(--white);
	--btn-hover-fg: var(--ink);

	box-shadow: 0 14px 34px -14px rgba(246, 180, 25, 0.7);
}

.sheet .btn--amber {
	--btn-hover: var(--ink);
	--btn-hover-fg: var(--white);
}

.sheet .dark .btn--amber {
	--btn-hover: var(--white);
	--btn-hover-fg: var(--ink);
}

.btn--dark {
	--btn-bg: var(--ink);
	--btn-hover: var(--amber);
	--btn-hover-fg: var(--ink);
}

.btn--glass {
	--btn-bg: rgba(255, 255, 255, 0.07);
	--btn-hover: var(--white);
	--btn-hover-fg: var(--ink);

	border-color: rgba(255, 255, 255, 0.22);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.btn--light {
	--btn-bg: var(--white);
	--btn-fg: var(--ink);
	--btn-hover: var(--amber);
	--btn-hover-fg: var(--ink);
}

.btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--navy);
	--btn-hover: var(--navy);

	border-color: rgba(20, 63, 88, 0.28);
}

.btn--sm {
	padding: 0.7em 1.3em;
	font-size: 0.875rem;
}

.btn--lg {
	padding: 1.1em 1.9em;
	font-size: 1rem;
}

.btn--xl {
	padding: 1.25em 2.3em;
	font-size: clamp(1rem, 1.6vw, 1.2rem);
}

.btn--block {
	width: 100%;
}

.btn:disabled {
	opacity: 0.6;
	cursor: progress;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	flex: none;
	white-space: nowrap;
	font-family: var(--font-display);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.link-arrow .icon {
	transition: transform 0.4s var(--ease);
}

.link-arrow:hover .icon {
	transform: translate3d(5px, 0, 0);
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.75rem;
	padding: 0.45rem 1rem 0.45rem 0.75rem;
	border: 1px solid var(--line-dark);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--white);
	font-size: 0.85rem;
	font-weight: 500;
}

.chip__dot {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--amber);
}

.chip__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--amber);
	animation: pulse-ring 1.8s ease-out infinite;
}

.tag {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: var(--amber);
	color: var(--ink);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Scroll progress + header
   ========================================================================== */

.scroll-progress {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 200;
	height: 3px;
	pointer-events: none;
}

.scroll-progress span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--amber), var(--amber-300));
	transform: scaleX(var(--sp, 0));
	transform-origin: left;
}

.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 120;
	border-bottom: 1px solid transparent;
	transition: border-color 0.45s ease, box-shadow 0.45s ease;
}

.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Frosted backdrop fades in once the page is scrolled. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(6, 20, 29, 0.93);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	opacity: 0;
	transition: opacity 0.45s ease;
}

.site-header.is-scrolled {
	border-bottom-color: var(--line-dark);
	box-shadow: 0 20px 44px -30px rgba(0, 0, 0, 0.9);
}

.site-header.is-scrolled::before {
	opacity: 1;
}

.menu-open .site-header {
	border-bottom-color: transparent;
	box-shadow: none;
}

.menu-open .site-header::before {
	opacity: 0;
}

.site-header__bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 1.5rem;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding: 1.15rem var(--gutter);
	transition: padding 0.5s var(--ease);
}

.js .site-header__bar {
	animation: header-in 0.9s var(--ease) 0.1s both;
}

@keyframes header-in {
	from {
		transform: translate3d(0, -24px, 0);
	}
}

.site-header.is-scrolled .site-header__bar {
	padding-block: 0.7rem;
}

.site-logo {
	justify-self: start;
}

.site-logo img {
	width: auto;
	height: 44px;
	transition: height 0.5s var(--ease);
}

.site-header.is-scrolled .site-logo img {
	height: 38px;
}

/* Navigation capsule with a highlight that glides between links. */
.nav {
	position: relative;
	padding: 0.3rem;
	border: 1px solid var(--line-dark);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.nav .nav__list {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
}

.nav__indicator {
	position: absolute;
	top: 0.3rem;
	bottom: 0.3rem;
	left: 0;
	width: var(--w, 0);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
	opacity: var(--o, 0);
	pointer-events: none;
	transform: translate3d(var(--x, 0), 0, 0);
}

.nav__indicator.is-ready {
	transition: transform 0.55s var(--ease), width 0.55s var(--ease), opacity 0.3s ease;
}

.nav .nav__list a {
	display: block;
	padding: 0.58rem 1.1rem;
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.76);
	font-size: 0.92rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.3s ease;
}

.nav .nav__list a:hover {
	color: var(--white);
}

html:not(.js) .nav .nav__list a:hover {
	background: rgba(255, 255, 255, 0.1);
}

.nav .nav__list .current-menu-item > a,
.nav .nav__list .current_page_item > a {
	color: var(--amber);
}

.site-header__actions {
	display: flex;
	align-items: center;
	justify-self: end;
	gap: 0.5rem;
}

.site-header__login {
	box-shadow: none;
}

/* Mobile menu: bottom sheet opened from the tab bar */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 130;
	visibility: hidden;
	transition: visibility 0s 0.55s;
}

.menu-open .mobile-menu {
	visibility: visible;
	transition: visibility 0s;
}

.mobile-menu__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(3, 10, 15, 0.62);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.45s ease;
}

.menu-open .mobile-menu__backdrop {
	opacity: 1;
}

.mobile-menu__panel {
	position: absolute;
	inset: auto 0 0 0;
	max-height: 88vh;
	max-height: 88svh;
	padding: 0.75rem var(--gutter) calc(var(--tabbar-h) + var(--tabbar-safe) + 1.25rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	border-top: 1px solid var(--line-dark);
	border-radius: 28px 28px 0 0;
	background:
		radial-gradient(80% 50% at 100% 0%, rgba(246, 180, 25, 0.14), transparent 70%),
		radial-gradient(80% 60% at 0% 100%, rgba(47, 122, 165, 0.35), transparent 70%),
		var(--ink-2);
	box-shadow: 0 -30px 60px -20px rgba(0, 0, 0, 0.7);
	transform: translate3d(0, 105%, 0);
	transition: transform 0.55s var(--ease);
}

.menu-open .mobile-menu__panel {
	transform: none;
}

.mobile-menu__grabber {
	display: block;
	width: 44px;
	height: 5px;
	margin: 0 auto 0.75rem;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.28);
}

.mobile-menu .nav__list {
	display: grid;
}

.mobile-menu .nav__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.95rem 0.25rem;
	border-bottom: 1px solid var(--line-dark);
	color: var(--white);
	font-family: var(--font-display);
	font-size: 1.08rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.mobile-menu .nav__list a::after {
	content: "\203A";
	color: var(--on-dark-muted);
	font-size: 1.4rem;
	line-height: 1;
}

.mobile-menu .nav__list .current-menu-item > a {
	color: var(--amber);
}

.mobile-menu__actions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.6rem;
	margin-top: 1.1rem;
}

.mobile-menu__action {
	display: grid;
	justify-items: center;
	gap: 0.45rem;
	padding: 0.95rem 0.5rem;
	border: 1px solid var(--line-dark);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--white);
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.mobile-menu__action:active {
	background: rgba(255, 255, 255, 0.12);
	transform: scale(0.95);
}

.mobile-menu__action .icon {
	width: 22px;
	height: 22px;
	color: var(--amber);
}

.menu-open,
.menu-open body {
	overflow: hidden;
}

@media (max-width: 1140px) {
	.nav {
		display: none;
	}

	.site-header__bar {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.site-logo img {
		height: 38px;
	}

	.site-header__login .icon {
		display: none;
	}
}

@media (min-width: 1141px) {
	.mobile-menu {
		display: none;
	}
}

/* Hero
   ========================================================================== */

.hero {
	padding-block: calc(var(--header-offset) + clamp(2.5rem, 6vw, 4.5rem)) calc(clamp(3.5rem, 7vw, 6rem) + var(--r));
}

.hero--home {
	display: grid;
	align-items: center;
	min-height: 100svh;
}

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	align-items: center;
	gap: clamp(2.5rem, 5vw, 4.5rem);
}

.hero__title {
	margin-bottom: 0.45em;
	font-size: clamp(2.3rem, 4.5vw, 4.1rem);
	font-weight: 700;
	line-height: 1.06;
	text-wrap: pretty;
	letter-spacing: -0.045em;
}

.hero__title-line {
	display: block;
	color: rgba(255, 255, 255, 0.62);
	text-wrap: balance;
}

.hero__title-line--lead {
	color: var(--white);
}

.accent {
	position: relative;
	display: inline-block;
	color: var(--amber);
	font-family: var(--font-serif);
	font-size: 1.14em;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 0.9;
	white-space: nowrap;
}

.accent::after {
	content: "";
	position: absolute;
	right: 0.04em;
	bottom: 0.04em;
	left: 0.02em;
	height: 0.055em;
	border-radius: 99px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1.2s var(--ease-in-out) 0.85s;
}

.is-in .accent::after,
html:not(.js) .accent::after {
	transform: scaleX(1);
}

.hero__lead {
	max-width: 54ch;
	margin-bottom: 2.25rem;
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}

.hero .prose {
	max-width: 58ch;
	margin-bottom: 2rem;
	color: var(--on-dark);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

.hero__media {
	position: relative;
}

.frame {
	position: relative;
	transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform 0.7s var(--ease);
}

.frame::before {
	content: "";
	position: absolute;
	inset: 10% -5% -8% 5%;
	z-index: -1;
	border-radius: 40px;
	background: linear-gradient(135deg, var(--amber), var(--navy-400));
	filter: blur(54px);
	opacity: 0.5;
}

.frame img {
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 32px;
	box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.75);
}

.float-chip {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.65rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(6, 20, 29, 0.74);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.7);
	color: var(--white);
	font-family: var(--font-display);
	font-size: 0.85rem;
	font-weight: 600;
	translate: var(--tx, 0) var(--ty, 0);
	transition: translate 0.7s var(--ease);
	animation: float 6s ease-in-out infinite;
}

.float-chip b {
	color: var(--amber);
	font-weight: 700;
}

.float-chip--1 {
	top: 9%;
	left: -9%;
}

.float-chip--2 {
	top: 44%;
	right: -8%;
	animation-duration: 7.5s;
	animation-delay: -2s;
}

.float-chip--3 {
	bottom: 12%;
	left: -5%;
	animation-duration: 6.8s;
	animation-delay: -4s;
}

.badge {
	position: absolute;
	right: 9%;
	bottom: -52px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 118px;
	height: 118px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink);
	box-shadow: 0 20px 40px -16px rgba(246, 180, 25, 0.65);
	transition: transform 0.5s var(--ease);
}

.badge:hover {
	transform: scale(1.08);
}

.badge__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	animation: spin 16s linear infinite;
}

.badge__ring text {
	fill: var(--ink);
	font-family: var(--font-display);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.badge__arrow {
	width: 30px;
	height: 30px;
	transform: rotate(90deg);
}

@media (max-width: 960px) {
	.hero--home {
		min-height: 0;
	}

	.hero__grid {
		grid-template-columns: 1fr;
	}

	.hero__media {
		max-width: 560px;
		margin-inline: auto;
	}

	.float-chip--1 {
		left: -2%;
	}

	.float-chip--2 {
		right: -2%;
	}

	.float-chip--3 {
		left: 0;
	}
}

@media (max-width: 520px) {
	.float-chip {
		padding: 0.5rem 0.8rem;
		font-size: 0.75rem;
	}

	.badge {
		right: 4%;
		bottom: -44px;
		width: 96px;
		height: 96px;
	}

	.badge__arrow {
		width: 24px;
		height: 24px;
	}
}

/* Client logos
   ========================================================================== */

.clients {
	padding-block: clamp(1.75rem, 4vw, 2.75rem);
	border-bottom: 1px solid var(--line);
	background: var(--white);
}

.marquee {
	display: flex;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee__track {
	display: flex;
	flex: none;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5rem);
	padding-right: clamp(2.5rem, 6vw, 5rem);
	animation: marquee 42s linear infinite;
}

.marquee:hover .marquee__track {
	animation-play-state: paused;
}

.marquee__item {
	flex: none;
}

.marquee__item img {
	width: auto;
	height: 58px;
	max-width: 180px;
	object-fit: contain;
	transition: transform 0.5s var(--ease);
}

.marquee__item:hover img {
	transform: scale(1.1);
}

/* Shared: parallax media + body copy
   ========================================================================== */

.media {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.media img {
	width: 100%;
	transform: scale(1.1) translate3d(0, var(--py, 0px), 0);
	will-change: transform;
}

.prose {
	color: var(--muted);
	font-size: 1.06rem;
}

/* On light panels the serif accent switches to navy with an amber underline. */
.sheet .accent {
	color: var(--navy);
}

.sheet .accent::after {
	right: -0.03em;
	bottom: 0.02em;
	height: 0.09em;
	background: var(--amber);
}

/* Welcome: editorial headline, arch-framed image, ruled copy, 360° statement
   ========================================================================== */

.welcome {
	padding-bottom: calc(var(--section) * 0.35);
}

.welcome__title {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	font-size: clamp(2.4rem, 5.2vw, 4.6rem);
	line-height: 1;
	letter-spacing: -0.05em;
}

.welcome__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
	align-items: center;
	gap: clamp(2.5rem, 7vw, 7rem);
}

.welcome__media {
	position: relative;
	max-width: 460px;
}

.arch {
	overflow: hidden;
	border-radius: 999px 999px var(--radius) var(--radius);
	aspect-ratio: 4 / 5;
	box-shadow: var(--shadow);
}

.arch img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.12) translate3d(0, var(--py, 0px), 0);
	will-change: transform;
}

.welcome__spark {
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(44px, 5vw, 66px);
	aspect-ratio: 1;
	background: var(--amber);
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
	animation: spin 14s linear infinite;
}

.welcome__points p {
	margin: 0;
	padding: clamp(1.25rem, 2.2vw, 1.75rem) 0;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 1.08rem;
}

.welcome__points p:first-child {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1.9vw, 1.5rem);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.02em;
}

.welcome__points p:last-child {
	border-bottom: 1px solid var(--line);
}

.statement-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.statement {
	max-width: 25em;
	margin: 0;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(1.45rem, 3.2vw, 2.7rem);
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -0.03em;
}

.orbit {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(150px, 18vw, 250px);
	aspect-ratio: 1;
}

.orbit::before,
.orbit::after {
	content: "";
	position: absolute;
	border-radius: 50%;
}

.orbit::before {
	inset: 0;
	border: 2px dashed rgba(20, 63, 88, 0.35);
	animation: spin 32s linear infinite;
}

.orbit::after {
	inset: 13%;
	border: 2px solid var(--line);
	border-top-color: var(--amber);
	border-right-color: var(--amber);
	animation: spin 7s linear infinite reverse;
}

.orbit span {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 4vw, 3.4rem);
	font-weight: 700;
	letter-spacing: -0.05em;
}

@media (max-width: 900px) {
	.welcome__grid {
		grid-template-columns: 1fr;
	}

	/* Headline first, then image, then copy. */
	.welcome__content {
		display: contents;
	}

	.welcome__title {
		order: -1;
		margin-bottom: 0;
	}

	.welcome__media {
		max-width: 320px;
	}

	.statement-wrap {
		grid-template-columns: 1fr;
	}

	.orbit {
		order: -1;
		width: 130px;
	}
}

/* Our Approach: pinned scene - the page holds while each step lights up
   ========================================================================== */

.approach {
	position: relative;
}

.js .approach {
	height: 260vh;
}

.approach__pin {
	position: sticky;
	top: 0;
	display: grid;
	align-items: center;
	height: 100vh;
	height: 100svh;
	padding-top: var(--header-offset);
	overflow: hidden;
}

html:not(.js) .approach__pin {
	position: static;
	height: auto;
	padding-block: var(--section);
}

.approach__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1.5rem, 3vh, 2.5rem) clamp(2rem, 5vw, 5rem);
}

.approach__head {
	display: flex;
	grid-column: 1 / -1;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.approach__head .section__title {
	margin: 0;
}

.approach__count {
	margin: 0;
	color: var(--muted);
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.approach__current {
	color: var(--ink);
	font-size: 1.6em;
}

.approach__words {
	display: grid;
}

.approach__word {
	display: flex;
	align-items: baseline;
	gap: clamp(0.75rem, 2vw, 1.75rem);
	transition: transform 0.8s var(--ease);
}

.approach__num {
	width: 2.2em;
	color: var(--muted);
	font-family: var(--font-display);
	font-size: clamp(0.85rem, 1.2vw, 1.05rem);
	font-weight: 600;
	transition: color 0.6s var(--ease);
}

.approach__num::before {
	content: "0";
}

.sheet .approach__word h4 {
	margin: 0;
	font-size: clamp(3rem, min(10.5vw, 17vh), 9.5rem);
	line-height: 1.02;
	letter-spacing: -0.055em;
	color: rgba(20, 63, 88, 0.13);
	transition: color 0.7s var(--ease);
}

.sheet .approach__word.is-past h4 {
	color: rgba(6, 20, 29, 0.32);
}

.sheet .approach__word.is-active h4 {
	color: var(--ink);
}

.approach__word.is-active {
	transform: translate3d(clamp(0.75rem, 2.5vw, 2.5rem), 0, 0);
}

.approach__word.is-active .approach__num {
	color: var(--amber-700);
}

html:not(.js) .sheet .approach__word h4 {
	color: var(--ink);
}

.approach__dial {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(170px, 22vw, 300px);
	aspect-ratio: 1;
}

.approach__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.approach__ring circle {
	fill: none;
	stroke-width: 2.5;
}

.approach__ring-track {
	stroke: var(--line);
}

.approach__ring-fill {
	stroke: var(--amber);
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: calc(100 - var(--p, 0) * 100);
	transition: stroke-dashoffset 0.9s var(--ease);
}

.approach__icons {
	position: relative;
	display: grid;
	place-items: center;
	width: 72%;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(70% 70% at 30% 20%, rgba(47, 122, 165, 0.55), transparent 70%),
		var(--ink);
	box-shadow: 0 30px 60px -28px rgba(6, 20, 29, 0.7);
}

.approach__icon {
	position: absolute;
	width: 38%;
	height: 38%;
	color: var(--amber);
	opacity: 0;
	stroke-width: 1.6;
	transform: scale(0.5) rotate(-35deg);
	transition: opacity 0.5s ease, transform 0.8s var(--ease);
}

.approach__icon.is-active {
	opacity: 1;
	transform: none;
}

.approach__bar {
	grid-column: 1 / -1;
	height: 2px;
	overflow: hidden;
	border-radius: 2px;
	background: var(--line);
}

.approach__bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--navy), var(--amber));
	transform: scaleX(var(--p, 0));
	transform-origin: left;
	transition: transform 0.9s var(--ease);
}

@media (max-width: 760px), (max-height: 520px) {
	.js .approach {
		height: auto;
	}

	.approach__pin {
		position: static;
		height: auto;
		padding-block: 0 var(--section);
	}

	.approach__inner {
		grid-template-columns: 1fr;
	}

	.approach__dial {
		grid-row: 2;
		width: 150px;
	}
}

/* Promise
   ========================================================================== */

.promise {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 6vw, 5.5rem);
	padding: clamp(2rem, 5.5vw, 5rem);
	overflow: hidden;
	border-radius: var(--r);
	background:
		radial-gradient(60% 90% at 0% 0%, rgba(47, 122, 165, 0.5), transparent 62%),
		radial-gradient(50% 80% at 100% 100%, rgba(246, 180, 25, 0.17), transparent 62%),
		var(--ink);
}

.promise__media {
	position: relative;
	width: clamp(190px, 24vw, 300px);
	margin: 14px;
}

.promise__ring {
	position: absolute;
	inset: -14px;
	border: 2px dashed var(--amber);
	border-radius: 50%;
	animation: spin 36s linear infinite;
}

.promise__media img {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #fdf0c8;
	object-fit: cover;
}

.checklist {
	display: grid;
	gap: 0.85rem;
	margin-bottom: 2rem;
}

.checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	color: var(--white);
	font-weight: 500;
}

.checklist .icon {
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.1em;
	padding: 0.28rem;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink);
	stroke-width: 3.2;
}

.checklist--light li {
	color: var(--text);
	font-weight: 400;
}

.checklist--light .icon {
	background: var(--navy);
	color: var(--white);
}

@media (max-width: 760px) {
	.promise {
		grid-template-columns: 1fr;
	}
}

/* VMM: bento - intro + image up top, four interactive point cards below
   ========================================================================== */

.vmm__top {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	align-items: center;
	gap: clamp(2.5rem, 6vw, 6rem);
}

.vmm__intro .section__title {
	font-size: clamp(2rem, 4.4vw, 3.6rem);
}

.vmm__intro .prose {
	max-width: 56ch;
	margin-bottom: 2rem;
}

.vmm__media {
	position: relative;
}

.vmm__stat {
	position: absolute;
	bottom: -28px;
	left: -28px;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1rem 1.4rem 1rem 1.2rem;
	border-radius: 22px;
	background:
		radial-gradient(90% 90% at 0% 0%, rgba(47, 122, 165, 0.55), transparent 70%),
		var(--ink);
	box-shadow: 0 26px 50px -24px rgba(6, 20, 29, 0.8);
	color: var(--on-dark);
	font-size: 0.85rem;
	line-height: 1.35;
}

.vmm__stat strong {
	color: var(--amber);
	font-family: var(--font-display);
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.05em;
}

.vmm__points {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: clamp(3.5rem, 7vw, 6rem);
}

.vmm-card {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding: clamp(1.4rem, 2.2vw, 1.9rem);
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--ink);
}

.vmm-card,
.js .vmm-card.reveal.is-done {
	transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease), color 0.5s var(--ease), opacity 0.9s var(--ease), transform 0.6s var(--ease), box-shadow 0.5s var(--ease);
}

.vmm-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.vmm-card__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--ink);
	color: var(--amber);
	transition: background-color 0.5s var(--ease), color 0.5s var(--ease), transform 0.6s var(--ease);
}

.vmm-card__icon .icon {
	width: 24px;
	height: 24px;
}

.vmm-card__num {
	color: rgba(20, 63, 88, 0.16);
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	transition: color 0.5s var(--ease);
}

.vmm-card p {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 500;
	line-height: 1.5;
}

.vmm-card:hover {
	border-color: var(--ink);
	background: var(--ink);
	box-shadow: var(--shadow);
	color: var(--white);
}

.js .vmm-card.reveal.is-done:hover {
	transform: translate3d(0, -8px, 0);
}

.vmm-card:hover .vmm-card__icon {
	background: var(--amber);
	color: var(--ink);
	transform: rotate(-8deg) scale(1.08);
}

.vmm-card:hover .vmm-card__num {
	color: rgba(255, 255, 255, 0.28);
}

@media (max-width: 1000px) {
	.vmm__points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.vmm__top {
		grid-template-columns: 1fr;
	}

	.vmm__stat {
		left: 12px;
	}
}

@media (max-width: 560px) {
	.vmm__points {
		grid-template-columns: 1fr;
	}
}

/* Services: sticky stacking cards
   ========================================================================== */

.supercharge__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: start;
	gap: clamp(2rem, 6vw, 6rem);
}

.supercharge__intro {
	position: sticky;
	top: calc(var(--header-offset) + 40px);
}

.supercharge__index {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--line-dark);
}

.supercharge__index li {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: 0.8rem 0;
	border-top: 1px solid var(--line-dark);
	color: var(--on-dark-muted);
	font-family: var(--font-display);
	font-size: 0.98rem;
	font-weight: 500;
	transition: color 0.5s var(--ease), padding-left 0.6s var(--ease);
}

.supercharge__index span {
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	transition: color 0.5s var(--ease);
}

.supercharge__index .is-active {
	padding-left: 0.9rem;
	color: var(--white);
}

.supercharge__index .is-active span {
	color: var(--amber);
}

.stack {
	display: grid;
	gap: 1.25rem;
}

.spot {
	position: relative;
}

.spot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(246, 180, 25, 0.17), transparent 60%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s ease;
}

.spot:hover::after {
	opacity: 1;
}

.service {
	position: sticky;
	top: calc(var(--header-offset) + 28px + var(--n, 0) * 18px);
	padding: clamp(1.5rem, 3vw, 2.4rem);
	border: 1px solid var(--line-dark);
	border-radius: var(--radius);
	background: linear-gradient(160deg, var(--ink-3), var(--ink-2));
	box-shadow: 0 -24px 44px -28px rgba(0, 0, 0, 0.75);
	transition: border-color 0.45s ease;
}

.service:hover {
	border-color: rgba(246, 180, 25, 0.55);
}

.service__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.4rem;
}

.service__icon {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	background: var(--amber);
	color: var(--ink);
	transition: transform 0.6s var(--ease);
}

.service:hover .service__icon {
	transform: rotate(-8deg) scale(1.08);
}

.service__icon .icon {
	width: 26px;
	height: 26px;
}

.service__index {
	color: rgba(255, 255, 255, 0.16);
	font-family: var(--font-display);
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
}

.service__title {
	margin-bottom: 0.35em;
	font-size: clamp(1.25rem, 2vw, 1.6rem);
}

.service__lead {
	margin-bottom: 0.75em;
	color: var(--amber);
	font-weight: 600;
}

.service__text {
	margin: 0;
}

@media (max-width: 900px) {
	.supercharge__grid {
		grid-template-columns: 1fr;
	}

	.supercharge__intro,
	.service {
		position: relative;
		top: auto;
	}

	.supercharge__index {
		display: none;
	}
}

/* Pricing
   ========================================================================== */

.pricing {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 1.5rem;
}

.plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border: 1px solid var(--line);
	border-radius: 32px;
	background: var(--white);
}

.plan:hover {
	box-shadow: var(--shadow);
}

.js .plan.reveal.is-done:hover {
	transform: translate3d(0, -8px, 0);
}

.plan--popular {
	isolation: isolate;
	border-color: transparent;
	background: var(--ink);
	box-shadow: 0 40px 70px -36px rgba(6, 20, 29, 0.75);
}

.plan--popular::before {
	content: "";
	position: absolute;
	inset: -2px;
	z-index: -2;
	border-radius: 34px;
	background: conic-gradient(from var(--angle), var(--amber), transparent 28%, var(--navy-400) 50%, transparent 72%, var(--amber));
	animation: angle-spin 5s linear infinite;
}

.plan--popular::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 32px;
	background:
		radial-gradient(70% 50% at 100% 0%, rgba(246, 180, 25, 0.16), transparent 70%),
		var(--ink);
}

@keyframes angle-spin {
	to {
		--angle: 360deg;
	}
}

.plan__badge {
	position: absolute;
	top: 0;
	right: 1.75rem;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	background: var(--amber);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	transform: translateY(-50%);
}

.plan__name {
	margin-bottom: 1rem;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.18em;
}

.sheet .plan__name {
	color: var(--muted);
}

.sheet .plan--popular .plan__name {
	color: var(--amber);
}

.plan__price {
	margin: 0 0 0.35rem;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 4.2vw, 3.4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.045em;
	font-variant-numeric: tabular-nums;
}

.plan--popular .plan__price {
	color: var(--white);
}

.plan__price sup {
	margin-left: 0.15em;
	color: var(--muted);
	font-size: 0.4em;
	font-weight: 600;
	vertical-align: super;
}

.plan__summary {
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.93rem;
}

.plan--popular .plan__summary {
	border-bottom-color: var(--line-dark);
	color: var(--on-dark-muted);
}

.plan__features {
	display: grid;
	gap: 0.75rem;
	margin: 0.6rem 0 2rem;
}

.plan__features li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	font-size: 0.95rem;
}

.plan__features .icon {
	width: 1.3rem;
	height: 1.3rem;
	margin-top: 0.12em;
	padding: 0.22rem;
	border-radius: 50%;
	background: rgba(20, 63, 88, 0.1);
	color: var(--navy);
	stroke-width: 3.2;
}

.plan--popular .plan__features .icon {
	background: var(--amber);
	color: var(--ink);
}

.plan .btn {
	margin-top: auto;
}

.plan__note {
	margin: 1rem 0 0;
	color: var(--muted);
	font-size: 0.78rem;
	text-align: center;
}

.plan--popular .plan__note {
	color: var(--on-dark-muted);
}

@media (max-width: 960px) {
	.pricing {
		grid-template-columns: 1fr;
		max-width: 540px;
		margin-inline: auto;
	}
}

/* Grow together / contact band
   ========================================================================== */

.grow__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2.5rem, 6vw, 6rem);
}

.grow__text {
	margin-bottom: 2rem;
	font-size: 1.08rem;
}

.contact-list {
	display: grid;
	gap: 0.95rem;
	margin-bottom: 2rem;
}

.contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	color: var(--white);
}

.contact-list .icon {
	margin-top: 0.2em;
	color: var(--amber);
}

.grow__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

.glass {
	padding: clamp(1.5rem, 4vw, 2.75rem);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 32px;
	background: rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}

.grow__form-title {
	margin-bottom: 1.4rem;
	font-size: clamp(1.25rem, 2vw, 1.6rem);
}

@media (max-width: 900px) {
	.grow__grid {
		grid-template-columns: 1fr;
	}
}

/* Forms
   ========================================================================== */

.form,
.tool {
	--f-bg: rgba(255, 255, 255, 0.06);
	--f-border: rgba(255, 255, 255, 0.18);
	--f-text: var(--white);
	--f-label: rgba(255, 255, 255, 0.82);
	--f-placeholder: rgba(255, 255, 255, 0.4);
	--f-focus: var(--amber);
}

.sheet .form,
.sheet .tool {
	--f-bg: var(--cream);
	--f-border: var(--line);
	--f-text: var(--ink);
	--f-label: var(--ink);
	--f-placeholder: #8b979f;
	--f-focus: var(--navy);
}

.form {
	display: grid;
	gap: 1.1rem;
}

.form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem;
}

.form__field,
.field {
	display: grid;
	gap: 0.45rem;
}

.form__field label,
.field label {
	color: var(--f-label);
	font-size: 0.85rem;
	font-weight: 600;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="url"],
.form input[type="number"],
.form select,
.form textarea,
.input {
	width: 100%;
	padding: 0.9rem 1rem;
	border: 1px solid var(--f-border);
	border-radius: var(--radius-sm);
	background: var(--f-bg);
	color: var(--f-text);
	transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.form ::placeholder,
.input::placeholder {
	color: var(--f-placeholder);
}

.form textarea {
	min-height: 140px;
	resize: vertical;
}

.form input:focus,
.form select:focus,
.form textarea:focus,
.input:focus {
	border-color: var(--f-focus);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--f-focus) 22%, transparent);
	outline: none;
}

.form__field--hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form__field--math {
	max-width: 220px;
}

.form__consent {
	margin: 0;
	color: var(--muted);
	font-size: 0.82rem;
}

.form__consent a {
	text-decoration: underline;
}

.form__error {
	margin: 0;
	padding: 0.85rem 1rem;
	border: 1px solid #f3b5a3;
	border-radius: var(--radius-sm);
	background: #fdece6;
	color: #8a2b0e;
	font-size: 0.92rem;
	font-weight: 500;
}

.form .btn {
	justify-self: start;
}

@media (max-width: 560px) {
	.form__row {
		grid-template-columns: 1fr;
	}
}

/* FAQ
   ========================================================================== */

.faq-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
	align-items: start;
	gap: clamp(2rem, 6vw, 6rem);
}

.faq-layout__intro {
	position: sticky;
	top: calc(var(--header-offset) + 40px);
}

.faq {
	counter-reset: faq;
	border-top: 1px solid var(--line);
}

.faq__item {
	border-bottom: 1px solid var(--line);
}

.faq__question {
	display: grid;
	grid-template-columns: 2.2rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem 0;
	counter-increment: faq;
	cursor: pointer;
	list-style: none;
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__question::before {
	content: counter(faq, decimal-leading-zero);
	color: var(--amber-700);
	font-family: var(--font-display);
	font-size: 0.85rem;
	font-weight: 600;
}

.faq__question h3 {
	margin: 0;
	font-size: clamp(1.05rem, 1.7vw, 1.3rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	text-wrap: pretty;
	transition: color 0.3s ease;
}

.faq__question:hover h3 {
	color: var(--navy-400);
}

.faq__icon {
	position: relative;
	width: 42px;
	height: 42px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--white);
	color: var(--ink);
	transition: transform 0.6s var(--ease), background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.faq__icon::before,
.faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
}

.faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item[open] .faq__icon {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--amber);
	transform: rotate(135deg);
}

.faq__item.is-closing .faq__icon {
	border-color: var(--line);
	background: var(--white);
	color: var(--ink);
	transform: none;
}

.faq__answer {
	overflow: hidden;
	color: var(--muted);
}

.faq__answer p {
	max-width: 62ch;
	margin: 0;
	padding: 0 0 1.75rem 3.2rem;
}

@media (max-width: 900px) {
	.faq-layout {
		grid-template-columns: 1fr;
	}

	.faq-layout__intro {
		position: static;
	}

	.faq__answer p {
		padding-left: 0;
	}
}

/* Testimonials
   ========================================================================== */

.testimonials {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.testimonial {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 2.25rem;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 32px;
	background: var(--white);
}

.testimonial::before {
	content: "\201C";
	position: absolute;
	top: 0.35rem;
	right: 1.5rem;
	color: var(--amber);
	font-family: var(--font-serif);
	font-size: 8rem;
	line-height: 1;
	opacity: 0.45;
	transition: transform 0.6s var(--ease), opacity 0.4s ease;
}

.testimonial:hover {
	box-shadow: var(--shadow);
}

.js .testimonial.reveal.is-done:hover {
	transform: translate3d(0, -8px, 0) rotate(-0.6deg);
}

.testimonial:hover::before {
	opacity: 0.9;
	transform: translate3d(0, 6px, 0) scale(1.1);
}

.testimonial__stars {
	display: flex;
	gap: 0.15rem;
	margin-bottom: 1.1rem;
	color: var(--amber);
}

.testimonial__stars .icon {
	width: 1.1rem;
	height: 1.1rem;
}

.testimonial__quote {
	flex: 1;
	margin: 0 0 1.75rem;
	color: var(--text);
	font-size: 1.04rem;
}

.testimonial__person {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--line);
}

.testimonial__person img {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.testimonial__name {
	display: block;
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 600;
}

.testimonial__role {
	display: block;
	color: var(--muted);
	font-size: 0.88rem;
}

@media (max-width: 960px) {
	.testimonials {
		grid-template-columns: 1fr;
		max-width: 640px;
		margin-inline: auto;
	}
}

/* Post cards
   ========================================================================== */

.post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.75rem;
}

.post-grid--list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 28px;
	background: var(--white);
}

.post-card:hover {
	box-shadow: var(--shadow);
}

.js .post-card.reveal.is-done:hover {
	transform: translate3d(0, -8px, 0);
}

.post-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--cream-2);
}

.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease);
}

.post-card:hover .post-card__media img {
	transform: scale(1.07);
}

.post-card__media::after {
	content: "\2197";
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink);
	font-size: 1.2rem;
	font-weight: 700;
	opacity: 0;
	transform: scale(0.4) rotate(-45deg);
	transition: opacity 0.4s ease, transform 0.6s var(--ease);
}

.post-card:hover .post-card__media::after {
	opacity: 1;
	transform: none;
}

.post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.6rem;
}

.post-card__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.9rem;
	color: var(--muted);
	font-size: 0.85rem;
}

.post-card__title {
	margin-bottom: 0.55em;
	font-size: 1.22rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.sheet .post-card__title a {
	color: inherit;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1.5px;
	transition: background-size 0.6s var(--ease);
}

.post-card:hover .post-card__title a {
	background-size: 100% 1.5px;
}

.post-card__excerpt {
	flex: 1;
	color: var(--muted);
	font-size: 0.95rem;
}

.post-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--line);
}

.author {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.author__badge {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--navy);
	color: var(--white);
	font-family: var(--font-display);
	font-size: 0.78rem;
	font-weight: 600;
}

.author__name {
	display: block;
	color: var(--ink);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
}

.author__meta {
	display: block;
	color: var(--muted);
	font-size: 0.8rem;
}

@media (max-width: 960px) {
	.post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.post-grid,
	.post-grid--list {
		grid-template-columns: 1fr;
	}
}

/* CTA band
   ========================================================================== */

.cta-band {
	padding-bottom: var(--section);
	text-align: center;
	-webkit-mask-image: linear-gradient(#000 calc(100% - 9rem), transparent);
	mask-image: linear-gradient(#000 calc(100% - 9rem), transparent);
}

.cta-band__title {
	margin: 0 auto 0.3em;
	font-size: clamp(2.6rem, 8vw, 6.75rem);
	line-height: 1;
	letter-spacing: -0.05em;
}

.cta-band__text {
	margin: 0 0 2.5rem;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}

/* Footer
   ========================================================================== */

.site-footer {
	position: relative;
	z-index: 1;
	padding-top: clamp(3.5rem, 7vw, 5.5rem);
	overflow: clip;
	background: var(--ink);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.7fr);
	gap: clamp(2rem, 5vw, 4rem);
}

.site-footer__logo {
	display: inline-block;
	transition: transform 0.5s var(--ease);
}

.site-footer__logo:hover {
	transform: scale(1.04);
}

.site-footer__logo img {
	width: auto;
	height: 54px;
}

.site-footer__tagline {
	max-width: 14ch;
	margin: 1.5rem 0 0;
	color: var(--white);
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.8vw, 2.3rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.035em;
}

.site-footer__title {
	margin-bottom: 1.25rem;
	color: var(--amber);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.footer__contact,
.footer__links {
	display: grid;
	gap: 0.85rem;
}

.footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.footer__contact .icon {
	margin-top: 0.2em;
	color: var(--amber);
}

.site-footer a {
	text-decoration: none;
	transition: color 0.3s ease;
}

.site-footer a:hover {
	color: var(--white);
}

.footer__links a {
	display: inline-block;
	background: linear-gradient(var(--amber), var(--amber)) no-repeat 0 100% / 0 1px;
	transition: background-size 0.5s var(--ease), transform 0.5s var(--ease), color 0.3s ease;
}

.footer__links a:hover {
	background-size: 100% 1px;
	transform: translate3d(6px, 0, 0);
}

.site-footer__wordmark {
	margin-top: clamp(2.5rem, 6vw, 5rem);
	padding-inline: var(--gutter);
	overflow: hidden;
	text-align: center;
	user-select: none;
}

.site-footer__wordmark span {
	display: inline-block;
	background:
		linear-gradient(90deg, var(--white) 30%, var(--amber)) no-repeat 0 0 / 0% 100%,
		linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: var(--font-display);
	font-size: clamp(2rem, 9.9vw, 11.2rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 0 0.1em 0 0.04em;
	transition: background-size 1.8s var(--ease-in-out) 0.2s;
}

.site-footer__wordmark.is-in span {
	background-size: 100% 100%, auto;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	padding-block: 1.5rem;
	border-top: 1px solid var(--line-dark);
	color: var(--on-dark-muted);
	font-size: 0.88rem;
}

.site-footer__bottom p {
	margin: 0;
}

.site-footer__bottom strong {
	color: var(--white);
	font-weight: 600;
}

@media (max-width: 1600px) {
	.site-footer__bottom {
		padding-right: calc(var(--gutter) + 76px);
	}
}

.to-top {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--line-dark);
	border-radius: 50%;
	background: transparent;
	color: var(--white);
	cursor: pointer;
	transition: background-color 0.4s ease, color 0.4s ease, transform 0.5s var(--ease);
}

.to-top .icon {
	transform: rotate(-90deg);
}

.to-top:hover {
	background: var(--amber);
	color: var(--ink);
	transform: translate3d(0, -4px, 0);
}

@media (max-width: 800px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
	}
}

.whatsapp-fab {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	color: var(--white);
	box-shadow: 0 12px 26px -10px rgba(18, 140, 70, 0.8);
	transition: transform 0.4s var(--ease);
}

.whatsapp-fab::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: #25d366;
	animation: pulse-ring 2.4s ease-out infinite;
}

.whatsapp-fab:hover {
	transform: scale(1.1) rotate(8deg);
}

.whatsapp-fab .icon {
	width: 30px;
	height: 30px;
}

/* Inner page hero
   ========================================================================== */

.page-hero {
	padding-block: calc(var(--header-offset) + clamp(3rem, 8vw, 6rem)) calc(clamp(3rem, 7vw, 5rem) + var(--r));
	text-align: center;
}

.page-hero__title {
	max-width: 18ch;
	margin-inline: auto;
	font-size: clamp(2.3rem, 6vw, 4.75rem);
	line-height: 1.04;
	letter-spacing: -0.045em;
}

.page-hero__text {
	max-width: 60ch;
	margin: 1.25rem auto 0;
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}

.about-hero .hero__title {
	font-size: clamp(2.5rem, 5vw, 4.4rem);
}

/* About page
   ========================================================================== */

.mv {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

.mv__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 32px;
	background: var(--white);
}

.mv__card:hover {
	box-shadow: var(--shadow);
}

.mv__media {
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: #fdf8ea;
}

.mv__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--ease);
}

.mv__card:hover .mv__media img {
	transform: scale(1.06);
}

.mv__body {
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.sheet .mv__title {
	color: var(--amber-700);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.18em;
}

.mv__text {
	margin-bottom: 1.6rem;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 2.5vw, 1.9rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.03em;
}

@media (max-width: 800px) {
	.mv {
		grid-template-columns: 1fr;
	}
}

.team {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.member {
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	background: var(--ink);
	color: var(--white);
}

.member__photo {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: top center;
	transition: transform 1s var(--ease);
}

.member__caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 4rem 1.6rem 1.5rem;
	background: linear-gradient(to top, rgba(6, 20, 29, 0.95) 25%, transparent);
	transition: opacity 0.4s ease;
}

.sheet .member__name,
.sheet .member__details h3 {
	margin: 0;
	color: var(--white);
	font-size: 1.3rem;
	font-weight: 600;
}

.member__role {
	margin: 0.2rem 0 0;
	color: var(--amber);
	font-size: 0.92rem;
	font-weight: 600;
}

.member__details {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.75rem;
	padding: 1.75rem;
	background:
		radial-gradient(80% 50% at 100% 0%, rgba(246, 180, 25, 0.2), transparent 70%),
		rgba(6, 20, 29, 0.95);
	font-size: 0.95rem;
	clip-path: inset(100% 0 0 0);
	transition: clip-path 0.7s var(--ease-in-out);
}

.sheet .member__details h3 {
	color: var(--amber);
}

.member__details p {
	margin: 0;
	color: var(--on-dark);
}

.member__details strong {
	color: var(--white);
}

.sheet .member__linkedin {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-top: 0.25rem;
	border-radius: 50%;
	background: var(--white);
	color: #0a66c2;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--ease);
}

.sheet .member__linkedin:hover {
	background: var(--amber);
	color: var(--ink);
	transform: scale(1.1);
}

.member:hover .member__details,
.member:focus-within .member__details {
	clip-path: inset(0 0 0 0);
}

.member:hover .member__photo {
	transform: scale(1.06);
}

@media (hover: none), (max-width: 700px) {
	.member__caption {
		display: none;
	}

	.member__details {
		position: static;
		clip-path: none;
	}

	.member__photo {
		aspect-ratio: 1;
	}
}

@media (max-width: 960px) {
	.team {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.team {
		grid-template-columns: 1fr;
	}
}

/* Contact layout / cards
   ========================================================================== */

.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.card {
	padding: clamp(1.5rem, 4vw, 2.75rem);
	border: 1px solid var(--line);
	border-radius: 32px;
	background: var(--white);
	box-shadow: var(--shadow);
}

.info-cards {
	display: grid;
	gap: 1rem;
}

.info-card {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.5rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.info-card:hover {
	box-shadow: var(--shadow);
	transform: translate3d(6px, 0, 0);
}

.info-card__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 50px;
	height: 50px;
	border-radius: 16px;
	background: var(--ink);
	color: var(--amber);
	transition: transform 0.6s var(--ease);
}

.info-card:hover .info-card__icon {
	transform: rotate(-8deg) scale(1.08);
}

.info-card__title {
	margin: 0 0 0.2rem;
	font-size: 1.05rem;
	font-weight: 600;
}

.info-card p {
	margin: 0;
	color: var(--muted);
}

.sheet .info-card a {
	color: var(--muted);
	text-decoration: none;
}

.sheet .info-card a:hover {
	color: var(--navy);
	text-decoration: underline;
}

.map {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 32px;
	box-shadow: var(--shadow);
}

.map iframe {
	width: 100%;
	height: clamp(320px, 45vw, 480px);
	border: 0;
	filter: grayscale(0.35) contrast(1.05);
	transition: filter 0.6s ease;
}

.map:hover iframe {
	filter: none;
}

@media (max-width: 900px) {
	.contact-layout {
		grid-template-columns: 1fr;
	}
}

/* Pagination
   ========================================================================== */

.pagination {
	margin-top: 3.5rem;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.sheet .pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 48px;
	height: 48px;
	padding: 0 1rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--white);
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.sheet .pagination .page-numbers.current,
.sheet .pagination .page-numbers:hover {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--white);
}

/* Single post / long-form content
   ========================================================================== */

.article__header {
	padding-block: calc(var(--header-offset) + clamp(3rem, 7vw, 5rem)) calc(clamp(2.5rem, 5vw, 4rem) + var(--r));
}

.article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	margin-bottom: 1.4rem;
	font-size: 0.9rem;
}

.article__meta a {
	color: var(--amber);
	text-decoration: none;
}

.article__title {
	font-size: clamp(2rem, 4.8vw, 3.6rem);
	line-height: 1.08;
	letter-spacing: -0.04em;
}

.article__byline {
	margin-top: 1.75rem;
}

.article__header .author__badge {
	background: var(--amber);
	color: var(--ink);
}

.article__header .author__name {
	color: var(--white);
}

.article__header .author__meta {
	color: var(--on-dark-muted);
}

.article > .sheet {
	padding-block: clamp(2.5rem, 6vw, 5rem) var(--section);
}

.article__image {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.article__image img {
	width: 100%;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.entry-content {
	color: var(--text);
	font-size: 1.1rem;
	line-height: 1.8;
	overflow-wrap: break-word;
}

.entry-content > *:first-child {
	margin-top: 0;
}

.entry-content h2 {
	margin: 2em 0 0.6em;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.2;
}

.entry-content h3 {
	margin: 1.75em 0 0.5em;
	font-size: clamp(1.2rem, 2.4vw, 1.45rem);
	font-weight: 600;
	line-height: 1.3;
}

.entry-content p {
	margin: 0 0 1.25em;
}

.entry-content ul,
.entry-content ol {
	margin: 0 0 1.25em;
	padding-left: 1.5em;
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li {
	margin-bottom: 0.5em;
}

.entry-content li::marker {
	color: var(--amber-700);
	font-weight: 700;
}

.sheet .entry-content a {
	color: var(--navy);
	font-weight: 500;
	text-decoration: none;
	background: linear-gradient(var(--amber), var(--amber)) no-repeat 0 100% / 100% 2px;
	transition: background-size 0.4s var(--ease);
}

.sheet .entry-content a:hover {
	background-size: 100% 100%;
}

.entry-content img {
	margin: 0.5em 0 1.5em;
	border-radius: var(--radius);
}

.entry-content blockquote {
	margin: 1.5em 0;
	padding: 0.25em 0 0.25em 1.25em;
	border-left: 3px solid var(--amber);
	color: var(--ink);
	font-family: var(--font-serif);
	font-size: 1.4em;
	font-style: italic;
	line-height: 1.4;
}

.entry-content code {
	padding: 0.1em 0.4em;
	border-radius: 6px;
	background: var(--cream-2);
	font-size: 0.9em;
	overflow-wrap: anywhere;
}

.article__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 3rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--line);
}

.legal .entry-content h2 {
	font-size: 1.4rem;
}

/* Capabilities
   ========================================================================== */

.cards-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	counter-reset: cap;
}

.cap-card {
	position: relative;
	padding: 2.25rem;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 32px;
	background: var(--white);
	counter-increment: cap;
}

.cap-card::before {
	content: counter(cap, decimal-leading-zero);
	display: block;
	margin-bottom: 2.5rem;
	color: var(--amber);
	font-family: var(--font-display);
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
}

.cap-card:hover {
	box-shadow: var(--shadow);
}

.js .cap-card.reveal.is-done:hover {
	transform: translate3d(0, -8px, 0);
}

.cap-card h2 {
	font-size: 1.4rem;
}

.cap-card p {
	margin: 0;
	color: var(--muted);
}

@media (max-width: 900px) {
	.cards-3 {
		grid-template-columns: 1fr;
	}
}

/* Thank you / 404
   ========================================================================== */

.notice {
	display: grid;
	place-items: center;
	min-height: 100svh;
	padding-block: calc(var(--header-offset) + 3rem) var(--section);
	text-align: center;
}

.notice__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 92px;
	height: 92px;
	margin: 0 auto 2rem;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink);
}

.notice__icon::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: var(--amber);
	animation: pulse-ring 2.2s ease-out infinite;
}

.notice__icon .icon {
	width: 42px;
	height: 42px;
	stroke-width: 3;
}

.notice__title {
	font-size: clamp(3rem, 10vw, 8rem);
	line-height: 1;
	letter-spacing: -0.05em;
}

.notice__text {
	max-width: 46ch;
	margin: 0 auto 2.25rem;
	font-size: 1.2rem;
}

/* Tools
   ========================================================================== */

.tool {
	max-width: 780px;
	margin-inline: auto;
}

.tool--wide {
	max-width: 1040px;
}

.tool__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.tool__row .input {
	flex: 1 1 260px;
	border-radius: 999px;
	padding-inline: 1.4rem;
}

.tool__result {
	margin-top: 1.5rem;
	padding: 1.5rem;
	border: 1.5px dashed var(--line);
	border-radius: var(--radius);
	background: var(--cream);
	text-align: center;
}

.tool__result a:not(.btn) {
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.tool__result img {
	margin: 0 auto;
	border-radius: var(--radius-sm);
	background: var(--white);
}

.tool__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.tool__message {
	margin: 0.9rem 0 0;
	color: #8a2b0e;
	font-weight: 500;
}

.tool__lead {
	color: var(--muted);
	text-align: center;
}

.dropzone {
	display: grid;
	place-items: center;
	gap: 0.9rem;
	padding: clamp(2.5rem, 7vw, 4.5rem) 1.5rem;
	border: 2px dashed rgba(20, 63, 88, 0.35);
	border-radius: var(--radius);
	background: var(--cream);
	color: var(--muted);
	text-align: center;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.dropzone:hover,
.dropzone.is-dragover {
	border-color: var(--amber-700);
	background: #fdf0c8;
}

.dropzone > .icon {
	width: 46px;
	height: 46px;
	color: var(--navy);
	animation: float 4s ease-in-out infinite;
}

.dropzone p {
	margin: 0;
	font-weight: 500;
}

.tool__panel {
	margin-top: 1.5rem;
}

.tool__panel h2,
.tool__panel h3 {
	font-size: 1.15rem;
	font-weight: 600;
}

.preview-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.preview {
	margin: 0 0 1.5rem;
	padding: 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--cream);
	text-align: center;
}

.preview-grid .preview {
	margin: 0;
}

.preview img {
	width: 100%;
	max-height: 320px;
	margin-bottom: 0.5rem;
	border-radius: var(--radius-sm);
	object-fit: contain;
}

.preview figcaption {
	color: var(--muted);
	font-size: 0.88rem;
}

.controls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	align-items: end;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.field--check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 48px;
}

.field--check input {
	width: 18px;
	height: 18px;
	accent-color: var(--navy);
}

.field--range {
	grid-column: 1 / -1;
}

.field__range {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.field__range input[type="range"] {
	flex: 1;
	accent-color: var(--navy);
}

.field__range .input {
	width: 90px;
}

.segmented {
	display: inline-flex;
	margin-bottom: 1.25rem;
	padding: 4px;
	border-radius: 999px;
	background: var(--cream-2);
}

.segmented button {
	padding: 0.6rem 1.2rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--muted);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.segmented button[aria-pressed="true"] {
	background: var(--ink);
	color: var(--white);
}

.stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 2rem;
	margin: 1rem 0 0;
	color: var(--muted);
	font-size: 0.95rem;
}

.stats p {
	margin: 0;
}

.stats strong {
	color: var(--ink);
}

@media (max-width: 640px) {
	.preview-grid {
		grid-template-columns: 1fr;
	}
}

/* Brand-story homepage and the four service pages
   ========================================================================== */

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0 0 1rem;
	color: var(--amber-700);
	font-family: var(--font-display);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: currentColor;
}

.band .eyebrow,
.eyebrow--light {
	color: var(--amber);
}

.section__title--wide {
	max-width: 22ch;
}

.section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section__head .section__title {
	margin: 0;
}

.lead-text {
	max-width: 60ch;
	margin: -0.5rem 0 2.5rem;
	color: var(--muted);
	font-size: 1.1rem;
}

.note {
	margin: 2rem 0 0;
	color: var(--muted);
	text-align: center;
}

.hero__note {
	margin: 1.1rem 0 0;
	color: var(--on-dark-muted);
	font-size: 0.88rem;
}

.hero__note a {
	color: var(--amber);
}

.ph-text {
	padding: 0 0.3em;
	border-radius: 6px;
	background: rgba(246, 180, 25, 0.18);
	color: #8a5d00;
}

.dark .ph-text,
.band .ph-text,
.hero .ph-text {
	color: var(--amber-300);
}

.ph {
	display: grid;
	place-items: center;
	color: var(--muted);
	font-size: 0.92rem;
	background: repeating-linear-gradient(135deg, var(--cream-2) 0 14px, #e5ddcb 14px 28px);
}

.site-footer__title--spaced {
	margin-top: 2rem;
}

.glass .form {
	color-scheme: dark;
}

.form select option {
	color: var(--ink);
}

/* Footer: four columns now that services have their own list. */
.site-footer__grid {
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.75fr) minmax(0, 0.75fr);
}

@media (max-width: 1000px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* Home hero: "How we think" card over the image */
.hero--home .hero__media {
	margin-bottom: 40px;
}

.think {
	position: absolute;
	bottom: -48px;
	left: -48px;
	z-index: 3;
	width: min(340px, 82%);
	padding: 1.25rem 1.4rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 22px;
	background: rgba(6, 20, 29, 0.84);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.85);
	animation: float 7s ease-in-out infinite;
}

.think__title {
	margin: 0 0 0.7rem;
	color: var(--amber);
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.think__list {
	display: grid;
	gap: 0.55rem;
}

.think__list li {
	display: flex;
	gap: 0.7rem;
	color: var(--white);
	font-size: 0.92rem;
	line-height: 1.4;
}

.think__list span {
	flex: none;
	padding-top: 0.12em;
	color: var(--amber);
	font-family: var(--font-display);
	font-size: 0.78rem;
	font-weight: 700;
}

/* Logos */
.clients__label {
	margin: 0 0 1.1rem;
	color: var(--muted);
	font-family: var(--font-display);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-align: center;
	text-transform: uppercase;
}

.wordmark {
	display: inline-block;
	color: #7d8a94;
	font-family: var(--font-display);
	font-size: 1.45rem;
	font-weight: 800;
	line-height: 58px;
	letter-spacing: -0.03em;
	white-space: nowrap;
}

.logo-strip {
	padding-block: clamp(1.75rem, 4vw, 2.5rem);
	border-bottom: 1px solid var(--line);
	background: var(--white);
}

.logo-strip__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 2.5rem;
}

.logo-strip .clients__label {
	margin: 0;
}

.logo-strip__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 3rem;
}

.logo-strip__list img {
	width: auto;
	height: 46px;
	max-width: 160px;
	object-fit: contain;
}

.logo-strip__list .wordmark {
	line-height: 46px;
}

/* Problem */
.problem__title {
	max-width: 19ch;
	font-size: clamp(2.2rem, 5vw, 4.4rem);
	line-height: 1.04;
}

.gaps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 5rem);
}

.gap {
	padding: 1.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
}

.gap__num {
	display: block;
	margin-bottom: 2.25rem;
	color: var(--amber-700);
	font-family: var(--font-display);
	font-weight: 700;
}

.gap p {
	margin: 0;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.015em;
}

/* Four offers */
.offers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.sheet .offer {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	min-height: 360px;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 32px;
	background: var(--white);
	color: var(--ink);
	text-decoration: none;
}

.sheet .offer,
.js .sheet .offer.reveal.is-done {
	transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease), transform 0.6s var(--ease), opacity 0.9s var(--ease);
}

.sheet .offer:hover {
	border-color: var(--ink);
	box-shadow: var(--shadow);
	color: var(--ink);
}

.js .sheet .offer.reveal.is-done:hover {
	transform: translate3d(0, -8px, 0);
}

.offer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: auto;
	padding-bottom: 2rem;
}

.offer__icon {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 18px;
	background: var(--ink);
	color: var(--amber);
	transition: transform 0.6s var(--ease);
}

.offer__icon .icon {
	width: 26px;
	height: 26px;
}

.offer:hover .offer__icon {
	transform: rotate(-8deg) scale(1.08);
}

.offer__num {
	color: rgba(20, 63, 88, 0.14);
	font-family: var(--font-display);
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.05em;
}

.offer__audience {
	color: var(--muted);
	font-size: 0.9rem;
}

.offer__title {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.035em;
}

.offer__text {
	max-width: 46ch;
	color: var(--muted);
	font-size: 1.02rem;
}

.offer__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
	font-family: var(--font-display);
	font-weight: 600;
}

.offer__arrow {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink);
	transition: transform 0.6s var(--ease);
}

.offer:hover .offer__arrow {
	transform: rotate(-45deg);
}

.sheet .offer--flagship {
	border-color: transparent;
	background:
		radial-gradient(70% 60% at 100% 0%, rgba(246, 180, 25, 0.2), transparent 70%),
		radial-gradient(60% 70% at 0% 100%, rgba(47, 122, 165, 0.5), transparent 70%),
		var(--ink);
	color: var(--white);
}

.sheet .offer--flagship:hover {
	border-color: transparent;
	color: var(--white);
}

.offer--flagship .offer__icon {
	background: var(--amber);
	color: var(--ink);
}

.offer--flagship .offer__num {
	color: rgba(255, 255, 255, 0.16);
}

.offer--flagship .offer__audience,
.offer--flagship .offer__text {
	color: var(--on-dark);
}

/* How we work: four-step pinned scene with a line of detail per step */
.js .approach--4 {
	height: 340vh;
}

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

.approach__head .eyebrow {
	margin-bottom: 0.5rem;
}

.sheet .approach__word h3 {
	margin: 0;
	color: rgba(20, 63, 88, 0.13);
	font-size: clamp(2.6rem, min(8vw, 10.5vh), 7rem);
	line-height: 1.02;
	letter-spacing: -0.055em;
	transition: color 0.7s var(--ease);
}

.sheet .approach__word.is-past h3 {
	color: rgba(6, 20, 29, 0.32);
}

.sheet .approach__word.is-active h3,
html:not(.js) .sheet .approach__word h3 {
	color: var(--ink);
}

.approach__desc {
	max-width: 46ch;
	max-height: 0;
	margin: 0;
	overflow: hidden;
	color: var(--muted);
	font-size: 1.05rem;
	opacity: 0;
	transition: max-height 0.6s var(--ease), opacity 0.5s ease, margin 0.6s var(--ease);
}

.approach__word.is-active .approach__desc,
html:not(.js) .approach__desc {
	max-height: 5em;
	margin: 0.2rem 0 0.7rem;
	opacity: 1;
}

/* Founder */
.founder__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	align-items: start;
	gap: clamp(2.5rem, 6vw, 6rem);
}

.founder__media {
	position: sticky;
	top: calc(var(--header-offset) + 40px);
	max-width: 420px;
}

.founder .arch {
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}

.founder .arch img {
	object-position: top center;
}

.founder__caption {
	display: flex;
	flex-direction: column;
	margin: 1.1rem 0 0;
}

.founder__caption strong {
	color: var(--white);
	font-family: var(--font-display);
	font-size: 1.15rem;
}

.founder__caption span {
	color: var(--amber);
	font-size: 0.9rem;
}

.founder__intro {
	max-width: 56ch;
	margin-bottom: 2.75rem;
	font-size: 1.15rem;
}

.timeline {
	margin-left: 0.4rem;
	border-left: 2px solid var(--line-dark);
}

.timeline__item {
	position: relative;
	padding: 0 0 2.25rem 2.1rem;
}

.timeline__item:last-child {
	padding-bottom: 0;
}

.timeline__item::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: -9px;
	width: 16px;
	height: 16px;
	border: 3px solid var(--ink);
	border-radius: 50%;
	background: var(--amber);
	box-shadow: 0 0 0 4px rgba(246, 180, 25, 0.22);
}

.timeline__when {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--amber);
	font-family: var(--font-display);
	font-size: 1.45rem;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.timeline__item p {
	max-width: 56ch;
	margin: 0;
}

/* Case studies */
.cases {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.sheet .case {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 28px;
	background: var(--white);
	color: var(--ink);
	text-decoration: none;
}

.sheet .case:hover {
	box-shadow: var(--shadow);
	color: var(--ink);
}

.js .sheet .case.reveal.is-done:hover {
	transform: translate3d(0, -8px, 0);
}

.case__media {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.case__media--logo {
	border-bottom: 1px solid var(--line);
	background: var(--white);
}

.case__media--brand {
	background:
		radial-gradient(60% 70% at 0% 100%, rgba(47, 122, 165, 0.5), transparent 70%),
		var(--ink);
}

.case__media img {
	width: auto;
	max-width: 62%;
	max-height: 50%;
	object-fit: contain;
	transition: transform 0.8s var(--ease);
}

.case:hover .case__media img {
	transform: scale(1.06);
}

.case__body {
	padding: 1.5rem 1.6rem 1.75rem;
}

.case__tag {
	margin: 0 0 0.5rem;
	color: var(--amber-700);
	font-family: var(--font-display);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sheet .case__title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.case__body p:last-child {
	margin: 0;
	color: var(--muted);
}

/* Service hero visuals: dashboard mock, browser, showreel */
.offer-hero .frame::before {
	opacity: 0.4;
}

.mock {
	padding: 1.4rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 28px;
	background: linear-gradient(160deg, var(--ink-3), var(--ink-2));
	box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.8);
	color: var(--white);
}

.mock__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
	font-size: 0.95rem;
}

.mock__head span {
	color: var(--on-dark-muted);
	font-size: 0.78rem;
}

.mock__rows {
	display: grid;
	gap: 0.55rem;
}

.mock__rows li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.8rem 1rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.06);
	font-size: 0.9rem;
	animation: row-in 0.8s var(--ease) both;
}

.mock__rows li:nth-child(2) { animation-delay: 0.15s; }
.mock__rows li:nth-child(3) { animation-delay: 0.3s; }
.mock__rows li:nth-child(4) { animation-delay: 0.45s; }

@keyframes row-in {
	from {
		opacity: 0;
		transform: translate3d(18px, 0, 0);
	}
}

.pill {
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-style: normal;
	font-weight: 600;
	white-space: nowrap;
}

.pill--ok {
	background: rgba(52, 199, 123, 0.18);
	color: #7be8b0;
}

.pill--wait {
	background: rgba(246, 180, 25, 0.18);
	color: var(--amber-300);
}

.pill--warn {
	background: rgba(240, 103, 63, 0.2);
	color: #ffa184;
}

.mock__bars {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 84px;
	margin-top: 1.2rem;
}

.mock__bars i {
	flex: 1;
	height: var(--h);
	border-radius: 6px 6px 2px 2px;
	background: linear-gradient(var(--amber), rgba(246, 180, 25, 0.22));
	transform-origin: bottom;
	animation: grow-bar 1.2s var(--ease) both;
}

.mock__bars i:nth-child(2) { animation-delay: 0.1s; }
.mock__bars i:nth-child(3) { animation-delay: 0.2s; }
.mock__bars i:nth-child(4) { animation-delay: 0.3s; }
.mock__bars i:nth-child(5) { animation-delay: 0.4s; }
.mock__bars i:nth-child(6) { animation-delay: 0.5s; }

@keyframes grow-bar {
	from {
		transform: scaleY(0);
	}
}

.browser {
	overflow: hidden;
	border-radius: 24px;
	background: var(--white);
	box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.8);
}

.browser__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0.75rem 1rem;
	background: #e9edf1;
}

.browser__bar i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #f0673f;
}

.browser__bar i:nth-child(2) {
	background: var(--amber);
}

.browser__bar i:nth-child(3) {
	background: #34c77b;
}

.browser__bar span {
	flex: 1;
	margin-left: 0.75rem;
	padding: 0.2rem 0.9rem;
	border-radius: 999px;
	background: var(--white);
	color: var(--muted);
	font-size: 0.78rem;
}

.browser__body {
	display: grid;
	gap: 0.8rem;
	padding: 1.75rem;
}

.sk {
	display: block;
	height: 12px;
	border-radius: 6px;
	background: linear-gradient(90deg, #e9edf1 25%, #f6f8fa 50%, #e9edf1 75%) 0 0 / 200% 100%;
	animation: shimmer 1.8s linear infinite;
}

.sk--title {
	width: 72%;
	height: 26px;
	background: var(--ink);
	animation: none;
}

.sk--short {
	width: 55%;
}

@keyframes shimmer {
	to {
		background-position: -200% 0;
	}
}

.browser__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.6rem;
	margin: 0.4rem 0;
}

.browser__cards span {
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	background: var(--cream-2);
}

.browser__cards span:first-child {
	background: #fdf0c8;
}

.browser__cta {
	justify-self: start;
	padding: 0.6rem 1.15rem;
	border-radius: 999px;
	background: var(--amber);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 0.85rem;
	font-weight: 600;
	animation: cta-pulse 2.2s ease-out infinite;
}

@keyframes cta-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(246, 180, 25, 0.55);
	}

	100% {
		box-shadow: 0 0 0 16px rgba(246, 180, 25, 0);
	}
}

.reel {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 28px;
	background:
		radial-gradient(50% 60% at 70% 30%, rgba(246, 180, 25, 0.22), transparent 70%),
		linear-gradient(135deg, var(--ink-3), var(--ink));
	box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.8);
}

.reel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 4px);
}

.reel__play {
	position: relative;
	display: grid;
	place-items: center;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink);
}

.reel__play::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--amber);
	z-index: -1;
	animation: pulse-ring 2s ease-out infinite;
}

.reel__play .icon {
	width: 34px;
	height: 34px;
	margin-left: 5px;
}

.reel__label {
	position: absolute;
	bottom: 1.2rem;
	left: 1.4rem;
	color: var(--on-dark-muted);
	font-size: 0.9rem;
}

.reel__rec {
	position: absolute;
	top: 1.2rem;
	left: 1.4rem;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--white);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
}

.reel__rec i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #f0473f;
	animation: blink 1.2s steps(2) infinite;
}

@keyframes blink {
	50% {
		opacity: 0.2;
	}
}

/* Feature cards */
.features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.features--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature {
	position: relative;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.feature:hover {
	border-color: var(--ink);
	box-shadow: var(--shadow);
}

.feature__icon {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	margin-bottom: 1.4rem;
	border-radius: 15px;
	background: var(--ink);
	color: var(--amber);
	transition: transform 0.6s var(--ease);
}

.feature__icon .icon {
	width: 23px;
	height: 23px;
}

.feature:hover .feature__icon {
	transform: rotate(-8deg) scale(1.08);
}

.feature__icon--warn {
	background: #fdece6;
	color: #c2410c;
}

.sheet .feature__title {
	margin: 0 0 0.45rem;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.feature p {
	margin: 0;
	color: var(--muted);
}

/* Process: numbered steps joined by a line that draws in */
.process {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
}

.process--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.process--5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.process::before,
.process::after {
	content: "";
	position: absolute;
	top: 26px;
	right: 0;
	left: 0;
	height: 2px;
	background: var(--line);
}

.process::after {
	background: linear-gradient(90deg, var(--navy), var(--amber));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1.8s var(--ease-in-out) 0.3s;
}

.process.is-in::after,
html:not(.js) .process::after {
	transform: none;
}

.process__step {
	position: relative;
	z-index: 1;
}

.process__num {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-bottom: 1.25rem;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 700;
	transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}

.process.is-in .process__num {
	background: var(--ink);
	color: var(--amber);
}

.process.is-in .process__step:nth-child(2) .process__num { transition-delay: 0.5s; }
.process.is-in .process__step:nth-child(3) .process__num { transition-delay: 0.9s; }
.process.is-in .process__step:nth-child(4) .process__num { transition-delay: 1.3s; }
.process.is-in .process__step:nth-child(5) .process__num { transition-delay: 1.7s; }

.sheet .process__step h3 {
	margin: 0 0 0.4rem;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.process__step p {
	margin: 0;
	color: var(--muted);
}

@media (max-width: 1000px) {
	.process,
	.process--3,
	.process--5 {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.process::before,
	.process::after {
		top: 0;
		bottom: 0;
		left: 26px;
		width: 2px;
		height: auto;
	}

	.process::after {
		background: linear-gradient(var(--navy), var(--amber));
		transform: scaleY(0);
		transform-origin: top;
	}

	.process__step {
		min-height: 54px;
		padding-left: 80px;
	}

	.process__num {
		position: absolute;
		top: 0;
		left: 0;
	}
}

/* Pilot and facts */
.pilot {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
	padding: clamp(2rem, 5vw, 4.5rem);
	border-radius: var(--r);
	background:
		radial-gradient(60% 90% at 0% 0%, rgba(47, 122, 165, 0.5), transparent 62%),
		radial-gradient(50% 80% at 100% 100%, rgba(246, 180, 25, 0.17), transparent 62%),
		var(--ink);
}

.pilot__content p {
	margin: 0 0 2rem;
	font-size: 1.08rem;
}

.facts {
	margin: 0;
	border-top: 1px solid var(--line-dark);
}

.facts div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--line-dark);
}

.facts dt {
	color: var(--on-dark-muted);
}

.facts dd {
	margin: 0;
	color: var(--white);
	font-family: var(--font-display);
	font-weight: 600;
	text-align: right;
}

/* Chips */
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.chips li {
	padding: 0.75rem 1.3rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--white);
	color: var(--ink);
	font-weight: 500;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.chips li:hover {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--white);
}

.chips--inline {
	justify-content: center;
	gap: 0.5rem;
}

.chips--inline li {
	padding: 0.45rem 1rem;
	font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 1100px) {
	.features--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 960px) {
	.think {
		position: relative;
		bottom: auto;
		left: auto;
		width: auto;
		margin-top: 1.25rem;
		animation: none;
	}

	.hero--home .hero__media {
		margin-bottom: 0;
	}

	.offers,
	.cases,
	.features,
	.gaps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.founder__grid,
	.pilot {
		grid-template-columns: 1fr;
	}

	.founder__media {
		position: static;
		max-width: 360px;
	}
}

@media (max-width: 760px) {
	.js .approach--4 {
		height: auto;
	}

	.approach__desc {
		max-height: none;
		margin: 0.2rem 0 0.8rem;
		opacity: 1;
	}

	.approach__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.gaps {
		grid-template-columns: 1fr;
	}

	.sheet .offer {
		min-height: 0;
	}

	.problem__title {
		font-size: 2rem;
	}
}


/* Homepage: campaign showcase
   ========================================================================== */

/* Hero: headline + photo mosaic of the four services */
.hero--showcase {
	padding-bottom: calc(clamp(3rem, 5vw, 4.5rem) + var(--r));
}

.hero--showcase .hero__grid {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
}

.hero--showcase .hero__title {
	font-size: clamp(2.5rem, 4.8vw, 4.5rem);
}

.mosaic {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.mosaic__tile {
	position: relative;
}

.mosaic__tile--2,
.mosaic__tile--4 {
	transform: translate3d(0, 42px, 0);
}

.js .mosaic__tile--2.reveal.is-in,
.js .mosaic__tile--4.reveal.is-in {
	transform: translate3d(0, 42px, 0);
}

.mosaic__tile a {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: 26px;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.85);
}

.mosaic__tile--1 a,
.mosaic__tile--4 a {
	aspect-ratio: 4 / 4.4;
}

.mosaic__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--ease);
}

.mosaic__tile a::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(6, 20, 29, 0.85) 0%, transparent 55%);
}

.mosaic__tile a:hover img {
	transform: scale(1.07);
}

.mosaic__label {
	position: absolute;
	right: 14px;
	bottom: 14px;
	left: 14px;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--white);
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.mosaic__label b {
	display: grid;
	place-items: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink);
	font-size: 0.72rem;
}

.hero__principles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem 2rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--line-dark);
}

.hero__principles li {
	display: flex;
	gap: 0.85rem;
	color: var(--on-dark);
	font-size: 0.98rem;
}

.hero__principles span {
	flex: none;
	color: var(--amber);
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.9;
}

/* Why + services intro */
.why {
	padding-bottom: 0;
}

.why__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	align-items: end;
	gap: clamp(2rem, 6vw, 6rem);
}

.why__title {
	margin: 0;
	font-size: clamp(2rem, 4.2vw, 3.6rem);
}

.why__list {
	display: grid;
	margin-bottom: 1.75rem;
	border-top: 1px solid var(--line);
}

.why__list li {
	position: relative;
	padding: 1rem 0 1rem 2rem;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	font-weight: 500;
}

.why__list li::before {
	content: "";
	position: absolute;
	top: 1.55rem;
	left: 0.2rem;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #f0673f;
	box-shadow: 0 0 0 4px rgba(240, 103, 63, 0.16);
}

.why__answer {
	margin: 0;
	color: var(--muted);
	font-size: 1.08rem;
}

.services-intro {
	padding-block: clamp(5rem, 9vw, 7.5rem) calc(clamp(3rem, 6vw, 4.5rem) + var(--r));
	text-align: center;
}

.services-intro .eyebrow {
	justify-content: center;
}

.services-intro__title {
	margin: 0;
	font-size: clamp(2.6rem, 7vw, 6rem);
	line-height: 1;
	letter-spacing: -0.05em;
}

/* One full-width section per service, each sliding over the last */
.showcase {
	--sc-bg: var(--ink);
	--sc-fg: var(--on-dark);
	--sc-title: var(--white);
	--sc-accent: var(--amber);
	--sc-line: var(--line-dark);
	--sc-check-bg: var(--amber);
	--sc-check-fg: var(--ink);
	--sc-cta-bg: var(--amber);
	--sc-cta-fg: var(--ink);
	--sc-cta-hover: var(--white);

	position: relative;
	z-index: 2;
	margin-top: calc(var(--r) * -1);
	padding-block: calc(var(--section) * 0.9) calc(var(--section) * 0.9 + var(--r));
	overflow: clip;
	border-radius: var(--r) var(--r) 0 0;
	background: var(--sc-bg);
	color: var(--sc-fg);
	scroll-margin-top: var(--header-offset);
}

.showcase--navy {
	--sc-bg:
		radial-gradient(50% 60% at 100% 0%, rgba(246, 180, 25, 0.16), transparent 70%),
		radial-gradient(60% 70% at 0% 100%, rgba(47, 122, 165, 0.55), transparent 70%),
		var(--navy);
}

.showcase--amber {
	--sc-bg: var(--amber);
	--sc-fg: rgba(6, 20, 29, 0.82);
	--sc-title: var(--ink);
	--sc-accent: var(--ink);
	--sc-line: rgba(6, 20, 29, 0.18);
	--sc-check-bg: var(--ink);
	--sc-check-fg: var(--amber);
	--sc-cta-bg: var(--ink);
	--sc-cta-fg: var(--white);
	--sc-cta-hover: var(--white);
}

.showcase--cream {
	--sc-bg: var(--cream);
	--sc-fg: var(--text);
	--sc-title: var(--ink);
	--sc-accent: var(--navy);
	--sc-line: var(--line);
	--sc-check-bg: var(--navy);
	--sc-check-fg: var(--white);
	--sc-cta-bg: var(--ink);
	--sc-cta-fg: var(--white);
	--sc-cta-hover: var(--amber);
}

.showcase--amber .showcase__cta,
.showcase--cream .showcase__cta {
	--btn-hover-fg: var(--ink);
}

.showcase--cinema {
	--sc-bg:
		radial-gradient(50% 60% at 0% 0%, rgba(246, 180, 25, 0.12), transparent 70%),
		#03090d;
}

.showcase__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: clamp(2.5rem, 6vw, 6rem);
}

.showcase--flip .showcase__media {
	order: 2;
}

.showcase__media {
	position: relative;
}

.showcase__photo {
	overflow: hidden;
	aspect-ratio: 4 / 4.6;
	border-radius: 32px;
	box-shadow: 0 50px 90px -45px rgba(0, 0, 0, 0.75);
}

.showcase__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.12) translate3d(0, var(--py, 0px), 0);
	will-change: transform;
}

.showcase__badge {
	position: absolute;
	bottom: 2rem;
	left: -1.75rem;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1rem 1.3rem;
	border-radius: 20px;
	background: var(--white);
	box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.6);
	color: var(--muted);
	font-size: 0.82rem;
	line-height: 1.3;
}

.showcase--flip .showcase__badge {
	right: -1.75rem;
	left: auto;
}

.showcase__badge strong {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -0.04em;
}

.showcase__kicker {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0 0 1.25rem;
	color: var(--sc-accent);
	font-family: var(--font-display);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.showcase__kicker {
	flex-wrap: wrap;
}

.showcase__flag {
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: var(--amber);
	color: var(--ink);
	font-size: 0.7rem;
	font-style: normal;
	letter-spacing: 0.1em;
}

.showcase__num {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	font-size: 0.85rem;
}

.showcase__title {
	margin: 0 0 1.25rem;
	color: var(--sc-title);
	font-size: clamp(2.2rem, 4.4vw, 4rem);
	line-height: 1.02;
	letter-spacing: -0.045em;
}

.showcase__audience {
	margin: 0 0 0.75rem;
	color: var(--sc-accent);
	font-weight: 600;
}

.showcase__text {
	max-width: 56ch;
	margin: 0 0 1.75rem;
	font-size: 1.06rem;
}

.showcase__points {
	display: grid;
	gap: 0.8rem;
	margin-bottom: 2.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sc-line);
}

.showcase__points li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	color: var(--sc-title);
	font-weight: 500;
	line-height: 1.45;
}

.showcase__points .icon {
	width: 1.35rem;
	height: 1.35rem;
	margin-top: 0.05em;
	padding: 0.22rem;
	border-radius: 50%;
	background: var(--sc-check-bg);
	color: var(--sc-check-fg);
	stroke-width: 3.2;
}

.showcase__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
}

.btn.showcase__cta {
	--btn-bg: var(--sc-cta-bg);
	--btn-fg: var(--sc-cta-fg);
	--btn-hover: var(--sc-cta-hover);
	--btn-hover-fg: var(--ink);
}

.showcase__link {
	color: var(--sc-title);
}

.showcase__link:hover {
	color: var(--sc-title);
	opacity: 0.8;
}

/* Chooser */
.choose {
	padding-top: calc(var(--section) * 0.8);
}

.choose__box {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
	padding: clamp(2rem, 5vw, 4.5rem);
	border-radius: var(--r);
	background:
		radial-gradient(60% 90% at 0% 0%, rgba(47, 122, 165, 0.5), transparent 62%),
		radial-gradient(50% 80% at 100% 100%, rgba(246, 180, 25, 0.17), transparent 62%),
		var(--ink);
}

.choose__intro p:last-child {
	margin: 0;
}

.sheet .choose__intro a {
	color: var(--amber);
}

.choose__list {
	display: grid;
	gap: 0.6rem;
}

.sheet .choose__list a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.2rem 1.1rem 1.4rem;
	border: 1px solid var(--line-dark);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--white);
	text-decoration: none;
	transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.5s var(--ease);
}

.sheet .choose__list a:hover {
	border-color: var(--amber);
	background: rgba(246, 180, 25, 0.1);
	color: var(--white);
	transform: translate3d(6px, 0, 0);
}

.choose__q {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -0.015em;
}

.choose__a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--amber);
	font-size: 0.88rem;
	font-weight: 600;
	white-space: nowrap;
}

.choose__a .icon {
	width: 18px;
	height: 18px;
}

.choose__arrow {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink);
	transition: transform 0.5s var(--ease);
}

.choose__list a:hover .choose__arrow {
	transform: rotate(-45deg);
}

/* How we work: photo + four steps */
.how__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
}

.how__photo {
	overflow: hidden;
	aspect-ratio: 16 / 11;
	border-radius: 28px;
	box-shadow: var(--shadow);
}

.how__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.1) translate3d(0, var(--py, 0px), 0);
}

.how__steps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.how__step {
	position: relative;
	padding: 1.6rem;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
}

.how__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

.how__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 15px;
	background: var(--ink);
	color: var(--amber);
	transition: transform 0.6s var(--ease);
}

.how__step:hover .how__icon {
	transform: rotate(-8deg) scale(1.08);
}

.how__num {
	color: rgba(20, 63, 88, 0.16);
	font-family: var(--font-display);
	font-size: 2.1rem;
	font-weight: 700;
	letter-spacing: -0.05em;
}

.sheet .how__step h3 {
	margin: 0 0 0.4rem;
	font-size: 1.3rem;
}

.how__step p {
	margin: 0;
	color: var(--muted);
}

/* Founder link + proof */
.founder__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 2.25rem;
	padding: 0.7rem 1.2rem;
	border: 1px solid var(--line-dark);
	border-radius: 999px;
	color: var(--white);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.founder__link:hover {
	background: var(--white);
	color: #0a66c2;
}

.testimonials--proof {
	margin-top: 1.5rem;
}

@media (max-width: 1100px) {
	.hero--showcase .hero__grid,
	.why__grid,
	.choose__box,
	.how__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mosaic {
		max-width: 640px;
	}

	.hero__principles {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	.showcase__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.showcase--flip .showcase__media {
		order: 0;
	}

	.showcase__photo {
		aspect-ratio: 4 / 3;
	}

	.showcase__badge,
	.showcase--flip .showcase__badge {
		right: auto;
		bottom: 1rem;
		left: 1rem;
	}
}

@media (max-width: 760px) {
	.mosaic {
		gap: 10px;
	}

	.mosaic__tile--2,
	.mosaic__tile--4,
	.js .mosaic__tile--2.reveal.is-in,
	.js .mosaic__tile--4.reveal.is-in {
		transform: translate3d(0, 24px, 0);
	}

	.mosaic__tile a,
	.mosaic__tile--1 a,
	.mosaic__tile--4 a {
		aspect-ratio: 1;
		border-radius: 20px;
	}

	.mosaic__label {
		right: 10px;
		bottom: 10px;
		left: 10px;
		font-size: 0.8rem;
	}

	.mosaic__label b {
		width: 24px;
		height: 24px;
		font-size: 0.62rem;
	}

	.hero__principles {
		margin-top: 3.5rem;
	}

	.services-intro {
		text-align: left;
	}

	.services-intro .eyebrow {
		justify-content: flex-start;
	}

	.services-intro__title {
		font-size: 2.6rem;
	}

	.showcase {
		padding-block: 3rem calc(3rem + var(--r));
	}

	.showcase__photo {
		border-radius: 22px;
	}

	.showcase__title {
		font-size: 2.1rem;
	}

	.showcase__actions .btn {
		width: 100%;
	}

	.sheet .choose__list a {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.choose__a {
		grid-column: 1;
		grid-row: 2;
	}

	.choose__arrow {
		grid-row: 1 / span 2;
	}

	.how__steps {
		display: flex;
	}
}

/* Homepage "Our services": the four service cards, each led by a photo */
.our-services__intro {
	max-width: 46ch;
	margin: 0;
	color: var(--muted);
}

.offers .offer {
	min-height: 0;
	padding-top: 0;
}

.offer__photo {
	display: block;
	margin: 0 calc(clamp(1.75rem, 3vw, 2.5rem) * -1) 0;
	overflow: hidden;
	aspect-ratio: 16 / 8;
}

.offer__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--ease);
}

.offer:hover .offer__photo img {
	transform: scale(1.06);
}

.offers .offer__top {
	margin: -29px 0 0;
	padding-bottom: 1.25rem;
}

.offers .offer__icon {
	position: relative;
	z-index: 1;
	box-shadow: 0 0 0 6px var(--white);
}

.offers .offer--flagship .offer__icon {
	box-shadow: 0 0 0 6px var(--ink);
}

.offers .offer__num {
	align-self: flex-end;
	font-size: 2.4rem;
}

@media (max-width: 760px) {
	.offer__photo {
		margin-inline: -1.75rem;
		aspect-ratio: 16 / 10;
	}
}


/* Homepage v2: one consistent system for every section
   ========================================================================== */

/* Numbered section label on a hairline */
.shead {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.shead__num {
	color: var(--amber-700);
	letter-spacing: 0.04em;
}

.shead--light {
	border-bottom-color: var(--line-dark);
	color: var(--on-dark-muted);
}

.shead--light .shead__num {
	color: var(--amber);
}

.hv-head {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	align-items: end;
	gap: 1.5rem 4rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.hv-head .section__title {
	margin: 0;
}

.hv-head p {
	margin: 0;
	color: var(--muted);
}

.hv-head .link-arrow {
	margin-left: 0.4rem;
}

/* Hero stats strip */
.hero-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: clamp(3.5rem, 6vw, 5rem) 0 0;
	border-top: 1px solid var(--line-dark);
}

.hero-stats div {
	padding: 1.6rem 1.5rem 0 0;
}

.hero-stats div + div {
	padding-left: 1.5rem;
	border-left: 1px solid var(--line-dark);
}

.hero-stats dt {
	color: var(--white);
	font-family: var(--font-display);
	font-size: clamp(2rem, 3.6vw, 3.2rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.05em;
}

.hero-stats dd {
	margin: 0.5rem 0 0;
	color: var(--on-dark-muted);
	font-size: 0.9rem;
}

.hero--home {
	min-height: 0;
	padding-bottom: calc(clamp(3rem, 5vw, 4rem) + var(--r));
}

.hero--home .hero__media {
	margin-bottom: 40px;
}

.clients .clients__label {
	margin-bottom: 1.25rem;
}

/* 01 Welcome — centred intro over three equal cards */
.wl-head {
	max-width: 860px;
	margin: 0 auto clamp(2.5rem, 5vw, 3.75rem);
	text-align: center;
}

.wl-head__title {
	margin: 0 0 1.25rem;
	font-size: clamp(2.5rem, 5.6vw, 5rem);
	line-height: 1;
	letter-spacing: -0.05em;
}

.wl-head__lead {
	margin: 0 auto;
	max-width: 46ch;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 1.8vw, 1.4rem);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.02em;
}

.wl-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	align-items: stretch;
}

.wl-card {
	position: relative;
	overflow: hidden;
	min-height: 440px;
	border: 1px solid var(--line);
	border-radius: 30px;
	background: var(--white);
	transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.js .wl-card.reveal.is-done:hover,
html:not(.js) .wl-card:hover {
	transform: translate3d(0, -6px, 0);
	box-shadow: var(--shadow);
}

.wl-card--img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--ease);
}

.wl-card--img:hover img {
	transform: scale(1.05);
}

.wl-card--360 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 2rem;
	border-color: transparent;
	background:
		radial-gradient(70% 55% at 100% 0%, rgba(246, 180, 25, 0.22), transparent 70%),
		radial-gradient(70% 60% at 0% 100%, rgba(47, 122, 165, 0.5), transparent 70%),
		var(--ink);
}

.wl-card__big {
	color: var(--amber);
	font-family: var(--font-display);
	font-size: clamp(4rem, 7vw, 6.5rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.06em;
}

.wl-card__big sup {
	font-size: 0.5em;
	vertical-align: 0.55em;
}

.hv-welcome .wl-card--360 .statement {
	margin: 0;
	color: var(--white);
	font-size: clamp(1.2rem, 1.7vw, 1.45rem);
	line-height: 1.4;
}

.wl-card--text {
	display: grid;
	align-content: space-between;
	gap: 1.5rem;
	padding: 2rem;
}

.wl-point + .wl-point {
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}

.wl-point__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 1rem;
	border-radius: 14px;
	background: var(--ink);
	color: var(--amber);
}

.wl-point__icon .icon {
	width: 22px;
	height: 22px;
}

.sheet .wl-point h3 {
	margin: 0 0 0.4rem;
	font-size: 1.2rem;
	font-weight: 600;
}

.wl-point p {
	margin: 0;
	color: var(--muted);
	font-size: 0.97rem;
}

@media (max-width: 1000px) {
	.wl-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wl-card--text {
		grid-column: 1 / -1;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		min-height: 0;
	}

	.wl-point + .wl-point {
		padding-top: 0;
		border-top: 0;
	}
}

@media (max-width: 640px) {
	.wl-cards,
	.wl-card--text {
		grid-template-columns: minmax(0, 1fr);
	}

	.wl-card {
		min-height: 0;
	}

	.wl-card--img {
		aspect-ratio: 4 / 3;
	}

	.wl-card--360 {
		gap: 2rem;
	}

	.wl-point + .wl-point {
		padding-top: 1.5rem;
		border-top: 1px solid var(--line);
	}
}

/* 02 Why — dark statement band */
.hv-why__title {
	max-width: 20ch;
	margin-bottom: clamp(2rem, 4vw, 3rem);
	font-size: clamp(2.2rem, 4.8vw, 4.4rem);
	line-height: 1.04;
}

.hv-why__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.hv-why__cards li {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 3rem;
	min-height: 220px;
	padding: 1.75rem;
	border: 1px solid var(--line-dark);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.04);
	transition: border-color 0.4s ease, background-color 0.4s ease;
}

.hv-why__cards li:hover {
	border-color: rgba(246, 180, 25, 0.5);
	background: rgba(255, 255, 255, 0.07);
}

.hv-why__cards span {
	color: #f0673f;
	font-family: var(--font-display);
	font-weight: 700;
}

.hv-why__cards p {
	margin: 0;
	color: var(--white);
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.015em;
}

.hv-why__answer {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 62ch;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	color: var(--white);
	font-size: 1.15rem;
}

.hv-why__answer .icon {
	flex: none;
	width: 44px;
	height: 44px;
	padding: 11px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink);
}

/* 03 What we do — auto-rotating service tabs with one large panel */
.svc-tabs__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.svc-tabs__tab {
	display: grid;
	gap: 0.35rem;
	padding: 0 0 0.25rem;
	border: 0;
	background: none;
	color: var(--muted);
	text-align: left;
	cursor: pointer;
	transition: color 0.4s ease;
}

.svc-tabs__track {
	position: relative;
	display: block;
	height: 3px;
	margin-bottom: 1rem;
	overflow: hidden;
	border-radius: 3px;
	background: var(--line);
}

.svc-tabs__track i {
	position: absolute;
	inset: 0;
	background: var(--amber);
	transform: scaleX(0);
	transform-origin: left;
}

.svc-tabs__tab[aria-selected="true"] .svc-tabs__track i {
	transform: scaleX(1);
}

.svc-tabs.is-playing .svc-tabs__tab[aria-selected="true"] .svc-tabs__track i {
	animation: svc-progress var(--svc-time, 6s) linear both;
}

.svc-tabs.is-paused .svc-tabs__tab[aria-selected="true"] .svc-tabs__track i {
	animation-play-state: paused;
}

@keyframes svc-progress {
	from {
		transform: scaleX(0);
	}
}

.svc-tabs__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.35rem;
}

.svc-tabs__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--navy);
	transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.6s var(--ease);
}

.svc-tabs__icon .icon {
	width: 19px;
	height: 19px;
}

.svc-tabs__num {
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 600;
}

.svc-tabs__name {
	color: inherit;
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 1.7vw, 1.45rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.03em;
}

.svc-tabs__sub {
	font-size: 0.85rem;
}

.svc-tabs__tab:hover,
.svc-tabs__tab[aria-selected="true"] {
	color: var(--ink);
}

.svc-tabs__tab[aria-selected="true"] .svc-tabs__icon {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--amber);
	transform: rotate(-8deg);
}

.svc-tabs__tab[aria-selected="true"] .svc-tabs__sub {
	color: var(--amber-700);
}

.svc-panel {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	overflow: hidden;
	border-radius: 32px;
	background: var(--ink);
	color: var(--on-dark);
	box-shadow: 0 50px 90px -50px rgba(6, 20, 29, 0.6);
}

.svc-panel.is-active {
	animation: svc-in 0.7s var(--ease) both;
}

@keyframes svc-in {
	from {
		opacity: 0;
		transform: translate3d(0, 12px, 0);
	}
}

.svc-panel__media {
	position: relative;
	order: 2;
	min-height: 540px;
	overflow: hidden;
}

.svc-panel__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--ink) 0%, rgba(6, 20, 29, 0) 35%);
}

.svc-panel__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.svc-panel.is-active .svc-panel__media img {
	animation: svc-zoom 6.5s ease-out both;
}

@keyframes svc-zoom {
	from {
		transform: scale(1.12);
	}
}

.svc-panel__flag {
	position: absolute;
	top: 1.4rem;
	right: 1.4rem;
	z-index: 1;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background: var(--amber);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.svc-panel__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2rem, 4.5vw, 4rem);
	background:
		radial-gradient(70% 60% at 0% 100%, rgba(47, 122, 165, 0.45), transparent 70%),
		var(--ink);
}

.svc-panel.is-active .svc-panel__body > * {
	animation: svc-in 0.8s var(--ease) both;
}

.svc-panel.is-active .svc-panel__body > :nth-child(2) { animation-delay: 0.08s; }
.svc-panel.is-active .svc-panel__body > :nth-child(3) { animation-delay: 0.16s; }
.svc-panel.is-active .svc-panel__body > :nth-child(4) { animation-delay: 0.24s; }
.svc-panel.is-active .svc-panel__body > :nth-child(5) { animation-delay: 0.32s; }

.svc-panel__kicker {
	display: inline-flex;
	align-self: flex-start;
	margin: 0 0 1.25rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--line-dark);
	border-radius: 999px;
	color: var(--amber);
	font-family: var(--font-display);
	font-size: 0.78rem;
	font-weight: 600;
}

.sheet .svc-panel__title {
	margin: 0 0 1rem;
	color: var(--white);
	font-size: clamp(1.9rem, 3.2vw, 2.9rem);
	line-height: 1.05;
	letter-spacing: -0.04em;
}

.svc-panel__text {
	margin: 0 0 1.5rem;
}

.svc-panel__points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.8rem 1.25rem;
	margin-bottom: 2rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--line-dark);
}

.svc-panel__points li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: var(--white);
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.45;
}

.svc-panel__points .icon {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.05em;
	padding: 0.2rem;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink);
	stroke-width: 3.2;
}

.svc-panel__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}

.sheet .svc-panel .link-arrow {
	color: var(--white);
}

@media (max-width: 960px) {
	.svc-tabs__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 1.25rem;
	}

	.svc-panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.svc-panel__media {
		order: 0;
		min-height: 280px;
	}

	.svc-panel__media::after {
		background: linear-gradient(0deg, var(--ink) 0%, rgba(6, 20, 29, 0) 45%);
	}
}

@media (max-width: 560px) {
	.svc-tabs__sub {
		display: none;
	}

	.svc-tabs__icon {
		width: 36px;
		height: 36px;
	}

	.svc-panel__media {
		min-height: 220px;
	}

	.svc-panel__points {
		grid-template-columns: minmax(0, 1fr);
	}

	.svc-panel__actions .btn {
		width: 100%;
	}
}

/* 04 How we work sits on the paper tone */
.hv-how {
	background: var(--cream-2);
}

.hv-how .shead {
	margin-bottom: 1rem;
}

/* 05 Promise */
.hv-promise__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}

.hv-promise__intro .section__title {
	margin-bottom: 0.4rem;
}

.hv-promise__intro > p {
	color: var(--muted);
}

.hv-promise__img {
	width: min(260px, 70%);
	margin-top: 2rem;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #fdf0c8;
}

.hv-promise__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hv-promise__list li:not(.hv-promise__cta) {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	align-items: baseline;
	padding: 1.6rem 0;
	border-bottom: 1px solid var(--line);
}

.hv-promise__list li:first-child {
	border-top: 1px solid var(--line);
}

.hv-promise__list span {
	color: var(--amber-700);
	font-family: var(--font-display);
	font-weight: 700;
}

.hv-promise__list p {
	margin: 0;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.02em;
}

.hv-promise__cta {
	padding-top: 2rem;
}

/* 06 Contact keeps the existing band; title spacing only */
.hv-contact .grow__content .section__title {
	margin-bottom: 0.5em;
}

/* 07 FAQ */
.hv-faq__help {
	margin: 0;
	color: var(--muted);
}

.sheet .hv-faq__help a {
	font-weight: 600;
}

/* 08 Testimonials — one large quote, pick a person */
.hv-quotes {
	padding-block: calc(var(--section) * 0.9 + var(--r));
}

.hv-quotes__stage {
	display: grid;
	gap: 2.5rem;
}

.hv-quote {
	margin: 0;
}

.hv-quote.is-active {
	animation: deck-fade 0.7s var(--ease) both;
}

@keyframes deck-fade {
	from {
		opacity: 0;
		transform: translate3d(0, 16px, 0);
	}
}

.hv-quote blockquote {
	max-width: 40ch;
	margin: 1rem 0 0;
	color: var(--white);
	font-family: var(--font-serif);
	font-size: clamp(1.7rem, 3.2vw, 3rem);
	line-height: 1.15;
}

.hv-quotes__people {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.hv-person {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 1.2rem 0.5rem 0.5rem;
	border: 1px solid var(--line-dark);
	border-radius: 999px;
	background: transparent;
	color: var(--on-dark-muted);
	font-size: 0.82rem;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.hv-person img {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter 0.3s ease;
}

.hv-person strong {
	display: block;
	color: var(--white);
	font-family: var(--font-display);
	font-size: 0.95rem;
}

.hv-person[aria-selected="true"] {
	border-color: var(--amber);
	background: rgba(246, 180, 25, 0.1);
}

.hv-person[aria-selected="true"] img,
.hv-person:hover img {
	filter: none;
}

@media (max-width: 960px) {
	.hv-head,
	.hv-promise__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hero-stats div:nth-child(3) {
		padding-left: 0;
		border-left: 0;
	}

}

@media (max-width: 760px) {
	.hv-why__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.hv-why__cards li {
		min-height: 0;
		gap: 1.25rem;
	}

	.hero-stats div {
		padding-top: 1.2rem;
	}
}

/* App-style experience on phones and tablets
   ========================================================================== */

:root {
	--tabbar-h: 64px;
	/* Room below the tab labels: the phone's safe area, but never less than 12px (in-app browsers and some phones report 0 even with rounded corners or a gesture bar). */
	--tabbar-safe: max(12px, env(safe-area-inset-bottom, 0px));
}

.tabbar,
.dots {
	display: none;
}

/* Smooth page-to-page transitions (supported browsers), with the bars held still. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	.site-header {
		view-transition-name: site-header;
	}

	.tabbar {
		view-transition-name: tabbar;
	}
}

@media (max-width: 1140px) {
	a,
	button {
		-webkit-tap-highlight-color: transparent;
	}

	body {
		padding-bottom: calc(var(--tabbar-h) + var(--tabbar-safe));
	}

	/* Bottom tab bar */
	.tabbar {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 140;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		height: calc(var(--tabbar-h) + var(--tabbar-safe));
		padding: 6px max(8px, env(safe-area-inset-left, 0px)) var(--tabbar-safe) max(8px, env(safe-area-inset-right, 0px));
		border-top: 1px solid var(--line-dark);
		background: rgba(6, 20, 29, 0.94);
		-webkit-backdrop-filter: blur(20px) saturate(160%);
		backdrop-filter: blur(20px) saturate(160%);
	}

	.tabbar__item {
		display: grid;
		align-content: center;
		justify-items: center;
		gap: 3px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--on-dark-muted);
		font-family: var(--font-display);
		font-size: 0.68rem;
		font-weight: 600;
		letter-spacing: 0;
		text-decoration: none;
		cursor: pointer;
		transition: color 0.3s ease, transform 0.2s ease;
	}

	.tabbar__item:active {
		transform: scale(0.9);
	}

	.tabbar__icon {
		display: grid;
		place-items: center;
		width: 54px;
		height: 30px;
		border-radius: 999px;
		transition: background-color 0.4s var(--ease), color 0.3s ease;
	}

	.tabbar__icon .icon {
		width: 22px;
		height: 22px;
	}

	.tabbar__item.is-active,
	.tabbar__item[aria-expanded="true"] {
		color: var(--white);
	}

	.tabbar__item.is-active .tabbar__icon,
	.tabbar__item[aria-expanded="true"] .tabbar__icon {
		background: var(--amber);
		color: var(--ink);
	}

	/* While the menu sheet is open, only the Menu tab is lit. */
	.menu-open .tabbar__item.is-active {
		color: var(--on-dark-muted);
	}

	.menu-open .tabbar__item.is-active .tabbar__icon {
		background: none;
		color: inherit;
	}

	.whatsapp-fab {
		right: 14px;
		bottom: calc(var(--tabbar-h) + var(--tabbar-safe) + 14px);
		width: 50px;
		height: 50px;
	}

	.whatsapp-fab .icon {
		width: 26px;
		height: 26px;
	}

	.menu-open .whatsapp-fab {
		opacity: 0;
		pointer-events: none;
	}

	.site-footer__bottom {
		padding-right: var(--gutter);
	}
}

@media (hover: none) {
	.btn:active {
		transform: scale(0.96);
	}

	.post-card:active,
	.plan:active,
	.vmm-card:active,
	.info-card:active,
	.faq__question:active {
		opacity: 0.85;
	}
}

@media (max-width: 760px) {
	:root {
		--section: 3rem;
		--header-offset: 72px;
	}

	.site-header__bar {
		padding-block: 0.8rem;
	}

	/* Solid app bar: nothing shows through while scrolling. */
	.site-header::before {
		background: rgba(6, 20, 29, 0.98);
	}

	/* Left-aligned section headers, like app screens. */
	.section__title {
		font-size: 1.85rem;
	}

	.section__title--center {
		max-width: none;
		margin: 0 0 1.25rem;
		text-align: left;
	}

	.section__intro {
		margin: 0 0 1.5rem;
		text-align: left;
	}

	.hero {
		padding-top: calc(var(--header-offset) + 1.5rem);
	}

	.hero__title {
		font-size: 2.3rem;
	}

	.hero__actions .btn {
		flex: 1 1 100%;
		padding-inline: 1rem;
	}

	.cta-band .btn {
		width: 100%;
	}

	/* Swipeable card rows */
	.vmm__points,
	.stack,
	.pricing,
	.testimonials,
	.post-grid:not(.post-grid--list),
	.team,
	.cards-3,
	.offers,
	.cases,
	.features,
	.how__steps {
		display: flex;
		gap: 12px;
		max-width: none;
		margin-inline: calc(var(--gutter) * -1);
		padding: 6px var(--gutter) 22px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-padding-inline: var(--gutter);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.vmm__points::-webkit-scrollbar,
	.stack::-webkit-scrollbar,
	.pricing::-webkit-scrollbar,
	.testimonials::-webkit-scrollbar,
	.post-grid::-webkit-scrollbar,
	.team::-webkit-scrollbar,
	.cards-3::-webkit-scrollbar,
	.offers::-webkit-scrollbar,
	.cases::-webkit-scrollbar,
	.features::-webkit-scrollbar,
	.how__steps::-webkit-scrollbar {
		display: none;
	}

	.vmm__points > *,
	.stack > *,
	.pricing > *,
	.testimonials > *,
	.post-grid:not(.post-grid--list) > *,
	.team > *,
	.cards-3 > *,
	.offers > *,
	.cases > *,
	.features > *,
	.how__steps > * {
		flex: 0 0 84%;
		scroll-snap-align: start;
	}

	.pricing {
		padding-top: 20px;
	}

	.vmm__points {
		margin-top: 3.25rem;
	}

	.dots {
		display: flex;
		justify-content: center;
		gap: 6px;
		color: var(--ink);
	}

	.band .dots {
		color: var(--white);
	}

	.dots i {
		width: 6px;
		height: 6px;
		border-radius: 99px;
		background: currentColor;
		opacity: 0.22;
		transition: width 0.35s var(--ease), opacity 0.35s ease, background-color 0.35s ease;
	}

	.dots i.on {
		width: 22px;
		background: var(--amber);
		opacity: 1;
	}

	.testimonial,
	.plan,
	.post-card,
	.card {
		border-radius: 24px;
	}

	.testimonial {
		padding: 1.5rem;
	}

	.faq__question {
		grid-template-columns: minmax(0, 1fr) auto;
		padding: 1.15rem 0;
	}

	.faq__question::before {
		display: none;
	}

	.faq__icon {
		width: 36px;
		height: 36px;
	}
}

/* Reduced motion / print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}

	.js .reveal,
	.js .is-split .w__i {
		opacity: 1;
		transform: none;
	}

	.js [data-reveal="clip"] {
		clip-path: none;
	}

	.fw {
		opacity: 1;
	}

	.js .approach {
		height: auto;
	}

	.approach__pin {
		position: static;
		height: auto;
		padding-block: var(--section);
	}

	.arch img {
		transform: none;
	}

	.media img {
		transform: none;
	}

	.marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.marquee__track {
		flex: 1;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 1.5rem;
		padding-inline: var(--gutter);
	}

	.marquee__track[aria-hidden="true"] {
		display: none;
	}

	.site-footer__wordmark span {
		background-size: 100% 100%;
	}
}

@media print {
	.site-header,
	.mobile-menu,
	.scroll-progress,
	.whatsapp-fab,
	.cta-band {
		display: none;
	}

	.js .reveal,
	.js .is-split .w__i {
		opacity: 1;
		transform: none;
	}
}

/* GMB Pro plans: placeholder prices stay on one line with a smaller "/month". */
.plan__price small {
	color: var(--muted);
	font-size: 0.32em;
	font-weight: 500;
	letter-spacing: 0;
	white-space: nowrap;
}

.plan__price .ph-text {
	font-size: 0.72em;
}

.plan--popular .plan__price small {
	color: var(--on-dark-muted);
}

/* Founder band on the homepage: the numbered label spans the full width. */
.founder .shead {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.founder .founder__intro {
	color: var(--on-dark);
}

/* Footer on phones: compact brand, contact card, two link columns, clear of the tab bar and WhatsApp button.
   ========================================================================== */
@media (max-width: 600px) {
	.site-footer {
		padding-top: 3rem;
	}

	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem 1.25rem;
	}

	.site-footer__brand,
	.site-footer__grid > :nth-child(2) {
		grid-column: 1 / -1;
	}

	.site-footer__logo img {
		height: 42px;
	}

	.site-footer__tagline {
		max-width: none;
		margin-top: 1rem;
		font-size: 1.45rem;
	}

	.site-footer__title {
		margin-bottom: 0.9rem;
		font-size: 0.72rem;
	}

	.site-footer__title--spaced {
		margin-top: 1.5rem;
	}

	.footer__contact {
		gap: 0;
		padding: 0.35rem 1.1rem;
		border: 1px solid var(--line-dark);
		border-radius: var(--radius-sm);
		background: rgba(255, 255, 255, 0.03);
	}

	.footer__contact li {
		padding-block: 0.85rem;
		font-size: 0.95rem;
		line-height: 1.5;
	}

	.footer__contact li + li {
		border-top: 1px solid var(--line-dark);
	}

	.footer__links {
		gap: 0.7rem;
		font-size: 0.95rem;
	}

	.site-footer__wordmark {
		margin-top: 2.5rem;
	}

	.site-footer__bottom {
		flex-direction: column;
		justify-content: center;
		gap: 0.5rem;
		margin-top: 1.25rem;
		/* Room for the floating WhatsApp button, which sits above the tab bar. */
		padding: 1.5rem var(--gutter) calc(56px + 2rem);
		font-size: 0.82rem;
		line-height: 1.55;
		text-align: center;
	}

	.site-footer__bottom .to-top {
		order: -1;
		margin-bottom: 0.5rem;
	}
}

/* Tablets: keep the footer's bottom row (and back-to-top button) clear of the floating WhatsApp button. */
@media (min-width: 601px) and (max-width: 1140px) {
	.site-footer__bottom {
		padding-bottom: calc(56px + 2.25rem);
	}
}

/* What we do: on larger screens the panel wrapper does not affect layout. */
.svc-tabs__panels {
	display: contents;
}

/* What we do on phones: a swipeable row of service cards instead of tabs + one tall panel.
   Nothing auto-switches, so the page never jumps while someone reads.
   ========================================================================== */
@media (max-width: 760px) {
	.svc-tabs__list {
		display: none;
	}

	.svc-tabs__panels {
		display: flex;
		align-items: stretch;
		gap: 12px;
		margin-inline: calc(var(--gutter) * -1);
		padding: 6px var(--gutter) 22px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-padding-inline: var(--gutter);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.svc-tabs__panels::-webkit-scrollbar {
		display: none;
	}

	.svc-panel,
	.svc-panel[hidden] {
		display: flex;
		flex: 0 0 84%;
		flex-direction: column;
		border-radius: 24px;
		box-shadow: 0 30px 50px -36px rgba(6, 20, 29, 0.55);
		scroll-snap-align: start;
		animation: none;
	}

	.svc-panel__media {
		flex: 0 0 auto;
		order: 0;
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.svc-panel.is-active .svc-panel__media img,
	.svc-panel.is-active .svc-panel__body > * {
		animation: none;
	}

	.svc-panel__flag {
		top: 0.9rem;
		right: 0.9rem;
		padding: 0.3rem 0.7rem;
		font-size: 0.64rem;
	}

	.svc-panel__body {
		flex: 1 1 auto;
		justify-content: flex-start;
		padding: 1.1rem 1.25rem 1.35rem;
	}

	.svc-panel__kicker {
		margin-bottom: 0.75rem;
		padding: 0.35rem 0.75rem;
		font-size: 0.7rem;
		line-height: 1.35;
	}

	.sheet .svc-panel__title {
		margin-bottom: 0.6rem;
		font-size: 1.45rem;
		line-height: 1.12;
	}

	.svc-panel__text {
		display: -webkit-box;
		margin-bottom: 1rem;
		overflow: hidden;
		font-size: 0.92rem;
		line-height: 1.55;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.svc-panel__points {
		gap: 0.55rem;
		margin-bottom: 1.25rem;
		padding-top: 1rem;
	}

	.svc-panel__points li {
		font-size: 0.86rem;
		line-height: 1.45;
	}

	/* Buttons line up at the bottom of every card. */
	.svc-panel__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 0.85rem;
		margin-top: auto;
		text-align: center;
	}

	.svc-panel__actions .btn {
		width: 100%;
		justify-content: center;
		gap: 0.5rem;
		padding-inline: 0.9rem;
		font-size: clamp(0.78rem, 3.5vw, 0.9rem);
		white-space: nowrap;
	}

	.sheet .svc-panel .link-arrow {
		align-self: center;
	}
}

/* Very small phones: long service buttons may wrap rather than overflow. */
@media (max-width: 359px) {
	.svc-panel__actions .btn {
		white-space: normal;
		text-align: center;
	}
}

/* Phone polish across homepage sections.
   ========================================================================== */
@media (max-width: 760px) {
	/* Hero: less empty space between the "How we think" card and the stats. */
	.hero--home .hero__media {
		margin-bottom: 0;
	}

	.hero-stats {
		margin-top: 2.25rem;
	}

	/* How we work: a clean numbered list (the pinned scroll scene is a desktop effect). */
	.approach__count,
	.approach__dial,
	.approach__bar {
		display: none;
	}

	.approach__words {
		margin-top: 1.5rem;
	}

	.approach__word,
	.approach__word.is-active {
		align-items: flex-start;
		gap: 0.9rem;
		padding: 1.15rem 0;
		border-top: 1px solid var(--line);
		transform: none;
	}

	.approach__word:last-child {
		border-bottom: 1px solid var(--line);
	}

	.approach__num,
	.approach__word.is-active .approach__num {
		width: auto;
		min-width: 1.75rem;
		padding-top: 0.5rem;
		color: var(--amber-700);
	}

	.sheet .approach__word h3,
	.sheet .approach__word.is-past h3,
	.sheet .approach__word.is-active h3 {
		color: var(--ink);
		font-size: 1.75rem;
		letter-spacing: -0.04em;
	}

	.approach__desc,
	.approach__word.is-active .approach__desc {
		margin: 0.35rem 0 0;
		font-size: 0.95rem;
		line-height: 1.55;
	}

	/* Founder: a smaller portrait so the story starts sooner. */
	.founder__media {
		max-width: 280px;
	}

	/* Contact: phone and directions side by side, equal width. */
	.grow__actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.grow__actions .btn {
		width: 100%;
		justify-content: center;
		gap: 0.45rem;
		padding-inline: 0.6rem;
		font-size: clamp(0.8rem, 3.6vw, 0.9rem);
		white-space: nowrap;
	}

	/* Latest insights: "All articles" lines up with the text above it. */
	.hv-head .link-arrow {
		margin-left: 0;
	}
}

@media (max-width: 359px) {
	.grow__actions {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Contact page on phones: quick mail / address / phone cards first (tap to call), then the form. */
@media (max-width: 760px) {
	.contact-layout > .info-cards {
		order: -1;
	}

	.contact-layout .info-card {
		align-items: center;
		padding: 1rem 1.1rem;
	}
}

/* First screen: hero content animates in pure CSS from the very first paint.
   (Waiting for JavaScript to reveal it delayed First and Largest Contentful Paint on phones.)
   ========================================================================== */
/* Movement only, no fade: text that starts transparent is never counted as painted by Chrome's LCP. */
@keyframes pm-first-in {
	from {
		transform: translate3d(0, 18px, 0);
	}
}

.js .hero .reveal,
.js .page-hero .reveal,
.js .article__header .reveal {
	opacity: 1;
	transform: none;
	transition: none;
	animation: pm-first-in 0.9s var(--ease) both;
}

.hero__title,
.page-hero__title,
.article__title {
	animation: pm-first-in 0.9s var(--ease) both;
}

.hero__content > :nth-child(2),
.page-hero .container > :nth-child(2),
.article__header .container > :nth-child(2) {
	animation-delay: 0.08s;
}

.hero__content > :nth-child(3),
.page-hero .container > :nth-child(3),
.article__header .container > :nth-child(3) {
	animation-delay: 0.16s;
}

.hero__content > :nth-child(n + 4),
.page-hero .container > :nth-child(n + 4),
.article__header .container > :nth-child(n + 4),
.js .hero .hero__media.reveal {
	animation-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
	.js .hero .reveal,
	.js .page-hero .reveal,
	.js .article__header .reveal,
	.hero__title,
	.page-hero__title,
	.article__title {
		animation: none;
	}
}

/* The first screen's large text (headline + intro) is the Largest Contentful Paint element.
   Chrome does not record LCP for text that is animating in, so it renders instantly; the
   smaller items around it (chip, buttons, image) keep their rise-in. */
.hero__title,
.page-hero__title,
.article__title,
.js .hero .hero__lead.reveal,
.js .page-hero .page-hero__text.reveal,
.js .hero .hero__lead,
.js .page-hero .page-hero__text {
	animation: none;
	transform: none;
}

/* The hero image can be the largest element on desktop: show it at once. */
.js .hero .hero__media.reveal {
	animation: none;
}

/* First-screen headings are not split by JS any more, so their accent underline draws in with CSS. */
@keyframes pm-underline {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

.hero__title .accent::after,
.page-hero__title .accent::after,
.article__title .accent::after {
	animation: pm-underline 1.2s var(--ease-in-out) 0.5s both;
}