:root {
  --bg:#020303;
  --panel:#07100f;
  --text:#e8efec;
  --white:#f5fffb;
  --muted:#9aaaa6;
  --brand:#68c9be;
  --brand-bright:#7ce2d6;
  --line:rgba(104,201,190,.22);
  --line-soft:rgba(255,255,255,.08);
  --pad:clamp(22px,3.6vw,58px);
  --nav-h:86px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--text);font-family:"Arial Narrow","Helvetica Neue Condensed","Helvetica Neue",Arial,sans-serif;scroll-behavior:smooth}
body{min-height:100vh;background:radial-gradient(circle at 90% 8%,rgba(104,201,190,.18),transparent 30%),radial-gradient(circle at 12% 46%,rgba(104,201,190,.08),transparent 34%),linear-gradient(180deg,#020303 0%,#06100f 50%,#020303 100%);overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.page{width:min(100%,1600px);margin:0 auto;background:rgba(0,0,0,.22);border-left:1px solid rgba(104,201,190,.10);border-right:1px solid rgba(104,201,190,.10)}
.kicker{color:var(--brand);text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.28em;margin-bottom:24px}
.text-link{margin-top:30px;display:inline-flex;align-items:center;gap:18px;color:var(--brand-bright);text-transform:uppercase;font-size:12px;letter-spacing:.19em;border-bottom:1px solid var(--brand);padding-bottom:9px}
.text-link::after{content:"→";font-size:22px;line-height:0}
.nav{position:fixed;z-index:80;top:0;left:50%;transform:translateX(-50%);width:min(100%,1600px);height:var(--nav-h);display:grid;grid-template-columns:260px 1fr 260px;align-items:center;padding:0 var(--pad);background:linear-gradient(180deg,rgba(2,3,3,.93),rgba(2,3,3,.46),transparent);backdrop-filter:blur(8px)}
.logo img{width:176px}
.nav-links{display:flex;justify-content:center;gap:clamp(16px,2.2vw,34px);font-size:12px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.nav-cta{justify-self:end;color:var(--brand-bright);font-size:12px;letter-spacing:.17em;text-transform:uppercase;border-bottom:1px solid var(--brand);padding-bottom:8px;white-space:nowrap}
.mobile-menu-btn{display:none;justify-self:end;background:transparent;border:1px solid var(--line);color:var(--brand-bright);padding:10px 12px;text-transform:uppercase;letter-spacing:.16em}
.mobile-panel{display:none}
.hero-stage{position:relative;min-height:100svh;display:grid;align-items:end;padding:calc(var(--nav-h) + 36px) var(--pad) 58px;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-ratio{position:absolute;inset:0;min-height:100svh;overflow:hidden;background:#020303}
.hero-ratio::before{content:"";position:absolute;inset:0;z-index:6;background:linear-gradient(90deg,rgba(0,0,0,.90),rgba(0,0,0,.38) 42%,rgba(0,0,0,.16)),linear-gradient(0deg,rgba(0,0,0,.88),transparent 46%),linear-gradient(180deg,rgba(0,0,0,.34),transparent 24%);pointer-events:none}
.hero-ratio::after{content:"";position:absolute;inset:0;z-index:7;background-image:linear-gradient(rgba(104,201,190,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(104,201,190,.06) 1px,transparent 1px);background-size:25% 100%,100% 25%;opacity:.34;mix-blend-mode:screen;pointer-events:none}
.hero-media{position:absolute;inset:0;opacity:0;transform:scale(1.035);transition:opacity 1200ms ease,transform 6500ms linear}
.hero-media.is-active{opacity:1;transform:scale(1)}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;filter:brightness(.72) contrast(1.08) saturate(.95)}
.hero-content{position:relative;z-index:10;width:100%;display:grid;grid-template-columns:1fr minmax(260px,360px);gap:34px;align-items:end}
.hero-title h1{font-size:clamp(74px,10vw,164px);line-height:.78;letter-spacing:-.06em;text-transform:uppercase;color:var(--white);text-shadow:0 18px 70px rgba(0,0,0,.82);max-width:940px}
.hero-title h1 span{color:var(--brand-bright)}
.hero-copy{font-family:"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.65;color:#ccdcda;max-width:360px}
.hero-names{display:grid;gap:10px;margin-top:28px}
.hero-names span{display:block;color:var(--white);font-size:clamp(28px,3vw,46px);line-height:.86;letter-spacing:-.035em;text-transform:uppercase}
.hero-indicators{position:absolute;z-index:12;right:var(--pad);bottom:28px;display:flex;gap:8px}
.hero-dot{width:34px;height:2px;background:rgba(255,255,255,.28)}
.hero-dot.is-active{background:var(--brand-bright)}
.gaffers{display:grid;grid-template-columns:minmax(250px,1.05fr) repeat(3,minmax(0,1.25fr));border-bottom:1px solid var(--line);background:#020303}
.gaffer-intro,.gaffer-card{min-height:clamp(390px,34vw,500px);border-right:1px solid var(--line-soft);padding:42px clamp(24px,2.6vw,40px);position:relative;overflow:hidden}
.gaffer-card:last-child{border-right:0}
.gaffer-intro{background:radial-gradient(circle at 10% 10%,rgba(104,201,190,.12),transparent 40%),#030505}
.gaffer-intro h2{margin-top:64px;color:var(--white);text-transform:uppercase;font-size:clamp(36px,3.6vw,56px);line-height:.9;letter-spacing:-.04em}
.gaffer-intro p{margin-top:26px;max-width:245px;font-family:"Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.65;color:var(--muted)}
.gaffer-card::before,.gaffer-card::after{content:"";position:absolute;inset:0;transition:.65s ease}
.gaffer-card::before{background-image:var(--portrait);background-size:cover;background-position:center 35%;filter:grayscale(28%) contrast(1.12) brightness(.62);opacity:.9;transform:scale(1.01)}
.gaffer-card::after{background-image:var(--action);background-size:cover;background-position:center 35%;filter:grayscale(0%) contrast(1.08) brightness(.76);opacity:0;transform:scale(1.045)}
.gaffer-card:hover::before,.gaffer-card:focus-visible::before{opacity:0;transform:scale(1.045)}
.gaffer-card:hover::after,.gaffer-card:focus-visible::after{opacity:1;transform:scale(1.01)}
.gaffer-card .shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.18) 40%,rgba(0,0,0,.94) 100%),linear-gradient(90deg,rgba(0,0,0,.68),transparent 58%)}
.gaffer-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.number{color:var(--brand-bright);font-size:14px;letter-spacing:.18em;margin-bottom:auto}
.gaffer-card h3{font-size:clamp(38px,3.8vw,58px);line-height:.84;text-transform:uppercase;color:var(--white);letter-spacing:-.045em;max-width:280px}
.role{margin-top:10px;color:var(--brand-bright);text-transform:uppercase;font-size:13px;letter-spacing:.15em;font-style:italic}
.gaffer-card p{margin-top:18px;font-family:"Helvetica Neue",Arial,sans-serif;color:#cad9d6;font-size:14px;line-height:1.55;max-width:285px}
.crew-small{padding:46px var(--pad);border-bottom:1px solid var(--line);background:linear-gradient(180deg,#030505,#020303)}
.crew-small-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
.crew-small h2{font-size:clamp(34px,4vw,64px);line-height:.9;text-transform:uppercase;letter-spacing:-.045em;color:var(--white)}
.crew-list{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-soft);border-left:1px solid var(--line-soft)}
.crew-person{padding:24px;min-height:160px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.015);display:flex;flex-direction:column;justify-content:space-between}
.crew-person span{color:var(--brand-bright);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.crew-person h3{font-size:clamp(26px,2.8vw,42px);line-height:.88;text-transform:uppercase;letter-spacing:-.04em;color:var(--white)}
.crew-person p{font-family:"Helvetica Neue",Arial,sans-serif;color:var(--muted);font-size:13px;margin-top:10px}
.work{padding:46px var(--pad) 0;border-bottom:1px solid var(--line);background:#030505}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
.section-head h2{font-size:clamp(38px,4.6vw,72px);line-height:.92;text-transform:uppercase;letter-spacing:-.045em;color:var(--white)}
.project-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(150px,16vw,245px);margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);border-top:1px solid var(--line-soft)}
.project{position:relative;overflow:hidden;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:#050505}
.project:nth-child(1),.project:nth-child(4),.project:nth-child(6){grid-column:span 2}
.project img{width:100%;height:100%;object-fit:cover;filter:brightness(.78) contrast(1.06) saturate(.95);transition:.55s ease}
.project:hover img{transform:scale(1.055);filter:brightness(.98) contrast(1.04) saturate(1.06)}
.project::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(0,0,0,.82));opacity:.72}
.project span{position:absolute;z-index:2;left:20px;bottom:18px;color:var(--white);text-transform:uppercase;font-size:12px;letter-spacing:.13em}
.system{display:grid;grid-template-columns:42% 58%;min-height:480px;border-bottom:1px solid var(--line)}
.system-copy{padding:58px var(--pad);background:linear-gradient(90deg,rgba(0,0,0,.94),rgba(0,0,0,.70)),url("../images/project-05.png");background-size:cover;background-position:center}
.system-copy h2{margin-top:18px;font-size:clamp(42px,4.8vw,74px);line-height:.88;text-transform:uppercase;letter-spacing:-.045em;color:var(--white);max-width:560px}
.stage-panel{display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.86)),url("../images/project-01.png");background-size:cover;background-position:center}
.accordion{grid-column:2;padding:58px clamp(28px,4vw,62px);background:rgba(0,0,0,.72);border-left:1px solid var(--line);min-height:100%;display:flex;flex-direction:column;justify-content:center}
.accordion h3{font-size:clamp(36px,4vw,60px);line-height:.91;text-transform:uppercase;color:var(--white);letter-spacing:-.04em;margin-bottom:32px}
.stage-row{display:flex;justify-content:space-between;gap:30px;padding:18px 0;border-top:1px solid rgba(104,201,190,.28);font-family:"Helvetica Neue",Arial,sans-serif}
.stage-row:last-child{border-bottom:1px solid rgba(104,201,190,.28)}
.stage-row strong{color:var(--brand-bright);text-transform:uppercase;letter-spacing:.13em;font-size:13px;min-width:92px}
.stage-row span{color:#c9d9d6;font-size:14px;line-height:1.4}
.profile-hero{min-height:620px;padding:140px var(--pad) 56px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;border-bottom:1px solid var(--line)}
.profile-hero h1{font-size:clamp(72px,8vw,130px);line-height:.82;letter-spacing:-.055em;text-transform:uppercase}
.profile-hero p{font-family:"Helvetica Neue",Arial,sans-serif;line-height:1.6;color:#c9d9d6;max-width:460px;margin-top:24px}
.profile-image{height:min(520px,58vw);min-height:360px;background-image:var(--portrait);background-size:cover;background-position:center;border:1px solid var(--line);filter:brightness(.82) contrast(1.08)}
.project-page-hero{min-height:680px;padding:140px var(--pad) 60px;display:flex;align-items:end;background:linear-gradient(90deg,rgba(0,0,0,.94),rgba(0,0,0,.42)),var(--project);background-size:cover;background-position:center;border-bottom:1px solid var(--line)}
.project-page-hero h1{font-size:clamp(68px,9vw,150px);line-height:.82;letter-spacing:-.055em;text-transform:uppercase;max-width:920px}
.project-meta{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.project-meta div{padding:24px var(--pad);border-right:1px solid var(--line-soft);font-family:"Helvetica Neue",Arial,sans-serif;color:#c9d9d6}
.project-meta strong{display:block;font-family:"Arial Narrow",Arial,sans-serif;text-transform:uppercase;letter-spacing:.16em;color:var(--brand-bright);font-size:12px;margin-bottom:8px}
.interna-placeholder{min-height:100vh;padding:calc(var(--nav-h) + 80px) var(--pad) 80px;background:#020303}
.interna-placeholder h1{font-size:clamp(64px,9vw,140px);line-height:.82;letter-spacing:-.055em;text-transform:uppercase}
.interna-placeholder p{margin-top:28px;font-family:"Helvetica Neue",Arial,sans-serif;line-height:1.7;color:#c9d9d6;max-width:720px}
.footer{padding:42px var(--pad) 58px;display:flex;justify-content:space-between;gap:40px;color:var(--muted);font-family:"Helvetica Neue",Arial,sans-serif;font-size:13px;background:#020303}
.footer strong{color:var(--white);font-family:"Arial Narrow",Arial,sans-serif;text-transform:uppercase;letter-spacing:.17em;font-size:12px}
@media(min-width:1000px){.hero-stage{min-height:min(100svh,900px)}.hero-ratio{aspect-ratio:16/9;height:auto;min-height:100svh}}
@media(max-width:1180px){.nav{grid-template-columns:220px 1fr auto}.logo img{width:154px}.nav-links{gap:18px;font-size:11px}.nav-cta{display:none}.hero-content{grid-template-columns:1fr;max-width:760px}.hero-copy{max-width:440px}.gaffers{grid-template-columns:1fr 1fr}.gaffer-intro{grid-column:span 2;min-height:280px}.gaffer-intro h2{margin-top:38px}.gaffer-card{min-height:520px}.crew-list{grid-template-columns:repeat(2,1fr)}.system{grid-template-columns:1fr}.stage-panel{grid-template-columns:1fr;min-height:460px}.accordion{grid-column:1;margin-left:auto;width:min(560px,100%)}.project-meta{grid-template-columns:repeat(2,1fr)}}
@media(max-width:840px){:root{--nav-h:72px;--pad:22px}.page{border-left:0;border-right:0}.nav{grid-template-columns:1fr auto}.logo img{width:140px}.nav-links{display:none}.mobile-menu-btn{display:block}.mobile-panel{display:none;position:fixed;z-index:79;top:var(--nav-h);left:0;right:0;padding:18px 22px 24px;background:rgba(2,3,3,.97);border-bottom:1px solid var(--line)}.mobile-panel.is-open{display:grid;gap:16px}.mobile-panel a{text-transform:uppercase;letter-spacing:.18em;font-size:13px}.hero-stage{min-height:680px;padding-top:118px}.hero-ratio::after{background-size:50% 100%,100% 25%}.hero-media img,.hero-media video{object-position:62% center}.hero-title h1{font-size:clamp(66px,22vw,108px)}.hero-copy{font-size:14px;max-width:330px}.hero-names span{font-size:30px}.hero-indicators{left:var(--pad);right:auto}.gaffers{grid-template-columns:1fr}.gaffer-intro{grid-column:auto;min-height:310px}.gaffer-intro h2{margin-top:32px}.gaffer-card{min-height:520px;border-right:0}.crew-small-head,.section-head{display:block}.crew-small-head .text-link,.section-head .text-link{margin-top:18px}.crew-list{grid-template-columns:1fr}.project-grid{grid-template-columns:1fr 1fr;grid-auto-rows:170px}.project:nth-child(1),.project:nth-child(4),.project:nth-child(6){grid-column:span 1}.project span{font-size:11px;left:14px;bottom:14px}.system-copy{min-height:420px}.stage-panel{min-height:0;background-position:center}.accordion{width:100%;border-left:0;background:rgba(0,0,0,.78)}.stage-row{display:block}.stage-row strong{display:block;margin-bottom:8px}.footer{display:block}.footer div+div{margin-top:24px}.profile-hero{grid-template-columns:1fr;padding-top:118px}.profile-image{height:460px;min-height:0}.project-meta{grid-template-columns:1fr}}
@media(max-width:460px){.hero-stage{min-height:640px}.hero-title h1{font-size:64px}.gaffer-card{min-height:480px}.project-grid{grid-template-columns:1fr;grid-auto-rows:220px}.accordion h3,.system-copy h2{font-size:40px}}


/* Footer legal/contact links */
.footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.footer a:hover {
  opacity: .72;
}


/* V4 Homepage hero credits and stage media */
.hero-dot {
  appearance: none;
  border: 0;
  cursor: pointer;
}

.hero-credit {
  position: absolute;
  right: clamp(18px, 4vw, 56px);
  bottom: clamp(20px, 5vw, 64px);
  z-index: 4;
  max-width: min(420px, calc(100vw - 36px));
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(14px);
  color: rgba(244,244,238,.82);
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}

.hero-credit.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.stage-row-media {
  display: grid;
  grid-template-columns: minmax(84px, 130px) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.stage-row-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
  background: #050807;
}

.stage-row-image img,
.stage-row-image video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.stage-row-copy {
  display: grid;
  gap: 4px;
}

@media (max-width: 680px) {
  .hero-credit {
    right: 16px;
    left: 16px;
    bottom: 22px;
    max-width: none;
    text-align: center;
  }

  .stage-row-media {
    grid-template-columns: 1fr;
  }

  .stage-row-image {
    max-height: 180px;
  }
}


/* V6 Equipment editable background images */
.system-bts .system-copy {
  background:
    linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.42)),
    var(--equipment-left-bg, url("../projects/miss-bashful/gallery/03.png")) !important;
  background-size: cover !important;
  background-position: center !important;
}

.stage-panel-bts {
  background:
    linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.72)),
    var(--equipment-center-bg, none) !important;
  background-size: cover !important;
  background-position: center !important;
}

.stage-row-media.is-text-only {
  grid-template-columns: 1fr;
}

.stage-row-media.is-text-only .stage-row-copy {
  display: grid;
  grid-template-columns: minmax(120px, .4fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

@media (max-width: 680px) {
  .stage-row-media.is-text-only .stage-row-copy {
    grid-template-columns: 1fr;
  }
}


/* V7 Contact form modal */
body.contact-modal-open {
  overflow: hidden;
}

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: none;
}

.contact-modal.is-open {
  display: block;
}

.contact-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(16px);
}

.contact-modal-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(760px, calc(100vw - 28px));
  max-height: min(860px, calc(100vh - 28px));
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 28px;
  background: rgba(5, 8, 8, .96);
  color: var(--text, #f4f4ee);
  padding: clamp(22px, 4vw, 42px);
  box-shadow: 0 30px 120px rgba(0,0,0,.62);
}

.contact-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.contact-modal-head {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
  padding-right: 46px;
}

.contact-modal-head h2 {
  margin: 0;
  font-size: clamp(40px, 7vw, 86px);
  line-height: .88;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.contact-modal-head p {
  margin: 0;
  color: rgba(244,244,238,.72);
  max-width: 560px;
  line-height: 1.5;
}

.contact-form {
  display: grid;
  gap: 16px;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.contact-form label {
  display: grid;
  gap: 8px;
  color: rgba(244,244,238,.72);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  color: inherit;
  padding: 13px 14px;
  font: inherit;
  outline: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(115,207,198,.72);
}

.contact-form button[type="submit"] {
  width: fit-content;
  border: 1px solid rgba(115,207,198,.72);
  border-radius: 999px;
  background: rgba(115,207,198,.12);
  color: #73cfc6;
  padding: 12px 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
}

.contact-honeypot {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
}

.contact-form-status {
  min-height: 1.4em;
  margin: 0;
  color: rgba(244,244,238,.72);
}

.contact-form-status a {
  color: inherit;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}

.contact-direct {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid;
  gap: 12px;
}

.contact-direct strong {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #73cfc6;
  font-size: 12px;
}

.contact-direct-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.contact-direct-links a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

@media (max-width: 680px) {
  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-modal-panel {
    border-radius: 20px;
  }
}


/* V8 refined contact popup */
.contact-modal-panel {
  width: min(820px, calc(100vw - 28px));
  border-radius: 34px;
  background:
    radial-gradient(circle at top left, rgba(115,207,198,.14), transparent 34%),
    linear-gradient(145deg, rgba(9,18,17,.98), rgba(1,3,3,.98));
}

.contact-modal-panel::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 33px;
  pointer-events: none;
  border: 1px solid rgba(115,207,198,.12);
}

.contact-modal-head {
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding-bottom: 22px;
}

.contact-form {
  margin-top: 22px;
}

.contact-form input,
.contact-form textarea {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.contact-form textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-form button[type="submit"] {
  margin-top: 4px;
  padding: 13px 20px;
  box-shadow: 0 0 0 1px rgba(115,207,198,.08), 0 12px 42px rgba(115,207,198,.06);
}

.contact-form button[type="submit"]:hover {
  background: rgba(115,207,198,.18);
}

.contact-direct {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  padding: 18px;
}

.contact-direct > strong {
  color: rgba(244,244,238,.56);
  font-weight: 900;
  letter-spacing: .13em;
}

.contact-direct-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.contact-person {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
}

.contact-person span {
  color: rgba(244,244,238,.48);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.contact-person a {
  color: rgba(244,244,238,.88);
  text-decoration: none;
  border-bottom: 0;
  line-height: 1.25;
  word-break: break-word;
}

.contact-person a[href^="tel:"] {
  color: rgba(115,207,198,.82);
  font-size: 13px;
}

.contact-person a:hover {
  color: #73cfc6;
}

@media (max-width: 760px) {
  .contact-direct-grid {
    grid-template-columns: 1fr;
  }
}


/* V9 layout breathing room + crew card image composition */
.hero-content,
.gaffers,
.work,
.system,
.footer {
  max-width: none;
}

.gaffers,
.work,
.system {
  gap: clamp(18px, 2vw, 34px);
}

.gaffer-card {
  min-height: clamp(580px, 72vh, 860px);
  overflow: hidden;
}

.gaffer-photo {
  object-position: 66% center;
  transform: translateX(7%) scale(1.04);
}

.gaffer-card:hover .gaffer-photo-action {
  object-position: 66% center;
  transform: translateX(7%) scale(1.06);
}

.gaffer-card .shade {
  background:
    linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.52) 38%, rgba(0,0,0,.08) 100%);
}

.gaffer-content {
  max-width: 52%;
}

.gaffer-content h3 {
  font-size: clamp(42px, 5.6vw, 86px);
}

.contact-person span {
  color: rgba(244,244,238,.50);
}

@media (max-width: 900px) {
  .gaffer-photo,
  .gaffer-card:hover .gaffer-photo-action {
    object-position: center;
    transform: none;
  }

  .gaffer-content {
    max-width: 78%;
  }
}


/* V10 Crew cards: restore previous scale, keep images shifted right */
.gaffers {
  min-height: auto;
  align-items: stretch;
}

.gaffer-card {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
  padding: clamp(28px, 3vw, 52px) !important;
}

.gaffer-card .gaffer-photo {
  width: 112% !important;
  height: 100% !important;
  left: 0 !important;
  right: auto !important;
  object-fit: cover !important;
  object-position: 72% center !important;
  transform: none !important;
}

.gaffer-card:hover .gaffer-photo-action {
  object-position: 72% center !important;
  transform: none !important;
}

.gaffer-content {
  max-width: 64% !important;
  width: min(420px, 68%) !important;
  margin-top: auto !important;
}

.gaffer-content h3 {
  font-size: clamp(38px, 4vw, 64px) !important;
  line-height: .86 !important;
  letter-spacing: -.08em !important;
}

.gaffer-content p {
  max-width: 280px;
}

.gaffer-card .shade {
  background:
    linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.54) 34%, rgba(0,0,0,.12) 72%, rgba(0,0,0,.04) 100%) !important;
}

/* Slightly more room for longer surnames without enlarging the cards */
.gaffer-content .role {
  max-width: 260px;
}

@media (max-width: 1100px) {
  .gaffer-content {
    max-width: 74% !important;
    width: min(380px, 76%) !important;
  }

  .gaffer-content h3 {
    font-size: clamp(34px, 5vw, 56px) !important;
  }
}

@media (max-width: 900px) {
  .gaffer-card .gaffer-photo,
  .gaffer-card:hover .gaffer-photo-action {
    width: 100% !important;
    object-position: center !important;
    transform: none !important;
  }

  .gaffer-content {
    max-width: 82% !important;
    width: min(420px, 82%) !important;
  }
}


/* V11 Crew composition fix: real image shift, lighter faces, text back down */
.gaffer-card {
  position: relative;
  min-height: unset !important;
  height: auto !important;
  padding: clamp(30px, 3.2vw, 48px) !important;
  display: flex !important;
  align-items: flex-end !important;
}

/* Real visual move: wider image + translate right. This moves the person, not only the crop focus. */
.gaffer-card .gaffer-photo {
  width: 118% !important;
  height: 100% !important;
  max-width: none !important;
  left: 0 !important;
  right: auto !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: translateX(8%) scale(1.01) !important;
  opacity: .82 !important;
  filter: brightness(1.22) contrast(1.04) !important;
}

.gaffer-card:hover .gaffer-photo-portrait {
  opacity: 0 !important;
}

.gaffer-card .gaffer-photo-action {
  transform: translateX(8%) scale(1.01) !important;
  opacity: 0 !important;
  filter: brightness(1.18) contrast(1.04) !important;
}

.gaffer-card:hover .gaffer-photo-action {
  opacity: .86 !important;
  transform: translateX(8%) scale(1.02) !important;
}

/* Less heavy black overlay, still enough contrast on text side. */
.gaffer-card .shade {
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.76) 0%,
      rgba(0,0,0,.54) 26%,
      rgba(0,0,0,.28) 50%,
      rgba(0,0,0,.10) 74%,
      rgba(0,0,0,.04) 100%) !important;
}

/* Put copy back to lower-left. */
.gaffer-content {
  position: relative !important;
  z-index: 3 !important;
  align-self: flex-end !important;
  margin-top: auto !important;
  margin-bottom: clamp(10px, 2.2vw, 34px) !important;
  max-width: 58% !important;
  width: min(390px, 58%) !important;
  transform: none !important;
}

.gaffer-content h3 {
  font-size: clamp(36px, 3.55vw, 58px) !important;
  line-height: .88 !important;
  letter-spacing: -.075em !important;
}

.gaffer-content p {
  max-width: 270px !important;
}

/* Individual nudges if one face still sits too far left/right. */
.gaffer-card.jens .gaffer-photo {
  transform: translateX(10%) scale(1.01) !important;
}

.gaffer-card.alex .gaffer-photo {
  transform: translateX(8%) scale(1.01) !important;
}

.gaffer-card.noel .gaffer-photo {
  transform: translateX(7%) scale(1.01) !important;
}

.gaffer-card.jens:hover .gaffer-photo-action {
  transform: translateX(10%) scale(1.02) !important;
}

.gaffer-card.alex:hover .gaffer-photo-action {
  transform: translateX(8%) scale(1.02) !important;
}

.gaffer-card.noel:hover .gaffer-photo-action {
  transform: translateX(7%) scale(1.02) !important;
}

@media (max-width: 1100px) {
  .gaffer-content {
    max-width: 66% !important;
    width: min(360px, 66%) !important;
  }

  .gaffer-content h3 {
    font-size: clamp(34px, 4.4vw, 52px) !important;
  }

  .gaffer-card .gaffer-photo,
  .gaffer-card .gaffer-photo-action,
  .gaffer-card:hover .gaffer-photo-action {
    transform: translateX(6%) scale(1.01) !important;
  }
}

@media (max-width: 900px) {
  .gaffer-card {
    min-height: 560px !important;
  }

  .gaffer-content {
    max-width: 78% !important;
    width: min(420px, 78%) !important;
  }

  .gaffer-card .gaffer-photo,
  .gaffer-card .gaffer-photo-action,
  .gaffer-card:hover .gaffer-photo-action {
    width: 108% !important;
    transform: translateX(3%) scale(1) !important;
    object-position: center center !important;
  }
}


/* V12 CREW HARD RESET
   Ziel: alte Vollflächen-Verläufe neutralisieren.
   Bild wirklich als Ebene nach rechts schieben.
   Text nur mit kleiner lokaler Lesbarkeitsfläche, nicht über ganzes Bild. */

section.gaffers .gaffer-card {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
  isolation: isolate !important;
}

/* Alte Verlaufsebene komplett aus. */
section.gaffers .gaffer-card > .shade,
section.gaffers .gaffer-card .shade {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: transparent !important;
  background-image: none !important;
}

/* Falls ältere CSS-Versionen Verläufe per Pseudo-Element erzeugen: neutralisieren. */
section.gaffers .gaffer-card::before,
section.gaffers .gaffer-card::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-image: none !important;
}

/* Bild-Ebene: größer als Container und tatsächlich nach rechts verschoben. */
section.gaffers .gaffer-card > img.gaffer-photo,
section.gaffers .gaffer-card img.gaffer-photo {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 128% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: translate3d(13%, 0, 0) scale(1.015) !important;
  filter: brightness(1.34) contrast(1.06) saturate(1.03) !important;
  opacity: .94 !important;
  z-index: 0 !important;
}

/* Hover-Bild gleich behandeln. */
section.gaffers .gaffer-card > img.gaffer-photo-action,
section.gaffers .gaffer-card img.gaffer-photo-action {
  transform: translate3d(13%, 0, 0) scale(1.02) !important;
  filter: brightness(1.30) contrast(1.06) saturate(1.03) !important;
  opacity: 0 !important;
}

section.gaffers .gaffer-card:hover > img.gaffer-photo-portrait,
section.gaffers .gaffer-card:hover img.gaffer-photo-portrait {
  opacity: 0 !important;
}

section.gaffers .gaffer-card:hover > img.gaffer-photo-action,
section.gaffers .gaffer-card:hover img.gaffer-photo-action {
  opacity: .94 !important;
}

/* Individuelle echte Verschiebung, falls die Personen je Foto anders sitzen. */
section.gaffers .gaffer-card.jens > img.gaffer-photo,
section.gaffers .gaffer-card.jens img.gaffer-photo {
  transform: translate3d(15%, 0, 0) scale(1.015) !important;
}

section.gaffers .gaffer-card.alex > img.gaffer-photo,
section.gaffers .gaffer-card.alex img.gaffer-photo {
  transform: translate3d(14%, 0, 0) scale(1.015) !important;
}

section.gaffers .gaffer-card.noel > img.gaffer-photo,
section.gaffers .gaffer-card.noel img.gaffer-photo {
  transform: translate3d(12%, 0, 0) scale(1.015) !important;
}

/* Text wieder unten links, aber eigene lokale Abdunklung statt Vollbildverlauf. */
section.gaffers .gaffer-card .gaffer-content {
  position: relative !important;
  z-index: 3 !important;
  align-self: flex-end !important;
  margin-top: auto !important;
  margin-bottom: clamp(18px, 3vw, 46px) !important;
  max-width: min(390px, 58%) !important;
  width: min(390px, 58%) !important;
  padding: 18px 18px 16px 18px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 0% 100%, rgba(0,0,0,.66), rgba(0,0,0,.34) 48%, rgba(0,0,0,0) 76%) !important;
  backdrop-filter: none !important;
}

section.gaffers .gaffer-card .gaffer-content h3 {
  font-size: clamp(34px, 3.35vw, 56px) !important;
  line-height: .88 !important;
  letter-spacing: -.075em !important;
}

section.gaffers .gaffer-card .gaffer-content p {
  max-width: 260px !important;
}

/* Die Nummer oben soll nicht in einer schwarzen Verlaufsfläche hängen. */
section.gaffers .gaffer-card .number {
  position: relative !important;
  z-index: 3 !important;
}

/* Mobile etwas weniger schieben, damit keine Bildkante entsteht. */
@media (max-width: 900px) {
  section.gaffers .gaffer-card > img.gaffer-photo,
  section.gaffers .gaffer-card img.gaffer-photo {
    width: 116% !important;
    transform: translate3d(6%, 0, 0) scale(1) !important;
  }

  section.gaffers .gaffer-card .gaffer-content {
    max-width: 82% !important;
    width: min(420px, 82%) !important;
  }
}


/* V13 Crew balance: less right-cut, no text background */
section.gaffers .gaffer-card > img.gaffer-photo,
section.gaffers .gaffer-card img.gaffer-photo {
  width: 116% !important;
  transform: translate3d(5.5%, 0, 0) scale(1.01) !important;
  filter: brightness(1.28) contrast(1.05) saturate(1.02) !important;
}

section.gaffers .gaffer-card > img.gaffer-photo-action,
section.gaffers .gaffer-card img.gaffer-photo-action {
  width: 116% !important;
  transform: translate3d(5.5%, 0, 0) scale(1.015) !important;
  filter: brightness(1.24) contrast(1.05) saturate(1.02) !important;
}

/* Individual nudges: keep them slightly right, but avoid cutting too early at card border */
section.gaffers .gaffer-card.jens > img.gaffer-photo,
section.gaffers .gaffer-card.jens img.gaffer-photo {
  transform: translate3d(6.5%, 0, 0) scale(1.01) !important;
}

section.gaffers .gaffer-card.alex > img.gaffer-photo,
section.gaffers .gaffer-card.alex img.gaffer-photo {
  transform: translate3d(5.5%, 0, 0) scale(1.01) !important;
}

section.gaffers .gaffer-card.noel > img.gaffer-photo,
section.gaffers .gaffer-card.noel img.gaffer-photo {
  transform: translate3d(4.5%, 0, 0) scale(1.01) !important;
}

/* Remove text box / frame / semi-transparent fill completely */
section.gaffers .gaffer-card .gaffer-content {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  max-width: min(370px, 54%) !important;
  width: min(370px, 54%) !important;
  margin-bottom: clamp(22px, 3vw, 48px) !important;
}

/* Keep readability by using only slight text shadow, not a box */
section.gaffers .gaffer-card .gaffer-content h3,
section.gaffers .gaffer-card .gaffer-content p,
section.gaffers .gaffer-card .gaffer-content .role,
section.gaffers .gaffer-card .gaffer-content .text-link {
  text-shadow: 0 2px 14px rgba(0,0,0,.55) !important;
}

/* A very subtle left-to-right card gradient only for readability; much less than before */
section.gaffers .gaffer-card::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.42) 0%,
      rgba(0,0,0,.20) 28%,
      rgba(0,0,0,.04) 56%,
      rgba(0,0,0,0) 100%) !important;
}

