:root {
  --paper: oklch(100% 0 0);
  --moss: oklch(0% 0 0);
  --serif: "Faculty Glyphic", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Schibsted Grotesk", Arial, sans-serif;
  --type-label: clamp(.6875rem, .66rem + .1vw, .75rem);
  --type-meta: clamp(.8125rem, .78rem + .12vw, .875rem);
  --type-body: clamp(1rem, .97rem + .12vw, 1.125rem);
  --type-body-lg: clamp(1.125rem, 1.02rem + .5vw, 1.5rem);
  --type-project: clamp(1.125rem, 1.03rem + .42vw, 1.5rem);
  --type-h3: clamp(2rem, 1.72rem + 1.15vw, 2.875rem);
  --type-h2: clamp(3rem, 2.25rem + 3vw, 5rem);
  --type-display: clamp(3.75rem, 2.4rem + 5.7vw, 6rem);
  --type-intro: clamp(2rem, 1.45rem + 2.25vw, 3.45rem);
  --copy-width: 60rem;
  --feature-copy-width: 60rem;
  --process-width: 75rem;
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
}

.services {
  background: var(--paper);
}

.button span,
.header-contact span,
.text-link span,
.project b,
.hero-scroll span:after {
  display: none;
}

.eyebrow {
  display: none;
}

/* Figma composition */
.site-header { display: none; }
.hero { height: 992px; margin: 16px; }
.hero-media { filter: saturate(.78) contrast(.94); transform: scale(1.02); }
.hero-copy { transform: translate(-50%, -48%); }
.hero h1 { font-size: clamp(60px, 6.7vw, 96px); margin-bottom: 32px; }
.hero-scroll { display: none; }
.intro { max-width: 1230px; padding-top: 215px; padding-bottom: 220px; }
.section-heading h2 { font-family: var(--sans); font-size: 48px; letter-spacing: -.055em; line-height: 1; }
.section-heading { align-items: flex-start; flex-direction: column; gap: 22px; margin-bottom: 48px; }
.section-heading .text-link { background: oklch(91% 0 0); border-radius: 100px; font-size: 14px; padding: 12px 16px; }
.project-grid { grid-template-columns: 577px 578px 696px; }
.project img { height: 489px; }
.promise { border-top: 0; display: block; padding-bottom: 150px; padding-top: 150px; text-align: center; }
.promise-copy h2 { font-family: var(--sans); font-size: 48px; letter-spacing: -.055em; }
.promise-detail { margin: 18px auto 0; }.promise-detail p { font-size: 17px; margin: 0 auto 24px; }
.services { padding-bottom: 160px; padding-top: 0; }.service-grid { gap: 0 16px; max-width: none; padding: 0 16px; }
.service { border: 0; display: block; min-height: 0; padding: 0 0 70px !important; }.service figure { height: 509px; margin: 0 0 20px; overflow: hidden; }.service figure img { filter: saturate(.78); height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .65s cubic-bezier(.16,1,.3,1), filter .65s ease; width: 100%; }.service:hover figure img { filter: saturate(1); transform: scale(1.06); }.service h3 { font-family: var(--sans); font-size: 32px; letter-spacing: -.055em; margin-bottom: 9px; }.service p { font-size: 16px; max-width: 100%; }.service-number { display: none; }
footer { border-top: 0; }
footer { background: oklch(0% 0 0); }
.contact { background: oklch(0% 0 0); }

/* Typographic roles: label → metadata → body → heading → display. */
body { font-size: var(--type-body); line-height: 1.4; }
.eyebrow { font-size: var(--type-label); line-height: 1.2; }
nav a, .header-contact, footer a, footer p { font-size: var(--type-meta); line-height: 1.25; }
.button, .text-link, .section-heading .text-link { font-size: var(--type-meta); line-height: 1.2; }
.hero h1 { font-size: var(--type-display); line-height: .94; }
.intro { font-size: var(--type-intro); line-height: 1.07; }
.intro { color: var(--ink); max-width: 1440px; text-align: left; }
.intro p + p { color: inherit; margin-left: 0; margin-right: 0; max-width: none; }
.section-heading h2, .promise-copy h2 { font-size: var(--type-h2); line-height: .96; }
.lead, .promise-detail p { font-size: var(--type-body-lg); line-height: 1.32; }
.project span { font-size: var(--type-project); line-height: 1.15; }
.service h3 { font-size: var(--type-h3); line-height: 1; }
.service p { font-size: var(--type-body); line-height: 1.38; }
.contact h2 { font-size: clamp(4.5rem, 2.75rem + 7.3vw, 8.45rem); line-height: .9; }

/* Shared vertical rhythm for stacked copy and calls to action. */
.section-heading { gap: var(--space-4); }
.section-heading h2 { margin-bottom: var(--space-4); }
.lead { margin-top: 0; }
.service figure { margin-bottom: var(--space-4); }
.service h3 { margin-bottom: var(--space-2); }

/* A shared reading measure keeps every explanatory block visually aligned. */
.section-heading > div,
.promise-detail,
.service > div {
  width: min(100%, var(--copy-width));
}

/* Faculty Glyphic is reserved for the display hierarchy throughout the page. */
.section-heading h2,
.promise-copy h2,
.service h3,
.contact h2 {
  font-family: var(--serif);
}

/* The process is intentionally more compact than the project gallery. */
.service-grid {
  max-width: var(--process-width);
  padding-left: 0;
  padding-right: 0;
}

/* The process explanation is a feature block, not a narrow body-copy column. */
.promise-copy { margin-left: auto; margin-right: auto; max-width: var(--feature-copy-width); }
.promise-copy h2 { font-size: clamp(4rem, 3rem + 4vw, 6rem); margin-bottom: 0; }
.promise-detail { margin-top: var(--space-heading-copy); width: min(100%, var(--feature-copy-width)); }
.promise-detail p { margin-bottom: var(--space-copy-action); max-width: none; }
.promise-detail .button { min-width: 12.5rem; }

@media (max-width: 760px) {
  .section-heading > div,
  .promise-detail,
  .service > div { width: 100%; }
  .promise-detail { margin-top: var(--space-heading-copy); }
  .promise-detail p { margin-bottom: var(--space-copy-action); }
  .service-grid { max-width: none; padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 760px) { .hero { height: calc(100svh - 16px); margin: 8px; }.intro { padding-bottom: 125px; padding-top: 135px; }.project-grid { grid-template-columns: 1fr; }.promise { padding-bottom: 115px; padding-top: 115px; }.promise-copy h2 { font-size: 42px; }.service-grid { gap: 0; padding: 0 22px; }.service figure { height: 115vw; max-height: 510px; }.services { padding-bottom: 80px; } }