/* ==========================================================================
   Design tokens and global foundations
   ========================================================================== */
:root {
  --black:#050505;
  --black-2:#0b0908;
  --ivory:#f5f1e8;
  --gold:#c79a4b;
  --bronze:#8b5a2b;
  --red:#a80b24;
  --grey:#aaa49b;
  --line:rgba(199,154,75,.34);
  --display:"Bodoni Moda",serif;
  --sans:"Manrope",sans-serif;
  --pad:clamp(22px,4.2vw,72px)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--black);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.55
}

body.menu-open {
  overflow:hidden
}

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

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

button {
  font:inherit
}

.skip-link {
  position:fixed;
  z-index:1000;
  left:1rem;
  top:-5rem;
  background:var(--ivory);
  color:var(--black);
  padding:.7rem 1rem
}

.skip-link:focus {
  top:1rem
}

/* ==========================================================================
   Header and primary navigation
   ========================================================================== */
.site-header {
  height:104px;
  position:absolute;
  z-index:20;
  inset:0 0 auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:4vw;
  padding:0 var(--pad);
  border-bottom:1px solid transparent;
  transition:.35s
}

.site-header.is-scrolled {
  position:fixed;
  height:78px;
  background:rgba(5,5,5,.93);
  backdrop-filter:blur(14px);
  border-color:var(--line)
}

.brand {
  display:flex;
  align-items:center;
  gap:14px;
  min-width:max-content
}

.brand img,.footer-brand img {
  border-radius:50%;
  object-fit:cover
}

.brand strong,.footer-brand strong {
  display:block;
  font:400 clamp(22px,2vw,34px)/1 var(--display)
}

.brand small,.footer-brand small {
  display:block;
  margin-top:7px;
  color:var(--gold);
  font-size:8px;
  letter-spacing:.22em;
  text-transform:uppercase
}

.site-nav {
  display:flex;
  justify-content:center;
  gap:clamp(22px,4vw,62px)
}

.site-nav a,.button,.text-link,.section-head a {
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase
}

.site-nav a {
  position:relative
}

.site-nav a:after {
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-8px;
  height:1px;
  background:var(--gold);
  transition:.3s
}

.site-nav a:hover:after {
  right:0
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  min-height:46px;
  padding:0 22px;
  border:1px solid rgba(199,154,75,.65);
  color:#e3bd72;
  transition:.25s
}

.button:hover {
  background:var(--gold);
  color:var(--black)
}

.menu-toggle {
  display:none
}

/* ==========================================================================
   Homepage hero
   ========================================================================== */
.hero {
  position:relative;
  min-height:clamp(690px,60vw,850px);
  overflow:hidden;
  border-bottom:1px solid var(--line);
  isolation:isolate
}

.hero-art {
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 70% 30%,#2b170c 0,transparent 28%),#030303
}

.hero-art:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#030303 0 36%,transparent 60%),linear-gradient(0deg,#030303 0,transparent 26%);
  z-index:5;
  pointer-events:none
}

.hero-art img {
  position:absolute;
  z-index:3;
  right:-3%;
  bottom:-11%;
  width:min(72vw,1080px);
  height:88%;
  object-fit:cover;
  object-position:50% 48%;
  mix-blend-mode:multiply;
  filter:contrast(1.3) saturate(.78) sepia(.12) brightness(.86);
  -webkit-mask-image:radial-gradient(ellipse 67% 72% at 54% 48%,#000 38%,rgba(0,0,0,.88) 60%,transparent 78%);
  mask-image:radial-gradient(ellipse 67% 72% at 54% 48%,#000 38%,rgba(0,0,0,.88) 60%,transparent 78%)
}

.hero-disc {
  position:absolute;
  z-index:2;
  width:min(42vw,650px);
  aspect-ratio:1;
  border-radius:50%;
  right:10%;
  top:14%;
  background:radial-gradient(circle at 38% 32%,#a87531,#4a260e 52%,#1a0c05 75%);
  box-shadow:inset 0 0 0 1px var(--gold);
  opacity:.82
}

.hero-disc:after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light
}

.hero-arc {
  position:absolute;
  z-index:1;
  width:66vw;
  aspect-ratio:1;
  border:1px solid var(--gold);
  border-radius:50%;
  left:-12%;
  top:11%
}

.hero-red {
  position:absolute;
  z-index:0;
  left:-7%;
  top:28%;
  width:15vw;
  height:50%;
  border-radius:0 100% 100% 0;
  background:radial-gradient(circle at 100% 50%,#250008,var(--red));
  box-shadow:0 0 60px rgba(168,11,36,.22)
}

.hero-copy {
  position:relative;
  z-index:8;
  width:min(470px,38vw);
  padding-top:clamp(180px,14vw,225px);
  margin-left:14.2vw
}

.eyebrow,.section-head h2 {
  margin:0;
  color:var(--gold);
  font-size:12px;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase
}

.hero-copy .eyebrow {
  display:none
}

.hero h1 {
  margin:0;
  font:400 clamp(60px,5.2vw,92px)/.98 var(--display);
  letter-spacing:-.035em
}

.gold-rule {
  display:block;
  width:48px;
  height:1px;
  margin:25px 0;
  background:var(--gold)
}

.hero-copy>p:not(.eyebrow) {
  max-width:390px;
  margin:0 0 27px;
  color:#d5d0ca;
  font-size:15px
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:22px;
  border-bottom:1px solid var(--gold);
  padding-bottom:7px
}

.text-link span,.section-head a span {
  color:var(--gold);
  font-size:20px;
  line-height:.6
}

.slide-index {
  position:absolute;
  z-index:9;
  right:3.8%;
  top:36%;
  display:grid;
  justify-items:center;
  gap:16px;
  font:400 13px var(--display)
}

.slide-index i {
  display:block;
  width:1px;
  height:78px;
  background:linear-gradient(var(--red) 0 45%,var(--ivory) 45% 48%,var(--bronze) 48%)
}

/* ==========================================================================
   Homepage featured models
   ========================================================================== */
.strip {
  padding:20px var(--pad);
  border-bottom:1px solid var(--line)
}

.section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:15px
}

.section-head a {
  display:flex;
  align-items:center;
  gap:18px
}

.model-grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px
}

.model-card {
  min-width:0;
  border:1px solid var(--line);
  background:#080706;
  transition:transform .3s,border-color .3s
}

.model-card:hover {
  transform:translateY(-5px);
  border-color:var(--gold)
}

.model-image {
  height:190px;
  overflow:hidden;
  background:#111
}

.model-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--focus) 31%;
  filter:saturate(.55) contrast(1.15)
}

