/* =====================================================
   Hengthor Architect — v3 template (Figma "Demo 02" + "About 02")
   Colors: original Figma template theme (client decision 2026-09-07)
   ===================================================== */

:root {
  /* Figma template palette ("HengThor Archi" Demo 02 / About 02) —
     applied per client decision 2026-09-07, replacing the previous locked green palette */
  --ink: #131313;
  --gray-900: #1A1D18;
  --gray-500: #525856;
  --border: #D9D9D9;
  --white: #FFFFFF;
  --off-white: #FBFBFB;
  --surface: #F5F5F5;
  --pale: #edded5;                    /* tan — light section bg */
  --accent: #2a3a1e;                  /* eyebrows/links on light */
  --sage: #edded5;                    /* accents + headings on dark (template tan) */
  --moss: #90af44;                    /* CTA buttons (olive green, dark text) */
  --emerald: #0D6D52;
  --forest: #2a3a1e;                  /* template dark green */
  --leaf: #97AD52;
  --brown: #897061;                   /* template brown band */

  /* Roles */
  --dark-1: var(--forest);            /* hero + footer */
  --dark-2: var(--brown);             /* mega dark band */
  --text-on-dark: #edded5;
  --muted-on-dark: rgba(237, 222, 213, 0.78);
  --line-on-dark: rgba(237, 222, 213, 0.22);

  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --container: 1230px;
  --gutter: clamp(20px, 4vw, 70px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--off-white);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; background: none; border: none; cursor: pointer; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container-wide { width: min(1780px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- Type ---------- */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.eyebrow.on-dark { color: var(--sage); }
.eyebrow.on-light { color: var(--accent); }

h1, h2 { font-weight: 300; letter-spacing: -0.03em; line-height: 1.12; }
h1 { font-size: clamp(2.5rem, 4.5vw, 3.75rem); }
h2 { font-size: clamp(1.875rem, 3vw, 2.625rem); }
.section-title { font-size: clamp(1.625rem, 2.4vw, 2rem); font-weight: 400; letter-spacing: 0; line-height: 1.32; max-width: 1050px; }
.section-title.on-dark { color: var(--text-on-dark); }
.body-text { color: var(--gray-500); letter-spacing: 0.4px; }
.on-dark .body-text, .body-text.on-dark { color: var(--muted-on-dark); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition: all 0.25s ease;
}
.btn-cta {
  background: var(--moss);
  color: var(--ink);
  padding: 13px 26px;
  border-radius: 55px;
}
.btn-cta:hover { background: var(--white); }
.btn-outline {
  padding: 15px 36px;
  border: 1px solid var(--line-on-dark);
  color: var(--sage);
  border-radius: 55px;
}
.btn-outline:hover { border-color: var(--sage); background: rgba(237, 222, 213, 0.08); }
.btn-outline.line-white { border-color: var(--white); color: var(--white); }
.btn-outline.line-white:hover { background: rgba(255, 255, 255, 0.12); }
.btn-outline.line-white .icon-arrow { filter: brightness(0) invert(1); }
.btn-text { color: var(--ink); border-bottom: 1px solid transparent; padding-bottom: 2px; }
.btn-text:hover { color: var(--accent); }
.icon-arrow { width: 10px; height: 10px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Arch images ---------- */
.arch { overflow: hidden; }
.arch img { width: 100%; height: 100%; object-fit: cover; }

/* =====================================================
   HEADER
   ===================================================== */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
}
.header-inner {
  width: min(1780px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding-block: 34px;
}
.logo { display: flex; flex-direction: column; line-height: 1; }
.logo-img { height: 57.2px; width: auto;   /* 44px + 30% */ display: block; transition: opacity 0.25s ease; }
.logo:hover .logo-img { opacity: 0.85; }
.logo-word {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sage);
}
.logo-sub {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--sage);
  margin-top: 6px;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.5vw, 40px);
  margin-left: auto;
}
.main-nav a:not(.btn) {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
  transition: color 0.2s ease;
}
.main-nav a:not(.btn):hover { color: var(--sage); }
.header-phone {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  white-space: nowrap;
}
.header-phone:hover { color: var(--sage); }
.header-rule {
  width: min(1780px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  border-bottom: 1px solid rgba(251, 251, 251, 0.18);
}
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--off-white); transition: transform 0.25s ease, opacity 0.25s ease; }
/* Scroll-aware header (js/main.js), every screen size: at the top of the page it sits over the
   hero as designed. Once the page scrolls past it, it becomes a fixed black bar that slides away
   while scrolling down and slides back in while scrolling up. It becomes fixed while hidden
   (.no-anim for that one frame), so the switch never shows. Visible state keeps transform: none —
   a transform would trap the fixed mobile menu inside the header. */
.site-header { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease; }
.header-inner { transition: padding-block 0.35s ease; }
.site-header.is-fixed { position: fixed; background: var(--ink); }
.site-header.is-fixed .header-inner { padding-block: 14px; }
.site-header.is-fixed .header-rule { display: none; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.no-anim, .site-header.no-anim .header-inner { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .site-header, .header-inner { transition: none; }
}

/* =====================================================
   HERO
   ===================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--dark-1);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute; inset: 0;
  /* dark under the copy on the left, clearing towards the right; tuned so the small
     eyebrow and intro text hold 4.5:1 over the brightest part of the photo behind them */
  background:
    /* header band: keeps the nav and phone line readable whatever the photo's top edge is */
    linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0, rgba(0, 0, 0, 0.62) 100px, rgba(0, 0, 0, 0) 240px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.22) 72%, rgba(0, 0, 0, 0.12) 100%);
}
/* phones and short landscape screens: the copy runs most of the width, past the dark
   left edge of the side-to-side gradient — shade evenly instead */
@media (max-width: 820px), (max-height: 500px) {
  .hero-overlay { background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.7) 100%); }
}
.hero-content { position: relative; z-index: 2; padding-top: 180px; margin-bottom: auto; }
.hero-content { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.hero-content h1 { color: var(--text-on-dark); max-width: 500px; margin-bottom: 30px; }
.hero-content .eyebrow { margin-bottom: 26px; }
.hero-content .lede { color: var(--muted-on-dark); max-width: 480px; letter-spacing: 0.4px; }
.hero-content .hero-cta { align-self: flex-start; margin-top: 34px; }
.hero-display {
  position: relative;
  z-index: 2;
  font-size: clamp(2.25rem, 12.3vw, 14.875rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 0.95;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--sage) 0%, rgba(237, 222, 213, 0) 105%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-top: 18px;
  margin-bottom: -0.08em;
}

/* =====================================================
   ABOUT TEASER (dark)
   ===================================================== */
.about-teaser { background: var(--dark-1); color: var(--text-on-dark); padding-bottom: clamp(80px, 9vw, 150px); }
.anchor-strip {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(28px, 6vw, 120px);
  padding-block: 48px 0;
  border-top: 1px solid var(--line-on-dark);
}
.anchor-strip a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--sage);
  transition: color 0.2s ease;
}
.anchor-strip a:hover { color: var(--off-white); }
.chev { display: inline-block; flex: none; width: 12px; height: 8px; }
/* thin line chevron facing down (same drawing as the projects location dropdown) */
.chev path { fill: none; stroke: currentColor; stroke-width: 1.5; }

.about-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: center;
  margin-top: clamp(60px, 8vw, 120px);
}
.about-images { position: relative; min-height: 560px; }
.about-images .img-sm { position: absolute; left: 0; top: 0; width: 46%; aspect-ratio: 270 / 266; }
.about-images .img-lg { position: absolute; left: 30%; top: 27%; width: 66%; aspect-ratio: 364 / 392; }
.stat-tile {
  position: absolute;
  left: 10%;
  bottom: 0;
  width: 172px;
  height: 160px;
  background: #90af44;
  color: #080b13;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  box-shadow: -20px 60px 70px rgba(0, 0, 0, 0.45);
  z-index: 2;
}
.stat-number { font-size: 6rem; font-weight: 300; line-height: 0.9; letter-spacing: -4px; }
.stat-label { font-size: 0.75rem; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; margin-top: 10px; }
.vertical-label {
  position: absolute;
  right: -4%;
  top: 8%;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--sage);
}
.about-copy h2 { color: var(--text-on-dark); margin-bottom: 26px; max-width: 390px; }
.about-copy .body-text { color: var(--muted-on-dark); max-width: 390px; margin-bottom: 40px; }

/* =====================================================
   WHAT WE DO (light)
   ===================================================== */
.what-we-do { background: var(--pale); padding-block: clamp(70px, 9vw, 130px); }
.what-we-do .section-title { color: var(--forest); max-width: 685px; margin-bottom: 26px; }
.services-grid {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(42, 58, 30, 0.18);
}
.service-card {
  padding: clamp(28px, 3.5vw, 52px) clamp(24px, 3vw, 46px);
  border-bottom: 1px solid rgba(42, 58, 30, 0.18);
  position: relative;
  transition: background 0.3s ease;
}
.service-card:nth-child(3n+1) { padding-left: 0; }
.service-card:not(:nth-child(3n+1)) { border-left: 1px solid rgba(42, 58, 30, 0.18); }
.service-card:hover { background: rgba(189, 208, 147, 0.18); }
.service-number {
  font-size: 2.625rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  -webkit-text-stroke: 1px rgba(42, 58, 30, 0.4);
  color: transparent;
  display: block;
  margin-bottom: 46px;
}
.service-card h3 { font-size: 1.125rem; font-weight: 500; color: var(--forest); margin-bottom: 14px; letter-spacing: 0.4px; }
.service-card p { color: var(--gray-500); letter-spacing: 0.4px; }

/* =====================================================
   SPLIT SECTION
   ===================================================== */
.split-section { display: grid; grid-template-columns: 1fr 1fr; min-height: min(100vh, 820px); }
.split-panel { position: relative; overflow: hidden; display: block; }
.split-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.split-panel:hover img { transform: scale(1.04); }
.split-shade { position: absolute; inset: 0; background: rgba(19, 19, 19, 0.55); transition: background 0.4s ease; }
.split-shade.light { background: rgba(19, 19, 19, 0.2); }
.split-panel:hover .split-shade { background: rgba(19, 19, 19, 0.25); }
.split-label {
  position: absolute;
  left: clamp(24px, 8%, 130px);
  bottom: 44%;
  font-size: clamp(2.5rem, 4.2vw, 5rem);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--off-white);
}
.split-label.dim { color: rgba(251, 251, 251, 0.4); }

/* =====================================================
   SHOWCASE
   ===================================================== */
.showcase { position: relative; }
.showcase > img { width: 100%; max-height: 100vh; object-fit: cover; }
/* fade behind the caption so it stays readable over bright photos (aerials, renders) */
.showcase::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.72) 100%);
  pointer-events: none;
}
/* phones: the image is short and the caption fills most of it — fade from higher up */
@media (max-width: 820px) {
  .showcase::after { height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.66) 45%, rgba(0, 0, 0, 0.76) 100%); }
}
.showcase-caption {
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(24px, 5vw, 64px);
  color: var(--off-white);
  font-size: clamp(1rem, 1.6vw, 1.5625rem);
  font-weight: 500;
  letter-spacing: 0.5px;
  max-width: 600px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

/* =====================================================
   DARK BAND
   ===================================================== */
.dark-band { background: var(--dark-2); color: var(--text-on-dark); }

/* Featured projects */
.featured { padding-top: clamp(70px, 9vw, 120px); }
.featured .section-title { margin-bottom: clamp(36px, 5vw, 64px); }
.category-lists { display: flex; gap: clamp(40px, 8vw, 140px); flex-wrap: wrap; margin-bottom: clamp(48px, 6vw, 90px); }
.category-lists li {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 2;
  color: var(--muted-on-dark);
}
.category-lists li::before { content: "– "; color: var(--sage); }
.project-track {
  display: flex;
  gap: clamp(24px, 5vw, 100px);
  align-items: flex-end;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  padding-inline: var(--gutter);
  padding-bottom: 8px;
}
.project-track::-webkit-scrollbar { display: none; }
.project-track.dragging { cursor: grabbing; scroll-behavior: auto; }
.project-card { flex: 0 0 auto; width: min(448px, 78vw); }
.project-card img { height: min(476px, 90vw); width: 100%; object-fit: cover; user-select: none; }
.project-card.tall img { height: min(529px, 96vw); }
/* photo frame (about): clips the enlarged, drifting photo so it never spills onto the caption */
.project-card-media { display: block; overflow: hidden; }
.project-card-link { flex: 0 0 auto; display: block; color: inherit; }
.project-card-link:focus-visible { outline: 2px solid var(--white); outline-offset: 6px; }
/* category · name · location. White on the brown band (4.6:1) — the template's tan
   on brown is only ~2.3:1, below AA; hierarchy comes from size and weight instead */
.project-card figcaption {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  color: var(--white);
}
.pc-meta { font-size: 0.75rem; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; }
.pc-name { font-size: 1.25rem; font-weight: 500; letter-spacing: 0.5px; line-height: 1.35; color: var(--white); }
.pc-loc { font-size: 1rem; letter-spacing: 0.4px; }
.drag-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sage);
  padding-block: 34px 0;
}
.drag-chevron { width: 6px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.drag-chevron:last-child { margin-left: -2px; } /* offsets the letter-spacing trailing "drag" */

/* Marquee */
.marquee-band {
  margin-top: clamp(56px, 7vw, 100px);
  border-top: 1px solid var(--line-on-dark);
  border-bottom: 1px solid var(--line-on-dark);
  padding-block: 54px;
  overflow: hidden;
}
.marquee { overflow: hidden; }
.marquee-inner {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee 36s linear infinite;
  font-size: clamp(1.125rem, 1.6vw, 1.625rem);
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sage);
  white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-inner { animation: none; } }

