/* Cinelux theme – pixel-exact port of the Figma design.
 *
 * Source of truth: Figma file DvzIwhccfErmwRn0oeaOul
 *   Large_1920   = node 1:2    (1920 x 4159)
 *   X-Large_2560 = node 1:198  (2560 x 5274)
 *
 * Figma supplies exactly two frames, so every measurement that differs between
 * them is expressed as a linear function of viewport width:
 *
 *   value     = clamp(v@1920, calc(<slope>vw + <intercept>px), v@2560)
 *   slope     = (v2560 - v1920) / 640 * 100
 *   intercept = v1920 - (v2560 - v1920) * 3
 *
 * Both frames are therefore hit exactly, and everything in between
 * interpolates. Below 1920 a second ramp carries the same tokens down to the
 * 768px tablet values; below 768 the hand-tuned mobile rules take over, since
 * Figma provides no small-screen design.
 */

:root {
	--cream: #f7f7f1;
	--green: #0e3f29;
	--gold: #d9a967;
	--body: #333333;
	--subtle: #6f6f6f;
	/* Sampled straight from the Figma artboard export: every hairline and
	   section border is a solid 1px #000, and the quote rule is the brand
	   green. The previous 22% tint rendered them visibly washed out. */
	--line: #000000;
	--rule-quote: #0e3f29;
	--muted-bg: oklch(0.92 0.005 100);
	--font-sans: "Source Sans 3", sans-serif;
	--font-serif: "Taviraj", serif;

	/* --- Design tokens: mobile baseline (< 48rem) --- */
	--container-w: 100%;
	--container-pad: 1.5rem;

	--hero-top: 28vh;
	--hero-eyebrow-fs: 16px;
	--hero-h1-fs: 36px;
	--hero-h1-lh: 38px;
	--hero-rule-w: 80px;
	--nav-fs: 14px;
	--logo-w: 150px;

	--label-fs: 14px;
	--h2-fs: 28px;
	--h2-lh: 36px;
	--stack-gap: 16px;

	--services-body-fs: 16px;
	--stats-gap: 40px;
	--stat-value-fs: 40px;
	--stat-label-fs: 16px;

	--gallery-gap: 32px;

	--quote-w: 100%;
	--quote-rule-h: 55px;
	--quote-panel-h: auto;
	--quote-gap: 48px;
	--quote-fs: 26px;
	--quote-lh: 34px;
	--quote-bq-w: 100%;
	--quote-text-fs: 18px;
	--quote-text-w: 100%;

	--contact-h-fs: 26px;
	--contact-h-lh: 34px;
	--contact-text-fs: 16px;
	--contact-text-w: 100%;

	--legal-fs: 16px;
	--legal-actions-w: 100%;

	--gap-hero-services: 80px;
	--gap-services-work: 80px;
	--gap-work-gallery: 48px;
	--gap-gallery-quote: 80px;
	--gap-quote-contact: 80px;
	--gap-rule-contact: 40px;
	--gap-contact-rule: 40px;
	--gap-rule-legal: 32px;
	--legal-pb: 32px;
}

/* --- Ramp 1: 768px -> 1920px, tablet values up to the Large_1920 frame --- */
@media (min-width: 48rem) {
	:root {
		--hero-top: 29vh;
		--hero-h1-fs: clamp(48px, calc(2.7778vw + 26.67px), 80px);
		--hero-h1-lh: clamp(52px, calc(1.3021vw + 42px), 67px);

		--h2-fs: clamp(32px, calc(0.6944vw + 26.67px), 40px);
		--h2-lh: clamp(40px, calc(0.6944vw + 34.67px), 48px);

		--stat-value-fs: clamp(48px, calc(0.6944vw + 42.67px), 56px);
		--stats-gap: clamp(18px, calc(28px - 0.5208vw), 24px);

		--quote-fs: clamp(32px, calc(0.6944vw + 26.67px), 40px);
		--quote-lh: clamp(40px, calc(0.6944vw + 34.67px), 48px);
		--quote-text-fs: clamp(20px, calc(0.3472vw + 17.33px), 24px);

		--contact-h-fs: clamp(28px, calc(0.3472vw + 25.33px), 32px);
		--contact-h-lh: clamp(36px, calc(0.3472vw + 33.33px), 40px);

		--gap-hero-services: clamp(80px, calc(2.604vw + 60px), 110px);
		--gap-services-work: clamp(80px, calc(2.604vw + 60px), 110px);
		--gap-work-gallery: clamp(48px, calc(0.78125vw + 42px), 57px);
		--gap-gallery-quote: clamp(80px, calc(6.6536vw + 28.9px), 156.65px);
		--gap-quote-contact: clamp(80px, calc(10vw + 3.2px), 195.2px);
		--quote-w: 690px;
		--quote-bq-w: 614px;
		--quote-text-w: 566px;
		--contact-text-w: 499px;

		--gap-rule-contact: 18px;
		--gap-contact-rule: 16px;
		--gap-rule-legal: 19px;
		--legal-pb: 40px;
	}
}