.model-card:nth-child(even) img {
  filter:saturate(.9) contrast(1.12) sepia(.15)
}

.model-meta {
  padding:9px 12px
}

.model-meta h3 {
  margin:0;
  font:500 11px var(--sans);
  letter-spacing:.22em;
  text-transform:uppercase
}

.model-meta p {
  margin:4px 0 0;
  color:var(--gold);
  font-size:8px;
  letter-spacing:.19em;
  text-transform:uppercase
}

/* ==========================================================================
   Services
   ========================================================================== */
.services-section {
  display:grid;
  grid-template-columns:1.3fr repeat(3,1fr);
  padding:0 var(--pad);
  border-bottom:1px solid var(--line);
  background:var(--ivory);
  color:var(--black)
}

.section-intro,.service {
  padding:42px clamp(24px,3vw,55px);
  border-right:1px solid rgba(139,90,43,.35)
}

.section-intro {
  padding-left:0
}

.section-intro h2 {
  margin:18px 0 30px;
  font:400 clamp(32px,3vw,50px)/1.06 var(--display)
}

.service-icon {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  color:var(--bronze);
  border:1px solid var(--gold);
  border-radius:50%
}

.service h3 {
  margin:20px 0 7px;
  font:400 27px var(--display)
}

.service p {
  min-height:65px;
  margin:0 0 20px;
  font-size:12px
}

.services-section .text-link {
  font-size:9px
}

/* ==========================================================================
   Latest models / New Faces
   ========================================================================== */
.work-section {
  padding-top:24px;
  padding-bottom:28px
}

.work-grid {
  display:grid;
  grid-template-columns:1.05fr 1.1fr 1.1fr 1.05fr;
  gap:12px
}

.work-item {
  height:220px;
  margin:0;
  overflow:hidden;
  position:relative
}

.work-item img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s;
  filter:contrast(1.05) saturate(.76)
}

.work-item:nth-child(2) img {
  filter:grayscale(1) contrast(1.12)
}

.work-item:hover img {
  transform:scale(1.035)
}

.work-item figcaption {
  position:absolute;
  left:13px;
  bottom:10px;
  opacity:0;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:.25s
}

.work-item:hover figcaption {
  opacity:1
}

.work-crop-1 {
  object-position:55% 66%!important
}

.work-crop-2 {
  object-position:58% 43%!important
}

.work-crop-3 {
  object-position:37% 48%!important
}

.work-crop-4 {
  object-position:76% 52%!important
}

.last-models-grid {
  display:grid;
  grid-template-columns:repeat(var(--superstar-count),minmax(0,1fr));
  gap:12px;
  width:100%;
  margin-inline:auto
}

.last-models-grid.count-1 {
  max-width:340px
}

.last-models-grid.count-2 {
  max-width:692px
}

.last-models-grid.count-3 {
  max-width:1044px
}

.last-models-grid.count-4 {
  max-width:none
}

.last-model-card {
  min-width:0;
  border:1px solid rgba(199,154,75,.28);
  background:#080706
}

.last-model-card>a {
  display:block
}

.last-model-image {
  position:relative;
  aspect-ratio:2/3;
  overflow:hidden;
  background:#111
}

.last-model-image:after {
  content:"";
  position:absolute;
  inset:58% 0 0;
  background:linear-gradient(transparent,rgba(5,5,5,.58));
  pointer-events:none
}

.last-model-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 25%;
  filter:saturate(.82) contrast(1.06);
  transition:transform .7s,filter .45s
}