/* Who we are */
.who-we-are { padding-top: clamp(70px, 9vw, 120px); }
.who-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: center;
}
.who-images { position: relative; min-height: 540px; }
.who-images .img-a { position: absolute; left: 0; top: 0; width: 60%; aspect-ratio: 418 / 315; }
.who-images .img-b { position: absolute; left: 30%; top: 31%; width: 66%; aspect-ratio: 464 / 372; }
.who-images .vertical-label { right: -8%; top: 52%; }
.who-copy h2 { color: var(--text-on-dark); margin-bottom: 26px; max-width: 390px; }
.who-copy .body-text { color: var(--muted-on-dark); max-width: 390px; }

/* Stats */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 45px);
  margin-top: clamp(70px, 9vw, 120px);
}
.stat-big { font-size: clamp(2.75rem, 4vw, 3.75rem); font-weight: 300; letter-spacing: -2px; color: var(--sage); }
.stat-big small { font-size: 0.45em; letter-spacing: 0; margin-left: 4px; }
.stat-rule { border: none; border-top: 1px solid var(--line-on-dark); margin-block: 18px 22px; }
.stat p { color: var(--muted-on-dark); letter-spacing: 0.4px; max-width: 390px; }
.stat p strong { color: var(--text-on-dark); font-weight: 700; }

/* Process */
.process { padding-block: clamp(80px, 10vw, 150px) 0; }
.process-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: center;
}
.process-copy h2 { color: var(--text-on-dark); max-width: 605px; margin-bottom: clamp(36px, 5vw, 70px); }
.process-accordion { border-top: 1px solid var(--line-on-dark); max-width: 605px; }
.process-item { border-bottom: 1px solid var(--line-on-dark); }
.process-heading { margin: 0; font: inherit; }
.process-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 24px);
  padding: clamp(18px, 2vw, 26px) 0;
  background: none;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--text-on-dark);
  transition: opacity 0.25s ease;
}
.process-trigger:hover { opacity: 0.75; }
.process-trigger:focus-visible { outline: 2px solid var(--text-on-dark); outline-offset: 3px; }
.process-number {
  flex: none;
  min-width: 2.4ch;
  font-size: clamp(1.625rem, 2.6vw, 2.375rem);
  font-weight: 300;
  letter-spacing: -1.5px;
  line-height: 1;
  color: inherit;
  opacity: 0.55;
  transition: opacity 0.25s ease;
}
.process-item.is-open .process-number { opacity: 1; }
.process-title {
  flex: 1;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.5px;
}
.process-icon { flex: none; position: relative; width: 16px; height: 16px; }
.process-icon::before,
.process-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.process-icon::after { transform: translateY(-50%) rotate(90deg); }
.process-item.is-open .process-icon::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.process-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.process-item.is-open .process-panel { grid-template-rows: 1fr; }
.process-panel-inner { overflow: hidden; }
.process-panel p {
  color: var(--muted-on-dark);
  letter-spacing: 0.4px;
  padding-left: calc(2.4ch + clamp(14px, 1.8vw, 24px));
  padding-bottom: clamp(20px, 2.4vw, 30px);
}
.process-image { aspect-ratio: 525 / 523; }
@media (prefers-reduced-motion: reduce) {
  .process-panel, .process-icon::before, .process-icon::after, .process-trigger { transition: none; }
}

/* Why choose us */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 120px);
  padding-block: clamp(80px, 10vw, 150px);
  align-items: start;
}
.why-copy h2 { color: var(--text-on-dark); max-width: 442px; }
.why-detail .body-text { color: var(--muted-on-dark); margin-bottom: 44px; }
.skill { margin-bottom: 28px; }
.skill-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 12px;
}
.skill-track { height: 3px; background: var(--white); }
.skill-fill { height: 100%; width: 0; background: var(--sage); transition: width 1.2s ease 0.2s; }
.skill-fill.visible { width: var(--w); }

/* =====================================================
   CATEGORY BAND
   ===================================================== */
.arch-top { border-radius: 0; }
.category-band {
  position: relative;
  overflow: hidden;
  min-height: min(90vh, 870px);
  margin-top: -1px;
  display: flex;
  align-items: stretch;
}
/* The 4 photos live in one full-bleed layer and are clipped to their own column.
   On hover the clip opens to the whole band, so that category's photo takes over. */
.band-media { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
/* .band-columns sets width:100%, which overrides .container-wide, so the four
   columns are full-bleed quarters of the band — the clip below matches them exactly. */
.band-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 calc((3 - var(--i)) * 25%) 0 calc(var(--i) * 25%));
  transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.band-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transform: translateY(var(--py, 0)) scale(1.12);
}
/* hovered (or keyboard-focused) column: its photo covers the whole band */
.category-band:has(.band-col:nth-child(1):hover) .band-slide:nth-child(1),
.category-band:has(.band-col:nth-child(2):hover) .band-slide:nth-child(2),
.category-band:has(.band-col:nth-child(3):hover) .band-slide:nth-child(3),
.category-band:has(.band-col:nth-child(4):hover) .band-slide:nth-child(4),
.category-band:has(.band-col:nth-child(1):focus-visible) .band-slide:nth-child(1),
.category-band:has(.band-col:nth-child(2):focus-visible) .band-slide:nth-child(2),
.category-band:has(.band-col:nth-child(3):focus-visible) .band-slide:nth-child(3),
.category-band:has(.band-col:nth-child(4):focus-visible) .band-slide:nth-child(4) {
  clip-path: inset(0);
  z-index: 1;
}
.band-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(19, 19, 19, 0.25) 30%, rgba(19, 19, 19, 0.72) 100%);
  transition: background 0.45s ease;
}
/* darken a little while a column is open so the revealed body copy stays legible */
.category-band:has(.band-col:hover) .band-shade,
.category-band:has(.band-col:focus-visible) .band-shade {
  background: linear-gradient(180deg, rgba(19, 19, 19, 0.38) 25%, rgba(19, 19, 19, 0.8) 100%);
}
.band-columns {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
}
.band-col {
  border-left: 1px solid rgba(251, 251, 251, 0.28);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 3vw, 48px);
  min-height: min(90vh, 870px);
}
.band-col:first-child { border-left: none; }
.band-col:focus-visible { outline: 2px solid var(--off-white); outline-offset: -6px; }
.band-title {
  font-size: clamp(1.375rem, 2vw, 2rem);
  font-weight: 400;
  color: var(--off-white);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* collapsed to 0fr, so opening the row lifts the title by exactly the copy's height */
.band-desc {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.band-desc-inner { overflow: hidden; }
.band-desc p {
  color: rgba(251, 251, 251, 0.85);
  letter-spacing: 0.4px;
  max-width: 361px;
  padding-top: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease 0.1s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.band-col:hover .band-desc,
.band-col:focus-visible .band-desc { grid-template-rows: 1fr; }
.band-col:hover .band-desc p,
.band-col:focus-visible .band-desc p { opacity: 1; transform: none; }

/* no :has() support — never hide the copy behind an effect that cannot run */
@supports not selector(:has(*)) {
  .band-desc { grid-template-rows: 1fr; }
  .band-desc p { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .band-slide, .band-shade, .band-title, .band-desc, .band-desc p { transition: none; }
  .band-slide img { transform: none; }
}

/* =====================================================
   TESTIMONIAL
   ===================================================== */
.testimonial { background: var(--pale); padding-block: clamp(80px, 10vw, 130px); text-align: center; }
.avatar-row { display: inline-flex; align-items: center; gap: 20px; margin-bottom: 44px; }
.avatar { width: 61px; height: 61px; border-radius: 50%; object-fit: cover; }
.avatar-meta { text-align: left; }
.avatar-name { display: block; font-size: 1.125rem; font-weight: 500; letter-spacing: 0.5px; color: rgba(42, 58, 30, 0.85); }   /* 0.65 was 3.7:1 on tan */
.avatar-loc { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(42, 58, 30, 0.8); margin-top: 6px; }   /* 0.45 was 2.3:1 */
.testimonial blockquote {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.6;
  color: rgba(42, 58, 30, 0.75);
  max-width: 810px;
  margin-inline: auto;
  margin-bottom: 56px;
}
.slider-nav { display: inline-flex; align-items: center; gap: 28px; }
.slider-nav span { font-size: 0.75rem; font-weight: 700; letter-spacing: 1.8px; color: rgba(42, 58, 30, 0.85); }   /* 0.7 was 4.2:1 */
.slider-arrow img { width: 87px; height: 9px; opacity: 0.7; transition: opacity 0.2s ease; }
.slider-arrow:hover img { opacity: 1; }

/* =====================================================
   INSIGHTS
   ===================================================== */
.insights { background: var(--off-white); padding-block: clamp(80px, 10vw, 140px); }
.insights-display {
  font-size: clamp(3.5rem, 7vw, 6.25rem);
  font-weight: 200;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--forest);
  margin-bottom: clamp(56px, 7vw, 110px);
}
.insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.insight-img { position: relative; overflow: hidden; aspect-ratio: 390 / 260; }
.insight-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.insight-card:hover .insight-img img { transform: scale(1.05); }
.insight-btn {
  position: absolute;
  left: 0; top: 0;
  background: var(--white);
  color: #080814;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 12px 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.insight-date { font-size: 0.75rem; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--accent); margin-top: 30px; }
.insight-card h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: 0.5px; line-height: 1.5; color: var(--forest); margin-top: 13px; max-width: 390px; }

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer {
  position: relative;
  background: var(--dark-1);
  color: var(--text-on-dark);
  overflow: hidden;
  padding-top: clamp(70px, 9vw, 120px);
  margin-top: -1px;
}
.footer-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.25;
  pointer-events: none;
}
.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(40px, 5vw, 100px);
}
.footer-logo { display: inline-block; margin-bottom: 32px; transition: opacity 0.25s ease; }
.footer-logo img { height: 57.2px; width: auto; display: block; }   /* same size as the header logo */
.footer-logo:hover { opacity: 0.85; }
.footer-lede { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 400; line-height: 1.35; max-width: 600px; color: var(--text-on-dark); margin-bottom: 26px; }
.footer-body { color: var(--muted-on-dark); letter-spacing: 0.4px; max-width: 595px; margin-bottom: 56px; }
.footer-contacts { display: flex; gap: clamp(40px, 6vw, 90px); flex-wrap: wrap; }
.footer-contacts .eyebrow { margin-bottom: 14px; }
.contact-line { font-size: 1rem; font-weight: 500; letter-spacing: 0.5px; }
.contact-line a:hover { color: var(--sage); }
.footer-links h4 { font-size: 1.25rem; font-weight: 500; letter-spacing: 0.5px; margin-bottom: 34px; color: var(--text-on-dark); }
.footer-links li { margin-bottom: 22px; }
.footer-links a { font-size: 1rem; letter-spacing: 0.5px; color: var(--muted-on-dark); transition: color 0.2s ease; }
.footer-links a:hover { color: var(--sage); }
.footer-bottom { position: relative; padding-block: 40px 44px; }
.footer-bottom hr { border: none; border-top: 1px solid var(--line-on-dark); margin-bottom: 36px; }
.footer-meta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-meta p { font-size: 0.75rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted-on-dark); }
.footer-actions { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); margin-left: auto; }
/* Back to top (js/main.js scrolls up): the template's ring arrow, turned to point up */
.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  transition: color 0.3s ease;
}
.back-to-top svg { display: block; flex: none; border-radius: 50%; transform: rotate(90deg); transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; }
.back-to-top .arrow-ring { fill: none; stroke: currentColor; stroke-opacity: 0.28; transition: stroke 0.3s ease, stroke-opacity 0.3s ease; }
.back-to-top .arrow-chevron { fill: none; stroke: currentColor; }
.back-to-top:hover, .back-to-top:focus-visible { color: var(--white); }
/* hover: the ring fills white (as the slider arrows do) and lifts slightly */
.back-to-top:hover svg, .back-to-top:focus-visible svg { background: var(--white); color: var(--forest); transform: rotate(90deg) translateX(-3px); }
.back-to-top:hover .arrow-ring, .back-to-top:focus-visible .arrow-ring { stroke: var(--white); stroke-opacity: 1; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1080px) {
  .about-grid, .who-grid, .process-grid, .why-grid { grid-template-columns: 1fr; }
  .about-images, .who-images { max-width: 620px; }
  .process-image { max-width: 620px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .service-card:not(:nth-child(3n+1)) { border-left: none; }
  .service-card:nth-child(2n) { border-left: 1px solid rgba(42, 58, 30, 0.18); }
  .service-card:nth-child(3n+1) { padding-left: clamp(24px, 3vw, 46px); }
  .service-card:nth-child(2n+1) { padding-left: 0; }
}

/* Header: the full menu plus the "or WhatsApp us" line needs ~1200px. That line goes
   first; at 960px and below (landscape phones, small tablets) the menu collapses behind the toggle. */
@media (max-width: 1200px) {
  .header-phone { display: none; }
}
@media (max-width: 960px) {
  .nav-toggle { display: flex; margin-left: auto; }
  .main-nav {
    position: fixed;
    inset: 0;
    background: var(--forest);
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    transform: translateY(-100%);
    transition: transform 0.35s ease;
    z-index: 40;
    overflow-y: auto;
    padding-block: 90px 40px;
  }
  .main-nav.open { transform: none; }
  .main-nav a:not(.btn) { font-size: 1rem; }
  /* solid black bar (palette ink) so the logo and menu icon stand out; no rule underneath */
  .site-header { position: fixed; background: var(--ink); }
  .header-inner { padding-block: 14px; }
  .header-rule { display: none; }
  .nav-toggle { position: relative; z-index: 45; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 820px) {
  .hero-content { padding-top: 140px; }
  .split-section { grid-template-columns: 1fr; }
  .split-panel { min-height: 60vh; }
  .split-label { bottom: 10%; }
  .band-columns { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
  .band-col { min-height: 45vh; }
  .band-media { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
  .band-slide, .band-slide:first-child, .band-slide:last-child { position: relative; inset: auto; clip-path: none; }
  .band-desc { grid-template-rows: 1fr; }
  .band-desc p { opacity: 1; transform: none; }
  .insights-grid { grid-template-columns: 1fr; max-width: 480px; }
  .stats-row { grid-template-columns: 1fr; }
  .anchor-strip { gap: 20px 32px; }
}

@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-card, .service-card:nth-child(2n) { border-left: none; padding-left: 0; }
  /* mission full width; Company + Projects link lists side by side below it */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-mission { grid-column: 1 / -1; }
  .about-images { min-height: 72vw; }
  .about-images .img-sm { width: 52%; }
  .about-images .img-lg { width: 72%; left: 26%; }
  .stat-tile { width: 140px; height: 132px; }
  .stat-number { font-size: 4.5rem; }
  .who-images { min-height: 80vw; }
  .vertical-label { display: none; }
  .band-columns { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  .band-col { min-height: 42vh; padding-block: 28px; border-left: none; border-top: 1px solid rgba(251,251,251,0.28); }
  .band-media { grid-template-columns: 1fr; }
}

/* =====================================================
   ABOUT PAGE
   ===================================================== */
.about-hero {
  background: var(--dark-1);
  padding-top: 110px;
  overflow: hidden;
}
.about-hero .hero-display { margin-bottom: 0; padding-top: 40px; }
.about-hero-img {
  width: min(1010px, 100% - 2 * var(--gutter));
  margin: -0.55em auto 0;
  aspect-ratio: 1010 / 568;
  position: relative;
  z-index: 3;
}

.statement-banner {
  position: relative;
  min-height: min(100vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--dark-1);
}
.statement-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.statement-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }
.statement-banner h2 {
  position: relative;
  font-size: clamp(2.5rem, 4.5vw, 3.75rem);   /* keeps its old h1 size */
  z-index: 2;
  color: var(--text-on-dark);
  text-align: center;
  max-width: 1006px;
  padding-inline: var(--gutter);
}

.trust-section { background: var(--dark-1); padding-block: clamp(70px, 9vw, 130px); }
.trust-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 8vw, 180px);
  align-items: start;
}
.trust-lede { font-size: 1.25rem; font-weight: 500; letter-spacing: 0.5px; line-height: 1.3; color: var(--text-on-dark); max-width: 420px; margin-bottom: 56px; }
.trust-score { font-size: 3.125rem; font-weight: 600; letter-spacing: -2px; color: var(--text-on-dark); line-height: 1.1; }
.trust-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-on-dark); margin-top: 8px; }
.trust-stars { width: 103px; margin-top: 10px; }
.trust-detail .body-text { color: var(--muted-on-dark); margin-bottom: 44px; }

