/* =========================================================================
   Montalvo Landscape — structure transplanted from the constructiondesourdy.com
   capture (1920px). Every px value below is the measured one; fluid values
   are the measured px divided by 1920 (so 100vw at 1920 = the capture).
   ========================================================================= */

:root {
  /* measured palette (design-system.md) */
  --ink: #141415;      /* on paper 18.41:1 · on wash 15.7:1 */
  --paper: #ffffff;
  --wash: #f1ece8;     /* gallery surface */
  --powder: #c9d2d6;   /* hairlines only — decorative, never text */

  /* measured radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-pill: 30px;

  /* grid: 12 × 138.33px, 20px gap, 20px side padding at 1920 */
  --pad: 20px;
  --gap: 20px;
  --cols: 12;
  --col: calc((100vw - var(--pad) * 2 - var(--gap) * 11) / 12);

  /* Archivo stands in for GT America (see README) */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* easings named after what the capture used */
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);

  --block: 240px;      /* vertical rhythm between blocks */
  --nav-h: 60px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, address { margin: 0; padding: 0; font: inherit; }
ul { list-style: none; }
address { font-style: normal; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gap);
  padding: 0 var(--pad);
}

/* ---------- type scale (measured) ---------- */
.h2 {
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.0133em;
  font-weight: 900;
  font-variation-settings: "wdth" 125;
}
.body { font-size: 16px; line-height: 22.4px; }
.body--indent { text-indent: 56px; }

/* ---------- button (c-button-m / c-button-s) ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 45px;
  padding: 16px 25px;
  color: var(--paper);
  background: var(--ink);
  border-radius: var(--r-pill);
  font-size: 13px;
  line-height: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out-expo);
}
.btn__inner { display: flex; align-items: center; }
.btn__bullet {
  width: 10px;
  height: 10px;
  margin-right: 20px;
  border-radius: var(--r-pill);
  background: var(--paper);
  transition: transform 0.9s var(--ease-out-expo);
}
.btn__label { display: block; height: 13px; overflow: hidden; }
.btn__label > span {
  display: inline-flex;
  text-shadow: 0 20px 0 currentColor;
  transition: transform 0.5s var(--ease-out-expo);
}
.btn:hover { transform: scale(1.03); }
.btn:hover .btn__label > span { transform: translateY(-20px); }
.btn:hover .btn__bullet { transform: scale(0.6); }

.btn--s { height: 38px; padding: 14px 25px; font-size: 10px; line-height: 10px; }
.btn--s .btn__label { height: 10px; }
.btn--s .btn__label > span { text-shadow: 0 16px 0 currentColor; }
.btn--s:hover .btn__label > span { transform: translateY(-16px); }

/* ---------- caption (project cards) ---------- */
.bullet {
  position: relative;
  top: 2px;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--ink);
  transition: opacity 0.3s var(--ease-out-quad);
}
.card__caption {
  display: flex;
  flex-direction: column;
  width: 50%;
  max-width: 80%;
  margin-left: auto;
}
.caption__title {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 900;
  font-variation-settings: "wdth" 125;
}
.caption__name { flex-grow: 1; }
.caption__rule { width: 10px; border-left: 1px solid var(--ink); }
.caption__sub { padding-top: 8px; font-size: 14px; line-height: 19.6px; }
.caption__sub i { margin-right: 5px; }

/* ---------- media wrappers ---------- */
.media,
.card__frame,
.services__img,
.about__img,
.full-project__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.media img,
.card__img img,
.services__img img,
.about__img img,
.full-project__img img,
.orbit__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* lazy image settle (c-image is-loaded, 1.2s measured) */
img[loading="lazy"] { opacity: 0; transform: scale(1.06); transition: opacity 1.2s var(--ease-out-quad), transform 1.2s var(--ease-out-expo); }
img[loading="lazy"].is-loaded { opacity: 1; transform: none; }
html:not(.js) img[loading="lazy"] { opacity: 1; transform: none; }

