/* ==========================================================================
   Mandi's Models — styles.css
   Order: tokens → base → components → sections → pages → utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  --cream:      #F6F3EE;
  --cream-deep: #EFEAE2;
  --ink:        #191613;
  --ink-soft:   #3A352F;
  --taupe:      #6E6355;
  --gold:       #A98850;   /* decorative only */
  --gold-deep:  #7A5C2E;   /* gold as text / hover bg */
  --line:       rgba(25, 22, 19, 0.14);
  --white:      #FFFFFF;
  --noir:       #0F0D0B;   /* dark editorial bands */
  --gold-light: #D6BE8C;   /* gold as text on dark */

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --size-hero: clamp(3.2rem, 8.6vw, 8.6rem);
  --size-h2: clamp(2rem, 4.5vw, 4rem);
  --size-h3: clamp(1.5rem, 2.6vw, 2.25rem);

  --margin-side: clamp(20px, 5vw, 80px);
  --section-gap: clamp(96px, 12vw, 200px);
  --max-width: 1440px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

/* CSS smooth anchors only when Lenis is not driving the scroll (no-JS / CDN blocked).
   Lenis stamps .lenis on <html>; combining the two is a documented Lenis conflict. */
html:not(.lenis) {
  scroll-behavior: smooth;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Barely-perceptible grain over everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.nav-open { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 340;
  font-optical-sizing: auto;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}
h1 { font-weight: 300; }

h1 { font-size: var(--size-hero); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }

h1 em, h2 em, h3 em, .quote em {
  font-style: italic;
  font-weight: 320;
}

p {
  margin: 0 0 1.2em;
  color: var(--ink-soft);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--gold);
  color: var(--white);
}

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
.footer :focus-visible {
  outline-color: var(--gold); /* gold-deep is below 3:1 on ink */
}

/* --------------------------------------------------------------------------
   3. COMPONENTS
   -------------------------------------------------------------------------- */

/* Layout wrap */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--margin-side);
  padding-right: var(--margin-side);
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 300;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 14px;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; }

/* Eyebrow labels */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--taupe);
  margin-bottom: 24px;
}
.eyebrow--gold { color: var(--gold-deep); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 16px 34px;
  border-radius: 2px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  /* No transform here: GSAP drives the button's transform (magnetic pull,
     reveal rise) and a CSS transition on it would lag every frame. The
     press uses the standalone `scale` property, which composes with it.
     GSAP writes an inline `scale: none` on every element it transforms, so
     the press needs !important to get past that. */
  transition: background 0.6s ease, border-color 0.6s ease, scale 0.2s ease;
}
.btn:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--cream); }
.btn:active { scale: 0.98 !important; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--cream); }

.btn--on-dark {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}
.btn--on-dark:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* Animated underline text link */
.tlink {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
}
.tlink::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-out);
}
.tlink:hover::after { transform: scaleX(1); }
.tlink--lit::after { transform: scaleX(1); transform-origin: left; }
.tlink--lit:hover::after { transform: scaleX(0); transform-origin: right; }

/* Photo frames */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--cream-deep);
}
.frame img,
.frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.08);
  /* No transform transition at this level: parallax, image reveals and the
     services preview all animate these images with GSAP. Hover zooms that
     GSAP never touches (.team-card, .model-card) opt back in below. */
}
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  opacity: 0.05;
  border-radius: inherit;
  pointer-events: none;
}
.frame { border-radius: 4px; }
.frame--34 { aspect-ratio: 3 / 4; }
.frame--43 { aspect-ratio: 4 / 3; }
.frame--1610 { aspect-ratio: 16 / 10; }
.frame--11 { aspect-ratio: 1 / 1; }

/* Placeholder component — intentional, elegant */
.placeholder {
  border-radius: 4px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  background: var(--cream-deep);
  padding: 48px 32px;
}
.placeholder::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--gold);
  border-radius: inherit;
  opacity: 0.55;
  pointer-events: none;
}
.placeholder__label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
}
.placeholder__note {
  font-size: 13.5px;
  color: var(--taupe);
  max-width: 34ch;
  margin: 0;
}
.placeholder--photo { min-height: 100%; }

/* Hairline rule */
.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  background: rgba(246, 243, 238, 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--line);
}
.header.is-hidden { transform: translateY(-100%); }

/* Keep the header (and its burger) clickable above the open mobile overlay */
body.nav-open .header {
  z-index: 260;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 84px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wordmark img {
  height: 26px;
  width: auto;
  display: block;
  /* original mark is white; render ink on light surfaces */
  filter: brightness(0);
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.wordmark span {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.3s ease;
}
.wordmark:hover img { opacity: 0.75; }
.wordmark:hover span { color: var(--gold-deep); }
body.cinema-hero .header:not(.is-scrolled) .wordmark img { filter: none; }
body.cinema-hero .header:not(.is-scrolled) .wordmark span { color: var(--cream); }
body.nav-open .wordmark img { filter: brightness(0) !important; }
body.nav-open .wordmark span { color: var(--ink) !important; }

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav__link {
  position: relative;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  padding: 6px 0;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--gold);
}
.nav .btn { min-height: 42px; padding: 10px 22px; font-size: 11px; }

/* Hamburger */
.burger {
  display: none;
  position: relative;
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 260;
}
.burger span {
  position: absolute;
  left: 10px;
  width: 28px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.35s var(--ease-out), top 0.35s var(--ease-out);
}
.burger span:nth-child(1) { top: 20px; }
.burger span:nth-child(2) { top: 28px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 24px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 24px; transform: rotate(-45deg); }

/* Mobile overlay nav */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 110px var(--margin-side) 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }

.mobile-nav__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mobile-nav__links a {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 9vw, 3.6rem);
  font-weight: 340;
  line-height: 1.15;
  color: var(--ink);
  display: inline-block;
  padding: 2px 0;
}
.mobile-nav__links a[aria-current="page"] { color: var(--gold-deep); }
.mobile-nav.is-open .mobile-nav__links li {
  animation: navRise 0.7s var(--ease-out) both;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes navRise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}