.brown-band { background: var(--dark-2); color: var(--text-on-dark); padding-top: clamp(70px, 9vw, 120px); }

.about-who {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: center;
}
/* Who we are: full Hengthor logo in a 600 x 640 box (it replaced the two-photo
   collage), with the rotated "15 years experience" label on its right.
   contain keeps the tall logo undistorted; its white ground matches the band. */
.about-collage { display: flex; align-items: center; gap: 18px; }
.about-who-logo { flex: 0 1 600px; min-width: 0; aspect-ratio: 600 / 640; height: auto; object-fit: contain; object-position: right center; }
/* phones: the label is hidden, so centre the logo in its box instead */
@media (max-width: 560px) { .about-who-logo { object-position: center; } }
.about-collage .vertical-label { position: static; flex: none; color: var(--forest); }
/* Who we are sits on its own white band: dark green title, black copy */
.about-who-band { background: var(--white); padding-block: clamp(70px, 9vw, 120px); }
.about-who-copy { border-left: 1px solid rgba(42, 58, 30, 0.22); padding-left: clamp(24px, 4vw, 70px); }
.about-who-copy h2 { color: var(--forest); margin-bottom: 26px; max-width: 393px; }
.about-who-copy .body-text { color: var(--ink); max-width: 394px; }
.about-who-copy .body-text + .body-text { margin-top: 18px; }

.brown-band .stats-row { border-top: 1px solid var(--line-on-dark); padding-top: clamp(40px, 5vw, 70px); margin-top: clamp(50px, 7vw, 90px); }
/* stats now open the band (Who we are moved to its own white band above) — no divider on top */
.brown-band > .stats-row:first-child { border-top: none; margin-top: 0; padding-top: 0; }
/* the statement banner sits between the stats and the gallery on About —
   give it the same rhythm the gallery has, so the stat copy isn't flush to the photo */
.brown-band .statement-banner { margin-top: clamp(50px, 7vw, 90px); }
.brown-band .featured-gallery { border-top: 1px solid var(--line-on-dark); margin-top: clamp(50px, 7vw, 90px); padding-top: clamp(50px, 7vw, 90px); }

.how-we-work { padding-block: clamp(70px, 9vw, 130px) clamp(80px, 10vw, 150px); }
.how-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(40px, 5vw, 90px);
}
.how-head h2 { color: var(--text-on-dark); max-width: 285px; margin-top: 16px; }
.how-intro { color: var(--white); letter-spacing: 0.4px; max-width: 340px; margin-top: 24px; }
/* tan on the brown band is ~2.3–2.8:1; white is 4.6:1, so this section's text is white */
.how-we-work .eyebrow, .how-we-work h2, .how-we-work .how-step h3 { color: var(--white); }
.how-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px) clamp(40px, 5vw, 70px);
}
.how-step { position: relative; }
.how-number {
  font-size: clamp(4rem, 6vw, 6.25rem);
  font-weight: 500;
  letter-spacing: -0.085em;
  line-height: 1;
  background: linear-gradient(180deg, rgba(237, 222, 213, 0.4) 18%, rgba(237, 222, 213, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  margin-bottom: -0.35em;
}
.how-step h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: 0.5px; color: var(--text-on-dark); margin-bottom: 14px; }
.how-step p { color: var(--muted-on-dark); letter-spacing: 0.4px; max-width: 350px; }
/* About: three services in a row (title only). The 560px rule below stacks them. */
.how-steps--3 { grid-template-columns: repeat(3, 1fr); align-content: start; align-self: center; }   /* centred against the heading + intro */
@media (max-width: 800px) { .how-steps--3 { grid-template-columns: 1fr; } }


.journey { background: var(--pale); padding-block: clamp(80px, 10vw, 140px); }
.journey-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 140px);
  align-items: center;
}
.journey-copy h2 { color: var(--forest); margin-bottom: 30px; max-width: 523px; }
.journey-copy .body-text { color: rgba(42, 58, 30, 0.85); max-width: 525px; margin-bottom: 44px; }   /* 5.3:1 on tan */
.btn-outline.on-light { border-color: rgba(0, 0, 0, 0.25); color: #080814; }
.btn-outline.on-light:hover { border-color: #080814; background: rgba(42, 58, 30, 0.06); }
.journey-images { position: relative; min-height: 560px; }
.journey-images .j-1 { position: absolute; left: 0; top: 0; width: 52%; aspect-ratio: 246 / 261; }
.journey-images .j-2 { position: absolute; left: 22%; top: 32%; width: 82%; aspect-ratio: 392 / 411; }
.journey-images .vertical-label { right: -6%; top: 55%; color: var(--forest); }
/* these two sit just outside their images; below 720px that is outside the screen */
@media (max-width: 720px) { .who-images .vertical-label, .journey-images .vertical-label { display: none; } }

.main-nav a.active { color: var(--sage); }

@media (max-width: 1080px) {
  .trust-grid, .about-who, .how-grid, .journey-grid { grid-template-columns: 1fr; }
  .about-collage, .journey-images { max-width: 620px; }
  .about-who-copy { border-left: none; padding-left: 0; }
}
@media (max-width: 560px) {
  .how-steps { grid-template-columns: 1fr; }
  .journey-images { min-height: 92vw; }
}

/* =====================================================
   MICRO-INTERACTIONS & MICRO-ANIMATIONS
   (per Webflow demos: architectio home-two / archiesta about-two)
   ===================================================== */

/* ---------- Hero load sequence ---------- */
.hero-content .eyebrow, .hero-content h1, .hero-content .lede, .hero-content .hero-cta,
.about-hero .hero-display, .about-hero-img {
  opacity: 0;
  transform: translateY(34px);
}
body.loaded .hero-content .eyebrow, body.loaded .hero-content h1, body.loaded .hero-content .lede, body.loaded .hero-content .hero-cta,
body.loaded .about-hero .hero-display, body.loaded .about-hero-img {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
body.loaded .hero-content h1 { transition-delay: 0.15s; }
body.loaded .hero-content .lede { transition-delay: 0.3s; }
body.loaded .hero-content .hero-cta { transition: opacity 0.9s ease 0.45s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s, background 0.25s ease; }
body.loaded .about-hero-img { transition-delay: 0.25s; }
.hero .hero-display { opacity: 0; transform: translateY(60px); }
body.loaded .hero .hero-display {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s ease 0.45s, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
}
.hero-media img {
  animation: heroZoom 2.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }

/* ---------- Image curtain reveal on scroll ----------
   The curtain clips the wrapper's children, not .img-reveal itself: Chrome treats an
   element hidden by its own clip-path as off-screen, so a wrapper that starts fully
   clipped never trips the scroll observer and its photo stays hidden for good
   (Firefox and Safari were unaffected). The wrapper keeps a no-op inset(0) clip so the
   zoomed-in photo stays inside its frame. The curtain is a keyframe animation rather
   than a transition because several hover rules redefine the images' transition list. */
.img-reveal { clip-path: inset(0); }
.img-reveal > * { clip-path: inset(0 0 100% 0); }
.img-reveal.visible > * { animation: curtainOpen 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) both; }
@keyframes curtainOpen {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0); }
}
.img-reveal img { transform: scale(1.14); transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
.img-reveal.visible img { transform: scale(1); }

/* ---------- Universal thumbnail hover zoom ---------- */
.arch img, .insight-img img, .split-panel img {
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}
figure.arch:hover img { transform: scale(1.05); }

/* ---------- Project cards: hover overlay + caption reveal ---------- */
.project-card { position: relative; }
.project-card img { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease; }
.project-card:hover img { transform: scale(1.05); filter: brightness(0.72); }
.project-card figcaption {
  transition: color 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.project-card-link:hover figcaption,
.project-card-link:focus-visible figcaption { transform: translateY(-6px); }
.project-card-link:hover img,
.project-card-link:focus-visible img { transform: scale(1.05); filter: brightness(0.72); }

/* ---------- Nav link underline slide ---------- */
.main-nav a:not(.btn) { position: relative; padding-bottom: 4px; }
.main-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--sage);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.main-nav a:not(.btn):hover::after, .main-nav a.active::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ---------- Buttons ---------- */
.btn-outline { position: relative; overflow: hidden; z-index: 1; }
.btn-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sage);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
.btn-outline:hover::before { transform: scaleY(1); }
.btn-outline:hover { color: #080814; border-color: var(--sage); background: transparent; }
.btn-outline.on-light::before { background: #2a3a1e; }
.btn-outline.on-light:hover { color: var(--pale); border-color: #2a3a1e; background: transparent; }
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.btn-cta:active { transform: translateY(0); }
.btn .icon-arrow { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.btn:hover .icon-arrow { transform: translate(3px, -3px); }
.insight-btn .icon-arrow { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.insight-btn:hover .icon-arrow { transform: translate(3px, -3px); }
.btn-text { position: relative; }
.btn-text::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-text:hover::after { transform: scaleX(1); transform-origin: left center; }

/* ---------- Anchor strip ---------- */
.anchor-strip a .chev { transition: transform 0.3s ease; }
.anchor-strip a:hover .chev { transform: translateY(3px); }

/* ---------- Marquee pause on hover ---------- */
.marquee:hover .marquee-inner { animation-play-state: paused; }

/* ---------- Drag gallery ---------- */
.project-track { cursor: grab; }
.drag-hint { animation: hintPulse 2.4s ease-in-out infinite; }
@keyframes hintPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ---------- Process step / testimonial content swap ---------- */
.t-swap { transition: opacity 0.35s ease, transform 0.35s ease; }
.t-swap.swapping { opacity: 0; transform: translateY(12px); }

/* ---------- Parallax media ---------- */
.parallax-media { overflow: hidden; }
.parallax-media > img { will-change: transform; transform: translateY(var(--py, 0)) scale(1.12); }
/* Smooth image parallax (main.js adds .plx-on and drives `translate`). The standalone
   `scale`/`translate` properties stack with the reveal and hover `transform`s instead of
   replacing them; 1.18 leaves room for the ±8% drift without showing the frame's edge. */
.plx-on img { scale: 1.18; will-change: translate; }

/* ---------- Slider arrows ---------- */
.slider-arrow img { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease; }
.slider-arrow.next:hover img { transform: translateX(6px); }
.slider-arrow.prev:hover img { transform: translateX(-6px); }

/* ---------- Band columns hover ---------- */
.split-label { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s ease; }
.split-panel:hover .split-label { transform: translateY(-8px); color: var(--off-white); }

/* ---------- Stagger (set via JS custom property) ---------- */
.reveal { transition-delay: var(--d, 0s); }
.img-reveal { transition-delay: var(--d, 0s); }
.img-reveal img { transition-delay: var(--d, 0s); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-content .eyebrow, .hero-content h1, .hero-content .lede, .hero-content .hero-cta,
  .hero .hero-display, .about-hero .hero-display, .about-hero-img,
  .img-reveal, .img-reveal img,
  .img-reveal > *, .img-reveal.visible > * {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
    animation: none;
  }
  .hero-media img { animation: none; }
  .drag-hint { animation: none; }
  .parallax-media > img { transform: none; }
}

/* =====================================================
   PROJECTS PAGE
   ===================================================== */
.projects-hero {
  position: relative;
  min-height: 450px;
  background: var(--dark-1);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.projects-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* same three-stop shade as the project detail hero: #0B0B0B 90% → 70% → 30% (top → bottom) */
.projects-hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0.9) 0%, rgba(11, 11, 11, 0.7) 50%, rgba(11, 11, 11, 0.3) 100%);
}
.projects-hero .container-wide { position: relative; z-index: 2; padding-bottom: 56px; }
.projects-title {
  font-size: clamp(3.5rem, 6.3vw, 7.5rem);
  font-weight: 300;
  letter-spacing: -2px;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--text-on-dark);
  opacity: 0;
  transform: translateY(40px);
}
body.loaded .projects-title {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease 0.1s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.projects-sub {
  color: var(--muted-on-dark);
  letter-spacing: 0.5px;
  margin-top: 20px;
  max-width: 620px;
  opacity: 0;
  transform: translateY(24px);
}
body.loaded .projects-sub {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease 0.3s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.projects-body { background: var(--pale); padding-block: clamp(56px, 7vw, 100px); }
/* Projects grid runs wider than the site's 1230px container */
.projects-body .container { --container: 1440px; }
.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
  margin-bottom: clamp(40px, 5vw, 70px);
}
.filter-bar { display: flex; flex-wrap: wrap; gap: 4px clamp(16px, 1.6vw, 28px); }
/* text tabs; the selected one is underlined. Same slide-in line as the main nav:
   it grows in on hover and stays full (and heavier) under the active tab. */
.filter-chip {
  position: relative;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 11px 0 13px;
  color: rgba(42, 58, 30, 0.85);   /* 5.3:1 on tan */
  background: transparent;
  transition: color 0.25s ease;
}
.filter-chip::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 4px;
  background: var(--forest);   /* dark green #2A3A1E */
  opacity: 0.35;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.filter-chip:hover { color: var(--forest); }
.filter-chip:hover::after,
.filter-chip.active::after { transform: scaleX(1); transform-origin: left center; }
.filter-chip.active { color: var(--forest); }   /* dark green #2A3A1E, same as the line */
.filter-chip.active::after { opacity: 1; }
.filter-chip:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .filter-chip, .filter-chip::after { transition: none; }
}
.filter-row-end { display: flex; align-items: center; flex-wrap: wrap; gap: 14px clamp(14px, 1.6vw, 22px); }
.location-filter { display: flex; align-items: center; gap: 12px; }
.location-filter label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--forest);
}
/* Native select in a thin outlined box (a dropdown needs the affordance); the chevron is a background SVG
   so the dropdown itself stays the browser's own (keyboard + screen-reader safe). */
