:root{--cream:#f4f0e7;--light:#faf8f2;--ink:#28231f;--red:#7b2119;--line:#d7cec0}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,sans-serif;line-height:1.45}img{display:block;max-width:100%}a{color:inherit}.site-header{min-height:112px;padding:15px 5vw;background:var(--light);display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.brand img{width:310px;max-height:85px;object-fit:contain}.main-nav{display:flex;gap:22px}.main-nav a{text-decoration:none;text-transform:uppercase;font-size:11px;font-weight:bold}.menu-toggle{display:none}.hero{display:grid;grid-template-columns:42% 58%;min-height:510px;background:var(--light)}.hero-copy{padding:55px 7vw;display:flex;flex-direction:column;justify-content:center}.hero-logo{width:370px;margin-bottom:20px}.hero-copy p{font-family:Georgia,serif;font-size:20px;line-height:1.55}.hero-image{min-height:510px;background:url("assets/hero-home-beach.webp") center/cover}.hero-buttons{display:flex;gap:16px}.button,.text-button{display:inline-block;padding:10px 20px;border:1px solid var(--red);color:var(--red);text-decoration:none;text-transform:uppercase;font-size:12px;font-weight:bold}.button-red{background:var(--red);color:white}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);background:var(--light)}.service-card{border-right:1px solid var(--line)}.service-card:last-child{border:0}.service-image{height:230px;background-size:cover;background-position:center}.service-card:nth-child(1) .service-image{background-image:url('assets/studio.webp')}.service-card:nth-child(2) .service-image{background-image:url('assets/location.webp')}.service-card:nth-child(3) .service-image{background-image:url('assets/podcast.webp')}.service-content{padding:25px 8% 36px}.service-content h2,.eyebrow{color:var(--red);text-transform:uppercase}.service-content h2{text-align:center;font-family:Georgia,serif;font-size:20px}.service-content ul{min-height:150px}.service-content li::marker{color:var(--red)}.about{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}.about-copy{padding:50px 7vw}.about-copy h2{font-family:Georgia,serif;font-weight:normal}.about-image{min-height:420px;background:url('assets/hero-studio.webp') center/cover}.signature{font-family:'Brush Script MT',cursive;font-size:30px}.credits{text-align:center;padding:34px 5vw;background:var(--light)}.credit-list{display:flex;justify-content:center;gap:20px 35px;flex-wrap:wrap;text-transform:uppercase;font-weight:bold}.gallery{display:grid;grid-template-columns:1fr 1fr 1.5fr 1fr 1fr;height:195px}.gallery-item{background-size:cover;background-position:center;border-right:2px solid var(--cream)}.gallery-item:nth-child(1){background-image:url('assets/gallery-1.webp')}.gallery-item:nth-child(2){background-image:url('assets/gallery-2.webp')}.gallery-item:nth-child(3){background-image:url('assets/gallery-3.jpg')}.gallery-item:nth-child(4){background-image:url('assets/gallery-4.webp')}.gallery-item:nth-child(5){background-image:url('assets/gallery-5.webp')}.site-footer{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:45px;padding:45px 7vw;background:var(--light);border-top:1px solid var(--line)}.footer-brand img{width:300px}.copyright{text-align:center;padding:12px;background:#2e2925;color:var(--cream);font-size:12px}.image-placeholder:after{display:none}@media(max-width:760px){.site-header{min-height:86px}.brand img{width:225px}.menu-toggle{display:block;background:none;border:1px solid var(--red);color:var(--red);padding:7px 10px}.main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--light);padding:18px;flex-direction:column;text-align:center}.main-nav.open{display:flex}.hero,.service-grid,.about,.site-footer{grid-template-columns:1fr}.hero-image{order:1;min-height:330px}.hero-copy{order:2;text-align:center;align-items:center;padding:42px 8vw}.service-card{border-right:0;border-bottom:1px solid var(--line)}.service-image{height:250px}.service-content{text-align:center}.service-content ul{display:inline-block;text-align:left;min-height:0}.about-image{min-height:310px}.gallery{grid-template-columns:1fr 1fr;height:auto}.gallery-item{height:180px}.gallery-wide{grid-column:span 2}.site-footer{gap:30px}}


/* ===== V2 refinements ===== */
.brand img { width: 380px; max-height: 82px; object-fit: contain; }
.main-nav a { font-size: 15px; }

/* Centre hero logo/copy/buttons */
.hero-copy { text-align: center; align-items: center; }
.hero-buttons { justify-content: center; }

/* Matching soft cream-to-image fade */
.hero-image {
  background-image:
    linear-gradient(to right, var(--light) 0%, rgba(250,248,242,.85) 6%, rgba(250,248,242,.45) 16%, rgba(250,248,242,0) 32%),
    url("assets/hero-location.webp");
}
.about { overflow: hidden; }
.about-image {
  background-image:
    linear-gradient(to right, var(--cream) 0%, rgba(245,241,232,.85) 6%, rgba(245,241,232,.45) 16%, rgba(245,241,232,0) 32%),
    url("assets/hero-studio.webp");
}

/* Supplied broadcast-credit artwork */
.credit-logos {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 24px;
  align-items: center;
  max-width: 1400px;
  margin: 24px auto 25px;
}
.credit-logos img {
  width: 100%;
  height: 100px;
  object-fit: contain;
  display: block;
}

/* Centre final three-column section */
.site-footer { text-align: center; align-items: center; }
.site-footer > div { justify-self: center; }
.footer-brand { align-items: center; }
.footer-brand img { margin-left: auto; margin-right: auto; }

@media (max-width: 1100px) {
  .brand img { width: 310px; }
  .main-nav { gap: 15px; }
  .main-nav a { font-size: 13px; }
  .credit-logos { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
  .brand img { width: 245px; }
  .main-nav a { font-size: 14px; }
  .hero-image {
    background-image:
      linear-gradient(to bottom, var(--light) 0%, rgba(250,248,242,0) 22%),
      url("assets/hero-location.webp");
  }
  .about-image {
    background-image:
      linear-gradient(to bottom, var(--cream) 0%, rgba(244,240,231,0) 22%),
      url("assets/hero-studio.webp");
  }
  .credit-logos { grid-template-columns: repeat(2, 1fr); gap: 20px 28px; }
  .credit-logos img { height: 110px; }
}


/* ===== V3 refinements ===== */
.instagram-link{
  flex:0 0 auto;
  width:25px;
  height:25px;
  color:var(--red);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:2px;
}
.instagram-link svg{
  width:23px;height:23px;
  fill:none;stroke:currentColor;stroke-width:1.8;
}
.instagram-link .ig-dot{fill:currentColor;stroke:none}
.instagram-link:hover{opacity:.65}

.contact-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
}
.contact-line svg{
  width:18px;height:18px;
  flex:0 0 18px;
  fill:none;
  stroke:var(--red);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.contact-line svg path:first-child{fill:none}

@media(max-width:760px){
  .instagram-link{
    position:absolute;
    right:62px;
    width:25px;height:25px;
  }
}

/* =========================================================
   LAUNCH V1.0 — CONTACT FORM AND TECHNICAL ACCESSIBILITY
   The approved three-column footer remains intact; the form
   spans the full footer width beneath it on every page.
   ========================================================= */
.home-hero-heading{
  margin:1em 0;
  font-family:Georgia,serif;
  font-size:20px;
  font-weight:400;
  line-height:1.55;
}

.site-footer .footer-form{
  grid-column:1 / -1;
  width:min(920px,100%);
  margin-top:10px;
  padding-top:36px;
  border-top:1px solid var(--line);
  justify-self:center;
  scroll-margin-top:130px;
}

.footer-form > .eyebrow{
  margin:0 0 22px;
  text-align:center;
}

.contact-form{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 22px;
  width:100%;
  text-align:left;
}

.contact-form-field{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.contact-form-field label{
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.contact-form-field label span{
  font-weight:400;
  letter-spacing:0;
  opacity:.65;
  text-transform:none;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  border:1px solid #bfb3a3;
  border-radius:0;
  background:#fffdf8;
  color:var(--ink);
  font:inherit;
  font-size:16px;
  line-height:1.4;
}

.contact-form input,
.contact-form select{
  min-height:46px;
  padding:10px 12px;
}

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

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color:var(--red);
  outline:2px solid rgba(123,33,25,.18);
  outline-offset:1px;
}

.contact-form-message,
.contact-form-actions,
.contact-form-privacy{
  grid-column:1 / -1;
}

.contact-form-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.contact-form-actions .button{
  flex:0 0 auto;
  cursor:pointer;
}

.contact-form-actions .button:disabled{
  cursor:wait;
  opacity:.65;
}

.contact-form-status{
  min-height:1.45em;
  margin:0;
  font-size:14px;
}

.contact-form-status--success{
  color:#315b3d;
  font-weight:700;
}

.contact-form-status--error{
  color:var(--red);
  font-weight:700;
}

.contact-form-privacy{
  margin:0;
  font-size:12px;
  line-height:1.45;
  opacity:.7;
  text-align:center;
}

.form-honeypot{
  position:absolute !important;
  left:-10000px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

.not-found-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.not-found-main{
  flex:1;
  min-height:520px;
  padding:90px 7vw;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
}

.not-found-main h1{
  margin:.15em 0 .45em;
  color:var(--red);
  font-family:Georgia,serif;
  font-size:clamp(36px,6vw,72px);
  font-weight:400;
}

.not-found-main p:not(.eyebrow){
  max-width:520px;
  margin:0 0 28px;
  font-size:18px;
}

@media(max-width:760px){
  .home-hero-heading{
    font-size:20px;
  }

  .site-footer .footer-form{
    margin-top:4px;
    padding-top:30px;
    scroll-margin-top:100px;
  }

  .contact-form{
    grid-template-columns:1fr;
  }

  .contact-form-message,
  .contact-form-actions,
  .contact-form-privacy{
    grid-column:1;
  }

  .contact-form-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .contact-form-actions .button{
    width:100%;
  }
}

/* V3.2: hero branding correction */
.hero-copy .hero-logo {
    display: block;
    width: min(390px, 90%);
    max-width: 390px;
    height: auto;
    margin: 0 auto 28px;
    opacity: 1;
}
@media (max-width: 760px) {
    .hero-copy .hero-logo {
        width: min(330px, 88%);
    }
}


/* ===== V3.3 interactive credit prototype ===== */
.credit-item{
  position:relative;
  min-width:0;
}
.credit-logo-button{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.credit-logo-button img{
  width:100%;
  height:100px;
  object-fit:contain;
  display:block;
}
.credit-logo-button:focus-visible{
  outline:2px solid var(--red);
  outline-offset:6px;
}
.credit-popover{
  position:absolute;
  left:50%;
  bottom:calc(100% + 14px);
  transform:translateX(-50%) translateY(6px);
  width:min(290px, 80vw);
  padding:16px 18px;
  background:var(--paper-light);
  border:1px solid var(--red);
  box-shadow:0 8px 24px rgba(48,44,40,.16);
  text-align:left;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:40;
}
.credit-popover::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  border:8px solid transparent;
  border-top-color:var(--red);
}
.credit-popover strong{
  display:block;
  color:var(--red);
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:15px;
  margin-bottom:8px;
}
.credit-popover span{
  display:block;
  font-size:13px;
  line-height:1.45;
}
.credit-note{
  margin-top:9px;
  font-style:italic;
  opacity:.72;
}
.credit-item.open .credit-popover,
.credit-logo-button[aria-expanded="true"] + .credit-popover{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

@media (hover:hover) and (pointer:fine){
  .credit-item--interactive:hover .credit-popover{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }
}

@media(max-width:760px){
  .credit-popover{
    bottom:auto;
    top:calc(100% + 12px);
  }
  .credit-popover::after{
    top:auto;
    bottom:100%;
    border-top-color:transparent;
    border-bottom-color:var(--red);
  }
}


/* ===== V4 full interactive credits ===== */
.credit-popover p{
  margin:9px 0 11px;
  font-size:12.5px;
  line-height:1.45;
}
.credit-view-link{
  display:inline-block;
  margin-top:2px;
  color:var(--red);
  font-size:12.5px;
  font-weight:700;
  text-decoration:none;
  border-bottom:1px solid currentColor;
}
.credit-view-link:hover{opacity:.68}
.credit-popover a{pointer-events:auto}


/* ===== V4.1 readability + logo cleanup ===== */
.credit-popover{
  background:#faf8f2 !important;
  background-color:#faf8f2 !important;
  opacity:0;
  isolation:isolate;
}
.credit-item.open .credit-popover,
.credit-logo-button[aria-expanded="true"] + .credit-popover{
  opacity:1;
}
@media (hover:hover) and (pointer:fine){
  .credit-item--interactive:hover .credit-popover{
    opacity:1;
  }
}

/* Ensure the popup itself is solid even if inherited/translucent rules exist */
.credit-popover::before{
  content:"";
  position:absolute;
  inset:0;
  background:#faf8f2;
  z-index:-1;
}

/* Keep all popup text above the solid panel */
.credit-popover > *{
  position:relative;
  z-index:1;
}


/* ===== V5 credit interaction refinements ===== */

/* The popover is positioned dynamically by JavaScript on desktop so it stays
   within the browser viewport and never covers its related logo. */
.credit-popover{
  position:fixed !important;
  left:0;
  top:0;
  bottom:auto !important;
  transform:none !important;
  width:min(300px, calc(100vw - 24px));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:1000;
}
.credit-popover::after{display:none !important;}

.credit-item.hover-open .credit-popover,
.credit-item.touch-open .credit-popover{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

/* Disable the old CSS hover placement; JS now owns display/placement. */
@media (hover:hover) and (pointer:fine){
  .credit-item--interactive:hover .credit-popover{
    transform:none !important;
  }
}

.credit-logo-button{
  cursor:pointer;
}


/* ===== V5.2 supplied signature ===== */
.signature.signature-image{
  transform:none;
  font-family:inherit;
  display:flex;
  justify-content:center;
  margin:14px auto 2px;
}
.signature.signature-image img{
  display:block;
  width:min(430px, 82%);
  height:auto;
  object-fit:contain;
}
@media(max-width:760px){
  .signature.signature-image img{width:min(360px, 90%);}
}


/* ===== V5.3 signature placement ===== */
.signature.signature-image{
  justify-content:flex-start;
  margin-left:0;
  margin-right:0;
}
.signature.signature-image img{
  width:min(215px, 41%);
  margin-left:0;
  margin-right:auto;
}
@media(max-width:760px){
  .signature.signature-image{
    justify-content:flex-start;
  }
  .signature.signature-image img{
    width:min(180px, 45%);
    margin-left:0;
    margin-right:auto;
  }
}


/* ===== V5.4 signature breathing room ===== */
.signature.signature-image{
  margin-top:28px;
  margin-bottom:28px;
}


/* =========================================================
   MUSIC PAGE — integrated shared-site styles (Ver 1.3)
   Scoped to body.music-page so the live homepage is untouched.
   ========================================================= */

.music-page{
  --music-cream:#f4f0e7;
  --music-light:#faf8f2;
  --music-ink:#2b2622;
  --music-gold:#b98736;
  --music-dark:#161514;
  --music-line:#d6cec1;
}

.music-page .image-box{overflow:hidden;background:#ddd2c3}
.music-page .image-box img{width:100%;height:100%;object-fit:cover}
.music-page .ratio-4-3{aspect-ratio:4/3}
.music-page .ratio-3-2{aspect-ratio:3/2}
.music-page .ratio-16-9{aspect-ratio:16/9}

.music-page .eyebrow{
  text-transform:uppercase;
  font-weight:700;
  font-size:12px;
  letter-spacing:1.2px;
  color:var(--music-gold);
  margin:0 0 10px;
}
.music-page .rule{
  width:42px;
  border-top:2px solid var(--music-gold);
  margin:0 0 20px;
}

/* Approved Ver 1.2 hero */
.music-page .hero.hero-live{
  position:relative;
  display:block;
  min-height:640px;
  overflow:hidden;
  background:#171411;
  color:#fff;
}
.music-page .hero-live-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.music-page .hero-live-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(12,10,8,.86) 0%,rgba(12,10,8,.66) 27%,rgba(12,10,8,.34) 50%,rgba(12,10,8,.12) 72%,rgba(12,10,8,.05) 100%),
    linear-gradient(0deg,rgba(12,10,8,.22) 0%,rgba(12,10,8,0) 42%);
}
.music-page .hero-live-copy{
  position:relative;
  z-index:2;
  width:min(590px,48vw);
  min-height:640px;
  padding:82px 0 70px 6.5vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.music-page .hero-live-copy h1{
  margin:0 0 24px;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:clamp(56px,5.2vw,84px);
  line-height:.98;
  letter-spacing:-1.8px;
  text-shadow:0 3px 22px rgba(0,0,0,.28);
}
.music-page .hero-live-copy .hero-services{
  margin:0;
  color:#f3eee7;
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.45px;
  text-shadow:0 1px 10px rgba(0,0,0,.38);
}

/* Lower sections retained from concept while imagery is replaced section-by-section */
.music-page .section{padding:54px 8vw}
.music-page .philosophy{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:80px;
  background:var(--music-light);
}
.music-page .philosophy h2,
.music-page .musicianship h2,
.music-page .studio h2,
.music-page .budget h2,
.music-page .for-who h2,
.music-page .cta h2{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}
.music-page .philosophy h2{font-size:34px;line-height:1.15;margin:0 0 16px}
.music-page .philosophy p{font-size:14px}
.music-page .philosophy-points{display:grid;gap:20px}
.music-page .philosophy-points article{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.music-page .icon{
  width:36px;height:36px;border:1px solid var(--music-gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--music-gold)
}
.music-page .philosophy-points h3,
.music-page .service-card h3,
.music-page .mini-grid h3{
  font-size:12px;text-transform:uppercase;letter-spacing:.8px;margin:0 0 5px
}

.music-page .services{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
  background:var(--music-cream);
}
.music-page .service-card h3{margin-top:16px}
.music-page .service-card p{font-size:14px;margin:0}

.music-page .musicianship{
  display:grid;
  grid-template-columns:38% 62%;
  background:var(--music-dark);
  color:#fff;
}
.music-page .musicianship-media{aspect-ratio:auto;min-height:390px}
.music-page .musicianship-copy{padding:56px 6vw}
.music-page .musicianship-copy h2{font-size:34px;line-height:1.15;margin:0 0 16px;max-width:680px}
.music-page .musicianship-copy>p:not(.eyebrow){color:#ddd}
.music-page .mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:32px}
.music-page .mini-grid p{font-size:12px;color:#d5d5d5}

.music-page .studio{
  display:grid;
  grid-template-columns:.8fr 1.4fr;
  gap:70px;
  background:var(--music-light);
  align-items:center;
}
.music-page .studio-copy h2{font-size:34px;line-height:1.14;margin:0 0 16px}
.music-page .studio-copy p{font-size:14px}
.music-page .outline-button{
  display:inline-block;
  margin-top:18px;
  padding:11px 20px;
  border:1px solid #7f756b;
  text-decoration:none;
  text-transform:uppercase;
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
}
.music-page .studio-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.music-page .studio-gallery .wide{grid-column:1/-1}
.music-page .mosaic-note{grid-column:1/-1;text-align:right;font-size:11px;margin:4px 0 0}

.music-page .budget{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:80px;
  background:#f2ebde;
  border-top:1px solid var(--music-line);
  border-bottom:1px solid var(--music-line);
}
.music-page .budget h2{font-size:31px;line-height:1.16;margin:0}
.music-page .budget-copy p{font-size:14px;margin:0 0 14px}

.music-page .for-who{
  display:grid;
  grid-template-columns:46% 54%;
  background:var(--music-light);
  align-items:stretch;
}
.music-page .for-who-copy{padding:52px 8vw}
.music-page .for-who h2{font-size:35px;line-height:1.14;margin:0 0 16px}
.music-page .for-who-copy p{font-size:14px}
.music-page .for-who-media{aspect-ratio:auto;min-height:320px}

.music-page .cta{position:relative;min-height:250px;color:#fff;overflow:hidden}
.music-page .cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.music-page .cta-overlay{position:absolute;inset:0;background:rgba(20,17,15,.62)}
.music-page .cta-content{position:relative;z-index:1;text-align:center;padding:55px 20px}
.music-page .cta h2{font-size:38px;margin:0 0 6px}
.music-page .cta p{margin:0 0 22px}
.music-page .gold-button{
  display:inline-block;
  color:#fff;
  border:1px solid var(--music-gold);
  padding:10px 22px;
  text-decoration:none;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.7px;
}
.music-page .gold-button:hover{background:var(--music-gold)}

@media(max-width:760px){
  .music-page .hero.hero-live{min-height:560px}
  .music-page .hero-live-image{object-position:58% center}
  .music-page .hero-live-overlay{
    background:linear-gradient(90deg,rgba(12,10,8,.86) 0%,rgba(12,10,8,.62) 58%,rgba(12,10,8,.26) 100%);
  }
  .music-page .hero-live-copy{
    width:88%;
    min-height:560px;
    padding:68px 0 54px 7vw;
  }
  .music-page .hero-live-copy h1{
    font-size:clamp(44px,12vw,64px);
    line-height:1;
    letter-spacing:-1px;
  }
  .music-page .hero-live-copy .hero-services{
    font-size:12px;
    letter-spacing:1.1px;
  }
  .music-page .philosophy,
  .music-page .studio,
  .music-page .budget{
    grid-template-columns:1fr;
    gap:34px;
  }
  .music-page .services{grid-template-columns:1fr}
  .music-page .musicianship{grid-template-columns:1fr}
  .music-page .musicianship-media{aspect-ratio:4/3;min-height:0}
  .music-page .mini-grid{grid-template-columns:1fr}
  .music-page .for-who{grid-template-columns:1fr}
  .music-page .for-who-media{aspect-ratio:16/9;min-height:0}
}


/* =========================================================
   MUSIC PAGE V3.3 — HERO FADE ONLY
   Solid black on the left behind the headline, revealing the
   approved graded hero image progressively toward the right.
   ========================================================= */

.music-page .hero-live-overlay{
  background:
    linear-gradient(
      90deg,
      #000 0%,
      #000 34%,
      rgba(0,0,0,.98) 39%,
      rgba(0,0,0,.86) 45%,
      rgba(0,0,0,.62) 52%,
      rgba(0,0,0,.34) 60%,
      rgba(0,0,0,.14) 70%,
      rgba(0,0,0,.03) 82%,
      rgba(0,0,0,0) 100%
    );
}

@media(max-width:760px){
  .music-page .hero-live-overlay{
    background:
      linear-gradient(
        90deg,
        #000 0%,
        #000 46%,
        rgba(0,0,0,.94) 56%,
        rgba(0,0,0,.72) 68%,
        rgba(0,0,0,.36) 82%,
        rgba(0,0,0,.08) 94%,
        rgba(0,0,0,0) 100%
      );
  }
}


/* =========================================================
   MUSIC PAGE V3.4 — HERO FADE REFINEMENT ONLY
   Same V3.3 idea, compressed substantially toward the left
   so almost the entire right-hand computer screen is revealed.
   ========================================================= */

.music-page .hero-live-overlay{
  background:
    linear-gradient(
      90deg,
      #000 0%,
      #000 17%,
      rgba(0,0,0,.96) 20%,
      rgba(0,0,0,.78) 24%,
      rgba(0,0,0,.50) 29%,
      rgba(0,0,0,.25) 34%,
      rgba(0,0,0,.08) 39%,
      rgba(0,0,0,0) 44%,
      rgba(0,0,0,0) 100%
    );
}

@media(max-width:760px){
  .music-page .hero-live-overlay{
    background:
      linear-gradient(
        90deg,
        #000 0%,
        #000 23%,
        rgba(0,0,0,.94) 28%,
        rgba(0,0,0,.70) 34%,
        rgba(0,0,0,.40) 41%,
        rgba(0,0,0,.15) 48%,
        rgba(0,0,0,0) 56%,
        rgba(0,0,0,0) 100%
      );
  }
}


/* =========================================================
   MUSICIAN AT HEART — CLEAN AUTHORITATIVE RULESET
   Replaces all V4.1–V4.16 experimental overrides.
   Target: V4.13 text/fade/reveal, correct aspect ratio,
   photograph flush right, no separate image-edge seam.
   ========================================================= */

.music-page .musicianship{
  position:relative;
  display:block;
  min-height:390px;
  overflow:hidden;
  background:#000;
  color:#fff;
}

/* Right-hand photographic layer. */
.music-page .musicianship .musicianship-media,
.music-page .musicianship > .image-box{
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  bottom:0;
  left:27%;
  width:auto;
  min-height:0;
  margin:0;
  aspect-ratio:auto;
  overflow:hidden;
  background:#000;
}

/* Fill the photographic layer without distortion and anchor crop to right. */
.music-page .musicianship .musicianship-media img,
.music-page .musicianship > .image-box img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:right center;
  transform:translateX(10%);
}

/* Disable any image-box pseudo-element treatment. */
.music-page .musicianship .musicianship-media::before,
.music-page .musicianship > .image-box::before{
  display:none;
}

/* Single section-wide fade: V4.13 geometry. */
.music-page .musicianship::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
background:linear-gradient(
  90deg,
  #000 0%,
  #000 35%,
  rgba(0,0,0,.97) 39%,
  rgba(0,0,0,.82) 44%,
  rgba(0,0,0,.58) 49%,
  rgba(0,0,0,.32) 54%,
  rgba(0,0,0,.13) 59%,
  rgba(0,0,0,.03) 64%,
  rgba(0,0,0,0) 68%,
  rgba(0,0,0,0) 100%
);
}

/* Preserve established text placement. */
.music-page .musicianship .musicianship-copy{
  position:relative;
  z-index:3;
  width:38%;
  min-height:390px;
  padding:56px 6vw;
  background:transparent;
}

/* Mobile: simple stacked presentation. */
@media(max-width:760px){
  .music-page .musicianship{
    display:grid;
    grid-template-columns:1fr;
  }

  .music-page .musicianship .musicianship-copy{
    width:100%;
    min-height:0;
    background:#000;
  }

  .music-page .musicianship .musicianship-media,
  .music-page .musicianship > .image-box{
    position:relative;
    inset:auto;
    width:100%;
    aspect-ratio:4/3;
  }

  .music-page .musicianship::after{
    display:none;
  }
}

.music-page .musicianship .musicianship-media img,
.music-page .musicianship > .image-box img{
  width:102%;
  max-width:none;
  right:-2%;
  left:auto;
}

/* =========================================================
   MUSIC PAGE V5 — THE STUDIO COLLAGE, FIRST PASS
   V4.16 remains the locked baseline.
   Six real, separately coded images; no baked-in collage.
   Copy is intentionally unchanged for now.
   ========================================================= */

.music-page .studio-gallery.studio-gallery-v5{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:300px 150px 255px;
  gap:6px;
  align-self:stretch;
  min-width:0;
}

.music-page .studio-gallery-v5 .studio-tile{
  position:relative;
  overflow:hidden;
  min-width:0;
  min-height:0;
  background:#171411;
}

.music-page .studio-gallery-v5 .studio-tile img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
}

/* Top row — compact/taller Focal, wider Kawai. */
.music-page .studio-tile-focal{
  grid-column:1 / span 5;
  grid-row:1;
}
.music-page .studio-tile-focal img{
  object-position:43% 52%;
}

.music-page .studio-tile-piano{
  grid-column:6 / span 7;
  grid-row:1;
}
.music-page .studio-tile-piano img{
  object-position:49% 54%;
}

/* Middle row — 24:9-style extreme close-up strip. */
.music-page .studio-tile-resonator{
  grid-column:1 / -1;
  grid-row:2;
}
.music-page .studio-tile-resonator img{
  object-position:50% 68%;
  transform:scale(1.45);
  transform-origin:50% 68%;
}

/* Bottom row — recognisable analogue/mic images plus near-abstract timber detail. */
.music-page .studio-tile-vintech{
  grid-column:1 / span 5;
  grid-row:3;
}
.music-page .studio-tile-vintech img{
  object-position:48% 50%;
}

.music-page .studio-tile-mics{
  grid-column:6 / span 4;
  grid-row:3;
}
.music-page .studio-tile-mics img{
  object-position:49% 50%;
}

.music-page .studio-tile-gilet{
  grid-column:10 / span 3;
  grid-row:3;
}
.music-page .studio-tile-gilet img{
  object-position:53% 67%;
  transform:scale(1.42);
  transform-origin:53% 67%;
}

/* Tablet: keep the editorial rhythm but simplify the geometry. */
@media(max-width:1050px){
  .music-page .studio-gallery.studio-gallery-v5{
    grid-template-rows:260px 135px 225px;
  }
}

/* Mobile: retain the wide resonator strip, stack the rest cleanly. */
@media(max-width:760px){
  .music-page .studio-gallery.studio-gallery-v5{
    grid-template-columns:1fr 1fr;
    grid-template-rows:240px 240px 115px 220px 220px;
    gap:5px;
  }

  .music-page .studio-tile-focal{
    grid-column:1;
    grid-row:1;
  }

  .music-page .studio-tile-piano{
    grid-column:2;
    grid-row:1;
  }

  .music-page .studio-tile-resonator{
    grid-column:1 / -1;
    grid-row:2;
  }

  .music-page .studio-tile-vintech{
    grid-column:1 / -1;
    grid-row:3;
  }

  .music-page .studio-tile-mics{
    grid-column:1;
    grid-row:4;
  }

  .music-page .studio-tile-gilet{
    grid-column:2;
    grid-row:4;
  }
}


/* =========================================================
   MUSIC PAGE V5.1 — STUDIO COLLAGE LAYOUT REWORK
   CODE ONLY.
   Recreates the approved mockup geometry using the existing,
   real image assets already included in V5.
   ========================================================= */

/* Shrink the overall collage footprint by ~15% and keep it centered. */
.music-page .studio-gallery.studio-gallery-v5{
  width:85%;
  margin-left:auto;
  margin-right:auto;

  /* Wider, more cinematic overall footprint. */
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:260px 125px 210px;
  gap:6px;
}

/* LEFT TALL PANEL — Kawai, rotated 90deg counter-clockwise. */
.music-page .studio-tile-piano{
  grid-column:1 / span 4;
  grid-row:1 / span 2;
}

.music-page .studio-tile-piano img{
  position:absolute;
  top:50%;
  left:50%;

  /* Because the portrait source is rotated, swap the fill dimensions. */
  width:auto;
  height:118%;
  max-width:none;

  object-fit:cover;
  object-position:center center;
  transform:translate(-50%,-50%) rotate(-90deg);
  transform-origin:center center;
}

/* TOP RIGHT — wide Focal panel. */
.music-page .studio-tile-focal{
  grid-column:5 / span 8;
  grid-row:1;
}

.music-page .studio-tile-focal img{
  object-position:44% 52%;
  transform:none;
}

/* MIDDLE RIGHT — wide resonator strip. */
.music-page .studio-tile-resonator{
  grid-column:5 / span 8;
  grid-row:2;
}

.music-page .studio-tile-resonator img{
  object-position:50% 66%;
  transform:scale(1.48);
  transform-origin:50% 66%;
}

/* BOTTOM ROW — three equal editorial tiles across the full width. */
.music-page .studio-tile-vintech{
  grid-column:1 / span 4;
  grid-row:3;
}

.music-page .studio-tile-mics{
  grid-column:5 / span 4;
  grid-row:3;
}

.music-page .studio-tile-gilet{
  grid-column:9 / span 4;
  grid-row:3;
}

.music-page .studio-tile-gilet img{
  object-position:53% 67%;
  transform:scale(1.42);
  transform-origin:53% 67%;
}

/* Tablet: preserve the same visual hierarchy, just a little shorter. */
@media(max-width:1050px){
  .music-page .studio-gallery.studio-gallery-v5{
    width:90%;
    grid-template-rows:230px 112px 190px;
  }
}

/* Mobile: abandon the rotation and use a clean stack. */
@media(max-width:760px){
  .music-page .studio-gallery.studio-gallery-v5{
    width:100%;
    grid-template-columns:1fr 1fr;
    grid-template-rows:220px 220px 110px 210px 210px;
  }

  .music-page .studio-tile-piano{
    grid-column:1 / -1;
    grid-row:1;
  }

  .music-page .studio-tile-piano img{
    position:static;
    width:100%;
    height:100%;
    transform:none;
    object-fit:cover;
    object-position:center 54%;
  }

  .music-page .studio-tile-focal{
    grid-column:1 / -1;
    grid-row:2;
  }

  .music-page .studio-tile-resonator{
    grid-column:1 / -1;
    grid-row:3;
  }

  .music-page .studio-tile-vintech{
    grid-column:1 / -1;
    grid-row:4;
  }

  .music-page .studio-tile-mics{
    grid-column:1;
    grid-row:5;
  }

  .music-page .studio-tile-gilet{
    grid-column:2;
    grid-row:5;
  }
}


/* =========================================================
   MUSIC PAGE V5.2 — STUDIO COLLAGE 16:9 REBALANCE
   CODE ONLY. Base: V5.1.
   - Keep overall collage width/scale.
   - Unrotate Kawai, same left-side anchor.
   - Make overall collage feel more 16:9.
   - Rebalance existing six tiles only.
   ========================================================= */

.music-page .studio-gallery.studio-gallery-v5{
  width:85%;
  margin-left:auto;
  margin-right:auto;
  grid-template-columns:repeat(12,minmax(0,1fr));

  /* Wider overall composition: approx 16:9 feel */
  grid-template-rows:220px 105px 180px;
  gap:6px;
}

/* KAWAI — same left-side placement, now upright/unrotated. */
.music-page .studio-tile-piano{
  grid-column:1 / span 4;
  grid-row:1 / span 2;
}

.music-page .studio-tile-piano img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:50% 48%;
  transform:none;
}

/* FOCAL — wider, shallower anchor on top right. */
.music-page .studio-tile-focal{
  grid-column:5 / span 8;
  grid-row:1;
}

.music-page .studio-tile-focal img{
  object-position:44% 52%;
  transform:none;
}

/* RESONATOR — shallow widescreen strip. */
.music-page .studio-tile-resonator{
  grid-column:5 / span 8;
  grid-row:2;
}

.music-page .studio-tile-resonator img{
  object-position:50% 66%;
  transform:scale(1.40);
  transform-origin:50% 66%;
}

/* Bottom row: keep the same three images, slightly flatter proportions. */
.music-page .studio-tile-vintech{
  grid-column:1 / span 4;
  grid-row:3;
}

.music-page .studio-tile-mics{
  grid-column:5 / span 4;
  grid-row:3;
}

.music-page .studio-tile-gilet{
  grid-column:9 / span 4;
  grid-row:3;
}

.music-page .studio-tile-gilet img{
  object-position:53% 67%;
  transform:scale(1.34);
  transform-origin:53% 67%;
}

@media(max-width:1050px){
  .music-page .studio-gallery.studio-gallery-v5{
    width:90%;
    grid-template-rows:205px 100px 170px;
  }
}

@media(max-width:760px){
  .music-page .studio-gallery.studio-gallery-v5{
    width:100%;
    grid-template-columns:1fr 1fr;
    grid-template-rows:220px 220px 110px 210px 210px;
  }

  .music-page .studio-tile-piano{
    grid-column:1 / -1;
    grid-row:1;
  }

  .music-page .studio-tile-piano img{
    position:static;
    width:100%;
    height:100%;
    transform:none;
    object-fit:cover;
    object-position:center 50%;
  }

  .music-page .studio-tile-focal{
    grid-column:1 / -1;
    grid-row:2;
  }

  .music-page .studio-tile-resonator{
    grid-column:1 / -1;
    grid-row:3;
  }

  .music-page .studio-tile-vintech{
    grid-column:1 / -1;
    grid-row:4;
  }

  .music-page .studio-tile-mics{
    grid-column:1;
    grid-row:5;
  }

  .music-page .studio-tile-gilet{
    grid-column:2;
    grid-row:5;
  }
}


/* =========================================================
   MUSIC PAGE V5.3 — STUDIO SECTION VISUAL-FIRST
   CODE ONLY. Base: V5.2.
   - Collage left, copy right.
   - Collage gets visual priority.
   - Collage pushed toward a 20:9 proportion.
   - Same six images and same copy.
   ========================================================= */

/* Reverse the Studio section hierarchy: visual first, copy second. */
.music-page .studio-inner{
  grid-template-columns:minmax(0, 1.72fr) minmax(280px, 1fr);
  gap:clamp(34px,4.5vw,72px);
  align-items:center;
}

/* Existing HTML order is copy then gallery, so place explicitly. */
.music-page .studio-copy{
  grid-column:2;
  grid-row:1;
}

.music-page .studio-gallery.studio-gallery-v5{
  grid-column:1;
  grid-row:1;

  /* Fill the larger left column rather than shrinking within it. */
  width:100%;
  margin:0;

  /* Approx. 20:9 overall collage geometry. */
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:185px 82px 145px;
  gap:6px;
}

/* Keep the six-image editorial structure, but flatten each zone. */
.music-page .studio-tile-piano{
  grid-column:1 / span 4;
  grid-row:1 / span 2;
}

.music-page .studio-tile-piano img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 48%;
  transform:none;
}

.music-page .studio-tile-focal{
  grid-column:5 / span 8;
  grid-row:1;
}

.music-page .studio-tile-focal img{
  object-position:44% 52%;
  transform:none;
}

.music-page .studio-tile-resonator{
  grid-column:5 / span 8;
  grid-row:2;
}

.music-page .studio-tile-resonator img{
  object-position:50% 66%;
  transform:scale(1.40);
  transform-origin:50% 66%;
}

.music-page .studio-tile-vintech{
  grid-column:1 / span 4;
  grid-row:3;
}

.music-page .studio-tile-mics{
  grid-column:5 / span 4;
  grid-row:3;
}

.music-page .studio-tile-gilet{
  grid-column:9 / span 4;
  grid-row:3;
}

.music-page .studio-tile-gilet img{
  object-position:53% 67%;
  transform:scale(1.34);
  transform-origin:53% 67%;
}

/* Medium screens: retain image-first layout but give copy breathing room. */
@media(max-width:1050px){
  .music-page .studio-inner{
    grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr);
    gap:32px;
  }

  .music-page .studio-gallery.studio-gallery-v5{
    width:100%;
    grid-template-rows:165px 74px 130px;
  }
}

/* Mobile: return to a single column, with collage deliberately first. */
@media(max-width:760px){
  .music-page .studio-inner{
    display:flex;
    flex-direction:column;
    gap:28px;
  }

  .music-page .studio-gallery.studio-gallery-v5{
    order:1;
    width:100%;
    grid-template-columns:1fr 1fr;
    grid-template-rows:220px 220px 110px 210px 210px;
  }

  .music-page .studio-copy{
    order:2;
  }

  .music-page .studio-tile-piano{
    grid-column:1 / -1;
    grid-row:1;
  }

  .music-page .studio-tile-focal{
    grid-column:1 / -1;
    grid-row:2;
  }

  .music-page .studio-tile-resonator{
    grid-column:1 / -1;
    grid-row:3;
  }

  .music-page .studio-tile-vintech{
    grid-column:1 / -1;
    grid-row:4;
  }

  .music-page .studio-tile-mics{
    grid-column:1;
    grid-row:5;
  }

  .music-page .studio-tile-gilet{
    grid-column:2;
    grid-row:5;
  }
}


/* =========================================================
   MUSIC PAGE V5.4 — STUDIO COLUMN RATIO CORRECTION
   CODE ONLY. Base: V5.3.
   Explicit desktop ratio:
   LEFT  = 65% collage
   RIGHT = 35% copy
   ========================================================= */

@media(min-width:1051px){
  .music-page .studio-inner{
    display:grid;
    grid-template-columns:65% 35%;
    column-gap:0;
    align-items:center;
    width:100%;
  }

  .music-page .studio-gallery.studio-gallery-v5{
    grid-column:1;
    grid-row:1;
    width:100%;
    max-width:none;
    margin:0;
    box-sizing:border-box;
  }

  .music-page .studio-copy{
    grid-column:2;
    grid-row:1;
    width:100%;
    max-width:none;
    box-sizing:border-box;
    padding-left:clamp(32px,4vw,64px);
    padding-right:0;
  }
}


/* =========================================================
   MUSIC PAGE V5.5 — STUDIO SECTION RATIO FIX
   CODE ONLY. Base: V5.4.

   IMPORTANT:
   The actual Studio section element is .studio — there is no
   .studio-inner wrapper. This override targets the real layout.
   ========================================================= */

@media(min-width:1051px){

  /* Entire Studio section:
     LEFT  = 65% collage
     RIGHT = 35% copy */
  .music-page .studio{
    display:grid;
    grid-template-columns:65% 35%;
    gap:0;
    align-items:center;
  }

  /* Collage is visually first, on the left. */
  .music-page .studio-gallery.studio-gallery-v5{
    grid-column:1;
    grid-row:1;
    width:100%;
    max-width:none;
    margin:0;

    /* Explicit wide, non-square overall shape. */
    aspect-ratio:20 / 9;

    /* Let the rows divide the fixed 20:9 box proportionally. */
    grid-template-rows:4fr 2fr 3fr;
  }

  /* Copy goes on the right, with breathing room from the collage. */
  .music-page .studio-copy{
    grid-column:2;
    grid-row:1;
    width:100%;
    max-width:none;
    padding-left:clamp(34px,4vw,64px);
    padding-right:0;
  }
}

/* MUSIC PAGE V5.6 — STUDIO COPY */
.music-page .studio-copy .studio-lead{margin-top:0;margin-bottom:1.05em;}
.music-page .studio-copy .gear-curious-link{
  display:inline-block;margin-top:.65rem;color:var(--cream,#efe5d3);
  text-decoration:none;border-bottom:1px solid rgba(239,229,211,.38);
  padding-bottom:.16rem;transition:border-color .2s ease,opacity .2s ease;
}
.music-page .studio-copy .gear-curious-link:hover,
.music-page .studio-copy .gear-curious-link:focus-visible{border-color:currentColor;opacity:.82;}


/* =========================================================
   MUSIC PAGE V5.7 — STUDIO COPY PRESENTATION
   Base: V5.6. Collage geometry/images unchanged.
   ========================================================= */

.music-page .studio-kicker{
  margin:0 0 .85rem;
  font-size:.78rem;
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent, #b66f3b);
  font-weight:600;
}

/* Compact boxed CTA, echoing the small Learn More controls. */
.music-page .studio-copy .gear-curious-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:.8rem;
  padding:.58rem .82rem;
  border:1px solid rgba(182,111,59,.72);
  color:var(--accent, #b66f3b);
  background:transparent;
  text-decoration:none;
  font-size:.78rem;
  line-height:1;
  letter-spacing:.04em;
  border-radius:2px;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}

.music-page .studio-copy .gear-curious-link:hover,
.music-page .studio-copy .gear-curious-link:focus-visible{
  opacity:1;
  border-color:var(--accent, #b66f3b);
  background:rgba(182,111,59,.10);
  color:var(--accent, #b66f3b);
}

/* Ensure any old gallery caption/note cannot reappear from inherited markup. */
.music-page .studio-gallery + .mosaic-note,
.music-page .studio-gallery + .studio-gallery-note{
  display:none !important;
}

/* MUSIC V5.8 — Studio subheading matched to previous section lead treatment */
.music-page .studio-copy .studio-lead{
  font-size:clamp(1.25rem,1.7vw,1.55rem);
  line-height:1.42;
  font-weight:400;
  letter-spacing:0;
}

/* MUSIC V5.8 — remove superseded Studio legacy controls/text if inherited */
.music-page .studio-gallery .mosaic-note,
.music-page .studio-gallery-note,
.music-page a[href="#"]:has(> span),
.music-page .selected-equipment-link{
  /* legacy-specific markup is removed in HTML; selectors retained only as guardrails */
}


/* =========================================================
   MUSIC PAGE V5.9 — STUDIO LEAD STYLE
   Match the visual role of “Great recordings start with the music.”
   and add the same small orange-rule language beneath it.
   ========================================================= */

.music-page .studio-copy .studio-lead{
  font-size:clamp(1.45rem,2vw,1.9rem);
  line-height:1.28;
  font-weight:400;
  letter-spacing:0;
  margin:0 0 .72rem;
}

.music-page .studio-copy .studio-lead-rule{
  width:42px;
  height:2px;
  margin:0 0 1.2rem;
  background:var(--accent,#b66f3b);
}


/* =========================================================
   MUSIC PAGE V6.0 — WORKING TOGETHER / RECORD NEEDS
   First coded pass.
   ========================================================= */

.music-page .record-needs-section{
  padding:clamp(72px,8vw,120px) clamp(24px,5vw,76px);
  background:#efe7d8;
  color:#17130f;
}

.music-page .record-needs-inner{
  max-width:1320px;
  margin:0 auto;
}

.music-page .record-needs-copy{
  max-width:920px;
}

.music-page .record-needs-kicker{
  margin:0 0 .8rem;
  font-size:.78rem;
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent,#b66f3b);
  font-weight:600;
}

.music-page .record-needs-copy h2{
  max-width:760px;
  margin:0;
  font-size:clamp(2rem,3.25vw,3.35rem);
  line-height:1.08;
  font-weight:400;
  letter-spacing:-.02em;
}

.music-page .record-needs-rule{
  width:44px;
  height:2px;
  margin:1.1rem 0 1.65rem;
  background:var(--accent,#b66f3b);
}

.music-page .record-needs-copy > p{
  max-width:820px;
  font-size:clamp(1rem,1.12vw,1.12rem);
  line-height:1.72;
  margin:0 0 1rem;
}

.music-page .record-needs-copy .record-needs-close{
  margin-top:1.35rem;
  font-size:clamp(1.15rem,1.45vw,1.35rem);
  line-height:1.45;
  font-weight:500;
}

.music-page .record-needs-icons{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,4vw,58px);
  margin-top:clamp(48px,6vw,78px);
  padding-top:clamp(32px,4vw,48px);
  border-top:1px solid rgba(23,19,15,.16);
}

.music-page .record-needs-item{
  max-width:330px;
}

.music-page .record-needs-icon{
  width:54px;
  height:54px;
  margin-bottom:1.05rem;
  color:var(--accent,#b66f3b);
}

.music-page .record-needs-icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.music-page .record-needs-item h3{
  margin:0 0 .65rem;
  font-size:.78rem;
  line-height:1.2;
  letter-spacing:.14em;
  font-weight:600;
  color:var(--accent,#b66f3b);
}

.music-page .record-needs-item p{
  margin:0;
  font-size:.96rem;
  line-height:1.55;
}

@media(min-width:1000px){
  .music-page .record-needs-copy{
    margin-left:8%;
  }
  .music-page .record-needs-icons{
    margin-left:8%;
    margin-right:5%;
  }
}

@media(max-width:760px){
  .music-page .record-needs-section{
    padding:64px 22px;
  }

  .music-page .record-needs-icons{
    grid-template-columns:1fr;
    gap:34px;
  }

  .music-page .record-needs-item{
    max-width:440px;
  }
}


/* =========================================================
   MUSIC PAGE V6.1 — WORKING TOGETHER TYPE SCALE
   Bring V6.0 back into the established earlier-page hierarchy.
   ========================================================= */

.music-page .record-needs-copy h2{
  max-width:760px;
  font-size:clamp(1.45rem,2vw,1.9rem);
  line-height:1.28;
  font-weight:400;
  letter-spacing:0;
}

.music-page .record-needs-copy > p{
  max-width:820px;
  font-size:1rem;
  line-height:1.62;
}

.music-page .record-needs-copy .record-needs-close{
  font-size:1rem;
  line-height:1.62;
  font-weight:500;
}

.music-page .record-needs-item p{
  font-size:.94rem;
  line-height:1.55;
}


/* =========================================================
   MUSIC PAGE V6.2 — FINISH IT ICON
   Rotate only the third icon 90 degrees so the three control
   lines read more like vertical mixer faders.
   ========================================================= */

.music-page .record-needs-item:nth-child(3) .record-needs-icon svg{
  transform:rotate(90deg);
  transform-origin:50% 50%;
}


/* =========================================================
   MUSIC PAGE V7.0 — THE MONEY
   First coded pass.
   Typography follows the established restrained Music-page scale.
   ========================================================= */

.music-page .money-section{
  padding:clamp(72px,8vw,120px) clamp(24px,5vw,76px);
  background:#171411;
  color:#efe7d8;
  overflow:hidden;
}

.music-page .money-inner{
  max-width:1320px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);
  gap:clamp(46px,7vw,110px);
  align-items:center;
}

/* ----- Clock / statement ----- */

.music-page .money-graphic{
  position:relative;
  min-height:470px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.music-page .money-clock{
  width:min(100%,430px);
  height:auto;
  color:var(--accent,#b66f3b);
  opacity:.82;
}

.music-page .money-clock-ring,
.music-page .money-clock-ticks line,
.music-page .money-clock-hand{
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
}

.music-page .money-clock-ring{
  stroke-width:1.15;
  opacity:.54;
}

.music-page .money-clock-ring-inner{
  stroke-width:.7;
  opacity:.22;
}

.music-page .money-clock-ticks line{
  stroke-width:2;
  opacity:.7;
}

.music-page .money-clock-hub{
  fill:currentColor;
  opacity:.88;
}

.music-page .money-clock-hand{
  stroke-width:2.5;
  opacity:.9;
}

.music-page .money-clock-hand-hour{
  stroke-width:4;
}

.music-page .money-graphic-statement{
  position:absolute;
  left:50%;
  bottom:1.2rem;
  transform:translateX(-50%);
  width:100%;
  text-align:center;
  font-size:clamp(1.15rem,1.55vw,1.42rem);
  line-height:1.38;
  font-weight:400;
}

.music-page .money-graphic-statement span,
.music-page .money-graphic-statement strong{
  display:block;
}

.music-page .money-graphic-statement strong{
  font-weight:500;
  color:var(--accent,#b66f3b);
}

/* ----- Copy ----- */

.music-page .money-kicker{
  margin:0 0 .8rem;
  font-size:.78rem;
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent,#b66f3b);
  font-weight:600;
}

.music-page .money-copy h2{
  max-width:700px;
  margin:0;
  font-size:clamp(1.45rem,2vw,1.9rem);
  line-height:1.28;
  font-weight:400;
  letter-spacing:0;
}

.music-page .money-rule{
  width:42px;
  height:2px;
  margin:1rem 0 1.35rem;
  background:var(--accent,#b66f3b);
}

.music-page .money-copy p{
  max-width:720px;
  margin:0 0 1rem;
  font-size:1rem;
  line-height:1.62;
  color:rgba(239,231,216,.91);
}

.music-page .money-copy strong{
  color:#efe7d8;
  font-weight:600;
}

@media(max-width:900px){
  .music-page .money-inner{
    grid-template-columns:1fr;
    gap:42px;
  }

  .music-page .money-copy{
    order:1;
  }

  .music-page .money-graphic{
    order:2;
    min-height:390px;
  }

  .music-page .money-clock{
    width:min(82vw,380px);
  }
}

@media(max-width:560px){
  .music-page .money-section{
    padding:64px 22px;
  }

  .music-page .money-graphic{
    min-height:340px;
  }

  .music-page .money-graphic-statement{
    bottom:0;
  }
}


/* =========================================================
   MUSIC PAGE V7.1 — QUIETER TYPE SCALE
   Reduce the visual volume of BOTH recent sections:
   Working Together (V6) + The Money (V7).
   Content and structure unchanged.
   ========================================================= */

/* ---------- WORKING TOGETHER ---------- */

.music-page .record-needs-copy h2{
  font-size:clamp(1.28rem,1.65vw,1.62rem);
  line-height:1.32;
}

.music-page .record-needs-copy > p{
  font-size:.94rem;
  line-height:1.60;
}

.music-page .record-needs-copy .record-needs-close{
  font-size:.96rem;
  line-height:1.58;
}

.music-page .record-needs-icons{
  margin-top:clamp(38px,4.5vw,58px);
  padding-top:clamp(26px,3vw,38px);
}

.music-page .record-needs-icon{
  width:46px;
  height:46px;
  margin-bottom:.9rem;
}

.music-page .record-needs-item h3{
  font-size:.72rem;
}

.music-page .record-needs-item p{
  font-size:.88rem;
  line-height:1.52;
}


/* ---------- THE MONEY ---------- */

.music-page .money-copy h2{
  font-size:clamp(1.28rem,1.65vw,1.62rem);
  line-height:1.32;
}

.music-page .money-copy p{
  font-size:.94rem;
  line-height:1.60;
}

.music-page .money-graphic{
  min-height:410px;
}

.music-page .money-clock{
  width:min(88%,365px);
}

.music-page .money-graphic-statement{
  bottom:1.45rem;
  font-size:clamp(1rem,1.25vw,1.18rem);
  line-height:1.4;
}

@media(max-width:900px){
  .music-page .money-graphic{
    min-height:345px;
  }

  .music-page .money-clock{
    width:min(74vw,330px);
  }
}

@media(max-width:560px){
  .music-page .money-graphic{
    min-height:310px;
  }
}


/* =========================================================
   MUSIC PAGE V8.0 — SIMPLE FINAL CTA
   Replaces the two legacy sections following The Money.
   Footer remains the existing site footer.
   ========================================================= */

.music-page .music-final-cta{
  padding:clamp(70px,8vw,110px) 24px;
  background:#efe7d8;
  color:#17130f;
  text-align:center;
}

.music-page .music-final-cta-inner{
  max-width:680px;
  margin:0 auto;
}

.music-page .music-final-cta-kicker{
  margin:0 0 .8rem;
  font-size:.72rem;
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent,#b66f3b);
  font-weight:600;
}

.music-page .music-final-cta h2{
  margin:0;
  font-size:clamp(1.28rem,1.65vw,1.62rem);
  line-height:1.32;
  font-weight:400;
  letter-spacing:0;
}

.music-page .music-final-cta-rule{
  width:42px;
  height:2px;
  margin:1rem auto 1.25rem;
  background:var(--accent,#b66f3b);
}

.music-page .music-final-cta p{
  max-width:560px;
  margin:0 auto 1.45rem;
  font-size:.94rem;
  line-height:1.6;
}

.music-final-cta-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.62rem .92rem;
  border:1px solid rgba(182,111,59,.72);
  color:var(--accent,#b66f3b);
  background:transparent;
  text-decoration:none;
  font-size:.76rem;
  line-height:1;
  letter-spacing:.04em;
  border-radius:2px;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}

.music-final-cta-button:hover,
.music-final-cta-button:focus-visible{
  border-color:var(--accent,#b66f3b);
  background:rgba(182,111,59,.10);
}


/* =========================================================
   GEAR PAGE V1.0 — FIRST CODED PASS
   ========================================================= */

.gear-page .gear-hero{
  padding:clamp(78px,9vw,130px) clamp(24px,7vw,96px);
  background:#efe7d8;
  color:#17130f;
}
.gear-page .gear-hero-inner{max-width:900px;margin:0 auto;}
.gear-page .gear-kicker{
  margin:0 0 .8rem;
  font-size:.72rem;
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent,#b66f3b);
  font-weight:600;
}
.gear-page .gear-hero h1,
.gear-page .gear-copy h2,
.gear-page .gear-ending h2{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:0;
}
.gear-page .gear-hero h1{
  max-width:760px;
  margin:0;
  font-size:clamp(1.7rem,2.4vw,2.35rem);
  line-height:1.24;
}
.gear-page .gear-rule{
  width:42px;
  height:2px;
  margin:1rem 0 1.3rem;
  background:var(--accent,#b66f3b);
}
.gear-page .gear-hero p{
  max-width:760px;
  font-size:.98rem;
  line-height:1.62;
  margin:0 0 .95rem;
}

.gear-page .gear-story{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  align-items:stretch;
  min-height:470px;
}
.gear-page .gear-story:nth-of-type(odd){background:#171411;color:#efe7d8;}
.gear-page .gear-story:nth-of-type(even){background:#f4f0e7;color:#17130f;}
.gear-page .gear-copy{
  padding:clamp(54px,6vw,88px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.gear-page .gear-copy h2{
  margin:0;
  font-size:clamp(1.35rem,1.8vw,1.72rem);
  line-height:1.3;
}
.gear-page .gear-copy p{
  margin:0 0 1rem;
  font-size:.95rem;
  line-height:1.62;
}
.gear-page .gear-story:nth-of-type(odd) .gear-copy p{color:rgba(239,231,216,.9);}
.gear-page .gear-image{
  position:relative;
  overflow:hidden;
  min-height:360px;
}
.gear-page .gear-image img{
  width:100%;
  height:100%;
  max-width:none;
  display:block;
  object-fit:cover;
}

.gear-page .gear-story-listening .gear-image img{object-position:46% 52%;}
.gear-page .gear-story-recording{grid-template-columns:.92fr 1.08fr;}
.gear-page .gear-duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:470px;
}
.gear-page .gear-duo .gear-image{min-height:100%;}
.gear-page .gear-image-valve img{object-position:52% 50%;}
.gear-page .gear-image-mics img{object-position:48% 50%;}

.gear-page .gear-story-playing{
  grid-template-columns:1fr .82fr;
  grid-template-rows:minmax(420px,auto) 270px;
}
.gear-page .gear-image-kawai{grid-column:1;grid-row:1;}
.gear-page .gear-image-kawai img{object-position:50% 52%;}
.gear-page .gear-story-playing .gear-copy{grid-column:2;grid-row:1;}
.gear-page .gear-image-gilets{grid-column:1/-1;grid-row:2;min-height:270px;}
.gear-page .gear-image-gilets img{object-position:center 48%;}

.gear-page .gear-story-noise{grid-template-columns:.88fr 1.12fr;}
.gear-page .gear-image-amp img{object-position:55% 52%;}

.gear-page .gear-ending{
  padding:clamp(82px,9vw,130px) 24px;
  text-align:center;
  background:#efe7d8;
  color:#17130f;
}
.gear-page .gear-ending-inner{max-width:620px;margin:0 auto;}
.gear-page .gear-ending h2{
  margin:0 0 .45rem;
  font-size:clamp(1.45rem,2vw,1.9rem);
  line-height:1.3;
}
.gear-page .gear-ending p{margin:0 0 1.35rem;font-size:.95rem;}
.gear-page .gear-back-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.62rem .92rem;
  border:1px solid rgba(182,111,59,.72);
  color:var(--accent,#b66f3b);
  background:transparent;
  text-decoration:none;
  font-size:.76rem;
  line-height:1;
  letter-spacing:.04em;
  border-radius:2px;
}

@media(max-width:900px){
  .gear-page .gear-story,
  .gear-page .gear-story-recording,
  .gear-page .gear-story-playing,
  .gear-page .gear-story-noise{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }
  .gear-page .gear-copy{grid-column:1!important;grid-row:auto!important;order:1;}
  .gear-page .gear-image,
  .gear-page .gear-duo{grid-column:1!important;grid-row:auto!important;order:2;}
  .gear-page .gear-duo{grid-template-columns:1fr 1fr;min-height:320px;}
  .gear-page .gear-image-gilets{min-height:300px;}
}
@media(max-width:620px){
  .gear-page .gear-duo{grid-template-columns:1fr;}
  .gear-page .gear-image,
  .gear-page .gear-duo .gear-image{min-height:280px;}
}


/* =========================================================
   GEAR V2.0 — COPY-LED EDITORIAL REBUILD
   Images are used exactly as supplied. Cropping is CSS only.
   ========================================================= */

.gear-v2-main{background:#f2ecdf;color:#18130f;}
.gear-v2 .gv2-wrap{width:min(1120px,calc(100% - 64px));margin:0 auto;}
.gear-v2 .gv2-narrow{width:min(760px,calc(100% - 48px));margin:0 auto;}
.gear-v2 figure{margin:0;overflow:hidden;}
.gear-v2 figure img,.gear-v2 .gv2-piano-band img{display:block;width:100%;height:100%;object-fit:cover;}

.gear-v2 .gv2-intro{padding:90px 0 82px;}
.gear-v2 .gv2-intro h1,
.gear-v2 .gv2-copy h2,
.gear-v2 .gv2-ending h2{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  margin:0;
}
.gear-v2 .gv2-intro h1{font-size:clamp(1.7rem,2.5vw,2.35rem);line-height:1.24;}
.gear-v2 .gv2-intro p,.gear-v2 .gv2-copy p{
  font-size:.94rem;line-height:1.68;margin:0 0 .95rem;
}
.gear-v2 .gear-kicker{
  margin:0 0 .8rem;font-size:.70rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent,#b66f3b);font-weight:600;
}
.gear-v2 .gear-rule{width:40px;height:2px;background:var(--accent,#b66f3b);margin:1rem 0 1.35rem;}
.gear-v2 .gv2-section{padding:74px 0;}
.gear-v2 .gv2-copy h2{font-size:clamp(1.28rem,1.7vw,1.62rem);line-height:1.3;}

/* Listening: deliberately small graphic Focal detail. */
.gear-v2 .gv2-listening{background:#171411;color:#eee5d7;}
.gear-v2 .gv2-listening-grid{
  display:grid;grid-template-columns:330px minmax(0,560px);
  gap:clamp(55px,8vw,110px);align-items:center;justify-content:center;
}
.gear-v2 .gv2-focal{width:330px;aspect-ratio:1/1;}
.gear-v2 .gv2-focal img{object-position:23% 50%;}
.gear-v2 .gv2-listening p{color:rgba(238,229,215,.9);}

/* The Kawai is a visual punctuation mark, not a section-sized photo. */
.gear-v2 .gv2-piano-band{
  height:clamp(150px,16vw,225px);
  width:100%;
  overflow:hidden;
  background:#0d0b09;
}
.gear-v2 .gv2-piano-band img{object-position:center 52%;}

/* Recording: text carries the section; UA is a compact vertical detail. */
.gear-v2 .gv2-recording{background:#f2ecdf;}
.gear-v2 .gv2-recording-grid{
  display:grid;grid-template-columns:minmax(0,600px) 285px;
  gap:clamp(65px,9vw,125px);align-items:center;justify-content:center;
}
.gear-v2 .gv2-ua{width:285px;aspect-ratio:4/5;}
.gear-v2 .gv2-ua img{object-position:50% 48%;}

/* Playing: copy first, then one wide narrative photograph. */
.gear-v2 .gv2-playing{background:#201a15;color:#eee5d7;padding-bottom:0;}
.gear-v2 .gv2-playing-copy{max-width:650px;margin:0 auto 56px;}
.gear-v2 .gv2-playing p{color:rgba(238,229,215,.9);}
.gear-v2 .gv2-custom-guitar{
  width:min(920px,100%);height:clamp(300px,38vw,455px);margin:0 auto;
}
.gear-v2 .gv2-custom-guitar img{object-position:center 48%;}

/* Making Noise: larger narrative image, but contained in the page grid. */
.gear-v2 .gv2-noise{background:#f2ecdf;}
.gear-v2 .gv2-noise-grid{
  display:grid;grid-template-columns:minmax(360px,520px) minmax(0,470px);
  gap:clamp(55px,7vw,100px);align-items:center;justify-content:center;
}
.gear-v2 .gv2-amp{width:100%;aspect-ratio:4/5;}
.gear-v2 .gv2-amp img{object-position:center center;}

.gear-v2 .gv2-ending{padding:82px 0 100px;text-align:center;background:#e9dfcf;}
.gear-v2 .gv2-ending h2{font-size:clamp(1.4rem,1.9vw,1.8rem);}
.gear-v2 .gv2-ending p{font-size:.94rem;margin:.45rem 0 1.4rem;}

@media(max-width:800px){
  .gear-v2 .gv2-wrap{width:min(100% - 40px,680px);}
  .gear-v2 .gv2-listening-grid,
  .gear-v2 .gv2-recording-grid,
  .gear-v2 .gv2-noise-grid{grid-template-columns:1fr;gap:42px;}
  .gear-v2 .gv2-focal{width:min(330px,82vw);margin:0 auto;}
  .gear-v2 .gv2-ua{width:min(285px,72vw);margin:0 auto;}
  .gear-v2 .gv2-noise .gv2-copy{order:1;}
  .gear-v2 .gv2-amp{order:2;width:min(500px,100%);margin:0 auto;}
  .gear-v2 .gv2-section{padding:60px 0;}
  .gear-v2 .gv2-playing{padding-bottom:0;}
}

/* =========================================================
   GEAR V2.1 — LISTENING / FOCAL SECTION REWORK
   Layout only. Same overall section height as V2.0.
   Image left -> seamless fade to black -> text right.
   ========================================================= */

.gear-v2 .gv2-listening{
  position:relative;
  padding:0;
  background:#000;
  color:#eee5d7;
  overflow:hidden;
}

.gear-v2 .gv2-listening .gv2-wrap,
.gear-v2 .gv2-listening-grid{
  position:relative;
  display:block;
  width:100%;
  max-width:none;
  margin:0;
}

.gear-v2 .gv2-focal{
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  bottom:0;
  width:58%;
  height:100%;
  aspect-ratio:auto;
  margin:0;
  overflow:hidden;
  background:#000;
}

.gear-v2 .gv2-focal img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:28% 52%;
  transform:none;
}

.gear-v2 .gv2-listening::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 31%,
    rgba(0,0,0,.12) 38%,
    rgba(0,0,0,.34) 44%,
    rgba(0,0,0,.62) 50%,
    rgba(0,0,0,.84) 56%,
    rgba(0,0,0,.96) 61%,
    #000 66%,
    #000 100%
  );
}

.gear-v2 .gv2-listening .gv2-copy{
  position:relative;
  z-index:3;
  width:42%;
  margin-left:auto;
  padding:74px clamp(34px,5vw,72px) 74px clamp(28px,4vw,58px);
  box-sizing:border-box;
}

@media(max-width:800px){
  .gear-v2 .gv2-focal{
    position:relative;
    width:100%;
    height:280px;
  }

  .gear-v2 .gv2-listening::after{
    display:none;
  }

  .gear-v2 .gv2-listening .gv2-copy{
    width:100%;
    margin:0;
    padding:46px 22px 56px;
  }
}


/* =========================================================
   GEAR V2.2 — FOCAL FADE ONLY
   Same start point as V2.1; longer fade extending farther left.
   Everything else remains untouched.
   ========================================================= */

.gear-v2 .gv2-listening::after{
  background:linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 31%,
    rgba(0,0,0,.10) 34%,
    rgba(0,0,0,.22) 38%,
    rgba(0,0,0,.38) 42%,
    rgba(0,0,0,.56) 46%,
    rgba(0,0,0,.72) 50%,
    rgba(0,0,0,.84) 54%,
    rgba(0,0,0,.92) 58%,
    rgba(0,0,0,.97) 62%,
    #000 68%,
    #000 100%
  );
}


/* =========================================================
   GEAR V2.3 — PLAYING TREATMENT / PIANO REMOVAL / AMP SCALE
   Base: V2.2.
   - Piano strip removed from markup.
   - Recording unchanged.
   - Playing receives the same image -> black fade treatment as Listening.
   - Making Noise layout unchanged; amp image reduced to UA/preamp size.
   ========================================================= */

.gear-v2 .gv2-playing{
  position:relative;
  padding:0;
  background:#000;
  color:#eee5d7;
  overflow:hidden;
}

.gear-v2 .gv2-playing .gv2-wrap,
.gear-v2 .gv2-playing-grid{
  position:relative;
  display:block;
  width:100%;
  max-width:none;
  margin:0;
}

.gear-v2 .gv2-custom-guitar{
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  bottom:0;
  width:58%;
  height:100%;
  aspect-ratio:auto;
  margin:0;
  overflow:hidden;
  background:#000;
}

.gear-v2 .gv2-custom-guitar img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 48%;
  transform:none;
}

.gear-v2 .gv2-playing::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 31%,
    rgba(0,0,0,.10) 34%,
    rgba(0,0,0,.22) 38%,
    rgba(0,0,0,.38) 42%,
    rgba(0,0,0,.56) 46%,
    rgba(0,0,0,.72) 50%,
    rgba(0,0,0,.84) 54%,
    rgba(0,0,0,.92) 58%,
    rgba(0,0,0,.97) 62%,
    #000 68%,
    #000 100%
  );
}

.gear-v2 .gv2-playing .gv2-copy,
.gear-v2 .gv2-playing-copy{
  position:relative;
  z-index:3;
  width:42%;
  max-width:none;
  margin-left:auto;
  margin-bottom:0;
  padding:74px clamp(34px,5vw,72px) 74px clamp(28px,4vw,58px);
  box-sizing:border-box;
}

/* Same displayed footprint as the UA/preamp image in Recording. */
.gear-v2 .gv2-amp{
  width:285px;
  aspect-ratio:4/5;
  margin:0 auto;
}

@media(max-width:800px){
  .gear-v2 .gv2-custom-guitar{
    position:relative;
    width:100%;
    height:280px;
  }

  .gear-v2 .gv2-playing::after{
    display:none;
  }

  .gear-v2 .gv2-playing .gv2-copy,
  .gear-v2 .gv2-playing-copy{
    width:100%;
    margin:0;
    padding:46px 22px 56px;
  }

  .gear-v2 .gv2-amp{
    width:min(285px,72vw);
  }
}


/* =========================================================
   GEAR V2.6 — SHARED COMPONENT ARCHITECTURE
   ========================================================= */
.gear-v2 .gv2-shared-dark{position:relative;padding:0;background:#000;color:#eee5d7;overflow:hidden;}
.gear-v2 .gv2-shared-dark .gv2-wrap,.gear-v2 .gv2-shared-dark-grid{position:relative;display:block;width:100%;max-width:none;margin:0;}
.gear-v2 .gv2-shared-dark-image{position:absolute;z-index:1;top:0;left:0;bottom:0;width:58%;height:100%;aspect-ratio:auto;margin:0;overflow:hidden;background:#000;}
.gear-v2 .gv2-shared-dark-image img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:28% 52%;transform:none;}
.gear-v2 .gv2-shared-dark::after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,.10) 34%,rgba(0,0,0,.22) 38%,rgba(0,0,0,.38) 42%,rgba(0,0,0,.56) 46%,rgba(0,0,0,.72) 50%,rgba(0,0,0,.84) 54%,rgba(0,0,0,.92) 58%,rgba(0,0,0,.97) 62%,#000 68%,#000 100%);}
.gear-v2 .gv2-shared-dark .gv2-copy{position:relative;z-index:3;width:42%;max-width:none;margin-left:auto;margin-bottom:0;padding:74px clamp(34px,5vw,72px) 74px clamp(28px,4vw,58px);box-sizing:border-box;}
.gear-v2 .gv2-shared-dark p{color:rgba(238,229,215,.9);}
.gear-v2 .gv2-shared-light{background:#f2ecdf;}
.gear-v2 .gv2-shared-light-grid{display:grid;grid-template-columns:minmax(0,600px) 285px;gap:clamp(65px,9vw,125px);align-items:center;justify-content:center;}
.gear-v2 .gv2-shared-light-image{width:285px;aspect-ratio:4/5;margin:0;}
.gear-v2 .gv2-shared-light-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 48%;}
@media(max-width:800px){.gear-v2 .gv2-shared-dark-image{position:relative;width:100%;height:280px}.gear-v2 .gv2-shared-dark::after{display:none}.gear-v2 .gv2-shared-dark .gv2-copy{width:100%;margin:0;padding:46px 22px 56px}.gear-v2 .gv2-shared-light-grid{grid-template-columns:1fr;gap:42px}.gear-v2 .gv2-shared-light-image{width:min(285px,72vw);margin:0 auto}}


/* =========================================================
   LOCATION PAGE — V1
   Reuses the established Music/Gear design language.
   ========================================================= */
.location-page .location-hero-intro{
  max-width:520px;
  margin:0;
  font-size:clamp(18px,1.6vw,23px);
  line-height:1.5;
  color:rgba(255,255,255,.9);
}
.location-page .location-coverage{
  background:var(--music-light);
  color:var(--music-ink);
  padding:96px 6.5vw 84px;
}
.location-coverage-inner{
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
  gap:70px;
  align-items:center;
}
.location-coverage-copy h2,
.location-contact h2{
  margin:0 0 28px;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:clamp(42px,4.2vw,68px);
  line-height:1.02;
}
.location-coverage-copy>p{
  max-width:620px;
  font-size:18px;
  line-height:1.72;
}
.location-bases{
  margin-top:36px;
  border-top:1px solid var(--music-line);
}
.location-bases>div{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:24px;
  padding:20px 0;
  border-bottom:1px solid var(--music-line);
}
.location-bases strong{
  color:var(--music-gold);
  text-transform:uppercase;
  letter-spacing:.8px;
  font-size:12px;
}
.location-bases span{line-height:1.55}
.location-bases em{color:#6b625a}
.location-map-placeholder{
  min-height:590px;
  background:#1a1a19;
  color:#fff;
  padding:46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:0 18px 50px rgba(0,0,0,.12);
}
.map-placeholder-label{
  color:var(--music-gold);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.4px;
}
.map-placeholder-note{
  margin:8px 0 48px;
  color:rgba(255,255,255,.55);
  font-size:14px;
}
.map-zone{
  border-left:3px solid var(--music-gold);
  padding:18px 0 18px 24px;
}
.map-zone strong{display:block;font-size:13px;letter-spacing:1px;margin-bottom:9px}
.map-zone span{display:block;font-size:18px;line-height:1.5}
.map-zone-south{border-left-color:#7c9bb0}
.map-gap{
  padding:42px 0;
  color:rgba(255,255,255,.38);
  font-size:11px;
  letter-spacing:1.6px;
  text-align:center;
}
.location-local-note{
  width:min(1180px,100%);
  margin:58px auto 0;
  padding-top:28px;
  border-top:2px solid var(--music-gold);
  display:grid;
  grid-template-columns:210px 1fr;
  gap:34px;
}
.location-local-note strong{
  color:var(--music-gold);
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:12px;
}
.location-local-note p{margin:0;max-width:800px;line-height:1.65}
.location-page .gv2-shared-dark-copy h2,
.location-page .gv2-shared-light-copy h2{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}
.location-page .btn{
  display:inline-block;
  margin-top:22px;
  padding:13px 19px;
  border:1px solid var(--music-gold);
  color:inherit;
  text-decoration:none;
  text-transform:uppercase;
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
}
.location-page .btn:hover{background:var(--music-gold);color:#fff}
.location-contact{
  background:var(--music-cream);
  padding:100px 6.5vw;
  text-align:center;
}
.location-contact-inner{width:min(900px,100%);margin:0 auto}
.location-contact .rule{margin-left:auto;margin-right:auto}
.location-contact h2{font-size:clamp(36px,3.5vw,56px)}
.location-contact p{font-size:20px;line-height:1.6}
.location-contact a{color:inherit}
.location-contact-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin-top:22px;
}
.location-page .location-contact-actions .btn{
  margin-top:0;
}
@media(max-width:900px){
  .location-coverage-inner{grid-template-columns:1fr;gap:42px}
  .location-map-placeholder{min-height:460px}
  .location-local-note{grid-template-columns:1fr;gap:10px}
}
@media(max-width:620px){
  .location-page .location-coverage{padding:68px 24px 60px}
  .location-bases>div{grid-template-columns:1fr;gap:7px}
  .location-map-placeholder{padding:30px 25px;min-height:430px}
  .location-contact{padding:72px 24px}
}


/* LOCATION V1.1 — content rhythm below local coverage */
.location-credit-list{
  margin:28px 0 30px;
  border-top:1px solid var(--music-line);
}
.location-credit-list>div{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(150px,.75fr);
  gap:24px;
  padding:15px 0;
  border-bottom:1px solid var(--music-line);
}
.location-credit-list strong{
  font-size:17px;
  font-weight:600;
}
.location-credit-list span{
  color:#6d645c;
  text-align:right;
}
.location-credit-more{
  margin-top:22px;
  color:#5f5750;
  line-height:1.65;
}
.location-page .location-job .btn{
  color:#fff;
}
.location-page .location-job .btn:hover{
  color:#fff;
}
@media(max-width:620px){
  .location-credit-list>div{
    grid-template-columns:1fr;
    gap:4px;
  }
  .location-credit-list span{
    text-align:left;
  }
}


/* =========================================================
   LOCATION V1.2 — align page rhythm with Music / Gear
   Full image / centred light / full image / centred light.
   ========================================================= */

/* Hero uses the supplied image unchanged; crop/grade is CSS only. */
.location-page .location-hero .hero-live-image{
  object-position:center 42%;
}
.location-page .location-hero .hero-live-overlay{
  background:linear-gradient(90deg,rgba(10,10,10,.78) 0%,rgba(10,10,10,.52) 42%,rgba(10,10,10,.14) 78%);
}

/* Selected Work — quiet centred light band, no compulsory image. */
.location-page .location-selected-work{
  background:var(--music-light);
  color:var(--music-ink);
  padding:96px 6.5vw;
}
.location-selected-work-inner{
  width:min(820px,100%);
  margin:0 auto;
  text-align:center;
}
.location-selected-work-inner .rule{
  margin-left:auto;
  margin-right:auto;
}
.location-selected-work-inner h2{
  margin:0 0 30px;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:clamp(40px,4vw,62px);
  line-height:1.04;
}
.location-selected-work .location-credit-list{
  text-align:left;
}
.location-selected-work .location-credit-more{
  max-width:720px;
  margin:26px auto 0;
  text-align:center;
}

/* The Job — supplied Storm Boy image; keep full-image shared architecture. */
.location-page .location-job>img{
  object-position:center center;
}
.location-page .location-job .gv2-shared-dark-overlay{
  background:linear-gradient(90deg,rgba(8,8,8,.78) 0%,rgba(8,8,8,.64) 42%,rgba(8,8,8,.24) 72%,rgba(8,8,8,.14) 100%);
}

/* Bigger & Stranger — contained centred-image rhythm. */
.location-page .location-complex{
  background:var(--music-light);
  color:var(--music-ink);
  padding:96px 6.5vw 104px;
}
.location-complex-inner{
  width:min(980px,100%);
  margin:0 auto;
  text-align:center;
}
.location-complex-media{
  width:min(820px,100%);
  margin:0 auto 52px;
}
.location-complex-media img{
  display:block;
  width:100%;
  height:auto;
}
.location-complex-copy{
  width:min(760px,100%);
  margin:0 auto;
}
.location-complex-copy .rule{
  margin-left:auto;
  margin-right:auto;
}
.location-complex-copy h2{
  margin:0 0 28px;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:clamp(40px,4vw,62px);
  line-height:1.04;
}
.location-complex-copy p{
  font-size:17px;
  line-height:1.72;
}

/* Finish dark after the final light content band. */
.location-page .location-contact{
  background:#181817;
  color:#f5f1e9;
}
.location-page .location-contact .btn{
  color:#f5f1e9;
}

@media(max-width:700px){
  .location-page .location-selected-work,
  .location-page .location-complex{
    padding:68px 24px;
  }
  .location-complex-media{
    margin-bottom:38px;
  }
}


/* =========================================================
   LOCATION V1.3 — HERO ONLY
   Music-hero architecture: solid black under copy, fading into
   the original photograph. Image file remains completely untouched.
   ========================================================= */
.location-page .location-hero{
  background:#000;
}

/* Deliberately place the photographic field on the right rather
   than stretching it beneath the entire hero. Section height is
   inherited unchanged from the existing shared hero component. */
.location-page .location-hero .hero-live-image{
  left:25%;
  right:auto;
  width:75%;
  height:100%;
  object-fit:cover;

  /* Horizontal emphasis moves the useful part of frame rightward.
     Vertical emphasis trims headroom while retaining lower sound gear. */
  object-position:62% 23%;
}

/* Reuse the approved Music hero fade language: true black beneath
   the copy, then a smooth reveal into the photograph. */
.location-page .location-hero .hero-live-overlay{
  background:
    linear-gradient(
      90deg,
      #000 0%,
      #000 22%,
      rgba(0,0,0,.98) 27%,
      rgba(0,0,0,.88) 33%,
      rgba(0,0,0,.64) 39%,
      rgba(0,0,0,.38) 45%,
      rgba(0,0,0,.16) 52%,
      rgba(0,0,0,.04) 59%,
      rgba(0,0,0,0) 66%,
      rgba(0,0,0,0) 100%
    );
}

@media(max-width:760px){
  .location-page .location-hero .hero-live-image{
    left:18%;
    width:82%;
    object-position:60% 20%;
  }
  .location-page .location-hero .hero-live-overlay{
    background:
      linear-gradient(
        90deg,
        #000 0%,
        #000 28%,
        rgba(0,0,0,.96) 35%,
        rgba(0,0,0,.76) 44%,
        rgba(0,0,0,.44) 54%,
        rgba(0,0,0,.18) 64%,
        rgba(0,0,0,.04) 73%,
        rgba(0,0,0,0) 80%,
        rgba(0,0,0,0) 100%
      );
  }
}


/* =========================================================
   LOCATION V1.4 — HERO CROP LOCK
   User crop defines TOP + RIGHT edges.
   Image itself is unchanged. CSS handles composition/fade only.
   ========================================================= */
.location-page .location-hero{
  background:#050505;
  overflow:hidden;
}

/* Anchor the supplied crop to top-right.
   Width is auto so the crop's proportions remain intact.
   Height is allowed to extend naturally below the fixed hero viewport. */
.location-page .location-hero .hero-live-image{
  position:absolute;
  top:0;
  right:0;
  left:auto;
  width:auto;
  min-width:0;
  height:auto;
  min-height:100%;
  max-width:none;
  object-fit:initial;
  object-position:initial;
}

/* The photograph already contains a large near-black field.
   This overlay only softens the join; it is intentionally not
   a long visible gradient. Kept explicit for easy later tweaking. */
.location-page .location-hero .hero-live-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      #050505 0%,
      #050505 31%,
      rgba(5,5,5,.96) 36%,
      rgba(5,5,5,.72) 41%,
      rgba(5,5,5,.34) 46%,
      rgba(5,5,5,.10) 51%,
      rgba(5,5,5,0) 56%,
      rgba(5,5,5,0) 100%
    );
}

/* Keep the copy above both photograph and blending layer. */
.location-page .location-hero .hero-live-copy{
  position:relative;
  z-index:2;
}

@media(max-width:760px){
  .location-page .location-hero .hero-live-image{
    top:0;
    right:0;
    left:auto;
    width:auto;
    height:auto;
    min-height:100%;
    max-width:none;
  }
  .location-page .location-hero .hero-live-overlay{
    background:
      linear-gradient(
        90deg,
        #050505 0%,
        #050505 34%,
        rgba(5,5,5,.94) 40%,
        rgba(5,5,5,.62) 47%,
        rgba(5,5,5,.26) 54%,
        rgba(5,5,5,.07) 61%,
        rgba(5,5,5,0) 67%,
        rgba(5,5,5,0) 100%
      );
  }
}


/* =========================================================
   LOCATION V1.5 — HERO 60 / 40
   60% black/text field, 40% visible image field at right.
   Supplied crop remains unchanged and top/right locked.
   ========================================================= */
.location-page .location-hero{
  background:#050505;
}

/* Restrict the visible photographic field to the right 40%.
   The crop remains anchored at its supplied top/right reference. */
.location-page .location-hero .hero-live-image{
  top:0;
  right:0;
  left:auto;
  width:40%;
  height:100%;
  min-height:0;
  max-width:none;
  object-fit:cover;
  object-position:right top;
}

/* Black owns the left 60%; a short overlap softens the join. */
.location-page .location-hero .hero-live-overlay{
  background:
    linear-gradient(
      90deg,
      #050505 0%,
      #050505 56%,
      rgba(5,5,5,.98) 59%,
      rgba(5,5,5,.82) 62%,
      rgba(5,5,5,.48) 65%,
      rgba(5,5,5,.18) 68%,
      rgba(5,5,5,.03) 71%,
      rgba(5,5,5,0) 74%,
      rgba(5,5,5,0) 100%
    );
}

@media(max-width:760px){
  .location-page .location-hero .hero-live-image{
    top:0;
    right:0;
    left:auto;
    width:40%;
    height:100%;
    min-height:0;
    max-width:none;
    object-fit:cover;
    object-position:right top;
  }
  .location-page .location-hero .hero-live-overlay{
    background:
      linear-gradient(
        90deg,
        #050505 0%,
        #050505 54%,
        rgba(5,5,5,.96) 58%,
        rgba(5,5,5,.72) 63%,
        rgba(5,5,5,.34) 68%,
        rgba(5,5,5,.10) 73%,
        rgba(5,5,5,0) 78%,
        rgba(5,5,5,0) 100%
      );
  }
}


/* =========================================================
   LOCATION V1.6 — HERO SCALE RESTORED
   Keep V1.5's 60/40 composition, but restore the photograph
   to V1.4's natural/min-height scale instead of fitting it
   inside the 40% image field. Top/right remain locked.
   ========================================================= */
.location-page .location-hero .hero-live-image{
  top:0;
  right:0;
  left:auto;
  width:auto;
  height:auto;
  min-height:100%;
  max-width:none;
  object-fit:initial;
  object-position:initial;
}

/* Mask the photograph so only the right-hand 40% of the hero is
   exposed; the image itself is not scaled down to that width. */
.location-page .location-hero{
  --location-image-window:40%;
}
.location-page .location-hero::after{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  bottom:0;
  left:0;
  width:60%;
  background:#050505;
  pointer-events:none;
}

/* Keep V1.5 fade above the black mask / image join. */
.location-page .location-hero .hero-live-overlay{
  z-index:1;
}
.location-page .location-hero .hero-live-copy{
  z-index:2;
}

@media(max-width:760px){
  .location-page .location-hero .hero-live-image{
    top:0;
    right:0;
    left:auto;
    width:auto;
    height:auto;
    min-height:100%;
    max-width:none;
    object-fit:initial;
    object-position:initial;
  }
}


/* LOCATION V1.7 — HERO COPY BALANCE */
.location-page .location-hero .location-hero-intro{
  max-width:610px;
  margin-top:22px;
  font-size:17px;
  line-height:1.62;
  color:rgba(255,255,255,.88);
}
.location-page .location-hero .location-hero-intro p{
  margin:0 0 15px;
}
.location-page .location-hero .location-hero-intro p:first-child{
  font-size:20px;
  line-height:1.5;
  color:#fff;
}
.location-page .location-hero .location-hero-intro p:last-child{
  margin-bottom:0;
}


/* LOCATION V1.9 — HERO COPY WIDTH, VERIFIED TARGET
   The shared Music hero parent was limiting the paragraph width.
   Widen the parent copy column itself; all other hero treatment stays put. */
.location-page .location-hero .hero-live-copy{
  width:min(820px,55vw);
}
.location-page .location-hero .location-hero-intro{
  width:100%;
  max-width:none;
}


/* =========================================================
   LOCATION V2.1 — LOCAL COVERAGE WITH MAP
   ========================================================= */
.location-page .location-coverage-v21{
  grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr);
  gap:72px;
  align-items:start;
}
.location-coverage-map{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.location-coverage-map img{
  display:block;
  width:min(100%,690px);
  height:auto;
}
.location-coverage-points{
  margin-top:34px;
  border-top:1px solid var(--music-line);
}
.location-coverage-points>div{
  padding:21px 0 22px;
  border-bottom:1px solid var(--music-line);
}
.location-coverage-points strong{
  display:block;
  margin-bottom:7px;
  color:var(--music-gold);
  text-transform:uppercase;
  letter-spacing:.9px;
  font-size:12px;
}
.location-coverage-points p{
  margin:0;
  font-size:15px;
  line-height:1.62;
  color:#5f5750;
}
@media(max-width:900px){
  .location-page .location-coverage-v21{
    grid-template-columns:1fr;
    gap:44px;
  }
  .location-coverage-map img{
    width:min(100%,620px);
  }
}


/* =========================================================
   LOCATION V2.4 — EXPERIENCE
   Reuses the Music page "Musician at Heart" architecture:
   left copy / right image / section-wide fade.
   Palette taken from "Working Together".
   ========================================================= */
.location-page .location-history-v24{
  position:relative;
  display:block;
  min-height:390px;
  overflow:hidden;
  background:#efe7d8;
  color:#17130f;
}

.location-page .location-history-v24 .location-history-media{
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  bottom:0;
  left:27%;
  width:auto;
  margin:0;
  overflow:hidden;
  background:#efe7d8;
}

.location-page .location-history-v24 .location-history-media img{
  position:absolute;
  inset:0;
  display:block;
  width:102%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:right center;
  right:-2%;
  left:auto;
}

/* Same fade geometry as Musician at Heart, translated to Working Together beige. */
.location-page .location-history-v24::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    #efe7d8 0%,
    #efe7d8 35%,
    rgba(239,231,216,.97) 39%,
    rgba(239,231,216,.82) 44%,
    rgba(239,231,216,.58) 49%,
    rgba(239,231,216,.32) 54%,
    rgba(239,231,216,.13) 59%,
    rgba(239,231,216,.03) 64%,
    rgba(239,231,216,0) 68%,
    rgba(239,231,216,0) 100%
  );
}

.location-page .location-history-v24 .location-history-copy{
  position:relative;
  z-index:3;
  width:38%;
  min-height:390px;
  padding:56px 6vw;
  background:transparent;
}

.location-page .location-history-v24 .location-history-copy h2{
  margin:0 0 16px;
  max-width:680px;
  font-size:34px;
  line-height:1.15;
  font-weight:400;
}

.location-page .location-history-v24 .location-history-copy > p:not(.eyebrow){
  color:#17130f;
  line-height:1.62;
}

.location-page .location-history-v24 .eyebrow{
  color:var(--accent,#b66f3b);
}

.location-page .location-history-v24 .rule{
  background:var(--accent,#b66f3b);
}

@media(max-width:760px){
  .location-page .location-history-v24{
    display:grid;
    grid-template-columns:1fr;
  }

  .location-page .location-history-v24 .location-history-copy{
    width:100%;
    min-height:0;
    padding:56px 22px;
    background:#efe7d8;
  }

  .location-page .location-history-v24 .location-history-media{
    position:relative;
    inset:auto;
    width:100%;
    aspect-ratio:4/3;
  }

  .location-page .location-history-v24::after{
    display:none;
  }
}


/* LOCATION V5.0 — THE JOB / Musician at Heart architecture */
.location-page .location-job-v50{
  position:relative; display:block; min-height:390px; overflow:hidden;
  background:#11100f; color:#f2eee7;
}
.location-page .location-job-v50 .location-job-media{
  position:absolute; z-index:1; top:0; right:0; bottom:0; left:27%;
  width:auto; margin:0; overflow:hidden; background:#11100f;
}
.location-page .location-job-v50 .location-job-media img{
  position:absolute; inset:0; display:block; width:102%; height:100%;
  max-width:none; object-fit:cover; object-position:right center;
  right:-2%; left:auto;
}
.location-page .location-job-v50::after{
  content:""; position:absolute; z-index:2; inset:0; pointer-events:none;
  background:linear-gradient(90deg,
    #11100f 0%, #11100f 35%,
    rgba(17,16,15,.97) 39%, rgba(17,16,15,.84) 44%,
    rgba(17,16,15,.61) 49%, rgba(17,16,15,.35) 54%,
    rgba(17,16,15,.15) 59%, rgba(17,16,15,.04) 64%,
    rgba(17,16,15,0) 68%, rgba(17,16,15,0) 100%);
}
.location-page .location-job-v50 .location-job-copy{
  position:relative; z-index:3; width:38%; min-height:390px;
  padding:56px 6vw; background:transparent;
}
.location-page .location-job-v50 .location-job-copy h2{
  margin:0 0 16px; max-width:680px; font-size:34px;
  line-height:1.15; font-weight:400; color:#f2eee7;
}
.location-page .location-job-v50 .location-job-copy > p:not(.eyebrow){
  color:#ddd6cb; line-height:1.62;
}
.location-page .location-job-v50 .eyebrow{ color:var(--accent,#b66f3b); }
.location-page .location-job-v50 .rule{ background:var(--accent,#b66f3b); }

@media(max-width:760px){
  .location-page .location-job-v50{ display:grid; grid-template-columns:1fr; }
  .location-page .location-job-v50 .location-job-copy{
    width:100%; min-height:0; padding:56px 22px; background:#11100f;
  }
  .location-page .location-job-v50 .location-job-media{
    position:relative; inset:auto; width:100%; aspect-ratio:4/3;
  }
  .location-page .location-job-v50::after{ display:none; }
}


/* LOCATION V5.1 — THE JOB rate-card link */
.location-page .location-job-v50 .location-job-rate-link{
  margin-top:22px;
}
.location-page .location-job-v50 .location-job-rate-link a{
  color:var(--accent,#b66f3b);
  text-decoration:none;
  font-size:14px;
  letter-spacing:.2px;
}
.location-page .location-job-v50 .location-job-rate-link a:hover,
.location-page .location-job-v50 .location-job-rate-link a:focus{
  text-decoration:underline;
}


/* LOCATION V5.2 — rate-card CTA
   Same box language as Music "Curious about the gear?", adapted to dark field. */
.location-page .location-job-v50 .location-job-rate-link{
  margin-top:22px;
}
.location-page .location-job-v50 .location-job-rate-link .gear-curious-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:.8rem;
  padding:.58rem .82rem;
  border:1px solid rgba(182,111,59,.72);
  color:var(--accent,#b66f3b);
  background:rgba(17,16,15,.18);
  text-decoration:none;
  font-size:.78rem;
  line-height:1;
  letter-spacing:.04em;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.location-page .location-job-v50 .location-job-rate-link .gear-curious-link:hover,
.location-page .location-job-v50 .location-job-rate-link .gear-curious-link:focus-visible{
  border-color:var(--accent,#b66f3b);
  background:var(--accent,#b66f3b);
  color:#fff;
  text-decoration:none;
}


/* LOCATION V5.3 — verified THE JOB CTA */
.location-page .location-job-v50 .location-job-rate-link{
  display:block;
  margin:24px 0 0;
  padding:0;
}
.location-page .location-job-v50 .location-job-rate-link .gear-curious-link{
  display:inline-flex;
  width:auto;
  min-width:0;
  max-width:none;
  box-sizing:border-box;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:.58rem .82rem;
  border:1px solid rgba(182,111,59,.72);
  border-radius:0;
  color:var(--accent,#b66f3b);
  background:transparent;
  text-decoration:none;
  font-size:.78rem;
  line-height:1;
  letter-spacing:.04em;
  white-space:nowrap;
}
.location-page .location-job-v50 .location-job-rate-link .gear-curious-link:hover,
.location-page .location-job-v50 .location-job-rate-link .gear-curious-link:focus-visible{
  border-color:var(--accent,#b66f3b);
  background:var(--accent,#b66f3b);
  color:#fff;
  text-decoration:none;
}


/* =========================================================
   LOCATION V5.6 — VERIFIED SEAMLESS HERO FADE
   Removes the old hard 60% mask. The natural dark area in the
   photograph now sits beneath a short, controlled fade.
   ========================================================= */

/* Match the text-side field to the central dark tone of the supplied crop. */
.location-page .location-hero{
  background:#12110f;
}

/* Disable the old V1.6 hard black mask that caused the visible vertical join. */
.location-page .location-hero::after{
  display:none !important;
}

/* Keep the V5.4 image geometry: supplied crop, top/right locked, natural scale. */
.location-page .location-hero .hero-live-image{
  top:0;
  right:0;
  left:auto;
  width:auto;
  height:auto;
  min-height:100%;
  max-width:none;
  object-fit:initial;
  object-position:initial;
}

/* Opaque black field under the copy, then a genuine overlap fade into
   the photograph. The fade is fully transparent before the subject. */
.location-page .location-hero .hero-live-overlay{
  z-index:1;
  background:linear-gradient(
    90deg,
    #12110f 0%,
    #12110f 42%,
    rgba(18,17,15,.98) 46%,
    rgba(18,17,15,.88) 50%,
    rgba(18,17,15,.64) 54%,
    rgba(18,17,15,.36) 57%,
    rgba(18,17,15,.16) 59%,
    rgba(18,17,15,0) 61%,
    rgba(18,17,15,0) 100%
  );
}


/* =========================================================
   LOCATION V6.0 — EVERY JOB SHAPES THE APPROACH
   Reuses Music page "The Studio" collage architecture.
   Existing studio instrument collage is temporary placeholder imagery.
   ========================================================= */
.location-page .location-variable-jobs-v60{
  display:grid;
  grid-template-columns:54% 46%;
  align-items:stretch;
  background:#efe7d8;
  overflow:hidden;
}

.location-page .location-variable-jobs-v60 .studio-gallery{
  grid-column:1;
  min-height:500px;
}

.location-page .location-variable-jobs-v60 .location-variable-copy{
  grid-column:2;
  align-self:center;
  padding:58px 7vw 58px clamp(38px,4vw,68px);
  color:#17130f;
}

.location-page .location-variable-jobs-v60 .location-variable-copy h2{
  margin:0 0 20px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:34px;
  line-height:1.15;
  font-weight:400;
}

.location-page .location-variable-jobs-v60 .location-variable-copy > p:not(.eyebrow){
  margin:0 0 15px;
  font-size:14px;
  line-height:1.65;
  color:#4f4943;
}

.location-page .location-variable-jobs-v60 .eyebrow{
  color:var(--accent,#b66f3b);
}

.location-page .location-variable-jobs-v60 .rule{
  background:var(--accent,#b66f3b);
}

@media(max-width:760px){
  .location-page .location-variable-jobs-v60{
    grid-template-columns:1fr;
  }
  .location-page .location-variable-jobs-v60 .studio-gallery,
  .location-page .location-variable-jobs-v60 .location-variable-copy{
    grid-column:1;
  }
  .location-page .location-variable-jobs-v60 .studio-gallery{
    min-height:420px;
  }
  .location-page .location-variable-jobs-v60 .location-variable-copy{
    padding:52px 22px;
  }
}


/* =========================================================
   LOCATION V6.1 — CONTAINED COLLAGE
   Match the visual scale of Music page "The Studio":
   collage sits inside the left field with breathing room,
   rather than filling the entire column.
   ========================================================= */
.location-page .location-variable-jobs-v60{
  padding:54px 8vw;
  gap:clamp(42px,5vw,78px);
  align-items:center;
}

.location-page .location-variable-jobs-v60 .studio-gallery{
  grid-column:1;
  width:100%;
  max-width:650px;
  min-height:0;
  aspect-ratio:1.18 / 1;
  justify-self:center;
  align-self:center;
}

.location-page .location-variable-jobs-v60 .location-variable-copy{
  grid-column:2;
  padding:0;
  align-self:center;
}

@media(max-width:760px){
  .location-page .location-variable-jobs-v60{
    padding:48px 22px;
    gap:38px;
  }
  .location-page .location-variable-jobs-v60 .studio-gallery{
    grid-column:1;
    width:100%;
    max-width:620px;
    min-height:0;
    aspect-ratio:1.18 / 1;
  }
  .location-page .location-variable-jobs-v60 .location-variable-copy{
    grid-column:1;
    padding:0;
  }
}


/* =========================================================
   LOCATION V6.2 — FIVE-IMAGE LOCATION COLLAGE
   Original photographs only. Irregular editorial composition.
   Keeps V6.1's contained scale and breathing room.
   ========================================================= */
.location-page .location-variable-jobs-v60 .location-photo-collage{
  grid-column:1;
  position:relative;
  width:100%;
  max-width:650px;
  height:540px;
  justify-self:center;
  align-self:center;
}

.location-page .location-photo-collage .location-collage-item{
  position:absolute;
  margin:0;
  overflow:hidden;
  background:#181614;
  box-shadow:0 8px 22px rgba(0,0,0,.10);
}

.location-page .location-photo-collage .location-collage-item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Large remote-landscape anchor, upper left. */
.location-page .location-collage-nt{
  left:0;
  top:4%;
  width:58%;
  height:38%;
  z-index:1;
}
.location-page .location-collage-nt img{
  object-position:center 48%;
}

/* Junket opposite the remote image. */
.location-page .location-collage-junket{
  right:0;
  top:0;
  width:39%;
  height:31%;
  z-index:3;
}
.location-page .location-collage-junket img{
  object-position:center center;
}

/* Torres Strait gives the middle of the collage its people/place image. */
.location-page .location-collage-torres{
  left:17%;
  top:38%;
  width:49%;
  height:31%;
  z-index:4;
}
.location-page .location-collage-torres img{
  object-position:center 46%;
}

/* Tall vertical working portrait breaks the landscape geometry. */
.location-page .location-collage-onset{
  right:3%;
  top:30%;
  width:27%;
  height:51%;
  z-index:5;
}
.location-page .location-collage-onset img{
  object-position:center 42%;
}

/* Smaller crew image tucked underneath as the fifth beat. */
.location-page .location-collage-ga{
  left:0;
  bottom:0;
  width:43%;
  height:28%;
  z-index:2;
}
.location-page .location-collage-ga img{
  object-position:center 52%;
}

@media(max-width:1050px){
  .location-page .location-variable-jobs-v60 .location-photo-collage{
    height:500px;
  }
}

@media(max-width:760px){
  .location-page .location-variable-jobs-v60 .location-photo-collage{
    grid-column:1;
    width:100%;
    max-width:620px;
    height:520px;
  }
}

@media(max-width:520px){
  .location-page .location-variable-jobs-v60 .location-photo-collage{
    height:440px;
  }
}


/* =========================================================
   LOCATION V6.3 — TIGHT STUDIO-STYLE FIVE-IMAGE COLLAGE
   Original photos only; CSS crop/positioning only.
   ========================================================= */
.location-page .location-variable-jobs-v60 .location-photo-collage{
  grid-column:1;
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:250px 165px 220px;
  gap:6px;
  width:100%;
  max-width:650px;
  height:auto;
  justify-self:center;
  align-self:center;
}

.location-page .location-photo-collage .location-collage-item{
  position:relative;
  inset:auto;
  width:auto;
  height:auto;
  margin:0;
  overflow:hidden;
  background:#181614;
  box-shadow:none;
}

.location-page .location-photo-collage .location-collage-item img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  transform:none;
}

/* Top row: remote NT + junket */
.location-page .location-collage-nt{
  grid-column:1 / span 7;
  grid-row:1;
  z-index:auto;
}
.location-page .location-collage-nt img{
  object-position:center 48%;
}

.location-page .location-collage-junket{
  grid-column:8 / span 5;
  grid-row:1;
  z-index:auto;
}
.location-page .location-collage-junket img{
  object-position:center center;
}

/* Middle row: Torres Strait wide, portrait starts on right */
.location-page .location-collage-torres{
  grid-column:1 / span 8;
  grid-row:2;
  z-index:auto;
}
.location-page .location-collage-torres img{
  object-position:center 47%;
}

.location-page .location-collage-onset{
  grid-column:9 / span 4;
  grid-row:2 / span 2;
  z-index:auto;
}
.location-page .location-collage-onset img{
  object-position:center 42%;
}

/* Bottom-left: Central NT working scene */
.location-page .location-collage-ga{
  grid-column:1 / span 8;
  grid-row:3;
  z-index:auto;
}
.location-page .location-collage-ga img{
  object-position:center 53%;
}

@media(max-width:1050px){
  .location-page .location-variable-jobs-v60 .location-photo-collage{
    grid-template-rows:225px 150px 200px;
  }
}

@media(max-width:760px){
  .location-page .location-variable-jobs-v60 .location-photo-collage{
    grid-template-columns:1fr 1fr;
    grid-template-rows:220px 200px 230px 260px;
    gap:5px;
    width:100%;
    max-width:620px;
    height:auto;
  }

  .location-page .location-collage-nt{
    grid-column:1;
    grid-row:1;
  }
  .location-page .location-collage-junket{
    grid-column:2;
    grid-row:1;
  }
  .location-page .location-collage-torres{
    grid-column:1 / -1;
    grid-row:2;
  }
  .location-page .location-collage-ga{
    grid-column:1 / -1;
    grid-row:3;
  }
  .location-page .location-collage-onset{
    grid-column:1 / -1;
    grid-row:4;
  }
}

@media(max-width:520px){
  .location-page .location-variable-jobs-v60 .location-photo-collage{
    grid-template-rows:190px 180px 210px 240px;
  }
}


/* LOCATION V7.1 — quieter final CTA headline */
.location-page .location-final-cta-heading{
  font-size:clamp(1.55rem,2.2vw,2.15rem);
  line-height:1.15;
  letter-spacing:.01em;
}

@media(max-width:760px){
  .location-page .location-final-cta-heading{
    font-size:1.55rem;
  }
}

/* ===== Tweak_V1.0 — fresh homepage dark hero =====
   Uses the established Music/Location hero language:
   black left field, single section-wide fade into the photograph.
   Uploaded beach and logo assets are unchanged. */
body.home .hero,
.home-page .hero,
.hero:first-of-type {
  background:#0b0b0b;
  color:#f4efe6;
}
.hero:first-of-type .hero-image {
  background-image:url("assets/hero-home-beach.webp");
  background-size:cover;
  background-position:50% 64%;
  position:relative;
}
.hero:first-of-type .hero-image::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#0b0b0b 0%,rgba(11,11,11,.96) 10%,rgba(11,11,11,.72) 24%,rgba(11,11,11,.30) 39%,rgba(11,11,11,0) 55%);
  pointer-events:none;
}
.hero:first-of-type .hero-copy,
.hero:first-of-type .hero-content {
  background:#0b0b0b;
  color:#f4efe6;
}
.hero:first-of-type .hero-copy img,
.hero:first-of-type .hero-content img {
  content:url("assets/logo-home-dark.png");
  max-width:100%;
  height:auto;
}
@media(max-width:760px){
  .hero:first-of-type .hero-image{background-position:50% 58%;}
}

/* ===== Tweak_V1.1 — homepage services in Music-page light editorial language ===== */
.home-service-editorial{
  grid-template-columns:repeat(3,1fr);
  gap:34px;
  padding:56px 6vw 62px;
  background:var(--music-cream,#f2ecdf);
}
.home-service-editorial .service-card{
  border:0;
  background:transparent;
}
.home-service-editorial .service-image{
  height:auto;
  aspect-ratio:4/3;
  background-size:cover;
  background-position:center;
}
.home-service-editorial .service-content{
  padding:16px 0 0;
}
.home-service-editorial .service-content h2{
  margin:0 0 7px;
  text-align:left;
  font-family:Arial,sans-serif;
  font-size:12px;
  line-height:1.25;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--ink);
}
.home-service-editorial .service-content p{
  margin:0 0 12px;
  font-size:14px;
}
.home-service-editorial .service-content ul{
  min-height:0;
  margin:0 0 16px;
  padding-left:18px;
  font-size:14px;
}
.home-service-editorial .service-content li{
  margin:2px 0;
}
.home-service-editorial .text-button{
  padding:0;
  border:0;
  color:var(--red);
  font-size:11px;
  letter-spacing:.5px;
}
@media(max-width:760px){
  .home-service-editorial{
    grid-template-columns:1fr;
    gap:38px;
    padding:42px 8vw 48px;
  }
  .home-service-editorial .service-card{
    border:0;
  }
  .home-service-editorial .service-content{
    text-align:left;
  }
  .home-service-editorial .service-content ul{
    display:block;
    text-align:left;
  }
}

/* ===== Tweak_V1.2 — service-section refinements ===== */
.home-service-editorial .service-image{
  aspect-ratio:16/9;
}

/* Restore the original homepage boxed link treatment. */
.home-service-editorial .text-button{
  display:inline-block;
  padding:10px 14px;
  border:1px solid var(--red);
  color:var(--red);
  font-size:11px;
  line-height:1;
  letter-spacing:.5px;
  text-transform:uppercase;
}

/* ===== Tweak_V1.3 — About dark palette, original spacing/fade geometry ===== */
.home-about-dark{background:#0b0b0b;color:#f4efe6;border-top-color:#292929}
.home-about-dark .about-copy h2,
.home-about-dark .about-copy p,
.home-about-dark .about-copy strong{color:#f4efe6}
.home-about-dark .about-copy .eyebrow{color:#c99a55}
.home-about-dark .about-image{
  background-image:
    linear-gradient(to right,#0b0b0b 0%,rgba(11,11,11,.85) 6%,rgba(11,11,11,.45) 16%,rgba(11,11,11,0) 32%),
    url("assets/hero-studio.webp");
}
@media(max-width:760px){
  .home-about-dark .about-image{
    background-image:
      linear-gradient(to bottom,#0b0b0b 0%,rgba(11,11,11,0) 22%),
      url("assets/hero-studio.webp");
  }
}

/* ===== Tweak_V1.4 — About image overlap treatment =====
   Same content, same section spacing, same image.
   The photograph now begins beneath the copy, using the Music hero's
   "text over darkened image" compositional idea. */

.home-about-dark{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* Let the existing image act as the visible right-side anchor. */
.home-about-dark .about-image{
  position:relative;
  z-index:1;
  background-image:url("assets/hero-studio.webp");
  background-size:cover;
  background-position:center;
}

/* Extend the same photograph underneath the whole composition, beginning further left. */
.home-about-dark::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(
      90deg,
      #0b0b0b 0%,
      rgba(11,11,11,.98) 16%,
      rgba(11,11,11,.92) 29%,
      rgba(11,11,11,.72) 43%,
      rgba(11,11,11,.36) 58%,
      rgba(11,11,11,0) 74%
    ),
    url("assets/hero-studio.webp") center/cover no-repeat;
}

/* Keep copy above the extended image. */
.home-about-dark .about-copy{
  position:relative;
  z-index:2;
}

/* Remove the old hard left-edge fade on the dedicated image column so the
   new section-wide fade controls the visual transition. */
.home-about-dark .about-image::after{
  content:none;
}

@media(max-width:760px){
  .home-about-dark::before{
    background:
      linear-gradient(
        to bottom,
        #0b0b0b 0%,
        rgba(11,11,11,.96) 26%,
        rgba(11,11,11,.65) 48%,
        rgba(11,11,11,0) 68%
      ),
      url("assets/hero-studio.webp") center/cover no-repeat;
  }
}

/* ===== Tweak_V1.5 — single-image About overlap treatment ===== */

/* Remove V1.4's second, section-wide copy of the guitar photograph. */
.home-about-dark::before{
  content:none !important;
}

/* Keep copy above the image/fade. */
.home-about-dark .about-copy{
  position:relative;
  z-index:3;
}

/*
  One photograph only.
  Original image column begins further left (~20% into the section),
  avoiding the excessive zoom of a full-width background.
*/
.home-about-dark .about-image{
  position:absolute;
  z-index:1;
  top:0;
  bottom:0;
  left:20%;
  right:0;
  width:auto;
  height:auto;
  background-image:url("assets/hero-studio.webp");
  background-size:cover;
  background-position:center;
}

/* Fade belongs to that one image: solid black at its left edge,
   progressively revealing the photograph beneath the latter part of the copy. */
.home-about-dark .about-image::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    #0b0b0b 0%,
    rgba(11,11,11,.96) 14%,
    rgba(11,11,11,.78) 30%,
    rgba(11,11,11,.42) 46%,
    rgba(11,11,11,.12) 60%,
    rgba(11,11,11,0) 70%
  );
}

@media(max-width:760px){
  .home-about-dark .about-image{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:100%;
  }
  .home-about-dark .about-image::after{
    background:linear-gradient(
      to bottom,
      #0b0b0b 0%,
      rgba(11,11,11,.72) 14%,
      rgba(11,11,11,0) 30%
    );
  }
}

/* ===== Tweak_V1.6 — About fade correction =====
   V1.5 positioning retained exactly.
   Fade is now composited directly into the single image background. */
.home-about-dark .about-image{
  left:20%;
  right:0;
  background-image:
    linear-gradient(
      90deg,
      #0b0b0b 0%,
      rgba(11,11,11,.98) 12%,
      rgba(11,11,11,.90) 24%,
      rgba(11,11,11,.68) 38%,
      rgba(11,11,11,.38) 50%,
      rgba(11,11,11,.14) 60%,
      rgba(11,11,11,0) 70%
    ),
    url("assets/hero-studio.webp");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
}

/* Disable the separate overlay; the fade is now guaranteed to render
   as part of the image background itself. */
.home-about-dark .about-image::after{
  content:none !important;
}

@media(max-width:760px){
  .home-about-dark .about-image{
    left:auto;
    right:auto;
    background-image:
      linear-gradient(
        to bottom,
        #0b0b0b 0%,
        rgba(11,11,11,.72) 14%,
        rgba(11,11,11,0) 30%
      ),
      url("assets/hero-studio.webp");
  }
}

/* ===== Tweak_V1.7 — white About signature ===== */
.home-about-dark .about-signature,
.home-about-dark img[src*="signature"],
.home-about-dark img[src*="Signature"],
.home-about-dark img[src*="sign"]{
  filter:brightness(0) invert(1);
  opacity:.94;
}

/* ===== Tweak_V1.8 — homepage beach hero overlap treatment =====
   Mirrors the approved About treatment:
   ~20% solid black -> image begins -> dark fade -> clear image.
   Copy remains above the darkened image. */

.hero:first-of-type{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* Keep the hero copy above the image/fade. */
.hero:first-of-type .hero-copy,
.hero:first-of-type .hero-content{
  position:relative;
  z-index:3;
  background:transparent;
}

/* Rework the existing single beach image so it begins at ~20% rather than
   after the copy column. This avoids excessive zoom while allowing copy
   to sit across the darkened left side of the photograph. */
.hero:first-of-type .hero-image{
  position:absolute;
  z-index:1;
  top:0;
  bottom:0;
  left:20%;
  right:0;
  width:auto;
  min-height:0;
  background-image:
    linear-gradient(
      90deg,
      #0b0b0b 0%,
      rgba(11,11,11,.98) 12%,
      rgba(11,11,11,.90) 24%,
      rgba(11,11,11,.68) 38%,
      rgba(11,11,11,.38) 50%,
      rgba(11,11,11,.14) 60%,
      rgba(11,11,11,0) 70%
    ),
    url("assets/hero-home-beach.webp");
  background-size:cover,cover;
  background-position:center,50% 64%;
  background-repeat:no-repeat,no-repeat;
}

/* Disable the older separate hero overlay so only one fade treatment is active. */
.hero:first-of-type .hero-image::before{
  content:none !important;
}

@media(max-width:760px){
  .hero:first-of-type .hero-image{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:100%;
    min-height:510px;
    background-image:
      linear-gradient(
        to bottom,
        #0b0b0b 0%,
        rgba(11,11,11,.72) 14%,
        rgba(11,11,11,0) 30%
      ),
      url("assets/hero-home-beach.webp");
    background-size:cover,cover;
    background-position:center,50% 58%;
  }
}


/* ===== Tweak_V1.9 — homepage client logo section ===== */
.home-clients{
  background:#0b0b0b;
  color:#f4efe6;
  border-top:1px solid #292929;
  padding:42px 6vw 46px;
  text-align:center;
}

.home-clients > .eyebrow{
  margin:0 0 30px;
  color:#bd8b47;
}

.client-logo-row{
  display:grid;
  align-items:center;
  justify-items:center;
  margin:0 auto;
  width:min(1180px,100%);
}

.client-logo-row--six{
  grid-template-columns:repeat(6,1fr);
  gap:30px;
}

.home-clients .client-logo-row + .client-logo-row{
  margin-top:30px;
}

.client-logo-row--five{
  grid-template-columns:repeat(5,1fr);
  gap:38px;
  width:min(980px,86%);
  margin-top:30px;
}

.client-logo{
  width:100%;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.client-logo img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:58px;
  object-fit:contain;
}

/* Vector marks: render as one restrained warm-white family without altering source files. */
.client-logo--abc img,
.client-logo--sbs img,
.client-logo--nine img,
.client-logo--ten img,
.client-logo--seven img,
.client-logo--paramount img,
.client-logo--sony img,
.client-logo--universal img{
  filter:brightness(0) invert(1);
  opacity:.90;
}

/* Individual visual-weight tuning rather than identical literal dimensions. */
.client-logo--abc img{max-height:48px;max-width:110px}
.client-logo--sbs img{max-height:48px;max-width:112px}
.client-logo--nine img{max-height:45px;max-width:106px}
.client-logo--ten img{max-height:50px;max-width:102px}
.client-logo--seven img{max-height:50px;max-width:90px}
.client-logo--nitv img{max-height:52px;max-width:126px;opacity:.90}

.client-logo--roving img{max-height:58px;max-width:128px}
.client-logo--paramount img{max-height:60px;max-width:128px}
.client-logo--sony img{max-height:52px;max-width:150px}
.client-logo--universal img{max-height:58px;max-width:145px}
.client-logo--rawkus img{max-height:46px;max-width:150px;opacity:.92}
.client-logo--opera-house img{max-height:70px;max-width:100px;opacity:.88}

@media(max-width:900px){
  .client-logo-row--six,
  .client-logo-row--five{
    grid-template-columns:repeat(3,1fr);
    width:100%;
    gap:26px 34px;
  }
  .client-logo-row--five{margin-top:26px}
  .home-clients .client-logo-row + .client-logo-row{margin-top:26px}
}

@media(max-width:560px){
  .home-clients{padding:38px 7vw 42px}
  .client-logo-row--six,
  .client-logo-row--five{
    grid-template-columns:repeat(2,1fr);
    gap:24px 28px;
  }
  .client-logo{height:60px}
  .client-logo img{max-width:130px}
}


/* ===== Tweak_V1.10 — client section cream / black pass ===== */
.home-clients{
  background:var(--music-cream,#f2ecdf);
  color:#111;
  border-top:1px solid var(--line,#d8d1c4);
}

.home-clients > .eyebrow{
  color:var(--red,#9d2118);
}

.client-logo--abc img,
.client-logo--sbs img,
.client-logo--nine img,
.client-logo--seven img,
.client-logo--nitv img,
.client-logo--paramount img,
.client-logo--sony img,
.client-logo--universal img{
  filter:brightness(0);
  opacity:.88;
}

/* TEN retains a cream knockout inside the black mark. */
.client-logo--ten img{
  filter:none;
  opacity:.90;
}

/* Roving and Rawkus are already black/transparent web assets. */
.client-logo--roving img,
.client-logo--rawkus img{
  filter:none;
  opacity:.88;
}


/* ===== Tweak_V1.11 — ABC / NITV visual weight ===== */
.client-logo--abc img{
  max-height:58px;
  max-width:132px;
}

.client-logo--nitv img{
  max-height:62px;
  max-width:150px;
}


/* ===== Tweak_V1.12 — client logo visual-weight refinement ===== */
/* ABC: another step up, roughly the same increment as V1.11. */
.client-logo--abc img{
  max-height:68px;
  max-width:154px;
}

/* SONY: increase by roughly the same proportion as the ABC step. */
.client-logo--sony img{
  max-height:62px;
  max-width:180px;
}

/* NITV: approximately twice the size increment given to the other marks. */
.client-logo--nitv img{
  max-height:82px;
  max-width:198px;
}


/* ===== Tweak_V1.13 — NITV final visual-weight adjustment ===== */
.client-logo--nitv img{
  max-height:96px;
  max-width:232px;
}


/* ===== Tweak_V1.14 — final homepage gallery/contact refinements ===== */

/* Second gallery slot: Gear-page Kawai image, rotated 90° counter-clockwise
   entirely in CSS; supplied image file remains untouched. */
.gallery-kawai{
  position:relative;
  overflow:hidden;
  background-image:none !important;
}
.gallery-kawai::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:195px;
  height:100%;
  min-width:100%;
  background:url("assets/gear-kawai-v2.webp") center center / cover no-repeat;
  transform:translate(-50%,-50%) rotate(-90deg) scale(1.55);
  transform-origin:center;
}

/* Far-right gallery slot: Musician at Heart image.
   Crop is biased down toward the guitar, retaining some amp/context. */
.gallery-musicianship{
  background-image:url("assets/musicianship.webp") !important;
  background-size:cover;
  background-position:50% 82%;
}

@media(max-width:760px){
  .gallery-kawai::before{
    width:180px;
    height:100%;
    transform:translate(-50%,-50%) rotate(-90deg) scale(1.55);
  }
  .gallery-musicianship{
    background-position:50% 84%;
  }
}


/* ===== Tweak_V1.16 — homepage gallery crop refinement ===== */

/* Kawai: rotate 90° clockwise from the V1.14/V1.15 position.
   This returns the supplied source image to its original orientation.
   CSS only; source asset remains untouched. */
.gallery-kawai::before{
  width:100%;
  height:100%;
  min-width:0;
  background:url("assets/gear-kawai-v2.webp") center center / cover no-repeat;
  transform:translate(-50%,-50%) rotate(0deg) scale(1);
}

/* Musician at Heart: widen the visible horizontal field so the Tele sits
   at the left edge and the white PGM Ibanez at the right edge, while
   retaining the existing low/bottom-biased framing. */
.gallery-musicianship{
  background-image:url("assets/musicianship.webp") !important;
  background-size:auto 100%;
  background-repeat:no-repeat;
  background-position:50% 100%;
  background-color:#111;
}

@media(max-width:760px){
  .gallery-kawai::before{
    width:100%;
    height:100%;
    transform:translate(-50%,-50%) rotate(0deg) scale(1);
  }
  .gallery-musicianship{
    background-size:auto 100%;
    background-position:50% 100%;
  }
}


/* ===== Tweak_V1.17 — guitar-room gallery crop correction ===== */

/* Keep the V1.16 piano exactly as approved.
   Guitar-room image now fills the panel completely again, with the crop
   anchored low and centered horizontally. */
.gallery-musicianship{
  background-image:url("assets/musicianship.webp") !important;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:50% 100%;
  background-color:transparent;
}

@media(max-width:760px){
  .gallery-musicianship{
    background-size:cover;
    background-position:50% 100%;
  }
}


/* ===== Tweak_V1.18 — user-cropped guitar gallery image ===== */
/* User supplied this image already cropped to the gallery's 2:1 composition.
   Display it whole: no crop, zoom, or repositioning. */
.gallery-front-guitars{
  background-image:url("assets/front_page_guitars.webp") !important;
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center center;
}
/* =========================================================
   PODCAST & AUDIO POST — POST V1.0
   ========================================================= */
.post-page .post-hero {
  min-height: 620px;
  background: #171513;
}

.post-page .post-hero .hero-live-image {
  width: 69%;
  left: auto;
  right: 0;
  object-fit: cover;
  object-position: 56% center;
  filter: saturate(.82) contrast(1.08) brightness(.92);
  transform: scale(1.08);
  transform-origin: 50% 46%;
}

.post-page .post-hero .hero-live-overlay {
  background: linear-gradient(90deg, #171513 0%, #171513 33%, rgba(23,21,19,.92) 36%, rgba(23,21,19,.56) 44%, rgba(23,21,19,.28) 53%, rgba(23,21,19,.08) 64%, rgba(23,21,19,0) 74%);
}

.post-page .post-hero .hero-live-copy {
  width: min(670px, 54vw);
  padding-left: 7vw;
}

.post-page .post-hero .hero-live-copy h1 {
  font-size: clamp(52px, 6.5vw, 104px);
  line-height: .91;
  letter-spacing: -.045em;
}

.post-page .post-hero-lead,
.post-page .post-hero-close {
  max-width: 590px;
  margin: 0;
  color: #f4f0e7;
  font-family: Georgia, serif;
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1.45;
}

.post-page .post-hero-close {
  margin-top: 10px;
  color: rgba(244,240,231,.72);
  font-family: Arial, sans-serif;
  font-size: 15px;
}

.post-page .post-section {
  border-top: 1px solid rgba(215,206,192,.35);
}

.post-page .post-section-dark {
  background: #2d2925;
  color: #f4f0e7;
}

.post-page .post-section-light {
  background: #f4f0e7;
  color: #28231f;
}

.post-page .post-section-inner {
  width: min(1220px, 88vw);
  margin: 0 auto;
  padding: 86px 0 94px;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(55px, 8vw, 120px);
  align-items: start;
}

.post-page .post-section h2,
.post-page .post-contact h2 {
  margin: 15px 0 0;
  font-family: Georgia, serif;
  font-size: clamp(34px, 4vw, 60px);
  font-weight: normal;
  line-height: 1.05;
}

.post-page .post-section-copy,
.post-page .post-section-copy-panel {
  font-size: 17px;
  line-height: 1.72;
}

.post-page .post-section-copy > p:first-child,
.post-page .post-section-copy-panel > p:nth-of-type(2) {
  margin-top: 0;
}

.post-page .post-emphasis {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(244,240,231,.3);
  font-family: Georgia, serif;
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.5;
}

.post-page .post-section-split {
  min-height: 590px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.post-page .post-section-media {
  min-height: 590px;
  overflow: hidden;
}

.post-page .post-section-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-page .post-section-media-podcast img {
  width: auto;
  max-width: 100%;
  max-height: 620px;
  height: auto;
  object-fit: contain;
  filter: saturate(.72) contrast(1.02);
}

.post-page .post-section-media-podcast {
  padding: clamp(36px, 5vw, 78px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f0e7;
}

.post-page .post-section-copy-panel {
  padding: 75px clamp(45px, 7vw, 110px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.post-page .post-section-copy-panel h2 {
  margin-bottom: 23px;
}

.post-page .post-section-media-picture {
  position: relative;
  background: #211e1b;
}

.post-page .post-section-media-picture img {
  object-position: 54% center;
}

.post-page .post-section-media-picture::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #2d2925 0%, rgba(45,41,37,.93) 6%, rgba(45,41,37,.56) 19%, rgba(45,41,37,.12) 37%, rgba(45,41,37,0) 55%);
}

.post-page .post-placeholder {
  min-height: 590px;
}

.post-page .post-section-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(244,240,231,.06), rgba(244,240,231,.015)),
    #211e1b;
  border-left: 1px solid rgba(244,240,231,.14);
}

.post-page .post-section-placeholder::before,
.post-page .post-section-placeholder::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(60%, 340px);
  height: 1px;
  background: rgba(244,240,231,.13);
  transform-origin: center;
}

.post-page .post-section-placeholder::before { transform: translate(-50%,-50%) rotate(27deg); }
.post-page .post-section-placeholder::after { transform: translate(-50%,-50%) rotate(-27deg); }

.post-page .post-section-placeholder span {
  position: relative;
  z-index: 1;
  padding: 10px 16px;
  background: #211e1b;
  color: rgba(244,240,231,.5);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.post-page .post-contact {
  padding: 78px 7vw 86px;
  background: #e8dfd1;
  text-align: center;
}

.post-page .post-contact-inner {
  width: min(720px, 100%);
  margin: 0 auto;
}

.post-page .post-contact .rule {
  margin-left: auto;
  margin-right: auto;
}

.post-page .post-contact p:not(.eyebrow) {
  font-size: 17px;
  line-height: 1.65;
}

@media(max-width:900px) {
  .post-page .post-section-inner {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .post-page .post-section-split {
    grid-template-columns: 1fr;
  }

  .post-page .post-section-split-reverse .post-section-copy-panel { order: 2; }
  .post-page .post-section-split-reverse .post-section-media { order: 1; }
  .post-page .post-section-media { min-height: 420px; }

  .post-page .post-section-media-picture::after {
    background: linear-gradient(180deg, rgba(45,41,37,0) 50%, rgba(45,41,37,.25) 76%, #2d2925 100%);
  }
}

@media(max-width:760px) {
  .post-page .post-hero { min-height: 610px; }

  .post-page .post-hero .hero-live-image {
    width: 100%;
    object-position: 57% center;
    transform: none;
  }

  .post-page .post-hero .hero-live-overlay {
    background: linear-gradient(180deg, rgba(23,21,19,.08) 0%, rgba(23,21,19,.32) 39%, rgba(23,21,19,.88) 77%, #171513 100%);
  }

  .post-page .post-hero .hero-live-copy {
    width: 100%;
    padding: 260px 7vw 46px;
    justify-content: flex-end;
  }

  .post-page .post-hero .hero-live-copy h1 {
    font-size: clamp(48px, 14vw, 70px);
  }

  .post-page .post-section-inner {
    width: auto;
    padding: 58px 7vw 66px;
  }

  .post-page .post-section-copy-panel {
    padding: 58px 7vw 66px;
  }

  .post-page .post-section-media {
    min-height: 310px;
  }

  .post-page .post-section-media-podcast {
    min-height: auto;
    padding: 34px 7vw 8px;
  }

  .post-page .post-section-media-podcast img {
    width: 100%;
    max-height: none;
  }

  .post-page .post-contact {
    padding: 58px 7vw 64px;
  }
}
/* =========================================================
   RECORD IN LENNOX HEAD — LENNOX V1.7
   ========================================================= */
.lennox-page main > .hero-live:first-child .hero-live-image{
  object-position:center 25%;
}

.lennox-page .post-section-light .post-section-copy{
  color:#28231f;
}

.lennox-page .post-section-light .post-section-copy p{
  color:#28231f;
}

.lennox-page .lennox-introduction .post-section-copy{
  padding-top:66px;
}

.lennox-page .lennox-space-media{
  box-sizing:border-box;
  padding:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#2d2925;
}

.lennox-page .lennox-space-media img{
  width:min(78%,620px);
  height:auto;
  aspect-ratio:4 / 3;
  object-position:center center;
  object-fit:contain;
  filter:saturate(.86) contrast(1.06) brightness(.94);
}

.lennox-page .lennox-space .post-section-copy-panel{
  background:#2d2925;
  color:#f4f0e7;
}

.lennox-page .lennox-introduction .gear-curious-link{
  display:inline;
}

.lennox-page .lennox-outside-hero{
  min-height:650px;
  background:#f4f0e7;
  color:#28231f;
}

.lennox-page .lennox-outside-hero .hero-live-image{
  left:0;
  right:0;
  width:100%;
  height:100%;
  object-position:right center;
  object-fit:contain;
  filter:saturate(.86) contrast(1.05) brightness(.98);
}

.lennox-page .lennox-outside-hero .hero-live-overlay{
  background:linear-gradient(90deg,#f4f0e7 0%,#f4f0e7 27%,rgba(244,240,231,.98) 34%,rgba(244,240,231,.9) 43%,rgba(244,240,231,.64) 53%,rgba(244,240,231,.3) 63%,rgba(244,240,231,.08) 72%,rgba(244,240,231,0) 81%);
}

.lennox-page .lennox-outside-hero .hero-live-copy{
  width:min(650px,50vw);
  min-height:650px;
  margin-left:0;
  padding:78px 0 76px 7vw;
  color:#28231f;
}

.lennox-page .lennox-outside-hero .hero-live-copy h2{
  margin:15px 0 25px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(36px,4vw,60px);
  font-weight:400;
  line-height:1.05;
}

.lennox-page .lennox-outside-hero .hero-live-copy p:not(.eyebrow){
  margin-top:0;
  font-size:17px;
  line-height:1.72;
  text-shadow:none;
}

.lennox-page .lennox-creative-inner{
  width:min(1320px,90vw);
  margin:0 auto;
  padding:94px 0 102px;
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:clamp(55px,7vw,105px);
  align-items:center;
}

.lennox-page .lennox-creative-copy h2{
  margin:15px 0 28px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(36px,4vw,60px);
  font-weight:400;
  line-height:1.05;
}

.lennox-page .lennox-creative-copy p:not(.eyebrow){
  font-size:17px;
  line-height:1.72;
}

.lennox-page .lennox-region-collage{
  min-height:610px;
  display:grid;
  grid-template-columns:1.18fr .82fr;
  grid-template-rows:1fr 1fr;
  gap:12px;
}

.lennox-page .lennox-region-collage figure{
  position:relative;
  margin:0;
  overflow:hidden;
  background:#211e1b;
}

.lennox-page .lennox-region-collage img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.82) contrast(1.08) brightness(.9);
}

.lennox-page .lennox-region-main{grid-row:1 / 3}
.lennox-page .lennox-region-main img{object-position:center center}
.lennox-page .lennox-region-coast img{object-position:center 57%}
.lennox-page .lennox-region-bangalow img{object-position:center center}

.lennox-page .lennox-region-collage figcaption{
  position:absolute;
  left:18px;
  bottom:15px;
  padding:7px 10px;
  background:rgba(23,21,19,.78);
  color:#f4f0e7;
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.lennox-page .lennox-practical-inner{
  width:min(1220px,88vw);
  margin:0 auto;
  padding:86px 0 94px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(60px,8vw,120px);
  align-items:center;
}

.lennox-page .lennox-practical-copy h2{
  margin:15px 0 28px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(36px,4vw,60px);
  font-weight:400;
  line-height:1.05;
}

.lennox-page .lennox-practical-copy p:not(.eyebrow){
  font-size:17px;
  line-height:1.72;
}

.lennox-page .lennox-travel-times{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(244,240,231,.25);
  border-left:1px solid rgba(244,240,231,.25);
}

.lennox-page .lennox-travel-times div{
  min-height:155px;
  padding:25px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-right:1px solid rgba(244,240,231,.25);
  border-bottom:1px solid rgba(244,240,231,.25);
}

.lennox-page .lennox-travel-times strong{
  color:#d1a25e;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(34px,4vw,54px);
  font-weight:400;
  line-height:1;
}

.lennox-page .lennox-travel-times span{
  margin-top:10px;
  color:#f4f0e7;
  font-size:12px;
  font-weight:700;
  letter-spacing:.09em;
  line-height:1.35;
  text-transform:uppercase;
}

.lennox-page .lennox-contact .post-contact-inner{
  width:min(820px,100%);
}

.lennox-page .lennox-contact h2{
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
  font-size:clamp(32px,3.2vw,48px);
  line-height:1.14;
}

.lennox-page .lennox-closing-line{
  margin-top:28px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(20px,2vw,27px) !important;
  color:#76594f;
}

@media(max-width:1250px) and (min-width:761px){
  .site-header .menu-toggle{
    display:block;
    background:none;
    border:1px solid var(--red);
    color:var(--red);
    padding:7px 10px;
  }

  .site-header .main-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    padding:20px;
    flex-direction:column;
    gap:16px;
    background:var(--light);
    text-align:center;
    border-bottom:1px solid var(--line);
  }

  .site-header .main-nav.open{display:flex}
}

@media(max-width:900px){
  .lennox-page .lennox-practical-inner,
  .lennox-page .lennox-creative-inner{
    grid-template-columns:1fr;
  }

  .lennox-page .lennox-region-collage{min-height:560px}
}

@media(max-width:760px){
  .lennox-page .lennox-introduction .post-section-copy{padding-top:0}

  .lennox-page .lennox-space-media{padding:34px 7vw}

  .lennox-page .lennox-space-media img{width:82%}

  .lennox-page .lennox-outside-hero{min-height:720px}

  .lennox-page .lennox-outside-hero .hero-live-image{
    left:0;
    right:0;
    object-position:right center;
    object-fit:contain;
  }

  .lennox-page .lennox-outside-hero .hero-live-overlay{
    background:linear-gradient(90deg,#f4f0e7 0%,#f4f0e7 43%,rgba(244,240,231,.95) 54%,rgba(244,240,231,.72) 66%,rgba(244,240,231,.38) 78%,rgba(244,240,231,.1) 91%,rgba(244,240,231,0) 100%);
  }

  .lennox-page .lennox-outside-hero .hero-live-copy{
    width:76%;
    min-height:720px;
    margin-left:0;
    padding:64px 0 62px 7vw;
    color:#28231f;
  }

  .lennox-page .lennox-creative-inner{
    width:auto;
    padding:64px 7vw 70px;
    gap:44px;
  }

  .lennox-page .lennox-region-collage{
    min-height:650px;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1.2fr .8fr;
  }

  .lennox-page .lennox-region-main{
    grid-column:1 / 3;
    grid-row:1;
  }

  .lennox-page .lennox-practical-inner{
    width:auto;
    padding:58px 7vw 66px;
    gap:45px;
  }

  .lennox-page .lennox-travel-times div{
    min-height:125px;
  }
}

/* =========================================================
   TWEAK V3.0 — MUSIC / WORKING TOGETHER PORTRAIT
   Reuses the Podcast and Spoken Word portrait-panel classes.
   ========================================================= */
.music-page .record-needs-section{
  padding:0;
}

.music-page .record-needs-inner{
  max-width:none;
}

.music-page .record-needs-top.post-section-split{
  min-height:560px;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
}

.music-page .record-needs-top .post-section-copy-panel{
  max-width:none;
  margin:0;
  padding:75px clamp(42px,5.5vw,84px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.music-page .record-needs-top .post-section-media{
  min-height:560px;
  overflow:hidden;
}

.music-page .record-needs-top .post-section-media-podcast{
  padding:clamp(32px,4vw,56px);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#efe7d8;
}

.music-page .record-needs-top .post-section-media-podcast img{
  width:auto;
  max-width:100%;
  max-height:460px;
  height:auto;
  object-fit:contain;
  filter:none;
}

.music-page .record-needs-icons{
  width:min(1160px,88vw);
  margin-left:auto;
  margin-right:auto;
  margin-top:clamp(28px,3.2vw,42px);
  padding-bottom:clamp(64px,7vw,96px);
}

@media(max-width:760px){
  .music-page .record-needs-top.post-section-split{
    grid-template-columns:1fr;
  }

  .music-page .record-needs-top .post-section-copy-panel{
    padding:58px 7vw 66px;
  }

  .music-page .record-needs-top .post-section-media{
    min-height:auto;
  }

  .music-page .record-needs-top .post-section-media-podcast{
    padding:34px 7vw;
  }

  .music-page .record-needs-top .post-section-media-podcast img{
    width:100%;
    max-height:none;
  }
}

/* =========================================================
   TWEAK V3.4 — MUSIC / PRODUCTION IMAGE GRADE
   Heavy warm-brown CSS grade based on the Recording portrait.
   The supplied source photograph remains unchanged.
   ========================================================= */
.music-page .services .service-card:nth-child(2) .image-box{
  position:relative;
  background:#2d1d14;
}

.music-page .services .service-card:nth-child(2) .image-box img{
  filter:sepia(.62) saturate(.82) hue-rotate(-8deg) contrast(1.22) brightness(.72);
}

.music-page .services .service-card:nth-child(2) .image-box::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 54% 46%,rgba(130,78,40,.04) 0%,rgba(51,29,16,.18) 58%,rgba(24,13,8,.38) 100%);
  mix-blend-mode:multiply;
}

/* =========================================================
   LENNOX V1.8 — GIVE THE RECORD SOME SPACE COLLAGE
   Four supplied originals; all crops and tonal treatment are CSS only.
   ========================================================= */
.lennox-page .lennox-space-media{
  padding:44px;
}

.lennox-page .lennox-space-collage{
  width:min(100%,760px);
  aspect-ratio:4 / 3;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:58% 42%;
  gap:6px;
  overflow:hidden;
}

.lennox-page .lennox-space-collage figure{
  position:relative;
  min-width:0;
  min-height:0;
  margin:0;
  overflow:hidden;
  background:#211d1a;
}

.lennox-page .lennox-space-media .lennox-space-collage img{
  width:100%;
  height:100%;
  max-width:none;
  aspect-ratio:auto;
  object-fit:cover;
  filter:saturate(.78) contrast(1.06) brightness(.92);
}

.lennox-page .lennox-space-headland{
  grid-column:1 / 4;
  grid-row:1;
}

.lennox-page .lennox-space-headland img{
  object-position:66% 55%;
  transform:scale(1.55);
  transform-origin:66% 55%;
}

.lennox-page .lennox-space-cafe{
  grid-column:1;
  grid-row:2;
}

.lennox-page .lennox-space-cafe img{
  object-position:center center;
  transform:scale(2.1);
  transform-origin:54% 58%;
}

.lennox-page .lennox-space-beach{
  grid-column:2;
  grid-row:2;
}

.lennox-page .lennox-space-beach img{
  object-position:72% 50%;
}

.lennox-page .lennox-space-pandanus{
  grid-column:3;
  grid-row:2;
}

.lennox-page .lennox-space-pandanus img{
  object-position:63% center;
  transform:scale(1.1);
  transform-origin:63% center;
}

@media(max-width:760px){
  .lennox-page .lennox-space-media{
    padding:34px 7vw;
  }

  .lennox-page .lennox-space-collage{
    width:100%;
    aspect-ratio:auto;
    grid-template-columns:1fr 1fr;
    grid-template-rows:220px 260px 160px;
  }

  .lennox-page .lennox-space-headland{
    grid-column:1 / 3;
    grid-row:1;
  }

  .lennox-page .lennox-space-cafe{
    grid-column:1 / 3;
    grid-row:2;
  }

  .lennox-page .lennox-space-cafe img{
    transform:scale(1.9);
  }

  .lennox-page .lennox-space-beach{
    grid-column:1;
    grid-row:3;
  }

  .lennox-page .lennox-space-pandanus{
    grid-column:2;
    grid-row:3;
  }
}

/* =========================================================
   LAUNCH V1.1 — DEDICATED CONTACT PAGE
   Keep the approved three-column footer at its original height.
   The enquiry form now lives on contact.html.
   ========================================================= */
.site-footer .footer-form[hidden]{
  display:none !important;
}

.contact-page-main{
  min-height:620px;
  padding:clamp(58px,7vw,104px) 7vw;
  background:var(--cream);
}

.contact-page-layout{
  display:grid;
  grid-template-columns:minmax(250px,.75fr) minmax(0,1.25fr);
  gap:clamp(42px,7vw,100px);
  width:min(1120px,100%);
  margin:0 auto;
  align-items:start;
}

.contact-page-copy h1{
  margin:.2em 0 .5em;
  color:var(--red);
  font-family:Georgia,serif;
  font-size:clamp(38px,5vw,66px);
  font-weight:400;
  line-height:1.06;
}

.contact-page-copy > p:not(.eyebrow){
  max-width:520px;
  font-size:17px;
}

.contact-page-details{
  margin-top:32px;
  padding-top:26px;
  border-top:1px solid var(--line);
}

.contact-page-details .contact-line{
  justify-content:flex-start;
}

.contact-page-form-panel{
  padding:clamp(28px,4vw,48px);
  border:1px solid var(--line);
  background:var(--light);
}

.contact-page-form-panel > .eyebrow{
  margin:0 0 22px;
}

@media(max-width:760px){
  .contact-page-main{
    padding:46px 7vw 58px;
  }

  .contact-page-layout{
    grid-template-columns:1fr;
    gap:36px;
  }

  .contact-page-form-panel{
    padding:26px 20px;
  }
}

/* LAUNCH V1.2 — preserve natural proportions on responsive logos and images. */
img{
  height:auto;
}

.site-header .brand img,
.site-footer .footer-brand img{
  height:auto;
}

/* LAUNCH V1.3 — swap the homepage Hero and About photographs.
   All existing crop, fade, and responsive treatment is retained. */
.hero:first-of-type .hero-image{
  background-image:
    linear-gradient(
      90deg,
      #0b0b0b 0%,
      rgba(11,11,11,.98) 12%,
      rgba(11,11,11,.90) 24%,
      rgba(11,11,11,.68) 38%,
      rgba(11,11,11,.38) 50%,
      rgba(11,11,11,.14) 60%,
      rgba(11,11,11,0) 70%
    ),
    url("assets/hero-studio.webp");
}

.home-about-dark .about-image{
  background-image:
    linear-gradient(
      90deg,
      #0b0b0b 0%,
      rgba(11,11,11,.98) 12%,
      rgba(11,11,11,.90) 24%,
      rgba(11,11,11,.68) 38%,
      rgba(11,11,11,.38) 50%,
      rgba(11,11,11,.14) 60%,
      rgba(11,11,11,0) 70%
    ),
    url("assets/hero-home-beach.webp");
}

@media(max-width:760px){
  .hero:first-of-type .hero-image{
    background-image:
      linear-gradient(
        to bottom,
        #0b0b0b 0%,
        rgba(11,11,11,.72) 14%,
        rgba(11,11,11,0) 30%
      ),
      url("assets/hero-studio.webp");
  }

  .home-about-dark .about-image{
    background-image:
      linear-gradient(
        to bottom,
        #0b0b0b 0%,
        rgba(11,11,11,.72) 14%,
        rgba(11,11,11,0) 30%
      ),
      url("assets/hero-home-beach.webp");
  }
}