@media (min-width: 64rem) {
	:root {
		--container-pad: 2.5rem;
		/* The centred lockup starts here; ramp it up to the 1920 anchor so
		   there is no jump when Ramp 2 takes over. */
		--logo-w: clamp(150px, calc(2.7278vw + 122.07px), 174.441px);
	}
}

@media (min-width: 80rem) {
	:root {
		/* Margins now come from the width itself, so drop the padding. 1152 at
		   1280 (64px margins) ramping to the 1280 the Figma frame specifies. */
		--container-pad: 0px;
		--container-w: clamp(1152px, calc(20vw + 896px), 1280px);
		--nav-gap: clamp(80px, calc(5vw + 16px), 112px);
		--services-text-h: 151px;
		--quote-intro-h: 107px;
	}
}

/* --- Ramp 2: 1920px -> 2560px, exact between the two Figma frames --- */
@media (min-width: 120rem) {
	:root {
		--container-w: clamp(1280px, calc(62.5vw + 80px), 1680px);
		--container-pad: 0px;

		/* Hero — Section_1 top 313@1920 / 435@2560, capped so a taller-than-16:9
		   viewport cannot push the content past the fold. */
		--hero-top: min(clamp(313px, calc(19.0625vw - 53px), 435px), 31%);
		--hero-eyebrow-fs: clamp(16px, calc(0.625vw + 4px), 20px);
		--hero-h1-fs: clamp(80px, calc(5.15625vw - 19px), 113px);
		--hero-h1-lh: clamp(67px, calc(6.71875vw - 62px), 110px);
		--hero-rule-w: clamp(80px, calc(3.125vw + 20px), 100px);
		--nav-fs: clamp(14px, calc(0.3125vw + 8px), 16px);
		--nav-gap: clamp(112px, calc(4.375vw + 28px), 140px);
		--logo-w: clamp(174.441px, calc(3.0289vw + 116.29px), 193.826px);

		--label-fs: clamp(14px, calc(0.3125vw + 8px), 16px);
		--h2-fs: clamp(40px, calc(2.5vw - 8px), 56px);
		--h2-lh: clamp(48px, calc(3.75vw - 24px), 72px);
		--stack-gap: clamp(16px, calc(1.25vw - 8px), 24px);

		--services-left-w: clamp(534px, calc(34.0625vw - 120px), 752px);
		--services-right-w: clamp(623px, calc(31.5625vw + 17px), 825px);
		--services-body-fs: clamp(16px, calc(0.46875vw + 7px), 19px);
		--stats-gap: clamp(18px, calc(4.6875vw - 72px), 48px);
		--stat-value-fs: clamp(56px, calc(1.25vw + 32px), 64px);
		--stat-label-fs: clamp(16px, calc(0.3125vw + 10px), 18px);

		--gallery-gap: clamp(24px, calc(1.18125vw + 1.32px), 31.56px);

		--quote-w: clamp(690px, calc(28.75vw + 138px), 874px);
		--quote-rule-h: clamp(55px, calc(1.5625vw + 25px), 65px);
		--quote-panel-h: clamp(278px, calc(3.75vw + 206px), 302px);
		--quote-intro-h: clamp(107px, calc(5.78125vw - 4px), 144px);
		--services-text-h: clamp(151px, calc(6.25vw + 31px), 191px);
		--quote-gap: clamp(64px, calc(2.5vw + 16px), 80px);
		--quote-fs: clamp(40px, calc(1.25vw + 16px), 48px);
		--quote-lh: clamp(48px, calc(1.25vw + 24px), 56px);
		--quote-bq-w: clamp(614px, calc(20vw + 230px), 742px);
		--quote-text-fs: clamp(24px, 1.25vw, 32px);
		--quote-text-w: clamp(566px, calc(21.875vw + 146px), 706px);

		--contact-cta-w: clamp(619px, calc(57.03125vw - 476px), 984px);
		--contact-h-fs: clamp(32px, calc(1.25vw + 8px), 40px);
		--contact-h-lh: clamp(40px, calc(1.25vw + 16px), 48px);
		--contact-text-fs: clamp(16px, calc(0.3125vw + 10px), 18px);
		--contact-text-w: clamp(499px, calc(16.875vw + 175px), 607px);

		--legal-fs: clamp(16px, calc(0.3125vw + 10px), 18px);
		--legal-actions-w: clamp(492px, calc(25.9375vw - 6px), 658px);

		/* Vertical rhythm, measured between section boxes in both frames. */
		--gap-hero-services: clamp(110px, calc(13.4375vw - 148px), 196px);
		--gap-services-work: clamp(110px, calc(16.71875vw - 211px), 217px);
		--gap-work-gallery: clamp(57px, calc(1.5625vw + 27px), 67px);
		--gap-gallery-quote: clamp(156.65px, calc(10.4453125vw - 43.9px), 223.5px);
		--gap-quote-contact: clamp(146.9px, calc(340.1px - 7.546875vw), 195.2px);
		--gap-rule-contact: clamp(17px, calc(21px - 0.15625vw), 18px);
		--gap-contact-rule: clamp(16px, calc(0.15625vw + 13px), 17px);
		--gap-rule-legal: clamp(19px, calc(1.5625vw - 11px), 29px);
		--legal-pb: clamp(22px, calc(94px - 2.8125vw), 40px);
	}
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--body);
	background-color: var(--cream);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	cursor: pointer;
	border: none;
	background: none;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-serif);
	margin: 0;
}

