/* =========================================================
   DJP EXPERIENCE — Design System
   Dark navy + gold, slender geometric (Jost)
   ========================================================= */

:root{
  /* surfaces */
  --bg:        #0A1320;
  --bg-2:      #0C1828;
  --bg-3:      #102036;
  --panel:     #0E1B2D;

  /* gold */
  --gold:        #C8A559;
  --gold-bright: #E9D199;
  --gold-deep:   #9A7A39;
  --gold-grad:   linear-gradient(150deg,#EAD29A 0%,#C8A559 42%,#9C7C3C 72%,#D8BC78 100%);

  /* text — all gold tones (tonal hierarchy) */
  --ivory:   #ECD7A2;
  --soft:    #D2BC8B;
  --muted:   #A28F5E;
  --faint:   #6F5F39;
  --btn-fg:  #ECE6D8;

  /* lines */
  --line:        rgba(200,165,89,0.22);
  --line-soft:   rgba(236,230,216,0.10);
  --hair:        rgba(236,230,216,0.07);

  --maxw: 1240px;
  --gut: clamp(22px, 5vw, 64px);
  --sec: clamp(88px, 13vw, 168px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --font: 'Jost', system-ui, sans-serif;
  --font-wm: 'Montserrat', 'Jost', system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ivory);
  font-weight:300;
  line-height:1.7;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ambient grain / vignette over whole page */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 800px at 78% -8%, rgba(200,165,89,0.06), transparent 60%),
    radial-gradient(1000px 900px at 8% 110%, rgba(200,165,89,0.045), transparent 55%);
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(200,165,89,.28); color:#fff; }

/* ---------- shared layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); position:relative; z-index:1; }
.section{ padding-block:var(--sec); position:relative; z-index:1; background:var(--bg); }

.eyebrow{
  font-size:.72rem; font-weight:500; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); display:inline-flex; align-items:center; gap:.85em;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--gold); opacity:.6; }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{ content:""; width:34px; height:1px; background:var(--gold); opacity:.6; }

.s-title{
  font-weight:300; line-height:1.08; letter-spacing:.005em;
  font-size:clamp(2.1rem, 5.2vw, 3.7rem);
  color:var(--ivory); margin-top:.55em;
}
.s-title b{ font-weight:500; }
.gold-text{
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{ color:var(--soft); font-size:clamp(1rem,1.6vw,1.18rem); max-width:62ch; }
.muted{ color:var(--muted); }

.head{ max-width:760px; }
.head.center{ margin-inline:auto; text-align:center; }

/* ---------- buttons ---------- */
.btn{
  --pad:1.05em 1.9em;
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  padding:var(--pad); font-family:var(--font); font-size:.82rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; cursor:pointer;
  border:1px solid transparent; border-radius:2px; position:relative; overflow:hidden; isolation:isolate;
  transition:all .45s var(--ease); white-space:nowrap;
}
.btn > *{ position:relative; z-index:2; }
.btn-gold{
  color:#1a1304;
  background:linear-gradient(110deg,#9C7C3C 0%,#E7CD8F 18%,#C8A559 38%,#F4E4B4 55%,#BC9648 74%,#E7CD8F 100%);
  background-size:280% 100%;
  box-shadow:0 10px 30px -12px rgba(200,165,89,.55);
  animation:goldFlow 7s linear infinite;
}
/* travelling sheen */
.btn-gold::after{
  content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%; z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-22deg); animation:sheen 5s ease-in-out infinite; pointer-events:none;
}
.btn-gold:hover{ filter:brightness(1.07); transform:translateY(-2px); box-shadow:0 18px 44px -14px rgba(200,165,89,.75); }
@keyframes goldFlow{ 0%{ background-position:0% 50%; } 100%{ background-position:280% 50%; } }
@keyframes sheen{ 0%{ left:-70%; } 30%{ left:140%; } 100%{ left:140%; } }
@media (prefers-reduced-motion: reduce){
  .btn-gold{ animation:none; background:var(--gold-grad); }
  .btn-gold::after{ display:none; }
}
.btn-ghost{ background:transparent; color:var(--btn-fg); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-bright); transform:translateY(-2px); }
.btn-arrow{ font-size:1.1em; transition:transform .4s var(--ease); }
.btn:hover .btn-arrow{ transform:translateX(4px); }

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(16px,2.2vw,26px) var(--gut);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(9,17,28,.82); backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--hair);
  padding-block:clamp(12px,1.6vw,16px);
}
.nav-logo{ font-weight:500; font-size:1.18rem; letter-spacing:.5em; padding-left:.5em; font-family:var(--font-wm); }
.nav-logo span{ background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav-links{ display:flex; align-items:center; gap:clamp(20px,2.4vw,40px); list-style:none; }
.nav-links a{
  font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--soft);
  position:relative; padding-block:.4em; transition:color .35s var(--ease); font-weight:400;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold);
  transition:width .4s var(--ease);
}
.nav-links a:hover{ color:var(--gold-bright); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-cta .btn{ --pad:.78em 1.4em; font-size:.72rem; }

.burger{ display:none; flex-direction:column; gap:5px; width:30px; height:22px; justify-content:center; cursor:pointer; background:none; border:none; }
.burger span{ height:1.5px; width:100%; background:var(--ivory); transition:all .4s var(--ease); }
.burger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* mobile menu overlay */
.mobile-menu{
  position:fixed; inset:0; z-index:55; background:rgba(8,15,25,.97); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
}
.mobile-menu.open{ opacity:1; pointer-events:auto; }
.mobile-menu a{ font-size:1.5rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory); padding:.45em; font-weight:300; }
.mobile-menu a:active{ color:var(--gold); }
.mobile-menu .btn{ margin-top:18px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; z-index:1; }