/* =========================================================================
   0 · NAV
   ========================================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: var(--paper);
}
.nav__inner { height: var(--nav-h); align-items: center; }
.nav__logo {
  grid-column: 1 / span 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  line-height: 1;
  font-weight: 900;
  font-variation-settings: "wdth" 125;
  letter-spacing: -0.01em;
  justify-self: start;
}
.nav__mark { width: 25px; height: 17px; fill: currentColor; }
.nav__main { grid-column: 5 / span 4; justify-self: center; white-space: nowrap; }
.nav__aside { grid-column: 10 / span 3; justify-self: end; display: flex; gap: 22px; }
.nav a { transition: opacity 0.3s var(--ease-out-quad); }
.nav__main a:hover,
.nav__aside a:hover { opacity: 0.62; }

/* =========================================================================
   1 · HERO
   ========================================================================= */
.hero__inner {
  min-height: 510px;
  padding-top: 175px;
  margin-bottom: 26px;
  align-items: end;
}
.wordmark {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-weight: 900;
  font-variation-settings: "wdth" 90;
  font-size: 22vw;           /* js/wordmark.js fits it to the column */
  line-height: 0.74;
  letter-spacing: 0;
  white-space: nowrap;
  --lift: 5.2083vw;          /* 100px at 1920 */
}
.wordmark span {
  display: block;
  transition: transform 0.9s var(--ease-out-cubic);
  transform: translate3d(0, calc(var(--lift) * -1 * max(var(--progress, 0) - var(--k), 0)), 0);
}
/* pairs rise from the centre outward: 4/5, 3/6, 2/7, 1/8 (movimento.md) */
.wordmark span:nth-child(1), .wordmark span:nth-child(8) { --k: 0.36; }
.wordmark span:nth-child(2), .wordmark span:nth-child(7) { --k: 0.24; }
.wordmark span:nth-child(3), .wordmark span:nth-child(6) { --k: 0.12; }
.wordmark span:nth-child(4), .wordmark span:nth-child(5) { --k: 0; }

.block-media { margin-bottom: 16px; }
.media--hero {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-xs);
}
.media__inner {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100%;
  height: 120%;
}
.media__cta { z-index: 2; }

.block-title { margin-bottom: var(--block); }
.block-title__col { grid-column: 4 / span 9; }
.split-heading {
  font-size: 42px;
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: -0.0114em;
}
.split-heading .indent {
  display: inline-block;
  width: calc(var(--col) * 3 + var(--gap) * 3 - 2px);
}
.split-heading .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split-heading .w > span { display: inline-block; }
.block-title .btn { margin-top: 57px; }

/* =========================================================================
   2 · PROJECTS 01–02
   ========================================================================= */
.block-projects { margin-bottom: var(--block); align-items: start; }
.card--lg { grid-column: 1 / span 6; }
.card--sm { grid-column: 9 / span 4; }
.card > a { display: block; }
.card__frame { aspect-ratio: 1400 / 875; border-radius: var(--r-sm); }
.card__img { width: 100%; aspect-ratio: 1400 / 1000; flex: none; }
.card__meta { position: relative; display: flex; margin-top: 13px; }
.card__meta::before {
  content: "See";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  line-height: 14px;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out-quad);
}
.card > a:hover .card__meta::before { opacity: 1; }
.card > a:hover .bullet { opacity: 0; }

.block-centered { margin-bottom: var(--block); }
.block-centered__col {
  grid-column: 3 / span 8;
  display: grid;
  grid-template-columns: subgrid;
}
.block-centered .h2 { grid-column: 1 / -1; text-align: center; }
.block-centered .body { grid-column: 3 / span 4; margin-top: 16px; text-align: center; }
.block-centered__cta { grid-column: 1 / -1; text-align: center; }
.block-centered .btn { margin-top: 32px; }

/* =========================================================================
   3 · GALLERY RING
   ========================================================================= */
