/* ===== COLORS - change the accent here ===== */
:root{
  --bg:#0a0a0a; --card:#141414; --card-hover:#1c1c1c; --line:#2a2a2a;
  --text:#ffffff; --muted:#c9c9c9;
  --accent:#F5C518; --red:#E0262D; --green:#1FA64A;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;height:100%;background:transparent;color:var(--text);font-family:'Heebo',sans-serif}
body.home{overflow:hidden}
a{color:inherit;text-decoration:none}
svg{display:block}

/* ----- scrollbar ----- */
html{scrollbar-width:thin;scrollbar-color:var(--accent) var(--bg)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#ffd84d}

/* ----- skip link (keyboard/screen-reader users can jump past the logo/back-link) ----- */
.skip-link{position:fixed;z-index:100;top:-60px;inset-inline-start:16px;background:var(--accent);
  color:#0a0a0a;padding:10px 20px;border-radius:8px;font-weight:900;font-size:14px;transition:top .15s ease}
.skip-link:focus{top:16px}

.page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto;
  height:100vh;height:100dvh;width:100vw;max-width:1600px;margin:0 auto}

/* ----- photo ----- */
.photo{position:relative;overflow:hidden;min-height:0;order:2}
.photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 38%;
  opacity:0;transition:opacity .5s ease}
.photo>img.loaded{opacity:1}
.photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to left,var(--bg) 0%,rgba(10,10,10,0) 22%),linear-gradient(to top,var(--bg) 0%,rgba(10,10,10,0) 30%)}
.photo .brand-mark{position:absolute;z-index:2;left:0;top:clamp(14px,2.5vh,32px);
  width:clamp(160px,26vw,340px);filter:drop-shadow(0 4px 14px rgba(0,0,0,.7))}
.photo .brand-mark img{display:block;width:100%;height:auto}