.last-model-card:hover img {
  transform:scale(1.025);
  filter:saturate(.98) contrast(1.04)
}

.last-model-star {
  z-index:3;
  top:12px;
  right:12px
}

.last-model-meta {
  padding:14px 15px 16px;
  border-top:1px solid rgba(199,154,75,.22)
}

.last-model-meta h3 {
  margin:0;
  font:400 23px/1 var(--display)
}

.last-model-meta p {
  margin:7px 0 0;
  color:var(--gold);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase
}

.last-models-empty {
  grid-column:1/-1;
  margin:18px 0 8px;
  padding:45px;
  border:1px solid var(--line);
  color:#8f8981;
  text-align:center
}

@media(max-width:700px) {
  .last-models-grid {
    display:flex;
    width:100%;
    gap:10px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:10px
  }

  .last-model-card {
    flex:0 0 min(76vw,310px);
    scroll-snap-align:start
  }

  .last-models-empty {
    flex:1 0 100%
  }

}

/* ==========================================================================
   Cities, about, booking and footer
   ========================================================================== */
.cities-section {
  display:grid;
  grid-template-columns:1.05fr repeat(3,1fr);
  padding:26px var(--pad);
  border-bottom:1px solid var(--line)
}

.cities-intro,.city {
  padding:12px 34px;
  border-right:1px solid var(--line)
}

.cities-intro {
  padding-left:0
}

.cities-intro>p:last-child {
  color:#bbb5ad;
  font-size:13px
}

.city {
  text-align:center
}

.city-symbol {
  display:grid;
  place-items:center;
  height:48px;
  color:var(--gold);
  font:400 24px var(--display);
  letter-spacing:.18em;
  border-bottom:1px solid var(--gold)
}

.city h3 {
  margin:10px 0 5px;
  font:400 25px var(--display);
  letter-spacing:.12em;
  text-transform:uppercase
}

.city p {
  min-height:38px;
  margin:0 0 13px;
  color:#c4beb6;
  font-size:11px
}

.city .text-link {
  font-size:8px
}

