/* LAUDERDALE STUDIO — "Sample Quiet" palette on paper. v4: all-light editorial. */
:root {
  --chalk: #F0EFEB;
  --ink: #201F1C;
  --leather: #5C3A18;
  --khaki: #B2A486;
  --warmgray: #D5CFC2;
  --font-body: 'Roboto', sans-serif;
  --font-cond: 'Roboto Condensed', sans-serif;
  --font-display: 'Laredo', serif;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1200px;
}

@font-face {
  font-family: 'Laredo';
  src: url('assets/fonts/Laredo-Regular.woff2') format('woff2'),
       url('assets/fonts/Laredo-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--leather); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 400;
  background: var(--chalk); color: var(--ink); padding: .6rem 1rem;
}
.skip-link:focus { left: 0; }

/* ---------- page transitions ---------- */
main, .footer {
  transition: opacity .38s ease, transform .38s ease;
}
body.page-exit main, body.page-exit .footer {
  opacity: 0;
  transform: translateY(14px);
}
body.page-arrive main, body.page-arrive .footer {
  opacity: 0;
  transform: translateY(18px);
}

/* ---------- type helpers ---------- */
.eyebrow {
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .8rem;
  color: var(--leather);
}
.eyebrow-khaki { color: var(--khaki); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  position: relative;
  overflow: hidden;
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .85rem;
  text-decoration: none;
  padding: .95rem 1.9rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
  z-index: 0;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateX(-101%);
  transition: transform .35s cubic-bezier(.6, 0, .2, 1);
  z-index: -1;
}
.btn:hover::before { transform: translateX(0); }
.btn-solid { background: var(--leather); color: var(--chalk); }
.btn-solid:hover { color: var(--chalk); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { color: var(--chalk); }
.btn-chalk { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-chalk::before { background: var(--ink); }
.btn-chalk:hover { color: var(--chalk); }
.btn-small { padding: .6rem 1.2rem; font-size: .78rem; }
.btn:focus-visible, a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 2px solid var(--leather);
  outline-offset: 3px;
}

/* ---------- nav — split links, wordmark centered (her structure) ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto repeat(3, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1.3rem var(--pad) 1.2rem;
  background: color-mix(in srgb, var(--chalk) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--warmgray) 55%, transparent);
  transition: border-color .3s ease;
}
.nav.is-scrolled { border-bottom-color: var(--warmgray); }
.nav-wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.1vw, 1.45rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  justify-self: center;
  margin: 0 clamp(1.2rem, 3.5vw, 3.5rem);
  display: flex;
  align-items: center;
  gap: .9em;
}
.nav-wordmark::before, .nav-wordmark::after {
  content: "\00B7";
  color: var(--khaki);
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: 0;
  transform: translateY(-.05em);
}
.page-enter .nav-wordmark { animation: fadeup .9s ease both .2s; }
.nav-side { display: contents; }
.nav-left a:nth-child(1) { justify-self: start; }
.nav-left a:nth-child(2) { justify-self: center; }
.nav-left a:nth-child(3) { justify-self: end; }
.nav-right a:nth-child(1) { justify-self: start; }
.nav-right a:nth-child(2) { justify-self: center; }
.nav-right a:nth-child(3) { justify-self: end; }
.nav-side a {
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: clamp(.78rem, 1.1vw, .9rem);
  color: var(--ink);
  text-decoration: none;
  padding: .3rem 0;
  position: relative;
}
.nav-side a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--leather);
  transition: right .3s ease;
}
.nav-side a:hover { color: var(--leather); }
.nav-side a:hover::after { right: 0; }
.nav-side a.is-active { color: var(--leather); }
.nav-side a.is-active::after { right: 0; background: var(--khaki); }

/* burger (mobile) */
.nav-burger {
  display: none;
  background: none;
  border: none;
  width: 40px; height: 40px;
  cursor: pointer;
  position: relative;
  z-index: 310;
}
.nav-burger span {
  position: absolute;
  left: 8px; right: 8px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .35s ease, top .35s ease;
}
.nav-burger span:nth-child(1) { top: 15px; }
.nav-burger span:nth-child(2) { top: 24px; }
body.menu-open .nav-burger span:nth-child(1) { top: 19.5px; transform: rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { top: 19.5px; transform: rotate(-45deg); }

/* full-screen menu — paper, ink type */
.menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--chalk);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .55s cubic-bezier(.7, 0, .25, 1);
  visibility: hidden;
}
body.menu-open .menu { clip-path: inset(0 0 0% 0); visibility: visible; }
.menu a {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 8vw, 3rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: .55rem 0;
  border-bottom: 1px solid var(--warmgray);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .5s ease;
}
.menu a.is-active { color: var(--leather); }
body.menu-open .menu a { opacity: 1; transform: none; }
body.menu-open .menu a:nth-child(1) { transition-delay: .18s; }
body.menu-open .menu a:nth-child(2) { transition-delay: .26s; }
body.menu-open .menu a:nth-child(3) { transition-delay: .34s; }
body.menu-open .menu a:nth-child(4) { transition-delay: .42s; }
body.menu-open .menu a:nth-child(5) { transition-delay: .5s; }
body.menu-open .menu a:nth-child(6) { transition-delay: .58s; }
body.menu-open .menu a:nth-child(7) { transition-delay: .66s; }
.menu-foot {
  margin-top: 2.5rem;
  color: var(--leather);
  font-family: var(--font-cond);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: .7rem;
  opacity: 0;
  transition: opacity .5s ease .55s;
}
body.menu-open .menu-foot { opacity: 1; }
body.menu-open { overflow: hidden; }

/* ---------- intro: the logo draws itself on paper, then the site appears ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 350;
  background: var(--chalk);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: opacity .8s ease, transform .8s cubic-bezier(.6, 0, .3, 1);
}
.intro-lockup {
  width: min(52vh, 74vw, 430px);
  height: auto;
  overflow: visible;
}
.intro.lift {
  opacity: 0;
  transform: scale(1.045);
  pointer-events: none;
}
body.intro-lock { overflow: hidden; }
body.intro-lock main, body.intro-lock .footer { opacity: 0; }
body.intro-done main, body.intro-done .footer {
  animation: siteappear .9s cubic-bezier(.3, 0, .2, 1) both;
}
@keyframes siteappear {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* ---------- salon — the centered framed slideshow (homepage) ---------- */
.salon {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7.5rem var(--pad) 5rem;
}
.salon-tagline {
  text-align: center;
  margin-top: clamp(2rem, 4.5vh, 3.2rem);
  padding: 0 var(--pad);
}
.page-enter .salon-tagline { animation: fadeup 1s ease both .5s; }
.salon-tagline-main {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.1vw, 1.35rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.salon-tagline-sub {
  margin-top: .55rem;
  font-size: .92rem;
  color: color-mix(in srgb, var(--ink) 72%, var(--khaki));
}
.salon-start { margin-top: 1.5rem; }
.salon-frame {
  width: min(660px, 88vw, 56vh);
  border: 1px solid var(--warmgray);
  background: color-mix(in srgb, var(--chalk) 55%, #FDFDFB);
  padding: .85rem;
  box-shadow: 0 30px 60px -48px rgba(32, 31, 28, .55);
  position: relative;
}
.page-enter .salon-frame { animation: fadeup 1.1s cubic-bezier(.3, 0, .2, 1) both .15s; }
.salon-stack {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.salon-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.salon-stack img.is-on { opacity: 1; }
.salon-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--ink);
  padding: .8rem .9rem;
  opacity: 0;
  transition: opacity .3s ease, color .2s ease;
  z-index: 2;
}
.salon-frame:hover .salon-arrow, .salon-arrow:focus-visible { opacity: .85; }
.salon-arrow:hover { color: var(--leather); }
.salon-prev { left: -3.4rem; }
.salon-next { right: -3.4rem; }
.salon-caption { text-align: center; margin-top: 1.5rem; }
.page-enter .salon-caption { animation: fadeup 1.1s ease both .4s; }
.salon-cap-inner { transition: opacity .5s ease; }
.salon-cap-inner.is-fading { opacity: 0; }
.salon-title {
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .8rem;
  color: var(--ink);
}
.salon-sub {
  font-size: .9rem;
  margin-top: .35rem;
  color: var(--ink);
}
.salon-count {
  font-family: var(--font-cond);
  font-weight: 700;
  letter-spacing: .3em;
  font-size: .62rem;
  color: var(--khaki);
  margin-top: .9rem;
}

/* ---------- landing hero (kept for subpage use) ---------- */
.land-hero {
  padding: clamp(8rem, 17vh, 12rem) var(--pad) clamp(2.8rem, 6vw, 4.5rem);
  text-align: center;
}
.land-hero .eyebrow { display: block; margin-bottom: 1.2rem; }
.land-h1 {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(1.9rem, 5.4vw, 3.6rem);
  letter-spacing: .11em;
  text-transform: uppercase;
  line-height: 1.2;
}
.page-enter .land-h1 { animation: titlesettle 1.1s cubic-bezier(.3, 0, .2, 1) both .1s; }
.land-sub {
  max-width: 35rem;
  margin: 1.3rem auto 0;
}
.land-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ---------- subpage headers ---------- */
.page-head {
  padding: clamp(8rem, 16vh, 11rem) var(--pad) clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}
.page-head .eyebrow { display: block; margin-bottom: 1.1rem; }
.page-title {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(2rem, 6.5vw, 4rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.15;
}
.page-enter .page-title { animation: titlesettle 1.1s cubic-bezier(.3, 0, .2, 1) both .15s; }
@keyframes titlesettle {
  from { opacity: 0; letter-spacing: .3em; }
  to { opacity: 1; letter-spacing: .12em; }
}
.page-head-rule {
  width: min(320px, 56%);
  height: 1px;
  background: var(--khaki);
  margin: 1.8rem auto 0;
  transform: scaleX(0);
}
.page-enter .page-head-rule { animation: ruledraw .9s cubic-bezier(.4, 0, .2, 1) both .5s; }
@keyframes ruledraw { to { transform: scaleX(1); } }
.page-head-sub { max-width: 36rem; margin: 1.6rem auto 0; }
.page-enter .page-head-sub, .page-enter .page-head .eyebrow, .page-enter .land-hero .eyebrow,
.page-enter .land-sub, .page-enter .land-ctas {
  animation: fadeup .9s ease both .55s;
}
@keyframes fadeup {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ---------- marquee (light) ---------- */
.marquee {
  overflow: hidden;
  padding: clamp(2.2rem, 5vw, 3.6rem) 0;
  border-top: 1px solid var(--warmgray);
  border-bottom: 1px solid var(--warmgray);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.8rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: 1.2em;
  color: var(--ink);
}
.marquee-track .dot { color: var(--khaki); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section, .section-dark {
  padding: clamp(4.5rem, 10vw, 7.5rem) var(--pad);
}
.section > *, .section-dark > * {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}
.section-tint { background: transparent; }
.section-dark { background: transparent; color: var(--ink); }
.section-dark a { color: var(--leather); }
.section .eyebrow, .section-dark .eyebrow { margin-bottom: 2.6rem; }
.section-hairline { border-top: 1px solid var(--warmgray); }

/* ---------- editorial services ---------- */
.services { display: flex; flex-direction: column; gap: clamp(3.5rem, 8vw, 6rem); }
.service {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(1.6rem, 5vw, 4.5rem);
  align-items: center;
}
.service-flip .service-media { order: 1; }
.service-flip .service-text { order: 2; }
.service-media { position: relative; }
.service-media > img { width: 100%; display: block; }
.service-text { position: relative; }
.service-num {
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 6.5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--khaki);
  display: block;
  margin-bottom: .9rem;
}
.service-title {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.service-body { max-width: 30rem; }
.service-list { list-style: none; margin-top: 1.5rem; max-width: 26rem; }
.service-list li {
  padding: .5rem 0;
  border-bottom: 1px solid var(--warmgray);
  font-size: .95rem;
  display: flex;
  align-items: baseline;
  gap: .7rem;
}
.service-list li::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--leather);
  flex: none;
  transform: translateY(-4px);
}
.service-list li:last-child { border-bottom: none; }
.service .plan-sheet { margin-top: 0; }

/* offer strip */
.offer-strip {
  margin-top: clamp(4rem, 9vw, 6.5rem);
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.offer { padding: 1.6rem 1.4rem 0 0; border-right: 1px solid var(--warmgray); }
.offer:last-child { border-right: none; }
.offer-num {
  font-family: var(--font-display);
  color: var(--khaki);
  font-size: 1.1rem;
  display: block;
  margin-bottom: .5rem;
}
.offer h3 {
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
  color: var(--leather);
  margin-bottom: .4rem;
}
.offer p { font-size: .9rem; }

/* trust line */
.trust-line {
  font-style: italic;
  color: var(--leather);
  text-align: center;
  margin-top: 2.6rem;
}

/* take on */
.takeon { margin-top: 4.5rem; }
.takeon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  border-top: 1px solid var(--warmgray);
  padding-top: 2rem;
}
.takeon-col h3 {
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .82rem;
  color: var(--khaki);
  margin-bottom: 1rem;
}
.takeon-col ul { list-style: none; }
.takeon-col li {
  padding: .45rem 0;
  border-bottom: 1px solid var(--warmgray);
  font-size: .98rem;
}
.takeon-col li:last-child { border-bottom: none; }
.takeon-note { margin-top: 2.2rem; font-style: italic; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.step-num {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 7vw, 5rem);
  color: transparent;
  -webkit-text-stroke: 1px var(--khaki);
  line-height: 1;
  display: block;
  margin-bottom: 1rem;
}
.step-title {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: 1.1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .7rem;
}

/* ---------- editorial features ---------- */
.features { display: flex; flex-direction: column; gap: clamp(4rem, 9vw, 7rem); }
.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.6rem, 5vw, 4.5rem);
  align-items: start;
  position: relative;
}
.feature-media { overflow: hidden; position: relative; }
.feature-media img { width: 100%; display: block; transition: transform 1.2s cubic-bezier(.2, 0, .2, 1); }
.feature:hover .feature-media > img { transform: scale(1.035); }
.feature-detail {
  position: absolute;
  width: 42%;
  bottom: -12%;
  left: -8%;
  border: .5rem solid var(--chalk);
  box-shadow: 0 22px 44px -30px rgba(32, 31, 28, .5);
}
.feature-detail img { width: 100%; display: block; }
.feature-text { padding-top: clamp(1rem, 6vw, 4.5rem); position: relative; z-index: 1; }
.feature-flip .feature-media { order: 2; }
.feature-flip .feature-text { order: 1; text-align: right; }
.feature-flip .feature-detail { left: auto; right: -8%; }
.feature-num {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 11vw, 8rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--khaki);
  display: block;
  margin-bottom: 1rem;
}
.feature-title {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: .9rem;
}
.feature-caption { max-width: 26rem; font-size: .98rem; }
.feature-flip .feature-caption { margin-left: auto; }
.feature-link {
  display: inline-block;
  margin-top: 1.4rem;
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .74rem;
  color: var(--leather);
  text-decoration: none;
  border-bottom: 1px solid var(--khaki);
  padding-bottom: .25rem;
  transition: border-color .3s ease, color .3s ease;
}
.feature-link:hover { color: var(--ink); border-color: var(--ink); }
.feature-link .arrow { display: inline-block; transition: transform .3s ease; }
.feature-link:hover .arrow { transform: translateX(5px); }
a.feature-wrap { text-decoration: none; color: inherit; display: block; }
.section-cta-row { text-align: center; margin-top: 3rem; }

/* ---------- full-bleed editorial moment ---------- */
.bleed { position: relative; height: min(78vh, 720px); overflow: hidden; }
.bleed img { width: 100%; height: 100%; object-fit: cover; }
.bleed-caption {
  position: absolute;
  left: clamp(1.2rem, 5vw, 4rem);
  bottom: clamp(1.2rem, 5vw, 3rem);
  background: var(--chalk);
  padding: 1.4rem 1.7rem;
  max-width: 24rem;
  box-shadow: 0 24px 48px -30px rgba(32, 31, 28, .55);
}
.bleed-caption .eyebrow { display: block; margin-bottom: .5rem; }
.bleed-caption p { font-size: .95rem; }
.bleed-hero { height: min(72vh, 680px); }

/* ---------- stats (light) ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5.5rem);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--leather);
  line-height: 1;
  display: block;
}
.stat-label {
  display: block;
  margin-top: .9rem;
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .76rem;
  color: var(--ink);
}
.stat-note {
  text-align: center;
  color: var(--ink);
  margin-top: 2.6rem;
  font-size: .95rem;
  max-width: 46rem !important;
}

/* ---------- reviews page ---------- */
.expect-list { max-width: 860px; }
.expect {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.6rem;
  align-items: baseline;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--warmgray);
}
.expect:first-child { border-top: 1px solid var(--warmgray); }
.expect-num { font-family: var(--font-display); font-size: 1.5rem; color: var(--khaki); }
.expect h3 {
  font-family: var(--font-display);
  font-weight: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 1.05rem;
  margin-bottom: .4rem;
}
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.quote-card {
  border: 1px solid var(--warmgray);
  padding: 1.8rem 1.7rem 1.6rem;
  background: color-mix(in srgb, var(--chalk) 55%, transparent);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .4s ease, box-shadow .4s ease;
}
.quote-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px -22px rgba(32, 31, 28, .45);
}
.g-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.g-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--khaki);
  color: var(--chalk);
  font-family: var(--font-display);
  font-size: 1.15rem;
  display: grid;
  place-items: center;
  flex: none;
}
.g-name {
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
}
.g-meta { font-size: .8rem; color: var(--leather); }
.g-stars { color: var(--leather); letter-spacing: .18em; font-size: .85rem; margin-bottom: .9rem; }
.quote-card blockquote { font-style: italic; flex: 1; font-size: .98rem; }
.g-source {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.4rem;
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .62rem;
  color: var(--khaki);
}
.g-badge {
  width: 18px; height: 18px;
  border: 1px solid var(--khaki);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: .7rem;
  color: var(--leather);
}
.placeholder-tag {
  position: absolute;
  top: .7rem; right: .7rem;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .52rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--khaki);
  border: 1px solid var(--warmgray);
  padding: .15rem .4rem;
}