section.gaffers .gaffer-card .gaffer-content,
section.gaffers .gaffer-card .number {
  z-index: 3 !important;
}

@media (max-width: 900px) {
  section.gaffers .gaffer-card > img.gaffer-photo,
  section.gaffers .gaffer-card img.gaffer-photo {
    width: 108% !important;
    transform: translate3d(2%, 0, 0) scale(1) !important;
  }

  section.gaffers .gaffer-card .gaffer-content {
    max-width: 76% !important;
    width: min(400px, 76%) !important;
  }
}


/* V14 Crew text further left + extra crew section */
section.gaffers .gaffer-card .gaffer-content {
  margin-left: clamp(-18px, -1.4vw, -8px) !important;
  transform: translateX(-18px) !important;
  max-width: min(360px, 52%) !important;
  width: min(360px, 52%) !important;
}

.extra-crew {
  border-top: 1px solid rgba(115,207,198,.24);
  padding: clamp(38px, 6vw, 82px) clamp(24px, 5vw, 64px);
  background: #010504;
}

.extra-crew-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.extra-crew-head h2 {
  margin: 0;
  font-size: clamp(42px, 6vw, 96px);
  line-height: .86;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.extra-crew-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(115,207,198,.24);
}

.extra-crew-card {
  min-height: 280px;
  padding: 20px;
  border-right: 1px solid rgba(115,207,198,.18);
  display: grid;
  align-content: end;
  gap: 16px;
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.018);
}

