/* ============================================================
   THE STUDIO PAGES  -  /mixing /mastering /mentoring
   Loaded on top of styles.css. Nothing here touches the index.
   ============================================================ */

/* ---------- the wide image band: "here is the room" ---------- */
.band{position:relative;height:clamp(260px,48vh,540px);overflow:hidden;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  background:#050505}
.band img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:.52;filter:contrast(1.12) saturate(.82) brightness(.88);
  transition:opacity 1.2s,transform 9s ease-out}
.band.in img{opacity:.52;transform:scale(1.04)}
.bandover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(24px,4vw,56px) var(--pad);
  background:
    linear-gradient(90deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.34) 46%,transparent 72%),
    linear-gradient(rgba(0,0,0,.45) 0%,rgba(0,0,0,.18) 34%,rgba(0,0,0,.72) 74%,rgba(0,0,0,.95))}
.bandover .bt{font-family:var(--disp);text-transform:uppercase;line-height:.95;
  font-size:clamp(24px,4vw,58px);color:var(--bone);
  text-shadow:0 2px 26px #000,0 0 62px rgba(0,0,0,.9)}
.bandover .bs{font-family:var(--mono);font-size:clamp(9px,.8vw,11px);letter-spacing:.24em;
  text-transform:uppercase;color:var(--red);margin-bottom:14px;
  text-shadow:0 1px 16px #000,0 0 30px #000}
/* a missing photo degrades to a deliberate plate, never a broken icon */
.plate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(90deg,rgba(239,236,230,.05) 0 1px,transparent 1px 84px),
    repeating-linear-gradient(0deg,rgba(239,236,230,.05) 0 1px,transparent 1px 84px),#050505;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(239,236,230,.17)}

/* ---------- the process: numbered, walked through ---------- */
.procs{counter-reset:p;border-top:1px solid var(--hair)}
.proc{counter-increment:p;display:grid;grid-template-columns:96px 1fr;
  gap:clamp(16px,2.6vw,42px);align-items:start;
  border-bottom:1px solid var(--hair);padding:clamp(22px,2.8vw,34px) 0;
  transition:padding-left .45s cubic-bezier(.16,1,.3,1),border-color .35s}
.proc:hover{padding-left:12px;border-color:var(--red)}
.proc::before{content:counter(p,decimal-leading-zero);
  font-family:var(--disp);font-size:clamp(28px,3.6vw,52px);line-height:.85;
  color:var(--red);opacity:.32;transition:opacity .35s}
.proc:hover::before{opacity:1}
.proc h4{margin:0 0 10px;font-family:var(--disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(17px,2vw,27px);line-height:1.02;color:var(--bone)}
.proc p{margin:0;font-size:14.5px;color:var(--dim);max-width:62ch}
.proc .tag{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer);
  border:1px solid var(--hair);padding:5px 9px}
@media(max-width:640px){
  .proc{grid-template-columns:1fr;gap:10px}
  .proc::before{font-size:26px}
}

/* ---------- the numbers ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
.stats div{background:var(--blk);padding:clamp(22px,2.8vw,34px) 20px;transition:background .4s}
.stats div:hover{background:#080808}
.stats b{display:block;font-family:var(--disp);font-weight:400;line-height:.9;
  font-size:clamp(30px,4.4vw,60px);color:var(--bone)}
.stats i{display:block;font-style:normal;font-family:var(--mono);font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer);margin-top:12px;line-height:1.6}

/* ---------- deliverables: a checked list, not bullets ---------- */
.gets{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,50px)}
@media(max-width:760px){.gets{grid-template-columns:1fr}}
.gets div{position:relative;padding:14px 0 14px 28px;border-top:1px solid var(--hair);
  font-size:14.5px;color:var(--dim)}
.gets div::before{content:"\25B8";position:absolute;left:4px;top:14px;color:var(--red);font-size:11px}

/* ---------- the programs (mentoring) ---------- */
.prog{border:1px solid var(--hair);padding:clamp(26px,3.4vw,46px);margin-top:12px;
  transition:border-color .4s,background .4s}
.prog:hover{border-color:var(--red);background:#060606}
.prog .ph{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-bottom:6px}
.prog h3{margin:0;font-size:clamp(21px,2.6vw,36px)}
.prog .pp{font-family:var(--mono);font-size:clamp(11px,1.1vw,14px);letter-spacing:.14em;color:var(--red);
  white-space:nowrap}
.prog .sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:20px}
.prog p{margin:0 0 18px;max-width:64ch}
.prog ul{list-style:none;margin:0 0 24px;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(18px,2.6vw,40px)}
@media(max-width:760px){.prog ul{grid-template-columns:1fr}}
.prog li{position:relative;padding:11px 0 11px 22px;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.prog li::before{content:"\25B8";position:absolute;left:2px;top:11px;color:var(--red)}

/* ---------- the approach grid ---------- */
.appr{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
.appr article{background:var(--blk);padding:clamp(24px,2.8vw,36px);transition:background .4s}
.appr article:hover{background:#080808}
.appr h4{margin:0 0 12px;font-family:var(--disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(15px,1.6vw,21px);line-height:1.05;color:var(--red)}
.appr p{margin:0;font-size:14px;color:var(--dim)}

/* ---------- the prep spec: what to send ---------- */
.spec{border:1px solid var(--red);padding:clamp(24px,3.2vw,42px)}
.spec .sh{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--red);margin-bottom:18px}
.spec dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0 clamp(18px,2.6vw,38px)}
@media(max-width:640px){.spec dl{grid-template-columns:1fr;gap:0}}
.spec dt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone);padding:12px 0;border-top:1px solid var(--hair);white-space:nowrap}
.spec dd{margin:0;padding:12px 0;border-top:1px solid var(--hair);font-size:14px;color:var(--dim)}
@media(max-width:640px){.spec dd{border-top:0;padding-top:0;padding-bottom:14px}}
.spec .plain{margin:20px 0 0;font-size:14px;color:var(--dim)}

/* ---------- credit rows ---------- */
.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
.creds div{background:var(--blk);padding:20px 18px}
.creds b{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);margin-bottom:10px}
.creds i{display:block;font-style:normal;font-family:var(--disp);font-weight:400;
  text-transform:uppercase;font-size:clamp(14px,1.4vw,19px);line-height:1.15;color:var(--bone)}