/* ---------- word of mouth — sliding mail wall (reviews) ---------- */
.wall {
  padding: clamp(4.5rem, 10vw, 7.5rem) 0;
  border-top: 1px solid var(--warmgray);
  overflow: hidden;
}
.wall-head { text-align: center; padding: 0 var(--pad); margin-bottom: clamp(2rem, 5vw, 3.4rem); }
.wall-head .eyebrow { display: block; margin-bottom: 1rem; }
.wall-title {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(1.7rem, 4.5vw, 2.8rem);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.wall-sub { max-width: 34rem; margin: 1rem auto 0; }
.wall-row { overflow: hidden; }
.wall-row + .wall-row { margin-top: .4rem; }
.wall-track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  padding: 1.4rem 0;
  animation: wallslide linear infinite; /* duration set in main.js from track length */
}
.wall-row:hover .wall-track { animation-play-state: paused; }
.wall-row-reverse .wall-track { animation-direction: reverse; }
@keyframes wallslide { to { transform: translateX(-50%); } }
/* very soft stagger + tilt, like notes laid on a desk */
.wall-track .mail-card:nth-child(4n+1) { transform: translateY(-4px) rotate(-.5deg); }
.wall-track .mail-card:nth-child(4n+2) { transform: translateY(5px) rotate(.4deg); }
.wall-track .mail-card:nth-child(4n+3) { transform: translateY(-2px) rotate(.55deg); }
.wall-track .mail-card:nth-child(4n+4) { transform: translateY(4px) rotate(-.35deg); }
.wall-row-reverse .wall-track .mail-card:nth-child(4n+1) { transform: translateY(4px) rotate(.45deg); }
.wall-row-reverse .wall-track .mail-card:nth-child(4n+2) { transform: translateY(-3px) rotate(-.5deg); }
.wall-row-reverse .wall-track .mail-card:nth-child(4n+3) { transform: translateY(5px) rotate(-.3deg); }
.wall-row-reverse .wall-track .mail-card:nth-child(4n+4) { transform: translateY(-4px) rotate(.5deg); }
.mail-card {
  width: min(430px, 84vw);
  flex: none;
  margin-right: 1.5rem;
  border: 1px solid var(--warmgray);
  background: color-mix(in srgb, var(--chalk) 45%, #FBFAF7);
  box-shadow: 0 18px 38px -30px rgba(32, 31, 28, .4);
  padding: 1.2rem 1.3rem 1.3rem;
}
.mail-head {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
}
.mail-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--khaki);
  color: var(--chalk);
  font-family: var(--font-display);
  font-size: 1rem;
  display: grid;
  place-items: center;
  flex: none;
}
.mail-id { min-width: 0; }
.mail-name {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
}
.mail-addr {
  font-family: var(--font-body);
  font-weight: 300;
  color: color-mix(in srgb, var(--ink) 55%, var(--khaki));
  font-size: .76rem;
  letter-spacing: 0;
}
.mail-to {
  font-size: .72rem;
  color: color-mix(in srgb, var(--ink) 50%, var(--khaki));
}
.mail-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .55rem;
  flex: none;
}
.mail-time {
  font-size: .7rem;
  color: color-mix(in srgb, var(--ink) 55%, var(--khaki));
  white-space: nowrap;
}
.mail-star { color: var(--leather); font-size: .85rem; line-height: 1; }
.mail-body {
  margin-top: .9rem;
  font-size: .93rem;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .wall-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 1.5rem; padding: 0 var(--pad); }
  .wall-track > .mail-card:nth-child(n+5) { display: none; }
}

/* ---------- work / projects ---------- */
.project {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  border-top: 1px solid var(--warmgray);
}
.project:first-of-type { border-top: none; padding-top: 0; }
.project-flip .project-media { order: 2; }
.project-flip .project-info { order: 1; }
.project-media { position: relative; }
.project-media .project-lead { overflow: hidden; }
.project-media .project-lead img { width: 100%; transition: transform 1.2s cubic-bezier(.2, 0, .2, 1); }
.project-media .project-lead:hover img { transform: scale(1.035); }
.project-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin-top: .9rem; }
.project-thumbs img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.project-thumbs.overlap { width: 58%; margin-top: -12%; margin-left: 4%; position: relative; z-index: 2; }
.project-thumbs.overlap img { border: .45rem solid var(--chalk); box-shadow: 0 20px 40px -30px rgba(32,31,28,.5); }
.project-thumbs.overlap img:only-child { grid-column: span 2; aspect-ratio: 3/2; }
.project-flip .project-thumbs.overlap { margin-left: 38%; }
.project-info { position: relative; }
.ghost-num {
  position: absolute;
  top: -1.2rem;
  right: 0;
  font-family: var(--font-display);
  font-size: clamp(6rem, 14vw, 11rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--warmgray);
  pointer-events: none;
  z-index: 0;
}
.project-flip .ghost-num { right: auto; left: 0; }
.project-info > *:not(.ghost-num) { position: relative; z-index: 1; }
.tag {
  display: inline-block;
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .66rem;
  color: var(--leather);
  border: 1px solid var(--khaki);
  padding: .3rem .7rem;
  margin: 1.1rem 0 1rem;
}
.project-title {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.35;
  margin-bottom: .8rem;
}
.project-caption { font-size: .98rem; }

/* plan sheets — title-block frame */
.plan-sheet {
  border: 1px solid var(--ink);
  padding: .55rem;
  background: var(--chalk);
  margin-top: 1.6rem;
}
.plan-sheet img { width: 100%; border: 1px solid var(--warmgray); }
.plan-sheet figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .66rem;
  border-top: 1px solid var(--ink);
  margin-top: .55rem;
  padding-top: .5rem;
}
.plan-id { color: var(--leather); white-space: nowrap; }
.drawings { margin-top: 4.5rem; }
.drawings-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: start; }
.drawings-row .plan-sheet { margin-top: 0; }

/* ---------- story / about (light) ---------- */
.story-studio { max-width: 780px; text-align: center; }
.dark-h2 {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 1.2rem 0 1.4rem;
}
.dark-body { color: var(--ink); }
.about {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: clamp(3.5rem, 8vw, 6rem);
}
.about-photo {
  border: 1px solid var(--warmgray);
  background: var(--chalk);
  padding: .6rem;
}
.about-photo img { width: 100%; filter: saturate(.88); }
.about-name {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.about-title { margin: .7rem 0 1.6rem; color: var(--leather); }
.about-text { color: var(--ink); }
.about-text p + p { margin-top: 1rem; }
.about-est {
  color: var(--leather);
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  margin-top: 1.8rem !important;
}

/* ---------- faq ---------- */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--warmgray); }
.faq details:first-child { border-top: 1px solid var(--warmgray); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.3rem .2rem;
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .92rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--leather);
  line-height: 1;
  transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 .2rem 1.4rem; max-width: 44rem; }

/* ---------- form ---------- */
.form-h2 {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: -1.4rem;
}
.form-sub { margin: .8rem auto 2.8rem; }
.start-form { max-width: 780px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field { margin-bottom: 1.2rem; }
.field label {
  display: block;
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .74rem;
  margin-bottom: .45rem;
}
.field label span { color: var(--leather); }
.field input, .field select, .field textarea {
  width: 100%;
  background: color-mix(in srgb, var(--chalk) 60%, transparent);
  border: 1px solid var(--warmgray);
  padding: .85rem .9rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  border-radius: 0;
  transition: border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--leather);
}
.field input[type="file"] { border-style: dashed; font-size: .9rem; }
.btn-submit { margin-top: .6rem; border: none; }
.hp-field { position: absolute; left: -9999px; }
.form-alt { margin-top: 2.4rem; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.email-link { font-weight: 400; }

/* contact details row */
.contact-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  border-top: 1px solid var(--warmgray);
  margin-top: clamp(3rem, 7vw, 5rem) !important;
  padding-top: 2rem;
}
.contact-cell h3 {
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  color: var(--khaki);
  margin-bottom: .6rem;
}
.contact-cell p { font-size: .95rem; }

/* ---------- optional-step chip ---------- */
.step-optional {
  display: inline-block;
  vertical-align: middle;
  margin-left: .6rem;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--leather);
  border: 1px solid var(--khaki);
  padding: .18rem .5rem;
}

/* ---------- image placeholders + guide notes ---------- */
.img-slot {
  border: 1px dashed var(--khaki);
  background: color-mix(in srgb, var(--chalk) 50%, #FBFAF7);
  padding: clamp(2.4rem, 6vw, 4rem) 1.6rem;
  text-align: center;
}
.img-slot span {
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .66rem;
  color: var(--khaki);
  display: block;
  margin-bottom: .7rem;
}
.img-slot p {
  font-size: .88rem;
  font-style: italic;
  color: color-mix(in srgb, var(--ink) 65%, var(--khaki));
  max-width: 26rem;
  margin: 0 auto;
}
.guide-note {
  max-width: 44rem !important;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0 !important;
  text-align: center;
  font-size: .92rem;
  font-style: italic;
  color: color-mix(in srgb, var(--ink) 72%, var(--khaki));
}
.sources {
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .62rem;
  color: var(--khaki);
  text-align: center;
  max-width: 52rem !important;
}

/* ---------- CTA band (light) ---------- */
.cta-band {
  text-align: center;
  padding: clamp(4rem, 9vw, 6.5rem) var(--pad);
  border-top: 1px solid var(--warmgray);
}
.cta-band h2 {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.cta-band p { color: var(--ink); max-width: 32rem; margin: 0 auto 2rem; }

/* ---------- footer — centered brown monogram over a quiet link row ---------- */
.footer {
  color: var(--ink);
  padding: clamp(5rem, 12vh, 8rem) var(--pad) clamp(2rem, 5vh, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(2.2rem, 5vh, 3.4rem);
}
.footer-lockup {
  width: clamp(76px, 9vw, 108px);
  height: auto;
  display: block;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.4rem, 4.5vw, 3.6rem);
  row-gap: 1.1rem;
}
.footer-links a {
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: .7rem;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding-bottom: .25rem;
}
.footer-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--leather);
  transition: right .3s ease;
}
.footer-links a:hover { color: var(--leather); }
.footer-links a:hover::after { right: 0; }
.footer-social {
  display: flex;
  gap: 1.7rem;
  align-items: center;
}
.footer-social a {
  color: color-mix(in srgb, var(--warmgray) 45%, var(--leather));
  display: block;
  width: 21px;
  height: 21px;
  transition: color .3s ease, transform .3s ease;
}
.footer-social svg { width: 100%; height: 100%; display: block; }
.footer-social a:nth-child(odd) { transform: rotate(-2.5deg); }
.footer-social a:nth-child(even) { transform: rotate(2deg); }
.footer-social a:hover { color: var(--leather); transform: rotate(0deg) translateY(-2px); }
.footer-copy {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, var(--khaki));
}
.footer-copy a { color: inherit; text-decoration-color: var(--khaki); }

/* ---------- reveals ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s ease var(--d, 0s), transform .8s ease var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }
.stagger > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1) { transition-delay: 0s; }
.stagger.in > *:nth-child(2) { transition-delay: .1s; }
.stagger.in > *:nth-child(3) { transition-delay: .2s; }
.stagger.in > *:nth-child(4) { transition-delay: .3s; }
.stagger.in > *:nth-child(5) { transition-delay: .4s; }
.stagger.in > *:nth-child(6) { transition-delay: .5s; }

/* ---------- responsive ---------- */
.sm-only { display: none; }

@media (max-width: 980px) {
  .cards, .steps, .drawings-row, .takeon-grid, .quotes { grid-template-columns: 1fr 1fr; row-gap: 2.2rem; }
  .project, .about, .feature, .service { grid-template-columns: 1fr; }
  .service-flip .service-media { order: 2; }
  .service-flip .service-text { order: 1; }
  .offer-strip { grid-template-columns: 1fr 1fr; row-gap: 1.6rem; }
  .offer:nth-child(2) { border-right: none; }
  .feature-flip .feature-media { order: 1; }
  .feature-flip .feature-text { order: 2; text-align: left; }
  .feature-flip .feature-caption { margin-left: 0; }
  .feature-text { padding-top: 2.2rem; }
  .feature-detail { bottom: -10%; left: 6%; width: 46%; }
  .feature-flip .feature-detail { right: 6%; }
  .features { gap: 5.5rem; }
  .ghost-num { font-size: clamp(5rem, 18vw, 8rem); }
  .contact-row { grid-template-columns: 1fr; }
}

@media (max-width: 740px) {
  .nav { grid-template-columns: 40px 1fr 40px; padding: .8rem 1.1rem; }
  .nav-side { display: none; }
  .nav-burger { display: block; grid-column: 3; }
  .nav-wordmark { grid-column: 2; letter-spacing: .22em; }
  .salon { padding-top: 6.5rem; }
  .salon-prev { left: .2rem; }
  .salon-next { right: .2rem; }
  .salon-arrow { opacity: .7; color: var(--chalk); text-shadow: 0 1px 6px rgba(32,31,28,.6); }
}

@media (max-width: 640px) {
  .steps, .drawings-row, .takeon-grid, .form-row, .project-thumbs, .quotes, .offer-strip { grid-template-columns: 1fr; }
  .offer { border-right: none; padding-right: 0; }
  .stats { grid-template-columns: 1fr; gap: 3rem; }
  .sm-only { display: inline; }
}

/* ---------- gallery legibility hardening (2026-08-08) ----------
   Keeps the ghost-numeral editorial look but guarantees titles/captions
   never sit illegibly inside the numeral, at any width. */
.project-info { padding-top: clamp(2rem, 4vw, 3.4rem); }
.ghost-num { top: -.4rem; font-size: clamp(5.5rem, 11vw, 9rem); }
.project-title { max-width: 24ch; }
@media (max-width: 980px) {
  .ghost-num { top: 0; font-size: clamp(4.2rem, 9vw, 6rem); }
  .project-info { padding-top: 2.2rem; }
  .project-thumbs.overlap { margin-top: -8%; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .stagger > * { opacity: 1; transform: none; transition: none; }
  .intro { display: none; }
  body.intro-lock { overflow: auto; }
  body.intro-lock main, body.intro-lock .footer { opacity: 1; }
  body.intro-done main, body.intro-done .footer { animation: none; }
  .page-enter .page-title, .page-enter .page-head-rule, .page-enter .page-head-sub,
  .page-enter .page-head .eyebrow, .page-enter .nav-wordmark, .page-enter .land-h1,
  .page-enter .land-hero .eyebrow, .page-enter .land-sub, .page-enter .land-ctas,
  .page-enter .salon-frame, .page-enter .salon-caption { animation: none; }
  .salon-stack img { transition: none; }
  .page-head-rule { transform: scaleX(1); }
  main, .footer { transition: none; }
  body.page-exit main, body.page-exit .footer { opacity: 1; transform: none; }
  .marquee-track { animation: none; width: auto; justify-content: center; flex-wrap: wrap; }
  .marquee-track span:nth-child(n+3) { display: none; }
  .feature-media img, .project-media .project-lead img { transition: none; }
}

/* ---------- drafting-table video + footer services (2026-08-08) ---------- */
.drawings-video { max-width: 720px; margin: 0 auto 1.6rem; }
.drawings-video video { width: 100%; display: block; border: 1px solid var(--warmgray); }
/* services row = quiet secondary tier under the main footer nav */
.footer-services { margin-top: 1.5rem; gap: 1.15rem; row-gap: .7rem; }
.footer-services a {
  font-size: .6rem;
  letter-spacing: .18em;
  color: var(--khaki);
}
.footer-services a:hover { color: var(--leather); }
.footer-services a::after { display: none; }
.footer-copy a { color: inherit; }

/* ---------- vertical rhythm normalization (2026-08-08, per Carson: same spacing everywhere) ---------- */
.offer { padding: 2rem 1.7rem 0 1.7rem; }
.offer:first-child { padding-left: 0; }
.offer:last-child { padding-right: 0; }
.offer .offer-num { display: block; margin-bottom: .9rem; }
.offer h3 { margin: 0 0 .75rem; }
.offer p { margin: 0; line-height: 1.7; }
@media (max-width: 980px) {
  /* 2-col rows: [1|2] and [3|4] — left col flush, right col padded off the divider */
  .offer { padding: 1.8rem 1.4rem 0 1.4rem; }
  .offer:nth-child(odd) { padding-left: 0; }
  .offer:nth-child(even) { padding-right: 0; }
}
@media (max-width: 640px) {
  .offer { padding-left: 0; padding-right: 0; }
}
.takeon-col h3 { margin: 0 0 .7rem; }
.takeon-col ul li { padding: .28rem 0; }
.faq-q { margin: 1.6rem 0 .6rem; }
.faq-q:first-of-type { margin-top: 0; }
.service-text .service-body + .service-list { margin-top: 1rem; }
.img-slot p { margin-top: .6rem; line-height: 1.5; }
.plan-sheet figcaption { line-height: 1.4; }

/* since 1982 line (2026-08-08, Carson: every footer) */
.footer-since {
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: .62rem;
  color: var(--khaki);
  margin: -1.2rem 0 2.2rem;
  text-align: center;
}

/* ---------- project pages (the Instagram touch, 9/20/26) ---------- */
.proj-head h1 { letter-spacing: .14em; }
.proj-hero { margin: 0 auto; max-width: 1400px; padding: 0 var(--pad); }
.proj-hero img { width: 100%; display: block; }
.proj-intent { max-width: 44rem; margin: 0 auto; text-align: center; }
.proj-intent .eyebrow { display: block; margin-bottom: 1.4rem; color: var(--leather); }
.proj-para { font-family: var(--font-body); font-weight: 300; font-size: 1.05rem; line-height: 1.7; color: var(--ink); }
.proj-boards { text-align: center; }
.proj-boards .eyebrow { display: block; margin-bottom: 2rem; color: var(--leather); }
.proj-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; max-width: 1200px; margin: 0 auto; }
.proj-cards-one { max-width: 620px; }
.proj-card { margin: 0; background: var(--chalk); border: 1px solid var(--warmgray); box-shadow: 0 28px 50px -38px rgba(32,31,28,.55); }
.proj-card img { width: 100%; display: block; }
.proj-chapter { display: grid; grid-template-columns: 1.35fr 1fr; align-items: center; gap: clamp(1.5rem, 5vw, 5rem); max-width: 1400px; margin: 6rem auto; padding: 0 var(--pad); }
.proj-flip .proj-chapter-img { order: 2; }
.proj-chapter-img { margin: 0; overflow: hidden; }
.proj-chapter-img img { width: 100%; display: block; aspect-ratio: 4/5; object-fit: cover; }
.proj-chapter-text .eyebrow { display: block; color: var(--leather); margin-bottom: 1.2rem; }
.proj-chapter-text h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: .12em; line-height: 1.25; text-transform: uppercase; margin: 0 0 1.2rem; }
.proj-chapter-text p { font-family: var(--font-body); font-weight: 300; font-size: 1.05rem; line-height: 1.7; max-width: 30rem; }
.proj-wide { margin: 0 auto 6rem; max-width: 1400px; padding: 0 var(--pad); }
.proj-wide img { width: 100%; display: block; }
@media (max-width: 780px) { .proj-chapter { grid-template-columns: 1fr; margin: 3.5rem auto; } .proj-flip .proj-chapter-img { order: 0; } }

