/* Every size here was measured off the rendered original at 2560, 1440, 1024,
   810 and 390 with scripts/../ab-compare.mjs, not read off a design. The two
   breakpoints are 1200 and 810, which is what the theme used. */

:root {
  --white: #FFFFFF;
  --cream: #F2EFEB;
  --warm-grey: #DEDAD0;
  --maroon: #340C0C;
  --red: #B00D13;
  --grey-brown: #503916;

  --ink: #080808;
  --ink-soft: #0F0E0D;
  --label: #8F8B85;
  --muted: #666666;
  --footer-muted: #A09C97;
  --rule: rgba(115, 115, 114, .2);
  --overlay: rgba(52, 12, 12, .9);

  --shell: 1920px;
  --gutter: 40px;
  --header-h: 76px;
  --stack: 60px;

  --fs-h1: 92px;
  --fs-h2: 62px;
  --fs-h3: 40px;
  --fs-metric: 42px;
  --fs-intro: 23px;

  --grid-gap: 80px 20px;
  --service-gap: 32px;
  --cols-service: 4;
  --cols-team: 4;
  --cols-track: 4;
  --cols-reach: 4;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 1199px) {
  :root {
    --fs-h1: 56px; --fs-h2: 48px; --fs-h3: 32px;
    --gutter: 32px; --stack: 48px; --service-gap: 24px;
    --cols-team: 3; --cols-track: 2; --cols-reach: 2;
  }
}
@media (max-width: 809px) {
  :root {
    --fs-h1: 40px; --fs-h2: 38px; --fs-h3: 28px;
    --fs-metric: 34px; --fs-intro: 18px;
    --gutter: 20px; --header-h: 72px; --stack: 40px;
    --cols-service: 1; --cols-team: 2; --cols-track: 1; --cols-reach: 1;
  }
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ---------- entry animations ---------- */

/* Content is visible by default and the animation is opt-in. Hiding it in CSS
   and revealing it with JavaScript means any failure to run that script leaves
   a page with a header, a photo and nothing else. */
html.js-reveal .reveal { opacity: 0; transform: translateY(24px); }
html.js-reveal .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js-reveal .reveal, html.js-reveal .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .btn__arrow { transition: none; }
  .hero__bg img { animation: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- header ---------- */

/* The bar runs the full width of the viewport with its own 40px gutter. It is
   not held to the content container, which is why it stays at the screen edges
   on a wide monitor while the content below centres at 1920. */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h);
  transition: background-color .3s var(--ease);
}
/* The theme slid the bar out of view on scroll and never gave it a background,
   which left cream links invisible over the white sections. It stays put and
   takes the maroon instead. */
.header.is-stuck { background: var(--maroon); }
.header__inner {
  height: 100%; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gutter);
}
.header__left { display: flex; align-items: center; gap: 56px; }
.header__logo img { height: 30px; width: auto; }
.header__logo .logo--dark { display: none; }

/* A page with no hero puts the header over white, so the mark, the links and
   the burger all invert. Scrolling brings the maroon back and they revert. */
.page--light .header:not(.is-stuck) .logo--light { display: none; }
.page--light .header:not(.is-stuck) .logo--dark { display: block; }
.page--light .header:not(.is-stuck) .nav a { color: var(--ink); }
.page--light .header:not(.is-stuck) .nav a::after { background: var(--ink); }
.page--light .header:not(.is-stuck) .burger span { background: var(--ink); }
.page--light .header:not(.is-stuck) .btn { background: var(--ink); color: var(--cream); }

