:root {
  --page-bg: #f2f2ef;
  --ink: #161616;
  --muted: #8b8b86;
  --line: rgba(18, 18, 18, 0.10);
  --panel: #ffffff;
  --radius-xl: 30px;
  --radius-lg: 22px;
  --ease: cubic-bezier(.2,.72,.28,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Safety net: the closed mobile offcanvas menu is `position:fixed` with a
   `transform` pushing it off-screen, which some browsers still count toward
   the page's scrollable width, producing a permanent horizontal scrollbar.
   `overflow-y: visible` is explicit on purpose — per spec, setting only
   overflow-x to a non-visible value silently forces the other axis from
   `visible` to `auto`, turning html/body into a second, ambiguous scroll
   container alongside the real viewport. That breaks `position: sticky`
   for anything pinned further down the page (the about panel), since it
   ends up sticking relative to the wrong scroller. */
html, body { overflow-x: hidden; overflow-y: visible; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--page-bg);
  font-family: "Archivo", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   Preloader — covers the page until script.js's `load`-driven
   handler hides it, so the hero/collage images (heavier than the
   rest of the page) don't visibly pop in piece by piece.
   ========================================================= */
.site-preloader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--page-bg);
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
/* Same polaroid recipe as .about-polaroid-portrait in the About collage,
   just not absolutely positioned since it's centered by the flex parent
   here instead of placed inside that collage. */
.preloader-polaroid {
  position: relative;
  margin: 0;
  width: 336px;
  max-width: 78vw;
  background: #fff;
  padding: 16px 16px 36px;
  border-radius: 4px;
  box-shadow: 0 16px 32px rgba(20,20,10,.18);
  animation: preloaderFloat 2.4s ease-in-out infinite;
}
.preloader-tape {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 84px;
  height: 28px;
  background: rgba(196,188,158,.6);
  transform: translateX(-50%) rotate(-3deg);
}
.preloader-polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  background: #ece4d2;
  filter: saturate(.85) contrast(.98);
}
.preloader-polaroid figcaption {
  margin-top: 12px;
  text-align: center;
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: 26px;
  color: #333;
}
@keyframes preloaderFloat {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-6px) rotate(1.5deg); }
}

.preloader-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.preloader-percent {
  font: 700 12px/1 "Archivo", sans-serif;
  letter-spacing: .08em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.preloader-line {
  display: block;
  width: 140px;
  height: 2px;
  background: rgba(18,18,18,.12);
  overflow: hidden;
}
.preloader-line i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--ink);
  transition: width .25s ease-out;
}

.site-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .preloader-polaroid { animation: none; }
  .preloader-line i { transition: none; }
}

.hero-shell {
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% 90%, rgba(255,255,255,.9) 0, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #f5f5f2 0%, #efefeb 100%);
}

.hero-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.hero-container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  min-height: 100svh;
  padding: 24px clamp(18px, 3.3vw, 58px) 18px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.hero-nav { min-height: 54px; position: relative; z-index: 4; }

/* Keep navigation at the earlier, narrower width while the hero stays 1280px. */
.hero-nav-contained {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font: 600 14px/1 "Archivo", sans-serif;
  letter-spacing: -.02em;
}

.brand-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #161616;
  position: relative;
}

.brand-dot::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f4f4f0;
  position: absolute;
  inset: 6px;
}

.nav-pill {
  padding: 5px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(0,0,0,.055);
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(0,0,0,.05);
  backdrop-filter: blur(14px);
}

.nav-pill a {
  padding: 8px 13px;
  border-radius: 999px;
  text-decoration: none;
  color: #555550;
  font-size: 12px;
  transition: background .25s ease, color .25s ease;
}

.nav-pill a:hover { background: #171717; color: #fff; }

.menu-trigger {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255,255,255,.75);
  display: grid;
  place-content: center;
  gap: 5px;
}

.menu-trigger span { width: 16px; height: 1px; background: #111; display: block; }

.hero-content {
  width: min(910px, 100%);
  padding-top: clamp(52px, 9vh, 112px);
  position: relative;
  z-index: 3;
  /* This block is up to 910px wide/tall well beyond its actual text, and
     sat above the photo grid — its empty padding was silently swallowing
     clicks meant for photos underneath (e.g. the Street tile, entirely
     covered by this box). Let clicks pass through to whatever's behind,
     except the real buttons inside it. */
  pointer-events: none;
}
.hero-content .hero-actions {
  pointer-events: auto;
}

.availability-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.05);
  color: #74746e;
  font-size: 11px;
  box-shadow: 0 8px 24px rgba(0,0,0,.035);
}

.availability-chip strong { color: #30302c; font-weight: 600; }

.availability-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8cd465;
  box-shadow: 0 0 0 4px rgba(140,212,101,.13);
}

.hero-title {
  margin: 20px auto 0;
  width: 100%;
  max-width: none;
  font: 400 clamp(48px, 6.2vw, 94px)/.9 "Archivo Black", sans-serif;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.title-muted { color: #a2a29c; }

.hero-copy {
  width: min(575px, 92%);
  margin: 22px auto 0;
  color: #777772;
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.55;
  letter-spacing: -.018em;
}

.hero-actions { margin-top: 25px; }

.hero-btn {
  min-height: 50px;
  padding: 8px 10px 8px 20px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: transform .3s var(--ease), box-shadow .3s ease, background .3s ease, border-color .3s ease;
}

.hero-btn:hover { transform: translateY(-3px); }

.btn-arrow {
  width: 34px;
  height: 34px;
  margin-left: 2px;
  border-radius: 11px;
  background: #fff;
  color: #111;
  display: inline-grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  transition: transform .3s var(--ease);
}

.visual-stage {
  position: absolute;
  inset: 0;
  perspective: 1400px;
  z-index: 2;
}

.work-card,
.portrait-card {
  position: absolute;
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 60px rgba(33,33,28,.10);
  border: 1px solid rgba(255,255,255,.75);
  overflow: hidden;
  will-change: transform;
  transition: transform .3s var(--ease), opacity .3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .visual-stage:has(.portrait-card:hover) .work-card {
    opacity: 0;
    pointer-events: none;
  }
}

.work-card {
  width: 350px;
  height: 249px;
  padding: 16px;
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(8px);
}

.work-card-left {
  left: clamp(-150px, -9vw, -60px);
  top: 30%;
  transform: rotate(6deg) translateZ(-80px);
}

.work-card-midleft {
  left: clamp(-120px, -7vw, -40px);
  top: auto;
  bottom: 24%;
  transform: rotate(-6deg) translateZ(-35px);
  background: #101010;
  padding: 0;
}

.work-card-midright {
  right: clamp(-120px, -7vw, -40px);
  top: auto;
  bottom: 24%;
  z-index: 2;
  transform: rotate(6deg) translateZ(-35px);
  padding: 0;
  background: #e9f5d9;
}

.work-card-right {
  right: clamp(-150px, -9vw, -60px);
  top: 30%;
  transform: rotate(-6deg) translateZ(-80px);
}

.portrait-card {
  width: clamp(220px, 23vw, 310px);
  height: clamp(265px, 35vh, 360px);
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-radius: 28px;
  border: none;
  box-shadow: none;
  z-index: 5;
  overflow: visible;
}

.portrait-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(.76) contrast(.98);
  border-radius: 28px;
}

@media (hover: hover) and (pointer: fine) {
  .portrait-card:hover .portrait-frame { transform: scale(1.015); }
}

.portrait-glow {
  position: absolute;
  inset: 15% 8% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.72), transparent 68%);
  filter: blur(18px);
}