.proj-strip { text-align: center; }
.proj-strip .eyebrow { display: block; margin-bottom: 2rem; color: var(--leather); }
.proj-strip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; max-width: 1200px; margin: 0 auto; }
.proj-tile { display: block; text-decoration: none; color: var(--ink); text-align: left; }
.proj-tile img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,0,.2,1); }
.proj-tile:hover img { transform: scale(1.03); }
.proj-tile-name { display: block; margin-top: .8rem; font-family: var(--font-cond); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.proj-tile-city { display: block; font-family: var(--font-body); font-weight: 300; font-size: .85rem; color: var(--khaki); margin-top: .2rem; }

.story-photo { margin: 0; }
.story-photo img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; border: .45rem solid var(--chalk); box-shadow: 0 20px 40px -30px rgba(32,31,28,.5); }

.proj-plan { padding: 1.2rem; }
.proj-plan figcaption { display: flex; justify-content: space-between; margin-top: 1rem; font-family: var(--font-cond); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.proj-plan figcaption span { color: var(--khaki); }

/* ---------- hamburger nav + globe (9/20/26) ---------- */
    
    
    
    .menu { align-items: flex-start; padding-left: clamp(2rem, 8vw, 7rem); }
    .menu .menu-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, max-content)); gap: 3rem 5rem; margin-top: 1rem; }
    .menu .menu-cols h4 { font-family: var(--font-cond); font-size: .68rem; letter-spacing: .22em; color: var(--khaki); margin: 0 0 .9rem; text-transform: uppercase; }
    .menu .menu-cols a { display: block; font-size: clamp(1.1rem, 2vw, 1.6rem); margin: .35rem 0; }
    .menu .menu-cols .small a { font-family: var(--font-body); font-weight: 300; font-size: 1rem; letter-spacing: 0; text-transform: none; }
    /* the map */
    .atlas { max-width: 1100px; margin: 2rem auto 6rem; padding: 0 var(--pad); text-align: center; }
    .atlas .eyebrow { display: block; color: var(--leather); margin-bottom: 1rem; }
    .atlas h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: .14em; font-size: clamp(1.4rem, 2.6vw, 2rem); text-transform: uppercase; margin: 0 0 .6rem; }
    .atlas p.lede { font-family: var(--font-body); font-weight: 300; max-width: 34rem; margin: 0 auto 2.5rem; }
    .atlas svg { width: 100%; height: auto; overflow: visible; }
    .tx { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; stroke-dasharray: 4000; stroke-dashoffset: 4000; animation: draw 2.6s cubic-bezier(.4,0,.2,1) forwards .3s; }
    @keyframes draw { to { stroke-dashoffset: 0; } }
    .dot { transition: r .25s, fill .25s; }
    .dot-faint { fill: var(--khaki); opacity: .55; }
    .dot-live { fill: var(--leather); cursor: pointer; }
    .dot-link:hover .dot-live, .dot-link:focus .dot-live { r: 8; }
    .dot-label { font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .16em; fill: var(--ink); opacity: 0; transition: opacity .25s; pointer-events: none; }
    .dot-link:hover .dot-label, .dot-link:focus .dot-label { opacity: 1; }
    .atlas-key { font-family: var(--font-cond); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--khaki); margin-top: 1.6rem; }
    .atlas-key i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 .4rem 0 1.2rem; vertical-align: middle; }
    .inset { font-family: var(--font-cond); font-size: .62rem; letter-spacing: .16em; fill: var(--khaki); }
    @media (prefers-reduced-motion: reduce) { .tx { animation: none; stroke-dashoffset: 0; } }
      .globe-wrap { max-width: 960px; margin: 3rem auto 7rem; padding: 0 var(--pad); text-align: center; }
    .globe-wrap .eyebrow { display: block; color: var(--leather); margin-bottom: 1rem; }
    .globe-wrap h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: .14em; font-size: clamp(1.4rem, 2.6vw, 2rem); text-transform: uppercase; margin: 0 0 .6rem; }
    .globe-wrap p.lede { font-family: var(--font-body); font-weight: 300; max-width: 34rem; margin: 0 auto 2rem; }
    .globe-stage { position: relative; max-width: 720px; margin: 0 auto; }
    .globe-stage canvas { width: 100%; height: auto; display: block; cursor: grab; }
    .globe-tip { position: absolute; pointer-events: none; font-family: var(--font-cond); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); background: var(--chalk); border: 1px solid var(--warmgray); padding: .45rem .7rem; white-space: nowrap; }

.globe-stage { overflow: hidden; }
.globe-back { position: absolute; left: 0; top: 0; background: none; border: 1px solid var(--warmgray); color: var(--ink); font-family: var(--font-cond); font-size: 1rem; width: 2.4rem; height: 2.4rem; cursor: pointer; }
.globe-back:hover { border-color: var(--ink); }

/* ---------- mark nav (9/20/26): no bar, small LS mark top-left, morphs to a hamburger on hover, small stacked menu ---------- */
.nav.nav-mark { position: fixed; top: 0; left: 0; right: auto; width: auto; display: inline-block; padding: 1.1rem var(--pad); background: transparent; backdrop-filter: none; border: 0; z-index: 325; pointer-events: none; }
.nav.nav-mark .mark-btn { pointer-events: auto; }
.menu.menu-stack { z-index: 330; }
.mark-btn { position: relative; width: 44px; height: 44px; background: none; border: 0; padding: 0; cursor: pointer; display: block; }
.mark-img { position: absolute; left: 50%; top: 50%; height: 34px; width: auto; transform: translate(-50%, -50%); transition: opacity .3s ease, transform .3s ease; filter: none; }
.mark-lines { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; }
.mark-lines span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: transform .35s ease, top .35s ease; }
.mark-lines span:nth-child(1) { top: 17px; } .mark-lines span:nth-child(2) { top: 26px; }
.mark-btn:hover .mark-img, .mark-btn:focus-visible .mark-img, body.menu-open .mark-img { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
.mark-btn:hover .mark-lines, .mark-btn:focus-visible .mark-lines, body.menu-open .mark-lines { opacity: 1; }
body.menu-open .mark-lines span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
body.menu-open .mark-lines span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }
.menu.menu-stack { inset: auto; position: fixed; top: 3.7rem; left: calc(var(--pad) + 2px); width: max-content; padding: .2rem 0 0; background: transparent; border: 0; box-shadow: none; display: block; justify-content: flex-start; clip-path: inset(0 0 100% 0); transition: clip-path .35s cubic-bezier(.7,0,.25,1), visibility 0s .35s; }
body.menu-open .menu.menu-stack { clip-path: inset(0 0 0 0); transition: clip-path .35s cubic-bezier(.7,0,.25,1); }
.menu.menu-stack a { display: block; font-family: var(--font-cond); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 72%, transparent); text-decoration: none; padding: .22rem 0; border: 0; opacity: 1; transform: none; transition: color .2s; }
.menu.menu-stack a:hover, .menu.menu-stack a.is-active { color: var(--ink); }
.menu.menu-stack a.sub { font-family: var(--font-cond); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; padding: .18rem 0; color: color-mix(in srgb, var(--ink) 48%, transparent); }
.menu.menu-stack .menu-sub { display: block; margin: .8rem 0 .25rem; font-family: var(--font-cond); font-size: .52rem; letter-spacing: .24em; text-transform: uppercase; color: var(--khaki); }
.menu.menu-stack .menu-foot { display: none; }
body.menu-open .menu.menu-stack a { transition-delay: 0s; }
main { padding-top: 0; }

.guide-cover { margin: 0 auto 3rem; max-width: 1200px; padding: 0 var(--pad); }
.guide-cover img { width: 100%; display: block; aspect-ratio: 21/9; object-fit: cover; }
.guide-cover figcaption { margin-top: .7rem; font-family: var(--font-cond); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--khaki); }
.footer-credit { font-family: var(--font-body); font-weight: 300; font-size: .68rem; color: var(--khaki); max-width: 60rem; margin: 1.2rem auto .4rem; }

/* intro travels to the mark (9/21/26) */
.intro.lift-travel { background: transparent; pointer-events: none; transition: none; }
.intro.lift-travel::before { content: ""; position: absolute; inset: 0; background: var(--chalk); opacity: 1; animation: introground 1.1s ease forwards; z-index: -1; }
@keyframes introground { to { opacity: 0; } }
body.intro-lock .mark-img, body.intro-done:not(.mark-landed) .mark-img { opacity: 0; }
body.mark-landed .mark-img { transition: opacity .25s ease; }

.globe-quote { margin: 3.2rem auto 0; max-width: 34rem; text-align: center; }
.globe-quote p { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, 1.9vw, 1.45rem); letter-spacing: .1em; line-height: 1.6; text-transform: uppercase; color: var(--ink); margin: 0 0 1rem; }
.globe-quote cite { display: block; font-style: normal; font-family: var(--font-cond); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--leather); }

/* ============ smooth scroll (Lenis) + text rise (9/25/2026) ============ */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.rise { opacity: 0; transform: translateY(22px); transition: opacity 1.1s cubic-bezier(.2, .65, .2, 1), transform 1.1s cubic-bezier(.2, .65, .2, 1); will-change: opacity, transform; }
.rise.in { opacity: 1; transform: none; }
.reveal { transform: translateY(10px); }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } }

/* ============ project page v2: facts row + outline + essay (9/25/2026) ============ */
.proj-meta { display: grid; grid-template-columns: 1fr 1fr minmax(220px, 300px) 1fr 1fr; gap: 1.2rem 2rem; align-items: center; max-width: 1200px; margin: 3.2rem auto 0; padding: 2rem var(--pad) 0; border-top: 1px solid var(--warmgray); }
.proj-fact { font-family: var(--font-body); font-weight: 300; font-size: .78rem; line-height: 1.55; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.proj-fact b { display: block; font-family: var(--font-label); font-weight: 700; font-size: .62rem; letter-spacing: .22em; color: var(--khaki); margin-bottom: .45rem; }
.proj-outline { grid-column: 3; text-align: center; }
.proj-outline svg { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; }
.proj-outline svg path { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.proj-outline svg circle { fill: var(--leather); }
.proj-outline svg circle.halo { fill: none; stroke: var(--leather); stroke-width: 1; opacity: .55; }
.proj-essay { max-width: 44rem; margin: 0 auto; }
.proj-essay .eyebrow { display: block; margin-bottom: 1rem; color: var(--leather); }
.proj-essay p { font-family: var(--font-body); font-weight: 300; font-size: 1.02rem; line-height: 1.75; color: var(--ink); }
.proj-essay + .proj-essay { margin-top: 2.6rem; }
.proj-status-study .proj-fact.is-status { color: var(--leather); }
@media (max-width: 860px) { .proj-meta { grid-template-columns: 1fr 1fr; } .proj-outline { grid-column: 1 / -1; order: -1; } }

/* ============ portfolio filters (9/25/2026) ============ */
.pf-filters { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; justify-content: center; margin: 0 auto 2.4rem; padding: 0 var(--pad); }
.pf-filters button { background: none; border: 0; padding: .4rem 0; font-family: var(--font-label); font-weight: 700; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--khaki); cursor: pointer; border-bottom: 1px solid transparent; }
.pf-filters button.is-on { color: var(--ink); border-bottom-color: var(--leather); }
.pf-filters .pf-sep { width: 1px; background: var(--warmgray); align-self: stretch; }
.project.is-hidden, .proj-tile.is-hidden { display: none; }
.proj-tile-status { display: block; font-family: var(--font-label); font-weight: 700; font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--khaki); margin-top: .25rem; }

/* ============ portfolio v3: immersive grid, hover names, ring cursor, fly-out (9/25/2026) ============ */
.pf-grid-wrap { padding: 0 var(--pad) 4rem; }
.pf-grid { display: grid; gap: 1.2rem; max-width: 1500px; margin: 0 auto; grid-auto-flow: dense; }
.pf-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.pf-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.pf-tile { position: relative; display: block; text-decoration: none; color: var(--chalk); overflow: hidden; background: var(--warmgray); }
.pf-tile figure { margin: 0; height: 100%; }
.pf-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s cubic-bezier(.2, 0, .2, 1), filter .9s ease; }
.pf-grid.cols-4 .pf-tile.is-tall { aspect-ratio: 3 / 4; }
.pf-grid.cols-4 .pf-tile.is-wide { aspect-ratio: 3 / 4; }
.pf-grid.cols-2 .pf-tile.is-tall { aspect-ratio: 4 / 5; }
.pf-grid.cols-2 .pf-tile.is-wide { aspect-ratio: 3 / 2; grid-column: span 2; }
.pf-tile:hover img { transform: scale(1.04); filter: brightness(.78); }
.pf-cap { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.3rem; opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; pointer-events: none; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.pf-cap b { display: block; font-family: var(--font-cond); font-weight: 700; font-size: .8rem; letter-spacing: .2em; }
.pf-cap i { display: block; font-style: normal; font-family: var(--font-body); font-weight: 300; font-size: .74rem; letter-spacing: .06em; margin-top: .3rem; opacity: .85; }
.pf-tile:hover .pf-cap { opacity: 1; transform: none; }
.pf-fly { position: fixed; z-index: 400; object-fit: cover; transition: left .8s cubic-bezier(.65, 0, .2, 1), top .8s cubic-bezier(.65, 0, .2, 1), width .8s cubic-bezier(.65, 0, .2, 1), height .8s cubic-bezier(.65, 0, .2, 1); }
body.pf-leaving .pf-filters, body.pf-leaving .page-head { opacity: 0; transition: opacity .9s ease; }
.pf-tile.is-hidden { display: none; }
@media (max-width: 900px) { .pf-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } .pf-cols { display: none; } .pf-cap { opacity: 1; transform: none; } .pf-tile img { filter: none !important; } }
@media (max-width: 520px) { .pf-grid.cols-4, .pf-grid.cols-2 { grid-template-columns: 1fr; } .pf-grid.cols-2 .pf-tile.is-wide { grid-column: auto; } }
.proj-hero img { max-height: 82vh; object-fit: cover; }
.proj-wide img { max-height: 90vh; object-fit: cover; width: 100%; }

/* ============ project page: previous / next (9/25/2026) ============ */
.proj-next { max-width: 1400px; margin: 4rem auto 0; padding: 0 var(--pad); }
.proj-next-main { position: relative; display: block; overflow: hidden; color: var(--chalk); text-decoration: none; background: var(--warmgray); }
.proj-next-main img { width: 100%; height: 52vh; min-height: 320px; object-fit: cover; display: block; transition: transform 1.6s cubic-bezier(.2, 0, .2, 1), filter 1s ease; filter: brightness(.82); }
.proj-next-main:hover img { transform: scale(1.03); filter: brightness(.7); }
.proj-next-cap { position: absolute; left: 2rem; bottom: 1.8rem; text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.proj-next-cap small { display: block; font-family: var(--font-label); font-weight: 700; font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; opacity: .85; margin-bottom: .5rem; }
.proj-next-cap b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 3.2vw, 2.4rem); letter-spacing: .12em; }
.proj-next-cap i { display: block; font-style: normal; font-family: var(--font-body); font-weight: 300; font-size: .8rem; letter-spacing: .06em; margin-top: .4rem; opacity: .9; }
.proj-next-links { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; font-family: var(--font-cond); font-weight: 700; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; }
.proj-next-links a { color: var(--khaki); text-decoration: none; }
.proj-next-links a:hover { color: var(--ink); }

/* ============ UX pass (9/25/2026): page transitions ============ */
body.page-leave main, body.page-leave .footer { opacity: 0; transform: translateY(-10px); transition: opacity .42s cubic-bezier(.22, 1, .36, 1), transform .42s cubic-bezier(.22, 1, .36, 1); }
main { animation: pagein .9s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes pagein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.proj-hero { overflow: hidden; }
.proj-hero img { animation: heroin 1.3s cubic-bezier(.16, 1, .3, 1) both .1s; }
@keyframes heroin { from { opacity: 0; transform: translateY(40px) scale(1.04); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { main, .proj-hero img { animation: none; } body.page-leave main { opacity: 1; transform: none; } }

/* ============ UX pass: portfolio dispersal on click ============ */
.pf-tile { transition: transform .9s cubic-bezier(.22, 1, .36, 1), opacity .7s ease; }
.pf-tile.is-away { opacity: 0; pointer-events: none; }
.pf-tile.is-picked img { filter: brightness(.62); }
.pf-tile.is-picked .pf-cap { opacity: 1; transform: none; }
.pf-fly { position: fixed; z-index: 400; object-fit: cover; opacity: 0; transition: left .78s cubic-bezier(.65, 0, .2, 1), top .78s cubic-bezier(.65, 0, .2, 1), width .78s cubic-bezier(.65, 0, .2, 1), height .78s cubic-bezier(.65, 0, .2, 1), opacity .2s ease; }
.pf-fly.is-go { opacity: 1; }

/* ============ UX pass: the portfolio bar stays on every project page ============ */
.proj-bar { position: sticky; top: 0; z-index: 310; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; justify-content: center; align-items: center; padding: .9rem var(--pad) .7rem 4.8rem; background: rgba(240,239,235,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(178,164,134,.35); }
.proj-bar a { font-family: var(--font-label); font-weight: 700; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--khaki); text-decoration: none; padding: .3rem 0; border-bottom: 1px solid transparent; }
.proj-bar a:hover, .proj-bar a.is-on { color: var(--ink); border-bottom-color: var(--leather); }
.proj-bar .proj-bar-sep { width: 1px; height: .9rem; background: rgba(178,164,134,.5); }
.proj-bar .proj-bar-nav { margin-left: auto; display: flex; gap: 1.2rem; }
@media (max-width: 720px) { .proj-bar { padding-left: var(--pad); justify-content: flex-start; } .proj-bar .proj-bar-nav { margin-left: 0; } }

/* ============ UX pass: services as a type grid (theirs: image card, name centred, learn more) ============ */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; max-width: 1500px; margin: 0 auto; padding: 0 var(--pad) 3rem; }
.svc-card { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; color: var(--chalk); text-decoration: none; background: var(--warmgray); }
.svc-card img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.72); transition: transform 1.6s cubic-bezier(.22, 1, .36, 1), filter .8s ease; }
.svc-card:hover img { transform: scale(1.05); filter: brightness(.6); }
.svc-card .svc-name { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; text-align: center; text-shadow: 0 1px 16px rgba(0,0,0,.45); }
.svc-card .svc-name b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 2.6vw, 2.1rem); letter-spacing: .14em; }
.svc-card .svc-name span { font-family: var(--font-label); font-weight: 700; font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; border: 1px solid rgba(240,239,235,.75); padding: .45rem .9rem; border-radius: 2rem; transition: background .4s ease, color .4s ease; }
.svc-card:hover .svc-name span { background: var(--chalk); color: var(--ink); }
.svc-card .svc-line { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.2rem; font-family: var(--font-body); font-weight: 300; font-size: .8rem; letter-spacing: .04em; opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; text-align: center; }
.svc-card:hover .svc-line { opacity: .95; transform: none; }
@media (max-width: 720px) { .svc-grid { grid-template-columns: 1fr; } .svc-card .svc-line { opacity: .95; transform: none; } }