p {
	margin: 0;
}

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

address {
	font-style: normal;
}

/* Container — 1280px content box @1920, 1680px @2560 (Figma Section_1 width). */
.container-wide {
	width: 100%;
	max-width: var(--container-w);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
}

/* Main layout */
.cinelux-main {
	min-height: 100vh;
	background-color: var(--cream);
	color: var(--body);
}

/* ---------------------------------------------------------------- Hero --
   Frame 41 is 1080 tall @1920 and 1440 @2560 — both exactly 16:9 of the
   viewport, i.e. a full viewport height. */
.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	height: 100dvh;
	min-height: 720px;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(14, 63, 41, 0.7);
	mix-blend-mode: multiply;
}

.hero__nav {
	position: absolute;
	top: 39.892px;
	left: 0;
	right: 0;
	z-index: 20;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	color: var(--cream);
}

.hero__nav-group {
	display: none;
	align-items: center;
	gap: 4rem;
	font-size: var(--nav-fs);
	font-weight: 600;
	letter-spacing: 0.02em;
}

@media (min-width: 64rem) {
	.hero__nav-group {
		display: flex;
	}
}

@media (min-width: 80rem) {
	.hero__nav-group {
		gap: var(--nav-gap);
	}
}

.hero__nav-link {
	transition: opacity 0.2s ease;
}

.hero__nav-link:hover,
.hero__nav-link:focus {
	opacity: 0.7;
}

/* Logo lockup — Figma frame 1:201. The three SVGs scale as a unit (the whole
   lockup is exactly 0.9x at 1920 vs 2560), so the wrapper carries the fluid
   width and each part is sized as a percentage of it. Ratios are taken
   straight from the exported asset dimensions. */
/* Below the desktop breakpoint the brand sits at the left of the bar, opposite
   the compact nav; centring it there would collide with those links. */
