/* ==================================================================
   FONTS — self-hosted, no external requests

   Previously loaded from fonts.googleapis.com, which cost two DNS
   lookups plus a render-blocking third-party stylesheet before any
   text could paint.

   Files are Google's `latin` subset, then instanced down to the weight
   ranges actually used (252 KB -> 200 KB). Newsreader keeps its opsz
   axis on purpose: display type runs 75px-192px here and optical
   sizing is a real quality gain at that scale.

   NOTE: the old Google URL never requested a Newsreader italic, so
   every <em> was a browser-synthesised oblique. A real italic is now
   loaded.

   To change weights you must re-fetch and re-instance — these files no
   longer contain the full 200-800 range. See tools/README-fonts.md.
   ================================================================== */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url("assets/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/newsreader-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("assets/fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #1a1915;
  --ink-soft: #56534b;
  --paper: #f1eee7;
  --paper-light: #f8f6f1;
  --sand: #d8c9b3;
  --oak: #9b7959;
  --olive: #6d725f;
  --line: rgba(26, 25, 21, 0.19);
  --white: #fffdf9;
  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Manrope", Arial, sans-serif;
  --font-label: "DM Sans", Arial, sans-serif;
  --page: min(1360px, calc(100vw - 96px));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
}

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

body.is-loading .site-header,
body.is-loading .mobile-visit {
  opacity: 0;
}

::selection {
  background: var(--oak);
  color: var(--white);
}

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

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

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

button,
a {
  touch-action: manipulation;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--oak);
  outline-offset: 5px;
}

.skip-link {
  position: fixed;
  z-index: 3000;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  transform: translateY(-150%);
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
}

.skip-link:focus {
  transform: translateY(0);
}

.page-shell {
  width: var(--page);
  margin-inline: auto;
}

.section-pad {
  padding-block: 150px;
}

.loader {
  position: fixed;
  z-index: 2500;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 36px;
  background: var(--ink);
  color: var(--paper);
  transition:
    clip-path 1s var(--ease),
    visibility 0s 1s;
  clip-path: inset(0 0 0 0);
}

.loader.is-complete {
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
}

.loader__logo {
  width: min(360px, 68vw);
  height: auto;
}

.loader__rail {
  width: min(320px, 65vw);
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
}

.loader__rail span {
  display: block;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  background: var(--sand);
  animation: load-rail 1.25s var(--ease) forwards;
}

.loader p {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

@keyframes load-rail {
  to {
    transform: translateX(0);
  }
}

.scroll-progress {
  position: fixed;
  z-index: 1001;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.16);
  pointer-events: none;
  transition: background-color 240ms ease;
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--sand);
  box-shadow: 0 0 12px rgba(216, 201, 179, 0.45);
  transition:
    background-color 240ms ease,
    box-shadow 240ms ease;
}

.scroll-progress.is-scrolled {
  background: rgba(26, 25, 21, 0.13);
}

.scroll-progress.is-scrolled span {
  background: var(--oak);
  box-shadow: 0 0 10px rgba(155, 121, 89, 0.3);
}

.site-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: 96px;
  padding: 20px 48px;
  color: var(--white);
  transition:
    transform 420ms var(--ease),
    min-height 300ms ease,
    padding 300ms ease,
    color 300ms ease,
    background-color 300ms ease,
    opacity 300ms ease;
}

.site-header.is-scrolled {
  min-height: 64px;
  padding-block: 6px;
  background: rgba(248, 246, 241, 0.94);
  color: var(--ink);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 48px;
}

.brand__logo {
  position: relative;
  display: block;
  width: 178px;
  aspect-ratio: 1047 / 282;
  transition: width 300ms var(--ease);
}

.brand__logo-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  transition: opacity 240ms ease;
}

.brand__logo-image--dark {
  opacity: 0;
}

.site-header.is-scrolled .brand__logo {
  width: 146px;
}

.site-header.is-scrolled .brand__logo-image--light {
  opacity: 0;
}