.extra-crew-card:last-child {
  border-right: 0;
}

.extra-crew-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .42;
  filter: brightness(.9) contrast(1.05);
}

.extra-crew-card div {
  position: relative;
  z-index: 2;
}

.extra-crew-card h3 {
  margin: 0;
  font-size: clamp(26px, 3vw, 52px);
  line-height: .9;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

.extra-crew-card p {
  margin: 8px 0 0;
  color: #73cfc6;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .extra-crew-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  section.gaffers .gaffer-card .gaffer-content {
    transform: translateX(-8px) !important;
  }
}

@media (max-width: 620px) {
  .extra-crew-grid {
    grid-template-columns: 1fr;
  }
}


/* V15 Crew text micro-adjust: a little further left */
section.gaffers .gaffer-card .gaffer-content {
  margin-left: clamp(-34px, -2.1vw, -18px) !important;
  transform: translateX(-30px) !important;
}

@media (max-width: 980px) {
  section.gaffers .gaffer-card .gaffer-content {
    margin-left: -14px !important;
    transform: translateX(-14px) !important;
  }
}


/* V16 Hover/action image loading + layer fix */
section.gaffers .gaffer-card img.gaffer-photo-portrait {
  z-index: 1 !important;
}

section.gaffers .gaffer-card img.gaffer-photo-action {
  z-index: 2 !important;
  display: block !important;
  visibility: visible !important;
  pointer-events: none !important;
}