.about-section {
  text-align:center;
  padding:clamp(80px,10vw,150px) 24px;
  background:radial-gradient(circle at 50% 50%,#1a0f09,transparent 40%)
}

.about-section h2 {
  margin:22px 0;
  font:400 clamp(48px,6vw,88px)/1.02 var(--display)
}

.about-section em,.booking-banner em {
  color:var(--gold);
  font-style:normal
}

.about-section>p:last-child {
  max-width:650px;
  margin:auto;
  color:#bdb6ad
}

.booking-banner {
  display:grid;
  grid-template-columns:1.15fr 1fr auto;
  align-items:center;
  gap:55px;
  padding:28px 9vw;
  background:radial-gradient(circle at 28% 130%,#c00b2c 0,transparent 27%),linear-gradient(110deg,#3a0009,#7d071b 48%,#240005)
}

.booking-banner h2 {
  margin:0;
  font:400 clamp(34px,3.2vw,54px)/.95 var(--display)
}

.booking-banner p {
  max-width:330px;
  font-size:13px
}

.site-footer {
  display:grid;
  grid-template-columns:1.5fr .6fr .6fr 1.2fr;
  gap:50px;
  padding:36px var(--pad) 70px;
  color:#cbc5bd
}

.footer-brand {
  display:flex;
  align-items:center;
  gap:14px
}

.site-footer nav,.site-footer>div:not(.footer-brand) {
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.11em
}

.site-footer small {
  color:var(--gold);
  font-size:8px;
  letter-spacing:.18em;
  text-transform:uppercase
}

.copyright {
  grid-column:1/-1;
  border-top:1px solid var(--line);
  padding-top:16px;
  margin:12px 0 0;
  color:#817b73;
  font-size:8px;
  letter-spacing:.17em;
  text-transform:uppercase
}

.reveal {
  opacity:0;
  transform:translateY(12px);
  transition:opacity .7s var(--delay,0ms),transform .7s var(--delay,0ms)
}

.reveal.is-visible {
  opacity:1;
  transform:none
}

/* ==========================================================================
   Homepage responsive adaptations
   ========================================================================== */
@media(max-width:1050px) {
  .site-header {
    grid-template-columns:auto auto auto;
    justify-content:space-between
  }

  .site-nav {
    position:fixed;
    inset:0;
    background:rgba(5,5,5,.98);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:28px;
    transform:translateY(-105%);
    transition:.35s;
    z-index:-1
  }

  .site-nav.is-open {
    transform:none
  }

  .site-nav a {
    font:400 30px var(--display)
  }

  .menu-toggle {
    display:grid;
    width:42px;
    height:42px;
    border:0;
    background:none;
    padding:11px;
    gap:4px
  }

  .menu-toggle span {
    display:block;
    height:1px;
    background:var(--ivory)
  }

  .menu-toggle b {
    position:absolute;
    clip:rect(0,0,0,0)
  }

  .header-cta {
    min-height:40px
  }

  .hero-copy {
    margin-left:9vw;
    width:42vw
  }

  .model-grid {
    grid-template-columns:repeat(3,1fr)
  }

  .services-section {
    grid-template-columns:1fr 1fr
  }

  .section-intro,.service {
    border-bottom:1px solid rgba(139,90,43,.35)
  }

  .work-grid {
    grid-template-columns:1fr 1fr
  }

  .cities-section {
    grid-template-columns:1fr 1fr
  }

  .booking-banner {
    grid-template-columns:1fr 1fr
  }

  .booking-banner .button {
    grid-column:2
  }

  .site-footer {
    grid-template-columns:1.4fr 1fr 1fr
  }

}

@media(max-width:700px) {
  :root {
    --pad:20px
  }

  .site-header {
    height:80px
  }

  .brand img {
    width:46px;
    height:46px
  }

  .brand strong {
    font-size:22px
  }

  .brand small {
    font-size:6px
  }

  .header-cta {
    display:none
  }

  .hero {
    min-height:760px
  }

  .hero-art img {
    right:-38%;
    bottom:-1%;
    width:128%;
    height:68%;
    object-position:53% 48%;
    filter:contrast(1.35) saturate(.75) sepia(.1) brightness(.75);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 80%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 80%,transparent 100%)
  }

  .hero-art:after {
    background:linear-gradient(180deg,#030303 0 25%,transparent 55%),linear-gradient(90deg,#030303 0,transparent 44%)
  }

  .hero-disc {
    width:92vw;
    right:-29%;
    top:25%
  }

  .hero-arc {
    width:150vw;
    left:-71%;
    top:12%
  }

  .hero-red {
    width:30vw;
    left:-15%;
    top:29%;
    height:33%
  }

  .hero-copy {
    width:auto;
    margin:0;
    padding:135px 24px 0
  }

  .hero-copy .eyebrow {
    display:block;
    margin-bottom:18px;
    font-size:8px
  }

  .hero h1 {
    font-size:clamp(54px,16vw,76px);
    max-width:320px
  }

  .hero-copy>p:not(.eyebrow) {
    max-width:300px;
    font-size:13px
  }

  .slide-index {
    right:16px;
    top:38%
  }

  .strip {
    padding-top:28px;
    padding-bottom:28px
  }

  .section-head a {
    font-size:8px
  }

  .model-grid {
    display:flex;
    overflow:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:12px
  }

  .model-card {
    flex:0 0 44vw;
    scroll-snap-align:start
  }

  .model-image {
    height:220px
  }

  .services-section {
    grid-template-columns:1fr
  }

  .section-intro,.service {
    padding:34px 24px;
    border-right:0
  }

  .section-intro {
    padding-left:24px
  }

  .service {
    display:grid;
    grid-template-columns:46px 1fr;
    column-gap:18px
  }

  .service h3 {
    margin:3px 0
  }

  .service p,.service a {
    grid-column:2
  }

  .work-grid {
    display:flex;
    overflow:auto
  }

  .work-item {
    flex:0 0 78vw
  }

  .cities-section {
    grid-template-columns:1fr;
    padding-top:38px
  }

  .cities-intro,.city {
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:26px 14px
  }

  .about-section h2 br {
    display:none
  }

  .booking-banner {
    grid-template-columns:1fr;
    gap:18px;
    padding:40px 28px
  }

  .booking-banner .button {
    grid-column:auto;
    width:max-content
  }

  .site-footer {
    grid-template-columns:1fr 1fr;
    gap:34px
  }

  .footer-brand {
    grid-column:1/-1
  }

  .site-footer>div:not(.footer-brand) {
    grid-column:1/-1
  }

  .copyright {
    grid-column:1/-1
  }

}

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

  .reveal {
    opacity:1;
    transform:none;
    transition:none
  }

  * {
    animation:none!important;
    transition-duration:.01ms!important
  }

}

/* Hero cutout refinement: keep the approved photograph intact while separating it from the studio backdrop. */
.hero-art img {
  object-fit:contain;
  object-position:50% 58%;
  mix-blend-mode:normal;
  filter:contrast(1.14) saturate(.84) sepia(.08) brightness(.94) drop-shadow(0 22px 35px rgba(0,0,0,.72));
  -webkit-mask-image:none;
  mask-image:none
}

@media(max-width:700px) {
  .hero-art img {
    object-fit:contain;
    object-position:53% 52%;
    filter:contrast(1.16) saturate(.84) sepia(.08) brightness(.88) drop-shadow(0 20px 30px rgba(0,0,0,.76));
    -webkit-mask-image:none;
    mask-image:none
  }

}

/* Model photography: uploaded portrait assets are normalized to 2:3. */
.model-image {
  position:relative;
  height:auto;
  aspect-ratio:2/3
}

.model-image img {
  object-position:var(--focus) 30%
}

.superstar {
  position:absolute;
  z-index:2;
  top:10px;
  right:10px;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:1px solid rgba(255,213,74,.72);
  border-radius:50%;
  background:rgba(5,5,5,.76);
  color:#ffd54a;
  font-size:17px;
  line-height:1;
  filter:drop-shadow(0 2px 5px #000)
}

@media(max-width:700px) {
  .model-image {
    height:auto
  }

  .superstar {
    top:8px;
    right:8px;
    width:28px;
    height:28px
  }

}

.nav-booking-mobile {
  display:none
}

@media(max-width:700px) {
  .site-header,.site-header.is-scrolled {
    grid-template-columns:minmax(0,1fr) 48px;
    gap:12px;
    height:82px;
    padding:0 18px
  }

  .brand {
    position:relative;
    z-index:42;
    grid-column:1;
    min-width:0;
    max-width:calc(100vw - 90px)
  }

  .brand span {
    min-width:0
  }

  .brand strong {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }

  .menu-toggle {
    position:relative;
    z-index:43;
    grid-column:2;
    grid-row:1;
    justify-self:end;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    padding:13px 10px;
    gap:6px;
    border:1px solid rgba(199,154,75,.38)
  }

  .menu-toggle span {
    width:24px;
    transform-origin:center;
    transition:transform .25s,opacity .2s
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform:translateY(7px) rotate(45deg)
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity:0
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform:translateY(-7px) rotate(-45deg)
  }

  .site-nav {
    z-index:40;
    inset:0;
    justify-content:flex-start;
    align-items:stretch;
    gap:0;
    padding:118px 24px 36px;
    background:rgba(5,5,5,.985);
    overflow-y:auto;
    visibility:hidden;
    opacity:0;
    transform:translateY(-18px);
    pointer-events:none;
    transition:opacity .28s,transform .28s,visibility .28s
  }

  .site-nav.is-open {
    visibility:visible;
    opacity:1;
    transform:none;
    pointer-events:auto
  }

  .site-nav a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:15px 4px;
    border-bottom:1px solid rgba(199,154,75,.22);
    font:400 28px/1.15 var(--display);
    letter-spacing:0;
    text-transform:none
  }

  .site-nav a:after {
    display:none
  }

  .site-nav .nav-booking-mobile {
    display:flex;
    margin-top:26px;
    padding:15px 17px;
    border:1px solid var(--gold);
    color:var(--gold);
    font:500 11px var(--sans);
    letter-spacing:.16em;
    text-transform:uppercase
  }

}

/* Models archive */
.models-page {
  background:#070706
}

.archive-header {
  position:fixed;
  background:rgba(5,5,5,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px)
}

.models-intro {
  padding:170px var(--pad) 72px;
  border-bottom:1px solid var(--line);
  background:radial-gradient(circle at 78% 18%,rgba(139,90,43,.22),transparent 31%)
}

.breadcrumb {
  display:flex;
  gap:10px;
  margin-bottom:55px;
  color:#8f8981;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase
}

.breadcrumb a {
  color:var(--gold)
}

.models-intro-grid {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:end;
  gap:8vw
}

.models-intro h1 {
  margin:16px 0 0;
  font:400 clamp(70px,8vw,128px)/.9 var(--display);
  letter-spacing:-.045em
}

.models-intro-grid>p {
  max-width:520px;
  margin:0;
  color:#bbb4ab;
  font-size:15px
}

.models-filters {
  display:grid;
  grid-template-columns:repeat(3,minmax(150px,1fr)) auto auto;
  align-items:end;
  gap:14px;
  margin-top:38px;
  padding-top:25px;
  border-top:1px solid var(--line)
}

.models-filters>div {
  display:grid;
  gap:7px
}

.models-filters label {
  color:#9c958c;
  font-size:9px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase
}

.models-filters select {
  width:100%;
  min-height:46px;
  padding:0 38px 0 13px;
  border:1px solid var(--line);
  border-radius:0;
  background:#090807;
  color:var(--ivory);
  font:400 12px var(--sans)
}

.models-filters .button {
  cursor:pointer
}

.filters-reset {
  display:flex;
  align-items:center;
  min-height:46px;
  color:var(--gold);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase
}

.models-wall {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2px;
  padding:2px;
  background:var(--line)
}

.archive-model-card {
  min-width:0;
  background:var(--black)
}

.archive-model-card>a {
  display:block
}

.archive-model-image {
  position:relative;
  aspect-ratio:2/3;
  overflow:hidden;
  background:#111
}

.archive-model-image:after {
  content:"";
  position:absolute;
  inset:42% 0 0;
  background:linear-gradient(transparent,rgba(5,5,5,.82));
  pointer-events:none
}

.archive-model-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 25%;
  filter:saturate(.82) contrast(1.06);
  transition:transform .7s,filter .5s
}