.gallery {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  margin-bottom: var(--block);
  isolation: isolate;
  overflow: clip;
}
.gallery__bg {
  position: absolute;
  inset: 0 var(--pad);
  z-index: -1;
  background: var(--wash);
  border-radius: var(--r-xs);
}
.gallery__orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 2;
  --item: min(28vw, 160px);
}
.orbit__item {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--item);
  aspect-ratio: 3 / 2;
  margin: calc(var(--item) / -3) 0 0 calc(var(--item) / -2);
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--ink);
  will-change: transform;
}
.gallery__title {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  font-size: 64px;
  line-height: 1;
  font-weight: 900;
  font-variation-settings: "wdth" 125;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.gallery__title-mobile { display: none; }
.gallery__side {
  grid-column: 1 / 4;
  grid-row: 1;
  align-self: end;
  padding: 0 0 17px 20px;
}
.gallery__side .body { max-width: 360px; padding-bottom: 22px; }
.gallery__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.gallery__mark svg { display: block; width: 76px; height: 50px; fill: var(--ink); }

/* =========================================================================
   4 · SERVICES
   ========================================================================= */
.services { margin-bottom: var(--block); align-items: start; }
.services__lead {
  grid-column: 1 / span 8;
  display: grid;
  grid-template-columns: subgrid;
  padding-top: 40px;
  align-items: start;
}
.services__heading { grid-column: 2 / span 4; grid-row: 1; }
.services__img {
  grid-column: 1 / span 4;
  grid-row: 2;
  margin-top: 210px;
  aspect-ratio: 453 / 725;
  border-radius: var(--r-md);
}

.services__text { grid-column: 5 / span 3; grid-row: 2; margin-top: 210px; }
.services__cta { margin-top: 40px; }

.services__list {
  grid-column: 9 / span 4;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.service {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--powder);
  border-radius: var(--r-sm);
}
.service__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 64px;
  padding: 16px 32px 23px;
  border-bottom: 1px solid var(--powder);
  font-size: 24px;
  line-height: 33.6px;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.service__head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 90px;
  width: 1px;
  height: 64px;
  background: var(--powder);
}
.service__num {
  font-size: 20px;
  line-height: 28px;
  font-weight: 900;
  font-variation-settings: "wdth" 125;
  letter-spacing: 0;
}
.service__body { margin-top: auto; padding-top: 190px; }
.service__body p { margin-left: auto; width: 62%; text-indent: 56px; }

/* =========================================================================
   5 · ABOUT
   ========================================================================= */
.about { margin-bottom: 220px; }
.about__grid { position: relative; align-items: start; }
.about__grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--pad);
  right: var(--pad);
  height: 1px;
  background: var(--powder);
}
.about__heading {
  grid-column: 2 / span 4;
  grid-row: 1;
  position: sticky;
  top: 0;
  padding: 272px 0;
}
.about__text { grid-column: 5 / span 3; grid-row: 1; align-self: end; }
.about__cta { margin-top: 22px; }
.about__media {
  grid-column: 9 / span 4;
  grid-row: 1;
  position: relative;
  padding-top: 272px;
}
.about__media::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 0;
  left: calc(var(--gap) * -1);
  width: 1px;
  background: var(--powder);
}
.about__img { aspect-ratio: 453 / 724; border-radius: var(--r-md); }
.about__img-inner { width: 100%; height: 112%; flex: none; }

/* =========================================================================
   6 · FULL PROJECT 03
   ========================================================================= */
.full-project__link { position: relative; }
.full-project__frame {
  grid-column: 1 / -1;
  grid-row: 1;
  aspect-ratio: 1880 / 1254;
  border-radius: var(--r-md);
}
.full-project__img { width: 100%; height: 118%; flex: none; }
.full-project__overlay {
  position: absolute;
  inset: 0;
  align-items: end;
  pointer-events: none;
}
.full-project__label {
  grid-column: 7 / span 6;
  position: sticky;
  bottom: 80px;
  padding: 6px 4px;
}
.full-project__card {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  background: var(--paper);
  border-radius: var(--r-xs);
}
.card__caption--fixed { width: 320px; margin-left: 0; }

/* =========================================================================
   7 · FOOTER
   ========================================================================= */