section.gaffers .gaffer-card:hover img.gaffer-photo-action {
  opacity: .96 !important;
  z-index: 4 !important;
}

section.gaffers .gaffer-card:hover img.gaffer-photo-portrait {
  opacity: 0 !important;
  z-index: 1 !important;
}

/* Help the browser fetch hover images earlier without waiting for first hover */
section.gaffers .gaffer-card img.gaffer-photo-action {
  content-visibility: visible !important;
}


/* V17 final crew composition:
   - no negative text transform, so text cannot be clipped
   - image fills entire card on portrait and hover
   - person is shifted using oversized absolute image layer, not padding
*/
section.gaffers .gaffer-card {
  padding-left: clamp(16px, 1.8vw, 28px) !important;
  padding-right: clamp(20px, 2.6vw, 42px) !important;
}

section.gaffers .gaffer-card .gaffer-content {
  margin-left: 0 !important;
  transform: none !important;
  left: auto !important;
  max-width: min(365px, 54%) !important;
  width: min(365px, 54%) !important;
  overflow: visible !important;
}

/* Important: left is negative and width is larger, so translate keeps the whole container covered. */
section.gaffers .gaffer-card > img.gaffer-photo,
section.gaffers .gaffer-card img.gaffer-photo {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -10% !important;
  right: auto !important;
  width: 124% !important;
  height: 100% !important;
  max-width: none !important;
  min-width: 124% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: translate3d(6.5%, 0, 0) scale(1) !important;
}