.location-filter select {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  height: 40px;
  min-width: 184px;
  padding: 0 38px 0 16px;
  color: #080814;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23080814' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center;
  border: 1px solid rgba(42, 58, 30, 0.35);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.location-filter select:hover { background-color: var(--white); border-color: var(--white); }
.location-filter select:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; background-color: var(--white); border-color: var(--white); }
.location-filter select option { text-transform: none; }
/* Phones: the label moves above the dropdown so the dropdown and the view toggle share one row
   (inline, the 190px dropdown pushes the toggle onto its own line below ~420px). */
@media (max-width: 480px) {
  .filter-row-end { width: 100%; flex-wrap: nowrap; align-items: flex-end; }
  .location-filter { flex: 1; min-width: 0; flex-direction: column; align-items: stretch; gap: 8px; }
  .location-filter select { min-width: 0; width: 100%; padding: 0 34px 0 14px; background-position: right 14px center; }
}
.projects-empty {
  grid-column: 1 / -1;
  padding-block: 40px;
  font-size: 1rem;
  color: var(--forest);
}
.view-toggle { display: flex; gap: 6px; }
.view-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #080814;
  border: 1px solid rgba(42, 58, 30, 0.35);
  background: transparent;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.view-btn svg { display: block; width: 16px; height: 16px; fill: currentColor; }
.view-btn:hover,
.view-btn:focus-visible { background: var(--white); color: var(--forest); border-color: var(--white); }
.view-btn.active { background: #2a3a1e; color: var(--pale); border-color: #2a3a1e; }

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(40px, 4vw, 64px) 30px;
}
.pcard-img { position: relative; overflow: hidden; aspect-ratio: 390 / 260; }
.pcard-img > img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease; }
.pcard:hover .pcard-img > img { transform: scale(1.06); filter: brightness(0.85); }
/* Projects still waiting on client photography */
.pcard-nophoto {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--off-white); border: 1px solid rgba(42, 58, 30, 0.18);
  color: var(--forest);
  font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.pcard-btn {
  position: absolute;
  left: 0; top: 0;
  background: var(--white);
  color: #080814;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 12px 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pcard-btn .icon-arrow { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.pcard:hover .pcard-btn .icon-arrow { transform: translate(3px, -3px); }
.pcard { cursor: pointer; }
.pcard-meta {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 28px;
}
.pcard h3 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.4;
  color: var(--forest);
  margin-top: 12px;
  max-width: 390px;
  transition: color 0.3s ease;
}
.pcard:hover h3 { color: #080814; }
.pcard-loc { font-size: 1rem; letter-spacing: 0.4px; color: rgba(42, 58, 30, 0.6); margin-top: 8px; max-width: 390px; }

/* List view: one column of rows, image beside the copy. Same card markup as the
   grid, so switching views never re-renders or re-fetches anything. */
.projects-grid.is-list { grid-template-columns: 1fr; gap: 0; }
.projects-grid.is-list .pcard {
  display: grid;
  grid-template-columns: minmax(160px, 280px) 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding-block: clamp(18px, 2.2vw, 28px);
  border-top: 1px solid rgba(42, 58, 30, 0.22);
}
.projects-grid.is-list .pcard:last-child { border-bottom: 1px solid rgba(42, 58, 30, 0.22); }
.projects-grid.is-list .pcard-img { aspect-ratio: 16 / 10; }
.projects-grid.is-list .pcard-meta { margin-top: 0; }
.projects-grid.is-list h3 { margin-top: 10px; max-width: none; }
.projects-grid.is-list .pcard-loc { max-width: none; }

.pop-in { animation: popIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--d, 0s); }
@keyframes popIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1080px) { .projects-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .projects-grid { grid-template-columns: 1fr; }
  .projects-grid.is-list .pcard { grid-template-columns: 1fr; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .projects-title, .projects-sub { opacity: 1; transform: none; transition: none; }
  .pop-in { animation: none; }
}

/* =====================================================
   INSIGHTS LISTING PAGE (Figma "Blog 01" masonry)
   ===================================================== */
.insights-body { background: var(--white); padding-block: clamp(56px, 7vw, 100px); }
.masonry { display: flex; gap: 30px; align-items: flex-start; }
.m-col { flex: 1; display: flex; flex-direction: column; gap: clamp(40px, 4vw, 74px); min-width: 0; }

.icard { display: block; }
.icard-img { overflow: hidden; aspect-ratio: 390 / 550; }
.icard-img img, .itile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease; }
.icard:hover .icard-img img { transform: scale(1.05); filter: brightness(0.88); }
.icard-meta {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #080b13;
  margin-top: 32px;
}
.icard h3 {
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 400;
  line-height: 1.32;
  color: #080b13;
  margin-top: 22px;
  max-width: 386px;
  transition: color 0.3s ease;
}
.icard:hover h3 { color: var(--accent); }
.icard .btn-text { margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #080814; }

.icard-block { padding: clamp(36px, 4vw, 58px); }
.icard-block .icard-meta { margin-top: 0; }
.icard-block h3 { max-width: 280px; }
.icard-block.tone-green { background: #d7e699; }
.icard-block.tone-blush { background: #f2e3da; }
.icard-block:hover { filter: brightness(0.98); }

.itile { overflow: hidden; aspect-ratio: 390 / 352; }
.itile:hover img { transform: scale(1.05); }

/* Giant display marquee band */
.arch-marquee {
  background: var(--dark-1);
  overflow: hidden;
  padding-block: clamp(48px, 6vw, 110px) 0;
}
.arch-marquee-inner {
  display: flex;
  gap: 0.35em;
  width: max-content;
  white-space: nowrap;
  font-size: clamp(6rem, 12.5vw, 15rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 0.9;
  text-transform: uppercase;
  color: #527736;
  animation: marquee 50s linear infinite;
}
.arch-marquee-inner span { padding-right: 0.35em; }
@media (prefers-reduced-motion: reduce) { .arch-marquee-inner { animation: none; } }

@media (max-width: 1080px) { .masonry { flex-wrap: wrap; } .m-col { flex: 1 1 calc(50% - 15px); } }
@media (max-width: 640px) { .m-col { flex: 1 1 100%; } }

/* =====================================================
   BREADCRUMBS (shared component for all detail pages)
   ===================================================== */
.breadcrumbs { margin-bottom: 28px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 12px; }
.breadcrumbs a, .breadcrumbs span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 0.25s ease;
}
.breadcrumbs a:hover { color: #080814; }
.breadcrumbs li + li::before { content: "/"; font-size: 0.75rem; color: rgba(42, 58, 30, 0.4); }
.breadcrumbs [aria-current="page"] { color: rgba(42, 58, 30, 0.75); }   /* 0.55 was 3.2:1 on off-white; 0.75 ≈ 5.5:1 */

/* =====================================================
   INSIGHT DETAIL PAGE (Figma "Blog details")
   ===================================================== */
.article-header { background: var(--white); padding-top: clamp(48px, 6vw, 80px); }
.article-byline {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--brown);
  margin-bottom: 26px;
}
.article-title {
  font-size: clamp(2.25rem, 3.5vw, 3.75rem);
  font-weight: 300;
  letter-spacing: -2px;
  line-height: 1.1;
  color: var(--brown);
  max-width: 1020px;
}
.article-hero-img {
  width: min(1020px, 100%);
  margin-top: clamp(40px, 5vw, 70px);
  aspect-ratio: 1020 / 566;
  overflow: hidden;
}
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; }

.article-intro {
  display: flex;
  gap: clamp(32px, 4vw, 64px);
  align-items: flex-start;
  padding-block: clamp(48px, 6vw, 90px);
  background: var(--white);
}
.article-date { display: flex; gap: 6px; color: var(--forest); line-height: 1; flex-shrink: 0; }
.article-date .d-day { font-size: 4.125rem; font-weight: 600; letter-spacing: -3px; }
.article-date .d-col { display: flex; flex-direction: column; justify-content: space-between; padding-block: 4px; }
.article-date .d-yr { font-size: 1.125rem; }
.article-date .d-mo { font-size: 1.125rem; font-weight: 700; letter-spacing: 8px; text-transform: uppercase; }
.article-intro p { color: rgba(42, 58, 30, 0.7); letter-spacing: 0.5px; max-width: 810px; }

.article-band { background: var(--pale); padding-block: clamp(56px, 7vw, 100px); }
.article-band-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: clamp(40px, 5vw, 100px);
  align-items: start;
}
.article-pull {
  border-left: 3px solid var(--brown);
  padding-left: clamp(24px, 3vw, 44px);
  margin-bottom: 44px;
}
.article-pull p { font-size: 1.25rem; font-weight: 500; line-height: 1.6; letter-spacing: 0.5px; color: var(--brown); max-width: 538px; }
.article-pull cite { display: block; font-style: normal; font-size: 1rem; color: var(--brown); margin-top: 16px; opacity: 0.8; }
.article-band-copy p { color: rgba(42, 58, 30, 0.8); letter-spacing: 0.5px; max-width: 600px; margin-bottom: 24px; }
.article-band-copy h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: 0.5px; color: var(--forest); margin-bottom: 14px; margin-top: 8px; }