.site-header.is-scrolled .brand__logo-image--dark {
  opacity: 1;
}

.site-header.menu-active .brand__logo-image--light {
  opacity: 1;
}

.site-header.menu-active .brand__logo-image--dark {
  opacity: 0;
}

.site-header.is-scrolled .desktop-nav {
  font-size: 0.66rem;
}

.site-header.is-scrolled .header-cta {
  min-height: 42px;
  padding-inline: 17px;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.desktop-nav a {
  position: relative;
  padding-block: 12px;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right;
  background: currentColor;
  content: "";
  transition: transform 260ms var(--ease);
}

.desktop-nav a::before {
  position: absolute;
  top: 50%;
  left: -12px;
  width: 4px;
  aspect-ratio: 1;
  transform: translateY(-50%) scale(0);
  border-radius: 50%;
  background: currentColor;
  content: "";
  opacity: 0.75;
  transition: transform 260ms var(--ease);
}

.desktop-nav a[aria-current="location"]::before {
  transform: translateY(-50%) scale(1);
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 12px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    background-color 240ms ease,
    color 240ms ease;
}

.header-cta svg,
.text-link svg,
.submit-button svg,
.mobile-visit svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
  transition: transform 250ms var(--ease);
}

.header-cta:hover {
  background: var(--white);
  color: var(--ink);
}

.site-header.is-scrolled .header-cta:hover {
  background: var(--ink);
  color: var(--white);
}

.header-cta:hover svg,
.text-link:hover svg,
.submit-button:hover svg {
  transform: translateX(4px);
}

.menu-button {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
}

.menu-button span {
  display: block;
  width: 24px;
  height: 1px;
  margin: 6px auto;
  background: currentColor;
  transition: transform 300ms var(--ease);
}

.menu-button[aria-expanded="true"] span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.menu-button[aria-expanded="true"] span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  z-index: 900;
  inset: 0;
  display: none;
  grid-template-rows: 1fr auto;
  padding: 140px 24px 40px;
  transform: translateY(-100%);
  background: var(--ink);
  color: var(--white);
  visibility: hidden;
  transition:
    transform 650ms var(--ease),
    visibility 0s 650ms;
}

.mobile-menu.is-open {
  transform: translateY(0);
  visibility: visible;
  transition:
    transform 650ms var(--ease),
    visibility 0s;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
}

.mobile-menu nav a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-block: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 13vw, 5rem);
  font-weight: 300;
  line-height: 1.1;
}

.mobile-menu nav span {
  font-family: var(--font-label);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  opacity: 0.5;
}

.mobile-menu > p {
  max-width: 320px;
  margin: 32px 0 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.75rem;
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}

.hero__media,
.hero__shade,
.hero__grain {
  position: absolute;
  inset: 0;
}

.hero__media {
  top: -8%;
  bottom: -8%;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  animation: hero-settle 2.2s var(--ease-out) 1.1s both;
}

@keyframes hero-settle {
  from {
    transform: scale(1.12);
  }
  to {
    transform: scale(1.04);
  }
}

.hero__shade {
  background:
    linear-gradient(90deg, rgba(12, 12, 10, 0.65) 0%, rgba(12, 12, 10, 0.24) 55%, rgba(12, 12, 10, 0.2) 100%),
    linear-gradient(0deg, rgba(12, 12, 10, 0.62) 0%, transparent 46%);
}

.hero__grain {
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding-top: 150px;
  padding-bottom: 56px;
}

.eyebrow {
  margin: 0;
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

.eyebrow--dark {
  color: var(--oak);
}

.hero__eyebrow {
  display: flex;
  justify-content: space-between;
  width: min(515px, 100%);
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.72);
}

.hero__eyebrow span {
  margin-left: 24px;
}

.hero__title {
  max-width: 1140px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(5.2rem, 11vw, 10.5rem);
  font-weight: 300;
  /* Same em-tracking problem as .visit__title — at this size -0.065em
     pulled glyphs ~9px past Newsreader's sidebearings. Matched to the
     display band used across the other headings. */
  letter-spacing: -0.035em;
  line-height: 0.78;
}

