@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ground: #101112;
  --deep: #000;
  --raise: #191a1c;
  --ink: #fff;
  --soft: #c9caca;
  --mid: #8f9193;
  --line: #303234;
  --field: #6b6d6f;
  --gut: clamp(18px, 4.4vw, 68px);
  --header: 82px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--line) var(--ground);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}

::selection { background: var(--ink); color: var(--deep); }

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 { font-weight: 500; text-wrap: balance; }
h1 { font-size: clamp(45px, 7vw, 96px); line-height: 1; letter-spacing: -.034em; }
h2 { font-size: clamp(30px, 3.7vw, 54px); line-height: 1.08; letter-spacing: -.025em; }
h3 { font-size: clamp(24px, 2.3vw, 34px); line-height: 1.14; letter-spacing: -.018em; }
p { max-width: 64ch; text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 60;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--deep);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Header */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  min-height: var(--header);
  padding: 12px var(--gut);
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s;
}
.site-header.is-solid, .site-header.is-open {
  min-height: 68px;
  background: var(--deep);
  border-bottom-color: var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; }
.brand svg, .brand img { width: 52px; height: auto; color: var(--ink); }
.is-solid .brand img, .is-open .brand img { width: 44px; }
.brand-name {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.site-nav { display: flex; gap: clamp(20px, 2.6vw, 38px); }
.site-nav a, .header-phone { font-size: 16px; font-weight: 500; }
.site-nav a {
  color: var(--soft);
  padding: 6px 0;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: color .2s, background-size .35s var(--ease);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); background-size: 100% 1px; }
.header-phone { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-toggle span { display: block; height: 2px; background: var(--ink); transition: transform .3s var(--ease); }
.menu-toggle span + span { margin-top: 8px; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 68px 0 0;
  z-index: 39;
  display: flex;
  flex-direction: column;
  padding: 18px var(--gut) 30px;
  background: var(--deep);
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a:not(.btn) {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.02em;
}
.mobile-menu .btn { margin-top: auto; }

/* Buttons and links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 14px 26px;
  background: var(--ink);
  color: var(--deep);
  border: 1px solid var(--ink);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.arrow { width: 20px; height: 12px; transition: transform .35s var(--ease); }
a:hover > .arrow, button:hover > .arrow { transform: translateX(5px); }

/* Home hero */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: max(640px, 100svh);
  background: var(--deep);
  overflow: hidden;
}
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 60%;
  opacity: .82;
  animation: settle 2.4s var(--ease) both;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .62) 0, rgba(0, 0, 0, .08) 26%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .94) 92%);
}
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
.hero-copy { position: relative; z-index: 1; margin-top: auto; padding: 0 var(--gut) 30px; }
.hero-copy h1 { max-width: 11.5em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 26px; }
.hero-facts {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255, .28);
}
.hero-facts div { padding: 18px var(--gut); border-right: 1px solid rgba(255, 255, 255, .28); }
.hero-facts div:last-child { border-right: 0; }
.hero-facts dt { color: var(--soft); font-size: 14px; }
.hero-facts dd { font-size: clamp(16px, 1.45vw, 20px); font-weight: 600; line-height: 1.3; text-wrap: balance; }

/* Page intro */

.page-intro { padding: calc(var(--header) + clamp(44px, 7vw, 96px)) var(--gut) clamp(44px, 6vw, 84px); }
.page-intro p { margin-top: 22px; color: var(--soft); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.42; max-width: 42ch; }
.page-intro + .section { padding-top: 0; }
.page-image { width: 100%; height: clamp(300px, 52vw, 720px); object-fit: cover; }

/* Sections */

.section { padding: clamp(60px, 8.5vw, 124px) var(--gut); }
.section + .section { padding-top: 0; }

.scope { display: grid; gap: 44px; }
.scope-lede p { margin: 20px 0 26px; color: var(--soft); }