.mobile-nav__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  color: var(--taupe);
}
.mobile-nav__meta a { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: var(--cream);
  margin-top: var(--section-gap);
}
.footer__top {
  padding: clamp(72px, 9vw, 130px) 0 clamp(48px, 6vw, 80px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  border-bottom: 1px solid rgba(246, 243, 238, 0.14);
}
.footer__logo {
  height: 44px;
  width: auto;
  margin-bottom: 28px;
  opacity: 0.95;
}
.footer__line {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 3.2rem);
  font-weight: 340;
  line-height: 1.15;
  max-width: 16em;
  margin: 0;
  color: var(--cream);
}
.footer__line + .btn { margin-top: 32px; }   /* the descenders touched the button */
.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: clamp(48px, 6vw, 72px) 0;
}
.footer__col h4 {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 20px;
}
.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__col a {
  color: var(--cream);
  font-size: 15px;
  opacity: 0.85;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.footer__col a:hover { opacity: 1; color: var(--gold); }
.footer__col p {
  color: var(--cream);
  opacity: 0.7;
  font-size: 15px;
  margin: 0;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 0 32px;
  border-top: 1px solid rgba(246, 243, 238, 0.14);
  font-size: 13px;
  color: rgba(246, 243, 238, 0.55);
}

/* --------------------------------------------------------------------------
   4. SECTIONS
   -------------------------------------------------------------------------- */
.section { padding-top: var(--section-gap); }
.section--tight { padding-top: calc(var(--section-gap) * 0.6); }

/* Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 64px;
}
.hero__sub {
  font-size: 17.5px;
  max-width: 44ch;
  margin-bottom: 36px;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.hero__scrollcue {
  position: absolute;
  bottom: 28px;
  left: var(--margin-side);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
}
.hero__scrollcue::before {
  content: "";
  width: 48px;
  height: 1px;
  background: var(--gold);
}

/* Center-stage brand that flies into the header on scroll (JS-driven) */
.hero-brand {
  position: fixed;
  inset: 0;
  z-index: 210; /* above the header bar during flight, below mobile nav/veil */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  pointer-events: none;
  opacity: 0; /* revealed by JS; decorative duplicate of the header lockup */
}
.hero-brand img {
  width: clamp(200px, 26vw, 340px);
  height: auto;
  filter: drop-shadow(0 2px 22px rgba(25, 22, 19, 0.45)); /* holds up over bright sky */
}
body.nav-open .hero-brand { visibility: hidden; }
.hero-brand span {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--cream);
  text-shadow: 0 1px 14px rgba(25, 22, 19, 0.6);
}

/* Full-bleed cinematic hero (IMG-style) */
.hero--cinema {
  align-items: flex-end;
  padding-top: 0;
  padding-bottom: clamp(64px, 10vh, 130px);
  color: var(--cream);
}
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--ink);
}
.hero__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero__bg img,
.hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(25, 22, 19, 0.78) 0%,
    rgba(25, 22, 19, 0.34) 48%,
    rgba(25, 22, 19, 0.22) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero--cinema h1 {
  color: var(--cream);
  max-width: 11em;
}
.hero--cinema .hero__sub { color: rgba(246, 243, 238, 0.88); }
.hero--cinema .eyebrow {
  color: var(--cream);
  text-shadow: 0 1px 14px rgba(25, 22, 19, 0.6);
}
.hero--cinema h1 { text-shadow: 0 2px 24px rgba(25, 22, 19, 0.35); }
.hero--cinema .hero__scrollcue { color: rgba(246, 243, 238, 0.75); }
.tlink--cream { color: var(--cream); }
.tlink--cream::after { background: var(--gold); }

/* Header over the dark hero video: cream until it gains its scrolled background */
body.cinema-hero .header:not(.is-scrolled) .wordmark,
body.cinema-hero .header:not(.is-scrolled) .nav__link { color: var(--cream); }
body.cinema-hero .header:not(.is-scrolled) .nav__link::after { background: var(--gold); }
body.cinema-hero .header:not(.is-scrolled) .nav .btn {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}
body.cinema-hero .header:not(.is-scrolled) .nav .btn:hover {
  background: var(--gold);
  border-color: var(--gold);
}
body.cinema-hero:not(.nav-open) .header:not(.is-scrolled) .burger span { background: var(--cream); }

/* Inner-page hero (short) */
.page-hero {
  padding-top: clamp(150px, 20vh, 220px);
}
.page-hero h1 { max-width: 12em; }
.page-hero__intro {
  font-size: 18px;
  max-width: 58ch;
  margin-top: 24px;
}

/* Editorial split */
.editorial {
  display: grid;
  grid-template-columns: 5fr 1fr 6fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
.editorial--flip { grid-template-columns: 6fr 1fr 5fr; }
.editorial__statement {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 340;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 24px;
}

/* Stats band */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: clamp(36px, 4.5vw, 64px) clamp(16px, 2vw, 32px);
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: 0; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 340;
  line-height: 1;
  color: var(--ink);
  display: block;
  margin-bottom: 12px;
}
.stat__label {
  font-size: 13.5px;
  color: var(--taupe);
}

/* Services index rows */
.services-index { border-top: 1px solid var(--line); }
.service-row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(28px, 3.5vw, 52px) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: color 0.5s ease;
}
.service-row__idx {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--taupe);
  min-width: 2.4em;
}
.service-row__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.6vw, 4.2rem);
  font-weight: 340;
  line-height: 1.05;
  letter-spacing: -0.015em;
  flex: 1;
}
.service-row__arrow {
  font-size: 22px;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.5s ease, transform 0.5s var(--ease-out);
}
.service-row:hover { color: var(--gold-deep); }
.service-row:hover .service-row__arrow { opacity: 1; transform: translateX(0); }

