/* ============================================================
   fenbury — shared site stylesheet
   Used by index.html, about.html, project.html,
   consultation.html, contact.html
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  --bg: #FFFFFF;
  --menu-panel-bg: #FFFFFF;
  --text: #000000;
  --text-soft: #666666;
  --text-muted: #999999;
  --white: #FFFFFF;
  --accent: #000000;
  --border-faint: rgba(0, 0, 0, 0.14);
  --field-bg: #F5F5F5;

  /* Font stacks: Futura PT first (Adobe Fonts), then Montserrat (Google), then system */
  --font-display: "futura-pt", "Montserrat", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-body: "futura-pt", "Montserrat", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- RESET ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  font-family: var(--font-body);
  font-weight: 300; /* Futura PT Light */
  font-size: 18px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; width: 100%; height: auto; }
a { color: inherit; }

/* Page entrance fade */
body {
  opacity: 0;
  animation: pageIn 0.8s ease 0.1s forwards;
}
@keyframes pageIn { to { opacity: 1; } }

/* ---------- TOP HEADER ---------- */
.top-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 34px 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 60;
  pointer-events: none;
}

/* Home page only has a menu trigger (right-aligned) */
.page-home .top-header { justify-content: flex-end; }

.top-header > * { pointer-events: auto; }

.stamp-mark {
  display: block;
  line-height: 0;
  position: relative;
}

.stamp-mark img {
  width: auto;
  display: block;
  transition: filter 0.5s ease;
}

/* Default (non-project, non-flettermark) image sizing.
   Project pages use the dual-logo crossfade below. */
.stamp-mark > img:only-child {
  height: 80px;
}

/* DUAL LOGO ON PROJECT PAGES — wordmark default, flettermark on scroll.
   Both images same size, stacked in same spot. Pure opacity crossfade,
   no container height change, no layout shift. */
.page-project .stamp-mark {
  display: inline-block;
  width: auto;
  height: 80px;
}

.page-project .stamp-mark .logo-wordmark,
.page-project .stamp-mark .logo-mark {
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  /* True simultaneous crossfade — both opacities animate in parallel
     with the same duration and easing, so as one fades out the other
     fades in at the same rate. Generous duration (0.6s) gives the
     dissolve enough time to feel smooth rather than snappy. */
  transition: opacity 0.6s ease-in-out, filter 0.4s ease;
}

.page-project .stamp-mark .logo-wordmark { opacity: 1; }
.page-project .stamp-mark .logo-mark { opacity: 0; }

.page-project.scrolled .stamp-mark .logo-wordmark { opacity: 0; }
.page-project.scrolled .stamp-mark .logo-mark { opacity: 1; }

/* Project page: hero is dark, so logo needs to be WHITE there.
   Source is dark, so invert(1) flips it to white for the hero.
   Once scrolled past hero, page bg is white, so no filter. */
.page-project .stamp-mark img { filter: invert(1); }
.page-project.scrolled .stamp-mark img { filter: invert(0); }

/* When menu is open: panel is white, so logo shows native dark.
   Also force the wordmark to be visible (not the mark) since the
   menu opens from any scroll position. */
body.menu-open .stamp-mark img { filter: invert(0); }
body.menu-open .page-project .stamp-mark .logo-wordmark { opacity: 1; }
body.menu-open .page-project .stamp-mark .logo-mark { opacity: 0; }

/* MENU TRIGGER */
.menu-trigger {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  transition: color 0.35s ease, background 0.35s ease;
  min-width: 80px;
  text-align: right;
  line-height: 1;
}

/* Home + project pages start with a dark background behind the trigger,
   so trigger is white initially. Backdrop flips to a dark chip so the
   white text still has contrast against light hero images. */
.page-home .menu-trigger,
.page-project .menu-trigger {
  color: var(--white);
  background: rgba(0, 0, 0, 0.3);
}

/* Once project page scrolls past hero, bg becomes white, trigger goes dark */
.page-project.scrolled .menu-trigger {
  color: var(--text);
  background: rgba(0, 0, 0, 0.06);
}

/* When menu is open the panel covers content; trigger sits over white panel */
body.menu-open .menu-trigger { color: var(--text); }

body.menu-open .menu-trigger .t-plus { display: none; }
.t-close { display: none; font-size: 25px; font-weight: 300; letter-spacing: 0; }
body.menu-open .menu-trigger .t-close { display: inline-block; }