.stages { position: relative; padding-left: 30px; }
.stages::before, .services-list::before, .rail-fill {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  width: 2px;
  background: var(--line);
}
.rail-fill {
  background: var(--ink);
  transform: scaleY(var(--progress, 1));
  transform-origin: top;
}
.stage { position: relative; border-top: 1px solid var(--line); }
.stage:last-child { border-bottom: 1px solid var(--line); }
.stage::before {
  content: "";
  position: absolute;
  top: 24px;
  left: -30px;
  width: 12px;
  height: 12px;
  background: var(--ink);
  transition: background-color .3s;
}
.stage > a, .stage > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 15px 0;
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 500;
  letter-spacing: -.012em;
  transition: color .3s;
}
.stage-name { display: inline-block; transition: color .3s, transform .35s var(--ease); }
.stage > a:hover .stage-name { transform: translateX(10px); }
.stage-no { color: var(--mid); font-size: 14px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
[data-rail].is-live .stage:not(.is-reached) > a, [data-rail].is-live .stage:not(.is-reached) .stage-name { color: var(--mid); }
[data-rail].is-live .stage:not(.is-reached)::before { background: var(--line); }
.rail-end {
  display: block;
  padding: 10px 0;
  color: var(--soft);
  font-size: 16px;
  font-weight: 600;
}

.bleed { position: relative; background: var(--deep); }
.bleed img { width: 100%; height: clamp(360px, 46vw, 760px); object-fit: cover; object-position: 60% 42%; }

.statement { display: grid; gap: 22px; }
.statement p { color: var(--soft); }

.split { display: grid; gap: 34px; align-items: center; }
.split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 44% 50%; }
.split p { margin-top: 20px; color: var(--soft); }
.split .link { margin-top: 24px; }

.audiences { display: grid; border-top: 1px solid var(--line); }
.audience { padding: 34px 0; }
.audience + .audience { border-top: 1px solid var(--line); }
.audience p { margin: 14px 0 22px; color: var(--soft); }

/* Close */

.close { padding: clamp(60px, 8vw, 116px) var(--gut); background: var(--raise); }
.close-grid { display: grid; gap: 34px; align-items: end; }
.close p { margin-top: 16px; color: var(--soft); }
.close-phone {
  display: block;
  font-size: clamp(38px, 6.6vw, 96px);
  font-weight: 500;
  letter-spacing: -.034em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.close-actions { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 24px; }

/* Services page */

.service { display: grid; gap: 10px; padding: 26px 0; scroll-margin-top: 90px; border-top: 1px solid var(--line); }
.services-list .service:last-of-type { border-bottom: 1px solid var(--line); }
.service::before {
  content: "";
  position: absolute;
  top: 36px;
  left: -30px;
  width: 12px;
  height: 12px;
  background: var(--ink);
  transition: background-color .3s;
}
.services-list { position: relative; padding-left: 30px; }
.service { position: relative; }
.service .stage-no { display: block; margin-bottom: 4px; }
.service p { color: var(--soft); }
[data-rail].is-live .service:not(.is-reached) h2 { color: var(--mid); }
[data-rail].is-live .service:not(.is-reached)::before { background: var(--line); }
.service h2 { font-size: clamp(28px, 3.1vw, 46px); transition: color .3s; }

/* Projects page */

.gallery { display: grid; gap: clamp(14px, 1.6vw, 24px); padding: 0 var(--gut) clamp(60px, 8vw, 116px); }
.gallery figure { min-width: 0; }
.gallery img, .gallery video { width: 100%; height: 100%; object-fit: cover; background: var(--raise); }
.gallery figcaption { margin-top: 8px; color: var(--mid); font-size: 15px; }
.frame { overflow: hidden; }

/* About page */

.facts-table { border-top: 1px solid var(--line); }
.facts-table div { display: flex; justify-content: space-between; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.facts-table dt { font-size: clamp(19px, 1.9vw, 26px); font-weight: 500; letter-spacing: -.012em; }
.facts-table dd { color: var(--soft); align-self: center; text-align: right; }

/* Contact page */

.contact-grid { display: grid; gap: 52px; }
.contact-direct dl { border-top: 1px solid var(--line); }
.contact-direct dl div { padding: 15px 0; border-bottom: 1px solid var(--line); }
.contact-direct dt { color: var(--mid); font-size: 14px; }
.contact-direct dd { font-size: clamp(19px, 1.8vw, 24px); font-weight: 500; overflow-wrap: anywhere; }
.contact-direct dd a { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.contact-direct dd a:hover { background-size: 100% 1px; }
.contact-direct > p { margin-top: 22px; color: var(--soft); }

.quote-form { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--field); scroll-margin-top: 90px; }
.field { display: flex; flex-direction: column; gap: 4px; padding: 13px 0 12px; border-bottom: 1px solid var(--field); transition: border-color .2s; }
.field:focus-within { border-bottom-color: var(--ink); }
.field label { color: var(--soft); font-size: 15px; }
.field label i { color: var(--mid); font-style: normal; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 3px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  font-size: 20px;
  caret-color: var(--ink);
}
.field select { appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") right center / 14px 8px no-repeat; }
.field select option { background: var(--raise); color: var(--ink); }
.field textarea { min-height: 120px; resize: vertical; line-height: 1.4; }
.field input::placeholder, .field textarea::placeholder { color: var(--mid); opacity: 1; }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 40px var(--ground) inset; }
.field .error { display: none; color: var(--ink); font-size: 15px; font-weight: 600; }
.field.has-error { border-bottom: 2px solid var(--ink); }
.field.has-error .error { display: block; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 26px; }
.form-note { color: var(--mid); font-size: 15px; max-width: 34ch; }
.form-status { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line); color: var(--soft); }
.form-status[hidden] { display: none; }
.form-status a { color: var(--ink); font-weight: 600; }

/* Footer */

.site-footer { padding: clamp(44px, 5vw, 70px) var(--gut) 30px; background: var(--deep); }
.footer-grid { display: grid; gap: 34px; }
.footer-grid .brand img { width: 66px; }
.footer-grid nav ul, .footer-grid address { display: grid; gap: 7px; color: var(--soft); font-style: normal; }
.footer-grid a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.footer-title { display: block; margin-bottom: 8px; color: var(--mid); font-size: 14px; }
.footer-base { display: flex; flex-wrap: wrap; gap: 6px 32px; max-width: none; margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--mid); font-size: 14px; }