.hero__title .line-wrap {
  display: block;
  overflow: hidden;
  margin: -0.16em -0.08em -0.2em;
  padding: 0.16em 0.08em 0.2em;
}

.hero__title .line-wrap > span {
  display: block;
  transform: translateY(135%);
  animation: title-in 1.15s var(--ease-out) forwards;
}

.hero__title .line-wrap:nth-child(2) > span {
  padding-left: 10.5vw;
  animation-delay: 120ms;
}

.hero__title em,
.display-copy em,
.visit__title em {
  color: var(--sand);
  font-weight: 300;
}

@keyframes title-in {
  to {
    transform: translateY(0);
  }
}

.hero__footer {
  display: grid;
  grid-template-columns: minmax(280px, 430px) 1fr;
  align-items: end;
  gap: 9vw;
  margin-top: 42px;
  margin-left: 11vw;
}

.hero__footer p {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  width: fit-content;
  padding-block: 8px;
  border-bottom: 1px solid currentColor;
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.text-link--light {
  color: var(--white);
}

.text-link--light svg {
  transform: rotate(0);
}

.text-link--light:hover svg {
  transform: translateY(3px);
}

.hero__index {
  position: absolute;
  z-index: 2;
  right: 48px;
  bottom: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--font-label);
  font-size: 0.64rem;
}

.hero__index-line {
  width: 42px;
  height: 1px;
  background: rgba(255, 255, 255, 0.48);
}

.section-kicker {
  display: flex;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: var(--font-label);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.intro__grid {
  display: grid;
  grid-template-columns: 1.9fr 0.7fr;
  gap: 10vw;
  margin-top: 70px;
}

.display-copy {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 6.4vw, 6.5rem);
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.display-copy em {
  color: var(--oak);
}

.intro__copy {
  align-self: end;
  max-width: 440px;
}

.intro__copy p {
  margin: 0 0 30px;
  color: var(--ink-soft);
}

.work {
  padding: 150px 0 180px;
  background: var(--ink);
  color: var(--paper);
}

.work__heading,
.services__intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 64px;
  margin-bottom: 84px;
}

.section-title {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: clamp(4rem, 7.3vw, 7.5rem);
  font-weight: 300;
  letter-spacing: -0.06em;
  line-height: 0.88;
}

.work__note {
  max-width: 390px;
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.83rem;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 120px 32px;
}

.project-card {
  min-width: 0;
}

.project-card:nth-child(even) {
  padding-top: 110px;
}

.project-card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.1;
  background: #302e29;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 900ms var(--ease);
}

.project-card--wide .project-card__image {
  aspect-ratio: 1.35;
}

.project-card__image::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 9, 0.26));
  content: "";
  opacity: 0;
  transition: opacity 500ms ease;
}

.project-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.075);
  transition: transform 1100ms var(--ease);
}

.project-card.is-visible .project-card__image {
  clip-path: inset(0 0 0 0);
}

.project-card.is-visible .project-card__image img {
  transform: scale(1);
}

.project-card:hover .project-card__image img {
  transform: scale(1.045);
}

.project-card:hover .project-card__image::after {
  opacity: 1;
}

.project-card__view {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 24px;
  display: grid;
  place-content: center;
  width: 58px;
  aspect-ratio: 1;
  transform: translateY(18px);
  border-radius: 50%;
  background: var(--paper-light);
  color: var(--ink);
  opacity: 0;
  transition:
    opacity 350ms ease,
    transform 350ms var(--ease);
}

.project-card:hover .project-card__view {
  transform: translateY(0);
  opacity: 1;
}

.project-card__view svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.3;
}

.project-card__meta {
  display: flex;
  justify-content: space-between;
  padding-top: 22px;
}

.project-card__meta span {
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-label);
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.project-card__meta h3 {
  margin: 5px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 300;
  letter-spacing: -0.035em;
}

