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

:root {
  --banner-blue: #96ABE3;
  --text-blue: #7d97dd;
  --body-gray: #b9bdc9;

  /* One stack for the whole site. Helvetica where it exists, Arial elsewhere
     (near-identical metrics), so nothing is downloaded and text paints with
     the first frame — no webfont flash. */
  --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
  /* Scroll anchoring cancels in-flight smooth scrolls whenever layout shifts
     (reveal transitions, image sizing, marquees) — disable it site-wide. */
  overflow-anchor: none;
}

/* ---------- CUSTOM CURSOR ---------- */
/* Original hand-drawn arrow pointer; links/buttons keep the native hand. */
html {
  cursor: image-set(url('assets/cursor.png') 1x, url('assets/cursor@2x.png') 2x) 3 2, auto;
}

body {
  background: #000;
  font-family: var(--font);
}

/* Form controls don't inherit the page font on their own */
button, input, select, textarea { font-family: inherit; }

/* ---------- FIXED NAV ---------- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  pointer-events: none;
  mix-blend-mode: difference;
}

.nav-wordmark {
  pointer-events: auto;
  font-family: var(--font);
  font-size: 17px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

.nav-toggle {
  pointer-events: auto;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 4px;
}

.nav-toggle span {
  display: block;
  width: 28px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), opacity .2s;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, .97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

.menu-overlay.open {
  visibility: visible;
  opacity: 1;
  transition: opacity .35s ease;
}

.menu-links {
  list-style: none;
  text-align: center;
}

.menu-links li {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}

.menu-overlay.open .menu-links li {
  opacity: 1;
  transform: none;
}

.menu-links a {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(30px, 6.5vh, 54px);
  line-height: 1.35;
  color: #fff;
  text-decoration: none;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color .2s;
}

.menu-links a:hover {
  color: transparent;
  -webkit-text-stroke: 1.5px #fff;
}

.menu-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity .5s ease .45s;
}

.menu-overlay.open .menu-contact { opacity: 1; }

.menu-contact a {
  font-family: var(--font);
  font-size: 14px;
  color: var(--body-gray);
  text-decoration: none;
}

.menu-contact a:hover { text-decoration: underline; }

/* Staff link — deliberately quiet, it means nothing to a visitor */
.menu-staff {
  margin-top: 22px;
  font-size: 11px !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #5a5e6b !important;
  opacity: .8;
}

.menu-staff:hover { color: var(--banner-blue) !important; opacity: 1; }

/* Anchor jumps shouldn't hide section tops under the fixed nav */
#modeling, #photography, #casting, #application-form, #fit, #fit-form, #booking-form, #about {
  scroll-margin-top: 20px;
}

/* ---------- HERO ---------- */
/* Extra scroll room the hero stays pinned for while its photo pans — the
   picture visibly "scrolls" in place before the page continues underneath. */
.hero-pin {
  position: relative;
  height: calc(100vh + 45vh);
}

.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  background-color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  transform: scale(1.32);
  will-change: transform;
  opacity: 0;
}

/* The fade only runs once the photo has actually decoded (script.js adds
   .ready). Animating before then plays the whole 1.6s against an empty box,
   and the image pops in afterwards with no transition at all. */
.hero-bg.ready { animation: heroIn 1.6s ease-out forwards; }

@keyframes heroIn {
  from { transform: scale(1.5); opacity: 0; }
  to   { transform: scale(1.32); opacity: 1; }
}

.hero-stickers {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateY(-4vh);
}

/* Intro: the name rises into place over the photo */
.hero .sticker-small { opacity: 0; animation: stampSmall .6s cubic-bezier(.22, .61, .36, 1) .7s forwards; }
.hero .sticker-big   { opacity: 0; animation: stampBig   .6s cubic-bezier(.22, .61, .36, 1) .95s forwards; }