/* Fixed side preview: photo crossfades in place as rows are hovered */
.services-layout {
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: clamp(32px, 5vw, 90px);
  align-items: start;
}
.services-preview {
  position: sticky;
  top: 110px;
}
.services-preview .frame { max-width: 420px; }
.services-preview__img {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.services-preview__img.is-active { opacity: 1; }
/* Fallback crossfade only when GSAP isn't driving the wipe */
.services-preview--css .services-preview__img { transition: opacity 0.5s ease; }
.services-preview__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  margin-top: 16px;
}
.services-preview__rule {
  display: block;
  height: 1px;
  background: var(--gold);
  transform-origin: left;
}
.services-preview__label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--taupe);
}
@media (max-width: 1023px) {
  .services-layout { grid-template-columns: 1fr; }
  .services-preview { display: none; } /* rows are plain elegant links on touch */
}

/* Gallery strip */
.gallery-strip {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 20px;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.gallery-strip:active { cursor: grabbing; }
.gallery-strip figure {
  margin: 0;
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.gallery-strip .frame { height: clamp(280px, 42vw, 440px); }
.gallery-strip .frame--34 { width: auto; aspect-ratio: 3/4; }
.gallery-strip .frame--43 { width: auto; aspect-ratio: 4/3; }
.gallery-strip .frame--11 { width: auto; aspect-ratio: 1/1; }
.gallery-strip figcaption {
  font-size: 13px;
  color: var(--taupe);
  margin-top: 12px;
  width: 0;            /* never widen the figure: wrap to the photo's width instead, and never */
  min-width: min(100%, calc(100vw - 2 * var(--margin-side)));   /* past the visible strip on phones */
}

/* Big quote */
.bigquote {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.bigquote .quote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  font-weight: 340;
  line-height: 1.3;
  color: var(--ink);
}

/* Split band (join teaser) */
.split-band {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  background: var(--cream-deep);
  padding: clamp(48px, 7vw, 100px) clamp(28px, 5vw, 80px);
}
.split-band h2 { margin-bottom: 16px; }
.split-band p { margin-bottom: 0; }

/* CTA finale */
.cta-finale {
  background: var(--cream-deep);
  text-align: center;
  padding: clamp(80px, 11vw, 170px) var(--margin-side);
  margin-top: var(--section-gap);
}
.cta-finale h2 {
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  margin-bottom: 20px;
}
.cta-finale p {
  max-width: 46ch;
  margin: 0 auto 36px;
}
.cta-finale__phone {
  display: inline-block;
  margin-top: 36px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  color: var(--ink);
  transition: color 0.3s ease;
}
.cta-finale__phone:hover { color: var(--gold-deep); }

/* Marquee */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 34px 0;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  color: var(--taupe);
  white-space: nowrap;
  padding-right: clamp(40px, 6vw, 90px); /* spacing lives on items so -50% loops seamlessly */
}

/* Team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
}
.team-card { position: relative; }
.team-card .frame { aspect-ratio: 3 / 4; }
.team-card .frame::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--gold);
  border-radius: inherit;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.team-card:hover .frame::before { opacity: 0.7; }
.team-card .frame img { transition: transform 1.2s var(--ease-out); }
.team-card:hover .frame img { transform: scale(1.05); }
.team-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 16px;
}
.team-card__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
}
.team-card__tag {
  font-size: 13.5px;
  color: var(--taupe);
}
.team-card__loc {
  font-size: 12.5px;
  color: var(--taupe);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Alternating service blocks */
.service-block {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
}
.service-block--flip .service-block__media { order: 2; }
.service-block__idx {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
  display: block;
  margin-bottom: 18px;
}
.service-block__typical {
  font-size: 13.5px;
  color: var(--taupe);
  margin: 20px 0 24px;
}

/* FAQ accordion */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: none;
  border: 0;
  padding: 26px 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 360;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: color 0.3s ease;
}
.faq__q:hover { color: var(--gold-deep); }
.faq__q::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 300;
  color: var(--gold-deep);
  transition: transform 0.35s var(--ease-out);
  flex: 0 0 auto;
}
.faq__q[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s var(--ease-out);
}
.faq__a p {
  padding: 0 0 26px;
  max-width: 62ch;
}

/* Standards / three-column band */
.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 64px);
}
.cols-3 h2, .cols-3 h3 {
  font-size: 1.45rem;
  margin-bottom: 14px;
}
.cols-3 p { font-size: 15.5px; margin: 0; }

/* Timeline band */
.timeline {
  border-top: 1px solid var(--line);
}
.timeline__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: clamp(20px, 4vw, 60px);
  padding: clamp(28px, 3.5vw, 44px) 0;
  border-bottom: 1px solid var(--line);
}
.timeline__year {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--gold-deep);
  line-height: 1.1;
}
.timeline__row p { margin: 0; max-width: 60ch; }

/* Quote cards */
.quote-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.form-layout {
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: clamp(32px, 5vw, 90px);
  align-items: start;
}

.form-card { max-width: 720px; }

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}
.field label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="url"],
.field select,
.field textarea {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 15px 18px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  transition: border-color 0.3s ease;
}
.field select {
  background-image: 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 1l5 5 5-5' fill='none' stroke='%236E6355' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
  cursor: pointer;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--gold-deep); }
.field__error {
  display: none;
  font-size: 13px;
  color: var(--gold-deep);
}
.field.has-error .field__error { display: block; }
.field__hint { font-size: 13px; color: var(--taupe); }

.field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}
.field--check input {
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--gold-deep);
  flex: 0 0 auto;
}
.field--check label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-soft);
}

.check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.check-group .field--check { margin-bottom: 0; }

fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 8px;
}
legend {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  padding: 0;
  margin-bottom: 12px;
}

/* Honeypot — hidden from humans, present for bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Multi-step */
.form-progress { margin-bottom: 44px; }
.form-progress__label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--taupe);
  display: block;
  margin-bottom: 12px;
}
.form-progress__bar {
  height: 2px;
  background: var(--line);
  position: relative;
}
.form-progress__fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--gold);
  width: 33.33%;
  transition: width 0.5s var(--ease-out);
}
form.js-steps .form-step { display: none; }
form.js-steps .form-step.is-active { display: block; }
.form-step__title {
  font-size: 1.6rem;
  margin-bottom: 28px;
}
.form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

