/* ==========================================================================
   YEENA FISHER — Portfolio Website
   style.css — VERSION 5 — shared across every page
   Reflects: Homepage Revision FINAL COMPLETE, Show Reels FINAL,
   Red Carpets & Media FINAL, Bio & Resume, Contact Page instructions.
   ========================================================================== */

:root{
  --main-background: #EFE5FF;

  /* header — per HOME Page FINAL doc §2, the authoritative/latest spec:
     "UPDATED FINAL top-banner color: #D8C3EC" (supersedes the earlier
     Homepage Revision doc's darker #E4D3F4 suggestion) */
  --header-background: #D8C3EC;
  --header-border: #BFA3DA;

  --deep-plum: #3A1F4C;
  --title-purple: #4C1D95;

  --soft-lavender: #CBC3E3;
  --medium-lavender: #C3B1E1;
  --gallery-lavender: #E6DAFF;
  --gallery-border: #F3E8FF;

  --wine-shadow: rgba(90,14,50,0.40);

  --black: #000000;
  --white: #FFFFFF;

  /* button system */
  --btn-border: #8E68B8;
  --btn-grad-top: #F5ECFF;
  --btn-grad-mid: #D7C3EE;
  --btn-grad-bottom: #B99AD9;

  /* gallery / card button */
  --gallery-btn-top: #684090;
  --gallery-btn-bottom: #3A1F4C;
}

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

html{scroll-behavior:smooth;}

body{
  font-family:'Montserrat', sans-serif;
  background:var(--main-background);
  color:#7B4BC4;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}

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

a:focus-visible,
button:focus-visible{
  outline:2px solid var(--title-purple);
  outline-offset:3px;
  border-radius:2px;
}

.container{
  max-width:1280px;
  margin:0 auto;
  padding:0 48px;
}

/* ==========================================================================
   SINGLE-PAGE ROUTING — one index.html, seven tabs. Only the active
   section is shown; script.js toggles this class based on the URL hash.
   ========================================================================== */
.page{display:none;}
.page.active{display:block;}

.page-title{
  font-family:'Montserrat', sans-serif;
  font-size:48px;
  font-weight:700;
  letter-spacing:3px;
  color:var(--deep-plum);
  text-transform:uppercase;
  text-align:center;
  padding-top:64px;
  margin-bottom:28px;
}

@media (max-width:700px){
  .page-title{font-size:32px;letter-spacing:2px;padding-top:44px;}
}

/* ==========================================================================
   HEADER / NAVIGATION
   Desktop: full horizontal row inside the banner (never a hamburger).
   Mobile: cursive YF left, "MENU ☰" right, vertical dropdown directly
   beneath the banner (never a side drawer).
   ========================================================================== */

.site-header{
  position:sticky;
  top:0;
  z-index:200;
  background:var(--header-background);
  border-bottom:2px solid var(--header-border);
  box-shadow:0 2px 10px rgba(58,31,76,0.10);
}

/* Decorative cursive tagline, top-right of the banner. Absolutely positioned
   so it sits outside the .nav-wrap flex row entirely and can never affect
   the nav's own layout or wrapping. Desktop only — hidden below 1300px so
   it never collides with the scaled-down laptop nav or the mobile menu. */
.header-tagline{
  position:absolute;
  top:6px;
  right:24px;
  z-index:1;
  font-family:'Allura', cursive;
  font-size:15px;
  line-height:1.2;
  color:#5B2E86;
  text-align:center;
  pointer-events:none;
}

@media (max-width:1300px){
  .header-tagline{display:none;}
}

.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  max-width:1280px;
  margin:0 auto;
  padding:16px 48px;
}

.logo-mark{
  font-family:'Great Vibes', cursive;
  font-size:40px;
  color:var(--deep-plum);
  flex-shrink:0;
  line-height:1;
}

.primary-nav ul{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:nowrap;
}

.primary-nav a{
  position:relative;
  display:inline-block;
  white-space:nowrap;
  font-family:'Montserrat', sans-serif;
  font-size:20px;
  font-weight:600;
  letter-spacing:1px;
  color:var(--deep-plum);
  text-transform:uppercase;
  padding-bottom:6px;
  transition:color .2s ease;
}

.primary-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:2px;
  width:100%;
  background:#4C1D95;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}

.primary-nav a:hover,
.primary-nav a:focus-visible{color:#4C1D95;}
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after{transform:scaleX(1);}

.primary-nav a.active::after{
  transform:scaleX(1);
  background:var(--title-purple);
}

@media (min-width:1400px){
  .primary-nav a{font-size:20px;}
}

/* Common laptop widths (13"-15" screens, scaled Windows displays, unmaximized
   browser windows) sit right between the mobile breakpoint and full desktop.
   Scale the nav down so it still fits on ONE horizontal line instead of
   wrapping to a second row. Lower bound matches the mobile breakpoint below
   (769px) so the full inline menu never collapses to the hamburger on any
   desktop/laptop-width window — only genuinely small/mobile screens
   (≤768px, per spec) get the MENU ☰ toggle. */
@media (min-width:769px) and (max-width:1300px){
  .nav-wrap{padding:16px 24px;gap:14px;}
  .logo-mark{font-size:32px;}
  .primary-nav ul{gap:12px;}
  .primary-nav a{font-size:14px;letter-spacing:0.25px;}
}

/* Mobile "MENU ☰" toggle */
.menu-toggle{
  display:none;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  padding:10px 4px;
  font-family:'Montserrat', sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:1.5px;
  color:var(--deep-plum);
  text-transform:uppercase;
  min-height:44px;
}
.menu-toggle .bars{font-size:22px;line-height:1;}

/* Mobile threshold matches both spec docs exactly: "approximately 768px
   and below" gets the YF + MENU ☰ layout; every desktop/laptop width above
   this keeps the full inline menu (see the 769-1300px rule above). */
@media (max-width:768px){
  .nav-wrap{padding:14px 22px;}

  .menu-toggle{display:flex;}

  /* vertical dropdown directly beneath the banner — not a side drawer */
  .primary-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--header-background);
    border-bottom:2px solid var(--header-border);
    box-shadow:0 12px 24px rgba(58,31,76,0.16);
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }
  .primary-nav.open{max-height:600px;}

  .primary-nav ul{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px 22px 18px;
  }
  .primary-nav li{border-top:1px solid rgba(58,31,76,0.08);}
  .primary-nav li:first-child{border-top:none;}
  .primary-nav a{
    display:block;
    padding:14px 4px;
    min-height:44px;
    font-size:17px;
  }
  .primary-nav a::after{display:none;}
}

