/* Premium editorial type pairing, self hosted. Fraunces for display headings, Inter for body. */
@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/fraunces-600.woff2") format("woff2");
}

@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/fraunces-700.woff2") format("woff2");
}

@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/fraunces-900.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-400.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/inter-500.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter-600.woff2") format("woff2");
}

/* General Sans (display and body) and JetBrains Mono (labels), self hosted to match the Halston pairing. */
@font-face {
	font-family: "General Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/generalsans-400.woff2") format("woff2");
}

@font-face {
	font-family: "General Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/generalsans-500.woff2") format("woff2");
}

@font-face {
	font-family: "General Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/generalsans-600.woff2") format("woff2");
}

@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/jetbrainsmono-500.woff2") format("woff2");
}

:root {
	/* Five tones, measured directly against Halston, replacing the earlier
	   green based palette entirely. BASE carries default sections, CARD is
	   for cards and alternate surfaces, ACCENT is eyebrow text, links and
	   small details, DEEP makes one premium statement band per page, INK
	   closes (closing CTA and footer only). No green anywhere. */
	--color-base: #efece6;
	--color-card: #e4e0d8;
	--color-deep: #4a4438;
	--color-ink: #262626;
	--color-warm-white: #fffefa;

	/* Backward compatible aliases so every existing rule resolves through
	   the five tones above without needing to touch each file. */
	--color-bg: var(--color-base);
	--color-sage: var(--color-card);
	--color-forest: var(--color-deep);
	--color-green-light: var(--color-card);
	--color-green-deep: var(--color-deep);
	--color-surface: var(--color-card);
	--color-surface-strong: var(--color-card);
	--color-maroon: var(--color-ink);
	--color-maroon-deep: var(--color-deep);
	--color-maroon-light: var(--color-card);
	--color-dark: var(--color-ink);

	--color-text: #262626;
	--color-muted: rgba(38, 38, 38, 0.72);
	--color-line: rgba(38, 38, 38, 0.16);
	--color-accent: #a29782;
	--color-accent-deep: #7d7360;
	--color-gold: #c79a3e;
	--color-error: #9c4a37;
	--color-dark-soft: #3a3a3a;
	--font-heading: "General Sans", "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-body: "General Sans", "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
	--container: 1180px;
	--container-wide: 1440px;
	--gutter: clamp(1rem, 1.25vw, 1.5rem);
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--shadow-soft: 0 16px 36px rgba(17, 22, 19, 0.07);
	--type-hero: clamp(3.15rem, 5.05vw, 6.25rem);
	/* One shared hero scale, identical on every page. */
	--type-hero-standard: clamp(3rem, 4vw, 3.5rem);
	--type-section-xl: clamp(2.75rem, 4.25vw, 4.75rem);
	--type-section-lg: clamp(2.25rem, 3.5vw, 3.9rem);
	--type-section-md: clamp(1.55rem, 2vw, 2.05rem);
	--type-body-lg: clamp(0.95rem, 1vw, 1.05rem);
	--type-label: 0.72rem;
	--space-1: 0.5rem;
	--space-2: 0.75rem;
	--space-3: 1rem;
	--space-4: 1.4rem;
	--space-5: 2rem;
	--space-6: 2.8rem;
	--space-7: 4rem;
	--space-8: 5.25rem;
	--space-section: clamp(4.9rem, 7.2vw, 8.2rem);
	--space-section-tight: clamp(3.8rem, 5.7vw, 6.4rem);
	--ease-premium: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
	--transition: 180ms ease;

	/* One cinematic grade for all content photography, so every photo on the
	   site reads as one shoot. Excludes logos, icons and third party avatars. */
	--photo-grade: contrast(1.05) saturate(0.93);

	/* Shared directional scrim for text pinned in a photo's top left corner. */
	/* Directional text zone scrim: deep enough for warm white text over
	   light photography, invisible by the photo midpoint. */
	--scrim-corner: linear-gradient(135deg, rgba(18, 15, 11, 0.58) 0%, rgba(18, 15, 11, 0.26) 38%, rgba(18, 15, 11, 0) 66%);
}

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

