/* Phoenix Casting — on the Dearing enterprise tokens.
   gold #D4AF37 · black #050505 · warm ivory #F8F7F3 · soft champagne #F3F1EB · charcoal #111111
   Montserrat throughout. Bands alternate dark/light the way the original PHX page did. */
:root{
  --gold:      #D4AF37;
  --gold-lt:   #E3C76B;
  --black:     #050505;
  --charcoal:  #111111;
  --charcoal-2:#1B1B1B;
  --ivory:     #F8F7F3;
  --champagne: #F3F1EB;
  --ink:       #14140F;
  --ink-soft:  #4A4943;
  --bone:      #F8F7F3;
  --bone-soft: #C9C6BD;

  --body:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --page:1180px;
  --gut:clamp(26px,5.5vw,64px);
  color-scheme: light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--black); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.wrap{max-width:var(--page); margin:0 auto; padding-inline:var(--gut)}

/* bands ------------------------------------------------------------------ */
.band-dark{background:var(--black); color:var(--bone)}
.band-ivory{background:var(--ivory); color:var(--ink)}
.band-champagne{background:var(--champagne); color:var(--ink)}
.band-dark a{color:var(--bone)}
.sec{padding-block:clamp(4.4rem,9vw,7.6rem)}

/* type ------------------------------------------------------------------- */
h1,h2,h3{margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.08; text-wrap:balance}
h1{font-size:clamp(2.5rem,6vw,4.6rem); letter-spacing:-.03em}
h2{font-size:clamp(1.9rem,3.8vw,3rem)}
h3{font-size:1.06rem; font-weight:700; letter-spacing:-.005em}
p{margin:0}
.lede{font-size:clamp(1.05rem,1.7vw,1.2rem); line-height:1.72; max-width:56ch; font-weight:400}
.band-dark .lede{color:var(--bone-soft)}
.band-ivory .lede,.band-champagne .lede{color:var(--ink-soft)}
.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.1rem; font-weight:600;
}
.band-ivory .eyebrow,.band-champagne .eyebrow{color:#9A7C1E}

/* buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; font-family:var(--body);
  font-size:.94rem; font-weight:700; letter-spacing:.01em; padding:.92rem 1.6rem;
  border-radius:999px; text-decoration:none; transition:transform .16s, background .16s, border-color .16s;
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold); color:#1B1503; border:1px solid var(--gold)}
.btn-gold:hover{background:var(--gold-lt); border-color:var(--gold-lt)}
.btn-ghost{background:transparent; color:var(--bone); border:1px solid rgba(248,247,243,.28)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold-lt)}
.band-ivory .btn-ghost,.band-champagne .btn-ghost{color:var(--ink); border-color:rgba(20,20,15,.22)}

/* sister strip + header --------------------------------------------------- */
.corp{background:var(--black); border-bottom:1px solid rgba(248,247,243,.10)}
.corp-in{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-block:.55rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600}
.corp-l{color:var(--bone-soft); opacity:.65}
.corp a{color:var(--bone-soft); text-decoration:none; display:inline-flex; align-items:center; gap:.35rem}
.corp a:hover{color:var(--gold-lt)}
@media (max-width:640px){.corp-l{display:none} .corp-in{justify-content:flex-end}}

.site-head{position:sticky; top:0; z-index:60; background:rgba(5,5,5,.9);
  backdrop-filter:blur(10px); border-bottom:1px solid rgba(248,247,243,.10)}
.head-in{display:flex; align-items:center; justify-content:space-between; gap:1.4rem; padding-block:.7rem}
.mark{display:flex; align-items:center; text-decoration:none}
.mark img{height:56px; width:auto}
.head-nav{display:flex; gap:1.6rem}
.head-nav a{font-size:.88rem; font-weight:500; text-decoration:none; color:var(--bone-soft); transition:color .16s}
.head-nav a:hover{color:var(--gold-lt)}
.head-nav a.actor-link{color:var(--gold); font-weight:600}
.head-nav a.actor-link:hover{color:var(--gold-lt); text-decoration:underline}
.actor-bar{background:var(--charcoal); border-bottom:1px solid rgba(248,247,243,.10)}
.actor-bar-in{display:flex; justify-content:center; padding-block:.6rem; font-size:.8rem; text-align:center}
.actor-bar a{color:var(--gold); font-weight:600; text-decoration:none}
.actor-bar a:hover{text-decoration:underline}
@media (min-width:901px){.actor-bar{display:none}}
.head-tel{font-family:var(--mono); font-size:.9rem; color:var(--bone); text-decoration:none; font-weight:600; font-variant-numeric:tabular-nums}
.head-tel:hover{color:var(--gold-lt)}
@media (max-width:900px){.head-nav{display:none}}

/* hero -------------------------------------------------------------------- */
.hero{position:relative; background:var(--black); overflow:hidden}
.hero-photo{position:absolute; inset:0}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:72% 50%}
.hero-photo::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(5,5,5,.97) 0%, rgba(5,5,5,.94) 30%, rgba(5,5,5,.80) 55%, rgba(5,5,5,.55) 78%, rgba(5,5,5,.45) 100%)}
.hero-in{position:relative; z-index:2; padding-block:clamp(3.4rem,8vw,7rem) clamp(2.6rem,5vw,4rem)}
.hero h1{max-width:13ch; color:var(--bone); text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero .lede{margin-top:1.4rem; max-width:46ch; color:#E8E5DC; text-shadow:0 1px 18px rgba(0,0,0,.55)}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem}
.hero-meta{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.7rem 2rem;
  margin-top:clamp(2.6rem,5vw,4rem); padding-top:1.6rem; border-top:1px solid rgba(248,247,243,.16)}
.hero-meta b{display:block; font-weight:700; font-size:1rem; color:var(--bone); margin-bottom:.15rem}
@media (max-width:900px){.hero-meta{grid-template-columns:1fr 1fr}}
.hero-meta span{font-family:var(--mono); font-size:.8rem; color:var(--bone-soft); letter-spacing:.01em}

/* client wall ------------------------------------------------------------- */
.wall-head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:2.4rem}
.wall-note{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-soft); font-weight:600}
.logos{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(248,247,243,.14); border-left:1px solid rgba(248,247,243,.14)}
.logos figure{margin:0; display:grid; place-items:center; min-height:126px; padding:1.5rem clamp(1rem,2.4vw,2rem);
  border-right:1px solid rgba(248,247,243,.14); border-bottom:1px solid rgba(248,247,243,.14)}