.author-card {
  background: var(--forest);
  padding: clamp(40px, 4vw, 72px) clamp(24px, 3vw, 28px);
  text-align: center;
  position: sticky;
  top: 40px;
}
.author-card img { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; margin-inline: auto; }
.author-card .a-name { font-size: 1.25rem; font-weight: 500; letter-spacing: 0.5px; color: var(--text-on-dark); margin-top: 30px; }
.author-card .a-role { font-size: 0.875rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: rgba(237, 222, 213, 0.75); margin-top: 6px; }
.author-card .a-bio { font-size: 1rem; line-height: 1.6; letter-spacing: 0.5px; color: var(--muted-on-dark); margin-top: 26px; max-width: 260px; margin-inline: auto; }

.article-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding-block: clamp(56px, 7vw, 100px) 0;
  background: var(--white);
  align-items: start;
}
.article-images figure { overflow: hidden; }
.article-images img { width: 100%; height: 100%; object-fit: cover; }
.article-images .a-img-1 { aspect-ratio: 600 / 550; }
.article-images .a-img-2 { aspect-ratio: 600 / 680; margin-top: clamp(-140px, -8vw, -60px); }

.article-body { background: var(--white); padding-block: clamp(48px, 6vw, 90px); }
.article-body p { color: rgba(42, 58, 30, 0.8); letter-spacing: 0.5px; max-width: 1020px; margin-bottom: 24px; }
.article-body h2 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.32;
  color: #111720;
  margin-block: 40px 24px;
  max-width: 804px;
}

.prevnext {
  background: var(--brown);
  padding: clamp(48px, 6vw, 90px) 0;
}
.prevnext-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.prevnext a { display: flex; flex-direction: column; gap: 18px; transition: opacity 0.3s ease; }
.prevnext a:hover { opacity: 0.85; }
.prevnext .pn-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--white);
}
.prevnext .pn-title { font-size: 1.25rem; font-weight: 500; letter-spacing: 0.5px; line-height: 1.3; color: var(--text-on-dark); max-width: 420px; }
.prevnext .pn-next { text-align: right; align-items: flex-end; margin-left: auto; }
.prevnext .pn-label .arr { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.prevnext a:hover .pn-prev-label .arr { transform: translateX(-5px); }
.prevnext a:hover .pn-next-label .arr { transform: translateX(5px); }

@media (max-width: 900px) {
  .article-band-grid { grid-template-columns: 1fr; }
  .prevnext-grid { grid-template-columns: 1fr; }
  .author-card { position: static; max-width: 420px; }
  .article-intro { flex-direction: column; }
  .article-images { grid-template-columns: 1fr; }
  .article-images .a-img-2 { margin-top: 0; }
  .prevnext .pn-next { text-align: left; align-items: flex-start; margin-left: 0; }
}

/* =====================================================
   EXPERTISE PAGE (Figma "Service 02" + archiesta service-two demo)
   ===================================================== */
.exp-hero { background: var(--dark-1); padding-top: 160px; overflow: hidden; }
.exp-hero-title {
  font-size: clamp(2.125rem, 3vw, 3.75rem);
  font-weight: 300;
  letter-spacing: -2px;
  line-height: 1.21;
  color: var(--text-on-dark);
  text-align: left;
  /* fits the longer of the two lines (needs 1207px at the 60px ceiling) so it
     stays a two-line heading instead of re-wrapping to three on wide screens */
  max-width: 1240px;
  margin-bottom: clamp(48px, 6vw, 90px);
}
/* line-by-line hero reveal (demo: heading-one/two/three) */
/* the mask clips for the slide-up, but at line-height 1.21 it also cut off the tails of
   g/y/p/j — extra room at the bottom, pulled back with a negative margin so spacing holds */
.line-reveal { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
/* balance: when a line has to wrap (landscape phones) it splits evenly, no lone "that" */
.line-reveal span { display: block; transform: translateY(110%); opacity: 0; text-wrap: balance; }
body.loaded .line-reveal span {
  transform: none;
  opacity: 1;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--ld, 0s), opacity 0.7s ease var(--ld, 0s);
}
.exp-hero-media { position: relative; }
.exp-hero-media > img { width: 100%; max-height: 88vh; object-fit: cover; display: block; }
.exp-hero-media .media-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 57%, rgba(0,0,0,0.35) 100%); }
.exp-hero-display {
  position: absolute;
  left: 50%;
  bottom: -0.06em;
  transform: translateX(-50%);
  font-size: clamp(4rem, 12.4vw, 15rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--sage) 0%, rgba(237, 222, 213, 0) 105%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  z-index: 2;
}

.exp-who { background: var(--dark-1); padding-block: clamp(70px, 9vw, 130px) clamp(56px, 7vw, 100px); }
.exp-who-grid {
  display: grid;
  grid-template-columns: 1.4fr auto 1fr;
  gap: clamp(32px, 5vw, 110px);
  align-items: center;
}
.exp-who h2 { color: var(--text-on-dark); max-width: 523px; margin-top: 40px; }
.badge-rotate { width: clamp(110px, 11vw, 163px); }
.exp-who-copy { color: var(--muted-on-dark); letter-spacing: 0.5px; max-width: 285px; }

.exp-collage-section { background: var(--dark-1); border-top: 1px solid var(--line-on-dark); padding-block: clamp(56px, 8vw, 120px); }
.exp-collage-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: center;
}
.exp-collage { position: relative; min-height: 620px; }
.exp-collage .e-1 { position: absolute; left: 36%; top: 0; width: 64%; aspect-ratio: 1 / 1.05; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25); }
.exp-collage .e-2 { position: absolute; left: 0; top: 24%; width: 64%; aspect-ratio: 1 / 1.05; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3); z-index: 2; }
.exp-collage .vertical-label { left: calc(64% + 14px); right: auto; top: 62%; }
.exp-what h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 400; letter-spacing: 0; line-height: 1.32; color: var(--text-on-dark); margin-bottom: 26px; max-width: 495px; }
.exp-what .body-text { color: var(--muted-on-dark); max-width: 419px; }

.exp-process3 { background: var(--dark-1); padding-bottom: clamp(70px, 9vw, 120px); }
.exp-process3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-on-dark);
  border-bottom: 1px solid var(--line-on-dark);
}
.exp-step3 { padding: clamp(28px, 4vw, 64px) clamp(20px, 3vw, 46px); }
.exp-step3:first-child { padding-left: 0; }
.exp-step3 + .exp-step3 { border-left: 1px solid var(--line-on-dark); }
.exp-step3 h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: 0.5px; color: var(--text-on-dark); margin-bottom: 16px; }
.exp-step3 p { color: var(--muted-on-dark); letter-spacing: 0.5px; max-width: 350px; }

/* ---------- Services slider ---------- */
.services-slider { position: relative; min-height: min(100vh, 900px); overflow: hidden; display: flex; align-items: center; background: var(--gray-900); }
.slide-bg { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
.slide-bg.active { opacity: 1; }
.slide-bg img { width: 100%; height: 100%; object-fit: cover; }
/* dark enough for the small copy to hold 4.5:1 over bright backgrounds */
.slide-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); }
/* width:100% overrides the .container width, so the grid is full-bleed —
   pad the left edge to keep the copy and prev/next buttons off the border */
.slider-content { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 5vw, 100px); align-items: end; padding-block: clamp(70px, 9vw, 120px); padding-inline: 40px; }
.slider-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(40px, 6vw, 100px); }
.slider-eyebrow img { width: 26px; height: 26px; }
.slide-title {
  font-size: clamp(3.125rem, 6vw, 5.625rem);
  font-weight: 200;
  letter-spacing: -2px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text-on-dark);
  max-width: 560px;
}
.slide-body { color: var(--muted-on-dark); letter-spacing: 0.5px; max-width: 420px; margin-top: 34px; }
.slider-nav-btns { display: flex; gap: 10px; margin-top: 44px; }
.slider-nav-btns button,
.lightbox-nav button,
.pdc-arrow {
  padding: 0;
  border-radius: 50%;
  color: var(--text-on-dark);
  opacity: 0.85;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.slider-nav-btns svg,
.lightbox-nav svg,
.pdc-arrow svg { display: block; width: 50px; height: 50px; }
/* strokes follow the button's colour, so hover can recolour the chevron */
.slider-nav-btns .arrow-ring,
.lightbox-nav .arrow-ring,
.pdc-arrow .arrow-ring { fill: none; stroke: currentColor; stroke-opacity: 0.28; transition: stroke 0.3s ease, stroke-opacity 0.3s ease; }
.slider-nav-btns .arrow-chevron,
.lightbox-nav .arrow-chevron,
.pdc-arrow .arrow-chevron { fill: none; stroke: currentColor; }
.slider-nav-btns button:hover,
.slider-nav-btns button:focus-visible,
.lightbox-nav button:hover,
.lightbox-nav button:focus-visible,
.pdc-arrow:hover,
.pdc-arrow:focus-visible {
  opacity: 1;
  transform: scale(1.08);
  background: var(--white);
  color: var(--forest);
}
/* ring matches the fill so the button reads as one solid white disc */
.slider-nav-btns button:hover .arrow-ring,
.slider-nav-btns button:focus-visible .arrow-ring,
.lightbox-nav button:hover .arrow-ring,
.lightbox-nav button:focus-visible .arrow-ring,
.pdc-arrow:hover .arrow-ring,
.pdc-arrow:focus-visible .arrow-ring { stroke: var(--white); stroke-opacity: 1; }
/* both arrows draw the same left chevron; flip the next one to face right */
#slideNext svg,
#lbNext svg,
.pdc-arrow--next svg { transform: rotate(180deg); }
/* six category thumbs, 3 x 2 — each links through to the filtered projects grid */
.slider-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 26px); }
.slider-thumb { display: block; opacity: 0.72; transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.slider-thumb:hover, .slider-thumb:focus-visible { opacity: 1; transform: translateY(-6px); }
.slider-thumb:focus-visible { outline: 2px solid var(--text-on-dark); outline-offset: 4px; }
.thumb-img { display: block; aspect-ratio: 308 / 354; overflow: hidden; }
.thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.slider-thumb:hover .thumb-img img { transform: scale(1.06); }
.thumb-label {
  display: block;
  margin-top: 12px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--text-on-dark);
}
.slide-swap { transition: opacity 0.4s ease, transform 0.4s ease; }
.slide-swap.swapping { opacity: 0; transform: translateY(16px); }

/* ---------- Tan logo marquee ---------- */
.marquee-tan { background: var(--pale); padding-block: 60px; border-bottom: 1px solid rgba(42, 58, 30, 0.25); overflow: hidden; }
.marquee-tan .marquee-inner { color: var(--forest); }

/* ---------- How we work (4 steps, tan) ---------- */
.how-work-4 { background: var(--pale); padding-block: clamp(70px, 9vw, 130px); }
.how4-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 6vw, 120px); align-items: start; }
.how4-head h2 { color: var(--forest); max-width: 421px; margin-top: 16px; }
.how4-steps { display: flex; flex-direction: column; gap: clamp(36px, 4vw, 56px); }
.how4-step { display: grid; grid-template-columns: 76px 1fr; gap: clamp(16px, 2vw, 28px); align-items: start; }
.how4-step img { width: 56px; height: 56px; opacity: 0.9; transform: rotate(-8deg) scale(0.8); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s, opacity 0.5s ease 0.15s; }
.how4-step.visible img { transform: none; opacity: 1; }
.how4-step h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: 0.5px; color: var(--forest); margin-bottom: 10px; }
.how4-step p { color: rgba(42, 58, 30, 0.7); letter-spacing: 0.5px; max-width: 528px; }

/* ---------- Projects gallery ---------- */
.exp-projects { background: var(--white); padding-block: clamp(70px, 9vw, 130px); }
.exp-projects-display {
  font-size: clamp(4rem, 8vw, 9.375rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--pale);
  margin-bottom: 30px;
}
.exp-projects-intro { color: rgba(42, 58, 30, 0.6); letter-spacing: 0.5px; max-width: 525px; margin-bottom: clamp(48px, 6vw, 90px); }
.exp-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px) clamp(30px, 5vw, 90px); }
/* each image opens the gallery lightbox (js/project-detail.js), as the project detail gallery does */
.exp-gallery figure { display: block; overflow: hidden; margin: 0; }
.exp-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease; }
.exp-gallery figure:hover img { transform: scale(1.05); filter: brightness(0.85); }
.exp-gallery .pd-gallery-open:focus-visible { outline-color: var(--forest); outline-offset: -4px; }   /* white section */
.exp-gallery .g-tall { aspect-ratio: 525 / 691; }
.exp-gallery .g-wide { aspect-ratio: 695 / 529; }
.exp-gallery .g-offset { margin-top: clamp(-160px, -10vw, -60px); }