@keyframes stampSmall {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes stampBig {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* Set in plain type over the photo — no paper, no tilt. Wide tracking is
   what carries it now instead of the handwriting. */
.sticker {
  font-family: var(--font);
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}

.sticker-small {
  font-size: clamp(11px, 1.3vw, 15px);
  letter-spacing: .55em;
  text-indent: .55em;
}

.sticker-big {
  font-size: clamp(34px, 6vw, 74px);
  letter-spacing: .16em;
  text-indent: .16em;
}

.scroll-arrow {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  animation: bob 2s ease-in-out 1.8s infinite, fadeIn .8s ease 1.6s forwards;
}

@keyframes fadeIn { to { opacity: 1; } }

@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ---------- WORK GRID ---------- */
.work { background: #000; padding-bottom: 4px; }

/* Big outlined ticker filling the space between sections */
.marquee {
  overflow: hidden;
  padding: 70px 0 0;
  /* The infinite ticker animation must not be a scroll-anchor candidate —
     Chrome otherwise cancels smooth scrolling page-wide while it animates. */
  overflow-anchor: none;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}

.marquee-text {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(64px, 9vw, 130px);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 4px;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .22);
  padding-right: 30px;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

.section-header {
  display: flex;
  justify-content: center;
  padding: 40px 20px 60px;
}

.sticker-section {
  font-size: clamp(22px, 3.2vw, 42px);
  letter-spacing: .2em;
  text-indent: .2em;
  text-shadow: none;
}

.category-label {
  font-family: var(--font);
  font-weight: 400;
  color: #fff;
  font-size: clamp(15px, 1.6vw, 20px);
  letter-spacing: 6px;
  text-align: center;
  padding: 40px 20px 26px;
}

.grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 84vw;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 10px;
  grid-auto-flow: dense;
  gap: 4px;
}

.tile {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  grid-column: span 1;
}

.tile.span-2 { grid-column: span 2; }

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tile .counter {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20,20,20,.72);
  color: #fff;
  font-family: var(--font);
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 999px;
  pointer-events: none;
}

.tile .nav-hint {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0);
  transition: color .2s;
  font-size: 26px;
  user-select: none;
}
.tile .nav-prev { left: 0; justify-content: flex-start; padding-left: 12px; }
.tile .nav-next { right: 0; justify-content: flex-end; padding-right: 12px; }
.tile:hover .nav-hint { color: rgba(255,255,255,.85); }

/* ---------- CASTING ---------- */
.casting {
  background: #000;
  padding-bottom: 100px;
}

.casting-intro {
  text-align: center;
  color: var(--body-gray);
  font-size: 16px;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 50px;
  padding: 0 24px;
}

.shoot-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
  padding: 0 24px;
  max-width: 1100px;
  margin: 0 auto 70px;
}

.shoot-card {
  background: #e9e6df;
  color: #1a1a1a;
  width: min(320px, 100%);
  padding: 26px 24px 24px;
  border-radius: 2px;
  box-shadow: 0 4px 18px rgba(0,0,0,.4);
}