/* ---------- MENU PANEL (slides from RIGHT) ---------- */
.menu-panel {
  position: fixed;
  top: 0;
  right: -640px;
  width: 640px;
  max-width: 100vw;
  height: 100vh;
  background: var(--menu-panel-bg);
  z-index: 50;
  transition: right 0.75s cubic-bezier(0.77, 0, 0.175, 1);
  overflow-y: auto;
  padding: 88px 52px 40px;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  border-left: 1px solid var(--border-faint);
}

body.menu-open .menu-panel { right: 0; }

.menu-logo {
  display: block;
  margin-bottom: 36px;
  text-decoration: none;
  width: fit-content;
}

.menu-logo img {
  height: 44px;
  width: auto;
  display: block;
}

.menu-intro {
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 52px;
  max-width: 360px;
}

.menu-intro p + p { margin-top: 14px; }

.menu-nav { list-style: none; }

.menu-nav > li > a,
.menu-nav > li > .submenu-toggle {
  display: block;
  width: 100%;
  padding: 10px 0;
  background: none;
  border: none;
  text-align: left;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
}

.menu-nav > li > a:hover,
.menu-nav > li > .submenu-toggle:hover { color: var(--accent); }

.submenu-indicator {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 300;
  transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.has-submenu.open .submenu-indicator { transform: translateY(-50%) rotate(45deg); }

.submenu {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.77, 0, 0.175, 1);
}

.has-submenu.open .submenu { max-height: 1400px; }

.submenu-section {
  padding: 18px 0 8px 20px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.submenu-section:first-child { padding-top: 8px; }

.submenu-list { list-style: none; padding: 0 0 4px 20px; }

.submenu-list a {
  display: block;
  padding: 5px 0 5px 14px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.3s ease;
}

.submenu-list a:hover { color: var(--text); }

/* ============== NESTED SUBMENU ==============
   Design → category buttons (Brands / Spaces / Stories / Materials)
   → click a category to reveal projects beneath. */

.submenu-categories {
  padding: 8px 0 4px 20px;
}

.submenu-categories > li.has-submenu--nested {
  list-style: none;
}

/* Interiors — a category-level link with no dropdown yet, styled
   identically to Branding/Materials/Spaces/Stories. Needs higher
   specificity than the generic ".submenu-list a" rule above, which
   would otherwise style it like a small nested project link. */
.submenu-categories > li.menu-plain-category {
  list-style: none;
}
.submenu-categories > li.menu-plain-category > a.menu-category-link {
  display: block;
  width: 100%;
  padding: 10px 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  transition: color 0.3s ease;
}
.submenu-categories > li.menu-plain-category > a.menu-category-link:hover {
  color: var(--text-soft);
}

.submenu-toggle--nested {
  display: block;
  width: 100%;
  padding: 10px 0;
  background: none;
  border: none;
  text-align: left;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
}

.submenu-toggle--nested:hover { color: var(--text-soft); }

/* Sub-brand toggle (e.g. L'Oréal USA nested under Branding/Spaces) —
   should read identically to its flat sibling links, not like a
   top-level category (Branding/Materials/Spaces/Stories). */
.submenu-list--nested .submenu-toggle--sub {
  padding: 5px 0 5px 14px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-soft);
}
.submenu-list--nested .submenu-toggle--sub:hover { color: var(--text); }
.submenu-list--nested .submenu-toggle--sub .submenu-indicator {
  font-size: 14.5px;
}

.submenu-toggle--nested .submenu-indicator {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 300;
  transition: transform 0.3s ease;
}

.has-submenu--nested.open > .submenu-toggle--nested .submenu-indicator {
  transform: translateY(-50%) rotate(45deg);
}