/* Success state */
.form-success {
  display: none;
  text-align: left;
  padding: clamp(40px, 5vw, 64px) 0;
}
.form-success.is-visible { display: block; }
.form-success h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); }

/* Sidebar summary card */
.side-card {
  background: var(--cream-deep);
  padding: clamp(28px, 3vw, 44px);
  position: sticky;
  top: 110px;
}
.side-card h3 { font-size: 1.3rem; margin-bottom: 18px; }
.side-card p { font-size: 15px; }
.side-card a { font-weight: 500; color: var(--ink); }
.side-card a:hover { color: var(--gold-deep); }
.how-steps {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  counter-reset: step;
}
.how-steps li {
  counter-increment: step;
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--ink-soft);
}
.how-steps li::before {
  content: counter(step, decimal-leading-zero);
  font-size: 12px;
  color: var(--gold-deep);
  letter-spacing: 0.1em;
  padding-top: 2px;
}

/* --------------------------------------------------------------------------
   5. PAGE-SPECIFIC
   -------------------------------------------------------------------------- */

/* Preloader — candlelight bloom */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: #0D0B09;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.preloader__glow {
  position: absolute;
  width: 64vmin;
  height: 64vmin;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(169, 136, 80, 0.55) 0%,
    rgba(169, 136, 80, 0.22) 42%,
    transparent 70%);
  filter: blur(28px);
  opacity: 0;
}
.preloader__logo {
  position: relative;
  width: clamp(200px, 26vw, 340px); /* matches .hero-brand img */
  height: auto;
  transform: translateY(-17px);     /* matches brand column offset (text + gap) */
  opacity: 0;
}

/* Page-transition veil */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 350;
  background: var(--cream);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.page-veil.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* 404 */
.page-404 {
  min-height: 70svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 140px;
}

/* Attire band on models page */
.attire-band {
  background: var(--cream-deep);
  padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 80px);
}

/* --------------------------------------------------------------------------
   6. UTILITIES
   -------------------------------------------------------------------------- */
.center { text-align: center; }
.measure { max-width: 62ch; }
.mt-0 { margin-top: 0; }
.mb-lg { margin-bottom: clamp(40px, 5vw, 72px); }
.section-head { margin-bottom: clamp(40px, 5vw, 72px); }

/* Reveal system initial states are set by JS (no-JS users see everything) */

/* Scroll guard — main.js stamps body.is-scrolling while the page is moving
   under the pointer (Lenis glide or native scroll). Hover targets in the
   content stop catching the pointer and their hover transforms rest, so rows,
   cards and buttons don't fire as they slide past a stationary cursor.
   The header and nav are deliberately left live. */
body.is-scrolling :is(main, .footer) :is(.service-row, .model-card, .team-card, .tlink, .btn) {
  pointer-events: none;
}
body.is-scrolling .service-row:hover { color: var(--ink); }
body.is-scrolling .service-row:hover .service-row__arrow { opacity: 0; transform: translateX(-14px); }
body.is-scrolling .model-card:hover .frame img,
body.is-scrolling .team-card:hover .frame img { transform: none; }
body.is-scrolling .tlink:hover::after { transform: scaleX(0); }
body.is-scrolling .tlink--lit:hover::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .nav { display: none; }
  .burger { display: block; }
  .form-layout { grid-template-columns: 1fr; }
  .side-card { position: static; }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero { padding-top: 130px; min-height: 0; }
  .hero__media { margin-left: 0; max-width: 480px; }
  .editorial, .editorial--flip { grid-template-columns: 1fr; }
  .editorial__media { max-width: 480px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .service-block, .service-block--flip { grid-template-columns: 1fr; }
  .service-block--flip .service-block__media { order: 0; }
  .service-block__media { max-width: 560px; }
  .split-band { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .quote-cards { grid-template-columns: 1fr; }
  .cols-3 { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; gap: 48px; }
  .timeline__row { grid-template-columns: 90px 1fr; }
}

@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-left: 0; border-top: 1px solid var(--line); }
  .stat:first-child { border-top: 0; }
  .hero__actions { gap: 20px; }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee__track { animation: none; transform: none; }
  .preloader { display: none; }
}

/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */
@media print {
  body::before { display: none; }              /* grain */
  .header, .mobile-nav, .page-veil, .preloader,
  .hero-brand, .footer__logo,
  .hero__scrollcue { display: none !important; }
  .footer { background: none; color: var(--ink); }
  .footer a, .footer p, .footer__line { color: var(--ink) !important; }
}


/* --------------------------------------------------------------------------
   7. PREMIUM LAYER — roster cards, dark bands, founder, marquee on dark
   -------------------------------------------------------------------------- */
.band--noir {
  background: var(--noir);
  color: var(--cream);
  padding: var(--section-gap) 0;
  margin-top: var(--section-gap);
}
.band--noir h1, .band--noir h2, .band--noir h3 { color: var(--cream); }
.band--noir p { color: rgba(246, 243, 238, 0.72); }
.band--noir .eyebrow { color: var(--gold-light); }
.band--noir .tlink { color: var(--cream); }
.band--noir .tlink::after { background: var(--gold); }
.band--noir .btn { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.band--noir .btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.band--noir .btn--ghost { background: transparent; border-color: rgba(246, 243, 238, 0.4); color: var(--cream); }
.band--noir .btn--ghost:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.band--noir + .footer { margin-top: 0; }
.band--noir .marquee { border-color: rgba(246, 243, 238, 0.14); }
.band--noir .marquee__item { color: rgba(246, 243, 238, 0.66); }
.band--noir .stats, .band--noir .stat { border-color: rgba(246, 243, 238, 0.14); }
.band--noir .stat__num { color: var(--cream); }
.band--noir .stat__label { color: rgba(246, 243, 238, 0.6); }
.band--noir :focus-visible { outline-color: var(--gold); }

/* Eyebrow with a gold hairline */
.eyebrow--line { display: flex; align-items: center; gap: 14px; }
.eyebrow--line::before { content: ""; width: 36px; height: 1px; background: var(--gold); flex: 0 0 auto; }

/* Section head row: eyebrow + headline left, link right */
.head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.head-row h2 { max-width: 14em; margin: 0; }
.head-row > div:last-child { padding-bottom: 8px; }

/* Roster grids */
.roster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 32px);
}
.roster--3 { grid-template-columns: repeat(3, 1fr); }
/* Model cards. The caption follows Mandi's own photo captions (her emails of
   22 Sep - 7 Oct 2026): the first name in a thin script (Oooh Baby), a thin rule,
   MANDI'S MODELS in small, widely spaced serif capitals (Libre Caslon Text),
   then the region (IDAHO, NEVADA, SOUTHERN CALIFORNIA) when one is set.
   Sizes follow the card's own width (container query units), so one lockup
   reads at 4-up, 3-up and the 2-up phone grid. The photos carry no caption.
   Every card reserves the region line (padding-bottom on the meta; the region
   pulls itself back into it with a negative margin), so names and rules line
   up across a row whether or not a card has a region. */