.hero__brand {
	position: relative;
	width: 140px;
	aspect-ratio: 193.826 / 100;
	flex-shrink: 0;
}

@media (min-width: 64rem) {
	.hero__brand {
		position: absolute;
		left: 50%;
		top: 0.108px;
		transform: translateX(-50%);
		width: var(--logo-w);
	}
}

.hero__mark,
.hero__wordmark,
.hero__tagline {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	color: var(--gold);
}

.hero__mark {
	top: 0;
	width: 15.79%;
	aspect-ratio: 30.607 / 30.604;
}

.hero__wordmark {
	top: 45.33%;
	width: 100%;
	aspect-ratio: 193.826 / 30.4461;
	color: var(--cream);
}

.hero__tagline {
	top: 90.38%;
	width: 63.32%;
	aspect-ratio: 122.726 / 9.6192;
}

.hero__nav-mobile {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-left: auto;
}

@media (min-width: 64rem) {
	.hero__nav-mobile {
		display: none;
	}
}

.hero__nav-mobile-link {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--cream);
}

.hero__icon {
	width: 24.449px;
	height: 23.904px;
	color: var(--cream);
}

.hero__icon--sm {
	width: 1.5rem;
	height: 1.5rem;
}

.hero__content {
	position: relative;
	z-index: 10;
	width: 100%;
	max-width: var(--container-w);
	margin-top: var(--hero-top);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
	text-align: center;
	color: var(--cream);
}

.hero__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
	width: 100%;
}

.hero__eyebrow {
	width: 100%;
	font-size: var(--hero-eyebrow-fs);
	font-weight: 500;
}

.hero__title {
	width: 100%;
	font-family: var(--font-serif);
	font-size: var(--hero-h1-fs);
	font-weight: 400;
	line-height: var(--hero-h1-lh);
}

.hero__title span {
	display: block;
}

.hero__divider {
	width: var(--hero-rule-w);
	height: 1px;
	background-color: var(--cream);
}

.hero__description {
	font-size: var(--hero-eyebrow-fs);
	font-weight: 500;
	line-height: normal;
}

/* ------------------------------------------------------------ Services --
   Section_2: left column 534/752, 115px gutter, right column 623/825. */
.services {
	padding-top: var(--gap-hero-services);
}

.services__inner {
	display: flex;
	flex-direction: column;
	gap: 63px;
}

.services__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2.5rem;
}

@media (min-width: 64rem) {
	.services__header {
		flex-direction: row;
		gap: 4rem;
	}
}

@media (min-width: 80rem) {
	.services__header {
		gap: 8.984%;
		min-height: var(--services-text-h);
	}

	.quote-section__intro {
		min-height: var(--quote-intro-h);
	}
}

@media (min-width: 120rem) {
	.services__header {
		gap: 115px;
	}
}

.services__header-left {
	display: flex;
	flex-direction: column;
	gap: var(--stack-gap);
	width: 100%;
}

@media (min-width: 64rem) {
	.services__header-left {
		width: 46%;
	}
}

@media (min-width: 80rem) {
	.services__header-left {
		width: 41.719%;
		flex-shrink: 0;
	}
}

@media (min-width: 120rem) {
	.services__header-left {
		width: var(--services-left-w);
	}
}

.services__label {
	font-size: var(--label-fs);
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--subtle);
}

.services__heading {
	font-family: var(--font-serif);
	font-size: var(--h2-fs);
	font-weight: 500;
	text-transform: uppercase;
	line-height: var(--h2-lh);
	letter-spacing: 0.02em;
	color: var(--green);
}

.services__body {
	width: 100%;
	font-size: var(--services-body-fs);
	font-weight: 400;
	line-height: normal;
	color: var(--body);
}

@media (min-width: 80rem) {
	.services__body {
		width: 48.672%;
		flex-shrink: 0;
	}
}

@media (min-width: 120rem) {
	.services__body {
		width: var(--services-right-w);
	}
}

.services__body p + p {
	margin-top: var(--stack-gap);
}

.services__body-p2 {
	max-width: 607px;
}