/* Nested list: collapsed by default, reveals when category opens */
.submenu-list--nested {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  padding: 0;
  transition: max-height 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.has-submenu--nested.open > .submenu-list--nested {
  max-height: 600px;
  padding: 4px 0 14px 0;
}

.submenu-list--nested li { list-style: none; }

.submenu-list--nested a {
  display: block;
  padding: 5px 0 5px 14px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.3s ease;
}

.submenu-list--nested a:hover { color: var(--text); }

/* Current-page indicator — set via JS on menu load so visitors can
   see where they are when they reopen the menu. */
.menu-current-link {
  color: var(--text) !important;
  font-weight: 500;
}


/* Extra indent for a third-level list (e.g. the L'Oréal USA
   projects) so they read as clearly nested underneath it, not just
   another row in the same flat list as its siblings. Compound
   selector gives this higher specificity than the base rule above,
   so it wins regardless of source order. */
.submenu-list--nested.submenu-list--sub a,
.submenu-list--nested.submenu-list--sub .submenu-toggle--sub {
  padding-left: 32px;
}

/* Extra indent for a fourth-level list (e.g. Spaces > Experiential >
   L'Oréal > project) — one more step in than the third-level rule
   above, so it reads as nested under its own parent instead of
   sitting flush with it. */
.submenu-list--sub .submenu-list--sub a,
.submenu-list--sub .submenu-list--sub .submenu-toggle--sub {
  padding-left: 46px;
}

.submenu-list--nested a.submenu-link--long {
  white-space: nowrap;
}

.menu-footer {
  margin-top: auto;
  padding-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.menu-social {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: none;
}

.menu-social a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.3s ease;
}

.menu-social a:hover { color: var(--accent); }

.menu-portal {
  position: relative;
}
.menu-portal-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.3s ease;
}
.menu-portal-toggle:hover { color: var(--accent); }

.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  cursor: pointer;
}

body.menu-open .menu-overlay { opacity: 1; visibility: visible; }

/* ---------- FOOTER (shared) ---------- */
.site-footer {
  margin-top: 60px;
  padding: 40px 44px;
  border-top: 1px solid var(--border-faint);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.22em;
  color: var(--text);
}

.site-footer a {
  text-decoration: none;
  color: var(--text);
  transition: color 0.3s ease;
}

.site-footer a:hover { color: var(--text-soft); }

.footer-brand-group {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-wbenc {
  height: 28px;
  width: auto;
  display: block;
}

/* Items meant to render in uppercase (e.g., "Contact") opt in via this class. */
.site-footer .footer-caps {
  text-transform: uppercase;
}

/* Client Portal — small hover/focus dropdown in the footer,
   listing links out to each client's private portal. */
.footer-portal {
  position: relative;
}
.footer-portal-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.footer-portal-toggle:hover { color: var(--text-soft); }
.footer-portal-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 14px;
  background: var(--white);
  border: 1px solid var(--border-faint);
  padding: 8px 0;
  min-width: 230px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 20;
}
.footer-portal:hover .footer-portal-menu,
.footer-portal:focus-within .footer-portal-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.footer-portal-menu a {
  display: block;
  padding: 9px 20px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  color: var(--text);
}
.footer-portal-menu a:hover { color: var(--text-soft); }

/* ---------- CONTAIN TALL IMAGES, NO CROPPING ----------
   A single portrait-oriented photo can render very tall when it's
   simply set to width:100% of its column, forcing extra scrolling
   just to see the rest of one image. This caps how tall any image
   in a paired/grouped/single "contained" section can render — width
   shrinks to match, preserving the full photo with nothing cut off.
   Hero and full-bleed sections are deliberately excluded since those
   are meant to be large, edge-to-edge moments.

   Matches by class-name *substring*, so it automatically covers every
   project page's own uniquely-prefixed classes (.bo-pair-2, .qh-single,
   .lvl-quad, .ttcl-pair-a, etc.) without needing per-page edits. Scoped
   under "main.project" purely to raise specificity above each page's
   own "width:100%; height:auto" rule for the same image, so this wins
   regardless of source order — not to limit which pages it applies to. */
main.project [class*="-pair"] img,
main.project [class*="-pair"] video,
main.project [class*="-quad"] img,
main.project [class*="-single"] img,
main.project [class*="-single"] video,
main.project [class*="-large"] img,
main.project [class*="-small"] img,
main.project [class*="-asym"] img,
main.project [class*="-story"] img,
main.project [class*="-collage"] img,
main.project [class*="-trio"] img,
main.project [class*="-group"] img,
main.project [class*="-offset"] img,
main.project [class*="-widespread"] img,
main.project [class*="-center"] img,
main.project [class*="-comp"] img,
main.project [class*="-mark"] img {
  max-height: 85vh;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- REVEAL on scroll (used on inner pages) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- SHARED SECTION GRID (label-left + content-right) ---------- */
.section-label,
.contact-section .section-label,
.about-section .section-label {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  padding-top: 6px;
}

/* ---------- HEADINGS ---------- */
h1, h2, h3, h4, h5, h6,
.intro-title,
.section-heading,
.founders-heading,
.team-heading,
.hero-title,
.page-title,
.person-heading,
.contact-cta-heading,
.outro-quote,
.step-title,
.booking-name,
.founder-name,
.team-member-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: normal;
  letter-spacing: -0.005em;
  color: var(--text);
}