.portrait-badge {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  padding: 11px 13px;
  border-radius: 14px;
  background: rgba(247,247,243,.82);
  border: 1px solid rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 9px;
  color: #777;
}

.portrait-badge strong { color: #272727; font-weight: 600; text-align: right; }

.scroll-hint {
  position: absolute;
  left: clamp(18px, 3.3vw, 58px);
  bottom: 24px;
  color: #93938d;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.scroll-line { width:36px; height:1px; background:#aaa9a3; }

.reveal-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal-item.is-visible { opacity:1; transform:translateY(0); }
.visual-stage.reveal-item { transform: translateY(28px) scale(.98); }
.visual-stage.reveal-item.is-visible { transform: translateY(0) scale(1); }

.mobile-menu { --bs-offcanvas-width: min(86vw, 390px); }
.mobile-nav { gap: 4px; }
.mobile-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); color: #151515; text-decoration:none; font:600 30px/1.05 "Manrope",sans-serif; letter-spacing:-.05em; }

@media (max-width: 991.98px) {
  .hero-container { min-height: 100svh; padding-bottom: 0; }
  .hero-content { padding-top: 56px; }
  .hero-title { font-size: clamp(42px, 8vw, 62px); }
  .portrait-card { width: 255px; height: 320px; }
}

@media (max-width: 767.98px) {
  .hero-container { padding: 16px 14px 0; }
  .hero-nav { min-height: 46px; }
  .hero-content { padding-top: 52px; }
  .hero-title { font-size: clamp(39px, 12vw, 54px); line-height: 1; letter-spacing: -.065em; }
  .hero-copy { width: min(470px, 94%); font-size: 14px; margin-top: 18px; }
  .hero-actions { margin-top: 20px; }
  .hero-btn { min-height: 43px; }
  .portrait-card { width: 220px; height: 286px; }
}

/* Shorter laptop screens (e.g. 1366x768, 1440/1536x800-864): the title,
   copy and buttons were tall enough to run into the bottom-anchored
   portrait card. Tighten the vertical rhythm so they stay clear of it. */
@media (max-height: 820px) and (min-width: 992px) {
  .hero-content { padding-top: clamp(24px, 5vh, 48px); }
  .hero-title { font-size: clamp(38px, 4.6vw, 60px); margin-top: 14px; }
  .hero-copy { margin-top: 12px; }
  .hero-actions { margin-top: 16px; }
  .portrait-card { height: clamp(210px, 28vh, 280px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Smilo-style hero handoff: a short sticky chapter lets the six photographs
   settle into a horizontal bridge before normal page flow carries them away. */
.hero-scroll-scene {
  height: auto;
  position: relative;
  background: var(--page-bg);
  z-index: 3;
}

.hero-scroll-scene .hero-shell {
  position: relative;
  height: auto;
  min-height: 100svh;
}

.hero-scroll-scene.is-scroll-animated .work-card,
.hero-scroll-scene.is-scroll-animated .portrait-card,
.hero-scroll-scene.is-scroll-animated .hero-content,
.hero-scroll-scene.is-scroll-animated .hero-nav,
.hero-scroll-scene.is-scroll-animated .scroll-hint {
  transition: none;
}

@media (max-width: 767.98px) {
  .hero-scroll-scene { height: auto; }
}

.hero-content,
.availability-chip,
.hero-title,
.hero-copy,
.hero-actions,
.scroll-hint,
.hero-nav {
  will-change: transform, opacity;
}

.visual-stage,
.work-card,
.portrait-card {
  will-change: transform, opacity, width, height, border-radius;
}

.portrait-card {
  transform-origin: 50% 58%;
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-scene { height: auto; }
  .hero-scroll-scene .hero-shell { position: relative !important; }
}

/* Real photography cards */
.photo-work-card {
  padding: 0;
  background: #171717;
  border: none;
  border-radius: 4px;
  box-shadow: none;
}

.photo-work-card > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s var(--ease), filter .65s var(--ease);
}

.photo-work-card::after {
  display: none;
}

.photo-card-meta {
  display: none;
}

.photo-work-card:hover > img {
  transform: scale(1.045);
  filter: saturate(1.04) contrast(1.03);
}

/* Six-card contact sheet: additional outer photographs, 3 stacked per side */
.work-card-farleft,
.work-card-farright {
  top: 8%;
  z-index: 1;
  padding: 0;
}
.work-card-farleft {
  left: clamp(-190px, -11vw, -90px);
  transform: rotate(-10deg) translateZ(-120px);
}
.work-card-farright {
  right: clamp(-190px, -11vw, -90px);
  transform: rotate(10deg) translateZ(-120px);
}
@media (max-width: 1199.98px) {
  .work-card-farleft { left: -40px; top: 6%; }
  .work-card-farright { right: -40px; top: 6%; }
}

/* MOCKUP — Option D: "Ethan" reference. Large centered portrait with a
   symmetric 3-and-3 cascade fanning up and out on either side. */
.portrait-card {
  width: clamp(240px, 24vw, 320px);
  height: clamp(300px, 38vh, 400px);
  left: 50%;
  top: auto;
  bottom: 0;
  transform: translateX(-50%);
}

.work-card-farleft,
.work-card-left,
.work-card-midleft,
.work-card-midright,
.work-card-right,
.work-card-farright {
  bottom: auto;
  right: auto;
}
.work-card-farleft  { width: 330px; height: 226px; left: 2%;  top: 26%; z-index: 1; transform: translate(-50%, -50%) rotate(-7deg); }
.work-card-left     { width: 330px; height: 226px; left: 2%;  top: 52%; z-index: 2; transform: translate(-50%, -50%) rotate(5deg); }
.work-card-midleft  { width: 330px; height: 226px; left: 2%;  top: 78%; z-index: 3; transform: translate(-50%, -50%) rotate(-4deg); }
.work-card-midright { width: 330px; height: 226px; left: 98%; top: 78%; z-index: 3; transform: translate(-50%, -50%) rotate(4deg); }
.work-card-right    { width: 330px; height: 226px; left: 98%; top: 52%; z-index: 2; transform: translate(-50%, -50%) rotate(-5deg); }
.work-card-farright { width: 330px; height: 226px; left: 98%; top: 26%; z-index: 1; transform: translate(-50%, -50%) rotate(7deg); }

/* =========================================================
   Editorial controls + navigation refresh
   ========================================================= */
html { scroll-behavior: auto; }

/* Hero heading now mirrors the second-panel editorial heading. */
.hero-title {
  font-family: "Archivo Black", "Archivo", sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: -.045em;
}
.hero-title .title-muted { color: #a2a29c; }

/* Squared segmented navigation inspired by the featured-theme treatment. */
.hero-nav-contained {
  max-width: 1120px;
  padding-top: 2px;
}
.hero-nav {
  gap: 18px;
}
.brand-mark {
  min-height: 48px;
  padding: 0 18px;
  gap: 11px;
  background: rgba(246,245,241,.92);
  border: 1px solid rgba(17,17,17,.78);
  color: #151515;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 10px;
  font-weight: 700;
  backdrop-filter: blur(12px);
}
.brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 0;
  background: #151515;
}
.brand-dot::after { display: none; }

.nav-pill {
  padding: 0;
  gap: 0 !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
}
.nav-pill a {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(17,17,17,.78);
  border-right: 0;
  border-radius: 0;
  background: rgba(246,245,241,.92);
  color: #171717;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.nav-pill a:last-child {
  border-right: 1px solid rgba(17,17,17,.78);
  background: #171717;
  color: #fff;
}
.nav-pill a:hover {
  background: #171717;
  color: #fff;
  transform: translateY(-2px);
}
.nav-pill a:last-child:hover { background: #333; }

/* Hero CTA pair uses the same hard-edged, split editorial language. */
.hero-actions {
  gap: 0 !important;
}
.hero-btn {
  min-height: 50px;
  padding: 0 20px;
  border-radius: 0 !important;
  border: 1px solid rgba(17,17,17,.8);
  box-shadow: none !important;
  text-decoration: none;
  font: 700 10px/1 "Archivo", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.hero-btn + .hero-btn { margin-left: -1px; }
.hero-btn-light {
  min-width: 165px;
  background: rgba(246,245,241,.94);
  color: #171717;
}
.hero-btn-dark {
  min-width: 190px;
  background: #171717;
  color: #fff;
}
.hero-btn:hover { transform: translateY(-3px); }
.hero-btn-light:hover { background: #fff; color: #111; }
.hero-btn-dark:hover { background: #303030; color: #fff; }
.hero-btn .btn-arrow {
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  display: inline-block;
  font-size: 15px;
  transition: transform .3s var(--ease);
}
.hero-btn-dark:hover .btn-arrow { transform: translate(3px,-3px); }

@media (max-width: 767.98px) {
  .hero-nav { gap: 10px; }
  .brand-mark {
    min-height: 42px;
    padding: 0 12px;
    font-size: 8px;
    letter-spacing: .09em;
  }
  .brand-dot { width: 8px; height: 8px; }
  .menu-trigger {
    width: 42px;
    height: 42px;
    border-radius: 0;
    border: 1px solid rgba(17,17,17,.78);
    background: rgba(246,245,241,.92);
  }
  .hero-title {
    letter-spacing: -.045em !important;
  }
  .hero-actions {
    width: min(100%, 360px);
    margin-inline: auto;
  }
  .hero-btn {
    min-height: 46px;
    padding: 0 14px;
    font-size: 8px;
    letter-spacing: .13em;
    flex: 1 1 0;
    min-width: 0;
  }
  .hero-btn-dark { min-width: 0; }
}

/* Mobile hero heading fit — keep full words inside viewport */
@media (max-width: 767.98px) {
  .hero-title {
    width: 100%;
    max-width: 100%;
    padding-inline: 2px;
    font-size: clamp(32px, 10.1vw, 43px);
    line-height: .98;
    letter-spacing: -.055em;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 389.98px) {
  .hero-title {
    font-size: clamp(30px, 9.8vw, 38px);
    letter-spacing: -.05em;
  }
}

/* Persistent navigation return after the hero navigation exits */
.sticky-return-nav {
  position: fixed;
  top: 18px;
  left: 50%;
  width: min(calc(100% - 36px), 1120px);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(-50%, -135%, 0);
  transition: transform .68s cubic-bezier(.22,1,.36,1), opacity .32s ease, visibility 0s linear .68s;
  will-change: transform, opacity;
}
.sticky-return-nav.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0);
  transition: transform .68s cubic-bezier(.22,1,.36,1), opacity .32s ease, visibility 0s;
}
.sticky-return-nav .hero-nav { width: 100%; }
@media (max-width: 767.98px) {
  .sticky-return-nav { top: 12px; width: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-return-nav { transition: none !important; }
}

/* Mobile menu: compact editorial overlay */
@media (max-width: 767.98px) {
  .mobile-menu {
    --bs-offcanvas-width: 100vw;
    width: 100vw !important;
    height: 100dvh;
    border: 0 !important;
    background: rgba(247,246,242,.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .mobile-menu .offcanvas-header {
    min-height: 88px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(21,21,21,.12);
  }
  .mobile-menu .offcanvas-title {
    font: 700 11px/1 "Archivo", sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  .mobile-menu .btn-close {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #151515;
    border-radius: 0;
    background-size: 13px;
    opacity: 1;
  }
  .mobile-menu .offcanvas-body {
    padding: 34px 22px 24px;
  }
  .mobile-nav { gap: 0; }
  .mobile-nav a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 19px 0;
    border-bottom: 1px solid rgba(21,21,21,.16);
    color: #151515;
    font: 900 clamp(34px, 11vw, 52px)/.95 "Archivo Black", "Archivo", sans-serif;
    letter-spacing: -.055em;
    text-transform: uppercase;
  }
  .mobile-nav a::after {
    content: "↗";
    font: 400 18px/1 "Archivo", sans-serif;
    letter-spacing: 0;
    transform: translate(-8px, 4px);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
  }
  .mobile-nav a:active::after,
  .mobile-nav a:focus-visible::after {
    opacity: 1;
    transform: translate(0, 0);
  }
  .mobile-menu .offcanvas-body > p {
    max-width: 290px;
    padding-top: 24px;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: .01em;
  }
  .offcanvas-backdrop.show { opacity: .35; }
}


/* Single mobile menu control: hamburger morphs into X */
@media (max-width: 767.98px) {
  .menu-trigger {
    position: relative;
    z-index: 1065;
    gap: 0;
  }
  .menu-trigger span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 1px;
    margin: 0;
    transform-origin: center;
    transition: transform .32s cubic-bezier(.22,.61,.36,1), opacity .22s ease;
  }
  .menu-trigger span:first-child { transform: translate(-50%, -4px); }
  .menu-trigger span:last-child { transform: translate(-50%, 4px); }
  .menu-trigger.is-menu-open span:first-child { transform: translate(-50%, 0) rotate(45deg); }
  .menu-trigger.is-menu-open span:last-child { transform: translate(-50%, 0) rotate(-45deg); }

  /* The overlay no longer needs its own close control. */
  .mobile-menu .offcanvas-header { padding-right: 76px; }
  .mobile-menu .btn-close { display: none !important; }
}

/* Keep the active mobile menu trigger above the full-screen offcanvas. */
@media (max-width: 767.98px) {
  body > .menu-trigger.menu-overlay-toggle {
    position: fixed !important;
    top: var(--menu-fixed-top) !important;
    left: var(--menu-fixed-left) !important;
    right: auto !important;
    width: var(--menu-fixed-width) !important;
    height: var(--menu-fixed-height) !important;
    margin: 0 !important;
    z-index: 2005 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}

/* Hero portrait: custom irvinPH image, tighter top crop */
.hero-scroll-scene .portrait-frame {
  object-position: center 58%;
  filter: saturate(.86) contrast(.99);
}

/* New second panel — deliberately isolated from the previous theme panel. */
.perspectives-panel {
  min-height: 100svh;
  padding: clamp(64px, 8vh, 92px) 20px 100px;
  background: #f1f0eb;
  color: #111;
  position: relative;
}

.perspectives-panel__intro {
  width: min(820px, 100%);
  margin: 0 auto;
  text-align: center;
}

.perspectives-panel__kicker {
  margin: 0 0 18px;
  color: #716e68;
  font: 700 11px/1 "Archivo", sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.perspectives-panel__intro h2 {
  margin: 0;
  color: #080808;
  font: 400 clamp(34px, 3.35vw, 52px)/.98 "Archivo Black", sans-serif;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.perspectives-panel__intro h2 span { color: #aaa9a3; }

.perspectives-panel__body {
  width: min(680px, 94%);
  margin: 28px auto 0;
  color: #66635e;
  font-size: clamp(12px, .95vw, 14px);
  line-height: 1.65;
  letter-spacing: -.012em;
}

/* A tight, compressed pile instead of a tidy grid — each photo sits mostly
   behind the next, large and heavily overlapping, like a dropped stack of
   prints. Which photo sits in which slot is reassigned by script.js when a
   trigger below is clicked, sliding that photo to the front (slot-0). */
.perspectives-grid {
  width: min(820px, calc(100% - 36px));
  height: clamp(520px, 48vw, 660px);
  margin: clamp(28px, 3vh, 44px) auto 0;
  position: relative;
  z-index: 2;
}
.perspectives-grid article {
  position: absolute;
  width: 75%;
  aspect-ratio: 1.38 / 1;
  overflow: hidden;
  border-radius: 18px;
  background: #171717;
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 18px 42px rgba(25,25,21,.16);
  transition: left .5s var(--ease), top .5s var(--ease), transform .5s var(--ease), box-shadow .35s var(--ease), z-index 0s;
}
.perspectives-grid .stack-slot-0 { left: 12.5%; top: 6%;  z-index: 10; transform: rotate(0deg); }
.perspectives-grid .stack-slot-1 { left: 2%;    top: 11%; z-index: 9;  transform: rotate(-8deg); }
.perspectives-grid .stack-slot-2 { left: 23%;   top: 11%; z-index: 8;  transform: rotate(8deg); }
.perspectives-grid .stack-slot-3 { left: 8%;    top: 16%; z-index: 7;  transform: rotate(-4deg); }
.perspectives-grid .stack-slot-4 { left: 17%;   top: 16%; z-index: 6;  transform: rotate(4deg); }
.perspectives-grid .stack-slot-5 { left: 12.5%; top: 21%; z-index: 5;  transform: rotate(2deg); }
.perspectives-grid .stack-slot-6 { left: 4%;    top: 24%; z-index: 4;  transform: rotate(-10deg); }
.perspectives-grid .stack-slot-7 { left: 21%;   top: 24%; z-index: 3;  transform: rotate(10deg); }
.perspectives-grid .stack-slot-8 { left: 9%;    top: 27%; z-index: 2;  transform: rotate(-6deg); }
.perspectives-grid .stack-slot-9 { left: 16%;   top: 27%; z-index: 1;  transform: rotate(6deg); }
.perspectives-grid img { width: 100%; height: 100%; display: block; object-fit: cover; }
.perspectives-grid article::after {
  content: "";
  position: absolute;
  inset: 52% 0 0;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
}

/* Small trigger row below the stack: click one to bring its photo forward.
   Needs its own stacking context above the grid — the stack's rotated,
   overflow:visible articles can bleed down far enough to sit on top of it
   and swallow clicks otherwise. */
.perspectives-triggers {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: clamp(28px, 4vh, 44px) auto 0;
  position: relative;
  z-index: 20;
}
.perspectives-trigger {
  appearance: none;
  width: 64px;
  height: 48px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: #171717;
  cursor: pointer;
  opacity: .55;
  transition: opacity .3s ease, border-color .3s ease, transform .3s var(--ease);
}
.perspectives-trigger img { width: 100%; height: 100%; display: block; object-fit: cover; }
.perspectives-trigger:hover { opacity: .85; transform: translateY(-2px); }
.perspectives-trigger.is-active { opacity: 1; border-color: #111; }
.perspectives-grid span,
.perspectives-grid b {
  position: absolute;
  bottom: 12px;
  z-index: 2;
  color: #fff;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.perspectives-grid span { left: 14px; font-weight: 700; }
.perspectives-grid b { right: 14px; font-weight: 600; }

/* Smilo-style two-panel scroll chapter. */
.hero-scroll-scene {
  height: 200svh;
  z-index: 3;
  background: transparent !important;
  /* Only the pinned hero-shell (below) needs clicks. Without this, the
     scene's own box — which spans the full 200svh and outlives hero-shell's
     100svh sticky window — sits above panel 2 (a lower z-index sibling, so
     its own z-index can't win) for the back half of the scroll and eats
     clicks meant for it, e.g. the perspectives triggers. */
  pointer-events: none;
}
.hero-scroll-scene .hero-shell {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 100svh;
  background: none;
  pointer-events: auto;
}
.hero-scroll-scene .hero-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 50% 90%,rgba(255,255,255,.9) 0,rgba(255,255,255,0) 42%),linear-gradient(180deg,#f5f5f2 0%,#efefeb 100%);
  opacity: var(--hero-surface-opacity, 1);
  pointer-events: none;
}
.perspectives-panel {
  margin-top: -100svh;
  z-index: 2;
}
.hero-scroll-scene.is-grid-transition .work-card {
  transition: none !important;
  will-change: translate, scale, rotate;
}
.grid-transition-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: visible;
  pointer-events: none;
}
.grid-transition-card {
  position: absolute !important;
  margin: 0 !important;
  transform: none;
  transform-origin: 0 0;
  transition: none !important;
  will-change: transform;
  pointer-events: none;
}
.hero-scroll-scene.is-grid-transition .hero-content,
.hero-scroll-scene.is-grid-transition .portrait-card,
.hero-scroll-scene.is-grid-transition .hero-nav,
.hero-scroll-scene.is-grid-transition .scroll-hint { transition: none !important; }

/* Mobile and tablet: no pinned/scroll-driven handoff — the six hero photos
   are hidden in panel 1, and panel 2's gallery is plain static content. */
@media (max-width: 991.98px) {
  .work-card-farleft,
  .work-card-left,
  .work-card-midleft,
  .work-card-midright,
  .work-card-right,
  .work-card-farright { display: none; }
  .hero-scroll-scene { height: auto; }
  .hero-scroll-scene .hero-shell { position: relative; height: auto; }
  .perspectives-panel { margin-top: 0; }

  /* Small tablet and phone: keep the stacked pile (no clicky trigger row —
     swipe the stack left/right to bring the next/previous photo forward). */
  .perspectives-triggers { display: none; }
  .perspectives-grid { touch-action: pan-y; }
}
@media (max-width: 767.98px) {
  .perspectives-grid {
    width: calc(100% - 28px);
    height: clamp(300px, 88vw, 380px);
    margin-top: 44px;
  }
  .perspectives-grid article { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-scene { height: auto; }
  .hero-scroll-scene .hero-shell { position: relative; height: auto; }
  .perspectives-panel { margin-top: 0; }
}

@media (max-width: 767.98px) {
  .perspectives-panel { padding: 58px 16px 80px; }
  .perspectives-panel__kicker { margin-bottom: 14px; font-size: 9px; }
  .perspectives-panel__body { margin-top: 22px; line-height: 1.55; }
}

/* Match the hero heading/copy sizing exactly below desktop too (mirrors
   the .hero-title/.hero-copy mobile values, which apply across the whole
   sub-992px range via their own overrides). */
@media (max-width: 991.98px) {
  .perspectives-panel__intro h2 { font-size: clamp(34px, 7vw, 52px); line-height: .98; }
  .perspectives-panel__body { font-size: 14px; }
}

/* =========================================================
   About panel — scrapbook collage: Polaroids, sticky notes and
   doodled badges scattered around a central portrait.
   ========================================================= */
.about-panel {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 90px clamp(20px, 5vw, 90px) 110px;
  text-align: center;
  overflow: hidden;
}

/* Heading/tagline sizing matches .hero-title/.hero-copy and
   .perspectives-panel__intro h2/__body exactly, at every breakpoint. */
.about-heading {
  margin: 0;
  color: #080808;
  font: 400 clamp(34px, 3.35vw, 52px)/.98 "Archivo Black", sans-serif;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.about-tagline {
  width: min(575px, 92%);
  margin: 22px auto 54px;
  color: #777772;
  font-size: clamp(12px, .95vw, 14px);
  line-height: 1.55;
  letter-spacing: -.018em;
}

@media (max-width: 991.98px) {
  .about-heading { font-size: clamp(34px, 7vw, 52px); }
  .about-tagline { font-size: 14px; }
}

.about-collage {
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: 1300px;
  height: clamp(560px, 54vw, 700px);
}

.about-polaroid {
  position: absolute;
  margin: 0;
  background: #fff;
  padding: 12px 12px 32px;
  border-radius: 4px;
  box-shadow: 0 16px 32px rgba(20,20,10,.16);
}

.about-polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #ece4d2;
  filter: saturate(.85) contrast(.98);
}

.about-polaroid figcaption {
  margin-top: 10px;
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: 20px;
  color: #333;
}

.about-badge {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3c4d34;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
  z-index: 2;
}

.about-polaroid-explore { left: -3%; top: 10%; width: 170px; transform: rotate(-4deg); z-index: 2; }
.about-polaroid-discover { left: 89%; top: 8%; width: 180px; transform: rotate(4deg); z-index: 2; }
.about-polaroid-discover .about-badge { top: auto; bottom: -16px; }
.about-polaroid-wander { left: 93%; top: 72%; width: 155px; transform: rotate(-3deg); z-index: 2; }
.about-polaroid-portrait {
  left: 50%;
  top: 48%;
  width: min(320px, 26vw);
  transform: translate(-50%, -50%);
  z-index: 3;
}

.about-tape {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 70px;
  height: 26px;
  background: rgba(196,188,158,.6);
  transform: translateX(-50%) rotate(-3deg);
  z-index: 4;
}

.about-note {
  position: absolute;
  background: #f7f5ee;
  padding: 26px 20px 20px;
  border-radius: 2px;
  box-shadow: 0 14px 26px rgba(20,20,10,.12);
  font-family: "Caveat", cursive;
  text-align: left;
}

.about-note-quote {
  /* Anchored to the collage's horizontal center (like the portrait) so the
     gap to it stays constant instead of widening on larger screens. */
  left: 50%;
  top: 32%;
  width: 150px;
  transform: translateX(calc(-100% - 175px)) rotate(-3deg);
  background-image: repeating-linear-gradient(#f7f5ee 0 27px, #e4e1d4 27px 28px);
}

.about-note-quote p {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: #1c1c1c;
}

.about-note-doodle {
  position: absolute;
  right: 14px;
  bottom: 10px;
}

.about-note-info {
  /* Anchored to the collage's horizontal center so its gap to the
     portrait matches the left-side notes at every screen size. */
  left: 50%;
  top: 50%;
  width: 195px;
  transform: translateX(175px) rotate(2deg);
  background: #dde0cf;
  font-family: "Archivo", sans-serif;
  padding: 30px 18px 18px;
}

.about-pin {
  position: absolute;
  left: 20px;
  top: -18px;
  transform: rotate(-25deg);
}

.about-note-info p { margin: 0 0 12px; font-size: 13px; }
.about-note-info p:last-child { margin-bottom: 0; }
.about-note-info span { display: block; color: #5c6151; font-weight: 600; margin-bottom: 2px; }
.about-note-info strong { font-size: 15px; color: #1c1c1c; }

.about-checklist {
  position: absolute;
  /* Anchored to the collage's horizontal center, same technique as the
     notes above, to keep a constant gap to the portrait. */
  left: 50%;
  top: 70%;
  transform: translateX(calc(-100% - 175px));
  display: flex;
  align-items: center;
  gap: 12px;
}

.about-checklist .about-badge { position: static; }

.about-checklist ul {
  list-style: none;
  margin: 0;
  padding: 12px 16px;
  background: #f7f5ee;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(20,20,10,.1);
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: 19px;
  text-align: left;
}

.about-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1c1c1c;
}

.about-checklist li + li { margin-top: 4px; }

.about-checklist li::before {
  content: "\2713";
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: #3c4d34;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 700;
}

/* Reuses the site's .hero-btn / .hero-btn-dark styling — only the extra
   top margin needed to sit correctly below the collage. */
/* Reuses .hero-actions/.hero-btn from the hero — only the extra bottom
   margin needed to sit correctly above the collage. */
.about-actions { margin-bottom: 54px; }

@media (max-width: 991.98px) {
  /* Explore/Discover/Wander are a desktop-only flourish — drop them on
     tablet and mobile to keep the collage simple and uncluttered. */
  .about-polaroid-explore,
  .about-polaroid-discover,
  .about-polaroid-wander { display: none; }
  .about-note-quote { top: 34%; width: 135px; transform: translateX(calc(-100% - 148px)) rotate(-3deg); }
  .about-note-quote p { font-size: 16px; }
  .about-note-info { top: 48%; width: 175px; transform: translateX(148px) rotate(2deg); }
  .about-checklist { top: 68%; transform: translateX(calc(-100% - 148px)); }
  .about-checklist ul { padding: 10px 14px; font-size: 15px; }
}

@media (max-width: 767.98px) {
  .about-panel { padding: 64px 16px 70px; }
  .about-collage {
    position: static;
    height: auto;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
  }
  .about-polaroid,
  .about-note,
  .about-checklist {
    /* Stay relative (not static) so the badge/tape/pin children inside
       each card still anchor to their own card instead of the section. */
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    transform: none !important;
    width: min(260px, 80%);
    margin-inline: auto;
  }
  .about-note-quote { background-image: repeating-linear-gradient(#f7f5ee 0 27px, #e4e1d4 27px 28px); }
}

/* =========================================================
   About panel — pinned scroll sequence (desktop only)
   Heading/tagline/buttons stay put while the collage reveals in
   stages: the portrait is static throughout, the three photos pop
   in one by one, then the sticky notes/checklist zoom in. script.js
   drives the --phy/--phs/--stk custom properties.
   ========================================================= */
.about-scroll-scene { position: relative; }

@media (min-width: 992px) {
  .about-scroll-scene { height: 420svh; }

  /* Pinned via JS (position toggled between static/fixed/absolute based on
     precise scroll math) rather than CSS `position: sticky` — this site's
     Lenis smooth-scroll + the global overflow-x:hidden safety net turn
     html/body into an ambiguous second scroll container, which makes
     native sticky positioning unreliable here. Manual pinning sidesteps
     that entirely. */
  .about-scroll-scene .about-panel {
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    z-index: 5;
  }
  .about-scroll-scene .about-panel.is-pinned {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
  }
  .about-scroll-scene .about-panel.is-released {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
  }

  .about-scroll-scene .about-tagline { margin-bottom: 28px; }
  .about-scroll-scene .about-actions { margin-bottom: 28px; }

  .about-scroll-scene .about-collage {
    height: clamp(400px, 44vh, 560px);
    perspective: 900px;
  }

  .about-scroll-scene .about-collage > * { opacity: 0; }

  /* Pops in like animate.css's jackInTheBox — springs up from tiny and
     tilted, overshoots with a couple of rotational wobbles, then settles
     flat at full size. script.js drives --pjscale/--pjrot through that
     same 0% / 50% / 70% / 100% keyframe shape via scroll progress. */
  .about-scroll-scene .about-polaroid-portrait {
    transform-origin: center bottom;
    transform: translate(-50%, -50%) scale(var(--pjscale, .1)) rotate(var(--pjrot, 30deg));
  }

  .about-scroll-scene .about-polaroid-explore {
    transform: translateY(var(--phy, 26px)) rotate(-4deg) scale(var(--phs, .88));
  }
  .about-scroll-scene .about-polaroid-discover {
    transform: translateY(var(--phy, 26px)) rotate(4deg) scale(var(--phs, .88));
  }
  .about-scroll-scene .about-polaroid-wander {
    transform: translateY(var(--phy, 26px)) rotate(-3deg) scale(var(--phs, .88));
  }

  .about-scroll-scene .about-note-quote {
    transform: translateX(calc(-100% - 175px)) scale(var(--stk, .3)) rotate(-3deg);
  }
  .about-scroll-scene .about-note-info {
    transform: translateX(175px) scale(var(--stk, .3)) rotate(2deg);
  }
  .about-scroll-scene .about-checklist {
    transform: translateX(calc(-100% - 175px)) scale(var(--stk, .3));
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-scroll-scene { height: auto !important; }
  .about-scroll-scene .about-panel { position: relative !important; height: auto !important; overflow: visible !important; }
  .about-scroll-scene .about-collage > * { opacity: 1 !important; }
}


/* =========================================================
   Reference hero layout — floating tiles around centered copy
   ========================================================= */
@media (min-width: 992px) {
  .hero-content {
    width: min(560px, 46vw);
    padding-top: clamp(180px, 31vh, 320px);
    margin-inline: auto;
  }
  .hero-title {
    max-width: 560px;
    margin-top: 18px;
    font-size: clamp(34px, 3.35vw, 52px) !important;
    line-height: .98;
    letter-spacing: -.045em;
  }
  .hero-copy {
    width: min(470px, 92%);
    margin-top: 22px;
    font-size: clamp(12px, .95vw, 14px);
  }
  .hero-actions { margin-top: 22px; }

  /* The reference uses clean image tiles with no caption bars. */
  .hero-scroll-scene .photo-card-meta { display: none; }
  .hero-scroll-scene .work-card,
  .hero-float-extra {
    padding: 0;
    background: #deded8;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 18px 45px rgba(25,25,20,.10);
    overflow: hidden;
  }
  .hero-scroll-scene .work-card img,
  .hero-float-extra img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  /* Match the eight floating positions in the supplied mockup. */
  .hero-scroll-scene .work-card-farleft {
    width: clamp(118px, 9.2vw, 150px); height: clamp(118px, 9.2vw, 150px);
    left: 6.5%; top: 27.3%; z-index: 2; transform: none;
  }
  .hero-scroll-scene .work-card-left {
    width: clamp(158px, 12vw, 196px); height: clamp(158px, 12vw, 196px);
    left: 14.0%; top: 11.2%; z-index: 2; transform: none;
  }
  .hero-scroll-scene .work-card-midleft {
    width: clamp(176px, 12.8vw, 210px); height: clamp(176px, 12.8vw, 210px);
    left: 6.0%; top: 57.3%; z-index: 2; transform: none;
  }
  .hero-scroll-scene .work-card-midright {
    width: clamp(158px, 11.8vw, 192px); height: clamp(158px, 11.8vw, 192px);
    left: 82.0%; top: 57.5%; z-index: 2; transform: none;
  }
  .hero-scroll-scene .work-card-right {
    width: clamp(162px, 11.9vw, 194px); height: clamp(162px, 11.9vw, 194px);
    left: 87.0%; top: 20.4%; z-index: 2; transform: none;
  }
  .hero-scroll-scene .work-card-farright {
    width: clamp(136px, 10vw, 164px); height: clamp(136px, 10vw, 164px);
    left: 74.5%; top: 12.1%; z-index: 2; transform: none;
  }
  .hero-float-extra {
    position: absolute;
    z-index: 2;
    will-change: transform;
  }
  .hero-float-extra-left {
    width: clamp(126px, 9.4vw, 154px); height: clamp(126px, 9.4vw, 154px);
    left: 19.0%; top: 75.8%;
  }
  .hero-float-extra-right {
    width: clamp(124px, 9.2vw, 150px); height: clamp(124px, 9.2vw, 150px);
    left: 86.0%; top: 75.0%;
  }

  /* The sports reference has no large central portrait; keep the focus on copy. */
  .hero-scroll-scene .portrait-card { display: none; }
}

@media (max-width: 991.98px) {
  .hero-float-extra { display: none; }
  .hero-title { font-size: clamp(34px, 7vw, 52px) !important; }
}

/* ProsPick first-panel inspired desktop photo map */
@media (min-width: 992px) {
  .hero-scroll-scene .work-card-farleft {
    width: clamp(145px,10.5vw,180px); height: clamp(145px,10.5vw,180px);
    left: 7.5%; top: 34%;
  }
  .hero-scroll-scene .work-card-left {
    width: clamp(180px,13vw,220px); height: clamp(180px,13vw,220px);
    left: 15.5%; top: 9%;
  }
  .hero-scroll-scene .work-card-midleft {
    width: clamp(185px,13.5vw,230px); height: clamp(185px,13.5vw,230px);
    left: 8.5%; top: 66%;
  }
  .hero-scroll-scene .work-card-farright {
    width: clamp(170px,12vw,205px); height: clamp(170px,12vw,205px);
    left: 69%; top: 8%;
  }
  .hero-scroll-scene .work-card-right {
    width: clamp(178px,12.8vw,215px); height: clamp(178px,12.8vw,215px);
    left: 88%; top: 19%;
  }
  .hero-scroll-scene .work-card-midright {
    width: clamp(180px,13vw,220px); height: clamp(180px,13vw,220px);
    left: 80%; top: 49%;
  }
  .hero-float-extra-left {
    width: clamp(155px,11vw,190px); height: clamp(155px,11vw,190px);
    left: 20%; top: 73%;
  }
  .hero-float-extra-right {
    width: clamp(165px,11.8vw,200px); height: clamp(165px,11.8vw,200px);
    left: 89%; top: 70%;
  }
}

/* Alternate asymmetrical hero arrangement */
@media (min-width: 992px) {
  .hero-scroll-scene .work-card-left { left: 10.5%; top: 8%; }
  .hero-scroll-scene .work-card-farleft { left: 2.5%; top: 39%; }
  .hero-scroll-scene .work-card-midleft { left: 12.5%; top: 67%; }
  .hero-float-extra-left { left: 27%; top: 79%; }

  .hero-scroll-scene .work-card-farright { left: 73%; top: 5%; }
  .hero-scroll-scene .work-card-right { left: 91%; top: 28%; }
  .hero-scroll-scene .work-card-midright { left: 76%; top: 57%; }
  .hero-float-extra-right { left: 91%; top: 76%; }
}

/* More scattered desktop hero composition */
@media (min-width: 992px) {
  .hero-scroll-scene .work-card-left { left: 13%; top: 4%; transform: translate(-50%,-50%) rotate(-4deg); }
  .hero-scroll-scene .work-card-farleft { left: 1.5%; top: 34%; transform: translate(-50%,-50%) rotate(5deg); }
  .hero-scroll-scene .work-card-midleft { left: 8%; top: 72%; transform: translate(-50%,-50%) rotate(-6deg); }
  .hero-float-extra-left { left: 29%; top: 86%; transform: translate(-50%,-50%) rotate(4deg); }

  .hero-scroll-scene .work-card-farright { left: 69%; top: 9%; transform: translate(-50%,-50%) rotate(5deg); }
  .hero-scroll-scene .work-card-right { left: 94%; top: 24%; transform: translate(-50%,-50%) rotate(-5deg); }
  .hero-scroll-scene .work-card-midright { left: 78%; top: 61%; transform: translate(-50%,-50%) rotate(4deg); }
  .hero-float-extra-right { left: 93%; top: 82%; transform: translate(-50%,-50%) rotate(-4deg); }
}

/* Exact reference screenshot positioning - final override */
@media (min-width: 992px) {
  .hero-scroll-scene .work-card,
  .hero-scroll-scene .hero-float-extra { transform: none !important; }

  /* upper-left small */
  .hero-scroll-scene .work-card-farleft {
    width: clamp(100px, 7.0vw, 122px); height: clamp(100px, 7.0vw, 122px);
    left: 25.7%; top: 23.0%;
  }
  /* upper-left large */
  .hero-scroll-scene .work-card-left {
    width: clamp(128px, 8.2vw, 145px); height: clamp(128px, 8.2vw, 145px);
    left: 32.2%; top: 11.8%;
  }
  /* lower-left large */
  .hero-scroll-scene .work-card-midleft {
    width: clamp(150px, 9.2vw, 165px); height: clamp(150px, 9.2vw, 165px);
    left: 25.4%; top: 55.8%;
  }
  /* lower-left small */
  .hero-float-extra-left {
    width: clamp(104px, 6.5vw, 116px); height: clamp(104px, 6.5vw, 116px);
    left: 36.0%; top: 73.8%;
  }

  /* upper-right inner */
  .hero-scroll-scene .work-card-farright {
    width: clamp(106px, 6.8vw, 120px); height: clamp(106px, 6.8vw, 120px);
    left: 56.2%; top: 12.9%;
  }
  /* upper-right outer */
  .hero-scroll-scene .work-card-right {
    width: clamp(130px, 8.0vw, 144px); height: clamp(130px, 8.0vw, 144px);
    left: 65.9%; top: 20.7%;
  }
  /* mid/lower-right */
  .hero-scroll-scene .work-card-midright {
    width: clamp(126px, 7.6vw, 138px); height: clamp(126px, 7.6vw, 138px);
    left: 61.8%; top: 56.0%;
  }
  /* bottom-right small */
  .hero-float-extra-right {
    width: clamp(98px, 6.1vw, 110px); height: clamp(98px, 6.1vw, 110px);
    left: 64.9%; top: 72.7%;
  }
}

/* FINAL FIX: reference coordinates are viewport-based, not 1280px container-based. */
@media (min-width: 992px) {
  .hero-scroll-scene .visual-stage {
    width: 100vw;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* CENTERING FIX: keep the full-viewport photo map centered even when reveal animation controls transform. */
@media (min-width: 992px) {
  .hero-scroll-scene .visual-stage {
    width: 100vw;
    left: 0;
    right: auto;
    margin-left: calc((100% - 100vw) / 2);
  }
}

/* Larger floating hero photos - keep the approved centered positions unchanged. */
@media (min-width: 992px) {
  .hero-scroll-scene .work-card-farleft { width: clamp(125px,8.75vw,153px); height: clamp(125px,8.75vw,153px); }
  .hero-scroll-scene .work-card-left { width: clamp(160px,10.25vw,181px); height: clamp(160px,10.25vw,181px); }
  .hero-scroll-scene .work-card-midleft { width: clamp(188px,11.5vw,206px); height: clamp(188px,11.5vw,206px); }
  .hero-float-extra-left { width: clamp(130px,8.125vw,145px); height: clamp(130px,8.125vw,145px); }
  .hero-scroll-scene .work-card-farright { width: clamp(133px,8.5vw,150px); height: clamp(133px,8.5vw,150px); }
  .hero-scroll-scene .work-card-right { width: clamp(163px,10vw,180px); height: clamp(163px,10vw,180px); }
  .hero-scroll-scene .work-card-midright { width: clamp(158px,9.5vw,173px); height: clamp(158px,9.5vw,173px); }
  .hero-float-extra-right { width: clamp(123px,7.625vw,138px); height: clamp(123px,7.625vw,138px); }
}

/* Larger hero photo pass: increase all eight tiles while preserving the approved composition. */
@media (min-width: 992px) {
  .hero-scroll-scene .work-card-farleft { width: clamp(155px,10.5vw,190px); height: clamp(155px,10.5vw,190px); }
  .hero-scroll-scene .work-card-left { width: clamp(195px,12.25vw,220px); height: clamp(195px,12.25vw,220px); left: 15%; }
  .hero-scroll-scene .work-card-midleft { width: clamp(225px,13.5vw,245px); height: clamp(225px,13.5vw,245px); }
  .hero-float-extra-left { width: clamp(158px,9.75vw,175px); height: clamp(158px,9.75vw,175px); }
  .hero-scroll-scene .work-card-farright { width: clamp(165px,10.25vw,185px); height: clamp(165px,10.25vw,185px); }
  .hero-scroll-scene .work-card-right { width: clamp(198px,12vw,215px); height: clamp(198px,12vw,215px); }
  .hero-scroll-scene .work-card-midright { width: clamp(192px,11.5vw,208px); height: clamp(192px,11.5vw,208px); }
  .hero-float-extra-right { width: clamp(150px,9.25vw,168px); height: clamp(150px,9.25vw,168px); }
}

/* Two additional floating photos: intentionally reuse existing work and keep the center clear. */
@media (min-width: 992px) {
  .hero-scroll-scene .hero-float-extra-newleft {
    display:block;
    position:absolute;
    left:15%;
    top:68%;
    width:clamp(145px,9.4vw,172px);
    height:clamp(145px,9.4vw,172px);
    transform:translate(-50%,-50%) !important;
  }
  .hero-scroll-scene .hero-float-extra-newright {
    display:block;
    position:absolute;
    left:84%;
    top:34%;
    width:clamp(142px,9vw,165px);
    height:clamp(142px,9vw,165px);
    transform:translate(-50%,-50%) !important;
  }
}
@media (max-width: 991.98px) {
  .hero-float-extra-newleft,.hero-float-extra-newright { display:none; }
}

/* Requested hero refinements: mountain farther right + photo tiles zoom in on load. */
@media (min-width: 992px) {
  /* Mountain tile */
  .hero-scroll-scene .hero-float-extra-right { left: 70% !important; }

  /* Do not move the complete photo stage during its reveal. */
  .visual-stage.reveal-item,
  .visual-stage.reveal-item.is-visible {
    transform: none !important;
  }

  /* Each floating photo grows into place without horizontal/vertical travel. */
  .hero-scroll-scene .work-card,
  .hero-scroll-scene .hero-float-extra {
    opacity: 0;
    scale: .72;
    animation: heroPhotoZoomIn .8s cubic-bezier(.22,1,.36,1) forwards;
  }
  .hero-scroll-scene .work-card:nth-of-type(1) { animation-delay: .16s; }
  .hero-scroll-scene .work-card:nth-of-type(2) { animation-delay: .22s; }
  .hero-scroll-scene .work-card:nth-of-type(3) { animation-delay: .28s; }
  .hero-scroll-scene .work-card:nth-of-type(5) { animation-delay: .20s; }
  .hero-scroll-scene .work-card:nth-of-type(6) { animation-delay: .26s; }
  .hero-scroll-scene .work-card:nth-of-type(7) { animation-delay: .32s; }
  .hero-scroll-scene .hero-float-extra-left { animation-delay: .34s; }
  .hero-scroll-scene .hero-float-extra-right { animation-delay: .38s; }
  .hero-scroll-scene .hero-float-extra-newleft { animation-delay: .30s; }
  .hero-scroll-scene .hero-float-extra-newright { animation-delay: .24s; }

  @keyframes heroPhotoZoomIn {
    from { opacity: 0; scale: .72; }
    to { opacity: 1; scale: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-scene .work-card,
  .hero-scroll-scene .hero-float-extra {
    animation: none !important;
    opacity: 1 !important;
    scale: 1 !important;
  }
}

/* Mobile hero: with the portrait moved to its own section, center the
   eyebrow/heading/copy/button group in the viewport instead of pinning it
   to the top. */
@media (max-width: 991.98px) {
  .hero-container {
    justify-content: center;
  }
  .hero-content {
    padding-top: 0;
  }
}

/* =========================================================
   Site footer
   ========================================================= */
.site-footer {
  padding: 26px 16px;
  text-align: center;
  color: #9a988f;
  font-size: 12px;
  letter-spacing: .02em;
}

.site-footer p { margin: 0; }

/* =========================================================
   Book-a-shoot popup (Contact Form 7-ready markup)
   Bootstrap handles open/close (data-bs-toggle/dismiss) and the
   backdrop; everything below is just visual styling on top of
   CF7's own class names (wpcf7-form / wpcf7-form-control-wrap /
   wpcf7-form-control / wpcf7-submit / wpcf7-response-output) so the
   real [contact-form-7] shortcode can replace the .wpcf7 block here
   later without touching this CSS.
   ========================================================= */
.modal-backdrop { background: #14130f; }
.modal-backdrop.show { opacity: .62; }

.book-shoot-modal .modal-dialog { max-width: min(920px, 94vw); }

.book-shoot-modal .modal-content {
  flex-direction: row;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: 0 40px 80px rgba(15,15,10,.35);
}

.book-shoot-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* Custom X (not Bootstrap's default .btn-close icon) so the color is
     ours to set — a solid dark circle with a crisp white X reads clearly
     against the portrait photo behind it at any scroll position. */
  background-color: #171717;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' d='M2 2l12 12M14 2L2 14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  opacity: 1;
  box-shadow: 0 6px 14px rgba(0,0,0,.3);
}
.book-shoot-close:hover { background-color: #303030; }

.book-shoot-portrait {
  position: relative;
  flex: 0 0 38%;
  min-height: 100%;
  background: #e9e6da;
}
.book-shoot-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.book-shoot-form-wrap {
  flex: 1 1 auto;
  padding: 46px 44px;
  max-height: 88vh;
  overflow-y: auto;
}

.book-shoot-eyebrow {
  margin: 0 0 10px;
  font: 700 10px/1 "Archivo", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.book-shoot-title {
  margin: 0 0 10px;
  font: 800 clamp(24px, 2.6vw, 30px)/1.08 "Archivo Black", "Archivo", sans-serif;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.book-shoot-sub {
  margin: 0 0 28px;
  max-width: 46ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* --- Contact Form 7 field styling --- */
.book-shoot-form .book-shoot-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
.book-shoot-form p { margin: 0 0 20px; }
.book-shoot-form label {
  display: block;
  margin-bottom: 8px;
  font: 700 10px/1 "Archivo", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #4a4a44;
}
.wpcf7-form-control-wrap { display: block; }
.book-shoot-form .wpcf7-form-control {
  display: block;
  width: 100%;
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 500 14px/1.4 "Archivo", sans-serif;
  transition: border-color .25s var(--ease);
}
.book-shoot-form textarea.wpcf7-form-control { resize: vertical; min-height: 84px; }
.book-shoot-form select.wpcf7-form-control { appearance: none; cursor: pointer; }
.book-shoot-form .wpcf7-form-control:focus {
  outline: none;
  border-bottom-color: #171717;
}
.book-shoot-form .wpcf7-form-control::placeholder { color: #a9a89f; }

.book-shoot-submit-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.book-shoot-form .wpcf7-submit {
  min-width: 190px;
  cursor: pointer;
}
.wpcf7-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: #171717;
  animation: bookShootSpin .7s linear infinite;
}
.book-shoot-form[data-status="submitting"] .wpcf7-spinner { display: inline-block; }
@keyframes bookShootSpin { to { transform: rotate(360deg); } }

.wpcf7-response-output {
  display: none;
  margin-top: 18px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.book-shoot-form[data-status="sent"] .wpcf7-response-output {
  display: block;
  border-color: rgba(60,77,52,.35);
  background: rgba(60,77,52,.08);
  color: #3c4d34;
}

@media (max-width: 767.98px) {
  .book-shoot-modal .modal-dialog { max-width: 94vw; margin: 20px auto; }
  .book-shoot-modal .modal-content {
    flex-direction: column;
    max-height: 92vh;
    /* The image + form together are taller than one screen, so the whole
       card scrolls as a unit (rather than clipping) so every field and
       the submit button stay reachable. */
    overflow-y: auto;
    overflow-x: hidden;
  }
  .book-shoot-portrait { flex: 0 0 260px; }
  .book-shoot-form-wrap { padding: 30px 22px 26px; max-height: none; overflow-y: visible; }
  .book-shoot-form .book-shoot-row { grid-template-columns: 1fr; gap: 0; }
}

/* =========================================================
   Hero photo lightbox
   Click any of the ten floating hero photos to view it full size
   in this shared modal; script.js swaps the image/caption and
   handles prev/next. Reuses .book-shoot-close for the same dark
   circle / white X close button as the book-a-shoot popup.
   ========================================================= */
.lightbox-item {
  /* Native "click to enlarge" affordance — the standard magnifying-glass
     cursor most photo galleries use, instead of the plain hand cursor. */
  cursor: zoom-in;
}
.lightbox-item:focus-visible {
  outline: 2px solid #171717;
  outline-offset: 3px;
}

.lightbox-modal .modal-dialog {
  max-width: min(1100px, 94vw);
}

.lightbox-modal .modal-content {
  position: relative;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.lightbox-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #101010;
  box-shadow: 0 40px 80px rgba(15,15,10,.45);
  line-height: 0;
}

.lightbox-image {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: #101010;
}

.lightbox-caption {
  margin: 16px 4px 0;
  text-align: center;
  color: #f2f0e9;
  font: 700 11px/1 "Archivo", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lightbox-caption:empty { display: none; }

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20,20,16,.55);
  color: #fff;
  font: 400 26px/1 "Archivo", sans-serif;
  display: grid;
  place-items: center;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.lightbox-nav:hover { background: rgba(20,20,16,.85); }
.lightbox-prev { left: -8px; }
.lightbox-next { right: -8px; }

@media (max-width: 767.98px) {
  .lightbox-modal .modal-dialog { max-width: 94vw; }
  .lightbox-image { max-height: 60vh; }
  .lightbox-nav { width: 38px; height: 38px; font-size: 20px; }
  .lightbox-prev { left: 4px; }
  .lightbox-next { right: 4px; }
  .book-shoot-close.lightbox-close { top: -46px; right: 0; }
}