.shoot-card h3 {
  font-family: var(--font);
  font-size: 24px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.shoot-meta {
  font-size: 13px;
  letter-spacing: 1px;
  color: #6b675e;
  margin-bottom: 14px;
}

.shoot-desc {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Reveal transition shouldn't fight the card tilt */
.shoot-card.reveal { transform: translateY(46px); }
.shoot-card.reveal.in { transform: none; }

/* ---------- FIT OF THE WEEK ---------- */
.fitweek {
  background: #000;
  padding-bottom: 100px;
}

.fit-tagline {
  font-family: var(--font);
  color: var(--text-blue);
  font-size: clamp(20px, 2.6vw, 30px);
  text-align: center;
  line-height: 1.35;
  padding: 0 24px;
  margin-bottom: 18px;
}

.fit-winner-wrap,
.fit-past-wrap {
  padding: 0 24px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Winner: photo and paper caption sit side by side, tilted like the shoot cards */
.fit-winner {
  display: flex;
  gap: 0;
  background: #e9e6df;
  color: #1a1a1a;
  border-radius: 2px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, .5);
  margin-bottom: 20px;
  overflow: hidden;
}

.fit-winner.reveal { transform: translateY(46px); }
.fit-winner.reveal.in { transform: none; }

.fit-winner-photo {
  width: 46%;
  max-width: 420px;
  object-fit: cover;
  display: block;
  align-self: stretch;
  background: #d6d2c8;
}

.fit-winner-info {
  flex: 1;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.fit-badge {
  align-self: flex-start;
  font-family: var(--font);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  color: #fff;
  background: var(--banner-blue);
  border-radius: 999px;
  padding: 6px 15px;
}

.fit-winner-info h3 {
  font-family: var(--font);
  font-size: clamp(28px, 3.6vw, 42px);
  text-transform: uppercase;
  line-height: 1.1;
}

.fit-winner-ig {
  font-size: 15px;
  color: #4d6bbd;
  text-decoration: none;
}

.fit-winner-ig:hover { text-decoration: underline; }

.fit-winner-note {
  font-size: 14px;
  line-height: 1.7;
}

.fit-winner-next {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #6b675e;
  margin-top: 4px;
}

/* Shown until the first winner is picked */
.fit-empty {
  background: #e9e6df;
  color: #1a1a1a;
  text-align: center;
  padding: 40px 26px;
  border-radius: 2px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
  margin-bottom: 20px;
}

.fit-empty.reveal { transform: translateY(46px); }
.fit-empty.reveal.in { transform: none; }

.fit-empty h3 {
  font-family: var(--font);
  font-size: clamp(24px, 3vw, 34px);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.fit-empty p {
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #6b675e;
}

.fit-past-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-bottom: 60px;
}

.fit-past-card { width: min(170px, 42vw); }

.fit-past-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border: 4px solid #e9e6df;
}

.fit-past-card figcaption {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--body-gray);
  text-align: center;
  padding-top: 8px;
}

/* ---------- FIT PHOTO PICKER ---------- */
.fit-form { margin-top: 20px; }

.fitweek .app-form { color: #fff; }

.fit-drop {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 190px;
  padding: 24px;
  margin-bottom: 18px;
  border: 2px dashed rgba(255, 255, 255, .28);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  transition: border-color .25s, background .25s;
}

.fit-drop:hover {
  border-color: var(--banner-blue);
  background: rgba(150, 171, 227, .08);
}

/* Visually hidden, but still a real focusable form control */
.fit-drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.fit-drop:focus-within { border-color: var(--banner-blue); }

.fit-drop-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--body-gray);
  text-align: center;
}

.fit-drop-text small {
  font-size: 11px;
  letter-spacing: 1px;
  color: #7c8090;
  text-transform: none;
}

.fit-preview {
  max-height: 300px;
  max-width: 100%;
  border-radius: 8px;
  margin-bottom: 6px;
}

/* Keeps the "optional" tag on the same line as the field label */
.label-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.label-optional {
  font-size: 10px;
  letter-spacing: 1px;
  color: #7c8090;
}

.fit-finealt {
  text-align: center;
  font-size: 11px;
  line-height: 1.6;
  color: #7c8090;
  margin-top: 14px;
}

/* ---------- BOOKING CALENDAR ---------- */
.booking-when { margin-bottom: 20px; }

.cal-heading {
  display: block;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--body-gray);
  margin-bottom: 7px;
}

.cal-note {
  font-size: 12px;
  line-height: 1.6;
  color: #8b8f9c;
  margin-bottom: 14px;
}