.nav { display: flex; align-items: center; gap: 34px; }
.nav a {
  font-size: 14px; font-weight: 500; letter-spacing: .84px;
  text-transform: uppercase; color: var(--cream);
  padding: 4px 0; position: relative; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--cream); transition: right .3s var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after { right: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 13px 16px 12px; border-radius: 4px;
  background: var(--cream); color: var(--ink-soft);
  font-size: 16px; font-weight: 300; line-height: 1.3;
  border: 1px solid transparent; white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.btn__arrows {
  position: relative; width: 15px; height: 15px; flex: none; overflow: hidden;
}
.btn__arrow {
  position: absolute; top: 3px; left: 3px; width: 9px; height: 9px;
  transition: transform .42s var(--ease);
}
.btn__arrow svg { width: 100%; height: 100%; display: block; }
.btn__arrow--next { transform: translate(-13px, 13px); }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translate(13px, -13px); }
.btn:hover .btn__arrow--next, .btn:focus-visible .btn__arrow--next { transform: none; }

.burger {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.burger span {
  display: block; width: 24px; height: 1.5px; margin: 5px auto;
  background: var(--cream); transition: transform .3s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 45;
  background: var(--maroon); color: var(--cream);
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: var(--header-h) var(--gutter) 40px;
  transform: translateY(-100%); visibility: hidden; pointer-events: none;
  transition: transform .4s var(--ease), visibility 0s linear .4s;
}
.mobile-nav.is-open {
  transform: none; visibility: visible; pointer-events: auto;
  transition: transform .4s var(--ease), visibility 0s;
}
.mobile-nav a {
  font-size: 30px; font-weight: 300; letter-spacing: -.3px;
  padding: 12px 0; border-bottom: 1px solid rgba(242, 239, 235, .14);
}

@media (max-width: 1199px) {
  .nav, .header .btn { display: none; }
  .burger { display: block; }
}

/* ---------- hero ---------- */

.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 700px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cream); overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
  animation: hero-zoom 2s var(--ease) both;
}
@keyframes hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: rgb(8, 8, 8); opacity: .3; mix-blend-mode: darken;
}
.hero .shell {
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding: 20px var(--gutter);
}
.hero__sub {
  font-size: 24px; font-weight: 300; letter-spacing: 4.32px;
  text-transform: uppercase; margin: 0; color: var(--cream);
}
.hero h1 {
  font-size: var(--fs-h1); font-weight: 400; line-height: 1.2;
  letter-spacing: -.01em; margin: 0; max-width: 20ch; text-wrap: balance;
}
@media (max-width: 1199px) { .hero__sub { font-size: 17px; letter-spacing: 3px; } }
@media (max-width: 809px)  { .hero { min-height: 600px; } .hero__sub { font-size: 14px; letter-spacing: 2.2px; } }

/* ---------- section furniture ---------- */

.section--white { background: var(--white); }
.section--cream { background: var(--cream); }
.section--warm { background: var(--warm-grey); }
.section--maroon { background: var(--maroon); color: var(--cream); }

/* Padding differs per section on the original and is the same at every width. */
.section--welcome { padding: 68px 0 100px; }
.section--services { padding: 68px 0 124px; }
.section--team { padding: 68px 0 60px; }
.section--track { padding: 68px 0 120px; }
.section--reach { padding: 68px 0 0; }

.section__stack { display: flex; flex-direction: column; gap: var(--stack); }
/* The label sits under a hairline and the heading is the next item in the
   60px stack, not grouped with it. */
.section__eyebrow { border-top: 1px solid var(--rule); padding-top: 30px; }

.eyebrow {
  font-size: 15px; font-weight: 300; letter-spacing: .3px;
  text-transform: uppercase; color: var(--label); margin: 0;
}
.section h2 {
  font-size: var(--fs-h2); font-weight: 400; line-height: 1.2;
  letter-spacing: -.01em; margin: 0; max-width: 20ch;
}

/* ---------- section 1, welcome ---------- */

.welcome { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; padding-top: 40px; }
.welcome__intro { font-size: var(--fs-intro); font-weight: 300; line-height: 1.46; margin: 0; }
.welcome__figure { margin: 0; }
.welcome__figure img { width: 100%; height: 420px; object-fit: cover; }
@media (max-width: 809px) { .welcome { grid-template-columns: 1fr; gap: 40px; } }

.metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  padding-top: 60px;
}
.metric__amount {
  display: block; font-size: var(--fs-metric); font-weight: 400;
  line-height: 1.3; letter-spacing: -.01em; margin-bottom: 12px;
}
.metric { padding: 0 20px 10px 0; }
.metric__title {
  font-size: 15px; font-weight: 300; letter-spacing: .3px;
  text-transform: uppercase; color: var(--label); margin: 0;
}
@media (max-width: 809px) { .metrics { grid-template-columns: repeat(2, 1fr); gap: 32px 18px; } }

/* ---------- section 2, services ---------- */

.services {
  display: grid; grid-template-columns: repeat(var(--cols-service), 1fr);
  gap: var(--service-gap);
}
/* Landscape photo, a hairline, then the title in ink underneath. The theme's
   original overlaid the title on the image; this one does not. */
.service { display: flex; flex-direction: column; }
.service__media { overflow: hidden; background: var(--ink); }
.service__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s var(--ease); }
.service:hover .service__media img { transform: scale(1.04); }
.service h3 {
  margin: 25px 0 0; padding-top: 30px; border-top: 1px solid var(--rule);
  font-size: 18px; font-weight: 400; letter-spacing: 1.08px;
  text-transform: uppercase; line-height: 1.35; color: var(--ink);
}
@media (max-width: 809px) { .service__media img { aspect-ratio: 16 / 10; } }

/* ---------- section 3, team ---------- */

.team { display: grid; grid-template-columns: repeat(var(--cols-team), 1fr); gap: var(--grid-gap); }
.member__photo { background: var(--warm-grey); overflow: hidden; margin-bottom: 16px; }
.member__photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.member__name { font-size: 18px; font-weight: 400; letter-spacing: 1.08px; text-transform: uppercase; margin: 0 0 6px; }
.member__post { font-size: 12px; font-weight: 300; letter-spacing: .72px; color: var(--muted); margin-left: 6px; }
.member__role { font-size: 15px; font-weight: 300; letter-spacing: .3px; text-transform: uppercase; color: var(--label); margin: 0; }

/* ---------- sections 4 and 5, track record ---------- */

/* One grid of nine on the original, not two rows of five and four. Splitting it
   is what made the cards different widths. */
.properties { display: grid; grid-template-columns: repeat(var(--cols-track), 1fr); gap: var(--grid-gap); }

.property { display: flex; flex-direction: column; gap: 8px; }
.property__media { position: relative; overflow: hidden; background: var(--warm-grey); }
/* All property photos are 1000x1500, so holding 2:3 is what keeps the row
   level. A replacement at another ratio makes it ragged. */
.property__media img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.property__label { display: flex; flex-direction: column; gap: 8px; }
.property__name { font-size: 15px; font-weight: 400; letter-spacing: .6px; text-transform: uppercase; margin: 0; }
.property__address { font-size: 14px; font-weight: 300; letter-spacing: .56px; text-transform: uppercase; color: var(--label); margin: 0; }

.property__hover {
  position: absolute; inset: 0; z-index: 2; padding: 24px;
  background: var(--overlay); color: var(--cream);
  display: flex; flex-direction: column; justify-content: center; text-align: center;
  opacity: 0; transition: opacity .35s var(--ease); overflow-y: auto;
}
.property:hover .property__hover, .property:focus-within .property__hover { opacity: 1; }
.property__hover ul { margin: 0; padding: 0; list-style: none; }
.property__hover li { font-size: 14px; font-weight: 300; line-height: 1.45; letter-spacing: -.28px; }
.property__hover li + li { margin-top: 10px; }

/* ---------- section 6, global reach ---------- */