/* shared wordmark logo (typeset, matches brand) */
.wordmark{ text-align:left; font-family:var(--font-wm); }
.wordmark .djp{
  font-weight:400; letter-spacing:.2em; line-height:1;
  font-size:clamp(3.6rem, 11vw, 8.2rem); padding-left:.2em;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wordmark .exp{
  font-weight:400; letter-spacing:.62em; text-transform:uppercase;
  font-size:clamp(.95rem,2.4vw,1.7rem); color:var(--gold); margin-top:.35em; padding-left:.32em;
}
.wordmark .rule{ width:62px; height:1px; background:var(--gold); opacity:.7; margin:1.3em 0 1.2em; }
.wordmark .tag{
  font-weight:400; letter-spacing:.34em; text-transform:uppercase; color:var(--soft);
  font-size:clamp(.66rem,1.5vw,.86rem);
}
.wordmark.center{ text-align:center; }
.wordmark.center .rule{ margin-inline:auto; }

.hero-slogan{
  margin-top:clamp(26px,4vw,40px); font-weight:300; line-height:1.35;
  font-size:clamp(1.15rem,2.3vw,1.6rem); color:var(--ivory); max-width:30ch;
}
.hero-intro{ margin-top:18px; color:var(--muted); max-width:44ch; font-size:clamp(.95rem,1.4vw,1.05rem); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(28px,4vw,42px); }

/* ---- Variant A : split ---- */
.hero-a .hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,70px);
  align-items:center; width:100%;
}
.hero-photo{
  position:relative; aspect-ratio:993/1099; border:1px solid var(--line);
  padding:10px; background:linear-gradient(160deg,rgba(200,165,89,.12),rgba(200,165,89,.02));
}
.hero-photo::after{
  content:""; position:absolute; inset:10px; border:1px solid rgba(236,230,216,.08); pointer-events:none;
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; filter:saturate(1.05) contrast(1.03); }
.hero-photo .corner{ position:absolute; width:16px; height:16px; border:1px solid var(--gold); opacity:.8; }
.hero-photo .corner.tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.hero-photo .corner.tr{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.hero-photo .corner.bl{ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.hero-photo .corner.br{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

/* ---- Variant B : full-bleed ---- */
.hero-b{ display:flex; }
.hero-b .hero-bg{ position:fixed; inset:0; z-index:0; }
.hero-b .hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:62% 22%; filter:saturate(1.02) contrast(1.02) brightness(.86); }
.hero-b .hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,15,25,.55) 0%, rgba(8,15,25,.35) 38%, rgba(8,15,25,.86) 100%),
    linear-gradient(90deg, rgba(8,15,25,.7) 0%, rgba(8,15,25,.15) 55%, rgba(8,15,25,.55) 100%);
}
.hero-b .hero-inner{ position:relative; z-index:2; width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; }
.hero-b .hero-slogan, .hero-b .hero-intro{ margin-inline:auto; }
.hero-b .hero-cta{ justify-content:center; }
.hero-b .frame{ position:absolute; inset:clamp(16px,2.2vw,30px); border:1px solid var(--line); z-index:3; pointer-events:none; }