/* ==========================================================================
   HERO — NAME, ROLE LINE, BIO
   ========================================================================== */

.hero{
  position:relative;
  z-index:1;
  padding:4px 0 6px;
  text-align:center;
  overflow:visible;
}

.hero-title{
  font-family:'Great Vibes', cursive;
  font-size:clamp(104px, 12vw, 176px);
  font-weight:700;
  line-height:1.16;
  color:var(--title-purple);
  -webkit-text-stroke:1.7px var(--title-purple);
  text-shadow:
    1px 1px 0 rgba(224,140,182,0.65),
    2px 2.5px 0 rgba(214,118,166,0.5),
    3px 4px 3px rgba(90,14,50,0.35),
    4px 7px 10px rgba(90,14,50,0.30);
  margin:0;
  padding:.28em .08em .08em;
  overflow:visible;
}

.role-line{
  font-family:'Montserrat', sans-serif;
  font-size:21px;
  font-weight:600;
  letter-spacing:3px;
  color:var(--deep-plum);
  text-transform:uppercase;
  margin-top:10px;
  margin-bottom:16px;
}

.role-divider{
  width:70px;
  height:2px;
  background:var(--medium-lavender);
  margin:0 auto 18px;
}

.hero-bio{
  max-width:850px;
  margin:0 auto 10px;
  font-family:'Montserrat', sans-serif;
  font-size:20px;
  line-height:1.65;
  font-weight:400;
  color:var(--deep-plum);
}

@media (max-width:600px){
  .hero-title{font-size:clamp(72px, 20vw, 108px);line-height:1.14;padding-top:.24em;}
  .role-line{font-size:16px;letter-spacing:2px;}
  .hero-bio{font-size:17px;}
}

/* ==========================================================================
   HOLLYWOOD/CINEMATIC ATMOSPHERE AROUND THE PORTRAIT
   Restores the approved reference: flanking text left/right of the
   portrait, plus a subtle cinematic backdrop (film-strip edges, faint
   skyline/palm silhouettes) that blends into the lavender halo rather
   than competing with the photograph.
   ========================================================================== */

/* Real photographic Hollywood backdrop (Yeena's HollywoodbackgroundImage.png:
   hillside HOLLYWOOD sign, palms, skyline, sunset sky, filmstrip ribbon) runs
   from the short bio through the Demo Reel. background-size:100% auto (not
   "cover") keeps the whole width of the photo undisplayed — no side-cropping
   that would lose the sign or the palms — and lets it sit at its natural
   height at the top of this section; background-color picks up the photo's
   own bottom-edge tone so the area below its natural height blends smoothly
   into the rest of the section instead of a hard color seam. */
.home-atmosphere{
  position:relative;
  overflow:hidden;
}

.home-atmosphere-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url('HollywoodbackgroundImage.png');
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100% auto;
  background-color:#D9B6F8;
}

/* Lavender scrim over the photo: strong at the very top (where it meets the
   plain-background hero above, and behind the bio paragraph) and again near
   the bottom (blending into the plain background below the Demo Reel);
   nearly clear across the middle so the portrait/atmosphere reads clearly.
   This is what keeps the Hollywood elements "secondary" / "emerging softly"
   rather than a busy photo dropped behind text. */
.home-atmosphere-scrim{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(239,229,255,0.94) 0%,
    rgba(239,229,255,0.60) 8%,
    rgba(239,229,255,0.20) 20%,
    rgba(239,229,255,0.04) 34%,
    rgba(239,229,255,0.04) 72%,
    rgba(239,229,255,0.55) 92%,
    rgba(239,229,255,0.92) 100%);
}

/* Bio paragraph sits in normal flow inside .home-atmosphere; give it its own
   stacking position so it reliably paints above the absolutely-positioned
   background/scrim layers rather than beneath them. */
.home-atmosphere > .container{
  position:relative;
  z-index:1;
}

.atmosphere-tagline{
  position:relative;
  z-index:2;
  font-family:'Allura', cursive;
  font-size:24px;
  line-height:1.15;
  color:#5B2E86;
  text-align:left;
  margin:4px 0 0 32px;
}

@media (max-width:900px){
  .atmosphere-tagline{display:none;}
}

.portrait-section{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(145px,190px) minmax(360px,500px) minmax(145px,190px);
  align-items:center;
  justify-content:center;
  column-gap:18px;
  padding:0 24px 36px;
  overflow:visible;
}