/* Reset italics — Futura italic reads very differently from Fraunces italic.
   Keep <em> visually distinct but not heavily slanted. */
em { font-style: italic; }

/* Body-copy serif blocks become sans-serif Futura now */
.section-body p,
.intro-description,
.intro-description p,
.founder-bio,
.founder-bio p,
.team-member-bio,
.team-member-bio p,
.hero-subhead,
.section-intro,
.contact-blurb p,
.form-intro,
.booking-intro,
.intro-lede {
  font-family: var(--font-body);
  font-weight: 300;
}

/* ---------- RESPONSIVE: shared ---------- */
@media (max-width: 960px) {
  .top-header { padding: 22px 24px; }
  .stamp-mark > img:only-child { height: 60px; }
  .page-project .stamp-mark,
  .page-project .stamp-mark .logo-wordmark,
  .page-project .stamp-mark .logo-mark { height: 60px; }
  .site-footer {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 24px 24px;
    margin-top: 0;
  }
}

@media (max-width: 600px) {
  .menu-panel {
    width: 100vw;
    right: -100vw;
    padding: 72px 28px 36px;
  }
  .menu-logo { margin-bottom: 28px; }
  .menu-logo img { height: 28px; }
  .menu-intro { font-size: 16px; margin-bottom: 36px; }
}

@media (max-width: 380px) {
  .menu-panel { padding: 68px 22px 32px; }
  .top-header { padding: 18px 20px; }
  .stamp-mark > img:only-child { height: 44px; }
  .page-project .stamp-mark,
  .page-project .stamp-mark .logo-wordmark,
  .page-project .stamp-mark .logo-mark { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  body { animation: none; opacity: 1; }
}


/* ============================================================
   PROJECT PAGE — magazine-spread layout
   ============================================================ */

.page-project .project { padding-bottom: 0; }

.page-project .hero-spread {
  width: 100%;
  height: 92vh;
  min-height: 640px;
  overflow: hidden;
  position: relative;
}

.page-project .hero-spread img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero video — full video visible (no cropping), centered horizontally and
   vertically within the hero container. Black background fills any empty
   space when the video aspect ratio doesn't match the hero shape. Scoped
   to :has(video) so this never affects plain image heroes. */
.page-project .hero-spread:has(video) {
  background: #000;
}

.page-project .hero-spread video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.page-project .hero-spread::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 180px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45), transparent);
  z-index: 1;
  pointer-events: none;
}

.hero-title-overlay {
  position: absolute;
  left: 44px;
  bottom: 44px;
  z-index: 2;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.hero-title-overlay .crumb { opacity: 0.75; margin-bottom: 8px; }

.hero-title-overlay .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(37px, 5.2vw, 67px);
  letter-spacing: -0.005em;
  text-transform: none;
  line-height: 1;
}

.spread {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 28px;
  row-gap: 40px;
  max-width: 1840px;
  margin: 0 auto 140px;
  padding: 0 44px;
}

.intro-spread {
  margin-top: 130px;
  margin-bottom: 200px;
  row-gap: 80px;
}

.intro-title {
  grid-column: 1 / 11;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(50px, 6.4vw, 98px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin-bottom: 20px;
  text-transform: none;
}

.intro-image { grid-column: 1 / 7; }
.intro-image img { aspect-ratio: 4 / 5; object-fit: cover; }

.intro-right { grid-column: 9 / 13; padding-top: 8px; }

.intro-meta { /* meta sits inside .intro-right; no grid-column needed */ }

.meta-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-faint);
  align-items: baseline;
  gap: 12px;
}

.meta-row:first-child { border-top: 1px solid var(--border-faint); }

.meta-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.meta-value {
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 300;
}

.intro-description {
  margin-top: 40px;
  max-width: 520px;
  font-size: 17.5px;
  line-height: 1.8;
}

.intro-description p + p { margin-top: 1em; }

.spread-caption-left-tall { align-items: center; }
.spread-caption-left-tall .caption { grid-column: 2 / 5; align-self: center; }
.spread-caption-left-tall .image-tall { grid-column: 7 / 13; }
.spread-caption-left-tall .image-tall img { aspect-ratio: 3 / 4; object-fit: cover; }