/* Hover image must cover the exact same full card area. */
section.gaffers .gaffer-card > img.gaffer-photo-action,
section.gaffers .gaffer-card img.gaffer-photo-action {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -10% !important;
  right: auto !important;
  width: 124% !important;
  height: 100% !important;
  min-width: 124% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: translate3d(6.5%, 0, 0) scale(1) !important;
  opacity: 0 !important;
  z-index: 2 !important;
}

section.gaffers .gaffer-card:hover > img.gaffer-photo-action,
section.gaffers .gaffer-card:hover img.gaffer-photo-action {
  opacity: .96 !important;
}

section.gaffers .gaffer-card:hover > img.gaffer-photo-portrait,
section.gaffers .gaffer-card:hover img.gaffer-photo-portrait {
  opacity: 0 !important;
}

/* Keep individual nudges subtle and full-cover safe. */
section.gaffers .gaffer-card.jens img.gaffer-photo {
  transform: translate3d(7.5%, 0, 0) scale(1) !important;
}

section.gaffers .gaffer-card.alex img.gaffer-photo {
  transform: translate3d(6.2%, 0, 0) scale(1) !important;
}

section.gaffers .gaffer-card.noel img.gaffer-photo {
  transform: translate3d(5.2%, 0, 0) scale(1) !important;
}

@media (max-width: 980px) {
  section.gaffers .gaffer-card .gaffer-content {
    margin-left: 0 !important;
    transform: none !important;
    max-width: 76% !important;
    width: min(400px, 76%) !important;
  }

  section.gaffers .gaffer-card img.gaffer-photo {
    left: -6% !important;
    width: 114% !important;
    min-width: 114% !important;
    transform: translate3d(3%, 0, 0) scale(1) !important;
  }
}


/* V18 final polish: safe-left text, lighter crew images, direct-upload admin */
section.gaffers .gaffer-card {
  padding-left: clamp(7px, .85vw, 15px) !important;
}

/* Text moves left by using inner card padding only, no clipping transform. */
section.gaffers .gaffer-card .gaffer-content {
  margin-left: 0 !important;
  transform: none !important;
  max-width: min(350px, 51%) !important;
  width: min(350px, 51%) !important;
}

/* Remove the remaining heavy crew darkening. Keep only text shadows. */
section.gaffers .gaffer-card::after,
section.gaffers .gaffer-card::before,
section.gaffers .gaffer-card .shade {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Brighter visible portraits and hover images. */
section.gaffers .gaffer-card img.gaffer-photo {
  filter: brightness(1.18) contrast(1.03) saturate(1.02) !important;
  opacity: .98 !important;
}

/* Both portrait and hover cover the full card with an oversized image layer. */
section.gaffers .gaffer-card img.gaffer-photo-portrait,
section.gaffers .gaffer-card img.gaffer-photo-action {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -10% !important;
  right: auto !important;
  width: 124% !important;
  min-width: 124% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: translate3d(6%, 0, 0) scale(1) !important;
}

section.gaffers .gaffer-card img.gaffer-photo-action {
  opacity: 0 !important;
  z-index: 2 !important;
}

section.gaffers .gaffer-card:hover img.gaffer-photo-action {
  opacity: .98 !important;
  z-index: 4 !important;
}

section.gaffers .gaffer-card:hover img.gaffer-photo-portrait {
  opacity: 0 !important;
}

/* Extra crew images: remove the too-heavy black overlay feel. */
.extra-crew-card img {
  opacity: .78 !important;
  filter: brightness(1.12) contrast(1.04) saturate(1.04) !important;
}

.extra-crew-card {
  background: rgba(255,255,255,.028) !important;
}

/* Admin cards are forms now; keep same layout. */
form.homepage-crew-card,
form.homepage-extra-crew-card {
  color: inherit;
}

@media (max-width: 980px) {
  section.gaffers .gaffer-card {
    padding-left: 14px !important;
  }

  section.gaffers .gaffer-card .gaffer-content {
    max-width: 76% !important;
    width: min(400px, 76%) !important;
  }
}


/* V19 mainpage crew text: furthest safe left without clipping */
section.gaffers .gaffer-card {
  padding-left: 0 !important;
}

section.gaffers .gaffer-card .gaffer-content {
  margin-left: 0 !important;
  padding-left: clamp(4px, .45vw, 9px) !important;
  transform: none !important;
  max-width: min(345px, 50%) !important;
  width: min(345px, 50%) !important;
  overflow: visible !important;
}

/* keep text readable without a visible fill */
section.gaffers .gaffer-card .gaffer-content h3,
section.gaffers .gaffer-card .gaffer-content p,
section.gaffers .gaffer-card .gaffer-content .role,
section.gaffers .gaffer-card .gaffer-content .text-link {
  text-shadow: 0 2px 10px rgba(0,0,0,.42) !important;
}

/* Remove remaining dark crew overlays as much as possible */
section.gaffers .gaffer-card::after,
section.gaffers .gaffer-card::before,
section.gaffers .gaffer-card .shade {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
}

.extra-crew-card img {
  opacity: .90 !important;
  filter: brightness(1.18) contrast(1.02) saturate(1.03) !important;
}

@media (max-width: 980px) {
  section.gaffers .gaffer-card {
    padding-left: 10px !important;
  }

  section.gaffers .gaffer-card .gaffer-content {
    max-width: 76% !important;
    width: min(400px, 76%) !important;
  }
}


/* V20 Crew card contained layout
   Cards define the height. Images and text are contained inside the card.
   Text no longer participates in height calculation, so the card ends with the image. */
section.gaffers {
  align-items: stretch !important;
}

section.gaffers .gaffer-intro,
section.gaffers .gaffer-card {
  height: clamp(430px, 35vw, 610px) !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

section.gaffers .gaffer-card {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  padding: 0 !important;
}

/* Image layer: always fills the card and is clipped by the card itself. */
section.gaffers .gaffer-card img.gaffer-photo-portrait,
section.gaffers .gaffer-card img.gaffer-photo-action {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -8% !important;
  right: auto !important;
  width: 122% !important;
  min-width: 122% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: translate3d(5.5%, 0, 0) scale(1) !important;
}

/* Text layer: contained within the card, not part of normal layout flow. */
section.gaffers .gaffer-card .gaffer-content {
  position: absolute !important;
  left: clamp(8px, .9vw, 16px) !important;
  bottom: clamp(24px, 2.5vw, 44px) !important;
  z-index: 5 !important;
  width: min(350px, 52%) !important;
  max-width: min(350px, 52%) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

section.gaffers .gaffer-card .number {
  position: absolute !important;
  top: clamp(24px, 2vw, 38px) !important;
  left: clamp(16px, 2vw, 38px) !important;
  z-index: 5 !important;
}

/* Keep the left intro panel in its own box and align its contents clearly. */
section.gaffers .gaffer-intro {
  display: grid !important;
  align-content: center !important;
  padding-top: clamp(28px, 4vw, 62px) !important;
  padding-bottom: clamp(28px, 4vw, 62px) !important;
}

/* Keep hover image full-cover and above portrait. */
section.gaffers .gaffer-card img.gaffer-photo-action {
  opacity: 0 !important;
  z-index: 2 !important;
}

section.gaffers .gaffer-card:hover img.gaffer-photo-action {
  opacity: .98 !important;
  z-index: 4 !important;
}

section.gaffers .gaffer-card:hover img.gaffer-photo-portrait {
  opacity: 0 !important;
}

/* Per-person nudges, still full-cover safe. */
section.gaffers .gaffer-card.jens img.gaffer-photo {
  transform: translate3d(6.4%, 0, 0) scale(1) !important;
}

section.gaffers .gaffer-card.alex img.gaffer-photo {
  transform: translate3d(5.5%, 0, 0) scale(1) !important;
}

section.gaffers .gaffer-card.noel img.gaffer-photo {
  transform: translate3d(4.8%, 0, 0) scale(1) !important;
}

@media (max-width: 980px) {
  section.gaffers .gaffer-intro,
  section.gaffers .gaffer-card {
    height: clamp(500px, 80vw, 680px) !important;
  }

  section.gaffers .gaffer-card .gaffer-content {
    left: 18px !important;
    width: min(420px, 76%) !important;
    max-width: min(420px, 76%) !important;
  }

  section.gaffers .gaffer-card img.gaffer-photo-portrait,
  section.gaffers .gaffer-card img.gaffer-photo-action {
    left: -5% !important;
    width: 112% !important;
    min-width: 112% !important;
    transform: translate3d(2.5%, 0, 0) scale(1) !important;
  }
}


/* V21 Crew final polish: remove gaps and hide numbers */
section.gaffers {
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

section.gaffers .gaffer-intro,
section.gaffers .gaffer-card {
  margin: 0 !important;
}

/* Keep only the fine separator lines, not black spacing bars */
section.gaffers .gaffer-card {
  border-left: 1px solid rgba(115,207,198,.18) !important;
  border-right: 0 !important;
}

section.gaffers .gaffer-intro {
  border-right: 1px solid rgba(115,207,198,.18) !important;
}

/* Hide 01 / 02 / 03 */
section.gaffers .gaffer-card .number {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Make sure images fill into the full card edge after removing the grid gap */
section.gaffers .gaffer-card img.gaffer-photo-portrait,
section.gaffers .gaffer-card img.gaffer-photo-action {
  left: -9% !important;
  width: 123% !important;
  min-width: 123% !important;
}


/* V22 Instagram buttons */
.instagram-nav-button,
.instagram-footer-button,
.instagram-contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border: 1px solid rgba(115,207,198,.38);
  border-radius: 999px;
  padding: .48em .78em;
  text-decoration: none !important;
  line-height: 1;
  color: inherit;
  background: rgba(115,207,198,.055);
}

.instagram-nav-button:hover,
.instagram-footer-button:hover,
.instagram-contact-button:hover {
  border-color: rgba(115,207,198,.72);
  color: #73cfc6;
  background: rgba(115,207,198,.10);
}

.instagram-footer-button {
  margin-top: 8px;
}

.instagram-contact-button {
  margin-top: 10px;
  color: #73cfc6;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}


/* V23 Instagram top-nav removed + equipment image upload fix */
.instagram-nav-button {
  display: none !important;
}

.v23-section-image-upload code {
  color: #73cfc6;
}


/* V25 Equipment section: remove Helene fallback completely */
.stage-panel-bts {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.02), rgba(0,0,0,.52)),
    var(--equipment-center-bg, none) !important;
  background-color: #050807 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* The right EQ-Stages text/list panel must not show an old project image underneath. */
.stage-panel-bts .accordion {
  position: relative !important;
  z-index: 3 !important;
  background: #050807 !important;
  background-image: none !important;
  backdrop-filter: none !important;
}

/* Kill old hard-coded defaults from earlier CSS in case they still win somewhere. */
.stage-panel-bts::before,
.stage-panel-bts::after,
.stage-panel-bts .accordion::before,
.stage-panel-bts .accordion::after {
  background-image: none !important;
}

/* Left side also should not fall back to old Miss Bashful if no uploaded image exists. */
.system-bts .system-copy {
  background:
    linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.42)),
    var(--equipment-left-bg, none) !important;
  background-color: #050807 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* V26 EQ panel isolation:
   The EQ image is now only on the left side of the right equipment block.
   The EQ-Stages list sits on an opaque black side so no old project image can bleed through. */
.stage-panel-bts {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #050807 !important;
  background-image: none !important;
}

/* Image side only. This overrides the previous rule that placed the image under the whole right panel. */
.stage-panel-bts::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 50% !important;
  bottom: 0 !important;
  opacity: 1 !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.34)),
    var(--equipment-center-bg, none) !important;
  background-color: #050807 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
}