/* Figma adds ~4px of paragraph spacing at the hard break inside the first
   block (its frame is 70 tall for three 21.67px lines), which is what puts the
   second paragraph on its artboard position. */
.services__body p:first-child {
	padding-bottom: 3px;
}

/* 120rem IS exactly 1920px, so an inclusive breakpoint would give the 1920
   artboard the 2560 treatment. These two rules are binary rather than
   interpolated, so they switch just above the 1920 frame. */
@media (min-width: 1921px) {
	.services__break {
		display: none;
	}

	.services__body p:first-child {
		padding-bottom: 0;
	}

	.services__body-p2 {
		max-width: none;
	}
}

/* Statistic row — four 384px columns with 48px gutters @2560
   ((1680 - 3 x 48) / 4 = 384), 307px / 18px @1920. */
.stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

@media (min-width: 40rem) {
	.stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.stats {
		grid-template-columns: repeat(4, 1fr);
		column-gap: var(--stats-gap);
	}
}

.stat {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	min-height: 0;
}

@media (min-width: 64rem) {
	.stat {
		min-height: 230px;
		gap: 57px;
	}
}

.stat__line {
	width: 100%;
	height: 1px;
	background-color: var(--line);
}

.stat__content {
	display: flex;
	flex-direction: column;
	gap: 17px;
	padding-left: 0;
}

@media (min-width: 64rem) {
	.stat__content {
		padding-left: 12px;
	}
}

.stat__value {
	font-family: var(--font-serif);
	font-size: var(--stat-value-fs);
	font-weight: 400;
	line-height: 1;
	color: var(--green);
}

.stat__label {
	font-size: var(--stat-label-fs);
	font-weight: 500;
	color: var(--body);
}

.stat__divider {
	display: none;
}

@media (min-width: 64rem) {
	.stat__divider {
		display: block;
		position: absolute;
		right: calc(var(--stats-gap) / -2);
		top: 0;
		width: 1px;
		height: 230px;
		background-color: var(--line);
	}

	.stat:last-child .stat__divider {
		display: none;
	}
}

/* ---------------------------------------------------------------- Work -- */
.work {
	padding-top: var(--gap-services-work);
}

.work__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--stack-gap);
	margin-bottom: var(--gap-work-gallery);
	text-align: center;
}

.work__label {
	font-size: var(--label-fs);
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--subtle);
}

.work__heading {
	font-family: var(--font-serif);
	font-size: var(--h2-fs);
	font-weight: 500;
	text-transform: uppercase;
	line-height: var(--h2-lh);
	letter-spacing: 0.01em;
	color: var(--green);
}

.gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gallery-gap);
}

@media (min-width: 48rem) {
	.gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

.gallery__item {
	position: relative;
	aspect-ratio: 1536 / 1024;
	overflow: hidden;
	background-color: var(--muted-bg);
}

.gallery__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------- Quote -- */
.quote-section {
	padding-top: var(--gap-gallery-quote);
	padding-bottom: var(--gap-quote-contact);
}

.quote-section__inner {
	max-width: var(--quote-w);
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--stack-gap);
}

.quote-section__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--stack-gap);
	width: 100%;
}

@media (min-width: 120rem) {
	.quote-section__intro {
		gap: clamp(24px, 1.25vw, 32px);
	}
}

.quote-section__heading {
	text-align: center;
	font-family: var(--font-serif);
	font-size: var(--h2-fs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--green);
}

.quote-section__divider {
	width: 1px;
	height: var(--quote-rule-h);
	background-color: var(--rule-quote);
}

.quote-section__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--quote-gap);
	width: 100%;
}

.quote-section__panel {
	display: flex;
	width: 100%;
	min-height: var(--quote-panel-h);
	align-items: center;
	justify-content: center;
	background-color: var(--green);
	padding: 48px 32px 52px;
}

.quote-section__blockquote {
	max-width: var(--quote-bq-w);
	text-align: center;
	font-family: var(--font-serif);
	font-size: var(--quote-fs);
	font-weight: 400;
	line-height: var(--quote-lh);
	color: var(--cream);
	margin: 0;
}