.logos img{max-width:100%; max-height:var(--h,40px); width:auto; height:auto;
  filter:brightness(0) invert(1); opacity:.82; transition:opacity .2s}
.logos img.flat{filter:none}
.logos figure:hover img{opacity:1}
@media (max-width:900px){.logos{grid-template-columns:repeat(3,1fr)} .logos figure{min-height:104px}}
@media (max-width:560px){.logos{grid-template-columns:repeat(2,1fr)} .logos figure{min-height:92px;padding:1.1rem}}
.also{margin-top:1.8rem; font-size:.95rem; color:var(--bone-soft); line-height:1.9}
.also b{color:var(--bone); font-weight:600}
.agencies{margin-top:1.5rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--bone-soft); line-height:2}
.agencies b{color:var(--gold); font-weight:500}

/* split heading ----------------------------------------------------------- */
.story-h{max-width:14ch}
.story{font-size:clamp(1.12rem,1.9vw,1.32rem); line-height:1.65; max-width:58ch; color:var(--ink-soft);
  margin:1.4rem 0 clamp(2.6rem,5vw,3.8rem)}
.split{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(1.6rem,4vw,4rem); align-items:start; margin-bottom:clamp(2.2rem,4vw,3.2rem)}
@media (max-width:860px){.split{grid-template-columns:1fr; gap:1.3rem}}