/* Black side underneath the EQ-Stages list. */
.stage-panel-bts::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 1 !important;
  top: 0 !important;
  left: 50% !important;
  right: 0 !important;
  bottom: 0 !important;
  opacity: 1 !important;
  background: #050807 !important;
  background-image: none !important;
  pointer-events: none !important;
}

.stage-panel-bts .accordion {
  position: relative !important;
  z-index: 2 !important;
  grid-column: 2 !important;
  min-height: 100% !important;
  background: #050807 !important;
  background-image: none !important;
  backdrop-filter: none !important;
  box-shadow: -1px 0 0 rgba(115,207,198,.18) !important;
}

.stage-panel-bts .accordion * {
  position: relative !important;
  z-index: 3 !important;
}

/* Make sure old rules cannot reintroduce the full-panel image. */
.stage-panel-bts[style],
.stage-panel-bts {
  background-color: #050807 !important;
}

@media (max-width: 1180px) {
  .stage-panel-bts::before {
    right: 0 !important;
    bottom: 42% !important;
  }

  .stage-panel-bts::after {
    left: 0 !important;
    top: 58% !important;
  }

  .stage-panel-bts .accordion {
    grid-column: 1 !important;
    width: 100% !important;
    min-height: 420px !important;
  }
}


/* V28 EQ stage real layer: no more Helene fallback through CSS variables */
.stage-panel-bts {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #050807 !important;
  background-image: none !important;
}

/* Disable all older pseudo-background approaches. */
.stage-panel-bts::before,
.stage-panel-bts::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
}

/* This is the only allowed image layer in the EQ-Stages area. */
.eq-stage-image-layer {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 50% 0 0 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
}

.eq-stage-image-layer::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(0,0,0,.04), rgba(0,0,0,.32)) !important;
  pointer-events: none !important;
}

.stage-panel-bts .accordion {
  grid-column: 2 !important;
  position: relative !important;
  z-index: 3 !important;
  min-height: 100% !important;
  background: #050807 !important;
  background-image: none !important;
  backdrop-filter: none !important;
  box-shadow: -1px 0 0 rgba(115,207,198,.18) !important;
}

.stage-panel-bts .accordion::before,
.stage-panel-bts .accordion::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
}

/* Never allow an old Helene image to appear via custom property fallback. */
.stage-panel-bts[style] {
  --equipment-center-bg: none !important;
}

@media (max-width: 1180px) {
  .stage-panel-bts {
    grid-template-columns: 1fr !important;
  }

  .eq-stage-image-layer {
    inset: 0 0 42% 0 !important;
  }

  .stage-panel-bts .accordion {
    grid-column: 1 !important;
    margin-top: min(58vw, 420px) !important;
  }
}


/* V29 EQ right-edge mask:
   Covers the narrow old-image bleed between EQ image area and right EQ list. */
.stage-panel-bts {
  background-color: #050807 !important;
}

/* Let the uploaded EQ image reach slightly behind the right panel, so there is no uncovered gap. */
.eq-stage-image-layer {
  inset: 0 34% 0 0 !important;
  z-index: 0 !important;
}

/* Put a black mask behind and slightly left of the accordion edge. */
.stage-panel-bts .accordion {
  position: relative !important;
  z-index: 5 !important;
  background: #050807 !important;
  background-color: #050807 !important;
  background-image: none !important;
  opacity: 1 !important;
  box-shadow:
    -96px 0 0 #050807,
    -1px 0 0 rgba(115,207,198,.18) !important;
}

/* Extra hard mask attached to the accordion itself. */
.stage-panel-bts .accordion > .kicker::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  top: -140px !important;
  bottom: -900px !important;
  left: -110px !important;
  width: 110px !important;
  background: #050807 !important;
  pointer-events: none !important;
}

/* Keep content above mask. */
.stage-panel-bts .accordion > * {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 1180px) {
  .eq-stage-image-layer {
    inset: 0 0 42% 0 !important;
  }

  .stage-panel-bts .accordion {
    box-shadow: 0 -80px 0 #050807 !important;
  }

  .stage-panel-bts .accordion > .kicker::before {
    display: none !important;
  }
}


/* V30 contact fallback */
.contact-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.contact-mailto-note {
  margin-top: 10px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: rgba(242,251,248,.62) !important;
}

.contact-mailto-note a {
  color: #73cfc6 !important;
  text-decoration: underline !important;
}


/* V31 EQ image full width:
   Uploaded EQ image now spans the full stage panel underneath the right black list.
   The black accordion covers the right side, so the visible image fills the entire left container cleanly. */
.stage-panel-bts {
  background: #050807 !important;
  background-image: none !important;
  overflow: hidden !important;
}