/* ---- Disco ball light effect (fixed with the hero image) ---- */
.disco{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.disco .beams{
  position:absolute; width:170vmax; height:170vmax; top:14%; left:80%;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,
    transparent 0deg 7deg,
    rgba(232,206,142,.075) 7deg 9deg,
    transparent 9deg 17deg,
    rgba(255,255,255,.05) 17deg 19deg,
    transparent 19deg 27deg,
    rgba(232,206,142,.06) 27deg 30deg,
    transparent 30deg 40deg);
  -webkit-mask:radial-gradient(closest-side, #000 0%, rgba(0,0,0,.55) 42%, transparent 72%);
          mask:radial-gradient(closest-side, #000 0%, rgba(0,0,0,.55) 42%, transparent 72%);
  mix-blend-mode:screen; opacity:.85;
  animation:discoSpin 30s linear infinite;
}
.disco .spot{
  position:absolute; border-radius:50%; mix-blend-mode:screen; opacity:0;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(232,206,142,.55) 38%, transparent 70%);
  filter:blur(.4px);
  animation:spotTwinkle var(--dur,5s) ease-in-out infinite, spotDrift var(--ddur,16s) ease-in-out infinite alternate;
  animation-delay:var(--del,0s), var(--del,0s);
}
@keyframes discoSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes spotTwinkle{ 0%,100%{ opacity:0; transform:scale(.5); } 45%,55%{ opacity:var(--op,.7); transform:scale(1); } }
@keyframes spotDrift{ from{ translate:0 0; } to{ translate:var(--dx,12px) var(--dy,-14px); } }
@media (prefers-reduced-motion: reduce){ .disco{ display:none; } }

/* hero is fixed to the full-bleed layout */

/* scroll cue */
.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:9px; color:var(--muted);
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
}
.scroll-cue .ln{ width:1px; height:42px; background:linear-gradient(var(--gold),transparent); animation:cue 2.4s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%{ transform:scaleY(0); opacity:0; } 30%{ opacity:1; } 100%{ transform:scaleY(1); opacity:0; } }