/* offer ------------------------------------------------------------------- */
.offer{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.9rem,3.4vw,2.9rem) clamp(1.8rem,3.2vw,2.8rem)}
.offer > div{background:#fff; border-top:3px solid var(--gold); border-radius:18px;
  padding:1.5rem 1.5rem 1.6rem; box-shadow:0 10px 24px rgba(0,0,0,.06)}
@media (max-width:900px){.offer{grid-template-columns:1fr}}
.num{display:block; font-size:.74rem; font-weight:700; letter-spacing:.14em; color:#9A7C1E; margin-bottom:.55rem}
.services{margin-top:clamp(2rem,4vw,3rem); font-family:var(--mono); font-size:.74rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); line-height:2}
.offer p{margin-top:.55rem; font-size:.98rem; color:var(--ink-soft)}

/* the one line that has to land ------------------------------------------- */
.bigline{
  font-size:clamp(1.5rem,3.4vw,2.5rem); font-weight:800; letter-spacing:-.02em; line-height:1.18;
  max-width:20ch; margin:clamp(1.4rem,2.6vw,2.2rem) 0 clamp(2.4rem,4.5vw,3.4rem);
  padding-left:clamp(1rem,2vw,1.6rem); border-left:4px solid var(--gold);
}
/* the practical facts, small on purpose ----------------------------------- */
.facts{list-style:none; margin:clamp(2.2rem,4vw,3rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:.9rem clamp(1.8rem,3.2vw,2.8rem)}
.facts li{font-size:.92rem; color:var(--ink-soft); padding-top:.8rem; border-top:1px solid rgba(20,20,15,.16)}
.facts b{color:var(--ink); font-weight:700}

/* process ----------------------------------------------------------------- */
.steps{border-top:1px solid rgba(20,20,15,.14)}
.step{display:grid; grid-template-columns:52px 210px 1fr; gap:1.4rem;
  padding:1.7rem 0; border-bottom:1px solid rgba(20,20,15,.14); align-items:start}
.step-n{font-family:var(--mono); font-size:.86rem; color:var(--gold); font-weight:600; padding-top:.2rem}
.step p{font-size:.98rem; color:var(--ink-soft); max-width:56ch}
@media (max-width:760px){.step{grid-template-columns:44px 1fr} .step p{grid-column:2}}

/* the room ---------------------------------------------------------------- */
.room-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.6rem,4vw,3.4rem); align-items:center}
.room-copy .lede{margin-top:1.1rem}
.room-shots{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}
.room-shots img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.room-shots img:first-child{grid-column:1/-1; aspect-ratio:16/9}
@media (max-width:860px){.room-grid{grid-template-columns:1fr}}


/* quotes: the brand's own cards, a big gold mark, the source named honestly ------ */
.quotes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.2rem,2.4vw,2rem)}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}
.quotes figure{margin:0; position:relative; background:#fff; border-radius:18px;
  padding:2.4rem 1.6rem 1.6rem; box-shadow:0 10px 24px rgba(0,0,0,.06)}
.qmark{position:absolute; top:.35rem; left:1.2rem; font-size:4.2rem; line-height:1; font-weight:800;
  color:var(--gold); opacity:.9}