.model-card {
  position: relative;
  display: block;
  color: inherit;
  container-type: inline-size;
  --card-script: "Oooh Baby", "Allura", "Segoe Script", "Snell Roundhand", cursive;
  --card-caps: "Libre Caslon Text", "Cormorant Garamond", Georgia, serif;
  --region-size: 9.5px;
}
@supports (width: 1cqi) {
  .model-card { --region-size: clamp(8.5px, 2.5cqi, 11px); }
}
.model-card .frame { aspect-ratio: 3 / 4; border-radius: 4px; }
.model-card .frame::after { opacity: 0.03; }
.model-card .frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* a faint top scrim keeps the mark and number readable on bright, back-lit
     backgrounds; the deep bottom scrim carries the caption */
  background:
    linear-gradient(to bottom,
      rgba(15, 13, 11, 0.3) 0%,
      rgba(15, 13, 11, 0) 15%),
    linear-gradient(to top,
      rgba(15, 13, 11, 0.86) 0%,
      rgba(15, 13, 11, 0.6) 19%,
      rgba(15, 13, 11, 0.22) 38%,
      rgba(15, 13, 11, 0) 56%);
  pointer-events: none;
}
.model-card .frame img {
  filter: sepia(0.06);
  transition: transform 1.4s var(--ease-out), filter 1s ease;
}
.model-card:hover .frame img { transform: scale(1.045); }
.model-card__mark {
  position: absolute;
  top: 18px; left: 18px;
  z-index: 2;
  height: 16px;
  width: auto;
  opacity: 0.85;
  /* tight + soft shadow: the cream mark stays readable on bright skies (Hope's card) */
  filter: drop-shadow(0 0 1px rgba(15, 13, 11, 0.55)) drop-shadow(0 1px 4px rgba(15, 13, 11, 0.55));
  pointer-events: none;
}
.model-card__idx {
  position: absolute;
  top: 16px; right: 18px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(246, 243, 238, 0.75);
  text-shadow: 0 1px 6px rgba(15, 13, 11, 0.5);
}
.model-card__meta {
  position: absolute;
  left: 8px; right: 8px;
  bottom: 14px;
  bottom: clamp(10px, 3.8cqi, 18px);
  padding-bottom: calc(var(--region-size) * 1.9);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--cream);
  pointer-events: none;
}
.model-card__name {
  font-family: var(--card-script);
  font-weight: 400;
  font-size: 2rem;
  font-size: clamp(1.7rem, 12cqi, 3.1rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  padding: 0 0.25em;
  white-space: nowrap;
  text-shadow: 0 1px 14px rgba(15, 13, 11, 0.5);
}
/* MANDI'S MODELS (or OWNER · MANDI'S MODELS); its top padding holds the rule,
   the left padding balances the trailing letter-space so the caps centre. */
.model-card__label {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-top: 0.35em;
  padding: 0.95em 0 0 0.3em;
  font-family: var(--card-caps);
  font-weight: 500;
  font-size: 10.5px;
  font-size: clamp(9.5px, 2.8cqi, 12px);
  line-height: 1.25;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(15, 13, 11, 0.55);
}
.model-card__label::before {
  content: "";
  position: absolute;
  top: 0; left: 6%; right: 6%;
  height: 1px;
  background: rgba(246, 243, 238, 0.8);
  box-shadow: 0 0 4px rgba(15, 13, 11, 0.3);
}
.model-card__sep { letter-spacing: 0; margin: 0 0.6em 0 0.3em; }
.model-card__region {
  margin: 0.6em 0 calc(var(--region-size) * -1.9);
  padding-left: 0.26em;
  font-family: var(--card-caps);
  font-weight: 500;
  font-size: var(--region-size);
  line-height: 1.3;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--gold-light);
  text-shadow: 0 1px 6px rgba(15, 13, 11, 0.6);
}
/* Narrow cards (2-up phones, 4-up on small laptops): tighter tracking, and
   "Owner · Mandi's Models" stacks into two centred lines without the dot.
   Here the caps are always 9.5px and the region 8.5px, so the extra line
   (9.5px x 1.25 + 0.45em gap = 16.15px) exactly fills the reserved region
   slot (8.5px x 1.9) when no region follows: Mandi's name lines up. */
@container (max-width: 300px) {
  .model-card__label { letter-spacing: 0.2em; padding-left: 0.2em; }
  .model-card__region { letter-spacing: 0.16em; padding-left: 0.16em; }
  .model-card__label--role { flex-direction: column; align-items: center; row-gap: 0.45em; }
  .model-card__label--role:last-child { margin-bottom: calc(var(--region-size) * -1.9); }
  .model-card__label--role .model-card__sep { display: none; }
}
/* Very narrow cards (2-up on 320-360px phones): a smaller name and tighter
   caps, so "Mandi Costa" and SOUTHERN CALIFORNIA stay on one line. */