/* Never set scroll-behavior: smooth here. Lenis writes the scroll position
   every animation frame, and native smooth scrolling turns each of those
   writes into its own browser animation, so the two engines fight and the
   whole site scrolls with delay and jitter. ScrollTrigger also snapshots
   the computed value on refresh and restores it as an inline style, which
   is how a smooth value here overrides any JS reset. Smooth anchor jumps
   are handled by lenis.scrollTo in theme.js instead. */
html {
	scroll-behavior: auto;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text);
	background: var(--color-bg);
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Cinematic grade utility. Apply to content photography only, never to
   logos, icons or third party avatars. */
.photo-grade {
	filter: var(--photo-grade);
}

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

a:hover,
a:focus-visible {
	color: var(--color-accent-deep);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.018em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.9rem, 5vw, 5.1rem);
}

h2 {
	font-size: clamp(1.9rem, 2.9vw, 3rem);
}

h3 {
	font-size: clamp(1.2rem, 1.8vw, 1.6rem);
}

p,
ul,
ol {
	margin: 0;
}

ul,
ol {
	padding-left: 1.2rem;
}

/* Root cause fix for the recurring left edge clipping: the gutter used to
   come from width: calc(100% - 2 * gutter) + auto margins, which any same
   specificity width: 100% override elsewhere silently cancelled, and that
   happened repeatedly. As padding, the gutter survives any width override:
   a stray width: 100% no longer strips it. box-sizing is border-box
   globally, so the box maths stay identical. */
.container {
	width: 100%;
	padding-inline: var(--gutter);
	margin-inline: auto;
}

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

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

.section--surface {
	background: var(--color-surface);
}

.section--framed {
	position: relative;
}

.section--framed::before {
	content: "";
	position: absolute;
	inset: 1.4rem;
	border: 1px solid rgba(23, 26, 24, 0.07);
	border-radius: var(--radius-lg);
	pointer-events: none;
}

.flow > * + * {
	margin-top: var(--space-4);
}

.flow-sm > * + * {
	margin-top: var(--space-3);
}

.eyebrow {
	font-family: var(--font-mono);
	font-size: 0.82rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.2;
	color: var(--color-accent);
}

/* Halston style outlined label chip, used across sections */
.eyebrow--chip {
	display: inline-flex;
	align-self: flex-start;
	width: fit-content;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.38rem 0.76rem;
	border: 1px solid var(--color-line);
	font-size: 0.76rem;
	letter-spacing: 0.1em;
}

.eyebrow__marker {
	width: 0.34rem;
	height: 0.34rem;
	transform: rotate(45deg);
	background: var(--color-accent);
	flex: none;
}

/* Hairline above every section intro, site wide, for structural precision.
   --hairline-color lets a dark band context restate one variable instead
   of duplicating the whole rule. */
.dual-offer__intro,
.lead-project__intro,
.process-steps__intro,
.home-projects__header,
.closing-cta__lead,
.about-hero__head,
.about-positioning__intro,
.contact-hero__head,
.contact-routes__intro,
.contact-form__details,
.furniture-hero__head,
.furniture-categories__header,
.furniture-proof__intro,
.office-hero__head,
.office-split__intro,
.office-process__intro,
.office-why__copy,
.office-projects__header,
.office-cta__lead,
.project-hero__head,
.project-story__block,
.project-scope__intro,
.project-notes__intro,
.project-gallery__intro,
.project-next__head,
.projects-hero {
	border-top: 1px solid var(--hairline-color, var(--color-line));
	padding-top: clamp(1.4rem, 2.5vw, 2rem);
}

/* Sections where the eyebrow chip sits directly in .container with no
   wrapper div: the hairline goes on .container itself so it still spans
   the full content width instead of just the chip's own narrow box. */
.about-band > .container,
.section--office-stats > .container,
.section--stats > .container {
	border-top: 1px solid var(--hairline-color, var(--color-line));
	padding-top: clamp(1.4rem, 2.5vw, 2rem);
}

.section-rule {
	height: 1px;
	width: 100%;
	background: var(--color-line);
	border: 0;
}

.lead {
	max-width: 52rem;
	font-size: var(--type-body-lg);
	line-height: 1.66;
	color: var(--color-muted);
}

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

.screen-reader-text:focus {
	top: 1rem;
	left: 1rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	margin: 0;
	clip: auto;
	background: var(--color-dark);
	color: #fff;
	z-index: 1000;
}

@media (max-width: 780px) {
	.section {
		padding-block: var(--space-7);
	}

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