/* ============ hover = edge blur, clear centre, name at the foot (theirs, ours) + the bar clears the mark (9/25 late) ============ */
.pf-tile figure { position: relative; }
.pf-tile figure::after { content: ""; position: absolute; inset: 0; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); background: rgba(32,31,28,.18); opacity: 0; transition: opacity .55s ease; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 58% 52% at 50% 46%, transparent 42%, #000 92%); mask-image: radial-gradient(ellipse 58% 52% at 50% 46%, transparent 42%, #000 92%); }
.pf-tile:hover figure::after, .pf-tile.is-picked figure::after { opacity: 1; }
.pf-tile:hover img { transform: scale(1.03); filter: brightness(.88); }
.pf-cap { z-index: 2; }
.proj-bar { margin-left: 5.4rem; padding-left: 1rem; padding-right: var(--pad); background: rgba(240,239,235,.72); border-bottom: 0; }
.proj-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(178,164,134,.35); }
.proj-bar { position: sticky; }
@media (max-width: 720px) { .proj-bar { margin-left: 0; padding-left: var(--pad); padding-top: 3.2rem; } }

/* ============ the lift + glide (transform only) ============ */
.pf-fly { position: fixed; z-index: 400; overflow: hidden; transform-origin: 0 0; will-change: transform; transition: transform .95s cubic-bezier(.22, 1, .36, 1); opacity: 1; }
.pf-fly img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 50%; will-change: transform; transition: transform .95s cubic-bezier(.22, 1, .36, 1); filter: none !important; }
.pf-tile { will-change: transform, opacity; transition: transform .8s cubic-bezier(.22, 1, .36, 1), opacity .55s ease; }
.pf-tile.is-away { opacity: 0; pointer-events: none; }
body.pf-leaving .pf-tile figure::after { opacity: 0 !important; }
body.pf-leaving .pf-tile img { transition: none; }
body.pf-leaving .pf-tile.is-picked .pf-cap { opacity: 1; transform: none; transition: opacity .3s ease; }

/* ============ button hover: a leather line that draws in, not a box (Carson 9/25) ============ */
.btn::before { display: none; }
.btn { position: relative; overflow: visible; transition: color .4s ease, border-color .4s ease, background .4s ease; }
.btn::after { content: ""; position: absolute; left: 1.2rem; right: 1.2rem; bottom: .55rem; height: 1px; background: var(--leather); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
.btn:hover { color: var(--leather); border-color: var(--leather); }
.btn:hover::after { transform: scaleX(1); }
.btn-solid { background: var(--leather); color: var(--chalk); border-color: var(--leather); }
.btn-solid:hover { background: #4a2e13; color: var(--chalk); border-color: #4a2e13; }
.btn-solid::after { background: rgba(240,239,235,.7); }
.btn-ghost:hover, .btn-chalk:hover { color: var(--leather); background: transparent; }
.pf-fly img { transform: none !important; }

/* ============ portfolio bar v3: one quiet row beside the mark, right-aligned (Carson 9/25 screenshot) ============ */
.proj-bar { position: sticky; top: 0; z-index: 310; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .4rem 1.5rem; margin: 0; padding: 1.5rem var(--pad) .9rem 6rem; background: linear-gradient(rgba(240,239,235,.97), rgba(240,239,235,.88)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 0; }
.proj-bar::after { display: none; }
.proj-bar a { font-size: .58rem; letter-spacing: .2em; padding: .25rem 0; }
.proj-bar .proj-bar-nav { margin-left: .6rem; padding-left: 1.5rem; border-left: 1px solid rgba(178,164,134,.5); gap: 1.1rem; }
.proj .page-head { padding-top: 2.2rem; }
@media (max-width: 900px) { .proj-bar { justify-content: flex-start; padding: 3.4rem var(--pad) .8rem; } .proj-bar .proj-bar-nav { margin-left: 0; padding-left: 0; border: 0; } }

/* ============ portfolio bar v4 = the portfolio's own filter row, centred, sticky (Carson: "this looks clean") ============ */
.proj-bar { position: sticky; top: 0; z-index: 310; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem 1.6rem; margin: 0; padding: 4.6rem var(--pad) 1rem; background: linear-gradient(var(--chalk) 70%, rgba(240,239,235,.9)); backdrop-filter: none; border: 0; }
.proj-bar a { font-family: var(--font-label); font-weight: 700; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--khaki); padding: .4rem 0; border-bottom: 1px solid transparent; }
.proj-bar a:hover, .proj-bar a.is-on { color: var(--ink); border-bottom-color: var(--leather); }
.proj-bar .pf-sep { width: 1px; background: var(--warmgray); align-self: stretch; }
.proj-bar .proj-bar-nav { margin: 0; padding: 0; border: 0; display: flex; gap: 1.6rem; }
.proj .page-head { padding-top: 2.4rem; }
@media (max-width: 900px) { .proj-bar { padding: 3.6rem var(--pad) .8rem; gap: .3rem 1.1rem; } .proj-bar .pf-sep { display: none; } }

/* ============ the outline draws itself every time a project opens (Carson 9/25) ============ */
.proj-outline svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.proj-meta.in .proj-outline svg path { animation: outlinedraw 2.4s cubic-bezier(.22, 1, .36, 1) forwards .15s; }
@keyframes outlinedraw { to { stroke-dashoffset: 0; } }
.proj-outline svg circle { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); }
.proj-meta.in .proj-outline svg circle { animation: dotland .7s cubic-bezier(.22, 1, .36, 1) forwards 2.1s; }
.proj-meta.in .proj-outline svg circle.halo { animation: dotland .9s cubic-bezier(.22, 1, .36, 1) forwards 2.3s; }
@keyframes dotland { to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .proj-outline svg path { stroke-dashoffset: 0; animation: none; } .proj-outline svg circle { opacity: 1; transform: none; animation: none; } }

/* ============ lightbox (theirs: image full-screen on black, CLOSE top right) ============ */
.lightbox { position: fixed; inset: 0; z-index: 500; background: rgba(20,19,17,.96); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .45s ease; cursor: zoom-out; }
.lightbox.on { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 92vw; max-height: 90vh; object-fit: contain; transform: scale(.96); transition: transform .6s cubic-bezier(.22, 1, .36, 1); box-shadow: 0 40px 90px -40px rgba(0,0,0,.8); }
.lightbox.on img { transform: none; }
.lightbox-close { position: absolute; top: 1.4rem; right: 1.6rem; background: none; border: 0; color: var(--chalk); font-family: var(--font-label); font-weight: 700; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; gap: .7rem; }
.lightbox-close span { display: inline-flex; width: 2rem; height: 2rem; border: 1px solid rgba(240,239,235,.5); border-radius: 50%; align-items: center; justify-content: center; font-size: 1rem; }
body.lightbox-open { overflow: hidden; }

/* ============ continuous portfolio ============ */
main.proj-appended { animation: none; border-top: 1px solid rgba(178,164,134,.35); margin-top: 1rem; }
main.proj-appended .page-head { padding-top: 4rem; }
.proj-next-main.is-loading img { filter: brightness(.5); }
.proj-next-main.is-loading .proj-next-cap small::after { content: " loading"; opacity: .7; }

/* ============ IMMERSIVE canvas (theirs): endless, draggable, edges soft ============ */
.pf-imm { color: var(--leather) !important; }
.imm { position: fixed; inset: 0; z-index: 450; background: var(--chalk); opacity: 0; transition: opacity .5s ease; overflow: hidden; cursor: grab; touch-action: none; user-select: none; }
.imm.on { opacity: 1; }
.imm.is-drag { cursor: grabbing; }
.imm-world { position: absolute; left: 0; top: 0; will-change: transform; }
.imm-tile { position: absolute; display: block; overflow: hidden; background: var(--warmgray); }
.imm-tile img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.imm-edge { position: absolute; inset: 0; pointer-events: none; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  -webkit-mask-image: radial-gradient(ellipse 70% 68% at 50% 50%, transparent 55%, #000 100%); mask-image: radial-gradient(ellipse 70% 68% at 50% 50%, transparent 55%, #000 100%); }
.imm-back { position: absolute; top: 1.3rem; left: 1.4rem; z-index: 2; background: rgba(240,239,235,.9); border: 1px solid rgba(178,164,134,.5); border-radius: 2rem; padding: .55rem 1rem .55rem .7rem; font-family: var(--font-label); font-weight: 700; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: .6rem; }
.imm-back span { display: inline-flex; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--leather); color: var(--chalk); align-items: center; justify-content: center; font-size: .9rem; }
.imm-cap { position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: rgba(32,31,28,.85); color: var(--chalk); padding: .5rem .8rem; }
.imm-cap.on { opacity: 1; }
.imm-cap b { display: block; font-family: var(--font-cond); font-weight: 700; font-size: .66rem; letter-spacing: .2em; }
.imm-cap i { display: block; font-style: normal; font-family: var(--font-body); font-weight: 300; font-size: .7rem; letter-spacing: .05em; margin-top: .15rem; opacity: .85; }
body.imm-open { overflow: hidden; }

/* ============ portfolio click v4: zoom out, up and away; the project slides in from the right ============ */
.pf-grid { transition: transform .8s cubic-bezier(.22, 1, .36, 1), opacity .7s ease; transform-origin: 50% 40%; }
.pf-grid.pf-zoomout { transform: scale(.92) translateY(-70px); opacity: 0; }
body.pf-leaving .pf-tile { transition: none; transform: none !important; opacity: 1 !important; }
body.pf-leaving .pf-tile figure::after { opacity: 0 !important; }
.pf-slide { position: fixed; inset: 0; z-index: 400; background: var(--chalk); transform: translate3d(100%, 0, 0); transition: transform .85s cubic-bezier(.76, 0, .24, 1); will-change: transform; }
.pf-slide.in { transform: translate3d(0, 0, 0); }
.pf-slide img { position: absolute; left: 50%; top: 50%; width: min(92vw, 1400px); height: min(70vh, 900px); transform: translate(-50%, -50%); object-fit: cover; }
.pf-slide-cap { position: absolute; left: 50%; top: calc(50% + min(35vh, 450px) + 1.4rem); transform: translateX(-50%); text-align: center; }
.pf-slide-cap b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; letter-spacing: .14em; color: var(--ink); }
.pf-slide-cap i { display: block; font-style: normal; font-family: var(--font-label); font-weight: 700; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--khaki); margin-top: .5rem; }
main.proj { animation: projin .9s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes projin { from { opacity: 0; transform: translate3d(48px, 0, 0); } to { opacity: 1; transform: none; } }
main.proj .proj-hero img { animation: heroslide 1.1s cubic-bezier(.22, 1, .36, 1) both .05s; }
@keyframes heroslide { from { opacity: 0; transform: translate3d(60px, 0, 0) scale(1.02); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { main.proj, main.proj .proj-hero img { animation: none; } }

.imm-col { position: absolute; top: 0; will-change: transform; }
.imm-tile { left: 0; }

/* ============ portfolio click v5: slow, on the compositor, no reload ============ */
.pf-grid { will-change: transform, opacity; transition: transform 1.3s cubic-bezier(.22, 1, .36, 1), opacity 1.1s cubic-bezier(.22, 1, .36, 1); }
.pf-grid.pf-zoomout { transform: scale(.9) translate3d(0, -90px, 0); opacity: 0; }
body.pf-leaving .pf-tile img { filter: none !important; transform: none !important; transition: none; }
body.pf-leaving .pf-tile figure::after { display: none; }
body.pf-leaving .pf-filters, body.pf-leaving .page-head { transition: opacity .9s ease; }
.pf-slide { transition: transform 1.05s cubic-bezier(.76, 0, .24, 1), opacity .7s ease; }
.pf-slide.out { opacity: 0; pointer-events: none; }

/* ============ portfolio click v6 = their numbers: cards scale to .75 (0.8 s), page fades (1 s), grid flies up and off (1.6 s) ============ */
.pf-grid { transition: transform 1.6s cubic-bezier(.22, 1, .36, 1), opacity 1s cubic-bezier(.22, 1, .36, 1); transform-origin: 50% 30%; }
.pf-grid.pf-zoomout { transform: scale(.75) translate3d(0, -140vh, 0); opacity: 0; }
.pf-slide { transition: transform 1.1s cubic-bezier(.22, 1, .36, 1), opacity .7s ease; }

/* ============ the one rule that wins during the click: eased scale, fade and fly (v6 final) ============ */
body.pf-leaving .pf-grid.pf-zoomout { opacity: 0; transform: scale(.75) translate3d(0, -140vh, 0); transition: transform 1.6s cubic-bezier(.22, 1, .36, 1), opacity 1s cubic-bezier(.22, 1, .36, 1); }

/* ============ parallax frames ============ */
.proj-hero, .proj-wide, .proj-chapter-img, .proj-next-main { overflow: hidden; }
.proj-hero img, .proj-wide img, .proj-chapter-img img { will-change: transform; transform: scale(1.12); }
.proj-next-main img { will-change: transform; }

/* ============ THE APPROACH (services): image left, stages right, timer, crossfade ============ */
.svc-stages { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 3rem; max-width: 1500px; margin: 5rem auto 1rem; padding: 0 var(--pad); align-items: start; }
.svc-stages-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--warmgray); }
.svc-stage-media { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s cubic-bezier(.22, 1, .36, 1); }
.svc-stage-media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 7s linear; }
.svc-stage-media.is-on { opacity: 1; }
.svc-stage-media.is-on img { transform: scale(1); }
.svc-stage-media.is-map { background: var(--chalk); display: flex; align-items: center; }
.svc-map { width: 100%; height: auto; }
.svc-map .land path { fill: rgba(178,164,134,.28); }
.svc-map .land-hi path { fill: rgba(178,164,134,.55); }
.svc-map .dots circle { fill: var(--leather); }
.svc-map .dots text { font-family: var(--font-label); font-weight: 700; font-size: 9px; letter-spacing: .12em; fill: var(--ink); }
.svc-stages-list { position: sticky; top: 6rem; }
.svc-stages-list .eyebrow { display: block; margin-bottom: 1.6rem; color: var(--leather); }
.svc-stages-list ul { list-style: none; margin: 0; padding: 0; }
.svc-stage button { display: flex; align-items: center; gap: .8rem; background: none; border: 0; padding: .35rem 0; cursor: pointer; text-align: left; }
.svc-stage b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, 1.7vw, 1.45rem); letter-spacing: .1em; text-transform: uppercase; color: var(--warmgray); transition: color .6s ease; }
.svc-stage.is-on b { color: var(--ink); }
.svc-ring { width: 1.15rem; height: 1.15rem; flex: none; opacity: 0; transition: opacity .4s ease; }
.svc-stage.is-on .svc-ring { opacity: 1; }
.svc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.svc-ring circle { fill: none; stroke: rgba(178,164,134,.6); stroke-width: 1.4; }
.svc-ring .prog { stroke: var(--leather); stroke-dasharray: 100.5; stroke-dashoffset: 100.5; }
.svc-stage.is-on.tick .prog { animation: svcprog var(--hold, 6.5s) linear forwards; }
@keyframes svcprog { to { stroke-dashoffset: 0; } }
.svc-stage p { font-family: var(--font-body); font-weight: 300; font-size: .98rem; line-height: 1.65; color: var(--ink); max-width: 30rem; margin: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .8s cubic-bezier(.22, 1, .36, 1), opacity .6s ease, margin .6s ease; }
.svc-stage.is-on p { max-height: 14rem; opacity: 1; margin: .6rem 0 1.4rem 2rem; }
@media (max-width: 900px) { .svc-stages { grid-template-columns: 1fr; gap: 1.6rem; } .svc-stages-list { position: static; } .svc-stage b { font-size: 1.05rem; } }

/* ============ arrival: the slid-in image glides to the hero's exact place, then the page shows around it (no jump) ============ */
main.proj.is-arriving { visibility: hidden; }
main.proj.no-anim, main.proj.no-anim .proj-hero img { animation: none !important; }
.pf-slide img.to-hero { transition: left .78s cubic-bezier(.22, 1, .36, 1), top .78s cubic-bezier(.22, 1, .36, 1), width .78s cubic-bezier(.22, 1, .36, 1), height .78s cubic-bezier(.22, 1, .36, 1), transform .78s cubic-bezier(.22, 1, .36, 1); }
.pf-slide-cap { transition: opacity .4s ease; }
.pf-slide-cap.gone { opacity: 0; }
.pf-slide.out { transition: opacity .6s ease; }

/* ============ edge-to-edge chapters: the image hard against one side, the text in the white on the other (Carson 9/25, like the posts) ============ */
.proj-chapter { max-width: none; padding: 0; gap: 0; grid-template-columns: 1.15fr 1fr; align-items: center; margin: 7rem 0; }
.proj-chapter-img { margin: 0; }
.proj-chapter-img img { aspect-ratio: 4 / 5; max-height: 88vh; }
.proj-chapter-text { padding: 2rem clamp(2rem, 7vw, 7rem); }
.proj-chapter-flip .proj-chapter-img { order: 2; }
.proj-chapter-flip .proj-chapter-text { order: 1; text-align: right; }
.proj-chapter-flip .proj-chapter-text p { margin-left: auto; }
@media (max-width: 860px) { .proj-chapter { grid-template-columns: 1fr; margin: 4rem 0; } .proj-chapter-flip .proj-chapter-img, .proj-chapter-flip .proj-chapter-text { order: initial; text-align: left; } .proj-chapter-text { padding: 1.6rem var(--pad); } }