.calendar {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  padding: 14px;
  background: rgba(255, 255, 255, .04);
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.cal-month {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
}

.cal-nav {
  width: 34px;
  height: 34px;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s, opacity .2s;
}

.cal-nav:hover:not(:disabled) { background: var(--banner-blue); }
.cal-nav:disabled { opacity: .28; cursor: default; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-weekday {
  text-align: center;
  font-size: 10px;
  letter-spacing: 1px;
  color: #7c8090;
  padding-bottom: 4px;
}

.cal-day {
  aspect-ratio: 1;
  min-height: 38px;
  font-size: 14px;
  color: #fff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}

.cal-day:hover:not(:disabled) { background: rgba(150, 171, 227, .28); }

.cal-day:disabled {
  color: #4a4d58;
  background: transparent;
  cursor: default;
}

.cal-day.picked {
  background: var(--banner-blue);
  border-color: var(--banner-blue);
  color: #fff;
  font-weight: 700;
}

.slots-wrap { margin-top: 18px; }

.slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.slot {
  font-size: 14px;
  color: #fff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}

.slot:hover { border-color: var(--banner-blue); }
.slot.picked { background: var(--banner-blue); border-color: var(--banner-blue); font-weight: 700; }

.slot-other { border-style: dashed; }

.slot-custom { margin-top: 14px; }

.time-input {
  font-family: inherit;
  font-size: 16px;
  color: #fff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  padding: 11px 14px;
  outline: none;
}

.time-input:focus { border-color: var(--banner-blue); }

.cal-chosen {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-blue);
  min-height: 1.3em;
}

/* ---------- FORMS ---------- */
.app-form {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
}

.form-title {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(38px, 5vw, 56px);
  color: var(--text-blue);
  text-align: center;
  margin-bottom: 26px;
}

.hp-field { display: none; }

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

.app-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--body-gray);
  text-align: left;
}

.form-wide { margin-bottom: 16px; }

.app-form input,
.app-form select,
.app-form textarea {
  font-family: var(--font);
  font-size: 15px;
  color: inherit;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .25s;
}

.casting .app-form { color: #fff; }

.app-form input:focus,
.app-form select:focus,
.app-form textarea:focus { border-color: var(--banner-blue); }

.form-submit {
  font-family: var(--font);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  background: var(--banner-blue);
  border: none;
  border-radius: 999px;
  padding: 13px 34px;
  cursor: pointer;
  transition: transform .2s, filter .2s;
  display: block;
  margin: 8px auto 0;
}

.form-submit:hover { transform: scale(1.05); filter: brightness(1.08); }
.form-submit:disabled { opacity: .6; cursor: default; }

.shoot-apply {
  margin: 0;
  padding: 9px 26px;
  font-size: 15px;
}

.form-status {
  text-align: center;
  margin-top: 14px;
  font-size: 14px;
  color: var(--body-gray);
  min-height: 1.4em;
}

.form-status.is-error { color: #e08484; }

/* Booking form sits on white */
.booking-blurb { margin-bottom: 26px; }

.booking-form { margin-top: 40px; }

.booking-form input,
.booking-form select,
.booking-form textarea {
  background: #f4f4f8;
  border: 1px solid #dcdce6;
  color: #333;
}

/* The calendar defaults to light-on-dark for the rest of the site; the About
   section is white, so it needs the opposite treatment here. */
.booking-form .cal-heading { color: #6b6f7d; }
.booking-form .cal-note { color: #85899a; }

.booking-form .calendar {
  background: #f4f4f8;
  border-color: #dcdce6;
}

.booking-form .cal-month { color: #1a1a1a; }

.booking-form .cal-nav {
  color: #1a1a1a;
  background: #fff;
  border-color: #dcdce6;
}
.booking-form .cal-nav:hover:not(:disabled) { background: var(--banner-blue); color: #fff; }

.booking-form .cal-weekday { color: #9296a5; }

.booking-form .cal-day {
  color: #1a1a1a;
  background: #fff;
  border-color: #e6e6ee;
}
.booking-form .cal-day:hover:not(:disabled) { background: rgba(150, 171, 227, .3); }
.booking-form .cal-day:disabled { color: #c3c5d0; background: transparent; border-color: transparent; }
.booking-form .cal-day.picked { background: var(--banner-blue); border-color: var(--banner-blue); color: #fff; }

.booking-form .slot {
  color: #1a1a1a;
  background: #fff;
  border-color: #dcdce6;
}
.booking-form .slot.picked { background: var(--banner-blue); border-color: var(--banner-blue); color: #fff; }

.booking-form .cal-chosen { color: #4d6bbd; font-weight: 700; }

.booking-form .time-input {
  color: #1a1a1a;
  background: #fff;
  border-color: #dcdce6;
}

.contact-email a { color: inherit; text-decoration: none; }
.contact-email a:hover { text-decoration: underline; }

/* ---------- ABOUT ---------- */
.about { background: #fff; }

.about-hero {
  position: relative;
  height: 118vh;
  overflow: hidden;
}

.about-banner {
  position: absolute;
  right: 0;
  bottom: 10vh;
  width: 56%;
  min-width: 340px;
  height: 30vh;
  background: var(--banner-blue);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Slight downward bias: the title sits just below box center like the
     reference, leaving blue space above for his seat to rest on. */
  padding: 4vh 40px 0;
  text-align: center;
  z-index: 1;
  will-change: transform;
}

.about-title {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(48px, 7vw, 96px);
  letter-spacing: 2px;
  line-height: .9;
}

.about-subtitle {
  font-family: var(--font);
  font-size: clamp(16px, 2vw, 24px);
  margin-top: 8px;
  opacity: .9;
}

/* Cutout figure "sitting" on the banner — seat overlaps the banner's top
   edge, feet hang in front of its face.
   Positioned with `right` (not `left`) because the banner is anchored from
   the right (right:0; width:56%) — pinning the photo's right edge to a
   viewport-width percentage keeps the two in sync at any window size. Using
   `left` here previously let the gap grow with viewport width, since the
   photo's own width comes from `height` (vh), a different axis entirely. */
.about-photo {
  position: absolute;
  z-index: 2;
  height: 76vh;
  right: 34vw;
  bottom: 15vh;
  object-fit: contain;
  will-change: transform;
  /* Zoom-out shrinks toward his seat so the feet land on the box */
  transform-origin: 50% 88%;
}

.about-body {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 24px 90px;
  text-align: center;
  color: var(--body-gray);
  font-size: clamp(17px, 1.5vw, 24px);
  line-height: 1.85;
}

.bio p { margin-bottom: 34px; }

.featured { margin-top: 10px; }
.featured h4 {
  font-weight: 400;
  font-size: 17px;
  margin-bottom: 16px;
}
.featured ul { list-style: none; }
.featured li { margin-bottom: 10px; }
.featured li::before { content: '\25E6\00a0\00a0'; }

.contact-heading {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(38px, 5vw, 56px);
  color: var(--text-blue);
  margin-top: 70px;
  margin-bottom: 26px;
}

.contact-email { margin-bottom: 14px; }

.contact-ig {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--body-gray);
}
.contact-ig a { color: inherit; text-decoration: none; }
.contact-ig a:hover { text-decoration: underline; }

.contact-igs { display: flex; flex-direction: column; gap: 10px; align-items: center; }

.ig-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #cfd2db;
  margin-left: 4px;
}

/* ---------- SCROLL REVEALS ---------- */
.reveal {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
.reveal.in { opacity: 1; transform: none; }

.reveal-sticker {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
.reveal-sticker.in { opacity: 1; transform: none; }

.reveal-label {
  opacity: 0;
  letter-spacing: 20px;
  transition: opacity .8s ease, letter-spacing .9s cubic-bezier(.22, .61, .36, 1);
}
.reveal-label.in { opacity: 1; letter-spacing: 6px; }

.reveal-banner {
  opacity: 0;
  transform: translateX(80px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}
.reveal-banner.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .reveal-sticker, .reveal-label, .reveal-banner,
  .hero .sticker-small, .hero .sticker-big, .scroll-arrow,
  .menu-links li, .menu-contact { opacity: 1; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 760px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .tile.span-2 { grid-column: span 2; }
  .about-banner { width: 80%; min-width: 0; height: 24vh; padding: 3vh 20px 0; bottom: 8vh; text-align: right; }
  .about-photo { height: 47vh; right: 40vw; bottom: 16vh; }
  .about-hero { height: 92vh; }

  /* iOS Safari force-zooms the page when a focused input is under 16px, which
     yanks the layout around on every tap. 16px is the minimum that avoids it. */
  .app-form input,
  .app-form select,
  .app-form textarea { font-size: 16px; }

  /* Winner card stacks: photo on top, caption under it */
  .fit-winner { flex-direction: column; }
  .fit-winner-photo { width: 100%; max-width: none; max-height: 62vh; }
  .fit-winner-info { padding: 24px 22px 28px; }
  .fit-drop { min-height: 150px; }
}