*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#090b0e;color:#f5f3f0;font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}.top{position:absolute;z-index:10;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:30px clamp(22px,6vw,100px)}.brand{display:flex;align-items:center;gap:10px}.brand img{width:56px;height:56px;object-fit:contain}.brand span{display:flex;flex-direction:column;line-height:1}.brand strong{font-size:29px;letter-spacing:.12em;color:#ee5a00}.brand small{font-size:16px;letter-spacing:.28em}.top nav{display:flex;gap:35px;font-size:12px;letter-spacing:.19em}.top nav a:hover{color:#f60}.hero{min-height:780px;height:100svh;max-height:1100px;position:relative;display:flex;align-items:center;overflow:hidden}.hero-photo{position:absolute;inset:0;background-image:url("hero.jpg");background-position:center center;background-size:cover}.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,6,10,.94) 0%,rgba(4,6,10,.85) 22%,rgba(4,6,10,.43) 47%,rgba(4,6,10,.04) 78%),linear-gradient(0deg,#090b0e 0%,transparent 22%,transparent 75%,rgba(0,0,0,.2) 100%)}.hero-content{position:relative;z-index:2;margin-left:clamp(22px,7vw,120px);max-width:690px;margin-top:100px}.eyebrow{color:#f60;font-size:12px;font-weight:700;letter-spacing:.29em}.hero h1{font-size:clamp(34px,4.2vw,70px);font-weight:500;line-height:1.13;letter-spacing:.045em;margin:22px 0}.hero h1 em{font-style:normal;color:#f60}.orange-line{width:60px;height:3px;background:#f60;margin:30px 0}.intro{max-width:480px;font-size:17px;line-height:1.7;color:#ddd}.cta{margin-top:28px;display:inline-flex;align-items:center;justify-content:space-between;gap:46px;border:1px solid #f60;padding:19px 24px;color:#ff6b15;font-size:12px;font-weight:700;letter-spacing:.17em;transition:background .2s}.cta:hover{background:#f60;color:#090b0e}.cta span{font-size:22px}.scroll-note{position:absolute;bottom:32px;left:clamp(22px,7vw,120px);font-size:10px;letter-spacing:.2em;color:#aaa}.section-inner{max-width:1320px;margin:auto;padding:100px clamp(22px,7vw,100px)}.services{background:#0c0e11}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:55px;margin-top:45px}.service-grid article{border-top:1px solid #454545;padding-top:25px}.num{font-size:12px;color:#f60}.service-grid h2{font-size:21px;letter-spacing:.06em;font-weight:500}.service-grid p,.about p,.contact p{color:#aaa;line-height:1.8}.about-grid{display:grid;grid-template-columns:1fr 2fr;gap:80px}.about h2,.contact h2{font-size:clamp(30px,4vw,55px);font-weight:500;line-height:1.2;margin:0}.about p{max-width:720px;font-size:17px}.contact{background:#11151a}.contact .section-inner{padding-top:90px;padding-bottom:100px}.placeholder{font-size:11px;opacity:.7;margin-top:30px}footer{padding:25px clamp(22px,7vw,100px);display:flex;justify-content:space-between;gap:20px;color:#777;font-size:10px;letter-spacing:.16em}@media (max-width:800px){.top{padding:16px 22px}.brand img{width:40px;height:40px}.brand strong{font-size:20px}.brand small{font-size:12px}.top nav{gap:15px;font-size:10px}.hero{height:850px;min-height:720px;max-height:none;align-items:flex-start}.hero-photo{background-position:58% center}.shade{background:linear-gradient(180deg,rgba(3,5,9,.65) 0%,rgba(3,5,9,.88) 29%,rgba(3,5,9,.62) 55%,rgba(3,5,9,.03) 80%,#090b0e 100%)}.hero-content{margin:150px 22px 0}.hero h1{font-size:clamp(30px,7vw,49px)}.intro{font-size:15px;max-width:420px}.scroll-note{bottom:20px;left:22px}.section-inner{padding:70px 24px}.service-grid,.about-grid{grid-template-columns:1fr;gap:30px}.about-grid{gap:10px}footer span{display:none}}
@media (max-width:390px){.top nav{gap:9px;font-size:9px}.hero h1{font-size:30px}}