.quotes blockquote{margin:0; font-size:1rem; line-height:1.7; color:var(--ink)}
.quotes figcaption{margin-top:1.2rem; padding-top:1rem; border-top:1px solid rgba(20,20,15,.12)}
.quotes figcaption b{display:block; font-weight:700; font-size:.95rem}
.quotes figcaption span{display:block; font-size:.74rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:#9A7C1E; margin-top:.2rem}

/* team -------------------------------------------------------------------- */
.team{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem 2.4rem}
@media (max-width:760px){.team{grid-template-columns:1fr}}
.person{display:flex; align-items:center; gap:1.1rem}
.person img{width:88px; height:88px; border-radius:50%; object-fit:cover; background:#ddd; filter:grayscale(1) contrast(1.08)}
.person b{display:block; font-weight:700; font-size:1rem}
.person span{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#9A7C1E}

/* faq --------------------------------------------------------------------- */
.faq-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
  gap:0 3rem; border-top:1px solid rgba(20,20,15,.14); margin-top:2rem}
.faq-item{border-bottom:1px solid rgba(20,20,15,.14); padding:1.15rem 0}
.faq-item summary{cursor:pointer; list-style:none; font-weight:700; font-size:1.02rem;
  display:flex; justify-content:space-between; gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; font-family:var(--mono); color:var(--gold); font-weight:500}
.faq-item[open] summary::after{content:"\2013"}
.faq-item p{margin-top:.7rem; font-size:.97rem; color:var(--ink-soft); max-width:62ch}

/* contact ----------------------------------------------------------------- */
.cta-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.8rem,4vw,3.4rem); align-items:start}
@media (max-width:860px){.cta-grid{grid-template-columns:1fr}}
.cta-line{font-family:var(--mono); font-size:.92rem; color:var(--bone-soft); line-height:2; margin-top:1.4rem; font-variant-numeric:tabular-nums}
.cta-line a{color:var(--bone); text-decoration:none}
.cta-line a:hover{color:var(--gold-lt)}
.who{display:flex; gap:1.4rem; align-items:center; margin-top:2.4rem;
  padding-top:1.8rem; border-top:1px solid rgba(248,247,243,.16)}
.who img{width:104px; height:104px; border-radius:50%; object-fit:cover; flex:none; filter:grayscale(1) contrast(1.05)}
.who-role{font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.who b{display:block; font-weight:700; font-size:1.25rem; margin-top:.15rem}
.who p{margin-top:.4rem; font-size:.93rem; color:var(--bone-soft); max-width:44ch}

/* intake form ------------------------------------------------------------- */
.intake{display:grid; gap:.9rem}
.intake .f2{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
@media (max-width:560px){.intake .f2{grid-template-columns:1fr}}
.intake label{display:grid; gap:.32rem; font-size:.76rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--bone-soft)}
.intake label span em{font-style:normal; color:var(--gold)}
.intake input,.intake select,.intake textarea{
  font-family:var(--body); font-size:.95rem; font-weight:400; color:var(--bone);
  background:rgba(248,247,243,.06); border:1px solid rgba(248,247,243,.20);
  border-radius:12px; padding:.72rem .85rem; width:100%; text-transform:none; letter-spacing:0;
}
.intake select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.intake select option{background:var(--charcoal); color:var(--bone)}
.intake input:focus,.intake select:focus,.intake textarea:focus{border-color:var(--gold); outline:none}
.intake textarea{resize:vertical}
.intake .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.intake button{justify-self:start; margin-top:.4rem; cursor:pointer}
.intake button[disabled]{opacity:.55; cursor:default}
.formnote{font-size:.9rem; color:var(--bone-soft); margin-top:.2rem}
.formnote.good{color:var(--gold-lt)}
.formnote.bad{color:#E8A0A0}

/* actors off-ramp ---------------------------------------------------------- */
.actors{border:1px solid rgba(20,20,15,.16); border-left:3px solid var(--gold);
  padding:clamp(1.5rem,3vw,2.1rem); background:#fff}
.actors p{margin-top:.5rem; font-size:.96rem; color:var(--ink-soft); max-width:64ch}

/* footer ------------------------------------------------------------------- */
.foot{border-top:1px solid rgba(248,247,243,.12); padding:2.8rem 0 3.4rem; font-size:.88rem; color:var(--bone-soft)}
.foot-in{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:2rem}
.foot img{height:52px; width:auto; margin-bottom:1rem}
.foot a{color:var(--bone-soft); text-decoration:none}
.foot a:hover{color:var(--gold-lt)}
.foot-addr{font-family:var(--mono); font-size:.86rem; line-height:1.95; letter-spacing:.01em; font-variant-numeric:tabular-nums}
.foot-family{display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.4rem; margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid rgba(248,247,243,.12); font-size:.84rem}
.foot-family span{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; opacity:.6}


/* ===== PHOENIX CASTING: faces, black, gold, cream, space. No boxes. ===== */
h1{font-size:clamp(3.2rem,7vw,6.6rem); letter-spacing:-.045em; line-height:.92}
h2{letter-spacing:-.035em}
.sec-display{font-size:clamp(2.6rem,5.6vw,5rem); line-height:.96; max-width:13ch}

/* HERO: copy left on black, one placed portrait right, bleeding off the edge */
.hero{background:var(--black); min-height:min(94vh,1000px); display:grid}
.hero .wrap{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(1.5rem,4vw,4rem); align-items:end; width:100%}
.hero-copy{padding:clamp(4rem,9vh,7rem) 0 clamp(3rem,7vh,5rem); align-self:center}
.hero h1{color:var(--bone); max-width:10ch; margin-top:.4rem}
.hero .lede{margin-top:1.6rem; max-width:34ch; color:var(--bone-soft)}
.hero-cta{margin-top:2.2rem}
.hero-portrait{position:relative; align-self:end; justify-self:end; width:100%; height:min(86vh,900px);
  margin-right:calc((100vw - var(--page)) / -2); margin-bottom:0}
.hero-portrait img{width:100%; height:100%; object-fit:cover; object-position:38% 12%;
  filter:contrast(1.06); display:block}
.hero-portrait::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--black) 0%, rgba(5,5,5,.6) 18%, rgba(5,5,5,0) 42%), linear-gradient(0deg, var(--black) 0%, rgba(5,5,5,0) 16%)}
@media (max-width:900px){
  .hero{min-height:0}
  .hero .wrap{grid-template-columns:1fr; gap:0}
  .hero-portrait{order:-1; height:min(62vh,520px); width:100vw; margin-inline:calc(var(--gut) * -1); justify-self:start}
  .hero-portrait::after{background:linear-gradient(0deg, var(--black) 0%, rgba(5,5,5,0) 30%)}
  .hero-copy{padding:1.6rem 0 3rem}
}