/* ---------- pull quote ---------- */
.pull{font-family:var(--disp);text-transform:uppercase;line-height:.98;
  font-size:clamp(22px,3.4vw,50px);color:var(--bone);max-width:20ch;margin:0}
.pull em{font-style:normal;color:var(--red)}

/* ---------- section headings on the studio pages sit below the hero ---------- */
.sub main section h2.big{font-size:clamp(28px,4.6vw,68px)}
.sub #hero h1.big{font-size:clamp(46px,9vw,130px)}

/* ---------- the shots: the actual room, in pieces ---------- */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);margin-top:clamp(26px,3.4vw,46px)}
@media(max-width:760px){.shots{grid-template-columns:1fr 1fr}
  .shots figure:last-child{grid-column:1/-1}}
@media(max-width:440px){.shots{grid-template-columns:1fr}
  .shots figure:last-child{grid-column:auto}}
.shots figure{position:relative;margin:0;overflow:hidden;background:#050505;aspect-ratio:4/3}
.shots img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:.78;filter:contrast(1.08) saturate(.74) brightness(.94);
  transition:opacity .5s,transform 1.1s cubic-bezier(.16,1,.3,1),filter .5s}
.shots figure:hover img{opacity:1;transform:scale(1.045);filter:contrast(1.1) saturate(1)}
.shots figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 13px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone);
  background:linear-gradient(transparent,rgba(0,0,0,.88));
  transition:color .35s}
.shots figure:hover figcaption{color:var(--red)}

/* ---------- the field sits back on a page you read ---------- */
/* long sub-pages push the corridor into a near-plane bloom that washes the
   page out; the photography is the subject here, so the field is damped. */
.sub #gl{opacity:.42}
.sub #grain{opacity:.04}

/* the rig reads as a clean 3x2 block, not five across and an orphan */
.sub .rig{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.sub .rig{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.sub .rig{grid-template-columns:1fr}}

/* rate rows that add to the order */
.tiers a.row{text-decoration:none;color:inherit;cursor:pointer}
.tiers .row span .addto{display:block;font-family:var(--mono);font-style:normal;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);margin-top:8px;text-align:right;opacity:0;transform:translateY(-3px);
  transition:opacity .3s,transform .3s}
.tiers a.row:hover .addto,.tiers a.row:focus-visible .addto{opacity:1;transform:none}
@media(hover:none){.tiers .row span .addto{opacity:1;transform:none}}