.caption {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  max-width: 300px;
  letter-spacing: 0.01em;
  text-align: justify;
  hyphens: auto;
}

.caption .caption-label {
  display: block;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--text-muted);
}

.spread-fullbleed {
  display: block;
  max-width: none;
  padding: 0 44px;
  margin: 0 0 140px;
}

.spread-fullbleed img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

.spread-portrait-pair .image-1 { grid-column: 1 / 7; }
.spread-portrait-pair .image-2 { grid-column: 7 / 13; }
.spread-portrait-pair img { aspect-ratio: 3 / 4; object-fit: cover; }

.slide-dots {
  grid-column: 1 / 13;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.slide-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text);
  opacity: 0.18;
}

.slide-dots span.active { opacity: 0.9; }

.spread-wide-caption-right { align-items: center; }
.spread-wide-caption-right .image-wide { grid-column: 1 / 9; }
.spread-wide-caption-right .image-wide img { aspect-ratio: 3 / 2; object-fit: cover; }
.spread-wide-caption-right .caption { grid-column: 10 / 13; align-self: center; }

.spread-asym { align-items: end; }
.spread-asym .image-big { grid-column: 1 / 9; }
.spread-asym .image-big img { aspect-ratio: 3 / 2; object-fit: cover; }
.spread-asym .image-small { grid-column: 10 / 13; }
.spread-asym .image-small img { aspect-ratio: 3 / 4; object-fit: cover; }

.spread-caption-right-tall { align-items: center; }
.spread-caption-right-tall .image-tall { grid-column: 1 / 7; }
.spread-caption-right-tall .image-tall img { aspect-ratio: 3 / 4; object-fit: cover; }
.spread-caption-right-tall .caption { grid-column: 9 / 12; align-self: center; }

@media (max-width: 1100px) {
  .intro-right { grid-column: 8 / 13; }
  .meta-row { grid-template-columns: 100px 1fr; }
}

@media (max-width: 960px) {
  .page-project .hero-spread { height: 70vh; min-height: 520px; }
  .hero-title-overlay { left: 24px; bottom: 24px; }
  .spread { padding: 0 24px; column-gap: 16px; row-gap: 32px; margin-bottom: 80px; }
  .spread-fullbleed { padding: 0 24px; margin-bottom: 80px; }
  .intro-spread { margin-top: 80px; margin-bottom: 100px; row-gap: 48px; }
  .intro-title { grid-column: 1 / -1; }
  .intro-image, .intro-right { grid-column: 1 / -1; }
  .meta-row { grid-template-columns: 110px 1fr; }
  .spread-caption-left-tall .caption,
  .spread-caption-left-tall .image-tall,
  .spread-wide-caption-right .image-wide,
  .spread-wide-caption-right .caption,
  .spread-portrait-pair .image-1,
  .spread-portrait-pair .image-2,
  .spread-asym .image-big,
  .spread-asym .image-small,
  .spread-caption-right-tall .image-tall,
  .spread-caption-right-tall .caption { grid-column: 1 / -1; }
  .caption { max-width: 100%; }
}

@media (max-width: 600px) {
  .page-project .hero-spread { height: 68vh; min-height: 460px; }
  .hero-title-overlay .name { font-size: 46px; }
  .intro-title { font-size: 48px; }
  .spread-fullbleed img { aspect-ratio: 4 / 3; }
}

@media (max-width: 380px) {
  .page-project .spread, .page-project .spread-fullbleed { padding: 0 20px; }
  .meta-row { grid-template-columns: 90px 1fr; font-size: 16px; }
}

/* ============================================================
   ABOUT / CONSULTATION / CONTACT — shared label-left layout
   ============================================================ */

.about-section,
.contact-section,
.consult-hero,
.section {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 80px;
  max-width: 1480px;
  margin: 0 auto 96px;
  padding: 0 44px;
  align-items: start;
}

.about-top-spacer,
.consult-top-spacer,
.contact-top-spacer {
  height: 160px;
}

/* ---- ABOUT page ---- */
.page-about .about {
  padding: 0 0 0;
  overflow-x: hidden;
}
.page-about main { overflow-x: hidden; }


/* Our Founders — side-by-side layout with founders content on left,
   image on the right. Replaces the standalone hero on the about page. */
.founders-section {
  max-width: 1560px;
  margin: 180px auto 96px;
  padding: 0 44px;
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 64px;
  align-items: start;
}