/* THE BOARD: full-bleed grid of faces, one in gold */
.board-head{margin-bottom:clamp(2rem,4vw,3.4rem)}
.board-head .story{max-width:54ch; margin-top:1.3rem; font-size:clamp(1.05rem,1.6vw,1.22rem); line-height:1.65; color:var(--ink-soft)}
.board{display:grid; grid-template-columns:repeat(10,1fr); gap:3px; width:100vw; margin-left:calc(50% - 50vw); background:var(--champagne)}
.board figure{margin:0; aspect-ratio:1; overflow:hidden; background:#111}
.board img{width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.05); transition:filter .3s}
.board figure:hover img{filter:grayscale(0) contrast(1.02)}
.board figure.gold{position:relative}
.board figure.gold::after{content:""; position:absolute; inset:0; background:var(--gold); mix-blend-mode:multiply; opacity:.85}
.board-cap{display:flex; justify-content:space-between; gap:1rem; margin-top:1rem; font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#9A7C1E}
@media (max-width:900px){.board{grid-template-columns:repeat(5,1fr)}}

/* HOW IT RUNS: three numerals, then one cinematic strip */
.runs{border-top:1px solid rgba(248,247,243,.14)}
.run{display:grid; grid-template-columns:clamp(5.2rem,10vw,9rem) 1fr; gap:clamp(1rem,3vw,3rem); padding:clamp(1.8rem,3.4vw,2.8rem) 0; border-bottom:1px solid rgba(248,247,243,.14); align-items:start}
.run .num{font-size:clamp(3.4rem,7vw,6.4rem); font-weight:800; letter-spacing:-.05em; line-height:.85; color:var(--gold)}
.run h3{font-size:clamp(1.3rem,2vw,1.7rem); margin-bottom:.5rem; color:var(--bone)}
.run p{color:var(--bone-soft); max-width:56ch; font-size:1.02rem}
.strip{position:relative; width:100vw; margin-left:calc(50% - 50vw); height:clamp(280px,48vh,560px); margin-top:clamp(3rem,6vw,5rem); overflow:hidden}
.strip img{width:100%; height:100%; object-fit:cover; object-position:50% 40%; display:block; filter:contrast(1.05)}
.strip::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,5,5,.85) 0%, rgba(5,5,5,.1) 55%)}
.strip-line{position:absolute; left:0; right:0; bottom:clamp(1.6rem,4vw,3rem); z-index:2}
.strip-line p{font-size:clamp(1.4rem,2.8vw,2.4rem); font-weight:800; letter-spacing:-.03em; color:var(--bone); max-width:18ch; line-height:1.05}
.strip-line small{display:block; margin-top:.5rem; font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}

