/* The typefaces live in fonts.css and the tokens in tokens.css. Both are
   enqueued ahead of this file and both are linked by the quote desk, so a
   token or a face that moves on the site moves on the desk. Add one there,
   not here. This file is resets, elements and layout primitives. */

*,
*::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-text);
}

/* 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);
	}
}