/* ============ HEADER v3 (theirs, our branding): full bar, rolling links, centre mark, pill CTA, services panel, mobile sheet ============ */
.nav.nav-mark, .menu.menu-stack { display: none; }
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 340; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: .95rem var(--pad); background: linear-gradient(rgba(240,239,235,.96), rgba(240,239,235,.82)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translate3d(0, 0, 0); transition: transform .75s cubic-bezier(.22, 1, .36, 1), background .4s ease; }
.hd.is-hidden { transform: translate3d(0, -130%, 0); transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.hd-left, .hd-right { display: flex; align-items: center; gap: clamp(1.4rem, 3.5vw, 3.6rem); }
.hd-right { justify-content: flex-end; }
.hd-link { position: relative; display: inline-block; font-family: var(--font-label); font-weight: 700; font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: .3rem 0; }
.hd-link .rt { display: block; overflow: hidden; height: 1.1em; line-height: 1.1em; }
.hd-link .rt i { display: block; font-style: normal; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.hd-link:hover .rt i { transform: translateY(-100%); }
.hd-link::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: -.15rem; height: 1px; background: var(--leather); transition: left .4s cubic-bezier(.22, 1, .36, 1), right .4s cubic-bezier(.22, 1, .36, 1); }
.hd-link:hover::after, .hd-link.is-active::after { left: 0; right: 0; }
.hd-link.is-active { color: var(--leather); }
.hd-mark { display: block; line-height: 0; }
.hd-mark .mark-img { height: 2.1rem; width: auto; display: block; transition: opacity .4s ease; }
.hd-mark:hover .mark-img { opacity: .75; }
.hd-burger { display: none; }
body.intro-lock .hd { opacity: 0; }
.hd { transition: transform .75s cubic-bezier(.22, 1, .36, 1), background .4s ease, opacity .6s ease; }

/* pill buttons: text + a leather dot with the arrow; on hover the dot slides to the other end and the text moves over (theirs) */
.pill { position: relative; display: inline-flex; align-items: center; height: 2.3rem; padding: 0 2.6rem 0 1rem; border: 1px solid rgba(32,31,28,.22); border-radius: 2rem; font-family: var(--font-label); font-weight: 700; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); text-decoration: none; background: rgba(240,239,235,.6); overflow: hidden; transition: background .4s ease, border-color .4s ease; }
.pill span { display: inline-block; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.pill i { position: absolute; top: .3rem; right: .3rem; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--leather); color: var(--chalk); display: grid; place-items: center; font-style: normal; font-size: .85rem; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.pill:hover { background: var(--chalk); border-color: var(--leather); }
.pill:hover span { transform: translateX(1.5rem); }
.pill:hover i { transform: translateX(calc(-100% - var(--pill-shift, 5.6rem))); }
.hd-cta { --pill-shift: 5.9rem; }

/* the services panel */
.hd-panel { position: fixed; top: 0; left: 0; right: 0; z-index: 335; padding-top: 4.3rem; background: var(--chalk); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: clip-path .65s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.hd-panel.is-open { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); pointer-events: auto; }
.hd-panel-inner { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr); gap: 2rem 4rem; align-items: stretch; padding: 2.6rem var(--pad) 2.6rem; max-width: 1500px; margin: 0 auto; }
.hd-panel-list { list-style: none; margin: 0; padding: 0; align-self: center; }
.hd-panel-list a { display: block; padding: .55rem 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 2vw, 1.7rem); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: none; opacity: .5; transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1); }
.hd-panel-list a:hover, .hd-panel-list a.is-on { opacity: 1; transform: translateX(.4rem); }
.hd-panel-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--warmgray); }
.hd-panel-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.hd-panel-media img.is-on { opacity: 1; }
.hd-panel-all { grid-column: 1 / -1; justify-self: start; font-family: var(--font-label); font-weight: 700; font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--khaki); text-decoration: none; }
.hd-panel-all:hover { color: var(--leather); }
body.hd-panel-open .hd { background: var(--chalk); }

/* mobile: burger + a full chalk sheet, items staggered in */
.menu.menu-sheet { position: fixed; inset: 0; z-index: 338; background: var(--chalk); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .3rem; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.menu.menu-sheet a { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 6vw, 2.2rem); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: .35rem 0; opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
body.menu-open .menu.menu-sheet { opacity: 1; pointer-events: auto; }
body.menu-open .menu.menu-sheet a { opacity: 1; transform: none; }
body.menu-open .menu.menu-sheet a:nth-child(1) { transition-delay: .05s; } body.menu-open .menu.menu-sheet a:nth-child(2) { transition-delay: .1s; } body.menu-open .menu.menu-sheet a:nth-child(3) { transition-delay: .15s; } body.menu-open .menu.menu-sheet a:nth-child(4) { transition-delay: .2s; } body.menu-open .menu.menu-sheet a:nth-child(5) { transition-delay: .25s; } body.menu-open .menu.menu-sheet a:nth-child(6) { transition-delay: .3s; } body.menu-open .menu.menu-sheet a:nth-child(7) { transition-delay: .35s; } body.menu-open .menu.menu-sheet a:nth-child(8) { transition-delay: .4s; } body.menu-open .menu.menu-sheet a:nth-child(9) { transition-delay: .45s; }
@media (max-width: 900px) {
  .hd { grid-template-columns: auto 1fr auto; }
  .hd-left, .hd-right { display: none; }
  .hd-mark { grid-column: 1; justify-self: start; }
  .hd-burger { display: block; grid-column: 3; width: 2.4rem; height: 2.4rem; border: 1px solid rgba(32,31,28,.22); border-radius: 50%; background: rgba(240,239,235,.7); position: relative; cursor: pointer; z-index: 342; }
  .hd-burger span { position: absolute; left: .7rem; right: .7rem; height: 1px; background: var(--ink); transition: transform .4s cubic-bezier(.22, 1, .36, 1), top .4s ease; }
  .hd-burger span:nth-child(1) { top: .95rem; } .hd-burger span:nth-child(2) { top: 1.35rem; }
  body.menu-open .hd-burger span:nth-child(1) { top: 1.15rem; transform: rotate(45deg); } body.menu-open .hd-burger span:nth-child(2) { top: 1.15rem; transform: rotate(-45deg); }
  .hd-panel { display: none; }
}
.footer-line { max-width: 40rem; margin: 1.2rem auto 0; font-family: var(--font-body); font-weight: 300; font-size: .82rem; line-height: 1.6; color: var(--khaki); text-align: center; }
/* the intro lands on the centre mark now */
.hd-mark .mark-img.mark-landed { opacity: 1; }

/* ============ lightbox v2 ============ */
.lightbox { cursor: default; }
.lb-track { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr minmax(0, 76vw) 1fr; align-items: center; gap: 2vw; transition: transform .42s cubic-bezier(.22, 1, .36, 1); }
.lb-track figure { margin: 0; display: flex; justify-content: center; align-items: center; height: 84vh; }
.lb-track img { max-height: 84vh; max-width: 100%; object-fit: contain; transition: opacity .3s ease; }
.lb-prev img, .lb-next img { opacity: .35; max-height: 62vh; }
.lb-prev { justify-content: flex-end; } .lb-next { justify-content: flex-start; }
.lb-cur img { cursor: zoom-out; }
.lb-track.go-next { transform: translate3d(-12vw, 0, 0); } .lb-track.go-prev { transform: translate3d(12vw, 0, 0); }
.lb-track.go-next .lb-cur img, .lb-track.go-prev .lb-cur img { opacity: .4; }
.lb-zone { position: absolute; top: 0; bottom: 0; width: 50%; background: none; border: 0; cursor: w-resize; }
.lb-zone-prev { left: 0; } .lb-zone-next { right: 0; cursor: e-resize; }
.lb-zone:hover { background: linear-gradient(to right, rgba(0,0,0,.18), transparent); }
.lb-zone-next:hover { background: linear-gradient(to left, rgba(0,0,0,.18), transparent); }
.lightbox-close { z-index: 2; }
.lightbox-close span { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.lightbox-close:hover span { transform: rotate(90deg); }
.lb-count { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); margin: 0; font-family: var(--font-label); font-weight: 700; font-size: .62rem; letter-spacing: .24em; color: var(--chalk); z-index: 2; }
/* ============ title characters flip in ============ */
.proj-head h1 { perspective: 900px; }
.flip-char { display: inline-block; opacity: 0; transform: rotateY(90deg); transform-origin: 50% 50%; animation: charflip .7s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes charflip { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .flip-char { opacity: 1; transform: none; animation: none; } }
/* ============ full-bleed for the best renders ============ */
.proj-wide.is-bleed { max-width: none; padding: 0; margin-left: 0; margin-right: 0; }
.proj-wide.is-bleed img { max-height: 100vh; }

/* ============ v7 (9/25/2026): full-viewport hero; the click hands off UNDER an opaque slide (nothing to glide, nothing to reload) ============ */
:root { --hdh: 4.3rem; }
main.proj { padding-top: var(--hdh); animation: projfade .8s ease both; }
@keyframes projfade { from { opacity: 0; } to { opacity: 1; } }
main.proj.no-anim { animation: none !important; }
main.proj.no-anim .flip-char { animation: none !important; opacity: 1; transform: none; }
.proj .page-head, main.proj-appended .page-head { padding-top: clamp(3.2rem, 8vh, 5.4rem); }
.proj-hero { position: relative; margin: 0; padding: 0; max-width: none; height: calc(100vh - var(--hdh)); min-height: 420px; background: var(--warmgray); overflow: hidden; }
.proj-hero img { width: 100%; height: 100%; max-height: none; object-fit: cover; display: block; animation: none !important; transform: none; will-change: transform; }
.proj-hero::after, .pf-slide-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48%; background: linear-gradient(to top, rgba(18,16,14,.58), rgba(18,16,14,0)); pointer-events: none; z-index: 1; }
.proj-hero-cap { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(1.8rem, 5vh, 3.4rem); z-index: 2; color: var(--chalk); text-shadow: 0 1px 18px rgba(0,0,0,.35); }
.proj-hero-cap h1, .proj-hero-cap b { display: block; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 5.2vw, 3.6rem); letter-spacing: .14em; text-transform: uppercase; line-height: 1.1; color: var(--chalk); }
.proj-hero-cap i { display: block; font-style: normal; font-family: var(--font-label); font-weight: 700; font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; margin-top: .9rem; opacity: .9; }
.proj-hero-cap .flip-char { color: var(--chalk); }
/* the slide: sits under the header (header 340 > slide 330) so the bar never blinks; the image is the SAME rect as the page hero */
.pf-slide { position: fixed; inset: 0; z-index: 330; background: var(--chalk); transform: translate3d(100%, 0, 0); transition: transform 1.1s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.pf-slide.in { transform: translate3d(0, 0, 0); }
.pf-slide-hero { position: absolute; left: 0; right: 0; top: var(--hdh); height: calc(100vh - var(--hdh)); min-height: 420px; overflow: hidden; background: var(--warmgray); }
.pf-slide .pf-slide-hero img { position: static; width: 100%; height: 100%; object-fit: cover; transform: none; display: block; transition: none; }
.pf-slide.out { opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.pf-slide-cap { display: none; }
body.pf-leaving .pf-grid { will-change: transform, opacity; }
body.pf-leaving .pf-filters, body.pf-leaving .page-head { opacity: 0; transition: opacity .8s ease; }
/* next project (theirs): centred eyebrow, name and line, then the image edge to edge; on click it grows to the hero's size and the page swaps under it */
.proj-next { max-width: none; padding: 0; margin: clamp(4rem, 10vh, 7rem) 0 0; }
.proj-next-head { text-align: center; padding: 0 var(--pad) clamp(2rem, 5vh, 3.4rem); }
.proj-next-head small { display: block; font-family: var(--font-label); font-weight: 700; font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--khaki); margin-bottom: 1.1rem; }
.proj-next-head b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 6vw, 4rem); letter-spacing: .14em; text-transform: uppercase; line-height: 1.1; color: var(--ink); }
.proj-next-head i { display: block; font-style: normal; font-family: var(--font-body); font-weight: 300; font-size: .95rem; letter-spacing: .04em; color: var(--khaki); margin-top: 1rem; }
.proj-next-main { cursor: none; background: var(--warmgray); }
.proj-next-main img { height: 64vh; min-height: 320px; filter: none; transform: none; transition: height 1s cubic-bezier(.22, 1, .36, 1); }
.proj-next-main:hover img, .proj-next-main.is-loading img { transform: none; filter: none; }
.proj-next-main.is-opening img { height: calc(100vh - var(--hdh)); }
.proj-next-cap { display: none; }
.proj-next-main.is-loading .proj-next-cap small::after { content: none; }
.proj-next-links { padding: 1.1rem var(--pad) 0; }
.next-cursor { position: fixed; left: 0; top: 0; z-index: 320; width: 6.4rem; height: 6.4rem; border-radius: 50%; background: rgba(240,239,235,.92); color: var(--ink); display: grid; place-items: center; font-family: var(--font-label); font-weight: 700; font-size: .52rem; letter-spacing: .22em; text-transform: uppercase; text-align: center; line-height: 1.5; pointer-events: none; transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
.next-cursor.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: none) { .proj-next-main { cursor: pointer; } .next-cursor { display: none; } }
.proj-bar + main.proj { padding-top: 0; }
.pf-slide .proj-bar { position: absolute; left: 0; right: 0; top: 0; z-index: 2; }
/* the scrollbar gutter stays reserved while Lenis is stopped (no 15px shift when the slide leaves) */
html { scrollbar-gutter: stable; }
.proj-bar + main.proj .proj-hero { height: calc(100vh - var(--barh, 158px)); }

/* ============ sketch beside a paragraph (ink on chalk, no box) ============ */
.proj-sketch { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(4rem, 10vh, 7rem) var(--pad) 0; max-width: 1500px; margin: 0 auto; }
.proj-sketch-img img { width: 100%; height: auto; display: block; }
.proj-sketch-txt p { font-family: var(--font-body); font-weight: 300; font-size: 1.05rem; line-height: 1.7; color: var(--ink); max-width: 26rem; margin: 1rem 0 0; }
@media (max-width: 800px) { .proj-sketch { grid-template-columns: 1fr; } }
/* ============ services panel, minimal (theirs): a list of big type on chalk, nothing else ============ */
.hd-panel-media { display: none; }
.hd-panel-inner { grid-template-columns: 1fr; gap: 0; max-width: none; padding: clamp(3rem, 9vh, 5.5rem) var(--pad) clamp(3.5rem, 10vh, 6.5rem) clamp(1.5rem, 12vw, 14rem); }
.hd-panel-list a { padding: .1rem 0; font-size: clamp(1.9rem, 4.2vw, 3.5rem); letter-spacing: .06em; line-height: 1.18; opacity: 1; transition: color .3s ease; }
.hd-panel-list a:hover, .hd-panel-list a.is-on { transform: none; color: var(--leather); }
/* next project, continuous: the head folds, the image rises into the hero; the next page is spliced in beneath the scroll (no return to top) */
.proj-next-head { overflow: hidden; transition: height .9s cubic-bezier(.22, 1, .36, 1), opacity .5s ease, padding .9s cubic-bezier(.22, 1, .36, 1); }
.proj-next-head.is-folding { opacity: 0; padding-bottom: 0; }
.proj-next.is-opening .proj-next-links { opacity: 0; transition: opacity .4s ease; }
main.proj-appended { padding-top: 0; }
main.proj-appended .proj-hero { height: calc(100vh - var(--hdh)); }
/* appended page: the title does not pop; it is drawn in by the scroll itself (opacity + rise driven from the hero's position, main.js runParallax) */
main.proj-appended .proj-hero-cap { opacity: 0; transform: translate3d(0, 16px, 0); will-change: opacity, transform; }
main.proj-appended .flip-char { animation: none !important; opacity: 1; transform: none; }
main.proj + main.proj-appended { margin-top: 0; }

/* ============ pinned hero + scroll-drawn title (Carson 9/25): the image stays put, the scroll draws the name, then the page continues ============ */
.proj-hero-pin { position: relative; height: calc(100vh - var(--hdh) + 240px); }
.proj-bar + main.proj .proj-hero-pin { height: calc(100vh - var(--barh, 158px) + 240px); }
main.proj-appended .proj-hero-pin { height: calc(100vh - var(--hdh) + 240px); }
.proj-hero { position: sticky; top: 0; }
.proj-hero-cap { opacity: 0; transform: translate3d(0, 16px, 0); will-change: opacity, transform; }
main.proj .flip-char { animation: none !important; opacity: 1; transform: none; }
.proj-next-head { transition: opacity .6s ease; height: auto !important; }
.proj-next-head.is-folding { opacity: 0; padding-bottom: inherit; }
@media (prefers-reduced-motion: reduce) { .proj-hero { position: relative; } .proj-hero-cap { opacity: 1; transform: none; } .proj-hero-pin { height: auto; } }
/* header + portfolio bar step away together after a pause (body.hd-hidden), back on scroll */
.proj-bar { transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
body.hd-hidden .proj-bar { transform: translate3d(0, -120%, 0); }
.pf-slide .proj-bar { transform: none !important; }

/* ============ header at their scale (Carson 9/25: "ours seems kind of small") ============ */
.hd { padding: 1.25rem var(--pad); }
.hd-left, .hd-right { gap: clamp(2rem, 5vw, 5.5rem); }
.hd-link { font-size: .8rem; letter-spacing: .14em; }
.hd-link .rt { height: 1.15em; line-height: 1.15em; }
.hd-mark .mark-img { height: 2.7rem; }
.hd .pill { height: 2.7rem; font-size: .7rem; padding: 0 3.1rem 0 1.3rem; }
.hd-panel { padding-top: 0; }
/* ============ services panel v2: full screen; list at their size; the rest dims on hover; the service's image fills the panel behind ============ */
.hd-panel { height: 100vh; overflow: hidden; }
.hd-panel-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; grid-template-columns: none; gap: 0; max-width: none; padding: var(--hdh) var(--pad) 0 clamp(1.5rem, 15vw, 20rem); }
.hd-panel-list a { font-size: clamp(1.3rem, 2.3vw, 2.6rem); letter-spacing: .05em; line-height: 1.12; padding: .05rem 0; opacity: 1; transition: color .35s ease, opacity .35s ease; }
.hd-panel-list.has-hover a { opacity: .32; }
.hd-panel-list.has-hover a.is-on { opacity: 1; color: var(--ink); }
.hd-panel.img-on .hd-panel-list a, .hd-panel.img-on .hd-panel-list.has-hover a.is-on { color: var(--chalk); }
.hd-panel-media { display: block; position: absolute; inset: 0; z-index: 1; aspect-ratio: auto; background: transparent; pointer-events: none; overflow: hidden; }
.hd-panel-media img { opacity: 0; transition: opacity .7s ease; }
.hd-panel.img-on .hd-panel-media img.is-on { opacity: 1; }
.hd-panel-media::after { content: ""; position: absolute; inset: 0; background: rgba(18,16,14,.3); opacity: 0; transition: opacity .7s ease; }
.hd-panel.img-on .hd-panel-media::after { opacity: 1; }
.hd-panel-cap { position: absolute; right: var(--pad); bottom: 2.4rem; z-index: 3; display: flex; gap: clamp(2rem, 5vw, 5rem); font-family: var(--font-label); font-weight: 700; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--chalk); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.hd-panel.img-on .hd-panel-cap { opacity: 1; }
.hd-panel-all { position: absolute; left: clamp(1.5rem, 15vw, 20rem); bottom: 2.4rem; z-index: 3; }
.hd-panel.img-on .hd-panel-all { color: var(--chalk); }
body.hd-img-on .hd { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.hd-img-on .hd-link, body.hd-img-on .hd .pill { color: var(--chalk); }
body.hd-img-on .hd .pill { border-color: rgba(240,239,235,.55); }
body.hd-img-on .hd-mark .mark-img { filter: invert(1) brightness(1.15); }
/* ============ cities with live local time, above the footer on every page ============ */
.cities { padding: clamp(5rem, 14vh, 9rem) var(--pad) clamp(4rem, 10vh, 7rem); text-align: center; }
.cities-eyebrow { display: block; font-family: var(--font-label); font-weight: 700; font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--khaki); margin-bottom: 2.2rem; }
.city { display: flex; justify-content: center; align-items: baseline; gap: 1.2rem; }
.city b { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 7.5vw, 6.5rem); letter-spacing: .08em; text-transform: uppercase; line-height: 1.02; color: var(--ink); }
.city time { font-family: var(--font-label); font-weight: 700; font-size: .68rem; letter-spacing: .18em; color: var(--khaki); font-variant-numeric: tabular-nums; min-width: 4.6rem; text-align: left; }
@media (max-width: 700px) { .city { gap: .7rem; } .city time { min-width: 3.6rem; font-size: .58rem; } }
/* panel opens on chalk with the ink list; an image only appears once a service is hovered (fixes the ink-on-photo blank panel, 9/25) */
.hd-panel .hd-panel-media img, .hd-panel .hd-panel-media img.is-on { opacity: 0; }
.hd-panel.img-on .hd-panel-media img.is-on { opacity: 1; }
/* exit parallax: sections get a stacking context and a chalk ground so the next one slides over the one leaving */
.has-exit { position: relative; will-change: transform; }
.proj-head.has-exit, .proj-meta.has-exit, .proj-sketch.has-exit, .proj-chapter.has-exit { background: var(--chalk); }
/* immersive: no native link/image drag under the hand */
.imm a, .imm img, .imm-tile, .imm-tile img { -webkit-user-drag: none; user-drag: none; user-select: none; -webkit-user-select: none; }
/* cities block: name stays centred; the time hangs top-right of the word (theirs) */
.city { display: block; text-align: center; }
.city b { position: relative; display: inline-block; font-size: clamp(2.2rem, 6.6vw, 5.6rem); }
.city time { position: absolute; left: 100%; top: .22em; margin-left: clamp(.6rem, 1.4vw, 1.2rem); min-width: 0; white-space: nowrap; text-align: left; line-height: 1; }
@media (max-width: 700px) { .city time { margin-left: .5rem; } }
.city-in { position: relative; display: inline-block; }
.city b { position: static; display: block; }
/* plans and elevations are transparent PNGs drawn straight onto the chalk: no sheet, no box */
.proj-wide:has(img[src*="/plan-"]), figure:has(img[src*="/plan-"]), .guide-figure:has(img[src*="/plan-"]) { background: transparent; overflow: visible; }
img[src*="/plan-"] { background: transparent; box-shadow: none; }