.archive-model-card:hover img {
  transform:scale(1.025);
  filter:saturate(1) contrast(1.04)
}

.archive-watermark {
  position:absolute;
  z-index:2;
  left:18px;
  bottom:16px;
  color:rgba(245,241,232,.34);
  font:400 13px var(--display);
  letter-spacing:.09em
}

.archive-star {
  top:18px;
  right:18px;
  width:38px;
  height:38px;
  font-size:21px
}

.archive-model-meta {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  min-height:92px;
  padding:18px 20px 21px;
  border-top:1px solid rgba(199,154,75,.22)
}

.archive-model-meta h2 {
  margin:0 0 4px;
  font:400 31px/1 var(--display)
}

.archive-model-meta p,.archive-model-meta>span {
  margin:0;
  color:var(--gold);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase
}

.models-cta {
  display:grid;
  grid-template-columns:.75fr 1.2fr 1fr auto;
  align-items:center;
  gap:45px;
  padding:75px var(--pad);
  background:radial-gradient(circle at 30% 100%,rgba(168,11,36,.34),transparent 34%)
}

.models-cta h2 {
  margin:0;
  font:400 clamp(42px,4.2vw,68px)/.95 var(--display)
}

.models-cta h2 em {
  color:var(--gold);
  font-style:normal
}