.statement {
  overflow: hidden;
  padding-block: 36px;
  border-block: 1px solid var(--line);
  background: var(--sand);
}

.statement__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 28s linear infinite;
}

.statement__track span {
  padding-inline: 40px;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.statement__track i {
  width: 9px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--oak);
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

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

.services__summary {
  max-width: 420px;
  margin: 0 0 10px;
  color: var(--ink-soft);
}

.service-list {
  border-top: 1px solid var(--line);
}

.service-row {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1.4fr 1fr 58px;
  align-items: center;
  gap: 32px;
  min-height: 148px;
  border-bottom: 1px solid var(--line);
  transition:
    color 380ms ease,
    padding 380ms var(--ease);
}

.service-row::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  transform: scaleY(0);
  transform-origin: bottom;
  background: var(--ink);
  content: "";
  transition: transform 420ms var(--ease);
}

.service-row:hover {
  padding-inline: 24px;
  color: var(--paper);
}

.service-row:hover::before {
  transform: scaleY(1);
}

.service-row > * {
  position: relative;
  z-index: 1;
}

.service-row__number {
  color: var(--oak);
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

.service-row h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 3.6rem);
  font-weight: 300;
  letter-spacing: -0.04em;
}

.service-row p {
  max-width: 440px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  transition: color 380ms ease;
}

.service-row:hover p {
  color: rgba(255, 255, 255, 0.65);
}

.service-row__icon {
  display: grid;
  place-content: center;
  width: 54px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.service-row__icon svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.4;
}

.service-preview {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  width: 310px;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(0.88);
  opacity: 0;
  will-change: transform;
  transition:
    opacity 220ms ease,
    transform 420ms var(--ease);
}

.service-preview.is-visible {
  transform: translate3d(-50%, -50%, 0) scale(1);
  opacity: 1;
}

.service-preview__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.18;
  border: 8px solid var(--paper-light);
  background: var(--ink);
  box-shadow: 0 24px 70px rgba(29, 27, 22, 0.22);
}

.service-preview__frame::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(15, 14, 12, 0.62));
  content: "";
}

.service-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
}

.service-preview span {
  position: absolute;
  z-index: 1;
  right: 16px;
  bottom: 14px;
  left: 16px;
  color: var(--white);
  font-family: var(--font-label);
  font-size: 0.58rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.process {
  display: grid;
  grid-template-columns: 1.03fr 0.97fr;
  min-height: 940px;
  background: var(--ink);
  color: var(--paper);
}

.process__media {
  position: relative;
  min-height: 750px;
  overflow: hidden;
}

.process__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 65%, rgba(24, 23, 18, 0.42));
  content: "";
}

.process__media img {
  width: 100%;
  height: 116%;
  object-fit: cover;
}

.process__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 7vw;
}

.process__content > .eyebrow {
  color: var(--sand);
}

.process-steps {
  margin: 70px 0 0;
  padding: 0;
  list-style: none;
}

.process-steps li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 30px;
  padding-block: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.17);
}

.process-steps li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.17);
}

.process-steps > li > span {
  padding-top: 5px;
  color: var(--sand);
  font-family: var(--font-label);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
}

.process-steps h3 {
  margin: 0 0 7px;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 300;
}

.process-steps p {
  max-width: 490px;
  margin: 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.83rem;
}

.about__grid {
  display: grid;
  grid-template-columns: 1.55fr 0.65fr;
  gap: 80px 9vw;
}

.about__copy {
  align-self: end;
}

.about__copy p {
  margin: 0 0 22px;
  color: var(--ink-soft);
}

.about__stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat {
  padding: 44px 32px 44px 0;
  border-right: 1px solid var(--line);
}

.stat:not(:first-child) {
  padding-left: 42px;
}

.stat:last-child {
  border-right: 0;
}