/* ============ AUDIT BATCH 1 (9/26/2026, from Carson's agent's audit) ============ */
/* 11: no sideways scroll on phones */
html, body { overflow-x: clip; }
.hd { left: 0; right: 0; width: auto; box-sizing: border-box; }
/* 10: the services list paints above the photo; softer dimming; their wipe timing */
.hd-panel-list { position: relative; z-index: 2; }
.hd-panel-all, .hd-panel-cap { z-index: 3; }
.hd-panel { transition: clip-path .7s cubic-bezier(.76, 0, .24, 1); }
.hd-panel-inner { padding-left: clamp(1.5rem, 14.7vw, 13.25rem); }
.hd-panel-list a { font-size: clamp(1.4rem, 2.6vw, 2.5rem); letter-spacing: .03em; transition: color .3s ease, opacity .3s ease; }
.hd-panel-list.has-hover a { opacity: .55; }
.hd-panel-list.has-hover a.is-on { opacity: 1; }
/* 3: the category bar is fixed under the header (no flow height), one scrolling row on phones */
.proj-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 310; }
.proj-bar + main.proj { padding-top: var(--barh, 158px); }
.proj-bar a { padding: .55rem 0; }
@media (max-width: 900px) {
  .proj-bar { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 1.4rem; padding: calc(var(--hdh, 78px) + .2rem) var(--pad) .2rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .proj-bar::-webkit-scrollbar { display: none; }
  .proj-bar a { flex: 0 0 auto; padding: .8rem 0; }
  .proj-bar .proj-bar-nav { margin-left: 1.4rem; }
}
/* 4 + 15: caption label size; no catch-all transitions on the hero */
.proj-hero { transition: none; }
.proj-hero-cap i { font-size: .75rem; letter-spacing: .1em; }
/* 5: reveals arrive quickly, once on screen */
.rise { transform: translateY(18px); transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1); }
.reveal { transition: opacity .6s cubic-bezier(.16, 1, .3, 1) var(--d, 0s), transform .6s cubic-bezier(.16, 1, .3, 1) var(--d, 0s); }
main.proj .proj-meta, main.proj .proj-chapter { padding-top: clamp(3rem, 8vh, 6rem); padding-bottom: clamp(3rem, 8vh, 6rem); }
main.proj p { font-size: 1.0625rem; line-height: 1.65; max-width: 40rem; }
/* 8: the grid at their proportions; wide tiles span two columns at 3:2, tall stay 4:5; hover answers in 600ms */
.pf-grid { gap: 16px; }
.pf-grid.cols-4 .pf-tile.is-tall { aspect-ratio: 4 / 5; }
.pf-grid.cols-4 .pf-tile.is-wide { aspect-ratio: 3 / 2; grid-column: span 2; }
.pf-tile img { transition: transform .6s cubic-bezier(.215, .61, .355, 1), filter .6s ease; }
.pf-tile:hover img { transform: scale(1.05); }
@media (max-width: 520px) { .pf-grid.cols-4, .pf-grid.cols-2 { grid-template-columns: repeat(2, 1fr); gap: 12px; } .pf-grid.cols-2 .pf-tile.is-wide, .pf-grid.cols-4 .pf-tile.is-wide { grid-column: span 2; aspect-ratio: 3 / 2; } }
/* 9 + 26: one filter row, view toggles at the right; 44px targets; a scrolling row on phones */
.pf-filters { flex-wrap: nowrap; justify-content: flex-start; gap: 1.5rem; max-width: 1500px; }
.pf-filters button { font-size: .69rem; letter-spacing: .14em; padding: .7rem 0; white-space: nowrap; }
.pf-filters .pf-imm { margin-left: auto; }
@media (max-width: 900px) { .pf-filters { overflow-x: auto; scrollbar-width: none; gap: 1.2rem; } .pf-filters::-webkit-scrollbar { display: none; } .pf-filters .pf-imm { margin-left: 1.2rem; } }
/* 12 + 25: immersive on touch: captions shown, back button reachable */
@media (hover: none) { .imm-cap { opacity: 1; transform: none; } }
.imm-back { font-size: .75rem; min-height: 44px; display: inline-flex; align-items: center; }
/* 13: the form is visible at rest; a proper button */
.start-form { opacity: 1; transform: none; }
.start-form button, .start-form [type="submit"] { min-height: 3rem; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; }
.start-form input[type="file"] { font-family: var(--font-body); font-size: .9rem; padding: .8rem 0; }
/* 14 + 26: burger and sheet */
.hd-burger { width: 2.75rem !important; height: 2.75rem !important; }
.menu-sheet a, .menu a { font-size: 1.75rem; letter-spacing: .14em; }
.menu-close { position: absolute; top: 1rem; right: 1.1rem; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(32,31,28,.22); border-radius: 50%; background: transparent; color: var(--ink); font: 300 1.6rem/1 var(--font-body); cursor: pointer; display: none; }
body.menu-open .menu-close { display: grid; place-items: center; }
/* 15: a floor for small type; nav a step up */
.hd-link { font-size: .85rem; letter-spacing: .12em; }
.eyebrow, .pf-cap i, .cities-eyebrow, .hd-panel-all, .hd-panel-cap, .proj-next-links a, .proj-meta, .proj-head .eyebrow, .offer h3, .salon-start, #salonCount, .footer p { font-size: .75rem; letter-spacing: .12em; }
.pf-cap b { font-size: .85rem; letter-spacing: .14em; }
#salonTitle { font-size: 1.25rem; }
.next-cursor { font-size: .72rem; letter-spacing: .14em; width: 6.6rem; height: 6.6rem; transition: opacity .3s ease; }
.footer a, .footer-links a { font-size: .8125rem; letter-spacing: .08em; padding: .5rem 0; display: inline-block; }
.footer-line { font-size: .9rem; }
/* 16: display type a band up, fluid */
.page-title { font-size: clamp(2.5rem, 5.5vw, 6rem); }
.proj-chapter h2, .section-dark h2, .cta-band h2 { font-size: clamp(1.8rem, 3.3vw, 3rem); }
.svc-card h3, .svc-card .svc-title { font-size: 1.75rem; letter-spacing: .1em; }
.salon-tagline-main { font-size: 1.75rem; }
/* 17 + 30 + 35: rhythm; cities within a screen; footer shorter */
.cities { padding: clamp(4rem, 9vh, 6.5rem) var(--pad) clamp(3rem, 7vh, 5rem); }
.city b { font-size: clamp(2rem, 5.6vw, 5rem); }
.city time { font-size: .75rem; }
.footer { padding: clamp(3rem, 7vh, 5rem) var(--pad) clamp(1.5rem, 4vh, 2.5rem); }
/* 18: service cards at 3:2 */
.svc-card img { aspect-ratio: 3 / 2; }
/* 7 + 22: the home frame at two thirds of the screen at 3:2; edge to edge on phones */
.salon-frame { width: min(66vw, 1100px); }
.salon-stack img, .salon-stack picture, .salon-frame img { aspect-ratio: 3 / 2; }
@media (max-width: 640px) { .salon-frame { width: 100%; padding: 0; border: 0; box-shadow: none; } .salon-tagline { opacity: 1; transform: none; } }
/* 36: the page title no longer animates letter-spacing */
.page-enter .page-title { animation: projfade .8s ease both; letter-spacing: .12em; }
/* 32: the about heading is not gated */
.section-dark .dark-h2.rise { opacity: 1; transform: none; }
/* 35 on phones: a footer that fits under a screen */
@media (max-width: 640px) { .footer { padding: 2.5rem var(--pad) 1.5rem; } .footer-lockup { width: 64px; height: auto; } .footer-links { gap: .6rem 1rem; } .footer-line { font-size: .85rem; margin-top: .8rem; } .footer-social { margin-top: .8rem; } }
/* portfolio cards cropped like theirs: every card the same portrait 1:sqrt2, no spans (Carson 9/26) */
.pf-grid .pf-tile, .pf-grid.cols-4 .pf-tile.is-tall, .pf-grid.cols-4 .pf-tile.is-wide, .pf-grid.cols-2 .pf-tile.is-tall, .pf-grid.cols-2 .pf-tile.is-wide { aspect-ratio: 1 / 1.4142; grid-column: auto; }
@media (max-width: 520px) { .pf-grid.cols-2 .pf-tile.is-wide, .pf-grid.cols-4 .pf-tile.is-wide { grid-column: auto; aspect-ratio: 1 / 1.4142; } }

/* ============ AUDIT BATCH 2 (9/26/2026, from the second pass + consolidated revisions) ============ */
.proj-hero img { transition: transform .1s linear; }
.hd-panel-media { transition: opacity .7s ease; }
.hd-panel-list { align-self: flex-start; margin: 0; }
.pf-filters { box-sizing: border-box; padding-right: calc(var(--pad) + .5rem); }
.pf-filters button { padding: .95rem 0; }
.pf-filters .pf-cols { padding: .95rem .5rem; min-width: 24px; }
.hd .pill.hd-cta { font-size: .75rem; }
.svc-grid .svc-card img, a.svc-card img, .svc-card > img { aspect-ratio: 3 / 2; height: auto; }
/* mobile menu: one close control, larger links */
body.menu-open .hd-burger { visibility: hidden; }
.menu-close { position: fixed; z-index: 346; }
.menu.menu-sheet a { font-size: 1.75rem; letter-spacing: .14em; }
/* phones: clock sits after the name, inside the gutter; the bar row fades at its right edge */
@media (max-width: 640px) { .city b { display: inline; } .city time { position: static; display: inline-block; margin-left: .55rem; vertical-align: .9em; } }
@media (max-width: 900px) { .proj-bar { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); } }
/* about: the dark section gets a real ground */
.section-dark { background: var(--ink); color: var(--chalk); }
.section-dark h2, .section-dark h3, .section-dark p, .section-dark .dark-h2, .section-dark .stat-num { color: var(--chalk); }
.section-dark .eyebrow { color: var(--khaki); }
/* footer 3.1: two rows, under 300px */
.footer { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "mark links social" "copy copy copy"; align-items: center; gap: 1.2rem 2rem; text-align: left; padding: 2.2rem var(--pad) 1.4rem; border-top: 1px solid rgba(178,164,134,.35); }
.footer-lockup { grid-area: mark; width: 40px; height: auto; margin: 0; }
.footer-since, .footer-line { display: none; }
.footer-links { grid-area: links; justify-content: flex-start; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 0; }
.footer-social { grid-area: social; margin: 0; gap: 1rem; }
.footer-social a { width: 24px; height: 24px; transform: none !important; }
.footer-copy { grid-area: copy; margin: 0; font-size: .75rem; opacity: .6; }
.footer-copy a { font-size: .75rem; }
@media (max-width: 640px) { .footer { grid-template-columns: 1fr; grid-template-areas: "mark" "links" "social" "copy"; text-align: center; justify-items: center; gap: 1rem; padding: 2rem var(--pad) 1.4rem; } .footer-links { justify-content: center; } }
/* filter row fits inside 1440 with the taller targets */
.pf-filters { gap: clamp(.8rem, 1.3vw, 1.4rem); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pf-filters::-webkit-scrollbar { display: none; }
.pf-filters button { font-size: .66rem; letter-spacing: .12em; }
/* open sheet sits above the header so its close button is the one control */
body.menu-open .menu.menu-sheet { z-index: 345; }


/* ============ INTRO FILM, SOCIAL ROW, PILL HOVER, MENU (9/26/2026 late, from the work order) ============ */
/* 4.1 header pill: no label or dot travel; hover = chalk ground, leather border, the arrow nudges inside the dot */
.pill:hover span { transform: none; }
.pill:hover i { transform: none; }
.pill i { transition: transform .3s cubic-bezier(.22,1,.36,1), background .3s ease; }
.pill:hover i { transform: translateX(4px); }
body.hd-img-on .hd .pill:hover, body.hd-film .hd .pill:hover { background: var(--chalk); color: var(--ink); border-color: var(--chalk); }

/* 3.1 social row: 28 px icons, 20 px gaps, ink at 70 % rising to leather */
.footer-social { gap: 20px; }
.footer-social a { width: 28px; height: 28px; color: rgba(32,31,28,.7); transition: color .25s ease; }
.footer-social a:hover { color: var(--leather); transform: none; }
@media (max-width: 640px) { .footer-social { gap: 18px; } .footer-social a { width: 26px; height: 26px; } }

/* 3.4 mobile menu foot: email + the same icons under the links */
.menu-foot { display: flex; flex-direction: column; align-items: center; gap: .9rem; margin-top: 2.2rem; }
.menu.menu-sheet .menu-foot a { font-family: var(--font-label); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: none; padding: 0; }
.menu-social { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.menu.menu-sheet .menu-social a { width: 26px; height: 26px; display: block; color: rgba(32,31,28,.7); padding: 0; }
.menu-social svg { width: 100%; height: 100%; display: block; }
.menu-social a:hover { color: var(--leather); }
body.menu-open .menu.menu-sheet .menu-foot a { opacity: 1; transform: none; transition-delay: .45s; }

/* 1. the film: a 100vh hero at the top of the home page */
.film { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #1a1c1f; }
.film-frame, .film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film-frame { opacity: 0; transition: opacity 1s ease; }
.film.is-rest .film-frame, .film.is-ended .film-frame { opacity: 1; }
.film-video { z-index: 1; background: #1a1c1f; }
.film.is-ended .film-video { opacity: 0; transition: opacity .4s ease .2s; }
.film-overlay { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; transition: opacity 1s ease; }
.film-overlay.is-out { opacity: 0; }
.film-mono { width: min(30vh, 40vw, 250px); height: auto; overflow: visible; filter: drop-shadow(0 1px 14px rgba(0,0,0,.35)); }
.film-overlay.is-flying .film-mono { filter: none; }
.film-tag { position: absolute; left: 50%; top: calc(50% + min(18vh, 165px)); transform: translateX(-50%); margin: 0; white-space: nowrap; font-family: var(--font-display); font-size: clamp(.95rem, 1.5vw, 1.25rem); letter-spacing: .16em; text-transform: uppercase; color: var(--chalk); text-shadow: 0 1px 18px rgba(0,0,0,.4); }
.film-tag span { display: inline-block; opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.film-overlay.tag-in .film-tag span { opacity: 1; transform: none; }
.film-overlay.tag-in .film-tag span:nth-child(2) { transition-delay: .08s; }
.film-overlay.tag-in .film-tag span:nth-child(3) { transition-delay: .16s; }
.film-overlay.tag-out .film-tag span { opacity: 0; transform: translateY(-10px); transition-delay: 0s; }
.film-row { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(1.8rem, 5vh, 3.4rem); z-index: 4; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; opacity: 0; transform: translateY(10px); transition: opacity 1s ease, transform 1s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.film-row.is-on { opacity: 1; transform: none; pointer-events: auto; }
.film-cap { text-decoration: none; color: var(--chalk); text-shadow: 0 1px 18px rgba(0,0,0,.4); }
.film-cap b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 3.2vw, 2.4rem); letter-spacing: .14em; text-transform: uppercase; line-height: 1.1; }
.film-cap i { display: block; font-style: normal; font-family: var(--font-label); font-weight: 700; font-size: .75rem; letter-spacing: .26em; text-transform: uppercase; margin-top: .7rem; opacity: .9; }
.film-right { display: flex; align-items: center; gap: 1.6rem; }
.film-social { display: flex; gap: 14px; }
.film-social a { display: block; width: 20px; height: 20px; color: var(--chalk); opacity: .6; transition: opacity .25s ease; }
.film-social a:hover { opacity: 1; }
.film-social svg { width: 100%; height: 100%; display: block; }
.pill.film-view { color: var(--chalk); border-color: rgba(240,239,235,.55); background: transparent; height: 2.7rem; font-size: .72rem; padding: 0 3rem 0 1.2rem; }
.pill.film-view i { top: .5rem; right: .5rem; }
.pill.film-view:hover { background: var(--chalk); color: var(--ink); border-color: var(--chalk); }
.film-skip { position: absolute; right: var(--pad); bottom: clamp(1.8rem, 5vh, 3.4rem); z-index: 5; height: 44px; padding: 0 1.4rem; border: 1px solid rgba(240,239,235,.55); border-radius: 2rem; background: transparent; color: var(--chalk); font-family: var(--font-label); font-weight: 700; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; opacity: 0; transition: opacity .6s ease .8s, background .3s ease, color .3s ease; }
.film.is-playing .film-skip { opacity: 1; }
.film-skip:hover { background: var(--chalk); color: var(--ink); }
.film-skip.is-out { opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.film-row.is-on ~ .film-skip { opacity: 0; pointer-events: none; }
@media (max-width: 1023px) { .film { height: 82svh; min-height: 480px; } .film-row { flex-direction: column; align-items: flex-start; gap: 1.2rem; } .film-right { gap: 1.2rem; } }
@media (max-width: 640px) { .film { height: 70svh; min-height: 420px; } .film-social { display: none; } }

/* the rest of the home page waits behind the film; the header is chalk over it */
body.intro-lock main { opacity: 1; }
body.intro-lock main > :not(.film), body.intro-lock .footer, body.intro-lock .cities { opacity: 0; }
body.intro-done main { animation: none; }
body.intro-done main > :not(.film), body.intro-done .footer { animation: siteappear .9s cubic-bezier(.3, 0, .2, 1) both; }
body.intro-lock .hd { opacity: 0; }
body.hd-film:not(.hd-panel-open) .hd { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.hd-film:not(.hd-panel-open) .hd-link, body.hd-film:not(.hd-panel-open) .hd .pill { color: var(--chalk); }
body.hd-film:not(.hd-panel-open) .hd .pill { border-color: rgba(240,239,235,.55); background: transparent; }
body.hd-film:not(.hd-panel-open) .hd-mark .mark-img { filter: invert(1) brightness(1.15); }
body.hd-film:not(.hd-panel-open) .hd-burger span { background: var(--chalk); }
.salon { min-height: 0; padding-top: clamp(4rem, 9vh, 7rem); }
@media (prefers-reduced-motion: reduce) { .film-frame, .film-row, .film-overlay { transition: none; } }
body.hd-img-on:not(.hd-panel-open) .hd .pill:hover, body.hd-film:not(.hd-panel-open) .hd .pill:hover { background: var(--chalk); color: var(--ink); border-color: var(--chalk); }
/* film on a project cover */
.proj-hero-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.proj-hero.film-on .proj-hero-film { opacity: 1; }
.proj-hero.film-done .proj-hero-film { opacity: 0; transition: opacity .8s ease; }

/* ============ COVER v2 (9/27/2026): full screen on every device, quiet three-part caption row, socials live only in the footer ============ */
.film { height: 100vh; height: 100svh; min-height: 520px; }
.film-media { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 0; }
.film-media picture { position: absolute; inset: 0; display: block; }
.film-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(16,15,13,.34) 0, rgba(16,15,13,0) 22%), linear-gradient(to top, rgba(16,15,13,.62) 0, rgba(16,15,13,.18) 30%, rgba(16,15,13,0) 48%); }
.film-social, .film-right { display: none !important; }
.film-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 2rem; bottom: clamp(1.6rem, 4.5vh, 3rem); }
.film-cap { justify-self: start; max-width: 34rem; }
.film-cap small { display: block; font-family: var(--font-label); font-weight: 700; font-size: .75rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(240,239,235,.78); margin-bottom: .9rem; }
.film-cap b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4.4vw, 4rem); letter-spacing: .12em; text-transform: uppercase; line-height: 1.02; color: var(--chalk); }
.film-cap span { display: block; margin-top: .9rem; font-family: var(--font-body); font-weight: 300; font-size: clamp(.95rem, 1.1vw, 1.08rem); letter-spacing: .02em; color: rgba(240,239,235,.86); }
.film-cap i { display: none; }
.film-cue { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: .8rem; color: rgba(240,239,235,.8); text-decoration: none; padding: .6rem 1rem 0; }
.film-cue span { font-family: var(--font-label); font-weight: 700; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; }
.film-cue i { position: relative; width: 1px; height: 54px; background: rgba(240,239,235,.28); overflow: hidden; }
.film-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--chalk); animation: filmcue 2.2s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes filmcue { 0% { top: -40%; } 60%, 100% { top: 100%; } }
.film-cue:hover { color: var(--chalk); }
.film-view { justify-self: end; display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; font-family: var(--font-label); font-weight: 700; font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: var(--chalk); text-decoration: none; position: relative; }
.film-view::after { content: ""; position: absolute; left: 0; right: 1.6rem; bottom: .55rem; height: 1px; background: rgba(240,239,235,.55); transform-origin: left; transition: transform .45s cubic-bezier(.22,1,.36,1), background .3s ease; }
.film-view:hover::after { background: var(--chalk); transform: scaleX(1.12); }
.film-view span { transition: transform .35s cubic-bezier(.22,1,.36,1); }
.film-view:hover span { transform: translateX(5px); }
.film-row.is-on ~ .film-skip { opacity: 0; pointer-events: none; }
.film-skip { bottom: auto; top: calc(var(--hdh, 84px) + 1rem); }
@media (max-width: 1023px) {
  .film { height: 100svh; min-height: 480px; }
  .film-row { grid-template-columns: 1fr; gap: 1.1rem; bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); }
  .film-cue { display: none; }
  .film-view { justify-self: start; }
  .film-cap b { font-size: clamp(2rem, 9vw, 2.6rem); }
  .film-scrim { background: linear-gradient(to bottom, rgba(16,15,13,.34) 0, rgba(16,15,13,0) 18%), linear-gradient(to top, rgba(16,15,13,.7) 0, rgba(16,15,13,.22) 34%, rgba(16,15,13,0) 52%); }
  .film-tag { font-size: .9rem; white-space: normal; width: 80vw; text-align: center; top: calc(50% + 24vw); }
  .film-mono { width: 42vw; }
  .film-skip { right: var(--pad); height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .film-cue i::after { animation: none; top: 30%; } }