.quote-section__text {
	max-width: var(--quote-text-w);
	text-align: center;
	font-size: var(--quote-text-fs);
	font-weight: 400;
	line-height: normal;
	color: var(--body);
}

/* ------------------------------------------------------------- Contact -- */
.contact {
	border-top: 1px solid var(--line);
}

.contact__main {
	padding-top: var(--gap-rule-contact);
	padding-bottom: var(--gap-contact-rule);
}

.contact__grid {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

@media (min-width: 80rem) {
	.contact__grid {
		flex-direction: row;
		align-items: center;
		gap: 12px;
	}
}

.contact__cta-block {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 78px;
	width: 100%;
}

@media (min-width: 80rem) {
	.contact__cta-block {
		height: 260px;
		width: 48.359%;
		flex-shrink: 0;
	}
}

@media (min-width: 120rem) {
	.contact__cta-block {
		width: var(--contact-cta-w);
	}
}

.contact__cta-copy {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 607px;
}

.contact__heading {
	font-family: var(--font-serif);
	font-size: var(--contact-h-fs);
	font-weight: 500;
	text-transform: uppercase;
	line-height: var(--contact-h-lh);
	color: var(--green);
}

.contact__text {
	max-width: var(--contact-text-w);
	font-size: var(--contact-text-fs);
	font-weight: 400;
	line-height: normal;
	color: var(--body);
}

.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 163px;
	height: 54px;
	border-radius: 32px;
	background-color: var(--green);
	color: var(--cream);
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	transition: background-color 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: color-mix(in srgb, var(--green) 90%, transparent);
}

.contact__details {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	width: 100%;
}

@media (min-width: 40rem) {
	.contact__details {
		flex-direction: row;
		justify-content: space-between;
	}
}

@media (min-width: 80rem) {
	.contact__details {
		width: 43.203%;
		flex-shrink: 0;
	}
}

@media (min-width: 120rem) {
	.contact__details {
		width: 553px;
	}
}

/* The 310px rule and the text block are centre-aligned to each other in
   Figma (content is 272.9 tall, offset 18.5 from the top of the rule). */
.contact__column {
	display: flex;
	align-items: center;
	gap: 32px;
}

.contact__column-divider {
	display: none;
	width: 1px;
	height: 310px;
	flex-shrink: 0;
	background-color: var(--line);
}

@media (min-width: 80rem) {
	.contact__column-divider {
		display: block;
	}

	.contact__column-content {
		height: 272.9px;
	}

	.contact__column-content--services {
		height: 271px;
	}
}

.contact__column-content {
	display: flex;
	flex-direction: column;
	gap: 48px;
	width: 177px;
}

.contact__column-content--services {
	width: 138px;
	gap: 24px;
}

.contact__column-content > div {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.contact__subheading {
	font-family: var(--font-serif);
	font-size: 24px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--green);
}

.contact__info {
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: 18px;
	font-weight: 500;
	color: var(--body);
}

.contact__info a {
	transition: color 0.2s ease;
}

.contact__info a:hover,
.contact__info a:focus {
	color: var(--green);
}

.contact__icon {
	width: 24.449px;
	height: 23.904px;
	color: var(--green);
}

.contact__services {
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: 18px;
	font-weight: 500;
	color: var(--body);
}

/* ----------------------------------------------------------- Legal bar -- */
.legal-bar {
	border-top: 1px solid var(--line);
}

.legal-bar__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: var(--gap-rule-legal);
	padding-bottom: var(--legal-pb);
}

@media (min-width: 48rem) {
	.legal-bar__inner {
		flex-direction: row;
	}
}

.legal-bar__copyright {
	font-size: var(--legal-fs);
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--body);
}

.legal-bar__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	width: 100%;
	max-width: var(--legal-actions-w);
}

@media (min-width: 48rem) {
	.legal-bar__actions {
		justify-content: space-between;
	}
}

.legal-bar__link {
	font-size: var(--legal-fs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--green);
	transition: opacity 0.2s ease;
}

.legal-bar__link:hover,
.legal-bar__link:focus {
	opacity: 0.7;
}