/* THE ROOM: one dark full-bleed image, copy left */
#room{position:relative; padding:0; overflow:hidden; min-height:600px; display:grid; align-items:center}
#room .room-bg{position:absolute; inset:0}
#room .room-bg img{width:100%; height:100%; object-fit:cover; object-position:70% 40%; filter:grayscale(1) brightness(.5) contrast(1.1)}
#room .room-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,5,5,.95) 0%, rgba(5,5,5,.8) 40%, rgba(5,5,5,.3) 100%)}
#room .wrap{position:relative; z-index:2; padding-block:clamp(4.5rem,9vw,7rem)}
.room-panel{max-width:36rem}
.room-panel .lede{color:var(--bone-soft)}

/* TEAM: bigger, quieter */
.person img{width:112px; height:112px}
.person b{font-size:1.08rem}

/* one enormous quote */
.bigquote{position:relative}
.bigquote .qmark{position:static; display:block; font-size:clamp(7rem,14vw,12rem); line-height:.6; color:var(--gold); margin:0 0 .15em -.05em}
.bigquote blockquote{margin:0; font-size:clamp(1.6rem,3.2vw,2.7rem); font-weight:700; line-height:1.22; letter-spacing:-.025em; max-width:22ch; color:var(--ink)}
.bigquote figcaption{margin-top:1.6rem}
.bigquote figcaption b{font-size:1.05rem; display:block}
.bigquote figcaption span{display:block; font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#9A7C1E; margin-top:.25rem}
.smallquotes{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.6rem); margin-top:clamp(2.6rem,5vw,4rem); padding-top:clamp(2rem,4vw,3rem); border-top:1px solid rgba(20,20,15,.14)}
.smallquotes figure{margin:0} .smallquotes blockquote{margin:0; font-size:1rem; line-height:1.65; color:var(--ink-soft)}
.smallquotes figcaption{margin-top:.9rem} .smallquotes figcaption b{font-size:.92rem; display:block}
.smallquotes figcaption span{display:block; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#9A7C1E; margin-top:.2rem}
@media (max-width:700px){.smallquotes{grid-template-columns:1fr}}

/* ===== THE HERO WITH A ROOM IN IT: a softer left fade so the actors survive ===== */
.hero-portrait.soft::after{background:linear-gradient(90deg, var(--black) 0%, rgba(5,5,5,.55) 10%, rgba(5,5,5,0) 30%), linear-gradient(0deg, var(--black) 0%, rgba(5,5,5,0) 16%)}
@media (max-width:900px){.hero-portrait.soft::after{background:linear-gradient(0deg, var(--black) 0%, rgba(5,5,5,0) 30%)}}

/* ===== INNER PAGES (commercial-casting, arizona) ===== */
.crumbs{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-soft); margin-bottom:1.1rem}
.crumbs a{color:var(--bone-soft); text-decoration:none} .crumbs a:hover{color:var(--gold-lt)}
.crumbs span{margin:0 .5rem; opacity:.5}
.page-hero .hero-portrait{height:min(80vh,840px)}
.page-hero h1{font-size:clamp(2.7rem,5.8vw,5.2rem); max-width:12ch}
.prose{max-width:62ch; font-size:1.06rem; line-height:1.75; color:var(--ink-soft)}
.prose p+p{margin-top:1.1rem}
.band-dark .prose{color:var(--bone-soft)}
.prose b{color:var(--ink); font-weight:700} .band-dark .prose b{color:var(--bone)}
.prose a{color:#9A7C1E; font-weight:600} .band-dark .prose a{color:var(--gold-lt)}
h2 + .prose, .sec-display + .prose{margin-top:1.3rem}

.two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.8rem,4vw,4.5rem); align-items:center}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.two figure{margin:0}
.two img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block}
.two figcaption{margin-top:.8rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}