.hero-flank{
  position:relative;
  z-index:2;
  width:auto;
  min-width:0;
  padding:8px 4px;
}

.hero-flank-left{
  text-align:right;
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  font-size:18px;
  line-height:1.48;
  letter-spacing:1.3px;
  color:#3A1F4C;
  text-shadow:0 1px 2px rgba(255,255,255,0.65);
  text-transform:uppercase;
}
.hero-flank-left .rule-mini{margin-left:auto;}

.hero-flank-right{
  text-align:left;
  font-family:'Allura', cursive;
  font-size:27px;
  line-height:1.22;
  color:#2C0B63;
  text-shadow:0 1px 2px rgba(255,255,255,0.65);
  transform:translateX(28px);
}

.rule-mini{
  width:40px;
  height:1px;
  background:#7542A8;
  margin-top:12px;
}

/* Keep both text treatments beside the portrait on normal desktop/laptop
   widths. Only stack them on genuinely narrow screens. */
@media (max-width:1000px) and (min-width:761px){
  .portrait-section{
    grid-template-columns:minmax(110px,160px) minmax(330px,430px) minmax(110px,160px);
    column-gap:12px;
    padding-left:16px;
    padding-right:16px;
  }
  .hero-flank-left{font-size:16px;letter-spacing:1.1px;}
  .hero-flank-right{font-size:24px;transform:translateX(16px);}
}

@media (max-width:760px) and (min-width:561px){
  .portrait-section{
    grid-template-columns:minmax(82px,120px) minmax(290px,360px) minmax(82px,120px);
    column-gap:8px;
    padding-left:8px;
    padding-right:8px;
  }
  .hero-flank{padding:4px 2px;}
  .hero-flank-left{font-size:14px;line-height:1.4;letter-spacing:.8px;}
  .hero-flank-right{font-size:21px;line-height:1.15;transform:translateX(8px);}
  .rule-mini{width:30px;}
}

/* Only stack on true phone widths. Desktop/laptop and tablet widths keep
   the approved left / portrait / right composition. */
@media (max-width:560px){
  .portrait-section{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
  }
  .hero-flank{
    width:100%;
    max-width:340px;
    margin:0 auto;
    padding:2px 8px;
  }
  .hero-flank-left,
  .hero-flank-right{
    text-align:center;
    transform:none;
  }
  .hero-flank-left .rule-mini{
    margin:12px auto 0;
  }
}

@media (max-width:480px){
  .hero-flank-left{font-size:16px;letter-spacing:1.1px;}
  .hero-flank-right{font-size:24px;}
}

/* ==========================================================================
   MAIN PORTRAIT — soft diffused halo, no hard circle
   ========================================================================== */

.portrait-stage{
  position:relative;
  z-index:1;
  width:min(500px, 76vw);
  aspect-ratio:2 / 3;
  flex-shrink:0;
}

/* Soft, round/oval lavender halo BEHIND the headshot — per Yeena's exact
   spec. A single blurred radial-gradient ellipse, not a hard circle and
   never a rectangular panel. It sits behind the portrait (z-index:0, the
   <img> is z-index:1) and its outer edge fades to fully transparent well
   before the section edge, so it dissolves into the page/photo background
   rather than reading as a frame. Sized to surround hair/shoulders without
   reaching the section's own edges. */
.portrait-halo{
  position:absolute;
  width:138%;
  height:84%;
  left:50%;
  top:34%;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 33%,
      rgba(117,66,168,0.96) 0%,
      rgba(143,82,194,0.92) 24%,
      rgba(171,112,214,0.78) 42%,
      rgba(200,158,231,0.56) 58%,
      rgba(225,202,247,0.28) 70%,
      rgba(239,229,255,0) 84%),
    radial-gradient(ellipse at 50% 42%,
      rgba(101,45,155,0.42) 0%,
      rgba(166,105,210,0.30) 48%,
      rgba(239,229,255,0) 80%);
  filter:blur(10px);
  box-shadow:
    0 0 34px rgba(76,29,149,0.46),
    0 0 72px rgba(123,75,196,0.34);
  opacity:1;
  z-index:0;
  pointer-events:none;
}

/* Headshot_main_transparent.png is Yeena's original, already-transparent
   asset — untouched, uncropped. It simply sits on top of the halo above. */
.portrait-stage img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center top;
  filter:drop-shadow(0 18px 26px rgba(43,7,61,0.35));
}

/* ==========================================================================
   DEMO REEL — luxurious layered 3D frame, cover image, click-to-play
   ========================================================================== */

.demo-reel-section{
  position:relative;
  z-index:1;
  text-align:center;
  padding:0 24px 56px;
  perspective:1400px;
}

.demo-reel-heading{
  font-family:'Montserrat', sans-serif;
  font-size:22px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--deep-plum);
  margin-bottom:18px;
}