.legal-bar__back-to-top {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-family: var(--font-sans);
	font-size: var(--legal-fs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--body);
	transition: color 0.2s ease;
}

.legal-bar__back-to-top:hover,
.legal-bar__back-to-top:focus {
	color: var(--green);
}

/* Figma trims these text boxes to the cap/alphabetic edges (the design context
   reports [text-box-trim:trim-both] [text-box-edge:cap_alphabetic] on exactly
   these nodes). Replicating it in CSS removes the half-leading the browser
   would otherwise add, which is what keeps the vertical rhythm on spec.
   Progressive enhancement: browsers without support simply render untrimmed. */
.hero__eyebrow,
.hero__title,
.hero__description,
.stat__value,
.stat__label,
.quote-section__heading,
.quote-section__blockquote,
.quote-section__text,
.contact__heading,
.contact__text,
.btn-primary {
	text-box: trim-both cap alphabetic;
}

/* Compact header (inner pages) */
.compact-header {
	border-bottom: 1px solid var(--line);
	background-color: var(--cream);
}

.compact-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.compact-header__brand {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.compact-header__mark {
	width: 31px;
	height: 31px;
}

.compact-header__wordmark {
	width: 155.06px;
	aspect-ratio: 193.826 / 30.4461;
	color: var(--green);
}

.compact-header__nav {
	display: flex;
	align-items: center;
	gap: 2rem;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.32px;
	color: var(--green);
}

.compact-header__nav a {
	transition: opacity 0.2s ease;
}

.compact-header__nav a:hover,
.compact-header__nav a:focus {
	opacity: 0.7;
}

.compact-header__icon {
	width: 20px;
	height: 20px;
	color: var(--green);
}

/* Inner page content */
.inner-content {
	padding-top: 3rem;
	padding-bottom: 5rem;
}

.inner-content__title {
	font-family: var(--font-serif);
	font-size: 36px;
	font-weight: 500;
	color: var(--green);
	margin-bottom: 2rem;
}

.inner-content__body {
	font-size: 18px;
	line-height: 1.6;
	color: var(--body);
}

.inner-content__body p + p {
	margin-top: 1.5rem;
}

.inner-content__body a {
	color: var(--green);
	text-decoration: underline;
}

/* 404 */
.not-found {
	padding-top: 5rem;
	padding-bottom: 5rem;
	text-align: center;
}

.not-found__code {
	font-family: var(--font-serif);
	font-size: 96px;
	font-weight: 400;
	line-height: 1;
	color: var(--green);
}

.not-found__title {
	margin-top: 1rem;
	font-family: var(--font-serif);
	font-size: 28px;
	font-weight: 500;
	color: var(--green);
}

.not-found__text {
	margin-top: 0.5rem;
	font-size: 16px;
	color: var(--subtle);
}

.not-found__link {
	display: inline-flex;
	margin-top: 2rem;
	align-items: center;
	justify-content: center;
	height: 54px;
	padding: 0 2rem;
	border-radius: 32px;
	background-color: var(--green);
	color: var(--cream);
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.48px;
	transition: background-color 0.2s ease;
}

.not-found__link:hover,
.not-found__link:focus {
	background-color: color-mix(in srgb, var(--green) 90%, transparent);
}

/* Blog fallback */
.entry-list {
	padding-top: 3rem;
	padding-bottom: 5rem;
}

.entry {
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--line);
}

.entry__title {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--green);
	margin-bottom: 0.5rem;
}

.entry__meta {
	font-size: 0.9rem;
	color: var(--subtle);
	margin-bottom: 1rem;
}

.entry__content {
	font-size: 17px;
	line-height: 1.6;
}

.entry__content a {
	color: var(--green);
}

/* Nav menu + search form (inner pages) */
.compact-header__menu {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.search-form {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.search-form__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.75rem 1rem;
	font: inherit;
	color: var(--body);
	background-color: transparent;
	border: 1px solid var(--line);
	border-radius: 4px;
}

.search-form__field:focus {
	outline: 2px solid var(--green);
	outline-offset: 1px;
}

.search-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	padding: 0 1.75rem;
	border-radius: 32px;
	background-color: var(--green);
	color: var(--cream);
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

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