.models-cta>p:not(.eyebrow) {
  max-width:380px;
  color:#bdb6ad
}

.empty-state {
  grid-column:1/-1;
  padding:90px;
  text-align:center
}

@media(max-width:800px) {
  .models-intro {
    padding-top:132px;
    padding-bottom:46px
  }

  .breadcrumb {
    margin-bottom:38px
  }

  .models-intro-grid {
    grid-template-columns:1fr;
    gap:25px
  }

  .models-intro h1 {
    font-size:64px
  }

  .models-filters {
    grid-template-columns:1fr;
    margin-top:30px
  }

  .models-filters .button,.filters-reset {
    width:100%
  }

  .models-wall {
    grid-template-columns:1fr;
    gap:1px
  }

  .archive-model-meta {
    min-height:84px
  }

  .models-cta {
    grid-template-columns:1fr;
    gap:22px;
    padding-top:58px;
    padding-bottom:58px
  }

  .models-cta .button {
    width:max-content
  }

}

/* Protected model imagery and animated Panther Red frame */
img,.protected-media {
  -webkit-user-select:none;
  user-select:none;
  -webkit-user-drag:none
}

.archive-model-image:before,.profile-photo:before {
  content:"";
  position:absolute;
  z-index:5;
  inset:10px;
  border:1px solid transparent;
  opacity:0;
  transform:scale(.97);
  transition:opacity .35s,transform .55s,border-color .35s;
  pointer-events:none
}

.archive-model-card:hover .archive-model-image:before,.archive-model-card:focus-within .archive-model-image:before,.profile-photo:hover:before,.profile-photo:focus-visible:before {
  opacity:1;
  transform:scale(1);
  border-color:var(--red)
}

/* Individual model profile */
.model-profile-page {
  background:#060606
}

.profile-layout {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(370px,.55fr);
  align-items:start;
  padding-top:104px
}

.profile-gallery {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px;
  background:#1b1611
}

.profile-photo {
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:#0d0c0b;
  aspect-ratio:2/3;
  overflow:hidden;
  cursor:zoom-in
}

.profile-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 25%;
  transition:filter .45s,transform .65s
}

.profile-photo:hover img {
  filter:brightness(.72);
  transform:scale(1.018)
}

.photo-watermark {
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:rgba(245,241,232,.22);
  font:400 clamp(15px,2vw,28px) var(--display);
  letter-spacing:.1em;
  white-space:nowrap;
  pointer-events:none
}

.photo-index {
  position:absolute;
  z-index:3;
  right:16px;
  bottom:13px;
  color:var(--gold);
  font-size:9px;
  letter-spacing:.14em
}

.profile-details {
  position:sticky;
  top:104px;
  min-height:calc(100vh - 104px);
  padding:58px clamp(30px,4vw,70px);
  background:radial-gradient(circle at 100% 0,rgba(139,90,43,.18),transparent 35%),#080706
}

.profile-details .breadcrumb {
  margin-bottom:50px
}

.profile-heading {
  padding-bottom:32px;
  border-bottom:1px solid var(--line)
}

.profile-heading h1 {
  margin:12px 0 0;
  font:400 clamp(64px,6vw,105px)/.9 var(--display);
  letter-spacing:-.035em
}

.profile-superstar {
  display:inline-flex;
  gap:8px;
  margin-bottom:16px;
  color:#ffd54a;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase
}

.profile-facts {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:0;
  padding:26px 0;
  border-bottom:1px solid var(--line)
}

.profile-facts div {
  padding:10px 14px 10px 0
}

.profile-facts dt,.profile-languages h2 {
  color:#807a72;
  font-size:9px;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase
}

.profile-facts dd {
  margin:5px 0 0;
  font:400 19px var(--display)
}

.profile-languages {
  padding:27px 0;
  border-bottom:1px solid var(--line)
}

.profile-languages h2 {
  margin:0 0 13px
}

.profile-languages div {
  display:flex;
  flex-wrap:wrap;
  gap:7px
}

.profile-languages span {
  padding:6px 10px;
  border:1px solid var(--line);
  color:#c8c0b6;
  font-size:10px
}

.profile-bio {
  color:#bcb5ac;
  font-size:13px
}

.profile-booking {
  width:100%;
  margin-top:30px;
  background:var(--red);
  border-color:var(--red);
  color:var(--ivory)
}