/* The real uploaded image layer stretches across the full container. */
.eq-stage-image-layer {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Right panel remains fully opaque over the image. */
.stage-panel-bts .accordion {
  z-index: 5 !important;
  background: #050807 !important;
  background-color: #050807 !important;
  background-image: none !important;
  box-shadow:
    -1px 0 0 rgba(115,207,198,.18),
    0 0 0 999px transparent !important;
}

/* No old mask needs to cut the uploaded image short anymore. */
.stage-panel-bts .accordion > .kicker::before {
  display: none !important;
  content: none !important;
}

/* Also kill the generic old stage-panel fallback on this specific panel. */
.stage-panel-bts.stage-panel {
  background-image: none !important;
}


/* V32 EQ section: no image gap + 80% black overlay on right list */
.system-grid,
.system-section,
.equipment-grid,
.stage-grid {
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

.system-copy,
.stage-panel-bts,
.stage-panel {
  margin: 0 !important;
}

/* Remove any visible black gutter between the left equipment image and the EQ image. */
.system-copy {
  border-right: 0 !important;
}

.stage-panel-bts {
  border-left: 0 !important;
  background-color: #050807 !important;
  background-image: none !important;
}

/* EQ image continues underneath the whole right stage block. */
.eq-stage-image-layer {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Built Around The Job panel: image visible underneath with around 80% black level. */
.stage-panel-bts .accordion {
  z-index: 5 !important;
  background: rgba(0, 0, 0, .80) !important;
  background-color: rgba(0, 0, 0, .80) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  box-shadow: -1px 0 0 rgba(115,207,198,.18) !important;
}

/* Safety: no old solid-black side masks. */
.stage-panel-bts .accordion > .kicker::before,
.stage-panel-bts .accordion::before,
.stage-panel-bts .accordion::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Give the right panel a subtle text contrast without hiding the image completely. */
.stage-panel-bts .accordion h2,
.stage-panel-bts .accordion .kicker,
.stage-panel-bts .accordion p,
.stage-panel-bts .accordion h3,
.stage-panel-bts .accordion .accordion-item {
  text-shadow: 0 2px 12px rgba(0,0,0,.55) !important;
}

/* The separator can stay as a thin line, not a black gap. */
.stage-panel-bts .accordion {
  border-left: 1px solid rgba(115,207,198,.18) !important;
}

@media (max-width: 1180px) {
  .stage-panel-bts .accordion {
    background: rgba(0, 0, 0, .84) !important;
    background-color: rgba(0, 0, 0, .84) !important;
    box-shadow: 0 -1px 0 rgba(115,207,198,.18) !important;
    border-left: 0 !important;
  }
}

/* V33 EQ section: 60% overlay + kill remaining center black bar */
.stage-panel-bts {
  position: relative !important;
  overflow: hidden !important;
  margin-left: -2px !important;
  width: calc(100% + 2px) !important;
  background: transparent !important;
}

.stage-panel-bts::before,
.stage-panel-bts::after,
.stage-panel-bts .eq-stage-image-layer::before,
.stage-panel-bts .eq-stage-image-layer::after {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

.eq-stage-image-layer {
  left: -2px !important;
  right: -2px !important;
  width: calc(100% + 4px) !important;
  max-width: none !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* Slight overlap to visually remove the remaining black seam between the two lower images */
.system-copy + .stage-panel-bts,
.system-bts .stage-panel-bts,
.equipment-grid .stage-panel-bts {
  margin-left: -2px !important;
}

/* Right list lighter: around 60% black */
.stage-panel-bts .accordion {
  position: relative !important;
  z-index: 5 !important;
  background: rgba(0,0,0,.60) !important;
  background-color: rgba(0,0,0,.60) !important;
  border-left: 1px solid rgba(115,207,198,.16) !important;
  box-shadow: none !important;
}

.stage-panel-bts .accordion > .kicker::before,
.stage-panel-bts .accordion::before,
.stage-panel-bts .accordion::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 1180px) {
  .stage-panel-bts {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .eq-stage-image-layer {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  .stage-panel-bts .accordion {
    background: rgba(0,0,0,.68) !important;
    background-color: rgba(0,0,0,.68) !important;
    border-left: 0 !important;
  }
}


/* V34 EQ black bar kill:
   The remaining black bar is removed by cropping the EQ image itself leftwards,
   not by adding another black mask. Right panel stays at 60% black. */
.system-bts {
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  background: #050807 !important;
}

.system-bts .system-copy,
.system-bts .stage-panel-bts {
  margin: 0 !important;
}

/* Overlap the stage image panel one real pixel over the left panel to remove grid/seam artifacts. */
.system-bts .stage-panel-bts {
  margin-left: -1px !important;
  width: calc(100% + 1px) !important;
  border-left: 0 !important;
  background: #050807 !important;
  background-image: none !important;
}

/* Crop the uploaded EQ image to the left.
   This removes a black strip if it is coming from the image edge itself. */
.stage-panel-bts .eq-stage-image-layer {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -96px !important;
  right: 0 !important;
  width: calc(100% + 96px) !important;
  height: 100% !important;
  max-width: none !important;
  z-index: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transform: none !important;
}

/* Absolutely no pseudo overlays/gaps on this panel. */
.stage-panel-bts::before,
.stage-panel-bts::after,
.stage-panel-bts .eq-stage-image-layer::before,
.stage-panel-bts .eq-stage-image-layer::after,
.stage-panel-bts .accordion::before,
.stage-panel-bts .accordion::after,
.stage-panel-bts .accordion > .kicker::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Right side: 60% black transparency, not 80/solid. */
.stage-panel-bts .accordion {
  position: relative !important;
  z-index: 6 !important;
  background: rgba(0,0,0,.60) !important;
  background-color: rgba(0,0,0,.60) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-left: 1px solid rgba(115,207,198,.16) !important;
  backdrop-filter: none !important;
}

/* Prevent the old generic stage-panel fallback from appearing under anything. */
.stage-panel-bts.stage-panel {
  background: #050807 !important;
  background-image: none !important;
}

@media (max-width: 1180px) {
  .system-bts .stage-panel-bts {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .stage-panel-bts .eq-stage-image-layer {
    left: 0 !important;
    width: 100% !important;
  }

  .stage-panel-bts .accordion {
    background: rgba(0,0,0,.68) !important;
    background-color: rgba(0,0,0,.68) !important;
    border-left: 0 !important;
  }
}


/* V35 Fix V34 scaling:
   Undo aggressive crop/zoom from V34. Keep 60% right overlay.
   Remove seam through layout/border handling, not by enlarging the image. */

/* Keep the overall equipment grid stable. */
.system-bts {
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  overflow: hidden !important;
}

/* No artificial panel width increase that can visually scale/shift the rest. */
.system-bts .stage-panel-bts {
  margin-left: 0 !important;
  width: auto !important;
  max-width: none !important;
  border-left: 0 !important;
  background: #050807 !important;
  background-image: none !important;
}

/* Normal full-size EQ image. No 96px crop, no calc width. */
.stage-panel-bts .eq-stage-image-layer {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  transform: none !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Seam kill: use tiny negative outline on the LEFT panel instead of scaling the right image. */
.system-bts .system-copy {
  margin-right: -1px !important;
  border-right: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Put right image panel underneath the 1px overlap. */
.system-bts .stage-panel-bts {
  position: relative !important;
  z-index: 1 !important;
}

/* Right Built Around The Job panel remains at 60% black transparency. */
.stage-panel-bts .accordion {
  position: relative !important;
  z-index: 6 !important;
  background: rgba(0,0,0,.60) !important;
  background-color: rgba(0,0,0,.60) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-left: 1px solid rgba(115,207,198,.16) !important;
}

/* Keep old pseudo/mask layers disabled. */
.stage-panel-bts::before,
.stage-panel-bts::after,
.stage-panel-bts .eq-stage-image-layer::before,
.stage-panel-bts .eq-stage-image-layer::after,
.stage-panel-bts .accordion::before,
.stage-panel-bts .accordion::after,
.stage-panel-bts .accordion > .kicker::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

@media (max-width: 1180px) {
  .system-bts .system-copy {
    margin-right: 0 !important;
  }

  .system-bts .stage-panel-bts {
    width: 100% !important;
  }

  .stage-panel-bts .accordion {
    background: rgba(0,0,0,.68) !important;
    background-color: rgba(0,0,0,.68) !important;
    border-left: 0 !important;
  }
}


/* V36 Crew portraits: less zoomed / more natural size */
section.gaffers .gaffer-card img.gaffer-photo-portrait,
section.gaffers .gaffer-card img.gaffer-photo-action,
section.gaffers .gaffer-card img.gaffer-photo {
  left: -4% !important;
  width: 112% !important;
  min-width: 112% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: translate3d(2%, 0, 0) scale(1) !important;
}

/* Keep the individual shift subtle; no big face zoom. */
section.gaffers .gaffer-card.jens img.gaffer-photo {
  transform: translate3d(2.8%, 0, 0) scale(1) !important;
}

section.gaffers .gaffer-card.alex img.gaffer-photo {
  transform: translate3d(2.2%, 0, 0) scale(1) !important;
}

section.gaffers .gaffer-card.noel img.gaffer-photo {
  transform: translate3d(1.8%, 0, 0) scale(1) !important;
}

/* Slightly lower the card height so the crew section does not feel oversized. */
section.gaffers .gaffer-intro,
section.gaffers .gaffer-card {
  height: clamp(405px, 32vw, 560px) !important;
}

/* Keep text inside the card after reducing visual scale. */
section.gaffers .gaffer-card .gaffer-content {
  bottom: clamp(22px, 2.2vw, 38px) !important;
}

@media (max-width: 980px) {
  section.gaffers .gaffer-intro,
  section.gaffers .gaffer-card {
    height: clamp(480px, 76vw, 640px) !important;
  }

  section.gaffers .gaffer-card img.gaffer-photo-portrait,
  section.gaffers .gaffer-card img.gaffer-photo-action,
  section.gaffers .gaffer-card img.gaffer-photo {
    left: -2% !important;
    width: 106% !important;
    min-width: 106% !important;
    transform: translate3d(1%, 0, 0) scale(1) !important;
  }
}


/* V38 contact fallback helpers */
.contact-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.contact-mailto-note {
  margin-top: 10px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: rgba(242,251,248,.62) !important;
}

.contact-mailto-note a {
  color: #73cfc6 !important;
  text-decoration: underline !important;
}


/* V39 contact system */
.contact-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.contact-mailto-note {
  margin-top: 10px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: rgba(242,251,248,.62) !important;
}

.contact-mailto-note a {
  color: #73cfc6 !important;
  text-decoration: underline !important;
}


/* V41 contact overview: no form, just direct mail overview */
.contact-form,
.contact-modal form,
.contact-popup form,
form[action="/contact-submit.php"] {
  display: none !important;
}

.contact-overview {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  min-height: 520px;
  background:
    radial-gradient(circle at 18% 0%, rgba(115,207,198,.10), transparent 34%),
    linear-gradient(135deg, #020403, #050807);
}

.contact-overview-main {
  padding: clamp(34px, 6vw, 86px) var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--line);
}

.contact-overview-main h2 {
  margin: 18px 0 0;
  color: var(--white);
  font-size: clamp(56px, 8vw, 126px);
  line-height: .82;
  letter-spacing: -.08em;
  text-transform: uppercase;
}

.contact-overview-main p {
  margin: 24px 0 0;
  max-width: 560px;
  color: rgba(242,251,248,.66);
  font-size: 16px;
  line-height: 1.5;
}

.contact-main-mail {
  display: inline-block;
  width: fit-content;
  margin-top: 30px;
  color: var(--accent);
  font-size: clamp(22px, 3.4vw, 46px);
  font-weight: 900;
  letter-spacing: -.045em;
  text-decoration: none;
}

.contact-main-mail:hover {
  color: var(--white);
}

.contact-main-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.contact-people {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}

.contact-person {
  padding: clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.018);
}

.contact-person:last-child {
  border-bottom: 0;
}

.contact-person span {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 11px;
  font-weight: 900;
}

.contact-person h3 {
  margin: 12px 0 16px;
  color: var(--white);
  font-size: clamp(28px, 3vw, 48px);
  line-height: .95;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.contact-person a {
  width: fit-content;
  color: rgba(242,251,248,.76);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.8;
}

.contact-person a:hover {
  color: var(--accent);
}

/* hide any old floating contact popup shell if it survived the previous form versions */
.contact-modal,
.contact-popup,
#contact-modal,
#contact-popup {
  display: none !important;
}

@media (max-width: 900px) {
  .contact-overview {
    grid-template-columns: 1fr;
  }

  .contact-overview-main {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .contact-people {
    grid-template-rows: none;
  }
}


/* V42 contact overview fixes: work-together anchor + invoices */
a.contact-scroll-link {
  text-decoration: none !important;
}

.contact-people {
  grid-template-rows: repeat(4, auto) !important;
}

.contact-person-invoice {
  background: rgba(115,207,198,.045) !important;
}

.contact-person-invoice h3 {
  color: #73cfc6 !important;
}

.contact-overview[id="contact"] {
  scroll-margin-top: calc(var(--nav-h, 86px) + 18px) !important;
}

/* Left main contact remains visually dominant even with 4 right-side cards. */
.contact-person {
  min-height: 170px !important;
}

/* Make hidden legacy modal impossible to intercept clicks. */
.contact-modal,
.contact-popup,
#contact-modal,
#contact-popup,
#contact-legacy {
  display: none !important;
  pointer-events: none !important;
}


/* V42b make Work together target the visible contact overview, not footer/modal */
a[href="#contact"].contact-scroll-link,
.text-link[href="#contact"] {
  cursor: pointer !important;
}

#contactModalLegacy,
.contact-modal#contactModalLegacy {
  display: none !important;
  pointer-events: none !important;
}

#site-footer {
  scroll-margin-top: calc(var(--nav-h, 86px) + 18px) !important;
}


/* V43 real contact popup: no form, no #contact scroll dependency */
.mail-contact-popup {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(16px, 3vw, 34px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .22s ease, visibility .22s ease !important;
}

.mail-contact-popup.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.mail-contact-popup-backdrop {
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(115,207,198,.12), transparent 36%),
    rgba(0,0,0,.78) !important;
  cursor: pointer !important;
}

.mail-contact-panel {
  position: relative !important;
  z-index: 2 !important;
  width: min(1060px, calc(100vw - 28px)) !important;
  max-height: min(86vh, 900px) !important;
  overflow: auto !important;
  border: 1px solid rgba(115,207,198,.32) !important;
  background: rgba(2,4,3,.96) !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.58) !important;
  color: var(--white) !important;
}

.mail-contact-close {
  position: sticky !important;
  top: 14px !important;
  float: right !important;
  z-index: 4 !important;
  margin: 14px 14px 0 0 !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(115,207,198,.35) !important;
  background: rgba(0,0,0,.48) !important;
  color: var(--white) !important;
  font-size: 28px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.mail-contact-close:hover {
  color: var(--accent) !important;
  border-color: rgba(115,207,198,.82) !important;
}

.mail-contact-head {
  padding: clamp(28px, 5vw, 58px) clamp(24px, 5vw, 62px) 24px !important;
  border-bottom: 1px solid rgba(115,207,198,.2) !important;
}

.mail-contact-head h2 {
  margin: 16px 0 0 !important;
  font-size: clamp(52px, 8vw, 118px) !important;
  line-height: .82 !important;
  letter-spacing: -.08em !important;
  text-transform: uppercase !important;
  color: var(--white) !important;
}

.mail-contact-head p {
  margin: 22px 0 0 !important;
  max-width: 660px !important;
  color: rgba(242,251,248,.68) !important;
  line-height: 1.5 !important;
}

.mail-contact-main {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  border-bottom: 1px solid rgba(115,207,198,.2) !important;
}

.mail-contact-people {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.mail-contact-card {
  padding: clamp(22px, 3.4vw, 42px) !important;
  min-height: 185px !important;
  border-right: 1px solid rgba(115,207,198,.2) !important;
  background: rgba(255,255,255,.018) !important;
}

.mail-contact-main .mail-contact-card:last-child,
.mail-contact-people .mail-contact-card:last-child {
  border-right: 0 !important;
}

.mail-contact-card-main {
  background: rgba(115,207,198,.055) !important;
}

.mail-contact-card-invoice {
  background: rgba(115,207,198,.035) !important;
}

.mail-contact-card span {
  display: block !important;
  color: var(--accent) !important;
  text-transform: uppercase !important;
  letter-spacing: .15em !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.mail-contact-card h3 {
  margin: 12px 0 18px !important;
  color: var(--white) !important;
  font-size: clamp(28px, 3.4vw, 48px) !important;
  line-height: .92 !important;
  letter-spacing: -.05em !important;
  text-transform: uppercase !important;
}

.mail-contact-card a {
  display: block !important;
  width: fit-content !important;
  color: rgba(242,251,248,.78) !important;
  text-decoration: none !important;
  line-height: 1.8 !important;
  font-size: 15px !important;
}

.mail-contact-card a:hover {
  color: var(--accent) !important;
}

/* Make old contact systems harmless. */
.contact-form,
form[action="/contact-submit.php"],
.contact-modal,
.contact-popup,
#contactModal,
#contactModalLegacy,
#contact-modal,
#contact-popup,
#contact-legacy {
  display: none !important;
  pointer-events: none !important;
}

body.mail-contact-is-open {
  overflow: hidden !important;
}

@media (max-width: 900px) {
  .mail-contact-panel {
    max-height: 90vh !important;
  }

  .mail-contact-main,
  .mail-contact-people {
    grid-template-columns: 1fr !important;
  }

  .mail-contact-card {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(115,207,198,.2) !important;
  }

  .mail-contact-people .mail-contact-card:last-child {
    border-bottom: 0 !important;
  }
}


/* V44 contact popup hidden-safe: never visible on page by default */
.mail-contact-popup[hidden] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.mail-contact-popup.is-open:not([hidden]) {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* If any old inline/section contact overview survived, do not show it on the main page. */
.contact-overview {
  display: none !important;
}


/* V45 contact popup open fix */
.mail-contact-popup.is-open {
  display: grid !important;
}
.mail-contact-popup.is-open[style] {
  display: grid !important;
}


/* V47 SEO landing pages */
.seo-service-page {
  background: #020403;
}

.seo-service-hero {
  min-height: 720px;
  padding: calc(var(--nav-h) + 72px) var(--pad) 80px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: clamp(32px, 7vw, 120px);
  align-items: end;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 18% 12%, rgba(115,207,198,.12), transparent 34%),
    linear-gradient(135deg, rgba(2,4,3,.94), rgba(5,8,7,.98));
}

.seo-service-hero h1 {
  margin: 20px 0 0;
  color: var(--white);
  font-size: clamp(68px, 13vw, 168px);
  line-height: .78;
  letter-spacing: -.095em;
  text-transform: uppercase;
}

.seo-service-hero aside {
  border-left: 1px solid var(--line);
  padding-left: clamp(22px, 3vw, 44px);
}

.seo-service-hero p {
  margin: 0 0 24px;
  color: rgba(242,251,248,.72);
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.45;
  max-width: 620px;
}

.seo-service-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 390px);
  gap: clamp(34px, 6vw, 90px);
  padding: clamp(48px, 7vw, 105px) var(--pad);
  border-bottom: 1px solid var(--line);
}

.seo-service-content {
  display: grid;
  gap: clamp(34px, 5vw, 70px);
  max-width: 890px;
}

.seo-service-content article {
  border-top: 1px solid rgba(115,207,198,.24);
  padding-top: 24px;
}

.seo-service-content h2 {
  margin: 0 0 18px;
  color: var(--white);
  font-size: clamp(32px, 4vw, 62px);
  line-height: .9;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.seo-service-content p {
  margin: 0;
  color: rgba(242,251,248,.70);
  font-size: 17px;
  line-height: 1.58;
}

.seo-service-content p + p {
  margin-top: 16px;
}

.seo-service-sidebar {
  display: grid;
  align-content: start;
  gap: 16px;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}

.seo-service-card {
  border: 1px solid rgba(115,207,198,.24);
  background: rgba(255,255,255,.024);
  padding: 22px;
  display: grid;
  gap: 10px;
}

.seo-service-card span {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 11px;
  font-weight: 900;
}

.seo-service-card strong {
  color: var(--white);
  font-size: 22px;
  letter-spacing: -.035em;
}

.seo-service-card a {
  color: rgba(242,251,248,.76);
  text-decoration: none;
  line-height: 1.5;
}

.seo-service-card a:hover {
  color: var(--accent);
}

.seo-service-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  color: rgba(242,251,248,.72);
}

.seo-service-card li::before {
  content: "— ";
  color: var(--accent);
}

.seo-service-cta {
  padding: clamp(44px, 6vw, 88px) var(--pad);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid var(--line);
}

.seo-service-cta h2 {
  margin: 12px 0 0;
  color: var(--white);
  font-size: clamp(42px, 6vw, 96px);
  line-height: .86;
  letter-spacing: -.075em;
  text-transform: uppercase;
  max-width: 850px;
}

@media (max-width: 960px) {
  .seo-service-hero,
  .seo-service-body {
    grid-template-columns: 1fr;
  }

  .seo-service-hero {
    min-height: 620px;
  }

  .seo-service-hero aside {
    border-left: 0;
    padding-left: 0;
  }

  .seo-service-sidebar {
    position: static;
  }

  .seo-service-cta {
    display: grid;
  }
}


/* V48 footer company/address normal casing */
.footer .footer-company-block,
.footer .footer-company-block strong,
.footer .footer-company-block span,
.footer .company-name-normal {
  text-transform: none !important;
  letter-spacing: normal !important;
}

.footer .company-name-normal {
  display: inline-block !important;
  color: var(--white) !important;
  font-weight: 900 !important;
  font-size: 15px !important;
}

.footer .footer-company-block span {
  color: var(--accent) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}