@font-face { font-family: "Graphik"; font-weight: 100 400; font-style: normal; font-display: swap; src: url("../fonts/Graphik-Light.otf") format("opentype"); }
@font-face { font-family: "Graphik"; font-weight: 500 900; font-style: normal; font-display: swap; src: url("../fonts/Graphik-Medium.otf") format("opentype"); }
/* ==========================================================================
   Greenfold — original implementation of a sticky-stack landing page
   ========================================================================== */

:root {
  --bg: #f6f6f6;
  --ink: #1c1c1c;
  --green: #3b4b1f;
  --muted: #b4b4b4;
  --muted-dark: #9d9d9d;
  --text: #1c1c1c;
  --white: #f6f6f6;
  --font: "Graphik", "Helvetica Neue", Arial, system-ui, sans-serif;
  --gutter: clamp(20px, 4vw, 40px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vh: 100vh;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

/* ---------- Type scale ---------- */
.h-md { font-size: clamp(26px, 2.6vw, 32px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }
.h-lg { font-size: clamp(28px, 3vw, 36px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }
.p-sm { font-size: 15px; line-height: 1.5; color: var(--muted-dark); }
.card--dark .p-sm { color: rgba(246, 246, 246, 0.6); }
.eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }

/* ---------- Small "• • LABEL" tag ---------- */
.tag {
  position: absolute; left: var(--gutter); bottom: 24px;
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-dark);
}
.tag { display: none !important; }
.tag i { display: none; }
.tag i:first-child { display: block; width: 27px; height: 6px; background: repeating-linear-gradient(90deg, #d9d9d9 0 12px, transparent 12px 15px); }
.card--dark .tag i:first-child, .card--olive .tag i:first-child, .hero .tag i:first-child, .contact .tag i:first-child { background: repeating-linear-gradient(90deg, rgba(246, 246, 246, 0.55) 0 12px, transparent 12px 15px); }
.tag span { margin-left: 8px; }
.card--dark .tag, .hero__tag, .contact .tag { color: var(--muted); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  color: var(--bg);
  transition: transform 0.6s var(--ease), opacity 0.5s ease;
}
.nav.is-hidden { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.nav__logo { display: inline-flex; align-items: center; }
.nav { justify-content: center; }
.nav__logo img { height: clamp(22px, 2.6vw, 38px); width: auto; display: block; filter: brightness(0) invert(1); }
body.page-pale .nav__logo img { filter: invert(0.616); } /* black → #9d9d9d, the brand grey used for the wordmark in the previous version */
/* brand marks: the 2:1 grey rectangles from the identity, one at each header corner */
.nav::before, .nav::after { content: ""; position: absolute; top: 50%; width: 20px; height: 10px; margin-top: -5px; background: #b4b4b4; }
.nav::before { left: var(--gutter); }
.nav::after { right: var(--gutter); }
body.page-pale .nav::before, body.page-pale .nav::after { background: #9d9d9d; }
.nav__links { display: none !important; }
/* bottom-centred pill navigation (desktop) */
.pill { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; display: flex; gap: 2px; padding: 5px; background: #ffffff; border-radius: 4px; box-shadow: 0 8px 30px rgba(28, 28, 28, 0.14); }
.pill a { display: block; padding: 8px 18px; font-size: 13px; letter-spacing: -0.01em; color: var(--muted-dark); border-radius: 3px; transition: color 0.3s ease, background-color 0.3s ease; }
.pill a:hover { color: var(--ink); }
.pill a.is-active { background: var(--green); color: var(--bg); }
.menu.is-open ~ .pill, body.menu-open .pill { opacity: 0; pointer-events: none; }
@media (min-width: 810px) { .menu-toggle { display: none; } }
@media (max-width: 809px) { .pill { display: none; } }
.nav__links { display: flex; gap: clamp(28px, 6vw, 100px); }
.nav__links a {
  font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  position: relative; padding: 4px 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }

/* vertical-dots menu button (always visible, top-right) */
.menu-toggle {
  position: fixed; top: 64px; right: var(--gutter); z-index: 60;
  width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  mix-blend-mode: difference; color: #fff;
}
.menu-toggle span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; transition: transform 0.4s var(--ease), opacity 0.3s; }
.menu-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg) scaleX(4); border-radius: 2px; }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg) scaleX(4); border-radius: 2px; }

.menu {
  position: fixed; inset: 0; z-index: 55; background: var(--ink); color: var(--bg);
  display: flex; flex-direction: column; justify-content: center; padding: var(--gutter);
  clip-path: inset(0 0 100% 0); transition: clip-path 0.7s var(--ease);
}
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu__inner { display: flex; flex-direction: column; gap: 6px; }
.menu__link {
  font-size: clamp(40px, 8vw, 88px); font-weight: 400; letter-spacing: -0.04em; line-height: 1;
  display: flex; align-items: baseline; gap: 20px;
  opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.8s var(--ease), color 0.3s;
}
.menu__link span { font-size: 12px; letter-spacing: 0.1em; color: var(--muted); }
.menu__link:hover { color: #fff; }
.menu.is-open .menu__link { opacity: 1; transform: none; }
.menu.is-open .menu__link:nth-child(1) { transition-delay: 0.25s; }
.menu.is-open .menu__link:nth-child(2) { transition-delay: 0.32s; }
.menu.is-open .menu__link:nth-child(3) { transition-delay: 0.39s; }
.menu.is-open .menu__link:nth-child(4) { transition-delay: 0.46s; }
.menu__foot {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 24px;
  display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}

/* ==========================================================================
   HERO — sticky, sits beneath everything at z-index 1
   ========================================================================== */
.hero {
  /* scrolls up half a viewport, then pins so its lower half (where the text
     lives) stays visible above the incoming cards */
  position: sticky; top: calc(var(--vh) * -0.5); z-index: 1;
  height: var(--vh); overflow: hidden;
  background: var(--bg);
}
.hero__media, .contact__media { position: absolute; inset: -10% 0; will-change: transform; }
.hero__media img, .contact__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media {
  background: linear-gradient(180deg, #5a6a52 0%, #b58a3c 45%, #2e3a2a 100%);
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.6s ease 0.25s, transform 2.2s var(--ease) 0.25s;
}
body.is-ready .hero__media { opacity: 1; transform: scale(1); }
.hero__shade, .contact__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 22, 16, 0.35) 0%, rgba(11, 22, 16, 0) 35%, rgba(11, 22, 16, 0.25) 70%, rgba(11, 22, 16, 0.7) 100%),
    radial-gradient(60% 50% at 30% 20%, rgba(40, 80, 50, 0.35), transparent 70%);
}
.hero__shade { opacity: 0; transition: opacity 1.6s ease 0.25s; }
body.is-ready .hero__shade { opacity: 1; }

/* Text slides are absolutely stacked and crossfaded by JS */
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto auto;
  grid-template-areas: ". ." "lede title" "cta cta";
  align-items: end;
  padding: 0 var(--gutter) 24px;
  pointer-events: none;
}
.hero__slide.is-active { pointer-events: auto; }
.hero__lede {
  grid-area: lede;
  max-width: 24ch;
  font-size: clamp(20px, 2.6vw, 32px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05;
  color: var(--muted);
  padding-bottom: 20px;
}
.hero__title {
  grid-area: title;
  font-size: clamp(44px, 6.4vw, 78px); font-weight: 400; letter-spacing: -0.04em; line-height: 0.98;
  color: var(--white); text-align: right; max-width: 9ch; justify-self: end;
}
.hero__cta {
  grid-area: cta; justify-self: center;
  position: relative; display: inline-block;
  font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bg);
  padding: 10px 0; margin-top: 28px;
}
.hero__cta::before, .hero__cta::after {
  content: ""; position: absolute; height: 1px; width: 14px; background: currentColor;
  transition: width 0.5s var(--ease);
}
.hero__cta::before { top: 0; left: -14px; }
.hero__cta::after { bottom: 0; right: -14px; }
.hero__cta:hover::before, .hero__cta:hover::after { width: 100%; }
.hero__cta:hover::before { left: 0; }
.hero__cta:hover::after { right: 0; }

/* slide change — horizontal wipes (no vertical movement):
   leaving title is clipped away from its right edge, leaving lede from its left edge;
   the incoming text is then revealed from the right edge growing leftward */
.hero__slide .hero__lede, .hero__slide .hero__title, .hero__slide .hero__cta {
  opacity: 0; transform: translate3d(0, 0, 0);
  transition: opacity 0.5s ease 0.32s, transform 0.5s var(--ease) 0.32s;
}
.hero__slide.is-active .hero__lede, .hero__slide.is-active .hero__title, .hero__slide.is-active .hero__cta { opacity: 1; transform: translate3d(0, 0, 0); }
.hero__slide.is-leaving .hero__lede { opacity: 0; transform: translate3d(-64px, 0, 0); transition: opacity 0.38s ease, transform 0.42s cubic-bezier(0.4, 0, 0.6, 1); }
.hero__slide.is-leaving .hero__title { opacity: 0; transform: translate3d(64px, 0, 0); transition: opacity 0.38s ease, transform 0.42s cubic-bezier(0.4, 0, 0.6, 1); }
.hero__slide.is-leaving .hero__cta { opacity: 0; transition: opacity 0.3s ease; }
.hero__slide:not(.is-active):not(.is-leaving) .hero__lede,
.hero__slide:not(.is-active):not(.is-leaving) .hero__title,
.hero__slide:not(.is-active):not(.is-leaving) .hero__cta { transition: none; }
/* scroll-linked choreography: the script drives transform/opacity per frame, so no CSS transitions,
   the hero clips the texts as they slide out, and the incoming texts grow around their own centre */
.hero__slides { overflow: hidden; }
.hero__slides.is-scrub .hero__lede, .hero__slides.is-scrub .hero__title, .hero__slides.is-scrub .hero__cta { transition: none !important; }
.hero__slides.is-scrub .hero__lede, .hero__slides.is-scrub .hero__title { will-change: transform, opacity; }
.hero__lede { transform-origin: 50% 110%; }
.hero__title { transform-origin: 50% 110%; }
/* initial page reveal: the first slide wipes in on load, lede first, then title, then link */
body.is-loading .hero__slide.is-active .hero__lede { transition-delay: 0.2s; transition-duration: 0.5s; }
body.is-loading .hero__slide.is-active .hero__title { transition-delay: 0.9s; transition-duration: 0.5s; }
body.is-loading .hero__slide.is-active .hero__cta { transition-delay: 1.2s; transition-duration: 0.4s; }

/* ==========================================================================
   STACKING PANELS
   Each panel is 100vh with its card in the top half. Panels pin at top:50vh,
   so the card rests in the lower half of the viewport while the hero text
   stays visible above it. Later siblings have a higher z-index and slide up
   over the pinned previous panel.
   ========================================================================== */
.stack { position: relative; z-index: 2; display: flow-root; /* keep the last panel's margin inside */ }
/* tail so the last card holds for half a viewport before it is pushed away */
/* spacer element, not a margin: sticky constraints include margins, a margin would push the last card away early */
.stack::after { content: ""; display: block; height: calc(var(--vh) * 0.5); }
.panel {
  position: sticky; top: calc(var(--vh) * 0.5);
  height: var(--vh);
  display: flex; align-items: flex-start;
}
.panel:nth-child(1) { z-index: 3; }
.panel:nth-child(2) { z-index: 4; }
.panel:nth-child(3) { z-index: 5; }
.panel:nth-child(4) { z-index: 6; }
.panel:nth-child(5) { z-index: 7; }

.card {
  position: relative; width: 100%;
  min-height: 50vh;
  padding: 40px var(--gutter) 64px;
  display: flex; align-items: center;
}
.card--light { background: var(--bg); color: var(--text); }
.card--dark { background: var(--ink); color: var(--bg); }
.card--olive { background: var(--green); color: var(--bg); }
.card--olive .eyebrow, .card--olive .p-sm, .card--olive .stat__label { color: rgba(246, 246, 246, 0.62); }
.card--olive .stat { border-color: rgba(246, 246, 246, 0.25); }
.card--olive .clients-grid div { border-color: rgba(246, 246, 246, 0.25); }
.card--olive .clients-grid img { filter: brightness(0) invert(1); opacity: 0.72; }
.card--olive .clients-grid div:hover img { opacity: 1; }
.card--olive .slink { color: var(--bg); }
.card--olive .tag { color: rgba(246, 246, 246, 0.7); }
.card__inner { width: 100%; }

/* Intro */
.intro { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.intro__text { display: flex; flex-direction: column; gap: 16px; }
.intro__media { align-self: stretch; min-height: calc(var(--vh) * 0.5); margin: -40px calc(-1 * var(--gutter)) -64px 0; overflow: hidden; background: #8a9a7c; }
.intro__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.6s var(--ease); }
.reveal.is-in .intro__media img, .intro__media.is-in img { transform: scale(1); }

/* Projects */
.projects { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.projects__text { display: flex; flex-direction: column; gap: 12px; }
.projects__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.projects__grid .project:nth-child(n + 3) { display: none; }
.project { display: block; }
.project figure { aspect-ratio: 5 / 3; overflow: hidden; background: #2f4a3a; }
.project img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.project:hover img { transform: scale(1.05); }
.project span {
  display: block; margin-top: 12px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: rgba(246, 246, 246, 0.85);
}

/* Journal */
.journal { display: flex; flex-direction: column; }
.journal__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 14px 0; border-bottom: 1px solid rgba(28, 28, 28, 0.15);
  transition: padding-left 0.5s var(--ease);
}
.journal__row:first-child { border-top: 1px solid rgba(28, 28, 28, 0.15); }
.journal__row:hover { padding-left: 12px; }
.journal__title { font-size: clamp(20px, 2.2vw, 26px); font-weight: 400; letter-spacing: -0.03em; }
.journal__date { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--muted-dark); white-space: nowrap; }

/* Quote */
.card--quote { min-height: 50vh; }
.quote { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.quote__text { font-size: clamp(22px, 2.6vw, 30px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.15; text-align: right; }
.quote__cite { font-style: normal; font-size: 15px; color: rgba(246, 246, 246, 0.6); }

/* ==========================================================================
   FAQ -> CONTACT crossfade
   A 300vh wrapper with a sticky 100vh stage. FAQ sits on top of the
   contact hero and fades out as the wrapper scrolls (see script.js).
   ========================================================================== */
.fade-wrap {
  position: relative; z-index: 8; height: calc(var(--vh) * 3);
  /* arrives as the last stacked card begins to leave, so the two move together */
  margin-top: calc(var(--vh) * -0.5);
}
.fade-sticky { position: sticky; top: 0; height: var(--vh); overflow: hidden; background: var(--bg); }

.contact { position: absolute; inset: 0; background: var(--ink); color: var(--bg); }
.contact__media { background: linear-gradient(180deg, #34464a 0%, #6e8891 50%, #1e2a2a 100%); }
.contact__shade { background: linear-gradient(180deg, rgba(11, 22, 16, 0.55) 0%, rgba(11, 22, 16, 0.2) 45%, rgba(11, 22, 16, 0.75) 100%); }
.contact__slide { pointer-events: auto; }
.contact__slide .hero__title { max-width: 10ch; }

.faq {
  position: absolute; inset: 0; z-index: 2; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 80px var(--gutter);
  will-change: opacity;
}
.faq__inner { width: min(100%, 440px); display: flex; flex-direction: column; gap: 40px; align-items: center; }
.faq__list { display: flex; flex-direction: column; gap: 26px; width: 100%; }
.faq__item dt { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.faq__item dd { font-size: 15px; line-height: 1.45; color: var(--muted-dark); }

/* ==========================================================================
   NEWSLETTER + FOOTER (normal flow, slide over the contact stage)
   ========================================================================== */
.newsletter {
  position: relative; z-index: 8; background: var(--bg);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start;
  padding: 56px var(--gutter) 64px;
}
.newsletter__text { display: flex; flex-direction: column; gap: 12px; max-width: 30ch; }
.newsletter__text p { font-size: 15px; line-height: 1.45; }
.newsletter__form { display: flex; flex-direction: column; gap: 10px; }
.newsletter__row { display: flex; gap: 16px; align-items: stretch; }
.newsletter__row input {
  flex: 1; min-width: 0; border: 0; border-bottom: 1px solid rgba(28, 28, 28, 0.25); background: transparent;
  padding: 10px 0; outline: none; transition: border-color 0.3s;
}
.newsletter__row input:focus { border-color: var(--ink); }
.newsletter__row button {
  background: var(--ink); color: var(--bg); border: 0; cursor: pointer;
  padding: 12px 24px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500;
  transition: background 0.3s;
}
.newsletter__row button:hover { background: var(--green); }
.newsletter__note, .newsletter__thanks { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-dark); }
.newsletter__thanks { display: none; color: var(--green); }
.newsletter__form.is-sent .newsletter__note { display: none; }
.newsletter__form.is-sent .newsletter__thanks { display: block; }

.footer {
  position: relative; z-index: 8; background: var(--ink); color: var(--bg);
  padding: 64px var(--gutter) 24px;
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 48px;
}
.footer__brand { display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 1.45; }
.footer__brand p { color: rgba(246, 246, 246, 0.75); }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer__col { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.footer__col h4 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.footer__col a { color: rgba(246, 246, 246, 0.75); transition: color 0.3s; }
.footer__col a:hover { color: #fff; }
.footer__copy { grid-column: 1 / -1; text-align: right; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(246, 246, 246, 0.55); margin-top: 48px; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

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



/* ==========================================================================
   INNER PAGES
   ========================================================================== */
/* Big statement headline (projects list, contact) */
.h-xl { font-size: clamp(40px, 5.2vw, 72px); font-weight: 400; letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; }

/* Projects list: pinned title panel, project rows slide over it */
.plist { position: relative; z-index: 2; }
.plist__title, .plist__row { position: sticky; top: 0; height: var(--vh); }
.plist__title { z-index: 3; background: var(--bg); padding: 80px var(--gutter) 0; display: flex; flex-direction: column; gap: 22px; }
.plist__title .h-xl { max-width: 12ch; }
.plist__row { z-index: 4; pointer-events: none; }
.plist__row:nth-child(3) { z-index: 5; } .plist__row:nth-child(4) { z-index: 6; } .plist__row:nth-child(5) { z-index: 7; }
.prow {
  position: absolute; left: 0; right: 0; bottom: 0; height: 58vh; background: transparent; pointer-events: auto;
  padding: 24px var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 52%); gap: 40px; align-items: end;
}
.prow__text { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 230px; padding: 24px 24px 10px var(--gutter); margin-left: calc(-1 * var(--gutter)); background: var(--bg); }
.prow__meta { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--muted-dark); }
.prow__meta i { font-style: normal; margin: 0 8px; }
.prow__title { font-size: clamp(24px, 2.3vw, 32px); font-weight: 400; letter-spacing: -0.03em; }
.prow__text .p-sm { max-width: 32ch; }
.prow__link { margin-top: 8px; }
.prow__media { aspect-ratio: 16 / 9; overflow: hidden; background: #8a9a7c; }
.prow__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--ease); }
.prow:hover .prow__media img { transform: scale(1); }
.plist__tail { height: 30vh; }

/* Underlined small link (reference "VIEW PROJECT") */
.slink { position: relative; display: inline-block; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; padding: 8px 0; }
.slink::before, .slink::after { content: ""; position: absolute; height: 1px; width: 14px; background: currentColor; transition: width 0.5s var(--ease); }
.slink::before { top: 0; left: 0; } .slink::after { bottom: 0; right: 0; }
.slink:hover::before, .slink:hover::after { width: 100%; }

/* Article pages (about, journal note, project detail): sticky image band, article slides over */
.band-img { position: sticky; top: 0; z-index: 1; height: 56vh; overflow: hidden; background: #cfcac0; }
.band-img img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.band-img--pale::after { content: ""; position: absolute; inset: 0; background: rgba(246, 246, 246, 0.55); }
.article { position: relative; z-index: 2; background: var(--bg); padding: 56px var(--gutter) 96px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.article__body { display: flex; flex-direction: column; gap: 18px; max-width: 46ch; }
.article__lede { font-size: clamp(24px, 2.4vw, 32px); font-weight: 400; letter-spacing: -0.035em; line-height: 1.1; }
.article__strong { font-size: 15px; font-weight: 700; line-height: 1.45; }
.article__side { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding-top: 6px; }
.article__side .eyebrow { color: var(--muted-dark); }
.article__title { font-size: clamp(40px, 4.8vw, 66px); font-weight: 400; letter-spacing: -0.04em; line-height: 1; max-width: 10ch; }
.fullimg { position: relative; z-index: 2; background: var(--bg); padding: 0 var(--gutter) 96px; }
.fullimg figure { aspect-ratio: 21 / 9; overflow: hidden; background: #8a9a7c; }
.fullimg img { width: 100%; height: 100%; object-fit: cover; }

/* Dark CTA block */
.cta-dark { position: relative; z-index: 2; background: var(--ink); color: var(--bg); padding: 96px var(--gutter); }
.cta-dark__inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.cta-dark .eyebrow { color: var(--muted); }
.cta-dark h2 { font-size: clamp(32px, 3.6vw, 48px); font-weight: 400; letter-spacing: -0.035em; line-height: 1.05; }
.cta-dark p { font-size: 15px; color: rgba(246, 246, 246, 0.65); }
.cta-dark .slink { margin-top: 8px; }

/* Journal list page */
.jlist { position: relative; z-index: 2; background: var(--bg); padding: 40px var(--gutter) 96px; }
.jlist .journal__row { padding: 18px 0; }
.jlist .journal__title { font-size: clamp(22px, 2.3vw, 30px); }

/* Contact page */
.contact-page { position: relative; z-index: 2; background: var(--bg); padding: 140px var(--gutter) 120px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact-page__text { display: flex; flex-direction: column; gap: 18px; max-width: 40ch; }
.contact-page__text .eyebrow { color: var(--muted-dark); }
.contact-page__text .lead { font-size: 15px; font-weight: 700; line-height: 1.45; }
.cform { display: flex; flex-direction: column; gap: 26px; }
.cform label { display: flex; flex-direction: column; gap: 8px; }
.cform label span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--muted-dark); }
.cform input, .cform textarea { border: 0; border-bottom: 1px solid rgba(28, 28, 28, 0.25); background: transparent; padding: 10px 0; outline: none; resize: vertical; transition: border-color 0.3s; }
.cform input:focus, .cform textarea:focus { border-color: var(--ink); }
.cform button { align-self: flex-start; background: var(--ink); color: var(--bg); border: 0; cursor: pointer; padding: 14px 26px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; transition: background 0.3s; }
.cform button:hover { background: var(--green); }
.cform .thanks { display: none; font-size: 13px; color: var(--green); }
.cform.is-sent .thanks { display: block; }
.page-tag { position: relative; z-index: 2; background: var(--bg); padding: 0 var(--gutter) 40px; }
.page-tag .tag { position: static; }


/* Pale hero (journal): light photo, dark type, no shade */
.hero--pale { background: var(--bg); }
.hero--pale .hero__media { background: linear-gradient(180deg, #f1efeb, #dedbd3); }
.hero--pale .hero__shade { display: none; }
.hero--pale .hero__lede { color: var(--muted-dark); }
.hero--pale .hero__title, .hero--pale .hero__cta, .hero--pale .hero__tag { color: var(--ink); }
body.page-pale .nav { color: var(--ink); }
body.page-pale .menu-toggle { color: var(--ink); mix-blend-mode: normal; }

/* eight expertise rows in the half-fold card */
.card:has(> .journal--dense) { padding-top: 64px; }
.journal--dense .journal__row { padding: 8px 0; }
/* subsidiary mark: the name sits in the line, the logo pops out above it on hover */
.journal__row { position: relative; }
.row__brand { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; min-width: 160px; }
.row__brand span { display: inline-block; transition: opacity 0.3s ease, transform 0.4s var(--ease); }
.row__logo {
  position: absolute; right: 0; bottom: -4px;
  width: 190px; height: 44px; object-fit: contain; object-position: right center;
  opacity: 0; transform: translateY(10px) scale(0.6); transform-origin: right bottom;
  transition: opacity 0.3s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.card--dark .row__logo, .cta-dark .row__logo { filter: brightness(0) invert(1); }
.journal__row:hover .row__brand span, .journal__row:focus-visible .row__brand span { opacity: 0; transform: translateY(-8px); }
.journal__row:hover .row__logo, .journal__row:focus-visible .row__logo { opacity: 1; transform: translateY(-26px) scale(1); }
.journal__row:hover .journal__title { color: var(--green); }
.journal__title { transition: color 0.3s ease; }

/* ---------- about page: half-fold cards in the home style ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat { border-top: 1px solid rgba(246, 246, 246, 0.2); padding-top: 18px; }
.stat__num { display: block; white-space: nowrap; font-size: clamp(36px, 4vw, 64px); font-weight: 300; letter-spacing: -0.04em; line-height: 1; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.about-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.about-grid__text { display: flex; flex-direction: column; gap: 16px; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pillar { border-top: 1px solid rgba(28, 28, 28, 0.15); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.pillar .eyebrow { color: var(--muted-dark); }
.pillar h4 { font-size: clamp(20px, 2vw, 24px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }
.pillar p { font-size: 15px; line-height: 1.45; color: var(--muted-dark); }
.card--dark .pillar { border-color: rgba(246, 246, 246, 0.2); }
.card--dark .pillar .eyebrow { color: var(--muted); }
.card--dark .pillar p { color: var(--muted); }
.clients-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 32px; }
.clients-grid div { height: 72px; border-top: 1px solid rgba(28, 28, 28, 0.15); display: flex; align-items: center; }
.clients-grid img { height: 30px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; opacity: 0.5; transition: opacity 0.4s ease; }
.clients-grid img.is-tall { height: 42px; }
.clients-grid div:hover img { opacity: 1; }
.faq--wide .faq__inner { width: min(100%, 1040px); align-items: flex-start; gap: 32px; }
.faq--wide .faq__head { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); width: 100%; align-items: end; }
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; }
.person { background: #ffffff; border: 1px solid #d9d9d9; padding: 22px 24px 20px; min-height: 168px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; transition: transform 0.6s var(--ease), border-color 0.4s ease; }
.person:hover { transform: translateY(-4px); border-color: var(--green); }
.person__mono { width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; letter-spacing: 0.06em; font-weight: 500; }
.person strong { display: block; font-size: clamp(18px, 1.5vw, 21px); font-weight: 400; letter-spacing: -0.02em; margin-bottom: 4px; }
.person span:not(.person__mono) { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--muted-dark); }

/* clients strip: monochrome marks scrolling under the contact stage */
.clients { position: relative; z-index: 2; background: var(--bg); color: var(--text); padding: 64px 0 24px; border-top: 1px solid rgba(28, 28, 28, 0.1); overflow: hidden; }
.clients__head { padding: 0 var(--gutter); margin-bottom: 36px; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.clients__head .eyebrow { color: var(--muted-dark); }
.clients__head p { font-size: 15px; color: var(--muted-dark); }
.clients__track { display: flex; width: max-content; gap: 0; animation: clients-scroll 48s linear infinite; }
.clients:hover .clients__track { animation-play-state: paused; }
.clients__set { display: flex; align-items: center; gap: clamp(48px, 5vw, 88px); padding-right: clamp(48px, 5vw, 88px); }
.clients__set img { height: 32px; width: auto; max-width: 150px; object-fit: contain; opacity: 0.45; filter: grayscale(1); transition: opacity 0.4s ease; }
.clients__set img.is-tall { height: 44px; }
.clients__set img:hover { opacity: 1; }
@keyframes clients-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .clients__track { animation: none; flex-wrap: wrap; width: auto; padding: 0 var(--gutter); } .clients__set:last-child { display: none; } }
.journal--dense .journal__title { font-size: clamp(16px, 1.45vw, 20px); }
.journal--dense .journal__date { letter-spacing: 0.08em; }

/* ==========================================================================
   PHONE LAYER — measured from the reference at 375×812.
   Stacking is kept: the hero pins with its text in the top 44%, cards pin at
   top:0 with their content seated in the lower part of the panel.
   ========================================================================== */
@media (max-width: 809px) {
  :root { --gutter: 20px; }
  body { font-size: 18px; }
  .p-sm { font-size: 18px; line-height: 1.2; }
  .h-md { font-size: 26px; line-height: 1.2; font-weight: 300; letter-spacing: -0.03em; }
  .h-lg { font-size: 26px; line-height: 1.05; font-weight: 500; letter-spacing: -0.03em; }
  .h-xl { font-size: 51px; line-height: 0.98; font-weight: 500; letter-spacing: -0.04em; }

  /* nav: logo + hamburger (two lines) at the top right */
  .nav { padding: 24px var(--gutter); }
  .nav__links { display: none; }
  .menu-toggle { top: 28px; right: var(--gutter); width: 47px; height: 20px; gap: 6px; align-items: stretch; justify-content: center; }
  .menu-toggle span { width: 100%; height: 1px; border-radius: 0; }
  .menu-toggle span:nth-child(2) { display: none; }
  .menu-toggle { transition: opacity 0.4s ease, transform 0.45s var(--ease); }
  .nav.is-hidden + .menu-toggle:not(.is-open) { opacity: 0; pointer-events: none; }
  .menu-toggle.is-open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg) scaleX(1); }
  .menu-toggle.is-open span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg) scaleX(1); }

  /* hero: bottom-anchored column — title (right) / lede (left) / link; pins with 56% still visible */
  .hero { top: calc(var(--vh) * -0.48); }
  .hero__slide {
    display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
    padding: 0 var(--gutter) 50px;
  }
  .hero__title { font-size: 51px; line-height: 0.98; font-weight: 500; letter-spacing: -0.04em; text-align: right; max-width: none; order: 1; }
  .hero__lede { font-size: 26px; line-height: 1.05; font-weight: 500; letter-spacing: -0.035em; max-width: none; padding: 0; margin-top: 40px; order: 2; }
  .hero__cta { align-self: flex-start; margin: 40px 0 0 10px; order: 3; font-size: 15px; letter-spacing: -0.01em; text-transform: none; padding: 4px 0; }
  .hero__tag { bottom: 10px; }
  .hero__slide.is-active .hero__title { transition-delay: 0.36s; }

  /* stacking panels: pin at the top, cards seated low in the panel (reference offsets) */
  .stack { display: flow-root; }
  .panel, .panel--top { position: sticky; top: 0; height: var(--vh); align-items: flex-start; }
  .card, .card--quote { margin-top: calc(var(--vh) * 0.5); min-height: calc(var(--vh) * 0.5); padding: 40px var(--gutter) 44px; display: flex; align-items: center; }
  .card .tag { bottom: 16px; }

  .intro { grid-template-columns: 1fr; gap: 28px; }
  .intro__text { gap: 11px; }
  .intro__media { display: none; }

  /* selected projects: heading, then a horizontal strip of 297px tiles */
  .projects { grid-template-columns: 1fr; gap: 22px; }
  .projects__text .p-sm { display: none; }
  .projects__grid { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; width: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .projects__grid::-webkit-scrollbar { display: none; }
  .projects__grid .project { flex: 0 0 297px; scroll-snap-align: start; display: block; }
  .projects__grid .project:nth-child(n + 3) { display: block; }
  .project figure { aspect-ratio: 297 / 216; }
  .project span { font-size: 15px; letter-spacing: 0; margin-top: 12px; }

  /* journal / expertise rows: bigger titles, dates hidden */
  .journal__row { padding: 16px 0; }
  .journal__title { font-size: 26px; font-weight: 300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .journal__date { display: none; }
  .journal--dense .journal__row { padding: 9px 0; }
  .journal--dense .journal__title { font-size: 20px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 20px; }
  .stat__num { font-size: 40px; margin-bottom: 6px; }
  .about-grid { grid-template-columns: 1fr; gap: 20px; }
  .pillars { grid-template-columns: 1fr; gap: 14px; }
  .pillar { padding-top: 12px; gap: 4px; }
  .pillar h4 { font-size: 20px; }
  .pillar p { font-size: 14px; }
  .faq--wide .faq__head { grid-template-columns: 1fr; gap: 12px; }
  .clients-grid { grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
  .clients-grid div { height: 56px; }
  .clients-grid img { height: 24px; }
  .clients-grid img.is-tall { height: 34px; }
  .card:has(> .journal--dense) { padding-top: 48px; }
  .people { grid-template-columns: 1fr 1fr; gap: 10px; }
  .person { padding: 16px; min-height: 0; gap: 18px; }
  .person__mono { width: 32px; height: 32px; font-size: 11px; }
  .person strong { font-size: 16px; }
  .clients { padding: 44px 0 16px; }
  .clients__head { flex-direction: column; gap: 6px; margin-bottom: 26px; }
  .clients__set img { height: 26px; max-width: 110px; }
  .clients__set img.is-tall { height: 36px; }

  /* quote: statement left (right-aligned), source beside it */
  .quote { grid-template-columns: 1.9fr 1fr; gap: 30px; align-items: start; }
  .quote__text { font-size: 26px; font-weight: 500; line-height: 1.05; text-align: right; }
  .quote__cite { font-size: 18px; }

  /* outcomes / faq stage */
  .faq { padding: 60px 13px; align-items: center; overflow-y: auto; }
  .faq__inner { gap: 40px; }
  .faq__inner .h-lg { text-align: center; }
  .faq__list { gap: 32px; }
  .faq__item dt { font-size: 18px; margin-bottom: 8px; }
  .faq__item dd { font-size: 18px; line-height: 1.2; }

  /* contact hero shares the hero column */
  .contact__slide { padding-bottom: calc(var(--vh) * 0.15); }
  .contact__slide .hero__title { max-width: none; }
  .contact__slide .hero__cta { align-self: flex-end; margin-right: 10px; }

  /* newsletter + footer */
  .newsletter { grid-template-columns: 1fr; gap: 40px; padding: 60px var(--gutter) 64px; }
  .newsletter__text p { font-size: 18px; line-height: 1.2; }
  .newsletter__row input { font-size: 16px; }
  .footer { grid-template-columns: 1fr; gap: 40px; padding: 60px var(--gutter) 20px; }
  .footer__brand { font-size: 18px; line-height: 1.2; }
  .footer__cols { grid-template-columns: 1fr; gap: 36px; }
  .footer__col h4, .footer__col a { font-size: 18px; }
  .footer__copy { margin-top: 24px; text-align: right; }

  /* fullscreen menu */
  .menu { padding: 100px var(--gutter) 40px; }
  .menu__link { font-size: 44px; }

  /* ---------- inner pages ---------- */
  /* projects list: pinned title panel, rows with text above the image */
  .plist__title { padding: 90px var(--gutter) 0; gap: 16px; }
  .plist__title .h-xl { font-size: 51px; font-weight: 500; max-width: none; }
  .prow { height: auto; min-height: 60vh; grid-template-columns: 1fr; gap: 30px; padding: 40px var(--gutter) 30px; align-items: start; align-content: end; }
  .prow__text { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "meta meta" "title link" "desc desc"; gap: 10px 16px; align-items: end; align-content: end; min-height: 200px; padding: 16px 0 0 var(--gutter); margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .prow__meta { grid-area: meta; }
  .prow__title { grid-area: title; font-size: 26px; font-weight: 500; }
  .prow__text .p-sm { grid-area: desc; max-width: 30ch; }
  .prow__link { grid-area: link; margin: 0; font-size: 15px; text-transform: none; letter-spacing: -0.01em; }
  .prow__media { aspect-ratio: 335 / 120; }

  /* article pages: band, then title (right) above the lede */
  .band-img { height: 400px; }
  .article { grid-template-columns: 1fr; gap: 20px; padding: 40px var(--gutter) 60px; }
  .article__side { order: 1; padding-top: 0; align-items: flex-end; }
  .article__title { font-size: 51px; font-weight: 500; letter-spacing: -0.04em; text-align: right; max-width: none; }
  .article__body { order: 2; padding-left: 10px; gap: 20px; max-width: none; }
  .article__lede { font-size: 26px; font-weight: 500; line-height: 1.05; }
  .article__strong, .article__body .p-sm { font-size: 18px; line-height: 1.2; }
  .fullimg { padding-bottom: 60px; }
  .cta-dark { padding: 120px var(--gutter); }
  .cta-dark__inner { max-width: none; gap: 20px; }
  .cta-dark h2 { font-size: 51px; font-weight: 500; letter-spacing: -0.04em; }
  .cta-dark p { font-size: 18px; }
  .cta-dark .slink { font-size: 15px; text-transform: none; letter-spacing: -0.01em; }

  /* journal list page */
  .jlist { padding: 40px var(--gutter) 60px; }

  /* contact page */
  .contact-page { grid-template-columns: 1fr; gap: 60px; padding: 210px var(--gutter) 60px; }
  .contact-page__text { gap: 20px; max-width: none; }
  .contact-page__text .h-xl { font-size: 51px; font-weight: 500; }
  .contact-page__text .lead, .contact-page__text .p-sm { font-size: 18px; line-height: 1.2; }
  .cform label span { font-size: 15px; text-transform: none; letter-spacing: -0.01em; }
  .cform input, .cform textarea { font-size: 16px; padding: 8px 10px; }
  .cform button { font-size: 15px; text-transform: none; letter-spacing: -0.01em; padding: 12px 24px; }
  .page-tag .tag { justify-content: flex-end; }
}

/* very short landscape phones / small tablets: keep flow so nothing is cut */
@media (max-height: 560px) and (max-width: 809px) {
  .panel { position: relative; height: auto; }
  .card { margin-top: 0 !important; }
  .fade-wrap { height: auto; margin-top: 0; }
  .fade-sticky { position: relative; height: auto; display: flex; flex-direction: column; }
  .contact, .faq { position: relative; inset: auto; height: var(--vh); }
  .faq { order: -1; }
}

/* ==========================================================================
   v2 — client review: pale opening, wordmark CTA, team grid, careers, tiles
   ========================================================================== */
/* About opening: text only on the pale ground, statement right-aligned */
.opening { position: relative; z-index: 1; background: var(--bg); min-height: calc(var(--vh) * 0.72); display: flex; align-items: flex-end; justify-content: flex-end; padding: 200px var(--gutter) 72px; }
.opening__text { max-width: 30ch; text-align: right; font-size: clamp(20px, 2.1vw, 28px); font-weight: 400; letter-spacing: -0.035em; line-height: 1.1; color: var(--muted-dark); }
.opening__mark { position: absolute; left: var(--gutter); bottom: 72px; width: 20px; height: 10px; background: #d9d9d9; }
.opening + .stack .panel:first-child { z-index: 3; }

/* CTA set like the wordmark: heavy, wide, uppercase */
.cta-mark { position: relative; z-index: 2; background: var(--bg); color: var(--ink); padding: 120px var(--gutter) 110px; text-align: center; overflow: hidden; }
.cta-mark .eyebrow { display: block; color: var(--muted-dark); margin-bottom: 28px; }
.cta-mark__link { display: inline-block; transform-origin: 50% 60%; will-change: transform, opacity; font-weight: 900; font-size: clamp(30px, 6.2vw, 92px); line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; transform: scaleX(1.12); transform-origin: center; transition: color 0.4s ease, transform 0.6s var(--ease); }
.cta-mark__link:hover { color: var(--green); }
.cta-mark__link small { display: block; font-size: 0.42em; font-weight: 500; letter-spacing: 0; margin-top: 0.4em; color: var(--muted-dark); text-transform: none; }
.cta-mark::before, .cta-mark::after { content: ""; position: absolute; top: 48px; width: 20px; height: 10px; background: #d9d9d9; }
.cta-mark::before { left: var(--gutter); } .cta-mark::after { right: var(--gutter); }

/* Leadership: staircase of slim portrait cards, as in the original site */
.team-stairs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; align-items: start; }
.stair { display: flex; flex-direction: column; gap: 6px; color: inherit; transform-origin: 0% 100%; will-change: transform, opacity; opacity: 0; }
.stair:nth-child(2) { margin-top: 24px; } .stair:nth-child(3) { margin-top: 48px; } .stair:nth-child(4) { margin-top: 72px; } .stair:nth-child(5) { margin-top: 96px; } .stair:nth-child(6) { margin-top: 120px; }
.stair__media { aspect-ratio: 3 / 4; overflow: hidden; background: #d9d9d9; margin-bottom: 10px; }
.stair__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transform: scale(1.02); transition: transform 1.2s var(--ease), filter 0.6s ease; }
.stair:hover .stair__media img { transform: scale(1.06); filter: grayscale(0); }
.stair__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(160deg, #e9e9e9, #cdcdcd); color: var(--green); font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: 0.04em; }
.stair__role { font-size: 12px; font-weight: 300; letter-spacing: -0.01em; color: var(--muted-dark); }
.stair__name { font-size: clamp(15px, 1.15vw, 17px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
/* Leadership: the compact ruled list from the previous version */
.people-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 32px; list-style: none; margin: 0; padding: 0; }
.people-list li { display: flex; flex-direction: column; gap: 3px; padding-top: 12px; border-top: 1px solid rgba(28, 28, 28, 0.15); }
.people-list strong { font-weight: 300; font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -0.03em; }
.people-list span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--muted-dark); }
.card--dark .people-list li { border-color: rgba(246, 246, 246, 0.22); }
.card--dark .people-list span { color: var(--muted); }
.team-section { padding-bottom: 96px; }
/* Team: portrait grid, name + role appear on hover */
.team-section { position: relative; z-index: 2; background: var(--bg); padding: 0 var(--gutter) 110px; }
.team-section__head { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: end; margin-bottom: 40px; }
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.member { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #d9d9d9; }
.member img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transform: scale(1.02); transition: transform 1.2s var(--ease), filter 0.6s ease; }
.member:hover img { transform: scale(1.06); filter: grayscale(0.2); }
.member__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(160deg, #e9e9e9, #cdcdcd); color: var(--green); font-size: clamp(32px, 4vw, 56px); font-weight: 500; letter-spacing: 0.04em; }
.member__info { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 20px 18px; background: linear-gradient(180deg, rgba(28, 28, 28, 0) 0%, rgba(28, 28, 28, 0.78) 100%); color: var(--bg); opacity: 0; transform: translateY(12px); transition: opacity 0.45s ease, transform 0.6s var(--ease); }
.member__info strong { display: block; font-size: clamp(18px, 1.5vw, 22px); font-weight: 400; letter-spacing: -0.02em; }
.member__info span { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: rgba(246, 246, 246, 0.7); }
.member:hover .member__info, .member:focus-within .member__info, .member.is-open .member__info { opacity: 1; transform: none; }

/* Careers: open positions list */
.careers { position: relative; z-index: 2; background: var(--bg); padding: 0 var(--gutter) 120px; }
.careers__head { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; margin-bottom: 28px; }
.careers__head .h-md { max-width: 14ch; }
.careers__filters { display: flex; gap: 22px; font-size: 13px; color: var(--muted-dark); }
.careers__filters a.is-active { color: var(--ink); }
.jobs { border-top: 1px solid rgba(28, 28, 28, 0.15); }
.job { display: grid; grid-template-columns: minmax(120px, 0.6fr) minmax(0, 1.6fr) auto; gap: 24px; padding: 30px 0; border-bottom: 1px solid rgba(28, 28, 28, 0.15); align-items: start; color: inherit; transition: padding-left 0.5s var(--ease); }
.job:hover { padding-left: 12px; }
.job__loc { display: inline-block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--green); background: rgba(59, 75, 31, 0.12); padding: 5px 10px; border-radius: 2px; }
.job__title { font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.05; }
.job p { font-size: 14px; line-height: 1.5; color: var(--muted-dark); max-width: 54ch; margin-top: 10px; }
.job__arrow { width: 22px; height: 22px; margin-top: 6px; color: var(--ink); transition: transform 0.5s var(--ease); }
.job:hover .job__arrow { transform: translate(4px, -4px); }
.careers--page { padding-top: 200px; }

/* Projects: sector folds with numbered portrait tiles, the name straddling the image edge */
.sector { display: flex; flex-direction: column; gap: 22px; }
.card:has(> .sector) { padding-bottom: 104px; }
.sector__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.sector__head .stackcol { display: flex; flex-direction: column; gap: 14px; }
.sector__figure { display: inline-flex; align-items: baseline; gap: 10px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--muted-dark); }
.sector__figure b { font-size: 26px; font-weight: 300; letter-spacing: -0.04em; text-transform: none; color: var(--green); }
.card--dark .sector__figure b { color: var(--bg); }
.sector__head .p-sm { max-width: 46ch; }
.card--dark .p-sm { color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tile { display: block; position: relative; color: inherit; }
.tile__idx { display: block; font-size: 11px; letter-spacing: 0.1em; color: var(--muted-dark); margin-bottom: 10px; }
.tile__media { position: relative; height: clamp(220px, calc(var(--vh) - 500px), 420px); overflow: hidden; background: #cfcac0; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s var(--ease); }
.tile:hover .tile__media img { transform: scale(1.09); }
.tile__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, rgba(246, 246, 246, 0) 0%, rgba(246, 246, 246, 0.82) 100%); }
.card--dark .tile__media::after { background: linear-gradient(180deg, rgba(28, 28, 28, 0) 0%, rgba(28, 28, 28, 0.82) 100%); }
.tile__name { position: relative; z-index: 2; display: block; margin: -0.62em 0 0 4px; font-size: clamp(22px, 2.1vw, 34px); font-weight: 400; letter-spacing: -0.04em; line-height: 0.98; max-width: 9ch; }
.tile__meta { display: block; margin-top: 10px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--muted-dark); }
.tile__meta b { font-weight: 500; color: var(--green); }
.card--dark .tile__meta b { color: var(--bg); }

/* Contact: details + form fold */
.form-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.form-section__text { display: flex; flex-direction: column; gap: 20px; }
.details { display: flex; flex-direction: column; gap: 22px; }
.details dl { display: grid; grid-template-columns: 90px 1fr; row-gap: 12px; column-gap: 20px; font-size: 14px; }
.details dt { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--muted-dark); padding-top: 3px; }
.details dd a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(28, 28, 28, 0.3); }
.form { display: flex; flex-direction: column; gap: 22px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form label { display: flex; flex-direction: column; gap: 8px; }
.form label span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--muted-dark); }
.form input, .form textarea { border: 0; border-bottom: 1px solid rgba(28, 28, 28, 0.25); background: transparent; padding: 10px 0; outline: none; resize: vertical; font-weight: 300; transition: border-color 0.3s; }
.form input:focus, .form textarea:focus { border-color: var(--green); }
.form__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form button { background: var(--ink); color: var(--bg); border: 0; padding: 14px 22px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease; }
.form button:hover { background: var(--green); }
.form__thanks { display: none; font-size: 13px; color: var(--green); }
.form.is-sent .form__thanks { display: inline; }

/* a flowing section right after the stack arrives over the last pinned card (no 50vh gap) */
.stack + .flow-next { position: relative; z-index: 8; margin-top: calc(var(--vh) * -0.5); } /* exact overlap set by fitPanels() */
.fade-wrap--plain { height: calc(var(--vh) * 1.5); }
.fade-wrap--plain .contact { opacity: 1; }
/* fade stage that follows flowing sections instead of the stack */
.fade-wrap--flow { margin-top: 0; }

/* phone */
@media (max-width: 809px) {
  .opening { min-height: 0; padding: 150px var(--gutter) 56px; }
  .opening__text { font-size: 22px; }
  .cta-mark { padding: 80px var(--gutter) 70px; }
  .cta-mark__link { font-size: 34px; transform: scaleX(1.06); }
  .team-section { padding-bottom: 70px; }
  .team-section__head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; }
  .team { grid-template-columns: 1fr 1fr; gap: 10px; }
  .people-list { grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .team-stairs { grid-template-columns: 1fr 1fr; gap: 14px; }
  .stair:nth-child(n) { margin-top: 0; }
  .stair:nth-child(even) { margin-top: 24px; }
  .member__info { opacity: 1; transform: none; padding: 40px 12px 12px; }
  .careers { padding-bottom: 80px; }
  .careers--page { padding-top: 150px; }
  .job { grid-template-columns: 1fr auto; gap: 8px 16px; padding: 22px 0; }
  .job__loc { grid-column: 1 / -1; justify-self: start; }
  .job__title { font-size: 22px; }
  .sector__head { grid-template-columns: 1fr; gap: 16px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 14px; }
  .tile__media { height: auto; aspect-ratio: 4 / 5; }
  .card:has(> .sector) { padding-bottom: 72px; }
  .tile__name { font-size: 20px; }
  .form-section { grid-template-columns: 1fr; gap: 32px; }
  .form__row { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}
.people--dark .person { background: rgba(246, 246, 246, 0.06); border-color: rgba(246, 246, 246, 0.22); color: var(--bg); }
.people--dark .person:hover { border-color: var(--bg); }
.people--dark .person span:not(.person__mono) { color: var(--muted); }
.people--dark .person__mono { background: var(--bg); color: var(--green); }

/* ==========================================================================
   Contact — the original site's layout: full-bleed photo, frosted panel
   ========================================================================== */
.glass-page { position: relative; z-index: 2; min-height: var(--vh); padding: 140px var(--gutter) 40px; display: flex; align-items: stretch; color: #ffffff; overflow: hidden; }
.glass-page__bg { position: absolute; inset: 0; z-index: 0; background: #6e6e6e; }
.glass-page__bg img { width: 100%; height: 100%; object-fit: cover; }
.glass-page__bg::after { content: ""; position: absolute; inset: 0; background: rgba(28, 28, 28, 0.12); }
.glass { position: relative; z-index: 1; width: 100%; min-height: calc(var(--vh) - 180px); padding: 30px 30px 40px; background: rgba(157, 157, 157, 0.35); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); display: grid; grid-template-rows: auto 1fr auto; }
.glass__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.glass__label { font-size: 24px; font-weight: 300; letter-spacing: -0.03em; }
.glass__title { font-size: clamp(34px, 3.9vw, 56px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.02; text-align: right; max-width: 12ch; }
.glass__form { align-self: end; display: flex; flex-direction: column; gap: 14px; width: min(100%, 420px); padding: 40px 14px 0; }
.glass__form label { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 16px; font-size: 15px; font-weight: 400; }
.glass__form input, .glass__form textarea { border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.55); background: transparent; color: #ffffff; padding: 10px 0; outline: none; font-size: 15px; font-weight: 300; resize: vertical; transition: border-color 0.3s; }
.glass__form input:focus, .glass__form textarea:focus { border-color: #ffffff; }
.glass__form textarea { min-height: 42px; }
.glass__foot { display: flex; align-items: center; gap: 20px; margin-top: 16px; padding-left: 136px; }
.glass__form button { background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.8); padding: 12px 26px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; }
.glass__form button:hover { background: #ffffff; color: var(--ink); }
.glass__thanks { display: none; font-size: 14px; }
.glass__form.is-sent .glass__thanks { display: inline; }
.glass__mark { position: absolute; right: 30px; bottom: 30px; width: 20px; height: 10px; background: #ffffff; }
@media (max-width: 809px) {
  .glass-page { padding: 110px var(--gutter) 24px; }
  .glass { min-height: calc(var(--vh) - 134px); padding: 20px 18px 30px; }
  .glass__head { flex-direction: column; gap: 18px; }
  .glass__label { font-size: 18px; }
  .glass__title { text-align: left; font-size: 32px; max-width: none; }
  .glass__form { width: 100%; padding: 32px 0 0; }
  .glass__form label { grid-template-columns: 1fr; gap: 4px; }
  .glass__foot { padding-left: 0; }
  .glass__mark { right: 18px; bottom: 18px; }
}

/* photo stage: the site image as a full-viewport fold (arrives over the previous section, holds, then releases) */
.photo { position: absolute; inset: 0; background: #cfcac0; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); will-change: transform; }
.photo .tag { color: rgba(246, 246, 246, 0.85); }

/* Projects opening: pale, the categories we work in as an index that jumps to each fold */
.opening--projects { flex-direction: column; align-items: stretch; justify-content: flex-end; min-height: calc(var(--vh) * 0.9); padding-top: 170px; }
.opening__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px; }
.opening__head .eyebrow { color: var(--muted-dark); }
.opening--projects .opening__text { margin-left: auto; }
.cat-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(28, 28, 28, 0.15); }
.cat-index a { display: grid; grid-template-columns: 60px 1fr auto; align-items: baseline; gap: 24px; padding: 22px 0; border-bottom: 1px solid rgba(28, 28, 28, 0.15); color: var(--ink); transition: padding-left 0.5s var(--ease), color 0.3s ease; }
.cat-index a:hover { padding-left: 12px; color: var(--green); }
.cat-index i { font-style: normal; font-size: 11px; letter-spacing: 0.1em; color: var(--muted-dark); }
.cat-index strong { font-size: clamp(30px, 3.6vw, 52px); font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.cat-index span { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--muted-dark); }
@media (max-width: 809px) {
  .opening--projects { padding-top: 130px; min-height: 0; }
  .opening__head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 24px; }
  .opening--projects .opening__text { margin-left: 0; text-align: left; font-size: 20px; }
  .cat-index a { grid-template-columns: 36px 1fr; gap: 10px 14px; padding: 16px 0; }
  .cat-index strong { font-size: 30px; }
  .cat-index span { grid-column: 2; }
}