.stat strong,
.stat > span {
  font-family: var(--font-display);
  font-size: clamp(4rem, 7vw, 7rem);
  font-weight: 300;
  letter-spacing: -0.06em;
  line-height: 1;
}

.stat > span {
  color: var(--oak);
}

.stat p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.visit {
  padding: 150px 0 100px;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}

.visit__heading {
  padding-bottom: 100px;
}

.visit__heading .eyebrow {
  color: var(--sand);
}

.visit__title {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: clamp(5.6rem, 11.3vw, 12rem);
  font-weight: 300;
  /* Tracking is em-based, so the same value bites much harder at this
     size than on the smaller headings. -0.07em crushed glyphs ~10px past
     Newsreader's own sidebearings and collided "wh", "at" and the "t'"
     apostrophe. -0.035em keeps the editorial density while landing in the
     same optical band as .section-title and .display-copy. */
  letter-spacing: -0.035em;
  /* 0.75 left the ascenders of the italic line overlapping the line
     above by ~3.5px of actual ink. */
  line-height: 0.85;
}

.visit__title br + em {
  padding-left: 12vw;
}

.visit__grid {
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: 9vw;
  padding-top: 80px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.visit__aside > p:first-child {
  max-width: 390px;
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
}

.visit__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 50px;
}

.visit__contact > span,
.visit__contact small {
  color: rgba(255, 255, 255, 0.43);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.visit__contact a {
  margin-block: 5px;
  border-bottom: 1px solid currentColor;
  font-family: var(--font-display);
  font-size: 1.8rem;
}

.visit__area {
  margin: 72px 0 0;
  color: rgba(255, 255, 255, 0.48);
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  line-height: 1.9;
  text-transform: uppercase;
}

.inquiry-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 28px;
}

.form-status,
.project-types,
.field:not(.field--half),
.form-consent {
  grid-column: 1 / -1;
}

.form-status {
  display: none;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
}

.form-status::before {
  display: inline-grid;
  place-content: center;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
  vertical-align: middle;
}

.form-status.is-success::before {
  content: "✓";
  font-size: 0.7rem;
}

.form-status.is-error::before {
  content: "!";
  font-size: 0.7rem;
}

.form-status.is-visible {
  display: block;
}

.form-status.is-success {
  border-color: #9bad85;
  color: #c8d4b9;
}

.form-status.is-error {
  border-color: #c88a7d;
  color: #e9b7ad;
}
/* The failure message carries a tel: link. Without this it renders as
   default browser blue against the salmon error state. */
.form-status a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}
.form-status a:hover,
.form-status a:focus-visible {
  text-decoration-thickness: 2px;
}

.field {
  position: relative;
}

.field label,
.project-types legend {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-label);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.field label span,
.project-types legend span {
  color: var(--sand);
}

.field input,
.field textarea {
  width: 100%;
  min-height: 58px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.5rem;
  resize: vertical;
}

.field textarea {
  min-height: 110px;
}

.field__line {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--sand);
  transition: transform 350ms var(--ease);
}

.field input:focus + .field__line,
.field textarea:focus + .field__line {
  transform: scaleX(1);
}

.field.has-error input,
.field.has-error textarea {
  border-color: #c88a7d;
}

.field__error,
.project-types__error {
  display: block;
  min-height: 18px;
  padding-top: 5px;
  color: #e9b7ad;
  font-size: 0.7rem;
}

.project-types {
  margin: 15px 0 0;
  padding: 0;
  border: 0;
}

.project-types__options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.project-types__options label {
  cursor: pointer;
}

.project-types__options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.project-types__options span {
  display: inline-flex;
  align-items: center;
  min-height: 47px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.75rem;
  transition:
    border-color 220ms ease,
    background-color 220ms ease,
    color 220ms ease;
}

.project-types__options input:checked + span {
  border-color: var(--sand);
  background: var(--sand);
  color: var(--ink);
}

.project-types__options input:focus-visible + span {
  outline: 2px solid var(--sand);
  outline-offset: 4px;
}

.form-consent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 6px;
}

