/* ============================================================
   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 — outlined pill (transparent fill, border only),
   matching the submit button's ghost style for consistency. */
.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: transparent;
  border: 1px solid var(--text);
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  transition: color 0.35s ease, border-color 0.35s ease, background 0.35s ease;
  min-width: 80px;
  text-align: right;
  line-height: 1;
}

/* Project pages start over a (typically dark) hero image, so the
   trigger is white with a white outline instead of black. */
.page-project .menu-trigger {
  color: var(--white);
  border-color: var(--white);
  background: transparent;
}

/* Homepage hero video is light-colored, so a white outline would
   disappear against it — use the default black outline instead. */
.page-home .menu-trigger {
  color: var(--text);
  border-color: var(--text);
  background: transparent;
}

/* Once a project page scrolls past the hero to a white background,
   trigger goes back to the default black outline */
.page-project.scrolled .menu-trigger {
  color: var(--text);
  border-color: var(--text);
  background: transparent;
}

/* When menu is open the panel covers content; trigger sits over white panel */
body.menu-open .menu-trigger { color: var(--text); border-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%;
  margin: 0;
  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;
  line-height: 1.4;
  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%;
  margin: 0;
  padding: 10px 0;
  background: none;
  border: none;
  text-align: left;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.4;
  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 {
  display: block;
  width: 100%;
  margin: 0;
  padding: 5px 0 5px 14px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.4;
  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;
  margin: 0;
  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; margin: 0; }

.submenu-list--nested a {
  display: block;
  padding: 5px 0 5px 14px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.4;
  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 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  color: var(--text);
  transition: opacity 0.3s ease;
}

.menu-social a:hover { opacity: 0.55; }
.menu-social a svg { display: block; width: 26px; height: 26px; flex-shrink: 0; }

.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;
}

/* Social icon row — "Follow Us!" label + IG/FB/LinkedIn icon badges.
   Outlined (transparent fill, black stroke) to match the submit
   button's ghost style — same "vibe" as the rest of the site's CTAs,
   not solid filled badges. */
.footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-social-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  margin-right: 2px;
}
.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  color: var(--text);
  transition: opacity 0.3s ease;
}
.footer-social-icon:hover { opacity: 0.55; }
.footer-social-icon svg {
  display: block;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

/* 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; }

/* "LET'S CREATE." heading above the form intro paragraph */
.form-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 20px;
}

/* Select fields — same visual language as text inputs, but the
   label always sits in the compact "filled" position since a
   <select> doesn't support :placeholder-shown the way inputs do. */
.form-field select {
  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;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.form-field select:focus {
  outline: none;
  border-color: var(--text);
  background: var(--bg);
}
.form-field select:invalid { color: var(--text-soft); }
/* Select labels sit as plain static text above the box rather than
   overlapping its border — native <select> height varies enough
   across browsers that the "floating label cutting into the border"
   trick (used for text inputs) isn't reliable here. */
.form-field.has-select {
  display: flex;
  flex-direction: column;
}
.form-field.has-select label {
  position: static;
  display: block;
  order: -1;
  margin: 0 0 10px;
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text);
  background: none;
}

/* Small helper caption under a field, explaining what to include */
.form-field-help {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--text-soft);
  margin: -14px 0 24px;
  line-height: 1.5;
}

/* Newsletter opt-in — a pill toggle, same visual language as the
   session-length pills on the consultation page */
.newsletter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  border: 1px solid var(--border-faint);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.newsletter-toggle:hover { border-color: var(--text); }
.newsletter-toggle-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border-faint);
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.newsletter-toggle[aria-pressed="true"] {
  border-color: var(--text);
  background: var(--field-bg);
}
.newsletter-toggle[aria-pressed="true"] .newsletter-toggle-dot {
  background: var(--text);
  border-color: var(--text);
}

/* Space-only fields — fade/slide in together when Project = Space */
.form-space-fields {
  overflow: hidden;
}
.form-space-fields[hidden] { display: none; }

/* Yes/No toggle pair — used for the contractor question */
.form-yesno-label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--text);
  margin: 0 0 14px;
}
.form-yesno {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.yesno-btn {
  padding: 11px 28px;
  border: 1px solid var(--border-faint);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.yesno-btn:hover { border-color: var(--text); }
.yesno-btn.is-active {
  background: var(--text);
  border-color: var(--text);
  color: var(--white);
}
.form-contractor-name[hidden] { display: none; }

.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);
  border-radius: 999px;
  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; }
  .form-heading { margin-bottom: 16px; }
  .newsletter-toggle { width: 100%; justify-content: flex-start; }
  .form-yesno { flex-wrap: wrap; }
  .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;
}