@media (max-width: 1080px) {
  .exp-who-grid, .exp-collage-grid, .how4-grid { grid-template-columns: 1fr; }
  .slider-content { grid-template-columns: 1fr; align-items: start; }
  .slider-thumbs { max-width: 620px; }
  .exp-collage { max-width: 620px; }
}
@media (max-width: 640px) {
  .slider-thumbs { grid-template-columns: repeat(2, 1fr); }
  .exp-process3-grid { grid-template-columns: 1fr; }
  .exp-step3 { padding-inline: 0; }
  .exp-step3 + .exp-step3 { border-left: none; border-top: 1px solid var(--line-on-dark); }
  .exp-gallery { grid-template-columns: 1fr; }
  .exp-gallery .g-offset { margin-top: 0; }
  .exp-collage { min-height: 108vw; }
}
@media (prefers-reduced-motion: reduce) {
  .line-reveal span { transform: none; opacity: 1; transition: none; }
  .how4-step img { transform: none; opacity: 1; transition: none; }
  .slider-thumb, .thumb-img img, .slider-nav-btns button { transition: none; }
  .slider-nav-btns button:hover, .slider-nav-btns button:focus-visible { transform: none; }
  .slider-thumb:hover { transform: none; }
  .slider-thumb:hover .thumb-img img { transform: none; }
}

/* =====================================================
   PROJECT DETAIL PAGE (Figma "About 4")
   ===================================================== */
.breadcrumbs.on-dark a, .breadcrumbs.on-dark span { color: var(--sage); }
.breadcrumbs.on-dark a:hover { color: var(--white); }
.breadcrumbs.on-dark li + li::before { color: rgba(237, 222, 213, 0.4); }
.breadcrumbs.on-dark [aria-current="page"] { color: rgba(237, 222, 213, 0.72); }   /* 0.6 was 4.4:1 on dark green */

.pd-hero { position: relative; min-height: min(100vh, 969px); background: var(--dark-1); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pd-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* #0B0B0B: 90% at the top (behind the header), 70% at the middle where the title sits
   (keeps it above AA on bright photos), 30% at the bottom */
.pd-hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0.9) 0%, rgba(11, 11, 11, 0.7) 50%, rgba(11, 11, 11, 0.3) 100%);
}
.pd-hero-content { position: relative; z-index: 2; text-align: center; padding-inline: var(--gutter); }
/* short screens (landscape phones): reserve the header's height so the title can't slide under it */
@media (max-height: 600px) { .pd-hero { padding-block: 140px 56px; } }
.pd-hero-content .eyebrow { color: var(--sage); }
.pd-hero-content h1 {
  font-size: clamp(2.125rem, 3.2vw, 3.75rem);
  font-weight: 300;
  letter-spacing: -2px;
  line-height: 1.1;
  color: var(--text-on-dark);
  max-width: 1006px;
}

.pd-overview { background: var(--dark-1); padding-block: clamp(64px, 8vw, 120px); }
.pd-overview .breadcrumbs { margin-bottom: clamp(40px, 5vw, 64px); }
.pd-overview-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(40px, 6vw, 130px); align-items: center; }
.pd-overview-copy h2 { color: var(--text-on-dark); margin-bottom: 26px; max-width: 389px; }
.pd-overview-copy .body-text { color: var(--muted-on-dark); max-width: 420px; }
/* 640 x 640 frame, right-aligned in its column; the photo fills it rather than
   sitting letterboxed at its own 3:2 ratio */
.pd-overview-img { position: relative; width: min(640px, 100%); margin-left: auto; }
.pd-overview-img figure { aspect-ratio: 1; overflow: hidden; }
.pd-overview-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-overview-img .vertical-label { right: -5%; top: 40%; }
.brown-band .stats-row.pd-stats { border-top: none; margin-top: 0; padding-top: 0; }

.pd-gallery-band { background: var(--dark-2); padding-block: 0 clamp(64px, 8vw, 120px); }
.pd-gallery-band .eyebrow { text-align: center; }
/* ---------- Scroll-driven galleries ([data-hscroll]: project detail gallery, about projects) ----------
   Tablet and up (main.js sets .is-hscroll when the gallery fits the screen): the section is
   made one screen taller than the track's hidden width, its .hscroll-pin sticks, and the page
   scroll drives the [data-hscroll-track] to the left. Dragging and the drag hint are phone-only. */
[data-hscroll].is-hscroll { padding-block: 0; }
.is-hscroll .hscroll-pin { position: sticky; top: 0; height: var(--pin-h, 100vh); display: flex; flex-direction: column; justify-content: center; }
.is-hscroll [data-hscroll-track] { overflow-x: hidden; scroll-snap-type: none; cursor: auto; user-select: none; }   /* a text-select drag would auto-scroll the track */
.is-hscroll .drag-hint, .is-static .drag-hint { display: none; }
.pd-gallery-intro {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 400;
  line-height: 1.32;
  color: var(--text-on-dark);
  text-align: center;
  max-width: 1050px;
  margin-inline: auto;
  margin-bottom: clamp(48px, 6vw, 90px);
}
/* Horizontal track: drag or scroll. Sized so roughly three thumbs are in view and
   the rest (up to 12) run off to the right. */
.pd-gallery-track {
  /* --peek sets the base thumb size (that many would fit in view); --thumb-scale then
     enlarges each thumb — 1.4 = 40% larger (client request 2026-09-25), so about 3.3 are
     in view on desktop and the last one is cropped at the right edge, the cue that the
     track scrolls. */
  --gap: clamp(16px, 2vw, 30px);
  --peek: 4.6;
  --thumb-scale: 1.4;
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  cursor: grab;
  width: 100%;                 /* full-bleed: the band has no gutter of its own */
  padding-left: var(--gutter); /* first thumb lines up with the page content */
  /* the snapport would otherwise start at the padding edge and snap the first
     thumb flush to the viewport, swallowing that gutter */
  scroll-padding-left: var(--gutter);
  padding-bottom: 6px;
}
.pd-gallery-track::-webkit-scrollbar { display: none; }
/* trailing breathing room at the end of the scroll, without affecting the
   percentage width below (that resolves against the container's content box) */
.pd-gallery-track::after { content: ""; flex: 0 0 var(--gutter); }
.pd-gallery-track.dragging { cursor: grabbing; scroll-behavior: auto; }
.pd-gallery-item {
  flex: 0 0 auto;
  width: calc(var(--thumb-scale) * (100% - (var(--peek) - 1) * var(--gap)) / var(--peek));
  margin: 0;
  scroll-snap-align: start;
}
.pd-gallery-media { display: block; aspect-ratio: 1 / 1; overflow: hidden; }   /* square thumbs (client request 2026-09-25; was 422 / 511) */
.pd-gallery-track img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease; }
.pd-gallery-item:hover img { transform: scale(1.05); filter: brightness(0.85); }
.pd-gallery-caption {
  margin-top: 16px;
  font-size: 1rem;
  letter-spacing: 0.4px;
  line-height: 1.4;
  color: var(--white);   /* tan on brown was 3.5:1 */
}
.pd-gallery-track + .drag-hint { margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 1200px) { .pd-gallery-track { --peek: 3.6; } }
@media (max-width: 900px)  { .pd-gallery-track { --peek: 2.6; } }
@media (max-width: 600px)  { .pd-gallery-track { --peek: 1.6; } }

/* ---------- Project gallery lightbox ---------- */
.pd-gallery-open { display: block; width: 100%; height: 100%; padding: 0; cursor: zoom-in; }
.pd-gallery-open:focus-visible { outline: 2px solid var(--text-on-dark); outline-offset: 3px; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 48px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* `display: grid` beats the UA's `[hidden] { display: none }`, so without this
   the closed dialog stays a full-viewport layer at z-index 200 and eats every click */
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(8, 8, 20, 0.86); cursor: zoom-out; }
.lightbox-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  width: min(1180px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: clamp(20px, 2.4vw, 36px);
  background: var(--dark-1);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.lightbox.is-open .lightbox-panel { transform: none; }
.lightbox-figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.lightbox-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox-close {
  position: absolute;
  top: clamp(10px, 1.2vw, 16px);
  right: clamp(10px, 1.2vw, 16px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--text-on-dark);
  /* the panel narrows to one column on small screens and the button lands over
     the photo, so it carries its own scrim rather than relying on the panel */
  background: rgba(8, 8, 20, 0.55);
  backdrop-filter: blur(2px);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.lightbox-close:hover,
.lightbox-close:focus-visible { background: var(--white); color: var(--forest); }
.lightbox-info h3 {
  font-size: clamp(1.375rem, 2vw, 1.875rem);
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 1.25;
  color: var(--text-on-dark);
  margin: 14px 0 20px;
}
.lightbox-desc { display: grid; gap: 10px; margin-bottom: clamp(24px, 3vw, 38px); }
.lightbox-desc li {
  position: relative;
  padding-left: 18px;
  font-size: 1rem;
  letter-spacing: 0.4px;
  line-height: 1.55;
  color: var(--muted-on-dark);
}
.lightbox-desc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--sage);
}
.lightbox-nav { display: flex; gap: 10px; }
/* "View project" — only for gallery items that link to their own page (Expertise gallery) */
.lightbox-link { margin-bottom: clamp(24px, 3vw, 38px); }
.lightbox-link[hidden] { display: none; }

@media (max-width: 860px) {
  .lightbox-panel { grid-template-columns: 1fr; align-items: start; }
  .lightbox-figure { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox-panel, .lightbox-close { transition: none; }
  .lightbox-panel { transform: none; }
}

.pd-facts { background: var(--dark-2); padding-block: clamp(64px, 8vw, 120px) clamp(70px, 9vw, 130px); }
/* single centred column: fact sheet, then the quote note beneath it */
.pd-facts-grid { display: grid; grid-template-columns: 1fr; gap: clamp(48px, 6vw, 80px); justify-items: center; text-align: center; }
.pd-facts-sheet { width: min(1000px, 100%); }
/* Brown sections (project detail, template A): small text is solid white — tan on brown is only 3.5:1
   (2.8:1 faded), white is 4.6:1. Large headings stay tan (3.5:1 passes for large text). */
.pd-facts .factsheet-row dt, .pd-facts .factsheet-row dd,
.pd-approach .eyebrow, .pd-work .eyebrow, .pd-gallery-band .eyebrow { color: var(--white); }
.factsheet-title { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 400; line-height: 1.32; color: var(--text-on-dark); margin-bottom: 26px; }
/* two columns: rows 1-5 fill the left, 6-10 the right (column-wise flow, not
   row-wise), so the reading order matches the source order down each column */
.factsheet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(var(--rows, 5), auto);   /* rows per column: half the entries, rounded up (set --rows on the <dl>) */
  grid-auto-flow: column;
  column-gap: clamp(28px, 4vw, 70px);
  border-top: 1px solid var(--line-on-dark);
}
/* rows stay left/right aligned — a centred label/value table is unreadable */
.factsheet-row { display: grid; grid-template-columns: minmax(110px, 160px) 1fr; gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--line-on-dark); text-align: left; }
.factsheet-row dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--sage); }
.factsheet-row dd { font-size: 1rem; letter-spacing: 0.5px; color: var(--muted-on-dark); }
@media (max-width: 780px) {
  .factsheet { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}

.pd-approach { background: var(--dark-2); text-align: center; padding-bottom: clamp(70px, 9vw, 130px); }
.pd-approach h2 { color: var(--text-on-dark); max-width: 624px; margin-inline: auto; margin-bottom: 30px; }
.pd-approach .body-text { color: var(--white); max-width: 749px; margin-inline: auto; }

.pd-display-band { background: var(--dark-1); padding-block: clamp(56px, 7vw, 110px) 0; overflow: hidden; }
.pd-display-word {
  font-size: clamp(4.5rem, 12.5vw, 15rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #a4806a;
  white-space: nowrap;
  padding-left: var(--gutter);
}
.pd-display-img { width: min(1780px, 100% - 2 * var(--gutter)); margin: clamp(-20px, -2vw, -40px) auto 0; position: relative; z-index: 2; aspect-ratio: 1780 / 861; overflow: hidden; }
.pd-display-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-statement { width: min(1780px, 100% - 2 * var(--gutter)); margin-inline: auto; padding-block: clamp(56px, 7vw, 100px); }
.pd-statement p { font-size: clamp(1.625rem, 2.6vw, 2.625rem); font-weight: 300; letter-spacing: -1.5px; line-height: 1.1; color: var(--text-on-dark); max-width: 945px; }

.working-process { background: var(--pale); padding-block: clamp(64px, 8vw, 120px) clamp(80px, 10vw, 140px); }
.wp-display {
  font-size: clamp(3rem, 6.3vw, 7.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--forest);
  max-width: 703px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.wp-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(42, 58, 30, 0.3); }
.wp-step { padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 56px) 0; }
.wp-step:first-child { padding-left: 0; }
.wp-step + .wp-step { border-left: 1px solid rgba(42, 58, 30, 0.3); }
.wp-num { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.5px; color: rgba(42, 58, 30, 0.85); display: block; margin-bottom: 8px; }   /* 0.5 was 2.6:1 on tan */
.wp-step h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: 0.5px; color: var(--forest); margin-bottom: 20px; }
.wp-step p { color: rgba(42, 58, 30, 0.8); letter-spacing: 0.5px; max-width: 450px; }

.pd-work { background: var(--dark-2); padding-block: clamp(70px, 9vw, 130px); }
.pd-work-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.75fr;
  gap: clamp(40px, 5vw, 84px);
  align-items: stretch;
}
.pd-work-copy { border-right: 1px solid var(--line-on-dark); padding-right: clamp(32px, 4vw, 64px); }
.pd-work-copy h2 { color: var(--text-on-dark); max-width: 380px; margin-top: 26px; }
.pd-work-rule { border: none; border-top: 1px solid var(--line-on-dark); margin-block: clamp(80px, 14vw, 200px) 36px; }
.pd-work-copy .body-text { color: var(--white); max-width: 370px; }
/* The text column stays put while the photos scroll by; the column itself still stretches
   (keeping its divider line), so the pinned block releases where the image column ends.
   Only on screens tall enough to show the whole block (~560px + offset). */