/* the section after the cover */
#salon { scroll-margin-top: 0; }

/* ============ AUDIT 9/27: portfolio click, tile loading, type floor, tap targets ============ */
/* the grid stays visible while the project slides over it (it used to be gone before the slide arrived = a blank beat) */
body.pf-leaving .pf-grid.pf-zoomout { transition: transform 1.6s cubic-bezier(.22, 1, .36, 1), opacity 1.2s cubic-bezier(.4, 0, .2, 1); }
.pf-slide { transition: transform 1.1s cubic-bezier(.76, 0, .24, 1); }
/* tiles fade in when their picture arrives */
.pf-tile img { transition: opacity .7s ease, transform .6s cubic-bezier(.215, .61, .355, 1), filter .6s ease; }
.pf-tile img.pf-wait { opacity: 0; }
/* 12 px floor on labels */
.proj-fact b, .proj-meta .proj-fact b { font-size: .75rem; }
.proj-next-head small { font-size: .75rem; }
.svc-name span { font-size: .72rem; }
.pf-filters button, .proj-bar a { font-size: .7rem; }
/* social icons: 44 px tap targets without changing their drawn size */
.footer-social a, .menu-social a { padding: 8px; margin: -8px; box-sizing: content-box; }
.footer-social { gap: 22px; }
.film-cap { max-width: min(62vw, 56rem); }
@media (max-width: 1023px) { .film-cap { max-width: none; } }
/* the grid steps back instead of flying off the top, and stays on screen until the project has covered it (no blank beat, 9/27) */
body.pf-leaving .pf-grid.pf-zoomout { transform: scale(.9) translate3d(0, -6vh, 0); opacity: 0; transition: transform 1.4s cubic-bezier(.22, 1, .36, 1), opacity 1.3s cubic-bezier(.55, 0, .8, .4); }
/* coordinates everywhere (9/27): under every portfolio tile, in the project facts, decoding in */
.pf-cap em.pf-coord { display: block; margin-top: .45rem; font-style: normal; font-family: var(--font-label); font-weight: 700; font-size: .68rem; letter-spacing: .18em; color: rgba(240,239,235,.82); white-space: nowrap; }
.proj-fact.is-coord span { font-variant-numeric: tabular-nums; }
.film-cap small em { font-style: normal; color: rgba(240,239,235,.62); margin-left: .9rem; letter-spacing: .2em; }
.film-row { grid-template-columns: 1fr auto; }
.film-cue { display: none; }

/* Portfolio hover: a drop of coordinates only (9/27) */
.hd-coords { position: fixed; top: 0; left: 0; right: 0; height: 100vh; z-index: 335; background: var(--chalk); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: clip-path .7s cubic-bezier(.76, 0, .24, 1); pointer-events: none; overflow: hidden; }
.hd-coords.is-open { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); pointer-events: auto; }
.hd-coords-media { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hd-coords-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s ease, transform 1.4s cubic-bezier(.22, 1, .36, 1); }
.hd-coords.img-on .hd-coords-media img.is-on { opacity: 1; transform: none; }
.hd-coords-media::after { content: ""; position: absolute; inset: 0; background: rgba(18, 16, 14, .34); opacity: 0; transition: opacity .7s ease; }
.hd-coords.img-on .hd-coords-media::after { opacity: 1; }
.hd-coords-list { position: relative; z-index: 2; list-style: none; margin: 0; height: 100%; box-sizing: border-box; overflow-y: auto; scrollbar-width: none;
  padding: calc(var(--hdh, 84px) + clamp(2.5rem, 7vh, 5rem)) var(--pad) clamp(2.5rem, 7vh, 5rem); columns: 4 16rem; column-gap: clamp(2rem, 4vw, 4.5rem); }
.hd-coords-list::-webkit-scrollbar { display: none; }
.hd-coords-list li { break-inside: avoid; }
.hd-coords-list a { display: inline-block; padding: .5rem 0; font-family: var(--font-label); font-weight: 700; font-size: clamp(1rem, 1.35vw, 1.4rem); letter-spacing: .14em; color: var(--ink); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; transition: color .3s ease, opacity .3s ease; }
.hd-coords-list.is-dense a { font-size: .95rem; padding: .28rem 0; }
.hd-coords-list.has-hover a { opacity: .28; }
.hd-coords-list.has-hover a.is-on { opacity: 1; }
.hd-coords.img-on .hd-coords-list a { color: var(--chalk); }
.hd-coords-list a:focus-visible { outline: 1px solid var(--leather); outline-offset: 4px; }
.hd-coords-list.is-sparse { padding-top: calc(var(--hdh, 84px) + clamp(4rem, 20vh, 12rem)); }

/* Portfolio hover v2 (Carson 9/27: "exactly like the services section"): chalk panel, one column of big lines left of centre, vertically centred,
   the others dim as you hover, the picture fills the panel behind, the name and place bottom right, click to go */