/* hero variant switch control */
.variant-switch{
  position:fixed; z-index:70; bottom:22px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:4px; padding:5px;
  background:rgba(12,22,36,.82); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:100px;
  box-shadow:0 14px 40px -16px rgba(0,0,0,.7);
}
.variant-switch .lbl{ font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); padding:0 10px 0 12px; }
.variant-switch button{
  font-family:var(--font); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--soft); background:transparent; border:none; cursor:pointer; white-space:nowrap;
  padding:.55em 1.15em; border-radius:100px; transition:all .35s var(--ease);
}
.variant-switch button.active{ background:var(--gold-grad); color:#1a1304; font-weight:500; }

/* =========================================================
   GENERIC SECTION PIECES
   ========================================================= */
.divider-rule{ height:1px; background:var(--hair); border:none; }

/* BIO */
.bio-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,90px); align-items:center; }
.bio-figures{ display:grid; grid-template-columns:1fr; gap:18px; }
.stat-row{ display:flex; gap:clamp(28px,5vw,64px); margin-top:38px; flex-wrap:wrap; }
.stat .n{ font-size:clamp(2.2rem,4vw,3rem); font-weight:300; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }
.stat .l{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:.7em; }
.bio-portrait{ position:relative; border:1px solid var(--line); padding:9px; overflow:hidden; }
.bio-portrait img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 16%; }
.bio-portrait .cap{ position:absolute; left:9px; right:9px; bottom:9px; padding:16px 18px; background:linear-gradient(transparent,rgba(8,14,23,.92)); }
.bio-note{ border-left:1px solid var(--line); padding-left:22px; margin-top:28px; color:var(--muted); font-style:italic; }
.placeholder-tag{ display:inline-block; font-family:ui-monospace,monospace; font-size:.66rem; letter-spacing:.08em; color:var(--gold-deep); border:1px dashed var(--line); padding:.3em .7em; border-radius:2px; margin-top:14px; }

/* SERVICES */
.svc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,34px); }
.svc-card{
  position:relative; padding:clamp(30px,4vw,52px); border:1px solid var(--line-soft);
  background:linear-gradient(165deg,var(--bg-2),var(--bg)); overflow:hidden;
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.svc-card::before{
  content:""; position:absolute; inset:0; background:radial-gradient(420px 300px at 100% 0%, rgba(200,165,89,.10), transparent 70%);
  opacity:0; transition:opacity .55s var(--ease);
}
.svc-card:hover{ border-color:var(--line); transform:translateY(-4px); }
.svc-card:hover::before{ opacity:1; }
.svc-num{ font-size:.72rem; letter-spacing:.3em; color:var(--gold); }
.svc-card h3{ font-weight:300; font-size:clamp(1.5rem,2.6vw,2.05rem); margin:.7em 0 .5em; letter-spacing:.01em; }
.svc-card p{ color:var(--muted); font-size:.98rem; }
.svc-list{ list-style:none; margin-top:22px; display:flex; flex-direction:column; gap:11px; }
.svc-list li{ display:flex; gap:12px; align-items:flex-start; color:var(--soft); font-size:.92rem; }
.svc-list li::before{ content:""; width:6px; height:6px; margin-top:.6em; flex:none; background:var(--gold); transform:rotate(45deg); opacity:.85; }

/* MUSIC GENRES — editorial list, no numbering */
.genre-list{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(44px,6vw,96px); }
.genre-row{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:clamp(18px,2.3vw,28px) 2px; border-top:1px solid var(--hair); position:relative; cursor:default;
  transition:padding-left .55s var(--ease);
}
.genre-row:hover{ padding-left:16px; }
.genre-row .g-name{
  font-family:var(--font); font-size:clamp(1.4rem,2.5vw,2rem); font-weight:300; letter-spacing:.01em; color:var(--ivory);
  transition:color .5s var(--ease); line-height:1.15; white-space:nowrap;
}
.genre-row .g-name.wrap{ white-space:normal; }
.genre-row:hover .g-name{ background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.genre-row .g-mark{ flex:none; width:9px; height:9px; transform:rotate(45deg) scale(0); transform-origin:center; background:var(--gold-grad); transition:transform .5s var(--ease); }
.genre-row:hover .g-mark{ transform:rotate(45deg) scale(1); }
.genre-row::after{ content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--gold-grad); transition:width .6s var(--ease); }
.genre-row:hover::after{ width:100%; }

/* AUDIO / Hörproben */
.audio-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(18px,2.4vw,26px); }
.track{
  display:flex; align-items:center; gap:20px; min-width:0; padding:22px clamp(20px,2.4vw,28px);
  border:1px solid var(--line-soft); background:var(--bg-2); transition:border-color .45s var(--ease), background .45s var(--ease);
}
.track:hover{ border-color:var(--line); background:var(--bg-3); }
.track .play{
  width:52px; height:52px; flex:none; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--gold); transition:all .4s var(--ease);
}
.track:hover .play{ background:var(--gold-grad); color:#16100333; border-color:transparent; }
.track:hover .play svg{ color:#1a1304; }
.track .meta{ flex:1; min-width:0; }
.track .t-name{ font-size:1.02rem; color:var(--ivory); font-weight:400; }
.track .t-sub{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:3px; }
.track .wave{ display:flex; align-items:center; gap:3px; height:26px; min-width:0; flex:1 1 0; overflow:hidden; }
.track .wave i{ width:2.5px; background:var(--gold-deep); opacity:.6; border-radius:2px; }
.track .t-dur{ font-size:.78rem; color:var(--muted); flex:none; font-variant-numeric:tabular-nums; }
.sc-embed{
  margin-top:clamp(22px,3vw,34px); border:1px dashed var(--line); padding:clamp(26px,4vw,40px);
  text-align:center; background:var(--bg-2);
}
.sc-embed .sc-ico{ width:56px; height:56px; margin:0 auto 16px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--gold); }

/* PROCESS / Ablauf */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.step{ background:var(--bg); padding:clamp(28px,3.2vw,42px) clamp(22px,2.4vw,30px); position:relative; }
.step .sn{
  font-size:clamp(2.1rem,3.6vw,2.8rem); line-height:1;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.45));
}
.step h4{ font-weight:400; font-size:1.12rem; margin:.7em 0 .45em; letter-spacing:.02em; }
.step p{ color:var(--muted); font-size:.9rem; }
.step .dot{ position:absolute; top:clamp(28px,3.2vw,42px); right:clamp(22px,2.4vw,30px); width:7px; height:7px; background:var(--gold); transform:rotate(45deg); }