.demo-reel-wrapper{
  width:min(58vw, 470px);
  margin:0 auto;
  padding:12px;
  position:relative;
  background:linear-gradient(145deg, #F7F0FF 0%, #E6DAFF 52%, #C9AFE5 100%);
  border:1px solid #B99AD9;
  border-radius:16px;
  transform-style:preserve-3d;
  transform:rotateX(3deg) rotateY(-2deg) translateZ(0);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
  box-shadow:
    0 3px 0 #C9AFE5,
    0 6px 0 #B99AD9,
    0 26px 44px rgba(58,31,76,0.35),
    0 10px 20px rgba(58,31,76,0.22),
    0 0 0 1px rgba(216,178,92,0.6),
    0 0 46px rgba(216,178,92,0.32),
    inset 0 2px 2px rgba(255,255,255,0.90),
    inset 0 -3px 6px rgba(76,29,149,0.14);
}

/* Luxurious hover lift — the whole frame tilts toward the viewer and the
   shadow deepens, like a card lifting off a velvet backdrop. */
.demo-reel-wrapper:hover,
.demo-reel-wrapper:focus-within{
  transform:rotateX(0deg) rotateY(0deg) translateZ(28px) translateY(-6px);
  box-shadow:
    0 3px 0 #C9AFE5,
    0 8px 0 #B99AD9,
    0 40px 60px rgba(58,31,76,0.42),
    0 14px 28px rgba(58,31,76,0.26),
    0 0 0 1px rgba(216,178,92,0.75),
    0 0 64px rgba(216,178,92,0.45),
    inset 0 2px 2px rgba(255,255,255,0.95),
    inset 0 -3px 6px rgba(76,29,149,0.14);
}

/* Thin gold hairline just inside the frame — a touch of old-Hollywood
   glamour around the demo reel without altering its layout. */
.demo-reel-wrapper::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(216,178,92,0.55);
  border-radius:11px;
  pointer-events:none;
  z-index:2;
}