.hd-coords { position: fixed; top: 0; left: 0; right: 0; height: 100vh; z-index: 335; background: var(--chalk); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: clip-path .65s cubic-bezier(.22, 1, .36, 1); pointer-events: none; overflow: hidden; }
.hd-coords.is-open { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); pointer-events: auto; }
.hd-coords-media { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hd-coords-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.hd-coords.img-on .hd-coords-media img.is-on { opacity: 1; }
.hd-coords-media::after { content: ""; position: absolute; inset: 0; background: rgba(18, 16, 14, .3); opacity: 0; transition: opacity .7s ease; }
.hd-coords.img-on .hd-coords-media::after { opacity: 1; }
.hd-coords-list { position: relative; z-index: 2; list-style: none; margin: 0; box-sizing: border-box; height: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-content: flex-start; column-gap: clamp(2.5rem, 5vw, 6rem);
  padding: calc(var(--hdh, 84px) + 1.5rem) var(--pad) 2.5rem clamp(1.5rem, 15vw, 20rem); columns: auto; }
.hd-coords-list::-webkit-scrollbar { display: none; }
.hd-coords-list li { flex: 0 0 auto; }
.hd-coords-list a { display: inline-block; padding: .05rem 0; font-family: var(--font-label); font-weight: 700; font-size: clamp(1.1rem, 1.9vw, 2.1rem); letter-spacing: .08em; line-height: 1.22; color: var(--ink); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 1; transition: color .35s ease, opacity .35s ease; }
.hd-coords-list.has-hover a { opacity: .32; }
.hd-coords-list.has-hover a.is-on { opacity: 1; }
.hd-coords.img-on .hd-coords-list a { color: var(--chalk); }
.hd-coords-list a:focus-visible { outline: 1px solid var(--leather); outline-offset: 4px; }
.hd-coords-cap { opacity: 0; transition: opacity .5s ease; }
.hd-coords.img-on .hd-coords-cap { opacity: 1; }

/* ============ LIGHTBOX v3 (9/27): project images only, one project at a time, branded ============ */
.lightbox { display: none !important; }
img.lbx-able { cursor: zoom-in; }
.lbx { position: fixed; inset: 0; z-index: 500; background: #171614; color: var(--chalk); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.lbx.on { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.lbx-bar { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1.3rem var(--pad); }
.lbx-title b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1rem, 1.5vw, 1.35rem); letter-spacing: .14em; text-transform: uppercase; line-height: 1.1; }
.lbx-title i { display: block; margin-top: .35rem; font-style: normal; font-family: var(--font-label); font-weight: 700; font-size: .72rem; letter-spacing: .18em; color: #C98B4E; }
.lbx-count { margin: 0; font-family: var(--font-label); font-weight: 700; font-size: .75rem; letter-spacing: .26em; color: rgba(240,239,235,.6); }
.lbx-count .lbx-now { color: var(--chalk); }
.lbx-close { justify-self: end; display: inline-flex; align-items: center; gap: .8rem; height: 44px; padding: 0 .4rem 0 1.2rem; border: 1px solid rgba(240,239,235,.35); border-radius: 2rem; background: transparent; color: var(--chalk); font-family: var(--font-label); font-weight: 700; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; cursor: pointer; transition: background .3s ease, color .3s ease, border-color .3s ease; }
.lbx-close i { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--leather); transition: transform .45s cubic-bezier(.22,1,.36,1); }
.lbx-close i::before, .lbx-close i::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 1.5px; background: var(--chalk); transform: rotate(45deg); }
.lbx-close i::after { transform: rotate(-45deg); }
.lbx-close:hover { background: var(--chalk); color: var(--ink); border-color: var(--chalk); }
.lbx-close:hover i { transform: rotate(90deg); }
.lbx-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 5.6rem var(--pad) 5.2rem; }
.lbx-img { grid-area: 1 / 1; max-width: 84vw; max-height: calc(100vh - 11rem); width: auto; height: auto; object-fit: contain; cursor: e-resize; opacity: 0; transition: opacity .55s ease, transform .75s cubic-bezier(.22, 1, .36, 1); will-change: transform, opacity; user-select: none; -webkit-user-drag: none; }
.lbx-cap { position: absolute; left: 0; right: 0; bottom: 2.6rem; z-index: 3; margin: 0; text-align: center; font-family: var(--font-label); font-weight: 700; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(240,239,235,.7); pointer-events: none; }
.lbx-arrow { position: absolute; top: 50%; z-index: 3; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; border: 1px solid rgba(240,239,235,.3); background: rgba(23,22,20,.35); color: var(--chalk); font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; transition: background .3s ease, border-color .3s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.lbx-prev { left: var(--pad); } .lbx-next { right: var(--pad); }
.lbx-arrow:hover { background: var(--leather); border-color: var(--leather); }
.lbx-prev:hover { transform: translateX(-3px); } .lbx-next:hover { transform: translateX(3px); }
.lbx-ticks { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 3; display: flex; gap: 6px; }
.lbx-ticks i { width: 22px; height: 2px; background: rgba(240,239,235,.22); transition: background .35s ease, width .35s ease; }
.lbx-ticks i.is-on { background: var(--chalk); width: 36px; }
.lbx .lbx-close:focus-visible, .lbx .lbx-arrow:focus-visible { outline: 1px solid #C98B4E; outline-offset: 3px; }
@media (max-width: 899px) {
  .lbx-bar { grid-template-columns: 1fr auto; padding: 1rem var(--pad); } .lbx-count { display: none; }
  .lbx-close span { display: none; } .lbx-close { padding: 0 .3rem; border: 0; }
  .lbx-img { max-width: 100vw; max-height: calc(100svh - 10rem); }
  .lbx-stage { padding: 5rem 0 4.6rem; }
  .lbx-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lbx-img { transition: opacity .2s ease; } }

/* ============ portfolio click v8 (9/27): the picture grows out of its tile into the hero; no wipe ============ */
.pf-grow { position: fixed; inset: 0; z-index: 330; pointer-events: none; will-change: clip-path; transition: clip-path 1s cubic-bezier(.65, 0, .35, 1), opacity .42s ease; }
.pf-grow img { position: absolute; display: block; max-width: none; transform-origin: 50% 50%; will-change: transform; transition: transform 1s cubic-bezier(.65, 0, .35, 1), left .5s cubic-bezier(.22,1,.36,1), top .5s cubic-bezier(.22,1,.36,1), width .5s cubic-bezier(.22,1,.36,1), height .5s cubic-bezier(.22,1,.36,1); }
.pf-grow-scrim { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(18,16,14,.58), rgba(18,16,14,0) 48%); opacity: 0; transition: opacity .5s ease .5s; }
.pf-grow.go .pf-grow-scrim { opacity: 1; }
.pf-grow .pf-grow-bar { position: absolute; left: 0; right: 0; top: 0; z-index: 2; opacity: 0; transform: none !important; transition: opacity .45s ease .55s; background: var(--chalk); }
.pf-grow.go .pf-grow-bar { opacity: 1; }
.pf-grow.out { opacity: 0; }
body.pf-leaving .pf-grid.pf-fading { transform: none !important; opacity: 1 !important; transition: none; }
body.pf-leaving .pf-grid.pf-fading .pf-tile:not(.is-picked) { opacity: 0 !important; transform: scale(.985) !important; transition: opacity .55s ease, transform .9s cubic-bezier(.22, 1, .36, 1) !important; }
body.pf-leaving .pf-grid.pf-fading .pf-tile.is-picked { opacity: 1 !important; }
body.pf-leaving .pf-grid.pf-fading .pf-tile.is-picked figure, body.pf-leaving .pf-grid.pf-fading .pf-tile.is-picked .pf-cap { opacity: 0; transition: opacity .2s ease .08s; }
body.pf-leaving .pf-filters, body.pf-leaving .page-head { opacity: 0; transition: opacity .5s ease; }
@media (prefers-reduced-motion: reduce) { .pf-grow, .pf-grow img { transition: none; } }

/* ============ pill arrow v2 (Carson 9/27: "the start a project icon goes outside of the bubble"): the leather dot stays put, centred in the pill;
   on hover the arrow slides out through the dot and a second one slides in behind it, all inside the dot ============ */
.pill i { top: 50%; margin-top: -.825rem; overflow: hidden; color: transparent; transform: none !important; }
.pill i::before, .pill i::after { content: "\2192"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--chalk); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.pill i::after { transform: translateX(-130%); }
.pill:hover i::before { transform: translateX(130%); }
.pill:hover i::after { transform: none; }
.pill.film-view i { top: 50%; margin-top: -.825rem; }
@media (prefers-reduced-motion: reduce) { .pill i::before, .pill i::after { transition: none; } }

/* ============ perf 9/29 (Carson: "the website is really laggy"): every portfolio tile carried a live backdrop blur (30 of them, invisible
   until hover) that the browser recomposited on every scroll frame. The blur now exists only on the tile under the cursor. ============ */
.pf-tile figure::after { backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (hover: hover) and (pointer: fine) { .pf-tile:hover figure::after { backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } }

/* ============ 9/29 page transitions (Carson: "the transitions aren't working"): main's fade-in keyframes (fill-mode both) outranked the
   exit rules, so leaving a page never faded; it froze for a third of a second and cut. The exit now drops the keyframes and fades. ============ */
body.page-exit main, body.page-exit .footer, body.page-leave main, body.page-leave .footer { animation: pageout .34s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes pageout { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { body.page-exit main, body.page-exit .footer, body.page-leave main, body.page-leave .footer { animation: none; opacity: 1; transform: none; } }

/* 9/30 speed: pictures nobody can see yet do not download. Under the intro film the page is invisible, so the work strip and the
   disciplines pictures wait for it (lazy images with display:none are not fetched); the header panel's pictures wait for .media-ready (main.js) */
body.intro-lock .lh-work img, body.intro-lock .lh-disc-media img { display: none; }
.hd-panel:not(.media-ready) .hd-panel-media img { display: none; }

/* 10/4/2026 Carson: "could we blend these into the page like the IG posts so there is not background square?"
   Model views (Fairfax Deck, Fairfax Porch, the Caprock frame) sit on the site's own chalk with no box; a light hero drops the dark
   caption gradient and sets its caption in ink. study.json "hero_light": true -> <figure class="proj-hero is-light">. */
.proj-hero.is-light { background: var(--chalk); }
.proj-hero.is-light::after { display: none; }
.proj-hero.is-light .proj-hero-cap, .proj-hero.is-light .proj-hero-cap h1, .proj-hero.is-light .proj-hero-cap b, .proj-hero.is-light .proj-hero-cap .flip-char { color: var(--ink); text-shadow: none; }

/* 10/4/2026 Carson: "when i select a project ... the name appears on some, and some it lags, some pop in strange" and "when i click next it does some
   weird glitches, scrolls to top". (1) Lenis drives the scroll, so the browser's own smooth scroll must never animate a jump (it was gliding every
   swapped page back to the top). (2) The hero title rises in on its own a beat after the picture lands (main.js capIn), the same on every page. */
html.lenis { scroll-behavior: auto !important; }
.proj-hero .proj-hero-cap, main.proj-appended .proj-hero .proj-hero-cap { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform 1.1s cubic-bezier(.22, 1, .36, 1); }
.proj-hero.cap-in .proj-hero-cap, main.proj-appended .proj-hero.cap-in .proj-hero-cap { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .proj-hero .proj-hero-cap, main.proj-appended .proj-hero .proj-hero-cap { opacity: 1; transform: none; transition: none; } }
/* 10/4: the Next head fades but keeps its exact height (padding-bottom: inherit took it to 0, so the picture jumped up 45px on click) */
.proj-next-head.is-folding { padding-bottom: clamp(2rem, 5vh, 3.4rem); }
/* 10/4: the next project lands under the filter bar, not under the header alone, so the picture grows to (and the hero is) the space below
   the bar. Sized to the header only, the hero ran 44px past the bottom of the screen and cut the title off. */
.proj-next-main.is-opening img { height: calc(100vh - var(--barh, var(--hdh))); }
main.proj-appended .proj-hero { height: calc(100vh - var(--barh, var(--hdh))); }
main.proj-appended .proj-hero-pin { height: calc(100vh - var(--barh, var(--hdh)) + 240px); }


/* 10/16: careers page (Carson: "we need to get a career page set up ... cool job titles so people are intrigued"). The positions sit in
   the FAQ accordion; each summary carries a short tag in khaki, each entry a one-line "where" and an Apply by email button. */
.role-head { display: flex; flex-direction: column; gap: .25rem; margin-right: auto; }
.role-tag { display: block; font-family: 'Roboto', sans-serif; font-weight: 300; font-size: .95rem; letter-spacing: .02em; color: var(--khaki); margin-top: .3rem; text-transform: none; }
.role-group-line { color: var(--ink); max-width: 36rem; margin: .6rem 0 1.8rem; }
.role-where { color: var(--khaki); font-size: .95rem; }
.faq details p .btn { margin-top: .2rem; }


/* 10/31/2026: THE EDGE STRIP (Carson: "I want our top bar to be moved to the side as a clean strip ... actually only a strip when you hover
   over the left side shows up" + "not the biggest fan of pill bars" + "i love the top right corner now"). On screens wider than 900px the
   top bar is gone: the same header markup becomes a strip that slides in from the left edge when the pointer touches it; Start a project
   sits alone top right as a word with a pen-drawn ring (the cover's). Phones keep the burger and the menu sheet. Markup unchanged. */
@media (min-width: 901px) {
  :root { --hdh: 0px; }
  .hd { top: 0; left: 0; right: auto; bottom: 0; width: 15.5rem; height: 100vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2.4rem; padding: 2rem 2rem 2.2rem; background: var(--chalk); border-right: 1px solid var(--warmgray); backdrop-filter: none; -webkit-backdrop-filter: none; transform: translate3d(-101%, 0, 0); transition: transform .75s cubic-bezier(.16, 1, .3, 1); box-shadow: none; }
  .hd.is-hidden { transform: translate3d(-101%, 0, 0); }
  .hd.edge-open, .hd.edge-open.is-hidden, body.hd-panel-open .hd { transform: none; }
  .hd-mark { order: -1; margin-bottom: .4rem; }
  .hd-mark .mark-img { height: 2.6rem; }
  .hd-left, .hd-right { flex-direction: column; align-items: flex-start; gap: 1.15rem; }
  .hd-right { margin-top: 0; }
  .hd-link { font-family: var(--font-display); font-weight: 400; font-size: .98rem; letter-spacing: .16em; }
  .hd-link .rt { height: 1.2em; line-height: 1.2em; }
  .hd-link::after { bottom: -.1rem; }
  .hd-left::after { content: ""; display: block; width: 2.2rem; height: 1px; background: var(--warmgray); margin: .6rem 0 .2rem; }
  /* the hot edge: an invisible strip 26px wide down the left side; a hairline marks it until the strip is open */
  .edge-zone { position: fixed; left: 0; top: 0; bottom: 0; width: 26px; z-index: 339; }
  .edge-zone::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--warmgray); opacity: .9; transition: opacity .4s ease; }
  body.edge-on .edge-zone::after { opacity: 0; }
  /* no pills: Start a project is a word, top right, with the pen ring drawn on hover */
  .hd-cta.pill { position: fixed; top: 1.35rem; right: 1.6rem; z-index: 342; height: auto; padding: .7rem 1.4rem; border: 0; border-radius: 0; background: none; overflow: visible; font-family: var(--font-display); font-weight: 400; font-size: .8rem; letter-spacing: .18em; color: var(--ink); transform: none; }
  .hd-cta.pill span { transform: none; }
  .hd-cta.pill i { position: static; width: auto; height: auto; border-radius: 0; background: none; color: inherit; font-size: .9rem; margin-left: .55rem; display: inline; transform: none; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
  .hd-cta.pill:hover i { transform: translateX(4px); }
  .hd-cta svg.pen { position: absolute; inset: -6px -10px; width: calc(100% + 20px); height: calc(100% + 12px); overflow: visible; pointer-events: none; }
  .hd-cta svg.pen path { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; opacity: .9; transition: stroke-dashoffset 1.1s cubic-bezier(.16, 1, .3, 1); }
  .hd-cta svg.pen path.p2 { stroke-width: .8; opacity: .55; transition-delay: .18s; }
  .hd-cta:hover svg.pen path, .hd-cta.drawn svg.pen path { stroke-dashoffset: 0; }
  body.hd-hidden .hd-cta.pill { opacity: 1; }
  /* the services panel still drops from the top; it now starts flush with the page */
  .hd-panel { padding-top: 0; padding-left: 15.5rem; }
  /* the other pills on the site read as words too */
  .pill:not(.hd-cta) { border: 0; background: none; height: auto; padding: .4rem 0; font-family: var(--font-display); font-weight: 400; font-size: .85rem; letter-spacing: .16em; overflow: visible; }
  .pill:not(.hd-cta) i { position: static; width: auto; height: auto; border-radius: 0; background: none; color: inherit; margin-left: .55rem; display: inline; }
  .pill:not(.hd-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--leather); transition: right .45s cubic-bezier(.16, 1, .3, 1); }
  .pill:not(.hd-cta):hover::after { right: 0; }
  /* pages that left room for the top bar */
  main.proj { padding-top: 0; }
  .proj-bar { top: 0; }
}


/* 10/31/2026: TWO INKS, ONE PAPER (Carson: "keep all text white or chalk on dark backgrounds and dark brown on chalk ... eliminate all other
   colors of text ... background should be chalk throughout the whole website, only have darker backgrounds if its an image or a video").
   Every text colour collapses to leather on chalk and chalk over pictures and film. Dark panels become chalk. Hairlines stay warm grey. */
:root { --ink: #5C3A18; --khaki: #5C3A18; }
body { color: var(--leather); }
.eyebrow, .eyebrow-khaki, .hd-panel-all, .proj-fact b, .pf-filters button, .proj-tile-status, .footer-copy, .footer-links a, .footer-social a, .hd-link, .menu.menu-sheet a, .cindex-tags button, .role-tag, .role-where, .cpic-cap em, .cindex-grid figcaption em, .cdisc p i, .cdisc small { color: var(--leather); }
.section-dark, .lh-atlas, .cta-band, .hd-panel, .menu.menu-sheet { background: var(--chalk); color: var(--leather); }
.section-dark h2, .section-dark h3, .section-dark p, .section-dark .dark-h2, .section-dark .stat-num, .section-dark .eyebrow, .lh-atlas *, .cta-band h2, .cta-band p { color: var(--leather); }
.section-dark a, .lh-atlas a { color: var(--leather); }
.section-dark .eyebrow, .lh-atlas .eyebrow { opacity: .75; }
/* over pictures and the film the words stay chalk */
.proj-hero-cap, .proj-hero-cap *, .film-tag, .film-cap, .cfilm-cap, .cfilm-cap *, .cfilm-paused, .pf-slide-hero *, .cpic-kind, .lh-work-cap, .lh-work-cap *, body.on-film .rail-word, body.on-film .corner-l, body.on-film .pen-pill { color: var(--chalk); }
/* solid buttons: leather on chalk, chalk word */
.btn-solid { background: var(--leather); color: var(--chalk); }


/* 10/31/2026: ONE TYPEFACE (Carson: "shouldn't all areas of the website every section be revised to show laredo text?"). Every label,
   eyebrow, nav item, filter, caption, fact and heading is Laredo Thin (cut from the Laredo file); titles stay Laredo Regular; running
   paragraphs are IBM Plex Mono Light because Laredo has no lowercase. Roboto and Roboto Condensed leave the site. */
@font-face { font-family: 'Laredo Thin'; src: url('assets/fonts/Laredo-Thin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Laredo Light'; src: url('assets/fonts/Laredo-Light.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root { --font-body: 'IBM Plex Mono', 'Courier New', monospace; --font-cond: 'Laredo Thin', 'Laredo', serif; --font-label: 'Laredo Thin', 'Laredo', serif; --font-display: 'Laredo', serif; }
html { font-synthesis: none; }
body { font-family: var(--font-body); font-weight: 300; font-size: 1rem; }
/* labels were set bold and small for Roboto Condensed; Laredo Thin wants normal weight and a touch more size and air */
.eyebrow, .hd-link, .footer-links a, .footer-copy, .pf-filters button, .proj-fact b, .proj-tile-status, .menu-foot a, .hd-panel-all, .lh-work-count, .proj-bar a, .proj-bar button, .btn, .pill, .cta-band .eyebrow, .faq summary, .role-tag, .role-where, .cclose-links a, .cindex-foot a, .cindex-sort button, .cindex-grid figcaption, .cpic-cap, .cpic-kind, .rail-index-word { font-family: 'Laredo Thin', 'Laredo', serif; font-weight: 400; }
.eyebrow { font-size: .78rem; letter-spacing: .22em; }
.hd-link { font-size: .8rem; letter-spacing: .2em; }
.pf-filters button, .proj-bar a, .proj-bar button { font-size: .78rem; letter-spacing: .18em; }
.proj-fact b { font-size: .74rem; letter-spacing: .2em; }
.footer-links a, .footer-copy { font-size: .74rem; letter-spacing: .18em; }
.faq summary { font-size: 1rem; letter-spacing: .14em; }
/* the mono body: a little smaller than Roboto was, and sentence case stays where it was */
p, li, .service-body, .dark-body, .page-head-sub, .faq details p, .proj-text, .proj-fact span, .cta-band p { font-family: var(--font-body); font-weight: 300; }
.page-head-sub { font-size: .95rem; }
.proj-fact span, .proj-fact-val { font-family: 'Laredo Thin', 'Laredo', serif; font-weight: 400; letter-spacing: .12em; }


/* 10/31/2026: THE TYPE RULES (Carson: "titles should be one, navigation should be one, body text should be one ... 2 colours ... all
   Laredo ... 3 boldness ... 2-3 text sizes"). Titles = Laredo Regular, large. Navigation + labels = Laredo Light, small, tracked.
   Body = Laredo Thin, medium. Brown on chalk, chalk on pictures. Documented in HANDOFF section 3 and the voice doc. */
:root { --font-title: 'Laredo', serif; --font-nav: 'Laredo Light', 'Laredo', serif; --font-text: 'Laredo Thin', 'Laredo', serif;
        --size-l: clamp(2.2rem, 4.2vw, 3.4rem); --size-m: 1rem; --size-s: .8rem; }
/* navigation and labels: one level bolder than body (Carson: "slightly hard to read the top text, maybe go one level bolder") */
.eyebrow, .hd-link, .footer-links a, .footer-copy, .pf-filters button, .proj-fact b, .proj-tile-status, .menu-foot a, .hd-panel-all, .lh-work-count, .proj-bar a, .proj-bar button, .btn, .pill, .faq summary, .role-tag, .role-where, .cclose-links a, .cindex-foot a, .cindex-sort button, .cindex-grid figcaption, .cpic-cap, .cpic-kind, .rail-index-word, .rail-word, .pen-pill, .cindex-tags button, .menu.menu-sheet a, .proj-fact span, .proj-fact-val, .cdisc small, .proj-hero-cap .eyebrow, .proj-hero-cap p { font-family: var(--font-nav); font-weight: 400; font-size: var(--size-s); letter-spacing: .2em; text-transform: uppercase; }
.proj-bar a, .proj-bar button, .pf-filters button { font-size: .82rem; }
.rail-word { font-size: .95rem; letter-spacing: .26em; }
/* body: Laredo Thin, medium, caps */
body, p, li, .service-body, .dark-body, .page-head-sub, .faq details p, .proj-text, .cta-band p, .cfilm-cap p, .cindex-search, .proj-desc, .proj-body p { font-family: var(--font-text); font-weight: 400; font-size: var(--size-m); letter-spacing: .06em; text-transform: uppercase; line-height: 1.75; }
/* titles: Laredo Regular, large */
h1, h2, h3, .page-title, .dark-h2, .proj-hero-cap h1, .cclose-ring h2, .cfilm-cap h1, .cdisc p { font-family: var(--font-title); font-weight: 400; text-transform: uppercase; }
.page-title, .proj-hero-cap h1 { font-size: var(--size-l); }

/* 10/31 (late): the strip keeps the mark on top and the project filter bar on one line */
@media (min-width: 901px) { .hd-mark { order: -2; } .hd-left { order: 1; } .hd-right { order: 2; } .hd-burger { order: 3; }
  .pf-filters button, .proj-bar a, .proj-bar button { font-size: .74rem; letter-spacing: .12em; } }

/* 10/31 (late): no Start a project in the top right corner (Carson). On wide screens it lives inside the strip as the last word, like the others. */
@media (min-width: 901px) { .hd-cta.pill { position: static; margin-top: .4rem; padding: .3rem 0; font-size: .8rem; letter-spacing: .2em; } .hd-cta svg.pen { display: none; } }

/* 10/31 (late): BODY = IBM PLEX MONO LIGHT, CAPS (Carson, from the services page: "instead of our thinnest laredo text we should go with
   this font"). Titles Laredo Regular, navigation Laredo Light, body Plex Mono Light. Laredo Thin retires from body text. */
:root { --font-text: 'IBM Plex Mono', 'Courier New', monospace; --font-body: 'IBM Plex Mono', 'Courier New', monospace; }
body, p, li, .service-body, .dark-body, .page-head-sub, .faq details p, .proj-text, .cta-band p, .cfilm-cap p, .cindex-search, .proj-desc, .proj-body p, .svc-stage p, .cindex-none, blockquote, td, dd { font-family: var(--font-text); font-weight: 300; font-size: var(--size-m); letter-spacing: .06em; text-transform: uppercase; line-height: 1.8; }

/* 11/1 THE RAIL ON EVERY PAGE (Carson: "when you click on the portfolio page right now there's no way to get back to the home").
   The same 28px strip as the landing: the wordmark standing on end, a link home, reverse-typing to L S as you scroll down and
   spelling back on the way up; INDEX at the foot, a link to the portfolio. Brown on chalk. main.js writes it on every page but the landing. */
.rail2 { position: fixed; left: 0; top: 0; bottom: 0; width: 28px; z-index: 400; pointer-events: none; }
.rail2 > * { pointer-events: auto; }
.rail2-word { position: absolute; left: 50%; top: 1.6rem; transform: translateX(-50%); writing-mode: vertical-rl; font-family: 'Laredo Light', 'Laredo', serif; font-size: .95rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: pre; }
.rail2-index { position: fixed; left: 14px; bottom: 1.3rem; z-index: 401; transform: translateX(-50%); color: var(--ink); text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.rail2-index span { writing-mode: vertical-rl; font-family: 'Laredo Light', 'Laredo', serif; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; }
.rail2-index svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.rail2-index:hover svg { transform: rotate(-20deg); }
@media (max-width: 1023px) { .rail2 { width: 24px; } .rail2-index { left: 12px; } .rail2-word { font-size: .85rem; } }
@media (max-width: 760px) { .rail2 { width: 18px; } .rail2-index { left: 9px; } .rail2-word { font-size: .72rem; } .rail2-index span { font-size: .55rem; } }