@container (max-width: 160px) {
  .model-card__meta { left: 4px; right: 4px; }
  .model-card__name { font-size: 1.4rem; padding: 0 0.1em; }
  .model-card__label { letter-spacing: 0.16em; padding-left: 0.16em; }
  .model-card__region { letter-spacing: 0.1em; padding-left: 0.1em; }
}

/* Faces band on home: staggered editorial grid */
.faces-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 28px);
  align-items: start;
}
.faces-grid .model-card:nth-child(even) { margin-top: clamp(28px, 5vw, 80px); }

/* Founder band */
.founder {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 6vw, 100px);
  align-items: center;
}
.founder .editorial__media { max-width: 520px; }
.founder__quote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.7rem);
  font-weight: 320;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 24px;
}
.founder__quote em { font-style: italic; color: var(--gold-deep); }
.founder__by {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--taupe);
  margin-bottom: 28px;
}

/* "Sixty more" roster note */
.roster-more {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(36px, 5vw, 64px) 0;
}
.roster-more__num {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 8vw, 7.5rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.roster-more__num small {
  display: block;
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-top: 14px;
}

/* Inline list of states / specialties */
.states { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 0; padding: 0; list-style: none; }
.states li {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  color: var(--ink-soft);
}
.states li::after { content: "\00b7"; margin: 0 0.55em; color: var(--gold); }
.states li:last-child::after { content: none; }
.band--noir .states li { color: rgba(246, 243, 238, 0.8); }

/* Hero refinements */
.hero--cinema h1 { max-width: 10.5em; }
.hero__sub { font-size: 18px; }

@media (max-width: 1023px) {
  .roster, .roster--3, .faces-grid { grid-template-columns: repeat(2, 1fr); }
  .founder, .roster-more { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .faces-grid { gap: 12px; }
  .faces-grid .model-card:nth-child(even) { margin-top: 32px; }
  .model-card__mark { top: 12px; left: 12px; height: 13px; }
  .model-card__idx { top: 10px; right: 12px; font-size: 10px; }
  .roster, .roster--3 { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@supports not (width: 1cqi) {
  /* no container queries: a fixed name size that fits a 2-up phone card */
  @media (max-width: 560px) { .model-card__name { font-size: 1.5rem; } }
}

/* Full-photo button (main.js "Full photo"), under the number in the top-right
   corner of every card that has a full: photo. Mouse: invisible until the
   card is hovered (or the button has keyboard focus), then "DOUBLE-CLICK FOR
   FULL PHOTO" and a corner-bracket icon fade in. Touch: the icon on every
   card, and "DOUBLE-TAP" beside it on the first card only, so 39 cards don't
   repeat the same words. Narrow cards drop "for full photo". */
.model-card--full { touch-action: manipulation; } /* no double-tap zoom on iOS */
.model-card__zoom {
  position: absolute;
  top: 31px; right: 9px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 8px 9px;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--cream);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.model-card__zoom-icon {
  flex: none;
  width: 14px; height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  filter: drop-shadow(0 1px 3px rgba(15, 13, 11, 0.7));
}
.model-card__hint {
  display: none;
  font-family: var(--card-caps);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(15, 13, 11, 0.8), 0 0 2px rgba(15, 13, 11, 0.6);
}
.model-card__hint-touch { display: none; }
.model-card--full:first-of-type .model-card__hint { display: inline; } /* first card (a <noscript> precedes it) */
.model-card__zoom:focus-visible { outline-color: var(--gold-light); outline-offset: 0; }
@media (hover: none) {
  .model-card__hint-mouse { display: none; }
  .model-card__hint-touch { display: inline; }
}
@media (hover: hover) and (pointer: fine) {
  .model-card__zoom { opacity: 0; transition: opacity 0.35s ease, color 0.25s ease; }
  .model-card .model-card__hint {
    display: inline;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.35s ease, transform 0.6s var(--ease-out);
  }
  .model-card:hover .model-card__zoom,
  .model-card__zoom:focus-visible { opacity: 1; }
  .model-card:hover .model-card__hint,
  .model-card__zoom:focus-visible .model-card__hint { opacity: 1; transform: none; }
  .model-card__zoom:hover { color: var(--gold-light); }
  body.is-scrolling .model-card:hover .model-card__zoom:not(:focus-visible) { opacity: 0; }
}
@container (max-width: 300px) {
  .model-card__hint-more { display: none; }
  .model-card__hint { font-size: 8.5px; letter-spacing: 0.15em; }
}
@media (max-width: 560px) {
  .model-card__zoom { top: 22px; right: 4px; padding: 7px 8px; gap: 6px; }
  .model-card__zoom-icon { width: 13px; height: 13px; }
}

/* Full-photo viewer: a native modal <dialog> (top layer, page behind inert)
   on a near-black screen; the photo is contained in the viewport, her name
   in the card script above MANDI'S MODELS (and her region) under it. */
/* Scroll lock on body, not html: body's overflow then still passes to the
   viewport (html stays visible), so body never becomes its own scroll box.
   --lb-sbw is the width the page's scrollbar took (main.js measures it; 0
   with overlay scrollbars), given back as padding so nothing moves sideways.
   main.js also stops Lenis. */
html.lightbox-open body { overflow: hidden; padding-right: var(--lb-sbw, 0px); }
html.lightbox-open .header { right: var(--lb-sbw, 0px); }
.lightbox {
  --lb-pad: clamp(16px, 3vw, 40px);
  --lb-top: var(--lb-pad);
  --lb-cap: 68px;
  --lb-gap: 14px;
  position: fixed;
  inset: 0;
  z-index: 400;               /* only matters where there is no top layer */
  box-sizing: border-box;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  background: rgba(15, 13, 11, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);   /* the page behind reads as a dark haze, not detail */
  color: var(--cream);
  overflow: hidden;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lightbox:not([open]) { display: none; }   /* also where <dialog> is unknown */
.lightbox::backdrop { background: transparent; }
.lightbox.is-open { opacity: 1; }
.lightbox:focus { outline: none; }   /* focused itself only when opened by mouse/touch */
/* fullHasCaption: true -- her photo already carries her name: no second caption */
.lightbox--bare { --lb-cap: 0px; --lb-gap: 0px; }
.lightbox__caption[hidden] { display: none; }
.lightbox__figure {
  box-sizing: border-box;
  width: 100%; height: 100%;
  margin: 0;
  padding: var(--lb-top) var(--lb-pad) var(--lb-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--lb-gap);
  container-type: size;
}
.lightbox__stage { position: relative; flex: none; --ar: 0.6667; }
.lightbox__img {
  display: block;
  max-width: none;
  /* as large as fits: the full width, or the height left above the caption */
  width: min(calc(100vw - 2 * var(--lb-pad)),
             calc((100vh - var(--lb-top) - var(--lb-pad) - var(--lb-cap) - var(--lb-gap)) * var(--ar)));
  width: min(100cqw, calc((100cqh - var(--lb-cap) - var(--lb-gap)) * var(--ar)));
  height: auto;
  aspect-ratio: var(--ar);
  border-radius: 4px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.45s ease, transform 0.7s var(--ease-out);
}
.lightbox.is-open .lightbox__img.is-loaded { opacity: 1; transform: none; }
.lightbox__spinner {
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 1.5px solid rgba(246, 243, 238, 0.2);
  border-top-color: var(--gold-light);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
  animation: lightbox-spin 0.9s linear infinite;
  pointer-events: none;
}
.lightbox__stage.is-loading .lightbox__spinner { opacity: 1; transition-delay: 0.15s; }
@keyframes lightbox-spin { to { transform: rotate(360deg); } }
.lightbox__caption {
  flex: none;
  height: var(--lb-cap);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.lightbox__name {
  font-family: "Oooh Baby", "Allura", "Segoe Script", "Snell Roundhand", cursive;
  font-size: 2.25rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.lightbox__label {
  padding-left: 0.3em;
  font-family: "Libre Caslon Text", "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1.25;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(246, 243, 238, 0.82);
}
.lightbox__sep { letter-spacing: 0; margin: 0 0.6em 0 0.3em; }
.lightbox__region { color: var(--gold-light); }
.lightbox__close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 1;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  margin: 0; padding: 0;
  border: 1px solid rgba(246, 243, 238, 0.3);
  border-radius: 50%;
  background: rgba(15, 13, 11, 0.45);
  color: var(--cream);
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.lightbox__close svg {
  width: 14px; height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.lightbox__close:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.lightbox__close:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
@media (min-width: 900px) {
  .lightbox__close { top: 24px; right: 24px; }
}
@media (max-width: 700px) {
  .lightbox { --lb-top: 68px; }   /* the close button gets its own row */
  .lightbox__name { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__img { transition: none; }
  .lightbox__img { transform: none; }
  .lightbox__spinner { animation-duration: 2.4s; }
}


/* --------------------------------------------------------------------------
   8. TEAM-PHOTO HERO — people on the right, headline in the quiet left column.
      Phones stack: the whole group on top, copy on an ink block beneath.
   -------------------------------------------------------------------------- */
.hero--cinema h1 {
  max-width: 6.4em;
  font-size: clamp(2.8rem, 4.6vw, 5.2rem);
}
.hero--cinema .hero__sub { max-width: 34ch; }

@media (min-aspect-ratio: 1/1) {
  .hero__scrim {
    background:
      linear-gradient(to right, rgba(25, 22, 19, 0.58) 0%, rgba(25, 22, 19, 0.2) 36%, rgba(25, 22, 19, 0) 58%),
      linear-gradient(to top, rgba(25, 22, 19, 0.78) 0%, rgba(25, 22, 19, 0.34) 48%, rgba(25, 22, 19, 0.22) 100%);
  }
}

/* Narrower-than-3:2 screens (4:3 tablets, portrait tablets): bias the crop toward the group */
@media (max-aspect-ratio: 3/2) {
  .hero__bg img { object-position: 78% 20%; }
}

@media (max-width: 900px) {
  .hero--cinema { min-height: 100svh; padding-top: 0; }
  .hero--cinema .hero__sub { display: none; } /* the story section directly below says it */
}

/* Portrait screens: photo first, copy on ink underneath, CTA above the fold */
@media (max-aspect-ratio: 1/1) {
  .hero--cinema {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    padding: 0;
    background: var(--noir);
  }
  .hero--cinema .hero__bg {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    height: min(62svh, 133vw);
  }
  .hero--cinema .hero__content { padding-top: 34px; padding-bottom: 46px; }
  .hero--cinema h1 { max-width: 9em; }
  .hero--cinema .hero__sub,
  .hero--cinema .hero__scrollcue { display: none; }
  .hero__scrim {
    background:
      linear-gradient(to top, rgba(15, 13, 11, 1) 0%, rgba(15, 13, 11, 0) 28%),
      linear-gradient(to bottom, rgba(25, 22, 19, 0.5) 0%, rgba(25, 22, 19, 0) 24%);
  }
}
@media (max-width: 700px) and (max-aspect-ratio: 1/1) {
  .hero__bg img { object-position: 50% 12%; } /* portrait photograph: keep the faces */
}
/* Portrait tablets (701-1100px wide, e.g. 768x1024, 820x1180, 1024x1366) keep the 16:9 photo in a
   landscape-shaped box: anchor it right so the whole group fits (at 78% Tori's elbow was cut) */
@media (min-width: 701px) and (max-aspect-ratio: 1/1) {
  .hero__bg img { object-position: 100% 20%; }
}

/* 4:3-ish landscape (1024x768, iPad 1112x834 / 1180x820 / 1194x834): the 78% crop brings
   Nichole under the copy, so the paragraph goes and the two CTAs stack in the left column */
@media (max-aspect-ratio: 3/2) and (min-aspect-ratio: 1/1) {
  .hero--cinema .hero__sub { display: none; }
  .hero--cinema .hero__actions { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero--cinema h1 { max-width: 5.6em; }
}

/* Very wide 16:9 screens (>= 1940px): the centred 1440px column pushed the headline onto
   Nichole's hair; anchor the copy to the left edge instead */
@media (min-width: 1940px) and (min-aspect-ratio: 3/2) {
  .hero--cinema .hero__content { max-width: none; padding-left: calc(var(--margin-side) + 12.5vw); }
}

/* Nav never wraps; between the burger breakpoint and ~1180px it tightens instead */
.nav__link, .nav .btn { white-space: nowrap; }
@media (max-width: 1180px) {
  .nav { gap: 20px; }
  .nav__link { letter-spacing: 0.1em; font-size: 11.5px; }
  .header .wordmark span { display: none; }
}
/* Tablet-width landscape: the hero paragraph would cross the first model, so the headline stands alone */
@media (max-width: 1100px) {
  .hero--cinema .hero__sub { display: none; }
}


/* --------------------------------------------------------------------------
   9. EVENTS PHOTOGRAPHY (Oct 2026)
      Mandi's own event photos (assets/img/events/, curated in
      tools/events-2026-10/events.json). They are real event photos and are
      never cropped into people: every frame takes the photo's own shape from
      --ar (width / height, set inline), so object-fit: cover has nothing to
      trim. No data-parallax on these frames: the drift slides the image
      inside its frame and would open a gap at one edge.
   -------------------------------------------------------------------------- */
:root { --ev-gap: clamp(10px, 1.4vw, 18px); }
.ev-frame { aspect-ratio: var(--ar, 4 / 3); }

/* Featured team photo, directly under the home hero: the whole frame, as wide
   as the text column, but never taller than the view under the fixed header
   (128px = 84px header + breathing room), so the whole line-up fits in one
   look. Heading and photo share one width, so their edges line up.
   --ar (the photo's width / height) is set on the section. */
.ev-feature {
  padding-top: calc(var(--section-gap) * 0.62);
  --ev-feature-w: min(var(--max-width), calc((100vh - 128px) * var(--ar) + 2 * var(--margin-side)));
}
@supports (height: 100svh) {
  .ev-feature { --ev-feature-w: min(var(--max-width), calc((100svh - 128px) * var(--ar) + 2 * var(--margin-side))); }
}
.ev-feature__head { max-width: var(--ev-feature-w); }
.ev-feature__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px clamp(32px, 5vw, 80px);
  margin-bottom: clamp(28px, 3.6vw, 56px);
}
.ev-feature__head h2 { margin: 0; max-width: 11em; }
.ev-feature__aside { max-width: 36ch; padding-bottom: 6px; }
.ev-feature__aside p { margin: 0; font-size: 15.5px; color: var(--taupe); }
.ev-feature__figure {
  margin: 0 auto;
  max-width: var(--ev-feature-w);
  padding: 0 var(--margin-side);
}
.ev-feature__frame { border-radius: 4px; }
@media (max-width: 700px) {
  .ev-feature__figure { padding: 0; max-width: none; }   /* edge to edge: every model as large as a phone allows */
  .ev-feature__frame { border-radius: 0; }
  .ev-feature__aside p { font-size: 15px; }
}

/* Home "At the events" strip: each frame keeps the photo's own width at the strip height */
.gallery-strip .ev-frame {
  width: auto;
  aspect-ratio: var(--ar);
  /* a landscape never runs wider than the screen on a phone (the min() only bites below ~700px) */
  height: min(clamp(280px, 42vw, 440px), calc((100vw - 2 * var(--margin-side)) / var(--ar)));
}

/* Justified rows: widths in proportion to --ar, so every photo in a row
   shares one height and none is cropped. .ev-row--pairs lays its pairs out
   in one line on wide screens and stacks them two-up on phones. */
.ev-row { display: flex; align-items: flex-start; gap: var(--ev-gap); }
.ev-row > figure,
.ev-row__pair > figure { flex: var(--ar) 1 0%; min-width: 0; margin: 0; }
/* a pair's basis is its own inner gap, so both pairs come out exactly the same height */
.ev-row__pair { display: flex; align-items: flex-start; gap: var(--ev-gap); flex: var(--ar) 1 var(--ev-gap); min-width: 0; }
@media (max-width: 700px) {
  .ev-row--pairs { flex-direction: column; }
  .ev-row--pairs > .ev-row__pair { flex: none; width: 100%; }
}

/* Services: a lead photo with a justified pair beneath. The --flip blocks
   now actually alternate (the old order: 2 left the photo on the right). */
.ev-service { width: 100%; max-width: 460px; }
.service-block:not(.service-block--flip) .ev-service { margin-left: auto; }
.ev-service .ev-row { margin-top: var(--ev-gap); }
@media (min-width: 901px) {
  .service-block--flip { grid-template-columns: 5fr 6fr; }
  .service-block--flip .service-block__media { order: -1; }
}
@media (max-width: 900px) {
  .service-block:not(.service-block--flip) .ev-service { margin-left: 0; }
}

/* Masonry gallery (about / clients / join): CSS columns, photos at their own shape */
.ev-masonry { column-count: 3; column-gap: var(--ev-gap); }
.ev-masonry--4 { column-count: 4; }
.ev-masonry > figure {
  margin: 0 0 var(--ev-gap);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
.ev-masonry--captioned > figure { margin-bottom: clamp(22px, 2.6vw, 36px); }
.ev-cap { display: flex; flex-direction: column; gap: 3px; padding-top: 12px; }
.ev-cap__org {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 360;
  line-height: 1.2;
  color: var(--ink);
}
.ev-cap__note { font-size: 13px; line-height: 1.45; color: var(--taupe); }
.ev-intro { max-width: 40ch; margin: 0; font-size: 15.5px; color: var(--taupe); }
@media (max-width: 1023px) { .ev-masonry--4 { column-count: 3; } }
@media (max-width: 700px) {
  .ev-masonry, .ev-masonry--4 { column-count: 2; }
  .ev-cap__org { font-size: 1rem; }
  .ev-cap__note { font-size: 12.5px; }
}