.profile-booking:hover {
  background:#85081c;
  color:#fff
}

.back-link {
  display:inline-block;
  margin-top:24px;
  color:var(--gold);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase
}

.lightbox {
  position:fixed;
  inset:0;
  width:100vw;
  max-width:none;
  height:100vh;
  max-height:none;
  margin:0;
  padding:20px;
  border:0;
  background:rgba(2,2,2,.97);
  color:var(--ivory);
  overflow:hidden
}

.lightbox::backdrop {
  background:#000
}

.lightbox[open] {
  display:grid;
  grid-template-columns:64px 1fr 64px;
  align-items:center
}

.lightbox figure {
  display:grid;
  place-items:center;
  margin:0;
  height:calc(100vh - 40px)
}

.lightbox figure img {
  max-width:100%;
  max-height:calc(100vh - 72px);
  object-fit:contain
}

.lightbox figcaption {
  position:absolute;
  bottom:13px;
  color:var(--gold);
  font-size:10px;
  letter-spacing:.15em
}

.lightbox-close,.lightbox-nav {
  z-index:2;
  border:1px solid var(--line);
  background:rgba(5,5,5,.75);
  color:var(--ivory);
  cursor:pointer
}

.lightbox-close {
  position:absolute;
  right:22px;
  top:20px;
  width:48px;
  height:48px;
  font-size:30px
}

.lightbox-nav {
  width:52px;
  height:52px;
  font-size:20px
}

.lightbox-nav:hover,.lightbox-close:hover {
  border-color:var(--red);
  color:var(--red)
}

@media(max-width:850px) {
  .profile-layout {
    grid-template-columns:1fr;
    padding-top:82px
  }

  .profile-gallery {
    grid-template-columns:1fr;
    gap:2px
  }

  .profile-details {
    position:relative;
    top:auto;
    min-height:0;
    padding:42px 24px;
    grid-row:1
  }

  .profile-details .breadcrumb {
    margin-bottom:35px
  }

  .profile-heading h1 {
    font-size:68px
  }

  .profile-gallery {
    grid-row:2
  }

  .lightbox[open] {
    grid-template-columns:45px 1fr 45px;
    padding:10px
  }

  .lightbox-nav {
    width:40px;
    height:46px
  }

  .lightbox figure {
    height:calc(100vh - 20px)
  }

}

@media(prefers-reduced-motion:reduce) {
  .archive-model-image:before,.profile-photo:before {
    transition:none
  }

}

/* Liquid Glass controls — rectangular silhouette with the brand's restrained luxury finish. */
.button,.menu-toggle,.nav-booking-mobile,.lightbox-close,.lightbox-nav {
  border-radius:5px;
  border-color:rgba(224,186,112,.58);
  background: linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.025) 46%,rgba(199,154,75,.08)), rgba(12,10,8,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.38),0 9px 24px rgba(0,0,0,.24);
  -webkit-backdrop-filter:blur(16px) saturate(145%);
  backdrop-filter:blur(16px) saturate(145%);
  transition:background .28s,border-color .28s,box-shadow .28s,color .28s,transform .28s;
}

.button:hover,.nav-booking-mobile:hover,.menu-toggle:hover,.lightbox-close:hover,.lightbox-nav:hover {
  border-color:rgba(238,201,130,.88);
  background: linear-gradient(180deg,rgba(255,255,255,.23),rgba(255,255,255,.055) 44%,rgba(199,154,75,.16)), rgba(20,16,11,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.34),0 13px 30px rgba(0,0,0,.31),0 0 18px rgba(199,154,75,.08);
  color:#f1cc83;
  transform:translateY(-1px);
}

.button:active,.nav-booking-mobile:active,.menu-toggle:active,.lightbox-close:active,.lightbox-nav:active {
  transform:translateY(0);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.15),0 5px 13px rgba(0,0,0,.24);
}

.button:focus-visible,.nav-booking-mobile:focus-visible,.menu-toggle:focus-visible,.lightbox-close:focus-visible,.lightbox-nav:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:3px;
}

.profile-booking {
  border-color:rgba(231,73,97,.68);
  background: linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.035) 43%,rgba(102,0,17,.2)), rgba(168,11,36,.7);
  color:var(--ivory);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(64,0,10,.5),0 11px 28px rgba(75,0,13,.3);
}

.profile-booking:hover {
  border-color:rgba(255,111,133,.82);
  background: linear-gradient(180deg,rgba(255,255,255,.23),rgba(255,255,255,.05) 42%,rgba(85,0,14,.22)), rgba(145,8,30,.78);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(64,0,10,.54),0 14px 32px rgba(93,0,17,.38);
}

@media(prefers-reduced-motion:reduce) {
  .button,.menu-toggle,.nav-booking-mobile,.lightbox-close,.lightbox-nav {
    transition:none
  }

  .button:hover,.nav-booking-mobile:hover,.menu-toggle:hover,.lightbox-close:hover,.lightbox-nav:hover {
    transform:none
  }

}