.slogan{position:absolute;z-index:1;left:clamp(20px,3vw,48px);bottom:clamp(20px,4vh,56px);transform:rotate(-6deg);display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.slogan p{margin:0;font-family:'Amatic SC',cursive;font-size:clamp(24px,4.4vh,56px);line-height:1;text-align:center}

/* logo mark mirrors to the opposite corner of the photo at every size (mobile included - the
   photo is a full-width banner there, but the corner it sits in should still follow language) */
html[dir="ltr"] .photo .brand-mark{left:auto;right:0}

/* the photo's fade and the slogan are desktop-only mirrors (min-width:901px): on mobile the
   photo is full-width and stacked on top, so its fade only ever needs to go vertical (handled
   separately below), and these would otherwise out-specificity the dedicated mobile rules */
@media (min-width:901px){
  html[dir="ltr"] .photo::after{background:linear-gradient(to right,var(--bg) 0%,rgba(10,10,10,0) 22%),linear-gradient(to top,var(--bg) 0%,rgba(10,10,10,0) 30%)}
  html[dir="ltr"] .slogan{left:auto;right:clamp(20px,3vw,48px);align-items:flex-end}
}

/* ----- content ----- */
.content{order:1;min-height:0;padding:3vh clamp(24px,4vw,64px) 2vh;display:flex;flex-direction:column;justify-content:space-between;gap:1.6vh;overflow:hidden}
.kicker{display:flex;align-items:center;gap:clamp(8px,1vw,14px);font-size:clamp(16px,3.4vh,40px);font-weight:900;line-height:1}
.kicker svg{width:clamp(24px,4.2vh,48px);height:auto}
h1{margin:.3vh 0 0;font-size:clamp(30px,6.6vh,72px);font-weight:900;line-height:.95;letter-spacing:-1px;
  background:linear-gradient(to left,var(--red),var(--accent),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.stripe{display:flex;max-width:min(70%,560px);height:clamp(4px,.7vh,8px);margin-top:1vh}
.stripe i{flex:1}
.tagline{margin:1vh 0 0;font-size:clamp(11px,1.9vh,20px);font-weight:500;color:#e8e8e8}
.tagline b{color:var(--accent);font-weight:500}

/* ----- service buttons ----- */
.services{display:flex;flex-direction:column;justify-content:center;gap:1vh;min-height:0}
.svc{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px);padding:.9vh clamp(12px,1.4vw,18px) .9vh clamp(14px,1.8vw,24px);background:var(--card);border:1px solid var(--line);border-radius:999px;
  transition:transform .15s ease,border-color .15s ease,background-color .15s ease}
.svc:hover{transform:translateX(-6px);border-color:var(--accent);background:var(--card-hover)}
.icon{width:clamp(30px,4.4vh,52px);height:clamp(30px,4.4vh,52px);flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center}
.icon svg{width:55%;height:55%}
.red{background:var(--red)} .yellow{background:var(--accent)} .green{background:var(--green)}
.svc-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.svc-title{font-size:clamp(13px,2vh,23px);font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svc-title small{font-weight:500;font-size:.72em}
.svc-sub{font-size:clamp(9px,1.3vh,14px);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arrow{width:clamp(16px,2.2vh,24px);height:clamp(16px,2.2vh,24px);flex-shrink:0}

/* ----- CTA ----- */
.contact{display:flex;align-items:center;gap:clamp(10px,1.2vw,16px)}
.cta{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.2vw,14px);height:clamp(40px,6.4vh,64px);border:3px solid var(--accent);border-radius:999px;
  font-size:clamp(14px,2.4vh,25px);font-weight:900;transition:background-color .15s ease}
.cta:hover{background:#1a1a1a}
.cta span b{color:var(--accent)}
.soc{width:clamp(40px,6.4vh,64px);height:clamp(40px,6.4vh,64px);flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .15s ease}
.soc:hover{transform:scale(1.08)}
.soc svg{width:48%;height:48%}
.fb{background:#1877F2}

.svc:focus-visible,.cta:focus-visible,.soc:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ----- features ----- */
.features{grid-column:1 / -1;order:3;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:1.6vh clamp(24px,4vw,64px);border-top:1px solid var(--line)}
.feat{display:flex;flex-direction:column;align-items:center;gap:.6vh;font-size:clamp(10px,1.5vh,16px);font-weight:500;text-align:center}
.feat + .feat{border-right:1px solid var(--line)}
.feat svg{width:clamp(20px,3vh,32px);height:clamp(20px,3vh,32px)}
.feat{transition:color .15s ease}
a.feat{cursor:pointer}
a.feat:hover, a.feat:focus-visible{color:var(--accent)}
a.feat:hover svg, a.feat:focus-visible svg{stroke:var(--accent)}

/* ===== MOBILE ===== */
@media (max-width:900px){
  html,body{overflow:auto}
  .page{grid-template-columns:1fr;grid-template-rows:none;height:auto;min-height:100vh;min-height:100dvh}
  .photo{order:0;min-height:0;height:440px}
  .photo::after{background:linear-gradient(to top,var(--bg) 0%,rgba(10,10,10,0) 45%)}
  .slogan{left:20px;bottom:28px}
  html[dir="ltr"] .slogan{left:auto;right:20px;align-items:flex-end}
  .content{order:1;padding:8px 20px 32px;gap:28px}
  .stripe{max-width:none;height:6px}
  .svc{gap:14px;padding:10px 12px 10px 16px}
  .icon{width:52px;height:52px}
  .arrow{width:22px;height:22px}
  .contact{flex-direction:column;align-items:stretch}
  .cta{flex:none;height:64px}
  .socials{display:flex;justify-content:center;gap:16px}
  .soc{width:60px;height:60px}
  .features{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:20px 20px 40px}
  .feat{padding:12px 0}
  .feat + .feat{border-right:0}
  .feat svg{width:30px;height:30px}
}
@media (min-width:901px){ .socials{display:contents} }

/* ----- small logo mark, fixed top-left, shown on every subpage ----- */
.corner-logo{position:fixed;z-index:5;top:clamp(14px,2.5vh,28px);inset-inline-end:clamp(14px,2.5vw,32px);
  width:clamp(110px,16vw,190px);filter:drop-shadow(0 3px 10px rgba(0,0,0,.6))}
.corner-logo img{display:block;width:100%;height:auto}

/* ----- language switcher, fixed top-right on every page regardless of language/direction ----- */
.lang-switch{position:fixed;z-index:6;top:clamp(14px,2.5vh,28px);left:50%;transform:translateX(-50%);
  display:flex;gap:4px;background:rgba(20,20,20,.7);border:1px solid var(--line);border-radius:999px;padding:4px;
  backdrop-filter:blur(4px)}
.lang-switch a{padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;color:var(--muted);
  transition:background-color .15s ease,color .15s ease}
.lang-switch a:hover,.lang-switch a:focus-visible{color:#fff}
.lang-switch a.active{background:var(--accent);color:#0a0a0a}
@media (max-width:900px){.lang-switch{top:10px}.lang-switch a{padding:4px 9px;font-size:11px}}

/* ----- optional full-page background photo for a subpage ----- */
.sub-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--bg)}
.sub-bg img{width:100%;height:100%;object-fit:cover;object-position:left center;
  filter:sepia(.65) saturate(1.6) contrast(1.25) brightness(.85) hue-rotate(-10deg);
  opacity:0;transition:opacity .5s ease}
.sub-bg img.loaded{opacity:1}
.sub-bg.contain img{position:absolute;inset-inline-end:0;top:0;
  width:auto;height:100%;object-fit:contain;
  -webkit-mask-image:linear-gradient(to left,transparent 0%,rgba(0,0,0,.25) 15%,rgba(0,0,0,.65) 30%,black 48%);
  mask-image:linear-gradient(to left,transparent 0%,rgba(0,0,0,.25) 15%,rgba(0,0,0,.65) 30%,black 48%)}
.sub-bg::before{content:'';position:absolute;inset:0;background:#3a1f0d;mix-blend-mode:color;opacity:.35}
.sub-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to left,var(--bg) 0%,rgba(10,10,10,.8) 28%,rgba(10,10,10,.4) 55%,rgba(10,10,10,0) 82%)}

/* keep the text on the dark side, opposite whichever side the photo mirrors to */
.sub-bg + .sub-wrap{margin-inline:0 auto;max-width:640px}

/* LTR mirrors the photo to the right, so its fade/crop-focus/mask need the opposite edge too */
html[dir="ltr"] .sub-bg img{object-position:right center}
html[dir="ltr"] .sub-bg::after{background:linear-gradient(to right,var(--bg) 0%,rgba(10,10,10,.8) 28%,rgba(10,10,10,.4) 55%,rgba(10,10,10,0) 82%)}
html[dir="ltr"] .sub-bg.contain img{-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.25) 15%,rgba(0,0,0,.65) 30%,black 48%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.25) 15%,rgba(0,0,0,.65) 30%,black 48%)}

/* ===== SUBPAGES (recommendations / artists / quality / equipment) ===== */
.sub-wrap{max-width:900px;margin:0 auto;padding:6vh clamp(24px,5vw,64px) 10vh}
.back{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin-bottom:4vh;transition:color .15s ease}
.back:hover,.back:focus-visible{color:var(--accent)}
.back svg{width:18px;height:18px}

.sub-kicker{display:flex;align-items:center;gap:10px;margin-bottom:1.5vh}
.sub-kicker svg{width:26px;height:auto;flex-shrink:0}
.sub-kicker-text{display:flex;flex-direction:column;line-height:1.25}
.sub-kicker-brand{font-family:'Bungee',cursive;font-size:clamp(20px,3.4vh,34px);color:var(--accent);letter-spacing:.02em}
.sub-kicker-tagline{font-family:'Bungee',cursive;font-size:clamp(9px,1.3vh,14px);color:var(--muted);letter-spacing:.12em}

.sub-title{font-size:clamp(32px,6vw,56px);font-weight:900;line-height:1.05;margin:0 0 1.2vh;letter-spacing:-1px;
  background:linear-gradient(to left,var(--red),var(--accent),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub-stripe{display:flex;width:200px;height:5px;margin:0 0 2vh;border-radius:3px;overflow:hidden}
.sub-stripe i{flex:1}
.sub-lead{font-size:clamp(15px,2vw,19px);color:#e8e8e8;max-width:60ch;margin:0 0 5vh;line-height:1.7}

/* ----- testimonials (recommendations.html) ----- */
.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.testi-card{background:rgba(20,20,20,.65);border:1px solid var(--line);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:16px}
.testi-quote{font-size:17px;line-height:1.7;color:#f0f0f0;margin:0}
.testi-who{display:flex;align-items:center;gap:12px;margin-top:auto}
.testi-avatar{width:44px;height:44px;border-radius:50%;background:var(--card-hover);border:1px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--accent)}
.testi-name{font-weight:700;font-size:15px}
.testi-role{font-size:13px;color:var(--muted)}
.edit-note{border:1px dashed var(--line);border-radius:14px;padding:16px 20px;color:var(--muted);font-size:14px;line-height:1.7;margin-top:1vh}

/* ----- full recommendation letter (recommendations.html) ----- */
.letter-card{background:rgba(20,20,20,.65);border:1px solid var(--line);border-radius:20px;padding:clamp(24px,4vw,44px);margin-top:4vh;max-width:65ch}
.letter-date{font-size:13px;color:var(--muted);margin-bottom:1.6em}
.letter-to{font-weight:700;color:#fff;margin-bottom:1.6em}
.letter-subject{font-weight:900;color:var(--accent);text-decoration:underline;margin-bottom:1.4em}
.letter-card p{font-size:15px;line-height:1.85;color:#e8e8e8;margin:0 0 1.15em}
.letter-card ul{list-style:none;margin:0 0 1.15em;padding:0;display:flex;flex-direction:column;gap:1em}
.letter-card li{position:relative;padding-inline-start:20px;font-size:15px;line-height:1.85;color:#e8e8e8}
.letter-card li::before{content:'';position:absolute;inset-inline-start:0;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.letter-sign{margin-top:1.8em;font-weight:700;color:#fff;line-height:1.6}
.letter-sign div{font-weight:500;color:var(--muted);font-size:13.5px}
.letter-sign div:first-child{font-weight:700;color:#fff;font-size:15px}
.placeholder{color:var(--muted);font-style:italic}

/* ----- tag lists (artists.html) ----- */
.tag-section+.tag-section{margin-top:5vh}
.tag-section h2{font-size:20px;font-weight:900;margin:0 0 16px;color:#fff}
.tag-list{display:flex;flex-wrap:wrap;gap:10px}
.tag{padding:10px 18px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:14px;color:#e8e8e8}
a.tag{transition:border-color .15s ease,color .15s ease,background-color .15s ease}
a.tag:hover,a.tag:focus-visible{border-color:var(--accent);color:#fff;background:var(--card-hover)}

/* ----- credit cards (image + name, artists.html) ----- */
.credit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:18px}
.credit-card{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;transition:transform .15s ease}
.credit-card:hover{transform:translateY(-4px)}
.credit-thumb{width:100%;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:border-color .15s ease}
.credit-card:hover .credit-thumb,.credit-card:focus-visible .credit-thumb{border-color:var(--accent)}
.credit-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.credit-thumb.fallback{font-family:'Heebo',sans-serif;font-weight:900;font-size:2rem}
.credit-thumb.fallback.red{color:var(--red)} .credit-thumb.fallback.yellow{color:var(--accent)} .credit-thumb.fallback.green{color:var(--green)}
.credit-name{font-size:13px;color:#e8e8e8;font-weight:600;line-height:1.3}

/* ----- principle blocks (quality.html) ----- */
.principle-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.principle{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px}
.principle .icon-badge{width:48px;height:48px;margin-bottom:14px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.principle .icon-badge svg{width:55%;height:55%}
.principle h3{margin:0 0 8px;font-size:18px;font-weight:900;color:#fff}
.principle p{margin:0;font-size:14px;line-height:1.7;color:var(--muted)}

/* ----- equipment list (equipment.html) ----- */
.equip-section+.equip-section{margin-top:5vh}
.equip-section h2{font-size:20px;font-weight:900;margin:0 0 16px;color:#fff}
.equip-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.equip-list li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;font-size:14px;color:#e8e8e8}

@media (max-width:700px){
  .testi-grid,.principle-grid,.equip-list{grid-template-columns:1fr}
}

/* ----- long-form article content on a service page ----- */
.article{max-width:65ch}
.article-card{background:rgba(20,20,20,.65);border:1px solid var(--line);border-radius:20px;
  padding:clamp(20px,3vw,30px) clamp(20px,3.4vw,32px);margin:0 0 2vh}
.article-card:last-of-type{margin-bottom:0}
.article-card h2{font-size:clamp(18px,2.4vw,23px);font-weight:900;color:var(--accent);margin:0 0 1.1vh}
.article-card p{font-size:15px;line-height:1.85;color:#e8e8e8;margin:0 0 1.1em}
.article-card p:last-child{margin-bottom:0}
.article strong{color:#fff}

/* ----- service pages (recordings/mixing/mastering/podcasts/production/beats) ----- */
.svc-list{list-style:none;margin:0 0 5vh;padding:0;display:flex;flex-direction:column;gap:14px;max-width:60ch}
.svc-list li{position:relative;padding-inline-start:22px;font-size:15px;line-height:1.7;color:#e8e8e8}
.svc-list li::before{content:'';position:absolute;inset-inline-start:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.svc-cta{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border:3px solid var(--accent);border-radius:999px;font-weight:900;font-size:18px;transition:background-color .15s ease}
.svc-cta:hover,.svc-cta:focus-visible{background:#1a1a1a}

/* ----- staggered content reveal on page load ----- */
@keyframes reveal-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* homepage */
header{animation:reveal-up .6s ease both}
.services .svc:nth-child(1){animation:reveal-up .5s ease .08s both}
.services .svc:nth-child(2){animation:reveal-up .5s ease .14s both}
.services .svc:nth-child(3){animation:reveal-up .5s ease .20s both}
.services .svc:nth-child(4){animation:reveal-up .5s ease .26s both}
.services .svc:nth-child(5){animation:reveal-up .5s ease .32s both}
.services .svc:nth-child(6){animation:reveal-up .5s ease .38s both}
.contact{animation:reveal-up .5s ease .44s both}
.features .feat:nth-child(1){animation:reveal-up .5s ease .50s both}
.features .feat:nth-child(2){animation:reveal-up .5s ease .54s both}
.features .feat:nth-child(3){animation:reveal-up .5s ease .58s both}
.features .feat:nth-child(4){animation:reveal-up .5s ease .62s both}

/* service/sub pages */
.sub-wrap>.back{animation:reveal-up .5s ease both}
.sub-kicker{animation:reveal-up .5s ease .08s both}
.sub-title{animation:reveal-up .5s ease .16s both}
.sub-stripe{animation:reveal-up .5s ease .22s both}
.sub-lead{animation:reveal-up .6s ease .28s both}
.article{animation:reveal-up .6s ease .28s both}
.svc-cta{animation:reveal-up .5s ease .34s both}

@media (prefers-reduced-motion:reduce){
  header,.services .svc,.contact,.features .feat,
  .sub-wrap>.back,.sub-kicker,.sub-title,.sub-stripe,.sub-lead,.article,.svc-cta{
    animation:none;opacity:1;transform:none}
}