.form-consent p {
  max-width: 420px;
  margin: 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.68rem;
}

.submit-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-width: 220px;
  min-height: 62px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    background-color 220ms ease,
    opacity 220ms ease;
}

.submit-button::after {
  display: none;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(26, 25, 21, 0.34);
  border-top-color: var(--ink);
  border-radius: 50%;
  content: "";
  animation: button-spin 700ms linear infinite;
}

.submit-button.is-loading svg {
  display: none;
}

.submit-button.is-loading::after {
  display: block;
}

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

.submit-button:hover {
  background: var(--paper-light);
}

.submit-button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.site-footer {
  padding: 80px 0 30px;
  background: #11110e;
  color: var(--paper);
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 180px;
  padding-bottom: 60px;
}

.footer__logo {
  width: min(240px, 30vw);
  height: auto;
}

.footer__top > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.48);
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.4;
  text-align: center;
}

.footer__up {
  display: grid;
  place-content: center;
  justify-self: end;
  width: 62px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transition:
    background-color 220ms ease,
    color 220ms ease;
}

.footer__up:hover {
  background: var(--paper);
  color: var(--ink);
}

.footer__up svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.4;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer__bottom a {
  color: var(--paper);
}

.mobile-visit {
  position: fixed;
  z-index: 700;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 16px;
  display: none;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  box-shadow: 0 14px 40px rgba(20, 19, 16, 0.2);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.reveal,
.reveal-card {
  transform: translateY(38px);
  opacity: 0;
  transition:
    transform 900ms var(--ease),
    opacity 700ms ease;
}

.reveal-card {
  transform: translateY(70px);
  transition-duration: 1.1s;
}

.reveal.is-visible,
.reveal-card.is-visible {
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 1100px) {
  :root {
    --page: min(100% - 48px, 1100px);
  }

  .site-header {
    padding-inline: 24px;
  }

  .desktop-nav {
    gap: 20px;
  }

  .hero__index {
    right: 24px;
  }

  .intro__grid,
  .about__grid {
    gap: 64px;
  }

  .process__content {
    padding-inline: 5vw;
  }

  .service-row {
    grid-template-columns: 50px 1.2fr 1fr 54px;
    gap: 22px;
  }

  .service-preview {
    display: none;
  }
}

@media (max-width: 820px) {
  :root {
    --page: calc(100% - 40px);
  }

  .section-pad {
    padding-block: 100px;
  }

  .site-header {
    grid-template-columns: 1fr auto;
    min-height: 76px;
    padding: 12px 20px;
  }

  .site-header.is-scrolled {
    min-height: 64px;
    padding: 7px 20px;
  }

  .brand__logo {
    width: 146px;
  }

  .site-header.is-scrolled .brand__logo {
    width: 124px;
  }

  .site-header.menu-active {
    color: var(--white);
    background: transparent;
    backdrop-filter: none;
  }

  .desktop-nav,
  .header-cta {
    display: none;
  }

  .menu-button,
  .mobile-menu {
    display: block;
  }

  .hero__content {
    padding-top: 120px;
    padding-bottom: 90px;
  }

  .hero__title {
    font-size: clamp(4.2rem, 18vw, 7.2rem);
  }

  .hero__title .line-wrap:nth-child(2) > span {
    padding-left: 0;
  }

  .hero__footer {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 30px;
    margin-left: 0;
  }

  .hero__footer p {
    max-width: 420px;
  }

  .hero__index {
    display: none;
  }

  .intro__grid,
  .about__grid {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .display-copy {
    font-size: clamp(3.4rem, 12vw, 5.8rem);
  }

  .work {
    padding-block: 100px 120px;
  }

  .work__heading,
  .services__intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 34px;
    margin-bottom: 60px;
  }

  .section-title {
    font-size: clamp(3.7rem, 13vw, 6rem);
  }

  .project-grid {
    gap: 80px 20px;
  }

  .project-card:nth-child(even) {
    padding-top: 70px;
  }

  .service-row {
    grid-template-columns: 42px 1fr 54px;
    min-height: 125px;
  }

  .service-row p {
    display: none;
  }

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

  .process__media {
    min-height: 68svh;
  }

  .process__content {
    padding: 90px 24px 110px;
  }

  .about__stats {
    margin-top: 0;
  }

  .visit {
    padding-top: 110px;
  }

  .visit__title {
    font-size: clamp(5rem, 17vw, 9rem);
  }

  .visit__title br + em {
    padding-left: 0;
  }

  .visit__grid {
    grid-template-columns: 1fr;
    gap: 75px;
  }

  .visit__aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .visit__contact,
  .visit__area {
    margin-top: 0;
  }

  .visit__area {
    grid-column: 2;
  }

  .footer__bottom {
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  :root {
    --page: calc(100% - 32px);
  }

  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .section-pad {
    padding-block: 82px;
  }

  .hero__shade {
    background:
      linear-gradient(90deg, rgba(12, 12, 10, 0.58), rgba(12, 12, 10, 0.1)),
      linear-gradient(0deg, rgba(12, 12, 10, 0.78) 0%, rgba(12, 12, 10, 0.12) 70%);
  }

  .hero__media img {
    object-position: 58% center;
  }

  .hero__eyebrow {
    flex-direction: column;
    gap: 4px;
  }

  .hero__eyebrow span {
    margin-left: 0;
  }

  .hero__title {
    font-size: clamp(4rem, 19vw, 6rem);
    line-height: 0.83;
  }

  .hero__footer {
    margin-top: 20px;
  }

  .hero__footer p {
    max-width: 320px;
    font-size: 0.88rem;
  }

  .section-kicker span:last-child {
    display: none;
  }

  .intro__grid {
    margin-top: 45px;
  }

  .display-copy {
    font-size: clamp(3rem, 14vw, 4.5rem);
  }

  .project-grid {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .project-card:nth-child(even) {
    padding-top: 0;
  }

  .project-card__image,
  .project-card--wide .project-card__image {
    aspect-ratio: 0.93;
  }

  .project-card__view {
    right: 16px;
    bottom: 16px;
    width: 50px;
    transform: none;
    opacity: 1;
  }

  .statement {
    padding-block: 24px;
  }

  .service-row {
    grid-template-columns: 32px 1fr 44px;
    gap: 10px;
    min-height: 104px;
  }

  .service-row h3 {
    font-size: 1.85rem;
    line-height: 1;
  }

  .service-row__icon {
    width: 42px;
  }

  .process__media {
    min-height: 72svh;
  }

  .process__media img {
    object-position: 46% center;
  }

  .process__content {
    padding-inline: 16px;
  }

  .process-steps {
    margin-top: 50px;
  }

  .process-steps li {
    grid-template-columns: 34px 1fr;
    gap: 15px;
  }

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

  .stat,
  .stat:not(:first-child) {
    padding: 30px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .stat:last-child {
    border-bottom: 0;
  }

  .visit__heading {
    padding-bottom: 68px;
  }

  .visit__title {
    font-size: clamp(4.5rem, 20vw, 6.5rem);
    /* line-height intentionally not overridden — the base 0.85 is what
       keeps the italic line clear of the one above. At this breakpoint
       the italic is no longer indented, so the lines stack directly and
       the tighter 0.8 collided. */
  }

  .visit__grid {
    padding-top: 55px;
  }

  .visit__aside {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .visit__area {
    grid-column: auto;
  }

  .inquiry-form {
    grid-template-columns: 1fr;
  }

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

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

  .submit-button {
    width: 100%;
  }

  .footer__top {
    grid-template-columns: 1fr auto;
    min-height: 120px;
  }

  .footer__logo {
    width: 190px;
  }

  .footer__top > p {
    display: none;
  }

  .footer__bottom {
    flex-direction: column;
  }

  .mobile-visit {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .reveal-card {
    transform: none;
    opacity: 1;
  }
}