.founders-content { grid-column: 1 / 2; min-width: 0; }

.founders-content .section-label {
  margin-bottom: 36px;
}

.founders-bios .person-block + .person-block {
  margin-top: 48px;
}

.founders-bios .person-block p {
  max-width: none;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 1.1em;
}

.founders-bios .person-block p:last-child { margin-bottom: 0; }

.founders-image {
  grid-column: 2 / 3;
}
.founders-image img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1100px) {
  .founders-section {
    gap: 40px;
    padding: 0 32px;
    margin-top: 140px;
  }
}

@media (max-width: 880px) {
  /* Below 880px there isn't enough horizontal room for side-by-side.
     Collapse to a single column, with the image BELOW the text. */
  .founders-section {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 0 24px;
    margin-top: 120px;
    align-items: start;
  }
  .founders-content,
  .founders-image {
    grid-column: 1;
  }
}

@media (max-width: 380px) {
  .founders-section { padding: 0 20px; }
}

.section-body { max-width: 880px; }

.section-body p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 1.1em;
}

.section-body p:last-child { margin-bottom: 0; }

.person-heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 17px;
  margin-bottom: 22px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
}

.person-block + .person-block { margin-top: 56px; }

.section-body a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.section-body a:hover { color: var(--text-soft); border-color: var(--text-soft); }

.full-image {
  width: 100%;
  margin: 0 0 96px;
  padding: 0 44px;
}

.full-image img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

/* About page: bottom photo (aboutus2) — landscape cropped, smaller overall */
.page-about .full-image {
  max-width: 1480px;
  margin: 0 auto 96px;
  padding: 0 44px;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 80px;
}
.page-about .full-image img {
  grid-column: 2;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 80% 65%;
  width: 100%;
  height: auto;
  max-width: 420px;
}

/* Mobile: revert to full width (section grids collapse to single column too) */
@media (max-width: 960px) {
  .page-about .full-image {
    display: block;
    padding: 0 24px;
  }
}

.team-list { list-style: none; margin-top: 4px; }

.team-list li {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.9;
  color: var(--text);
  letter-spacing: 0;
}

@media (max-width: 960px) {
  .about-top-spacer,
  .consult-top-spacer,
  .contact-top-spacer { height: 110px; }
  .about-section,
  .contact-section,
  .consult-hero,
  .section {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 24px;
    margin-bottom: 64px;
  }
  .full-image { padding: 0 24px; margin-bottom: 64px; }
  .person-heading { font-size: 15px; letter-spacing: 0.2em; margin-bottom: 18px; }
}

@media (max-width: 600px) {
  .full-image img { aspect-ratio: 4 / 3; }
}

@media (max-width: 380px) {
  .about-section, .full-image { padding: 0 20px; }
}

/* ---- CONSULTATION page ---- */

.page-consultation .consultation { padding: 0 0 80px; }

.consult-hero .hero-body { max-width: 880px; }

.just-launched {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  padding: 6px 14px;
  border: 1px solid var(--text);
  border-radius: 999px;
  margin-bottom: 36px;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 4.8vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
  color: var(--text);
  text-transform: none;
}

.hero-subhead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(23px, 2.5vw, 32px);
  line-height: 1.4;
  color: var(--text-soft);
  max-width: 640px;
}

.section-intro {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 48px;
  max-width: 720px;
}

.steps {
  list-style: none;
  counter-reset: step;
  border-top: 1px solid var(--border-faint);
}

.steps li {
  counter-increment: step;
  border-bottom: 1px solid var(--border-faint);
  padding: 32px 0;
  display: grid;
  grid-template-columns: 80px 280px 1fr;
  gap: 40px;
  align-items: baseline;
}

.steps li::before {
  content: "0" counter(step);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 34px;
  color: var(--text);
  line-height: 1;
}

.step-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 16px;
  color: var(--text);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.3;
}

.step-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-soft);
}

.booking-intro {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 32px;
  max-width: 640px;
}

.booking-list { list-style: none; border-top: 1px solid var(--border-faint); }
.booking-list li { border-bottom: 1px solid var(--border-faint); }

.booking-list a {
  display: grid;
  grid-template-columns: 1fr auto 24px;
  gap: 32px;
  align-items: baseline;
  padding: 26px 0;
  text-decoration: none;
  color: var(--text);
  transition: color 0.3s ease;
}