/* Gold corner brackets — a small luxury-frame flourish at each corner. */
.demo-reel-wrapper::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:9px;
  pointer-events:none;
  z-index:2;
  background:
    linear-gradient(#D8B25C,#D8B25C) top left / 22px 2px no-repeat,
    linear-gradient(#D8B25C,#D8B25C) top left / 2px 22px no-repeat,
    linear-gradient(#D8B25C,#D8B25C) top right / 22px 2px no-repeat,
    linear-gradient(#D8B25C,#D8B25C) top right / 2px 22px no-repeat,
    linear-gradient(#D8B25C,#D8B25C) bottom left / 22px 2px no-repeat,
    linear-gradient(#D8B25C,#D8B25C) bottom left / 2px 22px no-repeat,
    linear-gradient(#D8B25C,#D8B25C) bottom right / 22px 2px no-repeat,
    linear-gradient(#D8B25C,#D8B25C) bottom right / 2px 22px no-repeat;
  opacity:0.85;
}

.demo-reel-video{
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:10px;
  background:#000;
  border:1px solid rgba(58,31,76,0.25);
  box-shadow:
    0 7px 16px rgba(58,31,76,0.22),
    inset 0 0 0 1px rgba(216,178,92,0.35),
    inset 0 40px 60px rgba(20,8,32,0.35);
  position:relative;
  cursor:pointer;
  /* CSS fallback only if JS hasn't applied the real YouTube thumbnail yet
     (or fails). "contain" keeps the whole frame visible with no cropping,
     so Yeena's face is never cut off. */
  background-image:linear-gradient(rgba(20,8,32,0.35), rgba(20,8,32,0.55)), url('theaterical_1.jpg');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

/* Animated gold light-sweep across the thumbnail on hover — a subtle
   glossy, luxurious shimmer rather than a static flat box. */
.demo-reel-video::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(115deg,
    transparent 0%,
    rgba(255,255,255,0) 38%,
    rgba(255,236,190,0.28) 50%,
    rgba(255,255,255,0) 62%,
    transparent 100%);
  background-size:220% 100%;
  background-position:130% 0;
  transition:background-position .9s ease;
}
.demo-reel-wrapper:hover .demo-reel-video::after,
.demo-reel-wrapper:focus-within .demo-reel-video::after{
  background-position:-30% 0;
}
.demo-reel-video.is-playing::after{display:none;}

/* ==========================================================================
   GENERIC CLICK-TO-PLAY VIDEO FACADE (reused by demo reel, show reels,
   and media/interview cards)
   ========================================================================== */

.reel-video{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:9px;
  overflow:hidden;
  background:#000;
  box-shadow:0 6px 16px rgba(58,31,76,0.20);
  cursor:pointer;
}

.reel-video iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.play-btn{
  position:absolute;
  z-index:2;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:64px;height:64px;
  border-radius:50%;
  background:rgba(76,29,149,0.85);
  color:var(--white);
  border:2px solid rgba(255,255,255,0.85);
  box-shadow:
    0 0 0 3px rgba(216,178,92,0.55),
    0 6px 18px rgba(20,8,32,0.45);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.reel-video:hover .play-btn,
.reel-video:focus-visible .play-btn{
  background:var(--title-purple);
  transform:translate(-50%,-50%) scale(1.06);
}
.reel-video.is-playing .play-btn{display:none;}

/* Close button shown only while a reel video is playing — lets a visitor
   stop it and return to the poster/thumbnail without switching to a
   different card first. */
.reel-close{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(58,31,76,0.75);
  color:var(--white);
  border:2px solid rgba(255,255,255,0.85);
  font-size:20px;
  line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.reel-close:hover,
.reel-close:focus-visible{
  background:var(--title-purple);
  transform:scale(1.08);
}

/* ==========================================================================
   PROFESSIONAL PROFILE BUTTONS
   ========================================================================== */

.profile-buttons{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:24px;
  padding:0 24px 64px;
}

.profile-btn{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  min-width:220px;
  padding:16px 24px;
  border-radius:10px;
  background:linear-gradient(180deg, #FBF6FF 0%, #E4D3F5 42%, #C7AEE3 100%);
  border:1px solid var(--btn-border);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 -10px 16px rgba(58,31,76,0.14) inset,
    0 2px 0 rgba(142,104,184,0.55),
    0 12px 24px rgba(58,31,76,0.22);
  transition:transform .2s ease, box-shadow .2s ease;
  overflow:hidden;
}

.profile-btn::before{
  content:"";
  position:absolute;
  top:1px;left:1px;right:1px;
  height:48%;
  border-radius:9px 9px 60% 60% / 9px 9px 26px 26px;
  background:linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}

.profile-btn:hover{
  transform:translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 -10px 16px rgba(58,31,76,0.14) inset,
    0 2px 0 rgba(142,104,184,0.55),
    0 18px 32px rgba(58,31,76,0.30);
}

.profile-btn:active{
  transform:translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 -4px 10px rgba(58,31,76,0.18) inset,
    0 1px 0 rgba(142,104,184,0.55),
    0 6px 14px rgba(58,31,76,0.22);
}

.profile-btn .icon{
  position:relative;
  width:34px;
  height:34px;
  border-radius:50%;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, #5A2E8C 0%, var(--deep-plum) 100%);
  color:var(--white);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 3px 6px rgba(58,31,76,0.35);
}
.profile-btn .icon svg{width:16px;height:16px;position:relative;z-index:1;}

.profile-btn .label{
  position:relative;
  z-index:1;
  font-family:'Montserrat', sans-serif;
  font-size:16px;
  font-weight:700;
  color:var(--deep-plum);
  line-height:1.3;
}
.profile-btn .label small{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:1px;
  color:#684090;
}

@media (max-width:760px){
  .profile-btn{min-width:44%;flex:1 1 44%;}
}
@media (max-width:480px){
  .profile-btn{min-width:100%;flex:1 1 100%;}
}

/* ==========================================================================
   BLACK PERSONAL BRAND STRIP
   ========================================================================== */

.brand-strip{
  background:var(--black);
  padding:34px 0;
}

.brand-strip ul{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:22px;
  row-gap:12px;
}

.brand-strip li{
  font-family:'Montserrat', sans-serif;
  font-size:28px;
  font-weight:800;
  letter-spacing:2px;
  color:var(--white);
  text-transform:uppercase;
  position:relative;
  padding-right:22px;
}

.brand-strip li:last-child{padding-right:0;}

.brand-strip li:not(:last-child)::after{
  content:"|";
  position:absolute;
  right:-4px;
  color:var(--medium-lavender);
  font-weight:400;
}

@media (max-width:700px){
  .brand-strip li{font-size:18px;letter-spacing:1px;padding-right:14px;}
}
@media (max-width:420px){
  .brand-strip li{font-size:15px;}
}

/* ==========================================================================
   HOMEPAGE HEADSHOT PREVIEWS — vertical, small preview + View Gallery
   ========================================================================== */

.headshot-preview-section{
  padding:80px 0 20px;
  text-align:center;
}

.preview-title{
  font-family:'Montserrat', sans-serif;
  font-size:30px;
  font-weight:700;
  letter-spacing:1px;
  color:var(--deep-plum);
  text-transform:uppercase;
  margin-bottom:22px;
}

.preview-card{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  background:var(--gallery-lavender);
  border:1px solid var(--gallery-border);
  outline:1px solid rgba(58,31,76,0.06);
  border-radius:14px;
  padding:22px;
  box-shadow:
    0 14px 30px rgba(58,31,76,0.16),
    inset 0 1px 1px rgba(255,255,255,0.85);
  margin-bottom:56px;
}

.preview-card img{
  width:220px;
  height:270px;
  object-fit:cover;
  border-radius:8px;
  box-shadow:0 8px 18px rgba(26,10,46,0.25);
}

/* ==========================================================================
   VIEW GALLERY / CARD-LEVEL BUTTON
   ========================================================================== */

.gallery-btn{
  align-self:center;
  position:relative;
  display:inline-block;
  background:linear-gradient(180deg, var(--gallery-btn-top), var(--gallery-btn-bottom));
  color:var(--white);
  font-family:'Montserrat', sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.5px;
  padding:13px 26px;
  border-radius:8px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 2px 0 rgba(0,0,0,0.15),
    0 10px 20px rgba(58,31,76,0.28);
  transition:filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.gallery-btn:hover{
  filter:brightness(1.08);
  transform:translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 2px 0 rgba(0,0,0,0.15),
    0 16px 28px rgba(58,31,76,0.34);
}
.gallery-btn:active{
  transform:translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 1px 0 rgba(0,0,0,0.15),
    0 6px 14px rgba(58,31,76,0.24);
}

/* ==========================================================================
   LOWER SIGNATURE
   ========================================================================== */

.signature-section{
  text-align:center;
  padding:20px 24px 80px;
}

.signature-script{
  font-family:'Great Vibes', cursive;
  font-size:clamp(38px, 5vw, 52px);
  color:var(--title-purple);
  margin-bottom:6px;
}

.signature-sub{
  font-family:'Montserrat', sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:4px;
  color:var(--deep-plum);
  text-transform:uppercase;
  opacity:.8;
}

/* ==========================================================================
   SHOW REELS PAGE
   ========================================================================== */

.reels-intro{
  font-family:'Montserrat', sans-serif;
  font-size:20px;
  font-weight:400;
  line-height:1.65;
  color:var(--deep-plum);
  max-width:850px;
  margin:0 auto 50px;
  text-align:center;
}

.reels-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:44px;
  row-gap:44px;
  max-width:1280px;
  margin:0 auto;
  padding:0 32px 80px;
  justify-items:center;
}

.reel-card{
  width:100%;
  max-width:590px;
  padding:20px 20px 24px;
  background:linear-gradient(145deg, #F7F0FF 0%, #E6DAFF 58%, #D4C1EC 100%);
  border:1px solid var(--medium-lavender);
  border-radius:14px;
  box-shadow:
    0 14px 30px rgba(58,31,76,0.17),
    0 6px 0 rgba(185,154,217,0.75),
    inset 0 1px 1px rgba(255,255,255,0.90);
  transition:transform .25s ease, box-shadow .25s ease;
  display:flex;
  flex-direction:column;
}

@media (hover:hover){
  .reel-card:hover{
    transform:translateY(-4px);
    box-shadow:
      0 18px 36px rgba(58,31,76,0.22),
      0 6px 0 rgba(185,154,217,0.75),
      inset 0 1px 1px rgba(255,255,255,0.90);
  }
}

/* balance an odd final card by centering it in its own row */
.reel-card.center-last{
  grid-column:1 / -1;
  max-width:590px;
  justify-self:center;
}

.reel-title{
  font-family:'Montserrat', sans-serif;
  font-size:24px;
  font-weight:700;
  letter-spacing:1px;
  color:var(--deep-plum);
  text-align:center;
  margin-top:18px;
  margin-bottom:10px;
}

.reel-desc{
  font-family:'Montserrat', sans-serif;
  font-size:17px;
  font-weight:400;
  line-height:1.55;
  color:var(--deep-plum);
  text-align:center;
  max-width:500px;
  margin:0 auto;
}

@media (max-width:900px){
  .reels-grid{
    grid-template-columns:1fr;
    max-width:650px;
    row-gap:34px;
    padding:0 18px 56px;
  }
  .reel-card{max-width:100%;}
  .reel-card.center-last{max-width:100%;}
}

@media (max-width:480px){
  .reels-intro{font-size:17px;}
}

/* ==========================================================================
   RED CARPETS & MEDIA PAGE — gallery frame + lightbox + interview cards
   Also reused generically by the Headshots page.
   ========================================================================== */

.section-heading{
  font-family:'Montserrat', sans-serif;
  font-size:28px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--deep-plum);
  text-align:center;
  margin:60px 0 26px;
}
.section-heading:first-of-type{margin-top:0;}

.photo-gallery-frame{
  max-width:1320px;
  margin:0 auto;
  padding:26px;
  background:linear-gradient(145deg, #F7F0FF 0%, #E6DAFF 58%, #D4C1EC 100%);
  border:1px solid #C3B1E1;
  border-radius:16px;
  box-shadow:
    0 16px 34px rgba(58,31,76,0.18),
    0 7px 0 rgba(185,154,217,0.72),
    inset 0 2px 2px rgba(255,255,255,0.90),
    inset 0 -2px 4px rgba(76,29,149,0.08);
}

.photo-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:16px;
}

.photo-grid.cols-4{grid-template-columns:repeat(4, minmax(0,1fr));}

.photo-grid button{
  display:block;
  width:100%;
  padding:0;
  border:1px solid rgba(58,31,76,0.15);
  border-radius:9px;
  overflow:hidden;
  background:#000;
  box-shadow:0 6px 14px rgba(58,31,76,0.18);
  transition:transform .2s ease, box-shadow .2s ease;
  aspect-ratio:3/4;
}
.photo-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (hover:hover){
  .photo-grid button:hover{
    transform:scale(1.025);
    box-shadow:0 10px 20px rgba(58,31,76,0.28);
  }
}

@media (max-width:1000px){
  .photo-grid{grid-template-columns:repeat(3, minmax(0,1fr));}
}
@media (max-width:640px){
  .photo-gallery-frame{padding:14px;}
  .photo-grid{grid-template-columns:repeat(2, minmax(0,1fr));gap:10px;}
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  z-index:500;
  background:rgba(20,8,32,0.92);
  display:none;
  align-items:center;
  justify-content:center;
  padding:40px;
}
.lightbox.open{display:flex;}

.lightbox img{
  max-width:90vw;
  max-height:85vh;
  width:auto;
  height:auto;
  border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next{
  position:absolute;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.4);
  color:#fff;
  border-radius:50%;
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  cursor:pointer;
  transition:background .2s ease;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{background:rgba(255,255,255,0.28);}

.lightbox-close{top:24px;right:24px;}
.lightbox-prev{left:24px;top:50%;transform:translateY(-50%);}
.lightbox-next{right:24px;top:50%;transform:translateY(-50%);}

@media (max-width:600px){
  .lightbox{padding:16px;}
  .lightbox-close{top:10px;right:10px;width:40px;height:40px;}
  .lightbox-prev{left:6px;width:40px;height:40px;}
  .lightbox-next{right:6px;width:40px;height:40px;}
}

/* Full-screen PDF viewer (Bio / Resume "View Full Screen") — opens in-page
   rather than a new browser tab, with an explicit close (X) button so a
   visitor always has a clear, obvious way back to the page underneath. */
.pdf-lightbox{
  position:fixed;
  inset:0;
  z-index:500;
  background:rgba(20,8,32,0.92);
  display:none;
  align-items:center;
  justify-content:center;
  padding:40px;
}
.pdf-lightbox.open{display:flex;}

.pdf-lightbox iframe{
  width:min(1000px, 92vw);
  height:88vh;
  border:0;
  border-radius:8px;
  background:#FFFFFF;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}

.pdf-lightbox-close{
  position:absolute;
  top:24px;right:24px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.4);
  color:#fff;
  border-radius:50%;
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  cursor:pointer;
  transition:background .2s ease;
}
.pdf-lightbox-close:hover,
.pdf-lightbox-close:focus-visible{background:rgba(255,255,255,0.28);}

@media (max-width:600px){
  .pdf-lightbox{padding:16px;}
  .pdf-lightbox-close{top:10px;right:10px;width:40px;height:40px;}
  .pdf-lightbox iframe{height:82vh;}
}

/* Media / interview cards */
.media-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:32px;
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
}
.media-card{
  padding:16px 16px 20px;
  background:linear-gradient(145deg, #F7F0FF 0%, #E6DAFF 58%, #D4C1EC 100%);
  border:1px solid #C3B1E1;
  border-radius:14px;
  box-shadow:
    0 13px 28px rgba(58,31,76,0.17),
    0 6px 0 rgba(185,154,217,0.68),
    inset 0 1px 1px rgba(255,255,255,0.90);
}
.media-title{
  font-family:'Montserrat', sans-serif;
  font-size:19px;
  font-weight:700;
  color:#3A1F4C;
  text-align:center;
  margin-top:14px;
}
@media (max-width:950px){
  .media-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:620px){
  .media-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   BIO / RESUME PDF PAGES
   ========================================================================== */

.pdf-actions{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.pdf-action{
  padding:12px 22px;
  font-family:'Montserrat', sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:1px;
  color:#3A1F4C;
  background:linear-gradient(145deg, #F5ECFF 0%, #D7C3EE 55%, #B99AD9 100%);
  border:1px solid #8E68B8;
  border-radius:8px;
  box-shadow:
    0 7px 15px rgba(58,31,76,0.18),
    inset 0 1px 1px rgba(255,255,255,0.80);
  transition:transform .2s ease, box-shadow .2s ease;
}
.pdf-action:hover{
  transform:translateY(-3px);
  box-shadow:
    0 11px 20px rgba(58,31,76,0.24),
    inset 0 1px 1px rgba(255,255,255,0.80);
}

/* Explicit way to leave the full-page PDF preview and return to Home,
   beyond just clicking the nav again. */
.pdf-back-row{
  display:flex;
  justify-content:center;
  margin:28px 0 8px;
}

.pdf-back-link{
  font-family:'Montserrat', sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.5px;
  color:var(--title-purple);
  padding:10px 4px;
  border-bottom:2px solid transparent;
  transition:border-color .2s ease;
}
.pdf-back-link:hover,
.pdf-back-link:focus-visible{
  border-bottom-color:var(--title-purple);
}

.pdf-frame{
  width:min(1100px, calc(100% - 40px));
  margin:28px auto 24px;
  padding:14px;
  background:linear-gradient(145deg, #F7F0FF 0%, #E6DAFF 60%, #D4C1EC 100%);
  border:1px solid #C3B1E1;
  border-radius:14px;
  box-shadow:
    0 14px 30px rgba(58,31,76,0.17),
    inset 0 1px 1px rgba(255,255,255,0.90);
}
.pdf-frame iframe{
  display:block;
  width:100%;
  min-height:850px;
  border:0;
  border-radius:7px;
  background:#FFFFFF;
}

.pdf-fallback{
  text-align:center;
  font-family:'Montserrat', sans-serif;
  font-size:14px;
  color:var(--deep-plum);
  opacity:.75;
  margin:0 auto 80px;
  max-width:600px;
  padding:0 20px;
}

@media (max-width:760px){
  .pdf-frame iframe{min-height:600px;}
  .pdf-actions{flex-direction:column;align-items:center;}
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

.contact-section{
  padding:0 20px 90px;
}

.contact-box{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:42px 46px;
  background:linear-gradient(145deg, #F7F0FF 0%, #E6DAFF 58%, #D4C1EC 100%);
  border:1px solid #C3B1E1;
  border-radius:16px;
  box-shadow:
    0 16px 34px rgba(58,31,76,0.18),
    inset 0 1px 1px rgba(255,255,255,0.90);
}

.name-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;
  margin-bottom:22px;
}

.form-field{margin-bottom:22px;}
.form-field:last-of-type{margin-bottom:0;}

.contact-box label{
  display:block;
  font-family:'Montserrat', sans-serif;
  font-size:16px;
  font-weight:600;
  letter-spacing:0.6px;
  color:#3A1F4C;
  margin-bottom:8px;
}

.contact-box input,
.contact-box textarea{
  width:100%;
  font-family:'Montserrat', sans-serif;
  font-size:16px;
  font-weight:400;
  color:#3A1F4C;
  background:rgba(255,255,255,0.76);
  border:1px solid #C3B1E1;
  border-radius:9px;
  padding:14px 16px;
  box-shadow:inset 0 2px 5px rgba(58,31,76,0.07);
}

.contact-box textarea{
  min-height:190px;
  resize:vertical;
}

.contact-box input:focus,
.contact-box textarea:focus{
  outline:none;
  border-color:#4C1D95;
  box-shadow:0 0 0 3px rgba(76,29,149,0.10), inset 0 2px 5px rgba(58,31,76,0.07);
}

.honeypot-field{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

.submit-row{
  text-align:center;
  margin-top:28px;
}

.submit-button{
  min-width:180px;
  padding:15px 34px;
  font-family:'Montserrat', sans-serif;
  font-size:18px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#FFFFFF;
  background:linear-gradient(145deg, #6B3AA3 0%, #4C1D95 100%);
  border:1px solid #3A1F4C;
  border-radius:8px;
  box-shadow:
    0 8px 16px rgba(58,31,76,0.28),
    inset 0 1px 1px rgba(255,255,255,0.25);
  cursor:pointer;
  transition:transform 0.25s ease, box-shadow 0.25s ease, opacity .2s ease;
}
.submit-button:hover{
  transform:translateY(-3px);
  box-shadow:
    0 11px 20px rgba(58,31,76,0.32),
    inset 0 1px 1px rgba(255,255,255,0.25);
}
.submit-button:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}

.form-status{
  text-align:center;
  font-family:'Montserrat', sans-serif;
  font-size:15px;
  font-weight:600;
  margin-top:20px;
  min-height:22px;
}
.form-status.success{color:#2E6B3E;}
.form-status.error{color:#8E2A2A;}

@media (max-width:640px){
  .contact-box{padding:30px 24px;}
  .name-row{grid-template-columns:1fr;gap:0;}
  .name-row .form-field{margin-bottom:22px;}
}

/* ==========================================================================
   FOOTER — global, reused on every page: FOLLOW YEENA + social row
   ========================================================================== */

/* ==========================================================================
   BRAND WAVE MOTIF — flowing lavender/plum + thin gold ribbon, the closing
   Yeena Fisher visual signature at the bottom of the page (spec section 13)
   ========================================================================== */
.brand-wave-motif{
  position:relative;
  z-index:1;
  width:100%;
  line-height:0;
  margin-bottom:-2px; /* blend seamlessly into the footer below */
}
.brand-wave-motif svg{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1440 / 220;
}

.site-footer{
  background:#F3E8FF;
  border-top:2px solid #D8C6EE;
  box-shadow:0 -3px 12px rgba(58,31,76,0.06);
  padding:44px 0 32px;
  text-align:center;
}

.follow-heading{
  font-family:'Montserrat', sans-serif;
  font-weight:700;
  font-size:18px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:#3A1F4C;
  margin-bottom:22px;
}

.social-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:34px;
  flex-wrap:nowrap;
  width:100%;
  margin-bottom:28px;
}

.social-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Montserrat', sans-serif;
  font-size:14px;
  font-weight:600;
  color:#3A1F4C;
  text-decoration:none;
  transition:transform .22s ease, color .22s ease;
}

.social-link:hover,
.social-link:focus-visible{
  color:#4C1D95;
  transform:translateY(-2px);
}

.social-link svg{
  width:28px;
  height:28px;
  flex-shrink:0;
}

/* Contact button — shown alongside the social icons in the footer, so it
   appears on every page/tab of the site, not just as a plain text link. */
.social-contact-btn{
  display:inline-block;
  margin:0 auto 22px;
  padding:12px 34px;
  font-family:'Montserrat', sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#3A1F4C;
  background:linear-gradient(145deg, #F5ECFF 0%, #D7C3EE 55%, #B99AD9 100%);
  border:1px solid #8E68B8;
  border-radius:30px;
  box-shadow:
    0 8px 16px rgba(58,31,76,0.20),
    0 0 0 1px rgba(216,178,92,0.55),
    inset 0 1px 1px rgba(255,255,255,0.80);
  transition:transform .2s ease, box-shadow .2s ease;
}
.social-contact-btn:hover,
.social-contact-btn:focus-visible{
  transform:translateY(-3px);
  color:#3A1F4C;
  box-shadow:
    0 12px 22px rgba(58,31,76,0.26),
    0 0 0 1px rgba(216,178,92,0.75),
    inset 0 1px 1px rgba(255,255,255,0.80);
}

.footer-copy{
  font-family:'Montserrat', sans-serif;
  font-size:13px;
  color:var(--deep-plum);
  opacity:.75;
}
.footer-copy a{text-decoration:underline;}
.footer-copy a:hover{color:#4C1D95;}

@media (max-width:900px){
  .social-row{gap:22px;}
  .social-link span{font-size:13px;}
}

@media (max-width:640px){
  .social-row{
    flex-wrap:wrap;
    row-gap:20px;
    column-gap:26px;
  }
  .social-link{min-height:44px;}
}

/* ================================================================
   VERSION 8 — HOME DEMO REEL DIRECT YOUTUBE EMBED
   Keeps Version 7 visual design intact. Only the Home Demo Reel
   receives a direct standard YouTube iframe embed.
   ================================================================ */
.demo-reel-embed {
  width: min(58vw, 470px);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(43, 7, 61, 0.22);
  background: #000;
}

.demo-reel-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 800px) {
  .demo-reel-embed {
    width: min(88vw, 470px);
  }
}

/* ==========================================================
   HEADSHOT CROPPING FIX
   Applies ONLY to Headshot galleries + Home preview cards.
   Red Carpet remains unchanged.
   ========================================================== */

/* HEADSHOTS TAB — Theatrical + Commercial gallery thumbnails */
#page-headshots .photo-grid button {
    aspect-ratio: 4 / 5;
    background: #E6DAFF;
}

#page-headshots .photo-grid img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
}

/* HOME PAGE — Theatrical + Commercial preview images */
.headshot-preview-section .preview-card img {
    width: 220px;
    height: 290px;
    object-fit: contain;
    object-position: center top;
    background: #E6DAFF;
}