/* Phone call bar */

.callbar {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  display: none;
  grid-template-columns: 1fr 1fr;
  background: var(--deep);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(101%);
  transition: transform .4s var(--ease);
}
.callbar.is-shown { transform: none; }
.callbar a { display: flex; align-items: center; justify-content: center; min-height: 58px; font-weight: 700; }
.callbar a + a { background: var(--ink); color: var(--deep); }

@media (min-width: 900px) {
  .scope { grid-template-columns: 5fr 6fr; gap: 64px; }
  .scope-lede { position: sticky; top: 110px; align-self: start; }
  .statement { grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; }
  .split { grid-template-columns: 7fr 5fr; gap: 64px; }
  .split.reverse img { order: 2; }
  .audiences { grid-template-columns: 7fr 5fr; }
  .audience { padding: 44px 64px 44px 0; }
  .audience + .audience { padding: 44px 0 44px 64px; border-top: 0; border-left: 1px solid var(--line); }
  .close-grid { grid-template-columns: 1fr auto; gap: 64px; }
  .service { grid-template-columns: 76px 5fr 6fr; gap: 24px; align-items: baseline; padding: 32px 0; }
  .service::before { top: 49px; }
  .service .stage-no { margin: 0; }
  .contact-grid { grid-template-columns: 5fr 7fr; gap: 80px; }
  .quote-form { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .field-wide { grid-column: 1 / -1; }
  .gallery { grid-template-columns: repeat(12, 1fr); }
  .g-12 { grid-column: span 12; }
  .g-8 { grid-column: span 8; }
  .g-7 { grid-column: span 7; }
  .g-5 { grid-column: span 5; }
  .g-4 { grid-column: span 4; }
  .g-12 .frame { aspect-ratio: 21 / 10; }
  .g-row .frame { aspect-ratio: auto; height: clamp(320px, 38vw, 620px); }
  .footer-grid { grid-template-columns: 5fr 2fr 3fr; }
}

@media (max-width: 1040px) {
  .site-nav, .header-phone-wide { display: none; }
  .menu-toggle { display: block; }
}

@media (max-width: 899px) {
  :root { --header: 74px; }
  body { padding-bottom: 58px; }
  .brand img { width: 46px; }
  .brand-name { font-size: 11.5px; }
  .header-phone { font-size: 15px; }
  .hero { min-height: max(720px, 100svh); }
  .hero-image { height: 66%; object-position: 64% 60%; }
  .hero::after { background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .05) 20%, rgba(0, 0, 0, .25) 40%, #000 66%); }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-actions .link { display: none; }
  .hero-facts { grid-template-columns: 1fr; }
  .hero-facts div { padding: 12px var(--gut); border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .28); }
  .hero-facts div:last-child { border-bottom: 0; }
  .btn-block-sm { width: 100%; }
  .callbar { display: grid; }
  .gallery figure + figure { margin-top: 12px; }
  .service { grid-template-columns: 1fr auto; gap: 8px 16px; align-items: baseline; }
  .service h2 { grid-column: 1; grid-row: 1; }
  .service .stage-no { grid-column: 2; grid-row: 1; margin: 0; }
  .service p { grid-column: 1 / -1; }
  .frame { aspect-ratio: 4 / 3; }
  .frame.tall { aspect-ratio: 4 / 5; }
}

@media (max-width: 370px) {
  .brand-name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

@media print {
  .site-header, .callbar, .mobile-menu { display: none; }
  body { background: #fff; color: #000; }
}