.booking-list a:hover { color: var(--text-soft); }

.booking-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(23px, 2.3vw, 30px);
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
}

.booking-role {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.booking-list a:hover .booking-role { color: var(--text-soft); }

.booking-arrow {
  font-family: var(--font-body);
  font-size: 20px;
  color: var(--text-muted);
  transition: transform 0.3s ease, color 0.3s ease;
  text-align: right;
  line-height: 1;
}

.booking-list a:hover .booking-arrow {
  transform: translateX(4px);
  color: var(--text);
}

@media (max-width: 960px) {
  .steps li {
    grid-template-columns: 56px 1fr;
    gap: 20px;
    padding: 24px 0;
  }
  .steps li .step-desc { grid-column: 2 / 3; }
  .steps li::before { font-size: 30px; }
  .step-title { font-size: 20px; }
  .booking-list a {
    grid-template-columns: 1fr 20px;
    gap: 12px;
    padding: 22px 0;
  }
  .booking-role { grid-column: 1 / 2; grid-row: 2; }
  .booking-arrow { grid-row: 1 / 3; align-self: center; }
}

@media (max-width: 600px) {
  .hero-title { font-size: 44px; }
  .hero-subhead { font-size: 20px; }
  .booking-name { font-size: 25px; }
}

/* ---- CONTACT page ---- */

.page-contact .contact { padding: 0 0 80px; }

.contact-intro {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 64px;
  align-items: start;
  max-width: 880px;
}

.contact-blurb p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 1em;
}

.contact-blurb a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.contact-blurb a:hover { color: var(--accent); border-color: var(--accent); }

.contact-side {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
}

.contact-side a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-side a:hover { color: var(--accent); }

.contact-side .divider { color: var(--text-muted); margin: 0 6px; }

.form-section {
  max-width: 1480px;
  margin: 0 auto 80px;
  padding: 64px 44px 0;
  border-top: 1px solid var(--border-faint);
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 80px;
  align-items: start;
}

.form-intro {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 48px;
  max-width: 720px;
}

.form { width: 100%; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.form-row.single { grid-template-columns: 1fr; }

.form-field { position: relative; }

.form-field label {
  position: absolute;
  top: 18px;
  left: 18px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--text-soft);
  pointer-events: none;
  transition: top 0.25s ease, font-size 0.25s ease, color 0.25s ease;
  background: transparent;
  padding: 0 4px;
}

.form-field input,
.form-field textarea {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid transparent;
  border-bottom: 1px solid var(--border-faint);
  padding: 18px 18px 12px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.5;
  border-radius: 0;
  transition: border-color 0.3s ease, background 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}

.form-field textarea {
  min-height: 160px;
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--text);
  background: var(--bg);
}

.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label {
  top: -8px;
  left: 12px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text);
  background: var(--bg);
}

.form-field textarea + label { top: 18px; }

.form-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.submit-btn {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--text);
  padding: 18px 64px;
  cursor: pointer;
  transition: color 0.4s ease, background 0.4s ease, letter-spacing 0.4s ease;
}

.submit-btn:hover {
  background: var(--text);
  color: var(--bg);
  letter-spacing: 0.34em;
}

.form-message {
  display: none;
  margin-top: 24px;
  padding: 16px 20px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  border: 1px solid var(--border-faint);
}

.form-message.show { display: block; }
.form-message.success { border-color: var(--accent); color: var(--text); }
.form-message.error { border-color: #b04632; color: #b04632; }

.mobile-break { display: none; }

@media (max-width: 960px) {
  .contact-intro { grid-template-columns: 1fr; gap: 32px; }
  .form-section {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 16px 0;
  }
  .form-intro { font-size: 16.5px; margin-bottom: 32px; }
  .mobile-break { display: block; }
  .form-row { grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
  .form-field input,
  .form-field textarea { font-size: 16px; padding: 16px 14px; }
  .submit-btn { padding: 18px 32px; width: 100%; }
  .form-actions { justify-content: stretch; margin-top: 16px; }
}

@media (max-width: 600px) {
  .contact-blurb p { font-size: 16.5px; }
}
body.menu-open .top-header .stamp-mark { visibility: hidden; }

/* ============== NO WIDOWS/ORPHANS ==============
   Prevents a single stray word from breaking onto its own line at
   the end of a paragraph, on any screen size. Applies to every
   project page's body copy site-wide. */
main.project p {
  text-wrap: pretty;
}