/* Original OJ Audio artwork and final refinements */
.brand img{width:145px;height:auto;display:block}.brand{padding:6px 10px}.top{align-items:flex-start}.hero-photo{background-position:center center}.shade{background:linear-gradient(90deg,rgba(4,6,10,.91) 0%,rgba(4,6,10,.73) 27%,rgba(4,6,10,.20) 59%,transparent 83%),linear-gradient(0deg,#090b0e 0%,transparent 19%,transparent 82%,rgba(0,0,0,.18) 100%)}@media (max-width:800px){.brand img{width:104px}.brand{padding:3px 5px}.hero-photo{background-position:57% center}.shade{background:linear-gradient(180deg,rgba(3,5,9,.83) 0%,rgba(3,5,9,.82) 31%,rgba(3,5,9,.44) 61%,#090b0e 100%)}}


/* Selected Work proposal — preserves existing layout and branding */
.work{background:#090b0e}.work-heading{display:flex;justify-content:space-between;align-items:end;gap:55px;margin-bottom:44px}.work-heading h2{font-size:clamp(32px,4.4vw,64px);line-height:1.09;letter-spacing:.035em;font-weight:500;margin:18px 0 0}.work-heading h2 span{color:#f60}.work-heading>p{color:#aaa;line-height:1.7;max-width:350px;font-size:15px;margin-bottom:5px}.work-also{margin-top:38px;padding-top:22px;border-top:1px solid #383b40;display:flex;align-items:center;gap:30px}.work-also span{font-size:10px;letter-spacing:.2em;color:#888}.work-also strong{font-size:17px;letter-spacing:.06em;font-weight:500}@media (max-width:800px){.top nav{gap:11px}.work-heading{display:block}.work-heading>p{margin-top:20px}.work-also{gap:14px;flex-wrap:wrap}}
@media (max-width:520px){.top nav{gap:8px;font-size:9px}}


/* Consistent production × ensemble captions */


.work-also{align-items:flex-start;flex-wrap:wrap;gap:20px 36px}.work-also>span{padding-top:5px}.collaboration{min-width:190px;flex:1}.collaboration strong{display:block;font-size:16px;line-height:1.4}.collaboration p{margin:6px 0 0;color:#aaa;font-size:13px;line-height:1.5}@media (max-width:520px){.work-also{display:grid;grid-template-columns:1fr;gap:18px}.collaboration{min-width:0}}



/* Final targeted fix: reference-card sizing only. */


.brand {background:transparent;}



/* Logo: transparent SVG, no backing rectangle */
.brand {background:transparent; padding:0;}

/* October 2026: compact reference gallery, all viewport sizes. */





.cta-arrow {display:inline-block; width:18px; height:18px; vertical-align:middle; flex:none;}



/* Selected Work: single responsive layout, no conflicting legacy gallery rules. */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: none;
  margin-inline: 0;
  gap: 18px;
}
.work-grid > .work-card {
  grid-column: auto;
  position: relative;
  min-width: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #181b21;
}
.work-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s;
}
.work-card:hover img { transform: scale(1.035); }
.work-card::after {
  content: '';
  position: absolute;
  inset: 25% 0 0;
  background: linear-gradient(transparent, rgba(0,0,0,.9));
  pointer-events: none;
}
.work-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: clamp(12px, 2vw, 20px);
}
.work-card-info span {font-size: 10px; color: #ff853c; letter-spacing: .12em;}
.work-card-info h3 {
  font-size: clamp(14px, 1.7vw, 20px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .035em;
  margin: 7px 0 0;
}
.work-card-info .work-ensemble {
  font-size: clamp(11px, 1.1vw, 14px);
  font-weight: 400;
  color: #e6e6e6;
  line-height: 1.35;
  margin: 6px 0 0;
  overflow-wrap: anywhere;
}
.work-card-info .work-ensemble b {color: #f60; font-weight: 600; margin-right: 5px;}
@media (max-width: 700px) {
  .work-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 340px;
    gap: 16px;
  }
  .work-grid > .work-card {aspect-ratio: 16 / 9;}
  .work-card-info {padding: 12px;}
  .work-card-info h3 {font-size: clamp(13px, 4vw, 17px);}
  .work-card-info .work-ensemble {font-size: 11px;}
}