/* CONTACT */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,5vw,72px); align-items:start; }
.contact-aside h3{ font-weight:300; font-size:clamp(1.6rem,2.6vw,2.1rem); margin-bottom:18px; }
.contact-info{ list-style:none; display:flex; flex-direction:column; gap:26px; margin-top:30px; }
.contact-info li{ display:flex; gap:14px; align-items:flex-start; color:var(--soft); }
.contact-info .ci-ico{ color:var(--gold); margin-top:2px; flex:none; }
.contact-info .ci-l{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.contact-info .ci-v{ font-size:1rem; color:var(--ivory); line-height:1.4; word-break:break-word; }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:20px 22px; }
.field{ display:flex; flex-direction:column; gap:9px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.field label .req{ color:var(--gold); }
.field input, .field select, .field textarea{
  font-family:var(--font); font-size:.98rem; font-weight:300; color:var(--ivory);
  background:var(--bg-2); border:1px solid var(--line-soft); border-radius:2px;
  padding:.95em 1.05em; transition:border-color .4s var(--ease), background .4s var(--ease); width:100%;
}
.field textarea{ resize:vertical; min-height:130px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); background:var(--bg-3); }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C8A559' stroke-width='1.4' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1.1em center; padding-right:2.6em; }
.field select option{ background:#0C1828; color:var(--ivory); }
.form-foot{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:6px; }
.form-note{ font-size:.78rem; color:var(--muted); max-width:42ch; }
.form-ok{ grid-column:1/-1; display:none; align-items:center; gap:12px; padding:16px 20px; border:1px solid var(--line); background:rgba(200,165,89,.07); color:var(--gold-bright); font-size:.92rem; }
.form-ok.show{ display:flex; }

/* SOCIAL / Instagram */
.ig-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1vw,14px); }
.ig-tile{
  position:relative; aspect-ratio:1; overflow:hidden; border:1px solid var(--line-soft);
  background:repeating-linear-gradient(135deg,#0E1B2D,#0E1B2D 11px,#0C1828 11px,#0C1828 22px);
  display:grid; place-items:center; transition:border-color .45s var(--ease);
}
.ig-tile:hover{ border-color:var(--line); }
.ig-tile .ig-ph{ font-family:ui-monospace,monospace; font-size:.6rem; letter-spacing:.06em; color:var(--faint); text-align:center; padding:0 8px; }
.ig-tile .ig-ov{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; background:rgba(8,14,23,.7); color:var(--gold); transition:opacity .4s var(--ease); }
.ig-tile:hover .ig-ov{ opacity:1; }
.social-links{ display:flex; gap:16px; flex-wrap:wrap; margin-top:30px; }
.social-btn{ display:inline-flex; align-items:center; gap:12px; padding:.95em 1.6em; border:1px solid var(--line); color:var(--ivory); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; transition:all .4s var(--ease); }
.social-btn:hover{ border-color:var(--gold); color:var(--gold-bright); transform:translateY(-2px); }
.social-btn svg{ color:var(--gold); }

/* FOOTER */
.footer{ border-top:1px solid var(--hair); padding-block:clamp(54px,7vw,84px) 40px; position:relative; z-index:1; background:var(--bg); }
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start; }
.footer .wordmark .djp{ font-size:clamp(2.4rem,5vw,3.2rem); }
.footer-nav{ display:flex; gap:clamp(26px,4vw,56px); flex-wrap:wrap; }
.footer-col h5{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; font-weight:500; }
.footer-col a, .footer-col span{ display:block; color:var(--muted); font-size:.9rem; padding:5px 0; transition:color .35s var(--ease); }
.footer-col a:hover{ color:var(--gold-bright); }
.footer-bottom{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:clamp(44px,6vw,72px); padding-top:26px; border-top:1px solid var(--hair); color:var(--faint); font-size:.78rem; letter-spacing:.04em; }
.footer-bottom a{ color:var(--muted); }
.footer-bottom a:hover{ color:var(--gold); }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{ opacity:1; transform:none; }
html.js .reveal{ opacity:0; transform:translateY(34px); transition:opacity 1.2s var(--ease), transform 1.2s var(--ease); will-change:opacity,transform; }
html.js .reveal.r-left{ transform:translateX(-46px); }
html.js .reveal.r-right{ transform:translateX(46px); }
html.js .reveal.r-scale{ transform:scale(.92); }
html.js .reveal.r-up{ transform:translateY(60px); }
html.js .reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
.reveal.d5{ transition-delay:.40s; } .reveal.d6{ transition-delay:.48s; }
.reveal.d7{ transition-delay:.56s; } .reveal.d8{ transition-delay:.64s; } .reveal.d9{ transition-delay:.72s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } }

/* hero entrance — base state is always VISIBLE (robust first paint, no blank).
   A gentle fade-up plays only when JS is ready and motion is allowed. */
.hero .anim{ opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference){
  html.js .hero .anim{ opacity:.85; transform:translateY(18px); transition:opacity 1s var(--ease), transform 1.1s var(--ease); }
  html.js.ready .hero .anim{ opacity:1; transform:none; }
  .hero .a1{ transition-delay:.10s; } .hero .a2{ transition-delay:.24s; }
  .hero .a3{ transition-delay:.38s; } .hero .a4{ transition-delay:.52s; } .hero .a5{ transition-delay:.66s; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1000px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .nav-cta .btn{ display:none; }
  .hero-a .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .hero-a .hero-photo{ order:-1; max-width:420px; }
  .bio-grid{ grid-template-columns:1fr; }
  .bio-portrait{ max-width:440px; }
  .contact-grid{ grid-template-columns:1fr; }
  .genre-list{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .ig-grid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width: 640px){
  .svc-grid{ grid-template-columns:1fr; }
  .audio-grid{ grid-template-columns:1fr; }
  .genre-list{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .form{ grid-template-columns:1fr; }
  .ig-grid{ grid-template-columns:repeat(2,1fr); }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
  .variant-switch{ bottom:14px; }
  .footer-top{ flex-direction:column; }
}