@media (min-width: 901px) and (min-height: 720px) {
  .pd-work-sticky { position: sticky; top: clamp(48px, 12vh, 120px); }
}
.pd-work-imgs { display: flex; flex-direction: column; gap: clamp(20px, 2.2vw, 30px); }
.pd-work-imgs figure { aspect-ratio: 1051 / 714; overflow: hidden; width: 100%; }
.pd-work-imgs figure.pd-work-tall { aspect-ratio: 1051 / 690; }
.pd-work-imgs img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.pd-work-imgs figure:hover img { transform: scale(1.04); }

@media (max-width: 900px) {
  .pd-overview-grid { grid-template-columns: 1fr; }
  .pd-overview-img .vertical-label { right: 6px; }
  .pd-work-grid { grid-template-columns: 1fr; }
  .pd-work-copy { border-right: none; padding-right: 0; }
  .pd-work-rule { margin-block: 40px 28px; }
  .wp-grid { grid-template-columns: 1fr; }
  .wp-step { padding-inline: 0; }
  .wp-step + .wp-step { border-left: none; border-top: 1px solid rgba(42, 58, 30, 0.3); }
}

/* =====================================================
   PROJECT DETAIL — OPTION B (editorial long-read)
   New components: split hero, 4-up numbers strip, black & white story (.pdb-read:
   narrow fact/heading column + wide text column, full-bleed photos, staggered image
   pairs, programme strip), FAQ accordion. .pdb-facts-card is kept for page C.
   Reuses: breadcrumbs, stats-row, factsheet, img-reveal, prevnext.
   ===================================================== */
.pdb-hero { background: var(--dark-1); padding-top: clamp(150px, 16vw, 200px); }
.pdb-hero .breadcrumbs { margin-bottom: clamp(36px, 4vw, 56px); }
.pdb-hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 90px); align-items: end; padding-bottom: clamp(40px, 5vw, 64px); }
.pdb-hero h1 { font-size: clamp(2.375rem, 4.4vw, 4.5rem); font-weight: 300; letter-spacing: -2px; line-height: 1.05; color: var(--text-on-dark); }
.pdb-lede { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.6; letter-spacing: 0.3px; color: var(--muted-on-dark); max-width: 520px; }
.pdb-hero-img { width: min(1780px, 100% - 2 * var(--gutter)); margin-inline: auto; aspect-ratio: 2000 / 939; overflow: hidden; }
.pdb-hero-img img { width: 100%; height: 100%; object-fit: cover; }

.pdb-numbers { background: var(--dark-1); padding-block: clamp(56px, 7vw, 100px); }
.pdb-stats { grid-template-columns: repeat(4, 1fr); margin-top: 0; }

/* ---------- Story: editorial black & white (layout after robertslimbrick.com case studies) ---------- */
.pdb-read { --ink-2: #333333; --ink-3: #666666; background: var(--white); }   /* #333 12.6:1, #666 5.7:1 on white */
.pdb-block { padding-block: clamp(64px, 9vw, 140px); }
.pdb-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.85fr); gap: clamp(32px, 4vw, 58px); align-items: start; }
.pdb-chapter-num { font-size: 0.75rem; font-weight: 700; letter-spacing: 1.8px; color: var(--ink); margin-bottom: 18px; }
.pdb-chapter-num::after { content: ""; display: inline-block; width: 48px; height: 1px; background: currentColor; vertical-align: middle; margin-left: 14px; }
.pdb-read h2 { font-size: clamp(1.75rem, 2.5vw, 2.5rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.pdb-main > h2 { max-width: 760px; margin-bottom: 32px; }
.pdb-read h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: 0.2px; color: var(--ink); margin-block: 48px 14px; }
.pdb-main > h3:first-child { margin-top: 0; }
.pdb-main p { font-size: 1.125rem; line-height: 1.7; letter-spacing: 0.2px; color: var(--ink-2); max-width: 780px; margin-bottom: 20px; }
.pdb-main .pdb-lead { font-size: clamp(1.25rem, 1.9vw, 1.75rem); line-height: 1.4; letter-spacing: -0.2px; color: var(--ink); max-width: 900px; margin-bottom: 28px; }
.pdb-quote { border-left: 2px solid var(--ink); padding-left: clamp(24px, 3vw, 40px); margin-block: 48px; }
.pdb-main .pdb-quote p { font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: 300; line-height: 1.25; letter-spacing: -0.5px; color: #527736; max-width: 760px; margin: 0; }   /* 5.2:1 on white */

/* Fact sheet: plain labelled list in the left column, no card */
.pdb-read .pdb-facts-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 1.8px; line-height: 1.4; text-transform: uppercase; margin-bottom: 28px; }
.pdb-facts dl { display: grid; gap: 18px; }
.pdb-facts dt { font-size: 0.8125rem; letter-spacing: 0.3px; color: var(--ink-3); margin-bottom: 2px; }
.pdb-facts dd { font-size: 1rem; line-height: 1.45; color: var(--ink); }
.pdb-facts .pdb-facts-cta { margin-top: 36px; }
.pdb-read .btn-outline.on-light { border-color: var(--ink); color: var(--ink); }
.pdb-read .btn-outline.on-light::before { background: var(--moss); }   /* light green fill on hover, ink text 7.4:1 */
.pdb-read .btn-outline.on-light:hover { color: var(--ink); border-color: var(--moss); }
.pdb-read .btn-outline.on-light .icon-arrow { filter: brightness(0); }

/* Big images: one in the text column, full-bleed bands, staggered pairs */
.pdb-read figure { overflow: hidden; }
.pdb-read figure img { width: 100%; height: 100%; object-fit: cover; }
.pdb-img-main { aspect-ratio: 2000 / 1392; margin-top: clamp(40px, 5vw, 72px); }
.pdb-bleed { height: min(56.25vw, 92vh); }
.pdb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 58px); align-items: start; }
.pdb-pair figure { aspect-ratio: 4 / 5; }
.pdb-pair figure:nth-child(2) { margin-top: clamp(60px, 12vw, 180px); }
.pdb-pair-last { padding-bottom: clamp(64px, 9vw, 140px); }

/* Programme: what the 16 containers hold */
.pdb-programme { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); margin-block: clamp(36px, 4vw, 56px); }
.pdb-programme li { display: flex; flex-direction: column; gap: 10px; padding: 24px 20px; border-bottom: 1px solid rgba(19, 19, 19, 0.15); }
.pdb-programme li:first-child, .pdb-programme li:last-child { padding-left: 0; }
.pdb-programme li:nth-child(n+2):nth-child(-n+4) { border-left: 1px solid rgba(19, 19, 19, 0.15); }
.pdb-programme li:last-child { grid-column: 1 / -1; }
.pg-num { font-size: clamp(2.5rem, 3.6vw, 3.5rem); font-weight: 300; letter-spacing: -2px; line-height: 1; color: var(--ink); }
.pg-text { font-size: 1.125rem; line-height: 1.35; color: var(--ink); }
.pg-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-3); }
.pdb-programme li:has(.pg-num) .pg-num, .pdb-programme li:has(.pg-num) .pg-label { color: #527736; }   /* the four numeric facts; 5.2:1 on white */

/* Boxed fact-sheet card — used on project-detail-commercial-summary.html (Option C) */
.pdb-facts-card { background: var(--forest); padding: clamp(28px, 3vw, 44px); }
.pdb-facts-card .factsheet-title { font-size: 1.375rem; }
/* one column in the narrow sidebar (the base component is two columns) */
.pdb-facts-card .factsheet { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
.pdb-facts-card .factsheet-row { grid-template-columns: minmax(96px, 128px) 1fr; padding-block: 12px; }
.pdb-facts-card .factsheet-row dd { font-size: 1rem; }
.pdb-facts-cta { margin-top: 30px; }

/* tan titles on the brown band fall below 4.5:1 — use the dark green here */
.prevnext.on-green { background: var(--dark-1); }
.pdb-faq { background: var(--off-white); padding-block: clamp(70px, 9vw, 130px); }
.pdb-faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(40px, 6vw, 110px); align-items: start; }
.pdb-faq h2 { color: var(--forest); max-width: 360px; }
.faq-list { border-top: 1px solid rgba(42, 58, 30, 0.25); }
.faq-item { border-bottom: 1px solid rgba(42, 58, 30, 0.25); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 24px; cursor: pointer; list-style: none; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); font-weight: 500; letter-spacing: 0.3px; color: var(--forest); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }
/* SVG plus/minus: whole-pixel 2px strokes with crispEdges, so every row renders the same thickness
   (1.5px CSS bars landed on fractional rows and antialiased to 1px on some rows, 2px on others) */
.faq-icon { flex: 0 0 18px; height: 18px; color: #527736; }   /* 5.0:1 on off-white */
.faq-icon svg { display: block; overflow: visible; }
.faq-icon path { fill: none; stroke: currentColor; stroke-width: 2; shape-rendering: crispEdges; }
.faq-icon-v { transform-box: fill-box; transform-origin: center; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.faq-item[open] .faq-icon-v { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .faq-icon-v { transition: none; } }
.faq-item p { color: rgba(42, 58, 30, 0.85); letter-spacing: 0.4px; max-width: 640px; padding-bottom: 26px; }

@media (max-width: 1080px) {
  .pdb-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .pdb-hero-grid, .pdb-cols, .pdb-faq-grid { grid-template-columns: 1fr; }
  .pdb-hero-img { aspect-ratio: 4 / 3; }
  .pdb-facts dl { grid-template-columns: 1fr 1fr; gap: 18px 24px; }
  .pdb-bleed { height: 75vw; }
}
@media (max-width: 600px) {
  .pdb-programme { grid-template-columns: 1fr 1fr; }
  .pdb-programme li:nth-child(3) { border-left: none; padding-left: 0; }
  .pdb-pair { grid-template-columns: 1fr; }
  .pdb-pair figure:nth-child(2) { margin-top: 0; }
}
@media (max-width: 520px) {
  .pdb-stats { grid-template-columns: 1fr; }
}

/* =====================================================
   CONTACT PAGE (Figma "Contact 01")
   ===================================================== */
.contact-hero { background: var(--dark-1); padding-top: 200px; }
.contact-hero .eyebrow { color: var(--sage); }
.contact-hero h1 {
  font-size: clamp(2.375rem, 3.2vw, 3.75rem);
  font-weight: 300;
  letter-spacing: -2px;
  line-height: 1.1;
  color: var(--text-on-dark);
  max-width: 738px;
  margin-bottom: clamp(48px, 6vw, 90px);
}
.contact-hero-media { position: relative; overflow: hidden; }
.contact-hero-media > img { width: 100%; height: min(75vh, 616px); object-fit: cover; display: block; }
.contact-hero-media .media-shade {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 9%, rgba(0, 0, 0, 0.12) 52%, rgba(0, 0, 0, 0.48) 95%);
}
.contact-display {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(4rem, 12.4vw, 15rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--sage) 0%, rgba(237, 222, 213, 0) 105%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  z-index: 2;
}

.contact-body { background: var(--dark-2); padding-block: clamp(70px, 9vw, 130px); }
.contact-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(48px, 8vw, 180px); align-items: start; }
.contact-form-col h2 { color: var(--text-on-dark); margin-bottom: 26px; }
.contact-intro { color: var(--muted-on-dark); letter-spacing: 0.5px; max-width: 525px; margin-bottom: 44px; }
.contact-intro strong { color: var(--text-on-dark); }
.form-section-title { font-size: 1.25rem; font-weight: 500; letter-spacing: 0.5px; color: var(--text-on-dark); margin-bottom: 22px; margin-top: 44px; }
.form-section-title:first-of-type { margin-top: 0; }
.contact-form { display: flex; flex-direction: column; gap: 10px; max-width: 529px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%;
  background: rgba(237, 222, 213, 0.1);
  border: 1px solid transparent;
  color: var(--text-on-dark);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 14px 20px;
  transition: background 0.3s ease, border-color 0.3s ease;
  border-radius: 0;
  appearance: none;
}
.contact-form ::placeholder { color: var(--text-on-dark); opacity: 0.85; }
.contact-form select { color: var(--text-on-dark); cursor: pointer; }
.contact-form select option { color: #131313; background: #fff; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none;
  background: rgba(237, 222, 213, 0.16);
  border-color: rgba(237, 222, 213, 0.5);
}
.contact-form textarea { min-height: 141px; resize: vertical; }
/* Cloudflare Turnstile widget in the contact form */
.contact-form .cf-turnstile { margin-block: 18px 4px; min-height: 65px; }

.contact-form .btn-cta { align-self: flex-start; margin-top: 34px; }
.form-note { font-size: 0.75rem; letter-spacing: 0.5px; color: rgba(237, 222, 213, 0.6); margin-top: 14px; }