.footer { padding-top: 30px; }
.footer__top { font-size: 16px; line-height: 22.4px; }
.footer__blurb { grid-column: 1 / span 3; }
.footer__contact { grid-column: 7 / span 3; display: flex; flex-direction: column; gap: 10px; }
.footer__social { grid-column: 10 / span 3; display: flex; flex-direction: column; gap: 10px; }
.footer a:hover { opacity: 0.62; }
.footer a { transition: opacity 0.3s var(--ease-out-quad); }
.footer__mark { margin-top: 12.5vw; }
.footer__bottom { padding-top: 26px; padding-bottom: 20px; font-size: 16px; line-height: 22.4px; }
.footer__bottom p:nth-child(1) { grid-column: 1 / span 6; }
.footer__bottom p:nth-child(2) { grid-column: 7 / span 3; }
.footer__bottom p:nth-child(3) { grid-column: 10 / span 3; text-align: right; }

/* =========================================================================
   REVEALS — hidden states exist only under html.motion (set before paint,
   removed if Locomotive never takes over). Timings are the measured ones.
   ========================================================================= */
html.motion .appear-up { opacity: 0; transform: translateY(40px); }
html.motion .appear-up.is-inview {
  opacity: 1;
  transform: none;
  transition: opacity 0.35s var(--ease-out-quad) var(--d, 0s), transform 0.35s var(--ease-out-quad) var(--d, 0s);
}
html.motion .appear-blur { opacity: 0; filter: blur(6px); transform: translateY(20px); }
html.motion .appear-blur.is-inview {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition: opacity 0.3s var(--ease-out-quad) var(--d, 0s), transform 0.3s var(--ease-out-quad) var(--d, 0s), filter 0.3s var(--ease-out-quad) var(--d, 0s);
}
.d1 { --d: 0.1s; }
.d2 { --d: 0.2s; }
.d3 { --d: 0.3s; }

html.motion .btn--appear,
html.motion .btn--split { opacity: 0; transform: translateY(20px); }
html.motion .btn--appear .btn__bullet,
html.motion .btn--split .btn__bullet { transform: scale(0); }
html.motion .btn--appear .btn__label > span,
html.motion .btn--split .btn__label > span { transform: translateY(100%); }
html.motion .btn--appear.is-inview,
html.motion .btn--split.is-inview {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out-quad) 0.4s, transform 0.6s var(--ease-out-quad) 0.4s;
}
html.motion .btn--appear.is-inview .btn__bullet,
html.motion .btn--split.is-inview .btn__bullet { transform: none; transition: transform 0.9s var(--ease-out-expo) 0.6s; }
html.motion .btn--appear.is-inview .btn__label > span,
html.motion .btn--split.is-inview .btn__label > span { transform: none; transition: transform 0.9s var(--ease-out-expo) 0.6s; }
html.motion .btn--appear.is-inview:hover .btn__label > span,
html.motion .btn--split.is-inview:hover .btn__label > span { transform: translateY(-20px); transition-delay: 0s; }
html.motion .btn--appear.is-inview:hover .btn__bullet,
html.motion .btn--split.is-inview:hover .btn__bullet { transform: scale(0.6); transition-delay: 0s; }

html.motion .split-heading .w > span { transform: translateY(110%); }
html.motion .split-heading.is-inview .w > span {
  transform: none;
  transition: transform 0.9s var(--ease-out-expo) calc(var(--line, 0) * 0.08s);
}

html.motion .services__list .service { opacity: 0; transform: translateY(40px); }
html.motion .services__list.is-inview .service {
  opacity: 1;
  transform: none;
  transition: opacity 0.35s var(--ease-out-quad), transform 0.35s var(--ease-out-quad);
}
html.motion .services__list.is-inview .service:nth-child(2) { transition-delay: 0.1s; }
html.motion .services__list.is-inview .service:nth-child(3) { transition-delay: 0.2s; }

/* =========================================================================
   RESPONSIVE — the capture exists only at 1920. Below 1100 this follows the
   original's own mobile classes (col-span-4, mt-[104px], centred gallery copy).
   ========================================================================= */