/* a vertical timeline: the shape the homepage does not have */
.line{list-style:none; margin:clamp(2rem,4vw,3rem) 0 0; padding:0; border-left:2px solid var(--gold); max-width:64ch}
.line li{position:relative; padding:0 0 clamp(1.7rem,3vw,2.5rem) clamp(1.5rem,3vw,2.6rem)}
.line li::before{content:""; position:absolute; left:-7px; top:1.35em; width:12px; height:12px; border-radius:50%; background:var(--gold)}
.line li:last-child{padding-bottom:0}
.line small{display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:.35rem}
.line b{display:block; font-size:1.15rem; font-weight:700; color:var(--bone); margin-bottom:.35rem}
.line p{color:var(--bone-soft); max-width:56ch; font-size:1rem}

/* a full-bleed filmstrip of four */
.film{display:grid; grid-template-columns:repeat(4,1fr); gap:3px; width:100vw; margin-left:calc(50% - 50vw); background:var(--black); margin-top:clamp(2.4rem,5vw,3.6rem)}
.film figure{margin:0; aspect-ratio:16/9; overflow:hidden; background:#111}
.film img{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width:760px){.film{grid-template-columns:1fr 1fr} .film figure{aspect-ratio:4/3}}

/* a full-bleed photo with one caption line */
.photo-band{position:relative; width:100vw; margin-left:calc(50% - 50vw); height:clamp(300px,58vh,660px); overflow:hidden}
.photo-band img{width:100%; height:100%; object-fit:cover; display:block}
.photo-band figcaption{position:absolute; left:0; right:0; bottom:0; padding:clamp(1.2rem,3vw,2rem) 0; background:linear-gradient(0deg, rgba(5,5,5,.85), rgba(5,5,5,0)); color:var(--bone-soft); font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase}
.photo-band figcaption .wrap{position:relative}

/* the two doors off the homepage */
.deeper{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,4rem); margin-top:1.6rem}
@media (max-width:760px){.deeper{grid-template-columns:1fr}}
.deeper a{display:block; text-decoration:none; color:inherit; padding-top:1.4rem; border-top:2px solid var(--gold)}
.deeper a b{display:block; font-size:clamp(1.3rem,2.2vw,1.75rem); font-weight:800; letter-spacing:-.02em; line-height:1.15; margin-bottom:.55rem}
.deeper a p{color:var(--bone-soft); font-size:.98rem; max-width:42ch}
.deeper a:hover b{color:var(--gold-lt)}
.deeper a i{font-style:normal; display:inline-block; margin-top:.8rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}

.page-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.photo-band.tall{height:clamp(420px,72vh,780px)}
.facts.two-up{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.facts.two-up{grid-template-columns:1fr}}

/* PHONE HERO, 2026-09-19: Matt on the phone - "the hero image takes all the real estate."
   Under 900px the copy comes first and the photo is a band under it, a third of the screen,
   so the headline and the button are on screen before anyone scrolls. All three pages. */
@media (max-width:900px){
  .hero .wrap{gap:1.4rem}
  .hero-copy{order:0; padding:1.6rem 0 0}
  .hero-portrait, .page-hero .hero-portrait{order:1; height:min(36vh,330px); margin-bottom:0}
  .hero-portrait::after, .hero-portrait.soft::after{background:linear-gradient(180deg, var(--black) 0%, rgba(5,5,5,0) 22%)}
  .hero h1, .page-hero h1{font-size:clamp(2.4rem,11vw,3.2rem)}
  .hero .lede{margin-top:1rem}
  .hero-cta{margin-top:1.5rem; margin-bottom:.4rem}
}