.contact-info-col .info-group { margin-bottom: 38px; }
.contact-info-col h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: 0.5px; color: var(--text-on-dark); margin-bottom: 30px; }
.contact-info-col .info-label { font-size: 1.125rem; font-weight: 500; letter-spacing: 0.5px; color: rgba(237, 222, 213, 0.7); margin-bottom: 8px; }
.contact-info-col .info-value { font-size: 1rem; letter-spacing: 0.5px; line-height: 1.6; color: var(--muted-on-dark); }
.contact-info-col .info-value a { transition: color 0.25s ease; }
.contact-info-col .info-value a:hover { color: var(--text-on-dark); }
.contact-info-col .info-cta { margin-top: 22px; }
.contact-map { margin-bottom: 30px; aspect-ratio: 4 / 3; background: rgba(237, 222, 213, 0.1); }
.contact-map iframe { display: block; width: 100%; height: 100%; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* Landscape phones: compact mobile menu so all items fit */
@media (max-width: 960px) and (max-height: 500px) {
  .main-nav { gap: 14px; justify-content: flex-start; }
  .main-nav a:not(.btn) { font-size: 0.8125rem; }
  /* when shown, the header bar would cover a third of a landscape screen at full size,
     so slim the logo down (portrait keeps the full-size logo) */
  .logo-img { height: 40px; }
}

/* ================= PROJECT DETAIL — OPTION C (project-detail-commercial-summary.html) =================
   atap.co layout (photo hero with dimmed neighbours + filmstrip, key-facts row, three
   cards, related projects, breadcrumbs at the foot) drawn with the template's own parts:
   ring arrows, eyebrows, light h1, .pdb-facts-card / .factsheet, .btn-cta, .pcard. */
/* One photo only (project-detail-c.js sets body.pdc-single): the photo, its caption and the
   full-screen view stay; the neighbours, arrows, filmstrip, counters and duplicate photo grid go */
.pdc-single .pdc-peek, .pdc-single .pdc-arrow, .pdc-single .pdc-strip,
.pdc-single #pdcCount, .pdc-single #pdcViewerCount,
.pdc-single .pdc-info .pdc-rule, .pdc-single .pdc-info .pdc-rule ~ * { display: none; }
/* with no mixed ratios to allow for, the one photo fills its frame (so the expand badge sits on the photo) */
.pdc-single .pdc-current img { object-fit: cover; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Hero ---------- */
.pdc-hero { background: var(--dark-1); padding-block: clamp(150px, 12vw, 190px) clamp(48px, 6vw, 80px); }
.pdc-stage {
  --w: min(72%, 1180px);   /* centre photo width; the rest shows the dimmed neighbours */
  --gap: 10px;
  position: relative;
  height: clamp(230px, 38vw, 620px);
  overflow: hidden;
  touch-action: pan-y;
}
.pdc-current { position: absolute; top: 0; bottom: 0; left: calc(50% - var(--w) / 2); width: var(--w); margin: 0; }
/* contain, not cover: renders arrive at mixed ratios and some carry a title block in a corner */
.pdc-current img { width: 100%; height: 100%; object-fit: contain; transition: opacity 0.25s ease; }
.pdc-peek { position: absolute; top: 0; bottom: 0; width: var(--w); overflow: hidden; cursor: pointer; }
.pdc-peek--prev { right: calc(50% + var(--w) / 2 + var(--gap)); }
.pdc-peek--next { left: calc(50% + var(--w) / 2 + var(--gap)); }
.pdc-peek img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.4) saturate(0.8); transition: filter 0.6s ease, opacity 0.25s ease; }
.pdc-peek:hover img { filter: brightness(0.55) saturate(0.9); }
.pdc-stage.is-fading img { opacity: 0; }

/* ring arrows share the slider/lightbox rules above; this only places them */
.pdc-arrow { position: absolute; top: calc(50% - 25px); z-index: 2; }
.pdc-arrow--prev { left: max(8px, calc((100% - var(--w)) / 4 - 25px)); }
.pdc-arrow--next { right: max(8px, calc((100% - var(--w)) / 4 - 25px)); }

/* the whole centre photo is a button that opens the full-screen viewer */
.pdc-open { position: relative; display: block; width: 100%; height: 100%; padding: 0; cursor: zoom-in; }
.pdc-open:disabled { cursor: default; }
/* drawn inside the photo: the stage clips anything outside it */
.pdc-open:focus-visible { outline: 2px solid var(--text-on-dark); outline-offset: -4px; }
/* expand badge — same scrim disc as .lightbox-close */
.pdc-expand {
  position: absolute;
  top: clamp(10px, 1.2vw, 16px);
  right: clamp(10px, 1.2vw, 16px);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--text-on-dark);
  background: rgba(8, 8, 20, 0.55);
  backdrop-filter: blur(2px);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.pdc-open:hover .pdc-expand,
.pdc-open:focus-visible .pdc-expand { background: var(--white); color: var(--forest); }

.pdc-strip {
  position: relative;   /* offsetParent for centring the active thumb */
  display: flex;
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(14px, 1.6vw, 22px);
  padding: 6px var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.pdc-strip::-webkit-scrollbar { display: none; }
/* auto margins centre a short strip but still let a long one scroll from the start */
.pdc-strip > :first-child { margin-left: auto; }
.pdc-strip > :last-child { margin-right: auto; }
/* slider-thumb behaviour: dimmed until hovered or current */
.pdc-strip-thumb { flex: 0 0 auto; width: clamp(72px, 7vw, 104px); aspect-ratio: 16 / 10; padding: 0; overflow: hidden; opacity: 0.5; transition: opacity 0.3s ease; }
.pdc-strip-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.pdc-strip-thumb:hover { opacity: 1; }
.pdc-strip-thumb:hover img { transform: scale(1.06); }
.pdc-strip-thumb[aria-current="true"] { opacity: 1; outline: 1px solid var(--text-on-dark); outline-offset: 3px; }
.pdc-strip-thumb:focus-visible { opacity: 1; outline: 2px solid var(--text-on-dark); outline-offset: 3px; }

.pdc-counter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 18px;
  margin-top: 16px;
  padding-inline: var(--gutter);
  text-align: center;
}
.pdc-counter > span:first-child { font-size: 0.75rem; font-weight: 700; letter-spacing: 1.8px; color: var(--muted-on-dark); }
.pdc-caption { letter-spacing: 0.4px; color: var(--muted-on-dark); }

.pdc-titleblock { text-align: center; margin-bottom: clamp(44px, 5vw, 72px); padding-inline: var(--gutter); }
.pdc-titleblock h1 { color: var(--text-on-dark); }
.pdc-by { margin-top: 22px; letter-spacing: 0.4px; color: var(--muted-on-dark); }

/* ---------- Body ---------- */
.pdc-body { background: var(--pale); padding-block: clamp(64px, 8vw, 110px); }
.pdc-body .container, .pdc-more .container { --container: 1320px; }

.pdc-keyfacts { display: flex; justify-content: center; margin-bottom: clamp(48px, 6vw, 80px); }
.pdc-keyfacts li {
  display: grid;
  justify-items: center;
  align-content: start;
  padding-inline: clamp(20px, 4.5vw, 64px);
  text-align: center;
  color: var(--forest);
}
.pdc-keyfacts li + li { border-left: 1px solid rgba(42, 58, 30, 0.22); }
/* sketch icons draw in like the workflow steps on the expertise page */
.pdc-keyfacts svg { margin-bottom: 20px; transform: rotate(-8deg) scale(0.8); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; }
.pdc-keyfacts li.visible svg { transform: none; }
.pdc-keyfacts .eyebrow { margin-bottom: 10px; }
.pdc-keyfact-value { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 300; letter-spacing: -0.5px; line-height: 1.2; color: var(--forest); }

.pdc-cols {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  /* left column: firm card above the overview; project info takes the wide column */
  grid-template-rows: auto 1fr;
  grid-template-areas: "firm info" "overview info";
  gap: clamp(16px, 1.6vw, 24px);
  align-items: start;
}
.pdc-info { grid-area: info; background: var(--off-white); padding: clamp(28px, 3vw, 44px); }
.pdc-overview { grid-area: overview; }
.pdc-firm { grid-area: firm; }
.pdc-cols .pdb-facts-card { padding: clamp(24px, 2.4vw, 36px); }
/* narrow side column on desktop: label above value, so values keep the full card width */
@media (min-width: 1081px) {
  .pdc-overview .factsheet-row { grid-template-columns: 1fr; gap: 6px; }
}
.pdc-info .factsheet-title { font-size: 1.375rem; color: var(--forest); margin-bottom: 18px; }
.pdc-rule { border: 0; border-top: 1px solid rgba(42, 58, 30, 0.22); margin-block: clamp(26px, 3vw, 36px); }
.pdc-info .eyebrow { margin-bottom: 18px; }
/* 2 x 2 grid on every screen size, so each photo is shown large */
.pdc-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.pdc-photo { padding: 0; aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in; }
.pdc-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease; }
.pdc-photo:hover img { transform: scale(1.06); filter: brightness(0.85); }
.pdc-photo:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }

.pdc-firm { display: grid; justify-items: center; text-align: center; }
.pdc-firm-logo { width: 110px; margin-block: 8px 26px; }
.pdc-firm-name { font-size: 1.375rem; font-weight: 400; line-height: 1.32; color: var(--text-on-dark); margin-bottom: 10px; }
.pdc-firm .eyebrow { margin-bottom: 28px; }

/* ---------- Other projects (template .pcard + a three-photo strip) ---------- */
.pdc-more { background: var(--off-white); padding-block: clamp(70px, 9vw, 130px) clamp(28px, 3vw, 40px); text-align: center; }
.pdc-more .section-title { color: var(--forest); margin-inline: auto; margin-bottom: 18px; }
.pdc-more-link { color: var(--forest); margin-bottom: clamp(40px, 5vw, 70px); }
.pdc-more-grid { text-align: left; }
.pdc-pcard-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; }
.pdc-pcard-strip img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
/* the template's 60% location grey drops under 4.5:1 on off-white — darken it here */
.pdc-more .pcard-loc { color: rgba(42, 58, 30, 0.8); }
.pdc-breadcrumbs { margin: clamp(48px, 6vw, 80px) 0 0; text-align: left; }

/* ---------- Full-screen viewer ---------- */
.pdc-viewer {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0;
  padding: clamp(64px, 6vw, 84px) clamp(16px, 7vw, 110px) clamp(24px, 3vw, 40px);
  border: 0;
  background: rgba(8, 8, 20, 0.97);
  color: var(--text-on-dark);
}
.pdc-viewer[open] { display: grid; place-items: center; }
.pdc-viewer::backdrop { background: transparent; }
.pdc-viewer-figure { display: grid; justify-items: center; gap: 16px; width: 100%; margin: 0; }
.pdc-viewer-figure img { width: 100%; height: calc(100dvh - 210px); object-fit: contain; }
.pdc-viewer-figure figcaption { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 18px; text-align: center; }
#pdcViewerCount { font-size: 0.75rem; font-weight: 700; letter-spacing: 1.8px; color: var(--muted-on-dark); }
#pdcViewerCaption { letter-spacing: 0.4px; color: var(--muted-on-dark); }
.pdc-viewer .pdc-arrow--prev { left: clamp(8px, 2vw, 32px); }
.pdc-viewer .pdc-arrow--next { right: clamp(8px, 2vw, 32px); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .pdc-cols { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-template-areas: "info info" "firm overview"; }
}
@media (max-width: 700px) {
  .pdc-stage { --w: calc(100% - 40px); --gap: 6px; height: calc((100vw - 40px) / 1.85); }
  /* over the photo itself on phones, so the arrows carry the lightbox-close scrim */
  .pdc-stage .pdc-arrow { background: rgba(8, 8, 20, 0.55); backdrop-filter: blur(2px); }
  .pdc-stage .pdc-arrow svg { width: 40px; height: 40px; }
  .pdc-stage .pdc-arrow { top: calc(50% - 20px); }
  .pdc-arrow--prev { left: 4px; }
  .pdc-arrow--next { right: 4px; }
  .pdc-keyfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pdc-keyfacts li { padding-inline: 8px; grid-template-columns: minmax(0, 1fr); }
  .pdc-keyfact-value { font-size: 1.125rem; letter-spacing: 0; }
  .pdc-keyfacts svg { width: 32px; height: 40px; margin-bottom: 14px; }
  .pdc-cols { grid-template-columns: minmax(0, 1fr); grid-template-areas: "info" "firm" "overview"; }
}
/* Small phones: a third of the width can't hold values like "Contemporary tropical",
   so each fact becomes a compact row — icon left, label and value beside it */
@media (max-width: 480px) {
  .pdc-keyfacts { grid-template-columns: minmax(0, 1fr); max-width: 340px; margin-inline: auto; }
  .pdc-keyfacts li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; justify-items: start; align-items: center; text-align: left; padding: 16px 0; }
  .pdc-keyfacts li + li { border-left: none; border-top: 1px solid rgba(42, 58, 30, 0.22); }
  .pdc-keyfacts svg { grid-row: 1 / span 2; margin-bottom: 0; }
  .pdc-keyfacts .eyebrow { margin-bottom: 2px; align-self: end; }
  .pdc-keyfact-value { align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .pdc-current img, .pdc-peek img, .pdc-expand, .pdc-strip-thumb, .pdc-strip-thumb img,
  .pdc-photo img, .pdc-keyfacts svg { transition: none; }
  .pdc-keyfacts svg { transform: none; }
}