/* Unified dynamic photo frames — Panther Nights brand red. */
.model-image:before,.last-model-image:before {
  content:"";
  position:absolute;
  z-index:5;
  inset:10px;
  border:1px solid transparent;
  opacity:0;
  transform:scale(.97);
  transition:opacity .35s,transform .55s,border-color .35s;
  pointer-events:none;
}

.model-card:hover,.model-card:focus-within {
  border-color:var(--line)
}

.model-card .model-image img {
  transition:transform .75s cubic-bezier(.2,.65,.25,1),filter .45s
}

.model-card:hover .model-image img,.model-card:focus-within .model-image img {
  transform:scale(1.035)
}

.model-card:hover .model-image:before,.model-card:focus-within .model-image:before, .last-model-card:hover .last-model-image:before,.last-model-card:focus-within .last-model-image:before {
  opacity:1;
  transform:scale(1);
  border-color:var(--red);
}

@media(prefers-reduced-motion:reduce) {
  .model-image:before,.last-model-image:before,.model-card .model-image img {
    transition:none
  }

  .model-card:hover .model-image img,.model-card:focus-within .model-image img {
    transform:none
  }

}

/* Booking banner — approved Panther Nights red satin artwork. */
.booking-banner {
  background: linear-gradient(90deg,rgba(31,0,6,.5),rgba(52,0,9,.2) 42%,rgba(24,0,5,.48)), url("../images/panther-nights-red-satin.webp") center center/cover no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.5);
}

.booking-banner h2,.booking-banner p {
  position:relative;
  z-index:1;
  text-shadow:0 2px 10px rgba(0,0,0,.82),0 1px 2px rgba(0,0,0,.9)
}

.booking-banner h2 {
  color:#fffaf4
}

.booking-banner h2 em {
  color:#efc77a
}

.booking-banner p {
  color:#f2e9e5;
  font-weight:400
}

.booking-banner .button {
  border-color:rgba(239,199,122,.82);
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.035) 46%),rgba(9,2,3,.42);
  color:#f5d89f;
  text-shadow:0 1px 4px #000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.42),0 10px 24px rgba(0,0,0,.3)
}

@media(max-width:700px) {
  .booking-banner {
    background-position:54% center
  }

  .booking-banner p {
    max-width:310px
  }

}

/* Hero art direction — use the reconstructed render plate instead of flat CSS shapes. */
.hero-art {
  background-color:#030303;
  background-image:url("../../hero-image/panther-nights-hero-background.png");
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}

.hero-arc,.hero-red,.hero-disc {
  display:none
}

.hero-art:after {
  background: linear-gradient(90deg,rgba(2,2,2,.3) 0,rgba(2,2,2,.14) 31%,transparent 58%), linear-gradient(180deg,rgba(2,2,2,.2),transparent 30%,rgba(2,2,2,.3) 100%);
}

@media(max-width:700px) {
  .hero-art {
    background-position:left center;
    background-size:auto 100%
  }

  .hero-art:after {
    background:linear-gradient(180deg,rgba(3,3,3,.18) 0 10%,rgba(3,3,3,.08) 34%,transparent 62%,rgba(3,3,3,.28) 100%),linear-gradient(90deg,rgba(3,3,3,.16),transparent 72%)
  }

}

/* Align the model's eyes with the top edge of the Elegance heading. */
.hero-art img {
  bottom:4%
}

@media(max-width:700px) {
  .hero-art img {
    bottom:35%
  }

}

/* Crop the hero container from below without altering the source image. */
.hero {
  min-height:clamp(620px,46vw,700px)
}

.hero-art img {
  top:clamp(30px,calc(4.25vw - 20px),48px);
  bottom:auto;
  height:clamp(607px,52.8vw,748px)
}

@media(max-width:700px) {
  .hero {
    min-height:500px
  }

  .hero-art img {
    top:-42px;
    bottom:auto;
    height:517px
  }

}

/* Models intro: 35px more compact while preserving its vertical balance. */
.models-intro {
  padding-top:152px;
  padding-bottom:55px
}

@media(max-width:800px) {
  .models-intro {
    padding-top:114px;
    padding-bottom:29px
  }

}

/* Models CTA — shared Panther Nights red satin artwork. */
.models-cta {
  background: linear-gradient(90deg,rgba(25,0,5,.55),rgba(39,0,7,.2) 48%,rgba(20,0,4,.52)), url("../images/panther-nights-red-satin.webp") center center/cover no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.5);
}

.models-cta h2,.models-cta>p {
  position:relative;
  z-index:1;
  text-shadow:0 2px 12px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.95);
}

.models-cta h2 {
  color:#fffaf4
}

.models-cta h2 em {
  color:#efc77a
}

.models-cta>p:not(.eyebrow) {
  color:#f2e9e5;
  font-weight:400
}

.models-cta .button {
  border-color:rgba(239,199,122,.82);
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.035) 46%),rgba(9,2,3,.42);
  color:#f5d89f;
  text-shadow:0 1px 4px #000
}

@media(max-width:800px) {
  .models-cta {
    background-position:54% center
  }

}