.reach__grid { display: grid; grid-template-columns: repeat(var(--cols-reach), 1fr); gap: var(--grid-gap); }
.office { min-height: 209px; }
.office__city { font-size: 17px; font-weight: 400; letter-spacing: 1.7px; text-transform: uppercase; margin: 0 0 12px; }
.office__rule { width: 28px; height: 2px; background: var(--red); margin-bottom: 16px; }
.office__note { font-size: 12px; font-weight: 300; letter-spacing: .72px; text-transform: uppercase; color: var(--grey-brown); margin: 0 0 20px; }
.office address { font-style: normal; font-size: 14px; font-weight: 300; line-height: 2.6; letter-spacing: .56px; text-transform: uppercase; }

.reach__skyline { margin-top: 20px; }
.reach__skyline img { width: 100%; height: auto; display: block; }

/* ---------- section 7, closing ---------- */

.closing {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; padding: 44px var(--gutter);
}
.closing h2 { font-size: var(--fs-h3); font-weight: 400; line-height: 1.3; margin: 0; color: var(--cream); max-width: none; }

.footer { background: var(--maroon); color: var(--cream); padding: 0 0 40px; }
.footer__top { border-top: 1px solid rgba(242, 239, 235, .14); padding: 62px 0 0; }
.footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.footer__col h3 {
  font-size: 15px; font-weight: 300; letter-spacing: .3px; text-transform: uppercase;
  color: var(--footer-muted); margin: 0 0 30px;
}
.footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.footer__col a {
  font-size: 17px; font-weight: 300; letter-spacing: 1.02px; text-transform: uppercase;
  transition: opacity .25s;
}
.footer__col a:hover { opacity: .7; }
.footer__base {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding-top: 190px;
}
.footer__logo img { height: 58px; width: auto; }
.footer__legal { font-size: 15px; font-weight: 300; color: var(--footer-muted); margin: 0; }

@media (max-width: 1199px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__base { padding-top: 100px; }
}
@media (max-width: 809px) {
  .closing { flex-direction: column; align-items: flex-start; gap: 24px; padding: 40px var(--gutter); }
  .footer__grid { grid-template-columns: 1fr; gap: 40px; }
  .footer__base { padding-top: 60px; flex-direction: column; align-items: flex-start; }
}

/* ---------- legal and error pages ---------- */

.legal { padding-top: calc(var(--header-h) + 90px); padding-bottom: 120px; }
.legal .shell { max-width: 1200px; }
.legal__grid { display: grid; grid-template-columns: 43% 57%; gap: 0; align-items: start; }

.legal__aside { position: sticky; top: calc(var(--header-h) + 40px); padding-right: 32px; }
.legal__aside h1 {
  font-size: 48px; font-weight: 400; line-height: 1.2;
  letter-spacing: -.01em; margin: 0;
}
.legal__meta {
  font-size: 12px; font-weight: 300; letter-spacing: .72px;
  text-transform: uppercase; color: var(--label); margin: 14px 0 0;
}

.legal__body p, .legal__body li { font-size: 16px; font-weight: 300; line-height: 1.6; }
.legal__body p { margin: 0 0 18px; }
.legal__body h2 { font-size: 16px; font-weight: 400; margin: 34px 0 12px; letter-spacing: 0; }
.legal__body h3 { font-size: 16px; font-weight: 400; margin: 26px 0 10px; }
.legal__body > :first-child { margin-top: 0; }
.legal__body ul { margin: 0 0 18px; padding-left: 20px; }
.legal__body li { margin-bottom: 8px; }
.legal__body li::marker { color: var(--label); }
.legal__body strong { font-weight: 400; }
.legal__body a { text-decoration: underline; text-underline-offset: 2px; }
.legal__body .btn { text-decoration: none; background: var(--ink); color: var(--cream); margin-top: 8px; }

@media (max-width: 809px) {
  .legal { padding-top: calc(var(--header-h) + 56px); padding-bottom: 72px; }
  .legal__grid { grid-template-columns: 1fr; gap: 36px; }
  .legal__aside { padding-right: 0; }
  .legal__aside { position: static; }
  .legal__aside h1 { font-size: 38px; }
}