/* below the capture width, the display sizes keep their 1920 proportion */
@media (max-width: 1919px) {
  .split-heading { font-size: clamp(28px, 2.1875vw, 42px); }   /* 42 / 1920 */
  .gallery__title { font-size: clamp(32px, 3.3333vw, 64px); }  /* 64 / 1920 */
  .h2 { font-size: clamp(32px, 2.5vw, 48px); }                 /* 48 / 1920 */
}

@media (max-width: 1100px) {
  :root { --cols: 4; --pad: 16px; --gap: 12px; --block: 120px; --col: calc((100vw - var(--pad) * 2 - var(--gap) * 3) / 4); }

  .nav__inner { height: auto; padding-top: 14px; padding-bottom: 12px; row-gap: 8px; }
  .nav__logo { grid-column: 1 / span 2; }
  .nav__aside { grid-column: 3 / span 2; gap: 16px; }
  .nav__main { grid-column: 1 / -1; grid-row: 2; justify-self: start; font-size: 14px; }
  :root { --nav-h: 76px; }

  .hero__inner { min-height: 0; padding-top: 120px; margin-bottom: 16px; }

  .block-title__col { grid-column: 1 / -1; }
  .split-heading { font-size: 24px; line-height: 1.25; }
  .split-heading .indent { width: calc(var(--col) + var(--gap)); }
  .block-title .btn { margin-top: 24px; }

  .card--lg,
  .card--sm { grid-column: 1 / -1; }
  .card--sm { margin-top: 64px; }

  .block-centered__col { grid-column: 1 / -1; display: block; }
  .block-centered .body { max-width: 320px; margin: 24px auto 0; }
  .h2 { font-size: 32px; }

  .gallery { min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; }
  .gallery__title { display: block; padding: 32px 24px 0; font-size: 28px; text-align: center; white-space: normal; }
  .gallery__title .desk { display: none; }
  .gallery__title-mobile { display: inline; }
  .gallery__side { padding: 0 24px 32px; text-align: center; }
  .gallery__side .body { margin: 0 auto; text-indent: 0; }
  .gallery__mark svg { width: 44px; height: 29px; }
  .gallery__mark { width: 44px; }

  .services__lead { grid-column: 1 / -1; display: block; padding-top: 0; }
  .services__img { margin-top: 40px; }
  .services__text { margin-top: 32px; }
  .services__cta { margin-top: 24px; }
  .services__list { grid-column: 1 / -1; grid-row: auto; margin-top: 64px; }
  .service__head { gap: 32px; padding: 12px 12px 16px; font-size: 20px; }
  .service__head::before { left: 56px; height: 52px; }
  .service__body { padding-top: 96px; }
  .service__body p { width: 100%; }

  .about { margin-bottom: 120px; }
  .about__heading { grid-column: 1 / -1; position: static; padding: 64px 0 32px; }
  .about__text { grid-column: 1 / -1; grid-row: 2; }
  .about__media { grid-column: 1 / -1; grid-row: 3; padding-top: 48px; }
  .about__media::before { display: none; }

  .full-project__frame { aspect-ratio: 4 / 5; }
  .full-project__img { height: 130%; }
  .card__img { aspect-ratio: 1400 / 1150; }
  .about__img-inner { height: 116%; }
  .full-project__label { grid-column: 1 / -1; bottom: 16px; }
  .card__caption--fixed { width: 70%; }

  .footer__blurb,
  .footer__contact,
  .footer__social { grid-column: 1 / -1; }
  .footer__contact { margin-top: 32px; }
  .footer__social { margin-top: 24px; }
  .footer__bottom p:nth-child(n) { grid-column: 1 / -1; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html.motion .appear-up,
  html.motion .appear-blur,
  html.motion .btn--appear,
  html.motion .btn--split,
  html.motion .services__list .service,
  html.motion .split-heading .w > span,
  html.motion .btn--appear .btn__bullet,
  html.motion .btn--split .btn__bullet,
  html.motion .btn--appear .btn__label > span,
  html.motion .btn--split .btn__label > span { opacity: 1; transform: none; filter: none; }
  .wordmark span { transform: none; transition: none; }
  img[loading="lazy"] { opacity: 1; transform: none; transition: none; }
}